Product Editor Onboarding: Show spotlight for first time visitors #38590

nathanss · 2023-06-02T18:20:18Z

Submission Review Guidelines:

I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
I have checked to ensure there aren't other open Pull Requests for the same update/change.
I have reviewed my code for security best practices.
Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

Show a spotlight and a guided tour for first time visitors, using TourKit and Guide components.

Bug with Guide component: the 'X' button from the modal keeps focusing when navigating between pages.
Limitation with Guide component: it's not possible to know if the Guide was closed or finished, because the same callback is called for both, with no parameters.

Closes #38516 .

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

Enable the block product editor in WooCommerce > Settings > Advanced > Features.
Go to Product > Add New.
You should see the tour kit step in the bottom left of the editor.
The wcadmin_block_product_editor_spotlight_view tracks event should be fired.
Click the X button.
The wcadmin_block_product_editor_spotlight_dismissed tracks event should be fired.
Refresh the page.
You should not see the tour kit step anymore.
Delete the option woocommerce_block_product_tour_shown using WCA test helper.
Refresh the page.
The tour kit step should show up again.
Click 'View highlights'.
You should see the Guide component and be able to navigate between the pages.
Navigate until the last page and press 'Close'
The wcadmin_block_product_editor_spotlight_completed tracks event should be fired.

…ng on the options in the future

Add tracks events

github-actions · 2023-06-02T18:55:01Z

Test Results Summary

Commit SHA: ff032b3

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 58s
E2E Tests	195	0	0	10	0	205	18m 38s

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

louwie17

Overall nice work @nathanss, this was testing well, I just noticed one design discrepancy for the initial tour popup, with the missing purple box and the beta tag.
For the rest I left several comments within the code with little suggestions.

louwie17 · 2023-06-05T14:05:43Z

plugins/woocommerce-admin/client/products/tour/block-editor/block-editor-tour.tsx

