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

Move Global Styles APIs to @wordpress/block-editor #47098

Merged
merged 4 commits into from
Jan 20, 2023

Conversation

noisysocks
Copy link
Member

@noisysocks noisysocks commented Jan 12, 2023

What?

  • Moves useSetting in edit-siteuseGlobalSetting in block-editor.
  • Moves useStyle in edit-siteuseGlobalStyle in block-editor.
  • Moves useGlobalStylesReset, useGlobalStylesOutput and GlobalStylesContext in edit-site to block-editor as is.
  • lock()s the above APIs within wp.blockEditor.experiments.
  • The UI components and code that references the global-styles CPT remain in @wordpress/edit-site.

Why?

More and more there is a need for blocks to access Global Styles. For example we want to:

  • Show to the user what the default value will be (e.g. in a placeholder) is if a control is left empty (context)
  • Display recently created style variations in the block inspector (context)
  • Allow editing global styles from block inspector using Push to Global Styles button (context)

#46894 and #34178 address this need by adding useStyle (to compliment useSetting) to @wordpress/block-editor. It's awkward though because any implementation of useStyle needs getValueFromVariable to make sense of CSS variables. This is an implementation detail of and not something that I think should be exposed from @wordpress/block-editor.

Instead we can move the high level Global Styles APIs to @wordpress/block-editor and make Global Styles a first class citizen of the block editor. This seems inevitable to me and to some extent has already begun. For example the block editor has a __experimentalFeatures setting which contains mergedConfig.settings and the block settings REST API has __experimentalStyles which contains mergedConfig.styles.

Testing Instructions

There's no modified or new functionality here so just need to check for regressions.

  1. Go through each of the panels in Appearance → Editor → Styles and verify that there are no errors.
  2. Test modifying and saving a few different global styles.
  3. Test that 'Push globally' button still works by modifying the styles of a block and pressing 'Push globally' in the 'Advanced' panel.

@github-actions
Copy link

github-actions bot commented Jan 12, 2023

Size Change: +505 B (0%)

Total Size: 1.33 MB

