Add global styles to Product Title block

[dinhtungdu]

Fixes #4919

This PR:

• Replaces custom text color and font size with Block Supports.
• Adds global style support.
• Update the title block to use apiVersion: 2.

Screenshots

Block setting:

Global style:

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:

0. Activate and update Gutenberg to the latest trunk commit.
1. In a classic theme (ie: Storefront):
   1. Add the All Products block to a post or page.
   2. Verify you can change the text color and font size of the loop item title.
   3. Verify that the style work on both front-end and the block's View mode/Edit mode.
2. In a block-based theme (ie: TT1 Blocks):
   1. Go to Appearance > Site editor, click on the Styles icon and verify the Product Title block is shown and you can tweak its styles:
      
   2. Add the All Products block to a post or page.
   3. Verify it honors the styles you set in the Site editor.
   4. Change the styles in the post/page editor and verify they have priority over the styles from the Site editor.

Changelog

Added global styles (text color and font size) to Product Title block.

[github-actions]

Size Change: +716 B (0%)

Total Size: 1.1 MB

Filename	Size	Change
build/active-filters-frontend.js	8.32 kB	-2 B (0%)
build/active-filters.js	8.01 kB	-3 B (0%)
build/all-products-frontend.js	23.3 kB	+1 B (0%)
build/all-products.js	38 kB	+175 B (0%)
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js	3.19 kB	-2 B (0%)
build/atomic-block-components/add-to-cart--atomic-block-components/button.js	1.81 kB	-1 B (0%)
build/atomic-block-components/add-to-cart-frontend.js	8.51 kB	-2 B (0%)
build/atomic-block-components/add-to-cart.js	7.84 kB	-2 B (0%)
build/atomic-block-components/button-frontend.js	1.75 kB	+1 B (0%)
build/atomic-block-components/button.js	875 B	+1 B (0%)
build/atomic-block-components/category-list-frontend.js	465 B	+1 B (0%)
build/atomic-block-components/image-frontend.js	1.88 kB	-2 B (0%)
build/atomic-block-components/price.js	2.11 kB	+1 B (0%)
build/atomic-block-components/rating-frontend.js	562 B	+1 B (0%)
build/atomic-block-components/rating.js	565 B	-1 B (0%)
build/atomic-block-components/sale-badge.js	869 B	+1 B (0%)
build/atomic-block-components/sku-frontend.js	391 B	-1 B (0%)
build/atomic-block-components/sku.js	392 B	-1 B (0%)
build/atomic-block-components/summary-frontend.js	907 B	-1 B (0%)
build/atomic-block-components/summary.js	913 B	+2 B (0%)
build/atomic-block-components/title-frontend.js	1.63 kB	+83 B (+5%)	🔍
build/atomic-block-components/title.js	1.46 kB	+83 B (+6%)	🔍
build/attribute-filter-frontend.js	18.3 kB	-2 B (0%)
build/attribute-filter.js	12.1 kB	-5 B (0%)
build/cart-blocks/checkout-button-frontend.js	1.24 kB	+1 B (0%)
build/cart-blocks/express-payment--checkout-blocks/express-payment--checkout-blocks/payment-frontend.js	4.72 kB	+1 B (0%)
build/cart-blocks/express-payment-frontend.js	1.58 kB	-2 B (0%)
build/cart-blocks/filled-cart-frontend.js	807 B	-1 B (0%)
build/cart-blocks/items-frontend.js	302 B	-1 B (0%)
build/cart-blocks/line-items-frontend.js	5.86 kB	+47 B (+1%)
build/cart-blocks/order-summary-frontend.js	7.41 kB	-5 B (0%)
build/cart-blocks/totals-frontend.js	324 B	+2 B (+1%)
build/cart.js	50.6 kB	+91 B (0%)
build/checkout-blocks/actions-frontend.js	1.51 kB	+1 B (0%)
build/checkout-blocks/billing-address-frontend.js	2.66 kB	-1 B (0%)
build/checkout-blocks/contact-information-frontend.js	3.89 kB	-2 B (0%)
build/checkout-blocks/express-payment-frontend.js	1.92 kB	-1 B (0%)
build/checkout-blocks/order-note-frontend.js	1.56 kB	+2 B (0%)
build/checkout-blocks/order-summary-frontend.js	12.8 kB	+63 B (0%)
build/checkout-blocks/payment-frontend.js	4.58 kB	-3 B (0%)
build/checkout-blocks/shipping-address-frontend.js	3.06 kB	+2 B (0%)
build/checkout-blocks/shipping-methods-frontend.js	5.56 kB	-2 B (0%)
build/checkout-frontend.js	55.1 kB	+1 B (0%)
build/checkout.js	54 kB	+59 B (0%)
build/featured-product.js	9.43 kB	-1 B (0%)
build/handpicked-products.js	6.27 kB	+5 B (0%)
build/mini-cart-component-frontend.js	37 kB	+51 B (0%)
build/mini-cart.js	5.29 kB	+2 B (0%)
build/price-filter-frontend.js	14.4 kB	-2 B (0%)
build/price-filter.js	9.65 kB	-2 B (0%)
build/product-category.js	7.49 kB	+2 B (0%)
build/product-new.js	6.77 kB	-2 B (0%)
build/product-on-sale.js	7.13 kB	-1 B (0%)
build/product-search.js	2.68 kB	+1 B (0%)
build/product-tag.js	6.59 kB	-1 B (0%)
build/products-by-attribute.js	7.71 kB	-2 B (0%)
build/reviews-by-category.js	11.5 kB	-4 B (0%)
build/reviews-by-product.js	13 kB	-1 B (0%)
build/reviews-frontend.js	8.95 kB	-4 B (0%)
build/single-product-frontend.js	26.5 kB	+2 B (0%)
build/single-product.js	9.78 kB	+8 B (0%)
build/stock-filter.js	7.81 kB	-4 B (0%)
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js	16.1 kB	-4 B (0%)
build/vendors--atomic-block-components/add-to-cart-frontend.js	4.78 kB	-2 B (0%)
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js	5.03 kB	+1 B (0%)
build/wc-blocks-style-rtl.css	20.7 kB	+37 B (0%)
build/wc-blocks-style.css	20.6 kB	+37 B (0%)
build/wc-blocks-vendors.js	254 kB	+24 B (0%)
build/wc-blocks.js	3.49 kB	-1 B (0%)

