I'd like to right-align a Group block within a wide column. Is there a way I can get the Groups to show the same alignment options as an Image block does?

Group blocks by default only provide "Wide Width" and "Full Width". I'm able to do the corresponding CSS myself, I just need an interface for the end-user.

I'd like to right-align a Group block within a wide column. Is there a way I can get the Groups to show the same alignment options as an Image block does?

Group blocks by default only provide "Wide Width" and "Full Width". I'm able to do the corresponding CSS myself, I just need an interface for the end-user.

• block-editor

1 Answer 1

OK, I found a way to do this after browsing the source code. I do note that the code that helped me lives under deprecated.js so it's possible this won't continue to work.

Here's the JS code I have in my plugin directory

function addAlignmentToGroups(settings, name) {
    if (name !== "core/group") {
        return settings;
    }

    return lodash.assign({}, settings, {
        supports: lodash.assign( {}, settings.supports, {
            align: ['wide', 'full', 'left', 'center', 'right']
        })
    });
}

wp.hooks.addFilter(
    'blocks.registerBlockType',
    'myapp/alignments/group-block',
    addAlignmentToGroups
);

And the PHP code to load it:

<?php

 function my_enqueue() {
     wp_enqueue_script(
         'my-align-blocks',
         plugins_url('dist/align-blocks.js', __FILE__),
         ['wp-blocks']
     );
 }

 add_action('enqueue_block_editor_assets', 'my_enqueue');