Layout (padding): invalid CSS when "Link Sides" inactive and fields left empty

[chthonic-ds]

Description

The Layout panel includes support for user-defined padding. Users can choose to enter a single value for all sides of a block or unique values per side. This choice is offered via a Link Sides toggle button.

When Link Sides is inactive and values are not entered for one or more sides, a property without a value is sometimes included in the inline style. When this happens the result looks like this:

element.style {
    padding-top: 2rem;
    padding-right: rem;
    padding-bottom: 2rem;
    padding-left: rem;
}

Step-by-step reproduction instructions

1. Add a Group block.
2. Block settings > Layout > Spacing > Padding: enter a value. Note the default unit is px.
3. Save and check the front-end to see padding properties are correctly set for each side.
4. Return to the editor and click reset to clear the Padding field.
5. Change the unit to rem (this issue sometimes occurs without doing this but this step seems to ensure a consistent error).
6. Set the "Link Sides" toggle to inactive to reveal fields for each side.
7. Enter a value for the top and bottom of the element (first and third fields).
8. Save and check the front-end to see padding properties are incorrectly set for all sides. For a side where no value has been entered, the corresponding property has a blank value.

Expected behaviour

If a field is left empty the corresponding property should be omitted from the inline style.

Actual behaviour

The current output is invalid CSS: a property is declared without a value.

Screenshots or screen recording (optional)

WordPress information

• WordPress version: 5.8-RC2
• Gutenberg version: 11.0.0
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? TT1 Blocks

Device information

• Device: Desktop
• Operating system: Windows 10
• Browser: Chrome 91.0.4472.124

[vaish567]

Howdy! @chthonic-ds Could you assign me to complete this bug! I would like to contribute :)

[chthonic-ds]

@vaish567 sorry, I have nothing to do with this project.

[paaljoachim]

Hi @vaish567

I went ahead and assigned this issue to you.
Thanks for wanting to work on it!

I will also let @aaronrobertshaw know about this issue.

[aaronrobertshaw]

A PR addressing this issue has been created and should not be too far off landing. #33444