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

Fix product element styling class names #3095

Merged
merged 5 commits into from Sep 1, 2020
Merged

Conversation

Aljullu
Copy link
Contributor

@Aljullu Aljullu commented Sep 1, 2020

Fixes #3093.
Fixes #3094.

Screenshots

Peek 2020-09-01 12-13

How to test the changes in this Pull Request:

  1. Create a page with the All Products block.
  2. Edit it and click on the Product title.
  3. In the sidebar, change the color and font size. In the toolbar, change the alignment.
  4. Verify all styles are applied correctly.
  5. Toggle the 'Link to Product Page' attribute and verify styles are still applied.
  6. Click on 'Update' and preview the page in the frontend.
  7. Verify styles are applied there as well.

It would be good to test two additional blocks to make sure there are no regressions:

  1. While editing the All Products block, click on the Product price.
  2. In the sidebar, change the colors and font size. In the toolbar, change the alignment.
  3. Verify all styles are applied correctly.
  4. Now click on the product image block and change the 'Sale Badge Alignment' attribute.
  5. Verify the 'Sale Badge' changes its position according to the attribute.
  6. Click on 'Update' and preview the page in the frontend.
  7. Verify styles are applied there as well.

cc @haszari I'm adding this to the 3.3.0 milestone in case you want to include it, but feel free to move it to 3.4.0 if you don't want to rush this fix.

Changelog

Fixed styling options of the Product Title block.

@Aljullu Aljullu added this to the 3.3.0 milestone Sep 1, 2020
@Aljullu Aljullu requested a review from a team as a code owner September 1, 2020 10:25
@Aljullu Aljullu self-assigned this Sep 1, 2020
@Aljullu Aljullu requested review from senadir and removed request for a team September 1, 2020 10:25
@github-actions
Copy link
Contributor

github-actions bot commented Sep 1, 2020

Size Change: +6 B (0%)

Total Size: 1.11 MB

Filename Size Change
build/atomic-block-components/image-frontend.js 1.71 kB +1 B
build/atomic-block-components/price-frontend.js 2.1 kB +1 B
build/atomic-block-components/price.js 2.13 kB +2 B (0%)
build/atomic-block-components/sale-badge.js 865 B +1 B
build/atomic-block-components/title-frontend.js 1.23 kB +7 B (0%)
build/atomic-block-components/title.js 1.06 kB +5 B (0%)
build/style-rtl.css 18 kB -5 B (0%)
build/style.css 18 kB -6 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/active-filters-frontend.js 8.78 kB 0 B
build/active-filters.js 8.85 kB 0 B
build/all-products-frontend.js 31.2 kB 0 B
build/all-products.js 35.7 kB 0 B
build/all-reviews.js 9.79 kB 0 B
build/atomic-block-components/add-to-cart-frontend.js 8.89 kB 0 B
build/atomic-block-components/add-to-cart.js 7.46 kB 0 B
build/atomic-block-components/add-to-cart~atomic-block-components/button.js 3.16 kB 0 B
build/atomic-block-components/add-to-cart~atomic-block-components/image~atomic-block-components/title.js 335 B 0 B
build/atomic-block-components/button-frontend.js 2.02 kB 0 B
build/atomic-block-components/button.js 835 B 0 B
build/atomic-block-components/category-list-frontend.js 469 B 0 B
build/atomic-block-components/category-list.js 475 B 0 B
build/atomic-block-components/image.js 1.15 kB 0 B
build/atomic-block-components/rating-frontend.js 524 B 0 B
build/atomic-block-components/rating.js 527 B 0 B
build/atomic-block-components/sale-badge-frontend.js 863 B 0 B
build/atomic-block-components/sku-frontend.js 389 B 0 B
build/atomic-block-components/sku.js 394 B 0 B
build/atomic-block-components/stock-indicator-frontend.js 568 B 0 B
build/atomic-block-components/stock-indicator.js 571 B 0 B
build/atomic-block-components/summary-frontend.js 918 B 0 B
build/atomic-block-components/summary.js 925 B 0 B
build/atomic-block-components/tag-list-frontend.js 466 B 0 B
build/atomic-block-components/tag-list.js 472 B 0 B
build/attribute-filter-frontend.js 18.1 kB 0 B
build/attribute-filter.js 12.4 kB 0 B
build/blocks.js 3.54 kB 0 B
build/cart-frontend.js 69 kB 0 B
build/cart.js 37.4 kB 0 B
build/checkout-frontend.js 84.2 kB 0 B
build/checkout.js 40.8 kB 0 B
build/editor-rtl.css 13.9 kB 0 B
build/editor.css 13.9 kB 0 B
build/featured-category.js 7.72 kB 0 B
build/featured-product.js 9.97 kB 0 B
build/handpicked-products.js 7.37 kB 0 B
build/price-filter-frontend.js 14.4 kB 0 B
build/price-filter.js 10.3 kB 0 B
build/product-best-sellers.js 7.44 kB 0 B
build/product-categories.js 3.23 kB 0 B
build/product-category.js 8.38 kB 0 B
build/product-new.js 7.6 kB 0 B
build/product-on-sale.js 7.99 kB 0 B
build/product-search.js 3.56 kB 0 B
build/product-tag.js 6.52 kB 0 B
build/product-top-rated.js 7.57 kB 0 B
build/products-by-attribute.js 8.31 kB 0 B
build/reviews-by-category.js 11.8 kB 0 B
build/reviews-by-product.js 13.4 kB 0 B
build/reviews-frontend.js 9.37 kB 0 B
build/single-product-frontend.js 34 kB 0 B
build/single-product.js 10.1 kB 0 B
build/vendors-style-rtl.css 1.03 kB 0 B
build/vendors-style.css 1.03 kB 0 B
build/vendors.js 416 kB 0 B
build/vendors~atomic-block-components/price-frontend.js 5.65 kB 0 B
build/wc-blocks-data.js 7.09 kB 0 B
build/wc-blocks-middleware.js 931 B 0 B
build/wc-blocks-registry.js 2.28 kB 0 B
build/wc-payment-method-bacs.js 790 B 0 B
build/wc-payment-method-cheque.js 787 B 0 B
build/wc-payment-method-cod.js 875 B 0 B
build/wc-payment-method-paypal.js 831 B 0 B
build/wc-payment-method-stripe.js 11.9 kB 0 B
build/wc-settings.js 2.33 kB 0 B
build/wc-shared-context.js 1.53 kB 0 B
build/wc-shared-hocs.js 1.66 kB 0 B

