Cách điều chỉnh plugin của bạn cho Gutenberg: Phần 1 (API khối)

“Tôi có một plugin,” bạn nói, “làm cách nào để làm cho nó sẵn sàng cho Gutenberg?”

Câu chuyện thẳng thắn; Gutenberg là trải nghiệm trình chỉnh sửa mới trong WordPress, sẽ được hợp nhất thành cốt lõi trong bản phát hành lớn tiếp theo. Rất nhiều plugin không theo kịp điều này sẽ trở nên lỗi thời . Điều này khiến bạn cần phải điều chỉnh plugin của mình cho Gutenberg trước khi quá muộn.

Ai bị ảnh hưởng?

Hầu như tất cả các plugin có liên quan đến trình chỉnh sửa bài đăng sẽ bị ảnh hưởng bởi Gutenberg. Ví dụ: nếu plugin của bạn thêm một nút trong TinyMCE để sau đó đặt shortcode trong trình chỉnh sửa, tin xấu; nó sẽ là kết thúc của nó.

“Tôi có cần điều chỉnh các plugin của mình cho Gutenberg không?”

Vậy những plugin nào cần cập nhật cho Gutenberg? Bất kỳ plugin nào hoạt động với:

• Hộp meta tùy chỉnh
• Mã ngắn
• Các nút TinyMCE
• hoặc bất kỳ tính năng trình chỉnh sửa nào

Mặc dù một số plugin vẫn sẽ hoạt động với Gutenberg, chẳng hạn như một plugin bổ sung thêm một metabox đơn giản, nó sẽ không mang lại trải nghiệm mượt mà cho người dùng của bạn.

Ngay cả các mã ngắn sẽ tiếp tục hoạt động như trước đây, nhưng nó sẽ chỉ là nút văn bản thuần túy trong trình chỉnh sửa, trong khi tất cả các plugin mã ngắn cho Gutenberg sẽ tuân theo giao diện người dùng khối của nó và sẽ dễ sử dụng hơn cho người dùng.

Vì vậy, có, người dùng sẽ thích các plugin được tạo ra cho trải nghiệm Gutenberg. Và những cái ở lại phía sau sẽ được thay thế bằng một plugin của đối thủ cạnh tranh.

Chỉ để cung cấp cho bạn một ý tưởng, đây là một ví dụ về trải nghiệm trình soạn thảo cũ tiêu chuẩn của người dùng trông như thế nào với một plugin của chúng tôi (a) và sau đó trông như thế nào trong Gutenberg (b) – với plugin được tối ưu hóa cho nó.

Đừng sợ! Chúng tôi ở đây để giúp bạn làm cho các plugin của bạn sẵn sàng cho Gutenberg. Có nhiều cách để tích hợp plugin của bạn với Gutenberg, tùy thuộc vào cách plugin của bạn hoạt động, mà chúng ta sẽ thảo luận trong bài viết này.

Những điều đáng biết trước

Gutenberg được viết trên React. Và các plugin Gutenberg được mã hóa bằng JavaScript, đây cũng có thể là một bước chuyển đổi khó khăn cho các nhà phát triển chỉ viết mã bằng PHP. Mặc dù bạn không cần phải có kiến ​​thức về React để tạo plugin cho Gutenberg, nhưng bạn sẽ cần một số hiểu biết cơ bản về JavaScript. Nếu trước đây bạn đã làm việc trên React và JSX thì đó sẽ là cơ sở tương tự cho bạn.

Mặc dù không có đủ tài liệu chính thức cho Gutenberg , nhưng kho Github của nó có rất nhiều thông tin có giá trị cho các nhà phát triển. Nếu bạn muốn tìm hiểu sâu về sự phát triển của Gutenberg, bạn phải để mắt đến mọi thứ đang diễn ra trong kho lưu trữ GitHub của Gutenberg bởi vì dự án đang tiến triển rất nhanh và mọi thứ đang thay đổi từng ngày.

Cách điều chỉnh plugin của bạn cho Gutenberg

API của Gutenberg cung cấp cho chúng tôi nhiều cách để mở rộng trình chỉnh sửa , như API khối, API mã ngắn, v.v. Việc sử dụng API nào phụ thuộc vào loại plugin mà chúng tôi đang xây dựng.

Nếu plugin của bạn là một plugin mã ngắn đơn giản, thì Block API có thể được sử dụng để tạo một khối đẹp cho trình chỉnh sửa. Nhưng nếu plugin của bạn sử dụng các metabox phức tạp trong đó khối không đủ, chúng tôi có thể sử dụng Sidebar API.

