{"id":110,"date":"2018-12-05T04:46:35","date_gmt":"2018-12-05T04:46:35","guid":{"rendered":"https:\/\/www.markupchimps.com\/blog\/?p=110"},"modified":"2019-08-21T06:52:03","modified_gmt":"2019-08-21T06:52:03","slug":"gutenberg-editor-understanding-the-gutenberg-blocks","status":"publish","type":"post","link":"https:\/\/www.markupchimps.com\/blog\/gutenberg-editor-understanding-the-gutenberg-blocks\/","title":{"rendered":"Gutenberg Editor: Understanding The Gutenberg Blocks"},"content":{"rendered":"<p style=\"text-align: center;\"><strong><em>\u201cChange is the Law of life and is pivotal to grow and move ahead\u201d<\/em><\/strong><\/p>\n<p>In our previous blog, we gave you an insight in to the changes WordPress 5.0 will bring. Gutenberg being one of the biggest changes is making the bloggers and content creators excited and curious to know and learn more about the same. Let\u2019s try and understand \u2018Gutenberg Editor\u2019 and \u2018Blocks\u2019 a bit more with the help of images:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-112\" src=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/guntenberg-editor5.0.jpg\" alt=\"WordPress Gutenberg Editor\" width=\"846\" height=\"510\" \/><\/p>\n<blockquote><p><em>-A closer look at the new Gutenberg Editor-<\/em><\/p><\/blockquote>\n<h3>What are Blocks?<\/h3>\n<p>Blocks are advanced short codes introduced in the Gutenberg editor of WordPress 5.0. When you will write a content, you can use these blocks as basic components to create your page or blog. These basic components can be images, videos, buttons, audio etc. For every type of content you write you can choose the related block type. <b>Stackable Gutenberg Plugin<\/b> has some versatile and ultimate blocks to create front and landing pages.<\/p>\n<p>You can add a Plugin to your website to get the best collection of blocks. A plugin as we know is a software with a group of functions that can be added to WordPress website. It allows to add specific features to one\u2019s website and widens its functionality. <b>Stackable Gutenberg Plugin<\/b> is one such Plugin that has some versatile and ultimate blocks to create front and landing pages.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-133\" src=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/stackable-plugin-1.png\" alt=\"WordPress Stackable Gutenberg Plugin\" width=\"413\" height=\"308\" srcset=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/stackable-plugin-1.png 413w, https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/stackable-plugin-1-300x224.png 300w\" sizes=\"auto, (max-width: 413px) 100vw, 413px\" \/><\/p>\n<blockquote><p><em>-Stackable Gutenberg Plugin-<\/em><\/p><\/blockquote>\n<h3>How to install a Plugin?<\/h3>\n<p>A plugin gives a different feel and touch to your website. Whatever feature you are looking for, there\u2019s a plugin for everything in WordPress.<\/p>\n<ul>\n<li>Go to Plugins<\/li>\n<li>Click on Add new<\/li>\n<li>Choose from the list or search a Plugin<\/li>\n<li>Select the desired Plugin and Click on Install button<\/li>\n<li>Once the Installation is done, an \u2018Activate\u2019 tab will appear<\/li>\n<li>Click on the \u2018Activate\u2019 tab <\/li>\n<li>If your Plugin asks for \u201cAPI key\u2019 to get over the activation step, insert the key for the Plugin in the settings area.<\/li>\n<li>Move to the Plugins tab from WordPress dashboard and you will find the installed Plugin in the line-up.<\/li>\n<\/ul>\n<h3>Know more about Blocks<\/h3>\n<p>Gutenberg provides you various block types for every type of content. You just have to click on the (+) Plus sign and it displays all the available blocks. There is a <b>\u2018Reusable Block Type\u2019<\/b> too. It saves the blocks that you have used in the past and allows you to reuse them in future.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-114\" src=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/blocks.png\" alt=\"WordPress Reusable Block Type\" width=\"302\" height=\"323\" srcset=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/blocks.png 302w, https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/blocks-280x300.png 280w\" sizes=\"auto, (max-width: 302px) 100vw, 302px\" \/><\/p>\n<blockquote><p><em>-a captured image of block section in WordPress-<\/em><\/p><\/blockquote>\n<p>If you click on the <b>\u2018Most Used Blocks\u2019,<\/b> further a section will appear and same applies for other block types too.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-115\" src=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/block-types.png\" alt=\"WordPress Most Used Blocks\" width=\"388\" height=\"465\" srcset=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/block-types.png 388w, https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/block-types-250x300.png 250w\" sizes=\"auto, (max-width: 388px) 100vw, 388px\" \/><\/p>\n<blockquote><p><em>-most used blocks-<\/em><\/p><\/blockquote>\n<h3>Font Style Options<\/h3>\n<p>In the old Classic Editor, the Font style options, appeared like this in a tool bar<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-116\" src=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/toolbar.png\" alt=\"wordpress old Classic Editor\" width=\"577\" height=\"77\" srcset=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/toolbar.png 577w, https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/toolbar-300x40.png 300w\" sizes=\"auto, (max-width: 577px) 100vw, 577px\" \/><\/p>\n<p>In the Gutenberg Editor, you will notice a dialogue box, right above the drafting area.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-117\" src=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/toolbar-2.png\" alt=\"WordPress Toolbar\" width=\"635\" height=\"106\" srcset=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/toolbar-2.png 635w, https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/toolbar-2-300x50.png 300w\" sizes=\"auto, (max-width: 635px) 100vw, 635px\" \/><\/p>\n<p>The block concept introduced in WordPress 5.0 gives us an impression that with Gutenberg editor creating content is going to be a different experience. Without being an expert, one can create own customised post and pages for their respective line of work.<\/p>\n<h3>Connect with us<\/h3>\n<p>To know more about Gutenberg editor for your business or website or other WooCommerce solutions, drop us an email at <a href=\"mailto:info@markupchimps.com\">info@markupchimps.com<\/a> and we will get in touch with you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u201cChange is the Law of life and is pivotal to grow and move ahead\u201d In our previous blog, we gave you an insight in to the changes WordPress 5.0 will bring. Gutenberg being one of the biggest changes is making the bloggers and content creators excited and curious to know and learn more about the &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.markupchimps.com\/blog\/gutenberg-editor-understanding-the-gutenberg-blocks\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Gutenberg Editor: Understanding The Gutenberg Blocks&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":128,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-110","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.markupchimps.com\/blog\/wp-json\/wp\/v2\/posts\/110","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.markupchimps.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.markupchimps.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.markupchimps.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.markupchimps.com\/blog\/wp-json\/wp\/v2\/comments?post=110"}],"version-history":[{"count":16,"href":"https:\/\/www.markupchimps.com\/blog\/wp-json\/wp\/v2\/posts\/110\/revisions"}],"predecessor-version":[{"id":207,"href":"https:\/\/www.markupchimps.com\/blog\/wp-json\/wp\/v2\/posts\/110\/revisions\/207"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markupchimps.com\/blog\/wp-json\/wp\/v2\/media\/128"}],"wp:attachment":[{"href":"https:\/\/www.markupchimps.com\/blog\/wp-json\/wp\/v2\/media?parent=110"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markupchimps.com\/blog\/wp-json\/wp\/v2\/categories?post=110"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markupchimps.com\/blog\/wp-json\/wp\/v2\/tags?post=110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}