In this post, we\u2019ll talk about the WordPress Gutenberg editor. So, if you want to learn what Gutenberg is, what makes it different from the old WordPress editor, how it functions, and the advantages and disadvantages of using Gutenberg, this post is for you.<\/p>\n\n\n\n
Gutenberg is the new WordPress block editor available as part of WordPress 5.0 and later, which aims to facilitate users\u2019 experience in creating websites. Gutenberg uses blocks to create various page layouts and add different content. As WordPress states, the editor suits media-rich pages and posts.<\/p>\n\n\n\n
The release of the WordPress Gutenberg editor<\/a> was inspired by user-friendly and intuitive website builders such as Wix or Squarespace. Likewise, the WordPress community has also stimulated the appearance of Gutenberg by creating such page builder plugins as Elementor and Divi. <\/p>\n\n\n\n Their priority is to empower customers who don\u2019t have much website creation experience to make their web pages without any assistance. So, editing content with Gutenberg, you\u2019ll see the page almost as it will look on the front end.<\/p>\n\n\n\n Here are some of Gutenberg\u2019s most notable benefits:<\/p>\n\n\n\n In the following sections, we will delve deeper into each of these benefits, exploring how Gutenberg not only simplifies web design, but also improves efficiency and allows for a seamless mobile experience.<\/p>\n\n\n\n If you have installed the latest WordPress version, you already have the WordPress Gutenberg editor. The default WordPress theme is Twenty Twenty\u2013Two, and if you want to edit the site, the WordPress editor will greet you.<\/p>\n\n\n\n You can also reach the editor via the Appearance menu on your WordPress dashboard.<\/p>\n\n\n\n Alternatively, it\u2019s possible to install and activate the WordPress Gutenberg plugin<\/a>. It works with WordPress 5.8 and higher and got its last update in April 2022.<\/p>\n\n\n\n To get the most out of the WordPress Gutenberg editor, you should use a compatible theme. Besides the default Twenty Twenty Two theme, you can choose another one that suits your needs best. For instance, Palmeria<\/a> is good for hotel booking websites. <\/p>\n\n\n\n Once you\u2019ve chosen the theme, you can select a page or post that you wish to edit. Also, you can create them from scratch. The interface will be similar in these cases.<\/p>\n\n\n\n Let\u2019s look at the Gutenberg block editor<\/a> interface. You\u2019ll work with three areas while creating and editing the content:<\/p>\n\n\n\n The main area that contains the content and basically represents the page is the Block content area<\/strong>.<\/p>\n\n\n\n Each piece of content (an image, a paragraph, etc.) is a block that you can select and edit.<\/p>\n\n\n\n On the left, you\u2019ll see the Block Inserter<\/strong> that lets you find the necessary blocks.<\/p>\n\n\n\n You can bring the block inserter into view by pressing the \u2018Toggle block inserter\u2019 button on top.<\/p>\n\n\n\n There are several block categories, such as text, media, design, widgets, theme, and embed. They let you work with the content more easily.<\/p>\n\n\n\n The third part of the Gutenberg interface is the Settings Sidebar<\/strong>. It lets you adjust the settings of a specific block or the page in general. You\u2019ll find this element on the right.<\/p>\n\n\n\n The settings will vary according to the block that you are editing. For instance, in the screenshot above, you can see a selected image and the rounded style applied to the image with the help of block settings.<\/p>\n\n\n\n Let\u2019s see the basic things you can do with the Gutenberg for WordPress.<\/p>\n\n\n\n As we have already mentioned, Gutenberg uses blocks to create the page layout and design. Blocks let you not only add different types of content (such as texts and media) but also arrange the space (adding dividers, spacers, etc., and grouping blocks).<\/p>\n\n\n\n To make the process of block adding intuitive and straightforward, the editor shows the note \u2018Type \/ to choose a block\u2019 and the black add block button.<\/p>\n\n\n\n Another feature of the Gutenberg editor is the use of columns<\/strong>. Creating columns and rows allows you to modify the page layout according to your needs. This means greater flexibility while editing pages and posts.<\/p>\n\n\n\n You can find Columns in the section \u2018Design\u2019 in the list of blocks. It\u2019s possible to choose from pre-designed column layouts or skip the stage. In the latter case, you\u2019ll get a two-column row that you can adjust according to your desire.<\/p>\n\n\n\n After adding the column block, you can start adding the content. To do this, you should simply select the necessary block (images, paragraphs, lists, or any other.)<\/p>\n\n\n\n It is also easy to change the number of columns later if you decide to change the design. It\u2019s only necessary to open the settings and adjust the number.<\/p>\n\n\n\n All columns in Gutenberg are responsive, so you don\u2019t need to worry about the page appearance on mobile devices. Now, let\u2019s dwell a bit deeper into website building with Gutenberg.<\/p>\n\n\n\n First, you can create new website pages with Gutenberg. Open Pages on your WordPress dashboard and press \u2018Add new\u2019.<\/p>\n\n\n\n Then, you\u2019ll get a blank page to add all the elements you need. <\/p>\n\n\n\n Add the page title and choose the next block. The good news is that Gutenberg includes premade patterns that combine several blocks. To use them, you should switch to the \u2018Patterns\u2019 tab in the Block Inserter, select the necessary category, browse available patterns, and insert it. <\/p>\n\n\n\n For instance, in the screenshot above, we have used the pattern with three columns that contain images and texts.<\/p>\n\n\n\n Afterward, you can adjust the block elements, i.e., customize colors and use your images. Below, you can see that we have changed the block background color using the block settings on the right.<\/p>\n\n\n\n Similarly, you can change text blocks, selecting colors and sizes.<\/p>\n\n\n\n You should note that while editing the page, you won\u2019t see the header (which depends on the theme you use). You can preview the page and make sure your page looks good after making all necessary changes. To view the page, choose \u2018Preview\u2019 in the upper panel.<\/p>\n\n\n\n Then, you\u2019ll see the page as it will look after publishing.<\/p>\n\n\n\n If necessary, you can continue editing the page.<\/p>\n\n\n\n The WordPress Gutenberg editor lets you add blocks to groups and see them in a list view, which you can find in the upper panel.<\/p>\n\n\n\n In the list of blocks, you can select the necessary one and edit it. Namely, you can change the level of headings, set text alignment, typography, etc.<\/p>\n\n\n\n The above screenshot shows the paragraph and its customization options.<\/p>\n\n\n\n It\u2019s also possible to edit general page settings, such as status, visibility, permalink, and page attributes.<\/p>\n\n\n\n Creating and editing posts with Gutenberg is similar to creating pages. You should open Posts on the WordPress dashboard and press \u2018Add New\u2019.<\/p>\n\n\n\n Alternatively, you can find a standard \u2018Hello World!\u2019 post and press \u2018Edit\u2019.<\/p>\n\n\n\n You\u2019ll see the post heading and a greeting paragraph.<\/p>\n\n\n\n Then, you are free to add the necessary blocks to your post. For instance, if you want to display a gallery, choose \u2018Gallery\u2019 from the list of blocks. You can upload images directly from your computer or select them in your Media Library.<\/p>\n\n\n\n Depending on the number of images you want to upload, you can create different gallery layouts. The Gutenberg editor adjusts to your needs and arranges images to make them look attractive. If you wish, you can adjust the number of columns and thus customize the gallery layout.<\/p>\n\n\n\n Moreover, you can add captions to each image (as shown in the screenshot above).<\/p>\n\n\n\n It\u2019s also possible to insert other blocks typical for blog posts, such as paragraphs, quotes, etc. In the screenshot below, you can see a quote added after images. The settings let you choose the quote style, typography, and appearance.<\/p>\n\n\n\n When you\u2019ve finished creating your post, you can preview it similarly to previewing the page (by clicking on Preview in the upper panel). The post usually will display a date, author, and category.<\/p>\n\n\n\n You can adjust the URL, category, tags, and featured image in the post settings. After finishing editing, you should publish your post. If you were editing the default \u2018Hello world!\u2019 post, you\u2019d see the \u2018Update\u2019 button on top. If you created a new post, it\u2019s necessary to press \u2018Publish\u2019 (instead of \u2018Update\u2019).<\/p>\n\n\n\n The featured image can be displayed in the post preview on the general blog page, depending on your theme. <\/p>\n\n\n\n To make your page or post more engaging, you are likely to use pictures. The WordPress Gutenberg editor has several options for adding media:<\/p>\n\n\n\n To add a single image, you should use the Image block. Afterward, it\u2019s possible to select the image from a local drive, Media Library, or URL.<\/p>\n\n\n\n In the settings, you can customize the style (default or rounded), alt text, size, and dimensions to make your image look fantastic.<\/p>\n\n\n\n As for galleries, we have already touched upon them in post creation. Here, we\u2019ll add that Gutenberg allows you to experiment with the layout, so you can choose the number of columns, image cropping, and image size to ensure your gallery displays the images to the best advantage.<\/p>\n\n\n\n In the screenshot below, you can see a 5-column layout with cropped images.<\/p>\n\n\n\n If you switch to a 4-column layout without image cropping, you\u2019ll see that one image differs a lot from the rest (as shown below).<\/p>\n\n\n\n If necessary, you can use a block containing both an image and a text. It facilitates adjusting page layout, as you can quickly set the alignment and decide whether to show media on the right or left. Additionally, it\u2019s possible to customize image cropping so that it fills the column, media width, and image size.<\/p>\n\n\n\n Another useful option is adding text over an image, which you can apply for headings, for instance. You can use the Cover block to create such an overlay.<\/p>\n\n\n\n In the settings, you can choose the type of background (fixed or repeated), the image focal point, and the overlay type. Particularly, it\u2019s possible to apply the overlay of a specific color or a gradient, customizing its opacity.<\/p>\n\n\n\n Now, as we\u2019ve looked at the basic Gutenberg functions, let\u2019s explore its advantages and disadvantages.<\/p>\n\n\n\n It\u2019s worth mentioning that Gutenberg has various useful features that facilitate website creation for people with minimum experience in this sphere.<\/p>\n\n\n\n As we\u2019ve already said, block usage is the WordPress Gutenberg distinguishing feature that aims to provide a user-friendly experience. Indeed, Gutenberg has numerous blocks for different purposes, and you can preview the blocks before inserting them to get an idea of what they look like and do. <\/p>\n\n\n\n Using the easy block search, you can find the necessary item faster. Furthermore, it\u2019s possible to hide unnecessary blocks in Preferences. Thus, the blocks you use most will always be at hand.<\/p>\n\n\n\n Gutenberg lets you create groups and reusable blocks<\/strong> for faster page editing. After selecting several blocks, you can add them to a group using the settings (menu).<\/p>\n\n\n\n Afterward, you can see the group and its elements in the List view. It also allows you to add the group to reusable blocks.<\/p>\n\n\n\n The great advantage of reusable blocks is the possibility of adding the layout that you often use with one mouse click. For instance, you can make your pages look consistent by using the same pricing blocks for services on various pages. <\/p>\n\n\n\n After creating the design and selecting the blocks, you can open the settings and press \u2018Add to Reusable blocks\u2019.<\/p>\n\n\n\n Then, it\u2019s necessary to name the block.<\/p>\n\n\n\n After that, you can open the page where the block should be added and find it on the Reusable tab in the list of blocks.<\/p>\n\n\n\n Simply drag and drop it to the place where you want it to appear.<\/p>\n\n\n\n The peculiarity of Reusable blocks in Gutenberg is the necessity to convert a reusable block to a regular one if you want to edit it.<\/p>\n\n\n\n If you edit the reusable block on the page without converting it, the changes will be saved automatically. As you can see in the screenshot above, our reusable block contains three columns with image blocks, headings, and text. If we substitute any element (for instance, add a picture), it will affect the reusable block itself, not only the one we inserted. So, if you need to customize reusable blocks, remember to convert them.<\/p>\n\n\n\n Without much trouble, you can embed various types of content. Namely, it\u2019s easy to add media from third-party sources and social networks. Using standard Gutenberg blocks, you can incorporate content from YouTube, Vimeo, Spotify, SoundCloud, Twitter, and numerous other sources.<\/p>\n\n\n\n One of the handiest Gutenberg editor features is its drag-and-drop interface. You can rearrange blocks into the desired layout by dragging and dropping them in the content area. Likewise, it\u2019s possible to move and rearrange blocks in the List view.<\/p>\n\n\n\n Furthermore, Gutenberg features visual customization of many page items. In particular, you can create and adjust buttons without coding.<\/p>\n\n\n\n On top of that, you don’t have to reload the page to save the changes, as it was before. Gutenberg saves all the changes automatically.<\/p>\n\n\n\n Using the Gutenberg editor, you can create responsive websites. This is a big advantage, as more and more people use mobile devices to browse the Internet.<\/p>\n\n\n\n There are two editing modes in Gutenberg: HTML and visual. Thus, you can edit the block coding if necessary, which is a useful feature in any white label WordPress development<\/a>. The screenshot below shows two identical text blocks with a link presented in these modes. To change the coding, you should open the options of the necessary block and select \u2018Edit as HTML\u2019.<\/p>\n\n\n\n Besides, Gutenberg offers tools for developers to create their own blocks. <\/p>\n\n\n\n For working without distractions, the WordPress Gutenberg editor offers a full-screen mode. If you don\u2019t switch on this mode, you\u2019ll see the WordPress dashboard.<\/p>\n\n\n\n When working in full-screen mode, you get more space for content editing.<\/p>\n\n\n\n The information box is a useful feature for those who need to check the number of words, characters, paragraphs, and headings. Press the \u2018i\u2019 icon, and you\u2019ll see statistics and the document outline.<\/p>\n\n\n\n Although the WordPress Gutenberg editor has numerous attractive features, it also has a few drawbacks. Let\u2019s talk about them.<\/p>\n\n\n\n For a new user, it can be hard to master block development. For instance, after adding a gallery and inserting images, it can be challenging to select the whole Gallery block (not separate images) to customize the block. In this case, it\u2019s a good idea to learn to use the List view function and select the required parent block using the list.<\/p>\n\n\n\n Furthermore, each paragraph in Gutenberg is a block. So, formatting and HTML editing should be applied to each piece separately, and you\u2019ll need to switch the mode for each paragraph you wish to change. For long posts, it can be quite challenging.<\/p>\n\n\n\n Finding necessary options is not always easy, either. The editor has a double sidebar and a double scrollbar, so it\u2019s sometimes hard for beginners to get to the required settings.<\/p>\n\n\n\n There can be compatibility issues for various themes and plugins, as not all of them work seamlessly with the editor. Likewise, APIs for themes and plugins can be inaccessible in Gutenberg.<\/p>\n\n\n\n Gutenberg doesn\u2019t support all meta boxes, which can be challenging for developers. Also, some shortcuts don\u2019t work. For instance, if you are used to changing heading levels with the Alt + Shift + number combination, you\u2019ll have to change the block type.<\/p>\n\n\n\n It\u2019s impossible to state that Gutenberg is a page builder where you can edit all content via the front end. You still have to work with the WordPress admin panel to adjust page elements.<\/p>\n\n\n\n Likewise, the WordPress Gutenberg editor differs from the previous editor – the TinyMCE editor or the Classic editor. So, as was mentioned, not all functions are intuitive, and you may need some time to learn the features.<\/p>\n\n\n\n The Classic editor was the default WordPress editor before Gutenberg was introduced. One of the main differences between editors is their interface. The Classic editor looks like Microsoft Word and functions as a simple text editor with formatting options. <\/p>\n\n\n\n The Classic editor has two modes: visual and text. The visual mode lets you see the text formatting and media.<\/p>\n\n\n\n In the text mode, you can see the page coding. As shown in the screenshot below, the bold text has <strong> attribute, and the image is presented with a link, settings, and dimensions.<\/p>\n\n\n\n Besides the interface, these WordPress editors vary in content editing and functionality. The limited functions of the Classic Editor provide an easy text editing experience. Yet, creating a page layout using the Classic Editor is not possible. If you create blog posts with the same design and don\u2019t need to adjust page structure, the Classic editor will be enough for you.<\/p>\n\n\n\n Unlike the Classic editor, Gutenberg is the WYSIWYG (what you see is what you get) editor. Blocks available in Gutenberg let you add advanced features and view them on the page. With the Classic editor, you\u2019ll need to have the minimum HTML knowledge even to insert a button (like \u2018Read more\u2019).<\/p>\n\n\n\n The good news is that you can use Gutenberg to edit the earlier content created with the Classic editor. Once you deactivate the Classic editor and open the page, it\u2019s possible to convert the content to Gutenberg blocks.<\/p>\n\n\n\n Then, you can create the necessary layout and edit content with Gutenberg.<\/p>\n\n\n\n Although Gutenberg has numerous functions available for creating amazing websites, you may find that some functionality is not available. In this case, you can choose from plugins, addons, extensions, or even page builders that will help you add the necessary functions and customize the layout more easily. <\/p>\n\n\n\n Basically, there are specialized plugins, such as WPForms, that serve a single purpose and multi-purpose plugins that include a collection of Gutenberg blocks. Depending on your needs, you can choose what to install.<\/p>\n\n\n\n Let\u2019s look at some of the most useful Gutenberg plugins.<\/p>\n\n\n\n Gutentor<\/a> is a WordPress Gutenberg editor blocks collection that provides extended possibilities to design a website with its page-building functionality. This page builder is compatible with WordPress 5.0 and higher and has been tested up to 5.9.3. It has more than 50000 active installations and gets regular updates.<\/p>\n\n\n\n Once you install and activate the plugin, you\u2019ll get access to the huge library that consists of<\/p>\n\n\n\n Using Gutentor templates<\/strong>, you can quickly design a whole page. Simply browse the collection, preview the templates, choose the one that meets your needs, and insert it into the page. Then, you are free to edit each block using extended customization options.<\/p>\n\n\n\n The wide variety of templates suits different niches and businesses to facilitate website creation.<\/p>\n\n\n\n If you don\u2019t need predesigned pages, you can take advantage of Gutentor blocks to add attractive page elements. There are image sliders, galleries, accordions, call-to-action, carousels, countdowns, progress bars, timelines, and many more. After importing the block, you should add your content and enjoy the design.<\/p>\n\n\n\n In general, there are 78 blocks in Gutentor now. This page builder is free, and you get a multitude of functions and designs for your site.<\/p>\n\n\n\n Spectra<\/a> (formerly, Ultimate Addons for Gutenberg) is another powerful tool to facilitate website creation with the WordPress Gutenberg editor. With more than 300000 active installations, this plugin works with WordPress 4.7 or higher and has been tested up to 5.9.3.<\/p>\n\n\n\n Similarly Gutentor, Spectra provides various page templates and patterns that you can customize. Whether you need to create an organic products store, a digital agency website, or an online cooking course page, there is an appropriate template.<\/p>\n\n\n\n Besides ready-made templates, you can also work with blocks. You\u2019ll find the Ultimate Addons Blocks in the full list of blocks in the editor. It\u2019s possible to preview them before adding the desired one.<\/p>\n\n\n\n After inserting the block, you get numerous customization options. Mainly, you can adjust the background, typography, image size, etc.<\/p>\n\n\n\n You can deactivate the blocks you don\u2019t need to find the necessary ones faster.<\/p>\n\n\n\n With Spectra WordPress blocks, you can: <\/p>\n\n\n\n In short, Spectra Gutenberg blocks greatly enhance the website\u2019s design and functionality.<\/p>\n\n\n\n Getwid<\/a> is a collection of more than 40 blocks for the WordPress Gutenberg editor. This plugin works with WordPress 5.5 or higher, and its versions have been tested up to 5.9.3. When you install and activate the plugin, you\u2019ll see the list of Getwid blocks in the general list.<\/p>\n\n\n\n These blocks include common tools for working with images, posts, buttons, icons, and animation. They are suitable for various niches and let you create a unique website.<\/p>\n\n\n\n Various settings let you customize the block and its elements. For instance, you can select the image size, fit, captions, controls, etc., when editing an image slider.<\/p>\n\n\n\n Yet, you should note that sometimes customization options are limited. As an example, you can see that changing fonts in Tabs is not possible. You can only define the text type as a paragraph or headings. If you need to edit the style, you\u2019ll have to add a custom CSS code. In case you don’t know how to do this, you can outsource WordPress development<\/a> to the GetDevDone team who will be glad to assist you.<\/p>\n\n\n\n To sum up, plugins extend the functionality of the WordPress Gutenberg editor and provide more options for effortless, beautiful designing.<\/p>\n\n\n\n WordPress Gutenberg is different from the previous default editor (the Classic editor) and WordPress page builders. Gutenberg provides much more flexibility than the Classic editor, which mainly looked like a text editor. However, the Gutenberg editor doesn\u2019t function as page builders that give you full control over the front end of your website. You still have to use the WordPress admin panel to edit the website layout.\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n A block is the main element of the WordPress Gutenberg editor that lets you create various content layouts. Using blocks, you can add images, videos, texts, buttons, and numerous other items. Each block also functions as a styling and resizing tool. When you add a block to the page, you are free to customize its content and appearance as you find the most appropriate. Developers can also design custom Gutenberg blocks for more specialized purposes.\n\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n Yes, it is. Gutenberg features drag-and-drop functionality, like many page builders, to provide users with a comfortable website editing experience. So, you can arrange blocks by moving them to the desired place with your mouse. Additionally, there are controls on the Gutenberg panel to change the position of blocks.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n Yes, the WordPress Gutenberg editor is free. You can create various pages and blog posts using the multitude of blocks completely for free. If you lack specific features, it\u2019s possible to install plugins that will extend the functionality.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n \nYes, Gutenberg is compatible with all WordPress themes. However, some themes might provide extra styles for blocks to integrate them seamlessly into the theme design.\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n \nGutenberg comes pre-installed with WordPress versions 5.0 and later. If you’re using an older version, you can install the Gutenberg plugin through the WordPress plugin directory.\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n \nYes, if you prefer the Classic editor, you can disable Gutenberg. Simply install and activate the Classic Editor plugin from the WordPress plugin directory.\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n \nYes, there are various plugins available that add new blocks and extend the functionality of the Gutenberg editor. Examples include Stackable, Ultimate Addons for Gutenberg, and CoBlocks.\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n \nYes, developers can create custom Gutenberg blocks. This requires knowledge of JavaScript, React, and the WordPress Block API.\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n \nYes, Gutenberg is SEO-friendly. It doesn’t directly improve your SEO, but its clean and efficient coding standard makes it easier for search engines to read and rank your website.\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n \nThe Gutenberg editor is compatible with WordPress 5.0 and later versions. It may require updated versions of PHP and MySQL as per WordPress’ updated requirements.\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n \nSupport for Gutenberg is available on WordPress support forums and through community resources like the WordPress Stack Exchange. There are also numerous online tutorials on YouTube and blogs to help you understand its functionality better.\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n \nYes, Gutenberg is designed with a responsive layout that works on desktops and mobile devices. Nevertheless, the experience of editing on smaller screens may differ.\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n \nTransitioning from the Classic editor to Gutenberg can involve a learning curve, especially for those not familiar with block-based editors. However, the intuitive design of Gutenberg, backed by a plethora of online tutorials and resources, makes the switch easier and worthwhile for most users.\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n \nYes, accessibility is a key concern for the WordPress community and our team<\/a>, too, and efforts have been made to ensure Gutenberg is accessible for users with disabilities. Features such as keyboard navigation through blocks, screen reader compatibility, and high-contrast mode for better visibility are some of the ways Gutenberg aims to be accessible to all users. However, it is always wise to check with your specific accessibility tool or assistive technology for compatibility.\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n<\/div>\n\n\n\n While you’re getting to grips with Gutenberg, why not let our expert WordPress developers<\/a> do some really amazing stuff with it for your WordPress website? With nearly two decades of industry experience and thousands of successfully completed WordPress projects to our credit, we know everything about the world\u2019s most popular CMS<\/em> and its core block editor.<\/em><\/p>\n\n\n\n Get in touch with us<\/a> to handle any WordPress-related task for you: building a unique theme or modifying your current one, developing plugins.<\/em><\/em>, optimizing<\/a><\/em> Core Web Vitals<\/em><\/a>, and<\/em> much more. <\/em><\/p>\n","protected":false},"excerpt":{"rendered":" Gutenberg is the core WordPress block editor. While it provides a lot of powerful features, it also has quite a steep learning curve. So, if you're new to Gutenberg, this post should help you get to grips with it.<\/p>\n","protected":false},"author":19,"featured_media":14655,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[739,752],"tags":[774,856,814],"class_list":["post-14643","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guide","category-wordpress-development","tag-cms-development","tag-tooling","tag-wordpress"],"acf":[],"aioseo_notices":[],"author_meta":{"display_name":"Baylor Eaton","author_link":"https:\/\/getdevdone.com\/blog\/author\/baylor"},"featured_img":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/05\/16101232\/Intro-preview-1-300x300.png","coauthors":[],"tax_additional":{"categories":{"linked":["Guide<\/a>","WordPress development<\/a>"],"unlinked":["Guide<\/span>","WordPress development<\/span>"]},"tags":{"linked":["CMS development<\/a>","Tooling<\/a>","WordPress<\/a>"],"unlinked":["CMS development<\/span>","Tooling<\/span>","WordPress<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 4 years ago","modified":"Updated 1 year ago"},"absolute_dates":{"created":"Posted on May 16, 2022","modified":"Updated on March 31, 2025"},"absolute_dates_time":{"created":"Posted on May 16, 2022 10:20 am","modified":"Updated on March 31, 2025 10:21 pm"},"featured_img_caption":"","series_order":"","featured_image_urls":{"thumbnail_723x315":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/05\/16101232\/Intro-preview-1-400x315.png","thumbnail_723x315-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/05\/16101232\/Intro-preview-1.png","thumbnail_723x315-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/05\/16101232\/Intro-preview-1.png","thumbnail_770x510":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/05\/16101232\/Intro-preview-1.png","thumbnail_770x510-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/05\/16101232\/Intro-preview-1.png","thumbnail_770x510-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/05\/16101232\/Intro-preview-1.png"},"featured_post_color":"#f3a345","author_avatar":"https:\/\/secure.gravatar.com\/avatar\/2bc1e2706ee61710b1ba07fb6d106e9c35f8baed29da8ff47798b1e63665bba7?s=96&d=mm&r=g","author_position":"Business Development Manager","reading_time":"<\/span> 16<\/span> min read<\/span><\/span>","prev_post":{"slug":"how-to-add-wordpress-contact-form","name":"How to Add a WordPress Contact Form With No Effort"},"next_post":{"slug":"email-signatures-best-practices","name":"Email Signatures: Best Practices to Impress Your Recipients"},"related_posts":["drupal-module-development-3-kick-off-online-guides","how-to-edit-the-footer-in-wordpress-to-meet-your-needs","microformats-7-microformats-that-are-worth-using"],"_links":{"self":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/14643","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/comments?post=14643"}],"version-history":[{"count":24,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/14643\/revisions"}],"predecessor-version":[{"id":24821,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/14643\/revisions\/24821"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media\/14655"}],"wp:attachment":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media?parent=14643"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/categories?post=14643"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/tags?post=14643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
How to Install Gutenberg<\/h2>\n\n\n\n
WordPress Gutenberg Editor: Interface Overview<\/h2>\n\n\n\n
\n
How WordPress Gutenberg Works<\/h2>\n\n\n\n
Adding New Pages<\/h3>\n\n\n\n
Creating a Post<\/h3>\n\n\n\n
Adding Images with WordPress Gutenberg<\/h3>\n\n\n\n
\n
The Pros and Cons of Gutenberg<\/h2>\n\n\n\n
WordPress Gutenberg Advantages<\/h3>\n\n\n\n
Block Functionality<\/h4>\n\n\n\n
Groups and Reusable Blocks<\/h4>\n\n\n\n
Easy Embeds<\/h4>\n\n\n\n
Drag-and-drop Functionality Without Page Reloading<\/h4>\n\n\n\n
Mobile Friendliness<\/h4>\n\n\n\n
Code Editing and Developer\u2019s Functions<\/h4>\n\n\n\n
Full Screen Editing Mode<\/h4>\n\n\n\n
Information Box <\/h4>\n\n\n\n
WordPress Gutenberg Disadvantages<\/h3>\n\n\n\n
Getting Used to Gutenberg\u2019s Block Editing<\/h4>\n\n\n\n
Double Scrollbar and Sidebar<\/h4>\n\n\n\n
Themes and Plugins Compatibility<\/h4>\n\n\n\n
Shortcuts and Meta Boxes Limitations<\/h4>\n\n\n\n
Difference from Page Builders and the Classic Editor<\/h4>\n\n\n\n
Gutenberg versus Classic Editor: Main Differences<\/h3>\n\n\n\n
Useful WordPress Gutenberg Plugins<\/h2>\n\n\n\n
Gutentor \u2013 Gutenberg Blocks \u2013 Page Builder for Gutenberg Editor<\/h3>\n\n\n\n
\n
Spectra \u2013 WordPress Gutenberg Blocks<\/h3>\n\n\n\n
\n
Getwid \u2013 Gutenberg Blocks<\/h3>\n\n\n\n
FAQs About WordPress Gutenberg<\/h2>\n
Is WordPress Gutenberg a page builder?\n<\/h3>\n
What is a Gutenberg block?<\/h3>\n
Is it possible to move blocks in Gutenberg?\n<\/h3>\n
Is Gutenberg editor free?\n<\/h3>\n
Can I use Gutenberg with any WordPress theme?<\/h3>\n
How do I install the Gutenberg editor?<\/h3>\n
Can I disable the Gutenberg editor?<\/h3>\n
Are there additional plugins for Gutenberg?<\/h3>\n
Can I create custom blocks in Gutenberg?<\/h3>\n
Is Gutenberg SEO-friendly?<\/h3>\n
What are the system requirements for Gutenberg?<\/h3>\n
Where can I get support for Gutenberg?<\/h3>\n
Can I use Gutenberg on mobile devices?<\/h3>\n
Is there a learning curve to using Gutenberg?<\/h3>\n
Is Gutenberg accessible for users with disabilities?\n<\/h3>\n
\n\n\n\nSuperior WordPress Development Services from GetDevDone<\/h2>\n\n\n\n