All you need to know about “WordPress Gutenberg”

Technology is advancing at a very fast pace, frequently unveiling new things. WordPress is the topic that has been at the core of discussions for bloggers, tech geeks, and thinkers among many others. Recently, it has been in the news that soon Gutenberg WordPress editor will be available for everyone as a part of WordPress core. It would be exciting as everyone is looking forward to this new update, which is set to revolutionize the entire publishing experience in WordPress, much like Johannes Gutenberg's invention of the printing press transformed the printed word.

What is WordPress "Gutenberg" update?

It is a new editor that is built especially for WordPress. It is named after Johannes Gutenberg who is the inventor of a printing press with movable type, almost 500 years ago.

At present, the visual editor of WordPress needs us to use shortcodes and HTML, in order to make most of the things work. The objective to incorporate this update is to make WordPress easy to use. Therefore, the concept of "Little Blocks" has been introduced.

At present TinyMCE is the default content editor which will be soon replaced by Gutenberg. With this new update, the content will be incorporated into WordPress blocks from the backend. Also, Gutenberg will automatically add page builder and blocks to the updated WordPress websites. Unlike the classic html editor powered by TinyMCE, Gutenberg uses a block-based approach, allowing users to add, arrange, and customize content visually.

Matt Mullenweg, the founder, is behind the launch of Gutenberg in WordPress core.

The important thing to be noted here is that, currently, Gutenberg is in its beta and testing phase. And so, it cannot run on the production site as of now. As we wanted to explore more on Gutenberg and to know what the hype is all about, we are writing this post.

Let us begin:

1. Presently a plugin
   At present, Gutenberg is a plugin that can be downloaded from the WordPress plugin directory. It has approximately 2000 active installs and an overall 25000 downloads. It has received 2.5 out of 5-star rating. It can be installed if the website is updated with WordPress version 4.8. The Gutenberg update is going to be launched along with WordPress 5.0.
   
2. Blocks and Embeds
   The new update of Gutenberg will give the option of numerous blocks; which can be used to have a hassle-free experience of WordPress. You can use the block inserter to add a new block, such as a text block, image block, or columns block, and create posts by combining multiple blocks for flexible layouts. The documentation would become quite less; which would save time by simplifying the use of WordPress. Also, it has made development smooth and easy. Jotted below are the blocks and embed with the help of which we would be able to customize the content and its layout:

   

   When rearranging and managing blocks, users can delete blocks, select a block (selected block), and edit individual content blocks for precise control over their content structure.
   
   The embed option to be provided by Gutenberg would be easy and user-friendly. Any kind of media content, be it YouTube, Twitter, Slideshare, Flickr, Reddit, all can be easily embedded in the blocks. Previously also, it could be embedded in the post, but many found it hard as there was no such direct mention in the visual editor.
   
   When discussing block types, Gutenberg supports new blocks and block plugins that introduce even more block types, including physical blocks for building media-rich layouts.

   

   To add media, you can use the media library to insert images and create an image gallery, helping users create media rich content with ease.
   
3. Making WordPress intuitive interface like Wix and Squarespace
   Wix and Squarespace provide website templates and mobile interface editor, among many other easy to use features. While using these two platforms, one doesn’t have to learn any shortcodes, widgets, etc. like we have to do using WordPress. At present, while using WordPress, one has to learn a lot of concepts like shortcodes, widgets, TinyMCE among many other things. Most of the people wanted shortcodes, widgets, etc. to be used with all the attributes of WordPress; but they are available to be used individually with the current version of WordPress. Now, with the new update, WordPress users have to learn only about the blocks. For instance, if a user learns about the paragraph block, he/she has to learn only about that block. The paragraph block could be included in a post, sidebar, page or any other thing and it will be the same in all of them. If a new plugin is introduced, the blocks will work with that too, without any need for further changes. You can also use the columns block and nested blocks to build complex site layouts, including site headers and other structural elements for a cohesive design.
   
4. Block information to be stored using HTML comments
   With the new update of Gutenberg, WordPress will now store information in the HTML comments. Those comments could be seen only at the back end and not be seen live. Currently, the user interface of Gutenberg focuses on the layout of the content and not on creation.
   
