[Support request] Generatepress style overriding ACF Block default block styles in editor

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.

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;
} );

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;
} );