@wordpress/block-editor 12.25.0 → 13.0.0

package/src/hooks/color.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -174,23 +174,16 @@ export function addSaveProps( props, blockNameOrType, attributes ) {
 		style?.color?.background ||
 		( hasGradient && ( gradient || style?.color?.gradient ) );
 
-	const newClassName = classnames(
-		props.className,
-		textClass,
-		gradientClass,
-		{
-			// Don't apply the background class if there's a custom gradient.
-			[ backgroundClass ]:
-				( ! hasGradient || ! style?.color?.gradient ) &&
-				!! backgroundClass,
-			'has-text-color':
-				shouldSerialize( 'text' ) &&
-				( textColor || style?.color?.text ),
-			'has-background': serializeHasBackground && hasBackground,
-			'has-link-color':
-				shouldSerialize( 'link' ) && style?.elements?.link?.color,
-		}
-	);
+	const newClassName = clsx( props.className, textClass, gradientClass, {
+		// Don't apply the background class if there's a custom gradient.
+		[ backgroundClass ]:
+			( ! hasGradient || ! style?.color?.gradient ) && !! backgroundClass,
+		'has-text-color':
+			shouldSerialize( 'text' ) && ( textColor || style?.color?.text ),
+		'has-background': serializeHasBackground && hasBackground,
+		'has-link-color':
+			shouldSerialize( 'link' ) && style?.elements?.link?.color,
+	} );
 	props.className = newClassName ? newClassName : undefined;
 
 	return props;
@@ -399,7 +392,7 @@ function useBlockProps( {
 
 	return {
 		...saveProps,
-		className: classnames(
+		className: clsx(
 			saveProps.className,
 			// Add background image classes in the editor, if not already handled by background color values.
 			! hasBackgroundValue && getBackgroundImageClasses( style )

package/src/hooks/color.scss

@@ -5,6 +5,7 @@
 		 * injected color controls can appear as a single item group without
 		 * the contrast checkers suddenly appearing between items.
 		 */
+		/* stylelint-disable-next-line property-disallowed-list -- This should be removed when https://github.com/WordPress/gutenberg/issues/58936 is fixed. */
 		order: 9999;
 		grid-column: span 2;
 		margin-top: $grid-unit-20;

package/src/hooks/content-lock-ui.js

@@ -20,7 +20,6 @@ import { unlock } from '../lock-unlock';
 // also includes artifacts on the store (actions, reducers, and selector).
 
 function ContentLockControlsPure( { clientId, isSelected } ) {
-	const { getBlockListSettings, getSettings } = useSelect( blockEditorStore );
 	const { templateLock, isLockedByParent, isEditingAsBlocks } = useSelect(
 		( select ) => {
 			const {
@@ -37,16 +36,11 @@ function ContentLockControlsPure( { clientId, isSelected } ) {
 		[ clientId ]
 	);
 
-	const {
-		updateSettings,
-		updateBlockListSettings,
-		__unstableSetTemporarilyEditingAsBlocks,
-	} = useDispatch( blockEditorStore );
-	const { stopEditingAsBlocks } = unlock( useDispatch( blockEditorStore ) );
+	const { stopEditingAsBlocks, modifyContentLockBlock } = unlock(
+		useDispatch( blockEditorStore )
+	);
 	const isContentLocked =
 		! isLockedByParent && templateLock === 'contentOnly';
-	const { __unstableMarkNextChangeAsNotPersistent, updateBlockAttributes } =
-		useDispatch( blockEditorStore );
 
 	const stopEditingAsBlockCallback = useCallback( () => {
 		stopEditingAsBlocks( clientId );
@@ -73,30 +67,19 @@ function ContentLockControlsPure( { clientId, isSelected } ) {
 			) }
 			{ showStartEditingAsBlocks && (
 				<BlockSettingsMenuControls>
-					{ ( { onClose } ) => (
-						<MenuItem
-							onClick={ () => {
-								__unstableMarkNextChangeAsNotPersistent();
-								updateBlockAttributes( clientId, {
-									templateLock: undefined,
-								} );
-								updateBlockListSettings( clientId, {
-									...getBlockListSettings( clientId ),
-									templateLock: false,
-								} );
-								const focusModeToRevert =
-									getSettings().focusMode;
-								updateSettings( { focusMode: true } );
-								__unstableSetTemporarilyEditingAsBlocks(
-									clientId,
-									focusModeToRevert
-								);
-								onClose();
-							} }
-						>
-							{ __( 'Modify' ) }
-						</MenuItem>
-					) }
+					{ ( { selectedClientIds, onClose } ) =>
+						selectedClientIds.length === 1 &&
+						selectedClientIds[ 0 ] === clientId && (
+							<MenuItem
+								onClick={ () => {
+									modifyContentLockBlock( clientId );
+									onClose();
+								} }
+							>
+								{ __( 'Modify' ) }
+							</MenuItem>
+						)
+					}
 				</BlockSettingsMenuControls>
 			) }
 		</>

package/src/hooks/custom-class-name.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -88,7 +88,7 @@ export function addSaveProps( extraProps, blockType, attributes ) {
 		hasBlockSupport( blockType, 'customClassName', true ) &&
 		attributes.className
 	) {
-		extraProps.className = classnames(
+		extraProps.className = clsx(
 			extraProps.className,
 			attributes.className
 		);

package/src/hooks/custom-class-name.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -46,7 +46,7 @@ export function addSaveProps( extraProps, blockType, attributes ) {
 		hasBlockSupport( blockType, 'customClassName', true ) &&
 		attributes.className
 	) {
-		extraProps.className = classnames(
+		extraProps.className = clsx(
 			extraProps.className,
 			attributes.className
 		);

package/src/hooks/dimensions.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -170,7 +170,7 @@ function useBlockProps( { name, minHeight, style } ) {
 		return {};
 	}
 
-	const className = classnames( {
+	const className = clsx( {
 		'has-aspect-ratio': !! style?.dimensions?.aspectRatio,
 	} );
 

package/src/hooks/font-family.js

@@ -14,6 +14,7 @@ import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
 import { unlock } from '../lock-unlock';
 
 export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
+const { kebabCase } = unlock( componentsPrivateApis );
 
 /**
  * Filters registered block settings, extending attributes to include
@@ -68,7 +69,6 @@ function addSaveProps( props, blockType, attributes ) {
 
 	// Use TokenList to dedupe classes.
 	const classes = new TokenList( props.className );
-	const { kebabCase } = unlock( componentsPrivateApis );
 	classes.add( `has-${ kebabCase( attributes?.fontFamily ) }-font-family` );
 	const newClassName = classes.value;
 	props.className = newClassName ? newClassName : undefined;

package/src/hooks/index.js

@@ -24,16 +24,19 @@ import fontSize from './font-size';
 import textAlign from './text-align';
 import border from './border';
 import position from './position';
+import blockStyleVariation from './block-style-variation';
 import layout from './layout';
 import childLayout from './layout-child';
 import contentLockUI from './content-lock-ui';
 import './metadata';
 import blockHooks from './block-hooks';
+import blockBindingsPanel from './block-bindings';
 import './block-renaming';
 import './use-bindings-attributes';
 
 createBlockEditFilter(
 	[
+		blockBindingsPanel,
 		align,
 		textAlign,
 		anchor,
@@ -59,6 +62,7 @@ createBlockListBlockFilter( [
 	fontSize,
 	border,
 	position,
+	blockStyleVariation,
 	childLayout,
 ] );
 createBlockSaveFilter( [

package/src/hooks/layout-child.js

@@ -3,6 +3,7 @@
  */
 import { useInstanceId } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -134,37 +135,50 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 }
 
 function ChildLayoutControlsPure( { clientId, style, setAttributes } ) {
-	const parentLayout = useLayout() || {};
+	const {
+		type: parentLayoutType = 'default',
+		allowSizingOnChildren = false,
+	} = useLayout() || {};
+
 	const rootClientId = useSelect(
 		( select ) => {
 			return select( blockEditorStore ).getBlockRootClientId( clientId );
 		},
 		[ clientId ]
 	);
-	if ( parentLayout.type !== 'grid' ) {
-		return null;
-	}
-	if ( ! window.__experimentalEnableGridInteractivity ) {
+
+	// Use useState() instead of useRef() so that GridItemResizer updates when ref is set.
+	const [ resizerBounds, setResizerBounds ] = useState();
+
+	if ( parentLayoutType !== 'grid' ) {
 		return null;
 	}
+
 	return (
 		<>
-			<GridVisualizer clientId={ rootClientId } />
-			<GridItemResizer
-				clientId={ clientId }
-				onChange={ ( { columnSpan, rowSpan } ) => {
-					setAttributes( {
-						style: {
-							...style,
-							layout: {
-								...style?.layout,
-								columnSpan,
-								rowSpan,
-							},
-						},
-					} );
-				} }
+			<GridVisualizer
+				clientId={ rootClientId }
+				contentRef={ setResizerBounds }
 			/>
+			{ allowSizingOnChildren && (
+				<GridItemResizer
+					clientId={ clientId }
+					// Don't allow resizing beyond the grid visualizer.
+					bounds={ resizerBounds }
+					onChange={ ( { columnSpan, rowSpan } ) => {
+						setAttributes( {
+							style: {
+								...style,
+								layout: {
+									...style?.layout,
+									columnSpan,
+									rowSpan,
+								},
+							},
+						} );
+					} }
+				/>
+			) }
 		</>
 	);
 }

package/src/hooks/layout.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -32,6 +32,7 @@ import { useBlockSettings, useStyleOverride } from './utils';
 import { unlock } from '../lock-unlock';
 
 const layoutBlockSupportKey = 'layout';
+const { kebabCase } = unlock( componentsPrivateApis );
 
 function hasLayoutBlockSupport( blockName ) {
 	return (
@@ -49,7 +50,6 @@ function hasLayoutBlockSupport( blockName ) {
  * @return { Array } Array of CSS classname strings.
  */
 export function useLayoutClasses( blockAttributes = {}, blockName = '' ) {
-	const { kebabCase } = unlock( componentsPrivateApis );
 	const { layout } = blockAttributes;
 	const { default: defaultBlockLayout } =
 		getBlockSupport( blockName, layoutBlockSupportKey ) || {};
@@ -371,7 +371,6 @@ function BlockWithLayoutStyles( {
 			? { ...layout, type: 'constrained' }
 			: layout || defaultBlockLayout || {};
 
-	const { kebabCase } = unlock( componentsPrivateApis );
 	const selectorPrefix = `wp-container-${ kebabCase( name ) }-is-layout-`;
 	// Higher specificity to override defaults from theme.json.
 	const selector = `.${ selectorPrefix }${ id }`;
@@ -389,7 +388,7 @@ function BlockWithLayoutStyles( {
 	} );
 
 	// Attach a `wp-container-` id-based class name as well as a layout class name such as `is-layout-flex`.
-	const layoutClassNames = classnames(
+	const layoutClassNames = clsx(
 		{
 			[ `${ selectorPrefix }${ id }` ]: !! css, // Only attach a container class if there is generated CSS to be attached.
 		},

package/src/hooks/position.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -303,7 +303,7 @@ export function PositionPanelPure( {
 							onChange={ ( { selectedItem } ) => {
 								onChangeType( selectedItem.value );
 							} }
-							size={ '__unstable-large' }
+							size="__unstable-large"
 						/>
 					</BaseControl>
 				</InspectorControls>
@@ -351,7 +351,7 @@ function useBlockProps( { name, style } ) {
 	}
 
 	// Attach a `wp-container-` id-based class name.
-	const className = classnames( {
+	const className = clsx( {
 		[ `wp-container-${ id }` ]: allowPositionStyles && !! css, // Only attach a container class if there is generated CSS to be attached.
 		[ `is-position-${ style?.position?.type }` ]:
 			allowPositionStyles && !! css && !! style?.position?.type,

package/src/hooks/style.js

@@ -332,7 +332,15 @@ function BlockStyleControls( {
 		clientId,
 		name,
 		setAttributes,
-		settings,
+		settings: {
+			...settings,
+			typography: {
+				...settings.typography,
+				// The text alignment UI for individual blocks is rendered in
+				// the block toolbar, so disable it here.
+				textAlign: false,
+			},
+		},
 	};
 	if ( blockEditingMode !== 'default' ) {
 		return null;

package/src/hooks/text-align.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -15,7 +15,11 @@ import { alignLeft, alignRight, alignCenter } from '@wordpress/icons';
  */
 import { AlignmentControl, BlockControls } from '../components';
 import { useBlockEditingMode } from '../components/block-editing-mode';
-import { cleanEmptyObject, shouldSkipSerialization } from './utils';
+import {
+	cleanEmptyObject,
+	shouldSkipSerialization,
+	useBlockSettings,
+} from './utils';
 import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
 
 export const TEXT_ALIGN_SUPPORT_KEY = 'typography.textAlign';
@@ -39,6 +43,7 @@ const TEXT_ALIGNMENT_OPTIONS = [
 ];
 
 const VALID_TEXT_ALIGNMENTS = [ 'left', 'center', 'right' ];
+const NO_TEXT_ALIGNMENTS = [];
 
 /**
  * Returns the valid text alignments.
@@ -50,19 +55,13 @@ const VALID_TEXT_ALIGNMENTS = [ 'left', 'center', 'right' ];
  * @return {string[]} Valid text alignments.
  */
 export function getValidTextAlignments( blockTextAlign ) {
-	let validTextAlignments;
 	if ( Array.isArray( blockTextAlign ) ) {
-		validTextAlignments = VALID_TEXT_ALIGNMENTS.filter( ( textAlign ) =>
+		return VALID_TEXT_ALIGNMENTS.filter( ( textAlign ) =>
 			blockTextAlign.includes( textAlign )
 		);
-	} else if ( blockTextAlign === true ) {
-		// `true` includes all alignments...
-		validTextAlignments = [ ...VALID_TEXT_ALIGNMENTS ];
-	} else {
-		validTextAlignments = [];
 	}
 
-	return validTextAlignments;
+	return blockTextAlign === true ? VALID_TEXT_ALIGNMENTS : NO_TEXT_ALIGNMENTS;
 }
 
 function BlockEditTextAlignmentToolbarControlsPure( {
@@ -70,11 +69,18 @@ function BlockEditTextAlignmentToolbarControlsPure( {
 	name: blockName,
 	setAttributes,
 } ) {
+	const settings = useBlockSettings( blockName );
+	const hasTextAlignControl = settings?.typography?.textAlign;
+	const blockEditingMode = useBlockEditingMode();
+
+	if ( ! hasTextAlignControl || blockEditingMode !== 'default' ) {
+		return null;
+	}
+
 	const validTextAlignments = getValidTextAlignments(
 		getBlockSupport( blockName, TEXT_ALIGN_SUPPORT_KEY )
 	);
-	const blockEditingMode = useBlockEditingMode();
-	if ( ! validTextAlignments.length || blockEditingMode !== 'default' ) {
+	if ( ! validTextAlignments.length ) {
 		return null;
 	}
 
@@ -136,7 +142,7 @@ function useBlockProps( { name, style } ) {
 
 	const textAlign = style.typography.textAlign;
 
-	const className = classnames( {
+	const className = clsx( {
 		[ `has-text-align-${ textAlign }` ]: textAlign,
 	} );
 	return { className };
@@ -169,7 +175,7 @@ export function addAssignedTextAlign( props, blockType, attributes ) {
 			'textAlign'
 		)
 	) {
-		props.className = classnames(
+		props.className = clsx(
 			`has-text-align-${ textAlign }`,
 			props.className
 		);

package/src/hooks/use-bindings-attributes.js

@@ -4,7 +4,7 @@
 import { store as blocksStore } from '@wordpress/blocks';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { useRegistry, useSelect } from '@wordpress/data';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useMemo } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 
 /**
@@ -25,10 +25,45 @@ import { unlock } from '../lock-unlock';
 const BLOCK_BINDINGS_ALLOWED_BLOCKS = {
 	'core/paragraph': [ 'content' ],
 	'core/heading': [ 'content' ],
-	'core/image': [ 'url', 'title', 'alt' ],
-	'core/button': [ 'url', 'text', 'linkTarget' ],
+	'core/image': [ 'id', 'url', 'title', 'alt' ],
+	'core/button': [ 'url', 'text', 'linkTarget', 'rel' ],
 };
 
+const DEFAULT_ATTRIBUTE = '__default';
+
+/**
+ * Returns the bindings with the `__default` binding for pattern overrides
+ * replaced with the full-set of supported attributes. e.g.:
+ *
+ * bindings passed in: `{ __default: { source: 'core/pattern-overrides' } }`
+ * bindings returned: `{ content: { source: 'core/pattern-overrides' } }`
+ *
+ * @param {string} blockName The block name (e.g. 'core/paragraph').
+ * @param {Object} bindings  A block's bindings from the metadata attribute.
+ *
+ * @return {Object} The bindings with default replaced for pattern overrides.
+ */
+function replacePatternOverrideDefaultBindings( blockName, bindings ) {
+	// The `__default` binding currently only works for pattern overrides.
+	if (
+		bindings?.[ DEFAULT_ATTRIBUTE ]?.source === 'core/pattern-overrides'
+	) {
+		const supportedAttributes = BLOCK_BINDINGS_ALLOWED_BLOCKS[ blockName ];
+		const bindingsWithDefaults = {};
+		for ( const attributeName of supportedAttributes ) {
+			// If the block has mixed binding sources, retain any non pattern override bindings.
+			const bindingSource = bindings[ attributeName ]
+				? bindings[ attributeName ]
+				: { source: 'core/pattern-overrides' };
+			bindingsWithDefaults[ attributeName ] = bindingSource;
+		}
+
+		return bindingsWithDefaults;
+	}
+
+	return bindings;
+}
+
 /**
  * Based on the given block name,
  * check if it is possible to bind the block.
@@ -61,8 +96,15 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 		const sources = useSelect( ( select ) =>
 			unlock( select( blocksStore ) ).getAllBlockBindingsSources()
 		);
-		const bindings = props.attributes.metadata?.bindings;
 		const { name, clientId, context } = props;
+		const bindings = useMemo(
+			() =>
+				replacePatternOverrideDefaultBindings(
+					name,
+					props.attributes.metadata?.bindings
+				),
+			[ props.attributes.metadata?.bindings, name ]
+		);
 		const boundAttributes = useSelect( () => {
 			if ( ! bindings ) {
 				return;
@@ -110,34 +152,67 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 			( nextAttributes ) => {
 				registry.batch( () => {
 					if ( ! bindings ) {
-						return setAttributes( nextAttributes );
+						setAttributes( nextAttributes );
+						return;
 					}
 
 					const keptAttributes = { ...nextAttributes };
+					const updatesBySource = new Map();
 
-					for ( const [
-						attributeName,
-						boundAttribute,
-					] of Object.entries( bindings ) ) {
-						const source = sources[ boundAttribute.source ];
+					// Loop only over the updated attributes to avoid modifying the bound ones that haven't changed.
+					for ( const [ attributeName, newValue ] of Object.entries(
+						keptAttributes
+					) ) {
 						if (
-							! source?.setValue ||
+							! bindings[ attributeName ] ||
 							! canBindAttribute( name, attributeName )
 						) {
 							continue;
 						}
 
-						source.setValue( {
-							registry,
-							context,
-							clientId,
-							attributeName,
-							args: boundAttribute.args,
-							value: nextAttributes[ attributeName ],
+						const binding = bindings[ attributeName ];
+						const source = sources[ binding?.source ];
+						if ( ! source?.setValue && ! source?.setValues ) {
+							continue;
+						}
+						updatesBySource.set( source, {
+							...updatesBySource.get( source ),
+							[ attributeName ]: newValue,
 						} );
 						delete keptAttributes[ attributeName ];
 					}
 
+					if ( updatesBySource.size ) {
+						for ( const [
+							source,
+							attributes,
+						] of updatesBySource ) {
+							if ( source.setValues ) {
+								source.setValues( {
+									registry,
+									context,
+									clientId,
+									attributes,
+								} );
+							} else {
+								for ( const [
+									attributeName,
+									value,
+								] of Object.entries( attributes ) ) {
+									const binding = bindings[ attributeName ];
+									source.setValue( {
+										registry,
+										context,
+										clientId,
+										attributeName,
+										args: binding.args,
+										value,
+									} );
+								}
+							}
+						}
+					}
+
 					if ( Object.keys( keptAttributes ).length ) {
 						setAttributes( keptAttributes );
 					}

package/src/hooks/use-color-props.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -51,7 +51,7 @@ export function getColorClassesAndStyles( attributes ) {
 	const hasGradient = gradientClass || style?.color?.gradient;
 
 	// Determine color CSS class name list.
-	const className = classnames( textClass, gradientClass, {
+	const className = clsx( textClass, gradientClass, {
 		// Don't apply the background class if there's a gradient.
 		[ backgroundClass ]: ! hasGradient && !! backgroundClass,
 		'has-text-color': textColor || style?.color?.text,