@wordpress/block-library 6.0.26 → 7.0.1-next.f435e9e01b.0

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

@@ -1,17 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { createBlock } from '@wordpress/blocks';
-import {
-	Placeholder,
-	Button,
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
-} from '@wordpress/components';
+import { Placeholder, Button, DropdownMenu } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { navigation, Icon } from '@wordpress/icons';
-import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -22,72 +14,7 @@ import PlaceholderPreview from './placeholder-preview';
 import useNavigationMenu from '../../use-navigation-menu';
 import useCreateNavigationMenu from '../use-create-navigation-menu';
 import useConvertClassicMenu from '../../use-convert-classic-menu';
-
-const ExistingMenusDropdown = ( {
-	canSwitchNavigationMenu,
-	navigationMenus,
-	onFinish,
-	menus,
-	onCreateFromMenu,
-	showClassicMenus = false,
-} ) => {
-	const toggleProps = {
-		variant: 'tertiary',
-		iconPosition: 'right',
-		className: 'wp-block-navigation-placeholder__actions__dropdown',
-	};
-	return (
-		<DropdownMenu
-			text={ __( 'Select menu' ) }
-			icon={ null }
-			toggleProps={ toggleProps }
-			popoverProps={ { isAlternate: true } }
-		>
-			{ ( { onClose } ) => (
-				<>
-					<MenuGroup label={ __( 'Menus' ) }>
-						{ canSwitchNavigationMenu &&
-							navigationMenus?.map( ( menu ) => {
-								return (
-									<MenuItem
-										onClick={ () => {
-											onFinish( menu );
-										} }
-										onClose={ onClose }
-										key={ menu.id }
-									>
-										{ decodeEntities(
-											menu.title.rendered
-										) }
-									</MenuItem>
-								);
-							} ) }
-					</MenuGroup>
-					{ showClassicMenus && (
-						<MenuGroup label={ __( 'Classic Menus' ) }>
-							{ menus?.map( ( menu ) => {
-								return (
-									<MenuItem
-										onClick={ () => {
-											onCreateFromMenu(
-												menu.id,
-												menu.name
-											);
-										} }
-										onClose={ onClose }
-										key={ menu.id }
-									>
-										{ decodeEntities( menu.name ) }
-									</MenuItem>
-								);
-							} ) }
-						</MenuGroup>
-					) }
-				</>
-			) }
-		</DropdownMenu>
-	);
-};
+import ExistingMenusOptions from '../existing-menus-options';
 
 export default function NavigationPlaceholder( {
 	clientId,
@@ -119,7 +46,6 @@ export default function NavigationPlaceholder( {
 		isResolvingPages,
 		menus,
 		isResolvingMenus,
-		hasPages,
 		hasMenus,
 	} = useNavigationEntities();
 
@@ -129,13 +55,14 @@ export default function NavigationPlaceholder( {
 		onFinishMenuCreation( [] );
 	};
 
-	const onCreateAllPages = () => {
-		const block = [ createBlock( 'core/page-list' ) ];
-		onFinishMenuCreation( block );
-	};
-
 	const { navigationMenus } = useNavigationMenu();
 
+	const hasNavigationMenus = !! navigationMenus?.length;
+
+	const showSelectMenus =
+		( canSwitchNavigationMenu || canUserCreateNavigation ) &&
+		( hasNavigationMenus || hasMenus );
+
 	return (
 		<>
 			{ ( ! hasResolvedNavigationMenus || isStillLoading ) && (
@@ -153,31 +80,46 @@ export default function NavigationPlaceholder( {
 
 							<hr />
 
-							{ hasMenus || navigationMenus?.length ? (
+							{ showSelectMenus ? (
 								<>
-									<ExistingMenusDropdown
-										canSwitchNavigationMenu={
-											canSwitchNavigationMenu
-										}
-										navigationMenus={ navigationMenus }
-										onFinish={ onFinish }
-										menus={ menus }
-										onCreateFromMenu={ convertClassicMenu }
-										showClassicMenus={
-											canUserCreateNavigation
-										}
-									/>
-									<hr />
-								</>
-							) : undefined }
-							{ canUserCreateNavigation && hasPages ? (
-								<>
-									<Button
-										variant="tertiary"
-										onClick={ onCreateAllPages }
+									<DropdownMenu
+										text={ __( 'Select menu' ) }
+										icon={ null }
+										toggleProps={ {
+											variant: 'tertiary',
+											iconPosition: 'right',
+											className:
+												'wp-block-navigation-placeholder__actions__dropdown',
+										} }
+										popoverProps={ { isAlternate: true } }
 									>
-										{ __( 'Add all pages' ) }
-									</Button>
+										{ () => (
+											<ExistingMenusOptions
+												showNavigationMenus={
+													canSwitchNavigationMenu
+												}
+												navigationMenus={
+													navigationMenus
+												}
+												onSelectNavigationMenu={
+													onFinish
+												}
+												classicMenus={ menus }
+												onSelectClassicMenu={ ( {
+													id,
+													name,
+												} ) =>
+													convertClassicMenu(
+														id,
+														name
+													)
+												}
+												showClassicMenus={
+													canUserCreateNavigation
+												}
+											/>
+										) }
+									</DropdownMenu>
 									<hr />
 								</>
 							) : undefined }

package/src/navigation/edit/placeholder/placeholder-preview.js

@@ -6,24 +6,22 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Icon, search } from '@wordpress/icons';
+import { Icon, navigation } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 const PlaceholderPreview = ( { isLoading } ) => {
 	return (
-		<ul
+		<div
 			className={ classnames(
 				'wp-block-navigation-placeholder__preview',
-				'wp-block-navigation__container',
 				{ 'is-loading': isLoading }
 			) }
 		>
-			<li className="wp-block-navigation-item">&#8203;</li>
-			<li className="wp-block-navigation-item">&#8203;</li>
-			<li className="wp-block-navigation-item">&#8203;</li>
-			<li className="wp-block-navigation-placeholder__preview-search-icon">
-				<Icon icon={ search } />
-			</li>
-		</ul>
+			<div className="wp-block-navigation-placeholder__actions__indicator">
+				<Icon icon={ navigation } />
+				{ __( 'Navigation' ) }
+			</div>
+		</div>
 	);
 };
 

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;
 	}
 }
 
@@ -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(