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

Fix Featured Product block frontend mismatch #6263

Merged
merged 1 commit into from
Apr 19, 2022

Conversation

sunyatasattva
Copy link
Contributor

If the Featured Product block was added but not modified at all, the block would not match the editor on the front end.

This was due to the fact that, on the frontend, the block is SSR and was missing some defaults styles which were present in JS.

Fixes #6255

Testing

Automated Tests

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

Manual Testing

How to test the changes in this Pull Request:

  1. Switch to a block-enabled theme (such as Twenty-twentytwo).
  2. Add the Featured Product block to a page.
  3. Confirm that it has a default, semi-transparent, black overlay and that a default height of 500 px or whatever the theme supports through the featured_block::default_height setting.
  4. Publish the page.
  5. Preview the page and confirm that the block looks like the one in the editor (specifically for height and overlay).
  6. Play around with the styles of the block on the editor (change the overlay color, the padding, the opacity, the image fit etc.).
  7. Confirm they get correctly applied on the frontend.

User Facing Testing

These are steps for user testing (where "user" is someone interacting with this change that is not editing any code).

  • Same as above

Skipping changelog here as #6181 (which introduced the bug) was never published.

If the Featured Product block was added but not modified at all,
the block would not match the editor on the front end.

This was due to the fact that, on the frontend, the
block is SSR and was missing some defaults which
were present in JS.
@sunyatasattva sunyatasattva added status: blocker Used on issues or pulls that block work from being released. skip-changelog PRs that you don't want to appear in the changelog. block: featured product Issues related to the Featured Product block. labels Apr 14, 2022
@sunyatasattva sunyatasattva self-assigned this Apr 14, 2022
@rubikuserbot rubikuserbot requested review from a team and albarin and removed request for a team April 14, 2022 17:21
@github-actions
Copy link
Contributor

Size Change: 0 B

Total Size: 863 kB

ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 5.92 kB
build/active-filters.js 6.59 kB
build/all-products-frontend.js 18.1 kB
build/all-products.js 33.5 kB
build/all-reviews.js 7.77 kB
build/attribute-filter-frontend.js 17.5 kB
build/attribute-filter.js 13.4 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.24 kB
build/cart-blocks/cart-items-frontend.js 298 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 431 B
build/cart-blocks/cart-order-summary-frontend.js 1.1 kB
build/cart-blocks/cart-totals-frontend.js 321 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 772 B
build/cart-blocks/order-summary-coupon-form-frontend.js 2.81 kB
build/cart-blocks/order-summary-discount-frontend.js 2.31 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.33 kB
build/cart-blocks/order-summary-shipping-frontend.js 427 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.16 kB
build/cart-frontend.js 45.5 kB
build/cart.js 44.3 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 893 B
build/checkout-blocks/contact-information-frontend.js 2.83 kB
build/checkout-blocks/express-payment-frontend.js 5.54 kB
build/checkout-blocks/fields-frontend.js 343 B
build/checkout-blocks/order-note-frontend.js 1.07 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.97 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.43 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-frontend.js 1.1 kB
build/checkout-blocks/order-summary-shipping-frontend.js 605 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.82 kB
build/checkout-blocks/shipping-address-frontend.js 996 B
build/checkout-blocks/shipping-methods-frontend.js 4.72 kB
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 325 B
build/checkout-frontend.js 47.7 kB
build/checkout.js 45.5 kB
build/featured-category.js 8.63 kB
build/featured-product.js 10.5 kB
build/handpicked-products.js 7.11 kB
build/legacy-template.js 2.19 kB
build/mini-cart-component-frontend.js 16.6 kB
build/mini-cart-contents-block/empty-cart-frontend.js 327 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.68 kB
build/mini-cart-contents-block/footer-frontend.js 5.64 kB
build/mini-cart-contents-block/items-frontend.js 226 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 367 B
build/mini-cart-contents.js 22.7 kB
build/mini-cart-frontend.js 1.72 kB
build/mini-cart.js 6.1 kB
build/price-filter-frontend.js 12.4 kB
build/price-filter.js 8.41 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 224 B
build/product-add-to-cart--product-button--product-image--product-title.js 2.65 kB
build/product-add-to-cart--product-button.js 565 B
build/product-add-to-cart-frontend.js 6.96 kB
build/product-add-to-cart.js 6.63 kB
build/product-best-sellers.js 7.38 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 502 B
build/product-button-frontend.js 1.84 kB
build/product-button.js 1.08 kB
build/product-categories.js 2.78 kB
build/product-category-list-frontend.js 926 B
build/product-category-list.js 501 B
build/product-category.js 8.49 kB
build/product-image-frontend.js 1.84 kB
build/product-image.js 1.07 kB
build/product-new.js 7.68 kB
build/product-on-sale.js 7.99 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 733 B
build/product-sale-badge-frontend.js 1.09 kB
build/product-sale-badge.js 678 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 621 B
build/product-summary-frontend.js 1.33 kB
build/product-summary.js 919 B
build/product-tag-list-frontend.js 918 B
build/product-tag-list.js 496 B
build/product-tag.js 7.81 kB
build/product-title-frontend.js 1.29 kB
build/product-title.js 909 B
build/product-top-rated.js 7.91 kB
build/products-by-attribute.js 8.39 kB
build/reviews-by-category.js 11.2 kB
build/reviews-by-product.js 12.3 kB
build/reviews-frontend.js 7 kB
build/single-product-frontend.js 21.5 kB
build/single-product.js 10 kB
build/stock-filter-frontend.js 6.5 kB
build/stock-filter.js 6.56 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.75 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 4.92 kB
build/wc-blocks-editor-style.css 4.92 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 kB
build/wc-blocks-style.css 22 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 71.3 kB
build/wc-blocks.js 2.63 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

Copy link
Contributor

@albarin albarin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👌

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: featured product Issues related to the Featured Product block. skip-changelog PRs that you don't want to appear in the changelog. status: blocker Used on issues or pulls that block work from being released.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Featured Product block styles in the frontend don't match the editor styles
2 participants