{"id":21456,"date":"2019-03-20T10:25:30","date_gmt":"2019-03-20T08:25:30","guid":{"rendered":"https:\/\/themeisle.com\/blog\/?p=21456"},"modified":"2026-05-22T14:34:20","modified_gmt":"2026-05-22T11:34:20","slug":"wordpress-block-editor","status":"publish","type":"post","link":"https:\/\/themeisle.com\/blog\/wordpress-block-editor\/","title":{"rendered":"WordPress Gutenberg Tutorial: Learn the WordPress Block Editor"},"content":{"rendered":"\n<p>If you&#8217;ve been using WordPress for a while now, you&#8217;re probably already familiar with the WordPress Block Editor (also known as the Gutenberg Editor). It&#8217;s a powerful tool and an intuitive system. However, it does have room for growth if you use the right tools and don&#8217;t mind making a few tweaks &#8211; which is exactly what we&#8217;re going to teach you in this WordPress Gutenberg tutorial.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>To get the most out of the Block Editor, you&#8217;ll first want to install a reputable block theme that supports Full Site Editing, or FSE for short (more on this in a moment). This will allow you to unlock the full capabilities of the Gutenberg system, which has evolved quite a bit, even from only a year ago.<\/p>\n\n\n\n<div class=\"wp-block-group ticss-6daa8bdf has-background\" style=\"background-color:#edf7fa\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p><strong>Quick start with Gutenberg:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Choose a block theme that supports Full Site Editing.<\/li>\n\n\n\n<li>Open a page or post in the WordPress Block Editor.<\/li>\n\n\n\n<li>Use the plus <strong>+<\/strong> inserter to add blocks and build your layout.<\/li>\n\n\n\n<li>Add columns when you want more control over page structure.<\/li>\n\n\n\n<li>Use patterns to insert pre-built sections and customize them.<\/li>\n\n\n\n<li>Install extra block plugins only if you need more elements or templates.<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Once you have that locked in, you&#8217;ll want to learn the basics. This means how to add blocks and columns (and remove them), and how to use block patterns to save yourself a lot of time.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n\t\t<div class='ti-tweet-clear'><\/div>\n\t\t\t<div class='ti-tweet_wrapper'>\n\t\t    \t<div class='ti-tweet_text'>\n\t\t    \t\t<a href='https:\/\/twitter.com\/share?text=Learn+how+to+use+the+%23WordPress+%F0%9F%A7%B1+Block+Editor+effectively+%F0%9F%8F%97%EF%B8%8F&via=themeisle&related=themeisle&url=https:\/\/themeisle.com\/blog\/wordpress-block-editor\/' target='_blank' rel='nofollow'>Learn how to use the #WordPress \ud83e\uddf1 Block Editor effectively \ud83c\udfd7\ufe0f<\/a>\n\t\t    \t<\/div>\n\t\t    \t<div class='ti-tweet_sharebtn'>\n\t\t    \t<a href='https:\/\/twitter.com\/share?text=Learn+how+to+use+the+%23WordPress+%F0%9F%A7%B1+Block+Editor+effectively+%F0%9F%8F%97%EF%B8%8F&via=themeisle&related=themeisle&url=https:\/\/themeisle.com\/blog\/wordpress-block-editor\/' target='_blank' rel='nofollow'>Click To Tweet \n\t\t    \t\t<span><\/span>\n\t\t    \t<\/a>\n\t\t    <\/div>\n\t\t<\/div>\n<\/div>\n<\/div>\n\n\n\n<p>In this article, we&#8217;re going to teach you how to do all of the above, broken down as follows:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#choose-a-wordpress-block-theme\">Choose a WordPress block theme<\/a><\/li>\n\n\n\n<li><a href=\"#how-to-use-wordpress-block-editor\">Learn how to use the WordPress Block Editor<\/a><\/li>\n\n\n\n<li><a href=\"#gutenberg-plugins\">Add Gutenberg plugins to expand the WordPress Block Editor<\/a><\/li>\n<\/ul>\n\n\n\n<p>Let&#8217;s talk blocks!<\/p>\n\n\n<div class=\"su-divider su-divider-style-dotted\" style=\"margin:40px 0;border-width:1px;border-color:#999999\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"choose-a-wordpress-block-theme\">Choose a WordPress block theme \ud83d\udd0d<\/h2>\n\n\n\n<p>Before you start using the WordPress Block Editor, you&#8217;ll want to make sure your theme plays nicely with it. While the Block Editor works with any theme at a basic level, having a <a href=\"https:\/\/themeisle.com\/blog\/wordpress-block-themes\/\">block theme with built-in compatibility<\/a>, which now also includes <a href=\"https:\/\/themeisle.com\/blog\/wordpress-full-site-editing\/\">Full Site Editing (FSE)<\/a>, lets you take advantage of all of its functionality.<\/p>\n\n\n\n<p>If you want a suggestion, we recommend <a href=\"https:\/\/wordpress.org\/themes\/raft\/\" target=\"_blank\" rel=\"noopener\">Raft<\/a>, which is a popular block theme in the WordPress repository. It also happens to be the brainchild of our very own talented developers here at Themeisle, so aside from the public validation, we can also vouch for its awesomeness with confidence.<\/p>\n\n\n<div class=\"wp-pic-wrapper aligncenter large\" style=\"margin:20px 0;\"><div class=\"wp-pic large theme wp-pic-ajax scheme2\"  id=\"wp-pic-raft\"data-type=\"theme\" data-slug=\"raft\" data-image=\"\" data-expiration=\"60\"  data-layout=\"large\" data-slugs=\"[]\" ><div class=\"wp-pic-body-loading\"><div class=\"signal\"><\/div><\/div><\/div><\/div><!-- .wp-pic-wrapper--><link rel='stylesheet' id='dashicons-css' href='https:\/\/themeisle.com\/blog\/wp-includes\/css\/dashicons.min.css?ver=6.8.5' type='text\/css' media='all' \/>\n<link rel='stylesheet' id='wppic-style-css' href='https:\/\/themeisle.com\/blog\/wp-content\/plugins\/wp-plugin-info-card\/dist\/wppic-styles.css?ver=6.1.1' type='text\/css' media='all' \/>\n<script type=\"text\/javascript\" src=\"https:\/\/themeisle.com\/blog\/wp-includes\/js\/jquery\/jquery.min.js?ver=3.7.1\" id=\"jquery-core-js\"><\/script>\n<script type=\"text\/javascript\" src=\"https:\/\/themeisle.com\/blog\/wp-includes\/js\/jquery\/jquery-migrate.min.js?ver=3.4.1\" id=\"jquery-migrate-js\"><\/script>\n<script type=\"text\/javascript\" id=\"wppic-script-js-extra\">\n\/* <![CDATA[ *\/\nvar wppicAjax = {\"ajaxurl\":\"https:\\\/\\\/themeisle.com\\\/blog\\\/wp-admin\\\/admin-ajax.php\"};\n\/* ]]> *\/\n<\/script>\n<script type=\"text\/javascript\" src=\"https:\/\/themeisle.com\/blog\/wp-content\/plugins\/wp-plugin-info-card\/assets\/js\/wppic-script.min.js?ver=6.1.1\" id=\"wppic-script-js\"><\/script>\n\n\n\n\n<p>We&#8217;ll be using Raft for the remainder of this Block Editor tutorial.<\/p>\n\n\n<div class=\"su-divider su-divider-style-dotted\" style=\"margin:40px 0;border-width:1px;border-color:#999999\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-use-wordpress-block-editor\">How to use the Gutenberg editor in WordPress \ud83d\udd0d<\/h2>\n\n\n\n<p>So, as the name implies, the core of the WordPress Block Editor is built on the concept of a simple <a href=\"https:\/\/themeisle.com\/blog\/gutenberg-blocks-explained\/\">&#8220;block&#8221; system<\/a>. There&#8217;s quite a lot you can do with this system, but we&#8217;re going to start with the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#how-to-add-new-blocks\">How to add new blocks<\/a><\/li>\n\n\n\n<li><a href=\"#how-to-add-columns\">How to add columns<\/a><\/li>\n\n\n\n<li><a href=\"#how-to-delete-blocks\">How to delete blocks<\/a><\/li>\n\n\n\n<li><a href=\"#using-block-patterns\">Use block patterns to save time<\/a><\/li>\n<\/ul>\n\n\n<div class=\"su-divider su-divider-style-default\" style=\"margin:40px 0;border-width:15px;border-color:#4267cf\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-to-add-new-blocks\">Adding new Gutenberg blocks to the WordPress editor<\/h3>\n\n\n\n<p>Pages and posts are divided into rows, and you can place any block you want on each one. There are two main ways to do it and both are extremely easy to do.<\/p>\n\n\n\n<p>The first method to add a block is done by clicking the plus <strong>+<\/strong> sign on the top left of the screen. This automatically opens up a drop down sidebar menu, where you can either scroll through your available blocks, or use a search bar to type in the name of a specific block you have in mind:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\" id=\"wp-block-themeisle-blocks-image-18137331\"><img data-opt-id=1856624216  fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Block-Inserter-Button-in-the-WordPress-Interface.png\" alt=\"Block Inserter opened from the top-left plus button with blocks and search field visible\" class=\"wp-image-68047\"\/><\/figure><\/div>\n\n\n<p>The second method of adding a block is to click the plus <strong>+<\/strong> sign within the page or post itself. That will also open up a drop down menu, albeit a smaller one. It has a similar search bar so you can quickly find the block you&#8217;re looking for if you know the name.<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\" id=\"wp-block-themeisle-blocks-image-42981150\"><img data-opt-id=1488721569  fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Block-Inserter-from-Inside-the-Page-or-Post.png\" alt=\"Block Inserter Button from Inside the Page or Post\" class=\"wp-image-68048\"\/><\/figure><\/div>\n\n<div class=\"su-divider su-divider-style-default\" style=\"margin:40px 0;border-width:15px;border-color:#4267cf\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-to-add-columns\">Adding columns inside of the WordPress Block Editor<\/h3>\n\n\n\n<p>You can also use columns for better control of the location of each element:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\" id=\"wp-block-themeisle-blocks-image-f8be2ea4\"><img data-opt-id=1774998090  fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Searching-Columns-in-Block-Editor.png\" alt=\"Searching Columns in Block Editor\" class=\"wp-image-68049\"\/><\/figure><\/div>\n\n\n<p>Once you select the column block, you&#8217;ll be able to choose the layout split of your columns:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\" id=\"wp-block-themeisle-blocks-image-d1d1a5d4\"><img data-opt-id=1750993068  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Column-Layouts-in-Block-Editor.png\"  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Column-Layouts-in-Block-Editor.png\" alt=\"Choosing the layout of a column block inside the Block Editor\" class=\"wp-image-68053\"\/><noscript><img data-opt-id=1750993068  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Column-Layouts-in-Block-Editor.png\" alt=\"Choosing the layout of a column block inside the Block Editor\" class=\"wp-image-68053\"\/></noscript><\/figure><\/div>\n\n\n<p>From there it&#8217;s as intuitive and simple as adding the column block itself was. The two columns serve as containers for you to add whatever other blocks you want. Just click on the plus <strong>+<\/strong> sign inside the column:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\" id=\"wp-block-themeisle-blocks-image-4bbd0fc4\"><img data-opt-id=172388418  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Using-Block-Editor-Column-in-WordPress.png\"  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Using-Block-Editor-Column-in-WordPress.png\" alt=\"Adding a 50\/50 column block inside the WordPress Block Editor\" class=\"wp-image-68052\"\/><noscript><img data-opt-id=172388418  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Using-Block-Editor-Column-in-WordPress.png\" alt=\"Adding a 50\/50 column block inside the WordPress Block Editor\" class=\"wp-image-68052\"\/></noscript><\/figure><\/div>\n\n\n<p>Below is what a crude, unfinished layout looks like if you add a paragraph block to the left column, and an image block to the right column:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\" id=\"wp-block-themeisle-blocks-image-10c6c832\"><img data-opt-id=2079662515  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Block-Editor-Columns-with-Text-and-Image.png\"  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Block-Editor-Columns-with-Text-and-Image.png\" alt=\"Block Editor 50-50 Column Layout with Text and Image\" class=\"wp-image-68051\"\/><noscript><img data-opt-id=2079662515  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Block-Editor-Columns-with-Text-and-Image.png\" alt=\"Block Editor 50-50 Column Layout with Text and Image\" class=\"wp-image-68051\"\/></noscript><\/figure><\/div>\n\n\n<p>Okay, let&#8217;s say we changed our mind and didn&#8217;t want an image block in the right column anymore and instead wanted to put a different block. How would we do that?<\/p>\n\n\n<div class=\"su-divider su-divider-style-default\" style=\"margin:40px 0;border-width:15px;border-color:#4267cf\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-to-delete-blocks\">Deleting blocks inside of the WordPress Block Editor<\/h3>\n\n\n\n<p>To remove any block, click on it to highlight it. Then click the three dots on the far right of the popup menu. This will open up another drop down menu. Scroll to the very bottom of it and the last option will always be to delete the given block. Note that it will say <strong>Remove + the specific name of the block<\/strong>:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\" id=\"wp-block-themeisle-blocks-image-3a1e88fb\"><img data-opt-id=514350725  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Delete-a-Single-Column-in-Block-Editor.png\"  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Delete-a-Single-Column-in-Block-Editor.png\" alt=\"Delete a block inside the WordPress Block Editor\" class=\"wp-image-68054\"\/><noscript><img data-opt-id=514350725  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Delete-a-Single-Column-in-Block-Editor.png\" alt=\"Delete a block inside the WordPress Block Editor\" class=\"wp-image-68054\"\/></noscript><\/figure><\/div>\n\n\n<p>What if we decide that we not only don&#8217;t like the image block, but we want to delete the entire 50\/50 column layout altogether.<\/p>\n\n\n\n<p>Do we have to delete every one of the blocks, one-by-one?<\/p>\n\n\n\n<p>Nope. We do not.<\/p>\n\n\n\n<p>The WordPress Block Editor already thought of that. You can delete an entire column layout with other blocks inside of the columns. There&#8217;s no need to fiddle around deleting individual blocks:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\" id=\"wp-block-themeisle-blocks-image-acb43f62\"><img data-opt-id=543878331  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Removing-Columns-in-Block-Editor.png\"  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Removing-Columns-in-Block-Editor.png\" alt=\"Delete a column layout inside the WordPress Block Editor\" class=\"wp-image-68055\"\/><noscript><img data-opt-id=543878331  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Removing-Columns-in-Block-Editor.png\" alt=\"Delete a column layout inside the WordPress Block Editor\" class=\"wp-image-68055\"\/></noscript><\/figure><\/div>\n\n\n<p>This block system should feel remarkably familiar if you&#8217;ve ever used <a href=\"https:\/\/themeisle.com\/blog\/wordpress-page-builders\/\">a page builder plugin<\/a>. The overall result is that the page-building experience is a lot more visual.<\/p>\n\n\n\n<p>To get the most out of the WordPress Block Editor, you&#8217;ll want to get acquainted with all of the default elements it includes. You have plenty of familiar options here, including lists, paragraphs, quotes, and more:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\" id=\"wp-block-themeisle-blocks-image-bf70ff87\"><img data-opt-id=327409777  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Different-Options-in-Block-Editor.png\"  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Different-Options-in-Block-Editor.png\" alt=\"Some of the Block Editor's common elements\" class=\"wp-image-68059\"\/><noscript><img data-opt-id=327409777  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Different-Options-in-Block-Editor.png\" alt=\"Some of the Block Editor's common elements\" class=\"wp-image-68059\"\/></noscript><\/figure><\/div>\n\n\n<p>In addition, you&#8217;ll want to explore another feature, which is an enormous time saver. That feature is referred to as <em>block patterns<\/em>, or just <em>patterns<\/em> for short, and it&#8217;s the next thing we&#8217;ll be covering in our Gutenberg tutorial.<\/p>\n\n\n<div class=\"su-divider su-divider-style-default\" style=\"margin:40px 0;border-width:15px;border-color:#4267cf\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"using-block-patterns\">How to use block patterns in the Gutenberg editor<\/h3>\n\n\n\n<p><a href=\"https:\/\/themeisle.com\/blog\/wordpress-block-patterns\/\">Block patterns<\/a> are essentially pre-built templates that you can insert into your pages or posts and then tweak to your liking. They typically include common sections that you&#8217;d find across a variety of websites.<\/p>\n\n\n\n<p>So things like testimonials, quotes, calls to action, pricing tables, team member bios, etc. Their appearance will often be influenced by the block theme that you&#8217;re using, but WordPress also lets you create your own patterns, reuse synced patterns, manage them in the Site Editor, and browse additional designs in the Block Pattern Directory. You can also use the Full Site Editor (FSE) to <a href=\"https:\/\/themeisle.com\/blog\/wordpress-template-editing\/\">edit these block pattern templates<\/a> or even make your own from scratch.<\/p>\n\n\n\n<p>Accessing them can also be done in more than one way.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Method one<\/h4>\n\n\n\n<p>Let&#8217;s revisit our column block example to demonstrate the first method. If you recall this image from earlier, you may have noticed that below the simple column block, there were some fancy column layouts:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\" id=\"wp-block-themeisle-blocks-image-bbc383e6\"><img data-opt-id=172631881  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Fancy-Columns-Layout-in-Block-Editor.png\"  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Fancy-Columns-Layout-in-Block-Editor.png\" alt=\"Column block patterns inside the Block Editor\" class=\"wp-image-68056\"\/><noscript><img data-opt-id=172631881  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Fancy-Columns-Layout-in-Block-Editor.png\" alt=\"Column block patterns inside the Block Editor\" class=\"wp-image-68056\"\/></noscript><\/figure><\/div>\n\n\n<p>These layouts are actually pre-built block patterns that come with the Raft theme.<\/p>\n\n\n\n<p>If you click on <strong>Browse All<\/strong>, it&#8217;ll open up a sidebar menu that will allow you to explore lots of different ones and insert them into your page or post with just a click:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\" id=\"wp-block-themeisle-blocks-image-95dc6be4\"><img data-opt-id=921105801  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Alternating-Feature-Columns-in-Block-Editor.png\"  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Alternating-Feature-Columns-in-Block-Editor.png\" alt=\"Using the Alternating Feature Columns in Block Editor\" class=\"wp-image-68050\"\/><noscript><img data-opt-id=921105801  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Alternating-Feature-Columns-in-Block-Editor.png\" alt=\"Using the Alternating Feature Columns in Block Editor\" class=\"wp-image-68050\"\/></noscript><\/figure><\/div>\n\n\n<p>If you didn&#8217;t notice already, all of the ones in the screenshot above have some form of column layout aspect to them. That&#8217;s because we accessed them by specifically searching for columns.<\/p>\n\n\n\n<p>But what if we&#8217;re interested in other block patterns that might not be in a column layout, or just browsing through the overall library of available patterns?<\/p>\n\n\n\n<p>Well, as with everything else inside the WordPress Block Editor, that too is very easy to do.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Method two<\/h4>\n\n\n\n<p>Let\u2019s do another round of time travel here and revisit the plus + sign at the top left of the page or post. If you recall, that was the very first thing we covered in this Gutenberg block tutorial. When we clicked on it earlier, we used it to add a new block to our page or post, but right next to the <strong>Blocks<\/strong> part of that drop down menu is another option &#8211; <strong>Patterns<\/strong>!<\/p>\n\n\n\n<p>Click <strong>Patterns<\/strong> and you&#8217;ll be transported to a whole new world:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\" id=\"wp-block-themeisle-blocks-image-26f4818c\"><img data-opt-id=612546690  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Patterns-in-Block-Editor.png\"  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Patterns-in-Block-Editor.png\" alt=\"Accessing block patterns inside the WordPress Block Editor\" class=\"wp-image-68057\"\/><noscript><img data-opt-id=612546690  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Patterns-in-Block-Editor.png\" alt=\"Accessing block patterns inside the WordPress Block Editor\" class=\"wp-image-68057\"\/></noscript><\/figure><\/div>\n\n\n<p>As you can see, even at quick glance, there are all sorts of categories to choose from. Some will come from your theme, some may come from plugins, and you can also save your own patterns for reuse. Overall, having access to these patterns is a game changer. Instead of spending an hour (or more) building your own CTA from scratch, you can just browse through the Call to Action block patterns and pick one that you like. Then customize it a little bit and you&#8217;re ready to go.<\/p>\n\n\n\n<p>Feel free to browse through the block patterns at your leisure. Once you feel comfortable with the general concepts you&#8217;ve learned thus far in the tutorial, you can throw some additional elements into the mix via Gutenberg plugins.<\/p>\n\n\n<div class=\"su-divider su-divider-style-dotted\" style=\"margin:40px 0;border-width:1px;border-color:#999999\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"gutenberg-plugins\">Best Gutenberg block plugins to add new blocks to the WordPress Editor \ud83d\udd0c<\/h2>\n\n\n\n<p>As soon as the Block Editor came onto the WordPress community&#8217;s radar, it didn&#8217;t take long for developers to start tinkering with it &#8211; and that was quite a while ago at this point. In practice, this means that there are plenty of plugins you can use to add new blocks to the default Block Editor choices.<\/p>\n\n\n\n<p>Since we&#8217;ve already covered a lot of ground in this Gutenberg editor tutorial, we&#8217;re not going to share a comprehensive list of every useful block plugin, but below are three of the standouts that we think are worthy of your attention:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Ultimate Blocks<\/h3>\n\n\n<div class=\"wp-pic-wrapper align-center large\" style=\"margin:20px 0;\"><div class=\"wp-pic large plugin wp-pic-ajax scheme2\"  id=\"wp-pic-ultimate-blocks\"data-type=\"plugin\" data-slug=\"ultimate-blocks\" data-image=\"\" data-expiration=\"\"  data-layout=\"large\" data-slugs=\"[]\" ><div class=\"wp-pic-body-loading\"><div class=\"signal\"><\/div><\/div><\/div><\/div><!-- .wp-pic-wrapper-->\n\n\n\n<p>Ultimate Blocks is one of the most popular Gutenberg plugins for adding new blocks to the WordPress Block Editor. It currently provides 36 blocks, including a call to action, testimonial, and click-to-tweet block.<\/p>\n\n\n\n<p>It&#8217;s super easy to use this plugin. Once you&#8217;ve installed and activated Ultimate Blocks, open up a new post or page with the Block Editor. Click on the plus <strong>+<\/strong> sign to add a new block, type &#8220;ultimate&#8221; into the search bar, and hit <strong>Browse all<\/strong>. You should now see all the new blocks in the left-hand menu:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\" id=\"wp-block-themeisle-blocks-image-e4265d49\"><img data-opt-id=1685731152  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Ultimate-Blocks-in-Block-Editor.png\"  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Ultimate-Blocks-in-Block-Editor.png\" alt=\"Ultimate Blocks extends the WordPress Block Editor\" class=\"wp-image-62581\"\/><noscript><img data-opt-id=1685731152  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Ultimate-Blocks-in-Block-Editor.png\" alt=\"Ultimate Blocks extends the WordPress Block Editor\" class=\"wp-image-62581\"\/></noscript><\/figure><\/div>\n\n\n<p>Simply click on the block you want to use, and it will be added to the page. Then, you can drag it into position and adjust its settings. Here&#8217;s what an Ultimate Blocks table of contents looks like in action:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\" id=\"wp-block-themeisle-blocks-image-9e289252\"><img data-opt-id=1684492130  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Table-of-Contents-by-Ultimate-Blocks.png\"  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Table-of-Contents-by-Ultimate-Blocks.png\" alt=\"Ultimate Blocks table of contents\" class=\"wp-image-62582\"\/><noscript><img data-opt-id=1684492130  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Table-of-Contents-by-Ultimate-Blocks.png\" alt=\"Ultimate Blocks table of contents\" class=\"wp-image-62582\"\/></noscript><\/figure><\/div>\n\n\n<p>By heading to <em>Ultimate Blocks<\/em> in your WordPress dashboard, you can also choose to enable or disable particular blocks by toggling them on or off:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\" id=\"wp-block-themeisle-blocks-image-08705781\"><img data-opt-id=1147278893  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Ultimate-Blocks-Settings.png\"  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Ultimate-Blocks-Settings.png\" alt=\"Ultimate Blocks settings screen with block enable\/disable toggles\" class=\"wp-image-62583\"\/><noscript><img data-opt-id=1147278893  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Ultimate-Blocks-Settings.png\" alt=\"Ultimate Blocks settings screen with block enable\/disable toggles\" class=\"wp-image-62583\"\/></noscript><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\"><strong>Key<\/strong> Features:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Choose from 36 different blocks, including a content filter, progress bar, and social sharing buttons.<\/li>\n\n\n\n<li>Toggle blocks on and off to declutter your editing interface.<\/li>\n<\/ul>\n\n\n<div class=\"su-divider su-divider-style-default\" style=\"margin:40px 0;border-width:15px;border-color:#4267cf\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">2. Otter Blocks<\/h3>\n\n\n<div class=\"wp-pic-wrapper align-center large\" style=\"margin:20px 0;\"><div class=\"wp-pic large plugin wp-pic-ajax scheme2\"  id=\"wp-pic-otter-blocks\"data-type=\"plugin\" data-slug=\"otter-blocks\" data-image=\"\" data-expiration=\"\"  data-layout=\"large\" data-slugs=\"[]\" ><div class=\"wp-pic-body-loading\"><div class=\"signal\"><\/div><\/div><\/div><\/div><!-- .wp-pic-wrapper-->\n\n\n\n<p>Otter Blocks is our plugin that adds new blocks for you to play with, as well as premade templates built with the WordPress Block Editor that you can easily import into your site.<\/p>\n\n\n\n<p>If you end up using the Raft theme, which is what we&#8217;ve used throughout this tutorial, then you&#8217;ll already have it bundled in because the theme prompts you to install it as part of the set up.<\/p>\n\n\n\n<p>If you decide to use a different block theme, you can still take advantage of Otter Blocks by installing it and activating it like any other plugin. You can then start using the blocks from the new <em>Otter<\/em> section in the <strong>Add Block<\/strong> interface:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\" id=\"wp-block-themeisle-blocks-image-418c6b56\"><img data-opt-id=1150581804  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Otter-Blocks-Interface-Inside-Gutenberg-Editor.png\"  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Otter-Blocks-Interface-Inside-Gutenberg-Editor.png\" alt=\"Otter Blocks extends the WordPress Block Editor\" class=\"wp-image-68058\"\/><noscript><img data-opt-id=1150581804  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Otter-Blocks-Interface-Inside-Gutenberg-Editor.png\" alt=\"Otter Blocks extends the WordPress Block Editor\" class=\"wp-image-68058\"\/></noscript><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\">Key Features:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Provides 17 blocks for the WordPress Block Editor, including options such as image sliders, accordions, and maps.<\/li>\n\n\n\n<li>Includes Gutenberg-compatible templates that you can insert right from the Block Editor.<\/li>\n<\/ul>\n\n\n<div class=\"su-divider su-divider-style-default\" style=\"margin:40px 0;border-width:15px;border-color:#4267cf\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">3. Stackable<\/h3>\n\n\n<div class=\"wp-pic-wrapper align-center large\" style=\"margin:20px 0;\"><div class=\"wp-pic large plugin wp-pic-ajax scheme2\"  id=\"wp-pic-stackable-ultimate-gutenberg-blocks\"data-type=\"plugin\" data-slug=\"stackable-ultimate-gutenberg-blocks\" data-image=\"\" data-expiration=\"\"  data-layout=\"large\" data-slugs=\"[]\" ><div class=\"wp-pic-body-loading\"><div class=\"signal\"><\/div><\/div><\/div><\/div><!-- .wp-pic-wrapper-->\n\n\n\n<p>Stackable currently provides 75 blocks to the WordPress Editor, making it a strong choice if you want a lot of new elements to play with. Among those blocks, you have several simple options, such as buttons, dividers, and containers:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\" id=\"wp-block-themeisle-blocks-image-e3765c31\"><img data-opt-id=969735164  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Stackable-Blocks-inside-Block-Editor.png\"  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Stackable-Blocks-inside-Block-Editor.png\" alt=\"Stackable blocks extends the WordPress Block Editor\" class=\"wp-image-21466\"\/><noscript><img data-opt-id=969735164  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Stackable-Blocks-inside-Block-Editor.png\" alt=\"Stackable blocks extends the WordPress Block Editor\" class=\"wp-image-21466\"\/></noscript><\/figure><\/div>\n\n\n<p>However, Stackable also offers more advanced blocks to play with. Some of our favorites include <strong>Team Member<\/strong> and <strong>Pricing Box<\/strong> sections:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\" id=\"wp-block-themeisle-blocks-image-eeadf4cd\"><img data-opt-id=270444932  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Stackable-Pricing-Box.png\"  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Stackable-Pricing-Box.png\" alt=\"Configuring Stackable Pricing Box\" class=\"wp-image-21467\"\/><noscript><img data-opt-id=270444932  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Stackable-Pricing-Box.png\" alt=\"Configuring Stackable Pricing Box\" class=\"wp-image-21467\"\/></noscript><\/figure><\/div>\n\n\n<p>It&#8217;s also worth noting that Stackable enables you to pick and choose which blocks you want to add to the editor. This means you can remove options you don&#8217;t need, and makes finding relevant blocks easier.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Key Features:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Adds 75 block options to the WordPress Block Editor.<\/li>\n\n\n\n<li>Enables you to customize each block using a wealth of options.<\/li>\n\n\n\n<li>Lets you enable and disable blocks from the editor.<\/li>\n<\/ul>\n\n\n<div class=\"su-note\"  style=\"border-color:#e2e2e2;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;\"><div class=\"su-note-inner su-u-clearfix su-u-trim\" style=\"background-color:#fcfcfc;border-color:#ffffff;color:#333333;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;\">\n\ud83d\udca1 Check out our <a href=\"https:\/\/themeisle.com\/blog\/best-block-plugins-for-wordpress\/\">full list of the best block plugins<\/a> for even more ways you can expand the Gutenberg editor.<br \/>\n<\/div><\/div>\n\n\n\n<div class=\"su-divider su-divider-style-dotted\" style=\"margin:40px 0;border-width:1px;border-color:#999999\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">How to create custom blocks (one handy plugin to help you get started) \ud83c\udfd7\ufe0f<\/h2>\n\n\n\n<p>When it comes to creating new blocks, you can either take the <a href=\"https:\/\/deliciousbrains.com\/custom-gutenberg-block\/\" target=\"_blank\" rel=\"noopener\">manual approach<\/a> or use plugins. The former gives you more control but does require some <a href=\"https:\/\/themeisle.com\/blog\/how-to-become-a-wordpress-developer\/\">development experience<\/a>.<\/p>\n\n\n\n<p>However, it&#8217;s the latter we&#8217;ll discuss now. This section will focus on a tool that enables you to put together simple custom blocks with ease!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Lazy Blocks<\/h3>\n\n\n<div class=\"wp-pic-wrapper align-center large\" style=\"margin:20px 0;\"><div class=\"wp-pic large plugin wp-pic-ajax scheme2\"  id=\"wp-pic-lazy-blocks\"data-type=\"plugin\" data-slug=\"lazy-blocks\" data-image=\"\" data-expiration=\"\"  data-layout=\"large\" data-slugs=\"[]\" ><div class=\"wp-pic-body-loading\"><div class=\"signal\"><\/div><\/div><\/div><\/div><!-- .wp-pic-wrapper-->\n\n\n\n<p>When you boil it down, blocks are basically collections of custom fields. The difference lies in what fields and types of values you use for each block.<\/p>\n\n\n\n<p>With Lazy Blocks, you can put together custom blocks using predetermined fields and arrange them in practically any order you want:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\" id=\"wp-block-themeisle-blocks-image-3cc944a2\"><img data-opt-id=763193397  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Lazy-Blocks-Controls.png\"  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Lazy-Blocks-Controls.png\" alt=\"Lazy Blocks editor with options to configure controls\" class=\"wp-image-21472\"\/><noscript><img data-opt-id=763193397  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Lazy-Blocks-Controls.png\" alt=\"Lazy Blocks editor with options to configure controls\" class=\"wp-image-21472\"\/></noscript><\/figure><\/div>\n\n\n<p>The primary difference here is that Lazy Blocks enables you to modify your block&#8217;s template from within the dashboard, so you don&#8217;t have to use a text editor:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\" id=\"wp-block-themeisle-blocks-image-14e73d8b\"><img data-opt-id=996058471  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Lazy-Blocks-HTML-Editor.png\"  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Lazy-Blocks-HTML-Editor.png\" alt=\"Lazy Blocks HTML Editor for fully customized blocks\" class=\"wp-image-21474\"\/><noscript><img data-opt-id=996058471  decoding=\"async\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/04\/Lazy-Blocks-HTML-Editor.png\" alt=\"Lazy Blocks HTML Editor for fully customized blocks\" class=\"wp-image-21474\"\/></noscript><\/figure><\/div>\n\n\n<p>However, you will need some knowledge of basic HTML. We also recommend checking out <a href=\"https:\/\/themeisle.com\/blog\/adding-html-to-wordpress\/\">our guide to adding HTML to WordPress<\/a> for more guidance!<\/p>\n\n\n<div class=\"su-divider su-divider-style-dotted\" style=\"margin:40px 0;border-width:1px;border-color:#999999\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Final thoughts on the WordPress Block Editor \u231b<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Hopefully after reading through this WordPress Block Editor tutorial you now have a good idea on how to use Gutenberg. It&#8217;s a significant change from the <a href=\"https:\/\/themeisle.com\/blog\/previous-wordpress-editor\/\">&#8216;classic&#8217; way of doing things<\/a>. However, this brings a lot of exciting opportunities.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n\t\t<div class='ti-tweet-clear'><\/div>\n\t\t\t<div class='ti-tweet_wrapper'>\n\t\t    \t<div class='ti-tweet_text'>\n\t\t    \t\t<a href='https:\/\/twitter.com\/share?text=Learn+how+to+use+the+%23WordPress+%F0%9F%A7%B1+Block+Editor+more+effectively+by+adding+new+blocks+to+fit+your...&via=themeisle&related=themeisle&url=https:\/\/themeisle.com\/blog\/wordpress-block-editor\/' target='_blank' rel='nofollow'>Learn how to use the #WordPress \ud83e\uddf1 Block Editor more effectively by adding new blocks to fit your...<\/a>\n\t\t    \t<\/div>\n\t\t    \t<div class='ti-tweet_sharebtn'>\n\t\t    \t<a href='https:\/\/twitter.com\/share?text=Learn+how+to+use+the+%23WordPress+%F0%9F%A7%B1+Block+Editor+more+effectively+by+adding+new+blocks+to+fit+your...&via=themeisle&related=themeisle&url=https:\/\/themeisle.com\/blog\/wordpress-block-editor\/' target='_blank' rel='nofollow'>Click To Tweet \n\t\t    \t\t<span><\/span>\n\t\t    \t<\/a>\n\t\t    <\/div>\n\t\t<\/div>\n<\/div>\n<\/div>\n\n\n\n<p>The block system is pretty easy to use, and the selection of elements it includes out of the box is nothing to scoff at. If you use a well-built block theme like <a href=\"https:\/\/wordpress.org\/themes\/raft\/\" target=\"_blank\" rel=\"noopener\">Raft<\/a> to go with it, then you&#8217;ll have plenty to keep you busy.<\/p>\n\n\n\n<p>If you want to get even more out of the WordPress Block Editor, you can always add additional features to it by using Gutenberg plugins such as <a href=\"https:\/\/wordpress.org\/plugins\/ultimate-blocks\/\" target=\"_blank\" rel=\"noopener\">Ultimate Blocks<\/a>, <a href=\"https:\/\/wordpress.org\/plugins\/stackable-ultimate-gutenberg-blocks\/\" target=\"_blank\" rel=\"noopener\">Stackable<\/a>, and <a href=\"https:\/\/wordpress.org\/plugins\/otter-blocks\/\" target=\"_blank\" rel=\"noopener\">Otter Blocks.<\/a><\/p>\n\n\n\n<p>If you&#8217;re up for it, you can even create custom blocks with tools such as <a href=\"https:\/\/wordpress.org\/plugins\/lazy-blocks\/\" target=\"_blank\" rel=\"noopener\">Lazy Blocks<\/a>.<\/p>\n\n\n\n<p><strong>Quick summary:<\/strong> choose a compatible block theme, learn the inserter, columns, and patterns first, and then expand the editor with plugins only when you need more specialized blocks or templates.<\/p>\n\n\n\n<p><em><strong>Was this Gutenberg WordPress tutorial helpful? Do you have any questions? Let&#8217;s talk about them in the comments section below!<\/strong><\/em><\/p>\n\n\n<style>.ticss-d144f107 strong{font-weight: 700;\n    letter-spacing: -0.2px;\n    line-height: 1.2;\n    display: inline-block;}<\/style>\n\n\n<div class=\"wp-block-columns speed-guide has-white-color has-text-color has-background has-link-color wp-elements-2f81f6c5526477b5b4d52d1ca4513949 is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#4267cf\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:40%\">\n<figure class=\"wp-block-image size-medium\"><img data-opt-id=30701221  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:300\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png\"  decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:300\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png\" alt=\"speed guide\" class=\"wp-image-113040\" old-srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:300\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:1024\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:150\/h:150\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 150w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:768\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:50\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:240\/h:240\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 240w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:397\/h:397\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 397w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:600\/h:600\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 600w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:148\/h:148\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 148w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:195\/h:195\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 195w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:135\/h:135\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 135w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1080\/h:1080\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1080\/h:1080\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 2x\" \/><noscript><img data-opt-id=30701221  decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:300\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png\" alt=\"speed guide\" class=\"wp-image-113040\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:300\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:1024\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:150\/h:150\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 150w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:768\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:50\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:240\/h:240\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 240w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:397\/h:397\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 397w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:600\/h:600\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 600w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:148\/h:148\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 148w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:195\/h:195\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 195w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:135\/h:135\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 135w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1080\/h:1080\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1080\/h:1080\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 2x\" sizes=\"(max-width: 300px) 100vw, 300px\" \/></noscript><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-align-center ticss-58e79f2f\" style=\"font-size:14px\"><strong>FREE GUIDE<\/strong><\/p>\n\n\n\n<p class=\"ticss-d144f107\" style=\"font-size:25px\"><strong>4 Essential Steps to Speed Up Your&nbsp;WordPress Website<\/strong><\/p>\n\n\n\n<p class=\"ticss-3b627beb\">Follow the simple steps in our 4-part mini series and reduce your loading times by 50-80%.&nbsp;\ud83d\ude80<\/p>\n\n\n<p><div class=\"frm_forms  with_frm_style frm_style_themeisle\" id=\"frm_form_4_container\" data-token=\"e771b1edb4a025552098cca149add870\">\n<form enctype=\"multipart\/form-data\" method=\"post\" class=\"frm-show-form  frm_pro_form \" id=\"form_site-speed-guide-below-post\" data-token=\"e771b1edb4a025552098cca149add870\">\n<div class=\"frm_form_fields \">\n<fieldset>\n<legend class=\"frm_screen_reader\">Site Speed Guide - Below Post<\/legend>\r\n\r\n<div class=\"frm_fields_container\">\n<input type=\"hidden\" name=\"frm_action\" value=\"create\" \/>\n<input type=\"hidden\" name=\"form_id\" value=\"4\" \/>\n<input type=\"hidden\" name=\"frm_hide_fields_4\" id=\"frm_hide_fields_4\" value=\"\" \/>\n<input type=\"hidden\" name=\"form_key\" value=\"site-speed-guide-below-post\" \/>\n<input type=\"hidden\" name=\"item_meta[0]\" value=\"\" \/>\n<input type=\"hidden\" id=\"frm_submit_entry_4\" name=\"frm_submit_entry_4\" value=\"68715c375d\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/blog\/wp-json\/wp\/v2\/posts\/21456\" \/><input type=\"hidden\" name=\"item_meta[18]\" id=\"field_6px6q2\" value=\"\/blog\/wp-json\/wp\/v2\/posts\/21456\"  data-frmval=\"\/blog\/wp-json\/wp\/v2\/posts\/21456\"   \/>\n<div id=\"frm_field_15_container\" class=\"frm_form_field form-field  frm_required_field frm_none_container\">\r\n\t<label for=\"field_6px6q\" id=\"field_6px6q_label\" class=\"frm_primary_label\">Your Email\r\n\t\t<span class=\"frm_required\" aria-hidden=\"true\">*<\/span>\r\n\t<\/label>\r\n\t<input type=\"email\" id=\"field_6px6q\" name=\"item_meta[15]\" value=\"\"  autocomplete=\"email\"  placeholder=\"your@email.com\" data-reqmsg=\"Your Email cannot be blank.\" aria-required=\"true\" data-invmsg=\"Your Email is invalid\" aria-invalid=\"false\"  \/>\r\n\t\r\n\t\r\n<\/div>\n<div id=\"frm_field_17_container\" class=\"frm_form_field form-field  frm_none_container vertical_radio\">\r\n\t<div  id=\"field_6px6q3_label\" class=\"frm_primary_label\">Subscribe to our newsletter\r\n\t\t<span class=\"frm_required\" aria-hidden=\"true\"><\/span>\r\n\t<\/div>\r\n\t<div class=\"frm_opt_container\" aria-labelledby=\"field_6px6q3_label\" role=\"group\">\t\t<div class=\"frm_checkbox\" id=\"frm_checkbox_17-0\">\t\t\t<label  for=\"field_6px6q3-0\">\n\t\t\t<input type=\"checkbox\" name=\"item_meta[17][]\" id=\"field_6px6q3-0\" value=\"true\"  data-invmsg=\"Subscribe to our newsletter is invalid\" aria-invalid=\"false\"   \/> Subscribe to our newsletter<\/label><\/div>\n<\/div>\r\n\t\r\n\t\r\n<\/div>\n<div id=\"frm_field_14_container\" class=\"frm_form_field form-field \">\r\n\t<div class=\"frm_submit frm_flex\">\r\n<button class=\"frm_button_submit frm_final_submit\" type=\"submit\"   formnovalidate=\"formnovalidate\">FREE ACCESS<\/button>\r\n\r\n\r\n\r\n<\/div>\r\n<\/div>\n\t<input type=\"hidden\" name=\"item_key\" value=\"\" \/>\n\t\t\t<div id=\"frm_field_24_container\">\n\t\t\t<label for=\"field_d7xw1\" >\n\t\t\t\tIf you are human, leave this field blank.\t\t\t<\/label>\n\t\t\t<input  id=\"field_d7xw1\" type=\"text\" class=\"frm_form_field form-field frm_verify\" name=\"item_meta[24]\" value=\"\"  \/>\n\t\t<\/div>\n\t\t<input name=\"frm_state\" type=\"hidden\" value=\"tGKtIG19U6wyYcew8uBttVCu1OCYLf3c4q\/m5\/IkjtQwF9M0QAXa6pd1+Qu8+H8p\" \/><\/div>\n<\/fieldset>\n<\/div>\n\n<p style=\"display: none !important;\" class=\"akismet-fields-container\" data-prefix=\"ak_\"><label>&#916;<textarea name=\"ak_hp_textarea\" cols=\"45\" rows=\"8\" maxlength=\"100\"><\/textarea><\/label><input type=\"hidden\" id=\"ak_js_1\" name=\"ak_js\" value=\"230\"\/><script>document.getElementById( \"ak_js_1\" ).setAttribute( \"value\", ( new Date() ).getTime() );<\/script><\/p><\/form>\n<\/div>\n<\/p>\n<\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"If you&#8217;ve been using WordPress for a while now, you&#8217;re probably already familiar with the WordPress Block Editor (also known as the Gutenberg Editor). It&#8217;s a powerful tool and an intuitive system. However, it does have room for growth if you use the right tools and don&#8217;t mind making a few tweaks &#8211; which is&#8230;","protected":false},"author":14,"featured_media":22256,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_stopmodifiedupdate":false,"_modified_date":"","_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[26,13],"tags":[],"hashtags":[],"class_list":["post-21456","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","category-wordpress-plugins"],"wppr_data":{"cwp_meta_box_check":"No"},"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.8 (Yoast SEO v26.1.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WordPress Gutenberg Tutorial: Learn the WordPress Block Editor<\/title>\n<meta name=\"description\" content=\"In this WordPress Gutenberg tutorial you&#039;ll learn how to use the WordPress Block Editor, including blocks, columns, patterns and plugins.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/themeisle.com\/blog\/wordpress-block-editor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WordPress Gutenberg Tutorial: Learn the WordPress Block Editor\" \/>\n<meta property=\"og:description\" content=\"In this WordPress Gutenberg tutorial you&#039;ll learn how to use the WordPress Block Editor, including blocks, columns, patterns and plugins.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/themeisle.com\/blog\/wordpress-block-editor\/\" \/>\n<meta property=\"og:site_name\" content=\"Themeisle Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-20T08:25:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-22T11:34:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2019\/03\/wordpress-block-editor.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2180\" \/>\n\t<meta property=\"og:image:height\" content=\"1090\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"John Hughes\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"John Hughes\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/themeisle.com\/blog\/wordpress-block-editor\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/themeisle.com\/blog\/wordpress-block-editor\/\"},\"author\":{\"name\":\"John Hughes\",\"@id\":\"https:\/\/themeisle.com\/blog\/#\/schema\/person\/0f080762cdcc47aee80f11536fe87242\"},\"headline\":\"WordPress Gutenberg Tutorial: Learn the WordPress Block Editor\",\"datePublished\":\"2019-03-20T08:25:30+00:00\",\"dateModified\":\"2026-05-22T11:34:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/themeisle.com\/blog\/wordpress-block-editor\/\"},\"wordCount\":2678,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/themeisle.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/themeisle.com\/blog\/wordpress-block-editor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2019\/03\/wordpress-block-editor.jpg\",\"articleSection\":[\"WordPress\",\"WordPress Plugins\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/themeisle.com\/blog\/wordpress-block-editor\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/themeisle.com\/blog\/wordpress-block-editor\/\",\"url\":\"https:\/\/themeisle.com\/blog\/wordpress-block-editor\/\",\"name\":\"WordPress Gutenberg Tutorial: Learn the WordPress Block Editor\",\"isPartOf\":{\"@id\":\"https:\/\/themeisle.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/themeisle.com\/blog\/wordpress-block-editor\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/themeisle.com\/blog\/wordpress-block-editor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2019\/03\/wordpress-block-editor.jpg\",\"datePublished\":\"2019-03-20T08:25:30+00:00\",\"dateModified\":\"2026-05-22T11:34:20+00:00\",\"description\":\"In this WordPress Gutenberg tutorial you\\\\'ll learn how to use the WordPress Block Editor, including blocks, columns, patterns and plugins.\",\"breadcrumb\":{\"@id\":\"https:\/\/themeisle.com\/blog\/wordpress-block-editor\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/themeisle.com\/blog\/wordpress-block-editor\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/themeisle.com\/blog\/wordpress-block-editor\/#primaryimage\",\"url\":\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2019\/03\/wordpress-block-editor.jpg\",\"contentUrl\":\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2019\/03\/wordpress-block-editor.jpg\",\"width\":2180,\"height\":1090,\"caption\":\"WordPress block editor\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/themeisle.com\/blog\/wordpress-block-editor\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/themeisle.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Gutenberg Tutorial: Learn the WordPress Block Editor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/themeisle.com\/blog\/#website\",\"url\":\"https:\/\/themeisle.com\/blog\/\",\"name\":\"Themeisle Blog\",\"description\":\"WordPress Tutorials and Reviews for Beginners and Advanced\",\"publisher\":{\"@id\":\"https:\/\/themeisle.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/themeisle.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/themeisle.com\/blog\/#organization\",\"name\":\"VertiStudio\",\"alternateName\":\"Vertigo Studio SA\",\"url\":\"https:\/\/themeisle.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/themeisle.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/02\/VertiStudio_logo1.png\",\"contentUrl\":\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/02\/VertiStudio_logo1.png\",\"width\":718,\"height\":156,\"caption\":\"VertiStudio\"},\"image\":{\"@id\":\"https:\/\/themeisle.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/themeisle.com\/blog\/#\/schema\/person\/0f080762cdcc47aee80f11536fe87242\",\"name\":\"John Hughes\",\"description\":\"John is a self-taught WordPress designer and developer. He has been working with the CMS for over a decade, and has experience operating as a freelancer and as part of an agency. He\u2019s dabbled in everything from accessible design to website security. Plus, he has extensive knowledge of online business topics like affiliate marketing.\",\"sameAs\":[\"http:\/\/wordcandy.co\"],\"url\":\"https:\/\/themeisle.com\/blog\/author\/john-h\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"WordPress Gutenberg Tutorial: Learn the WordPress Block Editor","description":"In this WordPress Gutenberg tutorial you&#039;ll learn how to use the WordPress Block Editor, including blocks, columns, patterns and plugins.","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:\/\/themeisle.com\/blog\/wordpress-block-editor\/","og_locale":"en_US","og_type":"article","og_title":"WordPress Gutenberg Tutorial: Learn the WordPress Block Editor","og_description":"In this WordPress Gutenberg tutorial you&#039;ll learn how to use the WordPress Block Editor, including blocks, columns, patterns and plugins.","og_url":"https:\/\/themeisle.com\/blog\/wordpress-block-editor\/","og_site_name":"Themeisle Blog","article_published_time":"2019-03-20T08:25:30+00:00","article_modified_time":"2026-05-22T11:34:20+00:00","og_image":[{"width":2180,"height":1090,"url":"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2019\/03\/wordpress-block-editor.jpg","type":"image\/jpeg"}],"author":"John Hughes","twitter_card":"summary_large_image","twitter_misc":{"Written by":"John Hughes","Est. reading time":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/themeisle.com\/blog\/wordpress-block-editor\/#article","isPartOf":{"@id":"https:\/\/themeisle.com\/blog\/wordpress-block-editor\/"},"author":{"name":"John Hughes","@id":"https:\/\/themeisle.com\/blog\/#\/schema\/person\/0f080762cdcc47aee80f11536fe87242"},"headline":"WordPress Gutenberg Tutorial: Learn the WordPress Block Editor","datePublished":"2019-03-20T08:25:30+00:00","dateModified":"2026-05-22T11:34:20+00:00","mainEntityOfPage":{"@id":"https:\/\/themeisle.com\/blog\/wordpress-block-editor\/"},"wordCount":2678,"commentCount":0,"publisher":{"@id":"https:\/\/themeisle.com\/blog\/#organization"},"image":{"@id":"https:\/\/themeisle.com\/blog\/wordpress-block-editor\/#primaryimage"},"thumbnailUrl":"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2019\/03\/wordpress-block-editor.jpg","articleSection":["WordPress","WordPress Plugins"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/themeisle.com\/blog\/wordpress-block-editor\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/themeisle.com\/blog\/wordpress-block-editor\/","url":"https:\/\/themeisle.com\/blog\/wordpress-block-editor\/","name":"WordPress Gutenberg Tutorial: Learn the WordPress Block Editor","isPartOf":{"@id":"https:\/\/themeisle.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/themeisle.com\/blog\/wordpress-block-editor\/#primaryimage"},"image":{"@id":"https:\/\/themeisle.com\/blog\/wordpress-block-editor\/#primaryimage"},"thumbnailUrl":"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2019\/03\/wordpress-block-editor.jpg","datePublished":"2019-03-20T08:25:30+00:00","dateModified":"2026-05-22T11:34:20+00:00","description":"In this WordPress Gutenberg tutorial you\\'ll learn how to use the WordPress Block Editor, including blocks, columns, patterns and plugins.","breadcrumb":{"@id":"https:\/\/themeisle.com\/blog\/wordpress-block-editor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/themeisle.com\/blog\/wordpress-block-editor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/themeisle.com\/blog\/wordpress-block-editor\/#primaryimage","url":"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2019\/03\/wordpress-block-editor.jpg","contentUrl":"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2019\/03\/wordpress-block-editor.jpg","width":2180,"height":1090,"caption":"WordPress block editor"},{"@type":"BreadcrumbList","@id":"https:\/\/themeisle.com\/blog\/wordpress-block-editor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/themeisle.com\/blog\/"},{"@type":"ListItem","position":2,"name":"WordPress Gutenberg Tutorial: Learn the WordPress Block Editor"}]},{"@type":"WebSite","@id":"https:\/\/themeisle.com\/blog\/#website","url":"https:\/\/themeisle.com\/blog\/","name":"Themeisle Blog","description":"WordPress Tutorials and Reviews for Beginners and Advanced","publisher":{"@id":"https:\/\/themeisle.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/themeisle.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/themeisle.com\/blog\/#organization","name":"VertiStudio","alternateName":"Vertigo Studio SA","url":"https:\/\/themeisle.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/themeisle.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/02\/VertiStudio_logo1.png","contentUrl":"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/02\/VertiStudio_logo1.png","width":718,"height":156,"caption":"VertiStudio"},"image":{"@id":"https:\/\/themeisle.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/themeisle.com\/blog\/#\/schema\/person\/0f080762cdcc47aee80f11536fe87242","name":"John Hughes","description":"John is a self-taught WordPress designer and developer. He has been working with the CMS for over a decade, and has experience operating as a freelancer and as part of an agency. He\u2019s dabbled in everything from accessible design to website security. Plus, he has extensive knowledge of online business topics like affiliate marketing.","sameAs":["http:\/\/wordcandy.co"],"url":"https:\/\/themeisle.com\/blog\/author\/john-h\/"}]}},"_links":{"self":[{"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/posts\/21456","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/comments?post=21456"}],"version-history":[{"count":26,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/posts\/21456\/revisions"}],"predecessor-version":[{"id":116118,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/posts\/21456\/revisions\/116118"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/media\/22256"}],"wp:attachment":[{"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/media?parent=21456"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/categories?post=21456"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/tags?post=21456"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/hashtags?post=21456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}