{"id":50167,"date":"2021-10-04T12:40:39","date_gmt":"2021-10-04T12:40:39","guid":{"rendered":"https:\/\/www.awardspace.com\/?p=50167"},"modified":"2024-10-18T10:45:23","modified_gmt":"2024-10-18T10:45:23","slug":"wordpress-block-editor-interface","status":"publish","type":"post","link":"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-interface\/","title":{"rendered":"Gutenberg Tutorial: The Interface of the WordPress Block Editor"},"content":{"rendered":"<blockquote class=\"gray\"><p><strong>What you need to know:<\/strong><\/p>\n<p>The interface of <strong>Gutenberg<\/strong>, the WordPress Block Editor, is comprised of a <a href=\"#main-content-area\">Main Content Area<\/a>, a <a href=\"#top-toolbar\">Top Toolbar<\/a>, and a <a href=\"#sidebar\">Sidebar<\/a>. In addition, you will find a <a href=\"#contextual-toolbar\">Contextual Toolbar<\/a> and a <a href=\"#status-bar\">Status Bar<\/a>. You use the Main Content Area to work with blocks while the Top Toolbar, the Contextual Toolbar, and the Sidebar help you customize and manage your blocks.<\/p><\/blockquote>\n<p>Back in 2018, WordPress 5.0 was released to the public and one of its major features was the introduction of Gutenberg, the new WordPress Block Editor. Unlike other updates which tend to be iterative and simply build on what was already there, Gutenberg was a complete reimagining of the content creation experience in WordPress.<\/p>\n<p>Gutenberg promises to allow greater flexibility while remaining easy to use. While the WordPress Block Editor is indeed intuitive and modern, it can take a bit of time to get used to it and to fully leverage all of its features. And that\u2019s where this Gutenberg tutorial\u00a0comes in. Read on as we take you on a brief tour around the new WordPress editor and highlight the various useful features and new capabilities.<\/p>\n<blockquote class=\"gray\"><p><strong>Table of Contents:<\/strong><\/p>\n<ul>\n<li><a href=\"#what-is-gutenberg\">What Is Gutenberg in WordPress?<\/a><\/li>\n<li><a href=\"#what-are-gutenberg-blocks\">What Are Gutenberg Blocks?<\/a><\/li>\n<li><a href=\"#how-to-access\">How Can I Access Gutenberg in WordPress?<\/a><\/li>\n<li><a href=\"#overview\">Overview of the WordPress Block Editor Interface<\/a><\/li>\n<li><a href=\"#first-time-use\">Opening the Gutenberg Editor for the First Time<\/a><\/li>\n<li><a href=\"#top-toolbar\">Learning Gutenberg\u2019s Top Toolbar<\/a><\/li>\n<li><a href=\"#main-content-area\">Exploring the Main Content Area<\/a><\/li>\n<li><a href=\"#contextual-toolbar\">Exploring the Contextual Toolbar<\/a><\/li>\n<li><a href=\"#sidebar\">Learning the Gutenberg Sidebar<\/a><\/li>\n<li><a href=\"#status-bar\">Exploring the Status Bar<\/a><\/li>\n<li><a href=\"#customizing-gutenberg\">Customizing the WordPress Block Editor<\/a><\/li>\n<li><a href=\"#reverting-to-classic-editor\">Reverting to the Classic WordPress Editor<\/a><\/li>\n<li><a href=\"#next-steps\">Next Steps<\/a><\/li>\n<\/ul>\n<\/blockquote>\n<p>&nbsp;<\/p>\n<h2 id=\"what-is-gutenberg\">What Is Gutenberg in WordPress?<\/h2>\n<p>Before we dive into Gutenberg\u2019s interface, we\u2019ll provide you with an overview of Gutenberg itself. Gutenberg, known also as the <em>Block Editor<\/em> in WordPress, is the new way to create posts, pages, and even widgets. If you have never used Gutenberg before, we highly recommend going through our <a href=\"\/wordpress-tutorials\/wordpress-block-editor-the-basics\/\" target=\"_blank\" rel=\"noopener\">Gutenberg Basics tutorial<\/a> where we\u2019ll show you how to publish your first post using the WordPress Block Editor.<\/p>\n<p>&nbsp;<\/p>\n<h2 id=\"what-are-gutenberg-blocks\">What Are Gutenberg Blocks?<\/h2>\n<p>Unlike most WYSIWYG editors, Gutenberg is not a free-form text editor where you insert images and other media right inside your text. Instead, Gutenberg encapsulates every piece of content in its own <em>block<\/em>. So, you can have a paragraph block that is next to an image block that is followed by a quote block, for example. Each of these blocks is completely standalone and can be manipulated without affecting the other surrounding blocks.<\/p>\n<p>If you wish to learn more about blocks, you should check our article that describes the blocks available in WordPress.<\/p>\n<blockquote class=\"green\"><p><strong>Tip:<\/strong><\/p>\n<p>Third-party plugins can greatly expand the number of available blocks in the Block Library. We have a list of the best plugins that would add new blocks for you to use.<\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h2 id=\"how-to-access\">How Can I Access Gutenberg in WordPress?<\/h2>\n<p>You can access Gutenberg, the WordPress Block Editor when you try to <a href=\"\/wordpress-tutorials\/how-to-post-on-wordpress\/\" target=\"_blank\" rel=\"noopener\">create a new post<\/a>. In addition, <a href=\"\/wordpress-tutorials\/add-page-wordpress\/\" target=\"_blank\" rel=\"noopener\">creating new pages<\/a> and <a href=\"\/wordpress-tutorials\/add-widgets-wordpress\/\" target=\"_blank\" rel=\"noopener\">widgets<\/a> will also bring up Gutenberg.<\/p>\n<p>These block-powered experiences are what the WordPress developers refer to as <em>Full-Site Editing<\/em>. The goal is to one day be able to create every single element on your website using the Gutenberg blocks.<\/p>\n<blockquote class=\"green\"><p><strong>Tip:<\/strong><\/p>\n<p>Are you itching to try the WordPress Block Editor but don\u2019t have your own website yet? Then, we invite you to sign up for our <a href=\"\/free-hosting\/\" target=\"_blank\" rel=\"noopener\">free hosting package<\/a> that will allow you to create a WordPress website absolutely for free! And if you ever need additional features or functionality, you can upgrade to a <a href=\"\/web-hosting\/shared-hosting\/\" target=\"_blank\" rel=\"noopener\">premium plan<\/a>, a <a href=\"\/web-hosting\/semi-dedicated-hosting\/\" target=\"_blank\" rel=\"noopener\">Semi-Dedicated server<\/a>, or a <a href=\"\/web-hosting\/vps-cloud-hosting\/\" target=\"_blank\" rel=\"noopener\">VPS instance<\/a> with just a few clicks.<\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h2 id=\"overview\">Overview of the WordPress Block Editor Interface<\/h2>\n<p>Broadly speaking, the WordPress editor\u2019s interface can be broken down into five segments:<\/p>\n<ul>\n<li>The <strong><a href=\"#top-toolbar\">Top Toolbar<\/a><\/strong> contains general-purpose options. Here, you\u2019ll find your undo\/redo buttons, the Publish button, various Gutenberg settings, and the Block Library.<\/li>\n<li>The <strong><a href=\"#main-content-area\">Main Content Area<\/a><\/strong> is located right below the Top Toolbar. Here, you can add new blocks to enrich your content.<\/li>\n<li>The <strong><a href=\"#contextual-toolbar\">Contextual Toolbar<\/a><\/strong> appears within the Main Content Area whenever you select a block. The settings within the Contextual Toolbar will vary depending on the type of block that was selected.<\/li>\n<li>The <strong><a href=\"#sidebar\">Sidebar<\/a><\/strong> is located next to the Main Content Area. There are two tabs in the sidebar. The first tab contains general settings about the post or page, such as its categories, tags, featured image, publish status, and more. The second tab, on the other hand, contains different settings depending on the block that you have currently selected.<\/li>\n<li>Lastly, the <strong><a href=\"#status-bar\">Status Bar<\/a><\/strong> simply shows you where your selected block is located within the document structure.<\/li>\n<\/ul>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/09\/wordpress-block-editor-interface-1.webp\" alt=\"The WordPress Block Editor interface can be divided into five general sections: the Top Toolbar, the Main Content Area, the Contextual Toolbar, the Sidebar, and the Status Bar.\" \/><figcaption>The WordPress Block Editor interface can be divided into five general sections: the Top Toolbar, the Main Content Area, the Contextual Toolbar, the Sidebar, and the Status Bar.<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<h2 id=\"first-time-use\">Opening the Gutenberg Editor for the First Time<\/h2>\n<p>When you open the Gutenberg editor for the first time, you will see a short\u00a0<em>Welcome Guide<\/em>\u00a0tutorial that will highlight the basics of using the new WordPress Block Editor. You can go through the slides or click on the \u201cx\u201d button in the top right to dismiss the Welcome Guide.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/09\/wordpress-block-editor-interface-2.webp\" alt=\"The Welcome Guide gives you a brief introduction to Gutenberg the first time you start the WordPress Block Editor.\" \/><figcaption>The Welcome Guide gives you a brief introduction to Gutenberg the first time you start the WordPress Block Editor.<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<h2 id=\"top-toolbar\">Learning Gutenberg\u2019s Top Toolbar<\/h2>\n<p>Gutenberg\u2019s Top Toolbar is located at the top of the screen and contains a handful of options:<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/09\/wordpress-block-editor-interface-3.webp\" alt=\"The Top Toolbar is located at the top of the WordPress Block Editor.\" \/><figcaption>The Top Toolbar is located at the top of the WordPress Block Editor.<\/figcaption><\/figure>\n<p>From left to right, the first button that we come across is the <strong>WordPress logo<\/strong>. Clicking on this button will take you out of Gutenberg and back into the WordPress back-end. Depending on what you were creating, you will end up in the <em>All Posts<\/em>, <em>All Pages<\/em>, or <em>Widgets<\/em> section.<\/p>\n<blockquote class=\"yellow\"><p><strong>Warning:<\/strong><\/p>\n<p>Clicking on the WordPress logo icon will lose any unsaved changes, so make sure that you have saved or updated your content before navigating away from Gutenberg.<\/p><\/blockquote>\n<p>The next button in the Top Toolbar is the <strong>Block Library<\/strong>. When you click on this button, you will see a full list of all available blocks that you can work with.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/09\/wordpress-block-editor-interface-4.webp\" alt=\"The Block Library is the place where you\u2019ll find all available blocks in Gutenberg.\" \/><figcaption>The Block Library is the place where you\u2019ll find all available blocks in Gutenberg.<\/figcaption><\/figure>\n<p>The Block Library consists of two or three tabs &#8211; one for single blocks, one for <a href=\"\/wordpress-tutorials\/wordpress-block-patterns\/\" target=\"_blank\" rel=\"noopener\"><i>block patterns<\/i><\/a>, and one for <a href=\"\/wordpress-tutorials\/wordpress-reusable-blocks\/\" target=\"_blank\" rel=\"noopener\"><em>reusable blocks<\/em><\/a>\u00a0(if you have created any). To learn more, check our <a href=\"\/wordpress-tutorials\/wordpress-block-library\/\" target=\"_blank\" rel=\"noopener\">detailed guide to the WordPress Block Library<\/a>.<\/p>\n<p>Next, you will see the <strong>Tools<\/strong> button. Currently, this option allows you to control what happens when you click on a block with your mouse. You can either start editing the chosen block or you may simply select the block for bulk editing.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/09\/wordpress-block-editor-interface-5.webp\" alt=\"The Tools button holds a few options related to the mouse cursor.\" \/><figcaption>The Tools button holds a few options related to the mouse cursor.<\/figcaption><\/figure>\n<p>The next two buttons are arguably everyone\u2019s favorites &#8211; the <strong>Undo<\/strong> and <strong>Redo<\/strong> buttons. You can use those to undo and redo your edits.<\/p>\n<blockquote class=\"green\"><p><strong>Tip:<\/strong><\/p>\n<p>Did you know that you can use keyboard shortcuts to perform the Undo\/Redo actions? The Windows\/Linux shortcuts are <code>Ctrl<\/code> + <code>Z<\/code> for Undo and <code>Ctrl<\/code> + <code>Shift<\/code> + <code>Z<\/code>. On macOS, the shortcuts are <code>\u2318<\/code> + <code>Z<\/code> and <code>\u2318<\/code> + <code>\u21e7<\/code> + <code>Z<\/code> respectively. There are <a href=\"\/wordpress-tutorials\/gutenberg-keyboard-shortcuts\/\">even more keyboard shortcuts available in Gutenberg<\/a> if you wish to learn them.<\/p><\/blockquote>\n<p>After the Undo and Redo buttons, we get an <strong>Information popup<\/strong>. This popup will give you an overview of your content such as how many words you have written, how many paragraphs there are, how many blocks you have used, and more. In addition, you will see a <em>Document Outline<\/em> if your document contains at least one heading.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/09\/wordpress-block-editor-interface-6.webp\" alt=\"The Information popup can show you how many words you have written.\" \/><figcaption>The Information popup can show you how many words you have written.<\/figcaption><\/figure>\n<p>Going with the theme of content overviews, the <strong>List View<\/strong> shows you an outline of the various blocks that are currently in use. This can be especially helpful in more complex layouts where blocks are nested inside of other blocks. You can click on an element in the List View to jump to that element in the <a href=\"#main-content-area\">Main Content Area<\/a>.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/09\/wordpress-block-editor-interface-7.webp\" alt=\"The List View shows you an overview of all used blocks.\" \/><figcaption>The List View shows you an overview of all used blocks.<\/figcaption><\/figure>\n<p>If you have used WordPress in the past, you will be familiar with the next three buttons: <strong>Save Draft<\/strong>, <strong>Preview<\/strong>, and <strong>Publish<\/strong>. These allow you to save your changes, see how your content would look like when published, and actually publish your content. Once your content is published, <em>Save Draft<\/em> will become <strong>Switch to Draft<\/strong> and <em>Publish<\/em> will be replaced by <strong>Update<\/strong>.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/09\/wordpress-block-editor-interface-8.webp\" alt=\"The Save Draft, Preview, and Publish buttons are located on the right side of the Top Toolbar.\" \/><figcaption>The Save Draft, Preview, and Publish buttons are located on the right side of the Top Toolbar.<\/figcaption><\/figure>\n<p>When you are about to publish your post or page, WordPress will provide you with a brief checklist to make sure that there are no issues with your content. We have a separate article where we go over the pre-publishing checklist and provide tips and tricks on other ways to augment the publishing experience.<\/p>\n<p>The last two buttons in the Top Toolbar allow you to toggle the <a href=\"#sidebar\">Sidebar<\/a> and to adjust settings related to the Gutenberg editor.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/09\/wordpress-block-editor-interface-9.webp\" alt=\"The last two buttons in the Top Toolbar allow you to toggle the Sidebar and to adjust settings.\" \/><figcaption>The last two buttons in the Top Toolbar allow you to toggle the Sidebar and to adjust settings.<\/figcaption><\/figure>\n<blockquote class=\"green\"><p><strong>Tip:<\/strong><\/p>\n<p>If you are interested in making Gutenberg your own, we highly recommend our <a href=\"\/wordpress-tutorials\/customizing-wordpress-block-editor-interface\/\" target=\"_blank\" rel=\"noopener\">tutorial on customizing the Gutenberg editor<\/a>.<\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h2 id=\"main-content-area\">Exploring the Main Content Area<\/h2>\n<p>Gutenberg\u2019s <strong>Main Content Area<\/strong> is located just below the <a href=\"#top-toolbar\">Top Toolbar<\/a>. This is the place where you will be inserting, moving, editing, and <a href=\"\/wordpress-tutorials\/delete-block-in-wordpress\/\" target=\"_blank\" rel=\"noopener\">deleting<\/a> your blocks.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/09\/wordpress-block-editor-interface-10.webp\" alt=\"The Main Content Area is located below the Top Toolbar.\" \/><figcaption>The Main Content Area is located below the Top Toolbar.<\/figcaption><\/figure>\n<p>The Main Content Area is split into two sections by a divider. The upper section holds the title field while the lower section is designed to hold your blocks.<\/p>\n<blockquote class=\"green\"><p><strong>Tip:<\/strong><\/p>\n<p>If you use plugins that augment the writing experience in WordPress by adding more functionality, you will find this new functionality either in the <a href=\"#sidebar\">Sidebar<\/a> or below the Main Content Area.<\/p><\/blockquote>\n<p>When you start adding blocks in the Main Content Area, you will notice that a separator line appears between the blocks. On that line, you\u2019ll see a \u201c+\u201d button. Clicking on that button would allow you to insert a new block where the separator line is located.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/09\/wordpress-block-editor-interface-11.webp\" alt=\"There is a hidden separator between every two blocks that allows you to insert a new block there.\" \/><figcaption>There is a hidden separator between every two blocks that allows you to insert a new block there.<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<h2 id=\"contextual-toolbar\">Exploring the Contextual Toolbar<\/h2>\n<p>As soon as you start working with blocks in the <a href=\"#main-content-area\">Main Content Area<\/a>, you will notice an additional <strong>Contextual Toolbar<\/strong> that appears every time you select a block.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/09\/wordpress-block-editor-interface-12.webp\" alt=\"A Contextual Toolbar appears every time you select a block in the Main Content Area.\" \/><figcaption>A Contextual Toolbar appears every time you select a block in the Main Content Area.<\/figcaption><\/figure>\n<p>The Contextual Toolbar lists the most used options. If you cannot find the option that you need, try clicking on the three-dot button at the end of the toolbar. It contains a menu with additional options.<\/p>\n<p>&nbsp;<\/p>\n<h2 id=\"sidebar\">Learning the Gutenberg Sidebar<\/h2>\n<p>The <strong>Sidebar<\/strong> in the Gutenberg editor is located to the right of the <a href=\"#main-content-area\">Main Content Area<\/a>. If your sidebar is hidden, click on the cogwheel icon near the end of the <a href=\"#top-toolbar\">Top Toolbar<\/a> to reveal it.<\/p>\n<p>You will find two tabs in the Sidebar. The first tab is all about managing the properties of your page or post. If you have used the classic WordPress editor in the past, these options will be familiar to you:<\/p>\n<ul>\n<li>The <strong>Status &amp; Visibility<\/strong> section lets you control the state and visibility of your page or post.<\/li>\n<li>The <strong>Permalink<\/strong> section enables you to customize the permalink for your page or post.<\/li>\n<li>The <strong>Categories<\/strong> section allows you to assign a category to your post.<\/li>\n<li>The <strong>Tags<\/strong> section lets you assign tags to your post.<\/li>\n<li>The <strong>Featured Image<\/strong> section can be used to assign a featured image to the page or post.<\/li>\n<li>The <strong>Excerpt<\/strong> is used to store a summary of your content. Some themes may use the Excerpt.<\/li>\n<li>Lastly, <strong>Discussion<\/strong> has controls for comments, pingbacks, and trackbacks.<\/li>\n<\/ul>\n<figure><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"\/wp-content\/uploads\/2021\/09\/wordpress-block-editor-interface-13.webp\" alt=\"The first tab contains options that closely match those that were available in the classic Post Editor.\" width=\"961\" height=\"602\" \/><figcaption>The first tab contains options that closely match those that were available in the classic Post Editor.<\/figcaption><\/figure>\n<blockquote class=\"green\"><p><strong>Tip:<\/strong><\/p>\n<p>Plugins that add new functionality to the WordPress Block Editor will also present their options here in this first tab.<\/p><\/blockquote>\n<blockquote class=\"green\"><p><strong>Tip:<\/strong><\/p>\n<p>The number of options in the first tab will vary depending on whether you are creating a post, a page, or a widget.<\/p><\/blockquote>\n<p>The second tab contained within the Sidebar is the <em>Block<\/em> tab. The contents of this tab change dynamically depending on the block that you have selected. When you have selected a block, you can find additional block-related options there.<\/p>\n<p>&nbsp;<\/p>\n<h2 id=\"status-bar\">Exploring the Status Bar<\/h2>\n<p>The last element of the WordPress Block Editor that we will note is the <strong>Status Bar<\/strong>. Located at the very bottom of the page, the Status bar is used to show you where your currently selected block is located within your document. This can be especially helpful if your page or post has a complex layout with many block groups nested inside one another.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/09\/wordpress-block-editor-interface-14.webp\" alt=\"The Status Bar is located at the very bottom of the WordPress Block Editor.\" \/><figcaption>The Status Bar is located at the very bottom of the WordPress Block Editor.<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<h2 id=\"customizing-gutenberg\">Customizing the WordPress Block Editor<\/h2>\n<p>While Gutenberg has a lot going for it already, you can make it even better for your style of work by tweaking its settings. You can find the block editor settings by clicking on the three-dot icon at the end of the <a href=\"#top-toolbar\">Top Toolbar<\/a>.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/09\/wordpress-block-editor-interface-15.webp\" alt=\"The Gutenberg settings can be accessed via the last button in the Top Toolbar.\" \/><figcaption>The Gutenberg settings can be accessed via the last button in the Top Toolbar.<\/figcaption><\/figure>\n<p>Be sure to check these settings once in a while since most new WordPress versions bring improvements and new features to Gutenberg. You can learn what customization options are currently available by reading our <a href=\"\/wordpress-tutorials\/customizing-wordpress-block-editor-interface\/\" target=\"_blank\" rel=\"noopener\">WordPress tutorial on customizing Gutenberg<\/a>. And if you are looking to customize your Gutenberg experience even further, check out our article where we list the five best plugins for Gutenberg.<\/p>\n<p>&nbsp;<\/p>\n<h2 id=\"reverting-to-classic-editor\">Reverting to the Classic WordPress Editor<\/h2>\n<p>Of course, the new Gutenberg editor will not be to everyone\u2019s liking. Thankfully, the developers behind WordPress have created an easy way to revert back to the classic Post Editor. If you wish to stick to the tried-and-true classic Post Editor, check our article on how to replace Gutenberg with the classic Post Editor.<\/p>\n<p>&nbsp;<\/p>\n<h2 id=\"next-steps\">Next Steps<\/h2>\n<p>Now that you know your way around Gutenberg\u2019s interface thanks to this WordPress tutorial, you\u2019re one step closer to creating great-looking content with minimal effort. We recommend going through our tutorial on blocks in WordPress so that you get a better idea of the possibilities afforded by the existing Block Library. Lastly, you can make Gutenberg your own by <a href=\"\/wordpress-tutorials\/customizing-wordpress-block-editor-interface\/\" target=\"_blank\" rel=\"noopener\">customizing Gutenberg<\/a> to your liking and installing plugins that enhance the WordPress Block Editor.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Get to know the interface of Gutenberg, the WordPress Block Editor, in order to produce quality content in a shorter amount of time.<\/p>\n","protected":false},"author":7,"featured_media":50491,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[90],"tags":[],"class_list":["post-50167","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Gutenberg Tutorial: The Interface of the WordPress Block Editor<\/title>\n<meta name=\"description\" content=\"Get to know the interface of Gutenberg, the WordPress Block Editor, in order to produce quality content in a shorter amount of time.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-interface\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gutenberg Tutorial: The Interface of the WordPress Block Editor\" \/>\n<meta property=\"og:description\" content=\"Get to know the interface of Gutenberg, the WordPress Block Editor, in order to produce quality content in a shorter amount of time.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-interface\/\" \/>\n<meta property=\"og:site_name\" content=\"AwardSpace.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/AwardSpace\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-04T12:40:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-18T10:45:23+00:00\" \/>\n<meta name=\"author\" content=\"iskrend\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@awspace\" \/>\n<meta name=\"twitter:site\" content=\"@awspace\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"iskrend\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-interface\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-interface\/\"},\"author\":{\"name\":\"iskrend\",\"@id\":\"https:\/\/www.awardspace.com\/#\/schema\/person\/964cd1bbc68d83dc446a9ea98ebc7232\"},\"headline\":\"Gutenberg Tutorial: The Interface of the WordPress Block Editor\",\"datePublished\":\"2021-10-04T12:40:39+00:00\",\"dateModified\":\"2024-10-18T10:45:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-interface\/\"},\"wordCount\":2438,\"publisher\":{\"@id\":\"https:\/\/www.awardspace.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-interface\/#primaryimage\"},\"thumbnailUrl\":\"\",\"articleSection\":[\"Gutenberg\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-interface\/\",\"url\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-interface\/\",\"name\":\"Gutenberg Tutorial: The Interface of the WordPress Block Editor\",\"isPartOf\":{\"@id\":\"https:\/\/www.awardspace.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-interface\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-interface\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2021-10-04T12:40:39+00:00\",\"dateModified\":\"2024-10-18T10:45:23+00:00\",\"description\":\"Get to know the interface of Gutenberg, the WordPress Block Editor, in order to produce quality content in a shorter amount of time.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-interface\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-interface\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-interface\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-interface\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.awardspace.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Tutorials\",\"item\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Gutenberg\",\"item\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/gutenberg\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Gutenberg Tutorial: The Interface of the WordPress Block Editor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.awardspace.com\/#website\",\"url\":\"https:\/\/www.awardspace.com\/\",\"name\":\"AwardSpace.com\",\"description\":\"Free Web Hosting with PHP, MySQL, Email Sending, No Ads\",\"publisher\":{\"@id\":\"https:\/\/www.awardspace.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.awardspace.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.awardspace.com\/#organization\",\"name\":\"AwardSpace.com\",\"url\":\"https:\/\/www.awardspace.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.awardspace.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.awardspace.com\/wp-content\/uploads\/2018\/08\/awardspace_logo.png\",\"contentUrl\":\"https:\/\/www.awardspace.com\/wp-content\/uploads\/2018\/08\/awardspace_logo.png\",\"width\":1759,\"height\":176,\"caption\":\"AwardSpace.com\"},\"image\":{\"@id\":\"https:\/\/www.awardspace.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/AwardSpace\/\",\"https:\/\/x.com\/awspace\",\"https:\/\/www.instagram.com\/awardspace\/\",\"https:\/\/www.quora.com\/profile\/Award-Space\",\"https:\/\/www.linkedin.com\/company\/19214384\/\",\"https:\/\/www.reddit.com\/user\/AwardSpace\",\"https:\/\/www.pinterest.com\/awardspace\/\",\"https:\/\/www.youtube.com\/user\/AwardspaceWebHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.awardspace.com\/#\/schema\/person\/964cd1bbc68d83dc446a9ea98ebc7232\",\"name\":\"iskrend\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.awardspace.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1864832146466465ced4d8985737e772d6277dea9324c4cf6f23019419bf3047?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1864832146466465ced4d8985737e772d6277dea9324c4cf6f23019419bf3047?s=96&d=mm&r=g\",\"caption\":\"iskrend\"},\"url\":\"https:\/\/www.awardspace.com\/author\/iskrend\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Gutenberg Tutorial: The Interface of the WordPress Block Editor","description":"Get to know the interface of Gutenberg, the WordPress Block Editor, in order to produce quality content in a shorter amount of time.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-interface\/","og_locale":"en_US","og_type":"article","og_title":"Gutenberg Tutorial: The Interface of the WordPress Block Editor","og_description":"Get to know the interface of Gutenberg, the WordPress Block Editor, in order to produce quality content in a shorter amount of time.","og_url":"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-interface\/","og_site_name":"AwardSpace.com","article_publisher":"https:\/\/www.facebook.com\/AwardSpace\/","article_published_time":"2021-10-04T12:40:39+00:00","article_modified_time":"2024-10-18T10:45:23+00:00","author":"iskrend","twitter_card":"summary_large_image","twitter_creator":"@awspace","twitter_site":"@awspace","twitter_misc":{"Written by":"iskrend","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-interface\/#article","isPartOf":{"@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-interface\/"},"author":{"name":"iskrend","@id":"https:\/\/www.awardspace.com\/#\/schema\/person\/964cd1bbc68d83dc446a9ea98ebc7232"},"headline":"Gutenberg Tutorial: The Interface of the WordPress Block Editor","datePublished":"2021-10-04T12:40:39+00:00","dateModified":"2024-10-18T10:45:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-interface\/"},"wordCount":2438,"publisher":{"@id":"https:\/\/www.awardspace.com\/#organization"},"image":{"@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-interface\/#primaryimage"},"thumbnailUrl":"","articleSection":["Gutenberg"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-interface\/","url":"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-interface\/","name":"Gutenberg Tutorial: The Interface of the WordPress Block Editor","isPartOf":{"@id":"https:\/\/www.awardspace.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-interface\/#primaryimage"},"image":{"@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-interface\/#primaryimage"},"thumbnailUrl":"","datePublished":"2021-10-04T12:40:39+00:00","dateModified":"2024-10-18T10:45:23+00:00","description":"Get to know the interface of Gutenberg, the WordPress Block Editor, in order to produce quality content in a shorter amount of time.","breadcrumb":{"@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-interface\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-interface\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-interface\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-interface\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.awardspace.com\/"},{"@type":"ListItem","position":2,"name":"WordPress Tutorials","item":"https:\/\/www.awardspace.com\/wordpress-tutorials\/"},{"@type":"ListItem","position":3,"name":"Gutenberg","item":"https:\/\/www.awardspace.com\/wordpress-tutorials\/gutenberg\/"},{"@type":"ListItem","position":4,"name":"Gutenberg Tutorial: The Interface of the WordPress Block Editor"}]},{"@type":"WebSite","@id":"https:\/\/www.awardspace.com\/#website","url":"https:\/\/www.awardspace.com\/","name":"AwardSpace.com","description":"Free Web Hosting with PHP, MySQL, Email Sending, No Ads","publisher":{"@id":"https:\/\/www.awardspace.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.awardspace.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.awardspace.com\/#organization","name":"AwardSpace.com","url":"https:\/\/www.awardspace.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.awardspace.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.awardspace.com\/wp-content\/uploads\/2018\/08\/awardspace_logo.png","contentUrl":"https:\/\/www.awardspace.com\/wp-content\/uploads\/2018\/08\/awardspace_logo.png","width":1759,"height":176,"caption":"AwardSpace.com"},"image":{"@id":"https:\/\/www.awardspace.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/AwardSpace\/","https:\/\/x.com\/awspace","https:\/\/www.instagram.com\/awardspace\/","https:\/\/www.quora.com\/profile\/Award-Space","https:\/\/www.linkedin.com\/company\/19214384\/","https:\/\/www.reddit.com\/user\/AwardSpace","https:\/\/www.pinterest.com\/awardspace\/","https:\/\/www.youtube.com\/user\/AwardspaceWebHosting"]},{"@type":"Person","@id":"https:\/\/www.awardspace.com\/#\/schema\/person\/964cd1bbc68d83dc446a9ea98ebc7232","name":"iskrend","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.awardspace.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1864832146466465ced4d8985737e772d6277dea9324c4cf6f23019419bf3047?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1864832146466465ced4d8985737e772d6277dea9324c4cf6f23019419bf3047?s=96&d=mm&r=g","caption":"iskrend"},"url":"https:\/\/www.awardspace.com\/author\/iskrend\/"}]}},"_links":{"self":[{"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/posts\/50167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/comments?post=50167"}],"version-history":[{"count":2,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/posts\/50167\/revisions"}],"predecessor-version":[{"id":75742,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/posts\/50167\/revisions\/75742"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.awardspace.com\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/media?parent=50167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/categories?post=50167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/tags?post=50167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}