Editor: add a classic block guide for users in deprecation group

[glendaviesnz]

Changes proposed in this Pull Request

• Add a custom editor guide for users in editor deprecation group to explain how to add a classic block

Testing instructions

• Set a user attribute for your user using wpsh on a sandbox $ update_user_attribute( USER_ID, 'editor_deprecation_group', true )
• Open the block editor a site and in Chrome dev tools select post-new.php as the javascript context and in console run wp.data.dispatch( 'core/edit-post' ).toggleFeature( 'welcomeGuide' ); - WPcom guide should load - don't dismiss it
• Now check out this PR and build the wpcom block editor files with yarn build:prod in the apps/wpcom-block-editor/package.json folder.
• Sync the files created by the build in the '/dist' folder with your sandbox widgets/wpcom-block-editor folder
• Also apply D45786-code to sandbox
• Make sure site used above is sandboxed Load editor editor again and make sure the Classic block guide loads instead of the standard WPcom guide
• Click the Get Started button to dismiss the dialog then reload page and make sure it does not display again (LocalStorage key for classic_block_guide_{siteID}_is_dismissed can be cleared to retest
• Also retest with a user that does not have 'editor_deprecation_group' and make sure the guide does not display

Screenshots

Fixes #43802

[matticbot]

Test live: https://calypso.live/?branch=add/classic-block-guide

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[glendaviesnz]

just added to test if we can use useDispatch to toggle the standard welcome guide in this context - seems to work

[scruffian]

I started implementing the design. There are some differences between the mockup and the way the Gutenberg component works:

The main differences are:

• The Gutenberg component has a header with an X to close and dots for the pages
• The "close to finish" button is at the bottom right of the modal
• The modal is forced to be 80% of the viewport height

We have a couple of choices. Either we override a lot of the default setting with custom CSS, which is liable to be fragile, if the underlying CSS for the modal changes. Alternatively we update the design to match the Gutenberg modal styles.

cc @olesyabrk @lessbloat

[creativecoder]

Alternatively we update the design to match the Gutenberg modal styles.

We should update the design--this will be a lot easier to maintain if it closely follows existing Gutenberg conventions.

[scruffian]

We also will need this patch D45786-code

[mtias]

It doesn't make sense to me to create an entirely new design for a welcome-dialog given core already ships with one. What's the rationale there?

[mtias]

Core's welcome guide:

[creativecoder]

It doesn't make sense to me to create an entirely new design for a welcome-dialog given core already ships with one.

@mtias Completely agree. When I said "we should update the design", I meant change the design @davemart-in had mocked up for #43802 and instead use something that closely matches what's already in Gutenberg.

[creativecoder]

Update on the requirements for this: #43802 (comment)

[scruffian]

@olesyabrk @davemart-in I updated this with the latest designs:

I added the block inserter image to the copy on the second screen. The gif above shows the core welcome images, which use animated gifs which is pretty nice. If we don't want to do that please can you attach images to this PR or the issue, so I can add them? Thanks!

[glendaviesnz]

@scruffian this is looking good. I have removed the hard coded query param and switched it to use the deprecation group flag, so you can retest it using a user in the deprecation group. I have also removed the unused image from the associated diff

[davemart-in]

Looking good @scruffian. If we could change the title on the first screen to "Meet the Classic block" so that it fits on one line, also there is some updated designs and copy for the second screen here: #43802 (comment) After that I think we'll be all set.

[scruffian]

Thanks @davemart-in @olesyabrk, can you provide the image assets too please?

[olesyabrk]

Here are the image files:

Slide one
Slide two

There is an the existing core gif for the second image, but I will need to figure out how to make a gif of the first one if we decide to go that direction.

[glendaviesnz]

@olesyabrk - because of the way the core guide is set up the svg images need to include the inner padding, eg. the classic block image currently fills the full image container:

The inserter one works fine though:

Are you able to provide the classic block one again with some inner padding please?

[glendaviesnz]

If we could change the title on the first screen to "Meet the Classic block"

Done.

[aaronrobertshaw]

This works as advertised for me.

Once the padding is added to the image it should be ready to go.

[scruffian]

Let's merge this and update the image in a different PR

[olesyabrk]

Here you go, with padding, lmk if this works @glendaviesnz !

[glendaviesnz]

Thanks @olesyabrk - the padding on the new image is great, but the background color was not quite right compared to the second panel - I assume the background color is supposed to be the same on both so I changed the background to #00a0d2 so it matches the second one, as this the color set by the core welcome guide - get back to me if there was a reason the image used a different blue.

[glendaviesnz]

@olesyabrk - fyi PR with new image at #44122

[olesyabrk]

@glendaviesnz I'm referencing the new blue for dotcom found on here #1381D8. Looping in @rickybanister and @joanrho to double check the correct color.

[glendaviesnz]

@olesyabrk ok, I see that the default wpcom guide overrides the default calypso guide blue, so I guess we need to do the same, will update it with the blue you had

[joanrho]

@olesyabrk Sorry if it wasn't clear when I sent over the AE file in Slack, but the background color of the single GIF we used in our more updated tour is our brand Blue 40/#3582c4 (see Color Studio).

For context, those updates were made as part of our pre-launch work, so it existed in another Figma file (Create Design > Pre-launch). Just updated that Welcome Tour Figma with page "Contextual Guidance i4" since it's the latest direction of the Welcome Tour (hasn't been implemented yet).

[a8ci18n]

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

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

[a8ci18n]

Translation for this Pull Request has now been finished.