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.

Sign up for GitHub

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

Jump to bottom

Fix spacing property generation in flow layout type. #44446

Merged
merged 1 commit into from
Sep 26, 2022
Merged

Fix spacing property generation in flow layout type. #44446

merged 1 commit into from
Sep 26, 2022

Conversation

tellthemachines
Copy link
Contributor

Why?

Fixes #44435.

How?

Adds logic to convert preset values into CSS custom properties to flow ('default') layout type.

Testing Instructions

  1. Add a Columns block with one Column to a post.
  2. Inside the Column, add 2 or more Paragraphs.
  3. In the Column block sidebar, under "Dimensions", add the "Block spacing" controls from the options menu and change the block spacing to a non-default value.
  4. Save the post and in the front end check that spacing styles render correctly.

Screenshots or screencast

Before:

Screen Shot 2022-09-26 at 12 37 13 pm

After:

Screen Shot 2022-09-26 at 12 33 19 pm

@tellthemachines tellthemachines self-assigned this Sep 26, 2022
@tellthemachines tellthemachines added [Type] Bug An existing feature does not function as intended Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi labels Sep 26, 2022
ramonjd
ramonjd approved these changes Sep 26, 2022
View reviewed changes
Copy link
Member

@ramonjd ramonjd left a comment •
edited
Loading

Choose a reason for hiding this comment

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

This works for me!

I noticed that we have a protected utility function in the style engine that would take care of this, if it were public.

It makes me wonder if var:preset|<PRESET_TYPE>|<PRESET_SLUG> definition values passed to wp_style_engine_get_stylesheet_from_css_rules should be converted to CSS vars automatically.

It fixes a pretty glaring bug so I think it's good to get this fix in now and, if we find an acceptable approach, replace it down the line with an internal style engine logic.

@tellthemachines
Copy link
Contributor Author

It makes me wonder if var:preset|<PRESET_TYPE>|<PRESET_SLUG> definition values passed to wp_style_engine_get_stylesheet_from_css_rules should be converted to CSS vars automatically.

Yeah, would be worth investigating if there's a better way than doing this separately for each layout type. But for now let's fix the bug 😅

Thanks for reviewing!

@tellthemachines tellthemachines merged commit 3358251 into trunk Sep 26, 2022
@tellthemachines tellthemachines deleted the fix/spacing-presets-in-layout branch September 26, 2022 03:54
@github-actions github-actions bot added this to the Gutenberg 14.3 milestone Sep 26, 2022
andrewserong
andrewserong approved these changes Sep 26, 2022
View reviewed changes
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 so much for fixing this one up, this LGTM too! 🎉

I'm not sure if this file will get picked up by the Gutenberg process since it sits outside of Gutenberg packages, so I think we might need to open up a separate wordpress-develop PR to backport this fix, too?

