@wordpress/block-library 8.5.0 → 8.6.0

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

@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`List block transforms 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: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 --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`List block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- 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 --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`List block transforms to Heading block 1`] = `
+"<!-- wp:heading -->
+<h2 class="wp-block-heading">First Item</h2>
+<!-- /wp:heading -->
+
+<!-- wp:heading -->
+<h2 class="wp-block-heading">Second Item</h2>
+<!-- /wp:heading -->
+
+<!-- wp:heading -->
+<h2 class="wp-block-heading">Third Item</h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`List block transforms to Paragraph block 1`] = `
+"<!-- wp:paragraph -->
+<p>First Item</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Second Item</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Third Item</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`List block transforms to Quote block 1`] = `
+"<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- 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 --></blockquote>
+<!-- /wp:quote -->"
+`;

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

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 {"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 {"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 {"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 {"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 -->"
+`;

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

@@ -0,0 +1,112 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Media & Text';
+const initialHtmlWithImage = `
+<!-- wp:media-text {"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" 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 -->`;
+const initialHtmlWithVideo = `
+<!-- wp:media-text {"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 -->`;
+
+const tranformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransformsWithImage = [
+	'Image',
+	'Cover',
+	...tranformsWithInnerBlocks,
+];
+const blockTransformsWithVideo = [
+	'Video',
+	'Cover',
+	...tranformsWithInnerBlocks,
+];
+
+setupCoreBlocks();
+
+describe( `${ block } block transformations`, () => {
+	describe( 'with Image', () => {
+		test.each( blockTransformsWithImage )(
+			'to %s block',
+			async ( blockTransform ) => {
+				const screen = await initializeEditor( {
+					initialHtml: initialHtmlWithImage,
+				} );
+				const newBlock = await transformBlock(
+					screen,
+					block,
+					blockTransform,
+					{
+						isMediaBlock: true,
+						hasInnerBlocks:
+							tranformsWithInnerBlocks.includes( blockTransform ),
+					}
+				);
+				expect( newBlock ).toBeVisible();
+				expect( getEditorHtml() ).toMatchSnapshot();
+			}
+		);
+
+		it( 'matches expected transformation options', async () => {
+			const screen = await initializeEditor( {
+				initialHtml: initialHtmlWithImage,
+			} );
+			const transformOptions = await getBlockTransformOptions(
+				screen,
+				block
+			);
+			expect( transformOptions ).toHaveLength(
+				blockTransformsWithImage.length
+			);
+		} );
+	} );
+
+	describe( 'with Video', () => {
+		test.each( blockTransformsWithVideo )(
+			'to %s block',
+			async ( blockTransform ) => {
+				const screen = await initializeEditor( {
+					initialHtml: initialHtmlWithVideo,
+				} );
+				const newBlock = await transformBlock(
+					screen,
+					block,
+					blockTransform,
+					{
+						isMediaBlock: true,
+						hasInnerBlocks:
+							tranformsWithInnerBlocks.includes( blockTransform ),
+					}
+				);
+				expect( newBlock ).toBeVisible();
+				expect( getEditorHtml() ).toMatchSnapshot();
+			}
+		);
+
+		it( 'matches expected transformation options', async () => {
+			const screen = await initializeEditor( {
+				initialHtml: initialHtmlWithVideo,
+			} );
+			const transformOptions = await getBlockTransformOptions(
+				screen,
+				block
+			);
+			expect( transformOptions ).toHaveLength(
+				blockTransformsWithVideo.length
+			);
+		} );
+	} );
+} );

package/src/media-text/transforms.js

@@ -42,6 +42,8 @@ const transforms = {
 					gradient,
 					id,
 					overlayColor,
+					style,
+					textColor,
 					url,
 				},
 				innerBlocks
@@ -66,6 +68,16 @@ const transforms = {
 					};
 				}
 
+				// Maintain custom text color block support value.
+				if ( style?.color?.text ) {
+					additionalAttributes.style = {
+						color: {
+							...additionalAttributes.style?.color,
+							text: style.color.text,
+						},
+					};
+				}
+
 				return createBlock(
 					'core/media-text',
 					{
@@ -77,6 +89,7 @@ const transforms = {
 						mediaId: id,
 						mediaType: backgroundType,
 						mediaUrl: url,
+						textColor,
 						...additionalAttributes,
 					},
 					innerBlocks
@@ -135,6 +148,8 @@ const transforms = {
 			) => {
 				const additionalAttributes = {};
 
+				// Migrate the background styles or gradient to Cover's custom
+				// gradient and overlay properties.
 				if ( style?.color?.gradient ) {
 					additionalAttributes.customGradient = style.color.gradient;
 				} else if ( style?.color?.background ) {
@@ -142,6 +157,13 @@ const transforms = {
 						style.color.background;
 				}
 
+				// Maintain custom text color support style.
+				if ( style?.color?.text ) {
+					additionalAttributes.style = {
+						color: { text: style.color.text },
+					};
+				}
+
 				const coverAttributes = {
 					align,
 					alt: mediaAlt,
@@ -152,64 +174,15 @@ const transforms = {
 					gradient,
 					id: mediaId,
 					overlayColor: backgroundColor,
+					textColor,
 					url: mediaUrl,
 					...additionalAttributes,
 				};
-				const customTextColor = style?.color?.text;
-
-				// Attempt to maintain any text color selection.
-				// Cover block's do not opt into color block support so we
-				// cannot directly copy the color attributes across.
-				if ( ! textColor && ! customTextColor ) {
-					return createBlock(
-						'core/cover',
-						coverAttributes,
-						innerBlocks
-					);
-				}
-
-				const coloredInnerBlocks = innerBlocks.map( ( innerBlock ) => {
-					const {
-						attributes: { style: innerStyle },
-					} = innerBlock;
-
-					// Only apply the media and text color if the inner block
-					// doesn't set its own color block support selection.
-					if (
-						innerBlock.attributes.textColor ||
-						innerStyle?.color?.text
-					) {
-						return innerBlock;
-					}
-
-					const newAttributes = { textColor };
-
-					// Only add or extend inner block's style object if we have
-					// a custom text color from the media & text block.
-					if ( customTextColor ) {
-						newAttributes.style = {
-							...innerStyle,
-							color: {
-								...innerStyle?.color,
-								text: customTextColor,
-							},
-						};
-					}
-
-					return createBlock(
-						innerBlock.name,
-						{
-							...innerBlock.attributes,
-							...newAttributes,
-						},
-						innerBlock.innerBlocks
-					);
-				} );
 
 				return createBlock(
 					'core/cover',
 					coverAttributes,
-					coloredInnerBlocks
+					innerBlocks
 				);
 			},
 		},

package/src/missing/test/__snapshots__/edit.native.js.snap

@@ -34,9 +34,27 @@ exports[`Missing block renders without crashing 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
   >
-    Svg
+    <Svg
+      height={24}
+      label="Help icon"
+      style={{}}
+      viewBox="0 0 24 24"
+      width={24}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      Path
+    </Svg>
   </View>
-  Svg
+  <Svg
+    color="white"
+    height={24}
+    style={{}}
+    viewBox="0 0 24 24"
+    width={24}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    Path
+  </Svg>
   <Text>
     missing/block/title
   </Text>

package/src/more/test/__snapshots__/transforms.native.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`More block transforms 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:more -->
+<!--more-->
+<!-- /wp:more --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`More block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:more -->
+<!--more-->
+<!-- /wp:more --></div>
+<!-- /wp:group -->"
+`;

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

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'More';
+const initialHtml = `
+<!-- wp:more -->
+<!--more-->
+<!-- /wp:more -->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ ...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 );
+	} );
+} );