@wordpress/edit-site 5.9.0 → 5.10.0

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

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+var _components = require("@wordpress/components");
+
+var _icons = require("@wordpress/icons");
+
+var _i18n = require("@wordpress/i18n");
+
+var _blockEditor = require("@wordpress/block-editor");
+
+var _navigationButton = require("./navigation-button");
+
+var _privateApis = require("../../private-apis");
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const {
+  useHasDimensionsPanel,
+  useHasTypographyPanel,
+  useHasColorPanel,
+  useGlobalSetting,
+  useSettingsForBlockElement
+} = (0, _privateApis.unlock)(_blockEditor.privateApis);
+
+function RootMenu() {
+  const [rawSettings] = useGlobalSetting('');
+  const settings = useSettingsForBlockElement(rawSettings);
+  const hasTypographyPanel = useHasTypographyPanel(settings);
+  const hasColorPanel = useHasColorPanel(settings);
+  const hasDimensionsPanel = useHasDimensionsPanel(settings);
+  const hasLayoutPanel = hasDimensionsPanel;
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalItemGroup, null, hasTypographyPanel && (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
+    icon: _icons.typography,
+    path: "/typography",
+    "aria-label": (0, _i18n.__)('Typography styles')
+  }, (0, _i18n.__)('Typography')), hasColorPanel && (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
+    icon: _icons.color,
+    path: "/colors",
+    "aria-label": (0, _i18n.__)('Colors styles')
+  }, (0, _i18n.__)('Colors')), hasLayoutPanel && (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
+    icon: _icons.layout,
+    path: "/layout",
+    "aria-label": (0, _i18n.__)('Layout styles')
+  }, (0, _i18n.__)('Layout'))));
+}
+
+var _default = RootMenu;
+exports.default = _default;
+//# sourceMappingURL=root-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/root-menu.js"],"names":["useHasDimensionsPanel","useHasTypographyPanel","useHasColorPanel","useGlobalSetting","useSettingsForBlockElement","blockEditorPrivateApis","RootMenu","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasDimensionsPanel","hasLayoutPanel","typography","color","layout"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AAZA;AACA;AACA;;AAMA;AACA;AACA;AAIA,MAAM;AACLA,EAAAA,qBADK;AAELC,EAAAA,qBAFK;AAGLC,EAAAA,gBAHK;AAILC,EAAAA,gBAJK;AAKLC,EAAAA;AALK,IAMF,yBAAQC,wBAAR,CANJ;;AAQA,SAASC,QAAT,GAAoB;AACnB,QAAM,CAAEC,WAAF,IAAkBJ,gBAAgB,CAAE,EAAF,CAAxC;AACA,QAAMK,QAAQ,GAAGJ,0BAA0B,CAAEG,WAAF,CAA3C;AACA,QAAME,kBAAkB,GAAGR,qBAAqB,CAAEO,QAAF,CAAhD;AACA,QAAME,aAAa,GAAGR,gBAAgB,CAAEM,QAAF,CAAtC;AACA,QAAMG,kBAAkB,GAAGX,qBAAqB,CAAEQ,QAAF,CAAhD;AACA,QAAMI,cAAc,GAAGD,kBAAvB;AAEA,SACC,qDACC,4BAAC,mCAAD,QACGF,kBAAkB,IACnB,4BAAC,wCAAD;AACC,IAAA,IAAI,EAAGI,iBADR;AAEC,IAAA,IAAI,EAAC,aAFN;AAGC,kBAAa,cAAI,mBAAJ;AAHd,KAKG,cAAI,YAAJ,CALH,CAFF,EAUGH,aAAa,IACd,4BAAC,wCAAD;AACC,IAAA,IAAI,EAAGI,YADR;AAEC,IAAA,IAAI,EAAC,SAFN;AAGC,kBAAa,cAAI,eAAJ;AAHd,KAKG,cAAI,QAAJ,CALH,CAXF,EAmBGF,cAAc,IACf,4BAAC,wCAAD;AACC,IAAA,IAAI,EAAGG,aADR;AAEC,IAAA,IAAI,EAAC,SAFN;AAGC,kBAAa,cAAI,eAAJ;AAHd,KAKG,cAAI,QAAJ,CALH,CApBF,CADD,CADD;AAiCA;;eAEcT,Q","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalItemGroup as ItemGroup } from '@wordpress/components';\nimport { typography, color, layout } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { unlock } from '../../private-apis';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasColorPanel,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n} = unlock( blockEditorPrivateApis );\n\nfunction RootMenu() {\n\tconst [ rawSettings ] = useGlobalSetting( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasDimensionsPanel;\n\n\treturn (\n\t\t<>\n\t\t\t<ItemGroup>\n\t\t\t\t{ hasTypographyPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ typography }\n\t\t\t\t\t\tpath=\"/typography\"\n\t\t\t\t\t\taria-label={ __( 'Typography styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Typography' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasColorPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ color }\n\t\t\t\t\t\tpath=\"/colors\"\n\t\t\t\t\t\taria-label={ __( 'Colors styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Colors' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasLayoutPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ layout }\n\t\t\t\t\t\tpath=\"/layout\"\n\t\t\t\t\t\taria-label={ __( 'Layout styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Layout' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t</ItemGroup>\n\t\t</>\n\t);\n}\n\nexport default RootMenu;\n"]}

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

