@wordpress/edit-site 5.6.0 → 5.7.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 (122) hide show
  1. package/CHANGELOG.md +2 -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/global-styles/context-menu.js +2 -3
  11. package/build/components/global-styles/context-menu.js.map +1 -1
  12. package/build/components/global-styles/hooks.js +1 -58
  13. package/build/components/global-styles/hooks.js.map +1 -1
  14. package/build/components/global-styles/preview.js +3 -4
  15. package/build/components/global-styles/preview.js.map +1 -1
  16. package/build/components/global-styles/screen-block-list.js +3 -4
  17. package/build/components/global-styles/screen-block-list.js.map +1 -1
  18. package/build/components/global-styles/screen-colors.js +22 -211
  19. package/build/components/global-styles/screen-colors.js.map +1 -1
  20. package/build/components/global-styles/screen-typography-element.js +4 -0
  21. package/build/components/global-styles/screen-typography-element.js.map +1 -1
  22. package/build/components/global-styles/screen-typography.js +5 -0
  23. package/build/components/global-styles/screen-typography.js.map +1 -1
  24. package/build/components/global-styles/ui.js +5 -35
  25. package/build/components/global-styles/ui.js.map +1 -1
  26. package/build/components/global-styles-renderer/index.js +1 -2
  27. package/build/components/global-styles-renderer/index.js.map +1 -1
  28. package/build/components/secondary-sidebar/list-view-sidebar.js +6 -1
  29. package/build/components/secondary-sidebar/list-view-sidebar.js.map +1 -1
  30. package/build/components/start-template-options/index.js +44 -9
  31. package/build/components/start-template-options/index.js.map +1 -1
  32. package/build/components/style-book/index.js +6 -7
  33. package/build/components/style-book/index.js.map +1 -1
  34. package/build/hooks/push-changes-to-global-styles/index.js +1 -0
  35. package/build/hooks/push-changes-to-global-styles/index.js.map +1 -1
  36. package/build-module/components/add-new-template/new-template-part.js +3 -9
  37. package/build-module/components/add-new-template/new-template-part.js.map +1 -1
  38. package/build-module/components/add-new-template/new-template.js +7 -7
  39. package/build-module/components/add-new-template/new-template.js.map +1 -1
  40. package/build-module/components/add-new-template/utils.js +1 -1
  41. package/build-module/components/add-new-template/utils.js.map +1 -1
  42. package/build-module/components/block-editor/editor-canvas.js +8 -11
  43. package/build-module/components/block-editor/editor-canvas.js.map +1 -1
  44. package/build-module/components/global-styles/context-menu.js +2 -2
  45. package/build-module/components/global-styles/context-menu.js.map +1 -1
  46. package/build-module/components/global-styles/hooks.js +1 -52
  47. package/build-module/components/global-styles/hooks.js.map +1 -1
  48. package/build-module/components/global-styles/preview.js +3 -4
  49. package/build-module/components/global-styles/preview.js.map +1 -1
  50. package/build-module/components/global-styles/screen-block-list.js +3 -3
  51. package/build-module/components/global-styles/screen-block-list.js.map +1 -1
  52. package/build-module/components/global-styles/screen-colors.js +23 -208
  53. package/build-module/components/global-styles/screen-colors.js.map +1 -1
  54. package/build-module/components/global-styles/screen-typography-element.js +4 -0
  55. package/build-module/components/global-styles/screen-typography-element.js.map +1 -1
  56. package/build-module/components/global-styles/screen-typography.js +5 -0
  57. package/build-module/components/global-styles/screen-typography.js.map +1 -1
  58. package/build-module/components/global-styles/ui.js +5 -30
  59. package/build-module/components/global-styles/ui.js.map +1 -1
  60. package/build-module/components/global-styles-renderer/index.js +1 -2
  61. package/build-module/components/global-styles-renderer/index.js.map +1 -1
  62. package/build-module/components/secondary-sidebar/list-view-sidebar.js +6 -2
  63. package/build-module/components/secondary-sidebar/list-view-sidebar.js.map +1 -1
  64. package/build-module/components/start-template-options/index.js +45 -10
  65. package/build-module/components/start-template-options/index.js.map +1 -1
  66. package/build-module/components/style-book/index.js +7 -8
  67. package/build-module/components/style-book/index.js.map +1 -1
  68. package/build-module/hooks/push-changes-to-global-styles/index.js +1 -0
  69. package/build-module/hooks/push-changes-to-global-styles/index.js.map +1 -1
  70. package/build-style/style-rtl.css +4 -17
  71. package/build-style/style.css +4 -17
  72. package/package.json +31 -31
  73. package/src/components/add-new-template/new-template-part.js +1 -6
  74. package/src/components/add-new-template/new-template.js +3 -6
  75. package/src/components/add-new-template/utils.js +1 -1
  76. package/src/components/block-editor/editor-canvas.js +13 -23
  77. package/src/components/global-styles/context-menu.js +2 -2
  78. package/src/components/global-styles/hooks.js +1 -78
  79. package/src/components/global-styles/preview.js +1 -1
  80. package/src/components/global-styles/screen-block-list.js +2 -2
  81. package/src/components/global-styles/screen-colors.js +25 -229
  82. package/src/components/global-styles/screen-typography-element.js +4 -0
  83. package/src/components/global-styles/screen-typography.js +6 -0
  84. package/src/components/global-styles/stories/index.js +425 -0
  85. package/src/components/global-styles/style.scss +4 -18
  86. package/src/components/global-styles/ui.js +6 -31
  87. package/src/components/global-styles-renderer/index.js +1 -2
  88. package/src/components/secondary-sidebar/list-view-sidebar.js +4 -3
  89. package/src/components/start-template-options/index.js +40 -8
  90. package/src/components/style-book/index.js +10 -16
  91. package/src/components/style-book/style.scss +1 -1
  92. package/src/hooks/push-changes-to-global-styles/index.js +1 -0
  93. package/build/components/global-styles/color-utils.js +0 -17
  94. package/build/components/global-styles/color-utils.js.map +0 -1
  95. package/build/components/global-styles/screen-background-color.js +0 -114
  96. package/build/components/global-styles/screen-background-color.js.map +0 -1
  97. package/build/components/global-styles/screen-button-color.js +0 -88
  98. package/build/components/global-styles/screen-button-color.js.map +0 -1
  99. package/build/components/global-styles/screen-heading-color.js +0 -165
  100. package/build/components/global-styles/screen-heading-color.js.map +0 -1
  101. package/build/components/global-styles/screen-link-color.js +0 -105
  102. package/build/components/global-styles/screen-link-color.js.map +0 -1
  103. package/build/components/global-styles/screen-text-color.js +0 -71
  104. package/build/components/global-styles/screen-text-color.js.map +0 -1
  105. package/build-module/components/global-styles/color-utils.js +0 -9
  106. package/build-module/components/global-styles/color-utils.js.map +0 -1
  107. package/build-module/components/global-styles/screen-background-color.js +0 -97
  108. package/build-module/components/global-styles/screen-background-color.js.map +0 -1
  109. package/build-module/components/global-styles/screen-button-color.js +0 -73
  110. package/build-module/components/global-styles/screen-button-color.js.map +0 -1
  111. package/build-module/components/global-styles/screen-heading-color.js +0 -149
  112. package/build-module/components/global-styles/screen-heading-color.js.map +0 -1
  113. package/build-module/components/global-styles/screen-link-color.js +0 -89
  114. package/build-module/components/global-styles/screen-link-color.js.map +0 -1
  115. package/build-module/components/global-styles/screen-text-color.js +0 -56
  116. package/build-module/components/global-styles/screen-text-color.js.map +0 -1
  117. package/src/components/global-styles/color-utils.js +0 -14
  118. package/src/components/global-styles/screen-background-color.js +0 -132
  119. package/src/components/global-styles/screen-button-color.js +0 -104
  120. package/src/components/global-styles/screen-heading-color.js +0 -206
  121. package/src/components/global-styles/screen-link-color.js +0 -124
  122. package/src/components/global-styles/screen-text-color.js +0 -62
