Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

GlobalStyles hooks: do not smart merge presets in useGlobalSetting #47415

Merged
merged 1 commit into from
Jan 26, 2023
Merged

GlobalStyles hooks: do not smart merge presets in useGlobalSetting #47415

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions packages/block-editor/src/components/global-styles/README.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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 );
Copy link
Member

Choose a reason for hiding this comment

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

Nice change the useColorsPerOrigin hook already includes only not empty origins so we can just rely on it 👍 .

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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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