Improved toolbar order (+6 squashed commits)

Squashed commits:
[f202072bf] #9634 cherry picked tempararly; This commit should be deleted as soon as the other PR is merged
[a09172386] Only use align wide & full
[1bf29ba] Corrected media labels
[173a298a1] Revisions to align style; Show resizer only when media is set.
[6a94b169d] Change sizing mechanism to apply width directly to the media elements (video/img)
[12ede9625] 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 halfMedia from '../packages/block-library/src/layout-half-media';
 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,
+		halfMedia,
 		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/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 halfMedia from './layout-half-media';
 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,
+		halfMedia,
 		latestComments,
 		latestPosts,
 		more,

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

@@ -0,0 +1,140 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { get } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	BlockControls,
+	InnerBlocks,
+	InspectorControls,
+	PanelColorSettings,
+	withColors,
+	MediaContainer,
+} from '@wordpress/editor';
+import { Component, Fragment } from '@wordpress/element';
+import { Toolbar } from '@wordpress/components';
+
+/**
+ * Constants
+ */
+const ALLOWED_BLOCKS = [ 'core/button', 'core/paragraph', 'core/heading', 'core/list' ];
+const TEMPLATE = [
+	[ 'core/paragraph', { fontSize: 'large', placeholder: 'Content…' } ],
+];
+const MAX_MEDIA_WIDTH = 900;
+
+class ImageEdit extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.onSelectMedia = this.onSelectMedia.bind( this );
+		this.onWidthChange = this.onWidthChange.bind( this );
+	}
+
+	onSelectMedia( media ) {
+		const { setAttributes } = this.props;
+		let newMediaWidth;
+		if ( media.width ) {
+			newMediaWidth = parseInt( media.width );
+		} else {
+			const fullSizeWidth = get( media, [ 'sizes', 'full', 'width' ] );
+			if ( fullSizeWidth ) {
+				newMediaWidth = parseInt( fullSizeWidth );
+			}
+		}
+
+		const mediaWidthProp = Number.isFinite( newMediaWidth ) ?
+			{ mediaWidth: Math.min( newMediaWidth, MAX_MEDIA_WIDTH ) } :
+			{};
+
+		setAttributes( {
+			mediaAlt: media.alt,
+			mediaId: media.id,
+			mediaType: media.type,
+			mediaUrl: media.url,
+			mediaWidth: newMediaWidth,
+			...mediaWidthProp,
+		} );
+	}
+
+	onWidthChange( width ) {
+		const { setAttributes } = this.props;
+
+		setAttributes( {
+			mediaWidth: width,
+		} );
+	}
+
+	renderMediaArea() {
+		const { attributes } = this.props;
+		const { mediaAlt, mediaId, mediaPosition, mediaType, mediaUrl, mediaWidth } = attributes;
+
+		return (
+			<MediaContainer
+				maxWidth={ MAX_MEDIA_WIDTH }
+				className="block-library-half-media__media-container"
+				onSelectMedia={ this.onSelectMedia }
+				onWidthChange={ this.onWidthChange }
+				{ ...{ mediaAlt, mediaId, mediaType, mediaUrl, mediaPosition, mediaWidth } }
+			/>
+		);
+	}
+
+	render() {
+		const { attributes, backgroundColor, setAttributes, setBackgroundColor } = this.props;
+		const { mediaPosition } = attributes;
+		const className = classnames( 'wp-block-half-media', {
+			'has-media-on-the-right': 'right' === mediaPosition,
+			[ backgroundColor.class ]: backgroundColor.class,
+		} );
+		const style = {
+			backgroundColor: backgroundColor.value,
+		};
+		const colorSettings = [ {
+			value: backgroundColor.value,
+			onChange: setBackgroundColor,
+			label: __( 'Background Color' ),
+		} ];
+		const toolbarControls = [ {
+			icon: 'align-left',
+			title: __( 'Show media on left' ),
+			isActive: mediaPosition === 'left',
+			onClick: () => setAttributes( { mediaPosition: 'left' } ),
+		}, {
+			icon: 'align-left',
+			title: __( 'Show media on right' ),
+			isActive: mediaPosition === 'right',
+			onClick: () => setAttributes( { mediaPosition: 'right' } ),
+		} ];
+		return (
+			<Fragment>
+				<InspectorControls>
+					<PanelColorSettings
+						title={ __( 'Color Settings' ) }
+						initialOpen={ false }
+						colorSettings={ colorSettings }
+					/>
+				</InspectorControls>
+				<BlockControls>
+					<Toolbar
+						controls={ toolbarControls }
+					/>
+				</BlockControls>
+				<div className={ className } style={ style } >
+					{ this.renderMediaArea() }
+					<InnerBlocks
+						allowedBlocks={ ALLOWED_BLOCKS }
+						template={ TEMPLATE }
+					/>
+				</div>
+			</Fragment>
+		);
+	}
+}
+
+export default withColors( 'backgroundColor' )( ImageEdit );

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

@@ -0,0 +1,42 @@
+
+.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: none;
+	border-radius: 50%;
+	border: 2px solid $white;
+	width: 16px !important;
+	height: 16px !important;
+	position: absolute;
+	background: theme(primary);
+	top: calc(50% - 9px) !important;
+}
+
+.editor-block-list__block.is-selected .block-library-half-media__resize-handler {
+	display: block;
+}
+
+.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;
+	width: 100%;
+}

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

@@ -0,0 +1,121 @@
+/**
+ * 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: 'figure img',
+			attribute: 'alt',
+			default: '',
+		},
+		mediaPosition: {
+			type: 'string',
+			default: 'left',
+		},
+		mediaId: {
+			type: 'number',
+		},
+		mediaUrl: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure video,figure img',
+			attribute: 'src',
+		},
+		mediaType: {
+			type: 'string',
+		},
+		mediaWidth: {
+			type: 'number',
+			source: 'attribute',
+			selector: 'figure video,figure img',
+			attribute: 'width',
+		},
+	},
+
+	supports: {
+		align: [ 'wide', 'full' ],
+	},
+
+	edit,
+
+	save( { attributes } ) {
+		const {
+			backgroundColor,
+			customBackgroundColor,
+			mediaAlt,
+			mediaPosition,
+			mediaType,
+			mediaUrl,
+			mediaWidth,
+		} = attributes;
+		const mediaTypeRenders = {
+			image: () => {
+				return (
+					<img src={ mediaUrl } alt={ mediaAlt } width={ mediaWidth } />
+				);
+			},
+			video: () => {
+				return (
+					<video controls src={ mediaUrl } width={ mediaWidth } />
+				);
+			},
+		};
+
+		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" >
+					{ ( mediaTypeRenders[ mediaType ] || noop )() }
+				</figure>
+				<div className="wp-block-half-media__content">
+					<InnerBlocks.Content />
+				</div>
+			</div>
+		);
+	},
+};

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

@@ -0,0 +1,27 @@
+.wp-block-half-media,
+.wp-block-half-media.aligncenter {
+	display: grid;
+	grid-template-columns: fit-content(50%) 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 fit-content(50%);
+	grid-template-areas: "half-media-content half-media-media";
+}
+
+.wp-block-half-media > figure > img,
+.wp-block-half-media > figure > video {
+	max-width: unset;
+}

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/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';