All the tutorials, examples and tools you need to start using Gutenberg.
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. 👇
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.
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.
Read the following article from Matías Ventura Bausero, one of the lead engineers behind Gutenberg.
How can a system fundamentally evolve without drastically changing? WordPress can build incredible sites, yet the…matiasventura.com
Play around with these Sketch symbols and try to design your own custom blocks.
gutenberg-themes-sketch - A set of Sketch files to help you design block-driven WordPress themes.github.com
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.
"Gutenberg" is the codename for the 2017 WordPress editor focus. The goal of this focus is to create a new post and…wordpress.org
Dig into ReactJS since Gutenberg is built on top of it.
Checkout these Gutenberg examples built by the WordPress core team.
gutenberg-examples - Examples for extending WordPress/Gutenberg with blocks.github.com
Read this detailed e-book by Human Made (one of the best WP development agencies).
This white paper covers key challenges in implementation and adoption, as well as advice on how enterprises can act now…hmn.md
Use this WordPress Gutenberg boilerplate by Ahmad Awais ⚡️
Gutenberg-Boilerplate - 🔥 WordPress Gutenberg Boilerplate! - Easy to understand and extensively inline documented…github.com
Finally, install this zero-configuration developer toolkit for building WordPress Gutenberg block plugins by Ahmad Awais ⚡️
create-guten-block - 🔥 ⚛ 📦 A zero-configuration #0CJS developer toolkit for building WordPress Gutenberg block…github.com
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.