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

Add settings hook #40547

Merged
merged 6 commits into from
Apr 29, 2022
Merged

Add settings hook #40547

merged 6 commits into from
Apr 29, 2022

Conversation

oandregal
Copy link
Member

@oandregal oandregal commented Apr 22, 2022

What?

This PR adds a new hook called settings which blocks can opt-in into and that allows them to have a settings object like the theme.json has.

Why?

We want to create the concept of a "section" that is able hold settings & styles (like theme.json does) but in block instances. See #40318 and #39281

How?

This is only one part of getting settings to work in block instances. The other part is building an UI for them (get something like a global styles sidebar to show in the blocks that opt-into this hook).

  • Creates a new settings hook.
  • Updates the useSetting hook to lookup for settings in the block instance or its ancestors before looking into the block editor store.

Testing Instructions

  • Create a new post and open the code editor.
  • Paste the following content:
<!-- wp:group {"settings":{"color":{"defaultPalette":false,"palette":{"custom":[{"slug":"my-hotpink","color":"hotpink","name":"Hotpink"}]}}}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>Leaf paragraph of top-level group block.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"settings":{"color":{"palette":{"custom":[{"slug":"my-aquamarine","color":"aquamarine","name":"Aquamarine"}]}}}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>Leaf paragraph of inner group block.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
  • Go back to the visual editor and you'll see:

Captura de ecrã de 2022-04-25 12-54-14

  • Navigate to the top-level group block and inspect its the color panel for text, background, and link color. The expected result is that:
    • the "custom" section contains the "hotpink" color
    • the "default" section is hidden
  • Verify that the same is true for its child paragraph.

  • Navigate to the inner group block and inspect its color panel. The expected result is that:
    • the "custom" section contains the "aquamarine" color
    • the "default" section is still hidden
  • Verify that the same is true for its child paragraph.

Questions

Follow-ups

See #40318

@github-actions
Copy link

github-actions bot commented Apr 22, 2022

Size Change: +232 B (0%)

Total Size: 1.23 MB

Filename Size Change
build/block-editor/index.min.js 151 kB +201 B (0%)
build/block-library/blocks/latest-posts/style-rtl.css 463 B +16 B (+4%)
build/block-library/blocks/latest-posts/style.css 462 B +16 B (+4%)
build/block-library/index.min.js 177 kB -64 B (0%)
build/block-library/style-rtl.css 11.5 kB +6 B (0%)
build/block-library/style.css 11.5 kB +5 B (0%)
build/components/index.min.js 222 kB +18 B (0%)
build/data/index.min.js 7.66 kB -6 B (0%)
build/edit-site/index.min.js 47.4 kB -18 B (0%)
build/preferences-persistence/index.min.js 2.16 kB +58 B (+3%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 993 B
build/annotations/index.min.js 2.77 kB
build/api-fetch/index.min.js 2.27 kB
build/autop/index.min.js 2.15 kB
build/blob/index.min.js 487 B
build/block-directory/index.min.js 6.51 kB
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
build/block-editor/default-editor-styles-rtl.css 378 B
build/block-editor/default-editor-styles.css 378 B
build/block-editor/style-rtl.css 15 kB
build/block-editor/style.css 15 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 65 B
build/block-library/blocks/archives/style.css 65 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 111 B
build/block-library/blocks/audio/style.css 111 B
build/block-library/blocks/audio/theme-rtl.css 125 B
build/block-library/blocks/audio/theme.css 125 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 59 B
build/block-library/blocks/avatar/style.css 59 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 445 B
build/block-library/blocks/button/editor.css 445 B
build/block-library/blocks/button/style-rtl.css 560 B
build/block-library/blocks/button/style.css 560 B
build/block-library/blocks/buttons/editor-rtl.css 292 B
build/block-library/blocks/buttons/editor.css 292 B
build/block-library/blocks/buttons/style-rtl.css 275 B
build/block-library/blocks/buttons/style.css 275 B
build/block-library/blocks/calendar/style-rtl.css 207 B
build/block-library/blocks/calendar/style.css 207 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 79 B
build/block-library/blocks/categories/style.css 79 B
build/block-library/blocks/code/style-rtl.css 103 B
build/block-library/blocks/code/style.css 103 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 127 B
build/block-library/blocks/comment-template/style.css 127 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-query-loop/editor-rtl.css 95 B
build/block-library/blocks/comments-query-loop/editor.css 95 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/cover/editor-rtl.css 546 B
build/block-library/blocks/cover/editor.css 547 B
build/block-library/blocks/cover/style-rtl.css 1.53 kB
build/block-library/blocks/cover/style.css 1.53 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 417 B
build/block-library/blocks/embed/style.css 417 B
build/block-library/blocks/embed/theme-rtl.css 124 B
build/block-library/blocks/embed/theme.css 124 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 255 B
build/block-library/blocks/file/style.css 255 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 961 B
build/block-library/blocks/gallery/editor.css 964 B
build/block-library/blocks/gallery/style-rtl.css 1.51 kB
build/block-library/blocks/gallery/style.css 1.51 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 333 B
build/block-library/blocks/group/editor.css 333 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 731 B
build/block-library/blocks/image/editor.css 730 B
build/block-library/blocks/image/style-rtl.css 529 B
build/block-library/blocks/image/style.css 535 B
build/block-library/blocks/image/theme-rtl.css 124 B
build/block-library/blocks/image/theme.css 124 B
build/block-library/blocks/latest-comments/style-rtl.css 284 B
build/block-library/blocks/latest-comments/style.css 284 B
build/block-library/blocks/latest-posts/editor-rtl.css 199 B
build/block-library/blocks/latest-posts/editor.css 198 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 493 B
build/block-library/blocks/media-text/style.css 490 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 708 B
build/block-library/blocks/navigation-link/editor.css 706 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-submenu/view.min.js 375 B
build/block-library/blocks/navigation/editor-rtl.css 2.03 kB
build/block-library/blocks/navigation/editor.css 2.04 kB
build/block-library/blocks/navigation/style-rtl.css 1.93 kB
build/block-library/blocks/navigation/style.css 1.92 kB
build/block-library/blocks/navigation/view-modal.min.js 2.65 kB
build/block-library/blocks/navigation/view.min.js 395 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 363 B
build/block-library/blocks/page-list/editor.css 363 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 157 B
build/block-library/blocks/paragraph/editor.css 157 B
build/block-library/blocks/paragraph/style-rtl.css 260 B
build/block-library/blocks/paragraph/style.css 260 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 69 B
build/block-library/blocks/post-comments-form/editor.css 69 B
build/block-library/blocks/post-comments-form/style-rtl.css 521 B
build/block-library/blocks/post-comments-form/style.css 521 B
build/block-library/blocks/post-comments/editor-rtl.css 77 B
build/block-library/blocks/post-comments/editor.css 77 B
build/block-library/blocks/post-comments/style-rtl.css 511 B
build/block-library/blocks/post-comments/style.css 511 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 721 B
build/block-library/blocks/post-featured-image/editor.css 721 B
build/block-library/blocks/post-featured-image/style-rtl.css 153 B
build/block-library/blocks/post-featured-image/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 323 B
build/block-library/blocks/post-template/style.css 323 B
build/block-library/blocks/post-terms/style-rtl.css 73 B
build/block-library/blocks/post-terms/style.css 73 B
build/block-library/blocks/post-title/style-rtl.css 80 B
build/block-library/blocks/post-title/style.css 80 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 198 B
build/block-library/blocks/pullquote/editor.css 198 B
build/block-library/blocks/pullquote/style-rtl.css 370 B
build/block-library/blocks/pullquote/style.css 370 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 234 B
build/block-library/blocks/query-pagination/style.css 231 B
build/block-library/blocks/query/editor-rtl.css 369 B
build/block-library/blocks/query/editor.css 369 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 397 B
build/block-library/blocks/search/style.css 398 B
build/block-library/blocks/search/theme-rtl.css 64 B
build/block-library/blocks/search/theme.css 64 B
build/block-library/blocks/separator/editor-rtl.css 140 B
build/block-library/blocks/separator/editor.css 140 B
build/block-library/blocks/separator/style-rtl.css 233 B
build/block-library/blocks/separator/style.css 233 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 759 B
build/block-library/blocks/site-logo/editor.css 759 B
build/block-library/blocks/site-logo/style-rtl.css 181 B
build/block-library/blocks/site-logo/style.css 181 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 84 B
build/block-library/blocks/site-title/editor.css 84 B
build/block-library/blocks/social-link/editor-rtl.css 177 B
build/block-library/blocks/social-link/editor.css 177 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.37 kB
build/block-library/blocks/social-links/style.css 1.36 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 504 B
build/block-library/blocks/table/editor.css 504 B
build/block-library/blocks/table/style-rtl.css 625 B
build/block-library/blocks/table/style.css 625 B
build/block-library/blocks/table/theme-rtl.css 188 B
build/block-library/blocks/table/theme.css 188 B
build/block-library/blocks/tag-cloud/style-rtl.css 226 B
build/block-library/blocks/tag-cloud/style.css 227 B
build/block-library/blocks/template-part/editor-rtl.css 149 B
build/block-library/blocks/template-part/editor.css 149 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 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 571 B
build/block-library/blocks/video/editor.css 572 B
build/block-library/blocks/video/style-rtl.css 173 B
build/block-library/blocks/video/style.css 173 B
build/block-library/blocks/video/theme-rtl.css 124 B
build/block-library/blocks/video/theme.css 124 B
build/block-library/common-rtl.css 993 B
build/block-library/common.css 990 B
build/block-library/editor-rtl.css 10.3 kB
build/block-library/editor.css 10.3 kB
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/theme-rtl.css 689 B
build/block-library/theme.css 694 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/blocks/index.min.js 47 kB
build/components/style-rtl.css 15 kB
build/components/style.css 15 kB
build/compose/index.min.js 11.3 kB
build/core-data/index.min.js 14.5 kB
build/customize-widgets/index.min.js 11 kB
build/customize-widgets/style-rtl.css 1.39 kB
build/customize-widgets/style.css 1.39 kB
build/data-controls/index.min.js 663 B
build/date/index.min.js 32 kB
build/deprecated/index.min.js 518 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.58 kB
build/edit-navigation/index.min.js 15.8 kB
build/edit-navigation/style-rtl.css 4.05 kB
build/edit-navigation/style.css 4.05 kB
build/edit-post/classic-rtl.css 546 B
build/edit-post/classic.css 547 B
build/edit-post/index.min.js 30.1 kB
build/edit-post/style-rtl.css 7.02 kB
build/edit-post/style.css 7.02 kB
build/edit-site/style-rtl.css 7.95 kB
build/edit-site/style.css 7.93 kB
build/edit-widgets/index.min.js 16.3 kB
build/edit-widgets/style-rtl.css 4.41 kB
build/edit-widgets/style.css 4.4 kB
build/editor/index.min.js 38.3 kB
build/editor/style-rtl.css 3.67 kB
build/editor/style.css 3.67 kB
build/element/index.min.js 4.29 kB
build/escape-html/index.min.js 548 B
build/format-library/index.min.js 6.62 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 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.83 kB
build/keycodes/index.min.js 1.41 kB
build/list-reusable-blocks/index.min.js 1.75 kB
build/list-reusable-blocks/style-rtl.css 838 B
build/list-reusable-blocks/style.css 838 B
build/media-utils/index.min.js 2.94 kB
build/notices/index.min.js 957 B
build/nux/index.min.js 2.1 kB
build/nux/style-rtl.css 751 B
build/nux/style.css 749 B
build/plugins/index.min.js 1.98 kB
build/preferences/index.min.js 1.32 kB
build/primitives/index.min.js 949 B
build/priority-queue/index.min.js 628 B
build/react-i18n/index.min.js 704 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.69 kB
build/reusable-blocks/index.min.js 2.24 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 11.2 kB
build/server-side-render/index.min.js 1.61 kB
build/shortcode/index.min.js 1.52 kB
build/token-list/index.min.js 668 B
build/url/index.min.js 1.99 kB
build/vendors/react-dom.min.js 38.5 kB
build/vendors/react.min.js 4.34 kB
build/viewport/index.min.js 1.08 kB
build/warning/index.min.js 280 B
build/widgets/index.min.js 7.21 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.07 kB

compressed-size-action

@@ -18,6 +18,7 @@
}
},
"supports": {
"settings": true,
Copy link
Member Author

@oandregal oandregal Apr 22, 2022

Choose a reason for hiding this comment

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

The style attribute we already enable by the other block suports (color, typography, etc). Although unlikely, I wonder if there's a block that doesn't want the styles but does want the settings. This is why I used settings for the hook name instead of section.

If we want to go with section instead, I'd argue that we'd also want to make it register styles if they are not defined yet.

Copy link
Contributor

Choose a reason for hiding this comment

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

No real formed opinion on my part yet, but simply settings could make sense.

Copy link
Contributor

Choose a reason for hiding this comment

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

I think "section" shouldn't be a thing in our code base, it should be a consequence of several enabled features/context. So I think "settings" is the right call. The only thing is whether we start stable or give it some time as "experimental".

Copy link
Member

Choose a reason for hiding this comment

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

I would lean to making it experimental for some time.

packages/block-editor/src/hooks/settings.js Outdated Show resolved Hide resolved
packages/block-editor/src/components/use-setting/index.js Outdated Show resolved Hide resolved
@@ -18,6 +18,7 @@
}
},
"supports": {
"settings": true,
Copy link
Contributor

Choose a reason for hiding this comment

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

No real formed opinion on my part yet, but simply settings could make sense.

@oandregal oandregal self-assigned this Apr 25, 2022
@oandregal oandregal added [Block] Group Affects the Group Block [Block] Pattern Affects the Patterns Block labels Apr 25, 2022
@oandregal oandregal marked this pull request as ready for review April 25, 2022 10:57

// 2. Fall back to the settings from the block editor store (__experimentalFeatures).
const settings = select( blockEditorStore ).getSettings();
if ( result === undefined ) {
Copy link
Member Author

Choose a reason for hiding this comment

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

The only change in this section is to rename __experimentalFeaturesResult to result.


if ( experimentalFeaturesResult !== undefined ) {
// 1. Take settings from the block instance or its ancestors.
Copy link
Member Author

Choose a reason for hiding this comment

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

The algorith for useSetting is:

  • lookup for settings defined in the block instance or any of its ancestors => this is the only behavioral change introduced by this PR.
  • lookup for settings defined in the block editor store
  • fallback for deprecated settings
  • fallback for dropcap

Copy link
Contributor

Choose a reason for hiding this comment

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

In global styles, I added a custom palette to the "paragraph" block and then selected a paragraph block from your example above. I wasn't sure what should show up:

  • The palette of the parent "group"
  • The palette of the "paragraph" block from Global styles.

I think that's the remaining point we should figure out in the algorithm, we should probably just pick one approach and stick with it.

My first thought is that picking the "paragraph" settings from the global styles might make more sense here. (Right now it picks the parent's palette)

cc @jorgefilipecosta @mcsf

Copy link
Member Author

@oandregal oandregal Apr 26, 2022

Choose a reason for hiding this comment

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

I shared some longer thoughts for this at #40318 (comment)

I've looked at use cases for sections, aka why do we want to do this? I understand we want to enable doing things such as "set colors for this whole section" or "disable custom font sizes for the whole section". These are easier to do with a "by source" algorithm (first considers block instance and its ancestors, then theme.json data). Specially when/if we expose this to the users via an UI.

Copy link
Contributor

Choose a reason for hiding this comment

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

I think it's not that simple. The current algorithm is different that "style" and it's not clear why we'd want "settings" to work differently.

If you apply a text color to a paragraph block, it won't be using the color from the parent "style", it will continue to use the "global styles" one.

Copy link
Member Author

Choose a reason for hiding this comment

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

Yeah, but styles and settings behave different in theme.json as well: styles aren't inherited and settings are .

Copy link
Member Author

@oandregal oandregal Apr 28, 2022

Choose a reason for hiding this comment

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

The CSS model allows us to choose between still keeping the table palette or overwriting anyway. On the alternative model, I don't really have a choice.

You do! You just set the settings for the specific block types you're interested in (and the other ones -the table- will fall back to the store settings).

I think the crux of the conversation is: what are the common uses case we should optimize for? If this one is the typical thing patterns want to do and the table example you shared is the uncommon one, the model this PR follows works best.

what is the solution we are going to have to on the example I gave

I've created a pen that demonstrates the challenge you shared and how we can address it https://codepen.io/oandregal/pen/eYyqxZO?editors=1100

Let me unwrap it here as well. Given a section like this one (note the paragraph has a red color applied by the user):

  <div class="wp-section-UUID">
    <p class="has-red-color"></p>
  </div>

If the theme has added some paragraph-specific settings, as in:

{
  "settings": {
    "color": {
      "palette": [
	    { "slug": "red", "color": "red-theme-global" }
      ]
    },
    "blocks": {
      "core/paragraph": {
        "color": {
          "palette": [
            { "slug": "red", "color": "red-theme-block" }
          ]
        }
      }
    }
  }
}

And the section has this:

{
  "settings": {
    "color": {
      "palette": [
        { "slug": "red", "color": "red-section-global" }
      ]
    }
  }
}

How do we make it so the color rendered for the paragraph is red-section-global?

/*
 * THIS IS THE CSS GENERATED FOR THE `theme.json`
 */
body {
  --wp--preset--color--red: "red-theme-global";
}
p {
  --wp--preset--color--red: "red-theme-block";
}
.has-red-color {
  color: var(--wp--preset--color--red) !important;
}

/*
 * THIS IS THE CSS GENERATED FOR THE SECTION.
 */
.wp-section-UUID,
.wp-section-UUID [class*="wp-block"],
/*
 * We also need fallbacks for any block that don't use the .wp-block-* single selector
 * but instead use __experimentalSelector to define their own. These include
 * paragraph, list (li, ul), heading (h1-h6), and table so far.
 */
.wp-section-UUID p,
.wp-section-UUID li,
.wp-section-UUID ul,
.wp-section-UUID h1,
.wp-section-UUID h2,
.wp-section-UUID h3,
.wp-section-UUID h4,
.wp-section-UUID h5,
.wp-section-UUID h6,
.wp-section-UUID .wp-block-table > table {
  --wp--preset--color--red: "red-section-global";
}

Does this address your concerns?

Note that this PR doesn't generate the styles for the presets declared in a section. That's something that has a complexity of its own and I thought that to be a follow-up (things like generating the preset classes or not depending on whether the preset is already defined in theme.json, etc).

Copy link
Member Author

Choose a reason for hiding this comment

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

Ongoing draft PR for rendering the settings at #40683

Copy link
Member

Choose a reason for hiding this comment

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

You do! You just set the settings for the specific block types you're interested in (and the other ones -the table- will fall back to the store settings).

Your section may not be aware of the blocks it is interested in, it may have a group where the user can nest anything inside.

I think the crux of the conversation is: what are the common uses case we should optimize for? If #40547 (comment) is the typical thing patterns want to do and the table example you shared is the uncommon one, the model this PR follows works best.

I agree we should optimize for the most common cause. The thing is we don't know the most common case yet. I think a theme setting block specific settings is something rare and very specific that should be respected even if that block is used inside a section setting something global for that setting. Your expectation is that something global at the section should take priority above a theme-specific setting. I guess we need to choose and iterated and if we receive feedback or new information later change the direction if that's a possibility.

How do we make it so the color rendered for the paragraph is red-section-global?

.wp-section-UUID,
.wp-section-UUID [class*="wp-block"], /* Any child block */
/*
 * We also need to cover for child blocks that don't use the .wp-block-* class:
 * paragraph, list (ul, or), and heading (h1-h6).
 */
.wp-section-UUID p,
.wp-section-UUID li,
.wp-section-UUID ul,
.wp-section-UUID h1,
.wp-section-UUID h2,
.wp-section-UUID h3,
.wp-section-UUID h4,
.wp-section-UUID h5,
.wp-section-UUID h6,

The solution proposed makes things work but requires us to ship much more CSS code, for every color or font size, etc instead of just need to use just .wp-section-UUID, we need to use a much bigger selector per preset we have that means more bytes sent over the wire for every section that has some preset.

I'm not sure of the best approach either so I'm fine with giving a try to the solution we have here and seeing how it works in practice.

Copy link
Member Author

@oandregal oandregal Apr 28, 2022

Choose a reason for hiding this comment

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

Actually, there's a simpler CSS for the presets generated by the section if we embrace how theme.json works:

/*
 * CSS Custom Properties defined in the section
 */
.wp-section-UUID .has-red-color {
  --wp--preset--color--red: "red-section-global";
}

/*
 * CSS classes for presets defined in the section.
 * Ideally, we should not enqueue the classes that are already enqueued by theme.json.
 * Though we still need to check at runtime because a given theme may have them
 * but a different theme may not.
*/
.wp-section-UUID .has-red-color { color: var(--wp--preset--color--red) !important; } 

That's it (codepen).

I think we can decide which of the alternatives we want to pursue in the PR that implements this.

Copy link
Member

@jorgefilipecosta jorgefilipecosta Apr 28, 2022

Choose a reason for hiding this comment

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

Yes but if have a block specific color, on theme.json we generate:

p.has-red-color {
color: var(--wp--preset--color--paragraph-red)
}

So in each section we can not do just:

.wp-section-UUID .has-red-color {
  --wp--preset--color--red: "red-section-global";
}

We also need to overwrite the block specific colors:

.wp-section-UUID p.has-red-color {
  --wp--preset--color--red: "red-section-global";
}

@@ -102,7 +107,7 @@ const removeCustomPrefixes = ( path ) => {
* ```
*/
export default function useSetting( path ) {
Copy link
Contributor

Choose a reason for hiding this comment

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

I wonder if we can unit test this hook to avoid regressions. Wrap it in a test component and mock the global styles input and see what you get in different situations.

settings: {
type: 'object',
},
};
Copy link
Contributor

Choose a reason for hiding this comment

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

This works :) I wonder if this kind of built-in attributes we're adding (style, lock, settings) should at some point move to the registration function instead of using hooks. They're becoming so central to the block editor experience. (A discussion for later)

Copy link
Member

Choose a reason for hiding this comment

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

It's already a thing in WordPress core for the lock attribute:

https://github.com/WordPress/wordpress-develop/blob/04e9728701b3dde0260c7cdebfd726edbe62ac97/src/wp-includes/class-wp-block-type.php#L213-L215

I fully agree we should follow with style and className which are essential for styling all blocks.

Copy link
Member

Choose a reason for hiding this comment

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

It's worth noting that a couple of blocks can't use style and className, as they lack the markup to apply them to, e.g. the Page Break and Shortcode blocks. Not sure if that matters here, but I figured I'd bring it up.

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.

Looking good overall 👏

@oandregal
Copy link
Member Author

I think we need to clarify another question: what should a section be able to do with the presets? Be able to set presets from any origin or only presets for the custom origin?

This is, should the format for presets include the origin key (default, theme, custom) as in:

{
  "settings": {
    "color": {
      "palette": {
        "theme": [],
        "theme": [],
        "custom": []
      }
    }
  }
}

or only the custom ones (no key and we match the presets defined in a section as custom):

{
  "settings": {
    "color": {
      "palette": []
    }
  }
}

I lean towards the first option (what this PR does) because it allows for greater control.

@jorgefilipecosta
Copy link
Member

I think we need to clarify another question: what should a section be able to do with the presets? Be able to set presets from any origin or only presets for the custom origin?

I think we should go with any origin as this PR does.

Copy link
Member

@jorgefilipecosta jorgefilipecosta left a comment

Choose a reason for hiding this comment

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

It works well in my tests and I think it is ready to merge 👍 I think we can make the settings support experimental for some time but I don't have string feelings here as settings are something we really need.

@@ -18,6 +18,7 @@
}
},
"supports": {
"settings": true,
Copy link
Member

Choose a reason for hiding this comment

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

I would lean to making it experimental for some time.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Group Affects the Group Block [Block] Pattern Affects the Patterns Block Needs Dev Note Requires a developer note for a major WordPress release cycle
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants