Exploring Gutenberg in WordPress: Block Editor, Widgets, and Toolbar Components

The Gutenberg block editor has revolutionized how WordPress users create and manage content. Introduced in WordPress 5.0, it simplifies the process of designing websites by allowing users to drag-and-drop content blocks, add widgets, and use an intuitive toolbar for formatting. This post will delve into key aspects of Gutenberg: Notices, Formatting Toolbar, Widgets, the Rich Text component, adding options to the block toolbar using Block Controls, and the Alignment Toolbar.

---

1. Block Editor: Notices, Formatting Tool Bar, and Widgets

Block Editor Notices

Notices in the Gutenberg Block Editor help improve user experience by providing important information, warnings, or success messages. They serve as alerts to indicate different states during content creation, such as errors when saving a post or success messages when updates are saved.

How to Implement Notices:

In Gutenberg, notices are implemented using the @wordpress/notices package. You can add, remove, or display notices in the block editor by using functions like:

import { dispatch, select } from '@wordpress/data';
import { store as noticesStore } from '@wordpress/notices';

// Example of adding a notice
dispatch( noticesStore ).createNotice( 
  'success',   // Can be 'success', 'error', 'info'
  'Content saved successfully!', 
  { 
    isDismissible: true, 
    type: 'snackbar' // or 'banner' for a different UI
  } 
);

By utilizing these notices, developers can provide essential feedback to users as they interact with various blocks, ensuring a more user-friendly experience.

Formatting Toolbar

The Formatting Toolbar in Gutenberg allows users to style text, add links, or modify content elements like headings and quotes. This toolbar appears contextually when text or block elements are selected. Common tools in the formatting toolbar include bold, italic, underline, strikethrough, links, and more.

Customizing the Formatting Toolbar:

You can customize the formatting toolbar for specific block types by using the RichText component (which we will discuss later). Here is an example of adding a custom button to the formatting toolbar:

import { RichTextToolbarButton } from '@wordpress/block-editor';
import { formatBold } from '@wordpress/icons';

const MyCustomButton = () => (
  <RichTextToolbarButton
    icon={ formatBold }
    title="Bold"
    onClick={ () => console.log( 'Bold clicked' ) }
  />
);

This approach allows you to modify the toolbar’s behavior to suit the unique needs of the block you are developing, thus offering a more refined editing experience.

Widgets

Widgets in Gutenberg are blocks that can be used in various parts of the website, such as sidebars and footers. The introduction of block-based widgets in WordPress has allowed users to seamlessly add rich content to widget areas with the same drag-and-drop functionality found in the block editor.

Adding Widgets:

To create a custom widget block, you need to register it as a block. Below is an example of how to create a simple text widget:

import { registerBlockType } from '@wordpress/blocks';

registerBlockType( 'my-plugin/text-widget', {
    title: 'Text Widget',
    category: 'widgets',
    edit: () => <p>Editable widget content here</p>,
    save: () => <p>Saved widget content here</p>,
});

This basic structure enables developers to extend widget areas easily, providing greater flexibility when designing themes and layouts.

---

2. The Rich Text Component

The RichText component is central to managing editable content within Gutenberg blocks. It provides a WYSIWYG interface for users to format text and add various styles directly within a block.

Example of RichText Implementation:

import { RichText } from '@wordpress/block-editor';

const MyBlock = ( props ) => {
    const { attributes, setAttributes } = props;

    return (
        <RichText
            tagName="p"
            value={ attributes.content }
            onChange={ ( newContent ) => setAttributes( { content: newContent } ) }
            placeholder="Enter text..."
        />
    );
};

In this example, the RichText component is rendered as a <p> tag, allowing users to edit and format the content. The onChange handler ensures that the entered content is dynamically updated in the block’s attributes.

---

3. Adding Options in Block Toolbar Using Block Controls

WordPress offers a BlockControls component, which allows developers to extend the block toolbar with custom options like buttons or dropdown menus. This enhances the functionality of individual blocks and provides more control over how content is manipulated.

Example of Adding Block Controls:

import { BlockControls } from '@wordpress/block-editor';
import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
import { alignLeft, alignRight } from '@wordpress/icons';

const MyBlock = ( props ) => {
    return (
        <>
            <BlockControls>
                <ToolbarGroup>
                    <ToolbarButton
                        icon={ alignLeft }
                        label="Align left"
                        onClick={ () => console.log( 'Left Align' ) }
                    />
                    <ToolbarButton
                        icon={ alignRight }
                        label="Align right"
                        onClick={ () => console.log( 'Right Align' ) }
                    />
                </ToolbarGroup>
            </BlockControls>
            {/* Block content */}
        </>
    );
};

In this example, two custom buttons are added to the block toolbar using BlockControls and ToolbarGroup, allowing for left and right text alignment.

---

4. Alignment Toolbar Component

The Alignment Toolbar in Gutenberg is an essential tool for controlling the positioning of content within blocks. By using the AlignmentToolbar component, you can provide alignment options like left, center, right, and justify.

Example of Alignment Toolbar:

import { AlignmentToolbar, BlockControls } from '@wordpress/block-editor';

const MyBlock = ( props ) => {
    const { attributes, setAttributes } = props;

    return (
        <>
            <BlockControls>
                <AlignmentToolbar
                    value={ attributes.alignment }
                    onChange={ ( newAlign ) => setAttributes( { alignment: newAlign } ) }
                />
            </BlockControls>
            <div style={ { textAlign: attributes.alignment } }>
                <p>Your content here</p>
            </div>
        </>
    );
};

The AlignmentToolbar component is included within the BlockControls. The selected alignment is then applied to the content through inline styles.

---

Conclusion

The Gutenberg block editor offers a wealth of possibilities for both developers and content creators. From implementing Notices to creating custom toolbars using Block Controls and the Rich Text component, Gutenberg has transformed the way we design and manage WordPress websites. By mastering these components, you can enhance the functionality and user experience of any WordPress project.

Thank you for reading through the post… More will be added.

by ~Leaveitblank (Mayank Tripathi)