@@ -76,6 +76,8 @@ function useSortedBlockTypes() {
 }
 
 function useBlockHasGlobalStyles(blockName) {
+  var _useBlockVariations;
+
   const [rawSettings] = useGlobalSetting('', blockName);
   const settings = useSettingsForBlockElement(rawSettings, blockName);
   const hasTypographyPanel = useHasTypographyPanel(settings);
@@ -83,7 +85,7 @@ function useBlockHasGlobalStyles(blockName) {
   const hasBorderPanel = useHasBorderPanel(settings);
   const hasDimensionsPanel = useHasDimensionsPanel(settings);
   const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
-  const hasVariationsPanel = (0, _variationsPanel.useHasVariationsPanel)(blockName);
+  const hasVariationsPanel = !!((_useBlockVariations = (0, _variationsPanel.useBlockVariations)(blockName)) !== null && _useBlockVariations !== void 0 && _useBlockVariations.length);
   const hasGlobalStyles = hasTypographyPanel || hasColorPanel || hasLayoutPanel || hasVariationsPanel;
   return hasGlobalStyles;
 }

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":["useHasDimensionsPanel","useHasTypographyPanel","useHasBorderPanel","useGlobalSetting","useSettingsForBlockElement","useHasColorPanel","blockEditorPrivateApis","useSortedBlockTypes","blockItems","select","blocksStore","getBlockTypes","groupByType","blocks","block","core","noncore","type","name","startsWith","push","coreItems","nonCoreItems","reduce","useBlockHasGlobalStyles","blockName","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","hasVariationsPanel","hasGlobalStyles","BlockMenuItem","hasBlockMenuItem","navigationButtonLabel","title","encodeURIComponent","icon","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 {\n\tBlockIcon,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { useDebounce } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { useHasVariationsPanel } from './variations-panel';\nimport ScreenHeader from './header';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { unlock } from '../../private-apis';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n\tuseHasColorPanel,\n} = unlock( blockEditorPrivateApis );\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 { core: coreItems, noncore: nonCoreItems } = blockItems.reduce(\n\t\tgroupByType,\n\t\t{ core: [], noncore: [] }\n\t);\n\treturn [ ...coreItems, ...nonCoreItems ];\n}\n\nexport function useBlockHasGlobalStyles( blockName ) {\n\tconst [ rawSettings ] = useGlobalSetting( '', blockName );\n\tconst settings = useSettingsForBlockElement( rawSettings, blockName );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;\n\tconst hasVariationsPanel = useHasVariationsPanel( blockName );\n\tconst hasGlobalStyles =\n\t\thasTypographyPanel ||\n\t\thasColorPanel ||\n\t\thasLayoutPanel ||\n\t\thasVariationsPanel;\n\treturn hasGlobalStyles;\n}\n\nfunction BlockMenuItem( { block } ) {\n\tconst hasBlockMenuItem = useBlockHasGlobalStyles( block.name );\n\tif ( ! hasBlockMenuItem ) {\n\t\treturn null;\n\t}\n\n\tconst navigationButtonLabel = sprintf(\n\t\t// translators: %s: is the name of a block e.g., 'Image' or 'Table'.\n\t\t__( '%s block styles' ),\n\t\tblock.title\n\t);\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t\taria-label={ navigationButtonLabel }\n\t\t>\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</NavigationButtonAsItem>\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\t__nextHasNoMarginBottom\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"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-block-list.js"],"names":["useHasDimensionsPanel","useHasTypographyPanel","useHasBorderPanel","useGlobalSetting","useSettingsForBlockElement","useHasColorPanel","blockEditorPrivateApis","useSortedBlockTypes","blockItems","select","blocksStore","getBlockTypes","groupByType","blocks","block","core","noncore","type","name","startsWith","push","coreItems","nonCoreItems","reduce","useBlockHasGlobalStyles","blockName","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","hasVariationsPanel","length","hasGlobalStyles","BlockMenuItem","hasBlockMenuItem","navigationButtonLabel","title","encodeURIComponent","icon","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 {\n\tBlockIcon,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { useDebounce } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { useBlockVariations } from './variations-panel';\nimport ScreenHeader from './header';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { unlock } from '../../private-apis';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n\tuseHasColorPanel,\n} = unlock( blockEditorPrivateApis );\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 { core: coreItems, noncore: nonCoreItems } = blockItems.reduce(\n\t\tgroupByType,\n\t\t{ core: [], noncore: [] }\n\t);\n\treturn [ ...coreItems, ...nonCoreItems ];\n}\n\nexport function useBlockHasGlobalStyles( blockName ) {\n\tconst [ rawSettings ] = useGlobalSetting( '', blockName );\n\tconst settings = useSettingsForBlockElement( rawSettings, blockName );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;\n\tconst hasVariationsPanel = !! useBlockVariations( blockName )?.length;\n\tconst hasGlobalStyles =\n\t\thasTypographyPanel ||\n\t\thasColorPanel ||\n\t\thasLayoutPanel ||\n\t\thasVariationsPanel;\n\treturn hasGlobalStyles;\n}\n\nfunction BlockMenuItem( { block } ) {\n\tconst hasBlockMenuItem = useBlockHasGlobalStyles( block.name );\n\tif ( ! hasBlockMenuItem ) {\n\t\treturn null;\n\t}\n\n\tconst navigationButtonLabel = sprintf(\n\t\t// translators: %s: is the name of a block e.g., 'Image' or 'Table'.\n\t\t__( '%s block styles' ),\n\t\tblock.title\n\t);\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t\taria-label={ navigationButtonLabel }\n\t\t>\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</NavigationButtonAsItem>\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\t__nextHasNoMarginBottom\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-block.js

@@ -11,12 +11,26 @@ var _element = require("@wordpress/element");
 
 var _blocks = require("@wordpress/blocks");
 
-var _contextMenu = _interopRequireDefault(require("./context-menu"));
+var _blockEditor = require("@wordpress/block-editor");
+
+var _data = require("@wordpress/data");
+
+var _coreData = require("@wordpress/core-data");
+
+var _components = require("@wordpress/components");
+
+var _i18n = require("@wordpress/i18n");
 
 var _header = _interopRequireDefault(require("./header"));
 
 var _blockPreviewPanel = _interopRequireDefault(require("./block-preview-panel"));
 
+var _privateApis = require("../../private-apis");
+
+var _subtitle = _interopRequireDefault(require("./subtitle"));
+
+var _variationsPanel = require("./variations-panel");
+
 /**
  * WordPress dependencies
  */
@@ -24,19 +38,156 @@ var _blockPreviewPanel = _interopRequireDefault(require("./block-preview-panel")
 /**
  * Internal dependencies
  */
+const {
+  useHasDimensionsPanel,
+  useHasTypographyPanel,
+  useHasBorderPanel,
+  useGlobalSetting,
+  useSettingsForBlockElement,
+  useHasColorPanel,
+  useHasEffectsPanel,
+  useHasFiltersPanel,
+  useGlobalStyle,
+  BorderPanel: StylesBorderPanel,
+  ColorPanel: StylesColorPanel,
+  TypographyPanel: StylesTypographyPanel,
+  DimensionsPanel: StylesDimensionsPanel,
+  EffectsPanel: StylesEffectsPanel,
+  FiltersPanel: StylesFiltersPanel,
+  AdvancedPanel: StylesAdvancedPanel
+} = (0, _privateApis.unlock)(_blockEditor.privateApis);
+
 function ScreenBlock(_ref) {
   let {
-    name
+    name,
+    variation
   } = _ref;
+  let prefixParts = [];
+
+  if (variation) {
+    prefixParts = ['variations', variation].concat(prefixParts);
+  }
+
+  const prefix = prefixParts.join('.');
+  const [style] = useGlobalStyle(prefix, name, 'user', {
+    shouldDecodeEncode: false
+  });
+  const [inheritedStyle, setStyle] = useGlobalStyle(prefix, name, 'all', {
+    shouldDecodeEncode: false
+  });
+  const [rawSettings, setSettings] = useGlobalSetting('', name);
+  const settings = useSettingsForBlockElement(rawSettings, name);
   const blockType = (0, _blocks.getBlockType)(name);
+  const blockVariations = (0, _variationsPanel.useBlockVariations)(name);
+  const hasTypographyPanel = useHasTypographyPanel(settings);
+  const hasColorPanel = useHasColorPanel(settings);
+  const hasBorderPanel = useHasBorderPanel(settings);
+  const hasDimensionsPanel = useHasDimensionsPanel(settings);
+  const hasEffectsPanel = useHasEffectsPanel(settings);
+  const hasFiltersPanel = useHasFiltersPanel(settings);
+  const hasVariationsPanel = !!(blockVariations !== null && blockVariations !== void 0 && blockVariations.length) && !variation;
+  const {
+    canEditCSS
+  } = (0, _data.useSelect)(select => {
+    var _globalStyles$_links$, _globalStyles$_links;
+
+    const {
+      getEntityRecord,
+      __experimentalGetCurrentGlobalStylesId
+    } = select(_coreData.store);
+
+    const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+
+    const globalStyles = globalStylesId ? getEntityRecord('root', 'globalStyles', globalStylesId) : undefined;
+    return {
+      canEditCSS: (_globalStyles$_links$ = !!(globalStyles !== null && globalStyles !== void 0 && (_globalStyles$_links = globalStyles._links) !== null && _globalStyles$_links !== void 0 && _globalStyles$_links['wp:action-edit-css'])) !== null && _globalStyles$_links$ !== void 0 ? _globalStyles$_links$ : false
+    };
+  }, []);
+  const currentBlockStyle = variation ? blockVariations.find(s => s.name === variation) : null; // These intermediary objects are needed because the "layout" property is stored
+  // in settings rather than styles.
+
+  const inheritedStyleWithLayout = (0, _element.useMemo)(() => {
+    return { ...inheritedStyle,
+      layout: settings.layout
+    };
+  }, [inheritedStyle, settings.layout]);
+  const styleWithLayout = (0, _element.useMemo)(() => {
+    return { ...style,
+      layout: settings.layout
+    };
+  }, [style, settings.layout]);
+
+  const onChangeDimensions = newStyle => {
+    const updatedStyle = { ...newStyle
+    };
+    delete updatedStyle.layout;
+    setStyle(updatedStyle);
+
+    if (newStyle.layout !== settings.layout) {
+      setSettings({ ...rawSettings,
+        layout: newStyle.layout
+      });
+    }
+  };
+
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
-    title: blockType.title
+    title: variation ? currentBlockStyle.label : blockType.title
   }), (0, _element.createElement)(_blockPreviewPanel.default, {
+    name: name,
+    variation: variation
+  }), hasVariationsPanel && (0, _element.createElement)("div", {
+    className: "edit-site-global-styles-screen-variations"
+  }, (0, _element.createElement)(_components.__experimentalVStack, {
+    spacing: 3
+  }, (0, _element.createElement)(_subtitle.default, null, (0, _i18n.__)('Style Variations')), (0, _element.createElement)(_variationsPanel.VariationsPanel, {
     name: name
-  }), (0, _element.createElement)(_contextMenu.default, {
-    parentMenu: '/blocks/' + encodeURIComponent(name),
-    name: name
-  }));
+  }))), hasColorPanel && (0, _element.createElement)(StylesColorPanel, {
+    inheritedValue: inheritedStyle,
+    value: style,
+    onChange: setStyle,
+    settings: settings
+  }), hasTypographyPanel && (0, _element.createElement)(StylesTypographyPanel, {
+    inheritedValue: inheritedStyle,
+    value: style,
+    onChange: setStyle,
+    settings: settings
+  }), hasDimensionsPanel && (0, _element.createElement)(StylesDimensionsPanel, {
+    inheritedValue: inheritedStyleWithLayout,
+    value: styleWithLayout,
+    onChange: onChangeDimensions,
+    settings: settings,
+    includeLayoutControls: true
+  }), hasBorderPanel && (0, _element.createElement)(StylesBorderPanel, {
+    inheritedValue: inheritedStyle,
+    value: style,
+    onChange: setStyle,
+    settings: settings
+  }), hasEffectsPanel && (0, _element.createElement)(StylesEffectsPanel, {
+    inheritedValue: inheritedStyleWithLayout,
+    value: styleWithLayout,
+    onChange: onChangeDimensions,
+    settings: settings,
+    includeLayoutControls: true
+  }), hasFiltersPanel && (0, _element.createElement)(StylesFiltersPanel, {
+    inheritedValue: inheritedStyleWithLayout,
+    value: styleWithLayout,
+    onChange: onChangeDimensions,
+    settings: { ...settings,
+      color: { ...settings.color,
+        customDuotone: false //TO FIX: Custom duotone only works on the block level right now
+
+      }
+    },
+    includeLayoutControls: true
+  }), canEditCSS && (0, _element.createElement)(_components.PanelBody, {
+    title: (0, _i18n.__)('Advanced'),
+    initialOpen: false
+  }, (0, _element.createElement)("p", null, (0, _i18n.sprintf)( // translators: %s: is the name of a block e.g., 'Image' or 'Table'.
+  (0, _i18n.__)('Add your own CSS to customize the appearance of the %s block.'), blockType === null || blockType === void 0 ? void 0 : blockType.title)), (0, _element.createElement)(StylesAdvancedPanel, {
+    value: style,
+    onChange: setStyle,
+    inheritedValue: inheritedStyle
+  })));
 }
 
 var _default = ScreenBlock;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-block.js"],"names":["ScreenBlock","name","blockType","title","encodeURIComponent"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAKA,SAASA,WAAT,OAAiC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AAChC,QAAMC,SAAS,GAAG,0BAAcD,IAAd,CAAlB;AAEA,SACC,qDACC,4BAAC,eAAD;AAAc,IAAA,KAAK,EAAGC,SAAS,CAACC;AAAhC,IADD,EAEC,4BAAC,0BAAD;AAAmB,IAAA,IAAI,EAAGF;AAA1B,IAFD,EAGC,4BAAC,oBAAD;AACC,IAAA,UAAU,EAAG,aAAaG,kBAAkB,CAAEH,IAAF,CAD7C;AAEC,IAAA,IAAI,EAAGA;AAFR,IAHD,CADD;AAUA;;eAEcD,W","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockType } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport ContextMenu from './context-menu';\nimport ScreenHeader from './header';\nimport BlockPreviewPanel from './block-preview-panel';\n\nfunction ScreenBlock( { name } ) {\n\tconst blockType = getBlockType( name );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ blockType.title } />\n\t\t\t<BlockPreviewPanel name={ name } />\n\t\t\t<ContextMenu\n\t\t\t\tparentMenu={ '/blocks/' + encodeURIComponent( name ) }\n\t\t\t\tname={ name }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenBlock;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-block.js"],"names":["useHasDimensionsPanel","useHasTypographyPanel","useHasBorderPanel","useGlobalSetting","useSettingsForBlockElement","useHasColorPanel","useHasEffectsPanel","useHasFiltersPanel","useGlobalStyle","BorderPanel","StylesBorderPanel","ColorPanel","StylesColorPanel","TypographyPanel","StylesTypographyPanel","DimensionsPanel","StylesDimensionsPanel","EffectsPanel","StylesEffectsPanel","FiltersPanel","StylesFiltersPanel","AdvancedPanel","StylesAdvancedPanel","blockEditorPrivateApis","ScreenBlock","name","variation","prefixParts","concat","prefix","join","style","shouldDecodeEncode","inheritedStyle","setStyle","rawSettings","setSettings","settings","blockType","blockVariations","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasEffectsPanel","hasFiltersPanel","hasVariationsPanel","length","canEditCSS","select","getEntityRecord","__experimentalGetCurrentGlobalStylesId","coreStore","globalStylesId","globalStyles","undefined","_links","currentBlockStyle","find","s","inheritedStyleWithLayout","layout","styleWithLayout","onChangeDimensions","newStyle","updatedStyle","label","title","color","customDuotone"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockType } from '@wordpress/blocks';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport {\n\tPanelBody,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { unlock } from '../../private-apis';\nimport Subtitle from './subtitle';\nimport { useBlockVariations, VariationsPanel } from './variations-panel';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n\tuseHasColorPanel,\n\tuseHasEffectsPanel,\n\tuseHasFiltersPanel,\n\tuseGlobalStyle,\n\tBorderPanel: StylesBorderPanel,\n\tColorPanel: StylesColorPanel,\n\tTypographyPanel: StylesTypographyPanel,\n\tDimensionsPanel: StylesDimensionsPanel,\n\tEffectsPanel: StylesEffectsPanel,\n\tFiltersPanel: StylesFiltersPanel,\n\tAdvancedPanel: StylesAdvancedPanel,\n} = unlock( blockEditorPrivateApis );\n\nfunction ScreenBlock( { name, variation } ) {\n\tlet prefixParts = [];\n\tif ( variation ) {\n\t\tprefixParts = [ 'variations', variation ].concat( prefixParts );\n\t}\n\tconst prefix = prefixParts.join( '.' );\n\n\tconst [ style ] = useGlobalStyle( prefix, name, 'user', {\n\t\tshouldDecodeEncode: false,\n\t} );\n\tconst [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {\n\t\tshouldDecodeEncode: false,\n\t} );\n\tconst [ rawSettings, setSettings ] = useGlobalSetting( '', name );\n\tconst settings = useSettingsForBlockElement( rawSettings, name );\n\tconst blockType = getBlockType( name );\n\tconst blockVariations = useBlockVariations( name );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasEffectsPanel = useHasEffectsPanel( settings );\n\tconst hasFiltersPanel = useHasFiltersPanel( settings );\n\tconst hasVariationsPanel = !! blockVariations?.length && ! variation;\n\tconst { canEditCSS } = useSelect( ( select ) => {\n\t\tconst { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =\n\t\t\tselect( coreStore );\n\n\t\tconst globalStylesId = __experimentalGetCurrentGlobalStylesId();\n\t\tconst globalStyles = globalStylesId\n\t\t\t? getEntityRecord( 'root', 'globalStyles', globalStylesId )\n\t\t\t: undefined;\n\n\t\treturn {\n\t\t\tcanEditCSS:\n\t\t\t\t!! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,\n\t\t};\n\t}, [] );\n\tconst currentBlockStyle = variation\n\t\t? blockVariations.find( ( s ) => s.name === variation )\n\t\t: null;\n\n\t// These intermediary objects are needed because the \"layout\" property is stored\n\t// in settings rather than styles.\n\tconst inheritedStyleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...inheritedStyle,\n\t\t\tlayout: settings.layout,\n\t\t};\n\t}, [ inheritedStyle, settings.layout ] );\n\tconst styleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...style,\n\t\t\tlayout: settings.layout,\n\t\t};\n\t}, [ style, settings.layout ] );\n\tconst onChangeDimensions = ( newStyle ) => {\n\t\tconst updatedStyle = { ...newStyle };\n\t\tdelete updatedStyle.layout;\n\t\tsetStyle( updatedStyle );\n\n\t\tif ( newStyle.layout !== settings.layout ) {\n\t\t\tsetSettings( {\n\t\t\t\t...rawSettings,\n\t\t\t\tlayout: newStyle.layout,\n\t\t\t} );\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ variation ? currentBlockStyle.label : blockType.title }\n\t\t\t/>\n\t\t\t<BlockPreviewPanel name={ name } variation={ variation } />\n\t\t\t{ hasVariationsPanel && (\n\t\t\t\t<div className=\"edit-site-global-styles-screen-variations\">\n\t\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t\t<Subtitle>{ __( 'Style Variations' ) }</Subtitle>\n\t\t\t\t\t\t<VariationsPanel name={ name } />\n\t\t\t\t\t</VStack>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ hasColorPanel && (\n\t\t\t\t<StylesColorPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasTypographyPanel && (\n\t\t\t\t<StylesTypographyPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasDimensionsPanel && (\n\t\t\t\t<StylesDimensionsPanel\n\t\t\t\t\tinheritedValue={ inheritedStyleWithLayout }\n\t\t\t\t\tvalue={ styleWithLayout }\n\t\t\t\t\tonChange={ onChangeDimensions }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\tincludeLayoutControls\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasBorderPanel && (\n\t\t\t\t<StylesBorderPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasEffectsPanel && (\n\t\t\t\t<StylesEffectsPanel\n\t\t\t\t\tinheritedValue={ inheritedStyleWithLayout }\n\t\t\t\t\tvalue={ styleWithLayout }\n\t\t\t\t\tonChange={ onChangeDimensions }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\tincludeLayoutControls\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasFiltersPanel && (\n\t\t\t\t<StylesFiltersPanel\n\t\t\t\t\tinheritedValue={ inheritedStyleWithLayout }\n\t\t\t\t\tvalue={ styleWithLayout }\n\t\t\t\t\tonChange={ onChangeDimensions }\n\t\t\t\t\tsettings={ {\n\t\t\t\t\t\t...settings,\n\t\t\t\t\t\tcolor: {\n\t\t\t\t\t\t\t...settings.color,\n\t\t\t\t\t\t\tcustomDuotone: false, //TO FIX: Custom duotone only works on the block level right now\n\t\t\t\t\t\t},\n\t\t\t\t\t} }\n\t\t\t\t\tincludeLayoutControls\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ canEditCSS && (\n\t\t\t\t<PanelBody title={ __( 'Advanced' ) } initialOpen={ false }>\n\t\t\t\t\t<p>\n\t\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t\t// translators: %s: is the name of a block e.g., 'Image' or 'Table'.\n\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t'Add your own CSS to customize the appearance of the %s block.'\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tblockType?.title\n\t\t\t\t\t\t) }\n\t\t\t\t\t</p>\n\t\t\t\t\t<StylesAdvancedPanel\n\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\t/>\n\t\t\t\t</PanelBody>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenBlock;\n"]}

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

@@ -21,8 +21,6 @@ var _palette = _interopRequireDefault(require("./palette"));
 
 var _blockPreviewPanel = _interopRequireDefault(require("./block-preview-panel"));
 
-var _utils = require("./utils");
-
 var _privateApis = require("../../private-apis");
 
 /**
@@ -39,38 +37,23 @@ const {
   ColorPanel: StylesColorPanel
 } = (0, _privateApis.unlock)(_blockEditor.privateApis);
 
-function ScreenColors(_ref) {
-  let {
-    name,
-    variation = ''
-  } = _ref;
-  const variationClassName = (0, _utils.getVariationClassName)(variation);
-  let prefixParts = [];
-
-  if (variation) {
-    prefixParts = ['variations', variation].concat(prefixParts);
-  }
-
-  const prefix = prefixParts.join('.');
-  const [style] = useGlobalStyle(prefix, name, 'user', false);
-  const [inheritedStyle, setStyle] = useGlobalStyle(prefix, name, 'all', {
+function ScreenColors() {
+  const [style] = useGlobalStyle('', undefined, 'user', {
+    shouldDecodeEncode: false
+  });
+  const [inheritedStyle, setStyle] = useGlobalStyle('', undefined, 'all', {
     shouldDecodeEncode: false
   });
-  const [rawSettings] = useGlobalSetting('', name);
-  const settings = useSettingsForBlockElement(rawSettings, name);
+  const [rawSettings] = useGlobalSetting('');
+  const settings = useSettingsForBlockElement(rawSettings);
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
     title: (0, _i18n.__)('Colors'),
     description: (0, _i18n.__)('Manage palettes and the default color of different global elements on the site.')
-  }), (0, _element.createElement)(_blockPreviewPanel.default, {
-    name: name,
-    variation: variationClassName
-  }), (0, _element.createElement)("div", {
+  }), (0, _element.createElement)(_blockPreviewPanel.default, null), (0, _element.createElement)("div", {
     className: "edit-site-global-styles-screen-colors"
   }, (0, _element.createElement)(_components.__experimentalVStack, {
     spacing: 10
-  }, (0, _element.createElement)(_palette.default, {
-    name: name
-  }), (0, _element.createElement)(StylesColorPanel, {
+  }, (0, _element.createElement)(_palette.default, null), (0, _element.createElement)(StylesColorPanel, {
     inheritedValue: inheritedStyle,
     value: style,
     onChange: setStyle,

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":["useGlobalStyle","useGlobalSetting","useSettingsForBlockElement","ColorPanel","StylesColorPanel","blockEditorPrivateApis","ScreenColors","name","variation","variationClassName","prefixParts","concat","prefix","join","style","inheritedStyle","setStyle","shouldDecodeEncode","rawSettings","settings"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAdA;AACA;AACA;;AAKA;AACA;AACA;AAOA,MAAM;AACLA,EAAAA,cADK;AAELC,EAAAA,gBAFK;AAGLC,EAAAA,0BAHK;AAILC,EAAAA,UAAU,EAAEC;AAJP,IAKF,yBAAQC,wBAAR,CALJ;;AAOA,SAASC,YAAT,OAAkD;AAAA,MAA3B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,SAAS,GAAG;AAApB,GAA2B;AACjD,QAAMC,kBAAkB,GAAG,kCAAuBD,SAAvB,CAA3B;AAEA,MAAIE,WAAW,GAAG,EAAlB;;AACA,MAAKF,SAAL,EAAiB;AAChBE,IAAAA,WAAW,GAAG,CAAE,YAAF,EAAgBF,SAAhB,EAA4BG,MAA5B,CAAoCD,WAApC,CAAd;AACA;;AACD,QAAME,MAAM,GAAGF,WAAW,CAACG,IAAZ,CAAkB,GAAlB,CAAf;AAEA,QAAM,CAAEC,KAAF,IAAYd,cAAc,CAAEY,MAAF,EAAUL,IAAV,EAAgB,MAAhB,EAAwB,KAAxB,CAAhC;AACA,QAAM,CAAEQ,cAAF,EAAkBC,QAAlB,IAA+BhB,cAAc,CAAEY,MAAF,EAAUL,IAAV,EAAgB,KAAhB,EAAuB;AACzEU,IAAAA,kBAAkB,EAAE;AADqD,GAAvB,CAAnD;AAGA,QAAM,CAAEC,WAAF,IAAkBjB,gBAAgB,CAAE,EAAF,EAAMM,IAAN,CAAxC;AACA,QAAMY,QAAQ,GAAGjB,0BAA0B,CAAEgB,WAAF,EAAeX,IAAf,CAA3C;AAEA,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAG,cAAI,QAAJ,CADT;AAEC,IAAA,WAAW,EAAG,cACb,iFADa;AAFf,IADD,EAQC,4BAAC,0BAAD;AAAmB,IAAA,IAAI,EAAGA,IAA1B;AAAiC,IAAA,SAAS,EAAGE;AAA7C,IARD,EAUC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,gBAAD;AAAS,IAAA,IAAI,EAAGF;AAAhB,IADD,EAGC,4BAAC,gBAAD;AACC,IAAA,cAAc,EAAGQ,cADlB;AAEC,IAAA,KAAK,EAAGD,KAFT;AAGC,IAAA,QAAQ,EAAGE,QAHZ;AAIC,IAAA,QAAQ,EAAGG;AAJZ,IAHD,CADD,CAVD,CADD;AAyBA;;eAEcb,Y","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport Palette from './palette';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { getVariationClassName } from './utils';\nimport { unlock } from '../../private-apis';\n\nconst {\n\tuseGlobalStyle,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n\tColorPanel: StylesColorPanel,\n} = unlock( blockEditorPrivateApis );\n\nfunction ScreenColors( { name, variation = '' } ) {\n\tconst variationClassName = getVariationClassName( variation );\n\n\tlet prefixParts = [];\n\tif ( variation ) {\n\t\tprefixParts = [ 'variations', variation ].concat( prefixParts );\n\t}\n\tconst prefix = prefixParts.join( '.' );\n\n\tconst [ style ] = useGlobalStyle( prefix, name, 'user', false );\n\tconst [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {\n\t\tshouldDecodeEncode: false,\n\t} );\n\tconst [ rawSettings ] = useGlobalSetting( '', name );\n\tconst settings = useSettingsForBlockElement( rawSettings, 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<BlockPreviewPanel name={ name } variation={ variationClassName } />\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<StylesColorPanel\n\t\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t/>\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":["useGlobalStyle","useGlobalSetting","useSettingsForBlockElement","ColorPanel","StylesColorPanel","blockEditorPrivateApis","ScreenColors","style","undefined","shouldDecodeEncode","inheritedStyle","setStyle","rawSettings","settings"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAbA;AACA;AACA;;AAKA;AACA;AACA;AAMA,MAAM;AACLA,EAAAA,cADK;AAELC,EAAAA,gBAFK;AAGLC,EAAAA,0BAHK;AAILC,EAAAA,UAAU,EAAEC;AAJP,IAKF,yBAAQC,wBAAR,CALJ;;AAOA,SAASC,YAAT,GAAwB;AACvB,QAAM,CAAEC,KAAF,IAAYP,cAAc,CAAE,EAAF,EAAMQ,SAAN,EAAiB,MAAjB,EAAyB;AACxDC,IAAAA,kBAAkB,EAAE;AADoC,GAAzB,CAAhC;AAGA,QAAM,CAAEC,cAAF,EAAkBC,QAAlB,IAA+BX,cAAc,CAAE,EAAF,EAAMQ,SAAN,EAAiB,KAAjB,EAAwB;AAC1EC,IAAAA,kBAAkB,EAAE;AADsD,GAAxB,CAAnD;AAGA,QAAM,CAAEG,WAAF,IAAkBX,gBAAgB,CAAE,EAAF,CAAxC;AACA,QAAMY,QAAQ,GAAGX,0BAA0B,CAAEU,WAAF,CAA3C;AAEA,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAG,cAAI,QAAJ,CADT;AAEC,IAAA,WAAW,EAAG,cACb,iFADa;AAFf,IADD,EAQC,4BAAC,0BAAD,OARD,EAUC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,gBAAD,OADD,EAGC,4BAAC,gBAAD;AACC,IAAA,cAAc,EAAGF,cADlB;AAEC,IAAA,KAAK,EAAGH,KAFT;AAGC,IAAA,QAAQ,EAAGI,QAHZ;AAIC,IAAA,QAAQ,EAAGE;AAJZ,IAHD,CADD,CAVD,CADD;AAyBA;;eAEcP,Y","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport Palette from './palette';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { unlock } from '../../private-apis';\n\nconst {\n\tuseGlobalStyle,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n\tColorPanel: StylesColorPanel,\n} = unlock( blockEditorPrivateApis );\n\nfunction ScreenColors() {\n\tconst [ style ] = useGlobalStyle( '', undefined, 'user', {\n\t\tshouldDecodeEncode: false,\n\t} );\n\tconst [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {\n\t\tshouldDecodeEncode: false,\n\t} );\n\tconst [ rawSettings ] = useGlobalSetting( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\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<BlockPreviewPanel />\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 />\n\n\t\t\t\t\t<StylesColorPanel\n\t\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t/>\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-css.js

@@ -13,11 +13,11 @@ var _i18n = require("@wordpress/i18n");
 
 var _components = require("@wordpress/components");
 
-var _blocks = require("@wordpress/blocks");
+var _blockEditor = require("@wordpress/block-editor");
 
-var _header = _interopRequireDefault(require("./header"));
+var _privateApis = require("../../private-apis");
 
-var _customCss = _interopRequireDefault(require("./custom-css"));
+var _header = _interopRequireDefault(require("./header"));
 
 /**
  * WordPress dependencies
@@ -26,16 +26,19 @@ var _customCss = _interopRequireDefault(require("./custom-css"));
 /**
  * Internal dependencies
  */
-function ScreenCSS(_ref) {
-  let {
-    name
-  } = _ref;
-  // If name is defined, we are customizing CSS at the block level.
-  // Display the block title in the description.
-  const blockType = (0, _blocks.getBlockType)(name);
-  const title = blockType === null || blockType === void 0 ? void 0 : blockType.title;
-  const description = title !== undefined ? (0, _i18n.sprintf)( // translators: %s: is the name of a block e.g., 'Image' or 'Table'.
-  (0, _i18n.__)('Add your own CSS to customize the appearance of the %s block.'), title) : (0, _i18n.__)('Add your own CSS to customize the appearance and layout of your site.');
+const {
+  useGlobalStyle,
+  AdvancedPanel: StylesAdvancedPanel
+} = (0, _privateApis.unlock)(_blockEditor.privateApis);
+
+function ScreenCSS() {
+  const description = (0, _i18n.__)('Add your own CSS to customize the appearance and layout of your site.');
+  const [style] = useGlobalStyle('', undefined, 'user', {
+    shouldDecodeEncode: false
+  });
+  const [inheritedStyle, setStyle] = useGlobalStyle('', undefined, 'all', {
+    shouldDecodeEncode: false
+  });
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
     title: (0, _i18n.__)('CSS'),
     description: (0, _element.createElement)(_element.Fragment, null, description, (0, _element.createElement)(_components.ExternalLink, {
@@ -44,8 +47,10 @@ function ScreenCSS(_ref) {
     }, (0, _i18n.__)('Learn more about CSS')))
   }), (0, _element.createElement)("div", {
     className: "edit-site-global-styles-screen-css"
-  }, (0, _element.createElement)(_customCss.default, {
-    blockName: name
+  }, (0, _element.createElement)(StylesAdvancedPanel, {
+    value: style,
+    onChange: setStyle,
+    inheritedValue: inheritedStyle
   })));
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-css.js"],"names":["ScreenCSS","name","blockType","title","description","undefined"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AACA;;AAKA;;AACA;;AAXA;AACA;AACA;;AAKA;AACA;AACA;AAIA,SAASA,SAAT,OAA+B;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AAC9B;AACA;AACA,QAAMC,SAAS,GAAG,0BAAcD,IAAd,CAAlB;AACA,QAAME,KAAK,GAAGD,SAAH,aAAGA,SAAH,uBAAGA,SAAS,CAAEC,KAAzB;AAEA,QAAMC,WAAW,GAChBD,KAAK,KAAKE,SAAV,GACG,oBACA;AACA,gBACC,+DADD,CAFA,EAKAF,KALA,CADH,GAQG,cACA,uEADA,CATJ;AAaA,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAG,cAAI,KAAJ,CADT;AAEC,IAAA,WAAW,EACV,qDACGC,WADH,EAEC,4BAAC,wBAAD;AACC,MAAA,IAAI,EAAC,kDADN;AAEC,MAAA,SAAS,EAAC;AAFX,OAIG,cAAI,sBAAJ,CAJH,CAFD;AAHF,IADD,EAeC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,kBAAD;AAAkB,IAAA,SAAS,EAAGH;AAA9B,IADD,CAfD,CADD;AAqBA;;eAEcD,S","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { sprintf, __ } from '@wordpress/i18n';\nimport { ExternalLink } from '@wordpress/components';\nimport { getBlockType } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport CustomCSSControl from './custom-css';\n\nfunction ScreenCSS( { name } ) {\n\t// If name is defined, we are customizing CSS at the block level.\n\t// Display the block title in the description.\n\tconst blockType = getBlockType( name );\n\tconst title = blockType?.title;\n\n\tconst description =\n\t\ttitle !== undefined\n\t\t\t? sprintf(\n\t\t\t\t\t// translators: %s: is the name of a block e.g., 'Image' or 'Table'.\n\t\t\t\t\t__(\n\t\t\t\t\t\t'Add your own CSS to customize the appearance of the %s block.'\n\t\t\t\t\t),\n\t\t\t\t\ttitle\n\t\t\t  )\n\t\t\t: __(\n\t\t\t\t\t'Add your own CSS to customize the appearance and layout of your site.'\n\t\t\t  );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'CSS' ) }\n\t\t\t\tdescription={\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ description }\n\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\thref=\"https://wordpress.org/documentation/article/css/\"\n\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-screen-css-help-link\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Learn more about CSS' ) }\n\t\t\t\t\t\t</ExternalLink>\n\t\t\t\t\t</>\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<div className=\"edit-site-global-styles-screen-css\">\n\t\t\t\t<CustomCSSControl blockName={ name } />\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenCSS;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-css.js"],"names":["useGlobalStyle","AdvancedPanel","StylesAdvancedPanel","blockEditorPrivateApis","ScreenCSS","description","style","undefined","shouldDecodeEncode","inheritedStyle","setStyle"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AACA;;AAKA;;AACA;;AAXA;AACA;AACA;;AAKA;AACA;AACA;AAIA,MAAM;AAAEA,EAAAA,cAAF;AAAkBC,EAAAA,aAAa,EAAEC;AAAjC,IAAyD,yBAC9DC,wBAD8D,CAA/D;;AAIA,SAASC,SAAT,GAAqB;AACpB,QAAMC,WAAW,GAAG,cACnB,uEADmB,CAApB;AAGA,QAAM,CAAEC,KAAF,IAAYN,cAAc,CAAE,EAAF,EAAMO,SAAN,EAAiB,MAAjB,EAAyB;AACxDC,IAAAA,kBAAkB,EAAE;AADoC,GAAzB,CAAhC;AAGA,QAAM,CAAEC,cAAF,EAAkBC,QAAlB,IAA+BV,cAAc,CAAE,EAAF,EAAMO,SAAN,EAAiB,KAAjB,EAAwB;AAC1EC,IAAAA,kBAAkB,EAAE;AADsD,GAAxB,CAAnD;AAIA,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAG,cAAI,KAAJ,CADT;AAEC,IAAA,WAAW,EACV,qDACGH,WADH,EAEC,4BAAC,wBAAD;AACC,MAAA,IAAI,EAAC,kDADN;AAEC,MAAA,SAAS,EAAC;AAFX,OAIG,cAAI,sBAAJ,CAJH,CAFD;AAHF,IADD,EAeC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,mBAAD;AACC,IAAA,KAAK,EAAGC,KADT;AAEC,IAAA,QAAQ,EAAGI,QAFZ;AAGC,IAAA,cAAc,EAAGD;AAHlB,IADD,CAfD,CADD;AAyBA;;eAEcL,S","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { ExternalLink } from '@wordpress/components';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\nimport ScreenHeader from './header';\n\nconst { useGlobalStyle, AdvancedPanel: StylesAdvancedPanel } = unlock(\n\tblockEditorPrivateApis\n);\n\nfunction ScreenCSS() {\n\tconst description = __(\n\t\t'Add your own CSS to customize the appearance and layout of your site.'\n\t);\n\tconst [ style ] = useGlobalStyle( '', undefined, 'user', {\n\t\tshouldDecodeEncode: false,\n\t} );\n\tconst [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {\n\t\tshouldDecodeEncode: false,\n\t} );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'CSS' ) }\n\t\t\t\tdescription={\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ description }\n\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\thref=\"https://wordpress.org/documentation/article/css/\"\n\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-screen-css-help-link\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Learn more about CSS' ) }\n\t\t\t\t\t\t</ExternalLink>\n\t\t\t\t\t</>\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<div className=\"edit-site-global-styles-screen-css\">\n\t\t\t\t<StylesAdvancedPanel\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenCSS;\n"]}

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

