Adding className

[Stefan Atterdal]

Hi!

I have a global margins "plugin" so that I can add margins for all gutenberg blocks. It works great with the core but it doesn't add the class to bootstrap blocks.

Example code:
saveElementProps.className = classnames( saveElementProps.className, 'mt-md-' + margins[ attributes.marginTop ] );

[Jürg Hunziker]

Hi @atterdal. Hmm I think this might not work because we're using dynamic block (Server side rendered) in this plugin (see: https://github.com/liip/bootstrap-blocks-wordpress-plugin#templates) which basically don't have a saveElement (we only return the InnerBlocks content in the save() function. Eg in the row block: https://github.com/liip/bootstrap-blocks-wordpress-plugin/blob/master/src/row/block.js#L40)

[Stefan Atterdal]

Ah ok, i'm quite new to gutenberg but would you say that there might be a way around it?

[Jürg Hunziker]

So what you're doing is adding the marginTop attribute to all the blocks right? If this is the case you should be able to copy the templates of these blocks (see: https://github.com/liip/bootstrap-blocks-wordpress-plugin/tree/master/src/templates) to the wp-bootstrap-blocks folder in your theme folder and modify them to also add the margin class if needed (documented here: https://github.com/liip/bootstrap-blocks-wordpress-plugin#templates).

As an example for the row block you could add the following code before the <div> gets rendered:

if ( array_key_exists( 'marginTop', $attributes ) ) {
        $marginClass = get_specific_margin( $attributes['marginTop'] );
	array_push( $classes, 'mt-md-' . $marginClass );
}

[Stefan Atterdal]

Amazing, works like a charm, thanks!