{"id":2820,"date":"2020-04-08T08:12:59","date_gmt":"2020-04-08T08:12:59","guid":{"rendered":"https:\/\/www.amritsardigitalacademy.in\/blog\/?p=2820"},"modified":"2020-04-08T08:13:00","modified_gmt":"2020-04-08T08:13:00","slug":"wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/www.amritsardigitalacademy.in\/blog\/wordpress-gutenberg\/","title":{"rendered":"How To Use WordPress Gutenberg Editor&#8217;s Blocks To Beautify Content?"},"content":{"rendered":"\n<p class=\"has-medium-font-size justify\">The WordPress Gutenberg Editor is a surprise package for you\u2026<\/p>\n\n\n\n<p class=\"has-medium-font-size justify\">Yes, you will LEARN something new!<\/p>\n\n\n\n<p class=\"has-medium-font-size justify\">The Good News?<\/p>\n\n\n\n<p class=\"has-medium-font-size justify\">In this step by step tutorial, we will show you everything you need to know and You\u2019ll be able to reach the ground blogging \ud83d\ude09<\/p>\n\n\n\n<h2 class=\"has-text-color wp-block-heading\" style=\"color:#0000a0\"><strong><em>What is Gutenberg <strong>WordPress<\/strong>?<\/em><\/strong><\/h2>\n\n\n\n<p class=\"has-medium-font-size justify\">WordPress Gutenberg blocks editor is the most used Editor with its latest WordPress version 5.0.<\/p>\n\n\n\n<p class=\"has-medium-font-size justify\">The new editor overtakes many editors!<\/p>\n\n\n\n<p class=\"has-medium-font-size justify\">The whole editing criteria has changed from a text area where you can add images and videos, to be an entirely modular interface full of blocks that you can combine together to build designs on your blog posts or landing pages.<\/p>\n\n\n\n<h3 class=\"has-very-dark-gray-color has-text-color wp-block-heading\"><strong>\u27aa Old WordPress<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/old-wp.png\" alt=\"Old WordPress\" class=\"wp-image-2854\" width=\"800\" height=\"400\" \/><\/figure>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"has-very-dark-gray-color has-text-color wp-block-heading\"><strong>\u27aa New WordPress<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/New-wp.png\" alt=\"New WordPress Gutenberg\" class=\"wp-image-2855\" width=\"800\" height=\"400\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p><em>The fact is, there are ample of minor changes, the overall experience will be almost similar to what you\u2019re familiar with.<\/em><\/p><\/blockquote>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\" \/>\n\n\n\n<h2 class=\"has-text-color wp-block-heading\" style=\"color:#0000a0\"><strong><em>Why WordPress Gutenberg is Now a Great Way to Build Websites?<\/em><\/strong><\/h2>\n\n\n\n<p class=\"has-medium-font-size justify\">Do you know Gutenberg WordPress was launched last year and mature enough to build the exact website that you had planned? <\/p>\n\n\n\n<p class=\"has-medium-font-size justify\">Gutenberg editor uses blocks to build your web pages. Blocks are entities that contain different types of content so that you can create your structures.<\/p>\n\n\n\n<h2 class=\"has-text-color wp-block-heading\" style=\"color:#0000a0\"><em><strong>Will WordPress Gutenberg Work With My Current Theme?<\/strong><\/em><\/h2>\n\n\n\n<p class=\"has-medium-font-size justify\">Gutenberg WordPress editor has <strong>designed <\/strong>to work with\u00a0all\u00a0themes and all plugins!<\/p>\n\n\n\n<p class=\"has-medium-font-size justify\">Luckily, theme creators have been updating their themes to not only be compatible but also optimized for Gutenberg blocks.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Here&#8217;s a List of All the Gutenberg WordPress Blocks You Can Use in a Blog Post:<\/strong><\/h3>\n\n\n\n<p class=\"has-medium-font-size justify\"><strong><em>Note<\/em><\/strong>: If you are an average blogger then this WordPress Gutenberg Editor is only 4-5 blocks you need to know about, and they all are very simple.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>\u21b1<\/strong> Paragraph block<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>\u21b1<\/strong> Headline block<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>\u21b1<\/strong> Image block<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>\u21b1<\/strong> Quote block<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>\u21b1<\/strong> Embed block (YouTube videos, etc)<br><\/p>\n\n\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2873 size-full\" src=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/list-of-blocks-in-wordpress.png\" alt=\"Overview Of WordPress Gutenberg\" width=\"904\" height=\"670\" srcset=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/list-of-blocks-in-wordpress.png 904w, https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/list-of-blocks-in-wordpress-300x222.png 300w, https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/list-of-blocks-in-wordpress-768x569.png 768w, https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/list-of-blocks-in-wordpress-136x102.png 136w\" sizes=\"(max-width: 904px) 100vw, 904px\" \/><\/p>\n\n\n<p class=\"has-medium-font-size\"><strong><em>\u27a4 Text blocks:<\/em><\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>\u21b1<\/strong> Paragraphs<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>\u21b1<\/strong> Lists<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>\u21b1<\/strong> Headings<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>\u21b1<\/strong> Subheads<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>\u21b1<\/strong> Quotes<\/p>\n\n\n\n<hr class=\"wp-block-separator is-style-dots\" \/>\n\n\n\n<p class=\"has-medium-font-size\"><strong><em>\u27a4 Media blocks:<\/em><\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>\u21b1<\/strong> Images<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>\u21b1<\/strong> Cover Images<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>\u21b1<\/strong> Image Galleries<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>\u21b1<\/strong> Audio<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>\u21b1<\/strong> Videos<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>\u21b1<\/strong> Embeds<\/p>\n\n\n\n<hr class=\"wp-block-separator is-style-dots\" \/>\n\n\n\n<p class=\"has-medium-font-size\"><em><strong>\u27a4 Code blocks:<\/strong><\/em><\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>\u21b1<\/strong> Custom HTML<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>\u21b1<\/strong> Code (for\u00a0<em>displaying\u00a0<\/em>code)<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>\u21b1<\/strong> Pre-formatted<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>\u21b1<\/strong> Shortcodes<\/p>\n\n\n\n<hr class=\"wp-block-separator is-style-dots\" \/>\n\n\n\n<p class=\"has-medium-font-size\"><strong><em>\u27a4 Layout blocks:<\/em><\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>\u21b1<\/strong> Columns<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong><strong>\u21b1<\/strong><\/strong> Page Breaks<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>\u21b1<\/strong> Separators<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>\u21b1<\/strong> Spacers<\/p>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\" \/>\n\n\n\n<h2 class=\"has-text-color wp-block-heading\" style=\"color:#0000a0\"><strong><em>Build Your First WordPress <strong><em>Gutenberg<\/em><\/strong><\/em><\/strong> <strong><em>Project<\/em><\/strong><\/h2>\n\n\n\n<p class=\"has-medium-font-size justify\"><em>Ready?<\/em><\/p>\n\n\n\n<p class=\"has-medium-font-size justify\"><em>Let assume<\/em> that you are using <a href=\"https:\/\/www.amritsardigitalacademy.in\/blog\/best-word-press-plugins-for-a-successful-website\/\">WordPress Gutenberg Plugin<\/a> 5.0 and the new block editor i.e Gutenberg. Below, I will show you how you can use the new WordPress Gutenberg block editor to make a complete page layout.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Get Started With Video Gutenberg Tutorial<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Getting Started With Gutenberg WordPress Tutorial - You Might Just Like It!\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/P8eIe_Pjjp0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>A Quick Tour To WordPress Gutenberg Block Editor Platform<\/strong><\/h3>\n\n\n\n<p class=\"has-medium-font-size justify\">Before you start adding new blocks, let\u2019s have look on  Gutenberg WordPress elements of the main block editor interface:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/wordpress-elements.png\" alt=\"wordpress elements\" class=\"wp-image-2837\" width=\"800\" height=\"400\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>How to Add a Block in WordPress Gutenberg?<\/strong><\/h4>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p>The very first block of every post is the title.<\/p><\/blockquote>\n\n\n\n<p class=\"has-medium-font-size justify\"><strong>\u27a4<\/strong> After that, click on the tab key on your keyboard which will automatically create a paragraph block. Moreover, you can click the&nbsp;<strong>+Plus<\/strong>&nbsp;icon and select the type of content you want to add.<\/p>\n\n\n\n<p class=\"has-medium-font-size justify\">You can also change the text size in text settings on the right side by selecting a particular paragraph block:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>\u21b1<\/strong> Default<\/p><p><strong>\u21b1<\/strong> Small<\/p><p><strong>\u21b1<\/strong> Normal<\/p><p><strong>\u21b1<\/strong> Medium<\/p><p><strong>\u21b1<\/strong> Large<\/p><p><strong>\u21b1<\/strong> Huge<\/p><p><strong>\u21b1<\/strong> Custom<\/p><\/blockquote>\n\n\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2838 size-full\" src=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/paragraph-block.gif\" alt=\"Wordpress paragraph block\" width=\"1307\" height=\"754\" \/><\/p>\n\n\n<p class=\"has-medium-font-size justify\"><em><strong>To save your time, you can also create blocks by simply writing this syntax:<\/strong><\/em><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p>\/<em>BLOCK-NAME<\/em><\/p><p>It will show you an auto-suggest box that will help you to find the required block.<\/p><\/blockquote>\n\n\n\n<p class=\"has-medium-font-size justify\">\u27a4 In the above example, I showed you how you can add a paragraph block. But Gutenberg contains multifarious blocks, divided into different sections:<\/p>\n\n\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2840 size-full\" src=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/blocks.gif\" alt=\"Mostly Used WordPress Elements\" width=\"692\" height=\"411\" \/><\/p>\n\n\n<p class=\"has-medium-font-size justify\">\u27a4 Firstly, at the top, you will see a list of your&nbsp;<strong>Most Used<\/strong>&nbsp;blocks. When you scroll down, you will find sections for Common Blocks, Formatting, Layout Elements, Widgets, and Embeds:<\/p>\n\n\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2839 size-full\" src=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/section-block.gif\" alt=\"Wordpress Gutenberg Widgets\" width=\"691\" height=\"415\" \/><\/p>\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>\u21b1 Inline Elements&nbsp;<\/strong>\u2013 It contains one block for an inline-image.<\/p><p><strong>\u21b1 Common Blocks<\/strong>&nbsp;\u2013 contains basic blocks like images, paragraphs, headings, quotes, many more.<\/p><p><strong>\u21b1 Formatting&nbsp;<\/strong>\u2013 you can add more formatted content like pull quotes, tables, or other.<\/p><p><strong>\u21b1 Layout Elements<\/strong>\u2013 let you divide the text into two columns, include buttons and separators.<\/p><p><strong>\u21b1 Widgets&nbsp;<\/strong>\u2013 One can add shortcodes, latest posts, or categories. <\/p><p><strong>\u21b1 Embeds&nbsp;<\/strong>\u2013 help you embed content from sources like Twitter, YouTube, Facebook, Instagram, etc<\/p><p><strong>\u21b1 Reusable&nbsp;<\/strong>\u2013  you can store groups of blocks as a reusable layout.<\/p><\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Building a Basic Layout With WordPress Gutenberg<\/strong><\/h4>\n\n\n\n<p class=\"has-medium-font-size justify\">Let\u2019s suppose, you want to make a basic blog post layout that includes:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>\u21b1<\/strong> Regular text<\/p><p><strong>\u21b1<\/strong> An image<\/p><p><strong>\u21b1<\/strong> A quote<\/p><p><strong>\u21b1<\/strong> A YouTube video<\/p><\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Adding the Non-Text Blocks<\/strong><\/h4>\n\n\n\n<p class=\"has-medium-font-size justify\">\u27a4Your content is separated into blocks, now you can hover over the area where you want to insert your image. Click the&nbsp;<strong>plus<\/strong>&nbsp;icon to insert the image block:<\/p>\n\n\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2841 size-full\" src=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/non-text-block.gif\" alt=\"Gutenber upload image\" width=\"1307\" height=\"754\" \/><\/p>\n\n\n<p class=\"has-medium-font-size justify\">\u27a4This process will allow you to insert an image block, from where you can easily upload images in a similar manner:<\/p>\n\n\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2842 size-full\" src=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/insert-image.gif\" alt=\"Wordpress gutenberg\" width=\"692\" height=\"365\" \/><\/p>\n\n\n<p class=\"has-medium-font-size justify\">\u27a4Once you choose your image, you will see it right there in your page layout:<\/p>\n\n\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2843 size-full\" src=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/upload.gif\" alt=\"Upload image\" width=\"692\" height=\"409\" \/><\/p>\n\n\n<p class=\"has-medium-font-size justify\">\u27a4After that, hover over the area where you want to add the pull quote. You can search for \u201cquote block\u201d or go to the Common Blocks section:<\/p>\n\n\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2845 size-full\" src=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/hover2.gif\" alt=\"Wordpress gutenberg quote\" width=\"1307\" height=\"754\" \/><\/p>\n\n\n<p class=\"has-medium-font-size justify\">\u27a4Then, you will see the quote block. To create your quote, you need to click into the quote block and type:<\/p>\n\n\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2846 size-full\" src=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/quote.gif\" alt=\"Wordpress gutenberg quote style\" width=\"1307\" height=\"754\" \/><\/p>\n\n\n<p class=\"has-medium-font-size justify\">\u27a4To insert a video, you need to add a new block for youtube video from the&nbsp;<strong>Embeds<\/strong>&nbsp;tab. To insert a video, all you have to do is enter the video URL and click&nbsp;<strong>Embed<\/strong>:<\/p>\n\n\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2847 size-full\" src=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/insert-video.gif\" alt=\"Gutenberg wordpress embeds\" width=\"1307\" height=\"862\" \/><\/p>\n\n\n<p class=\"has-medium-font-size justify\">\u27a4Once you\u2019re finished, click the&nbsp;<strong>Publish<\/strong>&nbsp;button:<\/p>\n\n\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2848 size-full\" src=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/publish.gif\" alt=\"Publish WordPress Gutenberg site\" width=\"692\" height=\"317\" \/><\/p>\n\n\n<p class=\"has-medium-font-size justify\">\u27a4Finally, you will get your formatted blog post on the front-end.<\/p>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\" \/>\n\n\n\n<h2 class=\"has-text-color wp-block-heading\" style=\"color:#0000a0\"><strong><em>How To\u00a0Create\u00a0A\u00a0Gallery In WordPress?<\/em><\/strong><\/h2>\n\n\n\n<p class=\"has-medium-font-size justify\">\u27a4 Click on the +plus button and select Gallery from the given options. After that, select all the images you want to choose for your gallery and finally, click on Create a new gallery in the bottom right corner.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/addgalleryblocktowordpress.png\" alt=\"Gallery WordPress Gutenberg\" class=\"wp-image-2908\" width=\"700\" srcset=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/addgalleryblocktowordpress.png 550w, https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/addgalleryblocktowordpress-300x200.png 300w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><em>Image Gallery Appearance In Gutenberg WordPress<\/em><\/strong><\/h3>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p>\u27a4 This gallery block is similar to the image block. <\/p><\/blockquote>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/galleryblock.jpg\" alt=\"WordPress Gutenberg image gallery\" class=\"wp-image-2901\" width=\"600\" srcset=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/galleryblock.jpg 550w, https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/galleryblock-300x172.jpg 300w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\" \/>\n\n\n\n<h2 class=\"has-text-color wp-block-heading\" style=\"color:#0000a0\"><em><strong>How To Add Cover Images In WordPress Blog<\/strong>?<\/em><\/h2>\n\n\n\n<p class=\"has-medium-font-size justify\">\u27a4 Find a cover block from the search bar and then upload the image you want to use. You can also drag and drop an image in the block area to upload a new cover image.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/add-cover-block-gutenberg.jpg\" alt=\"WordPress Gutenberg cover image\" class=\"wp-image-2907\" width=\"650\" height=\"400\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><em><strong>Cover Images Appearance In WordPress Blog<\/strong><\/em><\/h3>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p>\u27a4 It will look like this&#8230;<\/p><\/blockquote>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/coverimage.jpg\" alt=\"WordPress Gutenberg cover image apperance\" class=\"wp-image-2902\" width=\"650\" height=\"350\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\" \/>\n\n\n\n<h2 class=\"has-text-color wp-block-heading\" style=\"color:#0000a0\"><strong><em>How To Add YouTube, Twitter, Facebook, And Other Embeds?<\/em><\/strong><\/h2>\n\n\n\n<p class=\"has-medium-font-size justify\">\u27a4 Gutenberg launched a new embeds block in the WordPress. This block supports all kinds of embeds like YouTube, Twitter, Facebook, and more. Simply search embeds in the search box and you will get all the embeds.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/embedblocks.jpg\" alt=\"WordPress Gutenberg embeds videos\" class=\"wp-image-2903\" width=\"650\" height=\"400\" srcset=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/embedblocks.jpg 550w, https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/embedblocks-300x184.jpg 300w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\" \/>\n\n\n\n<h2 class=\"has-text-color wp-block-heading\" style=\"color:#0000a0\"><strong><em>Yoast HowTo Block<\/em><\/strong><\/h2>\n\n\n\n<p class=\"has-medium-font-size justify\">\u27a4 HowTo is a step by step procedure that explains how to get results by performing a sequence of steps. For instance, how to make a cake?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>How To Add Yoast How-To Block In Your Blog?<\/strong><\/h3>\n\n\n\n<p class=\"has-medium-font-size justify\">\u27a4 You can search for the block from the search box and can add your how-to block anywhere you want.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/how-to-block.gif\" alt=\"yoast how-to Gutenberg WordPress \" class=\"wp-image-2904\" width=\"500\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Yoast How-To Block Appearance On Your Screen<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"621\" height=\"412\" src=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/how-to-block-appearance.gif\" alt=\"yoast how-to appearance wordpress\" class=\"wp-image-2905\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>\u27a4 In this how-to block, You can add:<\/strong><\/p><\/blockquote>\n\n\n\n<p class=\"has-medium-font-size justify\"><strong>\u21b1<\/strong> Total time to complete the particular task<\/p>\n\n\n\n<p class=\"has-medium-font-size justify\"><strong>\u21b1<\/strong> Overall Description of the steps<\/p>\n\n\n\n<p class=\"has-medium-font-size justify\"><strong>\u21b1<\/strong> Enter step title and step description<\/p>\n\n\n\n<p class=\"has-medium-font-size justify\"><strong>\u21b1<\/strong> An image per step<\/p>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\" \/>\n\n\n\n<h2 class=\"has-text-color wp-block-heading\" style=\"color:#0000a0\"><strong><em>Yoast FAQ Block<\/em><\/strong><\/h2>\n\n\n\n<p class=\"has-medium-font-size justify\">\u27a4 This is the block where you can ask all common questions about a service, product or company. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>How FAQ Pages Appear In The Google Search Results?<\/strong><\/h3>\n\n\n\n<p class=\"has-medium-font-size justify\">\u27a4 Your <a href=\"https:\/\/yoast.com\/wordpress\/plugins\/seo\/faq-schema-content-block\/\">FAQ pages<\/a> will appear like this&#8230;Imagine what you can do with this!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/faqexample.jpg\" alt=\"yoast FAQ Gutenberg WordPress \" class=\"wp-image-2906\" width=\"750\" height=\"400\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>How To Add FAQ In WordPress With Yoast SEO?<\/strong><\/h3>\n\n\n\n<p class=\"has-medium-font-size justify\">\u27a4 Open the page where you want to add the FAQ. Hit the +Plus button and search for FAQ and add it. The FAQ block will automatically appear on your page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/faqblock.png\" alt=\"Add yoast FAQ Gutenberg WordPress \" class=\"wp-image-2909\" width=\"750\" height=\"400\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Yoast FAQ Appearance in WordPress Editor<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/yoast-faq-block-block-initial.jpg\" alt=\"yoast FAQ appear Gutenberg \" class=\"wp-image-2910\" width=\"750\" height=\"300\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p>Fill the block with questions and answers&#8230;<\/p><\/blockquote>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\" \/>\n\n\n\n<h2 class=\"has-text-color wp-block-heading\" style=\"color:#0000a0\"><strong><em>How To Customize Individual Blocks?<\/em><\/strong><\/h2>\n\n\n\n<p class=\"has-medium-font-size justify\">WordPress Gutenberg editor includes an ample of different blocks, so I can\u2019t give you an example for each individual block.<\/p>\n\n\n\n<p class=\"has-medium-font-size justify\"><strong><em>But I can show you a basic framework that applies to all blocks.<\/em><\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size justify\">\u27a4Basically, you can control the&nbsp;content&nbsp;in the body of the editor:<\/p>\n\n\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2849 size-full\" src=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/content-control.gif\" alt=\"Text styling WordPress\" width=\"894\" height=\"423\" \/><\/p>\n\n\n<p class=\"has-medium-font-size justify\">\u27a4For text styling and alignment, you need to use the menu bar that pops-ups when you hover over a block:<\/p>\n\n\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2850 size-full\" src=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/style-content.gif\" alt=\"WordPress Gutenberg text\" width=\"894\" height=\"423\" \/><\/p>\n\n\n<hr class=\"wp-block-separator is-style-wide\" \/>\n\n\n\n<h2 class=\"has-text-color wp-block-heading\" style=\"color:#0000a0\"><strong><em>How To Rearrange Individual Blocks?<\/em><\/strong><\/h2>\n\n\n\n<p class=\"has-medium-font-size justify\">\u27a4To rearrange the blocks, you have two options. Either you can use Up&nbsp;or Down&nbsp;arrow while hovering over a block to move it to a particular direction:<\/p>\n\n\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2851 size-full\" src=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/rearrange.gif\" alt=\"Rearrange WordPress Gutenberg blocks\" width=\"691\" height=\"432\" \/><\/p>\n\n\n<p class=\"has-medium-font-size justify\">\u27a4You can also drag and drop the blocks. To activate the drag and drop functionality, you have to hover your cursor over the&nbsp;six dots&nbsp;between the up and down arrows.<\/p>\n\n\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2852 size-full\" src=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/drag-drop.gif\" alt=\"Image Drag and Drop\" width=\"1178\" height=\"731\" \/><\/p>\n\n\n<h3 class=\"wp-block-heading\"><strong>Create Reusable Block Templates<\/strong><\/h3>\n\n\n\n<p class=\"has-medium-font-size justify\">If you have a specific collection of blocks that you want to reuse in multiple posts, then you can save a group of blocks as a reusable template.<\/p>\n\n\n\n<p class=\"has-medium-font-size justify\"><strong><em>To Create Your Template:<\/em><\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>\u21b1<\/strong> Select the blocks that you want to include<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>\u21b1<\/strong> Click the\u00a0<strong>three dots<\/strong>\u00a0icon<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>\u21b1<\/strong> Select\u00a0<strong>Add to Reusable blocks<\/strong><\/p>\n\n\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2853 size-full\" src=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/reusable.gif\" alt=\"Blocks reusable WordPress Gutenberg\" width=\"690\" height=\"462\" \/><\/p>\n\n\n<hr class=\"wp-block-separator is-style-wide\" \/>\n\n\n\n<h2 class=\"has-text-color wp-block-heading\" style=\"color:#0000a0\"><strong><em>Keyboard Shortcuts For The Gutenberg WordPress Editor!<\/em><\/strong><\/h2>\n\n\n\n<p class=\"has-medium-font-size justify\">When it comes to digital marketing and blogging, I think efficiency is very much important. That&#8217;s why I always prefer to use shortcuts in every website builder I use.<\/p>\n\n\n\n<p class=\"has-medium-font-size justify\">Awesome keyboard shortcuts that you can start using&nbsp;to enhance your WordPress skills.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>\u21b1<\/strong> Add Blocks Quickly With \/<\/p><p><strong>\u21b1<\/strong> Undo Your Last Action With Ctrl + Z<\/p><p><strong>\u21b1<\/strong> Remove A Block Quickly With Alt + Shift + Z<\/p><p><strong>\u21b1<\/strong> Add Block BEFORE Current Block With Ctrl + Alt + T<\/p><p><strong>\u21b1<\/strong> Add Block AFTER Current Block With Ctrl + Alt + Y<\/p><p><strong>\u21b1<\/strong> Duplicate Current Block With Ctrl + Shift + D<\/p><p><strong>\u21b1<\/strong> Scrolling Through Blocks With Tab<\/p><\/blockquote>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\" \/>\n\n\n\n<h2 class=\"has-text-color wp-block-heading\" style=\"color:#0000a0\"><em><strong>Last Words<\/strong><\/em>&#8230;<\/h2>\n\n\n\n<p class=\"has-medium-font-size justify\">We have covered a lot of things here, but it only scratches the ground level of what you can do with Gutenberg Editor. ! So get ready and make your first website with the help of  WordPress Gutenberg tutorial and make your content beautiful and readable.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The WordPress Gutenberg Editor is a surprise package for you\u2026 Yes, you will LEARN something new! The Good News? In this step by step tutorial, we will show you everything you need to know and You\u2019ll be able to reach the ground blogging \ud83d\ude09 What is Gutenberg WordPress? WordPress Gutenberg blocks editor is the most [&hellip;]<\/p>\n","protected":false},"author":14,"featured_media":2929,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[366,364,365,367,362,368,363],"class_list":["post-2820","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tools","tag-gutenberg","tag-gutenbergwordpress","tag-gutenbergwordpresseditor","tag-wordpressblocks","tag-wordpressgutenberg","tag-wordpressgutenbergblocks","tag-wordpressgutenbergtutorial"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How To Use WordPress Gutenberg Editor&#039;s Blocks To Beautify Content?<\/title>\n<meta name=\"description\" content=\"don&#039;t know how to use WordPress Gutenberg to build your website or make your content beautiful? then learn from WordPress Gutenberg tutorial.\" \/>\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.amritsardigitalacademy.in\/blog\/wordpress-gutenberg\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use WordPress Gutenberg Editor&#039;s Blocks to Beautify Content?\" \/>\n<meta property=\"og:description\" content=\"don&#039;t know how to use WordPress Gutenberg to build your website or make your content beautiful? then learn from WordPress Gutenberg tutorial.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wordpress-gutenberg\/\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/AmritsarDigitalAcademy\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-08T08:12:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-08T08:13:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/WordPress-5.0-Gutenberg-Editor.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Dilpreet Kaur\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"How to Use WordPress Gutenberg Editor&#039;s Blocks to Beauty Content?\" \/>\n<meta name=\"twitter:description\" content=\"don&#039;t know how to use WordPress Gutenberg to build your website or make your content beautiful? then learn from WordPress Gutenberg tutorial.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/WordPress-5.0-Gutenberg-Editor.png\" \/>\n<meta name=\"twitter:creator\" content=\"@AmritsarAcademy\" \/>\n<meta name=\"twitter:site\" content=\"@AmritsarAcademy\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dilpreet Kaur\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.amritsardigitalacademy.in\/blog\/wordpress-gutenberg\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.amritsardigitalacademy.in\/blog\/wordpress-gutenberg\/\"},\"author\":{\"name\":\"Dilpreet Kaur\",\"@id\":\"https:\/\/www.amritsardigitalacademy.in\/blog\/#\/schema\/person\/80f701b87c6790d185c8badd5d5ca747\"},\"headline\":\"How To Use WordPress Gutenberg Editor&#8217;s Blocks To Beautify Content?\",\"datePublished\":\"2020-04-08T08:12:59+00:00\",\"dateModified\":\"2020-04-08T08:13:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.amritsardigitalacademy.in\/blog\/wordpress-gutenberg\/\"},\"wordCount\":1575,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.amritsardigitalacademy.in\/blog\/#organization\"},\"keywords\":[\"#gutenberg\",\"#gutenbergwordpress\",\"#Gutenbergwordpresseditor\",\"#wordpressblocks\",\"#WordPressGutenberg\",\"#wordpressgutenbergblocks\",\"#wordpressGutenbergtutorial\"],\"articleSection\":[\"Tools\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.amritsardigitalacademy.in\/blog\/wordpress-gutenberg\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.amritsardigitalacademy.in\/blog\/wordpress-gutenberg\/\",\"url\":\"https:\/\/www.amritsardigitalacademy.in\/blog\/wordpress-gutenberg\/\",\"name\":\"How To Use WordPress Gutenberg Editor's Blocks To Beautify Content?\",\"isPartOf\":{\"@id\":\"https:\/\/www.amritsardigitalacademy.in\/blog\/#website\"},\"datePublished\":\"2020-04-08T08:12:59+00:00\",\"dateModified\":\"2020-04-08T08:13:00+00:00\",\"description\":\"don't know how to use WordPress Gutenberg to build your website or make your content beautiful? then learn from WordPress Gutenberg tutorial.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.amritsardigitalacademy.in\/blog\/wordpress-gutenberg\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.amritsardigitalacademy.in\/blog\/wordpress-gutenberg\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.amritsardigitalacademy.in\/blog\/wordpress-gutenberg\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.amritsardigitalacademy.in\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Use WordPress Gutenberg Editor&#8217;s Blocks To Beautify Content?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.amritsardigitalacademy.in\/blog\/#website\",\"url\":\"https:\/\/www.amritsardigitalacademy.in\/blog\/\",\"name\":\"\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.amritsardigitalacademy.in\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.amritsardigitalacademy.in\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.amritsardigitalacademy.in\/blog\/#organization\",\"name\":\"Amritsar Digital Academy\",\"url\":\"https:\/\/www.amritsardigitalacademy.in\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.amritsardigitalacademy.in\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2018\/12\/ADA-Final-Logo.png\",\"contentUrl\":\"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2018\/12\/ADA-Final-Logo.png\",\"width\":600,\"height\":138,\"caption\":\"Amritsar Digital Academy\"},\"image\":{\"@id\":\"https:\/\/www.amritsardigitalacademy.in\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/AmritsarDigitalAcademy\/\",\"https:\/\/twitter.com\/AmritsarAcademy\",\"https:\/\/www.instagram.com\/amritsardigitalacademy\/\",\"https:\/\/www.linkedin.com\/company\/amritsardigitalacademy\/\",\"https:\/\/in.pinterest.com\/amritsardigitalacademy\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.amritsardigitalacademy.in\/blog\/#\/schema\/person\/80f701b87c6790d185c8badd5d5ca747\",\"name\":\"Dilpreet Kaur\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.amritsardigitalacademy.in\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8a2af3623dd207ccd8c134ddb446d8d?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8a2af3623dd207ccd8c134ddb446d8d?s=96&d=identicon&r=g\",\"caption\":\"Dilpreet Kaur\"},\"description\":\"Content Inditer | Fond of exploring my Innermost phrenic Conceptions to engender content that will evoke deep relatable emotions and ardency in others.\",\"url\":\"https:\/\/www.amritsardigitalacademy.in\/blog\/author\/dilpreet\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Use WordPress Gutenberg Editor's Blocks To Beautify Content?","description":"don't know how to use WordPress Gutenberg to build your website or make your content beautiful? then learn from WordPress Gutenberg tutorial.","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.amritsardigitalacademy.in\/blog\/wordpress-gutenberg\/","og_locale":"en_US","og_type":"article","og_title":"How to Use WordPress Gutenberg Editor's Blocks to Beautify Content?","og_description":"don't know how to use WordPress Gutenberg to build your website or make your content beautiful? then learn from WordPress Gutenberg tutorial.","og_url":"https:\/\/www.amritsardigitalacademy.in\/blog\/wordpress-gutenberg\/","article_publisher":"https:\/\/www.facebook.com\/AmritsarDigitalAcademy\/","article_published_time":"2020-04-08T08:12:59+00:00","article_modified_time":"2020-04-08T08:13:00+00:00","og_image":[{"width":1000,"height":500,"url":"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/WordPress-5.0-Gutenberg-Editor.png","type":"image\/png"}],"author":"Dilpreet Kaur","twitter_card":"summary_large_image","twitter_title":"How to Use WordPress Gutenberg Editor's Blocks to Beauty Content?","twitter_description":"don't know how to use WordPress Gutenberg to build your website or make your content beautiful? then learn from WordPress Gutenberg tutorial.","twitter_image":"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2020\/04\/WordPress-5.0-Gutenberg-Editor.png","twitter_creator":"@AmritsarAcademy","twitter_site":"@AmritsarAcademy","twitter_misc":{"Written by":"Dilpreet Kaur","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.amritsardigitalacademy.in\/blog\/wordpress-gutenberg\/#article","isPartOf":{"@id":"https:\/\/www.amritsardigitalacademy.in\/blog\/wordpress-gutenberg\/"},"author":{"name":"Dilpreet Kaur","@id":"https:\/\/www.amritsardigitalacademy.in\/blog\/#\/schema\/person\/80f701b87c6790d185c8badd5d5ca747"},"headline":"How To Use WordPress Gutenberg Editor&#8217;s Blocks To Beautify Content?","datePublished":"2020-04-08T08:12:59+00:00","dateModified":"2020-04-08T08:13:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.amritsardigitalacademy.in\/blog\/wordpress-gutenberg\/"},"wordCount":1575,"commentCount":0,"publisher":{"@id":"https:\/\/www.amritsardigitalacademy.in\/blog\/#organization"},"keywords":["#gutenberg","#gutenbergwordpress","#Gutenbergwordpresseditor","#wordpressblocks","#WordPressGutenberg","#wordpressgutenbergblocks","#wordpressGutenbergtutorial"],"articleSection":["Tools"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.amritsardigitalacademy.in\/blog\/wordpress-gutenberg\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.amritsardigitalacademy.in\/blog\/wordpress-gutenberg\/","url":"https:\/\/www.amritsardigitalacademy.in\/blog\/wordpress-gutenberg\/","name":"How To Use WordPress Gutenberg Editor's Blocks To Beautify Content?","isPartOf":{"@id":"https:\/\/www.amritsardigitalacademy.in\/blog\/#website"},"datePublished":"2020-04-08T08:12:59+00:00","dateModified":"2020-04-08T08:13:00+00:00","description":"don't know how to use WordPress Gutenberg to build your website or make your content beautiful? then learn from WordPress Gutenberg tutorial.","breadcrumb":{"@id":"https:\/\/www.amritsardigitalacademy.in\/blog\/wordpress-gutenberg\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.amritsardigitalacademy.in\/blog\/wordpress-gutenberg\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.amritsardigitalacademy.in\/blog\/wordpress-gutenberg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.amritsardigitalacademy.in\/blog\/"},{"@type":"ListItem","position":2,"name":"How To Use WordPress Gutenberg Editor&#8217;s Blocks To Beautify Content?"}]},{"@type":"WebSite","@id":"https:\/\/www.amritsardigitalacademy.in\/blog\/#website","url":"https:\/\/www.amritsardigitalacademy.in\/blog\/","name":"","description":"","publisher":{"@id":"https:\/\/www.amritsardigitalacademy.in\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.amritsardigitalacademy.in\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.amritsardigitalacademy.in\/blog\/#organization","name":"Amritsar Digital Academy","url":"https:\/\/www.amritsardigitalacademy.in\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.amritsardigitalacademy.in\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2018\/12\/ADA-Final-Logo.png","contentUrl":"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-content\/uploads\/2018\/12\/ADA-Final-Logo.png","width":600,"height":138,"caption":"Amritsar Digital Academy"},"image":{"@id":"https:\/\/www.amritsardigitalacademy.in\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/AmritsarDigitalAcademy\/","https:\/\/twitter.com\/AmritsarAcademy","https:\/\/www.instagram.com\/amritsardigitalacademy\/","https:\/\/www.linkedin.com\/company\/amritsardigitalacademy\/","https:\/\/in.pinterest.com\/amritsardigitalacademy\/"]},{"@type":"Person","@id":"https:\/\/www.amritsardigitalacademy.in\/blog\/#\/schema\/person\/80f701b87c6790d185c8badd5d5ca747","name":"Dilpreet Kaur","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.amritsardigitalacademy.in\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8a2af3623dd207ccd8c134ddb446d8d?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8a2af3623dd207ccd8c134ddb446d8d?s=96&d=identicon&r=g","caption":"Dilpreet Kaur"},"description":"Content Inditer | Fond of exploring my Innermost phrenic Conceptions to engender content that will evoke deep relatable emotions and ardency in others.","url":"https:\/\/www.amritsardigitalacademy.in\/blog\/author\/dilpreet\/"}]}},"_links":{"self":[{"href":"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-json\/wp\/v2\/posts\/2820"}],"collection":[{"href":"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-json\/wp\/v2\/comments?post=2820"}],"version-history":[{"count":0,"href":"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-json\/wp\/v2\/posts\/2820\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-json\/wp\/v2\/media\/2929"}],"wp:attachment":[{"href":"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-json\/wp\/v2\/media?parent=2820"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-json\/wp\/v2\/categories?post=2820"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.amritsardigitalacademy.in\/blog\/wp-json\/wp\/v2\/tags?post=2820"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}