Refactor: `Featured product` and `Featured category` classes #6443

albarin · 2022-05-23T14:22:56Z

Following the same idea as in the #6406 refactor, this PR aims to reduce code duplication in the Featured Product and Featured Category blocks.

A new abstract class FeaturedItem.php with the common code is introduced.
Both FeaturedProduct and FeaturedCategory classes extend the new FeaturedItem class and implement some functions with the specific code needed for each.

Testing

Automated Tests

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

User Facing Testing

Create a page and add a Featured Category block.
Save the page and check it renders correctly the default config in the frontend.
Edit the page and make some changes to the block (duotone, padding, overlay, focal point, fixed/repeated image etc.).
Save the page and check it renders correctly with the new settings.
Repeat steps 1-4 with the Featured Product block.

github-actions · 2022-05-23T14:27:55Z

Size Change: 0 B

Total Size: 862 kB

ℹ️ View Unchanged

Filename	Size
`build/active-filters-frontend.js`	6.59 kB
`build/active-filters.js`	7.42 kB
`build/all-products-frontend.js`	18.1 kB
`build/all-products.js`	33.4 kB
`build/all-reviews.js`	7.79 kB
`build/attribute-filter-frontend.js`	17.7 kB
`build/attribute-filter.js`	13.8 kB
`build/blocks-checkout.js`	17.4 kB
`build/cart-blocks/cart-accepted-payment-methods-frontend.js`	1.16 kB
`build/cart-blocks/cart-express-payment-frontend.js`	5.06 kB
`build/cart-blocks/cart-items-frontend.js`	299 B
`build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js`	5.27 kB
`build/cart-blocks/cart-line-items-frontend.js`	432 B
`build/cart-blocks/cart-order-summary-frontend.js`	1.11 kB
`build/cart-blocks/cart-totals-frontend.js`	322 B
`build/cart-blocks/empty-cart-frontend.js`	346 B
`build/cart-blocks/filled-cart-frontend.js`	782 B
`build/cart-blocks/order-summary-coupon-form-frontend.js`	2.62 kB
`build/cart-blocks/order-summary-discount-frontend.js`	2.13 kB
`build/cart-blocks/order-summary-fee-frontend.js`	273 B
`build/cart-blocks/order-summary-heading-frontend.js`	454 B
`build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js`	6.34 kB
`build/cart-blocks/order-summary-shipping-frontend.js`	428 B
`build/cart-blocks/order-summary-subtotal-frontend.js`	273 B
`build/cart-blocks/order-summary-taxes-frontend.js`	433 B
`build/cart-blocks/proceed-to-checkout-frontend.js`	1.15 kB
`build/cart-frontend.js`	45.3 kB
`build/cart.js`	44.1 kB
`build/checkout-blocks/actions-frontend.js`	1.41 kB
`build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js`	4.12 kB
`build/checkout-blocks/billing-address-frontend.js`	892 B
`build/checkout-blocks/contact-information-frontend.js`	2.83 kB
`build/checkout-blocks/express-payment-frontend.js`	5.35 kB
`build/checkout-blocks/fields-frontend.js`	345 B
`build/checkout-blocks/order-note-frontend.js`	1.07 kB
`build/checkout-blocks/order-summary-cart-items-frontend.js`	3.66 kB
`build/checkout-blocks/order-summary-coupon-form-frontend.js`	2.78 kB
`build/checkout-blocks/order-summary-discount-frontend.js`	2.25 kB
`build/checkout-blocks/order-summary-fee-frontend.js`	275 B
`build/checkout-blocks/order-summary-frontend.js`	1.11 kB
`build/checkout-blocks/order-summary-shipping-frontend.js`	603 B
`build/checkout-blocks/order-summary-subtotal-frontend.js`	273 B
`build/checkout-blocks/order-summary-taxes-frontend.js`	432 B
`build/checkout-blocks/payment-frontend.js`	7.67 kB
`build/checkout-blocks/shipping-address-frontend.js`	997 B
`build/checkout-blocks/shipping-methods-frontend.js`	4.71 kB
`build/checkout-blocks/terms-frontend.js`	1.22 kB
`build/checkout-blocks/totals-frontend.js`	326 B
`build/checkout-frontend.js`	47.5 kB
`build/checkout.js`	45.4 kB
`build/featured-category.js`	13.1 kB
`build/featured-product.js`	13.4 kB
`build/handpicked-products.js`	7.39 kB
`build/legacy-template.js`	2.2 kB
`build/mini-cart-component-frontend.js`	16.6 kB
`build/mini-cart-contents-block/empty-cart-frontend.js`	364 B
`build/mini-cart-contents-block/filled-cart-frontend.js`	230 B
`build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js`	4.69 kB
`build/mini-cart-contents-block/footer-frontend.js`	5.63 kB
`build/mini-cart-contents-block/items-frontend.js`	225 B
`build/mini-cart-contents-block/products-table-frontend.js`	289 B
`build/mini-cart-contents-block/shopping-button-frontend.js`	287 B
`build/mini-cart-contents-block/title-frontend.js`	366 B
`build/mini-cart-contents.js`	22.8 kB
`build/mini-cart-frontend.js`	1.72 kB
`build/mini-cart.js`	6.1 kB
`build/price-filter-frontend.js`	12.5 kB
`build/price-filter.js`	8.74 kB
`build/price-format.js`	1.19 kB
`build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js`	223 B
`build/product-add-to-cart--product-button--product-image--product-title.js`	2.64 kB
`build/product-add-to-cart--product-button.js`	564 B
`build/product-add-to-cart-frontend.js`	6.96 kB
`build/product-add-to-cart.js`	6.64 kB
`build/product-best-sellers.js`	7.47 kB
`build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js`	499 B
`build/product-button-frontend.js`	1.85 kB
`build/product-button.js`	1.09 kB
`build/product-categories.js`	2.78 kB
`build/product-category-list-frontend.js`	923 B
`build/product-category-list.js`	501 B
`build/product-category.js`	8.58 kB
`build/product-image-frontend.js`	1.84 kB
`build/product-image.js`	1.07 kB
`build/product-new.js`	7.76 kB
`build/product-on-sale.js`	8.08 kB
`build/product-price-frontend.js`	1.94 kB
`build/product-price.js`	1.5 kB
`build/product-rating-frontend.js`	1.15 kB
`build/product-rating.js`	730 B
`build/product-sale-badge-frontend.js`	1.09 kB
`build/product-sale-badge.js`	677 B
`build/product-search.js`	2.18 kB
`build/product-sku-frontend.js`	380 B
`build/product-sku.js`	381 B
`build/product-stock-indicator-frontend.js`	1.03 kB
`build/product-stock-indicator.js`	620 B
`build/product-summary-frontend.js`	1.33 kB
`build/product-summary.js`	917 B
`build/product-tag-list-frontend.js`	917 B
`build/product-tag-list.js`	495 B
`build/product-tag.js`	8.12 kB
`build/product-title-frontend.js`	1.3 kB
`build/product-title.js`	910 B
`build/product-top-rated.js`	8 kB
`build/products-by-attribute.js`	8.69 kB
`build/reviews-by-category.js`	11.3 kB
`build/reviews-by-product.js`	12.3 kB
`build/reviews-frontend.js`	7.02 kB
`build/single-product-frontend.js`	21.5 kB
`build/single-product.js`	10.1 kB
`build/stock-filter-frontend.js`	6.87 kB
`build/stock-filter.js`	6.95 kB
`build/vendors--cart-blocks/cart-line-items--cart-blocks/cart-order-summary--cart-blocks/order-summary-shi--c02aad66-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.14 kB
`build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js`	4.72 kB
`build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js`	20.5 kB
`build/vendors--mini-cart-contents-block/footer-frontend.js`	6.86 kB
`build/vendors--product-add-to-cart-frontend.js`	7.53 kB
`build/wc-blocks-data.js`	9.87 kB
`build/wc-blocks-editor-style-rtl.css`	5.04 kB
`build/wc-blocks-editor-style.css`	5.04 kB
`build/wc-blocks-google-analytics.js`	1.56 kB
`build/wc-blocks-middleware.js`	930 B
`build/wc-blocks-registry.js`	2.7 kB
`build/wc-blocks-shared-context.js`	1.52 kB
`build/wc-blocks-shared-hocs.js`	1.14 kB
`build/wc-blocks-style-rtl.css`	22.1 kB
`build/wc-blocks-style.css`	22.1 kB
`build/wc-blocks-vendors-style-rtl.css`	1.28 kB
`build/wc-blocks-vendors-style.css`	1.28 kB
`build/wc-blocks-vendors.js`	59 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.61 kB

_{compressed-size-action}

…ct/Category`

