@wordpress/block-library 8.5.0 → 8.6.0

package/src/navigation/edit/use-convert-classic-menu-to-block-menu.js

@@ -36,89 +36,88 @@ function useConvertClassicToBlockMenu( clientId ) {
 	const [ status, setStatus ] = useState( CLASSIC_MENU_CONVERSION_IDLE );
 	const [ error, setError ] = useState( null );
 
-	async function convertClassicMenuToBlockMenu(
-		menuId,
-		menuName,
-		postStatus = 'publish'
-	) {
-		let navigationMenu;
-		let classicMenuItems;
-
-		// 1. Fetch the classic Menu items.
-		try {
-			classicMenuItems = await registry
-				.resolveSelect( coreStore )
-				.getMenuItems( {
-					menus: menuId,
-					per_page: -1,
-					context: 'view',
-				} );
-		} catch ( err ) {
-			throw new Error(
-				sprintf(
-					// translators: %s: the name of a menu (e.g. Header navigation).
-					__( `Unable to fetch classic menu "%s" from API.` ),
-					menuName
-				),
-				{
-					cause: err,
-				}
-			);
-		}
-
-		// Handle offline response which resolves to `null`.
-		if ( classicMenuItems === null ) {
-			throw new Error(
-				sprintf(
-					// translators: %s: the name of a menu (e.g. Header navigation).
-					__( `Unable to fetch classic menu "%s" from API.` ),
-					menuName
-				)
-			);
-		}
-
-		// 2. Convert the classic items into blocks.
-		const { innerBlocks } = menuItemsToBlocks( classicMenuItems );
-
-		// 3. Create the `wp_navigation` Post with the blocks.
-		try {
-			navigationMenu = await createNavigationMenu(
-				menuName,
-				innerBlocks,
-				postStatus
-			);
-
-			/**
-			 * Immediately trigger editEntityRecord to change the wp_navigation post status to 'publish'.
-			 * This status change causes the menu to be displayed on the front of the site and sets the post state to be "dirty".
-			 * The problem being solved is if saveEditedEntityRecord was used here, the menu would be updated on the frontend and the editor _automatically_,
-			 * without user interaction.
-			 * If the user abandons the site editor without saving, there would still be a wp_navigation post created as draft.
-			 */
-			await editEntityRecord(
-				'postType',
-				'wp_navigation',
-				navigationMenu.id,
-				{
-					status: postStatus,
-				},
-				{ throwOnError: true }
-			);
-		} catch ( err ) {
-			throw new Error(
-				sprintf(
-					// translators: %s: the name of a menu (e.g. Header navigation).
-					__( `Unable to create Navigation Menu "%s".` ),
-					menuName
-				),
-				{
-					cause: err,
-				}
-			);
-		}
-
-		return navigationMenu;
-	}
+	const convertClassicMenuToBlockMenu = useCallback(
+		async ( menuId, menuName, postStatus = 'publish' ) => {
+			let navigationMenu;
+			let classicMenuItems;
+
+			// 1. Fetch the classic Menu items.
+			try {
+				classicMenuItems = await registry
+					.resolveSelect( coreStore )
+					.getMenuItems( {
+						menus: menuId,
+						per_page: -1,
+						context: 'view',
+					} );
+			} catch ( err ) {
+				throw new Error(
+					sprintf(
+						// translators: %s: the name of a menu (e.g. Header navigation).
+						__( `Unable to fetch classic menu "%s" from API.` ),
+						menuName
+					),
+					{
+						cause: err,
+					}
+				);
+			}
+
+			// Handle offline response which resolves to `null`.
+			if ( classicMenuItems === null ) {
+				throw new Error(
+					sprintf(
+						// translators: %s: the name of a menu (e.g. Header navigation).
+						__( `Unable to fetch classic menu "%s" from API.` ),
+						menuName
+					)
+				);
+			}
+
+			// 2. Convert the classic items into blocks.
+			const { innerBlocks } = menuItemsToBlocks( classicMenuItems );
+
+			// 3. Create the `wp_navigation` Post with the blocks.
+			try {
+				navigationMenu = await createNavigationMenu(
+					menuName,
+					innerBlocks,
+					postStatus
+				);
+
+				/**
+				 * Immediately trigger editEntityRecord to change the wp_navigation post status to 'publish'.
+				 * This status change causes the menu to be displayed on the front of the site and sets the post state to be "dirty".
+				 * The problem being solved is if saveEditedEntityRecord was used here, the menu would be updated on the frontend and the editor _automatically_,
+				 * without user interaction.
+				 * If the user abandons the site editor without saving, there would still be a wp_navigation post created as draft.
+				 */
+				await editEntityRecord(
+					'postType',
+					'wp_navigation',
+					navigationMenu.id,
+					{
+						status: postStatus,
+					},
+					{ throwOnError: true }
+				);
+			} catch ( err ) {
+				throw new Error(
+					sprintf(
+						// translators: %s: the name of a menu (e.g. Header navigation).
+						__( `Unable to create Navigation Menu "%s".` ),
+						menuName
+					),
+					{
+						cause: err,
+					}
+				);
+			}
+
+			return navigationMenu;
+		},
+		[ createNavigationMenu, editEntityRecord, registry ]
+	);
 
 	const convert = useCallback(
 		async ( menuId, menuName, postStatus ) => {

package/src/navigation/edit/use-create-navigation-menu.js

@@ -90,7 +90,7 @@ export default function useCreateNavigationMenu( clientId ) {
 					} );
 				} );
 		},
