Page MenuHomePhabricator

Post-activation instructions for Wikipedia Preview.
Closed, ResolvedPublic

Assigned To
Authored By
PWaigi-WMF
Oct 6 2022, 1:19 PM
Referenced Files
F35844970: 02 Detailed instructional graphics.png
Dec 7 2022, 4:54 PM
F35844967: Step-4-detailed.png
Dec 7 2022, 4:54 PM
F35844965: Step-3-detailed.png
Dec 7 2022, 4:54 PM
F35844963: Step-2-detailed.png
Dec 7 2022, 4:54 PM
F35844961: Step-1-detailed.png
Dec 7 2022, 4:54 PM
F35844959: Illustration 01.png
Dec 7 2022, 4:54 PM

Description

Description

This task entails adding detailed and visual steps for users when embedding the Wikipedia Preview plugin on their sites.

Depending on the type of editor the admin uses, we should show either, a Classic editor instructions OR Gutenberg editor instructions

a) Classic Editor Copy: Add a Preview link to your site’s content (i.e. a word or a phrase you want to provide context for).

b) Gutenberg Editor Designs: Fetch visual illustrations and copy from Figma file

Gutenberg UX details

  • Present post-activation instruction once users activate the plugin.
  • These instructions come only for once. If users leave the instructions page then they won't be able to see them again.

Below mockup is an example to show how post-activation page will look together (Gutenberg).

02 Detailed instructional graphics.png (2×1 px, 508 KB)

Steps to add instructions

  • Add following heading first followed by an illustration.

Enhance your website with free knowledge straight from Wikipedia!

Illustration 01.png (778×1 px, 97 KB)

  • Add following copy below the illustration

Wikipedia Preview lets you show a popup card with a short summary from Wikipedia when a reader clicks or hovers over a link.
Wikipedia Preview is easy to set up and use. Simply follow these steps:

  • Add first bullet point followed by an illustration.

1. Highlight the text you want to link to a Wikipedia article.

Step-1-detailed.png (786×1 px, 166 KB)

  • Add second bullet point followed by an illustration.

2. Select ‘Wikipedia Preview’ from the menu.

Step-2-detailed.png (794×1 px, 202 KB)

  • Add third bullet point followed by an illustration.

3. You will see a list of suggested articles. Select the one you want to link to.

Step-3-detailed.png (790×1 px, 254 KB)

  • Add fourth bullet point followed by an illustration.

4. Wikipedia Preview will automatically turn the link into a preview of the relevant Wikipedia article. You can easily edit or remove this.

Step-4-detailed.png (790×1 px, 309 KB)

We are going to make some css related changes(adding border to images, adjusting their size, margins, padding, etc.) once instructions will be available in the code format.
Acceptance Criteria

  1. Post-activation instructions appear depending on the type of editor, upon activating the plugin.

Test Scenarios

  • Download and activate the plugin to see if the instructions appear for those with Gutenberg or those using hyperlinks (test both scenarios).

Event Timeline

Aklapper renamed this task from Visuals for word press plugin to Visuals for Wordpress plugin.Oct 6 2022, 1:28 PM
PWaigi-WMF renamed this task from Visuals for Wordpress plugin to Installation tab for Wordpress plugin.Nov 15 2022, 10:15 AM
PWaigi-WMF updated the task description. (Show Details)
PWaigi-WMF renamed this task from Installation tab for Wordpress plugin to Download and Installation steps for Wordpress plugin.Nov 15 2022, 11:09 AM
PWaigi-WMF updated the task description. (Show Details)
PWaigi-WMF added subscribers: SBisson, KieranMcCann.

On the plugin menu, add an activation reminder banner:

I don't think it's possible to run any code until the plugin is activated.

Add an installation tab on the landing page with post-installation steps:

What is the "landing page" mentioned here. Is it the plugin page?

@SBisson Yes, landing page here means the plugin page.

