@wordpress/block-editor 15.9.1-next.8fd3f8831.0 → 15.10.1-next.06ee73755.0

package/src/hooks/block-fields/index.js

@@ -0,0 +1,429 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
+import {
+	__experimentalHStack as HStack,
+	__experimentalTruncate as Truncate,
+} from '@wordpress/components';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { DataForm } from '@wordpress/dataviews';
+import { useContext, useState, useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import BlockIcon from '../../components/block-icon';
+import useBlockDisplayTitle from '../../components/block-title/use-block-display-title';
+import useBlockDisplayInformation from '../../components/use-block-display-information';
+const { fieldsKey, formKey } = unlock( blocksPrivateApis );
+import FieldsDropdownMenu from './fields-dropdown-menu';
+import { PrivateBlockContext } from '../../components/block-list/private-block-context';
+import { PrivateInspectorControlsFill } from '../../components/inspector-controls/fill';
+
+// controls
+import RichText from './rich-text';
+import Media from './media';
+import Link from './link';
+
+const CONTROLS = {
+	richtext: RichText,
+	media: Media,
+	link: Link,
+};
+
+/**
+ * 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 ) {
+		throw new Error( `Control type "${ control }" not found` );
+	}
+
+	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;
+}
+
+/**
+ * Component that renders a DataForm for a single block's attributes
+ * @param {Object}   props
+ * @param {string}   props.clientId      The clientId of the block.
+ * @param {Object}   props.blockType     The blockType definition.
+ * @param {Object}   props.attributes    The block's attribute values.
+ * @param {Function} props.setAttributes Action to set the block's attributes.
+ * @param {boolean}  props.isCollapsed   Whether the DataForm is rendered as 'collapsed' with only the first field
+ *                                       displayed by default. When collapsed a dropdown is displayed to allow
+ *                                       displaying additional fields. The block's title is displayed as the title.
+ *                                       The collapsed mode is often used when multiple BlockForms are shown together.
+ */
+function BlockFields( {
+	clientId,
+	blockType,
+	attributes,
+	setAttributes,
+	isCollapsed = false,
+} ) {
+	const blockTitle = useBlockDisplayTitle( {
+		clientId,
+		context: 'list-view',
+	} );
+	const blockInformation = useBlockDisplayInformation( clientId );
+
+	const blockTypeFields = blockType?.[ fieldsKey ];
+
+	const computedForm = useMemo( () => {
+		if ( ! isCollapsed ) {
+			return blockType?.[ formKey ];
+		}
+
+		// For a collapsed form only show the first field by default.
+		return {
+			...blockType?.[ formKey ],
+			fields: [ blockType?.[ formKey ]?.fields?.[ 0 ] ],
+		};
+	}, [ blockType, isCollapsed ] );
+
+	const [ form, setForm ] = useState( computedForm );
+
+	// 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 (
+		<div className="block-editor-block-fields__container">
+			<div className="block-editor-block-fields__header">
+				<HStack spacing={ 1 }>
+					{ isCollapsed && (
+						<>
+							<BlockIcon
+								className="block-editor-block-fields__header-icon"
+								icon={ blockInformation?.icon }
+							/>
+							<h2 className="block-editor-block-fields__header-title">
+								<Truncate numberOfLines={ 1 }>
+									{ blockTitle }
+								</Truncate>
+							</h2>
+							<FieldsDropdownMenu
+								fields={ dataFormFields }
+								visibleFields={ form.fields }
+								onToggleField={ handleToggleField }
+							/>
+						</>
+					) }
+					{ ! isCollapsed && (
+						<h2 className="block-editor-block-fields__header-title">
+							{ __( 'Content' ) }
+						</h2>
+					) }
+				</HStack>
+			</div>
+			<DataForm
+				data={ attributes }
+				fields={ dataFormFields }
+				form={ form }
+				onChange={ setAttributes }
+			/>
+		</div>
+	);
+}
+
+const withBlockFields = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		const {
+			blockType,
+			isSelectionWithinCurrentSection,
+			isSectionBlock,
+			blockEditingMode,
+			isSelected,
+		} = useContext( PrivateBlockContext );
+
+		const shouldShowBlockFields =
+			window?.__experimentalContentOnlyInspectorFields;
+		const blockTypeFields = blockType?.[ fieldsKey ];
+
+		if ( ! shouldShowBlockFields || ! blockTypeFields?.length ) {
+			return <BlockEdit key="edit" { ...props } />;
+		}
+
+		return (
+			<>
+				<BlockEdit key="edit" { ...props } />
+				{
+					// Display the controls of all inner blocks for section/pattern editing.
+					isSelectionWithinCurrentSection &&
+						( isSectionBlock ||
+							blockEditingMode === 'contentOnly' ) && (
+							<PrivateInspectorControlsFill
+								group="content"
+								forceDisplayControls
+							>
+								<BlockFields
+									{ ...props }
+									blockType={ blockType }
+									isCollapsed
+								/>
+							</PrivateInspectorControlsFill>
+						)
+				}
+				{ ! isSelectionWithinCurrentSection && isSelected && (
+					<PrivateInspectorControlsFill group="content">
+						<BlockFields { ...props } blockType={ blockType } />
+					</PrivateInspectorControlsFill>
+				) }
+			</>
+		);
+	}
+);
+
+addFilter(
+	'editor.BlockEdit',
+	'core/content-only-controls/block-fields',
+	withBlockFields
+);

