@wordpress/edit-site 4.1.1 → 4.3.1

package/build/components/global-styles/screen-block-list.js

@@ -11,14 +11,18 @@ var _element = require("@wordpress/element");
 
 var _blocks = require("@wordpress/blocks");
 
-var _data = require("@wordpress/data");
-
 var _i18n = require("@wordpress/i18n");
 
 var _components = require("@wordpress/components");
 
+var _data = require("@wordpress/data");
+
 var _blockEditor = require("@wordpress/block-editor");
 
+var _compose = require("@wordpress/compose");
+
+var _a11y = require("@wordpress/a11y");
+
 var _borderPanel = require("./border-panel");
 
 var _colorUtils = require("./color-utils");
@@ -84,20 +88,60 @@ function BlockMenuItem(_ref) {
     path: '/blocks/' + block.name
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"
-  }, (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(_blockEditor.BlockIcon, {
+  }, (0, _element.createElement)(_blockEditor.BlockIcon, {
     icon: block.icon
-  })), (0, _element.createElement)(_components.FlexItem, null, block.title)));
+  }), (0, _element.createElement)(_components.FlexItem, null, block.title)));
 }
 
 function ScreenBlockList() {
   const sortedBlockTypes = useSortedBlockTypes();
+  const [filterValue, setFilterValue] = (0, _element.useState)('');
+  const debouncedSpeak = (0, _compose.useDebounce)(_a11y.speak, 500);
+  const isMatchingSearchTerm = (0, _data.useSelect)(select => select(_blocks.store).isMatchingSearchTerm, []);
+  const filteredBlockTypes = (0, _element.useMemo)(() => {
+    if (!filterValue) {
+      return sortedBlockTypes;
+    }
+
+    return sortedBlockTypes.filter(blockType => isMatchingSearchTerm(blockType, filterValue));
+  }, [filterValue, sortedBlockTypes, isMatchingSearchTerm]);
+  const blockTypesListRef = (0, _element.useRef)(); // Announce search results on change
+
+  (0, _element.useEffect)(() => {
+    if (!filterValue) {
+      return;
+    } // We extract the results from the wrapper div's `ref` because
+    // filtered items can contain items that will eventually not
+    // render and there is no reliable way to detect when a child
+    // will return `null`.
+    // TODO: We should find a better way of handling this as it's
+    // fragile and depends on the number of rendered elements of `BlockMenuItem`,
+    // which is now one.
+    // @see https://github.com/WordPress/gutenberg/pull/39117#discussion_r816022116
+
+
+    const count = blockTypesListRef.current.childElementCount;
+    const resultsFoundMessage = (0, _i18n.sprintf)(
+    /* translators: %d: number of results. */
+    (0, _i18n._n)('%d result found.', '%d results found.', count), count);
+    debouncedSpeak(resultsFoundMessage, count);
+  }, [filterValue, debouncedSpeak]);
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
     title: (0, _i18n.__)('Blocks'),
     description: (0, _i18n.__)('Customize the appearance of specific blocks and for the whole site.')
-  }), sortedBlockTypes.map(block => (0, _element.createElement)(BlockMenuItem, {
+  }), (0, _element.createElement)(_components.SearchControl, {
+    className: "edit-site-block-types-search",
+    onChange: setFilterValue,
+    value: filterValue,
+    label: (0, _i18n.__)('Search for blocks'),
+    placeholder: (0, _i18n.__)('Search')
+  }), (0, _element.createElement)("div", {
+    ref: blockTypesListRef,
+    className: "edit-site-block-types-item-list"
+  }, filteredBlockTypes.map(block => (0, _element.createElement)(BlockMenuItem, {
     block: block,
     key: 'menu-itemblock-' + block.name
-  })));
+  }))));
 }
 
 var _default = ScreenBlockList;

package/build/components/global-styles/screen-block-list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-block-list.js"],"names":["useSortedBlockTypes","blockItems","select","blocksStore","getBlockTypes","groupByType","blocks","block","core","noncore","type","name","startsWith","push","coreItems","nonCoreItems","reduce","BlockMenuItem","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","hasBlockMenuItem","icon","title","ScreenBlockList","sortedBlockTypes","map"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AAIA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AApBA;AACA;AACA;;AAUA;AACA;AACA;AAQA,SAASA,mBAAT,GAA+B;AAC9B,QAAMC,UAAU,GAAG,qBAChBC,MAAF,IAAcA,MAAM,CAAEC,aAAF,CAAN,CAAsBC,aAAtB,EADI,EAElB,EAFkB,CAAnB,CAD8B,CAK9B;AACA;AACA;AACA;AACA;;AACA,QAAMC,WAAW,GAAG,CAAEC,MAAF,EAAUC,KAAV,KAAqB;AACxC,UAAM;AAAEC,MAAAA,IAAF;AAAQC,MAAAA;AAAR,QAAoBH,MAA1B;AACA,UAAMI,IAAI,GAAGH,KAAK,CAACI,IAAN,CAAWC,UAAX,CAAuB,OAAvB,IAAmCJ,IAAnC,GAA0CC,OAAvD;AACAC,IAAAA,IAAI,CAACG,IAAL,CAAWN,KAAX;AACA,WAAOD,MAAP;AACA,GALD;;AAMA,QAAM;AACLE,IAAAA,IAAI,EAAEM,SADD;AAELL,IAAAA,OAAO,EAAEM;AAFJ,MAGFd,UAAU,CAACe,MAAX,CAAmBX,WAAnB,EAAgC;AAAEG,IAAAA,IAAI,EAAE,EAAR;AAAYC,IAAAA,OAAO,EAAE;AAArB,GAAhC,CAHJ;AAIA,SAAO,CAAE,GAAGK,SAAL,EAAgB,GAAGC,YAAnB,CAAP;AACA;;AAED,SAASE,aAAT,OAAoC;AAAA,MAAZ;AAAEV,IAAAA;AAAF,GAAY;AACnC,QAAMW,kBAAkB,GAAG,4CAAuBX,KAAK,CAACI,IAA7B,CAA3B;AACA,QAAMQ,aAAa,GAAG,kCAAkBZ,KAAK,CAACI,IAAxB,CAAtB;AACA,QAAMS,cAAc,GAAG,oCAAmBb,KAAK,CAACI,IAAzB,CAAvB;AACA,QAAMU,kBAAkB,GAAG,4CAAuBd,KAAK,CAACI,IAA7B,CAA3B;AACA,QAAMW,cAAc,GAAGF,cAAc,IAAIC,kBAAzC;AACA,QAAME,gBAAgB,GACrBL,kBAAkB,IAAIC,aAAtB,IAAuCG,cADxC;;AAGA,MAAK,CAAEC,gBAAP,EAA0B;AACzB,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,kCAAD;AAAkB,IAAA,IAAI,EAAG,aAAahB,KAAK,CAACI;AAA5C,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,oBAAD,QACC,4BAAC,sBAAD;AAAW,IAAA,IAAI,EAAGJ,KAAK,CAACiB;AAAxB,IADD,CADD,EAIC,4BAAC,oBAAD,QAAYjB,KAAK,CAACkB,KAAlB,CAJD,CADD,CADD;AAUA;;AAED,SAASC,eAAT,GAA2B;AAC1B,QAAMC,gBAAgB,GAAG3B,mBAAmB,EAA5C;AACA,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAG,cAAI,QAAJ,CADT;AAEC,IAAA,WAAW,EAAG,cACb,qEADa;AAFf,IADD,EAOG2B,gBAAgB,CAACC,GAAjB,CAAwBrB,KAAF,IACvB,4BAAC,aAAD;AACC,IAAA,KAAK,EAAGA,KADT;AAEC,IAAA,GAAG,EAAG,oBAAoBA,KAAK,CAACI;AAFjC,IADC,CAPH,CADD;AAgBA;;eAEce,e","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tFlexItem,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { BlockIcon } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { useHasBorderPanel } from './border-panel';\nimport { useHasColorPanel } from './color-utils';\nimport { useHasDimensionsPanel } from './dimensions-panel';\nimport { useHasTypographyPanel } from './typography-panel';\nimport ScreenHeader from './header';\nimport { NavigationButton } from './navigation-button';\n\nfunction useSortedBlockTypes() {\n\tconst blockItems = useSelect(\n\t\t( select ) => select( blocksStore ).getBlockTypes(),\n\t\t[]\n\t);\n\t// Ensure core blocks are prioritized in the returned results,\n\t// because third party blocks can be registered earlier than\n\t// the core blocks (usually by using the `init` action),\n\t// thus affecting the display order.\n\t// We don't sort reusable blocks as they are handled differently.\n\tconst groupByType = ( blocks, block ) => {\n\t\tconst { core, noncore } = blocks;\n\t\tconst type = block.name.startsWith( 'core/' ) ? core : noncore;\n\t\ttype.push( block );\n\t\treturn blocks;\n\t};\n\tconst {\n\t\tcore: coreItems,\n\t\tnoncore: nonCoreItems,\n\t} = blockItems.reduce( groupByType, { core: [], noncore: [] } );\n\treturn [ ...coreItems, ...nonCoreItems ];\n}\n\nfunction BlockMenuItem( { block } ) {\n\tconst hasTypographyPanel = useHasTypographyPanel( block.name );\n\tconst hasColorPanel = useHasColorPanel( block.name );\n\tconst hasBorderPanel = useHasBorderPanel( block.name );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( block.name );\n\tconst hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;\n\tconst hasBlockMenuItem =\n\t\thasTypographyPanel || hasColorPanel || hasLayoutPanel;\n\n\tif ( ! hasBlockMenuItem ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButton path={ '/blocks/' + block.name }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BlockIcon icon={ block.icon } />\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ block.title }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButton>\n\t);\n}\n\nfunction ScreenBlockList() {\n\tconst sortedBlockTypes = useSortedBlockTypes();\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Blocks' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Customize the appearance of specific blocks and for the whole site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t{ sortedBlockTypes.map( ( block ) => (\n\t\t\t\t<BlockMenuItem\n\t\t\t\t\tblock={ block }\n\t\t\t\t\tkey={ 'menu-itemblock-' + block.name }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</>\n\t);\n}\n\nexport default ScreenBlockList;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-block-list.js"],"names":["useSortedBlockTypes","blockItems","select","blocksStore","getBlockTypes","groupByType","blocks","block","core","noncore","type","name","startsWith","push","coreItems","nonCoreItems","reduce","BlockMenuItem","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","hasBlockMenuItem","icon","title","ScreenBlockList","sortedBlockTypes","filterValue","setFilterValue","debouncedSpeak","speak","isMatchingSearchTerm","filteredBlockTypes","filter","blockType","blockTypesListRef","count","current","childElementCount","resultsFoundMessage","map"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport {\n\tFlexItem,\n\tSearchControl,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useState, useMemo, useEffect, useRef } from '@wordpress/element';\nimport { BlockIcon } from '@wordpress/block-editor';\nimport { useDebounce } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { useHasBorderPanel } from './border-panel';\nimport { useHasColorPanel } from './color-utils';\nimport { useHasDimensionsPanel } from './dimensions-panel';\nimport { useHasTypographyPanel } from './typography-panel';\nimport ScreenHeader from './header';\nimport { NavigationButton } from './navigation-button';\n\nfunction useSortedBlockTypes() {\n\tconst blockItems = useSelect(\n\t\t( select ) => select( blocksStore ).getBlockTypes(),\n\t\t[]\n\t);\n\t// Ensure core blocks are prioritized in the returned results,\n\t// because third party blocks can be registered earlier than\n\t// the core blocks (usually by using the `init` action),\n\t// thus affecting the display order.\n\t// We don't sort reusable blocks as they are handled differently.\n\tconst groupByType = ( blocks, block ) => {\n\t\tconst { core, noncore } = blocks;\n\t\tconst type = block.name.startsWith( 'core/' ) ? core : noncore;\n\t\ttype.push( block );\n\t\treturn blocks;\n\t};\n\tconst {\n\t\tcore: coreItems,\n\t\tnoncore: nonCoreItems,\n\t} = blockItems.reduce( groupByType, { core: [], noncore: [] } );\n\treturn [ ...coreItems, ...nonCoreItems ];\n}\n\nfunction BlockMenuItem( { block } ) {\n\tconst hasTypographyPanel = useHasTypographyPanel( block.name );\n\tconst hasColorPanel = useHasColorPanel( block.name );\n\tconst hasBorderPanel = useHasBorderPanel( block.name );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( block.name );\n\tconst hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;\n\tconst hasBlockMenuItem =\n\t\thasTypographyPanel || hasColorPanel || hasLayoutPanel;\n\n\tif ( ! hasBlockMenuItem ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButton path={ '/blocks/' + block.name }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<BlockIcon icon={ block.icon } />\n\t\t\t\t<FlexItem>{ block.title }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButton>\n\t);\n}\n\nfunction ScreenBlockList() {\n\tconst sortedBlockTypes = useSortedBlockTypes();\n\tconst [ filterValue, setFilterValue ] = useState( '' );\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst isMatchingSearchTerm = useSelect(\n\t\t( select ) => select( blocksStore ).isMatchingSearchTerm,\n\t\t[]\n\t);\n\tconst filteredBlockTypes = useMemo( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn sortedBlockTypes;\n\t\t}\n\t\treturn sortedBlockTypes.filter( ( blockType ) =>\n\t\t\tisMatchingSearchTerm( blockType, filterValue )\n\t\t);\n\t}, [ filterValue, sortedBlockTypes, isMatchingSearchTerm ] );\n\n\tconst blockTypesListRef = useRef();\n\n\t// Announce search results on change\n\tuseEffect( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn;\n\t\t}\n\t\t// We extract the results from the wrapper div's `ref` because\n\t\t// filtered items can contain items that will eventually not\n\t\t// render and there is no reliable way to detect when a child\n\t\t// will return `null`.\n\t\t// TODO: We should find a better way of handling this as it's\n\t\t// fragile and depends on the number of rendered elements of `BlockMenuItem`,\n\t\t// which is now one.\n\t\t// @see https://github.com/WordPress/gutenberg/pull/39117#discussion_r816022116\n\t\tconst count = blockTypesListRef.current.childElementCount;\n\t\tconst resultsFoundMessage = sprintf(\n\t\t\t/* translators: %d: number of results. */\n\t\t\t_n( '%d result found.', '%d results found.', count ),\n\t\t\tcount\n\t\t);\n\t\tdebouncedSpeak( resultsFoundMessage, count );\n\t}, [ filterValue, debouncedSpeak ] );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Blocks' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Customize the appearance of specific blocks and for the whole site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<SearchControl\n\t\t\t\tclassName=\"edit-site-block-types-search\"\n\t\t\t\tonChange={ setFilterValue }\n\t\t\t\tvalue={ filterValue }\n\t\t\t\tlabel={ __( 'Search for blocks' ) }\n\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tref={ blockTypesListRef }\n\t\t\t\tclassName=\"edit-site-block-types-item-list\"\n\t\t\t>\n\t\t\t\t{ filteredBlockTypes.map( ( block ) => (\n\t\t\t\t\t<BlockMenuItem\n\t\t\t\t\t\tblock={ block }\n\t\t\t\t\t\tkey={ 'menu-itemblock-' + block.name }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenBlockList;\n"]}

package/build/components/global-styles/screen-colors.js

@@ -23,6 +23,8 @@ var _hooks = require("./hooks");
 
 var _subtitle = _interopRequireDefault(require("./subtitle"));
 
+var _colorIndicatorWrapper = _interopRequireDefault(require("./color-indicator-wrapper"));
+
 /**
  * WordPress dependencies
  */
@@ -48,7 +50,9 @@ function BackgroundColorItem(_ref) {
     path: parentMenu + '/colors/background'
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"
-  }, (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(_components.ColorIndicator, {
+  }, (0, _element.createElement)(_colorIndicatorWrapper.default, {
+    expanded: false
+  }, (0, _element.createElement)(_components.ColorIndicator, {
     colorValue: gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor
   })), (0, _element.createElement)(_components.FlexItem, null, (0, _i18n.__)('Background'))));
 }
@@ -70,7 +74,9 @@ function TextColorItem(_ref2) {
     path: parentMenu + '/colors/text'
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"
-  }, (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(_components.ColorIndicator, {
+  }, (0, _element.createElement)(_colorIndicatorWrapper.default, {
+    expanded: false
+  }, (0, _element.createElement)(_components.ColorIndicator, {
     colorValue: color
   })), (0, _element.createElement)(_components.FlexItem, null, (0, _i18n.__)('Text'))));
 }
@@ -92,7 +98,9 @@ function LinkColorItem(_ref3) {
     path: parentMenu + '/colors/link'
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"
-  }, (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(_components.ColorIndicator, {
+  }, (0, _element.createElement)(_colorIndicatorWrapper.default, {
+    expanded: false
+  }, (0, _element.createElement)(_components.ColorIndicator, {
     colorValue: color
   })), (0, _element.createElement)(_components.FlexItem, null, (0, _i18n.__)('Links'))));
 }

package/build/components/global-styles/screen-colors.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-colors.js"],"names":["BackgroundColorItem","name","parentMenu","supports","hasSupport","includes","backgroundColor","gradientValue","TextColorItem","color","LinkColorItem","ScreenColors","undefined"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tFlexItem,\n\tColorIndicator,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport Palette from './palette';\nimport { NavigationButton } from './navigation-button';\nimport { getSupportedGlobalStylesPanels, useStyle } from './hooks';\nimport Subtitle from './subtitle';\n\nfunction BackgroundColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport =\n\t\tsupports.includes( 'backgroundColor' ) ||\n\t\tsupports.includes( 'background' );\n\tconst [ backgroundColor ] = useStyle( 'color.background', name );\n\tconst [ gradientValue ] = useStyle( 'color.gradient', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButton path={ parentMenu + '/colors/background' }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\tcolorValue={ gradientValue ?? backgroundColor }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ __( 'Background' ) }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButton>\n\t);\n}\n\nfunction TextColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'color' );\n\tconst [ color ] = useStyle( 'color.text', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButton path={ parentMenu + '/colors/text' }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ __( 'Text' ) }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButton>\n\t);\n}\n\nfunction LinkColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'linkColor' );\n\tconst [ color ] = useStyle( 'elements.link.color.text', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButton path={ parentMenu + '/colors/link' }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ __( 'Links' ) }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButton>\n\t);\n}\n\nfunction ScreenColors( { name } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Colors' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Manage palettes and the default color of different global elements on the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<div className=\"edit-site-global-styles-screen-colors\">\n\t\t\t\t<VStack spacing={ 10 }>\n\t\t\t\t\t<Palette name={ name } />\n\n\t\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t\t<Subtitle>{ __( 'Elements' ) }</Subtitle>\n\t\t\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t\t\t<BackgroundColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<TextColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<LinkColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t</VStack>\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenColors;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-colors.js"],"names":["BackgroundColorItem","name","parentMenu","supports","hasSupport","includes","backgroundColor","gradientValue","TextColorItem","color","LinkColorItem","ScreenColors","undefined"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tFlexItem,\n\tColorIndicator,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport Palette from './palette';\nimport { NavigationButton } from './navigation-button';\nimport { getSupportedGlobalStylesPanels, useStyle } from './hooks';\nimport Subtitle from './subtitle';\nimport ColorIndicatorWrapper from './color-indicator-wrapper';\n\nfunction BackgroundColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport =\n\t\tsupports.includes( 'backgroundColor' ) ||\n\t\tsupports.includes( 'background' );\n\tconst [ backgroundColor ] = useStyle( 'color.background', name );\n\tconst [ gradientValue ] = useStyle( 'color.gradient', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButton path={ parentMenu + '/colors/background' }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\tcolorValue={ gradientValue ?? backgroundColor }\n\t\t\t\t\t/>\n\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t<FlexItem>{ __( 'Background' ) }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButton>\n\t);\n}\n\nfunction TextColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'color' );\n\tconst [ color ] = useStyle( 'color.text', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButton path={ parentMenu + '/colors/text' }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t<FlexItem>{ __( 'Text' ) }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButton>\n\t);\n}\n\nfunction LinkColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'linkColor' );\n\tconst [ color ] = useStyle( 'elements.link.color.text', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButton path={ parentMenu + '/colors/link' }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t<FlexItem>{ __( 'Links' ) }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButton>\n\t);\n}\n\nfunction ScreenColors( { name } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Colors' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Manage palettes and the default color of different global elements on the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<div className=\"edit-site-global-styles-screen-colors\">\n\t\t\t\t<VStack spacing={ 10 }>\n\t\t\t\t\t<Palette name={ name } />\n\n\t\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t\t<Subtitle>{ __( 'Elements' ) }</Subtitle>\n\t\t\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t\t\t<BackgroundColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<TextColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<LinkColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t</VStack>\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenColors;\n"]}

package/build/components/global-styles/screen-root.js

@@ -19,6 +19,8 @@ var _data = require("@wordpress/data");
 
 var _coreData = require("@wordpress/core-data");
 
+var _iconWithCurrentColor = require("./icon-with-current-color");
+
 var _navigationButton = require("./navigation-button");
 
 var _contextMenu = _interopRequireDefault(require("./context-menu"));
@@ -44,19 +46,19 @@ function ScreenRoot() {
     size: "small"
   }, (0, _element.createElement)(_components.CardBody, null, (0, _element.createElement)(_components.__experimentalVStack, {
     spacing: 2
-  }, (0, _element.createElement)(_components.Card, null, (0, _element.createElement)(_preview.default, null)), !!(variations !== null && variations !== void 0 && variations.length) && (0, _element.createElement)(_navigationButton.NavigationButton, {
+  }, (0, _element.createElement)(_components.Card, null, (0, _element.createElement)(_components.CardMedia, null, (0, _element.createElement)(_preview.default, null))), !!(variations !== null && variations !== void 0 && variations.length) && (0, _element.createElement)(_navigationButton.NavigationButton, {
     path: "/variations"
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "space-between"
-  }, (0, _element.createElement)(_components.FlexItem, null, (0, _i18n.__)('Other styles')), (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(_icons.Icon, {
+  }, (0, _element.createElement)(_components.FlexItem, null, (0, _i18n.__)('Browse styles')), (0, _element.createElement)(_iconWithCurrentColor.IconWithCurrentColor, {
     icon: (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight
-  })))))), (0, _element.createElement)(_components.CardBody, null, (0, _element.createElement)(_contextMenu.default, null)), (0, _element.createElement)(_components.CardDivider, null), (0, _element.createElement)(_components.CardBody, null, (0, _element.createElement)(_components.__experimentalItemGroup, null, (0, _element.createElement)(_components.__experimentalItem, null, (0, _i18n.__)('Customize the appearance of specific blocks for the whole site.')), (0, _element.createElement)(_navigationButton.NavigationButton, {
+  }))))), (0, _element.createElement)(_components.CardBody, null, (0, _element.createElement)(_contextMenu.default, null)), (0, _element.createElement)(_components.CardDivider, null), (0, _element.createElement)(_components.CardBody, null, (0, _element.createElement)(_components.__experimentalItemGroup, null, (0, _element.createElement)(_components.__experimentalItem, null, (0, _i18n.__)('Customize the appearance of specific blocks for the whole site.')), (0, _element.createElement)(_navigationButton.NavigationButton, {
     path: "/blocks"
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "space-between"
-  }, (0, _element.createElement)(_components.FlexItem, null, (0, _i18n.__)('Blocks')), (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(_icons.Icon, {
+  }, (0, _element.createElement)(_components.FlexItem, null, (0, _i18n.__)('Blocks')), (0, _element.createElement)(_iconWithCurrentColor.IconWithCurrentColor, {
     icon: (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight
-  })))))));
+  }))))));
 }
 
 var _default = ScreenRoot;

