@wordpress/block-library 9.44.1-next.v.202604201441.0 → 9.45.0

package/build-module/query/edit/inspector-controls/parent-control.mjs

@@ -123,7 +123,7 @@ function ParentControl({ parents, postType, onChange }) {
       onInputChange: debouncedSearch,
       suggestions,
       onChange: onParentChange,
-      __experimentalShowHowTo: false
+      help: ""
     }
   );
 }

package/build-module/query/edit/inspector-controls/parent-control.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/query/edit/inspector-controls/parent-control.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { FormTokenField } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useState, useEffect, useMemo } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { getEntitiesInfo, mapToIHasNameAndId } from '../../utils';\n\nconst EMPTY_ARRAY = [];\nconst BASE_QUERY = {\n\torder: 'asc',\n\t_fields: 'id,title',\n\tcontext: 'view',\n};\n\nfunction ParentControl( { parents, postType, onChange } ) {\n\tconst [ search, setSearch ] = useState( '' );\n\tconst [ value, setValue ] = useState( EMPTY_ARRAY );\n\tconst [ suggestions, setSuggestions ] = useState( EMPTY_ARRAY );\n\tconst debouncedSearch = useDebounce( setSearch, 250 );\n\tconst { searchResults, searchHasResolved } = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! search ) {\n\t\t\t\treturn { searchResults: EMPTY_ARRAY, searchHasResolved: true };\n\t\t\t}\n\t\t\tconst { getEntityRecords, hasFinishedResolution } =\n\t\t\t\tselect( coreStore );\n\t\t\tconst selectorArgs = [\n\t\t\t\t'postType',\n\t\t\t\tpostType,\n\t\t\t\t{\n\t\t\t\t\t...BASE_QUERY,\n\t\t\t\t\tsearch,\n\t\t\t\t\torderby: 'relevance',\n\t\t\t\t\texclude: parents,\n\t\t\t\t\tper_page: 20,\n\t\t\t\t},\n\t\t\t];\n\t\t\treturn {\n\t\t\t\tsearchResults: getEntityRecords( ...selectorArgs ),\n\t\t\t\tsearchHasResolved: hasFinishedResolution(\n\t\t\t\t\t'getEntityRecords',\n\t\t\t\t\tselectorArgs\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[ search, postType, parents ]\n\t);\n\tconst currentParents = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! parents?.length ) {\n\t\t\t\treturn EMPTY_ARRAY;\n\t\t\t}\n\t\t\tconst { getEntityRecords } = select( coreStore );\n\t\t\treturn getEntityRecords( 'postType', postType, {\n\t\t\t\t...BASE_QUERY,\n\t\t\t\tinclude: parents,\n\t\t\t\tper_page: parents.length,\n\t\t\t} );\n\t\t},\n\t\t[ parents, postType ]\n\t);\n\t// Update the `value` state only after the selectors are resolved\n\t// to avoid emptying the input when we're changing parents.\n\tuseEffect( () => {\n\t\tif ( ! parents?.length ) {\n\t\t\tsetValue( EMPTY_ARRAY );\n\t\t}\n\t\tif ( ! currentParents?.length ) {\n\t\t\treturn;\n\t\t}\n\t\tconst currentParentsInfo = getEntitiesInfo(\n\t\t\tmapToIHasNameAndId( currentParents, 'title.rendered' )\n\t\t);\n\t\t// Returns only the existing entity ids. This prevents the component\n\t\t// from crashing in the editor, when non existing ids are provided.\n\t\tconst sanitizedValue = parents.reduce( ( accumulator, id ) => {\n\t\t\tconst entity = currentParentsInfo.mapById[ id ];\n\t\t\tif ( entity ) {\n\t\t\t\taccumulator.push( {\n\t\t\t\t\tid,\n\t\t\t\t\tvalue: entity.name,\n\t\t\t\t} );\n\t\t\t}\n\t\t\treturn accumulator;\n\t\t}, [] );\n\t\tsetValue( sanitizedValue );\n\t}, [ parents, currentParents ] );\n\n\tconst entitiesInfo = useMemo( () => {\n\t\tif ( ! searchResults?.length ) {\n\t\t\treturn EMPTY_ARRAY;\n\t\t}\n\t\treturn getEntitiesInfo(\n\t\t\tmapToIHasNameAndId( searchResults, 'title.rendered' )\n\t\t);\n\t}, [ searchResults ] );\n\t// Update suggestions only when the query has resolved.\n\tuseEffect( () => {\n\t\tif ( ! searchHasResolved ) {\n\t\t\treturn;\n\t\t}\n\t\tsetSuggestions( entitiesInfo.names );\n\t}, [ entitiesInfo.names, searchHasResolved ] );\n\n\tconst getIdByValue = ( entitiesMappedByName, entity ) => {\n\t\tconst id = entity?.id || entitiesMappedByName?.[ entity ]?.id;\n\t\tif ( id ) {\n\t\t\treturn id;\n\t\t}\n\t};\n\tconst onParentChange = ( newValue ) => {\n\t\tconst ids = Array.from(\n\t\t\tnewValue.reduce( ( accumulator, entity ) => {\n\t\t\t\t// Verify that new values point to existing entities.\n\t\t\t\tconst id = getIdByValue( entitiesInfo.mapByName, entity );\n\t\t\t\tif ( id ) {\n\t\t\t\t\taccumulator.add( id );\n\t\t\t\t}\n\t\t\t\treturn accumulator;\n\t\t\t}, new Set() )\n\t\t);\n\t\tsetSuggestions( EMPTY_ARRAY );\n\t\tonChange( { parents: ids } );\n\t};\n\treturn (\n\t\t<FormTokenField\n\t\t\t__next40pxDefaultSize\n\t\t\tlabel={ __( 'Parents' ) }\n\t\t\tvalue={ value }\n\t\t\tonInputChange={ debouncedSearch }\n\t\t\tsuggestions={ suggestions }\n\t\t\tonChange={ onParentChange }\n\t\t\t__experimentalShowHowTo={ false }\n\t\t/>\n\t);\n}\n\nexport default ParentControl;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { FormTokenField } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useState, useEffect, useMemo } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { getEntitiesInfo, mapToIHasNameAndId } from '../../utils';\n\nconst EMPTY_ARRAY = [];\nconst BASE_QUERY = {\n\torder: 'asc',\n\t_fields: 'id,title',\n\tcontext: 'view',\n};\n\nfunction ParentControl( { parents, postType, onChange } ) {\n\tconst [ search, setSearch ] = useState( '' );\n\tconst [ value, setValue ] = useState( EMPTY_ARRAY );\n\tconst [ suggestions, setSuggestions ] = useState( EMPTY_ARRAY );\n\tconst debouncedSearch = useDebounce( setSearch, 250 );\n\tconst { searchResults, searchHasResolved } = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! search ) {\n\t\t\t\treturn { searchResults: EMPTY_ARRAY, searchHasResolved: true };\n\t\t\t}\n\t\t\tconst { getEntityRecords, hasFinishedResolution } =\n\t\t\t\tselect( coreStore );\n\t\t\tconst selectorArgs = [\n\t\t\t\t'postType',\n\t\t\t\tpostType,\n\t\t\t\t{\n\t\t\t\t\t...BASE_QUERY,\n\t\t\t\t\tsearch,\n\t\t\t\t\torderby: 'relevance',\n\t\t\t\t\texclude: parents,\n\t\t\t\t\tper_page: 20,\n\t\t\t\t},\n\t\t\t];\n\t\t\treturn {\n\t\t\t\tsearchResults: getEntityRecords( ...selectorArgs ),\n\t\t\t\tsearchHasResolved: hasFinishedResolution(\n\t\t\t\t\t'getEntityRecords',\n\t\t\t\t\tselectorArgs\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[ search, postType, parents ]\n\t);\n\tconst currentParents = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! parents?.length ) {\n\t\t\t\treturn EMPTY_ARRAY;\n\t\t\t}\n\t\t\tconst { getEntityRecords } = select( coreStore );\n\t\t\treturn getEntityRecords( 'postType', postType, {\n\t\t\t\t...BASE_QUERY,\n\t\t\t\tinclude: parents,\n\t\t\t\tper_page: parents.length,\n\t\t\t} );\n\t\t},\n\t\t[ parents, postType ]\n\t);\n\t// Update the `value` state only after the selectors are resolved\n\t// to avoid emptying the input when we're changing parents.\n\tuseEffect( () => {\n\t\tif ( ! parents?.length ) {\n\t\t\tsetValue( EMPTY_ARRAY );\n\t\t}\n\t\tif ( ! currentParents?.length ) {\n\t\t\treturn;\n\t\t}\n\t\tconst currentParentsInfo = getEntitiesInfo(\n\t\t\tmapToIHasNameAndId( currentParents, 'title.rendered' )\n\t\t);\n\t\t// Returns only the existing entity ids. This prevents the component\n\t\t// from crashing in the editor, when non existing ids are provided.\n\t\tconst sanitizedValue = parents.reduce( ( accumulator, id ) => {\n\t\t\tconst entity = currentParentsInfo.mapById[ id ];\n\t\t\tif ( entity ) {\n\t\t\t\taccumulator.push( {\n\t\t\t\t\tid,\n\t\t\t\t\tvalue: entity.name,\n\t\t\t\t} );\n\t\t\t}\n\t\t\treturn accumulator;\n\t\t}, [] );\n\t\tsetValue( sanitizedValue );\n\t}, [ parents, currentParents ] );\n\n\tconst entitiesInfo = useMemo( () => {\n\t\tif ( ! searchResults?.length ) {\n\t\t\treturn EMPTY_ARRAY;\n\t\t}\n\t\treturn getEntitiesInfo(\n\t\t\tmapToIHasNameAndId( searchResults, 'title.rendered' )\n\t\t);\n\t}, [ searchResults ] );\n\t// Update suggestions only when the query has resolved.\n\tuseEffect( () => {\n\t\tif ( ! searchHasResolved ) {\n\t\t\treturn;\n\t\t}\n\t\tsetSuggestions( entitiesInfo.names );\n\t}, [ entitiesInfo.names, searchHasResolved ] );\n\n\tconst getIdByValue = ( entitiesMappedByName, entity ) => {\n\t\tconst id = entity?.id || entitiesMappedByName?.[ entity ]?.id;\n\t\tif ( id ) {\n\t\t\treturn id;\n\t\t}\n\t};\n\tconst onParentChange = ( newValue ) => {\n\t\tconst ids = Array.from(\n\t\t\tnewValue.reduce( ( accumulator, entity ) => {\n\t\t\t\t// Verify that new values point to existing entities.\n\t\t\t\tconst id = getIdByValue( entitiesInfo.mapByName, entity );\n\t\t\t\tif ( id ) {\n\t\t\t\t\taccumulator.add( id );\n\t\t\t\t}\n\t\t\t\treturn accumulator;\n\t\t\t}, new Set() )\n\t\t);\n\t\tsetSuggestions( EMPTY_ARRAY );\n\t\tonChange( { parents: ids } );\n\t};\n\treturn (\n\t\t<FormTokenField\n\t\t\t__next40pxDefaultSize\n\t\t\tlabel={ __( 'Parents' ) }\n\t\t\tvalue={ value }\n\t\t\tonInputChange={ debouncedSearch }\n\t\t\tsuggestions={ suggestions }\n\t\t\tonChange={ onParentChange }\n\t\t\thelp=\"\"\n\t\t/>\n\t);\n}\n\nexport default ParentControl;\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/query/edit/inspector-controls/taxonomy-controls.mjs

@@ -180,7 +180,7 @@ function TaxonomyItem({
       suggestions,
       displayTransform: decodeEntities,
       onChange: onTermsChange,
-      __experimentalShowHowTo: false,
+      help: "",
       __next40pxDefaultSize: true
     }
   ) });

