Blog

Tickets are going fast for the gourmet dinners hosted by Swank Specialty Produce, and this year they’re taking reservations using my RSVPMaker for #WordPress plugin. As part of my consulting with the Swanks, I’ve used RSVPMaker to organize the event promos for the past several years, but this year they agreed to replace an external ticketing system with registration and payment directly on the website. That makes the website “stickier,” giving customers an opportunity to discover other events, products, and services.

RSVPMaker is a free WordPress plugin, so engaging with me as a consultant or for support is optional (but appreciated). This video gives a quick tour of what RSVPMaker can do.

Notes

I mention a few lines of CSS I’ve found helpful for making title text stand out more in cover blocks. That’s here:

.wp-block-cover h1 {
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black
}

Here are several ways you can customize your registration form and event pricing when you are charging admission for an event.

RSVPMaker is a free WordPress plugin for event publishing, event marketing, and event registration. When you add a price to an event, RSVPMaker uses integrations with Stripe and PayPal to collect money.

This demo covers new options for using the default registration form, customizing it for a specific event, and setting one or more prices. Event pricing options range from a single per-person price, multiple prices including an “Early Bird” price with an expiration date, group registration (like “Table of 8”) for a dinner, and coupon codes for event pricing discounts.

More details in this knowledge base article.

Event Pricing: Per Person, Multiple Admissions, Coupon Codes, and Additionally Priced Items

If you display events on your website, you want to showcase them in a way that entices website visitors to sign up and pay (if you’re charging) and show up as attendees. The latest updates to RSVPMaker give you more flexibility in how you want to present your event listings, capitalizing on advances in the design flexibility WordPress now offers for all sorts of website content.

The modern WordPress editor allows web pages and blog posts, as well as entire website designs, to be assembled from “blocks” — visual components that provide context-specific controls for different kinds of content (paragraphs, headings, and images) as well as layout elements (columns, rows, and navigation menus).

For several years, RSVPMaker has provided multiple content blocks, including the RSVPMaker Upcoming block for displaying event listings. However, website creators didn’t have as many options for layout as the latest RSVPMaker releases provide by working with the WordPress Query Loop block.

Here’s a quick tour:

(more…)

Here is how you can create your own simplified WordPress block editor for specialized applications using React and the REST API.

I am, in general, a fan of the WordPress block editor and how it has progressed. However, I’ve learned over time that all the options available within the block editor can be overwhelming to newbies.

This has proven to be particularly true to the community of Toastmasters whom I’ve introduced to WordPress through the Toastmost.org website hosting service. Sometimes, asking them to dive into the block editor is inappropriate and/or overkill for relatively simple tasks they want to perform. That’s prompted me to create a couple of simplified block editors, including one for editing RSVP forms for events that’s included with the latest update to RSVPMaker.

To be clear, I’m not trying to reproduce all the work of the good folks running the Gutenberg block editor project. My editors don’t come close to the sophistication of the block editor, but they offer a simpler user experience for accomplishing specific tasks. That is, working with RSVP forms and Toastmasters agendas. These documents can contain other sorts of blocks — paragraphs, headings, and images — but the advantage of my specialized editors is that they are focused. Rather than having to hunt through the block inserter to find my specialized blocks — amidst all the blocks geared toward blog posts and web pages — I can present just the blocks relevant to my application.

For example, my equivalent of the inserter for this RSVP form editor just offers form fields:

For each block, there are also options to move blocks up or down within the document, change attributes, or delete the block.

The effect winds up being effectively the same as working with those same blocks in the WordPress block editor, where the field options are shown in the sidebar. Although my custom-built editor doesn’t allow you to add other blocks, it can move them up or down within the document without corrupting that content.

The secret to making this work is turning the WordPress document you want to work with into an array of JSON objects you can manipulate in your client-side application. You then send the altered version back to the server as JSON and have your server-side API turn that data back into block format that can be saved as the updated body of the post in question. Naturally, this requires some attention to detail to make sure the technique can’t be used to rewrite your home page into some hacker’s manifesto. But the tools for doing it securely are available within the WordPress platform.

Turning the content of any WordPress document into JSON turns out to be easy, with the use of a function called parse_blocks, shown here in an excerpt from my REST API code.

$form_id = (empty($_GET['form_id'])) ? $rsvp_options['rsvp_form'] : intval($_GET['form_id']); 
$form = get_post($form_id);
$response['form_id'] = $form_id;
$response['form'] = parse_blocks($form->post_content);
...
return new WP_REST_Response( $response, 200 );

This results in the data being downloaded in this format:

On the client side, I’ve got a React app — my first real foray into using React outside of creating WordPress editor blocks — that I use to add, delete, and rearrange items in the block array, preserving the structure of blockName, attrs (attributes) object, innerHTML (string) and arrays for innerBlocks and innerContent.

The altered array of block objects can then be posted back to the server, as shown below. In this example, I’m moving the Email field above First Name and Last Name.

On the server side, I catch this input, transform it back into blocks format, and use it to update the post.

$json = file_get_contents('php://input');
$data = json_decode(trim($json));
$output = '';
foreach($data->form as $index => $block) {
	if($block->blockName)
	$output .= rsvpBlockDataOutput($block, $post_id);
}
$updated['ID'] = $form_id;
$updated['post_content'] = $output;
wp_update_post($updated);

The function doing the work of formatting the content into block data — the comments-plus-JSON format that goes into the body of the post — is shown below. I suspect that there is a similar function in WordPress core that I could be using instead, except that I haven’t found it yet. Meanwhile, this seems to work perfectly well for every block I’ve tried it on so far, including those with nested innerBlocks content.

https://gist.github.com/davidfcarr/6e0a750f58c903b054323fd3ac0c8373

I’m omitting some details for the sake of making these examples clearer, such as the code for creating a new post rather than updating an existing one, but you can find my API code here and the JavaScript and script enqueuing functions here.

For client-server communication, I’m using the combination of React Query and Axios. React Query is supposed to simplify a few things, although I stumbled over many details such as getting optimistic updates to work and not using the async / await keywords correctly on my API get and post functions. I found this tutorial helpful in figuring out that part.

Let me know if you find this useful.

The editor of Florida Bulldog came to me a few months ago asking for ideas on how to stretch the budget of his nonprofit news website. He particularly asked if we could find a more economical alternative to Mailchimp, for which the subscription fee was rising with the size of his list. Florida Bulldog is an investigative news site, and whenever it publishes a new hard-hitting report, email is an important element of getting those stories read.

His query prompted me to take a closer look at Postmark, a reliable and cost effective service for email distribution. RSVPMaker makes it possible to compose email messages using the same WordPress editor you use to write and edit blog posts and other web content. Postmark integration allows you to distribute those messages to thousands of people, with Postmark handling the complexities of bounced emails and spam complaints. Like Mailchimp and similar services, Postmark can track how many people opened your messages and clicked on links.

“For me, this is a heck of a lot easier than dealing with Mailchimp!”

Dan Christensen, Editor and Founder, Florida Bulldog

Here’s how it works:

(more…)