@wordpress/block-editor 15.8.1-next.dc3f6d3c1.0 → 15.9.0

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

@@ -4,11 +4,9 @@
 import {
 	Button,
 	Icon,
-	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalGrid as Grid,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
 	audio as audioIcon,
@@ -26,9 +24,10 @@ import { useInspectorPopoverPlacement } from '../use-inspector-popover-placement
 import { getMediaSelectKey } from '../../../store/private-keys';
 import { store as blockEditorStore } from '../../../store';
 
-function MediaThumbnail( { control, attributeValues, attachment } ) {
-	const { allowedTypes, multiple } = control.args;
-	const mapping = control.mapping;
+function MediaThumbnail( { data, field, attachment } ) {
+	const config = field.config || {};
+	const { allowedTypes = [], multiple = false } = config;
+
 	if ( multiple ) {
 		return 'todo multiple';
 	}
@@ -50,29 +49,17 @@ function MediaThumbnail( { control, attributeValues, attachment } ) {
 	}
 
 	if ( allowedTypes.length === 1 ) {
-		let src;
-		if (
-			allowedTypes[ 0 ] === 'image' &&
-			mapping.src &&
-			attributeValues[ mapping.src ]
-		) {
-			src = attributeValues[ mapping.src ];
-		} else if (
-			allowedTypes[ 0 ] === 'video' &&
-			mapping.poster &&
-			attributeValues[ mapping.poster ]
-		) {
-			src = attributeValues[ mapping.poster ];
-		}
+		const value = field.getValue( { item: data } );
+		const url = value?.url;
 
-		if ( src ) {
+		if ( url ) {
 			return (
 				<img
 					className="block-editor-content-only-controls__media-thumbnail"
 					alt=""
 					width={ 24 }
 					height={ 24 }
-					src={ src }
+					src={ url }
 				/>
 			);
 		}
@@ -96,29 +83,27 @@ function MediaThumbnail( { control, attributeValues, attachment } ) {
 	return <Icon icon={ mediaIcon } size={ 24 } />;
 }
 
-export default function Media( {
-	clientId,
-	control,
-	blockType,
-	attributeValues,
-	updateAttributes,
-} ) {
+export default function Media( { data, field, config = {} } ) {
 	const { popoverProps } = useInspectorPopoverPlacement( {
 		isControl: true,
 	} );
-	const typeKey = control.mapping.type;
-	const idKey = control.mapping.id;
-	const srcKey = control.mapping.src;
-	const captionKey = control.mapping.caption;
-	const altKey = control.mapping.alt;
-	const posterKey = control.mapping.poster;
-	const featuredImageKey = control.mapping.featuredImage;
+	const value = field.getValue( { item: data } );
+	const { allowedTypes = [], multiple = false } = field.config || {};
+	const { clientId, updateBlockAttributes, fieldDef } = config;
+	const updateAttributes = ( newFieldValue ) => {
+		const mappedChanges = field.setValue( {
+			item: data,
+			value: newFieldValue,
+		} );
+		updateBlockAttributes( clientId, mappedChanges );
+	};
 
-	const id = attributeValues[ idKey ];
-	const src = attributeValues[ srcKey ];
-	const caption = attributeValues[ captionKey ];
-	const alt = attributeValues[ altKey ];
-	const useFeaturedImage = attributeValues[ featuredImageKey ];
+	// Check if featured image is supported by checking if it's in the mapping
+	const hasFeaturedImageSupport =
+		fieldDef?.mapping && 'featuredImage' in fieldDef.mapping;
+
+	const id = value?.id;
+	const url = value?.url;
 
 	const attachment = useSelect(
 		( select ) => {
@@ -140,8 +125,8 @@ export default function Media( {
 
 	// TODO - pluralize when multiple.
 	let chooseItemLabel;
-	if ( control.args.allowedTypes.length === 1 ) {
-		const allowedType = control.args.allowedTypes[ 0 ];
+	if ( allowedTypes.length === 1 ) {
+		const allowedType = allowedTypes[ 0 ];
 		if ( allowedType === 'image' ) {
 			chooseItemLabel = __( 'Choose an image…' );
 		} else if ( allowedType === 'video' ) {
@@ -155,131 +140,167 @@ export default function Media( {
 		chooseItemLabel = __( 'Choose a media item…' );
 	}
 
-	const defaultValues = useMemo( () => {
-		return Object.fromEntries(
-			Object.entries( control.mapping ).map( ( [ , attributeKey ] ) => {
-				return [
-					attributeKey,
-					blockType.attributes[ attributeKey ]?.defaultValue ??
-						undefined,
-				];
-			} )
-		);
-	}, [ blockType.attributes, control.mapping ] );
-
 	return (
 		<MediaUploadCheck>
-			<ToolsPanelItem
-				panelId={ clientId }
-				label={ control.label }
-				hasValue={ () => !! src }
-				onDeselect={ () => {
-					updateAttributes( defaultValues );
-				} }
-				isShownByDefault={ control.shownByDefault }
-			>
-				<MediaReplaceFlow
-					className="block-editor-content-only-controls__media-replace-flow"
-					allowedTypes={ control.args.allowedTypes }
-					mediaId={ id }
-					mediaURL={ src }
-					multiple={ control.args.multiple }
-					popoverProps={ popoverProps }
-					onReset={ () => {
-						updateAttributes( defaultValues );
-					} }
-					useFeaturedImage={ !! useFeaturedImage }
-					onToggleFeaturedImage={
-						!! featuredImageKey &&
-						( () => {
-							updateAttributes( {
-								...defaultValues,
-								[ featuredImageKey ]: ! useFeaturedImage,
-							} );
-						} )
-					}
-					onSelect={ ( selectedMedia ) => {
-						if ( selectedMedia.id && selectedMedia.url ) {
-							const optionalAttributes = {};
+			<MediaReplaceFlow
+				className="block-editor-content-only-controls__media-replace-flow"
+				allowedTypes={ allowedTypes }
+				mediaId={ id }
+				mediaURL={ url }
+				multiple={ multiple }
+				popoverProps={ popoverProps }
+				onReset={ () => {
+					// Build reset value dynamically based on mapping
+					const resetValue = {};
 
-							if ( typeKey && selectedMedia.type ) {
-								optionalAttributes[ typeKey ] =
-									selectedMedia.type;
+					if ( fieldDef?.mapping ) {
+						Object.keys( fieldDef.mapping ).forEach( ( key ) => {
+							if (
+								key === 'id' ||
+								key === 'src' ||
+								key === 'url'
+							) {
+								resetValue[ key ] = undefined;
+							} else if ( key === 'caption' || key === 'alt' ) {
+								resetValue[ key ] = '';
 							}
+						} );
+					}
+
+					// Turn off featured image when resetting (only if it's in the mapping)
+					if ( hasFeaturedImageSupport ) {
+						resetValue.featuredImage = false;
+					}
 
+					// Merge with existing value to preserve other field properties
+					updateAttributes( { ...value, ...resetValue } );
+				} }
+				{ ...( hasFeaturedImageSupport && {
+					useFeaturedImage: !! value?.featuredImage,
+					onToggleFeaturedImage: () => {
+						updateAttributes( {
+							...value,
+							featuredImage: ! value?.featuredImage,
+						} );
+					},
+				} ) }
+				onSelect={ ( selectedMedia ) => {
+					if ( selectedMedia.id && selectedMedia.url ) {
+						// Determine mediaType from MIME type, not from object type
+						let mediaType = 'image'; // default
+						if ( selectedMedia.mime_type ) {
 							if (
-								captionKey &&
-								! caption &&
-								selectedMedia.caption
+								selectedMedia.mime_type.startsWith( 'video/' )
 							) {
-								optionalAttributes[ captionKey ] =
-									selectedMedia.caption;
-							}
-							if ( altKey && ! alt && selectedMedia.alt ) {
-								optionalAttributes[ altKey ] =
-									selectedMedia.alt;
-							}
-							if ( posterKey && selectedMedia.poster ) {
-								optionalAttributes[ posterKey ] =
-									selectedMedia.poster;
+								mediaType = 'video';
+							} else if (
+								selectedMedia.mime_type.startsWith( 'audio/' )
+							) {
+								mediaType = 'audio';
 							}
+						}
+
+						// Build new value dynamically based on what's in the mapping
+						const newValue = {};
 
-							updateAttributes( {
-								[ idKey ]: selectedMedia.id,
-								[ srcKey ]: selectedMedia.url,
-								...optionalAttributes,
-							} );
+						// Iterate over mapping keys and set values for supported properties
+						if ( fieldDef?.mapping ) {
+							Object.keys( fieldDef.mapping ).forEach(
+								( key ) => {
+									if ( key === 'id' ) {
+										newValue[ key ] = selectedMedia.id;
+									} else if (
+										key === 'src' ||
+										key === 'url'
+									) {
+										newValue[ key ] = selectedMedia.url;
+									} else if ( key === 'type' ) {
+										newValue[ key ] = mediaType;
+									} else if (
+										key === 'link' &&
+										selectedMedia.link
+									) {
+										newValue[ key ] = selectedMedia.link;
+									} else if (
+										key === 'caption' &&
+										! value?.caption &&
+										selectedMedia.caption
+									) {
+										newValue[ key ] = selectedMedia.caption;
+									} else if (
+										key === 'alt' &&
+										! value?.alt &&
+										selectedMedia.alt
+									) {
+										newValue[ key ] = selectedMedia.alt;
+									} else if (
+										key === 'poster' &&
+										selectedMedia.poster
+									) {
+										newValue[ key ] = selectedMedia.poster;
+									}
+								}
+							);
 						}
-					} }
-					renderToggle={ ( buttonProps ) => (
-						<Button
-							__next40pxDefaultSize
-							className="block-editor-content-only-controls__media"
-							{ ...buttonProps }
+
+						// Turn off featured image when manually selecting media
+						if ( hasFeaturedImageSupport ) {
+							newValue.featuredImage = false;
+						}
+
+						// Merge with existing value to preserve other field properties
+						const finalValue = { ...value, ...newValue };
+						updateAttributes( finalValue );
+					}
+				} }
+				renderToggle={ ( buttonProps ) => (
+					<Button
+						__next40pxDefaultSize
+						className="block-editor-content-only-controls__media"
+						{ ...buttonProps }
+					>
+						<Grid
+							rowGap={ 0 }
+							columnGap={ 8 }
+							templateColumns="24px 1fr"
+							className="block-editor-content-only-controls__media-row"
 						>
-							<Grid
-								rowGap={ 0 }
-								columnGap={ 8 }
-								templateColumns="24px 1fr"
-								className="block-editor-content-only-controls__media-row"
-							>
-								{ src && (
-									<>
-										<MediaThumbnail
-											attachment={ attachment }
-											control={ control }
-											attributeValues={ attributeValues }
-										/>
-										<span className="block-editor-content-only-controls__media-title">
-											{
-												// TODO - truncate long titles or url smartly (e.g. show filename).
-												attachment?.title?.raw &&
-												attachment?.title?.raw !== ''
-													? attachment?.title?.raw
-													: src
-											}
-										</span>
-									</>
-								) }
-								{ ! src && (
-									<>
-										<span
-											className="block-editor-content-only-controls__media-placeholder"
-											style={ {
-												width: '24px',
-												height: '24px',
-											} }
-										/>
-										<span className="block-editor-content-only-controls__media-title">
-											{ chooseItemLabel }
-										</span>
-									</>
-								) }
-							</Grid>
-						</Button>
-					) }
-				/>
-			</ToolsPanelItem>
+							{ url && (
+								<>
+									<MediaThumbnail
+										attachment={ attachment }
+										field={ field }
+										data={ data }
+									/>
+									<span className="block-editor-content-only-controls__media-title">
+										{
+											// TODO - truncate long titles or url smartly (e.g. show filename).
+											attachment?.title?.raw &&
+											attachment?.title?.raw !== ''
+												? attachment?.title?.raw
+												: url
+										}
+									</span>
+								</>
+							) }
+							{ ! url && (
+								<>
+									<span
+										className="block-editor-content-only-controls__media-placeholder"
+										style={ {
+											width: '24px',
+											height: '24px',
+										} }
+									/>
+									<span className="block-editor-content-only-controls__media-title">
+										{ chooseItemLabel }
+									</span>
+								</>
+							) }
+						</Grid>
+					</Button>
+				) }
+			/>
 		</MediaUploadCheck>
 	);
 }

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

@@ -1,17 +1,12 @@
 /**
  * WordPress dependencies
  */
-import {
-	BaseControl,
-	useBaseControlProps,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
+import { BaseControl, useBaseControlProps } from '@wordpress/components';
 import { useMergeRefs } from '@wordpress/compose';
 import { useRegistry } from '@wordpress/data';
 import { useRef, useState } from '@wordpress/element';
 import {
 	__unstableUseRichText as useRichText,
-	isEmpty,
 	removeFormat,
 } from '@wordpress/rich-text';
 
@@ -25,17 +20,19 @@ import FormatEdit from '../../rich-text/format-edit';
 import { keyboardShortcutContext, inputEventContext } from '../../rich-text';
 
 export default function RichTextControl( {
-	clientId,
-	control,
-	blockType,
-	attributeValues,
-	updateAttributes,
+	data,
+	field,
+	hideLabelFromVision,
+	config = {},
 } ) {
 	const registry = useRegistry();
-	const valueKey = control.mapping.value;
-	const attrValue = attributeValues[ valueKey ];
-	const defaultValue =
-		blockType.attributes[ valueKey ]?.defaultValue ?? undefined;
+	const attrValue = field.getValue( { item: data } );
+	const fieldConfig = field.config || {};
+	const { clientId, updateBlockAttributes } = config;
+	const updateAttributes = ( html ) => {
+		const mappedChanges = field.setValue( { item: data, value: html } );
+		updateBlockAttributes( clientId, mappedChanges );
+	};
 	const [ selection, setSelection ] = useState( {
 		start: undefined,
 		end: undefined,
@@ -46,8 +43,8 @@ export default function RichTextControl( {
 	const keyboardShortcuts = useRef( new Set() );
 
 	const adjustedAllowedFormats = getAllowedFormats( {
-		allowedFormats: control.args?.allowedFormats,
-		disableFormats: control.args?.disableFormats,
+		allowedFormats: fieldConfig?.allowedFormats,
+		disableFormats: fieldConfig?.disableFormats,
 	} );
 
 	const {
@@ -58,10 +55,9 @@ export default function RichTextControl( {
 		dependencies,
 	} = useFormatTypes( {
 		clientId,
-		identifier: valueKey,
+		identifier: field.id,
 		allowedFormats: adjustedAllowedFormats,
-		withoutInteractiveFormatting:
-			control.args?.withoutInteractiveFormatting,
+		withoutInteractiveFormatting: fieldConfig?.withoutInteractiveFormatting,
 		disableNoneEssentialFormatting: true,
 	} );
 
@@ -102,12 +98,12 @@ export default function RichTextControl( {
 	const {
 		value,
 		getValue,
-		onChange,
+		onChange: onRichTextChange,
 		ref: richTextRef,
 	} = useRichText( {
 		value: attrValue,
 		onChange( html, { __unstableFormats, __unstableText } ) {
-			updateAttributes( { [ valueKey ]: html } );
+			updateAttributes( html );
 			Object.values( changeHandlers ).forEach( ( changeHandler ) => {
 				changeHandler( __unstableFormats, __unstableText );
 			} );
@@ -116,9 +112,9 @@ export default function RichTextControl( {
 		selectionEnd: selection.end,
 		onSelectionChange: ( start, end ) => setSelection( { start, end } ),
 		__unstableIsSelected: isSelected,
-		preserveWhiteSpace: !! control.args?.preserveWhiteSpace,
-		placeholder: control.args?.placeholder,
-		__unstableDisableFormats: control.args?.disableFormats,
+		preserveWhiteSpace: !! fieldConfig?.preserveWhiteSpace,
+		placeholder: fieldConfig?.placeholder,
+		__unstableDisableFormats: fieldConfig?.disableFormats,
 		__unstableDependencies: dependencies,
 		__unstableAfterParse: addEditorOnlyFormats,
 		__unstableBeforeSerialize: removeEditorOnlyFormats,
@@ -126,29 +122,19 @@ export default function RichTextControl( {
 	} );
 
 	const { baseControlProps, controlProps } = useBaseControlProps( {
-		hideLabelFromVision: control.shownByDefault,
-		label: control.label,
+		hideLabelFromVision: hideLabelFromVision ?? field.hideLabelFromVision,
+		label: field.label,
 	} );
 
 	return (
-		<ToolsPanelItem
-			panelId={ clientId }
-			label={ control.label }
-			hasValue={ () => {
-				return value?.text && ! isEmpty( value );
-			} }
-			onDeselect={ () =>
-				updateAttributes( { [ valueKey ]: defaultValue } )
-			}
-			isShownByDefault={ control.shownByDefault }
-		>
+		<>
 			{ isSelected && (
 				<keyboardShortcutContext.Provider value={ keyboardShortcuts }>
 					<inputEventContext.Provider value={ inputEvents }>
 						<div>
 							<FormatEdit
 								value={ value }
-								onChange={ onChange }
+								onChange={ onRichTextChange }
 								onFocus={ onFocus }
 								formatTypes={ formatTypes }
 								forwardedRef={ anchorRef }
@@ -162,21 +148,21 @@ export default function RichTextControl( {
 				<div
 					className="block-editor-content-only-controls__rich-text"
 					role="textbox"
-					aria-multiline={ ! control.args?.disableLineBreaks }
+					aria-multiline={ ! fieldConfig?.disableLineBreaks }
 					ref={ useMergeRefs( [
 						richTextRef,
 						useEventListeners( {
 							registry,
 							getValue,
-							onChange,
+							onChange: onRichTextChange,
 							formatTypes,
 							selectionChange: setSelection,
 							isSelected,
-							disableFormats: control.args?.disableFormats,
+							disableFormats: fieldConfig?.disableFormats,
 							value,
 							tagName: 'div',
 							removeEditorOnlyFormats,
-							disableLineBreaks: control.args?.disableLineBreaks,
+							disableLineBreaks: fieldConfig?.disableLineBreaks,
 							keyboardShortcuts,
 							inputEvents,
 						} ),
@@ -188,6 +174,6 @@ export default function RichTextControl( {
 					{ ...controlProps }
 				/>
 			</BaseControl>
-		</ToolsPanelItem>
+		</>
 	);
 }

package/src/components/content-only-controls/styles.scss

@@ -6,7 +6,7 @@
 
 .block-editor-content-only-controls__screen {
 	&.components-navigator-screen {
-		padding: $grid-unit-10 0 0 0;
+		padding: $grid-unit-10 0 $grid-unit-20 0;
 	}
 
 	// Add border for the entire content controls and remove the similar border
@@ -33,3 +33,12 @@
 .block-editor-content-only-controls__drill-down-button {
 	width: 100%;
 }
+
+.block-editor-content-only-controls__fields-container {
+	padding: 0 $grid-unit-20;
+}
+
+.block-editor-content-only-controls__fields-header {
+	padding: $grid-unit-10 0;
+	margin-bottom: $grid-unit-05;
+}

package/src/components/font-family/README.md

@@ -28,7 +28,6 @@ const MyFontFamilyControl = () => {
 			onChange={ ( newFontFamily ) => {
 				setFontFamily( newFontFamily );
 			} }
-			__nextHasNoMarginBottom
 			__next40pxDefaultSize
 		/>
 	);
@@ -83,11 +82,3 @@ The rest of the props are passed down to the underlying `<SelectControl />` inst
 - Default: `false`
 
 Start opting into the larger default height that will become the default size in a future version.
-
-#### `__nextHasNoMarginBottom`
-
-- Type: `boolean`
-- Required: No
-- Default: `false`
-
-Start opting into the new margin-free styles that will become the default in a future version.

package/src/components/font-family/index.js

@@ -18,8 +18,6 @@ import { useSettings } from '../use-settings';
 export default function FontFamilyControl( {
 	/** Start opting into the larger default height that will become the default size in a future version. */
 	__next40pxDefaultSize = false,
-	/** Start opting into the new margin-free styles that will become the default in a future version. */
-	__nextHasNoMarginBottom = false,
 	value = '',
 	onChange,
 	fontFamilies,
@@ -47,17 +45,6 @@ export default function FontFamilyControl( {
 		} ) ),
 	];
 
-	if ( ! __nextHasNoMarginBottom ) {
-		deprecated(
-			'Bottom margin styles for wp.blockEditor.FontFamilyControl',
-			{
-				since: '6.7',
-				version: '7.0',
-				hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version',
-			}
-		);
-	}
-
 	if (
 		! __next40pxDefaultSize &&
 		( props.size === undefined || props.size === 'default' )
@@ -82,9 +69,7 @@ export default function FontFamilyControl( {
 			value={ selectedValue }
 			onChange={ ( { selectedItem } ) => onChange( selectedItem.key ) }
 			options={ options }
-			className={ clsx( 'block-editor-font-family-control', className, {
-				'is-next-has-no-margin-bottom': __nextHasNoMarginBottom,
-			} ) }
+			className={ clsx( 'block-editor-font-family-control', className ) }
 			{ ...props }
 		/>
 	);

package/src/components/font-family/stories/{index.story.js → index.story.jsx}

@@ -49,7 +49,6 @@ export const Default = {
 				slug: 'system-font',
 			},
 		],
-		__nextHasNoMarginBottom: true,
 		__next40pxDefaultSize: true,
 	},
 };