Apps Ballance Cash_2 Chat Checkout Click Code Cog_Wheels Compose_email Conference Contacts Earth Edit_File_1_ Email Email_2 File Folder_2 Gift Group Group_2 Help ID ID_2 Key Keys Laptop_Store Like_1_ Link Lock Log_Out Map Marketing Mobile_UI Navigation POS Partnership Profile Safe_2 Search_User Secure_Files Settings Share Shield Shield_2 Shopping_Cart Support_Male Trash Type_pin User_female User_male logo copy

Using WP User Manager with the WordPress Block Editor

Iain Published on February 28, 2020

I’m pleased to announce that as of version 2.3 released recently, WP User Manager has integration with the WordPress Block Editor. The Block Editor is the new way to create and edit content with WordPress, which was introduced in WordPress 5.0.

What Does This Mean?

WP User Manager has previously used shortcodes to allow users to add WP User Manager forms, pages and special content to their posts or pages.

For example, the ‘Login’ page that is created on installation of WP User Manager only has the ‘wpum_login_form’ shortcode in the post content. When you view the page, the login form is displayed:

WP User Manager login shortcode and custom login form

Shortcodes have historically been the only way to allow users to indicate where dynamic content should be displayed in their posts or pages, but they aren’t very easy to use if you want to customize the data being displayed.

WP User Manager makes this easier with the ‘User Shortcodes‘ button above the classic content editor, allowing you to select the shortcode and configure settings, and it generates the shortcode:

WP User Manager shortcode generator for the directory shortcode

However, on sites that are running WordPress 5.0+, and are using the Block Editor, this shortcode generator doesn’t appear, and users have to dig into to the documentation to find the right shortcode text to insert manually.

Until now that is, with the introduction of 10 custom blocks for WP User Manager šŸŽ‰

WP User Manager logo

Get Started with the Best WordPress Membership Plugin Today

Connect, Manage and Build your Membership Site

Custom blocks for WP User Manager in the Block Editor

The Blocks

The blocks that are available are as follows:

  • Account page
  • Profile page
  • Profile Card for a user
  • Login form
  • Registration form
  • Password recovery form
  • Directory
  • Recently registered list of users
  • Login link
  • Logout link

A lot of the shortcodes had settings to customize the output, for example, you could control if the login form had register and password reset links underneath.

These settings are not too difficult to write out (or use the shortcode generator), but it’s cumbersome. These settings in the new blocks are managed in the block editor sidebar, it’s a much better user experience. Especially for shortcodes that have complex settings.

For example, the Directory shortcode needed an ID setting of the directory you want to display, which meant you had to edit the directory you want, remember the ID from URL and use that in the shortcode. The Directory block has a dropdown that lists all the directories by name, so it’s much easier to configure:

WP User Manager directory custom block edit screen

If you are using the Registration Forms addon to allow you to create multiple registration forms, the Registration Form block has a setting with a dropdown to allow you to select the form.

For those sites using the classic editor, the shortcodes and the shortcode generator button will still work just fine.

Improved Content Restriction

The keen eyed readers might notice there isn’t new blocks for content restriction, to replace the old shortcodes to restrict content. Even though those shortcodes still work, the way they operated – containing content with the shortcode to make it hidden, isn’t how it would work for blocks of content in the Block Editor.

Instead, each block of content (think paragraphs, images, headings etc), has a new setting which allows you to control who can see the block – either logged in users, specific users, or users in specific roles:

GIF demonstrating how to restrict a group of blocks to logged in users

This restriction setting can also be applied to Block groups which are extremely useful to use as a quick way to apply a restriction to a large amount of blocks.

What’s Next

Now that the custom blocks for WP User Manager are out in the wild, I’ll be turning my attention to adding improvements to the Custom Fields and Registration Forms addons, as well as developing new addons.

If there are features or new addons you are looking for, or services you wish to connect WP User Manager to, then please let me know in the comments.

Iain Iā€™m a WordPress developer based on the south coast of England. I develop plugins like WP User Manager and Intagrate.