Show user's avatar in post author dropdown #41430
Conversation
noisysocks
added
[Type] Enhancement
|
Size Change: +346 B (0%) Total Size: 1.24 MB
ℹ️ View Unchanged
|
|
Thanks, @noisysocks! Having a good select control with images will be helpful in other places, so I would use this project as an opportunity to create that component instead of using popover (plus, since we can only select one author per post at the moment, a simple dropdown seems more appropriate). I'll improve the design of that mockup and share it here. |
|
Related to this PR, I recently did some exploratory work on "select"-related components using One of the points that were raised as part of the exploration, is about the |
Yeah, my impression is that this will be inevitable. In the short term though, if we do want to add the customizability proposed in this PR, I think we should at least stick to the more generic |
|
I like the idea of using a render prop. It means that With this approach though, how do we ensure that item styling across different instances of |
I will start to look into this and alternative options for
What we currently have in mind is to:
As I mentioned above, we're definitely going to keep you in the loop! |
|
I went to the WCEU and then was on holiday and I never shared my proposal for the design of this dropdown. Even though this PR is closed, I'll leave them here as a reference and will share them again with more detail when @ciampo publishes the new exploration:
|
|
Thank you, @javierarce ! I'll take a closer look at these specs in the upcoming days. Just FYI, while I can access the Figma file, I don't seem to be able to view the interactive prototypes (the page gets stuck while loading at 99%) |
I can see them… maybe that's a temporary glitch? In any case, here are a couple of videos: Select-1.mp4Screen.Recording.2022-06-17.at.10.53.37.mov |
|
Thanks @javierarce! I'll link to your comment in #39082 in case we lose it when this PR fades into the abyss. |
|
@ciampo: How is #41726 going? Reckon it will be in a state where I can use it to add avatars to the Author dropdown by WordPress 6.1? If not then maybe I can revive this PR and follow @mirka's suggestion in #41430 (comment). |
Haven't managed to make much progress in the past two weeks due to some unforeseen AFK and to the high amount of other incoming requests and high-priority exceptions (like #41575). By when should this component be ready, in order to make it for the 6.1 release? |
|
WP 6.1 will include up to Gutenberg 14.1 so we have until September 14 to get everything merged. |
Thank you! At this point I'm hopeful that we can include the new version of the component in the 6.1 release, but I'll make sure I'll reassess the progress in a few weeks time so that we can adopt an alternative approach in case I get delayed further. |
|
Update: the recent Popover regressions have taken almost 100% of my time in the past 3-4 weeks, and therefore as of now I haven't made much progress on There are still ~3/4 weeks until Gutenberg 14.1, it's not a lot of time and therefore I would start thinking at a fallback plan in case |
|
Thanks @ciampo! I'll look into reviving this PR but using |
|
Thank you! I still plan on working on it in the near future anyway! |
What?
Quick go at updating
CustomSelectControlto allow an image to be shown alongside each option and updating the Author dropdown in the post inspector to show user avatars.Why?
Part of #39082.
Based on the mockup in #40281 (comment).
Originally we were going to create an Author popover but I think it's worth exploring a dropdown with avatar images as a simpler alternative.
How?
CustomSelectControlto accept animageattribute in each of the options given tooptions. Thisimageattribute can be set to an object containingsrc,width,height, etc.PostAuthorto useCustomSelectControland display user avatars.ComboboxControlif we want to show avatars there too? Or maybe this is when we use a popover?Testing Instructions
Also have a look at the new storybook added for
CustomSelectControl.Screenshots or screencast
Kapture.2022-05-30.at.17.23.17.mp4