{"id":999959148,"date":"2022-02-19T13:20:10","date_gmt":"2022-02-19T13:20:10","guid":{"rendered":"https:\/\/f60host.com\/support\/?p=999959148"},"modified":"2022-02-19T13:20:10","modified_gmt":"2022-02-19T13:20:10","slug":"managing-widgets-with-blocks-in-wordpress-5-8","status":"publish","type":"post","link":"https:\/\/f60host.com\/support\/managing-widgets-with-blocks-in-wordpress-5-8\/","title":{"rendered":"Managing Widgets with Blocks in WordPress 5.8"},"content":{"rendered":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/f60host.com\/support\/wp-content\/uploads\/2022\/03\/managing-widgets-with-blocks-in-wordpress.jpg\" alt=\"Managing Widgets with Blocks in WordPress 5.8\" class=\"wp-image-999960707\"\/><\/figure><\/div>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"using-blocks-to-manage-widgets-in-wordpress-5-8\">Using Blocks to Manage Widgets in WordPress 5.8<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">The ability to install widgets using blocks is one of <strong>WordPress 5.8&#8217;s<\/strong> most exciting new features. Widgets were formerly handled through the WordPress administrator dashboard as well as the Customizer on the front end. <em>Managing widgets<\/em>, on the other hand, may now be done through blocks in the page or post editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This article will show you how to use the new WordPress 5.8 interface to <strong>navigate<\/strong> through the changes and <span style=\"text-decoration: underline;\">install and edit widgets<\/span>.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/f60host.com\/wordpress-hosting.php\">Widget Areas \u2013 Managing Widgets in the Administrator Dashboard<\/a><\/li><li><a href=\"https:\/\/f60host.com\/wordpress-hosting.php\">Working with Widgets in the Front End<\/a><\/li><li><a href=\"https:\/\/f60host.com\/wordpress-hosting.php\">Working with Widgets in a Post or Page<\/a><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>NOTE<\/strong>: The new interface for managing widgets with <span style=\"text-decoration: underline;\">blocks is available starting<\/span> in WordPress 5.8.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"widget-areas-managing-widgets-in-the-administrator-dashboard\">Widget Areas \u2013 Managing Widgets in the Administrator Dashboard<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The initial location for handling widgets in WordPress was in the Administrator Dashboard under <em>Appearance<\/em> &gt; Widgets. If you look there right now, you&#8217;ll see something like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/f60host.com\/support\/wp-content\/uploads\/2022\/02\/widgets-top-1024x503-1.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/f60host.com\/support\/wp-content\/uploads\/2022\/02\/widgets-top-1024x503-1.jpg\" alt=\"\" class=\"wp-image-999959149\" width=\"840\" height=\"412\"\/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Remember that widgets are affected by the theme you&#8217;re using. The Twenty Twenty-one theme from WordPress is utilised in the screenshots throughout this lesson.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The block setting column on the right of the<em> WordPress Administrator<\/em> is called Widget Areas when you enter this area. This section, like the previous one, applies to the entire site. This means that any changes made here will have an impact on the entire WordPress site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can see the spots where you can put a widget based on the theme if you minimise the parts. The <strong>Twenty Twenty-one <\/strong>theme has a widget section in the footer. There is also an inactive area, as with other themes.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/f60host.com\/support\/wp-content\/uploads\/2022\/02\/widget-areas.jpg\"><img decoding=\"async\" src=\"https:\/\/f60host.com\/support\/wp-content\/uploads\/2022\/02\/widget-areas.jpg\" alt=\"\" class=\"wp-image-999959150\"\/><\/a><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">When changing a widget, you&#8217;ll notice the option to relocate it to a designated area or the<em> inactive<\/em> widgets section.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/f60host.com\/support\/wp-content\/uploads\/2022\/02\/moving-widgets.jpg\"><img decoding=\"async\" src=\"https:\/\/f60host.com\/support\/wp-content\/uploads\/2022\/02\/moving-widgets.jpg\" alt=\"\" class=\"wp-image-999959151\"\/><\/a><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"in-the-front-end-working-with-widgets\">In the Front End, Working with Widgets<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">When you use the Customizer to interact with Widgets on the front end, it will look like this when you first open it:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/f60host.com\/support\/wp-content\/uploads\/2022\/02\/widgets-front-end-1.jpg\"><img decoding=\"async\" src=\"https:\/\/f60host.com\/support\/wp-content\/uploads\/2022\/02\/widgets-front-end-1.jpg\" alt=\"\" class=\"wp-image-999959152\"\/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">It&#8217;s worth noting that there are documentation options. These links are still available via the<span style=\"text-decoration: underline;\"> vertical 3-dot menu<\/span> at the top of the left-hand column, which lists all of the widgets.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/f60host.com\/support\/wp-content\/uploads\/2022\/02\/editing-widgets-front-end-2-1024x503-1.jpg\"><img decoding=\"async\" src=\"https:\/\/f60host.com\/support\/wp-content\/uploads\/2022\/02\/editing-widgets-front-end-2-1024x503-1.jpg\" alt=\"\" class=\"wp-image-999959153\"\/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This is the link they provide to the<a href=\"https:\/\/f60host.com\/google-gsuite-workspace.php\">&nbsp;official WordPress documentation.<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When you are editing using the Customizer in the front end, note that you have edit icons on the main screen that you can click on.&nbsp; When you click on a widget to edit it (<em>specifically the edit icon<\/em>), then it will automatically open in the column on the left-hand side like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/f60host.com\/support\/wp-content\/uploads\/2022\/02\/editing-block-front-end-2.jpg\"><img decoding=\"async\" src=\"https:\/\/f60host.com\/support\/wp-content\/uploads\/2022\/02\/editing-block-front-end-2.jpg\" alt=\"\" class=\"wp-image-999959155\"\/><\/a><figcaption>You may reposition them using the arrows in each block menu or the <em>drag-and-drop<\/em> options in the <strong>WordPress interface<\/strong>, just like blocks.<br \/>Remember that your changes on the front end influence the regions that you display, and that you must save them using the <span style=\"text-decoration: underline;\">Customizer interface&#8217;s Publish option.<\/span><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"adding-widgets-to-a-post-or-a-page\">Adding Widgets to a Post or a Page<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can use Widgets in your content when working on a Post or Page because blocks can be added to the content regions. Simply click the plus symbol at the top of the page, or in the content area, and then search for the Widget section, just like any other post. You will then be able to see the available blocks.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The screenshot below shows how the <strong>Calendar widget<\/strong> can be used in the post&#8217;s content. It&#8217;s worth noting that the widget appears in the content area&#8217;s body. It doesn&#8217;t show up in the footer or any other designated areas where widgets are usually placed <span style=\"text-decoration: underline;\">depending on the theme<\/span>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/f60host.com\/support\/wp-content\/uploads\/2022\/02\/editing-widgets-post-1024x503-1.jpg\"><img decoding=\"async\" src=\"https:\/\/f60host.com\/support\/wp-content\/uploads\/2022\/02\/editing-widgets-post-1024x503-1.jpg\" alt=\"\" class=\"wp-image-999959157\"\/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This concludes our WordPress 5.8 widget management tutorial. When I was testing the new widget management settings, I ran across a probable plugin conflict. To avoid conflicts or issues, I recommend making sure that all of your plugins and <strong>themes are up to date<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Using Blocks to Manage Widgets in WordPress 5.8 The ability to install widgets using blocks<span class=\"excerpt-hellip\"> [\u2026]<\/span><\/p>\n","protected":false},"author":1,"featured_media":999960707,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[12,25],"class_list":["post-999959148","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-wordpress","tag-wordpress-login"],"_links":{"self":[{"href":"https:\/\/f60host.com\/support\/wp-json\/wp\/v2\/posts\/999959148","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/f60host.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/f60host.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/f60host.com\/support\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/f60host.com\/support\/wp-json\/wp\/v2\/comments?post=999959148"}],"version-history":[{"count":0,"href":"https:\/\/f60host.com\/support\/wp-json\/wp\/v2\/posts\/999959148\/revisions"}],"wp:attachment":[{"href":"https:\/\/f60host.com\/support\/wp-json\/wp\/v2\/media?parent=999959148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/f60host.com\/support\/wp-json\/wp\/v2\/categories?post=999959148"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/f60host.com\/support\/wp-json\/wp\/v2\/tags?post=999959148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}