@wordpress/edit-site 5.9.0 → 5.11.0

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,233 @@ var _blockPreviewPanel = _interopRequireDefault(require("./block-preview-panel")
 /**
  * Internal dependencies
  */
+function applyFallbackStyle(border) {
+  if (!border) {
+    return border;
+  }
+
+  const hasColorOrWidth = border.color || border.width;
+
+  if (!border.style && hasColorOrWidth) {
+    return { ...border,
+      style: 'solid'
+    };
+  }
+
+  if (border.style && !hasColorOrWidth) {
+    return undefined;
+  }
+
+  return border;
+}
+
+function applyAllFallbackStyles(border) {
+  if (!border) {
+    return border;
+  }
+
+  if ((0, _components.__experimentalHasSplitBorders)(border)) {
+    return {
+      top: applyFallbackStyle(border.top),
+      right: applyFallbackStyle(border.right),
+      bottom: applyFallbackStyle(border.bottom),
+      left: applyFallbackStyle(border.left)
+    };
+  }
+
+  return applyFallbackStyle(border);
+}
+
+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
+      });
+    }
+  };
+
+  const onChangeBorders = newStyle => {
+    if (!(newStyle !== null && newStyle !== void 0 && newStyle.border)) {
+      setStyle(newStyle);
+      return;
+    } // As Global Styles can't conditionally generate styles based on if
+    // other style properties have been set, we need to force split
+    // border definitions for user set global border styles. Border
+    // radius is derived from the same property i.e. `border.radius` if
+    // it is a string that is used. The longhand border radii styles are
+    // only generated if that property is an object.
+    //
+    // For borders (color, style, and width) those are all properties on
+    // the `border` style property. This means if the theme.json defined
+    // split borders and the user condenses them into a flat border or
+    // vice-versa we'd get both sets of styles which would conflict.
+
+
+    const {
+      radius,
+      ...newBorder
+    } = newStyle.border;
+    const border = applyAllFallbackStyles(newBorder);
+    const updatedBorder = !(0, _components.__experimentalHasSplitBorders)(border) ? {
+      top: border,
+      right: border,
+      bottom: border,
+      left: border
+    } : {
+      color: null,
+      style: null,
+      width: null,
+      ...border
+    };
+    setStyle({ ...newStyle,
+      border: { ...updatedBorder,
+        radius
+      }
+    });
+  };
+
   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: onChangeBorders,
+    settings: settings
+  }), hasEffectsPanel && (0, _element.createElement)(StylesEffectsPanel, {
+    inheritedValue: inheritedStyleWithLayout,
+    value: styleWithLayout,
+    onChange: setStyle,
+    settings: settings,
+    includeLayoutControls: true
+  }), hasFiltersPanel && (0, _element.createElement)(StylesFiltersPanel, {
+    inheritedValue: inheritedStyleWithLayout,
+    value: styleWithLayout,
+    onChange: setStyle,
+    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":["applyFallbackStyle","border","hasColorOrWidth","color","width","style","undefined","applyAllFallbackStyles","top","right","bottom","left","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","shouldDecodeEncode","inheritedStyle","setStyle","rawSettings","setSettings","settings","blockType","blockVariations","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasEffectsPanel","hasFiltersPanel","hasVariationsPanel","length","canEditCSS","select","getEntityRecord","__experimentalGetCurrentGlobalStylesId","coreStore","globalStylesId","globalStyles","_links","currentBlockStyle","find","s","inheritedStyleWithLayout","layout","styleWithLayout","onChangeDimensions","newStyle","updatedStyle","onChangeBorders","radius","newBorder","updatedBorder","label","title","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\t__experimentalHasSplitBorders as hasSplitBorders,\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\nfunction applyFallbackStyle( border ) {\n\tif ( ! border ) {\n\t\treturn border;\n\t}\n\n\tconst hasColorOrWidth = border.color || border.width;\n\n\tif ( ! border.style && hasColorOrWidth ) {\n\t\treturn { ...border, style: 'solid' };\n\t}\n\n\tif ( border.style && ! hasColorOrWidth ) {\n\t\treturn undefined;\n\t}\n\n\treturn border;\n}\n\nfunction applyAllFallbackStyles( border ) {\n\tif ( ! border ) {\n\t\treturn border;\n\t}\n\n\tif ( hasSplitBorders( border ) ) {\n\t\treturn {\n\t\t\ttop: applyFallbackStyle( border.top ),\n\t\t\tright: applyFallbackStyle( border.right ),\n\t\t\tbottom: applyFallbackStyle( border.bottom ),\n\t\t\tleft: applyFallbackStyle( border.left ),\n\t\t};\n\t}\n\n\treturn applyFallbackStyle( border );\n}\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\tconst onChangeBorders = ( newStyle ) => {\n\t\tif ( ! newStyle?.border ) {\n\t\t\tsetStyle( newStyle );\n\t\t\treturn;\n\t\t}\n\n\t\t// As Global Styles can't conditionally generate styles based on if\n\t\t// other style properties have been set, we need to force split\n\t\t// border definitions for user set global border styles. Border\n\t\t// radius is derived from the same property i.e. `border.radius` if\n\t\t// it is a string that is used. The longhand border radii styles are\n\t\t// only generated if that property is an object.\n\t\t//\n\t\t// For borders (color, style, and width) those are all properties on\n\t\t// the `border` style property. This means if the theme.json defined\n\t\t// split borders and the user condenses them into a flat border or\n\t\t// vice-versa we'd get both sets of styles which would conflict.\n\t\tconst { radius, ...newBorder } = newStyle.border;\n\t\tconst border = applyAllFallbackStyles( newBorder );\n\t\tconst updatedBorder = ! hasSplitBorders( border )\n\t\t\t? {\n\t\t\t\t\ttop: border,\n\t\t\t\t\tright: border,\n\t\t\t\t\tbottom: border,\n\t\t\t\t\tleft: border,\n\t\t\t  }\n\t\t\t: {\n\t\t\t\t\tcolor: null,\n\t\t\t\t\tstyle: null,\n\t\t\t\t\twidth: null,\n\t\t\t\t\t...border,\n\t\t\t  };\n\n\t\tsetStyle( { ...newStyle, border: { ...updatedBorder, radius } } );\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={ onChangeBorders }\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={ setStyle }\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={ setStyle }\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"]}