package/build-module/query/edit/inspector-controls/taxonomy-controls.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/query/edit/inspector-controls/taxonomy-controls.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tFormTokenField,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useState, useEffect, Fragment } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { sprintf, __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useTaxonomies } from '../../utils';\n\nconst EMPTY_ARRAY = [];\nconst BASE_QUERY = {\n\torder: 'asc',\n\t_fields: 'id,name',\n\tcontext: 'view',\n};\n\n// Helper function to get the term id based on user input in terms `FormTokenField`.\nconst getTermIdByTermValue = ( terms, termValue ) => {\n\t// First we check for exact match by `term.id` or case sensitive `term.name` match.\n\tconst termId =\n\t\ttermValue?.id || terms?.find( ( term ) => term.name === termValue )?.id;\n\tif ( termId ) {\n\t\treturn termId;\n\t}\n\n\t/**\n\t * Here we make an extra check for entered terms in a non case sensitive way,\n\t * to match user expectations, due to `FormTokenField` behaviour that shows\n\t * suggestions which are case insensitive.\n\t *\n\t * Although WP tries to discourage users to add terms with the same name (case insensitive),\n\t * it's still possible if you manually change the name, as long as the terms have different slugs.\n\t * In this edge case we always apply the first match from the terms list.\n\t */\n\tconst termValueLower = termValue.toLocaleLowerCase();\n\treturn terms?.find(\n\t\t( term ) => term.name.toLocaleLowerCase() === termValueLower\n\t)?.id;\n};\n\nexport function TaxonomyControls( { onChange, query } ) {\n\tconst { postType, taxQuery } = query;\n\n\tconst taxonomies = useTaxonomies( postType );\n\tif ( ! taxonomies?.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 4 }>\n\t\t\t{ taxonomies.map( ( taxonomy ) => {\n\t\t\t\tconst includeTermIds =\n\t\t\t\t\ttaxQuery?.include?.[ taxonomy.slug ] || [];\n\t\t\t\tconst excludeTermIds =\n\t\t\t\t\ttaxQuery?.exclude?.[ taxonomy.slug ] || [];\n\t\t\t\tconst onChangeTaxQuery = (\n\t\t\t\t\tnewTermIds,\n\t\t\t\t\t/** @type {'include'|'exclude'} */ key\n\t\t\t\t) => {\n\t\t\t\t\tconst newPartialTaxQuery = {\n\t\t\t\t\t\t...taxQuery?.[ key ],\n\t\t\t\t\t\t[ taxonomy.slug ]: newTermIds,\n\t\t\t\t\t};\n\t\t\t\t\t// Remove empty arrays from the partial `taxQuery` (include|exclude).\n\t\t\t\t\tif ( ! newTermIds.length ) {\n\t\t\t\t\t\tdelete newPartialTaxQuery[ taxonomy.slug ];\n\t\t\t\t\t}\n\t\t\t\t\tconst newTaxQuery = {\n\t\t\t\t\t\t...taxQuery,\n\t\t\t\t\t\t[ key ]: !! Object.keys( newPartialTaxQuery ).length\n\t\t\t\t\t\t\t? newPartialTaxQuery\n\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t};\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\t// Clean up `taxQuery` if all filters are removed.\n\t\t\t\t\t\ttaxQuery: Object.values( newTaxQuery ).every(\n\t\t\t\t\t\t\t( value ) => ! value\n\t\t\t\t\t\t)\n\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t: newTaxQuery,\n\t\t\t\t\t} );\n\t\t\t\t};\n\t\t\t\treturn (\n\t\t\t\t\t<Fragment key={ taxonomy.slug }>\n\t\t\t\t\t\t<TaxonomyItem\n\t\t\t\t\t\t\ttaxonomy={ taxonomy }\n\t\t\t\t\t\t\ttermIds={ includeTermIds }\n\t\t\t\t\t\t\toppositeTermIds={ excludeTermIds }\n\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\tonChangeTaxQuery( value, 'include' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tlabel={ taxonomy.name }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<TaxonomyItem\n\t\t\t\t\t\t\ttaxonomy={ taxonomy }\n\t\t\t\t\t\t\ttermIds={ excludeTermIds }\n\t\t\t\t\t\t\toppositeTermIds={ includeTermIds }\n\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\tonChangeTaxQuery( value, 'exclude' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t/* translators: %s: taxonomy name */\n\t\t\t\t\t\t\t\tsprintf( __( 'Exclude: %s' ), taxonomy.name )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Fragment>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\n/**\n * Renders a `FormTokenField` for a given taxonomy.\n *\n * @param {Object}   props                 The props for the component.\n * @param {Object}   props.taxonomy        The taxonomy object.\n * @param {number[]} props.termIds         An array with the block's term ids for the given taxonomy.\n * @param {number[]} props.oppositeTermIds An array with the opposite control's term ids (to exclude from suggestions).\n * @param {Function} props.onChange        Callback `onChange` function.\n * @param {string}   props.label           Label of the control.\n * @return {React.JSX.Element} The rendered component.\n */\nfunction TaxonomyItem( {\n\ttaxonomy,\n\ttermIds,\n\toppositeTermIds,\n\tonChange,\n\tlabel,\n} ) {\n\tconst [ search, setSearch ] = useState( '' );\n\tconst [ value, setValue ] = useState( EMPTY_ARRAY );\n\tconst [ suggestions, setSuggestions ] = useState( EMPTY_ARRAY );\n\tconst debouncedSearch = useDebounce( setSearch, 250 );\n\tconst { searchResults, searchHasResolved } = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! search ) {\n\t\t\t\treturn { searchResults: EMPTY_ARRAY, searchHasResolved: true };\n\t\t\t}\n\t\t\tconst { getEntityRecords, hasFinishedResolution } =\n\t\t\t\tselect( coreStore );\n\n\t\t\t// Combine current terms and opposite terms for exclusion, to prevent\n\t\t\t// users from selecting the same term in both include and exclude controls.\n\t\t\tconst combinedExclude = [ ...termIds, ...oppositeTermIds ];\n\n\t\t\tconst selectorArgs = [\n\t\t\t\t'taxonomy',\n\t\t\t\ttaxonomy.slug,\n\t\t\t\t{\n\t\t\t\t\t...BASE_QUERY,\n\t\t\t\t\tsearch,\n\t\t\t\t\torderby: 'name',\n\t\t\t\t\texclude: combinedExclude,\n\t\t\t\t\tper_page: 20,\n\t\t\t\t},\n\t\t\t];\n\t\t\treturn {\n\t\t\t\tsearchResults: getEntityRecords( ...selectorArgs ),\n\t\t\t\tsearchHasResolved: hasFinishedResolution(\n\t\t\t\t\t'getEntityRecords',\n\t\t\t\t\tselectorArgs\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[ search, taxonomy.slug, termIds, oppositeTermIds ]\n\t);\n\t// `existingTerms` are the ones fetched from the API and their type is `{ id: number; name: string }`.\n\t// They are used to extract the terms' names to populate the `FormTokenField` properly\n\t// and to sanitize the provided `termIds`, by setting only the ones that exist.\n\tconst existingTerms = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! termIds?.length ) {\n\t\t\t\treturn EMPTY_ARRAY;\n\t\t\t}\n\t\t\tconst { getEntityRecords } = select( coreStore );\n\t\t\treturn getEntityRecords( 'taxonomy', taxonomy.slug, {\n\t\t\t\t...BASE_QUERY,\n\t\t\t\tinclude: termIds,\n\t\t\t\tper_page: termIds.length,\n\t\t\t} );\n\t\t},\n\t\t[ taxonomy.slug, termIds ]\n\t);\n\t// Update the `value` state only after the selectors are resolved\n\t// to avoid emptying the input when we're changing terms.\n\tuseEffect( () => {\n\t\tif ( ! termIds?.length ) {\n\t\t\tsetValue( EMPTY_ARRAY );\n\t\t}\n\t\tif ( ! existingTerms?.length ) {\n\t\t\treturn;\n\t\t}\n\t\t// Returns only the existing entity ids. This prevents the component\n\t\t// from crashing in the editor, when non existing ids are provided.\n\t\tconst sanitizedValue = termIds.reduce( ( accumulator, id ) => {\n\t\t\tconst entity = existingTerms.find( ( term ) => term.id === id );\n\t\t\tif ( entity ) {\n\t\t\t\taccumulator.push( {\n\t\t\t\t\tid,\n\t\t\t\t\tvalue: entity.name,\n\t\t\t\t} );\n\t\t\t}\n\t\t\treturn accumulator;\n\t\t}, [] );\n\t\tsetValue( sanitizedValue );\n\t}, [ termIds, existingTerms ] );\n\t// Update suggestions only when the query has resolved.\n\tuseEffect( () => {\n\t\tif ( ! searchHasResolved ) {\n\t\t\treturn;\n\t\t}\n\t\tsetSuggestions( searchResults.map( ( result ) => result.name ) );\n\t}, [ searchResults, searchHasResolved ] );\n\tconst onTermsChange = ( newTermValues ) => {\n\t\tconst newTermIds = new Set();\n\t\tfor ( const termValue of newTermValues ) {\n\t\t\tconst termId = getTermIdByTermValue( searchResults, termValue );\n\t\t\tif ( termId ) {\n\t\t\t\tnewTermIds.add( termId );\n\t\t\t}\n\t\t}\n\t\tsetSuggestions( EMPTY_ARRAY );\n\t\tonChange( Array.from( newTermIds ) );\n\t};\n\treturn (\n\t\t<div className=\"block-library-query-inspector__taxonomy-control\">\n\t\t\t<FormTokenField\n\t\t\t\tlabel={ label }\n\t\t\t\tvalue={ value }\n\t\t\t\tonInputChange={ debouncedSearch }\n\t\t\t\tsuggestions={ suggestions }\n\t\t\t\tdisplayTransform={ decodeEntities }\n\t\t\t\tonChange={ onTermsChange }\n\t\t\t\t__experimentalShowHowTo={ false }\n\t\t\t\t__next40pxDefaultSize\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tFormTokenField,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useState, useEffect, Fragment } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { sprintf, __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useTaxonomies } from '../../utils';\n\nconst EMPTY_ARRAY = [];\nconst BASE_QUERY = {\n\torder: 'asc',\n\t_fields: 'id,name',\n\tcontext: 'view',\n};\n\n// Helper function to get the term id based on user input in terms `FormTokenField`.\nconst getTermIdByTermValue = ( terms, termValue ) => {\n\t// First we check for exact match by `term.id` or case sensitive `term.name` match.\n\tconst termId =\n\t\ttermValue?.id || terms?.find( ( term ) => term.name === termValue )?.id;\n\tif ( termId ) {\n\t\treturn termId;\n\t}\n\n\t/**\n\t * Here we make an extra check for entered terms in a non case sensitive way,\n\t * to match user expectations, due to `FormTokenField` behaviour that shows\n\t * suggestions which are case insensitive.\n\t *\n\t * Although WP tries to discourage users to add terms with the same name (case insensitive),\n\t * it's still possible if you manually change the name, as long as the terms have different slugs.\n\t * In this edge case we always apply the first match from the terms list.\n\t */\n\tconst termValueLower = termValue.toLocaleLowerCase();\n\treturn terms?.find(\n\t\t( term ) => term.name.toLocaleLowerCase() === termValueLower\n\t)?.id;\n};\n\nexport function TaxonomyControls( { onChange, query } ) {\n\tconst { postType, taxQuery } = query;\n\n\tconst taxonomies = useTaxonomies( postType );\n\tif ( ! taxonomies?.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 4 }>\n\t\t\t{ taxonomies.map( ( taxonomy ) => {\n\t\t\t\tconst includeTermIds =\n\t\t\t\t\ttaxQuery?.include?.[ taxonomy.slug ] || [];\n\t\t\t\tconst excludeTermIds =\n\t\t\t\t\ttaxQuery?.exclude?.[ taxonomy.slug ] || [];\n\t\t\t\tconst onChangeTaxQuery = (\n\t\t\t\t\tnewTermIds,\n\t\t\t\t\t/** @type {'include'|'exclude'} */ key\n\t\t\t\t) => {\n\t\t\t\t\tconst newPartialTaxQuery = {\n\t\t\t\t\t\t...taxQuery?.[ key ],\n\t\t\t\t\t\t[ taxonomy.slug ]: newTermIds,\n\t\t\t\t\t};\n\t\t\t\t\t// Remove empty arrays from the partial `taxQuery` (include|exclude).\n\t\t\t\t\tif ( ! newTermIds.length ) {\n\t\t\t\t\t\tdelete newPartialTaxQuery[ taxonomy.slug ];\n\t\t\t\t\t}\n\t\t\t\t\tconst newTaxQuery = {\n\t\t\t\t\t\t...taxQuery,\n\t\t\t\t\t\t[ key ]: !! Object.keys( newPartialTaxQuery ).length\n\t\t\t\t\t\t\t? newPartialTaxQuery\n\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t};\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\t// Clean up `taxQuery` if all filters are removed.\n\t\t\t\t\t\ttaxQuery: Object.values( newTaxQuery ).every(\n\t\t\t\t\t\t\t( value ) => ! value\n\t\t\t\t\t\t)\n\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t: newTaxQuery,\n\t\t\t\t\t} );\n\t\t\t\t};\n\t\t\t\treturn (\n\t\t\t\t\t<Fragment key={ taxonomy.slug }>\n\t\t\t\t\t\t<TaxonomyItem\n\t\t\t\t\t\t\ttaxonomy={ taxonomy }\n\t\t\t\t\t\t\ttermIds={ includeTermIds }\n\t\t\t\t\t\t\toppositeTermIds={ excludeTermIds }\n\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\tonChangeTaxQuery( value, 'include' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tlabel={ taxonomy.name }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<TaxonomyItem\n\t\t\t\t\t\t\ttaxonomy={ taxonomy }\n\t\t\t\t\t\t\ttermIds={ excludeTermIds }\n\t\t\t\t\t\t\toppositeTermIds={ includeTermIds }\n\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\tonChangeTaxQuery( value, 'exclude' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t/* translators: %s: taxonomy name */\n\t\t\t\t\t\t\t\tsprintf( __( 'Exclude: %s' ), taxonomy.name )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Fragment>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\n/**\n * Renders a `FormTokenField` for a given taxonomy.\n *\n * @param {Object}   props                 The props for the component.\n * @param {Object}   props.taxonomy        The taxonomy object.\n * @param {number[]} props.termIds         An array with the block's term ids for the given taxonomy.\n * @param {number[]} props.oppositeTermIds An array with the opposite control's term ids (to exclude from suggestions).\n * @param {Function} props.onChange        Callback `onChange` function.\n * @param {string}   props.label           Label of the control.\n * @return {React.JSX.Element} The rendered component.\n */\nfunction TaxonomyItem( {\n\ttaxonomy,\n\ttermIds,\n\toppositeTermIds,\n\tonChange,\n\tlabel,\n} ) {\n\tconst [ search, setSearch ] = useState( '' );\n\tconst [ value, setValue ] = useState( EMPTY_ARRAY );\n\tconst [ suggestions, setSuggestions ] = useState( EMPTY_ARRAY );\n\tconst debouncedSearch = useDebounce( setSearch, 250 );\n\tconst { searchResults, searchHasResolved } = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! search ) {\n\t\t\t\treturn { searchResults: EMPTY_ARRAY, searchHasResolved: true };\n\t\t\t}\n\t\t\tconst { getEntityRecords, hasFinishedResolution } =\n\t\t\t\tselect( coreStore );\n\n\t\t\t// Combine current terms and opposite terms for exclusion, to prevent\n\t\t\t// users from selecting the same term in both include and exclude controls.\n\t\t\tconst combinedExclude = [ ...termIds, ...oppositeTermIds ];\n\n\t\t\tconst selectorArgs = [\n\t\t\t\t'taxonomy',\n\t\t\t\ttaxonomy.slug,\n\t\t\t\t{\n\t\t\t\t\t...BASE_QUERY,\n\t\t\t\t\tsearch,\n\t\t\t\t\torderby: 'name',\n\t\t\t\t\texclude: combinedExclude,\n\t\t\t\t\tper_page: 20,\n\t\t\t\t},\n\t\t\t];\n\t\t\treturn {\n\t\t\t\tsearchResults: getEntityRecords( ...selectorArgs ),\n\t\t\t\tsearchHasResolved: hasFinishedResolution(\n\t\t\t\t\t'getEntityRecords',\n\t\t\t\t\tselectorArgs\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[ search, taxonomy.slug, termIds, oppositeTermIds ]\n\t);\n\t// `existingTerms` are the ones fetched from the API and their type is `{ id: number; name: string }`.\n\t// They are used to extract the terms' names to populate the `FormTokenField` properly\n\t// and to sanitize the provided `termIds`, by setting only the ones that exist.\n\tconst existingTerms = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! termIds?.length ) {\n\t\t\t\treturn EMPTY_ARRAY;\n\t\t\t}\n\t\t\tconst { getEntityRecords } = select( coreStore );\n\t\t\treturn getEntityRecords( 'taxonomy', taxonomy.slug, {\n\t\t\t\t...BASE_QUERY,\n\t\t\t\tinclude: termIds,\n\t\t\t\tper_page: termIds.length,\n\t\t\t} );\n\t\t},\n\t\t[ taxonomy.slug, termIds ]\n\t);\n\t// Update the `value` state only after the selectors are resolved\n\t// to avoid emptying the input when we're changing terms.\n\tuseEffect( () => {\n\t\tif ( ! termIds?.length ) {\n\t\t\tsetValue( EMPTY_ARRAY );\n\t\t}\n\t\tif ( ! existingTerms?.length ) {\n\t\t\treturn;\n\t\t}\n\t\t// Returns only the existing entity ids. This prevents the component\n\t\t// from crashing in the editor, when non existing ids are provided.\n\t\tconst sanitizedValue = termIds.reduce( ( accumulator, id ) => {\n\t\t\tconst entity = existingTerms.find( ( term ) => term.id === id );\n\t\t\tif ( entity ) {\n\t\t\t\taccumulator.push( {\n\t\t\t\t\tid,\n\t\t\t\t\tvalue: entity.name,\n\t\t\t\t} );\n\t\t\t}\n\t\t\treturn accumulator;\n\t\t}, [] );\n\t\tsetValue( sanitizedValue );\n\t}, [ termIds, existingTerms ] );\n\t// Update suggestions only when the query has resolved.\n\tuseEffect( () => {\n\t\tif ( ! searchHasResolved ) {\n\t\t\treturn;\n\t\t}\n\t\tsetSuggestions( searchResults.map( ( result ) => result.name ) );\n\t}, [ searchResults, searchHasResolved ] );\n\tconst onTermsChange = ( newTermValues ) => {\n\t\tconst newTermIds = new Set();\n\t\tfor ( const termValue of newTermValues ) {\n\t\t\tconst termId = getTermIdByTermValue( searchResults, termValue );\n\t\t\tif ( termId ) {\n\t\t\t\tnewTermIds.add( termId );\n\t\t\t}\n\t\t}\n\t\tsetSuggestions( EMPTY_ARRAY );\n\t\tonChange( Array.from( newTermIds ) );\n\t};\n\treturn (\n\t\t<div className=\"block-library-query-inspector__taxonomy-control\">\n\t\t\t<FormTokenField\n\t\t\t\tlabel={ label }\n\t\t\t\tvalue={ value }\n\t\t\t\tonInputChange={ debouncedSearch }\n\t\t\t\tsuggestions={ suggestions }\n\t\t\t\tdisplayTransform={ decodeEntities }\n\t\t\t\tonChange={ onTermsChange }\n\t\t\t\thelp=\"\"\n\t\t\t\t__next40pxDefaultSize\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],
+  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA,wBAAwB;AAAA,OAClB;AACP,SAAS,iBAAiB;AAC1B,SAAS,SAAS,iBAAiB;AACnC,SAAS,UAAU,WAAW,gBAAgB;AAC9C,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,SAAS,UAAU;AAK5B,SAAS,qBAAqB;AA4EzB,SACC,KADD;AA1EL,IAAM,cAAc,CAAC;AACrB,IAAM,aAAa;AAAA,EAClB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AACV;AAGA,IAAM,uBAAuB,CAAE,OAAO,cAAe;AAEpD,QAAM,SACL,WAAW,MAAM,OAAO,KAAM,CAAE,SAAU,KAAK,SAAS,SAAU,GAAG;AACtE,MAAK,QAAS;AACb,WAAO;AAAA,EACR;AAWA,QAAM,iBAAiB,UAAU,kBAAkB;AACnD,SAAO,OAAO;AAAA,IACb,CAAE,SAAU,KAAK,KAAK,kBAAkB,MAAM;AAAA,EAC/C,GAAG;AACJ;AAEO,SAAS,iBAAkB,EAAE,UAAU,MAAM,GAAI;AACvD,QAAM,EAAE,UAAU,SAAS,IAAI;AAE/B,QAAM,aAAa,cAAe,QAAS;AAC3C,MAAK,CAAE,YAAY,QAAS;AAC3B,WAAO;AAAA,EACR;AAEA,SACC,oBAAC,UAAO,SAAU,GACf,qBAAW,IAAK,CAAE,aAAc;AACjC,UAAM,iBACL,UAAU,UAAW,SAAS,IAAK,KAAK,CAAC;AAC1C,UAAM,iBACL,UAAU,UAAW,SAAS,IAAK,KAAK,CAAC;AAC1C,UAAM,mBAAmB,CACxB,YACmC,QAC/B;AACJ,YAAM,qBAAqB;AAAA,QAC1B,GAAG,WAAY,GAAI;AAAA,QACnB,CAAE,SAAS,IAAK,GAAG;AAAA,MACpB;AAEA,UAAK,CAAE,WAAW,QAAS;AAC1B,eAAO,mBAAoB,SAAS,IAAK;AAAA,MAC1C;AACA,YAAM,cAAc;AAAA,QACnB,GAAG;AAAA,QACH,CAAE,GAAI,GAAG,CAAC,CAAE,OAAO,KAAM,kBAAmB,EAAE,SAC3C,qBACA;AAAA,MACJ;AACA,eAAU;AAAA;AAAA,QAET,UAAU,OAAO,OAAQ,WAAY,EAAE;AAAA,UACtC,CAAE,UAAW,CAAE;AAAA,QAChB,IACG,SACA;AAAA,MACJ,CAAE;AAAA,IACH;AACA,WACC,qBAAC,YACA;AAAA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,SAAU;AAAA,UACV,iBAAkB;AAAA,UAClB,UAAW,CAAE,UACZ,iBAAkB,OAAO,SAAU;AAAA,UAEpC,OAAQ,SAAS;AAAA;AAAA,MAClB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,SAAU;AAAA,UACV,iBAAkB;AAAA,UAClB,UAAW,CAAE,UACZ,iBAAkB,OAAO,SAAU;AAAA,UAEpC;AAAA;AAAA,YAEC,QAAS,GAAI,aAAc,GAAG,SAAS,IAAK;AAAA;AAAA;AAAA,MAE9C;AAAA,SArBe,SAAS,IAsBzB;AAAA,EAEF,CAAE,GACH;AAEF;AAaA,SAAS,aAAc;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,CAAE,QAAQ,SAAU,IAAI,SAAU,EAAG;AAC3C,QAAM,CAAE,OAAO,QAAS,IAAI,SAAU,WAAY;AAClD,QAAM,CAAE,aAAa,cAAe,IAAI,SAAU,WAAY;AAC9D,QAAM,kBAAkB,YAAa,WAAW,GAAI;AACpD,QAAM,EAAE,eAAe,kBAAkB,IAAI;AAAA,IAC5C,CAAE,WAAY;AACb,UAAK,CAAE,QAAS;AACf,eAAO,EAAE,eAAe,aAAa,mBAAmB,KAAK;AAAA,MAC9D;AACA,YAAM,EAAE,kBAAkB,sBAAsB,IAC/C,OAAQ,SAAU;AAInB,YAAM,kBAAkB,CAAE,GAAG,SAAS,GAAG,eAAgB;AAEzD,YAAM,eAAe;AAAA,QACpB;AAAA,QACA,SAAS;AAAA,QACT;AAAA,UACC,GAAG;AAAA,UACH;AAAA,UACA,SAAS;AAAA,UACT,SAAS;AAAA,UACT,UAAU;AAAA,QACX;AAAA,MACD;AACA,aAAO;AAAA,QACN,eAAe,iBAAkB,GAAG,YAAa;AAAA,QACjD,mBAAmB;AAAA,UAClB;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAE,QAAQ,SAAS,MAAM,SAAS,eAAgB;AAAA,EACnD;AAIA,QAAM,gBAAgB;AAAA,IACrB,CAAE,WAAY;AACb,UAAK,CAAE,SAAS,QAAS;AACxB,eAAO;AAAA,MACR;AACA,YAAM,EAAE,iBAAiB,IAAI,OAAQ,SAAU;AAC/C,aAAO,iBAAkB,YAAY,SAAS,MAAM;AAAA,QACnD,GAAG;AAAA,QACH,SAAS;AAAA,QACT,UAAU,QAAQ;AAAA,MACnB,CAAE;AAAA,IACH;AAAA,IACA,CAAE,SAAS,MAAM,OAAQ;AAAA,EAC1B;AAGA,YAAW,MAAM;AAChB,QAAK,CAAE,SAAS,QAAS;AACxB,eAAU,WAAY;AAAA,IACvB;AACA,QAAK,CAAE,eAAe,QAAS;AAC9B;AAAA,IACD;AAGA,UAAM,iBAAiB,QAAQ,OAAQ,CAAE,aAAa,OAAQ;AAC7D,YAAM,SAAS,cAAc,KAAM,CAAE,SAAU,KAAK,OAAO,EAAG;AAC9D,UAAK,QAAS;AACb,oBAAY,KAAM;AAAA,UACjB;AAAA,UACA,OAAO,OAAO;AAAA,QACf,CAAE;AAAA,MACH;AACA,aAAO;AAAA,IACR,GAAG,CAAC,CAAE;AACN,aAAU,cAAe;AAAA,EAC1B,GAAG,CAAE,SAAS,aAAc,CAAE;AAE9B,YAAW,MAAM;AAChB,QAAK,CAAE,mBAAoB;AAC1B;AAAA,IACD;AACA,mBAAgB,cAAc,IAAK,CAAE,WAAY,OAAO,IAAK,CAAE;AAAA,EAChE,GAAG,CAAE,eAAe,iBAAkB,CAAE;AACxC,QAAM,gBAAgB,CAAE,kBAAmB;AAC1C,UAAM,aAAa,oBAAI,IAAI;AAC3B,eAAY,aAAa,eAAgB;AACxC,YAAM,SAAS,qBAAsB,eAAe,SAAU;AAC9D,UAAK,QAAS;AACb,mBAAW,IAAK,MAAO;AAAA,MACxB;AAAA,IACD;AACA,mBAAgB,WAAY;AAC5B,aAAU,MAAM,KAAM,UAAW,CAAE;AAAA,EACpC;AACA,SACC,oBAAC,SAAI,WAAU,mDACd;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAgB;AAAA,MAChB;AAAA,MACA,kBAAmB;AAAA,MACnB,UAAW;AAAA,MACX,MAAK;AAAA,MACL,uBAAqB;AAAA;AAAA,EACtB,GACD;AAEF;",
   "names": []
 }

