Introducing Secure Blocks for WordPress Gutenberg

Secure your content in the WordPress Gutenberg editor via login or by user role, with Secure Blocks for Gutenberg. Available for download now in the WordPress plugin repository.

Using Secure Blocks you can add any Gutenberg block inside a secure block, and have it render only to logged in users, or you can lock it down to a specific user role (or roles) of your choosing.

Secure Blocks also provides an additional area that displays blocks to users that do not have permission to view the content.

An Overview of Secure Blocks for Gutenberg

Here is a quick video walkthrough of how Secure Blocks for Gutenberg works:

A quick video introduction to to Secure Blocks on YouTube

There are a planned number of additional blocks that will be added to the Secure Blocks plugin, but for now the main functionality is as follows:

  • Display content only to logged-users
  • Display alternative content to logged-out users
  • Display content to users within certain user roles
  • Display alternative content to users not in those user roles

Making the Content Secure in the WordPress Gutenberg Editor with Secure Blocks

To add a secure block simply choose the ‘Secure Block’ block type when clicking the ‘insert block’ button.

Adding a secure block in Gutenberg
Adding a secure block in Gutenberg

Once you insert a secure block you will be presented with the default UI. In the top area you can add multiple sub-blocks that will be made secure (e.g. by default, content in this area is shown if a user is logged in)

In the bottom area you can add multiple sub-blocks that will be shown if the conditions you have set for restricting the top area are not met (e.g. by default, content in this area is shown if a user is logged out) .

The default Secure Blocks for Gutenberg UI
The default Secure Blocks for Gutenberg UI

There is no limit to the block types you can add in these areas. The next example simply shows a heading and a paragraph.

Adding Secure and Non-Secure Gutenberg content
Adding Secure and Non-Secure Gutenberg content

Then depending on the restrictions you have set for the secure area, and how you are viewing the site, you are presented with the appropriate content.

Secure Content is presented to logged-in users
Secure Content is presented to logged-in users

Non secure content is presented to logged out users
Non secure content is presented to logged out users

Restricting Content Further by User Role

By using the ‘Select Roles’ block inspector you can restrict content further to a user role. 

Secure Blocks for Gutenberg UI Updated with Restricted Users
Secure Blocks for Gutenberg UI Updated with Restricted Users

You can select multiple roles that the content will be restricted to, and the content will only be shown if a user is in any of those roles.

Restricting content by user role
Restricting content by user role

You can clearly see how the content has been restricted as the blocks UI is updated with the selected options.

The Secure Blocks for Gutenberg UI is automatically updated with the selected user roles
The Secure Blocks for Gutenberg UI is automatically updated with the selected user roles

No Block Restrictions

You can add any type of Gutenberg block into the secure area, and you can choose any of the display options.

Any Gutenberg Block can be made secure
Any Gutenberg Block can be made secure

As you can see, the bounds of the secure block do not limit the rendering of the sub blocks.

Full screen content is rendered securely and not restricted by Secure Block container
Full screen content is rendered securely and not restricted by Secure Block container

Are You a Developer?

If you are a WordPress developer who has an interest in Gutenberg, checkout my previous and future Gutenberg articles

Posted by Matt Watson

Matt Watson is co-founder of the WordPress agency Make Do. Matt loves learning about personal, professional and web development. Learn more about Matt.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.