@wordpress/block-library 9.41.0 → 9.41.1-next.v.202603102151.0

package/src/navigation/index.php

@@ -710,6 +710,12 @@ class WP_Navigation_Block_Renderer {
 				$tags                = new WP_HTML_Tag_Processor( $overlay_blocks_html );
 				$overlay_blocks_html = block_core_navigation_add_directives_to_overlay_close( $tags );
 			}
+			// Images in the overlay are hidden until the menu is opened. Pre-set
+			// fetchpriority="low" so that when wp_filter_content_tags() processes the
+			// parent template part, it sees the attribute already present and calls
+			// wp_get_loading_optimization_attributes() with fetchpriority="low", which both prevents
+			// fetchpriority="high" from being added and stops the LCP counter from being incremented.
+			$overlay_blocks_html = block_core_navigation_set_overlay_image_fetch_priority( $overlay_blocks_html );
 		}
 
 		$has_custom_overlay = ! empty( $overlay_blocks_html );
@@ -1111,6 +1117,25 @@ function block_core_navigation_add_directives_to_overlay_close( $tags ) {
 	return $tags->get_updated_html();
 }
 
+/**
+ * Sets fetchpriority="low" on all IMG tags within the navigation overlay.
+ *
+ * Images in the overlay are hidden until the menu is opened, so they should
+ * not compete with any actual LCP element image on the page.
+ *
+ * @since 7.0.0
+ *
+ * @param string $overlay_blocks_html The rendered HTML of the overlay blocks.
+ * @return string Modified HTML with fetchpriority="low" on all IMG tags.
+ */
+function block_core_navigation_set_overlay_image_fetch_priority( string $overlay_blocks_html ): string {
+	$tags = new WP_HTML_Tag_Processor( $overlay_blocks_html );
+	while ( $tags->next_tag( 'IMG' ) ) {
+		$tags->set_attribute( 'fetchpriority', 'low' );
+	}
+	return $tags->get_updated_html();
+}
+
 /**
  * Add Interactivity API directives to the navigation-submenu and page-list
  * blocks markup using the Tag Processor.
@@ -1146,8 +1171,8 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut
 		$open_on_hover       = 'hover' === $computed_visibility;
 
 		if ( $open_on_hover ) {
-			$tags->set_attribute( 'data-wp-on--mouseenter', 'actions.openMenuOnHover' );
-			$tags->set_attribute( 'data-wp-on--mouseleave', 'actions.closeMenuOnHover' );
+			$tags->set_attribute( 'data-wp-on--pointerenter', 'actions.openMenuOnHover' );
+			$tags->set_attribute( 'data-wp-on--pointerleave', 'actions.closeMenuOnHover' );
 		}
 
 		// Add directives to the toggle submenu button.

package/src/navigation/style.scss

@@ -247,7 +247,13 @@ $navigation-icon-size: 24px;
 	}
 
 	// Show submenus on hover unless they open on click.
-	&:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
+	// Restricted to true-hover devices to prevent sticky touch-hover on mobile.
+	@media (hover: hover) {
+		&:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
+			@include show-submenu;
+			min-width: 200px;
+		}
+	}
 	// Keep submenus open when focus is within.
 	&:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
 	// Show submenus on click.

package/src/navigation/view.js

@@ -82,7 +82,12 @@ const { state, actions } = store(
 			},
 		},
 		actions: {
-			openMenuOnHover() {
+			openMenuOnHover( event ) {
+				// Pointer events from touch should not open the submenu on hover;
+				// touch devices toggle via the click action instead.
+				if ( event?.pointerType === 'touch' ) {
+					return;
+				}
 				const { type, overlayOpenedBy } = getContext();
 				if (
 					type === 'submenu' &&
@@ -93,7 +98,10 @@ const { state, actions } = store(
 					actions.openMenu( 'hover' );
 				}
 			},
-			closeMenuOnHover() {
+			closeMenuOnHover( event ) {
+				if ( event?.pointerType === 'touch' ) {
+					return;
+				}
 				const { type, overlayOpenedBy } = getContext();
 				if (
 					type === 'submenu' &&
@@ -128,6 +136,10 @@ const { state, actions } = store(
 				if ( menuOpenedBy.click || menuOpenedBy.focus ) {
 					actions.closeMenu( 'click' );
 					actions.closeMenu( 'focus' );
+					// Also clear hover in case it was set by a synthetic pointerenter
+					// on touch (e.g. the browser-fired mouseenter-equivalent before
+					// the click event), ensuring the submenu fully closes.
+					actions.closeMenu( 'hover' );
 				} else {
 					ctx.previousFocus = ref;
 					actions.openMenu( 'click' );

package/src/navigation-link/block.json

@@ -85,6 +85,11 @@
 			"clientNavigation": true
 		}
 	},
+	"selectors": {
+		"states": {
+			"@current": ".wp-block-navigation .current-menu-item"
+		}
+	},
 	"editorStyle": "wp-block-navigation-link-editor",
 	"style": "wp-block-navigation-link"
 }

package/src/navigation-link/index.php

@@ -485,4 +485,4 @@ add_action( 'init', 'register_block_core_navigation_link' );
  * Creates all variations for post types / taxonomies dynamically (= each time when variations are requested).
  * Do not use variation_callback, to also account for unregistering post types/taxonomies later on.
  */
