Inspiration, Learning

It’s a Block Party – Featured Post by Envato author, ThemeBeans | #GetGutenbergReady Series 2018

Hi, I’m Rich Tabor from ThemeBeans, a commercial WordPress theme company that specializes in WordPress themes for creative professionals. I started my foray into the WordPress world with ThemeBeans close to seven years ago, and I’ve never looked back.

In fact, now is a more exciting time than ever to be involved in WordPress. Why, you ask?

As a current ThemeForest author and reviewer, I’ve had my eye on the upcoming WordPress 5.0 release. And let me tell you, WordPress 5.0 is a big deal. This next major release of WordPress will introduce a completely new editing experience, also known as Gutenberg.

This post aims to explore what Gutenberg means to me as a WordPress developer and product maker. So, let’s get to it.

What Exactly is Gutenberg?

To sum it up, Gutenberg is the future of WordPress. An upcoming content creation experience that will fundamentally change the landscape of WordPress as we know it today.

Download the Gutenberg beta feature plugin on WordPress.org today.

While the current default WordPress editor is essentially a glorified word processor, Gutenberg behaves quite differently by introducing a block building component to creating content. These blocks will transform how everyone interacts with WordPress to make building rich web content much more intuitive, regardless of technical ability.

If you have not tested the new editor, you may download the Gutenberg plugin on the official WordPress directory and give it a try. The editor is still very much in active development, but it’s absolutely headed in the right direction.

A Drastically Improved User Experience

In today’s content management system (CMS) landscape, WordPress is not particularly known for its fantastic user experience. Sure, capable developers can do just about anything with WordPress, but if you’re new to WordPress, or don’t know a lick of programming, you’re completely reliant on the core WordPress experience to create a website.

Taking a look at other popular website CMS alternatives, there are plenty of caveats surrounding capability and functionality — where WordPress obviously shines. One common thread is that these alternatives are nearly all focused on delivering a user experience that is drastically more user-centric than what WordPress currently provides.

The introduction of Gutenberg to WordPress 5.0 aims to change that, capitalizing on user experience.

Currently, creating content within WordPress typically consists of adding text, hitting “Add Media” to import images, viewing the code editor to fix the content, dropping in shortcodes, pressing publish… and then seeing what your page looks like.

Now that’s quite a disjointed experience.

Gutenberg empowers folks to create ultra-rich content on the fly, right from within the WordPress editor. With the release of WordPress 5.0, we’ll have an empowering content creation experience that will lead the landscape of CMS content production for years to come. And with a proper theme installed, you’ll instantly feel just how powerful Gutenberg is.

Adding blocks within the upcoming WordPress editor.

Developers are already building powerful blocks within the design and development standards set by the WordPress Gutenberg team, delivering a cohesive experience that looks and performs “just right,” regardless of the active theme — or plugin.

Instead of a fragmented user experience, based on your page builder of choice, Gutenberg provides a solid foundation for developers to focus efforts and make WordPress better altogether.

An Entirely New Class of Gutenberg WordPress Themes

I’m a WordPress theme developer at heart. At ThemeBeans, I value designing and building enjoyable experiences that enable creative professionals to build beautiful websites.

I foresee plenty of opportunity for an entirely new class of WordPress themes: WordPress themes that embrace Gutenberg and build upon the framework provided to capitalize on user experience in a whole new fashion. Instead of building one-off theme templates that are bound to a certain WordPress theme, developers can build powerful blocks for folks to build their own templates with. I’m so excited about the future of WordPress themes in particular.

I am actually working on such a theme. It’s called Writy.

Writy.io —  a new class of publishing WordPress theme built for Gutenberg.

Writy is an upcoming WordPress theme that establishes an entirely new standard for writing and publishing with WordPress. Together, Writy and Gutenberg will positively level-up the WordPress writing experience in a very big way.

As you can tell, I’m completely stoked for Gutenberg.

What About Current WordPress Themes?

It depends really. Many WordPress themes can already start baking in support for Gutenberg to capitalize on the user experience provided.

I recently published a piece on how to add WordPress theme styles to Gutenberg, to help WordPress theme developers to style the new editor to match the front end styling of their themes.

It is important to note that over the last few years, multipurpose WordPress themes have proliferated the WordPress theme economy, essentially becoming the de facto theme type. And in a post-Gutenberg era of WordPress, there’s a lot of uncertainty concerning WordPress themes that rely on proprietary page builders and fragmented content creation experiences.

Moving forward, I hope we’ll see WordPress theme developers embrace Gutenberg and the project’s effort to democratize publishing for everyone.

Getting Started with Gutenberg Development

There are already so many tools and resources out in the wild to help folks jump on board with Gutenberg block and theme development.

Ahmad Awais, a prolific WordPress developer and regular core contributor, was recently welcomed as a speaker on the Advanced WordPress Gutenberg Interview Series. In the episode, Ahmad talks about create-guten-block, his toolkit for folks looking to create custom Gutenberg blocks.

Using create-guten-block, there is a single dependency that update behind-the-scenes, so you don’t have to manage the kit and keep up with the development pace of Gutenberg yourself.

create-guten-block —  a zero-config-js WordPress developers’ toolkit for Gutenberg block development.

Install create-guten-block as a global module and run it to create a block plugin for Gutenberg. Just like that, you’re building a WordPress plugin with Gutenberg, React.js, ES 6/7/8/Next, with Babel and ESLint already good to go. Too easy.

I recently took create-guten-block for a spin and found out just how incredible the toolkit is. It’s literally the easiest way to get up and running, which is arguably one of the most difficult bits of block development. Using create-guten-block, I’ve started creating suite of Gutenberg blocks, such as my GutenKit Spacer Block. Using the available tools that are already provided makes building blocks a breeze.

GutenKit Spacer Block —  a WordPress block for spacing out your other blocks

I’ve compiled a set of additional resources that you’ll find useful for Gutenberg development:

What Gutenberg Means For the Future of WordPress

So much hinges on the successful implementation of the Gutenberg editor. I personally foresee a flourishing post-Gutenberg era of WordPress, where folks are absolutely empowered to create beautiful websites.

We all want a simple to use content management system. Gutenberg aims to bring simplicity back to WordPress. Sure, the new editor is a massive philosophical and technical change for everyone involved in the world of WordPress — but it’s a necessary change.

Making WordPress simpler, while empowering users is a win-win that we should all be rooting for. So, are you on board?

______________________________________________________________________________________

Check out Rich’s portfolio here. If you have any questions, want to continue the conversation or share your Gutenberg insights, jump over to our dedicated Gutenberg thread on the forums and connect with your fellow author community.