Learn how to display blocks based on the selected tags in the article.
We’ll cover the following:
- Download and install Term Condition module.
- How to configure Term Condition to be used with Block Visibility Groups module.
Composer command
composer require drupal/term_conditionTranscript
Trainer (00:00):
We’ve learned how to control the visibility settings on blocks and how to use the Block Visibility Groups module. Now, I want to show you how to display a block only when a specific taxonomy term is selected on a content type. If we go into an article, then click on Edit, you should see the Tags field. This is a taxonomy term field and it lets you select a term from the Tags vocabulary. And if we go to Structure, then click on Taxonomy you can see the Tags vocabulary. And if you click on List terms, you can see the terms within the Tags vocabulary. If you don’t know what the taxonomy system is, just think of it as a way to categorise content. Think of the Tags vocabulary as a category type and the terms as category items. Now we need to implement the following functionality.
Trainer (00:59):
If an article is tagged as Drupal, it’ll display a Drupal block and if it’s tagged as WordPress, it’ll display a WordPress block. If both tags are used, it’ll then display both blocks. This means we’ll need to create two new blocks. And just to complicate things further, let’s display both blocks on the About Us page. To implement this functionality, we’ll use the Block Visibility Groups module, which we learned about previously, but we need to download a new third party module called Term condition. This module gives you a new condition in the visibility settings, where you can select a taxonomy term. And if an article or page has the term, it’ll display the block. So before we can begin, let’s go ahead and download the module using composer. So jump into your terminal and type in the following command. Composer require drupal/term_condition.
Trainer (02:00):
Now that has been downloaded, let’s jump into the site and let’s close this tab, then go to Extend and search for term and then check Term Condition and install it. Let’s first create the two new blocks. So go to Structure, Block layout, then click on Custom Block library, then Add custom block and let’s create a Basic block. Enter in Drupal into the description and then just add in some random text, then click on Save. Now let’s create the second block. So click on Add custom block, Basic block and enter WordPress into Block description, and then enter in some random text. Then click on Save. Now let’s create the two visibility groups. So click on Block Visibility Groups, then click on Add Block Visibility Group and in label enter in Drupal, then make sure you check Only one condition must pass, because remember we want the block to be visible if an article or page has the Drupal term, but we also want it to appear on the About Us page.
Trainer (03:13):
So make sure you select Only one condition must pass, then click on Save, then Edit the Drupal group and click on Add new condition and you should see the new condition called Term, click on it. And from the order complete field search for Drupal and then select Node from URL from the node dropdown, then click on Add condition and click on Add new condition again, and this time select Request Path and then type in /about. This is for the About Us page. Then click on Add condition. Now let’s create the WordPress group. So enter in WordPress into the Label. Again, select Only one condition must pass and let’s Edit the group again. Click on Add new condition, then Term, search for WordPress and select Node from URL and click on Add new condition one last time and let’s enter in /about. Then click on Add condition and click on Save.
Trainer (04:26):
Before we can continue let’s go to Content and let’s make sure that the path to the About Us page is /about because if we click on it, we can see that the path is just node/2, but our conditions have been configured for /about. So let change the URL Alias for this page, click on Edit then in the right hand column, click on URL aliases and then just type in /about, then click on Save. And now if you look in the address bar, you’ll see that the path to this page is /about. So at this point we have created our two new blocks and also the two new groups. The final thing we need to do is place both blocks into a region, click on Structure, Block layout and scroll all the way down to Sidebar second and let’s remove this content Block view, click on the down arrow and then Remove. Let’s go back to sidebar second, click on Place block, search for Drupal and here you can see the Custom block, then click on Place block.
Trainer (05:38):
Then from the Block Visibility Groups dropdown, select Drupal, then click on Save block, click on Place block again, this time search for WordPress and from the same dropdown, select WordPress, then Save block and then scroll all the way down and click on Save blocks. Now that everything has been configured, let’s test everything out. So let’s jump to the front end and you can see that we are on the About Us page. And on the right hand side, we can see both blocks, which is correct. Then if we go to the homepage and click on Latest article, we can see both blocks and the reason why we can see both blocks is because if we edit the article, it’s been tagged with both Drupal and WordPress, let’s remove WordPress so that only Drupal is selected. And if we click on Save, now we can just see Drupal in the region on the right. And if we Edit the article again and let’s change this to WordPress, and now we can only see WordPress on the right. So the Block Visibility Groups are working as intended.