• Hey guys, apologies if this is obvious; I’ve still got my block theme training wheels on. When inserting a default or Wide Line Separator block into a page, it’s being loaded twice. Styled by WP Core and again by core-separator.css Dots and Dotted styles are no problem.
    What am I missing?
    Screenshot Link

    Also, Thin is disabled in core-separator.css

    .is-style-separator-thin {
    border: none !important;
    }

    Why would the Thin option still be displayed in the block styles selector UI if it’s not available?

    .editor-styles-wrapper .wp-block-separator {
    color: var(--wp--preset--color--main);
    font-size: var(--wp--preset--font-size--large);
    }

    <style>
    .editor-styles-wrapper .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto !important;
    margin-right: auto !important;
    }
    .wp-block-separator:not(.is-style-dots), .wp-block-separator.has-background:not(.is-style-dots) {
    border-bottom: 1px solid currentColor;
    height: 1px;
    }
    .block-editor-block-list__block[data-type="core/separator"] {
    padding-bottom: .1px;
    padding-top: .1px;
    }
    .block-editor-block-list__layout .block-editor-block-list__block {
    overflow-wrap: break-word;
    pointer-events: auto;
    position: relative;
    -webkit-user-select: text;
    user-select: text;
    }
    <style>
    .editor-styles-wrapper *, .editor-styles-wrapper *::before, .editor-styles-wrapper *::after {
    box-sizing: inherit;
    }
    <style>
    .editor-styles-wrapper :where(body .is-layout-constrained) > * {
    margin-block-start: var(--wp--preset--spacing--medium);
    margin-block-end: 0;
    }
    .wp-block-separator {
    opacity: 1;
    }
    .wp-block-separator {
    border: none;
    border-top: 2px solid;
Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author Mike McAlister

    (@mmcalister)

    Hi there,

    It looks like that might be some outdated or customized CSS. The current CSS for the separator is this:

    .is-style-separator-thin {
    border-top: 1px !important;
    }

    If you update your theme, you should see that CSS updated and the border should be fixed.

    Thread Starter kracked888

    (@kracked888)

    Cheers Mike, that resolves the ‘Thin’ variation.

    What about the double <hr> when either the ‘Default’ or “Wide Line’ variation is selected? If you take a look at the original screenshot and zoom in you can clearly see the two <hr> elements stacked on top of each other.

    Actually here’s a new screenshot where I’ve changed the color and added some padding to the WP core separator block so it’s easier to see.

    If I switch to the TT4 theme the issue is no longer there…

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.