Skip to content

Update product editor tour design #38726

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
mattsherman merged 12 commits into from
Jun 15, 2023
Merged

Update product editor tour design #38726

mattsherman merged 12 commits into from
Jun 15, 2023

Conversation

@mattsherman
Copy link
Contributor

@mattsherman mattsherman commented Jun 14, 2023 •
edited
Loading

Submission Review Guidelines:

Changes proposed in this Pull Request:

This is a follow-up to #38590 and #38640

The text, images, and styles for the product editor tour/guide have been updated to match the latest design (lj4AUMJnpMtUe7XqyvOONq-fi-1335_125302).

Closes #38705.

Before

Screenshot 2023-06-14 at 17 36 43 Screenshot 2023-06-14 at 17 36 49

After

Screenshot 2023-06-14 at 17 34 44 Screenshot 2023-06-14 at 17 34 51

How to test the changes in this Pull Request:

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

  1. Enable the block product editor in WooCommerce > Settings > Advanced > Features.
  2. Go to Product > Add New.
  3. You should see the tour kit step in the bottom left of the editor. (If you have already dismissed it, you can delete the woocommerce_block_product_tour_shown option through WCA Test Helper)
  4. Check the styles against the design in lj4AUMJnpMtUe7XqyvOONq-fi-1335_125302
    • Text (titles, descriptions) -- these vary depending on whether the user is new (no published product) or not
    • Images

@github-actions github-actions bot added focus: react admin [team:Ghidorah] plugin: woocommerce Issues related to the WooCommerce Core plugin. labels Jun 14, 2023
@mattsherman mattsherman changed the title Update/product editor tour design Update product editor tour design Jun 14, 2023
@mattsherman mattsherman self-assigned this Jun 14, 2023
@mattsherman mattsherman requested a review from a team June 14, 2023 21:45
@github-actions
Copy link
Contributor

github-actions bot commented Jun 14, 2023 •
edited
Loading

Hi @nathanss, @woocommerce/mothra

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

@mattsherman mattsherman marked this pull request as ready for review June 14, 2023 21:48
@mattsherman
Copy link
Contributor Author

mattsherman commented Jun 14, 2023

@jarekmorawski I had to use exported PNG for guide images 2, 3, 4, as the exported SVGs were much larger:

  • guide-2
    • svg: 239 kb
    • png: 20 kb
  • guide-3
    • svg: 561 kb
    • png: 23 kb
  • guide-4
    • svg: 639 kb
    • png: 20 kb

If the Figma design is updated with smaller SVGs, I can re-export and use SVGs for those.

@github-actions
Copy link
Contributor

github-actions bot commented Jun 14, 2023 •
edited
Loading

Test Results Summary

Commit SHA: 5fea0f5

Test 🧪Passed ✅Failed 🚨Broken 🚧Skipped ⏭️Unknown ❔Total 📊Duration ⏱️
API Tests25900202611m 12s
E2E Tests1950010020515m 29s
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.

@jarekmorawski
Copy link

jarekmorawski commented Jun 15, 2023

I managed to reduce their size by half if that helps: Intro Illustrations.zip

@mattsherman
Copy link
Contributor Author

mattsherman commented Jun 15, 2023

I managed to reduce their size by half if that helps: Intro Illustrations.zip

The images currently in the PR are 10% of the size of the images in that zip, so I think we should keep the images in the PR.

@nathanss nathanss self-requested a review June 15, 2023 12:12
nathanss
nathanss approved these changes Jun 15, 2023
View reviewed changes
Copy link
Contributor

@nathanss nathanss left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good! Thanks for stepping in on this!

@mattsherman mattsherman merged commit 9d7b68b into trunk Jun 15, 2023
@mattsherman mattsherman deleted the update/product-editor-tour-design branch June 15, 2023 12:23
@github-actions github-actions bot added this to the 7.9.0 milestone Jun 15, 2023
@mattsherman
Copy link
Contributor Author

mattsherman commented Jun 15, 2023

Thanks for the quick review!

@nathanss nathanss mentioned this pull request Jun 15, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@nathanss nathanss nathanss approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@mattsherman mattsherman

Labels

plugin: woocommerce Issues related to the WooCommerce Core plugin. Product/Inventory Management Issues related to product or product page.

Projects

None yet

Milestone

7.9.0

Development

Successfully merging this pull request may close these issues.

Product Editor Onboarding: Implement design updates in block product editor tour

4 participants

@mattsherman @jarekmorawski @nathanss