{"id":15678,"date":"2023-09-07T14:00:00","date_gmt":"2023-09-07T14:00:00","guid":{"rendered":"https:\/\/www.hostduplex.com\/blog\/?p=15678"},"modified":"2023-10-16T17:27:09","modified_gmt":"2023-10-16T17:27:09","slug":"how-to-use-gutenberg-block-editor","status":"publish","type":"post","link":"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/","title":{"rendered":"How to Use Gutenberg Block Editor: Best WordPress Block Editor Tutorial (2023)"},"content":{"rendered":"\n<p><a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/about\/\">WordPress<\/a>, the world&#8217;s most popular content management system, has always been at the forefront of <a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/www.hostduplex.com\/blog\/jetpack-ai-assistant-for-wordpress\/\">content creation<\/a>. Previously, WordPress relied on the <a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/www.tiny.cloud\/\">TinyMCE editor<\/a>, which was a straightforward, linear content editor. Over the years, WordPress evolved, and the demand for more dynamic content grew. The introduction of the <a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/gutenberg\/\">Gutenberg block editor<\/a> in WordPress 5.0 back in 2018 marked a new era of adapting to the needs of its vast user base.<\/p>\n\n\n\n<p>The Gutenberg editor, named after <a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/en.wikipedia.org\/wiki\/Johannes_Gutenberg\">Johannes Gutenberg<\/a>, the inventor of the printing press, was initially the project name for this editor. However, as it became an integral part of the core WordPress software, it&#8217;s now more commonly referred to as the &#8220;block editor.&#8221; Gone were the days of a single canvas; now, content could be created using individual blocks, each with its unique properties and settings.<\/p>\n\n\n\n<p>In this guide, we&#8217;ll explore how to use Gutenberg Block Editor. From its basic functionalities to advanced techniques, this tutorial has got you covered.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_62 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#What_is_the_Gutenberg_Block_Editor\" title=\"What is the Gutenberg Block Editor?\">What is the Gutenberg Block Editor?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#The_transition_from_Gutenberg_to_the_WordPress_block_editor\" title=\"The transition from Gutenberg to the WordPress block editor\">The transition from Gutenberg to the WordPress block editor<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Full-site_editing\" title=\"Full-site editing\">Full-site editing<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#How_Does_the_WordPress_Gutenberg_Editor_Work\" title=\"How Does the WordPress Gutenberg Editor Work?\">How Does the WordPress Gutenberg Editor Work?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Comparison_with_traditional_page_builders\" title=\"Comparison with traditional page builders\">Comparison with traditional page builders<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Advanced_layout_techniques_with_columns_block\" title=\"Advanced layout techniques with columns block\">Advanced layout techniques with columns block<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Do_You_Need_a_Special_Theme_for_Gutenberg\" title=\"Do You Need a Special Theme for Gutenberg?\">Do You Need a Special Theme for Gutenberg?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Compatibility_of_Gutenberg_with_various_themes\" title=\"Compatibility of Gutenberg with various themes\">Compatibility of Gutenberg with various themes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Block_themes\" title=\"Block themes\">Block themes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Classic_Themes_vs_Block_Themes\" title=\"Classic Themes vs. Block Themes\">Classic Themes vs. Block Themes<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Building_Your_First_Post_with_Gutenberg_WordPress_Block_Editor\" title=\"Building Your First Post with Gutenberg WordPress Block Editor\">Building Your First Post with Gutenberg WordPress Block Editor<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#1_Navigating_to_create_a_new_post_or_page\" title=\"1. Navigating to create a new post or page\">1. Navigating to create a new post or page<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#2_Working_with_Blocks\" title=\"2. Working with Blocks\">2. Working with Blocks<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#3_Customizing_and_Formatting_Blocks\" title=\"3. Customizing and Formatting Blocks\">3. Customizing and Formatting Blocks<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Enhancing_Your_Content_with_Specialized_Blocks\" title=\"Enhancing Your Content with Specialized Blocks\">Enhancing Your Content with Specialized Blocks<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Embedding_Multimedia\" title=\"Embedding Multimedia\">Embedding Multimedia<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Designing_Layouts_with_Columns_and_Groups\" title=\"Designing Layouts with Columns and Groups\">Designing Layouts with Columns and Groups<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Creating_tables_inside_articles\" title=\"Creating tables inside articles\">Creating tables inside articles<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Adding_buttons_in_posts_and_pages\" title=\"Adding buttons in posts and pages\">Adding buttons in posts and pages<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Advanced_Block_Techniques\" title=\"Advanced Block Techniques\">Advanced Block Techniques<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Grouping_and_Organizing_Blocks\" title=\"Grouping and Organizing Blocks\">Grouping and Organizing Blocks<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Creating_Reusable_Blocks\" title=\"Creating Reusable Blocks\">Creating Reusable Blocks<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Direct_source_code_editing\" title=\"Direct source code editing\">Direct source code editing<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Full-screen_mode_fixed_toolbar_and_spotlight_mode\" title=\"Full-screen mode, fixed toolbar, and spotlight mode\">Full-screen mode, fixed toolbar, and spotlight mode<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Tips_for_a_Smooth_Gutenberg_Experience\" title=\"Tips for a Smooth Gutenberg Experience\">Tips for a Smooth Gutenberg Experience<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Use_the_Search_Function\" title=\"Use the Search Function\">Use the Search Function<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Use_Keyboard_Shortcuts\" title=\"Use Keyboard Shortcuts\">Use Keyboard Shortcuts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Preview_Often\" title=\"Preview Often\">Preview Often<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Use_Block_Navigation\" title=\"Use Block Navigation\">Use Block Navigation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-30\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Make_Reusable_Blocks\" title=\"Make Reusable Blocks\">Make Reusable Blocks<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-31\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Overview_Content_Structure\" title=\"Overview Content Structure\">Overview Content Structure<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-32\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Copy-Paste_with_Ease\" title=\"Copy-Paste with Ease\">Copy-Paste with Ease<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-33\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Use_Block_Patterns\" title=\"Use Block Patterns\">Use Block Patterns<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-34\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Handling_Old_Content_in_Gutenberg\" title=\"Handling Old Content in Gutenberg\">Handling Old Content in Gutenberg<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-35\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#The_transition_of_old_content_to_the_Classic_block\" title=\"The transition of old content to the Classic block\">The transition of old content to the Classic block<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-36\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Options_for_editing_old_content\" title=\"Options for editing old content\">Options for editing old content<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-37\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Full-Site_Editing_with_Gutenberg\" title=\"Full-Site Editing with Gutenberg\">Full-Site Editing with Gutenberg<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-38\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#What_is_Full_Site_Editor_FSE\" title=\"What is Full Site Editor (FSE)?\">What is Full Site Editor (FSE)?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-39\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Sum_Up\" title=\"Sum Up\">Sum Up<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-40\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#FAQs\" title=\"FAQs\">FAQs<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-41\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Is_Gutenberg_a_Part_of_WordPress\" title=\"Is Gutenberg a Part of WordPress?\">Is Gutenberg a Part of WordPress?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-42\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Can_I_still_use_the_Classic_Editor_with_WordPress\" title=\"Can I still use the Classic Editor with WordPress?\">Can I still use the Classic Editor with WordPress?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-43\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Are_my_old_posts_and_pages_compatible_with_Gutenberg\" title=\"Are my old posts and pages compatible with Gutenberg?\">Are my old posts and pages compatible with Gutenberg?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-44\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#How_do_I_add_custom_blocks_to_Gutenberg\" title=\"How do I add custom blocks to Gutenberg?\">How do I add custom blocks to Gutenberg?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-45\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Is_Gutenberg_SEO-friendly\" title=\"Is Gutenberg SEO-friendly?\">Is Gutenberg SEO-friendly?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-46\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Im_facing_issues_with_a_specific_block_What_should_I_do\" title=\"I&#8217;m facing issues with a specific block. What should I do?\">I&#8217;m facing issues with a specific block. What should I do?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-47\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-use-gutenberg-block-editor\/#Can_I_use_Gutenberg_to_create_custom_post_types\" title=\"Can I use Gutenberg to create custom post types?\">Can I use Gutenberg to create custom post types?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_the_Gutenberg_Block_Editor\"><\/span><strong>What is the Gutenberg Block Editor?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Released in November 2018, WordPress 5.0 was a landmark update for the platform. The highlight of this release was the Gutenberg block editor, replacing the <a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.com\/support\/classic-editor-guide\/\">classic editor<\/a> that users had grown accustomed to. This wasn&#8217;t just a new feature; it was a paradigm shift in content creation, emphasizing flexibility and user experience.<\/p>\n\n\n\n<p>Gutenberg&#8217;s primary objective was to enhance the user experience, making content creation more intuitive and visually engaging. It achieves this by using a block-based approach. Every element, be it paragraphs, headings, lists, buttons, widgets, or columns, is represented as a block. This modular approach allows users to easily add, customize, and rearrange content elements.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"The_transition_from_Gutenberg_to_the_WordPress_block_editor\"><\/span><strong>The transition from Gutenberg to the WordPress block editor<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>While Gutenberg started as a project to revamp the WordPress editor, it has now become synonymous with the WordPress block editor. The essence of block-based editing lies in its simplicity and flexibility. Each block is an independent content element that can be customized, rearranged, or reused. This approach offers users a visual representation of their page, making the editor feel more like a <a href=\"https:\/\/www.hostduplex.com\/blog\/best-magento-2-page-builder-extensions\/\" target=\"_blank\" rel=\"noopener\">page builder<\/a> than its predecessor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Full-site_editing\"><\/span><strong>Full-site editing<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Full-site editing is one of the groundbreaking features of Gutenberg. It allows users to design and customize their entire website using the block editor. From headers and footers to sidebars and content, every aspect of the site can be crafted using blocks. This feature introduces tools like the Site Editor, Template Editing Mode, and Block Themes, providing users with unparalleled control over their website&#8217;s design and functionality.<\/p>\n\n\n\n<p>(We&#8217;ll discuss full site editing in detail later in this article.)<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_Does_the_WordPress_Gutenberg_Editor_Work\"><\/span><strong>How Does the WordPress Gutenberg Editor Work?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>At its core, Gutenberg is all about &#8220;blocks.&#8221; Think of blocks as individual units of content\u2014be it a paragraph, an image, a video, or even a table. This modular approach allows you to craft content by adding, customizing, and rearranging these blocks, giving you a visual representation of your post or page.<\/p>\n\n\n\n<p>Blocks are the fundamental elements in the Gutenberg editor. Whether you&#8217;re adding text, images, videos, or widgets, each piece of content is represented as a block. This system provides flexibility, allowing you to easily move, customize, or even reuse blocks across your posts and pages.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Comparison_with_traditional_page_builders\"><\/span><strong>Comparison with traditional page builders<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>While traditional page builders relied on shortcodes and custom interfaces, Gutenberg&#8217;s block-based approach offers a more intuitive experience. It feels more like a modern page builder, where you can visually design your content, but it&#8217;s baked right into WordPress.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Advanced_layout_techniques_with_columns_block\"><\/span><strong>Advanced layout techniques with columns block<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>One of the standout features of Gutenberg is its ability to handle advanced layouts with ease. You can group blocks, organize content into columns, and even create intricate designs without relying on additional plugins or custom code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Do_You_Need_a_Special_Theme_for_Gutenberg\"><\/span><strong>Do You Need a Special Theme for Gutenberg?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>There&#8217;s been a lot of buzz about Gutenberg&#8217;s compatibility with various WordPress themes. The good news is, Gutenberg has been designed to work seamlessly with most of the existing <a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/themes\/\">WordPress themes<\/a> and <a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/www.hostduplex.com\/blog\/top-10-best-wordpress-plugins\/\">plugins<\/a>. However, there are some nuances to consider.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Compatibility_of_Gutenberg_with_various_themes\"><\/span><strong>Compatibility of Gutenberg with various themes<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Most modern <a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/www.hostduplex.com\/blog\/top-highly-customizable-wordpress-themes\/\">WordPress themes<\/a> are Gutenberg-ready, meaning they&#8217;ve been optimized to take full advantage of the block editor&#8217;s features. These themes ensure that blocks appear as intended, maintaining consistent styling and functionality across the site. If you&#8217;re using an older theme, it&#8217;s a good idea to check with the theme developer or look for updates that make it Gutenberg-compatible.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Block_themes\"><\/span><strong>Block themes<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/developer.wordpress.org\/themes\/block-themes\/\">Block themes<\/a> are a newer concept introduced alongside Gutenberg&#8217;s <a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/developer.wordpress.org\/block-editor\/getting-started\/full-site-editing\/\">full-site editing capabilities<\/a>. These themes are built entirely using blocks, allowing users to customize every aspect of their website using the block editor. Block themes provide a more unified and integrated experience, ensuring that what you see in the editor is precisely what you get on the live site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Classic_Themes_vs_Block_Themes\"><\/span><strong>Classic Themes vs. Block Themes<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-table is-style-stripes has-small-font-size\"><table><tbody><tr><td><strong>Feature\/Aspect<\/strong><\/td><td><strong>Block Themes<\/strong><\/td><td><strong>Classic Themes<\/strong><\/td><\/tr><tr><td><strong>Foundation<\/strong><strong><\/strong><\/td><td>Built for the block editor (Gutenberg)<\/td><td>Built primarily for the classic editor<\/td><\/tr><tr><td><strong>Flexibility<\/strong><strong><\/strong><\/td><td>Highly flexible with block patterns &amp; full-site editing<\/td><td>Limited to theme options &amp; customizer settings<\/td><\/tr><tr><td><strong>Customization<\/strong><strong><\/strong><\/td><td>Deep customization using blocks<\/td><td>Requires additional plugins or custom code<\/td><\/tr><tr><td><strong>Learning Curve<\/strong><strong><\/strong><\/td><td>Might be steeper for traditional WP users<\/td><td>Familiar for long-time WordPress users<\/td><\/tr><tr><td><strong>Performance<\/strong><strong><\/strong><\/td><td><a href=\"https:\/\/www.hostduplex.com\/blog\/magento-speed-optimization-tips\/\" target=\"_blank\" rel=\"noopener\">Optimized for speed<\/a> with fewer overheads<\/td><td>Performance varies; might need optimization<\/td><\/tr><tr><td><strong>Integration with Editor<\/strong><strong><\/strong><\/td><td>Seamless integration with Gutenberg<\/td><td>Might require updates or tweaks for Gutenberg<\/td><\/tr><tr><td><strong>Template Editing<\/strong><strong><\/strong><\/td><td>Full-site editing capability<\/td><td>Limited to theme templates<\/td><\/tr><tr><td><strong>Code Base<\/strong><strong><\/strong><\/td><td>Modern, often using JavaScript &amp; React<\/td><td>Traditional PHP, CSS, and possibly JavaScript<\/td><\/tr><tr><td><strong>Future<\/strong><strong><\/strong><\/td><td>The direction WordPress is heading<\/td><td>Might become obsolete as Gutenberg evolves further<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\">Block Themes vs Classic Themes Compared<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Building_Your_First_Post_with_Gutenberg_WordPress_Block_Editor\"><\/span><strong>Building Your First Post with Gutenberg WordPress Block Editor<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Navigating_to_create_a_new_post_or_page\"><\/span><strong>1. Navigating to create a new post or page<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Before you start crafting your masterpiece, you need to know how to access the Gutenberg editor:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Log in to your WordPress Dashboard:<\/strong> This is usually accessed by appending <strong>\/wp-admin<\/strong> to your website&#8217;s URL.<br><img decoding=\"async\" width=\"250\" height=\"303\" class=\"wp-image-15682\" style=\"width: 250px;\" src=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/WordPress-Admin-Login-.webp\" alt=\"Screenshot of WordPress login page\" srcset=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/WordPress-Admin-Login-.webp 315w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/WordPress-Admin-Login--247x300.webp 247w\" sizes=\"(max-width: 250px) 100vw, 250px\" \/><\/li>\n\n\n\n<li><strong>Navigate to Posts:<\/strong> On the left-hand sidebar, click on &#8216;Posts&#8217;.<img decoding=\"async\" width=\"500\" height=\"179\" class=\"wp-image-15683\" style=\"width: 500px;\" src=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Posts-navigation-dasboard.webp\" alt=\"Screenshot of posts section in wordpress dashboard\" srcset=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Posts-navigation-dasboard.webp 554w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Posts-navigation-dasboard-300x107.webp 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/li>\n\n\n\n<li><strong>Add New:<\/strong> Click on the &#8216;Add New&#8217; button at the top. This will launch the WordPress Gutenberg block editor.<\/li>\n<\/ul>\n\n\n\n<p>The Gutenberg editor might look different from what you&#8217;re used to, but it&#8217;s designed for efficiency. Here&#8217;s a breakdown:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Editing Area:<\/strong> This is the main canvas where you&#8217;ll add and arrange your blocks. It&#8217;s a live preview, so you&#8217;ll see your post shaping up in real time.<img decoding=\"async\" width=\"700\" height=\"303\" class=\"wp-image-15684\" style=\"width: 700px;\" src=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Editing-Area-.webp\" alt=\"Screenshot of the editing are of WordPress block editor\" srcset=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Editing-Area-.webp 1348w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Editing-Area--300x130.webp 300w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Editing-Area--1024x444.webp 1024w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Editing-Area--768x333.webp 768w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/li>\n\n\n\n<li><strong>Block Library:<\/strong> Clicking on the &#8216;+&#8217; icon, usually at the top left, reveals the block library. Here, you can search for and add various blocks to your post. From basic text and images to more advanced layouts and widgets, the library has it all.<br><img decoding=\"async\" width=\"300\" height=\"667\" class=\"wp-image-15685\" style=\"width: 300px;\" src=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Block-library-.webp\" alt=\"Screenshot of block library showing various blocks in WordPress block editor\" srcset=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Block-library-.webp 263w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Block-library--135x300.webp 135w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/li>\n\n\n\n<li><strong>Settings:<\/strong> On the upper right side, you&#8217;ll find the settings icon that opens the settings panel. This panel changes contextually, offering settings for the entire post or the specific block you&#8217;ve selected. Here, you can set post attributes, categories, tags, and more. When a block is selected, this panel lets you tweak its specific settings.<br><img decoding=\"async\" width=\"300\" height=\"425\" class=\"wp-image-15686\" style=\"width: 300px;\" src=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Settings-panel-.webp\" alt=\"screenshot of settings panel in the WordPress block editor\" srcset=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Settings-panel-.webp 281w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Settings-panel--212x300.webp 212w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Working_with_Blocks\"><\/span><strong>2. Working with Blocks<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>The Gutenberg Block Editor is all about blocks. These blocks are the building blocks (pun intended) of your content. Whether you&#8217;re adding text, images, videos, or more complex elements, everything is done through blocks. Let&#8217;s understand how to work with them effectively.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Adding Blocks to Your Post<\/strong><\/h4>\n\n\n\n<p>To add a new block, click on the &#8220;+&#8221; button. This can be found on the top left corner, below an existing block, or to the right of a block. A menu will pop up, showcasing various block types. You can search for specific blocks or browse through categories.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"386\" src=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Adding-Blocks--1024x386.webp\" alt=\"screenshot of adding blocks in your post or page\" class=\"wp-image-15687\" srcset=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Adding-Blocks--1024x386.webp 1024w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Adding-Blocks--300x113.webp 300w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Adding-Blocks--768x289.webp 768w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Adding-Blocks-.webp 1351w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Commonly Used Blocks<\/strong><\/h4>\n\n\n\n<p>Some blocks you&#8217;ll find yourself using frequently include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Paragraph Block:<\/strong> The staple for adding text.<\/li>\n\n\n\n<li><strong>Image Block:<\/strong> Add an image block and upload your desired image or select one from the media library.<\/li>\n\n\n\n<li><strong>Heading Block:<\/strong> To add headings (H1, H2, H3, etc.).<\/li>\n\n\n\n<li><strong>List Block:<\/strong> For bullet points or numbered lists.<\/li>\n\n\n\n<li><strong>Quote Block:<\/strong> To highlight quotations.<\/li>\n\n\n\n<li><strong>Links:<\/strong> Most text blocks have a link button in the toolbar. Use this to hyperlink text.<\/li>\n\n\n\n<li><strong>Gallery:<\/strong> For showcasing multiple images, use the gallery block. Upload or select the images you want to display.<\/li>\n\n\n\n<li><strong>Shortcodes:<\/strong> If you&#8217;re using plugins that provide shortcodes, you can add them to a paragraph block or use the dedicated shortcode block.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Organizing Blocks<\/strong><\/h4>\n\n\n\n<p>You can easily rearrange blocks by dragging them or using the up and down arrows from the quick access toolbar. For more complex layouts, group blocks or organize them into columns.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"726\" height=\"458\" src=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Organizing-blocks.webp\" alt=\"screenshot of the quick access toolbar showing navigation control to organize blocks\" class=\"wp-image-15688\" srcset=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Organizing-blocks.webp 726w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Organizing-blocks-300x189.webp 300w\" sizes=\"(max-width: 726px) 100vw, 726px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Quick Add<\/strong><\/h4>\n\n\n\n<p>If you&#8217;re in the flow of writing and don&#8217;t want to interrupt yourself by searching for a block, you can use the quick add feature. Simply type <strong>\/<\/strong> followed by the block&#8217;s name. For instance, <strong>\/image<\/strong> will prompt the image block. This quick action can drastically reduce your content creation time.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"335\" height=\"367\" src=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Quick-Add-.webp\" alt=\"Screenshot of quick add option for blocks to save time\" class=\"wp-image-15689\" srcset=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Quick-Add-.webp 335w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Quick-Add--274x300.webp 274w\" sizes=\"(max-width: 335px) 100vw, 335px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Customizing_and_Formatting_Blocks\"><\/span><strong>3. Customizing and Formatting Blocks<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Each block in Gutenberg comes with its unique settings, allowing you to customize it to your liking.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Adjusting Block Settings<\/strong><\/h4>\n\n\n\n<p>Once you&#8217;ve added a block, you&#8217;ll notice a new panel on the right side of your screen. This is the block settings panel. Here, you can adjust various attributes of the block, from its alignment to its color and more.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"277\" height=\"521\" src=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/adjusting-block-settings-.webp\" alt=\"screenshot of adjusting block setting option in block editor.\" class=\"wp-image-15690\" srcset=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/adjusting-block-settings-.webp 277w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/adjusting-block-settings--160x300.webp 160w\" sizes=\"(max-width: 277px) 100vw, 277px\" \/><\/figure>\n<\/div>\n\n\n<h4 class=\"wp-block-heading\"><strong>Styling and Alignment<\/strong><\/h4>\n\n\n\n<p>Many blocks, especially text blocks, come with styling options. You can make your text bold, italic, add links, or even change its color. Additionally, alignment options let you position your block to the left, center, or right.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"611\" height=\"244\" src=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Styling-and-alignment-.webp\" alt=\"Screenshot of the styling  and alignment options for the text\" class=\"wp-image-15691\" srcset=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Styling-and-alignment-.webp 611w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Styling-and-alignment--300x120.webp 300w\" sizes=\"(max-width: 611px) 100vw, 611px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Advanced Settings<\/strong><\/h4>\n\n\n\n<p>Some blocks come with advanced settings that let you add custom CSS classes, set block-specific permissions, and more. While beginners might not use these often, they&#8217;re invaluable for those looking to achieve a specific look or functionality.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"279\" height=\"518\" src=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Advanced-block-settings-.webp\" alt=\"screenshot displaying advanced block settings in WordPress block editor.\" class=\"wp-image-15692\" srcset=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Advanced-block-settings-.webp 279w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Advanced-block-settings--162x300.webp 162w\" sizes=\"(max-width: 279px) 100vw, 279px\" \/><\/figure>\n<\/div>\n\n\n<p>Read our complete guide on <a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/www.hostduplex.com\/blog\/how-to-add-a-new-post-in-wordpress\/\">How to Add a New Post in WordPress<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Enhancing_Your_Content_with_Specialized_Blocks\"><\/span><strong>Enhancing Your Content with Specialized Blocks<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The Gutenberg Block Editor is not just about basic content blocks like paragraphs and images. It offers a plethora of specialized blocks designed to make your content stand out and cater to specific needs. Let&#8217;s explore some of these blocks and how they can help your content shine.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Embedding_Multimedia\"><\/span><strong>Embedding Multimedia<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Video Block<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"843\" height=\"297\" src=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Video-Block.webp\" alt=\"Screenshot of video block in block editor\" class=\"wp-image-15693\" srcset=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Video-Block.webp 843w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Video-Block-300x106.webp 300w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Video-Block-768x271.webp 768w\" sizes=\"(max-width: 843px) 100vw, 843px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Purpose:<\/strong> Allows you to embed videos directly into your posts or pages.<\/li>\n\n\n\n<li><strong>How to Use:<\/strong> Simply add the block, paste the video URL (from platforms like YouTube, Vimeo, etc.), and Gutenberg will automatically embed it. You can also upload videos directly, but be mindful of file sizes and loading times.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Audio Block<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"822\" height=\"283\" src=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Audio-Block-.webp\" alt=\"screenshot of audio block in block editor\" class=\"wp-image-15694\" srcset=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Audio-Block-.webp 822w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Audio-Block--300x103.webp 300w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Audio-Block--768x264.webp 768w\" sizes=\"(max-width: 822px) 100vw, 822px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Purpose:<\/strong> Ideal for embedding audio files, like podcasts or music tracks.<\/li>\n\n\n\n<li><strong>How to Use:<\/strong> Add the block, upload your audio file, and it&#8217;s ready to play. You can also link to external audio sources.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Gallery Block<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"816\" height=\"273\" src=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Gallery-Block-.webp\" alt=\"screenshot of gallery block in WordPress block editor \" class=\"wp-image-15695\" srcset=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Gallery-Block-.webp 816w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Gallery-Block--300x100.webp 300w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Gallery-Block--768x257.webp 768w\" sizes=\"(max-width: 816px) 100vw, 816px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Purpose:<\/strong> Display multiple images in a grid format.<\/li>\n\n\n\n<li><strong>How to Use:<\/strong> Add the block, upload or select images from your media library, and arrange them as desired. You can also adjust the number of columns and image cropping.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Embed Blocks<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"826\" height=\"287\" src=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Embed-Block-.webp\" alt=\"Screenshot of embed block\" class=\"wp-image-15696\" srcset=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Embed-Block-.webp 826w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Embed-Block--300x104.webp 300w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Embed-Block--768x267.webp 768w\" sizes=\"(max-width: 826px) 100vw, 826px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Purpose:<\/strong> Integrating third-party content is simpler than ever. Gutenberg has dedicated blocks for the most popular services. Embed content from external platforms like Twitter, Instagram, Spotify, and more.<\/li>\n\n\n\n<li><strong>How to Use:<\/strong> Choose the specific embed block for the platform you want (e.g., Twitter Embed), paste the URL, and Gutenberg will handle the rest.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Media &amp; Text block<\/strong><\/h4>\n\n\n\n<p>One of the standout features is the Media &amp; Text block. This allows you to place an image alongside text, perfect for creating visually appealing sections that combine visuals and content seamlessly.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"883\" height=\"382\" src=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Media-text-block-.webp\" alt=\"Screenshot of media and text block in WordPress block editor\" class=\"wp-image-15697\" srcset=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Media-text-block-.webp 883w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Media-text-block--300x130.webp 300w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Media-text-block--768x332.webp 768w\" sizes=\"(max-width: 883px) 100vw, 883px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Designing_Layouts_with_Columns_and_Groups\"><\/span><strong>Designing Layouts with Columns and Groups<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Columns Block<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Purpose:<\/strong> Create multi-column layouts for more intricate designs.<\/li>\n\n\n\n<li><strong>How to Use:<\/strong> Add the block, select the number of columns, and start adding content to each column. You can adjust the column width and alignment for responsive designs.<br><img decoding=\"async\" width=\"700\" height=\"302\" class=\"wp-image-15698\" style=\"width: 700px;\" src=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Column-block-.webp\" alt=\"Screenshot of Column block in block editor\" srcset=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Column-block-.webp 825w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Column-block--300x129.webp 300w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Column-block--768x331.webp 768w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Group Block<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Purpose:<\/strong> Group multiple blocks together, allowing you to set shared attributes like background color or spacing.<\/li>\n\n\n\n<li><strong>How to Use:<\/strong> Add the block, and start adding content inside. It acts as a container for other blocks, making it easier to move or style a group of blocks together.<br><img decoding=\"async\" width=\"700\" height=\"175\" class=\"wp-image-15699\" style=\"width: 700px;\" src=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Group-block-.webp\" alt=\"screenshot of group block in WordPress block editor\" srcset=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Group-block-.webp 822w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Group-block--300x75.webp 300w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Group-block--768x192.webp 768w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Creating_tables_inside_articles\"><\/span><strong>Creating tables inside articles<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Gone are the days when you needed custom CSS or <a href=\"https:\/\/www.hostduplex.com\/blog\/wordpress-table-of-contents-plugins\/\" target=\"_blank\" rel=\"noopener\">plugins to insert tables<\/a>. With Gutenberg&#8217;s Table block, you can easily insert tables, choose the number of columns and rows, and input your data. It&#8217;s a straightforward way to organize and present information.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"842\" height=\"293\" src=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Table-Block-.webp\" alt=\"Screenshot of table block in WordPress block editor\" class=\"wp-image-15700\" srcset=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Table-Block-.webp 842w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Table-Block--300x104.webp 300w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Table-Block--768x267.webp 768w\" sizes=\"(max-width: 842px) 100vw, 842px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Adding_buttons_in_posts_and_pages\"><\/span><strong>Adding buttons in posts and pages<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Call-to-actions are crucial for engagement. With Gutenberg&#8217;s Button block, you can add stylish buttons to your content, linking them to other pages or external sites.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"572\" height=\"129\" src=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Button-Block-.webp\" alt=\"Screenshot displaying button block in block editor\" class=\"wp-image-15701\" srcset=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Button-Block-.webp 572w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Button-Block--300x68.webp 300w\" sizes=\"(max-width: 572px) 100vw, 572px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Advanced_Block_Techniques\"><\/span><strong>Advanced Block Techniques<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Grouping_and_Organizing_Blocks\"><\/span><strong>Grouping and Organizing Blocks<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Grouping Blocks<\/strong><\/h4>\n\n\n\n<p>Why Group? Grouping allows you to combine multiple blocks into a single unit. This is especially useful when you want to apply a shared background color, spacing, or other design elements to a set of blocks.<\/p>\n\n\n\n<p>How to Group?Simply select multiple blocks (by holding down the Shift key and clicking on each block) and then right-click to find the &#8216;Group&#8217; option.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Arranging Blocks<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Drag and Drop:<\/strong> The easiest way to rearrange blocks is by using the drag-and-drop method. Hover over the block you want to move, click on the six-dot icon that appears, and drag the block to its new position.<\/li>\n\n\n\n<li><strong>Up and Down Arrows:<\/strong> On the left side of each block, you&#8217;ll notice up and down arrows. These can be used to quickly move a block from one position up or down.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Creating_Reusable_Blocks\"><\/span><strong>Creating Reusable Blocks<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Why Use Reusable Blocks?<\/strong><\/h4>\n\n\n\n<p>If you find yourself using the same content or layout across multiple posts or pages, reusable blocks can save you a lot of time.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>How to Create Reusable Blocks?<\/strong><\/h4>\n\n\n\n<p>After setting up a block (or group of blocks) the way you want, click on the three-dot menu icon on the block toolbar and select &#8216;Add to Reusable Blocks&#8217;. Give it a name, and you&#8217;re set!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"672\" height=\"508\" src=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Reusable-Blocks-.webp\" alt=\"Screenshot displaying how to create reusable blocks in WordPress block editor \" class=\"wp-image-15702\" srcset=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Reusable-Blocks-.webp 672w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Reusable-Blocks--300x227.webp 300w\" sizes=\"(max-width: 672px) 100vw, 672px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Managing Reusable Blocks<\/strong><\/h4>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Accessing and Editing<\/strong><\/h5>\n\n\n\n<p>To access all your reusable blocks, click on the &#8216;+&#8217; icon to open the block library and then navigate to the &#8216;Reusable&#8217; tab. Insert the reusable block, click on the three-dot menu icon, and select &#8216;Manage patterns&#8217;.From here, you can insert, edit, or delete reusable blocks.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"574\" height=\"421\" src=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Accessing-and-editing-reusable-blocks-.webp\" alt=\"Screenshot displaying reusable block accessing and editing feature in WordPress Block editor \" class=\"wp-image-15703\" srcset=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Accessing-and-editing-reusable-blocks-.webp 574w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Accessing-and-editing-reusable-blocks--300x220.webp 300w\" sizes=\"(max-width: 574px) 100vw, 574px\" \/><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Converting Back to Regular Blocks<\/strong><\/h5>\n\n\n\n<p>If you want to make changes to a reusable block without affecting other instances, you can detach it back to a regular block. Simply insert the reusable block, click on the three-dot menu icon, and select &#8216;detach patterns&#8217;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"574\" height=\"421\" src=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Converting-back-to-Regular-blocks-.webp\" alt=\"Screenshot displaying the process to convert back the reusable block to regular block\" class=\"wp-image-15704\" srcset=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Converting-back-to-Regular-blocks-.webp 574w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Converting-back-to-Regular-blocks--300x220.webp 300w\" sizes=\"(max-width: 574px) 100vw, 574px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Direct_source_code_editing\"><\/span><strong>Direct source code editing<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>For those who are comfortable with HTML, Gutenberg provides an &#8216;Edit as HTML&#8217; option. This allows you to see and edit the HTML of your blocks directly. It&#8217;s perfect for making precise adjustments or adding custom code snippets.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"658\" height=\"366\" src=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Direct-Source-Code-Editing-.webp\" alt=\"Screenshot displaying direct source code editing feature of WordPress Block Editor\" class=\"wp-image-15705\" srcset=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Direct-Source-Code-Editing-.webp 658w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Direct-Source-Code-Editing--300x167.webp 300w\" sizes=\"(max-width: 658px) 100vw, 658px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Full-screen_mode_fixed_toolbar_and_spotlight_mode\"><\/span><strong>Full-screen mode, fixed toolbar, and spotlight mode<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Enhance your focus with the full-screen mode, eliminating distractions from the WordPress dashboard.<\/li>\n\n\n\n<li>The fixed toolbar option consolidates all block toolbars to the top of the editor, making tools easily accessible.<\/li>\n\n\n\n<li>If you find the editor interface too cluttered, you can enable Spotlight Mode. This mode highlights the block you&#8217;re currently editing and fades out the rest, allowing you to focus on one block at a time.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"339\" height=\"381\" src=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/View-Options.webp\" alt=\"Screenshot displaying editing screen view options of WordPress Block editor\" class=\"wp-image-15706\" srcset=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/View-Options.webp 339w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/View-Options-267x300.webp 267w\" sizes=\"(max-width: 339px) 100vw, 339px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tips_for_a_Smooth_Gutenberg_Experience\"><\/span><strong>Tips for a Smooth Gutenberg Experience<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The Gutenberg Block Editor, while powerful and flexible, can be a bit overwhelming for newcomers. But with a few tips and tricks up your sleeve, you can master it in no time. Here are some insights to ensure a smooth content creation experience:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Use_the_Search_Function\"><\/span><strong>Use the Search Function<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>With so many blocks available, the search function in the block library will be your best friend. Start typing the name of the block, and it&#8217;ll pop right up.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"349\" height=\"175\" src=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Search-Function-.webp\" alt=\"Screenshot of search function in block editor to find blocks by entering block names\" class=\"wp-image-15707\" srcset=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Search-Function-.webp 349w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Search-Function--300x150.webp 300w\" sizes=\"(max-width: 349px) 100vw, 349px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Use_Keyboard_Shortcuts\"><\/span><strong>Use Keyboard Shortcuts<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Gutenberg comes with a plethora of keyboard shortcuts to speed up your editing. For instance, pressing &#8216;\/&#8217; immediately after adding a new block lets you search for blocks right from the editing area. Some commonly used shortcuts are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Shift + Alt + H<\/strong>: Display the keyboard shortcut help.<\/li>\n\n\n\n<li><strong>Ctrl + Shift + D<\/strong>: Duplicate the selected block(s).<\/li>\n\n\n\n<li><strong>Ctrl + Alt + T<\/strong>: Insert a new block above the current block.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Preview_Often\"><\/span><strong>Preview Often<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>The &#8216;Preview&#8217; button at the top lets you see how your post will look on the live site. It&#8217;s a good practice to preview your post frequently to ensure everything looks just right.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"392\" height=\"256\" src=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Preview-Function-.webp\" alt=\"Screenshot displaying Preview feature in block editor.\" class=\"wp-image-15708\" srcset=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Preview-Function-.webp 392w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Preview-Function--300x196.webp 300w\" sizes=\"(max-width: 392px) 100vw, 392px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Use_Block_Navigation\"><\/span><strong>Use Block Navigation<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>For posts with numerous blocks, navigating between them can be a chore. Use the Block Navigation tool (located at the top-left corner) to get an overview of all blocks in your post and jump to any block with a single click.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"355\" height=\"326\" src=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Block-Navigation-.webp\" alt=\"Screenshot of block navigation panel in WordPress block editor\" class=\"wp-image-15709\" srcset=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Block-Navigation-.webp 355w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Block-Navigation--300x275.webp 300w\" sizes=\"(max-width: 355px) 100vw, 355px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Make_Reusable_Blocks\"><\/span><strong>Make Reusable Blocks<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>As mentioned earlier, if you find yourself using the same layout or content across multiple posts, turn them into Reusable Blocks. This not only saves time but also ensures consistency across your content.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Overview_Content_Structure\"><\/span><strong>Overview Content Structure<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Want a quick overview of your content&#8217;s structure? Click on the &#8216;Document Overview&#8217; icon at the top-left corner and click on the outline tab. This tool provides a word count, heading count, and a document outline, helping you ensure a well-structured post.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"348\" height=\"427\" src=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Document-Overview-.webp\" alt=\"Screenshot displaying document overview panel of WordPress Block editor\" class=\"wp-image-15710\" srcset=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Document-Overview-.webp 348w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Document-Overview--244x300.webp 244w\" sizes=\"(max-width: 348px) 100vw, 348px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Copy-Paste_with_Ease\"><\/span><strong>Copy-Paste with Ease<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Gutenberg handles copy-pasting gracefully. You can copy content from other editors or even Google Docs, and when pasted into Gutenberg, it will automatically convert them into appropriate blocks.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Use_Block_Patterns\"><\/span><strong>Use Block Patterns<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Introduced in WordPress 5.5, Block Patterns are pre-designed sections (combinations of blocks) that you can insert into your posts. They allow you to insert complex layouts quickly and can be a real time-saver.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Handling_Old_Content_in_Gutenberg\"><\/span><strong>Handling Old Content in Gutenberg<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Transitioning to Gutenberg might raise concerns about your existing content. But don&#8217;t fret; Gutenberg has been designed with backward compatibility in mind. Here&#8217;s what you need to know:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"The_transition_of_old_content_to_the_Classic_block\"><\/span><strong>The transition of old content to the Classic block<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>When you open an older post or page in Gutenberg, it&#8217;s automatically placed inside a &#8216;Classic&#8217; block. This block retains the familiar Classic Editor interface, ensuring that your content remains unchanged.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Options_for_editing_old_content\"><\/span><strong>Options for editing old content<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Editing within the Classic Block:<\/strong> You can edit your old content right within the Classic Block, using the familiar Classic Editor tools.<\/li>\n\n\n\n<li><strong>Converting to Gutenberg Blocks:<\/strong> If you wish to harness the power of Gutenberg for your old content, you can convert the Classic block into individual Gutenberg blocks. This allows you to redesign and reformat your old posts using the advanced features of the block editor.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Full-Site_Editing_with_Gutenberg\"><\/span><strong>Full-Site Editing with Gutenberg<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The Gutenberg journey doesn&#8217;t stop at just editing posts and pages. With the introduction of Full-Site Editing (FSE), the horizon of what you can achieve with Gutenberg has expanded exponentially. Let&#8217;s explore this transformative feature:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_Full_Site_Editor_FSE\"><\/span><strong>What is Full Site Editor (FSE)?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>As discussed earlier, Full-Site Editing is a revolutionary feature that allows users to edit the content and the entire website using Gutenberg blocks. This includes headers, footers, sidebars, and more. Essentially, it&#8217;s bringing the power of Gutenberg to the whole website, making WordPress more of a full-fledged website builder.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Template parts editing and theme blocks<\/strong><\/h4>\n\n\n\n<p>With FSE, you can edit template parts directly. This means you can modify specific sections of your website, like the header or footer, without affecting other parts. Additionally, theme blocks allow you to insert specific elements of your theme, such as site title, post title, and post content, directly into your posts and pages.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"349\" height=\"515\" src=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Theme-Blocks-.webp\" alt=\"Screenshot displaying theme templates block in WordPress block editor\" class=\"wp-image-15711\" srcset=\"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Theme-Blocks-.webp 349w, https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/Theme-Blocks--203x300.webp 203w\" sizes=\"(max-width: 349px) 100vw, 349px\" \/><\/figure>\n<\/div>\n\n\n<p>The beauty of Full-Site Editing is that it provides a unified, block-based approach to building and customizing your entire website. Whether you&#8217;re tweaking the design of your homepage or updating the footer&#8217;s copyright information, everything is done through a consistent, user-friendly interface.<\/p>\n\n\n\n<p>This feature is especially beneficial for those who might not have technical expertise. Instead of delving into theme files or understanding PHP, users can visually design and structure their websites. It&#8217;s a step towards democratizing website design, making it accessible for everyone.<\/p>\n\n\n\n<p>However, as with any new feature, there&#8217;s a learning curve. It&#8217;s essential to familiarize yourself with the new interface, understand the available blocks, and practice to get the hang of it. But once you do, the possibilities with Full-Site Editing are endless.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Sum_Up\"><\/span><strong>Sum Up<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The Gutenberg block editor has undeniably transformed the way we create content in WordPress. It&#8217;s not just a new editor; it&#8217;s a paradigm shift. From the modular approach of blocks to the enhanced flexibility in design, Gutenberg offers a modern content creation experience.<\/p>\n\n\n\n<p>Gutenberg&#8217;s introduction was met with mixed reactions. Some embraced the change, while others were apprehensive. However, as time passed, it became evident that the block editor was here to stay. It addressed many of the limitations of the Classic Editor, offering a more intuitive interface and advanced design capabilities without the need for additional plugins.<\/p>\n\n\n\n<p>One of the most significant advantages of Gutenberg is its empowerment of users. Even those without any design or coding experience can craft beautiful, media-rich content. The drag-and-drop functionality, the ability to easily embed content from platforms like <a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/www.google.com\/\">YouTube<\/a> and <a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/twitter.com\/\">Twitter<\/a>, and the introduction of reusable blocks have all contributed to a more efficient and enjoyable content creation process.<\/p>\n\n\n\n<p>As with any technology, continuous improvement is the key. The <a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/make.wordpress.org\/community\/\">WordPress community<\/a> is actively working on refining and expanding the capabilities of the Gutenberg editor. With the introduction of Full Site Editing and more advanced blocks on the horizon, the <a href=\"https:\/\/www.hostduplex.com\/blog\/wordpress-and-web3\/\" target=\"_blank\" rel=\"noopener\">future of content creation in WordPress<\/a> looks promising.<\/p>\n\n\n\n<p>Change can be challenging, but it often paves the way for innovation and growth. If you haven&#8217;t fully dived into Gutenberg yet, now is the time. Explore its features, experiment with different blocks, and discover the potential it holds. Remember, the best way to predict the future is to create it. And with Gutenberg, you have the tools to do just that.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"FAQs\"><\/span>FAQs<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1694094031522\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"Is_Gutenberg_a_Part_of_WordPress\"><\/span><strong>Is Gutenberg a Part of WordPress?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Absolutely! Gutenberg is now an integral part of the WordPress core. This innovative block editor replaced the classic TinyMCE editor, bringing a fresh and modern approach to content creation to the platform.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1694094036352\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"Can_I_still_use_the_Classic_Editor_with_WordPress\"><\/span><strong>Can I still use the Classic Editor with WordPress?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Yes, while Gutenberg is the default editor for WordPress, users can still use the Classic Editor by installing the Classic Editor plugin. This allows users to switch between Gutenberg and the Classic Editor as needed.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1694094044934\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"Are_my_old_posts_and_pages_compatible_with_Gutenberg\"><\/span><strong>Are my old posts and pages compatible with Gutenberg?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Absolutely! When you edit an old post or page in Gutenberg, it will be placed inside a Classic block, preserving its original formatting. From there, you can choose to convert it to individual Gutenberg blocks or leave it as is.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1694094053097\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"How_do_I_add_custom_blocks_to_Gutenberg\"><\/span><strong>How do I add custom blocks to Gutenberg?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>There are numerous plugins available that offer custom blocks for Gutenberg. By installing these plugins, you can extend the default set of blocks provided by Gutenberg and add specialized blocks tailored to your needs.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1694094062561\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"Is_Gutenberg_SEO-friendly\"><\/span><strong>Is Gutenberg SEO-friendly?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Yes, Gutenberg is designed with SEO in mind. The block structure allows for clean and semantic HTML output, which is beneficial for SEO. Additionally, many SEO plugins are fully compatible with Gutenberg, ensuring that your content is optimized for search engines.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1694094072095\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"Im_facing_issues_with_a_specific_block_What_should_I_do\"><\/span><strong>I&#8217;m facing issues with a specific block. What should I do?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>First, ensure that your WordPress installation and plugins are updated. If the issue persists, seek help from WordPress experts or the support forum of the specific block or plugin causing the issue.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1694094086607\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"Can_I_use_Gutenberg_to_create_custom_post_types\"><\/span><strong>Can I use Gutenberg to create custom post types?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Yes, Gutenberg supports custom post types. Developers can register custom post types with Gutenberg support, allowing users to utilize the block editor for various content types beyond just posts and pages.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>WordPress, the world&#8217;s most popular content management system, has always been at the forefront of content creation. Previously, WordPress relied on the TinyMCE editor,&#8230;<\/p>\n","protected":false},"author":8,"featured_media":15681,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[52,97],"tags":[14,96,53,255],"class_list":["post-15678","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","category-how-tos","tag-gutenberg","tag-how-to","tag-wordpress","tag-wordpress-editor","article","has-excerpt","has-avatar","has-author","has-date","has-comment-count","has-category-meta","has-read-more","thumbnail-"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/www.hostduplex.com\/blog\/wp-content\/uploads\/2023\/09\/How-to-use-gutenberg-block-editor-Wordpress-Block-Editor-tutorial.webp","_links":{"self":[{"href":"https:\/\/www.hostduplex.com\/blog\/wp-json\/wp\/v2\/posts\/15678","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostduplex.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostduplex.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostduplex.com\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostduplex.com\/blog\/wp-json\/wp\/v2\/comments?post=15678"}],"version-history":[{"count":5,"href":"https:\/\/www.hostduplex.com\/blog\/wp-json\/wp\/v2\/posts\/15678\/revisions"}],"predecessor-version":[{"id":16058,"href":"https:\/\/www.hostduplex.com\/blog\/wp-json\/wp\/v2\/posts\/15678\/revisions\/16058"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostduplex.com\/blog\/wp-json\/wp\/v2\/media\/15681"}],"wp:attachment":[{"href":"https:\/\/www.hostduplex.com\/blog\/wp-json\/wp\/v2\/media?parent=15678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostduplex.com\/blog\/wp-json\/wp\/v2\/categories?post=15678"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostduplex.com\/blog\/wp-json\/wp\/v2\/tags?post=15678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}