@wordpress/block-library 6.0.25 → 6.1.0

package/src/navigation/block.json

@@ -1,14 +1,11 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/navigation",
 	"title": "Navigation",
 	"category": "theme",
 	"description": "A collection of blocks that allow visitors to get around your site.",
-	"keywords": [
-		"menu",
-		"navigation",
-		"links"
-	],
+	"keywords": [ "menu", "navigation", "links" ],
 	"textdomain": "default",
 	"attributes": {
 		"ref": {
@@ -44,6 +41,10 @@
 			"type": "string",
 			"default": "mobile"
 		},
+		"hasIcon": {
+			"type": "boolean",
+			"default": true
+		},
 		"__unstableLocation": {
 			"type": "string"
 		},
@@ -78,10 +79,7 @@
 		"orientation": "orientation"
 	},
 	"supports": {
-		"align": [
-			"wide",
-			"full"
-		],
+		"align": [ "wide", "full" ],
 		"anchor": true,
 		"html": false,
 		"inserter": true,
@@ -97,7 +95,11 @@
 			}
 		},
 		"spacing": {
-			"units": [ "px", "em", "rem", "vh", "vw" ]
+			"blockGap": true,
+			"units": [ "px", "em", "rem", "vh", "vw" ],
+			"__experimentalDefaultControls": {
+				"blockGap": true
+			}
 		},
 		"__experimentalLayout": {
 			"allowSwitching": false,

package/src/navigation/edit/index.js

@@ -55,6 +55,7 @@ import NavigationMenuNameControl from './navigation-menu-name-control';
 import UnsavedInnerBlocks from './unsaved-inner-blocks';
 import NavigationMenuDeleteControl from './navigation-menu-delete-control';
 import useNavigationNotice from './use-navigation-notice';
+import OverlayMenuIcon from './overlay-menu-icon';
 
 const EMPTY_ARRAY = [];
 
@@ -117,6 +118,7 @@ function Navigation( {
 			orientation = 'horizontal',
 			flexWrap = 'wrap',
 		} = {},
+		hasIcon,
 	} = attributes;
 
 	let areaMenu,
@@ -160,6 +162,7 @@ function Navigation( {
 		hasUncontrolledInnerBlocks,
 		uncontrolledInnerBlocks,
 		isInnerBlockSelected,
+		hasSubmenus,
 	} = useSelect(
 		( select ) => {
 			const { getBlock, getBlocks, hasSelectedInnerBlock } = select(
@@ -212,6 +215,8 @@ function Navigation( {
 		false
 	);
 
+	const [ overlayMenuPreview, setOverlayMenuPreview ] = useState( false );
+
 	const {
 		isNavigationMenuResolved,
 		isNavigationMenuMissing,
@@ -466,6 +471,13 @@ function Navigation( {
 		? CustomPlaceholder
 		: Placeholder;
 
+	const isResponsive = 'never' !== overlayMenu;
+
+	const overlayMenuPreviewClasses = classnames(
+		'wp-block-navigation__overlay-menu-preview',
+		{ open: overlayMenuPreview }
+	);
+
 	return (
 		<EntityProvider kind="postType" type="wp_navigation" id={ ref }>
 			<RecursionProvider>
@@ -499,6 +511,33 @@ function Navigation( {
 				<InspectorControls>
 					{ hasSubmenuIndicatorSetting && (
 						<PanelBody title={ __( 'Display' ) }>
+							{ isResponsive && (
+								<Button
+									className={ overlayMenuPreviewClasses }
+									onClick={ () => {
+										setOverlayMenuPreview(
+											! overlayMenuPreview
+										);
+									} }
+								>
+									{ hasIcon && <OverlayMenuIcon /> }
+									{ ! hasIcon && (
+										<span>{ __( 'Menu' ) }</span>
+									) }
+								</Button>
+							) }
+							{ overlayMenuPreview && (
+								<ToggleControl
+									label={ __( 'Show icon button' ) }
+									help={ __(
+										'Configure the visual appearance of the button opening the overlay menu.'
+									) }
+									onChange={ ( value ) =>
+										setAttributes( { hasIcon: value } )
+									}
+									checked={ hasIcon }
+								/>
+							) }
 							<h3>{ __( 'Overlay Menu' ) }</h3>
 							<ToggleGroupControl
 								label={ __( 'Configure overlay menu' ) }
@@ -525,26 +564,35 @@ function Navigation( {
 									label={ __( 'Always' ) }
 								/>
 							</ToggleGroupControl>
-							<h3>{ __( 'Submenus' ) }</h3>
-							<ToggleControl
-								checked={ openSubmenusOnClick }
-								onChange={ ( value ) => {
-									setAttributes( {
-										openSubmenusOnClick: value,
-									} );
-								} }
-								label={ __( 'Open on click' ) }
-							/>
-							{ ! attributes.openSubmenusOnClick && (
-								<ToggleControl
-									checked={ showSubmenuIcon }
-									onChange={ ( value ) => {
-										setAttributes( {
-											showSubmenuIcon: value,
-										} );
-									} }
-									label={ __( 'Show icons' ) }
-								/>
+							{ hasSubmenus && (
+								<>
+									<h3>{ __( 'Submenus' ) }</h3>
+									<ToggleControl
+										checked={ openSubmenusOnClick }
+										onChange={ ( value ) => {
+											setAttributes( {
+												openSubmenusOnClick: value,
+												...( value && {
+													showSubmenuIcon: true,
+												} ), // Make sure arrows are shown when we toggle this on.
+											} );
+										} }
+										label={ __( 'Open on click' ) }
+									/>
+
+									<ToggleControl
+										checked={ showSubmenuIcon }
+										onChange={ ( value ) => {
+											setAttributes( {
+												showSubmenuIcon: value,
+											} );
+										} }
+										disabled={
+											attributes.openSubmenusOnClick
+										}
+										label={ __( 'Show arrow' ) }
+									/>
+								</>
 							) }
 						</PanelBody>
 					) }
@@ -636,8 +684,10 @@ function Navigation( {
 						<ResponsiveWrapper
 							id={ clientId }
 							onToggle={ setResponsiveMenuVisibility }
+							label={ __( 'Menu' ) }
+							hasIcon={ hasIcon }
 							isOpen={ isResponsiveMenuOpen }
-							isResponsive={ 'never' !== overlayMenu }
+							isResponsive={ isResponsive }
 							isHiddenByDefault={ 'always' === overlayMenu }
 							classNames={ overlayClassnames }
 							styles={ overlayStyles }

package/src/navigation/edit/inner-blocks.js

@@ -27,7 +27,9 @@ const ALLOWED_BLOCKS = [
 	'core/navigation-submenu',
 ];
 
-const DEFAULT_BLOCK = [ 'core/navigation-link' ];
+const DEFAULT_BLOCK = {
+	name: 'core/navigation-link',
+};
 
 const LAYOUT = {
 	type: 'default',

package/src/navigation/edit/overlay-menu-icon.js

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Rect } from '@wordpress/primitives';
+
+export default function OverlayMenuIcon() {
+	return (
+		<SVG
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			width="24"
+			height="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>
+	);
+}

package/src/navigation/edit/placeholder/index.js

@@ -24,7 +24,7 @@ import useCreateNavigationMenu from '../use-create-navigation-menu';
 import useConvertClassicMenu from '../../use-convert-classic-menu';
 
 const ExistingMenusDropdown = ( {
-	canSwitchNavigationMenu,
+	showNavigationMenus,
 	navigationMenus,
 	onFinish,
 	menus,
@@ -36,6 +36,10 @@ const ExistingMenusDropdown = ( {
 		iconPosition: 'right',
 		className: 'wp-block-navigation-placeholder__actions__dropdown',
 	};
+
+	const hasNavigationMenus = !! navigationMenus?.length;
+	const hasClassicMenus = !! menus?.length;
+
 	return (
 		<DropdownMenu
 			text={ __( 'Select menu' ) }
@@ -45,9 +49,9 @@ const ExistingMenusDropdown = ( {
 		>
 			{ ( { onClose } ) => (
 				<>
-					<MenuGroup label={ __( 'Menus' ) }>
-						{ canSwitchNavigationMenu &&
-							navigationMenus?.map( ( menu ) => {
+					{ showNavigationMenus && hasNavigationMenus && (
+						<MenuGroup label={ __( 'Menus' ) }>
+							{ navigationMenus.map( ( menu ) => {
 								return (
 									<MenuItem
 										onClick={ () => {
@@ -62,10 +66,11 @@ const ExistingMenusDropdown = ( {
 									</MenuItem>
 								);
 							} ) }
-					</MenuGroup>
-					{ showClassicMenus && (
+						</MenuGroup>
+					) }
+					{ showClassicMenus && hasClassicMenus && (
 						<MenuGroup label={ __( 'Classic Menus' ) }>
-							{ menus?.map( ( menu ) => {
+							{ menus.map( ( menu ) => {
 								return (
 									<MenuItem
 										onClick={ () => {
@@ -136,6 +141,12 @@ export default function NavigationPlaceholder( {
 
 	const { navigationMenus } = useNavigationMenu();
 
+	const hasNavigationMenus = !! navigationMenus?.length;
+
+	const showSelectMenus =
+		( canSwitchNavigationMenu || canUserCreateNavigation ) &&
+		( hasNavigationMenus || hasMenus );
+
 	return (
 		<>
 			{ ( ! hasResolvedNavigationMenus || isStillLoading ) && (
@@ -153,10 +164,10 @@ export default function NavigationPlaceholder( {
 
 							<hr />
 
-							{ hasMenus || navigationMenus?.length ? (
+							{ showSelectMenus ? (
 								<>
 									<ExistingMenusDropdown
-										canSwitchNavigationMenu={
+										showNavigationMenus={
 											canSwitchNavigationMenu
 										}
 										navigationMenus={ navigationMenus }

package/src/navigation/edit/responsive-wrapper.js

@@ -8,9 +8,13 @@ import classnames from 'classnames';
  */
 import { close, Icon } from '@wordpress/icons';
 import { Button } from '@wordpress/components';
-import { SVG, Rect } from '@wordpress/primitives';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import OverlayMenuIcon from './overlay-menu-icon';
+
 export default function ResponsiveWrapper( {
 	children,
 	id,
@@ -20,6 +24,7 @@ export default function ResponsiveWrapper( {
 	isHiddenByDefault,
 	classNames,
 	styles,
+	hasIcon,
 } ) {
 	if ( ! isResponsive ) {
 		return children;
@@ -57,18 +62,12 @@ export default function ResponsiveWrapper( {
 					className={ openButtonClasses }
 					onClick={ () => onToggle( true ) }
 				>
-					<SVG
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-						width="24"
-						height="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>
+					{ hasIcon && <OverlayMenuIcon /> }
+					{ ! hasIcon && (
+						<span className="wp-block-navigation__toggle_button_label">
+							{ __( 'Menu' ) }
+						</span>
+					) }
 				</Button>
 			) }
 

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;
 	}
 }
 
@@ -574,3 +573,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

@@ -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,8 +539,12 @@ 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" 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>';
+	$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">
@@ -549,14 +555,15 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 					</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-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 }

package/src/navigation-link/index.php

@@ -116,9 +116,9 @@ function block_core_navigation_link_render_submenu_icon() {
 /**
  * Renders the `core/navigation-link` block.
  *
- * @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.
  */