Gutenberg: How do I use alignwide and alignfull for custom blocks?

[manake]

1. Is it possible to enable alignwide and alignfull for normal blocks via some registration parameter in wp.blocks.registerBlockType( 'name/name, { HERE })?
2. If not then https://wordpress.org/gutenberg/handbook/blocks/block-controls-toolbars-and-inspector/ should get an update on how to make it happen the official/correct way. I know it can be just another attribute attributes: { alignment: { type: 'string' } } but is this the official/correct way if add_theme_support( 'align-wide' ); exists?
   
   
   
   • Also in the editor a special data-align="wide" is assigned to the outer DIV wrapper of a block so this makes me think that there must be some official way to add alignwide and alignfull for normal blocks. Alignment as an attribute is not going to add data-align="wide".
   
   

[aduth]

Wide and full alignment are part of the 'align' supports. You should be able to add the following to your block and, assuming the theme has align-wide support, the options should appear in the toolbar:

supports: {
    align: true
}

supports is documented here, but notably it does not include align.

https://wordpress.org/gutenberg/handbook/block-api/#supports-optional

This should be added.

[manake]

While you're at it please also add:

1. How to start block with alignfull.
2. How to lock block to have alignfull only (without "normal" or alignwide widths).
3. How to edit alignemnt from right sidebar inspector (because I have conditional options depending on whether it's "normal" or alignwide or alignfull).
4. Perhaps document where alignfull and alignwide information is saved (does it become a part of invisible className in save()? Or is this an attribute?
5. When I do this:

var blockControls = el( wp.editor.BlockControls,
    { key: 'controls' },
    el( wp.editor.AlignmentToolbar,
        {
            value: '',
            onChange: function(){

            }
        }
    )
);

then I get all alignment options but I only want alignfull on/off. How?

1. How to return in react BlockControls, InspectorControls and el()?

This works:
return [blockControls,
    el('div', { className: props.className }, el(wp.editor.InnerBlocks))
];

This works:
return [inspectorControls,
    el('div', { className: props.className }, el(wp.editor.InnerBlocks))
];

This doesn't work (correction: it works):
return [blockControls, inspectorControls,
    el('div', { className: props.className }, el(wp.editor.InnerBlocks))
];

Similar to rendering a toolbar, if you include an InspectorControls element in the return value of your block type’s edit function, those controls will be shown in the inspector region.

Source (unclear and needs correction/example): https://wordpress.org/gutenberg/handbook/blocks/block-controls-toolbars-and-inspector/

Update: It was a caching issue. But the docs should be updated anyway.

1. Did I miss something?

Update: By now I managed to solve all 1, 2, ,3 ,4 ,5, 6 issues already so no need to answer anything. For anyone looking for some answers there exist AlignmentToolbar and BlockAlignmentToolbar (two separate components, both not properly documented yet).

[mtias]

Good to know you could address all these!

[timnicholson]

Do you mind posting the solution? I'm not interested (yet) in creating my own custom block, but I would like to add the alignwide and alignfull options to all the Gutenberg blocks that don't support it, such as headings. If you mix normal and wide elements on a page, you can't actually center a heading and have it truly centered across the wide element without being able to specify that the heading is also wide.

I may also want to remove the alignwide (but leave alignfull) on some built-in Gutenberg blocks.

[IvanPr]

You should go with:
wp.blocks.registerBlockType( 'wpo/blockname', {
...
supports: { align: ["wide","full"], default: '' },
...

[Skrigueztep]

@IvanPr Thank, this work for me

[daledesilva]

You should go with:
wp.blocks.registerBlockType( 'wpo/blockname', {
...
supports: { align: ["wide","full"], default: '' },
...

This works, however, I don't believe the default value does anything.
I tried this and it had no effect on defaults.

As mentioned in the link below, the default should be applied when defining the attributes (ie. not in supports). That's what worked for me to assign a default.
https://developer.wordpress.org/block-editor/developers/block-api/block-supports/#align

ie.

supports: {
    align: ["full"]
},
attributes: {
    align: {
        type: "string",
        default: "full"
    },
},

Unfortunately, I wasn't able to find a way to force align "full" without showing the align options at all. I hoped to set the dfault but pass in an empty array or false, but these didn't work that way.