问如何使用Gutenberg创建wordpress动态插件

EN

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "create-block/dynamic-rendering",
    ...
    "attributes": {
        "gender": {
            "type": "string",
            "default": "any"
        },
        "nationality": {
            "type": "string",
            "default": "AU"
        }
    }
}

import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { Panel, PanelBody, Disabled, SelectControl } from '@wordpress/components';
import ServerSideRender from '@wordpress/server-side-render';
...
export default function Edit({ attributes, setAttributes }) {

    const { gender, nationality } = attributes;

    return (
        <div {...useBlockProps()}>
            <InspectorControls>
                <Panel>
                    <PanelBody title="Random User API Options">
                        <SelectControl
                            label="Gender"
                            value={gender}
                            options={[
                                { label: 'Any', value: 'any' },
                                { label: 'Male', value: 'male' },
                                { label: 'Female', value: 'female' },
                            ]}
                            onChange={(value) => setAttributes({ gender: value })}
                        />
                        <SelectControl
                            label="Nationality"
                            value={nationality}
                            options={[
                                { label: 'Australian', value: 'AU' },
                                { label: 'Brazilian', value: 'BR' },
                                { label: 'Canadian', value: 'CA' },
                            ]}
                            onChange={(value) => setAttributes({ nationality: value })}
                        />
                    </PanelBody>
                </Panel>
            </InspectorControls>
            <Disabled>
                <ServerSideRender
                    block="create-block/dynamic-rendering"
                    attributes={attributes}
                />
            </Disabled>
        </div>
    );
}

export default function save() {
    // nothing to save, as block is dynamic..
}

<?php
...
/**
 * Registers the block using the metadata loaded from the `block.json` file.
 * Behind the scenes, it registers also all assets so they can be enqueued
 * through the block editor in the corresponding context.
 *
 * @see https://developer.wordpress.org/reference/functions/register_block_type/
 */
function create_block_dynamic_rendering_block_init()
{
    register_block_type(__DIR__ . '/build', array(
        // Add a render_callback to handle dynamic rendering of block with PHP
        'render_callback' => 'create_block_dynamic_rendering_output'
    ));
}
add_action('init', 'create_block_dynamic_rendering_block_init');

/**
 * Server-side rendering function for the `create-block/dynamic-rendering` block.
 * Requests a random user from external API using the values saved in the block attributes
 *
 * @see https://developer.wordpress.org/apis/handbook/making-http-requests/getting-data-from-an-external-service/
 */
function create_block_dynamic_rendering_output($attributes)
{
    $response = wp_remote_get("https://randomuser.me/api/?gender={$attributes['gender']}&nat={$attributes['nationality']}");
    $http_code = wp_remote_retrieve_response_code($response);

    return $http_code == 200 ? wp_remote_retrieve_body($response) : "Something went wrong..";
}