@@ -19,8 +19,6 @@ var _header = _interopRequireDefault(require("./header"));
 
 var _blockPreviewPanel = _interopRequireDefault(require("./block-preview-panel"));
 
-var _utils = require("./utils");
-
 var _privateApis = require("../../private-apis");
 
 /**
@@ -36,24 +34,13 @@ const {
   useSettingsForBlockElement
 } = (0, _privateApis.unlock)(_blockEditor.privateApis);
 
-function ScreenLayout(_ref) {
-  let {
-    name,
-    variation = ''
-  } = _ref;
-  const [rawSettings] = useGlobalSetting('', name);
-  const settings = useSettingsForBlockElement(rawSettings, name);
+function ScreenLayout() {
+  const [rawSettings] = useGlobalSetting('');
+  const settings = useSettingsForBlockElement(rawSettings);
   const hasDimensionsPanel = useHasDimensionsPanel(settings);
-  const variationClassName = (0, _utils.getVariationClassName)(variation);
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
     title: (0, _i18n.__)('Layout')
-  }), (0, _element.createElement)(_blockPreviewPanel.default, {
-    name: name,
-    variation: variationClassName
-  }), hasDimensionsPanel && (0, _element.createElement)(_dimensionsPanel.default, {
-    name: name,
-    variation: variation
-  }));
+  }), (0, _element.createElement)(_blockPreviewPanel.default, null), hasDimensionsPanel && (0, _element.createElement)(_dimensionsPanel.default, null));
 }
 
 var _default = ScreenLayout;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-layout.js"],"names":["useHasDimensionsPanel","useGlobalSetting","useSettingsForBlockElement","blockEditorPrivateApis","ScreenLayout","name","variation","rawSettings","settings","hasDimensionsPanel","variationClassName"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAbA;AACA;AACA;;AAIA;AACA;AACA;AAOA,MAAM;AAAEA,EAAAA,qBAAF;AAAyBC,EAAAA,gBAAzB;AAA2CC,EAAAA;AAA3C,IACL,yBAAQC,wBAAR,CADD;;AAGA,SAASC,YAAT,OAAkD;AAAA,MAA3B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,SAAS,GAAG;AAApB,GAA2B;AACjD,QAAM,CAAEC,WAAF,IAAkBN,gBAAgB,CAAE,EAAF,EAAMI,IAAN,CAAxC;AACA,QAAMG,QAAQ,GAAGN,0BAA0B,CAAEK,WAAF,EAAeF,IAAf,CAA3C;AACA,QAAMI,kBAAkB,GAAGT,qBAAqB,CAAEQ,QAAF,CAAhD;AACA,QAAME,kBAAkB,GAAG,kCAAuBJ,SAAvB,CAA3B;AACA,SACC,qDACC,4BAAC,eAAD;AAAc,IAAA,KAAK,EAAG,cAAI,QAAJ;AAAtB,IADD,EAEC,4BAAC,0BAAD;AAAmB,IAAA,IAAI,EAAGD,IAA1B;AAAiC,IAAA,SAAS,EAAGK;AAA7C,IAFD,EAGGD,kBAAkB,IACnB,4BAAC,wBAAD;AAAiB,IAAA,IAAI,EAAGJ,IAAxB;AAA+B,IAAA,SAAS,EAAGC;AAA3C,IAJF,CADD;AASA;;eAEcF,Y","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport DimensionsPanel from './dimensions-panel';\nimport ScreenHeader from './header';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { getVariationClassName } from './utils';\nimport { unlock } from '../../private-apis';\n\nconst { useHasDimensionsPanel, useGlobalSetting, useSettingsForBlockElement } =\n\tunlock( blockEditorPrivateApis );\n\nfunction ScreenLayout( { name, variation = '' } ) {\n\tconst [ rawSettings ] = useGlobalSetting( '', name );\n\tconst settings = useSettingsForBlockElement( rawSettings, name );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst variationClassName = getVariationClassName( variation );\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'Layout' ) } />\n\t\t\t<BlockPreviewPanel name={ name } variation={ variationClassName } />\n\t\t\t{ hasDimensionsPanel && (\n\t\t\t\t<DimensionsPanel name={ name } variation={ variation } />\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenLayout;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-layout.js"],"names":["useHasDimensionsPanel","useGlobalSetting","useSettingsForBlockElement","blockEditorPrivateApis","ScreenLayout","rawSettings","settings","hasDimensionsPanel"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAZA;AACA;AACA;;AAIA;AACA;AACA;AAMA,MAAM;AAAEA,EAAAA,qBAAF;AAAyBC,EAAAA,gBAAzB;AAA2CC,EAAAA;AAA3C,IACL,yBAAQC,wBAAR,CADD;;AAGA,SAASC,YAAT,GAAwB;AACvB,QAAM,CAAEC,WAAF,IAAkBJ,gBAAgB,CAAE,EAAF,CAAxC;AACA,QAAMK,QAAQ,GAAGJ,0BAA0B,CAAEG,WAAF,CAA3C;AACA,QAAME,kBAAkB,GAAGP,qBAAqB,CAAEM,QAAF,CAAhD;AACA,SACC,qDACC,4BAAC,eAAD;AAAc,IAAA,KAAK,EAAG,cAAI,QAAJ;AAAtB,IADD,EAEC,4BAAC,0BAAD,OAFD,EAGGC,kBAAkB,IAAI,4BAAC,wBAAD,OAHzB,CADD;AAOA;;eAEcH,Y","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport DimensionsPanel from './dimensions-panel';\nimport ScreenHeader from './header';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { unlock } from '../../private-apis';\n\nconst { useHasDimensionsPanel, useGlobalSetting, useSettingsForBlockElement } =\n\tunlock( blockEditorPrivateApis );\n\nfunction ScreenLayout() {\n\tconst [ rawSettings ] = useGlobalSetting( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'Layout' ) } />\n\t\t\t<BlockPreviewPanel />\n\t\t\t{ hasDimensionsPanel && <DimensionsPanel /> }\n\t\t</>\n\t);\n}\n\nexport default ScreenLayout;\n"]}