github-actions · 2022-05-24T14:45:32Z

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`	`react`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-compose`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`	⚠️
`all-products-frontend.js`	`lodash`, `react`, `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`	⚠️
`price-filter-frontend.js`	`lodash`, `react`, `wc-blocks-data-store`, `wc-price-format`, `wc-settings`, `wp-data`, `wp-element`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-url`	⚠️
`attribute-filter-frontend.js`	`lodash`, `react`, `wc-blocks-data-store`, `wc-settings`, `wp-a11y`, `wp-block-editor`, `wp-blocks`, `wp-components`, `wp-data`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`, `wp-url`	⚠️
`stock-filter-frontend.js`	`lodash`, `react`, `wc-blocks-data-store`, `wc-settings`, `wp-a11y`, `wp-data`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-url`	⚠️
`active-filters-frontend.js`	`lodash`, `react`, `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`	⚠️
`cart-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`	⚠️
`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`	⚠️
`mini-cart-frontend.js`	`wc-settings`, `wp-polyfill`	⚠️
`single-product-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`	⚠️
`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-components`, `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.

sunyatasattva

I'm super happy with this. I think we have managed to improve these blocks a lot with this refactor! My only comments are small nitpicks.

src/BlockTypes/FeaturedItem.php

sunyatasattva

❤️ Nice job! Thank you for addressing my nitpicks. In the end you didn't decide to bring up the string concatenation thing, I see :)

albarin self-assigned this May 23, 2022

rubikuserbot requested review from a team and sunyatasattva and removed request for a team May 23, 2022 14:23

albarin changed the base branch from trunk to add/fc-repeated-fixed-image May 23, 2022 14:24

albarin force-pushed the refactor/featured-product-category-classes branch from fecf7ec to a6679dc Compare May 23, 2022 14:27

albarin marked this pull request as ready for review May 23, 2022 18:17

Base automatically changed from add/fc-repeated-fixed-image to trunk May 24, 2022 14:10

albarin changed the title ~~Refactor/featured product category classes~~ Refactor: Featured product and Featured category classes May 24, 2022

albarin added 4 commits May 24, 2022 16:27

Add Fixed/Repeated background to the Featured Category block

723e73e

Reorganize Featured Product and Feature Category before unification

e4ae830

Add new FeaturedItem class with the shared code for `Featured Produ…