package/src/hooks/block-fields/link/index.js

@@ -0,0 +1,200 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Icon,
+	__experimentalGrid as Grid,
+	Popover,
+} from '@wordpress/components';
+import { useMemo, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { link } from '@wordpress/icons';
+import { prependHTTP } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import LinkControl from '../../../components/link-control';
+import { useInspectorPopoverPlacement } from '../use-inspector-popover-placement';
+
+export const NEW_TAB_REL = 'noreferrer noopener';
+export const NEW_TAB_TARGET = '_blank';
+export const NOFOLLOW_REL = 'nofollow';
+
+/**
+ * Updates the link attributes.
+ *
+ * @param {Object}  attributes               The current block attributes.
+ * @param {string}  attributes.rel           The current link rel attribute.
+ * @param {string}  attributes.url           The current link url.
+ * @param {boolean} attributes.opensInNewTab Whether the link should open in a new window.
+ * @param {boolean} attributes.nofollow      Whether the link should be marked as nofollow.
+ */
+export function getUpdatedLinkAttributes( {
+	rel = '',
+	url = '',
+	opensInNewTab,
+	nofollow,
+} ) {
+	let newLinkTarget;
+	// Since `rel` is editable attribute, we need to check for existing values and proceed accordingly.
+	let updatedRel = rel;
+
+	if ( opensInNewTab ) {
+		newLinkTarget = NEW_TAB_TARGET;
+		updatedRel = updatedRel?.includes( NEW_TAB_REL )
+			? updatedRel
+			: updatedRel + ` ${ NEW_TAB_REL }`;
+	} else {
+		const relRegex = new RegExp( `\\b${ NEW_TAB_REL }\\s*`, 'g' );
+		updatedRel = updatedRel?.replace( relRegex, '' ).trim();
+	}
+
+	if ( nofollow ) {
+		updatedRel = updatedRel?.includes( NOFOLLOW_REL )
+			? updatedRel
+			: ( updatedRel + ` ${ NOFOLLOW_REL }` ).trim();
+	} else {
+		const relRegex = new RegExp( `\\b${ NOFOLLOW_REL }\\s*`, 'g' );
+		updatedRel = updatedRel?.replace( relRegex, '' ).trim();
+	}
+
+	return {
+		url: prependHTTP( url ),
+		linkTarget: newLinkTarget,
+		rel: updatedRel || undefined,
+	};
+}
+
+export default function Link( { data, field, onChange, config = {} } ) {
+	const [ isLinkControlOpen, setIsLinkControlOpen ] = useState( false );
+	const { popoverProps } = useInspectorPopoverPlacement( {
+		isControl: true,
+	} );
+	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;
+
+	// 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, opensInNewTab, nofollow } ),
+		[ url, opensInNewTab, nofollow ]
+	);
+
+	return (
+		<>
+			<Button
+				__next40pxDefaultSize
+				className="block-editor-content-only-controls__link"
+				onClick={ () => {
+					setIsLinkControlOpen( true );
+				} }
+			>
+				<Grid
+					rowGap={ 0 }
+					columnGap={ 8 }
+					templateColumns="24px 1fr"
+					className="block-editor-content-only-controls__link-row"
+				>
+					{ url && (
+						<>
+							<Icon icon={ link } size={ 24 } />
+							<span className="block-editor-content-only-controls__link-title">
+								{ url }
+							</span>
+						</>
+					) }
+					{ ! url && (
+						<>
+							<Icon
+								icon={ link }
+								size={ 24 }
+								style={ { opacity: 0.3 } }
+							/>
+							<span className="block-editor-content-only-controls__link-title">
+								{ __( 'Link' ) }
+							</span>
+						</>
+					) }
+				</Grid>
+			</Button>
+			{ isLinkControlOpen && (
+				<Popover
+					onClose={ () => {
+						setIsLinkControlOpen( false );
+					} }
+					{ ...( popoverProps ?? {} ) }
+				>
+					<LinkControl
+						value={ linkValue }
+						onChange={ ( newValues ) => {
+							const updatedAttrs = getUpdatedLinkAttributes( {
+								rel,
+								...newValues,
+							} );
+
+							// 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={ () => {
+							// 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>
+			) }
+		</>
+	);
+}