Fix: Cannot access separator block settings by clicking

[emfluenceindia]

Description

Added a padding to .wp-block-separator class to fix #12080.

How has this been tested?

Tested with in twentyseventeen and twentynineteen themes.

Screenshots

Screencast: https://drive.google.com/file/d/1V8hMsHCJKANl6T3zVOoyNsq6EEor0Kuw/view

Types of changes

New attribute in added .wp-block-separator class

Separator block cannot be selected by clicking on it

N/A

N/A

Checklist:

• [ x ] My code is tested.
• [ x ] My code follows the WordPress code style.
• [ x ] My code follows the accessibility standards.
• [ x ] My code has proper inline documentation.
• [ x ] I've included developer documentation if appropriate.

[jorgefilipecosta]

Hi @emfluenceindia thank you a lot for your contribution! From the code point of view, I don't find any problem with this changes. There are some UX changes so I think it would be perfect if @jasmussen and @karmatosed can have a look into this PR.

[jorgefilipecosta]

Changing the cursor to a hand may make it look like we can drag & drop things around. While when inside a block that's not the case. Not sure if it is ok or we have a better alternative. cc: @jasmussen in case you have some inputs.

[jasmussen]

Yes, I can understand the thought behind this, but the block should not have separate treatment from any other block.

I think the solution, correctly, is to make the clickable hit area bigger. The fact that we have hover outlines should help.

[emfluenceindia]

@jasmussen here is another possible solution. I tested this for both twentyseventeen and twentynineteen. Both show the same result. A few notes in support of adding !important

border-bottom: 2px solid #8f98a1;, for testing I used a different color which never got recognized without adding !important

border-bottom: 2px solid #8f98a1; I tried increasing border thickness to 4px but it never worked without !important

It looks to me that some global hr styling rules are doing the trick. Once I added !important, things started working.

I tried the following modification and it seems to work ok now. Please see the screenshots. @jorgefilipecosta aligning vertically centered seems to be working now as well.

.wp-block-separator {
  border: none;
  border-bottom: 2px solid #8f98a1 !important;
  padding: 15px;
  background: none !important; /* had to add this to get rid of the thick gray patch in twenntyseventeen  due to the padding. */
  position: relative;
  bottom: 10px;
  margin: 1.65em auto; }
  .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
    max-width: 100px; }

Screenshot of twentyseventeen

Screenshot of twentynineteen

[jasmussen]

Thank you for the response. It helped me understand why the border is not centered. As you note, it's because it's border-bottom.

I tried a few hacks to center it perfectly and make it more clickable, but found no good solutions. The thing is, a lot of themes built for Gutenberg are now styling the separator assuming it has a border-bottom, so we can't easily change that to, for example, a background color and a height instead.

For that reason, I don't think we should make a patch for just this block.

Instead, we should make a more generic improvement for all blocks. Watch this GIF:

Note how the hover outline appears correctly. But in the space between the content and the blue hover outline, you cannot click to select the block. We should make it so you can.

CC: @aduth, I believe you've talked about this in the past too, can you share any insights into how we might go about this?

[emfluenceindia]

Glad that my observation could help! :) And yes, I understand the limitation. As you said it might be a good idea to create a patch for this block in particular as it might make other themes to suffer!

[jorgefilipecosta]

On twenty nineteen theme the line is not vertically centered:

Would it be possible to vertically center it?

[jasmussen]

Depending how this is centered vertically — it might be a 2019 specific issue not sure, haven't had time to test yet — we should use $grid-unit instead of 10px.

[gziolo]

@jasmussen I noticed you are working on a very similar fix in #13695. Does it duplicate the work done here?

[jasmussen]

@gziolo Yes, correct, it fixes the same issue, and it is inspired by this approach but it addresses the review points from this PR. I forgot about this PR, I thought it might have been closed.

If we land the other PR, let's be sure to give props to emfluenceindia here! Thanks for the ping.

[gziolo]

@emfluenceindia do you plan to finish this PR or is it okey to land the other one opened by @jasmussen?

[emfluenceindia]

@emfluenceindia do you plan to finish this PR or is it okey to land the other one opened by @jasmussen?

I am extremely sorry for my long absence. Actually got overloaded with a lot of things. It is absolutely fine and I won't mind at all if @jasmussen has the fix. :)

[gziolo]

I am extremely sorry for my long absence. Actually got overloaded with a lot of things. It is absolutely fine and I won't mind at all if @jasmussen has the fix. :)

Thank you for your contribution in the first place and for the quick response. Let's do it to make sure your work helps to improve the experience with the other PR. I'm looking forward to your future contributions when you have more time :)

[emfluenceindia]

I am extremely sorry for my long absence. Actually got overloaded with a lot of things. It is absolutely fine and I won't mind at all if @jasmussen has the fix. :)

Thank you for your contribution in the first place and for the quick response. Let's do it to make sure your work helps to improve the experience with the other PR. I'm looking forward to your future contributions when you have more time :)

Thank you for your nice and encouraging words! I would love to contribute more :)