8

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>
5
  • Do you mean a block which is already in the post content, or instead in the appender list, or a block which is part of the page template? If you could give the exact case it might be easier to figure out a solution.
    – Alvaro
    Nov 30, 2018 at 16:08
  • Just a block which is part of the post content. For example IF (SomeCondition!=TRUE): Don't show this paragraph. Dec 7, 2018 at 4:35
  • 2
    Maybe this approach can help?
    – birgire
    Jun 10, 2019 at 11:25
  • 1
    I think that will do nicely. Jun 10, 2019 at 11:36
  • 1
    You can also nest blocks ( make the child blocks loaded only within the parent, creating a condition ), have a look at the columns & column blocks in core for more info. The ALLOWED_BLOCKS constant can be used to control which blocks are allowed to be used inside of a block
    – admcfajn
    Jul 21, 2019 at 18:19

3 Answers 3

5

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

3

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 😊

0

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.

2
  • That's nice, for those that this is all they want. I am specifically looking for ways to create conditional logic. Jul 4, 2019 at 7:30
  • Plugins are not a solution. They do not improve the problem or help people learn how to resolve problems.
    – marvinpoo
    Feb 24, 2021 at 14:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.