{"id":138,"date":"2018-12-07T14:40:28","date_gmt":"2018-12-07T14:40:28","guid":{"rendered":"https:\/\/www.markupchimps.com\/blog\/?p=138"},"modified":"2019-08-21T06:51:35","modified_gmt":"2019-08-21T06:51:35","slug":"steps-to-create-posts-using-gutenberg-editor","status":"publish","type":"post","link":"https:\/\/www.markupchimps.com\/blog\/steps-to-create-posts-using-gutenberg-editor\/","title":{"rendered":"Steps to create Posts using Gutenberg editor"},"content":{"rendered":"<p>Gutenberg the new text editor offers a new way to edit your content. As we know Gutenberg editor is block based and there is a block available for every type of content you write. Let us try and get familiarize with the usage of Gutenberg editor.<\/p>\n<p><strong>To start with the Gutenberg editor:<\/strong><\/p>\n<ul>\n<li>Visit the WordPress dashboard<\/li>\n<li>Go to plugins<\/li>\n<li>Click on Add new<\/li>\n<li>Gutenberg plugin option will appear<\/li>\n<li>Install and activate the same and you are ready to go<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-139 size-full\" src=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/highlights-editor.png\" alt=\"start with the Gutenberg editor\" width=\"800\" height=\"471\" srcset=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/highlights-editor.png 800w, https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/highlights-editor-300x177.png 300w, https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/highlights-editor-768x452.png 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/p>\n<blockquote><p><em>-Highlights of the Gutenberg editor-<\/em><\/p><\/blockquote>\n<ul>\n<li>The first and foremost step is to give a title to your blog post.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/add-title-gutenberg-1.png\" alt=\"WordPress blog title to your post\" width=\"872\" height=\"168\" class=\"alignleft size-full wp-image-161\" srcset=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/add-title-gutenberg-1.png 872w, https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/add-title-gutenberg-1-300x58.png 300w, https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/add-title-gutenberg-1-768x148.png 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/p>\n<ul>\n<li>The + (Insert) icon is to add the new blocks. When you click on the (+) button, the following section appears. It presents various block types in front of you. Choose a block type depending upon the blog post\/story that you are going to pen down.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/new-blocks-gutenberg.png\" alt=\"WordPress block\" width=\"613\" height=\"384\" class=\"alignleft size-full wp-image-147\" srcset=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/new-blocks-gutenberg.png 613w, https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/new-blocks-gutenberg-300x188.png 300w\" sizes=\"auto, (max-width: 613px) 100vw, 613px\" \/><\/p>\n<p>An example of \u2018Image Block\u2019 added<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/image-block-gutenberg-1.png\" alt=\"WordPress Image Block Example\" width=\"724\" height=\"396\" class=\"aligncenter size-full wp-image-219\" srcset=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/image-block-gutenberg-1.png 724w, https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/image-block-gutenberg-1-300x164.png 300w\" sizes=\"auto, (max-width: 724px) 100vw, 724px\" \/><\/p>\n<p>One can add an image, audio, video, buttons etc. depending upon the type of content written. Gutenberg editor allows you to pick and choose the blocks. There is a block available for every single word or sentence.<\/p>\n<ul>\n<li>The Redo and Undo buttons allow you to make changes accordingly.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/undo-redo-gutenberg.png\" alt=\"WordPress Redo and Undo buttons\" width=\"820\" height=\"233\" class=\"alignleft size-full wp-image-150\" srcset=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/undo-redo-gutenberg.png 820w, https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/undo-redo-gutenberg-300x85.png 300w, https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/undo-redo-gutenberg-768x218.png 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/p>\n<ul>\n<li>In the settings area, you can select the visibility type, featured images, have categories or tags, write excerpts etc.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/post-setting-gutenberg.png\" alt=\"post settings area in wordpress\" width=\"789\" height=\"408\" class=\"alignleft size-full wp-image-148\" srcset=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/post-setting-gutenberg.png 789w, https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/post-setting-gutenberg-300x155.png 300w, https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/post-setting-gutenberg-768x397.png 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/p>\n<ul>\n<li>You can see your blog in preview mode before it goes online or publish it directly with relevant editing.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/preview-gutenberg.png\" alt=\"wordpress preview mode\" width=\"209\" height=\"335\" class=\"alignleft size-full wp-image-149\" srcset=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/preview-gutenberg.png 209w, https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/preview-gutenberg-187x300.png 187w\" sizes=\"auto, (max-width: 209px) 100vw, 209px\" \/><\/p>\n<ul>\n<li>The new Gutenberg editor allows you to play with the color options. Add a background color or highlight the text which is prominent choosing the right color shades. Select the text that you want to highlight, select the color for background and text and its almost done.<\/li>\n<\/ul>\n<p style=\"text-align:center; color:#FFFF00; background-color:#FF9900; padding:0;\">See this as an example of background color and highlighting.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/color-options-gutenberg.png\" alt=\"wordpress background color and highlighting\" width=\"197\" height=\"474\" class=\"alignleft size-full wp-image-145\" srcset=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/color-options-gutenberg.png 197w, https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2018\/12\/color-options-gutenberg-125x300.png 125w\" sizes=\"auto, (max-width: 197px) 100vw, 197px\" \/><\/p>\n<p>No doubt that the Gutenberg editor is going to change the entire look of the content and will allow you to take the presentability of your write-up in your own hands. It will bring in the following positives for the content creators:<\/p>\n<ul>\n<li>Content creating will become easy and simple.<\/li>\n<li>One does not need to be a technical expertise to add a plug in or make the website more presentable.<\/li>\n<li>The new editor is user friendly and free from distractions.<\/li>\n<li>The new version is extensive in terms of features and available options for creating appealing content.<\/li>\n<\/ul>\n<p>Hopefully, the above article gives you more insight in to Gutenberg editor. If you have more queries about the new editor or if you like to share your views on the same, drop us an email at <a href=\"mailto:info@markupchimps.com\">info@markupchimps.com<\/a> and we will get back to you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gutenberg the new text editor offers a new way to edit your content. As we know Gutenberg editor is block based and there is a block available for every type of content you write. Let us try and get familiarize with the usage of Gutenberg editor. To start with the Gutenberg editor: Visit the WordPress &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.markupchimps.com\/blog\/steps-to-create-posts-using-gutenberg-editor\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Steps to create Posts using Gutenberg editor&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":156,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-138","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\/138","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=138"}],"version-history":[{"count":15,"href":"https:\/\/www.markupchimps.com\/blog\/wp-json\/wp\/v2\/posts\/138\/revisions"}],"predecessor-version":[{"id":220,"href":"https:\/\/www.markupchimps.com\/blog\/wp-json\/wp\/v2\/posts\/138\/revisions\/220"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markupchimps.com\/blog\/wp-json\/wp\/v2\/media\/156"}],"wp:attachment":[{"href":"https:\/\/www.markupchimps.com\/blog\/wp-json\/wp\/v2\/media?parent=138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markupchimps.com\/blog\/wp-json\/wp\/v2\/categories?post=138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markupchimps.com\/blog\/wp-json\/wp\/v2\/tags?post=138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}