@wordpress/block-editor 15.9.0 → 15.9.1-next.6deb34194.0

package/src/components/block-bindings/attribute-control.js

@@ -0,0 +1,174 @@
+/**
+ * External dependencies
+ */
+import fastDeepEqual from 'fast-deep-equal/es6';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	getBlockBindingsSource,
+	store as blocksStore,
+} from '@wordpress/blocks';
+import {
+	__experimentalItem as Item,
+	__experimentalText as Text,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalVStack as VStack,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useContext } from '@wordpress/element';
+import { useViewportMatch } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import BlockContext from '../block-context';
+import BlockBindingsSourceFieldsList from './source-fields-list';
+import useBlockBindingsUtils from './use-block-bindings-utils';
+import { unlock } from '../../lock-unlock';
+import { store as blockEditorStore } from '../../store';
+
+const { Menu } = unlock( componentsPrivateApis );
+
+export default function BlockBindingsAttributeControl( {
+	attribute,
+	binding,
+	blockName,
+} ) {
+	const { updateBlockBindings } = useBlockBindingsUtils();
+	const isMobile = useViewportMatch( 'medium', '<' );
+
+	const blockContext = useContext( BlockContext );
+	const compatibleFields = useSelect(
+		( select ) => {
+			const {
+				getAllBlockBindingsSources,
+				getBlockBindingsSourceFieldsList,
+				getBlockType,
+			} = unlock( select( blocksStore ) );
+
+			const _attributeType =
+				getBlockType( blockName ).attributes?.[ attribute ]?.type;
+			const attributeType =
+				_attributeType === 'rich-text' ? 'string' : _attributeType;
+
+			const sourceFields = {};
+			Object.entries( getAllBlockBindingsSources() ).forEach(
+				( [ sourceName, source ] ) => {
+					const fieldsList = getBlockBindingsSourceFieldsList(
+						source,
+						blockContext
+					);
+					if ( ! fieldsList?.length ) {
+						return;
+					}
+					const compatibleFieldsList = fieldsList.filter(
+						( field ) => field.type === attributeType
+					);
+					if ( compatibleFieldsList.length ) {
+						sourceFields[ sourceName ] = compatibleFieldsList;
+					}
+				}
+			);
+			return sourceFields;
+		},
+		[ attribute, blockName, blockContext ]
+	);
+
+	const { canUpdateBlockBindings } = useSelect( ( select ) => ( {
+		canUpdateBlockBindings:
+			select( blockEditorStore ).getSettings().canUpdateBlockBindings,
+	} ) );
+
+	const hasCompatibleFields = Object.keys( compatibleFields ).length > 0;
+
+	// Lock the UI when the user can't update bindings or there are no fields to connect to.
+	const isAttributeReadOnly =
+		! canUpdateBlockBindings || ! hasCompatibleFields;
+
+	const { source: boundSourceName, args } = binding || {};
+	const source = getBlockBindingsSource( boundSourceName );
+
+	let displayText;
+	let isValid = true;
+
+	if ( binding === undefined ) {
+		if ( ! hasCompatibleFields ) {
+			displayText = __( 'No sources available' );
+		} else {
+			displayText = __( 'Not connected' );
+		}
+		isValid = true;
+	} else if ( ! source ) {
+		// If there's a binding but the source is not found, it's invalid.
+		isValid = false;
+		displayText = __( 'Source not registered' );
+	} else {
+		displayText =
+			compatibleFields?.[ boundSourceName ]?.find( ( field ) =>
+				fastDeepEqual( field.args, args )
+			)?.label ||
+			source?.label ||
+			boundSourceName;
+	}
+
+	return (
+		<ToolsPanelItem
+			hasValue={ () => !! binding }
+			label={ attribute }
+			onDeselect={
+				!! hasCompatibleFields &&
+				( () => {
+					updateBlockBindings( {
+						[ attribute ]: undefined,
+					} );
+				} )
+			}
+		>
+			<Menu placement={ isMobile ? 'bottom-start' : 'left-start' }>
+				<Menu.TriggerButton
+					render={ <Item /> }
+					disabled={ ! hasCompatibleFields }
+				>
+					<VStack
+						className="block-editor-bindings__item"
+						spacing={ 0 }
+					>
+						<Text truncate>{ attribute }</Text>
+						<Text
+							truncate
+							variant={ isValid ? 'muted' : undefined }
+							isDestructive={ ! isValid }
+						>
+							{ displayText }
+						</Text>
+					</VStack>
+				</Menu.TriggerButton>
+				{ ! isAttributeReadOnly && (
+					<Menu.Popover gutter={ isMobile ? 8 : 36 }>
+						<Menu
+							placement={
+								isMobile ? 'bottom-start' : 'left-start'
+							}
+						>
+							{ Object.entries( compatibleFields ).map(
+								( [ sourceKey, fields ] ) => (
+									<BlockBindingsSourceFieldsList
+										key={ sourceKey }
+										args={ binding?.args }
+										attribute={ attribute }
+										sourceKey={ sourceKey }
+										fields={ fields }
+									/>
+								)
+							) }
+						</Menu>
+					</Menu.Popover>
+				) }
+			</Menu>
+		</ToolsPanelItem>
+	);
+}

