Half image Block

block-library/index.js

@@ -28,6 +28,7 @@ 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 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 +78,7 @@ export const registerCoreBlocks = () => {
 		...embed.others,
 		file,
 		freeform,
+		halfMediaText,
 		html,
 		latestComments,
 		latestPosts,

packages/block-library/src/editor.scss

@@ -12,6 +12,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

@@ -25,6 +25,7 @@ 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 latestComments from './latest-comments';
 import * as latestPosts from './latest-posts';
 import * as list from './list';
@@ -67,6 +68,7 @@ export const registerCoreBlocks = () => {
 		...embed.common,
 		...embed.others,
 		file,
+		halfMediaText,
 		latestComments,
 		latestPosts,
 		more,

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

@@ -0,0 +1,134 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import ResizableBox from 're-resizable';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	BlockControls,
+	BlockAlignmentToolbar,
+	InnerBlocks,
+	InspectorControls,
+	PanelColorSettings,
+	withColors,
+	MediaContainer,
+} from '@wordpress/editor';
+import { Component, Fragment } from '@wordpress/element';
+import { withSelect } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
+
+/**
+ * Constants
+ */
+const MEDIA_POSITIONS = [ 'left', 'right' ];
+const ALLOWED_BLOCKS = [ 'core/button', 'core/paragraph', 'core/heading', 'core/list' ];
+const TEMPLATE = [
+	[ 'core/paragraph', { fontSize: 'large', placeholder: 'Content...' } ],
+];
+
+class ImageEdit extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.onSelectMedia = this.onSelectMedia.bind( this );
+	}
+
+	onSelectMedia( media ) {
+		const { setAttributes } = this.props;
+		setAttributes( {
+			mediaAlt: media.alt,
+			mediaId: media.id,
+			mediaType: media.type,
+			mediaUrl: media.url,
+		} );
+	}
+
+	renderMediaArea() {
+		const { attributes, setAttributes } = this.props;
+		const { mediaAlt, mediaId, mediaPosition, mediaType, mediaUrl, width } = attributes;
+		const handleClasses = {
+			left: 'block-library-half-media__resize-handler',
+			right: 'block-library-half-media__resize-handler',
+		};
+		const onResizeStop = ( event, direction, elt, delta ) => {
+			setAttributes( {
+				width: parseInt( width + delta.width, 10 ),
+			} );
+		};
+		const enablePositions = {
+			right: mediaPosition === 'left',
+			left: mediaPosition === 'right',
+		};
+		return (
+			<ResizableBox
+				className="block-library-half-media__resizer"
+				size={ { width } }
+				minWidth="100"
+				handleClasses={ handleClasses }
+				enable={ enablePositions }
+				onResizeStop={ onResizeStop }
+				axis="x"
+			>
+				<MediaContainer
+					className="block-library-half-media__media-container"
+					onSelectMedia={ this.onSelectMedia }
+					{ ...{ mediaAlt, mediaId, mediaType, mediaUrl } }
+				/>
+			</ResizableBox>
+		);
+	}
+
+	render() {
+		const { attributes, backgroundColor, setAttributes, setBackgroundColor } = this.props;
+		const className = classnames( 'wp-block-half-media', {
+			'has-media-on-the-right': 'right' === attributes.mediaPosition,
+			[ backgroundColor.class ]: backgroundColor.class,
+		} );
+		const style = {
+			backgroundColor: backgroundColor.value,
+		};
+		const colorSettings = [ {
+			value: backgroundColor.value,
+			onChange: setBackgroundColor,
+			label: __( 'Background Color' ),
+		} ];
+		return (
+			<Fragment>
+				<div className={ className } style={ style } >
+					{ this.renderMediaArea() }
+					<InnerBlocks
+						allowedBlocks={ ALLOWED_BLOCKS }
+						template={ TEMPLATE }
+					/>
+				</div>
+				<InspectorControls>
+					<PanelColorSettings
+						title={ __( 'Color Settings' ) }
+						initialOpen={ false }
+						colorSettings={ colorSettings }
+					/>
+				</InspectorControls>
+				<BlockControls>
+					<BlockAlignmentToolbar
+						controls={ MEDIA_POSITIONS }
+						value={ attributes.mediaPosition }
+						onChange={ ( mediaPosition ) => setAttributes( { mediaPosition } ) }
+					/>
+				</BlockControls>
+			</Fragment>
+		);
+	}
+}
+
+export default compose( [
+	withColors( 'backgroundColor' ),
+	withSelect( ( select ) => {
+		return {
+			wideControlsEnabled: select( 'core/editor' ).getEditorSettings().alignWide,
+		};
+	} ),
+] )( ImageEdit );

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

