@wordpress/edit-site 5.2.0 → 5.3.0

package/build-module/components/global-styles/context-menu.js

@@ -1,11 +1,13 @@
-import { createElement } from "@wordpress/element";
+import { createElement, Fragment } from "@wordpress/element";
 
 /**
  * WordPress dependencies
  */
-import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
-import { typography, border, color, layout } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
+import { __experimentalItemGroup as ItemGroup, __experimentalHStack as HStack, __experimentalSpacer as Spacer, FlexItem, CardBody, CardDivider } from '@wordpress/components';
+import { typography, border, color, layout, chevronLeft, chevronRight } from '@wordpress/icons';
+import { isRTL, __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
@@ -16,6 +18,7 @@ import { useHasDimensionsPanel } from './dimensions-panel';
 import { useHasTypographyPanel } from './typography-panel';
 import { useHasVariationsPanel } from './variations-panel';
 import { NavigationButtonAsItem } from './navigation-button';
+import { IconWithCurrentColor } from './icon-with-current-color';
 import { ScreenVariations } from './screen-variations';
 
 function ContextMenu(_ref) {
@@ -29,7 +32,25 @@ function ContextMenu(_ref) {
   const hasDimensionsPanel = useHasDimensionsPanel(name);
   const hasLayoutPanel = hasDimensionsPanel;
   const hasVariationsPanel = useHasVariationsPanel(name, parentMenu);
-  return createElement(ItemGroup, null, hasTypographyPanel && createElement(NavigationButtonAsItem, {
+  const {
+    canEditCSS
+  } = useSelect(select => {
+    var _globalStyles$_links$, _globalStyles$_links;
+
+    const {
+      getEntityRecord,
+      __experimentalGetCurrentGlobalStylesId
+    } = select(coreStore);
+
+    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 isBlocksPanel = parentMenu.includes('blocks') && !parentMenu.includes('variations');
+  return createElement(Fragment, null, createElement(ItemGroup, null, hasTypographyPanel && createElement(NavigationButtonAsItem, {
     icon: typography,
     path: parentMenu + '/typography',
     "aria-label": __('Typography styles')
@@ -40,15 +61,26 @@ function ContextMenu(_ref) {
   }, __('Colors')), hasBorderPanel && createElement(NavigationButtonAsItem, {
     icon: border,
     path: parentMenu + '/border',
-    "aria-label": __('Border styles')
-  }, __('Border')), hasLayoutPanel && createElement(NavigationButtonAsItem, {
+    "aria-label": __('Border & shadow styles')
+  }, __('Border & Shadow')), hasLayoutPanel && createElement(NavigationButtonAsItem, {
     icon: layout,
     path: parentMenu + '/layout',
     "aria-label": __('Layout styles')
   }, __('Layout')), hasVariationsPanel && createElement(ScreenVariations, {
     name: name,
     path: parentMenu
-  }));
+  }), isBlocksPanel && canEditCSS && createElement(Fragment, null, createElement(CardDivider, null), createElement(CardBody, null, createElement(Spacer, {
+    as: "p",
+    paddingTop: 2,
+    marginBottom: 4
+  }, __('Add your own CSS to customize the block appearance.')), createElement(ItemGroup, null, createElement(NavigationButtonAsItem, {
+    path: parentMenu + '/css',
+    "aria-label": __('Additional block CSS')
+  }, createElement(HStack, {
+    justify: "space-between"
+  }, createElement(FlexItem, null, __('Additional block CSS')), createElement(IconWithCurrentColor, {
+    icon: isRTL() ? chevronLeft : chevronRight
+  }))))), createElement(CardDivider, null))));
 }
 
 export default ContextMenu;

package/build-module/components/global-styles/context-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/context-menu.js"],"names":["__experimentalItemGroup","ItemGroup","typography","border","color","layout","__","useHasBorderPanel","useHasColorPanel","useHasDimensionsPanel","useHasTypographyPanel","useHasVariationsPanel","NavigationButtonAsItem","ScreenVariations","ContextMenu","name","parentMenu","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","hasVariationsPanel"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,uBAAuB,IAAIC,SAApC,QAAqD,uBAArD;AACA,SAASC,UAAT,EAAqBC,MAArB,EAA6BC,KAA7B,EAAoCC,MAApC,QAAkD,kBAAlD;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SAASC,iBAAT,QAAkC,gBAAlC;AACA,SAASC,gBAAT,QAAiC,eAAjC;AACA,SAASC,qBAAT,QAAsC,oBAAtC;AACA,SAASC,qBAAT,QAAsC,oBAAtC;AACA,SAASC,qBAAT,QAAsC,oBAAtC;AACA,SAASC,sBAAT,QAAuC,qBAAvC;AACA,SAASC,gBAAT,QAAiC,qBAAjC;;AAEA,SAASC,WAAT,OAAkD;AAAA,MAA5B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,UAAU,GAAG;AAArB,GAA4B;AACjD,QAAMC,kBAAkB,GAAGP,qBAAqB,CAAEK,IAAF,CAAhD;AACA,QAAMG,aAAa,GAAGV,gBAAgB,CAAEO,IAAF,CAAtC;AACA,QAAMI,cAAc,GAAGZ,iBAAiB,CAAEQ,IAAF,CAAxC;AACA,QAAMK,kBAAkB,GAAGX,qBAAqB,CAAEM,IAAF,CAAhD;AACA,QAAMM,cAAc,GAAGD,kBAAvB;AACA,QAAME,kBAAkB,GAAGX,qBAAqB,CAAEI,IAAF,EAAQC,UAAR,CAAhD;AAEA,SACC,cAAC,SAAD,QACGC,kBAAkB,IACnB,cAAC,sBAAD;AACC,IAAA,IAAI,EAAGf,UADR;AAEC,IAAA,IAAI,EAAGc,UAAU,GAAG,aAFrB;AAGC,kBAAaV,EAAE,CAAE,mBAAF;AAHhB,KAKGA,EAAE,CAAE,YAAF,CALL,CAFF,EAUGY,aAAa,IACd,cAAC,sBAAD;AACC,IAAA,IAAI,EAAGd,KADR;AAEC,IAAA,IAAI,EAAGY,UAAU,GAAG,SAFrB;AAGC,kBAAaV,EAAE,CAAE,eAAF;AAHhB,KAKGA,EAAE,CAAE,QAAF,CALL,CAXF,EAmBGa,cAAc,IACf,cAAC,sBAAD;AACC,IAAA,IAAI,EAAGhB,MADR;AAEC,IAAA,IAAI,EAAGa,UAAU,GAAG,SAFrB;AAGC,kBAAaV,EAAE,CAAE,eAAF;AAHhB,KAKGA,EAAE,CAAE,QAAF,CALL,CApBF,EA4BGe,cAAc,IACf,cAAC,sBAAD;AACC,IAAA,IAAI,EAAGhB,MADR;AAEC,IAAA,IAAI,EAAGW,UAAU,GAAG,SAFrB;AAGC,kBAAaV,EAAE,CAAE,eAAF;AAHhB,KAKGA,EAAE,CAAE,QAAF,CALL,CA7BF,EAqCGgB,kBAAkB,IACnB,cAAC,gBAAD;AAAkB,IAAA,IAAI,EAAGP,IAAzB;AAAgC,IAAA,IAAI,EAAGC;AAAvC,IAtCF,CADD;AA2CA;;AAED,eAAeF,WAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalItemGroup as ItemGroup } from '@wordpress/components';\nimport { typography, border, color, layout } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useHasBorderPanel } from './border-panel';\nimport { useHasColorPanel } from './color-utils';\nimport { useHasDimensionsPanel } from './dimensions-panel';\nimport { useHasTypographyPanel } from './typography-panel';\nimport { useHasVariationsPanel } from './variations-panel';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { ScreenVariations } from './screen-variations';\n\nfunction ContextMenu( { name, parentMenu = '' } ) {\n\tconst hasTypographyPanel = useHasTypographyPanel( name );\n\tconst hasColorPanel = useHasColorPanel( name );\n\tconst hasBorderPanel = useHasBorderPanel( name );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( name );\n\tconst hasLayoutPanel = hasDimensionsPanel;\n\tconst hasVariationsPanel = useHasVariationsPanel( name, parentMenu );\n\n\treturn (\n\t\t<ItemGroup>\n\t\t\t{ hasTypographyPanel && (\n\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\ticon={ typography }\n\t\t\t\t\tpath={ parentMenu + '/typography' }\n\t\t\t\t\taria-label={ __( 'Typography styles' ) }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Typography' ) }\n\t\t\t\t</NavigationButtonAsItem>\n\t\t\t) }\n\t\t\t{ hasColorPanel && (\n\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\ticon={ color }\n\t\t\t\t\tpath={ parentMenu + '/colors' }\n\t\t\t\t\taria-label={ __( 'Colors styles' ) }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Colors' ) }\n\t\t\t\t</NavigationButtonAsItem>\n\t\t\t) }\n\t\t\t{ hasBorderPanel && (\n\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\ticon={ border }\n\t\t\t\t\tpath={ parentMenu + '/border' }\n\t\t\t\t\taria-label={ __( 'Border styles' ) }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Border' ) }\n\t\t\t\t</NavigationButtonAsItem>\n\t\t\t) }\n\t\t\t{ hasLayoutPanel && (\n\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\ticon={ layout }\n\t\t\t\t\tpath={ parentMenu + '/layout' }\n\t\t\t\t\taria-label={ __( 'Layout styles' ) }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Layout' ) }\n\t\t\t\t</NavigationButtonAsItem>\n\t\t\t) }\n\t\t\t{ hasVariationsPanel && (\n\t\t\t\t<ScreenVariations name={ name } path={ parentMenu } />\n\t\t\t) }\n\t\t</ItemGroup>\n\t);\n}\n\nexport default ContextMenu;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/context-menu.js"],"names":["__experimentalItemGroup","ItemGroup","__experimentalHStack","HStack","__experimentalSpacer","Spacer","FlexItem","CardBody","CardDivider","typography","border","color","layout","chevronLeft","chevronRight","isRTL","__","useSelect","store","coreStore","useHasBorderPanel","useHasColorPanel","useHasDimensionsPanel","useHasTypographyPanel","useHasVariationsPanel","NavigationButtonAsItem","IconWithCurrentColor","ScreenVariations","ContextMenu","name","parentMenu","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","hasVariationsPanel","canEditCSS","select","getEntityRecord","__experimentalGetCurrentGlobalStylesId","globalStylesId","globalStyles","undefined","_links","isBlocksPanel","includes"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalSpacer as Spacer,\n\tFlexItem,\n\tCardBody,\n\tCardDivider,\n} from '@wordpress/components';\nimport {\n\ttypography,\n\tborder,\n\tcolor,\n\tlayout,\n\tchevronLeft,\n\tchevronRight,\n} from '@wordpress/icons';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { useHasBorderPanel } from './border-panel';\nimport { useHasColorPanel } from './color-utils';\nimport { useHasDimensionsPanel } from './dimensions-panel';\nimport { useHasTypographyPanel } from './typography-panel';\nimport { useHasVariationsPanel } from './variations-panel';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { IconWithCurrentColor } from './icon-with-current-color';\nimport { ScreenVariations } from './screen-variations';\n\nfunction ContextMenu( { name, parentMenu = '' } ) {\n\tconst hasTypographyPanel = useHasTypographyPanel( name );\n\tconst hasColorPanel = useHasColorPanel( name );\n\tconst hasBorderPanel = useHasBorderPanel( name );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( name );\n\tconst hasLayoutPanel = hasDimensionsPanel;\n\tconst hasVariationsPanel = useHasVariationsPanel( name, parentMenu );\n\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\n\tconst isBlocksPanel =\n\t\tparentMenu.includes( 'blocks' ) &&\n\t\t! parentMenu.includes( 'variations' );\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={ parentMenu + '/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={ parentMenu + '/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{ hasBorderPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ border }\n\t\t\t\t\t\tpath={ parentMenu + '/border' }\n\t\t\t\t\t\taria-label={ __( 'Border & shadow styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Border & Shadow' ) }\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={ parentMenu + '/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\t{ hasVariationsPanel && (\n\t\t\t\t\t<ScreenVariations name={ name } path={ parentMenu } />\n\t\t\t\t) }\n\t\t\t\t{ isBlocksPanel && canEditCSS && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<CardDivider />\n\t\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t\t<Spacer as=\"p\" paddingTop={ 2 } marginBottom={ 4 }>\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'Add your own CSS to customize the block appearance.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t\t<ItemGroup>\n\t\t\t\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\t\t\t\tpath={ parentMenu + '/css' }\n\t\t\t\t\t\t\t\t\taria-label={ __( 'Additional block CSS' ) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t{ __( 'Additional block CSS' ) }\n\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\t\tisRTL()\n\t\t\t\t\t\t\t\t\t\t\t\t\t? chevronLeft\n\t\t\t\t\t\t\t\t\t\t\t\t\t: chevronRight\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t\t</CardBody>\n\t\t\t\t\t\t<CardDivider />\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</ItemGroup>\n\t\t</>\n\t);\n}\n\nexport default ContextMenu;\n"]}

package/build-module/components/global-styles/custom-css.js

@@ -3,17 +3,31 @@ import { createElement, Fragment } from "@wordpress/element";
 /**
  * WordPress dependencies
  */
-import { TextareaControl, Panel, PanelBody } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { TextareaControl, Panel, PanelBody, __experimentalVStack as VStack, Tooltip, Icon } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { experiments as blockEditorExperiments, transformStyles } from '@wordpress/block-editor';
+import { info } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
 
-import { useStyle } from './hooks';
+import { unlock } from '../../experiments';
+import Subtitle from './subtitle';
+const {
+  useGlobalStyle
+} = unlock(blockEditorExperiments);
 
-function CustomCSSControl() {
-  const [customCSS, setCustomCSS] = useStyle('css');
-  const [themeCSS] = useStyle('css', null, 'base');
+function CustomCSSControl(_ref) {
+  let {
+    blockName
+  } = _ref;
+  // If blockName is defined, we are customizing CSS at the block level:
+  // styles.blocks.blockName.css
+  const block = !!blockName ? blockName : null;
+  const [customCSS, setCustomCSS] = useGlobalStyle('css', block);
+  const [themeCSS] = useGlobalStyle('css', block, 'base');
+  const [cssError, setCSSError] = useState(null);
   const ignoreThemeCustomCSS = '/* IgnoreThemeCustomCSS */'; // If there is custom css from theme.json show it in the edit box
   // so the user can selectively overwrite it, rather than have the user CSS
   // completely overwrite the theme CSS by default.
@@ -29,23 +43,55 @@ function CustomCSSControl() {
     }
 
     setCustomCSS(value);
+
+    if (cssError) {
+      const [transformed] = transformStyles([{
+        css: value
+      }], '.editor-styles-wrapper');
+
+      if (transformed) {
+        setCSSError(null);
+      }
+    }
+  }
+
+  function handleOnBlur(event) {
+    var _event$target;
+
+    if (!(event !== null && event !== void 0 && (_event$target = event.target) !== null && _event$target !== void 0 && _event$target.value)) {
+      setCSSError(null);
+      return;
+    }
+
+    const [transformed] = transformStyles([{
+      css: event.target.value
+    }], '.editor-styles-wrapper');
+    setCSSError(transformed === null ? __('There is an error with your CSS structure.') : null);
   }
 
   const originalThemeCustomCSS = themeCSS && customCSS && themeCustomCSS !== customCSS ? themeCSS : undefined;
-  return createElement(Fragment, null, createElement(TextareaControl, {
-    __nextHasNoMarginBottom: true,
-    value: (customCSS === null || customCSS === void 0 ? void 0 : customCSS.replace(ignoreThemeCustomCSS, '')) || themeCustomCSS,
-    onChange: value => handleOnChange(value),
-    rows: 15,
-    className: "edit-site-global-styles__custom-css-input",
-    spellCheck: false,
-    help: __("Enter your custom CSS in the textarea and preview in the editor. Changes won't take effect until you've saved the template.")
-  }), originalThemeCustomCSS && createElement(Panel, null, createElement(PanelBody, {
+  return createElement(Fragment, null, originalThemeCustomCSS && createElement(Panel, null, createElement(PanelBody, {
     title: __('Original Theme Custom CSS'),
     initialOpen: false
   }, createElement("pre", {
     className: "edit-site-global-styles__custom-css-theme-css"
-  }, originalThemeCustomCSS))));
+  }, originalThemeCustomCSS))), createElement(VStack, {
+    spacing: 3
+  }, createElement(Subtitle, null, __('ADDITIONAL CSS')), createElement(TextareaControl, {
+    __nextHasNoMarginBottom: true,
+    value: (customCSS === null || customCSS === void 0 ? void 0 : customCSS.replace(ignoreThemeCustomCSS, '')) || themeCustomCSS,
+    onChange: value => handleOnChange(value),
+    onBlur: handleOnBlur,
+    className: "edit-site-global-styles__custom-css-input",
+    spellCheck: false
+  }), cssError && createElement(Tooltip, {
+    text: cssError
+  }, createElement("div", {
+    className: "edit-site-global-styles__custom-css-validation-wrapper"
+  }, createElement(Icon, {
+    icon: info,
+    className: "edit-site-global-styles__custom-css-validation-icon"
+  })))));
 }
 
 export default CustomCSSControl;

package/build-module/components/global-styles/custom-css.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/custom-css.js"],"names":["TextareaControl","Panel","PanelBody","__","useStyle","CustomCSSControl","customCSS","setCustomCSS","themeCSS","ignoreThemeCustomCSS","themeCustomCSS","undefined","handleOnChange","value","originalThemeCustomCSS","replace"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,eAAT,EAA0BC,KAA1B,EAAiCC,SAAjC,QAAkD,uBAAlD;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SAASC,QAAT,QAAyB,SAAzB;;AAEA,SAASC,gBAAT,GAA4B;AAC3B,QAAM,CAAEC,SAAF,EAAaC,YAAb,IAA8BH,QAAQ,CAAE,KAAF,CAA5C;AACA,QAAM,CAAEI,QAAF,IAAeJ,QAAQ,CAAE,KAAF,EAAS,IAAT,EAAe,MAAf,CAA7B;AACA,QAAMK,oBAAoB,GAAG,4BAA7B,CAH2B,CAK3B;AACA;AACA;;AACA,QAAMC,cAAc,GACnB,CAAEJ,SAAF,IAAeE,QAAf,GACI,MAAML,EAAE,CACT,wBADS,CAEN,QAAQK,QAAU,QAAQL,EAAE,CAAE,sBAAF,CAA4B,KAH9D,GAIGQ,SALJ;;AAOA,WAASC,cAAT,CAAyBC,KAAzB,EAAiC;AAChC;AACA;AACA,QAAKL,QAAQ,IAAIK,KAAK,KAAK,EAA3B,EAAgC;AAC/BN,MAAAA,YAAY,CAAEE,oBAAF,CAAZ;AACA;AACA;;AACDF,IAAAA,YAAY,CAAEM,KAAF,CAAZ;AACA;;AAED,QAAMC,sBAAsB,GAC3BN,QAAQ,IAAIF,SAAZ,IAAyBI,cAAc,KAAKJ,SAA5C,GACGE,QADH,GAEGG,SAHJ;AAKA,SACC,8BACC,cAAC,eAAD;AACC,IAAA,uBAAuB,MADxB;AAEC,IAAA,KAAK,EACJ,CAAAL,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAES,OAAX,CAAoBN,oBAApB,EAA0C,EAA1C,MACAC,cAJF;AAMC,IAAA,QAAQ,EAAKG,KAAF,IAAaD,cAAc,CAAEC,KAAF,CANvC;AAOC,IAAA,IAAI,EAAG,EAPR;AAQC,IAAA,SAAS,EAAC,2CARX;AASC,IAAA,UAAU,EAAG,KATd;AAUC,IAAA,IAAI,EAAGV,EAAE,CACR,6HADQ;AAVV,IADD,EAeGW,sBAAsB,IACvB,cAAC,KAAD,QACC,cAAC,SAAD;AACC,IAAA,KAAK,EAAGX,EAAE,CAAE,2BAAF,CADX;AAEC,IAAA,WAAW,EAAG;AAFf,KAIC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGW,sBADH,CAJD,CADD,CAhBF,CADD;AA8BA;;AAED,eAAeT,gBAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { TextareaControl, Panel, PanelBody } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useStyle } from './hooks';\n\nfunction CustomCSSControl() {\n\tconst [ customCSS, setCustomCSS ] = useStyle( 'css' );\n\tconst [ themeCSS ] = useStyle( 'css', null, 'base' );\n\tconst ignoreThemeCustomCSS = '/* IgnoreThemeCustomCSS */';\n\n\t// If there is custom css from theme.json show it in the edit box\n\t// so the user can selectively overwrite it, rather than have the user CSS\n\t// completely overwrite the theme CSS by default.\n\tconst themeCustomCSS =\n\t\t! customCSS && themeCSS\n\t\t\t? `/* ${ __(\n\t\t\t\t\t'Theme Custom CSS start'\n\t\t\t  ) } */\\n${ themeCSS }\\n/* ${ __( 'Theme Custom CSS end' ) } */`\n\t\t\t: undefined;\n\n\tfunction handleOnChange( value ) {\n\t\t// If there is theme custom CSS, but the user clears the input box then save the\n\t\t// ignoreThemeCustomCSS string so that the theme custom CSS is not re-applied.\n\t\tif ( themeCSS && value === '' ) {\n\t\t\tsetCustomCSS( ignoreThemeCustomCSS );\n\t\t\treturn;\n\t\t}\n\t\tsetCustomCSS( value );\n\t}\n\n\tconst originalThemeCustomCSS =\n\t\tthemeCSS && customCSS && themeCustomCSS !== customCSS\n\t\t\t? themeCSS\n\t\t\t: undefined;\n\n\treturn (\n\t\t<>\n\t\t\t<TextareaControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tvalue={\n\t\t\t\t\tcustomCSS?.replace( ignoreThemeCustomCSS, '' ) ||\n\t\t\t\t\tthemeCustomCSS\n\t\t\t\t}\n\t\t\t\tonChange={ ( value ) => handleOnChange( value ) }\n\t\t\t\trows={ 15 }\n\t\t\t\tclassName=\"edit-site-global-styles__custom-css-input\"\n\t\t\t\tspellCheck={ false }\n\t\t\t\thelp={ __(\n\t\t\t\t\t\"Enter your custom CSS in the textarea and preview in the editor. Changes won't take effect until you've saved the template.\"\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t{ originalThemeCustomCSS && (\n\t\t\t\t<Panel>\n\t\t\t\t\t<PanelBody\n\t\t\t\t\t\ttitle={ __( 'Original Theme Custom CSS' ) }\n\t\t\t\t\t\tinitialOpen={ false }\n\t\t\t\t\t>\n\t\t\t\t\t\t<pre className=\"edit-site-global-styles__custom-css-theme-css\">\n\t\t\t\t\t\t\t{ originalThemeCustomCSS }\n\t\t\t\t\t\t</pre>\n\t\t\t\t\t</PanelBody>\n\t\t\t\t</Panel>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default CustomCSSControl;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/custom-css.js"],"names":["useState","TextareaControl","Panel","PanelBody","__experimentalVStack","VStack","Tooltip","Icon","__","experiments","blockEditorExperiments","transformStyles","info","unlock","Subtitle","useGlobalStyle","CustomCSSControl","blockName","block","customCSS","setCustomCSS","themeCSS","cssError","setCSSError","ignoreThemeCustomCSS","themeCustomCSS","undefined","handleOnChange","value","transformed","css","handleOnBlur","event","target","originalThemeCustomCSS","replace"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport {\n\tTextareaControl,\n\tPanel,\n\tPanelBody,\n\t__experimentalVStack as VStack,\n\tTooltip,\n\tIcon,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport {\n\texperiments as blockEditorExperiments,\n\ttransformStyles,\n} from '@wordpress/block-editor';\nimport { info } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../experiments';\nimport Subtitle from './subtitle';\n\nconst { useGlobalStyle } = unlock( blockEditorExperiments );\nfunction CustomCSSControl( { blockName } ) {\n\t// If blockName is defined, we are customizing CSS at the block level:\n\t// styles.blocks.blockName.css\n\tconst block = !! blockName ? blockName : null;\n\n\tconst [ customCSS, setCustomCSS ] = useGlobalStyle( 'css', block );\n\tconst [ themeCSS ] = useGlobalStyle( 'css', block, 'base' );\n\tconst [ cssError, setCSSError ] = useState( null );\n\tconst ignoreThemeCustomCSS = '/* IgnoreThemeCustomCSS */';\n\n\t// If there is custom css from theme.json show it in the edit box\n\t// so the user can selectively overwrite it, rather than have the user CSS\n\t// completely overwrite the theme CSS by default.\n\tconst themeCustomCSS =\n\t\t! customCSS && themeCSS\n\t\t\t? `/* ${ __(\n\t\t\t\t\t'Theme Custom CSS start'\n\t\t\t  ) } */\\n${ themeCSS }\\n/* ${ __( 'Theme Custom CSS end' ) } */`\n\t\t\t: undefined;\n\n\tfunction handleOnChange( value ) {\n\t\t// If there is theme custom CSS, but the user clears the input box then save the\n\t\t// ignoreThemeCustomCSS string so that the theme custom CSS is not re-applied.\n\t\tif ( themeCSS && value === '' ) {\n\t\t\tsetCustomCSS( ignoreThemeCustomCSS );\n\t\t\treturn;\n\t\t}\n\t\tsetCustomCSS( value );\n\t\tif ( cssError ) {\n\t\t\tconst [ transformed ] = transformStyles(\n\t\t\t\t[ { css: value } ],\n\t\t\t\t'.editor-styles-wrapper'\n\t\t\t);\n\t\t\tif ( transformed ) {\n\t\t\t\tsetCSSError( null );\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction handleOnBlur( event ) {\n\t\tif ( ! event?.target?.value ) {\n\t\t\tsetCSSError( null );\n\t\t\treturn;\n\t\t}\n\n\t\tconst [ transformed ] = transformStyles(\n\t\t\t[ { css: event.target.value } ],\n\t\t\t'.editor-styles-wrapper'\n\t\t);\n\n\t\tsetCSSError(\n\t\t\ttransformed === null\n\t\t\t\t? __( 'There is an error with your CSS structure.' )\n\t\t\t\t: null\n\t\t);\n\t}\n\n\tconst originalThemeCustomCSS =\n\t\tthemeCSS && customCSS && themeCustomCSS !== customCSS\n\t\t\t? themeCSS\n\t\t\t: undefined;\n\n\treturn (\n\t\t<>\n\t\t\t{ originalThemeCustomCSS && (\n\t\t\t\t<Panel>\n\t\t\t\t\t<PanelBody\n\t\t\t\t\t\ttitle={ __( 'Original Theme Custom CSS' ) }\n\t\t\t\t\t\tinitialOpen={ false }\n\t\t\t\t\t>\n\t\t\t\t\t\t<pre className=\"edit-site-global-styles__custom-css-theme-css\">\n\t\t\t\t\t\t\t{ originalThemeCustomCSS }\n\t\t\t\t\t\t</pre>\n\t\t\t\t\t</PanelBody>\n\t\t\t\t</Panel>\n\t\t\t) }\n\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t<Subtitle>{ __( 'ADDITIONAL CSS' ) }</Subtitle>\n\t\t\t\t<TextareaControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tvalue={\n\t\t\t\t\t\tcustomCSS?.replace( ignoreThemeCustomCSS, '' ) ||\n\t\t\t\t\t\tthemeCustomCSS\n\t\t\t\t\t}\n\t\t\t\t\tonChange={ ( value ) => handleOnChange( value ) }\n\t\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\t\tclassName=\"edit-site-global-styles__custom-css-input\"\n\t\t\t\t\tspellCheck={ false }\n\t\t\t\t/>\n\t\t\t\t{ cssError && (\n\t\t\t\t\t<Tooltip text={ cssError }>\n\t\t\t\t\t\t<div className=\"edit-site-global-styles__custom-css-validation-wrapper\">\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ info }\n\t\t\t\t\t\t\t\tclassName=\"edit-site-global-styles__custom-css-validation-icon\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t</>\n\t);\n}\n\nexport default CustomCSSControl;\n"]}

package/build-module/components/global-styles/dimensions-panel.js

@@ -10,13 +10,18 @@ import classnames from 'classnames';
 
 import { __ } from '@wordpress/i18n';
 import { __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem, __experimentalBoxControl as BoxControl, __experimentalHStack as HStack, __experimentalUnitControl as UnitControl, __experimentalUseCustomUnits as useCustomUnits, __experimentalView as View } from '@wordpress/components';
-import { __experimentalUseCustomSides as useCustomSides, __experimentalHeightControl as HeightControl, __experimentalSpacingSizesControl as SpacingSizesControl } from '@wordpress/block-editor';
+import { __experimentalUseCustomSides as useCustomSides, HeightControl, __experimentalSpacingSizesControl as SpacingSizesControl, experiments as blockEditorExperiments } from '@wordpress/block-editor';
 import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
 
-import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';
+import { getSupportedGlobalStylesPanels } from './hooks';
+import { unlock } from '../../experiments';
+const {
+  useGlobalSetting,
+  useGlobalStyle
+} = unlock(blockEditorExperiments);
 const AXIAL_SIDES = ['horizontal', 'vertical'];
 export function useHasDimensionsPanel(name) {
   const hasContentSize = useHasContentSize(name);
@@ -30,43 +35,51 @@ export function useHasDimensionsPanel(name) {
 
 function useHasContentSize(name) {
   const supports = getSupportedGlobalStylesPanels(name);
-  const [settings] = useSetting('layout.contentSize', name);
+  const [settings] = useGlobalSetting('layout.contentSize', name);
   return settings && supports.includes('contentSize');
 }
 
 function useHasWideSize(name) {
   const supports = getSupportedGlobalStylesPanels(name);
-  const [settings] = useSetting('layout.wideSize', name);
+  const [settings] = useGlobalSetting('layout.wideSize', name);
   return settings && supports.includes('wideSize');
 }
 
 function useHasPadding(name) {
   const supports = getSupportedGlobalStylesPanels(name);
-  const [settings] = useSetting('spacing.padding', name);
+  const [settings] = useGlobalSetting('spacing.padding', name);
   return settings && supports.includes('padding');
 }
 
 function useHasMargin(name) {
   const supports = getSupportedGlobalStylesPanels(name);
-  const [settings] = useSetting('spacing.margin', name);
+  const [settings] = useGlobalSetting('spacing.margin', name);
   return settings && supports.includes('margin');
 }
 
 function useHasGap(name) {
   const supports = getSupportedGlobalStylesPanels(name);
-  const [settings] = useSetting('spacing.blockGap', name);
+  const [settings] = useGlobalSetting('spacing.blockGap', name);
   return settings && supports.includes('blockGap');
 }
 
 function useHasMinHeight(name) {
   const supports = getSupportedGlobalStylesPanels(name);
-  const [settings] = useSetting('dimensions.minHeight', name);
+  const [settings] = useGlobalSetting('dimensions.minHeight', name);
   return settings && supports.includes('minHeight');
 }
 
 function useHasSpacingPresets() {
-  const [settings] = useSetting('spacing.spacingSizes');
-  return settings && settings.length > 0;
+  var _ref, _ref2;
+
+  const [settings] = useGlobalSetting('spacing.spacingSizes');
+  const {
+    custom,
+    theme,
+    default: defaultPresets
+  } = settings || {};
+  const presets = (_ref = (_ref2 = custom !== null && custom !== void 0 ? custom : theme) !== null && _ref2 !== void 0 ? _ref2 : defaultPresets) !== null && _ref !== void 0 ? _ref : [];
+  return settings && presets.length > 0;
 }
 
 function filterValuesBySides(values, sides) {
@@ -129,8 +142,8 @@ function splitGapValue(value) {
 
 
 function useContentSizeProps(name) {
-  const [contentSizeValue, setContentSizeValue] = useSetting('layout.contentSize', name);
-  const [userSetContentSizeValue] = useSetting('layout.contentSize', name, 'user');
+  const [contentSizeValue, setContentSizeValue] = useGlobalSetting('layout.contentSize', name);
+  const [userSetContentSizeValue] = useGlobalSetting('layout.contentSize', name, 'user');
 
   const hasUserSetContentSizeValue = () => !!userSetContentSizeValue;
 
@@ -146,8 +159,8 @@ function useContentSizeProps(name) {
 
 
 function useWideSizeProps(name) {
-  const [wideSizeValue, setWideSizeValue] = useSetting('layout.wideSize', name);
-  const [userSetWideSizeValue] = useSetting('layout.wideSize', name, 'user');
+  const [wideSizeValue, setWideSizeValue] = useGlobalSetting('layout.wideSize', name);
+  const [userSetWideSizeValue] = useGlobalSetting('layout.wideSize', name, 'user');
 
   const hasUserSetWideSizeValue = () => !!userSetWideSizeValue;
 
@@ -163,8 +176,9 @@ function useWideSizeProps(name) {
 
 
 function usePaddingProps(name) {
-  let variationPath = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  const [rawPadding, setRawPadding] = useStyle(variationPath + 'spacing.padding', name);
+  let variation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  const prefix = variation ? `variations.${variation}.` : '';
+  const [rawPadding, setRawPadding] = useGlobalStyle(prefix + 'spacing.padding', name);
   const paddingValues = splitStyleValue(rawPadding);
   const paddingSides = useCustomSides(name, 'padding');
   const isAxialPadding = paddingSides && paddingSides.some(side => AXIAL_SIDES.includes(side));
@@ -176,7 +190,7 @@ function usePaddingProps(name) {
 
   const resetPaddingValue = () => setPaddingValues({});
 
-  const [userSetPaddingValue] = useStyle(variationPath + 'spacing.padding', name, 'user'); // The `hasPaddingValue` check does not need a parsed value, as `userSetPaddingValue` will be `undefined` if not set.
+  const [userSetPaddingValue] = useGlobalStyle(prefix + 'spacing.padding', name, 'user'); // The `hasPaddingValue` check does not need a parsed value, as `userSetPaddingValue` will be `undefined` if not set.
 
   const hasPaddingValue = () => !!userSetPaddingValue;
 
@@ -192,8 +206,9 @@ function usePaddingProps(name) {
 
 
 function useMarginProps(name) {
-  let variationPath = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  const [rawMargin, setRawMargin] = useStyle(variationPath + 'spacing.margin', name);
+  let variation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  const prefix = variation ? `variations.${variation}.` : '';
+  const [rawMargin, setRawMargin] = useGlobalStyle(prefix + 'spacing.margin', name);
   const marginValues = splitStyleValue(rawMargin);
   const marginSides = useCustomSides(name, 'margin');
   const isAxialMargin = marginSides && marginSides.some(side => AXIAL_SIDES.includes(side));
@@ -219,15 +234,16 @@ function useMarginProps(name) {
 
 
 function useBlockGapProps(name) {
-  let variationPath = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  const [gapValue, setGapValue] = useStyle(variationPath + 'spacing.blockGap', name);
+  let variation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  const prefix = variation ? `variations.${variation}.` : '';
+  const [gapValue, setGapValue] = useGlobalStyle(prefix + 'spacing.blockGap', name);
   const gapValues = splitGapValue(gapValue);
   const gapSides = useCustomSides(name, 'blockGap');
   const isAxialGap = gapSides && gapSides.some(side => AXIAL_SIDES.includes(side));
 
   const resetGapValue = () => setGapValue(undefined);
 
-  const [userSetGapValue] = useStyle(variationPath + 'spacing.blockGap', name, 'user');
+  const [userSetGapValue] = useGlobalStyle(prefix + 'spacing.blockGap', name, 'user');
 
   const hasGapValue = () => !!userSetGapValue;
 
@@ -261,8 +277,9 @@ function useBlockGapProps(name) {
 
 
 function useMinHeightProps(name) {
-  let variationPath = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  const [minHeightValue, setMinHeightValue] = useStyle(variationPath + 'dimensions.minHeight', name);
+  let variation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  const prefix = variation ? `variations.${variation}.` : '';
+  const [minHeightValue, setMinHeightValue] = useGlobalStyle(prefix + 'dimensions.minHeight', name);
 
   const resetMinHeightValue = () => setMinHeightValue(undefined);
 
@@ -276,11 +293,11 @@ function useMinHeightProps(name) {
   };
 }
 
-export default function DimensionsPanel(_ref) {
+export default function DimensionsPanel(_ref3) {
   let {
     name,
-    variationPath = ''
-  } = _ref;
+    variation = ''
+  } = _ref3;
   const showContentSizeControl = useHasContentSize(name);
   const showWideSizeControl = useHasWideSize(name);
   const showPaddingControl = useHasPadding(name);
@@ -289,7 +306,7 @@ export default function DimensionsPanel(_ref) {
   const showMinHeightControl = useHasMinHeight(name);
   const showSpacingPresetsControl = useHasSpacingPresets();
   const units = useCustomUnits({
-    availableUnits: useSetting('spacing.units', name)[0] || ['%', 'px', 'em', 'rem', 'vw']
+    availableUnits: useGlobalSetting('spacing.units', name)[0] || ['%', 'px', 'em', 'rem', 'vw']
   }); // Props for managing `layout.contentSize`.
 
   const {
@@ -313,7 +330,7 @@ export default function DimensionsPanel(_ref) {
     setPaddingValues,
     resetPaddingValue,
     hasPaddingValue
-  } = usePaddingProps(name, variationPath); // Props for managing `spacing.margin`.
+  } = usePaddingProps(name, variation); // Props for managing `spacing.margin`.
 
   const {
     marginValues,
@@ -322,7 +339,7 @@ export default function DimensionsPanel(_ref) {
     setMarginValues,
     resetMarginValue,
     hasMarginValue
-  } = useMarginProps(name, variationPath); // Props for managing `spacing.blockGap`.
+  } = useMarginProps(name, variation); // Props for managing `spacing.blockGap`.
 
   const {
     gapValue,
@@ -333,14 +350,14 @@ export default function DimensionsPanel(_ref) {
     setGapValues,
     resetGapValue,
     hasGapValue
-  } = useBlockGapProps(name, variationPath); // Props for managing `dimensions.minHeight`.
+  } = useBlockGapProps(name, variation); // Props for managing `dimensions.minHeight`.
 
   const {
     minHeightValue,
     setMinHeightValue,
     resetMinHeightValue,
     hasMinHeightValue
-  } = useMinHeightProps(name, variationPath);
+  } = useMinHeightProps(name, variation);
 
   const resetAll = () => {
     resetPaddingValue();