Introducing Attributes and Editable Fields

https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/

Chú ý: source function
https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/

Introducing Attributes and Editable Fields

Các khối ví dụ cho đến nay vẫn không thú vị lắm vì chúng thiếu các tùy chọn để tùy chỉnh sự xuất hiện của thông báo. Trong phần này, chúng tôi sẽ triển khai trường RichText cho phép người dùng chỉ định thông điệp của riêng họ. Trước khi làm như vậy, điều quan trọng là phải hiểu trạng thái của khối (“thuộc tính” của khối) được duy trì và thay đổi như thế nào theo thời gian.

Cho đến nay, các chức năng chỉnh sửa và lưu đã trả về một biểu diễn đơn giản của một phần tử đoạn. Chúng tôi cũng đã tìm hiểu cách các hàm này chịu trách nhiệm mô tả cấu trúc giao diện của khối. Nếu người dùng thay đổi một khối, cấu trúc này có thể cần phải thay đổi. Để đạt được điều này, trạng thái của khối được duy trì trong suốt phiên chỉnh sửa dưới dạng một đối tượng JavaScript thuần túy và khi cập nhật xảy ra, hàm chỉnh sửa được gọi lại. Nói một cách khác: đầu ra của một khối là một chức năng của các thuộc tính của nó.

Một thách thức trong việc duy trì biểu diễn của một khối dưới dạng đối tượng JavaScript là chúng ta phải có thể trích xuất lại đối tượng này từ nội dung đã lưu của một bài đăng. Điều này đạt được với thuộc tính thuộc tính của loại khối:

Khi đăng ký một loại khối mới, thuộc tính thuộc tính mô tả hình dạng của đối tượng thuộc tính mà bạn muốn nhận trong hàm chỉnh sửa và lưu. Mỗi giá trị là một hàm nguồn để tìm giá trị mong muốn từ đánh dấu của khối.

Trong đoạn mã ở trên, khi tải trình chỉnh sửa, giá trị nội dung sẽ được trích xuất từ HTML của phần tử đoạn trong đánh dấu của bài đăng đã lưu.

Components and the RichText Component

Các ví dụ trước đó đã sử dụng hàm createElement để tạo các nút DOM, nhưng cũng có thể đóng gói hành vi này thành "thành phần". Sự trừu tượng này giúp bạn chia sẻ các hành vi phổ biến và che giấu sự phức tạp trong các đơn vị khép kín.

Có một số thành phần có sẵn để sử dụng trong việc triển khai các khối của bạn. Bạn có thể thấy một thành phần như vậy trong đoạn mã bên dưới: thành phần RichText là một phần của gói wp-editor.

Thành phần RichText có thể được coi là một phần tử văn bản siêu hỗ trợ, cho phép chỉnh sửa nội dung phong phú bao gồm in đậm, in nghiêng, siêu liên kết, v.v.

Để sử dụng thành phần RichText và sử dụng mã ES5, hãy nhớ thêm wp-editor vào mảng phụ thuộc của các xử lý tập lệnh đã đăng ký khi gọi wp_register_script.

// automatically load dependencies and version
$asset_file = include( plugin_dir_path( __FILE__ ) . 'build/index.asset.php');
 
wp_register_script(
    'gutenberg-examples-03-esnext',
    plugins_url( 'build/index.js', __FILE__ ),
    $asset_file['dependencies'],
    $asset_file['version']
);

Cũng đừng quên cập nhật trình xử lý editor_script trong register_block_type thành gutenberg -amples-03-esnext.

Việc triển khai hành vi này như một thành phần cho phép bạn với tư cách là người triển khai khối chi tiết hơn nhiều về các trường có thể chỉnh sửa. Khối của bạn có thể không cần RichText hoặc có thể cần nhiều phần tử RichText độc lập, mỗi phần tử hoạt động trên một tập hợp con của trạng thái khối tổng thể.

Bởi vì RichText cho phép các nút lồng nhau, bạn sẽ thường sử dụng nó cùng với nguồn thuộc tính html khi trích xuất giá trị từ nội dung đã lưu. Bạn cũng sẽ sử dụng RichText.Content trong hàm lưu để xuất giá trị RichText.

Đây là định nghĩa khối hoàn chỉnh cho Ví dụ 03.

import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps, RichText } from '@wordpress/block-editor';
 
registerBlockType( 'gutenberg-examples/example-03-editable-esnext', {
    apiVersion: 2,
    title: 'Example: Editable (esnext)',
    icon: 'universal-access-alt',
    category: 'design',
    attributes: {
        content: {
            type: 'array',
            source: 'children',
            selector: 'p',
        },
    },
    example: {
        attributes: {
            content: 'Hello World',
        },
    },
    edit: ( props ) => {
        const {
            attributes: { content },
            setAttributes,
            className,
        } = props;
        const blockProps = useBlockProps();
        const onChangeContent = ( newContent ) => {
            setAttributes( { content: newContent } );
        };
        return (
            <RichText
                { ...blockProps }
                tagName="p"
                onChange={ onChangeContent }
                value={ content }
            />
        );
    },
    save: ( props ) => {
        const blockProps = useBlockProps.save();
        return (
            <RichText.Content
                { ...blockProps }
                tagName="p"
                value={ props.attributes.content }
            />
        );
    },
} );