Ngoài ra, chúng tôi sẽ sử dụng một loạt các công cụ phát triển JavaScript hiện đại, chẳng hạn như NodeJS, NPM, webpack và ESNext. Chúng tôi sẽ cung cấp cho bạn các tệp ví dụ, vì vậy bạn không cần phải lo lắng về việc thiết lập môi trường phát triển của mình.

Trong bài đăng này, chúng tôi sẽ xem xét cách làm cho plugin của bạn tương thích với Gutenberg bằng cách sử dụng Block API . Chúng ta sẽ đi sâu vào các phương pháp khác (API thanh bên, Bảng xuất bản, Thanh trạng thái và các API tương tự) trong phần hai nếu cần.

Bạn có thể tìm thấy tất cả các ví dụ được đề cập trong kho lưu trữ GitHub này .

Môi trường phát triển Gutenberg

Việc phát triển cho Gutenberg yêu cầu bạn thiết lập nhiều công cụ, chẳng hạn như NPM, webpack, Babel và JSX. Cần rất nhiều thời gian và công sức, vì vậy chúng tôi đã chuẩn bị môi trường cho bạn.

Gutenberg Boilerplate là một plugin với các ví dụ và thiết lập phát triển Gutenberg tối thiểu. Nó chứa một ví dụ về khối và thanh bên. Bạn có thể sử dụng điều này để mở rộng thành khối tùy chỉnh của mình.

Bạn có thể phân nhánh hoặc sao chép kho lưu trữ Gutenberg Boilerplate sang / wp-content / plugins / và sử dụng nó làm môi trường phát triển của bạn.
Sau đó, bạn cần cài đặt NodeJS vào máy để bắt đầu. Điều hướng đến thư mục Gutenberg Boilerplate và chạy cài đặt npm

Từ thời điểm này, bạn cần biết ba lệnh mà bạn sẽ sử dụng trong quá trình phát triển:

• npm install – Cài đặt các phần phụ thuộc của dự án khi bạn sao chép dự án.
• npm run dev – Biên dịch mã trong quá trình phát triển. Bạn cần chạy điều này một lần và nó sẽ tiếp tục theo dõi các thay đổi.
• npm run build – Biên dịch mã cho một bản dựng được tối ưu hóa sau khi quá trình phát triển kết thúc.

API khối

Các khối là yếu tố cơ bản của Gutenberg, nó là một trình soạn thảo dựa trên khối. API khối cho phép bạn tạo khối cho Gutenberg. Bạn có thể tạo các khối có thể hiển thị HTML cơ bản, mã ngắn hoặc thậm chí tạo các khối động để hiển thị, ví dụ: các bài đăng mới nhất của bạn.

Quy trình dựa trên một plugin hiện có

Trong ví dụ của chúng tôi, chúng tôi sẽ sử dụng mã ngắn Click to Tweet vào một khối Gutenberg. Mã ngắn Click to Tweet này hiển thị Hộp Tweet với văn bản của bạn và một nút để tweet văn bản đó. Như thế này:

Mã ngắn của chúng tôi trông giống như sau:

[clicktotweet tweet="Text to be displayed" tweetsent="Text to be tweeted" button="Tweet" theme="click-to-tweet"]

Mã ngắn của chúng tôi có bốn tham số:

• tweet : Văn bản xuất hiện trên trang web của bạn.
• tweetsent : Văn bản gửi đến Twitter.
• button : Văn bản nút Tweet.
• chủ đề : Nhấp-để-tweet hoặc nhấp-để-tweet-alt làm chủ đề hộp.

Điều chỉnh các plugin cho Gutenberg với Block API

Có hai cách để thực hiện nó với Gutenberg, hoặc chúng ta có thể hiển thị HTML cho front-end hoặc chúng ta có thể sử dụng khối Gutenberg của chúng tôi để kết xuất shortcode cho front-end. Đối với bài viết này, chúng tôi sẽ làm phần sau.

Tất cả mã có sẵn trong kho plugin Hello Gutenberg trên GitHub . Bạn có thể sao chép kho lưu trữ để xem plugin đang hoạt động hoặc để sửa đổi mã.

Enqueue script / styles for Gutenberg

Đầu tiên, chúng ta cần xếp hàng các tập lệnh và kiểu của mình vào trình soạn thảo Gutenberg bằng cách sử dụng enqueue_block_assets:

