@wordpress/block-library 6.0.23 → 7.0.0

package/src/navigation/editor.scss

@@ -12,11 +12,10 @@
 		padding-left: 0;
 	}
 
-	// Revert any left/right margins.
+	// Revert any margins.
 	// This also makes it work with classic theme auto margins.
 	.wp-block-navigation-item.wp-block {
-		margin-left: revert;
-		margin-right: revert;
+		margin: revert;
 	}
 }
 
@@ -101,6 +100,18 @@
 	display: block;
 	position: static;
 	width: 100%;
+
+	// Colors need to work in both dark themes, and dark dropdown colors.
+	// This customization would be nice to retire in a refactor of the canvas appender button.
+	.block-editor-button-block-appender {
+		color: $white;
+		background: $gray-900;
+		padding: 0;
+		width: $button-size-small;
+		border-radius: $radius-block-ui;
+		margin-right: 0;
+		margin-left: auto;
+	}
 }
 
 // Hide when hovering.
@@ -188,14 +199,44 @@ $color-control-label-height: 20px;
 	}
 }
 
+// Override inner padding on default appender.
+// This should be a temporary fix, to be replaced by improvements to
+// the sibling inserter.
+// See https://github.com/WordPress/gutenberg/issues/37572.
 .wp-block-navigation .block-editor-button-block-appender {
-	justify-content: flex-start;
+	background-color: $gray-900;
+	color: $white;
+
+	// This needs specificity to override an inherited padding.
+	// That source padding in turn has high specificity to protect
+	// from theme CSS bleed.
+	&.block-editor-button-block-appender.block-editor-button-block-appender {
+		padding: 0;
+	}
+}
+
+.wp-block-navigation .wp-block .wp-block .block-editor-button-block-appender {
+	background-color: transparent;
+	color: $gray-900;
 }
 
+
 /**
  * Setup state
  */
 
