From 5ac562da75d30ff19e4d7707302dbe1ee5471496 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Thu, 19 Jan 2023 15:58:59 +1100 Subject: [PATCH] lock() the Global Styles APIs --- packages/block-editor/README.md | 24 ++------- packages/block-editor/package.json | 1 + .../src/components/global-styles/README.md | 16 +++--- .../src/components/global-styles/hooks.js | 4 +- .../src/components/global-styles/index.js | 5 +- .../global-styles/use-global-styles-output.js | 4 +- packages/block-editor/src/components/index.js | 1 - packages/block-editor/src/experiments.js | 23 ++++++++ packages/block-editor/src/index.js | 1 + packages/edit-site/package.json | 1 + .../global-styles-renderer/index.js | 5 +- .../components/global-styles/border-panel.js | 23 ++++---- .../global-styles/color-palette-panel.js | 21 +++++--- .../components/global-styles/custom-css.js | 13 +++-- .../global-styles/dimensions-panel.js | 42 ++++++++------- .../global-styles/global-styles-provider.js | 5 +- .../global-styles/gradients-palette-panel.js | 28 ++++++---- .../src/components/global-styles/hooks.js | 38 +++++++++---- .../src/components/global-styles/palette.js | 13 +++-- .../src/components/global-styles/preview.js | 37 ++++++++----- .../global-styles/screen-background-color.js | 27 ++++++---- .../global-styles/screen-button-color.js | 23 ++++---- .../components/global-styles/screen-colors.js | 23 ++++---- .../global-styles/screen-heading-color.js | 33 +++++++----- .../global-styles/screen-link-color.js | 25 +++++---- .../global-styles/screen-style-variations.js | 5 +- .../global-styles/screen-text-color.js | 19 ++++--- .../global-styles/screen-typography.js | 31 ++++++++--- .../global-styles/typography-panel.js | 54 +++++++++++-------- .../global-styles/typography-preview.js | 37 +++++++++---- .../global-styles-sidebar.js | 5 +- .../src/components/style-book/index.js | 16 ++++-- packages/edit-site/src/experiments.js | 10 ++++ .../push-changes-to-global-styles/index.js | 5 +- packages/experiments/src/implementation.js | 1 + 35 files changed, 394 insertions(+), 225 deletions(-) create mode 100644 packages/block-editor/src/experiments.js create mode 100644 packages/edit-site/src/experiments.js diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 65424d423b020..7ccac465a336a 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -348,6 +348,10 @@ _Returns_ Undocumented declaration. +### experiments + +Experimental @wordpress/block-editor APIs. + ### FontSizePicker _Related_ @@ -527,10 +531,6 @@ _Returns_ - `Object`: Typography block support derived CSS classes & styles. -### GlobalStylesContext - -Undocumented declaration. - ### InnerBlocks _Related_ @@ -792,18 +792,6 @@ _Returns_ - `any`: value -### useGlobalStylesOutput - -Undocumented declaration. - -### useGlobalStylesReset - -Undocumented declaration. - -### useGlobalStylesSetting - -Undocumented declaration. - ### useInnerBlocksProps This hook is used to lightly mark an element as an inner blocks wrapper @@ -844,10 +832,6 @@ _Returns_ - `any`: Returns the value defined for the setting. -### useStyle - -Undocumented declaration. - ### Warning _Related_ diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json index d33c015ad77dd..00e570a3fefc4 100644 --- a/packages/block-editor/package.json +++ b/packages/block-editor/package.json @@ -45,6 +45,7 @@ "@wordpress/dom": "file:../dom", "@wordpress/element": "file:../element", "@wordpress/escape-html": "file:../escape-html", + "@wordpress/experiments": "file:../experiments", "@wordpress/hooks": "file:../hooks", "@wordpress/html-entities": "file:../html-entities", "@wordpress/i18n": "file:../i18n", diff --git a/packages/block-editor/src/components/global-styles/README.md b/packages/block-editor/src/components/global-styles/README.md index 4988f84ec9356..dc4d52eaff4d0 100644 --- a/packages/block-editor/src/components/global-styles/README.md +++ b/packages/block-editor/src/components/global-styles/README.md @@ -39,39 +39,39 @@ function MyComponent() { } ``` -## useStyle +## useGlobalStyle A react hook used to retrieve the style applied to a given context. ```js -import { useStyle } from '@wordpress/block-editor'; +import { useGlobalStyle } from '@wordpress/block-editor'; function MyComponent() { // Text color for the site root. - const [ color, setColor ] = useStyle( 'color.text' ); + const [ color, setColor ] = useGlobalStyle( 'color.text' ); // The user modified color for the core paragraph block. - const [ pColor, setPColor ] = useStyle( 'color.text', 'core/paragraph', 'user' ); + const [ pColor, setPColor ] = useGlobalStyle( 'color.text', 'core/paragraph', 'user' ); return "Something"; } ``` -## useSetting +## useGlobalSetting A react hook used to retrieve the setting applied to a given context. ```js -import { useGlobalStylesSetting as useSetting } from '@wordpress/block-editor'; +import { useGlobalSetting } from '@wordpress/block-editor'; function MyComponent() { // The default color palette. - const [ colorPalette, setColorPalette ] = useSetting( 'color.palette' ); + const [ colorPalette, setColorPalette ] = useGlobalSetting( 'color.palette' ); // The base (theme + core) color palette for the paragraph block, // ignoring user provided palette. // If the palette is not defined for the paragraph block, the root one is returned. - const [ pColor, setPColor ] = useSetting( 'color.palette', 'core/paragraph', 'base' ); + const [ pColor, setPColor ] = useGlobalSetting( 'color.palette', 'core/paragraph', 'base' ); return "Something"; } diff --git a/packages/block-editor/src/components/global-styles/hooks.js b/packages/block-editor/src/components/global-styles/hooks.js index 4831ec0bc5f49..776b83b71aa4d 100644 --- a/packages/block-editor/src/components/global-styles/hooks.js +++ b/packages/block-editor/src/components/global-styles/hooks.js @@ -30,7 +30,7 @@ export const useGlobalStylesReset = () => { ]; }; -export function useSetting( path, blockName, source = 'all' ) { +export function useGlobalSetting( path, blockName, source = 'all' ) { const { merged: mergedConfig, base: baseConfig, @@ -93,7 +93,7 @@ export function useSetting( path, blockName, source = 'all' ) { return [ resultWithFallback, setSetting ]; } -export function useStyle( path, blockName, source = 'all' ) { +export function useGlobalStyle( path, blockName, source = 'all' ) { const { merged: mergedConfig, base: baseConfig, diff --git a/packages/block-editor/src/components/global-styles/index.js b/packages/block-editor/src/components/global-styles/index.js index c675b868f6d73..cd0c8cdf487c5 100644 --- a/packages/block-editor/src/components/global-styles/index.js +++ b/packages/block-editor/src/components/global-styles/index.js @@ -1,8 +1,7 @@ -// TODO: Should probably __experimental these. export { useGlobalStylesReset, - useStyle, - useSetting as useGlobalStylesSetting, // TODO: Naming conflict with useSetting from @wordpress/block-editor. Are they the same function? + useGlobalSetting, + useGlobalStyle, } from './hooks'; export { useGlobalStylesOutput } from './use-global-styles-output'; export { GlobalStylesContext } from './context'; diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js index b436b96ee004e..cc7dc5c6669fd 100644 --- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js +++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js @@ -22,7 +22,7 @@ import { getCSSRules } from '@wordpress/style-engine'; import { PRESET_METADATA, ROOT_BLOCK_SELECTOR, scopeSelector } from './utils'; import { getTypographyFontSizeValue } from './typography-utils'; import { GlobalStylesContext } from './context'; -import { useSetting } from './hooks'; +import { useGlobalSetting } from './hooks'; import { PresetDuotoneFilter } from '../duotone/components'; import { getGapCSSValue } from '../../hooks/gap'; import { store as blockEditorStore } from '../../store'; @@ -997,7 +997,7 @@ function updateConfigWithSeparator( config ) { export function useGlobalStylesOutput() { let { merged: mergedConfig } = useContext( GlobalStylesContext ); - const [ blockGap ] = useSetting( 'spacing.blockGap' ); + const [ blockGap ] = useGlobalSetting( 'spacing.blockGap' ); const hasBlockGapSupport = blockGap !== null; const hasFallbackGapSupport = ! hasBlockGapSupport; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback styles support. const disableLayoutStyles = useSelect( ( select ) => { diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 911ca440a5e39..3f392fa4ef199 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -161,4 +161,3 @@ export { default as __experimentalInspectorPopoverHeader } from './inspector-pop export { default as BlockEditorProvider } from './provider'; export { default as useSetting } from './use-setting'; -export * from './global-styles'; // TODO: Should this instead be in @wordpress/global-styles? diff --git a/packages/block-editor/src/experiments.js b/packages/block-editor/src/experiments.js new file mode 100644 index 0000000000000..b217e14ec273b --- /dev/null +++ b/packages/block-editor/src/experiments.js @@ -0,0 +1,23 @@ +/** + * WordPress dependencies + */ +import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/experiments'; + +/** + * Internal dependencies + */ +import * as globalStyles from './components/global-styles'; + +export const { lock, unlock } = + __dangerousOptInToUnstableAPIsOnlyForCoreModules( + 'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.', + '@wordpress/block-editor' + ); + +/** + * Experimental @wordpress/block-editor APIs. + */ +export const experiments = {}; +lock( experiments, { + ...globalStyles, +} ); diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js index 1c81c910b21e1..d883aa455bc8f 100644 --- a/packages/block-editor/src/index.js +++ b/packages/block-editor/src/index.js @@ -20,3 +20,4 @@ export * from './elements'; export * from './utils'; export { storeConfig, store } from './store'; export { SETTINGS_DEFAULTS } from './store/defaults'; +export { experiments } from './experiments'; diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json index f3a8e8d72edd4..dc1ba91a20f14 100644 --- a/packages/edit-site/package.json +++ b/packages/edit-site/package.json @@ -39,6 +39,7 @@ "@wordpress/deprecated": "file:../deprecated", "@wordpress/editor": "file:../editor", "@wordpress/element": "file:../element", + "@wordpress/experiments": "file:../experiments", "@wordpress/hooks": "file:../hooks", "@wordpress/html-entities": "file:../html-entities", "@wordpress/i18n": "file:../i18n", diff --git a/packages/edit-site/src/components/global-styles-renderer/index.js b/packages/edit-site/src/components/global-styles-renderer/index.js index b65fb7d6f9644..5cc592131c6b8 100644 --- a/packages/edit-site/src/components/global-styles-renderer/index.js +++ b/packages/edit-site/src/components/global-styles-renderer/index.js @@ -3,12 +3,15 @@ */ import { useEffect } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; -import { useGlobalStylesOutput } from '@wordpress/block-editor'; +import { experiments as blockEditorExperiments } from '@wordpress/block-editor'; /** * Internal dependencies */ import { store as editSiteStore } from '../../store'; +import { unlock } from '../../experiments'; + +const { useGlobalStylesOutput } = unlock( blockEditorExperiments ); function useGlobalStylesRenderer() { const [ styles, settings, svgFilters ] = useGlobalStylesOutput(); diff --git a/packages/edit-site/src/components/global-styles/border-panel.js b/packages/edit-site/src/components/global-styles/border-panel.js index 6e07d1be8e2be..cc38d09b4c716 100644 --- a/packages/edit-site/src/components/global-styles/border-panel.js +++ b/packages/edit-site/src/components/global-styles/border-panel.js @@ -3,8 +3,7 @@ */ import { __experimentalBorderRadiusControl as BorderRadiusControl, - useGlobalStylesSetting as useSetting, - useStyle, + experiments as blockEditorExperiments, } from '@wordpress/block-editor'; import { __experimentalBorderBoxControl as BorderBoxControl, @@ -20,6 +19,9 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import { getSupportedGlobalStylesPanels, useColorsPerOrigin } from './hooks'; +import { unlock } from '../../experiments'; + +const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments ); export function useHasBorderPanel( name ) { const controls = [ @@ -35,7 +37,7 @@ export function useHasBorderPanel( name ) { function useHasBorderColorControl( name ) { const supports = getSupportedGlobalStylesPanels( name ); return ( - useSetting( 'border.color', name )[ 0 ] && + useGlobalSetting( 'border.color', name )[ 0 ] && supports.includes( 'borderColor' ) ); } @@ -43,7 +45,7 @@ function useHasBorderColorControl( name ) { function useHasBorderRadiusControl( name ) { const supports = getSupportedGlobalStylesPanels( name ); return ( - useSetting( 'border.radius', name )[ 0 ] && + useGlobalSetting( 'border.radius', name )[ 0 ] && supports.includes( 'borderRadius' ) ); } @@ -51,7 +53,7 @@ function useHasBorderRadiusControl( name ) { function useHasBorderStyleControl( name ) { const supports = getSupportedGlobalStylesPanels( name ); return ( - useSetting( 'border.style', name )[ 0 ] && + useGlobalSetting( 'border.style', name )[ 0 ] && supports.includes( 'borderStyle' ) ); } @@ -59,7 +61,7 @@ function useHasBorderStyleControl( name ) { function useHasBorderWidthControl( name ) { const supports = getSupportedGlobalStylesPanels( name ); return ( - useSetting( 'border.width', name )[ 0 ] && + useGlobalSetting( 'border.width', name )[ 0 ] && supports.includes( 'borderWidth' ) ); } @@ -96,12 +98,15 @@ function applyAllFallbackStyles( border ) { export default function BorderPanel( { name, variationPath = '' } ) { // To better reflect if the user has customized a value we need to // ensure the style value being checked is from the `user` origin. - const [ userBorderStyles ] = useStyle( + const [ userBorderStyles ] = useGlobalStyle( `${ variationPath }border`, name, 'user' ); - const [ border, setBorder ] = useStyle( `${ variationPath }border`, name ); + const [ border, setBorder ] = useGlobalStyle( + `${ variationPath }border`, + name + ); const colors = useColorsPerOrigin( name ); const showBorderColor = useHasBorderColorControl( name ); @@ -110,7 +115,7 @@ export default function BorderPanel( { name, variationPath = '' } ) { // Border radius. const showBorderRadius = useHasBorderRadiusControl( name ); - const [ borderRadiusValues, setBorderRadius ] = useStyle( + const [ borderRadiusValues, setBorderRadius ] = useGlobalStyle( `${ variationPath }border.radius`, name ); diff --git a/packages/edit-site/src/components/global-styles/color-palette-panel.js b/packages/edit-site/src/components/global-styles/color-palette-panel.js index da02531c3b562..f29adec52b5ce 100644 --- a/packages/edit-site/src/components/global-styles/color-palette-panel.js +++ b/packages/edit-site/src/components/global-styles/color-palette-panel.js @@ -6,33 +6,40 @@ import { __experimentalVStack as VStack, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { useGlobalStylesSetting as useSetting } from '@wordpress/block-editor'; +import { experiments as blockEditorExperiments } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import { unlock } from '../../experiments'; + +const { useGlobalSetting } = unlock( blockEditorExperiments ); export default function ColorPalettePanel( { name } ) { - const [ themeColors, setThemeColors ] = useSetting( + const [ themeColors, setThemeColors ] = useGlobalSetting( 'color.palette.theme', name ); - const [ baseThemeColors ] = useSetting( + const [ baseThemeColors ] = useGlobalSetting( 'color.palette.theme', name, 'base' ); - const [ defaultColors, setDefaultColors ] = useSetting( + const [ defaultColors, setDefaultColors ] = useGlobalSetting( 'color.palette.default', name ); - const [ baseDefaultColors ] = useSetting( + const [ baseDefaultColors ] = useGlobalSetting( 'color.palette.default', name, 'base' ); - const [ customColors, setCustomColors ] = useSetting( + const [ customColors, setCustomColors ] = useGlobalSetting( 'color.palette.custom', name ); - const [ defaultPaletteEnabled ] = useSetting( + const [ defaultPaletteEnabled ] = useGlobalSetting( 'color.defaultPalette', name ); diff --git a/packages/edit-site/src/components/global-styles/custom-css.js b/packages/edit-site/src/components/global-styles/custom-css.js index 5ef7c8bea7476..944ec4afb8bb1 100644 --- a/packages/edit-site/src/components/global-styles/custom-css.js +++ b/packages/edit-site/src/components/global-styles/custom-css.js @@ -8,11 +8,18 @@ import { PanelBody, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { useStyle } from '@wordpress/block-editor'; +import { experiments as blockEditorExperiments } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import { unlock } from '../../experiments'; + +const { useGlobalStyle } = unlock( blockEditorExperiments ); function CustomCSSControl() { - const [ customCSS, setCustomCSS ] = useStyle( 'css' ); - const [ themeCSS ] = useStyle( 'css', null, 'base' ); + const [ customCSS, setCustomCSS ] = useGlobalStyle( 'css' ); + const [ themeCSS ] = useGlobalStyle( 'css', null, 'base' ); const ignoreThemeCustomCSS = '/* IgnoreThemeCustomCSS */'; // If there is custom css from theme.json show it in the edit box diff --git a/packages/edit-site/src/components/global-styles/dimensions-panel.js b/packages/edit-site/src/components/global-styles/dimensions-panel.js index 0e150250e6ab4..772eb5f3e47f5 100644 --- a/packages/edit-site/src/components/global-styles/dimensions-panel.js +++ b/packages/edit-site/src/components/global-styles/dimensions-panel.js @@ -20,8 +20,7 @@ import { __experimentalUseCustomSides as useCustomSides, __experimentalHeightControl as HeightControl, __experimentalSpacingSizesControl as SpacingSizesControl, - useGlobalStylesSetting as useSetting, - useStyle, + experiments as blockEditorExperiments, } from '@wordpress/block-editor'; import { Icon, positionCenter, stretchWide } from '@wordpress/icons'; @@ -29,6 +28,9 @@ import { Icon, positionCenter, stretchWide } from '@wordpress/icons'; * Internal dependencies */ import { getSupportedGlobalStylesPanels } from './hooks'; +import { unlock } from '../../experiments'; + +const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments ); const AXIAL_SIDES = [ 'horizontal', 'vertical' ]; @@ -52,48 +54,48 @@ export function useHasDimensionsPanel( name ) { function useHasContentSize( name ) { const supports = getSupportedGlobalStylesPanels( name ); - const [ settings ] = useSetting( 'layout.contentSize', name ); + const [ settings ] = useGlobalSetting( 'layout.contentSize', name ); return settings && supports.includes( 'contentSize' ); } function useHasWideSize( name ) { const supports = getSupportedGlobalStylesPanels( name ); - const [ settings ] = useSetting( 'layout.wideSize', name ); + const [ settings ] = useGlobalSetting( 'layout.wideSize', name ); return settings && supports.includes( 'wideSize' ); } function useHasPadding( name ) { const supports = getSupportedGlobalStylesPanels( name ); - const [ settings ] = useSetting( 'spacing.padding', name ); + const [ settings ] = useGlobalSetting( 'spacing.padding', name ); return settings && supports.includes( 'padding' ); } function useHasMargin( name ) { const supports = getSupportedGlobalStylesPanels( name ); - const [ settings ] = useSetting( 'spacing.margin', name ); + const [ settings ] = useGlobalSetting( 'spacing.margin', name ); return settings && supports.includes( 'margin' ); } function useHasGap( name ) { const supports = getSupportedGlobalStylesPanels( name ); - const [ settings ] = useSetting( 'spacing.blockGap', name ); + const [ settings ] = useGlobalSetting( 'spacing.blockGap', name ); return settings && supports.includes( 'blockGap' ); } function useHasMinHeight( name ) { const supports = getSupportedGlobalStylesPanels( name ); - const [ settings ] = useSetting( 'dimensions.minHeight', name ); + const [ settings ] = useGlobalSetting( 'dimensions.minHeight', name ); return settings && supports.includes( 'minHeight' ); } function useHasSpacingPresets() { - const [ settings ] = useSetting( 'spacing.spacingSizes' ); + const [ settings ] = useGlobalSetting( 'spacing.spacingSizes' ); return settings && settings.length > 0; } @@ -158,11 +160,11 @@ function splitGapValue( value ) { // Props for managing `layout.contentSize`. function useContentSizeProps( name ) { - const [ contentSizeValue, setContentSizeValue ] = useSetting( + const [ contentSizeValue, setContentSizeValue ] = useGlobalSetting( 'layout.contentSize', name ); - const [ userSetContentSizeValue ] = useSetting( + const [ userSetContentSizeValue ] = useGlobalSetting( 'layout.contentSize', name, 'user' @@ -179,11 +181,11 @@ function useContentSizeProps( name ) { // Props for managing `layout.wideSize`. function useWideSizeProps( name ) { - const [ wideSizeValue, setWideSizeValue ] = useSetting( + const [ wideSizeValue, setWideSizeValue ] = useGlobalSetting( 'layout.wideSize', name ); - const [ userSetWideSizeValue ] = useSetting( + const [ userSetWideSizeValue ] = useGlobalSetting( 'layout.wideSize', name, 'user' @@ -200,7 +202,7 @@ function useWideSizeProps( name ) { // Props for managing `spacing.padding`. function usePaddingProps( name, variationPath = '' ) { - const [ rawPadding, setRawPadding ] = useStyle( + const [ rawPadding, setRawPadding ] = useGlobalStyle( variationPath + 'spacing.padding', name ); @@ -215,7 +217,7 @@ function usePaddingProps( name, variationPath = '' ) { setRawPadding( padding ); }; const resetPaddingValue = () => setPaddingValues( {} ); - const [ userSetPaddingValue ] = useStyle( + const [ userSetPaddingValue ] = useGlobalStyle( variationPath + 'spacing.padding', name, 'user' @@ -235,7 +237,7 @@ function usePaddingProps( name, variationPath = '' ) { // Props for managing `spacing.margin`. function useMarginProps( name, variationPath = '' ) { - const [ rawMargin, setRawMargin ] = useStyle( + const [ rawMargin, setRawMargin ] = useGlobalStyle( variationPath + 'spacing.margin', name ); @@ -265,7 +267,7 @@ function useMarginProps( name, variationPath = '' ) { // Props for managing `spacing.blockGap`. function useBlockGapProps( name, variationPath = '' ) { - const [ gapValue, setGapValue ] = useStyle( + const [ gapValue, setGapValue ] = useGlobalStyle( variationPath + 'spacing.blockGap', name ); @@ -274,7 +276,7 @@ function useBlockGapProps( name, variationPath = '' ) { const isAxialGap = gapSides && gapSides.some( ( side ) => AXIAL_SIDES.includes( side ) ); const resetGapValue = () => setGapValue( undefined ); - const [ userSetGapValue ] = useStyle( + const [ userSetGapValue ] = useGlobalStyle( variationPath + 'spacing.blockGap', name, 'user' @@ -308,7 +310,7 @@ function useBlockGapProps( name, variationPath = '' ) { // Props for managing `dimensions.minHeight`. function useMinHeightProps( name, variationPath = '' ) { - const [ minHeightValue, setMinHeightValue ] = useStyle( + const [ minHeightValue, setMinHeightValue ] = useGlobalStyle( variationPath + 'dimensions.minHeight', name ); @@ -331,7 +333,7 @@ export default function DimensionsPanel( { name, variationPath = '' } ) { const showMinHeightControl = useHasMinHeight( name ); const showSpacingPresetsControl = useHasSpacingPresets(); const units = useCustomUnits( { - availableUnits: useSetting( 'spacing.units', name )[ 0 ] || [ + availableUnits: useGlobalSetting( 'spacing.units', name )[ 0 ] || [ '%', 'px', 'em', diff --git a/packages/edit-site/src/components/global-styles/global-styles-provider.js b/packages/edit-site/src/components/global-styles/global-styles-provider.js index 1ceb9b388df9f..5570522383122 100644 --- a/packages/edit-site/src/components/global-styles/global-styles-provider.js +++ b/packages/edit-site/src/components/global-styles/global-styles-provider.js @@ -9,12 +9,15 @@ import { mergeWith, isEmpty, mapValues } from 'lodash'; import { useMemo, useCallback } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; +import { experiments as blockEditorExperiments } from '@wordpress/block-editor'; /** * Internal dependencies */ import CanvasSpinner from '../canvas-spinner'; -import { GlobalStylesContext } from '@wordpress/block-editor'; +import { unlock } from '../../experiments'; + +const { GlobalStylesContext } = unlock( blockEditorExperiments ); function mergeTreesCustomizer( _, srcValue ) { // We only pass as arrays the presets, diff --git a/packages/edit-site/src/components/global-styles/gradients-palette-panel.js b/packages/edit-site/src/components/global-styles/gradients-palette-panel.js index 65be560d44d14..6febec95e1197 100644 --- a/packages/edit-site/src/components/global-styles/gradients-palette-panel.js +++ b/packages/edit-site/src/components/global-styles/gradients-palette-panel.js @@ -8,48 +8,54 @@ import { DuotonePicker, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { useGlobalStylesSetting as useSetting } from '@wordpress/block-editor'; +import { experiments as blockEditorExperiments } from '@wordpress/block-editor'; /** * Internal dependencies */ import Subtitle from './subtitle'; +import { unlock } from '../../experiments'; + +const { useGlobalSetting } = unlock( blockEditorExperiments ); const noop = () => {}; export default function GradientPalettePanel( { name } ) { - const [ themeGradients, setThemeGradients ] = useSetting( + const [ themeGradients, setThemeGradients ] = useGlobalSetting( 'color.gradients.theme', name ); - const [ baseThemeGradients ] = useSetting( + const [ baseThemeGradients ] = useGlobalSetting( 'color.gradients.theme', name, 'base' ); - const [ defaultGradients, setDefaultGradients ] = useSetting( + const [ defaultGradients, setDefaultGradients ] = useGlobalSetting( 'color.gradients.default', name ); - const [ baseDefaultGradients ] = useSetting( + const [ baseDefaultGradients ] = useGlobalSetting( 'color.gradients.default', name, 'base' ); - const [ customGradients, setCustomGradients ] = useSetting( + const [ customGradients, setCustomGradients ] = useGlobalSetting( 'color.gradients.custom', name ); - const [ defaultPaletteEnabled ] = useSetting( + const [ defaultPaletteEnabled ] = useGlobalSetting( 'color.defaultGradients', name ); - const [ customDuotone ] = useSetting( 'color.duotone.custom' ) || []; - const [ defaultDuotone ] = useSetting( 'color.duotone.default' ) || []; - const [ themeDuotone ] = useSetting( 'color.duotone.theme' ) || []; - const [ defaultDuotoneEnabled ] = useSetting( 'color.defaultDuotone' ); + const [ customDuotone ] = useGlobalSetting( 'color.duotone.custom' ) || []; + const [ defaultDuotone ] = + useGlobalSetting( 'color.duotone.default' ) || []; + const [ themeDuotone ] = useGlobalSetting( 'color.duotone.theme' ) || []; + const [ defaultDuotoneEnabled ] = useGlobalSetting( + 'color.defaultDuotone' + ); const duotonePalette = [ ...( customDuotone || [] ), diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js index 35b6f425a76b9..0dadd18c7827d 100644 --- a/packages/edit-site/src/components/global-styles/hooks.js +++ b/packages/edit-site/src/components/global-styles/hooks.js @@ -14,7 +14,14 @@ import { getBlockType, __EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY, } from '@wordpress/blocks'; -import { useGlobalStylesSetting as useSetting } from '@wordpress/block-editor'; +import { experiments as blockEditorExperiments } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import { unlock } from '../../experiments'; + +const { useGlobalSetting } = unlock( blockEditorExperiments ); // Enable colord's a11y plugin. extend( [ a11yPlugin ] ); @@ -100,10 +107,12 @@ export function getSupportedGlobalStylesPanels( name ) { } export function useColorsPerOrigin( name ) { - const [ customColors ] = useSetting( 'color.palette.custom', name ); - const [ themeColors ] = useSetting( 'color.palette.theme', name ); - const [ defaultColors ] = useSetting( 'color.palette.default', name ); - const [ shouldDisplayDefaultColors ] = useSetting( 'color.defaultPalette' ); + const [ customColors ] = useGlobalSetting( 'color.palette.custom', name ); + const [ themeColors ] = useGlobalSetting( 'color.palette.theme', name ); + const [ defaultColors ] = useGlobalSetting( 'color.palette.default', name ); + const [ shouldDisplayDefaultColors ] = useGlobalSetting( + 'color.defaultPalette' + ); return useMemo( () => { const result = []; @@ -143,10 +152,19 @@ export function useColorsPerOrigin( name ) { } export function useGradientsPerOrigin( name ) { - const [ customGradients ] = useSetting( 'color.gradients.custom', name ); - const [ themeGradients ] = useSetting( 'color.gradients.theme', name ); - const [ defaultGradients ] = useSetting( 'color.gradients.default', name ); - const [ shouldDisplayDefaultGradients ] = useSetting( + const [ customGradients ] = useGlobalSetting( + 'color.gradients.custom', + name + ); + const [ themeGradients ] = useGlobalSetting( + 'color.gradients.theme', + name + ); + const [ defaultGradients ] = useGlobalSetting( + 'color.gradients.default', + name + ); + const [ shouldDisplayDefaultGradients ] = useGlobalSetting( 'color.defaultGradients' ); @@ -188,7 +206,7 @@ export function useGradientsPerOrigin( name ) { } export function useColorRandomizer( name ) { - const [ themeColors, setThemeColors ] = useSetting( + const [ themeColors, setThemeColors ] = useGlobalSetting( 'color.palette.theme', name ); diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js index bd31633809c89..09148a55bd57a 100644 --- a/packages/edit-site/src/components/global-styles/palette.js +++ b/packages/edit-site/src/components/global-styles/palette.js @@ -13,7 +13,7 @@ import { import { __, _n, sprintf } from '@wordpress/i18n'; import { shuffle } from '@wordpress/icons'; import { useMemo } from '@wordpress/element'; -import { useGlobalStylesSetting as useSetting } from '@wordpress/block-editor'; +import { experiments as blockEditorExperiments } from '@wordpress/block-editor'; /** * Internal dependencies @@ -22,15 +22,18 @@ import Subtitle from './subtitle'; import { NavigationButtonAsItem } from './navigation-button'; import { useColorRandomizer } from './hooks'; import ColorIndicatorWrapper from './color-indicator-wrapper'; +import { unlock } from '../../experiments'; + +const { useGlobalSetting } = unlock( blockEditorExperiments ); const EMPTY_COLORS = []; function Palette( { name } ) { - const [ customColors ] = useSetting( 'color.palette.custom' ); - const [ themeColors ] = useSetting( 'color.palette.theme' ); - const [ defaultColors ] = useSetting( 'color.palette.default' ); + const [ customColors ] = useGlobalSetting( 'color.palette.custom' ); + const [ themeColors ] = useGlobalSetting( 'color.palette.theme' ); + const [ defaultColors ] = useGlobalSetting( 'color.palette.default' ); - const [ defaultPaletteEnabled ] = useSetting( + const [ defaultPaletteEnabled ] = useGlobalSetting( 'color.defaultPalette', name ); diff --git a/packages/edit-site/src/components/global-styles/preview.js b/packages/edit-site/src/components/global-styles/preview.js index efa822cb4c0ed..521e0d2d7ed1b 100644 --- a/packages/edit-site/src/components/global-styles/preview.js +++ b/packages/edit-site/src/components/global-styles/preview.js @@ -4,9 +4,7 @@ import { __unstableIframe as Iframe, __unstableEditorStyles as EditorStyles, - useGlobalStylesSetting as useSetting, - useStyle, - useGlobalStylesOutput, + experiments as blockEditorExperiments, } from '@wordpress/block-editor'; import { __unstableMotion as motion, @@ -16,6 +14,15 @@ import { import { useReducedMotion, useResizeObserver } from '@wordpress/compose'; import { useState, useMemo } from '@wordpress/element'; +/** + * Internal dependencies + */ +import { unlock } from '../../experiments'; + +const { useGlobalSetting, useGlobalStyle, useGlobalStylesOutput } = unlock( + blockEditorExperiments +); + const firstFrame = { start: { scale: 1, @@ -53,23 +60,25 @@ const normalizedHeight = 152; const normalizedColorSwatchSize = 32; const StylesPreview = ( { label, isFocused, withHoverView } ) => { - const [ fontWeight ] = useStyle( 'typography.fontWeight' ); - const [ fontFamily = 'serif' ] = useStyle( 'typography.fontFamily' ); - const [ headingFontFamily = fontFamily ] = useStyle( + const [ fontWeight ] = useGlobalStyle( 'typography.fontWeight' ); + const [ fontFamily = 'serif' ] = useGlobalStyle( 'typography.fontFamily' ); + const [ headingFontFamily = fontFamily ] = useGlobalStyle( 'elements.h1.typography.fontFamily' ); - const [ headingFontWeight = fontWeight ] = useStyle( + const [ headingFontWeight = fontWeight ] = useGlobalStyle( 'elements.h1.typography.fontWeight' ); - const [ textColor = 'black' ] = useStyle( 'color.text' ); - const [ headingColor = textColor ] = useStyle( 'elements.h1.color.text' ); - const [ backgroundColor = 'white' ] = useStyle( 'color.background' ); - const [ gradientValue ] = useStyle( 'color.gradient' ); + const [ textColor = 'black' ] = useGlobalStyle( 'color.text' ); + const [ headingColor = textColor ] = useGlobalStyle( + 'elements.h1.color.text' + ); + const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' ); + const [ gradientValue ] = useGlobalStyle( 'color.gradient' ); const [ styles ] = useGlobalStylesOutput(); const disableMotion = useReducedMotion(); - const [ coreColors ] = useSetting( 'color.palette.core' ); - const [ themeColors ] = useSetting( 'color.palette.theme' ); - const [ customColors ] = useSetting( 'color.palette.custom' ); + const [ coreColors ] = useGlobalSetting( 'color.palette.core' ); + const [ themeColors ] = useGlobalSetting( 'color.palette.theme' ); + const [ customColors ] = useGlobalSetting( 'color.palette.custom' ); const [ isHovered, setIsHovered ] = useState( false ); const [ containerResizeListener, { width } ] = useResizeObserver(); const ratio = width ? width / normalizedWidth : 1; diff --git a/packages/edit-site/src/components/global-styles/screen-background-color.js b/packages/edit-site/src/components/global-styles/screen-background-color.js index ce9b71a202f2a..6ae0ece5e848e 100644 --- a/packages/edit-site/src/components/global-styles/screen-background-color.js +++ b/packages/edit-site/src/components/global-styles/screen-background-color.js @@ -9,8 +9,7 @@ import classnames from 'classnames'; import { __ } from '@wordpress/i18n'; import { __experimentalColorGradientControl as ColorGradientControl, - useGlobalStylesSetting as useSetting, - useStyle, + experiments as blockEditorExperiments, } from '@wordpress/block-editor'; /** @@ -22,13 +21,16 @@ import { useColorsPerOrigin, useGradientsPerOrigin, } from './hooks'; +import { unlock } from '../../experiments'; + +const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments ); function ScreenBackgroundColor( { name, variationPath = '' } ) { const supports = getSupportedGlobalStylesPanels( name ); - const [ solids ] = useSetting( 'color.palette', name ); - const [ gradients ] = useSetting( 'color.gradients', name ); - const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name ); - const [ areCustomGradientsEnabled ] = useSetting( + const [ solids ] = useGlobalSetting( 'color.palette', name ); + const [ gradients ] = useGlobalSetting( 'color.gradients', name ); + const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name ); + const [ areCustomGradientsEnabled ] = useGlobalSetting( 'color.customGradient', name ); @@ -36,7 +38,10 @@ function ScreenBackgroundColor( { name, variationPath = '' } ) { const colorsPerOrigin = useColorsPerOrigin( name ); const gradientsPerOrigin = useGradientsPerOrigin( name ); - const [ isBackgroundEnabled ] = useSetting( 'color.background', name ); + const [ isBackgroundEnabled ] = useGlobalSetting( + 'color.background', + name + ); const hasBackgroundColor = supports.includes( 'backgroundColor' ) && @@ -45,20 +50,20 @@ function ScreenBackgroundColor( { name, variationPath = '' } ) { const hasGradientColor = supports.includes( 'background' ) && ( gradients.length > 0 || areCustomGradientsEnabled ); - const [ backgroundColor, setBackgroundColor ] = useStyle( + const [ backgroundColor, setBackgroundColor ] = useGlobalStyle( variationPath + 'color.background', name ); - const [ userBackgroundColor ] = useStyle( + const [ userBackgroundColor ] = useGlobalStyle( variationPath + 'color.background', name, 'user' ); - const [ gradient, setGradient ] = useStyle( + const [ gradient, setGradient ] = useGlobalStyle( variationPath + 'color.gradient', name ); - const [ userGradient ] = useStyle( + const [ userGradient ] = useGlobalStyle( variationPath + 'color.gradient', name, 'user' diff --git a/packages/edit-site/src/components/global-styles/screen-button-color.js b/packages/edit-site/src/components/global-styles/screen-button-color.js index 031a4b3af4c8a..bc420ac79e425 100644 --- a/packages/edit-site/src/components/global-styles/screen-button-color.js +++ b/packages/edit-site/src/components/global-styles/screen-button-color.js @@ -4,8 +4,7 @@ import { __ } from '@wordpress/i18n'; import { __experimentalColorGradientControl as ColorGradientControl, - useGlobalStylesSetting as useSetting, - useStyle, + experiments as blockEditorExperiments, } from '@wordpress/block-editor'; /** @@ -13,36 +12,42 @@ import { */ import ScreenHeader from './header'; import { getSupportedGlobalStylesPanels, useColorsPerOrigin } from './hooks'; +import { unlock } from '../../experiments'; + +const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments ); function ScreenButtonColor( { name, variationPath = '' } ) { const supports = getSupportedGlobalStylesPanels( name ); - const [ solids ] = useSetting( 'color.palette', name ); - const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name ); + const [ solids ] = useGlobalSetting( 'color.palette', name ); + const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name ); const colorsPerOrigin = useColorsPerOrigin( name ); - const [ isBackgroundEnabled ] = useSetting( 'color.background', name ); + const [ isBackgroundEnabled ] = useGlobalSetting( + 'color.background', + name + ); const hasButtonColor = supports.includes( 'buttonColor' ) && isBackgroundEnabled && ( solids.length > 0 || areCustomSolidsEnabled ); - const [ buttonTextColor, setButtonTextColor ] = useStyle( + const [ buttonTextColor, setButtonTextColor ] = useGlobalStyle( variationPath + 'elements.button.color.text', name ); - const [ userButtonTextColor ] = useStyle( + const [ userButtonTextColor ] = useGlobalStyle( 'elements.button.color.text', name, 'user' ); - const [ buttonBgColor, setButtonBgColor ] = useStyle( + const [ buttonBgColor, setButtonBgColor ] = useGlobalStyle( 'elements.button.color.background', name ); - const [ userButtonBgColor ] = useStyle( + const [ userButtonBgColor ] = useGlobalStyle( 'elements.button.color.background', name, 'user' diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js index 88259075aabee..2d863f6a2b6d2 100644 --- a/packages/edit-site/src/components/global-styles/screen-colors.js +++ b/packages/edit-site/src/components/global-styles/screen-colors.js @@ -10,7 +10,7 @@ import { FlexItem, ColorIndicator, } from '@wordpress/components'; -import { useStyle } from '@wordpress/block-editor'; +import { experiments as blockEditorExperiments } from '@wordpress/block-editor'; /** * Internal dependencies @@ -23,6 +23,9 @@ import Subtitle from './subtitle'; import ColorIndicatorWrapper from './color-indicator-wrapper'; import BlockPreviewPanel from './block-preview-panel'; import { getVariationClassNameFromPath } from './utils'; +import { unlock } from '../../experiments'; + +const { useGlobalStyle } = unlock( blockEditorExperiments ); function variationPathToURL( variationPath ) { if ( ! variationPath ) { @@ -37,11 +40,11 @@ function BackgroundColorItem( { name, parentMenu, variationPath = '' } ) { const hasSupport = supports.includes( 'backgroundColor' ) || supports.includes( 'background' ); - const [ backgroundColor ] = useStyle( + const [ backgroundColor ] = useGlobalStyle( variationPath + 'color.background', name ); - const [ gradientValue ] = useStyle( + const [ gradientValue ] = useGlobalStyle( variationPath + 'color.gradient', name ); @@ -77,7 +80,7 @@ function BackgroundColorItem( { name, parentMenu, variationPath = '' } ) { function TextColorItem( { name, parentMenu, variationPath = '' } ) { const supports = getSupportedGlobalStylesPanels( name ); const hasSupport = supports.includes( 'color' ); - const [ color ] = useStyle( variationPath + 'color.text', name ); + const [ color ] = useGlobalStyle( variationPath + 'color.text', name ); if ( ! hasSupport ) { return null; @@ -110,11 +113,11 @@ function TextColorItem( { name, parentMenu, variationPath = '' } ) { function LinkColorItem( { name, parentMenu, variationPath = '' } ) { const supports = getSupportedGlobalStylesPanels( name ); const hasSupport = supports.includes( 'linkColor' ); - const [ color ] = useStyle( + const [ color ] = useGlobalStyle( variationPath + 'elements.link.color.text', name ); - const [ colorHover ] = useStyle( + const [ colorHover ] = useGlobalStyle( variationPath + 'elements.link.:hover.color.text', name ); @@ -152,11 +155,11 @@ function LinkColorItem( { name, parentMenu, variationPath = '' } ) { function HeadingColorItem( { name, parentMenu, variationPath = '' } ) { const supports = getSupportedGlobalStylesPanels( name ); const hasSupport = supports.includes( 'color' ); - const [ color ] = useStyle( + const [ color ] = useGlobalStyle( variationPath + 'elements.heading.color.text', name ); - const [ bgColor ] = useStyle( + const [ bgColor ] = useGlobalStyle( variationPath + 'elements.heading.color.background', name ); @@ -192,11 +195,11 @@ function HeadingColorItem( { name, parentMenu, variationPath = '' } ) { function ButtonColorItem( { name, parentMenu, variationPath = '' } ) { const supports = getSupportedGlobalStylesPanels( name ); const hasSupport = supports.includes( 'buttonColor' ); - const [ color ] = useStyle( + const [ color ] = useGlobalStyle( variationPath + 'elements.button.color.text', name ); - const [ bgColor ] = useStyle( + const [ bgColor ] = useGlobalStyle( variationPath + 'elements.button.color.background', name ); diff --git a/packages/edit-site/src/components/global-styles/screen-heading-color.js b/packages/edit-site/src/components/global-styles/screen-heading-color.js index ee01672ec399e..18566051bb9bc 100644 --- a/packages/edit-site/src/components/global-styles/screen-heading-color.js +++ b/packages/edit-site/src/components/global-styles/screen-heading-color.js @@ -8,8 +8,7 @@ import { } from '@wordpress/components'; import { __experimentalColorGradientControl as ColorGradientControl, - useGlobalStylesSetting as useSetting, - useStyle, + experiments as blockEditorExperiments, } from '@wordpress/block-editor'; import { useState } from '@wordpress/element'; @@ -22,20 +21,26 @@ import { useColorsPerOrigin, useGradientsPerOrigin, } from './hooks'; +import { unlock } from '../../experiments'; + +const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments ); function ScreenHeadingColor( { name, variationPath = '' } ) { const [ selectedLevel, setCurrentTab ] = useState( 'heading' ); const supports = getSupportedGlobalStylesPanels( name ); - const [ solids ] = useSetting( 'color.palette', name ); - const [ gradients ] = useSetting( 'color.gradients', name ); - const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name ); - const [ areCustomGradientsEnabled ] = useSetting( + const [ solids ] = useGlobalSetting( 'color.palette', name ); + const [ gradients ] = useGlobalSetting( 'color.gradients', name ); + const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name ); + const [ areCustomGradientsEnabled ] = useGlobalSetting( 'color.customGradient', name ); - const [ isTextEnabled ] = useSetting( 'color.text', name ); - const [ isBackgroundEnabled ] = useSetting( 'color.background', name ); + const [ isTextEnabled ] = useGlobalSetting( 'color.text', name ); + const [ isBackgroundEnabled ] = useGlobalSetting( + 'color.background', + name + ); const colorsPerOrigin = useColorsPerOrigin( name ); const gradientsPerOrigin = useGradientsPerOrigin( name ); @@ -53,30 +58,30 @@ function ScreenHeadingColor( { name, variationPath = '' } ) { supports.includes( 'background' ) && ( gradients.length > 0 || areCustomGradientsEnabled ); - const [ color, setColor ] = useStyle( + const [ color, setColor ] = useGlobalStyle( variationPath + 'elements.' + selectedLevel + '.color.text', name ); - const [ userColor ] = useStyle( + const [ userColor ] = useGlobalStyle( variationPath + 'elements.' + selectedLevel + '.color.text', name, 'user' ); - const [ backgroundColor, setBackgroundColor ] = useStyle( + const [ backgroundColor, setBackgroundColor ] = useGlobalStyle( variationPath + 'elements.' + selectedLevel + '.color.background', name ); - const [ userBackgroundColor ] = useStyle( + const [ userBackgroundColor ] = useGlobalStyle( variationPath + 'elements.' + selectedLevel + '.color.background', name, 'user' ); - const [ gradient, setGradient ] = useStyle( + const [ gradient, setGradient ] = useGlobalStyle( variationPath + 'elements.' + selectedLevel + '.color.gradient', name ); - const [ userGradient ] = useStyle( + const [ userGradient ] = useGlobalStyle( variationPath + 'elements.' + selectedLevel + '.color.gradient', name, 'user' diff --git a/packages/edit-site/src/components/global-styles/screen-link-color.js b/packages/edit-site/src/components/global-styles/screen-link-color.js index 1938c972bd0cd..049c2cc99d47a 100644 --- a/packages/edit-site/src/components/global-styles/screen-link-color.js +++ b/packages/edit-site/src/components/global-styles/screen-link-color.js @@ -4,24 +4,27 @@ import { __ } from '@wordpress/i18n'; import { __experimentalColorGradientControl as ColorGradientControl, - useGlobalStylesSetting as useSetting, - useStyle, + experiments as blockEditorExperiments, } from '@wordpress/block-editor'; import { TabPanel } from '@wordpress/components'; + /** * Internal dependencies */ import ScreenHeader from './header'; import { getSupportedGlobalStylesPanels, useColorsPerOrigin } from './hooks'; +import { unlock } from '../../experiments'; + +const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments ); function ScreenLinkColor( { name, variationPath = '' } ) { const supports = getSupportedGlobalStylesPanels( name ); - const [ solids ] = useSetting( 'color.palette', name ); - const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name ); + const [ solids ] = useGlobalSetting( 'color.palette', name ); + const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name ); const colorsPerOrigin = useColorsPerOrigin( name ); - const [ isLinkEnabled ] = useSetting( 'color.link', name ); + const [ isLinkEnabled ] = useGlobalSetting( 'color.link', name ); const hasLinkColor = supports.includes( 'linkColor' ) && @@ -31,15 +34,15 @@ function ScreenLinkColor( { name, variationPath = '' } ) { const pseudoStates = { default: { label: __( 'Default' ), - value: useStyle( + value: useGlobalStyle( variationPath + 'elements.link.color.text', name )[ 0 ], - handler: useStyle( + handler: useGlobalStyle( variationPath + 'elements.link.color.text', name )[ 1 ], - userValue: useStyle( + userValue: useGlobalStyle( variationPath + 'elements.link.color.text', name, 'user' @@ -47,15 +50,15 @@ function ScreenLinkColor( { name, variationPath = '' } ) { }, hover: { label: __( 'Hover' ), - value: useStyle( + value: useGlobalStyle( variationPath + 'elements.link.:hover.color.text', name )[ 0 ], - handler: useStyle( + handler: useGlobalStyle( variationPath + 'elements.link.:hover.color.text', name )[ 1 ], - userValue: useStyle( + userValue: useGlobalStyle( variationPath + 'elements.link.:hover.color.text', name, 'user' diff --git a/packages/edit-site/src/components/global-styles/screen-style-variations.js b/packages/edit-site/src/components/global-styles/screen-style-variations.js index 08cba2b38ad81..a94edce1cf92f 100644 --- a/packages/edit-site/src/components/global-styles/screen-style-variations.js +++ b/packages/edit-site/src/components/global-styles/screen-style-variations.js @@ -25,7 +25,7 @@ import { import { __ } from '@wordpress/i18n'; import { store as blockEditorStore, - GlobalStylesContext, + experiments as blockEditorExperiments, } from '@wordpress/block-editor'; /** @@ -34,6 +34,9 @@ import { import { mergeBaseAndUserConfigs } from './global-styles-provider'; import StylesPreview from './preview'; import ScreenHeader from './header'; +import { unlock } from '../../experiments'; + +const { GlobalStylesContext } = unlock( blockEditorExperiments ); function compareVariations( a, b ) { return ( diff --git a/packages/edit-site/src/components/global-styles/screen-text-color.js b/packages/edit-site/src/components/global-styles/screen-text-color.js index 1f8ddbbf729c9..d61cea759fd8a 100644 --- a/packages/edit-site/src/components/global-styles/screen-text-color.js +++ b/packages/edit-site/src/components/global-styles/screen-text-color.js @@ -4,8 +4,7 @@ import { __ } from '@wordpress/i18n'; import { __experimentalColorGradientControl as ColorGradientControl, - useGlobalStylesSetting as useSetting, - useStyle, + experiments as blockEditorExperiments, } from '@wordpress/block-editor'; /** @@ -13,12 +12,15 @@ import { */ import ScreenHeader from './header'; import { getSupportedGlobalStylesPanels, useColorsPerOrigin } from './hooks'; +import { unlock } from '../../experiments'; + +const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments ); function ScreenTextColor( { name, variationPath = '' } ) { const supports = getSupportedGlobalStylesPanels( name ); - const [ solids ] = useSetting( 'color.palette', name ); - const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name ); - const [ isTextEnabled ] = useSetting( 'color.text', name ); + const [ solids ] = useGlobalSetting( 'color.palette', name ); + const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name ); + const [ isTextEnabled ] = useGlobalSetting( 'color.text', name ); const colorsPerOrigin = useColorsPerOrigin( name ); @@ -27,8 +29,11 @@ function ScreenTextColor( { name, variationPath = '' } ) { isTextEnabled && ( solids.length > 0 || areCustomSolidsEnabled ); - const [ color, setColor ] = useStyle( variationPath + 'color.text', name ); - const [ userColor ] = useStyle( + const [ color, setColor ] = useGlobalStyle( + variationPath + 'color.text', + name + ); + const [ userColor ] = useGlobalStyle( variationPath + 'color.text', name, 'user' diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js index c4c1349cc242c..bd56273781a3f 100644 --- a/packages/edit-site/src/components/global-styles/screen-typography.js +++ b/packages/edit-site/src/components/global-styles/screen-typography.js @@ -8,7 +8,7 @@ import { __experimentalHStack as HStack, FlexItem, } from '@wordpress/components'; -import { useStyle } from '@wordpress/block-editor'; +import { experiments as blockEditorExperiments } from '@wordpress/block-editor'; /** * Internal dependencies @@ -19,6 +19,9 @@ import Subtitle from './subtitle'; import TypographyPanel from './typography-panel'; import BlockPreviewPanel from './block-preview-panel'; import { getVariationClassNameFromPath } from './utils'; +import { unlock } from '../../experiments'; + +const { useGlobalStyle } = unlock( blockEditorExperiments ); function Item( { name, parentMenu, element, label } ) { const hasSupport = ! name; @@ -30,16 +33,28 @@ function Item( { name, parentMenu, element, label } ) { textDecoration: 'underline', } : {}; - const [ fontFamily ] = useStyle( prefix + 'typography.fontFamily', name ); - const [ fontStyle ] = useStyle( prefix + 'typography.fontStyle', name ); - const [ fontWeight ] = useStyle( prefix + 'typography.fontWeight', name ); - const [ letterSpacing ] = useStyle( + const [ fontFamily ] = useGlobalStyle( + prefix + 'typography.fontFamily', + name + ); + const [ fontStyle ] = useGlobalStyle( + prefix + 'typography.fontStyle', + name + ); + const [ fontWeight ] = useGlobalStyle( + prefix + 'typography.fontWeight', + name + ); + const [ letterSpacing ] = useGlobalStyle( prefix + 'typography.letterSpacing', name ); - const [ backgroundColor ] = useStyle( prefix + 'color.background', name ); - const [ gradientValue ] = useStyle( prefix + 'color.gradient', name ); - const [ color ] = useStyle( prefix + 'color.text', name ); + const [ backgroundColor ] = useGlobalStyle( + prefix + 'color.background', + name + ); + const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient', name ); + const [ color ] = useGlobalStyle( prefix + 'color.text', name ); if ( ! hasSupport ) { return null; diff --git a/packages/edit-site/src/components/global-styles/typography-panel.js b/packages/edit-site/src/components/global-styles/typography-panel.js index 2f203ff932a63..938605ba11c4a 100644 --- a/packages/edit-site/src/components/global-styles/typography-panel.js +++ b/packages/edit-site/src/components/global-styles/typography-panel.js @@ -8,8 +8,7 @@ import { __experimentalLetterSpacingControl as LetterSpacingControl, __experimentalTextTransformControl as TextTransformControl, __experimentalTextDecorationControl as TextDecorationControl, - useGlobalStylesSetting as useSetting, - useStyle, + experiments as blockEditorExperiments, } from '@wordpress/block-editor'; import { FontSizePicker, @@ -22,6 +21,9 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import { getSupportedGlobalStylesPanels } from './hooks'; +import { unlock } from '../../experiments'; + +const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments ); export function useHasTypographyPanel( name ) { const hasFontFamily = useHasFontFamilyControl( name ); @@ -40,14 +42,17 @@ export function useHasTypographyPanel( name ) { function useHasFontFamilyControl( name ) { const supports = getSupportedGlobalStylesPanels( name ); - const [ fontFamilies ] = useSetting( 'typography.fontFamilies', name ); + const [ fontFamilies ] = useGlobalSetting( + 'typography.fontFamilies', + name + ); return supports.includes( 'fontFamily' ) && !! fontFamilies?.length; } function useHasLineHeightControl( name ) { const supports = getSupportedGlobalStylesPanels( name ); return ( - useSetting( 'typography.lineHeight', name )[ 0 ] && + useGlobalSetting( 'typography.lineHeight', name )[ 0 ] && supports.includes( 'lineHeight' ) ); } @@ -55,10 +60,10 @@ function useHasLineHeightControl( name ) { function useHasAppearanceControl( name ) { const supports = getSupportedGlobalStylesPanels( name ); const hasFontStyles = - useSetting( 'typography.fontStyle', name )[ 0 ] && + useGlobalSetting( 'typography.fontStyle', name )[ 0 ] && supports.includes( 'fontStyle' ); const hasFontWeights = - useSetting( 'typography.fontWeight', name )[ 0 ] && + useGlobalSetting( 'typography.fontWeight', name )[ 0 ] && supports.includes( 'fontWeight' ); return hasFontStyles || hasFontWeights; } @@ -66,10 +71,10 @@ function useHasAppearanceControl( name ) { function useAppearanceControlLabel( name ) { const supports = getSupportedGlobalStylesPanels( name ); const hasFontStyles = - useSetting( 'typography.fontStyle', name )[ 0 ] && + useGlobalSetting( 'typography.fontStyle', name )[ 0 ] && supports.includes( 'fontStyle' ); const hasFontWeights = - useSetting( 'typography.fontWeight', name )[ 0 ] && + useGlobalSetting( 'typography.fontWeight', name )[ 0 ] && supports.includes( 'fontWeight' ); if ( ! hasFontStyles ) { return __( 'Font weight' ); @@ -81,7 +86,7 @@ function useAppearanceControlLabel( name ) { } function useHasLetterSpacingControl( name, element ) { - const setting = useSetting( 'typography.letterSpacing', name )[ 0 ]; + const setting = useGlobalSetting( 'typography.letterSpacing', name )[ 0 ]; if ( ! setting ) { return false; } @@ -93,7 +98,7 @@ function useHasLetterSpacingControl( name, element ) { } function useHasTextTransformControl( name, element ) { - const setting = useSetting( 'typography.textTransform', name )[ 0 ]; + const setting = useGlobalSetting( 'typography.textTransform', name )[ 0 ]; if ( ! setting ) { return false; } @@ -112,16 +117,16 @@ function useHasTextDecorationControl( name, element ) { } function useStyleWithReset( path, blockName ) { - const [ style, setStyle ] = useStyle( path, blockName ); - const [ userStyle ] = useStyle( path, blockName, 'user' ); + const [ style, setStyle ] = useGlobalStyle( path, blockName ); + const [ userStyle ] = useGlobalStyle( path, blockName, 'user' ); const hasStyle = () => !! userStyle; const resetStyle = () => setStyle( undefined ); return [ style, setStyle, hasStyle, resetStyle ]; } function useFontSizeWithReset( path, blockName ) { - const [ fontSize, setStyleCallback ] = useStyle( path, blockName ); - const [ userStyle ] = useStyle( path, blockName, 'user' ); + const [ fontSize, setStyleCallback ] = useGlobalStyle( path, blockName ); + const [ userStyle ] = useGlobalStyle( path, blockName, 'user' ); const hasFontSize = () => !! userStyle; const resetFontSize = () => setStyleCallback( undefined ); const setFontSize = ( newValue, metadata ) => { @@ -140,20 +145,20 @@ function useFontSizeWithReset( path, blockName ) { } function useFontAppearance( prefix, name ) { - const [ fontStyle, setFontStyle ] = useStyle( + const [ fontStyle, setFontStyle ] = useGlobalStyle( prefix + 'typography.fontStyle', name ); - const [ userFontStyle ] = useStyle( + const [ userFontStyle ] = useGlobalStyle( prefix + 'typography.fontStyle', name, 'user' ); - const [ fontWeight, setFontWeight ] = useStyle( + const [ fontWeight, setFontWeight ] = useGlobalStyle( prefix + 'typography.fontWeight', name ); - const [ userFontWeight ] = useStyle( + const [ userFontWeight ] = useGlobalStyle( prefix + 'typography.fontWeight', name, 'user' @@ -186,18 +191,21 @@ export default function TypographyPanel( { } else if ( element && element !== 'text' ) { prefix = `elements.${ element }.`; } - const [ fontSizes ] = useSetting( 'typography.fontSizes', name ); + const [ fontSizes ] = useGlobalSetting( 'typography.fontSizes', name ); - const disableCustomFontSizes = ! useSetting( + const disableCustomFontSizes = ! useGlobalSetting( 'typography.customFontSize', name )[ 0 ]; - const [ fontFamilies ] = useSetting( 'typography.fontFamilies', name ); + const [ fontFamilies ] = useGlobalSetting( + 'typography.fontFamilies', + name + ); const hasFontStyles = - useSetting( 'typography.fontStyle', name )[ 0 ] && + useGlobalSetting( 'typography.fontStyle', name )[ 0 ] && supports.includes( 'fontStyle' ); const hasFontWeights = - useSetting( 'typography.fontWeight', name )[ 0 ] && + useGlobalSetting( 'typography.fontWeight', name )[ 0 ] && supports.includes( 'fontWeight' ); const hasFontFamilyEnabled = useHasFontFamilyControl( name ); const hasLineHeightEnabled = useHasLineHeightControl( name ); diff --git a/packages/edit-site/src/components/global-styles/typography-preview.js b/packages/edit-site/src/components/global-styles/typography-preview.js index d312149f40a2a..49c0d4e73b95b 100644 --- a/packages/edit-site/src/components/global-styles/typography-preview.js +++ b/packages/edit-site/src/components/global-styles/typography-preview.js @@ -1,7 +1,14 @@ /** * WordPress dependencies */ -import { useStyle } from '@wordpress/block-editor'; +import { experiments as blockEditorExperiments } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import { unlock } from '../../experiments'; + +const { useGlobalStyle } = unlock( blockEditorExperiments ); export default function TypographyPreview( { name, element, headingLevel } ) { let prefix = ''; @@ -11,14 +18,26 @@ export default function TypographyPreview( { name, element, headingLevel } ) { prefix = `elements.${ element }.`; } - const [ fontFamily ] = useStyle( prefix + 'typography.fontFamily', name ); - const [ gradientValue ] = useStyle( prefix + 'color.gradient', name ); - const [ backgroundColor ] = useStyle( prefix + 'color.background', name ); - const [ color ] = useStyle( prefix + 'color.text', name ); - const [ fontSize ] = useStyle( prefix + 'typography.fontSize', name ); - const [ fontStyle ] = useStyle( prefix + 'typography.fontStyle', name ); - const [ fontWeight ] = useStyle( prefix + 'typography.fontWeight', name ); - const [ letterSpacing ] = useStyle( + const [ fontFamily ] = useGlobalStyle( + prefix + 'typography.fontFamily', + name + ); + const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient', name ); + const [ backgroundColor ] = useGlobalStyle( + prefix + 'color.background', + name + ); + const [ color ] = useGlobalStyle( prefix + 'color.text', name ); + const [ fontSize ] = useGlobalStyle( prefix + 'typography.fontSize', name ); + const [ fontStyle ] = useGlobalStyle( + prefix + 'typography.fontStyle', + name + ); + const [ fontWeight ] = useGlobalStyle( + prefix + 'typography.fontWeight', + name + ); + const [ letterSpacing ] = useGlobalStyle( prefix + 'typography.letterSpacing', name ); diff --git a/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js index 00642f99d0602..d33beb68e5757 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js @@ -13,7 +13,7 @@ import { styles, moreVertical, seen } from '@wordpress/icons'; import { useDispatch, useSelect } from '@wordpress/data'; import { store as preferencesStore } from '@wordpress/preferences'; import { useState, useEffect } from '@wordpress/element'; -import { useGlobalStylesReset } from '@wordpress/block-editor'; +import { experiments as blockEditorExperiments } from '@wordpress/block-editor'; /** * Internal dependencies @@ -21,6 +21,9 @@ import { useGlobalStylesReset } from '@wordpress/block-editor'; import DefaultSidebar from './default-sidebar'; import { GlobalStylesUI } from '../global-styles'; import { store as editSiteStore } from '../../store'; +import { unlock } from '../../experiments'; + +const { useGlobalStylesReset } = unlock( blockEditorExperiments ); export default function GlobalStylesSidebar() { const [ canReset, onReset ] = useGlobalStylesReset(); diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index 2b608ceaf96ad..af38a19161ec3 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/packages/edit-site/src/components/style-book/index.js @@ -19,11 +19,21 @@ import { getBlockFromExample, createBlock, } from '@wordpress/blocks'; -import { BlockPreview, useStyle } from '@wordpress/block-editor'; +import { + BlockPreview, + experiments as blockEditorExperiments, +} from '@wordpress/block-editor'; import { closeSmall } from '@wordpress/icons'; import { useResizeObserver } from '@wordpress/compose'; import { useMemo, memo } from '@wordpress/element'; +/** + * Internal dependencies + */ +import { unlock } from '../../experiments'; + +const { useGlobalStyle } = unlock( blockEditorExperiments ); + const SLOT_FILL_NAME = 'EditSiteStyleBook'; const { Slot: StyleBookSlot, Fill: StyleBookFill } = createSlotFill( SLOT_FILL_NAME ); @@ -76,8 +86,8 @@ function getExamples() { function StyleBook( { isSelected, onSelect, onClose } ) { const [ resizeObserver, sizes ] = useResizeObserver(); - const [ textColor ] = useStyle( 'color.text' ); - const [ backgroundColor ] = useStyle( 'color.background' ); + const [ textColor ] = useGlobalStyle( 'color.text' ); + const [ backgroundColor ] = useGlobalStyle( 'color.background' ); const examples = useMemo( getExamples, [] ); const tabs = useMemo( () => diff --git a/packages/edit-site/src/experiments.js b/packages/edit-site/src/experiments.js new file mode 100644 index 0000000000000..a5c54a29b4475 --- /dev/null +++ b/packages/edit-site/src/experiments.js @@ -0,0 +1,10 @@ +/** + * WordPress dependencies + */ +import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/experiments'; + +export const { lock, unlock } = + __dangerousOptInToUnstableAPIsOnlyForCoreModules( + 'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.', + '@wordpress/edit-site' + ); diff --git a/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js b/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js index 88df65c87071e..c23b184876eb9 100644 --- a/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js +++ b/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js @@ -11,7 +11,7 @@ import { createHigherOrderComponent } from '@wordpress/compose'; import { InspectorAdvancedControls, store as blockEditorStore, - GlobalStylesContext, + experiments as blockEditorExperiments, } from '@wordpress/block-editor'; import { BaseControl, Button } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; @@ -27,6 +27,9 @@ import { store as noticesStore } from '@wordpress/notices'; * Internal dependencies */ import { getSupportedGlobalStylesPanels } from '../../components/global-styles/hooks'; +import { unlock } from '../../experiments'; + +const { GlobalStylesContext } = unlock( blockEditorExperiments ); // TODO: Temporary duplication of constant in @wordpress/block-editor. Can be // removed by moving PushChangesToGlobalStylesControl to diff --git a/packages/experiments/src/implementation.js b/packages/experiments/src/implementation.js index bf333b7e2646f..b818a3669d8e7 100644 --- a/packages/experiments/src/implementation.js +++ b/packages/experiments/src/implementation.js @@ -13,6 +13,7 @@ const CORE_MODULES_USING_EXPERIMENTS = [ '@wordpress/data', '@wordpress/blocks', '@wordpress/block-editor', + '@wordpress/edit-site', ]; /**