/**
 * Enqueue front end and editor JavaScript and CSS
 */
function hello_gutenberg_scripts() {
    $blockPath = '/dist/block.js';
    $stylePath = '/dist/block.css';

    // Enqueue the bundled block JS file
    wp_enqueue_script(
        'hello-gutenberg-block-js',
        plugins_url( $blockPath, __FILE__ ),
        [ 'wp-i18n', 'wp-blocks', 'wp-editor', 'wp-components' ],
        filemtime( plugin_dir_path(__FILE__) . $blockPath )
    );

    // Enqueue frontend and editor block styles
    wp_enqueue_style(
        'hello-gutenberg-block-css',
        plugins_url( $stylePath, __FILE__ ),
        '',
        filemtime( plugin_dir_path(__FILE__) . $stylePath )
    );

}

// Hook scripts function into block editor hook
add_action( 'enqueue_block_assets', 'hello_gutenberg_scripts' );

Chúng tôi đã thêm bốn phần phụ thuộc vào tập lệnh của mình mà chúng tôi sẽ sử dụng trong khối của mình. Trước tiên, hãy tìm hiểu về những phụ thuộc này:
wp-i18n là phiên bản của các hàm quốc tế hóa của Gutenberg, chẳng hạn như __ () . wp-blocks được sử dụng cho chức năng registerBlockType đăng ký khối của bạn. Chúng tôi sử dụng tập lệnh wp-editor và wp-components cho các thành phần khác nhau trong khối của chúng tôi.

Bây giờ chúng tôi đã xếp hàng các tài sản của bạn, chúng tôi có thể bắt đầu viết khối của mình trong tệp / src / block.js .

Nhập phụ thuộc

Nếu bạn đang sử dụng Gutenberg Boilerplate thì tệp block.js của bạn phải có cấu trúc khối cơ bản mà bạn có thể sử dụng để tạo các plugin cho Gutenberg:

/**
 * Internal block libraries
 */
const { __ } = wp.i18n;

const { registerBlockType } = wp.blocks;

/**
 * Register block
 */
export default registerBlockType( 'gutenberg-boilerplate/block', {
    // Block Title
    title: __( 'Gutenberg Boilerplate' ),
    // Block Description
    description: __( 'An example block.' ),
    // Block Category
    category: 'common',
    // Block Icon
    icon: 'admin-site',
    // Block Keywords
    keywords: [
        __( 'Boilerplate' ),
        __( 'Hello World' ),
        __( 'Example' ),
    ],
    attributes: {
    },
    // Defining the edit interface
    edit: props => {
        return (
            <h2>{ __( 'Hello Backend' ) }</h2>
        );
    },
    // Defining the front-end interface
    save: props => {
        return (
            <h2>{ __( 'Hello Frontend' ) }</h2>
        );
    },
});

Bạn có thể chạy npm run dev để bắt đầu biên dịch mã của chúng tôi trong thời gian thực.

Đầu tiên, chúng tôi sẽ nhập tất cả các thành phần và thư viện mà chúng tôi cần cho khối ở trên cùng:

/**
 * Block dependencies
 */

import classnames from 'classnames';

/**
 * Internal block libraries
 */
const { __ } = wp.i18n;

const { registerBlockType } = wp.blocks;

const {
    RichText,
    InspectorControls,
    BlockControls,
} = wp.editor;

const {
    PanelBody,
    TextareaControl,
    TextControl,
    Dashicon,
    Toolbar,
    Button,
    Tooltip,
} = wp.components;

Đầu tiên nhập các tên lớp mà chúng tôi đã cài đặt bằng npm để sử dụng nhiều lớp trong mã của chúng tôi, vì JSX không cho phép nhiều lớp trong các phần tử.

Chúng ta sẽ tìm hiểu về các thành phần khác mà chúng ta đã nhập khi chúng ta sử dụng chúng.

Xác định các thuộc tính

Bây giờ chúng ta sẽ xác định bốn thuộc tính cho khối Gutenberg của chúng ta, giống như shortcode của chúng ta:

attributes: {
    tweet: {
        type: 'string',
    },
    tweetsent: {
        type: 'string',
    },
    button: {
        type: 'string',
        default: __( 'Tweet' ),
    },
    theme: {
        type: 'boolean',
        default: false,
    },
},

Như bạn có thể thấy, tất cả các thuộc tính đều giống như shortcode của chúng tôi. Tất cả các thuộc tính đều có một khóa kiểu, khóa này cho Gutenberg biết kiểu dữ liệu của nó. Bạn có thể sử dụng chuỗi, số, boolean & đối tượng làm các kiểu được chấp nhận.

