RSVPMaker Blocks for the New WordPress Editor (Gutenberg)

Like other WordPress plugin developers, I’ve been monitoring the previews of Gutenberg, the new editing experience currently available as a plugin and coming soon to core as part of WordPress 5.0. This major new release could ship as early as August, and it’s potentially disruptive for plugins that rely on shortcodes, the placeholder codes for dynamic output.

Existing shortcodes should continue to work. However, one of the motivations of the new editor is to eliminate the need for a lot of shortcodes that were used by plugin and theme authors to achieve formatting effects. The need for them should go away now that WordPress has more powerful, JavaScript powered formatting controls built into the editor itself. Most of the shortcodes used in RSVPMaker are more dependent on server-side code and logic, but fortunately there’s a way of handling that under the new architecture, too.

Block insert animation
Adding an RSVPMaker Upcoming Events block.

In Gutenberg, a web document is treated as a series of “blocks,” each of which has can have its own formatting controls and properties. A typical blog post would be a series of paragraph blocks with maybe an image block inserted into the middle of the page. There are standard blocks for quotations, two column layouts, and tables, making it possible to do more things in the visual editor that might have required a plugin or some HTML coding in the past.

Blocks can also replace the functions previously performed by shortcodes, including functions that require server-side execution like retrieving an RSVPMaker event listing. Accordingly, RSVPMaker now makes two custom blocks available to WordPress installations that have the Gutenberg plugin active … and which ought to work with WordPress 5.0 when it arrives. These block controls replace the buttons I had created for the “old” WordPress editor for inserting event listings and single events.

To add a new block, you click the + sign in the editor. You can then browse through the available blocks or search by keyword, for example “rsvp” or “rsvpmaker” will bring up the RSVPMaker blocks. The two blocks available so far are “RSVPMaker Upcoming Events” and “RSVPMaker Embed Event.”

RSVPMaker Upcoming Events is what you would use on your main events page. You can also use it to list a given category of events by setting the Event Types field. Clicking the button in the block chooser inserts a placeholder widget with an embedded form you can use to specify whether you want the event listing displayed with or without the calendar grid and how many events per page should be displayed, etc.

RSVPMaker Embed Event lets you insert a single event in a blog post or landing page. For example, you might write a blog post promoting an upcoming event and embed the event registration page in that post, in addition to making it available on your website’s event calendar. Again, there are a number of options you can set, from embedding the entire event and registration form to just embedding the RSVP Now! button.

Getting this working was a challenge, but I think it’s a better experience. It’s also new enough that there may be bugs. I did run into issues with errors occurring on the administrative dashboard when WordPress with Gutenberg enabled seemed to want to execute functions that would only normally be triggered by filters that execute on the front end of the website. (Does Gutenberg execute the “the_content” filter for some reason?) If you run into other issues that I missed, let me know.

By default, plugins like RSVPMaker that employ custom post types will continue to use the “classic” WordPress editor declares its support for Gutenberg editor. So far, I see no reason why you can’t take advantage of the greater formatting controls in Gutenberg when composing the body of an event post. However, for now that’s a setting you can enable at the bottom of the RSVPMaker settings page.

Try it, and let me know what you think.