@wordpress/block-editor 14.0.0 → 14.2.0

package/src/hooks/block-bindings.js

@@ -9,11 +9,10 @@ import {
 	__experimentalText as Text,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
-	__experimentalTruncate as Truncate,
 	__experimentalVStack as VStack,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { useRegistry, useSelect } from '@wordpress/data';
 import { useContext, Fragment } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
 
@@ -24,19 +23,13 @@ import {
 	canBindAttribute,
 	getBindableAttributes,
 } from '../hooks/use-bindings-attributes';
-import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
 import InspectorControls from '../components/inspector-controls';
 import BlockContext from '../components/block-context';
+import { useBlockBindingsUtils } from '../utils/block-bindings';
+import { store as blockEditorStore } from '../store';
 
-const {
-	DropdownMenuV2: DropdownMenu,
-	DropdownMenuGroupV2: DropdownMenuGroup,
-	DropdownMenuRadioItemV2: DropdownMenuRadioItem,
-	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
-	DropdownMenuItemHelpTextV2: DropdownMenuItemHelpText,
-	DropdownMenuSeparatorV2: DropdownMenuSeparator,
-} = unlock( componentsPrivateApis );
+const { DropdownMenuV2 } = unlock( componentsPrivateApis );
 
 const useToolsPanelDropdownMenuProps = () => {
 	const isMobile = useViewportMatch( 'medium', '<' );
@@ -51,49 +44,47 @@ const useToolsPanelDropdownMenuProps = () => {
 		: {};
 };
 
-function BlockBindingsPanelDropdown( {
-	fieldsList,
-	addConnection,
-	attribute,
-	binding,
-} ) {
+function BlockBindingsPanelDropdown( { fieldsList, attribute, binding } ) {
+	const { getBlockBindingsSources } = unlock( blocksPrivateApis );
+	const registeredSources = getBlockBindingsSources();
+	const { updateBlockBindings } = useBlockBindingsUtils();
 	const currentKey = binding?.args?.key;
 	return (
 		<>
-			{ Object.entries( fieldsList ).map( ( [ label, fields ], i ) => (
-				<Fragment key={ label }>
-					<DropdownMenuGroup>
+			{ Object.entries( fieldsList ).map( ( [ name, fields ], i ) => (
+				<Fragment key={ name }>
+					<DropdownMenuV2.Group>
 						{ Object.keys( fieldsList ).length > 1 && (
-							<Text
-								className="block-editor-bindings__source-label"
-								upperCase
-								variant="muted"
-								aria-hidden
-							>
-								{ label }
-							</Text>
+							<DropdownMenuV2.GroupLabel>
+								{ registeredSources[ name ].label }
+							</DropdownMenuV2.GroupLabel>
 						) }
 						{ Object.entries( fields ).map( ( [ key, value ] ) => (
-							<DropdownMenuRadioItem
+							<DropdownMenuV2.RadioItem
 								key={ key }
 								onChange={ () =>
-									addConnection( key, attribute )
+									updateBlockBindings( {
+										[ attribute ]: {
+											source: name,
+											args: { key },
+										},
+									} )
 								}
 								name={ attribute + '-binding' }
 								value={ key }
 								checked={ key === currentKey }
 							>
-								<DropdownMenuItemLabel>
+								<DropdownMenuV2.ItemLabel>
 									{ key }
-								</DropdownMenuItemLabel>
-								<DropdownMenuItemHelpText>
+								</DropdownMenuV2.ItemLabel>
+								<DropdownMenuV2.ItemHelpText>
 									{ value }
-								</DropdownMenuItemHelpText>
-							</DropdownMenuRadioItem>
+								</DropdownMenuV2.ItemHelpText>
+							</DropdownMenuV2.RadioItem>
 						) ) }
-					</DropdownMenuGroup>
+					</DropdownMenuV2.Group>
 					{ i !== Object.keys( fieldsList ).length - 1 && (
-						<DropdownMenuSeparator />
+						<DropdownMenuV2.Separator />
 					) }
 				</Fragment>
 			) ) }
@@ -105,17 +96,19 @@ function BlockBindingsAttribute( { attribute, binding } ) {
 	const { source: sourceName, args } = binding || {};
 	const sourceProps =
 		unlock( blocksPrivateApis ).getBlockBindingsSource( sourceName );
+	const isSourceInvalid = ! sourceProps;
 	return (
-		<VStack>
-			<Truncate>{ attribute }</Truncate>
+		<VStack className="block-editor-bindings__item">
+			<Text truncate>{ attribute }</Text>
 			{ !! binding && (
 				<Text
-					variant="muted"
-					className="block-editor-bindings__item-explanation"
+					truncate
+					variant={ ! isSourceInvalid && 'muted' }
+					isDestructive={ isSourceInvalid }
 				>
-					<Truncate>
-						{ args?.key || sourceProps?.label || sourceName }
-					</Truncate>
+					{ isSourceInvalid
+						? __( 'Invalid source' )
+						: args?.key || sourceProps?.label || sourceName }
 				</Text>
 			) }
 		</VStack>
@@ -141,9 +134,8 @@ function EditableBlockBindingsPanelItems( {
 	attributes,
 	bindings,
 	fieldsList,
-	addConnection,
-	removeConnection,
 } ) {
+	const { updateBlockBindings } = useBlockBindingsUtils();
 	const isMobile = useViewportMatch( 'medium', '<' );
 	return (
 		<>
@@ -155,15 +147,16 @@ function EditableBlockBindingsPanelItems( {
 						hasValue={ () => !! binding }
 						label={ attribute }
 						onDeselect={ () => {
-							removeConnection( attribute );
+							updateBlockBindings( {
+								[ attribute ]: undefined,
+							} );
 						} }
 					>
-						<DropdownMenu
+						<DropdownMenuV2
 							placement={
 								isMobile ? 'bottom-start' : 'left-start'
 							}
 							gutter={ isMobile ? 8 : 36 }
-							className="block-editor-bindings__popover"
 							trigger={
 								<Item>
 									<BlockBindingsAttribute
@@ -175,11 +168,10 @@ function EditableBlockBindingsPanelItems( {
 						>
 							<BlockBindingsPanelDropdown
 								fieldsList={ fieldsList }
-								addConnection={ addConnection }
 								attribute={ attribute }
 								binding={ binding }
 							/>
-						</DropdownMenu>
+						</DropdownMenuV2>
 					</ToolsPanelItem>
 				);
 			} ) }
@@ -187,31 +179,28 @@ function EditableBlockBindingsPanelItems( {
 	);
 }
 
-export const BlockBindingsPanel = ( { name, metadata } ) => {
+export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 	const registry = useRegistry();
 	const blockContext = useContext( BlockContext );
 	const { bindings } = metadata || {};
-
-	const bindableAttributes = getBindableAttributes( name );
+	const { removeAllBlockBindings } = useBlockBindingsUtils();
+	const bindableAttributes = getBindableAttributes( blockName );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	const filteredBindings = { ...bindings };
 	Object.keys( filteredBindings ).forEach( ( key ) => {
 		if (
-			! canBindAttribute( name, key ) ||
+			! canBindAttribute( blockName, key ) ||
 			filteredBindings[ key ].source === 'core/pattern-overrides'
 		) {
 			delete filteredBindings[ key ];
 		}
 	} );
 
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-
-	const { _id } = useSelect( ( select ) => {
-		const { getSelectedBlockClientId } = select( blockEditorStore );
-
+	const { canUpdateBlockBindings } = useSelect( ( select ) => {
 		return {
-			_id: getSelectedBlockClientId(),
+			canUpdateBlockBindings:
+				select( blockEditorStore ).getSettings().canUpdateBlockBindings,
 		};
 	}, [] );
 
@@ -219,59 +208,11 @@ export const BlockBindingsPanel = ( { name, metadata } ) => {
 		return null;
 	}
 
-	const removeAllConnections = () => {
-		const newMetadata = { ...metadata };
-		delete newMetadata.bindings;
-		updateBlockAttributes( _id, {
-			metadata:
-				Object.keys( newMetadata ).length === 0
-					? undefined
-					: newMetadata,
-		} );
-	};
-
-	const addConnection = ( value, attribute ) => {
-		// Assuming the block expects a flat structure for its metadata attribute
-		const newMetadata = {
-			...metadata,
-			// Adjust this according to the actual structure expected by your block
-			bindings: {
-				...metadata?.bindings,
-				[ attribute ]: {
-					source: 'core/post-meta',
-					args: { key: value },
-				},
-			},
-		};
-		// Update the block's attributes with the new metadata
-		updateBlockAttributes( _id, {
-			metadata: newMetadata,
-		} );
-	};
-
-	const removeConnection = ( key ) => {
-		const newMetadata = { ...metadata };
-		if ( ! newMetadata.bindings ) {
-			return;
-		}
-
-		delete newMetadata.bindings[ key ];
-		if ( Object.keys( newMetadata.bindings ).length === 0 ) {
-			delete newMetadata.bindings;
-		}
-		updateBlockAttributes( _id, {
-			metadata:
-				Object.keys( newMetadata ).length === 0
-					? undefined
-					: newMetadata,
-		} );
-	};
-
 	const fieldsList = {};
 	const { getBlockBindingsSources } = unlock( blocksPrivateApis );
 	const registeredSources = getBlockBindingsSources();
-	Object.values( registeredSources ).forEach(
-		( { getFieldsList, label, usesContext } ) => {
+	Object.entries( registeredSources ).forEach(
+		( [ sourceName, { getFieldsList, usesContext } ] ) => {
 			if ( getFieldsList ) {
 				// Populate context.
 				const context = {};
@@ -286,7 +227,7 @@ export const BlockBindingsPanel = ( { name, metadata } ) => {
 				} );
 				// Only add source if the list is not empty.
 				if ( sourceList ) {
-					fieldsList[ label ] = { ...sourceList };
+					fieldsList[ sourceName ] = { ...sourceList };
 				}
 			}
 		}
@@ -298,21 +239,20 @@ export const BlockBindingsPanel = ( { name, metadata } ) => {
 		}
 	} );
 
-	// Lock the UI when the experiment is not enabled or there are no fields to connect to.
+	// Lock the UI when the user can't update bindings or there are no fields to connect to.
 	const readOnly =
-		! window.__experimentalBlockBindingsUI ||
-		! Object.keys( fieldsList ).length;
+		! canUpdateBlockBindings || ! Object.keys( fieldsList ).length;
 
 	if ( readOnly && Object.keys( filteredBindings ).length === 0 ) {
 		return null;
 	}
 
 	return (
-		<InspectorControls>
+		<InspectorControls group="bindings">
 			<ToolsPanel
 				label={ __( 'Attributes' ) }
 				resetAll={ () => {
-					removeAllConnections();
+					removeAllBlockBindings();
 				} }
 				dropdownMenuProps={ dropdownMenuProps }
 				className="block-editor-bindings__panel"
@@ -327,14 +267,16 @@ export const BlockBindingsPanel = ( { name, metadata } ) => {
 							attributes={ bindableAttributes }
 							bindings={ filteredBindings }
 							fieldsList={ fieldsList }
-							addConnection={ addConnection }
-							removeConnection={ removeConnection }
 						/>
 					) }
 				</ItemGroup>
-				<Text variant="muted">
-					{ __( 'Attributes connected to various sources.' ) }
-				</Text>
+				<ItemGroup>
+					<Text variant="muted">
+						{ __(
+							'Attributes connected to custom fields or other dynamic data.'
+						) }
+					</Text>
+				</ItemGroup>
 			</ToolsPanel>
 		</InspectorControls>
 	);

package/src/hooks/block-bindings.scss

@@ -1,14 +1,6 @@
 div.block-editor-bindings__panel {
-	grid-template-columns: auto;
-	button:hover .block-editor-bindings__item-explanation {
+	grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
+	button:hover .block-editor-bindings__item span {
 		color: inherit;
 	}
 }
-
-.block-editor-bindings__popover {
-	// This won't be needed if `DropdownMenuGroup` component handles the label.
-	.block-editor-bindings__source-label {
-		grid-column: 2;
-		margin: $grid-unit-10 0;
-	}
-}

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { ToolbarButton, MenuItem } from '@wordpress/components';
+import { ToolbarButton } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { useCallback } from '@wordpress/element';
@@ -10,7 +10,7 @@ import { useCallback } from '@wordpress/element';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../store';
-import { BlockControls, BlockSettingsMenuControls } from '../components';
+import { BlockControls } from '../components';
 import { unlock } from '../lock-unlock';
 
 // The implementation of content locking is mainly in this file, although the mechanism
@@ -19,7 +19,7 @@ import { unlock } from '../lock-unlock';
 // Besides the components on this file and the file referenced above the implementation
 // also includes artifacts on the store (actions, reducers, and selector).
 
-function ContentLockControlsPure( { clientId, isSelected } ) {
+function ContentLockControlsPure( { clientId } ) {
 	const { templateLock, isLockedByParent, isEditingAsBlocks } = useSelect(
 		( select ) => {
 			const {
@@ -36,9 +36,7 @@ function ContentLockControlsPure( { clientId, isSelected } ) {
 		[ clientId ]
 	);
 
-	const { stopEditingAsBlocks, modifyContentLockBlock } = unlock(
-		useDispatch( blockEditorStore )
-	);
+	const { stopEditingAsBlocks } = unlock( useDispatch( blockEditorStore ) );
 	const isContentLocked =
 		! isLockedByParent && templateLock === 'contentOnly';
 
@@ -51,38 +49,15 @@ function ContentLockControlsPure( { clientId, isSelected } ) {
 	}
 
 	const showStopEditingAsBlocks = isEditingAsBlocks && ! isContentLocked;
-	const showStartEditingAsBlocks =
-		! isEditingAsBlocks && isContentLocked && isSelected;
 
 	return (
-		<>
-			{ showStopEditingAsBlocks && (
-				<>
-					<BlockControls group="other">
-						<ToolbarButton onClick={ stopEditingAsBlockCallback }>
-							{ __( 'Done' ) }
-						</ToolbarButton>
-					</BlockControls>
-				</>
-			) }
-			{ showStartEditingAsBlocks && (
-				<BlockSettingsMenuControls>
-					{ ( { selectedClientIds, onClose } ) =>
-						selectedClientIds.length === 1 &&
-						selectedClientIds[ 0 ] === clientId && (
-							<MenuItem
-								onClick={ () => {
-									modifyContentLockBlock( clientId );
-									onClose();
-								} }
-							>
-								{ __( 'Modify' ) }
-							</MenuItem>
-						)
-					}
-				</BlockSettingsMenuControls>
-			) }
-		</>
+		showStopEditingAsBlocks && (
+			<BlockControls group="other">
+				<ToolbarButton onClick={ stopEditingAsBlockCallback }>
+					{ __( 'Done' ) }
+				</ToolbarButton>
+			</BlockControls>
+		)
 	);
 }
 

package/src/hooks/duotone.js

@@ -251,10 +251,6 @@ function useDuotoneStyles( {
 	const selectors = duotoneSelector.split( ',' );
 
 	const selectorsScoped = selectors.map( ( selectorPart ) => {
-		// Extra .editor-styles-wrapper specificity is needed in the editor
-		// since we're not using inline styles to apply the filter. We need to
-		// override duotone applied by global styles and theme.json.
-
 		// Assuming the selector part is a subclass selector (not a tag name)
 		// so we can prepend the filter id class. If we want to support elements
 		// such as `img` or namespaces, we'll need to add a case for that here.

package/src/hooks/layout.js

@@ -320,6 +320,8 @@ function LayoutTypeSwitcher( { type, onChange } ) {
 			{ getLayoutTypes().map( ( { name, label } ) => {
 				return (
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						key={ name }
 						isPressed={ type === name }
 						onClick={ () => onChange( name ) }

package/src/hooks/layout.scss

@@ -1,15 +1,7 @@
-.block-editor-hooks__layout-controls {
+.block-editor-hooks__layout-controls-units {
 	display: flex;
-	margin-bottom: $grid-unit-10;
-
-	.block-editor-hooks__layout-controls-unit {
-		display: flex;
-		margin-right: $grid-unit-30;
-
-		svg {
-			margin: auto 0 $grid-unit-05 $grid-unit-10;
-		}
-	}
+	flex-direction: column;
+	gap: $grid-unit-20;
 }
 
 .block-editor-block-inspector .block-editor-hooks__layout-controls-unit-input {

package/src/hooks/spacing-visualizer.js

@@ -36,16 +36,16 @@ function SpacingVisualizer( { clientId, value, computeStyle, forceShow } ) {
 		);
 	}, [ blockElement, value ] );
 
-	const previousValue = useRef( value );
+	const previousValueRef = useRef( value );
 	const [ isActive, setIsActive ] = useState( false );
 
 	useEffect( () => {
-		if ( isShallowEqual( value, previousValue.current ) || forceShow ) {
+		if ( isShallowEqual( value, previousValueRef.current ) || forceShow ) {
 			return;
 		}
 
 		setIsActive( true );
-		previousValue.current = value;
+		previousValueRef.current = value;
 
 		const timeout = setTimeout( () => {
 			setIsActive( false );

package/src/hooks/style.js

@@ -381,10 +381,7 @@ function useBlockProps( { name, style } ) {
 		useBlockProps
 	) }`;
 
-	// The .editor-styles-wrapper selector is required on elements styles. As it is
-	// added to all other editor styles, not providing it causes reset and global
-	// styles to override element styles because of higher specificity.
-	const baseElementSelector = `.editor-styles-wrapper .${ blockElementsContainerIdentifier }`;
+	const baseElementSelector = `.${ blockElementsContainerIdentifier }`;
 	const blockElementStyles = style?.elements;
 
 	const styles = useMemo( () => {

package/src/hooks/test/background.js

@@ -0,0 +1,60 @@
+/**
+ * Internal dependencies
+ */
+import {
+	setBackgroundStyleDefaults,
+	BACKGROUND_BLOCK_DEFAULT_VALUES,
+} from '../background';
+
+describe( 'background', () => {
+	describe( 'setBackgroundStyleDefaults', () => {
+		const backgroundStyles = {
+			backgroundImage: { id: 123, url: 'image.png' },
+		};
+		const backgroundStylesContain = {
+			backgroundImage: { id: 123, url: 'image.png' },
+			backgroundSize: 'contain',
+		};
+		const backgroundStylesNoURL = { backgroundImage: { id: 123 } };
+		it.each( [
+			[
+				'return background size default',
+				backgroundStyles,
+				{
+					backgroundSize:
+						BACKGROUND_BLOCK_DEFAULT_VALUES.backgroundSize,
+				},
+			],
+			[ 'return early if no styles are passed', undefined, undefined ],
+			[
+				'return early if images has no id',
+				backgroundStylesNoURL,
+				undefined,
+			],
+			[
+				'return early if images has no URL',
+				backgroundStylesNoURL,
+				undefined,
+			],
+			[
+				'return background position default',
+				backgroundStylesContain,
+				{
+					backgroundPosition:
+						BACKGROUND_BLOCK_DEFAULT_VALUES.backgroundPosition,
+				},
+			],
+			[
+				'not apply background position value if one already exists in styles',
+				{
+					...backgroundStylesContain,
+					backgroundPosition: 'center',
+				},
+				undefined,
+			],
+		] )( 'should %s', ( message, styles, expected ) => {
+			const result = setBackgroundStyleDefaults( styles );
+			expect( result ).toEqual( expected );
+		} );
+	} );
+} );

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

@@ -10,6 +10,7 @@ import { addFilter } from '@wordpress/hooks';
 /**
  * Internal dependencies
  */
+import isURLLike from '../components/link-control/is-url-like';
 import { unlock } from '../lock-unlock';
 import BlockContext from '../components/block-context';
 
@@ -134,10 +135,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 			) ) {
 				const { source: sourceName, args: sourceArgs } = binding;
 				const source = sources[ sourceName ];
-				if (
-					! source?.getValues ||
-					! canBindAttribute( name, attributeName )
-				) {
+				if ( ! source || ! canBindAttribute( name, attributeName ) ) {
 					continue;
 				}
 
@@ -161,29 +159,30 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 					}
 
 					// Get values in batch if the source supports it.
-					const values = source.getValues( {
-						registry,
-						context,
-						clientId,
-						bindings,
-					} );
+					let values = {};
+					if ( ! source.getValues ) {
+						Object.keys( bindings ).forEach( ( attr ) => {
+							// Default to the `key` or the source label when `getValues` doesn't exist
+							values[ attr ] =
+								bindings[ attr ].args?.key || source.label;
+						} );
+					} else {
+						values = source.getValues( {
+							registry,
+							context,
+							clientId,
+							bindings,
+						} );
+					}
 					for ( const [ attributeName, value ] of Object.entries(
 						values
 					) ) {
-						// Use placeholder when value is undefined.
-						if ( value === undefined ) {
-							if ( attributeName === 'url' ) {
-								attributes[ attributeName ] = null;
-							} else {
-								attributes[ attributeName ] =
-									source.getPlaceholder?.( {
-										registry,
-										context,
-										clientId,
-										attributeName,
-										args: bindings[ attributeName ].args,
-									} );
-							}
+						if (
+							attributeName === 'url' &&
+							( ! value || ! isURLLike( value ) )
+						) {
+							// Return null if value is not a valid URL.
+							attributes[ attributeName ] = null;
 						} else {
 							attributes[ attributeName ] = value;
 						}

package/src/hooks/use-zoom-out.js

@@ -18,22 +18,22 @@ export function useZoomOut( zoomOut = true ) {
 	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
 	const { __unstableGetEditorMode } = useSelect( blockEditorStore );
 
-	const originalEditingMode = useRef( null );
+	const originalEditingModeRef = useRef( null );
 	const mode = __unstableGetEditorMode();
 
 	useEffect( () => {
 		// Only set this on mount so we know what to return to when we unmount.
-		if ( ! originalEditingMode.current ) {
-			originalEditingMode.current = mode;
+		if ( ! originalEditingModeRef.current ) {
+			originalEditingModeRef.current = mode;
 		}
 
 		return () => {
 			// We need to use  __unstableGetEditorMode() here and not `mode`, as mode may not update on unmount
 			if (
 				__unstableGetEditorMode() === 'zoom-out' &&
-				__unstableGetEditorMode() !== originalEditingMode.current
+				__unstableGetEditorMode() !== originalEditingModeRef.current
 			) {
-				__unstableSetEditorMode( originalEditingMode.current );
+				__unstableSetEditorMode( originalEditingModeRef.current );
 			}
 		};
 	}, [] );
@@ -45,9 +45,9 @@ export function useZoomOut( zoomOut = true ) {
 		} else if (
 			! zoomOut &&
 			__unstableGetEditorMode() === 'zoom-out' &&
-			originalEditingMode.current !== mode
+			originalEditingModeRef.current !== mode
 		) {
-			__unstableSetEditorMode( originalEditingMode.current );
+			__unstableSetEditorMode( originalEditingModeRef.current );
 		}
 	}, [ __unstableGetEditorMode, __unstableSetEditorMode, zoomOut ] ); // Mode is deliberately excluded from the dependencies so that the effect does not run when mode changes.
 }