package/src/components/block-bindings/index.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+export { default as BlockBindingsAttributeControl } from './attribute-control';
+export { default as BlockBindingsSourceFieldsList } from './source-fields-list';
+export { default as useBlockBindingsUtils } from './use-block-bindings-utils';

package/src/components/block-bindings/source-fields-list.js

@@ -0,0 +1,130 @@
+/**
+ * External dependencies
+ */
+import fastDeepEqual from 'fast-deep-equal/es6';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockBindingsSource } from '@wordpress/blocks';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useContext, useMemo } from '@wordpress/element';
+import { useViewportMatch } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import useBlockBindingsUtils from './use-block-bindings-utils';
+import { unlock } from '../../lock-unlock';
+import BlockContext from '../block-context';
+
+const { Menu } = unlock( componentsPrivateApis );
+
+function BlockBindingsSourceFieldsListItem( {
+	args,
+	attribute,
+	field,
+	source,
+	sourceKey,
+} ) {
+	const itemBindings = useMemo(
+		() => ( {
+			source: sourceKey,
+			args: field.args || {
+				key: field.key,
+			},
+		} ),
+		[ field.args, field.key, sourceKey ]
+	);
+
+	const blockContext = useContext( BlockContext );
+	const values = useSelect(
+		( select ) =>
+			source.getValues( {
+				select,
+				context: blockContext,
+				bindings: {
+					[ attribute ]: itemBindings,
+				},
+			} ),
+		[ attribute, blockContext, itemBindings, source ]
+	);
+	const { updateBlockBindings } = useBlockBindingsUtils();
+
+	return (
+		<Menu.CheckboxItem
+			onChange={ () => {
+				const isCurrentlySelected =
+					fastDeepEqual( args, field.args ) ??
+					// Deprecate key dependency in 7.0.
+					field.key === args?.key;
+
+				if ( isCurrentlySelected ) {
+					// Unset if the same field is selected again.
+					updateBlockBindings( {
+						[ attribute ]: undefined,
+					} );
+				} else {
+					updateBlockBindings( {
+						[ attribute ]: itemBindings,
+					} );
+				}
+			} }
+			name={ attribute + '-binding' }
+			value={ values[ attribute ] }
+			checked={
+				fastDeepEqual( args, field.args ) ??
+				// Deprecate key dependency in 7.0.
+				field.key === args?.key
+			}
+		>
+			<Menu.ItemLabel>{ field.label }</Menu.ItemLabel>
+			<Menu.ItemHelpText>{ values[ attribute ] }</Menu.ItemHelpText>
+		</Menu.CheckboxItem>
+	);
+}
+
+export default function BlockBindingsSourceFieldsList( {
+	args,
+	attribute,
+	sourceKey,
+	fields,
+} ) {
+	const isMobile = useViewportMatch( 'medium', '<' );
+
+	// Only render source if it has compatible fields.
+	if ( ! fields || fields.length === 0 ) {
+		return null;
+	}
+
+	const source = getBlockBindingsSource( sourceKey );
+
+	return (
+		<Menu
+			key={ sourceKey }
+			placement={ isMobile ? 'bottom-start' : 'left-start' }
+		>
+			<Menu.SubmenuTriggerItem>
+				<Menu.ItemLabel>{ source.label }</Menu.ItemLabel>
+			</Menu.SubmenuTriggerItem>
+			<Menu.Popover gutter={ 8 }>
+				<Menu.Group>
+					{ fields.map( ( field ) => (
+						<BlockBindingsSourceFieldsListItem
+							key={
+								sourceKey + JSON.stringify( field.args ) ||
+								field.key
+							}
+							args={ args }
+							attribute={ attribute }
+							field={ field }
+							source={ source }
+							sourceKey={ sourceKey }
+						/>
+					) ) }
+				</Menu.Group>
+			</Menu.Popover>
+		</Menu>
+	);
+}

