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

Block styles: remove __unstableElementContext in favour of useStyleOverride #54493

Merged
merged 7 commits into from
Nov 13, 2023

Conversation

ellatrix
Copy link
Member

What?

Previously: #52888, #54466

Why?

We can use useStyleOverride everywhere now.

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

@ellatrix ellatrix added the [Type] Code Quality Issues or PRs that relate to code quality label Sep 15, 2023
@github-actions
Copy link

github-actions bot commented Sep 15, 2023

Size Change: -339 B (0%)

Total Size: 1.7 MB

Filename Size Change
build/block-editor/index.min.js 247 kB -331 B (0%)
build/block-library/index.min.js 212 kB -8 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 964 B
build/annotations/index.min.js 2.71 kB
build/api-fetch/index.min.js 2.29 kB
build/autop/index.min.js 2.11 kB
build/blob/index.min.js 461 B
build/block-directory/index.min.js 7.25 kB
build/block-directory/style-rtl.css 1.04 kB
build/block-directory/style.css 1.04 kB
build/block-editor/content-rtl.css 4.28 kB
build/block-editor/content.css 4.27 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 15.7 kB
build/block-editor/style.css 15.7 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 104 B
build/block-library/blocks/avatar/style.css 104 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 587 B
build/block-library/blocks/button/editor.css 587 B
build/block-library/blocks/button/style-rtl.css 633 B
build/block-library/blocks/button/style.css 632 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 113 B
build/block-library/blocks/categories/editor.css 112 B
build/block-library/blocks/categories/style-rtl.css 124 B
build/block-library/blocks/categories/style.css 124 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 421 B
build/block-library/blocks/columns/style.css 421 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 647 B
build/block-library/blocks/cover/editor.css 650 B
build/block-library/blocks/cover/style-rtl.css 1.7 kB
build/block-library/blocks/cover/style.css 1.69 kB
build/block-library/blocks/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 98 B
build/block-library/blocks/details/style.css 98 B
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 316 B
build/block-library/blocks/file/editor.css 316 B
build/block-library/blocks/file/style-rtl.css 280 B
build/block-library/blocks/file/style.css 281 B
build/block-library/blocks/file/view.min.js 320 B
build/block-library/blocks/footnotes/style-rtl.css 201 B
build/block-library/blocks/footnotes/style.css 199 B
build/block-library/blocks/form-input/editor-rtl.css 229 B
build/block-library/blocks/form-input/editor.css 228 B
build/block-library/blocks/form-input/style-rtl.css 343 B
build/block-library/blocks/form-input/style.css 343 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 343 B
build/block-library/blocks/form-submission-notification/editor.css 342 B
build/block-library/blocks/form-submit-button/style-rtl.css 69 B
build/block-library/blocks/form-submit-button/style.css 69 B
build/block-library/blocks/form/view.min.js 452 B
build/block-library/blocks/freeform/editor-rtl.css 2.61 kB
build/block-library/blocks/freeform/editor.css 2.61 kB
build/block-library/blocks/gallery/editor-rtl.css 957 B
build/block-library/blocks/gallery/editor.css 962 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 189 B
build/block-library/blocks/heading/style.css 189 B
build/block-library/blocks/html/editor-rtl.css 340 B
build/block-library/blocks/html/editor.css 341 B
build/block-library/blocks/image/editor-rtl.css 849 B
build/block-library/blocks/image/editor.css 847 B
build/block-library/blocks/image/style-rtl.css 1.6 kB
build/block-library/blocks/image/style.css 1.59 kB
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/image/view.min.js 2.01 kB
build/block-library/blocks/latest-comments/style-rtl.css 357 B
build/block-library/blocks/latest-comments/style.css 357 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 505 B
build/block-library/blocks/media-text/style.css 503 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 671 B
build/block-library/blocks/navigation-link/editor.css 672 B
build/block-library/blocks/navigation-link/style-rtl.css 103 B
build/block-library/blocks/navigation-link/style.css 103 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.26 kB
build/block-library/blocks/navigation/editor.css 2.26 kB
build/block-library/blocks/navigation/style-rtl.css 2.27 kB
build/block-library/blocks/navigation/style.css 2.26 kB
build/block-library/blocks/navigation/view.min.js 1.07 kB
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 401 B
build/block-library/blocks/page-list/editor.css 401 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 235 B
build/block-library/blocks/paragraph/editor.css 235 B
build/block-library/blocks/paragraph/style-rtl.css 335 B
build/block-library/blocks/paragraph/style.css 335 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 508 B
build/block-library/blocks/post-comments-form/style.css 508 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 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 141 B
build/block-library/blocks/post-excerpt/style.css 141 B
build/block-library/blocks/post-featured-image/editor-rtl.css 666 B
build/block-library/blocks/post-featured-image/editor.css 662 B
build/block-library/blocks/post-featured-image/style-rtl.css 345 B
build/block-library/blocks/post-featured-image/style.css 345 B
build/block-library/blocks/post-navigation-link/style-rtl.css 215 B
build/block-library/blocks/post-navigation-link/style.css 214 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 409 B
build/block-library/blocks/post-template/style.css 408 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-time-to-read/style-rtl.css 69 B
build/block-library/blocks/post-time-to-read/style.css 69 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 125 B
build/block-library/blocks/preformatted/style.css 125 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 335 B
build/block-library/blocks/pullquote/style.css 335 B
build/block-library/blocks/pullquote/theme-rtl.css 168 B
build/block-library/blocks/pullquote/theme.css 168 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 486 B
build/block-library/blocks/query/editor.css 486 B
build/block-library/blocks/query/style-rtl.css 312 B
build/block-library/blocks/query/style.css 308 B
build/block-library/blocks/query/view.min.js 637 B
build/block-library/blocks/quote/style-rtl.css 222 B
build/block-library/blocks/quote/style.css 222 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 149 B
build/block-library/blocks/rss/editor.css 149 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 184 B
build/block-library/blocks/search/editor.css 184 B
build/block-library/blocks/search/style-rtl.css 613 B
build/block-library/blocks/search/style.css 613 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/search/view.min.js 471 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 329 B
build/block-library/blocks/shortcode/editor.css 329 B
build/block-library/blocks/site-logo/editor-rtl.css 760 B
build/block-library/blocks/site-logo/editor.css 760 B
build/block-library/blocks/site-logo/style-rtl.css 204 B
build/block-library/blocks/site-logo/style.css 204 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 682 B
build/block-library/blocks/social-links/editor.css 681 B
build/block-library/blocks/social-links/style-rtl.css 1.45 kB
build/block-library/blocks/social-links/style.css 1.45 kB
build/block-library/blocks/spacer/editor-rtl.css 359 B
build/block-library/blocks/spacer/editor.css 359 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 432 B
build/block-library/blocks/table/editor.css 432 B
build/block-library/blocks/table/style-rtl.css 646 B
build/block-library/blocks/table/style.css 645 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 403 B
build/block-library/blocks/template-part/editor.css 403 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/term-description/style-rtl.css 111 B
build/block-library/blocks/term-description/style.css 111 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 552 B
build/block-library/blocks/video/editor.css 555 B
build/block-library/blocks/video/style-rtl.css 191 B
build/block-library/blocks/video/style.css 191 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 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.11 kB
build/block-library/common.css 1.11 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 12.5 kB
build/block-library/editor.css 12.4 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/style-rtl.css 14.5 kB
build/block-library/style.css 14.5 kB
build/block-library/theme-rtl.css 700 B
build/block-library/theme.css 705 B
build/block-serialization-default-parser/index.min.js 1.13 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 51.5 kB
build/commands/index.min.js 15.5 kB
build/commands/style-rtl.css 947 B
build/commands/style.css 942 B
build/components/index.min.js 256 kB
build/components/style-rtl.css 12 kB
build/components/style.css 12 kB
build/compose/index.min.js 12.7 kB
build/core-commands/index.min.js 2.72 kB
build/core-data/index.min.js 71.8 kB
build/customize-widgets/index.min.js 12.1 kB
build/customize-widgets/style-rtl.css 1.43 kB
build/customize-widgets/style.css 1.43 kB
build/data-controls/index.min.js 651 B
build/data/index.min.js 8.87 kB
build/date/index.min.js 17.9 kB
build/deprecated/index.min.js 462 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.68 kB
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/edit-post/index.min.js 35.9 kB
build/edit-post/style-rtl.css 7.75 kB
build/edit-post/style.css 7.75 kB
build/edit-site/index.min.js 209 kB
build/edit-site/style-rtl.css 14.2 kB
build/edit-site/style.css 14.2 kB
build/edit-widgets/index.min.js 17.2 kB
build/edit-widgets/style-rtl.css 4.65 kB
build/edit-widgets/style.css 4.65 kB
build/editor/index.min.js 46 kB
build/editor/style-rtl.css 3.58 kB
build/editor/style.css 3.58 kB
build/element/index.min.js 4.87 kB
build/escape-html/index.min.js 548 B
build/format-library/index.min.js 7.82 kB
build/format-library/style-rtl.css 577 B
build/format-library/style.css 577 B
build/hooks/index.min.js 1.57 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.61 kB
build/interactivity/index.min.js 11.4 kB
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.76 kB
build/keycodes/index.min.js 1.9 kB
build/list-reusable-blocks/index.min.js 2.21 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.92 kB
build/notices/index.min.js 964 B
build/nux/index.min.js 2.01 kB
build/nux/style-rtl.css 775 B
build/nux/style.css 771 B
build/patterns/index.min.js 4.78 kB
build/patterns/style-rtl.css 567 B
build/patterns/style.css 566 B
build/plugins/index.min.js 1.81 kB
build/preferences-persistence/index.min.js 1.85 kB
build/preferences/index.min.js 1.26 kB
build/primitives/index.min.js 994 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 988 B
build/react-i18n/index.min.js 631 B
build/react-refresh-entry/index.min.js 9.46 kB
build/react-refresh-runtime/index.min.js 6.78 kB
build/redux-routine/index.min.js 2.71 kB
build/reusable-blocks/index.min.js 2.73 kB
build/reusable-blocks/style-rtl.css 265 B
build/reusable-blocks/style.css 265 B
build/rich-text/index.min.js 10.2 kB
build/router/index.min.js 1.79 kB
build/server-side-render/index.min.js 1.96 kB
build/shortcode/index.min.js 1.4 kB
build/style-engine/index.min.js 1.98 kB
build/token-list/index.min.js 587 B
build/url/index.min.js 3.83 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 967 B
build/warning/index.min.js 259 B
build/widgets/index.min.js 7.18 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.18 kB
build/wordcount/index.min.js 1.03 kB

