@wordpress/block-library 7.3.10 → 7.6.0

package/src/navigation/edit/index.js

@@ -24,6 +24,7 @@ import {
 	ContrastChecker,
 	getColorClassName,
 	Warning,
+	__experimentalUseBlockOverlayActive as useBlockOverlayActive,
 } from '@wordpress/block-editor';
 import { EntityProvider } from '@wordpress/core-data';
 
@@ -320,33 +321,41 @@ function Navigation( {
 
 	const textDecoration = attributes.style?.typography?.textDecoration;
 
-	const blockProps = useBlockProps( {
-		ref: navRef,
-		className: classnames( className, {
-			'items-justified-right': justifyContent === 'right',
-			'items-justified-space-between': justifyContent === 'space-between',
-			'items-justified-left': justifyContent === 'left',
-			'items-justified-center': justifyContent === 'center',
-			'is-vertical': orientation === 'vertical',
-			'no-wrap': flexWrap === 'nowrap',
-			'is-responsive': 'never' !== overlayMenu,
-			'has-text-color': !! textColor.color || !! textColor?.class,
-			[ getColorClassName(
-				'color',
-				textColor?.slug
-			) ]: !! textColor?.slug,
-			'has-background': !! backgroundColor.color || backgroundColor.class,
-			[ getColorClassName(
-				'background-color',
-				backgroundColor?.slug
-			) ]: !! backgroundColor?.slug,
-			[ `has-text-decoration-${ textDecoration }` ]: textDecoration,
-		} ),
-		style: {
-			color: ! textColor?.slug && textColor?.color,
-			backgroundColor: ! backgroundColor?.slug && backgroundColor?.color,
+	const hasBlockOverlay = useBlockOverlayActive( clientId );
+	const blockProps = useBlockProps(
+		{
+			ref: navRef,
+			className: classnames( className, {
+				'items-justified-right': justifyContent === 'right',
+				'items-justified-space-between':
+					justifyContent === 'space-between',
+				'items-justified-left': justifyContent === 'left',
+				'items-justified-center': justifyContent === 'center',
+				'is-vertical': orientation === 'vertical',
+				'no-wrap': flexWrap === 'nowrap',
+				'is-responsive': 'never' !== overlayMenu,
+				'has-text-color': !! textColor.color || !! textColor?.class,
+				[ getColorClassName(
+					'color',
+					textColor?.slug
+				) ]: !! textColor?.slug,
+				'has-background':
+					!! backgroundColor.color || backgroundColor.class,
+				[ getColorClassName(
+					'background-color',
+					backgroundColor?.slug
+				) ]: !! backgroundColor?.slug,
+				[ `has-text-decoration-${ textDecoration }` ]: textDecoration,
+				'block-editor-block-content-overlay': hasBlockOverlay,
+			} ),
+			style: {
+				color: ! textColor?.slug && textColor?.color,
+				backgroundColor:
+					! backgroundColor?.slug && backgroundColor?.color,
+			},
 		},
-	} );
+		{ __unstableIsDisabled: hasBlockOverlay }
+	);
 
 	const overlayClassnames = classnames( {
 		'has-text-color':
@@ -549,6 +558,144 @@ function Navigation( {
 		} );
 	}, [ clientId, ref ] );
 
+	const isResponsive = 'never' !== overlayMenu;
+
+	const overlayMenuPreviewClasses = classnames(
+		'wp-block-navigation__overlay-menu-preview',
+		{ open: overlayMenuPreview }
+	);
+
+	const stylingInspectorControls = (
+		<InspectorControls>
+			{ hasSubmenuIndicatorSetting && (
+				<PanelBody title={ __( 'Display' ) }>
+					{ isResponsive && (
+						<Button
+							className={ overlayMenuPreviewClasses }
+							onClick={ () => {
+								setOverlayMenuPreview( ! overlayMenuPreview );
+							} }
+						>
+							{ hasIcon && <OverlayMenuIcon /> }
+							{ ! hasIcon && <span>{ __( 'Menu' ) }</span> }
+						</Button>
+					) }
+					{ overlayMenuPreview && (
+						<ToggleControl
+							label={ __( 'Show icon button' ) }
+							help={ __(
+								'Configure the visual appearance of the button opening the overlay menu.'
+							) }
+							onChange={ ( value ) =>
+								setAttributes( { hasIcon: value } )
+							}
+							checked={ hasIcon }
+						/>
+					) }
+					<h3>{ __( 'Overlay Menu' ) }</h3>
+					<ToggleGroupControl
+						label={ __( 'Configure overlay menu' ) }
+						value={ overlayMenu }
+						help={ __(
+							'Collapses the navigation options in a menu icon opening an overlay.'
+						) }
+						onChange={ ( value ) =>
+							setAttributes( { overlayMenu: value } )
+						}
+						isBlock
+						hideLabelFromVision
+					>
+						<ToggleGroupControlOption
+							value="never"
+							label={ __( 'Off' ) }
+						/>
+						<ToggleGroupControlOption
+							value="mobile"
+							label={ __( 'Mobile' ) }
+						/>
+						<ToggleGroupControlOption
+							value="always"
+							label={ __( 'Always' ) }
+						/>
+					</ToggleGroupControl>
+					{ hasSubmenus && (
+						<>
+							<h3>{ __( 'Submenus' ) }</h3>
+							<ToggleControl
+								checked={ openSubmenusOnClick }
+								onChange={ ( value ) => {
+									setAttributes( {
+										openSubmenusOnClick: value,
+										...( value && {
+											showSubmenuIcon: true,
+										} ), // Make sure arrows are shown when we toggle this on.
+									} );
+								} }
+								label={ __( 'Open on click' ) }
+							/>
+
+							<ToggleControl
+								checked={ showSubmenuIcon }
+								onChange={ ( value ) => {
+									setAttributes( {
+										showSubmenuIcon: value,
+									} );
+								} }
+								disabled={ attributes.openSubmenusOnClick }
+								label={ __( 'Show arrow' ) }
+							/>
+						</>
+					) }
+				</PanelBody>
+			) }
+			{ hasColorSettings && (
+				<PanelColorSettings
+					__experimentalHasMultipleOrigins
+					__experimentalIsRenderedInSidebar
+					title={ __( 'Color' ) }
+					initialOpen={ false }
+					colorSettings={ [
+						{
+							value: textColor.color,
+							onChange: setTextColor,
+							label: __( 'Text' ),
+						},
+						{
+							value: backgroundColor.color,
+							onChange: setBackgroundColor,
+							label: __( 'Background' ),
+						},
+						{
+							value: overlayTextColor.color,
+							onChange: setOverlayTextColor,
+							label: __( 'Submenu & overlay text' ),
+						},
+						{
+							value: overlayBackgroundColor.color,
+							onChange: setOverlayBackgroundColor,
+							label: __( 'Submenu & overlay background' ),
+						},
+					] }
+				>
+					{ enableContrastChecking && (
+						<>
+							<ContrastChecker
+								backgroundColor={ detectedBackgroundColor }
+								textColor={ detectedColor }
+							/>
+							<ContrastChecker
+								backgroundColor={
+									detectedOverlayBackgroundColor
+								}
+								textColor={ detectedOverlayColor }
+							/>
+						</>
+					) }
+				</PanelColorSettings>
+			) }
+		</InspectorControls>
+	);
+
 	// If the block has inner blocks, but no menu id, then these blocks are either:
 	// - inserted via a pattern.
 	// - inserted directly via Code View (or otherwise).
@@ -559,6 +706,7 @@ function Navigation( {
 	if ( hasUnsavedBlocks ) {
 		return (
 			<TagName { ...blockProps }>
+				{ stylingInspectorControls }
 				<ResponsiveWrapper
 					id={ clientId }
 					onToggle={ setResponsiveMenuVisibility }
@@ -624,13 +772,6 @@ function Navigation( {
 		? CustomPlaceholder
 		: Placeholder;
 
-	const isResponsive = 'never' !== overlayMenu;
-
-	const overlayMenuPreviewClasses = classnames(
-		'wp-block-navigation__overlay-menu-preview',
-		{ open: overlayMenuPreview }
-	);
-
 	if ( isPlaceholder ) {
 		return (
 			<TagName { ...blockProps }>
@@ -668,142 +809,7 @@ function Navigation( {
 						</ToolbarGroup>
 					) }
 				</BlockControls>
-				<InspectorControls>
-					{ hasSubmenuIndicatorSetting && (
-						<PanelBody title={ __( 'Display' ) }>
-							{ isResponsive && (
-								<Button
-									className={ overlayMenuPreviewClasses }
-									onClick={ () => {
-										setOverlayMenuPreview(
-											! overlayMenuPreview
-										);
-									} }
-								>
-									{ hasIcon && <OverlayMenuIcon /> }
-									{ ! hasIcon && (
-										<span>{ __( 'Menu' ) }</span>
-									) }
-								</Button>
-							) }
-							{ overlayMenuPreview && (
-								<ToggleControl
-									label={ __( 'Show icon button' ) }
-									help={ __(
-										'Configure the visual appearance of the button opening the overlay menu.'
-									) }
-									onChange={ ( value ) =>
-										setAttributes( { hasIcon: value } )
-									}
-									checked={ hasIcon }
-								/>
-							) }
-							<h3>{ __( 'Overlay Menu' ) }</h3>
-							<ToggleGroupControl
-								label={ __( 'Configure overlay menu' ) }
-								value={ overlayMenu }
-								help={ __(
-									'Collapses the navigation options in a menu icon opening an overlay.'
-								) }
-								onChange={ ( value ) =>
-									setAttributes( { overlayMenu: value } )
-								}
-								isBlock
-								hideLabelFromVision
-							>
-								<ToggleGroupControlOption
-									value="never"
-									label={ __( 'Off' ) }
-								/>
-								<ToggleGroupControlOption
-									value="mobile"
-									label={ __( 'Mobile' ) }
-								/>
-								<ToggleGroupControlOption
-									value="always"
-									label={ __( 'Always' ) }
-								/>
-							</ToggleGroupControl>
-							{ hasSubmenus && (
-								<>
-									<h3>{ __( 'Submenus' ) }</h3>
-									<ToggleControl
-										checked={ openSubmenusOnClick }
-										onChange={ ( value ) => {
-											setAttributes( {
-												openSubmenusOnClick: value,
-												...( value && {
-													showSubmenuIcon: true,
-												} ), // Make sure arrows are shown when we toggle this on.
-											} );
-										} }
-										label={ __( 'Open on click' ) }
-									/>
-
-									<ToggleControl
-										checked={ showSubmenuIcon }
-										onChange={ ( value ) => {
-											setAttributes( {
-												showSubmenuIcon: value,
-											} );
-										} }
-										disabled={
-											attributes.openSubmenusOnClick
-										}
-										label={ __( 'Show arrow' ) }
-									/>
-								</>
-							) }
-						</PanelBody>
-					) }
-					{ hasColorSettings && (
-						<PanelColorSettings
-							__experimentalHasMultipleOrigins
-							__experimentalIsRenderedInSidebar
-							title={ __( 'Color' ) }
-							initialOpen={ false }
-							colorSettings={ [
-								{
-									value: textColor.color,
-									onChange: setTextColor,
-									label: __( 'Text' ),
-								},
-								{
-									value: backgroundColor.color,
-									onChange: setBackgroundColor,
-									label: __( 'Background' ),
-								},
-								{
-									value: overlayTextColor.color,
-									onChange: setOverlayTextColor,
-									label: __( 'Submenu & overlay text' ),
-								},
-								{
-									value: overlayBackgroundColor.color,
-									onChange: setOverlayBackgroundColor,
-									label: __( 'Submenu & overlay background' ),
-								},
-							] }
-						>
-							{ enableContrastChecking && (
-								<>
-									<ContrastChecker
-										backgroundColor={
-											detectedBackgroundColor
-										}
-										textColor={ detectedColor }
-									/>
-									<ContrastChecker
-										backgroundColor={
-											detectedOverlayBackgroundColor
-										}
-										textColor={ detectedOverlayColor }
-									/>
-								</>
-							) }
-						</PanelColorSettings>
-					) }
-				</InspectorControls>
+				{ stylingInspectorControls }
 				{ isEntityAvailable && (
 					<InspectorControls __experimentalGroup="advanced">
 						{ hasResolvedCanUserUpdateNavigationMenu &&

package/src/navigation/edit/inner-blocks.js

@@ -5,7 +5,6 @@ import { useEntityBlockEditor } from '@wordpress/core-data';
 import {
 	useInnerBlocksProps,
 	InnerBlocks,
-	__experimentalBlockContentOverlay as BlockContentOverlay,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
@@ -140,11 +139,5 @@ export default function NavigationInnerBlocks( {
 		}
 	);
 
-	return (
-		<BlockContentOverlay
-			clientId={ clientId }
-			tagName={ 'div' }
-			wrapperProps={ innerBlocksProps }
-		/>
-	);
+	return <div { ...innerBlocksProps } />;
 }

package/src/navigation/edit/unsaved-inner-blocks.js

@@ -123,7 +123,7 @@ export default function UnsavedInnerBlocks( {
 	);
 
 	// Automatically save the uncontrolled blocks.
-	useEffect( async () => {
+	useEffect( () => {
 		// The block will be disabled when used in a BlockPreview.
 		// In this case avoid automatic creation of a wp_navigation post.
 		// Otherwise the user will be spammed with lots of menus!
@@ -150,9 +150,10 @@ export default function UnsavedInnerBlocks( {
 		}
 
 		savingLock.current = true;
-		const menu = await createNavigationMenu( null, blocks );
-		onSave( menu );
-		savingLock.current = false;
+		createNavigationMenu( null, blocks ).then( ( menu ) => {
+			onSave( menu );
+			savingLock.current = false;
+		} );
 	}, [
 		isDisabled,
 		isSaving,

package/src/navigation/index.php

@@ -431,6 +431,11 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		wp_enqueue_script( 'wp-block-navigation-view' );
 	}
 
+	$should_load_modal_view_script = isset( $attributes['overlayMenu'] ) && 'never' !== $attributes['overlayMenu'];
+	if ( $should_load_modal_view_script ) {
+		wp_enqueue_script( 'wp-block-navigation-view-modal' );
+	}
+
 	$inner_blocks = $block->inner_blocks;
 
 	// Ensure that blocks saved with the legacy ref attribute name (navigationMenuId) continue to render.

package/src/navigation/style.scss

@@ -299,6 +299,9 @@ button.wp-block-navigation-item__content {
 	font-size: inherit;
 	font-family: inherit;
 	line-height: inherit;
+	font-style: inherit;
+	font-weight: inherit;
+	text-transform: inherit;
 
 	// Buttons default to center alignment. This becomes visible
 	// when a menu item label is long enough to wrap.

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalUseEntityRecords as useEntityRecords } from '@wordpress/core-data';
+import { useEntityRecords } from '@wordpress/core-data';
 
 /**
  * @typedef {Object} NavigationEntitiesData

package/src/navigation/view-modal.js

@@ -0,0 +1,68 @@
+/**
+ * External dependencies
+ */
+import MicroModal from 'micromodal';
+
+// Responsive navigation toggle.
+function navigationToggleModal( modal ) {
+	const dialogContainer = modal.querySelector(
+		`.wp-block-navigation__responsive-dialog`
+	);
+
+	const isHidden = 'true' === modal.getAttribute( 'aria-hidden' );
+
+	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;
+	htmlElement.classList.toggle( 'has-modal-open' );
+}
+
+window.addEventListener( 'load', () => {
+	MicroModal.init( {
+		onShow: navigationToggleModal,
+		onClose: navigationToggleModal,
+		openClass: 'is-menu-open',
+	} );
+
+	// Close modal automatically on clicking anchor links inside modal.
+	const navigationLinks = document.querySelectorAll(
+		'.wp-block-navigation-item__content'
+	);
+
+	navigationLinks.forEach( function ( link ) {
+		// Ignore non-anchor links and anchor links which open on a new tab.
+		if (
+			! link.getAttribute( 'href' )?.startsWith( '#' ) ||
+			link.attributes?.target === '_blank'
+		) {
+			return;
+		}
+
+		// Find the specific parent modal for this link
+		// since .close() won't work without an ID if there are
+		// multiple navigation menus in a post/page.
+		const modal = link.closest(
+			'.wp-block-navigation__responsive-container'
+		);
+		const modalId = modal?.getAttribute( 'id' );
+
+		link.addEventListener( 'click', () => {
+			// check if modal exists and is open before trying to close it
+			// otherwise Micromodal will toggle the `has-modal-open` class
+			// on the html tag which prevents scrolling
+			if ( modalId && modal.classList.contains( 'has-modal-open' ) ) {
+				MicroModal.close( modalId );
+			}
+		} );
+	} );
+} );

package/src/navigation/view.js

@@ -1,32 +1,3 @@
-/**
- * External dependencies
- */
-import MicroModal from 'micromodal';
-
-// Responsive navigation toggle.
-function navigationToggleModal( modal ) {
-	const dialogContainer = modal.querySelector(
-		`.wp-block-navigation__responsive-dialog`
-	);
-
-	const isHidden = 'true' === modal.getAttribute( 'aria-hidden' );
-
-	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;
-	htmlElement.classList.toggle( 'has-modal-open' );
-}
-
 // Open on click functionality.
 function closeSubmenus( element ) {
 	element
@@ -65,12 +36,6 @@ function toggleSubmenuOnClick( event ) {
 // Necessary for some themes such as TT1 Blocks, where
 // scripts could be loaded before the body.
 window.addEventListener( 'load', () => {
-	MicroModal.init( {
-		onShow: navigationToggleModal,
-		onClose: navigationToggleModal,
-		openClass: 'is-menu-open',
-	} );
-
 	const submenuButtons = document.querySelectorAll(
 		'.wp-block-navigation-submenu__toggle'
 	);

package/src/navigation-link/edit.js

@@ -354,7 +354,7 @@ function LinkControlTransforms( { clientId, replace } ) {
 			return {
 				getBlock: _getBlock,
 				blockTransforms: getBlockTransformItems(
-					[ _getBlock( clientId ) ],
+					_getBlock( clientId ),
 					getBlockRootClientId( clientId )
 				),
 			};

package/src/navigation-link/fallback-variations.js

@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 import {
 	category as categoryIcon,
 	page as pageIcon,
-	postTitle as postIcon,
+	postContent as postIcon,
 	tag as tagIcon,
 } from '@wordpress/icons';
 

package/src/navigation-link/hooks.js

@@ -4,7 +4,7 @@
 import {
 	category,
 	page,
-	postTitle,
+	postContent,
 	tag,
 	customPostType,
 } from '@wordpress/icons';
@@ -17,7 +17,7 @@ import fallbackVariations from './fallback-variations';
 function getIcon( variationName ) {
 	switch ( variationName ) {
 		case 'post':
-			return postTitle;
+			return postContent;
 		case 'page':
 			return page;
 		case 'tag':

package/src/navigation-link/test/__snapshots__/hooks.js.snap

@@ -23,10 +23,10 @@ Object {
       "description": "A link to a post.",
       "icon": <SVG
         viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
+        xmlns="https://www.w3.org/2000/svg"
       >
         <Path
-          d="M4 14.5h16V16H4zM4 18.5h9V20H4zM4 4h3c2 0 3 .86 3 2.583 0 .891-.253 1.554-.76 1.988-.505.435-1.24.652-2.204.652H5.542V12H4V4zm2.855 4c.53 0 .924-.114 1.18-.343.266-.228.398-.579.398-1.051 0-.473-.132-.82-.397-1.04-.265-.229-.67-.343-1.217-.343H5.542V8h1.313z"
+          d="M4 20h16v-1.5H4V20zm0-4.8h16v-1.5H4v1.5zm0-6.4v1.5h16V8.8H4zM16 4H4v1.5h12V4z"
         />
       </SVG>,
       "isActive": [Function],
@@ -120,10 +120,10 @@ Object {
       "description": "A link to a post.",
       "icon": <SVG
         viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
+        xmlns="https://www.w3.org/2000/svg"
       >
         <Path
-          d="M4 14.5h16V16H4zM4 18.5h9V20H4zM4 4h3c2 0 3 .86 3 2.583 0 .891-.253 1.554-.76 1.988-.505.435-1.24.652-2.204.652H5.542V12H4V4zm2.855 4c.53 0 .924-.114 1.18-.343.266-.228.398-.579.398-1.051 0-.473-.132-.82-.397-1.04-.265-.229-.67-.343-1.217-.343H5.542V8h1.313z"
+          d="M4 20h16v-1.5H4V20zm0-4.8h16v-1.5H4v1.5zm0-6.4v1.5h16V8.8H4zM16 4H4v1.5h12V4z"
         />
       </SVG>,
       "isActive": [Function],

package/src/page-list/convert-to-links-modal.js

@@ -4,7 +4,7 @@
 import { Button, Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
-import { __experimentalUseEntityRecords as useEntityRecords } from '@wordpress/core-data';
+import { useEntityRecords } from '@wordpress/core-data';
 import { createBlock as create } from '@wordpress/blocks';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 

package/src/page-list/edit.js

@@ -16,10 +16,7 @@ import { ToolbarButton, Spinner, Notice } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useMemo, useState, memo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import {
-	store as coreStore,
-	__experimentalUseEntityRecords as useEntityRecords,
-} from '@wordpress/core-data';
+import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
 
 /**
  * Internal dependencies

package/src/paragraph/edit.js

@@ -23,6 +23,11 @@ import {
 import { createBlock } from '@wordpress/blocks';
 import { formatLtr } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import { useOnEnter } from './use-enter';
+
 const name = 'core/paragraph';
 
 function ParagraphRTLControl( { direction, setDirection } ) {
@@ -57,6 +62,7 @@ function ParagraphBlock( {
 	const { align, content, direction, dropCap, placeholder } = attributes;
 	const isDropCapFeatureEnabled = useSetting( 'typography.dropCap' );
 	const blockProps = useBlockProps( {
+		ref: useOnEnter( { clientId, content } ),
 		className: classnames( {
 			'has-drop-cap': dropCap,
 			[ `has-text-align-${ align }` ]: align,