Unfortunately, page builder plugins have been hammered into the brains of WordPress users through relentless advertising, evangelists, and supporters that have claimed they are a necessity.

Don’t get me wrong. WordPress page builders have served a need in the ecosystem for many years. However, their “need” is coming to an end. The introduction of full site editing and block themes within WordPress 6+ renders most page builders obsolete — when using the right theme.

Don’t worry. Page builders won’t go quietly into the night. They are too engrained within the psyche and workflows of too many WordPress users to simply disappear. And they shouldn’t disappear. The users that love their page builders should continue to keep using them. But I wouldn’t be so quick to dismiss using WordPress blocks and a block-based theme without the use of a page builder.

A customer recently approached us, confused about switching themes and abandoning their beloved builder plugin. They wanted to simplify their WordPress page building experience. I proceeded to explain that we have a block-based version of the theme they were using — the Natural Theme.

However, they were struggling with the concept of no longer using their page builder. So, I proceeded to explain by providing the following response:

I’ll try to provide some clarification regarding page builders. If you’re using the latest version of WordPress (Version 6+), and a block theme like our previously suggested Natural Block theme, a page builder plugin is entirely unnecessary.
​
​As of WordPress version 6, a new way of customizing a theme’s design and page layouts was introduced using the full-site editor in combination with a block-based theme. As a result, every aspect of a block-based theme can be customized directly in WordPress — without the need for a page builder plugin.
​
​Unfortunately, there are not many block-based themes available yet in the ecosystem because this new approach to building WordPress themes is so different when compared to the way that themes have been constructed for the past 15+ years. Since the WordPress ecosystem is comprised of many third-party product developers (like ourselves), many companies that have aligned themselves with a builder plugin are reluctant to switch to this new way of constructing themes because it means changing their entire business model — and probably rebuilding all their products.
​
Since ​we never aligned ourselves with any builders other than our own, we have remained more flexible in this regard. As a result, all our focus is now being poured into block-based themes and the new WordPress editor.
​
​In truth, the new way of building pages in the block editor is superior to using a builder plugin. Essentially, builder plugins rose to popularity over the past 8+ years because a solution for customizing every aspect of a theme did not exist within the WordPress platform itself. However, that has all changed with the recent versions of WordPress. Plus, it’s getting better with every new update.
​
​Builder plugins should still technically “work” with block-based themes and the latest versions of WordPress. And some still offer unique functionality you can’t find using blocks — yet. However, most builder plugins are unnecessary. In my opinion, they just confuse the process of customizing a WordPress theme by introducing a different user experience. I think the best way to simplify the page building experience in WordPress is to stop using a page builder plugin, and start using the WordPress block editor in combination with a block-based theme.

I wanted to share my response because I believe this a common misunderstanding amongst so many WordPress users. Like most things in our world these days, there is an overwhelming amount of information and misinformation regarding this topic.

Gutenberg, the full-site editor, block-based themes — they are all relatively new introductions to WordPress. And honestly, the introduction of these new features and technologies has created a rocky transition for many users, developers, and product providers like ourselves. Change is hard. However, as somebody who has been intimately involved in designing and developing WordPress products for nearly 15 years, I approached this transition with an open mind. I’ve discovered the new solutions are great, and they keep getting better. So, it might be time to abandon that clunky old page builder, and try a block-based theme.

Organic Themes was among the first companies to release a free block within the WordPress plugin directory — the Profile Block. Additionally, we were the first to publish a tutorial on How To Create A Custom Block For Gutenberg. An article that was copied by many.

As partners of Automattic and WooCommerce, we’ve kept a watchful eye on Gutenberg since its inception. We have witnessed new blocks introduced into WordPress, Jetpack, and WooCommerce over the past year. Since Gutenberg is rapidly evolving software, it was important that we didn’t duplicate any of those existing blocks within our collection.

So, we created a suite of blocks designed to compliment the existing blocks in the Automattic arsenal. The result is the Organic Blocks Bundle. A useful collection of 9 purposeful blocks.

