@wordpress/block-library 7.5.0 → 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/index.php

@@ -350,6 +350,41 @@ function block_core_navigation_get_fallback_blocks() {
 	return apply_filters( 'block_core_navigation_render_fallback', $fallback_blocks );
 }
 
+/**
+ * Iterate through all inner blocks recursively and get navigation link block's post IDs.
+ *
+ * @param WP_Block_List $inner_blocks Block list class instance.
+ *
+ * @return array Array of post IDs.
+ */
+function block_core_navigation_get_post_ids( $inner_blocks ) {
+	$post_ids = array_map( 'block_core_navigation_from_block_get_post_ids', iterator_to_array( $inner_blocks ) );
+	return array_unique( array_merge( ...$post_ids ) );
+}
+
+/**
+ * Get post IDs from a navigation link block instance.
+ *
+ * @param WP_Block $block Instance of a block.
+ *
+ * @return array Array of post IDs.
+ */
+function block_core_navigation_from_block_get_post_ids( $block ) {
+	$post_ids = array();
+
+	if ( $block->inner_blocks ) {
+		$post_ids = block_core_navigation_get_post_ids( $block->inner_blocks );
+	}
+
+	if ( 'core/navigation-link' === $block->name || 'core/navigation-submenu' === $block->name ) {
+		if ( $block->attributes && isset( $block->attributes['kind'] ) && 'post-type' === $block->attributes['kind'] ) {
+			$post_ids[] = $block->attributes['id'];
+		}
+	}
+
+	return $post_ids;
+}
+
 /**
  * Renders the `core/navigation` block on server.
  *
@@ -506,6 +541,11 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		$text_decoration ? array( $text_decoration_class ) : array()
 	);
 
+	$post_ids = block_core_navigation_get_post_ids( $inner_blocks );
+	if ( $post_ids ) {
+		_prime_post_caches( $post_ids, false, false );
+	}
+
 	$inner_blocks_html = '';
 	$is_list_open      = false;
 	foreach ( $inner_blocks as $inner_block ) {

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-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/post-author/edit.js

@@ -70,28 +70,30 @@ function PostAuthorEdit( {
 		<>
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
-					{ ! isDescendentOfQueryLoop && !! authors?.length && (
-						<SelectControl
-							label={ __( 'Author' ) }
-							value={ authorId }
-							options={ authors.map( ( { id, name } ) => {
-								return {
-									value: id,
-									label: name,
-								};
-							} ) }
-							onChange={ ( nextAuthorId ) => {
-								editEntityRecord(
-									'postType',
-									postType,
-									postId,
-									{
-										author: nextAuthorId,
-									}
-								);
-							} }
-						/>
-					) }
+					{ !! postId &&
+						! isDescendentOfQueryLoop &&
+						!! authors?.length && (
+							<SelectControl
+								label={ __( 'Author' ) }
+								value={ authorId }
+								options={ authors.map( ( { id, name } ) => {
+									return {
+										value: id,
+										label: name,
+									};
+								} ) }
+								onChange={ ( nextAuthorId ) => {
+									editEntityRecord(
+										'postType',
+										postType,
+										postId,
+										{
+											author: nextAuthorId,
+										}
+									);
+								} }
+							/>
+						) }
 					<ToggleControl
 						label={ __( 'Show avatar' ) }
 						checked={ showAvatar }

package/src/post-author-name/block.json

@@ -1,6 +1,7 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
+	"__experimental": true,
 	"name": "core/post-author-name",
 	"title": "Post Author Name",
 	"category": "theme",

package/src/post-comment/block.json

@@ -1,6 +1,7 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
+	"__experimental": "fse",
 	"name": "core/post-comment",
 	"title": "Post Comment (deprecated)",
 	"category": "theme",