{"id":44,"date":"2024-05-20T15:25:19","date_gmt":"2024-05-20T13:25:19","guid":{"rendered":"https:\/\/qala.shop\/documentation\/?page_id=44"},"modified":"2024-05-20T15:25:20","modified_gmt":"2024-05-20T13:25:20","slug":"gutenberg","status":"publish","type":"page","link":"https:\/\/qala.shop\/documentation\/gutenberg\/","title":{"rendered":"Gutenberg"},"content":{"rendered":"\n<div style=\"height:28px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns alignfull is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-content-justification-center is-layout-constrained wp-container-core-column-is-layout-8559d2ef wp-block-column-is-layout-constrained\" style=\"flex-basis:25%\">\n\n<ul class=\"wp-block-page-list\"><li class=\"wp-block-pages-list__item has-child\"><a class=\"wp-block-pages-list__item__link\" href=\"https:\/\/qala.shop\/documentation\/appearance\/\">Appearance<\/a><ul class=\"wp-block-navigation__submenu-container\"><li class=\"wp-block-pages-list__item has-child \"><a class=\"wp-block-pages-list__item__link\" href=\"https:\/\/qala.shop\/documentation\/appearance\/menus\/\">Menus<\/a><ul class=\"wp-block-navigation__submenu-container\"><li class=\"wp-block-pages-list__item \"><a class=\"wp-block-pages-list__item__link\" href=\"https:\/\/qala.shop\/documentation\/appearance\/menus\/customize-menu-alternatives\/\">Customize menu alternatives<\/a><\/li><li class=\"wp-block-pages-list__item \"><a class=\"wp-block-pages-list__item__link\" href=\"https:\/\/qala.shop\/documentation\/appearance\/menus\/create-multilevel-menus\/\">Create multilevel menus<\/a><\/li><\/ul><\/li><\/ul><\/li><li class=\"wp-block-pages-list__item has-child\"><a class=\"wp-block-pages-list__item__link\" href=\"https:\/\/qala.shop\/documentation\/getting-started\/\">Getting started<\/a><ul class=\"wp-block-navigation__submenu-container\"><li class=\"wp-block-pages-list__item \"><a class=\"wp-block-pages-list__item__link\" href=\"https:\/\/qala.shop\/documentation\/getting-started\/general-use-of-wordpress\/\">General use of WordPress<\/a><\/li><li class=\"wp-block-pages-list__item \"><a class=\"wp-block-pages-list__item__link\" href=\"https:\/\/qala.shop\/documentation\/getting-started\/posts\/\">Posts<\/a><\/li><li class=\"wp-block-pages-list__item \"><a class=\"wp-block-pages-list__item__link\" href=\"https:\/\/qala.shop\/documentation\/getting-started\/main-categories-and-subcategories\/\">Main categories and subcategories<\/a><\/li><li class=\"wp-block-pages-list__item \"><a class=\"wp-block-pages-list__item__link\" href=\"https:\/\/qala.shop\/documentation\/getting-started\/media\/\">Media<\/a><\/li><li class=\"wp-block-pages-list__item \"><a class=\"wp-block-pages-list__item__link\" href=\"https:\/\/qala.shop\/documentation\/getting-started\/pages\/\">Pages<\/a><\/li><li class=\"wp-block-pages-list__item \"><a class=\"wp-block-pages-list__item__link\" href=\"https:\/\/qala.shop\/documentation\/getting-started\/settings\/\">Settings<\/a><\/li><\/ul><\/li><li class=\"wp-block-pages-list__item has-child\"><a class=\"wp-block-pages-list__item__link\" href=\"https:\/\/qala.shop\/documentation\/gutenberg\/\">Gutenberg<\/a><ul class=\"wp-block-navigation__submenu-container\"><li class=\"wp-block-pages-list__item \"><a class=\"wp-block-pages-list__item__link\" href=\"https:\/\/qala.shop\/documentation\/gutenberg\/qala-modern-checkout\/\">Qala Modern Checkout<\/a><\/li><li class=\"wp-block-pages-list__item \"><a class=\"wp-block-pages-list__item__link\" href=\"https:\/\/qala.shop\/documentation\/gutenberg\/qala-template-parts\/\">Qala Template Parts<\/a><\/li><\/ul><\/li><li class=\"wp-block-pages-list__item has-child\"><a class=\"wp-block-pages-list__item__link\" href=\"https:\/\/qala.shop\/documentation\/qala-block-pattern\/\">Qala block pattern<\/a><ul class=\"wp-block-navigation__submenu-container\"><li class=\"wp-block-pages-list__item \"><a class=\"wp-block-pages-list__item__link\" href=\"https:\/\/qala.shop\/documentation\/qala-block-pattern\/cover-with-content\/\">Cover with content<\/a><\/li><\/ul><\/li><li class=\"wp-block-pages-list__item has-child\"><a class=\"wp-block-pages-list__item__link\" href=\"https:\/\/qala.shop\/documentation\/qala-blocks\/\">Qala blocks<\/a><ul class=\"wp-block-navigation__submenu-container\"><li class=\"wp-block-pages-list__item \"><a class=\"wp-block-pages-list__item__link\" href=\"https:\/\/qala.shop\/documentation\/qala-blocks\/accordion\/\">Accordion<\/a><\/li><li class=\"wp-block-pages-list__item \"><a class=\"wp-block-pages-list__item__link\" href=\"https:\/\/qala.shop\/documentation\/qala-blocks\/faq-list\/\">FAQ list<\/a><\/li><li class=\"wp-block-pages-list__item \"><a class=\"wp-block-pages-list__item__link\" href=\"https:\/\/qala.shop\/documentation\/qala-blocks\/hero\/\">Hero<\/a><\/li><li class=\"wp-block-pages-list__item \"><a class=\"wp-block-pages-list__item__link\" href=\"https:\/\/qala.shop\/documentation\/qala-blocks\/test\/\">Hero Blog Post<\/a><\/li><li class=\"wp-block-pages-list__item \"><a class=\"wp-block-pages-list__item__link\" href=\"https:\/\/qala.shop\/documentation\/qala-blocks\/latest-posts\/\">Latest posts<\/a><\/li><li class=\"wp-block-pages-list__item \"><a class=\"wp-block-pages-list__item__link\" href=\"https:\/\/qala.shop\/documentation\/qala-blocks\/logo-slider\/\">Logo slider<\/a><\/li><li class=\"wp-block-pages-list__item \"><a class=\"wp-block-pages-list__item__link\" href=\"https:\/\/qala.shop\/documentation\/qala-blocks\/multi-image-accordion\/\">Multi Image Accordion<\/a><\/li><li class=\"wp-block-pages-list__item \"><a class=\"wp-block-pages-list__item__link\" href=\"https:\/\/qala.shop\/documentation\/qala-blocks\/shop-categories\/\">Shop categories<\/a><\/li><li class=\"wp-block-pages-list__item \"><a class=\"wp-block-pages-list__item__link\" href=\"https:\/\/qala.shop\/documentation\/qala-blocks\/single-testimonial\/\">Single testimonial<\/a><\/li><li class=\"wp-block-pages-list__item \"><a class=\"wp-block-pages-list__item__link\" href=\"https:\/\/qala.shop\/documentation\/qala-blocks\/testimonials\/\">Testimonials<\/a><\/li><\/ul><\/li><li class=\"wp-block-pages-list__item\"><a class=\"wp-block-pages-list__item__link\" href=\"https:\/\/qala.shop\/documentation\/qala-cms\/\">Qala CMS<\/a><\/li><li class=\"wp-block-pages-list__item\"><a class=\"wp-block-pages-list__item__link\" href=\"https:\/\/qala.shop\/documentation\/qala-features-benefits\/\">Qala features &amp; benefits<\/a><\/li><li class=\"wp-block-pages-list__item menu-item-home\"><a class=\"wp-block-pages-list__item__link\" href=\"https:\/\/qala.shop\/documentation\/\">Welcome<\/a><\/li><\/ul><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<h2 class=\"wp-block-heading alignwide\" id=\"h-gutenberg\">Gutenberg<\/h2>\n\n\n\n<h3 class=\"wp-block-heading alignwide\" id=\"h-basics\">Basics<\/h3>\n\n\n\n<p>Gutenberg is the default WordPress page builder and content editor. It is a WYSIWYG block editor that started as a simple drag-and-drop web design tool with limited objects and tools. Over time, many objects and tools have been added based on user feedback. This had a positive impact on existing users who know their way around the application, and each new tool makes the software more powerful. However, if you&#8217;re not very experienced, it can feel a bit overwhelming, and that&#8217;s where blocks come in handy!<\/p>\n\n\n\n<p>Blocks are content elements that you add to the editing screen to create content layouts. Each item you add to your post or page is a block. With Gutenberg blocks, you can easily drag and drop predefined blocks (headings\/footers, text blocks, forms) onto any page, so you have the basic layout ready in just a few minutes. You can add blocks for each paragraph, images, videos, galleries, audio, lists, and more. There are blocks for all common content elements, and additional ones can be added by plugins. With the block editor, you can simply add a table block, select your columns and rows, and start adding content.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized is-style-default\"><img decoding=\"async\" src=\"https:\/\/shop-qala.jdj.ac.dev\/documentation\/wp-content\/uploads\/sites\/8\/2023\/05\/skarmavbild-2023-05-22-kl-152712.png\" alt=\"\" class=\"wp-image-4742\" style=\"width:641px;height:588px\"\/><\/figure>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading alignwide\" id=\"h-using-gutenberg-wordpress-block-editor\">Using Gutenberg &#8211; WordPress Block Editor<\/h3>\n\n\n\n<p>If you have experience with the old WordPress editor, you can see how it looks different from Gutenberg. It has the same functionality as the old one, and you can do everything you could before. Let&#8217;s start by covering the basic things you used to do in the classic editor and how they are done in the block editor. Creating a new blog post or page with the block editor<\/p>\n\n\n\n<p>You will start creating a new blog post or a new page by simply clicking on the &#8220;Posts&#8221; menu and selecting &#8220;Add New&#8221; in the admin panel. If you&#8217;re creating a page, go to the &#8220;Pages&#8221; menu and select &#8220;Add New.&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized is-style-default\"><img decoding=\"async\" src=\"https:\/\/shop-qala.jdj.ac.dev\/documentation\/wp-content\/uploads\/sites\/8\/2023\/05\/skarmavbild-2023-05-23-kl-112120.png\" alt=\"\" class=\"wp-image-4748\" style=\"width:1079px;height:323px\"\/><\/figure>\n\n\n\n<p>This will start the block-editor.<\/p>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading alignwide\" id=\"h-how-to-add-a-block-in-gutenberg\">How to add a block in Gutenberg<\/h3>\n\n\n\n<p>The first block of every post or page is the title. You can use the mouse to move below the title or press the tab key on the keyboard to move the cursor downward and start typing.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/shop-qala.jdj.ac.dev\/documentation\/wp-content\/uploads\/sites\/8\/2023\/05\/skarmavbild-2023-05-23-kl-112532.png\" alt=\"\" class=\"wp-image-4752\"\/><\/figure>\n\n\n\n<p>By default, the next block is a paragraph block. This allows you to start typing right away.<\/p>\n\n\n\n<p>However, if you want to add something else, you can click on the Add new block (+) button in the top left corner of the editor, below an existing block, or on the right side of a block.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/shop-qala.jdj.ac.dev\/documentation\/wp-content\/uploads\/sites\/8\/2023\/05\/skarmavbild-2023-05-23-kl-113740.png\" alt=\"\" class=\"wp-image-4755\"\/><\/figure>\n\n\n\n<p>If you click on the button, the Add block menu will appear with a search field at the top and common blocks below.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized is-style-default\"><img decoding=\"async\" src=\"https:\/\/shop-qala.jdj.ac.dev\/documentation\/wp-content\/uploads\/sites\/8\/2023\/05\/skarmavbild-2023-05-23-kl-114008.png\" alt=\"\" class=\"wp-image-4758\" style=\"width:443px;height:903px\"\/><\/figure>\n\n\n\n<p>If you don&#8217;t want to use the mouse pointer to click the button, you can use a keyboard shortcut by typing &#8216;\/&#8217; to search and add a block.<\/p>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading alignwide\" id=\"h-working-with-blocks-in-the-new-editor\">Working with blocks in the new editor<\/h3>\n\n\n\n<p>Each block comes with its own toolbar that appears on top of the block. The buttons in the toolbar change depending on the block you are editing. For example, in the screenshot below, we are working in a paragraph block that displays basic formatting buttons like text alignment, bold, italic, insert link, and more.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/shop-qala.jdj.ac.dev\/documentation\/wp-content\/uploads\/sites\/8\/2023\/05\/skarmavbild-2023-05-23-kl-134151.png\" alt=\"\" class=\"wp-image-4761\"\/><\/figure>\n\n\n\n<p>In addition to the toolbar, each block can also have its own block settings that would appear in the right-hand column of your editing screen.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image aligncenter size-full is-resized is-style-default\"><img decoding=\"async\" src=\"https:\/\/shop-qala.jdj.ac.dev\/documentation\/wp-content\/uploads\/sites\/8\/2023\/05\/skarmavbild-2023-05-23-kl-150255.png\" alt=\"\" class=\"wp-image-4764\" style=\"width:271px;height:611px\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>You can move blocks up and down by simply dragging them or by clicking the up and down buttons next to each block. <\/p>\n<\/div>\n<\/div>\n\n\n\n<p>The block editor comes with handy tools to manage and organise your content layouts.<\/p>\n\n\n\n<p>You can select multiple blocks by clicking on them while holding down the SHIFT key on your keyboard.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized is-style-default\"><img decoding=\"async\" src=\"https:\/\/shop-qala.jdj.ac.dev\/documentation\/wp-content\/uploads\/sites\/8\/2023\/05\/skarmavbild-2023-05-23-kl-150808.png\" alt=\"\" class=\"wp-image-4766\" style=\"width:620px;height:391px\"\/><\/figure>\n\n\n\n<p>The blue outline indicates which blocks are selected.<\/p>\n\n\n\n<p>Then you click on the block type button in the toolbar to transform the selected blocks into groups or columns.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized is-style-default\"><img decoding=\"async\" src=\"https:\/\/shop-qala.jdj.ac.dev\/documentation\/wp-content\/uploads\/sites\/8\/2023\/05\/skarmavbild-2023-05-23-kl-151539.png\" alt=\"\" class=\"wp-image-4769\" style=\"width:589px;height:365px\"\/><\/figure>\n\n\n\n<p>You can then apply styles to the entire group block, such as changing their alignment or spacing.<\/p>\n\n\n\n<p>The block editor also allows you to add an empty group or column block. After that, you can fill them with other blocks.<\/p>\n\n\n\n<p>&#8220;Select &#8220;Columns&#8221; or &#8220;Group&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized is-style-default\"><img decoding=\"async\" src=\"https:\/\/shop-qala.jdj.ac.dev\/documentation\/wp-content\/uploads\/sites\/8\/2023\/05\/skarmavbild-2023-05-23-kl-151853.png\" alt=\"\" class=\"wp-image-4770\" style=\"width:672px;height:443px\"\/><\/figure>\n\n\n\n<p>The block editor also allows you to add an empty group or column block. After that, you can fill them with other blocks.<\/p>\n\n\n\n<p>When you select &#8220;Group,&#8221; a blue box with a &#8216;+&#8217; sign should appear.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized is-style-default\"><img decoding=\"async\" src=\"https:\/\/shop-qala.jdj.ac.dev\/documentation\/wp-content\/uploads\/sites\/8\/2023\/05\/skarmavbild-2023-05-23-kl-152015.png\" alt=\"\" class=\"wp-image-4771\" style=\"width:612px;height:169px\"\/><\/figure>\n\n\n\n<p>To add to the group, click on the &#8216;+&#8217; sign and choose the type of block you want to add. You can then fill each column with any type of block to create beautiful layouts.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized is-style-default\"><img decoding=\"async\" src=\"https:\/\/shop-qala.jdj.ac.dev\/documentation\/wp-content\/uploads\/sites\/8\/2023\/05\/skarmavbild-2023-05-23-kl-152053.png\" alt=\"\" class=\"wp-image-4772\" style=\"width:552px;height:418px\"\/><\/figure>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading alignwide\" id=\"h-save-and-reuse-blocks-in-gutenberg\">Save and Reuse Blocks in Gutenberg<\/h3>\n\n\n\n<p>One of the best things about blocks is that they can be saved and reused. This is especially useful for those who run blogs and websites where you often need to add specific snippets of content to your articles or pages.<\/p>\n\n\n\n<p>Just click the menu button in the right corner of each block&#8217;s toolbar. From the menu, select the &#8220;Add to Reusable Blocks&#8221; option.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/qala.jdj.ac.dev\/img-srv\/uTHEIiYUWnglESzyEBkSJVH84A4VlPKunvq8gDGoAxU\/resizing_type:auto\/width:1024\/height:0\/gravity:sm\/enlarge:1\/ext:webp\/strip_metadata:1\/quality:35\/bG9jYWw6Ly8vcWFsYS9xYWxhLnVrL3dwLWNvbnRlbnQvdXBsb2Fkcy9zaXRlcy84LzIwMjMvMDYvc2NyZWVuc2hvdC0yMDIzLTA2LTE0LWF0LTIwMjc1Mi5wbmc.webp\" alt=\"\" class=\"wp-image-4788\" title=\"Add to reusable blocks\"\/><\/figure>\n\n\n\n<p>You must enter a name for your reusable block so that you can identify and reuse it later.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/qala.jdj.ac.dev\/img-srv\/qAA1IxW10xA5cXjXAz8Asz1z9UqAYTGYB4NtoBMiCtM\/resizing_type:auto\/width:1024\/height:0\/gravity:sm\/enlarge:1\/ext:webp\/strip_metadata:1\/quality:35\/bG9jYWw6Ly8vcWFsYS9xYWxhLnVrL3dwLWNvbnRlbnQvdXBsb2Fkcy9zaXRlcy84LzIwMjMvMDYvc2NyZWVuc2hvdC0yMDIzLTA2LTE0LWF0LTIwMjc0NS5wbmc.webp\" alt=\"\" class=\"wp-image-4789\"\/><\/figure>\n\n\n\n<p>The block editor will now save the block as a reusable block.<\/p>\n\n\n\n<p>Now that you&#8217;ve saved a block, let&#8217;s see how to add the reusable block to other WordPress posts and pages on your site.<\/p>\n\n\n\n<p>Simply edit the post or page where you want to add the reusable block. From the post editing screen, click the Add Block button.<\/p>\n\n\n\n<p>You will find your saved block under the &#8220;Reusable&#8221; tab. You can also find it by typing its name in the search bar.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/qala.jdj.ac.dev\/img-srv\/IHaQAFKLy3Hb3Jrr348lsGontOfFzuXRYa4eEwPEZoI\/resizing_type:auto\/width:1024\/height:0\/gravity:sm\/enlarge:1\/ext:webp\/strip_metadata:1\/quality:35\/bG9jYWw6Ly8vcWFsYS9xYWxhLnVrL3dwLWNvbnRlbnQvdXBsb2Fkcy9zaXRlcy84LzIwMjMvMDYvc2NyZWVuc2hvdC0yMDIzLTA2LTE0LWF0LTIwMjczNy5wbmc.webp\" alt=\"\" class=\"wp-image-4790\"\/><\/figure>\n\n\n\n<p>You can hover your mouse over it to see a quick preview of the block. Just click on the block to insert it into your post or page.<\/p>\n\n\n\n<p>All reusable blocks are stored in your WordPress database, and you can manage them by clicking the &#8220;manage reusable blocks&#8221; link.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/qala.jdj.ac.dev\/img-srv\/LaV0l0lRO2OrnZWC0nBYUF-zOzUQ_Mvy2P0l2pKlR9M\/resizing_type:auto\/width:1024\/height:0\/gravity:sm\/enlarge:1\/ext:webp\/strip_metadata:1\/quality:35\/bG9jYWw6Ly8vcWFsYS9xYWxhLnVrL3dwLWNvbnRlbnQvdXBsb2Fkcy9zaXRlcy84LzIwMjMvMDYvc2NyZWVuc2hvdC0yMDIzLTA2LTE0LWF0LTIwMjYyNS5wbmc.webp\" alt=\"\" class=\"wp-image-4787\"\/><\/figure>\n\n\n\n<p>This will take you to the block manager page. From here you can edit or delete all your reusable blocks. You can also export reusable blocks and use them on any other WordPress site.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/qala.jdj.ac.dev\/img-srv\/PcAXb1zUj3V8infb6QPJXlNwN5G6BKiOJNVPm2qDYAU\/resizing_type:auto\/width:1024\/height:0\/gravity:sm\/enlarge:1\/ext:webp\/strip_metadata:1\/quality:35\/bG9jYWw6Ly8vcWFsYS9xYWxhLnVrL3dwLWNvbnRlbnQvdXBsb2Fkcy9zaXRlcy84LzIwMjMvMDYvc2NyZWVuc2hvdC0yMDIzLTA2LTE0LWF0LTIwMzYwNC5wbmc.webp\" alt=\"\" class=\"wp-image-4791\"\/><\/figure>\n\n\n\n<p>Note! You can also use entire groups and columns as reusable blocks. This allows you to save entire sections and use them when needed.<\/p>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading alignwide\" id=\"h-publishing-and-management-options-in-the-gutenberg-block-editor\">Publishing and management options in the Gutenberg Block Editor<\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>Every WordPress post contains a lot of metadata. This includes information such as publication date, categories and tags, featured images and more.<\/p>\n\n\n\n<p>All these options are neatly placed in the right column of the editing screen.<\/p>\n\n\n\n<p>WooCommerce also comes with blocks that you can easily add to all your WordPress posts and pages.<\/p>\n\n\n\n<p>Basically, the block editor can do everything the classic editor did. But you will do things faster and more elegantly than before.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/shop-qala.jdj.ac.dev\/documentation\/wp-content\/uploads\/sites\/8\/2023\/06\/screenshot-2023-06-14-at-204038.png\" alt=\"\" class=\"wp-image-4792\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading alignwide\" id=\"h-adding-an-image-to-the-wordpress-block-editor\">Adding an image to the WordPress block editor<\/h3>\n\n\n\n<p>There is a ready-made image block in the WordPress block editor. Just add the block and then upload an image file or choose from the media library.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/qala.jdj.ac.dev\/img-srv\/AZTP1U_UgWtREFz-t6KSjX7Vkho8zDgtL8uG2QR3Y4g\/resizing_type:auto\/width:1024\/height:0\/gravity:sm\/enlarge:1\/ext:webp\/strip_metadata:1\/quality:35\/bG9jYWw6Ly8vcWFsYS9xYWxhLnVrL3dwLWNvbnRlbnQvdXBsb2Fkcy9zaXRlcy84LzIwMjMvMDYvc2NyZWVuc2hvdC0yMDIzLTA2LTE0LWF0LTIwNDcxNy5wbmc.webp\" alt=\"\" class=\"wp-image-4793\"\/><\/figure>\n\n\n\n<p>You can also drag and drop images from your computer, and the editor will automatically create an image block for it.<\/p>\n\n\n\n<p>After adding an image, you will be able to see the block settings where you can add metadata for the image such as alt text, size and add a link to the image.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/qala.jdj.ac.dev\/img-srv\/2OUEi5kFEa1IVd3l64zQlQgEYlDyTZV5-xQ1duoy72o\/resizing_type:auto\/width:1024\/height:0\/gravity:sm\/enlarge:1\/ext:webp\/strip_metadata:1\/quality:35\/bG9jYWw6Ly8vcWFsYS9xYWxhLnVrL3dwLWNvbnRlbnQvdXBsb2Fkcy9zaXRlcy84LzIwMjMvMDYvc2NyZWVuc2hvdC0yMDIzLTA2LTE0LWF0LTIwNDgzNy5wbmc.webp\" alt=\"\" class=\"wp-image-4794\"\/><\/figure>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading alignwide\" id=\"h-adding-a-link-to-the-block-editor\">Adding a link to the block editor<\/h3>\n\n\n\n<p>The block editor comes with several blocks where you can add text. The most common is the paragraph block which comes with an insert link button in the toolbar. <\/p>\n\n\n\n<p>All other regular text blocks also include a link button in the toolbar.<\/p>\n\n\n\n<p>You can also insert a link using the keyboard shortcut, which is Command + K for Mac and CTRL + K on Windows computers.<\/p>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading alignwide\" id=\"h-adding-an-image-gallery-to-gutenberg\">Adding an image gallery to Gutenberg<\/h3>\n\n\n\n<p>The gallery block works like the image block. You add it and then upload or select image files.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/qala.jdj.ac.dev\/img-srv\/icsnqn8gv-7ya9WpRLr4vJLbq-w_5pwUxrQCBv3fjMk\/resizing_type:auto\/width:1024\/height:0\/gravity:sm\/enlarge:1\/ext:webp\/strip_metadata:1\/quality:35\/bG9jYWw6Ly8vcWFsYS9xYWxhLnVrL3dwLWNvbnRlbnQvdXBsb2Fkcy9zaXRlcy84LzIwMjMvMDYvc2NyZWVuc2hvdC0yMDIzLTA2LTE0LWF0LTIwNTQ0OS5wbmc.webp\" alt=\"\" class=\"wp-image-4795\"\/><\/figure>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading alignwide\" id=\"h-explore-some-new-content-blocks-in-gutenberg\">Explore some new content blocks in Gutenberg<\/h3>\n\n\n\n<p>The Gutenberg editor promises to solve some long-standing usability issues in WordPress by introducing some new blocks.<\/p>\n\n\n\n<p>The following are some of our favourites that we think users will find immensely helpful.<\/p>\n\n\n\n<h4 class=\"wp-block-heading alignwide\" id=\"h-adding-an-image-next-to-some-text-in-wordpress\">Adding an image next to some text in WordPress<\/h4>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/shop-qala.jdj.ac.dev\/documentation\/wp-content\/uploads\/sites\/8\/2023\/06\/screenshot-2023-06-14-at-211456.png\" alt=\"\" class=\"wp-image-4800\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>With the old editor, many of our users could not place an image next to the text. You can do this now with the Media &amp; Text block.<\/p>\n\n\n\n<p>This simple block comes with two blocks placed side by side so you can easily add an image with some text next to it.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading alignwide\" id=\"h-adding-a-button-to-wordpress-posts-and-pages\">Adding a button to WordPress posts and pages<\/h4>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Adding a button to your blog posts or pages was another annoyance in the old editor. You either had to use a plugin that created a shortcode for the button, or you had to switch to HTML mode and write code.<\/p>\n\n\n\n<p>Gutenberg comes with a button block that allows you to quickly add a button to any post or page.<br><br>You can add a link for your button, change colours and more.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/qala.jdj.ac.dev\/img-srv\/3QkrtyCia19b3DZxilCUHCvU7GIlWPmRs-mst8p0Im8\/resizing_type:auto\/width:0\/height:1024\/gravity:sm\/enlarge:1\/ext:webp\/strip_metadata:1\/quality:35\/bG9jYWw6Ly8vcWFsYS9xYWxhLnVrL3dwLWNvbnRlbnQvdXBsb2Fkcy9zaXRlcy84LzIwMjMvMDYvc2NyZWVuc2hvdC0yMDIzLTA2LTE0LWF0LTIxMDQ0MS5wbmc.webp\" alt=\"\" class=\"wp-image-4798\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading alignwide\" id=\"h-adding-beautiful-cover-images-to-blog-posts-and-landing-pages\">Adding beautiful cover images to blog posts and landing pages<\/h4>\n\n\n\n<p>Another cool feature you might want to try is the &#8220;Cover Block&#8221;, which lets you add cover images or color background covers to your posts and pages.<\/p>\n\n\n\n<p>A cover image is a wider image that is often used as the cover for a new section of a page or the beginning of a story. They look great and allow you to create engaging content layouts.<\/p>\n\n\n\n<p>Just add a cover block and then upload the image you want to use. You can choose an overlay colour for the cover or make it a fixed background image to create a parallax effect when users scroll down the page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/shop-qala.jdj.ac.dev\/documentation\/wp-content\/uploads\/sites\/8\/2023\/06\/screenshot-2023-06-14-at-211625.png\" alt=\"\" class=\"wp-image-4801\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading alignwide\" id=\"h-create-tables-inside-articles\">Create tables inside articles<\/h4>\n\n\n\n<p>The classic editor did not have a button to add tables to your WordPress posts. You had to use a plugin or create a table that wrote custom CSS and HTML.<\/p>\n\n\n\n<p>The Gutenberg editor comes with a standard table block, making it super easy to add tables to your posts and pages. Just add the block and then select the number of columns and rows you want to insert.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/qala.jdj.ac.dev\/img-srv\/uOzA91eu5n2GxsmINXBX972k2Alqy318TSPvIjPhG7M\/resizing_type:auto\/width:1024\/height:0\/gravity:sm\/enlarge:1\/ext:webp\/strip_metadata:1\/quality:35\/bG9jYWw6Ly8vcWFsYS9xYWxhLnVrL3dwLWNvbnRlbnQvdXBsb2Fkcy9zaXRlcy84LzIwMjMvMDYvc2NyZWVuc2hvdC0yMDIzLTA2LTE0LWF0LTIxMTk1Ny5wbmc.webp\" alt=\"\" class=\"wp-image-4802\"\/><\/figure>\n\n\n\n<p>You can now go ahead and start adding data to table rows. You can always add more rows and columns if needed. There are also two basic style options available.<\/p>\n\n\n\n<h4 class=\"wp-block-heading alignwide\" id=\"h-create-multi-column-content\">Create multi-column content<\/h4>\n\n\n\n<p>Creating multi-column content was another issue that the classic editor didn&#8217;t handle at all. The block editor allows you to add a column block, which basically adds two columns of paragraph blocks.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/qala.jdj.ac.dev\/img-srv\/0GenBIFQcurKGpvPEWuM9q92mDMyIQCaJ4l-bx7buaI\/resizing_type:auto\/width:1024\/height:0\/gravity:sm\/enlarge:1\/ext:webp\/strip_metadata:1\/quality:35\/bG9jYWw6Ly8vcWFsYS9xYWxhLnVrL3dwLWNvbnRlbnQvdXBsb2Fkcy9zaXRlcy84LzIwMjMvMDYvc2NyZWVuc2hvdC0yMDIzLTA2LTE0LWF0LTIxMjE1MC5wbmc.webp\" alt=\"\" class=\"wp-image-4803\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/qala.jdj.ac.dev\/img-srv\/C0_oDoGUG9P-0UKspd9rBWuoKds89P8S8iDCHEZiLHc\/resizing_type:auto\/width:1024\/height:0\/gravity:sm\/enlarge:1\/ext:webp\/strip_metadata:1\/quality:35\/bG9jYWw6Ly8vcWFsYS9xYWxhLnVrL3dwLWNvbnRlbnQvdXBsb2Fkcy9zaXRlcy84LzIwMjMvMDYvc2NyZWVuc2hvdC0yMDIzLTA2LTE0LWF0LTIxMjIyMi5wbmc.webp\" alt=\"\" class=\"wp-image-4804\"\/><\/figure>\n\n\n\n<p>This column block is quite flexible. You can add up to 6 columns in a row and even use different blocks in each column.<\/p>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;flex-basis:22.1%\">\n<div style=\"height:1573px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Gutenberg. Basics. Gutenberg is the default WordPress page builder and content editor. It is a WYSIWYG block editor that started&hellip;<\/p>\n","protected":false},"author":184,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_trash_the_other_posts":false,"editor_notices":[],"footnotes":""},"class_list":["post-44","page","type-page","status-publish","hentry"],"acf":[],"parents":[{"permalink":"https:\/\/qala.shop\/documentation","title":"Home"},{"permalink":false,"title":"Gutenberg"}],"_links":{"self":[{"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/pages\/44","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/users\/184"}],"replies":[{"embeddable":true,"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/comments?post=44"}],"version-history":[{"count":1,"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/pages\/44\/revisions"}],"predecessor-version":[{"id":45,"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/pages\/44\/revisions\/45"}],"wp:attachment":[{"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/media?parent=44"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}