Archived topic
Gutenberg Separator Block double line styling
6 replies · Started by Matthew on August 2, 2021
The latest WordPress core update changed my Gutenberg Separator Block style to a double line.
What's the best way to return this to a single line. I'd prefer not to add a style in the 'Advanced' additional CSS class each time, as I always just add a separator block and then it's done.
There's not many options in the editor; Default, Wide Line, and Dots, so I can't seen a Single Line option for example.
thanks,
Hi Matthew,
Custom CSS is the way to go about this. This is so we can override the default CSS that turned the separator block into 2 border lines from the WP 5.8 update.
Can you link us to a sample page you're working on w/ the separator block? To check the selectors incase you want the writeup to be specific to something. Let us know. :D
Sure thing, just placed the front and admin link in the private field
thanks,
Try adding this CSS:
hr.wp-block-separator {
border-top: unset;
}A wise man once said:
"Elvin is 'The King'"
Just realized an annoying feature of this is the double line is kept in the admin post; the old separators have been converted to a single line now (for the front end and admin), however any new separator block I add has a double line (admin only).
Just realized an annoying feature of this is the double line is kept in the admin post; the old separators have been converted to a single line now (for the front end and admin), however any new separator block I add has a double line (admin only).
Ah yeah that's a bit more tedious to deal with because you'll also have to apply the same CSS styling by enqueuing your own editor-styles.css to override the editor-styles added by the 5.8 update.
Or try David's snippet here - https://generatepress.com/forums/topic/background-color-issues-in-wp-editor/#post-1879239
and replace $css value with the CSS I've provided. :D
