Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Fix notice banner links for Legacy notices #9996

Merged
merged 1 commit into from
Jul 4, 2023
Merged

Conversation

tarunvijwani
Copy link

@tarunvijwani tarunvijwani commented Jun 26, 2023

A few third-party plugins were still using the wc-forward class instead of wp-element-button that was causing the links in the notice banner to appear on the left and link buttons. With this PR, we're making the banner links compatible for Legacy notices by just focusing on wc-forward class.

Fixes #9609 & #9134

Also added the underline to the links present in notice banner as per the figma design: hqyJB5F38BOXTrOyxehUZH-fi-2141%3A6588

Screenshots

Before After
image image

Testing

Automated Tests

  • Changes in this PR are covered by Automated Tests.
    • Unit tests
    • E2E tests

User Facing Testing

  1. Install Back in Stock Notifications plugin.
  2. Visit an out-of-stock product.
  3. Click the “Notify me” button.
  4. Confirm the notice banner link is displayed correctly.

image

  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Fix notice banner links for Legacy notices

@tarunvijwani tarunvijwani self-assigned this Jun 26, 2023
@woocommercebot woocommercebot requested review from a team and wavvves and removed request for a team June 26, 2023 19:24
@tarunvijwani tarunvijwani added status: needs review type: bug The issue/PR concerns a confirmed bug. focus: global styles Issues that involve styles/css/layout structure. labels Jun 26, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Jun 26, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-9996.zip

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 461
  • Total errors: 2229

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Jun 26, 2023

Size Change: +21 B (0%)

Total Size: 1.17 MB

Filename Size Change
build/wc-blocks-style-rtl.css 28 kB +11 B (0%)
build/wc-blocks-style.css 28 kB +10 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.64 kB
build/active-filters-wrapper-frontend.js 7.58 kB
build/active-filters.js 7.49 kB
build/all-products-frontend.js 12.2 kB
build/all-products.js 40.3 kB
build/all-reviews.js 7.87 kB
build/attribute-filter-frontend.js 23 kB
build/attribute-filter-wrapper-frontend.js 7.73 kB
build/attribute-filter.js 13.3 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs.js 2.13 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js 2.92 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 3.78 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.16 kB
build/cart-blocks/cart-express-payment-frontend.js 720 B
build/cart-blocks/cart-items-frontend.js 301 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.58 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-order-summary-frontend.js 1.28 kB
build/cart-blocks/cart-totals-frontend.js 307 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 656 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.63 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 272 B
build/cart-blocks/order-summary-heading-frontend.js 334 B
build/cart-blocks/order-summary-shipping-frontend.js 17.1 kB
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 436 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.44 kB
build/cart-frontend.js 29.9 kB
build/cart.js 45.1 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.88 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.69 kB
build/checkout-blocks/billing-address-frontend.js 1.18 kB
build/checkout-blocks/contact-information-frontend.js 2.04 kB
build/checkout-blocks/express-payment-frontend.js 1.14 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.76 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-frontend.js 1.28 kB
build/checkout-blocks/order-summary-shipping-frontend.js 17 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/payment-frontend.js 9.27 kB
build/checkout-blocks/pickup-options-frontend.js 4.84 kB
build/checkout-blocks/shipping-address-frontend.js 1.17 kB
build/checkout-blocks/shipping-method-frontend.js 2.63 kB
build/checkout-blocks/shipping-methods-frontend.js 6.41 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 361 B
build/checkout-frontend.js 31.8 kB
build/checkout.js 47.6 kB
build/customer-account.js 3.19 kB
build/featured-category.js 15.1 kB
build/featured-product.js 15.3 kB
build/filter-wrapper-frontend.js 14.3 kB
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 8.04 kB
build/legacy-template.js 6.82 kB
build/mini-cart-component-frontend.js 30.7 kB
build/mini-cart-contents-block/cart-button-frontend.js 1.73 kB
build/mini-cart-contents-block/checkout-button-frontend.js 1.81 kB
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 267 B
build/mini-cart-contents-block/footer-frontend.js 3.83 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 587 B
build/mini-cart-contents-block/shopping-button-frontend.js 531 B
build/mini-cart-contents-block/title-frontend.js 1.9 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.59 kB
build/mini-cart-contents-block/title-label-frontend.js 1.53 kB
build/mini-cart-contents.js 18.2 kB
build/mini-cart-frontend.js 2.84 kB
build/mini-cart.js 5.93 kB
build/price-filter-frontend.js 14.7 kB
build/price-filter-wrapper-frontend.js 6.79 kB
build/price-filter.js 8.56 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js 272 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 6.52 kB
build/product-add-to-cart.js 8.84 kB
build/product-best-sellers.js 8.36 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 954 B
build/product-button-frontend.js 2.67 kB
build/product-button.js 3.97 kB
build/product-categories.js 2.72 kB
build/product-category.js 9.36 kB
build/product-collection.js 12.3 kB
build/product-image-frontend.js 2.63 kB
build/product-image.js 4.14 kB
build/product-new.js 8.65 kB
build/product-on-sale.js 8.65 kB
build/product-price-frontend.js 231 B
build/product-price.js 1.68 kB
build/product-query.js 11.9 kB
build/product-rating-frontend.js 2.35 kB
build/product-rating.js 1.04 kB
build/product-results-count.js 1.65 kB
build/product-sale-badge-frontend.js 1.8 kB
build/product-sale-badge.js 665 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 1.85 kB
build/product-sku.js 535 B
build/product-stock-indicator-frontend.js 2.04 kB
build/product-stock-indicator.js 730 B
build/product-summary-frontend.js 2.26 kB
build/product-summary.js 1.01 kB
build/product-tag.js 9.01 kB
build/product-template.js 3.34 kB
build/product-title-frontend.js 2.22 kB
build/product-title.js 3.66 kB
build/product-top-rated.js 8.91 kB
build/products-by-attribute.js 9.76 kB
build/rating-filter-frontend.js 21.5 kB
build/rating-filter-wrapper-frontend.js 6.25 kB
build/rating-filter.js 6.94 kB
build/reviews-by-category.js 12.1 kB
build/reviews-by-product.js 13.3 kB
build/reviews-frontend.js 7.17 kB
build/single-product.js 11.1 kB
build/stock-filter-frontend.js 21.7 kB
build/stock-filter-wrapper-frontend.js 6.5 kB
build/stock-filter.js 7.67 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.83 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.2 kB
build/vendors--attribute-filter-wrapper-frontend.js 5.11 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.57 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.4 kB
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js 8.25 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12.4 kB
build/vendors--price-filter-wrapper-frontend.js 2.2 kB
build/vendors--product-add-to-cart-frontend.js 7.25 kB
build/vendors--rating-filter-wrapper-frontend.js 5.11 kB
build/vendors--stock-filter-wrapper-frontend.js 5.11 kB
build/wc-blocks-data.js 22.4 kB
build/wc-blocks-editor-style-rtl.css 6.21 kB
build/wc-blocks-editor-style.css 6.21 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 934 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.1 kB
build/wc-blocks-shared-hocs.js 1.75 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks-vendors.js 65.1 kB
build/wc-blocks.js 3.71 kB
build/wc-interactivity.js 10.4 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.6 kB
build/wc-shipping-method-pickup-location.js 30.4 kB

