Creating conditional blocks for WordPress Gutenberg

Question

I've been reviewing tutorials on creating blocks for Gutenberg but I am unclear how to handle a particular use case - conditional blocks.

I am looking at creating a custom post type for which I will register my own block type. These blocks will only be displayed if certain conditions are true. These conditions will be either boolean flags or integer comparisons (the values coming from wither custom user variables (meta) or session values).

If all conditions are true the block should be rendered but if one or more are false then (obviously) nothing is shown.

I cannot quite get my head around where I would place the logic for this. Admittedly my grasp of this new Gutenberg system is a bit shaky which is probably why I need some assistance.

For example:

<p logic="IF(is_logged_in,SHOW,HIDE)">My wonderful secret bit just for members.</p>

Answer 1

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".

Answer 2

I've worked a lot on Conditional Blocks, the hardest part is finding where to start with Gutenberg.

You'd want to add custom attributes (settings) to each block using JavaScript. Everything is stored in block attributes.

Here's a good example of adding additional settings to existing blocks. https://jeffreycarandang.com/extending-gutenberg-core-blocks-with-custom-attributes-and-controls/

Once the attributes are saved to the block then you can pick up on them in PHP using the "render_block" filter hook. Each block will run through this filter, it's your chance to alter the block content based on the attributes.

https://developer.wordpress.org/reference/hooks/render_block/

Here's a very simplified example.$block_content is the html that will be displayed. $block contains the block data.

function my_conditional_render( $block_content, $block ) {
    if ( $block['attrs']['myCustomToggle'] === true ) {
      return ''; // Don't render this block.
    }
 
    return $block_content;
}
 
add_filter( 'render_block', 'my_conditional_render', 10, 2 );

This method is very similar to how I've created the plugin https://conditionalblocks.com/ with a bunch of pre-made conditions 😊

Answer 3

If you want to give the editor control over what blocks are displayed to logged in users or not you could use this plugin: https://wordpress.org/plugins/block-options/

Then you do not need to code it into your block as every block will have the option of being only for your members or not.