Learn how to group visibility settings using the Block Visibility Groups module.
We’ll cover the following:
- How to download and install the module
- Create visibility group
- Assign visibility group to block
Composer command
composer require drupal/block_visibility_groupsTranscript
Trainer (00:00):
In a previous video, you learned how to control the display of a block using visibility settings, and Drupal out of the box comes with three conditions, content types, pages and roles. But now, I want to show you how to use a third party module called block visibility groups. The module allows you to group visibility settings and assign them to blocks. This makes managing visibility settings much easier because you can do it from a single page, and the module allows you to control whether all conditions need to return true or only one needs to return true. Let’s imagine we want blocks to only be displayed on articles and pages starting with /user/ and for anonymous users. Now, what if we want to apply the same visibility settings across multiple blocks? Well, we’d have to configure each block individually, which is a very manual process. And if you want to update these settings on all the blocks in the future, you would have to do it manually as well.
Trainer (01:13):
The block visibility groups module lets you create a group to store all the visibility settings. Then on the block configuration page, you select which visibility group to use, and the same group can be used across multiple blocks. Let’s start things off by downloading the module, so open up your terminal and then type in composer require drupal/block_visibility_groups. Then go back into your site, then go to extend and search for block visibility groups, and then check the module and click on instal. Now go to structure, block layout, and you should see a new tab called block visibility groups. From here, you can create new visibility groups and you can also manage existing ones. Now let’s create a group that will allow us to display a block on article content types or if the path starts with /user/, so it’s one or the other.
Trainer (02:18):
We can’t implement this functionality with just the visibility settings because all conditions need to return true for the block to be visible, whereas in this case, we only want one to return true for the block to be displayed. So to create a group, click on add visibility group, then in label, enter in article, then plus, then user, and from this checkbox, allow other conditions on blocks. This allows you to add other visibility settings after you’ve selected a group on the block configuration page. Normally, once you select a visibility group on a block, you don’t add in other conditions, but this gives you the option to add in other visibility conditions. And then below that, we have two radio buttons. The first one, which is all conditions must pass, that means all the conditions must return true. And then we have the second option which is only one condition must pass, which means only one of the conditions has to return true.
Trainer (03:21):
Now, for this example, we’ll select only one condition must pass and then click on save. Now let’s edit the group, so click on edit. And to add a condition, click on add condition and click on node bundle, which is the same as content types. Then check article and click on add condition, click on add new condition again, and this time, select request path, which is the same as pages and then enter in /user/ and then asterisks, then click on add condition. Once you’ve configured all of the conditions, click on save. Now let’s go to block layout and scroll all the way down to sidebar first, click on place block and let’s add the powered by Drupal block back in. And now we can see a new option called condition group, and from this dropdown, we can select our visibility group.
Trainer (04:22):
Once everything’s being configured, click on save block and let’s move the powered by Drupal block to the top, scroll down and click on save. Let’s go back to the block that we just added in and you’ll notice that we cannot see the other visibility settings, and that is because if we go back to our group, the reason why we can’t see the other settings is because we haven’t checked allow other conditions on blocks. If you still want to have access to the other visibility settings on blocks, then check this checkbox. Now that everything has been set up, let’s go to the front end and see if it’s working. Click on back to site, and from the homepage, we cannot see the block, which is correct. But if we click on latest article, we should see the block. Here, we can see it on the left, and if we click on my account, we can see the block here because the path starts with /user/. So the group is working correctly.
Trainer (05:25):
Now let’s go back to structure, block layout, and you should see this dropdown called block visibility group. And it allows you to filter the blocks on this page based on the visibility group they are using. By default, all blocks is selected and this means we can see all of the blocks on this page, but if we were to select article plus user, which is the group that we created, we can see all of the blocks and then we can see exactly which group a block is using. And here, you can see the powered by Drupal block is using the article plus user.
Trainer (06:03):
If we scroll back up, from here, we can add in extra conditions to the group, and from the group settings, we can go directly to the edit page for this group. And if you uncheck show global blocks, it’ll then only show the block which is using the article plus user group. So this is a good way to see all of the blocks which are just using a specific group. Then if we scroll back up and select global blocks, this will show us all of the blocks that are not using any groups.
Trainer (06:39):
The last thing I want to show you is how to use the block visibility groups admin submodule. Let’s go to extend then search for block visibility groups and instal the block visibility groups admin submodule. And let’s go to the front end, and you should see this new button, block visibility groups in the toolbar. If you click on it, it’ll show you all of the active visibility groups on this page, and if you click on the group name, it’ll take you directly to the edit form. And if you click on managed blocks, it’ll take you to the block layout page, filtering on just this group, so here, we can see just the powered by Drupal block.
Trainer (07:26):
And if you go to a page that doesn’t have any active groups, so let’s scroll down and go to contact, and if we click on block visibility groups up at the top, we can see that there are no active groups, but instead, it is showing us the create form for a group. So we can enter in contact into label and we can create a group directly from here. So let’s add in the path of /contact for the group, then click on create a new group. And now, we have just created a new group just for the contact page.