Spacer Block: cannot adjust height to less than 20px

[designsimply]

Steps to reproduce:

1. Add a spacer block.
2. In the block settings, set the height in pixels to something less than 20.

Result: I am allowed to make a change to "Height in pixels" that is less than 20 and save, however, the change is not reflected on the block and refreshing the page shows that the setting reverted back to the 20px minimum. There is a very small warning that appears on mouseover, but it's very difficult to spot (especially when navigating via the keyboard). Would it be possible to make that warning more explicit, possibly red and inline?

(Out of curiosity) why is the height of the spacer block limited to 20px or larger?

^{Tested with Firefox 70.0.1 on macOS 10.14.6 on a site running WordPress 5.3 with no plugins.}

[talldan]

That does seem to be hardcoded as the minimum value. Not sure why, couldn't see anything mentioned on the original PR about it - #6121

I think the warning is a browser thing when a number input has minimum set. Chrome doesn't show it, but Firefox does.

I'll add Needs Design Feedback—should the spacer block have a minimum? Alternatively, could it have some kind of consistent warning about the minimum? Or maybe the input could behave differently to not allow values less than 20.

[iamthomasbishop]

We were discussing this on the native mobile side recently, so I thought I might drop some thoughts in this ticket. In my opinion (esp from the mobile side) a minimum is useful. If you were to add a spacer shorter than 20px, selecting the block would become next to impossible, especially on touch screens.

On a touch screen, a 20px tap target is already quite small (the recommended tap target is between 44-48, although some components such as Edit/Selection Menus are smaller — between 28-32). If you look at the Separator block, for example, it can be nearly impossible to select, as it is a small target and often conflicts with the sibling inserter on hover.

With that said, I think the one use case that I've heard (which makes a lot of sense) is using spacers as a workaround for block-level margins/padding. Personally I'd prefer to see margin/padding added to blocks as a whole rather than rely on a workaround, but I'm guessing that's another project in itself. 🤷‍♂️

I'd love to hear other use cases and maybe there's some sort of sorcery we can do to remove the minimum while maintaining an adequate tap target — I'm all ears! And of course, I would love to hear what other designers that are closer to the context than I am. 😄

[filipecsweb]

I wonder why the minimum height is 20px and not 19px or 26px. lol

[mattmilburn]

I can understand the 20px minimum height in the editor for the purpose of making it a better touch target. But when it comes to creating content, the minimum height is telling the editor they are not allowed to use a spacer that is below 20px, which feels arbitrary.

So far, all of my Gutenberg clients have requested to have this fixed.

My solution is to use block hooks to include an additional attribute called heightOverride and I put it in a new PanelBody to let the user provide a separate height value to override the normal one. Then, using the blocks.getSaveContent.extraProps filter, I decide whether or not to use that value instead of the one that is going to be bound to minimum 20px. It's not what I expected or wanted but it's good enough to make some people happy.

Here is the gist to demonstrate the code: https://gist.github.com/mattmilburn/3f813bde1d5f0250acdd5be19228ae75

[Sven74Muc]

Just wondering why this is, after 4 month, still not fixed. Think this realy needs not much time and proofs to change this.

[winniewms]

I would love to see a fix for this to. The spacer would be a great way to deal with stray space in wrapping text around images to get things to align. But 20 px is too much for this.

[jordan-webdev]

How about give the ability to reduce the spacer to below 20px on the front end, but still maintain a minimum of 20px height on the back end for easier tapping?

[Sven74Muc]

Very good question... but not new. The result: No changes. Other plugin developer develop quicker and better add-on blocks or entire page builder. So why trusting any more in Gutenberg? That is wasting time.... I spend my time better in writing content on my blog or implement new features than wasting it in stupid discussions here. It's realy a shame what's going on with Gutenberg. Gutenberg started on a very bad level many month ago. The level right now is maybe a level I think it should have been at the start. The progress of Gutenberg is very slow and poor.

[talldan]

How about give the ability to reduce the spacer to below 20px on the front end, but still maintain a minimum of 20px height on the back end for easier tapping?

I think the issue here would be that it'd make the editor less representative of how the content actually looks. A user wouldn't be able to actively adjust the spacing reliably in the editor, they'd probably have to refer to the preview. One of the goals is to try to make the editor more WYSIWYG.

There is a separate proposal that might help here, which is to add padding controls to the group block - #14747

I think the goal would be to make it work like the Cover block's padding (#21492), which is only available in some themes.

[jordan-webdev]

Yes, it would. If I may share my opinion, though, I don't think representing the front end is necessarily what people want. People have told me they have an easier time when I use Advanced Custom Fields, which don't represent the front end, vs Gutenberg, which does. This is just my experience, though.

[Sven74Muc]

a) As long as Gutenberg is using another stylesheet than the live site, gutenberg isn't a WYSIWIG editor at all
b) 100% WYSIWIG isn't possible at all, just 90% or so... because there will allwys be control elements
c) Right now I convert the spacer to html to adjust to less than 20px... this looks much more bad and takes more space than the original spacer block
d) What we need is padding and margin (top, right, button, left) to be defined for all Gutenberg blocks. With this we don't need the spacer any more

Margin and padding is what other pagebuilder like Elementor offer for all blocks. Don't understand why this wasn't implemented in Gutenberg from it's beginning!!!

As I told... Gutenberg is a playground, not a serious editor. Wordpress should buy a page builder and implement it ino the wordpress core. This would make much more sense tahn talking here about all this bullshit like "can we have a spacer less than 20px" .
I'm a Wordpress user and I want to focus on my page content, on writing blocks... NOT on dealing with layout issues.

Dear Gutenberg developer: WAKE UP!!! ...and don't waste the time of the Wordpress user!!!

Whould be interesting how often Gutenberg is used compared with other page builder in %. This stat in general and in professional environments / websites.

[Sven74Muc]

Is there a timeline to get it done?

[mapk]

@Sven74Muc you can test a PR here: #24342. The PR needs further testing.

[Sven74Muc]

5px is better than 20 px... but as long as all other blocks are missing padding & margin, why not setting the spacer to a min height of 1px?

[mcsf]

5px is better than 20 px... but as ong as all other blocks are missing padding & margin, why not setting the spacer to a min height of 1px?

As stated previously, there are usability issues to address, without which a 1px value is problematic for users. This has to be acknowledged and solved beforehand, not obstinately dismissed. Previously:

• Trac ticket
• Core Editor meeting of April 15

[davidfeldbaum]

How is this still not fixed @iamthomasbishop? This spacer minimum removes so much flexibility for page building. Our clients have pixel perfect comps. This minimum makes the platform rigid and unusable at times

[Sven74Muc]

As stated previously, there are usability issues to address, without which a 1px value is problematic for users. This has to be acknowledged and solved beforehand, not obstinately dismissed. Previously:

The usability issues are just in the mind of the developer here. Other Pagebuilder are showing the 1px is possible!

[rmykolas]

Could this set minimum height of 20px be the reason why I can't type in the value with the keyboard?

Here's a quick recording of me trying to enter random numbers like 33, 44, 88, etc: https://cln.sh/ZHtHGk

[aristath]

Could this set minimum height of 20px be the reason why I can't type in the value with the keyboard?

That is similar - but not quite the same. See #24460

[rmykolas]

Ah, I see, thanks @aristath !