compressed-size-action

Copy link
Contributor

@andrewserong andrewserong left a comment

Choose a reason for hiding this comment

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

Nice work @ellatrix, this is testing well for me on desktop, and the useStyleOverride hook looks like a good and centralised approach for each of the block supports to use for injecting their CSS 👍

✅ Layout block support outputs block-level layout rules correctly
✅ Position support outputs block-level rules correctly
✅ Elements support appears to output block-level rules correctly with links, headings, and buttons
✅ Gallery block appears to work correctly on desktop, with custom block spacing values output correctly

Is the only blocker for now the failing native tests? I wasn't too sure what the outstanding issue is for the mobile apps based on the comment in the Gallery edit.js file. To my knowledge, I don't think that the mobile apps allow control over block-level block spacing, so I wonder if there's another way to skip that logic from firing on mobile? 🤔

packages/block-editor/src/hooks/utils.js Outdated Show resolved Hide resolved
@andrewserong andrewserong added the [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi label Sep 18, 2023
Copy link
Contributor

@aaronrobertshaw aaronrobertshaw left a comment

Choose a reason for hiding this comment

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

Very nice @ellatrix 👍

The layout, position, section elements, and gallery block gap styling all work as advertised on desktop for me.

@andrewserong's suggested tweaks might be a good finishing touch.

Mostly I'm thinking to ensure that for follow-up features, folks know to reach for this instead of injecting style tags

Perhaps if we could flesh out the PR description a little that might help provide better discoverability and more details on why this approach is preferred.

Is the only blocker for now the failing native tests?

Some of the failures appeared to be some run-of-the-mill timeouts. Others do look related though.

@ellatrix
Copy link
Member Author

I saw the previous component was is a Platform.isWeb condition, so I restored the component.

Copy link
Contributor

@andrewserong andrewserong left a comment

Choose a reason for hiding this comment

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

Thanks for the follow-ups @ellatrix! This is getting closer 👍

In re-testing, I notice that the position support styles don't appear to be applied anymore in my test markup. From logging out useStyleOverride it looks like the hook is receiving the generated styles correctly, but the rules don't appear to be applied in the editor. Here's a screenshot of a Group block that is set to sticky, and has the wp-container-9 classname applied to it. The block should be sticky, but instead scrolls off the top of the screen:

image

From logging out what gets sent to useStyleOverride it looks like it should be receiving the right styles:

image

From re-testing trunk, it appears the issue is somewhere in this PR, but I couldn't quite work out where!

Edit: there appears to be a collision happening between id values being used in different block supports. On trunk, this doesn't matter as two different block supports can happily have the same id of 9, for example (in this case, between the layout and position block supports).

I've left a comment on the position support, but in principle, I don't think useInstanceId is unique enough as an id across all block supports or blocks. With a lone integer it's possible for there to be collisions between different ids, which seems to result in some styles sometimes being overwritten. It looks like when we set an id we need to also include a string prefix to ensure it really is unique? I.e. position-block-support-${ id } or something like that. Is there a preferred approach for folks to use, to avoid collisions?

Since this is pretty subtle behaviour, it could be a good opportunity to write up some guidelines for intended usage for the hook, either in a code comment alongside the hook, or in a readme.

Once the position styles / id collisions are fixed up, the features otherwise appear to be testing well!

<BlockListBlock { ...props } className={ className } />
</>
);
useStyleOverride( { id, css } );
Copy link
Contributor

@andrewserong andrewserong Sep 19, 2023

Choose a reason for hiding this comment

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

From a bit of hacking around, I think useInstanceId isn't unique enough for an id, as it appears to be unique to the component instance, not a unique integer across the runtime environment.

For each block support / usage of useStyleOveride, we might need to add a prefix, so something like:

useStyleOverride( { id: `position-styles-${ id }`, css } );

Copy link
Member Author

Choose a reason for hiding this comment

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

I changed it to useId, which should fix the issue?

Copy link
Contributor

@andrewserong andrewserong Sep 21, 2023

Choose a reason for hiding this comment

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

Unfortunately no, useId doesn't appear to work properly since it seems to include colon characters.

@@ -400,7 +400,7 @@ const elementTypes = [
*/
const withElementsStyles = createHigherOrderComponent(
( BlockListBlock ) => ( props ) => {
const blockElementsContainerIdentifier = `wp-elements-${ useInstanceId(
const blockElementsContainerIdentifier = `wp-elements-${ useId(
BlockListBlock
Copy link
Member

Choose a reason for hiding this comment

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

This argument can be removed.

Copy link
Member Author

Choose a reason for hiding this comment

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

Done

Copy link
Contributor

@andrewserong andrewserong left a comment

Choose a reason for hiding this comment

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

I changed it to useId, which should fix the issue?

Thanks for the updates @ellatrix, but unfortunately this still doesn't appear to be working for me, and now elements styles aren't working in addition to the position support. It looks like useId outputs strings in an unusual format, so container classnames are now wp-container-:r1p: which breaks selectors as it means the output of the CSS (without escaping) looks like illegal pseudo-classes:

image

Would a string prefix per block support + numeric id approach work / be unique enough? Once we've settled on a good approach, it'd be good to document it, since this is proving tricky to come up with a reliable id! 🙂

In case it helps with the testing, here's some sample block markup that includes a Group block with elements styles for headings, links and buttons, following by a sticky Group block, and then some paragraphs so that you can see whether the Group block is sticky:

Test block markup
<!-- wp:group {"style":{"elements":{"link":{"color":{"text":"#dd7878"}},"heading":{"color":{"text":"#440000"}},"button":{"color":{"background":"#b83232","text":"#f6bcbc"}}}},"layout":{"type":"constrained","contentSize":"320px","wideSize":"480px"}} -->
<div class="wp-block-group has-link-color"><!-- wp:paragraph -->
<p>A paragraph</p>
<!-- /wp:paragraph -->

<!-- wp:cover {"overlayColor":"secondary","align":"wide","layout":{"type":"constrained"}} -->
<div class="wp-block-cover alignwide"><span aria-hidden="true" class="wp-block-cover__background has-secondary-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:heading -->
<h2 class="wp-block-heading">A heading</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">A title with <a href="http://wordpress.org">a link</a></p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button A</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button B</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button C</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}},"spacing":{"padding":{"right":"var:preset|spacing|30","left":"var:preset|spacing|30","top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}},"position":{"type":"sticky","top":"0px"}},"backgroundColor":"vivid-red","textColor":"base","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-base-color has-vivid-red-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:paragraph -->
<p>A paragraph</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras gravida ut metus non ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce hendrerit dolor eget porta tincidunt. Nullam sit amet massa euismod, interdum ipsum non, viverra sapien. Pellentesque tincidunt mauris libero, vulputate venenatis purus mollis eget. Etiam erat ligula, sollicitudin at lobortis sit amet, ultricies eu elit. Etiam cursus dui nulla, ut lacinia leo tempor ac. Etiam sit amet porta mauris. Ut aliquet in libero at tincidunt. Mauris vel mauris libero. Nulla at cursus mi, vel luctus risus. Fusce gravida efficitur purus, ac auctor massa facilisis at.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Donec nec magna ac tellus dictum gravida. Curabitur tristique justo nec dui faucibus, vitae pulvinar nunc consequat. Quisque sem est, scelerisque in purus nec, tincidunt varius quam. Phasellus porta et sapien ac fringilla. Vestibulum ut tempus odio. Donec quis metus quis lorem consectetur placerat. Praesent ac mauris at orci laoreet ornare. Duis elementum magna rutrum lacus consequat interdum. Cras lacinia turpis eget est imperdiet commodo.</p>
<!-- /wp:paragraph -->

Test markup screenshots:

Trunk (heading, link, buttons styles applied) This PR (heading, link, buttons styles aren't applied)
image image

<BlockListBlock { ...props } className={ className } />
</>
);
useStyleOverride( { id, css } );
Copy link
Contributor

@andrewserong andrewserong Sep 21, 2023

Choose a reason for hiding this comment

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

Unfortunately no, useId doesn't appear to work properly since it seems to include colon characters.

@ellatrix
Copy link
Member Author

ellatrix commented Sep 21, 2023

Oh, I tested the gap style, and that was working because it's not using the id in the CSS 🤦‍♀️

Would a string prefix per block support + numeric id approach work / be unique enough? Once we've settled on a good approach, it'd be good to document it, since this is proving tricky to come up with a reliable id! 🙂

The id is actually not a problem for useStyleOverride, but it is a problem when using it in CSS selectors. I'll think about what to do, it'd still be good to switch to useId.

@andrewserong
Copy link
Contributor

The id is actually not a problem for useStyleOverride, but it is a problem when using it in CSS selectors. I'll think about what to do, it'd still be good to switch to useId.

Ah, gotcha! Yes, I see, the difference between the id used in the classname and CSS versus the id that's used for the style override itself 👍

Let me know when you'd like me to give this another test 🙂

@andrewserong
Copy link
Contributor

andrewserong commented Sep 22, 2023

it'd still be good to switch to useId

I had another idea, feel free to ignore if it's no good! Would it work to have useStyleOverride use useId internally for the id, then the calling code wouldn't need to worry about ids, and could pass the CSS along as it does currently? (I.e. layout, elements, position would still use string + useInstanceId for their classnames, and selectors within their generated CSS)

The drawback might be that the consumer wouldn't have a way of intentionally overriding a particular style based on a particular id, but if most supports only call useStyleOverride in one place, then in theory they might not need to know about the id being used for that style?

I'm sure there's nuance I'm missing there, so just a thought! 😄

@ellatrix
Copy link
Member Author

ellatrix commented Oct 2, 2023

Sure maybe an optional ID?

@ellatrix
Copy link
Member Author

ellatrix commented Oct 2, 2023

@andrewserong What do you think of the latest version?

Copy link
Contributor

@andrewserong andrewserong left a comment

Choose a reason for hiding this comment

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

Thanks for the updates @ellatrix, this is feeling pretty close to me. Just ran into two small issues:

  • We can drop passing the id for the layout block support, as its id is still an instance-based integer, so the fallback id within useStyleOverride should work better I think
  • It looks like the useStyleOverride useEffect is being called too frequently due to style being a fresh object in each call

I've left a couple of comments. Thanks for continuing on with this one!

Comment on lines 126 to 133
useEffect( () => {
if ( ! style ) return;
const id = style.id || fallbackId;
setStyleOverride( id, style );
return () => {
deleteStyleOverride( id );
};
}, [ fallbackId, style, setStyleOverride, deleteStyleOverride ] );
Copy link
Contributor

Choose a reason for hiding this comment

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

style is an object and useStyleOverride is typically called with a fresh object in each call, so it looks like this useEffect is firing too frequently. E.g. if I log out just before setStyleOverride while scrolling the editor, it looks like it gets called a lot:

2023-10-03.10.00.40.mp4

Would it work to destructure the style object before the useEffect and then use each of those values in the useEffect dependency array, before calling setStyleOverride with a new object? Perhaps something like the following (I haven't tried this, so just an idea):

	const { css, id, assets, __unstableType } = style;

	useEffect( () => {
		if ( ! css && ! assets ) return;
		const _id = id || fallbackId;
		setStyleOverride( _id, { assets, css, id, __unstableType } );
		return () => {
			deleteStyleOverride( id );
		};
	}, [ assets, css, fallbackId, id, setStyleOverride, deleteStyleOverride, __unstableType ] );

I might be missing some details there, though!

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, that's right. Annoying that we have to know all the properties of the style object though. Alternatively we leave it up to the user to of this hook to memo, but that makes it annoying to use. Adjusted.

packages/block-editor/src/hooks/layout.js Outdated Show resolved Hide resolved
Copy link
Contributor

@andrewserong andrewserong left a comment

Choose a reason for hiding this comment

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

Looking pretty good @ellatrix! Just left a comment about where we pass in the id, I think there might be another place to use the fallback _id.

One blocker to landing this PR is that it expands the scope of the issue identified in #54956 where using setStyleOverride appears to result in styles no longer being output or applied for block previews. To test I added a query loop / post template block with a Group block within it, and then in that Group block set the Heading and Link colors (which uses the elements block support). Then, within that Group block, further down the hierarchy I added a Heading block.

On trunk the Heading and Link styles apply in the previews within the query loop. With this PR applied, the Heading and Link styles no longer apply on unselected items within the query loop:

Trunk This PR
image image

So, it looks like we'll likely need to come up with a fix for #54956 before landing this one 🤔

CC: @tellthemachines, just to link together the discussions about that issue 🙂

Some test markup
<!-- wp:query {"queryId":9,"query":{"perPage":"4","pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
<div class="wp-block-query"><!-- wp:post-template {"layout":{"type":"default","columnCount":3}} -->
<!-- wp:group {"style":{"elements":{"heading":{"color":{"text":"#f44343"}},"link":{"color":{"text":"var:preset|color|primary"}}},"color":{"text":"#4f0808"},"border":{"color":"#929df3","width":"3px","radius":"10px"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-border-color has-text-color has-link-color" style="border-color:#929df3;border-width:3px;border-radius:10px;color:#4f0808"><!-- wp:columns {"verticalAlignment":"center"} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"25%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:25%"><!-- wp:post-featured-image {"isLink":true,"aspectRatio":"auto"} /--></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"75%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:75%"><!-- wp:heading {"level":6} -->
<h6 class="wp-block-heading">A heading</h6>
<!-- /wp:heading -->

<!-- wp:post-title {"isLink":true} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
<!-- /wp:post-template --></div>
<!-- /wp:query -->

if ( ! css && ! assets ) return;
const _id = id || fallbackId;
setStyleOverride( _id, {
id,
Copy link
Contributor

Choose a reason for hiding this comment

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

Should this line be referencing the fallback if present, too?

Suggested change
id,
id: _id,

Copy link
Member Author

Choose a reason for hiding this comment

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

I'm not sure? Why should we set the fallback id?

Copy link
Contributor

Choose a reason for hiding this comment

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

I wasn't too sure, but it looks like it works fine without setting the fallback id, so doesn't seem like we need to do anything here 🙂

@andrewserong
Copy link
Contributor

it looks like we'll likely need to come up with a fix for #54956 before landing this one

I have a potential fix open over in #55241

@andrewserong
Copy link
Contributor

Update: #54956 has now been resolved by #55288, which means I think this PR should be unblocked now? Looks like it'll need a rebase after that PR and #55291

@ellatrix
Copy link
Member Author

@andrewserong I rebased the PR 😊

Copy link
Contributor

@andrewserong andrewserong left a comment

Choose a reason for hiding this comment

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

Thanks for your patience and for continuing on with this PR @ellatrix! Sorry I missed your ping a few weeks ago. I've just given this a re-test and it's all working nicely for me now:

✅ Duotone styles are working correctly
✅ Layout styles are working correctly
✅ Position styles are working correctly
✅ Element styles are working correctly
✅ Gallery gap styles are working correctly
✅ Updating styles within a query loop (especially Duotone) is still working with these changes applied

There was a merge conflict with position.js, so I've just given this another rebase, hope you don't mind.

All looking good now, I think this is in a good place to land if you do!

LGTM ✨

if ( ! css && ! assets ) return;
const _id = id || fallbackId;
setStyleOverride( _id, {
id,
Copy link
Contributor

Choose a reason for hiding this comment

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

I wasn't too sure, but it looks like it works fine without setting the fallback id, so doesn't seem like we need to do anything here 🙂

Copy link

github-actions bot commented Nov 10, 2023

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

@andrewserong
Copy link
Contributor

I've just given this another rebase to resolve conflicts with #55762. Seems to still be working well for me!

@ellatrix ellatrix merged commit 4e26178 into trunk Nov 13, 2023
50 checks passed
@ellatrix ellatrix deleted the remove/element-context branch November 13, 2023 04:36
@github-actions github-actions bot added this to the Gutenberg 17.1 milestone Nov 13, 2023
@youknowriad
Copy link
Contributor

This PR had a small but nice noticeable impact on the "first block" metric in the post editor 👏

@websevendev
Copy link

@ellatrix

remove __unstableElementContext in favour of useStyleOverride

I actually used it for something else here:

https://github.com/websevendev/animations-for-blocks/blob/main/src/AnimatedBlockListBlock.tsx#L91C1-L98

But it was __unstable so fair enough.

We can use useStyleOverride everywhere now.

setStyleOverride /deleteStyleOverride is a "private API". Is it expected to become public before release of WP 6.5? Or can useStyleOverride be exported from @wordpress/block-editor?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Type] Code Quality Issues or PRs that relate to code quality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants