What is Gutenberg and how can I learn more about it?

Unless you’ve been hiding under a rock, you’ve probably heard the name and maybe know a bit about the new Gutenberg editor. Gutenberg is an open source project currently offered as a WordPress Plugin. It’s being developed on GitHub and will soon be included as a core feature of WordPress.

The Gutenberg editing experience revolves around “blocks”.

These blocks are a unified way to style content that currently requires shortcodes, embeds, widgets, post formats, custom post types, theme options, meta-boxes, and other formatting elements. By allowing rich customization without deep knowledge of code, blocks make good on the promise of WordPress: broad functionality with a clear, consistent user experience.
—via WordPress.org

You can read and learn more about Gutenberg in the official handbook. If you want to learn even more, check out WP Tavern’s post on A Collection of Gutenberg Conversations, Resources, and Videos.

How does Gutenberg work with Paid Memberships Pro?

We know that some Page Builders for WordPress have specific integration considerations when using Paid Memberships Pro. We want your to know that we have tested the latest release of Gutenberg and everything in Paid Memberships Pro works as expected. Everything that works in the current editor is going to work in the new editor.

Gutenberg is largely coded in JavaScript. Some parts of that code don’t interact with the server-side PHP at all. For example, Blocks are defined in JavaScript. And so if you wanted to limit Blocks by membership level, you would need to run that filter in the JavaScript. Going forward, the PHP-based hooks and filters we use to protect WordPress content and features won’t be enough to protect all of the things being done in JavaScript.

The future of WordPress is JavaScript, so Paid Memberships Pro needs to build tools for protecting content in JavaScript. This is an important consideration for our developers and other contributors to the Paid Memberships Pro open source project.

How can Paid Memberships Pro offer Gutenberg support?

We see lots of possibilities for custom PMPro blocks in Gutenberg, and there’s huge potential to extend our core membership plugin as well as our Add Ons.

Here are a few interesting ways we hope to leverage Gutenberg Blocks for PMPro:

1. Gutenberg Blocks for all shortcodes.

   Any shortcode in Paid Memberships Pro will have a Block equivalent, including the plugin-page shortcodes. The new Blocks will be easier to move around in your page design and can have intuitive settings for customization.

2. Break plugin-page shortcodes into several Blocks.

   Instead of one shortcode used per plugin page, we plan to break some of our shortcodes into multiple blocks? For example, our [pmpro_account] shortcode currently has a sections attribute, allowing you to customize the display of the membership, profile, invoices, and links areas of that page. Each of these sections could be its own block, making it easier to reposition and tweak them individually.

3. Block-level Content Restriction

   The current [membership] shortcode allows you to wrap and restrict post content for specific membership levels. We plan to create a Membership Block with settings for the specific level IDs, status, session, and more. You would then be able to nest Blocks within this parent Block and design totally unique content based on the user viewing the page.

4. Built-in Templates for best practice layouts for your membership sales pages.

Gutenberg gives you the ability to define “Block Templates”, which are groups of Blocks in a preset layout. Block Templates will be a great way to share popular page layouts for landing pages, sales pages, pricing tables and more. We will find (and develop if necessary) the layouts best optimized for conversions to share with our users.

5. Register Helper Fields as Blocks

   We know that our users would love a drag-and-drop interface for Register Helper. We are working to create a simplified (non-code) based custom user fields structure using Gutenberg Blocks. Custom user meta fields will be visually inserted into the Checkout Page for capture at Membership Checkout, or into the Member Directory and Profile Pages for a unique layout customized to your site’s member data?

What can you do with Gutenberg NOW?

If you’re using Paid Memberships Pro and would like start using Gutenberg for your WordPress editing experience, follow the steps below:

1. Install and activate the Gutenberg plugin via Plugins > Add New > “Gutenberg”. “>[Download Link]
2. Edit your Pages under Memberships > Page Settings.
3. Insert a the “Shortcode” block located under Blocks > Widgets.
4. Move the page’s appropriate shortcode into the Shortcode Block.
5. Update the page.

Video: Using Gutenberg to design the Membership Account Page

I made a brief and basic video of how you can use the [pmpro_account] shortcode sections to create a column-type layout for your membership account page. This is not how we plan to offer Gutenberg support in the future, but for now it does give you a glimpse of what is possible. There’s no background music or narration – so please play your own tunes 🙂

We will continue to post updates on the blog here as we make progress on these efforts.