Add block areas tabbed sidebar to the widgets screen

[jorgefilipecosta]

Description

This PR adds the block areas tabbed sidebar to the widgets screen.
This change tries to follow the design suggested by @mapk and makes the screen more similar to edit-post.

How has this been tested?

I enabled the "Twenty Seventeen" theme.
I loaded the widgets screen.
I verified the block areas sidebar was available and I was able to select block areas by pressing on its list of block areas.
I verified when I selected a block the sidebar tab changed to block.
I verified when I unselected a block the sidebar tab changed to block areas.

[github-actions]

Size Change: +1.99 kB (0%)

Total Size: 1.13 MB

Filename	Size	Change
build/block-editor/index.js	106 kB	+114 B (0%)
build/block-library/index.js	119 kB	+5 B (0%)
build/blocks/index.js	48.1 kB	+2 B (0%)
build/components/index.js	190 kB	-4 B (0%)
build/data/index.js	8.42 kB	-1 B
build/edit-widgets/index.js	8.83 kB	+784 B (8%)	🔍
build/edit-widgets/style-rtl.css	5.13 kB	+538 B (10%)	⚠️
build/edit-widgets/style.css	5.13 kB	+538 B (10%)	⚠️
build/editor/index.js	44.6 kB	+10 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
build/a11y/index.js	1.14 kB	0 B
build/annotations/index.js	3.62 kB	0 B
build/api-fetch/index.js	3.4 kB	0 B
build/autop/index.js	2.83 kB	0 B
build/blob/index.js	620 B	0 B
build/block-directory/index.js	6.48 kB	0 B
build/block-directory/style-rtl.css	788 B	0 B
build/block-directory/style.css	788 B	0 B
build/block-editor/style-rtl.css	11 kB	0 B
build/block-editor/style.css	11 kB	0 B
build/block-library/editor-rtl.css	7.2 kB	0 B
build/block-library/editor.css	7.2 kB	0 B
build/block-library/style-rtl.css	7.48 kB	0 B
build/block-library/style.css	7.48 kB	0 B
build/block-library/theme-rtl.css	684 B	0 B
build/block-library/theme.css	686 B	0 B
build/block-serialization-default-parser/index.js	1.88 kB	0 B
build/block-serialization-spec-parser/index.js	3.1 kB	0 B
build/components/style-rtl.css	17.1 kB	0 B
build/components/style.css	17.1 kB	0 B
build/compose/index.js	9.31 kB	0 B
build/core-data/index.js	11.4 kB	0 B
build/data-controls/index.js	1.29 kB	0 B
build/date/index.js	5.47 kB	0 B
build/deprecated/index.js	771 B	0 B
build/dom-ready/index.js	568 B	0 B
build/dom/index.js	3.11 kB	0 B
build/edit-navigation/index.js	6.62 kB	0 B
build/edit-navigation/style-rtl.css	857 B	0 B
build/edit-navigation/style.css	856 B	0 B
build/edit-post/index.js	302 kB	0 B
build/edit-post/style-rtl.css	12.2 kB	0 B
build/edit-post/style.css	12.2 kB	0 B
build/edit-site/index.js	14 kB	0 B
build/edit-site/style-rtl.css	5.52 kB	0 B
build/edit-site/style.css	5.53 kB	0 B
build/editor/editor-styles-rtl.css	425 B	0 B
build/editor/editor-styles.css	428 B	0 B
build/editor/style-rtl.css	5.06 kB	0 B
build/editor/style.css	5.06 kB	0 B
build/element/index.js	4.65 kB	0 B
build/escape-html/index.js	733 B	0 B
build/format-library/index.js	7.71 kB	0 B
build/format-library/style-rtl.css	502 B	0 B
build/format-library/style.css	502 B	0 B
build/hooks/index.js	2.13 kB	0 B
build/html-entities/index.js	622 B	0 B
build/i18n/index.js	3.56 kB	0 B
build/is-shallow-equal/index.js	711 B	0 B
build/keyboard-shortcuts/index.js	2.51 kB	0 B
build/keycodes/index.js	1.94 kB	0 B
build/list-reusable-blocks/index.js	3.12 kB	0 B
build/list-reusable-blocks/style-rtl.css	226 B	0 B
build/list-reusable-blocks/style.css	226 B	0 B
build/media-utils/index.js	5.29 kB	0 B
build/notices/index.js	1.79 kB	0 B
build/nux/index.js	3.4 kB	0 B
build/nux/style-rtl.css	616 B	0 B
build/nux/style.css	613 B	0 B
build/plugins/index.js	2.56 kB	0 B
build/primitives/index.js	1.5 kB	0 B
build/priority-queue/index.js	789 B	0 B
build/redux-routine/index.js	2.85 kB	0 B
build/rich-text/index.js	14.8 kB	0 B
build/server-side-render/index.js	2.68 kB	0 B
build/shortcode/index.js	1.7 kB	0 B
build/token-list/index.js	1.28 kB	0 B
build/url/index.js	4.02 kB	0 B
build/viewport/index.js	1.84 kB	0 B
build/warning/index.js	1.14 kB	0 B
build/wordcount/index.js	1.17 kB	0 B

