Create front-end design for "adopt-me"

[samuelsidler]

Once a plugin has been marked as "adopt-me" (see ticket #1762), we need to show something on the front-end so visitors know the plugin is looking for a new owner.

I suggest a banner similar to the green localization banner (but probably another color) with text similar to:

The plugin developer has indicated that they are no longer developing this plugin. If you're interested in adopting this plugin, please email plugins@….

@ipstenu: Does that sound good?

[Ipstenu]

Purple. I say purple.

Blue - waiting approval
green - approved and needs updated
red - you been bad
purple - Love me!

@mordauk do you have any thoughts? You did this more recently that I did (adoption).

[mordauk]

Purple has my vote too!

[joyously]

Is there a way to search for plugins with the Adopt-me tag? It would be great for developers, but also to find one to test this with. (When I did a search on the directory, the ones shown didn't have the tag.)
Would it make sense to indicate the Adopt-me status in the summary card, or just on the plugin's page?

[obenland]

Let's not add more information to plugin cards. Plugins tagged with Adopt Me can be found at ​https://wordpress.org/plugins/tags/adopt-me/

Adding links to taxonomy pages is currently not very scalable though, so that is probably the biggest hurdle I see

[joyously]

Tags in general should be more exposed on the Plugin Directory! I didn't know how to get there...
Clicking on a plugin with that tag, I see no indication yet of the Adopt Me status. I agree that it could be a banner similar to the translation banner, but I think it should be prominent on the Development portion of the plugin page. The tag itself could be colored for more attention, also.
It could be a ribbon diagonally across the upper corner of the plugin portion of the page, or just something on the Development tab link.

[marybaum]

Replying to joyously:

Looks like the adopt-me plugins all say that on their front page, in the first sentence of the description copy.

Agree that it should also occur on the dev page, possibly with more specific discussion of what maintaining that plugin might entail.

Some plugins are mostly just style changes; a competent front-ender could probably take them on. Others need full REST API and/or other advanced dev support for cron jobs, JSON, you name it - things that are just words to me but daily life to full-stack folks.

And definitely needs some sort of meaningful imagery that shows up in several places ... will Slack some thumbs.

Tags in general should be more exposed on the Plugin Directory! I didn't know how to get there...
Clicking on a plugin with that tag, I see no indication yet of the Adopt Me status. I agree that it could be a banner similar to the translation banner, but I think it should be prominent on the Development portion of the plugin page. The tag itself could be colored for more attention, also.
It could be a ribbon diagonally across the upper corner of the plugin portion of the page, or just something on the Development tab link.

[Travel_girl]

Option: #1

[Travel_girl]

Option: #2

[Travel_girl]

Option: #3

[Travel_girl]

I thought about different variations to display "Adopt this plugin".

Option 1:
A Notification under the "Translate Me" Message. I think it is a good spot to display it under, so the call to action for contribution is together. The translation call to action would probably effect more people, so it should be displayed first.
This is my favourite.

Option 2: A Message under the Warning. Would be also a good spot, but not sure if this could worried other people to use it, as the style looks more like a warning.

Option 3: The Message could be displayed in the Sidebar. Is a bit less prominent and it would not be purple, to make the Design more consistent.

An other (or additional) option would be, to display the message in the tab "Contribution" on the top. I think it would be a good spot to show it also there. But I think it would not ne visible enough, if this is the only place to see it.

The tag "adopt-me" on the side is really easy to miss. So I vote for an extra message, beside that.

As @obenland mentioned it is hard to include links, I was not sore, what would be possible to include as a button or link. But it would be nice to link to a handbook-page that explains maybe, how the process is to take over a plugin.

[Travel_girl]

Backround color for notifications: D5CAF2
Border-Color: 826EB4 (​https://make.wordpress.org/design/handbook/design-guide/foundations/colors/)

Both passes AAA standards with font-color 32373c

[joyously]

I vote for combining 1 and 3, so that there is an action that the user can take. The screenshot shows a purple message, but nothing actionable (well, it says to email plugins, but I think a link to the page explaining it would be much better).

I also see nothing wrong with having a purple box in the sidebar, if the banner is not at the top.

[Ipstenu]

Instead of saying "Email Plugins..." we should link to ​https://developer.wordpress.org/plugins/wordpress-org/take-over-an-existing-plugin/

That will walk them through the process without having to micromanage everyone :D

I like option 2 the best. It's up at the top and highly visible. With a good link, we won't need the button.

[Travel_girl]

I was discussing the design with Tammie @karmatosed, Sergey @sergeybiryukov and Dominik @ocean90:

Tammies meant, that the notification on top (#1 and #2) would be too noisy, of we have multiple notifications (like 2 years not updated and translating note). So she voted for solution in the Sidebar.
But she was concerned about the color und was not sure if purple is the right color to go.

Because the widget could easily be missed on the bottom of the sidebar, we think, that it would be better to place it on top of the sidebar. I think below the Plugin Details would be a good spot, cause the plugin details are really relevant for users and should be stick on top.

To make the note a but more obviouse I have added color to the box. My favorite would be the yellow one, cause thats a notification color, that we already use.

I have also tried out a purple button, but I have not liked it at all, cause the other buttons are grey and it would not be consistent.

See Mockups below:

[Travel_girl]

Purple box

[Travel_girl]

Yellow Box

[Travel_girl]

Purple button

[SergeyBiryukov]

yellow_box.png​ looks great to me. Anyone willing to work on a patch?

[karmatosed]

This is awesome work thanks. My feelings on this are the yellow option but without a border.

[Ipstenu]

Can we put the yellow box on the TOP of the sidebar? First thing?

I know 'above the fold' is not a real thing anymore, but it's still more visible there :)

Also is it going to confuse users that the 'adopt' button is a link to a directions page and not a form? (And no, I don't want it to be a form!)

[joyously]

I prefer the purple, so that it is different and stands out as much as possible. I'm all for making it as noisy as possible so that it can attract the eye of a developer to adopt it.
A lot of plugin banners are very colorful, even the generated ones, so it needs to be able to compete with that, and look different from the other standard messages so that it is not lost to "banner blindness".

[melchoyce]

Riffing on @Travel_girl's concepts in blue_box.jpg​. Tried out blue since we generally use it for "hey, this is information!" while yellow usually means a warning. Also moved it to the top, per @Ipstenu's suggestion.

I think we should update the copy to say what adopting a plugin means, since we never actually say it.

[Ipstenu]

"This plugin is seeking new, active, developers. Are you interested in assuming that responsibility?"

And the button would be "Read More" or something to that effect?

[Travel_girl]

Replying to Ipstenu:

And the button would be "Read More" or something to that effect?

"Read more" would not be accessible for screen reader users, unless we add that information vie Aria Labels.
But in Terms of a better UX for everyone, I would suggest

• Adopting Process
• Adopt Plugin
• Details for Adopt Plugin

or something similar.

[ck3lee]

Sample screenshot for #1763.patch

• I took @melchoyce's and @Ipstenu design and text copy as the base.
• I made some margin refinements to keep the border of the box vertically aligned with other widgets.
• Read more button opens ​https://developer.wordpress.org/plugins/wordpress-org/take-over-an-existing-plugin/ in the same window.

"Read more" would not be accessible for screen reader users, unless we add that information vie Aria Labels.

@Travel_girl, I took your consideration too. The current "Read more" button is actually an anchor tag styled as a button. So, I think it would work nicely for screenreader to direct the users to another page if they want to read more about the process. Your thoughts?

[tellyworth]

In 8641:

Plugin Dir: add a new Adopt Me widget.

Props ck3lee.
See #1763

[tellyworth]

In 8642:

Plugin dir: register the Adopt Me widget.

See #1763

[tellyworth]

In 8643:

Plugin dir theme: styles for Adopt Me widget

See #1763

[tellyworth]

In 8644:

Plugin dir theme: load the Adopt Me widget

Also bumps the CSS cache.
Props ck3lee
Fixes #1763

[Otto42]

The adopt me widget is now showing up for plugins that don't have the adopt-me tag. Example: ​https://wordpress.org/plugins/strong-testimonials/

[Otto42]

In 8648:

Plugin dir theme: Turn off the adopt me widget. Partially revert [8644] temporarily. See #1763

[Otto42]

Seems like this relies on the taxonomy being updated, which, it isn't, perfectly. Maybe relying on the actual tags from the readme makes more sense, or fixing the taxonomy updating. Either way.

[dd32]

Replying to Otto42:

Seems like this relies on the taxonomy being updated, which, it isn't, perfectly. Maybe relying on the actual tags from the readme makes more sense, or fixing the taxonomy updating. Either way.

It seems that plugins go into the section once they set the tag, but never leave the category once they've had the tag removed..

oops :) [3357]

I guess we'll have to clear their plugin_section tax in an else-branch there and manually re-assign the others

[ck3lee]

v2

[ck3lee]

Attached v2 patch here.

• Fixed the importer to remove the category if adopt-me tag is not set.
• Re-enabled Adopt Me panel.
• Added url rewrite for plugins/browse/adopt-me/ to list all "Adopt Me" plugins

Please review, @dd32 @Otto42. Let me know if there is anything else needs to be fix. I'd be happy to help.

This doesn't clean the existing "bad data" though. Suggest to do that manually before/after commit.

[dd32]

This doesn't clean the existing "bad data" though. Suggest to do that manually before/after commit.

I've sync'd the category to the tag (manually), all plugins in the adopt-me section now have the tag.

[dd32]

In 8654:

Plugin Directory: Import: Clear the plugin from the Adopt Me section once the adopt-me tag is removed.

Props ck3lee.
See #1763.

[dd32]

In 8655:

Plugin Directory: Allow access to the /browse/adopt-me/ section view, this isn't exposed or linked to from anywhere yet.

Props ck3lee.
See #1763.

[dd32]

In 8656:

Plugin Directory: Re-enable the adopt-me widget, as the data powering it is now correct.

Reverts [8648].
Props ck3lee.
Fixes #1763.

[SergeyBiryukov]

@dd32, thanks for the commits :) In the future, could we give props to everyone who contributed to the ticket in a significant way (including design, text suggestions, etc. and not just code), ​same as the Core Team does?

[Travel_girl]

Replying to SergeyBiryukov:

@dd32, thanks for the commits :) In the future, could we give props to everyone who contributed to the ticket in a significant way (including design, text suggestions, etc. and not just code), ​same as the Core Team does?

That would be great!