What’s New In Gutenberg

A new toolkit

The beauty of the Gutenberg project is it is not just an editor, but a coding component system. What at first appears to be an infringement on ‘artistic license’ for developers is alternatively liberation from the TinyMCE editor and its trappings.

Gutenberg serves as a standardization for the WordPress software that is long overdue. The new editor provides a toolkit. This toolkit empowers the individual WordPress user by increasing recognition of common features in the WordPress interface, standardizing how content is added, and unlocking site layout from the theme files.

These changes move the project towards its goal of democratizing publishing.

It’s blocks all the way down

Atomic Blocks

A collection of beautiful, customizable Gutenberg blocks for the new block editor.

CoBlocks

CoBlocks is powerful but lightweight: it adds functionality to the WordPress editor without bloat. This is the plugin you’ve been waiting for, and it will make you rethink what WordPress is capable of.

Kadence Blocks

This plugin adds custom blocks to extend Gutenberg’s editing capabilities to better build custom layouts and make Gutenberg able to do more closely what popular page builders can do. 

Design Library

We are creating a design library for Gutenberg that will include all the possible layout variations for your next WordPress project.

Our plugin uses default Gutenberg block only. It will not pollute your WordPress installation with extra blocks or any custom code.

ACF Blocks

Manually creating custom blocks means digging through endless mounds of JavaScript. ACF Blocks, on the other hand, does all the hard work for you so you can sit back, relax and continue writing simple PHP and HTML.

WooCommerce Blocks

Designed to work with the new Blocks Editor introduced with WordPress 5.0, WooCommerce Blocks allow you to select and display products across your site

Jetpack Blocks

The WordPress Block Editor transforms your way of writing from a single document to a collection of meaningful elements (blocks), with explicit structure. Jetpack includes some blocks of its own, which can help you create your pages exactly the way you want them.

2019 Roadmap

Matt Mullenweg announced during the State of the Word that the focus for the Gutenberg project would revolve around nine projects this year. Let’s take a look:

One

Creating a block for navigation menus. #

Two

Porting all existing widgets to blocks. #

Three

Upgrading the widgets-editing areas in wp-admin/widgets.php and the Customizer to support blocks.

Four

Providing a way for themes to visually register content areas, and exposing that in Gutenberg.

Five

Merging the site health check plugin into Core, to assist with debugging and encouraging good software hygiene.

Six

Providing a way for users to opt-in to automatic plugin and theme updates.

Seven

Providing a way for users to opt-in to automatic updates of major Core releases.

Eight

Building a WordPress.org directory for discovering blocks, and a way to seamlessly install them.

Nine

Forming a Triage team to tackle our 6,500 open issues on Trac.

Where we are now

In ProgessComplete
Block in NavX
Widgets as BlocksX
Blocks in CustomizerX
Theme block regist.X
Site Health CheckX
Auto Theme UpdateX
Auto Core UpdateX
Block LibraryX
TriageX

About 33% of the way there with about nine months to go.

Growing pains

With the rollout of the new editor, a couple issues were unearthed (if not predicted).

Themes

Many theme developers chose not to provide compatibility with the new editor, simply chosing to allow the theme to gracelessly fall into obscurity.

Plugins

Compatibility for plugins depended on whether the plugin interacted with the editor. Popular plugins like ACF built out support for the new editor before its launch. The push for an increase in the minimum version of PHP is likely a bigger blocker for older plugins than the new editor.

Upgrading an old layout to the new editor

A couple things to keep in mind when moving to the new editor.

Do you use a site builder that uses shortcodes?

Many page builders are working on support for the new block editor. But some are still a bit defiant of having their niche taken away by core.

For instance, the Gridable plugin built into Pixelgrade themes does not work with the new editor and must be disabled if you choose to use the block editor.

Can your content be created as blocks?

In a recent project, I had to replace a grid plugin that wasn’t compatible with Gutenberg. My solution was to use a columns block by Kadence. I figured this block would have a bit more longevity than a bespoke grid plugin, as it is built for the new editor.

Same look, new parts.

The process was relatively painless, with a little bit of a learning curve. I created two columns, placed an image in one and a couple paragraph, list, headings, and button blocks in the other.

The list section is simply a nested two column layout within the parent column.

I made sure to give the parent column a CSS selector under the block editor’s Advanced tab, ensuring that I could easily style the block group later on.

The styles

/*** Venue Page ***/

.venue-panel-right, .venue-panel-left {
	margin: 3em 0;
}
.is-style-squared .wp-block-button__link {
	color: white;
}
/*** Venue Panels ***/

.venue-panel-right h4:after, .venue-panel-left h4:after {
	padding-bottom: 1.25em;
}
@media (min-width: 600px) {
	.venue-panel-right>.has-medium-gutter>[class*="wp-block-coblocks-"]:not(:last-child) {
		background-color: white;
		padding: 3em;
	}
	.venue-panel-left>.has-medium-gutter>[class*="wp-block-coblocks-"]:not(:first-child) {
		background-color: white;
		padding: 3em;
	}
}
.page-id-2058 .u-content-background {
	background-color: #EEF1F2;
}
.venue-image-left img, .venue-image-right img {
	height: 100%;
	width: 100%;
	min-height: 800px;
	max-height: 700px;
	object-fit: cover;
}

Are you using shortcodes in some capacity?

Shortcodes ought to be compatible with the new editor, but I have run into instances where many shortcodes may end up being wrapped incorrectly, resulting in a broken layout.

What plugin functionality can be replaced by the block editor?

Many TinyMCE plugins will not work with the block editor, or, will only be available in the Classic Block.

Are you using a column’s plugin? A grid plugin? Can these be replaced by the built in column block? Can you duplicate this functionality with a block plugin like Kadence blocks?

You may find that an incompatible plugin is essential to your site and doesn’t currently have a block editor counterpart. This may be a good enough reason to hold off.

Use a staging branch

Whether you test the changes on your local machine or use a staging service (often provided by your host at extra cost), you should make all of your compatibility testing from a non-production copy of your site.

Once you’re sure the new editor is for you, make a backup of your live site, make a second backup, then push the new changes to your live site.

Sources

https://github.com/WordPress/gutenberg/issues/13690

https://github.com/WordPress/gutenberg/issues/13204

https://github.com/WordPress/gutenberg/projects/13

https://undraw.co/illustrations

Leave a comment

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