我的一切都基于此：https://gist.github.com/pento/cf38fd73ce0f13fcf0f0ae7d6c4b685d 只是切换没有得到切换的视觉表示。有关于这个的教程吗？我发现的一切都是复杂的“真实的”阻止了大量的进口，而这种react风格返回了我现在不需要的东西。我只是想知道如何让开关工作。

PHP

<?php
function register_gb_block() {

    // ...

    register_assets();
    register(
        [
            \'handle\' => \'arve-block\',
            \'src\'    => plugins_url( \'dist/js/test-block.js\', PLUGIN_FILE ),
            \'deps\'   => [ \'wp-blocks\', \'wp-element\', \'wp-components\', \'wp-editor\' ],
            \'ver\'    => ver( VERSION, \'dist/js/test-block.js\', PLUGIN_FILE ),
            \'footer\' => false
        ]
    );

    wp_localize_script( \'arve-block\', \'ARVEsettings\', $sc_settings );

    // Register our block, and explicitly define the attributes we accept.
    register_block_type(
        \'nextgenthemes/arve-block\',
        [
            \'attributes\'      => array(
                \'foo\' => array(
                    \'type\' => \'string\',
                ),
                \'toggle\' => array(
                    \'type\' => \'boolean\',
                ),
            ),
            \'editor_script\'   => \'arve-block\',
            \'editor_style\'    => \'advanced-responsive-video-embedder\',
            \'render_callback\' => __NAMESPACE__ . \'\\shortcode\'
        ]
    );
}

JS公司

// License: GPLv2+ based on: https://gist.github.com/pento/cf38fd73ce0f13fcf0f0ae7d6c4b685d

const el = wp.element.createElement,
    registerBlockType = wp.blocks.registerBlockType,
    ServerSideRender = wp.components.ServerSideRender,
    TextControl = wp.components.TextControl,
    ToggleControl = wp.components.ToggleControl,
    InspectorControls = wp.editor.InspectorControls;

/*
 * Here\'s where we register the block in JavaScript.
 *
 * It\'s not yet possible to register a block entirely without JavaScript, but
 * that is something I\'d love to see happen. This is a barebones example
 * of registering the block, and giving the basic ability to edit the block
 * attributes. (In this case, there\'s only one attribute, \'foo\'.)
 */
registerBlockType( \'nextgenthemes/arve-block\', {
    title: \'PHP Block\',
    icon: \'megaphone\',
    category: \'widgets\',

    /*
     * In most other blocks, you\'d see an \'attributes\' property being defined here.
     * We\'ve defined attributes in the PHP, that information is automatically sent
     * to the block editor, so we don\'t need to redefine it here.
     */

    edit: ( props ) => {
        return [
            /*
             * The ServerSideRender element uses the REST API to automatically call
             * php_block_render() in your PHP code whenever it needs to get an updated
             * view of the block.
             */
            el( ServerSideRender, {
                block: \'nextgenthemes/arve-block\',
                attributes: props.attributes,
            } ),
            /*
             * InspectorControls lets you add controls to the Block sidebar. In this case,
             * we\'re adding a TextControl, which lets us edit the \'foo\' attribute (which
             * we defined in the PHP). The onChange property is a little bit of magic to tell
             * the block editor to update the value of our \'foo\' property, and to re-render
             * the block.
             */
            el( InspectorControls, {},
                el(
                    TextControl,
                    {
                        label: \'Foo\',
                        value: props.attributes.foo,
                        onChange: ( value ) => {
                            props.setAttributes( { foo: value } );
                        },
                    }
                ),
                el(
                    ToggleControl,
                    {
                        label: \'Toogle\',
                        value: props.attributes.toggle,
                        onChange: ( value ) => {
                            props.setAttributes( { toggle: value } );
                        },
                    }
                ),
            ),
        ];
    },

    // We\'re going to be rendering in PHP, so save() can just return null.
    save: () => {
        return null;
    },
} );