[Feature request] Gutenberg alignement support

[Mick00]

Version

• Carbon Fields: 3.0.2
• WordPress: 5.1
• PHP: 7.?

Hi, I was testing Carbon Fields and as a replacement for ACF and while I was trying to make a gutenberg block I realised that there is no way to select an alignement (left, center, right, wide and full) for the block and implement it into my block and I haven't found any mention of how to enable this feature in the documentation. Did I miss it or is this feature missing? If so I think it would be great to see it get implemented.

Thanks

[vvasilev-]

Hi @Mick00,

Thank you for your feedback! Currently, this one isn't supported but we plan to implement it for the next release.

[anujgtm]

I have been facing the same issue and it's a show stopper for me at the moment. Looks like i might need to revert to ACF

[Mick00]

Hey there @anujgtm, there is a workaround this with the render callback function:
->set_render_callback( function ( $fields, $attributes, $inner_blocks )
The $attributes['className'] contains the name of the classes entered in the class field of the gutenberg editor. So, you can put alignwide or alignfull into this field and you bloc will align correctly if you implemented it correctly in your code. Just watch out for any errors if there is nothing in the field it won't be set.

Maybe not the perfect solution, but it works for me! But definitely a proper implementation of the alignment feature would be great.

[oobi]

Any movement on this one?

[oobi]

I'd like to see this also - particularly the ability to change the width in the editor. Setting a class attribute won't change the block width in the editor which can be limiting when dealing with child blocks.

For what it's worth, I include this on blocks where I need easy alignment:

Field::make('select', 'alignment', 'Alignment')
					->set_options( array(
						'' => 'None',
						'alignwide' => 'Wide',
						'alignfull' => 'Full Width'
					) )

then in my view:

<div class="my-component {{fields.alignment}} {{attributes.className}}">
```