Refactor the Media&text block to use the new color support flag (#21169)

WordPress · Mar 30, 2020 · 7ecf7a1 · 7ecf7a1
1 parent 5c577c9
commit 7ecf7a1
Show file tree

Hide file tree

Showing 6 changed files with 186 additions and 49 deletions.
diff --git a/packages/block-library/src/media-text/block.json b/packages/block-library/src/media-text/block.json
@@ -6,12 +6,6 @@
 			"type": "string",
 			"default": "wide"
 		},
-		"backgroundColor": {
-			"type": "string"
-		},
-		"customBackgroundColor": {
-			"type": "string"
-		},
 		"mediaAlt": {
 			"type": "string",
 			"source": "attribute",

diff --git a/packages/block-library/src/media-text/deprecated.js b/packages/block-library/src/media-text/deprecated.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { noop } from 'lodash';
+import { noop, isEmpty, omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,6 +16,21 @@ import { imageFillStyles } from './media-container';
 
 const DEFAULT_MEDIA_WIDTH = 50;
 
+const migrateCustomColors = ( attributes ) => {
+	if ( ! attributes.customBackgroundColor ) {
+		return attributes;
+	}
+	const style = {
+		color: {
+			background: attributes.customBackgroundColor,
+		},
+	};
+	return {
+		...omit( attributes, [ 'customBackgroundColor' ] ),
+		style,
+	};
+};
+
 const baseAttributes = {
 	align: {
 		type: 'string',
@@ -24,9 +39,6 @@ const baseAttributes = {
 	backgroundColor: {
 		type: 'string',
 	},
-	customBackgroundColor: {
-		type: 'string',
-	},
 	mediaAlt: {
 		type: 'string',
 		source: 'attribute',
@@ -41,12 +53,6 @@ const baseAttributes = {
 	mediaId: {
 		type: 'number',
 	},
-	mediaUrl: {
-		type: 'string',
-		source: 'attribute',
-		selector: 'figure video,figure img',
-		attribute: 'src',
-	},
 	mediaType: {
 		type: 'string',
 	},
@@ -64,6 +70,39 @@ export default [
 	{
 		attributes: {
 			...baseAttributes,
+			customBackgroundColor: {
+				type: 'string',
+			},
+			mediaLink: {
+				type: 'string',
+			},
+			linkDestination: {
+				type: 'string',
+			},
+			linkTarget: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'figure a',
+				attribute: 'target',
+			},
+			href: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'figure a',
+				attribute: 'href',
+			},
+			rel: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'figure a',
+				attribute: 'rel',
+			},
+			linkClass: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'figure a',
+				attribute: 'class',
+			},
 			verticalAlignment: {
 				type: 'string',
 			},
@@ -74,6 +113,124 @@ export default [
 				type: 'object',
 			},
 		},
+		migrate: migrateCustomColors,
+		save( { attributes } ) {
+			const {
+				backgroundColor,
+				customBackgroundColor,
+				isStackedOnMobile,
+				mediaAlt,
+				mediaPosition,
+				mediaType,
+				mediaUrl,
+				mediaWidth,
+				mediaId,
+				verticalAlignment,
+				imageFill,
+				focalPoint,
+				linkClass,
+				href,
+				linkTarget,
+				rel,
+			} = attributes;
+			const newRel = isEmpty( rel ) ? undefined : rel;
+
+			let image = (
+				<img
+					src={ mediaUrl }
+					alt={ mediaAlt }
+					className={
+						mediaId && mediaType === 'image'
+							? `wp-image-${ mediaId }`
+							: null
+					}
+				/>
+			);
+
+			if ( href ) {
+				image = (
+					<a
+						className={ linkClass }
+						href={ href }
+						target={ linkTarget }
+						rel={ newRel }
+					>
+						{ image }
+					</a>
+				);
+			}
+
+			const mediaTypeRenders = {
+				image: () => image,
+				video: () => <video controls src={ mediaUrl } />,
+			};
+			const backgroundClass = getColorClassName(
+				'background-color',
+				backgroundColor
+			);
+			const className = classnames( {
+				'has-media-on-the-right': 'right' === mediaPosition,
+				'has-background': backgroundClass || customBackgroundColor,
+				[ backgroundClass ]: backgroundClass,
+				'is-stacked-on-mobile': isStackedOnMobile,
+				[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
+				'is-image-fill': imageFill,
+			} );
+			const backgroundStyles = imageFill
+				? imageFillStyles( mediaUrl, focalPoint )
+				: {};
+
+			let gridTemplateColumns;
+			if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
+				gridTemplateColumns =
+					'right' === mediaPosition
+						? `auto ${ mediaWidth }%`
+						: `${ mediaWidth }% auto`;
+			}
+			const style = {
+				backgroundColor: backgroundClass
+					? undefined
+					: customBackgroundColor,
+				gridTemplateColumns,
+			};
+			return (
+				<div className={ className } style={ style }>
+					<figure
+						className="wp-block-media-text__media"
+						style={ backgroundStyles }
+					>
+						{ ( mediaTypeRenders[ mediaType ] || noop )() }
+					</figure>
+					<div className="wp-block-media-text__content">
+						<InnerBlocks.Content />
+					</div>
+				</div>
+			);
+		},
+	},
+	{
+		attributes: {
+			...baseAttributes,
+			customBackgroundColor: {
+				type: 'string',
+			},
+			mediaUrl: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'figure video,figure img',
+				attribute: 'src',
+			},
+			verticalAlignment: {
+				type: 'string',
+			},
+			imageFill: {
+				type: 'boolean',
+			},
+			focalPoint: {
+				type: 'object',
+			},
+		},
+		migrate: migrateCustomColors,
 		save( { attributes } ) {
 			const {
 				backgroundColor,
@@ -147,7 +304,18 @@ export default [
 		},
 	},
 	{
-		attributes: baseAttributes,
+		attributes: {
+			...baseAttributes,
+			customBackgroundColor: {
+				type: 'string',
+			},
+			mediaUrl: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'figure video,figure img',
+				attribute: 'src',
+			},
+		},
 		save( { attributes } ) {
 			const {
 				backgroundColor,

diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
@@ -15,8 +15,6 @@ import {
 	BlockVerticalAlignmentToolbar,
 	InnerBlocks,
 	InspectorControls,
-	PanelColorSettings,
-	withColors,
 	__experimentalImageURLInputUI as ImageURLInputUI,
 } from '@wordpress/block-editor';
 import { Component } from '@wordpress/element';
@@ -183,10 +181,8 @@ class MediaTextEdit extends Component {
 		const {
 			attributes,
 			className,
-			backgroundColor,
 			isSelected,
 			setAttributes,
-			setBackgroundColor,
 			image,
 		} = this.props;
 		const {
@@ -210,8 +206,6 @@ class MediaTextEdit extends Component {
 		const classNames = classnames( className, {
 			'has-media-on-the-right': 'right' === mediaPosition,
 			'is-selected': isSelected,
-			'has-background': backgroundColor.class || backgroundColor.color,
-			[ backgroundColor.class ]: backgroundColor.class,
 			'is-stacked-on-mobile': isStackedOnMobile,
 			[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 			'is-image-fill': imageFill,
@@ -224,15 +218,7 @@ class MediaTextEdit extends Component {
 		const style = {
 			gridTemplateColumns,
 			msGridColumns: gridTemplateColumns,
-			backgroundColor: backgroundColor.color,
 		};
-		const colorSettings = [
-			{
-				value: backgroundColor.color,
-				onChange: setBackgroundColor,
-				label: __( 'Background color' ),
-			},
-		];
 		const toolbarControls = [
 			{
 				icon: pullLeft,
@@ -311,11 +297,6 @@ class MediaTextEdit extends Component {
 			<>
 				<InspectorControls>
 					{ mediaTextGeneralSettings }
-					<PanelColorSettings
-						title={ __( 'Color settings' ) }
-						initialOpen={ false }
-						colorSettings={ colorSettings }
-					/>
 				</InspectorControls>
 				<BlockControls>
 					<ToolbarGroup controls={ toolbarControls } />
@@ -352,7 +333,6 @@ class MediaTextEdit extends Component {
 }
 
 export default compose( [
-	withColors( 'backgroundColor' ),
 	withSelect( ( select, props ) => {
 		const { getMedia } = select( 'core' );
 		const {

diff --git a/packages/block-library/src/media-text/index.js b/packages/block-library/src/media-text/index.js
@@ -25,6 +25,7 @@ export const settings = {
 	supports: {
 		align: [ 'wide', 'full' ],
 		html: false,
+		__experimentalColor: true,
 	},
 	example: {
 		attributes: {

diff --git a/packages/block-library/src/media-text/save.js b/packages/block-library/src/media-text/save.js
@@ -7,7 +7,7 @@ import { noop, isEmpty } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { InnerBlocks, getColorClassName } from '@wordpress/block-editor';
+import { InnerBlocks } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -18,8 +18,6 @@ const DEFAULT_MEDIA_WIDTH = 50;
 
 export default function save( { attributes } ) {
 	const {
-		backgroundColor,
-		customBackgroundColor,
 		isStackedOnMobile,
 		mediaAlt,
 		mediaPosition,
@@ -66,14 +64,8 @@ export default function save( { attributes } ) {
 		image: () => image,
 		video: () => <video controls src={ mediaUrl } />,
 	};
-	const backgroundClass = getColorClassName(
-		'background-color',
-		backgroundColor
-	);
 	const className = classnames( {
 		'has-media-on-the-right': 'right' === mediaPosition,
-		'has-background': backgroundClass || customBackgroundColor,
-		[ backgroundClass ]: backgroundClass,
 		'is-stacked-on-mobile': isStackedOnMobile,
 		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 		'is-image-fill': imageFill,
@@ -90,7 +82,6 @@ export default function save( { attributes } ) {
 				: `${ mediaWidth }% auto`;
 	}
 	const style = {
-		backgroundColor: backgroundClass ? undefined : customBackgroundColor,
 		gridTemplateColumns,
 	};
 	return (

diff --git a/packages/block-library/src/media-text/style.scss b/packages/block-library/src/media-text/style.scss
@@ -1,4 +1,7 @@
 .wp-block-media-text {
+	background-color: var(--wp--color--background);
+	color: var(--wp--color--text);
+
 	// This block's direction should not be manipulated by rtl, as the mediaPosition control does.
 	/*!rtl:begin:ignore*/
 	direction: ltr;
@@ -65,8 +68,8 @@
 	/*!rtl:end:ignore*/
 }
 
-.wp-block-media-text > figure > img,
-.wp-block-media-text > figure > video {
+.wp-block-media-text__media img,
+.wp-block-media-text__media video {
 	max-width: unset;
 	width: 100%;
 	vertical-align: middle;