ℹ️ View Unchanged

Filename	Size
build/all-reviews.js	9.57 kB
build/atomic-block-components/add-to-cart--atomic-block-components/image--atomic-block-components/title.js	332 B
build/atomic-block-components/category-list.js	470 B
build/atomic-block-components/image.js	1.35 kB
build/atomic-block-components/price-frontend.js	2.14 kB
build/atomic-block-components/sale-badge-frontend.js	859 B
build/atomic-block-components/stock-indicator-frontend.js	611 B
build/atomic-block-components/stock-indicator.js	611 B
build/atomic-block-components/tag-list-frontend.js	466 B
build/atomic-block-components/tag-list.js	471 B
build/blocks-checkout.js	21.1 kB
build/cart-blocks/accepted-payment-methods-frontend.js	1.39 kB
build/cart-blocks/empty-cart-frontend.js	349 B
build/cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js	3.69 kB
build/cart-frontend.js	52.8 kB
build/checkout-blocks/fields-frontend.js	347 B
build/checkout-blocks/terms-frontend.js	1.65 kB
build/checkout-blocks/totals-frontend.js	330 B
build/featured-category.js	7.74 kB
build/mini-cart-frontend.js	2.32 kB
build/price-format.js	1.37 kB
build/product-best-sellers.js	6.63 kB
build/product-categories.js	3.37 kB
build/product-top-rated.js	6.74 kB
build/stock-filter-frontend.js	8.76 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.1 kB
build/wc-blocks-data.js	11.3 kB
build/wc-blocks-editor-style-rtl.css	15.6 kB
build/wc-blocks-editor-style.css	15.6 kB
build/wc-blocks-google-analytics.js	1.98 kB
build/wc-blocks-middleware.js	1.47 kB
build/wc-blocks-registry.js	3.71 kB
build/wc-blocks-shared-context.js	1.54 kB
build/wc-blocks-shared-hocs.js	1.75 kB
build/wc-blocks-vendors-style-rtl.css	1.37 kB
build/wc-blocks-vendors-style.css	1.37 kB
build/wc-payment-method-bacs.js	806 B
build/wc-payment-method-cheque.js	806 B
build/wc-payment-method-cod.js	898 B
build/wc-payment-method-paypal.js	839 B
build/wc-payment-method-stripe.js	12.2 kB
build/wc-settings.js	2.91 kB

_{compressed-size-action}

[Aljullu]

LGTM

I left one minor comment, but once fixed, let's merge it, it's great to be able to remove almost a hundred lines! 🥳

[Aljullu]

Wondering if we should add the skip-changelog label to this PR. From a user perspective, there isn't any change, right? They can modify the styles, but that was also possible before. The change is mostly an internal refactor to rely on the standard way of doing so.