@wordpress/block-library 6.0.14 → 6.0.17

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,29 +459,30 @@ 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.
 			&,
+			.wp-block-page-list,
 			.wp-block-navigation__container {
 				justify-content: flex-start;
 			}
 
-			// Allow menu to scroll.
-			overflow: auto;
-			padding: 0;
-
 			.wp-block-navigation__submenu-icon {
 				display: none;
 			}
@@ -453,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.
@@ -481,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);
 			}
 		}
 
@@ -547,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;
 	}
 }
 
@@ -566,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.
 }
 
@@ -579,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;
@@ -188,6 +188,12 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 		);
 	}
 
+	$aria_label = sprintf(
+		/* translators: Accessibility text. %s: Parent page title. */
+		__( '%s submenu' ),
+		$label
+	);
+
 	$html = '<li ' . $wrapper_attributes . '>';
 
 	// If Submenus open on hover, we render an anchor tag with attributes.
@@ -226,11 +232,11 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 		if ( $show_submenu_indicators ) {
 			// The submenu icon is rendered in a button here
 			// so that there's a clickable elment to open the submenu.
-			$html .= '<button aria-label="' . $label . ' ' . __( 'submenu', 'gutenberg' ) . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">' . block_core_navigation_submenu_render_submenu_icon() . '</button>';
+			$html .= '<button aria-label="' . $aria_label . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">' . block_core_navigation_submenu_render_submenu_icon() . '</button>';
 		}
 	} else {
 		// If menus open on click, we render the parent as a button.
-		$html .= '<button aria-label="' . $label . ' ' . __( 'submenu', 'gutenberg' ) . '" class="wp-block-navigation-item__content wp-block-navigation-submenu__toggle" aria-expanded="false">';
+		$html .= '<button aria-label="' . $aria_label . '" class="wp-block-navigation-item__content wp-block-navigation-submenu__toggle" aria-expanded="false">';
 
 		// Wrap title with span to isolate it from submenu icon.
 		$html .= '<span class="wp-block-navigation-item__label">';

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;
@@ -173,12 +173,17 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 			}
 		}
 
-		$title = wp_kses( $page['title'], wp_kses_allowed_html( 'post' ) );
+		$title      = wp_kses( $page['title'], wp_kses_allowed_html( 'post' ) );
+		$aria_label = sprintf(
+			/* translators: Accessibility text. %s: Parent page title. */
+			__( '%s submenu' ),
+			$title
+		);
 
 		$markup .= '<li class="wp-block-pages-list__item' . $css_class . '"' . $style_attribute . '>';
 
 		if ( isset( $page['children'] ) && $is_navigation_child && $open_submenus_on_click ) {
-			$markup .= '<button aria-label="' . $title . ' ' . __( 'submenu', 'gutenberg' ) . '" class="' . $navigation_child_content_class . ' wp-block-navigation-submenu__toggle" aria-expanded="false">' . $title . '<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><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></span>' .
+			$markup .= '<button aria-label="' . $aria_label . '" class="' . $navigation_child_content_class . ' wp-block-navigation-submenu__toggle" aria-expanded="false">' . $title . '<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><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></span>' .
 			'</button>';
 		} else {
 			$markup .= '<a class="wp-block-pages-list__item__link' . $navigation_child_content_class . '" href="' . esc_url( $page['link'] ) . '"' . $aria_current . '>' . $title . '</a>';
@@ -186,7 +191,7 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 
 		if ( isset( $page['children'] ) ) {
 			if ( $is_navigation_child && $show_submenu_icons && ! $open_submenus_on_click ) {
-				$markup .= '<button aria-label="' . $title . ' ' . __( 'submenu', 'gutenberg' ) . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">';
+				$markup .= '<button aria-label="' . $aria_label . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">';
 				$markup .= '<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><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></span>';
 				$markup .= '</button>';
 			}

package/src/post-comments/index.php

@@ -74,10 +74,12 @@ add_action( 'init', 'register_block_core_post_comments' );
  *
  * @return array Returns the modified fields.
  */
-function gutenberg_post_comments_block_form_defaults( $fields ) {
-	$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link" value="%4$s" />';
-	$fields['submit_field']  = '<p class="form-submit wp-block-button">%1$s %2$s</p>';
+function post_comments_block_form_defaults( $fields ) {
+	if ( wp_is_block_theme() ) {
+		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link" value="%4$s" />';
+		$fields['submit_field']  = '<p class="form-submit wp-block-button">%1$s %2$s</p>';
+	}
 
 	return $fields;
 }
-add_filter( 'comment_form_defaults', 'gutenberg_post_comments_block_form_defaults' );
+add_filter( 'comment_form_defaults', 'post_comments_block_form_defaults' );

package/src/post-comments/style.scss

@@ -29,7 +29,6 @@
 
 	.comment-author {
 		line-height: 1.5;
-		margin-left: -3.25em;
 
 		.avatar {
 			border-radius: 1.5em;

package/src/post-comments-form/index.php

@@ -54,10 +54,12 @@ add_action( 'init', 'register_block_core_post_comments_form' );
  *
  * @return array Returns the modified fields.
  */
-function gutenberg_comment_form_block_form_defaults( $fields ) {
-	$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link" value="%4$s" />';
-	$fields['submit_field']  = '<p class="form-submit wp-block-button">%1$s %2$s</p>';
+function post_comments_form_block_form_defaults( $fields ) {
+	if ( wp_is_block_theme() ) {
+		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link" value="%4$s" />';
+		$fields['submit_field']  = '<p class="form-submit wp-block-button">%1$s %2$s</p>';
+	}
 
 	return $fields;
 }
-add_filter( 'comment_form_defaults', 'gutenberg_comment_form_block_form_defaults' );
+add_filter( 'comment_form_defaults', 'post_comments_form_block_form_defaults' );

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';
 	}