Gutenberg and MemberPress: How To

As you might be aware, the WordPress editor was recently updated, transforming the way we create content with this popular website builder software.

The name of the new WordPress editor is Gutenberg, and as well as refreshing the familiar user interface, it’s also added some new and exciting features to the content creation process. One example of this is Gutenberg blocks.

These are content blocks, or modules, which can be inserted into your posts and pages, giving you more control over how you create content. Some examples of these blocks include paragraph, gallery, tables, and column blocks, to name just a few.

Since the upgrade to the WordPress editor and the implementation of Gutenberg, some WordPress plugins have begun creating their own blocks that can be accessed through the new version of the editor and inserted into your content. MemberPress is one such plugin, and in this guide, we’ll introduce you to the four MemberPress blocks for Gutenberg and show you how to use them on your membership site.

Let’s get started…

The Gutenberg MemberPress Blocks

Gutenberg Block Menu

As mentioned, since the release of the new WordPress editor, MemberPress users now get access to a selection of purpose-built Gutenberg blocks. Thanks to the way Gutenberg works, you can drag and drop these blocks into your posts and pages and customize how they work. Then, when your content is published, your visitors will see a range of elements on your website, depending on which blocks you’ve used, and whether the visitor is a member, and which membership plan they are subscribed to.

So with that in mind, here’s an overview of those MemberPress Gutenberg blocks, including how to use them on your WordPress membership site.

Login Form Block

As the name suggests, this block will insert a login form into your post or page. Your members can then use this form to log in to their accounts on your membership site and start accessing the restricted content and the other components of your members-only area.

Login Form Block Menu

Once you’ve inserted the block into your post or page, via the add block menu, the form will be displayed when you publish the post or page.

Login Form Block Editor

There is one setting or option for the login form block that allows you to define what page on your site will be displayed once a member has logged in.

If you want to make use of this setting, simply click on the Login Redirect URL text link. On the page that is displayed, scroll down to the Login & Logout section. Then enter the URL of the page that you’d like to display once the user has logged in. For this example, the member account page will be displayed. Click on the Update options button once you’ve entered a page URL.

Login Form Redirect URL

Now, return to the post or page you inserted the login form block into and check the box next to the Use MemberPress Login Redirect URL text. If you publish or preview that page, you can see the form that the block has inserted into the content.

Published Login Form Block

Once the user logs in, they are taken to the URL that you specified when setting up the form block.

Registration Form Block

If a visitor to your site isn’t a member, they can use the form that this block adds to your posts and pages to sign up and register. To use this block, create a new page on your site, or open an existing one, and simply insert the block into the page via the Add Block menu.

Registration Block

Once you’ve added the registration block, you can then choose which registration form to display. As each membership on your site has its own registration form, you can use this block to display the form from the relevant membership plan.

Registration Form Editor

If you publish or preview the page, you’ll see that the registration form you chose is displayed, giving your visitors a way to sign up and become members.

Registration Block Published

Account Form Block

If you want to display the details of a members account on a post or page on your website, the account form block makes this possible.

Account Block

Just insert the account form block into a post or page, and when a logged-in member visits it, they can see their account details.

Account Form Block Editor

From their account page, members can view their subscription and payment details as well as see what other data is held about them.

Account Form Published

Protected Content Block

Finally, we have the protected content block. This is the most powerful block so far, at least in terms of flexibility and how it can be used.

Protected Block

After adding the protected block to a post or page, any other blocks that are added to the page below the protected block are unavailable to members who don’t have the right level of access, including visitors who aren’t logged in to your site.

Protected Block Editor

Before you publish the post or page, you’ll need to define which members can access the content in the protected block.

To do so, click on the protected block, then look for the Access Rule panel on the right-hand side of the editor. From here you can choose one of your existing rules that control who can access which content on your site. To protect part of a post or page, you should use the partial rule type.

Partial Rule Example

If you haven’t created any rules yet, you can find out how to do so on the relevant page of the MemberPress online documentation. Once you’ve created an appropriate rule, you can select it from the Access Rule dropdown menu.

Access Rule for Protected Block

Now when a non-member or member without the right level of access visits that page, they won’t see the content inside the protected block. By default, nothing is shown when this is the case. However, you can choose to display a custom message that explains why they can’t see the protected content, alongside an optional login form.

Protected Block Message

Depending on how you configure these settings, a visitor could see nothing or a combination of the custom message and the login form.

For a more visual overview of these MemberPress Gutenberg blocks, this YouTube video does a good walkthrough of adding them to your site.

Final Thoughts

The upgrade of the WordPress editor has seen a lot of changes to the content creation experience.

Gutenberg blocks are an interesting concept, and as more third-party plugins start taking advantage of them, they should really help speed up your workflow and open up lots of exciting creative possibilities for your WordPress posts and pages.

Hopefully, this guide on how Gutenberg and MemberPress can work together, and the current selection of MemberPress blocks for Gutenberg, will help you work more efficiently when creating and managing your membership site.

If you have any questions about Gutenberg and MemberPress, please leave a comment below.

Affiliate Link Disclosure

Categories: Features
About Joe Fylan

Joe uses WordPress to create websites of all types and loves sharing his experiences of using this software with other users. If you need a steady stream of great content for your website, or you want the latest WordPress news and reviews check out his writing services and WordPress blog.