{"id":34372,"date":"2022-02-02T17:00:25","date_gmt":"2022-02-02T16:00:25","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=34372"},"modified":"2022-02-03T11:03:59","modified_gmt":"2022-02-03T10:03:59","slug":"exploring-wordpress-5-9","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/exploring-wordpress-5-9\/","title":{"rendered":"Exploring WordPress 5.9 &#8211; Full Site Editing, Navigation Block, and More"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]WordPress 5.9, dubbed \u201cJosephine\u201d after the jazz singer Josephine Baker, has landed on January 25th, 2022. The update, which was scheduled for release late in 2021 but suffered from setbacks that had the release pushed back to early in 2022, is already touted as one of the most significant updates WordPress has ever had. Certainly, it\u2019s the biggest thing that has happened in WordPress since the Gutenberg editor saw the light of day.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This milestone status this update enjoys is mostly due to it being a strong push towards <a href=\"https:\/\/qodeinteractive.com\/magazine\/all-you-need-to-know-about-wordpress-fse-full-site-editing\/\">full site editing<\/a>, a WordPress development philosophy that aims to make visual editing of all parts of the websites available natively, with nothing but core WordPress. While the FSE story still needs to be rounded by the future 6.0 update, the bulk of it is already here.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we\u2019ll get you acquainted with everything WordPress 5.9 has to offer. We\u2019ll cover topics that include:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#goodbye-to-the-customizer-site-editor-takes-over\">Saying Goodbye to the Customizer \u2013 Site Editor (Kind of) Takes Over<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#twenty-twenty-two-new-block-theme-from-wordpress\">Twenty Twenty-Two \u2013 a New Block Theme from WordPress<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#moving-around-with-the-new-navigation-block\">Moving Around with the New Navigation Block<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#styling-the-site-with-styles\">Styling the Site with &#8211; Styles<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"goodbye-to-the-customizer-site-editor-takes-over\"><\/a>Say Goodbye to the Customizer \u2013 Site Editor (Kind of) Takes Over<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/WordPress-Update.jpg\" class=\"attachment-full size-full\" alt=\"WordPress Update\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/WordPress-Update.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/WordPress-Update-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/WordPress-Update-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/WordPress-Update-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Right off the bat, let\u2019s ease the concerns of anyone who\u2019d want to wait for a while before they start dabbling in full site editing on their website:<strong> The pre-5.9 way of doing things will still be there.<\/strong> You can still enjoy the Customizer, as well as the Widget, Menu, and all the other options you can find under Appearance in the dashboard.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, choosing to use the Site Editor has plenty of potential upsides. <strong>It\u2019s a place where you can do some things you weren\u2019t able to do before as easily<\/strong>. You can edit the search or the archive pages, without coding or the help of premium builder plugins. You can also edit the footer and the header without having to switch to the widgets menu.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Most importantly, Site Editor is the place where you can easily change the default look of pages by editing their templates.<\/strong> Because you can do all of it through visual editing, Site Editor is seen as a game-changing feature, making it even more interesting to at least try it out.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Enabling the Site Editor<\/h3>\n<p>[\/vc_column_text][vc_column_text]Once you decide to give full site editing a go, you do so by installing and activating a block theme \u2013 a theme built with blocks. <strong>WordPress released its block-based Twenty Twenty-Two theme with the WordPress 5.9 update, and we\u2019ll talk about it more soon.<\/strong> This theme is a decent starting point to try out full site editing, but you can find other FSE-ready themes by navigating to <em><strong>Appearance &gt; Themes &gt; Add Themes<\/strong><\/em> and checking \u201cFull Site Editing\u201d under features.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"677\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Check-Full-Site-Editing.jpg\" class=\"attachment-full size-full\" alt=\"Check Full Site Editing\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Check-Full-Site-Editing.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Check-Full-Site-Editing-300x210.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Check-Full-Site-Editing-768x537.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Check-Full-Site-Editing-620x433.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The important thing that you\u2019ll notice when you activate the Twenty Twenty-Two theme is that <strong>your Appearance dashboard menu suddenly contracts to only two items \u2013 Themes, and Editor<\/strong>. The latter is the Site Editor, and it\u2019s the feature that replaces the Customizer and allows you to use blocks to create layouts, templates, and edit the other parts of your website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Other block-enabled themes might leave some of the options under the Appearance menu besides Themes and the Editor. <strong>Don\u2019t be surprised if you see Menu among the options, too.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Working with the Site Editor<\/h3>\n<p>[\/vc_column_text][vc_column_text]The site editor allows you to edit templates that come with the theme. <strong>You might have a couple of options for building templates from scratch<\/strong> \u2013 Twenty Twenty-Two lets you create the template for the front page, for example.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"645\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Templates.jpg\" class=\"attachment-full size-full\" alt=\"Templates\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Templates.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Templates-300x200.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Templates-768x511.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Templates-620x413.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>As for template parts, you can create and edit them as you want, but you can only use them on templates.<\/strong> Template parts are divided into general template parts, header templates, and footer templates. Navigate to <em><strong>Appearance &gt; Editor &gt; Templates Parts &gt; Add New<\/strong><\/em>, and you can start creating your part of a template by choosing which part you want to create.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"555\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Create-a-Template-Part.jpg\" class=\"attachment-full size-full\" alt=\"Create a Template Part\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Create-a-Template-Part.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Create-a-Template-Part-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Create-a-Template-Part-768x440.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Create-a-Template-Part-620x355.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can use blocks, as well as <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-block-patterns\/\">block patterns<\/a>, when creating parts of templates. <strong>When you\u2019re done creating your template part, you\u2019ll be able to add it to templates using the Template Part block.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"645\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Template-Part-Block-1.jpg\" class=\"attachment-full size-full\" alt=\"Template Part Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Template-Part-Block-1.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Template-Part-Block-1-300x200.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Template-Part-Block-1-768x511.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Template-Part-Block-1-620x413.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Of course, you don\u2019t have to use template parts when editing templates. <strong>If you\u2019ve ever used the block editor to create a page or a post on your website, you\u2019ll find the site editor familiar.<\/strong> Once you\u2019ve edited the templates you want, applying them to your posts and pages is as simple as choosing them from a dropdown menu.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"twenty-twenty-two-new-block-theme-from-wordpress\"><\/a>Twenty Twenty-Two \u2013 a New Block Theme from WordPress<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"599\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Twenty-Twenty-Two-Theme.jpg\" class=\"attachment-full size-full\" alt=\"Twenty Twenty Two Theme\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Twenty-Twenty-Two-Theme.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Twenty-Twenty-Two-Theme-300x185.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Twenty-Twenty-Two-Theme-768x475.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Twenty-Twenty-Two-Theme-620x383.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Full site editing only works with block themes, and the team at WordPress gifted a great one to the world. <strong>The Twenty Twenty-Two is a beautiful new theme that leans into the new features brought by WordPress 5.9<\/strong>, giving you enough room to go your way while providing you plenty of examples to direct you if you choose so.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The theme comes packed with templates you can edit to your liking.<strong> It also allows you to create your front page, which is a more than welcome option. <\/strong>Styling the theme is easy enough with the new styling options \u2013 more on that later \u2013 and the template parts it contains are more than enough to get you started.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"440\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Twenty-Twenty-Two.jpg\" class=\"attachment-full size-full\" alt=\"Twenty Twenty-Two\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Twenty-Twenty-Two.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Twenty-Twenty-Two-300x136.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Twenty-Twenty-Two-768x349.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Twenty-Twenty-Two-620x282.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Another welcome addition brought by this theme is some well-designed block patterns.<\/strong> Because you might not be able to add new templates so freely, patterns will remain your go-to tool for adding more complex block configurations, and Twenty Twenty-Two will provide plenty of those.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"576\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Birds-Template.jpg\" class=\"attachment-full size-full\" alt=\"Birds Template\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Birds-Template.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Birds-Template-300x178.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Birds-Template-768x457.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Birds-Template-620x369.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Overall, there\u2019s plenty to explore and use in Twenty Twenty-Two. <strong>The theme is bound to inspire you to start playing around with blocks and templates.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"moving-around-with-the-new-navigation-block\"><\/a>Moving Around with the New Navigation Block<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"576\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Navigation-Block.jpg\" class=\"attachment-full size-full\" alt=\"Navigation Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Navigation-Block.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Navigation-Block-300x178.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Navigation-Block-768x457.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Navigation-Block-620x369.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Want to make it easy for people to move around your website but you\u2019re not sure how to do it with blocks?<strong> WordPress 5.9 has you covered with the brand-new Navigation block, one of the update\u2019s most anticipated features.<\/strong> While it still seems like it\u2019s a work in progress and a stepping stone towards a more powerful editor dedicated to navigation, it will still give you enough choices for designing your website\u2019s navigation.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Working with the Navigation Block<\/h3>\n<p>[\/vc_column_text][vc_column_text]<strong>You can add the navigation block in the same way you would add any other block in the block editor.<\/strong> Once it appears, you\u2019ll have access to a couple of alignment options, the ability to change block types between a group and columns, and, most importantly, the ability to select the menu.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"1058\" height=\"704\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Navigation-Menu-Block.jpg\" class=\"attachment-full size-full\" alt=\"Navigation Menu Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Navigation-Menu-Block.jpg 1058w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Navigation-Menu-Block-300x200.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Navigation-Menu-Block-1024x681.jpg 1024w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Navigation-Menu-Block-768x511.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Navigation-Menu-Block-970x645.jpg 970w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Navigation-Menu-Block-620x413.jpg 620w\" sizes=\"auto, (max-width: 1058px) 100vw, 1058px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After you choose the menu, the pages to which it leads will appear. <strong>You have the complete freedom of managing the pages in your menu.<\/strong> You can, for example, remove them. Using the List View, you can also easily rearrange them.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"553\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/List-View.jpg\" class=\"attachment-full size-full\" alt=\"List View\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/List-View.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/List-View-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/List-View-768x438.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/List-View-620x354.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you want to add menu items, pressing the \u201c+\u201d icon that appears when you click on the menu \u2013 not a specific item in the menu \u2013<strong> will bring up a tool that will let you choose from a list of links you have on your website.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"627\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Add-Link.jpg\" class=\"attachment-full size-full\" alt=\"Add Link\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Add-Link.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Add-Link-300x194.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Add-Link-768x497.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Add-Link-620x401.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>If you don\u2019t have a page yet, this tool helps you draft one.<\/strong> Just type the name of the page and you\u2019ll quickly see the option.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"585\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Draft-Page.jpg\" class=\"attachment-full size-full\" alt=\"Draft Page\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Draft-Page.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Draft-Page-300x181.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Draft-Page-768x464.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Draft-Page-620x374.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The Block options in the right-hand side menu will open up a whole world of customization, too. <strong>You\u2019ll have the ability to choose layout options such as justification and orientation.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"628\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Layout.jpg\" class=\"attachment-full size-full\" alt=\"Layout\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Layout.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Layout-300x194.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Layout-768x498.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Layout-620x402.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>You\u2019ll also get to choose when the menu collapses into an icon \u2013 never, always, or on mobile devices.<\/strong> The display options are where you\u2019ll find submenu options, too.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"505\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Display.jpg\" class=\"attachment-full size-full\" alt=\"Display\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Display.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Display-300x156.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Display-768x400.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Display-620x323.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, the color and typography options will give you all the customization choices you need regarding the color, size, weight, case, and font of your menu items.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"486\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Color-Style.jpg\" class=\"attachment-full size-full\" alt=\"Color Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Color-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Color-Style-300x150.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Color-Style-768x385.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Color-Style-620x311.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As you can see, there are plenty of options to check out and play around with.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"styling-the-site-with-styles\"><\/a>Styling the Site with &#8211; Styles<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"554\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Style-the-Site.jpg\" class=\"attachment-full size-full\" alt=\"Style the Site\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Style-the-Site.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Style-the-Site-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Style-the-Site-768x439.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Style-the-Site-620x354.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Everyone wants their website to look good and choosing things like fonts and colors is an important part of that.<strong> With WordPress 5.9, it becomes easier than ever to choose a color scheme for your website or to change the colors of certain elements such as links.<\/strong> You can create those changes for the whole website, as well as specific blocks.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Styling Your Website<\/h3>\n<p>[\/vc_column_text][vc_column_text]You\u2019ll notice that the template styling options come divided into three sections \u2013 typography, colors, and layout. <strong>The layout options will give you the least choices, as they\u2019re mostly concerned with padding.<\/strong> Typography options, on the other hand, will let you choose separate options for links and regular text. You\u2019ll get to choose the font family, the size of the letters, the line height, and the appearance.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"520\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Text-Styles.jpg\" class=\"attachment-full size-full\" alt=\"Text Styles\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Text-Styles.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Text-Styles-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Text-Styles-768x412.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Text-Styles-620x333.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>The color options will first let you choose a palette of colors for the website.<\/strong> You\u2019ll get to pick between solid and gradient colors, and between premade and custom palettes. Next, you\u2019ll be able to pick colors for links, text, and the background.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"491\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Styles.jpg\" class=\"attachment-full size-full\" alt=\"Styles\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Styles.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Styles-300x152.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Styles-768x389.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Styles-620x314.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]These changes will apply globally to your website, so make sure you take that into account when picking out a new color scheme.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Styling the Blocks<\/h3>\n<p>[\/vc_column_text][vc_column_text]<strong>Besides letting you choose colors and fonts for the whole website, the new Styles menu lets you set specific options for every block that allows it.<\/strong> Because most of them do, you can have your hands full stylizing every block you want to appear on your website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The types of styling options you can access will depend on the block you want to style.<strong> The image block, for example, will give you the layout options of changing its border-radius.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"476\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Border.jpg\" class=\"attachment-full size-full\" alt=\"Border\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Border.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Border-300x147.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Border-768x377.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Border-620x305.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The verse block, on the other hand, will give access to the full suite of typography and color options, as well as the padding layout setting.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"473\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Typography.jpg\" class=\"attachment-full size-full\" alt=\"Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Typography-300x146.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Typography-768x375.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Typography-620x303.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Thanks to these styling options, you can finely customize the appearance of almost every element on your website.<\/strong> The best of it all is that it\u2019s global and persistent \u2013 every instance of the block on the website will share the same styling options once you set them.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Summing Up WordPress 5.9<\/h2>\n<p>[\/vc_column_text][vc_column_text]With the newest 5.9 updates, WordPress is making good on its promise to make building and editing websites easier for people who don\u2019t have coding and design knowledge. Just how big of an echo will these changes have in the wider world is yet to be seen.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019ll also have to wait for a while to gauge the influence on the WordPress-related industries. There\u2019s been excitement in the community for the update, but the adoption rate of full site editing, the core reason for the update, is not easy to predict. We\u2019ll all have to just wait and see, and create websites the good-old way in the meantime.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Want to learn what&#8217;s new with WordPress 5.9? We&#8217;ll show you the latest features it brings WordPress&#8217; Full Site Editing project, and more!<\/p>\n","protected":false},"author":9295,"featured_media":34410,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[196,72,31,13],"class_list":["post-34372","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources","tag-fse","tag-gutenberg","tag-update","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/34372","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/9295"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=34372"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/34372\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/34410"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=34372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=34372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=34372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}