Backend CSS conflict with ACF tables

Hi there,

do your dynamic blocks have their own styles sheets for border styling ?

Yes they do !

Might make sense to load them in the editor - GPs Border styles have really low specificity so your styles should win.

This snippet can do that:

function my_editor_styles(){
    wp_enqueue_style( 'my-editor-style-handle', get_stylesheet_directory_uri() . "/theme-styles/editor-styles.css", false, '1.0', 'all' );
}
add_action( 'enqueue_block_editor_assets', 'my_editor_styles',200);

Just give it a handle and the correct URL

Hi David,

The conflict is between ACF backend styles and GP (not my custom style). See enclosed screenshot for more details.

Same applies with ACF back end buttons.

Thus it would make sense to fix this at GP level.

Thanks

GP isn't the only theme that applies higher specificity CSS selectors to its back end styles. Many themes do to ensure the theme styles taken precedence over the core block editor styles eg.

.wp-block-table td, .wp-block-table th {
    border: 1px solid;
}

For example, heres just a few styles from TwentyTwenty that are more specific:

.editor-styles-wrapper .wp-block-table {
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: show;
	font-size: 18px;
	margin-bottom: 1.1em;
	width: 100%;
}

.editor-styles-wrapper .wp-block-table,
.editor-styles-wrapper .wp-block-table * {
	border-color: #dcd7ca;
}

.editor-styles-wrapper .wp-block-table tr {
	border: none;
}

Its one of the hardships of Themes that existed before Block Editor was even thought up, we have legacy styles that cannot be changed without affecting 1000's sites that use and like those styles. But we are conscious of these kinds of things, and dynamic Table styling is something we may consider in the future that will allow these kinds of element specific styles to be 'detached'

It really is down to the plugin developer to ensure its styles are more specific.