@wordpress/block-library 8.5.0 → 8.7.0

package/src/list/test/transforms.native.js

@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'List';
+const initialHtml = `
+<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>First Item</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Second Item</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Third Item</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->`;
+
+const transformsWithInnerBlocks = [ 'Quote', 'Columns', 'Group' ];
+const blockTransforms = [
+	'Paragraph',
+	'Heading',
+	...transformsWithInnerBlocks,
+];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );

package/src/media-text/block.json

@@ -10,7 +10,7 @@
 	"attributes": {
 		"align": {
 			"type": "string",
-			"default": "wide"
+			"default": "none"
 		},
 		"mediaAlt": {
 			"type": "string",

package/src/media-text/constants.js

@@ -1 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { _x } from '@wordpress/i18n';
+
 export const DEFAULT_MEDIA_SIZE_SLUG = 'full';
+export const WIDTH_CONSTRAINT_PERCENTAGE = 15;
+export const LINK_DESTINATION_MEDIA = 'media';
+export const LINK_DESTINATION_ATTACHMENT = 'attachment';
+export const TEMPLATE = [
+	[
+		'core/paragraph',
+		{
+			placeholder: _x( 'Content…', 'content placeholder' ),
+		},
+	],
+];

package/src/media-text/deprecated.js

@@ -13,6 +13,7 @@ import {
 	useInnerBlocksProps,
 	useBlockProps,
 } from '@wordpress/block-editor';
+import { compose } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -30,6 +31,19 @@ const v1ToV5ImageFillStyles = ( url, focalPoint ) => {
 		: {};
 };
 
+const v6ImageFillStyles = ( url, focalPoint ) => {
+	return url
+		? {
+				backgroundImage: `url(${ url })`,
+				backgroundPosition: focalPoint
+					? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round(
+							focalPoint.y * 100
+					  ) }%`
+					: `50% 50%`,
+		  }
+		: {};
+};
+
 const DEFAULT_MEDIA_WIDTH = 50;
 const noop = () => {};
 
@@ -49,6 +63,20 @@ const migrateCustomColors = ( attributes ) => {
 	};
 };
 
+// After align attribute's default was updated this function explicitly sets
+// the align value for deprecated blocks to the `wide` value which was default
+// for their versions of this block.
+const migrateDefaultAlign = ( attributes ) => {
+	if ( attributes.align ) {
+		return attributes;
+	}
+
+	return {
+		...attributes,
+		align: 'wide',
+	};
+};
+
 const baseAttributes = {
 	align: {
 		type: 'string',
@@ -133,6 +161,40 @@ const v4ToV5BlockAttributes = {
 	},
 };
 
+const v6Attributes = {
+	...v4ToV5BlockAttributes,
+	mediaAlt: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'figure img',
+		attribute: 'alt',
+		default: '',
+		__experimentalRole: 'content',
+	},
+	mediaId: {
+		type: 'number',
+		__experimentalRole: 'content',
+	},
+	mediaUrl: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'figure video,figure img',
+		attribute: 'src',
+		__experimentalRole: 'content',
+	},
+	href: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'figure a',
+		attribute: 'href',
+		__experimentalRole: 'content',
+	},
+	mediaType: {
+		type: 'string',
+		__experimentalRole: 'content',
+	},
+};
+
 const v4ToV5Supports = {
 	anchor: true,
 	align: [ 'wide', 'full' ],
@@ -143,6 +205,166 @@ const v4ToV5Supports = {
 	},
 };
 
+const v6Supports = {
+	...v4ToV5Supports,
+	color: {
+		gradients: true,
+		link: true,
+		__experimentalDefaultControls: {
+			background: true,
+			text: true,
+		},
+	},
+	spacing: {
+		margin: true,
+		padding: true,
+	},
+	typography: {
+		fontSize: true,
+		lineHeight: true,
+		__experimentalFontFamily: true,
+		__experimentalFontWeight: true,
+		__experimentalFontStyle: true,
+		__experimentalTextTransform: true,
+		__experimentalTextDecoration: true,
+		__experimentalLetterSpacing: true,
+		__experimentalDefaultControls: {
+			fontSize: true,
+		},
+	},
+};
+
+// Version with wide as the default alignment.
+// See: https://github.com/WordPress/gutenberg/pull/48404
+const v6 = {
+	attributes: v6Attributes,
+	supports: v6Supports,
+	save( { attributes } ) {
+		const {
+			isStackedOnMobile,
+			mediaAlt,
+			mediaPosition,
+			mediaType,
+			mediaUrl,
+			mediaWidth,
+			mediaId,
+			verticalAlignment,
+			imageFill,
+			focalPoint,
+			linkClass,
+			href,
+			linkTarget,
+			rel,
+		} = attributes;
+		const mediaSizeSlug =
+			attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
+		const newRel = isEmpty( rel ) ? undefined : rel;
+
+		const imageClasses = classnames( {
+			[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
+			[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
+		} );
+
+		let image = (
+			<img
+				src={ mediaUrl }
+				alt={ mediaAlt }
+				className={ imageClasses || 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 className = classnames( {
+			'has-media-on-the-right': 'right' === mediaPosition,
+			'is-stacked-on-mobile': isStackedOnMobile,
+			[ `is-vertically-aligned-${ verticalAlignment }` ]:
+				verticalAlignment,
+			'is-image-fill': imageFill,
+		} );
+		const backgroundStyles = imageFill
+			? v6ImageFillStyles( mediaUrl, focalPoint )
+			: {};
+
+		let gridTemplateColumns;
+		if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
+			gridTemplateColumns =
+				'right' === mediaPosition
+					? `auto ${ mediaWidth }%`
+					: `${ mediaWidth }% auto`;
+		}
+		const style = {
+			gridTemplateColumns,
+		};
+
+		if ( 'right' === mediaPosition ) {
+			return (
+				<div { ...useBlockProps.save( { className, style } ) }>
+					<div
+						{ ...useInnerBlocksProps.save( {
+							className: 'wp-block-media-text__content',
+						} ) }
+					/>
+					<figure
+						className="wp-block-media-text__media"
+						style={ backgroundStyles }
+					>
+						{ ( mediaTypeRenders[ mediaType ] || noop )() }
+					</figure>
+				</div>
+			);
+		}
+		return (
+			<div { ...useBlockProps.save( { className, style } ) }>
+				<figure
+					className="wp-block-media-text__media"
+					style={ backgroundStyles }
+				>
+					{ ( mediaTypeRenders[ mediaType ] || noop )() }
+				</figure>
+				<div
+					{ ...useInnerBlocksProps.save( {
+						className: 'wp-block-media-text__content',
+					} ) }
+				/>
+			</div>
+		);
+	},
+	migrate: migrateDefaultAlign,
+	isEligible( attributes, innerBlocks, { block } ) {
+		const { attributes: finalizedAttributes } = block;
+		// When the align attribute defaults to none, valid block markup should
+		// not contain any alignment CSS class. Unfortunately, this
+		// deprecation's version of the block won't be invalidated due to the
+		// alignwide class still being in the markup. That is because the custom
+		// CSS classname support picks it up and adds it to the className
+		// attribute. At the time of parsing, the className attribute won't
+		// contain the alignwide class, hence the need to check the finalized
+		// block attributes.
+		return (
+			attributes.align === undefined &&
+			!! finalizedAttributes.className?.includes( 'alignwide' )
+		);
+	},
+};
+
+// Version with non-rounded background position attribute for focal point.
+// See: https://github.com/WordPress/gutenberg/pull/33915
 const v5 = {
 	attributes: v4ToV5BlockAttributes,
 	supports: v4ToV5Supports,
@@ -252,9 +474,11 @@ const v5 = {
 			</div>
 		);
 	},
+	migrate: migrateDefaultAlign,
 };
 
 // Version with CSS grid
+// See: https://github.com/WordPress/gutenberg/pull/40806
 const v4 = {
 	attributes: v4ToV5BlockAttributes,
 	supports: v4ToV5Supports,
@@ -348,8 +572,11 @@ const v4 = {
 			</div>
 		);
 	},
+	migrate: migrateDefaultAlign,
 };
 
+// Version with ad-hoc color attributes
+// See: https://github.com/WordPress/gutenberg/pull/21169
 const v3 = {
 	attributes: {
 		...baseAttributes,
@@ -399,7 +626,7 @@ const v3 = {
 			type: 'object',
 		},
 	},
-	migrate: migrateCustomColors,
+	migrate: compose( migrateCustomColors, migrateDefaultAlign ),
 	save( { attributes } ) {
 		const {
 			backgroundColor,
@@ -496,6 +723,8 @@ const v3 = {
 	},
 };
 
+// Version with stack on mobile off by default
+// See: https://github.com/WordPress/gutenberg/pull/14364
 const v2 = {
 	attributes: {
 		...baseAttributes,
@@ -521,7 +750,7 @@ const v2 = {
 			type: 'object',
 		},
 	},
-	migrate: migrateCustomColors,
+	migrate: compose( migrateCustomColors, migrateDefaultAlign ),
 	save( { attributes } ) {
 		const {
 			backgroundColor,
@@ -596,6 +825,8 @@ const v2 = {
 	},
 };
 
+// Version without the wp-image-#### class on image
+// See: https://github.com/WordPress/gutenberg/pull/11922
 const v1 = {
 	attributes: {
 		...baseAttributes,
@@ -612,6 +843,7 @@ const v1 = {
 			attribute: 'src',
 		},
 	},
+	migrate: migrateDefaultAlign,
 	save( { attributes } ) {
 		const {
 			backgroundColor,
@@ -663,4 +895,4 @@ const v1 = {
 	},
 };
 
-export default [ v5, v4, v3, v2, v1 ];
+export default [ v6, v5, v4, v3, v2, v1 ];

package/src/media-text/edit.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { useState, useRef } from '@wordpress/element';
 import {
@@ -36,31 +36,21 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import MediaContainer from './media-container';
-import { DEFAULT_MEDIA_SIZE_SLUG } from './constants';
-
-/**
- * Constants
- */
-const TEMPLATE = [
-	[
-		'core/paragraph',
-		{
-			placeholder: _x( 'Content…', 'content placeholder' ),
-		},
-	],
-];
+import {
+	DEFAULT_MEDIA_SIZE_SLUG,
+	WIDTH_CONSTRAINT_PERCENTAGE,
+	LINK_DESTINATION_MEDIA,
+	LINK_DESTINATION_ATTACHMENT,
+	TEMPLATE,
+} from './constants';
 
 // this limits the resize to a safe zone to avoid making broken layouts
-const WIDTH_CONSTRAINT_PERCENTAGE = 15;
 const applyWidthConstraints = ( width ) =>
 	Math.max(
 		WIDTH_CONSTRAINT_PERCENTAGE,
 		Math.min( width, 100 - WIDTH_CONSTRAINT_PERCENTAGE )
 	);
 
-const LINK_DESTINATION_MEDIA = 'media';
-const LINK_DESTINATION_ATTACHMENT = 'attachment';
-
 function getImageSourceUrlBySizeSlug( image, slug ) {
 	// eslint-disable-next-line camelcase
 	return image?.media_details?.sizes?.[ slug ]?.source_url;
@@ -280,17 +270,16 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 			{ mediaType === 'image' && (
 				<TextareaControl
 					__nextHasNoMarginBottom
-					label={ __( 'Alt text (alternative text)' ) }
+					label={ __( 'Alternative text' ) }
 					value={ mediaAlt }
 					onChange={ onMediaAltChange }
 					help={
 						<>
 							<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
-								{ __( 'Describe the purpose of the image' ) }
+								{ __( 'Describe the purpose of the image.' ) }
 							</ExternalLink>
-							{ __(
-								'Leave empty if the image is purely decorative.'
-							) }
+							<br />
+							{ __( 'Leave empty if decorative.' ) }
 						</>
 					}
 				/>
@@ -301,7 +290,9 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 					slug={ mediaSizeSlug }
 					imageSizeOptions={ imageSizeOptions }
 					isResizable={ false }
-					imageSizeHelp={ __( 'Select which image size to load.' ) }
+					imageSizeHelp={ __(
+						'Select the size of the source image.'
+					) }
 				/>
 			) }
 			{ mediaUrl && (

package/src/media-text/edit.native.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { get } from 'lodash';
 import { View } from 'react-native';
 
 /**
@@ -32,12 +31,12 @@ import { pullLeft, pullRight, replace } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import { WIDTH_CONSTRAINT_PERCENTAGE } from './constants';
 import MediaContainer from './media-container';
 import styles from './style.scss';
 
 const TEMPLATE = [ [ 'core/paragraph' ] ];
 // this limits the resize to a safe zone to avoid making broken layouts
-const WIDTH_CONSTRAINT_PERCENTAGE = 15;
 const BREAKPOINTS = {
 	mobile: 480,
 };
@@ -99,13 +98,8 @@ class MediaTextEdit extends Component {
 		if ( mediaType === 'image' && media.sizes ) {
 			// Try the "large" size URL, falling back to the "full" size URL below.
 			src =
-				get( media, [ 'sizes', 'large', 'url' ] ) ||
-				get( media, [
-					'media_details',
-					'sizes',
-					'large',
-					'source_url',
-				] );
+				media.sizes.large?.url ||
+				media?.media_details?.sizes?.large?.source_url;
 		}
 
 		setAttributes( {

package/src/media-text/test/__snapshots__/transforms.native.js.snap

@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Media & Text block transformations with Image to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:media-text {"align":"wide","mediaId":4674,"mediaType":"image","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-4674 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"className":"has-large-font-size"} -->
+<p class="has-large-font-size">Mountain</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Media & Text block transformations with Image to Cover block 1`] = `
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":4674,"dimRatio":50,"align":"wide"} -->
+<div class="wp-block-cover alignwide"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-4674" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"className":"has-large-font-size"} -->
+<p class="has-large-font-size">Mountain</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->"
+`;
+
+exports[`Media & Text block transformations with Image to Group block 1`] = `
+"<!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignwide"><!-- wp:media-text {"align":"wide","mediaId":4674,"mediaType":"image","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-4674 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"className":"has-large-font-size"} -->
+<p class="has-large-font-size">Mountain</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Media & Text block transformations with Image to Image block 1`] = `
+"<!-- wp:image {"id":4674} -->
+<figure class="wp-block-image"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-4674"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Media & Text block transformations with Video to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:media-text {"align":"wide","mediaId":4675,"mediaType":"video","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"className":"has-large-font-size"} -->
+<p class="has-large-font-size">Cloudup</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Media & Text block transformations with Video to Cover block 1`] = `
+"<!-- wp:cover {"url":"https://i.cloudup.com/YtZFJbuQCE.mov","id":4675,"dimRatio":50,"backgroundType":"video","align":"wide"} -->
+<div class="wp-block-cover alignwide"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="https://i.cloudup.com/YtZFJbuQCE.mov" data-object-fit="cover"></video><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"className":"has-large-font-size"} -->
+<p class="has-large-font-size">Cloudup</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->"
+`;
+
+exports[`Media & Text block transformations with Video to Group block 1`] = `
+"<!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignwide"><!-- wp:media-text {"align":"wide","mediaId":4675,"mediaType":"video","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"className":"has-large-font-size"} -->
+<p class="has-large-font-size">Cloudup</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Media & Text block transformations with Video to Video block 1`] = `
+"<!-- wp:video {"id":4675} -->
+<figure class="wp-block-video"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure>
+<!-- /wp:video -->"
+`;