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

package/src/components/content-only-controls/fields-dropdown-menu.js

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+import { moreVertical, check } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useInspectorPopoverPlacement } from './use-inspector-popover-placement';
+
+export default function FieldsDropdownMenu( {
+	fields,
+	visibleFields,
+	onToggleField,
+} ) {
+	const { popoverProps } = useInspectorPopoverPlacement();
+
+	if ( ! fields || fields.length === 0 ) {
+		return null;
+	}
+
+	return (
+		<DropdownMenu
+			icon={ moreVertical }
+			label={ __( 'Options' ) }
+			popoverProps={ popoverProps }
+		>
+			{ ( { onClose } ) => (
+				<MenuGroup label={ __( 'Show / Hide' ) }>
+					{ fields.map( ( field ) => {
+						const isVisible = visibleFields.includes( field.id );
+						return (
+							<MenuItem
+								key={ field.id }
+								isSelected={ isVisible }
+								onClick={ () => {
+									onToggleField( field.id );
+									onClose();
+								} }
+								role="menuitemcheckbox"
+								icon={ isVisible ? check : null }
+							>
+								{ field.label }
+							</MenuItem>
+						);
+					} ) }
+				</MenuGroup>
+			) }
+		</DropdownMenu>
+	);
+}

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

@@ -1,9 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { store as blocksStore } from '@wordpress/blocks';
 import {
-	__experimentalToolsPanel as ToolsPanel,
+	store as blocksStore,
+	privateApis as blocksPrivateApis,
+} from '@wordpress/blocks';
+import {
 	__experimentalHStack as HStack,
 	Icon,
 	Navigator,
@@ -11,6 +13,8 @@ import {
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { arrowLeft, arrowRight } from '@wordpress/icons';
+import { DataForm } from '@wordpress/dataviews';
+import { useState, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,45 +24,153 @@ import { store as blockEditorStore } from '../../store';
 import BlockIcon from '../block-icon';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import useBlockDisplayInformation from '../use-block-display-information';
-import { useInspectorPopoverPlacement } from './use-inspector-popover-placement';
+const { fieldsKey, formKey } = unlock( blocksPrivateApis );
+import FieldsDropdownMenu from './fields-dropdown-menu';
 
 // controls
-import PlainText from './plain-text';
 import RichText from './rich-text';
 import Media from './media';
 import Link from './link';
 
-const controls = {
-	PlainText,
-	RichText,
-	Media,
-	Link,
+const CONTROLS = {
+	richtext: RichText,
+	media: Media,
+	link: Link,
 };
 
-function BlockAttributeToolsPanelItem( {
-	clientId,
-	control,
-	blockType,
-	attributeValues,
-} ) {
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-	const ControlComponent = controls[ control.type ];
+/**
+ * Creates a configured control component that wraps a custom control
+ * and passes configuration as props.
+ *
+ * @param {Object} config         - The control configuration
+ * @param {string} config.control - The control type (key in CONTROLS map)
+ * @return {Function} A wrapped control component
+ */
+function createConfiguredControl( config ) {
+	const { control, ...controlConfig } = config;
+	const ControlComponent = CONTROLS[ control ];
 
 	if ( ! ControlComponent ) {
-		return null;
+		throw new Error( `Control type "${ control }" not found` );
 	}
 
-	return (
-		<ControlComponent
-			clientId={ clientId }
-			control={ control }
-			blockType={ blockType }
-			attributeValues={ attributeValues }
-			updateAttributes={ ( attributes ) =>
-				updateBlockAttributes( clientId, attributes )
-			}
-		/>
-	);
+	return function ConfiguredControl( props ) {
+		return <ControlComponent { ...props } config={ controlConfig } />;
+	};
+}
+
+/**
+ * Normalize a media value to a canonical structure.
+ * Only includes properties that are present in the field's mapping (if provided).
+ *
+ * @param {Object} value    - The mapped value from the block attributes (with canonical keys)
+ * @param {Object} fieldDef - Optional field definition containing the mapping
+ * @return {Object} Normalized media value with canonical properties
+ */
+function normalizeMediaValue( value, fieldDef ) {
+	const defaults = {
+		id: null,
+		url: '',
+		caption: '',
+		alt: '',
+		type: 'image',
+		poster: '',
+		featuredImage: false,
+		link: '',
+	};
+
+	const result = {};
+
+	// If there's a mapping, only include properties that are in it
+	if ( fieldDef?.mapping ) {
+		Object.keys( fieldDef.mapping ).forEach( ( key ) => {
+			result[ key ] = value?.[ key ] ?? defaults[ key ] ?? '';
+		} );
+		return result;
+	}
+
+	// Without mapping, include all default properties
+	Object.keys( defaults ).forEach( ( key ) => {
+		result[ key ] = value?.[ key ] ?? defaults[ key ];
+	} );
+	return result;
+}
+
+/**
+ * Denormalize a media value from canonical structure back to mapped keys.
+ * Only includes properties that are present in the field's mapping.
+ *
+ * @param {Object} value    - The normalized media value
+ * @param {Object} fieldDef - The field definition containing the mapping
+ * @return {Object} Value with only mapped properties
+ */
+function denormalizeMediaValue( value, fieldDef ) {
+	if ( ! fieldDef.mapping ) {
+		return value;
+	}
+
+	const result = {};
+	Object.entries( fieldDef.mapping ).forEach( ( [ key ] ) => {
+		if ( key in value ) {
+			result[ key ] = value[ key ];
+		}
+	} );
+	return result;
+}
+
+/**
+ * Normalize a link value to a canonical structure.
+ * Only includes properties that are present in the field's mapping (if provided).
+ *
+ * @param {Object} value    - The mapped value from the block attributes (with canonical keys)
+ * @param {Object} fieldDef - Optional field definition containing the mapping
+ * @return {Object} Normalized link value with canonical properties
+ */
+function normalizeLinkValue( value, fieldDef ) {
+	const defaults = {
+		url: '',
+		rel: '',
+		linkTarget: '',
+		destination: '',
+	};
+
+	const result = {};
+
+	// If there's a mapping, only include properties that are in it
+	if ( fieldDef?.mapping ) {
+		Object.keys( fieldDef.mapping ).forEach( ( key ) => {
+			result[ key ] = value?.[ key ] ?? defaults[ key ] ?? '';
+		} );
+		return result;
+	}
+
+	// Without mapping, include all default properties
+	Object.keys( defaults ).forEach( ( key ) => {
+		result[ key ] = value?.[ key ] ?? defaults[ key ];
+	} );
+	return result;
+}
+
+/**
+ * Denormalize a link value from canonical structure back to mapped keys.
+ * Only includes properties that are present in the field's mapping.
+ *
+ * @param {Object} value    - The normalized link value
+ * @param {Object} fieldDef - The field definition containing the mapping
+ * @return {Object} Value with only mapped properties
+ */
+function denormalizeLinkValue( value, fieldDef ) {
+	if ( ! fieldDef.mapping ) {
+		return value;
+	}
+
+	const result = {};
+	Object.entries( fieldDef.mapping ).forEach( ( [ key ] ) => {
+		if ( key in value ) {
+			result[ key ] = value[ key ];
+		}
+	} );
+	return result;
 }
 
 function BlockFields( { clientId } ) {
@@ -76,40 +188,167 @@ function BlockFields( { clientId } ) {
 		[ clientId ]
 	);
 
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const blockTitle = useBlockDisplayTitle( {
 		clientId,
 		context: 'list-view',
 	} );
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const popoverPlacementProps = useInspectorPopoverPlacement();
 
-	if ( ! blockType?.fields?.length ) {
+	const blockTypeFields = blockType?.[ fieldsKey ];
+
+	const [ form, setForm ] = useState( () => {
+		return blockType?.[ formKey ];
+	} );
+
+	// Build DataForm fields with proper structure
+	const dataFormFields = useMemo( () => {
+		if ( ! blockTypeFields?.length ) {
+			return [];
+		}
+
+		return blockTypeFields.map( ( fieldDef ) => {
+			const ControlComponent = CONTROLS[ fieldDef.type ];
+
+			const defaultValues = {};
+			if ( fieldDef.mapping && blockType?.attributes ) {
+				Object.entries( fieldDef.mapping ).forEach(
+					( [ key, attrKey ] ) => {
+						defaultValues[ key ] =
+							blockType.attributes[ attrKey ]?.defaultValue ??
+							undefined;
+					}
+				);
+			}
+
+			const field = {
+				id: fieldDef.id,
+				label: fieldDef.label,
+				type: fieldDef.type, // Use the field's type; DataForm will use built-in or custom Edit
+				config: { ...fieldDef.args, defaultValues },
+				hideLabelFromVision: fieldDef.id === 'content',
+				// getValue and setValue handle the mapping to block attributes
+				getValue: ( { item } ) => {
+					if ( fieldDef.mapping ) {
+						// Extract mapped properties from the block attributes
+						const mappedValue = {};
+						Object.entries( fieldDef.mapping ).forEach(
+							( [ key, attrKey ] ) => {
+								mappedValue[ key ] = item[ attrKey ];
+							}
+						);
+
+						// Normalize to canonical structure based on field type
+						if ( fieldDef.type === 'media' ) {
+							return normalizeMediaValue( mappedValue, fieldDef );
+						}
+						if ( fieldDef.type === 'link' ) {
+							return normalizeLinkValue( mappedValue, fieldDef );
+						}
+
+						// For other types, return as-is
+						return mappedValue;
+					}
+					// For simple id-based fields, use the id as the attribute key
+					return item[ fieldDef.id ];
+				},
+				setValue: ( { item, value } ) => {
+					if ( fieldDef.mapping ) {
+						// Denormalize from canonical structure back to mapped keys
+						let denormalizedValue = value;
+						if ( fieldDef.type === 'media' ) {
+							denormalizedValue = denormalizeMediaValue(
+								value,
+								fieldDef
+							);
+						} else if ( fieldDef.type === 'link' ) {
+							denormalizedValue = denormalizeLinkValue(
+								value,
+								fieldDef
+							);
+						}
+
+						// Build an object with all mapped attributes
+						const updates = {};
+						Object.entries( fieldDef.mapping ).forEach(
+							( [ key, attrKey ] ) => {
+								// If key is explicitly in value, use it (even if undefined to allow clearing)
+								// Otherwise, preserve the old value
+								if ( key in denormalizedValue ) {
+									updates[ attrKey ] =
+										denormalizedValue[ key ];
+								} else {
+									updates[ attrKey ] = item[ attrKey ];
+								}
+							}
+						);
+						return updates;
+					}
+					// For simple id-based fields, use the id as the attribute key
+					return { [ fieldDef.id ]: value };
+				},
+			};
+
+			// Only add custom Edit component if one exists for this type
+			if ( ControlComponent ) {
+				// Use EditConfig pattern: Edit is an object with control type and config props
+				field.Edit = createConfiguredControl( {
+					control: fieldDef.type,
+					clientId,
+					fieldDef,
+				} );
+			}
+
+			return field;
+		} );
+	}, [ blockTypeFields, blockType?.attributes, clientId ] );
+
+	const handleToggleField = ( fieldId ) => {
+		setForm( ( prev ) => {
+			if ( prev.fields?.includes( fieldId ) ) {
+				return {
+					...prev,
+					fields: prev.fields.filter( ( id ) => id !== fieldId ),
+				};
+			}
+
+			return {
+				...prev,
+				fields: [ ...( prev.fields || [] ), fieldId ],
+			};
+		} );
+	};
+
+	if ( ! blockTypeFields?.length ) {
 		// TODO - we might still want to show a placeholder for blocks with no fields.
 		// for example, a way to select the block.
 		return null;
 	}
 
 	return (
-		<ToolsPanel
-			label={
-				<HStack spacing={ 1 }>
-					<BlockIcon icon={ blockInformation?.icon } />
-					<div>{ blockTitle }</div>
+		<div className="block-editor-content-only-controls__fields-container">
+			<div className="block-editor-content-only-controls__fields-header">
+				<HStack spacing={ 1 } justify="space-between" expanded>
+					<HStack spacing={ 1 } justify="flex-start">
+						<BlockIcon icon={ blockInformation?.icon } />
+						<div>{ blockTitle }</div>
+					</HStack>
+					<FieldsDropdownMenu
+						fields={ dataFormFields }
+						visibleFields={ form.fields }
+						onToggleField={ handleToggleField }
+					/>
 				</HStack>
-			}
-			panelId={ clientId }
-			dropdownMenuProps={ popoverPlacementProps }
-		>
-			{ blockType?.fields?.map( ( field, index ) => (
-				<BlockAttributeToolsPanelItem
-					key={ `${ clientId }/${ index }` }
-					clientId={ clientId }
-					control={ field }
-					blockType={ blockType }
-					attributeValues={ attributes }
-				/>
-			) ) }
-		</ToolsPanel>
+			</div>
+			<DataForm
+				data={ attributes }
+				fields={ dataFormFields }
+				form={ form }
+				onChange={ ( changes ) => {
+					updateBlockAttributes( clientId, changes );
+				} }
+			/>
+		</div>
 	);
 }
 

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

@@ -4,7 +4,6 @@
 import {
 	Button,
 	Icon,
-	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalGrid as Grid,
 	Popover,
 } from '@wordpress/components';
@@ -68,35 +67,21 @@ export function getUpdatedLinkAttributes( {
 	};
 }
 
-export default function Link( {
-	clientId,
-	control,
-	blockType,
-	attributeValues,
-	updateAttributes,
-} ) {
+export default function Link( { data, field, onChange, config = {} } ) {
 	const [ isLinkControlOpen, setIsLinkControlOpen ] = useState( false );
 	const { popoverProps } = useInspectorPopoverPlacement( {
 		isControl: true,
 	} );
-	const hrefKey = control.mapping.href;
-	const relKey = control.mapping.rel;
-	const targetKey = control.mapping.target;
-	const destinationKey = control.mapping.destination;
-
-	const href = attributeValues[ hrefKey ];
-	const rel = attributeValues[ relKey ];
-	const target = attributeValues[ targetKey ];
-	const destination = attributeValues[ destinationKey ];
-
-	const hrefDefaultValue =
-		blockType.attributes[ href ]?.defaultValue ?? undefined;
-	const relDefaultValue =
-		blockType.attributes[ rel ]?.defaultValue ?? undefined;
-	const targetDefaultValue =
-		blockType.attributes[ target ]?.defaultValue ?? undefined;
-	const destinationDefaultValue =
-		blockType.attributes[ destination ]?.defaultValue ?? undefined;
+	const { fieldDef } = config;
+	const updateAttributes = ( newValue ) => {
+		const mappedChanges = field.setValue( { item: data, value: newValue } );
+		onChange( mappedChanges );
+	};
+
+	const value = field.getValue( { item: data } );
+	const url = value?.url;
+	const rel = value?.rel || '';
+	const target = value?.linkTarget;
 
 	const opensInNewTab = target === NEW_TAB_TARGET;
 	const nofollow = rel === NOFOLLOW_REL;
@@ -104,25 +89,12 @@ export default function Link( {
 	// Memoize link value to avoid overriding the LinkControl's internal state.
 	// This is a temporary fix. See https://github.com/WordPress/gutenberg/issues/51256.
 	const linkValue = useMemo(
-		() => ( { url: href, opensInNewTab, nofollow } ),
-		[ href, opensInNewTab, nofollow ]
+		() => ( { url, opensInNewTab, nofollow } ),
+		[ url, opensInNewTab, nofollow ]
 	);
 
 	return (
-		<ToolsPanelItem
-			panelId={ clientId }
-			label={ control.label }
-			hasValue={ () => !! href }
-			onDeselect={ () => {
-				updateAttributes( {
-					[ hrefKey ]: hrefDefaultValue,
-					[ relKey ]: relDefaultValue,
-					[ targetKey ]: targetDefaultValue,
-					[ destinationKey ]: destinationDefaultValue,
-				} );
-			} }
-			isShownByDefault={ control.shownByDefault }
-		>
+		<>
 			<Button
 				__next40pxDefaultSize
 				className="block-editor-content-only-controls__link"
@@ -136,15 +108,15 @@ export default function Link( {
 					templateColumns="24px 1fr"
 					className="block-editor-content-only-controls__link-row"
 				>
-					{ href && (
+					{ url && (
 						<>
 							<Icon icon={ link } size={ 24 } />
 							<span className="block-editor-content-only-controls__link-title">
-								{ href }
+								{ url }
 							</span>
 						</>
 					) }
-					{ ! href && (
+					{ ! url && (
 						<>
 							<Icon
 								icon={ link }
@@ -173,23 +145,56 @@ export default function Link( {
 								...newValues,
 							} );
 
-							updateAttributes( {
-								[ hrefKey ]: updatedAttrs.url,
-								[ relKey ]: updatedAttrs.rel,
-								[ targetKey ]: updatedAttrs.linkTarget,
-							} );
+							// Build update object dynamically based on what's in the mapping
+							const updateValue = { ...value };
+
+							if ( fieldDef?.mapping ) {
+								Object.keys( fieldDef.mapping ).forEach(
+									( key ) => {
+										if ( key === 'href' || key === 'url' ) {
+											updateValue[ key ] =
+												updatedAttrs.url;
+										} else if ( key === 'rel' ) {
+											updateValue[ key ] =
+												updatedAttrs.rel;
+										} else if (
+											key === 'target' ||
+											key === 'linkTarget'
+										) {
+											updateValue[ key ] =
+												updatedAttrs.linkTarget;
+										}
+									}
+								);
+							}
+
+							updateAttributes( updateValue );
 						} }
 						onRemove={ () => {
-							updateAttributes( {
-								[ hrefKey ]: hrefDefaultValue,
-								[ relKey ]: relDefaultValue,
-								[ targetKey ]: targetDefaultValue,
-								[ destinationKey ]: destinationDefaultValue,
-							} );
+							// Remove all link-related properties based on what's in the mapping
+							const removeValue = {};
+
+							if ( fieldDef?.mapping ) {
+								Object.keys( fieldDef.mapping ).forEach(
+									( key ) => {
+										if (
+											key === 'href' ||
+											key === 'url' ||
+											key === 'rel' ||
+											key === 'target' ||
+											key === 'linkTarget'
+										) {
+											removeValue[ key ] = undefined;
+										}
+									}
+								);
+							}
+
+							updateAttributes( removeValue );
 						} }
 					/>
 				</Popover>
 			) }
-		</ToolsPanelItem>
+		</>
 	);
 }