Một số thuộc tính cũng chứa giá trị mặc định. Các thuộc tính cũng có thể có các thuộc tính khác, chẳng hạn như nguồn và bộ chọn, mà chúng tôi sẽ không sử dụng trong ví dụ của mình, nhưng bạn có thể tìm hiểu thêm về chúng tại đây .

Chỉnh sửa giao diện

Bây giờ chúng ta sẽ xây dựng giao diện chỉnh sửa khối của chúng ta, đây sẽ là màn hình hiển thị – người dùng sẽ nhìn thấy nó trong khi chỉnh sửa khối trong Gutenberg.

Để có được ý tưởng cơ bản, trước tiên chúng ta có thể mã hóa khối của mình và xây dựng dựa trên nó bằng cách thay thế vùng sau trong mã của chúng ta:

// Defining the edit interface
edit: props => {
    return (
        <h2>{ __( 'Hello Backend' ) }</h2>
    );
},

Với mã sau:

// Defining the edit interface
edit: props => {
    return [
        <div className={ props.className }>
            <div className="click-to-tweet">
                <div className="ctt-text">Pumpkins and Penguins</div>
                <p><a href="https://twitter.com/intent/tweet?text=Pumpkins%20and%20Penguins" className="ctt-btn">Tweet</a></p>
            </div>
        </div>
    ];
},

Điều này sẽ cung cấp cho bạn một ý tưởng về kết quả cuối cùng của chúng tôi. Nó sẽ trông giống như thế này:

Phần tử đầu tiên của khối là vùng văn bản tweet. Chúng tôi sẽ thay thế nó bằng một trường văn bản có thể chỉnh sửa, tương tự như khối tiêu đề của Gutenberg.

Chúng tôi sẽ sử dụng thành phần RichText mà chúng tôi đã nhập trước đó để thay thế văn bản được mã hóa cứng của chúng tôi.

<div className="ctt-text">
    <RichText
        format="string"
        formattingControls={ [] }
        placeholder={ __( 'Tweet, tweet!' ) }
        onChange={ onChangeTweet }
        value={ props.attributes.tweet }
    />
</div>

Thành phần RichText của chúng tôi có năm đối số. định dạng là một chuỗi, vì chúng ta sẽ sử dụng mã ngắn của mình để hiển thị các phần tử trong giao diện người dùng. Nếu chúng ta muốn sử dụng một bộ chọn trong thuộc tính của mình, thì định dạng sẽ là một mảng.

RichText có một số tùy chọn định dạng theo mặc định, như in đậm và nghiêng, mà chúng tôi đã vô hiệu hóa bằng cách chuyển một mảng trống trong đối số formattingControls .

placeholder là văn bản của placeholder khi không có văn bản nào trong trường và onChange sẽ kích hoạt chức năng onChangeTweet khi một sự kiện thay đổi diễn ra.

Cuối cùng, giá trị sẽ là giá trị của trường của chúng ta, sẽ được lấy từ thuộc tính tweet mà chúng ta đã xác định trước đó.

Khi chúng ta đã xác định vùng RichText của mình, chúng ta cần xây dựng hàm onChangeTweet sẽ kích hoạt khi giá trị thay đổi trong trường văn bản của chúng ta.

