Customer Home: Add Mastering Gutenberg Card #39617

Aurorum · 2020-02-22T15:55:31Z

Changes proposed in this Pull Request

This is very much a WIP; I still need to create the videos with some more detailed annotations/text, and select a thumbnail for them, along with making sure the support links are localised etc.

This adds another card with some Gutenberg resources.

Testing instructions

Copy and paste this into client/my-sites/customer-home/locations/primary/index.jsx

/**
 * External dependencies
 */
import React from 'react';

/**
 * Internal dependencies
 */
import GoMobile from 'my-sites/customer-home/cards/features/go-mobile';
import ChecklistSiteSetup from 'my-sites/customer-home/cards/primary/checklist-site-setup';
import MasteringGutenberg from 'my-sites/customer-home/cards/education/mastering-gutenberg';
import QuickLinks from 'my-sites/customer-home/cards/primary/quick-links';

const cardComponents = {
	'home-feature-go-mobile-phones': GoMobile,
	'home-primary-checklist-site-setup': ChecklistSiteSetup,
	'home-primary-quick-links': QuickLinks,
	'home-education-mastering-gutenberg': MasteringGutenberg,
};

const Primary = ( { checklistMode, cards } ) => {
	// Always ensure we have primary content.
	if ( cards && cards.length < 1 ) {
		cards = [ 'home-primary-quick-links' ];
	}
	return (
		<div className="primary">
			{ cards &&
				cards.map(
					( card, index ) =>
						cardComponents[ card ] &&
						React.createElement( cardComponents[ card ], {
							key: index,
							checklistMode: card === 'home-primary-checklist-site-setup' ? checklistMode : null,
						} )
				) }
			<MasteringGutenberg />
		</div>
	);
};

export default Primary;

A list of links should appear. The card should not appear for sites unable to use Gutenberg.

Clicking one should open a modal with a video and a link to a support document on it. Verify that both of these work (the video should autoplay).

The card should be dismissable, but hidden if a user cannot use Gutenberg (based on the isClassicEditorForced selector).

Fixes #39132

Aurorum · 2020-02-22T19:08:49Z

Just a couple quick questions (cc @danhauk, @gwwar)

Are videos like these okay? https://cdn.discordapp.com/attachments/449249666798714890/680849856897745121/adjusting-blocks-tutorial.mp4 (note: auto-downloads)
Now that a few more videos are going to be used, is it worth attempting to add them to GitHub through the method mentioned by @mmtr here, or would it be better to upload it somewhere else and embed it?
With annotations, the videos probably would cause more i18n issues. Would it be worth making the links for non-English users direct straight to the support document, rather than displaying a video that could become quite tricky to understand?
When should the card be hidden? The tutorials are fairly basic, so would it make sense to hide for users that have been registered longer? Or would a dismiss option work better? Currently, I've made it so the card is only hidden if the user has opted out of Gutenberg and decided to stick with the Classic Editor
The initial issue favoured having the card on the right column, but should this still be the case? I feel like there's a lot more space to be filled on the left column now, and it could work better there.

simison · 2020-02-22T22:16:13Z

Should "Block Editor" be lower case?

These graphics from core iteration on welcome modal might be useful: WordPress/gutenberg#19209 (comment)

Aurorum · 2020-02-22T22:18:54Z

Both the Welcome Guide in Gutenberg and the design in the initial issue don't have it in lower case, so I'm guessing not. :)

Aurorum · 2020-02-23T12:39:22Z

I'm going to mark this for review now even though it's not technically finished, but I can't really proceed much further without some of the advice with the questions above. :)

Proposed Tutorials

Adding, moving and deleting blocks: https://cdn.discordapp.com/attachments/449249666798714890/680849856897745121/adjusting-blocks-tutorial.mp4

Quickly navigating between blocks: https://cdn.discordapp.com/attachments/449249666798714890/681109889686175746/block-navigation-tutorial.mp4

Adding links: https://cdn.discordapp.com/attachments/449249666798714890/681109899580669974/linkstutorial.mp4

Using images: https://cdn.discordapp.com/attachments/449249666798714890/681115972975067179/using-images-tutorial.mp4

Let me know if these videos are okay. The topics seem to cover the main issues in the forums: https://en.forums.wordpress.com/topic-tag/block-editor/

kwight · 2020-02-24T18:36:58Z

This is looking great @Aurorum <3 I'll leave design and such to others, but a couple of quick notes.

The card seems to have a blue top border not present anywhere else.
I'm wondering if the link styles can align better with existing cards, one way or the other. Maybe these could drop the icon and add the external icon indicator to the right, more like the card below it:

Side note that our designers are at a meetup this week, so review will be delayed for a while. Thanks for your patience, we appreciate the contributions! 👍

kwight · 2020-02-24T18:38:00Z

Maybe these could drop the icon and add the external icon indicator to the right

Oh, ignore me – they open modals 🙃

client/my-sites/customer-home/mastering-gutenberg-card/index.jsx

Aurorum · 2020-02-25T17:45:41Z

The card seems to have a blue top border not present anywhere else.

That border was in the design posted in the original issue. I thought it looked prettier, but it is odd seeing it on just this card. I'm unsure if the solution to that is removing it from this card or adding it to all the other cards.

I'm wondering if the link styles can align better with existing cards, one way or the other.

I'm unsure if that's more consistent with the ones below, but these are indeed modals! :)

Side note that our designers are at a meetup this week, so review will be delayed for a while.

No worries, thanks for letting me know!

dezzie · 2020-02-25T21:47:22Z

Hi there @Aurorum, Customer Home designer here, thank you so much for all of your contributions and enthusiasm for this 😍. I don't happen to be at the same meetup as the rest of the design team, and I didn't want to leave you hanging any longer on design feedback and the questions you asked:

Overall:
Aim to keep the content and presentation as consistent as possible, so it doesn't produce a disjointed experience for users. Consistency also helps us narrow down the reasons for why things perform a certain way down the line.

Styling

Can you please remove the blue top border for consistency? Clarity is more important than pretty :). That treatment was more of a design exploration that didn't stick because it wasn't consistent with the rest of the product. We'll try to be better about communicating if/when we've chosen a visual direction and discarded others.
Are you combining the Close and Learn more buttons? They should be separate buttons. The external link icon on the blue Learn more button is perfect usage of that type of button.
We should remove the icons to the left of the 4 links in that card. Because those icons are for affordances (meaning they represent specific actions or functionality in the UI), they shouldn't be used as bullet points or other styling that starts to give them multiple meanings. This messes with users who are trying to learn something new. The noble mission of your work here!
Don't capitalize "Block Editor," as it isn't the Official Name of the Thing. Gutenberg! Gutenberg!

Behavior

You're smart to point out the different conditions under which the card would be helpful to show or hide. While I agree that it would make sense to hide the card if a person explicitly doesn't want to use Gutenberg, the community keeps adding new functionality and fixing things that didn't work well in a previous release. A Dismiss option works best for serving all of those intentions.

Layout

You're right, everywhere there are mockups of this being on the right-hand side, but as you can see, it's gotten a little cozy :). I think your wider-width design is a better solution :)

mmtr · 2020-02-26T16:35:25Z

Now that a few more videos are going to be used, is it worth attempting to add them to GitHub through the method mentioned by @mmtr here, or would it be better to upload it somewhere else and embed it?

Seems it makes sense to start uploading videos directly in Calypso. I'll see if I can open a PR tomorrow adding a video loader to webpack but anyone is welcome to beat me to it (cc @sgomes).

Aurorum · 2020-02-26T16:49:29Z

I started one in #39707. :)

Aurorum · 2020-04-07T21:42:33Z

Okay, I think this should be ready for review now. I've updated the testing instructions to provide a bit more detail after the changes! :)

gwwar · 2020-04-07T23:03:12Z

client/my-sites/customer-home/cards/education/mastering-gutenberg/index.jsx