+									),
+								},
+								heading: __(
+									'Meet a streamlined product form',


This is missing the beta pill

louwie17 · 2023-06-05T14:06:13Z

plugins/woocommerce-admin/client/products/tour/block-editor/block-editor-tour.tsx

+	if ( isTourOpen ) {
+		return (
+			<TourKit
+				config={ {


In the design the tourkit also includes a purple box at the top, is it possible to add this?

For the background color in the TourKit, we would have to change the component to allow customizing the CardHeader, which is the part where the X button is, and where we would change the background color and increase its size.

Do you think I should implement this?

Do you think I should implement this?

Yeah, but you can do this as part of a follow up.

louwie17 · 2023-06-05T14:07:21Z

plugins/woocommerce-admin/client/products/tour/block-editor/block-editor-tour.tsx

+		);
+	} else if ( isGuideOpen ) {
+		return (
+			<Guide


Could we move this into it's own component - block-editor-guide? and use it within the block editor tour wrapper?

louwie17 · 2023-06-05T14:12:21Z

plugins/woocommerce-admin/client/products/tour/block-editor/block-editor-tour.tsx

+			<Guide
+				className="woocommerce-block-editor-guide"
+				finishButtonText={ __( 'Close', 'woocommerce' ) }
+				onFinish={ () => {


Hmmm it sucks there is only a single callback and their is no way of deciphering what step we are on.

I agree. Can we ask for this feature for the component, perhaps?

louwie17 · 2023-06-05T14:14:47Z

plugins/woocommerce-admin/client/products/tour/block-editor/style.scss

+		background-color: #cfb9f6;
+	}
+	&__background4 {
+		height: 220px;


Could we turn the height into a variable here, incase we change it, and forget one of them.

louwie17 · 2023-06-05T14:17:49Z

plugins/woocommerce-admin/client/products/tour/block-editor/style.scss

+	}
+
+	&__text {
+		height: 80px;


Is this manual height necessary?

louwie17 · 2023-06-05T14:18:34Z

plugins/woocommerce-admin/client/products/tour/block-editor/style.scss

+		background-color: #bea0f2;
+	}
+	&.components-modal__frame {
+		width: 320px;


Maybe we should use max-width here instead?

louwie17 · 2023-06-05T14:23:10Z

plugins/woocommerce-admin/client/products/tour/block-editor/use-block-editor-tour-options.ts

+
+export const useBlockEditorTourOptions = () => {
+	const { updateOptions } = useDispatch( OPTIONS_STORE_NAME );
+	const [ isGuideOpen, setIsGuideOpen ] = useState( false );


This local state would prevent us from re-triggering the guide from the options menu, as is needed in: #38522

Could we move this state into a useContext?

Hey...

I payed attention to that requirement.

That's why I split into BlockEditorTour and BlockEditorTourWrapper. I figured that the BlockEditorTour component could be used directly from the About menu without using this hook, as this hook is more related to the option persisted in the back-end.

I made another refactor now and extracted the BlockEditorGuide component. I think we can just call the component directly and it will show up. Let me know if you find a problem with this approach.

I made another refactor now and extracted the BlockEditorGuide component. I think we can just call the component directly and it will show up. Let me know if you find a problem with this approach.

That seems good to me :) That seems lower effort and easier then adding a whole context.

louwie17

Thanks for the updates @nathanss, this looks good, and tested well!
Nice work 🎉

nathanss added 7 commits June 1, 2023 10:50

Add placeholder TourKit in product-page

f96a0df

Create component and configure it to show to the right of wp menu

736fa02

Finish TourKit and start creating features guide

666e040

Implement CSS changes and background color

5cb582e

Create Wrapper to facilitate showing the tour and guide without relyi…

e846b7e

…ng on the options in the future

Refactor

dd2a62c

Add tracks events

Add changelog

2c92b6a

github-actions bot added the focus: react admin [team:Ghidorah] label Jun 2, 2023

nathanss self-assigned this Jun 2, 2023

github-actions bot added the plugin: woocommerce Issues related to the WooCommerce Core plugin. label Jun 2, 2023

nathanss added 2 commits June 2, 2023 15:57

Fix lint problems

82d1bda

Fix CSS

b0cfe61

nathanss force-pushed the add/block-tour branch from ecc8348 to b0cfe61 Compare June 2, 2023 19:10

louwie17 requested changes Jun 5, 2023

View reviewed changes

nathanss added 3 commits June 5, 2023 14:12

Refactor styles

b4ea114

General refactor and extract BlockEditorGuide component

72f94e9

Add changelog

7b7c846

github-actions bot added the package: @woocommerce/components issues related to @woocommerce/components label Jun 5, 2023

This was referenced Jun 5, 2023

Allow disabling focus every time a page is switched in Guide component WordPress/gutenberg#51243

Open

Differentiate between Guide component closing via Finish button or Close button WordPress/gutenberg#51244

Open

Fix lint issues

ff032b3

louwie17 approved these changes Jun 6, 2023

View reviewed changes

nathanss merged commit 52fe3c4 into trunk Jun 6, 2023
17 checks passed

nathanss deleted the add/block-tour branch June 6, 2023 15:06

github-actions bot added this to the 7.9.0 milestone Jun 6, 2023

mattsherman mentioned this pull request Jun 14, 2023

Update product editor tour design #38726

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Product Editor Onboarding: Show spotlight for first time visitors #38590

Product Editor Onboarding: Show spotlight for first time visitors #38590

nathanss commented Jun 2, 2023

github-actions bot commented Jun 2, 2023 •

edited

louwie17 left a comment

louwie17 Jun 5, 2023

louwie17 Jun 5, 2023

nathanss Jun 5, 2023

louwie17 Jun 6, 2023

louwie17 Jun 5, 2023

louwie17 Jun 5, 2023

nathanss Jun 5, 2023

louwie17 Jun 5, 2023

louwie17 Jun 5, 2023

louwie17 Jun 5, 2023

louwie17 Jun 5, 2023

nathanss Jun 5, 2023

louwie17 Jun 6, 2023

louwie17 left a comment

Product Editor Onboarding: Show spotlight for first time visitors #38590

Product Editor Onboarding: Show spotlight for first time visitors #38590

Conversation

nathanss commented Jun 2, 2023

Submission Review Guidelines:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

github-actions bot commented Jun 2, 2023 • edited

Test Results Summary

louwie17 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

louwie17 left a comment

Choose a reason for hiding this comment

github-actions bot commented Jun 2, 2023 •

edited