@wordpress/block-library 9.48.1 → 10.0.1-next.v.202606191442.0

package/src/image/image.js

@@ -64,6 +64,12 @@ import { isExternalImage } from './edit';
 import { Caption } from '../utils/caption';
 import { MediaControl } from '../utils/media-control';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import {
+	getActiveDimensionValue,
+	getDimensionResetAttributes,
+	getDimensionUpdateAttributes,
+	getStyleStateKey,
+} from '../utils/style-state';
 import { useOpenImageMediaEditorModal } from './use-open-image-media-editor-modal';
 import {
 	MIN_SIZE,
@@ -73,9 +79,12 @@ import {
 } from './constants';
 import { evalAspectRatio, mediaPosition } from './utils';
 
-const { DimensionsTool, ResolutionTool, mediaEditKey } = unlock(
-	blockEditorPrivateApis
-);
+const {
+	DimensionsTool,
+	isDefaultBlockStyleState,
+	ResolutionTool,
+	mediaEditKey,
+} = unlock( blockEditorPrivateApis );
 
 const scaleOptions = [
 	{
@@ -644,7 +653,8 @@ export default function Image( {
 		isSingleSelected &&
 		canEditImage &&
 		! isEditingImage &&
-		! isContentOnlyMode;
+		! isContentOnlyMode &&
+		! isUploading;
 
 	function switchToCover() {
 		replaceBlocks(
@@ -673,14 +683,67 @@ export default function Image( {
 
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
+	const selectedStyleState = useSelect(
+		( select ) => {
+			if ( ! isSingleSelected ) {
+				return undefined;
+			}
+			const { getSelectedBlockStyleState } = unlock(
+				select( blockEditorStore )
+			);
+			return getSelectedBlockStyleState( clientId );
+		},
+		[ clientId, isSingleSelected ]
+	);
+	const hasSelectedStyleState =
+		! isDefaultBlockStyleState( selectedStyleState );
+	const selectedStyleStateKey = getStyleStateKey( selectedStyleState );
+	const activeWidth = getActiveDimensionValue( {
+		attributes,
+		selectedState: selectedStyleState,
+		hasSelectedStyleState,
+		attributeKey: 'width',
+	} );
+	const activeHeight = getActiveDimensionValue( {
+		attributes,
+		selectedState: selectedStyleState,
+		hasSelectedStyleState,
+		attributeKey: 'height',
+	} );
+	const activeAspectRatio = getActiveDimensionValue( {
+		attributes,
+		selectedState: selectedStyleState,
+		hasSelectedStyleState,
+		attributeKey: 'aspectRatio',
+	} );
+	const activeScale = getActiveDimensionValue( {
+		attributes,
+		selectedState: selectedStyleState,
+		hasSelectedStyleState,
+		attributeKey: 'scale',
+		styleKey: 'objectFit',
+	} );
+	const setDimensionAttributes = ( nextDimensions ) => {
+		setAttributes(
+			getDimensionUpdateAttributes( {
+				style: attributes.style,
+				selectedState: selectedStyleState,
+				hasSelectedStyleState,
+				nextDimensions,
+				dimensionKeyMap: { scale: 'objectFit' },
+			} )
+		);
+	};
+
 	const dimensionsControl =
 		showDimensionsControls &&
 		( SIZED_LAYOUTS.includes( parentLayoutType ) ? (
 			<DimensionsTool
+				key={ selectedStyleStateKey }
 				panelId={ clientId }
-				value={ { aspectRatio } }
+				value={ { aspectRatio: activeAspectRatio, scale: activeScale } }
 				onChange={ ( { aspectRatio: newAspectRatio } ) => {
-					setAttributes( {
+					setDimensionAttributes( {
 						aspectRatio: newAspectRatio,
 						scale: 'cover',
 					} );
@@ -690,26 +753,29 @@ export default function Image( {
 			/>
 		) : (
 			<DimensionsTool
+				key={ selectedStyleStateKey }
 				panelId={ clientId }
-				value={ { width, height, scale, aspectRatio } }
+				value={ {
+					width: activeWidth,
+					height: activeHeight,
+					scale: activeScale,
+					aspectRatio: activeAspectRatio,
+				} }
 				onChange={ ( {
 					width: newWidth,
 					height: newHeight,
 					scale: newScale,
 					aspectRatio: newAspectRatio,
 				} ) => {
-					// Rebuilding the object forces setting `undefined`
-					// for values that are removed since setAttributes
-					// doesn't do anything with keys that aren't set.
-					setAttributes( {
+					setDimensionAttributes( {
 						// CSS includes `height: auto`, but we need
 						// `width: auto` to fix the aspect ratio when
 						// only height is set due to the width and
 						// height attributes set via the server.
 						width: ! newWidth && newHeight ? 'auto' : newWidth,
 						height: newHeight,
-						scale: newScale,
 						aspectRatio: newAspectRatio,
+						scale: newScale,
 					} );
 				} }
 				defaultScale="cover"
@@ -742,14 +808,11 @@ export default function Image( {
 		lockTitleControls = false,
 		lockTitleControlsMessage,
 		hideCaptionControls = false,
-		hasSelectedStyleState = false,
 	} = useSelect(
 		( select ) => {
 			if ( ! isSingleSelected ) {
 				return {};
 			}
-			const { hasSelectedStyleState: hasSelectedBlockStyleState } =
-				unlock( select( blockEditorStore ) );
 			const {
 				url: urlBinding,
 				alt: altBinding,
@@ -767,7 +830,6 @@ export default function Image( {
 				titleBinding?.source
 			);
 			return {
-				hasSelectedStyleState: hasSelectedBlockStyleState( clientId ),
 				lockUrlControls:
 					!! urlBinding &&
 					! urlBindingSource?.canUserEditValue?.( {
@@ -812,7 +874,6 @@ export default function Image( {
 		},
 		[
 			arePatternOverridesEnabled,
-			clientId,
 			context,
 			isSingleSelected,
 			metadata?.bindings,
@@ -1018,47 +1079,52 @@ export default function Image( {
 					</ToolsPanel>
 				</InspectorControls>
 			) }
-			{ ! hasSelectedStyleState && (
-				<InspectorControls
-					group="dimensions"
-					resetAllFilter={ ( attrs ) => ( {
-						...attrs,
-						aspectRatio: undefined,
-						width: undefined,
-						height: undefined,
-						scale: undefined,
-						focalPoint: undefined,
-					} ) }
-				>
-					{ dimensionsControl }
-					{ url && scale && (
-						<ToolsPanelItem
+			<InspectorControls
+				group="dimensions"
+				resetAllFilter={ ( attrs ) => {
+					return getDimensionResetAttributes( {
+						attributes: attrs,
+						selectedState: selectedStyleState,
+						hasSelectedStyleState,
+						keys: [ 'aspectRatio', 'height', 'objectFit', 'width' ],
+						defaultAttributes: {
+							aspectRatio: undefined,
+							width: undefined,
+							height: undefined,
+							scale: undefined,
+							focalPoint: undefined,
+						},
+					} );
+				} }
+			>
+				{ dimensionsControl }
+				{ ! hasSelectedStyleState && url && scale && (
+					<ToolsPanelItem
+						label={ __( 'Focal point' ) }
+						isShownByDefault
+						hasValue={ () => !! focalPoint }
+						onDeselect={ () =>
+							setAttributes( {
+								focalPoint: undefined,
+							} )
+						}
+						panelId={ clientId }
+					>
+						<FocalPointPicker
 							label={ __( 'Focal point' ) }
-							isShownByDefault
-							hasValue={ () => !! focalPoint }
-							onDeselect={ () =>
+							url={ url }
+							value={ focalPoint }
+							onDragStart={ imperativeFocalPointPreview }
+							onDrag={ imperativeFocalPointPreview }
+							onChange={ ( newFocalPoint ) =>
 								setAttributes( {
-									focalPoint: undefined,
+									focalPoint: newFocalPoint,
 								} )
 							}
-							panelId={ clientId }
-						>
-							<FocalPointPicker
-								label={ __( 'Focal point' ) }
-								url={ url }
-								value={ focalPoint }
-								onDragStart={ imperativeFocalPointPreview }
-								onDrag={ imperativeFocalPointPreview }
-								onChange={ ( newFocalPoint ) =>
-									setAttributes( {
-										focalPoint: newFocalPoint,
-									} )
-								}
-							/>
-						</ToolsPanelItem>
-					) }
-				</InspectorControls>
-			) }
+						/>
+					</ToolsPanelItem>
+				) }
+			</InspectorControls>
 			{ !! imageSizeOptions.length && (
 				<InspectorControls>
 					<ToolsPanel

package/src/image/index.php

@@ -390,7 +390,6 @@ function block_core_image_print_lightbox_overlay() {
 							data-wp-bind--style="state.imgStyles"
 							data-wp-bind--src="state.enlargedSrc"
 							data-wp-bind--srcset="state.enlargedSrcset"
-							data-wp-bind--srcset="state.enlargedSrcset"
 							sizes="100vw"
 						>
 					</figure>

package/src/image/transforms.js

@@ -52,10 +52,10 @@ const imageSchema = {
 	},
 };
 
-// Read a pixel dimension from an `<img>` HTML attribute and normalise it to
-// the `<value>px` form the Image block stores in its `width` / `height`
-// attributes. Non-integer values (e.g. `50%`) are dropped because the block
-// attribute round-trips through inline styles that expect pixel units.
+// Normalise an `<img>` pixel dimension attribute to the `<value>px` form the
+// Image block stores in its `width`/`height` attributes. Non-integer values
+// (e.g. `50%`) are dropped because the attribute round-trips through inline
+// styles that expect pixel units.
 function parsePixelDimension( value ) {
 	return value && /^\d+$/.test( value ) ? `${ value }px` : undefined;
 }
@@ -114,14 +114,39 @@ const transforms = {
 					anchorElement && anchorElement.className
 						? anchorElement.className
 						: undefined;
-				// Preserve explicit pixel dimensions set on the source `<img>`
-				// (e.g. legacy "Add Media" output: `<img width="77" height="77">`).
-				const width = parsePixelDimension(
+				// Pin only one dimension and let the other follow the aspect
+				// ratio via `auto`. Pinning both as fixed pixels stretches the
+				// image when a theme caps the width while the height stays
+				// fixed. So width sources use `height: 'auto'`; height-only
+				// sources use `width: 'auto'`.
+				const widthValue = parsePixelDimension(
 					img.getAttribute( 'width' )
 				);
-				const height = parsePixelDimension(
+				const heightValue = parsePixelDimension(
 					img.getAttribute( 'height' )
 				);
+				// When both dimensions are declared, preserve the source's
+				// shape via `aspectRatio` (mirroring the resize handle). CSS
+				// `aspect-ratio` needs no fixed dimensions, so the image keeps
+				// its proportions even when the `src` can't resolve to natural
+				// dimensions (e.g. an empty or blob `src`) — without it the
+				// `height: 'auto'` would collapse to `0`.
+				// `parseInt` is `NaN` for an absent dimension and `0` for a
+				// zero one (both falsy), so a bogus ratio is never stored.
+				const widthNumber = parseInt( widthValue, 10 );
+				const heightNumber = parseInt( heightValue, 10 );
+				const aspectRatio =
+					widthNumber && heightNumber
+						? String( widthNumber / heightNumber )
+						: undefined;
+				// A height-only source declares a single dimension, so it can't
+				// carry an aspect ratio: `width: 'auto'` is capped by
+				// `max-width: 100%` while the fixed height can still stretch a
+				// wide source. This is a known edge case (a panoramic image
+				// pinned by height only) left unsolved here.
+				const width =
+					widthValue || ( heightValue ? 'auto' : undefined );
+				const height = widthValue ? 'auto' : heightValue;
 				const attributes = getBlockAttributes(
 					'core/image',
 					node.outerHTML,
@@ -135,6 +160,7 @@ const transforms = {
 						anchor,
 						width,
 						height,
+						aspectRatio,
 					}
 				);
 

package/src/index.js

@@ -23,15 +23,10 @@ import HtmlRenderer from './utils/html-renderer';
 /**
  * Internal dependencies
  */
-// When IS_GUTENBERG_PLUGIN is set to false, imports of experimental blocks
-// are transformed by packages/block-library/src/index.js as follows:
-//    import * as experimentalBlock from './experimental-block'
-// becomes
-//    const experimentalBlock = null;
-// This enables webpack to eliminate the experimental blocks code from the
-// production build to make the final bundle smaller.
-//
-// See https://github.com/WordPress/gutenberg/pull/40655 for more context.
+// Experimental blocks are only registered in the Gutenberg plugin (see
+// `__experimentalRegisterExperimentalCoreBlocks`). `registerCoreBlocks`
+// filters them out via `isBlockMetadataExperimental`, so they are never
+// available in WordPress core regardless of what ends up in the bundle.
 import * as accordion from './accordion';
 import * as accordionItem from './accordion-item';
 import * as accordionHeading from './accordion-heading';
@@ -135,7 +130,6 @@ import * as siteTitle from './site-title';
 import * as socialLink from './social-link';
 import * as socialLinks from './social-links';
 import * as spacer from './spacer';
-import * as tab from './tab';
 import * as tabPanel from './tab-panel';
 import * as tabPanels from './tab-panels';
 import * as table from './table';
@@ -287,7 +281,6 @@ const getAllBlocks = () => {
 	}
 
 	if ( window?.__experimentalEnableBlockExperiments ) {
-		blocks.push( tab );
 		blocks.push( tabList );
 		blocks.push( tabs );
 		blocks.push( tabPanel );

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,29 @@ function Navigation( {
 		innerBlocks,
 	} = useInnerBlocks( clientId );
 
+	// 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 (
+			( isSelected || isInnerBlockSelected ) &&
+			orientation === 'horizontal' &&
+			submenuVisibility === 'always'
+		) {
+			setAttributes( {
+				submenuVisibility: 'hover',
+				showSubmenuIcon: true,
+			} );
+		}
+	}, [
+		isSelected,
+		isInnerBlockSelected,
+		orientation,
+		submenuVisibility,
+		setAttributes,
+	] );
+
 	// 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 );

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-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/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": {