package/src/components/block-bindings/use-block-bindings-utils.js

@@ -0,0 +1,156 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useRegistry } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { useBlockEditContext } from '../block-edit';
+
+/**
+ * Checks if the given object is empty.
+ *
+ * @param {?Object} object The object to check.
+ *
+ * @return {boolean} Whether the object is empty.
+ */
+function isObjectEmpty( object ) {
+	return ! object || Object.keys( object ).length === 0;
+}
+
+/**
+ * Contains utils to update the block `bindings` metadata.
+ *
+ * @typedef {Object} WPBlockBindingsUtils
+ *
+ * @property {Function} updateBlockBindings    Updates the value of the bindings connected to block attributes.
+ * @property {Function} removeAllBlockBindings Removes the bindings property of the `metadata` attribute.
+ */
+
+/**
+ * Retrieves the existing utils needed to update the block `bindings` metadata.
+ * They can be used to create, modify, or remove connections from the existing block attributes.
+ *
+ * It contains the following utils:
+ * - `updateBlockBindings`: Updates the value of the bindings connected to block attributes. It can be used to remove a specific binding by setting the value to `undefined`.
+ * - `removeAllBlockBindings`: Removes the bindings property of the `metadata` attribute.
+ *
+ * @since 6.7.0 Introduced in WordPress core.
+ *
+ * @param {?string} clientId Optional block client ID. If not set, it will use the current block client ID from the context.
+ *
+ * @return {?WPBlockBindingsUtils} Object containing the block bindings utils.
+ *
+ * @example
+ * ```js
+ * import { useBlockBindingsUtils } from '@wordpress/block-editor'
+ * const { updateBlockBindings, removeAllBlockBindings } = useBlockBindingsUtils();
+ *
+ * // Update url and alt attributes.
+ * updateBlockBindings( {
+ *     url: {
+ *         source: 'core/post-meta',
+ *         args: {
+ *             key: 'url_custom_field',
+ *         },
+ *     },
+ *     alt: {
+ *         source: 'core/post-meta',
+ *         args: {
+ *             key: 'text_custom_field',
+ *         },
+ *     },
+ * } );
+ *
+ * // Remove binding from url attribute.
+ * updateBlockBindings( { url: undefined } );
+ *
+ * // Remove bindings from all attributes.
+ * removeAllBlockBindings();
+ * ```
+ */
+export default function useBlockBindingsUtils( clientId ) {
+	const { clientId: contextClientId } = useBlockEditContext();
+	const blockClientId = clientId || contextClientId;
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const { getBlockAttributes } = useRegistry().select( blockEditorStore );
+
+	/**
+	 * Updates the value of the bindings connected to block attributes.
+	 * It removes the binding when the new value is `undefined`.
+	 *
+	 * @param {Object} bindings        Bindings including the attributes to update and the new object.
+	 * @param {string} bindings.source The source name to connect to.
+	 * @param {Object} [bindings.args] Object containing the arguments needed by the source.
+	 *
+	 * @example
+	 * ```js
+	 * import { useBlockBindingsUtils } from '@wordpress/block-editor'
+	 *
+	 * const { updateBlockBindings } = useBlockBindingsUtils();
+	 * updateBlockBindings( {
+	 *     url: {
+	 *         source: 'core/post-meta',
+	 *         args: {
+	 *             key: 'url_custom_field',
+	 *         },
+	 * 	   },
+	 *     alt: {
+	 *         source: 'core/post-meta',
+	 *         args: {
+	 *             key: 'text_custom_field',
+	 *         },
+	 * 	   }
+	 * } );
+	 * ```
+	 */
+	const updateBlockBindings = ( bindings ) => {
+		const { metadata: { bindings: currentBindings, ...metadata } = {} } =
+			getBlockAttributes( blockClientId );
+		const newBindings = { ...currentBindings };
+
+		Object.entries( bindings ).forEach( ( [ attribute, binding ] ) => {
+			if ( ! binding && newBindings[ attribute ] ) {
+				delete newBindings[ attribute ];
+				return;
+			}
+			newBindings[ attribute ] = binding;
+		} );
+
+		const newMetadata = {
+			...metadata,
+			bindings: newBindings,
+		};
+
+		if ( isObjectEmpty( newMetadata.bindings ) ) {
+			delete newMetadata.bindings;
+		}
+
+		updateBlockAttributes( blockClientId, {
+			metadata: isObjectEmpty( newMetadata ) ? undefined : newMetadata,
+		} );
+	};
+
+	/**
+	 * Removes the bindings property of the `metadata` attribute.
+	 *
+	 * @example
+	 * ```js
+	 * import { useBlockBindingsUtils } from '@wordpress/block-editor'
+	 *
+	 * const { removeAllBlockBindings } = useBlockBindingsUtils();
+	 * removeAllBlockBindings();
+	 * ```
+	 */
+	const removeAllBlockBindings = () => {
+		const { metadata: { bindings, ...metadata } = {} } =
+			getBlockAttributes( blockClientId );
+		updateBlockAttributes( blockClientId, {
+			metadata: isObjectEmpty( metadata ) ? undefined : metadata,
+		} );
+	};
+
+	return { updateBlockBindings, removeAllBlockBindings };
+}

