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.

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

Global Styles: Abstract preset variable retrieving and setting #26970

Merged

Conversation

jorgefilipecosta
Copy link
Member

This PR abstracts the retrieving and setting of preset variables inside getStyleProperty and setStyleProperty. With this change, the code inside the Global Style panels does not even need to know about presets, custom vars, etc.

How has this been tested?

I verified the variable styles set in 2021 are correctly reflected on the global styles UI.
I changed some values on the global styles UI to use some of the presets (font sizes, font family, colors, gradients) and verified using the browser dev tools the CSS vars are output in the generated CSS code.

@jorgefilipecosta jorgefilipecosta added the Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json label Nov 13, 2020
@github-actions
Copy link

github-actions bot commented Nov 13, 2020

Size Change: +6 B (0%)

Total Size: 1.2 MB

Filename Size Change
build/edit-site/index.js 23.4 kB +6 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.8 kB 0 B
build/api-fetch/index.js 3.42 kB 0 B
build/autop/index.js 2.83 kB 0 B
build/blob/index.js 665 B 0 B
build/block-directory/index.js 8.72 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/index.js 133 kB 0 B
build/block-editor/style-rtl.css 11.3 kB 0 B
build/block-editor/style.css 11.3 kB 0 B
build/block-library/editor-rtl.css 8.96 kB 0 B
build/block-library/editor.css 8.96 kB 0 B
build/block-library/index.js 148 kB 0 B
build/block-library/style-rtl.css 8.23 kB 0 B
build/block-library/style.css 8.23 kB 0 B
build/block-library/theme-rtl.css 792 B 0 B
build/block-library/theme.css 793 B 0 B
build/block-serialization-default-parser/index.js 1.87 kB 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/blocks/index.js 48.1 kB 0 B
build/components/index.js 172 kB 0 B
build/components/style-rtl.css 15.3 kB 0 B
build/components/style.css 15.3 kB 0 B
build/compose/index.js 9.93 kB 0 B
build/core-data/index.js 14.8 kB 0 B
build/data-controls/index.js 827 B 0 B
build/data/index.js 9.59 kB 0 B
build/date/index.js 11.2 kB 0 B
build/deprecated/index.js 769 B 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.92 kB 0 B
build/edit-navigation/index.js 11.2 kB 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/edit-post/index.js 306 kB 0 B
build/edit-post/style-rtl.css 6.45 kB 0 B
build/edit-post/style.css 6.44 kB 0 B
build/edit-site/style-rtl.css 3.86 kB 0 B
build/edit-site/style.css 3.86 kB 0 B
build/edit-widgets/index.js 26.4 kB 0 B
build/edit-widgets/style-rtl.css 3.13 kB 0 B
build/edit-widgets/style.css 3.13 kB 0 B
build/editor/editor-styles-rtl.css 476 B 0 B
build/editor/editor-styles.css 478 B 0 B
build/editor/index.js 43.3 kB 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.85 kB 0 B
build/element/index.js 4.62 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/index.js 6.86 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.16 kB 0 B
build/html-entities/index.js 623 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 698 B 0 B
build/keyboard-shortcuts/index.js 2.85 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.1 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.31 kB 0 B
build/notices/index.js 1.82 kB 0 B
build/nux/index.js 3.42 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.43 kB 0 B
build/priority-queue/index.js 790 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/reusable-blocks/index.js 3.07 kB 0 B
build/rich-text/index.js 13.4 kB 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.05 kB 0 B
build/viewport/index.js 1.86 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

context,
propertyName,
origin = 'merged',
resolveVars = true
Copy link
Member

Choose a reason for hiding this comment

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

Why do we need this? I'd think resolving variables is always part of the algorithm this function has to perform (same for setStyleProperty).

Copy link
Member Author

Choose a reason for hiding this comment

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

Feedback applied 👍 resolveVars was removed.

@@ -53,33 +60,42 @@ export function useEditorFeature( featurePath, blockName = GLOBAL_CONTEXT ) {
);
}

export function getPresetVariable( presetCategory, presets, value ) {
export function getPresetVariable( styles, blockName, propertyName, value ) {
if ( ! value ) {
return;
Copy link
Member

Choose a reason for hiding this comment

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

Can we make it so this function returns the preset variable or the input value? I've noticed in all the places this is used we need a fallback for when we return undefined, which won't be needed if we return the input value when there's no need for processing it.

Copy link
Member

Choose a reason for hiding this comment

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

Same for getValueFromVariable.

Copy link
Member Author

Choose a reason for hiding this comment

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

Feedback applied 👍

@jorgefilipecosta jorgefilipecosta force-pushed the update/abstract-preset-variable-retriving-and-setting branch from 561736a to 81ebe91 Compare November 17, 2020 10:24
@jorgefilipecosta
Copy link
Member Author

Hi @nosolosw thank you for the review, all the feedback was applied.

@jorgefilipecosta jorgefilipecosta force-pushed the update/abstract-preset-variable-retriving-and-setting branch from 81ebe91 to 3dfc717 Compare November 20, 2020 18:07
Squashed commits:
[dadc751ac5] Global Styles: Abstract preset variable retrieving and setting
@jorgefilipecosta jorgefilipecosta force-pushed the update/abstract-preset-variable-retriving-and-setting branch from 3dfc717 to 4560791 Compare November 20, 2020 18:49
@jorgefilipecosta
Copy link
Member Author

All the feedback was applied so I merged this PR. If there is any further feedback feel free to leave a comment and I will propose a follow-up PR.

@jorgefilipecosta jorgefilipecosta merged commit a0bbf38 into master Nov 20, 2020
@jorgefilipecosta jorgefilipecosta deleted the update/abstract-preset-variable-retriving-and-setting branch November 20, 2020 18:58
@github-actions github-actions bot added this to the Gutenberg 9.5 milestone Nov 20, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants