Update innerBlock template for Featured Product and Featured Category blocks

[gigitux]

This PR updates the inner block template for Featured Product and Featured Category. This is necessary because a button block should have as the parent the buttons block. In this way, the user is able to customize again:

• font-size
• width settings

NOTE: The width is customizable only when the alignment is set to none. This is the default behavior on Gutenberg.

Fixes #5676

Screenshots

Testing

Manual Testing

How to test the changes in this Pull Request:

1. Add a Featured Product or Featured Category block to a post or page.
2. Click on the inner button.
3. Try changing the Typography size.
4. Set alignment to none and change the width.
5. Check that the changes are visible on the editor side and frontend side.

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

Changelog

Featured Category and Featured Product: fix width and font size customization for the inner button block.

[github-actions]

Size Change: +14 B (0%)

Total Size: 816 kB

Filename	Size	Change
build/featured-category.js	8.61 kB	+7 B (0%)
build/featured-product.js	9.63 kB	+7 B (0%)

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	6.37 kB
build/active-filters.js	7.05 kB
build/all-products-frontend.js	18.7 kB
build/all-products.js	34.3 kB
build/all-reviews.js	8.06 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/catego--214e300a.js	255 B
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js	2.7 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	6.94 kB
build/atomic-block-components/add-to-cart.js	6.51 kB
build/atomic-block-components/button-frontend.js	1.54 kB
build/atomic-block-components/button.js	912 B
build/atomic-block-components/category-list--atomic-block-components/image--atomic-block-components/ratin--2614069e.js	466 B
build/atomic-block-components/category-list-frontend.js	826 B
build/atomic-block-components/category-list.js	500 B
build/atomic-block-components/image-frontend.js	1.77 kB
build/atomic-block-components/image.js	1.1 kB
build/atomic-block-components/price-frontend.js	1.74 kB
build/atomic-block-components/price.js	1.69 kB
build/atomic-block-components/rating-frontend.js	1.04 kB
build/atomic-block-components/rating.js	719 B
build/atomic-block-components/sale-badge-frontend.js	1 kB
build/atomic-block-components/sale-badge.js	685 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	942 B
build/atomic-block-components/stock-indicator.js	622 B
build/atomic-block-components/summary-frontend.js	1.24 kB
build/atomic-block-components/summary.js	923 B
build/atomic-block-components/tag-list-frontend.js	825 B
build/atomic-block-components/tag-list.js	499 B
build/atomic-block-components/title-frontend.js	1.21 kB
build/atomic-block-components/title.js	934 B
build/attribute-filter-frontend.js	16.8 kB
build/attribute-filter.js	13 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.16 kB
build/cart-blocks/empty-cart-frontend.js	345 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	299 B
build/cart-blocks/line-items-frontend.js	5.49 kB
build/cart-blocks/order-summary-frontend.js	8.87 kB
build/cart-blocks/totals-frontend.js	320 B
build/cart-frontend.js	45.6 kB
build/cart.js	43.7 kB
build/checkout-blocks/actions-frontend.js	1.41 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js	4.22 kB
build/checkout-blocks/billing-address-frontend.js	888 B
build/checkout-blocks/contact-information-frontend.js	2.94 kB
build/checkout-blocks/express-payment-frontend.js	5.46 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.3 kB
build/checkout-blocks/payment-frontend.js	7.75 kB
build/checkout-blocks/shipping-address-frontend.js	976 B
build/checkout-blocks/shipping-methods-frontend.js	4.81 kB
build/checkout-blocks/terms-frontend.js	1.22 kB
build/checkout-blocks/totals-frontend.js	324 B
build/checkout-frontend.js	47.7 kB
build/checkout.js	45.2 kB
build/handpicked-products.js	7.09 kB
build/legacy-template.js	2.18 kB
build/mini-cart-component-frontend.js	14.3 kB
build/mini-cart-contents.js	3.83 kB
build/mini-cart-frontend.js	1.81 kB
build/mini-cart.js	6.39 kB
build/price-filter-frontend.js	12.6 kB
build/price-filter.js	8.51 kB
build/price-format.js	1.18 kB
build/product-best-sellers.js	7.37 kB
build/product-categories.js	3.17 kB
build/product-category.js	8.49 kB
build/product-new.js	7.66 kB
build/product-on-sale.js	7.99 kB
build/product-search.js	2.18 kB
build/product-tag.js	7.81 kB
build/product-top-rated.js	7.9 kB
build/products-by-attribute.js	8.39 kB
build/reviews-by-category.js	11.5 kB
build/reviews-by-product.js	12.6 kB
build/reviews-frontend.js	7.34 kB
build/single-product-frontend.js	22.2 kB
build/single-product.js	10 kB
build/stock-filter-frontend.js	6.61 kB
build/stock-filter.js	6.69 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--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-editor-style-rtl.css	4.85 kB
build/wc-blocks-editor-style.css	4.85 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	22.2 kB
build/wc-blocks-style.css	22.2 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	69.7 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}

[tomasztunik]

Nice! This also fixed a bug where align: center was ignored in the Editor and the block was misaligned as seen on the screenshot here #5886.

While trying to see if this would fix it I've noticed that setting button width (25, 50, 75, 100%) doesn't work and it's now either full width or centred regardless of the option selected seen the note

[tomasztunik]

👌 looks good

To get the align and width to work we have to set align to none and use justify setting to control left | center | right position