{"id":1054,"date":"2019-04-10T05:04:20","date_gmt":"2019-04-10T05:04:20","guid":{"rendered":"https:\/\/admin.qltech.com.au\/?post_type=knowledgehub&#038;p=1054"},"modified":"2019-11-06T05:41:44","modified_gmt":"2019-11-06T05:41:44","slug":"latest-gutenberg-wordpress-guide-use-block-editor","status":"publish","type":"post","link":"https:\/\/steamlinedesign.com\/qltech\/new\/2019\/04\/10\/latest-gutenberg-wordpress-guide-use-block-editor\/","title":{"rendered":"Latest Gutenberg&#8217;s WordPress Guide On How To Use Block Editor"},"content":{"rendered":"\n<p>Planning on updating your WordPress with the latest Gutenberg block editor? Before you go about doing that the best course of action would be for you to know everything about the Gutenberg editor. Now the good news is our Gutenberg&nbsp;<em><strong><a href=\"https:\/\/www.qltech.com.au\/wordpress-development-services\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress guide<\/a><\/strong><\/em>&nbsp;will not just tell the difference between the old &amp; new version, but also how to use the block editor.<\/p>\n\n\n\n<p>The Gutenberg block editor brings with it fully styled method content creation in the form of&nbsp;<strong>blocks<\/strong>. And we are going to tell you exactly how you\u2019re going to use blocks along with some of the new editor\u2019s other features, to curate content at your WordPress site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What makes the Gutenberg block editor better than the classic version?<\/strong><\/h2>\n\n\n\n<p>The latest block editor offers an easy way to add a variety of content to the posts and pages of your website. For instance, previously if you wished to add a table in your content, then it required a separate table plugin.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"500\" src=\"https:\/\/admin.qltech.com.au\/wp-content\/uploads\/2019\/09\/gutenberg-interface-main-sections-1400x749.jpg\" alt=\"Gutenberg block editor\" class=\"wp-image-1055\" srcset=\"https:\/\/steamlinedesign.com\/qltech\/new\/wp-content\/uploads\/2019\/09\/gutenberg-interface-main-sections-1400x749.jpg 800w, https:\/\/steamlinedesign.com\/qltech\/new\/wp-content\/uploads\/2019\/09\/gutenberg-interface-main-sections-1400x749-300x188.jpg 300w, https:\/\/steamlinedesign.com\/qltech\/new\/wp-content\/uploads\/2019\/09\/gutenberg-interface-main-sections-1400x749-768x480.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure><\/div>\n\n\n\n<p>With the Gutenberg block editor, you can simply add a table block, select the columns and rows, and start adding your content in the webpage. You can even shuffle content elements and edit them as individual blocks easily to create media-rich content.<\/p>\n\n\n\n<p>And most importantly, the new block editor is very easy to use and learn. This gives a&nbsp;<em><strong><a href=\"https:\/\/www.qltech.com.au\/\" target=\"_blank\" rel=\"noreferrer noopener\">huge advantage to all WordPress<\/a><\/strong><\/em>&nbsp;newbies who have just started working on their first blog&nbsp;or building a&nbsp;DIY website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>What are the \u201cBlocks\u201d in Block editor?<\/strong><\/h3>\n\n\n\n<p>The Gutenberg block editor is all set to replace the single edit field mode of the classic WordPress TinyMCE editor using a variety of \u201cblocks\u201d. These blocks will enable you to build more complex and creative designs than those allowed in the old classic WordPress editor.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"500\" src=\"https:\/\/admin.qltech.com.au\/wp-content\/uploads\/2019\/09\/managereusableblocks.jpg\" alt=\"Gutenberg WordPress Guide \" class=\"wp-image-1056\" srcset=\"https:\/\/steamlinedesign.com\/qltech\/new\/wp-content\/uploads\/2019\/09\/managereusableblocks.jpg 800w, https:\/\/steamlinedesign.com\/qltech\/new\/wp-content\/uploads\/2019\/09\/managereusableblocks-300x188.jpg 300w, https:\/\/steamlinedesign.com\/qltech\/new\/wp-content\/uploads\/2019\/09\/managereusableblocks-768x480.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure><\/div>\n\n\n\n<p>And the great news is that you will be able to create your very own third-party blocks that can be accessed via plugins for extra flexibility. Each block on its own is a separate entity that you can modify an individual basis.<\/p>\n\n\n\n<p>Not only that, the Gutenberg block editor is geared up to eliminate the need for page builders for most of the \u201cstandard\u201d content, and create a singular unified method for creating more-co<strong>mplex&nbsp;<\/strong>layouts in WordPress.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Let\u2019s have a look at the interface<\/strong><\/h3>\n\n\n\n<p>We have highlighted some of the key aspects of the editor. So let\u2019s Jump down below the image for more details on each individual section.<\/p>\n\n\n\n<p>The Gutenberg interface is comprised of three main areas:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>1.EDITING TOOLBAR:&nbsp; TOPMOST OF SCREEN<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.qltech.com.au\/wp-content\/uploads\/2019\/04\/wordpress-gutenberg-editor-15-1-e1554877308651.jpg\" alt=\"Gutenberg WordPress Guide \" class=\"wp-image-8523\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>2.CONTENT AREA:&nbsp;LARGE SECTION ON THE LEFT SIDE<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"392\" src=\"https:\/\/admin.qltech.com.au\/wp-content\/uploads\/2019\/09\/wordpress-gutenberg.jpg\" alt=\"\" class=\"wp-image-1059\" srcset=\"https:\/\/steamlinedesign.com\/qltech\/new\/wp-content\/uploads\/2019\/09\/wordpress-gutenberg.jpg 800w, https:\/\/steamlinedesign.com\/qltech\/new\/wp-content\/uploads\/2019\/09\/wordpress-gutenberg-300x147.jpg 300w, https:\/\/steamlinedesign.com\/qltech\/new\/wp-content\/uploads\/2019\/09\/wordpress-gutenberg-768x376.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>3.ADVANCED SETTINGS SECTION:&nbsp;RIGHT SIDEBAR<\/strong><\/h4>\n\n\n\n<p>These sections of the Guttenberg block editor allows you to do the following:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"798\" height=\"474\" src=\"https:\/\/admin.qltech.com.au\/wp-content\/uploads\/2019\/09\/Gutenberg-WordPress-Guide-advanced.jpg\" alt=\"Gutenberg WordPress Guide  advanced\" class=\"wp-image-1060\" srcset=\"https:\/\/steamlinedesign.com\/qltech\/new\/wp-content\/uploads\/2019\/09\/Gutenberg-WordPress-Guide-advanced.jpg 798w, https:\/\/steamlinedesign.com\/qltech\/new\/wp-content\/uploads\/2019\/09\/Gutenberg-WordPress-Guide-advanced-300x178.jpg 300w, https:\/\/steamlinedesign.com\/qltech\/new\/wp-content\/uploads\/2019\/09\/Gutenberg-WordPress-Guide-advanced-768x456.jpg 768w\" sizes=\"auto, (max-width: 798px) 100vw, 798px\" \/><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>Add a new block within the content area<\/li><li>Undo\/Redo changes<\/li><li>Review the content\u2019s structure (no. of words, blocks, paragraphs, headings, and tables)<\/li><li>Save your changes that have been auto-saved with confirmation<\/li><li>Preview pages &amp; posts<\/li><li>Modify settings, such as post visibility &amp; publish time &amp; date<\/li><li>Additional settings include:<ul><li>Switching between &amp; code &amp; visual editors<\/li><li>Copying all content<\/li><\/ul><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>How to add new blocks?<\/strong><\/h3>\n\n\n\n<p>As discussed above, you\u2019ll have to combine multiple individual \u201cblocks\u201d to build your layouts with the editor.<\/p>\n\n\n\n<p>To add a new block, all you need to do is simply click the&nbsp;<strong>+Plus<\/strong>&nbsp;icon and select the content type you want to add:<\/p>\n\n\n\n<p>Gutenberg block editor actually includes a ton of different blocks, divided into many sections as per the use such as Common Blocks, Formatting, Layout Elements, Widgets, and Embeds:<\/p>\n\n\n\n<p>You will also see sections for<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Inline Elements&nbsp;\u2013 only contains a single block for the inline-image.<\/li><li>Common Blocks&nbsp;\u2013 Basic building blocks like images, paragraphs (regular text), quotes, etc.<\/li><li>Formatting&nbsp;\u2013 Used for adding formatted content like pull tables, quotes, or even the classic WordPress text editor<\/li><li>Layout Elements\u2013 Enables splitting of text into two columns, including buttons, separators, or tags<\/li><li>Widgets&nbsp;\u2013 Used for adding shortcodes, latest posts, or categories.<\/li><li>Reusable- Use the templates that you have applied previously again (this option only becomes active once you have used a couple of templates)<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Customizing individual blocks<\/strong><\/h3>\n\n\n\n<p>Since the Gutenberg block editor includes tons of different blocks, we can\u2019t demonstrate how to use each and every individual block. But we can show you the general framework that is applicable to all blocks.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"500\" src=\"https:\/\/admin.qltech.com.au\/wp-content\/uploads\/2019\/09\/customizing-Gutenberg-WordPress-Guide.jpg\" alt=\"customizing Gutenberg WordPress Guide \" class=\"wp-image-1061\" srcset=\"https:\/\/steamlinedesign.com\/qltech\/new\/wp-content\/uploads\/2019\/09\/customizing-Gutenberg-WordPress-Guide.jpg 800w, https:\/\/steamlinedesign.com\/qltech\/new\/wp-content\/uploads\/2019\/09\/customizing-Gutenberg-WordPress-Guide-300x188.jpg 300w, https:\/\/steamlinedesign.com\/qltech\/new\/wp-content\/uploads\/2019\/09\/customizing-Gutenberg-WordPress-Guide-768x480.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure><\/div>\n\n\n\n<p>Basically, you can control your&nbsp;<strong>content<\/strong>&nbsp;in the actual body of the Gutenberg block editor:<\/p>\n\n\n\n<p>For styling and alignment of basic text, you can use the menu bar that appears while hovering over a block:<\/p>\n\n\n\n<p>You\u2019ll have to style the block in the Block settings tab, for more advanced styling.<\/p>\n\n\n\n<p>In order to access that tab, select the block you need to edit and browse over to the&nbsp;Block&nbsp;tab:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Is Gutenberg block editor the&nbsp;<strong>future of WordPress?<\/strong><\/h2>\n\n\n\n<p>While the Gutenberg has its limitation as of now. It has become an official component of the WordPress core team thanks to the release of WordPress 5.0.<\/p>\n\n\n\n<p>For many casual users, it will bring a tremendously flexible content creation experience. After some growing pains at its initial stage.<\/p>\n\n\n\n<p>Although it\u2019s limited to content creation. For now, it is expected to&nbsp;<em><strong><a href=\"https:\/\/www.qltech.com.au\/category\/develop\/\" target=\"_blank\" rel=\"noreferrer noopener\">enable the developers to build entire webpages with ease<\/a><\/strong><\/em>.<\/p>\n\n\n\n<p>We hope to find our guide on the Gutenberg block editor useful and in case you have any queries regarding the editor. Simply drop us a line in the comment section and our experts will get in touch with you in no time.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Planning on updating your WordPress with the latest Gutenberg block editor? Before you go about doing that the best course of action would be for you to know everything about the Gutenberg editor. Now the good news is our Gutenberg&nbsp;WordPress guide&nbsp;will not just tell the difference between the old &amp; new version, but also how [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"lbn_published_stage":false,"lbn_published_production":false,"footnotes":""},"categories":[1936],"tags":[1626,1629,1631,1628],"yst_prominent_words":[1118,1121,1131,1124,1126,30,1125,226,1130,1120,83,1122,1119,1117,1129,1123,1127,1128,1132,645],"class_list":["post-1054","post","type-post","status-publish","format-standard","hentry","category-wordpress-dev","tag-gutenberg-block","tag-gutenberg-wordpress","tag-wordpress-development","tag-wordpress-guide"],"yoast":{"focuskw":"Gutenberg","title":"Latest Gutenberg's WordPress Guide On How To Use Block Editor","metadesc":"Gutenberg block editor brings fully styled method content creation in the form of blocks. And how you\u2019re going to use it to curate content.","linkdex":"73","metakeywords":"","meta-robots-noindex":"","meta-robots-nofollow":"","meta-robots-adv":"","canonical":"","redirect":"","opengraph-title":"","opengraph-description":"","opengraph-image":"","twitter-title":"","twitter-description":"","twitter-image":""},"acf":{"img":"https:\/\/steamlinedesign.com\/qltech\/new\/wp-content\/uploads\/2019\/09\/Latest-Gutenbergs-WordPress-Guide-On-How-To-Use-Block-Editor.jpg","long_descrpition":"","written_by":"","feature_image":"https:\/\/steamlinedesign.com\/qltech\/new\/wp-content\/uploads\/2019\/04\/Latest-Gutenbergs-WordPress-Guide-On-How-To-Use-Block-Editor-1.jpg","posted_by":"QL Tech","is_featured":"0:Non Featured","knowledge_hub_featured_image":false,"short_description":"","icon":false,"service_slider":false},"_links":{"self":[{"href":"https:\/\/steamlinedesign.com\/qltech\/new\/wp-json\/wp\/v2\/posts\/1054","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/steamlinedesign.com\/qltech\/new\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/steamlinedesign.com\/qltech\/new\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/steamlinedesign.com\/qltech\/new\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/steamlinedesign.com\/qltech\/new\/wp-json\/wp\/v2\/comments?post=1054"}],"version-history":[{"count":7,"href":"https:\/\/steamlinedesign.com\/qltech\/new\/wp-json\/wp\/v2\/posts\/1054\/revisions"}],"predecessor-version":[{"id":2644,"href":"https:\/\/steamlinedesign.com\/qltech\/new\/wp-json\/wp\/v2\/posts\/1054\/revisions\/2644"}],"wp:attachment":[{"href":"https:\/\/steamlinedesign.com\/qltech\/new\/wp-json\/wp\/v2\/media?parent=1054"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/steamlinedesign.com\/qltech\/new\/wp-json\/wp\/v2\/categories?post=1054"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/steamlinedesign.com\/qltech\/new\/wp-json\/wp\/v2\/tags?post=1054"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/steamlinedesign.com\/qltech\/new\/wp-json\/wp\/v2\/yst_prominent_words?post=1054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}