Try Layout Block Half Image Half Content

core-blocks/index.js

@@ -26,6 +26,9 @@ import * as coverImage from './cover-image';
 import * as embed from './embed';
 import * as file from './file';
 import * as freeform from './freeform';
+import * as halfMediaText from './layout-half-media-text';
+import * as halfMediaTextContent from './layout-half-media-text/content-area';
+import * as halfMediaTextMedia from './layout-half-media-text/media-area';
 import * as html from './html';
 import * as latestPosts from './latest-posts';
 import * as list from './list';
@@ -68,6 +71,9 @@ export const registerCoreBlocks = () => {
 		...embed.others,
 		file,
 		freeform,
+		halfMediaText,
+		halfMediaTextContent,
+		halfMediaTextMedia,
 		html,
 		latestPosts,
 		more,

core-blocks/layout-half-media-text/content-area.js

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { InnerBlocks } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import './editor.scss';
+
+export const name = 'core/half-media-content-area';
+
+const ALLOWED_BLOCKS = [ 'core/button', 'core/paragraph', 'core/heading' ];
+
+export const settings = {
+	attributes: {},
+
+	title: __( 'Content Area' ),
+
+	parent: [ 'core/half-media' ],
+
+	icon: 'format-image',
+
+	category: 'common',
+
+	edit() {
+		return (
+			<div className="half-media__content">
+				<InnerBlocks
+					template={ [
+						[ 'core/heading', { level: 4 } ],
+						[ 'core/paragraph' ],
+					] }
+					allowedBlocks={ ALLOWED_BLOCKS }
+					templateLock={ false }
+				/>
+			</div>
+		);
+	},
+
+	save() {
+		return <div className="half-media__content"><InnerBlocks.Content /></div>;
+	},
+};

core-blocks/layout-half-media-text/editor.scss

@@ -0,0 +1,27 @@
+.half-media__media .block-alignment-toolbar {
+		display: none;
+}
+
+.half-media {
+	display: block;
+}
+
+.half-media > .editor-inner-blocks > .editor-block-list__layout {
+	display: flex;
+	> [data-type="core/half-media-media-area"],
+	> [data-type="core/half-media-content-area"] {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		width: 0;
+		.editor-block-list__block-edit {
+			flex-basis: 100%;
+		}
+	}
+	> [data-type="core/half-media-content-area"] > .editor-block-list__block-edit {
+		display: flex;
+	}
+}
+
+
+

core-blocks/layout-half-media-text/index.js

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	InnerBlocks,
+} from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import './editor.scss';
+
+export const name = 'core/half-media';
+
+export const settings = {
+	title: __( 'Half Media' ),
+
+	icon: 'columns',
+
+	category: 'layout',
+
+	attributes: {
+	},
+
+	supports: {
+		align: [ 'wide', 'full' ],
+	},
+
+	edit() {
+		return (
+			<div className="half-media">
+				<InnerBlocks
+					template={ [
+						[ 'core/half-media-media-area' ],
+						[ 'core/half-media-content-area' ],
+					] }
+					templateLock="all"
+				/>
+			</div>
+		);
+	},
+
+	save() {
+		return (
+			<div className="half-media">
+				<InnerBlocks.Content />
+			</div>
+		);
+	},
+};

core-blocks/layout-half-media-text/media-area.js

