A Free WordPress Theme For Gutenberg
The Block Lite theme is a free WordPress theme. It’s designed to work seamlessly with the upcoming “Gutenberg” content editor.
Embracing Gutenberg
Gutenberg is the controversial new block editor for WordPress. It lauched with the release of WordPress 5.0. The editor is controversial for a number of reasons, but it boils down to this:
WordPress is the most popular website Content Management System, or CMS. Adding content within WordPress has been roughly the same experience since its release over 15 years ago. Gutenberg changes that experience, entirely. While we think this is a positive step forward for the software, it’s easy to see why this change could ruffle a few feathers.
As for Organic Themes, we have embraced Gutenberg. Since its announcement, we’ve been experimenting with the new editor. First, we developed a free custom block for creating personal profiles, and added it to the WordPress.org plugin repository. Then, we published a popular tutorial, outlining how to build a custom block for Gutenberg. Now, we are releasing a free theme designed to work seamlessly with the Gutenberg editor — the Block Lite theme.
We want WordPress users to embrace the new editor as we have. Our goal is to promote early adoption of the new editor, because it is the future of WordPress. So, we are releasing the free Block Lite theme for Gutenberg.
Not only does the theme work seamlessly with the new editor — it’s also a really cool theme!
What Makes A Gutenberg Theme?
So, what makes a theme Gutenberg compatible anyway? Honestly, it’s quite simple. First, it requires the function to support wide and full width block layouts:
In addition, a Gutenberg theme requires styles for the new alignment classes. For instance:
.alignfull {
width: 100vw;
left: calc(-50vw + 50%);
margin-left: 0px;
margin-right: 0px;
}
.alignwide {
width: calc(100% + 96px);
left: -48px;
margin-left: 0px;
margin-right: 0px;
}
Beyond the functions and styles, there is another Gutenberg theme prerequisite — simplicity.
Gutenberg promotes simplicity within WordPress themes. For years, many theme developers have continually piled heavy functionality into WordPress themes. We refer to these types of themes as “Monster” themes. They try to be everything to everybody. As a result, such themes are bulky, slow, confusing, and often cause severe conflicts with plugins. Gutenberg reduces the need for Monster themes. So, a proper Gutenberg theme should be simple, but don’t take my word for it…
Tammie Lister is a core WordPress contributor and the design lead for Gutenberg. She emphasizes the importance of theme developers first getting better at creating themes that do not try to do everything. The basic purpose of a theme is to style the frontend and provide an editor style.
Block Lite Theme Setup
The initial setup of the Block Lite theme is simple. However, the layout and functionality can be molded to meet your needs using tools like Gutenberg and Organic Builder Widgets. In this section, I’ll outline the basic setup process beyond the installation and activation of the theme.
Blog Setup
By default, the theme should display a blog page of your uncategorized posts. A category of your choosing can be selected within the WordPress customizer.
- Navigate to Appearance > Customize > Homepage Settings.
- If you would like the blog to display as the home page, make sure “Your latest posts” is selected. Please note: existing posts will need to be published to be visible in the preview window.
- While still in the customizer, navigate to Theme Options > Blog Options.
- Select the desired post categories you wish to display on the blog.
- Publish your changes.
Homepage Setup
Setting up a homepage is a similar process. However, you will select a static page to display rather than your latest posts.
- Navigate to Appearance > Customize > Homepage Settings.
- Select the “static page” option.
- For Homepage, select an existing page that you would like displayed as your website homepage.
- For Posts page, select an existing page on which you would like blog posts to be displayed. Keep in mind, no page content will be displayed on that page, only posts.
- Publish your changes.
Taking Your Homepage To The Next Level
Now comes the fun part — building a custom layout for your homepage! This will take a little more effort and creativity on your part. While there are many ways to accomplish this using a variety of page builders, we recommend a couple free WordPress compatible options:
Using Gutenberg Blocks
Building a unique homepage can be accomplished using blocks on a full width page template within the Gutenberg editor. This is how we recommend starting the process.
- Close the customizer after selecting your static homepage.
- Make sure the latest version of the Gutenberg plugin is installed and activated by navigating to Plugins > Add New, and searching for “Gutenberg”. Please note: This should not be necessary after the release of WordPress 5.0.
- Navigate to the page you selected for your homepage under Pages > All Pages.
- Within the “Document” tab on the right, apply the “Full Width” template under Page Attributes.
- Within the Gutenberg content editor, begin adding your content in the form of blocks.
As you build your homepage using blocks, use a variety of available blocks to change the layout and formatting of your content. Since you are using the full width page template, you can optionally make many blocks extend the full width of the browser window.
Using Organic Builder Widgets
The Organic Builder Widgets plugin can also be used to create dynamic page layouts. It provides a collection of 12 custom widgets. Each widget acts as a separate page section, such as testimonials, content slideshows, feature lists, etc. The widgets are added to a page within the WordPress customizer.
- Close the customizer after selecting your static homepage.
- Make sure the latest version of the Organic Builder Widgets plugin is installed and activated by navigating to Plugins > Add New, and searching for “Organic Builder Widgets”.
- Navigate to the page you selected for your homepage under Pages > All Pages.
- Within the “Document” tab on the right, apply the “Organic Custom” template under Page Attributes.
- Enter the customizer again, and begin adding widgets to the page.
You can see exactly how your page will appear while building it within the customizer using the Organic Builder Widgets. Additionally, Gutenberg blocks can be displayed within page sections using the Subpage Widget provided by Organic Builder Widgets.
For more help using Organic Builder Widgets, please refer to our tutorial.
That’s it! We hope you enjoy the Block Lite theme, and this article has helped guide you through the process of building a beautiful website using Gutenberg and Organic Builder Widgets.
