Preparing for Gutenberg: the New WordPress v5.0 Editor

GutenbergA new post editing and customization experience named “Gutenberg” is coming to WordPress. This post shares how the team at Paid Membership Pro is preparing, planning, and designing for the editor’s release to offer better tools and options for membership sites running our plugin.


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.

  5. 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.

  6. 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?

Insert the Shortcode Block with GutenbergIf 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.
Note that for the “Checkout” page to preview properly, you must add a Level ID to the URL (i.e. /membership-checkout/?level=1).


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.

Enhance Your Membership Levels Page with Member Badges

We’ve just added hooks to the Advanced Levels Page Shortcode Add On, allowing you to add unique content before and after the level information.

This recipe integrates the Member Badges Add On and displays the badge associated with each level in the output.


Member Badges on a Three Column Layout

The Code Recipe

This code recipe requires a PMPro Plus Account or higher.

View Membership Options


Member Badges on a Table Layout

The Code Recipe

This code recipe requires a PMPro Plus Account or higher.

View Membership Options


Available Hooks in the Advanced Levels Page Shortcode v.2.4+

Hooks for the “div” and “column” layouts:

do_action( 'pmproal_before_level', int $level_id, int string $layout );
do_action( 'pmproal_after_level', int $level_id, int string $layout );

Hooks for the “table” layout:

do_action( 'pmproal_extra_cols_before_header' );
do_action( 'pmproal_extra_cols_after_header' );
do_action( 'pmproal_extra_cols_before_body' );
do_action( 'pmproal_extra_cols_after_body' );

Note: hooks have not yet been added for the compare_table layout

Memberlite: Download the Import File to Setup a Demo Site

An import file containing demo content is now available for sites using the Memberlite Theme. The demo content covers basic theme features as well as the shortcodes available in the Memberlite Shortcodes plugin.


Downloading the Demo Content

The demo content file (.xml) is available on the Memberlite Theme website. We’ll continue to update and enhance the demo file as more features are added to the theme or as requests for a demonstration of specific theme features are made.


How to Set Up Your Demo Site

Demo content can be imported into a new or existing WordPress site. Just follow the steps below, omitting any steps that you already have completed for an existing site.

Be sure to make a backup of your site if you already have settings and content that you might want to revert to. [guide]
  1. Install and Activate Theme

  2. Install and Activate Plugins

  3. Import the Demo Content

  4. Set Up Paid Memberships Pro Levels & Pages

    • The theme demo is designed to reference three basic levels. You can simply name them Bronze, Silver, Gold and set any pricing. [level setup docs]
    • After setting up the levels, under the Memberships > Pages tab, click the link to generate the membership pages. [page setup docs]
  5. Assign the Menu

    • Navigate to Appearance > Menus
    • Assign the imported “Primary Menu” to the “Primary Menu” theme location.
  6. Assign the Static Front Page

    • Navigate to Appearance > Customize > Static Front Page
    • Set “Front Page displays” to “a static page”.
    • Assign “Home” to the “Front page”
    • Assign “Blog” to the “Posts page”

Note that you cannot undo the import. If you are working on an existing site, you may want to take a data backup before beginning the steps above.

 

Sitewide Membership Signup Banners for Memberlite – Three Sample Concepts

Convert more site visitors into members with these three sample callout banners for Memberlite.

There are many creative ways to display an advertisement for membership throughout your site (once I get started coming up with layout ideas I find it hard to stop). I find that an ad at the bottom of your page is a great place to start—it’s a catch all when the reader has reached the end of your content looking for the next page to view.


memberlite_before_footer_upgrade1Banner Sample 1: Membership Callout for Site Visitors and Members of Level ID 1

This demo is designed for a site with two levels: a free level and a support level for $10. The example checks to see if the page bottom banner has already been set; if it is not set, the visitor sees a callout and link to sign up OR upgrade to level ID 2. You can update the recipe with your own messaging and level IDs.

REQUIRES: Memberlite, Memberlite Shortcodes, Paid Memberships Pro.

This code recipe requires a PMPro Core Account or higher.

View Membership Options


memberlite_before_footer_upgrade2Banner Sample 2: Advertise Membership Signup for a Single Level + Login Link for Existing Members

This demo features a signup link for a single level as well as a link for existing members to login. The logic checks to see if there is a logged in user or if the page bottom banner has already been set; if neither is true, the visitor sees a callout with a link to sign up for level ID 1 or a link to log in. You can update the recipe with your own messaging and level IDs.

