@wordpress/block-editor 12.25.0 → 12.26.0

package/src/components/writing-mode-control/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -42,10 +42,7 @@ export default function WritingModeControl( { className, value, onChange } ) {
 		<SegmentedTextControl
 			label={ __( 'Orientation' ) }
 			options={ WRITING_MODES }
-			className={ classnames(
-				'block-editor-writing-mode-control',
-				className
-			) }
+			className={ clsx( 'block-editor-writing-mode-control', className ) }
 			value={ value }
 			onChange={ ( newValue ) => {
 				onChange( newValue === value ? undefined : newValue );

package/src/content.scss

@@ -7,6 +7,7 @@
 @import "./components/block-variation-picker/content.scss";
 @import "./components/button-block-appender/content.scss";
 @import "./components/default-block-appender/content.scss";
+@import "./components/iframe/content.scss";
 @import "./components/inner-blocks/content.scss";
 @import "./components/media-placeholder/content.scss";
 @import "./components/plain-text/content.scss";

package/src/hooks/align.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -199,7 +199,7 @@ export function addAssignedAlign( props, blockType, attributes ) {
 		hasWideBlockSupport
 	).includes( align );
 	if ( isAlignValid ) {
-		props.className = classnames( `align${ align }`, props.className );
+		props.className = clsx( `align${ align }`, props.className );
 	}
 
 	return props;

package/src/hooks/background.js

@@ -59,7 +59,7 @@ export function setBackgroundStyleDefaults( backgroundStyle ) {
 	let backgroundStylesWithDefaults;
 
 	// Set block background defaults.
-	if ( backgroundImage?.source === 'file' && !! backgroundImage?.url ) {
+	if ( !! backgroundImage?.url ) {
 		if ( ! backgroundStyle?.backgroundSize ) {
 			backgroundStylesWithDefaults = {
 				backgroundSize: 'cover',

package/src/hooks/border.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -320,7 +320,7 @@ function addSaveProps( props, blockNameOrType, attributes ) {
 	}
 
 	const borderClasses = getBorderClasses( attributes );
-	const newClassName = classnames( props.className, borderClasses );
+	const newClassName = clsx( props.className, borderClasses );
 
 	// If we are clearing the last of the previous classes in `className`
 	// set it to `undefined` to avoid rendering empty DOM attributes.
@@ -341,7 +341,7 @@ export function getBorderClasses( attributes ) {
 	const { borderColor, style } = attributes;
 	const borderColorClass = getColorClassName( 'border-color', borderColor );
 
-	return classnames( {
+	return clsx( {
 		'has-border-color': borderColor || style?.border?.color,
 		[ borderColorClass ]: !! borderColorClass,
 	} );

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/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
@@ -389,7 +389,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
@@ -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/text-align.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -136,7 +136,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 +169,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

@@ -25,8 +25,8 @@ 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' ],
 };
 
 /**
@@ -110,34 +110,66 @@ 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 source =
+							sources[ bindings[ attributeName ].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 ) ) {
+									source.setValue( {
+										registry,
+										context,
+										clientId,
+										attributeName,
+										args: bindings[ attributeName ].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,

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -48,7 +48,7 @@ export function getTypographyClassesAndStyles( attributes, settings ) {
 	const textAlignClassName = !! attributes?.style?.typography?.textAlign
 		? `has-text-align-${ attributes?.style?.typography?.textAlign }`
 		: '';
-	const className = classnames(
+	const className = clsx(
 		fontFamilyClassName,
 		textAlignClassName,
 		getFontSizeClass( attributes?.fontSize )

package/src/hooks/utils.js

@@ -23,7 +23,7 @@ import { unlock } from '../lock-unlock';
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Removed falsy values from nested object.
@@ -610,7 +610,7 @@ export function createBlockListBlockFilter( features ) {
 							return {
 								...acc,
 								...wrapperProps,
-								className: classnames(
+								className: clsx(
 									acc.className,
 									wrapperProps.className
 								),

package/src/layouts/grid.js

@@ -68,7 +68,6 @@ export default {
 	inspectorControls: function GridLayoutInspectorControls( {
 		layout = {},
 		onChange,
-		clientId,
 		layoutBlockSupport = {},
 	} ) {
 		const { allowSizingOnChildren = false } = layoutBlockSupport;
@@ -90,14 +89,11 @@ export default {
 						onChange={ onChange }
 					/>
 				) }
-				{ window.__experimentalEnableGridInteractivity && (
-					<GridVisualizer clientId={ clientId } />
-				) }
 			</>
 		);
 	},
-	toolBarControls: function GridLayoutToolbarControls() {
-		return null;
+	toolBarControls: function GridLayoutToolbarControls( { clientId } ) {
+		return <GridVisualizer clientId={ clientId } />;
 	},
 	getLayoutStyle: function getLayoutStyle( {
 		selector,
@@ -136,7 +132,7 @@ export default {
 		} else if ( minimumColumnWidth ) {
 			rules.push(
 				`grid-template-columns: repeat(auto-fill, minmax(min(${ minimumColumnWidth }, 100%), 1fr))`,
-				`container-type: inline-size`
+				'container-type: inline-size'
 			);
 		}
 

package/src/private-apis.js

@@ -35,9 +35,11 @@ import { useFlashEditableBlocks } from './components/use-flash-editable-blocks';
 import {
 	selectBlockPatternsKey,
 	reusableBlocksSelectKey,
+	globalStylesDataKey,
 } from './store/private-keys';
 import { requiresWrapperOnCopy } from './components/writing-flow/utils';
 import { PrivateRichText } from './components/rich-text/';
+import { PrivateBlockPopover } from './components/block-popover';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -72,8 +74,10 @@ lock( privateApis, {
 	useReusableBlocksRenameHint,
 	usesContextKey,
 	useFlashEditableBlocks,
+	globalStylesDataKey,
 	selectBlockPatternsKey,
 	requiresWrapperOnCopy,
 	PrivateRichText,
 	reusableBlocksSelectKey,
+	PrivateBlockPopover,
 } );