Hide Gutenberg Block Based on ACF Field Value
In this tutorial, I’m going to walk you through Block Options Plugin’s integration with Advanced Custom Fields. Using these free WordPress plugins, you can show or hide Gutenberg block based on ACF value and specific condition.
Step 1
You need to download and install both Block Options and Advanced Custom Fields plugins. Alternatively, you can Block Options get it on the plugin directory.
Step 2
Make sure you create ACF fields; then, go to Settings > Block Options and activate Advanced Custom Fields Support.
Step 3
Now create or edit any post/page on the Gutenberg Editor. Click any block, and on the sidebar settings, scroll down to Block Option’s Advanced Custom Fields panel section.
- Select Show or Hide Block if the condition is met.
- Choose the ACF field that you want to connect.
- Select condition to either Equal To, Not Equal To, Contains, Does Not Contain, Is Empty or Is Not Empty.
- Then set the conditional value.
That’s it! Pretty simple, isn’t it? If you have any suggestions, please leave them through the comment section below. You can also explore other Block Options features, and here are the guides that will help you out.
- How to Show or Hide Gutenberg Blocks to Logged In Users in WordPress
- How to Hide WordPress Gutenberg Editor Blocks on Mobile Devices
Optional for Developers
If you are looking for other ways to manage any Gutenberg Blocks, you can use the Display Logic options. This will allow you to use PHP conditional functions to manage block’s visibility. With this, you’ll have full control over your Gutenberg Blocks.
Thank you. But i expected something else in conjunction with ACF:
i need to add one checkbox or input field to each block where i can save a value. For instance a custom classname. Then based on this classname, i want to wrap the whole block(-row) in a div with the custom class!
so i thought with you plugin i can add a new input field to each block.