REQUIRES: Memberlite, Memberlite Shortcodes, Paid Memberships Pro.

This code recipe requires a PMPro Core Account or higher.

View Membership Options


memberlite_before_footer_upgrade3Sample 3: A Full 3-Column Levels Display for Site Visitors and Existing Level 1 or 2 Members

The final demo shows a full Membership Levels comparison for a site with three levels (or more). We use a model similar to this for our site here at Paid Memberships Pro. There’s a main heading to identify the section, the three levels compared side-by-side, and a link below for existing members to log in.

REQUIRES: Memberlite, Advanced Levels Page Shortcode Add On, Paid Memberships Pro.

This code recipe requires a PMPro Core Account or higher.

View Membership Options


If you’re not using Memberlite, check with your theme author to find a similar hook that you can use to add this banner or try this tutorial to insert ads within post content.

Add Credit Cards and PayPal Logos to Checkout when Using PayPal Gateway or Add PayPal Express Add On

This code gist is a bit of CSS that you can add to your theme or a helper customizations plugin’s custom css file. It adds the credit card logos and a PayPal logo to the “Select Payment Method” box shown on membership checkout.


How it Works

If you are using PayPal Website Payments Pro or our Add PayPal Express Add On with another main site gateway option, there is a “Select Payment Method” box on the checkout page.


Screenshot

pmpro-add-paypal-express-logos


The Code Recipe

This code recipe requires a PMPro Plus Account or higher.

View Membership Options


Some Special Notes

Make sure you download and place the logos in this .zip file in the appropriate place for your CSS. If you are using a PMPro Customizations file with custom CSS, you would place them in an “images” folder within your customizations plugin. If you are placing this code in your theme’s stylesheet, just place the images in your theme’s images folder.

Also, update or use your own Credit Card logos image if you don’t or can’t accept all of the payment options shown in the image. You can get additional credit card logos here.

Exploring Memberlite Features: The Tabs Shortcode

Here’s a tutorial on the [memberlite_tabs] and [memberlite_tab] shortcodes. These shortcodes add a tabbed content area when using the Memberlite theme.


Shortcode Code Example

[memberlite_tabs items="Item 1,Item 2,Item 3"]
[memberlite_tab class="text-center" item="Item 1"]This is the Item 1 tab content.[/memberlite_tab]
[memberlite_tab item="Item 2"]This is the Item 2 tab content.[/memberlite_tab]
[memberlite_tab class="text-2x" item="Item 3"]This is the Item 3 tab content.[/memberlite_tab]
[/memberlite_tabs]

[memberlite_tabs] Shortcode Attributes

  • items: A comma-separated list of tab names to display. (required; first in list is active)
  • class: An optional class/style to associate with the area. (optional)

[memberlite_tab] Shortcode Attributes

  • item: The name of the tab that this content is associated with. (required; must exactly match a tab listed in wrapper “items” attribute)
  • class: An optional class/style to associate with the area. (optional)

See it in action.

This is the Item 1 tab content.
This is the Item 2 tab content.
This is the Item 3 tab content.

Plugin to Convert Levels page to DIV layout (plus a fancy Three Column style code idea)

The default Paid Memberships Pro Membership Levels page is a table layout. Some membership pricing is better displayed NOT in a table – so we’ve just released an add on plugin that loads your membership levels in a DIV layout, and also includes the description text for the level (if you have entered it in the Edit Membership Level admin page) for each level.

View or Download the Add On

Default Levels page layout

Default Levels page layout

Layout using ONLY the new DIV layout add on

Layout using ONLY the new DIV layout add on

Layout using new add on + custom CSS in this post

Layout using new add on + custom CSS in this post

Continue reading for the special CSS code to achieve this look!

This page requires a PMPro Core Account or higher.

Already have an account? Login Now »

New to this site? Register Now »

Screenshots of Various Paid Memberships Pro Frontend and Admin Pages

Wondering what Paid Memberships Pro will look like for visitors to your site? Wondering how (un)complicated our Admin pages are? I just added a page of screenshots that demo most frontend pages. I’m continuing to add more shots of the backend/admin pages, but hey – you gotta start somewhere! If you’re wondering what a certain feature will look like for your site, just download our plugin for free and see it yourself. Or, ask me and I’ll post some more screens.

Frontend Membership Pages

Admin Memberships Pages