@wordpress/block-library 9.20.0 → 9.22.0

package/src/image/edit.js

@@ -116,9 +116,9 @@ export function ImageEdit( {
 	// Only observe the max width from the parent container when the parent layout is not flex nor grid.
 	// This won't work for them because the container width changes with the image.
 	// TODO: Find a way to observe the container width for flex and grid layouts.
+	const layoutType = parentLayout?.type || parentLayout?.default?.type;
 	const isMaxWidthContainerWidth =
-		! parentLayout ||
-		( parentLayout.type !== 'flex' && parentLayout.type !== 'grid' );
+		! layoutType || ( layoutType !== 'flex' && layoutType !== 'grid' );
 	const [ maxWidthObserver, maxContentWidth ] = useMaxWidthObserver();
 
 	const [ placeholderResizeListener, { width: placeholderWidth } ] =
@@ -452,7 +452,7 @@ export function ImageEdit( {
 					context={ context }
 					clientId={ clientId }
 					blockEditingMode={ blockEditingMode }
-					parentLayoutType={ parentLayout?.type }
+					parentLayoutType={ layoutType }
 					maxContentWidth={ maxContentWidth }
 				/>
 				<MediaPlaceholder

package/src/image/image.js

@@ -44,7 +44,7 @@ import { getFilename } from '@wordpress/url';
 import { getBlockBindingsSource, switchToBlockType } from '@wordpress/blocks';
 import { crop, overlayText, upload, chevronDown } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
-import { store as coreStore, useEntityProp } from '@wordpress/core-data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -301,7 +301,6 @@ export default function Image( {
 	}, [ imageElement ] );
 	const setRefs = useMergeRefs( [ setImageElement, setResizeObserved ] );
 	const { allowResize = true } = context;
-	const { getBlock, getSettings } = useSelect( blockEditorStore );
 
 	const image = useSelect(
 		( select ) =>
@@ -313,7 +312,7 @@ export default function Image( {
 
 	const { canInsertCover, imageEditing, imageSizes, maxWidth } = useSelect(
 		( select ) => {
-			const { getBlockRootClientId, canInsertBlockType } =
+			const { getBlockRootClientId, canInsertBlockType, getSettings } =
 				select( blockEditorStore );
 
 			const rootClientId = getBlockRootClientId( clientId );
@@ -331,10 +330,13 @@ export default function Image( {
 		},
 		[ clientId ]
 	);
+	const { getBlock, getSettings } = useSelect( blockEditorStore );
 
 	const { replaceBlocks, toggleSelection } = useDispatch( blockEditorStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
+	const { editEntityRecord } = useDispatch( coreStore );
+
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isWideAligned = [ 'wide', 'full' ].includes( align );
 	const [
@@ -381,7 +383,7 @@ export default function Image( {
 			.then( ( blob ) => setExternalBlob( blob ) )
 			// Do nothing, cannot upload.
 			.catch( () => {} );
-	}, [ id, url, isSingleSelected, externalBlob ] );
+	}, [ id, url, isSingleSelected, externalBlob, getSettings ] );
 
 	// Get naturalWidth and naturalHeight from image, and fall back to loaded natural
 	// width and height. This resolves an issue in Safari where the loaded natural
@@ -891,13 +893,6 @@ export default function Image( {
 	const { postType, postId, queryId } = context;
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 
-	const [ , setFeaturedImage ] = useEntityProp(
-		'postType',
-		postType,
-		'featured_media',
-		postId
-	);
-
 	let img =
 		temporaryURL && hasImageErrored ? (
 			// Show a placeholder during upload when the blob URL can't be loaded. This can
@@ -1103,7 +1098,9 @@ export default function Image( {
 	 * Set the post's featured image with the current image.
 	 */
 	const setPostFeatureImage = () => {
-		setFeaturedImage( id );
+		editEntityRecord( 'postType', postType, postId, {
+			featured_media: id,
+		} );
 		createSuccessNotice( __( 'Post featured image updated.' ), {
 			type: 'snackbar',
 		} );

package/src/latest-comments/index.php

@@ -42,7 +42,7 @@ function wp_latest_comments_draft_or_post_title( $post = 0 ) {
  *
  * @return string Returns the post content with latest comments added.
  */
-function render_block_core_latest_comments( $attributes = array() ) {
+function render_block_core_latest_comments( $attributes ) {
 	$comments = get_comments(
 		/** This filter is documented in wp-includes/widgets/class-wp-widget-recent-comments.php */
 		apply_filters(

package/src/latest-posts/index.php

@@ -33,6 +33,9 @@ function block_core_latest_posts_get_excerpt_length() {
  *
  * @since 5.0.0
  *
+ * @global WP_Post $post                                   Global post object.
+ * @global int     $block_core_latest_posts_excerpt_length Excerpt length set by the Latest Posts core block.
+ *
  * @param array $attributes The block attributes.
  *
  * @return string Returns the post content with latest posts added.

package/src/media-text/style.scss

@@ -106,7 +106,6 @@
 
 /* Image fill for versions 8 and onwards */
 .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media {
-	position: relative;
 	height: 100%;
 	min-height: 250px;
 }
@@ -117,7 +116,6 @@
 }
 
 .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media img {
-	position: absolute;
 	width: 100%;
 	height: 100%;
 	object-fit: cover;

package/src/navigation/edit/index.js

@@ -143,6 +143,7 @@ function ColorTools( {
 						onColorChange: setTextColor,
 						resetAllFilter: () => setTextColor(),
 						clearable: true,
+						enableAlpha: true,
 					},
 					{
 						colorValue: backgroundColor.color,
@@ -150,6 +151,7 @@ function ColorTools( {
 						onColorChange: setBackgroundColor,
 						resetAllFilter: () => setBackgroundColor(),
 						clearable: true,
+						enableAlpha: true,
 					},
 					{
 						colorValue: overlayTextColor.color,
@@ -157,6 +159,7 @@ function ColorTools( {
 						onColorChange: setOverlayTextColor,
 						resetAllFilter: () => setOverlayTextColor(),
 						clearable: true,
+						enableAlpha: true,
 					},
 					{
 						colorValue: overlayBackgroundColor.color,
@@ -164,6 +167,7 @@ function ColorTools( {
 						onColorChange: setOverlayBackgroundColor,
 						resetAllFilter: () => setOverlayBackgroundColor(),
 						clearable: true,
+						enableAlpha: true,
 					},
 				] }
 				panelId={ clientId }

package/src/navigation/index.php

@@ -819,7 +819,7 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut
 	) ) {
 		// Add directives to the parent `<li>`.
 		$tags->set_attribute( 'data-wp-interactive', 'core/navigation' );
-		$tags->set_attribute( 'data-wp-context', '{ "submenuOpenedBy": { "click": false, "hover": false, "focus": false }, "type": "submenu", "modal": null }' );
+		$tags->set_attribute( 'data-wp-context', '{ "submenuOpenedBy": { "click": false, "hover": false, "focus": false }, "type": "submenu", "modal": null, "previousFocus": null }' );
 		$tags->set_attribute( 'data-wp-watch', 'callbacks.initMenu' );
 		$tags->set_attribute( 'data-wp-on--focusout', 'actions.handleMenuFocusout' );
 		$tags->set_attribute( 'data-wp-on--keydown', 'actions.handleMenuKeydown' );

package/src/navigation/view.js

@@ -116,7 +116,8 @@ const { state, actions } = store(
 					getContext();
 				if ( state.menuOpenedBy.click ) {
 					// If Escape close the menu.
-					if ( event?.key === 'Escape' ) {
+					if ( event.key === 'Escape' ) {
+						event.stopPropagation(); // Keeps ancestor menus open.
 						actions.closeMenu( 'click' );
 						actions.closeMenu( 'focus' );
 						return;

package/src/navigation-link/block.json

@@ -35,9 +35,6 @@
 		"url": {
 			"type": "string"
 		},
-		"title": {
-			"type": "string"
-		},
 		"kind": {
 			"type": "string"
 		},

package/src/navigation-link/edit.js

@@ -26,6 +26,7 @@ import {
 	store as blockEditorStore,
 	getColorClassName,
 	useInnerBlocksProps,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { isURL, prependHTTP, safeDecodeURI } from '@wordpress/url';
 import { useState, useEffect, useRef } from '@wordpress/element';
@@ -43,6 +44,10 @@ import { updateAttributes } from './update-attributes';
 import { getColors } from '../navigation/edit/utils';
 
 const DEFAULT_BLOCK = { name: 'core/navigation-link' };
+const NESTING_BLOCK_NAMES = [
+	'core/navigation-link',
+	'core/navigation-submenu',
+];
 
 /**
  * A React hook to determine if it's dragging within the target element.
@@ -95,19 +100,29 @@ const useIsDraggingWithin = ( elementRef ) => {
 	return isDraggingWithin;
 };
 
-const useIsInvalidLink = ( kind, type, id ) => {
+const useIsInvalidLink = ( kind, type, id, enabled ) => {
 	const isPostType =
 		kind === 'post-type' || type === 'post' || type === 'page';
 	const hasId = Number.isInteger( id );
+	const blockEditingMode = useBlockEditingMode();
+
 	const postStatus = useSelect(
 		( select ) => {
 			if ( ! isPostType ) {
 				return null;
 			}
+
+			// Fetching the posts status is an "expensive" operation. Especially for sites with large navigations.
+			// When the block is rendered in a template or other disabled contexts we can skip this check in order
+			// to avoid all these additional requests that don't really add any value in that mode.
+			if ( blockEditingMode === 'disabled' || ! enabled ) {
+				return null;
+			}
+
 			const { getEntityRecord } = select( coreStore );
 			return getEntityRecord( 'postType', type, id )?.status;
 		},
-		[ isPostType, type, id ]
+		[ isPostType, blockEditingMode, enabled, type, id ]
 	);
 
 	// Check Navigation Link validity if:
@@ -159,7 +174,7 @@ function getMissingText( type ) {
  * Consider reusing this components for both blocks.
  */
 function Controls( { attributes, setAttributes, setIsLabelFieldFocused } ) {
-	const { label, url, description, title, rel } = attributes;
+	const { label, url, description, rel } = attributes;
 	return (
 		<ToolsPanel label={ __( 'Settings' ) }>
 			<ToolsPanelItem
@@ -224,27 +239,6 @@ function Controls( { attributes, setAttributes, setIsLabelFieldFocused } ) {
 				/>
 			</ToolsPanelItem>
 
-			<ToolsPanelItem
-				hasValue={ () => !! title }
-				label={ __( 'Title attribute' ) }
-				onDeselect={ () => setAttributes( { title: '' } ) }
-				isShownByDefault
-			>
-				<TextControl
-					__nextHasNoMarginBottom
-					__next40pxDefaultSize
-					label={ __( 'Title attribute' ) }
-					value={ title || '' }
-					onChange={ ( titleValue ) => {
-						setAttributes( { title: titleValue } );
-					} }
-					autoComplete="off"
-					help={ __(
-						'Additional information to help clarify the purpose of the link.'
-					) }
-				/>
-			</ToolsPanelItem>
-
 			<ToolsPanelItem
 				hasValue={ () => !! rel }
 				label={ __( 'Rel attribute' ) }
@@ -280,8 +274,6 @@ export default function NavigationLinkEdit( {
 	clientId,
 } ) {
 	const { id, label, type, url, description, kind } = attributes;
-
-	const [ isInvalid, isDraft ] = useIsInvalidLink( kind, type, id );
 	const { maxNestingLevel } = context;
 
 	const {
@@ -313,6 +305,7 @@ export default function NavigationLinkEdit( {
 		isTopLevelLink,
 		isParentOfSelectedBlock,
 		hasChildren,
+		validateLinkStatus,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -321,28 +314,48 @@ export default function NavigationLinkEdit( {
 				getBlockRootClientId,
 				hasSelectedInnerBlock,
 				getBlockParentsByBlockName,
+				getSelectedBlockClientId,
 			} = select( blockEditorStore );
+			const rootClientId = getBlockRootClientId( clientId );
+			const isTopLevel =
+				getBlockName( rootClientId ) === 'core/navigation';
+			const selectedBlockClientId = getSelectedBlockClientId();
+			const rootNavigationClientId = isTopLevel
+				? rootClientId
+				: getBlockParentsByBlockName(
+						clientId,
+						'core/navigation'
+				  )[ 0 ];
+
+			// Enable when the root Navigation block is selected or any of its inner blocks.
+			const enableLinkStatusValidation =
+				selectedBlockClientId === rootNavigationClientId ||
+				hasSelectedInnerBlock( rootNavigationClientId, true );
 
 			return {
 				isAtMaxNesting:
-					getBlockParentsByBlockName( clientId, [
-						'core/navigation-link',
-						'core/navigation-submenu',
-					] ).length >= maxNestingLevel,
-				isTopLevelLink:
-					getBlockName( getBlockRootClientId( clientId ) ) ===
-					'core/navigation',
+					getBlockParentsByBlockName( clientId, NESTING_BLOCK_NAMES )
+						.length >= maxNestingLevel,
+				isTopLevelLink: isTopLevel,
 				isParentOfSelectedBlock: hasSelectedInnerBlock(
 					clientId,
 					true
 				),
 				hasChildren: !! getBlockCount( clientId ),
+				validateLinkStatus: enableLinkStatusValidation,
 			};
 		},
 		[ clientId, maxNestingLevel ]
 	);
 	const { getBlocks } = useSelect( blockEditorStore );
 
+	const [ isInvalid, isDraft ] = useIsInvalidLink(
+		kind,
+		type,
+		id,
+		validateLinkStatus
+	);
+
 	/**
 	 * Transform to submenu block.
 	 */

package/src/navigation-link/index.php

@@ -13,7 +13,7 @@
  *
  * @param  array $context     Navigation block context.
  * @param  array $attributes  Block attributes.
- * @param  bool  $is_sub_menu Whether the link is part of a sub-menu.
+ * @param  bool  $is_sub_menu Whether the link is part of a sub-menu. Default false.
  * @return array Colors CSS classes and inline styles.
  */
 function block_core_navigation_link_build_css_colors( $context, $attributes, $is_sub_menu = false ) {
@@ -249,10 +249,6 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 		$html .= ' rel="nofollow"';
 	}
 
-	if ( isset( $attributes['title'] ) ) {
-		$html .= ' title="' . esc_attr( $attributes['title'] ) . '"';
-	}
-
 	// End appending HTML attributes to anchor tag.
 
 	// Start anchor tag content.

package/src/navigation-link/transforms.js

@@ -115,13 +115,12 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/buttons' ],
-			transform: ( { label, url, rel, title, opensInNewTab } ) => {
+			transform: ( { label, url, rel, opensInNewTab } ) => {
 				return createBlock( 'core/buttons', {}, [
 					createBlock( 'core/button', {
 						text: label,
 						url,
 						rel,
-						title,
 						linkTarget: opensInNewTab ? '_blank' : undefined,
 					} ),
 				] );

package/src/navigation-link/update-attributes.js

@@ -19,7 +19,6 @@ import { safeDecodeURI } from '@wordpress/url';
  * @property {number}               [id]            A post or term id.
  * @property {boolean}              [opensInNewTab] Sets link target to _blank when true.
  * @property {string}               [url]           Link href.
- * @property {string}               [title]         Link title attribute.
  */
 /**
  * Link Control onChange handler that updates block attributes when a setting is changed.

package/src/navigation-submenu/block.json

@@ -30,9 +30,6 @@
 		"url": {
 			"type": "string"
 		},
-		"title": {
-			"type": "string"
-		},
 		"kind": {
 			"type": "string"
 		},

package/src/navigation-submenu/edit.js

@@ -123,7 +123,6 @@ const useIsDraggingWithin = ( elementRef ) => {
  * @property {number}               [id]            A post or term id.
  * @property {boolean}              [opensInNewTab] Sets link target to _blank when true.
  * @property {string}               [url]           Link href.
- * @property {string}               [title]         Link title attribute.
  */
 
 export default function NavigationSubmenuEdit( {
@@ -135,7 +134,7 @@ export default function NavigationSubmenuEdit( {
 	context,
 	clientId,
 } ) {
-	const { label, url, description, rel, title } = attributes;
+	const { label, url, description, rel } = attributes;
 
 	const { showSubmenuIcon, maxNestingLevel, openSubmenusOnClick } = context;
 
@@ -392,7 +391,6 @@ export default function NavigationSubmenuEdit( {
 							label: '',
 							url: '',
 							description: '',
-							title: '',
 							rel: '',
 						} );
 					} }
@@ -458,27 +456,6 @@ export default function NavigationSubmenuEdit( {
 						/>
 					</ToolsPanelItem>
 
-					<ToolsPanelItem
-						label={ __( 'Title attribute' ) }
-						isShownByDefault
-						hasValue={ () => !! title }
-						onDeselect={ () => setAttributes( { title: '' } ) }
-					>
-						<TextControl
-							__nextHasNoMarginBottom
-							__next40pxDefaultSize
-							value={ title || '' }
-							onChange={ ( titleValue ) => {
-								setAttributes( { title: titleValue } );
-							} }
-							label={ __( 'Title attribute' ) }
-							autoComplete="off"
-							help={ __(
-								'Additional information to help clarify the purpose of the link.'
-							) }
-						/>
-					</ToolsPanelItem>
-
 					<ToolsPanelItem
 						label={ __( 'Rel attribute' ) }
 						isShownByDefault

package/src/navigation-submenu/index.php

@@ -169,10 +169,6 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 			$html .= ' rel="nofollow"';
 		}
 
-		if ( isset( $attributes['title'] ) ) {
-			$html .= ' title="' . esc_attr( $attributes['title'] ) . '"';
-		}
-
 		$html .= '>';
 		// End appending HTML attributes to anchor tag.
 

package/src/post-comments-count/block.json

@@ -1,7 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
-	"__experimental": "fse",
 	"name": "core/post-comments-count",
 	"title": "Comments Count",
 	"category": "theme",

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

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/post-comments-count` block on the server.
  *
+ * @since 6.9.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -33,6 +35,8 @@ function render_block_core_post_comments_count( $attributes, $content, $block )
 
 /**
  * Registers the `core/post-comments-count` block on the server.
+ *
+ * @since 6.9.0
  */
 function register_block_core_post_comments_count() {
 	register_block_type_from_metadata(

package/src/post-comments-form/style.scss

@@ -82,4 +82,9 @@
 			margin-left: 0.5em;
 		}
 	}
+
+	// Override the 100% width derived from the Button block
+	input[type="submit"] {
+		width: auto;
+	}
 }

package/src/post-comments-link/block.json

@@ -1,7 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
-	"__experimental": "fse",
 	"name": "core/post-comments-link",
 	"title": "Comments Link",
 	"category": "theme",

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

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/post-comments-link` block on the server.
  *
+ * @since 6.9.0
+ *
  * @param  array    $attributes Block attributes.
  * @param  string   $content    Block default content.
  * @param  WP_Block $block      Block instance.
@@ -59,6 +61,8 @@ function render_block_core_post_comments_link( $attributes, $content, $block ) {
 
 /**
  * Registers the `core/post-comments-link` block on the server.
+ *
+ * @since 6.9.0
  */
 function register_block_core_post_comments_link() {
 	register_block_type_from_metadata(