Try Layout Block Half Image Half Content

core-blocks/index.js

@@ -24,6 +24,7 @@ import * as columns from './columns';
 import * as coverImage from './cover-image';
 import * as embed from './embed';
 import * as freeform from './freeform';
+import * as halfImageText from './layout-half-image-text';
 import * as html from './html';
 import * as latestPosts from './latest-posts';
 import * as list from './list';
@@ -41,8 +42,17 @@ import * as textColumns from './text-columns';
 import * as verse from './verse';
 import * as video from './video';
 
+const registerArrayOfBlocks = ( blocks ) => {
+	blocks.forEach( ( { name, settings, children } ) => {
+		registerBlockType( name, settings );
+		if ( children && children.length ) {
+			registerArrayOfBlocks( children );
+		}
+	} );
+};
+
 export const registerCoreBlocks = () => {
-	[
+	registerArrayOfBlocks( [
 		// Common blocks are grouped at the top to prioritize their display
 		// in various contexts — like the inserter and auto-complete components.
 		paragraph,
@@ -64,6 +74,7 @@ export const registerCoreBlocks = () => {
 		...embed.common,
 		...embed.others,
 		freeform,
+		halfImageText,
 		html,
 		latestPosts,
 		more,
@@ -78,9 +89,7 @@ export const registerCoreBlocks = () => {
 		textColumns,
 		verse,
 		video,
-	].forEach( ( { name, settings } ) => {
-		registerBlockType( name, settings );
-	} );
+	] );
 
 	setDefaultBlockName( paragraph.name );
 	setUnknownTypeHandlerName( freeform.name );

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

@@ -0,0 +1,11 @@
+// workaround for columns setting the width in all descend inner blocks
+.half-image__content-area.half-image__content-area > .editor-inner-blocks {
+    grid-auto-columns: initial;
+}
+
+.layout-column-2 > .editor-block-list__block {
+	width: 100%;
+}
+.half-image__content-area {
+	margin: 0;
+}

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

@@ -0,0 +1,91 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Fragment } from '@wordpress/element';
+import {
+	InnerBlocks,
+} from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import './editor.scss';
+
+export const name = 'core/half-image';
+
+export const children = [ {
+	name: 'core/half-image-content-area',
+	settings: {
+		attributes: {
+		},
+		icon: 'columns',
+		parent: [ 'core/half-image' ],
+
+		category: 'layout',
+		title: __( 'Half Image - Content Area' ),
+		edit() {
+			return (
+				<div className="half-image__content-area">
+					<InnerBlocks
+						allowedBlocks={ [ 'core/button', 'core/paragraph', 'core/heading' ] }
+						lock={ null }
+					/>
+				</div>
+			);
+		},
+		save() {
+			return (
+				<div className="half-image__content-area">
+					<InnerBlocks.Content />
+				</div>
+			);
+		},
+	},
+} ];
+
+export const settings = {
+	title: __( 'Half Image' ),
+
+	icon: 'columns',
+
+	category: 'layout',
+
+	attributes: {
+	},
+
+	supports: {
+		align: [ 'wide', 'full' ],
+	},
+
+	edit() {
+		return (
+			<Fragment>
+				<div className="half-image">
+					<InnerBlocks
+						template={ [
+							[ 'core/columns', {}, [
+								[ 'core/image', { layout: 'column-1' } ],
+								[ 'core/half-image-content-area', { layout: 'column-2' }, [
+									[ 'core/heading', { nodeName: 'h4' } ],
+									[ 'core/paragraph' ],
+								] ],
+							] ],
+						]
+						}
+						lock="all"
+					/>
+				</div>
+			</Fragment>
+		);
+	},
+
+	save() {
+		return (
+			<div className="half-image">
+				<InnerBlocks.Content />
+			</div>
+		);
+	},
+};

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

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