Update text #9423

roykho · 2023-05-10T14:21:36Z

Closes #9101

This PR updates the image and text used. Secondary update the Shop now button coloring to match original design.

Note this will not need to be included in the testing instructions.

Screenshots

Testing

User Facing Testing

Create a page and use the block inserter->patterns->WooCommerce and to insert the Featured Category Focus.
Notice the preview shows per design screenshot shown above.
Insert the pattern and then update/save and check the frontend and ensure it is displaying as the screenshot above.

Do not include in the Testing Notes

WooCommerce Visibility

WooCommerce Core
Feature plugin
Experimental

Performance Impact

Changelog

Update text for Featured Category focus pattern

github-actions · 2023-05-10T14:23:55Z

The release ZIP for this PR is accessible via:

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

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle	Added
`reviews-frontend.js`	`wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-compose`, `wp-element`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`	⚠️
`active-filters-frontend.js`	`wc-blocks-data-store`, `wc-price-format`, `wc-settings`, `wp-data`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`, `wp-url`	⚠️
`all-products-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-blocks-shared-context`, `wc-blocks-shared-hocs`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-autop`, `wp-block-editor`, `wp-blocks`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`attribute-filter-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-settings`, `wp-a11y`, `wp-block-editor`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`	⚠️
`cart-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-blocks-shared-context`, `wc-blocks-shared-hocs`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-autop`, `wp-block-editor`, `wp-blocks`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-plugins`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`checkout-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-blocks-shared-hocs`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-autop`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-plugins`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`filter-wrapper-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-block-editor`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`	⚠️
`mini-cart-frontend.js`	`wp-polyfill`	⚠️
`price-filter-frontend.js`	`react`, `wc-blocks-data-store`, `wc-price-format`, `wc-settings`, `wp-data`, `wp-element`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-url`	⚠️
`rating-filter-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-settings`, `wp-a11y`, `wp-block-editor`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`	⚠️
`stock-filter-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-settings`, `wp-a11y`, `wp-block-editor`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`	⚠️
`mini-cart-component-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-autop`, `wp-block-editor`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️

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

TypeScript Errors Report

Files with errors: 452
Total errors: 2243

🎉 🎉 This PR does not introduce new TS errors.

_{comments-aggregator}

github-actions · 2023-05-10T14:29:11Z

Size Change: 0 B

Total Size: 1.11 MB

ℹ️ View Unchanged

