{"id":7043,"date":"2022-03-21T14:51:58","date_gmt":"2022-03-21T14:51:58","guid":{"rendered":"https:\/\/www.hostinger.com\/tutorials\/?p=7043"},"modified":"2026-03-10T10:11:55","modified_gmt":"2026-03-10T10:11:55","slug":"gutenberg-wordpress","status":"publish","type":"post","link":"\/uk\/tutorials\/gutenberg-wordpress","title":{"rendered":"What is WordPress Gutenberg? understanding the block editor"},"content":{"rendered":"<?xml encoding=\"utf-8\" ?><p>If you&rsquo;re new to WordPress, start by familiarizing yourself with Gutenberg, its block editor, to manage the platform more effectively. Introduced as a replacement for the classic editor, it has become a core part of the content management system&rsquo;s website-building experience.<\/p><p>WordPress Gutenberg uses a block-based design system, making it much more user-friendly for all skill levels. Understanding its functions and design capabilities can help you create your ideal website without having to code.<\/p><p>Whether you&rsquo;re building a personal blog or a multi-page website, this guide will help you get the most out of the block editor.<\/p><p>\n\n\n<div class=\"protip\">\n                    <h2 class=\"featured-snippet title\">What is WordPress Gutenberg?<\/h2>\n                    <p>Gutenberg is the WordPress default editor that replaced the classic editor. It lets you create and design content easily using blocks for various site elements, such as text, images, and videos. Its drag-and-drop interface makes it easy to use, giving you more flexibility to design your website just as you want.<\/p>\n                <\/div>\n\n\n\n<\/p><p>In the WordPress community, Gutenberg isn&rsquo;t just a content editor &#8210; it&rsquo;s part of a larger ongoing project to transform the whole website editing experience. The WordPress core team has outlined a <a href=\"https:\/\/wordpress.org\/about\/roadmap\/\" target=\"_blank\" rel=\"noopener\">roadmap<\/a> to achieve this:<\/p><ul class=\"wp-block-list\">\n<li><strong>Easier editing.<\/strong> Introduced in WordPress 5.0, the Gutenberg block editor offers a more intuitive approach to website building.<\/li>\n\n\n\n<li><strong>Customization.<\/strong> WordPress 5.9 added full-site editing, block patterns, a block directory, and block-based themes based on the Gutenberg interface.<\/li>\n\n\n\n<li><strong>Collaboration.<\/strong> Future updates aim to simplify co-authoring and make it more user-friendly.<\/li>\n\n\n\n<li><strong>Multilingual.<\/strong> The team is working to support multilingual websites directly within the core software.<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-how-gutenberg-editor-works\">How Gutenberg editor works<\/h3><p>The Gutenberg WordPress block editor makes adding and editing different elements on your posts and pages easy by using individual content blocks. Each block works as a standalone piece with customizable settings.<\/p><p>Getting started with the block editor is simple. Go to your WordPress dashboard, then head to <strong>Pages<\/strong> or <strong>Posts<\/strong> &rarr; <strong>Add New<\/strong> to open the Gutenberg interface.<\/p><figure data-wp-context='{\"imageId\":\"69dc5ce535df4\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"449\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/wordpress-gutenberg-interface-1024x449.png\" alt=\"WordPress Gutenberg interface\n\" class=\"wp-image-119355\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/wordpress-gutenberg-interface-1024x449.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/wordpress-gutenberg-interface-300x132.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/wordpress-gutenberg-interface-150x66.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/wordpress-gutenberg-interface-768x337.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/wordpress-gutenberg-interface-1536x674.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/wordpress-gutenberg-interface.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>To add a block, click the <strong>+<\/strong> icon at the top left to see all available options organized by type. Drag and drop a block into the editor and place it wherever you like.<\/p><p>You can customize each block using the toolbar at the top of the element or the settings panel on the right.<\/p><p>For faster design, Gutenberg offers <a href=\"\/uk\/tutorials\/wordpress-block-patterns\">block patterns<\/a> &#8210; pre-made combinations of blocks, like columns with images and buttons.<\/p><p>If you&rsquo;re tech-savvy, you can even create your own <a href=\"\/uk\/tutorials\/wordpress-blocks\">WordPress blocks<\/a> or block patterns and share them with others.<\/p><h2 class=\"wp-block-heading\" id=\"h-gutenberg-editor-vs-classic-editor\">Gutenberg editor vs classic editor<\/h2><p>To better understand the block editor, let&rsquo;s compare it with its predecessor and see the upgrades it brings.<\/p><figure data-wp-context='{\"imageId\":\"69dc5ce53860d\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"469\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/wordpress-classic-editor-1-1024x469.png\" alt=\"WordPress classic editor interface\n\" class=\"wp-image-119356\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/wordpress-classic-editor-1-1024x469.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/wordpress-classic-editor-1-300x137.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/wordpress-classic-editor-1-150x69.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/wordpress-classic-editor-1-768x352.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/wordpress-classic-editor-1-1536x704.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/wordpress-classic-editor-1.png 1679w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>The WordPress classic editor, powered by the TinyMCE What You See Is What You Get (WYSIWYG) HTML editor, provides a straightforward, familiar interface for creating and editing posts and pages. It mimics traditional text editors like Microsoft Word, offering bold, italics, and lists for quick styling.<\/p><p>The visual editor allows users to upload media through the built-in image uploader. Switching to the text editor lets you add custom HTML code to posts and pages.<\/p><p>While the classic editor is reliable and easy to use, it lacks design flexibility. Creating complex layouts or advanced designs often requires extra plugins or custom HTML. Adding images and videos felt clunky. Also, you can&rsquo;t see real-time previews of your live content.<\/p><p>Enter the Gutenberg block editor to address these limitations.<\/p><p>Instead of relying on a single text box, Gutenberg uses individual blocks for different elements, including media. This approach makes page design more visual and intuitive.<\/p><p>The drag-and-drop feature removes the need for shortcodes and extra plugins, letting you create custom layouts and see results in real time. You can also customize block patterns and their layouts to fit your needs.<\/p><p>With full-site editing, you can now design headers, footers, and other site elements in posts and pages. Plus, Gutenberg is developer-friendly, enabling tech-savvy users to create custom blocks and reusable templates.<\/p><p>Here&rsquo;s a recap of the differences between the Gutenberg editor and the classic editor:<\/p><figure tabindex=\"0\" class=\"wp-block-table\"><table><tbody><tr><td><\/td><td><strong>Gutenberg editor<\/strong><\/td><td><strong>Classic editor<\/strong><\/td><\/tr><tr><td><strong>Editor interface<\/strong><\/td><td>Responsive and intuitive with self-explanatory menu settings.<\/td><td>Simple text interface, similar to an online document processor like Google Docs.<\/td><\/tr><tr><td><strong>Content creation<\/strong><\/td><td>Uses blocks with built-in content and customization features.<\/td><td>Offers a blank canvas for writing posts and pages.<\/td><\/tr><tr><td><strong>Ease of use<\/strong><\/td><td>Uses drag-and-drop blocks. Coding is optional.<\/td><td>Works like Google Docs but is easier with basic HTML skills.<\/td><\/tr><tr><td><strong>Features<\/strong><\/td><td>Offers drag-and-drop blocks, real-time previews, and easy customization for any skill level.<\/td><td>Provides a simple text box with basic formatting tools.<\/td><\/tr><tr><td><strong>Pros<\/strong><\/td><td>Offers flexible design, drag-and-drop blocks, real-time previews, and reusable templates.<\/td><td>Simple, familiar interface with easy formatting and minimal learning curve.<\/td><\/tr><tr><td><strong>Cons<\/strong><\/td><td>Takes a bit of practice to get used to.<\/td><td>Lacks design flexibility, visual layout tools, and modern customization features.<\/td><\/tr><\/tbody><\/table><\/figure><p>The Gutenberg block editor comes pre-installed in WordPress 5.0 and newer. If you&rsquo;re using an older version, you can still access it by installing the <a href=\"https:\/\/wordpress.org\/plugins\/gutenberg\/\" target=\"_blank\" rel=\"noopener\">Gutenberg plugin<\/a>. However, we recommend updating the latest WordPress version to optimize security.<\/p><p>You can remove the hassle of manual updates by switching to Hostinger. <a href=\"\/uk\/wordpress-hosting\">Hostinger&rsquo;s managed WordPress plans<\/a> include <strong>Smart WordPress Auto Updates<\/strong>, keeping your site secure and updated once activated. As every WordPress update usually has improvements for Gutenberg, enabling smart updates will help you save time.<\/p><?xml encoding=\"utf-8\" ?><figure class=\"wp-block-image size-large\"><a href=\"\/uk\/wordpress-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner-1024x300.png\" alt=\"\" class=\"wp-image-111781\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2024\/06\/New-WP_in-text-banner-1024x300.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2024\/06\/New-WP_in-text-banner-300x88.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2024\/06\/New-WP_in-text-banner-150x44.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2024\/06\/New-WP_in-text-banner-768x225.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2024\/06\/New-WP_in-text-banner-1536x450.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2024\/06\/New-WP_in-text-banner.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-how-to-use-the-wordpress-gutenberg-block-editor\">How to use the WordPress Gutenberg block editor<\/h2><p>Let&rsquo;s explore essential <a href=\"\/uk\/tutorials\/wordpress-hidden-features\">WordPress features<\/a> and steps to use Gutenberg for your website.<\/p><h3 class=\"wp-block-heading\" id=\"h-how-to-add-a-new-block\">How to add a new block<\/h3><p>The first step to using the block editor is to add a new block. There are several ways to do it.<\/p><p>When you open the Gutenberg editor, you&rsquo;ll notice a title block is already in place. To add another block, just move your cursor below it and click the black <strong>+<\/strong> icon to pick from the available options. If you don&rsquo;t see the block you need, click <strong>Browse all<\/strong> to view more.<\/p><figure data-wp-context='{\"imageId\":\"69dc5ce53c347\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"422\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/gutenberg-add-blocks-1024x422.png\" alt=\"Gutenberg editor interface, highlighting the button to add a block\n\" class=\"wp-image-119357\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-add-blocks-1024x422.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-add-blocks-300x124.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-add-blocks-150x62.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-add-blocks-768x317.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-add-blocks-1536x633.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-add-blocks.png 1919w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>Alternatively, use the toggle block inserter in the top left corner, marked by a blue <strong>+<\/strong> button. From there, you can click a block to place it where your cursor is or drag it into position between existing blocks in the editor.<\/p><figure data-wp-context='{\"imageId\":\"69dc5ce53ea27\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"426\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/gutenberg-toggle-block-inserter-1024x426.png\" alt=\"Gutenberg editor interface showing the list of available blocks\n\" class=\"wp-image-119358\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-toggle-block-inserter-1024x426.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-toggle-block-inserter-300x125.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-toggle-block-inserter-150x62.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-toggle-block-inserter-768x319.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-toggle-block-inserter-1536x639.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-toggle-block-inserter.png 1905w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>Another handy method is typing a slash (<strong>\/<\/strong>) followed by the block&rsquo;s name. Once it pops up, hit <strong>Enter<\/strong> to add it to your page or post.<\/p><figure data-wp-context='{\"imageId\":\"69dc5ce5410be\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"538\" height=\"556\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/gutenberg-add-blocks-manual-1.png\" alt=\"Adding a block manually by typing a slash followed by its name\n\" class=\"wp-image-119360\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-add-blocks-manual-1.png 538w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-add-blocks-manual-1-290x300.png 290w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-add-blocks-manual-1-145x150.png 145w\" sizes=\"(max-width: 538px) 100vw, 538px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>There are six types of blocks to choose from &#8210; text, media, design, widgets, theme, and embeds. If the one you need isn&rsquo;t available, the inserter will suggest options from the <a href=\"https:\/\/wordpress.org\/documentation\/article\/block-directory\/\" target=\"_blank\" rel=\"noopener\">Gutenberg block directory<\/a>, which is part of the WordPress plugin repository.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69dc5ce54375c\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"385\" height=\"842\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/gutenberg-block-directory.png\" alt=\"Gutenberg block directory\" class=\"wp-image-119361\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-directory.png 385w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-directory-137x300.png 137w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-directory-69x150.png 69w\" sizes=\"(max-width: 385px) 100vw, 385px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-how-to-customize-blocks\">How to customize blocks<\/h3><p>Customizing Gutenberg blocks in WordPress is easy. Just click on a block in the editor, and its toolbar will appear at the top.<\/p><p>The toolbar changes based on the block you&rsquo;ve selected. For example, if you&rsquo;re working with a table block, you&rsquo;ll see options to adjust text alignment or add rows and columns.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69dc5ce545e64\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"867\" height=\"548\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/gutenberg-block-toolbar-1.png\" alt=\"Gutenberg block toolbar\" class=\"wp-image-119362\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-toolbar-1.png 867w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-toolbar-1-300x190.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-toolbar-1-150x95.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-toolbar-1-768x485.png 768w\" sizes=\"(max-width: 867px) 100vw, 867px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>You can also access more settings by clicking the gear icon in the top-right corner of the editor. This opens a panel on the right sidebar where you can tweak styles, adjust dimensions, and change typography. For advanced users, you can add custom HTML or CSS to make any changes you want.<\/p><figure data-wp-context='{\"imageId\":\"69dc5ce54849f\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"445\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/gutenberg-block-settings-1-1024x445.png\" alt=\"Gutenberg block settings\n\" class=\"wp-image-119363\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-settings-1-1024x445.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-settings-1-300x130.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-settings-1-150x65.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-settings-1-768x334.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-settings-1-1536x668.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-settings-1.png 1919w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><h3 class=\"wp-block-heading\" id=\"h-how-to-arrange-blocks\">How to arrange blocks<\/h3><p>One of the biggest advantages of switching to Gutenberg is the ease of arranging elements. To move a block, simply click on it, select the six-dot icon on the toolbar, and drag it to where you want it.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69dc5ce54a7fa\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"762\" height=\"486\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/gutenberg-block-toolbar-drag.png\" alt=\"The drag feature in the block toolbar\" class=\"wp-image-119364\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-toolbar-drag.png 762w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-toolbar-drag-300x191.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-toolbar-drag-150x96.png 150w\" sizes=\"(max-width: 762px) 100vw, 762px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>You can also move multiple blocks at once. Hold down the <strong>Shift<\/strong> key, click the first block, and then select the others you want to include. Once grouped temporarily, use the six-dot icon to drag them all together.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69dc5ce54cde0\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"775\" height=\"436\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/gutenberg-block-toolbar-drag-multiple.png\" alt=\"Rearranging multiple blocks using the drag feature\" class=\"wp-image-119365\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-toolbar-drag-multiple.png 775w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-toolbar-drag-multiple-300x169.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-toolbar-drag-multiple-150x84.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-toolbar-drag-multiple-768x432.png 768w\" sizes=\"(max-width: 775px) 100vw, 775px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-how-to-group-multiple-blocks\">How to group multiple blocks<\/h3><p>Say you&rsquo;re creating a Services section on a homepage, where each item has an image, a headline, and a description, all neatly aligned. Grouping blocks is perfect for this because it lets you manage the whole section as one unit.<\/p><p>You can group blocks using <strong>Group<\/strong>, <strong>Columns<\/strong>, <strong>Row<\/strong>, or <strong>Stack<\/strong> blocks from the <strong>Design<\/strong> section of the block inserter. These design blocks create nested blocks &#8210; blocks placed inside a parent block &#8210; giving your layout a clear structure.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69dc5ce54f1f3\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"440\" height=\"684\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/gutenberg-block-design.png\" alt=\"Gutenberg design blocks\" class=\"wp-image-119366\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-design.png 440w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-design-193x300.png 193w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-design-96x150.png 96w\" sizes=\"(max-width: 440px) 100vw, 440px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>For example, a column block can act as a parent, holding child blocks like text and images, which appear indented under it in the editor.<\/p><p>Here&rsquo;s how to use the <strong>Columns<\/strong> block:<\/p><ol class=\"wp-block-list\">\n<li>Open the block inserter &rarr; <strong>Design<\/strong> &rarr; <strong>Columns<\/strong>.<\/li>\n\n\n\n<li>Choose a pre-designed layout or create a custom one.<\/li>\n<\/ol><figure data-wp-context='{\"imageId\":\"69dc5ce5515c0\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"446\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/gutenberg-block-column-1024x446.png\" alt=\"Adding a block column in Gutenberg\n\" class=\"wp-image-119367\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-column-1024x446.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-column-300x131.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-column-150x65.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-column-768x334.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-column-1536x669.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-column.png 1564w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><ol start=\"3\" class=\"wp-block-list\">\n<li>Add blocks inside each column by clicking the <strong>+<\/strong> sign.<\/li>\n<\/ol><figure data-wp-context='{\"imageId\":\"69dc5ce5538a9\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"450\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/gutenberg-add-blocks-column-1024x450.png\" alt=\"Adding blocks in columns\n\" class=\"wp-image-119368\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-add-blocks-column-1024x450.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-add-blocks-column-300x132.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-add-blocks-column-150x66.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-add-blocks-column-768x338.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-add-blocks-column-1536x675.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-add-blocks-column.png 1918w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><ol start=\"4\" class=\"wp-block-list\">\n<li>Use the toolbar or sidebar settings to adjust the layout and alignment.<\/li>\n<\/ol><p>In the sidebar, you&rsquo;ll find options like <strong>Inner blocks use content width<\/strong>. Turn it on to fit the inner blocks within the parent block&rsquo;s width, creating a cohesive design.<\/p><h3 class=\"wp-block-heading\" id=\"h-how-to-add-headings-and-text\">How to add headings and text<\/h3><p>You can introduce text to posts or pages with paragraph and heading blocks.<\/p><p>To add a paragraph, start typing directly into the Gutenberg editor. Alternatively, use the block inserter and select <strong>Paragraph<\/strong>.<\/p><figure data-wp-context='{\"imageId\":\"69dc5ce555be4\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"422\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/gutenberg-paragraph-block-1-1024x422.png\" alt=\"Gutenberg paragraph block\n\" class=\"wp-image-119369\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-paragraph-block-1-1024x422.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-paragraph-block-1-300x124.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-paragraph-block-1-150x62.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-paragraph-block-1-768x316.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-paragraph-block-1-1536x633.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-paragraph-block-1.png 1917w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>This block has a toolbar for basic options like aligning text, bolding, italics, and adding links. You can even include extras like footnotes, highlights, inline images, or subscripts and superscripts. The sidebar settings let you customize text color, typography, and dimensions for a polished look.<\/p><p>Heading blocks help organize your content, making it easier for readers and search engines to follow the flow. To add one, use any of the block-adding methods and select <strong>Heading<\/strong>. From there, pick the heading level (H1 to H6) in the toolbar.<\/p><figure data-wp-context='{\"imageId\":\"69dc5ce557d78\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"700\" height=\"452\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/gutenberg-heading-block.png\" alt=\"Gutenberg heading block\n\" class=\"wp-image-119370\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-heading-block.png 700w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-heading-block-300x194.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-heading-block-150x97.png 150w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>Like the paragraph block, the heading block lets you adjust alignment, width, and other attributes using the toolbar or sidebar settings.<\/p><h3 class=\"wp-block-heading\" id=\"h-how-to-add-images-and-media\">How to add images and media<\/h3><p>The Gutenberg editor makes it easy to add different types of media to your posts and pages, like images, audio, videos, and files. It also offers some dynamic blocks, including:<\/p><ul class=\"wp-block-list\">\n<li><strong>Media &amp; Text.<\/strong> Combines media and text side by side for better storytelling.<\/li>\n\n\n\n<li><strong>Image Gallery.<\/strong> Displays multiple images in one area, great for portfolios and photography sites.<\/li>\n\n\n\n<li><strong>Cover.<\/strong> Adds text overlays to images or videos, ideal for eye-catching headers or highlights.<\/li>\n<\/ul><figure data-wp-context='{\"imageId\":\"69dc5ce55a00b\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"439\" height=\"570\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/gutenberg-media-block.png\" alt=\"Gutenberg media blocks\n\" class=\"wp-image-119371\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-media-block.png 439w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-media-block-231x300.png 231w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-media-block-116x150.png 116w\" sizes=\"(max-width: 439px) 100vw, 439px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>To use these blocks, pick one from the block library and upload your media or select files from the Media Library. Or, add URLs to add files like audio or images. For image and gallery blocks, you can drag and drop multiple files at once to save time.<\/p><figure data-wp-context='{\"imageId\":\"69dc5ce55c1b0\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"439\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/WordPress-media-library-2-1024x439.png\" alt=\"Creating a gallery using images in the Media Library\n\" class=\"wp-image-119373\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/WordPress-media-library-2-1024x439.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/WordPress-media-library-2-300x129.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/WordPress-media-library-2-150x64.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/WordPress-media-library-2-768x329.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/WordPress-media-library-2-1536x659.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/WordPress-media-library-2.png 1842w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>Each block has its own settings. For example, the <strong>Image<\/strong> block lets you tweak corners, borders, and radius, while the <strong>Media &amp; Text<\/strong> block offers alignment, mobile stacking, color, and typography options.<\/p><figure data-wp-context='{\"imageId\":\"69dc5ce55e39f\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"453\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/gutenberg-media-text-block-1024x453.png\" alt=\"Gutenberg media and text block\n\" class=\"wp-image-119374\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-media-text-block-1024x453.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-media-text-block-300x133.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-media-text-block-150x66.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-media-text-block-768x340.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-media-text-block-1536x680.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-media-text-block.png 1907w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>Need more visuals? Head to the block inserter and click <strong>Media<\/strong> &rarr; <a href=\"https:\/\/openverse.org\/\" target=\"_blank\" rel=\"noopener\">Openverse<\/a> to explore the platform&rsquo;s collection of openly licensed images.<\/p><figure data-wp-context='{\"imageId\":\"69dc5ce5605ad\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"787\" height=\"848\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/gutenberg-media-openverse.png\" alt=\"Adding images from Openverse\n\" class=\"wp-image-119375\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-media-openverse.png 787w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-media-openverse-278x300.png 278w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-media-openverse-139x150.png 139w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-media-openverse-768x828.png 768w\" sizes=\"(max-width: 787px) 100vw, 787px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><h3 class=\"wp-block-heading\" id=\"h-how-to-embed-media\">How to embed media<\/h3><p>By default, the WordPress block editor supports various media types from different services.<\/p><p>Here are some examples of dedicated blocks for embedding content:<\/p><ul class=\"wp-block-list\">\n<li>Videos from YouTube, TikTok, Vimeo, Dailymotion, and TED.<\/li>\n\n\n\n<li>Images from Instagram, Flickr, Imgur, and Pinterest.<\/li>\n\n\n\n<li>Posts from Facebook, X, Bluesky, and Reddit.<\/li>\n\n\n\n<li>Audio files from Spotify, SoundCloud, and Mixcloud.<\/li>\n\n\n\n<li>Documents from Scribd and Issuu.<\/li>\n\n\n\n<li>Polls and surveys from Crowdsignal.<\/li>\n<\/ul><p>Here&rsquo;s how to embed media in the Gutenberg editor:<\/p><ol class=\"wp-block-list\">\n<li>Open the block inserter and scroll down to the <strong>Embeds<\/strong> section.<\/li>\n\n\n\n<li>Choose your media source.<\/li>\n\n\n\n<li>Paste the media URL and select Embed.<\/li>\n\n\n\n<li>The page or post will now display the embedded content.<\/li>\n<\/ol><figure data-wp-context='{\"imageId\":\"69dc5ce562d08\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"843\" height=\"379\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/gutenberg-embed.png\" alt=\"Gutenberg embed block\n\" class=\"wp-image-119377\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-embed.png 843w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-embed-300x135.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-embed-150x67.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-embed-768x345.png 768w\" sizes=\"(max-width: 843px) 100vw, 843px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><h3 class=\"wp-block-heading\" id=\"h-how-to-create-patterns\">How to create patterns<\/h3><p>Patterns, formerly called reusable blocks, are handy content snippets you can use across your site to save time and keep a consistent design throughout your pages and posts.<\/p><p>There are two types of patterns:<\/p><ul class=\"wp-block-list\">\n<li><strong>Synced patterns.<\/strong> These are reusable content blocks connected across your site. Any changes you make to a synced pattern will automatically update everywhere it&rsquo;s used &#8210; great for consistent elements like banners, call-to-action sections, or headers.<\/li>\n\n\n\n<li><strong>Unsynced patterns.<\/strong> These patterns act as standalone copies. When you insert an unsynced pattern into a post or page, it won&rsquo;t affect other instances. This is useful when you want to reuse a design but customize the content for specific pages.<\/li>\n<\/ul><p>Here&rsquo;s how to create one:<\/p><ol class=\"wp-block-list\">\n<li>Click <strong>Document Overview<\/strong> &rarr; <strong>List View<\/strong>. Hold down the Shift key and select the sections you want to save as a pattern.<\/li>\n<\/ol><figure data-wp-context='{\"imageId\":\"69dc5ce5652fc\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"509\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/gutenberg-blocks-pattern-1024x509.png\" alt=\"Selecting blocks for a pattern in Gutenberg\n\" class=\"wp-image-119378\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-blocks-pattern-1024x509.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-blocks-pattern-300x149.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-blocks-pattern-150x75.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-blocks-pattern-768x381.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-blocks-pattern.png 1510w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><ol start=\"2\" class=\"wp-block-list\">\n<li>Click the <strong>Options<\/strong> button on the toolbar and choose <strong>Create pattern<\/strong>.<\/li>\n<\/ol><figure data-wp-context='{\"imageId\":\"69dc5ce56769c\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"863\" height=\"679\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/gutenberg-create-pattern.png\" alt=\"Gutenberg block toolbar, highlighting the option to create a pattern\n\" class=\"wp-image-119379\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-create-pattern.png 863w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-create-pattern-300x236.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-create-pattern-150x118.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-create-pattern-768x604.png 768w\" sizes=\"(max-width: 863px) 100vw, 863px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><ol start=\"3\" class=\"wp-block-list\">\n<li>Name your pattern and decide if you want it to be synced or unsynced, then click <strong>Create<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69dc5ce569a34\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"471\" height=\"485\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/gutenberg-create-pattern-name.png\" alt=\"Naming the new pattern\" class=\"wp-image-119380\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-create-pattern-name.png 471w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-create-pattern-name-291x300.png 291w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-create-pattern-name-146x150.png 146w\" sizes=\"(max-width: 471px) 100vw, 471px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>To use the pattern, open the block inserter and head to <strong>Patterns<\/strong> &rarr; <strong>My patterns<\/strong>. You can also type a slash (<strong>\/<\/strong>) followed by the block name directly into the editor.<\/p><figure data-wp-context='{\"imageId\":\"69dc5ce56bf40\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"811\" height=\"474\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/gutenberg-pattern-library.png\" alt=\"Accessing available patterns in Gutenberg\n\" class=\"wp-image-119381\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-pattern-library.png 811w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-pattern-library-300x175.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-pattern-library-150x88.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-pattern-library-768x449.png 768w\" sizes=\"(max-width: 811px) 100vw, 811px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>Editing an existing pattern is also straightforward. Just click on the pattern and hit <strong>Edit original<\/strong>. Make the changes and click <strong>Save<\/strong>.<\/p><figure data-wp-context='{\"imageId\":\"69dc5ce56e5f4\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"435\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/gutenberg-pattern-edit-1024x435.png\" alt=\"Editing an existing pattern in Gutenberg\n\" class=\"wp-image-119382\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-pattern-edit-1024x435.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-pattern-edit-300x127.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-pattern-edit-150x64.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-pattern-edit-768x326.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-pattern-edit-1536x652.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-pattern-edit.png 1916w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>To manage all the existing patterns, click the <strong>Options<\/strong> button on the top right corner of the editor and choose <strong>Manage patterns<\/strong>. This will take you to the <strong>Site Editor<\/strong>, where you can edit or bulk-manage default and custom patterns.<\/p><figure data-wp-context='{\"imageId\":\"69dc5ce570c51\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"421\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/gutenberg-pattern-manage-1024x421.png\" alt=\"Editing an existing pattern in Gutenberg\n\" class=\"wp-image-119383\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-pattern-manage-1024x421.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-pattern-manage-300x123.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-pattern-manage-150x62.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-pattern-manage-768x316.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-pattern-manage-1536x632.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-pattern-manage.png 1913w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>Want to use a pattern on a page or post without affecting others? Open the three-dot menu on the block&rsquo;s toolbar and select <strong>Detach pattern<\/strong>. This makes the block independent, so changes won&rsquo;t sync across the site.<\/p><p>Check out our guide on <a href=\"\/uk\/tutorials\/wordpress-block-patterns\">WordPress block patterns<\/a> for tips on using and customizing them.<\/p><h3 class=\"wp-block-heading\" id=\"h-how-to-use-gutenberg-keyboard-shortcuts\">How to use Gutenberg keyboard shortcuts<\/h3><p>Gutenberg keyboard shortcuts are a great way to speed up your workflow and focus on creating content. These handy key combos let you perform tasks in the WordPress block editor without needing to click through menus or buttons.<\/p><p>Here&rsquo;s a table of some of the most useful shortcuts. You can also find the full list by clicking the three-dot icon in the top-right corner of the editor and selecting <strong>Keyboard shortcuts<\/strong>.<\/p><p>If you&rsquo;re on macOS, replace <strong>Ctrl<\/strong> with <strong>Command (&#8984;)<\/strong> and <strong>Alt<\/strong> with <strong>Option (&#8997;)<\/strong>.<\/p><figure tabindex=\"0\" class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Action<\/strong><\/td><td><strong>Keyboard shortcut<\/strong><\/td><\/tr><tr><td>Display all keyboard shortcuts<\/td><td>Shift + Alt + H<\/td><\/tr><tr><td><strong>Global shortcuts<\/strong><\/td><td><\/td><\/tr><tr><td>Open the Command Palette<\/td><td>Ctrl + K<\/td><\/tr><tr><td>Switch between visual and code editors<\/td><td>Ctrl + Shift + Alt + M<\/td><\/tr><tr><td>Turn on distraction-free mode<\/td><td>Ctrl + Shift + <\/td><\/tr><tr><td>Activate full-screen mode<\/td><td>Ctrl + Shift + Alt + F<\/td><\/tr><tr><td>Open the block list view<\/td><td>Shift + Alt + O<\/td><\/tr><tr><td>Show or hide the settings sidebar<\/td><td>Ctrl + Shift + ,<\/td><\/tr><tr><td>Navigate to the next part of the editor<\/td><td>Ctrl + ` or Shift + Alt + N<\/td><\/tr><tr><td>Navigate to the previous part of the editor<\/td><td>Ctrl + Shift + ` or Shift + Alt + P<\/td><\/tr><tr><td>Navigate to the nearest toolbar<\/td><td>Alt + F10<\/td><\/tr><tr><td>Save changes<\/td><td>Ctrl + S<\/td><\/tr><tr><td>Undo last changes<\/td><td>Ctrl + Z<\/td><\/tr><tr><td>Redo the previous undo<\/td><td>Ctrl + Shift + Z<\/td><\/tr><tr><td><strong>Selection shortcuts<\/strong><\/td><td><\/td><\/tr><tr><td>Select all text when typing<\/td><td>Ctrl + A<\/td><\/tr><tr><td>Clear selection<\/td><td>Escape<\/td><\/tr><tr><td><strong>Block shortcuts<\/strong><\/td><td><\/td><\/tr><tr><td>Duplicate the selected block<\/td><td>Ctrl + Shift + D<\/td><\/tr><tr><td>Delete the selected block<\/td><td>Shift + Alt + Z<\/td><\/tr><tr><td>Insert a new block before the selected block<\/td><td>Ctrl + Alt + T<\/td><\/tr><tr><td>Insert a new block after the selected block<\/td><td>Ctrl + Alt + Y<\/td><\/tr><tr><td>Delete selection<\/td><td>Delete or Backspace<\/td><\/tr><tr><td>Move the selected block up<\/td><td>Ctrl + Shift + Alt + T<\/td><\/tr><tr><td>Move the selected block down<\/td><td>Ctrl + Shift + Alt + Y<\/td><\/tr><tr><td>Change the block type after adding a new paragraph<\/td><td>\/<\/td><\/tr><tr><td><strong>Text formatting<\/strong><\/td><td><\/td><\/tr><tr><td>Make the highlighted text bold<\/td><td>Ctrl + B<\/td><\/tr><tr><td>Make the highlighted text italic<\/td><td>Ctrl + I<\/td><\/tr><tr><td>Turn the highlighted text into a link<\/td><td>Ctrl + K<\/td><\/tr><tr><td>Remove a link<\/td><td>Ctrl + Shift + K<\/td><\/tr><tr><td>Underline the highlighted text<\/td><td>Ctrl + U<\/td><\/tr><tr><td>Strikethrough the highlighted text<\/td><td>Shift + Alt + D<\/td><\/tr><tr><td>Turn the highlighted text into inline code<\/td><td>Shift + Alt + X<\/td><\/tr><tr><td>Convert the selected heading to a paragraph<\/td><td>Shift + Alt + 0<\/td><\/tr><tr><td>Convert the selected paragraph or heading to a heading of level one to six<\/td><td>Shift + Alt + 1-6<\/td><\/tr><\/tbody><\/table><\/figure><h3 class=\"wp-block-heading\" id=\"h-how-to-use-the-block-list-view\">How to use the block list view<\/h3><p>The block list view in the Gutenberg editor gives you a tree-like overview of all the blocks in your post or page. It&rsquo;s especially useful for navigating long documents with many nested blocks.<\/p><p>You can open the <strong>block list view<\/strong> by clicking the <strong>Document Overview<\/strong> icon (three stacked lines) at the top left corner of the editor or using the shortcut <strong>Shift + Alt + O<\/strong>. From there, just click on any block in the list to jump straight to it in the editing area, no matter how deeply nested it is.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69dc5ce573036\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"477\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/gutenberg-block-list-view-1024x477.png\" alt=\"Gutenberg block list view\" class=\"wp-image-119384\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-list-view-1024x477.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-list-view-300x140.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-list-view-150x70.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-list-view-768x358.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-list-view.png 1510w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Next to the block list view is the <strong>outline<\/strong>, which gives you a quick look at your document&rsquo;s structure, including heading titles and their hierarchy. It&rsquo;s a great tool for making sure your content flows logically and uses headings correctly &#8210; perfect for writers and content creators.<\/p><figure data-wp-context='{\"imageId\":\"69dc5ce5753b6\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"572\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/gutenberg-block-list-view-outline-2-1024x572.png\" alt=\"The outline of Gutenberg block list view\n\" class=\"wp-image-119387\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-list-view-outline-2-1024x572.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-list-view-outline-2-300x167.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-list-view-outline-2-150x84.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-list-view-outline-2-768x429.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-block-list-view-outline-2.png 1514w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><h3 class=\"wp-block-heading\" id=\"h-how-to-customize-blocks-with-full-site-editing\">How to customize blocks with full-site editing<\/h3><p>We&rsquo;ve covered using the block editor for individual pages and posts. Gutenberg also has Site Editor which enables you to easily make changes to blocks across your entire site for a consistent look.<\/p><figure data-wp-context='{\"imageId\":\"69dc5ce577ae0\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"416\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/wordpress-site-editor-1024x416.png\" alt=\"WordPress Site Editor\n\" class=\"wp-image-119388\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/wordpress-site-editor-1024x416.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/wordpress-site-editor-300x122.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/wordpress-site-editor-150x61.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/wordpress-site-editor-768x312.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/wordpress-site-editor-1536x624.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/wordpress-site-editor.png 1904w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>To access the Gutenberg site editor, go to <strong>Appearance &rarr; Editor<\/strong> from your WordPress dashboard. Once inside, you can customize various parts of your website:<\/p><ul class=\"wp-block-list\">\n<li><strong>Navigation.<\/strong> Update menus with elements like custom links and site logos.<\/li>\n\n\n\n<li><strong>Styles.<\/strong> Pick a style combination from your theme and adjust colors, typography, and layouts across your entire site.<\/li>\n\n\n\n<li><strong>Pages.<\/strong> Edit page content directly within Site Editor &#8210; no need to switch interfaces.<\/li>\n\n\n\n<li><strong>Templates.<\/strong> Create layouts for specific pages, like your blog homepage or single posts. Some themes may offer additional layout options.<\/li>\n\n\n\n<li><strong>Patterns.<\/strong> Manage synced patterns for consistent design elements across your site.<\/li>\n<\/ul><p>For a full-editing experience, you can preview the template in the editor while working on your page or post&rsquo;s content. Open the <strong>Post<\/strong> tab in the right sidebar and select <strong>Template<\/strong> &rarr; <strong>Show template<\/strong>. This allows you to see how your content fits within the overall page layout.<\/p><figure data-wp-context='{\"imageId\":\"69dc5ce57a1bf\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"453\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/gutenberg-template-preview-1-1024x453.png\" alt=\"Displaying a template in the WordPress post editor\n\" class=\"wp-image-119390\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-template-preview-1-1024x453.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-template-preview-1-300x133.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-template-preview-1-150x66.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-template-preview-1-768x339.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-template-preview-1-1536x679.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-template-preview-1.png 1914w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>Keep in mind that only users with a WordPress block theme can customize blocks in the full-site editor. If you want to use this feature, consider switching to a block theme, such as:<\/p><ul class=\"wp-block-list\">\n<li>Twenty Twenty-Four. A default WordPress theme with a clean and modern layout.<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/themes\/ona\/\" target=\"_blank\" rel=\"noopener\">Ona<\/a>. Comes with <a href=\"\/uk\/tutorials\/how-to-create-wordpress-child-theme\">child themes<\/a> for various website niches.<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/themes\/neve-fse\/\" target=\"_blank\" rel=\"noopener\">Neve FSE<\/a>. The full-site editing version of a popular WordPress theme, suitable for all website types.<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/themes\/tove\/\" target=\"_blank\" rel=\"noopener\">Tove<\/a>. Includes over 40 block patterns for quicker customization.<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/themes\/bricksy\/\" target=\"_blank\" rel=\"noopener\">Bricksy<\/a>. Also comes with pre-built block patterns, plus WooCommerce support.<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-how-to-use-the-command-palette\">How to use the Command Palette<\/h3><p>The <a href=\"\/uk\/tutorials\/wordpress-command-palette\">Command Palette<\/a> is a quick-access tool that lets you perform actions or navigate within the editor using a simple search bar, saving you the hassle of clicking through menus.<\/p><p>This feature is accessible in the Gutenberg block editor with the shortcut <strong>Ctrl + K<\/strong> (or <strong>Cmd + K<\/strong> on Mac) or by clicking the bar at the top of the interface.<\/p><figure data-wp-context='{\"imageId\":\"69dc5ce57c851\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"235\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/gutenberg-command-palette-1024x235.png\" alt=\"Displaying a template in the WordPress post editor\n\" class=\"wp-image-119391\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-command-palette-1024x235.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-command-palette-300x69.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-command-palette-150x34.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-command-palette-768x176.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-command-palette-1536x353.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-command-palette.png 1907w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>When you click on it, you&rsquo;ll see a search bar and a short list of common tasks like <strong>Duplicate<\/strong>, <strong>Delete<\/strong>, and <strong>Add after<\/strong>. Just type a letter or a keyword related to the task you&rsquo;re looking for to see relevant options.<\/p><figure data-wp-context='{\"imageId\":\"69dc5ce57eb0a\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"658\" height=\"722\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/gutenberg-command-palette-search.png\" alt=\"Searching for a specific task to perform using the Gutenberg Command Palette\n\" class=\"wp-image-119392\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-command-palette-search.png 658w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-command-palette-search-273x300.png 273w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/gutenberg-command-palette-search-137x150.png 137w\" sizes=\"(max-width: 658px) 100vw, 658px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>Here are some use cases that can speed up your workflow:<\/p><ul class=\"wp-block-list\">\n<li>Jump into a specific post or page just by typing the title.<\/li>\n\n\n\n<li>Add a new page or post.<\/li>\n\n\n\n<li>Exit fullscreen mode to show the WordPress admin sidebar.<\/li>\n\n\n\n<li>Enter distraction-free mode.<\/li>\n\n\n\n<li>Preview your work in a new tab.<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-how-to-disable-the-wordpress-block-editor\">How to disable the WordPress block editor<\/h3><p>If you&rsquo;re having trouble adjusting to the Gutenberg editor, WordPress lets you turn it off with a plugin or by editing the <a href=\"\/uk\/tutorials\/functions-php-wordpress\">functions.php file<\/a>.<\/p><p>Install the <a href=\"https:\/\/wordpress.org\/plugins\/classic-editor\/\" target=\"_blank\" rel=\"noopener\">Classic Editor<\/a> plugin to disable Gutenberg completely once activated. If you want more control, use the <a href=\"https:\/\/wordpress.org\/plugins\/disable-gutenberg\/\" target=\"_blank\" rel=\"noopener\">Disable Gutenberg<\/a> plugin. It disables Gutenberg site-wide, but you can adjust the plugin&rsquo;s settings so it only works for certain roles, post types, or templates.<\/p><p>Alternatively, add a code snippet to your <strong>functions.php<\/strong> file using the WordPress Theme File Editor, a File Manager, or File Transfer Protocol (FTP).<\/p><p>Here&rsquo;s how to do it using Hostinger&rsquo;s File Manager in the hPanel dashboard:<\/p><ol class=\"wp-block-list\">\n<li>Access <strong>File Manager<\/strong> in hPanel and navigate to <strong>public_html &rarr; wp-content &rarr; themes<\/strong>.<\/li>\n\n\n\n<li>Enter your active theme&rsquo;s folder and double-click the <strong>functions.php<\/strong> file to open it.<\/li>\n\n\n\n<li>Add the following code before the last line:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">add_filter('use_block_editor_for_post', '__return_false');<\/pre><ol start=\"4\" class=\"wp-block-list\">\n<li>Save and close the file, then reload your WordPress site.<\/li>\n<\/ol><p>If editing code feels daunting, try the <a href=\"https:\/\/wordpress.org\/plugins\/code-snippets\/\" target=\"_blank\" rel=\"noopener\">Code Snippets<\/a> plugin instead:<\/p><ol class=\"wp-block-list\">\n<li>After installing and activating the plugin, go to <strong>Snippets<\/strong> &rarr; <strong>Add New<\/strong> on the dashboard.<\/li>\n\n\n\n<li>Name the snippet, then paste the code above into the <strong>Functions PHP<\/strong> tab. Choose the<strong> Only run in administration area<\/strong> option.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69dc5ce5820f8\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"420\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/wordpress-code-snippets-1024x420.png\" alt=\"Adding a new function in WordPress using the Code Snippets plugin\" class=\"wp-image-119393\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/wordpress-code-snippets-1024x420.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/wordpress-code-snippets-300x123.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/wordpress-code-snippets-150x62.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/wordpress-code-snippets-768x315.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/wordpress-code-snippets-1536x630.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2022\/03\/wordpress-code-snippets.png 1686w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Click <strong>Save Changes<\/strong> and <strong>Activate<\/strong>.<\/li>\n<\/ol><p>Keep in mind that disabling Gutenberg is a temporary solution since it&rsquo;s the default editor for WordPress. As Gutenberg evolves with new features, transitioning away from the classic editor will help you take full advantage of what WordPress has to offer.<\/p><p><div class=\"protip\">\n                    <h4 class=\"title\">Want to elevate your WordPress experience?<\/h4>\n                    <p> Find the <a href=\"\/uk\/tutorials\/best-wordpress-plugins\">best WordPress plugins<\/a> compatible with Gutenberg to enhance your website.<\/p>\n                <\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2><p>The Gutenberg block editor has improved how you can create and design websites on WordPress. With its flexible blocks for various site elements, you get a simple yet flexible way to build posts and pages as you want.<\/p><p>By addressing the limitations of the classic editor, Gutenberg&rsquo;s drag-and-drop interface makes customization easy for users of all skill levels. Features like synced patterns guarantee consistent designs, while the expanded Site Editor allows you to customize themes directly without needing extra plugins.<\/p><p>We hope this guide has helped you understand how Gutenberg works and how it can enhance your WordPress experience. For more Gutenberg tips and tricks, check out our guide on <a href=\"\/uk\/tutorials\/how-to-create-a-website-with-gutenberg\">creating a website with Gutenberg<\/a>.<\/p><h2 class=\"wp-block-heading\" id=\"h-wordpress-gutenberg-faq\">WordPress Gutenberg FAQ<\/h2><div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1732633314416\"><h3 class=\"schema-faq-question\">Is Gutenberg free?<\/h3> <p class=\"schema-faq-answer\">Yes. Gutenberg is built into WordPress core, so it&rsquo;s free and comes pre-installed with WordPress 5.0 and newer.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1732633318851\"><h3 class=\"schema-faq-question\">Is Gutenberg better than Elementor?<\/h3> <p class=\"schema-faq-answer\">It depends on your needs and preferences. Gutenberg offers simplicity and performance with a free, lightweight block editor for basic to moderate customization. Elementor is a paid solution that excels in advanced design, featuring a drag-and-drop interface with widgets and templates for precise layouts. In short, choose Gutenberg for speed and ease, or Elementor for creative flexibility and detailed design control, but keep in mind the subscription cost.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1732633325098\"><h3 class=\"schema-faq-question\">Is Gutenberg good for SEO?<\/h3> <p class=\"schema-faq-answer\">Yes, Gutenberg is great for SEO. It creates clean, structured HTML that helps search engines understand your content. The block editor also makes it easy to optimize images and headings, which are key for good SEO. Plus, it works perfectly with <a href=\"\/uk\/tutorials\/best-seo-plugins-wordpress\">popular SEO plugins<\/a> like <strong>Yoast SEO<\/strong>.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1732633331948\"><h3 class=\"schema-faq-question\">What is the difference between blocks and widgets?<\/h3> <p class=\"schema-faq-answer\">In WordPress, blocks are used to design posts and pages in the editor, while widgets add features to areas like sidebars and footers. With WordPress 5.8, the platform introduced the block-based widget editor, allowing users to manage widgets using blocks like the Gutenberg editor works for posts and pages.<\/p> <\/div> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>If you&rsquo;re new to WordPress, start by familiarizing yourself with Gutenberg, its block editor, to manage the platform more effectively. Introduced as a replacement for the classic editor, it has become a core part of the content management system&rsquo;s website-building experience. WordPress Gutenberg uses a block-based design system, making it much more user-friendly for all [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/uk\/tutorials\/gutenberg-wordpress\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":115,"featured_media":129074,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"What is WordPress Gutenberg: In-depth tutorial","rank_math_description":"Learn how to use the WordPress Gutenberg block page editor, from moving elements to creating patterns and using the Command Palette.","rank_math_focus_keyword":"wordpress gutenberg","footnotes":""},"categories":[22633],"tags":[],"class_list":["post-7043","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/gutenberg-wordpress","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/gutenberg-pros-e-contras","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/gutenberg-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/gutenberg-wordpress","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-menggunakan-editor-gutenberg-wordpress","default":0},{"locale":"it-IT","link":"https:\/\/www.hostinger.com\/it\/tutorial\/wordpress-gutenberg","default":0},{"locale":"nl-NL","link":"https:\/\/www.hostinger.com\/nl\/tutorials\/wordpress-gutenberg","default":0},{"locale":"ja-JP","link":"https:\/\/www.hostinger.com\/jp\/tutorials\/gutenberg-wordpress\/","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/gutenberg-wordpress","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/gutenberg-wordpress","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/gutenberg-wordpress","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/agregar-meta-descripcion-wordpress-19","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/como-reparar-error-establishing-a-database-connection-wordpress-10\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/gutenberg-wordpress","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/gutenberg-pros-e-contras","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/gutenberg-wordpress","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/gutenberg-wordpress","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/gutenberg-wordpress","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/gutenberg-wordpress","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/posts\/7043","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/users\/115"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/comments?post=7043"}],"version-history":[{"count":103,"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/posts\/7043\/revisions"}],"predecessor-version":[{"id":129070,"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/posts\/7043\/revisions\/129070"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/media\/129074"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/media?parent=7043"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/categories?post=7043"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/tags?post=7043"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}