@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { InnerBlocks, BlockPlaceholder } from '@wordpress/editor';
+import { withSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import './editor.scss';
+
+export const name = 'core/half-media-media-area';
+const ALLOWED_BLOCKS = [
+	'core/image',
+	'core/video',
+	'core-embed/flickr',
+	'core-embed/youtube',
+	'core-embed/vimeo',
+	'core-embed/videopress',
+];
+
+export const settings = {
+	attributes: {},
+
+	title: __( 'Media Area' ),
+
+	parent: [ 'core/half-media' ],
+
+	icon: 'format-image',
+
+	category: 'common',
+
+	edit: withSelect( ( select, { id } ) => {
+		const { getBlockOrder } = select( 'core/editor' );
+		const blocksInside = getBlockOrder( id );
+		return {
+			hasInnerBlocks: blocksInside && blocksInside.length > 0,
+		};
+	} )(
+		( { id, hasInnerBlocks } ) => {
+			return (
+				<div className="half-media__media">
+					<InnerBlocks
+						allowedBlocks={ ALLOWED_BLOCKS }
+						templateLock={ hasInnerBlocks ? 'insert' : false }
+					/>
+					{ ! hasInnerBlocks && (
+						<BlockPlaceholder
+							rootUID={ id }
+						/>
+					) }
+				</div>
+			);
+		}
+	),
+
+	save() {
+		return <div className="half-media__media"><InnerBlocks.Content /></div>;
+	},
+};

core-blocks/layout-half-media-text/style.scss

@@ -0,0 +1,29 @@
+.layout-column-2 {
+
+}
+
+.half-image__content-area {
+    margin-left: 28px;
+}
+
+.half-media {
+	display: flex;
+}
+
+.half-media__content {
+	flex: 1;
+	word-break: break-word;
+	display: flex;
+    flex-direction: column;
+	justify-content: center;
+	padding: 5px;
+}
+
+.half-media__media {
+	flex: 1;
+	padding: 5px;
+}
+
+.half-media__content {
+
+}

editor/components/block-alignment-toolbar/index.js

@@ -42,6 +42,7 @@ export function BlockAlignmentToolbar( { value, onChange, controls = DEFAULT_CON
 
 	return (
 		<Toolbar
+			className="block-alignment-toolbar"
 			controls={
 				enabledControls.map( ( control ) => {
 					return {

editor/components/block-alignment-toolbar/test/__snapshots__/index.js.snap

@@ -2,6 +2,7 @@
 
 exports[`BlockAlignmentToolbar should match snapshot 1`] = `
 <Toolbar
+  className="block-alignment-toolbar"
   controls={
     Array [
       Object {

editor/components/block-placeholder/index.js

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { Placeholder } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Inserter from '../inserter';
+
+export class BlockPlaceholder extends Component {
+	static getDerivedStateFromProps( { index, rootUID, layout } ) {
+		return {
+			insertionPoint: {
+				index,
+				rootUID,
+				layout,
+			},
+		};
+	}
+
+	render() {
+		const {
+			className,
+		} = this.props;
+		return (
+			<Placeholder
+				instructions={ __( 'Press (+) to insert a media block.' ) }
+				className={ classnames( 'editor-block-placeholder', className ) }
+			>
+				<Inserter
+					insertionPoint={ this.state.insertionPoint }
+					position="bottom right"
+				/>
+			</Placeholder>
+		);
+	}
+}
+
+export default BlockPlaceholder;

editor/components/index.js

@@ -7,6 +7,7 @@ export { default as BlockControls } from './block-controls';
 export { default as BlockEdit } from './block-edit';
 export { default as BlockFormatControls } from './block-format-controls';
 export { default as BlockIcon } from './block-icon';
+export { default as BlockPlaceholder } from './block-placeholder';
 export { default as ColorPalette } from './color-palette';
 export { default as withColorContext } from './color-palette/with-color-context';
 export * from './colors';

editor/components/inserter/index.js

@@ -79,14 +79,16 @@ class Inserter extends Component {
 }
 
 export default compose( [
-	withSelect( ( select ) => {
+	withSelect( ( select, { insertionPoint } ) => {
 		const {
 			getEditedPostAttribute,
 			getBlockInsertionPoint,
 			getSelectedBlock,
 			getInserterItems,
 		} = select( 'core/editor' );
-		const insertionPoint = getBlockInsertionPoint();
+		if ( ! insertionPoint ) {
+			insertionPoint = getBlockInsertionPoint();
+		}
 		const { rootUID } = insertionPoint;
 		return {
 			title: getEditedPostAttribute( 'title' ),