search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.32k stars 4.12k forks source link

Buttons block: block spacing value does not apply to both vertical and horizontal alignment #64948

Closed Nyiriland closed 3 days ago

Nyiriland commented 2 weeks ago

Problem

The Buttons block allows you to change the orientation from Horizontal (default) to Vertical, but there there is only a single Block Spacing setting (not separate options for vertical/horizontal). When a block spacing value is set, it only applies to the column-gap.

This is a screenshot from a Buttons block in a project I'm working on. The block is set to vertical orientation, with the Block-spacing value set to 1rem. You can see from the CSS output below that the Block-spacing is only applying to the column-gap on the front-end, and the the row-gap value is different (the value seems to be coming from core).

image

I'll note that the block-spacing gap does seem to apply properly to both orientations (via a single gap attribute) in the editor view. It's only when viewing the site on the front-end that there's separate column-gap and row-gap values.

What's expected

If there is only one Block Spacing option, it should affect both row & column gap, in both front-end and editor views.

Solution

A better solution might be to add separate vertical & horizontal Block Spacing options.

hbhalodia commented 1 week ago

Hi @Nyiriland, I have raised the PR for the same to fix the issue - https://github.com/WordPress/gutenberg/pull/64971,

Thank You,

AKSHAT2802 commented 1 week ago

What's expected

If there is only one Block Spacing option, it should affect both row & column gap , in both front-end and editor views.

Hii @Nyiriland I checked that currently the gap option is affecting both row and column spacing for both orientations. PFA video is attached for demonstration ( for horizontal orientation )

https://github.com/user-attachments/assets/86ea2f6c-a26f-466c-a038-fb69f648e7ac

However, PR created by @hbhalodia can be considered as enhancement if we want separate control for Vertical and Horizontal spacings.

Let me know if I am missing something.

jasmussen commented 1 week ago

I understood the issue to be that if you just set the all-axial gap, this works in the editor, but not the frontend. However I can confirm upon closer inspection what @AKSHAT2802 notes, that this does appear to work. I'm using Twenty Twenty-Five. I wonder if this was a recent fix? Or is it a local issue you're seeing, @Nyiriland?

Regardless, I'd tend to agree, the axial configuration could work well enough here as an enhancement.

Nyiriland commented 1 week ago

Or is it a local issue you're seeing, @Nyiriland?

@jasmussen Hmm it appears it might be due to the theme I'm starting with, which I assumed would not be the case since it was outputting separate row/column values. And of course, I didn't double check in TT4 🤦‍♀️. So apologies for the red herring!

That being said, separate vertical/horizontal is a valid upgrade; although, if you want to keep them uniform, having to change 2 values instead of 1 might be an added annoyance.