@wordpress/block-editor 13.3.0 → 14.0.0

package/src/components/url-input/README.md

@@ -130,10 +130,6 @@ When hiding the URLInput using CSS (as is sometimes done for accessibility purpo
 
 This prop allows the suggestions list to be programmatically not rendered by passing a boolean—it can be `true` to make sure suggestions aren't rendered, or `false`/`undefined` to fall back to the default behaviour of showing suggestions when matching autocompletion items are found.
 
-### `__nextHasNoMarginBottom: Boolean`
-
-Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)
-
 ## Example
 
 
@@ -156,7 +152,6 @@ registerBlockType( /* ... */, {
 	edit( { className, attributes, setAttributes } ) {
 		return (
 			<URLInput
-				__nextHasNoMarginBottom
 				className={ className }
 				value={ attributes.url }
 				onChange={ ( url, post ) => setAttributes( { url, text: (post && post.title) || 'Click here' } ) }

package/src/components/url-input/button.js

@@ -57,7 +57,6 @@ class URLInputButton extends Component {
 								onClick={ this.toggle }
 							/>
 							<URLInput
-								__nextHasNoMarginBottom
 								value={ url || '' }
 								onChange={ onChange }
 							/>

package/src/components/url-input/index.js

@@ -6,7 +6,6 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import deprecated from '@wordpress/deprecated';
 import { __, sprintf, _n } from '@wordpress/i18n';
 import { Component, createRef } from '@wordpress/element';
 import { UP, DOWN, ENTER, TAB } from '@wordpress/keycodes';
@@ -416,8 +415,6 @@ class URLInput extends Component {
 
 	renderControl() {
 		const {
-			/** Start opting into the new margin-free styles that will become the default in a future version. */
-			__nextHasNoMarginBottom = false,
 			label = null,
 			className,
 			isFullWidth,
@@ -473,19 +470,8 @@ class URLInput extends Component {
 			return renderControl( controlProps, inputProps, loading );
 		}
 
-		if ( ! __nextHasNoMarginBottom ) {
-			deprecated( 'Bottom margin styles for wp.blockEditor.URLInput', {
-				since: '6.2',
-				version: '6.5',
-				hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version',
-			} );
-		}
-
 		return (
-			<BaseControl
-				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-				{ ...controlProps }
-			>
+			<BaseControl __nextHasNoMarginBottom { ...controlProps }>
 				<input { ...inputProps } />
 				{ loading && <Spinner /> }
 			</BaseControl>

package/src/components/url-popover/image-url-input-ui.js

@@ -272,7 +272,7 @@ const ImageURLInputUI = ( {
 						icon={ linkOff }
 						label={ __( 'Disable expand on click' ) }
 						onClick={ () => {
-							onSetLightbox( false );
+							onSetLightbox?.( false );
 						} }
 						size="compact"
 					/>
@@ -302,7 +302,7 @@ const ImageURLInputUI = ( {
 						label={ __( 'Remove link' ) }
 						onClick={ () => {
 							onLinkRemove();
-							resetLightbox();
+							resetLightbox?.();
 						} }
 						size="compact"
 					/>
@@ -366,7 +366,7 @@ const ImageURLInputUI = ( {
 													LINK_DESTINATION_NONE,
 												href: '',
 											} );
-											onSetLightbox( true );
+											onSetLightbox?.( true );
 											stopEditLink();
 										} }
 									>

package/src/components/url-popover/link-editor.js

@@ -31,7 +31,6 @@ export default function LinkEditor( {
 			{ ...props }
 		>
 			<URLInput
-				__nextHasNoMarginBottom
 				value={ value }
 				onChange={ onChangeInputValue }
 				autocompleteRef={ autocompleteRef }

package/src/components/url-popover/style.scss

@@ -10,6 +10,7 @@
 .block-editor-url-popover__row {
 	display: flex;
 	gap: $grid-unit-05;
+	align-items: center;
 }
 
 // Any children of the popover-row that are not the settings-toggle

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

@@ -301,8 +301,10 @@ export default function useBlockDropZone( {
 		operation: 'insert',
 	} );
 
-	const { getBlockType } = useSelect( blocksStore );
+	const { getBlockType, getBlockVariations, getGroupingBlockName } =
+		useSelect( blocksStore );
 	const {
+		canInsertBlockType,
 		getBlockListSettings,
 		getBlocks,
 		getBlockIndex,
@@ -310,6 +312,7 @@ export default function useBlockDropZone( {
 		getBlockNamesByClientId,
 		getAllowedBlocks,
 		isDragging,
+		isGroupable,
 	} = unlock( useSelect( blockEditorStore ) );
 	const {
 		showInsertionPoint,
@@ -385,21 +388,66 @@ export default function useBlockDropZone( {
 					};
 				} );
 
+				const dropTargetPosition = getDropTargetPosition(
+					blocksData,
+					{ x: event.clientX, y: event.clientY },
+					getBlockListSettings( targetRootClientId )?.orientation,
+					{
+						dropZoneElement,
+						parentBlockClientId,
+						parentBlockOrientation: parentBlockClientId
+							? getBlockListSettings( parentBlockClientId )
+									?.orientation
+							: undefined,
+						rootBlockIndex: getBlockIndex( targetRootClientId ),
+					}
+				);
+
 				const [ targetIndex, operation, nearestSide ] =
-					getDropTargetPosition(
-						blocksData,
-						{ x: event.clientX, y: event.clientY },
-						getBlockListSettings( targetRootClientId )?.orientation,
-						{
-							dropZoneElement,
-							parentBlockClientId,
-							parentBlockOrientation: parentBlockClientId
-								? getBlockListSettings( parentBlockClientId )
-										?.orientation
-								: undefined,
-							rootBlockIndex: getBlockIndex( targetRootClientId ),
-						}
+					dropTargetPosition;
+
+				if ( operation === 'group' ) {
+					const targetBlock = blocks[ targetIndex ];
+					const areAllImages = [
+						targetBlock.name,
+						...draggedBlockNames,
+					].every( ( name ) => name === 'core/image' );
+					const canInsertGalleryBlock = canInsertBlockType(
+						'core/gallery',
+						targetRootClientId
 					);
+					const areGroupableBlocks = isGroupable( [
+						targetBlock.clientId,
+						getDraggedBlockClientIds(),
+					] );
+					const groupBlockVariations = getBlockVariations(
+						getGroupingBlockName(),
+						'block'
+					);
+					const canInsertRow =
+						groupBlockVariations &&
+						groupBlockVariations.find(
+							( { name } ) => name === 'group-row'
+						);
+
+					// If the dragged blocks and the target block are all images,
+					// check if it is creatable either a Row variation or a Gallery block.
+					if (
+						areAllImages &&
+						! canInsertGalleryBlock &&
+						( ! areGroupableBlocks || ! canInsertRow )
+					) {
+						return;
+					}
+					// If the dragged blocks and the target block are not all images,
+					// check if it is creatable a Row variation.
+					if (
+						! areAllImages &&
+						( ! areGroupableBlocks || ! canInsertRow )
+					) {
+						return;
+					}
+				}
 
 				registry.batch( () => {
 					setDropTarget( {
@@ -436,6 +484,10 @@ export default function useBlockDropZone( {
 				showInsertionPoint,
 				isDragging,
 				startDragging,
+				canInsertBlockType,
+				getBlockVariations,
+				getGroupingBlockName,
+				isGroupable,
 			]
 		),
 		200

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;
+	}
 }