{"id":5588,"date":"2020-03-21T15:00:11","date_gmt":"2020-03-21T14:00:11","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=5588"},"modified":"2020-11-19T10:21:58","modified_gmt":"2020-11-19T09:21:58","slug":"introduction-to-wordpress-gutenberg-block-editor","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/introduction-to-wordpress-gutenberg-block-editor\/","title":{"rendered":"An Introduction to the WordPress Gutenberg Block Editor"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]WordPress has been around since 2003, and over the last 17 years, it has undergone tremendous changes and improvements. One of the biggest advancements in its recent history has been the introduction of the new content editor – Gutenberg.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Gutenberg <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The block editor stands as a formidable undertaking that was made with the idea of facilitating the process of creating and publishing rich content in WordPress. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]In this roundup, we\u2019ll introduce you to the WordPress Gutenberg Block Editor and show you how to use it for content creation.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

What is Gutenberg<\/h2>\n

[\/vc_column_text][vc_column_text]Gutenberg replaced the TinyMCE editor as the default WordPress editor on December 6, 2018, when the 5.0 WordPress version was launched. But why was Gutenberg created in the first place? Most WordPress users were already accustomed to using the Classic Editor, so couldn\u2019t the developers just update it to make it more powerful?[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]It turns out, they couldn\u2019t just enhance the TinyMCE\u2019s features, as it wouldn\u2019t have sufficed. WordPress had to make a major change to keep up with powerful page builders<\/strong>. Elementor<\/a>, WPBakery<\/a>, Beaver Builder<\/a> have become widely popular, and they are a lot of people\u2019s go-to solution when it comes to building websites.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The Classic Editor just isn\u2019t powerful nor versatile enough. First of all, it\u2019s text based. When compared to the more visual editors, most of which offer drag-and-drop functionality, it\u2019s clear why users would prefer the latter. Also, the Classic editor isn\u2019t as customizable… so it\u2019s not surprising that so many people have turned to using page builders that offer far more options and ensure an enjoyable website creation experience. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]WordPress needed to evolve in order to stay the preferred CMS for users. And its response toward becoming a more powerful platform is the Gutenberg Block Editor. <\/strong>[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How Does Gutenberg Work<\/h2>\n

[\/vc_column_text][vc_column_text]To create, format and style content, Gutenberg uses blocks. It\u2019s made to be entirely intuitive, easy to use, and to let users create any piece of content they want with blocks.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Anything can be a block: a piece of text, an image, a button, a video, a widget, a snippet of code, etc. [\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Gutenberg <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Gutenberg integrates numerous predefined blocks, but many more are available as third-party add-ons.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The idea behind Gutenberg was to develop a drag-and-drop content editor that emulates the way page builders work. You can maneuver blocks, rearrange them, and place them just about anywhere on the website. Every block acts as an entity you can modify separately from other blocks. But the problem is that Gutenberg is still in the works, and it lacks a great deal of options page builders include by default<\/strong>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]It\u2019s supposed to be fit for all common WordPress users, but the truth is, in some cases, especially customization-wise, you\u2019d have to use custom CSS (or look for appropriate third-party add-ons) to style your blocks. But if you choose a powerful WordPress theme<\/a> for your niche that comes with a wide assortment of plugins, widgets, and shortcodes, you might be able to play around more and build your websites the way you want.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]What especially irks some WordPress users is the fact that Gutenberg has been kind of forced on them. The Classic Editor is now available only as a plugin, and WordPress will stop supporting it from 2022. People are displeased because they feel the Block Editor hasn\u2019t been entirely developed as of yet, and that\u2019s one of the reasons why it has an average rating of 2 stars<\/a>. There\u2019s still a lot of room for improvement, so many users have decided to either stick with the Classic Editor or switch to page builders.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]However, the developers are constantly working on upgrading Gutenberg, and each update has been better than the last. The Block Editor is yet to reach its prime, and at some point, it\u2019s probably going to be a lot harder to decide what\u2019s better for users, Gutenberg or page builders<\/a>. As it is, Gutenberg is a good choice for WordPress beginners, and a decent substitute for page builders if you\u2019re using free WordPress themes. But it comes as no surprise that people who have been using WordPress for a long time and those who got used to the power of advanced page builders are not so thrilled with it.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to Create Content in Gutenberg<\/h2>\n

