npm - @wordpress/block-editor - Versions diffs - 15.8.1-next.dc3f6d3c1.0 → 15.9.1-next.6deb34194.0 - Mend

@wordpress/block-editor 15.8.1-next.dc3f6d3c1.0 → 15.9.1-next.6deb34194.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (325) hide show

package/build/components/content-only-controls/link/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/content-only-controls/link/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tIcon,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalGrid as Grid,\n\tPopover,\n} from '@wordpress/components';\nimport { useMemo, useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { link } from '@wordpress/icons';\nimport { prependHTTP } from '@wordpress/url';\n\n/**\n * Internal dependencies\n */\nimport LinkControl from '../../link-control';\nimport { useInspectorPopoverPlacement } from '../use-inspector-popover-placement';\n\nexport const NEW_TAB_REL = 'noreferrer noopener';\nexport const NEW_TAB_TARGET = '_blank';\nexport const NOFOLLOW_REL = 'nofollow';\n\n/**\n * Updates the link attributes.\n *\n * @param {Object}  attributes               The current block attributes.\n * @param {string}  attributes.rel           The current link rel attribute.\n * @param {string}  attributes.url           The current link url.\n * @param {boolean} attributes.opensInNewTab Whether the link should open in a new window.\n * @param {boolean} attributes.nofollow      Whether the link should be marked as nofollow.\n */\nexport function getUpdatedLinkAttributes( {\n\trel = '',\n\turl = '',\n\topensInNewTab,\n\tnofollow,\n} ) {\n\tlet newLinkTarget;\n\t// Since `rel` is editable attribute, we need to check for existing values and proceed accordingly.\n\tlet updatedRel = rel;\n\n\tif ( opensInNewTab ) {\n\t\tnewLinkTarget = NEW_TAB_TARGET;\n\t\tupdatedRel = updatedRel?.includes( NEW_TAB_REL )\n\t\t\t? updatedRel\n\t\t\t: updatedRel + ` ${ NEW_TAB_REL }`;\n\t} else {\n\t\tconst relRegex = new RegExp( `\\\\b${ NEW_TAB_REL }\\\\s*`, 'g' );\n\t\tupdatedRel = updatedRel?.replace( relRegex, '' ).trim();\n\t}\n\n\tif ( nofollow ) {\n\t\tupdatedRel = updatedRel?.includes( NOFOLLOW_REL )\n\t\t\t? updatedRel\n\t\t\t: ( updatedRel + ` ${ NOFOLLOW_REL }` ).trim();\n\t} else {\n\t\tconst relRegex = new RegExp( `\\\\b${ NOFOLLOW_REL }\\\\s*`, 'g' );\n\t\tupdatedRel = updatedRel?.replace( relRegex, '' ).trim();\n\t}\n\n\treturn {\n\t\turl: prependHTTP( url ),\n\t\tlinkTarget: newLinkTarget,\n\t\trel: updatedRel || undefined,\n\t};\n}\n\nexport default function Link( {\n\tclientId,\n\tcontrol,\n\tblockType,\n\tattributeValues,\n\tupdateAttributes,\n} ) {\n\tconst [ isLinkControlOpen, setIsLinkControlOpen ] = useState( false );\n\tconst { popoverProps } = useInspectorPopoverPlacement( {\n\t\tisControl: true,\n\t} );\n\tconst hrefKey = control.mapping.href;\n\tconst relKey = control.mapping.rel;\n\tconst targetKey = control.mapping.target;\n\tconst destinationKey = control.mapping.destination;\n\n\tconst href = attributeValues[ hrefKey ];\n\tconst rel = attributeValues[ relKey ];\n\tconst target = attributeValues[ targetKey ];\n\tconst destination = attributeValues[ destinationKey ];\n\n\tconst hrefDefaultValue =\n\t\tblockType.attributes[ href ]?.defaultValue ?? undefined;\n\tconst relDefaultValue =\n\t\tblockType.attributes[ rel ]?.defaultValue ?? undefined;\n\tconst targetDefaultValue =\n\t\tblockType.attributes[ target ]?.defaultValue ?? undefined;\n\tconst destinationDefaultValue =\n\t\tblockType.attributes[ destination ]?.defaultValue ?? undefined;\n\n\tconst opensInNewTab = target === NEW_TAB_TARGET;\n\tconst nofollow = rel === NOFOLLOW_REL;\n\n\t// Memoize link value to avoid overriding the LinkControl's internal state.\n\t// This is a temporary fix. See https://github.com/WordPress/gutenberg/issues/51256.\n\tconst linkValue = useMemo(\n\t\t() => ( { url: href, opensInNewTab, nofollow } ),\n\t\t[ href, opensInNewTab, nofollow ]\n\t);\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\tpanelId={ clientId }\n\t\t\tlabel={ control.label }\n\t\t\thasValue={ () => !! href }\n\t\t\tonDeselect={ () => {\n\t\t\t\tupdateAttributes( {\n\t\t\t\t\t[ hrefKey ]: hrefDefaultValue,\n\t\t\t\t\t[ relKey ]: relDefaultValue,\n\t\t\t\t\t[ targetKey ]: targetDefaultValue,\n\t\t\t\t\t[ destinationKey ]: destinationDefaultValue,\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tisShownByDefault={ control.shownByDefault }\n\t\t>\n\t\t\t<Button\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tclassName=\"block-editor-content-only-controls__link\"\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tsetIsLinkControlOpen( true );\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<Grid\n\t\t\t\t\trowGap={ 0 }\n\t\t\t\t\tcolumnGap={ 8 }\n\t\t\t\t\ttemplateColumns=\"24px 1fr\"\n\t\t\t\t\tclassName=\"block-editor-content-only-controls__link-row\"\n\t\t\t\t>\n\t\t\t\t\t{ href && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Icon icon={ link } size={ 24 } />\n\t\t\t\t\t\t\t<span className=\"block-editor-content-only-controls__link-title\">\n\t\t\t\t\t\t\t\t{ href }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! href && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ link }\n\t\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\t\tstyle={ { opacity: 0.3 } }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<span className=\"block-editor-content-only-controls__link-title\">\n\t\t\t\t\t\t\t\t{ __( 'Link' ) }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t</Grid>\n\t\t\t</Button>\n\t\t\t{ isLinkControlOpen && (\n\t\t\t\t<Popover\n\t\t\t\t\tonClose={ () => {\n\t\t\t\t\t\tsetIsLinkControlOpen( false );\n\t\t\t\t\t} }\n\t\t\t\t\t{ ...( popoverProps ?? {} ) }\n\t\t\t\t>\n\t\t\t\t\t<LinkControl\n\t\t\t\t\t\tvalue={ linkValue }\n\t\t\t\t\t\tonChange={ ( newValues ) => {\n\t\t\t\t\t\t\tconst updatedAttrs = getUpdatedLinkAttributes( {\n\t\t\t\t\t\t\t\trel,\n\t\t\t\t\t\t\t\t...newValues,\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[ hrefKey ]: updatedAttrs.url,\n\t\t\t\t\t\t\t\t[ relKey ]: updatedAttrs.rel,\n\t\t\t\t\t\t\t\t[ targetKey ]: updatedAttrs.linkTarget,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonRemove={ () => {\n\t\t\t\t\t\t\tupdateAttributes( {\n\t\t\t\t\t\t\t\t[ hrefKey ]: hrefDefaultValue,\n\t\t\t\t\t\t\t\t[ relKey ]: relDefaultValue,\n\t\t\t\t\t\t\t\t[ targetKey ]: targetDefaultValue,\n\t\t\t\t\t\t\t\t[ destinationKey ]: destinationDefaultValue,\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</Popover>\n\t\t\t) }\n\t\t</ToolsPanelItem>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAMO;AACP,qBAAkC;AAClC,kBAAmB;AACnB,mBAAqB;AACrB,iBAA4B;AAK5B,0BAAwB;AACxB,6CAA6C;AAwHvC;AAtHC,IAAM,cAAc;AACpB,IAAM,iBAAiB;AACvB,IAAM,eAAe;AAWrB,SAAS,yBAA0B;AAAA,EACzC,MAAM;AAAA,EACN,MAAM;AAAA,EACN;AAAA,EACA;AACD,GAAI;AACH,MAAI;AAEJ,MAAI,aAAa;AAEjB,MAAK,eAAgB;AACpB,oBAAgB;AAChB,iBAAa,YAAY,SAAU,WAAY,IAC5C,aACA,aAAa,IAAK,WAAY;AAAA,EAClC,OAAO;AACN,UAAM,WAAW,IAAI,OAAQ,MAAO,WAAY,QAAQ,GAAI;AAC5D,iBAAa,YAAY,QAAS,UAAU,EAAG,EAAE,KAAK;AAAA,EACvD;AAEA,MAAK,UAAW;AACf,iBAAa,YAAY,SAAU,YAAa,IAC7C,cACE,aAAa,IAAK,YAAa,IAAK,KAAK;AAAA,EAC/C,OAAO;AACN,UAAM,WAAW,IAAI,OAAQ,MAAO,YAAa,QAAQ,GAAI;AAC7D,iBAAa,YAAY,QAAS,UAAU,EAAG,EAAE,KAAK;AAAA,EACvD;AAEA,SAAO;AAAA,IACN,SAAK,wBAAa,GAAI;AAAA,IACtB,YAAY;AAAA,IACZ,KAAK,cAAc;AAAA,EACpB;AACD;AAEe,SAAR,KAAuB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,CAAE,mBAAmB,oBAAqB,QAAI,yBAAU,KAAM;AACpE,QAAM,EAAE,aAAa,QAAI,qEAA8B;AAAA,IACtD,WAAW;AAAA,EACZ,CAAE;AACF,QAAM,UAAU,QAAQ,QAAQ;AAChC,QAAM,SAAS,QAAQ,QAAQ;AAC/B,QAAM,YAAY,QAAQ,QAAQ;AAClC,QAAM,iBAAiB,QAAQ,QAAQ;AAEvC,QAAM,OAAO,gBAAiB,OAAQ;AACtC,QAAM,MAAM,gBAAiB,MAAO;AACpC,QAAM,SAAS,gBAAiB,SAAU;AAC1C,QAAM,cAAc,gBAAiB,cAAe;AAEpD,QAAM,mBACL,UAAU,WAAY,IAAK,GAAG,gBAAgB;AAC/C,QAAM,kBACL,UAAU,WAAY,GAAI,GAAG,gBAAgB;AAC9C,QAAM,qBACL,UAAU,WAAY,MAAO,GAAG,gBAAgB;AACjD,QAAM,0BACL,UAAU,WAAY,WAAY,GAAG,gBAAgB;AAEtD,QAAM,gBAAgB,WAAW;AACjC,QAAM,WAAW,QAAQ;AAIzB,QAAM,gBAAY;AAAA,IACjB,OAAQ,EAAE,KAAK,MAAM,eAAe,SAAS;AAAA,IAC7C,CAAE,MAAM,eAAe,QAAS;AAAA,EACjC;AAEA,SACC;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA,SAAU;AAAA,MACV,OAAQ,QAAQ;AAAA,MAChB,UAAW,MAAM,CAAC,CAAE;AAAA,MACpB,YAAa,MAAM;AAClB,yBAAkB;AAAA,UACjB,CAAE,OAAQ,GAAG;AAAA,UACb,CAAE,MAAO,GAAG;AAAA,UACZ,CAAE,SAAU,GAAG;AAAA,UACf,CAAE,cAAe,GAAG;AAAA,QACrB,CAAE;AAAA,MACH;AAAA,MACA,kBAAmB,QAAQ;AAAA,MAE3B;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,uBAAqB;AAAA,YACrB,WAAU;AAAA,YACV,SAAU,MAAM;AACf,mCAAsB,IAAK;AAAA,YAC5B;AAAA,YAEA;AAAA,cAAC,kBAAAC;AAAA,cAAA;AAAA,gBACA,QAAS;AAAA,gBACT,WAAY;AAAA,gBACZ,iBAAgB;AAAA,gBAChB,WAAU;AAAA,gBAER;AAAA,0BACD,4EACC;AAAA,gEAAC,0BAAK,MAAO,mBAAO,MAAO,IAAK;AAAA,oBAChC,4CAAC,UAAK,WAAU,kDACb,gBACH;AAAA,qBACD;AAAA,kBAEC,CAAE,QACH,4EACC;AAAA;AAAA,sBAAC;AAAA;AAAA,wBACA,MAAO;AAAA,wBACP,MAAO;AAAA,wBACP,OAAQ,EAAE,SAAS,IAAI;AAAA;AAAA,oBACxB;AAAA,oBACA,4CAAC,UAAK,WAAU,kDACb,8BAAI,MAAO,GACd;AAAA,qBACD;AAAA;AAAA;AAAA,YAEF;AAAA;AAAA,QACD;AAAA,QACE,qBACD;AAAA,UAAC;AAAA;AAAA,YACA,SAAU,MAAM;AACf,mCAAsB,KAAM;AAAA,YAC7B;AAAA,YACE,GAAK,gBAAgB,CAAC;AAAA,YAExB;AAAA,cAAC,oBAAAC;AAAA,cAAA;AAAA,gBACA,OAAQ;AAAA,gBACR,UAAW,CAAE,cAAe;AAC3B,wBAAM,eAAe,yBAA0B;AAAA,oBAC9C;AAAA,oBACA,GAAG;AAAA,kBACJ,CAAE;AAEF,mCAAkB;AAAA,oBACjB,CAAE,OAAQ,GAAG,aAAa;AAAA,oBAC1B,CAAE,MAAO,GAAG,aAAa;AAAA,oBACzB,CAAE,SAAU,GAAG,aAAa;AAAA,kBAC7B,CAAE;AAAA,gBACH;AAAA,gBACA,UAAW,MAAM;AAChB,mCAAkB;AAAA,oBACjB,CAAE,OAAQ,GAAG;AAAA,oBACb,CAAE,MAAO,GAAG;AAAA,oBACZ,CAAE,SAAU,GAAG;AAAA,oBACf,CAAE,cAAe,GAAG;AAAA,kBACrB,CAAE;AAAA,gBACH;AAAA;AAAA,YACD;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EAEF;AAEF;",
-  "names": ["ToolsPanelItem", "Grid", "LinkControl"]
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tIcon,\n\t__experimentalGrid as Grid,\n\tPopover,\n} from '@wordpress/components';\nimport { useMemo, useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { link } from '@wordpress/icons';\nimport { prependHTTP } from '@wordpress/url';\n\n/**\n * Internal dependencies\n */\nimport LinkControl from '../../link-control';\nimport { useInspectorPopoverPlacement } from '../use-inspector-popover-placement';\n\nexport const NEW_TAB_REL = 'noreferrer noopener';\nexport const NEW_TAB_TARGET = '_blank';\nexport const NOFOLLOW_REL = 'nofollow';\n\n/**\n * Updates the link attributes.\n *\n * @param {Object}  attributes               The current block attributes.\n * @param {string}  attributes.rel           The current link rel attribute.\n * @param {string}  attributes.url           The current link url.\n * @param {boolean} attributes.opensInNewTab Whether the link should open in a new window.\n * @param {boolean} attributes.nofollow      Whether the link should be marked as nofollow.\n */\nexport function getUpdatedLinkAttributes( {\n\trel = '',\n\turl = '',\n\topensInNewTab,\n\tnofollow,\n} ) {\n\tlet newLinkTarget;\n\t// Since `rel` is editable attribute, we need to check for existing values and proceed accordingly.\n\tlet updatedRel = rel;\n\n\tif ( opensInNewTab ) {\n\t\tnewLinkTarget = NEW_TAB_TARGET;\n\t\tupdatedRel = updatedRel?.includes( NEW_TAB_REL )\n\t\t\t? updatedRel\n\t\t\t: updatedRel + ` ${ NEW_TAB_REL }`;\n\t} else {\n\t\tconst relRegex = new RegExp( `\\\\b${ NEW_TAB_REL }\\\\s*`, 'g' );\n\t\tupdatedRel = updatedRel?.replace( relRegex, '' ).trim();\n\t}\n\n\tif ( nofollow ) {\n\t\tupdatedRel = updatedRel?.includes( NOFOLLOW_REL )\n\t\t\t? updatedRel\n\t\t\t: ( updatedRel + ` ${ NOFOLLOW_REL }` ).trim();\n\t} else {\n\t\tconst relRegex = new RegExp( `\\\\b${ NOFOLLOW_REL }\\\\s*`, 'g' );\n\t\tupdatedRel = updatedRel?.replace( relRegex, '' ).trim();\n\t}\n\n\treturn {\n\t\turl: prependHTTP( url ),\n\t\tlinkTarget: newLinkTarget,\n\t\trel: updatedRel || undefined,\n\t};\n}\n\nexport default function Link( { data, field, onChange, config = {} } ) {\n\tconst [ isLinkControlOpen, setIsLinkControlOpen ] = useState( false );\n\tconst { popoverProps } = useInspectorPopoverPlacement( {\n\t\tisControl: true,\n\t} );\n\tconst { fieldDef } = config;\n\tconst updateAttributes = ( newValue ) => {\n\t\tconst mappedChanges = field.setValue( { item: data, value: newValue } );\n\t\tonChange( mappedChanges );\n\t};\n\n\tconst value = field.getValue( { item: data } );\n\tconst url = value?.url;\n\tconst rel = value?.rel || '';\n\tconst target = value?.linkTarget;\n\n\tconst opensInNewTab = target === NEW_TAB_TARGET;\n\tconst nofollow = rel === NOFOLLOW_REL;\n\n\t// Memoize link value to avoid overriding the LinkControl's internal state.\n\t// This is a temporary fix. See https://github.com/WordPress/gutenberg/issues/51256.\n\tconst linkValue = useMemo(\n\t\t() => ( { url, opensInNewTab, nofollow } ),\n\t\t[ url, opensInNewTab, nofollow ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tclassName=\"block-editor-content-only-controls__link\"\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tsetIsLinkControlOpen( true );\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<Grid\n\t\t\t\t\trowGap={ 0 }\n\t\t\t\t\tcolumnGap={ 8 }\n\t\t\t\t\ttemplateColumns=\"24px 1fr\"\n\t\t\t\t\tclassName=\"block-editor-content-only-controls__link-row\"\n\t\t\t\t>\n\t\t\t\t\t{ url && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Icon icon={ link } size={ 24 } />\n\t\t\t\t\t\t\t<span className=\"block-editor-content-only-controls__link-title\">\n\t\t\t\t\t\t\t\t{ url }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! url && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ link }\n\t\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\t\tstyle={ { opacity: 0.3 } }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<span className=\"block-editor-content-only-controls__link-title\">\n\t\t\t\t\t\t\t\t{ __( 'Link' ) }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t</Grid>\n\t\t\t</Button>\n\t\t\t{ isLinkControlOpen && (\n\t\t\t\t<Popover\n\t\t\t\t\tonClose={ () => {\n\t\t\t\t\t\tsetIsLinkControlOpen( false );\n\t\t\t\t\t} }\n\t\t\t\t\t{ ...( popoverProps ?? {} ) }\n\t\t\t\t>\n\t\t\t\t\t<LinkControl\n\t\t\t\t\t\tvalue={ linkValue }\n\t\t\t\t\t\tonChange={ ( newValues ) => {\n\t\t\t\t\t\t\tconst updatedAttrs = getUpdatedLinkAttributes( {\n\t\t\t\t\t\t\t\trel,\n\t\t\t\t\t\t\t\t...newValues,\n\t\t\t\t\t\t\t} );\n\n\t\t\t\t\t\t\t// Build update object dynamically based on what's in the mapping\n\t\t\t\t\t\t\tconst updateValue = { ...value };\n\n\t\t\t\t\t\t\tif ( fieldDef?.mapping ) {\n\t\t\t\t\t\t\t\tObject.keys( fieldDef.mapping ).forEach(\n\t\t\t\t\t\t\t\t\t( key ) => {\n\t\t\t\t\t\t\t\t\t\tif ( key === 'href' || key === 'url' ) {\n\t\t\t\t\t\t\t\t\t\t\tupdateValue[ key ] =\n\t\t\t\t\t\t\t\t\t\t\t\tupdatedAttrs.url;\n\t\t\t\t\t\t\t\t\t\t} else if ( key === 'rel' ) {\n\t\t\t\t\t\t\t\t\t\t\tupdateValue[ key ] =\n\t\t\t\t\t\t\t\t\t\t\t\tupdatedAttrs.rel;\n\t\t\t\t\t\t\t\t\t\t} else if (\n\t\t\t\t\t\t\t\t\t\t\tkey === 'target' ||\n\t\t\t\t\t\t\t\t\t\t\tkey === 'linkTarget'\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\tupdateValue[ key ] =\n\t\t\t\t\t\t\t\t\t\t\t\tupdatedAttrs.linkTarget;\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);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tupdateAttributes( updateValue );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonRemove={ () => {\n\t\t\t\t\t\t\t// Remove all link-related properties based on what's in the mapping\n\t\t\t\t\t\t\tconst removeValue = {};\n\n\t\t\t\t\t\t\tif ( fieldDef?.mapping ) {\n\t\t\t\t\t\t\t\tObject.keys( fieldDef.mapping ).forEach(\n\t\t\t\t\t\t\t\t\t( key ) => {\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\tkey === 'href' ||\n\t\t\t\t\t\t\t\t\t\t\tkey === 'url' ||\n\t\t\t\t\t\t\t\t\t\t\tkey === 'rel' ||\n\t\t\t\t\t\t\t\t\t\t\tkey === 'target' ||\n\t\t\t\t\t\t\t\t\t\t\tkey === 'linkTarget'\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\tremoveValue[ key ] = undefined;\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);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tupdateAttributes( removeValue );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</Popover>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": ["Grid", "LinkControl"]
 }

package/build/components/content-only-controls/media/index.js CHANGED Viewed

@@ -35,7 +35,6 @@ __export(media_exports, {
 module.exports = __toCommonJS(media_exports);
 var import_components = require("@wordpress/components");
 var import_data = require("@wordpress/data");
-var import_element = require("@wordpress/element");
 var import_i18n = require("@wordpress/i18n");
 var import_icons = require("@wordpress/icons");
 var import_media_replace_flow = __toESM(require("../../media-replace-flow"));
@@ -44,9 +43,9 @@ var import_use_inspector_popover_placement = require("../use-inspector-popover-p
 var import_private_keys = require("../../../store/private-keys");
 var import_store = require("../../../store");
 var import_jsx_runtime = require("react/jsx-runtime");
-function MediaThumbnail({ control, attributeValues, attachment }) {
-  const { allowedTypes, multiple } = control.args;
-  const mapping = control.mapping;
+function MediaThumbnail({ data, field, attachment }) {
+  const config = field.config || {};
+  const { allowedTypes = [], multiple = false } = config;
   if (multiple) {
     return "todo multiple";
   }
@@ -63,13 +62,9 @@ function MediaThumbnail({ control, attributeValues, attachment }) {
     );
   }
   if (allowedTypes.length === 1) {
-    let src;
-    if (allowedTypes[0] === "image" && mapping.src && attributeValues[mapping.src]) {
-      src = attributeValues[mapping.src];
-    } else if (allowedTypes[0] === "video" && mapping.poster && attributeValues[mapping.poster]) {
-      src = attributeValues[mapping.poster];
-    }
-    if (src) {
+    const value = field.getValue({ item: data });
+    const url = value?.url;
+    if (url) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "img",
         {
@@ -77,7 +72,7 @@ function MediaThumbnail({ control, attributeValues, attachment }) {
           alt: "",
           width: 24,
           height: 24,
-          src
+          src: url
         }
       );
     }
@@ -97,28 +92,23 @@ function MediaThumbnail({ control, attributeValues, attachment }) {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Icon, { icon: import_icons.media, size: 24 });
 }
-function Media({
-  clientId,
-  control,
-  blockType,
-  attributeValues,
-  updateAttributes
-}) {
+function Media({ data, field, onChange, config = {} }) {
   const { popoverProps } = (0, import_use_inspector_popover_placement.useInspectorPopoverPlacement)({
     isControl: true
   });
-  const typeKey = control.mapping.type;
-  const idKey = control.mapping.id;
-  const srcKey = control.mapping.src;
-  const captionKey = control.mapping.caption;
-  const altKey = control.mapping.alt;
-  const posterKey = control.mapping.poster;
-  const featuredImageKey = control.mapping.featuredImage;
-  const id = attributeValues[idKey];
-  const src = attributeValues[srcKey];
-  const caption = attributeValues[captionKey];
-  const alt = attributeValues[altKey];
-  const useFeaturedImage = attributeValues[featuredImageKey];
+  const value = field.getValue({ item: data });
+  const { allowedTypes = [], multiple = false } = field.config || {};
+  const { fieldDef } = config;
+  const updateAttributes = (newFieldValue) => {
+    const mappedChanges = field.setValue({
+      item: data,
+      value: newFieldValue
+    });
+    onChange(mappedChanges);
+  };
+  const hasFeaturedImageSupport = fieldDef?.mapping && "featuredImage" in fieldDef.mapping;
+  const id = value?.id;
+  const url = value?.url;
   const attachment = (0, import_data.useSelect)(
     (select) => {
       if (!id) {
@@ -134,8 +124,8 @@ function Media({
     [id]
   );
   let chooseItemLabel;
-  if (control.args.allowedTypes.length === 1) {
-    const allowedType = control.args.allowedTypes[0];
+  if (allowedTypes.length === 1) {
+    const allowedType = allowedTypes[0];
     if (allowedType === "image") {
       chooseItemLabel = (0, import_i18n.__)("Choose an image\u2026");
     } else if (allowedType === "video") {
@@ -148,112 +138,122 @@ function Media({
   } else {
     chooseItemLabel = (0, import_i18n.__)("Choose a media item\u2026");
   }
-  const defaultValues = (0, import_element.useMemo)(() => {
-    return Object.fromEntries(
-      Object.entries(control.mapping).map(([, attributeKey]) => {
-        return [
-          attributeKey,
-          blockType.attributes[attributeKey]?.defaultValue ?? void 0
-        ];
-      })
-    );
-  }, [blockType.attributes, control.mapping]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_check.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_components.__experimentalToolsPanelItem,
+    import_media_replace_flow.default,
     {
-      panelId: clientId,
-      label: control.label,
-      hasValue: () => !!src,
-      onDeselect: () => {
-        updateAttributes(defaultValues);
+      className: "block-editor-content-only-controls__media-replace-flow",
+      allowedTypes,
+      mediaId: id,
+      mediaURL: url,
+      multiple,
+      popoverProps,
+      onReset: () => {
+        const resetValue = {};
+        if (fieldDef?.mapping) {
+          Object.keys(fieldDef.mapping).forEach((key) => {
+            if (key === "id" || key === "src" || key === "url") {
+              resetValue[key] = void 0;
+            } else if (key === "caption" || key === "alt") {
+              resetValue[key] = "";
+            }
+          });
+        }
+        if (hasFeaturedImageSupport) {
+          resetValue.featuredImage = false;
+        }
+        updateAttributes({ ...value, ...resetValue });
       },
-      isShownByDefault: control.shownByDefault,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_media_replace_flow.default,
-        {
-          className: "block-editor-content-only-controls__media-replace-flow",
-          allowedTypes: control.args.allowedTypes,
-          mediaId: id,
-          mediaURL: src,
-          multiple: control.args.multiple,
-          popoverProps,
-          onReset: () => {
-            updateAttributes(defaultValues);
-          },
-          useFeaturedImage: !!useFeaturedImage,
-          onToggleFeaturedImage: !!featuredImageKey && (() => {
-            updateAttributes({
-              ...defaultValues,
-              [featuredImageKey]: !useFeaturedImage
-            });
-          }),
-          onSelect: (selectedMedia) => {
-            if (selectedMedia.id && selectedMedia.url) {
-              const optionalAttributes = {};
-              if (typeKey && selectedMedia.type) {
-                optionalAttributes[typeKey] = selectedMedia.type;
-              }
-              if (captionKey && !caption && selectedMedia.caption) {
-                optionalAttributes[captionKey] = selectedMedia.caption;
-              }
-              if (altKey && !alt && selectedMedia.alt) {
-                optionalAttributes[altKey] = selectedMedia.alt;
-              }
-              if (posterKey && selectedMedia.poster) {
-                optionalAttributes[posterKey] = selectedMedia.poster;
-              }
-              updateAttributes({
-                [idKey]: selectedMedia.id,
-                [srcKey]: selectedMedia.url,
-                ...optionalAttributes
-              });
+      ...hasFeaturedImageSupport && {
+        useFeaturedImage: !!value?.featuredImage,
+        onToggleFeaturedImage: () => {
+          updateAttributes({
+            ...value,
+            featuredImage: !value?.featuredImage
+          });
+        }
+      },
+      onSelect: (selectedMedia) => {
+        if (selectedMedia.id && selectedMedia.url) {
+          let mediaType = "image";
+          if (selectedMedia.mime_type) {
+            if (selectedMedia.mime_type.startsWith("video/")) {
+              mediaType = "video";
+            } else if (selectedMedia.mime_type.startsWith("audio/")) {
+              mediaType = "audio";
             }
-          },
-          renderToggle: (buttonProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_components.Button,
-            {
-              __next40pxDefaultSize: true,
-              className: "block-editor-content-only-controls__media",
-              ...buttonProps,
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                import_components.__experimentalGrid,
-                {
-                  rowGap: 0,
-                  columnGap: 8,
-                  templateColumns: "24px 1fr",
-                  className: "block-editor-content-only-controls__media-row",
-                  children: [
-                    src && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        MediaThumbnail,
-                        {
-                          attachment,
-                          control,
-                          attributeValues
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-                        className: "block-editor-content-only-controls__media-title",
-                        // TODO - truncate long titles or url smartly (e.g. show filename).
-                        children: attachment?.title?.raw && attachment?.title?.raw !== "" ? attachment?.title?.raw : src
-                      })
-                    ] }),
-                    !src && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        "span",
-                        {
-                          className: "block-editor-content-only-controls__media-placeholder",
-                          style: {
-                            width: "24px",
-                            height: "24px"
-                          }
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "block-editor-content-only-controls__media-title", children: chooseItemLabel })
-                    ] })
-                  ]
+          }
+          const newValue = {};
+          if (fieldDef?.mapping) {
+            Object.keys(fieldDef.mapping).forEach(
+              (key) => {
+                if (key === "id") {
+                  newValue[key] = selectedMedia.id;
+                } else if (key === "src" || key === "url") {
+                  newValue[key] = selectedMedia.url;
+                } else if (key === "type") {
+                  newValue[key] = mediaType;
+                } else if (key === "link" && selectedMedia.link) {
+                  newValue[key] = selectedMedia.link;
+                } else if (key === "caption" && !value?.caption && selectedMedia.caption) {
+                  newValue[key] = selectedMedia.caption;
+                } else if (key === "alt" && !value?.alt && selectedMedia.alt) {
+                  newValue[key] = selectedMedia.alt;
+                } else if (key === "poster" && selectedMedia.poster) {
+                  newValue[key] = selectedMedia.poster;
                 }
-              )
+              }
+            );
+          }
+          if (hasFeaturedImageSupport) {
+            newValue.featuredImage = false;
+          }
+          const finalValue = { ...value, ...newValue };
+          updateAttributes(finalValue);
+        }
+      },
+      renderToggle: (buttonProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.Button,
+        {
+          __next40pxDefaultSize: true,
+          className: "block-editor-content-only-controls__media",
+          ...buttonProps,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_components.__experimentalGrid,
+            {
+              rowGap: 0,
+              columnGap: 8,
+              templateColumns: "24px 1fr",
+              className: "block-editor-content-only-controls__media-row",
+              children: [
+                url && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    MediaThumbnail,
+                    {
+                      attachment,
+                      field,
+                      data
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+                    className: "block-editor-content-only-controls__media-title",
+                    // TODO - truncate long titles or url smartly (e.g. show filename).
+                    children: attachment?.title?.raw && attachment?.title?.raw !== "" ? attachment?.title?.raw : url
+                  })
+                ] }),
+                !url && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "span",
+                    {
+                      className: "block-editor-content-only-controls__media-placeholder",
+                      style: {
+                        width: "24px",
+                        height: "24px"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "block-editor-content-only-controls__media-title", children: chooseItemLabel })
+                ] })
+              ]
             }
           )
         }

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

@@ -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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",
-  "names": ["imageIcon", "videoIcon", "audioIcon", "mediaIcon", "blockEditorStore", "MediaUploadCheck", "ToolsPanelItem", "MediaReplaceFlow", "Grid"]
+  "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, onChange, 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 { 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\tonChange( 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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAIO;AACP,kBAA0B;AAC1B,kBAAmB;AACnB,mBAKO;AAKP,gCAA6B;AAC7B,mBAA6B;AAC7B,6CAA6C;AAC7C,0BAAkC;AAClC,mBAA0C;AAYvC;AAVH,SAAS,eAAgB,EAAE,MAAM,OAAO,WAAW,GAAI;AACtD,QAAM,SAAS,MAAM,UAAU,CAAC;AAChC,QAAM,EAAE,eAAe,CAAC,GAAG,WAAW,MAAM,IAAI;AAEhD,MAAK,UAAW;AACf,WAAO;AAAA,EACR;AAEA,MAAK,YAAY,eAAe,WAAW,YAAY,QAAS;AAC/D,WACC;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,KAAI;AAAA,QACJ,OAAQ;AAAA,QACR,QAAS;AAAA,QACT,KACC,WAAW,eAAe,UACvB,WAAW,aACX,WAAW;AAAA;AAAA,IAEhB;AAAA,EAEF;AAEA,MAAK,aAAa,WAAW,GAAI;AAChC,UAAM,QAAQ,MAAM,SAAU,EAAE,MAAM,KAAK,CAAE;AAC7C,UAAM,MAAM,OAAO;AAEnB,QAAK,KAAM;AACV,aACC;AAAA,QAAC;AAAA;AAAA,UACA,WAAU;AAAA,UACV,KAAI;AAAA,UACJ,OAAQ;AAAA,UACR,QAAS;AAAA,UACT,KAAM;AAAA;AAAA,MACP;AAAA,IAEF;AAEA,QAAI;AACJ,QAAK,aAAc,CAAE,MAAM,SAAU;AACpC,aAAO,aAAAA;AAAA,IACR,WAAY,aAAc,CAAE,MAAM,SAAU;AAC3C,aAAO,aAAAC;AAAA,IACR,WAAY,aAAc,CAAE,MAAM,SAAU;AAC3C,aAAO,aAAAC;AAAA,IACR,OAAO;AACN,aAAO,aAAAC;AAAA,IACR;AAEA,QAAK,MAAO;AACX,aAAO,4CAAC,0BAAK,MAAc,MAAO,IAAK;AAAA,IACxC;AAAA,EACD;AAEA,SAAO,4CAAC,0BAAK,MAAO,aAAAA,OAAY,MAAO,IAAK;AAC7C;AAEe,SAAR,MAAwB,EAAE,MAAM,OAAO,UAAU,SAAS,CAAC,EAAE,GAAI;AACvE,QAAM,EAAE,aAAa,QAAI,qEAA8B;AAAA,IACtD,WAAW;AAAA,EACZ,CAAE;AACF,QAAM,QAAQ,MAAM,SAAU,EAAE,MAAM,KAAK,CAAE;AAC7C,QAAM,EAAE,eAAe,CAAC,GAAG,WAAW,MAAM,IAAI,MAAM,UAAU,CAAC;AACjE,QAAM,EAAE,SAAS,IAAI;AACrB,QAAM,mBAAmB,CAAE,kBAAmB;AAC7C,UAAM,gBAAgB,MAAM,SAAU;AAAA,MACrC,MAAM;AAAA,MACN,OAAO;AAAA,IACR,CAAE;AACF,aAAU,aAAc;AAAA,EACzB;AAGA,QAAM,0BACL,UAAU,WAAW,mBAAmB,SAAS;AAElD,QAAM,KAAK,OAAO;AAClB,QAAM,MAAM,OAAO;AAEnB,QAAM,iBAAa;AAAA,IAClB,CAAE,WAAY;AACb,UAAK,CAAE,IAAK;AACX;AAAA,MACD;AAEA,YAAM,WAAW,OAAQ,aAAAC,KAAiB,EAAE,YAAY;AACxD,YAAM,WAAW,SAAU,qCAAkB;AAE7C,UAAK,CAAE,UAAW;AACjB;AAAA,MACD;AAEA,aAAO,SAAU,QAAQ,EAAG;AAAA,IAC7B;AAAA,IACA,CAAE,EAAG;AAAA,EACN;AAGA,MAAI;AACJ,MAAK,aAAa,WAAW,GAAI;AAChC,UAAM,cAAc,aAAc,CAAE;AACpC,QAAK,gBAAgB,SAAU;AAC9B,4BAAkB,gBAAI,uBAAmB;AAAA,IAC1C,WAAY,gBAAgB,SAAU;AACrC,4BAAkB,gBAAI,sBAAkB;AAAA,IACzC,WAAY,gBAAgB,eAAgB;AAC3C,4BAAkB,gBAAI,qBAAiB;AAAA,IACxC,OAAO;AACN,4BAAkB,gBAAI,2BAAuB;AAAA,IAC9C;AAAA,EACD,OAAO;AACN,0BAAkB,gBAAI,2BAAuB;AAAA,EAC9C;AAEA,SACC,4CAAC,aAAAC,SAAA,EACA;AAAA,IAAC,0BAAAC;AAAA,IAAA;AAAA,MACA,WAAU;AAAA,MACV;AAAA,MACA,SAAU;AAAA,MACV,UAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,SAAU,MAAM;AAEf,cAAM,aAAa,CAAC;AAEpB,YAAK,UAAU,SAAU;AACxB,iBAAO,KAAM,SAAS,OAAQ,EAAE,QAAS,CAAE,QAAS;AACnD,gBACC,QAAQ,QACR,QAAQ,SACR,QAAQ,OACP;AACD,yBAAY,GAAI,IAAI;AAAA,YACrB,WAAY,QAAQ,aAAa,QAAQ,OAAQ;AAChD,yBAAY,GAAI,IAAI;AAAA,YACrB;AAAA,UACD,CAAE;AAAA,QACH;AAGA,YAAK,yBAA0B;AAC9B,qBAAW,gBAAgB;AAAA,QAC5B;AAGA,yBAAkB,EAAE,GAAG,OAAO,GAAG,WAAW,CAAE;AAAA,MAC/C;AAAA,MACE,GAAK,2BAA2B;AAAA,QACjC,kBAAkB,CAAC,CAAE,OAAO;AAAA,QAC5B,uBAAuB,MAAM;AAC5B,2BAAkB;AAAA,YACjB,GAAG;AAAA,YACH,eAAe,CAAE,OAAO;AAAA,UACzB,CAAE;AAAA,QACH;AAAA,MACD;AAAA,MACA,UAAW,CAAE,kBAAmB;AAC/B,YAAK,cAAc,MAAM,cAAc,KAAM;AAE5C,cAAI,YAAY;AAChB,cAAK,cAAc,WAAY;AAC9B,gBACC,cAAc,UAAU,WAAY,QAAS,GAC5C;AACD,0BAAY;AAAA,YACb,WACC,cAAc,UAAU,WAAY,QAAS,GAC5C;AACD,0BAAY;AAAA,YACb;AAAA,UACD;AAGA,gBAAM,WAAW,CAAC;AAGlB,cAAK,UAAU,SAAU;AACxB,mBAAO,KAAM,SAAS,OAAQ,EAAE;AAAA,cAC/B,CAAE,QAAS;AACV,oBAAK,QAAQ,MAAO;AACnB,2BAAU,GAAI,IAAI,cAAc;AAAA,gBACjC,WACC,QAAQ,SACR,QAAQ,OACP;AACD,2BAAU,GAAI,IAAI,cAAc;AAAA,gBACjC,WAAY,QAAQ,QAAS;AAC5B,2BAAU,GAAI,IAAI;AAAA,gBACnB,WACC,QAAQ,UACR,cAAc,MACb;AACD,2BAAU,GAAI,IAAI,cAAc;AAAA,gBACjC,WACC,QAAQ,aACR,CAAE,OAAO,WACT,cAAc,SACb;AACD,2BAAU,GAAI,IAAI,cAAc;AAAA,gBACjC,WACC,QAAQ,SACR,CAAE,OAAO,OACT,cAAc,KACb;AACD,2BAAU,GAAI,IAAI,cAAc;AAAA,gBACjC,WACC,QAAQ,YACR,cAAc,QACb;AACD,2BAAU,GAAI,IAAI,cAAc;AAAA,gBACjC;AAAA,cACD;AAAA,YACD;AAAA,UACD;AAGA,cAAK,yBAA0B;AAC9B,qBAAS,gBAAgB;AAAA,UAC1B;AAGA,gBAAM,aAAa,EAAE,GAAG,OAAO,GAAG,SAAS;AAC3C,2BAAkB,UAAW;AAAA,QAC9B;AAAA,MACD;AAAA,MACA,cAAe,CAAE,gBAChB;AAAA,QAAC;AAAA;AAAA,UACA,uBAAqB;AAAA,UACrB,WAAU;AAAA,UACR,GAAG;AAAA,UAEL;AAAA,YAAC,kBAAAC;AAAA,YAAA;AAAA,cACA,QAAS;AAAA,cACT,WAAY;AAAA,cACZ,iBAAgB;AAAA,cAChB,WAAU;AAAA,cAER;AAAA,uBACD,4EACC;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACA;AAAA,sBACA;AAAA,sBACA;AAAA;AAAA,kBACD;AAAA,kBACA,4CAAC;AAAA,oBAAK,WAAU;AAAA;AAAA,oBAGd,sBAAY,OAAO,OACnB,YAAY,OAAO,QAAQ,KACxB,YAAY,OAAO,MACnB;AAAA,mBAEL;AAAA,mBACD;AAAA,gBAEC,CAAE,OACH,4EACC;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACA,WAAU;AAAA,sBACV,OAAQ;AAAA,wBACP,OAAO;AAAA,wBACP,QAAQ;AAAA,sBACT;AAAA;AAAA,kBACD;AAAA,kBACA,4CAAC,UAAK,WAAU,mDACb,2BACH;AAAA,mBACD;AAAA;AAAA;AAAA,UAEF;AAAA;AAAA,MACD;AAAA;AAAA,EAEF,GACD;AAEF;",
+  "names": ["imageIcon", "videoIcon", "audioIcon", "mediaIcon", "blockEditorStore", "MediaUploadCheck", "MediaReplaceFlow", "Grid"]
 }