// Defining the edit interface
edit: props => {
    const onChangeTweet = value => {
        props.setAttributes( { tweet: value } );
    };
    return [
    ...rest of the code

Chúng tôi chuyển giá trị của trường RichText vào hàm onChangeTweet , hàm này sử dụng hàm props.setAttributes để cập nhật giá trị của thuộc tính tweet.

Bạn sẽ thấy sức mạnh của Gutenberg ngay bây giờ khi bạn sử dụng khối của mình.

Thật tuyệt vời phải không?

Thanh tra khối

Khi xây dựng các plugin cho Gutenberg, bạn không cần phải phát minh lại bánh xe mỗi lần để tạo bảng tùy chọn cho các plugin của mình. Gutenberg cung cấp cho chúng tôi một cách đơn giản để cho phép tùy chỉnh khối và đảm bảo rằng mọi người dùng đều có trải nghiệm nhất quán với các mẫu giao diện người dùng được tích hợp sẵn.

Tương tự như thành phần RichText, thành phần InspectorControls thêm một thanh bên khi khối được chọn. Một cái gì đó như thế này:

Chúng tôi cũng sẽ sử dụng TextareaControl và TextControl để thêm một vùng văn bản và trường nhập văn bản vào vùng Thanh tra của chúng tôi.

Chúng tôi sẽ thêm mã sau vào báo cáo trả hàng của bạn:

!! props.isSelected && (
    <InspectorControls key="inspector">
        <PanelBody title={ __( 'Tweet Settings' ) } >
            <TextareaControl
                label={ __( 'Tweet Text' ) }
                value={ props.attributes.tweetsent }
                onChange={ onChangeTweetSent }
                help={ __( 'You can add hashtags and mentions here that will be part of the actual tweet, but not of the display on your post.' ) }
            />
            <TextControl
                label={ __( 'Button Text' ) }
                value={ props.attributes.button }
                onChange={ onChangeButton }
            />
        </PanelBody>
    </InspectorControls>
),

props.isSelected kiểm tra để đảm bảo rằng Trình kiểm tra chỉ xuất hiện khi khối được chọn.
Các thành phần TextareaControl và TextControl, tương tự như RichText, có giá trị và phương thức onChange.

Chúng tôi cũng cần thay đổi mã hiển thị khối của bạn để phù hợp với những thay đổi mới. Trong trường hợp của chúng tôi, chúng tôi chỉ cần thêm Văn bản Nút vào khối của mình vì Văn bản Tweet sẽ được thêm vào liên kết, vì vậy chúng tôi không cần hiển thị nó trong phần phụ trợ của mình.

Bạn có thể thay thế siêu liên kết trong mã ban đầu của chúng tôi bằng như sau:

<a className="ctt-btn">
    { props.attributes.button }
</a>

Như đã đề cập trước đây, chúng tôi đang xóa siêu liên kết khỏi mã của mình vì chúng tôi không cần hiển thị nó trong phần phụ trợ. Điều này sẽ làm cho khối của chúng tôi trông giống như vậy:

Trình kiểm tra khối có thể là một công cụ mạnh cho khối của bạn. Nếu plugin của bạn có các tùy chọn nâng cao quá phức tạp đối với khu vực trình chỉnh sửa, thì bạn có thể đặt chúng vào khu vực Thanh tra.

Chúng tôi sẽ thêm một tùy chọn cuối cùng vào khối của chúng tôi để kết thúc phần JavaScript trong phần tiếp theo.

Chặn Thanh công cụ

Thanh công cụ khối là một thành phần giao diện người dùng được tạo sẵn khác mà chúng ta có thể sử dụng để thêm nhiều tùy chọn hơn cho khối của mình. Nó sẽ xuất hiện phía trên khối của bạn khi bạn chọn nó. Thí dụ:

Lý tưởng nhất, Thanh công cụ khối nên chứa các điều khiển chính của khối của bạn, với Thanh tra lưu trữ các điều khiển phụ. Tuy nhiên, điều đó còn gây tranh cãi và phụ thuộc vào khối của bạn.

Chúng tôi sẽ sử dụng khu vực Thanh công cụ khối để lưu trữ kiểm soát kiểu thay thế của chúng tôi.

Tương tự như Trình kiểm tra khối, chúng ta cần thêm mã sau vào câu lệnh trả về để thêm Thanh công cụ chặn vào khối của chúng ta:

!! props.isSelected && (
    <BlockControls key="custom-controls">
        <Toolbar
            className='components-toolbar'
        >
            <Tooltip text={ __( 'Alternative Design' ) }>
                <Button
                    className={ classnames(
                        'components-icon-button',
                        'components-toolbar__control',
                        { 'is-active': props.attributes.theme },
                    ) }
                    onClick={ toggletheme }
                >
                    <Dashicon icon="tablet" />
                </Button>
            </Tooltip>
        </Toolbar>
    </BlockControls>
),

Chúng tôi sử dụng các thành phần BlockControls và Toolbar để thêm một thanh công cụ vào khối của chúng tôi. Tương tự như Trình kiểm tra khối, props.isSelected đảm bảo rằng thanh công cụ của chúng ta chỉ xuất hiện khi chúng ta tập trung vào khối của mình.
Chúng tôi cũng sử dụng các thành phần Chú giải công cụ và Nút để kiểm soát của chúng tôi. Thành phần chú giải công cụ được bao quanh thành phần Nút để đảm bảo có chú giải công cụ khi bạn di chuột qua điều khiển để cung cấp cho bạn nhiều ngữ cảnh hơn.

Thành phần nút đang sử dụng mô-đun tên lớp mà chúng tôi đã nhập trước đó trong bài viết. Chúng tôi đã sử dụng chức năng tên lớp để cung cấp ba lớp cho quyền kiểm soát của chúng tôi. Lớp thứ ba, đang hoạt động , chỉ xuất hiện khi giá trị thuộc tính chủ đề của chúng ta là true.

Hàm onChange của nó chuyển đổi thuộc tính chủ đề thành true / false. Cuối cùng, các thành phần Dashicon được sử dụng để hiển thị một biểu tượng để chúng ta kiểm soát.

Chúng tôi cũng sẽ phải thay đổi mã khối của mình để mã hoạt động với các thay đổi. Chúng ta cần thay thế dòng sau:

<div className="click-to-tweet">

Với:

<div className={ ( props.attributes.theme ? 'click-to-tweet-alt' : 'click-to-tweet' ) }>

Chúng tôi đang kiểm tra xem thuộc tính chủ đề là đúng hay sai và chỉ định một lớp cho khối của chúng tôi cho phù hợp.

Bây giờ khối của bạn sẽ trông giống như sau:

Chúng tôi đã hoàn thành phần bên JavaScript của khối Gutenberg của chúng tôi. Bạn có thể tìm thấy toàn bộ mã nguồn của tệp tại đây .

Bây giờ chúng ta sẽ hoàn thành khối của mình bằng cách xử lý đầu ra phía máy chủ.

Kết xuất phía máy chủ

Gutenberg cho phép bạn sử dụng kết xuất phía máy chủ để hiển thị các khối của bạn trên giao diện người dùng. Kết xuất phía máy chủ đó giúp chúng tôi có thể tạo khối cho các mã ngắn.

Đầu tiên, chúng ta sẽ thực hiện phương thức lưu để trả về null bằng cách thay thế nó bằng đoạn mã sau:

// Defining the front-end interface
save() {
    // Rendering in PHP
    return null;
},

Chúng tôi sẽ sử dụng hàm register_block_type PHP để đăng ký loại khối của chúng tôi trong PHP:

if ( function_exists( 'register_block_type' ) ) {
    // Hook server side rendering into render callback
    register_block_type(
        'hello-gutenberg/click-to-tweet', [
            'render_callback' => 'hello_gutenberg_block_callback',
            'attributes'      => array(
                'tweet'  => array(
                    'type' => 'string',
                ),
                'tweetsent' => array(
                    'type' => 'string',
                ),
                'button'    => array(
                    'type'  => 'string',
                    'default' => 'Tweet',
                ),
                'theme'  => array(
                    'type'  => 'boolean',
                    'default' => false,
                ),
            ),
        ]
    );
}

Chức năng register_block_type của chúng tôi . Đầu tiên, chúng tôi chuyển tên khối của chúng tôi cho nó, cùng với một loạt các đối số.
Đối số đầu tiên là hàm render_callback , hàm này gọi hàm hello_gutenberg_block_callback của chúng tôi để kết xuất phía máy chủ.

Sau khi gọi lại kết xuất của chúng tôi, chúng tôi chuyển các thuộc tính dưới dạng một mảng, tương tự như tệp block.js, mà chúng tôi sử dụng trong hàm gọi lại kết xuất của mình.

Hàm gọi lại kết xuất của chúng tôi trông giống như sau:

function hello_gutenberg_block_callback( $attr ) {
    extract( $attr );
    if ( isset( $tweet ) ) {
        $theme = ( $theme === true ? 'click-to-tweet-alt' : 'click-to-tweet' );
        $shortcode_string = '[clicktotweet tweet="%s" tweetsent="%s" button="%s" theme="%s"]';
        return sprintf( $shortcode_string, $tweet, $tweetsent, $button, $theme );
    }
}

Chúng tôi trích xuất tất cả các thuộc tính và sau đó trả lại nó bên trong shortcode của chúng tôi. Đó là tất cả những gì cần thiết để điều chỉnh các plugin shortcode của bạn cho Gutenberg.

Bạn có thể tìm thấy tất cả mã được sử dụng trong bài viết này trong kho lưu trữ hello-gutenberg này .

Trong phần tiếp theo, chúng ta sẽ xem xét các cách khác để điều chỉnh các plugin hiện có cho Gutenberg, bao gồm cả API Sidebar.

Nếu bạn có bất kỳ câu hỏi nào về cách điều chỉnh plugin của mình cho Gutenberg, vui lòng hỏi họ trong phần nhận xét!