package/build/components/global-styles/screen-root.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-root.js"],"names":["ScreenRoot","variations","select","coreStore","__experimentalGetCurrentThemeGlobalStylesVariations","length","chevronLeft","chevronRight"],"mappings":";;;;;;;;;;;AAGA;;AAUA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AAvBA;AACA;AACA;;AAgBA;AACA;AACA;AAKA,SAASA,UAAT,GAAsB;AACrB,QAAM;AAAEC,IAAAA;AAAF,MAAiB,qBAAaC,MAAF,IAAc;AAC/C,WAAO;AACND,MAAAA,UAAU,EAAEC,MAAM,CACjBC,eADiB,CAAN,CAEVC,mDAFU;AADN,KAAP;AAKA,GANsB,EAMpB,EANoB,CAAvB;AAQA,SACC,4BAAC,gBAAD;AAAM,IAAA,IAAI,EAAC;AAAX,KACC,4BAAC,oBAAD,QACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,gBAAD,QACC,4BAAC,gBAAD,OADD,CADD,EAIG,CAAC,EAAEH,UAAF,aAAEA,UAAF,eAAEA,UAAU,CAAEI,MAAd,CAAD,IACD,4BAAC,kCAAD;AAAkB,IAAA,IAAI,EAAC;AAAvB,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,oBAAD,QAAY,cAAI,cAAJ,CAAZ,CADD,EAEC,4BAAC,oBAAD,QACC,4BAAC,WAAD;AACC,IAAA,IAAI,EACH,qBAAUC,kBAAV,GAAwBC;AAF1B,IADD,CAFD,CADD,CALF,CADD,CADD,EAuBC,4BAAC,oBAAD,QACC,4BAAC,oBAAD,OADD,CAvBD,EA2BC,4BAAC,uBAAD,OA3BD,EA6BC,4BAAC,oBAAD,QACC,4BAAC,mCAAD,QACC,4BAAC,8BAAD,QACG,cACD,iEADC,CADH,CADD,EAMC,4BAAC,kCAAD;AAAkB,IAAA,IAAI,EAAC;AAAvB,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,oBAAD,QAAY,cAAI,QAAJ,CAAZ,CADD,EAEC,4BAAC,oBAAD,QACC,4BAAC,WAAD;AACC,IAAA,IAAI,EACH,qBAAUD,kBAAV,GAAwBC;AAF1B,IADD,CAFD,CADD,CAND,CADD,CA7BD,CADD;AAqDA;;eAEcP,U","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalItem as Item,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tFlexItem,\n\tCardBody,\n\tCard,\n\tCardDivider,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronLeft, chevronRight, Icon } from '@wordpress/icons';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { NavigationButton } from './navigation-button';\nimport ContextMenu from './context-menu';\nimport StylesPreview from './preview';\n\nfunction ScreenRoot() {\n\tconst { variations } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tvariations: select(\n\t\t\t\tcoreStore\n\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations(),\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<Card size=\"small\">\n\t\t\t<CardBody>\n\t\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t\t<Card>\n\t\t\t\t\t\t<StylesPreview />\n\t\t\t\t\t</Card>\n\t\t\t\t\t{ !! variations?.length && (\n\t\t\t\t\t\t<NavigationButton path=\"/variations\">\n\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t<FlexItem>{ __( 'Other styles' ) }</FlexItem>\n\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronLeft : chevronRight\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</FlexItem>\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t</NavigationButton>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</CardBody>\n\n\t\t\t<CardBody>\n\t\t\t\t<ContextMenu />\n\t\t\t</CardBody>\n\n\t\t\t<CardDivider />\n\n\t\t\t<CardBody>\n\t\t\t\t<ItemGroup>\n\t\t\t\t\t<Item>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'Customize the appearance of specific blocks for the whole site.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Item>\n\t\t\t\t\t<NavigationButton path=\"/blocks\">\n\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t<FlexItem>{ __( 'Blocks' ) }</FlexItem>\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronLeft : chevronRight\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</FlexItem>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</NavigationButton>\n\t\t\t\t</ItemGroup>\n\t\t\t</CardBody>\n\t\t</Card>\n\t);\n}\n\nexport default ScreenRoot;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-root.js"],"names":["ScreenRoot","variations","select","coreStore","__experimentalGetCurrentThemeGlobalStylesVariations","length","chevronLeft","chevronRight"],"mappings":";;;;;;;;;;;AAGA;;AAWA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAzBA;AACA;AACA;;AAiBA;AACA;AACA;AAMA,SAASA,UAAT,GAAsB;AACrB,QAAM;AAAEC,IAAAA;AAAF,MAAiB,qBAAaC,MAAF,IAAc;AAC/C,WAAO;AACND,MAAAA,UAAU,EAAEC,MAAM,CACjBC,eADiB,CAAN,CAEVC,mDAFU;AADN,KAAP;AAKA,GANsB,EAMpB,EANoB,CAAvB;AAQA,SACC,4BAAC,gBAAD;AAAM,IAAA,IAAI,EAAC;AAAX,KACC,4BAAC,oBAAD,QACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,gBAAD,QACC,4BAAC,qBAAD,QACC,4BAAC,gBAAD,OADD,CADD,CADD,EAMG,CAAC,EAAEH,UAAF,aAAEA,UAAF,eAAEA,UAAU,CAAEI,MAAd,CAAD,IACD,4BAAC,kCAAD;AAAkB,IAAA,IAAI,EAAC;AAAvB,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,oBAAD,QAAY,cAAI,eAAJ,CAAZ,CADD,EAEC,4BAAC,0CAAD;AACC,IAAA,IAAI,EACH,qBAAUC,kBAAV,GAAwBC;AAF1B,IAFD,CADD,CAPF,CADD,CADD,EAuBC,4BAAC,oBAAD,QACC,4BAAC,oBAAD,OADD,CAvBD,EA2BC,4BAAC,uBAAD,OA3BD,EA6BC,4BAAC,oBAAD,QACC,4BAAC,mCAAD,QACC,4BAAC,8BAAD,QACG,cACD,iEADC,CADH,CADD,EAMC,4BAAC,kCAAD;AAAkB,IAAA,IAAI,EAAC;AAAvB,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,oBAAD,QAAY,cAAI,QAAJ,CAAZ,CADD,EAEC,4BAAC,0CAAD;AACC,IAAA,IAAI,EAAG,qBAAUD,kBAAV,GAAwBC;AADhC,IAFD,CADD,CAND,CADD,CA7BD,CADD;AAiDA;;eAEcP,U","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalItem as Item,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tFlexItem,\n\tCardBody,\n\tCard,\n\tCardDivider,\n\tCardMedia,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronLeft, chevronRight } from '@wordpress/icons';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { IconWithCurrentColor } from './icon-with-current-color';\nimport { NavigationButton } from './navigation-button';\nimport ContextMenu from './context-menu';\nimport StylesPreview from './preview';\n\nfunction ScreenRoot() {\n\tconst { variations } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tvariations: select(\n\t\t\t\tcoreStore\n\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations(),\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<Card size=\"small\">\n\t\t\t<CardBody>\n\t\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t\t<Card>\n\t\t\t\t\t\t<CardMedia>\n\t\t\t\t\t\t\t<StylesPreview />\n\t\t\t\t\t\t</CardMedia>\n\t\t\t\t\t</Card>\n\t\t\t\t\t{ !! variations?.length && (\n\t\t\t\t\t\t<NavigationButton path=\"/variations\">\n\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t<FlexItem>{ __( 'Browse styles' ) }</FlexItem>\n\t\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronLeft : chevronRight\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</HStack>\n\t\t\t\t\t\t</NavigationButton>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</CardBody>\n\n\t\t\t<CardBody>\n\t\t\t\t<ContextMenu />\n\t\t\t</CardBody>\n\n\t\t\t<CardDivider />\n\n\t\t\t<CardBody>\n\t\t\t\t<ItemGroup>\n\t\t\t\t\t<Item>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'Customize the appearance of specific blocks for the whole site.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Item>\n\t\t\t\t\t<NavigationButton path=\"/blocks\">\n\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t<FlexItem>{ __( 'Blocks' ) }</FlexItem>\n\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\ticon={ isRTL() ? chevronLeft : chevronRight }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</NavigationButton>\n\t\t\t\t</ItemGroup>\n\t\t\t</CardBody>\n\t\t</Card>\n\t);\n}\n\nexport default ScreenRoot;\n"]}