compressed-size-action

@github-actions
Copy link
Contributor

Make a PR to @wordpress/e2e-test-utils-playwright to add ...

Make a PR to @wordpress/e2e-test-utils-playwright to add this method.

Inserts a block after a given client ID.


// todo: Make a PR to @wordpress/e2e-test-utils-playwright to add this method.
/**
* Inserts a block after a given client ID.
*
*/
async insertBlock(
blockRepresentation: BlockRepresentation,
index?: string,
rootClientId?: string
) {
await this.page.evaluate(
( {
blockRepresentation: _blockRepresentation,
index: _index,
rootClientId: _rootClientId,

🚀 This comment was generated by the automations bot based on a todo comment in bb9c58d in #9996. cc @tarunvijwani

@github-actions
Copy link
Contributor

This is a workaround to wait for the save button to be en...

This is a workaround to wait for the save button to be enabled. It works only without Gutenberg enabled. We have to refactor this.


// @todo This is a workaround to wait for the save button to be enabled. It works only without Gutenberg enabled. We have to refactor this.
await page
.locator(
"button.edit-site-save-button__button[aria-label='Save'][aria-disabled='true']"
)
.waitFor( {
state: 'visible',
} );
await page.goto( frontendPage, {
waitUntil: 'load',
} );

🚀 This comment was generated by the automations bot based on a todo comment in bb9c58d in #9996. cc @tarunvijwani

@tarunvijwani tarunvijwani force-pushed the fix/9134-notice-banner-links branch from bb9c58d to 429f47a Compare June 28, 2023 11:21
@opr opr merged commit c389cb7 into trunk Jul 4, 2023
@opr opr deleted the fix/9134-notice-banner-links branch July 4, 2023 11:16
@nielslange nielslange mentioned this pull request Jul 6, 2023
5 tasks
@ralucaStan
Copy link
Contributor

@tarunvijwani Noting that using the & below does not close both tickets.

Fixes #9609 & #9134

Best thing is to add individual lines. I think commas might work on the same line

Fixes #9609
Fixes #9134

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
focus: global styles Issues that involve styles/css/layout structure. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

The styling of CTA buttons in notices is not displaying correctly on legacy themes
4 participants