Filename Size Change
build/block-editor/index.min.js 190 kB +5.35 kB (+3%)
build/edit-site/index.min.js 61.6 kB -4.85 kB (-7%)
build/experiments/index.min.js 870 B +8 B (+1%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 993 B
build/annotations/index.min.js 2.78 kB
build/api-fetch/index.min.js 2.27 kB
build/autop/index.min.js 2.15 kB
build/blob/index.min.js 483 B
build/block-directory/index.min.js 7.16 kB
build/block-directory/style-rtl.css 1.04 kB
build/block-directory/style.css 1.04 kB
build/block-editor/content-rtl.css 3.65 kB
build/block-editor/content.css 3.65 kB
build/block-editor/default-editor-styles-rtl.css 403 B
build/block-editor/default-editor-styles.css 403 B
build/block-editor/style-rtl.css 14.2 kB
build/block-editor/style.css 14.2 kB
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 90 B
build/block-library/blocks/archives/style.css 90 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 122 B
build/block-library/blocks/audio/style.css 122 B
build/block-library/blocks/audio/theme-rtl.css 138 B
build/block-library/blocks/audio/theme.css 138 B
build/block-library/blocks/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 84 B
build/block-library/blocks/avatar/style.css 84 B
build/block-library/blocks/block/editor-rtl.css 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/button/editor-rtl.css 485 B
build/block-library/blocks/button/editor.css 485 B
build/block-library/blocks/button/style-rtl.css 532 B
build/block-library/blocks/button/style.css 532 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 100 B
build/block-library/blocks/categories/style.css 100 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 406 B
build/block-library/blocks/columns/style.css 406 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 199 B
build/block-library/blocks/comment-template/style.css 198 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 636 B
build/block-library/blocks/cover/editor-rtl.css 612 B
build/block-library/blocks/cover/editor.css 613 B
build/block-library/blocks/cover/style-rtl.css 1.57 kB
build/block-library/blocks/cover/style.css 1.56 kB
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 B
build/block-library/blocks/embed/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 138 B
build/block-library/blocks/embed/theme.css 138 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 253 B
build/block-library/blocks/file/style.css 254 B
build/block-library/blocks/file/view.min.js 353 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 984 B
build/block-library/blocks/gallery/editor.css 988 B
build/block-library/blocks/gallery/style-rtl.css 1.55 kB
build/block-library/blocks/gallery/style.css 1.55 kB
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 B
build/block-library/blocks/group/editor-rtl.css 654 B
build/block-library/blocks/group/editor.css 654 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 76 B
build/block-library/blocks/heading/style.css 76 B
build/block-library/blocks/html/editor-rtl.css 332 B
build/block-library/blocks/html/editor.css 333 B
build/block-library/blocks/image/editor-rtl.css 829 B
build/block-library/blocks/image/editor.css 828 B
build/block-library/blocks/image/style-rtl.css 627 B
build/block-library/blocks/image/style.css 630 B
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/latest-comments/style-rtl.css 298 B
build/block-library/blocks/latest-comments/style.css 298 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 478 B
build/block-library/blocks/latest-posts/style.css 478 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 507 B
build/block-library/blocks/media-text/style.css 505 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 716 B
build/block-library/blocks/navigation-link/editor.css 715 B
build/block-library/blocks/navigation-link/style-rtl.css 115 B
build/block-library/blocks/navigation-link/style.css 115 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation/editor-rtl.css 2.13 kB
build/block-library/blocks/navigation/editor.css 2.14 kB
build/block-library/blocks/navigation/style-rtl.css 2.22 kB
build/block-library/blocks/navigation/style.css 2.2 kB
build/block-library/blocks/navigation/view-modal.min.js 2.81 kB
build/block-library/blocks/navigation/view.min.js 447 B
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 376 B
build/block-library/blocks/page-list/editor.css 376 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 174 B
build/block-library/blocks/paragraph/editor.css 174 B
build/block-library/blocks/paragraph/style-rtl.css 279 B
build/block-library/blocks/paragraph/style.css 281 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 501 B
build/block-library/blocks/post-comments-form/style.css 501 B
build/block-library/blocks/post-date/style-rtl.css 61 B
build/block-library/blocks/post-date/style.css 61 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/editor-rtl.css 586 B
build/block-library/blocks/post-featured-image/editor.css 584 B
build/block-library/blocks/post-featured-image/style-rtl.css 318 B
build/block-library/blocks/post-featured-image/style.css 318 B
build/block-library/blocks/post-navigation-link/style-rtl.css 153 B
build/block-library/blocks/post-navigation-link/style.css 153 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 282 B
build/block-library/blocks/post-template/style.css 282 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 B
build/block-library/blocks/pullquote/editor-rtl.css 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 326 B
build/block-library/blocks/pullquote/style.css 325 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 288 B
build/block-library/blocks/query-pagination/style.css 284 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 440 B
build/block-library/blocks/query/editor.css 440 B
build/block-library/blocks/quote/style-rtl.css 213 B
build/block-library/blocks/quote/style.css 213 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 132 B
build/block-library/blocks/read-more/style.css 132 B
build/block-library/blocks/rss/editor-rtl.css 202 B
build/block-library/blocks/rss/editor.css 204 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 409 B
build/block-library/blocks/search/style.css 406 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/separator/editor-rtl.css 146 B
build/block-library/blocks/separator/editor.css 146 B
build/block-library/blocks/separator/style-rtl.css 234 B
build/block-library/blocks/separator/style.css 234 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 474 B
build/block-library/blocks/shortcode/editor.css 474 B
build/block-library/blocks/site-logo/editor-rtl.css 490 B
build/block-library/blocks/site-logo/editor.css 490 B
build/block-library/blocks/site-logo/style-rtl.css 203 B
build/block-library/blocks/site-logo/style.css 203 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 B
build/block-library/blocks/social-link/editor-rtl.css 184 B
build/block-library/blocks/social-link/editor.css 184 B
build/block-library/blocks/social-links/editor-rtl.css 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/social-links/style-rtl.css 1.4 kB
build/block-library/blocks/social-links/style.css 1.39 kB
build/block-library/blocks/spacer/editor-rtl.css 332 B
build/block-library/blocks/spacer/editor.css 332 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 433 B
build/block-library/blocks/table/editor.css 433 B
build/block-library/blocks/table/style-rtl.css 651 B
build/block-library/blocks/table/style.css 650 B
build/block-library/blocks/table/theme-rtl.css 157 B
build/block-library/blocks/table/theme.css 157 B
build/block-library/blocks/tag-cloud/style-rtl.css 251 B
build/block-library/blocks/tag-cloud/style.css 253 B
build/block-library/blocks/template-part/editor-rtl.css 404 B
build/block-library/blocks/template-part/editor.css 404 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 99 B
build/block-library/blocks/verse/style.css 99 B
build/block-library/blocks/video/editor-rtl.css 691 B
build/block-library/blocks/video/editor.css 694 B
build/block-library/blocks/video/style-rtl.css 179 B
build/block-library/blocks/video/style.css 179 B
build/block-library/blocks/video/theme-rtl.css 139 B
build/block-library/blocks/video/theme.css 139 B
build/block-library/classic-rtl.css 162 B
build/block-library/classic.css 162 B
build/block-library/common-rtl.css 1.05 kB
build/block-library/common.css 1.05 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 11.7 kB
build/block-library/editor.css 11.7 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/index.min.js 199 kB
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 12.4 kB
build/block-library/style.css 12.4 kB
build/block-library/theme-rtl.css 698 B
build/block-library/theme.css 703 B
build/block-serialization-default-parser/index.min.js 1.13 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/blocks/index.min.js 50.4 kB
build/components/index.min.js 203 kB
build/components/style-rtl.css 11.6 kB
build/components/style.css 11.7 kB
build/compose/index.min.js 12.3 kB
build/core-data/index.min.js 15.9 kB
build/customize-widgets/index.min.js 11.7 kB
build/customize-widgets/style-rtl.css 1.41 kB
build/customize-widgets/style.css 1.41 kB
build/data-controls/index.min.js 663 B
build/data/index.min.js 7.95 kB
build/date/index.min.js 32.1 kB
build/deprecated/index.min.js 518 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.71 kB
build/edit-navigation/index.min.js 16.2 kB
build/edit-navigation/style-rtl.css 4.14 kB
build/edit-navigation/style.css 4.15 kB
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/edit-post/index.min.js 34.4 kB
build/edit-post/style-rtl.css 7.46 kB
build/edit-post/style.css 7.45 kB
build/edit-site/style-rtl.css 9.38 kB
build/edit-site/style.css 9.38 kB
build/edit-widgets/index.min.js 16.8 kB
build/edit-widgets/style-rtl.css 4.49 kB
build/edit-widgets/style.css 4.49 kB
build/editor/index.min.js 44.1 kB
build/editor/style-rtl.css 3.68 kB
build/editor/style.css 3.67 kB
build/element/index.min.js 4.93 kB
build/escape-html/index.min.js 548 B
build/format-library/index.min.js 7.2 kB
build/format-library/style-rtl.css 598 B
build/format-library/style.css 597 B
build/hooks/index.min.js 1.66 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.79 kB
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.79 kB
build/keycodes/index.min.js 1.88 kB
build/list-reusable-blocks/index.min.js 2.14 kB
build/list-reusable-blocks/style-rtl.css 865 B
build/list-reusable-blocks/style.css 865 B
build/media-utils/index.min.js 2.99 kB
build/notices/index.min.js 977 B
build/plugins/index.min.js 1.95 kB
build/preferences-persistence/index.min.js 2.23 kB
build/preferences/index.min.js 1.35 kB
build/primitives/index.min.js 960 B
build/priority-queue/index.min.js 1.59 kB
build/react-i18n/index.min.js 702 B
build/react-refresh-entry/index.min.js 8.44 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.75 kB
build/reusable-blocks/index.min.js 2.27 kB
build/reusable-blocks/style-rtl.css 265 B
build/reusable-blocks/style.css 265 B
build/rich-text/index.min.js 10.8 kB
build/server-side-render/index.min.js 2.09 kB
build/shortcode/index.min.js 1.52 kB
build/style-engine/index.min.js 1.53 kB
build/token-list/index.min.js 650 B
build/url/index.min.js 3.69 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.8 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 1.09 kB
build/warning/index.min.js 280 B
build/widgets/index.min.js 7.31 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.18 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

@noisysocks
Copy link
Member Author

noisysocks commented Jan 12, 2023

The outstanding questions I'm thinking about are:

  1. Can we merge the existing useSetting in @wordpress/block-editor with the useSetting in @wordpress/edit-site?

I am thinking no and have both. One is a higher level useSetting( path ) function that looks up the block from context and returns the specified setting with inheritance. The other is a lower level useGlobalSetting( path, blockName, source ) function that only looks at the Global Styles config object but lets you change it by returning a setter. Same for styles.

  1. Do we need both GlobalStylesContext and BlockEditorProvider?

I think no, since having both creates two sources of truth which is confusing. I'm not sure of the best API though. Do we simply add baseConfig, userConfig, and setUserConfig to the block editor settings and deprecate __experimentalFeatures? I'm not sure that such an API would be clear to non-WordPress consumers of @wordpress/block-editor as config is a pretty meaningless word.

@noisysocks
Copy link
Member Author

noisysocks commented Jan 12, 2023

@oandregal @youknowriad: What are your thoughts on the proposed architecture here and my questions above? (Ignore the code in this PR which is rough.) While researching useSetting and __experimentalFeatures I came across a lot of discussion between the two of you on such things.

@github-actions
Copy link

github-actions bot commented Jan 12, 2023

Flaky tests detected in ceb08f5.
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/3955674679
📝 Reported issues:

@oandregal
Copy link
Member

oandregal commented Jan 12, 2023

Can we merge the existing useSetting in @wordpress/block-editor with the useSetting in @wordpress/edit-site?

Yeah, what you said. The root difference between the two is that block editor's useSettings inspects block instances, while edit site's useSetting inspects block types.

I remember that there was discussion about this at some point, and people mentioned that it could be worth having a global styles package, to support use cases such as onboarding, for example. I don't have a strong opinion on being a standalone package or part of block-editor package. One of those makes sense.

Do we need both GlobalStylesContext and BlockEditorProvider?

Depending on whether global styles it's a standalone package or part of the block-editor, I guess the answer would be different?

cc @jorgefilipecosta as I think he'd have thoughts on the topic as well.

@noisysocks
Copy link
Member Author

Is it worth creating a new package when @wordpress/block-editor would have to depend on it anyway? In other words it wouldn't decrease the bundle size of block-editor.js or anything like that.

@noisysocks noisysocks self-assigned this Jan 13, 2023
@tellthemachines
Copy link
Contributor

Can we merge the existing useSetting in @wordpress/block-editor with the useSetting in @wordpress/edit-site?

Might be better to keep them separate for the reasons @oandregal mentions above. I do think that whatever we do here should be reflected in useStyle as they are very similar in structure.

Is it worth creating a new package when @wordpress/block-editor would have to depend on it anyway? In other words it wouldn't decrease the bundle size of block-editor.js or anything like that.

Probably not 😅 I'd be happy for it to live in block-editor.

@youknowriad
Copy link
Contributor

Can we merge the existing useSetting in @wordpress/block-editor with the useSetting in @wordpress/edit-site?

I think one could use the other (the one with clientId can use the other one) under the hood and augment it with "instance specific" logic. But that might require a lot of work, so fine to post pone probably.

Do we need both GlobalStylesContext and BlockEditorProvider?

Not entirely certain, the global styles variations use-case might force us to reply "yes" here unless we find a way to do it with the latter.

baseConfig, userConfig, and setUserConfig to the block editor settings and deprecate __experimentalFeatures? I

I agree that there's some duplication here, not clear thought what's the best solution :)