package/build/components/global-styles/screen-style-variations.js

@@ -50,6 +50,7 @@ function Variation(_ref) {
   let {
     variation
   } = _ref;
+  const [isFocused, setIsFocused] = (0, _element.useState)(false);
   const {
     base,
     user,
@@ -97,10 +98,16 @@ function Variation(_ref) {
     role: "button",
     onClick: selectVariation,
     onKeyDown: selectOnEnter,
-    tabIndex: "0"
+    tabIndex: "0",
+    "aria-label": variation === null || variation === void 0 ? void 0 : variation.title,
+    onFocus: () => setIsFocused(true),
+    onBlur: () => setIsFocused(false)
+  }, (0, _element.createElement)("div", {
+    className: "edit-site-global-styles-variations_item-preview"
   }, (0, _element.createElement)(_preview.default, {
-    height: 100
-  })));
+    label: variation === null || variation === void 0 ? void 0 : variation.title,
+    isFocused: isFocused
+  }))));
 }
 
 function ScreenStyleVariations() {
@@ -113,14 +120,14 @@ function ScreenStyleVariations() {
   }, []);
   const withEmptyVariation = (0, _element.useMemo)(() => {
     return [{
-      name: (0, _i18n.__)('Default'),
+      title: (0, _i18n.__)('Default'),
       settings: {},
       styles: {}
     }, ...variations];
   }, [variations]);
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
     back: "/",
-    title: (0, _i18n.__)('Other styles'),
+    title: (0, _i18n.__)('Browse styles'),
     description: (0, _i18n.__)('Choose a different style combination for the theme styles')
   }), (0, _element.createElement)(_components.Card, {
     size: "small",

package/build/components/global-styles/screen-style-variations.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-style-variations.js"],"names":["compareVariations","a","b","styles","settings","Variation","variation","base","user","setUserConfig","GlobalStylesContext","context","merged","selectVariation","selectOnEnter","event","keyCode","ENTER","preventDefault","isActive","ScreenStyleVariations","variations","select","coreStore","__experimentalGetCurrentThemeGlobalStylesVariations","withEmptyVariation","name","map","index"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isEqual } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo, useContext } from '@wordpress/element';\nimport { ENTER } from '@wordpress/keycodes';\nimport {\n\t__experimentalGrid as Grid,\n\tCard,\n\tCardBody,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { mergeBaseAndUserConfigs } from './global-styles-provider';\nimport { GlobalStylesContext } from './context';\nimport StylesPreview from './preview';\nimport ScreenHeader from './header';\n\nfunction compareVariations( a, b ) {\n\treturn isEqual( a.styles, b.styles ) && isEqual( a.settings, b.settings );\n}\n\nfunction Variation( { variation } ) {\n\tconst { base, user, setUserConfig } = useContext( GlobalStylesContext );\n\tconst context = useMemo( () => {\n\t\treturn {\n\t\t\tuser: {\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t},\n\t\t\tbase,\n\t\t\tmerged: mergeBaseAndUserConfigs( base, variation ),\n\t\t\tsetUserConfig: () => {},\n\t\t};\n\t}, [ variation, base ] );\n\n\tconst selectVariation = () => {\n\t\tsetUserConfig( () => {\n\t\t\treturn {\n\t\t\t\tsettings: variation.settings,\n\t\t\t\tstyles: variation.styles,\n\t\t\t};\n\t\t} );\n\t};\n\n\tconst selectOnEnter = ( event ) => {\n\t\tif ( event.keyCode === ENTER ) {\n\t\t\tevent.preventDefault();\n\t\t\tselectVariation();\n\t\t}\n\t};\n\n\tconst isActive = useMemo( () => {\n\t\treturn compareVariations( user, variation );\n\t}, [ user, variation ] );\n\n\treturn (\n\t\t<GlobalStylesContext.Provider value={ context }>\n\t\t\t<div\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'edit-site-global-styles-variations_item',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isActive,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\trole=\"button\"\n\t\t\t\tonClick={ selectVariation }\n\t\t\t\tonKeyDown={ selectOnEnter }\n\t\t\t\ttabIndex=\"0\"\n\t\t\t>\n\t\t\t\t<StylesPreview height={ 100 } />\n\t\t\t</div>\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n\nfunction ScreenStyleVariations() {\n\tconst { variations } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tvariations: select(\n\t\t\t\tcoreStore\n\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations(),\n\t\t};\n\t}, [] );\n\n\tconst withEmptyVariation = useMemo( () => {\n\t\treturn [\n\t\t\t{\n\t\t\t\tname: __( 'Default' ),\n\t\t\t\tsettings: {},\n\t\t\t\tstyles: {},\n\t\t\t},\n\t\t\t...variations,\n\t\t];\n\t}, [ variations ] );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback=\"/\"\n\t\t\t\ttitle={ __( 'Other styles' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Choose a different style combination for the theme styles'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<Card size=\"small\" isBorderless>\n\t\t\t\t<CardBody>\n\t\t\t\t\t<Grid columns={ 2 }>\n\t\t\t\t\t\t{ withEmptyVariation?.map( ( variation, index ) => (\n\t\t\t\t\t\t\t<Variation key={ index } variation={ variation } />\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Grid>\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</>\n\t);\n}\n\nexport default ScreenStyleVariations;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-style-variations.js"],"names":["compareVariations","a","b","styles","settings","Variation","variation","isFocused","setIsFocused","base","user","setUserConfig","GlobalStylesContext","context","merged","selectVariation","selectOnEnter","event","keyCode","ENTER","preventDefault","isActive","title","ScreenStyleVariations","variations","select","coreStore","__experimentalGetCurrentThemeGlobalStylesVariations","withEmptyVariation","map","index"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isEqual } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo, useContext, useState } from '@wordpress/element';\nimport { ENTER } from '@wordpress/keycodes';\nimport {\n\t__experimentalGrid as Grid,\n\tCard,\n\tCardBody,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { mergeBaseAndUserConfigs } from './global-styles-provider';\nimport { GlobalStylesContext } from './context';\nimport StylesPreview from './preview';\nimport ScreenHeader from './header';\n\nfunction compareVariations( a, b ) {\n\treturn isEqual( a.styles, b.styles ) && isEqual( a.settings, b.settings );\n}\n\nfunction Variation( { variation } ) {\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\tconst { base, user, setUserConfig } = useContext( GlobalStylesContext );\n\tconst context = useMemo( () => {\n\t\treturn {\n\t\t\tuser: {\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t},\n\t\t\tbase,\n\t\t\tmerged: mergeBaseAndUserConfigs( base, variation ),\n\t\t\tsetUserConfig: () => {},\n\t\t};\n\t}, [ variation, base ] );\n\n\tconst selectVariation = () => {\n\t\tsetUserConfig( () => {\n\t\t\treturn {\n\t\t\t\tsettings: variation.settings,\n\t\t\t\tstyles: variation.styles,\n\t\t\t};\n\t\t} );\n\t};\n\n\tconst selectOnEnter = ( event ) => {\n\t\tif ( event.keyCode === ENTER ) {\n\t\t\tevent.preventDefault();\n\t\t\tselectVariation();\n\t\t}\n\t};\n\n\tconst isActive = useMemo( () => {\n\t\treturn compareVariations( user, variation );\n\t}, [ user, variation ] );\n\n\treturn (\n\t\t<GlobalStylesContext.Provider value={ context }>\n\t\t\t<div\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'edit-site-global-styles-variations_item',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isActive,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\trole=\"button\"\n\t\t\t\tonClick={ selectVariation }\n\t\t\t\tonKeyDown={ selectOnEnter }\n\t\t\t\ttabIndex=\"0\"\n\t\t\t\taria-label={ variation?.title }\n\t\t\t\tonFocus={ () => setIsFocused( true ) }\n\t\t\t\tonBlur={ () => setIsFocused( false ) }\n\t\t\t>\n\t\t\t\t<div className=\"edit-site-global-styles-variations_item-preview\">\n\t\t\t\t\t<StylesPreview\n\t\t\t\t\t\tlabel={ variation?.title }\n\t\t\t\t\t\tisFocused={ isFocused }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n\nfunction ScreenStyleVariations() {\n\tconst { variations } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tvariations: select(\n\t\t\t\tcoreStore\n\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations(),\n\t\t};\n\t}, [] );\n\n\tconst withEmptyVariation = useMemo( () => {\n\t\treturn [\n\t\t\t{\n\t\t\t\ttitle: __( 'Default' ),\n\t\t\t\tsettings: {},\n\t\t\t\tstyles: {},\n\t\t\t},\n\t\t\t...variations,\n\t\t];\n\t}, [ variations ] );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback=\"/\"\n\t\t\t\ttitle={ __( 'Browse styles' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Choose a different style combination for the theme styles'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<Card size=\"small\" isBorderless>\n\t\t\t\t<CardBody>\n\t\t\t\t\t<Grid columns={ 2 }>\n\t\t\t\t\t\t{ withEmptyVariation?.map( ( variation, index ) => (\n\t\t\t\t\t\t\t<Variation key={ index } variation={ variation } />\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Grid>\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</>\n\t);\n}\n\nexport default ScreenStyleVariations;\n"]}

package/build/components/header/document-actions/index.js

@@ -55,15 +55,16 @@ function useSecondaryText() {
   return {};
 }
 /**
- * @param {Object}   props             Props for the DocumentActions component.
- * @param {string}   props.entityTitle The title to display.
- * @param {string}   props.entityLabel A label to use for entity-related options.
- *                                     E.g. "template" would be used for "edit
- *                                     template" and "show template details".
- * @param {boolean}  props.isLoaded    Whether the data is available.
- * @param {Function} props.children    React component to use for the
- *                                     information dropdown area. Should be a
- *                                     function which accepts dropdown props.
+ * @param {Object}   props                Props for the DocumentActions component.
+ * @param {string}   props.entityTitle    The title to display.
+ * @param {string}   props.entityLabel    A label to use for entity-related options.
+ *                                        E.g. "template" would be used for "edit
+ *                                        template" and "show template details".
+ * @param {boolean}  props.isLoaded       Whether the data is available.
+ * @param {Function} props.children       React component to use for the
+ *                                        information dropdown area. Should be a
+ *                                        function which accepts dropdown props.
+ * @param {boolean}  props.showIconLabels Whether buttons display icons or text labels.
  */
 
 
@@ -72,7 +73,8 @@ function DocumentActions(_ref) {
     entityTitle,
     entityLabel,
     isLoaded,
-    children: dropdownContent
+    children: dropdownContent,
+    showIconLabels
   } = _ref;
   const {
     label
@@ -132,7 +134,7 @@ function DocumentActions(_ref) {
         label: (0, _i18n.sprintf)(
         /* translators: %s: the entity to see details about, like "template"*/
         (0, _i18n.__)('Show %s details'), entityLabel)
-      });
+      }, showIconLabels && (0, _i18n.__)('Details'));
     },
     contentClassName: "edit-site-document-actions__info-dropdown",
     renderContent: dropdownContent

package/build/components/header/document-actions/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/header/document-actions/index.js"],"names":["getBlockDisplayText","block","blockType","name","attributes","useSecondaryText","getBlock","blockEditorStore","activeEntityBlockId","select","__experimentalGetActiveBlockIdByBlockNames","label","isActive","DocumentActions","entityTitle","entityLabel","isLoaded","children","dropdownContent","titleRef","anchorRef","current","isOpen","onToggle","chevronDown"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { sprintf, __ } from '@wordpress/i18n';\nimport {\n\t__experimentalGetBlockLabel as getBlockLabel,\n\tgetBlockType,\n} from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tDropdown,\n\tButton,\n\tVisuallyHidden,\n\t__experimentalText as Text,\n} from '@wordpress/components';\nimport { chevronDown } from '@wordpress/icons';\nimport { useRef } from '@wordpress/element';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\n\nfunction getBlockDisplayText( block ) {\n\tif ( block ) {\n\t\tconst blockType = getBlockType( block.name );\n\t\treturn blockType ? getBlockLabel( blockType, block.attributes ) : null;\n\t}\n\treturn null;\n}\n\nfunction useSecondaryText() {\n\tconst { getBlock } = useSelect( blockEditorStore );\n\tconst activeEntityBlockId = useSelect(\n\t\t( select ) =>\n\t\t\tselect(\n\t\t\t\tblockEditorStore\n\t\t\t).__experimentalGetActiveBlockIdByBlockNames( [\n\t\t\t\t'core/template-part',\n\t\t\t] ),\n\t\t[]\n\t);\n\n\tif ( activeEntityBlockId ) {\n\t\treturn {\n\t\t\tlabel: getBlockDisplayText( getBlock( activeEntityBlockId ) ),\n\t\t\tisActive: true,\n\t\t};\n\t}\n\n\treturn {};\n}\n\n/**\n * @param {Object}   props             Props for the DocumentActions component.\n * @param {string}   props.entityTitle The title to display.\n * @param {string}   props.entityLabel A label to use for entity-related options.\n *                                     E.g. \"template\" would be used for \"edit\n *                                     template\" and \"show template details\".\n * @param {boolean}  props.isLoaded    Whether the data is available.\n * @param {Function} props.children    React component to use for the\n *                                     information dropdown area. Should be a\n *                                     function which accepts dropdown props.\n */\nexport default function DocumentActions( {\n\tentityTitle,\n\tentityLabel,\n\tisLoaded,\n\tchildren: dropdownContent,\n} ) {\n\tconst { label } = useSecondaryText();\n\n\t// The title ref is passed to the popover as the anchorRef so that the\n\t// dropdown is centered over the whole title area rather than just one\n\t// part of it.\n\tconst titleRef = useRef();\n\n\t// Return a simple loading indicator until we have information to show.\n\tif ( ! isLoaded ) {\n\t\treturn (\n\t\t\t<div className=\"edit-site-document-actions\">\n\t\t\t\t{ __( 'Loading…' ) }\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Return feedback that the template does not seem to exist.\n\tif ( ! entityTitle ) {\n\t\treturn (\n\t\t\t<div className=\"edit-site-document-actions\">\n\t\t\t\t{ __( 'Template not found' ) }\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames( 'edit-site-document-actions', {\n\t\t\t\t'has-secondary-label': !! label,\n\t\t\t} ) }\n\t\t>\n\t\t\t<div\n\t\t\t\tref={ titleRef }\n\t\t\t\tclassName=\"edit-site-document-actions__title-wrapper\"\n\t\t\t>\n\t\t\t\t<Text\n\t\t\t\t\tsize=\"body\"\n\t\t\t\t\tclassName=\"edit-site-document-actions__title\"\n\t\t\t\t\tas=\"h1\"\n\t\t\t\t>\n\t\t\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t\t/* translators: %s: the entity being edited, like \"template\"*/\n\t\t\t\t\t\t\t__( 'Editing %s: ' ),\n\t\t\t\t\t\t\tentityLabel\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t{ entityTitle }\n\t\t\t\t</Text>\n\n\t\t\t\t<Text\n\t\t\t\t\tsize=\"body\"\n\t\t\t\t\tclassName=\"edit-site-document-actions__secondary-item\"\n\t\t\t\t>\n\t\t\t\t\t{ label ?? '' }\n\t\t\t\t</Text>\n\n\t\t\t\t{ dropdownContent && (\n\t\t\t\t\t<Dropdown\n\t\t\t\t\t\tpopoverProps={ {\n\t\t\t\t\t\t\tanchorRef: titleRef.current,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tposition=\"bottom center\"\n\t\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tclassName=\"edit-site-document-actions__get-info\"\n\t\t\t\t\t\t\t\ticon={ chevronDown }\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\tlabel={ sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: the entity to see details about, like \"template\"*/\n\t\t\t\t\t\t\t\t\t__( 'Show %s details' ),\n\t\t\t\t\t\t\t\t\tentityLabel\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\tcontentClassName=\"edit-site-document-actions__info-dropdown\"\n\t\t\t\t\t\trenderContent={ dropdownContent }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/header/document-actions/index.js"],"names":["getBlockDisplayText","block","blockType","name","attributes","useSecondaryText","getBlock","blockEditorStore","activeEntityBlockId","select","__experimentalGetActiveBlockIdByBlockNames","label","isActive","DocumentActions","entityTitle","entityLabel","isLoaded","children","dropdownContent","showIconLabels","titleRef","anchorRef","current","isOpen","onToggle","chevronDown"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { sprintf, __ } from '@wordpress/i18n';\nimport {\n\t__experimentalGetBlockLabel as getBlockLabel,\n\tgetBlockType,\n} from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tDropdown,\n\tButton,\n\tVisuallyHidden,\n\t__experimentalText as Text,\n} from '@wordpress/components';\nimport { chevronDown } from '@wordpress/icons';\nimport { useRef } from '@wordpress/element';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\n\nfunction getBlockDisplayText( block ) {\n\tif ( block ) {\n\t\tconst blockType = getBlockType( block.name );\n\t\treturn blockType ? getBlockLabel( blockType, block.attributes ) : null;\n\t}\n\treturn null;\n}\n\nfunction useSecondaryText() {\n\tconst { getBlock } = useSelect( blockEditorStore );\n\tconst activeEntityBlockId = useSelect(\n\t\t( select ) =>\n\t\t\tselect(\n\t\t\t\tblockEditorStore\n\t\t\t).__experimentalGetActiveBlockIdByBlockNames( [\n\t\t\t\t'core/template-part',\n\t\t\t] ),\n\t\t[]\n\t);\n\n\tif ( activeEntityBlockId ) {\n\t\treturn {\n\t\t\tlabel: getBlockDisplayText( getBlock( activeEntityBlockId ) ),\n\t\t\tisActive: true,\n\t\t};\n\t}\n\n\treturn {};\n}\n\n/**\n * @param {Object}   props                Props for the DocumentActions component.\n * @param {string}   props.entityTitle    The title to display.\n * @param {string}   props.entityLabel    A label to use for entity-related options.\n *                                        E.g. \"template\" would be used for \"edit\n *                                        template\" and \"show template details\".\n * @param {boolean}  props.isLoaded       Whether the data is available.\n * @param {Function} props.children       React component to use for the\n *                                        information dropdown area. Should be a\n *                                        function which accepts dropdown props.\n * @param {boolean}  props.showIconLabels Whether buttons display icons or text labels.\n */\nexport default function DocumentActions( {\n\tentityTitle,\n\tentityLabel,\n\tisLoaded,\n\tchildren: dropdownContent,\n\tshowIconLabels,\n} ) {\n\tconst { label } = useSecondaryText();\n\n\t// The title ref is passed to the popover as the anchorRef so that the\n\t// dropdown is centered over the whole title area rather than just one\n\t// part of it.\n\tconst titleRef = useRef();\n\n\t// Return a simple loading indicator until we have information to show.\n\tif ( ! isLoaded ) {\n\t\treturn (\n\t\t\t<div className=\"edit-site-document-actions\">\n\t\t\t\t{ __( 'Loading…' ) }\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Return feedback that the template does not seem to exist.\n\tif ( ! entityTitle ) {\n\t\treturn (\n\t\t\t<div className=\"edit-site-document-actions\">\n\t\t\t\t{ __( 'Template not found' ) }\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames( 'edit-site-document-actions', {\n\t\t\t\t'has-secondary-label': !! label,\n\t\t\t} ) }\n\t\t>\n\t\t\t<div\n\t\t\t\tref={ titleRef }\n\t\t\t\tclassName=\"edit-site-document-actions__title-wrapper\"\n\t\t\t>\n\t\t\t\t<Text\n\t\t\t\t\tsize=\"body\"\n\t\t\t\t\tclassName=\"edit-site-document-actions__title\"\n\t\t\t\t\tas=\"h1\"\n\t\t\t\t>\n\t\t\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t\t/* translators: %s: the entity being edited, like \"template\"*/\n\t\t\t\t\t\t\t__( 'Editing %s: ' ),\n\t\t\t\t\t\t\tentityLabel\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t{ entityTitle }\n\t\t\t\t</Text>\n\n\t\t\t\t<Text\n\t\t\t\t\tsize=\"body\"\n\t\t\t\t\tclassName=\"edit-site-document-actions__secondary-item\"\n\t\t\t\t>\n\t\t\t\t\t{ label ?? '' }\n\t\t\t\t</Text>\n\n\t\t\t\t{ dropdownContent && (\n\t\t\t\t\t<Dropdown\n\t\t\t\t\t\tpopoverProps={ {\n\t\t\t\t\t\t\tanchorRef: titleRef.current,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tposition=\"bottom center\"\n\t\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tclassName=\"edit-site-document-actions__get-info\"\n\t\t\t\t\t\t\t\ticon={ chevronDown }\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\tlabel={ sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: the entity to see details about, like \"template\"*/\n\t\t\t\t\t\t\t\t\t__( 'Show %s details' ),\n\t\t\t\t\t\t\t\t\tentityLabel\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ showIconLabels && __( 'Details' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tcontentClassName=\"edit-site-document-actions__info-dropdown\"\n\t\t\t\t\t\trenderContent={ dropdownContent }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}

package/build/components/header/index.js

@@ -57,7 +57,8 @@ const preventDefault = event => {
 function Header(_ref) {
   let {
     openEntitiesSavedStates,
-    isEntitiesSavedStatesOpen
+    isEntitiesSavedStatesOpen,
+    showIconLabels
   } = _ref;
   const inserterButton = (0, _element.useRef)();
   const {
@@ -138,7 +139,7 @@ function Header(_ref) {
     onClick: openInserter,
     icon: _icons.plus,
     label: (0, _i18n._x)('Toggle block inserter', 'Generic label for block inserter button')
-  }), isLargeViewport && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.ToolbarItem, {
+  }, showIconLabels && (!isInserterOpen ? (0, _i18n.__)('Add') : (0, _i18n.__)('Close'))), isLargeViewport && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.ToolbarItem, {
     as: _blockEditor.ToolSelector,
     disabled: !isVisualMode
   }), (0, _element.createElement)(_undo.default, null), (0, _element.createElement)(_redo.default, null), (0, _element.createElement)(_components.Button, {
@@ -156,7 +157,8 @@ function Header(_ref) {
   }, (0, _element.createElement)(_documentActions.default, {
     entityTitle: entityTitle,
     entityLabel: templateType === 'wp_template_part' ? 'template part' : 'template',
-    isLoaded: isLoaded
+    isLoaded: isLoaded,
+    showIconLabels: showIconLabels
   }, _ref2 => {
     let {
       onClose

package/build/components/header/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/header/index.js"],"names":["preventDefault","event","Header","openEntitiesSavedStates","isEntitiesSavedStatesOpen","inserterButton","deviceType","entityTitle","template","templateType","isInserterOpen","isListViewOpen","listViewShortcut","isLoaded","isVisualMode","select","__experimentalGetPreviewDeviceType","getEditedPostType","getEditedPostId","isInserterOpened","isListViewOpened","getEditorMode","editSiteStore","getEditedEntityRecord","coreStore","__experimentalGetTemplateInfo","getTemplateInfo","editorStore","getShortcutRepresentation","keyboardShortcutsStore","postType","postId","record","_isLoaded","title","__experimentalSetPreviewDeviceType","setPreviewDeviceType","setIsInserterOpened","setIsListViewOpened","isLargeViewport","openInserter","current","focus","toggleListView","isFocusMode","plus","ToolSelector","listView","onClose"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useRef } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\tToolSelector,\n\t__experimentalPreviewOptions as PreviewOptions,\n} from '@wordpress/block-editor';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { PinnedItems } from '@wordpress/interface';\nimport { _x, __ } from '@wordpress/i18n';\nimport { listView, plus } from '@wordpress/icons';\nimport { Button, ToolbarItem } from '@wordpress/components';\nimport { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\nimport { store as editorStore } from '@wordpress/editor';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport MoreMenu from './more-menu';\nimport SaveButton from '../save-button';\nimport UndoButton from './undo-redo/undo';\nimport RedoButton from './undo-redo/redo';\nimport DocumentActions from './document-actions';\nimport TemplateDetails from '../template-details';\nimport { store as editSiteStore } from '../../store';\n\nconst preventDefault = ( event ) => {\n\tevent.preventDefault();\n};\n\nexport default function Header( {\n\topenEntitiesSavedStates,\n\tisEntitiesSavedStatesOpen,\n} ) {\n\tconst inserterButton = useRef();\n\tconst {\n\t\tdeviceType,\n\t\tentityTitle,\n\t\ttemplate,\n\t\ttemplateType,\n\t\tisInserterOpen,\n\t\tisListViewOpen,\n\t\tlistViewShortcut,\n\t\tisLoaded,\n\t\tisVisualMode,\n\t} = useSelect( ( select ) => {\n\t\tconst {\n\t\t\t__experimentalGetPreviewDeviceType,\n\t\t\tgetEditedPostType,\n\t\t\tgetEditedPostId,\n\t\t\tisInserterOpened,\n\t\t\tisListViewOpened,\n\t\t\tgetEditorMode,\n\t\t} = select( editSiteStore );\n\t\tconst { getEditedEntityRecord } = select( coreStore );\n\t\tconst { __experimentalGetTemplateInfo: getTemplateInfo } = select(\n\t\t\teditorStore\n\t\t);\n\t\tconst { getShortcutRepresentation } = select( keyboardShortcutsStore );\n\n\t\tconst postType = getEditedPostType();\n\t\tconst postId = getEditedPostId();\n\t\tconst record = getEditedEntityRecord( 'postType', postType, postId );\n\t\tconst _isLoaded = !! postId;\n\n\t\treturn {\n\t\t\tdeviceType: __experimentalGetPreviewDeviceType(),\n\t\t\tentityTitle: getTemplateInfo( record ).title,\n\t\t\tisLoaded: _isLoaded,\n\t\t\ttemplate: record,\n\t\t\ttemplateType: postType,\n\t\t\tisInserterOpen: isInserterOpened(),\n\t\t\tisListViewOpen: isListViewOpened(),\n\t\t\tlistViewShortcut: getShortcutRepresentation(\n\t\t\t\t'core/edit-site/toggle-list-view'\n\t\t\t),\n\t\t\tisVisualMode: getEditorMode() === 'visual',\n\t\t};\n\t}, [] );\n\n\tconst {\n\t\t__experimentalSetPreviewDeviceType: setPreviewDeviceType,\n\t\tsetIsInserterOpened,\n\t\tsetIsListViewOpened,\n\t} = useDispatch( editSiteStore );\n\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\n\tconst openInserter = useCallback( () => {\n\t\tif ( isInserterOpen ) {\n\t\t\t// Focusing the inserter button closes the inserter popover.\n\t\t\tinserterButton.current.focus();\n\t\t} else {\n\t\t\tsetIsInserterOpened( true );\n\t\t}\n\t}, [ isInserterOpen, setIsInserterOpened ] );\n\n\tconst toggleListView = useCallback(\n\t\t() => setIsListViewOpened( ! isListViewOpen ),\n\t\t[ setIsListViewOpened, isListViewOpen ]\n\t);\n\n\tconst isFocusMode = templateType === 'wp_template_part';\n\n\treturn (\n\t\t<div className=\"edit-site-header\">\n\t\t\t<div className=\"edit-site-header_start\">\n\t\t\t\t<div className=\"edit-site-header__toolbar\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tref={ inserterButton }\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\tisPressed={ isInserterOpen }\n\t\t\t\t\t\tclassName=\"edit-site-header-toolbar__inserter-toggle\"\n\t\t\t\t\t\tdisabled={ ! isVisualMode }\n\t\t\t\t\t\tonMouseDown={ preventDefault }\n\t\t\t\t\t\tonClick={ openInserter }\n\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t\t'Toggle block inserter',\n\t\t\t\t\t\t\t'Generic label for block inserter button'\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\n\t\t\t\t\t{ isLargeViewport && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<ToolbarItem\n\t\t\t\t\t\t\t\tas={ ToolSelector }\n\t\t\t\t\t\t\t\tdisabled={ ! isVisualMode }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<UndoButton />\n\t\t\t\t\t\t\t<RedoButton />\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tclassName=\"edit-site-header-toolbar__list-view-toggle\"\n\t\t\t\t\t\t\t\tdisabled={ ! isVisualMode }\n\t\t\t\t\t\t\t\ticon={ listView }\n\t\t\t\t\t\t\t\tisPressed={ isListViewOpen }\n\t\t\t\t\t\t\t\t/* translators: button label text should, if possible, be under 16 characters. */\n\t\t\t\t\t\t\t\tlabel={ __( 'List View' ) }\n\t\t\t\t\t\t\t\tonClick={ toggleListView }\n\t\t\t\t\t\t\t\tshortcut={ listViewShortcut }\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</div>\n\t\t\t</div>\n\n\t\t\t<div className=\"edit-site-header_center\">\n\t\t\t\t<DocumentActions\n\t\t\t\t\tentityTitle={ entityTitle }\n\t\t\t\t\tentityLabel={\n\t\t\t\t\t\ttemplateType === 'wp_template_part'\n\t\t\t\t\t\t\t? 'template part'\n\t\t\t\t\t\t\t: 'template'\n\t\t\t\t\t}\n\t\t\t\t\tisLoaded={ isLoaded }\n\t\t\t\t>\n\t\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t\t<TemplateDetails\n\t\t\t\t\t\t\ttemplate={ template }\n\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</DocumentActions>\n\t\t\t</div>\n\n\t\t\t<div className=\"edit-site-header_end\">\n\t\t\t\t<div className=\"edit-site-header__actions\">\n\t\t\t\t\t{ ! isFocusMode && (\n\t\t\t\t\t\t<PreviewOptions\n\t\t\t\t\t\t\tdeviceType={ deviceType }\n\t\t\t\t\t\t\tsetDeviceType={ setPreviewDeviceType }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<SaveButton\n\t\t\t\t\t\topenEntitiesSavedStates={ openEntitiesSavedStates }\n\t\t\t\t\t\tisEntitiesSavedStatesOpen={ isEntitiesSavedStatesOpen }\n\t\t\t\t\t/>\n\t\t\t\t\t<PinnedItems.Slot scope=\"core/edit-site\" />\n\t\t\t\t\t<MoreMenu />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/header/index.js"],"names":["preventDefault","event","Header","openEntitiesSavedStates","isEntitiesSavedStatesOpen","showIconLabels","inserterButton","deviceType","entityTitle","template","templateType","isInserterOpen","isListViewOpen","listViewShortcut","isLoaded","isVisualMode","select","__experimentalGetPreviewDeviceType","getEditedPostType","getEditedPostId","isInserterOpened","isListViewOpened","getEditorMode","editSiteStore","getEditedEntityRecord","coreStore","__experimentalGetTemplateInfo","getTemplateInfo","editorStore","getShortcutRepresentation","keyboardShortcutsStore","postType","postId","record","_isLoaded","title","__experimentalSetPreviewDeviceType","setPreviewDeviceType","setIsInserterOpened","setIsListViewOpened","isLargeViewport","openInserter","current","focus","toggleListView","isFocusMode","plus","ToolSelector","listView","onClose"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useRef } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\tToolSelector,\n\t__experimentalPreviewOptions as PreviewOptions,\n} from '@wordpress/block-editor';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { PinnedItems } from '@wordpress/interface';\nimport { _x, __ } from '@wordpress/i18n';\nimport { listView, plus } from '@wordpress/icons';\nimport { Button, ToolbarItem } from '@wordpress/components';\nimport { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\nimport { store as editorStore } from '@wordpress/editor';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport MoreMenu from './more-menu';\nimport SaveButton from '../save-button';\nimport UndoButton from './undo-redo/undo';\nimport RedoButton from './undo-redo/redo';\nimport DocumentActions from './document-actions';\nimport TemplateDetails from '../template-details';\nimport { store as editSiteStore } from '../../store';\n\nconst preventDefault = ( event ) => {\n\tevent.preventDefault();\n};\n\nexport default function Header( {\n\topenEntitiesSavedStates,\n\tisEntitiesSavedStatesOpen,\n\tshowIconLabels,\n} ) {\n\tconst inserterButton = useRef();\n\tconst {\n\t\tdeviceType,\n\t\tentityTitle,\n\t\ttemplate,\n\t\ttemplateType,\n\t\tisInserterOpen,\n\t\tisListViewOpen,\n\t\tlistViewShortcut,\n\t\tisLoaded,\n\t\tisVisualMode,\n\t} = useSelect( ( select ) => {\n\t\tconst {\n\t\t\t__experimentalGetPreviewDeviceType,\n\t\t\tgetEditedPostType,\n\t\t\tgetEditedPostId,\n\t\t\tisInserterOpened,\n\t\t\tisListViewOpened,\n\t\t\tgetEditorMode,\n\t\t} = select( editSiteStore );\n\t\tconst { getEditedEntityRecord } = select( coreStore );\n\t\tconst { __experimentalGetTemplateInfo: getTemplateInfo } = select(\n\t\t\teditorStore\n\t\t);\n\t\tconst { getShortcutRepresentation } = select( keyboardShortcutsStore );\n\n\t\tconst postType = getEditedPostType();\n\t\tconst postId = getEditedPostId();\n\t\tconst record = getEditedEntityRecord( 'postType', postType, postId );\n\t\tconst _isLoaded = !! postId;\n\n\t\treturn {\n\t\t\tdeviceType: __experimentalGetPreviewDeviceType(),\n\t\t\tentityTitle: getTemplateInfo( record ).title,\n\t\t\tisLoaded: _isLoaded,\n\t\t\ttemplate: record,\n\t\t\ttemplateType: postType,\n\t\t\tisInserterOpen: isInserterOpened(),\n\t\t\tisListViewOpen: isListViewOpened(),\n\t\t\tlistViewShortcut: getShortcutRepresentation(\n\t\t\t\t'core/edit-site/toggle-list-view'\n\t\t\t),\n\t\t\tisVisualMode: getEditorMode() === 'visual',\n\t\t};\n\t}, [] );\n\n\tconst {\n\t\t__experimentalSetPreviewDeviceType: setPreviewDeviceType,\n\t\tsetIsInserterOpened,\n\t\tsetIsListViewOpened,\n\t} = useDispatch( editSiteStore );\n\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\n\tconst openInserter = useCallback( () => {\n\t\tif ( isInserterOpen ) {\n\t\t\t// Focusing the inserter button closes the inserter popover.\n\t\t\tinserterButton.current.focus();\n\t\t} else {\n\t\t\tsetIsInserterOpened( true );\n\t\t}\n\t}, [ isInserterOpen, setIsInserterOpened ] );\n\n\tconst toggleListView = useCallback(\n\t\t() => setIsListViewOpened( ! isListViewOpen ),\n\t\t[ setIsListViewOpened, isListViewOpen ]\n\t);\n\n\tconst isFocusMode = templateType === 'wp_template_part';\n\n\treturn (\n\t\t<div className=\"edit-site-header\">\n\t\t\t<div className=\"edit-site-header_start\">\n\t\t\t\t<div className=\"edit-site-header__toolbar\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tref={ inserterButton }\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\tisPressed={ isInserterOpen }\n\t\t\t\t\t\tclassName=\"edit-site-header-toolbar__inserter-toggle\"\n\t\t\t\t\t\tdisabled={ ! isVisualMode }\n\t\t\t\t\t\tonMouseDown={ preventDefault }\n\t\t\t\t\t\tonClick={ openInserter }\n\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t\t'Toggle block inserter',\n\t\t\t\t\t\t\t'Generic label for block inserter button'\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ showIconLabels &&\n\t\t\t\t\t\t\t( ! isInserterOpen ? __( 'Add' ) : __( 'Close' ) ) }\n\t\t\t\t\t</Button>\n\t\t\t\t\t{ isLargeViewport && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<ToolbarItem\n\t\t\t\t\t\t\t\tas={ ToolSelector }\n\t\t\t\t\t\t\t\tdisabled={ ! isVisualMode }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<UndoButton />\n\t\t\t\t\t\t\t<RedoButton />\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tclassName=\"edit-site-header-toolbar__list-view-toggle\"\n\t\t\t\t\t\t\t\tdisabled={ ! isVisualMode }\n\t\t\t\t\t\t\t\ticon={ listView }\n\t\t\t\t\t\t\t\tisPressed={ isListViewOpen }\n\t\t\t\t\t\t\t\t/* translators: button label text should, if possible, be under 16 characters. */\n\t\t\t\t\t\t\t\tlabel={ __( 'List View' ) }\n\t\t\t\t\t\t\t\tonClick={ toggleListView }\n\t\t\t\t\t\t\t\tshortcut={ listViewShortcut }\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</div>\n\t\t\t</div>\n\n\t\t\t<div className=\"edit-site-header_center\">\n\t\t\t\t<DocumentActions\n\t\t\t\t\tentityTitle={ entityTitle }\n\t\t\t\t\tentityLabel={\n\t\t\t\t\t\ttemplateType === 'wp_template_part'\n\t\t\t\t\t\t\t? 'template part'\n\t\t\t\t\t\t\t: 'template'\n\t\t\t\t\t}\n\t\t\t\t\tisLoaded={ isLoaded }\n\t\t\t\t\tshowIconLabels={ showIconLabels }\n\t\t\t\t>\n\t\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t\t<TemplateDetails\n\t\t\t\t\t\t\ttemplate={ template }\n\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</DocumentActions>\n\t\t\t</div>\n\n\t\t\t<div className=\"edit-site-header_end\">\n\t\t\t\t<div className=\"edit-site-header__actions\">\n\t\t\t\t\t{ ! isFocusMode && (\n\t\t\t\t\t\t<PreviewOptions\n\t\t\t\t\t\t\tdeviceType={ deviceType }\n\t\t\t\t\t\t\tsetDeviceType={ setPreviewDeviceType }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<SaveButton\n\t\t\t\t\t\topenEntitiesSavedStates={ openEntitiesSavedStates }\n\t\t\t\t\t\tisEntitiesSavedStatesOpen={ isEntitiesSavedStatesOpen }\n\t\t\t\t\t/>\n\t\t\t\t\t<PinnedItems.Slot scope=\"core/edit-site\" />\n\t\t\t\t\t<MoreMenu />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}

package/build/components/header/more-menu/index.js

@@ -25,6 +25,8 @@ var _preferences = require("@wordpress/preferences");
 
 var _keyboardShortcutHelpModal = _interopRequireDefault(require("../../keyboard-shortcut-help-modal"));
 
+var _preferencesModal = _interopRequireDefault(require("../../preferences-modal"));
+
 var _toolsMoreMenuGroup = _interopRequireDefault(require("../tools-more-menu-group"));
 
 var _siteExport = _interopRequireDefault(require("./site-export"));
@@ -44,6 +46,7 @@ var _modeSwitcher = _interopRequireDefault(require("../mode-switcher"));
  */
 function MoreMenu() {
   const [isModalActive, toggleModal] = (0, _element.useReducer)(isActive => !isActive, false);
+  const [isPreferencesModalActive, togglePreferencesModal] = (0, _element.useReducer)(isActive => !isActive, false);
   (0, _keyboardShortcuts.useShortcut)('core/edit-site/keyboard-shortcuts', toggleModal);
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_interface.MoreMenuDropdown, null, _ref => {
     let {
@@ -91,10 +94,15 @@ function MoreMenu() {
       fillProps: {
         onClose
       }
-    })));
+    })), (0, _element.createElement)(_components.MenuGroup, null, (0, _element.createElement)(_components.MenuItem, {
+      onClick: togglePreferencesModal
+    }, (0, _i18n.__)('Preferences'))));
   }), (0, _element.createElement)(_keyboardShortcutHelpModal.default, {
     isModalActive: isModalActive,
     toggleModal: toggleModal
+  }), (0, _element.createElement)(_preferencesModal.default, {
+    isModalActive: isPreferencesModalActive,
+    toggleModal: togglePreferencesModal
   }));
 }
 //# sourceMappingURL=index.js.map

package/build/components/header/more-menu/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/header/more-menu/index.js"],"names":["MoreMenu","isModalActive","toggleModal","isActive","onClose","MenuGroup","onClick","displayShortcut","access","external"],"mappings":";;;;;;;;;AAIA;;AADA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AApBA;AACA;AACA;;AAUA;AACA;AACA;AAQe,SAASA,QAAT,GAAoB;AAClC,QAAM,CAAEC,aAAF,EAAiBC,WAAjB,IAAiC,yBACpCC,QAAF,IAAgB,CAAEA,QADoB,EAEtC,KAFsC,CAAvC;AAKA,sCAAa,mCAAb,EAAkDD,WAAlD;AAEA,SACC,qDACC,4BAAC,2BAAD,QACG;AAAA,QAAE;AAAEE,MAAAA;AAAF,KAAF;AAAA,WACD,qDACC,4BAAC,qBAAD;AAAW,MAAA,KAAK,EAAG,cAAI,MAAJ,EAAY,MAAZ;AAAnB,OACC,4BAAC,qCAAD;AACC,MAAA,KAAK,EAAC,gBADP;AAEC,MAAA,IAAI,EAAC,cAFN;AAGC,MAAA,KAAK,EAAG,cAAI,aAAJ,CAHT;AAIC,MAAA,IAAI,EAAG,cACN,uDADM,CAJR;AAOC,MAAA,gBAAgB,EAAG,cAClB,uBADkB,CAPpB;AAUC,MAAA,kBAAkB,EAAG,cACpB,yBADoB;AAVtB,MADD,EAeC,4BAAC,qCAAD;AACC,MAAA,KAAK,EAAC,gBADP;AAEC,MAAA,IAAI,EAAC,WAFN;AAGC,MAAA,KAAK,EAAG,cAAI,gBAAJ,CAHT;AAIC,MAAA,IAAI,EAAG,cAAI,8BAAJ,CAJR;AAKC,MAAA,gBAAgB,EAAG,cAClB,0BADkB,CALpB;AAQC,MAAA,kBAAkB,EAAG,cACpB,4BADoB;AARtB,MAfD,EA2BC,4BAAC,qBAAD,OA3BD,EA4BC,4BAAC,qBAAD,CAAY,IAAZ;AACC,MAAA,IAAI,EAAC,iCADN;AAEC,MAAA,KAAK,EAAG,cAAI,SAAJ,CAFT;AAGC,MAAA,EAAE,EAAGC,qBAHN;AAIC,MAAA,SAAS,EAAG;AAAEC,QAAAA,OAAO,EAAEF;AAAX;AAJb,MA5BD,CADD,EAoCC,4BAAC,qBAAD;AAAW,MAAA,KAAK,EAAG,cAAI,OAAJ;AAAnB,OACC,4BAAC,mBAAD,OADD,EAEC,4BAAC,oBAAD;AACC,MAAA,OAAO,EAAGF,WADX;AAEC,MAAA,QAAQ,EAAGK,0BAAgBC,MAAhB,CAAwB,GAAxB;AAFZ,OAIG,cAAI,oBAAJ,CAJH,CAFD,EAQC,4BAAC,6BAAD,OARD,EASC,4BAAC,4BAAD,OATD,EAUC,4BAAC,oBAAD;AACC,MAAA,IAAI,EAAGC,eADR;AAEC,MAAA,IAAI,EAAC,UAFN;AAGC,MAAA,IAAI,EAAG,cACN,oDADM,CAHR;AAMC,MAAA,MAAM,EAAC,QANR;AAOC,MAAA,GAAG,EAAC;AAPL,OASG,cAAI,MAAJ,CATH,EAUC,4BAAC,0BAAD;AAAgB,MAAA,EAAE,EAAC;AAAnB;AAEE;AACA,kBAAI,sBAAJ,CAHF,CAVD,CAVD,EA2BC,4BAAC,2BAAD,CAAoB,IAApB;AACC,MAAA,SAAS,EAAG;AAAEL,QAAAA;AAAF;AADb,MA3BD,CApCD,CADC;AAAA,GADH,CADD,EAyEC,4BAAC,kCAAD;AACC,IAAA,aAAa,EAAGH,aADjB;AAEC,IAAA,WAAW,EAAGC;AAFf,IAzED,CADD;AAgFA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\nimport { useReducer } from '@wordpress/element';\nimport { useShortcut } from '@wordpress/keyboard-shortcuts';\nimport { displayShortcut } from '@wordpress/keycodes';\nimport { external } from '@wordpress/icons';\nimport { MenuGroup, MenuItem, VisuallyHidden } from '@wordpress/components';\nimport { ActionItem, MoreMenuDropdown } from '@wordpress/interface';\nimport { PreferenceToggleMenuItem } from '@wordpress/preferences';\n\n/**\n * Internal dependencies\n */\nimport KeyboardShortcutHelpModal from '../../keyboard-shortcut-help-modal';\nimport ToolsMoreMenuGroup from '../tools-more-menu-group';\nimport SiteExport from './site-export';\nimport WelcomeGuideMenuItem from './welcome-guide-menu-item';\nimport CopyContentMenuItem from './copy-content-menu-item';\nimport ModeSwitcher from '../mode-switcher';\n\nexport default function MoreMenu() {\n\tconst [ isModalActive, toggleModal ] = useReducer(\n\t\t( isActive ) => ! isActive,\n\t\tfalse\n\t);\n\n\tuseShortcut( 'core/edit-site/keyboard-shortcuts', toggleModal );\n\n\treturn (\n\t\t<>\n\t\t\t<MoreMenuDropdown>\n\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<MenuGroup label={ _x( 'View', 'noun' ) }>\n\t\t\t\t\t\t\t<PreferenceToggleMenuItem\n\t\t\t\t\t\t\t\tscope=\"core/edit-site\"\n\t\t\t\t\t\t\t\tname=\"fixedToolbar\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Top toolbar' ) }\n\t\t\t\t\t\t\t\tinfo={ __(\n\t\t\t\t\t\t\t\t\t'Access all block and document tools in a single place'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tmessageActivated={ __(\n\t\t\t\t\t\t\t\t\t'Top toolbar activated'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tmessageDeactivated={ __(\n\t\t\t\t\t\t\t\t\t'Top toolbar deactivated'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<PreferenceToggleMenuItem\n\t\t\t\t\t\t\t\tscope=\"core/edit-site\"\n\t\t\t\t\t\t\t\tname=\"focusMode\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Spotlight mode' ) }\n\t\t\t\t\t\t\t\tinfo={ __( 'Focus on one block at a time' ) }\n\t\t\t\t\t\t\t\tmessageActivated={ __(\n\t\t\t\t\t\t\t\t\t'Spotlight mode activated'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tmessageDeactivated={ __(\n\t\t\t\t\t\t\t\t\t'Spotlight mode deactivated'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<ModeSwitcher />\n\t\t\t\t\t\t\t<ActionItem.Slot\n\t\t\t\t\t\t\t\tname=\"core/edit-site/plugin-more-menu\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Plugins' ) }\n\t\t\t\t\t\t\t\tas={ MenuGroup }\n\t\t\t\t\t\t\t\tfillProps={ { onClick: onClose } }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t<MenuGroup label={ __( 'Tools' ) }>\n\t\t\t\t\t\t\t<SiteExport />\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\tonClick={ toggleModal }\n\t\t\t\t\t\t\t\tshortcut={ displayShortcut.access( 'h' ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Keyboard shortcuts' ) }\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t<WelcomeGuideMenuItem />\n\t\t\t\t\t\t\t<CopyContentMenuItem />\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\ticon={ external }\n\t\t\t\t\t\t\t\trole=\"menuitem\"\n\t\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t\t'https://wordpress.org/support/article/site-editor/'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Help' ) }\n\t\t\t\t\t\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t/* translators: accessibility text */\n\t\t\t\t\t\t\t\t\t\t__( '(opens in a new tab)' )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t<ToolsMoreMenuGroup.Slot\n\t\t\t\t\t\t\t\tfillProps={ { onClose } }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</MoreMenuDropdown>\n\t\t\t<KeyboardShortcutHelpModal\n\t\t\t\tisModalActive={ isModalActive }\n\t\t\t\ttoggleModal={ toggleModal }\n\t\t\t/>\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/header/more-menu/index.js"],"names":["MoreMenu","isModalActive","toggleModal","isActive","isPreferencesModalActive","togglePreferencesModal","onClose","MenuGroup","onClick","displayShortcut","access","external"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\nimport { useReducer } from '@wordpress/element';\nimport { useShortcut } from '@wordpress/keyboard-shortcuts';\nimport { displayShortcut } from '@wordpress/keycodes';\nimport { external } from '@wordpress/icons';\nimport { MenuGroup, MenuItem, VisuallyHidden } from '@wordpress/components';\nimport { ActionItem, MoreMenuDropdown } from '@wordpress/interface';\nimport { PreferenceToggleMenuItem } from '@wordpress/preferences';\n\n/**\n * Internal dependencies\n */\nimport KeyboardShortcutHelpModal from '../../keyboard-shortcut-help-modal';\nimport EditSitePreferencesModal from '../../preferences-modal';\nimport ToolsMoreMenuGroup from '../tools-more-menu-group';\nimport SiteExport from './site-export';\nimport WelcomeGuideMenuItem from './welcome-guide-menu-item';\nimport CopyContentMenuItem from './copy-content-menu-item';\nimport ModeSwitcher from '../mode-switcher';\n\nexport default function MoreMenu() {\n\tconst [ isModalActive, toggleModal ] = useReducer(\n\t\t( isActive ) => ! isActive,\n\t\tfalse\n\t);\n\n\tconst [ isPreferencesModalActive, togglePreferencesModal ] = useReducer(\n\t\t( isActive ) => ! isActive,\n\t\tfalse\n\t);\n\n\tuseShortcut( 'core/edit-site/keyboard-shortcuts', toggleModal );\n\n\treturn (\n\t\t<>\n\t\t\t<MoreMenuDropdown>\n\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<MenuGroup label={ _x( 'View', 'noun' ) }>\n\t\t\t\t\t\t\t<PreferenceToggleMenuItem\n\t\t\t\t\t\t\t\tscope=\"core/edit-site\"\n\t\t\t\t\t\t\t\tname=\"fixedToolbar\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Top toolbar' ) }\n\t\t\t\t\t\t\t\tinfo={ __(\n\t\t\t\t\t\t\t\t\t'Access all block and document tools in a single place'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tmessageActivated={ __(\n\t\t\t\t\t\t\t\t\t'Top toolbar activated'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tmessageDeactivated={ __(\n\t\t\t\t\t\t\t\t\t'Top toolbar deactivated'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<PreferenceToggleMenuItem\n\t\t\t\t\t\t\t\tscope=\"core/edit-site\"\n\t\t\t\t\t\t\t\tname=\"focusMode\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Spotlight mode' ) }\n\t\t\t\t\t\t\t\tinfo={ __( 'Focus on one block at a time' ) }\n\t\t\t\t\t\t\t\tmessageActivated={ __(\n\t\t\t\t\t\t\t\t\t'Spotlight mode activated'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tmessageDeactivated={ __(\n\t\t\t\t\t\t\t\t\t'Spotlight mode deactivated'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<ModeSwitcher />\n\t\t\t\t\t\t\t<ActionItem.Slot\n\t\t\t\t\t\t\t\tname=\"core/edit-site/plugin-more-menu\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Plugins' ) }\n\t\t\t\t\t\t\t\tas={ MenuGroup }\n\t\t\t\t\t\t\t\tfillProps={ { onClick: onClose } }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t<MenuGroup label={ __( 'Tools' ) }>\n\t\t\t\t\t\t\t<SiteExport />\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\tonClick={ toggleModal }\n\t\t\t\t\t\t\t\tshortcut={ displayShortcut.access( 'h' ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Keyboard shortcuts' ) }\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t<WelcomeGuideMenuItem />\n\t\t\t\t\t\t\t<CopyContentMenuItem />\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\ticon={ external }\n\t\t\t\t\t\t\t\trole=\"menuitem\"\n\t\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t\t'https://wordpress.org/support/article/site-editor/'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Help' ) }\n\t\t\t\t\t\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t/* translators: accessibility text */\n\t\t\t\t\t\t\t\t\t\t__( '(opens in a new tab)' )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t<ToolsMoreMenuGroup.Slot\n\t\t\t\t\t\t\t\tfillProps={ { onClose } }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t<MenuItem onClick={ togglePreferencesModal }>\n\t\t\t\t\t\t\t\t{ __( 'Preferences' ) }\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</MoreMenuDropdown>\n\t\t\t<KeyboardShortcutHelpModal\n\t\t\t\tisModalActive={ isModalActive }\n\t\t\t\ttoggleModal={ toggleModal }\n\t\t\t/>\n\t\t\t<EditSitePreferencesModal\n\t\t\t\tisModalActive={ isPreferencesModalActive }\n\t\t\t\ttoggleModal={ togglePreferencesModal }\n\t\t\t/>\n\t\t</>\n\t);\n}\n"]}