How to create a 2 line 2 colour separator?

Hi Alan,

Any chance you can link us to the site in question and point us to where we should be looking at?

You can use the private information field.
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know :)

Hi,
I have now created a new website that is accessible ( previously I just had a local site ).

It has the same issues with both my methods attempting to create a two line two colour separator. You can see them on the imaginatively named Test1 and Test2 pages.

I've created a login link for you, hopefully it works without needing your email address.

BTW the same site can be used for the related topic ##2256120

Thx
Alan

I'm looking at the test2 page where you are using GB container to add the border.

To answer your questions:

1.The CSS to set the border colours does not seem to work at all. Why?

You can't target the container with .wp-block-separator.my-custom-separator as it's not a wp separator block.
Actually you don't need CSS for that, you can set border color within GB's container settings.

On the front end the border and overall container size all look good. Why do they look different in the editor?

Becuase there's no content in the container, so the container has no height value. You can set a min height for the container block.

To have 2 different colors borders, the easist way is to create 2 containers, 1 with red colored top broader, 1 with blue colored top border.

Thanks. I've used two containers now, as you suggested. Works perfectly.

CSS border colours. Yes I corrected the block name but it still doesn't work. I assume this is because you can't set different colours for a single blocks borders?

BTW what is the best way to find the name of the block to use in the CSS? It would be really helpful if it was found in the Block settings itself. The only place I've found it was by inspecting the output in the browser. But this is a tedious process as you have to publish first. Must be a better way surely?

Container display in editor and front end. Yes I know there was no content, just top and bottom borders. I had already set the min height for the container and would have expected the editor to show that. Seems not.

Cheers
Alan

Hi there,

CSS border colours. Yes I corrected the block name but it still doesn’t work. I assume this is because you can’t set different colours for a single blocks borders?

Yes, at this time there is only a single border color for the Container Block.

Regarding Min Height - the container has its own min-height in the editor.

If you want you can try this method to create your own Block Style variant.
Add this PHP Snippet to your site:

if ( function_exists( 'register_block_style' ) ) {
    function block_styles_register_block_styles() {

        /**
         * Register block style
         */
        register_block_style(
            'core/separator',
            array(
                'name'         => 'custom-separator',
                'label'        => 'Custom Separator',
            )
        );
    }

    add_action( 'init', 'block_styles_register_block_styles' );
}

This doc explains adding PHP: https://docs.generatepress.com/article/adding-php/

With that added, in the editor, when you select a Separator Block in the Sidebar Styles tab you should see an extra option with the Label: Custom Separator

If you select that option the Block will be output with a CSS Class of: is-style-custom-separator

You can then use this CSS to style that:

.wp-block-separator.is-style-custom-separator {
    /* Your styles here */
}

If you're adding that CSS to your Customizer > Additional CSS then you can add this PHP Snippet to your site:

add_filter( 'block_editor_settings_all', function( $editor_settings ) {
    $css = wp_get_custom_css_post()->post_content;
    $editor_settings['styles'][] = array( 'css' => $css );

    return $editor_settings;
} );

And this will load the customizer styles in the editor.

Thanks again.

Regarding Min Height – the container has its own min-height in the editor.
Does this mean that the editor sets a min height to display regardless of the actual min height setting? ( Which is fine on the front end ). Is there any way to control this so that it matches the actual setting?

Thanks for the snippets. But I try and avoid adding any code if at all possible as it makes handing over and supporting the design too difficult. I'm happy using a Reusable block consisting of the 2 containers each with a single border, size and colour. Simple and works for me.

Cheers
Alan

Regarding Min Height – the container has its own min-height in the editor.

The min height thats set is required to make it accessible, without it the click / drop zone for adding blocks would be too small.

Ok I understand, thanks again.
Cheers
Alan

You're welcome