Tạo Block Controls – Block Toolbar và Settings Sidebar trong WordPress Gutenberg

Để đơn giản hóa việc tùy chỉnh khối và đảm bảo trải nghiệm nhất quán cho người dùng, có một số mẫu giao diện người dùng được tích hợp sẵn để giúp tạo bản xem trước của trình chỉnh sửa.

Trong bài viết này, chúng ta sẽ khám phá các thanh công cụ (toolbars) và trình kiểm tra khối (block inspector).

Block Toolbar

Khi người dùng chọn một khối, một số nút điều khiển có thể được hiển thị trên thanh công cụ phía trên khối đã chọn, nó chính là Block Toolbar.

Để tạo một Block Toolbar thì các elment cần được wrap trong BlockControls.

import { registerBlockType } from '@wordpress/blocks';
 
import {
    useBlockProps,
    RichText,
    AlignmentToolbar,
    BlockControls,
} from '@wordpress/block-editor';
 
registerBlockType( 'gutenberg-examples/example-04-controls-esnext', {
    apiVersion: 2,
    title: 'Example: Controls (esnext)',
    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={ `gutenberg-examples-align-${ props.attributes.alignment }` }
                    tagName="p"
                    value={ props.attributes.content }
                />
            </div>
        );
    },
} );

Lưu ý rằng BlockControls chỉ hiển thị khi block hiện được chọn và ở chế độ chỉnh sửa trực quan(visual editior). BlockControls sẽ không được hiển thị khi chỉnh sửa một khối ở chế độ chỉnh sửa HTML(code editor).

Settings Sidebar

Settings Sidebar được sử dụng để hiển thị các cài đặt ít được sử dụng hơn hoặc các cài đặt yêu cầu nhiều không gian màn hình hơn. Thanh bên Cài đặt chỉ nên được sử dụng cho cài đặt cấp khối.

Để hiển thi các cài đặt bên sidebar bạn cần bọc trong component InspectorControls của function Edit của block.

import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import { TextControl } from '@wordpress/components';
 
import {
    useBlockProps,
    ColorPalette,
    InspectorControls,
} from '@wordpress/block-editor';
 
registerBlockType( 'create-block/gutenpride', {
    apiVersion: 2,
    attributes: {
        message: {
            type: 'string',
            source: 'text',
            selector: 'div',
            default: '', // empty default
        },
        bg_color: { type: 'string', default: '#000000' },
        text_color: { type: 'string', default: '#ffffff' },
    },
    edit: ( { attributes, setAttributes } ) => {
        const onChangeBGColor = ( hexColor ) => {
            setAttributes( { bg_color: hexColor } );
        };
 
        const onChangeTextColor = ( hexColor ) => {
            setAttributes( { text_color: hexColor } );
        };
 
        return (
            <div { ...useBlockProps() }>
                <InspectorControls key="setting">
                    <div id="gutenpride-controls">
                        <fieldset>
                            <legend className="blocks-base-control__label">
                                { __( 'Background color', 'gutenpride' ) }
                            </legend>
                            <ColorPalette // Element Tag for Gutenberg standard colour selector
                                onChange={ onChangeBGColor } // onChange event callback
                            />
                        </fieldset>
                        <fieldset>
                            <legend className="blocks-base-control__label">
                                { __( 'Text color', 'gutenpride' ) }
                            </legend>
                            <ColorPalette // Element Tag for Gutenberg standard colour selector
                                onChange={ onChangeTextColor } // onChange event callback
                            />
                        </fieldset>
                    </div>
                </InspectorControls>
                <TextControl
                    value={ attributes.message }
                    onChange={ ( val ) => setAttributes( { message: val } ) }
                    style={ {
                        backgroundColor: attributes.bg_color,
                        color: attributes.text_color,
                    } }
                />
            </div>
        );
    },
    save: ( { attributes } ) => {
        return (
            <div
                { ...useBlockProps.save() }
                style={ {
                    backgroundColor: attributes.bg_color,
                    color: attributes.text_color,
                } }
            >
                { attributes.message }
            </div>
        );
    },
} );

Như trong ví dụ trên các bạn có thể thấy Sidebar Setting bao gồm Background color và Text color khi bạn chọn block hiện tại trong chế độ visual editor.

Trong bài viết sau mình sẽ hướng dẫn Add, Upload image khi phát triển một Gutenberg Block.