Many Organic Blocks are designed to display existing WordPress content. Additionally, we chose to develop these blocks using the ES5 Javascript syntax. As a result, Organic Blocks can be edited on a web server without the need to compile changes. That’s a big deal. It means our blocks are customizable — even for amateur WordPress developers.

The Blocks Bundle

The Organic Blocks Bundle currently includes 9 premium WordPress blocks. However, more blocks will be added in the future. Now, let’s introduce the existing blocks! They’re pretty awesome.

Content Slideshow Block

The Content Slideshow Block is the easiest way to create content sliders using the WordPress Gutenberg editor. The block displays a featured image, title, excerpt, and a “Read More” link from any post type. Additionally, several options are available for modifying the style, colors, display, and more.

Learn More

Posts Block

The Posts Block displays any post type within a blog style layout. Block options allow for the change of colors, style, layout, and more. It’s an excellent tool for showcasing relevant blog articles, products, or other post types on any page using the Gutenberg editor.

Learn More

Portfolio Block

The Portfolio Block is perfect for showcasing any post type within a portfolio. Each portfolio item displays the title when hovering over the image. Additionally, a Pinterest pin button displays. As a result, users may pin individual portfolio items to their Pinterest account. The block includes several options for modifying the portfolio style and layout.

Learn More

Profile Block

The Profile Block displays personal profiles. It’s an excellent tool to display author biographies, team members, or employees throughout your website.

Organic Themes released a free version of the block in the WordPress plugin directory. However, the Profile Block included in the Organic Blocks Bundle features several more options. Additionally, unlimited social media icons may be added to the block.

Learn More

Testimonials Block

The Testimonials Block displays a selected post type within a testimonials slideshow. Display multiple testimonials per slide, and change the colors, layout, and style within the block options. It’s perfect for showcasing client and customer testimonials throughout your website.

Learn More

Pages Block

When building a custom home page or landing page, it’s common practice to direct visitors to other pages throughout your website. The Pages Block serves this purpose. Simply add the block within the Gutenberg editor. Then, select the pages you wish to display. Additionally, several block options are provided to modify the colors, style, and layout.

Learn More

Header Block

A header is arguably the most important element of any website. Typically, it displays your website branding and navigation. The Header Block provides full control over your header logo, layout, information, and navigation. It’s an essential tool as WordPress themes and the Gutenberg editor transition into a full-fledged site building experience.

Learn More

Footer Block

The footer is the bookend of your website. Typically, it contains important website information, and secondary navigation. The Footer Block places the control of the footer design and information within your hands. Display copyright information, branding, social media links, and more. Additionally, the block provides options to change the style, layout, and colors.

Learn More

Widget Area Block

There are hundreds of traditional WordPress widgets. Typically, widgets display within “widgetized” areas of a WordPress theme — like sidebars and footers. However, some widgets may be useful within specific page or post content. That’s why we developed the Widget Area Block for Gutenberg.

The Widget Area Block creates widgetized areas anywhere you like within the Gutenberg editor. As a result, traditional widgets can be added anywhere on your site.

This block is useful for displaying advertising widgets throughout your content, or an event calendar widget within a related article, or countless other examples. It’s a particularly powerful block when combined with the Builder Widgets plugin. As a result, the power of Gutenberg and Builder Widgets can be utilized together.

Learn More

Additional Organic Blocks Bundle Features

ES5 Development

What the heck is ES5 Development, and why use it? Well, I’ll get to that. But first, if you’re not a WordPress developer, designer, or power user — you can skip ahead. This probably doesn’t concern you.

WordPress is open source software. As a result, a community of contributors, comprised of volunteers, individuals, and small businesses developed the platform, and a majority of the supporting products. Most contributors are self-taught developers, including myself.

React.js is the coding language of Gutenberg. At first, this outraged much of the WordPress community. Prior to Gutenberg, WordPress was primarily developed in the PHP coding language. Most self-taught developers have spent the last 10 years learning PHP development for WordPress. Now with the release of Gutenberg, WordPress is moving to an entirely new code foundation.

