{"id":14633472,"date":"2021-07-08T16:00:12","date_gmt":"2021-07-08T16:00:12","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&p=14633472"},"modified":"2023-07-27T15:19:54","modified_gmt":"2023-07-27T15:19:54","slug":"block-based-widgets-editor","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/block-based-widgets-editor\/","title":{"rendered":"Block-based Widgets Editor"},"content":{"rendered":"\n

The Block-based Widgets Editor brings the power of blocks to the Theme Customizer<\/strong> and Appearance<\/strong> > Widgets<\/strong> sections in the WordPress Administration Screens allowing you to add blocks right next to any current widgets. You can now customize your Widget Areas using blocks, just like how you use the block editor<\/a> to create content.<\/p>\n\n\n\n

The Block-based Widgets Editor was introduced in 5.8 for those who use classic themes with widgets<\/a>. With WordPress 5.8 or higher and a classic theme like Twenty Twenty<\/a>, you can see the Block-based Widgets Editor.<\/p>\n\n\n\n

\"Block-based
Appearance > Widgets View<\/figcaption><\/figure>\n\n\n\n
\"Widget
Customizer View<\/figcaption><\/figure>\n\n\n\n

How to use blocks in the Widget editor<\/h2>\n\n\n\n

The interface replicates the Post Editor<\/a> experience, allowing you to use similar workflows like drag and drop. The biggest difference is that you will see distinct editing areas that represent the various Widget Areas as part of your theme, like Footer and Sidebar. <\/p>\n\n\n\n

Within each of these areas, you can add blocks like you would in the Post Editor. You can edit any previous Widgets you\u2019ve added using the Legacy Widgets<\/strong> block. Of note, Theme blocks<\/a> (Site Logo, Site Title, etc) and Synced patterns<\/a> have been disabled in this editor.<\/p>\n\n\n\n

How to add a block<\/strong><\/p>\n\n\n\n

    \n
  1. Navigate to Appearance<\/strong> > Widgets<\/strong>.<\/li>\n\n\n\n
  2. Click on a specific Widget Area you’d like to edit.<\/li>\n\n\n\n
  3. Select the +<\/strong> prompt to add a block. You can use the search functionality to find the block you want or select Browse All<\/strong> to see the various options. <\/li>\n<\/ol>\n\n\n\n

    How to move items between areas<\/strong><\/p>\n\n\n\n

    There are two ways to move items between areas:<\/p>\n\n\n\n

      \n
    1. You can use drag and drop by hovering over the block toolbar, selecting and holding it, and dragging it to a new section. <\/li>\n\n\n\n
    2. You can use the option shown below in the block toolbar to move to the desired Widget Area:<\/li>\n<\/ol>\n\n\n\n
      \"Block<\/figure>\n\n\n\n

      How to use blocks in the Customizer<\/h2>\n\n\n\n

      If you’re more comfortable managing your Widget Areas in the Customizer, you can now add widgets and blocks with the same ability to live preview, schedule changes, and publish that you’re used to. The main thing to keep in mind is that, due to the small size of the Customizer, some settings require a few more steps to find. To find all block settings, follow the steps below:<\/p>\n\n\n\n

        \n
      1. Use the +<\/strong> to add a new block. <\/li>\n\n\n\n
      2. After adding the block, select the three-dot ellipsis menu and choose the top option of Show more settings<\/strong>. <\/li>\n\n\n\n
      3. From there, you’ll see more options to customize your block to your liking. <\/li>\n<\/ol>\n\n\n\n