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
Conversation
|
@mapk: How's this look to you? |
|
Size Change: +2.48 kB (0%) Total Size: 1.19 MB
ℹ️ View Unchanged
|
| 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.' |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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.' |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
…tifier for backwards compatibility
| const selectedWidgetArea = | ||
| selectedWidgetAreaId && | ||
| widgetAreas?.find( | ||
| ( widgetArea ) => widgetArea.id === selectedWidgetAreaId | ||
| ); |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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 && ( |
There was a problem hiding this comment.
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 🤔 ?
There was a problem hiding this comment.
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.
There was a problem hiding this 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.

Fixes #25745.
Closes #24838.
Closes #25190.
This PR implements the mockup in #25745 (comment).
How to test