Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Widgets editor: Display Widget Area's name and description in the sidebar #25943

Merged
merged 6 commits into from Oct 13, 2020

Conversation

noisysocks
Copy link
Member

@noisysocks noisysocks commented Oct 8, 2020

Fixes #25745.
Closes #24838.
Closes #25190.

sidebar

This PR implements the mockup in #25745 (comment).

  • Renames Block Areas to Widget Areas.
  • Removes the list of Widget Areas from the sidebar.
  • Displays the currently selected Widget Area's name and description in the sidebar.

How to test

  1. Navigate to Appearance → Widgets.
  2. Look at the sidebar. Experiment with opening the sidebar, closing the sidebar, selecting blocks, selecting widget areas, and selecting nothing.

@noisysocks noisysocks added [Type] Enhancement A suggestion for improvement. [Feature] Widgets Screen The block-based screen that replaced widgets.php. labels Oct 8, 2020
@noisysocks noisysocks added this to PRs in progress in Block-based Widgets Editor via automation Oct 8, 2020
@noisysocks noisysocks added Needs Copy Review Needs review of user-facing copy (language, phrasing) Needs Design Feedback Needs general design feedback. labels Oct 8, 2020
@noisysocks
Copy link
Member Author

@mapk: How's this look to you?

@github-actions
Copy link

github-actions bot commented Oct 8, 2020

Size Change: +2.48 kB (0%)

Total Size: 1.19 MB

Filename Size Change
build/annotations/index.js 3.52 kB -24 B (0%)
build/autop/index.js 2.72 kB +1 B
build/blob/index.js 667 B -1 B
build/block-directory/index.js 8.56 kB +10 B (0%)
build/block-editor/index.js 130 kB +1.3 kB (1%)
build/block-editor/style-rtl.css 10.9 kB -3 B (0%)
build/block-editor/style.css 10.9 kB -2 B (0%)
build/block-library/editor-rtl.css 8.65 kB -2 B (0%)
build/block-library/editor.css 8.65 kB -4 B (0%)
build/block-library/index.js 145 kB +635 B (0%)
build/block-library/style-rtl.css 7.7 kB +41 B (0%)
build/block-library/style.css 7.7 kB +41 B (0%)
build/blocks/index.js 47.6 kB +69 B (0%)
build/components/index.js 169 kB -340 B (0%)
build/components/style-rtl.css 15.5 kB +47 B (0%)
build/components/style.css 15.5 kB +49 B (0%)
build/compose/index.js 9.63 kB +206 B (2%)
build/core-data/index.js 12 kB -12 B (0%)
build/data/index.js 8.63 kB +27 B (0%)
build/date/index.js 31.9 kB +3 B (0%)
build/edit-navigation/index.js 10.6 kB +2 B (0%)
build/edit-post/index.js 306 kB -32 B (0%)
build/edit-post/style-rtl.css 6.29 kB +3 B (0%)
build/edit-post/style.css 6.28 kB +5 B (0%)
build/edit-site/index.js 21.3 kB +426 B (2%)
build/edit-site/style-rtl.css 3.8 kB +76 B (1%)
build/edit-site/style.css 3.81 kB +80 B (2%)
build/edit-widgets/index.js 21.3 kB -27 B (0%)
build/edit-widgets/style-rtl.css 2.94 kB -56 B (1%)
build/edit-widgets/style.css 2.95 kB -55 B (1%)
build/editor/editor-styles-rtl.css 480 B -12 B (2%)
build/editor/editor-styles.css 482 B -11 B (2%)
build/editor/index.js 45.5 kB +40 B (0%)
build/editor/style.css 3.84 kB +1 B
build/format-library/index.js 7.49 kB +3 B (0%)
build/html-entities/index.js 622 B +1 B
build/i18n/index.js 3.54 kB -1 B
build/keyboard-shortcuts/index.js 2.39 kB +1 B
build/list-reusable-blocks/index.js 3.02 kB -2 B (0%)
build/media-utils/index.js 5.12 kB +3 B (0%)
build/notices/index.js 1.69 kB -1 B
build/nux/index.js 3.27 kB -7 B (0%)
build/plugins/index.js 2.44 kB -1 B
build/rich-text/index.js 13 kB -2 B (0%)
build/server-side-render/index.js 2.6 kB +1 B
build/shortcode/index.js 1.69 kB -2 B (0%)
build/viewport/index.js 1.75 kB +2 B (0%)
build/warning/index.js 1.13 kB -1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/api-fetch/index.js 3.35 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-library/theme-rtl.css 741 B 0 B
build/block-library/theme.css 741 B 0 B
build/block-serialization-default-parser/index.js 1.78 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/data-controls/index.js 685 B 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 4.42 kB 0 B
build/edit-navigation/style-rtl.css 868 B 0 B
build/edit-navigation/style.css 871 B 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/element/index.js 4.45 kB 0 B
build/escape-html/index.js 734 B 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 1.74 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keycodes/index.js 1.85 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/primitives/index.js 1.34 kB 0 B
build/priority-queue/index.js 790 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/token-list/index.js 1.24 kB 0 B
build/url/index.js 4.06 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

let description;
if ( ! selectedWidgetArea ) {
description = __(
'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.'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this text copied from somewhere?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes this comes from the design in #25745 (comment).

);
} else if ( selectedWidgetAreaId === 'wp_inactive_widgets' ) {
description = __(
'Blocks in this Widget Area will not be displayed in your site.'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The old use of inactive widgets was to "save" them for reuse, in order to not have to re-customize them by adding a new one. Perhaps we could explain this as well?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I made this copy up on the fly 😅

@mapk: What should it say?

Copy link
Contributor

@mapk mapk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! 👍

sidebar

A weird glitch happened when I first clicked away from the Inactive Widget area as you can see in the video, but seemed to work afterwards.

@mapk mapk removed the Needs Design Feedback Needs general design feedback. label Oct 12, 2020
Comment on lines 15 to 19
const selectedWidgetArea =
selectedWidgetAreaId &&
widgetAreas?.find(
( widgetArea ) => widgetArea.id === selectedWidgetAreaId
);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nitpick: Not sure about the performance impact, but maybe we would want to useMemo this so that we don't have to recalculate .find every time this component renders.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done in 4b44c1b!

<BlockIcon icon={ blockDefault } />
<div>
<p>{ description }</p>
{ widgetAreas?.length === 0 && (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What if widgetAreas is nullish? Do we want to display the empty message in this case?

I think that depends on whether we treat this state as a loading state or an error state 🤔 ?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we display the empty message when widgetAreas is nullish (! widgetAreas || widgetAreas.length === 0) then we'll see a flash of the empty message when the page loads, which is quite jarring. It's more common that there are widget areas so I think best to be optimistic about that.

Copy link
Contributor

@talldan talldan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good from testing and code review point of view.

Not sure if you're still waiting for copy review, but that can always be a follow up.

@talldan talldan merged commit 7ed9f73 into master Oct 13, 2020
Block-based Widgets Editor automation moved this from PRs in progress to Done Oct 13, 2020
@talldan talldan deleted the update/widget-editor-sidebar branch October 13, 2020 09:51
@github-actions github-actions bot added this to the Gutenberg 9.2 milestone Oct 13, 2020
@talldan talldan mentioned this pull request Oct 15, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Widgets Screen The block-based screen that replaced widgets.php. Needs Copy Review Needs review of user-facing copy (language, phrasing) [Type] Enhancement A suggestion for improvement.
Projects
No open projects
5 participants