@wordpress/block-library 9.48.1 → 10.0.0

package/src/navigation/edit/index.js

@@ -288,16 +288,6 @@ function Navigation( {
 		[ setAttributes ]
 	);
 
-	// Reset submenuVisibility to default if orientation changes to horizontal while "always" is selected
-	useEffect( () => {
-		if ( orientation === 'horizontal' && submenuVisibility === 'always' ) {
-			setAttributes( {
-				submenuVisibility: 'hover',
-				showSubmenuIcon: true,
-			} );
-		}
-	}, [ orientation, submenuVisibility, setAttributes ] );
-
 	const recursionId = `navigationMenu/${ ref }`;
 
 	// Skip recursion check when in preview mode.
@@ -372,6 +362,31 @@ function Navigation( {
 		innerBlocks,
 	} = useInnerBlocks( clientId );
 
+	const {
+		replaceInnerBlocks,
+		selectBlock,
+		__unstableMarkNextChangeAsNotPersistent,
+	} = useDispatch( blockEditorStore );
+
+	// Reset submenuVisibility to default if orientation changes to horizontal
+	// while "always" is selected, but only when the Navigation block or one
+	// of its inner blocks is being edited. Rendering related template parts
+	// should not mark them dirty.
+	useEffect( () => {
+		if ( orientation === 'horizontal' && submenuVisibility === 'always' ) {
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( {
+				submenuVisibility: 'hover',
+				showSubmenuIcon: true,
+			} );
+		}
+	}, [
+		orientation,
+		submenuVisibility,
+		setAttributes,
+		__unstableMarkNextChangeAsNotPersistent,
+	] );
+
 	// Use a ref to store whether we've confirmed a page-list has submenus.
 	// Once confirmed, we don't need to keep checking the page-list blocks.
 	const hasPageListWithSubmenuRef = useRef( false );
@@ -429,12 +444,6 @@ function Navigation( {
 				templatePart.area === NAVIGATION_OVERLAY_TEMPLATE_PART_AREA
 		) ?? false;
 
-	const {
-		replaceInnerBlocks,
-		selectBlock,
-		__unstableMarkNextChangeAsNotPersistent,
-	} = useDispatch( blockEditorStore );
-
 	const [ isResponsiveMenuOpen, setResponsiveMenuVisibility ] =
 		useState( false );
 

package/src/navigation/edit/navigation-menu-name-control.js

@@ -14,7 +14,6 @@ export default function NavigationMenuNameControl() {
 
 	return (
 		<TextControl
-			__next40pxDefaultSize
 			label={ __( 'Menu name' ) }
 			value={ title }
 			onChange={ updateTitle }

package/src/navigation/index.php

@@ -1557,6 +1557,64 @@ function register_block_core_navigation() {
 
 add_action( 'init', 'register_block_core_navigation' );
 
+/**
+ * Adds the Navigation block state class to inner list containers.
+ *
+ * State block support adds the generated `wp-states-*` class to the outer
+ * block wrapper. The Navigation block renders its menu items inside an inner
+ * `wp-block-navigation__container` list, so the same state class is also needed
+ * there for state styles to apply directly to the menu list.
+ *
+ * Currently this is required as a workaround because of how difficult it is for nav
+ * child blocks to inherit styles through the complex responsive nav block html. The
+ * bug in https://github.com/WordPress/gutenberg/issues/62690 also prevents inheritance.
+ *
+ * @since 7.1.0
+ *
+ * @param string $block_content The block content.
+ * @param array  $block         The full block, including name and attributes.
+ * @return string The updated block content.
+ */
+function block_core_navigation_add_state_class_to_container( $block_content, $block ) {
+	if ( 'core/navigation' !== ( $block['blockName'] ?? null ) || empty( $block_content ) ) {
+		return $block_content;
+	}
+
+	$processor = new WP_HTML_Tag_Processor( $block_content );
+	if ( ! $processor->next_tag() ) {
+		return $block_content;
+	}
+
+	$class_attribute = $processor->get_attribute( 'class' );
+	if ( ! is_string( $class_attribute ) || ! preg_match( '/\bwp-states-[a-f0-9]{8}\b/', $class_attribute, $matches ) ) {
+		return $block_content;
+	}
+
+	$state_class = $matches[0];
+	while ( $processor->next_tag() ) {
+		// Custom overlay content can include nested Navigation blocks.
+		// Avoid applying the outer Navigation state class to an inner nav block.
+		if ( $processor->has_class( 'wp-block-navigation' ) && ! $processor->has_class( 'wp-block-navigation__container' ) ) {
+			break;
+		}
+
+		if ( ! $processor->has_class( 'wp-block-navigation__container' ) ) {
+			continue;
+		}
+
+		$class_attribute = $processor->get_attribute( 'class' );
+		if ( is_string( $class_attribute ) && preg_match( '/\bwp-states-[a-f0-9]{8}\b/', $class_attribute ) ) {
+			continue;
+		}
+
+		$processor->add_class( $state_class );
+	}
+
+	return $processor->get_updated_html();
+}
+
+add_filter( 'render_block', 'block_core_navigation_add_state_class_to_container', 11, 2 );
+
 /**
  * Filter that changes the parsed attribute values of navigation blocks contain typographic presets to contain the values directly.
  *

package/src/navigation-link/README.md

@@ -74,7 +74,7 @@ _Defined via the [`usesContext` and `providesContext`](https://developer.wordpre
 _Defined via the [`selectors`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-selectors/) property in block.json._
 
 - **states**:
-  - @current: `.wp-block-navigation .current-menu-item`
+  - -current: `.wp-block-navigation .current-menu-item`
 
 ## Block Markup
 

package/src/navigation-link/block.json

@@ -87,7 +87,7 @@
 	},
 	"selectors": {
 		"states": {
-			"@current": ".wp-block-navigation .current-menu-item"
+			"-current": ".wp-block-navigation .current-menu-item"
 		}
 	},
 	"editorStyle": "wp-block-navigation-link-editor",

package/src/navigation-link/link-ui/page-creator.js

@@ -128,7 +128,6 @@ export function LinkUIPageCreator( {
 				<form onSubmit={ createPage }>
 					<VStack spacing={ 4 }>
 						<TextControl
-							__next40pxDefaultSize
 							label={ __( 'Title' ) }
 							onChange={ setTitle }
 							placeholder={ __( 'No title' ) }

package/src/navigation-link/shared/controls.js

@@ -178,7 +178,6 @@ export function Controls( {
 				isShownByDefault
 			>
 				<TextControl
-					__next40pxDefaultSize
 					label={ __( 'Text' ) }
 					value={ label ? stripHTML( label ) : '' }
 					onChange={ ( labelValue ) => {
@@ -292,7 +291,6 @@ export function Controls( {
 				isShownByDefault={ ! isContentOnly }
 			>
 				<TextControl
-					__next40pxDefaultSize
 					label={ __( 'Rel attribute' ) }
 					value={ rel || '' }
 					onChange={ ( relValue ) => {

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

@@ -9,6 +9,7 @@ exports[`hooks enhanceNavigationLinkVariations enhances variations with icon and
       "attributes": {},
       "description": "A link to a custom URL.",
       "icon": <SVG
+        fill="currentColor"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -26,6 +27,7 @@ exports[`hooks enhanceNavigationLinkVariations enhances variations with icon and
       },
       "description": "A link to a post.",
       "icon": <SVG
+        fill="currentColor"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -43,6 +45,7 @@ exports[`hooks enhanceNavigationLinkVariations enhances variations with icon and
       },
       "description": "A link to a page.",
       "icon": <SVG
+        fill="currentColor"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -63,6 +66,7 @@ exports[`hooks enhanceNavigationLinkVariations enhances variations with icon and
       },
       "description": "A link to a category.",
       "icon": <SVG
+        fill="currentColor"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -82,6 +86,7 @@ exports[`hooks enhanceNavigationLinkVariations enhances variations with icon and
       },
       "description": "A link to a tag.",
       "icon": <SVG
+        fill="currentColor"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >

package/src/navigation-submenu/README.md

@@ -29,6 +29,7 @@ _Defined via the [`attributes`](https://developer.wordpress.org/block-editor/ref
 | `title` | `string` | — | — |
 | `kind` | `string` | — | — |
 | `isTopLevelItem` | `boolean` | — | — |
+| `isParentSubmenu` | `boolean` | `true` | — |
 
 ## Supports
 
@@ -65,6 +66,10 @@ _Defined via the [`usesContext` and `providesContext`](https://developer.wordpre
 - `submenuVisibility`
 - `style`
 
+**Provides context:**
+
+- `core/isInsideSubmenu` → attribute `isParentSubmenu`
+
 ## Block Markup
 
 This is a [**hybrid block**](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). It saves static markup that the server may enhance during rendering.

package/src/navigation-submenu/block.json

@@ -40,8 +40,15 @@
 		},
 		"isTopLevelItem": {
 			"type": "boolean"
+		},
+		"isParentSubmenu": {
+			"type": "boolean",
+			"default": true
 		}
 	},
+	"providesContext": {
+		"core/isInsideSubmenu": "isParentSubmenu"
+	},
 	"usesContext": [
 		"textColor",
 		"customTextColor",

package/src/page-list/README.md

@@ -21,7 +21,6 @@ _Defined via the [`attributes`](https://developer.wordpress.org/block-editor/ref
 | Attribute | [Type](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation) | [Default](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#default-value) | Description |
 |-----------|------|---------|-------------|
 | `parentPageID` | `integer` | `0` | — |
-| `isNested` | `boolean` | `false` | — |
 
 ## Supports
 
@@ -65,6 +64,7 @@ _Defined via the [`usesContext` and `providesContext`](https://developer.wordpre
 - `style`
 - `openSubmenusOnClick`
 - `submenuVisibility`
+- `core/isInsideSubmenu`
 
 ## Block Markup
 

package/src/page-list/block.json

@@ -12,10 +12,6 @@
 		"parentPageID": {
 			"type": "integer",
 			"default": 0
-		},
-		"isNested": {
-			"type": "boolean",
-			"default": false
 		}
 	},
 	"usesContext": [
@@ -32,7 +28,8 @@
 		"showSubmenuIcon",
 		"style",
 		"openSubmenusOnClick",
-		"submenuVisibility"
+		"submenuVisibility",
+		"core/isInsideSubmenu"
 	],
 	"supports": {
 		"anchor": true,

package/src/page-list/edit.js

@@ -254,7 +254,6 @@ export default function PageListEdit( {
 	);
 
 	const {
-		isNested,
 		hasSelectedChild,
 		parentClientId,
 		hasDraggedChild,
@@ -266,18 +265,12 @@ export default function PageListEdit( {
 				hasSelectedInnerBlock,
 				hasDraggedInnerBlock,
 			} = select( blockEditorStore );
-			const blockParents = getBlockParentsByBlockName(
-				clientId,
-				'core/navigation-submenu',
-				true
-			);
 			const navigationBlockParents = getBlockParentsByBlockName(
 				clientId,
 				'core/navigation',
 				true
 			);
 			return {
-				isNested: blockParents.length > 0,
 				isChildOfNavigation: navigationBlockParents.length > 0,
 				hasSelectedChild: hasSelectedInnerBlock( clientId, true ),
 				hasDraggedChild: hasDraggedInnerBlock( clientId, true ),
@@ -318,10 +311,6 @@ export default function PageListEdit( {
 		openModal,
 	] );
 
-	useEffect( () => {
-		setAttributes( { isNested } );
-	}, [ isNested, setAttributes ] );
-
 	return (
 		<>
 			{ ( pagesTree.length > 0 || allowConvertToLinks ) && (

package/src/page-list/index.php

@@ -259,7 +259,7 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 	++$block_id;
 
 	$parent_page_id = $attributes['parentPageID'];
-	$is_nested      = $attributes['isNested'];
+	$is_nested      = ! empty( $block->context['core/isInsideSubmenu'] );
 
 	$all_pages = get_pages(
 		array(

package/src/playlist-track/edit.js

@@ -161,7 +161,6 @@ const PlaylistTrackEdit = ( { attributes, setAttributes, context } ) => {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<TextControl
-						__next40pxDefaultSize
 						label={ __( 'Artist' ) }
 						value={ artist ? stripHTML( artist ) : '' }
 						onChange={ ( artistValue ) => {
@@ -169,7 +168,6 @@ const PlaylistTrackEdit = ( { attributes, setAttributes, context } ) => {
 						} }
 					/>
 					<TextControl
-						__next40pxDefaultSize
 						label={ __( 'Album' ) }
 						value={ album ? stripHTML( album ) : '' }
 						onChange={ ( albumValue ) => {
@@ -177,7 +175,6 @@ const PlaylistTrackEdit = ( { attributes, setAttributes, context } ) => {
 						} }
 					/>
 					<TextControl
-						__next40pxDefaultSize
 						label={ __( 'Title' ) }
 						value={ title ? stripHTML( title ) : '' }
 						onChange={ ( titleValue ) => {

package/src/post-comment/edit.js

@@ -34,7 +34,6 @@ export default function Edit( { attributes: { commentId }, setAttributes } ) {
 					) }
 				>
 					<TextControl
-						__next40pxDefaultSize
 						value={ commentId }
 						onChange={ ( val ) =>
 							setCommentIdInput( parseInt( val ) )

package/src/post-date/edit.js

@@ -210,7 +210,7 @@ export default function PostDateEdit( props ) {
 					<ToolsPanelItem
 						hasValue={ () => isLink !== false }
 						label={
-							postType?.labels.singular_name
+							postType?.labels?.singular_name
 								? sprintf(
 										// translators: %s: Name of the post type e.g: "post".
 										__( 'Link to %s' ),
@@ -223,7 +223,7 @@ export default function PostDateEdit( props ) {
 					>
 						<ToggleControl
 							label={
-								postType?.labels.singular_name
+								postType?.labels?.singular_name
 									? sprintf(
 											// translators: %s: Name of the post type e.g: "post".
 											__( 'Link to %s' ),

package/src/post-featured-image/README.md

@@ -62,6 +62,7 @@ _Defined via the [`usesContext` and `providesContext`](https://developer.wordpre
 
 _Defined via the [`selectors`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-selectors/) property in block.json._
 
+- **dimensions**: `.wp-block-post-featured-image img`
 - **border**: `.wp-block-post-featured-image img, .wp-block-post-featured-image .block-editor-media-placeholder, .wp-block-post-featured-image .wp-block-post-featured-image__overlay`
 - **shadow**: `.wp-block-post-featured-image img, .wp-block-post-featured-image .components-placeholder`
 - **filter**:

package/src/post-featured-image/block.json

@@ -98,6 +98,7 @@
 		}
 	},
 	"selectors": {
+		"dimensions": ".wp-block-post-featured-image img",
 		"border": ".wp-block-post-featured-image img, .wp-block-post-featured-image .block-editor-media-placeholder, .wp-block-post-featured-image .wp-block-post-featured-image__overlay",
 		"shadow": ".wp-block-post-featured-image img, .wp-block-post-featured-image .components-placeholder",
 		"filter": {