@wordpress/block-library 11.0.0 → 11.1.0

package/src/list/ordered-list-settings.jsx

@@ -3,7 +3,7 @@ import { InspectorControls } from '@wordpress/block-editor';
 import {
 	TextControl,
 	ToggleControl,
-	SelectControl,
+	SelectControl as WCSelectControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
@@ -58,7 +58,7 @@ const OrderedListSettings = ( { setAttributes, reversed, start, type } ) => {
 						} )
 					}
 				>
-					<SelectControl
+					<WCSelectControl
 						label={ __( 'List style' ) }
 						options={ LIST_STYLE_OPTIONS }
 						value={ type || 'decimal' }

package/src/list-item/hooks/use-enter.js

@@ -69,7 +69,7 @@ export default function useEnter( clientId ) {
 								...topParentListBlock,
 								innerBlocks: after,
 							} ),
-					  ]
+						]
 					: [];
 				replaceBlocks(
 					topParentListBlock.clientId,

package/src/loginout/README.md

@@ -24,6 +24,10 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 
 - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
 - [`className`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#classname): `true`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `backgroundImage`: `true`
+  - `backgroundSize`: `true`
+  - `gradient`: `true`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
   - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `true`
   - [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `false`
@@ -35,6 +39,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
   - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
   - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`
+- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
   - `clientNavigation`: `true`
 

package/src/loginout/block.json

@@ -23,6 +23,15 @@
 	"supports": {
 		"anchor": true,
 		"className": true,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true,
+				"gradient": true
+			}
+		},
 		"color": {
 			"background": true,
 			"text": false,
@@ -56,6 +65,7 @@
 			"width": true,
 			"style": true
 		},
+		"shadow": true,
 		"interactivity": {
 			"clientNavigation": true
 		}

package/src/math/README.md

@@ -15,7 +15,7 @@ _Defined via the [`attributes`](https://developer.wordpress.org/block-editor/ref
 
 | Attribute | [Type](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation) | [Default](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#default-value) | Description |
 |-----------|------|---------|-------------|
-| `latex` | `string` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
+| `latex` | `string` | — | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `text`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `math annotation[encoding="application/x-tex"]`. [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
 | `mathML` | `string` | — | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `html`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `math` |
 
 ## Supports
@@ -24,8 +24,13 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 
 - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
 - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `backgroundImage`: `true`
+  - `backgroundSize`: `true`
+  - `gradient`: `true`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
   - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
+- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `margin`: `true`
   - `padding`: `true`
@@ -39,7 +44,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 This is a [**static block**](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). The markup is saved directly in the post content.
 
 ```html
-<!-- wp:math {"latex":"x = \u005cfrac{-b \u005cpm \u005csqrt{b^2-4ac}}{2a}"} -->
+<!-- wp:math -->
 <div class="wp-block-math"><math display="block"><semantics><mrow><mi>x</mi><mo>=</mo><mfrac><mrow><mo lspace="0em" rspace="0em">−</mo><mi>b</mi><mo>±</mo><msqrt><mrow><msup><mi>b</mi><mn>2</mn></msup><mo>−</mo><mn>4</mn><mi>a</mi><mi>c</mi></mrow></msqrt></mrow><mrow><mn>2</mn><mi>a</mi></mrow></mfrac></mrow><annotation encoding="application/x-tex">x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}</annotation></semantics></math></div>
 <!-- /wp:math -->
 ```

package/src/math/block.json

@@ -16,6 +16,15 @@
 			"style": true,
 			"width": true
 		},
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true,
+				"gradient": true
+			}
+		},
 		"color": {
 			"gradients": true,
 			"__experimentalDefaultControls": {
@@ -23,6 +32,7 @@
 				"text": true
 			}
 		},
+		"shadow": true,
 		"spacing": {
 			"margin": true,
 			"padding": true,
@@ -44,6 +54,8 @@
 	"attributes": {
 		"latex": {
 			"type": "string",
+			"source": "text",
+			"selector": "math annotation[encoding=\"application/x-tex\"]",
 			"role": "content"
 		},
 		"mathML": {

package/src/math/deprecated.jsx

@@ -1,18 +1,44 @@
 import { useBlockProps } from '@wordpress/block-editor';
 
+// Earlier versions stored the LaTeX source in the block comment. Content that
+// could not be rendered was saved with an empty `<math>`, so the source is
+// only available from the comment attribute for such blocks.
+const legacyAttributes = {
+	latex: {
+		type: 'string',
+		role: 'content',
+	},
+	mathML: {
+		type: 'string',
+		source: 'html',
+		selector: 'math',
+	},
+};
+
+// v2: The LaTeX source was stored in the block comment.
+const v2 = {
+	attributes: legacyAttributes,
+	save( { attributes } ) {
+		const { latex, mathML } = attributes;
+
+		if ( ! latex ) {
+			return null;
+		}
+
+		return (
+			<div { ...useBlockProps.save() }>
+				<math
+					display="block"
+					dangerouslySetInnerHTML={ { __html: mathML } }
+				/>
+			</div>
+		);
+	},
+};
+
 // v1: Add a wrapper div around the math element.
 const v1 = {
-	attributes: {
-		latex: {
-			type: 'string',
-			role: 'content',
-		},
-		mathML: {
-			type: 'string',
-			source: 'html',
-			selector: 'math',
-		},
-	},
+	attributes: legacyAttributes,
 	save( { attributes } ) {
 		const { latex, mathML } = attributes;
 
@@ -38,4 +64,4 @@ const v1 = {
  *
  * See block-deprecation.md
  */
-export default [ v1 ];
+export default [ v2, v1 ];

package/src/math/edit.jsx

@@ -4,37 +4,43 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { Popover } from '@wordpress/components';
-import { ValidatedTextareaControl } from '@wordpress/ui';
+import { ValidatedTextareaControl, Link } from '@wordpress/ui';
 import { useState, useEffect, useRef } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
+import { useEvent } from '@wordpress/compose';
 
 export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 	const { latex, mathML } = attributes;
 	const [ blockRef, setBlockRef ] = useState();
 	const [ error, setError ] = useState( null );
 	const [ latexToMathML, setLatexToMathML ] = useState();
-	const initialLatex = useRef( latex );
 	const formRef = useRef();
 	const { __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 
+	// Re-render once the converter loads, so MathML saved from a corrupted
+	// source is repaired and a source typed before the converter loaded is
+	// rendered. The converter loads asynchronously, and the user can type in
+	// the meantime, so read the source at that time rather than on mount.
+	const renderLatest = useEvent( ( convert ) => {
+		if ( ! latex ) {
+			return;
+		}
+		try {
+			const newMathML = convert( latex, { displayMode: true } );
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( { mathML: newMathML } );
+		} catch ( err ) {
+			setError( err.message );
+		}
+	} );
+
 	useEffect( () => {
 		import( '@wordpress/latex-to-mathml' ).then( ( module ) => {
 			setLatexToMathML( () => module.default );
-			if ( initialLatex.current ) {
-				__unstableMarkNextChangeAsNotPersistent();
-				setAttributes( {
-					mathML: module.default( initialLatex.current, {
-						displayMode: true,
-					} ),
-				} );
-			}
+			renderLatest( module.default );
 		} );
-	}, [
-		initialLatex,
-		setAttributes,
-		__unstableMarkNextChangeAsNotPersistent,
-	] );
+	}, [ renderLatest ] );
 
 	const blockProps = useBlockProps( {
 		ref: setBlockRef,
@@ -52,7 +58,15 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 					dangerouslySetInnerHTML={ { __html: mathML } }
 				/>
 			) : (
-				'\u200B'
+				// Show the source until it renders, as the front end does.
+				<math display="block">
+					<semantics>
+						{ /* eslint-disable-next-line react/no-unknown-property -- MathML attribute. */ }
+						<annotation encoding="application/x-tex">
+							{ latex || '\u200B' }
+						</annotation>
+					</semantics>
+				</math>
 			) }
 			{ isSelected && (
 				<Popover
@@ -67,12 +81,11 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 				>
 					<form
 						ref={ formRef }
-						style={ { padding: '4px', minWidth: '300px' } }
+						style={ { padding: '16px', minWidth: '300px' } }
 						onSubmit={ ( event ) => event.preventDefault() }
 					>
 						<ValidatedTextareaControl
 							label={ __( 'LaTeX math syntax' ) }
-							hideLabelFromVision
 							value={ latex ?? '' }
 							className="wp-block-math__textarea-control"
 							customValidity={
@@ -82,7 +95,12 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 							}
 							onValueChange={ ( newLatex ) => {
 								if ( ! latexToMathML ) {
-									setAttributes( { latex: newLatex } );
+									// The source is read back from the MathML,
+									// so clear a stale render along with it.
+									setAttributes( {
+										latex: newLatex,
+										mathML: '',
+									} );
 									return;
 								}
 								let newMathML = '';
@@ -99,8 +117,19 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 									latex: newLatex,
 								} );
 							} }
-							placeholder={ __( 'e.g., x^2, \\frac{a}{b}' ) }
+							placeholder={ __(
+								'e.g., x^2, \\frac{a}{b}, \\sqrt{x}'
+							) }
 						/>
+						<Link
+							openInNewTab
+							className="wp-block-math__learn-more"
+							href={ __(
+								'https://wordpress.org/documentation/article/math-block/'
+							) }
+						>
+							{ __( 'Learn more about LaTeX syntax' ) }
+						</Link>
 					</form>
 				</Popover>
 			) }

package/src/math/editor.scss

@@ -5,3 +5,8 @@
 	/*rtl:ignore*/
 	direction: ltr;
 }
+
+.wp-block-math__learn-more {
+	display: inline-block;
+	margin-top: var(--wpds-dimension-gap-sm);
+}

package/src/math/save.jsx

@@ -7,12 +7,28 @@ export default function save( { attributes } ) {
 		return null;
 	}
 
+	// The LaTeX source lives in the `<annotation>` inside the MathML, where
+	// it is HTML-escaped, so `wp_kses` leaves characters such as `&` and `<`
+	// alone. Until the source renders, save it on its own: with the
+	// annotation as the only child of `<semantics>`, browsers display the
+	// source text.
 	return (
 		<div { ...useBlockProps.save() }>
-			<math
-				display="block"
-				dangerouslySetInnerHTML={ { __html: mathML } }
-			/>
+			{ mathML ? (
+				<math
+					display="block"
+					dangerouslySetInnerHTML={ { __html: mathML } }
+				/>
+			) : (
+				<math display="block">
+					<semantics>
+						{ /* eslint-disable-next-line react/no-unknown-property -- MathML attribute. */ }
+						<annotation encoding="application/x-tex">
+							{ latex }
+						</annotation>
+					</semantics>
+				</math>
+			) }
 		</div>
 	);
 }

package/src/media-text/README.md

@@ -46,6 +46,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
   - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
   - [`heading`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-heading): `true`
   - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`
+  - [`button`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-button): `true`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `margin`: `true`
   - `padding`: `true`

package/src/media-text/block.json

@@ -116,6 +116,7 @@
 			"gradients": true,
 			"heading": true,
 			"link": true,
+			"button": true,
 			"__experimentalDefaultControls": {
 				"background": true,
 				"text": true

package/src/media-text/constants.js

@@ -1,5 +1,6 @@
 import { _x } from '@wordpress/i18n';
 
+export const ALLOWED_MEDIA_TYPES = [ 'image', 'video' ];
 export const DEFAULT_MEDIA_SIZE_SLUG = 'full';
 export const WIDTH_CONSTRAINT_PERCENTAGE = 15;
 export const LINK_DESTINATION_NONE = 'none';

package/src/media-text/deprecated.jsx

@@ -15,7 +15,7 @@ const v1ToV5ImageFillStyles = ( url, focalPoint ) => {
 				backgroundPosition: focalPoint
 					? `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`
 					: `50% 50%`,
-		  }
+			}
 		: {};
 };
 
@@ -26,9 +26,9 @@ const v6ToV7ImageFillStyles = ( url, focalPoint ) => {
 				backgroundPosition: focalPoint
 					? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round(
 							focalPoint.y * 100
-					  ) }%`
+						) }%`
 					: `50% 50%`,
-		  }
+			}
 		: {};
 };
 

