@wordpress/edit-site 5.7.0 → 5.8.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.
- package/CHANGELOG.md +2 -0
- package/build/components/editor/index.js +6 -4
- package/build/components/editor/index.js.map +1 -1
- package/build/components/global-styles/border-panel.js +35 -1
- package/build/components/global-styles/border-panel.js.map +1 -1
- package/build/components/global-styles/context-menu.js +6 -8
- package/build/components/global-styles/context-menu.js.map +1 -1
- package/build/components/global-styles/dimensions-panel.js +11 -1
- package/build/components/global-styles/dimensions-panel.js.map +1 -1
- package/build/components/global-styles/effects-panel.js +53 -0
- package/build/components/global-styles/effects-panel.js.map +1 -0
- package/build/components/global-styles/filters-panel.js +45 -0
- package/build/components/global-styles/filters-panel.js.map +1 -0
- package/build/components/global-styles/global-styles-provider.js +7 -4
- package/build/components/global-styles/global-styles-provider.js.map +1 -1
- package/build/components/global-styles/preview.js +1 -1
- package/build/components/global-styles/preview.js.map +1 -1
- package/build/components/global-styles/screen-block-list.js +14 -8
- package/build/components/global-styles/screen-block-list.js.map +1 -1
- package/build/components/global-styles/screen-css.js +1 -1
- package/build/components/global-styles/screen-css.js.map +1 -1
- package/build/components/global-styles/screen-effects.js +15 -7
- package/build/components/global-styles/screen-effects.js.map +1 -1
- package/build/components/global-styles/screen-filters.js +2 -2
- package/build/components/global-styles/screen-filters.js.map +1 -1
- package/build/components/global-styles/screen-style-variations.js +8 -118
- package/build/components/global-styles/screen-style-variations.js.map +1 -1
- package/build/components/global-styles/style-variations-container.js +149 -0
- package/build/components/global-styles/style-variations-container.js.map +1 -0
- package/build/components/global-styles/ui.js +46 -2
- package/build/components/global-styles/ui.js.map +1 -1
- package/build/components/header-edit-mode/more-menu/index.js +1 -1
- package/build/components/header-edit-mode/more-menu/index.js.map +1 -1
- package/build/components/keyboard-shortcuts/index.js +0 -137
- package/build/components/keyboard-shortcuts/index.js.map +1 -1
- package/build/components/layout/index.js +8 -1
- package/build/components/layout/index.js.map +1 -1
- package/build/components/preferences-modal/index.js +4 -0
- package/build/components/preferences-modal/index.js.map +1 -1
- package/build/components/sidebar/index.js +4 -0
- package/build/components/sidebar/index.js.map +1 -1
- package/build/components/sidebar-navigation-screen/index.js +8 -6
- package/build/components/sidebar-navigation-screen/index.js.map +1 -1
- package/build/components/sidebar-navigation-screen-global-styles/index.js +58 -0
- package/build/components/sidebar-navigation-screen-global-styles/index.js.map +1 -0
- package/build/components/sidebar-navigation-screen-main/index.js +5 -0
- package/build/components/sidebar-navigation-screen-main/index.js.map +1 -1
- package/build/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js +114 -9
- package/build/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js.map +1 -1
- package/build/components/site-hub/index.js +4 -3
- package/build/components/site-hub/index.js.map +1 -1
- package/build/components/welcome-guide/styles.js +1 -1
- package/build/components/welcome-guide/styles.js.map +1 -1
- package/build/hooks/commands/index.js +19 -0
- package/build/hooks/commands/index.js.map +1 -0
- package/build/hooks/commands/use-navigation-commands.js +117 -0
- package/build/hooks/commands/use-navigation-commands.js.map +1 -0
- package/build/hooks/commands/use-wp-admin-commands.js +94 -0
- package/build/hooks/commands/use-wp-admin-commands.js.map +1 -0
- package/build/hooks/template-part-edit.js +2 -1
- package/build/hooks/template-part-edit.js.map +1 -1
- package/build/index.js +2 -1
- package/build/index.js.map +1 -1
- package/build/store/selectors.js +2 -1
- package/build/store/selectors.js.map +1 -1
- package/build-module/components/editor/index.js +6 -4
- package/build-module/components/editor/index.js.map +1 -1
- package/build-module/components/global-styles/border-panel.js +34 -1
- package/build-module/components/global-styles/border-panel.js.map +1 -1
- package/build-module/components/global-styles/context-menu.js +6 -6
- package/build-module/components/global-styles/context-menu.js.map +1 -1
- package/build-module/components/global-styles/dimensions-panel.js +11 -1
- package/build-module/components/global-styles/dimensions-panel.js.map +1 -1
- package/build-module/components/global-styles/effects-panel.js +43 -0
- package/build-module/components/global-styles/effects-panel.js.map +1 -0
- package/build-module/components/global-styles/filters-panel.js +35 -0
- package/build-module/components/global-styles/filters-panel.js.map +1 -0
- package/build-module/components/global-styles/global-styles-provider.js +8 -5
- package/build-module/components/global-styles/global-styles-provider.js.map +1 -1
- package/build-module/components/global-styles/preview.js +1 -1
- package/build-module/components/global-styles/preview.js.map +1 -1
- package/build-module/components/global-styles/screen-block-list.js +13 -8
- package/build-module/components/global-styles/screen-block-list.js.map +1 -1
- package/build-module/components/global-styles/screen-css.js +1 -1
- package/build-module/components/global-styles/screen-css.js.map +1 -1
- package/build-module/components/global-styles/screen-effects.js +13 -4
- package/build-module/components/global-styles/screen-effects.js.map +1 -1
- package/build-module/components/global-styles/screen-filters.js +2 -2
- package/build-module/components/global-styles/screen-filters.js.map +1 -1
- package/build-module/components/global-styles/screen-style-variations.js +11 -114
- package/build-module/components/global-styles/screen-style-variations.js.map +1 -1
- package/build-module/components/global-styles/style-variations-container.js +130 -0
- package/build-module/components/global-styles/style-variations-container.js.map +1 -0
- package/build-module/components/global-styles/ui.js +44 -3
- package/build-module/components/global-styles/ui.js.map +1 -1
- package/build-module/components/header-edit-mode/more-menu/index.js +1 -1
- package/build-module/components/header-edit-mode/more-menu/index.js.map +1 -1
- package/build-module/components/keyboard-shortcuts/index.js +1 -135
- package/build-module/components/keyboard-shortcuts/index.js.map +1 -1
- package/build-module/components/layout/index.js +6 -1
- package/build-module/components/layout/index.js.map +1 -1
- package/build-module/components/preferences-modal/index.js +4 -0
- package/build-module/components/preferences-modal/index.js.map +1 -1
- package/build-module/components/sidebar/index.js +3 -0
- package/build-module/components/sidebar/index.js.map +1 -1
- package/build-module/components/sidebar-navigation-screen/index.js +9 -7
- package/build-module/components/sidebar-navigation-screen/index.js.map +1 -1
- package/build-module/components/sidebar-navigation-screen-global-styles/index.js +41 -0
- package/build-module/components/sidebar-navigation-screen-global-styles/index.js.map +1 -0
- package/build-module/components/sidebar-navigation-screen-main/index.js +6 -1
- package/build-module/components/sidebar-navigation-screen-main/index.js.map +1 -1
- package/build-module/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js +113 -11
- package/build-module/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js.map +1 -1
- package/build-module/components/site-hub/index.js +3 -3
- package/build-module/components/site-hub/index.js.map +1 -1
- package/build-module/components/welcome-guide/styles.js +1 -1
- package/build-module/components/welcome-guide/styles.js.map +1 -1
- package/build-module/hooks/commands/index.js +10 -0
- package/build-module/hooks/commands/index.js.map +1 -0
- package/build-module/hooks/commands/use-navigation-commands.js +101 -0
- package/build-module/hooks/commands/use-navigation-commands.js.map +1 -0
- package/build-module/hooks/commands/use-wp-admin-commands.js +79 -0
- package/build-module/hooks/commands/use-wp-admin-commands.js.map +1 -0
- package/build-module/hooks/template-part-edit.js +2 -1
- package/build-module/hooks/template-part-edit.js.map +1 -1
- package/build-module/index.js +2 -1
- package/build-module/index.js.map +1 -1
- package/build-module/store/selectors.js +2 -1
- package/build-module/store/selectors.js.map +1 -1
- package/build-style/style-rtl.css +20 -46
- package/build-style/style.css +20 -46
- package/package.json +33 -31
- package/src/components/editor/index.js +11 -3
- package/src/components/global-styles/border-panel.js +32 -1
- package/src/components/global-styles/context-menu.js +6 -6
- package/src/components/global-styles/dimensions-panel.js +11 -0
- package/src/components/global-styles/effects-panel.js +40 -0
- package/src/components/global-styles/filters-panel.js +33 -0
- package/src/components/global-styles/global-styles-provider.js +4 -4
- package/src/components/global-styles/preview.js +1 -1
- package/src/components/global-styles/screen-block-list.js +9 -5
- package/src/components/global-styles/screen-css.js +1 -1
- package/src/components/global-styles/screen-effects.js +12 -5
- package/src/components/global-styles/screen-filters.js +2 -2
- package/src/components/global-styles/screen-style-variations.js +10 -129
- package/src/components/global-styles/style-variations-container.js +136 -0
- package/src/components/global-styles/style.scss +0 -39
- package/src/components/global-styles/ui.js +44 -2
- package/src/components/header-edit-mode/more-menu/index.js +1 -1
- package/src/components/keyboard-shortcuts/index.js +1 -155
- package/src/components/layout/index.js +4 -0
- package/src/components/preferences-modal/index.js +7 -0
- package/src/components/sidebar/index.js +4 -0
- package/src/components/sidebar-navigation-screen/index.js +10 -5
- package/src/components/sidebar-navigation-screen/style.scss +20 -5
- package/src/components/sidebar-navigation-screen-global-styles/index.js +41 -0
- package/src/components/sidebar-navigation-screen-main/index.js +9 -1
- package/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js +134 -9
- package/src/components/site-hub/index.js +3 -3
- package/src/components/start-template-options/style.scss +7 -14
- package/src/components/welcome-guide/styles.js +1 -1
- package/src/hooks/commands/index.js +10 -0
- package/src/hooks/commands/use-navigation-commands.js +103 -0
- package/src/hooks/commands/use-wp-admin-commands.js +77 -0
- package/src/hooks/template-part-edit.js +1 -0
- package/src/index.js +1 -0
- package/src/store/selectors.js +2 -1
- package/build/components/global-styles/duotone-panel.js +0 -78
- package/build/components/global-styles/duotone-panel.js.map +0 -1
- package/build/components/global-styles/filter-utils.js +0 -17
- package/build/components/global-styles/filter-utils.js.map +0 -1
- package/build/components/global-styles/shadow-panel.js +0 -197
- package/build/components/global-styles/shadow-panel.js.map +0 -1
- package/build-module/components/global-styles/duotone-panel.js +0 -67
- package/build-module/components/global-styles/duotone-panel.js.map +0 -1
- package/build-module/components/global-styles/filter-utils.js +0 -9
- package/build-module/components/global-styles/filter-utils.js.map +0 -1
- package/build-module/components/global-styles/shadow-panel.js +0 -178
- package/build-module/components/global-styles/shadow-panel.js.map +0 -1
- package/src/components/global-styles/duotone-panel.js +0 -82
- package/src/components/global-styles/filter-utils.js +0 -9
- package/src/components/global-styles/shadow-panel.js +0 -178
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/duotone-panel.js"],"names":["__","__experimentalToolsPanel","ToolsPanel","DuotonePicker","privateApis","blockEditorPrivateApis","useSetting","useMemo","unlock","useGlobalStyle","EMPTY_ARRAY","useMultiOriginPresets","presetSetting","defaultSetting","disableDefault","userPresets","themePresets","defaultPresets","DuotonePanel","name","themeDuotone","setThemeDuotone","duotonePalette","colorPalette","length"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SACCC,wBAAwB,IAAIC,UAD7B,EAECC,aAFD,QAGO,uBAHP;AAIA,SACCC,WAAW,IAAIC,sBADhB,EAECC,UAFD,QAGO,yBAHP;AAIA,SAASC,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,SAASC,MAAT,QAAuB,oBAAvB;AACA,MAAM;AAAEC,EAAAA;AAAF,IAAqBD,MAAM,CAAEH,sBAAF,CAAjC;AAEA,MAAMK,WAAW,GAAG,EAApB;;AAEA,SAASC,qBAAT,OAAoE;AAAA,MAApC;AAAEC,IAAAA,aAAF;AAAiBC,IAAAA;AAAjB,GAAoC;AACnE,QAAMC,cAAc,GAAG,CAAER,UAAU,CAAEO,cAAF,CAAnC;AACA,QAAME,WAAW,GAChBT,UAAU,CAAG,GAAGM,aAAe,SAArB,CAAV,IAA6CF,WAD9C;AAEA,QAAMM,YAAY,GACjBV,UAAU,CAAG,GAAGM,aAAe,QAArB,CAAV,IAA4CF,WAD7C;AAEA,QAAMO,cAAc,GACnBX,UAAU,CAAG,GAAGM,aAAe,UAArB,CAAV,IAA8CF,WAD/C;AAEA,SAAOH,OAAO,CACb,MAAM,CACL,GAAGQ,WADE,EAEL,GAAGC,YAFE,EAGL,IAAKF,cAAc,GAAGJ,WAAH,GAAiBO,cAApC,CAHK,CADO,EAMb,CAAEH,cAAF,EAAkBC,WAAlB,EAA+BC,YAA/B,EAA6CC,cAA7C,CANa,CAAd;AAQA;;AAED,SAASC,YAAT,QAAkC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACjC,QAAM,CAAEC,YAAF,EAAgBC,eAAhB,IAAoCZ,cAAc,CACvD,gBADuD,EAEvDU,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,8BACC,cAAC,UAAD;AAAY,IAAA,KAAK,EAAGxB,EAAE,CAAE,SAAF;AAAtB,KACC;AAAM,IAAA,SAAS,EAAC;AAAhB,KACGA,EAAE,CACH,oEADG,CADL,CADD,EAMC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,aAAD;AACC,IAAA,YAAY,EAAGuB,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;;AAED,eAAeH,YAAf","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"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/filter-utils.js"],"names":["useSupportedStyles","useHasFilterPanel","name","supports","includes"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,kBAAT,QAAmC,SAAnC;AAEA,OAAO,SAASC,iBAAT,CAA4BC,IAA5B,EAAmC;AACzC,QAAMC,QAAQ,GAAGH,kBAAkB,CAAEE,IAAF,CAAnC;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"]}
|
|
@@ -1,178 +0,0 @@
|
|
|
1
|
-
import { createElement } from "@wordpress/element";
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* External dependencies
|
|
5
|
-
*/
|
|
6
|
-
import classnames from 'classnames';
|
|
7
|
-
/**
|
|
8
|
-
* WordPress dependencies
|
|
9
|
-
*/
|
|
10
|
-
|
|
11
|
-
import { __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem, __experimentalItemGroup as ItemGroup, __experimentalHStack as HStack, __experimentalVStack as VStack, __experimentalGrid as Grid, __experimentalHeading as Heading, FlexItem, Dropdown, __experimentalDropdownContentWrapper as DropdownContentWrapper, Button } from '@wordpress/components';
|
|
12
|
-
import { __ } from '@wordpress/i18n';
|
|
13
|
-
import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
|
|
14
|
-
import { useCallback } from '@wordpress/element';
|
|
15
|
-
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
|
|
16
|
-
/**
|
|
17
|
-
* Internal dependencies
|
|
18
|
-
*/
|
|
19
|
-
|
|
20
|
-
import { useSupportedStyles } from './hooks';
|
|
21
|
-
import { IconWithCurrentColor } from './icon-with-current-color';
|
|
22
|
-
import { unlock } from '../../private-apis';
|
|
23
|
-
const {
|
|
24
|
-
useGlobalSetting,
|
|
25
|
-
useGlobalStyle
|
|
26
|
-
} = unlock(blockEditorPrivateApis);
|
|
27
|
-
export function useHasShadowControl(name) {
|
|
28
|
-
const supports = useSupportedStyles(name);
|
|
29
|
-
return supports.includes('shadow');
|
|
30
|
-
}
|
|
31
|
-
export default function ShadowPanel(_ref) {
|
|
32
|
-
let {
|
|
33
|
-
name,
|
|
34
|
-
variation = ''
|
|
35
|
-
} = _ref;
|
|
36
|
-
const prefix = variation ? `variations.${variation}.` : '';
|
|
37
|
-
const [shadow, setShadow] = useGlobalStyle(`${prefix}shadow`, name);
|
|
38
|
-
const [userShadow] = useGlobalStyle(`${prefix}shadow`, name, 'user');
|
|
39
|
-
|
|
40
|
-
const hasShadow = () => !!userShadow;
|
|
41
|
-
|
|
42
|
-
const resetShadow = useCallback(() => setShadow(undefined), [setShadow]);
|
|
43
|
-
const resetAll = useCallback(() => resetShadow(undefined), [resetShadow]);
|
|
44
|
-
return createElement(ToolsPanel, {
|
|
45
|
-
label: __('Shadow'),
|
|
46
|
-
resetAll: resetAll
|
|
47
|
-
}, createElement(ToolsPanelItem, {
|
|
48
|
-
label: __('Shadow'),
|
|
49
|
-
hasValue: hasShadow,
|
|
50
|
-
onDeselect: resetShadow,
|
|
51
|
-
isShownByDefault: true
|
|
52
|
-
}, createElement(ItemGroup, {
|
|
53
|
-
isBordered: true,
|
|
54
|
-
isSeparated: true
|
|
55
|
-
}, createElement(ShadowPopover, {
|
|
56
|
-
shadow: shadow,
|
|
57
|
-
onShadowChange: setShadow
|
|
58
|
-
}))));
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
const ShadowPopover = _ref2 => {
|
|
62
|
-
let {
|
|
63
|
-
shadow,
|
|
64
|
-
onShadowChange
|
|
65
|
-
} = _ref2;
|
|
66
|
-
const popoverProps = {
|
|
67
|
-
placement: 'left-start',
|
|
68
|
-
offset: 36,
|
|
69
|
-
shift: true
|
|
70
|
-
};
|
|
71
|
-
return createElement(Dropdown, {
|
|
72
|
-
popoverProps: popoverProps,
|
|
73
|
-
className: "edit-site-global-styles__shadow-dropdown",
|
|
74
|
-
renderToggle: renderShadowToggle(),
|
|
75
|
-
renderContent: () => createElement(DropdownContentWrapper, {
|
|
76
|
-
paddingSize: "medium"
|
|
77
|
-
}, createElement(ShadowPopoverContainer, {
|
|
78
|
-
shadow: shadow,
|
|
79
|
-
onShadowChange: onShadowChange
|
|
80
|
-
}))
|
|
81
|
-
});
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
function renderShadowToggle() {
|
|
85
|
-
return _ref3 => {
|
|
86
|
-
let {
|
|
87
|
-
onToggle,
|
|
88
|
-
isOpen
|
|
89
|
-
} = _ref3;
|
|
90
|
-
const toggleProps = {
|
|
91
|
-
onClick: onToggle,
|
|
92
|
-
className: classnames({
|
|
93
|
-
'is-open': isOpen
|
|
94
|
-
}),
|
|
95
|
-
'aria-expanded': isOpen
|
|
96
|
-
};
|
|
97
|
-
return createElement(Button, toggleProps, createElement(HStack, {
|
|
98
|
-
justify: "flex-start"
|
|
99
|
-
}, createElement(IconWithCurrentColor, {
|
|
100
|
-
icon: shadowIcon,
|
|
101
|
-
size: 24
|
|
102
|
-
}), createElement(FlexItem, {
|
|
103
|
-
className: "edit-site-global-styles__shadow-label"
|
|
104
|
-
}, __('Shadow'))));
|
|
105
|
-
};
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
function ShadowPopoverContainer(_ref4) {
|
|
109
|
-
let {
|
|
110
|
-
shadow,
|
|
111
|
-
onShadowChange
|
|
112
|
-
} = _ref4;
|
|
113
|
-
const [defaultShadows] = useGlobalSetting('shadow.presets.default');
|
|
114
|
-
const [themeShadows] = useGlobalSetting('shadow.presets.theme');
|
|
115
|
-
const [defaultPresetsEnabled] = useGlobalSetting('shadow.defaultPresets');
|
|
116
|
-
const shadows = [...(defaultPresetsEnabled ? defaultShadows : []), ...(themeShadows || [])];
|
|
117
|
-
return createElement("div", {
|
|
118
|
-
className: "edit-site-global-styles__shadow-panel"
|
|
119
|
-
}, createElement(VStack, {
|
|
120
|
-
spacing: 4
|
|
121
|
-
}, createElement(Heading, {
|
|
122
|
-
level: 5
|
|
123
|
-
}, __('Shadow')), createElement(ShadowPresets, {
|
|
124
|
-
presets: shadows,
|
|
125
|
-
activeShadow: shadow,
|
|
126
|
-
onSelect: onShadowChange
|
|
127
|
-
})));
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
function ShadowPresets(_ref5) {
|
|
131
|
-
let {
|
|
132
|
-
presets,
|
|
133
|
-
activeShadow,
|
|
134
|
-
onSelect
|
|
135
|
-
} = _ref5;
|
|
136
|
-
return !presets ? null : createElement(Grid, {
|
|
137
|
-
columns: 6,
|
|
138
|
-
gap: 0,
|
|
139
|
-
align: "center",
|
|
140
|
-
justify: "center"
|
|
141
|
-
}, presets.map(_ref6 => {
|
|
142
|
-
let {
|
|
143
|
-
name,
|
|
144
|
-
slug,
|
|
145
|
-
shadow
|
|
146
|
-
} = _ref6;
|
|
147
|
-
return createElement(ShadowIndicator, {
|
|
148
|
-
key: slug,
|
|
149
|
-
label: name,
|
|
150
|
-
isActive: shadow === activeShadow,
|
|
151
|
-
onSelect: () => onSelect(shadow === activeShadow ? undefined : shadow),
|
|
152
|
-
shadow: shadow
|
|
153
|
-
});
|
|
154
|
-
}));
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
function ShadowIndicator(_ref7) {
|
|
158
|
-
let {
|
|
159
|
-
label,
|
|
160
|
-
isActive,
|
|
161
|
-
onSelect,
|
|
162
|
-
shadow
|
|
163
|
-
} = _ref7;
|
|
164
|
-
return createElement("div", {
|
|
165
|
-
className: "edit-site-global-styles__shadow-indicator-wrapper"
|
|
166
|
-
}, createElement(Button, {
|
|
167
|
-
className: "edit-site-global-styles__shadow-indicator",
|
|
168
|
-
onClick: onSelect,
|
|
169
|
-
label: label,
|
|
170
|
-
style: {
|
|
171
|
-
boxShadow: shadow
|
|
172
|
-
},
|
|
173
|
-
showTooltip: true
|
|
174
|
-
}, isActive && createElement(Icon, {
|
|
175
|
-
icon: check
|
|
176
|
-
})));
|
|
177
|
-
}
|
|
178
|
-
//# sourceMappingURL=shadow-panel.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/shadow-panel.js"],"names":["classnames","__experimentalToolsPanel","ToolsPanel","__experimentalToolsPanelItem","ToolsPanelItem","__experimentalItemGroup","ItemGroup","__experimentalHStack","HStack","__experimentalVStack","VStack","__experimentalGrid","Grid","__experimentalHeading","Heading","FlexItem","Dropdown","__experimentalDropdownContentWrapper","DropdownContentWrapper","Button","__","shadow","shadowIcon","Icon","check","useCallback","privateApis","blockEditorPrivateApis","useSupportedStyles","IconWithCurrentColor","unlock","useGlobalSetting","useGlobalStyle","useHasShadowControl","name","supports","includes","ShadowPanel","variation","prefix","setShadow","userShadow","hasShadow","resetShadow","undefined","resetAll","ShadowPopover","onShadowChange","popoverProps","placement","offset","shift","renderShadowToggle","onToggle","isOpen","toggleProps","onClick","className","ShadowPopoverContainer","defaultShadows","themeShadows","defaultPresetsEnabled","shadows","ShadowPresets","presets","activeShadow","onSelect","map","slug","ShadowIndicator","label","isActive","boxShadow"],"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"]}
|
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* WordPress dependencies
|
|
3
|
-
*/
|
|
4
|
-
import { __ } from '@wordpress/i18n';
|
|
5
|
-
import {
|
|
6
|
-
__experimentalToolsPanel as ToolsPanel,
|
|
7
|
-
DuotonePicker,
|
|
8
|
-
} from '@wordpress/components';
|
|
9
|
-
import {
|
|
10
|
-
privateApis as blockEditorPrivateApis,
|
|
11
|
-
useSetting,
|
|
12
|
-
} from '@wordpress/block-editor';
|
|
13
|
-
import { useMemo } from '@wordpress/element';
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* Internal dependencies
|
|
17
|
-
*/
|
|
18
|
-
import { unlock } from '../../private-apis';
|
|
19
|
-
const { useGlobalStyle } = unlock( blockEditorPrivateApis );
|
|
20
|
-
|
|
21
|
-
const EMPTY_ARRAY = [];
|
|
22
|
-
|
|
23
|
-
function useMultiOriginPresets( { presetSetting, defaultSetting } ) {
|
|
24
|
-
const disableDefault = ! useSetting( defaultSetting );
|
|
25
|
-
const userPresets =
|
|
26
|
-
useSetting( `${ presetSetting }.custom` ) || EMPTY_ARRAY;
|
|
27
|
-
const themePresets =
|
|
28
|
-
useSetting( `${ presetSetting }.theme` ) || EMPTY_ARRAY;
|
|
29
|
-
const defaultPresets =
|
|
30
|
-
useSetting( `${ presetSetting }.default` ) || EMPTY_ARRAY;
|
|
31
|
-
return useMemo(
|
|
32
|
-
() => [
|
|
33
|
-
...userPresets,
|
|
34
|
-
...themePresets,
|
|
35
|
-
...( disableDefault ? EMPTY_ARRAY : defaultPresets ),
|
|
36
|
-
],
|
|
37
|
-
[ disableDefault, userPresets, themePresets, defaultPresets ]
|
|
38
|
-
);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
function DuotonePanel( { name } ) {
|
|
42
|
-
const [ themeDuotone, setThemeDuotone ] = useGlobalStyle(
|
|
43
|
-
'filter.duotone',
|
|
44
|
-
name
|
|
45
|
-
);
|
|
46
|
-
|
|
47
|
-
const duotonePalette = useMultiOriginPresets( {
|
|
48
|
-
presetSetting: 'color.duotone',
|
|
49
|
-
defaultSetting: 'color.defaultDuotone',
|
|
50
|
-
} );
|
|
51
|
-
const colorPalette = useMultiOriginPresets( {
|
|
52
|
-
presetSetting: 'color.palette',
|
|
53
|
-
defaultSetting: 'color.defaultPalette',
|
|
54
|
-
} );
|
|
55
|
-
|
|
56
|
-
if ( duotonePalette?.length === 0 ) {
|
|
57
|
-
return null;
|
|
58
|
-
}
|
|
59
|
-
return (
|
|
60
|
-
<>
|
|
61
|
-
<ToolsPanel label={ __( 'Duotone' ) }>
|
|
62
|
-
<span className="span-columns">
|
|
63
|
-
{ __(
|
|
64
|
-
'Create a two-tone color effect without losing your original image.'
|
|
65
|
-
) }
|
|
66
|
-
</span>
|
|
67
|
-
<div className="span-columns">
|
|
68
|
-
<DuotonePicker
|
|
69
|
-
colorPalette={ colorPalette }
|
|
70
|
-
duotonePalette={ duotonePalette }
|
|
71
|
-
disableCustomColors={ true }
|
|
72
|
-
disableCustomDuotone={ true }
|
|
73
|
-
value={ themeDuotone }
|
|
74
|
-
onChange={ setThemeDuotone }
|
|
75
|
-
/>
|
|
76
|
-
</div>
|
|
77
|
-
</ToolsPanel>
|
|
78
|
-
</>
|
|
79
|
-
);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
export default DuotonePanel;
|
|
@@ -1,178 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* External dependencies
|
|
3
|
-
*/
|
|
4
|
-
import classnames from 'classnames';
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* WordPress dependencies
|
|
8
|
-
*/
|
|
9
|
-
import {
|
|
10
|
-
__experimentalToolsPanel as ToolsPanel,
|
|
11
|
-
__experimentalToolsPanelItem as ToolsPanelItem,
|
|
12
|
-
__experimentalItemGroup as ItemGroup,
|
|
13
|
-
__experimentalHStack as HStack,
|
|
14
|
-
__experimentalVStack as VStack,
|
|
15
|
-
__experimentalGrid as Grid,
|
|
16
|
-
__experimentalHeading as Heading,
|
|
17
|
-
FlexItem,
|
|
18
|
-
Dropdown,
|
|
19
|
-
__experimentalDropdownContentWrapper as DropdownContentWrapper,
|
|
20
|
-
Button,
|
|
21
|
-
} from '@wordpress/components';
|
|
22
|
-
import { __ } from '@wordpress/i18n';
|
|
23
|
-
import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
|
|
24
|
-
import { useCallback } from '@wordpress/element';
|
|
25
|
-
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
|
|
26
|
-
|
|
27
|
-
/**
|
|
28
|
-
* Internal dependencies
|
|
29
|
-
*/
|
|
30
|
-
import { useSupportedStyles } from './hooks';
|
|
31
|
-
import { IconWithCurrentColor } from './icon-with-current-color';
|
|
32
|
-
import { unlock } from '../../private-apis';
|
|
33
|
-
|
|
34
|
-
const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
|
|
35
|
-
|
|
36
|
-
export function useHasShadowControl( name ) {
|
|
37
|
-
const supports = useSupportedStyles( name );
|
|
38
|
-
return supports.includes( 'shadow' );
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
export default function ShadowPanel( { name, variation = '' } ) {
|
|
42
|
-
const prefix = variation ? `variations.${ variation }.` : '';
|
|
43
|
-
const [ shadow, setShadow ] = useGlobalStyle( `${ prefix }shadow`, name );
|
|
44
|
-
const [ userShadow ] = useGlobalStyle( `${ prefix }shadow`, name, 'user' );
|
|
45
|
-
const hasShadow = () => !! userShadow;
|
|
46
|
-
|
|
47
|
-
const resetShadow = useCallback(
|
|
48
|
-
() => setShadow( undefined ),
|
|
49
|
-
[ setShadow ]
|
|
50
|
-
);
|
|
51
|
-
const resetAll = useCallback(
|
|
52
|
-
() => resetShadow( undefined ),
|
|
53
|
-
[ resetShadow ]
|
|
54
|
-
);
|
|
55
|
-
|
|
56
|
-
return (
|
|
57
|
-
<ToolsPanel label={ __( 'Shadow' ) } resetAll={ resetAll }>
|
|
58
|
-
<ToolsPanelItem
|
|
59
|
-
label={ __( 'Shadow' ) }
|
|
60
|
-
hasValue={ hasShadow }
|
|
61
|
-
onDeselect={ resetShadow }
|
|
62
|
-
isShownByDefault
|
|
63
|
-
>
|
|
64
|
-
<ItemGroup isBordered isSeparated>
|
|
65
|
-
<ShadowPopover
|
|
66
|
-
shadow={ shadow }
|
|
67
|
-
onShadowChange={ setShadow }
|
|
68
|
-
/>
|
|
69
|
-
</ItemGroup>
|
|
70
|
-
</ToolsPanelItem>
|
|
71
|
-
</ToolsPanel>
|
|
72
|
-
);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
const ShadowPopover = ( { shadow, onShadowChange } ) => {
|
|
76
|
-
const popoverProps = {
|
|
77
|
-
placement: 'left-start',
|
|
78
|
-
offset: 36,
|
|
79
|
-
shift: true,
|
|
80
|
-
};
|
|
81
|
-
|
|
82
|
-
return (
|
|
83
|
-
<Dropdown
|
|
84
|
-
popoverProps={ popoverProps }
|
|
85
|
-
className="edit-site-global-styles__shadow-dropdown"
|
|
86
|
-
renderToggle={ renderShadowToggle() }
|
|
87
|
-
renderContent={ () => (
|
|
88
|
-
<DropdownContentWrapper paddingSize="medium">
|
|
89
|
-
<ShadowPopoverContainer
|
|
90
|
-
shadow={ shadow }
|
|
91
|
-
onShadowChange={ onShadowChange }
|
|
92
|
-
/>
|
|
93
|
-
</DropdownContentWrapper>
|
|
94
|
-
) }
|
|
95
|
-
/>
|
|
96
|
-
);
|
|
97
|
-
};
|
|
98
|
-
|
|
99
|
-
function renderShadowToggle() {
|
|
100
|
-
return ( { onToggle, isOpen } ) => {
|
|
101
|
-
const toggleProps = {
|
|
102
|
-
onClick: onToggle,
|
|
103
|
-
className: classnames( { 'is-open': isOpen } ),
|
|
104
|
-
'aria-expanded': isOpen,
|
|
105
|
-
};
|
|
106
|
-
|
|
107
|
-
return (
|
|
108
|
-
<Button { ...toggleProps }>
|
|
109
|
-
<HStack justify="flex-start">
|
|
110
|
-
<IconWithCurrentColor icon={ shadowIcon } size={ 24 } />
|
|
111
|
-
<FlexItem className="edit-site-global-styles__shadow-label">
|
|
112
|
-
{ __( 'Shadow' ) }
|
|
113
|
-
</FlexItem>
|
|
114
|
-
</HStack>
|
|
115
|
-
</Button>
|
|
116
|
-
);
|
|
117
|
-
};
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
function ShadowPopoverContainer( { shadow, onShadowChange } ) {
|
|
121
|
-
const [ defaultShadows ] = useGlobalSetting( 'shadow.presets.default' );
|
|
122
|
-
const [ themeShadows ] = useGlobalSetting( 'shadow.presets.theme' );
|
|
123
|
-
const [ defaultPresetsEnabled ] = useGlobalSetting(
|
|
124
|
-
'shadow.defaultPresets'
|
|
125
|
-
);
|
|
126
|
-
|
|
127
|
-
const shadows = [
|
|
128
|
-
...( defaultPresetsEnabled ? defaultShadows : [] ),
|
|
129
|
-
...( themeShadows || [] ),
|
|
130
|
-
];
|
|
131
|
-
|
|
132
|
-
return (
|
|
133
|
-
<div className="edit-site-global-styles__shadow-panel">
|
|
134
|
-
<VStack spacing={ 4 }>
|
|
135
|
-
<Heading level={ 5 }>{ __( 'Shadow' ) }</Heading>
|
|
136
|
-
<ShadowPresets
|
|
137
|
-
presets={ shadows }
|
|
138
|
-
activeShadow={ shadow }
|
|
139
|
-
onSelect={ onShadowChange }
|
|
140
|
-
/>
|
|
141
|
-
</VStack>
|
|
142
|
-
</div>
|
|
143
|
-
);
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
function ShadowPresets( { presets, activeShadow, onSelect } ) {
|
|
147
|
-
return ! presets ? null : (
|
|
148
|
-
<Grid columns={ 6 } gap={ 0 } align="center" justify="center">
|
|
149
|
-
{ presets.map( ( { name, slug, shadow } ) => (
|
|
150
|
-
<ShadowIndicator
|
|
151
|
-
key={ slug }
|
|
152
|
-
label={ name }
|
|
153
|
-
isActive={ shadow === activeShadow }
|
|
154
|
-
onSelect={ () =>
|
|
155
|
-
onSelect( shadow === activeShadow ? undefined : shadow )
|
|
156
|
-
}
|
|
157
|
-
shadow={ shadow }
|
|
158
|
-
/>
|
|
159
|
-
) ) }
|
|
160
|
-
</Grid>
|
|
161
|
-
);
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
function ShadowIndicator( { label, isActive, onSelect, shadow } ) {
|
|
165
|
-
return (
|
|
166
|
-
<div className="edit-site-global-styles__shadow-indicator-wrapper">
|
|
167
|
-
<Button
|
|
168
|
-
className="edit-site-global-styles__shadow-indicator"
|
|
169
|
-
onClick={ onSelect }
|
|
170
|
-
label={ label }
|
|
171
|
-
style={ { boxShadow: shadow } }
|
|
172
|
-
showTooltip
|
|
173
|
-
>
|
|
174
|
-
{ isActive && <Icon icon={ check } /> }
|
|
175
|
-
</Button>
|
|
176
|
-
</div>
|
|
177
|
-
);
|
|
178
|
-
}
|