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

Restore correct font style when the block is loaded in the editor #5600

Merged
merged 2 commits into from
Jan 20, 2022

Conversation

gigitux
Copy link
Contributor

@gigitux gigitux commented Jan 19, 2022

#5595 has introduced a different font style for the Product Title block when the All Product block is loaded in the editor.
This PR restores the correct font style.

Screenshots

image
#5595 introduce a different font style from our current style

image
this PR restores the correct style

How to test the changes in this Pull Request:

  1. Upgrade to WordPress 5.9.
  2. Install and enable the Twenty Twenty-Two theme.
  3. Add the All Product Block (this block contains Product Title block) to a post. Check that the font style looks like the second image.
  4. Click on the pencil to edit the block and get the focus on the Product Title block.
  5. On the right sidebar, personalize the styles of the block.
  6. Check that the changes are applied to the block in the editor.
  7. 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. Click on the pencil to edit the block, add the Product Title block.
  8. On the Editor page click on the Styles icon on the right-top corner.
  9. Verify that the Product Title block is shown under the Blocks section. Personalize the block.
  10. Check that the changes are applied to the block in the editor.

Restore correct font style when the block is loaded in the editor
@gigitux gigitux added type: bug The issue/PR concerns a confirmed bug. focus: global styles Issues that involve styles/css/layout structure. block-type: product elements Issues related to Product Element blocks. labels Jan 19, 2022
@gigitux gigitux requested a review from nielslange January 19, 2022 19:54
@gigitux gigitux self-assigned this Jan 19, 2022
@rubikuserbot rubikuserbot requested review from a team and sunyatasattva and removed request for a team January 19, 2022 19:54
@github-actions
Copy link
Contributor

github-actions bot commented Jan 19, 2022

Size Change: +153 B (0%)

Total Size: 815 kB

Filename Size Change
build/active-filters.js 7.1 kB -3 B (0%)
build/all-products.js 35.2 kB +14 B (0%)
build/all-reviews.js 8.39 kB -1 B (0%)
build/atomic-block-components/add-to-cart.js 6.61 kB +2 B (0%)
build/atomic-block-components/button.js 851 B +3 B (0%)
build/atomic-block-components/category-list.js 460 B +3 B (+1%)
build/atomic-block-components/image.js 1.05 kB +2 B (0%)
build/atomic-block-components/price.js 1.7 kB +3 B (0%)
build/atomic-block-components/rating.js 700 B +1 B (0%)
build/atomic-block-components/sku.js 386 B +3 B (+1%)
build/atomic-block-components/stock-indicator.js 626 B +2 B (0%)
build/atomic-block-components/summary.js 925 B +2 B (0%)
build/atomic-block-components/tag-list.js 459 B +2 B (0%)
build/atomic-block-components/title-frontend.js 1.2 kB +35 B (+3%)
build/atomic-block-components/title.js 932 B +35 B (+4%)
build/attribute-filter.js 12.7 kB +2 B (0%)
build/cart.js 44.5 kB +5 B (0%)
build/checkout.js 47.1 kB +9 B (0%)
build/price-filter.js 8.92 kB -1 B (0%)
build/reviews-by-category.js 11.9 kB -1 B (0%)
build/reviews-by-product.js 12.9 kB -2 B (0%)
build/single-product-frontend.js 22.1 kB -1 B (0%)
build/single-product.js 10.5 kB -1 B (0%)
build/stock-filter.js 6.82 kB -1 B (0%)
build/wc-blocks-editor-style-rtl.css 4.62 kB +21 B (0%)
build/wc-blocks-editor-style.css 4.62 kB +20 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 6.21 kB
build/all-products-frontend.js 18.6 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---8f355022.js 238 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/add-to-cart--atomic-block-components/button.js 1.48 kB
build/atomic-block-components/add-to-cart-frontend.js 7.05 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/image-frontend.js 1.37 kB
build/atomic-block-components/price-frontend.js 1.74 kB
build/atomic-block-components/rating-frontend.js 699 B
build/atomic-block-components/sale-badge-frontend.js 624 B
build/atomic-block-components/sale-badge.js 622 B
build/atomic-block-components/sku-frontend.js 386 B
build/atomic-block-components/stock-indicator--atomic-block-components/summary--atomic-block-components/title.js 451 B
build/atomic-block-components/stock-indicator-frontend.js 924 B
build/atomic-block-components/summary-frontend.js 1.22 kB
build/atomic-block-components/tag-list-frontend.js 460 B
build/attribute-filter-frontend.js 16.3 kB
build/blocks-checkout.js 17.6 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.14 kB
build/cart-blocks/checkout-button-frontend.js 1.14 kB
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/express-payment-frontend.js 4.86 kB
build/cart-blocks/filled-cart-frontend.js 767 B
build/cart-blocks/items-frontend.js 299 B
build/cart-blocks/line-items-frontend.js 5.49 kB
build/cart-blocks/order-summary-frontend.js 8.97 kB
build/cart-blocks/totals-frontend.js 321 B
build/cart-frontend.js 45.4 kB
build/checkout-blocks/actions-frontend.js 1.44 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.22 kB
build/checkout-blocks/billing-address-frontend.js 887 B
build/checkout-blocks/contact-information-frontend.js 2.94 kB
build/checkout-blocks/express-payment-frontend.js 5.15 kB
build/checkout-blocks/fields-frontend.js 344 B
build/checkout-blocks/order-note-frontend.js 1.13 kB
build/checkout-blocks/order-summary-frontend.js 11.4 kB
build/checkout-blocks/payment-frontend.js 7.39 kB
build/checkout-blocks/shipping-address-frontend.js 973 B
build/checkout-blocks/shipping-methods-frontend.js 4.81 kB
build/checkout-blocks/terms-frontend.js 1.21 kB
build/checkout-blocks/totals-frontend.js 324 B
build/checkout-frontend.js 47.5 kB
build/featured-category.js 8.55 kB
build/featured-product.js 9.9 kB
build/handpicked-products.js 7.33 kB
build/legacy-template.js 2.35 kB
build/mini-cart-component-frontend.js 14.2 kB
build/mini-cart-contents.js 3.59 kB
build/mini-cart-frontend.js 1.76 kB
build/mini-cart.js 6.46 kB
build/price-filter-frontend.js 12.6 kB
build/price-format.js 1.18 kB
build/product-best-sellers.js 7.54 kB
build/product-categories.js 3.47 kB
build/product-category.js 8.68 kB
build/product-new.js 7.99 kB
build/product-on-sale.js 8.37 kB
build/product-search.js 2.47 kB
build/product-tag.js 8.08 kB
build/product-top-rated.js 7.96 kB
build/products-by-attribute.js 8.79 kB
build/reviews-frontend.js 7.29 kB
build/stock-filter-frontend.js 6.81 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.44 kB
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary--checkout--8a3571de-frontend.js 5.71 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-style-rtl.css 21.7 kB
build/wc-blocks-style.css 21.7 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 65.5 kB
build/wc-blocks.js 2.96 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
Member

