How to Use Block Controls, Alignment Toolbar in Gutenberg

In this article, we’ll look at how to add an alignment control to a Gutenberg block’s toolbar. There are a variety of built-in UI patterns. To help generate the editor preview to ease block modification and guarantee a uniform experience for users. The wp.editor global provides a few more popular components to render editing interfaces, similar to the RichText component.

Block Alignment Toolbar

img-1

When the user selects a block, a toolbar may appear above it with a number of control buttons. If the editor can change the block to another type or if the targeted element is a RichText component, several of these block-level features are includes automatically

You may also add controls to the toolbar that are particular to your block type. If the edit function of your block type returns a BlockControls element, those controls will appear in the toolbar of the chosen blocks.

ES5:

( function ( blocks, blockEditor, element ) {
    var el = element.createElement;
    var RichText = blockEditor.RichText;
    var AlignmentToolbar = blockEditor.AlignmentToolbar;
    var BlockControls = blockEditor.BlockControls;
    var useBlockProps = blockEditor.useBlockProps;
 
    blocks.registerBlockType( 'softhunt/controls-example', {
        title: 'Controls',
        icon: 'universal-access-alt',
        category: 'design',
 
        attributes: {
            content: {
                type: 'array',
                source: 'children',
                selector: 'p',
            },
            alignment: {
                type: 'string',
                default: 'none',
            },
        },
        example: {
            attributes: {
                content: 'Hello World',
                alignment: 'right',
            },
        },
        edit: function ( props ) {
            var content = props.attributes.content;
            var alignment = props.attributes.alignment;
 
            function onChangeContent( newContent ) {
                props.setAttributes( { content: newContent } );
            }
 
            function onChangeAlignment( newAlignment ) {
                props.setAttributes( {
                    alignment:
                        newAlignment === undefined ? 'none' : newAlignment,
                } );
            }
 
            return el(
                'div',
                useBlockProps(),
                el(
                    BlockControls,
                    { key: 'controls' },
                    el( AlignmentToolbar, {
                        value: alignment,
                        onChange: onChangeAlignment,
                    } )
                ),
                el( RichText, {
                    key: 'richtext',
                    tagName: 'p',
                    style: { textAlign: alignment },
                    onChange: onChangeContent,
                    value: content,
                } )
            );
        },
 
        save: function ( props ) {
            var blockProps = useBlockProps.save();
 
            return el(
                'div',
                blockProps,
                el( RichText.Content, {
                    tagName: 'p',
                    className:
                        'softhunt-gutenberg-examples-align-' +
                        props.attributes.alignment,
                    value: props.attributes.content,
                } )
            );
        },
    } );
} )( window.wp.blocks, window.wp.blockEditor, window.wp.element );

ESNext:

import { registerBlockType } from '@wordpress/blocks';
 
import {
    useBlockProps,
    RichText,
    AlignmentToolbar,
    BlockControls,
} from '@wordpress/block-editor';
 
registerBlockType( 'softhunt/controls-example', {
    apiVersion: 2,
    title: 'Controls',
    icon: 'universal-access-alt',
    category: 'design',
    attributes: {
        content: {
            type: 'array',
            source: 'children',
            selector: 'p',
        },
        alignment: {
            type: 'string',
            default: 'none',
        },
    },
    example: {
        attributes: {
            content: 'Hello World',
            alignment: 'right',
        },
    },
    edit: ( { attributes, setAttributes } ) => {
        const onChangeContent = ( newContent ) => {
            setAttributes( { content: newContent } );
        };
 
        const onChangeAlignment = ( newAlignment ) => {
            setAttributes( {
                alignment: newAlignment === undefined ? 'none' : newAlignment,
            } );
        };
 
        return (
            <div { ...useBlockProps() }>
                {
                    <BlockControls>
                        <AlignmentToolbar
                            value={ attributes.alignment }
                            onChange={ onChangeAlignment }
                        />
                    </BlockControls>
                }
                <RichText
                    className={ attributes.className }
                    style={ { textAlign: attributes.alignment } }
                    tagName="p"
                    onChange={ onChangeContent }
                    value={ attributes.content }
                />
            </div>
        );
    },
    save: ( props ) => {
        const blockProps = useBlockProps.save();
 
        return (
            <div { ...blockProps }>
                <RichText.Content
                    className={ `softhunt-gutenberg-examples-align-${ props.attributes.alignment }` }
                    tagName="p"
                    value={ props.attributes.content }
                />
            </div>
        );
    },
} );

Note: BlockControls is only displayed when the block is chosen and visual editing mode is enabled. When modifying a block in HTML editing mode, BlockControls are not visible

If you are not aware of how to create a block from scratch with a complete plugin setting then visit the sites by clicking on the links.

Conclusion

And that should be the end of it! Now we should have a custom Gutenberg block with an alignment toolbar that controls our block’s text alignment: if you have any confusion you can check WordPress official documentation.

That’s all for this article if you have any confusion contact us through our website or email us at [email protected] or by using LinkedIn

Suggested Articles:

  1. How to Add a Custom Inspector Sidebar in WordPress Gutenberg
  2. Create Dynamic Blocks for the Gutenberg Editor in WordPress
  3. How to Use Nested Blocks for Gutenberg Editor in WordPress
  4. How to Add Custom Admin Notices in WordPress

Leave a Comment