It’s like you’ve been perfecting the German language for 10 years, and then the country of Germany suddenly changes their official language to Japanese.

The biggest hurdle for React.js development is the need to compile your code for the web after making changes. Meaning, you can’t simply edit the code of a React.js plugin on your server, and expect it to work properly. As a result, it makes the work of freelance WordPress designers, developers, and power users much more difficult. In some cases, it’s an impossible hurdle.

ES5 to the rescue!

ES5 Javascript, or ECMAScript 5, doesn’t require compiling for the web. Meaning, you can edit ES5 code directly on your web server. So, you don’t have to be a Javascript genius to make a minor edit to Organic Blocks.

That is why all Organic Blocks are developed using ES5. So, even amateur developers can edit the code for Organic Blocks. Plus, they’re a great asset for learning how to build Gutenberg blocks in the ES5 syntax.

Server-Side Rendering

The blocks included with WordPress and Jetpack are excellent tools for building content from scratch. However, they are not particularly useful for displaying existing content. That’s where we come in.

Many of the blocks included in the Organic Blocks Bundle utilize server-side rendering. Meaning, they display data that already exists on your web server. For instance, perhaps you have a website with hundreds of published posts and pages. Organic Blocks allow you to display that content on other pages. Plus, the content renders in the editor exactly as it appears on the site.

No Unnecessary Blocks

Some block collections contain blocks that already exist in the Automattic arsenal from WordPress, Jetpack, or WooCommerce. Additionally, some collections include blocks that can be recreated using a simple combination of core blocks. We consider such blocks as unnecessary clutter.

With the Organic Blocks Bundle, there are no duplicate or unnecessary blocks. We believe in quality over quantity. As a result, we didn’t include yet another Spacer or Columns block in our bundle. Each block serves a real purpose.

Simple Usage

A good product should be so easy to use that documentation is unnecessary. Blocks are already simple. Once you understand how to use one block, you should know how to use any block. Since Organic Themes follows WordPress standards, this rings true for Organic Blocks. The purpose and options for each block is self explanatory.

We’re confident the Organic Blocks Bundle will help you create beautiful custom WordPress pages with ease. It’s one more step towards the Gutenberg editor becoming a full fledged website building solution.

After upgrading from WordPress version 4 to version 5, previously created content is contained within the WordPress “Classic” block. Converting that content into individual blocks requires editing each page and/or post separately. If you have several posts and pages in need of conversion, it’s a long and tedious process.

The Bulk Block Converter plugin vastly improves the process of converting old content to blocks. The plugin scans all of your WordPress content for posts and pages that contain the “Classic” block. Then, it returns a list of all content available for conversion. Choose to convert content individually, or bulk convert all posts and pages to WordPress blocks.

Who Needs This Tool?

We discovered the need for this tool when updating our theme demos to WordPress 5. Many of our demos were created several years ago, before the release of WordPress 5 or the Gutenberg editor. On average, our theme demos contain 50 posts and pages. With over 40 themes, you can see how editing over 2,000 posts individually could be a cumbersome process. In fact, it would take days.

I searched the WordPress plugin directory for a solution. It didn’t exist. Surely, we couldn’t be the only ones encountering this problem…

WordPress is the most popular platform for websites and blogs — for over 10 years. As a result, there are millions of sites created using the platform. Many of those websites contain hundreds, even thousands, of posts and pages. You can do the math. That’s a ton of content that needs to be converted to blocks!

The Bulk Block Converter plugin is a necessity for WordPress web designers that maintain client websites. Additionally, it’s an excellent tool for users and bloggers that are ready to make the transition from the WordPress classic editor to the new block editor.

Why Convert Content To Blocks?

The fact is, the WordPress block editor IS much better than the classic editor. Plus, it’s gets better with every new WordPress update.

Eventually, you and your clients should use the block editor. Otherwise, it’s stunting the progression of the WordPress platform.

