@wordpress/block-library 9.36.1-next.8b30e05b0.0 → 9.37.0

package/src/math/edit.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
 	useBlockProps,
 	store as blockEditorStore,
@@ -98,7 +98,15 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 										setError( null );
 									} catch ( err ) {
 										setError( err.message );
-										speak( err.message );
+										speak(
+											sprintf(
+												/* translators: %s: error message returned when parsing LaTeX. */
+												__(
+													'Error parsing mathematical expression: %s'
+												),
+												err.message
+											)
+										);
 									}
 									setAttributes( {
 										mathML: newMathML,
@@ -113,7 +121,11 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 										intent="error"
 										className="wp-block-math__error"
 									>
-										{ error }
+										{ sprintf(
+											/* translators: %s: error message returned when parsing LaTeX. */
+											__( 'Error: %s' ),
+											error
+										) }
 									</Badge>
 									<style children=".wp-block-math__error .components-badge__content{white-space:normal}" />
 								</>

package/src/media-text/index.js

@@ -54,7 +54,7 @@ export const settings = {
 	deprecated,
 };
 
-if ( window.__experimentalContentOnlyPatternInsertion ) {
+if ( window.__experimentalContentOnlyInspectorFields ) {
 	settings[ fieldsKey ] = [
 		{
 			id: 'media',

package/src/more/index.js

@@ -40,7 +40,7 @@ export const settings = {
 	save,
 };
 
-if ( window.__experimentalContentOnlyPatternInsertion ) {
+if ( window.__experimentalContentOnlyInspectorFields ) {
 	settings[ fieldsKey ] = [
 		{
 			id: 'customText',

package/src/navigation/block.json

@@ -54,6 +54,9 @@
 			"type": "string",
 			"default": "mobile"
 		},
+		"overlay": {
+			"type": "string"
+		},
 		"icon": {
 			"type": "string",
 			"default": "handle"

package/src/navigation/edit/index.js

@@ -34,11 +34,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
-	__experimentalVStack as VStack,
 	ToggleControl,
-	Button,
 	Spinner,
 	Notice,
 	ToolbarButton,
@@ -46,7 +42,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
-import { close, Icon, page } from '@wordpress/icons';
+import { page } from '@wordpress/icons';
 import { createBlock } from '@wordpress/blocks';
 import { useInstanceId } from '@wordpress/compose';
 
@@ -62,8 +58,10 @@ 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';
 import OverlayMenuPreview from './overlay-menu-preview';
+import OverlayPanel from './overlay-panel';
+import OverlayVisibilityControl from './overlay-visibility-control';
+import OverlayMenuPreviewButton from './overlay-menu-preview-button';
 import useConvertClassicToBlockMenu, {
 	CLASSIC_MENU_CONVERSION_ERROR,
 	CLASSIC_MENU_CONVERSION_PENDING,
@@ -263,6 +261,7 @@ function Navigation( {
 	const {
 		openSubmenusOnClick,
 		overlayMenu,
+		overlay,
 		showSubmenuIcon,
 		templateLock,
 		layout: {
@@ -288,6 +287,18 @@ function Navigation( {
 
 	const blockEditingMode = useBlockEditingMode();
 
+	const { onNavigateToEntityRecord } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const settings = getSettings();
+		return {
+			onNavigateToEntityRecord: settings?.onNavigateToEntityRecord,
+		};
+	}, [] );
+
+	const isOverlayExperimentEnabled =
+		typeof window !== 'undefined' &&
+		window.__experimentalNavigationOverlays === true;
+
 	// Preload classic menus, so that they don't suddenly pop-in when viewing
 	// the Select Menu dropdown.
 	const { menus: classicMenus } = useNavigationEntities();
@@ -658,89 +669,50 @@ function Navigation( {
 						} }
 						dropdownMenuProps={ dropdownMenuProps }
 					>
-						{ isResponsive && (
+						{ ! isOverlayExperimentEnabled && (
 							<>
-								<Button
-									__next40pxDefaultSize
-									className={ overlayMenuPreviewClasses }
-									onClick={ () => {
-										setOverlayMenuPreview(
-											! overlayMenuPreview
-										);
-									} }
-									aria-label={ __( 'Overlay menu controls' ) }
-									aria-controls={ overlayMenuPreviewId }
-									aria-expanded={ overlayMenuPreview }
-								>
-									{ hasIcon && (
-										<>
-											<OverlayMenuIcon icon={ icon } />
-											<Icon icon={ close } />
-										</>
-									) }
-									{ ! hasIcon && (
-										<>
-											<span>{ __( 'Menu' ) }</span>
-											<span>{ __( 'Close' ) }</span>
-										</>
-									) }
-								</Button>
-								{ overlayMenuPreview && (
-									<VStack
-										id={ overlayMenuPreviewId }
-										spacing={ 4 }
-										style={ {
+								{ isResponsive && (
+									<OverlayMenuPreviewButton
+										isResponsive={ isResponsive }
+										overlayMenuPreview={
+											overlayMenuPreview
+										}
+										setOverlayMenuPreview={
+											setOverlayMenuPreview
+										}
+										hasIcon={ hasIcon }
+										icon={ icon }
+										setAttributes={ setAttributes }
+										overlayMenuPreviewClasses={
+											overlayMenuPreviewClasses
+										}
+										overlayMenuPreviewId={
+											overlayMenuPreviewId
+										}
+										containerStyle={ {
 											gridColumn: 'span 2',
 										} }
-									>
-										<OverlayMenuPreview
-											setAttributes={ setAttributes }
-											hasIcon={ hasIcon }
-											icon={ icon }
-											hidden={ ! overlayMenuPreview }
-										/>
-									</VStack>
+									/>
 								) }
+
+								<ToolsPanelItem
+									hasValue={ () => overlayMenu !== 'mobile' }
+									label={ __( 'Overlay Visibility' ) }
+									onDeselect={ () =>
+										setAttributes( {
+											overlayMenu: 'mobile',
+										} )
+									}
+									isShownByDefault
+								>
+									<OverlayVisibilityControl
+										overlayMenu={ overlayMenu }
+										setAttributes={ setAttributes }
+									/>
+								</ToolsPanelItem>
 							</>
 						) }
 
-						<ToolsPanelItem
-							hasValue={ () => overlayMenu !== 'mobile' }
-							label={ __( 'Overlay Menu' ) }
-							onDeselect={ () =>
-								setAttributes( { overlayMenu: 'mobile' } )
-							}
-							isShownByDefault
-						>
-							<ToggleGroupControl
-								__next40pxDefaultSize
-								__nextHasNoMarginBottom
-								label={ __( 'Overlay Menu' ) }
-								aria-label={ __( 'Configure overlay menu' ) }
-								value={ overlayMenu }
-								help={ __(
-									'Collapses the navigation options in a menu icon opening an overlay.'
-								) }
-								onChange={ ( value ) =>
-									setAttributes( { overlayMenu: value } )
-								}
-								isBlock
-							>
-								<ToggleGroupControlOption
-									value="never"
-									label={ __( 'Off' ) }
-								/>
-								<ToggleGroupControlOption
-									value="mobile"
-									label={ __( 'Mobile' ) }
-								/>
-								<ToggleGroupControlOption
-									value="always"
-									label={ __( 'Always' ) }
-								/>
-							</ToggleGroupControl>
-						</ToolsPanelItem>
-
 						{ hasSubmenus && (
 							<>
 								<h3 className="wp-block-navigation__submenu-header">
@@ -815,6 +787,23 @@ function Navigation( {
 					</ToolsPanel>
 				) }
 			</InspectorControls>
+			{ isOverlayExperimentEnabled && (
+				<InspectorControls>
+					<OverlayPanel
+						overlayMenu={ overlayMenu }
+						overlay={ overlay }
+						setAttributes={ setAttributes }
+						onNavigateToEntityRecord={ onNavigateToEntityRecord }
+						overlayMenuPreview={ overlayMenuPreview }
+						setOverlayMenuPreview={ setOverlayMenuPreview }
+						hasIcon={ hasIcon }
+						icon={ icon }
+						overlayMenuPreviewClasses={ overlayMenuPreviewClasses }
+						overlayMenuPreviewId={ overlayMenuPreviewId }
+						isResponsive={ isResponsive }
+					/>
+				</InspectorControls>
+			) }
 			<InspectorControls group="color">
 				{ /*
 				 * Avoid useMultipleOriginColorsAndGradients and detectColors
@@ -880,6 +869,8 @@ function Navigation( {
 					isHiddenByDefault={ isHiddenByDefault }
 					overlayBackgroundColor={ overlayBackgroundColor }
 					overlayTextColor={ overlayTextColor }
+					overlay={ overlay }
+					onNavigateToEntityRecord={ onNavigateToEntityRecord }
 				>
 					<UnsavedInnerBlocks
 						createNavigationMenu={ createNavigationMenu }
@@ -1042,6 +1033,10 @@ function Navigation( {
 									overlayBackgroundColor
 								}
 								overlayTextColor={ overlayTextColor }
+								overlay={ overlay }
+								onNavigateToEntityRecord={
+									onNavigateToEntityRecord
+								}
 							>
 								{ isEntityAvailable && (
 									<NavigationInnerBlocks

package/src/navigation/edit/overlay-menu-preview-button.js

@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, __experimentalVStack as VStack } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { Icon, close } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import OverlayMenuIcon from './overlay-menu-icon';
+import OverlayMenuPreviewControls from './overlay-menu-preview-controls';
+
+/**
+ * Overlay Menu Preview Button component.
+ *
+ * @param {Object}   props                           Component props.
+ * @param {boolean}  props.isResponsive              Whether overlay menu is responsive.
+ * @param {boolean}  props.overlayMenuPreview        Whether overlay menu preview is open.
+ * @param {Function} props.setOverlayMenuPreview     Function to toggle overlay menu preview.
+ * @param {boolean}  props.hasIcon                   Whether the overlay menu has an icon.
+ * @param {string}   props.icon                      Icon type for overlay menu.
+ * @param {Function} props.setAttributes             Function to update block attributes.
+ * @param {string}   props.overlayMenuPreviewClasses CSS classes for overlay menu preview button.
+ * @param {string}   props.overlayMenuPreviewId      ID for overlay menu preview.
+ * @param {string}   props.containerStyle            Optional style for the preview container.
+ * @return {JSX.Element|null}                       The overlay menu preview button or null if not responsive.
+ */
+export default function OverlayMenuPreviewButton( {
+	isResponsive,
+	overlayMenuPreview,
+	setOverlayMenuPreview,
+	hasIcon,
+	icon,
+	setAttributes,
+	overlayMenuPreviewClasses,
+	overlayMenuPreviewId,
+	containerStyle,
+} ) {
+	if ( ! isResponsive ) {
+		return null;
+	}
+
+	return (
+		<>
+			<Button
+				__next40pxDefaultSize
+				className={ overlayMenuPreviewClasses }
+				onClick={ () => setOverlayMenuPreview( ! overlayMenuPreview ) }
+				aria-label={ __( 'Overlay menu controls' ) }
+				aria-controls={ overlayMenuPreviewId }
+				aria-expanded={ overlayMenuPreview }
+			>
+				{ hasIcon && (
+					<>
+						<OverlayMenuIcon icon={ icon } />
+						<Icon icon={ close } />
+					</>
+				) }
+				{ ! hasIcon && (
+					<>
+						<span>{ __( 'Menu' ) }</span>
+						<span>{ __( 'Close' ) }</span>
+					</>
+				) }
+			</Button>
+			{ overlayMenuPreview && (
+				<VStack
+					id={ overlayMenuPreviewId }
+					spacing={ 4 }
+					style={ containerStyle }
+				>
+					<OverlayMenuPreviewControls
+						hasIcon={ hasIcon }
+						icon={ icon }
+						setAttributes={ setAttributes }
+					/>
+				</VStack>
+			) }
+		</>
+	);
+}

package/src/navigation/edit/overlay-menu-preview-controls.js

@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalVStack as VStack,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	ToggleControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import OverlayMenuIcon from './overlay-menu-icon';
+
+/**
+ * Overlay Menu Preview Controls component.
+ * Used within PanelBody context (not ToolsPanel).
+ *
+ * @param {Object}   props               Component props.
+ * @param {boolean}  props.hasIcon       Whether the overlay menu has an icon.
+ * @param {string}   props.icon          Icon type for overlay menu.
+ * @param {Function} props.setAttributes Function to update block attributes.
+ * @return {JSX.Element}                The overlay menu preview controls.
+ */
+export default function OverlayMenuPreviewControls( {
+	hasIcon,
+	icon,
+	setAttributes,
+} ) {
+	return (
+		<VStack spacing={ 4 }>
+			<ToggleControl
+				__nextHasNoMarginBottom
+				label={ __( 'Show icon button' ) }
+				help={ __(
+					'Configure the visual appearance of the button that toggles the overlay menu.'
+				) }
+				onChange={ ( value ) => setAttributes( { hasIcon: value } ) }
+				checked={ hasIcon }
+			/>
+			<ToggleGroupControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+				className="wp-block-navigation__overlay-menu-icon-toggle-group"
+				label={ __( 'Icon' ) }
+				value={ icon }
+				onChange={ ( value ) => setAttributes( { icon: value } ) }
+				isBlock
+			>
+				<ToggleGroupControlOption
+					value="handle"
+					aria-label={ __( 'handle' ) }
+					label={ <OverlayMenuIcon icon="handle" /> }
+				/>
+				<ToggleGroupControlOption
+					value="menu"
+					aria-label={ __( 'menu' ) }
+					label={ <OverlayMenuIcon icon="menu" /> }
+				/>
+			</ToggleGroupControl>
+		</VStack>
+	);
+}

package/src/navigation/edit/overlay-panel.js

@@ -0,0 +1,78 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	PanelBody,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import OverlayTemplatePartSelector from './overlay-template-part-selector';
+import OverlayVisibilityControl from './overlay-visibility-control';
+import OverlayMenuPreviewButton from './overlay-menu-preview-button';
+
+/**
+ * Overlay Panel component for Navigation block.
+ *
+ * @param {Object}   props                           Component props.
+ * @param {string}   props.overlayMenu               Overlay menu setting ('never', 'mobile', 'always').
+ * @param {string}   props.overlay                   Currently selected overlay template part ID.
+ * @param {Function} props.setAttributes             Function to update block attributes.
+ * @param {Function} props.onNavigateToEntityRecord  Function to navigate to template part editor.
+ * @param {boolean}  props.overlayMenuPreview        Whether overlay menu preview is open.
+ * @param {Function} props.setOverlayMenuPreview     Function to toggle overlay menu preview.
+ * @param {boolean}  props.hasIcon                   Whether the overlay menu has an icon.
+ * @param {string}   props.icon                      Icon type for overlay menu.
+ * @param {string}   props.overlayMenuPreviewClasses CSS classes for overlay menu preview button.
+ * @param {string}   props.overlayMenuPreviewId      ID for overlay menu preview.
+ * @param {boolean}  props.isResponsive              Whether overlay menu is responsive.
+ * @return {JSX.Element|null}                       The overlay panel component or null if overlay is disabled.
+ */
+export default function OverlayPanel( {
+	overlayMenu,
+	overlay,
+	setAttributes,
+	onNavigateToEntityRecord,
+	overlayMenuPreview,
+	setOverlayMenuPreview,
+	hasIcon,
+	icon,
+	overlayMenuPreviewClasses,
+	overlayMenuPreviewId,
+	isResponsive,
+} ) {
+	return (
+		<PanelBody title={ __( 'Overlay' ) } initialOpen>
+			<VStack spacing={ 4 }>
+				<OverlayVisibilityControl
+					overlayMenu={ overlayMenu }
+					setAttributes={ setAttributes }
+				/>
+
+				{ overlayMenu !== 'never' && (
+					<OverlayMenuPreviewButton
+						isResponsive={ isResponsive }
+						overlayMenuPreview={ overlayMenuPreview }
+						setOverlayMenuPreview={ setOverlayMenuPreview }
+						hasIcon={ hasIcon }
+						icon={ icon }
+						setAttributes={ setAttributes }
+						overlayMenuPreviewClasses={ overlayMenuPreviewClasses }
+						overlayMenuPreviewId={ overlayMenuPreviewId }
+					/>
+				) }
+
+				{ overlayMenu !== 'never' && (
+					<OverlayTemplatePartSelector
+						overlay={ overlay }
+						setAttributes={ setAttributes }
+						onNavigateToEntityRecord={ onNavigateToEntityRecord }
+					/>
+				) }
+			</VStack>
+		</PanelBody>
+	);
+}