Filename	Size
`build/active-filters-frontend.js`	8.56 kB
`build/active-filters-wrapper--attribute-filter-wrapper--price-filter-wrapper--rating-filter-wrapper--stoc--78b62dd5-frontend.js`	2.31 kB
`build/active-filters-wrapper-frontend.js`	4.68 kB
`build/active-filters.js`	7.48 kB
`build/all-products-frontend.js`	12.1 kB
`build/all-products.js`	39 kB
`build/all-reviews.js`	7.77 kB
`build/attribute-filter-frontend.js`	23.2 kB
`build/attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js`	5.53 kB
`build/attribute-filter-wrapper-frontend.js`	4.64 kB
`build/attribute-filter.js`	13.3 kB
`build/blocks-checkout.js`	35.1 kB
`build/breadcrumbs.js`	2.05 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-frontend.js`	5.53 kB
`build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js`	5.16 kB
`build/cart-blocks/cart-express-payment-frontend.js`	717 B
`build/cart-blocks/cart-items-frontend.js`	302 B
`build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js`	5.39 kB
`build/cart-blocks/cart-line-items-frontend.js`	1.07 kB
`build/cart-blocks/cart-order-summary-frontend.js`	1.27 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`	654 B
`build/cart-blocks/order-summary-coupon-form-frontend.js`	1.62 kB
`build/cart-blocks/order-summary-discount-frontend.js`	2.12 kB
`build/cart-blocks/order-summary-fee-frontend.js`	273 B
`build/cart-blocks/order-summary-heading-frontend.js`	332 B
`build/cart-blocks/order-summary-shipping-frontend.js`	17 kB
`build/cart-blocks/order-summary-subtotal-frontend.js`	273 B
`build/cart-blocks/order-summary-taxes-frontend.js`	434 B
`build/cart-blocks/proceed-to-checkout-frontend.js`	1.38 kB
`build/cart-frontend.js`	29.6 kB
`build/cart.js`	44.7 kB
`build/catalog-sorting.js`	1.7 kB
`build/checkout-blocks/actions-frontend.js`	1.85 kB
`build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js`	4.73 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.13 kB
`build/checkout-blocks/fields-frontend.js`	331 B
`build/checkout-blocks/order-note-frontend.js`	1.13 kB
`build/checkout-blocks/order-summary-cart-items-frontend.js`	3.69 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.1 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`	8.28 kB
`build/checkout-blocks/pickup-options-frontend.js`	4.81 kB
`build/checkout-blocks/shipping-address-frontend.js`	1.16 kB
`build/checkout-blocks/shipping-method-frontend.js`	2.6 kB
`build/checkout-blocks/shipping-methods-frontend.js`	6.35 kB
`build/checkout-blocks/terms-frontend.js`	1.56 kB
`build/checkout-blocks/totals-frontend.js`	310 B
`build/checkout-frontend.js`	31.3 kB
`build/checkout.js`	46.3 kB
`build/customer-account.js`	3.18 kB
`build/featured-category.js`	14.4 kB
`build/featured-product.js`	14.7 kB
`build/filter-wrapper-frontend.js`	14.2 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 kB
`build/legacy-template.js`	6.33 kB
`build/mini-cart-component-frontend.js`	29.5 kB
`build/mini-cart-contents-block/cart-button-frontend.js`	864 B
`build/mini-cart-contents-block/checkout-button-frontend.js`	866 B
`build/mini-cart-contents-block/empty-cart-frontend.js`	360 B
`build/mini-cart-contents-block/filled-cart-frontend.js`	268 B
`build/mini-cart-contents-block/footer-frontend.js`	3.23 kB
`build/mini-cart-contents-block/items-frontend.js`	237 B
`build/mini-cart-contents-block/products-table-frontend.js`	589 B
`build/mini-cart-contents-block/shopping-button-frontend.js`	760 B
`build/mini-cart-contents-block/title-frontend.js`	1.08 kB
`build/mini-cart-contents-block/title-items-counter-frontend.js`	729 B
`build/mini-cart-contents-block/title-label-frontend.js`	661 B
`build/mini-cart-contents.js`	17.9 kB
`build/mini-cart-frontend.js`	2.05 kB
`build/mini-cart.js`	4.49 kB
`build/price-filter-frontend.js`	14.5 kB
`build/price-filter-wrapper-frontend.js`	5.78 kB
`build/price-filter.js`	8.47 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`	251 B
`build/product-add-to-cart--product-rating.js`	151 B
`build/product-add-to-cart-frontend.js`	6.5 kB
`build/product-add-to-cart.js`	8.88 kB
`build/product-best-sellers.js`	8.34 kB
`build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--408017d2.js`	262 B
`build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js`	463 B
`build/product-button-frontend.js`	1.92 kB
`build/product-button.js`	4.18 kB
`build/product-categories.js`	2.36 kB
`build/product-category.js`	9.35 kB
`build/product-image-frontend.js`	1.84 kB
`build/product-image.js`	4.31 kB
`build/product-new.js`	8.34 kB
`build/product-on-sale.js`	8.68 kB
`build/product-price-frontend.js`	2.17 kB
`build/product-price.js`	1.74 kB
`build/product-query.js`	11.6 kB
`build/product-rating-frontend.js`	1.45 kB
`build/product-rating.js`	1.04 kB
`build/product-results-count.js`	1.66 kB
`build/product-sale-badge-frontend.js`	974 B
`build/product-sale-badge.js`	801 B
`build/product-search.js`	2.63 kB
`build/product-sku-frontend.js`	1 kB
`build/product-sku.js`	579 B
`build/product-stock-indicator-frontend.js`	1.19 kB
`build/product-stock-indicator.js`	771 B
`build/product-summary-frontend.js`	1.29 kB
`build/product-summary.js`	922 B
`build/product-tag.js`	8.97 kB
`build/product-title-frontend.js`	1.37 kB
`build/product-title.js`	3.75 kB
`build/product-top-rated.js`	8.58 kB
`build/products-by-attribute.js`	9.7 kB
`build/rating-filter-frontend.js`	21.5 kB
`build/rating-filter-wrapper-frontend.js`	3.04 kB
`build/rating-filter.js`	7.02 kB
`build/reviews-by-category.js`	12.1 kB
`build/reviews-by-product.js`	13.2 kB
`build/reviews-frontend.js`	7.1 kB
`build/single-product.js`	11.1 kB
`build/stock-filter-frontend.js`	21.8 kB
`build/stock-filter-wrapper-frontend.js`	3.31 kB
`build/stock-filter.js`	7.73 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.82 kB
`build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js`	4.2 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.58 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--product-add-to-cart-frontend.js`	7.25 kB
`build/wc-blocks-data.js`	22.5 kB
`build/wc-blocks-editor-style-rtl.css`	5.91 kB
`build/wc-blocks-editor-style.css`	5.91 kB
`build/wc-blocks-google-analytics.js`	1.56 kB
`build/wc-blocks-middleware.js`	933 B
`build/wc-blocks-registry.js`	3.15 kB
`build/wc-blocks-shared-context.js`	1.52 kB
`build/wc-blocks-shared-hocs.js`	1.75 kB
`build/wc-blocks-style-rtl.css`	27.7 kB
`build/wc-blocks-style.css`	27.7 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.2 kB
`build/wc-blocks.js`	2.62 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.3 kB
`build/woo-directives-runtime.js`	2.73 kB
`build/woo-directives-vendors.js`	7.91 kB

_{compressed-size-action}

kmanijak

Thanks for working on this! All looks good, but I spotted one thing that on Sherbet style theme the button is unreadable:

Is that something that should be handled out of the box or in this case a merchant is responsible to adjust is after changing styles?

roykho · 2023-05-10T15:49:22Z

Unfortunately I don't think you can account for that. We decided to be more opinionated in the design and specific made the text white and button black. However as you can see, themes can still override that design/style. So even if we adjust to fix it for this theme, then you will consequently have issues with other themes.

kmanijak

Unfortunately I don't think you can account for that. We decided to be more opinionated in the design and specific made the text white and button black. However as you can see, themes can still override that design/style. So even if we adjust to fix it for this theme, then you will consequently have issues with other themes.

Got you. Approving then!

* Update text * Make shop now button black with white text to match design * Update pattern image and text

Update text

63259b1

roykho added skip-changelog PRs that you don't want to appear in the changelog. focus: patterns WooCommerce patterns labels May 10, 2023

roykho requested a review from kmanijak May 10, 2023 14:21

woocommercebot requested a review from a team May 10, 2023 14:21

roykho added 2 commits May 10, 2023 07:29

Make shop now button black with white text to match design

4dd753e

Update pattern image and text

d14c76d

kmanijak reviewed May 10, 2023

View reviewed changes

kmanijak approved these changes May 11, 2023

View reviewed changes

github-actions bot added the status: ready to merge label May 11, 2023

kmanijak merged commit 6252435 into trunk May 11, 2023

kmanijak deleted the update/category-focus branch May 11, 2023 06:17

github-actions bot removed the status: ready to merge label May 11, 2023

kmanijak pushed a commit that referenced this pull request May 11, 2023

Update text (#9423)

2a05f18

* Update text * Make shop now button black with white text to match design * Update pattern image and text

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update text #9423

Update text #9423

roykho commented May 10, 2023 •

edited

Loading

github-actions bot commented May 10, 2023 •

edited

Loading

github-actions bot commented May 10, 2023 •

edited

Loading

kmanijak left a comment

roykho commented May 10, 2023

kmanijak left a comment

Update text #9423

Update text #9423

Conversation

roykho commented May 10, 2023 • edited Loading

Screenshots

Testing

User Facing Testing

WooCommerce Visibility

Performance Impact

Changelog

github-actions bot commented May 10, 2023 • edited Loading

Script Dependencies Report

TypeScript Errors Report

github-actions bot commented May 10, 2023 • edited Loading

kmanijak left a comment

Choose a reason for hiding this comment

roykho commented May 10, 2023

kmanijak left a comment

Choose a reason for hiding this comment

roykho commented May 10, 2023 •

edited

Loading

github-actions bot commented May 10, 2023 •

edited

Loading

github-actions bot commented May 10, 2023 •

edited

Loading