@nielslange nielslange left a comment

Choose a reason for hiding this comment

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

The fix works both for Twenty Twenty-Two, Twenty Twenty-One and Twenty Nineteen, but does not seem to work for Twenty Twenty:

Twenty Twenty-Two:

#5600-2022

Twenty Twenty-One:

#5600-2021

Twenty Twenty:

#5600-2020

Twenty Nineteen:

#5600-2019

Maybe we can add some theme-specific styles here:

https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/1ae0188932130de79a4d6c9c39222f1e96a1c19a/assets/css/editor.scss#L73-L83

@gigitux
Copy link
Contributor Author

gigitux commented Jan 20, 2022

Thanks for your great review!

I thought that restoring these two lines should be fine.

@gigitux gigitux requested a review from nielslange January 20, 2022 08:42
Copy link
Member

@nielslange nielslange 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 charm now! 🙌 Let's 🚢 it!

@github-actions github-actions bot added this to the 6.8.0 milestone Jan 20, 2022
@gigitux gigitux merged commit 25464fd into trunk Jan 20, 2022
@gigitux gigitux deleted the fix/initial-font-product-title branch January 20, 2022 09:02
gigitux added a commit that referenced this pull request Jan 20, 2022
)

* Restore correct font style when the block is loaded in the editor

Restore correct font style when the block is loaded in the editor

* fix style on Twenty Twenty theme
gigitux added a commit that referenced this pull request Jan 20, 2022
* Empty commit for release pull request

* Update readme.txt with 6.8.0 changelog

* initialize_session if it does not yet exist before calling the session class (#5577)

* Add testing notes for 6.8.0

* update testing release notes

* update testing notes

* Fix default `stockStatusOptions` in tag and attribute blocks (#5590)

* Fix default stockStatusOptions in tag and attribute blocks

These should be an array of keys, not objects.

* Fix stockStatus definition on PHP side

* Swap state to debounce.

* Improve presentation of stock filters

* Remove state usage for display options

* Remove debounce

* Consistent panel titles

* Fix global style for Product Summary block, Product Stock Indicator block, and Product Title block (#5595)

* Fix global style for Product Summary block, Product Stock Indicator block, and ProductTitle block

Fix global style for Product Summary block, Product Stock Indicator block, and ProductTitle block

* add feature flag

* fix lint errors

* fix global style bugs on Product Title block

* update testing release notes

* update new build with fixes

* Restore correct font style when the block is loaded in the editor (#5600)

* Restore correct font style when the block is loaded in the editor

Restore correct font style when the block is loaded in the editor

* fix style on Twenty Twenty theme

* update link for download the zip of the new release

* update readme.txt

* Bumping version strings to new version.

Co-authored-by: github-actions <[email protected]>
Co-authored-by: Luigi <[email protected]>
Co-authored-by: Mike Jolley <[email protected]>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block-type: product elements Issues related to Product Element blocks. focus: global styles Issues that involve styles/css/layout structure. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants