@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.
Files changed (182) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/build/components/editor/index.js +6 -4
  3. package/build/components/editor/index.js.map +1 -1
  4. package/build/components/global-styles/border-panel.js +35 -1
  5. package/build/components/global-styles/border-panel.js.map +1 -1
  6. package/build/components/global-styles/context-menu.js +6 -8
  7. package/build/components/global-styles/context-menu.js.map +1 -1
  8. package/build/components/global-styles/dimensions-panel.js +11 -1
  9. package/build/components/global-styles/dimensions-panel.js.map +1 -1
  10. package/build/components/global-styles/effects-panel.js +53 -0
  11. package/build/components/global-styles/effects-panel.js.map +1 -0
  12. package/build/components/global-styles/filters-panel.js +45 -0
  13. package/build/components/global-styles/filters-panel.js.map +1 -0
  14. package/build/components/global-styles/global-styles-provider.js +7 -4
  15. package/build/components/global-styles/global-styles-provider.js.map +1 -1
  16. package/build/components/global-styles/preview.js +1 -1
  17. package/build/components/global-styles/preview.js.map +1 -1
  18. package/build/components/global-styles/screen-block-list.js +14 -8
  19. package/build/components/global-styles/screen-block-list.js.map +1 -1
  20. package/build/components/global-styles/screen-css.js +1 -1
  21. package/build/components/global-styles/screen-css.js.map +1 -1
  22. package/build/components/global-styles/screen-effects.js +15 -7
  23. package/build/components/global-styles/screen-effects.js.map +1 -1
  24. package/build/components/global-styles/screen-filters.js +2 -2
  25. package/build/components/global-styles/screen-filters.js.map +1 -1
  26. package/build/components/global-styles/screen-style-variations.js +8 -118
  27. package/build/components/global-styles/screen-style-variations.js.map +1 -1
  28. package/build/components/global-styles/style-variations-container.js +149 -0
  29. package/build/components/global-styles/style-variations-container.js.map +1 -0
  30. package/build/components/global-styles/ui.js +46 -2
  31. package/build/components/global-styles/ui.js.map +1 -1
  32. package/build/components/header-edit-mode/more-menu/index.js +1 -1
  33. package/build/components/header-edit-mode/more-menu/index.js.map +1 -1
  34. package/build/components/keyboard-shortcuts/index.js +0 -137
  35. package/build/components/keyboard-shortcuts/index.js.map +1 -1
  36. package/build/components/layout/index.js +8 -1
  37. package/build/components/layout/index.js.map +1 -1
  38. package/build/components/preferences-modal/index.js +4 -0
  39. package/build/components/preferences-modal/index.js.map +1 -1
  40. package/build/components/sidebar/index.js +4 -0
  41. package/build/components/sidebar/index.js.map +1 -1
  42. package/build/components/sidebar-navigation-screen/index.js +8 -6
  43. package/build/components/sidebar-navigation-screen/index.js.map +1 -1
  44. package/build/components/sidebar-navigation-screen-global-styles/index.js +58 -0
  45. package/build/components/sidebar-navigation-screen-global-styles/index.js.map +1 -0
  46. package/build/components/sidebar-navigation-screen-main/index.js +5 -0
  47. package/build/components/sidebar-navigation-screen-main/index.js.map +1 -1
  48. package/build/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js +114 -9
  49. package/build/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js.map +1 -1
  50. package/build/components/site-hub/index.js +4 -3
  51. package/build/components/site-hub/index.js.map +1 -1
  52. package/build/components/welcome-guide/styles.js +1 -1
  53. package/build/components/welcome-guide/styles.js.map +1 -1
  54. package/build/hooks/commands/index.js +19 -0
  55. package/build/hooks/commands/index.js.map +1 -0
  56. package/build/hooks/commands/use-navigation-commands.js +117 -0
  57. package/build/hooks/commands/use-navigation-commands.js.map +1 -0
  58. package/build/hooks/commands/use-wp-admin-commands.js +94 -0
  59. package/build/hooks/commands/use-wp-admin-commands.js.map +1 -0
  60. package/build/hooks/template-part-edit.js +2 -1
  61. package/build/hooks/template-part-edit.js.map +1 -1
  62. package/build/index.js +2 -1
  63. package/build/index.js.map +1 -1
  64. package/build/store/selectors.js +2 -1
  65. package/build/store/selectors.js.map +1 -1
  66. package/build-module/components/editor/index.js +6 -4
  67. package/build-module/components/editor/index.js.map +1 -1
  68. package/build-module/components/global-styles/border-panel.js +34 -1
  69. package/build-module/components/global-styles/border-panel.js.map +1 -1
  70. package/build-module/components/global-styles/context-menu.js +6 -6
  71. package/build-module/components/global-styles/context-menu.js.map +1 -1
  72. package/build-module/components/global-styles/dimensions-panel.js +11 -1
  73. package/build-module/components/global-styles/dimensions-panel.js.map +1 -1
  74. package/build-module/components/global-styles/effects-panel.js +43 -0
  75. package/build-module/components/global-styles/effects-panel.js.map +1 -0
  76. package/build-module/components/global-styles/filters-panel.js +35 -0
  77. package/build-module/components/global-styles/filters-panel.js.map +1 -0
  78. package/build-module/components/global-styles/global-styles-provider.js +8 -5
  79. package/build-module/components/global-styles/global-styles-provider.js.map +1 -1
  80. package/build-module/components/global-styles/preview.js +1 -1
  81. package/build-module/components/global-styles/preview.js.map +1 -1
  82. package/build-module/components/global-styles/screen-block-list.js +13 -8
  83. package/build-module/components/global-styles/screen-block-list.js.map +1 -1
  84. package/build-module/components/global-styles/screen-css.js +1 -1
  85. package/build-module/components/global-styles/screen-css.js.map +1 -1
  86. package/build-module/components/global-styles/screen-effects.js +13 -4
  87. package/build-module/components/global-styles/screen-effects.js.map +1 -1
  88. package/build-module/components/global-styles/screen-filters.js +2 -2
  89. package/build-module/components/global-styles/screen-filters.js.map +1 -1
  90. package/build-module/components/global-styles/screen-style-variations.js +11 -114
  91. package/build-module/components/global-styles/screen-style-variations.js.map +1 -1
  92. package/build-module/components/global-styles/style-variations-container.js +130 -0
  93. package/build-module/components/global-styles/style-variations-container.js.map +1 -0
  94. package/build-module/components/global-styles/ui.js +44 -3
  95. package/build-module/components/global-styles/ui.js.map +1 -1
  96. package/build-module/components/header-edit-mode/more-menu/index.js +1 -1
  97. package/build-module/components/header-edit-mode/more-menu/index.js.map +1 -1
  98. package/build-module/components/keyboard-shortcuts/index.js +1 -135
  99. package/build-module/components/keyboard-shortcuts/index.js.map +1 -1
  100. package/build-module/components/layout/index.js +6 -1
  101. package/build-module/components/layout/index.js.map +1 -1
  102. package/build-module/components/preferences-modal/index.js +4 -0
  103. package/build-module/components/preferences-modal/index.js.map +1 -1
  104. package/build-module/components/sidebar/index.js +3 -0
  105. package/build-module/components/sidebar/index.js.map +1 -1
  106. package/build-module/components/sidebar-navigation-screen/index.js +9 -7
  107. package/build-module/components/sidebar-navigation-screen/index.js.map +1 -1
  108. package/build-module/components/sidebar-navigation-screen-global-styles/index.js +41 -0
  109. package/build-module/components/sidebar-navigation-screen-global-styles/index.js.map +1 -0
  110. package/build-module/components/sidebar-navigation-screen-main/index.js +6 -1
  111. package/build-module/components/sidebar-navigation-screen-main/index.js.map +1 -1
  112. package/build-module/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js +113 -11
  113. package/build-module/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js.map +1 -1
  114. package/build-module/components/site-hub/index.js +3 -3
  115. package/build-module/components/site-hub/index.js.map +1 -1
  116. package/build-module/components/welcome-guide/styles.js +1 -1
  117. package/build-module/components/welcome-guide/styles.js.map +1 -1
  118. package/build-module/hooks/commands/index.js +10 -0
  119. package/build-module/hooks/commands/index.js.map +1 -0
  120. package/build-module/hooks/commands/use-navigation-commands.js +101 -0
  121. package/build-module/hooks/commands/use-navigation-commands.js.map +1 -0
  122. package/build-module/hooks/commands/use-wp-admin-commands.js +79 -0
  123. package/build-module/hooks/commands/use-wp-admin-commands.js.map +1 -0
  124. package/build-module/hooks/template-part-edit.js +2 -1
  125. package/build-module/hooks/template-part-edit.js.map +1 -1
  126. package/build-module/index.js +2 -1
  127. package/build-module/index.js.map +1 -1
  128. package/build-module/store/selectors.js +2 -1
  129. package/build-module/store/selectors.js.map +1 -1
  130. package/build-style/style-rtl.css +20 -46
  131. package/build-style/style.css +20 -46
  132. package/package.json +33 -31
  133. package/src/components/editor/index.js +11 -3
  134. package/src/components/global-styles/border-panel.js +32 -1
  135. package/src/components/global-styles/context-menu.js +6 -6
  136. package/src/components/global-styles/dimensions-panel.js +11 -0
  137. package/src/components/global-styles/effects-panel.js +40 -0
  138. package/src/components/global-styles/filters-panel.js +33 -0
  139. package/src/components/global-styles/global-styles-provider.js +4 -4
  140. package/src/components/global-styles/preview.js +1 -1
  141. package/src/components/global-styles/screen-block-list.js +9 -5
  142. package/src/components/global-styles/screen-css.js +1 -1
  143. package/src/components/global-styles/screen-effects.js +12 -5
  144. package/src/components/global-styles/screen-filters.js +2 -2
  145. package/src/components/global-styles/screen-style-variations.js +10 -129
  146. package/src/components/global-styles/style-variations-container.js +136 -0
  147. package/src/components/global-styles/style.scss +0 -39
  148. package/src/components/global-styles/ui.js +44 -2
  149. package/src/components/header-edit-mode/more-menu/index.js +1 -1
  150. package/src/components/keyboard-shortcuts/index.js +1 -155
  151. package/src/components/layout/index.js +4 -0
  152. package/src/components/preferences-modal/index.js +7 -0
  153. package/src/components/sidebar/index.js +4 -0
  154. package/src/components/sidebar-navigation-screen/index.js +10 -5
  155. package/src/components/sidebar-navigation-screen/style.scss +20 -5
  156. package/src/components/sidebar-navigation-screen-global-styles/index.js +41 -0
  157. package/src/components/sidebar-navigation-screen-main/index.js +9 -1
  158. package/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js +134 -9
  159. package/src/components/site-hub/index.js +3 -3
  160. package/src/components/start-template-options/style.scss +7 -14
  161. package/src/components/welcome-guide/styles.js +1 -1
  162. package/src/hooks/commands/index.js +10 -0
  163. package/src/hooks/commands/use-navigation-commands.js +103 -0
  164. package/src/hooks/commands/use-wp-admin-commands.js +77 -0
  165. package/src/hooks/template-part-edit.js +1 -0
  166. package/src/index.js +1 -0
  167. package/src/store/selectors.js +2 -1
  168. package/build/components/global-styles/duotone-panel.js +0 -78
  169. package/build/components/global-styles/duotone-panel.js.map +0 -1
  170. package/build/components/global-styles/filter-utils.js +0 -17
  171. package/build/components/global-styles/filter-utils.js.map +0 -1
  172. package/build/components/global-styles/shadow-panel.js +0 -197
  173. package/build/components/global-styles/shadow-panel.js.map +0 -1
  174. package/build-module/components/global-styles/duotone-panel.js +0 -67
  175. package/build-module/components/global-styles/duotone-panel.js.map +0 -1
  176. package/build-module/components/global-styles/filter-utils.js +0 -9
  177. package/build-module/components/global-styles/filter-utils.js.map +0 -1
  178. package/build-module/components/global-styles/shadow-panel.js +0 -178
  179. package/build-module/components/global-styles/shadow-panel.js.map +0 -1
  180. package/src/components/global-styles/duotone-panel.js +0 -82
  181. package/src/components/global-styles/filter-utils.js +0 -9
  182. 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,9 +0,0 @@
1
- /**
2
- * Internal dependencies
3
- */
4
- import { useSupportedStyles } from './hooks';
5
- export function useHasFilterPanel(name) {
6
- const supports = useSupportedStyles(name);
7
- return supports.includes('filter');
8
- }
9
- //# sourceMappingURL=filter-utils.js.map
@@ -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,9 +0,0 @@
1
- /**
2
- * Internal dependencies
3
- */
4
- import { useSupportedStyles } from './hooks';
5
-
6
- export function useHasFilterPanel( name ) {
7
- const supports = useSupportedStyles( name );
8
- return supports.includes( 'filter' );
9
- }
@@ -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
- }