+
+export default connect( state => {
+	return {
+		cannotUseGutenberg: isClassicEditorForced( state, getSelectedSiteId( state ) ),


Good thinking here! 👍 We'll probably move this check over to the layout API but this is a great reminder ✨

Should I remove it here now? Just checking as it seems other cards have display logic within them too. :)

wp-calypso/client/my-sites/customer-home/cards/features/stats/index.jsx

Lines 37 to 39 in 1d38c53

if ( hideStats ) {

return null;

}

wp-calypso/client/my-sites/customer-home/cards/features/grow-earn/index.jsx

Lines 32 to 34 in 1d38c53

if ( isEnabled( 'signup/wpforteams' ) && isSiteWPForTeamsProp ) {

return null;

}

We can follow up later once they are moved to the API, no need to remove them for now.

Note that isClassicEditorForced will return false when the selected editor is the classic one. So I wonder if we should show the card only when the selected editor is Gutenberg: cannotUseGutenberg: getSelectedEditor( state, siteId ) === 'classic';

We can follow up later once they are moved to the API, no need to remove them for now.

Actually, since the card won't be displayed until we update the API, let's remove the checks now. We'll make sure the card won't be returned by the API is Gutenberg is not the selected editor.

So I wonder if we should show the card only when the selected editor is Gutenberg: cannotUseGutenberg: getSelectedEditor( state, siteId ) === 'classic'

There was some discussion about this here:

While I agree that it would make sense to hide the card if a person explicitly doesn't want to use Gutenberg, the community keeps adding new functionality and fixing things that didn't work well in a previous release. A Dismiss option works best for serving all of those intentions.

Now that it's just an ordinary card and not a dismissable one, I'm not sure that still applies.

I've removed the checks anyway. :)

client/my-sites/customer-home/cards/education/mastering-gutenberg/index.jsx

gwwar · 2020-04-07T23:18:00Z

Nice work @Aurorum ! This is looking great so far ✨

mmtr · 2020-04-09T12:00:32Z

Just a heads up that I just merged #40937 which adds to the support article dialog the ability to scroll to an anchor, which effectively unblocks this PR.

Aurorum · 2020-04-09T13:46:21Z

Thank you! I've updated the PR to use the support article dialog - much less code needed too! :)

Aurorum · 2020-04-09T13:58:24Z

Actually, just want to check if "adjusting settings of blocks" and "customizing posts and pages with blocks" should still be the links. Although they apply better to the video, the previous links seem better suited to the content of the support doc.

mmtr · 2020-04-09T14:15:06Z

Actually, just want to check if "adjusting settings of blocks" and "customizing posts and pages with blocks" should still be the links. Although they apply better to the video, the previous links seem better suited to the content of the support doc.

Since the video is the primary content that will be shown in the dialog, I think the copy of the links still match what the user will see in the dialog.

mmtr

Almost there @Aurorum, great job as always! Overall this works great, but I think we need to flip the links.

Also noted a weird focused style disappearing when hovering a link, but not a blocker.

client/my-sites/customer-home/cards/education/mastering-gutenberg/index.jsx

Aurorum · 2020-04-09T16:04:59Z

The Free Photo Library illustration causes the dialog to appear. I wonder if it'd be a bit confusing that the Mastering Gutenberg doesn't do the same?

gwwar · 2020-04-09T18:01:07Z

The Free Photo Library illustration causes the dialog to appear. I wonder if it'd be a bit confusing that the Mastering Gutenberg doesn't do the same?

I think that's an artifact of us starting with an icon that had a play button originally. I think not triggering the dialog is okay here. We can tidy up the other card behavior in another PR.

gwwar

Nice work @Aurorum ! ✨ Thanks for being patient with us on this one too! Overall I think this is great to land. We can add some other enhancements like adding analytics, and thinking through what we should do when we have too many educational cards in follow up PRs.

Desktop	Mobile	Article Open

a8ci18n · 2020-05-22T13:03:57Z

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/3203786

Thank you @Aurorum for including a screenshot in the description! This is really helpful for our translators.

a8ci18n · 2020-05-26T10:29:05Z

Translation for this Pull Request has now been finished.

Aurorum added 3 commits February 22, 2020 15:48

Create Mastering Gutenberg Card

1dcac33

Some styling

a446be6

Embed card

72be1b7

This was referenced Feb 22, 2020

Customer Home: Promote Free Photo Library #39506

Merged

Customer Home: Add Block Editor resources #39132

Closed

Only show for sites using Gutenberg

a5d25fa

simison added the [Feature] My Home The main dashboard for managing a WordPress.com site. label Feb 22, 2020

simison requested a review from gwwar February 22, 2020 22:16

Aurorum marked this pull request as ready for review February 23, 2020 12:39

Aurorum requested a review from a team as a code owner February 23, 2020 12:39

Localize support documents

614cf2e

kwight reviewed Feb 24, 2020

View reviewed changes

client/my-sites/customer-home/mastering-gutenberg-card/index.jsx Outdated Show resolved Hide resolved

Use switch cases

ca9294b

mmtr requested a review from a team February 26, 2020 10:11

mmtr assigned Aurorum Feb 26, 2020

mmtr added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. OSS Citizen labels Feb 26, 2020

Merge branch 'master' into update/home-mastering-gutenberg

1a9da78

Aurorum mentioned this pull request Feb 26, 2020

Add mp4 Files to the Webpack Loader #39707

Closed

Fix accidental issues

81855a7

Aurorum added 2 commits April 7, 2020 22:32

Update card

3f56cba

Hide for sites unable to use Gutenberg

4b51891

Aurorum changed the title ~~Customer Home: Add Mastering Gutenberg Card [WIP]~~ Customer Home: Add Mastering Gutenberg Card Apr 7, 2020

gwwar reviewed Apr 7, 2020

View reviewed changes

client/my-sites/customer-home/cards/education/mastering-gutenberg/index.jsx Outdated Show resolved Hide resolved

gwwar reviewed Apr 7, 2020

View reviewed changes

client/my-sites/customer-home/cards/education/mastering-gutenberg/index.jsx Outdated Show resolved Hide resolved

Switch from dismissible card

b724391

mmtr mentioned this pull request Apr 9, 2020

Support Article Dialog: add support to scroll to anchor and refactor to functional component #40937

Merged

Aurorum added 4 commits April 9, 2020 14:04

Create a conflict

d424167

Merge branch 'master' into update/home-mastering-gutenberg

ca67420

Use support article dialog

9309344

Remove old styling

f8df783

mmtr reviewed Apr 9, 2020

View reviewed changes

Aurorum added 2 commits April 9, 2020 16:56

Address review

0fde8be

Switch order

eb910f3

gwwar approved these changes Apr 9, 2020

View reviewed changes

gwwar merged commit 8cf6783 into Automattic:master Apr 9, 2020

gwwar removed [Status] In Progress [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Apr 9, 2020

Aurorum mentioned this pull request Apr 21, 2020

My Home: Tweak styles for experimental layout #41229

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Customer Home: Add Mastering Gutenberg Card #39617

Customer Home: Add Mastering Gutenberg Card #39617

Aurorum commented Feb 22, 2020 •

edited

Loading

Aurorum commented Feb 22, 2020

simison commented Feb 22, 2020

Aurorum commented Feb 22, 2020 •

edited

Loading

Aurorum commented Feb 23, 2020

kwight commented Feb 24, 2020

kwight commented Feb 24, 2020

Aurorum commented Feb 25, 2020

dezzie commented Feb 25, 2020 •

edited

Loading

mmtr commented Feb 26, 2020

Aurorum commented Feb 26, 2020

Aurorum commented Apr 7, 2020

gwwar Apr 7, 2020

Aurorum Apr 8, 2020

mmtr Apr 9, 2020

mmtr Apr 9, 2020

Aurorum Apr 9, 2020

gwwar commented Apr 7, 2020

mmtr commented Apr 9, 2020

Aurorum commented Apr 9, 2020

Aurorum commented Apr 9, 2020

mmtr commented Apr 9, 2020

mmtr left a comment

Aurorum commented Apr 9, 2020

gwwar commented Apr 9, 2020

gwwar left a comment

a8ci18n commented May 22, 2020

a8ci18n commented May 26, 2020

	if ( isEnabled( 'signup/wpforteams' ) && isSiteWPForTeamsProp ) {
	return null;
	}

Customer Home: Add Mastering Gutenberg Card #39617

Customer Home: Add Mastering Gutenberg Card #39617

Conversation

Aurorum commented Feb 22, 2020 • edited Loading

Changes proposed in this Pull Request

Testing instructions

Aurorum commented Feb 22, 2020

simison commented Feb 22, 2020

Aurorum commented Feb 22, 2020 • edited Loading

Aurorum commented Feb 23, 2020

kwight commented Feb 24, 2020

kwight commented Feb 24, 2020

Aurorum commented Feb 25, 2020

dezzie commented Feb 25, 2020 • edited Loading

mmtr commented Feb 26, 2020

Aurorum commented Feb 26, 2020

Aurorum commented Apr 7, 2020

gwwar Apr 7, 2020

Choose a reason for hiding this comment

Aurorum Apr 8, 2020

Choose a reason for hiding this comment

mmtr Apr 9, 2020

Choose a reason for hiding this comment

mmtr Apr 9, 2020

Choose a reason for hiding this comment

Aurorum Apr 9, 2020

Choose a reason for hiding this comment

gwwar commented Apr 7, 2020

mmtr commented Apr 9, 2020

Aurorum commented Apr 9, 2020

Aurorum commented Apr 9, 2020

mmtr commented Apr 9, 2020

mmtr left a comment

Choose a reason for hiding this comment

Aurorum commented Apr 9, 2020

gwwar commented Apr 9, 2020

gwwar left a comment

Choose a reason for hiding this comment

a8ci18n commented May 22, 2020

a8ci18n commented May 26, 2020

Aurorum commented Feb 22, 2020 •

edited

Loading

Aurorum commented Feb 22, 2020 •

edited

Loading

dezzie commented Feb 25, 2020 •

edited

Loading