Cannot select separator block

[xy0]

I'm creating this because I believe this isn't theme territory. You can click on different types of blocks and apply "Additional CSS Classes". Prior to the last update, this worked on Separator blocks. Now, clicking on the Separator block does not change the right-hand details panel at all.

Current Firefox, win10

[xy0]

Update

I am able to select the Separator options by hovering over the separator then clicking on the drag-able handle that appears to the left of the separator. However, the classes I put into the Advanced -> Additional CSS classes do not appear to be added to the element.

[designsimply]

Thanks for the report and the update! It sounds like there are two separate issues and I can confirm the first one but not the second:

1. Cannot access separator block settings (toolbar & sidebar) by clicking on it.
2. Cannot apply custom classes to separator block via the "Additional CSS Class" in the "Advanced" panel in the block settings sidebar.

I tested with WordPress 4.9.8 and Gutenberg 4.5.1 using Firefox 63.0.1 on macOS 10.13.6 and confirmed the first bug that I couldn't reach the block settings by clicking with the mouse but I was able to apply and save custom classes in the "Additional CSS Class" field. I did my test with WordPress 4.9.8 and Gutenberg 4.5.1 using Firefox 63.0.1 on macOS 10.13.6 and Firefox 63 on Windows 10.

Video: 2min
^{Seen at https://tan-otter.jurassic.ninja/wp-admin/post.php?post=72&action=edit running WordPress 4.9.8 and Gutenberg 4.5.1 using Firefox 63 Windows 10.}

@xy0 can you have a look at the video and let me know if my testing steps match with what you did? Did you save the post after adding an additional css class or notice whether autosave happened after you did that? Can you also make a note of your plugin version or your WP version if you're using one of the WP 5.0 beta versions?

Temporary workaround for accessing the block settings: tap into an adjacent block and press the up or down arrow keys to navigate to and select the separator block.

Note: not being able to click on a block to access block settings also came up for video blocks in #12080.

[mcsf]

2. Cannot apply custom classes to separator block via the "Additional CSS Class" in the "Advanced" panel in the block settings sidebar.

If this gets confirmed, it should be opened in a separate issue.

For 1., i.e. not being able to click on the separator, I'm putting this in 5.0.x for investigation.

[designsimply]

Removed the [Status] Needs More Info label and would like to ask for a separate issue to be filed if the problem where you could not save and "Additional CSS Class" in the "Advanced" panel in the block settings sidebar comes up again.

Re-tested with WordPress 4.9.8 and Gutenberg 4.6.1 master @ 874321773 and confirmed that I cannot click on a separator block to access it's setting after it is added and focus is changed to elsewhere.

[designsimply]

Related: #11885, #12577

[troe]

The same problem, updated on WordPress 5.0, the separator stopped working, I can get to the separator settings only through "Navigation in blocks", in general, the separator settings work.

I am able to select the Separator options by hovering over the separator then clicking on the drag-able handle that appears to the left of the separator

This method also works.

[xy0]

@designsimply Your video perfectly describes the behavior that I see as well. The 2nd issue of not being able to apply classes, this is solved by using designsimply's workaround or by clicking on the scroll handle (on the right-side of the separator). Therefore no new issue needs to be created as it is derivative of the primary issue. I guess I was mistaken when not seeing them update.

[emfluenceindia]

Can this be a possible solution? (wp-includes/css/dist/block-library/theme.css)

.wp-block-separator {
  ...
  padding: 10px;
}

/* Allows users to understand the clickable area (height) since it is small */
.wp-block-separator:hover {
    cursor: pointer;
}

This allows me to click and select the <hr /> block.

Here is a screencast
https://drive.google.com/file/d/1V8hMsHCJKANl6T3zVOoyNsq6EEor0Kuw/view

[sulli-a]

Hello,

It's better to use rem unit like others styles in Gutenberg, I propose :

.wp-block-separator { ... padding: 0.65rem 0; }

[xy0]

So that the extra padding is only visible in the editor I have

.block-editor .wp-block-separator { 
  padding: 0.65rem 0;
  background: #f3f3f3;
}

[swissspidy]

Another report for this: https://core.trac.wordpress.org/ticket/46008

[bobbingwide]

You might want to take this into account too. I was working on separator styling and duplicated the separator block. Having mistakenly moved the first block above another ( pullquote in this instance ) I got the situation where there were two active block movement blocks. And the up arrow for the lower block was above the down arrow for the Separator block.

[afercia]

Worth noting that not being able to select a separator block makes also very difficult to remove the block. Given the block is not selected, pressing Backspace doesn't do anything in most of the browsers. With Firefox, it triggers the default action: go back one page, which is completely unexpected.

[afercia]

I'd suggest to change this issue title to: "Cannot select separator block".

[gziolo]

Closed with #14854.