[Resolved] Block Editor Page colours

[M]

Thank you for resolving my issue a few days ago but unfortunately I have found another problem in a the same area. I had raised the problem with Block Editor when using white text on a black background that the block separator remains at the default dark colour. Toby providing some code to address this issue and set the colour to what I wanted. I hadn’t realised that the same problem exists with table borders which default to a dark colour and I can’t see any way of changing them. Can you help please?

Also when researching this problem I came across the following in the Block Editor Handbook:-

Dark backgrounds

If your editor style relies on a dark background, you can add the following to adjust the colour of the UI to work on dark backgrounds:

1 add_theme_support( ‘editor-styles’ );
2 add_theme_support( ‘dark-editor-style’ );

This looks to be a general solution for my problem but I can’t make this work. Are you aware of this as a solution?

[Tom]

Hi there,

Can you link me to a page where you’re using tables at the moment?

The Gutenberg solution to this likely wouldn’t work, as it’s a theme element.

Let me know 🙂

[M]

Hi Tom

Here is a http://martinwatson.com/wordpress/ncccomps/#28thJan2020 to where I use tables.

In this case tables are used for structuring the data for competition results and are their borders aren’t visible to the user but are necessary when entering the table information otherwise it is guesswork. There is a 2 column and 5 row table encompassing “Winning Print” to PI League. I don’t think you will be able to determine very much with user access to this page as the only problem is visibility of the table when editing.

I can frig this for editing by setting a background colour to make the borders visible but ideally I want to make it as simple as possible for other people to help maintain the site.

Note this site is a test location and is not live.

[Tom]

So this is the CSS you want to add normally:

table, th, td {
    border: 1px solid #ccc;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

And this is your updated function from your other topic to include this CSS:

add_action( 'enqueue_block_editor_assets', function() {
    $css = 'body .block-editor-block-list__block hr{background-color: #cccccc;}body .block-editor-block-list__block table, body .block-editor-block-list__block th, body .block-editor-block-list__block td {border: 1px solid #ccc;}';
    wp_add_inline_style( 'generate-block-editor-styles', $css );
}, 100 );

Hope this helps 🙂

[M]

Hi Tom

No that doesn’t seem to work, sorry. The updated function still works on the block separator.

Martin

[Tom]

Can you try the updated function? The block editor can be weird with how specific the CSS has to be.

[M]

Hi Tom

That works, absolutely spot on. Many thanks for your efforts for such a trivial problem. I really appreciate your help.

Many thanks

Martin

[Tom]

No problem! 🙂

[Author]

Posts