Skip to content
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.

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

Product Editor: Feedback bar is mis-aligned; transient notices overlap #39228

Closed
5 tasks done
mattsherman opened this issue Jul 13, 2023 · 0 comments · Fixed by #39233
Closed
5 tasks done

Product Editor: Feedback bar is mis-aligned; transient notices overlap #39228

mattsherman opened this issue Jul 13, 2023 · 0 comments · Fixed by #39233
Assignees
Labels
focus: new product ux revamped product management experience focus: product management Related to product creation and editing. focus: product Issues related to product or product page. priority: high The issue/PR is high priority—it affects lots of customers substantially, but not critically. type: bug The issue is a confirmed bug.

Comments

@mattsherman
Copy link
Contributor

Prerequisites

  • I have carried out troubleshooting steps and I believe I have found a bug.
  • I have searched for similar bugs in both open and closed issues and cannot find a duplicate.

Describe the bug

In #39055, regressions were introduced that broke the alignment of the feedback bar content... it used to line up with the form (same left/right margins). It now is offset...

Screenshot 2023-07-13 at 00 06 02

It also broke the positioning of the snackbar notices... they should appear above the feedback bar (they did). They no longer do -- they now overlap the feedback bar (they shouldn't).

Screenshot 2023-07-13 at 00 10 33

Original PRs where feedback bar and snackbar notice positioning were implemented, for reference:

Expected behavior

  • The feedback bar is aligned according to the design and original implementation.
  • The transient notices appear above the feedback bar.

Actual behavior

  • The feedback bar is mis-aligned.
  • The transient notices overlap the feedback bar.

Steps to reproduce

  1. Make sure the New product editor feature is active under /wp-admin/admin.php?page=wc-settings&tab=advanced&section=features
  2. Make sure woocommerce_block_product_tour_shown is set to no and woocommerce_product_editor_show_feedback_bar is set to yes under /wp-admin/tools.php?page=woocommerce-admin-test-helper so WCA Test Helper should be installed
  3. Visit /wp-admin/admin.php?page=wc-admin&path=/add-product you should see the welcome modal with title Welcome to the new product form! and description Discover its new features and improvements with a quick overview of what's included.
  4. Dismiss the welcome modal.
  5. Verify the feedback bar is mis-aligned.
  6. Save a product draft.
  7. Verify the transient notice overlaps the feedback bar.

WordPress Environment

All environments

Isolating the problem

  • I have deactivated other plugins and confirmed this bug occurs when only WooCommerce plugin is active.
  • This bug happens with a default WordPress theme active, or Storefront.
  • I can reproduce this bug consistently using the steps above.
@mattsherman mattsherman added type: bug The issue is a confirmed bug. focus: product Issues related to product or product page. focus: product management Related to product creation and editing. focus: new product ux revamped product management experience labels Jul 13, 2023
@mattsherman mattsherman changed the title Product Editor: Feedback bar style regressions Product Editor: Feedback bar is mis-aligned; transient notices overlap Jul 13, 2023
@mattsherman mattsherman added the priority: high The issue/PR is high priority—it affects lots of customers substantially, but not critically. label Jul 13, 2023
@mdperez86 mdperez86 self-assigned this Jul 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
focus: new product ux revamped product management experience focus: product management Related to product creation and editing. focus: product Issues related to product or product page. priority: high The issue/PR is high priority—it affects lots of customers substantially, but not critically. type: bug The issue is a confirmed bug.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants