Protect Gutenberg Blocks With MemberPress

MemberPress is fully compatible with the default WordPress Block editor (Gutenberg). Furthermore, you can use MemberPress rules to protect Gutenberg blocks on WordPress posts and pages designed with the Gutenberg editor. This way, you can hide Gutenberg blocks with your premium content, making it available only to active members.

This document will explain how to protect Gutenberg blocks with MemberPress using block-level protection or the Protected Content Block. These tools help you create pages where some content is free while others require specific memberships.

Why Protect Gutenberg Blocks?

Block-level protection lets you control access to individual blocks instead of entire posts or pages. This means you can:

• Show preview content to everyone while protecting premium sections;
• Hide Gutenberg blocks and create different content levels within the same page;
• Mix free and paid content together;
• Display membership-specific information within general posts.

Unlike protecting entire posts with MemberPress Rules, protecting individual blocks allows visitors to access the page. At the same time, you can hide Gutenberg blocks to keep the premium content hidden based on the user’s membership.

Furthermore, next to hiding content, you can show a login form or a custom message to prompt users to register.

Protect Gutenberg Blocks With MemberPress Rules 

When you protect Gutenberg blocks, you can control which parts of the content visitors and members can access. Hence, you can create flexible content experiences with free and premium sections.

MemberPress Rules define who can access specific content and what happens when unauthorized users try to view it. These rules work with both block-level protection and the Protected Content block to control access to your content.

Understanding MemberPress Rules

When using MemberPress Rules, it’s essential to mention that they contain two main components:

• Access conditions – Who can see the content (memberships, roles, capabilities, or specific members);
• Unauthorized actions – What happens when someone without access tries to view the content?

Thus, to protect content with MemberPress, you must create rules. 

Creating MemberPress Partial Rules

The partial type of MemberPress rules works best for protecting specific blocks. These rules can be applied to multiple Gutenberg blocks and other content throughout the site. 

Follow these steps to create a Partial rule:

1. Navigate to Dashboard > MemberPress > Rules, and click the Add New Rule button. This will open the form for creating new rules.

2. Under Content & Access, click on the Protected Content dropdown and select the Partial rule type.

3. Now, under Access Conditions, set the condition to Membership, and select which membership should be required to access this page. You can click the + icon under Access Conditions to add multiple conditions.

Note: Please keep in mind that multiple conditions come with the OR operator. This means that users need to match only one of the conditions to access the protected content.

3. Click the Save Rule button to save your partial rule.

Applying this rule to any content on your website will restrict access only to members subscribed to the set membership.

Protect Gutenberg Blocks Using Block-Level Protection

The Content Protection feature automatically appears in the block settings for every Gutenberg block when the MemberPress plugin is activated. These block-level settings allow you to protect any individual block directly.

To enable the block-level protection, follow these steps:

1. Select a block you want to protect (text, image, heading, etc.).
2. Navigate to the Block Settings panel on the right side.

3. Find and expand the Content Protection section.

4. Click the Access Rule dropdown, and start typing the name of the MemberPress rule you need. Click on the rule to apply it to the block.
5. Under the If Allowed dropdown, you can choose to Show or Hide the block. Choose Show to allow authorized members to access and restrict the block content for other users. Conversely, if you choose Hide, you can hide Gutenberg blocks for authorized members and make them visible for everyone else.
6. Under the Unauthorised Access dropdown, choose what the unauthorized users should see instead of the protected content:
   • Hide – Make the entire protected block and all the content inside invisible;
   • Default – Apply the default Unauthorized Access settings you set for MemberPress
   • Display Message – This option hides the content and displays your custom message instead. You will get the additional Unauthorized Message field to add your message.

7. Save changes by saving post updates (the Update or Publish button).

Protect Gutenberg Blocks Using the Protected Content Block

The Protected Content Block works as a container that wraps other blocks with membership protection. You can add any Gutenberg block to a Protected Content block. Also, the number of blocks you can add is unlimited.

The Protected Content block can be added within the Gutenberg editor as any other block:

1. Navigate to the desired post, page, or widget area, and click Edit to start the Gutenberg editor.
2. Click the Add Block button (+ icon) in the editor.

3. Search for the block named Protected and select it. Now, you can add blocks you want to be protected within the protected content block.
4. Click inside the Protected Content block area.
5. Click the Add Block button (+ icon) within the Protected Content block.

6. Add any blocks you want to protect (paragraphs, images, videos, headings, lists). You can add multiple blocks inside one Protected Content block.

Tip: Under the Gutenberg editor’s Document Overview, you can see and manage all the blocks under the Protected Content block.

7. Design the protected content. You can format and style each added block as usual (using the block’s available settings).
8. Save post changes.

Protected Content Block Settings

Next, you should configure the block settings:

1. Select the Protected Content block.
2. In the Block Settings panel, find the Access Rule section.

3. Choose a MemberPress rule from the dropdown.
4. Under If allowed, select if the protected content should be shown or hidden.
5. Next, expand the Unauthorized Access panel.

6. Under the Unauthorised Action dropdown, choose what the unauthorized users should see instead of the protected content:
   • Hide Only – hide the entire protected block and all the content added inside;
   • Show Message – hide the content and display a custom message instead.
   • Show Login Form – hide the protected content and show the MemberPress login form;
   • Show Login Form & Message – hide the protected content and show the MemberPress login form and a custom message.
7. You'll see the additional Unauthorized Message field if you choose the Show Message or the Show Login Form & Message option. Add the custom message that should be displayed to unauthorised users to this field.
8. Save changes by saving post updates (the Update or Publish button).

Block-Level Protection vs. Protected Content Block

Each protection method offers distinct advantages depending on your content strategy and technical needs.

Block-level content protection advantages:

• Granular Control: Protect individual blocks precisely without affecting surrounding content. This allows for very specific content restrictions within complex layouts.
• Cleaner Editor Experience: No wrapper blocks cluttering your editor interface. Each block manages its own protection settings independently.
• Flexible Layout Options: Easily mix protected and unprotected blocks without restructuring your content layout or design.
• Simple Implementation: Apply protection directly to existing blocks without adding new block types or changing your content structure.

Protected Content block advantages:

• Group Management: Protect multiple related blocks together with a single-rule configuration. This simplifies management when protecting large content sections.
• Visual Organization: Protected content sections are clearly visible in the editor, making it easier to understand your content structure at a glance.
• Consistent Styling: Apply unified styling and messaging across all content within the protected container.
• Simplified Rule Management: Manage one set of protection rules for multiple blocks instead of configuring each block individually.

Choosing the Right Method to Hide Gutenberg Blocks

Use block-level protection when you need precise control over individual elements and want to maintain clean editor layouts. This method works best for protecting specific paragraphs, images, or other elements within mixed content.

Use Protected Content blocks when protecting related content sections together and wanting simplified rule management. This method works well for protecting entire sections or chapters in your articles that should have unified access requirements. In this case, it’s a more straightforward method than applying the same MemberPress rule to every block individually.

When choosing between these methods, consider your content strategy, editing workflow, and maintenance needs. Both approaches use the same underlying MemberPress Rules system, ensuring consistent protection regardless of your chosen implementation method.