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

Update: Keep existing preset shape on theme.json #25407

Merged

Conversation

jorgefilipecosta
Copy link
Member

Before the colors, gradients and and font sizes had the shape ( {slug, name, color } ), ( {slug, name, gradient } ), and ( {slug, name, fontSize } ). On theme.json, we were following the idea of all presets having the same shape ( {slug, name, value } ). This change was made when all presets were in a preset array, and we would not have any preset mapping, so if all followed the same shape, we could have a straightforward loop. Meanwhile, presets are not a single array anymore. We have a mapping, and we can also easily map the value key.
This shape change is not bringing the simplification we hoped and is doing the opposite as we need to translate between the different shapes. Just applying this simple change, we are removing lines of code.

If we don't merge this PR and we follow the idea of shape change, we will need to make sure all components that receive font-sizes, colors, and gradients support both shapes, so they are back-compatible. Or that our useEditorFeature hook converts the new shape to the old one so when it is passed to components, they can interpret it. Either way, we are increasing our maintainability effort as we will have two shapes around the codebase.

It seems the shape change did not simplified things and had the opposite effect.

How has this been tested?

I verified the preset vars are still correctly generated on the server and client.

@jorgefilipecosta jorgefilipecosta changed the title Update: Existing preset shape on theme.json Update: Keep existing preset shape on theme.json Sep 17, 2020
@github-actions
Copy link

github-actions bot commented Sep 17, 2020

Size Change: +23 B (0%)

Total Size: 1.2 MB

Filename Size Change
build/edit-site/index.js 19 kB +23 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.67 kB 0 B
build/api-fetch/index.js 3.41 kB 0 B
build/autop/index.js 2.83 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 8.53 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 128 kB 0 B
build/block-editor/style-rtl.css 11.1 kB 0 B
build/block-editor/style.css 11.1 kB 0 B
build/block-library/editor-rtl.css 8.59 kB 0 B
build/block-library/editor.css 8.59 kB 0 B
build/block-library/index.js 135 kB 0 B
build/block-library/style-rtl.css 7.6 kB 0 B
build/block-library/style.css 7.59 kB 0 B
build/block-library/theme-rtl.css 741 B 0 B
build/block-library/theme.css 741 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 47.8 kB 0 B
build/components/index.js 201 kB 0 B
build/components/style-rtl.css 15.5 kB 0 B
build/components/style.css 15.4 kB 0 B
build/compose/index.js 9.68 kB 0 B
build/core-data/index.js 12.2 kB 0 B
build/data-controls/index.js 1.28 kB 0 B
build/data/index.js 8.55 kB 0 B
build/date/index.js 31.9 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 4.48 kB 0 B
build/edit-navigation/index.js 10.7 kB 0 B
build/edit-navigation/style-rtl.css 868 B 0 B
build/edit-navigation/style.css 871 B 0 B
build/edit-post/index.js 305 kB 0 B
build/edit-post/style-rtl.css 6.24 kB 0 B
build/edit-post/style.css 6.22 kB 0 B
build/edit-site/style-rtl.css 3.13 kB 0 B
build/edit-site/style.css 3.13 kB 0 B
build/edit-widgets/index.js 16.4 kB 0 B
build/edit-widgets/style-rtl.css 2.75 kB 0 B
build/edit-widgets/style.css 2.75 kB 0 B
build/editor/editor-styles-rtl.css 492 B 0 B
build/editor/editor-styles.css 493 B 0 B
build/editor/index.js 45.3 kB 0 B
build/editor/style-rtl.css 3.8 kB 0 B
build/editor/style.css 3.8 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.71 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.13 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.12 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.32 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 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.41 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 13.9 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.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@jorgefilipecosta jorgefilipecosta force-pushed the update/key-existing-preset-shape-on-theme-json branch from b700aeb to 1e5c527 Compare September 17, 2020 11:48
@aristath
Copy link
Member

aristath commented Sep 17, 2020

🤔 Why are we worried about backwards-compatibility?
FSE themes don't exist yet, and the few experimental ones that do exist know that they are experimental and should follow Gutenberg closely for any json changes.
That's why the name of the file is still experimental-theme.json instead of theme.json...
I don't think we'll need to be backwards-compatible with what is by definition an experiment

@jorgefilipecosta
Copy link
Member Author

Hi @aristath, We need to be backward compatible at the components level e.g: PanelColorGradientSettings, PanelColor, ColorPalette, and all the other components that use the current shape. Most of these components were shipped since WordPress 5.0 and use a different shape. If we change the shape we need to make the components accept both shapes or translate the new shape to the old one before passing it to the components.

@jorgefilipecosta
Copy link
Member Author

This PR is the basis of some work #25419, which is important for other tasks to continue. I'm going to merge the PR for now so other work with this branch as the base can be merged. I'm totally open to discussions on this change and in case there is feedback we can iterate on follow up PR's.

@jorgefilipecosta jorgefilipecosta merged commit 523a11b into master Sep 18, 2020
@jorgefilipecosta jorgefilipecosta deleted the update/key-existing-preset-shape-on-theme-json branch September 18, 2020 17:03
@github-actions github-actions bot added this to the Gutenberg 9.1 milestone Sep 18, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants