With the release of the WordPress version 5.0, we have got the brand new WordPress editor known as Gutenberg. It is a totally new editor for WordPress which has introduced the block based editing style. Though it has got the both positive and negative feedbacks, it is sure that Gutenberg has made a big impact in WordPress editing. So let’s discuss about the brand new WordPress editor Gutenberg and how can you optimize it with your WordPress themes.
Gutenberg has brought a noticeable change introducing the block based editing environment and it has given us new features and new possibilities. It is not just an editor but you can do more with Gutenberg which you have never thought before. It provides you the structure of much bigger and advanced editing styles and layouts. So it opens the door of a new beginning when it comes to WordPress. It introduces you to a whole new level of WordPress development which you were missing before. The block editor is now completely redeveloped and the new page templates and other features and functionalities will give you a full WordPress website customizing experience. Of course when a new thing comes out, it may take a while to become stable. In case of Gutenberg, you may not have the best experience right now but it is getting more solid and stable day by day. And if you were a fan of the old classic editor, you still have the chance to use that.
When you open the Gutenberg editor, you will notice the new look of the user interface. Now you will get a very clean designed environment with block styles. You may decorate your content in your own creative way from typography to design and more. The content blocks are on the middle where you can decorate your contents. And on the right hand side you will get the settings separately for each and every block. Though it is a new editor having a new user interface and functionalities, you will easily get used to it because of its clean looks and easy to use functionalities.
In the previous classic editor, you used to enter all your contents in an HTML window including images and other types of content. But now with the Gutenberg editor, there are separate blocks for images, paragraphs, lists, quotes, headings, codes, shortcodes, columns, buttons, widgets and embeds. And each & every block you build can be customized separately including their layouts. Every block you build can be saved to use later as reusable blocks. The benefit of these blocks is that you can customize them separately and also you can easily recognize which blocks contain which type of contents. Also it is possible to change the block types anytime that you want. So you can now change the format of your content separately and anytime that you want by just changing the type of the block.
To make your WordPress theme Gutenberg optimized there are some mandatory requirements you need to follow.
- You must ensure that the design of your theme and demos matches exactly with all of the WordPress core blocks. To match it perfectly you may need to do additional customization including loading the existing core block styles.
- If extra blocks are required in the theme, you must add them by using the suitable plugins.
- The content blocks must not be blacklisted by the themes.
- When implementing the Gutenberg, no console errors should be present in the theme or plugin.
There are also some strong recommendations for you to follow when optimizing Gutenberg into your WordPress theme.
- For wide images and styling their classes you need to provide the support.
- You should provide the options to add color palette when necessary. To do so you can create the classes to apply the color contexts in different classes.
- You must think of the users who don’t use Gutenberg. There are many users who are still not comfortable with the new editor and using the classic one. So you should give them the alternative necessary options.
So basically your theme will be Gutenberg optimized if the Gutenberg editor matches completely to the frontend of your theme including the fonts, designs, styles and everything. Also all the widths of your theme should match exactly to the Gutenberg editor.
Now let’s know how to make your theme’s editor styles Gutenberg supported. In the previous classic editor, iframe was used to load the editor stylesheet. But the new Gutenberg editor does not use iframes. So now to apply your styles to the content of the editor, certain CSS gets adjusted automatically unlike the old editor.
So you need to add an extra function including the editor style function into your theme to make it work.
And this is the function to give support to the editor styles. Simply add it into your theme and you’re done.
After you have added the editor styles support, now it’s time to enqueue your editor style into the theme. So to make sure your editor style is loaded, you need to use the following function.
add_theme_support( ‘editor-styles’ );
add_editor_style( ‘assets/css/editor-style.css’ );
Just paste your functions.php file to load and merge the styles into your theme.
Default Block Styles
If you want to use the default block styles in your theme, you will have to provide the theme support for WP block styles. Until the theme is connected with the core styles, it will not be able to display the default styles. So you can use the function below to enable the default block styles.
//Add support for Block Styles
add_theme_support( ‘wp-block-styles’ );
This will add the theme support for WP block styles.
Next the support of the responsive embedded content is necessary in your theme. And to embed contents using the Gutenberg editor, you need to first log in to your Admin Panel. Then from the dashboard menu, select pages or posts. Then add a new page or post or you can just open an existing page and start editing it. When adding a new page or post, you will find a title box at the top where you can put the title of your content. And if you are editing an existing block, click on the plus sign at the middle. Then a pop-up window will appear where there will be different options like recently used blocks, blocks, Embeds, Saved. From here, click on the Embeds option to get the available embeds types. After selecting your embed, you will have to add the URL information for the embedded link. Then just click on Save Draft to post it later or just click publish to publish instantly.
//Add support for responsive embeds.
add_theme_support( ‘responsive-embeds’ );
With the latest WordPress version, there are two new alignment options for the contents and they are the width and full width alignment. To make your theme width and full width alignment supported you need to simply use the
//Add support for full and wide align images.
add_theme_support( ‘align-wide’ );
Function into the functions.php file of the theme. The Pullquote block, Gallery, Image, Cover Image, Video, Table, Columns, Text Columns, Categories and the Embed blocks supports the content alignments.