@wordpress/block-editor 15.10.0 → 15.10.1-next.79a2f3cdd.0

package/src/components/text-alignment-control/index.js

@@ -76,7 +76,6 @@ export default function TextAlignmentControl( {
 	return (
 		<ToggleGroupControl
 			isDeselectable
-			__nextHasNoMarginBottom
 			__next40pxDefaultSize
 			label={ __( 'Text alignment' ) }
 			className={ clsx(

package/src/components/text-decoration-control/index.js

@@ -49,7 +49,6 @@ export default function TextDecorationControl( {
 	return (
 		<ToggleGroupControl
 			isDeselectable
-			__nextHasNoMarginBottom
 			__next40pxDefaultSize
 			label={ __( 'Decoration' ) }
 			className={ clsx(

package/src/components/text-transform-control/index.js

@@ -55,7 +55,6 @@ export default function TextTransformControl( { className, value, onChange } ) {
 	return (
 		<ToggleGroupControl
 			isDeselectable
-			__nextHasNoMarginBottom
 			__next40pxDefaultSize
 			label={ __( 'Letter case' ) }
 			className={ clsx(

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

@@ -476,7 +476,7 @@ class URLInput extends Component {
 		}
 
 		return (
-			<BaseControl __nextHasNoMarginBottom { ...controlProps }>
+			<BaseControl { ...controlProps }>
 				<InputControl { ...inputProps } __next40pxDefaultSize />
 				{ loading && <Spinner /> }
 			</BaseControl>

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

@@ -228,14 +228,12 @@ const ImageURLInputUI = ( {
 	const advancedOptions = (
 		<VStack spacing="3">
 			<ToggleControl
-				__nextHasNoMarginBottom
 				label={ __( 'Open in new tab' ) }
 				onChange={ onSetNewTab }
 				checked={ linkTarget === '_blank' }
 			/>
 			<TextControl
 				__next40pxDefaultSize
-				__nextHasNoMarginBottom
 				label={ __( 'Link relation' ) }
 				value={ rel ?? '' }
 				onChange={ onSetLinkRel }
@@ -252,7 +250,6 @@ const ImageURLInputUI = ( {
 			/>
 			<TextControl
 				__next40pxDefaultSize
-				__nextHasNoMarginBottom
 				label={ __( 'Link CSS class' ) }
 				value={ linkClass || '' }
 				onChange={ onSetLinkClass }

package/src/components/url-popover/stories/index.story.jsx

@@ -37,7 +37,6 @@ const TestURLPopover = () => {
 					onClose={ close }
 					renderSettings={ () => (
 						<ToggleControl
-							__nextHasNoMarginBottom
 							label={ __( 'Open in new tab' ) }
 							onChange={ setTarget }
 						/>

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

@@ -29,12 +29,17 @@ export default function useResizeCanvas( deviceType ) {
 	const getCanvasWidth = ( device ) => {
 		let deviceWidth;
 
+		/*
+		 * Matches the breakpoints in packages/base-styles/_breakpoints.scss,
+		 * and breakpoints in packages/compose/src/hooks/use-viewport-match/index.js.
+		 * minus 1 to trigger the media query for device preview.
+		 */
 		switch ( device ) {
 			case 'Tablet':
-				deviceWidth = 780;
+				deviceWidth = 782 - 1; // preview for useViewportMatch( 'medium', '<' )
 				break;
 			case 'Mobile':
-				deviceWidth = 360;
+				deviceWidth = 480 - 1; // preview for useViewportMatch( 'mobile', '<' )
 				break;
 			default:
 				return null;

package/src/components/writing-mode-control/index.js

@@ -40,7 +40,6 @@ export default function WritingModeControl( { className, value, onChange } ) {
 	return (
 		<ToggleGroupControl
 			isDeselectable
-			__nextHasNoMarginBottom
 			__next40pxDefaultSize
 			label={ __( 'Orientation' ) }
 			className={ clsx( 'block-editor-writing-mode-control', className ) }

package/src/content.scss

@@ -14,7 +14,3 @@
 @use "./components/plain-text/content.scss" as *;
 @use "./components/rich-text/content.scss" as *;
 @use "./components/warning/content.scss" as *;
-
-// To do: ideally the iframe does not contain UI, but there's still the block
-// placeholders that will be moved to shadow DOM in the future.
-@include wordpress-admin-schemes();

package/src/hooks/anchor.js

@@ -20,13 +20,6 @@ import { useBlockEditingMode } from '../components/block-editing-mode';
  */
 const ANCHOR_REGEX = /[\s#]/g;
 
-const ANCHOR_SCHEMA = {
-	type: 'string',
-	source: 'attribute',
-	attribute: 'id',
-	selector: '*',
-};
-
 /**
  * Filters registered block settings, extending attributes with anchor using ID
  * of the first node.
@@ -44,7 +37,9 @@ export function addAttribute( settings ) {
 		// Gracefully handle if settings.attributes is undefined.
 		settings.attributes = {
 			...settings.attributes,
-			anchor: ANCHOR_SCHEMA,
+			anchor: {
+				type: 'string',
+			},
 		};
 	}
 
@@ -63,7 +58,6 @@ function BlockEditAnchorControlPure( { anchor, setAttributes } ) {
 	return (
 		<InspectorControls group="advanced">
 			<TextControl
-				__nextHasNoMarginBottom
 				__next40pxDefaultSize
 				className="html-anchor-control"
 				label={ __( 'HTML anchor' ) }
@@ -91,7 +85,7 @@ function BlockEditAnchorControlPure( { anchor, setAttributes } ) {
 				onChange={ ( nextValue ) => {
 					nextValue = nextValue.replace( ANCHOR_REGEX, '-' );
 					setAttributes( {
-						anchor: nextValue,
+						anchor: nextValue !== '' ? nextValue : undefined,
 					} );
 				} }
 				autoCapitalize="none"

package/src/hooks/auto-inspector-controls.js

@@ -0,0 +1,95 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockType } from '@wordpress/blocks';
+import { PanelBody } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { DataForm } from '@wordpress/dataviews';
+import { useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import InspectorControls from '../components/inspector-controls';
+import { useBlockEditingMode } from '../components/block-editing-mode';
+import { store as blockEditorStore } from '../store';
+import { generateFieldsFromAttributes } from './generate-fields-from-attributes';
+
+/**
+ * Checks if a block has any attributes marked for auto-generated inspector controls.
+ *
+ * @param {Object} blockTypeAttributes - The block type's attributes object.
+ * @return {boolean} True if any attribute has __experimentalAutoInspectorControl marker.
+ */
+function hasAutoInspectorControlAttributes( blockTypeAttributes ) {
+	if ( ! blockTypeAttributes ) {
+		return false;
+	}
+	return Object.values( blockTypeAttributes ).some(
+		( attr ) => attr?.__experimentalAutoInspectorControl
+	);
+}
+
+/**
+ * Renders DataForm-based inspector controls for auto-registered PHP-only blocks.
+ *
+ * Fields are generated on-the-fly from attributes marked with `__experimentalAutoInspectorControl`
+ * during PHP registration.
+ *
+ * @param {Object}   props               Component props.
+ * @param {string}   props.name          Block name.
+ * @param {string}   props.clientId      Block client ID.
+ * @param {Function} props.setAttributes Function to update block attributes.
+ */
+function AutoRegisterControls( { name, clientId, setAttributes } ) {
+	const blockEditingMode = useBlockEditingMode();
+
+	const attributes = useSelect(
+		( select ) => select( blockEditorStore ).getBlockAttributes( clientId ),
+		[ clientId ]
+	);
+
+	const blockType = getBlockType( name );
+
+	// Generate fields from user-defined attributes marked by PHP.
+	// The __experimentalAutoInspectorControl marker excludes block support attributes
+	// (which have their own UI) and internal state (role: 'local').
+	// Memoized since blockType.attributes don't change after registration.
+	const { fields, form } = useMemo( () => {
+		if ( ! blockType?.attributes ) {
+			return { fields: [], form: { fields: [] } };
+		}
+		return generateFieldsFromAttributes( blockType.attributes );
+	}, [ blockType?.attributes ] );
+
+	if ( blockEditingMode !== 'default' ) {
+		return null;
+	}
+
+	if ( ! fields || fields.length === 0 ) {
+		return null;
+	}
+
+	return (
+		<InspectorControls>
+			<PanelBody title={ __( 'Settings' ) }>
+				<DataForm
+					data={ attributes }
+					fields={ fields }
+					form={ form }
+					onChange={ setAttributes }
+				/>
+			</PanelBody>
+		</InspectorControls>
+	);
+}
+
+export default {
+	edit: AutoRegisterControls,
+	attributeKeys: [],
+	hasSupport( name ) {
+		const blockType = getBlockType( name );
+		return hasAutoInspectorControlAttributes( blockType?.attributes );
+	},
+};

package/src/hooks/block-fields/fields-dropdown-menu.js

@@ -0,0 +1,54 @@
+/**
+ * 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 }
+			toggleProps={ { size: 'small' } }
+		>
+			{ ( { 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/hooks/block-fields/index.js

@@ -0,0 +1,392 @@
+/**
+ * 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';
+
+/**
+ * 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;
+}
+
+function BlockFields( { clientId, blockType, attributes, setAttributes } ) {
+	const blockTitle = useBlockDisplayTitle( {
+		clientId,
+		context: 'list-view',
+	} );
+	const blockInformation = useBlockDisplayInformation( clientId );
+
+	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 (
+		<div className="block-editor-block-fields__container">
+			<div className="block-editor-block-fields__header">
+				<HStack spacing={ 1 }>
+					<BlockIcon
+						className="block-editor-block-fields__header-icon"
+						icon={ blockInformation?.icon }
+					/>
+					<Truncate
+						className="block-editor-block-fields__header-title"
+						numberOfLines={ 1 }
+					>
+						{ blockTitle }
+					</Truncate>
+					<FieldsDropdownMenu
+						fields={ dataFormFields }
+						visibleFields={ form.fields }
+						onToggleField={ handleToggleField }
+					/>
+				</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?.__experimentalContentOnlyPatternInsertion &&
+			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 }
+								/>
+							</PrivateInspectorControlsFill>
+						)
+				}
+				{ ! isSelectionWithinCurrentSection && isSelected && (
+					<PrivateInspectorControlsFill group="content">
+						<BlockFields { ...props } blockType={ blockType } />
+					</PrivateInspectorControlsFill>
+				) }
+			</>
+		);
+	}
+);
+
+addFilter(
+	'editor.BlockEdit',
+	'core/content-only-controls/block-fields',
+	withBlockFields
+);