Judging from the 5+ million active installations of the Classic Editor plugin, there are still millions of sites that should transition to the block editor. The Classic Editor plugin is great. However, it should be a stop-gap measure — a short term fix before fully transitioning to the block editor.

If you’re like me, I can’t stand the thought of some posts and pages existing in the old classic content form, while others use shiny new blocks. For consistency, I prefer the same editing experience across the board. Additionally, it’s much less confusing your clients, rather than alternating between two editor experiences.

The Bulk Block Converter plugin provides an easy transition to the WordPress 5 block editor. Plus, it’s totally free! No more excuses! Migrate all your WordPress content to blocks with ease today.

As always, if you like this free plugin, we would greatly appreciate a positive review. It only takes a moment!

In addition to the Gutenberg optimization, we have made some other theme updates that existing users should be aware of.

New Portfolio Style Blog Layout

Upon activation of the latest Portfolio and Portfolio Lite themes, if your homepage is set to display “Your latest posts,” posts will now display in a 3 column, portfolio style layout. A Featured Image or Title will display for each post, rather than the full post content.

With previous theme versions, the latest posts on the default blog displayed in a more traditional, single column blog layout. However, we felt that since this is a Portfolio Theme, it should look like a portfolio upon activation. So, we made this change as of Portfolio Theme v6.3 and Portfolio Lite 1.3.

If your blog suddenly changes, don’t panic! We’ve also included a new blog page template with both themes. So, you can still have the same traditional blog layout. It will just require a different setup process. For creating a traditional blog, follow these instructions:

1. Navigate to Pages > Add New.
2. Add a Page Title (Usually “Blog”).
3. Select the “Blog” template from within the Page Attributes section.
4. Publish the page.
5. Add the page to your Custom Menu.
   

Voila! It’s that simple. Your new blog page will display as it did with previous theme versions.

Adding Slideshows With Gutenberg

Gutenberg replaces the traditional WordPress image gallery with the new Gallery Block. This is great! The Gallery Block looks way better than the old WordPress image gallery.

However, the Portfolio Theme uses the traditional WordPress gallery for creating and managing slideshows. The theme accomplishes this by taking the first image gallery added to your post content, and using those images to create a slideshow. It’s a clever bit of code that we’re quite proud of. Unfortunately, the Gutenberg Gallery Block does not perform this way.

Never fear, you can still add a traditional WordPress gallery to your content within Gutenberg for managing slideshows! This is accomplished using the Shortcode Block.

The WordPress Gallery shortcode looks like this:

Within a post, or page with the Slideshow Page Template applied, add a Shortcode Block as pictured above to your content. Change the image IDs to match the order and IDs of the images you wish to be displayed in your slideshow. Then, publish or update the page.

After adding a Gallery Shortcode to your post or page content, the images will display in an elegant slideshow on your website.

That’s It!

We hope you enjoy the Portfolio Theme updates!

Organic Themes has always developed products with “no added hormones”. We believe less is more, and focus on optimizing our products for WordPress specific features and functionality. As a result, Organic Themes are prepared for Gutenberg. However, there are additional steps that can be taken to optimize your WordPress theme for the new WordPress 5.0 content editor. We’ll get to that. But first, let’s make sure you understand what Gutenberg is, and why it’s a big deal. If you already know, skip ahead.

A Brief History Of Gutenberg

Gutenberg is the name given to the new content editor that will launch in late November with the release of WordPress 5.0. It’s perhaps the most significant update since the release of WordPress 3.0 — over 8 years ago. The new editor will change the way in which website content is added using WordPress. The “classic” editor will be replaced with a new block editing interface. As a result, content will be added in the form of “blocks”. Those blocks can be individually manipulated and moved, adding much more control over the display of your content.

Let’s compare:

