{"id":8411,"date":"2023-05-02T08:44:55","date_gmt":"2023-05-02T08:44:55","guid":{"rendered":"https:\/\/positiwise.com\/?p=8411"},"modified":"2023-08-31T08:11:26","modified_gmt":"2023-08-31T08:11:26","slug":"an-introduction-to-gutenberg-editor-development-in-wordpress","status":"publish","type":"post","link":"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress","title":{"rendered":"An Introduction To Gutenberg Editor Development in WordPress"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong class=\"pw-highlight-text-color\"><em>Quick Overview:<\/em><\/strong><br>When you start with WordPress development or initiate to learn about the platform, then getting introduced to WordPress Gutenberg Editor is a must. Not knowing about and understanding its functionality is like not knowing the fundamentals of WordPress.<br><br>Nowadays, developers use Gutenberg to display a checklist, customize a heading, or embed a YouTube video on a WordPress site. It reduces the efforts and time required for development, which even leads to saving money to some extent. Due to this, many freelance bloggers also prefer WordPress.<\/p><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress\/#What_is_Gutenberg_in_WordPress\" >What is Gutenberg in WordPress?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress\/#The_Pros_and_Cons_of_WordPress_Block_Editor_Gutenberg\" >The Pros and Cons of WordPress Block Editor (Gutenberg)<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress\/#Pros_of_Gutenberg_Editor\" >Pros of Gutenberg Editor<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress\/#Cons_of_Gutenberg_Editor\" >Cons of Gutenberg Editor<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress\/#The_Difference_Between_WordPress_Gutenberg_Editor_and_Traditional_Editor\" >The Difference Between WordPress Gutenberg Editor and Traditional Editor<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress\/#How_To_Get_Started_With_The_Gutenberg_Editor\" >How To Get Started With The Gutenberg Editor<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress\/#Example_1_Adding_a_List\" >Example 1: Adding a List<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress\/#Example_2_Uploading_an_Image_to_the_Webpage\" >Example 2: Uploading an Image to the Webpage<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress\/#Example_3_To_Embed_a_YouTube_Video_Block_on_the_Webpage\" >Example 3: To Embed a YouTube Video Block on the Webpage<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress\/#Example_4_Arranging_the_Blocks\" >Example 4: Arranging the Blocks<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress\/#WordPress_Blog_Editor_Gutenberg_vs_The_Legacy_Widgets\" >WordPress Blog Editor (Gutenberg) vs. The Legacy Widgets<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress\/#Concluding_Up\" >Concluding Up<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n\n<p class=\"wp-block-paragraph\">So, let&#8217;s begin learning about the Gutenberg WordPress Editor, which assists freelancers and <a href=\"https:\/\/positiwise.com\/technologies\/wordpress-development\">WordPress development companies<\/a>.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_Gutenberg_in_WordPress\"><\/span>What is Gutenberg in WordPress?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Gutenberg in WordPress is a block editor that helps build websites with minimal effort and time constraints. Primarily, Gutenberg was the codename given to the new WordPress site development paradigm, aiding in creating, updating, publishing, and maintaining new-age websites. In addition, Gutenberg was developed to enhance the following four major WordPress functionalities, including:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Editing&nbsp;<\/li>\n\n\n\n<li>Customization<\/li>\n\n\n\n<li>Collaboration&nbsp;<\/li>\n\n\n\n<li>Multilingual<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress version 5.0 launched Gutenberg, introducing it as the first appearance of Gutenberg in WordPress in 2018. Due to its immense utilization and popularity, it has become the default website editor of the WordPress platform. However, if you still want to use the traditional editor, install its plugin.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, from a professional\u2019s perspective, Gutenberg is an appropriate editor due to its block customization functionality. It divided overall WordPress components into blocks. You can add a block to insert paragraphs, images, lists, videos, thumbnails, comment sections, headings, and all other facilities.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In addition, you can add a new block, rearrange it, and even delete a block if not required. And you can execute all such operations without writing a single code. Gutenberg minimizes the development time, cost, and effort. Therefore, Gutenberg is a new-age editor that enhances WordPress website development.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"The_Pros_and_Cons_of_WordPress_Block_Editor_Gutenberg\"><\/span>The Pros and Cons of WordPress Block Editor (Gutenberg)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Gutenberg is the WordPress platform\u2019s official and default website editor, which makes it necessary to understand its advantages and disadvantages. It will give you better insight into factors to consider while developing a WordPress site.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Pros_of_Gutenberg_Editor\"><\/span>Pros of Gutenberg Editor<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>It makes&nbsp;<a href=\"https:\/\/positiwise.com\/blog\/7-steps-to-customize-your-wordpress-website\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>WordPress website development<\/strong><\/a>&nbsp;effortless for freshers and experienced developers.&nbsp;<\/li>\n\n\n\n<li>Aids in developing a full-fledged website within the minimal time possible.&nbsp;<\/li>\n\n\n\n<li>Enables to add, delete, and customize every component on the webpage.&nbsp;<\/li>\n\n\n\n<li>It eliminates the requirement of using a third-party webpage builder.&nbsp;<\/li>\n\n\n\n<li>Provides pre-built blocks, aiding in adding new sections impeccably.<\/li>\n\n\n\n<li>Allows to showcase images, videos, lists, and other multimedia stuff on the site.&nbsp;<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cons_of_Gutenberg_Editor\"><\/span>Cons of Gutenberg Editor<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Switching from a traditional editor to Gutenberg can lead to severe unexpected website modifications.&nbsp;<\/li>\n\n\n\n<li>You have to customize each block to make a proper website layout.&nbsp;<\/li>\n\n\n\n<li>Gutenberg can sometimes create compatibility issues with plugins that require updating.<\/li>\n\n\n\n<li>Some themes don\u2019t provide the functionality to customize each block, which can create stability issues.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"The_Difference_Between_WordPress_Gutenberg_Editor_and_Traditional_Editor\"><\/span>The Difference Between WordPress Gutenberg Editor and Traditional Editor<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Gutenberg and Classic editors have a massive difference; you must know about them. It will help you decide whether to use Gutenberg or the classic WordPress editor.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Basis<\/th><th>Gutenberg Editor<\/th><th>Classic WordPress Editor<\/th><\/tr><\/thead><tbody><tr><td>Easiness<\/td><td>You must understand HTML and CSS to create a WordPress site using it.<\/td><td>You only have to work with blocks, and no or minimal HTML and CSS knowledge is required.<\/td><\/tr><tr><td>Features<\/td><td>It offers immense flexibility by adding, deleting, and rearranging website sections.<\/td><td>It lacks flexibility and offers only minimal layout modification.<\/td><\/tr><tr><td>Time and Cost Saving<\/td><td>It saves time and cost as most operations get executed using a drag-and-drop facility.<\/td><td>It takes more time, as developers need to write code for some components to function.<\/td><\/tr><tr><td>Creating Content<\/td><td>Post-editing and formatting tools are available to make blogs appealing and interactive.<\/td><td>A blank area gets provided to add text content for web pages and blog posts.<\/td><\/tr><tr><td>Interface<\/td><td>The interface is intuitive, and every feature is easily accessible on the screen.<\/td><td>Only fundamental features, such as a text editor, are available.<\/td><\/tr><tr><td>Preference<\/td><td>Depends on the project requirement. But, it mostly gets preferred.<\/td><td>It also depends upon the project\u2019s needs.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_To_Get_Started_With_The_Gutenberg_Editor\"><\/span>How To Get Started With The Gutenberg Editor<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To start with the <a href=\"https:\/\/positiwise.com\/blog\/custom-gutenberg-block\">Gutenberg editor development<\/a>, log in to WordPress and access the editor through the following steps:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 1:<\/strong>&nbsp;Open the WordPress dashboard.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 2:<\/strong>&nbsp;Click on the Posts option in the menu available on the left panel.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"423\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/wordpress-posts-add-new-option.png\" alt=\"wordpress posts add new option\" class=\"wp-image-10591\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/wordpress-posts-add-new-option.png 800w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/wordpress-posts-add-new-option-300x159.png 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/wordpress-posts-add-new-option-768x406.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 3:<\/strong>&nbsp;Under Posts, select Add New. And it will open the Gutenberg editor in full-screen mode.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"461\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/post-page-settings-with-block-settings.png\" alt=\"post page settings with block settings\" class=\"wp-image-10589\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/post-page-settings-with-block-settings.png 800w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/post-page-settings-with-block-settings-300x173.png 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/post-page-settings-with-block-settings-768x443.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">On Gutenberg\u2019s interface, you can view multiple block options, tools, and webpage editing mechanisms. To view the Block elements, click the plus (+) icon button in the upper left corner.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"934\" height=\"102\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/plus-icon-wordpress.png\" alt=\"plus icon wordpress\" class=\"wp-image-10588\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/plus-icon-wordpress.png 934w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/plus-icon-wordpress-300x33.png 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/plus-icon-wordpress-768x84.png 768w\" sizes=\"auto, (max-width: 934px) 100vw, 934px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">After clicking on the Toggle Block Inserter (Plus icon button), Gutenberg will provide you with a wide variety of blocks for different purposes, including:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Blocks for Text&nbsp;<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">You can insert a paragraph, headings, lists, quotes, code, table, and even a verse on the webpage by inserting the blocks associated with the text.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Blocks for Media&nbsp;<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Media blocks aid in uploading image, file, video, audio, and even cover on the WordPress site.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Blocks for Design<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">You can use design blocks for buttons, rows, stacks, columns, groups, page breaks, spacing, table of contents, and more.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Widget Blocks<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">With the help of widget blocks, you can show a calendar, category list, custom HTML, latest posts, RSS, page list, search, social sharing icons, archives, search, and more.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Theme Editing Blocks<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">These blocks help to configure post titles, post authors, avatars, post lists, site taglines, query loop, navigation, categories, post excerpts, comments, read more, term descriptions, search result titles, time to read, and more such components.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Embedding Blocks&nbsp;<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Using the embed block, you can connect to YouTube, Twitter, SoundCloud, WordPress, Spotify, Flickr, Vimeo, Reddit, Screencast, Speaker Deck, TikTok, and similar platforms.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Further, you can switch modes by clicking the Tools icon, as highlighted below. Gutenberg offers two primary ways for blocks \u2013 Edit and Select.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"934\" height=\"102\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/wp-edit-option.png\" alt=\"wp edit option\" class=\"wp-image-10592\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/wp-edit-option.png 934w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/wp-edit-option-300x33.png 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/wp-edit-option-768x84.png 768w\" sizes=\"auto, (max-width: 934px) 100vw, 934px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"692\" height=\"480\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/wp-edit-screenshot.png\" alt=\"wp edit screenshot\" class=\"wp-image-10598\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/wp-edit-screenshot.png 692w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/wp-edit-screenshot-300x208.png 300w\" sizes=\"auto, (max-width: 692px) 100vw, 692px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can move a block from one position to another by using the select option. And through the Edit option, you can customize that particular block. In addition, to switch between modes using a keyboard, use escape to choose a specific block and use the enter key to move to the edit option.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Moreover, if anything goes wrong, you can undo and redo it using the arrow icons beside the Tools option.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s examine examples where we will add and customize different blocks using the WordPress Gutenberg Editor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Example_1_Adding_a_List\"><\/span>Example 1: Adding a List<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 1:<\/strong>&nbsp;Click the Toggle Block Inserter (button with plus icon).&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 2:<\/strong>&nbsp;Under the Text block components, drag and drop the List block on the screen.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"687\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/wp-list-option.png\" alt=\"wp list option\" class=\"wp-image-10593\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/wp-list-option.png 400w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/wp-list-option-175x300.png 175w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 3:<\/strong>&nbsp;Gutenberg Editor will allow you to write content for the list.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"902\" height=\"211\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/write-list-items-wp.png\" alt=\"write list items wp\" class=\"wp-image-10594\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/write-list-items-wp.png 902w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/write-list-items-wp-300x70.png 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/write-list-items-wp-768x180.png 768w\" sizes=\"auto, (max-width: 902px) 100vw, 902px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 4:<\/strong>&nbsp;Add the content to the list and place it wherever you want on the webpage.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"281\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/add-content-in-list-wp-1024x281.png\" alt=\"add content in list wp\" class=\"wp-image-10581\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/add-content-in-list-wp-1024x281.png 1024w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/add-content-in-list-wp-300x82.png 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/add-content-in-list-wp-768x210.png 768w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/add-content-in-list-wp.png 1102w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The list will get treated as an individual block, which you can arrange at any part of the webpage. And even you can delete and modify it at any time.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Example_2_Uploading_an_Image_to_the_Webpage\"><\/span>Example 2: Uploading an Image to the Webpage<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To upload an image on the WordPress webpage, we will use the Media block. You can follow the below steps to perform similar actions on your site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 1:<\/strong>&nbsp;Double-click on Image or drag and drop the image block onto the editing area from the options under the Media Block category.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1025\" height=\"368\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/image-module-wp.jpg\" alt=\"image module wp\" class=\"wp-image-10586\" title=\"Edit Gutenberg\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/image-module-wp.jpg 1025w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/image-module-wp-300x108.jpg 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/image-module-wp-768x276.jpg 768w\" sizes=\"auto, (max-width: 1025px) 100vw, 1025px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Once the block gets dropped, it will provide you with three options for uploading an image, which include:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Uploading from the local machine.&nbsp;<\/li>\n\n\n\n<li>Uploading from the media library.&nbsp;<\/li>\n\n\n\n<li>Using the URL of an image.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">It entirely depends upon you which image-uploading method you want to use. Here, we will use the upload button option.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 2:<\/strong>&nbsp;Click the upload button to open the dialog box to select the image from the local machine.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"915\" height=\"473\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/upload-image-in-image-module-wp.png\" alt=\"upload image in image module wp\" class=\"wp-image-10590\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/upload-image-in-image-module-wp.png 915w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/upload-image-in-image-module-wp-300x155.png 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/upload-image-in-image-module-wp-768x397.png 768w\" sizes=\"auto, (max-width: 915px) 100vw, 915px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 3:<\/strong>&nbsp;Select the image and click on the Open button. And you will see the image.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"418\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/image-uploaded.png\" alt=\"image uploaded\" class=\"wp-image-10587\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/image-uploaded.png 800w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/image-uploaded-300x157.png 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/image-uploaded-768x401.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Similarly, if you want to display a video or provide a file to end-users, drag and drop that block and customize it as needed.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Example_3_To_Embed_a_YouTube_Video_Block_on_the_Webpage\"><\/span>Example 3: To Embed a YouTube Video Block on the Webpage<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Sometimes to explain a topic to the end user, you must provide a video tutorial or description. And the best way to do it is by uploading the video on YouTube and embedding it on the WordPress site. It would help reduce the site load, as the video is uploaded on a third-party platform. Also, the video will run smoothly, and the user will easily pause, continue, and adjust the speed using YouTube\u2019s functionality.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 1:<\/strong>&nbsp;Click the plus (+) symbol in the left corner.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 2:<\/strong>&nbsp;From the block category menu, scroll to the Embeds block and select YouTube.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"341\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/youtube-embeded-code.png\" alt=\"youtube embeded code\" class=\"wp-image-10595\" title=\"Youtube Embed\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/youtube-embeded-code.png 800w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/youtube-embeded-code-300x128.png 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/youtube-embeded-code-768x327.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 3:<\/strong>&nbsp;Copy the link of the video from YouTube and paste it on the input field provided by the block. And then click on Embed.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"329\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/youtube-embeded-url-module.png\" alt=\"youtube embeded url module\" class=\"wp-image-10596\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/youtube-embeded-url-module.png 800w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/youtube-embeded-url-module-300x123.png 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/youtube-embeded-url-module-768x316.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 4:<\/strong>&nbsp;The view will be displayed on your blog\/WordPress site webpage.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Example_4_Arranging_the_Blocks\"><\/span>Example 4: Arranging the Blocks<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress Gutenberg editor provides the leverage to change the position of a block. For it, two primary methods are offered. Let\u2019s have a look at both of them.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Method 1:<\/strong>&nbsp;Using the arrows&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You should click on the block to view the associated options. Then, select the arrow icon to move the block up and down as per requirements. In the following example, an image block is getting rearranged.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"341\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/block-arrangement.png\" alt=\"block arrangement\" class=\"wp-image-10584\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/block-arrangement.png 800w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/block-arrangement-300x128.png 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/block-arrangement-768x327.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Method 2:<\/strong>&nbsp;Using the dots icon (six dots).&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Like the arrow method, click on the six dots symbol beside it to move the block. It will provide you with a drop facility for moving the block from one position to another.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"341\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/block-arrangement-with-six-dots.png\" alt=\"block arrangement with six dots\" class=\"wp-image-10583\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/block-arrangement-with-six-dots.png 800w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/block-arrangement-with-six-dots-300x128.png 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/block-arrangement-with-six-dots-768x327.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">In addition to adding different blocks, Gutenberg also offers to view the HTML code of it. In the right panel, you can discover all the advanced settings. All the settings will be displayed by clicking on the three dots symbol in the upper right corner.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"700\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/advanced-settings-option-wp.png\" alt=\"advanced settings option wp\" class=\"wp-image-10582\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/advanced-settings-option-wp.png 400w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/advanced-settings-option-wp-171x300.png 171w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can also view each block\u2019s settings by selecting it. All the associated characteristics and settings will be displayed in the right panel.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For instance, if you select a heading block on the page, you will see the options to customize its color, background, size, appearance, and letter case. Also, you can create that heading as a hyperlink and optimize its functionality using additional CSS classes.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"344\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/drag-and-drop-option-wp.png\" alt=\"drag and drop option wp\" class=\"wp-image-10585\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/drag-and-drop-option-wp.png 800w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/drag-and-drop-option-wp-300x129.png 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/drag-and-drop-option-wp-768x330.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Similarly, you can customize every block, rearrange it on the page, and add additional CSS. Gutenberg is a new-age WordPress editor that anyone can utilize by dragging and dropping blocks and modifying their default settings as per requirements.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"WordPress_Blog_Editor_Gutenberg_vs_The_Legacy_Widgets\"><\/span>WordPress Blog Editor (Gutenberg) vs. The Legacy Widgets<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Before the block functionality of Gutenberg, widgets were one of the most used components on a WordPress website. From social icons, and lists to display calendars, every developer was using widgets. But, with the introduction and advancement of Gutenberg, block-based widgets came into the limelight. After it, the usage of legacy widgets drops exponentially.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With the help of block-based widgets, organizations were able to gain higher control of their website. It made them capable of customizing every component on the webpage and rearranging it as prerequisites. Also, with new releases, it enables to extend website features without installing any third-party plugins.<br>Therefore, Gutenberg improves site functionality and prevents extra load by minimizing the usage of plugins.<\/p>\n\n\n\n<div class=\"wp-block-group bg-shaps border rounded has-background has-global-padding is-layout-constrained wp-container-core-group-is-layout-71df2e02 wp-block-group-is-layout-constrained\" style=\"border-radius:5px;background-color:#f8f9fa;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)\">\n<div class=\"wp-block-group row g-lg-5 g-3 has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group col-lg-8 has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"has-text-align-center fs-2 text-blue lh-sm has-contrast-color has-text-color wp-block-paragraph\"><strong>Schedule a 30-minute free<\/strong> Call for a <strong>WordPress Development Consultation<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s discuss your WordPress project. Schedule a free 30-minute consultation with our WordPress experts. We&#8217;ll evaluate your needs and provide solutions. Book now.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-left is-layout-flex wp-container-core-buttons-is-layout-fa5e4718 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-base-color has-text-color has-background wp-element-button\" href=\"https:\/\/positiwise.com\/technologies\/wordpress-development\" style=\"border-radius:100px;background-color:#ed7923;padding-top:10px;padding-right:30px;padding-bottom:10px;padding-left:30px\"><strong>TRY 15 DAYS RISK-FREE TRIAL<\/strong><\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full col-lg-4\"><img loading=\"lazy\" decoding=\"async\" width=\"367\" height=\"348\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/07\/SeekPng.com_female-hand-png_4128668.png\" alt=\"WordPress Development Consultant\" class=\"wp-image-11254\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/07\/SeekPng.com_female-hand-png_4128668.png 367w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/07\/SeekPng.com_female-hand-png_4128668-300x284.png 300w\" sizes=\"auto, (max-width: 367px) 100vw, 367px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Concluding_Up\"><\/span>Concluding Up<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Gutenberg is now the default editor for building WordPress webpages and blog posts. It offers a block-based mechanism, allowing you to rearrange, delete, or add a section on the page. Whether it\u2019s about lists, headings, sub-headings, images, videos, or any other component, Gutenberg offers it as an individual block.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Furthermore, it\u2019s more advanced, popular, and highly utilized than the classic WordPress editor. Nowadays, most WordPress developers prefer to utilize it for faster development. While availing of WordPress development services, you must enquire about the type of editor used by the developer. It would help you effortlessly determine the right time and cost of the WordPress project.<\/p>\n  <div class=\"related-post slider\">\r\n        <div class=\"headline\">Related Posts<\/div>\r\n    <div class=\"post-list owl-carousel\">\r\n\r\n            <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"7  Steps to Customize Your WordPress Website\" href=\"https:\/\/positiwise.com\/blog\/7-steps-to-customize-your-wordpress-website\">\r\n\r\n      <img loading=\"lazy\" decoding=\"async\" width=\"1021\" height=\"621\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/10\/steps-to-customize-your-wordpress-website.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"Steps to Customize Your WordPress Website\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/10\/steps-to-customize-your-wordpress-website.jpg 1021w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/10\/steps-to-customize-your-wordpress-website-300x182.jpg 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/10\/steps-to-customize-your-wordpress-website-768x467.jpg 768w\" sizes=\"auto, (max-width: 1021px) 100vw, 1021px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"7  Steps to Customize Your WordPress Website\" href=\"https:\/\/positiwise.com\/blog\/7-steps-to-customize-your-wordpress-website\">\r\n        7  Steps to Customize Your WordPress Website  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"How To Create WordPress Theme Mobile Responsive?\" href=\"https:\/\/positiwise.com\/blog\/how-to-create-wordpress-theme-mobile-responsive\">\r\n\r\n      <img loading=\"lazy\" decoding=\"async\" width=\"1021\" height=\"621\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/04\/how-to-create-wordpress-theme-mobile-responsive-1-1.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"How To Create WordPress Theme Mobile Responsive?\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/04\/how-to-create-wordpress-theme-mobile-responsive-1-1.jpg 1021w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/04\/how-to-create-wordpress-theme-mobile-responsive-1-1-300x182.jpg 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/04\/how-to-create-wordpress-theme-mobile-responsive-1-1-768x467.jpg 768w\" sizes=\"auto, (max-width: 1021px) 100vw, 1021px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"How To Create WordPress Theme Mobile Responsive?\" href=\"https:\/\/positiwise.com\/blog\/how-to-create-wordpress-theme-mobile-responsive\">\r\n        How To Create WordPress Theme Mobile Responsive?  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"An Introduction To Gutenberg Editor Development in WordPress\" href=\"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress\">\r\n\r\n      <img loading=\"lazy\" decoding=\"async\" width=\"1021\" height=\"621\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/05\/an-introduction-to-gutenberg-editor-development-in-wordpress-1.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"An Introduction To Gutenberg Editor Development in WordPress\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/05\/an-introduction-to-gutenberg-editor-development-in-wordpress-1.jpg 1021w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/05\/an-introduction-to-gutenberg-editor-development-in-wordpress-1-300x182.jpg 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/05\/an-introduction-to-gutenberg-editor-development-in-wordpress-1-768x467.jpg 768w\" sizes=\"auto, (max-width: 1021px) 100vw, 1021px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"An Introduction To Gutenberg Editor Development in WordPress\" href=\"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress\">\r\n        An Introduction To Gutenberg Editor Development in WordPress  <\/a>\r\n\r\n        <\/div>\r\n      \r\n  <\/div>\r\n\r\n  <script>\r\n      <\/script>\r\n  <style>\r\n    .related-post {}\r\n\r\n    .related-post .post-list {\r\n      text-align: left;\r\n          }\r\n\r\n    .related-post .post-list .item {\r\n      margin: 5px;\r\n      padding: 0px;\r\n          }\r\n\r\n    .related-post .headline {\r\n      font-size: 2rem !important;\r\n      color: #212529 !important;\r\n          }\r\n\r\n    .related-post .headline {\r\nmargin-top: 0;\r\npadding-left: 1%;\r\n}.related-post .post-list .item .post_thumb {\r\n      max-height: 220px;\r\n      margin: 0px 0px 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n          }\r\n\r\n    .related-post .post-list .item .post_title {\r\n      font-size: 1rem;\r\n      color: #212529;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n      text-decoration: none;\r\n          }\r\n\r\n    .related-post .post-list .item .post_excerpt {\r\n      font-size: 13px;\r\n      color: #3f3f3f;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n      text-decoration: none;\r\n          }\r\n\r\n    .related-post .owl-dots .owl-dot {\r\n          }\r\n\r\n      <\/style>\r\n      <script>\r\n      jQuery(document).ready(function($) {\r\n        $(\".related-post .post-list\").owlCarousel({\r\n          items: 3,\r\n          responsiveClass: true,\r\n          responsive: {\r\n            0: {\r\n              items: 1,\r\n            },\r\n            768: {\r\n              items: 2,\r\n            },\r\n            1200: {\r\n              items: 3,\r\n            }\r\n          },\r\n                      rewind: true,\r\n                                loop: true,\r\n                                center: true,\r\n                                autoplay: true,\r\n            autoplayHoverPause: true,\r\n                                nav: true,\r\n            navSpeed: 1000,\r\n            navText: ['<i class=\"fas fa-chevron-left\"><\/i>', '<i class=\"fas fa-chevron-right\"><\/i>'],\r\n                                dots: true,\r\n            dotsSpeed: 1200,\r\n                                                    rtl: false,\r\n          \r\n        });\r\n      });\r\n    <\/script>\r\n  <\/div>\r\n","protected":false},"excerpt":{"rendered":"<p>Quick Overview:When you start with WordPress development or initiate to learn about the platform, then getting introduced to [&hellip;]<\/p>\n  <div class=\"related-post slider\">\r\n        <div class=\"headline\">Related Posts<\/div>\r\n    <div class=\"post-list owl-carousel\">\r\n\r\n            <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"7  Steps to Customize Your WordPress Website\" href=\"https:\/\/positiwise.com\/blog\/7-steps-to-customize-your-wordpress-website\">\r\n\r\n      <img width=\"1021\" height=\"621\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/10\/steps-to-customize-your-wordpress-website.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"Steps to Customize Your WordPress Website\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/10\/steps-to-customize-your-wordpress-website.jpg 1021w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/10\/steps-to-customize-your-wordpress-website-300x182.jpg 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/10\/steps-to-customize-your-wordpress-website-768x467.jpg 768w\" sizes=\"auto, (max-width: 1021px) 100vw, 1021px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"7  Steps to Customize Your WordPress Website\" href=\"https:\/\/positiwise.com\/blog\/7-steps-to-customize-your-wordpress-website\">\r\n        7  Steps to Customize Your WordPress Website  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"How To Create WordPress Theme Mobile Responsive?\" href=\"https:\/\/positiwise.com\/blog\/how-to-create-wordpress-theme-mobile-responsive\">\r\n\r\n      <img width=\"1021\" height=\"621\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/04\/how-to-create-wordpress-theme-mobile-responsive-1-1.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"How To Create WordPress Theme Mobile Responsive?\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/04\/how-to-create-wordpress-theme-mobile-responsive-1-1.jpg 1021w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/04\/how-to-create-wordpress-theme-mobile-responsive-1-1-300x182.jpg 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/04\/how-to-create-wordpress-theme-mobile-responsive-1-1-768x467.jpg 768w\" sizes=\"auto, (max-width: 1021px) 100vw, 1021px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"How To Create WordPress Theme Mobile Responsive?\" href=\"https:\/\/positiwise.com\/blog\/how-to-create-wordpress-theme-mobile-responsive\">\r\n        How To Create WordPress Theme Mobile Responsive?  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"How to Migrate Your WordPress Website: A Comprehensive Guide\" href=\"https:\/\/positiwise.com\/blog\/how-to-migrate-your-wordpress-website-a-comprehensive-guide\">\r\n\r\n      <img width=\"1021\" height=\"621\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/05\/how-to-migrate-your-wordpress-website-a-comprehensive-guide-1.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"How to Migrate Your WordPress Website: A Comprehensive Guide\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/05\/how-to-migrate-your-wordpress-website-a-comprehensive-guide-1.jpg 1021w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/05\/how-to-migrate-your-wordpress-website-a-comprehensive-guide-1-300x182.jpg 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/05\/how-to-migrate-your-wordpress-website-a-comprehensive-guide-1-768x467.jpg 768w\" sizes=\"auto, (max-width: 1021px) 100vw, 1021px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"How to Migrate Your WordPress Website: A Comprehensive Guide\" href=\"https:\/\/positiwise.com\/blog\/how-to-migrate-your-wordpress-website-a-comprehensive-guide\">\r\n        How to Migrate Your WordPress Website: A Comprehensive Guide  <\/a>\r\n\r\n        <\/div>\r\n      \r\n  <\/div>\r\n\r\n  <script>\r\n      <\/script>\r\n  <style>\r\n    .related-post {}\r\n\r\n    .related-post .post-list {\r\n      text-align: left;\r\n          }\r\n\r\n    .related-post .post-list .item {\r\n      margin: 5px;\r\n      padding: 0px;\r\n          }\r\n\r\n    .related-post .headline {\r\n      font-size: 2rem !important;\r\n      color: #212529 !important;\r\n          }\r\n\r\n    .related-post .headline {\r\nmargin-top: 0;\r\npadding-left: 1%;\r\n}.related-post .post-list .item .post_thumb {\r\n      max-height: 220px;\r\n      margin: 0px 0px 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n          }\r\n\r\n    .related-post .post-list .item .post_title {\r\n      font-size: 1rem;\r\n      color: #212529;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n      text-decoration: none;\r\n          }\r\n\r\n    .related-post .post-list .item .post_excerpt {\r\n      font-size: 13px;\r\n      color: #3f3f3f;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n      text-decoration: none;\r\n          }\r\n\r\n    .related-post .owl-dots .owl-dot {\r\n          }\r\n\r\n      <\/style>\r\n      <script>\r\n      jQuery(document).ready(function($) {\r\n        $(\".related-post .post-list\").owlCarousel({\r\n          items: 3,\r\n          responsiveClass: true,\r\n          responsive: {\r\n            0: {\r\n              items: 1,\r\n            },\r\n            768: {\r\n              items: 2,\r\n            },\r\n            1200: {\r\n              items: 3,\r\n            }\r\n          },\r\n                      rewind: true,\r\n                                loop: true,\r\n                                center: true,\r\n                                autoplay: true,\r\n            autoplayHoverPause: true,\r\n                                nav: true,\r\n            navSpeed: 1000,\r\n            navText: ['<i class=\"fas fa-chevron-left\"><\/i>', '<i class=\"fas fa-chevron-right\"><\/i>'],\r\n                                dots: true,\r\n            dotsSpeed: 1200,\r\n                                                    rtl: false,\r\n          \r\n        });\r\n      });\r\n    <\/script>\r\n  <\/div>\r\n","protected":false},"author":4,"featured_media":9783,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[706],"tags":[],"class_list":["post-8411","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>A Guide To Gutenberg Editor Development in WordPress<\/title>\n<meta name=\"description\" content=\"A comprehensive guide about WordPress Gutenberg editor - A detailed instructions on how to use WordPress Gutenberg editor effectively.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Guide To Gutenberg Editor Development in WordPress\" \/>\n<meta property=\"og:description\" content=\"A comprehensive guide about WordPress Gutenberg editor - A detailed instructions on how to use WordPress Gutenberg editor effectively.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress\" \/>\n<meta property=\"og:site_name\" content=\"Positiwise\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/positiwise\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-02T08:44:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-31T08:11:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/05\/an-introduction-to-gutenberg-editor-development-in-wordpress-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1021\" \/>\n\t<meta property=\"og:image:height\" content=\"621\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jemin Desai\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@positiwise\" \/>\n<meta name=\"twitter:site\" content=\"@positiwise\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jemin Desai\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/an-introduction-to-gutenberg-editor-development-in-wordpress#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/an-introduction-to-gutenberg-editor-development-in-wordpress\"},\"author\":{\"name\":\"Jemin Desai\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#\\\/schema\\\/person\\\/c5edd81b0333e026938f30ed21953916\"},\"headline\":\"An Introduction To Gutenberg Editor Development in WordPress\",\"datePublished\":\"2023-05-02T08:44:55+00:00\",\"dateModified\":\"2023-08-31T08:11:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/an-introduction-to-gutenberg-editor-development-in-wordpress\"},\"wordCount\":2071,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/an-introduction-to-gutenberg-editor-development-in-wordpress#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/an-introduction-to-gutenberg-editor-development-in-wordpress-1.jpg\",\"articleSection\":[\"WordPress Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/positiwise.com\\\/blog\\\/an-introduction-to-gutenberg-editor-development-in-wordpress#respond\"]}],\"copyrightYear\":\"2023\",\"copyrightHolder\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/an-introduction-to-gutenberg-editor-development-in-wordpress\",\"url\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/an-introduction-to-gutenberg-editor-development-in-wordpress\",\"name\":\"A Guide To Gutenberg Editor Development in WordPress\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/an-introduction-to-gutenberg-editor-development-in-wordpress#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/an-introduction-to-gutenberg-editor-development-in-wordpress#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/an-introduction-to-gutenberg-editor-development-in-wordpress-1.jpg\",\"datePublished\":\"2023-05-02T08:44:55+00:00\",\"dateModified\":\"2023-08-31T08:11:26+00:00\",\"description\":\"A comprehensive guide about WordPress Gutenberg editor - A detailed instructions on how to use WordPress Gutenberg editor effectively.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/an-introduction-to-gutenberg-editor-development-in-wordpress#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/positiwise.com\\\/blog\\\/an-introduction-to-gutenberg-editor-development-in-wordpress\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/an-introduction-to-gutenberg-editor-development-in-wordpress#primaryimage\",\"url\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/an-introduction-to-gutenberg-editor-development-in-wordpress-1.jpg\",\"contentUrl\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/an-introduction-to-gutenberg-editor-development-in-wordpress-1.jpg\",\"width\":1021,\"height\":621,\"caption\":\"An Introduction To Gutenberg Editor Development in WordPress\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/an-introduction-to-gutenberg-editor-development-in-wordpress#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/positiwise.com\\\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"An Introduction To Gutenberg Editor Development in WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/\",\"name\":\"Positiwise\",\"description\":\"Providing Full-cycle Software Development Services\",\"publisher\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#organization\"},\"alternateName\":\"Positiwise Software Pvt Ltd\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#organization\",\"name\":\"Positiwise\",\"alternateName\":\"Positiwise Software Pvt Ltd\",\"url\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/logo.png\",\"width\":202,\"height\":29,\"caption\":\"Positiwise\"},\"image\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/positiwise\\\/\",\"https:\\\/\\\/x.com\\\/positiwise\",\"https:\\\/\\\/github.com\\\/positiwise\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/positiwise\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#\\\/schema\\\/person\\\/c5edd81b0333e026938f30ed21953916\",\"name\":\"Jemin Desai\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/288c332112f4a87cfce31dcb7037bd4d22db699444c717af477ae7726459c4c7?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/288c332112f4a87cfce31dcb7037bd4d22db699444c717af477ae7726459c4c7?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/288c332112f4a87cfce31dcb7037bd4d22db699444c717af477ae7726459c4c7?s=96&r=g\",\"caption\":\"Jemin Desai\"},\"description\":\"Jemin Desai is Chief Marketing Officer at Positiwise Software Pvt Ltd, he is responsible for creating and accelerating the company\u2019s marketing strategy and brand recognition across the globe. He has more than 20 years of experience in senior marketing roles at the Inc. 5000 Fastest-Growing Private Companies.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/jeminseo\"],\"url\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/author\\\/jemin-desai\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"A Guide To Gutenberg Editor Development in WordPress","description":"A comprehensive guide about WordPress Gutenberg editor - A detailed instructions on how to use WordPress Gutenberg editor effectively.","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:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress","og_locale":"en_US","og_type":"article","og_title":"A Guide To Gutenberg Editor Development in WordPress","og_description":"A comprehensive guide about WordPress Gutenberg editor - A detailed instructions on how to use WordPress Gutenberg editor effectively.","og_url":"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress","og_site_name":"Positiwise","article_publisher":"https:\/\/www.facebook.com\/positiwise\/","article_published_time":"2023-05-02T08:44:55+00:00","article_modified_time":"2023-08-31T08:11:26+00:00","og_image":[{"width":1021,"height":621,"url":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/05\/an-introduction-to-gutenberg-editor-development-in-wordpress-1.jpg","type":"image\/jpeg"}],"author":"Jemin Desai","twitter_card":"summary_large_image","twitter_creator":"@positiwise","twitter_site":"@positiwise","twitter_misc":{"Written by":"Jemin Desai","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress#article","isPartOf":{"@id":"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress"},"author":{"name":"Jemin Desai","@id":"https:\/\/positiwise.com\/blog\/#\/schema\/person\/c5edd81b0333e026938f30ed21953916"},"headline":"An Introduction To Gutenberg Editor Development in WordPress","datePublished":"2023-05-02T08:44:55+00:00","dateModified":"2023-08-31T08:11:26+00:00","mainEntityOfPage":{"@id":"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress"},"wordCount":2071,"commentCount":0,"publisher":{"@id":"https:\/\/positiwise.com\/blog\/#organization"},"image":{"@id":"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress#primaryimage"},"thumbnailUrl":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/05\/an-introduction-to-gutenberg-editor-development-in-wordpress-1.jpg","articleSection":["WordPress Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress#respond"]}],"copyrightYear":"2023","copyrightHolder":{"@id":"https:\/\/positiwise.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress","url":"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress","name":"A Guide To Gutenberg Editor Development in WordPress","isPartOf":{"@id":"https:\/\/positiwise.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress#primaryimage"},"image":{"@id":"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress#primaryimage"},"thumbnailUrl":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/05\/an-introduction-to-gutenberg-editor-development-in-wordpress-1.jpg","datePublished":"2023-05-02T08:44:55+00:00","dateModified":"2023-08-31T08:11:26+00:00","description":"A comprehensive guide about WordPress Gutenberg editor - A detailed instructions on how to use WordPress Gutenberg editor effectively.","breadcrumb":{"@id":"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress#primaryimage","url":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/05\/an-introduction-to-gutenberg-editor-development-in-wordpress-1.jpg","contentUrl":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/05\/an-introduction-to-gutenberg-editor-development-in-wordpress-1.jpg","width":1021,"height":621,"caption":"An Introduction To Gutenberg Editor Development in WordPress"},{"@type":"BreadcrumbList","@id":"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/positiwise.com\/blog"},{"@type":"ListItem","position":2,"name":"An Introduction To Gutenberg Editor Development in WordPress"}]},{"@type":"WebSite","@id":"https:\/\/positiwise.com\/blog\/#website","url":"https:\/\/positiwise.com\/blog\/","name":"Positiwise","description":"Providing Full-cycle Software Development Services","publisher":{"@id":"https:\/\/positiwise.com\/blog\/#organization"},"alternateName":"Positiwise Software Pvt Ltd","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/positiwise.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/positiwise.com\/blog\/#organization","name":"Positiwise","alternateName":"Positiwise Software Pvt Ltd","url":"https:\/\/positiwise.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/positiwise.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/07\/logo.png","contentUrl":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/07\/logo.png","width":202,"height":29,"caption":"Positiwise"},"image":{"@id":"https:\/\/positiwise.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/positiwise\/","https:\/\/x.com\/positiwise","https:\/\/github.com\/positiwise","https:\/\/www.linkedin.com\/company\/positiwise"]},{"@type":"Person","@id":"https:\/\/positiwise.com\/blog\/#\/schema\/person\/c5edd81b0333e026938f30ed21953916","name":"Jemin Desai","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/288c332112f4a87cfce31dcb7037bd4d22db699444c717af477ae7726459c4c7?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/288c332112f4a87cfce31dcb7037bd4d22db699444c717af477ae7726459c4c7?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/288c332112f4a87cfce31dcb7037bd4d22db699444c717af477ae7726459c4c7?s=96&r=g","caption":"Jemin Desai"},"description":"Jemin Desai is Chief Marketing Officer at Positiwise Software Pvt Ltd, he is responsible for creating and accelerating the company\u2019s marketing strategy and brand recognition across the globe. He has more than 20 years of experience in senior marketing roles at the Inc. 5000 Fastest-Growing Private Companies.","sameAs":["https:\/\/www.linkedin.com\/in\/jeminseo"],"url":"https:\/\/positiwise.com\/blog\/author\/jemin-desai"}]}},"_links":{"self":[{"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/posts\/8411","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/comments?post=8411"}],"version-history":[{"count":9,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/posts\/8411\/revisions"}],"predecessor-version":[{"id":13181,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/posts\/8411\/revisions\/13181"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/media\/9783"}],"wp:attachment":[{"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/media?parent=8411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/categories?post=8411"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/tags?post=8411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}