npm - @wordpress/edit-site - Versions diffs - 5.5.0 → 5.6.0 - Mend

@wordpress/edit-site 5.5.0 → 5.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (224) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/context-menu.js"],"names":["useHasDimensionsPanel","useHasTypographyPanel","useGlobalSetting","useSettingsForBlockElement","blockEditorPrivateApis","ContextMenu","name","parentMenu","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasEffectsPanel","hasFilterPanel","hasDimensionsPanel","hasLayoutPanel","hasVariationsPanel","canEditCSS","select","getEntityRecord","__experimentalGetCurrentGlobalStylesId","coreStore","globalStylesId","globalStyles","undefined","_links","isBlocksPanel","includes","typography","color","border","shadow","filter","layout","chevronLeft","chevronRight"],"mappings":";;;;;;;;;AAGA;;AAQA;;AAUA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;~~AACA;;AArCA~~;AACA;AACA;;AAwBA;AACA;AACA;~~AAWA~~,MAAM;AACLA,EAAAA,qBADK;AAELC,EAAAA,qBAFK;AAGLC,EAAAA,~~gBAHK~~;AAILC,EAAAA;~~AAJK~~,~~IAKF~~,yBAAQC,wBAAR,~~CALJ~~;;~~AAOA~~,SAASC,WAAT,OAAkD;AAAA,MAA5B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,UAAU,GAAG;AAArB,GAA4B;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,aAAa,GAAG,kCAAkBL,IAAlB,CAAtB;AACA,QAAMM,cAAc,~~GAAG~~,~~oCAAmBN~~,~~IAAnB~~,~~CAAvB~~;AACA,~~QAAMO~~,eAAe,GAAG,sCAAqBP,IAArB,CAAxB;AACA,QAAMQ,cAAc,GAAG,oCAAmBR,IAAnB,CAAvB;AACA,QAAMS,kBAAkB,~~GAAGf~~,qBAAqB,~~CAAES~~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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\tfilter,\n\tshadow,\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';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/\n Internal dependencies\n */\nimport { ~~useHasBorderPanel } from './border-panel';\nimport {~~ useHasColorPanel } from './color-utils';\nimport { useHasFilterPanel } from './filter-utils';\nimport { useHasVariationsPanel } from './variations-panel';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { IconWithCurrentColor } from './icon-with-current-color';\nimport { ScreenVariations } from './screen-variations';\nimport { useHasShadowControl } from './shadow-panel';\nimport { unlock } from '../../private-apis';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n} = unlock( blockEditorPrivateApis );\n\nfunction ContextMenu( { name, parentMenu = '' } ) {\n\tconst [ rawSettings ] = useGlobalSetting( '', name );\n\tconst settings = useSettingsForBlockElement( rawSettings, name );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( name );\n\tconst hasBorderPanel = useHasBorderPanel( ~~name~~ );\n\tconst hasEffectsPanel = useHasShadowControl( name );\n\tconst hasFilterPanel = useHasFilterPanel( name );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\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' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Border' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasEffectsPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ shadow }\n\t\t\t\t\t\tpath={ parentMenu + '/effects' }\n\t\t\t\t\t\taria-label={ __( 'Shadow' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Shadow' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasFilterPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ filter }\n\t\t\t\t\t\tpath={ parentMenu + '/filters' }\n\t\t\t\t\t\taria-label={ __( 'Filters styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Filters' ) }\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"]}
1	+ {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/context-menu.js"],"names":["useHasDimensionsPanel","useHasTypographyPanel","useHasBorderPanel","useGlobalSetting","useSettingsForBlockElement","blockEditorPrivateApis","ContextMenu","name","parentMenu","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasEffectsPanel","hasFilterPanel","hasDimensionsPanel","hasLayoutPanel","hasVariationsPanel","canEditCSS","select","getEntityRecord","__experimentalGetCurrentGlobalStylesId","coreStore","globalStylesId","globalStyles","undefined","_links","isBlocksPanel","includes","typography","color","border","shadow","filter","layout","chevronLeft","chevronRight"],"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\tfilter,\n\tshadow,\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';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/\n Internal dependencies\n */\nimport { useHasColorPanel } from './color-utils';\nimport { useHasFilterPanel } from './filter-utils';\nimport { useHasVariationsPanel } from './variations-panel';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { IconWithCurrentColor } from './icon-with-current-color';\nimport { ScreenVariations } from './screen-variations';\nimport { useHasShadowControl } from './shadow-panel';\nimport { unlock } from '../../private-apis';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n} = unlock( blockEditorPrivateApis );\n\nfunction ContextMenu( { name, parentMenu = '' } ) {\n\tconst [ rawSettings ] = useGlobalSetting( '', name );\n\tconst settings = useSettingsForBlockElement( rawSettings, name );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( name );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasEffectsPanel = useHasShadowControl( name );\n\tconst hasFilterPanel = useHasFilterPanel( name );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\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' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Border' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasEffectsPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ shadow }\n\t\t\t\t\t\tpath={ parentMenu + '/effects' }\n\t\t\t\t\t\taria-label={ __( 'Shadow' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Shadow' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasFilterPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ filter }\n\t\t\t\t\t\tpath={ parentMenu + '/filters' }\n\t\t\t\t\t\taria-label={ __( 'Filters styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Filters' ) }\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/components/global-styles/hooks.js CHANGED Viewed

@@ -38,7 +38,8 @@ var _data = require("@wordpress/data");
  * Internal dependencies
  */
 const {
-  useGlobalSetting
+  useGlobalSetting,
+  useColorsPerOrigin: useColorsPerOriginFromSettings
 } = (0, _privateApis.unlock)(_blockEditor.privateApis); // Enable colord's a11y plugin.
 (0, _colord.extend)([_a11y.default]);
