Store Customization > Featured Category Triple pattern - Update the pattern to become wireframed

[nefeline]

Update the Featured Category Triple pattern to become wireframed. Additionally:

• Ensured all strings in this pattern are translatable
• Removed unnecessary styles from the cover and column blocks
• For the shop now text, replaced the buttons block with the paragraph block
• For the product names, replaced the paragraph block with the heading block

Fixes #10212

Screenshots

Before	After

Testing

User Facing Testing

1. Create a new post and insert the Featured Category Triple pattern
2. Ensure the pattern is rendered correctly in the editor
3. Save the post and go to the frontend
4. Ensure the pattern is rendered correctly without any errors and the styles match the screenshot on this PR.

• Do not include in the Testing Notes

WooCommerce Visibility

• WooCommerce Core
• Feature plugin
• Experimental

Performance Impact

Changelog

Update the Featured Category Triple pattern to become wireframed.

[github-actions]

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-10343.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: 470
• Total errors: 2246

🎉 🎉 This PR does not introduce new TS errors.

_{comments-aggregator}

[github-actions]

Size Change: 0 B

Total Size: 1.36 MB

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	8.7 kB
build/active-filters-rtl.css	2.02 kB
build/active-filters-wrapper--mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-but--e791dc6c-style.js	957 B
build/active-filters-wrapper-frontend.js	7.64 kB
build/active-filters-wrapper-rtl.css	1.88 kB
build/active-filters-wrapper.css	1.88 kB
build/active-filters.css	2.02 kB
build/active-filters.js	7.59 kB
build/add-to-cart-form-rtl.css	380 B
build/add-to-cart-form.css	378 B
build/all-products-frontend.js	10.1 kB
build/all-products-rtl.css	4.24 kB
build/all-products.css	4.24 kB
build/all-products.js	41.8 kB
build/all-reviews-rtl.css	1.84 kB
build/all-reviews.css	1.84 kB
build/all-reviews.js	7.87 kB
build/attribute-filter-frontend.js	23 kB
build/attribute-filter-rtl.css	4.19 kB
build/attribute-filter-wrapper-frontend.js	7.69 kB
build/attribute-filter-wrapper-rtl.css	4.06 kB
build/attribute-filter-wrapper.css	4.06 kB
build/attribute-filter.css	4.19 kB
build/attribute-filter.js	13.3 kB
build/blocks-checkout.js	35.1 kB
build/breadcrumbs-rtl.css	253 B
build/breadcrumbs.css	253 B
build/breadcrumbs.js	2.14 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js	1.38 kB
build/cart-blocks/cart-accepted-payment-methods-style.js	137 B
build/cart-blocks/cart-cross-sells-frontend.js	253 B
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js	2.91 kB
build/cart-blocks/cart-cross-sells-products-frontend.js	3.83 kB
build/cart-blocks/cart-cross-sells-products-style.js	137 B
build/cart-blocks/cart-cross-sells-style.js	253 B
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js	5.17 kB
build/cart-blocks/cart-express-payment-frontend.js	719 B
build/cart-blocks/cart-express-payment-style.js	136 B
build/cart-blocks/cart-items-frontend.js	301 B
build/cart-blocks/cart-items-style.js	229 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js	5.47 kB
build/cart-blocks/cart-line-items-frontend.js	1.06 kB
build/cart-blocks/cart-line-items-style.js	137 B
build/cart-blocks/cart-order-summary-frontend.js	1.28 kB
build/cart-blocks/cart-order-summary-style.js	322 B
build/cart-blocks/cart-totals-frontend.js	307 B
build/cart-blocks/cart-totals-style.js	238 B
build/cart-blocks/empty-cart-frontend.js	347 B
build/cart-blocks/empty-cart-style.js	339 B
build/cart-blocks/filled-cart-frontend.js	655 B
build/cart-blocks/filled-cart-style.js	313 B
build/cart-blocks/order-summary-coupon-form-frontend.js	1.63 kB
build/cart-blocks/order-summary-coupon-form-style.js	137 B
build/cart-blocks/order-summary-discount-frontend.js	2.12 kB
build/cart-blocks/order-summary-discount-style.js	136 B
build/cart-blocks/order-summary-fee-frontend.js	272 B
build/cart-blocks/order-summary-fee-style.js	137 B
build/cart-blocks/order-summary-heading-frontend.js	333 B
build/cart-blocks/order-summary-heading-style.js	335 B
build/cart-blocks/order-summary-shipping-frontend.js	17 kB
build/cart-blocks/order-summary-shipping-style.js	178 B
build/cart-blocks/order-summary-subtotal-frontend.js	273 B
build/cart-blocks/order-summary-subtotal-style.js	136 B
build/cart-blocks/order-summary-taxes-frontend.js	434 B
build/cart-blocks/order-summary-taxes-style.js	177 B
build/cart-blocks/proceed-to-checkout-frontend.js	1.43 kB
build/cart-blocks/proceed-to-checkout-style.js	1.09 kB
build/cart-frontend.js	29.9 kB
build/cart-rtl.css	9.59 kB
build/cart.css	9.58 kB
build/cart.js	45.2 kB
build/catalog-sorting-rtl.css	277 B
build/catalog-sorting.css	276 B
build/catalog-sorting.js	1.71 kB
build/checkout-blocks/actions--checkout-blocks/terms-style.js	485 B
build/checkout-blocks/actions-frontend.js	1.88 kB
build/checkout-blocks/actions-style.js	685 B
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js	4.7 kB
build/checkout-blocks/billing-address-frontend.js	1.18 kB
build/checkout-blocks/billing-address-style.js	532 B
build/checkout-blocks/contact-information-frontend.js	2.04 kB
build/checkout-blocks/contact-information-style.js	608 B
build/checkout-blocks/express-payment-frontend.js	1.13 kB
build/checkout-blocks/fields-frontend.js	318 B
build/checkout-blocks/fields-style.js	260 B
build/checkout-blocks/order-note-frontend.js	1.13 kB
build/checkout-blocks/order-summary-cart-items-frontend.js	3.75 kB
build/checkout-blocks/order-summary-cart-items-style.js	136 B
build/checkout-blocks/order-summary-coupon-form-frontend.js	1.79 kB
build/checkout-blocks/order-summary-coupon-form-style.js	137 B
build/checkout-blocks/order-summary-discount-frontend.js	2.29 kB
build/checkout-blocks/order-summary-discount-style.js	137 B
build/checkout-blocks/order-summary-fee-frontend.js	275 B
build/checkout-blocks/order-summary-fee-style.js	137 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-shipping-style.js	137 B
build/checkout-blocks/order-summary-style.js	320 B
build/checkout-blocks/order-summary-subtotal-frontend.js	273 B
build/checkout-blocks/order-summary-subtotal-style.js	137 B
build/checkout-blocks/order-summary-taxes-frontend.js	435 B
build/checkout-blocks/order-summary-taxes-style.js	177 B
build/checkout-blocks/payment-frontend.js	9.28 kB
build/checkout-blocks/payment-style.js	461 B
build/checkout-blocks/pickup-options-frontend.js	4.84 kB
build/checkout-blocks/pickup-options-style.js	443 B
build/checkout-blocks/shipping-address-frontend.js	1.18 kB
build/checkout-blocks/shipping-address-style.js	475 B
build/checkout-blocks/shipping-method-frontend.js	2.62 kB
build/checkout-blocks/shipping-method-style.js	1.37 kB
build/checkout-blocks/shipping-methods-frontend.js	6.41 kB
build/checkout-blocks/shipping-methods-style.js	417 B
build/checkout-blocks/terms-frontend.js	1.55 kB
build/checkout-blocks/terms-style.js	677 B
build/checkout-blocks/totals-frontend.js	347 B
build/checkout-blocks/totals-style.js	285 B
build/checkout-frontend.js	31.8 kB
build/checkout-rtl.css	9.22 kB
build/checkout.css	9.21 kB
build/checkout.js	47.8 kB
build/customer-account-rtl.css	406 B
build/customer-account.css	406 B
build/customer-account.js	3.19 kB
build/featured-category-rtl.css	986 B
build/featured-category.css	987 B
build/featured-category.js	15.1 kB
build/featured-product-rtl.css	1.03 kB
build/featured-product.css	1.03 kB
build/featured-product.js	15.3 kB
build/filter-wrapper-frontend.js	14.3 kB
build/filter-wrapper-rtl.css	399 B
build/filter-wrapper.css	397 B
build/filter-wrapper.js	2.4 kB
build/handpicked-products.js	8.11 kB
build/legacy-template-rtl.css	258 B
build/legacy-template.css	257 B
build/legacy-template.js	8.93 kB
build/mini-cart-component-frontend.js	30.9 kB
build/mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-button--mini-cart-contents---358acf4e-style.js	293 B
build/mini-cart-contents-block/cart-button-frontend.js	1.73 kB
build/mini-cart-contents-block/cart-button-style.js	388 B
build/mini-cart-contents-block/checkout-button-frontend.js	1.81 kB
build/mini-cart-contents-block/checkout-button-style.js	470 B
build/mini-cart-contents-block/empty-cart-frontend.js	360 B
build/mini-cart-contents-block/empty-cart-style.js	358 B
build/mini-cart-contents-block/filled-cart-frontend.js	267 B
build/mini-cart-contents-block/filled-cart-style.js	268 B
build/mini-cart-contents-block/footer-frontend.js	3.83 kB
build/mini-cart-contents-block/footer-rtl.css	419 B
build/mini-cart-contents-block/footer-style.js	2.4 kB
build/mini-cart-contents-block/footer.css	418 B
build/mini-cart-contents-block/items-frontend.js	237 B
build/mini-cart-contents-block/items-style.js	237 B
build/mini-cart-contents-block/products-table--product-image--product-title-style.js	352 B
build/mini-cart-contents-block/products-table-frontend.js	582 B
build/mini-cart-contents-block/products-table-rtl.css	2.19 kB
build/mini-cart-contents-block/products-table-style.js	5.45 kB
build/mini-cart-contents-block/products-table.css	2.18 kB
build/mini-cart-contents-block/shopping-button-frontend.js	538 B
build/mini-cart-contents-block/shopping-button-style.js	403 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-items-counter-style.js	302 B
build/mini-cart-contents-block/title-label-frontend.js	1.53 kB
build/mini-cart-contents-block/title-label-style.js	301 B
build/mini-cart-contents-block/title-style.js	445 B
build/mini-cart-contents-rtl.css	2.73 kB
build/mini-cart-contents.css	2.73 kB
build/mini-cart-contents.js	17.9 kB
build/mini-cart-frontend.js	2.85 kB
build/mini-cart-rtl.css	2.61 kB
build/mini-cart.css	2.61 kB
build/mini-cart.js	6.37 kB
build/packages-style-rtl.css	3.59 kB
build/packages-style.css	3.59 kB
build/price-filter-frontend.js	14.6 kB
build/price-filter-rtl.css	2.71 kB
build/price-filter-wrapper-frontend.js	6.75 kB
build/price-filter-wrapper-rtl.css	2.56 kB
build/price-filter-wrapper.css	2.56 kB
build/price-filter.css	2.7 kB
build/price-filter.js	8.58 kB
build/price-format.js	1.19 kB
build/product-add-to-cart--product-average-rating--product-button--product-image--product-price--product---1d132d69.js	272 B
build/product-add-to-cart--product-button--product-rating--product-rating-counter--product-rating-stars.js	151 B
build/product-add-to-cart--product-image--product-title.js	351 B
build/product-add-to-cart-frontend.js	8.67 kB
build/product-add-to-cart-rtl.css	1.39 kB
build/product-add-to-cart.css	1.4 kB
build/product-add-to-cart.js	8.71 kB
build/product-average-rating--product-button--product-image--product-price--product-rating--product-ratin--e23975b5.js	954 B
build/product-average-rating-frontend.js	1.72 kB
build/product-average-rating.js	397 B
build/product-best-sellers.js	8.45 kB
build/product-button-frontend.js	4.96 kB
build/product-button-rtl.css	889 B
build/product-button.css	891 B
build/product-button.js	3.95 kB
build/product-categories-rtl.css	671 B
build/product-categories.css	670 B
build/product-categories.js	2.71 kB
build/product-category.js	9.47 kB
build/product-collection.js	13.9 kB
build/product-details-rtl.css	413 B
build/product-details.css	410 B
build/product-gallery-large-image-rtl.css	314 B
build/product-gallery-large-image.css	313 B
build/product-gallery-large-image.js	2.01 kB
build/product-gallery.js	2.3 kB
build/product-image-frontend.js	2.72 kB
build/product-image-gallery-rtl.css	322 B
build/product-image-gallery.css	322 B
build/product-image-rtl.css	951 B
build/product-image.css	949 B
build/product-image.js	1.57 kB
build/product-new.js	8.75 kB
build/product-on-sale.js	8.76 kB
build/product-price-frontend.js	248 B
build/product-price-rtl.css	696 B
build/product-price.css	695 B
build/product-price.js	1.67 kB
build/product-query-rtl.css	367 B
build/product-query.css	365 B
build/product-query.js	12.9 kB
build/product-rating-counter-frontend.js	2.03 kB
build/product-rating-counter.js	687 B
build/product-rating-frontend.js	2.37 kB
build/product-rating-rtl.css	262 B
build/product-rating-stars-frontend.js	2.27 kB
build/product-rating-stars-rtl.css	914 B
build/product-rating-stars.css	916 B
build/product-rating-stars.js	937 B
build/product-rating.css	262 B
build/product-rating.js	1.04 kB
build/product-results-count-rtl.css	248 B
build/product-results-count.css	247 B
build/product-results-count.js	1.67 kB
build/product-reviews-rtl.css	474 B
build/product-reviews.css	473 B
build/product-sale-badge-frontend.js	1.81 kB
build/product-sale-badge-rtl.css	392 B
build/product-sale-badge.css	389 B
build/product-sale-badge.js	665 B
build/product-search-rtl.css	435 B
build/product-search.css	434 B
build/product-search.js	2.63 kB
build/product-sku-frontend.js	1.87 kB
build/product-sku-rtl.css	258 B
build/product-sku.css	258 B
build/product-sku.js	535 B
build/product-stock-indicator-frontend.js	2.06 kB
build/product-stock-indicator-rtl.css	250 B
build/product-stock-indicator.css	250 B
build/product-stock-indicator.js	729 B
build/product-summary-frontend.js	2.28 kB
build/product-summary-rtl.css	571 B
build/product-summary.css	572 B
build/product-summary.js	1.01 kB
build/product-tag.js	8.95 kB
build/product-template-rtl.css	439 B
build/product-template.css	437 B
build/product-template.js	3.35 kB
build/product-title-frontend.js	2.23 kB
build/product-title-rtl.css	718 B
build/product-title.css	719 B
build/product-title.js	973 B
build/product-top-rated.js	9.01 kB
build/products-by-attribute.js	9.8 kB
build/rating-filter-frontend.js	21.4 kB
build/rating-filter-rtl.css	4.25 kB
build/rating-filter-wrapper-frontend.js	6.23 kB
build/rating-filter-wrapper-rtl.css	4.11 kB
build/rating-filter-wrapper.css	4.11 kB
build/rating-filter.css	4.24 kB
build/rating-filter.js	6.94 kB
build/reviews-by-category-rtl.css	1.84 kB
build/reviews-by-category.css	1.84 kB
build/reviews-by-category.js	12.2 kB
build/reviews-by-product-rtl.css	1.84 kB
build/reviews-by-product.css	1.84 kB
build/reviews-by-product.js	13.4 kB
build/reviews-frontend.js	7.18 kB
build/single-product-rtl.css	399 B
build/single-product.css	397 B
build/single-product.js	11.3 kB
build/stock-filter-frontend.js	21.6 kB
build/stock-filter-rtl.css	4.06 kB
build/stock-filter-wrapper-frontend.js	6.45 kB
build/stock-filter-wrapper-rtl.css	3.93 kB
build/stock-filter-wrapper.css	3.93 kB
build/stock-filter.css	4.06 kB
build/stock-filter.js	7.64 kB
build/store-notices.js	1.69 kB
build/vendors--active-filters-wrapper--attribute-filter-wrapper--mini-cart-contents-block/cart-button--mi--d6bb29e6-style.js	606 B
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js	6.84 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--cart-blocks/proceed-to-checkout-style.js	179 B
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--checkout-blocks/shipping-method-style.js	11.7 kB
build/vendors--mini-cart-contents-block/products-table--price-filter-wrapper--product-price-style.js	5.27 kB
build/vendors--mini-cart-contents-block/products-table-style.js	3.16 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.39 kB
build/wc-blocks-editor-style.css	6.4 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-rtl.css	2.54 kB
build/wc-blocks-shared-context.js	1.1 kB
build/wc-blocks-shared-hocs.js	1.75 kB
build/wc-blocks-vendors.js	65.5 kB
build/wc-blocks.css	2.54 kB
build/wc-blocks.js	3.75 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}

[albarin]

Looks good!