Generatepress style overriding ACF Block default block styles in editor

Hi there,

Are you able to provide the CSS that you think it's causing the issue?

Let me know :)

Yes, definately (might not be exhaustive) :

.editor-styles-wrapper .block-editor-block-list__layout .wp-block-button .wp-block-button__link, .editor-styles-wrapper .block-editor-block-list__layout .button {
    font-size: inherit;
    padding: 10px 15px;
    line-height: normal;
}

.editor-styles-wrapper a.button, .editor-styles-wrapper .block-editor-block-list__layout .wp-block-button .wp-block-button__link {
    font-weight: 700;
    text-transform: uppercase;
    font-size: inherit
}

.editor-styles-wrapper a.button, .editor-styles-wrapper a.button:visited, .editor-styles-wrapper .wp-block-button__link:not(.has-background) {
    color: #ffffff;
    background-color: #00b62c;
    padding: 10px 20px;
    border: 0;
    border-radius: 0;
}

.editor-styles-wrapper a, .editor-styles-wrapper a:visited {
    color: #00b62c;
}

Those are inline styles generated by Generatepress (cf. customizer) and they are overiding ACF / wp-core-ui default styles/

Hi @Leo,

Any news on this ?

Hi Fabien,

Can you provide admin login credentials so we can take a closer look at what's occurring?

Please use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

We'll try to provide an assessment afterward.

Here you go !

Hi there,

does this snippet fix the issue ?

add_filter( 'block_editor_settings_all', function( $editor_settings ) {
    
    $css = '.button.button-small {
        padding: 0 8px;
    }';
    $editor_settings['styles'][] = array( 'css' => $css );
    
    return $editor_settings;
} );

Hi David,

Thanks for your reply !

Yes it does but there was a little mistake : padding-bottom: 0 8px; should be padding: 0 8px;

Now, the 'add row' button should be fixed (in order to be blue, with border radius and so on... in order to not inherit GP styles). Can you please help ?

Thanks

Yikes sorry about the CSS error lol - corrected the code above.

I can't stop ACF and the editor buttons from inheriting those styles.

This is the issue. GP loads its front end styles in the editor.
This for example is one of those styles:

a.button {
    font-weight: 700;
    text-transform: uppercase;
    font-size: inherit
}

And we load it using the core functions, which automatically adds the necessary editor selectors eg. .editor-styles-wrapper which makes it more specific then the Core UI Buttons. Its a stupid system of core and they should address it by ensuring their core buttons have more specificity in their styles.... for now you would need to re-add the styles eg.

add_filter( 'block_editor_settings_all', function( $editor_settings ) {
    
    $css = '.button.button-small {
        padding: 0 8px;
    }
    .wp-core-ui .button-primary {
        background: #2271b1;
        border-color: #2271b1;
    }
    ';
    $editor_settings['styles'][] = array( 'css' => $css );
    
    return $editor_settings;
} );