The future of WordPress are blocks: New Gutenberg editor released as beta plugin
For six months, the WordPress core developers have been working on a new WordPress editor that will revolutionize the way we create content. Now the new Gutenberg Editor has been released as a plugin for testing.
High time to take a look at the ambitious project.
New focus from WordPress
In December, Matt Mullenweg announced a new release strategy and the focus on the future development of WordPress at WordCamp US in Philadelphia .
The WordPress core development should concentrate on three areas:
- REST API
- editor
- Customizer
At the beginning of 2017, therefore, the completely new development of the WordPress editor, which was named after Johannes Gutenberg, was tackled.
The Gutenberg Editor
The aim is a new WordPress editor which is based on so-called content blocks instead of shortcodes, individual HTML, TinyMCE buttons and hidden embed features. This should make creating and editing content much faster, easier to use and easier than before.
The development takes place on Github . Issues and pull requests can also be created there. The most important innovations and milestones are announced in the Make Blog on WordPress.org . Discussions take place in regular Slack meetings.
The project started in January. A first prototype was presented in February with which the basic concept of the content blocks was implemented.
Since then, Gutenberg's development has continued at a very rapid pace.
WordPress Gutenberg Editor released as a plugin
Almost at the same time as WordCamp Europe in Paris last weekend, the new Gutenberg Editor was released as a beta version in the form of a feature plugin .
The plugin was presented by him at the beginning of the interview with Matt Mullenweg:
http://wordpress.tv/2017/06/19/interview-and-qanda-with-matt-mullenweg/
The Gutenberg Editor is now available for the general public to download in the WordPress plugin directory and can easily be installed and tried out.
The Gutenberg plugin provides editing, customization, and site building features to WordPress. This beta plugin allows you to test bleeding-edge featu ...
The only requirement for the plugin is the use of WordPress 4.8 or higher.
It is also an unfinished beta software. The plug-in should therefore not be used on live websites.
The Gutenberg Editor in beta test
After activating the plugin, a new menu item for Gutenberg is added. The plugin does not yet replace the conventional editor.
A finished article with various content blocks is available for quick testing under Demo. Alternatively, a new contribution can be created.
The editor welcomes us here with a very tidy and elegant layout:
The top bar is where the basic options are. On the left you can switch between visual and text editor and save. At the top right there are buttons for inserting new blocks as well as for previewing and publishing the article.
Also at the top right is the gray Post Settings button, with which the right sidebar can be deactivated and the content area can be displayed in full mode.
The right sidebar shows all the post's meta boxes, including categories, keywords, post image, post excerpt (excerpt), comments, revisions and publish.
Overall, I already like the layout a lot better than the previous editor.
Dynamic blocks as a basic principle
For an article with mostly text, you can simply start writing. Pressing the Enter key twice automatically creates a new block for the paragraph of text.
Prolific writers can type consistently and don't have to manually add a block for each new paragraph.
New blocks can be inserted by clicking on the plus sign. It is also possible to highlight a paragraph of text and turn the block into a heading or quote with one click.
When a block is selected, a toolbar for text formatting is automatically displayed, for example to insert links, select h1-h6 for headings or make text bold.
The order of the content blocks can be changed with the practical navigation arrows on the left. Several blocks can be marked at the same time and moved up or down.
In addition to the classic and expected blocks for text, headings, lists, quotations and media, the beta version already contains many other elements. Gutenberg supports, among other things, tables, buttons, separators and the insertion of a widget to display the last posts.
A look at the editor's text mode is also informative.
There you can see how the content blocks are saved in the database. In order to maintain compatibility with plugins and themes, the entire content is stored in a single database field, post_content, as before.
In order to identify the content blocks, they are nested by HTML comments:
<!-- wp:core/text dropCap="false" --> <p>Mit einem Klick auf das Plus-Zeichen können neue Blocks eingefügt werden.</p> <!-- /wp:core/text --> <!-- wp:core/button --> <div class="alignnone"><a href="https://wordpress.org">Button</a></div> <!-- /wp:core/button --> <!-- wp:core/separator --> <hr/> <!-- /wp:core/separator --> <!-- wp:core/image --> <img src="1607-uploads-06-icons-png-de.png" class="alignnone" /> <!-- /wp:core/image -->When the content is output in the frontend, the blocks are parsed by appropriate filters and the comments are removed. The whole thing works in a similar way to the more tag in the current editor.
If you still haven't seen enough of Gutenberg, you can also watch this Youtube video. In Dutch, but the feeling and user experience of the editor becomes very clear.
Conclusion
The new Gutenberg Editor already leaves a very good impression.
I think the tidy layout is a clear improvement, which eliminates the need for annoying searches and scrolling for metaboxes. Working with the blocks is very intuitive and quickly become second nature.
Don't forget that this is a first beta version. It often feels jittery when, for example, buttons overlap or blocks overlap, which is the case with images that are aligned to the left or right.
Here the WordPress team relies on feedback. It is therefore advisable to try out the plug-in yourself and actively participate.
I find it a bit exaggerated to list every supported service of the embed feature as an extra block in the insert dialog. As a result, the list of blocks is already very long. In my opinion, a general embed block would be sufficient here.
At the moment the editor only works with core features and does not yet offer any integration with plugins. That means metaboxes, which are added by plugins such as Yoast SEO, are still missing. How TinyMCE buttons and shortcodes will be implemented by plugins remains to be seen.
Gutenberg release
Gutenberg is sure to be one of the biggest innovations in WordPress in the near future. The plug-in should therefore be tested extensively by the time it is released. An installation on at least 100,000 pages is desired.
Therefore the new editor will not be included in the core with 4.9, but with a lot of luck the introduction of the new editor will work with WordPress 5.0 .
The future of WordPress are blocks
Finally, I would like to come back to the title of this article.
In an interview with WordCamp Europe, Matt Mullenweg criticized the many different elements in WordPress, which can usually only be used in a certain context. Shortcodes only work in the editor, widgets only in sidebars - tedious to learn for WordPress beginners.
In the future, these concepts are to be standardized as blocks.
This plan became very clear at the beginning of the interview:
We are going to build a lot more types of blocks and this is the basis for what is going to be the future of customization. Blocks will replace widgets, Blocks will replace kind of all the other fundamentals and primitives inside WordPress - until everything is a block. Matt Mullenweg, WordCamp EU 2017
The result could be an editor with which not only text and images can be inserted very easily, but also widgets and blocks registered by plugins. If plugins can easily add new blocks, a lot of new possibilities would open up.
If, for example, plugins are used for a portfolio, testimonials and contact form, the new editor could be used to create a start page that displays these elements in combination by simply adding them as a block.
The whole thing goes in the direction of a simple page builder.
Gutenberg could indeed cause a revolution in WordPress. What do you think?
Wow, I absolutely love it when the new editor goes in the direction of a page builder! I have so far not used such plugins because they slowed my site down too much. So I always had brainpower, how I design certain things, and had to work with some tricks ...
How is it with the new editor? There is also more HTML, because the blocks are marked with HTML comments. Does this have a negative effect on the loading time of the page?
Best regards,
Anne-Barbara Kern
Hello Anne-Barbara,
Yes, I am not enthusiastic about the existing page builder plugins either. Usually much too overloaded with modules and setting options.
The content is parsed by several WordPress filters before it is output in the theme. This is already happening with the old editor. For example, the shortcodes in the square brackets are recognized and replaced by the actual content, e.g. a contact form.
Or when inserting a Youtube URL. WordPress has an embed feature, which will automatically include the video instead of the URL. This also happens through the content filter.
It will be similar with the new blocks. As far as I've seen so far, the comments are mainly used to structure the blocks in the backend. In the frontend itself, these are removed by the content filters.
In my opinion, the loading times shouldn't change that much for normal posts with text and images.
It probably looks different with the new possibilities for blocks. A page with many widgets and shortcodes inserted as blocks will of course have longer loading times than simple text, because the PHP functions for displaying the widget / shortcode are called here in the background.
LG,
Brian
Hello Brian,
hey, that sounds great, thank you for this detailed and understandable explanation! I'm looking forward to it ... 🙂
Best regards,
Anne-Barbara
Wow - thank you very much, this is the first time I've read this thanks to your newsletter. It will probably be a while before the new editor comes close to the best current page builders in terms of functionality, right?
Because in principle - as much as I appreciate these page builders - I don't particularly like them, because you run into a dependency with them. Some pump the database full with their proprietary shortcodes, while others only offer the desired range of functions with additional plugins or chargeable extensions.
For me, at the beginning of every WordPress project, it is a question of conscience to inform customers about the advantages and disadvantages of page builders - so that they know which additional convenience and which options they get, but which disadvantages this may bring in the future , for example when changing the theme.
Gladly, thank you for subscribing to the newsletter 🙂
The functionality of the standard editor will probably never come close to current page builders such as Beaver, Divi or Visual Composer. Just all the options to set color, spacing, font, etc. for each element individually, which page builders often offer, contradicts the WordPress philosophy.
WordPress Core will (hopefully) stay a lot leaner here. For now, one will probably try to make shortcodes and widgets possible as blocks in the editor. For the time being, Gutenberg is only one-dimensional, ie several columns and grids are currently not planned.
Depending on how flexible and expandable Gutenberg is, it is conceivable that new plugins will build on the editor and, for example, add new blocks or settings / design options for blocks. And thereby push the editor more towards the Page Builder.
I'm also not a fan of the existing Page Builder plugins and see the same drawbacks, but can understand the demand for them.
I therefore hope that no attempt is made to expand the editor into too extensive a page builder. Better to have a lean core and flexibly expandable with plugins, if required.
LG,
Brian
Oh God! So much spam in the source code ...
Hopefully this can be deactivated ...
As far as I've seen so far, the comments for the blocks are not displayed in the frontend. See the comments above.
And there will definitely be plugins to deactivate the Gutenberg Editor 😉
I hope that the new editor will do a lot more to make it compatible with previous content. For example, if you want to edit a post from the "old" editor with Gutenberg, it will be displayed as a single block even though the individual paragraphs, for example, are already separate blocks (can be viewed with TinyMCE Advonced).
Another point of criticism is that Gutenberg is supposed to replace the current editor with the release without an official option to continue using the current editor. Because the classic layout of a word processing program (menu bar) makes the old editor easy to understand for newcomers. With Gutenberg, I have my doubts whether everyone immediately understands the functionality of the blocks.
The new system is also problematic for those who write quickly and who write a lot, for example you have to press Enter twice for a new paragraph instead of just once. Overall, Gutenberg still feels very slow, especially if you work a lot with keyboard shortcuts. For example, I usually write my contributions completely in one go and then use the keyboard to go through the contribution to insert the formatting. I have no idea whether that will still work, since headings are a separate block again ...
I see the whole development as rather critical. Of course, the concept behind Gutenberg is great and the insertion of media is visibly easier. But for prolific writers, the editor could be rather annoying and counterproductive.
Thanks for the comment. Very good points that you are making here.
I don't know to what extent compatibility with old content will be ensured.
Personally, I don't find the editor difficult to understand. I think that even beginners can handle it well. But I'm too deep into the matter, so I can be wrong here.
Bloggers and editors who mostly write text articles and insert a few pictures are probably very satisfied with the current editor. I hope that Gutenberg's usability will be so good that this target group will also get along better with the new editor.
And a lot is also a matter of taste: I personally like 1x ENTER for a new line and 2x ENTER for a new paragraph much better than SHIFT + ENTER and ENTER 😉
* edit * There is a Github issue for keyboard shortcuts, so it's on the to-do list.
How is it then with already finished content? I publish e.g. a lot of press releases. All I have to do is cut and paste, format the headings and that's it.
Do I now have to declare each individual paragraph as a block? That would hinder me considerably.
And what if you want to stay with TinyMCE? Are there any compatibility problems in the future?
Thank you very much for the comment. I also find the compatibility with the old editor an exciting question.
I've just tested it more closely. Gutenberg contains a block called Classic Text, which works similarly to the old editor. This means that text, headings, lists, quotations and images can be inserted in the block without these being separate blocks.
The Classic Text Block was introduced in particular to ensure compatibility with older articles. If old posts and pages are edited with Gutenberg, the existing content is in a single classic text block.
Existing text can still be inserted with copy & paste and subsequently formatted by simply using the Classic Text block. This of course means that some Gutenberg features are not available, such as sorting the elements with the navigation arrows, because they are not blocks.
Great contribution, thanks for all the information in the comments.
Thank you 🙂
I can only hope that it will be really easier. It took me a long time to get WordPress in its current form. Especially for newcomers, it is time that WordPress became easier for this target group, otherwise WordPress loses to the competition. I had just got used to the old version, well let's see what the Gutenberg Editor has to offer?! ...
I was at a lecture on the subject last night. Conclusion: just cool, I'm really looking forward to the official release. The perfect amalgamation between backend and frontend, as you otherwise only know from Concrete5.
VG,
Slavisa