@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.
- package/CHANGELOG.md +4 -0
- package/build/components/add-new-template/new-template-part.js +3 -11
- package/build/components/add-new-template/new-template-part.js.map +1 -1
- package/build/components/add-new-template/new-template.js +7 -7
- package/build/components/add-new-template/new-template.js.map +1 -1
- package/build/components/add-new-template/utils.js +1 -1
- package/build/components/add-new-template/utils.js.map +1 -1
- package/build/components/block-editor/editor-canvas.js +7 -10
- package/build/components/block-editor/editor-canvas.js.map +1 -1
- package/build/components/editor/index.js +6 -4
- package/build/components/editor/index.js.map +1 -1
- package/build/components/global-styles/border-panel.js +35 -1
- package/build/components/global-styles/border-panel.js.map +1 -1
- package/build/components/global-styles/context-menu.js +8 -11
- package/build/components/global-styles/context-menu.js.map +1 -1
- package/build/components/global-styles/dimensions-panel.js +11 -1
- package/build/components/global-styles/dimensions-panel.js.map +1 -1
- package/build/components/global-styles/effects-panel.js +53 -0
- package/build/components/global-styles/effects-panel.js.map +1 -0
- package/build/components/global-styles/filters-panel.js +45 -0
- package/build/components/global-styles/filters-panel.js.map +1 -0
- package/build/components/global-styles/global-styles-provider.js +7 -4
- package/build/components/global-styles/global-styles-provider.js.map +1 -1
- package/build/components/global-styles/hooks.js +1 -58
- package/build/components/global-styles/hooks.js.map +1 -1
- package/build/components/global-styles/preview.js +4 -5
- package/build/components/global-styles/preview.js.map +1 -1
- package/build/components/global-styles/screen-block-list.js +17 -12
- package/build/components/global-styles/screen-block-list.js.map +1 -1
- package/build/components/global-styles/screen-colors.js +22 -211
- package/build/components/global-styles/screen-colors.js.map +1 -1
- package/build/components/global-styles/screen-css.js +1 -1
- package/build/components/global-styles/screen-css.js.map +1 -1
- package/build/components/global-styles/screen-effects.js +15 -7
- package/build/components/global-styles/screen-effects.js.map +1 -1
- package/build/components/global-styles/screen-filters.js +2 -2
- package/build/components/global-styles/screen-filters.js.map +1 -1
- package/build/components/global-styles/screen-style-variations.js +8 -118
- package/build/components/global-styles/screen-style-variations.js.map +1 -1
- package/build/components/global-styles/screen-typography-element.js +4 -0
- package/build/components/global-styles/screen-typography-element.js.map +1 -1
- package/build/components/global-styles/screen-typography.js +5 -0
- package/build/components/global-styles/screen-typography.js.map +1 -1
- package/build/components/global-styles/style-variations-container.js +149 -0
- package/build/components/global-styles/style-variations-container.js.map +1 -0
- package/build/components/global-styles/ui.js +51 -37
- package/build/components/global-styles/ui.js.map +1 -1
- package/build/components/global-styles-renderer/index.js +1 -2
- package/build/components/global-styles-renderer/index.js.map +1 -1
- package/build/components/header-edit-mode/more-menu/index.js +1 -1
- package/build/components/header-edit-mode/more-menu/index.js.map +1 -1
- package/build/components/keyboard-shortcuts/index.js +0 -137
- package/build/components/keyboard-shortcuts/index.js.map +1 -1
- package/build/components/layout/index.js +8 -1
- package/build/components/layout/index.js.map +1 -1
- package/build/components/preferences-modal/index.js +4 -0
- package/build/components/preferences-modal/index.js.map +1 -1
- package/build/components/secondary-sidebar/list-view-sidebar.js +6 -1
- package/build/components/secondary-sidebar/list-view-sidebar.js.map +1 -1
- package/build/components/sidebar/index.js +4 -0
- package/build/components/sidebar/index.js.map +1 -1
- package/build/components/sidebar-navigation-screen/index.js +8 -6
- package/build/components/sidebar-navigation-screen/index.js.map +1 -1
- package/build/components/sidebar-navigation-screen-global-styles/index.js +58 -0
- package/build/components/sidebar-navigation-screen-global-styles/index.js.map +1 -0
- package/build/components/sidebar-navigation-screen-main/index.js +5 -0
- package/build/components/sidebar-navigation-screen-main/index.js.map +1 -1
- package/build/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js +114 -9
- package/build/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js.map +1 -1
- package/build/components/site-hub/index.js +4 -3
- package/build/components/site-hub/index.js.map +1 -1
- package/build/components/start-template-options/index.js +44 -9
- package/build/components/start-template-options/index.js.map +1 -1
- package/build/components/style-book/index.js +6 -7
- package/build/components/style-book/index.js.map +1 -1
- package/build/components/welcome-guide/styles.js +1 -1
- package/build/components/welcome-guide/styles.js.map +1 -1
- package/build/hooks/commands/index.js +19 -0
- package/build/hooks/commands/index.js.map +1 -0
- package/build/hooks/commands/use-navigation-commands.js +117 -0
- package/build/hooks/commands/use-navigation-commands.js.map +1 -0
- package/build/hooks/commands/use-wp-admin-commands.js +94 -0
- package/build/hooks/commands/use-wp-admin-commands.js.map +1 -0
- package/build/hooks/push-changes-to-global-styles/index.js +1 -0
- package/build/hooks/push-changes-to-global-styles/index.js.map +1 -1
- package/build/hooks/template-part-edit.js +2 -1
- package/build/hooks/template-part-edit.js.map +1 -1
- package/build/index.js +2 -1
- package/build/index.js.map +1 -1
- package/build/store/selectors.js +2 -1
- package/build/store/selectors.js.map +1 -1
- package/build-module/components/add-new-template/new-template-part.js +3 -9
- package/build-module/components/add-new-template/new-template-part.js.map +1 -1
- package/build-module/components/add-new-template/new-template.js +7 -7
- package/build-module/components/add-new-template/new-template.js.map +1 -1
- package/build-module/components/add-new-template/utils.js +1 -1
- package/build-module/components/add-new-template/utils.js.map +1 -1
- package/build-module/components/block-editor/editor-canvas.js +8 -11
- package/build-module/components/block-editor/editor-canvas.js.map +1 -1
- package/build-module/components/editor/index.js +6 -4
- package/build-module/components/editor/index.js.map +1 -1
- package/build-module/components/global-styles/border-panel.js +34 -1
- package/build-module/components/global-styles/border-panel.js.map +1 -1
- package/build-module/components/global-styles/context-menu.js +8 -8
- package/build-module/components/global-styles/context-menu.js.map +1 -1
- package/build-module/components/global-styles/dimensions-panel.js +11 -1
- package/build-module/components/global-styles/dimensions-panel.js.map +1 -1
- package/build-module/components/global-styles/effects-panel.js +43 -0
- package/build-module/components/global-styles/effects-panel.js.map +1 -0
- package/build-module/components/global-styles/filters-panel.js +35 -0
- package/build-module/components/global-styles/filters-panel.js.map +1 -0
- package/build-module/components/global-styles/global-styles-provider.js +8 -5
- package/build-module/components/global-styles/global-styles-provider.js.map +1 -1
- package/build-module/components/global-styles/hooks.js +1 -52
- package/build-module/components/global-styles/hooks.js.map +1 -1
- package/build-module/components/global-styles/preview.js +4 -5
- package/build-module/components/global-styles/preview.js.map +1 -1
- package/build-module/components/global-styles/screen-block-list.js +16 -11
- package/build-module/components/global-styles/screen-block-list.js.map +1 -1
- package/build-module/components/global-styles/screen-colors.js +23 -208
- package/build-module/components/global-styles/screen-colors.js.map +1 -1
- package/build-module/components/global-styles/screen-css.js +1 -1
- package/build-module/components/global-styles/screen-css.js.map +1 -1
- package/build-module/components/global-styles/screen-effects.js +13 -4
- package/build-module/components/global-styles/screen-effects.js.map +1 -1
- package/build-module/components/global-styles/screen-filters.js +2 -2
- package/build-module/components/global-styles/screen-filters.js.map +1 -1
- package/build-module/components/global-styles/screen-style-variations.js +11 -114
- package/build-module/components/global-styles/screen-style-variations.js.map +1 -1
- package/build-module/components/global-styles/screen-typography-element.js +4 -0
- package/build-module/components/global-styles/screen-typography-element.js.map +1 -1
- package/build-module/components/global-styles/screen-typography.js +5 -0
- package/build-module/components/global-styles/screen-typography.js.map +1 -1
- package/build-module/components/global-styles/style-variations-container.js +130 -0
- package/build-module/components/global-styles/style-variations-container.js.map +1 -0
- package/build-module/components/global-styles/ui.js +49 -33
- package/build-module/components/global-styles/ui.js.map +1 -1
- package/build-module/components/global-styles-renderer/index.js +1 -2
- package/build-module/components/global-styles-renderer/index.js.map +1 -1
- package/build-module/components/header-edit-mode/more-menu/index.js +1 -1
- package/build-module/components/header-edit-mode/more-menu/index.js.map +1 -1
- package/build-module/components/keyboard-shortcuts/index.js +1 -135
- package/build-module/components/keyboard-shortcuts/index.js.map +1 -1
- package/build-module/components/layout/index.js +6 -1
- package/build-module/components/layout/index.js.map +1 -1
- package/build-module/components/preferences-modal/index.js +4 -0
- package/build-module/components/preferences-modal/index.js.map +1 -1
- package/build-module/components/secondary-sidebar/list-view-sidebar.js +6 -2
- package/build-module/components/secondary-sidebar/list-view-sidebar.js.map +1 -1
- package/build-module/components/sidebar/index.js +3 -0
- package/build-module/components/sidebar/index.js.map +1 -1
- package/build-module/components/sidebar-navigation-screen/index.js +9 -7
- package/build-module/components/sidebar-navigation-screen/index.js.map +1 -1
- package/build-module/components/sidebar-navigation-screen-global-styles/index.js +41 -0
- package/build-module/components/sidebar-navigation-screen-global-styles/index.js.map +1 -0
- package/build-module/components/sidebar-navigation-screen-main/index.js +6 -1
- package/build-module/components/sidebar-navigation-screen-main/index.js.map +1 -1
- package/build-module/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js +113 -11
- package/build-module/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js.map +1 -1
- package/build-module/components/site-hub/index.js +3 -3
- package/build-module/components/site-hub/index.js.map +1 -1
- package/build-module/components/start-template-options/index.js +45 -10
- package/build-module/components/start-template-options/index.js.map +1 -1
- package/build-module/components/style-book/index.js +7 -8
- package/build-module/components/style-book/index.js.map +1 -1
- package/build-module/components/welcome-guide/styles.js +1 -1
- package/build-module/components/welcome-guide/styles.js.map +1 -1
- package/build-module/hooks/commands/index.js +10 -0
- package/build-module/hooks/commands/index.js.map +1 -0
- package/build-module/hooks/commands/use-navigation-commands.js +101 -0
- package/build-module/hooks/commands/use-navigation-commands.js.map +1 -0
- package/build-module/hooks/commands/use-wp-admin-commands.js +79 -0
- package/build-module/hooks/commands/use-wp-admin-commands.js.map +1 -0
- package/build-module/hooks/push-changes-to-global-styles/index.js +1 -0
- package/build-module/hooks/push-changes-to-global-styles/index.js.map +1 -1
- package/build-module/hooks/template-part-edit.js +2 -1
- package/build-module/hooks/template-part-edit.js.map +1 -1
- package/build-module/index.js +2 -1
- package/build-module/index.js.map +1 -1
- package/build-module/store/selectors.js +2 -1
- package/build-module/store/selectors.js.map +1 -1
- package/build-style/style-rtl.css +24 -63
- package/build-style/style.css +24 -63
- package/package.json +33 -31
- package/src/components/add-new-template/new-template-part.js +1 -6
- package/src/components/add-new-template/new-template.js +3 -6
- package/src/components/add-new-template/utils.js +1 -1
- package/src/components/block-editor/editor-canvas.js +13 -23
- package/src/components/editor/index.js +11 -3
- package/src/components/global-styles/border-panel.js +32 -1
- package/src/components/global-styles/context-menu.js +8 -8
- package/src/components/global-styles/dimensions-panel.js +11 -0
- package/src/components/global-styles/effects-panel.js +40 -0
- package/src/components/global-styles/filters-panel.js +33 -0
- package/src/components/global-styles/global-styles-provider.js +4 -4
- package/src/components/global-styles/hooks.js +1 -78
- package/src/components/global-styles/preview.js +2 -2
- package/src/components/global-styles/screen-block-list.js +11 -7
- package/src/components/global-styles/screen-colors.js +25 -229
- package/src/components/global-styles/screen-css.js +1 -1
- package/src/components/global-styles/screen-effects.js +12 -5
- package/src/components/global-styles/screen-filters.js +2 -2
- package/src/components/global-styles/screen-style-variations.js +10 -129
- package/src/components/global-styles/screen-typography-element.js +4 -0
- package/src/components/global-styles/screen-typography.js +6 -0
- package/src/components/global-styles/stories/index.js +425 -0
- package/src/components/global-styles/style-variations-container.js +136 -0
- package/src/components/global-styles/style.scss +4 -57
- package/src/components/global-styles/ui.js +50 -33
- package/src/components/global-styles-renderer/index.js +1 -2
- package/src/components/header-edit-mode/more-menu/index.js +1 -1
- package/src/components/keyboard-shortcuts/index.js +1 -155
- package/src/components/layout/index.js +4 -0
- package/src/components/preferences-modal/index.js +7 -0
- package/src/components/secondary-sidebar/list-view-sidebar.js +4 -3
- package/src/components/sidebar/index.js +4 -0
- package/src/components/sidebar-navigation-screen/index.js +10 -5
- package/src/components/sidebar-navigation-screen/style.scss +20 -5
- package/src/components/sidebar-navigation-screen-global-styles/index.js +41 -0
- package/src/components/sidebar-navigation-screen-main/index.js +9 -1
- package/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js +134 -9
- package/src/components/site-hub/index.js +3 -3
- package/src/components/start-template-options/index.js +40 -8
- package/src/components/start-template-options/style.scss +7 -14
- package/src/components/style-book/index.js +10 -16
- package/src/components/style-book/style.scss +1 -1
- package/src/components/welcome-guide/styles.js +1 -1
- package/src/hooks/commands/index.js +10 -0
- package/src/hooks/commands/use-navigation-commands.js +103 -0
- package/src/hooks/commands/use-wp-admin-commands.js +77 -0
- package/src/hooks/push-changes-to-global-styles/index.js +1 -0
- package/src/hooks/template-part-edit.js +1 -0
- package/src/index.js +1 -0
- package/src/store/selectors.js +2 -1
- package/build/components/global-styles/color-utils.js +0 -17
- package/build/components/global-styles/color-utils.js.map +0 -1
- package/build/components/global-styles/duotone-panel.js +0 -78
- package/build/components/global-styles/duotone-panel.js.map +0 -1
- package/build/components/global-styles/filter-utils.js +0 -17
- package/build/components/global-styles/filter-utils.js.map +0 -1
- package/build/components/global-styles/screen-background-color.js +0 -114
- package/build/components/global-styles/screen-background-color.js.map +0 -1
- package/build/components/global-styles/screen-button-color.js +0 -88
- package/build/components/global-styles/screen-button-color.js.map +0 -1
- package/build/components/global-styles/screen-heading-color.js +0 -165
- package/build/components/global-styles/screen-heading-color.js.map +0 -1
- package/build/components/global-styles/screen-link-color.js +0 -105
- package/build/components/global-styles/screen-link-color.js.map +0 -1
- package/build/components/global-styles/screen-text-color.js +0 -71
- package/build/components/global-styles/screen-text-color.js.map +0 -1
- package/build/components/global-styles/shadow-panel.js +0 -197
- package/build/components/global-styles/shadow-panel.js.map +0 -1
- package/build-module/components/global-styles/color-utils.js +0 -9
- package/build-module/components/global-styles/color-utils.js.map +0 -1
- package/build-module/components/global-styles/duotone-panel.js +0 -67
- package/build-module/components/global-styles/duotone-panel.js.map +0 -1
- package/build-module/components/global-styles/filter-utils.js +0 -9
- package/build-module/components/global-styles/filter-utils.js.map +0 -1
- package/build-module/components/global-styles/screen-background-color.js +0 -97
- package/build-module/components/global-styles/screen-background-color.js.map +0 -1
- package/build-module/components/global-styles/screen-button-color.js +0 -73
- package/build-module/components/global-styles/screen-button-color.js.map +0 -1
- package/build-module/components/global-styles/screen-heading-color.js +0 -149
- package/build-module/components/global-styles/screen-heading-color.js.map +0 -1
- package/build-module/components/global-styles/screen-link-color.js +0 -89
- package/build-module/components/global-styles/screen-link-color.js.map +0 -1
- package/build-module/components/global-styles/screen-text-color.js +0 -56
- package/build-module/components/global-styles/screen-text-color.js.map +0 -1
- package/build-module/components/global-styles/shadow-panel.js +0 -178
- package/build-module/components/global-styles/shadow-panel.js.map +0 -1
- package/src/components/global-styles/color-utils.js +0 -14
- package/src/components/global-styles/duotone-panel.js +0 -82
- package/src/components/global-styles/filter-utils.js +0 -9
- package/src/components/global-styles/screen-background-color.js +0 -132
- package/src/components/global-styles/screen-button-color.js +0 -104
- package/src/components/global-styles/screen-heading-color.js +0 -206
- package/src/components/global-styles/screen-link-color.js +0 -124
- package/src/components/global-styles/screen-text-color.js +0 -62
- 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":";;;AAAA;AACA;AACA;AACA,SAASA,OAAT,EAAkBC,EAAlB,QAA4B,iBAA5B;AACA,SACCC,gCAAgC,IAAIC,kBADrC,EAECC,sCAAsC,IAAIC,wBAF3C,QAGO,uBAHP;AAIA,SACCC,kCAAkC,IAAIC,oBADvC,EAECC,WAAW,IAAIC,sBAFhB,QAGO,yBAHP;AAIA,SAASC,QAAT,QAAyB,oBAAzB;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,SACCC,kBADD,EAECC,kBAFD,EAGCC,qBAHD,QAIO,SAJP;AAKA,SAASC,MAAT,QAAuB,oBAAvB;AAEA,MAAM;AAAEC,EAAAA,gBAAF;AAAoBC,EAAAA;AAApB,IAAuCF,MAAM,CAAEN,sBAAF,CAAnD;;AAEA,SAASS,kBAAT,OAAwD;AAAA,MAA3B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,SAAS,GAAG;AAApB,GAA2B;AACvD,QAAMC,MAAM,GAAGD,SAAS,GAAI,cAAcA,SAAW,GAA7B,GAAkC,EAA1D;AACA,QAAM,CAAEE,aAAF,EAAiBC,aAAjB,IAAmCb,QAAQ,CAAE,SAAF,CAAjD;AACA,QAAMc,QAAQ,GAAGZ,kBAAkB,CAAEO,IAAF,CAAnC;AACA,QAAM,CAAEM,sBAAF,IAA6BT,gBAAgB,CAAE,cAAF,EAAkBG,IAAlB,CAAnD;AACA,QAAM,CAAEO,yBAAF,IAAgCV,gBAAgB,CACrD,sBADqD,EAErDG,IAFqD,CAAtD;AAIA,QAAM,CAAEQ,aAAF,IAAoBX,gBAAgB,CAAE,YAAF,EAAgBG,IAAhB,CAA1C;AACA,QAAM,CAAES,mBAAF,IAA0BZ,gBAAgB,CAC/C,kBAD+C,EAE/CG,IAF+C,CAAhD;AAIA,QAAMU,eAAe,GAAGhB,kBAAkB,CAAEM,IAAF,CAA1C;AACA,QAAMW,kBAAkB,GAAGhB,qBAAqB,CAAEK,IAAF,CAAhD;AAEA,QAAMY,YAAY,GACjBP,QAAQ,CAACQ,QAAT,CAAmB,OAAnB,KACAL,aADA,KAEEE,eAAe,CAACI,MAAhB,GAAyB,CAAzB,IAA8BR,sBAFhC,CADD;AAKA,QAAMS,kBAAkB,GACvBV,QAAQ,CAACQ,QAAT,CAAmB,iBAAnB,KACAJ,mBADA,KAEEC,eAAe,CAACI,MAAhB,GAAyB,CAAzB,IAA8BR,sBAFhC,CADD;AAIA,QAAMU,gBAAgB,GACrBX,QAAQ,CAACQ,QAAT,CAAmB,YAAnB,MACEF,kBAAkB,CAACG,MAAnB,GAA4B,CAA5B,IAAiCP,yBADnC,CADD;AAIA,QAAM,CAAEU,KAAF,EAASC,QAAT,IAAsBpB,cAAc,CACzCI,MAAM,GAAG,WAAT,GAAuBC,aAAvB,GAAuC,aADE,EAEzCH,IAFyC,CAA1C;AAIA,QAAM,CAAEmB,SAAF,IAAgBrB,cAAc,CACnCI,MAAM,GAAG,WAAT,GAAuBC,aAAvB,GAAuC,aADJ,EAEnCH,IAFmC,EAGnC,MAHmC,CAApC;AAMA,QAAM,CAAEoB,eAAF,EAAmBC,kBAAnB,IAA0CvB,cAAc,CAC7DI,MAAM,GAAG,WAAT,GAAuBC,aAAvB,GAAuC,mBADsB,EAE7DH,IAF6D,CAA9D;AAIA,QAAM,CAAEsB,mBAAF,IAA0BxB,cAAc,CAC7CI,MAAM,GAAG,WAAT,GAAuBC,aAAvB,GAAuC,mBADM,EAE7CH,IAF6C,EAG7C,MAH6C,CAA9C;AAKA,QAAM,CAAEuB,QAAF,EAAYC,WAAZ,IAA4B1B,cAAc,CAC/CI,MAAM,GAAG,WAAT,GAAuBC,aAAvB,GAAuC,iBADQ,EAE/CH,IAF+C,CAAhD;AAIA,QAAM,CAAEyB,YAAF,IAAmB3B,cAAc,CACtCI,MAAM,GAAG,WAAT,GAAuBC,aAAvB,GAAuC,iBADD,EAEtCH,IAFsC,EAGtC,MAHsC,CAAvC;;AAMA,MAAK,CAAEY,YAAF,IAAkB,CAAEG,kBAApB,IAA0C,CAAEC,gBAAjD,EAAoE;AACnE,WAAO,IAAP;AACA;;AAED,MAAIU,kBAAkB,GAAG,EAAzB;;AACA,MAAKX,kBAAL,EAA0B;AACzBW,IAAAA,kBAAkB,GAAG;AACpBC,MAAAA,UAAU,EAAEP,eADQ;AAEpBQ,MAAAA,aAAa,EAAEP;AAFK,KAArB;;AAIA,QAAKD,eAAL,EAAuB;AACtBM,MAAAA,kBAAkB,CAACG,SAAnB,GACCT,eAAe,KAAKE,mBADrB;AAEA;AACD;;AAED,MAAIQ,gBAAgB,GAAG,EAAvB;;AACA,MAAKd,gBAAL,EAAwB;AACvBc,IAAAA,gBAAgB,GAAG;AAClBC,MAAAA,aAAa,EAAER,QADG;AAElBS,MAAAA,gBAAgB,EAAER;AAFA,KAAnB;;AAIA,QAAKD,QAAL,EAAgB;AACfO,MAAAA,gBAAgB,CAACD,SAAjB,GAA6BN,QAAQ,KAAKE,YAA1C;AACA;AACD;;AAED,QAAMQ,YAAY,GAAG,EACpB,GAAGP,kBADiB;AAEpB,OAAGI;AAFiB,GAArB;AAKA,SACC,8BACC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGhD,EAAE,CAAE,UAAF,CADX;AAEC,IAAA,WAAW,EAAGA,EAAE,CACf,0DADe;AAFjB,IADD,EAOC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,0BAAMA,EAAE,CAAE,sBAAF,CAAR,CADD,EAGC,cAAC,kBAAD;AACC,IAAA,uBAAuB,MADxB;AAEC,IAAA,KAAK,EAAGA,EAAE,CAAE,sBAAF,CAFX;AAGC,IAAA,mBAAmB,EAAG,IAHvB;AAIC,IAAA,KAAK,EAAGqB,aAJT;AAKC,IAAA,QAAQ,EAAGC,aALZ;AAMC,IAAA,OAAO;AANR,KAQC,cAAC,wBAAD;AACC,IAAA,KAAK,EAAC;AACN;AACN;AAHK;AAIC,IAAA,KAAK,EAAGtB,EAAE,CAAE,KAAF;AAJX,IARD,EAcC,cAAC,wBAAD;AAA0B,IAAA,KAAK,EAAC,IAAhC;AAAqC,IAAA,KAAK,EAAGA,EAAE,CAAE,IAAF;AAA/C,IAdD,EAeC,cAAC,wBAAD;AAA0B,IAAA,KAAK,EAAC,IAAhC;AAAqC,IAAA,KAAK,EAAGA,EAAE,CAAE,IAAF;AAA/C,IAfD,EAgBC,cAAC,wBAAD;AAA0B,IAAA,KAAK,EAAC,IAAhC;AAAqC,IAAA,KAAK,EAAGA,EAAE,CAAE,IAAF;AAA/C,IAhBD,EAiBC,cAAC,wBAAD;AAA0B,IAAA,KAAK,EAAC,IAAhC;AAAqC,IAAA,KAAK,EAAGA,EAAE,CAAE,IAAF;AAA/C,IAjBD,EAkBC,cAAC,wBAAD;AAA0B,IAAA,KAAK,EAAC,IAAhC;AAAqC,IAAA,KAAK,EAAGA,EAAE,CAAE,IAAF;AAA/C,IAlBD,EAmBC,cAAC,wBAAD;AAA0B,IAAA,KAAK,EAAC,IAAhC;AAAqC,IAAA,KAAK,EAAGA,EAAE,CAAE,IAAF;AAA/C,IAnBD,CAHD,CAPD,EAgCG8B,YAAY,IACb;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,0BACGT,aAAa,KAAK,SAAlB,GACCrB,EAAE,CAAE,mCAAF,CADH,GAECD,OAAO;AACP;AACAC,EAAAA,EAAE,CAAE,mBAAF,CAFK,EAGPqB,aAAa,CAAC+B,WAAd,EAHO,CAHX,CADD,EAUC,cAAC,oBAAD;AACC,IAAA,SAAS,EAAC,8CADX;AAEC,IAAA,MAAM,EAAGxB,eAFV;AAGC,IAAA,mBAAmB,EAAG,CAAEJ,sBAHzB;AAIC,IAAA,SAAS,EAAG,KAJb;AAKC,IAAA,WAAW,MALZ;AAMC,IAAA,iCAAiC,MANlC;AAOC,IAAA,UAAU,EAAGW,KAPd;AAQC,IAAA,aAAa,EAAGC,QARjB;AASC,IAAA,SAAS,EAAGD,KAAK,KAAKE,SATvB;AAUC,IAAA,YAAY,EAAG;AAVhB,IAVD,CAjCF,EAyDGJ,kBAAkB,IACnB;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,0BACGZ,aAAa,KAAK,SAAlB,GACCrB,EAAE,CAAE,yCAAF,CADH,GAECD,OAAO;AACP;AACAC,EAAAA,EAAE,CAAE,yBAAF,CAFK,EAGPqB,aAAa,CAAC+B,WAAd,EAHO,CAHX,CADD,EAUC,cAAC,oBAAD;AACC,IAAA,SAAS,EAAC,oDADX;AAEC,IAAA,MAAM,EAAGxB,eAFV;AAGC,IAAA,SAAS,EAAGC,kBAHb;AAIC,IAAA,mBAAmB,EAAG,CAAEL,sBAJzB;AAKC,IAAA,sBAAsB,EAAG,CAAEC,yBAL5B;AAMC,IAAA,SAAS,EAAG,KANb;AAOC,IAAA,WAAW,MAPZ;AAQC,IAAA,iCAAiC,MARlC;AASC,IAAA,YAAY,EAAG;AAThB,KAUM0B,YAVN,EAVD,CA1DF,CADD;AAqFA;;AAED,eAAelC,kBAAf","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;
|