Lessons Learned Redesigning A SaaS Website With Gutenberg

Never one to back down from a challenge, the team at Castos embarked upon the redesign of their website earlier this year with Gutenberg in mind. Here's a look at what they learned along the way.
Table of Contents

Sponsored Ad

If you purchase through a link on our site, we may earn a commission.

The release of WordPress 5.0 in December 2018 was a landmark event for the WordPress world. We all knew the introduction of the Gutenberg editor would change much of how we all build, interact with, and manage our sites.

And overall it has been a very smooth transition.

But while we all know the best practice is to keep our sites up-to-date with the latest and greatest WordPress has to offer, changing the editor is a big step and something that (maybe rightfully) has caused some to slow their adoption of the block editor.

Indeed maybe you shouldn’t rush into taking the leap to rebuild a site for your business or clients in the new block editor environment.

Never one to back down from a challenge, our team at Castos embarked upon the redesign of our website earlier this year with Gutenberg in mind.  We learned a LOT along the way and wanted to share much of that newly gained knowledge with you here.

Known Limitations Of The Native Block Editor

While the new editing environment is a vast improvement over previous versions, it may lack some key elements you would like to see on your site. Some of these extensions are not yet available in the native editor or even through third-party block packages.

Third-party block packages do offer a lot of unique choices outside of the core blocks, but beware, some of their settings and features do not work across all blocks. Additionally, if you use several different sets of 3rd party block add-ons you may get different styles and looks on your site that are difficult to standardize.

After working with a few, we opted to use one primary block package that had the most features we were using and played nicely with WordPress core blocks.

Working in this way, we were able to maintain consistency while getting the most functionality.

A theme by any other name

Once you are ready to get started, you’ll need to select a theme. For our design, we moved away from the Genesis framework that had served us well for years until now, opting to create a child theme from a Gutenberg-first theme, Atomic Blocks.

There are many themes that are β€œGutenberg” ready, including Genesis, but knowing that the blocks were going to do the heavy-lifting building the site, we opted for a very minimal, lightweight theme that provided only what we needed without a lot of extras that would get in the way.

Block considerations for your theme

You’ll also want to make sure your theme has a wide-open basic page template to work with that takes advantage of the two new alignment options align wide and align full. Check if your theme is set up for

add_theme_support( 'align-wide' );

in the functions.php file and be sure to add support for this if it is not present.

Increased Productivity Using Gutenberg

There are a few areas working in the new Gutenberg editor that can save you time by allowing you to reuse page elements across your site.

Reusable Blocks

The new Reusable Block feature is great for content that will not change from page to page, like a call-to-action. You can quickly assemble a group of blocks and save the grouping to use later.

We use this most commonly on what we call our β€œCTA Block” which is present on our homepage and just above the footer on most pages.

Castos CTA block

Copying Blocks Between Pages

Likewise, if you put together a great layout for landing page that you know you will want to reuse, you can copy the block layout and save it to a new page by going into the Inspector Controls, switching to the Code Editor view, copying all of the block elements for that page, and pasting them into a new page.

On our site we used this method to bring the format of pages across on many of our specific feature pages. So they all have the same look, feel, and format, and our marketing team is free to edit just the content for each page.

Block Level CSS Selectors

In a few places, we found the ability to add a custom CSS selector to a block a great way to quickly target an element to make a style change. While not the most concise way of writing CSS, it can be useful in a pinch.

Specifically, we did this to add some shadowing and effects to the Testimonials block that GhostKit provides.

Castos Testimonial block

Between a block and a hard place

Our front-end visitors won’t notice the changes going on behind the scenes in the new editor. But these changes have a huge impact on admin users.

Our admin users now have more flexibility, which is a big win. But this comes with a price tag that can mean being overwhelmed by having to make too many design decisions.

For theme and plugin developers, we will need to ensure that the new editing experience remains flexible and easy as intended, while carefully considering the options provided to admin users.

In the Castos redesign experience, we tried to provide guide rails to make creating new pages and posts in the future quick and painless. This included providing a few customizations to the Gutenberg Inspector Controls sidebar like a color palette and limiting block styles.

If your theme is Gutenberg ready, adding a color palette can be quite simple by adding theme support for the editor-color-palette. This snippet will do the trick:

add_theme_support(
	'editor-color-palette',
	array(
		array(
			'name'  => __( 'independence', 'castos-theme' ),
			'slug'  => 'independence',
			'color' => '#555471',
		),
		array(
			'name'  => __( 'payne grey', 'castos-theme' ),
			'slug'  => 'payne grey',
			'color' => '#5F5D7E',
		),
	)
);

Then our admin editor only needs to select the color and not try to remember the HEX value each time a color needs to be set.

If your site has a style guide already created then loading this right into the color picker will mean consistent colors across your site without any room for error.

Taking it one step further

Similarly, you can take this level of customization one step further by extending existing core blocks by using Block Style Variations. This method scores a big win for usability just like the color palette because you add functionality exactly where the admin user expects to find it β€” within existing block settings.

The best place to consider employing this technique is on the button block.

Most block packages and plugins offer their own button version, which quickly adds up to lots of buttons and button styles.

If you’re looking to maintain any type of consistent style on your site, limiting the options here for your admin user is a good idea because it becomes hard to keep track which button to use.

You can also make it easier for your admin by turning off button blocks you will not use. Many of the block packages have this functionality built-in to their block settings in the main dashboard. Eliminating the extraneous options can make it much easier for your admin user when they are creating a new page.

Making the most of Page Templates

Considering that page building is primarily now done in the editor, page templates are also evolving.

In our redesign we allowed for a new page template that would remove the page title, opening the space to use a Heading Block from our primary header block package.

Reusable blocks in locations like this didn’t work for us because the content of the reusable block needs to be the same. In this instance, you could also code a block template for the admin user to select from that loads the necessary blocks without content so the admin user doesn’t need to reinvent the wheel each time.

This is perhaps the only place in the entire block editor experience we were looking for something we couldn’t easily find: Block Templates.

A β€œBlock Template” would be something similar to a reusable block but where the content is easily changed for each instance where the block is used. We would’ve liked to use it in the secondary feature section in our homepage design.

Here the layout and structure of each of these 3 blocks are the same but all of the content is different.  So something like a Block Template would be ideal to save us time of reinventing the wheel each time we want to create one of these sections.

In Hindsight

Designing and developing a theme in the new block editor is a balancing act between providing the style that determines the look and feel of your site as well as the UI for your admin user to create pages that are consistent for your overall site design.

While the new editor provides an incredibly flexible experience, when considering your redesign using Gutenberg you’ll be much more successful in maintaining a consistent style guide creating a child theme that provides front end style in combination with guide rails that will eliminate design fatigue for the admin.

Overall the entire Castos team, design, development, and marketing, have all been very happy with the outcome of our site redesign with using a Gutenberg first approach.

A few months after the relaunch we’ve found it particularly nice to be able to create new content that has a very similar, highly styled, look and feel as the existing content on the site.  This style consistency goes a long way towards providing a positive experience for site visitors, and should ultimately mean more conversions and happy customers.

Sponsored Ad

If you purchase through a link on our site, we may earn a commission.

All suggestions are anonymous.

More from our blog...

5 Responses

  1. It was a good article,Gutenberg make it easier for those just starting with WordPress. It is more flexible and easy for editing themes and its also very use full in Copying Blocks Between Pages.

  2. Good article, I am still using classing editor through installing a pligin. In English gutenberg is well. but in other languages ,especially arabic and urdu it is horrible.

  3. I agree. Most of my experience with it is very solid and it offers a lot of flexibility over the Classic Editor. But some things do take some getting used to.

    Generally I’m really interested to see how Gutenberg affects Theme development/features in the future. We didn’t hardly use any conventional Theme work in our site redesign, just block based customization.

  4. Craig,

    It’s going to be a year with Gutenberg. And, somehow I am getting good at working on blocks – Gutenberg. After using it only, one could realize what they were missing in the traditional WordPress Classic Editor. Still, I have to go a long way in redesigning or anything. Indeed, I am coping to manage with Gutenberg to draft and publish new posts and pages that require fewer blocks and layouts.

Post a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Stay updated with WP Mayor's newsletter showcase every week

Stay on top of every new WordPress innovation and latest launches. Receive all our fresh product reviews and expert guides directly in your inbox.

Hosting Survey 2024

Are you happy with your hosting provider or are you over-paying for too little? Have your say below!

"*" indicates required fields

What's the main reason you picked this host?*
How happy are you with your host?*

OPTIONAL: If you'd like to receive the results of this survey, please enter your details below.