@@ -0,0 +1,34 @@
+
+.block-library-half-media__resizer {
+	grid-area: half-media-media;
+	align-self: center;
+}
+
+.wp-block-half-media .editor-inner-blocks {
+	word-break: break-word;
+	grid-area: half-media-content;
+	text-align: initial;
+}
+
+.block-library-half-media__resize-handler {
+	display: block;
+	border: 2px solid $white;
+	position: absolute;
+	background: theme(primary);
+}
+
+
+.wp-block-half-media > .editor-inner-blocks > .editor-block-list__layout > .editor-block-list__block {
+	max-width: unset;
+}
+
+figure.block-library-half-media__media-container {
+	margin: 0;
+	height: 100%;
+	width: 100%;
+}
+
+.block-library-half-media__media-container img,
+.block-library-half-media__media-container video {
+	margin-bottom: -10px;
+}

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

@@ -0,0 +1,119 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	InnerBlocks,
+	getColorClass,
+} from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+
+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: {
+		align: {
+			type: 'string',
+			default: 'wide',
+		},
+		backgroundColor: {
+			type: 'string',
+		},
+		customBackgroundColor: {
+			type: 'string',
+		},
+		mediaAlt: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'alt',
+			default: '',
+		},
+		mediaPosition: {
+			type: 'string',
+			default: 'left',
+		},
+		mediaId: {
+			type: 'number',
+		},
+		mediaUrl: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'video,img',
+			attribute: 'src',
+		},
+		mediaType: {
+			type: 'string',
+		},
+		width: {
+			type: 'number',
+			default: 300,
+		},
+	},
+
+	supports: {
+		align: [ 'center', 'wide', 'full' ],
+	},
+
+	edit,
+
+	save( { attributes } ) {
+		const {
+			backgroundColor,
+			customBackgroundColor,
+			mediaAlt,
+			mediaPosition,
+			mediaType,
+			mediaUrl,
+			width,
+		} = attributes;
+		const mediaTypeRenders = {
+			image: () => {
+				return (
+					<img src={ mediaUrl } alt={ mediaAlt } />
+				);
+			},
+			video: () => {
+				return (
+					<video controls src={ mediaUrl } />
+				);
+			},
+		};
+
+		const backgroundClass = getColorClass( 'background-color', backgroundColor );
+		const className = classnames( {
+			'has-media-on-the-right': 'right' === mediaPosition,
+			[ backgroundClass ]: backgroundClass,
+		} );
+
+		const style = {
+			backgroundColor: backgroundClass ? undefined : customBackgroundColor,
+		};
+		return (
+			<div className={ className } style={ style }>
+				<figure className="wp-block-half-media__media" style={ { width } }>
+					{ ( mediaTypeRenders[ mediaType ] || noop )() }
+				</figure>
+				<div className="wp-block-half-media__content">
+					<InnerBlocks.Content />
+				</div>
+			</div>
+		);
+	},
+};

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

@@ -0,0 +1,27 @@
+.wp-block-half-media,
+.wp-block-half-media.aligncenter {
+	display: grid;
+	grid-template-columns: min-content auto;
+	grid-template-rows: auto;
+	grid-template-areas: "half-media-media half-media-content";
+	align-items: center;
+	column-gap: 25px;
+}
+
+.wp-block-half-media .wp-block-half-media__media {
+	grid-area: half-media-media;
+}
+
+.wp-block-half-media .wp-block-half-media__content {
+	word-break: break-word;
+	grid-area: half-media-content;
+}
+.wp-block-half-media.has-media-on-the-right {
+	grid-template-columns: auto min-content;
+	grid-template-areas: "half-media-content half-media-media";
+}
+
+.wp-block-half-media > figure > img,
+.wp-block-half-media > figure > video {
+	max-width: 100%;
+}

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";

packages/editor/src/components/index.js

@@ -20,6 +20,7 @@ export { default as PanelColorSettings } from './panel-color-settings';
 export { default as PlainText } from './plain-text';
 export { default as RichText } from './rich-text';
 export { default as RichTextProvider } from './rich-text/provider';
+export { default as MediaContainer } from './media-container';
 export { default as MediaPlaceholder } from './media-placeholder';
 export { default as MediaUpload } from './media-upload';
 export { default as URLInput } from './url-input';