Gutenberg sidebar show input field on toggle

Question

I have been trying to learn about Gutenberg, React, ES5, ES6, Babel, Webpack JSX for the last few days. I must say it feels like I dove into some sort of wormhole... The only thing I wanted was to add a toggle and an input field to the sidebar and I did get this working reading the sidebar tutorial on GitHUB. and this tutorial

What I can't seem to figure out is how to initially hide the input field and then show it when the toggle is switched on.

I used to just do this with CSS and set it to display:none; and then toggle it with jQuery.

I have read that it is better to not do this and instead create the input field when the toggle is switched on.

I have read other peoples questions regarding this topic, like this one at stackoverflow but because the tutorial (Wordpress GitHUB) mentioned earlier doesn't use JSX I'm not sure how to translate the answers given.

Really I'm just taking babysteps here... So I'd like to find a solution which is close to what I'm used to do with jQuery.

sidebar_wordpress.css

.dev-sidebar-toggle{
    padding:15px;
}
.dev-sidebar-keywords{
    display:none;
    padding:15px;
}

sidebar_wordpress.js

( function( wp ) {
    var registerPlugin  = wp.plugins.registerPlugin;
    var PluginSidebar   = wp.editPost.PluginSidebar;
    var el              = wp.element.createElement;
    var Textinput       = wp.components.TextControl;
    var Toggleinput     = wp.components.ToggleControl;
    var withSelect      = wp.data.withSelect;
    var withDispatch    = wp.data.withDispatch;
    var compose         = wp.compose.compose;

    var MetaBlockField = compose(
        withDispatch( function( dispatch, props ) {
            return {
                setMetaFieldValue: function( value ) {
                    dispatch( 'core/editor' ).editPost(
                        { meta: { [ props.fieldName ]: value } }
                    );
                }
            }
        } ),
        withSelect( function( select, props ) {
            return {
                metaFieldValue: select( 'core/editor' )
                    .getEditedPostAttribute( 'meta' )
                    [ props.fieldName ],
            }
        } )
    )( function( props ) {
        return el( Textinput, {
            label: 'keywords :',
            value: props.metaFieldValue,
            onChange: function( content ) {
                props.setMetaFieldValue( content );
            },
        } );
    } );

    
    var MetaBlockToggle = compose(
        withDispatch( function( dispatch, props ) {
            return {
                setMetaFieldValue: function( value ) {
                    dispatch( 'core/editor' ).editPost(
                        { meta: { [ props.fieldName ]: value } }
                    );
                }
            }
        } ),
        withSelect( function( select, props ) {
            return {
                metaFieldValue: select( 'core/editor' )
                    .getEditedPostAttribute( 'meta' )
                    [ props.fieldName ],
            }
        } )
    )( function( props ) {
        return el( Toggleinput, {
            label: 'use keywords?',
            checked: props.metaFieldValue,
            onChange: function( content ) {
                props.setMetaFieldValue( content );
            },
        } );
    } );

    
    registerPlugin( 'my-plugin-sidebar', {
        render: function() {
            return el( PluginSidebar,
                {
                    name: 'my-plugin-sidebar',
                    icon: 'admin-post',
                    title: 'Here is my title',
                },
                el( 'div',
                    { className: 'dev-sidebar-toggle' },
                    el( MetaBlockToggle,
                        { fieldName: 'sidebar_toggle_field' }
                    ),
                ),
                el( 'div',
                    { className: 'dev-sidebar-keywords' },
                    el( MetaBlockField,
                        { fieldName: 'sidebar_input_field' }
                    )
                )
            );
        }
    } );
} )( window.wp );

funtions.php

function sidebar_plugin_register() {
    wp_register_script(
        'plugin-sidebar-js',
        get_stylesheet_directory_uri() . '/sidebar_wordpress.js',
        array(
            'wp-plugins',
            'wp-edit-post',
            'wp-element',
            'wp-components',
            'wp-data',
            'wp-compose',
        )
    );
    wp_register_style(
        'plugin-sidebar-css',
        get_stylesheet_directory_uri() . '/sidebar_wordpress.css'
    );

    register_post_meta( 'post', 'sidebar_input_field', array(
    'show_in_rest' => true,
    'single' => true,
    'type' => 'string',
    ) );

    register_post_meta( 'post', 'sidebar_toggle_field', array(
        'type'      => 'boolean', // because it is a toggle
        'single'    => true,
        'show_in_rest'  => true,
    ) );
}
add_action( 'init', 'sidebar_plugin_register' );

function sidebar_plugin_script_enqueue() {
    wp_enqueue_script( 'plugin-sidebar-js' );
}
add_action( 'enqueue_block_editor_assets', 'sidebar_plugin_script_enqueue' );

function sidebar_plugin_style_enqueue() {
    wp_enqueue_style( 'plugin-sidebar-css' );
}
add_action( 'enqueue_block_assets', 'sidebar_plugin_style_enqueue' );

Answer 1

So meanwhile I have learned some more about React and Gutenberg and the answer was really simple. There are better ways but show and hiding with CSS works. So it's a first step in the right direction I think.

get the status of the toggle in the withSelect part of the input field,

checkToggle : select( 'core/editor' ).getEditedPostAttribute( 'meta' )[ 'sidebar_toggle_field' ],

then set the className accordingly,

className: props.checkToggle ? ('dev-sidebar-keywords-show') : ('dev-sidebar-keywords-hide'),

..dev-sidebar-toggle{
    padding:15px;
}
.dev-sidebar-keywords-show{
    display: block;
    padding: 15px;
}
.dev-sidebar-keywords-hide{
    display: none;
    padding: 15px;
}

var MetaBlockField = compose(
        withDispatch( function( dispatch, props ) {
            return {
                setMetaFieldValue: function( value ) {
                    dispatch( 'core/editor' ).editPost(
                        { meta: { [ props.fieldName ]: value } }
                    );
                }
            }
        } ),
        withSelect( function( select, props ) {
            return {
                metaFieldValue: select( 'core/editor' ).getEditedPostAttribute('meta' )[ props.fieldName ],
                checkToggle : select( 'core/editor' ).getEditedPostAttribute( 'meta' )[ 'sidebar_toggle_field' ],
            }
        } )
    )( function( props ) {
        return el( Textinput, {
            label: 'keywords :',
            value: props.metaFieldValue,
            className: props.checkToggle ? ('dev-sidebar-keywords-show') : ('dev-sidebar-keywords-hide'),
            onChange: function( content ) {
                props.setMetaFieldValue( content );
            },
        } );
    } );