[\/vc_column_text][vc_column_text]So let’s take a closer look at how Gutenberg works. We’re going to add a create a new post by navigating to Posts > Add new<\/em>.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Add <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The first two blocks you\u2019ll run into are the title and the paragraph block. They\u2019ll be right there, waiting for you in your freshly created post. You can input a name for your new post, and then enter some content in the paragraph section. We\u2019ve mentioned earlier that there are all kinds of blocks in the block editor. To add different types of content to your website, look for the + icon<\/strong> (Add new block<\/em>). You\u2019ll find it either at the top left corner of the editor or on the left side of a block.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Gutenberg <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]A much faster way of adding blocks is by typing the forward slash symbol ( \/ ) followed by the name of the block you wish to insert.<\/strong>[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]To find the block you need, you can also type in the keyword in the Search bar, or browse the list of available blocks by going through the categories. Some of the featured categories are Formatting<\/em>, Widgets<\/em>, Layout elements<\/em>, Common Blocks<\/em>, etc. The blocks you use often are placed under the Most Used<\/em> category<\/strong>. The blocks that are most used in general are called Common<\/em> blocks, and they include the aforementioned Title and Paragraph blocks, Image block, Gallery block, Quote block, etc.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]When you click on a block, two things will happen \u2013 a toolbar will appear above the block, and a sidebar will pop up on the right-hand-side of the screen showing the available block settings. Every block comes with its own options for customization, therefore options in the toolbar and in the sidebar usually differ from one block to the next.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]For example, if we wish to add a Paragraph<\/em> block to our page, this is what its toolbar looks like.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Gutenberg <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]And these are its editing options in the sidebar:[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Gutenberg <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]You can modify all kinds of things, like set font size, enable drop caps, as well as choose background and text colors. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]If you\u2019d like to free up some space on the screen and hide the sidebar, click on the Settings button at the top right side of the screen. [\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Gutenberg <\/div>\n<\/div>[vc_empty_space height=”79px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Reusable Blocks<\/h2>\n

[\/vc_column_text][vc_column_text]What\u2019s great about Gutenberg is that it lets you save your blocks and reuse them some other time, even on a different WordPress website<\/strong>. You can create your own kind of a block, save the content, and reuse it whenever and wherever you need it. For example, if there\u2019s a specific call-to-action design you use throughout your website, this pretty neat feature could save you some time and energy, so you don\u2019t have to create the same block over and over again.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]To save a block for later reuse, in the block toolbar click on the first button from the right. It looks like three vertical dots. Then, from the menu that\u2019ll appear, select the Add to Reusable Blocks<\/em> option.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Add <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Set a name for the block and save it for later usage. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]As soon as you create a reusable block, a Reusable<\/em> category will appear within the Add new block<\/em> menu. You can also access a reusable block by typing in its name in the search bar.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Manage <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]To modify a reusable block and change its style and settings, click on Manage All Reusable Blocks<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Search <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Now you can make changes to all reusable blocks you\u2019ve made, delete them, create new ones, export them as JSON files to use them on other WordPress websites, as well as import them as JSON files (in case you\u2019ve previously created reusable blocks on another WP site).[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Nifty Gutenberg Blocks<\/h2>\n

[\/vc_column_text][vc_column_text]Gutenberg comes with a collection of numerous super handy blocks, like the Table block. In the Classic editor, you had to use plugins to add tables to your pages and posts, or you had to code the tables yourself. Now, there\u2019s a block that has that covered. It also lets you choose the number of columns and rows you wish to insert, and you can also style it a bit.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Another thing that required some know-how to do in the classic editor was to display your content and media side by side. Gutenberg has this covered with its Media & Text block<\/em>, that helps you place an image next to some text with utmost ease.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Adding a button used to be a hassle, too. Unless the WordPress theme you\u2019ve purchased packed the appropriate shortcode , you had to write the code on your own. That\u2019s no longer necessary as Gutenberg packs the Button<\/em> block, that you can edit by choosing the button color, setting the border radius, as well as the color of the button text, etc.[\/vc_column_text][vc_empty_space height=”81px”][vc_separator color=”custom” accent_color=”#f0f0f0″][vc_empty_space height=”50px”][vc_widget_sidebar sidebar_id=”top-picks-banner”][vc_empty_space height=”28px”][vc_separator color=”custom” accent_color=”#f0f0f0″][vc_empty_space height=”80px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to Convert Classic Editor Posts Into Blocks<\/h2>\n

[\/vc_column_text][vc_column_text]If you wish to convert your old posts into Gutenberg blocks, from your dashboard go to Post > All Posts<\/em><\/strong>. In the post list, look for the post you wish to convert, and click on Edit<\/em>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The post will now open in Gutenberg, inside the Classic Block<\/em>. This block is basically the Classic editor, and it has the same features the old editor had.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The post is not yet converted into a block. To do that, select the Classic block. In the toolbar, once again, look for the vertical three dots (the Edit button<\/em>). From the dropdown menu select the Convert to Blocks<\/em> option, and your post will be morphed into separate blocks.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Convert <\/div>\n<\/div>[vc_empty_space height=”79px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Gutenberg Plugins<\/h2>\n

[\/vc_column_text][vc_column_text]To extend the functionality of your editor and to make it swankier, there are numerous third-party plugins you could add to it. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]For instance, Kadence Blocks<\/em><\/a> is one of the most widely used Gutenberg plugins. It includes a Row Layout block, an Advanced Gallery block, a Spacer \/ Divider block, an Icon List block, and so on. Each block has its own set of customization options, so you can style them to your liking.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Ultimate Blocks<\/em><\/a> is an excellent plugin for all bloggers and marketers. It comes with an impressive array of plugins for these niches, such as the Content Filter block, Review block, Star Rating block, etc.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Advanced Gutenberg<\/em><\/a> not only adds more than 20 blocks to Gutenberg, but it also helps you control the block editor better. By adding this plugin to your WordPress website, you\u2019ll get the chance to use post sliders, WooCommerce product sliders, Contact Form block, Testimonial Block, and many more.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Stackable<\/em><\/a> currently powers up Gutenberg with an array of 23 blocks and >50 block layouts. It packs post grids, feature grids, accordions, feature blocks, CTA, video popups, price tables, etc. This add-on also features a grand set of customization effects, so you can easily style blocks to fit your requirements.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Of course, the list of highly practical Gutenberg plugins goes on, but these are four great extensions that can power up the block editor to an impressive extent. [\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Let\u2019s Wrap This Up<\/h2>\n

[\/vc_column_text][vc_column_text]Gutenberg sadly has a bad reputation in the WP community, and many users find it hard to see past its shortcomings. We wanted to properly introduce you to the new block editor, show you how it works, point out its shortcomings, too, and let you know how to make up for them. A lot of its features still need to be enhanced, and new ones need to be developed to make it (at least) equal to page builders. But Gutenberg\u2019s potential is tremendous. The block editor is the future of WordPress, but it just isn\u2019t at its best yet.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

Gutenberg has been around for a while, but we\u2019d like to introduce you to it properly and show you how to use it for content creation. <\/p>\n","protected":false},"author":4,"featured_media":7883,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[14,13],"class_list":["post-5588","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources","tag-core","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/5588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=5588"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/5588\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/7883"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=5588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=5588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=5588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}