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

Product Image block: Enable global style #5562

Merged
merged 13 commits into from
Feb 14, 2022
Merged

Product Image block: Enable global style #5562

merged 13 commits into from
Feb 14, 2022

Conversation

gigitux
Copy link
Contributor

@gigitux gigitux commented Jan 13, 2022

This PR is blocked by #5542

This PR adds support for global style for the Product Image block.

Now, the user can edit the style for:

  • border-radius
  • font-size

#4965

Screenshots

image
without global style

image
with global style

Testing

Manual Testing

Check out this branch:

  1. On WordPress 5.9, install and enable the Gutenberg plugin.
  2. Install and enable the Twenty Twenty-Two theme.
  3. Add the Single Product block (this block contains Product Image Block) to a post.
  4. Get the focus on Product Image Block.
  5. On the right sidebar, personalize the styles of the block.
  6. Go on the page and check if there are changes.
  7. Reset to default using the Reset button from the different sections.
  8. Go to Dashboard and select Appearance > Editor (beta). On top of the screen, select Home > Browser all templates > Single Post. When the page is loaded, add the block to the page.
  9. On the Editor page click on the Styles icon on the right-top corner.
  10. Verify that the Product Image block is shown under the Blocks section. Personalize again the block.
  11. Save your changes.
  12. Go on the page created earlier and check if all styles are applied correctly.
  13. Edit your previous post/page again.
  14. Change again the styles.
  15. Save your changes.
  16. Check if these styles have priority over the styles from the Site Editor.

Changelog

Add support for the global style for the Product Image block.

@gigitux gigitux added status: blocked The issue is blocked from progressing, waiting for another piece of work to be done. type: enhancement The issue is a request for an enhancement. block: single product Issues related to the single product block. focus: global styles Issues that involve styles/css/layout structure. labels Jan 13, 2022
@gigitux gigitux self-assigned this Jan 13, 2022
@rubikuserbot rubikuserbot requested review from a team and tjcafferkey and removed request for a team January 13, 2022 21:19
Product Image block: enable global style #4965
@github-actions
Copy link
Contributor

github-actions bot commented Jan 13, 2022

Size Change: +513 B (0%)

Total Size: 813 kB

