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 Progess | Complete | |
| Block in Nav | X | |
| Widgets as Blocks | X | |
| Blocks in Customizer | X | |
| Theme block regist. | X | |
| Site Health Check | X | |
| Auto Theme Update | X | |
| Auto Core Update | X | |
| Block Library | X | |
| Triage | X |
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.
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
