The Client Authoring Experience in NuxtPress

by Matthew Hinton, Senior Developer

In Part 1 of this series, I explained why 2wav likes the WordPress backend, even with a custom built frontend. We can go way beyond standard WordPress features while still offering a familiar authoring experience.

Our preferred client authoring experience is the Gutenberg block editor that many people are already familiar with.

Over 30% of websites worldwide are built on the WordPress platform. 62% of the top 100 fastest growing companies in the U.S. (Inc. 5000) use WordPress. WordPress is popular because it has a huge plugin ecosystem. If you need to add functionality to WordPress, there is very likely already a plugin that does what you need. The community of WordPress developers and users is enormous. Getting developer or user support is much easier with such a large community.

Clients have an easy time with our NuxtPress approach because WordPress provides the authoring functionality via the Gutenberg block editor. The content creation system can be customized to their content.

The block editor allows us to work with our clients and develop custom blocks for their specific content needs. When we started development with our clients several years ago, the block options in the editor were limited. We were still able to develop custom accordion blocks and image aside blocks for our clients’ special content. Below is the custom accordion block on the backend followed by how it looks on the frontend.

Although the block editor is not WYSIWYG, that is an advantage. It puts the focus on the content rather than the page layout. All the page layout, including responsiveness, is handled by the frontend. The author has no need to worry about—and can’t break—the layout. The preview feature allows unpublished content to be viewed as it will appear online, and edits can be made before going live.

The block editor is simple and clean. A button opens the array of blocks on the left; content is edited on the right:

A navigator shows every block on the page in a list:

2wav provides our clients with tutorials via screen share so they feel confident in authoring new content using the blocks. We encourage them to use good SEO practices, like alt text and hierarchical headings.

WordPress makes regular updates that sometimes change behavior in undesirable ways. Our NuxtPress GraphQL layer can usually fix those problems without need to change the WordPress content. For example, WordPress added hard coded image sizes that stretched images all out of whack. We remove those values before rendering in our Nuxt UI.

In my next post, I’ll address the Nuxtjs development experience including the GraphQL query interface.