-		[ serialize, saveEntityRecord, editEntityRecord, generateDefaultTitle ]
+		[ saveEntityRecord, editEntityRecord, generateDefaultTitle ]
 	);
 
 	return {

package/src/navigation/edit/use-navigation-notice.js

@@ -23,7 +23,7 @@ function useNavigationNotice( { name, message = '' } = {} ) {
 				type: 'snackbar',
 			} );
 		},
-		[ noticeRef, createWarningNotice ]
+		[ noticeRef, createWarningNotice, message, name ]
 	);
 
 	const hideNotice = useCallback( () => {

package/src/navigation/editor.scss

@@ -39,8 +39,7 @@
 }
 
 // Only show the flyout on hover if the parent menu item is selected.
-.wp-block-navigation:not(.is-selected):not(.has-child-selected)
-.has-child:hover {
+.wp-block-navigation:not(.is-selected):not(.has-child-selected) .has-child:hover {
 	> .wp-block-navigation__submenu-container {
 		opacity: 0;
 		visibility: hidden;
@@ -49,6 +48,7 @@
 
 // Styles for submenu flyout.
 .has-child {
+
 	&.is-selected,
 	&.has-child-selected {
 		> .wp-block-navigation__submenu-container {
@@ -76,8 +76,7 @@
 	flex-direction: column;
 }
 
-.is-dragging-components-draggable
-.wp-block-navigation-link > .wp-block-navigation__container {
+.is-dragging-components-draggable .wp-block-navigation-link > .wp-block-navigation__container {
 	// Set opacity to 1 to still be able to show the draggable chip.
 	opacity: 1;
 	visibility: hidden;
@@ -117,6 +116,7 @@
  */
 
 $colors-selector-size: 22px;
+
 .block-library-colors-selector {
 	width: auto;
 
@@ -151,7 +151,7 @@ $colors-selector-size: 22px;
 		min-width: $colors-selector-size;
 		height: $colors-selector-size;
 		min-height: $colors-selector-size;
-		line-height: ( $colors-selector-size - 2 );
+		line-height: ($colors-selector-size - 2);
 		padding: 2px;
 
 		> svg {
@@ -161,6 +161,7 @@ $colors-selector-size: 22px;
 
 		// Styling icon color.
 		&.has-text-color {
+
 			> svg,
 			> svg path {
 				color: inherit;
@@ -171,6 +172,7 @@ $colors-selector-size: 22px;
 
 // Colors Selector Popover.
 $color-control-label-height: 20px;
+
 .block-library-colors-selector__popover {
 	.color-palette-controller-container {
 		padding: 16px;
@@ -222,13 +224,16 @@ $color-control-label-height: 20px;
 	0% {
 		opacity: 1;
 	}
+
 	50% {
 		opacity: 0.5;
 	}
+
 	100% {
 		opacity: 1;
 	}
 }
+
 // Unstyle some inherited placeholder component styles.
 .components-placeholder.wp-block-navigation-placeholder {
 	outline: none;
@@ -271,6 +276,7 @@ $color-control-label-height: 20px;
 	// against any background color.
 	color: currentColor;
 	background: transparent;
+
 	&::before {
 		content: "";
 		display: block;
@@ -338,6 +344,7 @@ $color-control-label-height: 20px;
 	// Hide the navigation indicator when in small contexts.
 	.is-small &,
 	.is-medium & {
+
 		.wp-block-navigation-placeholder__actions__indicator,
 		.wp-block-navigation-placeholder__actions__indicator + hr {
 			display: none;
@@ -427,15 +434,14 @@ $color-control-label-height: 20px;
 		}
 	}
 }
+
 // Emulate the fullscreen editing inside the editor.
 // Most of this can be removed when the iframe lands.
 
 // When not fullscreen.
 .wp-block-navigation__responsive-container.is-menu-open {
 	position: fixed;
-	top:
-		$admin-bar-height-big + $header-height + $block-toolbar-height +
-		$border-width;
+	top: $admin-bar-height-big + $header-height + $block-toolbar-height + $border-width;
 
 	@include break-medium() {
 		top: $admin-bar-height + $header-height + $border-width;
@@ -445,6 +451,7 @@ $color-control-label-height: 20px;
 	@include break-medium() {
 		left: $admin-sidebar-width-collapsed;
 	}
+
 	@include break-large() {
 		left: $admin-sidebar-width;
 	}
@@ -452,17 +459,13 @@ $color-control-label-height: 20px;
 
 .has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open {
 	@include break-medium() {
-		top:
-			$admin-bar-height + $header-height + $block-toolbar-height +
-			$border-width;
+		top: $admin-bar-height + $header-height + $block-toolbar-height + $border-width;
 	}
 }
 
 .is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,
 .is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open {
-	top:
-		$admin-bar-height + $header-height + $block-toolbar-height +
-		$border-width;
+	top: $admin-bar-height + $header-height + $block-toolbar-height + $border-width;
 }
 
 .is-sidebar-opened .wp-block-navigation__responsive-container.is-menu-open {
@@ -473,9 +476,7 @@ $color-control-label-height: 20px;
 .is-fullscreen-mode {
 	.wp-block-navigation__responsive-container.is-menu-open {
 		left: 0; // Unset the value from non fullscreen mode.
-		top:
-			$admin-bar-height-big + $header-height + $block-toolbar-height +
-			$border-width;
+		top: $admin-bar-height-big + $header-height + $block-toolbar-height + $border-width;
 
 		@include break-medium() {
 			top: $header-height + $border-width;
@@ -495,8 +496,7 @@ $color-control-label-height: 20px;
 }
 
 // The iframe makes these rules a lot simpler.
-body.editor-styles-wrapper
-.wp-block-navigation__responsive-container.is-menu-open {
+body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-open {
 	top: 0;
 	right: 0;
 	bottom: 0;
@@ -536,6 +536,7 @@ body.editor-styles-wrapper
 .components-heading.wp-block-navigation-off-canvas-editor__title {
 	margin: 0;
 }
+
 .wp-block-navigation-off-canvas-editor__header {
 	margin-bottom: $grid-unit-10;
 }
@@ -552,6 +553,7 @@ body.editor-styles-wrapper
 	0% {
 		opacity: 0;
 	}
+
 	100% {
 		opacity: 1;
 	}
@@ -559,7 +561,7 @@ body.editor-styles-wrapper
 
 // Space spinner to give it breathing
 // room when block is selected and has focus outline.
-.wp-block-navigation .components-spinner {
+.wp-block-navigation__loading-indicator-container {
 	padding: $grid-unit-10 $grid-unit-15;
 }
 
@@ -571,6 +573,7 @@ body.editor-styles-wrapper
 	0% {
 		opacity: 1;
 	}
+
 	100% {
 		opacity: 0.5;
 	}

package/src/navigation/index.php

@@ -348,7 +348,7 @@ function block_core_navigation_maybe_use_classic_menu_fallback() {
 	$wp_insert_post_result = wp_insert_post(
 		array(
 			'post_content' => $classic_nav_menu_blocks,
-			'post_title'   => $classic_nav_menu->slug,
+			'post_title'   => $classic_nav_menu->name,
 			'post_name'    => $classic_nav_menu->slug,
 			'post_status'  => 'publish',
 			'post_type'    => 'wp_navigation',
@@ -431,37 +431,6 @@ function block_core_navigation_block_contains_core_navigation( $inner_blocks ) {
 	return false;
 }
 
-/**
- * Create and returns a navigation menu containing a page-list as a fallback.
- *
- * @return array the newly created navigation menu.
- */
-function block_core_navigation_get_default_pages_fallback() {
-	$registry = WP_Block_Type_Registry::get_instance();
-
-	// If `core/page-list` is not registered then use empty blocks.
-	$default_blocks = $registry->is_registered( 'core/page-list' ) ? '<!-- wp:page-list /-->' : '';
-
-	// Create a new navigation menu from the fallback blocks.
-	$wp_insert_post_result = wp_insert_post(
-		array(
-			'post_content' => $default_blocks,
-			'post_title'   => 'Navigation', // TODO - use the template slug in future.
-			'post_name'    => 'Navigation', // TODO - use the template slug in future.
-			'post_status'  => 'publish',
-			'post_type'    => 'wp_navigation',
-		),
-		true // So that we can check whether the result is an error.
-	);
-
-	if ( is_wp_error( $wp_insert_post_result ) ) {
-		return;
-	}
-
-	// Fetch the most recently published navigation which will be the default one created above.
-	return block_core_navigation_get_most_recently_published_navigation();
-}
-
 /**
  * Retrieves the appropriate fallback to be used on the front of the
  * site when there is no menu assigned to the Nav block.
@@ -472,7 +441,18 @@ function block_core_navigation_get_default_pages_fallback() {
  * @return array the array of blocks to be used as a fallback.
  */
 function block_core_navigation_get_fallback_blocks() {
-	// Get the most recently published Navigation post.
+	$page_list_fallback = array(
+		array(
+			'blockName' => 'core/page-list',
+		),
+	);
+
+	$registry = WP_Block_Type_Registry::get_instance();
+
+	// If `core/page-list` is not registered then return empty blocks.
+	$fallback_blocks = $registry->is_registered( 'core/page-list' ) ? $page_list_fallback : array();
+
+	// Default to a list of Pages.
 	$navigation_post = block_core_navigation_get_most_recently_published_navigation();
 
 	// If there are no navigation posts then try to find a classic menu
@@ -481,15 +461,14 @@ function block_core_navigation_get_fallback_blocks() {
 		$navigation_post = block_core_navigation_maybe_use_classic_menu_fallback();
 	}
 
-	// If there are no navigation posts then default to a list of Pages.
-	if ( ! $navigation_post ) {
-		$navigation_post = block_core_navigation_get_default_pages_fallback();
-	}
-
-	// Use the first non-empty Navigation as fallback, there should always be one.
+	// Use the first non-empty Navigation as fallback if available.
 	if ( $navigation_post ) {
 		$parsed_blocks  = parse_blocks( $navigation_post->post_content );
 		$maybe_fallback = block_core_navigation_filter_out_empty_blocks( $parsed_blocks );
+
+		// Normalizing blocks may result in an empty array of blocks if they were all `null` blocks.
+		// In this case default to the (Page List) fallback.
+		$fallback_blocks = ! empty( $maybe_fallback ) ? $maybe_fallback : $fallback_blocks;
 	}
 
 	// Normalizing blocks may result in an empty array of blocks if they were all `null` blocks.

package/src/navigation-link/edit.js

@@ -225,15 +225,6 @@ export default function NavigationLinkEdit( {
 		[ clientId ]
 	);
 
-	useEffect( () => {
-		// This side-effect should not create an undo level as those should
-		// only be created via user interactions. Mark this change as
-		// not persistent to avoid undo level creation.
-		// See https://github.com/WordPress/gutenberg/issues/34564.
-		__unstableMarkNextChangeAsNotPersistent();
-		setAttributes( { isTopLevelLink } );
-	}, [ isTopLevelLink ] );
-
 	/**
 	 * Transform to submenu block.
 	 */

package/src/navigation-link/index.php

@@ -9,18 +9,17 @@
  * Build an array with CSS classes and inline styles defining the colors
  * which will be applied to the navigation markup in the front-end.
  *
- * @param  array $context    Navigation block context.
- * @param  array $attributes Block attributes.
+ * @param  array $context     Navigation block context.
+ * @param  array $attributes  Block attributes.
+ * @param  bool  $is_sub_menu Whether the link is part of a sub-menu.
  * @return array Colors CSS classes and inline styles.
  */
-function block_core_navigation_link_build_css_colors( $context, $attributes ) {
+function block_core_navigation_link_build_css_colors( $context, $attributes, $is_sub_menu = false ) {
 	$colors = array(
 		'css_classes'   => array(),
 		'inline_styles' => '',
 	);
 
-	$is_sub_menu = isset( $attributes['isTopLevelLink'] ) ? ( ! $attributes['isTopLevelLink'] ) : false;
-
 	// Text color.
 	$named_text_color  = null;
 	$custom_text_color = null;
@@ -174,13 +173,11 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$colors          = block_core_navigation_link_build_css_colors( $block->context, $attributes );
 	$font_sizes      = block_core_navigation_link_build_css_font_sizes( $block->context );
 	$classes         = array_merge(
-		$colors['css_classes'],
 		$font_sizes['css_classes']
 	);
-	$style_attribute = ( $colors['inline_styles'] . $font_sizes['inline_styles'] );
+	$style_attribute = $font_sizes['inline_styles'];
 
 	$css_classes = trim( implode( ' ', $classes ) );
 	$has_submenu = count( $block->inner_blocks ) > 0;

package/src/navigation-link/link-ui.js

@@ -165,7 +165,6 @@ export function LinkUI( props ) {
 			placement="bottom"
 			onClose={ props.onClose }
 			anchor={ props.anchor }
-			__unstableSlotName={ '__unstable-block-tools-after' }
 			shift
 		>
 			<LinkControl

package/src/navigation-submenu/edit.js

@@ -224,16 +224,6 @@ export default function NavigationSubmenuEdit( {
 		}
 	}, [] );
 
-	// Store the colors from context as attributes for rendering.
-	useEffect( () => {
-		// This side-effect should not create an undo level as those should
-		// only be created via user interactions. Mark this change as
-		// not persistent to avoid undo level creation.
-		// See https://github.com/WordPress/gutenberg/issues/34564.
-		__unstableMarkNextChangeAsNotPersistent();
-		setAttributes( { isTopLevelItem } );
-	}, [ isTopLevelItem ] );
-
 	/**
 	 * The hook shouldn't be necessary but due to a focus loss happening
 	 * when selecting a suggestion in the link popover, we force close on block unselection.

package/src/navigation-submenu/index.php

@@ -9,18 +9,17 @@
  * Build an array with CSS classes and inline styles defining the colors
  * which will be applied to the navigation markup in the front-end.
  *
- * @param  array $context    Navigation block context.
- * @param  array $attributes Block attributes.
+ * @param  array $context     Navigation block context.
+ * @param  array $attributes  Block attributes.
+ * @param  bool  $is_sub_menu Whether the block is a sub-menu.
  * @return array Colors CSS classes and inline styles.
  */
-function block_core_navigation_submenu_build_css_colors( $context, $attributes ) {
+function block_core_navigation_submenu_build_css_colors( $context, $attributes, $is_sub_menu = false ) {
 	$colors = array(
 		'css_classes'   => array(),
 		'inline_styles' => '',
 	);
 
-	$is_sub_menu = isset( $attributes['isTopLevelItem'] ) ? ( ! $attributes['isTopLevelItem'] ) : false;
-
 	// Text color.
 	$named_text_color  = null;
 	$custom_text_color = null;
@@ -250,6 +249,15 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	}
 
 	if ( $has_submenu ) {
+		$colors      = block_core_navigation_submenu_build_css_colors( $block->context, $attributes, $has_submenu );
+		$classes     = array_merge(
+			array( 'wp-block-navigation__submenu-container' ),
+			$colors['css_classes']
+		);
+		$css_classes = trim( implode( ' ', $classes ) );
+
+		$style_attribute = $colors['inline_styles'];
+
 		$inner_blocks_html = '';
 		foreach ( $block->inner_blocks as $inner_block ) {
 			$inner_blocks_html .= $inner_block->render();
@@ -263,10 +271,19 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 			$html = $tag_processor->get_updated_html();
 		}
 
+		$wrapper_attributes = get_block_wrapper_attributes(
+			array(
+				'class' => $css_classes,
+				'style' => $style_attribute,
+			)
+		);
+
 		$html .= sprintf(
-			'<ul class="wp-block-navigation__submenu-container">%s</ul>',
+			'<ul %s>%s</ul>',
+			$wrapper_attributes,
 			$inner_blocks_html
 		);
+
 	}
 
 	$html .= '</li>';

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

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

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

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Page Break';
+const initialHtml = `
+<!-- wp:nextpage -->
+<!--nextpage-->
+<!-- /wp:nextpage -->`;
+
+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 );
+	} );
+} );