@wordpress/block-library 9.43.0 → 9.43.1-next.v.202604091042.0

package/build/navigation-link/shared/use-link-preview.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/navigation-link/shared/use-link-preview.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { safeDecodeURI } from '@wordpress/url';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreDataStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { useRemoteUrlData, isHashLink, isRelativePath } = unlock(\n\tblockEditorPrivateApis\n);\n\n/**\n * Capitalize the first letter of a string.\n *\n * @param {string} str - The string to capitalize\n * @return {string} Capitalized string\n */\nfunction capitalize( str ) {\n\treturn str.charAt( 0 ).toUpperCase() + str.slice( 1 );\n}\n\n/**\n * Check if a URL points to the site homepage.\n * Handles protocol (http/https) and trailing slash variations.\n * Does not match subdomains unless they are the site URL.\n *\n * @param {string} url     - The URL to check\n * @param {string} homeUrl - The WordPress site URL\n * @return {boolean} True if url is the homepage\n */\nexport function isHomepage( url, homeUrl ) {\n\tif ( url === '/' ) {\n\t\treturn true;\n\t}\n\tif ( ! url || ! homeUrl ) {\n\t\treturn false;\n\t}\n\ttry {\n\t\tconst urlParsed = new URL( url, homeUrl );\n\t\tconst homeParsed = new URL( homeUrl );\n\n\t\t// Same host, i.e. sub.homepage.com or homepage.com\n\t\tif ( urlParsed.hostname !== homeParsed.hostname ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Path must match site root (normalize trailing slash)\n\t\tconst urlPath = urlParsed.pathname.replace( /\\/$/, '' );\n\t\tconst homePath = homeParsed.pathname.replace( /\\/$/, '' );\n\n\t\treturn urlPath === homePath;\n\t} catch {\n\t\treturn false;\n\t}\n}\n\n/**\n * Compute display URL - strips site URL if internal, shows full URL if external.\n *\n * @param {Object} options         - Parameters object\n * @param {string} options.linkUrl - The URL to process\n * @param {string} options.homeUrl - The WordPress site URL (required for internal/external detection)\n * @return {Object} Object with displayUrl and isExternal flag\n */\nexport function computeDisplayUrl( { linkUrl, homeUrl } = {} ) {\n\tif ( ! linkUrl ) {\n\t\treturn { displayUrl: '', isExternal: false };\n\t}\n\n\tlet displayUrl = safeDecodeURI( linkUrl );\n\tlet isExternal = false;\n\n\t// Check hash links and relative paths first - these are always internal\n\tif ( isRelativePath( linkUrl ) || isHashLink( linkUrl ) ) {\n\t\treturn { displayUrl, isExternal: false };\n\t}\n\n\t// Try to parse as a full URL to determine if it's actually external\n\t// This must happen before trusting the type attribute\n\ttry {\n\t\tconst parsedUrl = new URL( linkUrl );\n\t\t// Compare by host (not origin) so http/https to same site both count as internal\n\t\tconst siteHost = new URL( homeUrl ).host;\n\n\t\tif ( parsedUrl.host === siteHost ) {\n\t\t\t// Show only the pathname (and search/hash if present)\n\t\t\tlet path = parsedUrl.pathname + parsedUrl.search + parsedUrl.hash;\n\t\t\t// Remove trailing slash\n\t\t\tif ( path.endsWith( '/' ) && path.length > 1 ) {\n\t\t\t\tpath = path.slice( 0, -1 );\n\t\t\t}\n\t\t\tdisplayUrl = path;\n\t\t} else {\n\t\t\t// Different host - this is an external link\n\t\t\tisExternal = true;\n\t\t}\n\t} catch ( e ) {\n\t\t// URL parsing failed - treat as external (e.g. no homeUrl, or URL without protocol)\n\t\tisExternal = true;\n\t}\n\n\treturn { displayUrl, isExternal };\n}\n\n/**\n * Compute badges for the link preview.\n *\n * @param {Object}  options                   - Options object\n * @param {string}  options.url               - Link URL\n * @param {string}  options.homeUrl           - WordPress site URL (for homepage detection)\n * @param {string}  options.type              - Entity type (page, post, etc.)\n * @param {boolean} options.isExternal        - Whether link is external\n * @param {string}  options.entityStatus      - Entity status (publish, draft, etc.)\n * @param {boolean} options.hasBinding        - Whether link has entity binding\n * @param {boolean} options.isEntityAvailable - Whether bound entity exists\n * @return {Array} Array of badge objects with label and intent\n */\nexport function computeBadges( {\n\turl,\n\thomeUrl,\n\ttype,\n\tisExternal,\n\tentityStatus,\n\thasBinding,\n\tisEntityAvailable,\n} ) {\n\tconst badges = [];\n\t// Kind badge\n\tif ( url ) {\n\t\tif ( isExternal ) {\n\t\t\tbadges.push( {\n\t\t\t\tlabel: __( 'External link' ),\n\t\t\t\tintent: 'default',\n\t\t\t} );\n\t\t} else if ( isHashLink( url ) ) {\n\t\t\t// Hash links should be detected before type check\n\t\t\t// because they're not entity links even if type is set\n\t\t\tbadges.push( {\n\t\t\t\tlabel: __( 'Internal link' ),\n\t\t\t\tintent: 'default',\n\t\t\t} );\n\t\t} else if ( isHomepage( url, homeUrl ) ) {\n\t\t\tbadges.push( {\n\t\t\t\tlabel: __( 'Homepage' ),\n\t\t\t\tintent: 'default',\n\t\t\t} );\n\t\t} else if ( type && type !== 'custom' ) {\n\t\t\t// Show entity type badge (page, post, category, etc.)\n\t\t\t// but not 'custom' since that's just a manual link\n\t\t\tbadges.push( { label: capitalize( type ), intent: 'default' } );\n\t\t} else {\n\t\t\t// Internal link (not external, not hash, not entity)\n\t\t\tbadges.push( {\n\t\t\t\tlabel: __( 'Page' ),\n\t\t\t\tintent: 'default',\n\t\t\t} );\n\t\t}\n\t}\n\n\t// Status badge\n\tif ( hasBinding && ! isEntityAvailable ) {\n\t\tbadges.push( {\n\t\t\tlabel: sprintf(\n\t\t\t\t/* translators: %s is the entity type (e.g., \"page\", \"post\", \"category\") */\n\t\t\t\t__( 'Missing %s' ),\n\t\t\t\ttype\n\t\t\t),\n\t\t\tintent: 'error',\n\t\t} );\n\t} else if ( ! url ) {\n\t\tbadges.push( { label: __( 'No link selected' ), intent: 'error' } );\n\t} else if ( entityStatus ) {\n\t\tconst statusMap = {\n\t\t\tpublish: { label: __( 'Published' ), intent: 'success' },\n\t\t\tfuture: { label: __( 'Scheduled' ), intent: 'warning' },\n\t\t\tdraft: { label: __( 'Draft' ), intent: 'warning' },\n\t\t\tpending: { label: __( 'Pending' ), intent: 'warning' },\n\t\t\tprivate: { label: __( 'Private' ), intent: 'default' },\n\t\t\ttrash: { label: __( 'Trash' ), intent: 'error' },\n\t\t};\n\t\tconst badge = statusMap[ entityStatus ];\n\t\tif ( badge ) {\n\t\t\tbadges.push( badge );\n\t\t}\n\t}\n\n\treturn badges;\n}\n\n/**\n * Hook to compute link preview data for display.\n *\n * This hook takes raw link data and entity information and computes\n * presentation-ready preview data including formatted title, URL, and badges.\n *\n * @param {Object}  options                   - Options object\n * @param {string}  options.url               - Link URL\n * @param {string}  options.type              - Entity type (page, post, etc.)\n * @param {Object}  options.entityRecord      - Entity record\n * @param {boolean} options.hasBinding        - Whether link has entity binding\n * @param {boolean} options.isEntityAvailable - Whether bound entity exists\n * @return {Object} Preview data object with title, url, image, and badges\n */\nexport function useLinkPreview( {\n\turl,\n\tentityRecord,\n\ttype,\n\thasBinding,\n\tisEntityAvailable,\n} ) {\n\t// Get the WordPress homepage URL from settings\n\tconst homeUrl = useSelect( ( select ) => {\n\t\treturn select( coreDataStore ).getEntityRecord(\n\t\t\t'root',\n\t\t\t'__unstableBase'\n\t\t)?.home;\n\t}, [] );\n\n\tconst title =\n\t\tentityRecord?.title?.rendered ||\n\t\tentityRecord?.title ||\n\t\tentityRecord?.name;\n\n\t// Fetch rich URL data if we don't have a title. Internal links should have passed a title.\n\tconst { richData } = useRemoteUrlData( title ? null : url );\n\n\t// Compute display URL and external flag\n\tconst { displayUrl, isExternal } = computeDisplayUrl( {\n\t\tlinkUrl: url,\n\t\thomeUrl,\n\t} );\n\n\tconst image = useSelect(\n\t\t( select ) => {\n\t\t\t// Only fetch for post-type entities with featured media\n\t\t\tif ( ! entityRecord?.featured_media ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst { getEntityRecord } = select( coreDataStore );\n\n\t\t\t// Get the media entity to fetch the image URL\n\t\t\tconst media = getEntityRecord(\n\t\t\t\t'postType',\n\t\t\t\t'attachment',\n\t\t\t\tentityRecord.featured_media\n\t\t\t);\n\n\t\t\t// Return the thumbnail or medium size URL, fallback to source_url\n\t\t\treturn (\n\t\t\t\tmedia?.media_details?.sizes?.thumbnail?.source_url ||\n\t\t\t\tmedia?.media_details?.sizes?.medium?.source_url ||\n\t\t\t\tmedia?.source_url ||\n\t\t\t\tnull\n\t\t\t);\n\t\t},\n\t\t[ entityRecord?.featured_media ]\n\t);\n\n\t// Compute badges\n\tconst badges = computeBadges( {\n\t\turl,\n\t\thomeUrl,\n\t\ttype,\n\t\tisExternal,\n\t\tentityStatus: entityRecord?.status,\n\t\thasBinding,\n\t\tisEntityAvailable,\n\t} );\n\n\t// Get display title - use provided title, fallback to rich data, or URL\n\tconst displayTitle = url\n\t\t? title || richData?.title || safeDecodeURI( url )\n\t\t: __( 'Add link' );\n\n\treturn {\n\t\ttitle: displayTitle,\n\t\turl: displayUrl,\n\t\timage,\n\t\tbadges,\n\t};\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { safeDecodeURI } from '@wordpress/url';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreDataStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { useRemoteUrlData, isHashLink, isRelativePath } = unlock(\n\tblockEditorPrivateApis\n);\n\n/**\n * Capitalize the first letter of a string.\n *\n * @param {string} str - The string to capitalize\n * @return {string} Capitalized string\n */\nfunction capitalize( str ) {\n\treturn str.charAt( 0 ).toUpperCase() + str.slice( 1 );\n}\n\n/**\n * Check if a URL points to the site homepage.\n * Handles protocol (http/https) and trailing slash variations.\n * Does not match subdomains unless they are the site URL.\n *\n * @param {string} url     - The URL to check\n * @param {string} homeUrl - The WordPress site URL\n * @return {boolean} True if url is the homepage\n */\nexport function isHomepage( url, homeUrl ) {\n\tif ( url === '/' ) {\n\t\treturn true;\n\t}\n\tif ( ! url || ! homeUrl ) {\n\t\treturn false;\n\t}\n\ttry {\n\t\tconst urlParsed = new URL( url, homeUrl );\n\t\tconst homeParsed = new URL( homeUrl );\n\n\t\t// Same host, i.e. sub.homepage.com or homepage.com\n\t\tif ( urlParsed.hostname !== homeParsed.hostname ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Path must match site root (normalize trailing slash)\n\t\tconst urlPath = urlParsed.pathname.replace( /\\/$/, '' );\n\t\tconst homePath = homeParsed.pathname.replace( /\\/$/, '' );\n\n\t\treturn urlPath === homePath;\n\t} catch {\n\t\treturn false;\n\t}\n}\n\n/**\n * Compute display URL - strips site URL if internal, shows full URL if external.\n *\n * @param {Object} options         - Parameters object\n * @param {string} options.linkUrl - The URL to process\n * @param {string} options.homeUrl - The WordPress site URL (required for internal/external detection)\n * @return {Object} Object with displayUrl and isExternal flag\n */\nexport function computeDisplayUrl( { linkUrl, homeUrl } = {} ) {\n\tif ( ! linkUrl ) {\n\t\treturn { displayUrl: '', isExternal: false };\n\t}\n\n\tlet displayUrl = safeDecodeURI( linkUrl );\n\tlet isExternal = false;\n\n\t// Check hash links and relative paths first - these are always internal\n\tif ( isRelativePath( linkUrl ) || isHashLink( linkUrl ) ) {\n\t\treturn { displayUrl, isExternal: false };\n\t}\n\n\t// Try to parse as a full URL to determine if it's actually external\n\t// This must happen before trusting the type attribute\n\ttry {\n\t\tconst parsedUrl = new URL( linkUrl );\n\t\t// Compare by host (not origin) so http/https to same site both count as internal\n\t\tconst siteHost = new URL( homeUrl ).host;\n\n\t\tif ( parsedUrl.host === siteHost ) {\n\t\t\t// Show only the pathname (and search/hash if present)\n\t\t\tlet path = parsedUrl.pathname + parsedUrl.search + parsedUrl.hash;\n\t\t\t// Remove trailing slash\n\t\t\tif ( path.endsWith( '/' ) && path.length > 1 ) {\n\t\t\t\tpath = path.slice( 0, -1 );\n\t\t\t}\n\t\t\tdisplayUrl = path;\n\t\t} else {\n\t\t\t// Different host - this is an external link\n\t\t\tisExternal = true;\n\t\t}\n\t} catch {\n\t\t// URL parsing failed - treat as external (e.g. no homeUrl, or URL without protocol)\n\t\tisExternal = true;\n\t}\n\n\treturn { displayUrl, isExternal };\n}\n\n/**\n * Compute badges for the link preview.\n *\n * @param {Object}  options                   - Options object\n * @param {string}  options.url               - Link URL\n * @param {string}  options.homeUrl           - WordPress site URL (for homepage detection)\n * @param {string}  options.type              - Entity type (page, post, etc.)\n * @param {boolean} options.isExternal        - Whether link is external\n * @param {string}  options.entityStatus      - Entity status (publish, draft, etc.)\n * @param {boolean} options.hasBinding        - Whether link has entity binding\n * @param {boolean} options.isEntityAvailable - Whether bound entity exists\n * @return {Array} Array of badge objects with label and intent\n */\nexport function computeBadges( {\n\turl,\n\thomeUrl,\n\ttype,\n\tisExternal,\n\tentityStatus,\n\thasBinding,\n\tisEntityAvailable,\n} ) {\n\tconst badges = [];\n\t// Kind badge\n\tif ( url ) {\n\t\tif ( isExternal ) {\n\t\t\tbadges.push( {\n\t\t\t\tlabel: __( 'External link' ),\n\t\t\t\tintent: 'default',\n\t\t\t} );\n\t\t} else if ( isHashLink( url ) ) {\n\t\t\t// Hash links should be detected before type check\n\t\t\t// because they're not entity links even if type is set\n\t\t\tbadges.push( {\n\t\t\t\tlabel: __( 'Internal link' ),\n\t\t\t\tintent: 'default',\n\t\t\t} );\n\t\t} else if ( isHomepage( url, homeUrl ) ) {\n\t\t\tbadges.push( {\n\t\t\t\tlabel: __( 'Homepage' ),\n\t\t\t\tintent: 'default',\n\t\t\t} );\n\t\t} else if ( type && type !== 'custom' ) {\n\t\t\t// Show entity type badge (page, post, category, etc.)\n\t\t\t// but not 'custom' since that's just a manual link\n\t\t\tbadges.push( { label: capitalize( type ), intent: 'default' } );\n\t\t} else {\n\t\t\t// Internal link (not external, not hash, not entity)\n\t\t\tbadges.push( {\n\t\t\t\tlabel: __( 'Page' ),\n\t\t\t\tintent: 'default',\n\t\t\t} );\n\t\t}\n\t}\n\n\t// Status badge\n\tif ( hasBinding && ! isEntityAvailable ) {\n\t\tbadges.push( {\n\t\t\tlabel: sprintf(\n\t\t\t\t/* translators: %s is the entity type (e.g., \"page\", \"post\", \"category\") */\n\t\t\t\t__( 'Missing %s' ),\n\t\t\t\ttype\n\t\t\t),\n\t\t\tintent: 'error',\n\t\t} );\n\t} else if ( ! url ) {\n\t\tbadges.push( { label: __( 'No link selected' ), intent: 'error' } );\n\t} else if ( entityStatus ) {\n\t\tconst statusMap = {\n\t\t\tpublish: { label: __( 'Published' ), intent: 'success' },\n\t\t\tfuture: { label: __( 'Scheduled' ), intent: 'warning' },\n\t\t\tdraft: { label: __( 'Draft' ), intent: 'warning' },\n\t\t\tpending: { label: __( 'Pending' ), intent: 'warning' },\n\t\t\tprivate: { label: __( 'Private' ), intent: 'default' },\n\t\t\ttrash: { label: __( 'Trash' ), intent: 'error' },\n\t\t};\n\t\tconst badge = statusMap[ entityStatus ];\n\t\tif ( badge ) {\n\t\t\tbadges.push( badge );\n\t\t}\n\t}\n\n\treturn badges;\n}\n\n/**\n * Hook to compute link preview data for display.\n *\n * This hook takes raw link data and entity information and computes\n * presentation-ready preview data including formatted title, URL, and badges.\n *\n * @param {Object}  options                   - Options object\n * @param {string}  options.url               - Link URL\n * @param {string}  options.type              - Entity type (page, post, etc.)\n * @param {Object}  options.entityRecord      - Entity record\n * @param {boolean} options.hasBinding        - Whether link has entity binding\n * @param {boolean} options.isEntityAvailable - Whether bound entity exists\n * @return {Object} Preview data object with title, url, image, and badges\n */\nexport function useLinkPreview( {\n\turl,\n\tentityRecord,\n\ttype,\n\thasBinding,\n\tisEntityAvailable,\n} ) {\n\t// Get the WordPress homepage URL from settings\n\tconst homeUrl = useSelect( ( select ) => {\n\t\treturn select( coreDataStore ).getEntityRecord(\n\t\t\t'root',\n\t\t\t'__unstableBase'\n\t\t)?.home;\n\t}, [] );\n\n\tconst title =\n\t\tentityRecord?.title?.rendered ||\n\t\tentityRecord?.title ||\n\t\tentityRecord?.name;\n\n\t// Fetch rich URL data if we don't have a title. Internal links should have passed a title.\n\tconst { richData } = useRemoteUrlData( title ? null : url );\n\n\t// Compute display URL and external flag\n\tconst { displayUrl, isExternal } = computeDisplayUrl( {\n\t\tlinkUrl: url,\n\t\thomeUrl,\n\t} );\n\n\tconst image = useSelect(\n\t\t( select ) => {\n\t\t\t// Only fetch for post-type entities with featured media\n\t\t\tif ( ! entityRecord?.featured_media ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst { getEntityRecord } = select( coreDataStore );\n\n\t\t\t// Get the media entity to fetch the image URL\n\t\t\tconst media = getEntityRecord(\n\t\t\t\t'postType',\n\t\t\t\t'attachment',\n\t\t\t\tentityRecord.featured_media\n\t\t\t);\n\n\t\t\t// Return the thumbnail or medium size URL, fallback to source_url\n\t\t\treturn (\n\t\t\t\tmedia?.media_details?.sizes?.thumbnail?.source_url ||\n\t\t\t\tmedia?.media_details?.sizes?.medium?.source_url ||\n\t\t\t\tmedia?.source_url ||\n\t\t\t\tnull\n\t\t\t);\n\t\t},\n\t\t[ entityRecord?.featured_media ]\n\t);\n\n\t// Compute badges\n\tconst badges = computeBadges( {\n\t\turl,\n\t\thomeUrl,\n\t\ttype,\n\t\tisExternal,\n\t\tentityStatus: entityRecord?.status,\n\t\thasBinding,\n\t\tisEntityAvailable,\n\t} );\n\n\t// Get display title - use provided title, fallback to rich data, or URL\n\tconst displayTitle = url\n\t\t? title || richData?.title || safeDecodeURI( url )\n\t\t: __( 'Add link' );\n\n\treturn {\n\t\ttitle: displayTitle,\n\t\turl: displayUrl,\n\t\timage,\n\t\tbadges,\n\t};\n}\n"],
+  "mappings": "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",
   "names": ["blockEditorPrivateApis", "coreDataStore"]
 }

package/build/pattern/edit.cjs

@@ -71,7 +71,7 @@ var PatternEdit = ({ attributes, clientId }) => {
     if (!hasRecursionError && selectedPattern?.blocks) {
       try {
         parsePatternDependencies(selectedPattern);
-      } catch (error) {
+      } catch {
         setHasRecursionError(true);
         return;
       }

package/build/pattern/edit.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/pattern/edit.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { cloneBlock } from '@wordpress/blocks';\nimport { useSelect, useDispatch, useRegistry } from '@wordpress/data';\nimport { useState, useEffect } from '@wordpress/element';\nimport {\n\tWarning,\n\tstore as blockEditorStore,\n\tuseBlockProps,\n} from '@wordpress/block-editor';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useParsePatternDependencies } from './recursion-detector';\n\nconst PatternEdit = ( { attributes, clientId } ) => {\n\tconst registry = useRegistry();\n\tconst selectedPattern = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).__experimentalGetParsedPattern(\n\t\t\t\tattributes.slug\n\t\t\t),\n\t\t[ attributes.slug ]\n\t);\n\n\tconst currentThemeStylesheet = useSelect(\n\t\t( select ) => select( coreStore ).getCurrentTheme()?.stylesheet,\n\t\t[]\n\t);\n\n\tconst {\n\t\treplaceBlocks,\n\t\tsetBlockEditingMode,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t} = useDispatch( blockEditorStore );\n\tconst { getBlockRootClientId, getBlockEditingMode } =\n\t\tuseSelect( blockEditorStore );\n\n\tconst [ hasRecursionError, setHasRecursionError ] = useState( false );\n\tconst parsePatternDependencies = useParsePatternDependencies();\n\n\t// Duplicated in packages/editor/src/components/start-template-options/index.js.\n\tfunction injectThemeAttributeInBlockTemplateContent( block ) {\n\t\tif (\n\t\t\tblock.innerBlocks.find(\n\t\t\t\t( innerBlock ) => innerBlock.name === 'core/template-part'\n\t\t\t)\n\t\t) {\n\t\t\tblock.innerBlocks = block.innerBlocks.map( ( innerBlock ) => {\n\t\t\t\tif (\n\t\t\t\t\tinnerBlock.name === 'core/template-part' &&\n\t\t\t\t\tinnerBlock.attributes.theme === undefined\n\t\t\t\t) {\n\t\t\t\t\tinnerBlock.attributes.theme = currentThemeStylesheet;\n\t\t\t\t}\n\t\t\t\treturn innerBlock;\n\t\t\t} );\n\t\t}\n\n\t\tif (\n\t\t\tblock.name === 'core/template-part' &&\n\t\t\tblock.attributes.theme === undefined\n\t\t) {\n\t\t\tblock.attributes.theme = currentThemeStylesheet;\n\t\t}\n\t\treturn block;\n\t}\n\n\t// Run this effect when the component loads.\n\t// This adds the Pattern's contents to the post.\n\t// This change won't be saved.\n\t// It will continue to pull from the pattern file unless changes are made to its respective template part.\n\tuseEffect( () => {\n\t\tif ( ! hasRecursionError && selectedPattern?.blocks ) {\n\t\t\ttry {\n\t\t\t\tparsePatternDependencies( selectedPattern );\n\t\t\t} catch ( error ) {\n\t\t\t\tsetHasRecursionError( true );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// We batch updates to block list settings to avoid triggering cascading renders\n\t\t\t// for each container block included in a tree and optimize initial render.\n\t\t\t// Since the above uses microtasks, we need to use a microtask here as well,\n\t\t\t// because nested pattern blocks cannot be inserted if the parent block supports\n\t\t\t// inner blocks but doesn't have blockSettings in the state.\n\t\t\twindow.queueMicrotask( () => {\n\t\t\t\tconst rootClientId = getBlockRootClientId( clientId );\n\t\t\t\t// Clone blocks from the pattern before insertion to ensure they receive\n\t\t\t\t// distinct client ids. See https://github.com/WordPress/gutenberg/issues/50628.\n\t\t\t\tconst clonedBlocks = selectedPattern.blocks.map( ( block ) =>\n\t\t\t\t\tcloneBlock(\n\t\t\t\t\t\tinjectThemeAttributeInBlockTemplateContent( block )\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t\t// If the pattern has a single block and categories, we should add the\n\t\t\t\t// categories of the pattern to the block's metadata.\n\t\t\t\tif (\n\t\t\t\t\tclonedBlocks.length === 1 &&\n\t\t\t\t\tselectedPattern.categories?.length > 0\n\t\t\t\t) {\n\t\t\t\t\tclonedBlocks[ 0 ].attributes = {\n\t\t\t\t\t\t...clonedBlocks[ 0 ].attributes,\n\t\t\t\t\t\tmetadata: {\n\t\t\t\t\t\t\t...clonedBlocks[ 0 ].attributes.metadata,\n\t\t\t\t\t\t\tcategories: selectedPattern.categories,\n\t\t\t\t\t\t\tpatternName: selectedPattern.name,\n\t\t\t\t\t\t\tname:\n\t\t\t\t\t\t\t\tclonedBlocks[ 0 ].attributes.metadata.name ||\n\t\t\t\t\t\t\t\tselectedPattern.title,\n\t\t\t\t\t\t},\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t\tconst rootEditingMode = getBlockEditingMode( rootClientId );\n\t\t\t\tregistry.batch( () => {\n\t\t\t\t\t// Temporarily set the root block to default mode to allow replacing the pattern.\n\t\t\t\t\t// This could happen when the page is disabling edits of non-content blocks.\n\t\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\t\tsetBlockEditingMode( rootClientId, 'default' );\n\t\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\t\treplaceBlocks( clientId, clonedBlocks );\n\t\t\t\t\t// Restore the root block's original mode.\n\t\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\t\tsetBlockEditingMode( rootClientId, rootEditingMode );\n\t\t\t\t} );\n\t\t\t} );\n\t\t}\n\t}, [\n\t\tclientId,\n\t\thasRecursionError,\n\t\tselectedPattern,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t\treplaceBlocks,\n\t\tgetBlockEditingMode,\n\t\tsetBlockEditingMode,\n\t\tgetBlockRootClientId,\n\t] );\n\n\tconst props = useBlockProps();\n\n\tif ( hasRecursionError ) {\n\t\treturn (\n\t\t\t<div { ...props }>\n\t\t\t\t<Warning>\n\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t// translators: A warning in which %s is the name of a pattern.\n\t\t\t\t\t\t__( 'Pattern \"%s\" cannot be rendered inside itself.' ),\n\t\t\t\t\t\tselectedPattern?.name\n\t\t\t\t\t) }\n\t\t\t\t</Warning>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn <div { ...props } />;\n};\n\nexport default PatternEdit;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { cloneBlock } from '@wordpress/blocks';\nimport { useSelect, useDispatch, useRegistry } from '@wordpress/data';\nimport { useState, useEffect } from '@wordpress/element';\nimport {\n\tWarning,\n\tstore as blockEditorStore,\n\tuseBlockProps,\n} from '@wordpress/block-editor';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useParsePatternDependencies } from './recursion-detector';\n\nconst PatternEdit = ( { attributes, clientId } ) => {\n\tconst registry = useRegistry();\n\tconst selectedPattern = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).__experimentalGetParsedPattern(\n\t\t\t\tattributes.slug\n\t\t\t),\n\t\t[ attributes.slug ]\n\t);\n\n\tconst currentThemeStylesheet = useSelect(\n\t\t( select ) => select( coreStore ).getCurrentTheme()?.stylesheet,\n\t\t[]\n\t);\n\n\tconst {\n\t\treplaceBlocks,\n\t\tsetBlockEditingMode,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t} = useDispatch( blockEditorStore );\n\tconst { getBlockRootClientId, getBlockEditingMode } =\n\t\tuseSelect( blockEditorStore );\n\n\tconst [ hasRecursionError, setHasRecursionError ] = useState( false );\n\tconst parsePatternDependencies = useParsePatternDependencies();\n\n\t// Duplicated in packages/editor/src/components/start-template-options/index.js.\n\tfunction injectThemeAttributeInBlockTemplateContent( block ) {\n\t\tif (\n\t\t\tblock.innerBlocks.find(\n\t\t\t\t( innerBlock ) => innerBlock.name === 'core/template-part'\n\t\t\t)\n\t\t) {\n\t\t\tblock.innerBlocks = block.innerBlocks.map( ( innerBlock ) => {\n\t\t\t\tif (\n\t\t\t\t\tinnerBlock.name === 'core/template-part' &&\n\t\t\t\t\tinnerBlock.attributes.theme === undefined\n\t\t\t\t) {\n\t\t\t\t\tinnerBlock.attributes.theme = currentThemeStylesheet;\n\t\t\t\t}\n\t\t\t\treturn innerBlock;\n\t\t\t} );\n\t\t}\n\n\t\tif (\n\t\t\tblock.name === 'core/template-part' &&\n\t\t\tblock.attributes.theme === undefined\n\t\t) {\n\t\t\tblock.attributes.theme = currentThemeStylesheet;\n\t\t}\n\t\treturn block;\n\t}\n\n\t// Run this effect when the component loads.\n\t// This adds the Pattern's contents to the post.\n\t// This change won't be saved.\n\t// It will continue to pull from the pattern file unless changes are made to its respective template part.\n\tuseEffect( () => {\n\t\tif ( ! hasRecursionError && selectedPattern?.blocks ) {\n\t\t\ttry {\n\t\t\t\tparsePatternDependencies( selectedPattern );\n\t\t\t} catch {\n\t\t\t\tsetHasRecursionError( true );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// We batch updates to block list settings to avoid triggering cascading renders\n\t\t\t// for each container block included in a tree and optimize initial render.\n\t\t\t// Since the above uses microtasks, we need to use a microtask here as well,\n\t\t\t// because nested pattern blocks cannot be inserted if the parent block supports\n\t\t\t// inner blocks but doesn't have blockSettings in the state.\n\t\t\twindow.queueMicrotask( () => {\n\t\t\t\tconst rootClientId = getBlockRootClientId( clientId );\n\t\t\t\t// Clone blocks from the pattern before insertion to ensure they receive\n\t\t\t\t// distinct client ids. See https://github.com/WordPress/gutenberg/issues/50628.\n\t\t\t\tconst clonedBlocks = selectedPattern.blocks.map( ( block ) =>\n\t\t\t\t\tcloneBlock(\n\t\t\t\t\t\tinjectThemeAttributeInBlockTemplateContent( block )\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t\t// If the pattern has a single block and categories, we should add the\n\t\t\t\t// categories of the pattern to the block's metadata.\n\t\t\t\tif (\n\t\t\t\t\tclonedBlocks.length === 1 &&\n\t\t\t\t\tselectedPattern.categories?.length > 0\n\t\t\t\t) {\n\t\t\t\t\tclonedBlocks[ 0 ].attributes = {\n\t\t\t\t\t\t...clonedBlocks[ 0 ].attributes,\n\t\t\t\t\t\tmetadata: {\n\t\t\t\t\t\t\t...clonedBlocks[ 0 ].attributes.metadata,\n\t\t\t\t\t\t\tcategories: selectedPattern.categories,\n\t\t\t\t\t\t\tpatternName: selectedPattern.name,\n\t\t\t\t\t\t\tname:\n\t\t\t\t\t\t\t\tclonedBlocks[ 0 ].attributes.metadata.name ||\n\t\t\t\t\t\t\t\tselectedPattern.title,\n\t\t\t\t\t\t},\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t\tconst rootEditingMode = getBlockEditingMode( rootClientId );\n\t\t\t\tregistry.batch( () => {\n\t\t\t\t\t// Temporarily set the root block to default mode to allow replacing the pattern.\n\t\t\t\t\t// This could happen when the page is disabling edits of non-content blocks.\n\t\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\t\tsetBlockEditingMode( rootClientId, 'default' );\n\t\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\t\treplaceBlocks( clientId, clonedBlocks );\n\t\t\t\t\t// Restore the root block's original mode.\n\t\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\t\tsetBlockEditingMode( rootClientId, rootEditingMode );\n\t\t\t\t} );\n\t\t\t} );\n\t\t}\n\t}, [\n\t\tclientId,\n\t\thasRecursionError,\n\t\tselectedPattern,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t\treplaceBlocks,\n\t\tgetBlockEditingMode,\n\t\tsetBlockEditingMode,\n\t\tgetBlockRootClientId,\n\t] );\n\n\tconst props = useBlockProps();\n\n\tif ( hasRecursionError ) {\n\t\treturn (\n\t\t\t<div { ...props }>\n\t\t\t\t<Warning>\n\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t// translators: A warning in which %s is the name of a pattern.\n\t\t\t\t\t\t__( 'Pattern \"%s\" cannot be rendered inside itself.' ),\n\t\t\t\t\t\tselectedPattern?.name\n\t\t\t\t\t) }\n\t\t\t\t</Warning>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn <div { ...props } />;\n};\n\nexport default PatternEdit;\n"],
+  "mappings": "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",
   "names": ["blockEditorStore", "coreStore"]
 }

