[Resolved] Gutenberg outline button – border color not applying

[Whelan]

I’m using standard Gutenberg buttons with outline style and NO background. I set the colour in the editor but it’s being overridden by wp-includes/css/dist/block-library/styles.css.

I think it’s happening because I have not specified a background colour…. I don’t want a background colour and, for this site, I don’t need to use GP Blocks.

This is relevant to GP because I think the problem started when I specified the button and link colours using the GP Premium Colour Module. It’s odd that even though there’s inline css and colour module generated css… both are overridden. I read somewhere it’s got something to do with this Gutenberg rule:

a.wp-block-button__link:not(.has-background):hover

Any explanation or advice would be most appreciated.

As a workaround, I can override it using the additional css, but I want a WYSIWYG experience for the end user. For now I’ve commented out my workarounds so that you can have a look.

[Tom]

Hi there,

It looks like Gutenberg is enqueuing their style.css file later than the GP CSS.

They’re setting a text color and a transparent background color, which is strange. Is there a reason you want to use their built-in buttons vs another solution? You could even consider using a regular core button but giving it a class to make it outline.

[Whelan]

Hi Tom, yes that seems the problem – I’m not sure what I’ve done to mess with the cascading order. At the moment, the GP settings are: css is not combined (yet). Dynamic css is generated externally.

In troubleshooting mode I have this error: “Uncaught Error: Call to undefined function wp_is_auto_update_enabled_for_type() … htdocs/wp-admin/includes/theme.php:752”

The error does not appear to be related to GP, but I don’t know if it could cause the css files to load in the wrong order. If you think it is related, please let me know and ignore the rest of this message.

My broad aim is to ensure I set up GP Premium to work well with core Gutenberg on all my sites – only using alternative button plugins etc. when absolutely necessary.

On this particular site my client needs Jetpack forms and Woocommerce, so I want matching buttons that the client can insert as needed… core editor buttons are also an Automattic “product” so that’s my preference.

Ideally, I want subtle outline buttons which default to using the same colour and border as the text (“border: currentcolor”) and have no background colour, so they blend in, irrespective of the page background.

[Tom]

From what I can see, the GP stylesheets are indeed loading after the core Gutenberg stylesheet.

So just to confirm, you want:

1. The outline style to have no background color (obviously).
2. The outline style to still use your GP button text color for the text and border?

[Whelan]

Yes, that’s the style I want… and it’s how I’d like it to appear in the editor by default.

Here’s a screenshot of all the relevant settings and how it currently appears – https://drive.google.com/file/d/1-ZSydcG3DoVRIe3etHCfhYsQYCbcrhp3/view?usp=sharing

NOTE * I’ve just realised that the Central Color Palette plugin seems to be part of the problem.

I’ve disabled it and – alternatively – manually set the palette as described here: https://generatepress.com/forums/topic/customizing-generateblocks-color-palette/

…but I still would like the core button to use GP text color settings without having to write extra css. (see my screenshot).

[Tom]

Ok, so right now I’m seeing:

1. The button getting the background color and text color from the Button Customizer options.
2. The is-style-outline class Gutenberg adds removing the background color, and setting a 2px border.
3. A border-radius and a custom text color being added inline for the button.

What you’d like:

1. Same
2. Same
3. Use the content link color set in the Customizer instead of having to set the color inline.

Is that correct? Just trying to get a feel for this to see if we can add it into GP 3.0 🙂

[Whelan]

Yes, that is correct

[Tom]

Interesting – I’ll play with it!

Thanks 🙂

[Author]

Posts