How to display Additional CSS Class (Gutenberg)

[ESirop]

Hello,

I'm using CF to put create new blocks on Gutenberg, and we still have the possibility to add an Additional CSS Class. Sadly, I can't find how to display this class (documentation or Google).

As a back up plan, I can make a new text field which would be the additial class, but it means I'll have to use it on every block and I don't really want to display an additional field for each block (client won't necesserely understand what it's for, etc.)

Any ideas?

Thanks

P.S : still in love with the plugin since 3 years <3

[vvasilev-]

Hi @ESirop,

Thanks for your feedback. Perhaps, we missed to pass the additional attributes of the block to the render callback. It'll be fixed in next minor version. :)

[dmtrmrv]

Any updates on this? Thank you.

[vvasilev-]

Hi @ESirop, @dmtrmrv,

Sorry for the late response. This feature is now available in our latest release - v3.1.0-beta.1. 😄
You can get the CSS class from $attributes argument passed to the render callback.

[drdogbot7]

Is there an example of this? I'm just getting an empty array when I try to access the $attributes variable.

[yunusga]

@drdogbot7 Same problem

[saad-allah]

@drdogbot7 @yunusga u can try this

<?php

use Carbon_Fields\Block;
use Carbon_Fields\Field;

Block::make( __( 'My Shiny Gutenberg Block' ) )
	->add_fields( array(
		Field::make( 'text', 'heading', __( 'Block Heading' ) ),
		Field::make( 'image', 'image', __( 'Block Image' ) ),
		Field::make( 'rich_text', 'content', __( 'Block Content' ) ),
	) )
	->set_render_callback( function ( $fields, $attributes, $inner_blocks ) {

   $additional_class  = isset($attributes['className']) ? $attributes['className'] : '';
		?>

		<div class="block <?php echo $additional_class; ?>">
			<div class="block__heading">
				<h1><?php echo esc_html( $fields['heading'] ); ?></h1>
			</div><!-- /.block__heading -->

			<div class="block__image">
				<?php echo wp_get_attachment_image( $fields['image'], 'full' ); ?>
			</div><!-- /.block__image -->

			<div class="block__content">
				<?php echo apply_filters( 'the_content', $fields['content'] ); ?>
			</div><!-- /.block__content -->
		</div><!-- /.block -->

		<?php
	} );