#StackBounty: #javascript #block-editor #user-interface How to get the ToggleControl Gutenberg component working for a PHP Block

Bounty: 50

I got everything working based on this: https://gist.github.com/pento/cf38fd73ce0f13fcf0f0ae7d6c4b685d its just that the toggle does not get the visual representation of being toggled on. Any tutorials on this? Everything I find is complicated “real” blocks stuff tons of imports and this react style returns and things I do not need at this point. I just want to know how to get the toggle to work.

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'
        ]
    );
}

The register is just a wrapper around wp_register_script

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;
    },
} );


Get this bounty!!!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.