Gutenberg, the new WordPress text editor
In 2018, the WordPress text editor is evolving in depth. The text editor you know well, named TinyMCE, is replaced by a new concept called Gutenberg on all sites using the WordPress software.
This new editor is presented as making it easier to publish content on WordPress, and focuses on simplifying complex layouts and adding external and multimedia content.
Thus, Gutenberg works as a system entirely made up of “blocks”, which refer to each element (title, paragraph, multimedia element, etc.) that can be inserted in a post or page. These blocks have been introduced in order to facilitate the insertion and modification of elements in the content, compared to the traditional editor (TinyMCE), by integrating functions into the block system that were previously only accessible via shortcodes or html code (embed, for example).
A streamlined interface
The presentation of the interface for editing a page or a post with Gutenberg is very minimalist.
At the very top, a space for document-scale editing options is separated from the post or page content by a single line. In this space, you will find:
- the possibility to add a new article, cancel or reinstate an action;
- the publication status of the content (save the draft, update the draft, publish, update the post) ;
- general content options.
The rest of the page contains your document to publish.
The options side column opens by clicking the star wheel icon in the upper area of the interface. It contains all the metadata of the document, gathering the columns that could be found on the side of the previous interface: keywords, categories, publication options (status, planning, etc). It also contains the “block” settings.
Working with blocks
Each element (title, paragraph, multimedia element) inserted in a post or page is contained in what WordPress calls a “block”. When importing text from a word processing document, WordPress will convert the different parts of the text into as many blocks as it would with the old interface.
Clicking on a block opens a small editing bar of its own and contains the main formatting options. Thus, a block containing text will be equipped with an editing bar allowing to format this text. For a block containing an illustration, the editing bar will adjust the alignment and size of the image.
Further customization options can be found in the sidebar settings.
When writing text directly into WordPress, you can add blocks by clicking the “+” next to the already written text. The editor then proposes the different types of “blocks” that can be added. Among the native blocks of common use, one will thus find:
- Simple text and title sizes ;
- Image ;
- Gallery images / videos / sounds ;
- Quote ;
- Numbered / bulleted list ;
- Image à la Une ;
- Media Player ;
- Tables ;
- Pre-formatted text and source code ;
- “Read More” tag ;
- Text columns.
Many very complete tutorials bloom on the internet to describe and explain Gutenberg’s handling and features. Here is a selection:
If you have any questions about how to handle this new feature, do not hesitate to send a message on the list of carnetiers to hypocommunity@groups.