Skip to content

Commit

Permalink
GlobalStyles hooks: do not smart merge presets in useGlobalSetting (#…
Browse files Browse the repository at this point in the history 
…47415)
  • Loading branch information
@youknowriad
youknowriad committed Jan 26, 2023
1 parent 416f517 commit 046d404
Show file tree
Hide file tree
Showing 9 changed files with 38 additions and 49 deletions.
9 changes: 4 additions & 5 deletions packages/block-editor/src/components/global-styles/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,13 +65,12 @@ A react hook used to retrieve the setting applied to a given context.
import { useGlobalSetting } from '@wordpress/block-editor';

function MyComponent() {
// The default color palette.
const [ colorPalette, setColorPalette ] = useGlobalSetting( 'color.palette' );
// The theme color palette.
const [ colorPalette, setColorPalette ] = useGlobalSetting( 'color.palette.theme' );

// The base (theme + core) color palette for the paragraph block,
// ignoring user provided palette.
// The theme color palette for the paragraph block, ignoring user changes.
// If the palette is not defined for the paragraph block, the root one is returned.
const [ pColor, setPColor ] = useGlobalSetting( 'color.palette', 'core/paragraph', 'base' );
const [ pColor, setPColor ] = useGlobalSetting( 'color.palette.theme', 'core/paragraph', 'base' );

return "Something";
}
Expand Down
20 changes: 4 additions & 16 deletions packages/block-editor/src/components/global-styles/hooks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { get, set } from 'lodash';
* WordPress dependencies
*/
import { useContext, useCallback } from '@wordpress/element';
import { __EXPERIMENTAL_PATHS_WITH_MERGE as PATHS_WITH_MERGE } from '@wordpress/blocks';

/**
* Internal dependencies
Expand Down Expand Up @@ -46,10 +45,7 @@ export function useGlobalSetting( path, blockName, source = 'all' ) {
setUserConfig( ( currentConfig ) => {
// Deep clone `currentConfig` to avoid mutating it later.
const newUserConfig = JSON.parse( JSON.stringify( currentConfig ) );
const pathToSet = PATHS_WITH_MERGE[ path ]
? fullPath + '.custom'
: fullPath;
set( newUserConfig, pathToSet, newValue );
set( newUserConfig, fullPath, newValue );

return newUserConfig;
} );
Expand All @@ -60,24 +56,16 @@ export function useGlobalSetting( path, blockName, source = 'all' ) {
? `settings.${ path }`
: `settings.blocks.${ name }.${ path }`;

const getSettingValue = ( configToUse ) => {
const result = get( configToUse, currentPath );
if ( PATHS_WITH_MERGE[ path ] ) {
return result?.custom ?? result?.theme ?? result?.default;
}
return result;
};

let result;
switch ( source ) {
case 'all':
result = getSettingValue( mergedConfig );
result = get( mergedConfig, currentPath );
break;
case 'user':
result = getSettingValue( userConfig );
result = get( userConfig, currentPath );
break;
case 'base':
result = getSettingValue( baseConfig );
result = get( baseConfig, currentPath );
break;
default:
throw 'Unsupported source';
Expand Down
4 changes: 3 additions & 1 deletion packages/edit-site/src/components/global-styles/dimensions-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,8 +96,10 @@ function useHasMinHeight( name ) {

function useHasSpacingPresets() {
const [ settings ] = useGlobalSetting( 'spacing.spacingSizes' );
const { custom, theme, default: defaultPresets } = settings || {};
const presets = custom ?? theme ?? defaultPresets ?? [];

return settings && settings.length > 0;
return settings && presets.length > 0;
}

function filterValuesBySides( values, sides ) {
Expand Down
7 changes: 2 additions & 5 deletions packages/edit-site/src/components/global-styles/screen-background-color.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,11 @@ const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );

function ScreenBackgroundColor( { name, variationPath = '' } ) {
const supports = getSupportedGlobalStylesPanels( name );
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 colorsPerOrigin = useColorsPerOrigin( name );
const gradientsPerOrigin = useGradientsPerOrigin( name );

Expand All @@ -46,10 +43,10 @@ function ScreenBackgroundColor( { name, variationPath = '' } ) {
const hasBackgroundColor =
supports.includes( 'backgroundColor' ) &&
isBackgroundEnabled &&
( solids.length > 0 || areCustomSolidsEnabled );
( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
const hasGradientColor =
supports.includes( 'background' ) &&
( gradients.length > 0 || areCustomGradientsEnabled );
( gradientsPerOrigin.length > 0 || areCustomGradientsEnabled );
const [ backgroundColor, setBackgroundColor ] = useGlobalStyle(
variationPath + 'color.background',
name
Expand Down
7 changes: 2 additions & 5 deletions packages/edit-site/src/components/global-styles/screen-button-color.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,8 @@ const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );

function ScreenButtonColor( { name, variationPath = '' } ) {
const supports = getSupportedGlobalStylesPanels( name );
const [ solids ] = useGlobalSetting( 'color.palette', name );
const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );

const colorsPerOrigin = useColorsPerOrigin( name );

const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
const [ isBackgroundEnabled ] = useGlobalSetting(
'color.background',
name
Expand All @@ -31,7 +28,7 @@ function ScreenButtonColor( { name, variationPath = '' } ) {
const hasButtonColor =
supports.includes( 'buttonColor' ) &&
isBackgroundEnabled &&
( solids.length > 0 || areCustomSolidsEnabled );
( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );

const [ buttonTextColor, setButtonTextColor ] = useGlobalStyle(
variationPath + 'elements.button.color.text',
Expand Down
10 changes: 3 additions & 7 deletions packages/edit-site/src/components/global-styles/screen-heading-color.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,7 @@ const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );

function ScreenHeadingColor( { name, variationPath = '' } ) {
const [ selectedLevel, setCurrentTab ] = useState( 'heading' );

const supports = getSupportedGlobalStylesPanels( name );
const [ solids ] = useGlobalSetting( 'color.palette', name );
const [ gradients ] = useGlobalSetting( 'color.gradients', name );
const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
const [ areCustomGradientsEnabled ] = useGlobalSetting(
'color.customGradient',
Expand All @@ -41,22 +38,21 @@ function ScreenHeadingColor( { name, variationPath = '' } ) {
'color.background',
name
);

const colorsPerOrigin = useColorsPerOrigin( name );
const gradientsPerOrigin = useGradientsPerOrigin( name );

const hasTextColor =
supports.includes( 'color' ) &&
isTextEnabled &&
( solids.length > 0 || areCustomSolidsEnabled );
( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );

const hasBackgroundColor =
supports.includes( 'backgroundColor' ) &&
isBackgroundEnabled &&
( solids.length > 0 || areCustomSolidsEnabled );
( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
const hasGradientColor =
supports.includes( 'background' ) &&
( gradients.length > 0 || areCustomGradientsEnabled );
( gradientsPerOrigin.length > 0 || areCustomGradientsEnabled );

const [ color, setColor ] = useGlobalStyle(
variationPath + 'elements.' + selectedLevel + '.color.text',
Expand Down
5 changes: 1 addition & 4 deletions packages/edit-site/src/components/global-styles/screen-link-color.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,14 @@ const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );

function ScreenLinkColor( { name, variationPath = '' } ) {
const supports = getSupportedGlobalStylesPanels( name );
const [ solids ] = useGlobalSetting( 'color.palette', name );
const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );

const colorsPerOrigin = useColorsPerOrigin( name );

const [ isLinkEnabled ] = useGlobalSetting( 'color.link', name );

const hasLinkColor =
supports.includes( 'linkColor' ) &&
isLinkEnabled &&
( solids.length > 0 || areCustomSolidsEnabled );
( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );

const pseudoStates = {
default: {
Expand Down
4 changes: 1 addition & 3 deletions packages/edit-site/src/components/global-styles/screen-text-color.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,14 @@ const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );

function ScreenTextColor( { name, variationPath = '' } ) {
const supports = getSupportedGlobalStylesPanels( name );
const [ solids ] = useGlobalSetting( 'color.palette', name );
const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
const [ isTextEnabled ] = useGlobalSetting( 'color.text', name );

const colorsPerOrigin = useColorsPerOrigin( name );

const hasTextColor =
supports.includes( 'color' ) &&
isTextEnabled &&
( solids.length > 0 || areCustomSolidsEnabled );
( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );

const [ color, setColor ] = useGlobalStyle(
variationPath + 'color.text',
Expand Down
21 changes: 18 additions & 3 deletions packages/edit-site/src/components/global-styles/typography-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,14 @@ export function useHasTypographyPanel( name ) {

function useHasFontFamilyControl( name ) {
const supports = getSupportedGlobalStylesPanels( name );
const [ fontFamilies ] = useGlobalSetting(
const [ fontFamiliesPerOrigin ] = useGlobalSetting(
'typography.fontFamilies',
name
);
const fontFamilies =
fontFamiliesPerOrigin?.custom ||
fontFamiliesPerOrigin?.theme ||
fontFamiliesPerOrigin?.default;
return supports.includes( 'fontFamily' ) && !! fontFamilies?.length;
}

Expand Down Expand Up @@ -191,16 +195,27 @@ export default function TypographyPanel( {
} else if ( element && element !== 'text' ) {
prefix = `elements.${ element }.`;
}
const [ fontSizes ] = useGlobalSetting( 'typography.fontSizes', name );
const [ fontSizesPerOrigin ] = useGlobalSetting(
'typography.fontSizes',
name
);
const fontSizes =
fontSizesPerOrigin?.custom ||
fontSizesPerOrigin?.theme ||
fontSizesPerOrigin?.default;

const disableCustomFontSizes = ! useGlobalSetting(
'typography.customFontSize',
name
)[ 0 ];
const [ fontFamilies ] = useGlobalSetting(
const [ fontFamiliesPerOrigin ] = useGlobalSetting(
'typography.fontFamilies',
name
);
const fontFamilies =
fontFamiliesPerOrigin?.custom ||
fontFamiliesPerOrigin?.theme ||
fontFamiliesPerOrigin?.default;
const hasFontStyles =
useGlobalSetting( 'typography.fontStyle', name )[ 0 ] &&
supports.includes( 'fontStyle' );
Expand Down

1 comment on commit 046d404

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 046d404.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4012999293
📝 Reported issues:

Please sign in to comment.