compressed-size-action

Copy link
Member

@senadir senadir left a comment

Choose a reason for hiding this comment

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

works like a sharm.

Comment on lines +2 to 9
.wc-block-components-product-price--align-left {
text-align: left;
}
.wc-block-components-product-price__align-center {
.wc-block-components-product-price--align-center {
text-align: center;
}
.wc-block-components-product-price__align-right {
.wc-block-components-product-price--align-right {
text-align: right;
Copy link
Member

Choose a reason for hiding this comment

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

this change is unrelated to the issue, right? just styling fixes?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, I wanted to align all class names to follow the same pattern (-- instead of __) even in blocks where there was not an issue.

@Aljullu Aljullu merged commit cdc95c5 into main Sep 1, 2020
@Aljullu Aljullu deleted the fix/product-element-styles branch September 1, 2020 14:52
@haszari
Copy link
Member

haszari commented Sep 1, 2020

cc @haszari I'm adding this to the 3.3.0 milestone in case you want to include it, but feel free to move it to 3.4.0 if you don't want to rush this fix.

Thanks @Aljullu - this seems like a fairly safe, robust change, so I'm going to include it. I'll cherry pick into the release branch and do another round of testing with the built plugin.

When reviewing the code in this PR and the element blocks, I noticed that some of the styling is hidden behind feature flag. So I'm keen to do a good round of testing with release build to check behaviour is as expected.

Examples:

haszari pushed a commit that referenced this pull request Sep 1, 2020
* Update sale badge align class names to match other element blocks

* Update product price align class names to match other element blocks

* Fix Product title alignment class names. Fixes #3094

* Make styling attributes apply to Product title block when it's not a link. Fixes #3093

* Linting fixes
haszari added a commit that referenced this pull request Sep 1, 2020
@github-actions github-actions bot mentioned this pull request Sep 1, 2020
19 tasks
@haszari
Copy link
Member

haszari commented Sep 2, 2020

I found one regression/issue (maybe preexisting) in Twenty Twenty when testing this, logged a follow up issue: #3097

haszari added a commit that referenced this pull request Sep 2, 2020
* generating changeset for pull request

* generating changeset for pull request

* 3.3.0 changelog + add woocommerce contributor (#3067)

* update min required WooCommerce - 4.2 (out of date!)

* require Woo 4.2+ min (L-2 policy)

* draft test instructions for new feature in 3.3.0

* add testing instructions for 3.3.0 bug fixes

* update TOC for testing instructions and add MIA 3.0-3.2 (!)

* add convenient zip file download to testing instructions

* update zip file - missed `composer install --no-dev` step

* clarify testing instructions for product price block +
+ remove mention of MIA screenshots

* retroactively add release notes for all products child block customization options

* add testing instructions for all products child block changes (3.1.0) +
+ use changelog note for testing headings

* Fix product element styling class names (#3095)

* Update sale badge align class names to match other element blocks

* Update product price align class names to match other element blocks

* Fix Product title alignment class names. Fixes #3094

* Make styling attributes apply to Product title block when it's not a link. Fixes #3093

* Linting fixes

* add changelog note for #3095 + use standard changelog prefixes

* update release date

* update zip file link (new test build ft. #3095)

* Bumping version strings to new version.

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Rua Haszard <rua.haszard@automattic.com>
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
@github-actions github-actions bot mentioned this pull request Sep 2, 2020
19 tasks
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
4 participants