Custom Margin/Padding to column block

[AlexChariyska]

Description

#24874 Custom functionality for adding margin and padding spacing in column/s blocks.

How has this been tested?

Screenshots

Types of changes

New Feature, created a hook for custom margin added in SpacingPanelControl.
Adds support for spacing in column/s block json.

How to test:

In order to enable the custom padding functionality in lib/experimental-default-theme.json you have to set to true the customPadding key:
"spacing": { "customPadding": true }

Currently, the custom margin and padding functionality are added only to the columns/column blocks.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[youknowriad]

This is a very nice PR as it's the first one to potentially introduce the margin support flag that can be expanded to several blocks later.

I'd love a lot of eyes on this one: @jasmussen @ItsJonQ @nosolosw

[jasmussen]

Thank you for the PR, exciting!

I'm afraid I can't get the custom spacing to work, honeslty anywhere, not on the Cover block either, and I'm opting in using add_theme_support('custom-spacing'); — any idea what I'm missing, Riad?

This is what I see in the mean time, and I suppose it can serve as a "before" screenshot:

[ItsJonQ]

@jasmussen I believe you have to example it via an experimental-theme.json file :). At least, that's the setup I have.

@AlexChariyska Thank you for attempting this!
I gave a spin, and the controls appear 👍 . There are somethings worth noting:

✨ Visualizers

The blue visualizers (that appear for padding) aren't working for margin. This is due to how they (the visualizers) are styled. I think we'll need to make some adjustments so that we can see them for margin adjustments.

📏 margin: auto

I attempted to add some margin on a Cover block. This broke the alignment of things. Initially, I wasn't sure why... After poking around Chrome's inspector tools, I realized it was because the horizontal margin was set to 0, which normally would be considered neutral/default. However, it looks like Cover (and perhaps others) are relying on auto margin for left/right centering.

The BoxControl UI currently doesn't accommodate values other than number * unit values (e.g. 10%).

We'll need to look into updating the design + logic to support this.

[AlexChariyska]

So I updated the request and added visualizers for the margin props as well.

Example margin:

And padding:

The changes include refactoring of the BoxControlVisualizer to accept object of spacing values (margin & padding) in order to decide which borders to visualize for the block.

About the second part to accept more custom values (ex. margin: auto) I think something like the custom relative units can be done as a logic (25825).
For example we can have a dropdown value for auto, when selected, we can disable the input field, until another unit is selected from the dropdown.

[ItsJonQ]

Adding support for the auto in the dropdown will be tricky.
I've been experimenting with something similar.

🤔 Trickiness

At the moment, the UnitControl parses units by splitting a string into number + unit (unit), like:

10px => [10, 'px']

This does not allow for string values like auto.

It also does not do CSS style validation. I've realized that this is incredibly important - especially to have it built into the control.

For example, a valid value for margin may be auto, or 0 (unitless).

(Not taking into consideration values like calc())

Thankfully, I was able to come up with ideas on how we may tackle this!

🪓 Patch Current UnitControl

We could adjust the UnitControl unit to allow for auto for this feature.
An update that taps into the unit parsing "step", adding a condition for auto somehow.
(I can help with this if needed 🙏 )

Long term, we need a more robust solution 👍

[AlexChariyska]

@ItsJonQ Great idea 👍, it will be fantastic to have more control in the unit and better support for more custom values.
In the meantime, as suggested, with @kirilzh we implemented a patch for the UnitControl to accept an auto value.

[ItsJonQ]

@AlexChariyska Haii! Wow! Thanks for making the update to add auto support.

I took it for a spin, and it looks like adding values via the (input) controls are working, for both Padding and Margin (including auto values).

I'm not able to see the visualizers though (for either one).
I'll dig a little deeper this afternoon to see if I can figure it out 🤔

Just leaving this update now, in case it helps with debugging/development :)

---

Update

I'm not too sure what may be causing this. The values don't appear to be applied correctly on the first attempt.
The values gets applied and the visualizer kicks in after secondary attempts.

I recorded a video screencast detailing this:

https://d.pr/v/hN7FZU

In the video, I've added a new Cover block. It has no values for padding or margin to start. So far so good.
I press Up arrow to start incrementing Padding.
Nothing happens.

I click away.
I click back, and manually enter 20px.

After that, then the Padding values seem to work.

Same thing happens for margin

🤔

[paaljoachim]

Here is a similar PR for the Group block.
#16730

It would be nice to move padding and margin out of the experimental status making it available for a larger testing base. Making it available in the Gutenberg plugin.
(At the moment I do not know how to test this PR. Even with the above guidance I still do not get it.)

[paaljoachim]

How should the default padding between the column blocks be handled?
There is also a margin on the left side of the 1st column.

Should alignment Full Width go all the way out to the edge of the browser?

Testing with the theme Twenty Twenty and the Gutenberg plugin version 9.3.

[kirilzh]

@ItsJonQ Hey, I'm not sure what might be causing the problem. I'm following the steps you described and I can't reproduce the problem. Can you check again if you are up to date with AlexChariyska:add/24874-add-margin-and-padding-to-columns

@paaljoachim I think it's ok to leave it as is because it provides a point of reference. You can return to the default state by resetting the values. The blocks will also move to the edges of the view if you unlink the values and change each individually.

[ItsJonQ]

@kirilzh Haiii! Apologies for the delayed response! Happy New Year :). I hope you're doing well.

I just pulled the latest from this PR. I'm still having issues with the controls.
I went through the flow that was demonstrated in the GIF

Here's a screen recording:
https://d.pr/v/nXXm2D

[ItsJonQ]

@AlexChariyska Haii! Your latest update seemed to do the trick for me. The margin/padding values are being applied as expected now 🎉

[stokesman]

Great work here @AlexChariyska and @kirilzh. I made #28451 based off of this. One thing I came across is that trying to zero the values doesn't seem to work.

spacing-margin-zero.mp4

I am in favor of this feature. I think I'd like it even more if it supported negative values and that would enable it to support use cases such as #24504. Though it might be a trick to figure out what to do with the Visualizer for such cases.

I do think this has some potential as a pitfall for some users. It probably requires an understanding of margin collapsing and auto margins in order for some of the behavior to be expected.

[paaljoachim]

If I remember correctly the Spacing panel is being renamed to Dimensions. @ItsJonQ
Should we also add a Gutter setting into the dimensions panel as well?

[Mamaduka]

The spacing support (currently only padding) was added to the Column block in #31778.