Skip to content

Commit fa08e73

Browse files
youknowriadramonjdtellthemachines
authored
Styles: Move global styles data logic to a dedicated package (#72464)
Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
1 parent 6d8fd43 commit fa08e73

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+4262
-2860
lines changed

‎docs/manifest.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1715,6 +1715,12 @@
17151715
"markdown_source": "../packages/format-library/README.md",
17161716
"parent": "packages"
17171717
},
1718+
{
1719+
"title": "@wordpress/global-styles-engine",
1720+
"slug": "packages-global-styles-engine",
1721+
"markdown_source": "../packages/global-styles-engine/README.md",
1722+
"parent": "packages"
1723+
},
17181724
{
17191725
"title": "@wordpress/hooks",
17201726
"slug": "packages-hooks",

‎package-lock.json‎

Lines changed: 25 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/block-editor/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@
7171
"@wordpress/dom": "file:../dom",
7272
"@wordpress/element": "file:../element",
7373
"@wordpress/escape-html": "file:../escape-html",
74+
"@wordpress/global-styles-engine": "file:../global-styles-engine",
7475
"@wordpress/hooks": "file:../hooks",
7576
"@wordpress/html-entities": "file:../html-entities",
7677
"@wordpress/i18n": "file:../i18n",

‎packages/block-editor/src/components/background-image-control/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,11 @@ import { useRef, useState, useEffect, useMemo } from '@wordpress/element';
3333
import { useDispatch, useSelect } from '@wordpress/data';
3434
import { focus } from '@wordpress/dom';
3535
import { isBlobURL } from '@wordpress/blob';
36+
import { getResolvedValue } from '@wordpress/global-styles-engine';
3637

3738
/**
3839
* Internal dependencies
3940
*/
40-
import { getResolvedValue } from '../global-styles/utils';
4141
import { hasBackgroundImageValue } from '../global-styles/background-panel';
4242
import { setImmutably } from '../../utils/object';
4343
import MediaReplaceFlow from '../media-replace-flow';

‎packages/block-editor/src/components/global-styles/border-panel.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,14 @@ import {
1111
} from '@wordpress/components';
1212
import { useCallback, useMemo } from '@wordpress/element';
1313
import { __ } from '@wordpress/i18n';
14+
import { getValueFromVariable } from '@wordpress/global-styles-engine';
1415

1516
/**
1617
* Internal dependencies
1718
*/
1819
import BorderRadiusControl from '../border-radius-control';
1920
import { useColorsPerOrigin } from './hooks';
20-
import { getValueFromVariable, useToolsPanelDropdownMenuProps } from './utils';
21+
import { useToolsPanelDropdownMenuProps } from './utils';
2122
import { setImmutably } from '../../utils/object';
2223
import { useBorderPanelLabel } from '../../hooks/border';
2324
import { ShadowPopover, useShadowPresets } from './shadow-panel-components';

‎packages/block-editor/src/components/global-styles/color-panel.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,14 @@ import {
2121
} from '@wordpress/components';
2222
import { useCallback, useRef } from '@wordpress/element';
2323
import { __ } from '@wordpress/i18n';
24+
import { getValueFromVariable } from '@wordpress/global-styles-engine';
2425

2526
/**
2627
* Internal dependencies
2728
*/
2829
import ColorGradientControl from '../colors-gradients/control';
2930
import { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';
30-
import { getValueFromVariable, useToolsPanelDropdownMenuProps } from './utils';
31+
import { useToolsPanelDropdownMenuProps } from './utils';
3132
import { setImmutably } from '../../utils/object';
3233
import { unlock } from '../../lock-unlock';
3334
import { reset as resetIcon } from '@wordpress/icons';

‎packages/block-editor/src/components/global-styles/color-panel.native.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ import { useSelect } from '@wordpress/data';
55
import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
66
import { __ } from '@wordpress/i18n';
77
import { store as blockEditorStore } from '@wordpress/block-editor';
8+
import { getValueFromVariable } from '@wordpress/global-styles-engine';
89

910
/**
1011
* Internal dependencies
1112
*/
1213
import PanelColorGradientSettings from '../colors-gradients/panel-color-gradient-settings';
1314
import { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';
14-
import { getValueFromVariable } from './utils';
1515
import { setImmutably } from '../../utils/object';
1616
import ContrastChecker from '../contrast-checker';
1717
import InspectorControls from '../inspector-controls';

‎packages/block-editor/src/components/global-styles/dimensions-panel.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,12 @@ import {
1717
} from '@wordpress/components';
1818
import { Icon, alignNone, stretchWide } from '@wordpress/icons';
1919
import { useCallback, useState, Platform } from '@wordpress/element';
20+
import { getValueFromVariable } from '@wordpress/global-styles-engine';
2021

2122
/**
2223
* Internal dependencies
2324
*/
24-
import { getValueFromVariable, useToolsPanelDropdownMenuProps } from './utils';
25+
import { useToolsPanelDropdownMenuProps } from './utils';
2526
import SpacingSizesControl from '../spacing-sizes-control';
2627
import HeightControl from '../height-control';
2728
import ChildLayoutControl from '../child-layout-control';

‎packages/block-editor/src/components/global-styles/filters-panel.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,12 @@ import {
2424
import { __, _x } from '@wordpress/i18n';
2525
import { useCallback, useMemo, useRef } from '@wordpress/element';
2626
import { reset as resetIcon } from '@wordpress/icons';
27+
import { getValueFromVariable } from '@wordpress/global-styles-engine';
2728

2829
/**
2930
* Internal dependencies
3031
*/
31-
import { getValueFromVariable, useToolsPanelDropdownMenuProps } from './utils';
32+
import { useToolsPanelDropdownMenuProps } from './utils';
3233
import { setImmutably } from '../../utils/object';
3334

3435
const EMPTY_ARRAY = [];

‎packages/block-editor/src/components/global-styles/hooks.js‎

Lines changed: 29 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -10,81 +10,21 @@ import { useContext, useCallback, useMemo } from '@wordpress/element';
1010
import { useSelect } from '@wordpress/data';
1111
import { store as blocksStore } from '@wordpress/blocks';
1212
import { _x } from '@wordpress/i18n';
13+
import {
14+
getSetting,
15+
getStyle,
16+
getPresetVariableFromValue,
17+
} from '@wordpress/global-styles-engine';
1318

1419
/**
1520
* Internal dependencies
1621
*/
17-
import { getValueFromVariable, getPresetVariableFromValue } from './utils';
18-
import { getValueFromObjectPath, setImmutably } from '../../utils/object';
22+
import { setImmutably } from '../../utils/object';
1923
import { GlobalStylesContext } from './context';
2024
import { unlock } from '../../lock-unlock';
2125

2226
const EMPTY_CONFIG = { settings: {}, styles: {} };
2327

24-
const VALID_SETTINGS = [
25-
'appearanceTools',
26-
'useRootPaddingAwareAlignments',
27-
'background.backgroundImage',
28-
'background.backgroundRepeat',
29-
'background.backgroundSize',
30-
'background.backgroundPosition',
31-
'border.color',
32-
'border.radius',
33-
'border.style',
34-
'border.width',
35-
'border.radiusSizes',
36-
'shadow.presets',
37-
'shadow.defaultPresets',
38-
'color.background',
39-
'color.button',
40-
'color.caption',
41-
'color.custom',
42-
'color.customDuotone',
43-
'color.customGradient',
44-
'color.defaultDuotone',
45-
'color.defaultGradients',
46-
'color.defaultPalette',
47-
'color.duotone',
48-
'color.gradients',
49-
'color.heading',
50-
'color.link',
51-
'color.palette',
52-
'color.text',
53-
'custom',
54-
'dimensions.aspectRatio',
55-
'dimensions.minHeight',
56-
'layout.contentSize',
57-
'layout.definitions',
58-
'layout.wideSize',
59-
'lightbox.enabled',
60-
'lightbox.allowEditing',
61-
'position.fixed',
62-
'position.sticky',
63-
'spacing.customSpacingSize',
64-
'spacing.defaultSpacingSizes',
65-
'spacing.spacingSizes',
66-
'spacing.spacingScale',
67-
'spacing.blockGap',
68-
'spacing.margin',
69-
'spacing.padding',
70-
'spacing.units',
71-
'typography.fluid',
72-
'typography.customFontSize',
73-
'typography.defaultFontSizes',
74-
'typography.dropCap',
75-
'typography.fontFamilies',
76-
'typography.fontSizes',
77-
'typography.fontStyle',
78-
'typography.fontWeight',
79-
'typography.letterSpacing',
80-
'typography.lineHeight',
81-
'typography.textAlign',
82-
'typography.textColumns',
83-
'typography.textDecoration',
84-
'typography.textTransform',
85-
'typography.writingMode',
86-
];
87-
8828
export const useGlobalStylesReset = () => {
8929
const { user, setUserConfig } = useContext( GlobalStylesContext );
9030
const config = {
@@ -103,7 +43,6 @@ export function useGlobalSetting( propertyPath, blockName, source = 'all' ) {
10343
const appendedBlockPath = blockName ? '.blocks.' + blockName : '';
10444
const appendedPropertyPath = propertyPath ? '.' + propertyPath : '';
10545
const contextualPath = `settings${ appendedBlockPath }${ appendedPropertyPath }`;
106-
const globalPath = `settings${ appendedPropertyPath }`;
10746
const sourceKey = source === 'all' ? 'merged' : source;
10847

10948
const settingValue = useMemo( () => {
@@ -112,34 +51,9 @@ export function useGlobalSetting( propertyPath, blockName, source = 'all' ) {
11251
throw 'Unsupported source';
11352
}
11453

115-
if ( propertyPath ) {
116-
return (
117-
getValueFromObjectPath( configToUse, contextualPath ) ??
118-
getValueFromObjectPath( configToUse, globalPath )
119-
);
120-
}
121-
122-
let result = {};
123-
VALID_SETTINGS.forEach( ( setting ) => {
124-
const value =
125-
getValueFromObjectPath(
126-
configToUse,
127-
`settings${ appendedBlockPath }.${ setting }`
128-
) ??
129-
getValueFromObjectPath( configToUse, `settings.${ setting }` );
130-
if ( value !== undefined ) {
131-
result = setImmutably( result, setting.split( '.' ), value );
132-
}
133-
} );
134-
return result;
135-
}, [
136-
configs,
137-
sourceKey,
138-
propertyPath,
139-
contextualPath,
140-
globalPath,
141-
appendedBlockPath,
142-
] );
54+
// Use engine's getSetting instead of duplicating logic
55+
return getSetting( configToUse, propertyPath, blockName );
56+
}, [ configs, sourceKey, propertyPath, blockName ] );
14357

14458
const setSetting = ( newValue ) => {
14559
setUserConfig( ( currentConfig ) =>
@@ -183,25 +97,32 @@ export function useGlobalStyle(
18397
);
18498
};
18599

186-
let rawResult, result;
100+
let result;
101+
// Use engine's getStyle instead of duplicating logic
187102
switch ( source ) {
188103
case 'all':
189-
rawResult = getValueFromObjectPath( mergedConfig, finalPath );
190-
result = shouldDecodeEncode
191-
? getValueFromVariable( mergedConfig, blockName, rawResult )
192-
: rawResult;
104+
result = getStyle(
105+
mergedConfig,
106+
path,
107+
blockName,
108+
shouldDecodeEncode
109+
);
193110
break;
194111
case 'user':
195-
rawResult = getValueFromObjectPath( userConfig, finalPath );
196-
result = shouldDecodeEncode
197-
? getValueFromVariable( mergedConfig, blockName, rawResult )
198-
: rawResult;
112+
result = getStyle(
113+
userConfig,
114+
path,
115+
blockName,
116+
shouldDecodeEncode
117+
);
199118
break;
200119
case 'base':
201-
rawResult = getValueFromObjectPath( baseConfig, finalPath );
202-
result = shouldDecodeEncode
203-
? getValueFromVariable( baseConfig, blockName, rawResult )
204-
: rawResult;
120+
result = getStyle(
121+
baseConfig,
122+
path,
123+
blockName,
124+
shouldDecodeEncode
125+
);
205126
break;
206127
default:
207128
throw 'Unsupported source';

0 commit comments

Comments
 (0)