@wordpress/edit-site 5.6.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 (279) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/build/components/add-new-template/new-template-part.js +3 -11
  3. package/build/components/add-new-template/new-template-part.js.map +1 -1
  4. package/build/components/add-new-template/new-template.js +7 -7
  5. package/build/components/add-new-template/new-template.js.map +1 -1
  6. package/build/components/add-new-template/utils.js +1 -1
  7. package/build/components/add-new-template/utils.js.map +1 -1
  8. package/build/components/block-editor/editor-canvas.js +7 -10
  9. package/build/components/block-editor/editor-canvas.js.map +1 -1
  10. package/build/components/editor/index.js +6 -4
  11. package/build/components/editor/index.js.map +1 -1
  12. package/build/components/global-styles/border-panel.js +35 -1
  13. package/build/components/global-styles/border-panel.js.map +1 -1
  14. package/build/components/global-styles/context-menu.js +8 -11
  15. package/build/components/global-styles/context-menu.js.map +1 -1
  16. package/build/components/global-styles/dimensions-panel.js +11 -1
  17. package/build/components/global-styles/dimensions-panel.js.map +1 -1
  18. package/build/components/global-styles/effects-panel.js +53 -0
  19. package/build/components/global-styles/effects-panel.js.map +1 -0
  20. package/build/components/global-styles/filters-panel.js +45 -0
  21. package/build/components/global-styles/filters-panel.js.map +1 -0
  22. package/build/components/global-styles/global-styles-provider.js +7 -4
  23. package/build/components/global-styles/global-styles-provider.js.map +1 -1
  24. package/build/components/global-styles/hooks.js +1 -58
  25. package/build/components/global-styles/hooks.js.map +1 -1
  26. package/build/components/global-styles/preview.js +4 -5
  27. package/build/components/global-styles/preview.js.map +1 -1
  28. package/build/components/global-styles/screen-block-list.js +17 -12
  29. package/build/components/global-styles/screen-block-list.js.map +1 -1
  30. package/build/components/global-styles/screen-colors.js +22 -211
  31. package/build/components/global-styles/screen-colors.js.map +1 -1
  32. package/build/components/global-styles/screen-css.js +1 -1
  33. package/build/components/global-styles/screen-css.js.map +1 -1
  34. package/build/components/global-styles/screen-effects.js +15 -7
  35. package/build/components/global-styles/screen-effects.js.map +1 -1
  36. package/build/components/global-styles/screen-filters.js +2 -2
  37. package/build/components/global-styles/screen-filters.js.map +1 -1
  38. package/build/components/global-styles/screen-style-variations.js +8 -118
  39. package/build/components/global-styles/screen-style-variations.js.map +1 -1
  40. package/build/components/global-styles/screen-typography-element.js +4 -0
  41. package/build/components/global-styles/screen-typography-element.js.map +1 -1
  42. package/build/components/global-styles/screen-typography.js +5 -0
  43. package/build/components/global-styles/screen-typography.js.map +1 -1
  44. package/build/components/global-styles/style-variations-container.js +149 -0
  45. package/build/components/global-styles/style-variations-container.js.map +1 -0
  46. package/build/components/global-styles/ui.js +51 -37
  47. package/build/components/global-styles/ui.js.map +1 -1
  48. package/build/components/global-styles-renderer/index.js +1 -2
  49. package/build/components/global-styles-renderer/index.js.map +1 -1
  50. package/build/components/header-edit-mode/more-menu/index.js +1 -1
  51. package/build/components/header-edit-mode/more-menu/index.js.map +1 -1
  52. package/build/components/keyboard-shortcuts/index.js +0 -137
  53. package/build/components/keyboard-shortcuts/index.js.map +1 -1
  54. package/build/components/layout/index.js +8 -1
  55. package/build/components/layout/index.js.map +1 -1
  56. package/build/components/preferences-modal/index.js +4 -0
  57. package/build/components/preferences-modal/index.js.map +1 -1
  58. package/build/components/secondary-sidebar/list-view-sidebar.js +6 -1
  59. package/build/components/secondary-sidebar/list-view-sidebar.js.map +1 -1
  60. package/build/components/sidebar/index.js +4 -0
  61. package/build/components/sidebar/index.js.map +1 -1
  62. package/build/components/sidebar-navigation-screen/index.js +8 -6
  63. package/build/components/sidebar-navigation-screen/index.js.map +1 -1
  64. package/build/components/sidebar-navigation-screen-global-styles/index.js +58 -0
  65. package/build/components/sidebar-navigation-screen-global-styles/index.js.map +1 -0
  66. package/build/components/sidebar-navigation-screen-main/index.js +5 -0
  67. package/build/components/sidebar-navigation-screen-main/index.js.map +1 -1
  68. package/build/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js +114 -9
  69. package/build/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js.map +1 -1
  70. package/build/components/site-hub/index.js +4 -3
  71. package/build/components/site-hub/index.js.map +1 -1
  72. package/build/components/start-template-options/index.js +44 -9
  73. package/build/components/start-template-options/index.js.map +1 -1
  74. package/build/components/style-book/index.js +6 -7
  75. package/build/components/style-book/index.js.map +1 -1
  76. package/build/components/welcome-guide/styles.js +1 -1
  77. package/build/components/welcome-guide/styles.js.map +1 -1
  78. package/build/hooks/commands/index.js +19 -0
  79. package/build/hooks/commands/index.js.map +1 -0
  80. package/build/hooks/commands/use-navigation-commands.js +117 -0
  81. package/build/hooks/commands/use-navigation-commands.js.map +1 -0
  82. package/build/hooks/commands/use-wp-admin-commands.js +94 -0
  83. package/build/hooks/commands/use-wp-admin-commands.js.map +1 -0
  84. package/build/hooks/push-changes-to-global-styles/index.js +1 -0
  85. package/build/hooks/push-changes-to-global-styles/index.js.map +1 -1
  86. package/build/hooks/template-part-edit.js +2 -1
  87. package/build/hooks/template-part-edit.js.map +1 -1
  88. package/build/index.js +2 -1
  89. package/build/index.js.map +1 -1
  90. package/build/store/selectors.js +2 -1
  91. package/build/store/selectors.js.map +1 -1
  92. package/build-module/components/add-new-template/new-template-part.js +3 -9
  93. package/build-module/components/add-new-template/new-template-part.js.map +1 -1
  94. package/build-module/components/add-new-template/new-template.js +7 -7
  95. package/build-module/components/add-new-template/new-template.js.map +1 -1
  96. package/build-module/components/add-new-template/utils.js +1 -1
  97. package/build-module/components/add-new-template/utils.js.map +1 -1
  98. package/build-module/components/block-editor/editor-canvas.js +8 -11
  99. package/build-module/components/block-editor/editor-canvas.js.map +1 -1
  100. package/build-module/components/editor/index.js +6 -4
  101. package/build-module/components/editor/index.js.map +1 -1
  102. package/build-module/components/global-styles/border-panel.js +34 -1
  103. package/build-module/components/global-styles/border-panel.js.map +1 -1
  104. package/build-module/components/global-styles/context-menu.js +8 -8
  105. package/build-module/components/global-styles/context-menu.js.map +1 -1
  106. package/build-module/components/global-styles/dimensions-panel.js +11 -1
  107. package/build-module/components/global-styles/dimensions-panel.js.map +1 -1
  108. package/build-module/components/global-styles/effects-panel.js +43 -0
  109. package/build-module/components/global-styles/effects-panel.js.map +1 -0
  110. package/build-module/components/global-styles/filters-panel.js +35 -0
  111. package/build-module/components/global-styles/filters-panel.js.map +1 -0
  112. package/build-module/components/global-styles/global-styles-provider.js +8 -5
  113. package/build-module/components/global-styles/global-styles-provider.js.map +1 -1
  114. package/build-module/components/global-styles/hooks.js +1 -52
  115. package/build-module/components/global-styles/hooks.js.map +1 -1
  116. package/build-module/components/global-styles/preview.js +4 -5
  117. package/build-module/components/global-styles/preview.js.map +1 -1
  118. package/build-module/components/global-styles/screen-block-list.js +16 -11
  119. package/build-module/components/global-styles/screen-block-list.js.map +1 -1
  120. package/build-module/components/global-styles/screen-colors.js +23 -208
  121. package/build-module/components/global-styles/screen-colors.js.map +1 -1
  122. package/build-module/components/global-styles/screen-css.js +1 -1
  123. package/build-module/components/global-styles/screen-css.js.map +1 -1
  124. package/build-module/components/global-styles/screen-effects.js +13 -4
  125. package/build-module/components/global-styles/screen-effects.js.map +1 -1
  126. package/build-module/components/global-styles/screen-filters.js +2 -2
  127. package/build-module/components/global-styles/screen-filters.js.map +1 -1
  128. package/build-module/components/global-styles/screen-style-variations.js +11 -114
  129. package/build-module/components/global-styles/screen-style-variations.js.map +1 -1
  130. package/build-module/components/global-styles/screen-typography-element.js +4 -0
  131. package/build-module/components/global-styles/screen-typography-element.js.map +1 -1
  132. package/build-module/components/global-styles/screen-typography.js +5 -0
  133. package/build-module/components/global-styles/screen-typography.js.map +1 -1
  134. package/build-module/components/global-styles/style-variations-container.js +130 -0
  135. package/build-module/components/global-styles/style-variations-container.js.map +1 -0
  136. package/build-module/components/global-styles/ui.js +49 -33
  137. package/build-module/components/global-styles/ui.js.map +1 -1
  138. package/build-module/components/global-styles-renderer/index.js +1 -2
  139. package/build-module/components/global-styles-renderer/index.js.map +1 -1
  140. package/build-module/components/header-edit-mode/more-menu/index.js +1 -1
  141. package/build-module/components/header-edit-mode/more-menu/index.js.map +1 -1
  142. package/build-module/components/keyboard-shortcuts/index.js +1 -135
  143. package/build-module/components/keyboard-shortcuts/index.js.map +1 -1
  144. package/build-module/components/layout/index.js +6 -1
  145. package/build-module/components/layout/index.js.map +1 -1
  146. package/build-module/components/preferences-modal/index.js +4 -0
  147. package/build-module/components/preferences-modal/index.js.map +1 -1
  148. package/build-module/components/secondary-sidebar/list-view-sidebar.js +6 -2
  149. package/build-module/components/secondary-sidebar/list-view-sidebar.js.map +1 -1
  150. package/build-module/components/sidebar/index.js +3 -0
  151. package/build-module/components/sidebar/index.js.map +1 -1
  152. package/build-module/components/sidebar-navigation-screen/index.js +9 -7
  153. package/build-module/components/sidebar-navigation-screen/index.js.map +1 -1
  154. package/build-module/components/sidebar-navigation-screen-global-styles/index.js +41 -0
  155. package/build-module/components/sidebar-navigation-screen-global-styles/index.js.map +1 -0
  156. package/build-module/components/sidebar-navigation-screen-main/index.js +6 -1
  157. package/build-module/components/sidebar-navigation-screen-main/index.js.map +1 -1
  158. package/build-module/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js +113 -11
  159. package/build-module/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js.map +1 -1
  160. package/build-module/components/site-hub/index.js +3 -3
  161. package/build-module/components/site-hub/index.js.map +1 -1
  162. package/build-module/components/start-template-options/index.js +45 -10
  163. package/build-module/components/start-template-options/index.js.map +1 -1
  164. package/build-module/components/style-book/index.js +7 -8
  165. package/build-module/components/style-book/index.js.map +1 -1
  166. package/build-module/components/welcome-guide/styles.js +1 -1
  167. package/build-module/components/welcome-guide/styles.js.map +1 -1
  168. package/build-module/hooks/commands/index.js +10 -0
  169. package/build-module/hooks/commands/index.js.map +1 -0
  170. package/build-module/hooks/commands/use-navigation-commands.js +101 -0
  171. package/build-module/hooks/commands/use-navigation-commands.js.map +1 -0
  172. package/build-module/hooks/commands/use-wp-admin-commands.js +79 -0
  173. package/build-module/hooks/commands/use-wp-admin-commands.js.map +1 -0
  174. package/build-module/hooks/push-changes-to-global-styles/index.js +1 -0
  175. package/build-module/hooks/push-changes-to-global-styles/index.js.map +1 -1
  176. package/build-module/hooks/template-part-edit.js +2 -1
  177. package/build-module/hooks/template-part-edit.js.map +1 -1
  178. package/build-module/index.js +2 -1
  179. package/build-module/index.js.map +1 -1
  180. package/build-module/store/selectors.js +2 -1
  181. package/build-module/store/selectors.js.map +1 -1
  182. package/build-style/style-rtl.css +24 -63
  183. package/build-style/style.css +24 -63
  184. package/package.json +33 -31
  185. package/src/components/add-new-template/new-template-part.js +1 -6
  186. package/src/components/add-new-template/new-template.js +3 -6
  187. package/src/components/add-new-template/utils.js +1 -1
  188. package/src/components/block-editor/editor-canvas.js +13 -23
  189. package/src/components/editor/index.js +11 -3
  190. package/src/components/global-styles/border-panel.js +32 -1
  191. package/src/components/global-styles/context-menu.js +8 -8
  192. package/src/components/global-styles/dimensions-panel.js +11 -0
  193. package/src/components/global-styles/effects-panel.js +40 -0
  194. package/src/components/global-styles/filters-panel.js +33 -0
  195. package/src/components/global-styles/global-styles-provider.js +4 -4
  196. package/src/components/global-styles/hooks.js +1 -78
  197. package/src/components/global-styles/preview.js +2 -2
  198. package/src/components/global-styles/screen-block-list.js +11 -7
  199. package/src/components/global-styles/screen-colors.js +25 -229
  200. package/src/components/global-styles/screen-css.js +1 -1
  201. package/src/components/global-styles/screen-effects.js +12 -5
  202. package/src/components/global-styles/screen-filters.js +2 -2
  203. package/src/components/global-styles/screen-style-variations.js +10 -129
  204. package/src/components/global-styles/screen-typography-element.js +4 -0
  205. package/src/components/global-styles/screen-typography.js +6 -0
  206. package/src/components/global-styles/stories/index.js +425 -0
  207. package/src/components/global-styles/style-variations-container.js +136 -0
  208. package/src/components/global-styles/style.scss +4 -57
  209. package/src/components/global-styles/ui.js +50 -33
  210. package/src/components/global-styles-renderer/index.js +1 -2
  211. package/src/components/header-edit-mode/more-menu/index.js +1 -1
  212. package/src/components/keyboard-shortcuts/index.js +1 -155
  213. package/src/components/layout/index.js +4 -0
  214. package/src/components/preferences-modal/index.js +7 -0
  215. package/src/components/secondary-sidebar/list-view-sidebar.js +4 -3
  216. package/src/components/sidebar/index.js +4 -0
  217. package/src/components/sidebar-navigation-screen/index.js +10 -5
  218. package/src/components/sidebar-navigation-screen/style.scss +20 -5
  219. package/src/components/sidebar-navigation-screen-global-styles/index.js +41 -0
  220. package/src/components/sidebar-navigation-screen-main/index.js +9 -1
  221. package/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js +134 -9
  222. package/src/components/site-hub/index.js +3 -3
  223. package/src/components/start-template-options/index.js +40 -8
  224. package/src/components/start-template-options/style.scss +7 -14
  225. package/src/components/style-book/index.js +10 -16
  226. package/src/components/style-book/style.scss +1 -1
  227. package/src/components/welcome-guide/styles.js +1 -1
  228. package/src/hooks/commands/index.js +10 -0
  229. package/src/hooks/commands/use-navigation-commands.js +103 -0
  230. package/src/hooks/commands/use-wp-admin-commands.js +77 -0
  231. package/src/hooks/push-changes-to-global-styles/index.js +1 -0
  232. package/src/hooks/template-part-edit.js +1 -0
  233. package/src/index.js +1 -0
  234. package/src/store/selectors.js +2 -1
  235. package/build/components/global-styles/color-utils.js +0 -17
  236. package/build/components/global-styles/color-utils.js.map +0 -1
  237. package/build/components/global-styles/duotone-panel.js +0 -78
  238. package/build/components/global-styles/duotone-panel.js.map +0 -1
  239. package/build/components/global-styles/filter-utils.js +0 -17
  240. package/build/components/global-styles/filter-utils.js.map +0 -1
  241. package/build/components/global-styles/screen-background-color.js +0 -114
  242. package/build/components/global-styles/screen-background-color.js.map +0 -1
  243. package/build/components/global-styles/screen-button-color.js +0 -88
  244. package/build/components/global-styles/screen-button-color.js.map +0 -1
  245. package/build/components/global-styles/screen-heading-color.js +0 -165
  246. package/build/components/global-styles/screen-heading-color.js.map +0 -1
  247. package/build/components/global-styles/screen-link-color.js +0 -105
  248. package/build/components/global-styles/screen-link-color.js.map +0 -1
  249. package/build/components/global-styles/screen-text-color.js +0 -71
  250. package/build/components/global-styles/screen-text-color.js.map +0 -1
  251. package/build/components/global-styles/shadow-panel.js +0 -197
  252. package/build/components/global-styles/shadow-panel.js.map +0 -1
  253. package/build-module/components/global-styles/color-utils.js +0 -9
  254. package/build-module/components/global-styles/color-utils.js.map +0 -1
  255. package/build-module/components/global-styles/duotone-panel.js +0 -67
  256. package/build-module/components/global-styles/duotone-panel.js.map +0 -1
  257. package/build-module/components/global-styles/filter-utils.js +0 -9
  258. package/build-module/components/global-styles/filter-utils.js.map +0 -1
  259. package/build-module/components/global-styles/screen-background-color.js +0 -97
  260. package/build-module/components/global-styles/screen-background-color.js.map +0 -1
  261. package/build-module/components/global-styles/screen-button-color.js +0 -73
  262. package/build-module/components/global-styles/screen-button-color.js.map +0 -1
  263. package/build-module/components/global-styles/screen-heading-color.js +0 -149
  264. package/build-module/components/global-styles/screen-heading-color.js.map +0 -1
  265. package/build-module/components/global-styles/screen-link-color.js +0 -89
  266. package/build-module/components/global-styles/screen-link-color.js.map +0 -1
  267. package/build-module/components/global-styles/screen-text-color.js +0 -56
  268. package/build-module/components/global-styles/screen-text-color.js.map +0 -1
  269. package/build-module/components/global-styles/shadow-panel.js +0 -178
  270. package/build-module/components/global-styles/shadow-panel.js.map +0 -1
  271. package/src/components/global-styles/color-utils.js +0 -14
  272. package/src/components/global-styles/duotone-panel.js +0 -82
  273. package/src/components/global-styles/filter-utils.js +0 -9
  274. package/src/components/global-styles/screen-background-color.js +0 -132
  275. package/src/components/global-styles/screen-button-color.js +0 -104
  276. package/src/components/global-styles/screen-heading-color.js +0 -206
  277. package/src/components/global-styles/screen-link-color.js +0 -124
  278. package/src/components/global-styles/screen-text-color.js +0 -62
  279. package/src/components/global-styles/shadow-panel.js +0 -178
