Try Layout half image half vertical center content

block-library/index.js

@@ -28,6 +28,9 @@ import * as column from '../packages/block-library/src/columns/column';
 import * as coverImage from '../packages/block-library/src/cover-image';
 import * as embed from '../packages/block-library/src/embed';
 import * as file from '../packages/block-library/src/file';
+import * as halfMediaText from '../packages/block-library/src/layout-half-media-text';
+import * as halfMediaTextContent from '../packages/block-library/src/layout-half-media-text/content-area';
+import * as halfMediaTextMedia from '../packages/block-library/src/layout-half-media-text/media-area';
 import * as latestComments from '../packages/block-library/src/latest-comments';
 import * as latestPosts from '../packages/block-library/src/latest-posts';
 import * as list from '../packages/block-library/src/list';
@@ -77,6 +80,9 @@ export const registerCoreBlocks = () => {
 		...embed.others,
 		file,
 		freeform,
+		halfMediaText,
+		halfMediaTextContent,
+		halfMediaTextMedia,
 		html,
 		latestComments,
 		latestPosts,

packages/block-library/src/editor.scss

@@ -11,6 +11,7 @@
 @import "./image/editor.scss";
 @import "./latest-comments/editor.scss";
 @import "./latest-posts/editor.scss";
+@import "./layout-half-media-text/editor.scss";
 @import "./list/editor.scss";
 @import "./more/editor.scss";
 @import "./nextpage/editor.scss";

packages/block-library/src/index.js

@@ -24,6 +24,9 @@ import * as column from './columns/column';
 import * as coverImage from './cover-image';
 import * as embed from './embed';
 import * as file from './file';
+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 latestComments from './latest-comments';
 import * as latestPosts from './latest-posts';
 import * as list from './list';
@@ -66,6 +69,9 @@ export const registerCoreBlocks = () => {
 		...embed.common,
 		...embed.others,
 		file,
+		halfMediaText,
+		halfMediaTextContent,
+		halfMediaTextMedia,
 		latestComments,
 		latestPosts,
 		more,

packages/block-library/src/layout-half-media-text/content-area.js

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

packages/block-library/src/layout-half-media-text/editor.scss

@@ -0,0 +1,56 @@
+.half-media__media .block-alignment-toolbar {
+	display: none;
+}
+
+.half-media {
+	display: block;
+	.half-media__media {
+		padding: 0;
+	}
+	.half-media__content {
+		text-align: initial;
+	}
+	.components-placeholder {
+		background-color: #f3f3f4;
+	}
+	.editor-block-placeholder {
+		margin-bottom: 14px;
+	}
+}
+
+.half-media.has-media-on-the-right .components-placeholder {
+	margin-left: 2px;
+}
+
+.half-media:not(.has-media-on-the-right) .components-placeholder {
+	margin-left: -2px;
+}
+
+.half-media > .editor-inner-blocks > .editor-block-list__layout {
+	display: grid;
+	grid-template-columns: fit-content(70%) minmax(200px, 70%);
+	grid-template-rows: auto;
+	grid-template-areas: "half-media-media half-media-content";
+	align-items: center;
+
+	[data-type="core/half-media-media-area"],
+	[data-type="core/half-media-content-area"] {
+		word-break: break-word;
+		width: 100%;
+	}
+
+	[data-type="core/half-media-content-area"] {
+		grid-area: half-media-content;
+		margin-left: unset;
+		margin-right: unset;
+	}
+
+	[data-type="core/half-media-media-area"] {
+		grid-area: half-media-media;
+	}
+}
+
+.half-media.has-media-on-the-right > .editor-inner-blocks > .editor-block-list__layout {
+	grid-template-areas: "half-media-content half-media-media";
+	grid-template-columns: minmax(200px, 70%) fit-content(70%);
+}

packages/block-library/src/layout-half-media-text/index.js

@@ -0,0 +1,137 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	BlockControls,
+	BlockAlignmentToolbar,
+	InnerBlocks,
+	InspectorControls,
+	getColorClass,
+	PanelColorSettings,
+	withColors,
+} from '@wordpress/editor';
+import { Component } from '@wordpress/element';
+import { withSelect } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
+
+const MEDIA_POSITIONS = [ 'left', 'right' ];
+
+export const name = 'core/half-media';
+
+export const settings = {
+	title: __( 'Half Media' ),
+
+	icon: <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0,0h24v24H0V0z" fill="none" /><rect x="11" y="7" width="6" height="2" /><rect x="11" y="11" width="6" height="2" /><rect x="11" y="15" width="6" height="2" /><rect x="7" y="7" width="2" height="2" /><rect x="7" y="11" width="2" height="2" /><rect x="7" y="15" width="2" height="2" /><path d="M20.1,3H3.9C3.4,3,3,3.4,3,3.9v16.2C3,20.5,3.4,21,3.9,21h16.2c0.4,0,0.9-0.5,0.9-0.9V3.9C21,3.4,20.5,3,20.1,3z M19,19H5V5h14V19z" /></svg>,
+
+	category: 'layout',
+
+	attributes: {
+		backgroundColor: {
+			type: 'string',
+		},
+		customBackgroundColor: {
+			type: 'string',
+		},
+		mediaPosition: {
+			type: 'string',
+			default: 'left',
+		},
+	},
+
+	supports: {
+		align: [ 'center', 'wide', 'full' ],
+	},
+
+	edit: compose( [
+		withColors( 'backgroundColor' ),
+		withSelect( ( select ) => {
+			return {
+				wideControlsEnabled: select( 'core/editor' ).getEditorSettings().alignWide,
+			};
+		} ),
+	] )(
+		class extends Component {
+			componentWillMount() {
+				if ( this.props.wideControlsEnabled && ! this.props.attributes.align ) {
+					this.props.setAttributes( {
+						align: 'wide',
+					} );
+				}
+			}
+			render() {
+				const { attributes, backgroundColor, setAttributes, setBackgroundColor } = this.props;
+				return (
+					<div
+						className={ classnames(
+							'half-media',
+							{
+								'has-media-on-the-right': 'right' === attributes.mediaPosition,
+								[ backgroundColor.class ]: backgroundColor.class,
+							}
+						) }
+						style={ {
+							backgroundColor: backgroundColor.value,
+						} }
+					>
+						<InspectorControls>
+							<PanelColorSettings
+								title={ __( 'Color Settings' ) }
+								initialOpen={ false }
+								colorSettings={ [
+									{
+										value: backgroundColor.value,
+										onChange: setBackgroundColor,
+										label: __( 'Background Color' ),
+									},
+								] }
+							/>
+						</InspectorControls>
+						<BlockControls>
+							<BlockAlignmentToolbar
+								controls={ MEDIA_POSITIONS }
+								value={ attributes.mediaPosition }
+								onChange={ ( mediaPosition ) => setAttributes( { mediaPosition } ) }
+							/>
+						</BlockControls>
+						<InnerBlocks
+							template={ [
+								[ 'core/half-media-media-area' ],
+								[ 'core/half-media-content-area' ],
+							] }
+							templateLock="all"
+						/>
+					</div>
+				);
+			}
+		} ),
+
+	save( { attributes } ) {
+		const {
+			backgroundColor,
+			customBackgroundColor,
+		} = attributes;
+		const backgroundClass = getColorClass( 'background-color', backgroundColor );
+		return (
+			<div
+				className={ classnames(
+					'half-media',
+					{
+						'has-media-on-the-right': 'right' === attributes.mediaPosition,
+						[ backgroundClass ]: backgroundClass,
+					}
+				) }
+				style={ {
+					backgroundColor: backgroundClass ? undefined : customBackgroundColor,
+				} }
+			>
+				<InnerBlocks.Content />
+			</div>
+		);
+	},
+};

packages/block-library/src/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';
+
+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',
+
+	supports: {
+		hoverMarks: false,
+		selectionMarks: false,
+		settingsMenu: false,
+		inserter: false,
+	},
+
+	edit: withSelect( ( select, { clientId } ) => {
+		const { getBlockOrder } = select( 'core/editor' );
+		const blocksInside = getBlockOrder( clientId );
+		return {
+			hasInnerBlocks: blocksInside && blocksInside.length > 0,
+		};
+	} )(
+		( { clientId, hasInnerBlocks } ) => {
+			return (
+				<InnerBlocks
+					className="half-media__media"
+					allowedBlocks={ hasInnerBlocks ? [] : ALLOWED_BLOCKS }
+					templateLock={ false }
+					showWhenEmpty={ (
+						<BlockPlaceholder
+							rootClientId={ clientId }
+						/>
+					) }
+				/>
+			);
+		}
+	),
+
+	save() {
+		return <div className="half-media__media"><InnerBlocks.Content /></div>;
+	},
+};

packages/block-library/src/layout-half-media-text/style.scss

@@ -0,0 +1,31 @@
+.half-image__content-area {
+	margin-left: 28px;
+}
+
+.half-media,
+.half-media.aligncenter {
+	display: grid;
+	align-items: center;
+	column-gap: 10px;
+}
+
+.half-media {
+	grid-template-areas: "half-media-media half-media-content";
+	grid-template-columns: fit-content(70%) minmax(200px, 70%);
+	grid-template-rows: auto;
+}
+
+.half-media__content {
+	grid-area: half-media-content;
+	word-break: break-word;
+}
+
+.half-media__media {
+	grid-area: half-media-media;
+	justify-self: center;
+}
+
+.half-media.has-media-on-the-right {
+	grid-template-areas: "half-media-content half-media-media";
+	grid-template-columns: minmax(200px, 70%) fit-content(70%);
+}

packages/block-library/src/style.scss

@@ -11,6 +11,7 @@
 @import "./image/style.scss";
 @import "./latest-comments/style.scss";
 @import "./latest-posts/style.scss";
+@import "./layout-half-media-text/style.scss";
 @import "./paragraph/style.scss";
 @import "./pullquote/style.scss";
 @import "./quote/style.scss";