{"id":78992,"date":"2020-06-10T13:29:56","date_gmt":"2020-06-10T13:29:56","guid":{"rendered":"https:\/\/mywp.site\/template\/?p=345"},"modified":"2024-07-05T19:07:40","modified_gmt":"2024-07-05T09:07:40","slug":"gutenberg-blocks","status":"publish","type":"post","link":"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/","title":{"rendered":"How To Use WordPress Gutenberg Editor Blocks"},"content":{"rendered":"<h1><span class=\"ez-toc-section\" id=\"WordPress-Block-Editor-%E2%80%93-How-To-Use-Blocks\"><\/span>WordPress Block Editor &#8211; How To Use Blocks<span class=\"ez-toc-section-end\"><\/span><\/h1><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Tutorial Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#WordPress-Block-Editor-%E2%80%93-How-To-Use-Blocks\" >WordPress Block Editor &#8211; How To Use Blocks<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#WordPress-Gutenberg-A-Block-Based-Content-Editor\" >WordPress Gutenberg: A Block-Based Content Editor<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#WordPress-Block-Editor-%E2%80%93-What-Are-%E2%80%98Blocks\" >WordPress Block Editor &#8211; What Are &#8216;Blocks&#8217;?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Working-With-Blocks\" >Working With Blocks<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Block-Inserter-Tool\" >Block Inserter Tool<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Block-Directory\" >Block Directory<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Block-Patterns\" >Block Patterns<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Block-Editors\" >Block Editors<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Block-Editor-Settings\" >Block Editor Settings<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Moving-Blocks\" >Moving Blocks<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Change-Block-Type-Or-Style\" >Change Block Type Or Style<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Block-Editor-Settings-%E2%80%93-Options\" >Block Editor Settings &#8211; Options<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#ShowHide-Block-Settings\" >Show\/Hide Block Settings<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Copy-Block\" >Copy Block<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Duplicate\" >Duplicate<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Insert-Before\" >Insert Before<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Insert-After\" >Insert After<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Move-To\" >Move To<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Edit-as-HTML\" >Edit as HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Copy-and-Paste-Styles\" >Copy and Paste Styles<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Lock\" >Lock<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Create-Reusable-Block\" >Create Reusable Block<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Group\" >Group<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Remove-Block\" >Remove Block<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#More-Rich-Text-Controls\" >More Rich Text Controls<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Advanced-Block-Settings\" >Advanced Block Settings<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#How-To-Add-Blocks-To-Content\" >How To Add Blocks To Content<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#WordPress-Gutenberg-Blocks\" >WordPress Gutenberg Blocks<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#WordPress-Block-Editor-%E2%80%93-Blocks\" >WordPress Block Editor &#8211; Blocks<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-30\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#See-Your-Most-Used-Blocks\" >See Your Most Used Blocks<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-31\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Troubleshooting-Issues-With-Blocks\" >Troubleshooting Issues With Blocks<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-32\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#How-To-Fix-Block-Errors\" >How To Fix Block Errors<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-33\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Attempt-Block-Recovery\" >Attempt Block Recovery<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-34\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Resolve\" >Resolve<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-35\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Convert-to-HTML\" >Convert to HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-36\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Convert-to-Classic-Block\" >Convert to Classic Block<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-37\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Default-WordPress-Editor-Blocks-%E2%80%93-Tutorials\" >Default WordPress Editor Blocks &#8211; Tutorials<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-38\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#WordPress-Blocks-%E2%80%93-FAQs\" >WordPress Blocks &#8211; FAQs<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-39\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#What-are-WordPress-Block-Editor-Blocks\" >What are WordPress Block Editor Blocks?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-40\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#How-do-I-add-a-block-in-the-WordPress-Block-Editor\" >How do I add a block in the WordPress Block Editor?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-41\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Can-I-customize-the-appearance-and-behavior-of-WordPress-Blocks\" >Can I customize the appearance and behavior of WordPress Blocks?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-42\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Are-there-advanced-block-customization-options-available\" >Are there advanced block customization options available?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-43\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#How-do-I-find-specific-blocks-in-the-block-library\" >How do I find specific blocks in the block library?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-44\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Can-I-create-custom-blocks-for-my-WordPress-website\" >Can I create custom blocks for my WordPress website?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-45\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#Additional-WordPress-Block-Editor-Tutorials\" >Additional WordPress Block Editor Tutorials<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n<figure style=\"width: 300px\" class=\"wp-caption alignright\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-000.png\" alt=\"Blocks\" width=\"300\" height=\"234\" \/><figcaption class=\"wp-caption-text\">WordPress Block Editor &#8211; How To Use Blocks<\/figcaption><\/figure>\n<p style=\"text-align: left\">This tutorial is part of our series on <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/block-editor\/\" target=\"_blank\" rel=\"noopener\"><strong>How To Use The WordPress Block Editor (Gutenberg)<\/strong><\/a>.<\/p>\n<p style=\"text-align: left\">In this tutorial, you will learn what <strong>Blocks<\/strong> are and how to work with blocks when creating or editing content.<\/p>\n<p style=\"text-align: left\">Links to detailed tutorials on how to use many default WordPress content editor blocks are provided at the end of this tutorial.<\/p>\n<p style=\"text-align: left\">For a complete understanding of how to use the WordPress Block Editor, see these tutorials:<\/p>\n<ul>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/block-editor-content-area\/\" target=\"_blank\" rel=\"noopener\"><strong>How To Use The WordPress Block Editor Content Area<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/block-editor-toolbar\/\" target=\"_blank\" rel=\"noopener\"><strong>How To Use The WordPress Block Editing Toolbar<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/block-editor-settings\/\" target=\"_blank\" rel=\"noopener\"><strong>How To Use The WordPress Block Editor Settings Section<\/strong><\/a><\/li>\n<li><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/block-settings\/\" target=\"_blank\" rel=\"noopener\"><strong>WordPress Block Editor: Block Settings<\/strong><\/a><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"WordPress-Gutenberg-A-Block-Based-Content-Editor\"><\/span>WordPress Gutenberg: A Block-Based Content Editor<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: left\">As mentioned in our <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/block-editor\/\" target=\"_blank\" rel=\"noopener\"><strong>overview of the WordPress Block Editor<\/strong><\/a>,<span style=\"color: #ff0000\">\u00a0<\/span>WordPress 5.0 introduced a new content editor called <strong>Gutenberg\u00a0<\/strong>(named after Johannes Gutenberg, who invented the printing press over 500 years ago).<\/p>\n<p style=\"text-align: left\">The Gutenberg editor (now referred to simply as the <em>Block Editor<\/em>) aims to simplify the content creation and content editing process in WordPress using &#8216;blocks&#8217;.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-002.png\" alt=\"WordPress Content Editor - Blocks\" width=\"1000\" height=\"708\" \/><figcaption class=\"wp-caption-text\">The WordPress Block editor includes many default blocks.<\/figcaption><\/figure>\n<h2><span class=\"ez-toc-section\" id=\"WordPress-Block-Editor-%E2%80%93-What-Are-%E2%80%98Blocks\"><\/span>WordPress Block Editor &#8211; What Are &#8216;Blocks&#8217;?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: left\">Think of &#8216;blocks&#8217; as being the smallest units or <em>modules<\/em> you can use on your site to build something or get something done.<\/p>\n<p style=\"text-align: left\">This could be adding a paragraph of text, a layout or media element, or some other functionality.<\/p>\n<p style=\"text-align: left\">Imagine too, that no matter how different each block&#8217;s purpose may be, they all fit and work together seamlessly (like &#8216;Lego&#8217; blocks).<\/p>\n<p style=\"text-align: left\">By combining different blocks, you can build complex web pages with sophisticated layouts and modular functionality.<\/p>\n<p style=\"text-align: left\">WordPress, however, aims to extend the functionality of blocks beyond just creating content pages on your site.<\/p>\n<p style=\"text-align: left\">Imagine turning your entire web presence into a giant <em>Plug&#8217;n&#8217;Play<\/em> site where you can combine content blocks with block-based plugins, widgets, themes, third-party apps, integrations, etc., and add these seamlessly anywhere to your site at any time with just the click of a button and without requiring any coding skills.<\/p>\n<p style=\"text-align: left\">One of the main advantages of switching to a block-based content editor is that it opens your website up to many possibilities for simplified future development.<\/p>\n<p style=\"text-align: left\">For example, WordPress&#8217;s block-based environment allows third-party developers to create new block types that can integrate seamlessly with your existing website, giving you the power to add a whole new level of functionality to your web presence without having to start from scratch or make major changes to what you have already built.<\/p>\n<p style=\"text-align: left\">Focusing back on the content editor, <em>Blocks<\/em> let you add different types of content (e.g. paragraphs, images, quotes, multimedia, etc.) into your posts and pages and rearrange your post\/page layouts using features like:<\/p>\n<ul>\n<li style=\"text-align: left\"><em><strong>&#8216;Point and click&#8217;<\/strong> <\/em>(e.g. move your cursor over an item and click to select it or add an element to your page).<\/li>\n<li style=\"text-align: left\"><strong><em>&#8216;Drag and drop&#8217;<\/em><\/strong> (e.g. rearrange your page layout).<\/li>\n<li style=\"text-align: left\"><strong><em>Resizing handles<\/em><\/strong> (e.g. for resizing images).<\/li>\n<li style=\"text-align: left\"><strong><em>Drop-down menus<\/em><\/strong> (e.g. select one of several options to configure a setting).<\/li>\n<li style=\"text-align: left\"><strong><em>Incremental Sliders<\/em><\/strong> (e.g. slide right or left to increase or decrease values, adjust widths, etc.)<\/li>\n<li style=\"text-align: left\"><strong><em>Value fields<\/em><\/strong> (e.g. enter a number of items to display for an element).<\/li>\n<li style=\"text-align: left\"><strong><em>Up and down arrows<\/em><\/strong> (e.g. move content sections up and down the page).<\/li>\n<\/ul>\n<p style=\"text-align: left\">WordPress has published a great video introduction to publishing content with the block editor. To watch this video, <strong><a href=\"https:\/\/learn.wordpress.org\/workshop\/intro-to-publishing-with-the-block-editor\/\" target=\"_blank\" rel=\"noopener\">go here<\/a><\/strong>:<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Working-With-Blocks\"><\/span>Working With Blocks<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: left\">As mentioned earlier, with the Gutenberg editor, adding content to posts and pages is all done using &#8216;blocks&#8217;.<\/p>\n<figure style=\"width: 680px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-003.gif\" alt=\"WordPress block editor - Block directory.\" width=\"680\" height=\"680\" \/><figcaption class=\"wp-caption-text\">Just some of the blocks you can use to create posts and pages on your site.<\/figcaption><\/figure>\n<p style=\"text-align: left\">The Block Editor contains tools that let you select and insert different blocks into your content.<\/p>\n<p style=\"text-align: left\">Let&#8217;s go through these tools:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Block-Inserter-Tool\"><\/span>Block Inserter Tool<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: left\">The Block Inserter tool (Add Block) can be accessed from the <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/block-editor-toolbar\/\" target=\"_blank\" rel=\"noopener\"><strong>Editing Toolbar<\/strong><\/a>, or inside the <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/block-editor-content-area\/\" target=\"_blank\" rel=\"noopener\"><strong>Content Area<\/strong><\/a>.<\/p>\n<p style=\"text-align: left\">The Add Block tool is the button with the [+] sign. It is the second button on the top left side of the Editing Toolbar.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-004.jpg\" alt=\"WordPress Block Editor - Add Block tool\" width=\"1000\" height=\"951\" \/><figcaption class=\"wp-caption-text\">Use the Add Block tool to view and insert blocks into your posts and pages.<\/figcaption><\/figure>\n<p style=\"text-align: left\">You can also access the Add Block tool inside the content area by clicking above or below an existing block.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-005.jpg\" alt=\"WordPress Block Editor - Add Blocks inside the content area\" width=\"1000\" height=\"768\" \/><figcaption class=\"wp-caption-text\">Add Blocks inside the content area.<\/figcaption><\/figure>\n<p style=\"text-align: left\">The &#8216;Add Block&#8217; tool is divided into the following tabbed sections:<\/p>\n<ul>\n<li style=\"text-align: left\"><strong>Blocks<\/strong> &#8211; Blocks are the building elements of your content. This section displays a list of all the default and installed blocks in your content editor.<\/li>\n<li style=\"text-align: left\"><strong>Patterns<\/strong> &#8211; Patterns are predefined block layouts (groups of blocks) created by designers. This section is explained further below.<\/li>\n<li style=\"text-align: left\"><strong>Reusable Blocks<\/strong> &#8211; Reusable blocks can be used repeatedly in your content. <em>Note:<\/em> You must create at least one <em>Reusable Block<\/em> for this section to display in the Add Block tool&#8217;s tabbed menu section.<\/li>\n<\/ul>\n<p style=\"text-align: left\">Additionally, the Blocks menu contains a &#8216;Search&#8217; field and different menu sections:<\/p>\n<ul>\n<li style=\"text-align: left\"><strong>Most Used<\/strong><\/li>\n<li style=\"text-align: left\"><strong>Common Blocks<\/strong><\/li>\n<li style=\"text-align: left\"><strong>Formatting<\/strong><\/li>\n<li style=\"text-align: left\"><strong>Layout Elements<\/strong><\/li>\n<li style=\"text-align: left\"><strong>Widgets<\/strong><\/li>\n<li style=\"text-align: left\"><strong>Embeds<\/strong><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/reusable-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Reusable Blocks<\/strong><\/a>\u00a0&#8211; <em>Note:<\/em> You must create at least one <em>Reusable block<\/em> for this section to display in the Add Block tool&#8217;s menu.<\/li>\n<\/ul>\n<p style=\"text-align: left\">To insert a block into the content editor, either search for the block inside the &#8216;Add Block&#8217; tool and then click on the block or scroll down the list and click on the block. If you&#8217;re not sure what a particular block does, hover over it and a description will pop up.<\/p>\n<figure style=\"width: 680px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-006.gif\" alt=\"Search and add blocks\" width=\"680\" height=\"514\" \/><figcaption class=\"wp-caption-text\">Search and add blocks to your content using the Add Block tool.<\/figcaption><\/figure>\n<p style=\"text-align: left\">You can also add a block to your content by selecting it and then dragging and dropping it into place.<\/p>\n<figure style=\"width: 680px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-052.gif\" alt=\"Add block using drag and drop.\" width=\"680\" height=\"543\" \/><figcaption class=\"wp-caption-text\">Add blocks to your content using drag and drop.<\/figcaption><\/figure>\n<p style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/idea-icon.jpg\" alt=\"Important\" width=\"75\" height=\"75\" \/><\/p>\n<p style=\"text-align: left\">To learn more about the block types found in each of these sections, see the links provided at the end of this tutorial.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Block-Directory\"><\/span>Block Directory<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: left\">Just like plugins and themes, you can also add blocks to endlessly extend your site&#8217;s functionality.<\/p>\n<p style=\"text-align: left\">This is where the <strong>Block Directory<\/strong> comes in handy.<\/p>\n<p style=\"text-align: left\">After the block editor became the new default WordPress editor, WordPress made the creation of a Block Directory one of its next priority projects.<\/p>\n<p style=\"text-align: left\">While the default block editor includes a sizeable number of useful blocks already, the Block Directory allows web and plugin developers to create and add new types of blocks with specific functionalities to the Block editor.<\/p>\n<p style=\"text-align: left\">It also allows users to discover, test, and install new blocks for their website without leaving the editor, as the Block Directory is built right into the block editor.<\/p>\n<p style=\"text-align: left\">You can install blocks from the built-in Block Directory into your site using the Add Block tool.<\/p>\n<p style=\"text-align: left\">Just search for a specific functionality you would like to add to your content and a list of blocks matching your search will display inside the menu.<\/p>\n<p style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/info-icon.jpg\" alt=\"Important\" width=\"75\" height=\"75\" \/><\/p>\n<p style=\"text-align: left\"><em>Note:<\/em> The block directory is only available to users that have the capabilities to install and activate plugins on their site.<\/p>\n<p style=\"text-align: left\">To download and install these custom blocks, click on the <strong>Add block<\/strong> button.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-007.jpg\" alt=\"Block Directory results.\" width=\"1000\" height=\"720\" \/><figcaption class=\"wp-caption-text\">Add new blocks to your content from the Add Block tool using the built-in Block Directory.<\/figcaption><\/figure>\n<p style=\"text-align: left\">You can also access the Block Directory while working inside the content area by selecting the Block Inserter tool and clicking on the <strong>Browse all<\/strong> link.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-008.jpg\" alt=\"Add Block tool - Browse All\" width=\"1000\" height=\"620\" \/><figcaption class=\"wp-caption-text\">Click on the Add Block tool&#8217;s Browse All link inside the content area to access a list of blocks from the Block Directory.<\/figcaption><\/figure>\n<p style=\"text-align: left\">The WordPress team has put together <strong><a href=\"https:\/\/learn.wordpress.org\/workshop\/intro-to-the-block-directory\/\" target=\"_blank\" rel=\"noopener\">a great video that explains how the Block Directory works<\/a><\/strong>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Block-Patterns\"><\/span>Block Patterns<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: left\"><strong>Block Patterns<\/strong> are predefined block layouts (groups of blocks) that you can insert into your posts and pages and then tweak and customize to suit your needs.<\/p>\n<p style=\"text-align: left\">Block patterns allow web designers to create complex, beautiful, and stylized layouts using combinations of text and media blocks that you can then instantly add to you enhance the look and feel of your content without having to design or create these yourself.<\/p>\n<p style=\"text-align: left\">Block patterns can be found in a wide variety of plugins and themes, with more patterns being constantly added as WordPress evolves.<\/p>\n<p style=\"text-align: left\">Like Blocks, you can select and add patterns into your content from the Inserter tool.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-009.jpg\" alt=\"WordPress Block Editor - Patterns\" width=\"1000\" height=\"926\" \/><figcaption class=\"wp-caption-text\">Create complex content layouts using Block Patterns.<\/figcaption><\/figure>\n<p style=\"text-align: left\">Just select and click on a Pattern and it will be automatically added to your content.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-010.jpg\" alt=\"WordPress Block Editor - Patterns\" width=\"1000\" height=\"951\" \/><figcaption class=\"wp-caption-text\">Click on a Pattern to insert it into your content.<\/figcaption><\/figure>\n<p style=\"text-align: left\">You can then easily tweak and customize the block elements inside the Block Pattern to suit your needs.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-011.jpg\" alt=\"WordPress Block Patterns can be easily edited.\" width=\"1000\" height=\"881\" \/><figcaption class=\"wp-caption-text\">Block Patterns can be easily tweaked and edited to suit your needs.<\/figcaption><\/figure>\n<p style=\"text-align: left\">The WordPress team has also put together <a href=\"https:\/\/learn.wordpress.org\/workshop\/intro-to-block-patterns\/\" target=\"_blank\" rel=\"noopener\">a video explaining how Block Patterns work<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Block-Editors\"><\/span>Block Editors<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: left\">Depending on the type of block you add to your post or page, you will see that each block has its own Block Editor with a menu of options that let you change things like format, add or remove links, replace color, change the alignment of elements, etc.<\/p>\n<p style=\"text-align: left\">These appear when you click inside the block.<\/p>\n<p style=\"text-align: left\">For example, here is the Block Editor of a <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/paragraph-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Paragraph block<\/strong><\/a>&#8230;<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-012.png\" alt=\"Block Editor - Paragraph Block\" width=\"1000\" height=\"500\" \/><figcaption class=\"wp-caption-text\">Block Editor &#8211; Paragraph block<\/figcaption><\/figure>\n<p style=\"text-align: left\">Each block also has its own set of controls that will display in the <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/block-editor-settings\/\" target=\"_blank\" rel=\"noopener\"><strong>Settings section<\/strong><\/a>\u00a0when you select the block.<\/p>\n<p style=\"text-align: left\">Some blocks let you adjust various settings, and some blocks have few or no settings.<\/p>\n<p>Also, many blocks share common settings. We cover these in our <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/block-settings\/\" target=\"_blank\" rel=\"noopener\"><strong>WordPress Block Settings<\/strong><\/a> section.<\/p>\n<p style=\"text-align: left\">You can show or hide these settings from the Block Editor&#8217;s <em>More Options<\/em> menu. Click the three dots (vertical ellipsis) to reveal additional settings in your Block Editor.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-013.png\" alt=\"WordPress Block Editor - Block Settings\" width=\"1000\" height=\"886\" \/><figcaption class=\"wp-caption-text\">Each block type has its own set of controls with additional options and settings.<\/figcaption><\/figure>\n<p style=\"text-align: left\">For a great overview of how Block settings work in the WordPress Block Editor and how to adjust these, see the video below:<\/p>\n<div class=\"ast-oembed-container \" style=\"height: 100%;\"><iframe loading=\"lazy\" title=\"How to adjust settings for Blocks in the WordPress.com Editor\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/oQNap9YTrWw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<ul>\n<li style=\"text-align: left\">For in-depth tutorials about using different types of blocks, see the links at the end of this tutorial.<\/li>\n<li>To learn how to configure common block settings, see this tutorial: <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/block-settings\/\" target=\"_blank\" rel=\"noopener\"><strong>WordPress Block Editor: Block Settings<\/strong><\/a><\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Block-Editor-Settings\"><\/span>Block Editor Settings<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: left\">As mentioned in the previous section, every block type has its own set of controls with additional settings and options.<\/p>\n<p style=\"text-align: left\">All block types, however, follow a similar build structure.<\/p>\n<p style=\"text-align: left\">Some of the universal elements you will find in most Block Editors include features that let you:<\/p>\n<ul>\n<li style=\"text-align: left\">Move Blocks<\/li>\n<li style=\"text-align: left\">Change Block Type or Style<\/li>\n<li style=\"text-align: left\">Access Additional Options<\/li>\n<li style=\"text-align: left\">Access Advanced Block Settings<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Moving-Blocks\"><\/span>Moving Blocks<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: left\">You can easily reorder, rearrange, or reposition blocks in your content using \u2018move up\u2019 and \u2018move down\u2019 arrows in the Block Editor.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-014.png\" alt=\"Block Editor - Move Up and Down arrows\" width=\"1000\" height=\"295\" \/><figcaption class=\"wp-caption-text\">Reorder blocks on your post or page using the up and down arrows.<\/figcaption><\/figure>\n<p style=\"text-align: left\">You can also place blocks wherever you like and rearrange the layout of your content in your post or page using drag and drop.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-015.png\" alt=\"Block Editor - Drag and Drop feature.\" width=\"1000\" height=\"291\" \/><figcaption class=\"wp-caption-text\">Rearrange blocks on your page using drag and drop.<\/figcaption><\/figure>\n<p style=\"text-align: left\">Additionally, you can move blocks using the <em>Move To<\/em> function in the <strong>More Options<\/strong> menu (this is explained further below).<\/p>\n<p style=\"text-align: left\">Moving blocks is covered in more detail in our tutorial on <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/block-editor-content-area\/\" target=\"_blank\" rel=\"noopener\"><strong>how to use the Block Editor&#8217;s Content Area<\/strong><\/a>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Change-Block-Type-Or-Style\"><\/span>Change Block Type Or Style<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: left\">Some blocks allow you to easily change or substitute the block type or style.<\/p>\n<p style=\"text-align: left\">This feature is useful for converting content from one type into another without having to insert a new block and transfer its content over.<\/p>\n<p style=\"text-align: left\">For example, here are the options available for changing a Paragraph Block into another type of block (e.g. a <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/quote-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Quote block<\/strong><\/a>\u00a0or <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/verse-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Verse block<\/strong><\/a>)&#8230;<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-016.png\" alt=\"Change Block type\" width=\"1000\" height=\"490\" \/><figcaption class=\"wp-caption-text\">You can easily change some blocks into other types of blocks.<\/figcaption><\/figure>\n<h3><span class=\"ez-toc-section\" id=\"Block-Editor-Settings-%E2%80%93-Options\"><\/span>Block Editor Settings &#8211; Options<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: left\">Another common element of block editors is the &#8216;Options&#8217; section, which includes the following standard settings:<\/p>\n<ul>\n<li style=\"text-align: left\">Show\/Hide Block Settings<\/li>\n<li style=\"text-align: left\">Copy Block<\/li>\n<li style=\"text-align: left\">Duplicate<\/li>\n<li style=\"text-align: left\">Insert Before<\/li>\n<li style=\"text-align: left\">Insert After<\/li>\n<li style=\"text-align: left\">Move To<\/li>\n<li style=\"text-align: left\">Edit as HTML<\/li>\n<li>Lock<\/li>\n<li style=\"text-align: left\">Create Reusable Block<\/li>\n<li style=\"text-align: left\">Group<\/li>\n<li style=\"text-align: left\">Remove Block<\/li>\n<\/ul>\n<p style=\"text-align: left\">To display the &#8216;Options&#8217; menu, click on the three dots (vertical ellipsis) on the Block Editor menu.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-017.png\" alt=\"WordPress Block Editor - More Options Menu.\" width=\"1000\" height=\"658\" \/><figcaption class=\"wp-caption-text\">WordPress Block Editor &#8211; Options Menu.<\/figcaption><\/figure>\n<p style=\"text-align: left\">Let&#8217;s go through each of these settings.<\/p>\n<p style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/idea-icon.jpg\" alt=\"Useful tip\" width=\"75\" height=\"75\" \/><\/p>\n<p style=\"text-align: left\">Once you&#8217;re familiar with the settings below, you can save time accessing these features using <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/keyboard-shortcuts\/\" target=\"_blank\" rel=\"noopener\"><strong>Keyboard Shortcuts<\/strong><\/a>.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"ShowHide-Block-Settings\"><\/span>Show\/Hide Block Settings<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p style=\"text-align: left\">Hiding block settings lets you work on your content free of distractions (i.e. (&#8216;Distraction-Free&#8217; Mode).<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-018.png\" alt=\"WordPress Block Editor: More Options - Show\/Hide Block Settings\" width=\"1000\" height=\"650\" \/><figcaption class=\"wp-caption-text\">More Options &#8211; Show\/Hide Block Settings<\/figcaption><\/figure>\n<p style=\"text-align: left\">To hide block settings:<\/p>\n<ul>\n<li style=\"text-align: left\">Click anywhere inside the block to view the Block Editor.<\/li>\n<li style=\"text-align: left\">Select the &#8216;Options&#8217; menu<\/li>\n<li style=\"text-align: left\">Click &#8216;Hide Block Settings&#8217; to hide the &#8216;Settings&#8217; sidebar from view.<\/li>\n<li style=\"text-align: left\">Click &#8216;Show Block Settings&#8217; to display the &#8216;Settings&#8217; sidebar on your content editor again.<\/li>\n<\/ul>\n<figure style=\"width: 680px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-028.gif\" alt=\"More Options - Show\/Hide Block Settings\" width=\"680\" height=\"469\" \/><figcaption class=\"wp-caption-text\">Use this function to show or hide your block settings.<\/figcaption><\/figure>\n<h4><span class=\"ez-toc-section\" id=\"Copy-Block\"><\/span>Copy Block<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p style=\"text-align: left\">This function copies all the content inside your selected block to your clipboard (e.g. text, images, etc.) and preserves all formatting tags.<\/p>\n<p style=\"text-align: left\">This function is useful if you would like to copy and paste the content from a block into a different post or page.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-019.png\" alt=\"WordPress Block Editor: More Options - Copy setting.\" width=\"1000\" height=\"650\" \/><figcaption class=\"wp-caption-text\">More Options &#8211; Copy setting.<\/figcaption><\/figure>\n<p><em>Note:<\/em> if you plan to reuse the same block content often, you can also turn the block into a <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/reusable-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Reusable block<\/strong><\/a>\u00a0&#8211; see further below for more details.<\/p>\n<p style=\"text-align: left\">To copy content from a block to your clipboard:<\/p>\n<ul>\n<li style=\"text-align: left\">Click anywhere inside the block to view the Block Editor.<\/li>\n<li style=\"text-align: left\">Select the &#8216;Options&#8217; menu<\/li>\n<li style=\"text-align: left\">Select &#8216;Copy&#8217; to copy all the content from the block to your clipboard.<\/li>\n<li style=\"text-align: left\">Use the normal &#8216;Paste&#8217; function to paste the content into another block (e.g. on a different post or page), save the block content to a text file, etc.<\/li>\n<\/ul>\n<figure style=\"width: 680px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-029.gif\" alt=\"More Options - Copy\" width=\"680\" height=\"442\" \/><figcaption class=\"wp-caption-text\">Use this function to copy content from a selected block to your clipboard.<\/figcaption><\/figure>\n<h4><span class=\"ez-toc-section\" id=\"Duplicate\"><\/span>Duplicate<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p style=\"text-align: left\">This setting lets you save time recreating an existing block. Use the Duplicate setting to create and add an identical copy (i.e. a <em>clone<\/em>) of any selected block into your content, then tweak the content on your duplicated block to suit your needs.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-020.png\" alt=\"WordPress Block Editor: More Options - Duplicate setting.\" width=\"1000\" height=\"650\" \/><figcaption class=\"wp-caption-text\">More Options &#8211; Duplicate setting.<\/figcaption><\/figure>\n<p style=\"text-align: left\">To duplicate a block:<\/p>\n<ul>\n<li style=\"text-align: left\">Click anywhere inside the block to view the Block Editor.<\/li>\n<li style=\"text-align: left\">Select the &#8216;Options&#8217; menu.<\/li>\n<li style=\"text-align: left\">Click &#8216;Duplicate&#8217;.<\/li>\n<li style=\"text-align: left\">Edit and\/or reposition the duplicated block if required.<\/li>\n<li style=\"text-align: left\">Save your post or page to update your content.<\/li>\n<\/ul>\n<figure style=\"width: 680px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-030.gif\" alt=\"Duplicate a block.\" width=\"680\" height=\"462\" \/><figcaption class=\"wp-caption-text\">Use this function to duplicate a block.<\/figcaption><\/figure>\n<h4><span class=\"ez-toc-section\" id=\"Insert-Before\"><\/span>Insert Before<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p style=\"text-align: left\">This setting lets you insert a new\u00a0block into your content <em>above<\/em> the block you are currently working on.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-021.png\" alt=\"WordPress Block Editor: More Options - Insert Before setting.\" width=\"1000\" height=\"650\" \/><figcaption class=\"wp-caption-text\">More Options &#8211; Insert Before setting.<\/figcaption><\/figure>\n<p style=\"text-align: left\">To insert a block above your selected block:<\/p>\n<ul>\n<li style=\"text-align: left\">Select the block where you want to insert a new block <i>before\u00a0<\/i>it.<\/li>\n<li style=\"text-align: left\">Click anywhere inside the block to view the Block Editor.<\/li>\n<li style=\"text-align: left\">Select the &#8216;Options&#8217; menu.<\/li>\n<li style=\"text-align: left\">Click &#8216;Insert Before&#8217;.<\/li>\n<li style=\"text-align: left\">A new block &#8216;placeholder&#8217; will be inserted above your selected block.<\/li>\n<li style=\"text-align: left\">Use the &#8216;Add Block&#8217; tool to select the type of block you want to add to the new block placeholder.<\/li>\n<li style=\"text-align: left\">Save your post or page to update your content.<\/li>\n<\/ul>\n<figure style=\"width: 680px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-031.gif\" alt=\"More Options - Insert Before\" width=\"680\" height=\"462\" \/><figcaption class=\"wp-caption-text\">Use this function to insert a block before a selected block.<\/figcaption><\/figure>\n<h4><span class=\"ez-toc-section\" id=\"Insert-After\"><\/span>Insert After<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p style=\"text-align: left\">This setting lets you insert a new\u00a0block into your content <em>below<\/em> the block you are currently working on.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-022.png\" alt=\"More Options - Insert After setting.\" width=\"1000\" height=\"650\" \/><figcaption class=\"wp-caption-text\">More Options &#8211; Insert After setting.<\/figcaption><\/figure>\n<p style=\"text-align: left\">To insert a block below your selected block:<\/p>\n<ul>\n<li style=\"text-align: left\">Select the block where you want to insert a new block <em>after\u00a0<\/em>it.<\/li>\n<li style=\"text-align: left\">Click anywhere inside the block to view the Block Editor.<\/li>\n<li style=\"text-align: left\">Select the &#8216;Options&#8217; menu.<\/li>\n<li style=\"text-align: left\">Click &#8216;Insert After&#8217;.<\/li>\n<li style=\"text-align: left\">A new block &#8216;placeholder&#8217; will be inserted below your selected block.<\/li>\n<li style=\"text-align: left\">Use the &#8216;Add Block&#8217; tool to select the type of block you want to add to the new block placeholder.<\/li>\n<li style=\"text-align: left\">Save your post or page to update your content.<\/li>\n<\/ul>\n<figure style=\"width: 680px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-032.gif\" alt=\"WordPress Block Editor: More Options - Insert After\" width=\"680\" height=\"462\" \/><figcaption class=\"wp-caption-text\">Use this function to insert a block after a selected block.<\/figcaption><\/figure>\n<h5><span class=\"ez-toc-section\" id=\"Move-To\"><\/span>Move To<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p style=\"text-align: left\">This function lets you reposition a block on your post or page using your keyboard instead of clicking on the Block Editor&#8217;s Move Up and Down arrows or using the drag and drop handle.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-023.png\" alt=\"WordPress Block Editor: More Options - Move To setting.\" width=\"1000\" height=\"650\" \/><figcaption class=\"wp-caption-text\">More Options &#8211; Move To setting.<\/figcaption><\/figure>\n<p style=\"text-align: left\">To move a block:<\/p>\n<ul>\n<li style=\"text-align: left\">Select the block you want to move to a different location on your post or page.<\/li>\n<li style=\"text-align: left\">Click anywhere inside the block to view the Block Editor.<\/li>\n<li style=\"text-align: left\">Select the &#8216;Options&#8217; menu.<\/li>\n<li style=\"text-align: left\">Select &#8216;Move to&#8217;.<\/li>\n<li style=\"text-align: left\">A blue horizontal line will display above the block.<\/li>\n<li style=\"text-align: left\">Move the blue horizontal line up and down your content using your keyboard&#8217;s &#8216;up&#8217; and &#8216;down&#8217; arrow keys until the line is in the desired location you want the block moved to.<\/li>\n<li style=\"text-align: left\">Hit the &#8216;Enter&#8217; key.<\/li>\n<li style=\"text-align: left\">Your selected block will be moved to the new location on your post or page.<\/li>\n<\/ul>\n<figure style=\"width: 680px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-033.gif\" alt=\"More Options - Move To\" width=\"680\" height=\"572\" \/><figcaption class=\"wp-caption-text\">Use this function to move your selected block to a different location in your content.<\/figcaption><\/figure>\n<h5><span class=\"ez-toc-section\" id=\"Edit-as-HTML\"><\/span>Edit as HTML<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p style=\"text-align: left\">Normally, you view, edit, and format your content using a visual editor. This setting lets you view and edit the block&#8217;s underlying <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/basic-html-guide\/\" target=\"_blank\" rel=\"noopener\"><strong>HTML<\/strong> <strong>code<\/strong><\/a>.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-024.png\" alt=\"WordPress Block Editor: More Options - Edit as HTML setting.\" width=\"1000\" height=\"650\" \/><figcaption class=\"wp-caption-text\">More Options &#8211; Edit as HTML setting.<\/figcaption><\/figure>\n<p style=\"text-align: left\">To view and edit a block&#8217;s HTML code:<\/p>\n<ul>\n<li style=\"text-align: left\">Click anywhere inside the block to view the Block Editor.<\/li>\n<li style=\"text-align: left\">Select the &#8216;Options&#8217; menu.<\/li>\n<li style=\"text-align: left\">Click &#8216;Edit as HTML&#8217;.<\/li>\n<li style=\"text-align: left\">The block content will switch to the HTML editor.<\/li>\n<li style=\"text-align: left\">To return to the visual editor, select the\u00a0&#8216;More Options&#8217; menu again and click on &#8216;Edit visually&#8217;.<\/li>\n<li style=\"text-align: left\">Save your post or page to update your content.<\/li>\n<\/ul>\n<figure style=\"width: 680px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-034.gif\" alt=\"More Options - Edit as HTML\" width=\"680\" height=\"442\" \/><figcaption class=\"wp-caption-text\">Use this function to view and edit the HTML code of your block.<\/figcaption><\/figure>\n<h5><span class=\"ez-toc-section\" id=\"Copy-and-Paste-Styles\"><\/span>Copy and Paste Styles<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p>In <a href=\"https:\/\/wptrainingmanual.com\/wordpress-updates\/wordpress-6-2\/\" target=\"_blank\" rel=\"noopener\"><strong>version 6.2<\/strong><\/a>, WordPress introduced the option to copy and paste one block&#8217;s styles to other blocks for a more consistent appearance.<\/p>\n<figure style=\"width: 832px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-071.png\" alt=\"WordPress Block Editor: More Options - Copy and Paste Styles\" width=\"832\" height=\"741\" \/><figcaption class=\"wp-caption-text\">More Options &#8211; Copy and Paste Styles<\/figcaption><\/figure>\n<p style=\"text-align: left\">To copy and paste a block&#8217;s style:<\/p>\n<ul>\n<li style=\"text-align: left\">Click anywhere inside the block to view the Block Editor.<\/li>\n<li style=\"text-align: left\">Select the &#8216;Options&#8217; menu.<\/li>\n<li style=\"text-align: left\">Select &#8216;Copy styles&#8217;<\/li>\n<li style=\"text-align: left\">Select the block you want to apply the copied styles.<\/li>\n<li style=\"text-align: left\">Select &#8216;Paste styles&#8217;<\/li>\n<li>The copied styles will be applied to the new block.<\/li>\n<li style=\"text-align: left\">Save your post or page to update your content.<\/li>\n<\/ul>\n<h5><span class=\"ez-toc-section\" id=\"Lock\"><\/span>Lock<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p>Block locking helps to prevent important blocks from being moved on the page or accidentally removed by users.<\/p>\n<p>You can lock core and experimental blocks in WordPress.<\/p>\n<p>Web developers can perform several types of block locking to prevent users from:<\/p>\n<ul>\n<li>Inserting blocks.<\/li>\n<li>Removing blocks.<\/li>\n<li>Moving blocks using drag or drop, arrow keys, or the list view.<\/li>\n<li>Editing anything except text and media.<\/li>\n<li>Restrict the editing of reusable blocks.<\/li>\n<\/ul>\n<p>Users can lock and unlock blocks in the editor, depending on their <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/users\/\" target=\"_blank\" rel=\"noopener\"><strong>user permissions<\/strong><\/a>.<\/p>\n<figure style=\"width: 950px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-053.png\" alt=\"WordPress Block Editor: Options - Lock setting.\" width=\"950\" height=\"797\" \/><figcaption class=\"wp-caption-text\">More Options &#8211; Lock setting.<\/figcaption><\/figure>\n<p>Choosing to lock a block brings up a pop-up window giving you a choice of the following attributes:<\/p>\n<ul>\n<li><strong>Lock all<\/strong> &#8211; Tick this box to enable all lock options or select the individual options below:\n<ul>\n<li><strong>Disable movement<\/strong> &#8211; Prevents users from moving blocks using drag or drop, arrow keys, or the list view.<\/li>\n<li><strong>Prevent removal<\/strong> &#8211; Prevents users from deleting the block<\/li>\n<li><strong>Apply to all blocks inside<\/strong> &#8211; This option appears in the modal when locking the inner blocks of container blocks such as <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/group-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Group<\/strong><\/a>, <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/cover-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Cover<\/strong><\/a>, and <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/columns-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Columns<\/strong><\/a>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<figure style=\"width: 946px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-054.png\" alt=\"WordPress Block Editor: Options - Lock setting.\" width=\"946\" height=\"783\" \/><figcaption class=\"wp-caption-text\">Block locking options.<\/figcaption><\/figure>\n<p>The <strong>Apply to all blocks inside<\/strong> toggle appears when working with grouped blocks.<\/p>\n<figure style=\"width: 950px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-057.png\" alt=\"WordPress Block Editor: Options - Lock setting - Container blocks\" width=\"950\" height=\"688\" \/><figcaption class=\"wp-caption-text\">Container blocks include an additional option to lock all blocks inside the group.<\/figcaption><\/figure>\n<p>You can tell that a block is locked if the padlock icon displays in the block menu toolbar.<\/p>\n<figure style=\"width: 942px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-056.png\" alt=\"WordPress Block Editor: Options - Lock setting.\" width=\"942\" height=\"400\" \/><figcaption class=\"wp-caption-text\">This block is locked.<\/figcaption><\/figure>\n<p>To unlock a blocked lock, either:<\/p>\n<p>Click on the padlock icon in the block menu toolbar and select unlock options&#8230;<\/p>\n<figure style=\"width: 1020px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-058.gif\" alt=\"WordPress Block Editor: Options - Unlocking a block from the toolbar\" width=\"1020\" height=\"768\" \/><figcaption class=\"wp-caption-text\">Click on the padlock icon to unlock the block.<\/figcaption><\/figure>\n<p>Or click on the <em>Options<\/em> menu and select <em>Unlock<\/em><\/p>\n<figure style=\"width: 954px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-055.png\" alt=\"WordPress Block Editor: Options - Unlock setting.\" width=\"954\" height=\"615\" \/><figcaption class=\"wp-caption-text\">Click Unlock to unlock a locked block.<\/figcaption><\/figure>\n<p><strong>Note:<\/strong> depending on user permissions, a user may not be able to unlock a block that has been locked by an administrator or developer.<\/p>\n<h5><span class=\"ez-toc-section\" id=\"Create-Reusable-Block\"><\/span>Create Reusable Block<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p style=\"text-align: left\">This setting lets you store a customized block that can be reused anywhere you like on your site.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-025.png\" alt=\"WordPress Block Editor: More Options - Create Reusable block setting.\" width=\"1000\" height=\"650\" \/><figcaption class=\"wp-caption-text\">More Options &#8211; Create Reusable block setting.<\/figcaption><\/figure>\n<p style=\"text-align: left\">To save a block as a reusable block:<\/p>\n<ul>\n<li style=\"text-align: left\">Click anywhere inside the block to view the Block Editor.<\/li>\n<li style=\"text-align: left\">Select the &#8216;Options&#8217; menu.<\/li>\n<li style=\"text-align: left\">Click &#8216;Create Reusable Block&#8217;.<\/li>\n<li>Give the newly-created block a name and click Save.<\/li>\n<li style=\"text-align: left\">Your block will be stored in your site&#8217;s &#8216;Blocks&#8217; library.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-059.png\" loading=\"lazy\" \/><\/p>\n<p>Note: Reusable blocks are <em>global<\/em>. This means that any edits you make to a reusable block will be applied to every instance of that repeatable block used on your site.<\/p>\n<figure style=\"width: 680px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-035.gif\" alt=\"More Options - Add to Reusable blocks\" width=\"680\" height=\"408\" \/><figcaption class=\"wp-caption-text\">Use this function to add a selected block to your site&#8217;s Reusable block library.<\/figcaption><\/figure>\n<p style=\"text-align: left\">To learn more about creating, editing, using, and managing reusable blocks, see this tutorial: <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/reusable-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Reusable blocks<\/strong><\/a><\/p>\n<h5><span class=\"ez-toc-section\" id=\"Group\"><\/span>Group<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p style=\"text-align: left\">This setting lets you group different blocks together.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-026.png\" alt=\"WordPress Block Editor: More Options - Group\" width=\"1000\" height=\"650\" \/><figcaption class=\"wp-caption-text\">More Options &#8211; Group setting<\/figcaption><\/figure>\n<p style=\"text-align: left\">To group blocks together:<\/p>\n<ul>\n<li style=\"text-align: left\">Either:\n<ul>\n<li style=\"text-align: left\">Drag your cursor to highlight a group of blocks, or<\/li>\n<li>Hold down the &#8216;Shift&#8217; key and click on the blocks you want to group together<\/li>\n<\/ul>\n<\/li>\n<li style=\"text-align: left\">A Block Editor will display after you have selected multiple blocks.<\/li>\n<li style=\"text-align: left\">Either:\n<ul>\n<li style=\"text-align: left\">Click on the left-hand icon (i.e. the two overlapping boxes) and select &#8216;Transform to Group&#8217;, or<\/li>\n<li style=\"text-align: left\">Click on the three dots (vertical ellipsis) to expand the &#8216;More Options&#8217; menu and then select &#8216;Group&#8217;.<\/li>\n<\/ul>\n<\/li>\n<li style=\"text-align: left\">Your selected blocks will be grouped together.<\/li>\n<li style=\"text-align: left\">You can also ungroup the blocks using the same process.<\/li>\n<\/ul>\n<figure style=\"width: 680px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-036.gif\" alt=\"More Options - Group setting.\" width=\"680\" height=\"571\" \/><figcaption class=\"wp-caption-text\">Use this function to group blocks together.<\/figcaption><\/figure>\n<p style=\"text-align: left\"><em>Note:<\/em> You cannot move other blocks on your post or page (eg using the &#8216;Move to&#8217; function) between grouped blocks.<\/p>\n<h5><span class=\"ez-toc-section\" id=\"Remove-Block\"><\/span>Remove Block<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p style=\"text-align: left\">This setting lets you remove a block that you no longer need from a post or page.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-027.png\" alt=\"WordPress Block Editor: More Options - Remove block setting.\" width=\"1000\" height=\"650\" \/><figcaption class=\"wp-caption-text\">More Options &#8211; Remove block setting.<\/figcaption><\/figure>\n<p style=\"text-align: left\">To remove a block from your post or page:<\/p>\n<ul>\n<li style=\"text-align: left\">Select the block you want to remove.<\/li>\n<li style=\"text-align: left\">Click anywhere inside the block to view the Block Editor.<\/li>\n<li style=\"text-align: left\">Select the &#8216;More Options&#8217; menu.<\/li>\n<li style=\"text-align: left\">Click &#8216;Remove Block&#8217;.<\/li>\n<li style=\"text-align: left\">Your block will be deleted from your post or page.<\/li>\n<li style=\"text-align: left\">Save your post or page to update your content.<\/li>\n<\/ul>\n<figure style=\"width: 680px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-037.gif\" alt=\" More Options - Remove block setting.\" width=\"680\" height=\"568\" \/><figcaption class=\"wp-caption-text\">This function lets you remove a block.<\/figcaption><\/figure>\n<p style=\"text-align: left\">To hide the &#8216;More Options&#8217; menu, click on the three dots (vertical ellipsis) on the Block Editor menu.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-038.png\" alt=\"WordPress Block Editor: Hide More Options menu.\" width=\"1000\" height=\"720\" \/><figcaption class=\"wp-caption-text\">Click on the three dots (vertical ellipsis) to hide the More Options menu.<\/figcaption><\/figure>\n<h3><span class=\"ez-toc-section\" id=\"More-Rich-Text-Controls\"><\/span>More Rich Text Controls<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: left\">Many block editors include a &#8216;More rich text controls&#8217; section with the following options:<\/p>\n<ul>\n<li style=\"text-align: left\"><strong>Inline Code<\/strong> &#8211; Convert selected text into code (e.g. <code>printf(\"Enter a character: \");<\/code>)<\/li>\n<li style=\"text-align: left\"><strong>Inline image<\/strong> &#8211; Insert an image directly within your text (e.g. a logo or image thumbnail).<\/li>\n<li style=\"text-align: left\"><strong>Strikethrough<\/strong> &#8211; Add a <del>strikethrough<\/del> effect to your selected text.<\/li>\n<li style=\"text-align: left\"><strong>Subscript<\/strong> &#8211; Convert selected text into subscript text. (e.g. H<sub>2<\/sub>O)<\/li>\n<li style=\"text-align: left\"><strong>Superscript<\/strong> &#8211; Convert selected text into superscript text.\u00a0(e.g. 10<sup>2<\/sup>)<\/li>\n<li style=\"text-align: left\"><strong>Text color<\/strong> &#8211; Change the color of your selected text (select a color from a predefined palette or add your own custom color).<\/li>\n<\/ul>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-051.png\" alt=\"More rich text controls - Options\" width=\"1000\" height=\"629\" \/><figcaption class=\"wp-caption-text\">More rich text controls.<\/figcaption><\/figure>\n<h3><span class=\"ez-toc-section\" id=\"Advanced-Block-Settings\"><\/span>Advanced Block Settings<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: left\">Many blocks contain an <em>Advanced Settings<\/em> section with advanced options such as:<\/p>\n<ul>\n<li><strong>Title Attribute <\/strong>&#8211; The title attribute can be used to add text for a tooltip, an image credit or a description of the image, etc. <em>Note:<\/em> many devices and browsers do not display this text.<\/li>\n<li><strong>HTML Anchor<\/strong> &#8211; Also known as <em>Page Jumps<\/em> or <em>Jump Links<\/em>, this allows you to link directly to any section of your page using a unique URL. <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/advanced-options\/\" target=\"_blank\" rel=\"noopener\"><strong>Learn how to use HTML anchors<\/strong><\/a>.<\/li>\n<li style=\"text-align: left\"><strong>Additional CSS Class(es)<\/strong> &#8211; This field lets you add multiple CSS classes to your block separated with spaces. This allows you to write custom CSS and style the block as you see fit. Note: This requires having knowledge of CSS (Cascading Style Sheets).<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"How-To-Add-Blocks-To-Content\"><\/span>How To Add Blocks To Content<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: left\">Blocks can be added anywhere on the page with the click of a button, inserted before or after other blocks using dropdown menus, converted into different block types, and easily reordered using &#8216;drag and drop&#8217;, or &#8216;up and down&#8217; buttons.<\/p>\n<p style=\"text-align: left\">You can add blocks to content in several different ways.<\/p>\n<p style=\"text-align: left\">For example, you can add blocks:<\/p>\n<ol>\n<li style=\"text-align: left\">From the &#8216;Add Block&#8217; tool in the <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/block-editor-toolbar\/\" target=\"_blank\" rel=\"noopener\"><strong>Editing Toolbar<\/strong><\/a><\/li>\n<li style=\"text-align: left\">From the &#8216;Add Block&#8217; tool in the <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/block-editor-content-area\/\" target=\"_blank\" rel=\"noopener\"><strong>Content Area<\/strong><\/a><\/li>\n<li style=\"text-align: left\">From inside an existing block.<\/li>\n<li style=\"text-align: left\">From your &#8216;Reusable Blocks&#8217; library.<\/li>\n<\/ol>\n<p style=\"text-align: left\">To learn how to add blocks to your posts and pages, see this tutorial: <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/block-editor-content-area\/\" target=\"_blank\" rel=\"noopener\"><strong>The WordPress Block Editor Content Area<\/strong><\/a><\/p>\n<p style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/info-icon.jpg\" alt=\"Important\" width=\"75\" height=\"75\" \/><\/p>\n<p style=\"text-align: left\">Creating content for posts and pages using the WordPress Block Editor works the same way regardless of what type of site you have (e.g. a blog, company website, eCommerce site, etc.).<\/p>\n<p style=\"text-align: left\">Because blocks are designed to allow your website to integrate with all kinds of new and external applications, how your content will look after publishing your posts or pages depends on various factors like:<\/p>\n<ul>\n<li style=\"text-align: left\">The <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/themes\/\" target=\"_blank\" rel=\"noopener\"><strong>WordPress Theme<\/strong><\/a>\u00a0installed on your site (and any specific theme styles or customizations).<\/li>\n<li style=\"text-align: left\">Different block settings, options, and configurations.<\/li>\n<li style=\"text-align: left\">Any content modification <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/plugins\/\" target=\"_blank\" rel=\"noopener\"><strong>plugins<\/strong><\/a>\u00a0you have installed on your site (most plugins now include their own custom blocks for the WordPress block editor).<\/li>\n<li style=\"text-align: left\">Integrations with third-party applications (many third-party application developers are now also creating blocks that allow their apps to integrate seamlessly with the WordPress block editor),<\/li>\n<li style=\"text-align: left\">Any additional site customizations, etc.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"WordPress-Gutenberg-Blocks\"><\/span>WordPress Gutenberg Blocks<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: left\">The WordPress block editor includes many useful default blocks.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-039.png\" alt=\"WordPress blocks\" width=\"1000\" height=\"1416\" \/><figcaption class=\"wp-caption-text\">Some default WordPress blocks.<\/figcaption><\/figure>\n<p style=\"text-align: left\">More block-enabled plugins are being continually developed by the WordPress developer community to help you extend and expand the functionality of the Gutenberg content editor.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-040.png\" alt=\"WordPress Plugin directory - Block-Enabled Plugins\" width=\"1000\" height=\"1208\" \/><figcaption class=\"wp-caption-text\">WordPress Plugin directory &#8211; Block-Enabled Plugins. (Source: https:\/\/wordpress.org\/plugins)<\/figcaption><\/figure>\n<p style=\"text-align: left\">If you click on &#8216;See all&#8217; in the Block-Enabled Plugins section, you can browse many plugins that offer blocks for the block-based editor to help enhance and extend your content.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-041.png\" alt=\"WordPress Plugin Directory - Browse: Blocks\" width=\"1000\" height=\"1209\" \/><figcaption class=\"wp-caption-text\">Browse Block-enabled plugins in the WordPress plugin directory.<\/figcaption><\/figure>\n<p style=\"text-align: left\">Additionally, you can search the WordPress plugins library from your dashboard for new block-enabled plugins (<em>Plugins &gt; Add Plugins<\/em>).<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-048.png\" alt=\"Add Plugins screen - search for block-enabled plugins.\" width=\"1000\" height=\"531\" \/><figcaption class=\"wp-caption-text\">Search for block-enabled plugins in the Add Plugins screen.<\/figcaption><\/figure>\n<h2><span class=\"ez-toc-section\" id=\"WordPress-Block-Editor-%E2%80%93-Blocks\"><\/span>WordPress Block Editor &#8211; Blocks<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: left\">Clicking on the &#8216;Add Block&#8217; tool in the <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/block-editor-toolbar\/\" target=\"_blank\" rel=\"noopener\"><strong>WordPress Block Editor Toolbar<\/strong><\/a>\u00a0brings up a list of Blocks.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-042.png\" alt=\"WordPress Block Editor - Blocks List\" width=\"1000\" height=\"910\" \/><figcaption class=\"wp-caption-text\">Choose blocks from this list.<\/figcaption><\/figure>\n<p style=\"text-align: left\">This tool contains a &#8216;Search&#8217; field and tabbed sections for Blocks, Patterns, and your Reusable Blocks library (you need to create at least one reusable block for this tab to display).<\/p>\n<p style=\"text-align: left\">The <strong>Block List<\/strong> is divided into the following sections:<\/p>\n<ul>\n<li style=\"text-align: left\">Most Used (see below to learn how to add this section)<\/li>\n<li style=\"text-align: left\">Text<\/li>\n<li style=\"text-align: left\">Media<\/li>\n<li style=\"text-align: left\">Design<\/li>\n<li style=\"text-align: left\">Widgets<\/li>\n<li style=\"text-align: left\">Embeds<\/li>\n<li style=\"text-align: left\">Reusable (only displays when a reusable block is created)<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"See-Your-Most-Used-Blocks\"><\/span>See Your Most Used Blocks<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: left\">If you use the same blocks often, you can display your most used blocks at the top of your block list.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-043.png\" alt=\"WordPress Block Editor: Blocks - Most Used\" width=\"1000\" height=\"844\" \/><figcaption class=\"wp-caption-text\">Most Used Blocks category.<\/figcaption><\/figure>\n<p style=\"text-align: left\">To enable the most used blocks category, do the following:<\/p>\n<p style=\"text-align: left\">Click the icon with the three dots (vertical ellipsis) in the top right-hand corner of the editor screen to access the &#8216;More tools &amp; options&#8217; section.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-044.png\" alt=\"WordPress Block Editor - More tools &amp; options\" width=\"1000\" height=\"641\" \/><figcaption class=\"wp-caption-text\">Click on More tools &amp; options&#8230;<\/figcaption><\/figure>\n<p style=\"text-align: left\">Click on <strong>Preferences<\/strong>.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-045.png\" alt=\"More tools &amp; options - Preferences.\" width=\"1000\" height=\"850\" \/><figcaption class=\"wp-caption-text\">Select Preferences&#8230;<\/figcaption><\/figure>\n<p style=\"text-align: left\">In the <strong>Preferences &gt; General<\/strong> section, check the box next to <strong>Show most used blocks<\/strong>.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-046.png\" alt=\"More tools &amp; options - Preferences - Show most used blocks.\" width=\"1000\" height=\"303\" \/><figcaption class=\"wp-caption-text\">Check the box.<\/figcaption><\/figure>\n<p style=\"text-align: left\">The &#8216;Most Used&#8217; blocks category will now display at the top of your list of Blocks.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-047.png\" alt=\"List of Blocks with Most Used Blocks category.\" width=\"1000\" height=\"945\" \/><figcaption class=\"wp-caption-text\">The Most Used blocks category now displays in the list of Blocks.<\/figcaption><\/figure>\n<h2><span class=\"ez-toc-section\" id=\"Troubleshooting-Issues-With-Blocks\"><\/span>Troubleshooting Issues With Blocks<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Sometimes when editing a post or page, a block will not display in your content and you will see this error message instead:<\/p>\n<figure style=\"width: 928px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-060.png\" alt=\"WordPress Block Error message: &quot;This block contains unexpected or invalid content.&quot;\" width=\"928\" height=\"144\" \/><figcaption class=\"wp-caption-text\">&#8220;This block contains unexpected or invalid content.&#8221;<\/figcaption><\/figure>\n<p>This can happen for a number of reasons:<\/p>\n<ol>\n<li>You created a page or post using the <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/block-editor\/\" target=\"_blank\" rel=\"noopener\"><strong>WordPress Block Editor<\/strong><\/a>, then edited later using the <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/wordpress-classic-editor\/\" target=\"_blank\" rel=\"noopener\"><strong>WordPress Classic Editor<\/strong><\/a>. When you go back to the Block Editor, this can affect some blocks and this message displays instead.<\/li>\n<li>You modify the HTML of the block in the Code Editor and make a syntax error. You can check the HTML to make sure you have used the correct syntax (see below).<\/li>\n<li>A third-party block installed via <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/plugins\/\" target=\"_blank\" rel=\"noopener\"><strong>plugins<\/strong><\/a> can cause the error to appear if you are using an old version of the block or the markup is incorrect. If this happens, we recommend speaking to your web developer or reporting the error directly to the plugin\u2019s developer.<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"How-To-Fix-Block-Errors\"><\/span>How To Fix Block Errors<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>WordPress blocks give you several options to try and fix errors when you see the message &#8220;This block contains unexpected or invalid content.&#8221;:<\/p>\n<ul>\n<li><strong>Attempt Block Recovery<\/strong> &#8211; Displays as a clickable button.<\/li>\n<li><strong>Resolve<\/strong> &#8211; Select the &#8220;More options&#8221; menu by clicking on the ellipsis (three-dot) icon to access this option.<\/li>\n<li><strong>Convert to HTML<\/strong> &#8211; Select the &#8220;More options&#8221; menu by clicking on the ellipsis (three-dot) icon to access this option.<\/li>\n<li><strong>Convert to Classic Block<\/strong> &#8211; Select the &#8220;More options&#8221; menu by clicking on the ellipsis (three-dot) icon to access this option.<\/li>\n<\/ul>\n<figure style=\"width: 956px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-061.png\" alt=\"A block displaying the error message &quot;This block contains unexpected or invalid content&quot; with an &quot;Attempt Block Recovery&quot; button and an ellipsis menu visible with three additional options: 'Resolve' (highlighted), 'Convert to Classic Block' and 'Attempt Block Recovery'.\" width=\"956\" height=\"332\" \/><figcaption class=\"wp-caption-text\">WordPress gives you 4 options to try and fix block errors.<\/figcaption><\/figure>\n<p>Let&#8217;s go through each of these options:<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Attempt-Block-Recovery\"><\/span>Attempt Block Recovery<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>To check if the block editor can restore the block to how it was before the error appeared, click on the\u00a0<strong>Attempt Block Recovery<\/strong> button.<\/p>\n<figure style=\"width: 945px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-065.png\" alt=\"Attempt Block Recovery\" width=\"945\" height=\"163\" \/><figcaption class=\"wp-caption-text\">Attempt Block Recovery checks if the block editor can restore the block as it was before the error.<\/figcaption><\/figure>\n<p>Clicking this button requires no technical skills and often fixes the block errors.<\/p>\n<figure style=\"width: 922px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-066.gif\" alt=\"Attempt Block Recovery\" width=\"922\" height=\"752\" \/><figcaption class=\"wp-caption-text\">Clicking this button will often fix the problem.<\/figcaption><\/figure>\n<p>The other options below require some technical knowledge, so if you are a non-technical user, then it&#8217;s probably best to leave these to your website developer.<\/p>\n<p>Nonetheless, let&#8217;s go through these options:<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Resolve\"><\/span>Resolve<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Select the &#8220;More options&#8221; menu by clicking on the ellipsis (three-dot) icon and select <strong>Resolve<\/strong>&#8230;<\/p>\n<p><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-062.png\" loading=\"lazy\" \/><\/p>\n<p>Resolve attempts to automatically present a block-based solution by splitting the results into two columns:<\/p>\n<ul>\n<li><strong>Left column<\/strong> &#8211; displays code and the <strong>Convert to HTML<\/strong> button.<\/li>\n<li><strong>Right column<\/strong> &#8211; displays code and the <strong>Convert to Blocks<\/strong> button.<\/li>\n<\/ul>\n<figure style=\"width: 882px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-068.png\" alt=\"Resolve Block pop-up.\" width=\"882\" height=\"706\" \/><figcaption class=\"wp-caption-text\">Resolve Block compares converting the invalid content to a Custom HTML block (left column) or attempting to fix errors and return the fixed content to the block it was added to.<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Convert-to-HTML\"><\/span>Convert to HTML<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>The Convert to HTML block converts the invalid content directly into an HTML block.<\/p>\n<p><strong>Note:<\/strong> This is the same function as the Convert to HTML option which is part of the Resolve option above.<\/p>\n<p>Select the &#8220;More options&#8221; menu by clicking on the ellipsis (three-dot) icon and select <strong>Convert to HTML<\/strong>&#8230;<\/p>\n<figure style=\"width: 954px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-063.png\" alt=\"A block showing the text &quot;This block contains unexpected or invalid content&quot; with 'Convert to HTML' option selected.\" width=\"954\" height=\"450\" \/><figcaption class=\"wp-caption-text\">Convert to HTML<\/figcaption><\/figure>\n<h4><span class=\"ez-toc-section\" id=\"Convert-to-Classic-Block\"><\/span>Convert to Classic Block<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>To convert the invalid content into a <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/classic-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Classic block<\/strong><\/a>, click the ellipsis (three dots) button, and choose <strong>Convert to Classic Block<\/strong> from the menu.<\/p>\n<figure style=\"width: 957px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-064.png\" alt=\"A block showing the text &quot;This block contains unexpected or invalid content&quot; with 'Convert to Classic Block' option selected.\" width=\"957\" height=\"444\" \/><figcaption class=\"wp-caption-text\">Convert to Classic Block<\/figcaption><\/figure>\n<p>This will convert the block into a Classic block and allow you to edit the block&#8217;s content using Classic editor features.<\/p>\n<figure style=\"width: 996px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-070.gif\" alt=\"Block with error converted into a Classic block.\" width=\"996\" height=\"524\" \/><figcaption class=\"wp-caption-text\">The Block with an error has been converted into a Classic block.<\/figcaption><\/figure>\n<p>As mentioned above, clicking on the <strong>Attempt Block Recovery<\/strong> button will often fix most of the errors you experience with blocks and does not require any technical knowledge or skills.<\/p>\n<p>If clicking on the <strong>Attempt Block Recovery<\/strong> button doesn&#8217;t fix the issue, you can try exploring the other options or contact your website developer for further assistance.<\/p>\n<figure style=\"width: 970px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-069.gif\" alt=\"WordPress options for fixing &quot;This block contains unexpected or invalid content&quot; block errors.\" width=\"970\" height=\"602\" \/><figcaption class=\"wp-caption-text\">WordPress gives you several options for fixing &#8220;This block contains unexpected or invalid content&#8221; block errors.<\/figcaption><\/figure>\n<h2><span class=\"ez-toc-section\" id=\"Default-WordPress-Editor-Blocks-%E2%80%93-Tutorials\"><\/span>Default WordPress Editor Blocks &#8211; Tutorials<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: left\">For detailed tutorials on using the WordPress Block Editor&#8217;s default blocks, click on the links below:<\/p>\n<ul>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/archives-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Archives block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/audio-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Audio block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/button-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Buttons block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/categories-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Categories block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/classic-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Classic block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/code-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Code block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/columns-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Columns block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/cover-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Cover block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Custom HTML block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/embed-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Embed block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/file-block\/\" target=\"_blank\" rel=\"noopener\"><strong>File block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gallery-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Gallery block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/group-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Group block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/heading-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Heading block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/image-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Image block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/latest-comments-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Latest Comments block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/latest-posts-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Latest Posts block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/list-block\/\" target=\"_blank\" rel=\"noopener\"><strong>List block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/media-text-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Media Text block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/more-block\/\" target=\"_blank\" rel=\"noopener\"><strong>More block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/page-break-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Page Break block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/paragraph-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Paragraph block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/preformatted-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Preformatted block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/pullquote-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Pullquote block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/quote-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Quote block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/reusable-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Reusable block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/separator-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Separator block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/shortcode-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Shortcode block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/spacer-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Spacer block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/table-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Table block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/verse-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Verse block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/video-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Video block<\/strong><\/a><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"WordPress-Blocks-%E2%80%93-FAQs\"><\/span>WordPress Blocks &#8211; FAQs<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Here are frequently asked questions about WordPress Blocks:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"What-are-WordPress-Block-Editor-Blocks\"><\/span>What are WordPress Block Editor Blocks?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>WordPress Block Editor Blocks, often referred to simply as blocks, are individual units of content and functionality in the WordPress Block Editor. They allow users to add various types of content, such as text, images, videos, and more, to their posts and pages.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"How-do-I-add-a-block-in-the-WordPress-Block-Editor\"><\/span>How do I add a block in the WordPress Block Editor?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To add a block in the WordPress Block Editor, click the &#8220;+&#8221; button or the &#8220;Add Block&#8221; icon, then select the desired block type from the block library. Alternatively, users can type &#8220;\/block-name&#8221; in an empty block to quickly add a specific block.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Can-I-customize-the-appearance-and-behavior-of-WordPress-Blocks\"><\/span>Can I customize the appearance and behavior of WordPress Blocks?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes, WordPress Blocks can be customized using block settings and block-specific options available in the Block Editor. Users can adjust settings such as text alignment, color, font size, and more to tailor the appearance of each block to their preferences.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Are-there-advanced-block-customization-options-available\"><\/span>Are there advanced block customization options available?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes, users can access advanced block customization options by utilizing block styles, custom CSS, and third-party block plugins. These options enable users to achieve highly customized layouts and designs for their content.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"How-do-I-find-specific-blocks-in-the-block-library\"><\/span>How do I find specific blocks in the block library?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Users can search for specific blocks in the block library by typing keywords related to the desired block type in the search bar. Additionally, blocks are categorized into sections such as Common Blocks, Formatting, Layout Elements, and Widgets, making it easier to locate them.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Can-I-create-custom-blocks-for-my-WordPress-website\"><\/span>Can I create custom blocks for my WordPress website?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes, users can create custom blocks for their WordPress website using block development tools and the WordPress Block Editor API. Developers can extend the functionality of the Block Editor by building custom blocks tailored to specific needs.<\/p>\n<p style=\"text-align: center\">***<\/p>\n<p style=\"text-align: left\">Congratulations! Now you know how to use WordPress Blocks when creating and editing content using the WordPress Block Editor.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Additional-WordPress-Block-Editor-Tutorials\"><\/span>Additional WordPress Block Editor Tutorials<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: left\">To learn more about using the WordPress Block Editor, see these tutorials:<\/p>\n<ul>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/block-editor-content-area\/\" target=\"_blank\" rel=\"noopener\"><strong>How To Use The WordPress Block Editor Content Area<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/block-editor-toolbar\/\" target=\"_blank\" rel=\"noopener\"><strong>How To Use The WordPress Block Editing Toolbar<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/block-editor-settings\/\" target=\"_blank\" rel=\"noopener\"><strong>How To Use The WordPress Block Editor Settings Section<\/strong><\/a><\/li>\n<li><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/block-settings\/\" target=\"_blank\" rel=\"noopener\"><strong>WordPress Block Editor: Block Settings<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/keyboard-shortcuts\/\" target=\"_blank\" rel=\"noopener\"><strong>WordPress Block Editor &#8211; Keyboard Shortcuts<\/strong><\/a><\/li>\n<\/ul>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-041\/WPTM-041-001.png\" alt=\"Blocks\" width=\"1000\" height=\"780\" \/><figcaption class=\"wp-caption-text\">Learn how to use WordPress Editor Blocks<\/figcaption><\/figure>\n<p style=\"text-align: center\">***<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to use blocks in the WordPress Gutenberg editor.<\/p>\n","protected":false},"author":78,"featured_media":79052,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"default","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[195],"tags":[198,211],"class_list":["post-78992","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-tutorials","tag-block-editor","tag-gutenberg"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How To Use WordPress Gutenberg Editor Blocks - WPTrainingManual.com<\/title>\n<meta name=\"description\" content=\"Learn how to use blocks in the WordPress Gutenberg editor.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Use WordPress Gutenberg Editor Blocks - WPTrainingManual.com\" \/>\n<meta property=\"og:description\" content=\"Learn how to use blocks in the WordPress Gutenberg editor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/\" \/>\n<meta property=\"og:site_name\" content=\"WPTrainingManual.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wptraining\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-10T13:29:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-05T09:07:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wptrainingmanual.com\/wp-content\/uploads\/2020\/06\/041-wp-gutenberg-editor.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"WordPress Tutorials\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@wptrain\" \/>\n<meta name=\"twitter:site\" content=\"@wptrain\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"WordPress Tutorials\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"39 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/\"},\"author\":{\"name\":\"WordPress Tutorials\",\"@id\":\"https:\/\/wptrainingmanual.com\/#\/schema\/person\/00f2fc1ecf36a4fd1861f6744e9f17cc\"},\"headline\":\"How To Use WordPress Gutenberg Editor Blocks\",\"datePublished\":\"2020-06-10T13:29:56+00:00\",\"dateModified\":\"2024-07-05T09:07:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/\"},\"wordCount\":5970,\"publisher\":{\"@id\":\"https:\/\/wptrainingmanual.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wptrainingmanual.com\/wp-content\/uploads\/2020\/06\/041-wp-gutenberg-editor.jpg\",\"keywords\":[\"Block Editor\",\"Gutenberg\"],\"articleSection\":[\"WordPress Tutorials\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/\",\"url\":\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/\",\"name\":\"How To Use WordPress Gutenberg Editor Blocks - WPTrainingManual.com\",\"isPartOf\":{\"@id\":\"https:\/\/wptrainingmanual.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wptrainingmanual.com\/wp-content\/uploads\/2020\/06\/041-wp-gutenberg-editor.jpg\",\"datePublished\":\"2020-06-10T13:29:56+00:00\",\"dateModified\":\"2024-07-05T09:07:40+00:00\",\"description\":\"Learn how to use blocks in the WordPress Gutenberg editor.\",\"breadcrumb\":{\"@id\":\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#primaryimage\",\"url\":\"https:\/\/wptrainingmanual.com\/wp-content\/uploads\/2020\/06\/041-wp-gutenberg-editor.jpg\",\"contentUrl\":\"https:\/\/wptrainingmanual.com\/wp-content\/uploads\/2020\/06\/041-wp-gutenberg-editor.jpg\",\"width\":1280,\"height\":720,\"caption\":\"How To Use WordPress Blocks - Gutenberg Editor\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wptrainingmanual.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Use WordPress Gutenberg Editor Blocks\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wptrainingmanual.com\/#website\",\"url\":\"https:\/\/wptrainingmanual.com\/\",\"name\":\"WPTrainingManual.com\",\"description\":\"WordPress Training Manual\",\"publisher\":{\"@id\":\"https:\/\/wptrainingmanual.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wptrainingmanual.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/wptrainingmanual.com\/#organization\",\"name\":\"WPTrainingManual.com\",\"url\":\"https:\/\/wptrainingmanual.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wptrainingmanual.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/wptrainingmanual.com\/wp-content\/uploads\/2019\/10\/WPTMLogo300DPI.png\",\"contentUrl\":\"https:\/\/wptrainingmanual.com\/wp-content\/uploads\/2019\/10\/WPTMLogo300DPI.png\",\"width\":559,\"height\":65,\"caption\":\"WPTrainingManual.com\"},\"image\":{\"@id\":\"https:\/\/wptrainingmanual.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/wptraining\",\"https:\/\/x.com\/wptrain\",\"https:\/\/www.linkedin.com\/in\/wptraining\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/wptrainingmanual.com\/#\/schema\/person\/00f2fc1ecf36a4fd1861f6744e9f17cc\",\"name\":\"WordPress Tutorials\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wptrainingmanual.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a1927207a85c38b508587e97574ef0c78249b67b2deaa3f0fdba58dda9de847f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a1927207a85c38b508587e97574ef0c78249b67b2deaa3f0fdba58dda9de847f?s=96&d=mm&r=g\",\"caption\":\"WordPress Tutorials\"},\"url\":\"https:\/\/wptrainingmanual.com\/author\/wordpress-tutorials\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Use WordPress Gutenberg Editor Blocks - WPTrainingManual.com","description":"Learn how to use blocks in the WordPress Gutenberg editor.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/","og_locale":"en_US","og_type":"article","og_title":"How To Use WordPress Gutenberg Editor Blocks - WPTrainingManual.com","og_description":"Learn how to use blocks in the WordPress Gutenberg editor.","og_url":"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/","og_site_name":"WPTrainingManual.com","article_publisher":"https:\/\/www.facebook.com\/wptraining","article_published_time":"2020-06-10T13:29:56+00:00","article_modified_time":"2024-07-05T09:07:40+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/wptrainingmanual.com\/wp-content\/uploads\/2020\/06\/041-wp-gutenberg-editor.jpg","type":"image\/jpeg"}],"author":"WordPress Tutorials","twitter_card":"summary_large_image","twitter_creator":"@wptrain","twitter_site":"@wptrain","twitter_misc":{"Written by":"WordPress Tutorials","Est. reading time":"39 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#article","isPartOf":{"@id":"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/"},"author":{"name":"WordPress Tutorials","@id":"https:\/\/wptrainingmanual.com\/#\/schema\/person\/00f2fc1ecf36a4fd1861f6744e9f17cc"},"headline":"How To Use WordPress Gutenberg Editor Blocks","datePublished":"2020-06-10T13:29:56+00:00","dateModified":"2024-07-05T09:07:40+00:00","mainEntityOfPage":{"@id":"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/"},"wordCount":5970,"publisher":{"@id":"https:\/\/wptrainingmanual.com\/#organization"},"image":{"@id":"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#primaryimage"},"thumbnailUrl":"https:\/\/wptrainingmanual.com\/wp-content\/uploads\/2020\/06\/041-wp-gutenberg-editor.jpg","keywords":["Block Editor","Gutenberg"],"articleSection":["WordPress Tutorials"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/","url":"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/","name":"How To Use WordPress Gutenberg Editor Blocks - WPTrainingManual.com","isPartOf":{"@id":"https:\/\/wptrainingmanual.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#primaryimage"},"image":{"@id":"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#primaryimage"},"thumbnailUrl":"https:\/\/wptrainingmanual.com\/wp-content\/uploads\/2020\/06\/041-wp-gutenberg-editor.jpg","datePublished":"2020-06-10T13:29:56+00:00","dateModified":"2024-07-05T09:07:40+00:00","description":"Learn how to use blocks in the WordPress Gutenberg editor.","breadcrumb":{"@id":"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#primaryimage","url":"https:\/\/wptrainingmanual.com\/wp-content\/uploads\/2020\/06\/041-wp-gutenberg-editor.jpg","contentUrl":"https:\/\/wptrainingmanual.com\/wp-content\/uploads\/2020\/06\/041-wp-gutenberg-editor.jpg","width":1280,"height":720,"caption":"How To Use WordPress Blocks - Gutenberg Editor"},{"@type":"BreadcrumbList","@id":"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wptrainingmanual.com\/"},{"@type":"ListItem","position":2,"name":"How To Use WordPress Gutenberg Editor Blocks"}]},{"@type":"WebSite","@id":"https:\/\/wptrainingmanual.com\/#website","url":"https:\/\/wptrainingmanual.com\/","name":"WPTrainingManual.com","description":"WordPress Training Manual","publisher":{"@id":"https:\/\/wptrainingmanual.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wptrainingmanual.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wptrainingmanual.com\/#organization","name":"WPTrainingManual.com","url":"https:\/\/wptrainingmanual.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wptrainingmanual.com\/#\/schema\/logo\/image\/","url":"https:\/\/wptrainingmanual.com\/wp-content\/uploads\/2019\/10\/WPTMLogo300DPI.png","contentUrl":"https:\/\/wptrainingmanual.com\/wp-content\/uploads\/2019\/10\/WPTMLogo300DPI.png","width":559,"height":65,"caption":"WPTrainingManual.com"},"image":{"@id":"https:\/\/wptrainingmanual.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/wptraining","https:\/\/x.com\/wptrain","https:\/\/www.linkedin.com\/in\/wptraining\/"]},{"@type":"Person","@id":"https:\/\/wptrainingmanual.com\/#\/schema\/person\/00f2fc1ecf36a4fd1861f6744e9f17cc","name":"WordPress Tutorials","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wptrainingmanual.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a1927207a85c38b508587e97574ef0c78249b67b2deaa3f0fdba58dda9de847f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a1927207a85c38b508587e97574ef0c78249b67b2deaa3f0fdba58dda9de847f?s=96&d=mm&r=g","caption":"WordPress Tutorials"},"url":"https:\/\/wptrainingmanual.com\/author\/wordpress-tutorials\/"}]}},"uagb_featured_image_src":{"full":["https:\/\/wptrainingmanual.com\/wp-content\/uploads\/2020\/06\/041-wp-gutenberg-editor.jpg",1280,720,false],"thumbnail":["https:\/\/wptrainingmanual.com\/wp-content\/uploads\/2020\/06\/041-wp-gutenberg-editor-150x150-1.jpg",150,150,true],"medium":["https:\/\/wptrainingmanual.com\/wp-content\/uploads\/2020\/06\/041-wp-gutenberg-editor-300x169-1.jpg",300,169,true],"medium_large":["https:\/\/wptrainingmanual.com\/wp-content\/uploads\/2020\/06\/041-wp-gutenberg-editor-768x432-1.jpg",768,432,true],"large":["https:\/\/wptrainingmanual.com\/wp-content\/uploads\/2020\/06\/041-wp-gutenberg-editor-1024x576-1.jpg",1024,576,true],"1536x1536":["https:\/\/wptrainingmanual.com\/wp-content\/uploads\/2020\/06\/041-wp-gutenberg-editor.jpg",1280,720,false],"2048x2048":["https:\/\/wptrainingmanual.com\/wp-content\/uploads\/2020\/06\/041-wp-gutenberg-editor.jpg",1280,720,false]},"uagb_author_info":{"display_name":"WordPress Tutorials","author_link":"https:\/\/wptrainingmanual.com\/author\/wordpress-tutorials\/"},"uagb_comment_info":0,"uagb_excerpt":"Learn how to use blocks in the WordPress Gutenberg editor.","_links":{"self":[{"href":"https:\/\/wptrainingmanual.com\/wp-json\/wp\/v2\/posts\/78992","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wptrainingmanual.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wptrainingmanual.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wptrainingmanual.com\/wp-json\/wp\/v2\/users\/78"}],"replies":[{"embeddable":true,"href":"https:\/\/wptrainingmanual.com\/wp-json\/wp\/v2\/comments?post=78992"}],"version-history":[{"count":1,"href":"https:\/\/wptrainingmanual.com\/wp-json\/wp\/v2\/posts\/78992\/revisions"}],"predecessor-version":[{"id":79666,"href":"https:\/\/wptrainingmanual.com\/wp-json\/wp\/v2\/posts\/78992\/revisions\/79666"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wptrainingmanual.com\/wp-json\/wp\/v2\/media\/79052"}],"wp:attachment":[{"href":"https:\/\/wptrainingmanual.com\/wp-json\/wp\/v2\/media?parent=78992"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wptrainingmanual.com\/wp-json\/wp\/v2\/categories?post=78992"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wptrainingmanual.com\/wp-json\/wp\/v2\/tags?post=78992"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}