package/build-module/site-logo/edit.mjs

@@ -41,7 +41,9 @@ import { unlock } from "../lock-unlock.mjs";
 import { useToolsPanelDropdownMenuProps } from "../utils/hooks.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ALLOWED_MEDIA_TYPES = ["image"];
-var { mediaEditKey } = unlock(blockEditorPrivateApis);
+var { mediaEditKey, openMediaEditorModalKey } = unlock(
+  blockEditorPrivateApis
+);
 var SiteLogo = ({
   alt,
   attributes: { align, width, height, isLink, linkTarget, shouldSyncIcon },
@@ -64,22 +66,26 @@ var SiteLogo = ({
   const dropdownMenuProps = useToolsPanelDropdownMenuProps();
   const blockEditingMode = useBlockEditingMode();
   const isContentOnlyMode = blockEditingMode === "contentOnly";
-  const { imageEditing, maxWidth, title, editMediaEntity } = useSelect(
-    (select) => {
-      const settings = select(blockEditorStore).getSettings();
-      const siteEntities = select(coreStore).getEntityRecord(
-        "root",
-        "__unstableBase"
-      );
-      return {
-        title: siteEntities?.name,
-        imageEditing: settings.imageEditing,
-        maxWidth: settings.maxWidth,
-        editMediaEntity: settings?.[mediaEditKey]
-      };
-    },
-    []
-  );
+  const {
+    imageEditing,
+    maxWidth,
+    title,
+    editMediaEntity,
+    openMediaEditorModal
+  } = useSelect((select) => {
+    const settings = select(blockEditorStore).getSettings();
+    const siteEntities = select(coreStore).getEntityRecord(
+      "root",
+      "__unstableBase"
+    );
+    return {
+      title: siteEntities?.name,
+      imageEditing: settings.imageEditing,
+      maxWidth: settings.maxWidth,
+      editMediaEntity: settings?.[mediaEditKey],
+      openMediaEditorModal: settings?.[openMediaEditorModalKey]
+    };
+  }, []);
   useEffect(() => {
     if (shouldSyncIcon && logoId !== iconId) {
       setAttributes({ shouldSyncIcon: false });
@@ -90,6 +96,11 @@ var SiteLogo = ({
       setIsEditingImage(false);
     }
   }, [isSelected]);
+  const handleMediaUpdate = ({ id: newId }) => {
+    if (typeof newId === "number" && newId !== logoId) {
+      setLogo(newId);
+    }
+  };
   function onResizeStart() {
     toggleSelection(false);
   }
@@ -326,7 +337,10 @@ var SiteLogo = ({
     canEditImage && !isEditingImage && shouldShowCropAndDimensions && /* @__PURE__ */ jsx(BlockControls, { group: "block", children: /* @__PURE__ */ jsx(
       ToolbarButton,
       {
-        onClick: () => setIsEditingImage(true),
+        onClick: openMediaEditorModal && logoId ? () => openMediaEditorModal({
+          id: logoId,
+          onUpdate: handleMediaUpdate
+        }) : () => setIsEditingImage(true),
         icon: crop,
         label: __("Crop")
       }

package/build-module/site-logo/edit.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/site-logo/edit.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { isBlobURL } from '@wordpress/blob';\nimport {\n\tcreateInterpolateElement,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\nimport { __, isRTL } from '@wordpress/i18n';\nimport {\n\tRangeControl,\n\tResizableBox,\n\tSpinner,\n\tToggleControl,\n\tToolbarButton,\n\tPlaceholder,\n\tButton,\n\tDropZone,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\tBlockControls,\n\tInspectorControls,\n\tMediaPlaceholder,\n\tMediaReplaceFlow,\n\tuseBlockProps,\n\tstore as blockEditorStore,\n\t__experimentalImageEditor as ImageEditor,\n\tuseBlockEditingMode,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { crop, upload } from '@wordpress/icons';\nimport { store as noticesStore } from '@wordpress/notices';\n\n/**\n * Internal dependencies\n */\nimport { MIN_SIZE } from '../image/constants';\nimport { MediaControl, MediaControlPreview } from '../utils/media-control';\nimport { unlock } from '../lock-unlock';\nimport { useToolsPanelDropdownMenuProps } from '../utils/hooks';\n\nconst ALLOWED_MEDIA_TYPES = [ 'image' ];\nconst { mediaEditKey } = unlock( blockEditorPrivateApis );\n\nconst SiteLogo = ( {\n\talt,\n\tattributes: { align, width, height, isLink, linkTarget, shouldSyncIcon },\n\tisSelected,\n\tsetAttributes,\n\tsetLogo,\n\tlogoUrl,\n\tsiteUrl,\n\tlogoId,\n\ticonId,\n\tsetIcon,\n\tcanUserEdit,\n} ) => {\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\tconst isWideAligned = [ 'wide', 'full' ].includes( align );\n\tconst isResizable = ! isWideAligned && isLargeViewport;\n\tconst [ { naturalWidth, naturalHeight }, setNaturalSize ] = useState( {} );\n\tconst [ isEditingImage, setIsEditingImage ] = useState( false );\n\tconst { toggleSelection } = useDispatch( blockEditorStore );\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\n\t// Check if we're in contentOnly mode\n\tconst blockEditingMode = useBlockEditingMode();\n\tconst isContentOnlyMode = blockEditingMode === 'contentOnly';\n\n\tconst { imageEditing, maxWidth, title, editMediaEntity } = useSelect(\n\t\t( select ) => {\n\t\t\tconst settings = select( blockEditorStore ).getSettings();\n\t\t\tconst siteEntities = select( coreStore ).getEntityRecord(\n\t\t\t\t'root',\n\t\t\t\t'__unstableBase'\n\t\t\t);\n\t\t\treturn {\n\t\t\t\ttitle: siteEntities?.name,\n\t\t\t\timageEditing: settings.imageEditing,\n\t\t\t\tmaxWidth: settings.maxWidth,\n\t\t\t\teditMediaEntity: settings?.[ mediaEditKey ],\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\tuseEffect( () => {\n\t\t// Turn the `Use as site icon` toggle off if it is on but the logo and icon have\n\t\t// fallen out of sync. This can happen if the toggle is saved in the `on` position,\n\t\t// but changes are later made to the site icon in the Customizer.\n\t\tif ( shouldSyncIcon && logoId !== iconId ) {\n\t\t\tsetAttributes( { shouldSyncIcon: false } );\n\t\t}\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tif ( ! isSelected ) {\n\t\t\tsetIsEditingImage( false );\n\t\t}\n\t}, [ isSelected ] );\n\n\tfunction onResizeStart() {\n\t\ttoggleSelection( false );\n\t}\n\n\tfunction onResizeStop() {\n\t\ttoggleSelection( true );\n\t}\n\n\tconst img = (\n\t\t<>\n\t\t\t<img\n\t\t\t\tclassName=\"custom-logo\"\n\t\t\t\tsrc={ logoUrl }\n\t\t\t\talt={ alt }\n\t\t\t\tonLoad={ ( event ) => {\n\t\t\t\t\tsetNaturalSize( {\n\t\t\t\t\t\tnaturalWidth: event.target.naturalWidth,\n\t\t\t\t\t\tnaturalHeight: event.target.naturalHeight,\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ isBlobURL( logoUrl ) && <Spinner /> }\n\t\t</>\n\t);\n\n\tlet imgWrapper = img;\n\tif ( isLink ) {\n\t\timgWrapper = (\n\t\t\t<a\n\t\t\t\thref={ siteUrl }\n\t\t\t\tclassName=\"custom-logo-link\"\n\t\t\t\trel=\"home\"\n\t\t\t\ttitle={ title }\n\t\t\t\tonClick={ ( event ) => event.preventDefault() }\n\t\t\t>\n\t\t\t\t{ img }\n\t\t\t</a>\n\t\t);\n\t}\n\n\tif ( ! isResizable || ! naturalWidth || ! naturalHeight ) {\n\t\treturn <div style={ { width, height } }>{ imgWrapper }</div>;\n\t}\n\n\t// Set the default width to a responsible size.\n\t// Note that this width is also set in the attached frontend CSS file.\n\tconst defaultWidth = 120;\n\n\tconst currentWidth = width || defaultWidth;\n\tconst ratio = naturalWidth / naturalHeight;\n\tconst currentHeight = currentWidth / ratio;\n\tconst minWidth =\n\t\tnaturalWidth < naturalHeight ? MIN_SIZE : Math.ceil( MIN_SIZE * ratio );\n\tconst minHeight =\n\t\tnaturalHeight < naturalWidth ? MIN_SIZE : Math.ceil( MIN_SIZE / ratio );\n\n\t// With the current implementation of ResizableBox, an image needs an\n\t// explicit pixel value for the max-width. In absence of being able to\n\t// set the content-width, this max-width is currently dictated by the\n\t// vanilla editor style. The following variable adds a buffer to this\n\t// vanilla style, so 3rd party themes have some wiggleroom. This does,\n\t// in most cases, allow you to scale the image beyond the width of the\n\t// main column, though not infinitely.\n\t// @todo It would be good to revisit this once a content-width variable\n\t// becomes available.\n\tconst maxWidthBuffer = maxWidth * 2.5;\n\n\tlet showRightHandle = false;\n\tlet showLeftHandle = false;\n\n\t/* eslint-disable no-lonely-if */\n\t// See https://github.com/WordPress/gutenberg/issues/7584.\n\tif ( align === 'center' ) {\n\t\t// When the image is centered, show both handles.\n\t\tshowRightHandle = true;\n\t\tshowLeftHandle = true;\n\t} else if ( isRTL() ) {\n\t\t// In RTL mode the image is on the right by default.\n\t\t// Show the right handle and hide the left handle only when it is\n\t\t// aligned left. Otherwise always show the left handle.\n\t\tif ( align === 'left' ) {\n\t\t\tshowRightHandle = true;\n\t\t} else {\n\t\t\tshowLeftHandle = true;\n\t\t}\n\t} else {\n\t\t// Show the left handle and hide the right handle only when the\n\t\t// image is aligned right. Otherwise always show the right handle.\n\t\tif ( align === 'right' ) {\n\t\t\tshowLeftHandle = true;\n\t\t} else {\n\t\t\tshowRightHandle = true;\n\t\t}\n\t}\n\t/* eslint-enable no-lonely-if */\n\n\tconst canEditImage =\n\t\tlogoId &&\n\t\tnaturalWidth &&\n\t\tnaturalHeight &&\n\t\timageEditing &&\n\t\t!! editMediaEntity;\n\n\t// Hide crop and dimensions editing in write mode\n\tconst shouldShowCropAndDimensions = ! isContentOnlyMode;\n\n\tlet imgEdit;\n\tif ( canEditImage && isEditingImage ) {\n\t\timgEdit = (\n\t\t\t<ImageEditor\n\t\t\t\tid={ logoId }\n\t\t\t\turl={ logoUrl }\n\t\t\t\twidth={ currentWidth }\n\t\t\t\theight={ currentHeight }\n\t\t\t\tnaturalHeight={ naturalHeight }\n\t\t\t\tnaturalWidth={ naturalWidth }\n\t\t\t\tonSaveImage={ ( imageAttributes ) => {\n\t\t\t\t\tsetLogo( imageAttributes.id );\n\t\t\t\t} }\n\t\t\t\tonFinishEditing={ () => {\n\t\t\t\t\tsetIsEditingImage( false );\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t} else {\n\t\t// Always render ResizableBox but disable resize functionality in contentOnly mode\n\t\timgEdit = (\n\t\t\t<ResizableBox\n\t\t\t\tsize={ {\n\t\t\t\t\twidth: currentWidth,\n\t\t\t\t\theight: currentHeight,\n\t\t\t\t} }\n\t\t\t\tshowHandle={ isSelected && shouldShowCropAndDimensions }\n\t\t\t\tminWidth={ minWidth }\n\t\t\t\tmaxWidth={ maxWidthBuffer }\n\t\t\t\tminHeight={ minHeight }\n\t\t\t\tmaxHeight={ maxWidthBuffer / ratio }\n\t\t\t\tlockAspectRatio\n\t\t\t\tenable={ {\n\t\t\t\t\ttop: false,\n\t\t\t\t\tright: showRightHandle,\n\t\t\t\t\tbottom: true,\n\t\t\t\t\tleft: showLeftHandle,\n\t\t\t\t} }\n\t\t\t\tonResizeStart={ onResizeStart }\n\t\t\t\tonResizeStop={ ( event, direction, elt, delta ) => {\n\t\t\t\t\tonResizeStop();\n\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\twidth: parseInt( currentWidth + delta.width, 10 ),\n\t\t\t\t\t\theight: parseInt( currentHeight + delta.height, 10 ),\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ imgWrapper }\n\t\t\t</ResizableBox>\n\t\t);\n\t}\n\n\t// Support the previous location for the Site Icon settings. To be removed\n\t// when the required WP core version for Gutenberg is >= 6.5.0.\n\tconst shouldUseNewUrl = ! window?.__experimentalUseCustomizerSiteLogoUrl;\n\n\tconst siteIconSettingsUrl = shouldUseNewUrl\n\t\t? siteUrl + '/wp-admin/options-general.php'\n\t\t: siteUrl + '/wp-admin/customize.php?autofocus[section]=title_tagline';\n\n\tconst syncSiteIconHelpText = createInterpolateElement(\n\t\t__(\n\t\t\t'Site Icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. To use a custom icon that is different from your site logo, use the <a>Site Icon settings</a>.'\n\t\t),\n\t\t{\n\t\t\ta: (\n\t\t\t\t// eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-no-target-blank\n\t\t\t\t<a\n\t\t\t\t\thref={ siteIconSettingsUrl }\n\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener\"\n\t\t\t\t/>\n\t\t\t),\n\t\t}\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<InspectorControls>\n\t\t\t\t<ToolsPanel\n\t\t\t\t\tlabel={ __( 'Settings' ) }\n\t\t\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t\t\t>\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\thasValue={ () => !! width }\n\t\t\t\t\t\tlabel={ __( 'Image width' ) }\n\t\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\t\tsetAttributes( { width: undefined } )\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tlabel={ __( 'Image width' ) }\n\t\t\t\t\t\t\tonChange={ ( newWidth ) =>\n\t\t\t\t\t\t\t\tsetAttributes( { width: newWidth } )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tmin={ minWidth }\n\t\t\t\t\t\t\tmax={ maxWidthBuffer }\n\t\t\t\t\t\t\tinitialPosition={ Math.min(\n\t\t\t\t\t\t\t\tdefaultWidth,\n\t\t\t\t\t\t\t\tmaxWidthBuffer\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tvalue={ width || '' }\n\t\t\t\t\t\t\tdisabled={ ! isResizable }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\thasValue={ () => ! isLink }\n\t\t\t\t\t\tlabel={ __( 'Link image to home' ) }\n\t\t\t\t\t\tonDeselect={ () => setAttributes( { isLink: true } ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\tlabel={ __( 'Link image to home' ) }\n\t\t\t\t\t\t\tonChange={ () =>\n\t\t\t\t\t\t\t\tsetAttributes( { isLink: ! isLink } )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tchecked={ isLink }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\n\t\t\t\t\t{ isLink && (\n\t\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\t\thasValue={ () => linkTarget === '_blank' }\n\t\t\t\t\t\t\tlabel={ __( 'Open in new tab' ) }\n\t\t\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\t\t\tsetAttributes( { linkTarget: '_self' } )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Open in new tab' ) }\n\t\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\tlinkTarget: value ? '_blank' : '_self',\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\tchecked={ linkTarget === '_blank' }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ canUserEdit && (\n\t\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\t\thasValue={ () => !! shouldSyncIcon }\n\t\t\t\t\t\t\tlabel={ __( 'Use as Site Icon' ) }\n\t\t\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\t\t\tsetAttributes( { shouldSyncIcon: false } );\n\t\t\t\t\t\t\t\tsetIcon( undefined );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Use as Site Icon' ) }\n\t\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\t\tsetAttributes( { shouldSyncIcon: value } );\n\t\t\t\t\t\t\t\t\tsetIcon( value ? logoId : undefined );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tchecked={ !! shouldSyncIcon }\n\t\t\t\t\t\t\t\thelp={ syncSiteIconHelpText }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t) }\n\t\t\t\t</ToolsPanel>\n\t\t\t</InspectorControls>\n\t\t\t{ canEditImage &&\n\t\t\t\t! isEditingImage &&\n\t\t\t\tshouldShowCropAndDimensions && (\n\t\t\t\t\t<BlockControls group=\"block\">\n\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\tonClick={ () => setIsEditingImage( true ) }\n\t\t\t\t\t\t\ticon={ crop }\n\t\t\t\t\t\t\tlabel={ __( 'Crop' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</BlockControls>\n\t\t\t\t) }\n\t\t\t{ imgEdit }\n\t\t</>\n\t);\n};\n\nexport default function LogoEdit( {\n\tattributes,\n\tclassName,\n\tsetAttributes,\n\tisSelected,\n} ) {\n\tconst { width, shouldSyncIcon } = attributes;\n\tconst {\n\t\tsiteLogoId,\n\t\tcanUserEdit,\n\t\turl,\n\t\tsiteIconId,\n\t\tmediaItemData,\n\t\tisRequestingMediaItem,\n\t} = useSelect( ( select ) => {\n\t\tconst { canUser, getEntityRecord, getEditedEntityRecord } =\n\t\t\tselect( coreStore );\n\t\tconst _canUserEdit = canUser( 'update', {\n\t\t\tkind: 'root',\n\t\t\tname: 'site',\n\t\t} );\n\t\tconst siteSettings = _canUserEdit\n\t\t\t? getEditedEntityRecord( 'root', 'site' )\n\t\t\t: undefined;\n\t\tconst siteData = getEntityRecord( 'root', '__unstableBase' );\n\t\tconst _siteLogoId = _canUserEdit\n\t\t\t? siteSettings?.site_logo\n\t\t\t: siteData?.site_logo;\n\t\tconst _siteIconId = siteSettings?.site_icon;\n\t\tconst mediaItem =\n\t\t\t_siteLogoId &&\n\t\t\tselect( coreStore ).getEntityRecord(\n\t\t\t\t'postType',\n\t\t\t\t'attachment',\n\t\t\t\t_siteLogoId,\n\t\t\t\t{\n\t\t\t\t\tcontext: 'view',\n\t\t\t\t}\n\t\t\t);\n\t\tconst _isRequestingMediaItem =\n\t\t\t!! _siteLogoId &&\n\t\t\t! select( coreStore ).hasFinishedResolution( 'getEntityRecord', [\n\t\t\t\t'postType',\n\t\t\t\t'attachment',\n\t\t\t\t_siteLogoId,\n\t\t\t\t{ context: 'view' },\n\t\t\t] );\n\n\t\treturn {\n\t\t\tsiteLogoId: _siteLogoId,\n\t\t\tcanUserEdit: _canUserEdit,\n\t\t\turl: siteData?.home,\n\t\t\tmediaItemData: mediaItem,\n\t\t\tisRequestingMediaItem: _isRequestingMediaItem,\n\t\t\tsiteIconId: _siteIconId,\n\t\t};\n\t}, [] );\n\tconst { getSettings } = useSelect( blockEditorStore );\n\tconst [ temporaryURL, setTemporaryURL ] = useState();\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\n\tconst { editEntityRecord } = useDispatch( coreStore );\n\n\tconst setLogo = ( newValue, shouldForceSync = false ) => {\n\t\t// `shouldForceSync` is used to force syncing when the attribute\n\t\t// may not have updated yet.\n\t\tif ( shouldSyncIcon || shouldForceSync ) {\n\t\t\tsetIcon( newValue );\n\t\t}\n\n\t\teditEntityRecord( 'root', 'site', undefined, {\n\t\t\tsite_logo: newValue,\n\t\t} );\n\t};\n\n\tconst setIcon = ( newValue ) =>\n\t\t// The new value needs to be `null` to reset the Site Icon.\n\t\teditEntityRecord( 'root', 'site', undefined, {\n\t\t\tsite_icon: newValue ?? null,\n\t\t} );\n\n\tconst { alt_text: alt, source_url: logoUrl } = mediaItemData ?? {};\n\n\tconst onInitialSelectLogo = ( media ) => {\n\t\t// Initialize the syncSiteIcon toggle. If we currently have no Site logo and no\n\t\t// site icon, automatically sync the logo to the icon.\n\t\tif ( shouldSyncIcon === undefined ) {\n\t\t\tconst shouldForceSync = ! siteIconId;\n\t\t\tsetAttributes( { shouldSyncIcon: shouldForceSync } );\n\n\t\t\t// Because we cannot rely on the `shouldSyncIcon` attribute to have updated by\n\t\t\t// the time `setLogo` is called, pass an argument to force the syncing.\n\t\t\tonSelectLogo( media, shouldForceSync );\n\t\t\treturn;\n\t\t}\n\n\t\tonSelectLogo( media );\n\t};\n\n\tconst onSelectLogo = ( media, shouldForceSync = false ) => {\n\t\tif ( ! media ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( ! media.id && media.url ) {\n\t\t\t// This is a temporary blob image.\n\t\t\tsetTemporaryURL( media.url );\n\t\t\tsetLogo( undefined );\n\t\t\treturn;\n\t\t}\n\n\t\tsetLogo( media.id, shouldForceSync );\n\t};\n\n\tconst onRemoveLogo = () => {\n\t\tsetLogo( null );\n\t\tsetAttributes( { width: undefined } );\n\t};\n\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\tconst onUploadError = ( message ) => {\n\t\tcreateErrorNotice( message, { type: 'snackbar' } );\n\t\tsetTemporaryURL();\n\t};\n\n\tconst onFilesDrop = ( filesList ) => {\n\t\tgetSettings().mediaUpload( {\n\t\t\tallowedTypes: ALLOWED_MEDIA_TYPES,\n\t\t\tfilesList,\n\t\t\tonFileChange( [ image ] ) {\n\t\t\t\tif ( isBlobURL( image?.url ) ) {\n\t\t\t\t\tsetTemporaryURL( image.url );\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tonInitialSelectLogo( image );\n\t\t\t},\n\t\t\tonError: onUploadError,\n\t\t\tmultiple: false,\n\t\t} );\n\t};\n\n\tconst mediaReplaceFlowProps = {\n\t\tmediaURL: logoUrl,\n\t\tname: ! logoUrl ? __( 'Choose logo' ) : __( 'Replace' ),\n\t\tonSelect: onSelectLogo,\n\t\tonError: onUploadError,\n\t\tonReset: onRemoveLogo,\n\t};\n\tconst controls = canUserEdit && (\n\t\t<BlockControls group=\"other\">\n\t\t\t<MediaReplaceFlow\n\t\t\t\t{ ...mediaReplaceFlowProps }\n\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\tvariant=\"toolbar\"\n\t\t\t/>\n\t\t</BlockControls>\n\t);\n\n\tlet logoImage;\n\tconst isLoading = siteLogoId === undefined || isRequestingMediaItem;\n\tif ( isLoading ) {\n\t\tlogoImage = <Spinner />;\n\t}\n\n\t// Reset temporary url when logoUrl is available.\n\tuseEffect( () => {\n\t\tif ( logoUrl && temporaryURL ) {\n\t\t\tsetTemporaryURL();\n\t\t}\n\t}, [ logoUrl, temporaryURL ] );\n\n\tif ( !! logoUrl || !! temporaryURL ) {\n\t\tlogoImage = (\n\t\t\t<>\n\t\t\t\t<SiteLogo\n\t\t\t\t\talt={ alt }\n\t\t\t\t\tattributes={ attributes }\n\t\t\t\t\tclassName={ className }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t\t\tlogoUrl={ temporaryURL || logoUrl }\n\t\t\t\t\tsetLogo={ setLogo }\n\t\t\t\t\tlogoId={ mediaItemData?.id || siteLogoId }\n\t\t\t\t\tsiteUrl={ url }\n\t\t\t\t\tsetIcon={ setIcon }\n\t\t\t\t\ticonId={ siteIconId }\n\t\t\t\t\tcanUserEdit={ canUserEdit }\n\t\t\t\t/>\n\t\t\t\t{ canUserEdit && <DropZone onFilesDrop={ onFilesDrop } /> }\n\t\t\t</>\n\t\t);\n\t}\n\tconst placeholder = ( content ) => {\n\t\tconst placeholderClassName = clsx(\n\t\t\t'block-editor-media-placeholder',\n\t\t\tclassName\n\t\t);\n\n\t\treturn (\n\t\t\t<Placeholder\n\t\t\t\tclassName={ placeholderClassName }\n\t\t\t\tpreview={ logoImage }\n\t\t\t\twithIllustration\n\t\t\t\tstyle={ {\n\t\t\t\t\twidth,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ content }\n\t\t\t</Placeholder>\n\t\t);\n\t};\n\n\tconst classes = clsx( className, {\n\t\t'is-default-size': ! width,\n\t\t'is-transient': temporaryURL,\n\t} );\n\n\tconst blockProps = useBlockProps( { className: classes } );\n\n\tconst mediaInspectorPanel = ( canUserEdit || logoUrl ) && (\n\t\t<InspectorControls>\n\t\t\t<ToolsPanel\n\t\t\t\tlabel={ __( 'Media' ) }\n\t\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t\t>\n\t\t\t\t{ ! canUserEdit ? (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"block-library-site-logo__inspector-media-replace-container\"\n\t\t\t\t\t\tstyle={ { gridColumn: '1 / -1' } }\n\t\t\t\t\t>\n\t\t\t\t\t\t<MediaControlPreview\n\t\t\t\t\t\t\turl={ mediaItemData?.source_url }\n\t\t\t\t\t\t\tfilename={\n\t\t\t\t\t\t\t\tmediaItemData?.media_details?.sizes?.full\n\t\t\t\t\t\t\t\t\t?.file || mediaItemData?.slug\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\titemGroupProps={ {\n\t\t\t\t\t\t\t\tisBordered: true,\n\t\t\t\t\t\t\t\tclassName:\n\t\t\t\t\t\t\t\t\t'block-library-site-logo__inspector-readonly-logo-preview',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tclassName=\"block-library-site-logo__inspector-media-replace-title\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => !! logoUrl }\n\t\t\t\t\t\tlabel={ __( 'Logo' ) }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t>\n\t\t\t\t\t\t<MediaControl\n\t\t\t\t\t\t\tmediaId={ siteLogoId }\n\t\t\t\t\t\t\tmediaUrl={ logoUrl }\n\t\t\t\t\t\t\tfilename={\n\t\t\t\t\t\t\t\tmediaItemData?.media_details?.sizes?.full\n\t\t\t\t\t\t\t\t\t?.file || mediaItemData?.slug\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\t\t\t\tonSelect={ onSelectLogo }\n\t\t\t\t\t\t\tonError={ onUploadError }\n\t\t\t\t\t\t\tonReset={ onRemoveLogo }\n\t\t\t\t\t\t\tisUploading={ !! temporaryURL }\n\t\t\t\t\t\t\temptyLabel={ __( 'Logo' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t) }\n\t\t\t</ToolsPanel>\n\t\t</InspectorControls>\n\t);\n\n\treturn (\n\t\t<div { ...blockProps }>\n\t\t\t{ controls }\n\t\t\t{ mediaInspectorPanel }\n\t\t\t{ ( !! logoUrl || !! temporaryURL ) && logoImage }\n\t\t\t{ ( isLoading ||\n\t\t\t\t( ! temporaryURL && ! logoUrl && ! canUserEdit ) ) && (\n\t\t\t\t<Placeholder className=\"site-logo_placeholder\" withIllustration>\n\t\t\t\t\t{ isLoading && (\n\t\t\t\t\t\t<span className=\"components-placeholder__preview\">\n\t\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) }\n\t\t\t\t</Placeholder>\n\t\t\t) }\n\t\t\t{ ! isLoading && ! temporaryURL && ! logoUrl && canUserEdit && (\n\t\t\t\t<MediaPlaceholder\n\t\t\t\t\tonSelect={ onInitialSelectLogo }\n\t\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\t\tonError={ onUploadError }\n\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\tmediaLibraryButton={ ( { open } ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\ticon={ upload }\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Choose logo' ) }\n\t\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\t\ttooltipPosition=\"middle right\"\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\topen();\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\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { isBlobURL } from '@wordpress/blob';\nimport {\n\tcreateInterpolateElement,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\nimport { __, isRTL } from '@wordpress/i18n';\nimport {\n\tRangeControl,\n\tResizableBox,\n\tSpinner,\n\tToggleControl,\n\tToolbarButton,\n\tPlaceholder,\n\tButton,\n\tDropZone,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\tBlockControls,\n\tInspectorControls,\n\tMediaPlaceholder,\n\tMediaReplaceFlow,\n\tuseBlockProps,\n\tstore as blockEditorStore,\n\t__experimentalImageEditor as ImageEditor,\n\tuseBlockEditingMode,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { crop, upload } from '@wordpress/icons';\nimport { store as noticesStore } from '@wordpress/notices';\n\n/**\n * Internal dependencies\n */\nimport { MIN_SIZE } from '../image/constants';\nimport { MediaControl, MediaControlPreview } from '../utils/media-control';\nimport { unlock } from '../lock-unlock';\nimport { useToolsPanelDropdownMenuProps } from '../utils/hooks';\n\nconst ALLOWED_MEDIA_TYPES = [ 'image' ];\nconst { mediaEditKey, openMediaEditorModalKey } = unlock(\n\tblockEditorPrivateApis\n);\n\nconst SiteLogo = ( {\n\talt,\n\tattributes: { align, width, height, isLink, linkTarget, shouldSyncIcon },\n\tisSelected,\n\tsetAttributes,\n\tsetLogo,\n\tlogoUrl,\n\tsiteUrl,\n\tlogoId,\n\ticonId,\n\tsetIcon,\n\tcanUserEdit,\n} ) => {\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\tconst isWideAligned = [ 'wide', 'full' ].includes( align );\n\tconst isResizable = ! isWideAligned && isLargeViewport;\n\tconst [ { naturalWidth, naturalHeight }, setNaturalSize ] = useState( {} );\n\tconst [ isEditingImage, setIsEditingImage ] = useState( false );\n\tconst { toggleSelection } = useDispatch( blockEditorStore );\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\n\t// Check if we're in contentOnly mode\n\tconst blockEditingMode = useBlockEditingMode();\n\tconst isContentOnlyMode = blockEditingMode === 'contentOnly';\n\n\tconst {\n\t\timageEditing,\n\t\tmaxWidth,\n\t\ttitle,\n\t\teditMediaEntity,\n\t\topenMediaEditorModal,\n\t} = useSelect( ( select ) => {\n\t\tconst settings = select( blockEditorStore ).getSettings();\n\t\tconst siteEntities = select( coreStore ).getEntityRecord(\n\t\t\t'root',\n\t\t\t'__unstableBase'\n\t\t);\n\t\treturn {\n\t\t\ttitle: siteEntities?.name,\n\t\t\timageEditing: settings.imageEditing,\n\t\t\tmaxWidth: settings.maxWidth,\n\t\t\teditMediaEntity: settings?.[ mediaEditKey ],\n\t\t\topenMediaEditorModal: settings?.[ openMediaEditorModalKey ],\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\t// Turn the `Use as site icon` toggle off if it is on but the logo and icon have\n\t\t// fallen out of sync. This can happen if the toggle is saved in the `on` position,\n\t\t// but changes are later made to the site icon in the Customizer.\n\t\tif ( shouldSyncIcon && logoId !== iconId ) {\n\t\t\tsetAttributes( { shouldSyncIcon: false } );\n\t\t}\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tif ( ! isSelected ) {\n\t\t\tsetIsEditingImage( false );\n\t\t}\n\t}, [ isSelected ] );\n\n\tconst handleMediaUpdate = ( { id: newId } ) => {\n\t\tif ( typeof newId === 'number' && newId !== logoId ) {\n\t\t\tsetLogo( newId );\n\t\t}\n\t};\n\n\tfunction onResizeStart() {\n\t\ttoggleSelection( false );\n\t}\n\n\tfunction onResizeStop() {\n\t\ttoggleSelection( true );\n\t}\n\n\tconst img = (\n\t\t<>\n\t\t\t<img\n\t\t\t\tclassName=\"custom-logo\"\n\t\t\t\tsrc={ logoUrl }\n\t\t\t\talt={ alt }\n\t\t\t\tonLoad={ ( event ) => {\n\t\t\t\t\tsetNaturalSize( {\n\t\t\t\t\t\tnaturalWidth: event.target.naturalWidth,\n\t\t\t\t\t\tnaturalHeight: event.target.naturalHeight,\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ isBlobURL( logoUrl ) && <Spinner /> }\n\t\t</>\n\t);\n\n\tlet imgWrapper = img;\n\tif ( isLink ) {\n\t\timgWrapper = (\n\t\t\t<a\n\t\t\t\thref={ siteUrl }\n\t\t\t\tclassName=\"custom-logo-link\"\n\t\t\t\trel=\"home\"\n\t\t\t\ttitle={ title }\n\t\t\t\tonClick={ ( event ) => event.preventDefault() }\n\t\t\t>\n\t\t\t\t{ img }\n\t\t\t</a>\n\t\t);\n\t}\n\n\tif ( ! isResizable || ! naturalWidth || ! naturalHeight ) {\n\t\treturn <div style={ { width, height } }>{ imgWrapper }</div>;\n\t}\n\n\t// Set the default width to a responsible size.\n\t// Note that this width is also set in the attached frontend CSS file.\n\tconst defaultWidth = 120;\n\n\tconst currentWidth = width || defaultWidth;\n\tconst ratio = naturalWidth / naturalHeight;\n\tconst currentHeight = currentWidth / ratio;\n\tconst minWidth =\n\t\tnaturalWidth < naturalHeight ? MIN_SIZE : Math.ceil( MIN_SIZE * ratio );\n\tconst minHeight =\n\t\tnaturalHeight < naturalWidth ? MIN_SIZE : Math.ceil( MIN_SIZE / ratio );\n\n\t// With the current implementation of ResizableBox, an image needs an\n\t// explicit pixel value for the max-width. In absence of being able to\n\t// set the content-width, this max-width is currently dictated by the\n\t// vanilla editor style. The following variable adds a buffer to this\n\t// vanilla style, so 3rd party themes have some wiggleroom. This does,\n\t// in most cases, allow you to scale the image beyond the width of the\n\t// main column, though not infinitely.\n\t// @todo It would be good to revisit this once a content-width variable\n\t// becomes available.\n\tconst maxWidthBuffer = maxWidth * 2.5;\n\n\tlet showRightHandle = false;\n\tlet showLeftHandle = false;\n\n\t/* eslint-disable no-lonely-if */\n\t// See https://github.com/WordPress/gutenberg/issues/7584.\n\tif ( align === 'center' ) {\n\t\t// When the image is centered, show both handles.\n\t\tshowRightHandle = true;\n\t\tshowLeftHandle = true;\n\t} else if ( isRTL() ) {\n\t\t// In RTL mode the image is on the right by default.\n\t\t// Show the right handle and hide the left handle only when it is\n\t\t// aligned left. Otherwise always show the left handle.\n\t\tif ( align === 'left' ) {\n\t\t\tshowRightHandle = true;\n\t\t} else {\n\t\t\tshowLeftHandle = true;\n\t\t}\n\t} else {\n\t\t// Show the left handle and hide the right handle only when the\n\t\t// image is aligned right. Otherwise always show the right handle.\n\t\tif ( align === 'right' ) {\n\t\t\tshowLeftHandle = true;\n\t\t} else {\n\t\t\tshowRightHandle = true;\n\t\t}\n\t}\n\t/* eslint-enable no-lonely-if */\n\n\tconst canEditImage =\n\t\tlogoId &&\n\t\tnaturalWidth &&\n\t\tnaturalHeight &&\n\t\timageEditing &&\n\t\t!! editMediaEntity;\n\n\t// Hide crop and dimensions editing in write mode\n\tconst shouldShowCropAndDimensions = ! isContentOnlyMode;\n\n\tlet imgEdit;\n\tif ( canEditImage && isEditingImage ) {\n\t\timgEdit = (\n\t\t\t<ImageEditor\n\t\t\t\tid={ logoId }\n\t\t\t\turl={ logoUrl }\n\t\t\t\twidth={ currentWidth }\n\t\t\t\theight={ currentHeight }\n\t\t\t\tnaturalHeight={ naturalHeight }\n\t\t\t\tnaturalWidth={ naturalWidth }\n\t\t\t\tonSaveImage={ ( imageAttributes ) => {\n\t\t\t\t\tsetLogo( imageAttributes.id );\n\t\t\t\t} }\n\t\t\t\tonFinishEditing={ () => {\n\t\t\t\t\tsetIsEditingImage( false );\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t} else {\n\t\t// Always render ResizableBox but disable resize functionality in contentOnly mode\n\t\timgEdit = (\n\t\t\t<ResizableBox\n\t\t\t\tsize={ {\n\t\t\t\t\twidth: currentWidth,\n\t\t\t\t\theight: currentHeight,\n\t\t\t\t} }\n\t\t\t\tshowHandle={ isSelected && shouldShowCropAndDimensions }\n\t\t\t\tminWidth={ minWidth }\n\t\t\t\tmaxWidth={ maxWidthBuffer }\n\t\t\t\tminHeight={ minHeight }\n\t\t\t\tmaxHeight={ maxWidthBuffer / ratio }\n\t\t\t\tlockAspectRatio\n\t\t\t\tenable={ {\n\t\t\t\t\ttop: false,\n\t\t\t\t\tright: showRightHandle,\n\t\t\t\t\tbottom: true,\n\t\t\t\t\tleft: showLeftHandle,\n\t\t\t\t} }\n\t\t\t\tonResizeStart={ onResizeStart }\n\t\t\t\tonResizeStop={ ( event, direction, elt, delta ) => {\n\t\t\t\t\tonResizeStop();\n\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\twidth: parseInt( currentWidth + delta.width, 10 ),\n\t\t\t\t\t\theight: parseInt( currentHeight + delta.height, 10 ),\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ imgWrapper }\n\t\t\t</ResizableBox>\n\t\t);\n\t}\n\n\t// Support the previous location for the Site Icon settings. To be removed\n\t// when the required WP core version for Gutenberg is >= 6.5.0.\n\tconst shouldUseNewUrl = ! window?.__experimentalUseCustomizerSiteLogoUrl;\n\n\tconst siteIconSettingsUrl = shouldUseNewUrl\n\t\t? siteUrl + '/wp-admin/options-general.php'\n\t\t: siteUrl + '/wp-admin/customize.php?autofocus[section]=title_tagline';\n\n\tconst syncSiteIconHelpText = createInterpolateElement(\n\t\t__(\n\t\t\t'Site Icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. To use a custom icon that is different from your site logo, use the <a>Site Icon settings</a>.'\n\t\t),\n\t\t{\n\t\t\ta: (\n\t\t\t\t// eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-no-target-blank\n\t\t\t\t<a\n\t\t\t\t\thref={ siteIconSettingsUrl }\n\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener\"\n\t\t\t\t/>\n\t\t\t),\n\t\t}\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<InspectorControls>\n\t\t\t\t<ToolsPanel\n\t\t\t\t\tlabel={ __( 'Settings' ) }\n\t\t\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t\t\t>\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\thasValue={ () => !! width }\n\t\t\t\t\t\tlabel={ __( 'Image width' ) }\n\t\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\t\tsetAttributes( { width: undefined } )\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tlabel={ __( 'Image width' ) }\n\t\t\t\t\t\t\tonChange={ ( newWidth ) =>\n\t\t\t\t\t\t\t\tsetAttributes( { width: newWidth } )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tmin={ minWidth }\n\t\t\t\t\t\t\tmax={ maxWidthBuffer }\n\t\t\t\t\t\t\tinitialPosition={ Math.min(\n\t\t\t\t\t\t\t\tdefaultWidth,\n\t\t\t\t\t\t\t\tmaxWidthBuffer\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tvalue={ width || '' }\n\t\t\t\t\t\t\tdisabled={ ! isResizable }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\thasValue={ () => ! isLink }\n\t\t\t\t\t\tlabel={ __( 'Link image to home' ) }\n\t\t\t\t\t\tonDeselect={ () => setAttributes( { isLink: true } ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\tlabel={ __( 'Link image to home' ) }\n\t\t\t\t\t\t\tonChange={ () =>\n\t\t\t\t\t\t\t\tsetAttributes( { isLink: ! isLink } )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tchecked={ isLink }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\n\t\t\t\t\t{ isLink && (\n\t\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\t\thasValue={ () => linkTarget === '_blank' }\n\t\t\t\t\t\t\tlabel={ __( 'Open in new tab' ) }\n\t\t\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\t\t\tsetAttributes( { linkTarget: '_self' } )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Open in new tab' ) }\n\t\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\tlinkTarget: value ? '_blank' : '_self',\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\tchecked={ linkTarget === '_blank' }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ canUserEdit && (\n\t\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\t\thasValue={ () => !! shouldSyncIcon }\n\t\t\t\t\t\t\tlabel={ __( 'Use as Site Icon' ) }\n\t\t\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\t\t\tsetAttributes( { shouldSyncIcon: false } );\n\t\t\t\t\t\t\t\tsetIcon( undefined );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Use as Site Icon' ) }\n\t\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\t\tsetAttributes( { shouldSyncIcon: value } );\n\t\t\t\t\t\t\t\t\tsetIcon( value ? logoId : undefined );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tchecked={ !! shouldSyncIcon }\n\t\t\t\t\t\t\t\thelp={ syncSiteIconHelpText }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t) }\n\t\t\t\t</ToolsPanel>\n\t\t\t</InspectorControls>\n\t\t\t{ canEditImage &&\n\t\t\t\t! isEditingImage &&\n\t\t\t\tshouldShowCropAndDimensions && (\n\t\t\t\t\t<BlockControls group=\"block\">\n\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\t\topenMediaEditorModal && logoId\n\t\t\t\t\t\t\t\t\t? () =>\n\t\t\t\t\t\t\t\t\t\t\topenMediaEditorModal( {\n\t\t\t\t\t\t\t\t\t\t\t\tid: logoId,\n\t\t\t\t\t\t\t\t\t\t\t\tonUpdate: handleMediaUpdate,\n\t\t\t\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t\t\t: () => setIsEditingImage( true )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={ crop }\n\t\t\t\t\t\t\tlabel={ __( 'Crop' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</BlockControls>\n\t\t\t\t) }\n\t\t\t{ imgEdit }\n\t\t</>\n\t);\n};\n\nexport default function LogoEdit( {\n\tattributes,\n\tclassName,\n\tsetAttributes,\n\tisSelected,\n} ) {\n\tconst { width, shouldSyncIcon } = attributes;\n\tconst {\n\t\tsiteLogoId,\n\t\tcanUserEdit,\n\t\turl,\n\t\tsiteIconId,\n\t\tmediaItemData,\n\t\tisRequestingMediaItem,\n\t} = useSelect( ( select ) => {\n\t\tconst { canUser, getEntityRecord, getEditedEntityRecord } =\n\t\t\tselect( coreStore );\n\t\tconst _canUserEdit = canUser( 'update', {\n\t\t\tkind: 'root',\n\t\t\tname: 'site',\n\t\t} );\n\t\tconst siteSettings = _canUserEdit\n\t\t\t? getEditedEntityRecord( 'root', 'site' )\n\t\t\t: undefined;\n\t\tconst siteData = getEntityRecord( 'root', '__unstableBase' );\n\t\tconst _siteLogoId = _canUserEdit\n\t\t\t? siteSettings?.site_logo\n\t\t\t: siteData?.site_logo;\n\t\tconst _siteIconId = siteSettings?.site_icon;\n\t\tconst mediaItem =\n\t\t\t_siteLogoId &&\n\t\t\tselect( coreStore ).getEntityRecord(\n\t\t\t\t'postType',\n\t\t\t\t'attachment',\n\t\t\t\t_siteLogoId,\n\t\t\t\t{\n\t\t\t\t\tcontext: 'view',\n\t\t\t\t}\n\t\t\t);\n\t\tconst _isRequestingMediaItem =\n\t\t\t!! _siteLogoId &&\n\t\t\t! select( coreStore ).hasFinishedResolution( 'getEntityRecord', [\n\t\t\t\t'postType',\n\t\t\t\t'attachment',\n\t\t\t\t_siteLogoId,\n\t\t\t\t{ context: 'view' },\n\t\t\t] );\n\n\t\treturn {\n\t\t\tsiteLogoId: _siteLogoId,\n\t\t\tcanUserEdit: _canUserEdit,\n\t\t\turl: siteData?.home,\n\t\t\tmediaItemData: mediaItem,\n\t\t\tisRequestingMediaItem: _isRequestingMediaItem,\n\t\t\tsiteIconId: _siteIconId,\n\t\t};\n\t}, [] );\n\tconst { getSettings } = useSelect( blockEditorStore );\n\tconst [ temporaryURL, setTemporaryURL ] = useState();\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\n\tconst { editEntityRecord } = useDispatch( coreStore );\n\n\tconst setLogo = ( newValue, shouldForceSync = false ) => {\n\t\t// `shouldForceSync` is used to force syncing when the attribute\n\t\t// may not have updated yet.\n\t\tif ( shouldSyncIcon || shouldForceSync ) {\n\t\t\tsetIcon( newValue );\n\t\t}\n\n\t\teditEntityRecord( 'root', 'site', undefined, {\n\t\t\tsite_logo: newValue,\n\t\t} );\n\t};\n\n\tconst setIcon = ( newValue ) =>\n\t\t// The new value needs to be `null` to reset the Site Icon.\n\t\teditEntityRecord( 'root', 'site', undefined, {\n\t\t\tsite_icon: newValue ?? null,\n\t\t} );\n\n\tconst { alt_text: alt, source_url: logoUrl } = mediaItemData ?? {};\n\n\tconst onInitialSelectLogo = ( media ) => {\n\t\t// Initialize the syncSiteIcon toggle. If we currently have no Site logo and no\n\t\t// site icon, automatically sync the logo to the icon.\n\t\tif ( shouldSyncIcon === undefined ) {\n\t\t\tconst shouldForceSync = ! siteIconId;\n\t\t\tsetAttributes( { shouldSyncIcon: shouldForceSync } );\n\n\t\t\t// Because we cannot rely on the `shouldSyncIcon` attribute to have updated by\n\t\t\t// the time `setLogo` is called, pass an argument to force the syncing.\n\t\t\tonSelectLogo( media, shouldForceSync );\n\t\t\treturn;\n\t\t}\n\n\t\tonSelectLogo( media );\n\t};\n\n\tconst onSelectLogo = ( media, shouldForceSync = false ) => {\n\t\tif ( ! media ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( ! media.id && media.url ) {\n\t\t\t// This is a temporary blob image.\n\t\t\tsetTemporaryURL( media.url );\n\t\t\tsetLogo( undefined );\n\t\t\treturn;\n\t\t}\n\n\t\tsetLogo( media.id, shouldForceSync );\n\t};\n\n\tconst onRemoveLogo = () => {\n\t\tsetLogo( null );\n\t\tsetAttributes( { width: undefined } );\n\t};\n\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\tconst onUploadError = ( message ) => {\n\t\tcreateErrorNotice( message, { type: 'snackbar' } );\n\t\tsetTemporaryURL();\n\t};\n\n\tconst onFilesDrop = ( filesList ) => {\n\t\tgetSettings().mediaUpload( {\n\t\t\tallowedTypes: ALLOWED_MEDIA_TYPES,\n\t\t\tfilesList,\n\t\t\tonFileChange( [ image ] ) {\n\t\t\t\tif ( isBlobURL( image?.url ) ) {\n\t\t\t\t\tsetTemporaryURL( image.url );\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tonInitialSelectLogo( image );\n\t\t\t},\n\t\t\tonError: onUploadError,\n\t\t\tmultiple: false,\n\t\t} );\n\t};\n\n\tconst mediaReplaceFlowProps = {\n\t\tmediaURL: logoUrl,\n\t\tname: ! logoUrl ? __( 'Choose logo' ) : __( 'Replace' ),\n\t\tonSelect: onSelectLogo,\n\t\tonError: onUploadError,\n\t\tonReset: onRemoveLogo,\n\t};\n\tconst controls = canUserEdit && (\n\t\t<BlockControls group=\"other\">\n\t\t\t<MediaReplaceFlow\n\t\t\t\t{ ...mediaReplaceFlowProps }\n\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\tvariant=\"toolbar\"\n\t\t\t/>\n\t\t</BlockControls>\n\t);\n\n\tlet logoImage;\n\tconst isLoading = siteLogoId === undefined || isRequestingMediaItem;\n\tif ( isLoading ) {\n\t\tlogoImage = <Spinner />;\n\t}\n\n\t// Reset temporary url when logoUrl is available.\n\tuseEffect( () => {\n\t\tif ( logoUrl && temporaryURL ) {\n\t\t\tsetTemporaryURL();\n\t\t}\n\t}, [ logoUrl, temporaryURL ] );\n\n\tif ( !! logoUrl || !! temporaryURL ) {\n\t\tlogoImage = (\n\t\t\t<>\n\t\t\t\t<SiteLogo\n\t\t\t\t\talt={ alt }\n\t\t\t\t\tattributes={ attributes }\n\t\t\t\t\tclassName={ className }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t\t\tlogoUrl={ temporaryURL || logoUrl }\n\t\t\t\t\tsetLogo={ setLogo }\n\t\t\t\t\tlogoId={ mediaItemData?.id || siteLogoId }\n\t\t\t\t\tsiteUrl={ url }\n\t\t\t\t\tsetIcon={ setIcon }\n\t\t\t\t\ticonId={ siteIconId }\n\t\t\t\t\tcanUserEdit={ canUserEdit }\n\t\t\t\t/>\n\t\t\t\t{ canUserEdit && <DropZone onFilesDrop={ onFilesDrop } /> }\n\t\t\t</>\n\t\t);\n\t}\n\tconst placeholder = ( content ) => {\n\t\tconst placeholderClassName = clsx(\n\t\t\t'block-editor-media-placeholder',\n\t\t\tclassName\n\t\t);\n\n\t\treturn (\n\t\t\t<Placeholder\n\t\t\t\tclassName={ placeholderClassName }\n\t\t\t\tpreview={ logoImage }\n\t\t\t\twithIllustration\n\t\t\t\tstyle={ {\n\t\t\t\t\twidth,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ content }\n\t\t\t</Placeholder>\n\t\t);\n\t};\n\n\tconst classes = clsx( className, {\n\t\t'is-default-size': ! width,\n\t\t'is-transient': temporaryURL,\n\t} );\n\n\tconst blockProps = useBlockProps( { className: classes } );\n\n\tconst mediaInspectorPanel = ( canUserEdit || logoUrl ) && (\n\t\t<InspectorControls>\n\t\t\t<ToolsPanel\n\t\t\t\tlabel={ __( 'Media' ) }\n\t\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t\t>\n\t\t\t\t{ ! canUserEdit ? (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"block-library-site-logo__inspector-media-replace-container\"\n\t\t\t\t\t\tstyle={ { gridColumn: '1 / -1' } }\n\t\t\t\t\t>\n\t\t\t\t\t\t<MediaControlPreview\n\t\t\t\t\t\t\turl={ mediaItemData?.source_url }\n\t\t\t\t\t\t\tfilename={\n\t\t\t\t\t\t\t\tmediaItemData?.media_details?.sizes?.full\n\t\t\t\t\t\t\t\t\t?.file || mediaItemData?.slug\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\titemGroupProps={ {\n\t\t\t\t\t\t\t\tisBordered: true,\n\t\t\t\t\t\t\t\tclassName:\n\t\t\t\t\t\t\t\t\t'block-library-site-logo__inspector-readonly-logo-preview',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tclassName=\"block-library-site-logo__inspector-media-replace-title\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => !! logoUrl }\n\t\t\t\t\t\tlabel={ __( 'Logo' ) }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t>\n\t\t\t\t\t\t<MediaControl\n\t\t\t\t\t\t\tmediaId={ siteLogoId }\n\t\t\t\t\t\t\tmediaUrl={ logoUrl }\n\t\t\t\t\t\t\tfilename={\n\t\t\t\t\t\t\t\tmediaItemData?.media_details?.sizes?.full\n\t\t\t\t\t\t\t\t\t?.file || mediaItemData?.slug\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\t\t\t\tonSelect={ onSelectLogo }\n\t\t\t\t\t\t\tonError={ onUploadError }\n\t\t\t\t\t\t\tonReset={ onRemoveLogo }\n\t\t\t\t\t\t\tisUploading={ !! temporaryURL }\n\t\t\t\t\t\t\temptyLabel={ __( 'Logo' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t) }\n\t\t\t</ToolsPanel>\n\t\t</InspectorControls>\n\t);\n\n\treturn (\n\t\t<div { ...blockProps }>\n\t\t\t{ controls }\n\t\t\t{ mediaInspectorPanel }\n\t\t\t{ ( !! logoUrl || !! temporaryURL ) && logoImage }\n\t\t\t{ ( isLoading ||\n\t\t\t\t( ! temporaryURL && ! logoUrl && ! canUserEdit ) ) && (\n\t\t\t\t<Placeholder className=\"site-logo_placeholder\" withIllustration>\n\t\t\t\t\t{ isLoading && (\n\t\t\t\t\t\t<span className=\"components-placeholder__preview\">\n\t\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) }\n\t\t\t\t</Placeholder>\n\t\t\t) }\n\t\t\t{ ! isLoading && ! temporaryURL && ! logoUrl && canUserEdit && (\n\t\t\t\t<MediaPlaceholder\n\t\t\t\t\tonSelect={ onInitialSelectLogo }\n\t\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\t\tonError={ onUploadError }\n\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\tmediaLibraryButton={ ( { open } ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\ticon={ upload }\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Choose logo' ) }\n\t\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\t\ttooltipPosition=\"middle right\"\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\topen();\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\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/tab/block.json

@@ -4,25 +4,23 @@
 	"apiVersion": 3,
 	"name": "core/tab",
 	"title": "Tab",
-	"description": "Content for a tab in a tabbed interface.",
+	"description": "A single tab button in the tab list.",
 	"category": "design",
 	"textdomain": "default",
-	"attributes": {
-		"label": {
-			"type": "string",
-			"default": ""
-		}
-	},
-	"parent": [ "core/tab-panel" ],
+	"parent": [ "core/tab-list" ],
 	"usesContext": [
+		"core/tabs-list",
 		"core/tabs-activeTabIndex",
 		"core/tabs-editorActiveTabIndex",
-		"core/tabs-id"
+		"core/tab-index",
+		"core/tab-id",
+		"core/tab-label"
 	],
 	"supports": {
-		"anchor": true,
 		"html": false,
 		"reusable": false,
+		"visibility": false,
+		"lock": false,
 		"color": {
 			"background": true,
 			"text": true,
@@ -31,26 +29,28 @@
 				"text": true
 			}
 		},
-		"layout": true,
-		"spacing": {
-			"blockGap": true,
-			"padding": true,
-			"margin": false
-		},
 		"typography": {
 			"fontSize": true,
 			"__experimentalFontFamily": true,
+			"textAlign": true,
 			"__experimentalDefaultControls": {
-				"fontSize": true,
-				"__experimentalFontFamily": true
+				"fontSize": true
 			}
 		},
-		"renaming": true,
-		"visibility": false
-	},
-	"providesContext": {
-		"core/tab-label": "label"
+		"spacing": {
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"padding": true
+			}
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		}
 	},
 	"editorScript": "file:./index.js",
+	"editorStyle": "file:./editor.css",
 	"style": "file:./style-index.css"
 }

package/build-module/tab/controls.mjs

@@ -1,62 +1,12 @@
 // packages/block-library/src/tab/controls.js
-import {
-  InspectorControls,
-  store as blockEditorStore
-} from "@wordpress/block-editor";
-import {
-  CheckboxControl,
-  __experimentalToolsPanel as ToolsPanel,
-  __experimentalToolsPanelItem as ToolsPanelItem
-} from "@wordpress/components";
-import { __ } from "@wordpress/i18n";
-import { useDispatch } from "@wordpress/data";
-import AddTabToolbarControl from "./add-tab-toolbar-control.mjs";
-import RemoveTabToolbarControl from "./remove-tab-toolbar-control.mjs";
-import { useToolsPanelDropdownMenuProps } from "../utils/hooks.mjs";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function Controls({ tabsClientId, blockIndex, isDefaultTab }) {
-  const { updateBlockAttributes } = useDispatch(blockEditorStore);
-  const dropdownMenuProps = useToolsPanelDropdownMenuProps();
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+import { BlockControls } from "@wordpress/block-editor";
+import AddTabToolbarControl from "../tab-panel/add-tab-toolbar-control.mjs";
+import RemoveTabToolbarControl from "../tab-panel/remove-tab-toolbar-control.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Controls({ tabsClientId }) {
+  return /* @__PURE__ */ jsxs(BlockControls, { children: [
     /* @__PURE__ */ jsx(AddTabToolbarControl, { tabsClientId }),
-    /* @__PURE__ */ jsx(RemoveTabToolbarControl, { tabsClientId }),
-    /* @__PURE__ */ jsx(InspectorControls, { children: /* @__PURE__ */ jsx(
-      ToolsPanel,
-      {
-        label: __("Settings"),
-        resetAll: () => {
-          updateBlockAttributes(tabsClientId, {
-            activeTabIndex: 0
-          });
-        },
-        dropdownMenuProps,
-        children: /* @__PURE__ */ jsx(
-          ToolsPanelItem,
-          {
-            label: __("Default tab"),
-            hasValue: () => isDefaultTab && blockIndex !== 0,
-            onDeselect: () => {
-              updateBlockAttributes(tabsClientId, {
-                activeTabIndex: 0
-              });
-            },
-            isShownByDefault: true,
-            children: /* @__PURE__ */ jsx(
-              CheckboxControl,
-              {
-                label: __("Default tab"),
-                checked: isDefaultTab,
-                onChange: (value) => {
-                  updateBlockAttributes(tabsClientId, {
-                    activeTabIndex: value ? blockIndex : 0
-                  });
-                }
-              }
-            )
-          }
-        )
-      }
-    ) })
+    /* @__PURE__ */ jsx(RemoveTabToolbarControl, { tabsClientId })
   ] });
 }
 export {

package/build-module/tab/controls.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tab/controls.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tInspectorControls,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport {\n\tCheckboxControl,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport AddTabToolbarControl from './add-tab-toolbar-control';\nimport RemoveTabToolbarControl from './remove-tab-toolbar-control';\nimport { useToolsPanelDropdownMenuProps } from '../utils/hooks';\n\nexport default function Controls( { tabsClientId, blockIndex, isDefaultTab } ) {\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\n\treturn (\n\t\t<>\n\t\t\t<AddTabToolbarControl tabsClientId={ tabsClientId } />\n\t\t\t<RemoveTabToolbarControl tabsClientId={ tabsClientId } />\n\t\t\t<InspectorControls>\n\t\t\t\t<ToolsPanel\n\t\t\t\t\tlabel={ __( 'Settings' ) }\n\t\t\t\t\tresetAll={ () => {\n\t\t\t\t\t\tupdateBlockAttributes( tabsClientId, {\n\t\t\t\t\t\t\tactiveTabIndex: 0,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t\t\t>\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\tlabel={ __( 'Default tab' ) }\n\t\t\t\t\t\thasValue={ () => isDefaultTab && blockIndex !== 0 }\n\t\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\t\tupdateBlockAttributes( tabsClientId, {\n\t\t\t\t\t\t\t\tactiveTabIndex: 0,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t>\n\t\t\t\t\t\t<CheckboxControl\n\t\t\t\t\t\t\tlabel={ __( 'Default tab' ) }\n\t\t\t\t\t\t\tchecked={ isDefaultTab }\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tupdateBlockAttributes( tabsClientId, {\n\t\t\t\t\t\t\t\t\tactiveTabIndex: value ? blockIndex : 0,\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\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t</ToolsPanel>\n\t\t\t</InspectorControls>\n\t\t</>\n\t);\n}\n"],
-  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA,SAAS;AAAA,OACH;AACP;AAAA,EACC;AAAA,EACA,4BAA4B;AAAA,EAC5B,gCAAgC;AAAA,OAC1B;AACP,SAAS,UAAU;AACnB,SAAS,mBAAmB;AAK5B,OAAO,0BAA0B;AACjC,OAAO,6BAA6B;AACpC,SAAS,sCAAsC;AAO7C,mBACC,KADD;AALa,SAAR,SAA2B,EAAE,cAAc,YAAY,aAAa,GAAI;AAC9E,QAAM,EAAE,sBAAsB,IAAI,YAAa,gBAAiB;AAChE,QAAM,oBAAoB,+BAA+B;AAEzD,SACC,iCACC;AAAA,wBAAC,wBAAqB,cAA8B;AAAA,IACpD,oBAAC,2BAAwB,cAA8B;AAAA,IACvD,oBAAC,qBACA;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,GAAI,UAAW;AAAA,QACvB,UAAW,MAAM;AAChB,gCAAuB,cAAc;AAAA,YACpC,gBAAgB;AAAA,UACjB,CAAE;AAAA,QACH;AAAA,QACA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACA,OAAQ,GAAI,aAAc;AAAA,YAC1B,UAAW,MAAM,gBAAgB,eAAe;AAAA,YAChD,YAAa,MAAM;AAClB,oCAAuB,cAAc;AAAA,gBACpC,gBAAgB;AAAA,cACjB,CAAE;AAAA,YACH;AAAA,YACA,kBAAgB;AAAA,YAEhB;AAAA,cAAC;AAAA;AAAA,gBACA,OAAQ,GAAI,aAAc;AAAA,gBAC1B,SAAU;AAAA,gBACV,UAAW,CAAE,UAAW;AACvB,wCAAuB,cAAc;AAAA,oBACpC,gBAAgB,QAAQ,aAAa;AAAA,kBACtC,CAAE;AAAA,gBACH;AAAA;AAAA,YACD;AAAA;AAAA,QACD;AAAA;AAAA,IACD,GACD;AAAA,KACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { BlockControls } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport AddTabToolbarControl from '../tab-panel/add-tab-toolbar-control';\nimport RemoveTabToolbarControl from '../tab-panel/remove-tab-toolbar-control';\n\nexport default function Controls( { tabsClientId } ) {\n\treturn (\n\t\t<BlockControls>\n\t\t\t<AddTabToolbarControl tabsClientId={ tabsClientId } />\n\t\t\t<RemoveTabToolbarControl tabsClientId={ tabsClientId } />\n\t\t</BlockControls>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,qBAAqB;AAK9B,OAAO,0BAA0B;AACjC,OAAO,6BAA6B;AAIlC,SACC,KADD;AAFa,SAAR,SAA2B,EAAE,aAAa,GAAI;AACpD,SACC,qBAAC,iBACA;AAAA,wBAAC,wBAAqB,cAA8B;AAAA,IACpD,oBAAC,2BAAwB,cAA8B;AAAA,KACxD;AAEF;",
   "names": []
 }