5. Anytime Disable Gutenberg without hampering the Website
   Generally, it is seen if you uninstall any plugin or remove any element of the website, the design gets hampered or the content gets lost. But, with the introduction of Gutenberg, HTML comments are saved in content. Hence, one can reactivate Gutenberg without losing already arranged blocks. Moreover, at present HTML code appear in the page source, but with the new update in WordPress, HTML code would be saved as comments. And so, it wouldn’t appear in page source.
   
6. Write BLOCKS in your way
   Developers would have the option of customizing the blocks their own way. Also, the option of copy-paste is incorporated very efficiently in the new update. Previous options of copy-paste were little messy which has now been built really well with the new update. Gutenberg preserves formatting when copying content from Google Docs, making it easier to transfer and maintain layout. The content output of Gutenberg blocks uses HTML5 tags like section and figure. This will help to future proof the content that is being created in WordPress Gutenberg.
   
   For those interested in development and documentation, the Gutenberg development hub provides access to api references, user documentation, and all the details needed for both users and developers. More user documentation and resources are available to guide you through every aspect of the editor.
   
   Gutenberg continues to introduce the latest and greatest feature updates, and users and developers can participate in developing bleeding edge features to help shape the future of WordPress post block editing.

Getting Started with the Block Editor

The WordPress block editor, also known as Gutenberg, has revolutionized the way users create and manage content on their WordPress sites. With its visually intuitive interface, the block editor makes it easy for anyone—from beginners to experienced developers—to build media-rich pages and posts without needing to write code.

To begin using the WordPress block editor, simply log in to your WordPress dashboard and click the "Add New" button under Posts or Pages. This opens up the Gutenberg editor, where you’ll see a clean workspace with a block toolbar at the top and a block library ready to help you create engaging content.

Adding content is as simple as clicking the "Add Block" (+) button. This brings up the block library, which is packed with a wide variety of blocks—such as paragraph blocks for text, image blocks for photos, columns blocks for layouts, and many more. You can browse through all the blocks or use the search bar to quickly find the block type you need. Once you select a block, it’s instantly added to your page, ready for you to customize.

Each block comes with its own block toolbar, allowing you to adjust settings like alignment, font size, and color. For more advanced customization, you can access the block settings by clicking the gear icon, where you’ll find options to tweak the layout, add custom CSS, or even insert custom HTML using the code editor. This flexibility means you can fine-tune every detail of your content, whether you’re building a simple blog post or a complex landing page.

Managing your content is just as straightforward. You can rearrange blocks using the up and down arrows or by dragging and dropping them into place, making it easy to experiment with different layouts. If you want to reuse a particular design or content section, you can save it as a reusable block or use block patterns to quickly insert pre-designed layouts anywhere on your site.

One of the standout features of the Gutenberg block editor is full site editing support. With full site editing, you’re not limited to just posts and pages—you can use blocks to design your entire site, including headers, footers, and sidebars. Access the site editor from your dashboard to start customizing your site’s layout with the same block-based approach, giving you complete control over your WordPress site’s look and feel.

For those looking to extend the functionality of the block editor, the WordPress plugin repository offers a wide range of block plugins. These plugins add more and better blocks to your block library, or even let you create custom blocks tailored to your needs. Popular options like the "Gutenberg Blocks" plugin and other block plugins developed by the WordPress community make it easy to enhance your editing experience.

Whether you want to create custom blocks with HTML, CSS, and JavaScript, or simply use existing blocks to build beautiful, media-rich content, the Gutenberg block editor provides all the tools you need. With features like block patterns, reusable blocks, and extensive tutorials available from the WordPress community, you can quickly master the block system and take your site editing to the next level.

In short, the WordPress block editor empowers you to create, customize, and manage your website in a visually intuitive way. From rearranging blocks to editing individual content blocks and exploring the latest Gutenberg features, the block editor is your gateway to a modern, flexible, and powerful WordPress publishing experience.

Gutenberg blocks on Mobile

The editor works really well on mobile. For instance, if one has to add a paragraph before publishing the post, it can be done very easily with the help of Gutenberg even on a mobile phone.

Conclusion

So far, exploring Gutenberg is quite satisfying and the options available in the update would make the use of WordPress really simple.

Publishing any post on WordPress would be as easy as pie.

Hope this post has given you a little understanding about the upcoming update. We will be exploring more about Gutenberg in our next blog post. Till then stay tuned.

Your views are welcomed in the comments below.