{"id":34007,"date":"2022-01-27T15:00:07","date_gmt":"2022-01-27T14:00:07","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=34007"},"modified":"2022-01-31T14:48:57","modified_gmt":"2022-01-31T13:48:57","slug":"how-to-control-frontend-block-visibility","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-control-frontend-block-visibility\/","title":{"rendered":"How to Control Frontend Block Visibility and Show\/Hide Specific Blocks in WordPress"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]It\u2019s undeniable that Gutenberg has brought significant changes to the text editor interface of WordPress ever since it was first introduced in late 2018. The Gutenberg block editor<\/a> works by using blocks that allow users to edit their pages and posts in various creative ways, helping their content appear more attractive and user-friendly in the process. Aside from having access to many premade blocks from the get-go, there are also many third-party Gutenberg block plugins<\/a> out there one can use to expand Gutenberg\u2019s potential and capability even further.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]With all that being said, there may be times when you want to control your frontend WordPress block visibility<\/strong>, or rather, prevent certain blocks from appearing on your site\u2019s frontend<\/strong>. Say that you have a block on your site that displays your company\u2019s working hours and you want them to be visible to your visitors only at times when your business is actually open. Or, you have a website that requires users to subscribe and pay for a membership to have access to specific content. Or, you may simply want to show a time-sensitive offer. These are just some of the instances when the ability to show or hide specific blocks may come quite in handy.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Fortunately, there is a WordPress plugin called Block Visibility that will allow you to pick the blocks you want to be hidden on your site\u2019s frontend as well as control how they are hidden. This plugin comes with a bunch of personalization options you can use to also turn your existing blocks into so-called conditional blocks<\/strong>. This means that you will be able to make your block-based content appear on your site under certain conditions.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]So, without further ado, here\u2019s how you can easily use the Block Visibility plugin to get full control of the block visibility on your WordPress site and truly improve the way you run and market your business as a whole.
\n[\/vc_column_text][vc_empty_space height=”80px”][vc_widget_sidebar sidebar_id=”new-top-picks-banner”][vc_empty_space height=”80px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Configuring the Block Visibility Plugin<\/h2>\n

[\/vc_column_text][vc_column_text]As we mentioned, the Block Visibility<\/a> plugin will allow you to easily control the visibility of blocks on your WordPress site as well as select who will or won\u2019t be able to see them and under what conditions. Some of the plugin\u2019s options include the ability to schedule the time and date when you wish to show or hide specific content, hide or show blocks to specific user roles, or people who use specific screen types.<\/strong>[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The best thing about all this is that you don\u2019t need to use any code to do it. You simply need to create your content using the Gutenberg block editor, select your preferred visibility conditions using the plugin\u2019s intuitive options, and certain blocks will be shown or hidden on your frontend right away.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]What\u2019s also great about the Block Visibility plugin is that it is made to work with any block out there, including default WordPress blocks and the new block-based widgets<\/a>, as well as third-party blocks.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Block <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The plugin can be downloaded for free from the official WordPress repository. But if you want to have even more options at your disposal, you can also upgrade to the premium version<\/a> (with the pricing starting at $49 per year). Among the premium features are the ability to show or hide content based on your block\u2019s location, an extended date-time functionality, and WooCommerce integration, among others.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]After you install the plugin<\/a> and activate it, you can head to Settings >> Block Visibility<\/em> to configure your plugin\u2019s settings.<\/strong>[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Settings <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Once you\u2019re in the General Settings<\/em> tab, you will first be able to access the Block Editor<\/em> section.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"General <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Here you will be able to set things like default available visibility controls<\/strong> (according to date and time, screen size, and user role), toolbar visibility controls<\/strong> (basically allowing you to use visibility controls directly within the block\u2019s toolbar), and enabling of plugin notices in the editor.<\/strong>[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The User Permissions<\/em> area will let you select users that will be allowed to control visibility settings in the block editor.<\/strong> Keep in mind that you can select editors, authors, and contributors, while administrators will always be able to use these settings.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"User <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]You will also be able to switch on the Full Control Mode<\/em> and add visibility controls to every block<\/strong>, as well as enable the option to remove all plugin settings in case the plugin is uninstalled.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Full <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Next, the Visibility Controls<\/em> tab will allow you to configure all visibility controls you have at your disposal in full detail<\/strong> and determine how you want them to function. Keep in mind that these settings will override all other controls.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Visiblilty <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Finally, the Block Manager<\/em> tab will allow you to manually disable visibility controls for each available block<\/strong>. You will see that all blocks are divided into different groups, such as Text, Media, Design, Widgets, etc. Feel free to enable and disable block visibility according to your preferences.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Block <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Once you\u2019re done with configuring all the settings, make sure to hit the Update<\/em> button<\/strong> located at the top.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Update <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Then, you can go to your page or post and select blocks you want to be hidden from your frontend.
\n[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Using the Block Visibility plugin to Show and Hide Blocks in Gutenberg<\/h2>\n

[\/vc_column_text][vc_column_text]There are two ways to hide a block within the editor. To use the first one, you should go to the backend of your page\/post, select the block you wish to hide, and then click on the \u201cOptions\u201d (three-dotted) icon<\/strong>. Then, select the Hide block<\/em> option.<\/strong>[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Hide <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]You can simply click on Enable block<\/em> to undo this.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Enable <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The other way to hide the block also allows you to use a few other advanced options. These options will help you determine the conditions under which your block will be hidden. To do this, you should use the Block<\/em> tab on the right side of the screen and click on the Visibility<\/em> panel<\/strong> to expand it.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Block <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]It will reveal the \u201cHide block\u201d button, as well as a few other useful options. These include the ability to switch specific controls on or off within the block itself<\/strong>, the ability to schedule the time when you want the block to start and\/or stop showing, and to select a user role that will be able to see the block<\/strong>. You can make the block public (visible to everyone) or you can set it up to be visible only to logged-in users, logged-out users, specific users, or specific user roles.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Enabled <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]If you haven\u2019t disabled the screen size option in your settings earlier, you will also be able to determine the screen sizes the block will be visible on<\/strong>. You can hide the block for desktop, tablet, and\/or mobile.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Screen <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Make sure to hit the Publish\/Update button once you\u2019re done with setting up your block visibility options.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Conclusion<\/h2>\n

[\/vc_column_text][vc_column_text]If done right, hiding specific blocks on your WordPress site can help enhance the user experience of your website visitors and even improve the way you present and promote your business online. No matter if you want to create time-sensitive offers or want to encourage users to subscribe to have access to exclusive content, the Block Visibility plugin will help you do all that, and then some. Once you successfully configure the plugin using its comprehensive but intuitive set of options, you can go to a specific page or post and start determining which blocks you want to hide. You can also select users and\/or user groups that won\u2019t be able to see specific blocks, select the date and time when these blocks are visible (and not visible), and plenty more. Just make sure to follow our instructions carefully, and you will be able to easily create dynamic content on your WordPress with this practical plugin in no time.
\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

Let\u2019s take a look at how you can easily control the frontend block visibility of your WordPress site and improve the way you run and market your business.<\/p>\n","protected":false},"author":2,"featured_media":34028,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[197,72,13],"class_list":["post-34007","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-block","tag-gutenberg","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/34007","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=34007"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/34007\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/34028"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=34007"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=34007"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=34007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}