{"id":141629,"date":"2018-09-11T06:52:36","date_gmt":"2018-09-11T06:52:36","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=141629"},"modified":"2019-01-29T11:30:04","modified_gmt":"2019-01-29T11:30:04","slug":"gutenberg-the-magnetic-editor-for-wordpress","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/gutenberg-the-magnetic-editor-for-wordpress\/","title":{"rendered":"Gutenberg : The Magnetic Editor for WordPress"},"content":{"rendered":"

WordPress, the most widely used Content Management System in the world has now expand its wings by introducing its powerful and magnetic editor – Gutenberg.<\/strong> Gutenberg completely modernise, streamline and simplifies the entire content creation process. Gutenberg mainly focuses on:-<\/p>\n

“Looking forward to the creativity one can put in layouts and full site customisation”<\/strong><\/p>\n

Earlier on using WordPress default editor, we found that the editor is quite\u00a0simple, easy-to-use and intuitive. It allows us to create posts, pages and other types of content quickly and easily and also offers two modes for editing content: Visual and Text<\/strong>. Apart from having these features the editor lacks the functionality of creating rich and beautiful post layouts. Gutenberg enhances the overall editing experience by providing such features.<\/p>\n

What is Gutenberg?<\/strong><\/h3>\n

Gutenberg is an editor introduced to enhance and improve the functionality of WordPress default editor . It is named after\u00a0Johannes Gutenberg<\/strong>, who introduced the printing press hundreds of years ago to the world. It is a block-based, page maker content editor designed to make the addition of rich content to WordPress.<\/p>\n

Gutenberg uses various types of content blocks (e.g. text, videos, images etc). Instead of creating all content in one big editorial field, Gutenberg allows users to add blocks individually, filling each one with content as they go along and then positioning them in exactly the right position. Creating content this way makes it much easier to know how content will look like\u00a0in the front-end.<\/p>\n

How to install Gutenberg?<\/strong><\/h3>\n

As of now the latest Gutenberg version is 3.7.9 and has 30,000+ active installation which is tested upto WordPress version 4.9.8 or higher.<\/p>\n

We can install the latest Gutenberg in WordPress by navigating into Plugins >> Add new<\/strong> and search for Gutenberg.<\/p>\n

\"pic1\"<\/p>\n

Click on install and then activate the plugin.<\/p>\n

Working on Gutenberg<\/strong><\/h3>\n

On installing Gutenberg we can see a menu named Gutenberg in the dashboard. We can see a complete demo of how Gutenberg works here.<\/p>\n

\"pic2\"<\/p>\n

Let\u2019s first get familiar with what the various areas of the main Gutenberg interface. Gutenberg editor looks like below snapshot:-<\/p>\n

\"pic3\"<\/p>\n

It is quite different from the default editor of WordPress.<\/p>\n

\"pic4\"<\/p>\n

In Gutenberg it has two tabs instead of one as in default editor. The first tab is of document settings<\/strong> where we manage the status, categories, tags, images, excerpt and many more things. On another tab named as blocks we manage the block settings.<\/strong>\u00a0 Using blocks decreases the dependency of users on menu bars, sidebars and other options available for the formatting of content. Gutenberg also provides lots of white space for content creation in comparison to default editor.<\/p>\n

Now we will have a look into the major feature of Gutenberg -Blocks<\/p>\n

Blocks<\/h3>\n

These blocks are elements that we can “drag” on a page or in a message.\u00a0These blocks will be used for cases that now require shortcodes, widgets, theme options and other formatting\u00a0options. Below is the snapshot of a block with its settings :-<\/p>\n

\"pic5\"<\/p>\n

Adding and Removing a Block<\/h3>\n

We can add as many blocks we want in the post,\u00a0 just click on + icon on the left corner of the post and select the type of block that we want to use in our content.<\/p>\n

\"pic6\"<\/p>\n

The window that appears on clicking the + icon actually has 6 sections most used, common blocks, formatting, layout elements, Widgets and Embeds.<\/p>\n