@wordpress/block-library 8.5.0 → 8.7.0

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 );
+	} );
+} );

package/src/navigation/block.json

@@ -87,7 +87,6 @@
 		"showSubmenuIcon": "showSubmenuIcon",
 		"openSubmenusOnClick": "openSubmenusOnClick",
 		"style": "style",
-		"orientation": "orientation",
 		"maxNestingLevel": "maxNestingLevel"
 	},
 	"supports": {

package/src/navigation/edit/index.js

@@ -12,7 +12,6 @@ import {
 	useEffect,
 	useRef,
 	Platform,
-	useMemo,
 } from '@wordpress/element';
 import {
 	InspectorControls,
@@ -41,7 +40,7 @@ import {
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
-import { createBlock, getBlockType } from '@wordpress/blocks';
+import { createBlock } from '@wordpress/blocks';
 import { close, Icon } from '@wordpress/icons';
 
 /**
@@ -107,16 +106,20 @@ function Navigation( {
 
 	const ref = attributes.ref;
 
-	const setRef = ( postId ) => {
-		setAttributes( { ref: postId } );
-	};
+	const setRef = useCallback(
+		( postId ) => {
+			setAttributes( { ref: postId } );
+		},
+		[ setAttributes ]
+	);
 
 	const recursionId = `navigationMenu/${ ref }`;
 	const hasAlreadyRendered = useHasRecursion( recursionId );
 
 	// Preload classic menus, so that they don't suddenly pop-in when viewing
 	// the Select Menu dropdown.
-	const { menus: classicMenus } = useNavigationEntities();
+	const { menus: classicMenus, hasResolvedMenus: hasResolvedClassicMenus } =
+		useNavigationEntities();
 
 	const [ showNavigationMenuStatusNotice, hideNavigationMenuStatusNotice ] =
 		useNavigationNotice( {
@@ -197,52 +200,22 @@ function Navigation( {
 	const isConvertingClassicMenu =
 		classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_PENDING;
 
-	// Only autofallback to published menus.
-	const fallbackNavigationMenus = useMemo(
-		() =>
-			navigationMenus
-				?.filter( ( menu ) => menu.status === 'publish' )
-				?.sort( ( menuA, menuB ) => {
-					const menuADate = new Date( menuA.date );
-					const menuBDate = new Date( menuB.date );
-					return menuADate.getTime() < menuBDate.getTime();
-				} ),
-		[ navigationMenus ]
-	);
+	// Only auto-fallback to the latest published menu.
+	// The REST API already returns items sorted by publishing date.
+	const fallbackNavigationMenuId = navigationMenus?.find(
+		( menu ) => menu.status === 'publish'
+	)?.id;
 
-	// This useEffect adds snackbar and speak status notices when menus are created.
-	// If there are no fallback navigation menus then we don't show these messages,
-	// because this means that we are creating the first, fallback navigation menu.
-	useEffect( () => {
-		hideNavigationMenuStatusNotice();
-
-		if ( fallbackNavigationMenus && isCreatingNavigationMenu ) {
-			speak( __( `Creating Navigation Menu.` ) );
-		}
-
-		if ( createNavigationMenuIsSuccess ) {
-			handleUpdateMenu( createNavigationMenuPost.id, {
-				focusNavigationBlock: true,
-			} );
-
-			if ( fallbackNavigationMenus ) {
-				showNavigationMenuStatusNotice(
-					__( `Navigation Menu successfully created.` )
-				);
+	const handleUpdateMenu = useCallback(
+		( menuId, options = { focusNavigationBlock: false } ) => {
+			const { focusNavigationBlock } = options;
+			setRef( menuId );
+			if ( focusNavigationBlock ) {
+				selectBlock( clientId );
 			}
-		}
-
-		if ( createNavigationMenuIsError ) {
-			showNavigationMenuStatusNotice(
-				__( 'Failed to create Navigation Menu.' )
-			);
-		}
-	}, [
-		createNavigationMenuStatus,
-		createNavigationMenuError,
-		createNavigationMenuPost,
-		fallbackNavigationMenus,
-	] );
+		},
+		[ selectBlock, clientId, setRef ]
+	);
 
 	// Attempt to retrieve and prioritize any existing navigation menu unless:
 	// - the are uncontrolled inner blocks already present in the block.
@@ -256,7 +229,7 @@ function Navigation( {
 			hasUncontrolledInnerBlocks ||
 			isCreatingNavigationMenu ||
 			ref ||
-			! fallbackNavigationMenus?.length
+			! fallbackNavigationMenuId
 		) {
 			return;
 		}
@@ -269,12 +242,14 @@ function Navigation( {
 		 *  nor to be undoable, hence why it is marked as non persistent
 		 */
 		__unstableMarkNextChangeAsNotPersistent();
-		setRef( fallbackNavigationMenus[ 0 ].id );
+		setRef( fallbackNavigationMenuId );
 	}, [
 		ref,
+		setRef,
 		isCreatingNavigationMenu,
-		fallbackNavigationMenus,
+		fallbackNavigationMenuId,
 		hasUncontrolledInnerBlocks,
+		__unstableMarkNextChangeAsNotPersistent,
 	] );
 
 	const isEntityAvailable =
@@ -291,10 +266,12 @@ function Navigation( {
 	useEffect( () => {
 		if (
 			ref ||
+			! hasResolvedClassicMenus ||
 			! hasResolvedNavigationMenus ||
 			isConvertingClassicMenu ||
-			fallbackNavigationMenus?.length > 0 ||
-			hasUnsavedBlocks
+			fallbackNavigationMenuId ||
+			hasUnsavedBlocks ||
+			! classicMenus?.length
 		) {
 			return;
 		}
@@ -303,46 +280,39 @@ function Navigation( {
 		// a classic menu with a `primary` location or slug,
 		// then create a new navigation menu based on it.
 		// Otherwise, use the most recently created classic menu.
-		if ( classicMenus?.length ) {
-			const primaryMenus = classicMenus.filter(
-				( classicMenu ) =>
-					classicMenu.locations.includes( 'primary' ) ||
-					classicMenu.slug === 'primary'
-			);
+		const primaryMenus = classicMenus.filter(
+			( classicMenu ) =>
+				classicMenu.locations.includes( 'primary' ) ||
+				classicMenu.slug === 'primary'
+		);
 
-			if ( primaryMenus.length ) {
-				convertClassicMenu(
-					primaryMenus[ 0 ].id,
-					primaryMenus[ 0 ].name,
-					'publish'
-				);
-			} else {
-				classicMenus.sort( ( a, b ) => {
-					return b.id - a.id;
-				} );
-				convertClassicMenu(
-					classicMenus[ 0 ].id,
-					classicMenus[ 0 ].name,
-					'publish'
-				);
-			}
+		if ( primaryMenus.length ) {
+			convertClassicMenu(
+				primaryMenus[ 0 ].id,
+				primaryMenus[ 0 ].name,
+				'publish'
+			);
 		} else {
-			// If there are no fallback navigation menus and no classic menus,
-			// then create a new navigation menu.
-
-			// Check that we have a page-list block type.
-			let defaultBlocks = [];
-			if ( getBlockType( 'core/page-list' ) ) {
-				defaultBlocks = [ createBlock( 'core/page-list' ) ];
-			}
-
-			createNavigationMenu(
-				'Navigation', // TODO - use the template slug in future
-				defaultBlocks,
+			classicMenus.sort( ( a, b ) => {
+				return b.id - a.id;
+			} );
+			convertClassicMenu(
+				classicMenus[ 0 ].id,
+				classicMenus[ 0 ].name,
 				'publish'
 			);
 		}
-	}, [ hasResolvedNavigationMenus, hasUnsavedBlocks ] );
+	}, [
+		hasResolvedClassicMenus,
+		hasResolvedNavigationMenus,
+		hasUnsavedBlocks,
+		classicMenus,
+		convertClassicMenu,
+		createNavigationMenu,
+		fallbackNavigationMenuId,
+		isConvertingClassicMenu,
+		ref,
+	] );
 
 	const navRef = useRef();
 
@@ -362,6 +332,25 @@ function Navigation( {
 		classicMenus?.length === 0 &&
 		! hasUncontrolledInnerBlocks;
 
+	useEffect( () => {
+		if ( isPlaceholder ) {
+			/**
+			 *  this fallback only displays (both in editor and on front)
+			 *  the list of pages block if no menu is available as a fallback.
+			 *  We don't want the fallback to request a save,
+			 *  nor to be undoable, hence we mark it non persistent.
+			 */
+			__unstableMarkNextChangeAsNotPersistent();
+			replaceInnerBlocks( clientId, [ createBlock( 'core/page-list' ) ] );
+		}
+	}, [
+		clientId,
+		isPlaceholder,
+		ref,
+		__unstableMarkNextChangeAsNotPersistent,
+		replaceInnerBlocks,
+	] );
+
 	// "loading" state:
 	// - there is a menu creation process in progress.
 	// - there is a classic menu conversion process in progress.
@@ -413,17 +402,6 @@ function Navigation( {
 	] = useState();
 	const [ detectedOverlayColor, setDetectedOverlayColor ] = useState();
 
-	const handleUpdateMenu = useCallback(
-		( menuId, options = { focusNavigationBlock: false } ) => {
-			const { focusNavigationBlock } = options;
-			setRef( menuId );
-			if ( focusNavigationBlock ) {
-				selectBlock( clientId );
-			}
-		},
-		[ selectBlock, clientId ]
-	);
-
 	const onSelectClassicMenu = async ( classicMenu ) => {
 		const navMenu = await convertClassicMenu(
 			classicMenu.id,
@@ -449,7 +427,7 @@ function Navigation( {
 		}
 
 		if ( createNavigationMenuIsSuccess ) {
-			handleUpdateMenu( createNavigationMenuPost.id, {
+			handleUpdateMenu( createNavigationMenuPost?.id, {
 				focusNavigationBlock: true,
 			} );
 
@@ -466,7 +444,7 @@ function Navigation( {
 	}, [
 		createNavigationMenuStatus,
 		createNavigationMenuError,
-		createNavigationMenuPost,
+		createNavigationMenuPost?.id,
 		createNavigationMenuIsError,
 		createNavigationMenuIsSuccess,
 		isCreatingNavigationMenu,
@@ -492,16 +470,12 @@ function Navigation( {
 				__( 'Classic menu import failed.' )
 			);
 		}
-	}, [ classicMenuConversionStatus, classicMenuConversionError ] );
-
-	// Spacer block needs orientation from context. This is a patch until
-	// https://github.com/WordPress/gutenberg/issues/36197 is addressed.
-	useEffect( () => {
-		if ( orientation ) {
-			__unstableMarkNextChangeAsNotPersistent();
-			setAttributes( { orientation } );
-		}
-	}, [ orientation ] );
+	}, [
+		classicMenuConversionStatus,
+		classicMenuConversionError,
+		hideClassicMenuConversionNotice,
+		showClassicMenuConversionNotice,
+	] );
 
 	useEffect( () => {
 		if ( ! enableContrastChecking ) {
@@ -531,7 +505,11 @@ function Navigation( {
 				setDetectedOverlayBackgroundColor
 			);
 		}
-	} );
+	}, [
+		enableContrastChecking,
+		overlayTextColor.color,
+		overlayBackgroundColor.color,
+	] );
 
 	useEffect( () => {
 		if ( ! isSelected && ! isInnerBlockSelected ) {
@@ -572,6 +550,9 @@ function Navigation( {
 		canUserCreateNavigationMenu,
 		hasResolvedCanUserCreateNavigationMenu,
 		ref,
+		hideNavigationMenuPermissionsNotice,
+		showNavigationMenuPermissionsNotice,
+		navMenuResolvedButMissing,
 	] );
 
 	const hasManagePermissions =
@@ -791,6 +772,7 @@ function Navigation( {
 						createNavigationMenuIsSuccess
 					}
 					createNavigationMenuIsError={ createNavigationMenuIsError }
+					currentMenuId={ ref }
 					isNavigationMenuMissing={ isNavigationMenuMissing }
 					isManageMenusButtonDisabled={ isManageMenusButtonDisabled }
 					onCreateNew={ createUntitledEmptyNavigationMenu }
@@ -898,7 +880,9 @@ function Navigation( {
 
 				{ isLoading && (
 					<TagName { ...blockProps }>
-						<Spinner className="wp-block-navigation__loading-indicator" />
+						<div className="wp-block-navigation__loading-indicator-container">
+							<Spinner className="wp-block-navigation__loading-indicator" />
+						</div>
 					</TagName>
 				) }