+// Loading state.
+@keyframes loadingpulse {
+	0% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.5;
+	}
+	100% {
+		opacity: 1;
+	}
+}
 // Unstyle some inherited placeholder component styles.
 .components-placeholder.wp-block-navigation-placeholder {
 	outline: none;
@@ -216,104 +257,86 @@ $color-control-label-height: 20px;
 	// For the placeholder indicators to colorize correctly, colors need to be inherited unless selected.
 	color: inherit;
 
-	.is-selected & {
+	.wp-block-navigation.is-selected & {
 		color: $gray-900;
 	}
 }
 
-// Spinner.
-.wp-block-navigation-placeholder .components-spinner {
-	margin-top: -4px;
-	margin-left: 4px;
-	vertical-align: middle;
-	margin-right: 7px;
-}
-
-@keyframes loadingpulse {
-	0% {
-		opacity: 1;
-	}
-	50% {
-		opacity: 0.5;
-	}
-	100% {
-		opacity: 1;
-	}
-}
-
 // Unselected state.
 .wp-block-navigation-placeholder__preview {
 	display: flex;
-	flex-direction: row;
 	align-items: center;
-	flex-wrap: nowrap;
-	width: 100%;
-	overflow: hidden;
+	min-width: $grid-unit-10 * 12;
+	font-size: $default-font-size;
+	font-family: $default-font;
 
-	&.is-loading {
-		animation: loadingpulse 1s linear infinite;
-		animation-delay: 0.5s; // avoid animating for fast network responses
+	.wp-block-navigation.is-selected & {
+		display: none;
 	}
 
-	// Style skeleton elements to mostly match the metrics of actual menu items.
-	// Needs specificity.
-	.wp-block-navigation-item.wp-block-navigation-item {
-		position: relative;
-		min-width: 72px;
-
-		&::before {
-			display: block;
-			content: "";
-			border-radius: $radius-block-ui;
-			background: currentColor;
-			height: $grid-unit-20;
-			width: 100%;
-		}
-	}
+	// Draw the dashed outline.
+	// By setting the dashed border to currentColor, we ensure it's visible
+	// against any background color.
+	color: currentColor;
+	background: transparent;
+	&::before {
+		content: "";
+		display: block;
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		border: $border-width dashed currentColor;
+		opacity: 0.4;
+		pointer-events: none;
 
-	.wp-block-navigation-placeholder__preview-search-icon {
-		height: $icon-size;
-		svg {
-			fill: currentColor;
-		}
+		// Inherit border radius from style variations.
+		border-radius: inherit;
 	}
 
-	.wp-block-navigation-item.wp-block-navigation-item,
-	.wp-block-navigation-placeholder__preview-search-icon {
-		opacity: 0.3;
+	> svg {
+		fill: currentColor;
+		opacity: 0.4;
 	}
+}
 
-	&:not(.is-loading) {
-		// Don't show the preview boxes for an empty nav block,
-		// but be technically present to help size the empty state.
-		.wp-block-navigation.is-selected & {
-			display: flex;
-			opacity: 0;
-			width: 0;
-			overflow: hidden;
-			flex-wrap: nowrap;
-			flex: 0;
-		}
+// Prevent layout shift for vertical variant.
+.wp-block-navigation.is-vertical .is-small,
+.wp-block-navigation.is-vertical .is-medium {
+	.components-placeholder__fieldset {
+		// The size of two buttons, with top and bottom padding, and gap.
+		min-height: ($button-size * 2) + $grid-unit-15 + ($grid-unit-15 * 0.5);
+	}
+}
 
-		// Hide entirely when vertical.
-		.wp-block-navigation.is-selected .is-small &,
-		.wp-block-navigation.is-selected .is-medium & {
-			display: none;
-		}
+.wp-block-navigation.is-vertical .is-large {
+	.components-placeholder__fieldset {
+		// The size of three buttons, with top and bottom padding, and gap.
+		min-height: ($button-size * 3) + $grid-unit-15 + $grid-unit-15;
 	}
 }
 
 // Selected state.
+.wp-block-navigation-placeholder__preview,
+.wp-block-navigation-placeholder__controls {
+	padding: ($grid-unit-15 * 0.5) $grid-unit-10;
+	flex-direction: row;
+	align-items: flex-start;
+}
+
 .wp-block-navigation-placeholder__controls {
 	border-radius: $radius-block-ui;
 	background-color: $white;
 	box-shadow: inset 0 0 0 $border-width $gray-900;
-	flex-direction: row;
-	align-items: center;
 	display: none;
 	position: relative;
 	z-index: 1;
-	padding: $grid-unit-05 $grid-unit-10;
+
+	// Show when selected.
+	.wp-block-navigation.is-selected & {
+		display: flex;
+	}
 
 	// If an ancestor has a text-decoration property applied, it is inherited regardless of
 	// the specificity of a child element. Only pulling the child out of the flow fixes it.
@@ -321,31 +344,25 @@ $color-control-label-height: 20px;
 	float: left;
 	width: 100%;
 
-	// Show when selected.
-	.wp-block-navigation.is-selected & {
-		display: flex;
-	}
-
-	// Hide a few elements in medium size placeholders.
-	// @todo: part of the code here will be irrelevant if https://github.com/WordPress/gutenberg/pull/36775 lands.
+	// 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,
-		.wp-block-navigation-placeholder__actions > :nth-last-child(3), // Add all pages.
-		.wp-block-navigation-placeholder__actions > :nth-last-child(2) { // hr separator after it.
+		.wp-block-navigation-placeholder__actions__indicator + hr {
 			display: none;
 		}
 	}
 
-	// Show stacked for the vertical navigation, or small placeholders.
-	.is-small & {
+	// Vertical orientation or small context.
+	.is-small &,
+	.wp-block-navigation.is-vertical & {
 		.wp-block-navigation-placeholder__actions {
 			flex-direction: column;
-		}
+			align-items: flex-start;
 
-		// Hide the separators in the vertical version.
-		.wp-block-navigation-placeholder__actions hr {
-			display: none;
+			hr {
+				display: none;
+			}
 		}
 	}
 
@@ -353,22 +370,23 @@ $color-control-label-height: 20px;
 		margin-right: $grid-unit-15;
 		height: $button-size; // Prevents jumpiness.
 	}
+}
 
-	// Block title
-	.wp-block-navigation-placeholder__actions__indicator {
-		display: flex;
-		padding: 0 ($grid-unit-15 * 0.5) 0 0;
-		align-items: center;
-		justify-content: flex-start;
-		line-height: 0;
-		min-height: $button-size;
+// Block title
+.wp-block-navigation-placeholder__actions__indicator {
+	display: flex;
+	padding: 0 ($grid-unit-15 * 0.5) 0 0;
+	align-items: center;
+	justify-content: flex-start;
+	line-height: 0;
+	height: $button-size;
 
-		// Line up with the icon in the toolbar.
-		margin-left: $grid-unit-05;
+	// Line up with the icon in the toolbar.
+	margin-left: $grid-unit-05;
 
-		svg {
-			margin-right: $grid-unit-05;
-		}
+	svg {
+		margin-right: $grid-unit-05;
+		fill: currentColor;
 	}
 }
 
@@ -574,3 +592,19 @@ body.editor-styles-wrapper
 	justify-content: center;
 	margin-bottom: $grid-unit-20;
 }
+
+.wp-block-navigation__overlay-menu-preview {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	background-color: $gray-100;
+	padding: 0 $grid-unit-30;
+	height: $grid-unit-40 * 2;
+	margin-bottom: $grid-unit-15;
+
+	&.open {
+		box-shadow: inset 0 0 0 $border-width $gray-200;
+		outline: 1px solid transparent; // Box shadow is removed in high contrast mode, a transparent outline is made opaque.
+		background-color: $white;
+	}
+}

package/src/navigation/index.php

@@ -245,7 +245,7 @@ function block_core_navigation_build_css_font_sizes( $attributes ) {
  * @return string
  */
 function block_core_navigation_render_submenu_icon() {
-	return '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg>';
+	return '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg>';
 }
 
 
@@ -343,6 +343,8 @@ function block_core_navigation_get_fallback_blocks() {
 	 * To customise the blocks provided return an array of blocks - these should be valid
 	 * children of the `core/navigation` block.
 	 *
+	 * @since 5.9.0
+	 *
 	 * @param array[] default fallback blocks provided by the default block mechanic.
 	 */
 	return apply_filters( 'block_core_navigation_render_fallback', $fallback_blocks );
@@ -351,9 +353,9 @@ function block_core_navigation_get_fallback_blocks() {
 /**
  * Renders the `core/navigation` block on server.
  *
- * @param array $attributes The block attributes.
- * @param array $content The saved content.
- * @param array $block The parsed block.
+ * @param array    $attributes The block attributes.
+ * @param string   $content    The saved content.
+ * @param WP_Block $block      The parsed block.
  *
  * @return string Returns the post content with the legacy widget added.
  */
@@ -537,26 +539,31 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		$is_hidden_by_default ? 'always-shown' : '',
 	);
 
+	$toggle_button_icon        = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg>';
+	$should_display_icon_label = isset( $attributes['hasIcon'] ) && true === $attributes['hasIcon'];
+	$toggle_button_content     = $should_display_icon_label ? $toggle_button_icon : 'Menu';
+
 	$responsive_container_markup = sprintf(
-		'<button aria-haspopup="true" aria-label="%3$s" class="%6$s" data-micromodal-trigger="modal-%1$s"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg></button>
+		'<button aria-haspopup="true" aria-label="%3$s" class="%6$s" data-micromodal-trigger="modal-%1$s">%9$s</button>
 			<div class="%5$s" style="%7$s" id="modal-%1$s">
 				<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
 					<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s">
-							<button aria-label="%4$s" data-micromodal-close class="wp-block-navigation__responsive-container-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg></button>
+							<button aria-label="%4$s" data-micromodal-close class="wp-block-navigation__responsive-container-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg></button>
 						<div class="wp-block-navigation__responsive-container-content" id="modal-%1$s-content">
 							%2$s
 						</div>
 					</div>
 				</div>
 			</div>',
-		$modal_unique_id,
+		esc_attr( $modal_unique_id ),
 		$inner_blocks_html,
 		__( 'Open menu' ), // Open button label.
 		__( 'Close menu' ), // Close button label.
-		implode( ' ', $responsive_container_classes ),
-		implode( ' ', $open_button_classes ),
-		$colors['overlay_inline_styles'],
-		__( 'Menu' )
+		esc_attr( implode( ' ', $responsive_container_classes ) ),
+		esc_attr( implode( ' ', $open_button_classes ) ),
+		safecss_filter_attr( $colors['overlay_inline_styles'] ),
+		__( 'Menu' ),
+		$toggle_button_content
 	);
 
 	return sprintf(
@@ -569,8 +576,8 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 /**
  * Register the navigation block.
  *
- * @throws WP_Error An WP_Error exception parsing the block definition.
  * @uses render_block_core_navigation()
+ * @throws WP_Error An WP_Error exception parsing the block definition.
  */
 function register_block_core_navigation() {
 	register_block_type_from_metadata(

package/src/navigation/menu-items-to-blocks.js

@@ -154,14 +154,15 @@ function menuItemToBlockAttributes( {
 			classes.join( ' ' ).trim() && {
 				className: classes.join( ' ' ).trim(),
 			} ),
+		/* eslint-disable camelcase */
 		...( attr_title?.length && {
 			title: attr_title,
 		} ),
-		// eslint-disable-next-line camelcase
 		...( object_id &&
 			'custom' !== object && {
 				id: object_id,
 			} ),
+		/* eslint-enable camelcase */
 		...( description?.length && {
 			description,
 		} ),

package/src/navigation/style.scss

@@ -306,11 +306,14 @@ button.wp-block-navigation-item__content {
  */
 
 // Menu items with no background.
+.wp-block-navigation__responsive-container,
+.wp-block-navigation__responsive-close,
+.wp-block-navigation__responsive-dialog,
 .wp-block-navigation,
 .wp-block-navigation .wp-block-page-list,
 .wp-block-navigation__container,
 .wp-block-navigation__responsive-container-content {
-	gap: var(--wp--style--block-gap, 2em);
+	gap: inherit;
 }
 
 // Menu items with background.
@@ -321,7 +324,7 @@ button.wp-block-navigation-item__content {
 	&,
 	.wp-block-navigation .wp-block-page-list,
 	.wp-block-navigation__container {
-		gap: var(--wp--style--block-gap, 0.5em);
+		gap: inherit;
 	}
 }
 
@@ -452,7 +455,7 @@ button.wp-block-navigation-item__content {
 		background-color: inherit;
 
 		// Use em units to apply padding, so themes can more easily style this in various ways.
-		padding: 2em;
+		padding: 2rem;
 
 		// Allow modal to scroll.
 		overflow: auto;
@@ -462,7 +465,7 @@ button.wp-block-navigation-item__content {
 
 		.wp-block-navigation__responsive-container-content {
 			// Add padding above to accommodate close button.
-			padding-top: calc(2em + #{ $navigation-icon-size });
+			padding-top: calc(2rem + #{ $navigation-icon-size });
 
 			// Don't crop the focus style.
 			overflow: visible;
@@ -502,14 +505,14 @@ button.wp-block-navigation-item__content {
 				// Position and style.
 				position: static;
 				border: none;
-				padding-left: 2em;
-				padding-right: 2em;
+				padding-left: 2rem;
+				padding-right: 2rem;
 			}
 
 			// Space unfolded items using gap and padding for submenus.
 			.wp-block-navigation__submenu-container,
 			.wp-block-navigation__container {
-				gap: var(--wp--style--block-gap, 2em);
+				gap: inherit;
 			}
 
 			// Apply top padding to nested submenus.
@@ -580,6 +583,12 @@ button.wp-block-navigation-item__content {
 	color: #000;
 }
 
+// Overlay menu toggle button label
+.wp-block-navigation__toggle_button_label {
+	font-size: 1rem;
+	font-weight: bold;
+}
+
 // Menu and close buttons.
 .wp-block-navigation__responsive-container-open,
 .wp-block-navigation__responsive-container-close {
@@ -622,6 +631,14 @@ button.wp-block-navigation-item__content {
 // The menu adds wrapping containers.
 .wp-block-navigation__responsive-close {
 	width: 100%;
+
+	// This element is not keyboard accessible, and is focusable only using the mouse.
+	// It is part of the MicroModal library that adds a scrim outside of a modal dialog that is not fullscreen,
+	// where clicking that scrim closes the overlay just like the close button.
+	// It should not have a visible focus rectangle.
+	&:focus {
+		outline: none;
+	}
 }
 
 .is-menu-open .wp-block-navigation__responsive-close,

package/src/navigation/use-convert-classic-menu.js

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useState, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useNavigationEntities from './use-navigation-entities';
+import menuItemsToBlocks from './menu-items-to-blocks';
+
+export default function useConvertClassicMenu( onFinish ) {
+	const [ selectedMenu, setSelectedMenu ] = useState();
+	const [
+		isAwaitingMenuItemResolution,
+		setIsAwaitingMenuItemResolution,
+	] = useState( false );
+	const [ menuName, setMenuName ] = useState( '' );
+
+	const { menuItems, hasResolvedMenuItems } = useNavigationEntities(
+		selectedMenu
+	);
+
+	const createFromMenu = useCallback(
+		( name ) => {
+			const { innerBlocks: blocks } = menuItemsToBlocks( menuItems );
+			onFinish( blocks, name );
+		},
+		[ menuItems, menuItemsToBlocks, onFinish ]
+	);
+
+	useEffect( () => {
+		// If the user selected a menu but we had to wait for menu items to
+		// finish resolving, then create the block once resolution finishes.
+		if ( isAwaitingMenuItemResolution && hasResolvedMenuItems ) {
+			createFromMenu( menuName );
+			setIsAwaitingMenuItemResolution( false );
+		}
+	}, [ isAwaitingMenuItemResolution, hasResolvedMenuItems, menuName ] );
+
+	return useCallback(
+		( id, name ) => {
+			setSelectedMenu( id );
+
+			// If we have menu items, create the block right away.
+			if ( hasResolvedMenuItems ) {
+				createFromMenu( name );
+				return;
+			}
+
+			// Otherwise, create the block when resolution finishes.
+			setIsAwaitingMenuItemResolution( true );
+			// Store the name to use later.
+			setMenuName( name );
+		},
+		[ hasResolvedMenuItems, createFromMenu ]
+	);
+}

package/src/navigation/use-navigation-entities.js

@@ -40,7 +40,7 @@ function useMenuEntities() {
 				coreStore
 			);
 
-			const menusParameters = [ { per_page: -1 } ];
+			const menusParameters = [ { per_page: -1, context: 'view' } ];
 
 			return {
 				menus: getMenus( ...menusParameters ),
@@ -73,6 +73,7 @@ function useMenuItemEntities( menuId ) {
 						{
 							menus: menuId,
 							per_page: -1,
+							context: 'view',
 						},
 				  ]
 				: undefined;
@@ -115,6 +116,7 @@ function usePageEntities() {
 					order: 'asc',
 					orderby: 'id',
 					per_page: -1,
+					context: 'view',
 				},
 			];
 

package/src/navigation-area/block.json

@@ -1,15 +1,11 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/navigation-area",
 	"title": "Navigation Area",
 	"category": "theme",
 	"description": "Define a navigation area for your theme. The navigation block associated with this area will be automatically displayed.",
-	"keywords": [
-		"menu",
-		"navigation",
-		"links",
-		"location"
-	],
+	"keywords": [ "menu", "navigation", "links", "location" ],
 	"textdomain": "default",
 	"attributes": {
 		"area": {
@@ -22,6 +18,6 @@
 	},
 	"supports": {
 		"html": false,
-		"inserter": true
+		"inserter": false
 	}
 }

package/src/navigation-area/edit.js

@@ -53,7 +53,8 @@ function NavigationAreaBlock( { attributes, setAttributes } ) {
 	);
 
 	deprecated( 'wp.blockLibrary.NavigationArea', {
-		since: '5.9',
+		since: '12.0',
+		plugin: 'gutenberg',
 	} );
 
 	return (

package/src/navigation-link/block.json

@@ -1,11 +1,10 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/navigation-link",
 	"title": "Custom Link",
 	"category": "design",
-	"parent": [
-		"core/navigation"
-	],
+	"parent": [ "core/navigation" ],
 	"description": "Add a page, link, or another item to your navigation.",
 	"textdomain": "default",
 	"attributes": {

package/src/navigation-link/edit.js

@@ -286,6 +286,10 @@ function navStripHTML( html ) {
  */
 
 function LinkControlTransforms( { block, transforms, replace } ) {
+	if ( ! transforms?.length ) {
+		return null;
+	}
+
 	return (
 		<div className="link-control-transform">
 			<h3 className="link-control-transform__subheading">
@@ -722,6 +726,7 @@ export default function NavigationLinkEdit( {
 						>
 							<LinkControl
 								hasTextControl
+								hasRichPreviews
 								className="wp-block-navigation-link__inline-link-input"
 								value={ link }
 								showInitialSuggestions={ true }