In 2018, WordPress aims at modernizing and simplifying the content creation experience with Gutenberg. Its name comes from Johannes Gutenberg, the founder of the printing press. This is considered to be one of the biggest changes for the WordPress user experience and the theme development workflow.
What is Gutenberg?
Most of us think that Gutenberg is just a new editor, but it’s not just that. While the editor is on focus right now, the project will ultimately impact the entire publishing experience including customization.
Up until now, editing a page meant tweaking its title, body and custom fields. With Gutenberg, this logic changes completely and it introduces the concept of blocks. Blocks are standalone, isolated and dynamic user interface components that are added dynamically through the wp-admin. I won’t elaborate on this, since the following video explains everything in detail. 👇
Matt Mullenweg Gutenberg presentation on State of the Word 2017
Gutenberg is already available as a plugin, and it will be integrated into WordPress 5.0 which is planned for launching in April 2018. The team behind it is currently focusing on the post-editing experience. But from then on, it will expand their approach to include template creation, site creation, and more. In order to make the transition to Gutenberg smoother, there is a plugin called Classic Editor which allows teams to use the current editor as they work on their migrations.
Why is Gutenberg good for me and what does this mean for the future of WordPress?
Gutenberg is no doubt a major change and many developers will have to adapt to it. However, in my opinion, this is one of the best changes WordPress has ever experienced. Because it modernizes the theme development process and makes it more modular with cleaner code base, better maintenance and editing. It delivers more reliability, and it gets rid of its old monolithic hackable approach.
With the use of blocks, it optimizes and simplifies all the ways we build a page (shortcodes, widgets, custom HTML, media, text formatting, embeds and metaboxes). As Matt explains in his post:
- Developers and agencies will be able to create interactive templates that clients can easily update without breaking things or dealing with custom post types.
- Plugin developers will be able to completely integrate into every part of WordPress. Ιncluding posts, pages, custom post types, and sidebars without having to hack TinyMCE or squeeze their entire feature behind a toolbar button.
- Theme developers won’t need to bundle tons of plugins or create their own page builders. There’ll be a standard, portable way to create rich layouts for posts and guide people through setup right in the interface. Νo 20-step tutorials or long videos needed.
- Core developers will be able to work in modern technologies and not worry about 15 years of backwards compatibility.
- Users will finally be able to create the sites they build with their imagination. They’ll be able to do things on mobile they’ve never done before. They’ll never have to see a shortcode again. Text pasted from Word will get cleaned up and converted to blocks automatically and instantly.
Demos and examples
In this talk from WordCamp US 2017, Morten explains what WordPress developers need to focus on and how WordPress will be transformed with Gutenberg.
Morten Rand-Hendriksen: Gutenberg and the WordPress of Tomorrow
In this screencast Human Made demonstrates a series of advanced implementations of Gutenberg blocks.
How to get started
Play with Frontenberg, a limited frontend live demo of the Gutenberg editor which will help you familiarize yourself with the Gutenberg editing environment.
Frontenberg – A logged out Gutenberg playground for instant testing
Read the following article from Matías Ventura Bausero, one of the lead engineers behind Gutenberg.
Play around with these Sketch symbols and try to design your own custom blocks.
Read the official developer handbook on wordpress.org. It’s clean, easy-to-read and it evolves constantly. You should also subscribe to their mailing list in order to receive their updates.
Introduction – “Gutenberg” is the codename for the 2017 WordPress editor focus.
Dig into ReactJSsince Gutenberg is built on top of it.
Checkout these Gutenberg examples built bythe WordPress core team.
Read this detailed e-book by Human Made (one of the best WP development agencies).
Checkout this development course by Zac Gordon, educator on some of the most popular educational platforms FrontendMasters, Treehouse and Udemy.
The Gutenberg Development Course from Zac Gordon – Gutenberg Courses
Finally, install this zero-configuration developer toolkitfor building WordPress Gutenberg block plugins by Ahmad Awais ⚡
That’s all for now, thank you so much for reading this post and please leave a comment if you have any thoughts, questions or suggestions.
👋 If you’re an agency, enterprise or WordPress developer looking to level up your website performance, security and hosting experience, talk to our engineering team. Our managed WordPress hosting platform is considered as one of the best of its industry with peerless performance, reliability and technical customer support.
🤝 Our team is on a mission to redefine the way WordPress developers build, host and scale their websites, so keep in touch and feel free to talk with us.
Start Your 14 Day Free Trial
Try our award winning WordPress Hosting!