package/src/media-text/edit.jsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useState, useRef } from '@wordpress/element';
 import {
 	BlockControls,
@@ -26,8 +26,11 @@ import {
 import { isBlobURL, getBlobTypeByURL } from '@wordpress/blob';
 import { pullLeft, pullRight } from '@wordpress/icons';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+import { getFilename } from '@wordpress/url';
 import MediaContainer from './media-container';
 import {
+	ALLOWED_MEDIA_TYPES,
 	DEFAULT_MEDIA_SIZE_SLUG,
 	WIDTH_CONSTRAINT_PERCENTAGE,
 	LINK_DESTINATION_NONE,
@@ -36,6 +39,7 @@ import {
 } from './constants';
 import { unlock } from '../lock-unlock';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import { MediaControl } from '../utils/media-control';
 
 const { ResolutionTool } = unlock( blockEditorPrivateApis );
 
@@ -221,7 +225,7 @@ function MediaTextEdit( {
 								{
 									context: 'view',
 								}
-						  )
+							)
 						: undefined,
 			};
 		},
@@ -240,7 +244,7 @@ function MediaTextEdit( {
 								{
 									context: 'view',
 								}
-						  )
+							)
 						: null,
 			};
 		},
@@ -332,6 +336,46 @@ function MediaTextEdit( {
 	};
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	const onUploadError = ( message ) => {
+		createErrorNotice( message, { type: 'snackbar' } );
+	};
+
+	const mediaInspectorPanel = isSelected ? (
+		<InspectorControls group="content">
+			<ToolsPanel
+				label={ __( 'Media' ) }
+				resetAll={ () => onSelectMedia( undefined ) }
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				<ToolsPanelItem
+					label={ __( 'Media' ) }
+					hasValue={ () => !! mediaUrl || !! useFeaturedImage }
+					onDeselect={ () => onSelectMedia( undefined ) }
+					isShownByDefault
+				>
+					<MediaControl
+						mediaId={ mediaId }
+						mediaUrl={ mediaUrl || featuredImageURL }
+						filename={
+							image?.media_details?.sizes?.full?.file ||
+							image?.slug ||
+							getFilename( mediaUrl )
+						}
+						allowedTypes={ ALLOWED_MEDIA_TYPES }
+						onSelect={ onSelectMedia }
+						onError={ onUploadError }
+						onReset={ () => onSelectMedia( undefined ) }
+						useFeaturedImage={ useFeaturedImage }
+						onToggleFeaturedImage={ toggleUseFeaturedImage }
+						emptyLabel={ __( 'Add media' ) }
+					/>
+				</ToolsPanelItem>
+			</ToolsPanel>
+		</InspectorControls>
+	) : null;
+
 	const mediaTextGeneralSettings = (
 		<ToolsPanel
 			label={ __( 'Settings' ) }
@@ -480,6 +524,7 @@ function MediaTextEdit( {
 
 	return (
 		<>
+			{ mediaInspectorPanel }
 			<InspectorControls>{ mediaTextGeneralSettings }</InspectorControls>
 			<BlockControls group="block">
 				{ blockEditingMode === 'default' && (

package/src/media-text/image-fill.js

@@ -4,8 +4,8 @@ export function imageFillStyles( url, focalPoint ) {
 				objectPosition: focalPoint
 					? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round(
 							focalPoint.y * 100
-					  ) }%`
+						) }%`
 					: `50% 50%`,
-		  }
+			}
 		: {};
 }

package/src/media-text/media-container.jsx

@@ -15,11 +15,11 @@ import { createBlobURL, isBlobURL } from '@wordpress/blob';
 import { store as noticesStore } from '@wordpress/notices';
 import { media as icon } from '@wordpress/icons';
 import { imageFillStyles } from './image-fill';
+import { ALLOWED_MEDIA_TYPES } from './constants';
 
 /**
  * Constants
  */
-const ALLOWED_MEDIA_TYPES = [ 'image', 'video' ];
 const noop = () => {};
 
 const ResizableBoxContainer = forwardRef(

package/src/navigation/edit/index.jsx

@@ -295,10 +295,8 @@ function Navigation( {
 		hasSelectedStyleState,
 	} = useSelect(
 		( select ) => {
-			const {
-				getSettings,
-				hasSelectedStyleState: hasSelectedBlockStyleState,
-			} = unlock( select( blockEditorStore ) );
+			const { getSettings, hasSelectedBlockStyleState } =
+				select( blockEditorStore );
 			const settings = getSettings();
 
 			return {
@@ -770,7 +768,7 @@ function Navigation( {
 		submenuVisibility !== 'always'
 			? __(
 					'The current menu options offer reduced accessibility for users and are not recommended. Enabling either "Open on Click" or "Show arrow" offers enhanced accessibility by allowing keyboard users to browse submenus selectively.'
-			  )
+				)
 			: '';
 
 	const isFirstRender = useRef( true ); // Don't speak on first render.

package/src/navigation/edit/menu-inspector-controls.jsx

@@ -60,10 +60,10 @@ const MainContent = ( {
 				/* translators: %s: The name of a menu. */
 				__( 'Structure for Navigation Menu: %s' ),
 				navigationMenu?.title || __( 'Untitled menu' )
-		  )
+			)
 		: __(
 				'You have not yet created any menus. Displaying a list of your Pages'
-		  );
+			);
 
 	return (
 		<div className="wp-block-navigation__menu-inspector-controls">

package/src/navigation/edit/overlay-template-part-selector.jsx

@@ -3,7 +3,7 @@ import { useInstanceId } from '@wordpress/compose';
 import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
-	SelectControl,
+	SelectControl as WCSelectControl,
 	Button,
 	FlexBlock,
 	FlexItem,
@@ -255,7 +255,7 @@ export default function OverlayTemplatePartSelector( {
 					selectedTemplatePart.title?.rendered
 						? decodeEntities( selectedTemplatePart.title.rendered )
 						: selectedTemplatePart.slug
-			  )
+				)
 			: __( 'Edit overlay' );
 	}, [ selectedTemplatePart ] );
 
@@ -301,7 +301,7 @@ export default function OverlayTemplatePartSelector( {
 						className="wp-block-navigation__overlay-selector-controls"
 					>
 						<FlexBlock>
-							<SelectControl
+							<WCSelectControl
 								label={ __( 'Overlay template' ) }
 								hideLabelFromVision
 								aria-labelledby={ headingId }

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

@@ -62,7 +62,7 @@ export default function ResponsiveWrapper( {
 					! overlayBackgroundColor?.slug &&
 					overlayBackgroundColor?.color &&
 					overlayBackgroundColor.color,
-		  }
+			}
 		: {};
 
 	const openButtonClasses = clsx(

package/src/navigation/edit/use-generate-default-navigation-title.js

@@ -46,9 +46,9 @@ export default function useGenerateDefaultNavigationTitle( clientId ) {
 					// translators: %s: the name of a menu (e.g. Header menu).
 					__( '%s menu' ),
 					area
-			  )
+				)
 			: // translators: 'menu' as in website navigation menu.
-			  __( 'Menu' );
+				__( 'Menu' );
 
 		// Determine how many menus start with the automatic title.
 		const matchingMenuTitleCount = [

package/src/navigation/editor.scss

@@ -217,6 +217,7 @@ $color-control-label-height: 20px;
 	background-color: $gray-900;
 	color: $white;
 	height: $button-size-small;
+	width: $button-size-small;
 
 	// This needs specificity to override an inherited padding.
 	// That source padding in turn has high specificity to protect

package/src/navigation/index.php

@@ -832,6 +832,14 @@ class WP_Navigation_Block_Renderer {
 			$responsive_container_content_directives = '
 				data-wp-watch="callbacks.focusFirstElement"
 			';
+
+			// The default overlay displays every submenu it contains; a custom overlay
+			// opts out through the `disable-default-overlay` class on this container.
+			// Submenus inherit this flag to tell the two apart, derived from the same
+			// value as that class so the markup and the styles cannot disagree.
+			if ( $has_custom_overlay ) {
+				$responsive_container_directives .= ' ' . wp_interactivity_data_wp_context( array( 'hasCustomOverlay' => true ) );
+			}
 		}
 
 		// Don't apply overlay inline styles if using a custom overlay template part.
@@ -1048,6 +1056,10 @@ class WP_Navigation_Block_Renderer {
 
 		unset( $attributes['rgbTextColor'], $attributes['rgbBackgroundColor'] );
 
+		// Submenu detection is memoized while a navigation block renders. Reset it so
+		// the result of a previously rendered navigation block is not reused for this one.
+		static::$has_submenus = false;
+
 		$inner_blocks = static::get_inner_blocks( $attributes, $block );
 		// Prevent navigation blocks referencing themselves from rendering.
 		if ( block_core_navigation_block_tree_has_block_type(