Filename Size Change
build/active-filters-frontend.js 6.37 kB +5 B (0%)
build/active-filters.js 7.05 kB +2 B (0%)
build/all-products-frontend.js 18.7 kB -4 B (0%)
build/all-products.js 33.9 kB +78 B (0%)
build/all-reviews.js 8.06 kB -2 B (0%)
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.48 kB -2 B (0%)
build/atomic-block-components/add-to-cart-frontend.js 6.89 kB +1 B (0%)
build/atomic-block-components/add-to-cart.js 6.46 kB -1 B (0%)
build/atomic-block-components/button.js 852 B -1 B (0%)
build/atomic-block-components/image-frontend.js 1.73 kB +358 B (+26%) 🚨
build/atomic-block-components/image.js 1.1 kB +43 B (+4%)
build/atomic-block-components/price-frontend.js 1.74 kB +2 B (0%)
build/atomic-block-components/stock-indicator--atomic-block-components/summary--atomic-block-components/title.js 0 B -468 B (removed) 🏆
build/atomic-block-components/summary-frontend.js 1.24 kB +1 B (0%)
build/attribute-filter-frontend.js 16.8 kB +4 B (0%)
build/attribute-filter.js 13 kB -19 B (0%)
build/cart-blocks/order-summary-frontend.js 8.94 kB -4 B (0%)
build/cart.js 43.7 kB -5 B (0%)
build/checkout-blocks/order-summary-frontend.js 11.4 kB -1 B (0%)
build/checkout-blocks/payment-frontend.js 7.71 kB +2 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 4.92 kB +1 B (0%)
build/checkout-frontend.js 47.5 kB +1 B (0%)
build/checkout.js 45.2 kB +5 B (0%)
build/featured-category.js 8.61 kB -3 B (0%)
build/featured-product.js 9.62 kB +1 B (0%)
build/handpicked-products.js 7.09 kB -2 B (0%)
build/legacy-template.js 2.18 kB +1 B (0%)
build/mini-cart-component-frontend.js 14.2 kB -5 B (0%)
build/mini-cart-contents.js 3.82 kB +2 B (0%)
build/mini-cart.js 6.4 kB +1 B (0%)
build/price-filter-frontend.js 12.6 kB +2 B (0%)
build/product-best-sellers.js 7.36 kB -1 B (0%)
build/product-categories.js 3.17 kB +1 B (0%)
build/product-new.js 7.66 kB +2 B (0%)
build/product-on-sale.js 7.98 kB -2 B (0%)
build/product-search.js 2.18 kB +1 B (0%)
build/product-tag.js 7.8 kB -1 B (0%)
build/product-top-rated.js 7.9 kB -1 B (0%)
build/products-by-attribute.js 8.38 kB -5 B (0%)
build/reviews-by-category.js 11.5 kB -4 B (0%)
build/single-product-frontend.js 22.1 kB -3 B (0%)
build/single-product.js 10 kB +16 B (0%)
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary--checkout--8a3571de-frontend.js 5.71 kB +1 B (0%)
build/wc-blocks-editor-style-rtl.css 4.8 kB +14 B (0%)
build/wc-blocks-editor-style.css 4.8 kB +13 B (0%)
build/wc-blocks-style-rtl.css 21.9 kB +9 B (0%)
build/wc-blocks-style.css 21.9 kB +9 B (0%)
build/wc-blocks-vendors.js 69.7 kB +3 B (0%)
build/atomic-block-components/image--atomic-block-components/stock-indicator--atomic-block-components/sum--89fb208f.js 468 B +468 B (new file) 🆕
ℹ️ View Unchanged
Filename Size
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---8f355022.js 255 B
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.67 kB
build/atomic-block-components/button-frontend.js 1.48 kB
build/atomic-block-components/category-list-frontend.js 458 B
build/atomic-block-components/category-list.js 459 B
build/atomic-block-components/price.js 1.7 kB
build/atomic-block-components/rating-frontend.js 703 B
build/atomic-block-components/rating.js 700 B
build/atomic-block-components/sale-badge-frontend.js 625 B
build/atomic-block-components/sale-badge.js 624 B
build/atomic-block-components/sku-frontend.js 386 B
build/atomic-block-components/sku.js 386 B
build/atomic-block-components/stock-indicator-frontend.js 940 B
build/atomic-block-components/stock-indicator.js 623 B
build/atomic-block-components/summary.js 926 B
build/atomic-block-components/tag-list-frontend.js 459 B
build/atomic-block-components/tag-list.js 459 B
build/atomic-block-components/title-frontend.js 1.21 kB
build/atomic-block-components/title.js 935 B
build/blocks-checkout.js 17.6 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.15 kB
build/cart-blocks/checkout-button-frontend.js 1.14 kB
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/express-payment-frontend.js 5.18 kB
build/cart-blocks/filled-cart-frontend.js 766 B
build/cart-blocks/items-frontend.js 298 B
build/cart-blocks/line-items-frontend.js 5.49 kB
build/cart-blocks/totals-frontend.js 321 B
build/cart-frontend.js 45.5 kB
build/checkout-blocks/actions-frontend.js 1.39 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.23 kB
build/checkout-blocks/billing-address-frontend.js 887 B
build/checkout-blocks/contact-information-frontend.js 2.95 kB
build/checkout-blocks/express-payment-frontend.js 5.47 kB
build/checkout-blocks/fields-frontend.js 343 B
build/checkout-blocks/order-note-frontend.js 1.13 kB
build/checkout-blocks/shipping-address-frontend.js 974 B
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 323 B
build/mini-cart-frontend.js 1.77 kB
build/price-filter.js 8.51 kB
build/price-format.js 1.18 kB
build/product-category.js 8.49 kB
build/reviews-by-product.js 12.6 kB
build/reviews-frontend.js 7.35 kB
build/stock-filter-frontend.js 6.61 kB
build/stock-filter.js 6.68 kB
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js 19 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js 7.51 kB
build/vendors--cart-blocks/line-items--checkout-blocks/order-summary-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 4.74 kB
build/wc-blocks-data.js 8.84 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 949 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-vendors-style-rtl.css 1.28 kB
build/wc-blocks-vendors-style.css 1.28 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

@gigitux gigitux mentioned this pull request Jan 13, 2022
18 tasks
@gigitux gigitux removed the status: blocked The issue is blocked from progressing, waiting for another piece of work to be done. label Feb 7, 2022
Copy link
Contributor

@tjcafferkey tjcafferkey left a comment

Choose a reason for hiding this comment

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

This works great for me and the code LGTM too. My only problem is from a UX perspective, at first I thought the "Border radius" option was missing on the Site Editor because it was hidden behind "Layout" instead of being alongside "Typography' like on the Edit Page view:

Edit Page
Screenshot 2022-02-10 at 10 40 31

Site Editor
Screenshot 2022-02-10 at 10 40 41

@github-actions github-actions bot added this to the 7.0.0 milestone Feb 10, 2022
@gigitux
Copy link
Contributor Author

gigitux commented Feb 14, 2022

This works great for me and the code LGTM too. My only problem is from a UX perspective, at first I thought the "Border radius" option was missing on the Site Editor because it was hidden behind "Layout" instead of being alongside "Typography' like on the Edit Page view:

Edit Page Screenshot 2022-02-10 at 10 40 31

Site Editor Screenshot 2022-02-10 at 10 40 41

Thanks for the review!

Good point. Unfortunately, this UI/UX is handled by Gutenberg :/

@gigitux gigitux merged commit f9ca1a2 into trunk Feb 14, 2022
@gigitux gigitux deleted the add/4965-image branch February 14, 2022 10:57
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: single product Issues related to the single product block. focus: global styles Issues that involve styles/css/layout structure. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants