How We Created Our Website Using the Block Editor

Published in Inside Nelio.

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:

Nelio Software Home 2016-2018
Nelio Software homepage 2016-2018.

to this:

Main page of Nelio Software (2019)
Nelio Software homepage (2019).

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:

Nelio Content's blog
First sketch of the Nelio Content blog design proposed by Silo Creativo.

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.

And then Gutenberg arrived.

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
Nelio Content page where we combine text and video
Nelio Content page where we combine text and video.

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.

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.

Creating a theme using underscores
Creation of the Nelio Software theme for the year 2019 using the starter theme “underscores”.

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:

Screenshot of the blog with the theme of 2019.
Screenshot of the blog with our 2019 theme.

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:

Combining text and images in Gutengerg is very simple
Combining text and images in Gutengerg is very simple.

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:

Example of a set of functionalities
Example of a set of functionalities on our website.

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?

Example of functionalities using a single block of columns
We combine a block of columns with multiple functionalities in each column.

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:

Horizontal alignment in columns
If you want to horizontally align the elements in a column block, the only solution is to create a new column block for each row.

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:

Shading images in Gutenberg
Shading images in Gutenberg using a CSS class.

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:

Block styles
Block styles in Gutenberg.

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:

Price chart with a custom Gutenberg block
Price table with a custom Gutenberg block.

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.

PoorNot badGoodGreatExcellent (No Ratings Yet)
Loading...

Leave a Reply

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

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.