In case you haven’t noticed, the appearance of our website changed slightly. We restyled our website, updating fonts, styles, color palette… moving from this:
to this:
But what’s most interesting about these changes is not how they look—we decided to rebuild our website from scratch so that it could become a completely block-based site. Today I’d like to explain to you how do we get from a custom-made theme based on page templates to another totally personalized theme that relies on WordPress blocks for everything.
Where We Come From
When we launched Nelio Content three years ago, we decided to completely reorganize all our websites and centralize our online presence under a single domain and brand: neliosoftware.com. Logically, one of the tasks we did was to contact Silo Creativo to help us design the image of our new website. Here you can see one of the first proposals they made:
When we gave the approval to that initial design, and following our requests, Ricardo and Verónica got down to work and implemented a custom-made theme with all the necessary templates for the different parts of our website: main page, blog, posts, help pages, … They designed everything and every single design was implemented into a page template. We had a fast page that was cumbersome to edit.
Understanding the Content of Our Website
The new WordPress block editor, Gutenberg, is a paradigm shift to the creation of content in a WordPress. Until now, creating pages was a tedious and unfriendly process for users, unless you were using a page builder. But Gutenberg came with a promise under his arm: creating visually appealing content in WordPress should be within reach of anyone. And we wanted to test this claim and see if we could really create a beautiful website relying on Gutenberg only.
If you had seen the web that we had previously, you will know that it had a simple and elegant design, including elements such as:
- Pages with a featured image that tooks the first fold
- Blocks with descriptive text and images and/or video
- Contact forms
- Legal pages
- Price tables
- Testimonials from our users
- Feature listings
Nothing too fancy, but interesting nonetheless. Could we create all this in Gutenberg? We thought so, and we tried to. This is what we did and what we found.
Nelio A/B Testing
Native Tests for WordPress
Use your WordPress page editor to create variants and run powerful tests with just a few clicks. No coding skills required.
Our New Theme
The first thing we did to design the new website was to create a theme from scratch. For this, we decided to start from the well-known starter theme “underscores”. It’s a super basic theme that comes with the minimal and necessary templates to have an operating WordPress theme, and it’s well documented and well organized.
Adapting underscores
Every WordPress theme has a set of pages that are common to all WordPress installations and independent of what content you end up generating on your website. I’m talking about, for example, the blog page where the last posts appear, the layout of a single post, the 404 error page, the search results page, etc. So the first step to create our theme using WordPress blocks is to adapt underscores to our own style so that these “generic” have the look and feel we want. And that’s what we did.
If you look at the previous screenshot, you’ll see that we downloaded the theme with the _sassify! option enabled, so the theme is downloaded with styles in SASS format, organized in multiple files and making it extremely easy to edit. It took us a few hours of CSS writing and some PHP customizations in functions.php, but we were able to get the theme just right:
WordPress Blocks As Building Blocks
Once we have an initial theme with which we feel comfortable (in our case, the theme that we created from the underscores, but in your case it could be a theme that you have found in wordpress.org, a premium theme you purchased some time ago, or even a custom-tailored theme like ours), it’s time to lay out all our pages using the WordPress blocks.
So, without further ado, let’s take a look at all the “challenges” we faced during this stage and how we implemented everything using WordPress blocks.
Default Blocks
The blocks that WordPress includes by default are a bit limited: paragraphs, images, galleries… Nothing too fancy—they all seem more focused on creating blog posts than page layouts.
But that’s OK.
It’s OK because, for starters, there’s plenty of pages on a website that look like blog posts. For instance, pages with legal information or a privacy policy and cookies are closer to a blog post than you might have first thought.
But it’s also OK because we can build beautiful pages with extremely simple components. For example, in we can combine text and videos. This is something we can easily achieve with Media & Text blocks:
Pretty close, huh?
Combining Default Blocks
Simple blocks can be extremely powerful when combined. For instance, consider the following screenshot, where we have a list of features:
How would one tackle this? Well, if you look at it carefully and logically, you’ll see that each feature is a combination of an image and some text (does this sound familiar?). Then, you’ll see we clearly have three columns so… what if we combine Media & Text blocks with a Columns block?
Not bad, we’re pretty close! When combining blocks, you have to be smart. Using a single Columns block means that features might not be properly aligned horizontally, as each column is organized independently from the other. To solve this problem you have to be a little cunning: instead of adding a single Columns block with multiple features in each column, let’s create multiple Columns blocks to make sure there’s only one feature in each column:
And BUM! Now we have three columns of features with properly-aligned rows.
Default Blocks With Steroids
There are cases in which the default blocks are close enough to what we want, but don’t look right. If we’re facing a visual issue, it’s very likely that we can solve it using CSS, and the best part is that Gutenberg works extremely well with CSS classes.
For example, if we want our image blocks to have an (optional) shadow, we can create a simple CSS class that adds the shadow to the image and then apply said class using the Advanced section of the image block:
The problem with this solution is that we are mixing the user interface with implementation details (the name of a CSS class). Why on earth should I know that there is a class called shadow that adds a shadow to an image? Well, this also has a simple solution.
The programming interface of the WordPress block editor exposes a function called registerBlockStyle to, as its name suggests, register block styles. Something as simple as:
registerBlockStyle ( 'core/image', {
name: 'image-with-shadow',
label: __( 'Shadow', 'nelio' ),
} );lets us register a new style for the image block (core/image) called Shadow that, when applied, results in the image block having the class has-style-image-with-shadow:
Custom Blocks
Finally, for those cases where no default block cuts it, you can create your own block (or use an already-existing third-party block). We implemented this solution in several cases: in Nelio Content and Nelio A/B Testing pricing tables, the map that appears on our contact page (which, by the way, was shown in depth in our post on how to create a block), and the results in terms of usability are impressive:
if you don’t know how or do not want to create your own blocks, I’ll leave you with some plugins that include additional blocks for many things:
Our Experience
A couple of months ago we decided that we had to renovate our website a bit and implement it using Gutenberg. Our goal was twofold: on the one hand, we wanted to update the website a bit and give it a fresher air. On the other hand, we wanted to learn more about Gutenberg, both at the user level and at the developer level. In the end, we managed to migrate the whole web to Gutenberg and the result has been an absolute success. We encourage you to do it too and, if you have any questions, do not hesitate to leave them in the comments.
By the way, today’s post was inspired by the talk I gave in WordCamp Lisbon 2019. Here you have my slides:
Featured image by Samuel Zeller on Unsplash.
Leave a Reply