There's another area where there is duplication that we should ideally remove: the UI. The different block inspector controls and the different levels of the global styles UI are very similar and sometimes we have duplicated components. We've had a discussion on how to unify these. Probably a lot of work for an unclear outcome.

The elephant in the room here is that if this folder moves into the block-editor package, it means a lot of new stable APIs to maintain for a piece of UI/behavior that still in flux (though stabilizing more and more). This might mean, it's better to start with a "bundled" @wordpress/global-styles package instead (even without the core-data dependency) as this allows us to iterate on it as we wish without third-party impact.

@noisysocks
Copy link
Member Author

The elephant in the room here is that if this folder moves into the block-editor package, it means a lot of new stable APIs to maintain for a piece of UI/behavior that still in flux (though stabilizing more and more). This might mean, it's better to start with a "bundled" @wordpress/global-styles package instead (even without the core-data dependency) as this allows us to iterate on it as we wish without third-party impact.

That's a really compelling point!

@noisysocks noisysocks force-pushed the try/move-global-styles-apis-to-block-editor branch from 8f85b7d to 5ac562d Compare January 19, 2023 04:59
@noisysocks noisysocks marked this pull request as ready for review January 19, 2023 05:58
@noisysocks
Copy link
Member Author

I tried to split the global styles APIs into a new "bundled" @wordpress/global-styles package as suggested above but quickly ran into a problem: doing this means that there are circular dependencies between block-editor and global-styles as global-styles depends on these block-editor APIs and block-editor depends on global-styles in oder to implement useSetting, useStyle, etc.

Since they're tightly coupled, I moved the global styles APIs back to block-editor but lock()ed them within an experiments object so that they cannot be used by third parties for now.

I left GlobalStylesContext alone for now. We can probably integrate it into BlockEditorProvider but best to do this separately so that this PR is only concerned with moving around / renaming existing APIs.

I renamed useStyle and useSetting to useGlobalStyle and useGlobalSetting so that there is no confusing them with the identically named hooks that use block context.

In a follow-up PR we can refactor useSetting to use useGlobalSetting internally and add a new useStyle hook that uses useGlobalStyle internally.


So, to clarify, what this PR does is:

  • Moves useSetting in edit-siteuseGlobalSetting in block-editor.
  • Moves useStyle in edit-siteuseGlobalStyle in block-editor.
  • Moves useGlobalStylesReset, useGlobalStylesOutput and GlobalStylesContext in edit-site to block-editor as is.
  • lock()s the above APIs within wp.blockEditor.experiments.

@noisysocks noisysocks added [Type] Code Quality Issues or PRs that relate to code quality Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Jan 19, 2023
@youknowriad
Copy link
Contributor

block-editor depends on global-styles in oder to implement useSetting, useStyle, etc.

You could also argue that my suggestion here was rubbish and just avoid this dependency (like today)

useGlobalStyle,
} from './hooks';
export { useGlobalStylesOutput } from './use-global-styles-output';
export { GlobalStylesContext } from './context';
Copy link
Contributor

