@wordpress/block-editor 16.0.1-next.v.202607070741.0 → 16.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "16.0.1-next.v.202607070741.0+a51d59513",
+	"version": "16.1.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -60,50 +60,49 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/base-styles": "^10.3.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/blob": "^4.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/block-serialization-default-parser": "^5.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/blocks": "^15.23.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/commands": "^1.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/components": "^37.0.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/compose": "^8.3.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/data": "^10.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/dataviews": "^17.1.2-next.v.202607070741.0+a51d59513",
-		"@wordpress/date": "^5.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/deprecated": "^4.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/dom": "^4.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/element": "^8.2.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/escape-html": "^3.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/global-styles-engine": "^1.17.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/hooks": "^4.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/html-entities": "^4.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/i18n": "^6.23.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/icons": "^15.1.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/image-cropper": "^1.14.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/interactivity": "^6.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/is-shallow-equal": "^5.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/keyboard-shortcuts": "^5.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/keycodes": "^4.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/notices": "^5.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/preferences": "^4.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/priority-queue": "^3.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/private-apis": "^1.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/rich-text": "^7.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/style-engine": "^2.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/token-list": "^3.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/ui": "^0.18.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/upload-media": "^0.36.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/url": "^4.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/warning": "^3.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/wordcount": "^4.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/a11y": "^4.52.0",
+		"@wordpress/base-styles": "^12.0.0",
+		"@wordpress/blob": "^4.52.0",
+		"@wordpress/block-serialization-default-parser": "^5.52.0",
+		"@wordpress/blocks": "^15.25.0",
+		"@wordpress/commands": "^1.52.0",
+		"@wordpress/components": "^38.0.0",
+		"@wordpress/compose": "^8.5.0",
+		"@wordpress/data": "^10.52.0",
+		"@wordpress/dataviews": "^17.3.0",
+		"@wordpress/date": "^5.52.0",
+		"@wordpress/deprecated": "^4.52.0",
+		"@wordpress/dom": "^4.52.0",
+		"@wordpress/element": "^8.4.0",
+		"@wordpress/escape-html": "^3.52.0",
+		"@wordpress/global-styles-engine": "^1.19.0",
+		"@wordpress/hooks": "^4.52.0",
+		"@wordpress/html-entities": "^4.52.0",
+		"@wordpress/i18n": "^6.25.0",
+		"@wordpress/icons": "^15.3.0",
+		"@wordpress/image-cropper": "^1.16.0",
+		"@wordpress/interactivity": "^6.52.0",
+		"@wordpress/is-shallow-equal": "^5.52.0",
+		"@wordpress/keyboard-shortcuts": "^5.52.0",
+		"@wordpress/keycodes": "^4.52.0",
+		"@wordpress/notices": "^5.52.0",
+		"@wordpress/preferences": "^4.52.0",
+		"@wordpress/priority-queue": "^3.52.0",
+		"@wordpress/private-apis": "^1.52.0",
+		"@wordpress/rich-text": "^7.52.0",
+		"@wordpress/style-engine": "^2.52.0",
+		"@wordpress/token-list": "^3.52.0",
+		"@wordpress/ui": "^0.19.0",
+		"@wordpress/upload-media": "^0.37.0",
+		"@wordpress/url": "^4.52.0",
+		"@wordpress/warning": "^3.52.0",
+		"@wordpress/wordcount": "^4.52.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.3",
 		"deepmerge": "^4.3.1",
 		"diff": "^8.0.3",
 		"fast-deep-equal": "^3.1.3",
-		"memize": "^2.1.0",
 		"parsel-js": "^1.1.2",
 		"postcss": "^8.4.38",
 		"postcss-prefix-selector": "^1.16.0",
@@ -118,14 +117,14 @@
 		"@testing-library/react": "^16.3.2",
 		"@testing-library/user-event": "^14.6.1",
 		"@types/postcss-prefix-selector": "^1.16.3",
