[Resolved] Style conflict with Toolset Containers

[Harry]

Is there a way to remove this

.entry-content > [class*="wp-block-"]:not(:last-child) {
    margin-bottom: 1.5em;
}

from <style id='generate-style-inline-css'>.

It is causing a conflict with Toolset Containers, which have these CSS classes:
<div class="wp-block-toolset-blocks-container tb-container">
and this markup:
.tb-container[data-toolset-blocks-container=”a2b624e1050bc0278a34ef57cb57b665″]

The margin-bottom attribute is overwritten by “.entry-content > [class*=”wp-block-“]:not(:last-child)”, so this has no effect:
.tb-container[data-toolset-blocks-container="a2b624e1050bc0278a34ef57cb57b665"] { margin-bottom: 50px; }

[David]

Hi there,

do each of the TB Containers have the same margin-bottom ?

If so you can overwrite that CSS with something like this:

.entry-content > [class*="wp-block-"].tb-container {
    margin-bottom: 50px;
}

If the margins are variable then thats a little more tricky.

Let me know.

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

[Harry]

Hi David,

it’s a bit more tricky indeed, I couldn’t solve it with CSS, although I’m a (humble) professional 😉

The margin can be specified in the block editor, the markup is always the same with varying hashes attached to .tb-container (e.g. [data-toolset-blocks-container=”a2b624e1050bc0278a34ef57cb57b665″])

I could implement the same margin for all those cases like you did, or with this, but it must be flexible.
.entry-content > [class*="wp-block-"]:not(:last-child).tb-container

Would be cool if you had any other idea? If it’s too complex or too much of a hastle I’ll think of something else.

I think a solution could be (for me) to change the GeneratePress CSS line to this:
.entry-content > [class*="wp-block-"]:not(:last-child):not(.tb-container)

[David]

Try this CSS:

.entry-content > [class*="wp-block-"]:not(:last-child) {
    margin-bottom: unset !important;
}

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

[Harry]

Hey David, I already tried “unset / initial / inherit”, but it’s still overwriting the CSS from the Block editor, because it’s more specific.

[David]

Yeah didn’t think so – always worth a shot.
I am going to run this by Tom to see if we can filter out that CSS from the dynamic CSS function.

In the meantime could ask Toolset if they have any filters for their CSS generation ? May be simpler to add to their CSS.

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

[Tom]

I’ve added a filter in 3.1.0 that will allow us to prevent the CSS from rendering 🙂

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Harry]

Didn’t expect that, thanks guys, that’s great! I’ll check the documentation when 3.1.0 is out.

[Tom]

No problem! Once 3.1.0 is out, you’ll be able to do this:

add_filter( 'generate_do_wp_block_margin_bottom', '__return_false' );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Harry]

Cheers Tom!

[Author]

Posts