Nested Blocks: Using InnerBlocks

https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/nested-blocks-inner-blocks/

Nested Blocks: Using InnerBlocks

Bạn có thể tạo một khối duy nhất lồng các khối khác bằng cách sử dụng thành phần InnerBlocks. Điều này được sử dụng trong khối Cột, khối Liên kết xã hội hoặc bất kỳ khối nào bạn muốn chứa các khối khác. Lưu ý: Một khối duy nhất chỉ có thể chứa một thành phần InnerBlock. Đây là cách sử dụng InnerBlocks cơ bản.

import { registerBlockType } from '@wordpress/blocks';
import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
registerBlockType( 'gutenberg-examples/example-06', {
    // ...
    edit: () => {
        const blockProps = useBlockProps();
 
        return (
            <div { ...blockProps }>
                <InnerBlocks />
            </div>
        );
    },
    save: () => {
        const blockProps = useBlockProps.save();
 
        return (
            <div { ...blockProps }>
                <InnerBlocks.Content />
            </div>
        );
    },
} );

Allowed Blocks #

Sử dụng thuộc tính ALLOWED_BLOCKS, bạn có thể xác định tập hợp các khối được phép trong InnerBlock của mình. Điều này hạn chế các khối chỉ có thể được đưa vào những người được liệt kê, tất cả các khối khác sẽ không hiển thị trong trình chèn.

const ALLOWED_BLOCKS = [ 'core/image', 'core/paragraph' ];
//...
<InnerBlocks allowedBlocks={ ALLOWED_BLOCKS } />;

Orientation #

Theo mặc định, InnerBlocks mong đợi các khối của nó được hiển thị trong một danh sách dọc. Trường hợp sử dụng hợp lệ là tạo kiểu cho InnerBlocks xuất hiện theo chiều ngang. Khi các khối được tạo kiểu theo cách như vậy, giá đỡ định hướng có thể được sử dụng để chỉ ra bố cục theo chiều ngang:

<InnerBlocks orientation="horizontal" />

Việc chỉ định giá đỡ này sẽ dẫn đến các trình chuyển động khối được hiển thị theo chiều ngang, đồng thời đảm bảo tính năng kéo và thả hoạt động chính xác.

Template #

Sử dụng thuộc tính mẫu để xác định một tập hợp các khối chèn sẵn thành phần InnerBlocks khi được chèn vào. Bạn có thể đặt các thuộc tính trên các khối để xác định việc sử dụng chúng. Ví dụ dưới đây cho thấy một mẫu đánh giá sách sử dụng thành phần InnerBlocks và đặt các giá trị chỗ dành sẵn để hiển thị việc sử dụng khối.

const MY_TEMPLATE = [
    [ 'core/image', {} ],
    [ 'core/heading', { placeholder: 'Book Title' } ],
    [ 'core/paragraph', { placeholder: 'Summary' } ],
];
edit: () => {
    return (
        <InnerBlocks
            template={ MY_TEMPLATE }
            templateLock="all"
        />
    );
},

Sử dụng thuộc tính templateLock để khóa mẫu. Sử dụng tất cả các khóa mẫu hoàn tất, không thể thực hiện thay đổi nào. Việc sử dụng chèn ngăn chặn các khối bổ sung được chèn vào, nhưng các khối hiện có có thể được sắp xếp lại. Xem tài liệu templateLock để biết thêm thông tin.

Post Template #

Không liên quan đến InnerBlocks nhưng đáng nói ở đây, bạn có thể tạo một mẫu bài đăng theo loại bài đăng, tải trước trình chỉnh sửa khối với một tập hợp các khối.

Mẫu InnerBlocks dành cho thành phần trong khối duy nhất mà bạn đã tạo, phần còn lại của bài đăng có thể bao gồm bất kỳ khối nào mà người dùng thích. Sử dụng mẫu bài đăng, có thể khóa toàn bộ bài đăng chỉ với mẫu bạn xác định.

add_action( 'init', function() {
    $post_type_object = get_post_type_object( 'post' );
    $post_type_object->template = array(
        array( 'core/image' ),
        array( 'core/heading' )
    );
} );

Parent-Child InnerBlocks #

Một mẫu chung để sử dụng InnerBlocks là tạo một khối tùy chỉnh sẽ chỉ được bao gồm trong InnerBlocks. Một ví dụ về điều này là khối Columns, tạo một khối cha duy nhất được gọi là các cột và sau đó tạo một khối con được gọi là cột. Khối cha được định nghĩa để chỉ cho phép các khối con. Xem Mã cột để tham khảo.

Khi xác định khối con, hãy sử dụng cài đặt khối mẹ để xác định khối nào là khối mẹ. Điều này ngăn chặn khối hiển thị trong bộ chèn bên ngoài InnerBlock mà nó được xác định.

export const settings = {
    title: __( 'Column' ),
    parent: [ 'core/columns' ],
    icon,
    description: __( 'A single column within a columns block.' ),
    //...
};