At Upstatement, we use a variety of content management systems to power the websites we build. When choosing the right CMS for the right job, one of the factors we consider is what the client needs from an editor. Are they publishing straightforward content, consisting mostly of text with an image or two? Or are they creating content interspersed with calls to action, image galleries, related content links, and more?
Each CMS has their own approach for solving for these types of features. Now with the recent release of Gutenberg, WordPress is offering a new approach which we believe has the possibility to greatly enhance the workflow for creating content on the web.
Here is a common scenario we encounter when defining the editor experience for a client:
They have a long article in which they’d like to be able to insert a call-to-action to allow a visitor to sign up for their email newsletter. These are some of the options that we’ve explored or implemented for such a scenario:
- Just paste the raw HTML. This is quick and easy but also pretty terrible in many ways. Editing this type of content in a WYSIWYG is a nightmare. The WYSIWYG itself might try to modify the HTML, especially if it contains javascript. It’s not a user-friendly process and is prone to error.
- Use shortcodes. This isn’t a bad option, especially when paired with a plugin like Shortcake. However, as the number of options for the shortcode increases, so does the challenge of making this a clean process. This is especially true when adding custom fields such as images or post relationships.
- Make use of Advanced Custom Field’s Flexible Content fields. This was one of our favorite approaches, as it easily allowed a user to add a call to action module with a clean and powerful interface. Unfortunately, the actual creation of a piece of content was now more involved and less intuitive, since the pieces of textual content would have to be inserted manually. This broke up the flow of the text and made interactions such as pasting in the full text from another editor to be impossible.
This challenge was not limited to WordPress. In fact, it’s even harder in other CMS’s that we otherwise love such as Craft and Contentful, as they lack WP’s features like shortcodes or flexible content.
So we were excited when we began work on the new site for the Center for Public Integrity (CPI) and saw the potential for how Gutenberg could be a perfect fit to improve their content creation process.
In comparison to a short news brief that might be quickly created within WordPress itself, CPI often writes long and detailed articles created and edited by many people at the organization. It is only when the article is ready for publication that it is sent to the web editor.
Out of the box, Gutenberg already offered several improvements to the article creation process for CPI. One is the quote block, which has support for citations and multiple styles. Another is the easy ability to embed services such as SoundCloud and YouTube.
In planning the strategy for the site, we discovered several opportunities to create custom Gutenberg blocks. One of these opportunities was to allow an editor to insert a styled block of text which describes the mission of CPI and a link to their about page.
This can now be done in one click. The content of the block is controlled by a global custom field, which ensures the text is consistent and can easily be updated across the site in the future.
Another component CPI requested, and one that we often need, is the ability to add links to related articles. However, instead of being limited to showing these below the article, we wanted to allow them to appear alongside the article at a specific point where the copy might be most relevant to those related articles. This was another ideal scenario for Gutenberg blocks.
This time, instead of creating a completely custom block, we used the brand new block creation features of Advanced Custom Fields. In no time we had a new custom block created that used handy relationship fields allowing for easy selection of related content.
At this point, we felt as though Gutenberg had already proven its worth. Over the course of the project, we added two more custom blocks: a more powerful gallery and email signup.
It is difficult at this point to imagine using an editor without Gutenberg’s capabilities for a client looking for an easy way to create feature-rich stories.