PWaigi-WMF renamed this task from Download and Installation steps for Wordpress plugin to Plugin post-activation instruction page.Dec 6 2022, 6:27 PM
PWaigi-WMF updated the task description. (Show Details)
PWaigi-WMF renamed this task from Plugin post-activation instruction page to Plugin post-activation instruction section.Dec 6 2022, 7:49 PM

Hello @SBisson, not sure what's best way to update this task so first dropping a comment with all design details. I will update the task if all looks good.

UX details

  • Present post-activation instruction once users activate the plugin.
  • These instructions come only for once. If users leave the instructions page then they won't be able to see them again.

Steps to add instructions

  • Add following heading first followed by an illustration.

Enhance your website with free knowledge straight from Wikipedia!

Illustration 01.png (778×1 px, 97 KB)

  • Add following copy below the illustration

Wikipedia Preview lets you show a popup card with a short summary from Wikipedia when a reader clicks or hovers over a link.
Wikipedia Preview is easy to set up and use. Simply follow these steps:

  • Add first bullet point followed by an illustration.

1. Highlight the text you want to link to a Wikipedia article.

Step-1-detailed.png (786×1 px, 166 KB)

  • Add second bullet point followed by an illustration.

2. Select ‘Wikipedia Preview’ from the menu.

Step-2-detailed.png (794×1 px, 202 KB)

  • Add third bullet point followed by an illustration.

3. You will see a list of suggested articles. Select the one you want to link to.

Step-3-detailed.png (790×1 px, 254 KB)

  • Add fourth bullet point followed by an illustration.

4. Wikipedia Preview will automatically turn the link into a preview of the relevant Wikipedia article. You can easily edit or remove this.

Step-4-detailed.png (790×1 px, 309 KB)

Below mockup is just an example to show how all of this will look together.

02 Detailed instructional graphics.png (2×1 px, 508 KB)

Note: We are going to make some css related changes(adding border to images, adjusting their size, margins, padding, etc.) once instructions will be available in the code format.

@SGautam_WMF it looks good. Feel free to update the task description. Let's try to do a quick walk-through during the daily next week to make sure there is no open questions from the engineers before we make it ready for dev.

PWaigi-WMF renamed this task from Plugin post-activation instruction section to Post-activation instructions for Wikipedia Preview..Dec 12 2022, 10:20 AM
PWaigi-WMF updated the task description. (Show Details)
PWaigi-WMF added a subscriber: SGautam_WMF.
SBisson triaged this task as Medium priority.Dec 20 2022, 2:07 PM
if ( ! is_plugin_active( 'classic-editor/classic-editor.php' ) ) {
	// show Gutenberg instructions
}

@SGautam_WMF could you share which plugin is showing a welcome page like this so I can check how they did it?

sure @SBisson , here are some of them.

a) Classic Editor Copy: Add a Preview link to your site’s content (i.e. a word or a phrase you want to provide context for).

Is there a handler for Classic Editor in this task?

a) Classic Editor Copy: Add a Preview link to your site’s content (i.e. a word or a phrase you want to provide context for).

Is there a handler for Classic Editor in this task?

We discussed not showing it for the classic editor but @SGautam_WMF can confirm.

@hueitan as Stephane mentioned, we are not showing these for classic editor.

Bringing this back to dev to 1) fix the publish script and 2) see if we can make the intro page transient (as opposed to permanent in the settings menu).

in the end, please add the following note as well
Note: These instructions are specifically applicable to the Gutenberg editor.

@SGautam_WMF this is the only piece missing from this task. Let us know if this is still relevant since we are only showing the instruction page to the Gutenberg users.

in the end, please add the following note as well
Note: These instructions are specifically applicable to the Gutenberg editor.

@SGautam_WMF this is the only piece missing from this task. Let us know if this is still relevant since we are only showing the instruction page to the Gutenberg users.

We can ignore this part. Updated the task as well.