Creating conditional blocks for WordPress Gutenberg

In the edit method for your custom block, when rendering the components you can use the “conditional + &&” pattern:

    <PanelBody title={ __( 'My Panel' ) } >

        { myCustomBool &&
            <MyComponent
                value={theValue}
                onChange={ value => {
                    myChangeCallback(value);
                } }
            />
        }
        { 'marmots' !== myCustomThing &&
            <MyOtherComponent
                value={theValue}
                onChange={ value => {
                    myOtherCallback(value);
                } }
            />
        }

    </PanelBody>

In the above example, the conditionals just before the “&&” will determine whether the component that follows will be rendered.

This is sometimes referred to as a “short circuit conditional”.