@wordpress/block-editor 13.4.0 → 14.0.0

package/src/components/use-on-block-drop/index.js

@@ -232,7 +232,6 @@ export default function useOnBlockDrop(
 		getBlocksByClientId,
 		getSettings,
 		getBlock,
-		isGroupable,
 	} = useSelect( blockEditorStore );
 	const { getGroupingBlockName } = useSelect( blocksStore );
 	const {
@@ -255,17 +254,11 @@ export default function useOnBlockDrop(
 			if ( ! Array.isArray( blocks ) ) {
 				blocks = [ blocks ];
 			}
-
 			const clientIds = getBlockOrder( targetRootClientId );
 			const clientId = clientIds[ targetBlockIndex ];
-			const blocksClientIds = blocks.map( ( block ) => block.clientId );
-			const areGroupableBlocks = isGroupable( [
-				...blocksClientIds,
-				clientId,
-			] );
 			if ( operation === 'replace' ) {
 				replaceBlocks( clientId, blocks, undefined, initialPosition );
-			} else if ( operation === 'group' && areGroupableBlocks ) {
+			} else if ( operation === 'group' ) {
 				const targetBlock = getBlock( clientId );
 				if ( nearestSide === 'left' ) {
 					blocks.push( targetBlock );
@@ -325,7 +318,6 @@ export default function useOnBlockDrop(
 			getBlockOrder,
 			targetRootClientId,
 			targetBlockIndex,
-			isGroupable,
 			operation,
 			replaceBlocks,
 			getBlock,

package/src/components/use-resize-canvas/index.js

@@ -43,7 +43,7 @@ export default function useResizeCanvas( deviceType ) {
 		return deviceWidth < actualWidth ? deviceWidth : actualWidth;
 	};
 
-	const marginValue = () => ( window.innerHeight < 800 ? 36 : 72 );
+	const marginValue = () => ( window.innerHeight < 800 ? 36 : 64 );
 
 	const contentInlineStyles = ( device ) => {
 		const height = device === 'Mobile' ? '768px' : '1024px';
@@ -62,8 +62,6 @@ export default function useResizeCanvas( deviceType ) {
 					marginLeft: marginHorizontal,
 					marginRight: marginHorizontal,
 					height,
-					borderRadius: '2px 2px 2px 2px',
-					border: '1px solid #ddd',
 					overflowY: 'auto',
 				};
 			default:

package/src/components/use-settings/index.js

@@ -43,9 +43,10 @@ export function useSettings( ...paths ) {
  * It looks up the setting first in the block instance hierarchy.
  * If none is found, it'll look it up in the block editor settings.
  *
+ * @deprecated 6.5.0 Use useSettings instead.
+ *
  * @param {string} path The path to the setting.
  * @return {any} Returns the value defined for the setting.
- * @deprecated 6.5.0 Use useSettings instead.
  * @example
  * ```js
  * const isEnabled = useSetting( 'typography.dropCap' );

package/src/hooks/block-bindings.js

@@ -2,42 +2,199 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { store as blocksStore } from '@wordpress/blocks';
+import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 import {
-	BaseControl,
-	PanelBody,
-	__experimentalHStack as HStack,
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
+	__experimentalText as Text,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalTruncate as Truncate,
+	__experimentalVStack as VStack,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { useContext, Fragment } from '@wordpress/element';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import { canBindAttribute } from '../hooks/use-bindings-attributes';
+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';
+
+const {
+	DropdownMenuV2: DropdownMenu,
+	DropdownMenuGroupV2: DropdownMenuGroup,
+	DropdownMenuRadioItemV2: DropdownMenuRadioItem,
+	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
+	DropdownMenuItemHelpTextV2: DropdownMenuItemHelpText,
+	DropdownMenuSeparatorV2: DropdownMenuSeparator,
+} = unlock( componentsPrivateApis );
+
+const useToolsPanelDropdownMenuProps = () => {
+	const isMobile = useViewportMatch( 'medium', '<' );
+	return ! isMobile
+		? {
+				popoverProps: {
+					placement: 'left-start',
+					// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
+					offset: 259,
+				},
+		  }
+		: {};
+};
+
+function BlockBindingsPanelDropdown( {
+	fieldsList,
+	addConnection,
+	attribute,
+	binding,
+} ) {
+	const currentKey = binding?.args?.key;
+	return (
+		<>
+			{ Object.entries( fieldsList ).map( ( [ label, fields ], i ) => (
+				<Fragment key={ label }>
+					<DropdownMenuGroup>
+						{ Object.keys( fieldsList ).length > 1 && (
+							<Text
+								className="block-editor-bindings__source-label"
+								upperCase
+								variant="muted"
+								aria-hidden
+							>
+								{ label }
+							</Text>
+						) }
+						{ Object.entries( fields ).map( ( [ key, value ] ) => (
+							<DropdownMenuRadioItem
+								key={ key }
+								onChange={ () =>
+									addConnection( key, attribute )
+								}
+								name={ attribute + '-binding' }
+								value={ key }
+								checked={ key === currentKey }
+							>
+								<DropdownMenuItemLabel>
+									{ key }
+								</DropdownMenuItemLabel>
+								<DropdownMenuItemHelpText>
+									{ value }
+								</DropdownMenuItemHelpText>
+							</DropdownMenuRadioItem>
+						) ) }
+					</DropdownMenuGroup>
+					{ i !== Object.keys( fieldsList ).length - 1 && (
+						<DropdownMenuSeparator />
+					) }
+				</Fragment>
+			) ) }
+		</>
+	);
+}
+
+function BlockBindingsAttribute( { attribute, binding } ) {
+	const { source: sourceName, args } = binding || {};
+	const sourceProps =
+		unlock( blocksPrivateApis ).getBlockBindingsSource( sourceName );
+	return (
+		<VStack>
+			<Truncate>{ attribute }</Truncate>
+			{ !! binding && (
+				<Text
+					variant="muted"
+					className="block-editor-bindings__item-explanation"
+				>
+					<Truncate>
+						{ args?.key || sourceProps?.label || sourceName }
+					</Truncate>
+				</Text>
+			) }
+		</VStack>
+	);
+}
+
+function ReadOnlyBlockBindingsPanelItems( { bindings } ) {
+	return (
+		<>
+			{ Object.entries( bindings ).map( ( [ attribute, binding ] ) => (
+				<Item key={ attribute }>
+					<BlockBindingsAttribute
+						attribute={ attribute }
+						binding={ binding }
+					/>
+				</Item>
+			) ) }
+		</>
+	);
+}
+
+function EditableBlockBindingsPanelItems( {
+	attributes,
+	bindings,
+	fieldsList,
+	addConnection,
+	removeConnection,
+} ) {
+	const isMobile = useViewportMatch( 'medium', '<' );
+	return (
+		<>
+			{ attributes.map( ( attribute ) => {
+				const binding = bindings[ attribute ];
+				return (
+					<ToolsPanelItem
+						key={ attribute }
+						hasValue={ () => !! binding }
+						label={ attribute }
+						onDeselect={ () => {
+							removeConnection( attribute );
+						} }
+					>
+						<DropdownMenu
+							placement={
+								isMobile ? 'bottom-start' : 'left-start'
+							}
+							gutter={ isMobile ? 8 : 36 }
+							className="block-editor-bindings__popover"
+							trigger={
+								<Item>
+									<BlockBindingsAttribute
+										attribute={ attribute }
+										binding={ binding }
+									/>
+								</Item>
+							}
+						>
+							<BlockBindingsPanelDropdown
+								fieldsList={ fieldsList }
+								addConnection={ addConnection }
+								attribute={ attribute }
+								binding={ binding }
+							/>
+						</DropdownMenu>
+					</ToolsPanelItem>
+				);
+			} ) }
+		</>
+	);
+}
 
 export const BlockBindingsPanel = ( { name, metadata } ) => {
+	const registry = useRegistry();
+	const blockContext = useContext( BlockContext );
 	const { bindings } = metadata || {};
-	const { sources } = useSelect( ( select ) => {
-		const _sources = unlock(
-			select( blocksStore )
-		).getAllBlockBindingsSources();
 
-		return {
-			sources: _sources,
-		};
-	}, [] );
-
-	if ( ! bindings ) {
-		return null;
-	}
+	const bindableAttributes = getBindableAttributes( name );
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
-	// Don't show not allowed attributes.
-	// Don't show the bindings connected to pattern overrides in the inspectors panel.
-	// TODO: Explore if this should be abstracted to let other sources decide.
 	const filteredBindings = { ...bindings };
 	Object.keys( filteredBindings ).forEach( ( key ) => {
 		if (
@@ -48,43 +205,137 @@ export const BlockBindingsPanel = ( { name, metadata } ) => {
 		}
 	} );
 
-	if ( Object.keys( filteredBindings ).length === 0 ) {
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	const { _id } = useSelect( ( select ) => {
+		const { getSelectedBlockClientId } = select( blockEditorStore );
+
+		return {
+			_id: getSelectedBlockClientId(),
+		};
+	}, [] );
+
+	if ( ! bindableAttributes || bindableAttributes.length === 0 ) {
+		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 } ) => {
+			if ( getFieldsList ) {
+				// Populate context.
+				const context = {};
+				if ( usesContext?.length ) {
+					for ( const key of usesContext ) {
+						context[ key ] = blockContext[ key ];
+					}
+				}
+				const sourceList = getFieldsList( {
+					registry,
+					context,
+				} );
+				// Only add source if the list is not empty.
+				if ( sourceList ) {
+					fieldsList[ label ] = { ...sourceList };
+				}
+			}
+		}
+	);
+	// Remove empty sources.
+	Object.entries( fieldsList ).forEach( ( [ key, value ] ) => {
+		if ( ! Object.keys( value ).length ) {
+			delete fieldsList[ key ];
+		}
+	} );
+
+	// Lock the UI when the experiment is not enabled or there are no fields to connect to.
+	const readOnly =
+		! window.__experimentalBlockBindingsUI ||
+		! Object.keys( fieldsList ).length;
+
+	if ( readOnly && Object.keys( filteredBindings ).length === 0 ) {
 		return null;
 	}
 
 	return (
 		<InspectorControls>
-			<PanelBody
-				title={ __( 'Attributes' ) }
-				className="components-panel__block-bindings-panel"
+			<ToolsPanel
+				label={ __( 'Attributes' ) }
+				resetAll={ () => {
+					removeAllConnections();
+				} }
+				dropdownMenuProps={ dropdownMenuProps }
+				className="block-editor-bindings__panel"
 			>
-				<BaseControl
-					help={ __( 'Attributes connected to various sources.' ) }
-				>
-					<ItemGroup isBordered isSeparated size="large">
-						{ Object.keys( filteredBindings ).map( ( key ) => {
-							return (
-								<Item key={ key }>
-									<HStack>
-										<span>{ key }</span>
-										<span className="components-item__block-bindings-source">
-											{ sources[
-												filteredBindings[ key ].source
-											]
-												? sources[
-														filteredBindings[ key ]
-															.source
-												  ].label
-												: filteredBindings[ key ]
-														.source }
-										</span>
-									</HStack>
-								</Item>
-							);
-						} ) }
-					</ItemGroup>
-				</BaseControl>
-			</PanelBody>
+				<ItemGroup isBordered isSeparated>
+					{ readOnly ? (
+						<ReadOnlyBlockBindingsPanelItems
+							bindings={ filteredBindings }
+						/>
+					) : (
+						<EditableBlockBindingsPanelItems
+							attributes={ bindableAttributes }
+							bindings={ filteredBindings }
+							fieldsList={ fieldsList }
+							addConnection={ addConnection }
+							removeConnection={ removeConnection }
+						/>
+					) }
+				</ItemGroup>
+				<Text variant="muted">
+					{ __( 'Attributes connected to various sources.' ) }
+				</Text>
+			</ToolsPanel>
 		</InspectorControls>
 	);
 };

package/src/hooks/block-bindings.scss

@@ -1,3 +1,14 @@
-.components-panel__block-bindings-panel .components-item__block-bindings-source {
-	color: $gray-700;
+div.block-editor-bindings__panel {
+	grid-template-columns: auto;
+	button:hover .block-editor-bindings__item-explanation {
+		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/block-hooks.js

@@ -201,6 +201,7 @@ function BlockHooksControlPure( {
 
 								return (
 									<ToggleControl
+										__nextHasNoMarginBottom
 										checked={ checked }
 										key={ block.title }
 										label={

package/src/hooks/block-hooks.scss

@@ -4,6 +4,7 @@
 	 * we need to right-align the toggle.
 	 */
 	.components-toggle-control .components-h-stack {
+		/* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the row-reverse value. */
 		flex-direction: row-reverse;
 	}
 

package/src/hooks/block-style-variation.js

@@ -13,7 +13,7 @@ import {
 	toStyles,
 	getBlockSelectors,
 } from '../components/global-styles';
-import { useStyleOverride } from './utils';
+import { usePrivateStyleOverride } from './utils';
 import { getValueFromObjectPath } from '../utils/object';
 import { store as blockEditorStore } from '../store';
 import { globalStylesDataKey } from '../store/private-keys';
@@ -63,7 +63,7 @@ function getVariationNameFromClass( className, registeredStyles = [] ) {
 
 // A helper component to apply a style override using the useStyleOverride hook.
 function OverrideStyles( { override } ) {
-	useStyleOverride( override );
+	usePrivateStyleOverride( override );
 }
 
 /**
@@ -351,7 +351,7 @@ function useBlockProps( { name, className, clientId } ) {
 		);
 	}, [ variation, settings, styles, getBlockStyles, clientId ] );
 
-	useStyleOverride( {
+	usePrivateStyleOverride( {
 		id: `variation-${ clientId }`,
 		css: variationStyles,
 		__unstableType: 'variation',

package/src/hooks/contrast-checker.js

@@ -7,7 +7,7 @@ import { useState, useEffect } from '@wordpress/element';
  * Internal dependencies
  */
 import ContrastChecker from '../components/contrast-checker';
-import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';
+import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
 
 function getComputedStyle( node ) {
 	return node.ownerDocument.defaultView.getComputedStyle( node );
@@ -17,23 +17,23 @@ export default function BlockColorContrastChecker( { clientId } ) {
 	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
 	const [ detectedColor, setDetectedColor ] = useState();
 	const [ detectedLinkColor, setDetectedLinkColor ] = useState();
-	const ref = useBlockRef( clientId );
+	const blockEl = useBlockElement( clientId );
 
 	// There are so many things that can change the color of a block
 	// So we perform this check on every render.
 	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect( () => {
-		if ( ! ref.current ) {
+		if ( ! blockEl ) {
 			return;
 		}
-		setDetectedColor( getComputedStyle( ref.current ).color );
+		setDetectedColor( getComputedStyle( blockEl ).color );
 
-		const firstLinkElement = ref.current?.querySelector( 'a' );
+		const firstLinkElement = blockEl.querySelector( 'a' );
 		if ( firstLinkElement && !! firstLinkElement.innerText ) {
 			setDetectedLinkColor( getComputedStyle( firstLinkElement ).color );
 		}
 
-		let backgroundColorNode = ref.current;
+		let backgroundColorNode = blockEl;
 		let backgroundColor =
 			getComputedStyle( backgroundColorNode ).backgroundColor;
 		while (
@@ -48,7 +48,7 @@ export default function BlockColorContrastChecker( { clientId } ) {
 		}
 
 		setDetectedBackgroundColor( backgroundColor );
-	} );
+	}, [ blockEl ] );
 
 	return (
 		<ContrastChecker

package/src/hooks/duotone.js

@@ -32,10 +32,10 @@ import {
 } from '../components/duotone/utils';
 import { getBlockCSSSelector } from '../components/global-styles/get-block-css-selector';
 import { scopeSelector } from '../components/global-styles/utils';
-import { useBlockSettings, useStyleOverride } from './utils';
+import { useBlockSettings, usePrivateStyleOverride } from './utils';
 import { default as StylesFiltersPanel } from '../components/global-styles/filters-panel';
 import { useBlockEditingMode } from '../components/block-editing-mode';
-import { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
+import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
 
 const EMPTY_ARRAY = [];
 
@@ -265,7 +265,7 @@ function useDuotoneStyles( {
 
 	const isValidFilter = Array.isArray( colors ) || colors === 'unset';
 
-	useStyleOverride(
+	usePrivateStyleOverride(
 		isValidFilter
 			? {
 					css:
@@ -276,7 +276,7 @@ function useDuotoneStyles( {
 			  }
 			: undefined
 	);
-	useStyleOverride(
+	usePrivateStyleOverride(
 		isValidFilter
 			? {
 					assets:

package/src/hooks/index.js

@@ -37,7 +37,6 @@ import './grid-visualizer';
 
 createBlockEditFilter(
 	[
-		blockBindingsPanel,
 		align,
 		textAlign,
 		anchor,
@@ -48,6 +47,7 @@ createBlockEditFilter(
 		layout,
 		contentLockUI,
 		blockHooks,
+		blockBindingsPanel,
 		childLayout,
 	].filter( Boolean )
 );
@@ -91,3 +91,4 @@ export { useCachedTruthy } from './use-cached-truthy';
 export { setBackgroundStyleDefaults } from './background';
 export { useZoomOut } from './use-zoom-out';
 export { __unstableBlockStyleVariationOverridesWithConfig } from './block-style-variation';
+export { useStyleOverride } from './utils';

package/src/hooks/line-height.js

@@ -39,7 +39,6 @@ export function LineHeightEdit( props ) {
 	return (
 		<LineHeightControl
 			__unstableInputWidth="100%"
-			__nextHasNoMarginBottom
 			value={ style?.typography?.lineHeight }
 			onChange={ onChange }
 			size="__unstable-large"

package/src/hooks/spacing-visualizer.js

@@ -14,7 +14,7 @@ import isShallowEqual from '@wordpress/is-shallow-equal';
  * Internal dependencies
  */
 import BlockPopoverCover from '../components/block-popover/cover';
-import { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
+import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
 
 function SpacingVisualizer( { clientId, value, computeStyle, forceShow } ) {
 	const blockElement = useBlockElement( clientId );

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

@@ -91,6 +91,10 @@ export function canBindAttribute( blockName, attributeName ) {
 	);
 }
 
+export function getBindableAttributes( blockName ) {
+	return BLOCK_BINDINGS_ALLOWED_BLOCKS[ blockName ];
+}
+
 export const withBlockBindingSupport = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const registry = useRegistry();

package/src/hooks/use-editor-wrapper-styles.native.scss

@@ -5,6 +5,7 @@
 }
 
 .use-editor-wrapper-styles--reversed {
+	/* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the column-reverse value. */
 	flex-direction: column-reverse;
 	width: 100%;
 	max-width: 580;

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

@@ -49,5 +49,5 @@ export function useZoomOut( zoomOut = true ) {
 		) {
 			__unstableSetEditorMode( originalEditingMode.current );
 		}
-	}, [ __unstableSetEditorMode, zoomOut, mode ] );
+	}, [ __unstableGetEditorMode, __unstableSetEditorMode, zoomOut ] ); // Mode is deliberately excluded from the dependencies so that the effect does not run when mode changes.
 }

package/src/hooks/utils.js

@@ -135,7 +135,20 @@ export function shouldSkipSerialization(
 
 const pendingStyleOverrides = new WeakMap();
 
-export function useStyleOverride( {
+/**
+ * Override a block editor settings style. Leave the ID blank to create a new
+ * style.
+ *
+ * @param {Object}  override     Override object.
+ * @param {?string} override.id  Id of the style override, leave blank to create
+ *                               a new style.
+ * @param {string}  override.css CSS to apply.
+ */
+export function useStyleOverride( { id, css } ) {
+	return usePrivateStyleOverride( { id, css } );
+}
+
+export function usePrivateStyleOverride( {
 	id,
 	css,
 	assets,