Creating dynamic blocks

https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/creating-dynamic-blocks/

Creating dynamic blocks

Khối động là các khối xây dựng cấu trúc và nội dung của chúng một cách nhanh chóng khi khối được hiển thị trên giao diện người dùng.

Có hai cách sử dụng chính cho các khối động:

Chặn nơi nội dung sẽ thay đổi ngay cả khi bài đăng chưa được cập nhật. Một ví dụ từ chính WordPress là khối Bài đăng mới nhất. Khối này sẽ cập nhật ở mọi nơi nó được sử dụng khi bài viết mới được xuất bản.

Các khối nơi cập nhật mã (HTML, CSS, JS) sẽ được hiển thị ngay lập tức trên giao diện người dùng của trang web. Ví dụ: nếu bạn cập nhật cấu trúc của khối bằng cách thêm lớp mới, thêm phần tử HTML hoặc thay đổi bố cục theo bất kỳ cách nào khác, thì việc sử dụng khối động đảm bảo những thay đổi đó được áp dụng ngay lập tức trên tất cả các lần xuất hiện của khối đó trên trang web . (Nếu một khối động không được sử dụng thì khi mã khối được cập nhật, quy trình xác thực của Gutenberg thường áp dụng, khiến người dùng nhìn thấy thông báo xác thực, "Khối này dường như đã được sửa đổi bên ngoài").

Đối với nhiều khối động, hàm gọi lại lưu phải được trả về là null, hàm này yêu cầu trình soạn thảo chỉ lưu các thuộc tính khối vào cơ sở dữ liệu. Các thuộc tính này sau đó được chuyển vào lệnh gọi lại hiển thị phía máy chủ, vì vậy bạn có thể quyết định cách hiển thị khối trên giao diện người dùng của trang web của mình. Khi bạn trả về null, trình chỉnh sửa sẽ bỏ qua quy trình xác thực đánh dấu khối, tránh các vấn đề với đánh dấu thường xuyên thay đổi.

Nếu bạn đang sử dụng InnerBlocks trong một khối động, bạn sẽ cần lưu InnerBlocks trong chức năng gọi lại lưu bằng cách sử dụng <InnerBlocks.Content/>

Bạn cũng có thể lưu biểu diễn HTML của khối. Nếu bạn cung cấp lệnh gọi lại hiển thị phía máy chủ, HTML này sẽ được thay thế bằng đầu ra của lệnh gọi lại của bạn, nhưng sẽ được hiển thị nếu khối của bạn bị hủy kích hoạt hoặc lệnh gọi lại hiển thị của bạn bị xóa.

Thuộc tính khối có thể được sử dụng cho bất kỳ nội dung hoặc cài đặt nào bạn muốn lưu cho khối đó. Trong ví dụ đầu tiên ở trên, với khối bài đăng mới nhất, số lượng bài đăng mới nhất bạn muốn hiển thị có thể được lưu dưới dạng thuộc tính. Hoặc trong ví dụ thứ hai, các thuộc tính có thể được sử dụng cho từng phần nội dung bạn muốn hiển thị trong giao diện người dùng - chẳng hạn như văn bản tiêu đề, đoạn văn bản, hình ảnh, URL, v.v.

Ví dụ mã sau đây cho thấy cách tạo một khối động chỉ hiển thị bài đăng cuối cùng dưới dạng liên kết.

import { registerBlockType } from '@wordpress/blocks';
import { withSelect } from '@wordpress/data';
import { useBlockProps } from '@wordpress/block-editor';
registerBlockType( 'gutenberg-examples/example-dynamic', {
    apiVersion: 2,
    title: 'Example: last post',
    icon: 'megaphone',
    category: 'widgets',
 
    edit: withSelect( ( select ) => {
        return {
            posts: select( 'core' ).getEntityRecords( 'postType', 'post' ),
        };
    } )( ( { posts } ) => {
        const blockProps = useBlockProps();
 
        return (
            <div { ...blockProps }>
                { ! posts && 'Loading' }
                { posts && posts.length === 0 && 'No Posts' }
                { posts && posts.length > 0 && (
                    <a href={ posts[ 0 ].link }>
                        { posts[ 0 ].title.rendered }
                    </a>
                ) }
            </div>
        );
    } ),
} );

Vì là một khối động nên không cần ghi đè triển khai lưu mặc định trên máy khách. Thay vào đó, nó cần một thành phần máy chủ. Nội dung phía trước trang web của bạn phụ thuộc vào hàm được gọi bởi thuộc tính render_callback của register_block_type.

Source:

154KB

basic-esnext.zip

Live rendering in the block editor

Gutenberg 2.8 đã thêm khối cho phép kết xuất diễn ra trên máy chủ bằng PHP chứ không phải bằng JavaScript.

import { registerBlockType } from '@wordpress/blocks';
import ServerSideRender from '@wordpress/server-side-render';
import { useBlockProps } from '@wordpress/block-editor';
registerBlockType( 'gutenberg-examples/example-dynamic', {
    apiVersion: 2,
    title: 'Example: last post',
    icon: 'megaphone',
    category: 'widgets',
    edit: function ( props ) {
        const blockProps = useBlockProps();
        return (
            <div { ...blockProps }>
                <ServerSideRender
                    block="gutenberg-examples/example-dynamic"
                    attributes={ props.attributes }
                />
            </div>
        );
    },
} );

PreviousBlock Controls: Block Toolbar and Settings Sidebar NextNested Blocks: Using InnerBlocks

Last updated 2 years ago