-		"@wordpress/block-library": "^10.1.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/block-library": "^10.3.0",
 		"deep-freeze": "^0.0.1",
 		"storybook": "^10.4.3"
 	},
 	"peerDependencies": {
-		"@types/react": "^18.3.27",
-		"react": "^18.0.0",
-		"react-dom": "^18.0.0"
+		"@types/react": "^18 || ^19",
+		"react": "^18 || ^19",
+		"react-dom": "^18 || ^19"
 	},
 	"peerDependenciesMeta": {
 		"@types/react": {
@@ -135,5 +134,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "f637726e370c8b23695ed9af82adbe171ad235d8"
+	"gitHead": "7e8b17a983f9391d3ebc7717af2a1c9ed7efc7ab"
 }

package/src/components/alignment-control/test/__snapshots__/index.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AlignmentUI should allow custom alignment controls to be specified 1`] = `
 <div>

package/src/components/alignment-control/ui.js

@@ -32,7 +32,7 @@ function AlignmentUI( {
 	onChange,
 	alignmentControls = DEFAULT_ALIGNMENT_CONTROLS,
 	label = __( 'Align text' ),
-	description = __( 'Change text alignment' ),
+	description,
 	isCollapsed = true,
 	isToolbar,
 } ) {
@@ -55,9 +55,7 @@ function AlignmentUI( {
 	const extraProps = isToolbar
 		? { isCollapsed }
 		: {
-				toggleProps: {
-					description,
-				},
+				toggleProps: description ? { description } : {},
 				popoverProps: POPOVER_PROPS,
 		  };
 

package/src/components/background-image-control/index.js

@@ -39,6 +39,10 @@ import { getResolvedValue } from '@wordpress/global-styles-engine';
  * Internal dependencies
  */
 import { hasBackgroundImageValue } from '../global-styles/background-panel';
+import {
+	InheritanceResetButton,
+	isGlobalStylesInheritanceEnabled,
+} from '../global-styles/inheritance';
 import { setImmutably } from '../../utils/object';
 import MediaReplaceFlow from '../media-replace-flow';
 import { store as blockEditorStore } from '../../store';
@@ -193,6 +197,7 @@ function BackgroundControlsPanel( {
 	onToggle: onToggleCallback = noop,
 	hasImageValue,
 	onReset,
+	hasLocalOverride,
 	containerRef,
 } ) {
 	if ( ! hasImageValue ) {
@@ -225,24 +230,38 @@ function BackgroundControlsPanel( {
 							as="button"
 							onToggleCallback={ onToggleCallback }
 						/>
-						{ onReset && (
-							<Button
-								__next40pxDefaultSize
-								label={ __( 'Reset' ) }
-								className="block-editor-global-styles-background-panel__reset"
-								size="small"
-								icon={ resetIcon }
-								onClick={ () => {
-									onReset();
-									// Close the dropdown if open.
-									if ( isOpen ) {
-										onToggle();
-									}
-									// Focus the toggle button.
-									focusToggleButton( containerRef );
-								} }
-							/>
-						) }
+						{ onReset &&
+							( hasLocalOverride ? (
+								<InheritanceResetButton
+									className="block-editor-global-styles-background-panel__reset"
+									onResetToInherited={ () => {
+										onReset();
+										// Close the dropdown if open.
+										if ( isOpen ) {
+											onToggle();
+										}
+										// Focus the toggle button.
+										focusToggleButton( containerRef );
+									} }
+								/>
+							) : (
+								<Button
+									__next40pxDefaultSize
+									label={ __( 'Reset' ) }
+									className="block-editor-global-styles-background-panel__reset"
+									size="small"
+									icon={ resetIcon }
+									onClick={ () => {
+										onReset();
+										// Close the dropdown if open.
+										if ( isOpen ) {
+											onToggle();
+										}
+										// Focus the toggle button.
+										focusToggleButton( containerRef );
+									} }
+								/>
+							) ) }
 					</>
 				);
 			} }
@@ -434,22 +453,29 @@ function BackgroundSizeControls( {
 	inheritedValue,
 	defaultValues,
 } ) {
-	const sizeValue =
-		style?.background?.backgroundSize ||
-		inheritedValue?.background?.backgroundSize;
-	const repeatValue =
-		style?.background?.backgroundRepeat ||
-		inheritedValue?.background?.backgroundRepeat;
+	/*
+	 * Read local and inherited values separately so each sub-control can
+	 * show the inherited value while marking the control as inherited.
+	 */
+	const localSizeValue = style?.background?.backgroundSize;
+	const localRepeatValue = style?.background?.backgroundRepeat;
+	const localPositionValue = style?.background?.backgroundPosition;
+	const localAttachmentValue = style?.background?.backgroundAttachment;
+	const inheritedSizeValue = inheritedValue?.background?.backgroundSize;
+	const inheritedRepeatValue = inheritedValue?.background?.backgroundRepeat;
+	const inheritedPositionValue =
+		inheritedValue?.background?.backgroundPosition;
+	const inheritedAttachmentValue =
+		inheritedValue?.background?.backgroundAttachment;
+
+	const sizeValue = localSizeValue || inheritedSizeValue;
+	const repeatValue = localRepeatValue || inheritedRepeatValue;
 	const imageValue =
 		style?.background?.backgroundImage?.url ||
 		inheritedValue?.background?.backgroundImage?.url;
 	const isUploadedImage = style?.background?.backgroundImage?.id;
-	const positionValue =
-		style?.background?.backgroundPosition ||
-		inheritedValue?.background?.backgroundPosition;
-	const attachmentValue =
-		style?.background?.backgroundAttachment ||
-		inheritedValue?.background?.backgroundAttachment;
+	const positionValue = localPositionValue || inheritedPositionValue;
+	const attachmentValue = localAttachmentValue || inheritedAttachmentValue;
 
 	/*
 	 * Set default values for uploaded images.
@@ -642,12 +668,10 @@ export default function BackgroundImagePanel( {
 	inheritedValue = value,
 	settings,
 	defaultValues = {},
+	showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),
 } ) {
 	/*
-	 * Resolve any inherited "ref" pointers.
-	 * Should the block editor need resolved, inherited values
-	 * across all controls, this could be abstracted into a hook,
-	 * e.g., useResolveGlobalStyle
+	 * Resolve inherited `ref` pointers for background controls.
 	 */
 	const { globalStyles, _links } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -681,13 +705,25 @@ export default function BackgroundImagePanel( {
 	}, [ globalStyles, _links, inheritedValue ] );
 
 	const resetBackground = () =>
-		onChange( setImmutably( value, [ 'background' ], {} ) );
+		onChange(
+			setImmutably( value, [ 'background' ], {
+				gradient: value?.background?.gradient,
+			} )
+		);
 
 	const { title, url } = value?.background?.backgroundImage || {
 		...resolvedInheritedValue?.background?.backgroundImage,
 	};
+	const localHasImageValue = hasBackgroundImageValue( value );
 	const hasImageValue =
-		hasBackgroundImageValue( value ) ||
+		localHasImageValue || hasBackgroundImageValue( resolvedInheritedValue );
+	// The blue-dot local-override affordance is part of the inherited-value
+	// treatment. When that treatment is disabled (e.g. in the Global Styles
+	// panel, where the edited value *is* the global style rather than a local
+	// override of it), fall back to the plain reset control.
+	const hasLocalOverride =
+		showInheritanceLabelIndicators &&
+		localHasImageValue &&
 		hasBackgroundImageValue( resolvedInheritedValue );
 
 	const imageValue =
@@ -721,7 +757,8 @@ export default function BackgroundImagePanel( {
 					url={ url }
 					onToggle={ setIsDropDownOpen }
 					hasImageValue={ hasImageValue }
-					onReset={ resetBackground }
+					hasLocalOverride={ hasLocalOverride }
+					onReset={ localHasImageValue ? resetBackground : undefined }
 					containerRef={ containerRef }
 				>
 					<VStack spacing={ 3 } className="single-column">

package/src/components/background-image-control/style.scss

@@ -58,10 +58,6 @@
 		&:hover {
 			color: var(--wp-admin-theme-color);
 		}
-
-		&:focus {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		}
 	}
 
 	.block-editor-global-styles-background-panel__loading {
@@ -97,12 +93,25 @@
 		transition: opacity 0.1s ease-in-out;
 	}
 
+	&.has-local-override-from-global-styles__reset {
+		position: absolute;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		top: 50%;
+		transform: translateY(-50%);
+		margin-block: 0;
+		margin-inline: 0 $grid-unit;
+		opacity: 1;
+	}
+
 	&.block-editor-global-styles-background-panel__reset {
 		border-radius: $radius-small;
 	}
 
 	.block-editor-global-styles-background-panel__dropdown-toggle:hover + &,
 	&:focus,
+	&:focus-within,
 	&:hover {
 		opacity: 1;
 	}

package/src/components/block-alignment-control/test/__snapshots__/index.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`BlockAlignmentUI should match snapshot when controls are hidden 1`] = `
 <div>
@@ -9,7 +9,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are hidden 1`] = `
     <button
       aria-expanded="false"
       aria-haspopup="true"
-      aria-label="Align"
+      aria-label="Align block"
       class="components-button components-dropdown-menu__toggle has-icon"
       data-toolbar-item="true"
       type="button"
@@ -37,7 +37,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
   <div
     class="components-toolbar"
     icon="[object Object]"
-    label="Align"
+    label="Align block"
   >
     <div>
       <button

package/src/components/block-alignment-control/test/index.js

@@ -61,7 +61,7 @@ describe( 'BlockAlignmentUI', () => {
 
 		await user.click(
 			screen.getByRole( 'button', {
-				name: 'Align',
+				name: 'Align block',
 			} )
 		);
 

package/src/components/block-alignment-control/ui.js

@@ -26,6 +26,8 @@ function BlockAlignmentUI( {
 	controls,
 	isToolbar,
 	isCollapsed = true,
+	label = __( 'Align block' ),
+	description,
 } ) {
 	const enabledControls = useAvailableAlignments( controls );
 	const hasEnabledControls = !! enabledControls.length;
@@ -47,7 +49,7 @@ function BlockAlignmentUI( {
 		icon: activeAlignmentControl
 			? activeAlignmentControl.icon
 			: defaultAlignmentControl.icon,
-		label: __( 'Align' ),
+		label,
 	};
 	const extraProps = isToolbar
 		? {
@@ -64,7 +66,7 @@ function BlockAlignmentUI( {
 				} ),
 		  }
 		: {
-				toggleProps: { description: __( 'Change alignment' ) },
+				toggleProps: description ? { description } : {},
 				children: ( { onClose } ) => {
 					return (
 						<>

package/src/components/block-breadcrumb/test/__snapshots__/index.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`BlockBreadcrumb should render correctly 1`] = `
 <div>

package/src/components/block-canvas/index.js

@@ -14,7 +14,7 @@ import BlockTools from '../block-tools';
 import EditorStyles from '../editor-styles';
 import Iframe from '../iframe';
 import WritingFlow from '../writing-flow';
-import { useMouseMoveTypingReset } from '../observe-typing';
+import { useMouseMoveTypingReset, useTypingObserver } from '../observe-typing';
 import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useBlockCommands } from '../use-block-commands';
 import { store as blockEditorStore } from '../../store';
@@ -60,7 +60,14 @@ export function ExperimentalBlockCanvas( {
 	const resetTypingRef = useMouseMoveTypingReset();
 	const clearerRef = useBlockSelectionClearer();
 	const localRef = useRef();
-	const contentRef = useMergeRefs( [ contentRefProp, clearerRef, localRef ] );
+	// Attached to the same node as the writing flow ref: the iframe body,
+	// or the WritingFlow element when the canvas is not iframed.
+	const contentRef = useMergeRefs( [
+		contentRefProp,
+		clearerRef,
+		localRef,
+		useTypingObserver(),
+	] );
 	const zoomLevel = useSelect(
 		( select ) => unlock( select( blockEditorStore ) ).getZoomLevel(),
 		[]

package/src/components/block-card/style.scss

@@ -22,7 +22,7 @@
 }
 
 .block-editor-block-card__title {
-	font-weight: $font-weight-medium;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;

package/src/components/block-compare/test/__snapshots__/block-view.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`BlockView should match snapshot 1`] = `
 <div>

package/src/components/block-controls/groups.js

@@ -8,6 +8,7 @@ const BlockControlsBlock = createSlotFill( 'BlockControlsBlock' );
 const BlockControlsInline = createSlotFill( 'BlockFormatControls' );
 const BlockControlsOther = createSlotFill( 'BlockControlsOther' );
 const BlockControlsParent = createSlotFill( 'BlockControlsParent' );
+const BlockControlsStyleState = createSlotFill( 'BlockControlsStyleState' );
 
 const groups = {
 	default: BlockControlsDefault,
@@ -15,6 +16,7 @@ const groups = {
 	inline: BlockControlsInline,
 	other: BlockControlsOther,
 	parent: BlockControlsParent,
+	'style-state': BlockControlsStyleState,
 };
 
 export default groups;

package/src/components/block-edit/edit.js

@@ -22,22 +22,13 @@ import { useCallback, useContext, useMemo } from '@wordpress/element';
 import BlockContext from '../block-context';
 import isURLLike from '../link-control/is-url-like';
 import {
+	getBlockBindingsContext,
 	hasPatternOverridesDefaultBinding,
 	replacePatternOverridesDefaultBinding,
 } from '../../utils/block-bindings';
 import { unlock } from '../../lock-unlock';
 import { PrivateBlockContext } from '../block-list/private-block-context';
 
-/**
- * Default value used for blocks which do not define their own context needs,
- * used to guarantee that a block's `context` prop will always be an object. It
- * is assigned as a constant since it is always expected to be an empty object,
- * and in order to avoid unnecessary React reconciliations of a changing object.
- *
- * @type {{}}
- */
-const DEFAULT_BLOCK_CONTEXT = {};
-
 const Edit = ( props ) => {
 	const { name } = props;
 	const blockType = getBlockType( name );
@@ -69,32 +60,23 @@ const EditWithGeneratedProps = ( props ) => {
 	const { bindableAttributes } = useContext( PrivateBlockContext );
 
 	const { blockBindings, context, hasPatternOverrides } = useMemo( () => {
-		// Assign context values using the block type's declared context needs.
-		const computedContext = blockType?.usesContext
-			? Object.fromEntries(
-					Object.entries( blockContext ).filter( ( [ key ] ) =>
-						blockType.usesContext.includes( key )
-					)
-			  )
-			: DEFAULT_BLOCK_CONTEXT;
-		// Add context requested by Block Bindings sources.
-		if ( attributes?.metadata?.bindings ) {
-			Object.values( attributes?.metadata?.bindings || {} ).forEach(
-				( binding ) => {
-					registeredSources[ binding?.source ]?.usesContext?.forEach(
-						( key ) => {
-							computedContext[ key ] = blockContext[ key ];
-						}
-					);
-				}
-			);
-		}
 		return {
 			blockBindings: replacePatternOverridesDefaultBinding(
 				attributes?.metadata?.bindings,
 				bindableAttributes
 			),
-			context: computedContext,
+			// Assign context values using the block type's declared context
+			// needs, plus the context requested by the block's bindings
+			// sources.
+			context: getBlockBindingsContext(
+				blockContext,
+				blockType?.usesContext,
+				attributes?.metadata?.bindings
+					? Object.values( attributes.metadata.bindings ).map(
+							( binding ) => registeredSources[ binding?.source ]
+					  )
+					: undefined
+			),
 			hasPatternOverrides: hasPatternOverridesDefaultBinding(
 				attributes?.metadata?.bindings
 			),

package/src/components/block-icon/test/__snapshots__/index.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`BlockIcon renders a Icon 1`] = `
 <div>