package/build/search/block.json

@@ -42,10 +42,6 @@
 		"query": {
 			"type": "object",
 			"default": {}
-		},
-		"isSearchFieldHidden": {
-			"type": "boolean",
-			"default": false
 		}
 	},
 	"supports": {

package/build/search/edit.cjs

@@ -65,7 +65,6 @@ function SearchEdit({
     buttonText,
     buttonPosition,
     buttonUseIcon,
-    isSearchFieldHidden,
     style
   } = attributes;
   const wasJustInsertedIntoNavigationBlock = (0, import_data.useSelect)(
@@ -120,27 +119,13 @@ function SearchEdit({
   const isButtonPositionOutside = "button-outside" === buttonPosition;
   const hasNoButton = "no-button" === buttonPosition;
   const hasOnlyButton = "button-only" === buttonPosition;
+  const isSearchFieldHidden = hasOnlyButton && !isSelected;
   const searchFieldRef = (0, import_element.useRef)();
   const buttonRef = (0, import_element.useRef)();
   const units = (0, import_components.__experimentalUseCustomUnits)({
     availableUnits: ["%", "px"],
     defaultValues: { "%": import_utils.PC_WIDTH_DEFAULT, px: import_utils.PX_WIDTH_DEFAULT }
   });
-  (0, import_element.useEffect)(() => {
-    if (hasOnlyButton && !isSelected) {
-      setAttributes({
-        isSearchFieldHidden: true
-      });
-    }
-  }, [hasOnlyButton, isSelected, setAttributes]);
-  (0, import_element.useEffect)(() => {
-    if (!hasOnlyButton || !isSelected) {
-      return;
-    }
-    setAttributes({
-      isSearchFieldHidden: false
-    });
-  }, [hasOnlyButton, isSelected, setAttributes, width]);
   const getBlockClassNames = () => {
     return (0, import_clsx.default)(
       className,
@@ -150,7 +135,7 @@ function SearchEdit({
       hasOnlyButton ? "wp-block-search__button-only" : void 0,
       !buttonUseIcon && !hasNoButton ? "wp-block-search__text-button" : void 0,
       buttonUseIcon && !hasNoButton ? "wp-block-search__icon-button" : void 0,
-      hasOnlyButton && isSearchFieldHidden ? "wp-block-search__searchfield-hidden" : void 0
+      isSearchFieldHidden ? "wp-block-search__searchfield-hidden" : void 0
     );
   };
   const buttonPositionControls = [
@@ -231,13 +216,6 @@ function SearchEdit({
         borderBottomRightRadius: borderProps.style?.borderBottomRightRadius
       } : borderProps.style
     };
-    const handleButtonClick = () => {
-      if (hasOnlyButton) {
-        setAttributes({
-          isSearchFieldHidden: !isSearchFieldHidden
-        });
-      }
-    };
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
       buttonUseIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "button",
@@ -246,7 +224,6 @@ function SearchEdit({
           className: buttonClasses,
           style: buttonStyles,
           "aria-label": buttonText ? (0, import_dom.__unstableStripHTML)(buttonText) : (0, import_i18n.__)("Search"),
-          onClick: handleButtonClick,
           ref: buttonRef,
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.Icon, { icon: import_icons.search })
         }
@@ -261,8 +238,7 @@ function SearchEdit({
           placeholder: (0, import_i18n.__)("Add button text\u2026"),
           withoutInteractiveFormatting: true,
           value: buttonText,
-          onChange: (html) => setAttributes({ buttonText: html }),
-          onClick: handleButtonClick
+          onChange: (html) => setAttributes({ buttonText: html })
         }
       )
     ] });
@@ -278,8 +254,7 @@ function SearchEdit({
           widthUnit: void 0,
           showLabel: true,
           buttonUseIcon: false,
-          buttonPosition: "button-outside",
-          isSearchFieldHidden: false
+          buttonPosition: "button-outside"
         });
       },
       dropdownMenuProps,
@@ -314,8 +289,7 @@ function SearchEdit({
             label: (0, import_i18n.__)("Button position"),
             onDeselect: () => {
               setAttributes({
-                buttonPosition: "button-outside",
-                isSearchFieldHidden: false
+                buttonPosition: "button-outside"
               });
             },
             isShownByDefault: true,
@@ -327,8 +301,7 @@ function SearchEdit({
                 label: (0, import_i18n.__)("Button position"),
                 onChange: (value) => {
                   setAttributes({
-                    buttonPosition: value,
-                    isSearchFieldHidden: value === "button-only"
+                    buttonPosition: value
                   });
                 },
                 options: buttonPositionControls

package/build/search/edit.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/search/edit.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseBlockProps,\n\tInspectorControls,\n\tRichText,\n\t__experimentalUseBorderProps as useBorderProps,\n\t__experimentalUseColorProps as useColorProps,\n\tgetTypographyClassesAndStyles as useTypographyProps,\n\tstore as blockEditorStore,\n\t__experimentalGetElementClassName,\n\tuseSettings,\n} from '@wordpress/block-editor';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { useEffect, useRef } from '@wordpress/element';\nimport {\n\tSelectControl,\n\tToggleControl,\n\tResizableBox,\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useInstanceId } from '@wordpress/compose';\nimport { Icon, search } from '@wordpress/icons';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport {\n\tPC_WIDTH_DEFAULT,\n\tPX_WIDTH_DEFAULT,\n\tMIN_WIDTH,\n\tisPercentageUnit,\n} from './utils.js';\nimport { useToolsPanelDropdownMenuProps } from '../utils/hooks';\n\n// Used to calculate border radius adjustment to avoid \"fat\" corners when\n// button is placed inside wrapper.\nconst DEFAULT_INNER_PADDING = '4px';\nconst PERCENTAGE_WIDTHS = [ 25, 50, 75, 100 ];\n\nexport default function SearchEdit( {\n\tclassName,\n\tattributes,\n\tsetAttributes,\n\ttoggleSelection,\n\tisSelected,\n\tclientId,\n} ) {\n\tconst {\n\t\tlabel,\n\t\tshowLabel,\n\t\tplaceholder,\n\t\twidth,\n\t\twidthUnit,\n\t\talign,\n\t\tbuttonText,\n\t\tbuttonPosition,\n\t\tbuttonUseIcon,\n\t\tisSearchFieldHidden,\n\t\tstyle,\n\t} = attributes;\n\n\tconst wasJustInsertedIntoNavigationBlock = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockParentsByBlockName, wasBlockJustInserted } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\treturn (\n\t\t\t\t!! getBlockParentsByBlockName( clientId, 'core/navigation' )\n\t\t\t\t\t?.length && wasBlockJustInserted( clientId )\n\t\t\t);\n\t\t},\n\t\t[ clientId ]\n\t);\n\tconst { __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\n\tuseEffect( () => {\n\t\tif ( wasJustInsertedIntoNavigationBlock ) {\n\t\t\t// This side-effect should not create an undo level.\n\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\tsetAttributes( {\n\t\t\t\tshowLabel: false,\n\t\t\t\tbuttonUseIcon: true,\n\t\t\t\tbuttonPosition: 'button-inside',\n\t\t\t} );\n\t\t}\n\t}, [\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t\twasJustInsertedIntoNavigationBlock,\n\t\tsetAttributes,\n\t] );\n\n\tconst borderRadius = style?.border?.radius;\n\tlet borderProps = useBorderProps( attributes );\n\n\t// Check for old deprecated numerical border radius. Done as a separate\n\t// check so that a borderRadius style won't overwrite the longhand\n\t// per-corner styles.\n\tif ( typeof borderRadius === 'number' ) {\n\t\tborderProps = {\n\t\t\t...borderProps,\n\t\t\tstyle: {\n\t\t\t\t...borderProps.style,\n\t\t\t\tborderRadius: `${ borderRadius }px`,\n\t\t\t},\n\t\t};\n\t}\n\n\tconst colorProps = useColorProps( attributes );\n\tconst [ fluidTypographySettings, layout ] = useSettings(\n\t\t'typography.fluid',\n\t\t'layout'\n\t);\n\tconst typographyProps = useTypographyProps( attributes, {\n\t\ttypography: {\n\t\t\tfluid: fluidTypographySettings,\n\t\t},\n\t\tlayout: {\n\t\t\twideSize: layout?.wideSize,\n\t\t},\n\t} );\n\tconst unitControlInstanceId = useInstanceId( UnitControl );\n\tconst unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`;\n\tconst isButtonPositionInside = 'button-inside' === buttonPosition;\n\tconst isButtonPositionOutside = 'button-outside' === buttonPosition;\n\tconst hasNoButton = 'no-button' === buttonPosition;\n\tconst hasOnlyButton = 'button-only' === buttonPosition;\n\tconst searchFieldRef = useRef();\n\tconst buttonRef = useRef();\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: [ '%', 'px' ],\n\t\tdefaultValues: { '%': PC_WIDTH_DEFAULT, px: PX_WIDTH_DEFAULT },\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( hasOnlyButton && ! isSelected ) {\n\t\t\tsetAttributes( {\n\t\t\t\tisSearchFieldHidden: true,\n\t\t\t} );\n\t\t}\n\t}, [ hasOnlyButton, isSelected, setAttributes ] );\n\n\t// Show the search field when width changes.\n\tuseEffect( () => {\n\t\tif ( ! hasOnlyButton || ! isSelected ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetAttributes( {\n\t\t\tisSearchFieldHidden: false,\n\t\t} );\n\t}, [ hasOnlyButton, isSelected, setAttributes, width ] );\n\n\tconst getBlockClassNames = () => {\n\t\treturn clsx(\n\t\t\tclassName,\n\t\t\tisButtonPositionInside\n\t\t\t\t? 'wp-block-search__button-inside'\n\t\t\t\t: undefined,\n\t\t\tisButtonPositionOutside\n\t\t\t\t? 'wp-block-search__button-outside'\n\t\t\t\t: undefined,\n\t\t\thasNoButton ? 'wp-block-search__no-button' : undefined,\n\t\t\thasOnlyButton ? 'wp-block-search__button-only' : undefined,\n\t\t\t! buttonUseIcon && ! hasNoButton\n\t\t\t\t? 'wp-block-search__text-button'\n\t\t\t\t: undefined,\n\t\t\tbuttonUseIcon && ! hasNoButton\n\t\t\t\t? 'wp-block-search__icon-button'\n\t\t\t\t: undefined,\n\t\t\thasOnlyButton && isSearchFieldHidden\n\t\t\t\t? 'wp-block-search__searchfield-hidden'\n\t\t\t\t: undefined\n\t\t);\n\t};\n\n\tconst buttonPositionControls = [\n\t\t{\n\t\t\tlabel: __( 'Button outside' ),\n\t\t\tvalue: 'button-outside',\n\t\t},\n\t\t{\n\t\t\tlabel: __( 'Button inside' ),\n\t\t\tvalue: 'button-inside',\n\t\t},\n\t\t{\n\t\t\tlabel: __( 'No button' ),\n\t\t\tvalue: 'no-button',\n\t\t},\n\t\t{\n\t\t\tlabel: __( 'Button only' ),\n\t\t\tvalue: 'button-only',\n\t\t},\n\t];\n\n\tconst getResizableSides = () => {\n\t\tif ( hasOnlyButton ) {\n\t\t\treturn {};\n\t\t}\n\n\t\treturn {\n\t\t\tright: align !== 'right',\n\t\t\tleft: align === 'right',\n\t\t};\n\t};\n\n\tconst renderTextField = () => {\n\t\t// If the input is inside the wrapper, the wrapper gets the border color styles/classes, not the input control.\n\t\tconst textFieldClasses = clsx(\n\t\t\t'wp-block-search__input',\n\t\t\tisButtonPositionInside ? undefined : borderProps.className,\n\t\t\ttypographyProps.className\n\t\t);\n\t\tconst textFieldStyles = {\n\t\t\t...( isButtonPositionInside\n\t\t\t\t? {\n\t\t\t\t\t\tborderRadius: borderProps.style?.borderRadius,\n\t\t\t\t\t\tborderTopLeftRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderTopLeftRadius,\n\t\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderTopRightRadius,\n\t\t\t\t\t\tborderBottomLeftRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderBottomLeftRadius,\n\t\t\t\t\t\tborderBottomRightRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderBottomRightRadius,\n\t\t\t\t  }\n\t\t\t\t: borderProps.style ),\n\t\t\t...typographyProps.style,\n\t\t\ttextDecoration: undefined,\n\t\t};\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\ttype=\"search\"\n\t\t\t\tclassName={ textFieldClasses }\n\t\t\t\tstyle={ textFieldStyles }\n\t\t\t\taria-label={ __( 'Optional placeholder text' ) }\n\t\t\t\t// We hide the placeholder field's placeholder when there is a value. This\n\t\t\t\t// stops screen readers from reading the placeholder field's placeholder\n\t\t\t\t// which is confusing.\n\t\t\t\tplaceholder={\n\t\t\t\t\tplaceholder ? undefined : __( 'Optional placeholder\u2026' )\n\t\t\t\t}\n\t\t\t\tvalue={ placeholder }\n\t\t\t\tonChange={ ( event ) =>\n\t\t\t\t\tsetAttributes( { placeholder: event.target.value } )\n\t\t\t\t}\n\t\t\t\tref={ searchFieldRef }\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst renderButton = () => {\n\t\t// If the button is inside the wrapper, the wrapper gets the border color styles/classes, not the button.\n\t\tconst buttonClasses = clsx(\n\t\t\t'wp-block-search__button',\n\t\t\tcolorProps.className,\n\t\t\ttypographyProps.className,\n\t\t\tisButtonPositionInside ? undefined : borderProps.className,\n\t\t\tbuttonUseIcon ? 'has-icon' : undefined,\n\t\t\t__experimentalGetElementClassName( 'button' )\n\t\t);\n\t\tconst buttonStyles = {\n\t\t\t...colorProps.style,\n\t\t\t...typographyProps.style,\n\t\t\t...( isButtonPositionInside\n\t\t\t\t? {\n\t\t\t\t\t\tborderRadius: borderProps.style?.borderRadius,\n\t\t\t\t\t\tborderTopLeftRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderTopLeftRadius,\n\t\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderTopRightRadius,\n\t\t\t\t\t\tborderBottomLeftRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderBottomLeftRadius,\n\t\t\t\t\t\tborderBottomRightRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderBottomRightRadius,\n\t\t\t\t  }\n\t\t\t\t: borderProps.style ),\n\t\t};\n\t\tconst handleButtonClick = () => {\n\t\t\tif ( hasOnlyButton ) {\n\t\t\t\tsetAttributes( {\n\t\t\t\t\tisSearchFieldHidden: ! isSearchFieldHidden,\n\t\t\t\t} );\n\t\t\t}\n\t\t};\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ buttonUseIcon && (\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName={ buttonClasses }\n\t\t\t\t\t\tstyle={ buttonStyles }\n\t\t\t\t\t\taria-label={\n\t\t\t\t\t\t\tbuttonText\n\t\t\t\t\t\t\t\t? stripHTML( buttonText )\n\t\t\t\t\t\t\t\t: __( 'Search' )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonClick={ handleButtonClick }\n\t\t\t\t\t\tref={ buttonRef }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon icon={ search } />\n\t\t\t\t\t</button>\n\t\t\t\t) }\n\n\t\t\t\t{ ! buttonUseIcon && (\n\t\t\t\t\t<RichText\n\t\t\t\t\t\tidentifier=\"buttonText\"\n\t\t\t\t\t\tclassName={ buttonClasses }\n\t\t\t\t\t\tstyle={ buttonStyles }\n\t\t\t\t\t\taria-label={ __( 'Button text' ) }\n\t\t\t\t\t\tplaceholder={ __( 'Add button text\u2026' ) }\n\t\t\t\t\t\twithoutInteractiveFormatting\n\t\t\t\t\t\tvalue={ buttonText }\n\t\t\t\t\t\tonChange={ ( html ) =>\n\t\t\t\t\t\t\tsetAttributes( { buttonText: html } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonClick={ handleButtonClick }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t};\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\n\tconst controls = (\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\tresetAll={ () => {\n\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\twidth: undefined,\n\t\t\t\t\t\t\twidthUnit: undefined,\n\t\t\t\t\t\t\tshowLabel: true,\n\t\t\t\t\t\t\tbuttonUseIcon: false,\n\t\t\t\t\t\t\tbuttonPosition: 'button-outside',\n\t\t\t\t\t\t\tisSearchFieldHidden: false,\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\thasValue={ () => ! showLabel }\n\t\t\t\t\t\tlabel={ __( 'Show label' ) }\n\t\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\tshowLabel: true,\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<ToggleControl\n\t\t\t\t\t\t\tchecked={ showLabel }\n\t\t\t\t\t\t\tlabel={ __( 'Show label' ) }\n\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tshowLabel: value,\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\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => buttonPosition !== 'button-outside' }\n\t\t\t\t\t\tlabel={ __( 'Button position' ) }\n\t\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\tbuttonPosition: 'button-outside',\n\t\t\t\t\t\t\t\tisSearchFieldHidden: false,\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<SelectControl\n\t\t\t\t\t\t\tvalue={ buttonPosition }\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tlabel={ __( 'Button position' ) }\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tbuttonPosition: value,\n\t\t\t\t\t\t\t\t\tisSearchFieldHidden:\n\t\t\t\t\t\t\t\t\t\tvalue === 'button-only',\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\toptions={ buttonPositionControls }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t{ buttonPosition !== 'no-button' && (\n\t\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\t\thasValue={ () => !! buttonUseIcon }\n\t\t\t\t\t\t\tlabel={ __( 'Use button with icon' ) }\n\t\t\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tbuttonUseIcon: false,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\t\tchecked={ buttonUseIcon }\n\t\t\t\t\t\t\t\tlabel={ __( 'Use button with icon' ) }\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\tbuttonUseIcon: value,\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</ToolsPanelItem>\n\t\t\t\t\t) }\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => !! width }\n\t\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\twidth: undefined,\n\t\t\t\t\t\t\t\twidthUnit: undefined,\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<VStack>\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\t\t\t\tid={ unitControlInputId } // Unused, kept for backwards compatibility\n\t\t\t\t\t\t\t\tmin={\n\t\t\t\t\t\t\t\t\tisPercentageUnit( widthUnit )\n\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t: MIN_WIDTH\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\t\tisPercentageUnit( widthUnit )\n\t\t\t\t\t\t\t\t\t\t? 100\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\t\t\tonChange={ ( newWidth ) => {\n\t\t\t\t\t\t\t\t\tconst parsedNewWidth =\n\t\t\t\t\t\t\t\t\t\tnewWidth === ''\n\t\t\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t\t\t: parseInt( newWidth, 10 );\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\twidth: parsedNewWidth,\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\tonUnitChange={ ( newUnit ) => {\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\t'%' === newUnit\n\t\t\t\t\t\t\t\t\t\t\t\t? PC_WIDTH_DEFAULT\n\t\t\t\t\t\t\t\t\t\t\t\t: PX_WIDTH_DEFAULT,\n\t\t\t\t\t\t\t\t\t\twidthUnit: newUnit,\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__unstableInputWidth=\"80px\"\n\t\t\t\t\t\t\t\tvalue={ `${ width }${ widthUnit }` }\n\t\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Percentage Width' ) }\n\t\t\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\t\t\tPERCENTAGE_WIDTHS.includes( width ) &&\n\t\t\t\t\t\t\t\t\twidthUnit === '%'\n\t\t\t\t\t\t\t\t\t\t? width\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tonChange={ ( newWidth ) => {\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\twidth: newWidth,\n\t\t\t\t\t\t\t\t\t\twidthUnit: '%',\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\tisBlock\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ PERCENTAGE_WIDTHS.map( ( widthValue ) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\t\t\t\tkey={ widthValue }\n\t\t\t\t\t\t\t\t\t\t\tvalue={ widthValue }\n\t\t\t\t\t\t\t\t\t\t\tlabel={ sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t/* translators: %d: Percentage value. */\n\t\t\t\t\t\t\t\t\t\t\t\t__( '%d%%' ),\n\t\t\t\t\t\t\t\t\t\t\t\twidthValue\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);\n\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t\t\t</VStack>\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\tconst isNonZeroBorderRadius = ( radius ) =>\n\t\tradius !== undefined && parseInt( radius, 10 ) !== 0;\n\n\tconst padBorderRadius = ( radius ) =>\n\t\tisNonZeroBorderRadius( radius )\n\t\t\t? `calc(${ radius } + ${ DEFAULT_INNER_PADDING })`\n\t\t\t: undefined;\n\n\tconst getWrapperStyles = () => {\n\t\tconst styles = isButtonPositionInside\n\t\t\t? borderProps.style\n\t\t\t: {\n\t\t\t\t\tborderRadius: borderProps.style?.borderRadius,\n\t\t\t\t\tborderTopLeftRadius: borderProps.style?.borderTopLeftRadius,\n\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\tborderProps.style?.borderTopRightRadius,\n\t\t\t\t\tborderBottomLeftRadius:\n\t\t\t\t\t\tborderProps.style?.borderBottomLeftRadius,\n\t\t\t\t\tborderBottomRightRadius:\n\t\t\t\t\t\tborderProps.style?.borderBottomRightRadius,\n\t\t\t  };\n\n\t\tif ( isButtonPositionInside ) {\n\t\t\t// We have button inside wrapper and a border radius value to apply.\n\t\t\t// Add default padding so we don't get \"fat\" corners.\n\t\t\t//\n\t\t\t// CSS calc() is used here to support non-pixel units. The inline\n\t\t\t// style using calc() will only apply if both values have units.\n\n\t\t\tif ( typeof borderRadius === 'object' ) {\n\t\t\t\t// Individual corner border radii present.\n\t\t\t\tconst {\n\t\t\t\t\tborderTopLeftRadius,\n\t\t\t\t\tborderTopRightRadius,\n\t\t\t\t\tborderBottomLeftRadius,\n\t\t\t\t\tborderBottomRightRadius,\n\t\t\t\t} = borderProps.style;\n\n\t\t\t\treturn {\n\t\t\t\t\t...styles,\n\t\t\t\t\tborderTopLeftRadius: padBorderRadius( borderTopLeftRadius ),\n\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\tpadBorderRadius( borderTopRightRadius ),\n\t\t\t\t\tborderBottomLeftRadius: padBorderRadius(\n\t\t\t\t\t\tborderBottomLeftRadius\n\t\t\t\t\t),\n\t\t\t\t\tborderBottomRightRadius: padBorderRadius(\n\t\t\t\t\t\tborderBottomRightRadius\n\t\t\t\t\t),\n\t\t\t\t};\n\t\t\t}\n\n\t\t\t// The inline style using calc() will only apply if both values\n\t\t\t// supplied to calc() have units. Deprecated block's may have\n\t\t\t// unitless integer.\n\t\t\tconst radius = Number.isInteger( borderRadius )\n\t\t\t\t? `${ borderRadius }px`\n\t\t\t\t: borderRadius;\n\n\t\t\tstyles.borderRadius = `calc(${ radius } + ${ DEFAULT_INNER_PADDING })`;\n\t\t}\n\n\t\treturn styles;\n\t};\n\n\tconst blockProps = useBlockProps( {\n\t\tclassName: getBlockClassNames(),\n\t\tstyle: {\n\t\t\t...typographyProps.style,\n\t\t\t// Input opts out of text decoration.\n\t\t\ttextDecoration: undefined,\n\t\t},\n\t} );\n\n\tconst labelClassnames = clsx(\n\t\t'wp-block-search__label',\n\t\ttypographyProps.className\n\t);\n\n\treturn (\n\t\t<div { ...blockProps }>\n\t\t\t{ controls }\n\n\t\t\t{ showLabel && (\n\t\t\t\t<RichText\n\t\t\t\t\tidentifier=\"label\"\n\t\t\t\t\tclassName={ labelClassnames }\n\t\t\t\t\taria-label={ __( 'Label text' ) }\n\t\t\t\t\tplaceholder={ __( 'Add label\u2026' ) }\n\t\t\t\t\twithoutInteractiveFormatting\n\t\t\t\t\tvalue={ label }\n\t\t\t\t\tonChange={ ( html ) => setAttributes( { label: html } ) }\n\t\t\t\t\tstyle={ typographyProps.style }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t<ResizableBox\n\t\t\t\tsize={ {\n\t\t\t\t\twidth:\n\t\t\t\t\t\twidth === undefined\n\t\t\t\t\t\t\t? 'auto'\n\t\t\t\t\t\t\t: `${ width }${ widthUnit }`,\n\t\t\t\t\theight: 'auto',\n\t\t\t\t} }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'wp-block-search__inside-wrapper',\n\t\t\t\t\tisButtonPositionInside ? borderProps.className : undefined\n\t\t\t\t) }\n\t\t\t\tstyle={ getWrapperStyles() }\n\t\t\t\tminWidth={ MIN_WIDTH }\n\t\t\t\tenable={ getResizableSides() }\n\t\t\t\tonResizeStart={ ( event, direction, elt ) => {\n\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\twidth: parseInt( elt.offsetWidth, 10 ),\n\t\t\t\t\t\twidthUnit: 'px',\n\t\t\t\t\t} );\n\t\t\t\t\ttoggleSelection( false );\n\t\t\t\t} }\n\t\t\t\tonResizeStop={ ( event, direction, elt, delta ) => {\n\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\twidth: parseInt( width + delta.width, 10 ),\n\t\t\t\t\t} );\n\t\t\t\t\ttoggleSelection( true );\n\t\t\t\t} }\n\t\t\t\tshowHandle={ isSelected }\n\t\t\t>\n\t\t\t\t{ ( isButtonPositionInside ||\n\t\t\t\t\tisButtonPositionOutside ||\n\t\t\t\t\thasOnlyButton ) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ renderTextField() }\n\t\t\t\t\t\t{ renderButton() }\n\t\t\t\t\t</>\n\t\t\t\t) }\n\n\t\t\t\t{ hasNoButton && renderTextField() }\n\t\t\t</ResizableBox>\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 {\n\tuseBlockProps,\n\tInspectorControls,\n\tRichText,\n\t__experimentalUseBorderProps as useBorderProps,\n\t__experimentalUseColorProps as useColorProps,\n\tgetTypographyClassesAndStyles as useTypographyProps,\n\tstore as blockEditorStore,\n\t__experimentalGetElementClassName,\n\tuseSettings,\n} from '@wordpress/block-editor';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { useEffect, useRef } from '@wordpress/element';\nimport {\n\tSelectControl,\n\tToggleControl,\n\tResizableBox,\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useInstanceId } from '@wordpress/compose';\nimport { Icon, search } from '@wordpress/icons';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport {\n\tPC_WIDTH_DEFAULT,\n\tPX_WIDTH_DEFAULT,\n\tMIN_WIDTH,\n\tisPercentageUnit,\n} from './utils.js';\nimport { useToolsPanelDropdownMenuProps } from '../utils/hooks';\n\n// Used to calculate border radius adjustment to avoid \"fat\" corners when\n// button is placed inside wrapper.\nconst DEFAULT_INNER_PADDING = '4px';\nconst PERCENTAGE_WIDTHS = [ 25, 50, 75, 100 ];\n\nexport default function SearchEdit( {\n\tclassName,\n\tattributes,\n\tsetAttributes,\n\ttoggleSelection,\n\tisSelected,\n\tclientId,\n} ) {\n\tconst {\n\t\tlabel,\n\t\tshowLabel,\n\t\tplaceholder,\n\t\twidth,\n\t\twidthUnit,\n\t\talign,\n\t\tbuttonText,\n\t\tbuttonPosition,\n\t\tbuttonUseIcon,\n\t\tstyle,\n\t} = attributes;\n\n\tconst wasJustInsertedIntoNavigationBlock = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockParentsByBlockName, wasBlockJustInserted } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\treturn (\n\t\t\t\t!! getBlockParentsByBlockName( clientId, 'core/navigation' )\n\t\t\t\t\t?.length && wasBlockJustInserted( clientId )\n\t\t\t);\n\t\t},\n\t\t[ clientId ]\n\t);\n\tconst { __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\n\tuseEffect( () => {\n\t\tif ( wasJustInsertedIntoNavigationBlock ) {\n\t\t\t// This side-effect should not create an undo level.\n\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\tsetAttributes( {\n\t\t\t\tshowLabel: false,\n\t\t\t\tbuttonUseIcon: true,\n\t\t\t\tbuttonPosition: 'button-inside',\n\t\t\t} );\n\t\t}\n\t}, [\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t\twasJustInsertedIntoNavigationBlock,\n\t\tsetAttributes,\n\t] );\n\n\tconst borderRadius = style?.border?.radius;\n\tlet borderProps = useBorderProps( attributes );\n\n\t// Check for old deprecated numerical border radius. Done as a separate\n\t// check so that a borderRadius style won't overwrite the longhand\n\t// per-corner styles.\n\tif ( typeof borderRadius === 'number' ) {\n\t\tborderProps = {\n\t\t\t...borderProps,\n\t\t\tstyle: {\n\t\t\t\t...borderProps.style,\n\t\t\t\tborderRadius: `${ borderRadius }px`,\n\t\t\t},\n\t\t};\n\t}\n\n\tconst colorProps = useColorProps( attributes );\n\tconst [ fluidTypographySettings, layout ] = useSettings(\n\t\t'typography.fluid',\n\t\t'layout'\n\t);\n\tconst typographyProps = useTypographyProps( attributes, {\n\t\ttypography: {\n\t\t\tfluid: fluidTypographySettings,\n\t\t},\n\t\tlayout: {\n\t\t\twideSize: layout?.wideSize,\n\t\t},\n\t} );\n\tconst unitControlInstanceId = useInstanceId( UnitControl );\n\tconst unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`;\n\tconst isButtonPositionInside = 'button-inside' === buttonPosition;\n\tconst isButtonPositionOutside = 'button-outside' === buttonPosition;\n\tconst hasNoButton = 'no-button' === buttonPosition;\n\tconst hasOnlyButton = 'button-only' === buttonPosition;\n\tconst isSearchFieldHidden = hasOnlyButton && ! isSelected;\n\tconst searchFieldRef = useRef();\n\tconst buttonRef = useRef();\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: [ '%', 'px' ],\n\t\tdefaultValues: { '%': PC_WIDTH_DEFAULT, px: PX_WIDTH_DEFAULT },\n\t} );\n\n\tconst getBlockClassNames = () => {\n\t\treturn clsx(\n\t\t\tclassName,\n\t\t\tisButtonPositionInside\n\t\t\t\t? 'wp-block-search__button-inside'\n\t\t\t\t: undefined,\n\t\t\tisButtonPositionOutside\n\t\t\t\t? 'wp-block-search__button-outside'\n\t\t\t\t: undefined,\n\t\t\thasNoButton ? 'wp-block-search__no-button' : undefined,\n\t\t\thasOnlyButton ? 'wp-block-search__button-only' : undefined,\n\t\t\t! buttonUseIcon && ! hasNoButton\n\t\t\t\t? 'wp-block-search__text-button'\n\t\t\t\t: undefined,\n\t\t\tbuttonUseIcon && ! hasNoButton\n\t\t\t\t? 'wp-block-search__icon-button'\n\t\t\t\t: undefined,\n\t\t\tisSearchFieldHidden\n\t\t\t\t? 'wp-block-search__searchfield-hidden'\n\t\t\t\t: undefined\n\t\t);\n\t};\n\n\tconst buttonPositionControls = [\n\t\t{\n\t\t\tlabel: __( 'Button outside' ),\n\t\t\tvalue: 'button-outside',\n\t\t},\n\t\t{\n\t\t\tlabel: __( 'Button inside' ),\n\t\t\tvalue: 'button-inside',\n\t\t},\n\t\t{\n\t\t\tlabel: __( 'No button' ),\n\t\t\tvalue: 'no-button',\n\t\t},\n\t\t{\n\t\t\tlabel: __( 'Button only' ),\n\t\t\tvalue: 'button-only',\n\t\t},\n\t];\n\n\tconst getResizableSides = () => {\n\t\tif ( hasOnlyButton ) {\n\t\t\treturn {};\n\t\t}\n\n\t\treturn {\n\t\t\tright: align !== 'right',\n\t\t\tleft: align === 'right',\n\t\t};\n\t};\n\n\tconst renderTextField = () => {\n\t\t// If the input is inside the wrapper, the wrapper gets the border color styles/classes, not the input control.\n\t\tconst textFieldClasses = clsx(\n\t\t\t'wp-block-search__input',\n\t\t\tisButtonPositionInside ? undefined : borderProps.className,\n\t\t\ttypographyProps.className\n\t\t);\n\t\tconst textFieldStyles = {\n\t\t\t...( isButtonPositionInside\n\t\t\t\t? {\n\t\t\t\t\t\tborderRadius: borderProps.style?.borderRadius,\n\t\t\t\t\t\tborderTopLeftRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderTopLeftRadius,\n\t\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderTopRightRadius,\n\t\t\t\t\t\tborderBottomLeftRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderBottomLeftRadius,\n\t\t\t\t\t\tborderBottomRightRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderBottomRightRadius,\n\t\t\t\t  }\n\t\t\t\t: borderProps.style ),\n\t\t\t...typographyProps.style,\n\t\t\ttextDecoration: undefined,\n\t\t};\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\ttype=\"search\"\n\t\t\t\tclassName={ textFieldClasses }\n\t\t\t\tstyle={ textFieldStyles }\n\t\t\t\taria-label={ __( 'Optional placeholder text' ) }\n\t\t\t\t// We hide the placeholder field's placeholder when there is a value. This\n\t\t\t\t// stops screen readers from reading the placeholder field's placeholder\n\t\t\t\t// which is confusing.\n\t\t\t\tplaceholder={\n\t\t\t\t\tplaceholder ? undefined : __( 'Optional placeholder\u2026' )\n\t\t\t\t}\n\t\t\t\tvalue={ placeholder }\n\t\t\t\tonChange={ ( event ) =>\n\t\t\t\t\tsetAttributes( { placeholder: event.target.value } )\n\t\t\t\t}\n\t\t\t\tref={ searchFieldRef }\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst renderButton = () => {\n\t\t// If the button is inside the wrapper, the wrapper gets the border color styles/classes, not the button.\n\t\tconst buttonClasses = clsx(\n\t\t\t'wp-block-search__button',\n\t\t\tcolorProps.className,\n\t\t\ttypographyProps.className,\n\t\t\tisButtonPositionInside ? undefined : borderProps.className,\n\t\t\tbuttonUseIcon ? 'has-icon' : undefined,\n\t\t\t__experimentalGetElementClassName( 'button' )\n\t\t);\n\t\tconst buttonStyles = {\n\t\t\t...colorProps.style,\n\t\t\t...typographyProps.style,\n\t\t\t...( isButtonPositionInside\n\t\t\t\t? {\n\t\t\t\t\t\tborderRadius: borderProps.style?.borderRadius,\n\t\t\t\t\t\tborderTopLeftRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderTopLeftRadius,\n\t\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderTopRightRadius,\n\t\t\t\t\t\tborderBottomLeftRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderBottomLeftRadius,\n\t\t\t\t\t\tborderBottomRightRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderBottomRightRadius,\n\t\t\t\t  }\n\t\t\t\t: borderProps.style ),\n\t\t};\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ buttonUseIcon && (\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName={ buttonClasses }\n\t\t\t\t\t\tstyle={ buttonStyles }\n\t\t\t\t\t\taria-label={\n\t\t\t\t\t\t\tbuttonText\n\t\t\t\t\t\t\t\t? stripHTML( buttonText )\n\t\t\t\t\t\t\t\t: __( 'Search' )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tref={ buttonRef }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon icon={ search } />\n\t\t\t\t\t</button>\n\t\t\t\t) }\n\n\t\t\t\t{ ! buttonUseIcon && (\n\t\t\t\t\t<RichText\n\t\t\t\t\t\tidentifier=\"buttonText\"\n\t\t\t\t\t\tclassName={ buttonClasses }\n\t\t\t\t\t\tstyle={ buttonStyles }\n\t\t\t\t\t\taria-label={ __( 'Button text' ) }\n\t\t\t\t\t\tplaceholder={ __( 'Add button text\u2026' ) }\n\t\t\t\t\t\twithoutInteractiveFormatting\n\t\t\t\t\t\tvalue={ buttonText }\n\t\t\t\t\t\tonChange={ ( html ) =>\n\t\t\t\t\t\t\tsetAttributes( { buttonText: html } )\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);\n\t};\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\n\tconst controls = (\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\tresetAll={ () => {\n\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\twidth: undefined,\n\t\t\t\t\t\t\twidthUnit: undefined,\n\t\t\t\t\t\t\tshowLabel: true,\n\t\t\t\t\t\t\tbuttonUseIcon: false,\n\t\t\t\t\t\t\tbuttonPosition: 'button-outside',\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\thasValue={ () => ! showLabel }\n\t\t\t\t\t\tlabel={ __( 'Show label' ) }\n\t\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\tshowLabel: true,\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<ToggleControl\n\t\t\t\t\t\t\tchecked={ showLabel }\n\t\t\t\t\t\t\tlabel={ __( 'Show label' ) }\n\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tshowLabel: value,\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\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => buttonPosition !== 'button-outside' }\n\t\t\t\t\t\tlabel={ __( 'Button position' ) }\n\t\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\tbuttonPosition: 'button-outside',\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<SelectControl\n\t\t\t\t\t\t\tvalue={ buttonPosition }\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tlabel={ __( 'Button position' ) }\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tbuttonPosition: value,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\toptions={ buttonPositionControls }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t{ buttonPosition !== 'no-button' && (\n\t\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\t\thasValue={ () => !! buttonUseIcon }\n\t\t\t\t\t\t\tlabel={ __( 'Use button with icon' ) }\n\t\t\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tbuttonUseIcon: false,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\t\tchecked={ buttonUseIcon }\n\t\t\t\t\t\t\t\tlabel={ __( 'Use button with icon' ) }\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\tbuttonUseIcon: value,\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</ToolsPanelItem>\n\t\t\t\t\t) }\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => !! width }\n\t\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\twidth: undefined,\n\t\t\t\t\t\t\t\twidthUnit: undefined,\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<VStack>\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\t\t\t\tid={ unitControlInputId } // Unused, kept for backwards compatibility\n\t\t\t\t\t\t\t\tmin={\n\t\t\t\t\t\t\t\t\tisPercentageUnit( widthUnit )\n\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t: MIN_WIDTH\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\t\tisPercentageUnit( widthUnit )\n\t\t\t\t\t\t\t\t\t\t? 100\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\t\t\tonChange={ ( newWidth ) => {\n\t\t\t\t\t\t\t\t\tconst parsedNewWidth =\n\t\t\t\t\t\t\t\t\t\tnewWidth === ''\n\t\t\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t\t\t: parseInt( newWidth, 10 );\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\twidth: parsedNewWidth,\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\tonUnitChange={ ( newUnit ) => {\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\t'%' === newUnit\n\t\t\t\t\t\t\t\t\t\t\t\t? PC_WIDTH_DEFAULT\n\t\t\t\t\t\t\t\t\t\t\t\t: PX_WIDTH_DEFAULT,\n\t\t\t\t\t\t\t\t\t\twidthUnit: newUnit,\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__unstableInputWidth=\"80px\"\n\t\t\t\t\t\t\t\tvalue={ `${ width }${ widthUnit }` }\n\t\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Percentage Width' ) }\n\t\t\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\t\t\tPERCENTAGE_WIDTHS.includes( width ) &&\n\t\t\t\t\t\t\t\t\twidthUnit === '%'\n\t\t\t\t\t\t\t\t\t\t? width\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tonChange={ ( newWidth ) => {\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\twidth: newWidth,\n\t\t\t\t\t\t\t\t\t\twidthUnit: '%',\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\tisBlock\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ PERCENTAGE_WIDTHS.map( ( widthValue ) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\t\t\t\tkey={ widthValue }\n\t\t\t\t\t\t\t\t\t\t\tvalue={ widthValue }\n\t\t\t\t\t\t\t\t\t\t\tlabel={ sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t/* translators: %d: Percentage value. */\n\t\t\t\t\t\t\t\t\t\t\t\t__( '%d%%' ),\n\t\t\t\t\t\t\t\t\t\t\t\twidthValue\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);\n\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t\t\t</VStack>\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\tconst isNonZeroBorderRadius = ( radius ) =>\n\t\tradius !== undefined && parseInt( radius, 10 ) !== 0;\n\n\tconst padBorderRadius = ( radius ) =>\n\t\tisNonZeroBorderRadius( radius )\n\t\t\t? `calc(${ radius } + ${ DEFAULT_INNER_PADDING })`\n\t\t\t: undefined;\n\n\tconst getWrapperStyles = () => {\n\t\tconst styles = isButtonPositionInside\n\t\t\t? borderProps.style\n\t\t\t: {\n\t\t\t\t\tborderRadius: borderProps.style?.borderRadius,\n\t\t\t\t\tborderTopLeftRadius: borderProps.style?.borderTopLeftRadius,\n\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\tborderProps.style?.borderTopRightRadius,\n\t\t\t\t\tborderBottomLeftRadius:\n\t\t\t\t\t\tborderProps.style?.borderBottomLeftRadius,\n\t\t\t\t\tborderBottomRightRadius:\n\t\t\t\t\t\tborderProps.style?.borderBottomRightRadius,\n\t\t\t  };\n\n\t\tif ( isButtonPositionInside ) {\n\t\t\t// We have button inside wrapper and a border radius value to apply.\n\t\t\t// Add default padding so we don't get \"fat\" corners.\n\t\t\t//\n\t\t\t// CSS calc() is used here to support non-pixel units. The inline\n\t\t\t// style using calc() will only apply if both values have units.\n\n\t\t\tif ( typeof borderRadius === 'object' ) {\n\t\t\t\t// Individual corner border radii present.\n\t\t\t\tconst {\n\t\t\t\t\tborderTopLeftRadius,\n\t\t\t\t\tborderTopRightRadius,\n\t\t\t\t\tborderBottomLeftRadius,\n\t\t\t\t\tborderBottomRightRadius,\n\t\t\t\t} = borderProps.style;\n\n\t\t\t\treturn {\n\t\t\t\t\t...styles,\n\t\t\t\t\tborderTopLeftRadius: padBorderRadius( borderTopLeftRadius ),\n\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\tpadBorderRadius( borderTopRightRadius ),\n\t\t\t\t\tborderBottomLeftRadius: padBorderRadius(\n\t\t\t\t\t\tborderBottomLeftRadius\n\t\t\t\t\t),\n\t\t\t\t\tborderBottomRightRadius: padBorderRadius(\n\t\t\t\t\t\tborderBottomRightRadius\n\t\t\t\t\t),\n\t\t\t\t};\n\t\t\t}\n\n\t\t\t// The inline style using calc() will only apply if both values\n\t\t\t// supplied to calc() have units. Deprecated block's may have\n\t\t\t// unitless integer.\n\t\t\tconst radius = Number.isInteger( borderRadius )\n\t\t\t\t? `${ borderRadius }px`\n\t\t\t\t: borderRadius;\n\n\t\t\tstyles.borderRadius = `calc(${ radius } + ${ DEFAULT_INNER_PADDING })`;\n\t\t}\n\n\t\treturn styles;\n\t};\n\n\tconst blockProps = useBlockProps( {\n\t\tclassName: getBlockClassNames(),\n\t\tstyle: {\n\t\t\t...typographyProps.style,\n\t\t\t// Input opts out of text decoration.\n\t\t\ttextDecoration: undefined,\n\t\t},\n\t} );\n\n\tconst labelClassnames = clsx(\n\t\t'wp-block-search__label',\n\t\ttypographyProps.className\n\t);\n\n\treturn (\n\t\t<div { ...blockProps }>\n\t\t\t{ controls }\n\n\t\t\t{ showLabel && (\n\t\t\t\t<RichText\n\t\t\t\t\tidentifier=\"label\"\n\t\t\t\t\tclassName={ labelClassnames }\n\t\t\t\t\taria-label={ __( 'Label text' ) }\n\t\t\t\t\tplaceholder={ __( 'Add label\u2026' ) }\n\t\t\t\t\twithoutInteractiveFormatting\n\t\t\t\t\tvalue={ label }\n\t\t\t\t\tonChange={ ( html ) => setAttributes( { label: html } ) }\n\t\t\t\t\tstyle={ typographyProps.style }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t<ResizableBox\n\t\t\t\tsize={ {\n\t\t\t\t\twidth:\n\t\t\t\t\t\twidth === undefined\n\t\t\t\t\t\t\t? 'auto'\n\t\t\t\t\t\t\t: `${ width }${ widthUnit }`,\n\t\t\t\t\theight: 'auto',\n\t\t\t\t} }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'wp-block-search__inside-wrapper',\n\t\t\t\t\tisButtonPositionInside ? borderProps.className : undefined\n\t\t\t\t) }\n\t\t\t\tstyle={ getWrapperStyles() }\n\t\t\t\tminWidth={ MIN_WIDTH }\n\t\t\t\tenable={ getResizableSides() }\n\t\t\t\tonResizeStart={ ( event, direction, elt ) => {\n\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\twidth: parseInt( elt.offsetWidth, 10 ),\n\t\t\t\t\t\twidthUnit: 'px',\n\t\t\t\t\t} );\n\t\t\t\t\ttoggleSelection( false );\n\t\t\t\t} }\n\t\t\t\tonResizeStop={ ( event, direction, elt, delta ) => {\n\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\twidth: parseInt( width + delta.width, 10 ),\n\t\t\t\t\t} );\n\t\t\t\t\ttoggleSelection( true );\n\t\t\t\t} }\n\t\t\t\tshowHandle={ isSelected }\n\t\t\t>\n\t\t\t\t{ ( isButtonPositionInside ||\n\t\t\t\t\tisButtonPositionOutside ||\n\t\t\t\t\thasOnlyButton ) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ renderTextField() }\n\t\t\t\t\t\t{ renderButton() }\n\t\t\t\t\t</>\n\t\t\t\t) }\n\n\t\t\t\t{ hasNoButton && renderTextField() }\n\t\t\t</ResizableBox>\n\t\t</div>\n\t);\n}\n"],
+  "mappings": "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",
   "names": ["blockEditorStore", "useBorderProps", "useColorProps", "useTypographyProps", "UnitControl", "useCustomUnits", "clsx", "stripHTML", "ToolsPanel", "ToolsPanelItem", "VStack", "ToggleGroupControl", "ToggleGroupControlOption"]
 }

package/build-module/code/edit.mjs

@@ -24,7 +24,8 @@ function CodeEdit({
       "aria-label": __("Code"),
       preserveWhiteSpace: true,
       __unstablePastePlainText: true,
-      __unstableOnSplitAtDoubleLineEnd: () => insertBlocksAfter(createBlock(getDefaultBlockName()))
+      __unstableOnSplitAtDoubleLineEnd: () => insertBlocksAfter(createBlock(getDefaultBlockName())),
+      style: { whiteSpace: "break-spaces" }
     }
   ) });
 }

package/build-module/code/edit.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/code/edit.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { RichText, useBlockProps } from '@wordpress/block-editor';\nimport { createBlock, getDefaultBlockName } from '@wordpress/blocks';\n\nexport default function CodeEdit( {\n\tattributes,\n\tsetAttributes,\n\tonRemove,\n\tinsertBlocksAfter,\n\tmergeBlocks,\n} ) {\n\tconst blockProps = useBlockProps();\n\treturn (\n\t\t<pre { ...blockProps }>\n\t\t\t<RichText\n\t\t\t\ttagName=\"code\"\n\t\t\t\tidentifier=\"content\"\n\t\t\t\tvalue={ attributes.content }\n\t\t\t\tonChange={ ( content ) => setAttributes( { content } ) }\n\t\t\t\tonRemove={ onRemove }\n\t\t\t\tonMerge={ mergeBlocks }\n\t\t\t\tplaceholder={ __( 'Write code\u2026' ) }\n\t\t\t\taria-label={ __( 'Code' ) }\n\t\t\t\tpreserveWhiteSpace\n\t\t\t\t__unstablePastePlainText\n\t\t\t\t__unstableOnSplitAtDoubleLineEnd={ () =>\n\t\t\t\t\tinsertBlocksAfter( createBlock( getDefaultBlockName() ) )\n\t\t\t\t}\n\t\t\t/>\n\t\t</pre>\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,UAAU,qBAAqB;AACxC,SAAS,aAAa,2BAA2B;AAY9C;AAVY,SAAR,SAA2B;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,aAAa,cAAc;AACjC,SACC,oBAAC,SAAM,GAAG,YACT;AAAA,IAAC;AAAA;AAAA,MACA,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAQ,WAAW;AAAA,MACnB,UAAW,CAAE,YAAa,cAAe,EAAE,QAAQ,CAAE;AAAA,MACrD;AAAA,MACA,SAAU;AAAA,MACV,aAAc,GAAI,kBAAc;AAAA,MAChC,cAAa,GAAI,MAAO;AAAA,MACxB,oBAAkB;AAAA,MAClB,0BAAwB;AAAA,MACxB,kCAAmC,MAClC,kBAAmB,YAAa,oBAAoB,CAAE,CAAE;AAAA;AAAA,EAE1D,GACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { RichText, useBlockProps } from '@wordpress/block-editor';\nimport { createBlock, getDefaultBlockName } from '@wordpress/blocks';\n\nexport default function CodeEdit( {\n\tattributes,\n\tsetAttributes,\n\tonRemove,\n\tinsertBlocksAfter,\n\tmergeBlocks,\n} ) {\n\tconst blockProps = useBlockProps();\n\treturn (\n\t\t<pre { ...blockProps }>\n\t\t\t<RichText\n\t\t\t\ttagName=\"code\"\n\t\t\t\tidentifier=\"content\"\n\t\t\t\tvalue={ attributes.content }\n\t\t\t\tonChange={ ( content ) => setAttributes( { content } ) }\n\t\t\t\tonRemove={ onRemove }\n\t\t\t\tonMerge={ mergeBlocks }\n\t\t\t\tplaceholder={ __( 'Write code\u2026' ) }\n\t\t\t\taria-label={ __( 'Code' ) }\n\t\t\t\tpreserveWhiteSpace\n\t\t\t\t__unstablePastePlainText\n\t\t\t\t__unstableOnSplitAtDoubleLineEnd={ () =>\n\t\t\t\t\tinsertBlocksAfter( createBlock( getDefaultBlockName() ) )\n\t\t\t\t}\n\t\t\t\tstyle={ { whiteSpace: 'break-spaces' } }\n\t\t\t/>\n\t\t</pre>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,UAAU,qBAAqB;AACxC,SAAS,aAAa,2BAA2B;AAY9C;AAVY,SAAR,SAA2B;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,aAAa,cAAc;AACjC,SACC,oBAAC,SAAM,GAAG,YACT;AAAA,IAAC;AAAA;AAAA,MACA,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAQ,WAAW;AAAA,MACnB,UAAW,CAAE,YAAa,cAAe,EAAE,QAAQ,CAAE;AAAA,MACrD;AAAA,MACA,SAAU;AAAA,MACV,aAAc,GAAI,kBAAc;AAAA,MAChC,cAAa,GAAI,MAAO;AAAA,MACxB,oBAAkB;AAAA,MAClB,0BAAwB;AAAA,MACxB,kCAAmC,MAClC,kBAAmB,YAAa,oBAAoB,CAAE,CAAE;AAAA,MAEzD,OAAQ,EAAE,YAAY,eAAe;AAAA;AAAA,EACtC,GACD;AAEF;",
   "names": []
 }

package/build-module/cover/edit/color-utils.mjs

@@ -44,7 +44,7 @@ var getMediaColor = memoize(async (url) => {
       crossOrigin: imgCrossOrigin
     });
     return color.hex;
-  } catch (error) {
+  } catch {
     return DEFAULT_BACKGROUND_COLOR;
   }
 });

package/build-module/cover/edit/color-utils.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/cover/edit/color-utils.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport { FastAverageColor } from 'fast-average-color';\nimport memoize from 'memize';\n\n/**\n * WordPress dependencies\n */\nimport { applyFilters } from '@wordpress/hooks';\n\n/**\n * @typedef {import('colord').RgbaColor} RgbaColor\n */\n\nextend( [ namesPlugin ] );\n\n/**\n * Fallback color when the average color can't be computed. The image may be\n * rendering as transparent, and most sites have a light color background.\n */\nexport const DEFAULT_BACKGROUND_COLOR = '#FFF';\n\n/**\n * Default dim color specified in style.css.\n */\nexport const DEFAULT_OVERLAY_COLOR = '#000';\n\n/**\n * Performs a Porter Duff composite source over operation on two rgba colors.\n *\n * @see {@link https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcover}\n *\n * @param {RgbaColor} source Source color.\n * @param {RgbaColor} dest   Destination color.\n *\n * @return {RgbaColor} Composite color.\n */\nexport function compositeSourceOver( source, dest ) {\n\treturn {\n\t\tr: source.r * source.a + dest.r * dest.a * ( 1 - source.a ),\n\t\tg: source.g * source.a + dest.g * dest.a * ( 1 - source.a ),\n\t\tb: source.b * source.a + dest.b * dest.a * ( 1 - source.a ),\n\t\ta: source.a + dest.a * ( 1 - source.a ),\n\t};\n}\n\n/**\n * Retrieves the FastAverageColor singleton.\n *\n * @return {FastAverageColor} The FastAverageColor singleton.\n */\nexport function retrieveFastAverageColor() {\n\tif ( ! retrieveFastAverageColor.fastAverageColor ) {\n\t\tretrieveFastAverageColor.fastAverageColor = new FastAverageColor();\n\t}\n\treturn retrieveFastAverageColor.fastAverageColor;\n}\n\n/**\n * Computes the average color of an image.\n *\n * @param {string} url The url of the image.\n *\n * @return {Promise<string>} Promise of an average color as a hex string.\n */\nexport const getMediaColor = memoize( async ( url ) => {\n\tif ( ! url ) {\n\t\treturn DEFAULT_BACKGROUND_COLOR;\n\t}\n\n\t// making the default color rgb for compat with FAC\n\tconst { r, g, b, a } = colord( DEFAULT_BACKGROUND_COLOR ).toRgb();\n\n\ttry {\n\t\tconst imgCrossOrigin = applyFilters(\n\t\t\t'media.crossOrigin',\n\t\t\tundefined,\n\t\t\turl\n\t\t);\n\t\tconst color = await retrieveFastAverageColor().getColorAsync( url, {\n\t\t\t// The default color is white, which is the color\n\t\t\t// that is returned if there's an error.\n\t\t\t// colord returns alpga 0-1, FAC needs 0-255\n\t\t\tdefaultColor: [ r, g, b, a * 255 ],\n\t\t\t// Errors that come up don't reject the promise,\n\t\t\t// so error logging has to be silenced\n\t\t\t// with this option.\n\t\t\tsilent: process.env.NODE_ENV === 'production',\n\t\t\tcrossOrigin: imgCrossOrigin,\n\t\t} );\n\t\treturn color.hex;\n\t} catch ( error ) {\n\t\t// If there's an error return the fallback color.\n\t\treturn DEFAULT_BACKGROUND_COLOR;\n\t}\n} );\n\n/**\n * Computes if the color combination of the overlay and background color is dark.\n *\n * @param {number} dimRatio        Opacity of the overlay between 0 and 100.\n * @param {string} overlayColor    CSS color string for the overlay.\n * @param {string} backgroundColor CSS color string for the background.\n *\n * @return {boolean} true if the color combination composite result is dark.\n */\nexport function compositeIsDark( dimRatio, overlayColor, backgroundColor ) {\n\t// Opacity doesn't matter if you're overlaying the same color on top of itself.\n\t// And background doesn't matter when overlay is fully opaque.\n\tif ( overlayColor === backgroundColor || dimRatio === 100 ) {\n\t\treturn colord( overlayColor ).isDark();\n\t}\n\tconst overlay = colord( overlayColor )\n\t\t.alpha( dimRatio / 100 )\n\t\t.toRgb();\n\tconst background = colord( backgroundColor ).toRgb();\n\tconst composite = compositeSourceOver( overlay, background );\n\treturn colord( composite ).isDark();\n}\n"],
-  "mappings": ";AAGA,SAAS,QAAQ,cAAc;AAC/B,OAAO,iBAAiB;AACxB,SAAS,wBAAwB;AACjC,OAAO,aAAa;AAKpB,SAAS,oBAAoB;AAM7B,OAAQ,CAAE,WAAY,CAAE;AAMjB,IAAM,2BAA2B;AAKjC,IAAM,wBAAwB;AAY9B,SAAS,oBAAqB,QAAQ,MAAO;AACnD,SAAO;AAAA,IACN,GAAG,OAAO,IAAI,OAAO,IAAI,KAAK,IAAI,KAAK,KAAM,IAAI,OAAO;AAAA,IACxD,GAAG,OAAO,IAAI,OAAO,IAAI,KAAK,IAAI,KAAK,KAAM,IAAI,OAAO;AAAA,IACxD,GAAG,OAAO,IAAI,OAAO,IAAI,KAAK,IAAI,KAAK,KAAM,IAAI,OAAO;AAAA,IACxD,GAAG,OAAO,IAAI,KAAK,KAAM,IAAI,OAAO;AAAA,EACrC;AACD;AAOO,SAAS,2BAA2B;AAC1C,MAAK,CAAE,yBAAyB,kBAAmB;AAClD,6BAAyB,mBAAmB,IAAI,iBAAiB;AAAA,EAClE;AACA,SAAO,yBAAyB;AACjC;AASO,IAAM,gBAAgB,QAAS,OAAQ,QAAS;AACtD,MAAK,CAAE,KAAM;AACZ,WAAO;AAAA,EACR;AAGA,QAAM,EAAE,GAAG,GAAG,GAAG,EAAE,IAAI,OAAQ,wBAAyB,EAAE,MAAM;AAEhE,MAAI;AACH,UAAM,iBAAiB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,IACD;AACA,UAAM,QAAQ,MAAM,yBAAyB,EAAE,cAAe,KAAK;AAAA;AAAA;AAAA;AAAA,MAIlE,cAAc,CAAE,GAAG,GAAG,GAAG,IAAI,GAAI;AAAA;AAAA;AAAA;AAAA,MAIjC,QAAQ,QAAQ,IAAI,aAAa;AAAA,MACjC,aAAa;AAAA,IACd,CAAE;AACF,WAAO,MAAM;AAAA,EACd,SAAU,OAAQ;AAEjB,WAAO;AAAA,EACR;AACD,CAAE;AAWK,SAAS,gBAAiB,UAAU,cAAc,iBAAkB;AAG1E,MAAK,iBAAiB,mBAAmB,aAAa,KAAM;AAC3D,WAAO,OAAQ,YAAa,EAAE,OAAO;AAAA,EACtC;AACA,QAAM,UAAU,OAAQ,YAAa,EACnC,MAAO,WAAW,GAAI,EACtB,MAAM;AACR,QAAM,aAAa,OAAQ,eAAgB,EAAE,MAAM;AACnD,QAAM,YAAY,oBAAqB,SAAS,UAAW;AAC3D,SAAO,OAAQ,SAAU,EAAE,OAAO;AACnC;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport { FastAverageColor } from 'fast-average-color';\nimport memoize from 'memize';\n\n/**\n * WordPress dependencies\n */\nimport { applyFilters } from '@wordpress/hooks';\n\n/**\n * @typedef {import('colord').RgbaColor} RgbaColor\n */\n\nextend( [ namesPlugin ] );\n\n/**\n * Fallback color when the average color can't be computed. The image may be\n * rendering as transparent, and most sites have a light color background.\n */\nexport const DEFAULT_BACKGROUND_COLOR = '#FFF';\n\n/**\n * Default dim color specified in style.css.\n */\nexport const DEFAULT_OVERLAY_COLOR = '#000';\n\n/**\n * Performs a Porter Duff composite source over operation on two rgba colors.\n *\n * @see {@link https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcover}\n *\n * @param {RgbaColor} source Source color.\n * @param {RgbaColor} dest   Destination color.\n *\n * @return {RgbaColor} Composite color.\n */\nexport function compositeSourceOver( source, dest ) {\n\treturn {\n\t\tr: source.r * source.a + dest.r * dest.a * ( 1 - source.a ),\n\t\tg: source.g * source.a + dest.g * dest.a * ( 1 - source.a ),\n\t\tb: source.b * source.a + dest.b * dest.a * ( 1 - source.a ),\n\t\ta: source.a + dest.a * ( 1 - source.a ),\n\t};\n}\n\n/**\n * Retrieves the FastAverageColor singleton.\n *\n * @return {FastAverageColor} The FastAverageColor singleton.\n */\nexport function retrieveFastAverageColor() {\n\tif ( ! retrieveFastAverageColor.fastAverageColor ) {\n\t\tretrieveFastAverageColor.fastAverageColor = new FastAverageColor();\n\t}\n\treturn retrieveFastAverageColor.fastAverageColor;\n}\n\n/**\n * Computes the average color of an image.\n *\n * @param {string} url The url of the image.\n *\n * @return {Promise<string>} Promise of an average color as a hex string.\n */\nexport const getMediaColor = memoize( async ( url ) => {\n\tif ( ! url ) {\n\t\treturn DEFAULT_BACKGROUND_COLOR;\n\t}\n\n\t// making the default color rgb for compat with FAC\n\tconst { r, g, b, a } = colord( DEFAULT_BACKGROUND_COLOR ).toRgb();\n\n\ttry {\n\t\tconst imgCrossOrigin = applyFilters(\n\t\t\t'media.crossOrigin',\n\t\t\tundefined,\n\t\t\turl\n\t\t);\n\t\tconst color = await retrieveFastAverageColor().getColorAsync( url, {\n\t\t\t// The default color is white, which is the color\n\t\t\t// that is returned if there's an error.\n\t\t\t// colord returns alpga 0-1, FAC needs 0-255\n\t\t\tdefaultColor: [ r, g, b, a * 255 ],\n\t\t\t// Errors that come up don't reject the promise,\n\t\t\t// so error logging has to be silenced\n\t\t\t// with this option.\n\t\t\tsilent: process.env.NODE_ENV === 'production',\n\t\t\tcrossOrigin: imgCrossOrigin,\n\t\t} );\n\t\treturn color.hex;\n\t} catch {\n\t\t// If there's an error return the fallback color.\n\t\treturn DEFAULT_BACKGROUND_COLOR;\n\t}\n} );\n\n/**\n * Computes if the color combination of the overlay and background color is dark.\n *\n * @param {number} dimRatio        Opacity of the overlay between 0 and 100.\n * @param {string} overlayColor    CSS color string for the overlay.\n * @param {string} backgroundColor CSS color string for the background.\n *\n * @return {boolean} true if the color combination composite result is dark.\n */\nexport function compositeIsDark( dimRatio, overlayColor, backgroundColor ) {\n\t// Opacity doesn't matter if you're overlaying the same color on top of itself.\n\t// And background doesn't matter when overlay is fully opaque.\n\tif ( overlayColor === backgroundColor || dimRatio === 100 ) {\n\t\treturn colord( overlayColor ).isDark();\n\t}\n\tconst overlay = colord( overlayColor )\n\t\t.alpha( dimRatio / 100 )\n\t\t.toRgb();\n\tconst background = colord( backgroundColor ).toRgb();\n\tconst composite = compositeSourceOver( overlay, background );\n\treturn colord( composite ).isDark();\n}\n"],
+  "mappings": ";AAGA,SAAS,QAAQ,cAAc;AAC/B,OAAO,iBAAiB;AACxB,SAAS,wBAAwB;AACjC,OAAO,aAAa;AAKpB,SAAS,oBAAoB;AAM7B,OAAQ,CAAE,WAAY,CAAE;AAMjB,IAAM,2BAA2B;AAKjC,IAAM,wBAAwB;AAY9B,SAAS,oBAAqB,QAAQ,MAAO;AACnD,SAAO;AAAA,IACN,GAAG,OAAO,IAAI,OAAO,IAAI,KAAK,IAAI,KAAK,KAAM,IAAI,OAAO;AAAA,IACxD,GAAG,OAAO,IAAI,OAAO,IAAI,KAAK,IAAI,KAAK,KAAM,IAAI,OAAO;AAAA,IACxD,GAAG,OAAO,IAAI,OAAO,IAAI,KAAK,IAAI,KAAK,KAAM,IAAI,OAAO;AAAA,IACxD,GAAG,OAAO,IAAI,KAAK,KAAM,IAAI,OAAO;AAAA,EACrC;AACD;AAOO,SAAS,2BAA2B;AAC1C,MAAK,CAAE,yBAAyB,kBAAmB;AAClD,6BAAyB,mBAAmB,IAAI,iBAAiB;AAAA,EAClE;AACA,SAAO,yBAAyB;AACjC;AASO,IAAM,gBAAgB,QAAS,OAAQ,QAAS;AACtD,MAAK,CAAE,KAAM;AACZ,WAAO;AAAA,EACR;AAGA,QAAM,EAAE,GAAG,GAAG,GAAG,EAAE,IAAI,OAAQ,wBAAyB,EAAE,MAAM;AAEhE,MAAI;AACH,UAAM,iBAAiB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,IACD;AACA,UAAM,QAAQ,MAAM,yBAAyB,EAAE,cAAe,KAAK;AAAA;AAAA;AAAA;AAAA,MAIlE,cAAc,CAAE,GAAG,GAAG,GAAG,IAAI,GAAI;AAAA;AAAA;AAAA;AAAA,MAIjC,QAAQ,QAAQ,IAAI,aAAa;AAAA,MACjC,aAAa;AAAA,IACd,CAAE;AACF,WAAO,MAAM;AAAA,EACd,QAAQ;AAEP,WAAO;AAAA,EACR;AACD,CAAE;AAWK,SAAS,gBAAiB,UAAU,cAAc,iBAAkB;AAG1E,MAAK,iBAAiB,mBAAmB,aAAa,KAAM;AAC3D,WAAO,OAAQ,YAAa,EAAE,OAAO;AAAA,EACtC;AACA,QAAM,UAAU,OAAQ,YAAa,EACnC,MAAO,WAAW,GAAI,EACtB,MAAM;AACR,QAAM,aAAa,OAAQ,eAAgB,EAAE,MAAM;AACnD,QAAM,YAAY,oBAAqB,SAAS,UAAW;AAC3D,SAAO,OAAQ,SAAU,EAAE,OAAO;AACnC;",
   "names": []
 }