@tellthemachines tellthemachines mentioned this pull request Sep 26, 2022
Closed
ockham pushed a commit that referenced this pull request Sep 26, 2022
@tellthemachines @ockham
Fix spacing property generation in flow layout type. (#44446)
83007f5
@ockham
Copy link
Contributor

ockham commented Sep 26, 2022

I just cherry-picked this PR to the wp/6.1 branch to get it included in the next release: 83007f5

@ockham ockham removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Sep 26, 2022
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request Sep 27, 2022
@hellofromtonya
Editor: Update packages for 6.1 Beta 2.
cce69f5 
Package updates for bug and regression fixes:

* @wordpress/block-directory: 3.15.3
* @wordpress/block-editor: 10.0.3
* @wordpress/block-library: 7.14.3
* @wordpress/block-serialization-default-parser: 4.17.1
* @wordpress/blocks: 11.16.3
* @wordpress/components: 21.0.3
* @wordpress/compose: 5.15.2
* @wordpress/core-data: 5.0.3
* @wordpress/customize-widgets: 3.14.3
* @wordpress/edit-post: 6.14.3
* @wordpress/edit-site: 4.14.4
* @wordpress/edit-widgets: 4.14.3
* @wordpress/editor: 12.16.3
* @wordpress/format-library: 3.15.3
* @wordpress/interface: 4.16.3
* @wordpress/list-reusable-blocks: 3.15.3
* @wordpress/nux: 5.15.3
* @wordpress/preferences: 2.9.3
* @wordpress/reusable-blocks: 3.15.3
* @wordpress/server-side-render: 3.15.3
* @wordpress/style-engine: 1.0.2
* @wordpress/widgets: 2.15.3

References:
* [WordPress/gutenberg#44233 Gutenberg PR 44233] – Blocks: Fix searching of blocks when description is non-string
* [WordPress/gutenberg#44301 Gutenberg PR 44301] – Block Toolbar: update position when moving blocks
* [WordPress/gutenberg#44334 Gutenberg PR 44334] – Global Styles: Re-add styles that were removed, for classic themes
* [WordPress/gutenberg#44351 Gutenberg PR 44351] – Comments block: Support nested comments settings in the comments blocks
* [WordPress/gutenberg#44448 Gutenberg PR 44448] – Add a correct TS signature for useEntityRecords
* [WordPress/gutenberg#44315 Gutenberg PR 44315] – Pullquote: fix transform to quote crash
* [WordPress/gutenberg#44446 Gutenberg PR 44446] – Fix spacing property generation in flow layout type.
* [WordPress/gutenberg#44408 Gutenberg PR 44408] – Upgrade react-easy-crop to bring in fix for site editor iframe
* [WordPress/gutenberg#44406 Gutenberg PR 44406] – Style engine: kebab case preset slugs in the editor
* [WordPress/gutenberg#44209 Gutenberg PR 44209] – Fixing padding on the post editor when RootPaddingAwareAlignments setting is enabled
* [WordPress/gutenberg#42950 Gutenberg PR 42950] – Popover: fix limitShift logic by adding iframe offset correctly (and a custom shift limiter)
* [WordPress/gutenberg#44337 Gutenberg PR 44337] – Submenu block href only if url is not empty
* [WordPress/gutenberg#44291 Gutenberg PR 44291] – Add role=application to list view to prevent browse mode triggering in NVDA
* [WordPress/gutenberg#44283 Gutenberg PR 44283] – Navigation block: Fix submenu colors for imported classic menus
* [WordPress/gutenberg#44282 Gutenberg PR 44282] – Fix popover stacking in the customize widgets editor
* [WordPress/gutenberg#44247 Gutenberg PR 44247] – Spacing presets: switch to using numbers instead of t-shirt sizes for labels
* [WordPress/gutenberg#44299 Gutenberg PR 44299] – Backport template creation changes from core
* [WordPress/gutenberg#44294 Gutenberg PR 44294] – [Block Library - Query Loop]: Fix broken preview in specific category template
* [WordPress/gutenberg#44287 Gutenberg PR 44287] – [Block Library]: Rename Comments pagination inner blocks
* [WordPress/gutenberg#44256 Gutenberg PR 44256] – Avoid showing the recursion warning in previews when replacing template parts
* [WordPress/gutenberg#44265 Gutenberg PR 44265] – Blocks: officially deprecated the children and node matchers
* [WordPress/gutenberg#44251 Gutenberg PR 44251] – Global styles: Remove the beta label from global styles header

Props bernhard-reiter, cbravobernal.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54335


git-svn-id: http://core.svn.wordpress.org/trunk@53894 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot pushed a commit to platformsh/wordpress-performance that referenced this pull request Sep 27, 2022
@hellofromtonya
Editor: Update packages for 6.1 Beta 2.
fc9f1d0 
Package updates for bug and regression fixes:

* @wordpress/block-directory: 3.15.3
* @wordpress/block-editor: 10.0.3
* @wordpress/block-library: 7.14.3
* @wordpress/block-serialization-default-parser: 4.17.1
* @wordpress/blocks: 11.16.3
* @wordpress/components: 21.0.3
* @wordpress/compose: 5.15.2
* @wordpress/core-data: 5.0.3
* @wordpress/customize-widgets: 3.14.3
* @wordpress/edit-post: 6.14.3
* @wordpress/edit-site: 4.14.4
* @wordpress/edit-widgets: 4.14.3
* @wordpress/editor: 12.16.3
* @wordpress/format-library: 3.15.3
* @wordpress/interface: 4.16.3
* @wordpress/list-reusable-blocks: 3.15.3
* @wordpress/nux: 5.15.3
* @wordpress/preferences: 2.9.3
* @wordpress/reusable-blocks: 3.15.3
* @wordpress/server-side-render: 3.15.3
* @wordpress/style-engine: 1.0.2
* @wordpress/widgets: 2.15.3

References:
* [WordPress/gutenberg#44233 Gutenberg PR 44233] – Blocks: Fix searching of blocks when description is non-string
* [WordPress/gutenberg#44301 Gutenberg PR 44301] – Block Toolbar: update position when moving blocks
* [WordPress/gutenberg#44334 Gutenberg PR 44334] – Global Styles: Re-add styles that were removed, for classic themes
* [WordPress/gutenberg#44351 Gutenberg PR 44351] – Comments block: Support nested comments settings in the comments blocks
* [WordPress/gutenberg#44448 Gutenberg PR 44448] – Add a correct TS signature for useEntityRecords
* [WordPress/gutenberg#44315 Gutenberg PR 44315] – Pullquote: fix transform to quote crash
* [WordPress/gutenberg#44446 Gutenberg PR 44446] – Fix spacing property generation in flow layout type.
* [WordPress/gutenberg#44408 Gutenberg PR 44408] – Upgrade react-easy-crop to bring in fix for site editor iframe
* [WordPress/gutenberg#44406 Gutenberg PR 44406] – Style engine: kebab case preset slugs in the editor
* [WordPress/gutenberg#44209 Gutenberg PR 44209] – Fixing padding on the post editor when RootPaddingAwareAlignments setting is enabled
* [WordPress/gutenberg#42950 Gutenberg PR 42950] – Popover: fix limitShift logic by adding iframe offset correctly (and a custom shift limiter)
* [WordPress/gutenberg#44337 Gutenberg PR 44337] – Submenu block href only if url is not empty
* [WordPress/gutenberg#44291 Gutenberg PR 44291] – Add role=application to list view to prevent browse mode triggering in NVDA
* [WordPress/gutenberg#44283 Gutenberg PR 44283] – Navigation block: Fix submenu colors for imported classic menus
* [WordPress/gutenberg#44282 Gutenberg PR 44282] – Fix popover stacking in the customize widgets editor
* [WordPress/gutenberg#44247 Gutenberg PR 44247] – Spacing presets: switch to using numbers instead of t-shirt sizes for labels
* [WordPress/gutenberg#44299 Gutenberg PR 44299] – Backport template creation changes from core
* [WordPress/gutenberg#44294 Gutenberg PR 44294] – [Block Library - Query Loop]: Fix broken preview in specific category template
* [WordPress/gutenberg#44287 Gutenberg PR 44287] – [Block Library]: Rename Comments pagination inner blocks
* [WordPress/gutenberg#44256 Gutenberg PR 44256] – Avoid showing the recursion warning in previews when replacing template parts
* [WordPress/gutenberg#44265 Gutenberg PR 44265] – Blocks: officially deprecated the children and node matchers
* [WordPress/gutenberg#44251 Gutenberg PR 44251] – Global styles: Remove the beta label from global styles header

Props bernhard-reiter, cbravobernal.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54335


git-svn-id: https://core.svn.wordpress.org/trunk@53894 1a063a9b-81f0-0310-95a4-ce76da25c4cd
@andrewserong andrewserong added the [Feature] Layout Layout block support, its UI controls, and style output. label Sep 29, 2022
@glendaviesnz glendaviesnz mentioned this pull request Oct 5, 2022
Open
18 tasks
ootwch pushed a commit to ootwch/wordpress-develop that referenced this pull request Nov 4, 2022
@hellofromtonya
Editor: Update packages for 6.1 Beta 2.
5c4071e 
Package updates for bug and regression fixes:

* @wordpress/block-directory: 3.15.3
* @wordpress/block-editor: 10.0.3
* @wordpress/block-library: 7.14.3
* @wordpress/block-serialization-default-parser: 4.17.1
* @wordpress/blocks: 11.16.3
* @wordpress/components: 21.0.3
* @wordpress/compose: 5.15.2
* @wordpress/core-data: 5.0.3
* @wordpress/customize-widgets: 3.14.3
* @wordpress/edit-post: 6.14.3
* @wordpress/edit-site: 4.14.4
* @wordpress/edit-widgets: 4.14.3
* @wordpress/editor: 12.16.3
* @wordpress/format-library: 3.15.3
* @wordpress/interface: 4.16.3
* @wordpress/list-reusable-blocks: 3.15.3
* @wordpress/nux: 5.15.3
* @wordpress/preferences: 2.9.3
* @wordpress/reusable-blocks: 3.15.3
* @wordpress/server-side-render: 3.15.3
* @wordpress/style-engine: 1.0.2
* @wordpress/widgets: 2.15.3

References:
* [WordPress/gutenberg#44233 Gutenberg PR 44233] – Blocks: Fix searching of blocks when description is non-string
* [WordPress/gutenberg#44301 Gutenberg PR 44301] – Block Toolbar: update position when moving blocks
* [WordPress/gutenberg#44334 Gutenberg PR 44334] – Global Styles: Re-add styles that were removed, for classic themes
* [WordPress/gutenberg#44351 Gutenberg PR 44351] – Comments block: Support nested comments settings in the comments blocks
* [WordPress/gutenberg#44448 Gutenberg PR 44448] – Add a correct TS signature for useEntityRecords
* [WordPress/gutenberg#44315 Gutenberg PR 44315] – Pullquote: fix transform to quote crash
* [WordPress/gutenberg#44446 Gutenberg PR 44446] – Fix spacing property generation in flow layout type.
* [WordPress/gutenberg#44408 Gutenberg PR 44408] – Upgrade react-easy-crop to bring in fix for site editor iframe
* [WordPress/gutenberg#44406 Gutenberg PR 44406] – Style engine: kebab case preset slugs in the editor
* [WordPress/gutenberg#44209 Gutenberg PR 44209] – Fixing padding on the post editor when RootPaddingAwareAlignments setting is enabled
* [WordPress/gutenberg#42950 Gutenberg PR 42950] – Popover: fix limitShift logic by adding iframe offset correctly (and a custom shift limiter)
* [WordPress/gutenberg#44337 Gutenberg PR 44337] – Submenu block href only if url is not empty
* [WordPress/gutenberg#44291 Gutenberg PR 44291] – Add role=application to list view to prevent browse mode triggering in NVDA
* [WordPress/gutenberg#44283 Gutenberg PR 44283] – Navigation block: Fix submenu colors for imported classic menus
* [WordPress/gutenberg#44282 Gutenberg PR 44282] – Fix popover stacking in the customize widgets editor
* [WordPress/gutenberg#44247 Gutenberg PR 44247] – Spacing presets: switch to using numbers instead of t-shirt sizes for labels
* [WordPress/gutenberg#44299 Gutenberg PR 44299] – Backport template creation changes from core
* [WordPress/gutenberg#44294 Gutenberg PR 44294] – [Block Library - Query Loop]: Fix broken preview in specific category template
* [WordPress/gutenberg#44287 Gutenberg PR 44287] – [Block Library]: Rename Comments pagination inner blocks
* [WordPress/gutenberg#44256 Gutenberg PR 44256] – Avoid showing the recursion warning in previews when replacing template parts
* [WordPress/gutenberg#44265 Gutenberg PR 44265] – Blocks: officially deprecated the children and node matchers
* [WordPress/gutenberg#44251 Gutenberg PR 44251] – Global styles: Remove the beta label from global styles header

Props bernhard-reiter, cbravobernal.
See #56467.

git-svn-id: https://develop.svn.wordpress.org/trunk@54335 602fd350-edb4-49c9-b593-d223f7449a82
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@andrewserong andrewserong andrewserong approved these changes

@ramonjd ramonjd ramonjd approved these changes

@spacedmonkey spacedmonkey Awaiting requested review from spacedmonkey

@glendaviesnz glendaviesnz Awaiting requested review from glendaviesnz

Assignees

@tellthemachines tellthemachines

Labels
[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Feature] Layout Layout block support, its UI controls, and style output. [Type] Bug An existing feature does not function as intended
Projects
No open projects
WordPress 6.1 Editor Tasks
Status: Done
Milestone
Gutenberg 14.3
Development

Successfully merging this pull request may close these issues.

Spacing step variables not getting generated properly with Block Spacing
4 participants
@tellthemachines @ockham @ramonjd @andrewserong