@wordpress/edit-site 5.7.0 → 5.9.0

package/src/components/welcome-guide/styles.js

@@ -119,7 +119,7 @@ export default function WelcomeGuideStyles() {
 								) }
 								<ExternalLink
 									href={ __(
-										'https://wordpress.org/support/article/styles-overview/'
+										'https://wordpress.org/documentation/article/styles-overview/'
 									) }
 								>
 									{ __(

package/src/hooks/commands/index.js

@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import { useNavigationCommands } from './use-navigation-commands';
+import { useWPAdminCommands } from './use-wp-admin-commands';
+
+export function useCommands() {
+	useWPAdminCommands();
+	useNavigationCommands();
+}

package/src/hooks/commands/use-navigation-commands.js

@@ -0,0 +1,112 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis } from '@wordpress/commands';
+import { __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { post, page, layout, symbolFilled } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { unlock } from '../../private-apis';
+import { useHistory } from '../../components/routes';
+
+const { useCommandLoader } = unlock( privateApis );
+
+const icons = {
+	post,
+	page,
+	wp_template: layout,
+	wp_template_part: symbolFilled,
+};
+
+const getNavigationCommandLoaderPerPostType = ( postType ) =>
+	function useNavigationCommandLoader( { search } ) {
+		const supportsSearch = ! [ 'wp_template', 'wp_template_part' ].includes(
+			postType
+		);
+		const deps = supportsSearch ? [ search ] : [];
+		const history = useHistory();
+		const { canvasMode, records, isLoading } = useSelect( ( select ) => {
+			const { getEntityRecords } = select( coreStore );
+			const query = supportsSearch
+				? {
+						search: !! search ? search : undefined,
+						per_page: 10,
+						orderby: search ? 'relevance' : 'date',
+				  }
+				: {
+						per_page: -1,
+				  };
+			return {
+				records: getEntityRecords( 'postType', postType, query ),
+				isLoading: ! select( coreStore ).hasFinishedResolution(
+					'getEntityRecords',
+					[ 'postType', postType, query ]
+				),
+				canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
+			};
+		}, deps );
+
+		const commands = useMemo( () => {
+			return ( records ?? [] ).slice( 0, 10 ).map( ( record ) => {
+				return {
+					name: record.title?.rendered + ' ' + record.id,
+					label: record.title?.rendered
+						? record.title?.rendered
+						: __( '(no title)' ),
+					icon: icons[ postType ],
+					callback: ( { close } ) => {
+						history.push( {
+							postType,
+							postId: record.id,
+							canvas:
+								canvasMode === 'edit' ? canvasMode : undefined,
+						} );
+						close();
+					},
+				};
+			} );
+		}, [ records, history, canvasMode ] );
+
+		return {
+			commands,
+			isLoading,
+		};
+	};
+
+const usePageNavigationCommandLoader =
+	getNavigationCommandLoaderPerPostType( 'page' );
+const usePostNavigationCommandLoader =
+	getNavigationCommandLoaderPerPostType( 'post' );
+const useTemplateNavigationCommandLoader =
+	getNavigationCommandLoaderPerPostType( 'wp_template' );
+const useTemplatePartNavigationCommandLoader =
+	getNavigationCommandLoaderPerPostType( 'wp_template_part' );
+
+export function useNavigationCommands() {
+	useCommandLoader( {
+		name: 'core/edit-site/navigate-pages',
+		group: __( 'Pages' ),
+		hook: usePageNavigationCommandLoader,
+	} );
+	useCommandLoader( {
+		name: 'core/edit-site/navigate-posts',
+		group: __( 'Posts' ),
+		hook: usePostNavigationCommandLoader,
+	} );
+	useCommandLoader( {
+		name: 'core/edit-site/navigate-templates',
+		group: __( 'Templates' ),
+		hook: useTemplateNavigationCommandLoader,
+	} );
+	useCommandLoader( {
+		name: 'core/edit-site/navigate-template-parts',
+		group: __( 'Template Parts' ),
+		hook: useTemplatePartNavigationCommandLoader,
+	} );
+}

package/src/hooks/commands/use-wp-admin-commands.js

@@ -0,0 +1,79 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis } from '@wordpress/commands';
+import { __, sprintf } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { addQueryArgs } from '@wordpress/url';
+import { useMemo } from '@wordpress/element';
+import { plus } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { unlock } from '../../private-apis';
+
+const { useCommandLoader } = unlock( privateApis );
+
+const getWPAdminAddCommandLoader = ( postType ) =>
+	function useAddCommandLoader( { search } ) {
+		let label;
+		if ( postType === 'post' ) {
+			label = __( 'Add a new post' );
+		} else if ( postType === 'page' ) {
+			label = __( 'Add a new page' );
+		} else {
+			throw 'unsupported post type ' + postType;
+		}
+		const hasRecordTitle =
+			!! search && ! label.toLowerCase().includes( search.toLowerCase() );
+		if ( postType === 'post' && hasRecordTitle ) {
+			/* translators: %s: Post title placeholder */
+			label = sprintf( __( 'Add a new post "%s"' ), search );
+		} else if ( postType === 'page' && hasRecordTitle ) {
+			/* translators: %s: Page title placeholder */
+			label = sprintf( __( 'Add a new page "%s"' ), search );
+		}
+
+		const newPostLink = useSelect( ( select ) => {
+			const { getSettings } = unlock( select( editSiteStore ) );
+			return getSettings().newPostLink ?? 'post-new.php';
+		}, [] );
+
+		const commands = useMemo(
+			() => [
+				{
+					name: 'core/wp-admin/add-' + postType + '-' + search,
+					label,
+					icon: plus,
+					callback: () => {
+						document.location.href = addQueryArgs( newPostLink, {
+							post_type: postType,
+							post_title: hasRecordTitle ? search : undefined,
+						} );
+					},
+				},
+			],
+			[ newPostLink, hasRecordTitle, search, label ]
+		);
+
+		return {
+			isLoading: false,
+			commands,
+		};
+	};
+
+const useAddPostLoader = getWPAdminAddCommandLoader( 'post' );
+const useAddPageLoader = getWPAdminAddCommandLoader( 'page' );
+
+export function useWPAdminCommands() {
+	useCommandLoader( {
+		name: 'core/wp-admin/add-post-loader',
+		hook: useAddPostLoader,
+	} );
+	useCommandLoader( {
+		name: 'core/wp-admin/add-page-loader',
+		hook: useAddPageLoader,
+	} );
+}

package/src/hooks/template-part-edit.js

@@ -34,6 +34,7 @@ function EditTemplatePartMenuItem( { attributes } ) {
 		{
 			postId: templatePart?.id,
 			postType: templatePart?.type,
+			canvas: 'edit',
 		},
 		{
 			fromTemplateId: params.postId,

package/src/index.js

@@ -67,6 +67,7 @@ export function initializeEditor( id, settings ) {
 		welcomeGuide: true,
 		welcomeGuideStyles: true,
 		showListViewByDefault: false,
+		showBlockBreadcrumbs: true,
 	} );
 
 	dispatch( interfaceStore ).setDefaultComplementaryArea(

package/src/store/private-actions.js

@@ -27,3 +27,17 @@ export const setCanvasMode =
 			dispatch.setIsListViewOpened( true );
 		}
 	};
+
+/**
+ * Action that switches the editor canvas container view.
+ *
+ * @param {?string} view Editor canvas container view.
+ */
+export const setEditorCanvasContainerView =
+	( view ) =>
+	( { dispatch } ) => {
+		dispatch( {
+			type: 'SET_EDITOR_CANVAS_CONTAINER_VIEW',
+			view,
+		} );
+	};

package/src/store/private-selectors.js

@@ -8,3 +8,14 @@
 export function getCanvasMode( state ) {
 	return state.canvasMode;
 }
+
+/**
+ * Returns the editor canvas container view.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {string} Editor canvas container view.
+ */
+export function getEditorCanvasContainerView( state ) {
+	return state.editorCanvasContainerView;
+}

package/src/store/reducer.js

@@ -140,6 +140,23 @@ function canvasMode( state = 'init', action ) {
 	return state;
 }
 
+/**
+ * Reducer used to track the site editor canvas container view.
+ * Default is `undefined`, denoting the default, visual block editor.
+ * This could be, for example, `'style-book'` (the style book).
+ *
+ * @param {string|undefined} state  Current state.
+ * @param {Object}           action Dispatched action.
+ */
+function editorCanvasContainerView( state = undefined, action ) {
+	switch ( action.type ) {
+		case 'SET_EDITOR_CANVAS_CONTAINER_VIEW':
+			return action.view;
+	}
+
+	return state;
+}
+
 export default combineReducers( {
 	deviceType,
 	settings,
@@ -148,4 +165,5 @@ export default combineReducers( {
 	listViewPanel,
 	saveViewPanel,
 	canvasMode,
+	editorCanvasContainerView,
 } );

package/src/store/selectors.js

@@ -39,13 +39,14 @@ export const __unstableGetPreference = createRegistrySelector(
 /**
  * Returns whether the given feature is enabled or not.
  *
+ * @deprecated
  * @param {Object} state       Global application state.
  * @param {string} featureName Feature slug.
  *
  * @return {boolean} Is active.
  */
 export function isFeatureActive( state, featureName ) {
-	deprecated( `select( 'core/interface' ).isFeatureActive`, {
+	deprecated( `select( 'core/edit-site' ).isFeatureActive`, {
 		since: '6.0',
 		alternative: `select( 'core/preferences' ).get`,
 	} );

package/src/style.scss

@@ -31,6 +31,7 @@
 @import "./components/sidebar-navigation-screen-navigation-menus/style.scss";
 @import "./components/site-icon/style.scss";
 @import "./components/style-book/style.scss";
+@import "./components/editor-canvas-container/style.scss";
 @import "./hooks/push-changes-to-global-styles/style.scss";
 
 html #wpadminbar {

package/build/components/global-styles/duotone-panel.js

@@ -1,78 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _element = require("@wordpress/element");
-
-var _i18n = require("@wordpress/i18n");
-
-var _components = require("@wordpress/components");
-
-var _blockEditor = require("@wordpress/block-editor");
-
-var _privateApis = require("../../private-apis");
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-const {
-  useGlobalStyle
-} = (0, _privateApis.unlock)(_blockEditor.privateApis);
-const EMPTY_ARRAY = [];
-
-function useMultiOriginPresets(_ref) {
-  let {
-    presetSetting,
-    defaultSetting
-  } = _ref;
-  const disableDefault = !(0, _blockEditor.useSetting)(defaultSetting);
-  const userPresets = (0, _blockEditor.useSetting)(`${presetSetting}.custom`) || EMPTY_ARRAY;
-  const themePresets = (0, _blockEditor.useSetting)(`${presetSetting}.theme`) || EMPTY_ARRAY;
-  const defaultPresets = (0, _blockEditor.useSetting)(`${presetSetting}.default`) || EMPTY_ARRAY;
-  return (0, _element.useMemo)(() => [...userPresets, ...themePresets, ...(disableDefault ? EMPTY_ARRAY : defaultPresets)], [disableDefault, userPresets, themePresets, defaultPresets]);
-}
-
-function DuotonePanel(_ref2) {
-  let {
-    name
-  } = _ref2;
-  const [themeDuotone, setThemeDuotone] = useGlobalStyle('filter.duotone', name);
-  const duotonePalette = useMultiOriginPresets({
-    presetSetting: 'color.duotone',
-    defaultSetting: 'color.defaultDuotone'
-  });
-  const colorPalette = useMultiOriginPresets({
-    presetSetting: 'color.palette',
-    defaultSetting: 'color.defaultPalette'
-  });
-
-  if ((duotonePalette === null || duotonePalette === void 0 ? void 0 : duotonePalette.length) === 0) {
-    return null;
-  }
-
-  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalToolsPanel, {
-    label: (0, _i18n.__)('Duotone')
-  }, (0, _element.createElement)("span", {
-    className: "span-columns"
-  }, (0, _i18n.__)('Create a two-tone color effect without losing your original image.')), (0, _element.createElement)("div", {
-    className: "span-columns"
-  }, (0, _element.createElement)(_components.DuotonePicker, {
-    colorPalette: colorPalette,
-    duotonePalette: duotonePalette,
-    disableCustomColors: true,
-    disableCustomDuotone: true,
-    value: themeDuotone,
-    onChange: setThemeDuotone
-  }))));
-}
-
-var _default = DuotonePanel;
-exports.default = _default;
-//# sourceMappingURL=duotone-panel.js.map

package/build/components/global-styles/duotone-panel.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/duotone-panel.js"],"names":["useGlobalStyle","blockEditorPrivateApis","EMPTY_ARRAY","useMultiOriginPresets","presetSetting","defaultSetting","disableDefault","userPresets","themePresets","defaultPresets","DuotonePanel","name","themeDuotone","setThemeDuotone","duotonePalette","colorPalette","length"],"mappings":";;;;;;;AAYA;;AATA;;AACA;;AAIA;;AASA;;AAjBA;AACA;AACA;;AAYA;AACA;AACA;AAEA,MAAM;AAAEA,EAAAA;AAAF,IAAqB,yBAAQC,wBAAR,CAA3B;AAEA,MAAMC,WAAW,GAAG,EAApB;;AAEA,SAASC,qBAAT,OAAoE;AAAA,MAApC;AAAEC,IAAAA,aAAF;AAAiBC,IAAAA;AAAjB,GAAoC;AACnE,QAAMC,cAAc,GAAG,CAAE,6BAAYD,cAAZ,CAAzB;AACA,QAAME,WAAW,GAChB,6BAAa,GAAGH,aAAe,SAA/B,KAA6CF,WAD9C;AAEA,QAAMM,YAAY,GACjB,6BAAa,GAAGJ,aAAe,QAA/B,KAA4CF,WAD7C;AAEA,QAAMO,cAAc,GACnB,6BAAa,GAAGL,aAAe,UAA/B,KAA8CF,WAD/C;AAEA,SAAO,sBACN,MAAM,CACL,GAAGK,WADE,EAEL,GAAGC,YAFE,EAGL,IAAKF,cAAc,GAAGJ,WAAH,GAAiBO,cAApC,CAHK,CADA,EAMN,CAAEH,cAAF,EAAkBC,WAAlB,EAA+BC,YAA/B,EAA6CC,cAA7C,CANM,CAAP;AAQA;;AAED,SAASC,YAAT,QAAkC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACjC,QAAM,CAAEC,YAAF,EAAgBC,eAAhB,IAAoCb,cAAc,CACvD,gBADuD,EAEvDW,IAFuD,CAAxD;AAKA,QAAMG,cAAc,GAAGX,qBAAqB,CAAE;AAC7CC,IAAAA,aAAa,EAAE,eAD8B;AAE7CC,IAAAA,cAAc,EAAE;AAF6B,GAAF,CAA5C;AAIA,QAAMU,YAAY,GAAGZ,qBAAqB,CAAE;AAC3CC,IAAAA,aAAa,EAAE,eAD4B;AAE3CC,IAAAA,cAAc,EAAE;AAF2B,GAAF,CAA1C;;AAKA,MAAK,CAAAS,cAAc,SAAd,IAAAA,cAAc,WAAd,YAAAA,cAAc,CAAEE,MAAhB,MAA2B,CAAhC,EAAoC;AACnC,WAAO,IAAP;AACA;;AACD,SACC,qDACC,4BAAC,oCAAD;AAAY,IAAA,KAAK,EAAG,cAAI,SAAJ;AAApB,KACC;AAAM,IAAA,SAAS,EAAC;AAAhB,KACG,cACD,oEADC,CADH,CADD,EAMC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,yBAAD;AACC,IAAA,YAAY,EAAGD,YADhB;AAEC,IAAA,cAAc,EAAGD,cAFlB;AAGC,IAAA,mBAAmB,EAAG,IAHvB;AAIC,IAAA,oBAAoB,EAAG,IAJxB;AAKC,IAAA,KAAK,EAAGF,YALT;AAMC,IAAA,QAAQ,EAAGC;AANZ,IADD,CAND,CADD,CADD;AAqBA;;eAEcH,Y","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalToolsPanel as ToolsPanel,\n\tDuotonePicker,\n} from '@wordpress/components';\nimport {\n\tprivateApis as blockEditorPrivateApis,\n\tuseSetting,\n} from '@wordpress/block-editor';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nconst EMPTY_ARRAY = [];\n\nfunction useMultiOriginPresets( { presetSetting, defaultSetting } ) {\n\tconst disableDefault = ! useSetting( defaultSetting );\n\tconst userPresets =\n\t\tuseSetting( `${ presetSetting }.custom` ) || EMPTY_ARRAY;\n\tconst themePresets =\n\t\tuseSetting( `${ presetSetting }.theme` ) || EMPTY_ARRAY;\n\tconst defaultPresets =\n\t\tuseSetting( `${ presetSetting }.default` ) || EMPTY_ARRAY;\n\treturn useMemo(\n\t\t() => [\n\t\t\t...userPresets,\n\t\t\t...themePresets,\n\t\t\t...( disableDefault ? EMPTY_ARRAY : defaultPresets ),\n\t\t],\n\t\t[ disableDefault, userPresets, themePresets, defaultPresets ]\n\t);\n}\n\nfunction DuotonePanel( { name } ) {\n\tconst [ themeDuotone, setThemeDuotone ] = useGlobalStyle(\n\t\t'filter.duotone',\n\t\tname\n\t);\n\n\tconst duotonePalette = useMultiOriginPresets( {\n\t\tpresetSetting: 'color.duotone',\n\t\tdefaultSetting: 'color.defaultDuotone',\n\t} );\n\tconst colorPalette = useMultiOriginPresets( {\n\t\tpresetSetting: 'color.palette',\n\t\tdefaultSetting: 'color.defaultPalette',\n\t} );\n\n\tif ( duotonePalette?.length === 0 ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<>\n\t\t\t<ToolsPanel label={ __( 'Duotone' ) }>\n\t\t\t\t<span className=\"span-columns\">\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'Create a two-tone color effect without losing your original image.'\n\t\t\t\t\t) }\n\t\t\t\t</span>\n\t\t\t\t<div className=\"span-columns\">\n\t\t\t\t\t<DuotonePicker\n\t\t\t\t\t\tcolorPalette={ colorPalette }\n\t\t\t\t\t\tduotonePalette={ duotonePalette }\n\t\t\t\t\t\tdisableCustomColors={ true }\n\t\t\t\t\t\tdisableCustomDuotone={ true }\n\t\t\t\t\t\tvalue={ themeDuotone }\n\t\t\t\t\t\tonChange={ setThemeDuotone }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</ToolsPanel>\n\t\t</>\n\t);\n}\n\nexport default DuotonePanel;\n"]}

package/build/components/global-styles/filter-utils.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useHasFilterPanel = useHasFilterPanel;
-
-var _hooks = require("./hooks");
-
-/**
- * Internal dependencies
- */
-function useHasFilterPanel(name) {
-  const supports = (0, _hooks.useSupportedStyles)(name);
-  return supports.includes('filter');
-}
-//# sourceMappingURL=filter-utils.js.map

package/build/components/global-styles/filter-utils.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/filter-utils.js"],"names":["useHasFilterPanel","name","supports","includes"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAGO,SAASA,iBAAT,CAA4BC,IAA5B,EAAmC;AACzC,QAAMC,QAAQ,GAAG,+BAAoBD,IAApB,CAAjB;AACA,SAAOC,QAAQ,CAACC,QAAT,CAAmB,QAAnB,CAAP;AACA","sourcesContent":["/**\n * Internal dependencies\n */\nimport { useSupportedStyles } from './hooks';\n\nexport function useHasFilterPanel( name ) {\n\tconst supports = useSupportedStyles( name );\n\treturn supports.includes( 'filter' );\n}\n"]}

package/build/components/global-styles/shadow-panel.js

@@ -1,197 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = ShadowPanel;
-exports.useHasShadowControl = useHasShadowControl;
-
-var _element = require("@wordpress/element");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _components = require("@wordpress/components");
-
-var _i18n = require("@wordpress/i18n");
-
-var _icons = require("@wordpress/icons");
-
-var _blockEditor = require("@wordpress/block-editor");
-
-var _hooks = require("./hooks");
-
-var _iconWithCurrentColor = require("./icon-with-current-color");
-
-var _privateApis = require("../../private-apis");
-
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-const {
-  useGlobalSetting,
-  useGlobalStyle
-} = (0, _privateApis.unlock)(_blockEditor.privateApis);
-
-function useHasShadowControl(name) {
-  const supports = (0, _hooks.useSupportedStyles)(name);
-  return supports.includes('shadow');
-}
-
-function ShadowPanel(_ref) {
-  let {
-    name,
-    variation = ''
-  } = _ref;
-  const prefix = variation ? `variations.${variation}.` : '';
-  const [shadow, setShadow] = useGlobalStyle(`${prefix}shadow`, name);
-  const [userShadow] = useGlobalStyle(`${prefix}shadow`, name, 'user');
-
-  const hasShadow = () => !!userShadow;
-
-  const resetShadow = (0, _element.useCallback)(() => setShadow(undefined), [setShadow]);
-  const resetAll = (0, _element.useCallback)(() => resetShadow(undefined), [resetShadow]);
-  return (0, _element.createElement)(_components.__experimentalToolsPanel, {
-    label: (0, _i18n.__)('Shadow'),
-    resetAll: resetAll
-  }, (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
-    label: (0, _i18n.__)('Shadow'),
-    hasValue: hasShadow,
-    onDeselect: resetShadow,
-    isShownByDefault: true
-  }, (0, _element.createElement)(_components.__experimentalItemGroup, {
-    isBordered: true,
-    isSeparated: true
-  }, (0, _element.createElement)(ShadowPopover, {
-    shadow: shadow,
-    onShadowChange: setShadow
-  }))));
-}
-
-const ShadowPopover = _ref2 => {
-  let {
-    shadow,
-    onShadowChange
-  } = _ref2;
-  const popoverProps = {
-    placement: 'left-start',
-    offset: 36,
-    shift: true
-  };
-  return (0, _element.createElement)(_components.Dropdown, {
-    popoverProps: popoverProps,
-    className: "edit-site-global-styles__shadow-dropdown",
-    renderToggle: renderShadowToggle(),
-    renderContent: () => (0, _element.createElement)(_components.__experimentalDropdownContentWrapper, {
-      paddingSize: "medium"
-    }, (0, _element.createElement)(ShadowPopoverContainer, {
-      shadow: shadow,
-      onShadowChange: onShadowChange
-    }))
-  });
-};
-
-function renderShadowToggle() {
-  return _ref3 => {
-    let {
-      onToggle,
-      isOpen
-    } = _ref3;
-    const toggleProps = {
-      onClick: onToggle,
-      className: (0, _classnames.default)({
-        'is-open': isOpen
-      }),
-      'aria-expanded': isOpen
-    };
-    return (0, _element.createElement)(_components.Button, toggleProps, (0, _element.createElement)(_components.__experimentalHStack, {
-      justify: "flex-start"
-    }, (0, _element.createElement)(_iconWithCurrentColor.IconWithCurrentColor, {
-      icon: _icons.shadow,
-      size: 24
-    }), (0, _element.createElement)(_components.FlexItem, {
-      className: "edit-site-global-styles__shadow-label"
-    }, (0, _i18n.__)('Shadow'))));
-  };
-}
-
-function ShadowPopoverContainer(_ref4) {
-  let {
-    shadow,
-    onShadowChange
-  } = _ref4;
-  const [defaultShadows] = useGlobalSetting('shadow.presets.default');
-  const [themeShadows] = useGlobalSetting('shadow.presets.theme');
-  const [defaultPresetsEnabled] = useGlobalSetting('shadow.defaultPresets');
-  const shadows = [...(defaultPresetsEnabled ? defaultShadows : []), ...(themeShadows || [])];
-  return (0, _element.createElement)("div", {
-    className: "edit-site-global-styles__shadow-panel"
-  }, (0, _element.createElement)(_components.__experimentalVStack, {
-    spacing: 4
-  }, (0, _element.createElement)(_components.__experimentalHeading, {
-    level: 5
-  }, (0, _i18n.__)('Shadow')), (0, _element.createElement)(ShadowPresets, {
-    presets: shadows,
-    activeShadow: shadow,
-    onSelect: onShadowChange
-  })));
-}
-
-function ShadowPresets(_ref5) {
-  let {
-    presets,
-    activeShadow,
-    onSelect
-  } = _ref5;
-  return !presets ? null : (0, _element.createElement)(_components.__experimentalGrid, {
-    columns: 6,
-    gap: 0,
-    align: "center",
-    justify: "center"
-  }, presets.map(_ref6 => {
-    let {
-      name,
-      slug,
-      shadow
-    } = _ref6;
-    return (0, _element.createElement)(ShadowIndicator, {
-      key: slug,
-      label: name,
-      isActive: shadow === activeShadow,
-      onSelect: () => onSelect(shadow === activeShadow ? undefined : shadow),
-      shadow: shadow
-    });
-  }));
-}
-
-function ShadowIndicator(_ref7) {
-  let {
-    label,
-    isActive,
-    onSelect,
-    shadow
-  } = _ref7;
-  return (0, _element.createElement)("div", {
-    className: "edit-site-global-styles__shadow-indicator-wrapper"
-  }, (0, _element.createElement)(_components.Button, {
-    className: "edit-site-global-styles__shadow-indicator",
-    onClick: onSelect,
-    label: label,
-    style: {
-      boxShadow: shadow
-    },
-    showTooltip: true
-  }, isActive && (0, _element.createElement)(_icons.Icon, {
-    icon: _icons.check
-  })));
-}
-//# sourceMappingURL=shadow-panel.js.map

package/build/components/global-styles/shadow-panel.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/shadow-panel.js"],"names":["useGlobalSetting","useGlobalStyle","blockEditorPrivateApis","useHasShadowControl","name","supports","includes","ShadowPanel","variation","prefix","shadow","setShadow","userShadow","hasShadow","resetShadow","undefined","resetAll","ShadowPopover","onShadowChange","popoverProps","placement","offset","shift","renderShadowToggle","onToggle","isOpen","toggleProps","onClick","className","shadowIcon","ShadowPopoverContainer","defaultShadows","themeShadows","defaultPresetsEnabled","shadows","ShadowPresets","presets","activeShadow","onSelect","map","slug","ShadowIndicator","label","isActive","boxShadow","check"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalGrid as Grid,\n\t__experimentalHeading as Heading,\n\tFlexItem,\n\tDropdown,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n\tButton,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { shadow as shadowIcon, Icon, check } from '@wordpress/icons';\nimport { useCallback } from '@wordpress/element';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { useSupportedStyles } from './hooks';\nimport { IconWithCurrentColor } from './icon-with-current-color';\nimport { unlock } from '../../private-apis';\n\nconst { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nexport function useHasShadowControl( name ) {\n\tconst supports = useSupportedStyles( name );\n\treturn supports.includes( 'shadow' );\n}\n\nexport default function ShadowPanel( { name, variation = '' } ) {\n\tconst prefix = variation ? `variations.${ variation }.` : '';\n\tconst [ shadow, setShadow ] = useGlobalStyle( `${ prefix }shadow`, name );\n\tconst [ userShadow ] = useGlobalStyle( `${ prefix }shadow`, name, 'user' );\n\tconst hasShadow = () => !! userShadow;\n\n\tconst resetShadow = useCallback(\n\t\t() => setShadow( undefined ),\n\t\t[ setShadow ]\n\t);\n\tconst resetAll = useCallback(\n\t\t() => resetShadow( undefined ),\n\t\t[ resetShadow ]\n\t);\n\n\treturn (\n\t\t<ToolsPanel label={ __( 'Shadow' ) } resetAll={ resetAll }>\n\t\t\t<ToolsPanelItem\n\t\t\t\tlabel={ __( 'Shadow' ) }\n\t\t\t\thasValue={ hasShadow }\n\t\t\t\tonDeselect={ resetShadow }\n\t\t\t\tisShownByDefault\n\t\t\t>\n\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t<ShadowPopover\n\t\t\t\t\t\tshadow={ shadow }\n\t\t\t\t\t\tonShadowChange={ setShadow }\n\t\t\t\t\t/>\n\t\t\t\t</ItemGroup>\n\t\t\t</ToolsPanelItem>\n\t\t</ToolsPanel>\n\t);\n}\n\nconst ShadowPopover = ( { shadow, onShadowChange } ) => {\n\tconst popoverProps = {\n\t\tplacement: 'left-start',\n\t\toffset: 36,\n\t\tshift: true,\n\t};\n\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ popoverProps }\n\t\t\tclassName=\"edit-site-global-styles__shadow-dropdown\"\n\t\t\trenderToggle={ renderShadowToggle() }\n\t\t\trenderContent={ () => (\n\t\t\t\t<DropdownContentWrapper paddingSize=\"medium\">\n\t\t\t\t\t<ShadowPopoverContainer\n\t\t\t\t\t\tshadow={ shadow }\n\t\t\t\t\t\tonShadowChange={ onShadowChange }\n\t\t\t\t\t/>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t/>\n\t);\n};\n\nfunction renderShadowToggle() {\n\treturn ( { onToggle, isOpen } ) => {\n\t\tconst toggleProps = {\n\t\t\tonClick: onToggle,\n\t\t\tclassName: classnames( { 'is-open': isOpen } ),\n\t\t\t'aria-expanded': isOpen,\n\t\t};\n\n\t\treturn (\n\t\t\t<Button { ...toggleProps }>\n\t\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t\t<IconWithCurrentColor icon={ shadowIcon } size={ 24 } />\n\t\t\t\t\t<FlexItem className=\"edit-site-global-styles__shadow-label\">\n\t\t\t\t\t\t{ __( 'Shadow' ) }\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</HStack>\n\t\t\t</Button>\n\t\t);\n\t};\n}\n\nfunction ShadowPopoverContainer( { shadow, onShadowChange } ) {\n\tconst [ defaultShadows ] = useGlobalSetting( 'shadow.presets.default' );\n\tconst [ themeShadows ] = useGlobalSetting( 'shadow.presets.theme' );\n\tconst [ defaultPresetsEnabled ] = useGlobalSetting(\n\t\t'shadow.defaultPresets'\n\t);\n\n\tconst shadows = [\n\t\t...( defaultPresetsEnabled ? defaultShadows : [] ),\n\t\t...( themeShadows || [] ),\n\t];\n\n\treturn (\n\t\t<div className=\"edit-site-global-styles__shadow-panel\">\n\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t<Heading level={ 5 }>{ __( 'Shadow' ) }</Heading>\n\t\t\t\t<ShadowPresets\n\t\t\t\t\tpresets={ shadows }\n\t\t\t\t\tactiveShadow={ shadow }\n\t\t\t\t\tonSelect={ onShadowChange }\n\t\t\t\t/>\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n\nfunction ShadowPresets( { presets, activeShadow, onSelect } ) {\n\treturn ! presets ? null : (\n\t\t<Grid columns={ 6 } gap={ 0 } align=\"center\" justify=\"center\">\n\t\t\t{ presets.map( ( { name, slug, shadow } ) => (\n\t\t\t\t<ShadowIndicator\n\t\t\t\t\tkey={ slug }\n\t\t\t\t\tlabel={ name }\n\t\t\t\t\tisActive={ shadow === activeShadow }\n\t\t\t\t\tonSelect={ () =>\n\t\t\t\t\t\tonSelect( shadow === activeShadow ? undefined : shadow )\n\t\t\t\t\t}\n\t\t\t\t\tshadow={ shadow }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</Grid>\n\t);\n}\n\nfunction ShadowIndicator( { label, isActive, onSelect, shadow } ) {\n\treturn (\n\t\t<div className=\"edit-site-global-styles__shadow-indicator-wrapper\">\n\t\t\t<Button\n\t\t\t\tclassName=\"edit-site-global-styles__shadow-indicator\"\n\t\t\t\tonClick={ onSelect }\n\t\t\t\tlabel={ label }\n\t\t\t\tstyle={ { boxShadow: shadow } }\n\t\t\t\tshowTooltip\n\t\t\t>\n\t\t\t\t{ isActive && <Icon icon={ check } /> }\n\t\t\t</Button>\n\t\t</div>\n\t);\n}\n"]}