@wordpress/block-editor 15.8.1-next.dc3f6d3c1.0 → 15.9.1-next.8b30e05b0.0

package/build-module/components/content-only-controls/media/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/content-only-controls/media/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tIcon,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalGrid as Grid,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport {\n\taudio as audioIcon,\n\timage as imageIcon,\n\tmedia as mediaIcon,\n\tvideo as videoIcon,\n} from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport MediaReplaceFlow from '../../media-replace-flow';\nimport MediaUploadCheck from '../../media-upload/check';\nimport { useInspectorPopoverPlacement } from '../use-inspector-popover-placement';\nimport { getMediaSelectKey } from '../../../store/private-keys';\nimport { store as blockEditorStore } from '../../../store';\n\nfunction MediaThumbnail( { control, attributeValues, attachment } ) {\n\tconst { allowedTypes, multiple } = control.args;\n\tconst mapping = control.mapping;\n\tif ( multiple ) {\n\t\treturn 'todo multiple';\n\t}\n\n\tif ( attachment?.media_type === 'image' || attachment?.poster ) {\n\t\treturn (\n\t\t\t<img\n\t\t\t\tclassName=\"block-editor-content-only-controls__media-thumbnail\"\n\t\t\t\talt=\"\"\n\t\t\t\twidth={ 24 }\n\t\t\t\theight={ 24 }\n\t\t\t\tsrc={\n\t\t\t\t\tattachment.media_type === 'image'\n\t\t\t\t\t\t? attachment.source_url\n\t\t\t\t\t\t: attachment.poster\n\t\t\t\t}\n\t\t\t/>\n\t\t);\n\t}\n\n\tif ( allowedTypes.length === 1 ) {\n\t\tlet src;\n\t\tif (\n\t\t\tallowedTypes[ 0 ] === 'image' &&\n\t\t\tmapping.src &&\n\t\t\tattributeValues[ mapping.src ]\n\t\t) {\n\t\t\tsrc = attributeValues[ mapping.src ];\n\t\t} else if (\n\t\t\tallowedTypes[ 0 ] === 'video' &&\n\t\t\tmapping.poster &&\n\t\t\tattributeValues[ mapping.poster ]\n\t\t) {\n\t\t\tsrc = attributeValues[ mapping.poster ];\n\t\t}\n\n\t\tif ( src ) {\n\t\t\treturn (\n\t\t\t\t<img\n\t\t\t\t\tclassName=\"block-editor-content-only-controls__media-thumbnail\"\n\t\t\t\t\talt=\"\"\n\t\t\t\t\twidth={ 24 }\n\t\t\t\t\theight={ 24 }\n\t\t\t\t\tsrc={ src }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\tlet icon;\n\t\tif ( allowedTypes[ 0 ] === 'image' ) {\n\t\t\ticon = imageIcon;\n\t\t} else if ( allowedTypes[ 0 ] === 'video' ) {\n\t\t\ticon = videoIcon;\n\t\t} else if ( allowedTypes[ 0 ] === 'audio' ) {\n\t\t\ticon = audioIcon;\n\t\t} else {\n\t\t\ticon = mediaIcon;\n\t\t}\n\n\t\tif ( icon ) {\n\t\t\treturn <Icon icon={ icon } size={ 24 } />;\n\t\t}\n\t}\n\n\treturn <Icon icon={ mediaIcon } size={ 24 } />;\n}\n\nexport default function Media( {\n\tclientId,\n\tcontrol,\n\tblockType,\n\tattributeValues,\n\tupdateAttributes,\n} ) {\n\tconst { popoverProps } = useInspectorPopoverPlacement( {\n\t\tisControl: true,\n\t} );\n\tconst typeKey = control.mapping.type;\n\tconst idKey = control.mapping.id;\n\tconst srcKey = control.mapping.src;\n\tconst captionKey = control.mapping.caption;\n\tconst altKey = control.mapping.alt;\n\tconst posterKey = control.mapping.poster;\n\tconst featuredImageKey = control.mapping.featuredImage;\n\n\tconst id = attributeValues[ idKey ];\n\tconst src = attributeValues[ srcKey ];\n\tconst caption = attributeValues[ captionKey ];\n\tconst alt = attributeValues[ altKey ];\n\tconst useFeaturedImage = attributeValues[ featuredImageKey ];\n\n\tconst attachment = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! id ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst settings = select( blockEditorStore ).getSettings();\n\t\t\tconst getMedia = settings[ getMediaSelectKey ];\n\n\t\t\tif ( ! getMedia ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\treturn getMedia( select, id );\n\t\t},\n\t\t[ id ]\n\t);\n\n\t// TODO - pluralize when multiple.\n\tlet chooseItemLabel;\n\tif ( control.args.allowedTypes.length === 1 ) {\n\t\tconst allowedType = control.args.allowedTypes[ 0 ];\n\t\tif ( allowedType === 'image' ) {\n\t\t\tchooseItemLabel = __( 'Choose an image\u2026' );\n\t\t} else if ( allowedType === 'video' ) {\n\t\t\tchooseItemLabel = __( 'Choose a video\u2026' );\n\t\t} else if ( allowedType === 'application' ) {\n\t\t\tchooseItemLabel = __( 'Choose a file\u2026' );\n\t\t} else {\n\t\t\tchooseItemLabel = __( 'Choose a media item\u2026' );\n\t\t}\n\t} else {\n\t\tchooseItemLabel = __( 'Choose a media item\u2026' );\n\t}\n\n\tconst defaultValues = useMemo( () => {\n\t\treturn Object.fromEntries(\n\t\t\tObject.entries( control.mapping ).map( ( [ , attributeKey ] ) => {\n\t\t\t\treturn [\n\t\t\t\t\tattributeKey,\n\t\t\t\t\tblockType.attributes[ attributeKey ]?.defaultValue ??\n\t\t\t\t\t\tundefined,\n\t\t\t\t];\n\t\t\t} )\n\t\t);\n\t}, [ blockType.attributes, control.mapping ] );\n\n\treturn (\n\t\t<MediaUploadCheck>\n\t\t\t<ToolsPanelItem\n\t\t\t\tpanelId={ clientId }\n\t\t\t\tlabel={ control.label }\n\t\t\t\thasValue={ () => !! src }\n\t\t\t\tonDeselect={ () => {\n\t\t\t\t\tupdateAttributes( defaultValues );\n\t\t\t\t} }\n\t\t\t\tisShownByDefault={ control.shownByDefault }\n\t\t\t>\n\t\t\t\t<MediaReplaceFlow\n\t\t\t\t\tclassName=\"block-editor-content-only-controls__media-replace-flow\"\n\t\t\t\t\tallowedTypes={ control.args.allowedTypes }\n\t\t\t\t\tmediaId={ id }\n\t\t\t\t\tmediaURL={ src }\n\t\t\t\t\tmultiple={ control.args.multiple }\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\tonReset={ () => {\n\t\t\t\t\t\tupdateAttributes( defaultValues );\n\t\t\t\t\t} }\n\t\t\t\t\tuseFeaturedImage={ !! useFeaturedImage }\n\t\t\t\t\tonToggleFeaturedImage={\n\t\t\t\t\t\t!! featuredImageKey &&\n\t\t\t\t\t\t( () => {\n\t\t\t\t\t\t\tupdateAttributes( {\n\t\t\t\t\t\t\t\t...defaultValues,\n\t\t\t\t\t\t\t\t[ featuredImageKey ]: ! useFeaturedImage,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} )\n\t\t\t\t\t}\n\t\t\t\t\tonSelect={ ( selectedMedia ) => {\n\t\t\t\t\t\tif ( selectedMedia.id && selectedMedia.url ) {\n\t\t\t\t\t\t\tconst optionalAttributes = {};\n\n\t\t\t\t\t\t\tif ( typeKey && selectedMedia.type ) {\n\t\t\t\t\t\t\t\toptionalAttributes[ typeKey ] =\n\t\t\t\t\t\t\t\t\tselectedMedia.type;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tcaptionKey &&\n\t\t\t\t\t\t\t\t! caption &&\n\t\t\t\t\t\t\t\tselectedMedia.caption\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\toptionalAttributes[ captionKey ] =\n\t\t\t\t\t\t\t\t\tselectedMedia.caption;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif ( altKey && ! alt && selectedMedia.alt ) {\n\t\t\t\t\t\t\t\toptionalAttributes[ altKey ] =\n\t\t\t\t\t\t\t\t\tselectedMedia.alt;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif ( posterKey && selectedMedia.poster ) {\n\t\t\t\t\t\t\t\toptionalAttributes[ posterKey ] =\n\t\t\t\t\t\t\t\t\tselectedMedia.poster;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tupdateAttributes( {\n\t\t\t\t\t\t\t\t[ idKey ]: selectedMedia.id,\n\t\t\t\t\t\t\t\t[ srcKey ]: selectedMedia.url,\n\t\t\t\t\t\t\t\t...optionalAttributes,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t\trenderToggle={ ( buttonProps ) => (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tclassName=\"block-editor-content-only-controls__media\"\n\t\t\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Grid\n\t\t\t\t\t\t\t\trowGap={ 0 }\n\t\t\t\t\t\t\t\tcolumnGap={ 8 }\n\t\t\t\t\t\t\t\ttemplateColumns=\"24px 1fr\"\n\t\t\t\t\t\t\t\tclassName=\"block-editor-content-only-controls__media-row\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ src && (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<MediaThumbnail\n\t\t\t\t\t\t\t\t\t\t\tattachment={ attachment }\n\t\t\t\t\t\t\t\t\t\t\tcontrol={ control }\n\t\t\t\t\t\t\t\t\t\t\tattributeValues={ attributeValues }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<span className=\"block-editor-content-only-controls__media-title\">\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t// TODO - truncate long titles or url smartly (e.g. show filename).\n\t\t\t\t\t\t\t\t\t\t\t\tattachment?.title?.raw &&\n\t\t\t\t\t\t\t\t\t\t\t\tattachment?.title?.raw !== ''\n\t\t\t\t\t\t\t\t\t\t\t\t\t? attachment?.title?.raw\n\t\t\t\t\t\t\t\t\t\t\t\t\t: src\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ ! src && (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"block-editor-content-only-controls__media-placeholder\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\t\t\t\t\t\theight: '24px',\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<span className=\"block-editor-content-only-controls__media-title\">\n\t\t\t\t\t\t\t\t\t\t\t{ chooseItemLabel }\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</Grid>\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</ToolsPanelItem>\n\t\t</MediaUploadCheck>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tIcon,\n\t__experimentalGrid as Grid,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport {\n\taudio as audioIcon,\n\timage as imageIcon,\n\tmedia as mediaIcon,\n\tvideo as videoIcon,\n} from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport MediaReplaceFlow from '../../media-replace-flow';\nimport MediaUploadCheck from '../../media-upload/check';\nimport { useInspectorPopoverPlacement } from '../use-inspector-popover-placement';\nimport { getMediaSelectKey } from '../../../store/private-keys';\nimport { store as blockEditorStore } from '../../../store';\n\nfunction MediaThumbnail( { data, field, attachment } ) {\n\tconst config = field.config || {};\n\tconst { allowedTypes = [], multiple = false } = config;\n\n\tif ( multiple ) {\n\t\treturn 'todo multiple';\n\t}\n\n\tif ( attachment?.media_type === 'image' || attachment?.poster ) {\n\t\treturn (\n\t\t\t<img\n\t\t\t\tclassName=\"block-editor-content-only-controls__media-thumbnail\"\n\t\t\t\talt=\"\"\n\t\t\t\twidth={ 24 }\n\t\t\t\theight={ 24 }\n\t\t\t\tsrc={\n\t\t\t\t\tattachment.media_type === 'image'\n\t\t\t\t\t\t? attachment.source_url\n\t\t\t\t\t\t: attachment.poster\n\t\t\t\t}\n\t\t\t/>\n\t\t);\n\t}\n\n\tif ( allowedTypes.length === 1 ) {\n\t\tconst value = field.getValue( { item: data } );\n\t\tconst url = value?.url;\n\n\t\tif ( url ) {\n\t\t\treturn (\n\t\t\t\t<img\n\t\t\t\t\tclassName=\"block-editor-content-only-controls__media-thumbnail\"\n\t\t\t\t\talt=\"\"\n\t\t\t\t\twidth={ 24 }\n\t\t\t\t\theight={ 24 }\n\t\t\t\t\tsrc={ url }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\tlet icon;\n\t\tif ( allowedTypes[ 0 ] === 'image' ) {\n\t\t\ticon = imageIcon;\n\t\t} else if ( allowedTypes[ 0 ] === 'video' ) {\n\t\t\ticon = videoIcon;\n\t\t} else if ( allowedTypes[ 0 ] === 'audio' ) {\n\t\t\ticon = audioIcon;\n\t\t} else {\n\t\t\ticon = mediaIcon;\n\t\t}\n\n\t\tif ( icon ) {\n\t\t\treturn <Icon icon={ icon } size={ 24 } />;\n\t\t}\n\t}\n\n\treturn <Icon icon={ mediaIcon } size={ 24 } />;\n}\n\nexport default function Media( { data, field, config = {} } ) {\n\tconst { popoverProps } = useInspectorPopoverPlacement( {\n\t\tisControl: true,\n\t} );\n\tconst value = field.getValue( { item: data } );\n\tconst { allowedTypes = [], multiple = false } = field.config || {};\n\tconst { clientId, updateBlockAttributes, fieldDef } = config;\n\tconst updateAttributes = ( newFieldValue ) => {\n\t\tconst mappedChanges = field.setValue( {\n\t\t\titem: data,\n\t\t\tvalue: newFieldValue,\n\t\t} );\n\t\tupdateBlockAttributes( clientId, mappedChanges );\n\t};\n\n\t// Check if featured image is supported by checking if it's in the mapping\n\tconst hasFeaturedImageSupport =\n\t\tfieldDef?.mapping && 'featuredImage' in fieldDef.mapping;\n\n\tconst id = value?.id;\n\tconst url = value?.url;\n\n\tconst attachment = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! id ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst settings = select( blockEditorStore ).getSettings();\n\t\t\tconst getMedia = settings[ getMediaSelectKey ];\n\n\t\t\tif ( ! getMedia ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\treturn getMedia( select, id );\n\t\t},\n\t\t[ id ]\n\t);\n\n\t// TODO - pluralize when multiple.\n\tlet chooseItemLabel;\n\tif ( allowedTypes.length === 1 ) {\n\t\tconst allowedType = allowedTypes[ 0 ];\n\t\tif ( allowedType === 'image' ) {\n\t\t\tchooseItemLabel = __( 'Choose an image\u2026' );\n\t\t} else if ( allowedType === 'video' ) {\n\t\t\tchooseItemLabel = __( 'Choose a video\u2026' );\n\t\t} else if ( allowedType === 'application' ) {\n\t\t\tchooseItemLabel = __( 'Choose a file\u2026' );\n\t\t} else {\n\t\t\tchooseItemLabel = __( 'Choose a media item\u2026' );\n\t\t}\n\t} else {\n\t\tchooseItemLabel = __( 'Choose a media item\u2026' );\n\t}\n\n\treturn (\n\t\t<MediaUploadCheck>\n\t\t\t<MediaReplaceFlow\n\t\t\t\tclassName=\"block-editor-content-only-controls__media-replace-flow\"\n\t\t\t\tallowedTypes={ allowedTypes }\n\t\t\t\tmediaId={ id }\n\t\t\t\tmediaURL={ url }\n\t\t\t\tmultiple={ multiple }\n\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\tonReset={ () => {\n\t\t\t\t\t// Build reset value dynamically based on mapping\n\t\t\t\t\tconst resetValue = {};\n\n\t\t\t\t\tif ( fieldDef?.mapping ) {\n\t\t\t\t\t\tObject.keys( fieldDef.mapping ).forEach( ( key ) => {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tkey === 'id' ||\n\t\t\t\t\t\t\t\tkey === 'src' ||\n\t\t\t\t\t\t\t\tkey === 'url'\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tresetValue[ key ] = undefined;\n\t\t\t\t\t\t\t} else if ( key === 'caption' || key === 'alt' ) {\n\t\t\t\t\t\t\t\tresetValue[ key ] = '';\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\n\t\t\t\t\t// Turn off featured image when resetting (only if it's in the mapping)\n\t\t\t\t\tif ( hasFeaturedImageSupport ) {\n\t\t\t\t\t\tresetValue.featuredImage = false;\n\t\t\t\t\t}\n\n\t\t\t\t\t// Merge with existing value to preserve other field properties\n\t\t\t\t\tupdateAttributes( { ...value, ...resetValue } );\n\t\t\t\t} }\n\t\t\t\t{ ...( hasFeaturedImageSupport && {\n\t\t\t\t\tuseFeaturedImage: !! value?.featuredImage,\n\t\t\t\t\tonToggleFeaturedImage: () => {\n\t\t\t\t\t\tupdateAttributes( {\n\t\t\t\t\t\t\t...value,\n\t\t\t\t\t\t\tfeaturedImage: ! value?.featuredImage,\n\t\t\t\t\t\t} );\n\t\t\t\t\t},\n\t\t\t\t} ) }\n\t\t\t\tonSelect={ ( selectedMedia ) => {\n\t\t\t\t\tif ( selectedMedia.id && selectedMedia.url ) {\n\t\t\t\t\t\t// Determine mediaType from MIME type, not from object type\n\t\t\t\t\t\tlet mediaType = 'image'; // default\n\t\t\t\t\t\tif ( selectedMedia.mime_type ) {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tselectedMedia.mime_type.startsWith( 'video/' )\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tmediaType = 'video';\n\t\t\t\t\t\t\t} else if (\n\t\t\t\t\t\t\t\tselectedMedia.mime_type.startsWith( 'audio/' )\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tmediaType = 'audio';\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Build new value dynamically based on what's in the mapping\n\t\t\t\t\t\tconst newValue = {};\n\n\t\t\t\t\t\t// Iterate over mapping keys and set values for supported properties\n\t\t\t\t\t\tif ( fieldDef?.mapping ) {\n\t\t\t\t\t\t\tObject.keys( fieldDef.mapping ).forEach(\n\t\t\t\t\t\t\t\t( key ) => {\n\t\t\t\t\t\t\t\t\tif ( key === 'id' ) {\n\t\t\t\t\t\t\t\t\t\tnewValue[ key ] = selectedMedia.id;\n\t\t\t\t\t\t\t\t\t} else if (\n\t\t\t\t\t\t\t\t\t\tkey === 'src' ||\n\t\t\t\t\t\t\t\t\t\tkey === 'url'\n\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\tnewValue[ key ] = selectedMedia.url;\n\t\t\t\t\t\t\t\t\t} else if ( key === 'type' ) {\n\t\t\t\t\t\t\t\t\t\tnewValue[ key ] = mediaType;\n\t\t\t\t\t\t\t\t\t} else if (\n\t\t\t\t\t\t\t\t\t\tkey === 'link' &&\n\t\t\t\t\t\t\t\t\t\tselectedMedia.link\n\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\tnewValue[ key ] = selectedMedia.link;\n\t\t\t\t\t\t\t\t\t} else if (\n\t\t\t\t\t\t\t\t\t\tkey === 'caption' &&\n\t\t\t\t\t\t\t\t\t\t! value?.caption &&\n\t\t\t\t\t\t\t\t\t\tselectedMedia.caption\n\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\tnewValue[ key ] = selectedMedia.caption;\n\t\t\t\t\t\t\t\t\t} else if (\n\t\t\t\t\t\t\t\t\t\tkey === 'alt' &&\n\t\t\t\t\t\t\t\t\t\t! value?.alt &&\n\t\t\t\t\t\t\t\t\t\tselectedMedia.alt\n\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\tnewValue[ key ] = selectedMedia.alt;\n\t\t\t\t\t\t\t\t\t} else if (\n\t\t\t\t\t\t\t\t\t\tkey === 'poster' &&\n\t\t\t\t\t\t\t\t\t\tselectedMedia.poster\n\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\tnewValue[ key ] = selectedMedia.poster;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Turn off featured image when manually selecting media\n\t\t\t\t\t\tif ( hasFeaturedImageSupport ) {\n\t\t\t\t\t\t\tnewValue.featuredImage = false;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Merge with existing value to preserve other field properties\n\t\t\t\t\t\tconst finalValue = { ...value, ...newValue };\n\t\t\t\t\t\tupdateAttributes( finalValue );\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t\trenderToggle={ ( buttonProps ) => (\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tclassName=\"block-editor-content-only-controls__media\"\n\t\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Grid\n\t\t\t\t\t\t\trowGap={ 0 }\n\t\t\t\t\t\t\tcolumnGap={ 8 }\n\t\t\t\t\t\t\ttemplateColumns=\"24px 1fr\"\n\t\t\t\t\t\t\tclassName=\"block-editor-content-only-controls__media-row\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ url && (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<MediaThumbnail\n\t\t\t\t\t\t\t\t\t\tattachment={ attachment }\n\t\t\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<span className=\"block-editor-content-only-controls__media-title\">\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t// TODO - truncate long titles or url smartly (e.g. show filename).\n\t\t\t\t\t\t\t\t\t\t\tattachment?.title?.raw &&\n\t\t\t\t\t\t\t\t\t\t\tattachment?.title?.raw !== ''\n\t\t\t\t\t\t\t\t\t\t\t\t? attachment?.title?.raw\n\t\t\t\t\t\t\t\t\t\t\t\t: url\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ ! url && (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclassName=\"block-editor-content-only-controls__media-placeholder\"\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\t\t\t\t\theight: '24px',\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<span className=\"block-editor-content-only-controls__media-title\">\n\t\t\t\t\t\t\t\t\t\t{ chooseItemLabel }\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Grid>\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t\t/>\n\t\t</MediaUploadCheck>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,15 +1,10 @@
 // packages/block-editor/src/components/content-only-controls/rich-text/index.js
-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";
 import { useFormatTypes } from "../../rich-text/use-format-types";
@@ -17,18 +12,21 @@ import { getAllowedFormats } from "../../rich-text/utils";
 import { useEventListeners } from "../../rich-text/event-listeners";
 import FormatEdit from "../../rich-text/format-edit";
 import { keyboardShortcutContext, inputEventContext } from "../../rich-text";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 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 ?? void 0;
+  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: void 0,
     end: void 0
@@ -38,8 +36,8 @@ function RichTextControl({
   const inputEvents = useRef(/* @__PURE__ */ new Set());
   const keyboardShortcuts = useRef(/* @__PURE__ */ new Set());
   const adjustedAllowedFormats = getAllowedFormats({
-    allowedFormats: control.args?.allowedFormats,
-    disableFormats: control.args?.disableFormats
+    allowedFormats: fieldConfig?.allowedFormats,
+    disableFormats: fieldConfig?.disableFormats
   });
   const {
     formatTypes,
@@ -49,9 +47,9 @@ function RichTextControl({
     dependencies
   } = useFormatTypes({
     clientId,
-    identifier: valueKey,
+    identifier: field.id,
     allowedFormats: adjustedAllowedFormats,
-    withoutInteractiveFormatting: control.args?.withoutInteractiveFormatting,
+    withoutInteractiveFormatting: fieldConfig?.withoutInteractiveFormatting,
     disableNoneEssentialFormatting: true
   });
   function addEditorOnlyFormats(value2) {
@@ -85,12 +83,12 @@ 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);
       });
@@ -99,74 +97,62 @@ 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,
     __unstableAddInvisibleFormats: addInvisibleFormats
   });
   const { baseControlProps, controlProps } = useBaseControlProps({
-    hideLabelFromVision: control.shownByDefault,
-    label: control.label
+    hideLabelFromVision: hideLabelFromVision ?? field.hideLabelFromVision,
+    label: field.label
   });
-  return /* @__PURE__ */ jsxs(
-    ToolsPanelItem,
-    {
-      panelId: clientId,
-      label: control.label,
-      hasValue: () => {
-        return value?.text && !isEmpty(value);
-      },
-      onDeselect: () => updateAttributes({ [valueKey]: defaultValue }),
-      isShownByDefault: control.shownByDefault,
-      children: [
-        isSelected && /* @__PURE__ */ jsx(keyboardShortcutContext.Provider, { value: keyboardShortcuts, children: /* @__PURE__ */ jsx(inputEventContext.Provider, { value: inputEvents, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-          FormatEdit,
-          {
-            value,
-            onChange,
-            onFocus,
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isSelected && /* @__PURE__ */ jsx(keyboardShortcutContext.Provider, { value: keyboardShortcuts, children: /* @__PURE__ */ jsx(inputEventContext.Provider, { value: inputEvents, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+      FormatEdit,
+      {
+        value,
+        onChange: onRichTextChange,
+        onFocus,
+        formatTypes,
+        forwardedRef: anchorRef,
+        isVisible: false
+      }
+    ) }) }) }),
+    /* @__PURE__ */ jsx(BaseControl, { __nextHasNoMarginBottom: true, ...baseControlProps, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "block-editor-content-only-controls__rich-text",
+        role: "textbox",
+        "aria-multiline": !fieldConfig?.disableLineBreaks,
+        ref: useMergeRefs([
+          richTextRef,
+          useEventListeners({
+            registry,
+            getValue,
+            onChange: onRichTextChange,
             formatTypes,
-            forwardedRef: anchorRef,
-            isVisible: false
-          }
-        ) }) }) }),
-        /* @__PURE__ */ jsx(BaseControl, { __nextHasNoMarginBottom: true, ...baseControlProps, children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "block-editor-content-only-controls__rich-text",
-            role: "textbox",
-            "aria-multiline": !control.args?.disableLineBreaks,
-            ref: useMergeRefs([
-              richTextRef,
-              useEventListeners({
-                registry,
-                getValue,
-                onChange,
-                formatTypes,
-                selectionChange: setSelection,
-                isSelected,
-                disableFormats: control.args?.disableFormats,
-                value,
-                tagName: "div",
-                removeEditorOnlyFormats,
-                disableLineBreaks: control.args?.disableLineBreaks,
-                keyboardShortcuts,
-                inputEvents
-              }),
-              anchorRef
-            ]),
-            onFocus: () => setIsSelected(true),
-            onBlur: () => setIsSelected(false),
-            contentEditable: true,
-            ...controlProps
-          }
-        ) })
-      ]
-    }
-  );
+            selectionChange: setSelection,
+            isSelected,
+            disableFormats: fieldConfig?.disableFormats,
+            value,
+            tagName: "div",
+            removeEditorOnlyFormats,
+            disableLineBreaks: fieldConfig?.disableLineBreaks,
+            keyboardShortcuts,
+            inputEvents
+          }),
+          anchorRef
+        ]),
+        onFocus: () => setIsSelected(true),
+        onBlur: () => setIsSelected(false),
+        contentEditable: true,
+        ...controlProps
+      }
+    ) })
+  ] });
 }
 export {
   RichTextControl as default

package/build-module/components/content-only-controls/rich-text/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/content-only-controls/rich-text/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tBaseControl,\n\tuseBaseControlProps,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { useRegistry } from '@wordpress/data';\nimport { useRef, useState } from '@wordpress/element';\nimport {\n\t__unstableUseRichText as useRichText,\n\tisEmpty,\n\tremoveFormat,\n} from '@wordpress/rich-text';\n\n/**\n * Internal dependencies\n */\nimport { useFormatTypes } from '../../rich-text/use-format-types';\nimport { getAllowedFormats } from '../../rich-text/utils';\nimport { useEventListeners } from '../../rich-text/event-listeners';\nimport FormatEdit from '../../rich-text/format-edit';\nimport { keyboardShortcutContext, inputEventContext } from '../../rich-text';\n\nexport default function RichTextControl( {\n\tclientId,\n\tcontrol,\n\tblockType,\n\tattributeValues,\n\tupdateAttributes,\n} ) {\n\tconst registry = useRegistry();\n\tconst valueKey = control.mapping.value;\n\tconst attrValue = attributeValues[ valueKey ];\n\tconst defaultValue =\n\t\tblockType.attributes[ valueKey ]?.defaultValue ?? undefined;\n\tconst [ selection, setSelection ] = useState( {\n\t\tstart: undefined,\n\t\tend: undefined,\n\t} );\n\tconst [ isSelected, setIsSelected ] = useState( false );\n\tconst anchorRef = useRef();\n\tconst inputEvents = useRef( new Set() );\n\tconst keyboardShortcuts = useRef( new Set() );\n\n\tconst adjustedAllowedFormats = getAllowedFormats( {\n\t\tallowedFormats: control.args?.allowedFormats,\n\t\tdisableFormats: control.args?.disableFormats,\n\t} );\n\n\tconst {\n\t\tformatTypes,\n\t\tprepareHandlers,\n\t\tvalueHandlers,\n\t\tchangeHandlers,\n\t\tdependencies,\n\t} = useFormatTypes( {\n\t\tclientId,\n\t\tidentifier: valueKey,\n\t\tallowedFormats: adjustedAllowedFormats,\n\t\twithoutInteractiveFormatting:\n\t\t\tcontrol.args?.withoutInteractiveFormatting,\n\t\tdisableNoneEssentialFormatting: true,\n\t} );\n\n\tfunction addEditorOnlyFormats( value ) {\n\t\treturn valueHandlers.reduce(\n\t\t\t( accumulator, fn ) => fn( accumulator, value.text ),\n\t\t\tvalue.formats\n\t\t);\n\t}\n\n\tfunction removeEditorOnlyFormats( value ) {\n\t\tformatTypes.forEach( ( formatType ) => {\n\t\t\t// Remove formats created by prepareEditableTree, because they are editor only.\n\t\t\tif ( formatType.__experimentalCreatePrepareEditableTree ) {\n\t\t\t\tvalue = removeFormat(\n\t\t\t\t\tvalue,\n\t\t\t\t\tformatType.name,\n\t\t\t\t\t0,\n\t\t\t\t\tvalue.text.length\n\t\t\t\t);\n\t\t\t}\n\t\t} );\n\n\t\treturn value.formats;\n\t}\n\n\tfunction addInvisibleFormats( value ) {\n\t\treturn prepareHandlers.reduce(\n\t\t\t( accumulator, fn ) => fn( accumulator, value.text ),\n\t\t\tvalue.formats\n\t\t);\n\t}\n\n\tfunction onFocus() {\n\t\tanchorRef.current?.focus();\n\t}\n\n\tconst {\n\t\tvalue,\n\t\tgetValue,\n\t\tonChange,\n\t\tref: richTextRef,\n\t} = useRichText( {\n\t\tvalue: attrValue,\n\t\tonChange( html, { __unstableFormats, __unstableText } ) {\n\t\t\tupdateAttributes( { [ valueKey ]: html } );\n\t\t\tObject.values( changeHandlers ).forEach( ( changeHandler ) => {\n\t\t\t\tchangeHandler( __unstableFormats, __unstableText );\n\t\t\t} );\n\t\t},\n\t\tselectionStart: selection.start,\n\t\tselectionEnd: selection.end,\n\t\tonSelectionChange: ( start, end ) => setSelection( { start, end } ),\n\t\t__unstableIsSelected: isSelected,\n\t\tpreserveWhiteSpace: !! control.args?.preserveWhiteSpace,\n\t\tplaceholder: control.args?.placeholder,\n\t\t__unstableDisableFormats: control.args?.disableFormats,\n\t\t__unstableDependencies: dependencies,\n\t\t__unstableAfterParse: addEditorOnlyFormats,\n\t\t__unstableBeforeSerialize: removeEditorOnlyFormats,\n\t\t__unstableAddInvisibleFormats: addInvisibleFormats,\n\t} );\n\n\tconst { baseControlProps, controlProps } = useBaseControlProps( {\n\t\thideLabelFromVision: control.shownByDefault,\n\t\tlabel: control.label,\n\t} );\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\tpanelId={ clientId }\n\t\t\tlabel={ control.label }\n\t\t\thasValue={ () => {\n\t\t\t\treturn value?.text && ! isEmpty( value );\n\t\t\t} }\n\t\t\tonDeselect={ () =>\n\t\t\t\tupdateAttributes( { [ valueKey ]: defaultValue } )\n\t\t\t}\n\t\t\tisShownByDefault={ control.shownByDefault }\n\t\t>\n\t\t\t{ isSelected && (\n\t\t\t\t<keyboardShortcutContext.Provider value={ keyboardShortcuts }>\n\t\t\t\t\t<inputEventContext.Provider value={ inputEvents }>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<FormatEdit\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\t\tonFocus={ onFocus }\n\t\t\t\t\t\t\t\tformatTypes={ formatTypes }\n\t\t\t\t\t\t\t\tforwardedRef={ anchorRef }\n\t\t\t\t\t\t\t\tisVisible={ false }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</inputEventContext.Provider>\n\t\t\t\t</keyboardShortcutContext.Provider>\n\t\t\t) }\n\t\t\t<BaseControl __nextHasNoMarginBottom { ...baseControlProps }>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"block-editor-content-only-controls__rich-text\"\n\t\t\t\t\trole=\"textbox\"\n\t\t\t\t\taria-multiline={ ! control.args?.disableLineBreaks }\n\t\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\t\trichTextRef,\n\t\t\t\t\t\tuseEventListeners( {\n\t\t\t\t\t\t\tregistry,\n\t\t\t\t\t\t\tgetValue,\n\t\t\t\t\t\t\tonChange,\n\t\t\t\t\t\t\tformatTypes,\n\t\t\t\t\t\t\tselectionChange: setSelection,\n\t\t\t\t\t\t\tisSelected,\n\t\t\t\t\t\t\tdisableFormats: control.args?.disableFormats,\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\ttagName: 'div',\n\t\t\t\t\t\t\tremoveEditorOnlyFormats,\n\t\t\t\t\t\t\tdisableLineBreaks: control.args?.disableLineBreaks,\n\t\t\t\t\t\t\tkeyboardShortcuts,\n\t\t\t\t\t\t\tinputEvents,\n\t\t\t\t\t\t} ),\n\t\t\t\t\t\tanchorRef,\n\t\t\t\t\t] ) }\n\t\t\t\t\tonFocus={ () => setIsSelected( true ) }\n\t\t\t\t\tonBlur={ () => setIsSelected( false ) }\n\t\t\t\t\tcontentEditable\n\t\t\t\t\t{ ...controlProps }\n\t\t\t\t/>\n\t\t\t</BaseControl>\n\t\t</ToolsPanelItem>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { BaseControl, useBaseControlProps } from '@wordpress/components';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { useRegistry } from '@wordpress/data';\nimport { useRef, useState } from '@wordpress/element';\nimport {\n\t__unstableUseRichText as useRichText,\n\tremoveFormat,\n} from '@wordpress/rich-text';\n\n/**\n * Internal dependencies\n */\nimport { useFormatTypes } from '../../rich-text/use-format-types';\nimport { getAllowedFormats } from '../../rich-text/utils';\nimport { useEventListeners } from '../../rich-text/event-listeners';\nimport FormatEdit from '../../rich-text/format-edit';\nimport { keyboardShortcutContext, inputEventContext } from '../../rich-text';\n\nexport default function RichTextControl( {\n\tdata,\n\tfield,\n\thideLabelFromVision,\n\tconfig = {},\n} ) {\n\tconst registry = useRegistry();\n\tconst attrValue = field.getValue( { item: data } );\n\tconst fieldConfig = field.config || {};\n\tconst { clientId, updateBlockAttributes } = config;\n\tconst updateAttributes = ( html ) => {\n\t\tconst mappedChanges = field.setValue( { item: data, value: html } );\n\t\tupdateBlockAttributes( clientId, mappedChanges );\n\t};\n\tconst [ selection, setSelection ] = useState( {\n\t\tstart: undefined,\n\t\tend: undefined,\n\t} );\n\tconst [ isSelected, setIsSelected ] = useState( false );\n\tconst anchorRef = useRef();\n\tconst inputEvents = useRef( new Set() );\n\tconst keyboardShortcuts = useRef( new Set() );\n\n\tconst adjustedAllowedFormats = getAllowedFormats( {\n\t\tallowedFormats: fieldConfig?.allowedFormats,\n\t\tdisableFormats: fieldConfig?.disableFormats,\n\t} );\n\n\tconst {\n\t\tformatTypes,\n\t\tprepareHandlers,\n\t\tvalueHandlers,\n\t\tchangeHandlers,\n\t\tdependencies,\n\t} = useFormatTypes( {\n\t\tclientId,\n\t\tidentifier: field.id,\n\t\tallowedFormats: adjustedAllowedFormats,\n\t\twithoutInteractiveFormatting: fieldConfig?.withoutInteractiveFormatting,\n\t\tdisableNoneEssentialFormatting: true,\n\t} );\n\n\tfunction addEditorOnlyFormats( value ) {\n\t\treturn valueHandlers.reduce(\n\t\t\t( accumulator, fn ) => fn( accumulator, value.text ),\n\t\t\tvalue.formats\n\t\t);\n\t}\n\n\tfunction removeEditorOnlyFormats( value ) {\n\t\tformatTypes.forEach( ( formatType ) => {\n\t\t\t// Remove formats created by prepareEditableTree, because they are editor only.\n\t\t\tif ( formatType.__experimentalCreatePrepareEditableTree ) {\n\t\t\t\tvalue = removeFormat(\n\t\t\t\t\tvalue,\n\t\t\t\t\tformatType.name,\n\t\t\t\t\t0,\n\t\t\t\t\tvalue.text.length\n\t\t\t\t);\n\t\t\t}\n\t\t} );\n\n\t\treturn value.formats;\n\t}\n\n\tfunction addInvisibleFormats( value ) {\n\t\treturn prepareHandlers.reduce(\n\t\t\t( accumulator, fn ) => fn( accumulator, value.text ),\n\t\t\tvalue.formats\n\t\t);\n\t}\n\n\tfunction onFocus() {\n\t\tanchorRef.current?.focus();\n\t}\n\n\tconst {\n\t\tvalue,\n\t\tgetValue,\n\t\tonChange: onRichTextChange,\n\t\tref: richTextRef,\n\t} = useRichText( {\n\t\tvalue: attrValue,\n\t\tonChange( html, { __unstableFormats, __unstableText } ) {\n\t\t\tupdateAttributes( html );\n\t\t\tObject.values( changeHandlers ).forEach( ( changeHandler ) => {\n\t\t\t\tchangeHandler( __unstableFormats, __unstableText );\n\t\t\t} );\n\t\t},\n\t\tselectionStart: selection.start,\n\t\tselectionEnd: selection.end,\n\t\tonSelectionChange: ( start, end ) => setSelection( { start, end } ),\n\t\t__unstableIsSelected: isSelected,\n\t\tpreserveWhiteSpace: !! fieldConfig?.preserveWhiteSpace,\n\t\tplaceholder: fieldConfig?.placeholder,\n\t\t__unstableDisableFormats: fieldConfig?.disableFormats,\n\t\t__unstableDependencies: dependencies,\n\t\t__unstableAfterParse: addEditorOnlyFormats,\n\t\t__unstableBeforeSerialize: removeEditorOnlyFormats,\n\t\t__unstableAddInvisibleFormats: addInvisibleFormats,\n\t} );\n\n\tconst { baseControlProps, controlProps } = useBaseControlProps( {\n\t\thideLabelFromVision: hideLabelFromVision ?? field.hideLabelFromVision,\n\t\tlabel: field.label,\n\t} );\n\n\treturn (\n\t\t<>\n\t\t\t{ isSelected && (\n\t\t\t\t<keyboardShortcutContext.Provider value={ keyboardShortcuts }>\n\t\t\t\t\t<inputEventContext.Provider value={ inputEvents }>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<FormatEdit\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\tonChange={ onRichTextChange }\n\t\t\t\t\t\t\t\tonFocus={ onFocus }\n\t\t\t\t\t\t\t\tformatTypes={ formatTypes }\n\t\t\t\t\t\t\t\tforwardedRef={ anchorRef }\n\t\t\t\t\t\t\t\tisVisible={ false }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</inputEventContext.Provider>\n\t\t\t\t</keyboardShortcutContext.Provider>\n\t\t\t) }\n\t\t\t<BaseControl __nextHasNoMarginBottom { ...baseControlProps }>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"block-editor-content-only-controls__rich-text\"\n\t\t\t\t\trole=\"textbox\"\n\t\t\t\t\taria-multiline={ ! fieldConfig?.disableLineBreaks }\n\t\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\t\trichTextRef,\n\t\t\t\t\t\tuseEventListeners( {\n\t\t\t\t\t\t\tregistry,\n\t\t\t\t\t\t\tgetValue,\n\t\t\t\t\t\t\tonChange: onRichTextChange,\n\t\t\t\t\t\t\tformatTypes,\n\t\t\t\t\t\t\tselectionChange: setSelection,\n\t\t\t\t\t\t\tisSelected,\n\t\t\t\t\t\t\tdisableFormats: fieldConfig?.disableFormats,\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\ttagName: 'div',\n\t\t\t\t\t\t\tremoveEditorOnlyFormats,\n\t\t\t\t\t\t\tdisableLineBreaks: fieldConfig?.disableLineBreaks,\n\t\t\t\t\t\t\tkeyboardShortcuts,\n\t\t\t\t\t\t\tinputEvents,\n\t\t\t\t\t\t} ),\n\t\t\t\t\t\tanchorRef,\n\t\t\t\t\t] ) }\n\t\t\t\t\tonFocus={ () => setIsSelected( true ) }\n\t\t\t\t\tonBlur={ () => setIsSelected( false ) }\n\t\t\t\t\tcontentEditable\n\t\t\t\t\t{ ...controlProps }\n\t\t\t\t/>\n\t\t\t</BaseControl>\n\t\t</>\n\t);\n}\n"],
+  "mappings": "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",
   "names": ["value"]
 }

package/build-module/components/font-family/index.js

@@ -8,8 +8,6 @@ import { jsx } from "react/jsx-runtime";
 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,
@@ -34,16 +32,6 @@ function FontFamilyControl({
       style: { fontFamily }
     }))
   ];
-  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 === void 0 || props.size === "default")) {
     deprecated(
       `36px default size for wp.blockEditor.__experimentalFontFamilyControl`,
@@ -64,9 +52,7 @@ function FontFamilyControl({
       value: selectedValue,
       onChange: ({ selectedItem }) => onChange(selectedItem.key),
       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/build-module/components/font-family/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/font-family/index.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { CustomSelectControl } from '@wordpress/components';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../use-settings';\n\nexport default function FontFamilyControl( {\n\t/** Start opting into the larger default height that will become the default size in a future version. */\n\t__next40pxDefaultSize = false,\n\t/** Start opting into the new margin-free styles that will become the default in a future version. */\n\t__nextHasNoMarginBottom = false,\n\tvalue = '',\n\tonChange,\n\tfontFamilies,\n\tclassName,\n\t...props\n} ) {\n\tconst [ blockLevelFontFamilies ] = useSettings( 'typography.fontFamilies' );\n\tif ( ! fontFamilies ) {\n\t\tfontFamilies = blockLevelFontFamilies;\n\t}\n\n\tif ( ! fontFamilies || fontFamilies.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst options = [\n\t\t{\n\t\t\tkey: '',\n\t\t\tname: __( 'Default' ),\n\t\t},\n\t\t...fontFamilies.map( ( { fontFamily, name } ) => ( {\n\t\t\tkey: fontFamily,\n\t\t\tname: name || fontFamily,\n\t\t\tstyle: { fontFamily },\n\t\t} ) ),\n\t];\n\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\tdeprecated(\n\t\t\t'Bottom margin styles for wp.blockEditor.FontFamilyControl',\n\t\t\t{\n\t\t\t\tsince: '6.7',\n\t\t\t\tversion: '7.0',\n\t\t\t\thint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version',\n\t\t\t}\n\t\t);\n\t}\n\n\tif (\n\t\t! __next40pxDefaultSize &&\n\t\t( props.size === undefined || props.size === 'default' )\n\t) {\n\t\tdeprecated(\n\t\t\t`36px default size for wp.blockEditor.__experimentalFontFamilyControl`,\n\t\t\t{\n\t\t\t\tsince: '6.8',\n\t\t\t\tversion: '7.1',\n\t\t\t\thint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.',\n\t\t\t}\n\t\t);\n\t}\n\n\tconst selectedValue =\n\t\toptions.find( ( option ) => option.key === value ) ?? '';\n\treturn (\n\t\t<CustomSelectControl\n\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\tlabel={ __( 'Font' ) }\n\t\t\tvalue={ selectedValue }\n\t\t\tonChange={ ( { selectedItem } ) => onChange( selectedItem.key ) }\n\t\t\toptions={ options }\n\t\t\tclassName={ clsx( 'block-editor-font-family-control', className, {\n\t\t\t\t'is-next-has-no-margin-bottom': __nextHasNoMarginBottom,\n\t\t\t} ) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,2BAA2B;AACpC,OAAO,gBAAgB;AACvB,SAAS,UAAU;AAKnB,SAAS,mBAAmB;AA8D1B;AA5Da,SAAR,kBAAoC;AAAA;AAAA,EAE1C,wBAAwB;AAAA;AAAA,EAExB,0BAA0B;AAAA,EAC1B,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAI;AACH,QAAM,CAAE,sBAAuB,IAAI,YAAa,yBAA0B;AAC1E,MAAK,CAAE,cAAe;AACrB,mBAAe;AAAA,EAChB;AAEA,MAAK,CAAE,gBAAgB,aAAa,WAAW,GAAI;AAClD,WAAO;AAAA,EACR;AAEA,QAAM,UAAU;AAAA,IACf;AAAA,MACC,KAAK;AAAA,MACL,MAAM,GAAI,SAAU;AAAA,IACrB;AAAA,IACA,GAAG,aAAa,IAAK,CAAE,EAAE,YAAY,KAAK,OAAS;AAAA,MAClD,KAAK;AAAA,MACL,MAAM,QAAQ;AAAA,MACd,OAAO,EAAE,WAAW;AAAA,IACrB,EAAI;AAAA,EACL;AAEA,MAAK,CAAE,yBAA0B;AAChC;AAAA,MACC;AAAA,MACA;AAAA,QACC,OAAO;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,MACP;AAAA,IACD;AAAA,EACD;AAEA,MACC,CAAE,0BACA,MAAM,SAAS,UAAa,MAAM,SAAS,YAC5C;AACD;AAAA,MACC;AAAA,MACA;AAAA,QACC,OAAO;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,MACP;AAAA,IACD;AAAA,EACD;AAEA,QAAM,gBACL,QAAQ,KAAM,CAAE,WAAY,OAAO,QAAQ,KAAM,KAAK;AACvD,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,mCAAiC;AAAA,MACjC,OAAQ,GAAI,MAAO;AAAA,MACnB,OAAQ;AAAA,MACR,UAAW,CAAE,EAAE,aAAa,MAAO,SAAU,aAAa,GAAI;AAAA,MAC9D;AAAA,MACA,WAAY,KAAM,oCAAoC,WAAW;AAAA,QAChE,gCAAgC;AAAA,MACjC,CAAE;AAAA,MACA,GAAG;AAAA;AAAA,EACN;AAEF;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { CustomSelectControl } from '@wordpress/components';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../use-settings';\n\nexport default function FontFamilyControl( {\n\t/** Start opting into the larger default height that will become the default size in a future version. */\n\t__next40pxDefaultSize = false,\n\tvalue = '',\n\tonChange,\n\tfontFamilies,\n\tclassName,\n\t...props\n} ) {\n\tconst [ blockLevelFontFamilies ] = useSettings( 'typography.fontFamilies' );\n\tif ( ! fontFamilies ) {\n\t\tfontFamilies = blockLevelFontFamilies;\n\t}\n\n\tif ( ! fontFamilies || fontFamilies.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst options = [\n\t\t{\n\t\t\tkey: '',\n\t\t\tname: __( 'Default' ),\n\t\t},\n\t\t...fontFamilies.map( ( { fontFamily, name } ) => ( {\n\t\t\tkey: fontFamily,\n\t\t\tname: name || fontFamily,\n\t\t\tstyle: { fontFamily },\n\t\t} ) ),\n\t];\n\n\tif (\n\t\t! __next40pxDefaultSize &&\n\t\t( props.size === undefined || props.size === 'default' )\n\t) {\n\t\tdeprecated(\n\t\t\t`36px default size for wp.blockEditor.__experimentalFontFamilyControl`,\n\t\t\t{\n\t\t\t\tsince: '6.8',\n\t\t\t\tversion: '7.1',\n\t\t\t\thint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.',\n\t\t\t}\n\t\t);\n\t}\n\n\tconst selectedValue =\n\t\toptions.find( ( option ) => option.key === value ) ?? '';\n\treturn (\n\t\t<CustomSelectControl\n\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\tlabel={ __( 'Font' ) }\n\t\t\tvalue={ selectedValue }\n\t\t\tonChange={ ( { selectedItem } ) => onChange( selectedItem.key ) }\n\t\t\toptions={ options }\n\t\t\tclassName={ clsx( 'block-editor-font-family-control', className ) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,2BAA2B;AACpC,OAAO,gBAAgB;AACvB,SAAS,UAAU;AAKnB,SAAS,mBAAmB;AAiD1B;AA/Ca,SAAR,kBAAoC;AAAA;AAAA,EAE1C,wBAAwB;AAAA,EACxB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAI;AACH,QAAM,CAAE,sBAAuB,IAAI,YAAa,yBAA0B;AAC1E,MAAK,CAAE,cAAe;AACrB,mBAAe;AAAA,EAChB;AAEA,MAAK,CAAE,gBAAgB,aAAa,WAAW,GAAI;AAClD,WAAO;AAAA,EACR;AAEA,QAAM,UAAU;AAAA,IACf;AAAA,MACC,KAAK;AAAA,MACL,MAAM,GAAI,SAAU;AAAA,IACrB;AAAA,IACA,GAAG,aAAa,IAAK,CAAE,EAAE,YAAY,KAAK,OAAS;AAAA,MAClD,KAAK;AAAA,MACL,MAAM,QAAQ;AAAA,MACd,OAAO,EAAE,WAAW;AAAA,IACrB,EAAI;AAAA,EACL;AAEA,MACC,CAAE,0BACA,MAAM,SAAS,UAAa,MAAM,SAAS,YAC5C;AACD;AAAA,MACC;AAAA,MACA;AAAA,QACC,OAAO;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,MACP;AAAA,IACD;AAAA,EACD;AAEA,QAAM,gBACL,QAAQ,KAAM,CAAE,WAAY,OAAO,QAAQ,KAAM,KAAK;AACvD,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,mCAAiC;AAAA,MACjC,OAAQ,GAAI,MAAO;AAAA,MACnB,OAAQ;AAAA,MACR,UAAW,CAAE,EAAE,aAAa,MAAO,SAAU,aAAa,GAAI;AAAA,MAC9D;AAAA,MACA,WAAY,KAAM,oCAAoC,SAAU;AAAA,MAC9D,GAAG;AAAA;AAAA,EACN;AAEF;",
   "names": []
 }

package/build-module/components/global-styles/dimensions-panel.js

@@ -28,9 +28,10 @@ function useHasDimensionsPanel(settings) {
   const hasMargin = useHasMargin(settings);
   const hasGap = useHasGap(settings);
   const hasMinHeight = useHasMinHeight(settings);
+  const hasWidth = useHasWidth(settings);
   const hasAspectRatio = useHasAspectRatio(settings);
   const hasChildLayout = useHasChildLayout(settings);
-  return Platform.OS === "web" && (hasContentSize || hasWideSize || hasPadding || hasMargin || hasGap || hasMinHeight || hasAspectRatio || hasChildLayout);
+  return Platform.OS === "web" && (hasContentSize || hasWideSize || hasPadding || hasMargin || hasGap || hasMinHeight || hasWidth || hasAspectRatio || hasChildLayout);
 }
 function useHasContentSize(settings) {
   return settings?.layout?.contentSize;
@@ -50,6 +51,9 @@ function useHasGap(settings) {
 function useHasMinHeight(settings) {
   return settings?.dimensions?.minHeight;
 }
+function useHasWidth(settings) {
+  return settings?.dimensions?.width;
+}
 function useHasAspectRatio(settings) {
   return settings?.dimensions?.aspectRatio;
 }
@@ -138,6 +142,7 @@ var DEFAULT_CONTROLS = {
   margin: true,
   blockGap: true,
   minHeight: true,
+  width: true,
   aspectRatio: true,
   childLayout: true
 };
@@ -280,6 +285,15 @@ function DimensionsPanel({
     setMinHeightValue(void 0);
   };
   const hasMinHeightValue = () => !!value?.dimensions?.minHeight;
+  const showWidthControl = useHasWidth(settings);
+  const widthValue = decodeValue(inheritedValue?.dimensions?.width);
+  const setWidthValue = (newValue) => {
+    onChange(setImmutably(value, ["dimensions", "width"], newValue));
+  };
+  const resetWidthValue = () => {
+    setWidthValue(void 0);
+  };
+  const hasWidthValue = () => !!value?.dimensions?.width;
   const showAspectRatioControl = useHasAspectRatio(settings);
   const aspectRatioValue = decodeValue(
     inheritedValue?.dimensions?.aspectRatio
@@ -328,7 +342,8 @@ function DimensionsPanel({
       dimensions: {
         ...previousValue?.dimensions,
         minHeight: void 0,
-        aspectRatio: void 0
+        aspectRatio: void 0,
+        width: void 0
       }
     };
   }, []);
@@ -571,6 +586,24 @@ function DimensionsPanel({
             )
           }
         ),
+        showWidthControl && /* @__PURE__ */ jsx(
+          ToolsPanelItem,
+          {
+            hasValue: hasWidthValue,
+            label: __("Width"),
+            onDeselect: resetWidthValue,
+            isShownByDefault: defaultControls.width ?? DEFAULT_CONTROLS.width,
+            panelId,
+            children: /* @__PURE__ */ jsx(
+              HeightControl,
+              {
+                label: __("Width"),
+                value: widthValue,
+                onChange: setWidthValue
+              }
+            )
+          }
+        ),
         showAspectRatioControl && /* @__PURE__ */ jsx(
           AspectRatioTool,
           {