@wordpress/block-editor 15.21.1 → 15.22.0

package/build/components/url-popover/image-url-input-ui.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/url-popover/image-url-input-ui.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tuseRef,\n\tuseEffect,\n\tuseState,\n\tcreateInterpolateElement,\n} from '@wordpress/element';\nimport { focus } from '@wordpress/dom';\nimport {\n\tToolbarButton,\n\tNavigableMenu,\n\tButton,\n\tMenuItem,\n\tToggleControl,\n\tTextControl,\n\t__experimentalVStack as VStack,\n\tExternalLink,\n} from '@wordpress/components';\nimport {\n\tIcon,\n\tlink as linkIcon,\n\timage,\n\tpage,\n\tfullscreen,\n\tlinkOff,\n} from '@wordpress/icons';\nimport { prependHTTPS } from '@wordpress/url';\n\n/**\n * Internal dependencies\n */\nimport URLPopover from './index';\n\nconst LINK_DESTINATION_NONE = 'none';\nconst LINK_DESTINATION_CUSTOM = 'custom';\nconst LINK_DESTINATION_MEDIA = 'media';\nconst LINK_DESTINATION_ATTACHMENT = 'attachment';\nconst NEW_TAB_REL = [ 'noopener' ];\n\nconst ImageURLInputUI = ( {\n\tlinkDestination,\n\tonChangeUrl,\n\turl,\n\tmediaType = 'image',\n\tmediaUrl,\n\tmediaLink,\n\tlinkTarget,\n\tlinkClass,\n\trel,\n\tshowLightboxSetting,\n\tlightboxEnabled,\n\tonSetLightbox,\n\tresetLightbox,\n} ) => {\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState( null );\n\tconst openLinkUI = () => {\n\t\tsetIsOpen( true );\n\t};\n\n\tconst [ isEditingLink, setIsEditingLink ] = useState( false );\n\tconst [ urlInput, setUrlInput ] = useState( null );\n\n\tconst autocompleteRef = useRef( null );\n\tconst wrapperRef = useRef();\n\n\tuseEffect( () => {\n\t\tif ( ! wrapperRef.current ) {\n\t\t\treturn;\n\t\t}\n\t\tconst nextFocusTarget =\n\t\t\tfocus.focusable.find( wrapperRef.current )[ 0 ] ||\n\t\t\twrapperRef.current;\n\t\tnextFocusTarget.focus();\n\t}, [ isEditingLink, url, lightboxEnabled ] );\n\n\tconst startEditLink = () => {\n\t\tif (\n\t\t\tlinkDestination === LINK_DESTINATION_MEDIA ||\n\t\t\tlinkDestination === LINK_DESTINATION_ATTACHMENT\n\t\t) {\n\t\t\tsetUrlInput( '' );\n\t\t}\n\t\tsetIsEditingLink( true );\n\t};\n\n\tconst stopEditLink = () => {\n\t\tsetIsEditingLink( false );\n\t};\n\n\tconst closeLinkUI = () => {\n\t\tsetUrlInput( null );\n\t\tstopEditLink();\n\t\tsetIsOpen( false );\n\t};\n\n\tconst getUpdatedLinkTargetSettings = ( value ) => {\n\t\tconst newLinkTarget = value ? '_blank' : undefined;\n\n\t\tlet updatedRel;\n\t\tif ( newLinkTarget ) {\n\t\t\tconst rels = ( rel ?? '' ).split( ' ' );\n\t\t\tNEW_TAB_REL.forEach( ( relVal ) => {\n\t\t\t\tif ( ! rels.includes( relVal ) ) {\n\t\t\t\t\trels.push( relVal );\n\t\t\t\t}\n\t\t\t} );\n\t\t\tupdatedRel = rels.join( ' ' );\n\t\t} else {\n\t\t\tconst rels = ( rel ?? '' )\n\t\t\t\t.split( ' ' )\n\t\t\t\t.filter(\n\t\t\t\t\t( relVal ) => NEW_TAB_REL.includes( relVal ) === false\n\t\t\t\t);\n\t\t\tupdatedRel = rels.length ? rels.join( ' ' ) : undefined;\n\t\t}\n\n\t\treturn {\n\t\t\tlinkTarget: newLinkTarget,\n\t\t\trel: updatedRel,\n\t\t};\n\t};\n\n\tconst onFocusOutside = () => {\n\t\treturn ( event ) => {\n\t\t\t// The autocomplete suggestions list renders in a separate popover (in a portal),\n\t\t\t// so onFocusOutside fails to detect that a click on a suggestion occurred in the\n\t\t\t// LinkContainer. Detect clicks on autocomplete suggestions using a ref here, and\n\t\t\t// return to avoid the popover being closed.\n\t\t\tconst autocompleteElement = autocompleteRef.current;\n\t\t\tif (\n\t\t\t\tautocompleteElement &&\n\t\t\t\tautocompleteElement.contains( event.target )\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetIsOpen( false );\n\t\t\tsetUrlInput( null );\n\t\t\tstopEditLink();\n\t\t};\n\t};\n\n\tconst onSubmitLinkChange = () => {\n\t\treturn ( event ) => {\n\t\t\tif ( urlInput ) {\n\t\t\t\t// It is possible the entered URL actually matches a named link destination.\n\t\t\t\t// This check will ensure our link destination is correct.\n\t\t\t\tconst selectedDestination =\n\t\t\t\t\tgetLinkDestinations().find(\n\t\t\t\t\t\t( destination ) => destination.url === urlInput\n\t\t\t\t\t)?.linkDestination || LINK_DESTINATION_CUSTOM;\n\n\t\t\t\tonChangeUrl( {\n\t\t\t\t\thref: prependHTTPS( urlInput ),\n\t\t\t\t\tlinkDestination: selectedDestination,\n\t\t\t\t\tlightbox: { enabled: false },\n\t\t\t\t} );\n\t\t\t}\n\t\t\tstopEditLink();\n\t\t\tsetUrlInput( null );\n\t\t\tevent.preventDefault();\n\t\t};\n\t};\n\n\tconst onLinkRemove = () => {\n\t\tonChangeUrl( {\n\t\t\tlinkDestination: LINK_DESTINATION_NONE,\n\t\t\thref: '',\n\t\t} );\n\t};\n\n\tconst getLinkDestinations = () => {\n\t\tconst linkDestinations = [\n\t\t\t{\n\t\t\t\tlinkDestination: LINK_DESTINATION_MEDIA,\n\t\t\t\ttitle: __( 'Link to image file' ),\n\t\t\t\turl: mediaType === 'image' ? mediaUrl : undefined,\n\t\t\t\ticon: image,\n\t\t\t},\n\t\t];\n\t\tif ( mediaType === 'image' && mediaLink ) {\n\t\t\tlinkDestinations.push( {\n\t\t\t\tlinkDestination: LINK_DESTINATION_ATTACHMENT,\n\t\t\t\ttitle: __( 'Link to attachment page' ),\n\t\t\t\turl: mediaType === 'image' ? mediaLink : undefined,\n\t\t\t\ticon: page,\n\t\t\t} );\n\t\t}\n\t\treturn linkDestinations;\n\t};\n\n\tconst onSetHref = ( value ) => {\n\t\tconst linkDestinations = getLinkDestinations();\n\t\tlet linkDestinationInput;\n\t\tif ( ! value ) {\n\t\t\tlinkDestinationInput = LINK_DESTINATION_NONE;\n\t\t} else {\n\t\t\tlinkDestinationInput = (\n\t\t\t\tlinkDestinations.find( ( destination ) => {\n\t\t\t\t\treturn destination.url === value;\n\t\t\t\t} ) || { linkDestination: LINK_DESTINATION_CUSTOM }\n\t\t\t).linkDestination;\n\t\t}\n\t\tonChangeUrl( {\n\t\t\tlinkDestination: linkDestinationInput,\n\t\t\thref: value,\n\t\t} );\n\t};\n\n\tconst onSetNewTab = ( value ) => {\n\t\tconst updatedLinkTarget = getUpdatedLinkTargetSettings( value );\n\t\tonChangeUrl( updatedLinkTarget );\n\t};\n\n\tconst onSetLinkRel = ( value ) => {\n\t\tonChangeUrl( { rel: value } );\n\t};\n\n\tconst onSetLinkClass = ( value ) => {\n\t\tonChangeUrl( { linkClass: value } );\n\t};\n\n\tconst advancedOptions = (\n\t\t<VStack spacing=\"3\">\n\t\t\t<ToggleControl\n\t\t\t\tlabel={ __( 'Open in new tab' ) }\n\t\t\t\tonChange={ onSetNewTab }\n\t\t\t\tchecked={ linkTarget === '_blank' }\n\t\t\t/>\n\t\t\t<TextControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tlabel={ __( 'Link relation' ) }\n\t\t\t\tvalue={ rel ?? '' }\n\t\t\t\tonChange={ onSetLinkRel }\n\t\t\t\thelp={ createInterpolateElement(\n\t\t\t\t\t__(\n\t\t\t\t\t\t'The <a>Link Relation</a> attribute defines the relationship between a linked resource and the current document.'\n\t\t\t\t\t),\n\t\t\t\t\t{\n\t\t\t\t\t\ta: (\n\t\t\t\t\t\t\t<ExternalLink href=\"https://developer.mozilla.org/docs/Web/HTML/Attributes/rel\" />\n\t\t\t\t\t\t),\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<TextControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tlabel={ __( 'Link CSS class' ) }\n\t\t\t\tvalue={ linkClass || '' }\n\t\t\t\tonChange={ onSetLinkClass }\n\t\t\t/>\n\t\t</VStack>\n\t);\n\n\tconst linkEditorValue = urlInput !== null ? urlInput : url;\n\tconst hideLightboxPanel =\n\t\t! lightboxEnabled || ( lightboxEnabled && ! showLightboxSetting );\n\tconst showLinkEditor = ! linkEditorValue && hideLightboxPanel;\n\n\tconst urlLabel = (\n\t\tgetLinkDestinations().find(\n\t\t\t( destination ) => destination.linkDestination === linkDestination\n\t\t) || {}\n\t).title;\n\n\tconst PopoverChildren = () => {\n\t\tif (\n\t\t\tlightboxEnabled &&\n\t\t\tshowLightboxSetting &&\n\t\t\t! url &&\n\t\t\t! isEditingLink\n\t\t) {\n\t\t\treturn (\n\t\t\t\t<div className=\"block-editor-url-popover__expand-on-click\">\n\t\t\t\t\t<Icon icon={ fullscreen } />\n\t\t\t\t\t<div className=\"text\">\n\t\t\t\t\t\t<p>{ __( 'Enlarge on click' ) }</p>\n\t\t\t\t\t\t<p className=\"description\">\n\t\t\t\t\t\t\t{ __( 'Scales the image with a lightbox effect' ) }\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Button\n\t\t\t\t\t\ticon={ linkOff }\n\t\t\t\t\t\tlabel={ __( 'Disable enlarge on click' ) }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonSetLightbox?.( false );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t);\n\t\t} else if ( ! url || isEditingLink ) {\n\t\t\treturn (\n\t\t\t\t<URLPopover.LinkEditor\n\t\t\t\t\tclassName=\"block-editor-format-toolbar__link-container-content\"\n\t\t\t\t\tvalue={ linkEditorValue }\n\t\t\t\t\tonChangeInputValue={ setUrlInput }\n\t\t\t\t\tonSubmit={ onSubmitLinkChange() }\n\t\t\t\t\tautocompleteRef={ autocompleteRef }\n\t\t\t\t/>\n\t\t\t);\n\t\t} else if ( url && ! isEditingLink ) {\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t<URLPopover.LinkViewer\n\t\t\t\t\t\tclassName=\"block-editor-format-toolbar__link-container-content\"\n\t\t\t\t\t\turl={ url }\n\t\t\t\t\t\tonEditLinkClick={ startEditLink }\n\t\t\t\t\t\turlLabel={ urlLabel }\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\ticon={ linkOff }\n\t\t\t\t\t\tlabel={ __( 'Remove link' ) }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonLinkRemove();\n\t\t\t\t\t\t\tresetLightbox?.();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t);\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<ToolbarButton\n\t\t\t\ticon={ linkIcon }\n\t\t\t\tclassName=\"components-toolbar__control\"\n\t\t\t\tlabel={ __( 'Link' ) }\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t\tonClick={ openLinkUI }\n\t\t\t\tref={ setPopoverAnchor }\n\t\t\t\tisActive={\n\t\t\t\t\t!! url || ( lightboxEnabled && showLightboxSetting )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ isOpen && (\n\t\t\t\t<URLPopover\n\t\t\t\t\tref={ wrapperRef }\n\t\t\t\t\tanchor={ popoverAnchor }\n\t\t\t\t\tonFocusOutside={ onFocusOutside() }\n\t\t\t\t\tonClose={ closeLinkUI }\n\t\t\t\t\trenderSettings={\n\t\t\t\t\t\thideLightboxPanel ? () => advancedOptions : null\n\t\t\t\t\t}\n\t\t\t\t\tadditionalControls={\n\t\t\t\t\t\tshowLinkEditor && (\n\t\t\t\t\t\t\t<NavigableMenu>\n\t\t\t\t\t\t\t\t{ getLinkDestinations().map( ( link ) => (\n\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\tkey={ link.linkDestination }\n\t\t\t\t\t\t\t\t\t\ticon={ link.icon }\n\t\t\t\t\t\t\t\t\t\ticonPosition=\"left\"\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\tsetUrlInput( null );\n\t\t\t\t\t\t\t\t\t\t\tonSetHref( link.url );\n\t\t\t\t\t\t\t\t\t\t\tstopEditLink();\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\t{ link.title }\n\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t{ showLightboxSetting && (\n\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\tkey=\"expand-on-click\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"block-editor-url-popover__expand-on-click\"\n\t\t\t\t\t\t\t\t\t\ticon={ fullscreen }\n\t\t\t\t\t\t\t\t\t\tinfo={ __(\n\t\t\t\t\t\t\t\t\t\t\t'Scale the image with a lightbox effect.'\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\ticonPosition=\"left\"\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\tsetUrlInput( null );\n\t\t\t\t\t\t\t\t\t\t\tonChangeUrl( {\n\t\t\t\t\t\t\t\t\t\t\t\tlinkDestination:\n\t\t\t\t\t\t\t\t\t\t\t\t\tLINK_DESTINATION_NONE,\n\t\t\t\t\t\t\t\t\t\t\t\thref: '',\n\t\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t\t\tonSetLightbox?.( true );\n\t\t\t\t\t\t\t\t\t\t\tstopEditLink();\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\t{ __( 'Enlarge on click' ) }\n\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</NavigableMenu>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\toffset={ 13 }\n\t\t\t\t>\n\t\t\t\t\t{ PopoverChildren() }\n\t\t\t\t</URLPopover>\n\t\t\t) }\n\t\t</>\n\t);\n};\n\nexport { ImageURLInputUI as __experimentalImageURLInputUI };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tuseRef,\n\tuseEffect,\n\tuseState,\n\tcreateInterpolateElement,\n} from '@wordpress/element';\nimport { focus } from '@wordpress/dom';\nimport {\n\tToolbarButton,\n\tNavigableMenu,\n\tButton,\n\tMenuItem,\n\tToggleControl,\n\tTextControl,\n\t__experimentalVStack as VStack,\n\tExternalLink,\n} from '@wordpress/components';\nimport {\n\tIcon,\n\tlink as linkIcon,\n\timage,\n\tpage,\n\tfullscreen,\n\tlinkOff,\n} from '@wordpress/icons';\nimport { prependHTTPS } from '@wordpress/url';\n\n/**\n * Internal dependencies\n */\nimport URLPopover from './index';\n\nconst LINK_DESTINATION_NONE = 'none';\nconst LINK_DESTINATION_CUSTOM = 'custom';\nconst LINK_DESTINATION_MEDIA = 'media';\nconst LINK_DESTINATION_ATTACHMENT = 'attachment';\nconst NEW_TAB_REL = [ 'noopener' ];\n\nconst ImageURLInputUI = ( {\n\tlinkDestination,\n\tonChangeUrl,\n\turl,\n\tmediaType = 'image',\n\tmediaUrl,\n\tmediaLink,\n\tlinkTarget,\n\tlinkClass,\n\trel,\n\tshowLightboxSetting,\n\tlightboxEnabled,\n\tonSetLightbox,\n\tresetLightbox,\n} ) => {\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState( null );\n\tconst openLinkUI = () => {\n\t\tsetIsOpen( true );\n\t};\n\n\tconst [ isEditingLink, setIsEditingLink ] = useState( false );\n\tconst [ urlInput, setUrlInput ] = useState( null );\n\n\tconst autocompleteRef = useRef( null );\n\tconst wrapperRef = useRef();\n\n\tuseEffect( () => {\n\t\tif ( ! wrapperRef.current ) {\n\t\t\treturn;\n\t\t}\n\t\tconst nextFocusTarget =\n\t\t\tfocus.focusable.find( wrapperRef.current )[ 0 ] ||\n\t\t\twrapperRef.current;\n\t\tnextFocusTarget.focus();\n\t}, [ isEditingLink, url, lightboxEnabled ] );\n\n\tconst startEditLink = () => {\n\t\tif (\n\t\t\tlinkDestination === LINK_DESTINATION_MEDIA ||\n\t\t\tlinkDestination === LINK_DESTINATION_ATTACHMENT\n\t\t) {\n\t\t\tsetUrlInput( '' );\n\t\t}\n\t\tsetIsEditingLink( true );\n\t};\n\n\tconst stopEditLink = () => {\n\t\tsetIsEditingLink( false );\n\t};\n\n\tconst closeLinkUI = () => {\n\t\tsetUrlInput( null );\n\t\tstopEditLink();\n\t\tsetIsOpen( false );\n\t};\n\n\tconst getUpdatedLinkTargetSettings = ( value ) => {\n\t\tconst newLinkTarget = value ? '_blank' : undefined;\n\n\t\tlet updatedRel;\n\t\tif ( newLinkTarget ) {\n\t\t\tconst rels = ( rel ?? '' ).split( ' ' );\n\t\t\tNEW_TAB_REL.forEach( ( relVal ) => {\n\t\t\t\tif ( ! rels.includes( relVal ) ) {\n\t\t\t\t\trels.push( relVal );\n\t\t\t\t}\n\t\t\t} );\n\t\t\tupdatedRel = rels.join( ' ' );\n\t\t} else {\n\t\t\tconst rels = ( rel ?? '' )\n\t\t\t\t.split( ' ' )\n\t\t\t\t.filter(\n\t\t\t\t\t( relVal ) => NEW_TAB_REL.includes( relVal ) === false\n\t\t\t\t);\n\t\t\tupdatedRel = rels.length ? rels.join( ' ' ) : undefined;\n\t\t}\n\n\t\treturn {\n\t\t\tlinkTarget: newLinkTarget,\n\t\t\trel: updatedRel,\n\t\t};\n\t};\n\n\tconst onFocusOutside = () => {\n\t\treturn ( event ) => {\n\t\t\t// The autocomplete suggestions list renders in a separate popover (in a portal),\n\t\t\t// so onFocusOutside fails to detect that a click on a suggestion occurred in the\n\t\t\t// LinkContainer. Detect clicks on autocomplete suggestions using a ref here, and\n\t\t\t// return to avoid the popover being closed.\n\t\t\tconst autocompleteElement = autocompleteRef.current;\n\t\t\tif (\n\t\t\t\tautocompleteElement &&\n\t\t\t\tautocompleteElement.contains( event.target )\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetIsOpen( false );\n\t\t\tsetUrlInput( null );\n\t\t\tstopEditLink();\n\t\t};\n\t};\n\n\tconst onSubmitLinkChange = () => {\n\t\treturn ( event ) => {\n\t\t\tif ( urlInput ) {\n\t\t\t\t// It is possible the entered URL actually matches a named link destination.\n\t\t\t\t// This check will ensure our link destination is correct.\n\t\t\t\tconst selectedDestination =\n\t\t\t\t\tgetLinkDestinations().find(\n\t\t\t\t\t\t( destination ) => destination.url === urlInput\n\t\t\t\t\t)?.linkDestination || LINK_DESTINATION_CUSTOM;\n\n\t\t\t\tonChangeUrl( {\n\t\t\t\t\thref: prependHTTPS( urlInput ),\n\t\t\t\t\tlinkDestination: selectedDestination,\n\t\t\t\t\tlightbox: { enabled: false },\n\t\t\t\t} );\n\t\t\t}\n\t\t\tstopEditLink();\n\t\t\tsetUrlInput( null );\n\t\t\tevent.preventDefault();\n\t\t};\n\t};\n\n\tconst onLinkRemove = () => {\n\t\tonChangeUrl( {\n\t\t\tlinkDestination: LINK_DESTINATION_NONE,\n\t\t\thref: '',\n\t\t} );\n\t};\n\n\tconst getLinkDestinations = () => {\n\t\tconst linkDestinations = [\n\t\t\t{\n\t\t\t\tlinkDestination: LINK_DESTINATION_MEDIA,\n\t\t\t\ttitle: __( 'Link to image file' ),\n\t\t\t\turl: mediaType === 'image' ? mediaUrl : undefined,\n\t\t\t\ticon: image,\n\t\t\t},\n\t\t];\n\t\tif ( mediaType === 'image' && mediaLink ) {\n\t\t\tlinkDestinations.push( {\n\t\t\t\tlinkDestination: LINK_DESTINATION_ATTACHMENT,\n\t\t\t\ttitle: __( 'Link to attachment page' ),\n\t\t\t\turl: mediaType === 'image' ? mediaLink : undefined,\n\t\t\t\ticon: page,\n\t\t\t} );\n\t\t}\n\t\treturn linkDestinations;\n\t};\n\n\tconst onSetHref = ( value ) => {\n\t\tconst linkDestinations = getLinkDestinations();\n\t\tlet linkDestinationInput;\n\t\tif ( ! value ) {\n\t\t\tlinkDestinationInput = LINK_DESTINATION_NONE;\n\t\t} else {\n\t\t\tlinkDestinationInput = (\n\t\t\t\tlinkDestinations.find( ( destination ) => {\n\t\t\t\t\treturn destination.url === value;\n\t\t\t\t} ) || { linkDestination: LINK_DESTINATION_CUSTOM }\n\t\t\t).linkDestination;\n\t\t}\n\t\tonChangeUrl( {\n\t\t\tlinkDestination: linkDestinationInput,\n\t\t\thref: value,\n\t\t} );\n\t};\n\n\tconst onSetNewTab = ( value ) => {\n\t\tconst updatedLinkTarget = getUpdatedLinkTargetSettings( value );\n\t\tonChangeUrl( updatedLinkTarget );\n\t};\n\n\tconst onSetLinkRel = ( value ) => {\n\t\tonChangeUrl( { rel: value } );\n\t};\n\n\tconst onSetLinkClass = ( value ) => {\n\t\tonChangeUrl( { linkClass: value } );\n\t};\n\n\tconst advancedOptions = (\n\t\t<VStack spacing=\"3\">\n\t\t\t<ToggleControl\n\t\t\t\tlabel={ __( 'Open in new tab' ) }\n\t\t\t\tonChange={ onSetNewTab }\n\t\t\t\tchecked={ linkTarget === '_blank' }\n\t\t\t/>\n\t\t\t<TextControl\n\t\t\t\tlabel={ __( 'Link relation' ) }\n\t\t\t\tvalue={ rel ?? '' }\n\t\t\t\tonChange={ onSetLinkRel }\n\t\t\t\thelp={ createInterpolateElement(\n\t\t\t\t\t__(\n\t\t\t\t\t\t'The <a>Link Relation</a> attribute defines the relationship between a linked resource and the current document.'\n\t\t\t\t\t),\n\t\t\t\t\t{\n\t\t\t\t\t\ta: (\n\t\t\t\t\t\t\t<ExternalLink href=\"https://developer.mozilla.org/docs/Web/HTML/Attributes/rel\" />\n\t\t\t\t\t\t),\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<TextControl\n\t\t\t\tlabel={ __( 'Link CSS class' ) }\n\t\t\t\tvalue={ linkClass || '' }\n\t\t\t\tonChange={ onSetLinkClass }\n\t\t\t/>\n\t\t</VStack>\n\t);\n\n\tconst linkEditorValue = urlInput !== null ? urlInput : url;\n\tconst hideLightboxPanel =\n\t\t! lightboxEnabled || ( lightboxEnabled && ! showLightboxSetting );\n\tconst showLinkEditor = ! linkEditorValue && hideLightboxPanel;\n\n\tconst urlLabel = (\n\t\tgetLinkDestinations().find(\n\t\t\t( destination ) => destination.linkDestination === linkDestination\n\t\t) || {}\n\t).title;\n\n\tconst PopoverChildren = () => {\n\t\tif (\n\t\t\tlightboxEnabled &&\n\t\t\tshowLightboxSetting &&\n\t\t\t! url &&\n\t\t\t! isEditingLink\n\t\t) {\n\t\t\treturn (\n\t\t\t\t<div className=\"block-editor-url-popover__expand-on-click\">\n\t\t\t\t\t<Icon icon={ fullscreen } />\n\t\t\t\t\t<div className=\"text\">\n\t\t\t\t\t\t<p>{ __( 'Enlarge on click' ) }</p>\n\t\t\t\t\t\t<p className=\"description\">\n\t\t\t\t\t\t\t{ __( 'Scales the image with a lightbox effect' ) }\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Button\n\t\t\t\t\t\ticon={ linkOff }\n\t\t\t\t\t\tlabel={ __( 'Disable enlarge on click' ) }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonSetLightbox?.( false );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t);\n\t\t} else if ( ! url || isEditingLink ) {\n\t\t\treturn (\n\t\t\t\t<URLPopover.LinkEditor\n\t\t\t\t\tclassName=\"block-editor-format-toolbar__link-container-content\"\n\t\t\t\t\tvalue={ linkEditorValue }\n\t\t\t\t\tonChangeInputValue={ setUrlInput }\n\t\t\t\t\tonSubmit={ onSubmitLinkChange() }\n\t\t\t\t\tautocompleteRef={ autocompleteRef }\n\t\t\t\t/>\n\t\t\t);\n\t\t} else if ( url && ! isEditingLink ) {\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t<URLPopover.LinkViewer\n\t\t\t\t\t\tclassName=\"block-editor-format-toolbar__link-container-content\"\n\t\t\t\t\t\turl={ url }\n\t\t\t\t\t\tonEditLinkClick={ startEditLink }\n\t\t\t\t\t\turlLabel={ urlLabel }\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\ticon={ linkOff }\n\t\t\t\t\t\tlabel={ __( 'Remove link' ) }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonLinkRemove();\n\t\t\t\t\t\t\tresetLightbox?.();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t);\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<ToolbarButton\n\t\t\t\ticon={ linkIcon }\n\t\t\t\tclassName=\"components-toolbar__control\"\n\t\t\t\tlabel={ __( 'Link' ) }\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t\tonClick={ openLinkUI }\n\t\t\t\tref={ setPopoverAnchor }\n\t\t\t\tisActive={\n\t\t\t\t\t!! url || ( lightboxEnabled && showLightboxSetting )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ isOpen && (\n\t\t\t\t<URLPopover\n\t\t\t\t\tref={ wrapperRef }\n\t\t\t\t\tanchor={ popoverAnchor }\n\t\t\t\t\tonFocusOutside={ onFocusOutside() }\n\t\t\t\t\tonClose={ closeLinkUI }\n\t\t\t\t\trenderSettings={\n\t\t\t\t\t\thideLightboxPanel ? () => advancedOptions : null\n\t\t\t\t\t}\n\t\t\t\t\tadditionalControls={\n\t\t\t\t\t\tshowLinkEditor && (\n\t\t\t\t\t\t\t<NavigableMenu>\n\t\t\t\t\t\t\t\t{ getLinkDestinations().map( ( link ) => (\n\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\tkey={ link.linkDestination }\n\t\t\t\t\t\t\t\t\t\ticon={ link.icon }\n\t\t\t\t\t\t\t\t\t\ticonPosition=\"left\"\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\tsetUrlInput( null );\n\t\t\t\t\t\t\t\t\t\t\tonSetHref( link.url );\n\t\t\t\t\t\t\t\t\t\t\tstopEditLink();\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\t{ link.title }\n\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t{ showLightboxSetting && (\n\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\tkey=\"expand-on-click\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"block-editor-url-popover__expand-on-click\"\n\t\t\t\t\t\t\t\t\t\ticon={ fullscreen }\n\t\t\t\t\t\t\t\t\t\tinfo={ __(\n\t\t\t\t\t\t\t\t\t\t\t'Scale the image with a lightbox effect.'\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\ticonPosition=\"left\"\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\tsetUrlInput( null );\n\t\t\t\t\t\t\t\t\t\t\tonChangeUrl( {\n\t\t\t\t\t\t\t\t\t\t\t\tlinkDestination:\n\t\t\t\t\t\t\t\t\t\t\t\t\tLINK_DESTINATION_NONE,\n\t\t\t\t\t\t\t\t\t\t\t\thref: '',\n\t\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t\t\tonSetLightbox?.( true );\n\t\t\t\t\t\t\t\t\t\t\tstopEditLink();\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\t{ __( 'Enlarge on click' ) }\n\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</NavigableMenu>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\toffset={ 13 }\n\t\t\t\t>\n\t\t\t\t\t{ PopoverChildren() }\n\t\t\t\t</URLPopover>\n\t\t\t) }\n\t\t</>\n\t);\n};\n\nexport { ImageURLInputUI as __experimentalImageURLInputUI };\n"],
+  "mappings": "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",
   "names": ["VStack", "URLPopover", "linkIcon"]
 }

package/build/components/use-block-display-information/index.cjs

@@ -28,6 +28,8 @@ var import_blocks = require("@wordpress/blocks");
 var import_i18n = require("@wordpress/i18n");
 var import_icons = require("@wordpress/icons");
 var import_store = require("../../store/index.cjs");
+var import_lock_unlock = require("../../lock-unlock.cjs");
+var import_private_keys = require("../../store/private-keys.cjs");
 function getPositionTypeLabel(attributes) {
   const positionType = attributes?.style?.position?.type;
   if (positionType === "sticky") {
@@ -44,11 +46,13 @@ function useBlockDisplayInformation(clientId) {
       if (!clientId) {
         return null;
       }
+      const blockEditorSelect = select(import_store.store);
       const {
         getBlockName,
         getBlockAttributes,
-        __experimentalGetParsedPattern
-      } = select(import_store.store);
+        __experimentalGetParsedPattern,
+        getSettings
+      } = blockEditorSelect;
       const { getBlockType, getActiveBlockVariation } = select(import_blocks.store);
       const blockName = getBlockName(clientId);
       const blockType = getBlockType(blockName);
@@ -56,8 +60,11 @@ function useBlockDisplayInformation(clientId) {
         return null;
       }
       const attributes = getBlockAttributes(clientId);
+      const { isWithinEditedContentOnlySection } = (0, import_lock_unlock.unlock)(blockEditorSelect);
+      const isIsolatedEditor = !!getSettings()?.[import_private_keys.isIsolatedEditorKey];
       const patternName = attributes?.metadata?.patternName;
-      if (patternName) {
+      const isEditedContentOnlySection = isWithinEditedContentOnlySection(clientId);
+      if (patternName && !isEditedContentOnlySection && !isIsolatedEditor) {
         const pattern = __experimentalGetParsedPattern(patternName);
         const positionLabel2 = getPositionTypeLabel(attributes);
         return {

package/build/components/use-block-display-information/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/use-block-display-information/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport {\n\tstore as blocksStore,\n\tisReusableBlock,\n\tisTemplatePart,\n\t__experimentalGetBlockLabel as getBlockLabel,\n} from '@wordpress/blocks';\nimport { __ } from '@wordpress/i18n';\nimport { symbol } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\n\n/** @typedef {import('@wordpress/blocks').WPIcon} WPIcon */\n\n/**\n * Contains basic block's information for display reasons.\n *\n * @typedef {Object} WPBlockDisplayInformation\n *\n * @property {boolean} isSynced    True if is a reusable block or template part\n * @property {string}  title       Human-readable block type label.\n * @property {WPIcon}  icon        Block type icon.\n * @property {string}  description A detailed block type description.\n * @property {string}  anchor      HTML anchor.\n * @property {name}    name        A custom, human readable name for the block.\n */\n\n/**\n * Get the display label for a block's position type.\n *\n * @param {Object} attributes Block attributes.\n * @return {string} The position type label.\n */\nfunction getPositionTypeLabel( attributes ) {\n\tconst positionType = attributes?.style?.position?.type;\n\n\tif ( positionType === 'sticky' ) {\n\t\treturn __( 'Sticky' );\n\t}\n\n\tif ( positionType === 'fixed' ) {\n\t\treturn __( 'Fixed' );\n\t}\n\n\treturn null;\n}\n\n/**\n * Hook used to try to find a matching block variation and return\n * the appropriate information for display reasons. In order to\n * to try to find a match we need to things:\n * 1. Block's client id to extract it's current attributes.\n * 2. A block variation should have set `isActive` prop to a proper function.\n *\n * If for any reason a block variation match cannot be found,\n * the returned information come from the Block Type.\n * If no blockType is found with the provided clientId, returns null.\n *\n * @param {string} clientId Block's client id.\n * @return {?WPBlockDisplayInformation} Block's display information, or `null` when the block or its type not found.\n */\n\nexport default function useBlockDisplayInformation( clientId ) {\n\treturn useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! clientId ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\tconst {\n\t\t\t\tgetBlockName,\n\t\t\t\tgetBlockAttributes,\n\t\t\t\t__experimentalGetParsedPattern,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst { getBlockType, getActiveBlockVariation } =\n\t\t\t\tselect( blocksStore );\n\t\t\tconst blockName = getBlockName( clientId );\n\t\t\tconst blockType = getBlockType( blockName );\n\t\t\tif ( ! blockType ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\tconst attributes = getBlockAttributes( clientId );\n\n\t\t\t// Check if this block is a pattern\n\t\t\tconst patternName = attributes?.metadata?.patternName;\n\n\t\t\tif ( patternName ) {\n\t\t\t\tconst pattern = __experimentalGetParsedPattern( patternName );\n\t\t\t\tconst positionLabel = getPositionTypeLabel( attributes );\n\t\t\t\treturn {\n\t\t\t\t\tisSynced: false,\n\t\t\t\t\ttitle: __( 'Pattern' ),\n\t\t\t\t\ticon: symbol,\n\t\t\t\t\tdescription:\n\t\t\t\t\t\tpattern?.description || __( 'A block pattern.' ),\n\t\t\t\t\tanchor: attributes?.anchor,\n\t\t\t\t\tpositionLabel,\n\t\t\t\t\tpositionType: attributes?.style?.position?.type,\n\t\t\t\t\tname: pattern?.title || attributes?.metadata?.name,\n\t\t\t\t};\n\t\t\t}\n\n\t\t\tconst match = getActiveBlockVariation( blockName, attributes );\n\t\t\tconst isSynced =\n\t\t\t\tisReusableBlock( blockType ) || isTemplatePart( blockType );\n\t\t\tconst syncedTitle = isSynced\n\t\t\t\t? getBlockLabel( blockType, attributes )\n\t\t\t\t: undefined;\n\t\t\tconst title = syncedTitle || blockType.title;\n\t\t\tconst positionLabel = getPositionTypeLabel( attributes );\n\t\t\tconst blockTypeInfo = {\n\t\t\t\tisSynced,\n\t\t\t\ttitle,\n\t\t\t\ticon: blockType.icon,\n\t\t\t\tdescription: blockType.description,\n\t\t\t\tanchor: attributes?.anchor,\n\t\t\t\tpositionLabel,\n\t\t\t\tpositionType: attributes?.style?.position?.type,\n\t\t\t\tname: attributes?.metadata?.name,\n\t\t\t};\n\t\t\tif ( ! match ) {\n\t\t\t\treturn blockTypeInfo;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tisSynced,\n\t\t\t\ttitle: match.title || blockType.title,\n\t\t\t\ticon: match.icon || blockType.icon,\n\t\t\t\tdescription: match.description || blockType.description,\n\t\t\t\tanchor: attributes?.anchor,\n\t\t\t\tpositionLabel,\n\t\t\t\tpositionType: attributes?.style?.position?.type,\n\t\t\t\tname: attributes?.metadata?.name,\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAA0B;AAC1B,oBAKO;AACP,kBAAmB;AACnB,mBAAuB;AAKvB,mBAA0C;AAuB1C,SAAS,qBAAsB,YAAa;AAC3C,QAAM,eAAe,YAAY,OAAO,UAAU;AAElD,MAAK,iBAAiB,UAAW;AAChC,eAAO,gBAAI,QAAS;AAAA,EACrB;AAEA,MAAK,iBAAiB,SAAU;AAC/B,eAAO,gBAAI,OAAQ;AAAA,EACpB;AAEA,SAAO;AACR;AAiBe,SAAR,2BAA6C,UAAW;AAC9D,aAAO;AAAA,IACN,CAAE,WAAY;AACb,UAAK,CAAE,UAAW;AACjB,eAAO;AAAA,MACR;AACA,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,aAAAA,KAAiB;AAC7B,YAAM,EAAE,cAAc,wBAAwB,IAC7C,OAAQ,cAAAC,KAAY;AACrB,YAAM,YAAY,aAAc,QAAS;AACzC,YAAM,YAAY,aAAc,SAAU;AAC1C,UAAK,CAAE,WAAY;AAClB,eAAO;AAAA,MACR;AACA,YAAM,aAAa,mBAAoB,QAAS;AAGhD,YAAM,cAAc,YAAY,UAAU;AAE1C,UAAK,aAAc;AAClB,cAAM,UAAU,+BAAgC,WAAY;AAC5D,cAAMC,iBAAgB,qBAAsB,UAAW;AACvD,eAAO;AAAA,UACN,UAAU;AAAA,UACV,WAAO,gBAAI,SAAU;AAAA,UACrB,MAAM;AAAA,UACN,aACC,SAAS,mBAAe,gBAAI,kBAAmB;AAAA,UAChD,QAAQ,YAAY;AAAA,UACpB,eAAAA;AAAA,UACA,cAAc,YAAY,OAAO,UAAU;AAAA,UAC3C,MAAM,SAAS,SAAS,YAAY,UAAU;AAAA,QAC/C;AAAA,MACD;AAEA,YAAM,QAAQ,wBAAyB,WAAW,UAAW;AAC7D,YAAM,eACL,+BAAiB,SAAU,SAAK,8BAAgB,SAAU;AAC3D,YAAM,cAAc,eACjB,cAAAC,6BAAe,WAAW,UAAW,IACrC;AACH,YAAM,QAAQ,eAAe,UAAU;AACvC,YAAM,gBAAgB,qBAAsB,UAAW;AACvD,YAAM,gBAAgB;AAAA,QACrB;AAAA,QACA;AAAA,QACA,MAAM,UAAU;AAAA,QAChB,aAAa,UAAU;AAAA,QACvB,QAAQ,YAAY;AAAA,QACpB;AAAA,QACA,cAAc,YAAY,OAAO,UAAU;AAAA,QAC3C,MAAM,YAAY,UAAU;AAAA,MAC7B;AACA,UAAK,CAAE,OAAQ;AACd,eAAO;AAAA,MACR;AAEA,aAAO;AAAA,QACN;AAAA,QACA,OAAO,MAAM,SAAS,UAAU;AAAA,QAChC,MAAM,MAAM,QAAQ,UAAU;AAAA,QAC9B,aAAa,MAAM,eAAe,UAAU;AAAA,QAC5C,QAAQ,YAAY;AAAA,QACpB;AAAA,QACA,cAAc,YAAY,OAAO,UAAU;AAAA,QAC3C,MAAM,YAAY,UAAU;AAAA,MAC7B;AAAA,IACD;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AACD;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport {\n\tstore as blocksStore,\n\tisReusableBlock,\n\tisTemplatePart,\n\t__experimentalGetBlockLabel as getBlockLabel,\n} from '@wordpress/blocks';\nimport { __ } from '@wordpress/i18n';\nimport { symbol } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\nimport { isIsolatedEditorKey } from '../../store/private-keys';\n\n/** @typedef {import('@wordpress/blocks').WPIcon} WPIcon */\n\n/**\n * Contains basic block's information for display reasons.\n *\n * @typedef {Object} WPBlockDisplayInformation\n *\n * @property {boolean} isSynced    True if is a reusable block or template part\n * @property {string}  title       Human-readable block type label.\n * @property {WPIcon}  icon        Block type icon.\n * @property {string}  description A detailed block type description.\n * @property {string}  anchor      HTML anchor.\n * @property {name}    name        A custom, human readable name for the block.\n */\n\n/**\n * Get the display label for a block's position type.\n *\n * @param {Object} attributes Block attributes.\n * @return {string} The position type label.\n */\nfunction getPositionTypeLabel( attributes ) {\n\tconst positionType = attributes?.style?.position?.type;\n\n\tif ( positionType === 'sticky' ) {\n\t\treturn __( 'Sticky' );\n\t}\n\n\tif ( positionType === 'fixed' ) {\n\t\treturn __( 'Fixed' );\n\t}\n\n\treturn null;\n}\n\n/**\n * Hook used to try to find a matching block variation and return\n * the appropriate information for display reasons. In order to\n * to try to find a match we need to things:\n * 1. Block's client id to extract it's current attributes.\n * 2. A block variation should have set `isActive` prop to a proper function.\n *\n * If for any reason a block variation match cannot be found,\n * the returned information come from the Block Type.\n * If no blockType is found with the provided clientId, returns null.\n *\n * @param {string} clientId Block's client id.\n * @return {?WPBlockDisplayInformation} Block's display information, or `null` when the block or its type not found.\n */\n\nexport default function useBlockDisplayInformation( clientId ) {\n\treturn useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! clientId ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\tconst blockEditorSelect = select( blockEditorStore );\n\t\t\tconst {\n\t\t\t\tgetBlockName,\n\t\t\t\tgetBlockAttributes,\n\t\t\t\t__experimentalGetParsedPattern,\n\t\t\t\tgetSettings,\n\t\t\t} = blockEditorSelect;\n\t\t\tconst { getBlockType, getActiveBlockVariation } =\n\t\t\t\tselect( blocksStore );\n\t\t\tconst blockName = getBlockName( clientId );\n\t\t\tconst blockType = getBlockType( blockName );\n\t\t\tif ( ! blockType ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\tconst attributes = getBlockAttributes( clientId );\n\t\t\tconst { isWithinEditedContentOnlySection } =\n\t\t\t\tunlock( blockEditorSelect );\n\t\t\tconst isIsolatedEditor = !! getSettings()?.[ isIsolatedEditorKey ];\n\n\t\t\t// Check if this block is a pattern\n\t\t\tconst patternName = attributes?.metadata?.patternName;\n\t\t\tconst isEditedContentOnlySection =\n\t\t\t\tisWithinEditedContentOnlySection( clientId );\n\n\t\t\tif (\n\t\t\t\tpatternName &&\n\t\t\t\t! isEditedContentOnlySection &&\n\t\t\t\t! isIsolatedEditor\n\t\t\t) {\n\t\t\t\tconst pattern = __experimentalGetParsedPattern( patternName );\n\t\t\t\tconst positionLabel = getPositionTypeLabel( attributes );\n\t\t\t\treturn {\n\t\t\t\t\tisSynced: false,\n\t\t\t\t\ttitle: __( 'Pattern' ),\n\t\t\t\t\ticon: symbol,\n\t\t\t\t\tdescription:\n\t\t\t\t\t\tpattern?.description || __( 'A block pattern.' ),\n\t\t\t\t\tanchor: attributes?.anchor,\n\t\t\t\t\tpositionLabel,\n\t\t\t\t\tpositionType: attributes?.style?.position?.type,\n\t\t\t\t\tname: pattern?.title || attributes?.metadata?.name,\n\t\t\t\t};\n\t\t\t}\n\n\t\t\tconst match = getActiveBlockVariation( blockName, attributes );\n\t\t\tconst isSynced =\n\t\t\t\tisReusableBlock( blockType ) || isTemplatePart( blockType );\n\t\t\tconst syncedTitle = isSynced\n\t\t\t\t? getBlockLabel( blockType, attributes )\n\t\t\t\t: undefined;\n\t\t\tconst title = syncedTitle || blockType.title;\n\t\t\tconst positionLabel = getPositionTypeLabel( attributes );\n\t\t\tconst blockTypeInfo = {\n\t\t\t\tisSynced,\n\t\t\t\ttitle,\n\t\t\t\ticon: blockType.icon,\n\t\t\t\tdescription: blockType.description,\n\t\t\t\tanchor: attributes?.anchor,\n\t\t\t\tpositionLabel,\n\t\t\t\tpositionType: attributes?.style?.position?.type,\n\t\t\t\tname: attributes?.metadata?.name,\n\t\t\t};\n\t\t\tif ( ! match ) {\n\t\t\t\treturn blockTypeInfo;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tisSynced,\n\t\t\t\ttitle: match.title || blockType.title,\n\t\t\t\ticon: match.icon || blockType.icon,\n\t\t\t\tdescription: match.description || blockType.description,\n\t\t\t\tanchor: attributes?.anchor,\n\t\t\t\tpositionLabel,\n\t\t\t\tpositionType: attributes?.style?.position?.type,\n\t\t\t\tname: attributes?.metadata?.name,\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAA0B;AAC1B,oBAKO;AACP,kBAAmB;AACnB,mBAAuB;AAKvB,mBAA0C;AAC1C,yBAAuB;AACvB,0BAAoC;AAuBpC,SAAS,qBAAsB,YAAa;AAC3C,QAAM,eAAe,YAAY,OAAO,UAAU;AAElD,MAAK,iBAAiB,UAAW;AAChC,eAAO,gBAAI,QAAS;AAAA,EACrB;AAEA,MAAK,iBAAiB,SAAU;AAC/B,eAAO,gBAAI,OAAQ;AAAA,EACpB;AAEA,SAAO;AACR;AAiBe,SAAR,2BAA6C,UAAW;AAC9D,aAAO;AAAA,IACN,CAAE,WAAY;AACb,UAAK,CAAE,UAAW;AACjB,eAAO;AAAA,MACR;AACA,YAAM,oBAAoB,OAAQ,aAAAA,KAAiB;AACnD,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI;AACJ,YAAM,EAAE,cAAc,wBAAwB,IAC7C,OAAQ,cAAAC,KAAY;AACrB,YAAM,YAAY,aAAc,QAAS;AACzC,YAAM,YAAY,aAAc,SAAU;AAC1C,UAAK,CAAE,WAAY;AAClB,eAAO;AAAA,MACR;AACA,YAAM,aAAa,mBAAoB,QAAS;AAChD,YAAM,EAAE,iCAAiC,QACxC,2BAAQ,iBAAkB;AAC3B,YAAM,mBAAmB,CAAC,CAAE,YAAY,IAAK,uCAAoB;AAGjE,YAAM,cAAc,YAAY,UAAU;AAC1C,YAAM,6BACL,iCAAkC,QAAS;AAE5C,UACC,eACA,CAAE,8BACF,CAAE,kBACD;AACD,cAAM,UAAU,+BAAgC,WAAY;AAC5D,cAAMC,iBAAgB,qBAAsB,UAAW;AACvD,eAAO;AAAA,UACN,UAAU;AAAA,UACV,WAAO,gBAAI,SAAU;AAAA,UACrB,MAAM;AAAA,UACN,aACC,SAAS,mBAAe,gBAAI,kBAAmB;AAAA,UAChD,QAAQ,YAAY;AAAA,UACpB,eAAAA;AAAA,UACA,cAAc,YAAY,OAAO,UAAU;AAAA,UAC3C,MAAM,SAAS,SAAS,YAAY,UAAU;AAAA,QAC/C;AAAA,MACD;AAEA,YAAM,QAAQ,wBAAyB,WAAW,UAAW;AAC7D,YAAM,eACL,+BAAiB,SAAU,SAAK,8BAAgB,SAAU;AAC3D,YAAM,cAAc,eACjB,cAAAC,6BAAe,WAAW,UAAW,IACrC;AACH,YAAM,QAAQ,eAAe,UAAU;AACvC,YAAM,gBAAgB,qBAAsB,UAAW;AACvD,YAAM,gBAAgB;AAAA,QACrB;AAAA,QACA;AAAA,QACA,MAAM,UAAU;AAAA,QAChB,aAAa,UAAU;AAAA,QACvB,QAAQ,YAAY;AAAA,QACpB;AAAA,QACA,cAAc,YAAY,OAAO,UAAU;AAAA,QAC3C,MAAM,YAAY,UAAU;AAAA,MAC7B;AACA,UAAK,CAAE,OAAQ;AACd,eAAO;AAAA,MACR;AAEA,aAAO;AAAA,QACN;AAAA,QACA,OAAO,MAAM,SAAS,UAAU;AAAA,QAChC,MAAM,MAAM,QAAQ,UAAU;AAAA,QAC9B,aAAa,MAAM,eAAe,UAAU;AAAA,QAC5C,QAAQ,YAAY;AAAA,QACpB;AAAA,QACA,cAAc,YAAY,OAAO,UAAU;AAAA,QAC3C,MAAM,YAAY,UAAU;AAAA,MAC7B;AAAA,IACD;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AACD;",
   "names": ["blockEditorStore", "blocksStore", "positionLabel", "getBlockLabel"]
 }

package/build/components/writing-flow/use-tab-nav.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/writing-flow/use-tab-nav.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { focus, isFormElement } from '@wordpress/dom';\nimport { TAB } from '@wordpress/keycodes';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useRefEffect, useMergeRefs } from '@wordpress/compose';\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { isInSameBlock, isInsideRootBlock } from '../../utils/dom';\nimport { unlock } from '../../lock-unlock';\n\nexport default function useTabNav() {\n\tconst containerRef = /** @type {typeof useRef<HTMLElement>} */ ( useRef )();\n\tconst focusCaptureBeforeRef = useRef();\n\tconst focusCaptureAfterRef = useRef();\n\n\tconst {\n\t\thasMultiSelection,\n\t\tgetSelectedBlockClientId,\n\t\tgetBlockCount,\n\t\tgetBlockOrder,\n\t\tgetLastFocus,\n\t\tgetSectionRootClientId,\n\t\tisZoomOut,\n\t} = unlock( useSelect( blockEditorStore ) );\n\tconst { setLastFocus } = unlock( useDispatch( blockEditorStore ) );\n\n\t// Reference that holds the a flag for enabling or disabling\n\t// capturing on the focus capture elements.\n\tconst noCaptureRef = useRef();\n\n\tfunction onFocusCapture( event ) {\n\t\tconst canvasElement =\n\t\t\tcontainerRef.current.ownerDocument === event.target.ownerDocument\n\t\t\t\t? containerRef.current\n\t\t\t\t: containerRef.current.ownerDocument.defaultView.frameElement;\n\n\t\t// Do not capture incoming focus if set by us in WritingFlow.\n\t\tif ( noCaptureRef.current ) {\n\t\t\tnoCaptureRef.current = null;\n\t\t} else if ( hasMultiSelection() ) {\n\t\t\tcontainerRef.current.focus();\n\t\t} else if ( getSelectedBlockClientId() ) {\n\t\t\tif ( getLastFocus()?.current ) {\n\t\t\t\tgetLastFocus().current.focus();\n\t\t\t} else {\n\t\t\t\t// Handles when the last focus has not been set yet, or has been cleared by new blocks being added via the inserter.\n\t\t\t\tcontainerRef.current\n\t\t\t\t\t.querySelector(\n\t\t\t\t\t\t`[data-block=\"${ getSelectedBlockClientId() }\"]`\n\t\t\t\t\t)\n\t\t\t\t\t.focus();\n\t\t\t}\n\t\t}\n\t\t// In \"compose\" mode without a selected ID, we want to place focus on the section root when tabbing to the canvas.\n\t\telse if ( isZoomOut() ) {\n\t\t\tconst sectionRootClientId = getSectionRootClientId();\n\t\t\tconst sectionBlocks = getBlockOrder( sectionRootClientId );\n\n\t\t\t// If we have section within the section root, focus the first one.\n\t\t\tif ( sectionBlocks.length ) {\n\t\t\t\tcontainerRef.current\n\t\t\t\t\t.querySelector( `[data-block=\"${ sectionBlocks[ 0 ] }\"]` )\n\t\t\t\t\t.focus();\n\t\t\t}\n\t\t\t// If we don't have any section blocks, focus the section root.\n\t\t\telse if ( sectionRootClientId ) {\n\t\t\t\tcontainerRef.current\n\t\t\t\t\t.querySelector( `[data-block=\"${ sectionRootClientId }\"]` )\n\t\t\t\t\t.focus();\n\t\t\t} else {\n\t\t\t\t// If we don't have any section root, focus the canvas.\n\t\t\t\tcanvasElement.focus();\n\t\t\t}\n\t\t} else {\n\t\t\tconst isBefore =\n\t\t\t\t// eslint-disable-next-line no-bitwise\n\t\t\t\tevent.target.compareDocumentPosition( canvasElement ) &\n\t\t\t\tevent.target.DOCUMENT_POSITION_FOLLOWING;\n\t\t\tconst tabbables = focus.tabbable.find( containerRef.current );\n\t\t\tif ( tabbables.length ) {\n\t\t\t\tconst next = isBefore\n\t\t\t\t\t? tabbables[ 0 ]\n\t\t\t\t\t: tabbables[ tabbables.length - 1 ];\n\t\t\t\tnext.focus();\n\t\t\t}\n\t\t}\n\t}\n\n\tconst before = (\n\t\t<div\n\t\t\tref={ focusCaptureBeforeRef }\n\t\t\ttabIndex=\"0\"\n\t\t\tonFocus={ onFocusCapture }\n\t\t/>\n\t);\n\n\tconst after = (\n\t\t<div\n\t\t\tref={ focusCaptureAfterRef }\n\t\t\ttabIndex=\"0\"\n\t\t\tonFocus={ onFocusCapture }\n\t\t/>\n\t);\n\n\tconst ref = useRefEffect( ( node ) => {\n\t\tfunction onKeyDown( event ) {\n\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// In Edit mode, Tab should focus the first tabbable element after\n\t\t\t// the content, which is normally the sidebar (with block controls)\n\t\t\t// and Shift+Tab should focus the first tabbable element before the\n\t\t\t// content, which is normally the block toolbar.\n\t\t\t// Arrow keys can be used, and Tab and arrow keys can be used in\n\t\t\t// Navigation mode (press Esc), to navigate through blocks.\n\t\t\tif ( event.keyCode !== TAB ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\t// Bails in case the focus capture elements aren\u2019t present. They\n\t\t\t\t// may be omitted to avoid silent tab stops in preview mode.\n\t\t\t\t// See: https://github.com/WordPress/gutenberg/pull/59317\n\t\t\t\t! focusCaptureAfterRef.current ||\n\t\t\t\t! focusCaptureBeforeRef.current\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst { target, shiftKey: isShift } = event;\n\t\t\tconst direction = isShift ? 'findPrevious' : 'findNext';\n\t\t\tconst nextTabbable = focus.tabbable[ direction ]( target );\n\n\t\t\t// We want to constrain the tabbing to the block and its child blocks.\n\t\t\t// If the preceding form element is within a different block,\n\t\t\t// such as two sibling image blocks in the placeholder state,\n\t\t\t// we want shift + tab from the first form element to move to the image\n\t\t\t// block toolbar and not the previous image block's form element.\n\t\t\tconst currentBlock = target.closest( '[data-block]' );\n\t\t\tconst isElementPartOfSelectedBlock =\n\t\t\t\tcurrentBlock &&\n\t\t\t\tnextTabbable &&\n\t\t\t\t( isInSameBlock( currentBlock, nextTabbable ) ||\n\t\t\t\t\tisInsideRootBlock( currentBlock, nextTabbable ) );\n\n\t\t\t// Allow tabbing from the block wrapper to a form element,\n\t\t\t// and between form elements rendered in a block and its child blocks,\n\t\t\t// such as inside a placeholder. Form elements are generally\n\t\t\t// meant to be UI rather than part of the content. Ideally\n\t\t\t// these are not rendered in the content and perhaps in the\n\t\t\t// future they can be rendered in an iframe or shadow DOM.\n\t\t\tif (\n\t\t\t\tisFormElement( nextTabbable ) &&\n\t\t\t\tisElementPartOfSelectedBlock\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst next = isShift ? focusCaptureBeforeRef : focusCaptureAfterRef;\n\n\t\t\t// Disable focus capturing on the focus capture element, so it\n\t\t\t// doesn't refocus this block and so it allows default behaviour\n\t\t\t// (moving focus to the next tabbable element).\n\t\t\tnoCaptureRef.current = true;\n\n\t\t\t// Focusing the focus capture element, which is located above and\n\t\t\t// below the editor, should not scroll the page all the way up or\n\t\t\t// down.\n\t\t\tnext.current.focus( { preventScroll: true } );\n\t\t}\n\n\t\tfunction onFocusOut( event ) {\n\t\t\tsetLastFocus( { ...getLastFocus(), current: event.target } );\n\n\t\t\tconst { ownerDocument } = node;\n\n\t\t\t// If focus disappears due to there being no blocks, move focus to\n\t\t\t// the writing flow wrapper.\n\t\t\tif (\n\t\t\t\t! event.relatedTarget &&\n\t\t\t\tevent.target.hasAttribute( 'data-block' ) &&\n\t\t\t\townerDocument.activeElement === ownerDocument.body &&\n\t\t\t\tgetBlockCount() === 0\n\t\t\t) {\n\t\t\t\tnode.focus();\n\t\t\t}\n\t\t}\n\n\t\t// When tabbing back to an element in block list, this event handler prevents scrolling if the\n\t\t// focus capture divs (before/after) are outside of the viewport. (For example shift+tab back to a paragraph\n\t\t// when focus is on a sidebar element. This prevents the scrollable writing area from jumping either to the\n\t\t// top or bottom of the document.\n\t\t//\n\t\t// Note that it isn't possible to disable scrolling in the onFocus event. We need to intercept this\n\t\t// earlier in the keypress handler, and call focus( { preventScroll: true } ) instead.\n\t\t// https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus#parameters\n\t\tfunction preventScrollOnTab( event ) {\n\t\t\tif ( event.keyCode !== TAB ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( event.target?.getAttribute( 'role' ) === 'region' ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( containerRef.current === event.target ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst isShift = event.shiftKey;\n\t\t\tconst direction = isShift ? 'findPrevious' : 'findNext';\n\t\t\tconst target = focus.tabbable[ direction ]( event.target );\n\t\t\t// Only do something when the next tabbable is a focus capture div (before/after)\n\t\t\tif (\n\t\t\t\ttarget === focusCaptureBeforeRef.current ||\n\t\t\t\ttarget === focusCaptureAfterRef.current\n\t\t\t) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\ttarget.focus( { preventScroll: true } );\n\t\t\t}\n\t\t}\n\n\t\tconst { ownerDocument } = node;\n\t\tconst { defaultView } = ownerDocument;\n\t\tdefaultView.addEventListener( 'keydown', preventScrollOnTab );\n\t\tnode.addEventListener( 'keydown', onKeyDown );\n\t\tnode.addEventListener( 'focusout', onFocusOut );\n\t\treturn () => {\n\t\t\tdefaultView.removeEventListener( 'keydown', preventScrollOnTab );\n\t\t\tnode.removeEventListener( 'keydown', onKeyDown );\n\t\t\tnode.removeEventListener( 'focusout', onFocusOut );\n\t\t};\n\t}, [] );\n\n\tconst mergedRefs = useMergeRefs( [ containerRef, ref ] );\n\n\treturn [ before, mergedRefs, after ];\n}\n"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { focus, isFormElement } from '@wordpress/dom';\nimport { TAB } from '@wordpress/keycodes';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useRefEffect, useMergeRefs } from '@wordpress/compose';\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { isInSameBlock, isInsideRootBlock } from '../../utils/dom';\nimport { unlock } from '../../lock-unlock';\n\nexport default function useTabNav() {\n\tconst containerRef = /** @type {typeof useRef<HTMLElement>} */ ( useRef )();\n\tconst focusCaptureBeforeRef = useRef();\n\tconst focusCaptureAfterRef = useRef();\n\n\tconst {\n\t\thasMultiSelection,\n\t\tgetSelectedBlockClientId,\n\t\tgetBlockCount,\n\t\tgetBlockOrder,\n\t\tgetLastFocus,\n\t\tgetSectionRootClientId,\n\t\tisZoomOut,\n\t} = unlock( useSelect( blockEditorStore ) );\n\tconst { setLastFocus } = unlock( useDispatch( blockEditorStore ) );\n\n\t// Reference that holds the a flag for enabling or disabling\n\t// capturing on the focus capture elements.\n\tconst noCaptureRef = useRef();\n\n\tfunction onFocusCapture( event ) {\n\t\tconst canvasElement =\n\t\t\tcontainerRef.current.ownerDocument === event.target.ownerDocument\n\t\t\t\t? containerRef.current\n\t\t\t\t: containerRef.current.ownerDocument.defaultView.frameElement;\n\n\t\t// Do not capture incoming focus if set by us in WritingFlow.\n\t\tif ( noCaptureRef.current ) {\n\t\t\tnoCaptureRef.current = null;\n\t\t} else if ( hasMultiSelection() ) {\n\t\t\tcontainerRef.current.focus();\n\t\t} else if ( getSelectedBlockClientId() ) {\n\t\t\tif ( getLastFocus()?.current ) {\n\t\t\t\tgetLastFocus().current.focus();\n\t\t\t} else {\n\t\t\t\t// Handles when the last focus has not been set yet, or has been cleared by new blocks being added via the inserter.\n\t\t\t\tcontainerRef.current\n\t\t\t\t\t.querySelector(\n\t\t\t\t\t\t`[data-block=\"${ getSelectedBlockClientId() }\"]`\n\t\t\t\t\t)\n\t\t\t\t\t.focus();\n\t\t\t}\n\t\t}\n\t\t// In \"compose\" mode without a selected ID, we want to place focus on the section root when tabbing to the canvas.\n\t\telse if ( isZoomOut() ) {\n\t\t\tconst sectionRootClientId = getSectionRootClientId();\n\t\t\tconst sectionBlocks = getBlockOrder( sectionRootClientId );\n\n\t\t\t// If we have section within the section root, focus the first one.\n\t\t\tif ( sectionBlocks.length ) {\n\t\t\t\tcontainerRef.current\n\t\t\t\t\t.querySelector( `[data-block=\"${ sectionBlocks[ 0 ] }\"]` )\n\t\t\t\t\t.focus();\n\t\t\t}\n\t\t\t// If we don't have any section blocks, focus the section root.\n\t\t\telse if ( sectionRootClientId ) {\n\t\t\t\tcontainerRef.current\n\t\t\t\t\t.querySelector( `[data-block=\"${ sectionRootClientId }\"]` )\n\t\t\t\t\t.focus();\n\t\t\t} else {\n\t\t\t\t// If we don't have any section root, focus the canvas.\n\t\t\t\tcanvasElement.focus();\n\t\t\t}\n\t\t} else {\n\t\t\tconst isBefore =\n\t\t\t\t// eslint-disable-next-line no-bitwise\n\t\t\t\tevent.target.compareDocumentPosition( canvasElement ) &\n\t\t\t\tevent.target.DOCUMENT_POSITION_FOLLOWING;\n\t\t\tconst tabbables = focus.tabbable.find( containerRef.current );\n\t\t\tif ( tabbables.length ) {\n\t\t\t\tconst next = isBefore\n\t\t\t\t\t? tabbables[ 0 ]\n\t\t\t\t\t: tabbables[ tabbables.length - 1 ];\n\t\t\t\tnext.focus();\n\t\t\t}\n\t\t}\n\t}\n\n\tconst before = (\n\t\t<div\n\t\t\tref={ focusCaptureBeforeRef }\n\t\t\ttabIndex=\"0\"\n\t\t\tonFocus={ onFocusCapture }\n\t\t/>\n\t);\n\n\tconst after = (\n\t\t<div\n\t\t\tref={ focusCaptureAfterRef }\n\t\t\ttabIndex=\"0\"\n\t\t\tonFocus={ onFocusCapture }\n\t\t/>\n\t);\n\n\tconst ref = useRefEffect( ( node ) => {\n\t\tfunction onKeyDown( event ) {\n\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// In Edit mode, Tab should focus the first tabbable element after\n\t\t\t// the content, which is normally the sidebar (with block controls)\n\t\t\t// and Shift+Tab should focus the first tabbable element before the\n\t\t\t// content, which is normally the block toolbar.\n\t\t\t// Arrow keys can be used, and Tab and arrow keys can be used in\n\t\t\t// Navigation mode (press Esc), to navigate through blocks.\n\t\t\tif ( event.keyCode !== TAB ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\t// Bails in case the focus capture elements aren’t present. They\n\t\t\t\t// may be omitted to avoid silent tab stops in preview mode.\n\t\t\t\t// See: https://github.com/WordPress/gutenberg/pull/59317\n\t\t\t\t! focusCaptureAfterRef.current ||\n\t\t\t\t! focusCaptureBeforeRef.current\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst { target, shiftKey: isShift } = event;\n\t\t\tconst direction = isShift ? 'findPrevious' : 'findNext';\n\t\t\tconst nextTabbable = focus.tabbable[ direction ]( target );\n\n\t\t\t// We want to constrain the tabbing to the block and its child blocks.\n\t\t\t// If the preceding form element is within a different block,\n\t\t\t// such as two sibling image blocks in the placeholder state,\n\t\t\t// we want shift + tab from the first form element to move to the image\n\t\t\t// block toolbar and not the previous image block's form element.\n\t\t\tconst currentBlock = target.closest( '[data-block]' );\n\t\t\tconst isElementPartOfSelectedBlock =\n\t\t\t\tcurrentBlock &&\n\t\t\t\tnextTabbable &&\n\t\t\t\t( isInSameBlock( currentBlock, nextTabbable ) ||\n\t\t\t\t\tisInsideRootBlock( currentBlock, nextTabbable ) );\n\n\t\t\t// Allow tabbing from the block wrapper to a form element,\n\t\t\t// and between form elements rendered in a block and its child blocks,\n\t\t\t// such as inside a placeholder. Form elements are generally\n\t\t\t// meant to be UI rather than part of the content. Ideally\n\t\t\t// these are not rendered in the content and perhaps in the\n\t\t\t// future they can be rendered in an iframe or shadow DOM.\n\t\t\tif (\n\t\t\t\tisFormElement( nextTabbable ) &&\n\t\t\t\tisElementPartOfSelectedBlock\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst next = isShift ? focusCaptureBeforeRef : focusCaptureAfterRef;\n\n\t\t\t// Disable focus capturing on the focus capture element, so it\n\t\t\t// doesn't refocus this block and so it allows default behaviour\n\t\t\t// (moving focus to the next tabbable element).\n\t\t\tnoCaptureRef.current = true;\n\n\t\t\t// Focusing the focus capture element, which is located above and\n\t\t\t// below the editor, should not scroll the page all the way up or\n\t\t\t// down.\n\t\t\tnext.current.focus( { preventScroll: true } );\n\t\t}\n\n\t\tfunction onFocusOut( event ) {\n\t\t\tsetLastFocus( { ...getLastFocus(), current: event.target } );\n\n\t\t\tconst { ownerDocument } = node;\n\n\t\t\t// If focus disappears due to there being no blocks, move focus to\n\t\t\t// the writing flow wrapper.\n\t\t\tif (\n\t\t\t\t! event.relatedTarget &&\n\t\t\t\tevent.target.hasAttribute( 'data-block' ) &&\n\t\t\t\townerDocument.activeElement === ownerDocument.body &&\n\t\t\t\tgetBlockCount() === 0\n\t\t\t) {\n\t\t\t\tnode.focus();\n\t\t\t}\n\t\t}\n\n\t\t// When tabbing back to an element in block list, this event handler prevents scrolling if the\n\t\t// focus capture divs (before/after) are outside of the viewport. (For example shift+tab back to a paragraph\n\t\t// when focus is on a sidebar element. This prevents the scrollable writing area from jumping either to the\n\t\t// top or bottom of the document.\n\t\t//\n\t\t// Note that it isn't possible to disable scrolling in the onFocus event. We need to intercept this\n\t\t// earlier in the keypress handler, and call focus( { preventScroll: true } ) instead.\n\t\t// https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus#parameters\n\t\tfunction preventScrollOnTab( event ) {\n\t\t\tif ( event.keyCode !== TAB ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( event.target?.getAttribute( 'role' ) === 'region' ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( containerRef.current === event.target ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst isShift = event.shiftKey;\n\t\t\tconst direction = isShift ? 'findPrevious' : 'findNext';\n\t\t\tconst target = focus.tabbable[ direction ]( event.target );\n\t\t\t// Only do something when the next tabbable is a focus capture div (before/after)\n\t\t\tif (\n\t\t\t\ttarget === focusCaptureBeforeRef.current ||\n\t\t\t\ttarget === focusCaptureAfterRef.current\n\t\t\t) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\ttarget.focus( { preventScroll: true } );\n\t\t\t}\n\t\t}\n\n\t\tconst { ownerDocument } = node;\n\t\tconst { defaultView } = ownerDocument;\n\t\tdefaultView.addEventListener( 'keydown', preventScrollOnTab );\n\t\tnode.addEventListener( 'keydown', onKeyDown );\n\t\tnode.addEventListener( 'focusout', onFocusOut );\n\t\treturn () => {\n\t\t\tdefaultView.removeEventListener( 'keydown', preventScrollOnTab );\n\t\t\tnode.removeEventListener( 'keydown', onKeyDown );\n\t\t\tnode.removeEventListener( 'focusout', onFocusOut );\n\t\t};\n\t}, [] );\n\n\tconst mergedRefs = useMergeRefs( [ containerRef, ref ] );\n\n\treturn [ before, mergedRefs, after ];\n}\n"],
   "mappings": "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",
   "names": ["import_dom", "blockEditorStore", "ownerDocument"]
 }

package/build/hooks/anchor.cjs

@@ -55,12 +55,11 @@ function BlockEditAnchorControlPure({ anchor, setAttributes }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components2.InspectorControls, { group: "advanced", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_components.TextControl,
     {
-      __next40pxDefaultSize: true,
       className: "html-anchor-control",
       label: (0, import_i18n.__)("HTML anchor"),
       help: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
         (0, import_i18n.__)(
-          "Enter a word or two\u2014without spaces\u2014to make a unique web address just for this block, called an \u201Canchor\u201D. Then, you\u2019ll be able to link directly to this section of your page."
+          "Enter a word or two—without spaces—to make a unique web address just for this block, called an “anchor”. Then, you’ll be able to link directly to this section of your page."
         ),
         " ",
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/build/hooks/anchor.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/hooks/anchor.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { TextControl, ExternalLink } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { hasBlockSupport } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { InspectorControls } from '../components';\nimport { useBlockEditingMode } from '../components/block-editing-mode';\n\n/**\n * Regular expression matching invalid anchor characters for replacement.\n *\n * @type {RegExp}\n */\nconst ANCHOR_REGEX = /[\\s#]/g;\n\n/**\n * Filters registered block settings, extending attributes with anchor using ID\n * of the first node.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nexport function addAttribute( settings ) {\n\t// Allow blocks to specify their own attribute definition with default values if needed.\n\tif ( 'type' in ( settings.attributes?.anchor ?? {} ) ) {\n\t\treturn settings;\n\t}\n\tif ( hasBlockSupport( settings, 'anchor' ) ) {\n\t\t// Gracefully handle if settings.attributes is undefined.\n\t\tsettings.attributes = {\n\t\t\t...settings.attributes,\n\t\t\tanchor: {\n\t\t\t\ttype: 'string',\n\t\t\t},\n\t\t};\n\t}\n\n\treturn settings;\n}\n\nfunction BlockEditAnchorControlPure( { anchor, setAttributes } ) {\n\tconst blockEditingMode = useBlockEditingMode();\n\n\tif ( blockEditingMode !== 'default' ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<InspectorControls group=\"advanced\">\n\t\t\t<TextControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tclassName=\"html-anchor-control\"\n\t\t\t\tlabel={ __( 'HTML anchor' ) }\n\t\t\t\thelp={\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'Enter a word or two\u2014without spaces\u2014to make a unique web address just for this block, called an \u201Canchor\u201D. Then, you\u2019ll be able to link directly to this section of your page.'\n\t\t\t\t\t\t) }{ ' ' }\n\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t'https://wordpress.org/documentation/article/page-jumps/'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Learn more about anchors' ) }\n\t\t\t\t\t\t</ExternalLink>\n\t\t\t\t\t</>\n\t\t\t\t}\n\t\t\t\tvalue={ anchor || '' }\n\t\t\t\tplaceholder={ null }\n\t\t\t\tonChange={ ( nextValue ) => {\n\t\t\t\t\tnextValue = nextValue.replace( ANCHOR_REGEX, '-' );\n\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\tanchor: nextValue !== '' ? nextValue : undefined,\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t\tautoCapitalize=\"none\"\n\t\t\t\tautoComplete=\"off\"\n\t\t\t/>\n\t\t</InspectorControls>\n\t);\n}\n\nexport default {\n\taddSaveProps,\n\tedit: BlockEditAnchorControlPure,\n\tattributeKeys: [ 'anchor' ],\n\thasSupport( name ) {\n\t\treturn hasBlockSupport( name, 'anchor' );\n\t},\n};\n\n/**\n * Override props assigned to save component to inject anchor ID, if block\n * supports anchor. This is only applied if the block's save result is an\n * element and not a markup string.\n *\n * @param {Object} extraProps Additional props applied to save element.\n * @param {Object} blockType  Block type.\n * @param {Object} attributes Current block attributes.\n *\n * @return {Object} Filtered props applied to save element.\n */\nexport function addSaveProps( extraProps, blockType, attributes ) {\n\tif ( hasBlockSupport( blockType, 'anchor' ) ) {\n\t\textraProps.id = attributes.anchor === '' ? null : attributes.anchor;\n\t}\n\n\treturn extraProps;\n}\n\naddFilter( 'blocks.registerBlockType', 'core/anchor/attribute', addAttribute );\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAA0B;AAC1B,wBAA0C;AAC1C,kBAAmB;AACnB,oBAAgC;AAKhC,IAAAA,qBAAkC;AAClC,gCAAoC;AAiD/B;AA1CL,IAAM,eAAe;AAUd,SAAS,aAAc,UAAW;AAExC,MAAK,WAAY,SAAS,YAAY,UAAU,CAAC,IAAM;AACtD,WAAO;AAAA,EACR;AACA,UAAK,+BAAiB,UAAU,QAAS,GAAI;AAE5C,aAAS,aAAa;AAAA,MACrB,GAAG,SAAS;AAAA,MACZ,QAAQ;AAAA,QACP,MAAM;AAAA,MACP;AAAA,IACD;AAAA,EACD;AAEA,SAAO;AACR;AAEA,SAAS,2BAA4B,EAAE,QAAQ,cAAc,GAAI;AAChE,QAAM,uBAAmB,+CAAoB;AAE7C,MAAK,qBAAqB,WAAY;AACrC,WAAO;AAAA,EACR;AAEA,SACC,4CAAC,wCAAkB,OAAM,YACxB;AAAA,IAAC;AAAA;AAAA,MACA,uBAAqB;AAAA,MACrB,WAAU;AAAA,MACV,WAAQ,gBAAI,aAAc;AAAA,MAC1B,MACC,4EACG;AAAA;AAAA,UACD;AAAA,QACD;AAAA,QAAK;AAAA,QACL;AAAA,UAAC;AAAA;AAAA,YACA,UAAO;AAAA,cACN;AAAA,YACD;AAAA,YAEE,8BAAI,0BAA2B;AAAA;AAAA,QAClC;AAAA,SACD;AAAA,MAED,OAAQ,UAAU;AAAA,MAClB,aAAc;AAAA,MACd,UAAW,CAAE,cAAe;AAC3B,oBAAY,UAAU,QAAS,cAAc,GAAI;AACjD,sBAAe;AAAA,UACd,QAAQ,cAAc,KAAK,YAAY;AAAA,QACxC,CAAE;AAAA,MACH;AAAA,MACA,gBAAe;AAAA,MACf,cAAa;AAAA;AAAA,EACd,GACD;AAEF;AAEA,IAAO,iBAAQ;AAAA,EACd;AAAA,EACA,MAAM;AAAA,EACN,eAAe,CAAE,QAAS;AAAA,EAC1B,WAAY,MAAO;AAClB,eAAO,+BAAiB,MAAM,QAAS;AAAA,EACxC;AACD;AAaO,SAAS,aAAc,YAAY,WAAW,YAAa;AACjE,UAAK,+BAAiB,WAAW,QAAS,GAAI;AAC7C,eAAW,KAAK,WAAW,WAAW,KAAK,OAAO,WAAW;AAAA,EAC9D;AAEA,SAAO;AACR;AAAA,IAEA,wBAAW,4BAA4B,yBAAyB,YAAa;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { TextControl, ExternalLink } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { hasBlockSupport } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { InspectorControls } from '../components';\nimport { useBlockEditingMode } from '../components/block-editing-mode';\n\n/**\n * Regular expression matching invalid anchor characters for replacement.\n *\n * @type {RegExp}\n */\nconst ANCHOR_REGEX = /[\\s#]/g;\n\n/**\n * Filters registered block settings, extending attributes with anchor using ID\n * of the first node.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nexport function addAttribute( settings ) {\n\t// Allow blocks to specify their own attribute definition with default values if needed.\n\tif ( 'type' in ( settings.attributes?.anchor ?? {} ) ) {\n\t\treturn settings;\n\t}\n\tif ( hasBlockSupport( settings, 'anchor' ) ) {\n\t\t// Gracefully handle if settings.attributes is undefined.\n\t\tsettings.attributes = {\n\t\t\t...settings.attributes,\n\t\t\tanchor: {\n\t\t\t\ttype: 'string',\n\t\t\t},\n\t\t};\n\t}\n\n\treturn settings;\n}\n\nfunction BlockEditAnchorControlPure( { anchor, setAttributes } ) {\n\tconst blockEditingMode = useBlockEditingMode();\n\n\tif ( blockEditingMode !== 'default' ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<InspectorControls group=\"advanced\">\n\t\t\t<TextControl\n\t\t\t\tclassName=\"html-anchor-control\"\n\t\t\t\tlabel={ __( 'HTML anchor' ) }\n\t\t\t\thelp={\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'Enter a word or two—without spaces—to make a unique web address just for this block, called an “anchor”. Then, you’ll be able to link directly to this section of your page.'\n\t\t\t\t\t\t) }{ ' ' }\n\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t'https://wordpress.org/documentation/article/page-jumps/'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Learn more about anchors' ) }\n\t\t\t\t\t\t</ExternalLink>\n\t\t\t\t\t</>\n\t\t\t\t}\n\t\t\t\tvalue={ anchor || '' }\n\t\t\t\tplaceholder={ null }\n\t\t\t\tonChange={ ( nextValue ) => {\n\t\t\t\t\tnextValue = nextValue.replace( ANCHOR_REGEX, '-' );\n\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\tanchor: nextValue !== '' ? nextValue : undefined,\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t\tautoCapitalize=\"none\"\n\t\t\t\tautoComplete=\"off\"\n\t\t\t/>\n\t\t</InspectorControls>\n\t);\n}\n\nexport default {\n\taddSaveProps,\n\tedit: BlockEditAnchorControlPure,\n\tattributeKeys: [ 'anchor' ],\n\thasSupport( name ) {\n\t\treturn hasBlockSupport( name, 'anchor' );\n\t},\n};\n\n/**\n * Override props assigned to save component to inject anchor ID, if block\n * supports anchor. This is only applied if the block's save result is an\n * element and not a markup string.\n *\n * @param {Object} extraProps Additional props applied to save element.\n * @param {Object} blockType  Block type.\n * @param {Object} attributes Current block attributes.\n *\n * @return {Object} Filtered props applied to save element.\n */\nexport function addSaveProps( extraProps, blockType, attributes ) {\n\tif ( hasBlockSupport( blockType, 'anchor' ) ) {\n\t\textraProps.id = attributes.anchor === '' ? null : attributes.anchor;\n\t}\n\n\treturn extraProps;\n}\n\naddFilter( 'blocks.registerBlockType', 'core/anchor/attribute', addAttribute );\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAA0B;AAC1B,wBAA0C;AAC1C,kBAAmB;AACnB,oBAAgC;AAKhC,IAAAA,qBAAkC;AAClC,gCAAoC;AAgD/B;AAzCL,IAAM,eAAe;AAUd,SAAS,aAAc,UAAW;AAExC,MAAK,WAAY,SAAS,YAAY,UAAU,CAAC,IAAM;AACtD,WAAO;AAAA,EACR;AACA,UAAK,+BAAiB,UAAU,QAAS,GAAI;AAE5C,aAAS,aAAa;AAAA,MACrB,GAAG,SAAS;AAAA,MACZ,QAAQ;AAAA,QACP,MAAM;AAAA,MACP;AAAA,IACD;AAAA,EACD;AAEA,SAAO;AACR;AAEA,SAAS,2BAA4B,EAAE,QAAQ,cAAc,GAAI;AAChE,QAAM,uBAAmB,+CAAoB;AAE7C,MAAK,qBAAqB,WAAY;AACrC,WAAO;AAAA,EACR;AAEA,SACC,4CAAC,wCAAkB,OAAM,YACxB;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,WAAQ,gBAAI,aAAc;AAAA,MAC1B,MACC,4EACG;AAAA;AAAA,UACD;AAAA,QACD;AAAA,QAAK;AAAA,QACL;AAAA,UAAC;AAAA;AAAA,YACA,UAAO;AAAA,cACN;AAAA,YACD;AAAA,YAEE,8BAAI,0BAA2B;AAAA;AAAA,QAClC;AAAA,SACD;AAAA,MAED,OAAQ,UAAU;AAAA,MAClB,aAAc;AAAA,MACd,UAAW,CAAE,cAAe;AAC3B,oBAAY,UAAU,QAAS,cAAc,GAAI;AACjD,sBAAe;AAAA,UACd,QAAQ,cAAc,KAAK,YAAY;AAAA,QACxC,CAAE;AAAA,MACH;AAAA,MACA,gBAAe;AAAA,MACf,cAAa;AAAA;AAAA,EACd,GACD;AAEF;AAEA,IAAO,iBAAQ;AAAA,EACd;AAAA,EACA,MAAM;AAAA,EACN,eAAe,CAAE,QAAS;AAAA,EAC1B,WAAY,MAAO;AAClB,eAAO,+BAAiB,MAAM,QAAS;AAAA,EACxC;AACD;AAaO,SAAS,aAAc,YAAY,WAAW,YAAa;AACjE,UAAK,+BAAiB,WAAW,QAAS,GAAI;AAC7C,eAAW,KAAK,WAAW,WAAW,KAAK,OAAO,WAAW;AAAA,EAC9D;AAEA,SAAO;AACR;AAAA,IAEA,wBAAW,4BAA4B,yBAAyB,YAAa;",
   "names": ["import_components"]
 }

package/build/hooks/background.cjs

@@ -33,6 +33,7 @@ __export(background_exports, {
   BACKGROUND_BLOCK_DEFAULT_VALUES: () => BACKGROUND_BLOCK_DEFAULT_VALUES,
   BACKGROUND_SUPPORT_KEY: () => BACKGROUND_SUPPORT_KEY,
   BackgroundImagePanel: () => BackgroundImagePanel,
+  backgroundResetAllFilter: () => backgroundResetAllFilter,
   default: () => background_default,
   getBackgroundImageClasses: () => getBackgroundImageClasses,
   hasBackgroundSupport: () => hasBackgroundSupport,
@@ -42,10 +43,12 @@ module.exports = __toCommonJS(background_exports);
 var import_clsx = __toESM(require("clsx"));
 var import_blocks = require("@wordpress/blocks");
 var import_data = require("@wordpress/data");
-var import_element = require("@wordpress/element");
+var import_i18n = require("@wordpress/i18n");
 var import_inspector_controls = __toESM(require("../components/inspector-controls/index.cjs"));
 var import_utils = require("./utils.cjs");
+var import_color_values = require("../utils/color-values.cjs");
 var import_store = require("../store/index.cjs");
+var import_contrast_checker = __toESM(require("./contrast-checker.cjs"));
 var import_background_panel = __toESM(require("../components/global-styles/background-panel.cjs"));
 var import_private_keys = require("../store/private-keys.cjs");
 var import_block_style_state = require("./block-style-state.cjs");
@@ -100,40 +103,46 @@ function useBlockProps({ name, style }) {
 function getBackgroundImageClasses(style) {
   return (0, import_background_panel.hasBackgroundImageValue)(style) || (0, import_background_panel.hasBackgroundGradientValue)(style) ? "has-background" : "";
 }
-function BackgroundInspectorControl({
-  children,
-  backgroundGradientSupported = false
-}) {
-  const resetAllFilter = (0, import_element.useCallback)(
-    (attributes) => {
-      const updatedClassName = attributes.className?.includes(
-        "has-background"
-      ) ? attributes.className.split(" ").filter((c) => c !== "has-background").join(" ") || void 0 : attributes.className;
-      return {
-        ...attributes,
-        className: updatedClassName,
-        style: (0, import_utils.cleanEmptyObject)({
-          ...attributes.style,
-          background: void 0,
-          color: backgroundGradientSupported ? {
-            ...attributes.style?.color,
-            gradient: void 0
-          } : attributes.style?.color
-        })
-      };
-    },
-    [backgroundGradientSupported]
+function backgroundResetAllFilter(attributes) {
+  const updatedClassName = attributes.className?.includes("has-background") ? attributes.className.split(" ").filter((c) => c !== "has-background").join(" ") || void 0 : attributes.className;
+  return {
+    ...attributes,
+    className: updatedClassName,
+    backgroundColor: void 0,
+    gradient: void 0,
+    style: (0, import_utils.cleanEmptyObject)({
+      ...attributes.style,
+      background: void 0,
+      color: {
+        ...attributes.style?.color,
+        background: void 0,
+        gradient: void 0
+      }
+    })
+  };
+}
+function BackgroundInspectorControl({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_inspector_controls.default,
+    {
+      group: "background",
+      resetAllFilter: backgroundResetAllFilter,
+      children
+    }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_inspector_controls.default, { group: "background", resetAllFilter, children });
 }
 function BackgroundImagePanel({
   clientId,
   name,
   setAttributes,
-  settings
+  settings,
+  // Allows rendering outside the `background` inspector group (e.g. section
+  // blocks direct-render this panel because their support fills are gated
+  // off by editing mode). Defaults to the slot-based wrapper.
+  asWrapper
 }) {
   const selectedState = (0, import_block_style_state.useBlockStyleState)();
-  const { style, className, inheritedValue } = (0, import_data.useSelect)(
+  const { style, className, backgroundColor, gradient, inheritedValue } = (0, import_data.useSelect)(
     (select) => {
       const { getBlockAttributes, getSettings } = select(import_store.store);
       const _settings = getSettings();
@@ -141,13 +150,8 @@ function BackgroundImagePanel({
       return {
         style: blockAttributes?.style,
         className: blockAttributes?.className,
-        /*
-         * To ensure we pass down the right inherited values:
-         * @TODO 1. Pass inherited value down to all block style controls,
-         *   See: packages/block-editor/src/hooks/style.js
-         * @TODO 2. Add support for block style variations,
-         *   See implementation: packages/block-editor/src/hooks/block-style-variation.js
-         */
+        backgroundColor: blockAttributes?.backgroundColor,
+        gradient: blockAttributes?.gradient,
         inheritedValue: _settings[import_private_keys.globalStylesDataKey]?.blocks?.[name]
       };
     },
@@ -157,54 +161,85 @@ function BackgroundImagePanel({
     name,
     "gradient"
   );
-  const as = (0, import_element.useCallback)(
-    ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      BackgroundInspectorControl,
-      {
-        backgroundGradientSupported,
-        children
+  const colorSupport = (0, import_blocks.getBlockSupport)(name, "color");
+  const hasColorBackgroundSupport = colorSupport && colorSupport.background !== false;
+  const hasColorGradientSupport = !!colorSupport?.gradients;
+  const isStateSelected = !(0, import_block_style_state.isDefaultBlockStyleState)(selectedState);
+  const styleValue = {
+    ...style,
+    color: {
+      ...style?.color,
+      background: backgroundColor ? "var:preset|color|" + backgroundColor : style?.color?.background,
+      gradient: !backgroundGradientSupported && gradient ? "var:preset|gradient|" + gradient : style?.color?.gradient
+    },
+    ...backgroundGradientSupported && {
+      background: {
+        ...style?.background,
+        gradient: gradient ? "var:preset|gradient|" + gradient : style?.background?.gradient ?? style?.color?.gradient
       }
-    ),
-    [backgroundGradientSupported]
-  );
-  if (!(0, import_background_panel.useHasBackgroundPanel)(settings) || !hasBackgroundSupport(name)) {
+    }
+  };
+  const enableContrastChecking = !isStateSelected && !styleValue?.color?.gradient && !styleValue?.background?.gradient && !!styleValue?.color?.background && (settings?.color?.text || settings?.color?.link) && false !== (0, import_blocks.getBlockSupport)(name, ["color", "enableContrastChecker"]);
+  const contrastWarning = (0, import_contrast_checker.default)({
+    clientId,
+    name,
+    enabled: !!enableContrastChecking,
+    messageOverride: (0, import_i18n.__)(
+      "This color combination has poor contrast. Consider increasing contrast between background and foreground."
+    )
+  });
+  if (!(0, import_background_panel.useHasBackgroundPanel)(settings) || !hasBackgroundSupport(name) && !hasColorBackgroundSupport && !hasColorGradientSupport) {
     return null;
   }
-  const isStateSelected = !(0, import_block_style_state.isDefaultBlockStyleState)(selectedState);
-  const onChange = isStateSelected ? (newStyle) => {
-    setAttributes({
-      style: (0, import_block_style_state.setStyleForState)(style, selectedState, newStyle)
-    });
-  } : (newStyle) => {
+  const onChange = (newStyle) => {
+    if (isStateSelected) {
+      setAttributes({
+        style: (0, import_block_style_state.setStyleForState)(style, selectedState, newStyle)
+      });
+      return;
+    }
+    const newBackgroundColorValue = newStyle?.color?.background;
+    const newBackgroundColorSlug = (0, import_color_values.extractPresetSlug)(
+      newBackgroundColorValue,
+      "color"
+    );
+    const newGradientValue = backgroundGradientSupported ? newStyle?.background?.gradient : newStyle?.color?.gradient;
+    const newGradientSlug = (0, import_color_values.extractPresetSlug)(
+      newGradientValue,
+      "gradient"
+    );
+    const cleanedColorGradient = newGradientSlug ? void 0 : newStyle?.color?.gradient;
+    const cleanedStyle = {
+      ...newStyle,
+      color: {
+        ...newStyle?.color,
+        background: newBackgroundColorSlug ? void 0 : newBackgroundColorValue,
+        gradient: backgroundGradientSupported ? void 0 : cleanedColorGradient
+      }
+    };
+    if (backgroundGradientSupported) {
+      cleanedStyle.background = {
+        ...cleanedStyle.background,
+        gradient: newStyle?.background?.gradient
+      };
+    }
     const isMigrating = backgroundGradientSupported && !!style?.color?.gradient;
     const newAttributes = {
-      style: (0, import_utils.cleanEmptyObject)(
-        backgroundGradientSupported ? {
-          ...newStyle,
-          color: {
-            ...newStyle?.color,
-            gradient: void 0
-          }
-        } : newStyle
-      )
+      style: (0, import_utils.cleanEmptyObject)(cleanedStyle),
+      backgroundColor: newBackgroundColorSlug,
+      // The legacy `gradient` attribute is only used when the block does
+      // not support `background.gradient`; otherwise the gradient is
+      // stored in `style.background.gradient` above.
+      gradient: backgroundGradientSupported ? void 0 : newGradientSlug
     };
-    if (isMigrating && !!newStyle?.background?.gradient) {
-      newAttributes.className = (0, import_clsx.default)(
-        className,
-        "has-background"
-      );
-    } else if (!newStyle?.background?.gradient && className?.includes("has-background")) {
+    const hasNewGradient = !!newGradientSlug || !!newGradientValue;
+    if (isMigrating && hasNewGradient) {
+      newAttributes.className = (0, import_clsx.default)(className, "has-background");
+    } else if (!hasNewGradient && className?.includes("has-background")) {
       newAttributes.className = className.split(" ").filter((c) => c !== "has-background").join(" ") || void 0;
     }
     setAttributes(newAttributes);
   };
-  const styleValue = backgroundGradientSupported && !style?.background?.gradient && style?.color?.gradient ? {
-    ...style,
-    background: {
-      ...style?.background,
-      gradient: style?.color?.gradient
-    }
-  } : style;
   const updatedSettings = {
     ...settings,
     background: {
@@ -212,21 +247,34 @@ function BackgroundImagePanel({
       backgroundSize: settings?.background?.backgroundSize && hasBackgroundSupport(name, "backgroundSize")
     }
   };
-  const defaultControls = (0, import_blocks.getBlockSupport)(name, [
+  const backgroundDefaultControls = (0, import_blocks.getBlockSupport)(name, [
     BACKGROUND_SUPPORT_KEY,
     "__experimentalDefaultControls"
   ]);
+  const colorDefaultControls = (0, import_blocks.getBlockSupport)(name, [
+    "color",
+    "__experimentalDefaultControls"
+  ]);
+  const defaultControls = {
+    ...backgroundDefaultControls,
+    backgroundColor: colorDefaultControls?.background,
+    // Mirror the old combined control: show the gradient item by default
+    // when background color was shown by default.
+    gradient: backgroundDefaultControls?.gradient ?? colorDefaultControls?.background
+  };
+  const Wrapper = asWrapper || BackgroundInspectorControl;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_background_panel.default,
     {
       inheritedValue,
-      as,
+      as: Wrapper,
       panelId: clientId,
       defaultValues: BACKGROUND_BLOCK_DEFAULT_VALUES,
       settings: updatedSettings,
       onChange,
       defaultControls,
-      value: isStateSelected ? (0, import_block_style_state.getStyleForState)(style, selectedState) : styleValue
+      value: isStateSelected ? (0, import_block_style_state.getStyleForState)(style, selectedState) : styleValue,
+      contrastWarning
     }
   );
 }
@@ -240,6 +288,7 @@ var background_default = {
   BACKGROUND_BLOCK_DEFAULT_VALUES,
   BACKGROUND_SUPPORT_KEY,
   BackgroundImagePanel,
+  backgroundResetAllFilter,
   getBackgroundImageClasses,
   hasBackgroundSupport,
   setBackgroundStyleDefaults