@@ -48,32 +49,16 @@ function useColorsPerOrigin(name) {
   const [themeColors] = useGlobalSetting('color.palette.theme', name);
   const [defaultColors] = useGlobalSetting('color.palette.default', name);
   const [shouldDisplayDefaultColors] = useGlobalSetting('color.defaultPalette');
-  return (0, _element.useMemo)(() => {
-    const result = [];
-    if (themeColors && themeColors.length) {
-      result.push({
-        name: (0, _i18n._x)('Theme', 'Indicates this palette comes from the theme.'),
-        colors: themeColors
-      });
-    }
-    if (shouldDisplayDefaultColors && defaultColors && defaultColors.length) {
-      result.push({
-        name: (0, _i18n._x)('Default', 'Indicates this palette comes from WordPress.'),
-        colors: defaultColors
-      });
+  return useColorsPerOriginFromSettings({
+    color: {
+      palette: {
+        custom: customColors,
+        theme: themeColors,
+        default: defaultColors
+      },
+      defaultPalette: shouldDisplayDefaultColors
     }
-    if (customColors && customColors.length) {
-      result.push({
-        name: (0, _i18n._x)('Custom', 'Indicates this palette is created by the user.'),
-        colors: customColors
-      });
-    }
-    return result;
-  }, [customColors, themeColors, defaultColors]);
+  });
 }
 function useGradientsPerOrigin(name) {

package/build/components/global-styles/hooks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/hooks.js"],"names":["useGlobalSetting","~~blockEditorPrivateApis~~","~~a11yPlugin~~","~~useColorsPerOrigin~~","name","customColors","themeColors","defaultColors","shouldDisplayDefaultColors","~~result~~","~~length~~","~~push~~","~~colors~~","useGradientsPerOrigin","customGradients","themeGradients","defaultGradients","shouldDisplayDefaultGradients","gradients","useColorRandomizer","setThemeColors","randomizeColors","randomRotationValue","Math","floor","random","newColors","map","colorObject","~~color","~~newColor","rotate","toHex","window","__experimentalEnableColorRandomizer","useSupportedStyles","element","supportedPanels","select","blocksStore","getSupportedStyles"],"mappings":";;;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AAlBA;AACA;AACA;;AAIA;AACA;AACA;;AAMA;AACA;AACA;AAIA,MAAM;AAAEA,EAAAA;~~AAAF~~,~~IAAuB~~,yBAAQC,wBAAR,~~CAA7B~~,C,~~CAEA~~;;AACA,oBAAQ,CAAEC,aAAF,CAAR;;AAEO,~~SAASC~~,kBAAT,~~CAA6BC~~,IAA7B,EAAoC;AAC1C,QAAM,CAAEC,YAAF,~~IAAmBL~~,gBAAgB,CAAE,sBAAF,~~EAA0BI~~,IAA1B,CAAzC;AACA,QAAM,CAAEE,WAAF,~~IAAkBN~~,gBAAgB,CAAE,qBAAF,~~EAAyBI~~,IAAzB,CAAxC;AACA,QAAM,CAAEG,aAAF,~~IAAoBP~~,gBAAgB,CAAE,uBAAF,~~EAA2BI~~,IAA3B,CAA1C;AACA,QAAM,CAAEI,0BAAF,~~IAAiCR~~,gBAAgB,CACtD,sBADsD,CAAvD;AAIA,~~SAAO~~,~~sBAAS~~,~~MAAM~~;~~AACrB~~,~~UAAMS~~,~~MAAM~~,~~GAAG,EAAf;;AACA,QAAKH,WAAW,IAAIA,WAAW,CAACI,MAAhC,EAAyC~~;~~AACxCD~~,MAAAA,~~MAAM~~,~~CAACE,IAAP,CAAa;AACZP,QAAAA,IAAI,~~EAAE~~,cACL,OADK,EAEL,8CAFK,CADM~~;~~AAKZQ~~,QAAAA,MAAM,EAAEN~~;AALI~~,~~OAAb~~;~~AAOA;;AACD~~,~~QACCE,0BAA0B,IAC1BD,aADA,IAEAA,aAAa,CAACG,MAHf,EAIE;AACDD,MAAAA,MAAM,CAACE,IAAP,CAAa;AACZP,~~QAAAA,~~IAAI~~,~~EAAE~~,~~cACL,SADK,EAEL,8CAFK,CADM~~;~~AAKZQ~~,QAAAA,~~MAAM~~,~~EAAEL~~;~~AALI~~,~~OAAb~~;~~AAOA;;AACD~~,~~QAAKF,YAAY,IAAIA,YAAY,CAACK,MAAlC,EAA2C;AAC1CD,~~MAAAA,~~MAAM~~,~~CAACE,IAAP,CAAa~~;~~AACZP,QAAAA,IAAI,EAAE,cACL,QADK,EAEL,gDAFK,CADM~~;~~AAKZQ~~,~~QAAAA~~,~~MAAM,EAAEP~~;~~AALI,OAAb;AAOA~~;;~~AACD,WAAOI,MAAP;AACA,GAlCM,EAkCJ,CAAEJ,YAAF,EAAgBC,WAAhB,EAA6BC,aAA7B,CAlCI,CAAP;AAmCA;;~~AAEM,~~SAASM~~,qBAAT,~~CAAgCT~~,IAAhC,EAAuC;AAC7C,QAAM,~~CAAEU~~,eAAF,~~IAAsBd~~,gBAAgB,CAC3C,wBAD2C,~~EAE3CI~~,IAF2C,CAA5C;AAIA,QAAM,~~CAAEW~~,cAAF,~~IAAqBf~~,gBAAgB,CAC1C,uBAD0C,~~EAE1CI~~,IAF0C,CAA3C;AAIA,QAAM,~~CAAEY~~,gBAAF,~~IAAuBhB~~,gBAAgB,CAC5C,yBAD4C,~~EAE5CI~~,IAF4C,CAA7C;AAIA,QAAM,~~CAAEa~~,6BAAF,~~IAAoCjB~~,gBAAgB,CACzD,wBADyD,CAA1D;AAIA,SAAO,sBAAS,MAAM;AACrB,~~UAAMS~~,MAAM,GAAG,EAAf;;AACA,~~QAAKM~~,cAAc,IAAIA,cAAc,~~CAACL~~,MAAtC,EAA+C;AAC9CD,MAAAA,MAAM,CAACE,IAAP,CAAa;~~AACZP~~,QAAAA,IAAI,EAAE,cACL,OADK,EAEL,8CAFK,CADM;~~AAKZc~~,QAAAA,SAAS,~~EAAEH~~;AALC,OAAb;AAOA;;AACD,QACCE,6BAA6B,IAC7BD,gBADA,IAEAA,gBAAgB,~~CAACN~~,MAHlB,EAIE;AACDD,MAAAA,MAAM,CAACE,IAAP,CAAa;~~AACZP~~,QAAAA,IAAI,EAAE,cACL,SADK,EAEL,8CAFK,CADM;~~AAKZc~~,QAAAA,SAAS,~~EAAEF~~;AALC,OAAb;AAOA;;AACD,QAAKF,eAAe,IAAIA,eAAe,~~CAACJ~~,MAAxC,EAAiD;AAChDD,MAAAA,MAAM,CAACE,IAAP,CAAa;~~AACZP~~,QAAAA,IAAI,EAAE,cACL,QADK,EAEL,gDAFK,CADM;~~AAKZc~~,QAAAA,SAAS,~~EAAEJ~~;AALC,OAAb;AAOA;;AACD,~~WAAOL~~,MAAP;AACA,GAlCM,EAkCJ,~~CAAEK~~,eAAF,EAAmBC,cAAnB,EAAmCC,gBAAnC,CAlCI,CAAP;AAmCA;;AAEM,~~SAASG~~,kBAAT,~~CAA6Bf~~,IAA7B,EAAoC;AAC1C,QAAM,CAAEE,WAAF,~~EAAec~~,cAAf,~~IAAkCpB~~,gBAAgB,CACvD,qBADuD,~~EAEvDI~~,IAFuD,CAAxD;;AAKA,~~WAASiB~~,eAAT,GAA2B;AAC1B;AACA,UAAMC,mBAAmB,GAAGC,IAAI,CAACC,KAAL,CAAYD,IAAI,CAACE,MAAL,KAAgB,GAA5B,CAA5B;AACA;;AAEA,UAAMC,SAAS,~~GAAGpB~~,WAAW,~~CAACqB~~,GAAZ,CAAmBC,WAAF,IAAmB;AACrD,YAAM;~~AAAEC~~,QAAAA;AAAF,~~UAAYD~~,WAAlB;AACA,~~YAAME~~,QAAQ,GAAG,~~oBAAQD~~,KAAR,~~EACfE~~,MADe,~~CACPT~~,mBADO,~~EAEfU~~,KAFe,EAAjB;AAIA,aAAO,EACN,~~GAAGJ~~,WADG;~~AAENC~~,QAAAA,KAAK,~~EAAEC~~;AAFD,OAAP;AAIA,KAViB,CAAlB;~~AAYAV~~,IAAAA,cAAc,CAAEM,SAAF,CAAd;AACA;;AAED,~~SAAOO~~,MAAM,CAACC,mCAAP,GACJ,~~CAAEb~~,eAAF,CADI,GAEJ,EAFH;AAGA;;AAEM,~~SAASc~~,kBAAT,~~CAA6B/B~~,IAA7B,~~EAAmCgC~~,OAAnC,EAA6C;AACnD,QAAM;AAAEC,IAAAA;AAAF,MAAsB,qBACzBC,MAAF,IAAc;AACb,WAAO;AACND,MAAAA,eAAe,EAAE,yBAChBC,MAAM,CAAEC,aAAF,CADU,EAEfC,kBAFe,~~CAEKpC~~,IAFL,~~EAEWgC~~,OAFX;AADX,KAAP;AAKA,GAP0B,EAQ3B,~~CAAEhC~~,IAAF,~~EAAQgC~~,OAAR,CAR2B,CAA5B;AAWA,SAAOC,eAAP;AACA","sourcesContent":["/*\n External dependencies\n /\nimport { colord, extend } from 'colord';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/\n WordPress dependencies\n /\nimport { _x } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/\n Internal dependencies\n /\nimport { unlock } from '../../private-apis';\nimport { useSelect } from '@wordpress/data';\n\nconst { useGlobalSetting } ~~= unlock~~( blockEditorPrivateApis );\n\n// Enable colord's a11y plugin.\nextend( [ a11yPlugin ] );\n\nexport function useColorsPerOrigin( name ) {\n\tconst [ customColors ] = useGlobalSetting( 'color.palette.custom', name );\n\tconst [ themeColors ] = useGlobalSetting( 'color.palette.theme', name );\n\tconst [ defaultColors ] = useGlobalSetting( 'color.palette.default', name );\n\tconst [ shouldDisplayDefaultColors ] = useGlobalSetting(\n\t\t'color.defaultPalette'\n\t);\n\n\treturn ~~useMemo~~( ~~() =>~~ {\n\t\~~tconst~~ ~~result = [];\n\t\tif ( themeColors && themeColors.length )~~ {\n\t\t\~~tresult.push(~~ {\n\t\t\t\~~tname~~: ~~_x(\n\t\t\t\t\t'Theme'~~,\n\t\t\t\~~t\t'Indicates this palette comes from the theme.'\n\t\t\t\t),\n\t\t\t\tcolors~~: themeColors,\n\t\t\t~~} );\n~~\~~t\t}\n\t\tif (\n\t\t\tshouldDisplayDefaultColors &&\n\t\t\tdefaultColors &&\n\t\t\tdefaultColors.length\n\t\t) {\n\t\t\tresult.push( {\n\t\t\t\tname~~: ~~_x(\n\t\t\t\t\t'Default',\n\t\t\t\t\t'Indicates this palette comes from WordPress.'\n\t\t\t\t),\n\t\t\t\tcolors:~~ defaultColors,\n\t\t\t} ~~);\n\t\t}\n\t\tif ( customColors && customColors.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Custom'~~,\n\t\t\~~t\t\t'Indicates this palette is created by the user.'\n\t\t\t\t),\n\t\t\t\tcolors~~: ~~customColors~~,\n\t\t\t} ~~);\~~n\t\t}~~\n\t\treturn~~ ~~result;\n\t}, [ customColors, themeColors, defaultColors ]~~ );\n}\n\nexport function useGradientsPerOrigin( name ) {\n\tconst [ customGradients ] = useGlobalSetting(\n\t\t'color.gradients.custom',\n\t\tname\n\t);\n\tconst [ themeGradients ] = useGlobalSetting(\n\t\t'color.gradients.theme',\n\t\tname\n\t);\n\tconst [ defaultGradients ] = useGlobalSetting(\n\t\t'color.gradients.default',\n\t\tname\n\t);\n\tconst [ shouldDisplayDefaultGradients ] = useGlobalSetting(\n\t\t'color.defaultGradients'\n\t);\n\n\treturn useMemo( () => {\n\t\tconst result = [];\n\t\tif ( themeGradients && themeGradients.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Theme',\n\t\t\t\t\t'Indicates this palette comes from the theme.'\n\t\t\t\t),\n\t\t\t\tgradients: themeGradients,\n\t\t\t} );\n\t\t}\n\t\tif (\n\t\t\tshouldDisplayDefaultGradients &&\n\t\t\tdefaultGradients &&\n\t\t\tdefaultGradients.length\n\t\t) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Default',\n\t\t\t\t\t'Indicates this palette comes from WordPress.'\n\t\t\t\t),\n\t\t\t\tgradients: defaultGradients,\n\t\t\t} );\n\t\t}\n\t\tif ( customGradients && customGradients.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Custom',\n\t\t\t\t\t'Indicates this palette is created by the user.'\n\t\t\t\t),\n\t\t\t\tgradients: customGradients,\n\t\t\t} );\n\t\t}\n\t\treturn result;\n\t}, [ customGradients, themeGradients, defaultGradients ] );\n}\n\nexport function useColorRandomizer( name ) {\n\tconst [ themeColors, setThemeColors ] = useGlobalSetting(\n\t\t'color.palette.theme',\n\t\tname\n\t);\n\n\tfunction randomizeColors() {\n\t\t/ eslint-disable no-restricted-syntax /\n\t\tconst randomRotationValue = Math.floor( Math.random() 225 );\n\t\t/* eslint-enable no-restricted-syntax */\n\n\t\tconst newColors = themeColors.map( ( colorObject ) => {\n\t\t\tconst { color } = colorObject;\n\t\t\tconst newColor = colord( color )\n\t\t\t\t.rotate( randomRotationValue )\n\t\t\t\t.toHex();\n\n\t\t\treturn {\n\t\t\t\t...colorObject,\n\t\t\t\tcolor: newColor,\n\t\t\t};\n\t\t} );\n\n\t\tsetThemeColors( newColors );\n\t}\n\n\treturn window.__experimentalEnableColorRandomizer\n\t\t? [ randomizeColors ]\n\t\t: [];\n}\n\nexport function useSupportedStyles( name, element ) {\n\tconst { supportedPanels } = useSelect(\n\t\t( select ) => {\n\t\t\treturn {\n\t\t\t\tsupportedPanels: unlock(\n\t\t\t\t\tselect( blocksStore )\n\t\t\t\t).getSupportedStyles( name, element ),\n\t\t\t};\n\t\t},\n\t\t[ name, element ]\n\t);\n\n\treturn supportedPanels;\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/hooks.js"],"names":["useGlobalSetting","useColorsPerOrigin","useColorsPerOriginFromSettings","blockEditorPrivateApis","a11yPlugin","name","customColors","themeColors","defaultColors","shouldDisplayDefaultColors","color","palette","custom","theme","default","defaultPalette","useGradientsPerOrigin","customGradients","themeGradients","defaultGradients","shouldDisplayDefaultGradients","result","length","push","gradients","useColorRandomizer","setThemeColors","randomizeColors","randomRotationValue","Math","floor","random","newColors","map","colorObject","newColor","rotate","toHex","window","__experimentalEnableColorRandomizer","useSupportedStyles","element","supportedPanels","select","blocksStore","getSupportedStyles"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport { colord, extend } from 'colord';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/\n WordPress dependencies\n /\nimport { _x } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/\n Internal dependencies\n /\nimport { unlock } from '../../private-apis';\nimport { useSelect } from '@wordpress/data';\n\nconst { useGlobalSetting, useColorsPerOrigin: useColorsPerOriginFromSettings } =\n\tunlock( blockEditorPrivateApis );\n\n// Enable colord's a11y plugin.\nextend( [ a11yPlugin ] );\n\nexport function useColorsPerOrigin( name ) {\n\tconst [ customColors ] = useGlobalSetting( 'color.palette.custom', name );\n\tconst [ themeColors ] = useGlobalSetting( 'color.palette.theme', name );\n\tconst [ defaultColors ] = useGlobalSetting( 'color.palette.default', name );\n\tconst [ shouldDisplayDefaultColors ] = useGlobalSetting(\n\t\t'color.defaultPalette'\n\t);\n\n\treturn useColorsPerOriginFromSettings( {\n\t\tcolor: {\n\t\t\tpalette: {\n\t\t\t\tcustom: customColors,\n\t\t\t\ttheme: themeColors,\n\t\t\t\tdefault: defaultColors,\n\t\t\t},\n\t\t\tdefaultPalette: shouldDisplayDefaultColors,\n\t\t},\n\t} );\n}\n\nexport function useGradientsPerOrigin( name ) {\n\tconst [ customGradients ] = useGlobalSetting(\n\t\t'color.gradients.custom',\n\t\tname\n\t);\n\tconst [ themeGradients ] = useGlobalSetting(\n\t\t'color.gradients.theme',\n\t\tname\n\t);\n\tconst [ defaultGradients ] = useGlobalSetting(\n\t\t'color.gradients.default',\n\t\tname\n\t);\n\tconst [ shouldDisplayDefaultGradients ] = useGlobalSetting(\n\t\t'color.defaultGradients'\n\t);\n\n\treturn useMemo( () => {\n\t\tconst result = [];\n\t\tif ( themeGradients && themeGradients.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Theme',\n\t\t\t\t\t'Indicates this palette comes from the theme.'\n\t\t\t\t),\n\t\t\t\tgradients: themeGradients,\n\t\t\t} );\n\t\t}\n\t\tif (\n\t\t\tshouldDisplayDefaultGradients &&\n\t\t\tdefaultGradients &&\n\t\t\tdefaultGradients.length\n\t\t) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Default',\n\t\t\t\t\t'Indicates this palette comes from WordPress.'\n\t\t\t\t),\n\t\t\t\tgradients: defaultGradients,\n\t\t\t} );\n\t\t}\n\t\tif ( customGradients && customGradients.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Custom',\n\t\t\t\t\t'Indicates this palette is created by the user.'\n\t\t\t\t),\n\t\t\t\tgradients: customGradients,\n\t\t\t} );\n\t\t}\n\t\treturn result;\n\t}, [ customGradients, themeGradients, defaultGradients ] );\n}\n\nexport function useColorRandomizer( name ) {\n\tconst [ themeColors, setThemeColors ] = useGlobalSetting(\n\t\t'color.palette.theme',\n\t\tname\n\t);\n\n\tfunction randomizeColors() {\n\t\t/ eslint-disable no-restricted-syntax /\n\t\tconst randomRotationValue = Math.floor( Math.random() 225 );\n\t\t/* eslint-enable no-restricted-syntax */\n\n\t\tconst newColors = themeColors.map( ( colorObject ) => {\n\t\t\tconst { color } = colorObject;\n\t\t\tconst newColor = colord( color )\n\t\t\t\t.rotate( randomRotationValue )\n\t\t\t\t.toHex();\n\n\t\t\treturn {\n\t\t\t\t...colorObject,\n\t\t\t\tcolor: newColor,\n\t\t\t};\n\t\t} );\n\n\t\tsetThemeColors( newColors );\n\t}\n\n\treturn window.__experimentalEnableColorRandomizer\n\t\t? [ randomizeColors ]\n\t\t: [];\n}\n\nexport function useSupportedStyles( name, element ) {\n\tconst { supportedPanels } = useSelect(\n\t\t( select ) => {\n\t\t\treturn {\n\t\t\t\tsupportedPanels: unlock(\n\t\t\t\t\tselect( blocksStore )\n\t\t\t\t).getSupportedStyles( name, element ),\n\t\t\t};\n\t\t},\n\t\t[ name, element ]\n\t);\n\n\treturn supportedPanels;\n}\n"]}

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

@@ -23,8 +23,6 @@ var _compose = require("@wordpress/compose");
 var _a11y = require("@wordpress/a11y");
-var _borderPanel = require("./border-panel");
 var _colorUtils = require("./color-utils");
 var _variationsPanel = require("./variations-panel");
@@ -45,6 +43,7 @@ var _privateApis = require("../../private-apis");
 const {
   useHasDimensionsPanel,
   useHasTypographyPanel,
+  useHasBorderPanel,
   useGlobalSetting,
   useSettingsForBlockElement
 } = (0, _privateApis.unlock)(_blockEditor.privateApis);
@@ -84,7 +83,7 @@ function BlockMenuItem(_ref) {
   const settings = useSettingsForBlockElement(rawSettings, block.name);
   const hasTypographyPanel = useHasTypographyPanel(settings);
   const hasColorPanel = (0, _colorUtils.useHasColorPanel)(block.name);
-  const hasBorderPanel = (0, _borderPanel.useHasBorderPanel)(block.name);
+  const hasBorderPanel = useHasBorderPanel(settings);
   const hasDimensionsPanel = useHasDimensionsPanel(settings);
   const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
   const hasVariationsPanel = (0, _variationsPanel.useHasVariationsPanel)(block.name);

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-block-list.js"],"names":["useHasDimensionsPanel","useHasTypographyPanel","useGlobalSetting","useSettingsForBlockElement","blockEditorPrivateApis","useSortedBlockTypes","blockItems","select","blocksStore","getBlockTypes","groupByType","blocks","block","core","noncore","type","name","startsWith","push","coreItems","nonCoreItems","reduce","BlockMenuItem","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","hasVariationsPanel","hasBlockMenuItem","navigationButtonLabel","title","encodeURIComponent","icon","ScreenBlockList","sortedBlockTypes","filterValue","setFilterValue","debouncedSpeak","speak","isMatchingSearchTerm","filteredBlockTypes","filter","blockType","blockTypesListRef","count","current","childElementCount","resultsFoundMessage","map"],"mappings":";;;;;;;;;AAWA;;AARA;;AACA;;AACA;;AAKA;;AAEA;;AAIA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;~~AACA;;AA3BA~~;AACA;AACA;;AAiBA;AACA;AACA;~~AAQA~~,MAAM;AACLA,EAAAA,qBADK;AAELC,EAAAA,qBAFK;AAGLC,EAAAA,~~gBAHK~~;AAILC,EAAAA;~~AAJK~~,~~IAKF~~,yBAAQC,wBAAR,~~CALJ~~;;~~AAOA~~,SAASC,mBAAT,GAA+B;AAC9B,QAAMC,UAAU,GAAG,qBAChBC,MAAF,IAAcA,MAAM,CAAEC,aAAF,CAAN,CAAsBC,aAAtB,EADI,EAElB,EAFkB,CAAnB,CAD8B,CAK9B;AACA;AACA;AACA;AACA;;AACA,QAAMC,WAAW,GAAG,CAAEC,MAAF,EAAUC,KAAV,KAAqB;AACxC,UAAM;AAAEC,MAAAA,IAAF;AAAQC,MAAAA;AAAR,QAAoBH,MAA1B;AACA,UAAMI,IAAI,GAAGH,KAAK,CAACI,IAAN,CAAWC,UAAX,CAAuB,OAAvB,IAAmCJ,IAAnC,GAA0CC,OAAvD;AACAC,IAAAA,IAAI,CAACG,IAAL,CAAWN,KAAX;AACA,WAAOD,MAAP;AACA,GALD;;AAMA,QAAM;AAAEE,IAAAA,IAAI,EAAEM,SAAR;AAAmBL,IAAAA,OAAO,EAAEM;AAA5B,MAA6Cd,UAAU,CAACe,MAAX,CAClDX,WADkD,EAElD;AAAEG,IAAAA,IAAI,EAAE,EAAR;AAAYC,IAAAA,OAAO,EAAE;AAArB,GAFkD,CAAnD;AAIA,SAAO,CAAE,GAAGK,SAAL,EAAgB,GAAGC,YAAnB,CAAP;AACA;;AAED,SAASE,aAAT,OAAoC;AAAA,MAAZ;AAAEV,IAAAA;AAAF,GAAY;AACnC,QAAM,CAAEW,WAAF,IAAkBrB,gBAAgB,CAAE,EAAF,EAAMU,KAAK,CAACI,IAAZ,CAAxC;AACA,QAAMQ,QAAQ,GAAGrB,0BAA0B,CAAEoB,WAAF,EAAeX,KAAK,CAACI,IAArB,CAA3C;AACA,QAAMS,kBAAkB,~~GAAGxB~~,qBAAqB,~~CAAEuB~~,QAAF,CAAhD;AACA,QAAME,aAAa,GAAG,kCAAkBd,KAAK,CAACI,IAAxB,CAAtB;AACA,QAAMW,cAAc,~~GAAG~~,~~oCAAmBf~~,~~KAAK~~,~~CAACI~~,~~IAAzB,CAAvB~~;AACA,~~QAAMY~~,kBAAkB,~~GAAG5B~~,qBAAqB,~~CAAEwB~~,QAAF,CAAhD;AACA,QAAMK,cAAc,GAAGF,cAAc,IAAIC,kBAAzC;AACA,QAAME,kBAAkB,GAAG,4CAAuBlB,KAAK,CAACI,IAA7B,CAA3B;AACA,QAAMe,gBAAgB,GACrBN,kBAAkB,IAClBC,aADA,IAEAG,cAFA,IAGAC,kBAJD;;AAMA,MAAK,CAAEC,gBAAP,EAA0B;AACzB,WAAO,IAAP;AACA;;AAED,QAAMC,qBAAqB,GAAG,oBAC7B;AACA,gBAAI,iBAAJ,CAF6B,EAG7BpB,KAAK,CAACqB,KAHuB,CAA9B;AAMA,SACC,4BAAC,wCAAD;AACC,IAAA,IAAI,EAAG,aAAaC,kBAAkB,CAAEtB,KAAK,CAACI,IAAR,CADvC;AAEC,kBAAagB;AAFd,KAIC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,sBAAD;AAAW,IAAA,IAAI,EAAGpB,KAAK,CAACuB;AAAxB,IADD,EAEC,4BAAC,oBAAD,QAAYvB,KAAK,CAACqB,KAAlB,CAFD,CAJD,CADD;AAWA;;AAED,SAASG,eAAT,GAA2B;AAC1B,QAAMC,gBAAgB,GAAGhC,mBAAmB,EAA5C;AACA,QAAM,CAAEiC,WAAF,EAAeC,cAAf,IAAkC,uBAAU,EAAV,CAAxC;AACA,QAAMC,cAAc,GAAG,0BAAaC,WAAb,EAAoB,GAApB,CAAvB;AACA,QAAMC,oBAAoB,GAAG,qBAC1BnC,MAAF,IAAcA,MAAM,CAAEC,aAAF,CAAN,CAAsBkC,oBADR,EAE5B,EAF4B,CAA7B;AAIA,QAAMC,kBAAkB,GAAG,sBAAS,MAAM;AACzC,QAAK,CAAEL,WAAP,EAAqB;AACpB,aAAOD,gBAAP;AACA;;AACD,WAAOA,gBAAgB,CAACO,MAAjB,CAA2BC,SAAF,IAC/BH,oBAAoB,CAAEG,SAAF,EAAaP,WAAb,CADd,CAAP;AAGA,GAP0B,EAOxB,CAAEA,WAAF,EAAeD,gBAAf,EAAiCK,oBAAjC,CAPwB,CAA3B;AASA,QAAMI,iBAAiB,GAAG,sBAA1B,CAjB0B,CAmB1B;;AACA,0BAAW,MAAM;AAChB,QAAK,CAAER,WAAP,EAAqB;AACpB;AACA,KAHe,CAIhB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,UAAMS,KAAK,GAAGD,iBAAiB,CAACE,OAAlB,CAA0BC,iBAAxC;AACA,UAAMC,mBAAmB,GAAG;AAC3B;AACA,kBAAI,kBAAJ,EAAwB,mBAAxB,EAA6CH,KAA7C,CAF2B,EAG3BA,KAH2B,CAA5B;AAKAP,IAAAA,cAAc,CAAEU,mBAAF,EAAuBH,KAAvB,CAAd;AACA,GAnBD,EAmBG,CAAET,WAAF,EAAeE,cAAf,CAnBH;AAqBA,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAG,cAAI,QAAJ,CADT;AAEC,IAAA,WAAW,EAAG,cACb,qEADa;AAFf,IADD,EAOC,4BAAC,yBAAD;AACC,IAAA,uBAAuB,MADxB;AAEC,IAAA,SAAS,EAAC,8BAFX;AAGC,IAAA,QAAQ,EAAGD,cAHZ;AAIC,IAAA,KAAK,EAAGD,WAJT;AAKC,IAAA,KAAK,EAAG,cAAI,mBAAJ,CALT;AAMC,IAAA,WAAW,EAAG,cAAI,QAAJ;AANf,IAPD,EAeC;AACC,IAAA,GAAG,EAAGQ,iBADP;AAEC,IAAA,SAAS,EAAC;AAFX,KAIGH,kBAAkB,CAACQ,GAAnB,CAA0BvC,KAAF,IACzB,4BAAC,aAAD;AACC,IAAA,KAAK,EAAGA,KADT;AAEC,IAAA,GAAG,EAAG,oBAAoBA,KAAK,CAACI;AAFjC,IADC,CAJH,CAfD,CADD;AA6BA;;eAEcoB,e","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 { ~~useHasBorderPanel } from './border-panel';\nimport {~~ useHasColorPanel } from './color-utils';\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\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\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\nfunction BlockMenuItem( { block } ) {\n\tconst [ rawSettings ] = useGlobalSetting( '', block.name );\n\tconst settings = useSettingsForBlockElement( rawSettings, block.name );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( block.name );\n\tconst hasBorderPanel = useHasBorderPanel( ~~block.name~~ );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasBorderPanel \|\| hasDimensionsPanel;\n\tconst hasVariationsPanel = useHasVariationsPanel( block.name );\n\tconst hasBlockMenuItem =\n\t\thasTypographyPanel \|\|\n\t\thasColorPanel \|\|\n\t\thasLayoutPanel \|\|\n\t\thasVariationsPanel;\n\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"]}
1	+ {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-block-list.js"],"names":["useHasDimensionsPanel","useHasTypographyPanel","useHasBorderPanel","useGlobalSetting","useSettingsForBlockElement","blockEditorPrivateApis","useSortedBlockTypes","blockItems","select","blocksStore","getBlockTypes","groupByType","blocks","block","core","noncore","type","name","startsWith","push","coreItems","nonCoreItems","reduce","BlockMenuItem","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","hasVariationsPanel","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 { useHasColorPanel } from './color-utils';\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} = 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\nfunction BlockMenuItem( { block } ) {\n\tconst [ rawSettings ] = useGlobalSetting( '', block.name );\n\tconst settings = useSettingsForBlockElement( rawSettings, block.name );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( block.name );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasBorderPanel \|\| hasDimensionsPanel;\n\tconst hasVariationsPanel = useHasVariationsPanel( block.name );\n\tconst hasBlockMenuItem =\n\t\thasTypographyPanel \|\|\n\t\thasColorPanel \|\|\n\t\thasLayoutPanel \|\|\n\t\thasVariationsPanel;\n\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-border.js CHANGED Viewed

@@ -11,17 +11,17 @@ var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
+var _blockEditor = require("@wordpress/block-editor");
 var _header = _interopRequireDefault(require("./header"));
-var _borderPanel = _interopRequireWildcard(require("./border-panel"));
+var _borderPanel = _interopRequireDefault(require("./border-panel"));
 var _blockPreviewPanel = _interopRequireDefault(require("./block-preview-panel"));
 var _utils = require("./utils");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _privateApis = require("../../private-apis");
 /**
  * WordPress dependencies
@@ -30,12 +30,20 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * Internal dependencies
  */
+const {
+  useHasBorderPanel,
+  useGlobalSetting,
+  useSettingsForBlockElement
+} = (0, _privateApis.unlock)(_blockEditor.privateApis);
 function ScreenBorder(_ref) {
   let {
     name,
     variation = ''
   } = _ref;
-  const hasBorderPanel = (0, _borderPanel.useHasBorderPanel)(name);
+  const [rawSettings] = useGlobalSetting('', name);
+  const settings = useSettingsForBlockElement(rawSettings, name);
+  const hasBorderPanel = useHasBorderPanel(settings);
   const variationClassName = (0, _utils.getVariationClassName)(variation);
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
     title: (0, _i18n.__)('Border')

package/build/components/global-styles/screen-border.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-border.js"],"names":["ScreenBorder","name","variation","hasBorderPanel","variationClassName"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA~~;;;;;;AAXA~~;AACA;AACA;;~~AAGA~~;AACA;AACA;~~AAMA~~,~~SAASA~~,YAAT,OAAkD;AAAA,MAA3B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,SAAS,GAAG;AAApB,GAA2B;AACjD,~~QAAMC~~,~~cAAc~~,~~GAAG~~,~~oCAAmBF~~,~~IAAnB~~,~~CAAvB~~;AACA,QAAMG,kBAAkB,GAAG,~~kCAAuBF~~,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,~~EAAGG~~;AAA7C,IAFD,EAGGD,cAAc,IACf,4BAAC,oBAAD;AAAa,IAAA,IAAI,~~EAAGF~~,IAApB;AAA2B,IAAA,SAAS,EAAGC;AAAvC,IAJF,CADD;AASA;;eAEcF,Y","sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n */\nimport ScreenHeader from './header';\nimport BorderPanel, ~~{ useHasBorderPanel }~~ from './border-panel';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { getVariationClassName } from './utils';\n\nfunction ScreenBorder( { name, variation = '' } ) {\n\tconst hasBorderPanel = useHasBorderPanel( ~~name~~ );\n\tconst variationClassName = getVariationClassName( variation );\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'Border' ) } />\n\t\t\t<BlockPreviewPanel name={ name } variation={ variationClassName } />\n\t\t\t{ hasBorderPanel && (\n\t\t\t\t<BorderPanel name={ name } variation={ variation } />\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenBorder;\n"]}
1	+ {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-border.js"],"names":["useHasBorderPanel","useGlobalSetting","useSettingsForBlockElement","blockEditorPrivateApis","ScreenBorder","name","variation","rawSettings","settings","hasBorderPanel","variationClassName"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAbA;AACA;AACA;;AAIA;AACA;AACA;AAOA,MAAM;AAAEA,EAAAA,iBAAF;AAAqBC,EAAAA,gBAArB;AAAuCC,EAAAA;AAAvC,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,cAAc,GAAGT,iBAAiB,CAAEQ,QAAF,CAAxC;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,cAAc,IACf,4BAAC,oBAAD;AAAa,IAAA,IAAI,EAAGJ,IAApB;AAA2B,IAAA,SAAS,EAAGC;AAAvC,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 ScreenHeader from './header';\nimport BorderPanel from './border-panel';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { getVariationClassName } from './utils';\nimport { unlock } from '../../private-apis';\n\nconst { useHasBorderPanel, useGlobalSetting, useSettingsForBlockElement } =\n\tunlock( blockEditorPrivateApis );\n\nfunction ScreenBorder( { name, variation = '' } ) {\n\tconst [ rawSettings ] = useGlobalSetting( '', name );\n\tconst settings = useSettingsForBlockElement( rawSettings, name );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst variationClassName = getVariationClassName( variation );\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'Border' ) } />\n\t\t\t<BlockPreviewPanel name={ name } variation={ variationClassName } />\n\t\t\t{ hasBorderPanel && (\n\t\t\t\t<BorderPanel name={ name } variation={ variation } />\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenBorder;\n"]}

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

@@ -64,7 +64,8 @@ function ScreenRoot() {
     };
   }, []);
   return (0, _element.createElement)(_components.Card, {
-    size: "small"
+    size: "small",
+    className: "edit-site-global-styles-screen-root"
   }, (0, _element.createElement)(_components.CardBody, null, (0, _element.createElement)(_components.__experimentalVStack, {
     spacing: 4
   }, (0, _element.createElement)(_components.Card, null, (0, _element.createElement)(_components.CardMedia, null, (0, _element.createElement)(_preview.default, null))), !!(variations !== null && variations !== void 0 && variations.length) && (0, _element.createElement)(_components.__experimentalItemGroup, null, (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-root.js"],"names":["ScreenRoot","useGlobalStyle","blockEditorPrivateApis","customCSS","variations","canEditCSS","select","getEntityRecord","__experimentalGetCurrentGlobalStylesId","__experimentalGetCurrentThemeGlobalStylesVariations","coreStore","globalStylesId","globalStyles","undefined","_links","length","chevronLeft","chevronRight"],"mappings":";;;;;;;;;;;AAGA;;AAWA;;AACA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AA3BA;AACA;AACA;;AAkBA;AACA;AACA;AAOA,SAASA,UAAT,GAAsB;AACrB,QAAM;AAAEC,IAAAA;AAAF,MAAqB,yBAAQC,wBAAR,CAA3B;AACA,QAAM,CAAEC,SAAF,IAAgBF,cAAc,CAAE,KAAF,CAApC;AAEA,QAAM;AAAEG,IAAAA,UAAF;AAAcC,IAAAA;AAAd,MAA6B,qBAAaC,MAAF,IAAc;AAAA;;AAC3D,UAAM;AACLC,MAAAA,eADK;AAELC,MAAAA,sCAFK;AAGLC,MAAAA;AAHK,QAIFH,MAAM,CAAEI,eAAF,CAJV;;AAMA,UAAMC,cAAc,GAAGH,sCAAsC,EAA7D;;AACA,UAAMI,YAAY,GAAGD,cAAc,GAChCJ,eAAe,CAAE,MAAF,EAAU,cAAV,EAA0BI,cAA1B,CADiB,GAEhCE,SAFH;AAIA,WAAO;AACNT,MAAAA,UAAU,EAAEK,mDAAmD,EADzD;AAENJ,MAAAA,UAAU,2BACT,CAAC,EAAEO,YAAF,aAAEA,YAAF,uCAAEA,YAAY,CAAEE,MAAhB,iDAAE,qBAAwB,oBAAxB,CAAF,CADQ,yEAC4C;AAHhD,KAAP;AAKA,GAjBkC,EAiBhC,EAjBgC,CAAnC;AAmBA,SACC,4BAAC,gBAAD;AAAM,IAAA,IAAI,EAAC;~~AAAX~~,KACC,4BAAC,oBAAD,QACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,gBAAD,QACC,4BAAC,qBAAD,QACC,4BAAC,gBAAD,OADD,CADD,CADD,EAMG,CAAC,EAAEV,UAAF,aAAEA,UAAF,eAAEA,UAAU,CAAEW,MAAd,CAAD,IACD,4BAAC,mCAAD,QACC,4BAAC,wCAAD;AACC,IAAA,IAAI,EAAC,aADN;AAEC,kBAAa,cAAI,eAAJ;AAFd,KAIC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,oBAAD,QACG,cAAI,eAAJ,CADH,CADD,EAIC,4BAAC,0CAAD;AACC,IAAA,IAAI,EACH,qBAAUC,kBAAV,GAAwBC;AAF1B,IAJD,CAJD,CADD,CAPF,EAyBC,4BAAC,oBAAD,OAzBD,CADD,CADD,EA+BC,4BAAC,uBAAD,OA/BD,EAiCC,4BAAC,oBAAD,QACC,4BAAC,gCAAD;AACC,IAAA,EAAE,EAAC,GADJ;AAEC,IAAA,UAAU,EAAG;AACb;AACL;AACA;AACA;AACA;AAPI;AAQC,IAAA,QAAQ,EAAC,MARV;AASC,IAAA,YAAY,EAAG;AAThB,KAWG,cACD,iEADC,CAXH,CADD,EAgBC,4BAAC,mCAAD,QACC,4BAAC,wCAAD;AACC,IAAA,IAAI,EAAC,SADN;AAEC,kBAAa,cAAI,eAAJ;AAFd,KAIC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,oBAAD,QAAY,cAAI,QAAJ,CAAZ,CADD,EAEC,4BAAC,0CAAD;AACC,IAAA,IAAI,EAAG,qBAAUD,kBAAV,GAAwBC;AADhC,IAFD,CAJD,CADD,CAhBD,CAjCD,EAgEGZ,UAAU,IAAI,CAAC,CAAEF,SAAjB,IACD,qDACC,4BAAC,uBAAD,OADD,EAEC,4BAAC,oBAAD,QACC,4BAAC,gCAAD;AACC,IAAA,EAAE,EAAC,GADJ;AAEC,IAAA,UAAU,EAAG,CAFd;AAGC,IAAA,QAAQ,EAAC,MAHV;AAIC,IAAA,YAAY,EAAG;AAJhB,KAMG,cACD,uEADC,CANH,CADD,EAWC,4BAAC,mCAAD,QACC,4BAAC,wCAAD;AACC,IAAA,IAAI,EAAC,MADN;AAEC,kBAAa,cAAI,gBAAJ;AAFd,KAIC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,oBAAD,QACG,cAAI,gBAAJ,CADH,CADD,EAIC,4BAAC,0CAAD;AACC,IAAA,IAAI,EACH,qBAAUa,kBAAV,GAAwBC;AAF1B,IAJD,CAJD,CADD,CAXD,CAFD,CAjEF,CADD;AAqGA;;eAEcjB,U","sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalVStack as VStack,\n\tFlexItem,\n\tCardBody,\n\tCard,\n\tCardDivider,\n\tCardMedia,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronLeft, chevronRight } from '@wordpress/icons';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/\n Internal dependencies\n /\nimport { IconWithCurrentColor } from './icon-with-current-color';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport ContextMenu from './context-menu';\nimport StylesPreview from './preview';\nimport { unlock } from '../../private-apis';\n\nfunction ScreenRoot() {\n\tconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\tconst [ customCSS ] = useGlobalStyle( 'css' );\n\n\tconst { variations, canEditCSS } = useSelect( ( select ) => {\n\t\tconst {\n\t\t\tgetEntityRecord,\n\t\t\t__experimentalGetCurrentGlobalStylesId,\n\t\t\t__experimentalGetCurrentThemeGlobalStylesVariations,\n\t\t} = select( 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\tvariations: __experimentalGetCurrentThemeGlobalStylesVariations(),\n\t\t\tcanEditCSS:\n\t\t\t\t!! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<Card size=\"small\">\n\t\t\t<CardBody>\n\t\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t\t<Card>\n\t\t\t\t\t\t<CardMedia>\n\t\t\t\t\t\t\t<StylesPreview />\n\t\t\t\t\t\t</CardMedia>\n\t\t\t\t\t</Card>\n\t\t\t\t\t{ !! variations?.length && (\n\t\t\t\t\t\t<ItemGroup>\n\t\t\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\t\t\tpath=\"/variations\"\n\t\t\t\t\t\t\t\taria-label={ __( 'Browse styles' ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Browse styles' ) }\n\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronLeft : chevronRight\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t) }\n\t\t\t\t\t<ContextMenu />\n\t\t\t\t</VStack>\n\t\t\t</CardBody>\n\n\t\t\t<CardDivider />\n\n\t\t\t<CardBody>\n\t\t\t\t<Spacer\n\t\t\t\t\tas=\"p\"\n\t\t\t\t\tpaddingTop={ 2 }\n\t\t\t\t\t/\n\t\t\t\t\t * 13px matches the text inset of the NavigationButton (12px padding, plus the width of the button's border).\n\t\t\t\t\t * This is an ad hoc override for this instance and the Addtional CSS option below. Other options for matching the\n\t\t\t\t\t * the nav button inset should be looked at before reusing further.\n\t\t\t\t\t */\n\t\t\t\t\tpaddingX=\"13px\"\n\t\t\t\t\tmarginBottom={ 4 }\n\t\t\t\t>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'Customize the appearance of specific blocks for the whole site.'\n\t\t\t\t\t) }\n\t\t\t\t</Spacer>\n\t\t\t\t<ItemGroup>\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\tpath=\"/blocks\"\n\t\t\t\t\t\taria-label={ __( 'Blocks styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t<FlexItem>{ __( 'Blocks' ) }</FlexItem>\n\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\ticon={ isRTL() ? chevronLeft : chevronRight }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t</ItemGroup>\n\t\t\t</CardBody>\n\n\t\t\t{ canEditCSS && !! customCSS && (\n\t\t\t\t<>\n\t\t\t\t\t<CardDivider />\n\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t<Spacer\n\t\t\t\t\t\t\tas=\"p\"\n\t\t\t\t\t\t\tpaddingTop={ 2 }\n\t\t\t\t\t\t\tpaddingX=\"13px\"\n\t\t\t\t\t\t\tmarginBottom={ 4 }\n\t\t\t\t\t\t>\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 and layout of your site.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t<ItemGroup>\n\t\t\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\t\t\tpath=\"/css\"\n\t\t\t\t\t\t\t\taria-label={ __( 'Additional CSS' ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Additional CSS' ) }\n\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronLeft : chevronRight\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t</CardBody>\n\t\t\t\t</>\n\t\t\t) }\n\t\t</Card>\n\t);\n}\n\nexport default ScreenRoot;\n"]}
1	+ {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-root.js"],"names":["ScreenRoot","useGlobalStyle","blockEditorPrivateApis","customCSS","variations","canEditCSS","select","getEntityRecord","__experimentalGetCurrentGlobalStylesId","__experimentalGetCurrentThemeGlobalStylesVariations","coreStore","globalStylesId","globalStyles","undefined","_links","length","chevronLeft","chevronRight"],"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\t__experimentalVStack as VStack,\n\tFlexItem,\n\tCardBody,\n\tCard,\n\tCardDivider,\n\tCardMedia,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronLeft, chevronRight } from '@wordpress/icons';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/\n Internal dependencies\n /\nimport { IconWithCurrentColor } from './icon-with-current-color';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport ContextMenu from './context-menu';\nimport StylesPreview from './preview';\nimport { unlock } from '../../private-apis';\n\nfunction ScreenRoot() {\n\tconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\tconst [ customCSS ] = useGlobalStyle( 'css' );\n\n\tconst { variations, canEditCSS } = useSelect( ( select ) => {\n\t\tconst {\n\t\t\tgetEntityRecord,\n\t\t\t__experimentalGetCurrentGlobalStylesId,\n\t\t\t__experimentalGetCurrentThemeGlobalStylesVariations,\n\t\t} = select( 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\tvariations: __experimentalGetCurrentThemeGlobalStylesVariations(),\n\t\t\tcanEditCSS:\n\t\t\t\t!! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<Card size=\"small\" className=\"edit-site-global-styles-screen-root\">\n\t\t\t<CardBody>\n\t\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t\t<Card>\n\t\t\t\t\t\t<CardMedia>\n\t\t\t\t\t\t\t<StylesPreview />\n\t\t\t\t\t\t</CardMedia>\n\t\t\t\t\t</Card>\n\t\t\t\t\t{ !! variations?.length && (\n\t\t\t\t\t\t<ItemGroup>\n\t\t\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\t\t\tpath=\"/variations\"\n\t\t\t\t\t\t\t\taria-label={ __( 'Browse styles' ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Browse styles' ) }\n\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronLeft : chevronRight\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t) }\n\t\t\t\t\t<ContextMenu />\n\t\t\t\t</VStack>\n\t\t\t</CardBody>\n\n\t\t\t<CardDivider />\n\n\t\t\t<CardBody>\n\t\t\t\t<Spacer\n\t\t\t\t\tas=\"p\"\n\t\t\t\t\tpaddingTop={ 2 }\n\t\t\t\t\t/\n\t\t\t\t\t * 13px matches the text inset of the NavigationButton (12px padding, plus the width of the button's border).\n\t\t\t\t\t * This is an ad hoc override for this instance and the Addtional CSS option below. Other options for matching the\n\t\t\t\t\t * the nav button inset should be looked at before reusing further.\n\t\t\t\t\t */\n\t\t\t\t\tpaddingX=\"13px\"\n\t\t\t\t\tmarginBottom={ 4 }\n\t\t\t\t>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'Customize the appearance of specific blocks for the whole site.'\n\t\t\t\t\t) }\n\t\t\t\t</Spacer>\n\t\t\t\t<ItemGroup>\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\tpath=\"/blocks\"\n\t\t\t\t\t\taria-label={ __( 'Blocks styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t<FlexItem>{ __( 'Blocks' ) }</FlexItem>\n\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\ticon={ isRTL() ? chevronLeft : chevronRight }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t</ItemGroup>\n\t\t\t</CardBody>\n\n\t\t\t{ canEditCSS && !! customCSS && (\n\t\t\t\t<>\n\t\t\t\t\t<CardDivider />\n\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t<Spacer\n\t\t\t\t\t\t\tas=\"p\"\n\t\t\t\t\t\t\tpaddingTop={ 2 }\n\t\t\t\t\t\t\tpaddingX=\"13px\"\n\t\t\t\t\t\t\tmarginBottom={ 4 }\n\t\t\t\t\t\t>\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 and layout of your site.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t<ItemGroup>\n\t\t\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\t\t\tpath=\"/css\"\n\t\t\t\t\t\t\t\taria-label={ __( 'Additional CSS' ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Additional CSS' ) }\n\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronLeft : chevronRight\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t</CardBody>\n\t\t\t\t</>\n\t\t\t) }\n\t\t</Card>\n\t);\n}\n\nexport default ScreenRoot;\n"]}

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

@@ -174,7 +174,8 @@ function ScreenStyleVariations() {
     description: (0, _i18n.__)('Choose a variation to change the look of the site.')
   }), (0, _element.createElement)(_components.Card, {
     size: "small",
-    isBorderless: true
+    isBorderless: true,
+    className: "edit-site-global-styles-screen-style-variations"
   }, (0, _element.createElement)(_components.CardBody, null, (0, _element.createElement)(_components.__experimentalGrid, {
     columns: 2
   }, withEmptyVariation === null || withEmptyVariation === void 0 ? void 0 : withEmptyVariation.map((variation, index) => (0, _element.createElement)(Variation, {

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-style-variations.js"],"names":["GlobalStylesContext","blockEditorPrivateApis","compareVariations","a","b","styles","settings","Variation","variation","isFocused","setIsFocused","base","user","setUserConfig","context","merged","selectVariation","selectOnEnter","event","keyCode","ENTER","preventDefault","isActive","title","ScreenStyleVariations","variations","mode","select","coreStore","__experimentalGetCurrentThemeGlobalStylesVariations","blockEditorStore","__unstableGetEditorMode","withEmptyVariation","map","__unstableSetEditorMode","shouldRevertInitialMode","current","index"],"mappings":"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~~AAAM~~,IAAA,IAAI,EAAC,~~OAAX~~;~~AAAmB~~,IAAA,YAAY;~~AAA/B~~,~~KACC~~,4BAAC,oBAAD,QACC,4BAAC,8BAAD;AAAM,IAAA,OAAO,EAAG;AAAhB,KACGM,kBADH,aACGA,kBADH,uBACGA,kBAAkB,CAAEC,GAApB,CAAyB,CAAEzB,SAAF,EAAa6B,KAAb,KAC1B,4BAAC,SAAD;AAAW,IAAA,GAAG,EAAGA,KAAjB;AAAyB,IAAA,SAAS,EAAG7B;AAArC,IADC,CADH,CADD,~~CADD~~,CATD,CADD;~~AAqBA~~;;eAEcgB,qB","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/\n WordPress dependencies\n /\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tuseMemo,\n\tuseContext,\n\tuseState,\n\tuseEffect,\n\tuseRef,\n} from '@wordpress/element';\nimport { ENTER } from '@wordpress/keycodes';\nimport {\n\t__experimentalGrid as Grid,\n\tCard,\n\tCardBody,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tstore as blockEditorStore,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\n\n/\n Internal dependencies\n */\nimport { mergeBaseAndUserConfigs } from './global-styles-provider';\nimport StylesPreview from './preview';\nimport ScreenHeader from './header';\nimport { unlock } from '../../private-apis';\n\nconst { GlobalStylesContext } = unlock( blockEditorPrivateApis );\n\nfunction compareVariations( a, b ) {\n\treturn (\n\t\tfastDeepEqual( a.styles, b.styles ) &&\n\t\tfastDeepEqual( a.settings, b.settings )\n\t);\n}\n\nfunction Variation( { variation } ) {\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\tconst { base, user, setUserConfig } = useContext( GlobalStylesContext );\n\tconst context = useMemo( () => {\n\t\treturn {\n\t\t\tuser: {\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t},\n\t\t\tbase,\n\t\t\tmerged: mergeBaseAndUserConfigs( base, variation ),\n\t\t\tsetUserConfig: () => {},\n\t\t};\n\t}, [ variation, base ] );\n\n\tconst selectVariation = () => {\n\t\tsetUserConfig( () => {\n\t\t\treturn {\n\t\t\t\tsettings: variation.settings,\n\t\t\t\tstyles: variation.styles,\n\t\t\t};\n\t\t} );\n\t};\n\n\tconst selectOnEnter = ( event ) => {\n\t\tif ( event.keyCode === ENTER ) {\n\t\t\tevent.preventDefault();\n\t\t\tselectVariation();\n\t\t}\n\t};\n\n\tconst isActive = useMemo( () => {\n\t\treturn compareVariations( user, variation );\n\t}, [ user, variation ] );\n\n\treturn (\n\t\t<GlobalStylesContext.Provider value={ context }>\n\t\t\t<div\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'edit-site-global-styles-variations_item',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isActive,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\trole=\"button\"\n\t\t\t\tonClick={ selectVariation }\n\t\t\t\tonKeyDown={ selectOnEnter }\n\t\t\t\ttabIndex=\"0\"\n\t\t\t\taria-label={ variation?.title }\n\t\t\t\taria-current={ isActive }\n\t\t\t\tonFocus={ () => setIsFocused( true ) }\n\t\t\t\tonBlur={ () => setIsFocused( false ) }\n\t\t\t>\n\t\t\t\t<div className=\"edit-site-global-styles-variations_item-preview\">\n\t\t\t\t\t<StylesPreview\n\t\t\t\t\t\tlabel={ variation?.title }\n\t\t\t\t\t\tisFocused={ isFocused }\n\t\t\t\t\t\twithHoverView\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n\nfunction ScreenStyleVariations() {\n\tconst { variations, mode } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tvariations:\n\t\t\t\tselect(\n\t\t\t\t\tcoreStore\n\t\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations(),\n\n\t\t\tmode: select( blockEditorStore ).__unstableGetEditorMode(),\n\t\t};\n\t}, [] );\n\n\tconst withEmptyVariation = useMemo( () => {\n\t\treturn [\n\t\t\t{\n\t\t\t\ttitle: __( 'Default' ),\n\t\t\t\tsettings: {},\n\t\t\t\tstyles: {},\n\t\t\t},\n\t\t\t...variations.map( ( variation ) => ( {\n\t\t\t\t...variation,\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t} ) ),\n\t\t];\n\t}, [ variations ] );\n\n\tconst { __unstableSetEditorMode } = useDispatch( blockEditorStore );\n\tconst shouldRevertInitialMode = useRef( null );\n\tuseEffect( () => {\n\t\t// ignore changes to zoom-out mode as we explictily change to it on mount.\n\t\tif ( mode !== 'zoom-out' ) {\n\t\t\tshouldRevertInitialMode.current = false;\n\t\t}\n\t}, [ mode ] );\n\n\t// Intentionality left without any dependency.\n\t// This effect should only run the first time the component is rendered.\n\t// The effect opens the zoom-out view if it is not open before when applying a style variation.\n\tuseEffect( () => {\n\t\tif ( mode !== 'zoom-out' ) {\n\t\t\t__unstableSetEditorMode( 'zoom-out' );\n\t\t\tshouldRevertInitialMode.current = true;\n\t\t\treturn () => {\n\t\t\t\t// if there were not mode changes revert to the initial mode when unmounting.\n\t\t\t\tif ( shouldRevertInitialMode.current ) {\n\t\t\t\t\t__unstableSetEditorMode( mode );\n\t\t\t\t}\n\t\t\t};\n\t\t}\n\t}, [] );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback=\"/\"\n\t\t\t\ttitle={ __( 'Browse styles' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Choose a variation to change the look of the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<Card ~~size~~=\"small\" ~~isBorderless~~>\n\t\t\t\t<CardBody>\n\t\t\t\t\t<Grid columns={ 2 }>\n\t\t\t\t\t\t{ withEmptyVariation?.map( ( variation, index ) => (\n\t\t\t\t\t\t\t<Variation key={ index } variation={ variation } />\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Grid>\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</>\n\t);\n}\n\nexport default ScreenStyleVariations;\n"]}
1	+ {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-style-variations.js"],"names":["GlobalStylesContext","blockEditorPrivateApis","compareVariations","a","b","styles","settings","Variation","variation","isFocused","setIsFocused","base","user","setUserConfig","context","merged","selectVariation","selectOnEnter","event","keyCode","ENTER","preventDefault","isActive","title","ScreenStyleVariations","variations","mode","select","coreStore","__experimentalGetCurrentThemeGlobalStylesVariations","blockEditorStore","__unstableGetEditorMode","withEmptyVariation","map","__unstableSetEditorMode","shouldRevertInitialMode","current","index"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/\n WordPress dependencies\n /\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tuseMemo,\n\tuseContext,\n\tuseState,\n\tuseEffect,\n\tuseRef,\n} from '@wordpress/element';\nimport { ENTER } from '@wordpress/keycodes';\nimport {\n\t__experimentalGrid as Grid,\n\tCard,\n\tCardBody,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tstore as blockEditorStore,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\n\n/\n Internal dependencies\n */\nimport { mergeBaseAndUserConfigs } from './global-styles-provider';\nimport StylesPreview from './preview';\nimport ScreenHeader from './header';\nimport { unlock } from '../../private-apis';\n\nconst { GlobalStylesContext } = unlock( blockEditorPrivateApis );\n\nfunction compareVariations( a, b ) {\n\treturn (\n\t\tfastDeepEqual( a.styles, b.styles ) &&\n\t\tfastDeepEqual( a.settings, b.settings )\n\t);\n}\n\nfunction Variation( { variation } ) {\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\tconst { base, user, setUserConfig } = useContext( GlobalStylesContext );\n\tconst context = useMemo( () => {\n\t\treturn {\n\t\t\tuser: {\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t},\n\t\t\tbase,\n\t\t\tmerged: mergeBaseAndUserConfigs( base, variation ),\n\t\t\tsetUserConfig: () => {},\n\t\t};\n\t}, [ variation, base ] );\n\n\tconst selectVariation = () => {\n\t\tsetUserConfig( () => {\n\t\t\treturn {\n\t\t\t\tsettings: variation.settings,\n\t\t\t\tstyles: variation.styles,\n\t\t\t};\n\t\t} );\n\t};\n\n\tconst selectOnEnter = ( event ) => {\n\t\tif ( event.keyCode === ENTER ) {\n\t\t\tevent.preventDefault();\n\t\t\tselectVariation();\n\t\t}\n\t};\n\n\tconst isActive = useMemo( () => {\n\t\treturn compareVariations( user, variation );\n\t}, [ user, variation ] );\n\n\treturn (\n\t\t<GlobalStylesContext.Provider value={ context }>\n\t\t\t<div\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'edit-site-global-styles-variations_item',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isActive,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\trole=\"button\"\n\t\t\t\tonClick={ selectVariation }\n\t\t\t\tonKeyDown={ selectOnEnter }\n\t\t\t\ttabIndex=\"0\"\n\t\t\t\taria-label={ variation?.title }\n\t\t\t\taria-current={ isActive }\n\t\t\t\tonFocus={ () => setIsFocused( true ) }\n\t\t\t\tonBlur={ () => setIsFocused( false ) }\n\t\t\t>\n\t\t\t\t<div className=\"edit-site-global-styles-variations_item-preview\">\n\t\t\t\t\t<StylesPreview\n\t\t\t\t\t\tlabel={ variation?.title }\n\t\t\t\t\t\tisFocused={ isFocused }\n\t\t\t\t\t\twithHoverView\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n\nfunction ScreenStyleVariations() {\n\tconst { variations, mode } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tvariations:\n\t\t\t\tselect(\n\t\t\t\t\tcoreStore\n\t\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations(),\n\n\t\t\tmode: select( blockEditorStore ).__unstableGetEditorMode(),\n\t\t};\n\t}, [] );\n\n\tconst withEmptyVariation = useMemo( () => {\n\t\treturn [\n\t\t\t{\n\t\t\t\ttitle: __( 'Default' ),\n\t\t\t\tsettings: {},\n\t\t\t\tstyles: {},\n\t\t\t},\n\t\t\t...variations.map( ( variation ) => ( {\n\t\t\t\t...variation,\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t} ) ),\n\t\t];\n\t}, [ variations ] );\n\n\tconst { __unstableSetEditorMode } = useDispatch( blockEditorStore );\n\tconst shouldRevertInitialMode = useRef( null );\n\tuseEffect( () => {\n\t\t// ignore changes to zoom-out mode as we explictily change to it on mount.\n\t\tif ( mode !== 'zoom-out' ) {\n\t\t\tshouldRevertInitialMode.current = false;\n\t\t}\n\t}, [ mode ] );\n\n\t// Intentionality left without any dependency.\n\t// This effect should only run the first time the component is rendered.\n\t// The effect opens the zoom-out view if it is not open before when applying a style variation.\n\tuseEffect( () => {\n\t\tif ( mode !== 'zoom-out' ) {\n\t\t\t__unstableSetEditorMode( 'zoom-out' );\n\t\t\tshouldRevertInitialMode.current = true;\n\t\t\treturn () => {\n\t\t\t\t// if there were not mode changes revert to the initial mode when unmounting.\n\t\t\t\tif ( shouldRevertInitialMode.current ) {\n\t\t\t\t\t__unstableSetEditorMode( mode );\n\t\t\t\t}\n\t\t\t};\n\t\t}\n\t}, [] );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback=\"/\"\n\t\t\t\ttitle={ __( 'Browse styles' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Choose a variation to change the look of the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<Card\n\t\t\t\tsize=\"small\"\n\t\t\t\tisBorderless\n\t\t\t\tclassName=\"edit-site-global-styles-screen-style-variations\"\n\t\t\t>\n\t\t\t\t<CardBody>\n\t\t\t\t\t<Grid columns={ 2 }>\n\t\t\t\t\t\t{ withEmptyVariation?.map( ( variation, index ) => (\n\t\t\t\t\t\t\t<Variation key={ index } variation={ variation } />\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Grid>\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</>\n\t);\n}\n\nexport default ScreenStyleVariations;\n"]}

package/build/components/layout/index.js CHANGED Viewed

@@ -237,6 +237,13 @@ function Layout() {
       paddingBottom: showFrame ? canvasPadding : 0
     }
   }, canvasResizer, !!canvasSize.width && (0, _element.createElement)(_components.__unstableMotion.div, {
+    whileHover: isEditorPage && canvasMode === 'view' ? {
+      scale: 1.005,
+      transition: {
+        duration: disableMotion || isResizing ? 0 : 0.5,
+        ease: 'easeOut'
+      }
+    } : {},
     initial: false,
     layout: "position",
     className: "edit-site-layout__canvas",

package/build/components/layout/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/edit-site/src/components/layout/index.js"],"names":["ANIMATION_DURATION","emptyResizeHandleStyles","position","undefined","userSelect","cursor","width","height","top","right","bottom","left","Layout","hubRef","params","isListPage","isEditorPage","canvasMode","previousShortcut","nextShortcut","select","getAllShortcutKeyCombinations","keyboardShortcutsStore","getCanvasMode","editSiteStore","navigateRegionsProps","previous","next","disableMotion","isMobileViewport","canvasPadding","showSidebar","showCanvas","showFrame","isFullCanvas","canvasResizer","canvasSize","fullResizer","fullSize","forcedWidth","setForcedWidth","isResizing","setIsResizing","isResizingEnabled","defaultSidebarWidth","canvasWidth","ref","className","motion","div","y","type","duration","ease","opacity","event","direction","elt","clientWidth","current","style","delta","paddingTop","paddingBottom"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { useSelect } from '@wordpress/data';\nimport {\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n\t__unstableUseNavigateRegions as useNavigateRegions,\n\tResizableBox,\n} from '@wordpress/components';\nimport {\n\tuseReducedMotion,\n\tuseViewportMatch,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { useState, useRef } from '@wordpress/element';\nimport { NavigableRegion } from '@wordpress/interface';\nimport { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\n\n/\n Internal dependencies\n */\nimport Sidebar from '../sidebar';\nimport Editor from '../editor';\nimport ListPage from '../list';\nimport ErrorBoundary from '../error-boundary';\nimport { store as editSiteStore } from '../../store';\nimport { useLocation } from '../routes';\nimport getIsListPage from '../../utils/get-is-list-page';\nimport Header from '../header-edit-mode';\nimport useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';\nimport SiteHub from '../site-hub';\nimport ResizeHandle from '../block-editor/resize-handle';\nimport useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';\nimport { unlock } from '../../private-apis';\nimport SavePanel from '../save-panel';\nimport KeyboardShortcutsRegister from '../keyboard-shortcuts/register';\nimport KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';\n\nconst ANIMATION_DURATION = 0.5;\nconst emptyResizeHandleStyles = {\n\tposition: undefined,\n\tuserSelect: undefined,\n\tcursor: undefined,\n\twidth: undefined,\n\theight: undefined,\n\ttop: undefined,\n\tright: undefined,\n\tbottom: undefined,\n\tleft: undefined,\n};\n\nexport default function Layout() {\n\t// This ensures the edited entity id and type are initialized properly.\n\tuseInitEditedEntityFromURL();\n\tuseSyncCanvasModeWithURL();\n\n\tconst hubRef = useRef();\n\tconst { params } = useLocation();\n\tconst isListPage = getIsListPage( params );\n\tconst isEditorPage = ! isListPage;\n\tconst { canvasMode, previousShortcut, nextShortcut } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getAllShortcutKeyCombinations } = select(\n\t\t\t\tkeyboardShortcutsStore\n\t\t\t);\n\t\t\tconst { getCanvasMode } = unlock( select( editSiteStore ) );\n\t\t\treturn {\n\t\t\t\tcanvasMode: getCanvasMode(),\n\t\t\t\tpreviousShortcut: getAllShortcutKeyCombinations(\n\t\t\t\t\t'core/edit-site/previous-region'\n\t\t\t\t),\n\t\t\t\tnextShortcut: getAllShortcutKeyCombinations(\n\t\t\t\t\t'core/edit-site/next-region'\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\tconst navigateRegionsProps = useNavigateRegions( {\n\t\tprevious: previousShortcut,\n\t\tnext: nextShortcut,\n\t} );\n\tconst disableMotion = useReducedMotion();\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst canvasPadding = isMobileViewport ? 0 : 24;\n\tconst showSidebar =\n\t\t( isMobileViewport && ! isListPage ) \|\|\n\t\t( ! isMobileViewport && ( canvasMode === 'view' \|\| ! isEditorPage ) );\n\tconst showCanvas =\n\t\t( isMobileViewport && isEditorPage && canvasMode === 'edit' ) \|\|\n\t\t! isMobileViewport \|\|\n\t\t! isEditorPage;\n\tconst showFrame =\n\t\t( ! isEditorPage && ! isMobileViewport ) \|\|\n\t\t( ! isMobileViewport && isEditorPage && canvasMode === 'view' );\n\tconst isFullCanvas =\n\t\t( isMobileViewport && isListPage ) \|\|\n\t\t( isEditorPage && canvasMode === 'edit' );\n\tconst [ canvasResizer, canvasSize ] = useResizeObserver();\n\tconst [ fullResizer, fullSize ] = useResizeObserver();\n\tconst [ forcedWidth, setForcedWidth ] = useState( null );\n\tconst [ isResizing, setIsResizing ] = useState( false );\n\tconst isResizingEnabled = ! isMobileViewport && canvasMode === 'view';\n\tconst defaultSidebarWidth = isMobileViewport ? '100vw' : 360;\n\tlet canvasWidth = isResizing ? '100%' : fullSize.width;\n\tif ( showFrame && ! isResizing ) {\n\t\tcanvasWidth = canvasSize.width - canvasPadding;\n\t}\n\n\t// Synchronizing the URL with the store value of canvasMode happens in an effect\n\t// This condition ensures the component is only rendered after the synchronization happens\n\t// which prevents any animations due to potential canvasMode value change.\n\tif ( canvasMode === 'init' ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<KeyboardShortcutsRegister />\n\t\t\t<KeyboardShortcutsGlobal />\n\t\t\t{ fullResizer }\n\t\t\t<div\n\t\t\t\t{ ...navigateRegionsProps }\n\t\t\t\tref={ navigateRegionsProps.ref }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'edit-site-layout',\n\t\t\t\t\tnavigateRegionsProps.className,\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-full-canvas': isFullCanvas,\n\t\t\t\t\t\t'is-edit-mode': canvasMode === 'edit',\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t>\n\t\t\t\t<SiteHub\n\t\t\t\t\tref={ hubRef }\n\t\t\t\t\tclassName=\"edit-site-layout__hub\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\tisResizingEnabled && forcedWidth\n\t\t\t\t\t\t\t\t? forcedWidth - 48\n\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\n\t\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t\t{ isEditorPage && canvasMode === 'edit' && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"edit-site-layout__header\"\n\t\t\t\t\t\t\tariaLabel={ __( 'Editor top bar' ) }\n\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\tanimate={ {\n\t\t\t\t\t\t\t\ty: 0,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tinitial={ {\n\t\t\t\t\t\t\t\ty: '-100%',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\texit={ {\n\t\t\t\t\t\t\t\ty: '-100%',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\tduration: disableMotion\n\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t: ANIMATION_DURATION,\n\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ canvasMode === 'edit' && <Header /> }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</AnimatePresence>\n\n\t\t\t\t<div className=\"edit-site-layout__content\">\n\t\t\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t\t\t{ showSidebar && (\n\t\t\t\t\t\t\t<ResizableBox\n\t\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\t\tinitial={ {\n\t\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tanimate={ {\n\t\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\texit={ {\n\t\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\tduration:\n\t\t\t\t\t\t\t\t\t\tdisableMotion \|\| isResizing\n\t\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t\t: ANIMATION_DURATION,\n\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsize={ {\n\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\tisResizingEnabled && forcedWidth\n\t\t\t\t\t\t\t\t\t\t\t? forcedWidth\n\t\t\t\t\t\t\t\t\t\t\t: defaultSidebarWidth,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tclassName=\"edit-site-layout__sidebar\"\n\t\t\t\t\t\t\t\tenable={ {\n\t\t\t\t\t\t\t\t\tright: isResizingEnabled,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tonResizeStop={ ( event, direction, elt ) => {\n\t\t\t\t\t\t\t\t\tsetForcedWidth( elt.clientWidth );\n\t\t\t\t\t\t\t\t\tsetIsResizing( false );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tonResizeStart={ () => {\n\t\t\t\t\t\t\t\t\tsetIsResizing( true );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tonResize={ ( event, direction, elt ) => {\n\t\t\t\t\t\t\t\t\t// This is a performance optimization\n\t\t\t\t\t\t\t\t\t// We set the width imperatively to avoid re-rendering\n\t\t\t\t\t\t\t\t\t// the whole component while resizing.\n\t\t\t\t\t\t\t\t\thubRef.current.style.width =\n\t\t\t\t\t\t\t\t\t\telt.clientWidth - 48 + 'px';\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\thandleComponent={ {\n\t\t\t\t\t\t\t\t\tright: (\n\t\t\t\t\t\t\t\t\t\t<ResizeHandle\n\t\t\t\t\t\t\t\t\t\t\tdirection=\"right\"\n\t\t\t\t\t\t\t\t\t\t\tvariation=\"separator\"\n\t\t\t\t\t\t\t\t\t\t\tresizeWidthBy={ ( delta ) => {\n\t\t\t\t\t\t\t\t\t\t\t\tsetForcedWidth(\n\t\t\t\t\t\t\t\t\t\t\t\t\t( forcedWidth ??\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdefaultSidebarWidth ) +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdelta\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\thandleClasses={ undefined }\n\t\t\t\t\t\t\t\thandleStyles={ {\n\t\t\t\t\t\t\t\t\tright: emptyResizeHandleStyles,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tminWidth={ isResizingEnabled ? 320 : undefined }\n\t\t\t\t\t\t\t\tmaxWidth={\n\t\t\t\t\t\t\t\t\tisResizingEnabled && fullSize\n\t\t\t\t\t\t\t\t\t\t? fullSize.width - 360\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\t\t\tariaLabel={ __( 'Navigation sidebar' ) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Sidebar />\n\t\t\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t\t\t</ResizableBox>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</AnimatePresence>\n\n\t\t\t\t\t<SavePanel />\n\n\t\t\t\t\t{ showCanvas && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t'edit-site-layout__canvas-container',\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t'is-resizing': isResizing,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tpaddingTop: showFrame ? canvasPadding : 0,\n\t\t\t\t\t\t\t\tpaddingBottom: showFrame ? canvasPadding : 0,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ canvasResizer }\n\t\t\t\t\t\t\t{ !! canvasSize.width && (\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tinitial={ false }\n\t\t\t\t\t\t\t\t\tlayout=\"position\"\n\t\t\t\t\t\t\t\t\tclassName=\"edit-site-layout__canvas\"\n\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\t\tduration:\n\t\t\t\t\t\t\t\t\t\t\tdisableMotion \|\| isResizing\n\t\t\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t\t\t: ANIMATION_DURATION,\n\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t\t\t\t\t\tbottom: 0,\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tinitial={ false }\n\t\t\t\t\t\t\t\t\t\tanimate={ {\n\t\t\t\t\t\t\t\t\t\t\twidth: canvasWidth,\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\t\t\tduration:\n\t\t\t\t\t\t\t\t\t\t\t\tdisableMotion \|\| isResizing\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t\t\t\t: ANIMATION_DURATION,\n\t\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<ErrorBoundary>\n\t\t\t\t\t\t\t\t\t\t\t{ isEditorPage && <Editor /> }\n\t\t\t\t\t\t\t\t\t\t\t{ isListPage && <ListPage /> }\n\t\t\t\t\t\t\t\t\t\t</ErrorBoundary>\n\t\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/edit-site/src/components/layout/index.js"],"names":["ANIMATION_DURATION","emptyResizeHandleStyles","position","undefined","userSelect","cursor","width","height","top","right","bottom","left","Layout","hubRef","params","isListPage","isEditorPage","canvasMode","previousShortcut","nextShortcut","select","getAllShortcutKeyCombinations","keyboardShortcutsStore","getCanvasMode","editSiteStore","navigateRegionsProps","previous","next","disableMotion","isMobileViewport","canvasPadding","showSidebar","showCanvas","showFrame","isFullCanvas","canvasResizer","canvasSize","fullResizer","fullSize","forcedWidth","setForcedWidth","isResizing","setIsResizing","isResizingEnabled","defaultSidebarWidth","canvasWidth","ref","className","motion","div","y","type","duration","ease","opacity","event","direction","elt","clientWidth","current","style","delta","paddingTop","paddingBottom","scale","transition"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { useSelect } from '@wordpress/data';\nimport {\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n\t__unstableUseNavigateRegions as useNavigateRegions,\n\tResizableBox,\n} from '@wordpress/components';\nimport {\n\tuseReducedMotion,\n\tuseViewportMatch,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { useState, useRef } from '@wordpress/element';\nimport { NavigableRegion } from '@wordpress/interface';\nimport { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\n\n/\n Internal dependencies\n */\nimport Sidebar from '../sidebar';\nimport Editor from '../editor';\nimport ListPage from '../list';\nimport ErrorBoundary from '../error-boundary';\nimport { store as editSiteStore } from '../../store';\nimport { useLocation } from '../routes';\nimport getIsListPage from '../../utils/get-is-list-page';\nimport Header from '../header-edit-mode';\nimport useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';\nimport SiteHub from '../site-hub';\nimport ResizeHandle from '../block-editor/resize-handle';\nimport useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';\nimport { unlock } from '../../private-apis';\nimport SavePanel from '../save-panel';\nimport KeyboardShortcutsRegister from '../keyboard-shortcuts/register';\nimport KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';\n\nconst ANIMATION_DURATION = 0.5;\nconst emptyResizeHandleStyles = {\n\tposition: undefined,\n\tuserSelect: undefined,\n\tcursor: undefined,\n\twidth: undefined,\n\theight: undefined,\n\ttop: undefined,\n\tright: undefined,\n\tbottom: undefined,\n\tleft: undefined,\n};\n\nexport default function Layout() {\n\t// This ensures the edited entity id and type are initialized properly.\n\tuseInitEditedEntityFromURL();\n\tuseSyncCanvasModeWithURL();\n\n\tconst hubRef = useRef();\n\tconst { params } = useLocation();\n\tconst isListPage = getIsListPage( params );\n\tconst isEditorPage = ! isListPage;\n\tconst { canvasMode, previousShortcut, nextShortcut } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getAllShortcutKeyCombinations } = select(\n\t\t\t\tkeyboardShortcutsStore\n\t\t\t);\n\t\t\tconst { getCanvasMode } = unlock( select( editSiteStore ) );\n\t\t\treturn {\n\t\t\t\tcanvasMode: getCanvasMode(),\n\t\t\t\tpreviousShortcut: getAllShortcutKeyCombinations(\n\t\t\t\t\t'core/edit-site/previous-region'\n\t\t\t\t),\n\t\t\t\tnextShortcut: getAllShortcutKeyCombinations(\n\t\t\t\t\t'core/edit-site/next-region'\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\tconst navigateRegionsProps = useNavigateRegions( {\n\t\tprevious: previousShortcut,\n\t\tnext: nextShortcut,\n\t} );\n\tconst disableMotion = useReducedMotion();\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst canvasPadding = isMobileViewport ? 0 : 24;\n\tconst showSidebar =\n\t\t( isMobileViewport && ! isListPage ) \|\|\n\t\t( ! isMobileViewport && ( canvasMode === 'view' \|\| ! isEditorPage ) );\n\tconst showCanvas =\n\t\t( isMobileViewport && isEditorPage && canvasMode === 'edit' ) \|\|\n\t\t! isMobileViewport \|\|\n\t\t! isEditorPage;\n\tconst showFrame =\n\t\t( ! isEditorPage && ! isMobileViewport ) \|\|\n\t\t( ! isMobileViewport && isEditorPage && canvasMode === 'view' );\n\tconst isFullCanvas =\n\t\t( isMobileViewport && isListPage ) \|\|\n\t\t( isEditorPage && canvasMode === 'edit' );\n\tconst [ canvasResizer, canvasSize ] = useResizeObserver();\n\tconst [ fullResizer, fullSize ] = useResizeObserver();\n\tconst [ forcedWidth, setForcedWidth ] = useState( null );\n\tconst [ isResizing, setIsResizing ] = useState( false );\n\tconst isResizingEnabled = ! isMobileViewport && canvasMode === 'view';\n\tconst defaultSidebarWidth = isMobileViewport ? '100vw' : 360;\n\tlet canvasWidth = isResizing ? '100%' : fullSize.width;\n\tif ( showFrame && ! isResizing ) {\n\t\tcanvasWidth = canvasSize.width - canvasPadding;\n\t}\n\n\t// Synchronizing the URL with the store value of canvasMode happens in an effect\n\t// This condition ensures the component is only rendered after the synchronization happens\n\t// which prevents any animations due to potential canvasMode value change.\n\tif ( canvasMode === 'init' ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<KeyboardShortcutsRegister />\n\t\t\t<KeyboardShortcutsGlobal />\n\t\t\t{ fullResizer }\n\t\t\t<div\n\t\t\t\t{ ...navigateRegionsProps }\n\t\t\t\tref={ navigateRegionsProps.ref }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'edit-site-layout',\n\t\t\t\t\tnavigateRegionsProps.className,\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-full-canvas': isFullCanvas,\n\t\t\t\t\t\t'is-edit-mode': canvasMode === 'edit',\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t>\n\t\t\t\t<SiteHub\n\t\t\t\t\tref={ hubRef }\n\t\t\t\t\tclassName=\"edit-site-layout__hub\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\tisResizingEnabled && forcedWidth\n\t\t\t\t\t\t\t\t? forcedWidth - 48\n\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\n\t\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t\t{ isEditorPage && canvasMode === 'edit' && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"edit-site-layout__header\"\n\t\t\t\t\t\t\tariaLabel={ __( 'Editor top bar' ) }\n\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\tanimate={ {\n\t\t\t\t\t\t\t\ty: 0,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tinitial={ {\n\t\t\t\t\t\t\t\ty: '-100%',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\texit={ {\n\t\t\t\t\t\t\t\ty: '-100%',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\tduration: disableMotion\n\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t: ANIMATION_DURATION,\n\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ canvasMode === 'edit' && <Header /> }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</AnimatePresence>\n\n\t\t\t\t<div className=\"edit-site-layout__content\">\n\t\t\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t\t\t{ showSidebar && (\n\t\t\t\t\t\t\t<ResizableBox\n\t\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\t\tinitial={ {\n\t\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tanimate={ {\n\t\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\texit={ {\n\t\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\tduration:\n\t\t\t\t\t\t\t\t\t\tdisableMotion \|\| isResizing\n\t\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t\t: ANIMATION_DURATION,\n\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsize={ {\n\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\tisResizingEnabled && forcedWidth\n\t\t\t\t\t\t\t\t\t\t\t? forcedWidth\n\t\t\t\t\t\t\t\t\t\t\t: defaultSidebarWidth,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tclassName=\"edit-site-layout__sidebar\"\n\t\t\t\t\t\t\t\tenable={ {\n\t\t\t\t\t\t\t\t\tright: isResizingEnabled,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tonResizeStop={ ( event, direction, elt ) => {\n\t\t\t\t\t\t\t\t\tsetForcedWidth( elt.clientWidth );\n\t\t\t\t\t\t\t\t\tsetIsResizing( false );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tonResizeStart={ () => {\n\t\t\t\t\t\t\t\t\tsetIsResizing( true );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tonResize={ ( event, direction, elt ) => {\n\t\t\t\t\t\t\t\t\t// This is a performance optimization\n\t\t\t\t\t\t\t\t\t// We set the width imperatively to avoid re-rendering\n\t\t\t\t\t\t\t\t\t// the whole component while resizing.\n\t\t\t\t\t\t\t\t\thubRef.current.style.width =\n\t\t\t\t\t\t\t\t\t\telt.clientWidth - 48 + 'px';\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\thandleComponent={ {\n\t\t\t\t\t\t\t\t\tright: (\n\t\t\t\t\t\t\t\t\t\t<ResizeHandle\n\t\t\t\t\t\t\t\t\t\t\tdirection=\"right\"\n\t\t\t\t\t\t\t\t\t\t\tvariation=\"separator\"\n\t\t\t\t\t\t\t\t\t\t\tresizeWidthBy={ ( delta ) => {\n\t\t\t\t\t\t\t\t\t\t\t\tsetForcedWidth(\n\t\t\t\t\t\t\t\t\t\t\t\t\t( forcedWidth ??\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdefaultSidebarWidth ) +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdelta\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\thandleClasses={ undefined }\n\t\t\t\t\t\t\t\thandleStyles={ {\n\t\t\t\t\t\t\t\t\tright: emptyResizeHandleStyles,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tminWidth={ isResizingEnabled ? 320 : undefined }\n\t\t\t\t\t\t\t\tmaxWidth={\n\t\t\t\t\t\t\t\t\tisResizingEnabled && fullSize\n\t\t\t\t\t\t\t\t\t\t? fullSize.width - 360\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\t\t\tariaLabel={ __( 'Navigation sidebar' ) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Sidebar />\n\t\t\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t\t\t</ResizableBox>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</AnimatePresence>\n\n\t\t\t\t\t<SavePanel />\n\n\t\t\t\t\t{ showCanvas && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t'edit-site-layout__canvas-container',\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t'is-resizing': isResizing,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tpaddingTop: showFrame ? canvasPadding : 0,\n\t\t\t\t\t\t\t\tpaddingBottom: showFrame ? canvasPadding : 0,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ canvasResizer }\n\t\t\t\t\t\t\t{ !! canvasSize.width && (\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\twhileHover={\n\t\t\t\t\t\t\t\t\t\tisEditorPage && canvasMode === 'view'\n\t\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\t\tscale: 1.005,\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tduration:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdisableMotion \|\|\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tisResizing\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 0.5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\t\t: {}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tinitial={ false }\n\t\t\t\t\t\t\t\t\tlayout=\"position\"\n\t\t\t\t\t\t\t\t\tclassName=\"edit-site-layout__canvas\"\n\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\t\tduration:\n\t\t\t\t\t\t\t\t\t\t\tdisableMotion \|\| isResizing\n\t\t\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t\t\t: ANIMATION_DURATION,\n\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t\t\t\t\t\tbottom: 0,\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tinitial={ false }\n\t\t\t\t\t\t\t\t\t\tanimate={ {\n\t\t\t\t\t\t\t\t\t\t\twidth: canvasWidth,\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\t\t\tduration:\n\t\t\t\t\t\t\t\t\t\t\t\tdisableMotion \|\| isResizing\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t\t\t\t: ANIMATION_DURATION,\n\t\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<ErrorBoundary>\n\t\t\t\t\t\t\t\t\t\t\t{ isEditorPage && <Editor /> }\n\t\t\t\t\t\t\t\t\t\t\t{ isListPage && <ListPage /> }\n\t\t\t\t\t\t\t\t\t\t</ErrorBoundary>\n\t\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"]}