{"id":49790,"date":"2021-06-16T07:45:26","date_gmt":"2021-06-16T07:45:26","guid":{"rendered":"https:\/\/www.awardspace.com\/?p=49790"},"modified":"2024-10-18T10:41:51","modified_gmt":"2024-10-18T10:41:51","slug":"wordpress-block-editor-the-basics","status":"publish","type":"post","link":"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-the-basics\/","title":{"rendered":"Gutenberg Tutorial: The Basics of the WordPress Block Editor"},"content":{"rendered":"<blockquote class=\"gray\"><p><strong>What is Gutenberg:<\/strong><\/p>\n<p><strong>Gutenberg<\/strong> is the name of the new <em>post editor<\/em> that ships with WordPress. Unlike its predecessor, Gutenberg is entirely <em>block-based<\/em>. This means that every page element like a paragraph, an image, a video, etc lives inside a block. Gutenberg blocks can be moved around with ease and they tend to more accurately depict how your page will look once it is published.<\/p><\/blockquote>\n<p>WordPress has shipped with a free-form post editor since its inception. However, in late 2018, WordPress 5.0 introduced a brand new post editor called <strong>Gutenberg<\/strong>. Named after <em>Johannes Gutenberg<\/em>, the inventor of the printing press, the new post editor promises to revolutionize how we create and publish content in WordPress. Gutenberg\u2019s standout feature is the use of <strong>blocks<\/strong> to help you encapsulate and manage your content.<\/p>\n<p>In this article, we will provide you with a crash course on Gutenberg, WordPress\u2019 Block Editor, so you can hit the ground running and start creating right away.<\/p>\n<blockquote class=\"gray\"><p><strong>Table of Contents<\/strong><\/p>\n<ul>\n<li><a href=\"#blocks-explanation\">The Blocks Concept, Explained<\/a><\/li>\n<li><a href=\"#getting-around\">Getting to Know the WordPress Block Editor<\/a><\/li>\n<li><a href=\"#add-block\">Adding a Block<\/a><\/li>\n<li><a href=\"#remove-block\">Removing a Block<\/a><\/li>\n<li><a href=\"#working-with-text\">Working With Text<\/a><\/li>\n<li><a href=\"#inserting-images\">Inserting an Image Into Your Post<\/a><\/li>\n<li><a href=\"#post-publishing\">Publishing Your First Post<\/a><\/li>\n<li><a href=\"#post-updating\">Updating an Existing Post<\/a><\/li>\n<li><a href=\"#next-steps\">Next Steps<\/a><\/li>\n<\/ul>\n<\/blockquote>\n<p>&nbsp;<\/p>\n<h2 id=\"blocks-explanation\">The Blocks Concept, Explained<\/h2>\n<p>As we mentioned in our intro, the biggest difference between the classic WordPress Post Editor and Gutenberg is that the latter uses <strong>blocks<\/strong> to manage content. In fact, blocks are so central to Gutenberg that it is also known as the <em>WordPress Block Editor<\/em>.<\/p>\n<p>The usage of blocks stands in stark contrast to the free-form text layout that was used in the previous post editor. In the past, you would write free-form text and embed images, videos, shortcodes, and other elements into it. But with the WordPress Block Editor, you would encapsulate each piece of content in its own block. In other words, every element on the page such as a paragraph, heading, media, and embedded content is treated as a separate entity and can be independently moved and customized.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/06\/learning-gutenberg-the-basics-1.jpg\" alt=\"Being able to see every page as a collection of blocks will allow you to better leverage the capabilities of the WordPress Block Editor.\" \/><figcaption>Being able to see every page as a collection of blocks will allow you to better leverage the capabilities of the WordPress Block Editor.<\/figcaption><\/figure>\n<p>You can read our article on Gutenberg blocks if you wish to learn how to take full advantage of the WordPress Block Editor.<\/p>\n<p>&nbsp;<\/p>\n<h2 id=\"getting-around\">Getting to Know the WordPress Block Editor<\/h2>\n<p>You can access the WordPress Block Editor by <a href=\"\/wordpress-tutorials\/add-page-wordpress\/\" target=\"_blank\" rel=\"noopener\">creating a new page<\/a> or a <a href=\"\/wordpress-tutorials\/how-to-post-on-wordpress\/\" target=\"_blank\" rel=\"noopener\">new post<\/a>.<\/p>\n<blockquote class=\"green\"><p><strong>Tip:<\/strong><\/p>\n<p>Gutenberg is also used for editing your existing posts and pages.<\/p><\/blockquote>\n<blockquote class=\"green\"><p><strong>Tip:<\/strong><\/p>\n<p>If you don\u2019t have a WordPress site yet where you can test Gutenberg, you are welcome to sign up for one of our <a href=\"\/wordpress-hosting\/\" target=\"_blank\" rel=\"noopener\">premium WordPress hosting plans<\/a> or even our <a href=\"\/free-hosting\/\" target=\"_blank\" rel=\"noopener\">free hosting package<\/a>. They all fully support WordPress and the WordPress Block Editor.<\/p><\/blockquote>\n<p>Gutenberg features a more streamlined interface when compared to its predecessor. By default, the only visible elements on the screen will be the <em>Top Toolbar<\/em>, the <em>Block Settings Sidebar<\/em>, and the main content area.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/06\/learning-gutenberg-the-basics-2.jpg\" alt=\"Gutenberg\u2019s default view will present you with a top toolbar, a Block Settings sidebar, and plenty of space to work on your content.\" \/>\u00a0<figcaption>Gutenberg\u2019s default view will present you with a top toolbar, a Block Settings sidebar, and plenty of space to work on your content.<\/figcaption><\/figure>\n<p>The Block Editor\u2019s sidebar contains two tabs: <em>Post<\/em> and <em>Block<\/em>.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/06\/learning-gutenberg-the-basics-3.jpg\" alt=\"The Block Options Sidebar contains two tabs.\" \/>\u00a0<figcaption>The Block Options Sidebar contains two tabs.<\/figcaption><\/figure>\n<p>The <strong>Post tab<\/strong> contains settings related to the post itself, such as its categories, tags, a featured image, publishing options, and others. Overall, if you have used the previous WordPress post editor, the options in this tab will be very familiar to you.<\/p>\n<p>The <strong>Block tab<\/strong>, on the other hand, contains options that are specific to the currently selected block. In other words, the contents of the Block tab will change depending on the type of block you are working on.<\/p>\n<blockquote class=\"green\"><p><strong>Tip:<\/strong><\/p>\n<p>Are you curious what options are available in the Post tab and the top toolbar? If so, you should check out our article on exploring the Gutenberg interface.<\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h2 id=\"add-block\">Adding a Block<\/h2>\n<p>To create a new block and start creating your page or post, click on the \u201c+\u201d button near the top left of the screen. When you do so, you will see Gutenberg\u2019s block gallery. Clicking on any of the available block types would insert the chosen block into your post\/page.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/06\/learning-gutenberg-the-basics-4.gif\" alt=\"One of the easiest ways of adding new blocks to a post or a page is by using the \u201c+\u201d button near the top-left corner of the screen.\" \/>\u00a0<figcaption>One of the easiest ways of adding new blocks to a post or a page is by using the \u201c+\u201d button near the top-left corner of the screen.<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<h2 id=\"removing-block\">Removing a Block<\/h2>\n<p>The option to remove a block is not as discoverable, but it is still just a few clicks away:<\/p>\n<ol>\n<li>First, select the block that you wish to remove.<\/li>\n<li>Then, click on the three dots at the end of the <em>Block Toolbar<\/em>.<\/li>\n<li>And finally, choose the last available option which should be <strong>Remove block<\/strong>.<\/li>\n<\/ol>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/06\/learning-gutenberg-the-basics-5.gif\" alt=\"The option to remove a block is hidden in the Block Toolbar.\" \/>\u00a0<figcaption>The option to remove a block is hidden in the Block Toolbar.<\/figcaption><\/figure>\n<p>And just like that, your block is removed.<\/p>\n<blockquote class=\"yellow\"><p><strong>Warning:<\/strong><\/p>\n<p>Be careful with the removal option as there is no message asking you to confirm your choice.<\/p><\/blockquote>\n<blockquote class=\"green\"><p><strong>Tip:<\/strong><\/p>\n<p>If you happen to remove a block by accident, you can use the <em>Undo<\/em> button from the main toolbar to revert your changes. You can also use <code>Ctrl+Z<\/code> on Windows\/Linux or <code>Cmd+Z<\/code> on Mac to undo the deletion.<\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h2 id=\"working-with-text\">Working With Text<\/h2>\n<p>Text-related blocks like paragraphs and headings are some of the most widely used blocks, so it\u2019s a good idea to learn how to use those first. And it\u2019s really easy &#8211; as soon as you add your preferred block, your cursor will focus on it automatically and you can start typing right away.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/06\/learning-gutenberg-the-basics-6.gif\" alt=\"The paragraph block is displayed at the top of the list as it is the most widely used block.\" \/>\u00a0<figcaption>The paragraph block is displayed at the top of the list as it is the most widely used block.<\/figcaption><\/figure>\n<blockquote class=\"green\"><p><strong>Tip:<\/strong><\/p>\n<p>There is an even faster way to create a new paragraph block. Have you noticed the <code>Start writing or type \/ to choose a block<\/code> text? If you click on that text and start writing, Gutenberg will create a paragraph block for you automatically.<\/p><\/blockquote>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/06\/learning-gutenberg-the-basics-7.jpg\" alt=\"When you start simply typing in the content area, the WordPress Block Editor will automatically create a new paragraph block for you.\" \/>\u00a0<figcaption>When you start simply typing in the content area, the WordPress Block Editor will automatically create a new paragraph block for you.<\/figcaption><\/figure>\n<p>To add a second paragraph to your post or page, simply repeat the steps you took to add your first one. Namely, click on the \u201c+\u201d button, choose the paragraph block, and start typing:<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/06\/learning-gutenberg-the-basics-8.gif\" alt=\"Adding blocks in Gutenberg is easy and straightforward.\" \/>\u00a0<figcaption>Adding blocks in Gutenberg is easy and straightforward.<\/figcaption><\/figure>\n<blockquote class=\"green\"><p><strong>Tip:<\/strong><\/p>\n<p>If you have just finished working on a paragraph block and wish to create a new paragraph, then simply make sure that your text cursor is at the end of the paragraph block. Then, simply press <code>Enter<\/code> and a new paragraph block will be created for you automatically.<\/p><\/blockquote>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/06\/learning-gutenberg-the-basics-9.gif\" alt=\"Pressing Enter when you are at the end of a paragraph block would automatically create a new paragraph block for you to work with.\" \/>\u00a0<figcaption>Pressing Enter when you are at the end of a paragraph block would automatically create a new paragraph block for you to work with.<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<h2 id=\"inserting-images\">Inserting an Image Into Your Post<\/h2>\n<p>Images can greatly enhance the quality of your posts, so it\u2019s important to know how to insert pictures, photos, and other graphics.<\/p>\n<p>As you might imagine, Gutenberg allows you to work with images using an <strong>Image block<\/strong>. You can add a new Image block by clicking on the \u201c+\u201d button in the top left corner:<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/06\/learning-gutenberg-the-basics-10.gif\" alt=\"Image blocks can be added easily using the WordPress Block Editor.\" \/>\u00a0<figcaption>Image blocks can be added easily using the WordPress Block Editor.<\/figcaption><\/figure>\n<p>Once you have added an Image block to your post, you need to specify the image that you wish to use there. The simplest way to do so is to just drag an image from your desktop and drop it into the Image block itself:<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/06\/learning-gutenberg-the-basics-11.gif\" alt=\"The WordPress Block Editor allows you to drag and drop images.\" \/>\u00a0<figcaption>The WordPress Block Editor allows you to drag and drop images.<\/figcaption><\/figure>\n<p>Of course, you can also use your WordPress Media Library to choose your image. To do so, click on the <em>Media Library<\/em> button and choose your preferred image.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/06\/learning-gutenberg-the-basics-12.gif\" alt=\"Image blocks fully support your WordPress Media Library.\" \/>\u00a0<figcaption>Image blocks fully support your WordPress Media Library.<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<h2>Publishing Your First Post<\/h2>\n<p>Once you have finished making your post, it is time to publish. If you have used the classic post editor in the past, you\u2019ll be glad to read that the publishing process remains pretty much the same with Gutenberg. To publish your post, you need to:<\/p>\n<ol>\n<li>Click on the <strong>Publish<\/strong> button in the top-right of the screen.<\/li>\n<li>A short checklist of settings and suggestions will appear. It is recommended to quickly go through those.<\/li>\n<li>Once you have gone through the suggestions presented by the WordPress Block Editor, click on the <strong>Publish<\/strong> button one more time.<\/li>\n<\/ol>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/06\/learning-gutenberg-the-basics-13.gif\" alt=\"Publishing a new post involves just two clicks.\" \/>\u00a0<figcaption>Publishing a new post involves just two clicks.<\/figcaption><\/figure>\n<p>Once your post is successfully published, you will see a screen similar to the one shown below:<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/06\/learning-gutenberg-the-basics-14.jpg\" alt=\"WordPress will provide you with a small notification in the lower-left corner every time you successfully publish or update your post.\" \/>\u00a0<figcaption>WordPress will provide you with a small notification in the lower-left corner every time you successfully publish or update your post.<\/figcaption><\/figure>\n<p>Note the small notification in the lower-left corner. You can click on the link there to open your live post.<\/p>\n<blockquote class=\"green\"><p><strong>Tip:<\/strong><\/p>\n<p>If you are new to WordPress and wish to learn how to properly publish your posts, you can check our tutorial on post\/page publishing for additional information.<\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h2 id=\"post-updating\">Updating an Existing Post<\/h2>\n<p>You\u2019ll want to update your published posts sooner or later, either because of an issue you have found or because you wish to add more content. Thankfully, updating your live posts is quick and easy with Gutenberg. To update a post:<\/p>\n<ol>\n<li>Open the post in the WordPress Block Editor.<\/li>\n<li>Make your edits.<\/li>\n<li>Click on the <strong>Update<\/strong> button in the top right corner of the screen.<\/li>\n<\/ol>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/06\/learning-gutenberg-the-basics-15.gif\" alt=\"Updating posts in Gutenberg is a 1-click process, just like it was with the classic editor.\" \/>\u00a0<figcaption>Updating posts in Gutenberg is a 1-click process, just like it was with the classic editor.<\/figcaption><\/figure>\n<p>And that\u2019s it! Your post will be updated and you\u2019ll see a small notification in the bottom left corner of the screen letting you know that your update was carried out successfully.<\/p>\n<p>&nbsp;<\/p>\n<h2 id=\"next-steps\">Next Steps<\/h2>\n<p>Overall, the WordPress Block Editor strikes a nice balance between functionality and ease of use. All common actions are easily accessible while more advanced features are never more than a few clicks away.<\/p>\n<p>Using the information in this tutorial, you should be able to start publishing with Gutenberg right away. Of course, there is a lot more to learn about Gutenberg blocks and the Block Editor in general. If you want to further enhance your knowledge, we recommend going through our tutorials on how to work with Gutenberg blocks, exploring the WordPress Block Editor interface, and customizing and extending the WordPress Block Editor.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This crash course on Gutenberg, the WordPress Block Editor, will show you how to use blocks to construct and publish your first post.<\/p>\n","protected":false},"author":7,"featured_media":49799,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[90],"tags":[],"class_list":["post-49790","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Gutenberg Tutorial: The Basics of the WordPress Block Editor<\/title>\n<meta name=\"description\" content=\"This crash course on Gutenberg, the WordPress Block Editor, will show you how to use blocks to construct and publish your first post.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-the-basics\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gutenberg Tutorial: The Basics of the WordPress Block Editor\" \/>\n<meta property=\"og:description\" content=\"This crash course on Gutenberg, the WordPress Block Editor, will show you how to use blocks to construct and publish your first post.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-the-basics\/\" \/>\n<meta property=\"og:site_name\" content=\"AwardSpace.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/AwardSpace\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-16T07:45:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-18T10:41:51+00:00\" \/>\n<meta name=\"author\" content=\"iskrend\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@awspace\" \/>\n<meta name=\"twitter:site\" content=\"@awspace\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"iskrend\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-the-basics\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-the-basics\/\"},\"author\":{\"name\":\"iskrend\",\"@id\":\"https:\/\/www.awardspace.com\/#\/schema\/person\/964cd1bbc68d83dc446a9ea98ebc7232\"},\"headline\":\"Gutenberg Tutorial: The Basics of the WordPress Block Editor\",\"datePublished\":\"2021-06-16T07:45:26+00:00\",\"dateModified\":\"2024-10-18T10:41:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-the-basics\/\"},\"wordCount\":1707,\"publisher\":{\"@id\":\"https:\/\/www.awardspace.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-the-basics\/#primaryimage\"},\"thumbnailUrl\":\"\",\"articleSection\":[\"Gutenberg\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-the-basics\/\",\"url\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-the-basics\/\",\"name\":\"Gutenberg Tutorial: The Basics of the WordPress Block Editor\",\"isPartOf\":{\"@id\":\"https:\/\/www.awardspace.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-the-basics\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-the-basics\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2021-06-16T07:45:26+00:00\",\"dateModified\":\"2024-10-18T10:41:51+00:00\",\"description\":\"This crash course on Gutenberg, the WordPress Block Editor, will show you how to use blocks to construct and publish your first post.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-the-basics\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-the-basics\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-the-basics\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-the-basics\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.awardspace.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Tutorials\",\"item\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Gutenberg\",\"item\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/gutenberg\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Gutenberg Tutorial: The Basics of the WordPress Block Editor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.awardspace.com\/#website\",\"url\":\"https:\/\/www.awardspace.com\/\",\"name\":\"AwardSpace.com\",\"description\":\"Free Web Hosting with PHP, MySQL, Email Sending, No Ads\",\"publisher\":{\"@id\":\"https:\/\/www.awardspace.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.awardspace.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.awardspace.com\/#organization\",\"name\":\"AwardSpace.com\",\"url\":\"https:\/\/www.awardspace.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.awardspace.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.awardspace.com\/wp-content\/uploads\/2018\/08\/awardspace_logo.png\",\"contentUrl\":\"https:\/\/www.awardspace.com\/wp-content\/uploads\/2018\/08\/awardspace_logo.png\",\"width\":1759,\"height\":176,\"caption\":\"AwardSpace.com\"},\"image\":{\"@id\":\"https:\/\/www.awardspace.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/AwardSpace\/\",\"https:\/\/x.com\/awspace\",\"https:\/\/www.instagram.com\/awardspace\/\",\"https:\/\/www.quora.com\/profile\/Award-Space\",\"https:\/\/www.linkedin.com\/company\/19214384\/\",\"https:\/\/www.reddit.com\/user\/AwardSpace\",\"https:\/\/www.pinterest.com\/awardspace\/\",\"https:\/\/www.youtube.com\/user\/AwardspaceWebHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.awardspace.com\/#\/schema\/person\/964cd1bbc68d83dc446a9ea98ebc7232\",\"name\":\"iskrend\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.awardspace.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1864832146466465ced4d8985737e772d6277dea9324c4cf6f23019419bf3047?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1864832146466465ced4d8985737e772d6277dea9324c4cf6f23019419bf3047?s=96&d=mm&r=g\",\"caption\":\"iskrend\"},\"url\":\"https:\/\/www.awardspace.com\/author\/iskrend\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Gutenberg Tutorial: The Basics of the WordPress Block Editor","description":"This crash course on Gutenberg, the WordPress Block Editor, will show you how to use blocks to construct and publish your first post.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-the-basics\/","og_locale":"en_US","og_type":"article","og_title":"Gutenberg Tutorial: The Basics of the WordPress Block Editor","og_description":"This crash course on Gutenberg, the WordPress Block Editor, will show you how to use blocks to construct and publish your first post.","og_url":"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-the-basics\/","og_site_name":"AwardSpace.com","article_publisher":"https:\/\/www.facebook.com\/AwardSpace\/","article_published_time":"2021-06-16T07:45:26+00:00","article_modified_time":"2024-10-18T10:41:51+00:00","author":"iskrend","twitter_card":"summary_large_image","twitter_creator":"@awspace","twitter_site":"@awspace","twitter_misc":{"Written by":"iskrend","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-the-basics\/#article","isPartOf":{"@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-the-basics\/"},"author":{"name":"iskrend","@id":"https:\/\/www.awardspace.com\/#\/schema\/person\/964cd1bbc68d83dc446a9ea98ebc7232"},"headline":"Gutenberg Tutorial: The Basics of the WordPress Block Editor","datePublished":"2021-06-16T07:45:26+00:00","dateModified":"2024-10-18T10:41:51+00:00","mainEntityOfPage":{"@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-the-basics\/"},"wordCount":1707,"publisher":{"@id":"https:\/\/www.awardspace.com\/#organization"},"image":{"@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-the-basics\/#primaryimage"},"thumbnailUrl":"","articleSection":["Gutenberg"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-the-basics\/","url":"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-the-basics\/","name":"Gutenberg Tutorial: The Basics of the WordPress Block Editor","isPartOf":{"@id":"https:\/\/www.awardspace.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-the-basics\/#primaryimage"},"image":{"@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-the-basics\/#primaryimage"},"thumbnailUrl":"","datePublished":"2021-06-16T07:45:26+00:00","dateModified":"2024-10-18T10:41:51+00:00","description":"This crash course on Gutenberg, the WordPress Block Editor, will show you how to use blocks to construct and publish your first post.","breadcrumb":{"@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-the-basics\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-the-basics\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-the-basics\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/wordpress-block-editor-the-basics\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.awardspace.com\/"},{"@type":"ListItem","position":2,"name":"WordPress Tutorials","item":"https:\/\/www.awardspace.com\/wordpress-tutorials\/"},{"@type":"ListItem","position":3,"name":"Gutenberg","item":"https:\/\/www.awardspace.com\/wordpress-tutorials\/gutenberg\/"},{"@type":"ListItem","position":4,"name":"Gutenberg Tutorial: The Basics of the WordPress Block Editor"}]},{"@type":"WebSite","@id":"https:\/\/www.awardspace.com\/#website","url":"https:\/\/www.awardspace.com\/","name":"AwardSpace.com","description":"Free Web Hosting with PHP, MySQL, Email Sending, No Ads","publisher":{"@id":"https:\/\/www.awardspace.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.awardspace.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.awardspace.com\/#organization","name":"AwardSpace.com","url":"https:\/\/www.awardspace.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.awardspace.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.awardspace.com\/wp-content\/uploads\/2018\/08\/awardspace_logo.png","contentUrl":"https:\/\/www.awardspace.com\/wp-content\/uploads\/2018\/08\/awardspace_logo.png","width":1759,"height":176,"caption":"AwardSpace.com"},"image":{"@id":"https:\/\/www.awardspace.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/AwardSpace\/","https:\/\/x.com\/awspace","https:\/\/www.instagram.com\/awardspace\/","https:\/\/www.quora.com\/profile\/Award-Space","https:\/\/www.linkedin.com\/company\/19214384\/","https:\/\/www.reddit.com\/user\/AwardSpace","https:\/\/www.pinterest.com\/awardspace\/","https:\/\/www.youtube.com\/user\/AwardspaceWebHosting"]},{"@type":"Person","@id":"https:\/\/www.awardspace.com\/#\/schema\/person\/964cd1bbc68d83dc446a9ea98ebc7232","name":"iskrend","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.awardspace.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1864832146466465ced4d8985737e772d6277dea9324c4cf6f23019419bf3047?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1864832146466465ced4d8985737e772d6277dea9324c4cf6f23019419bf3047?s=96&d=mm&r=g","caption":"iskrend"},"url":"https:\/\/www.awardspace.com\/author\/iskrend\/"}]}},"_links":{"self":[{"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/posts\/49790","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/comments?post=49790"}],"version-history":[{"count":1,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/posts\/49790\/revisions"}],"predecessor-version":[{"id":75736,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/posts\/49790\/revisions\/75736"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.awardspace.com\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/media?parent=49790"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/categories?post=49790"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/tags?post=49790"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}