@wordpress/block-library 6.0.15 → 6.0.16

package/src/navigation/index.php

@@ -452,14 +452,24 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	}
 
+	$layout_justification = array(
+		'left'          => 'items-justified-left',
+		'right'         => 'items-justified-right',
+		'center'        => 'items-justified-center',
+		'space-between' => 'items-justified-space-between',
+	);
+
 	// Restore legacy classnames for submenu positioning.
 	$layout_class = '';
 	if ( isset( $attributes['layout']['justifyContent'] ) ) {
-		if ( 'right' === $attributes['layout']['justifyContent'] ) {
-			$layout_class .= 'items-justified-right';
-		} elseif ( 'space-between' === $attributes['layout']['justifyContent'] ) {
-			$layout_class .= 'items-justified-space-between';
-		}
+		$layout_class .= $layout_justification[ $attributes['layout']['justifyContent'] ];
+	}
+	if ( isset( $attributes['layout']['orientation'] ) && 'vertical' === $attributes['layout']['orientation'] ) {
+		$layout_class .= ' is-vertical';
+	}
+
+	if ( isset( $attributes['layout']['flexWrap'] ) && 'nowrap' === $attributes['layout']['flexWrap'] ) {
+		$layout_class .= ' no-wrap';
 	}
 
 	$colors     = block_core_navigation_build_css_colors( $attributes );
@@ -528,10 +538,10 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	);
 
 	$responsive_container_markup = sprintf(
-		'<button aria-expanded="false" 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"><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>
 			<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" role="dialog" aria-modal="true" aria-labelledby="modal-%1$s-title" >
+					<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>
 						<div class="wp-block-navigation__responsive-container-content" id="modal-%1$s-content">
 							%2$s
@@ -545,7 +555,8 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		__( 'Close menu' ), // Close button label.
 		implode( ' ', $responsive_container_classes ),
 		implode( ' ', $open_button_classes ),
-		$colors['overlay_inline_styles']
+		$colors['overlay_inline_styles'],
+		__( 'Menu' )
 	);
 
 	return sprintf(

package/src/navigation/style.scss

@@ -6,6 +6,10 @@
 // - .wp-block-navigation-item targets the menu item itself.
 // - .wp-block-navigation-item__content targets the link inside a menu item.
 // - .wp-block-navigation__submenu-icon targets the chevron icon indicating submenus.
+
+// Size of burger and close icons.
+$navigation-icon-size: 24px;
+
 .wp-block-navigation {
 	position: relative;
 
@@ -102,6 +106,45 @@
 			height: inherit;
 		}
 	}
+
+	// Custom properties for layout style cascade: default values.
+	--navigation-layout-justification-setting: flex-start;
+	--navigation-layout-direction: row;
+	--navigation-layout-wrap: wrap;
+	--navigation-layout-justify: flex-start;
+	--navigation-layout-align: center;
+
+	&.is-vertical {
+		--navigation-layout-direction: column;
+		--navigation-layout-justify: initial;
+	}
+
+	&.no-wrap {
+		--navigation-layout-wrap: nowrap;
+	}
+
+	&.items-justified-center {
+		--navigation-layout-justification-setting: center;
+		--navigation-layout-justify: center;
+
+		&.is-vertical {
+			--navigation-layout-align: center;
+		}
+	}
+
+	&.items-justified-right {
+		--navigation-layout-justification-setting: flex-end;
+		--navigation-layout-justify: flex-end;
+
+		&.is-vertical {
+			--navigation-layout-align: flex-end;
+		}
+	}
+
+	&.items-justified-space-between {
+		--navigation-layout-justification-setting: space-between;
+		--navigation-layout-justify: space-between;
+	}
 }
 
 // Styles for submenu flyout.
