{"id":50281,"date":"2021-10-13T09:42:56","date_gmt":"2021-10-13T09:42:56","guid":{"rendered":"https:\/\/www.awardspace.com\/?p=50281"},"modified":"2024-10-18T10:45:04","modified_gmt":"2024-10-18T10:45:04","slug":"customizing-wordpress-block-editor-interface","status":"publish","type":"post","link":"https:\/\/www.awardspace.com\/wordpress-tutorials\/customizing-wordpress-block-editor-interface\/","title":{"rendered":"Gutenberg Tutorial: Customizing the WordPress Block Editor Interface"},"content":{"rendered":"<blockquote class=\"gray\"><p><strong>What you need to know:<\/strong><\/p>\n<p>The WordPress Block Editor comes with a handful of options that allow you to customize Gutenberg\u2019s interface and behavior. These options can be accessed by clicking on the three-dot button in the upper-right corner of the page. There, you can toggle various screen elements on and off, switch between the Visual Editor and the Code Editor, choose which panels are displayed in your document settings, and more.<\/p><\/blockquote>\n<p>Gutenberg, the WordPress Block Editor, is a great tool for creators as it is modern, intuitive, and flexible. And yet, it offers a number of options that can be used to customize its interface and behavior. In this WordPress Gutenberg tutorial, we\u2019ll show you how you can customize the behavior and <a href=\"\/wordpress-tutorials\/wordpress-block-editor-interface\/\" target=\"_blank\" rel=\"noopener\">interface of the Block Editor<\/a>.<\/p>\n<blockquote class=\"gray\"><p><strong>Table of Contents:<\/strong><\/p>\n<ul>\n<li><a href=\"#what-is-gutenberg\">What Is the Gutenberg Editor in WordPress?<\/a><\/li>\n<li><a href=\"#how-to-access-gutenberg\">How Can I Access the WordPress Block Editor?<\/a><\/li>\n<li><a href=\"#view-options\">Learning Gutenberg\u2019s View Options<\/a><\/li>\n<li><a href=\"#editor-options\">Learning Gutenberg\u2019s Editor Options<\/a>\n<ul>\n<li><a href=\"#visual-code-editor-switching\">Can I Switch Between the Visual Editor and the Code Editor While Working on the Same Document?<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#block-management\">Block Management<\/a><\/li>\n<li><a href=\"#preferences\">Setting up the Gutenberg Editor Preferences<\/a>\n<ul>\n<li><a href=\"#general\">General<\/a><\/li>\n<li><a href=\"#appearance\">Appearance<\/a><\/li>\n<li><a href=\"#blocks\">Blocks<\/a><\/li>\n<li><a href=\"#panels\">Panels<\/a><\/li>\n<\/ul>\n<\/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 the Gutenberg Editor in WordPress?<\/h2>\n<p>The release of WordPress 5.0 brought with it a new content creation experience called <strong>Gutenberg<\/strong>. Unlike its predecessor, Gutenberg encapsulates every piece of content inside blocks which enables a greater degree of flexibility when making edits. If you have not used the WordPress Block Editor before, we recommend going through our <a href=\"\/wordpress-tutorials\/wordpress-block-editor-the-basics\/\" target=\"_blank\" rel=\"noopener\">crash-course on Gutenberg<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<h2 id=\"how-to-access-gutenberg\">How Can I Access the WordPress Block Editor?<\/h2>\n<p>WordPress will provide you with access to the Gutenberg editor once you start creating a new <a href=\"\/wordpress-tutorials\/how-to-post-on-wordpress\/\" target=\"_blank\" rel=\"noopener\">post<\/a>, <a href=\"\/wordpress-tutorials\/add-page-wordpress\/\" target=\"_blank\" rel=\"noopener\">page<\/a>, or <a href=\"\/wordpress-tutorials\/add-widgets-wordpress\/\" target=\"_blank\" rel=\"noopener\">widget<\/a>. And if you don\u2019t have a website yet, simply sign up for our <a href=\"\/free-hosting\/\" target=\"_blank\" rel=\"noopener\">free hosting package<\/a> or one of our <a href=\"\/wordpress-hosting\/\" target=\"_blank\" rel=\"noopener\">premium WordPress hosting plans<\/a> and start building your online presence.<\/p>\n<p>&nbsp;<\/p>\n<h2 id=\"view-options\">Learning Gutenberg\u2019s View Options<\/h2>\n<p>Most of Gutenberg\u2019s settings are hidden in a menu that is activated by the three-dot button at the end of the <a href=\"\/wordpress-tutorials\/wordpress-block-editor-interface\/#top-toolbar\" target=\"_blank\" rel=\"noopener\">Top Toolbar<\/a>. In this section, we\u2019ll take a closer look at the first three settings:<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/10\/wordpress-block-editor-1.webp\" alt=\"The first three settings in the Options menu allow you to change how Gutenberg is displayed.\" \/><figcaption>The first three settings in the Options menu allow you to change how Gutenberg is displayed.<\/figcaption><\/figure>\n<p>The first setting you\u2019ll encounter is the <strong>Top toolbar<\/strong>. When this option is active, as indicated by the checkmark next to it, all <a href=\"\/wordpress-tutorials\/wordpress-block-editor-interface\/#contextual-toolbar\" target=\"_blank\" rel=\"noopener\">Contextual Toolbars<\/a> will be anchored to the Top Toolbar instead of appearing within the <a href=\"\/wordpress-tutorials\/wordpress-block-editor-interface\/#main-content-area\" target=\"_blank\" rel=\"noopener\">Main Content Area<\/a>.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/10\/wordpress-block-editor-2.webp\" alt=\"The Top toolbar option will move the Contextual Toolbar so it appears below the Top Toolbar every time.\" \/><figcaption>The Top toolbar option will move the Contextual Toolbar so it appears below the Top Toolbar every time.<\/figcaption><\/figure>\n<p>The second option in the list is <strong>Spotlight mode<\/strong>. When enabled, this option will emphasize the block that is currently active and will fade out the rest.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/10\/wordpress-block-editor-3.webp\" alt=\"Spotlight mode shines a spotlight on the currently active block and fades out the others.\" \/><figcaption>Spotlight mode shines a spotlight on the currently active block and fades out the others.<\/figcaption><\/figure>\n<p>The last View option is <strong>Fullscreen mode<\/strong>. This toggle allows you to show and hide the WordPress back-end interface.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/10\/wordpress-block-editor-4.webp\" alt=\"When Fullscreen mode is enabled, you will see only the Gutenberg interface.\" \/><figcaption>When Fullscreen mode is enabled, you will see only the Gutenberg interface.<\/figcaption><\/figure>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/10\/wordpress-block-editor-5.webp\" alt=\"When Fullscreen mode is disabled, you will see the WordPress sidebar and top toolbar in addition to the Gutenberg interface.\" \/><figcaption>\u00a0When Fullscreen mode is disabled, you will see the WordPress sidebar and top toolbar in addition to the Gutenberg interface.<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<h2 id=\"editor-options\">Learning Gutenberg\u2019s Editor Options<\/h2>\n<p>The next group of settings deals with the Editor itself. You can use the <strong>Visual Editor<\/strong>, which enables you to create content using blocks, or the <strong>Code Editor<\/strong>, which lets you write HTML.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/10\/wordpress-block-editor-6.webp\" alt=\"The Gutenberg settings allow you to toggle between the Visual Editor and the Code Editor.\" \/><figcaption>The Gutenberg settings allow you to toggle between the Visual Editor and the Code Editor.<\/figcaption><\/figure>\n<p>Once you switch to the Code Editor, Gutenberg\u2019s interface will change significantly. You will no longer see your blocks and instead, you will be presented with the HTML that makes up those blocks.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/10\/wordpress-block-editor-7.webp\" alt=\"The Code Editor allows you to alter the HTML code directly.\" \/><figcaption>The Code Editor allows you to alter the HTML code directly.<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<h3 id=\"visual-code-editor-switching\">Can I Switch Between the Visual Editor and the Code Editor While Working on the Same Document?<\/h3>\n<p>Yes, it is possible to seamlessly switch between the Visual Editor and the Code Editor while working on the same document. That said, you should consider the Code Editor an advanced feature and use it only as a last resort.<\/p>\n<p>Also, you may notice that WordPress annotates your various blocks with custom comments. If you insert HTML code that is not annotated, it will be placed inside a Classic block.<\/p>\n<p>&nbsp;<\/p>\n<h2 id=\"block-management\">Block Management<\/h2>\n<p>Next, we\u2019ll briefly look at two options that allow you to manage the blocks that appear in the Block Library.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/10\/wordpress-block-editor-8.webp\" alt=\"The Block Manager and Manage Reusable blocks options allow you to choose which blocks appear in the Block Library.\" \/><figcaption>The Block Manager and Manage Reusable blocks options allow you to choose which blocks appear in the Block Library.<\/figcaption><\/figure>\n<p>The first option is the <strong>Block Manager<\/strong>. Thanks to the Block Manager, you can enable and disable Gutenberg blocks. The other option is <strong>Manage Reusable blocks<\/strong>. To learn more about it, you can check our article on <a href=\"\/wordpress-tutorials\/wordpress-reusable-blocks\/\" target=\"_blank\" rel=\"noopener\">what reusable blocks are and how to use them<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<h2 id=\"preferences\">Setting up the Gutenberg Editor Preferences<\/h2>\n<p>In addition to the various toggles in the Options menu, the WordPress Block Editor also comes with a full-fledged preference pane. You can access it by clicking on the <strong>Preferences<\/strong> button at the very bottom of the Options menu.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/10\/wordpress-block-editor-9.webp\" alt=\"You can click on the Preferences button in order to access Gutenberg\u2019s preference pane.\" \/><figcaption>You can click on the Preferences button in order to access Gutenberg\u2019s preference pane.<\/figcaption><\/figure>\n<p>The preference pane is divided into four sections. We\u2019ll explore those in greater detail below.<\/p>\n<p>&nbsp;<\/p>\n<h3 id=\"general\">General<\/h3>\n<p>The <em>General<\/em> tab lets you enable or disable the <strong>pre-publish checklist<\/strong>. If you are not familiar with this feature we recommend going over our guide on publishing with WordPress.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/10\/wordpress-block-editor-10.webp\" alt=\"The first tab in the Preference pane lets you toggle the pre-publish checklist as well as various options to help you focus on your content.\" \/><figcaption>The first tab in the Preference pane lets you toggle the pre-publish checklist as well as various options to help you focus on your content.<\/figcaption><\/figure>\n<p>The second group of options allows you to reduce distractions while working with your content. The toggle called <strong>Reduce the interface<\/strong> would hide most buttons from the <a href=\"\/wordpress-tutorials\/wordpress-block-editor-interface\/#top-toolbar\" target=\"_blank\" rel=\"noopener\">Top Toolbar<\/a> and completely remove the <a href=\"\/wordpress-tutorials\/wordpress-block-editor-interface\/#status-bar\" target=\"_blank\" rel=\"noopener\">Status Bar<\/a>. That said, you can still reveal the buttons from the Top Toolbar by hovering your mouse cursor over it.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/10\/wordpress-block-editor-11.gif\" alt=\"You can reveal the Top Toolbar\u2019s hidden buttons by hovering the mouse cursor over it.\" \/><figcaption>You can reveal the Top Toolbar\u2019s hidden buttons by hovering the mouse cursor over it.<\/figcaption><\/figure>\n<p><strong>Spotlight mode<\/strong> is the same feature that we <a href=\"#view-options\">discussed earlier<\/a> which allows you to focus on the currently selected block.<\/p>\n<p>And lastly, the <strong>Display block breadcrumbs<\/strong> toggle can show and hide the Status Bar. Note that this option will be hidden if the <em>Reduce the interface<\/em> toggle is turned on.<\/p>\n<p>&nbsp;<\/p>\n<h3 id=\"appearance\">Appearance<\/h3>\n<p>The <em>Appearance<\/em> section of Gutenberg\u2019s preference pane contains two options: <strong>Display button labels<\/strong> and <strong>Use theme styles<\/strong>.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/10\/wordpress-block-editor-12.webp\" alt=\"The Appearance section in Gutenberg\u2019s Preferences contains two options.\" \/><figcaption>The Appearance section in Gutenberg\u2019s Preferences contains two options.<\/figcaption><\/figure>\n<p>The <em>Display button labels<\/em> option replaces the glyphs used on buttons with text labels.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/10\/wordpress-block-editor-13.webp\" alt=\"When the Display button labels option is turned on, all buttons retain their original locations and replace each glyph with a text label.\" \/><figcaption>When the Display button labels option is turned on, all buttons retain their original locations and replace each glyph with a text label.<\/figcaption><\/figure>\n<blockquote class=\"green\"><p><strong>Tip:<\/strong><\/p>\n<p>You can reveal the label for each button as a tooltip by hovering your mouse cursor over it.<\/p><\/blockquote>\n<p>The <em>Use theme styles<\/em> toggle allows Gutenberg to use the visual style of your theme while you\u2019re interacting with your blocks. Turning off this feature would remove all custom styling from the Main Content Area.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/10\/wordpress-block-editor-14.webp\" alt=\"When the Use theme styles option is turned off, the Main Content Area will not retain any of the styles used in the active theme.\" \/><figcaption>When the Use theme styles option is turned off, the Main Content Area will not retain any of the styles used in the active theme.<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<h3 id=\"blocks\">Blocks<\/h3>\n<p>The third tab in the Gutenberg preference pane is all about <em>Blocks<\/em>. You\u2019ll find two options here: <strong>Show most used blocks<\/strong> and <strong>Contain text cursor inside blocks<\/strong>.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/10\/wordpress-block-editor-15.webp\" alt=\"The third tab in the Preferences window contains block-related options.\" \/><figcaption>The third tab in the Preferences window contains block-related options.<\/figcaption><\/figure>\n<p>The first option adds a <em>Most Used<\/em> section in the <a href=\"\/wordpress-tutorials\/wordpress-block-library\/\" target=\"_blank\" rel=\"noopener\">Gutenberg Block Library<\/a> where you can quickly access your most frequently used blocks. And the second option aids screen readers by stopping the text caret from leaving blocks.<\/p>\n<p>&nbsp;<\/p>\n<h3 id=\"panels\">Panels<\/h3>\n<p>The last tab in the Gutenberg preferences is called <em>Panels<\/em>.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/10\/wordpress-block-editor-16.webp\" alt=\"The bottom tab in the Preferences window allows you to show and hide several Sidebar panels.\" \/><figcaption>The bottom tab in the Preferences window allows you to show and hide several Sidebar panels.<\/figcaption><\/figure>\n<p>Clicking on these toggles will show and hide the various panels that appear in the Gutenberg <a href=\"\/wordpress-tutorials\/wordpress-block-editor-interface\/#sidebar\" target=\"_blank\" rel=\"noopener\">sidebar<\/a>.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/10\/wordpress-block-editor-17.webp\" alt=\"Gutenberg allows you to customize the panels that appear in its Sidebar.\" \/><figcaption>Gutenberg allows you to customize the panels that appear in its Sidebar.<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<h2 id=\"next-steps\">Next Steps<\/h2>\n<p>Now that we have gone over the various settings and preferences that Gutenberg has to offer, you should be able to customize the Gutenberg interface and behavior to your liking. And if you wish to become even more proficient with the WordPress Block Editor, we recommend <a href=\"\/wordpress-tutorials\/gutenberg-keyboard-shortcuts\/\" target=\"_blank\" rel=\"noopener\">learning the most popular keyboard shortcuts in Gutenberg<\/a>, the best Gutenberg plugins, and how to use Gutenberg blocks.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This Gutenberg tutorial covers the various ways of customizing the WordPress Block Editor interface so that you can work more efficiently.<\/p>\n","protected":false},"author":7,"featured_media":50321,"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-50281","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: Customizing the WordPress Block Editor Interface<\/title>\n<meta name=\"description\" content=\"This Gutenberg tutorial covers the various ways of customizing the WordPress Block Editor interface so that you can work more efficiently.\" \/>\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\/customizing-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: Customizing the WordPress Block Editor Interface\" \/>\n<meta property=\"og:description\" content=\"This Gutenberg tutorial covers the various ways of customizing the WordPress Block Editor interface so that you can work more efficiently.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.awardspace.com\/wordpress-tutorials\/customizing-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-13T09:42:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-18T10:45:04+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=\"10 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\/customizing-wordpress-block-editor-interface\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/customizing-wordpress-block-editor-interface\/\"},\"author\":{\"name\":\"iskrend\",\"@id\":\"https:\/\/www.awardspace.com\/#\/schema\/person\/964cd1bbc68d83dc446a9ea98ebc7232\"},\"headline\":\"Gutenberg Tutorial: Customizing the WordPress Block Editor Interface\",\"datePublished\":\"2021-10-13T09:42:56+00:00\",\"dateModified\":\"2024-10-18T10:45:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/customizing-wordpress-block-editor-interface\/\"},\"wordCount\":1408,\"publisher\":{\"@id\":\"https:\/\/www.awardspace.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/customizing-wordpress-block-editor-interface\/#primaryimage\"},\"thumbnailUrl\":\"\",\"articleSection\":[\"Gutenberg\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/customizing-wordpress-block-editor-interface\/\",\"url\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/customizing-wordpress-block-editor-interface\/\",\"name\":\"Gutenberg Tutorial: Customizing the WordPress Block Editor Interface\",\"isPartOf\":{\"@id\":\"https:\/\/www.awardspace.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/customizing-wordpress-block-editor-interface\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/customizing-wordpress-block-editor-interface\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2021-10-13T09:42:56+00:00\",\"dateModified\":\"2024-10-18T10:45:04+00:00\",\"description\":\"This Gutenberg tutorial covers the various ways of customizing the WordPress Block Editor interface so that you can work more efficiently.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/customizing-wordpress-block-editor-interface\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.awardspace.com\/wordpress-tutorials\/customizing-wordpress-block-editor-interface\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/customizing-wordpress-block-editor-interface\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/customizing-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: Customizing the WordPress Block Editor Interface\"}]},{\"@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: Customizing the WordPress Block Editor Interface","description":"This Gutenberg tutorial covers the various ways of customizing the WordPress Block Editor interface so that you can work more efficiently.","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\/customizing-wordpress-block-editor-interface\/","og_locale":"en_US","og_type":"article","og_title":"Gutenberg Tutorial: Customizing the WordPress Block Editor Interface","og_description":"This Gutenberg tutorial covers the various ways of customizing the WordPress Block Editor interface so that you can work more efficiently.","og_url":"https:\/\/www.awardspace.com\/wordpress-tutorials\/customizing-wordpress-block-editor-interface\/","og_site_name":"AwardSpace.com","article_publisher":"https:\/\/www.facebook.com\/AwardSpace\/","article_published_time":"2021-10-13T09:42:56+00:00","article_modified_time":"2024-10-18T10:45:04+00:00","author":"iskrend","twitter_card":"summary_large_image","twitter_creator":"@awspace","twitter_site":"@awspace","twitter_misc":{"Written by":"iskrend","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/customizing-wordpress-block-editor-interface\/#article","isPartOf":{"@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/customizing-wordpress-block-editor-interface\/"},"author":{"name":"iskrend","@id":"https:\/\/www.awardspace.com\/#\/schema\/person\/964cd1bbc68d83dc446a9ea98ebc7232"},"headline":"Gutenberg Tutorial: Customizing the WordPress Block Editor Interface","datePublished":"2021-10-13T09:42:56+00:00","dateModified":"2024-10-18T10:45:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/customizing-wordpress-block-editor-interface\/"},"wordCount":1408,"publisher":{"@id":"https:\/\/www.awardspace.com\/#organization"},"image":{"@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/customizing-wordpress-block-editor-interface\/#primaryimage"},"thumbnailUrl":"","articleSection":["Gutenberg"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/customizing-wordpress-block-editor-interface\/","url":"https:\/\/www.awardspace.com\/wordpress-tutorials\/customizing-wordpress-block-editor-interface\/","name":"Gutenberg Tutorial: Customizing the WordPress Block Editor Interface","isPartOf":{"@id":"https:\/\/www.awardspace.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/customizing-wordpress-block-editor-interface\/#primaryimage"},"image":{"@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/customizing-wordpress-block-editor-interface\/#primaryimage"},"thumbnailUrl":"","datePublished":"2021-10-13T09:42:56+00:00","dateModified":"2024-10-18T10:45:04+00:00","description":"This Gutenberg tutorial covers the various ways of customizing the WordPress Block Editor interface so that you can work more efficiently.","breadcrumb":{"@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/customizing-wordpress-block-editor-interface\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.awardspace.com\/wordpress-tutorials\/customizing-wordpress-block-editor-interface\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/customizing-wordpress-block-editor-interface\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/customizing-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: Customizing the WordPress Block Editor Interface"}]},{"@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\/50281","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=50281"}],"version-history":[{"count":1,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/posts\/50281\/revisions"}],"predecessor-version":[{"id":75740,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/posts\/50281\/revisions\/75740"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.awardspace.com\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/media?parent=50281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/categories?post=50281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/tags?post=50281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}