@@ -1 +0,0 @@
1
- {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-text-color.js"],"names":["useGlobalSetting","useGlobalStyle","blockEditorPrivateApis","ScreenTextColor","name","variation","prefix","supports","areCustomSolidsEnabled","isTextEnabled","colorsPerOrigin","hasTextColor","includes","length","color","setColor","userColor"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAQA;;AACA;;AACA;;AAdA;AACA;AACA;;AAOA;AACA;AACA;AAKA,MAAM;AAAEA,EAAAA,gBAAF;AAAoBC,EAAAA;AAApB,IAAuC,yBAAQC,wBAAR,CAA7C;;AAEA,SAASC,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,GAAG,+BAAoBH,IAApB,CAAjB;AACA,QAAM,CAAEI,sBAAF,IAA6BR,gBAAgB,CAAE,cAAF,EAAkBI,IAAlB,CAAnD;AACA,QAAM,CAAEK,aAAF,IAAoBT,gBAAgB,CAAE,YAAF,EAAgBI,IAAhB,CAA1C;AACA,QAAMM,eAAe,GAAG,+BAAoBN,IAApB,CAAxB;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,IAAsBd,cAAc,CAAEK,MAAM,GAAG,YAAX,EAAyBF,IAAzB,CAA1C;AACA,QAAM,CAAEY,SAAF,IAAgBf,cAAc,CAAEK,MAAM,GAAG,YAAX,EAAyBF,IAAzB,EAA+B,MAA/B,CAApC;;AAEA,MAAK,CAAEO,YAAP,EAAsB;AACrB,WAAO,IAAP;AACA;;AAED,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAG,cAAI,MAAJ,CADT;AAEC,IAAA,WAAW,EAAG,cACb,sDADa;AAFf,IADD,EAOC,4BAAC,+CAAD;AACC,IAAA,SAAS,EAAC,sCADX;AAEC,IAAA,MAAM,EAAGD,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;;eAEcb,e","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,9 +0,0 @@
1
- /**
2
- * Internal dependencies
3
- */
4
- import { useSupportedStyles } from './hooks';
5
- export function useHasColorPanel(name) {
6
- const supports = useSupportedStyles(name);
7
- return supports.includes('color') || supports.includes('backgroundColor') || supports.includes('background') || supports.includes('linkColor');
8
- }
9
- //# sourceMappingURL=color-utils.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/color-utils.js"],"names":["useSupportedStyles","useHasColorPanel","name","supports","includes"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,kBAAT,QAAmC,SAAnC;AAEA,OAAO,SAASC,gBAAT,CAA2BC,IAA3B,EAAkC;AACxC,QAAMC,QAAQ,GAAGH,kBAAkB,CAAEE,IAAF,CAAnC;AACA,SACCC,QAAQ,CAACC,QAAT,CAAmB,OAAnB,KACAD,QAAQ,CAACC,QAAT,CAAmB,iBAAnB,CADA,IAEAD,QAAQ,CAACC,QAAT,CAAmB,YAAnB,CAFA,IAGAD,QAAQ,CAACC,QAAT,CAAmB,WAAnB,CAJD;AAMA","sourcesContent":["/**\n * Internal dependencies\n */\nimport { useSupportedStyles } from './hooks';\n\nexport function useHasColorPanel( name ) {\n\tconst supports = useSupportedStyles( name );\n\treturn (\n\t\tsupports.includes( 'color' ) ||\n\t\tsupports.includes( 'backgroundColor' ) ||\n\t\tsupports.includes( 'background' ) ||\n\t\tsupports.includes( 'linkColor' )\n\t);\n}\n"]}
@@ -1,97 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
2
- import { createElement, Fragment } from "@wordpress/element";
3
-
4
- /**
5
- * External dependencies
6
- */
7
- import classnames from 'classnames';
8
- /**
9
- * WordPress dependencies
10
- */
11
-
12
- import { __ } from '@wordpress/i18n';
13
- import { __experimentalColorGradientControl as ColorGradientControl, privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
14
- /**
15
- * Internal dependencies
16
- */
17
-
18
- import ScreenHeader from './header';
19
- import { useSupportedStyles, useColorsPerOrigin, useGradientsPerOrigin } from './hooks';
20
- import { unlock } from '../../private-apis';
21
- const {
22
- useGlobalSetting,
23
- useGlobalStyle
24
- } = unlock(blockEditorPrivateApis);
25
-
26
- function ScreenBackgroundColor(_ref) {
27
- let {
28
- name,
29
- variation = ''
30
- } = _ref;
31
- const prefix = variation ? `variations.${variation}.` : '';
32
- const supports = useSupportedStyles(name);
33
- const [areCustomSolidsEnabled] = useGlobalSetting('color.custom', name);
34
- const [areCustomGradientsEnabled] = useGlobalSetting('color.customGradient', name);
35
- const colorsPerOrigin = useColorsPerOrigin(name);
36
- const gradientsPerOrigin = useGradientsPerOrigin(name);
37
- const [isBackgroundEnabled] = useGlobalSetting('color.background', name);
38
- const hasBackgroundColor = supports.includes('backgroundColor') && isBackgroundEnabled && (colorsPerOrigin.length > 0 || areCustomSolidsEnabled);
39
- const hasGradientColor = supports.includes('background') && (gradientsPerOrigin.length > 0 || areCustomGradientsEnabled);
40
- const [backgroundColor, setBackgroundColor] = useGlobalStyle(prefix + 'color.background', name);
41
- const [userBackgroundColor] = useGlobalStyle(prefix + 'color.background', name, 'user');
42
- const [gradient, setGradient] = useGlobalStyle(prefix + 'color.gradient', name);
43
- const [userGradient] = useGlobalStyle(prefix + 'color.gradient', name, 'user');
44
-
45
- if (!hasBackgroundColor && !hasGradientColor) {
46
- return null;
47
- }
48
-
49
- let backgroundSettings = {};
50
-
51
- if (hasBackgroundColor) {
52
- backgroundSettings = {
53
- colorValue: backgroundColor,
54
- onColorChange: setBackgroundColor
55
- };
56
-
57
- if (backgroundColor) {
58
- backgroundSettings.clearable = backgroundColor === userBackgroundColor;
59
- }
60
- }
61
-
62
- let gradientSettings = {};
63
-
64
- if (hasGradientColor) {
65
- gradientSettings = {
66
- gradientValue: gradient,
67
- onGradientChange: setGradient
68
- };
69
-
70
- if (gradient) {
71
- gradientSettings.clearable = gradient === userGradient;
72
- }
73
- }
74
-
75
- const controlProps = { ...backgroundSettings,
76
- ...gradientSettings
77
- };
78
- return createElement(Fragment, null, createElement(ScreenHeader, {
79
- title: __('Background'),
80
- description: __('Set a background color or gradient for the whole site.')
81
- }), createElement(ColorGradientControl, _extends({
82
- className: classnames('edit-site-screen-background-color__control', {
83
- 'has-no-tabs': !hasBackgroundColor || !hasGradientColor
84
- }),
85
- colors: colorsPerOrigin,
86
- gradients: gradientsPerOrigin,
87
- disableCustomColors: !areCustomSolidsEnabled,
88
- disableCustomGradients: !areCustomGradientsEnabled,
89
- showTitle: false,
90
- enableAlpha: true,
91
- __experimentalIsRenderedInSidebar: true,
92
- headingLevel: 3
93
- }, controlProps)));
94
- }
95
-
96
- export default ScreenBackgroundColor;
97
- //# sourceMappingURL=screen-background-color.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-background-color.js"],"names":["classnames","__","__experimentalColorGradientControl","ColorGradientControl","privateApis","blockEditorPrivateApis","ScreenHeader","useSupportedStyles","useColorsPerOrigin","useGradientsPerOrigin","unlock","useGlobalSetting","useGlobalStyle","ScreenBackgroundColor","name","variation","prefix","supports","areCustomSolidsEnabled","areCustomGradientsEnabled","colorsPerOrigin","gradientsPerOrigin","isBackgroundEnabled","hasBackgroundColor","includes","length","hasGradientColor","backgroundColor","setBackgroundColor","userBackgroundColor","gradient","setGradient","userGradient","backgroundSettings","colorValue","onColorChange","clearable","gradientSettings","gradientValue","onGradientChange","controlProps"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\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 {\n\tuseSupportedStyles,\n\tuseColorsPerOrigin,\n\tuseGradientsPerOrigin,\n} from './hooks';\nimport { unlock } from '../../private-apis';\n\nconst { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nfunction ScreenBackgroundColor( { name, variation = '' } ) {\n\tconst prefix = variation ? `variations.${ variation }.` : '';\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 colorsPerOrigin = useColorsPerOrigin( name );\n\tconst gradientsPerOrigin = useGradientsPerOrigin( name );\n\n\tconst [ isBackgroundEnabled ] = useGlobalSetting(\n\t\t'color.background',\n\t\tname\n\t);\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\tconst [ backgroundColor, setBackgroundColor ] = useGlobalStyle(\n\t\tprefix + 'color.background',\n\t\tname\n\t);\n\tconst [ userBackgroundColor ] = useGlobalStyle(\n\t\tprefix + 'color.background',\n\t\tname,\n\t\t'user'\n\t);\n\tconst [ gradient, setGradient ] = useGlobalStyle(\n\t\tprefix + 'color.gradient',\n\t\tname\n\t);\n\tconst [ userGradient ] = useGlobalStyle(\n\t\tprefix + 'color.gradient',\n\t\tname,\n\t\t'user'\n\t);\n\n\tif ( ! 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={ __( 'Background' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set a background color or gradient for the whole site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<ColorGradientControl\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'edit-site-screen-background-color__control',\n\t\t\t\t\t{\n\t\t\t\t\t\t'has-no-tabs':\n\t\t\t\t\t\t\t! hasBackgroundColor || ! hasGradientColor,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tgradients={ gradientsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\tdisableCustomGradients={ ! areCustomGradientsEnabled }\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\theadingLevel={ 3 }\n\t\t\t\t{ ...controlProps }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenBackgroundColor;\n"]}
@@ -1,73 +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 ScreenButtonColor(_ref) {
21
- let {
22
- name,
23
- variation = ''
24
- } = _ref;
25
- const prefix = variation ? `variations.${variation}.` : '';
26
- const supports = useSupportedStyles(name);
27
- const colorsPerOrigin = useColorsPerOrigin(name);
28
- const [areCustomSolidsEnabled] = useGlobalSetting('color.custom', name);
29
- const [isBackgroundEnabled] = useGlobalSetting('color.background', name);
30
- const hasButtonColor = supports.includes('buttonColor') && isBackgroundEnabled && (colorsPerOrigin.length > 0 || areCustomSolidsEnabled);
31
- const [buttonTextColor, setButtonTextColor] = useGlobalStyle(prefix + 'elements.button.color.text', name);
32
- const [userButtonTextColor] = useGlobalStyle('elements.button.color.text', name, 'user');
33
- const [buttonBgColor, setButtonBgColor] = useGlobalStyle('elements.button.color.background', name);
34
- const [userButtonBgColor] = useGlobalStyle('elements.button.color.background', name, 'user');
35
-
36
- if (!hasButtonColor) {
37
- return null;
38
- }
39
-
40
- return createElement(Fragment, null, createElement(ScreenHeader, {
41
- title: __('Buttons'),
42
- description: __('Set the default colors used for buttons across the site.')
43
- }), createElement("h3", {
44
- className: "edit-site-global-styles-section-title"
45
- }, __('Text color')), createElement(ColorGradientControl, {
46
- className: "edit-site-screen-button-color__control",
47
- colors: colorsPerOrigin,
48
- disableCustomColors: !areCustomSolidsEnabled,
49
- showTitle: false,
50
- enableAlpha: true,
51
- __experimentalIsRenderedInSidebar: true,
52
- colorValue: buttonTextColor,
53
- onColorChange: setButtonTextColor,
54
- clearable: buttonTextColor === userButtonTextColor,
55
- headingLevel: 4
56
- }), createElement("h3", {
57
- className: "edit-site-global-styles-section-title"
58
- }, __('Background color')), createElement(ColorGradientControl, {
59
- className: "edit-site-screen-button-color__control",
60
- colors: colorsPerOrigin,
61
- disableCustomColors: !areCustomSolidsEnabled,
62
- showTitle: false,
63
- enableAlpha: true,
64
- __experimentalIsRenderedInSidebar: true,
65
- colorValue: buttonBgColor,
66
- onColorChange: setButtonBgColor,
67
- clearable: buttonBgColor === userButtonBgColor,
68
- headingLevel: 4
69
- }));
70
- }
71
-
72
- export default ScreenButtonColor;
73
- //# sourceMappingURL=screen-button-color.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-button-color.js"],"names":["__","__experimentalColorGradientControl","ColorGradientControl","privateApis","blockEditorPrivateApis","ScreenHeader","useSupportedStyles","useColorsPerOrigin","unlock","useGlobalSetting","useGlobalStyle","ScreenButtonColor","name","variation","prefix","supports","colorsPerOrigin","areCustomSolidsEnabled","isBackgroundEnabled","hasButtonColor","includes","length","buttonTextColor","setButtonTextColor","userButtonTextColor","buttonBgColor","setButtonBgColor","userButtonBgColor"],"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';\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 ScreenButtonColor( { name, variation = '' } ) {\n\tconst prefix = variation ? `variations.${ variation }.` : '';\n\tconst supports = useSupportedStyles( name );\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\tconst [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );\n\tconst [ isBackgroundEnabled ] = useGlobalSetting(\n\t\t'color.background',\n\t\tname\n\t);\n\n\tconst hasButtonColor =\n\t\tsupports.includes( 'buttonColor' ) &&\n\t\tisBackgroundEnabled &&\n\t\t( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );\n\n\tconst [ buttonTextColor, setButtonTextColor ] = useGlobalStyle(\n\t\tprefix + 'elements.button.color.text',\n\t\tname\n\t);\n\tconst [ userButtonTextColor ] = useGlobalStyle(\n\t\t'elements.button.color.text',\n\t\tname,\n\t\t'user'\n\t);\n\n\tconst [ buttonBgColor, setButtonBgColor ] = useGlobalStyle(\n\t\t'elements.button.color.background',\n\t\tname\n\t);\n\tconst [ userButtonBgColor ] = useGlobalStyle(\n\t\t'elements.button.color.background',\n\t\tname,\n\t\t'user'\n\t);\n\n\tif ( ! hasButtonColor ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Buttons' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the default colors used for buttons across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<h3 className=\"edit-site-global-styles-section-title\">\n\t\t\t\t{ __( 'Text color' ) }\n\t\t\t</h3>\n\n\t\t\t<ColorGradientControl\n\t\t\t\tclassName=\"edit-site-screen-button-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={ buttonTextColor }\n\t\t\t\tonColorChange={ setButtonTextColor }\n\t\t\t\tclearable={ buttonTextColor === userButtonTextColor }\n\t\t\t\theadingLevel={ 4 }\n\t\t\t/>\n\n\t\t\t<h3 className=\"edit-site-global-styles-section-title\">\n\t\t\t\t{ __( 'Background color' ) }\n\t\t\t</h3>\n\n\t\t\t<ColorGradientControl\n\t\t\t\tclassName=\"edit-site-screen-button-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={ buttonBgColor }\n\t\t\t\tonColorChange={ setButtonBgColor }\n\t\t\t\tclearable={ buttonBgColor === userButtonBgColor }\n\t\t\t\theadingLevel={ 4 }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenButtonColor;\n"]}
@@ -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,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
- }