@@ -347,10 +390,10 @@ button.wp-block-navigation-item__content {
 // Navigation block inner container.
 .wp-block-navigation__container {
 	display: flex;
-	flex-wrap: var(--layout-wrap, wrap);
-	flex-direction: var(--layout-direction, initial);
-	justify-content: var(--layout-justify, initial);
-	align-items: var(--layout-align, initial);
+	flex-wrap: var(--navigation-layout-wrap, wrap);
+	flex-direction: var(--navigation-layout-direction, initial);
+	justify-content: var(--navigation-layout-justify, initial);
+	align-items: var(--navigation-layout-align, initial);
 
 	// Reset the default list styles
 	list-style: none;
@@ -384,10 +427,10 @@ button.wp-block-navigation-item__content {
 
 	.wp-block-navigation__responsive-container-content {
 		display: flex;
-		flex-wrap: var(--layout-wrap, wrap);
-		flex-direction: var(--layout-direction, initial);
-		justify-content: var(--layout-justify, initial);
-		align-items: var(--layout-align, initial);
+		flex-wrap: var(--navigation-layout-wrap, wrap);
+		flex-direction: var(--navigation-layout-direction, initial);
+		justify-content: var(--navigation-layout-justify, initial);
+		align-items: var(--navigation-layout-align, initial);
 	}
 
 	// If the responsive wrapper is present but overlay is not open,
@@ -405,6 +448,10 @@ button.wp-block-navigation-item__content {
 	&.is-menu-open {
 		display: flex; // Needs to be set to override "none".
 		flex-direction: column;
+		background-color: inherit;
+
+		// Use em units to apply padding, so themes can more easily style this in various ways.
+		padding: 2em;
 
 		// Allow modal to scroll.
 		overflow: auto;
@@ -412,18 +459,22 @@ button.wp-block-navigation-item__content {
 		// Give it a z-index just higher than the adminbar.
 		z-index: 100000;
 
-		// Add extra top padding so items don't conflict with close button.
-		padding: 72px 24px 24px 24px;
-		background-color: inherit;
-
 		.wp-block-navigation__responsive-container-content {
+			// Add padding above to accommodate close button.
+			padding-top: calc(2em + #{ $navigation-icon-size });
+
+			// Don't crop the focus style.
+			overflow: visible;
+
 			// Override the container flex layout settings
 			// because we want overlay menu to always display
 			// as a column.
 			display: flex;
 			flex-direction: column;
+			flex-wrap: nowrap;
+
 			// Inherit alignment settings from container.
-			align-items: var(--layout-justification-setting, inherit);
+			align-items: var(--navigation-layout-justification-setting, inherit);
 
 			// Always align the contents of the menu to the top.
 			&,
@@ -432,10 +483,6 @@ button.wp-block-navigation-item__content {
 				justify-content: flex-start;
 			}
 
-			// Allow menu to scroll.
-			overflow: auto;
-			padding: 0;
-
 			.wp-block-navigation__submenu-icon {
 				display: none;
 			}
@@ -454,20 +501,19 @@ button.wp-block-navigation-item__content {
 				// Position and style.
 				position: static;
 				border: none;
-				padding-left: 32px;
-				padding-right: 32px;
+				padding-left: 2em;
+				padding-right: 2em;
 			}
 
 			// 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);
+			}
 
-				// Apply top padding to nested submenus.
-				.wp-block-navigation__submenu-container,
-				.wp-block-navigation__container {
-					padding-top: var(--wp--style--block-gap, 2em);
-				}
+			// Apply top padding to nested submenus.
+			.wp-block-navigation__submenu-container {
+				padding-top: var(--wp--style--block-gap, 2em);
 			}
 
 			// A default padding is added to submenu items. It's not appropriate inside the modal.
@@ -482,7 +528,7 @@ button.wp-block-navigation-item__content {
 				display: flex;
 				flex-direction: column;
 				// Inherit alignment settings from container.
-				align-items: var(--layout-justification-setting, initial);
+				align-items: var(--navigation-layout-justification-setting, initial);
 			}
 		}
 
@@ -548,8 +594,8 @@ button.wp-block-navigation-item__content {
 		fill: currentColor;
 		pointer-events: none;
 		display: block;
-		width: 24px;
-		height: 24px;
+		width: $navigation-icon-size;
+		height: $navigation-icon-size;
 	}
 }
 
@@ -567,8 +613,8 @@ button.wp-block-navigation-item__content {
 // Button to close the menus.
 .wp-block-navigation__responsive-container-close {
 	position: absolute;
-	top: 24px;
-	right: 24px;
+	top: 0;
+	right: 0;
 	z-index: 2; // Needs to be above the modal z index itself.
 }
 
@@ -580,11 +626,14 @@ button.wp-block-navigation-item__content {
 .is-menu-open .wp-block-navigation__responsive-close,
 .is-menu-open .wp-block-navigation__responsive-dialog,
 .is-menu-open .wp-block-navigation__responsive-container-content {
-	width: 100%;
-	height: 100%;
+	box-sizing: border-box;
 }
 
+.wp-block-navigation__responsive-dialog {
+	position: relative;
+}
+
+// Prevent scrolling of the parent content when the modal is open.
 html.has-modal-open {
 	overflow: hidden;
 }
-

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

@@ -12,6 +12,7 @@ export default function useNavigationMenu( ref ) {
 				getEditedEntityRecord,
 				getEntityRecords,
 				hasFinishedResolution,
+				canUser,
 			} = select( coreStore );
 
 			const navigationMenuSingleArgs = [
@@ -64,6 +65,25 @@ export default function useNavigationMenu( ref ) {
 				),
 				navigationMenu,
 				navigationMenus,
+				canUserUpdateNavigationEntity: ref
+					? canUser( 'update', 'navigation', ref )
+					: undefined,
+				hasResolvedCanUserUpdateNavigationEntity: hasFinishedResolution(
+					'canUser',
+					[ 'update', 'navigation', ref ]
+				),
+				canUserDeleteNavigationEntity: ref
+					? canUser( 'delete', 'navigation', ref )
+					: undefined,
+				hasResolvedCanUserDeleteNavigationEntity: hasFinishedResolution(
+					'canUser',
+					[ 'delete', 'navigation', ref ]
+				),
+				canUserCreateNavigation: canUser( 'create', 'navigation' ),
+				hasResolvedCanUserCreateNavigation: hasFinishedResolution(
+					'canUser',
+					[ 'create', 'navigation' ]
+				),
 			};
 		},
 		[ ref ]

package/src/navigation/view.js

@@ -5,16 +5,22 @@ import MicroModal from 'micromodal';
 
 // Responsive navigation toggle.
 function navigationToggleModal( modal ) {
-	const triggerButton = document.querySelector(
-		`button[data-micromodal-trigger="${ modal.id }"]`
+	const dialogContainer = document.querySelector(
+		`.wp-block-navigation__responsive-dialog`
 	);
-	const closeButton = modal.querySelector( 'button[data-micromodal-close]' );
-	// Use aria-hidden to determine the status of the modal, as this attribute is
-	// managed by micromodal.
+
 	const isHidden = 'true' === modal.getAttribute( 'aria-hidden' );
-	triggerButton.setAttribute( 'aria-expanded', ! isHidden );
-	closeButton.setAttribute( 'aria-expanded', ! isHidden );
+
 	modal.classList.toggle( 'has-modal-open', ! isHidden );
+	dialogContainer.toggleAttribute( 'aria-modal', ! isHidden );
+
+	if ( isHidden ) {
+		dialogContainer.removeAttribute( 'role' );
+		dialogContainer.removeAttribute( 'aria-modal' );
+	} else {
+		dialogContainer.setAttribute( 'role', 'dialog' );
+		dialogContainer.setAttribute( 'aria-modal', 'true' );
+	}
 
 	// Add a class to indicate the modal is open.
 	const htmlElement = document.documentElement;

package/src/navigation-link/index.php

@@ -98,7 +98,7 @@ function block_core_navigation_link_build_css_font_sizes( $context ) {
 		$font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $context['fontSize'] );
 	} elseif ( $has_custom_font_size ) {
 		// Add the custom font size inline style.
-		$font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $context['style']['typography']['fontSize'] );
+		$font_sizes['inline_styles'] = sprintf( 'font-size: %s;', $context['style']['typography']['fontSize'] );
 	}
 
 	return $font_sizes;

package/src/navigation-submenu/index.php

@@ -98,7 +98,7 @@ function block_core_navigation_submenu_build_css_font_sizes( $context ) {
 		$font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $context['fontSize'] );
 	} elseif ( $has_custom_font_size ) {
 		// Add the custom font size inline style.
-		$font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $context['style']['typography']['fontSize'] );
+		$font_sizes['inline_styles'] = sprintf( 'font-size: %s;', $context['style']['typography']['fontSize'] );
 	}
 
 	return $font_sizes;

package/src/page-list/index.php

@@ -119,7 +119,7 @@ function block_core_page_list_build_css_font_sizes( $context ) {
 		$font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $context['fontSize'] );
 	} elseif ( $has_custom_font_size ) {
 		// Add the custom font size inline style.
-		$font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $context['style']['typography']['fontSize'] );
+		$font_sizes['inline_styles'] = sprintf( 'font-size: %s;', $context['style']['typography']['fontSize'] );
 	}
 
 	return $font_sizes;

package/src/post-template/edit.js

@@ -6,12 +6,12 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState, useMemo } from '@wordpress/element';
+import { memo, useMemo, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import {
 	BlockContextProvider,
-	BlockPreview,
+	__experimentalUseBlockPreview as useBlockPreview,
 	useBlockProps,
 	useInnerBlocksProps,
 	store as blockEditorStore,
@@ -30,6 +30,39 @@ function PostTemplateInnerBlocks() {
 	return <li { ...innerBlocksProps } />;
 }
 
+function PostTemplateBlockPreview( {
+	blocks,
+	blockContextId,
+	isHidden,
+	setActiveBlockContextId,
+} ) {
+	const blockPreviewProps = useBlockPreview( {
+		blocks,
+	} );
+
+	const handleOnClick = () => {
+		setActiveBlockContextId( blockContextId );
+	};
+
+	const style = {
+		display: isHidden ? 'none' : undefined,
+	};
+
+	return (
+		<li
+			{ ...blockPreviewProps }
+			tabIndex={ 0 }
+			// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
+			role="button"
+			onClick={ handleOnClick }
+			onKeyPress={ handleOnClick }
+			style={ style }
+		/>
+	);
+}
+
+const MemoizedPostTemplateBlockPreview = memo( PostTemplateBlockPreview );
+
 export default function PostTemplateEdit( {
 	clientId,
 	context: {
@@ -53,7 +86,7 @@ export default function PostTemplateEdit( {
 	},
 } ) {
 	const [ { page } ] = queryContext;
-	const [ activeBlockContext, setActiveBlockContext ] = useState();
+	const [ activeBlockContextId, setActiveBlockContextId ] = useState();
 
 	const { posts, blocks } = useSelect(
 		( select ) => {
@@ -115,7 +148,6 @@ export default function PostTemplateEdit( {
 			templateSlug,
 		]
 	);
-
 	const blockContexts = useMemo(
 		() =>
 			posts?.map( ( post ) => ( {
@@ -144,6 +176,10 @@ export default function PostTemplateEdit( {
 		return <p { ...blockProps }> { __( 'No results found.' ) }</p>;
 	}
 
+	// To avoid flicker when switching active block contexts, a preview is rendered
+	// for each block context, but the preview for the active block context is hidden.
+	// This ensures that when it is displayed again, the cached rendering of the
+	// block preview is used, instead of having to re-render the preview from scratch.
 	return (
 		<ul { ...blockProps }>
 			{ blockContexts &&
@@ -152,20 +188,21 @@ export default function PostTemplateEdit( {
 						key={ blockContext.postId }
 						value={ blockContext }
 					>
-						{ blockContext ===
-						( activeBlockContext || blockContexts[ 0 ] ) ? (
+						{ blockContext.postId ===
+						( activeBlockContextId ||
+							blockContexts[ 0 ]?.postId ) ? (
 							<PostTemplateInnerBlocks />
-						) : (
-							<li>
-								<BlockPreview
-									blocks={ blocks }
-									__experimentalLive
-									__experimentalOnClick={ () =>
-										setActiveBlockContext( blockContext )
-									}
-								/>
-							</li>
-						) }
+						) : null }
+						<MemoizedPostTemplateBlockPreview
+							blocks={ blocks }
+							blockContextId={ blockContext.postId }
+							setActiveBlockContextId={ setActiveBlockContextId }
+							isHidden={
+								blockContext.postId ===
+								( activeBlockContextId ||
+									blockContexts[ 0 ]?.postId )
+							}
+						/>
 					</BlockContextProvider>
 				) ) }
 		</ul>

package/src/site-logo/block.json

@@ -6,9 +6,6 @@
 	"description": "Display a graphic to represent this site. Update the block, and the changes apply everywhere it’s used. This is different than the site icon, which is the smaller image visible in your dashboard, browser tabs, etc used to help others recognize this site.",
 	"textdomain": "default",
 	"attributes": {
-		"align": {
-			"type": "string"
-		},
 		"width": {
 			"type": "number"
 		},

package/src/site-logo/edit.js

@@ -142,7 +142,11 @@ const SiteLogo = ( {
 		return <div style={ { width, height } }>{ imgWrapper }</div>;
 	}
 
-	const currentWidth = width || imageWidthWithinContainer;
+	// Set the default width to a responsible size.
+	// Note that this width is also set in the attached frontend CSS file.
+	const defaultWidth = 120;
+
+	const currentWidth = width || defaultWidth;
 	const ratio = naturalWidth / naturalHeight;
 	const currentHeight = currentWidth / ratio;
 	const minWidth = naturalWidth < naturalHeight ? MIN_SIZE : MIN_SIZE * ratio;
@@ -160,10 +164,6 @@ const SiteLogo = ( {
 	// becomes available.
 	const maxWidthBuffer = maxWidth * 2.5;
 
-	// Set the default width to a responsible size.
-	// Note that this width is also set in the attached CSS file.
-	const defaultWidth = 120;
-
 	let showRightHandle = false;
 	let showLeftHandle = false;
 
@@ -383,6 +383,7 @@ export default function LogoEdit( {
 	const onRemoveLogo = () => {
 		setLogo( null );
 		setLogoUrl( undefined );
+		setAttributes( { width: undefined } );
 	};
 
 	const { createErrorNotice } = useDispatch( noticesStore );

package/src/site-logo/editor.scss

@@ -1,7 +1,7 @@
 .wp-block[data-align="center"] > .wp-block-site-logo {
+	display: table;
 	margin-left: auto;
 	margin-right: auto;
-	text-align: center;
 }
 
 .wp-block-site-logo {
@@ -10,20 +10,6 @@
 		pointer-events: none;
 	}
 
-	&:not(.is-default-size) {
-		display: table;
-	}
-
-	// Provide a sane starting point for the size.
-	&.is-default-size {
-		width: 120px;
-
-		img {
-			height: auto;
-			width: 100%;
-		}
-	}
-
 	.custom-logo-link {
 		cursor: inherit;
 

package/src/site-logo/index.php

@@ -48,10 +48,6 @@ function render_block_core_site_logo( $attributes ) {
 		$classnames[] = $attributes['className'];
 	}
 
-	if ( ! empty( $attributes['align'] ) && in_array( $attributes['align'], array( 'center', 'left', 'right' ), true ) ) {
-		$classnames[] = "align{$attributes['align']}";
-	}
-
 	if ( empty( $attributes['width'] ) ) {
 		$classnames[] = 'is-default-size';
 	}

package/src/site-logo/style.scss

@@ -18,7 +18,9 @@
 	}
 
 	&.aligncenter {
-		display: table;
+		margin-left: auto;
+		margin-right: auto;
+		text-align: center;
 	}
 
 	// Style variations

package/src/template-part/edit/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -99,7 +104,7 @@ export default function TemplatePartEdit( {
 			return {
 				innerBlocks: getBlocks( clientId ),
 				isResolved: hasResolvedEntity,
-				isMissing: hasResolvedEntity && ! entityRecord,
+				isMissing: hasResolvedEntity && isEmpty( entityRecord ),
 				defaultWrapper: defaultWrapperElement || 'div',
 				area: _area,
 				enableSelection: _enableSelection,