62d47fa

…ct/Category`

Remove space

ed11bce

albarin force-pushed the refactor/featured-product-category-classes branch from a6679dc to ed11bce Compare May 24, 2022 14:41

sunyatasattva suggested changes May 24, 2022

View reviewed changes

Small tweaks after review feedback

f7bba0c

albarin requested a review from sunyatasattva May 25, 2022 08:28

sunyatasattva approved these changes May 25, 2022

View reviewed changes

github-actions bot added the status: ready to merge label May 25, 2022

Merge branch 'trunk' into refactor/featured-product-category-classes

f32827d

albarin merged commit a184946 into trunk May 30, 2022

albarin deleted the refactor/featured-product-category-classes branch May 30, 2022 07:08

gigitux added this to the 7.8.0 milestone Jun 6, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Refactor: `Featured product` and `Featured category` classes #6443

Refactor: `Featured product` and `Featured category` classes #6443

Uh oh!

albarin commented May 23, 2022

Uh oh!

github-actions bot commented May 23, 2022 •

edited

Loading

Uh oh!

github-actions bot commented May 24, 2022

Uh oh!

sunyatasattva left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sunyatasattva left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Refactor: Featured product and Featured category classes #6443

Refactor: Featured product and Featured category classes #6443

Uh oh!

Conversation

albarin commented May 23, 2022

Testing

Automated Tests

User Facing Testing

Uh oh!

github-actions bot commented May 23, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented May 24, 2022

Script Dependencies Report

Uh oh!

sunyatasattva left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sunyatasattva left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Refactor: `Featured product` and `Featured category` classes #6443

Refactor: `Featured product` and `Featured category` classes #6443

github-actions bot commented May 23, 2022 •

edited

Loading