_{compressed-size-action}

[mapk]

Lookin' good! So glad to see this added. I've got a few changes.

1. Text changes

Currently, the Block Area description is this:

Block areas (also known as “Widget Areas”) are global locations in your site’s layout that can accept blocks. These vary by theme, but are typically places like your sidebar or footer.
Your theme contains the following block areas:

Can we update it to:

Block Areas (also known as "Widget Areas") are global parts in your site's layout that can accept blocks. These vary by theme, but are typically parts like your Sidebar or Footer.

• Use "parts" instead of "locations" and "places" to align it with our current terminology a bit better.
• Drop the last paragraph because I don't think that's needed.
• Capitalized certain words that needed it.

2. Block Area selection

The Block Area is an "area" and not necessarily a block, correct? But when I select the block area from the sidebar, it shows a block toolbar and switches to the "Block" tab in the sidebar which describes it as a "Widget Area." This feels wrong.

The Block Area tab should mimic the Document tab from the editor. It's not quite a block.

• Remove the toolbar.
• When area is selected, show the Block Area tab, not the Block tab.

3. Toolbar overlap

This may be solved with number 2 above.

4. Selecting a block

When I select a block, it should switch the tab in the sidebar to the "Block" tab just like it does in the Editor. Currently, it does not.

5. Change the icon for Block Area

Right now the calendar icon is being used here.

We should swap this out with the template part icon being used elsewhere.

[jorgefilipecosta]

Hi @mapk thank you for the review 👍 Your suggestions were applied! This is ready for another look.

[mapk]

Thanks for the speedy updates, @jorgefilipecosta!

• The tab switch works great from block to block area.
• Some description text was updated.

Changes still needed:

1. Block Area still has a toolbar

I think we should drop the toolbar for the Block Areas. Right now it offers a "Copy" option which is confusing. What does this copy; the contents or the actual Block Area? If it copies the Block Area, why?

2. Remove some text

I still see this text in the Block Area description:

Your theme contains the following block areas:

Can you remove that?

[jorgefilipecosta]

Hi @mapk,

1. Block Area still has a toolbar

The toolbar was already disabled for the widget area block (the container). Maybe it was a caching issue? Let me know if the toolbar keeps appearing in your tests.

2. Remove some text

The text was removed.

[mapk]

A couple more changes...

1. The toggling effect of the sidebar block area links.

When clicking the block area in the sidebar, the result should be that the block area in the page highlights. I noticed that it toggles the highlight, and then can't toggle it back on again.

2. Icon

As mentioned above, can we update the icon in the screenshot below to the lego-looking icon?

[mapk]

Took it for another spin and it worked well. 👍