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.

Wordpress gutenberg block toolbar
WordPress Gutenberg 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.

Wordpress gutenberg block Settings Sidebar
WordPress Gutenberg block Settings Sidebar

Để 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.

Auto deploy projects với GitHub Actions – sử dụng ssh-action WordPress Gutenberg Block Server Side Render Add, Upload image trong Gutenberg Block Development Làm quen với các components thường dùng khi tạo Gutenberg Block Gutenberg Block Attributes Cách tạo Gutenberg Block trong WordPress Tổng quan về Gutenberg trong WordPress Hơn 100 hình ảnh minh họa chất lượng cao, hoàn toàn miễn phí cho products của bạn Chuyển đổi các trường ACF được đăng ký bởi PHP sang định dạng JSON có thể Import 9 ứng dụng hữu ích cho Developers

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.