@@ -1,149 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
2
- import { createElement, Fragment } from "@wordpress/element";
3
-
4
- /**
5
- * WordPress dependencies
6
- */
7
- import { sprintf, __ } from '@wordpress/i18n';
8
- import { __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption } from '@wordpress/components';
9
- import { __experimentalColorGradientControl as ColorGradientControl, privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
10
- import { useState } from '@wordpress/element';
11
- /**
12
- * Internal dependencies
13
- */
14
-
15
- import ScreenHeader from './header';
16
- import { useSupportedStyles, useColorsPerOrigin, useGradientsPerOrigin } from './hooks';
17
- import { unlock } from '../../private-apis';
18
- const {
19
- useGlobalSetting,
20
- useGlobalStyle
21
- } = unlock(blockEditorPrivateApis);
22
-
23
- function ScreenHeadingColor(_ref) {
24
- let {
25
- name,
26
- variation = ''
27
- } = _ref;
28
- const prefix = variation ? `variations.${variation}.` : '';
29
- const [selectedLevel, setCurrentTab] = useState('heading');
30
- const supports = useSupportedStyles(name);
31
- const [areCustomSolidsEnabled] = useGlobalSetting('color.custom', name);
32
- const [areCustomGradientsEnabled] = useGlobalSetting('color.customGradient', name);
33
- const [isTextEnabled] = useGlobalSetting('color.text', name);
34
- const [isBackgroundEnabled] = useGlobalSetting('color.background', name);
35
- const colorsPerOrigin = useColorsPerOrigin(name);
36
- const gradientsPerOrigin = useGradientsPerOrigin(name);
37
- const hasTextColor = supports.includes('color') && isTextEnabled && (colorsPerOrigin.length > 0 || areCustomSolidsEnabled);
38
- const hasBackgroundColor = supports.includes('backgroundColor') && isBackgroundEnabled && (colorsPerOrigin.length > 0 || areCustomSolidsEnabled);
39
- const hasGradientColor = supports.includes('background') && (gradientsPerOrigin.length > 0 || areCustomGradientsEnabled);
40
- const [color, setColor] = useGlobalStyle(prefix + 'elements.' + selectedLevel + '.color.text', name);
41
- const [userColor] = useGlobalStyle(prefix + 'elements.' + selectedLevel + '.color.text', name, 'user');
42
- const [backgroundColor, setBackgroundColor] = useGlobalStyle(prefix + 'elements.' + selectedLevel + '.color.background', name);
43
- const [userBackgroundColor] = useGlobalStyle(prefix + 'elements.' + selectedLevel + '.color.background', name, 'user');
44
- const [gradient, setGradient] = useGlobalStyle(prefix + 'elements.' + selectedLevel + '.color.gradient', name);
45
- const [userGradient] = useGlobalStyle(prefix + 'elements.' + selectedLevel + '.color.gradient', name, 'user');
46
-
47
- if (!hasTextColor && !hasBackgroundColor && !hasGradientColor) {
48
- return null;
49
- }
50
-
51
- let backgroundSettings = {};
52
-
53
- if (hasBackgroundColor) {
54
- backgroundSettings = {
55
- colorValue: backgroundColor,
56
- onColorChange: setBackgroundColor
57
- };
58
-
59
- if (backgroundColor) {
60
- backgroundSettings.clearable = backgroundColor === userBackgroundColor;
61
- }
62
- }
63
-
64
- let gradientSettings = {};
65
-
66
- if (hasGradientColor) {
67
- gradientSettings = {
68
- gradientValue: gradient,
69
- onGradientChange: setGradient
70
- };
71
-
72
- if (gradient) {
73
- gradientSettings.clearable = gradient === userGradient;
74
- }
75
- }
76
-
77
- const controlProps = { ...backgroundSettings,
78
- ...gradientSettings
79
- };
80
- return createElement(Fragment, null, createElement(ScreenHeader, {
81
- title: __('Headings'),
82
- description: __('Set the default color used for headings across the site.')
83
- }), createElement("div", {
84
- className: "edit-site-global-styles-screen-heading-color"
85
- }, createElement("h3", null, __('Select heading level')), createElement(ToggleGroupControl, {
86
- __nextHasNoMarginBottom: true,
87
- label: __('Select heading level'),
88
- hideLabelFromVision: true,
89
- value: selectedLevel,
90
- onChange: setCurrentTab,
91
- isBlock: true
92
- }, createElement(ToggleGroupControlOption, {
93
- value: "heading"
94
- /* translators: 'All' refers to selecting all heading levels
95
- and applying the same style to h1-h6. */
96
- ,
97
- label: __('All')
98
- }), createElement(ToggleGroupControlOption, {
99
- value: "h1",
100
- label: __('H1')
101
- }), createElement(ToggleGroupControlOption, {
102
- value: "h2",
103
- label: __('H2')
104
- }), createElement(ToggleGroupControlOption, {
105
- value: "h3",
106
- label: __('H3')
107
- }), createElement(ToggleGroupControlOption, {
108
- value: "h4",
109
- label: __('H4')
110
- }), createElement(ToggleGroupControlOption, {
111
- value: "h5",
112
- label: __('H5')
113
- }), createElement(ToggleGroupControlOption, {
114
- value: "h6",
115
- label: __('H6')
116
- }))), hasTextColor && createElement("div", {
117
- className: "edit-site-global-styles-screen-heading-color"
118
- }, createElement("h3", null, selectedLevel === 'heading' ? __('Text color for all heading levels') : sprintf(
119
- /* translators: %s: heading level (h1-h6) */
120
- __('Text color for %s'), selectedLevel.toUpperCase())), createElement(ColorGradientControl, {
121
- className: "edit-site-screen-heading-text-color__control",
122
- colors: colorsPerOrigin,
123
- disableCustomColors: !areCustomSolidsEnabled,
124
- showTitle: false,
125
- enableAlpha: true,
126
- __experimentalIsRenderedInSidebar: true,
127
- colorValue: color,
128
- onColorChange: setColor,
129
- clearable: color === userColor,
130
- headingLevel: 4
131
- })), hasBackgroundColor && createElement("div", {
132
- className: "edit-site-global-styles-screen-heading-color"
133
- }, createElement("h3", null, selectedLevel === 'heading' ? __('Background color for all heading levels') : sprintf(
134
- /* translators: %s: heading level (h1-h6) */
135
- __('Background color for %s'), selectedLevel.toUpperCase())), createElement(ColorGradientControl, _extends({
136
- className: "edit-site-screen-heading-background-color__control",
137
- colors: colorsPerOrigin,
138
- gradients: gradientsPerOrigin,
139
- disableCustomColors: !areCustomSolidsEnabled,
140
- disableCustomGradients: !areCustomGradientsEnabled,
141
- showTitle: false,
142
- enableAlpha: true,
143
- __experimentalIsRenderedInSidebar: true,
144
- headingLevel: 4
145
- }, controlProps))));
146
- }
147
-
148
- export default ScreenHeadingColor;
149
- //# sourceMappingURL=screen-heading-color.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-heading-color.js"],"names":["sprintf","__","__experimentalToggleGroupControl","ToggleGroupControl","__experimentalToggleGroupControlOption","ToggleGroupControlOption","__experimentalColorGradientControl","ColorGradientControl","privateApis","blockEditorPrivateApis","useState","ScreenHeader","useSupportedStyles","useColorsPerOrigin","useGradientsPerOrigin","unlock","useGlobalSetting","useGlobalStyle","ScreenHeadingColor","name","variation","prefix","selectedLevel","setCurrentTab","supports","areCustomSolidsEnabled","areCustomGradientsEnabled","isTextEnabled","isBackgroundEnabled","colorsPerOrigin","gradientsPerOrigin","hasTextColor","includes","length","hasBackgroundColor","hasGradientColor","color","setColor","userColor","backgroundColor","setBackgroundColor","userBackgroundColor","gradient","setGradient","userGradient","backgroundSettings","colorValue","onColorChange","clearable","gradientSettings","gradientValue","onGradientChange","controlProps","toUpperCase"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { sprintf, __ } from '@wordpress/i18n';\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n} from '@wordpress/components';\nimport {\n\t__experimentalColorGradientControl as ColorGradientControl,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tuseSupportedStyles,\n\tuseColorsPerOrigin,\n\tuseGradientsPerOrigin,\n} from './hooks';\nimport { unlock } from '../../private-apis';\n\nconst { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nfunction ScreenHeadingColor( { name, variation = '' } ) {\n\tconst prefix = variation ? `variations.${ variation }.` : '';\n\tconst [ selectedLevel, setCurrentTab ] = useState( 'heading' );\n\tconst supports = useSupportedStyles( name );\n\tconst [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );\n\tconst [ areCustomGradientsEnabled ] = useGlobalSetting(\n\t\t'color.customGradient',\n\t\tname\n\t);\n\tconst [ isTextEnabled ] = useGlobalSetting( 'color.text', name );\n\tconst [ isBackgroundEnabled ] = useGlobalSetting(\n\t\t'color.background',\n\t\tname\n\t);\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\tconst gradientsPerOrigin = useGradientsPerOrigin( name );\n\n\tconst hasTextColor =\n\t\tsupports.includes( 'color' ) &&\n\t\tisTextEnabled &&\n\t\t( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );\n\n\tconst hasBackgroundColor =\n\t\tsupports.includes( 'backgroundColor' ) &&\n\t\tisBackgroundEnabled &&\n\t\t( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );\n\tconst hasGradientColor =\n\t\tsupports.includes( 'background' ) &&\n\t\t( gradientsPerOrigin.length > 0 || areCustomGradientsEnabled );\n\n\tconst [ color, setColor ] = useGlobalStyle(\n\t\tprefix + 'elements.' + selectedLevel + '.color.text',\n\t\tname\n\t);\n\tconst [ userColor ] = useGlobalStyle(\n\t\tprefix + 'elements.' + selectedLevel + '.color.text',\n\t\tname,\n\t\t'user'\n\t);\n\n\tconst [ backgroundColor, setBackgroundColor ] = useGlobalStyle(\n\t\tprefix + 'elements.' + selectedLevel + '.color.background',\n\t\tname\n\t);\n\tconst [ userBackgroundColor ] = useGlobalStyle(\n\t\tprefix + 'elements.' + selectedLevel + '.color.background',\n\t\tname,\n\t\t'user'\n\t);\n\tconst [ gradient, setGradient ] = useGlobalStyle(\n\t\tprefix + 'elements.' + selectedLevel + '.color.gradient',\n\t\tname\n\t);\n\tconst [ userGradient ] = useGlobalStyle(\n\t\tprefix + 'elements.' + selectedLevel + '.color.gradient',\n\t\tname,\n\t\t'user'\n\t);\n\n\tif ( ! hasTextColor && ! hasBackgroundColor && ! hasGradientColor ) {\n\t\treturn null;\n\t}\n\n\tlet backgroundSettings = {};\n\tif ( hasBackgroundColor ) {\n\t\tbackgroundSettings = {\n\t\t\tcolorValue: backgroundColor,\n\t\t\tonColorChange: setBackgroundColor,\n\t\t};\n\t\tif ( backgroundColor ) {\n\t\t\tbackgroundSettings.clearable =\n\t\t\t\tbackgroundColor === userBackgroundColor;\n\t\t}\n\t}\n\n\tlet gradientSettings = {};\n\tif ( hasGradientColor ) {\n\t\tgradientSettings = {\n\t\t\tgradientValue: gradient,\n\t\t\tonGradientChange: setGradient,\n\t\t};\n\t\tif ( gradient ) {\n\t\t\tgradientSettings.clearable = gradient === userGradient;\n\t\t}\n\t}\n\n\tconst controlProps = {\n\t\t...backgroundSettings,\n\t\t...gradientSettings,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Headings' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the default color used for headings across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<div className=\"edit-site-global-styles-screen-heading-color\">\n\t\t\t\t<h3>{ __( 'Select heading level' ) }</h3>\n\n\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tlabel={ __( 'Select heading level' ) }\n\t\t\t\t\thideLabelFromVision={ true }\n\t\t\t\t\tvalue={ selectedLevel }\n\t\t\t\t\tonChange={ setCurrentTab }\n\t\t\t\t\tisBlock\n\t\t\t\t>\n\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\tvalue=\"heading\"\n\t\t\t\t\t\t/* translators: 'All' refers to selecting all heading levels\n\t\t\t\t\t\tand applying the same style to h1-h6. */\n\t\t\t\t\t\tlabel={ __( 'All' ) }\n\t\t\t\t\t/>\n\t\t\t\t\t<ToggleGroupControlOption value=\"h1\" label={ __( 'H1' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h2\" label={ __( 'H2' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h3\" label={ __( 'H3' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h4\" label={ __( 'H4' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h5\" label={ __( 'H5' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h6\" label={ __( 'H6' ) } />\n\t\t\t\t</ToggleGroupControl>\n\t\t\t</div>\n\t\t\t{ hasTextColor && (\n\t\t\t\t<div className=\"edit-site-global-styles-screen-heading-color\">\n\t\t\t\t\t<h3>\n\t\t\t\t\t\t{ selectedLevel === 'heading'\n\t\t\t\t\t\t\t? __( 'Text color for all heading levels' )\n\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: heading level (h1-h6) */\n\t\t\t\t\t\t\t\t\t__( 'Text color for %s' ),\n\t\t\t\t\t\t\t\t\tselectedLevel.toUpperCase()\n\t\t\t\t\t\t\t ) }\n\t\t\t\t\t</h3>\n\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\tclassName=\"edit-site-screen-heading-text-color__control\"\n\t\t\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t\t\tshowTitle={ false }\n\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\tcolorValue={ color }\n\t\t\t\t\t\tonColorChange={ setColor }\n\t\t\t\t\t\tclearable={ color === userColor }\n\t\t\t\t\t\theadingLevel={ 4 }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ hasBackgroundColor && (\n\t\t\t\t<div className=\"edit-site-global-styles-screen-heading-color\">\n\t\t\t\t\t<h3>\n\t\t\t\t\t\t{ selectedLevel === 'heading'\n\t\t\t\t\t\t\t? __( 'Background color for all heading levels' )\n\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: heading level (h1-h6) */\n\t\t\t\t\t\t\t\t\t__( 'Background color for %s' ),\n\t\t\t\t\t\t\t\t\tselectedLevel.toUpperCase()\n\t\t\t\t\t\t\t ) }\n\t\t\t\t\t</h3>\n\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\tclassName=\"edit-site-screen-heading-background-color__control\"\n\t\t\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\t\t\tgradients={ gradientsPerOrigin }\n\t\t\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t\t\tdisableCustomGradients={ ! areCustomGradientsEnabled }\n\t\t\t\t\t\tshowTitle={ false }\n\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\theadingLevel={ 4 }\n\t\t\t\t\t\t{ ...controlProps }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenHeadingColor;\n"]}
@@ -1,89 +0,0 @@
1
- import { createElement, Fragment } from "@wordpress/element";
2
-
3
- /**
4
- * WordPress dependencies
5
- */
6
- import { __ } from '@wordpress/i18n';
7
- import { __experimentalColorGradientControl as ColorGradientControl, privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
8
- import { TabPanel } from '@wordpress/components';
9
- /**
10
- * Internal dependencies
11
- */
12
-
13
- import ScreenHeader from './header';
14
- import { useSupportedStyles, useColorsPerOrigin } from './hooks';
15
- import { unlock } from '../../private-apis';
16
- const {
17
- useGlobalSetting,
18
- useGlobalStyle
19
- } = unlock(blockEditorPrivateApis);
20
-
21
- function ScreenLinkColor(_ref) {
22
- let {
23
- name,
24
- variation = ''
25
- } = _ref;
26
- const prefix = variation ? `variations.${variation}.` : '';
27
- const supports = useSupportedStyles(name);
28
- const [areCustomSolidsEnabled] = useGlobalSetting('color.custom', name);
29
- const colorsPerOrigin = useColorsPerOrigin(name);
30
- const [isLinkEnabled] = useGlobalSetting('color.link', name);
31
- const hasLinkColor = supports.includes('linkColor') && isLinkEnabled && (colorsPerOrigin.length > 0 || areCustomSolidsEnabled);
32
- const pseudoStates = {
33
- default: {
34
- label: __('Default'),
35
- value: useGlobalStyle(prefix + 'elements.link.color.text', name)[0],
36
- handler: useGlobalStyle(prefix + 'elements.link.color.text', name)[1],
37
- userValue: useGlobalStyle(prefix + 'elements.link.color.text', name, 'user')[0]
38
- },
39
- hover: {
40
- label: __('Hover'),
41
- value: useGlobalStyle(prefix + 'elements.link.:hover.color.text', name)[0],
42
- handler: useGlobalStyle(prefix + 'elements.link.:hover.color.text', name)[1],
43
- userValue: useGlobalStyle(prefix + 'elements.link.:hover.color.text', name, 'user')[0]
44
- }
45
- };
46
-
47
- if (!hasLinkColor) {
48
- return null;
49
- }
50
-
51
- const tabs = Object.entries(pseudoStates).map(_ref2 => {
52
- let [selector, config] = _ref2;
53
- return {
54
- name: selector,
55
- title: config.label,
56
- className: `color-text-${selector}`
57
- };
58
- });
59
- return createElement(Fragment, null, createElement(ScreenHeader, {
60
- title: __('Links'),
61
- description: __('Set the colors used for links across the site.')
62
- }), createElement(TabPanel, {
63
- tabs: tabs
64
- }, tab => {
65
- var _pseudoStates$tab$nam;
66
-
67
- const pseudoSelectorConfig = (_pseudoStates$tab$nam = pseudoStates[tab.name]) !== null && _pseudoStates$tab$nam !== void 0 ? _pseudoStates$tab$nam : null;
68
-
69
- if (!pseudoSelectorConfig) {
70
- return null;
71
- }
72
-
73
- return createElement(Fragment, null, createElement(ColorGradientControl, {
74
- className: "edit-site-screen-link-color__control",
75
- colors: colorsPerOrigin,
76
- disableCustomColors: !areCustomSolidsEnabled,
77
- showTitle: false,
78
- enableAlpha: true,
79
- __experimentalIsRenderedInSidebar: true,
80
- colorValue: pseudoSelectorConfig.value,
81
- onColorChange: pseudoSelectorConfig.handler,
82
- clearable: pseudoSelectorConfig.value === pseudoSelectorConfig.userValue,
83
- headingLevel: 3
84
- }));
85
- }));
86
- }
87
-
88
- export default ScreenLinkColor;
89
- //# sourceMappingURL=screen-link-color.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-link-color.js"],"names":["__","__experimentalColorGradientControl","ColorGradientControl","privateApis","blockEditorPrivateApis","TabPanel","ScreenHeader","useSupportedStyles","useColorsPerOrigin","unlock","useGlobalSetting","useGlobalStyle","ScreenLinkColor","name","variation","prefix","supports","areCustomSolidsEnabled","colorsPerOrigin","isLinkEnabled","hasLinkColor","includes","length","pseudoStates","default","label","value","handler","userValue","hover","tabs","Object","entries","map","selector","config","title","className","tab","pseudoSelectorConfig"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalColorGradientControl as ColorGradientControl,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { TabPanel } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport { useSupportedStyles, useColorsPerOrigin } from './hooks';\nimport { unlock } from '../../private-apis';\n\nconst { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nfunction ScreenLinkColor( { name, variation = '' } ) {\n\tconst prefix = variation ? `variations.${ variation }.` : '';\n\tconst supports = useSupportedStyles( name );\n\tconst [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\tconst [ isLinkEnabled ] = useGlobalSetting( 'color.link', name );\n\n\tconst hasLinkColor =\n\t\tsupports.includes( 'linkColor' ) &&\n\t\tisLinkEnabled &&\n\t\t( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );\n\n\tconst pseudoStates = {\n\t\tdefault: {\n\t\t\tlabel: __( 'Default' ),\n\t\t\tvalue: useGlobalStyle(\n\t\t\t\tprefix + 'elements.link.color.text',\n\t\t\t\tname\n\t\t\t)[ 0 ],\n\t\t\thandler: useGlobalStyle(\n\t\t\t\tprefix + 'elements.link.color.text',\n\t\t\t\tname\n\t\t\t)[ 1 ],\n\t\t\tuserValue: useGlobalStyle(\n\t\t\t\tprefix + 'elements.link.color.text',\n\t\t\t\tname,\n\t\t\t\t'user'\n\t\t\t)[ 0 ],\n\t\t},\n\t\thover: {\n\t\t\tlabel: __( 'Hover' ),\n\t\t\tvalue: useGlobalStyle(\n\t\t\t\tprefix + 'elements.link.:hover.color.text',\n\t\t\t\tname\n\t\t\t)[ 0 ],\n\t\t\thandler: useGlobalStyle(\n\t\t\t\tprefix + 'elements.link.:hover.color.text',\n\t\t\t\tname\n\t\t\t)[ 1 ],\n\t\t\tuserValue: useGlobalStyle(\n\t\t\t\tprefix + 'elements.link.:hover.color.text',\n\t\t\t\tname,\n\t\t\t\t'user'\n\t\t\t)[ 0 ],\n\t\t},\n\t};\n\n\tif ( ! hasLinkColor ) {\n\t\treturn null;\n\t}\n\n\tconst tabs = Object.entries( pseudoStates ).map(\n\t\t( [ selector, config ] ) => {\n\t\t\treturn {\n\t\t\t\tname: selector,\n\t\t\t\ttitle: config.label,\n\t\t\t\tclassName: `color-text-${ selector }`,\n\t\t\t};\n\t\t}\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Links' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the colors used for links across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<TabPanel tabs={ tabs }>\n\t\t\t\t{ ( tab ) => {\n\t\t\t\t\tconst pseudoSelectorConfig =\n\t\t\t\t\t\tpseudoStates[ tab.name ] ?? null;\n\n\t\t\t\t\tif ( ! pseudoSelectorConfig ) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\t\t\tclassName=\"edit-site-screen-link-color__control\"\n\t\t\t\t\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\t\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t\t\t\t\tshowTitle={ false }\n\t\t\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t\tcolorValue={ pseudoSelectorConfig.value }\n\t\t\t\t\t\t\t\tonColorChange={ pseudoSelectorConfig.handler }\n\t\t\t\t\t\t\t\tclearable={\n\t\t\t\t\t\t\t\t\tpseudoSelectorConfig.value ===\n\t\t\t\t\t\t\t\t\tpseudoSelectorConfig.userValue\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\theadingLevel={ 3 }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t</TabPanel>\n\t\t</>\n\t);\n}\n\nexport default ScreenLinkColor;\n"]}
@@ -1,56 +0,0 @@
1
- import { createElement, Fragment } from "@wordpress/element";
2
-
3
- /**
4
- * WordPress dependencies
5
- */
6
- import { __ } from '@wordpress/i18n';
7
- import { __experimentalColorGradientControl as ColorGradientControl, privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
8
- /**
9
- * Internal dependencies
10
- */
11
-
12
- import ScreenHeader from './header';
13
- import { useSupportedStyles, useColorsPerOrigin } from './hooks';
14
- import { unlock } from '../../private-apis';
15
- const {
16
- useGlobalSetting,
17
- useGlobalStyle
18
- } = unlock(blockEditorPrivateApis);
19
-
20
- function ScreenTextColor(_ref) {
21
- let {
22
- name,
23
- variation = ''
24
- } = _ref;
25
- const prefix = variation ? `variations.${variation}.` : '';
26
- const supports = useSupportedStyles(name);
27
- const [areCustomSolidsEnabled] = useGlobalSetting('color.custom', name);
28
- const [isTextEnabled] = useGlobalSetting('color.text', name);
29
- const colorsPerOrigin = useColorsPerOrigin(name);
30
- const hasTextColor = supports.includes('color') && isTextEnabled && (colorsPerOrigin.length > 0 || areCustomSolidsEnabled);
31
- const [color, setColor] = useGlobalStyle(prefix + 'color.text', name);
32
- const [userColor] = useGlobalStyle(prefix + 'color.text', name, 'user');
33
-
34
- if (!hasTextColor) {
35
- return null;
36
- }
37
-
38
- return createElement(Fragment, null, createElement(ScreenHeader, {
39
- title: __('Text'),
40
- description: __('Set the default color used for text across the site.')
41
- }), createElement(ColorGradientControl, {
42
- className: "edit-site-screen-text-color__control",
43
- colors: colorsPerOrigin,
44
- disableCustomColors: !areCustomSolidsEnabled,
45
- showTitle: false,
46
- enableAlpha: true,
47
- __experimentalIsRenderedInSidebar: true,
48
- colorValue: color,
49
- onColorChange: setColor,
50
- clearable: color === userColor,
51
- headingLevel: 3
52
- }));
53
- }
54
-
55
- export default ScreenTextColor;
56
- //# sourceMappingURL=screen-text-color.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-text-color.js"],"names":["__","__experimentalColorGradientControl","ColorGradientControl","privateApis","blockEditorPrivateApis","ScreenHeader","useSupportedStyles","useColorsPerOrigin","unlock","useGlobalSetting","useGlobalStyle","ScreenTextColor","name","variation","prefix","supports","areCustomSolidsEnabled","isTextEnabled","colorsPerOrigin","hasTextColor","includes","length","color","setColor","userColor"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SACCC,kCAAkC,IAAIC,oBADvC,EAECC,WAAW,IAAIC,sBAFhB,QAGO,yBAHP;AAKA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,SAASC,kBAAT,EAA6BC,kBAA7B,QAAuD,SAAvD;AACA,SAASC,MAAT,QAAuB,oBAAvB;AAEA,MAAM;AAAEC,EAAAA,gBAAF;AAAoBC,EAAAA;AAApB,IAAuCF,MAAM,CAAEJ,sBAAF,CAAnD;;AAEA,SAASO,eAAT,OAAqD;AAAA,MAA3B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,SAAS,GAAG;AAApB,GAA2B;AACpD,QAAMC,MAAM,GAAGD,SAAS,GAAI,cAAcA,SAAW,GAA7B,GAAkC,EAA1D;AACA,QAAME,QAAQ,GAAGT,kBAAkB,CAAEM,IAAF,CAAnC;AACA,QAAM,CAAEI,sBAAF,IAA6BP,gBAAgB,CAAE,cAAF,EAAkBG,IAAlB,CAAnD;AACA,QAAM,CAAEK,aAAF,IAAoBR,gBAAgB,CAAE,YAAF,EAAgBG,IAAhB,CAA1C;AACA,QAAMM,eAAe,GAAGX,kBAAkB,CAAEK,IAAF,CAA1C;AAEA,QAAMO,YAAY,GACjBJ,QAAQ,CAACK,QAAT,CAAmB,OAAnB,KACAH,aADA,KAEEC,eAAe,CAACG,MAAhB,GAAyB,CAAzB,IAA8BL,sBAFhC,CADD;AAKA,QAAM,CAAEM,KAAF,EAASC,QAAT,IAAsBb,cAAc,CAAEI,MAAM,GAAG,YAAX,EAAyBF,IAAzB,CAA1C;AACA,QAAM,CAAEY,SAAF,IAAgBd,cAAc,CAAEI,MAAM,GAAG,YAAX,EAAyBF,IAAzB,EAA+B,MAA/B,CAApC;;AAEA,MAAK,CAAEO,YAAP,EAAsB;AACrB,WAAO,IAAP;AACA;;AAED,SACC,8BACC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGnB,EAAE,CAAE,MAAF,CADX;AAEC,IAAA,WAAW,EAAGA,EAAE,CACf,sDADe;AAFjB,IADD,EAOC,cAAC,oBAAD;AACC,IAAA,SAAS,EAAC,sCADX;AAEC,IAAA,MAAM,EAAGkB,eAFV;AAGC,IAAA,mBAAmB,EAAG,CAAEF,sBAHzB;AAIC,IAAA,SAAS,EAAG,KAJb;AAKC,IAAA,WAAW,MALZ;AAMC,IAAA,iCAAiC,MANlC;AAOC,IAAA,UAAU,EAAGM,KAPd;AAQC,IAAA,aAAa,EAAGC,QARjB;AASC,IAAA,SAAS,EAAGD,KAAK,KAAKE,SATvB;AAUC,IAAA,YAAY,EAAG;AAVhB,IAPD,CADD;AAsBA;;AAED,eAAeb,eAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalColorGradientControl as ColorGradientControl,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport { useSupportedStyles, useColorsPerOrigin } from './hooks';\nimport { unlock } from '../../private-apis';\n\nconst { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nfunction ScreenTextColor( { name, variation = '' } ) {\n\tconst prefix = variation ? `variations.${ variation }.` : '';\n\tconst supports = useSupportedStyles( name );\n\tconst [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );\n\tconst [ isTextEnabled ] = useGlobalSetting( 'color.text', name );\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\n\tconst hasTextColor =\n\t\tsupports.includes( 'color' ) &&\n\t\tisTextEnabled &&\n\t\t( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );\n\n\tconst [ color, setColor ] = useGlobalStyle( prefix + 'color.text', name );\n\tconst [ userColor ] = useGlobalStyle( prefix + 'color.text', name, 'user' );\n\n\tif ( ! hasTextColor ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Text' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the default color used for text across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<ColorGradientControl\n\t\t\t\tclassName=\"edit-site-screen-text-color__control\"\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\tcolorValue={ color }\n\t\t\t\tonColorChange={ setColor }\n\t\t\t\tclearable={ color === userColor }\n\t\t\t\theadingLevel={ 3 }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenTextColor;\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,14 +0,0 @@
1
- /**
2
- * Internal dependencies
3
- */
4
- import { useSupportedStyles } from './hooks';
5
-
6
- export function useHasColorPanel( name ) {
7
- const supports = useSupportedStyles( name );
8
- return (
9
- supports.includes( 'color' ) ||
10
- supports.includes( 'backgroundColor' ) ||
11
- supports.includes( 'background' ) ||
12
- supports.includes( 'linkColor' )
13
- );
14
- }
@@ -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;