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

Avoid using CSS variables for block gap styles #37360

Merged
merged 7 commits into from
Dec 28, 2021

Conversation

youknowriad
Copy link
Contributor

@youknowriad youknowriad commented Dec 14, 2021

Closes #36521

This PR removes the block gap style CSS variable because of the conflicts it creates. We can still keep the variable but only for the "root level" theme.json style config.

Todo

  • Update the block specific block gap to not rely on CSS variables (only works for layout based blocks)
  • Update theme.json support to only generate the block gap CSS variable for the root level styles.
  • Update the theme.json per block block gap support:
    • I think we may forced to drop per block theme.json block gap support because we don't know the chosen layout statically for each block in theme.json (the user could change it and the block gap styles are layout type specific)
  • Ensure Columns block compatibility (PR: Columns: Avoid using CSS variables for block gap styles #37436)
  • Ensure Navigation block compatibility (PR: Navigation Block : try not using css variable for block gap support #37543)

@youknowriad youknowriad added Customization Issues related to Phase 2: Customization efforts Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta labels Dec 14, 2021
@youknowriad youknowriad self-assigned this Dec 14, 2021
@youknowriad
Copy link
Contributor Author

I think we may forced to drop per block theme.json block gap support because we don't know the chosen layout statically for each block in theme.json (the user could change it and the block gap styles are layout type specific)

Is this an acceptable tradeoff for now? I can't see how we could allow it while solving the conflicting issue.

@github-actions
Copy link

github-actions bot commented Dec 14, 2021

Size Change: +67 B (0%)

Total Size: 1.13 MB

Filename Size Change
build/block-editor/index.min.js 140 kB +71 B (0%)
build/block-library/index.min.js 165 kB -4 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 960 B
build/admin-manifest/index.min.js 1.1 kB
build/annotations/index.min.js 2.75 kB
build/api-fetch/index.min.js 2.21 kB
build/autop/index.min.js 2.12 kB
build/blob/index.min.js 459 B
build/block-directory/index.min.js 6.28 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 14.6 kB
build/block-editor/style.css 14.6 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 58 B
build/block-library/blocks/audio/editor.css 58 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/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 470 B
build/block-library/blocks/button/editor.css 470 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 90 B
build/block-library/blocks/code/style.css 90 B
build/block-library/blocks/code/theme-rtl.css 134 B
build/block-library/blocks/code/theme.css 134 B
build/block-library/blocks/columns/editor-rtl.css 210 B
build/block-library/blocks/columns/editor.css 208 B
build/block-library/blocks/columns/style-rtl.css 502 B
build/block-library/blocks/columns/style.css 501 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/cover/editor-rtl.css 546 B
build/block-library/blocks/cover/editor.css 547 B
build/block-library/blocks/cover/style-rtl.css 1.22 kB
build/block-library/blocks/cover/style.css 1.22 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 322 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 966 B
build/block-library/blocks/gallery/editor.css 970 B
build/block-library/blocks/gallery/style-rtl.css 1.6 kB
build/block-library/blocks/gallery/style.css 1.6 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 159 B
build/block-library/blocks/group/editor.css 159 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 114 B
build/block-library/blocks/heading/style.css 114 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 810 B
build/block-library/blocks/image/editor.css 809 B
build/block-library/blocks/image/style-rtl.css 507 B
build/block-library/blocks/image/style.css 511 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 137 B
build/block-library/blocks/latest-posts/editor.css 137 B
build/block-library/blocks/latest-posts/style-rtl.css 528 B
build/block-library/blocks/latest-posts/style.css 527 B
build/block-library/blocks/list/style-rtl.css 94 B
build/block-library/blocks/list/style.css 94 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 649 B
build/block-library/blocks/navigation-link/editor.css 650 B
build/block-library/blocks/navigation-link/style-rtl.css 94 B
build/block-library/blocks/navigation-link/style.css 94 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 343 B
build/block-library/blocks/navigation/editor-rtl.css 1.91 kB
build/block-library/blocks/navigation/editor.css 1.91 kB
build/block-library/blocks/navigation/style-rtl.css 1.8 kB
build/block-library/blocks/navigation/style.css 1.79 kB
build/block-library/blocks/navigation/view.min.js 2.82 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 377 B
build/block-library/blocks/page-list/editor.css 377 B
build/block-library/blocks/page-list/style-rtl.css 172 B
build/block-library/blocks/page-list/style.css 172 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 273 B
build/block-library/blocks/paragraph/style.css 273 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/style-rtl.css 446 B
build/block-library/blocks/post-comments-form/style.css 446 B
build/block-library/blocks/post-comments/style-rtl.css 509 B
build/block-library/blocks/post-comments/style.css 509 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 391 B
build/block-library/blocks/post-template/style.css 392 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 389 B
build/block-library/blocks/pullquote/style.css 388 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 131 B
build/block-library/blocks/query/editor.css 132 B
build/block-library/blocks/quote/style-rtl.css 187 B
build/block-library/blocks/quote/style.css 187 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 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 99 B
build/block-library/blocks/separator/editor.css 99 B
build/block-library/blocks/separator/style-rtl.css 245 B
build/block-library/blocks/separator/style.css 245 B
build/block-library/blocks/separator/theme-rtl.css 172 B
build/block-library/blocks/separator/theme.css 172 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 744 B
build/block-library/blocks/site-logo/editor.css 744 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 670 B
build/block-library/blocks/social-links/editor.css 669 B
build/block-library/blocks/social-links/style-rtl.css 1.32 kB
build/block-library/blocks/social-links/style.css 1.32 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 471 B
build/block-library/blocks/table/editor.css 472 B
build/block-library/blocks/table/style-rtl.css 481 B
build/block-library/blocks/table/style.css 481 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 146 B
build/block-library/blocks/tag-cloud/style.css 146 B
build/block-library/blocks/template-part/editor-rtl.css 560 B
build/block-library/blocks/template-part/editor.css 559 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 910 B
build/block-library/common.css 908 B
build/block-library/editor-rtl.css 10 kB
build/block-library/editor.css 10 kB
build/block-library/reset-rtl.css 474 B
build/block-library/reset.css 474 B
build/block-library/style-rtl.css 10.8 kB
build/block-library/style.css 10.9 kB
build/block-library/theme-rtl.css 675 B
build/block-library/theme.css 679 B
build/block-serialization-default-parser/index.min.js 1.09 kB
build/block-serialization-spec-parser/index.min.js 2.79 kB
build/blocks/index.min.js 46.3 kB
build/components/index.min.js 215 kB
build/components/style-rtl.css 15.5 kB
build/components/style.css 15.5 kB
build/compose/index.min.js 11.2 kB
build/core-data/index.min.js 13.3 kB
build/customize-widgets/index.min.js 11.4 kB
build/customize-widgets/style-rtl.css 1.5 kB
build/customize-widgets/style.css 1.49 kB
build/data-controls/index.min.js 631 B
build/data/index.min.js 7.49 kB
build/date/index.min.js 31.9 kB
build/deprecated/index.min.js 485 B
build/dom-ready/index.min.js 304 B
build/dom/index.min.js 4.5 kB
build/edit-navigation/index.min.js 16 kB
build/edit-navigation/style-rtl.css 3.76 kB
build/edit-navigation/style.css 3.76 kB
build/edit-post/classic-rtl.css 492 B
build/edit-post/classic.css 494 B
build/edit-post/index.min.js 29.5 kB
build/edit-post/style-rtl.css 7.16 kB
build/edit-post/style.css 7.16 kB
build/edit-site/index.min.js 35.8 kB
build/edit-site/style-rtl.css 6.63 kB
build/edit-site/style.css 6.62 kB
build/edit-widgets/index.min.js 16.5 kB
build/edit-widgets/style-rtl.css 4.17 kB
build/edit-widgets/style.css 4.18 kB
build/editor/index.min.js 37.9 kB
build/editor/style-rtl.css 3.75 kB
build/editor/style.css 3.74 kB
build/element/index.min.js 3.29 kB
build/escape-html/index.min.js 517 B
build/format-library/index.min.js 6.58 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.63 kB
build/html-entities/index.min.js 424 B
build/i18n/index.min.js 3.71 kB
build/is-shallow-equal/index.min.js 501 B
build/keyboard-shortcuts/index.min.js 1.8 kB
build/keycodes/index.min.js 1.39 kB
build/list-reusable-blocks/index.min.js 1.72 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.92 kB
build/notices/index.min.js 925 B
build/nux/index.min.js 2.08 kB
build/nux/style-rtl.css 747 B
build/nux/style.css 743 B
build/plugins/index.min.js 1.84 kB
build/primitives/index.min.js 924 B
build/priority-queue/index.min.js 582 B
build/react-i18n/index.min.js 671 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.65 kB
build/reusable-blocks/index.min.js 2.22 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 11 kB
build/server-side-render/index.min.js 1.57 kB
build/shortcode/index.min.js 1.49 kB
build/token-list/index.min.js 639 B
build/url/index.min.js 1.9 kB
build/viewport/index.min.js 1.05 kB
build/warning/index.min.js 248 B
build/widgets/index.min.js 7.15 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.04 kB

compressed-size-action

@jasmussen
Copy link
Contributor

What's the best way to test it? As a quick superficial test, basics look okay to me:
Screenshot 2021-12-14 at 11 41 32

Screenshot 2021-12-14 at 11 46 31

I did notice a hiccup on the frontend:
Screenshot 2021-12-14 at 11 41 16

And an error in the nav block:
Screenshot 2021-12-14 at 11 46 09

I think we may forced to drop per block theme.json block gap support because we don't know the chosen layout statically for each block in theme.json (the user could change it and the block gap styles are layout type specific)

Can you expand on the consequences of this? Does that mean I won't be able to do this?

			"core/navigation": {
				"spacing": {
					"blockGap": "48px"
				}
			},

@ndiego
Copy link
Member

ndiego commented Dec 14, 2021

This is a tough one. I really like the simplicity of the CSS variables, but I cannot think of an alternative solution to this PR other than even more CSS variables like #35454. But introduces other questions/potential issues.

I will give this PR a thorough test today!

@carolinan
Copy link
Contributor

I think we may forced to drop per block theme.json block gap support because we don't know the chosen layout statically for each block in theme.json (the user could change it and the block gap styles are layout type specific)

Is this an acceptable tradeoff for now? I can't see how we could allow it while solving the conflicting issue.

I think it is acceptable, there is still the ability to add top margins if needed.

@youknowriad
Copy link
Contributor Author

@oandregal @jorgefilipecosta I'd appreciate some help on the two remaining todo list items here when you have time :)

@ramonjd
Copy link
Member

ramonjd commented Dec 14, 2021

Thanks for kicking this off! 🙇

I took a look at the following blocks:

  1. Social links
  2. Buttons
  3. Navigation
  4. Columns (needs to opt-in to __experimentalLayout.default.type.flex)

Social links and Buttons work pretty well out of the box!

Update the block specific block gap to not rely on CSS variables (only works for layout based blocks)

I might be wrong, but I guess we'd have to modify the CSS for Columns and Navigation, which rely on the block style spacing.blockGap (now ignored) and the value of --wp--style--block-gap to control not only gap but margins as well.

Columns is not yet a layout based block, so it might have to opt-in to __experimentalLayout and look at replacing the margin values formerly defined by --wp--style--block-gap. cc @andrewserong for thoughts.

Happy to help out here as this PR evolves.

@youknowriad
Copy link
Contributor Author

Indeed @ramonjd blocks that don't use the "layout support" won't be able to use block gap anymore. I think that's fine to be honest and we don't need to support per block block gap for these blocks right now but we can iterate on them to add layout support.

It's also fine to leave the CSS variables in their styles if needed as the root CSS variables will still be generated from theme.json

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 digging into this one @youknowriad!

I'm wondering if it's possible to reduce the scope of the change in this PR slightly, so that we can preserve the Columns block blockGap control in the shorter-term so that we can incrementally move to the layout support without dropping the per-block individual control.

Is the root of the problem in #36521 that the rendered Layout style sets for the block's children a value that references the CSS variable? E.g. $selector > * + * { margin-top: var( --wp--style--block-gap )? If so, I'm wondering if we can update gutenberg_get_layout_style so that it always uses a real value instead of referencing the CSS variable. I was thinking if around line 171 of layout.php, if we ensure that $gap_value is either the block's style.spacing.blockGap value, or the theme's root level style.spacing.blockGap value, then gutenberg_get_layout_style might never need to reference a CSS variable in its generated styles?

If we can get it to do that, then we might be able to safely retain the inline CSS variable rendering used by the Columns, Buttons and Navigation blocks.

In addition to the Columns styling, the Buttons block also still uses the CSS variable for button width calculation, so it might not be easy to remove the block-level CSS variable entirely. However, with the main margin styles that are applied to children no longer using the CSS variable, in theory it sounds like the conflict might then be resolved?

It's also fine to leave the CSS variables in their styles if needed as the root CSS variables will still be generated from theme.json

So long as blocks include CSS variables in their styles, I think this means we'll still need to render the inline CSS variable for the blocks to be styled correctly? Apologies if I'm missing some details here, though!

@youknowriad
Copy link
Contributor Author

so that we can preserve the Columns block blockGap control in the shorter-term so that we can incrementally move to the layout support without dropping the per-block individual control.

Unfortunately I don't think we can.

Basically, we have to keep the root CSS variable as a fallback, otherwise there's no solution for theme.json to define a consistent gap across blocks and layouts (flex, flow...)

The way columns work is that they have custom styles relying on the CSS variable and when the user changes the value of the gap, we update the CSS variable. The problem is that setting that CSS variable causes the parent (often root) container margins to break because of the > * selector.

There are some approaches to solve that for the columns block:

  • Generate custom styles for the columns block when the block gap value changes
  • Rely on an adhoc CSS variable for the columns block's block gap value.

Both these solutions basically mean having custom logic for the block instead of relying on the block support. I think the work needed is probably bigger than refactoring the block to use the layout abstraction.

@youknowriad
Copy link
Contributor Author

So long as blocks include CSS variables in their styles, I think this means we'll still need to render the inline CSS variable for the blocks to be styled correctly? Apologies if I'm missing some details here, though!

The blocks shouldn't include CSS variables in their styles ideally. The blocks should be relying on the layout block support to generate the right styles for them: if they have a custom block gap value, it will generate styles with that value (no variable), if they don't have a value, it will generate a fallback to the root CSS variable.

For blocks that don't use the layout abstraction yet, they can't have block gap support, they can use the CSS variable in their styles if they want to still consume the "root theme.json block gap" but custom block gap support is not possible.

@ndiego ndiego mentioned this pull request Dec 15, 2021
23 tasks
@ramonjd
Copy link
Member

ramonjd commented Dec 15, 2021

Thanks for the explanations @youknowriad 🙇

There are some approaches to solve that for the columns block:

  • Generate custom styles for the columns block when the block gap value changes
  • Rely on an adhoc CSS variable for the columns block's block gap value.

Without thinking too deeply about it, the adhoc CSS variable approach is very tempting as it might be neater than whatever we'd have to do to set and utilize the block gap value across various Columns Block elements.

I suppose the fallback value would be the value of the root theme.json block gap (if it exists), e.g., from columns/style.scss:

// Add space between the multiple columns. Themes can customize this if they wish to work differently.
// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
&:nth-child(even) {
    margin-left: var(--wp--style--columns-block-gap, var(--wp--style--block-gap, 2em));
}

For blocks that don't use the layout abstraction yet, they can't have block gap support

Just checking, would that include the Columns block? It hasn't opted into __experimentalLayout, but if we can something custom working as per your suggestions, we wouldn't need to (?)

@youknowriad
Copy link
Contributor Author

I the our time is better spent moving the columns block to the layout abstraction instead of implementing a "custom block gap" support specific to a given block. Ideally we want consistency across all blocks. At least I believe we should give it a try and see how complex it would be, maybe it's not that hard?

The CSS variables approach suffers from another problem (that I just noticed today in trunk for the general block gap), When you apply it, if you have nested columns blocks, the inner one will get the block gap applied to the outer one.

@andrewserong
Copy link
Contributor

our time is better spent moving the columns block to the layout abstraction instead of implementing a "custom block gap" support specific to a given block. Ideally we want consistency across all blocks. At least I believe we should give it a try and see how complex it would be, maybe it's not that hard?

Thanks for the explanations @youknowriad! You make very good points about consolidating on the block support providing the necessary styling instead of the individual block having its own ad hoc approach. This sounds like a good way for the block support to work to me, and a good direction forward for the API.

My main concern is to ensure that we don't break or lose behaviour for the blocks we've already opted-in to the block gap support (as folks had been wanting gap support for columns and buttons for quite a while). But I'm very happy for us take your lead here and investigate how complex it'll be to switch over the Columns block to using the Layout support. Let's see how it goes!

One other thing for us to keep in the back of our minds as we work on the Layout support is the outstanding issue in #35376 that the styles are not rendered over the REST API so won't render correctly in the post content block within the editor. We've gotten close a couple of times at coming up with a solution for it, but unfortunately recent attempts for a fix were blocked (for very valid reasons). I don't believe we're close to a fix for it (my most recent attempt is pretty messy and I'm not sure will be viable, either), so just wanted to flag it in case it winds up being a blocker.

@MaggieCabrera
Copy link
Contributor

This PR breaks blocks that define a blockGap in their markup like so:

<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}},"layout":{"type":"flex","allowOrientation":false,"justifyContent":"space-between","flexWrap":"nowrap"}} -->

In my experience so far we've needed to do this mostly on row blocks where we want to reset the gap to zero, what would be the best way to do that?

@youknowriad
Copy link
Contributor Author

@MaggieCabrera conceptually, it shouldn't break that use case, maybe it's because the group block doesn't support blockGap officially yet which should happen after #37459 get merged. You can maybe a try a branch with both PRs to see if it still works.

@MaggieCabrera
Copy link
Contributor

@MaggieCabrera conceptually, it shouldn't break that use case, maybe it's because the group block doesn't support blockGap officially yet which should happen after #37459 get merged. You can maybe a try a branch with both PRs to see if it still works.

you are right and the markup does work on blocks that support it, thank you!

@youknowriad youknowriad marked this pull request as ready for review December 20, 2021 08:27
@ramonjd
Copy link
Member

ramonjd commented Jan 20, 2022

Just noting here that we might need to update a WordPress core test when/if this changeset makes it into the next version of WordPress.

@fullofcaffeine found that equality checks on rendered blocks and fixtures in test_do_block_output() could fail if blocks – such as the recently-updated Columns Block – opt into the layout abstraction and therefore receive a dynamic class name via wp-container- + uniqid().

The short of it is that the fixture, which has static classnames, doesn't match the rendered block.

Sniffing around, I see that some Gutenberg tests handle this via a string replace on the id portion of the classname. That could be an approach.

I'm not sure whether we should prepare core for this now, or (something I suspect is better) waiting until the next core update and dealing with the failing tests then. Gutenberg changes a lot so maybe we should fix it when the next update happens... assuming the code is still there 😄

@scruffian
Copy link
Contributor

It is a shame that since this change blocks can't set a gap in theme.json. I opened https://github.com/WordPress/wordpress-develop/pull/2307/files to see if we could find a way round that... cc @youknowriad

@youknowriad
Copy link
Contributor Author

@scruffian unfortunately, it's done on purpose, if you allow tweaks (like your PR does), it's going to recreate the issues fixed by this PR. Basically, The wrong "margin-top" can be applied to a social-links block (or a buttons block) if you tweak its gap using theme.json. Instead of using the margin top of the default gap, it will use the one specific to that block.

adamziel added a commit to adamziel/wordpress-develop that referenced this pull request Apr 12, 2022
This relates to a change in the Columns block that added layout support.
See WordPress/gutenberg#37360 (comment).
Blocks that opt into layout support are gifted generated classnames of wp_unique_id( 'wp-container-' ).
One possible approach is to update test_do_block_output in Tests_Blocks_Render to swap the id for something
we expect. It's how Gutenberg approaches it when testing generated classnames in elements support.
adamziel added a commit to adamziel/wordpress-develop that referenced this pull request Apr 12, 2022
This relates to a change in the Columns block that added layout support.
See WordPress/gutenberg#37360 (comment).
Blocks that opt into layout support are gifted generated classnames of wp_unique_id( 'wp-container-' ).
One possible approach is to update test_do_block_output in Tests_Blocks_Render to swap the id for something
we expect. It's how Gutenberg approaches it when testing generated classnames in elements support.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Customization Issues related to Phase 2: Customization efforts
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Block Spacing setting causes conflict with blockGap (Columns, Navigation, etc.)