Block Controls: Block Toolbar and Settings Sidebar

https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar/

Để đơ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. Giống như với thành phần RichText được đề cập trong chương trước, toàn cầu wp.editor bao gồm một vài thành phần phổ biến khác để hiển thị các giao diện chỉnh sửa. Trong chương này, chúng ta sẽ khám phá các thanh công cụ và trình kiểm tra khối.

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. Một số điều khiển cấp khối này được đưa vào tự động nếu trình chỉnh sửa có thể chuyển đổi khối thành một loại khác hoặc nếu phần tử tập trung là thành phần RichText.

Bạn cũng có thể tùy chỉnh thanh công cụ để bao gồm các điều khiển dành riêng cho loại khối của bạn. Nếu giá trị trả về của chức năng chỉnh sửa loại khối của bạn bao gồm phần tử BlockControls, thì những điều khiển đó sẽ được hiển thị trên thanh công cụ của khối đã chọn.

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>
        );
    },
} );