-add_action( 'get_block_type_variations', 'block_core_navigation_link_filter_variations', 10, 2 );
+add_filter( 'get_block_type_variations', 'block_core_navigation_link_filter_variations', 10, 2 );

package/src/paragraph/edit.js

@@ -21,7 +21,7 @@ import {
 	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { getBlockSupport } from '@wordpress/blocks';
-import { formatLtr } from '@wordpress/icons';
+import { formatLTR } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
@@ -32,7 +32,7 @@ function ParagraphRTLControl( { direction, setDirection } ) {
 	return (
 		isRTL() && (
 			<ToolbarButton
-				icon={ formatLtr }
+				icon={ formatLTR }
 				title={ _x( 'Left to right', 'editor button' ) }
 				isActive={ direction === 'ltr' }
 				onClick={ () => {

package/src/playlist/edit.js

@@ -38,42 +38,10 @@ import { createBlock } from '@wordpress/blocks';
 import { Caption } from '../utils/caption';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import { WaveformPlayer } from '../utils/waveform-player';
+import { getTrackAttributes } from './utils';
 
 const ALLOWED_MEDIA_TYPES = [ 'audio' ];
 
-/**
- * Transform media library data into track block attributes.
- *
- * @param {Object} media - Media object from the media library.
- * @return {Object} Track attributes for the playlist-track block.
- */
-function getTrackAttributes( media ) {
-	return {
-		id: media.id || media.url, // Attachment ID or URL.
-		uniqueId: uuid(), // Unique ID for the track.
-		src: media.url,
-		title: media.title,
-		artist:
-			media.artist ||
-			media?.meta?.artist ||
-			media?.media_details?.artist ||
-			__( 'Unknown artist' ),
-		album:
-			media.album ||
-			media?.meta?.album ||
-			media?.media_details?.album ||
-			__( 'Unknown album' ),
-		length: media?.fileLength || media?.media_details?.length_formatted,
-		// Prevent using the default media attachment icon as the track image.
-		// Note: Image is not available when a new track is uploaded.
-		image:
-			media?.image?.src &&
-			media?.image?.src.endsWith( '/images/media/audio.svg' )
-				? ''
-				: media?.image?.src,
-	};
-}
-
 const PlaylistEdit = ( {
 	attributes,
 	setAttributes,
@@ -434,4 +402,3 @@ const PlaylistEdit = ( {
 };
 
 export default PlaylistEdit;
-export { getTrackAttributes };

package/src/playlist/style.scss

@@ -4,6 +4,11 @@
 $waveform-player-height: 100px;
 
 .wp-block-playlist {
+	// Clip content to respect border-radius.
+	// `overflow: hidden` is a fallback for browsers that don't support `overflow: clip`.
+	overflow: hidden;
+	overflow: clip;
+
 	// Main waveform player container.
 	.wp-block-playlist__waveform-player {
 		width: 100%;

package/src/playlist/test/edit.js

@@ -5,7 +5,7 @@
 /**
  * Internal dependencies
  */
-import { getTrackAttributes } from '../edit';
+import { getTrackAttributes } from '../utils';
 
 // Mock uuid to return predictable values.
 jest.mock( 'uuid', () => ( {

package/src/playlist/utils.js

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import { v4 as uuid } from 'uuid';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Transform media library data into track block attributes.
+ *
+ * @param {Object} media - Media object from the media library.
+ * @return {Object} Track attributes for the playlist-track block.
+ */
+export function getTrackAttributes( media ) {
+	return {
+		id: media.id || media.url, // Attachment ID or URL.
+		uniqueId: uuid(), // Unique ID for the track.
+		src: media.url,
+		title: media.title,
+		artist:
+			media.artist ||
+			media?.meta?.artist ||
+			media?.media_details?.artist ||
+			__( 'Unknown artist' ),
+		album:
+			media.album ||
+			media?.meta?.album ||
+			media?.media_details?.album ||
+			__( 'Unknown album' ),
+		length: media?.fileLength || media?.media_details?.length_formatted,
+		// Prevent using the default media attachment icon as the track image.
+		// Note: Image is not available when a new track is uploaded.
+		image:
+			media?.image?.src &&
+			media?.image?.src.endsWith( '/images/media/audio.svg' )
+				? ''
+				: media?.image?.src,
+	};
+}

package/src/post-excerpt/block.json

@@ -7,9 +7,6 @@
 	"description": "Display the excerpt.",
 	"textdomain": "default",
 	"attributes": {
-		"textAlign": {
-			"type": "string"
-		},
 		"moreText": {
 			"type": "string",
 			"role": "content"
@@ -46,6 +43,7 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"textAlign": true,
 			"textColumns": true,
 			"__experimentalFontFamily": true,
 			"__experimentalFontWeight": true,

package/src/post-excerpt/deprecated.js

@@ -0,0 +1,84 @@
+/**
+ * Internal dependencies
+ */
+import migrateTextAlign from '../utils/migrate-text-align';
+
+const v1 = {
+	attributes: {
+		textAlign: {
+			type: 'string',
+		},
+		moreText: {
+			type: 'string',
+			role: 'content',
+		},
+		showMoreOnNewLine: {
+			type: 'boolean',
+			default: true,
+		},
+		excerptLength: {
+			type: 'number',
+			default: 55,
+		},
+	},
+	supports: {
+		anchor: true,
+		html: false,
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+				link: true,
+			},
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			textColumns: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		interactivity: {
+			clientNavigation: true,
+		},
+		__experimentalBorder: {
+			radius: true,
+			color: true,
+			width: true,
+			style: true,
+			__experimentalDefaultControls: {
+				radius: true,
+				color: true,
+				width: true,
+				style: true,
+			},
+		},
+	},
+	save() {
+		return null;
+	},
+	migrate: migrateTextAlign,
+	isEligible( attributes ) {
+		return (
+			!! attributes.textAlign ||
+			!! attributes.className?.match(
+				/\bhas-text-align-(left|center|right)\b/
+			)
+		);
+	},
+};
+
+export default [ v1 ];

package/src/post-excerpt/edit.js

@@ -9,13 +9,10 @@ import clsx from 'clsx';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useMemo } from '@wordpress/element';
 import {
-	AlignmentToolbar,
-	BlockControls,
 	InspectorControls,
 	RichText,
 	Warning,
 	useBlockProps,
-	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import {
 	ToggleControl,
@@ -33,17 +30,19 @@ import {
 	useCanEditEntity,
 	useToolsPanelDropdownMenuProps,
 } from '../utils/hooks';
+import useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';
 
 const ELLIPSIS = '…';
 
-export default function PostExcerptEditor( {
-	attributes: { textAlign, moreText, showMoreOnNewLine, excerptLength },
-	setAttributes,
-	isSelected,
-	context: { postId, postType, queryId },
-} ) {
-	const blockEditingMode = useBlockEditingMode();
-	const showControls = blockEditingMode === 'default';
+export default function PostExcerptEditor( props ) {
+	const {
+		attributes: { moreText, showMoreOnNewLine, excerptLength },
+		setAttributes,
+		isSelected,
+		context: { postId, postType, queryId },
+	} = props;
+	useDeprecatedTextAlign( props );
+
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const userCanEdit = useCanEditEntity( 'postType', postType, postId );
 	const [
@@ -83,11 +82,7 @@ export default function PostExcerptEditor( {
 	const isEditable =
 		userCanEdit && ! isDescendentOfQueryLoop && postTypeSupportsExcerpts;
 
-	const blockProps = useBlockProps( {
-		className: clsx( {
-			[ `has-text-align-${ textAlign }` ]: textAlign,
-		} ),
-	} );
+	const blockProps = useBlockProps();
 
 	/**
 	 * translators: If your word count is based on single characters (e.g. East Asian characters),
@@ -114,19 +109,9 @@ export default function PostExcerptEditor( {
 
 	if ( ! postType || ! postId ) {
 		return (
-			<>
-				<BlockControls>
-					<AlignmentToolbar
-						value={ textAlign }
-						onChange={ ( newAlign ) =>
-							setAttributes( { textAlign: newAlign } )
-						}
-					/>
-				</BlockControls>
-				<div { ...blockProps }>
-					<p>{ __( 'This block will display the excerpt.' ) }</p>
-				</div>
-			</>
+			<div { ...blockProps }>
+				<p>{ __( 'This block will display the excerpt.' ) }</p>
+			</div>
 		);
 	}
 	if ( isProtected && ! userCanEdit ) {
@@ -225,16 +210,6 @@ export default function PostExcerptEditor( {
 	);
 	return (
 		<>
-			{ showControls && (
-				<BlockControls>
-					<AlignmentToolbar
-						value={ textAlign }
-						onChange={ ( newAlign ) =>
-							setAttributes( { textAlign: newAlign } )
-						}
-					/>
-				</BlockControls>
-			) }
 			<InspectorControls>
 				<ToolsPanel
 					label={ __( 'Settings' ) }

package/src/post-excerpt/index.js

@@ -10,6 +10,7 @@ import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import transforms from './transforms';
+import deprecated from './deprecated';
 
 const { name } = metadata;
 export { metadata, name };
@@ -18,6 +19,7 @@ export const settings = {
 	icon,
 	transforms,
 	edit,
+	deprecated,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/private-apis.js

@@ -3,6 +3,7 @@
  */
 import { default as BlockKeyboardShortcuts } from './block-keyboard-shortcuts';
 import { NAVIGATION_OVERLAY_TEMPLATE_PART_AREA } from './navigation/constants';
+import { NavigationLinkUI } from './navigation/edit/navigation-link-ui';
 import { lock } from './lock-unlock';
 
 /**
@@ -12,4 +13,5 @@ export const privateApis = {};
 lock( privateApis, {
 	BlockKeyboardShortcuts,
 	NAVIGATION_OVERLAY_TEMPLATE_PART_AREA,
+	NavigationLinkUI,
 } );

package/src/shortcode/block.json

@@ -17,7 +17,8 @@
 		"className": false,
 		"customClassName": false,
 		"html": false,
-		"customCSS": false
+		"customCSS": false,
+		"visibility": false
 	},
 	"editorStyle": "wp-block-shortcode-editor"
 }

package/src/template-part/edit/index.js

@@ -128,11 +128,13 @@ export default function TemplatePartEdit( {
 		onNavigateToEntityRecord,
 		title,
 		canUserEdit,
+		canUserEditBlock,
 	} = useSelect(
 		( select ) => {
 			const { getEditedEntityRecord, hasFinishedResolution } =
 				select( coreStore );
-			const { getBlockCount, getSettings } = select( blockEditorStore );
+			const { getBlockCount, getSettings, canEditBlock } =
+				select( blockEditorStore );
 
 			const getEntityArgs = [
 				'postType',
@@ -170,6 +172,7 @@ export default function TemplatePartEdit( {
 					getSettings().onNavigateToEntityRecord,
 				title: entityRecord?.title,
 				canUserEdit: !! _canUserEdit,
+				canUserEditBlock: canEditBlock( clientId ),
 			};
 		},
 		[ templatePartId, attributes.area, clientId ]
@@ -284,6 +287,7 @@ export default function TemplatePartEdit( {
 						// Only enable for single selection that matches the current block.
 						// Ensures menu item doesn't render multiple times.
 						if (
+							! canUserEditBlock ||
 							! (
 								selectedClientIds.length === 1 &&
 								clientId === selectedClientIds[ 0 ]