package/src/components/block-edit/edit.js

@@ -100,10 +100,10 @@ const EditWithGeneratedProps = ( props ) => {
 			),
 		};
 	}, [
-		name,
 		blockType?.usesContext,
 		blockContext,
 		attributes?.metadata?.bindings,
+		bindableAttributes,
 		registeredSources,
 	] );
 
@@ -180,7 +180,6 @@ const EditWithGeneratedProps = ( props ) => {
 			blockBindings,
 			clientId,
 			context,
-			name,
 			registeredSources,
 		]
 	);
@@ -262,7 +261,6 @@ const EditWithGeneratedProps = ( props ) => {
 			hasPatternOverrides,
 			setAttributes,
 			registeredSources,
-			name,
 			registry,
 		]
 	);

package/src/components/block-styles/preview-panel.js

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { getBlockType } from '@wordpress/blocks';
 import { useMemo } from '@wordpress/element';
 
 /**
@@ -16,11 +15,10 @@ export default function BlockStylesPreviewPanel( {
 	className,
 	activeStyle,
 } ) {
-	const example = getBlockType( genericPreviewBlock.name )?.example;
 	const styleClassName = replaceActiveStyle( className, activeStyle, style );
 	const previewBlocks = useMemo( () => {
 		return {
-			...genericPreviewBlock,
+			name: genericPreviewBlock.name,
 			title: style.label || style.name,
 			description: style.description,
 			initialAttributes: {
@@ -29,9 +27,9 @@ export default function BlockStylesPreviewPanel( {
 					styleClassName +
 					' block-editor-block-styles__block-preview-container',
 			},
-			example,
+			example: genericPreviewBlock,
 		};
-	}, [ genericPreviewBlock, styleClassName ] );
+	}, [ genericPreviewBlock, style, styleClassName ] );
 
 	return <InserterPreviewPanel item={ previewBlocks } />;
 }

package/src/components/block-styles/use-styles-for-block.js

@@ -37,7 +37,7 @@ function useGenericPreviewBlock( block, type ) {
 		if ( block ) {
 			return cloneBlock( block );
 		}
-	}, [ type?.example ? block?.name : block, type ] );
+	}, [ block, type?.example, type?.name ] );
 }
 
 /**
@@ -63,7 +63,7 @@ export default function useStylesForBlocks( { clientId, onSwitch } ) {
 		const { getBlockStyles } = select( blocksStore );
 
 		return {
-			block,
+			block: ! blockType?.example ? block : null,
 			blockType,
 			styles: getBlockStyles( block.name ),
 			className: block.attributes.className || '',

package/src/components/block-toolbar/index.js

@@ -32,7 +32,6 @@ import { BlockGroupToolbar } from '../convert-to-group-buttons';
 import BlockEditVisuallyButton from '../block-edit-visually-button';
 import { useShowHoveredOrFocusedGestures } from './utils';
 import { store as blockEditorStore } from '../../store';
-import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
 import { useHasBlockToolbar } from './use-has-block-toolbar';
 import ChangeDesign from './change-design';
@@ -265,11 +264,7 @@ export function PrivateBlockToolbar( {
 							group="other"
 							className="block-editor-block-toolbar__slot"
 						/>
-						<__unstableBlockNameContext.Provider
-							value={ blockType?.name }
-						>
-							<__unstableBlockToolbarLastItem.Slot />
-						</__unstableBlockNameContext.Provider>
+						<__unstableBlockToolbarLastItem.Slot />
 					</>
 				) }
 				<BlockEditVisuallyButton clientIds={ blockClientIds } />

package/src/components/block-toolbar/style.scss

@@ -193,6 +193,12 @@
 				font-size: $helptext-font-size;
 			}
 		}
+
+		.block-editor-block-icon {
+			width: 0 !important;
+			height: 0 !important;
+			min-width: 0 !important;
+		}
 	}
 
 	// Padding overrides.
@@ -201,12 +207,6 @@
 		padding-right: 6px;
 	}
 
-	.block-editor-block-icon {
-		width: 0 !important;
-		height: 0 !important;
-		min-width: 0 !important;
-	}
-
 	// Parent selector overrides
 	.block-editor-block-parent-selector .block-editor-block-parent-selector__button {
 		border-top-right-radius: 0;

package/src/components/content-only-controls/index.js

@@ -295,19 +295,13 @@ function BlockFields( { clientId } ) {
 				field.Edit = createConfiguredControl( {
 					control: fieldDef.type,
 					clientId,
-					updateBlockAttributes,
 					fieldDef,
 				} );
 			}
 
 			return field;
 		} );
-	}, [
-		blockTypeFields,
-		blockType?.attributes,
-		clientId,
-		updateBlockAttributes,
-	] );
+	}, [ blockTypeFields, blockType?.attributes, clientId ] );
 
 	const handleToggleField = ( fieldId ) => {
 		setForm( ( prev ) => {
@@ -351,26 +345,7 @@ function BlockFields( { clientId } ) {
 				fields={ dataFormFields }
 				form={ form }
 				onChange={ ( changes ) => {
-					// Map field values to block attributes using field.setValue
-					const mappedChanges = {};
-					Object.entries( changes ).forEach(
-						( [ fieldId, fieldValue ] ) => {
-							const field = dataFormFields.find(
-								( f ) => f.id === fieldId
-							);
-							if ( field && field.setValue ) {
-								const updates = field.setValue( {
-									item: attributes,
-									value: fieldValue,
-								} );
-								Object.assign( mappedChanges, updates );
-							} else {
-								// For fields without setValue, use the value directly
-								mappedChanges[ fieldId ] = fieldValue;
-							}
-						}
-					);
-					updateBlockAttributes( clientId, mappedChanges );
+					updateBlockAttributes( clientId, changes );
 				} }
 			/>
 		</div>

package/src/components/content-only-controls/link/index.js

@@ -67,15 +67,15 @@ export function getUpdatedLinkAttributes( {
 	};
 }
 
-export default function Link( { data, field, config = {} } ) {
+export default function Link( { data, field, onChange, config = {} } ) {
 	const [ isLinkControlOpen, setIsLinkControlOpen ] = useState( false );
 	const { popoverProps } = useInspectorPopoverPlacement( {
 		isControl: true,
 	} );
-	const { clientId, updateBlockAttributes, fieldDef } = config;
+	const { fieldDef } = config;
 	const updateAttributes = ( newValue ) => {
 		const mappedChanges = field.setValue( { item: data, value: newValue } );
-		updateBlockAttributes( clientId, mappedChanges );
+		onChange( mappedChanges );
 	};
 
 	const value = field.getValue( { item: data } );

package/src/components/content-only-controls/media/index.js

@@ -83,19 +83,19 @@ function MediaThumbnail( { data, field, attachment } ) {
 	return <Icon icon={ mediaIcon } size={ 24 } />;
 }
 
-export default function Media( { data, field, config = {} } ) {
+export default function Media( { data, field, onChange, config = {} } ) {
 	const { popoverProps } = useInspectorPopoverPlacement( {
 		isControl: true,
 	} );
 	const value = field.getValue( { item: data } );
 	const { allowedTypes = [], multiple = false } = field.config || {};
-	const { clientId, updateBlockAttributes, fieldDef } = config;
+	const { fieldDef } = config;
 	const updateAttributes = ( newFieldValue ) => {
 		const mappedChanges = field.setValue( {
 			item: data,
 			value: newFieldValue,
 		} );
-		updateBlockAttributes( clientId, mappedChanges );
+		onChange( mappedChanges );
 	};
 
 	// Check if featured image is supported by checking if it's in the mapping