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

Layout: Fix blockGap output when using a falsy 0 value #43757

Merged
merged 3 commits into from
Sep 1, 2022

Conversation

andrewserong
Copy link
Contributor

What?

This fixes an issue exposed by #43466 where block gap values of 0 applied at the individual block level would not be output in server-rendering due to them using a falsy value.

Why?

Previously, custom values of 0 were being stored as 0px which is a non-falsy string. However, 0 as a string is falsy in PHP so the output was being skipped.

How?

Do a non-null check instead of a truthy check for blockGap before outputting the layout styles.

Testing Instructions

  1. In a post or page, add a Group block with a couple of child blocks, and set block spacing to the 0 preset value.
  2. On the site frontend, check that the 0 spacing is being applied between child elements
  3. Repeat with the Social Icons block

Or, test with the following block markup

Test block markup
<!-- wp:group {"layout":{"type":"constrained"},"style":{"spacing":{"blockGap":"0"}}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>A paragraph</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>A paragraph</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"default"},"style":{"spacing":{"blockGap":"0"}}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>A paragraph</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>A paragraph</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:social-links {"style":{"spacing":{"blockGap":{"top":"0","left":"0"}}}} -->
<ul class="wp-block-social-links"><!-- wp:social-link {"url":"wordpress.org","service":"wordpress"} /-->

<!-- wp:social-link {"url":"wordpress.org","service":"wordpress"} /-->

<!-- wp:social-link {"url":"wordpress.org","service":"wordpress"} /--></ul>
<!-- /wp:social-links -->

Screenshots or screencast

With this PR applied, the output should look like the following:

image

@andrewserong andrewserong added [Type] Bug An existing feature does not function as intended [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi labels Sep 1, 2022
@andrewserong andrewserong self-assigned this Sep 1, 2022
@andrewserong andrewserong added the Backport to Gutenberg Minor Release Pull request that needs to be backported to a Gutenberg minor release label Sep 1, 2022
Copy link
Member

@ramonjd ramonjd left a comment

Choose a reason for hiding this comment

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

Before
Screen Shot 2022-09-01 at 3 58 07 pm

After
Screen Shot 2022-09-01 at 3 58 29 pm

Setting block gap to 0 for social links in global styles
Screen Shot 2022-09-01 at 4 01 51 pm

Axial gap values for social links
Screen Shot 2022-09-01 at 4 00 46 pm
Screen Shot 2022-09-01 at 4 00 22 pm

@andrewserong andrewserong added this to the Gutenberg 14.0 milestone Sep 1, 2022
@andrewserong andrewserong merged commit a12b882 into trunk Sep 1, 2022
@andrewserong andrewserong deleted the fix/allow-zero-values-in-block-gap branch September 1, 2022 07:02
@andrewserong andrewserong removed the Backport to Gutenberg Minor Release Pull request that needs to be backported to a Gutenberg minor release label Sep 1, 2022
@andrewserong
Copy link
Contributor Author

I've just removed the Backport to Gutenberg Minor Release label as the bug that this PR fixes isn't in Gutenberg 14.0 (#43466 will be part of 14.1).

@andrewserong andrewserong added the [Feature] Layout Layout block support, its UI controls, and style output. label Sep 29, 2022
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 [Feature] Layout Layout block support, its UI controls, and style output. [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants