An Overview: the Gutenberg Editor for WordPress
Readers who are familiar with WordPress have gotten used to using the platform’s TinyMCE editor. Some of them love it, and some of them hate it. What all WordPress users have in common when it comes to this editor is that they will have to come to terms with the fact that it is on its way out. The Gutenberg editor for WordPress, designed to replace the TinyMCE editor, is already stirring up discussion in the forms of both criticism and praise. Regardless of how readers feel about making the switch, though, they will have to get used to the new editor, as it is here to stay.
Primary Changes
The Gutenberg editor will completely change how the platform’s users interact with it by switching the editing process over to a block-based approach. Its long-term implementation goal is to offer full-site customization, where the TinyMCE editor offered only page template editing.
Unlike the TinyMCE editor, which featured a single edit field, the Gutenberg editor will feature many individual blocks. These can be composed of text, images, videos, buttons, widgets, tablets, or other features and can be manipulated on an individual basis. Since each of these blocks is separate from the others, users can expect to have far more control over the editing process.
Using Themes
The Gutenberg editor is designed to work with WordPress themes for maximum stylistic control. These themes add built-in styling to its component blocks and are added in real-time to the editor itself, making it easier than ever to build custom content. Some themes will offer pre-made templates featuring multiple blocks.
Building a Layout
Since editing pages in Gutenberg requires the creation of separate blocks, it makes sense to start by learning how to add new blocks. This can be done without much hassle at all thanks to the editor’s user-friendly design. Users can simply click the +Plus icon and select from Common Blocks, Formatting, Layout Elements, Widgets, and Embeds to add a block that meets their needs.
To create a well-integrated custom page, start with the text blocks and build the layout from there. To add a non-text block to the page, just hover over the area where the new block will be placed and click the +Plus icon again. Check out all of the block options available to determine which will be the best fit for the content being added to the page.
Embedding Videos
Embedding VideosGiven that on-site videos are a powerful tool for content creators and marketers alike, it is important that users familiarize themselves with the Embeds blocks as soon as possible. Thankfully, Gutenberg makes this process extremely easy. Inserting a YouTube video requires users to simply add a YouTube block from the Embeds tab, enter the video’s URL, and click Embed.
Creating Different Columns
Gutenberg’s experimental columns feature allows users to create multiple columns for further customization. This can be accomplished by clicking on the Columns block in the Layout Elements section. Other blocks can even be inserted into the column blocks, making it easier than ever for page creators to control where their images, videos, quotes, and other elements appear on their pages.
Customizing Blocks
The content of each block can be edited from within the actual body of the Gutenberg editor. Basic text, styling, and alignment can be manipulated from the menu bar that appears when users hover over a particular block. Advanced styling, on the other hand, must be controlled from the Block settings tab.
Once several blocks have been created and customized, their placement can be changed via two different paths. Users can use the Up and Down arrows while hovering over blocks to move them in the correct direction or they can hover over the left or right sides of their blocks and use the editor’s drag-and-drop feature.
Editing Source Code
The Gutenberg editor makes it easy to manipulate source code. Users need only click on the three dots that appear at the top-right corner of the editor and select Code Editor to manipulate source code for their entire posts.
Using Plugins
There are already plenty of pre-made Gutenberg extension plugins available online. These can be installed as separate blocks. The use of pre-made plugins makes it even easier for site owners to create user-friendly and aesthetically appealing pages.
Compatibility Issues
The Gutenberg editor’s creators are aware that there are still some compatibility issues with certain plugins. Given that there are literally thousands of these third-party plugins available for use with WordPress, it makes sense that not all of them will be compatible with the new editor right off the bat due to conflicting code or functionality. Those plugins that tend to cause problems are the ones that add functionality changes or alter the way that the classic editor looks. Some plugins that add custom styles to pages can also cause compatibility issues. As a general rule, it’s also best to avoid plugins that haven’t been updated in months, as these are more likely to conflict with Gutenberg.
Checking Compatibility
Thankfully, Gutenberg’s creators have made it fairly easy for users to check the compatibility of their individual plugins. There are two ways that they can go about performing this essential task.
Users can check the Gutenberg Plugin Compatibility database, which contains more than 5,000 popular and obscure WordPress plugins. However, not all plugins are included in the database, which relies on registered users to expand its offerings. If readers are unable to find their plugins in the database, they can also use a staging site to check for any compatibility issues prior to going live with their new content.
The Take-Away
Whether readers are excited about making the switch to the Gutenberg editor or slightly concerned, they’ll eventually have to come to terms with the fact that Gutenberg is undeniably the future of WordPress editing. Making the switch may come with some growing pains, but eventually, it will lead to more flexible content creation. Exploring the editor now and learning as much as possible about its functionality and features is the best way to ensure a positive transition when switching to WordPress 5.0.
- About the Author
- Latest Posts
Claudia is a senior editor and contributor to Biteno GmbH. She loves to review new technology and enjoys travelling in her free time.