It’s a much needed update in order for WordPress to continue its reign as the best content management platform for websites. However, the change is surrounded by controversy. The Gutenberg plugin has many scathing reviews in the WordPress plugin directory. In fact, the most downloaded Gutenberg related plugin is the Disable Gutenberg plugin. Despite the backlash, Gutenberg has come a long way over the course of its beta development. As of this article, Gutenberg is a solid content editor, and a vast improvement over the classic editor in our opinion. There is no reason to fear this change.

If you’re still concerned about converting your old page and post content to Gutenberg blocks — remember, you don’t have to. All your old content will exist in the classic editor block until you choose to convert it. Basically, nothing will change unless you want it to. Upon converting the content to blocks, the worst case scenario will be addressing some spacing and alignment issues.

Organic Themes has been using and testing the Gutenberg editor since its announcement last year. We were among the first WordPress theme shops to embrace Gutenberg — releasing a free Profile Block plugin, tutorial and the optimized Block Lite theme. So, we know what it takes to optimize a theme for the new editor.

Optimizing A Theme For Gutenberg

While preparing your WordPress theme for Gutenberg compatibility may not be a necessity, there are steps that can be taken to optimize your theme for the new editor. That will be the focus of this article moving forward.

Full And Wide Alignment Blocks

Gutenberg provides several options for the various block types included with the new editor. Among those, is the option for wide and full width block alignment. Meaning, the block can extend beyond the width of your content, or even the full width of your browser window. However, this option is not enabled by default. It requires adding theme support and styles to take advantage of this new feature.

For the purposes of this tutorial, I will be providing code from our Gutenberg optimized starter theme, the Origin Theme.

Adding Theme Support

First, let’s begin by adding support for wide alignment blocks within your theme functions.php file:

Conditional Sidebar Classes

Before adding the block alignment styles, we need to determine if there is a sidebar present on the page. If your page contains a sidebar, you probably do not want a block extending to the full width of the browser window. This is because the wide or full aligned block would probably cover your sidebar widgets — creating undesirable results. So, we need to add a conditional body class to the theme that determines whether or not a sidebar is present on the current page. Then, we can use the conditional class in our block alignment styles.

A conditional body class can be added within your theme functions.php file like so:

Keep in mind, the body class code provided above will most likely need to change depending on the names and number of sidebars provided with your theme. In our case, the Origin Theme features the option for a single sidebar on pages and posts. Additionally, the theme contains a full width page template and WooCommerce compatibility. As a result, conditional operators are used to account for those unique pages and post types. Your theme may need more or less operators, depending on the number of sidebars, page templates, and custom post types supported by your theme.

Wide And Full Block Styles

Confirm that the sidebar class is conditionally added to the body tag of your website by inspecting the code. Then, begin adding the conditional block alignment styles:

Additionally, for a responsive website, you should add mobile styles for the wide and fully aligned blocks. This can be done by wrapping your styles in a media query for mobile devices. The following code is for wide and full blocks on mobile phones:

Now, your WordPress theme will fully support the use of wide and fully aligned blocks!

General Block Styles

Gutenberg blocks contain default styles. However, those styles may conflict with other theme styles. As a result, it’s best to add some block styles of your own for consistency.

Global Block Style

With the exception of the paragraph block, most blocks have a unique class applied. However, rather than targeting each block individually, you may want a single style that effects all blocks. This is useful for keeping our code concise, and making style changes to blocks on a global scale.

Since all block classes begin with the “wp-block” identifier, we will use an attribute selector style to target all elements containing that class name, like so:

Individual Block Styles

Many blocks contain styles that may override the styles within your theme. As a result, the appearance of content may not be consistent between pages created using the classic editor, and pages created with Gutenberg. In order to solve this, we’ll need to add block classes to many existing theme styles. This should retain consistency between the appearance of content added using either editor.

In the case of the Origin Theme, we have added the following block styles:

Front-end Styles In Gutenberg Editor

For a more seamless user experience, you may want the content added within the Gutenberg editor to reflect the fonts and styles on the front-end of your website. Unfortunately, the content added within the Gutenberg editor will not automatically appear as it does on the front-end of your website. However, this can be remedied with some additions to your WordPress theme.

Create Editor Stylesheet

First, we’ll create a separate stylesheet. Within the Origin Theme, we have named this stylesheet gutenberg.css, and added it within the “css” theme folder. For reference, the full contents of the stylesheet are provided below:

Unique Editor Classes

Before continuing, let’s break down some of the important class names required for targeting elements within the editor. Failure to use these classes may result in targeting elements within the WordPress dashboard outside of the editor window. In short, things will look funky — kinda like this:

To make sure only elements within the editor are targeted, add the .editor-styles-wrapper class in front of the elements you wish to target. This may not be necessary for all elements, but it’s good practice.

Another commonly used editor class is .editor-rich-text__tinymce. This class will need to be appended to more common HTML elements. For instance, your theme may style a heading like so:

However, adding that style to the editor stylesheet will not work as expected. It will be overwritten by the default Gutenberg editor styles. So, in order for that heading to appear as it does on the front-end of our site, we need to rewrite the style like this:

That will ensure our editor style takes precedence over the default editor styles. This may vary somewhat depending on the element and the block you are targeting within the editor. It’s best to use your code inspector as necessary in order to target elements directly.

Enqueue Editor Stylesheet

Next, let’s enqueue the editor stylesheet within your functions.php file:

You may need to adjust the path to the stylesheet accordingly for your theme.

Summary

That’s it! By adding theme support for wide alignment blocks, block styles, and an editor stylesheet, your WordPress theme will be fully optimized for Gutenberg. All Organic Themes are compatible with Gutenberg, and many have already been optimized for the new editor. There are exciting changes on the horizon with WordPress 5.0, and we’re ready to help with the transition!

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.

1. Navigate to Appearance > Customize > Homepage Settings.
2. 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.
3. While still in the customizer, navigate to Theme Options > Blog Options.
4. Select the desired post categories you wish to display on the blog.
5. 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.

1. Navigate to Appearance > Customize > Homepage Settings.
2. Select the “static page” option.
3. For Homepage, select an existing page that you would like displayed as your website homepage.
4. 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.
5. 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.

1. Close the customizer after selecting your static homepage.
2. 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.
3. Navigate to the page you selected for your homepage under Pages > All Pages.
4. Within the “Document” tab on the right, apply the “Full Width” template under Page Attributes.
5. 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.

1. Close the customizer after selecting your static homepage.
2. 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”.
3. Navigate to the page you selected for your homepage under Pages > All Pages.
4. Within the “Document” tab on the right, apply the “Organic Custom” template under Page Attributes.
5. 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.

Adventure is the perfect WordPress theme for travel blogs and adventure companies. The original design resonated with that culture. So, we held true to that design with this update. As they say, “If ain’t broke, don’t fix it.” While the design changes were subtle, the bigger improvements are under the hood.

New Font Options

Previously, the theme used primarily the Roboto font. That font lends itself well to the modern aesthetic, and we kept it as the default typeface. However, what if you wanted to try other fonts? It previously required additional plugins and custom CSS.

Now, you can choose from several quality Google Fonts within the customizer theme options. We hand-picked several Google fonts and pairings designed to work with the Adventure Theme. Change fonts for the site title, navigation menus, headings and body. Additionally, you can see those changes in real-time within the customizer preview window.

Custom Logo and Resizer

The WordPress custom logo functionality has been added to version 3 of the theme. Additionally, after uploading your logo image, you can quickly resize the logo to your liking within the customizer.

For users that are upgrading from an older theme version, we kept the legacy logo image option as well. However, we moved the older option to the Site Identity section of the customizer. Please keep in mind, the logo resizer is designed to work the new logo option.

Improved WooCommerce Integration

If selling products is part of your adventure, than you will definitely benefit from this update. WooCommerce has been very tightly integrated with the latest version of the Adventure Theme.

WooCommerce has undergone several major updates since being acquired by Automattic. Now, options for the powerful eCommerce plugin are located within the WordPress customizer. The result is a seamless setup experience between the Adventure Theme and the plugin.

Gutenberg Block Support

In preparation for the future of WordPress, the Adventure Theme update includes support for Gutenberg blocks. Rest assured that your theme will transition seamlessly the next major WordPress update.

For those in the dark, Gutenberg represents the new WordPress content editor that will be rolled out with WordPress 5.0. It’s a fundamental shift in the way content will be added within the platform. Each content type will be added in the form of a “block”, and blocks can be individually manipulated and moved. All Organic Themes will be compatible with Gutenberg. However, only the more recent themes and updates will support all Gutenberg features.

Customizer Widgets Home Page Template

A new home page template is included with the latest update. It features a widetized section for adding Organic Customizer Widgets. So, building a dynamic home page is simple! Create a variety of content sections such as content slideshows, feature lists, background video sections, and much more!

Organic Customizer Widgets is a free plugin from Organic Themes. It transforms the WordPress customizer into a simple page builder using custom widgets. The 12 custom widgets each serve a unique purpose for displaying content. The widgets are easily manipulated and dragged into position within the customizer. It’s a simple, effective, lightweight way of building custom pages without bulky, proprietary page builder plugins.

One Click Demo Import

Typically, importing demo content is a pain. After importing the content, it still requires setup and configuration within the theme options. That’s no longer an issue with the new Adventure Theme!

The latest version features compatibility with the One Click Demo Import plugin. As a result, all content, settings, customizer options and widgets are imported within moments of clicking the import button. There is no need to fumble with options or setup widgets afterwards. Your website will exactly like the demo.

Security Updates and Tweaks

Beyond the major improvements, there have also been several minor tweaks and cleanup. For instance, escaping has been added where missing for security purposes. Also, prefixes for functions have been updated to include the theme name, to reduce the possibility of any plugin conflicts. Additionally, language files have been updated, bugs fixed, mobile improvements, and much more. View the changelog on the theme page for a full list of updates.

Overall, the new Adventure Theme is ready for the journey for years to come.

The Profile Theme is perfect for individuals in need of a professional online presence. Whether you’re an event speaker, consultant, personal trainer, or work within any industry where YOU are the biggest commodity of your business — Profile is designed to meet your needs. It provides your clients with several ways to reach you and connect to your social networks.

Social Media Menu

A social media menu can easily be added to your home page and the website footer. Simply navigate to Appearance > Menus in the WordPress admin, and create a new menu. Then, add custom links to your social media profiles. Choose to display your new menu in the “Social Menu” location, and voila! The social media links will automatically display in a circular design around your profile image with the correct icon — like magic!

Twitter Feed

The Twitter feed is a cool feature of the Profile Theme! It can be displayed on the home page template beneath the header.

The feed is continuously updated to display your most recent tweet. Setting up the feed is as simple as navigating to the WordPress customizer, and entering your Twitter username in the theme options.

Custom Header Video

The Profile Theme features the new WordPress custom header video option. A YouTube link, or uploaded video of your choosing can be added within the WordPress customizer. As a result, your video will display as background footage behind your menu and profile image. It’s perfect for adding that extra “Wow!” factor to your website.

WooCommerce Compatibility

The Profile Theme has been integrated seamlessly with the latest version of WooCommerce. As a result, adding a shop to your personal website is a piece of cake!

WooCommerce has undergone a number of changes since being acquired by WordPress. The plugin has been updated to include options within the customizer. So, you can setup a shop while customizing the appearance of your theme. The result is an intuitive interaction between the plugin and the theme.

Organic Customizer Widgets Page Builder

Our Organic Customizer Widgets plugin has been steadily growing in popularity since its release. With over 8,000 active installs and raving reviews, customers are seeing the merits of a simple WordPress page builder. The plugin is designed to use custom widgets and the WordPress customizer for building dynamic pages. As a result, you can easily display slideshows, testimonials, team members, portfolios, and more on any page! The latest version of the Profile Theme has been designed to work with the Organic Customizer Widgets. So, the possibilities for page design are endless!

Future Proof

WordPress 5.0 and Gutenberg are just around the corner. It’s important that our themes are compatible with the upcoming version of WordPress. The latest version of the Profile Theme is designed to work seamlessly with Gutenberg blocks.

With all the new updates, the Profile Theme is relevant once again. Use it for your personal profile website today!

What Are Gutenberg Blocks?

In case you haven’t heard, Gutenberg is the name of the new content editor for WordPress. Currently, the editor is available as a plugin. Soon, it will be integrated into core.

Using the Gutenberg editor, content is added in the form of “blocks”. The blocks are used to display a wide variety of content types such as text, quotes, images, video, audio, embeds, etc. Each block features it’s own set of options for changing font sizes, colors, alignment, and more. Additionally, blocks can be placed into columns and quickly arranged into your desired order. Essentially, Gutenberg evolves the WordPress content editor into a page builder.

With this significant change to WordPress on the horizon, we wanted to build a theme alongside the development of Gutenberg. So, we set out to create the Block Theme, and thoroughly tested Gutenberg blocks with the new theme.

Why Use Gutenberg Blocks?

As of now, blocks are optional. Additionally, they require the Gutenberg plugin to use. However, soon blocks will be the standard way of adding content within WordPress. So, it’s a good idea to begin familiarizing yourself with the new editor and the blocks that are currently available.

Additionally, blocks allow for more versatility in the display of content within a WordPress theme. They provide the opportunity to create unique layouts and designs from one post to the next. Using blocks will really make the content on your website pop!

Will the Block Theme work without Gutenberg?

Absolutely. Although the demo content was created using Gutenberg blocks, the Block Theme will work just as well using the classic WordPress editor.

Features Of The Block Theme

The integration of Gutenberg will simplify the development requirements for WordPress themes — and we love simplicity! Blocks reduce the need for several page templates, custom post types, post formats, and other relics of the old WordPress editor. So, we left that stuff out of the Block Theme. Only a few simple page templates are included, and there are no custom post types or post formats. The result is a beautiful theme that is ridiculously simple to setup and use.

Theme Options

As with all Organic Themes, options are located within the WordPress customizer. So, changes made to the theme can be viewed in real-time. The options include the ability to change colors, fonts, and basic settings. The Block Theme can be setup within moments of activation.

Plugin Compatibility

The theme is compatible with popular plugins such as WooCommerce, Jetpack, and Gravity Forms. In fact, the WooCommerce integration has been drastically improved with the release of the Block Theme. So, adding an online shop to is a piece of cake!

Customizer Widgets

Organic Customizer Widgets work beautifully within the Block Theme. This revolutionary plugin from Organic Themes transforms the WordPress customizer into a page builder using custom widgets. As a result, you can create dynamic pages displaying featured content slideshows, client testimonials, team members, featured subpages, and much more!

The Block Theme is a solid addition to our theme collection. Purchase the theme today for use on your website, or buy the All Themes Membership to receive this new theme along with all other Organic Themes.

Display Personal Profiles, Team Pages and More

The Organic Profile Block displays a personal profile image, along with a name, title, biography and social media links. We have outlined the process of building this plugin in detail on our How We Created A Custom Block For Gutenberg article.

The Profile Block is an excellent solution for adding author biographies to articles, displaying a page of team or staff members, or as a personal business card on your “About” page. The block adopts the fonts and styles of your active theme.

This custom block is designed to work with any theme, so long as the Gutenberg plugin is active. With the release of WordPress 5.0, the Gutenberg content editor will be integrated into WordPress core. Then, the Gutenberg plugin will no longer be required. In the meantime, users must have the Gutenberg plugin active to use the Profile Block

Try the Organic Profile Block with Gutenberg! Install the plugin directly from your WordPress dashboard by searching for “Organic Profile Block” under Plugins > Add New. Otherwise, download the plugin from the WordPress plugin directory here.

Check back with Organic Themes for more custom blocks in the future!