Choose a reason for hiding this comment

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

Do we want to give the whole context object as an API or just the "provider" for external consumers.

Copy link
Member Author

Choose a reason for hiding this comment

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

There's a few places where we need to read the raw context value e.g. variations.

const { base, user, setUserConfig } = useContext( GlobalStylesContext );

@@ -15,77 +15,3 @@ function MyComponent() {
return <GlobalStylesUI />;
Copy link
Contributor

Choose a reason for hiding this comment

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

Any thoughts on the UI? can we share with block inspector UI at some point?

Copy link
Member Author

Choose a reason for hiding this comment

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

It should be possible I think to create high level UI components that live in @wordpress/block-editor and are used by both the block inspector and global styles. Ideally only the value and onChange differs. So basically what you propose in #37064. I note that since you opened that discussion we've come a long way in making the UIs look very similar so ideally now we can make the shared components be very high level (e.g. TypographyPanel, DimensionsPanel).

I'll make a note to explore this!

Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

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

Looks good to me, personally, I still have some uncertainties but this looks like a good start.

Btw, I'd love to be pinged on PRs when we'll use these APIs in other parts of the block editor.

@noisysocks
Copy link
Member Author

You could also argue that my suggestion here was rubbish and just avoid this dependency (like today)

Even if we didn't make useStyle use useGlobalStyle internally we'd still need block-editor to depend on global-styles because there's features that we want to implement that would use useGlobalStyle e.g. the push to global styles button.

I still have some uncertainties

Yeah, me too 😄

Btw, I'd love to be pinged on PRs when we'll use these APIs in other parts of the block editor.

Will keep you posted!

@noisysocks noisysocks merged commit 77c6c5d into trunk Jan 20, 2023
@noisysocks noisysocks deleted the try/move-global-styles-apis-to-block-editor branch January 20, 2023 03:56
@github-actions github-actions bot added this to the Gutenberg 15.1 milestone Jan 20, 2023
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 [Type] Code Quality Issues or PRs that relate to code quality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants