Release: 10.4.2 (#9784)

* Empty commit for release pull request

* Update Hero Product 3-split pattern image

* Update Banner Pattern To Replace Unsplash Image (#9760)

* Update Banner to replace Unsplash image.

Replaces the Unsplash image with a CCO licensed image from Pxhere. Also
updates the CTA button to link to the Shop page, by default.

* Remove extra padding from top of test column.

Vertical alignment was off on the text column due to 60px of top
padding. This aligns everythign, as expected.

* Update Chessboard pattern images (#9761)

* Updathe the Hero Product Split (#9762)

* Remove unused pattern image (#9763)

* Update Images for the Product Details Patterns (#9764)

* Update image for the Product Hero pattern.

Replace the Unsplash image with a CCO licensed image from Pxhere.

* Update images for Prod List Gallery Desc pattern

Replace the Unsplash image with a CCO licensed image from Pxhere for the
Product Listing with Gallery and Description pattern.

* Remove unneeded Unsplash images.

* Update copy for Prod Listing Gallery Desc pattern.

* Optimize new image exports.

* Update image for the Product Listing pattern.

Replace the Unsplash image with a CCO licensed image from Pxhere.

* Update images for Product Details pattern.

Replace the Unsplash images with CCO licensed images from Pxhere.

* Remove unneeded Unsplash image.

* Use Relative URLs for Images in the Product Listing Pattern

This commit replaces hardcoded URLs with dynamic ones for image placeholders in the `product-listing-with-gallery-and-description.php` pattern file.

- The `plugins_url()` function is now used to generate URLs, which correctly points to the images folder within the WooCommerce Blocks plugin directory. This approach provides better flexibility and portability since it doesn't rely on a specific domain or path. The `esc_url()` function is used to ensure the URL is safe to use in the HTML context.

- The change is made for a total of four images in the pattern.

---------

Co-authored-by: Manish Menaria <[email protected]>

* Update/patterns featured category product collection (#9765)

* Update image for featured category focus pattern

* Update image for featured category cover image pattern

* Update images for featured category triple pattern

* Change to wide width

* Update links to buttons

* Fix typo in hex color value.

There was an extra `f` in the hex color value, causing the text to
unexpectedly render black.

---------

Co-authored-by: Daniel W. Robert <[email protected]>

* Update/collection pattern images (#9766)

* Update featured collections images

* Add shop link to shop by price pattern

* Update hero product pattern title (#9769)

* Remove unused pattern image (#9770)

* Add 10.4.2 changelog in readme.txt

* Update version number to 10.4.2

* Add testing instructions for 10.4.2

* Add 9769 PR testing steps

* WooCommerce Classic Template block: Fix error on clearing customizations on Woo Templates (#9759)

* Fix Classic Template block error on clearing customizations on template

* Add link to issue in JS Doc

* Change the way of debug check of tests-mysql container (#9794)

* Add alt text to images used in patterns describing their purpose (#9788)

* Add alt text to images used in patterns describing their purpose

* Replace 1/3 notation with 1 out of 3, so it's better handled byt screen readers

* Update testing instructions to include 9759 PR

* Update zip to include 9759 PR

* Remove 9759 PR from testing instructions

---------

Co-authored-by: github-actions <[email protected]>
Co-authored-by: Alba Rincón <[email protected]>
Co-authored-by: Daniel W. Robert <[email protected]>
Co-authored-by: Alba Rincón <[email protected]>
Co-authored-by: Manish Menaria <[email protected]>
Co-authored-by: Roy Ho <[email protected]>
Co-authored-by: Daniel W. Robert <[email protected]>
Co-authored-by: Tarun Vijwani <[email protected]>
Co-authored-by: Alexandre Lara <[email protected]>
Co-authored-by: Karol Manijak <[email protected]>

.github/workflows/unit-tests.yml

@@ -118,7 +118,7 @@ jobs:
 
       - name: Docker container debug information
         run: |
-          npm run wp-env run tests-mysql "mysql --version"
+          npm run wp-env run tests-mysql mysql -- --version
           npm run wp-env run tests-wordpress "php --version"
           npm run wp-env run tests-wordpress "php -m"
           npm run wp-env run tests-wordpress "php -i"

assets/js/blocks/classic-template/index.tsx

@@ -7,6 +7,7 @@ import {
 	getBlockType,
 	registerBlockType,
 	unregisterBlockType,
+	parse,
 } from '@wordpress/blocks';
 import type { BlockEditProps } from '@wordpress/blocks';
 import { WC_BLOCKS_IMAGE_URL } from '@woocommerce/block-settings';
@@ -18,10 +19,17 @@ import {
 import { Button, Placeholder, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { box, Icon } from '@wordpress/icons';
-import { useDispatch, subscribe, useSelect, select } from '@wordpress/data';
+import {
+	useDispatch,
+	subscribe,
+	useSelect,
+	select,
+	dispatch,
+} from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { useEntityRecord } from '@wordpress/core-data';
+import { debounce } from '@woocommerce/base-utils';
 
 /**
  * Internal dependencies
@@ -333,6 +341,44 @@ const registerClassicTemplateBlock = ( {
 	} );
 };
 
+/**
+ * Attempts to recover the Classic Template block if it fails to render on the Single Product template
+ * due to the user resetting customizations without refreshing the page.
+ *
+ * When the Classic Template block fails to render, it is replaced by the 'core/missing' block, which
+ * displays an error message stating that the WooCommerce Classic template block is unsupported.
+ *
+ * This function replaces the 'core/missing' block with the original Classic Template block that failed
+ * to render, allowing the block to be displayed correctly.
+ *
+ * @see {@link https://github.com/woocommerce/woocommerce-blocks/issues/9637|Issue: Block error is displayed on clearing customizations for Woo Templates}
+ *
+ */
+const tryToRecoverClassicTemplateBlockWhenItFailsToRender = debounce( () => {
+	const blocks = select( 'core/block-editor' ).getBlocks();
+	const blocksIncludingInnerBlocks = blocks.flatMap( ( block ) => [
+		block,
+		...block.innerBlocks,
+	] );
+	const classicTemplateThatFailedToRender = blocksIncludingInnerBlocks.find(
+		( block ) =>
+			block.name === 'core/missing' &&
+			block.attributes.originalName === BLOCK_SLUG
+	);
+
+	if ( classicTemplateThatFailedToRender ) {
+		const blockToReplaceClassicTemplateBlockThatFailedToRender = parse(
+			classicTemplateThatFailedToRender.attributes.originalContent
+		);
+		if ( blockToReplaceClassicTemplateBlockThatFailedToRender ) {
+			dispatch( 'core/block-editor' ).replaceBlock(
+				classicTemplateThatFailedToRender.clientId,
+				blockToReplaceClassicTemplateBlockThatFailedToRender
+			);
+		}
+	}
+}, 100 );
+
 // @todo Refactor when there will be possible to show a block according on a template/post with a Gutenberg API. https://github.com/WordPress/gutenberg/pull/41718
 
 let currentTemplateId: string | undefined;
@@ -341,21 +387,28 @@ subscribe( () => {
 	const previousTemplateId = currentTemplateId;
 	const store = select( 'core/edit-site' );
 	currentTemplateId = store?.getEditedPostId() as string | undefined;
-
-	if ( previousTemplateId === currentTemplateId ) {
-		return;
-	}
-
 	const parsedTemplate = currentTemplateId?.split( '//' )[ 1 ];
 
 	if ( parsedTemplate === null || parsedTemplate === undefined ) {
 		return;
 	}
 
 	const block = getBlockType( BLOCK_SLUG );
+	const isBlockRegistered = Boolean( block );
+
+	if (
+		isBlockRegistered &&
+		hasTemplateSupportForClassicTemplateBlock( parsedTemplate, TEMPLATES )
+	) {
+		tryToRecoverClassicTemplateBlockWhenItFailsToRender();
+	}
+
+	if ( previousTemplateId === currentTemplateId ) {
+		return;
+	}
 
 	if (
-		block !== undefined &&
+		isBlockRegistered &&
 		( ! hasTemplateSupportForClassicTemplateBlock(
 			parsedTemplate,
 			TEMPLATES
@@ -371,12 +424,12 @@ subscribe( () => {
 	}
 
 	if (
-		block === undefined &&
+		! isBlockRegistered &&
 		hasTemplateSupportForClassicTemplateBlock( parsedTemplate, TEMPLATES )
 	) {
 		registerClassicTemplateBlock( {
 			template: parsedTemplate,
 			inserter: true,
 		} );
 	}
-} );
+}, 'core/blocks-editor' );

composer.json

@@ -3,7 +3,7 @@
 	"description": "WooCommerce blocks for the Gutenberg editor.",
 	"homepage": "https://woocommerce.com/",
 	"type": "wordpress-plugin",
-	"version": "10.4.0",
+	"version": "10.4.2",
 	"keywords": [
 		"gutenberg",
 		"woocommerce",

docs/internal-developers/testing/releases/1042.md

@@ -0,0 +1,113 @@
+# Testing notes and ZIP for release 10.4.2
+
+Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/11731631/woocommerce-gutenberg-products-block.zip)
+
+## WooCommerce Core
+
+### Update the Hero Product Split [#9762](https://github.com/woocommerce/woocommerce-blocks/pull/9762)
+
+1. From the editor (post, page, etc.) apply the `Hero Product Split` pattern.
+2. Confirm the image matches the "After" version in the screenshot in both the admin and the front end.
+
+| Before | After |
+| ------ | ----- |
+|<img width="1209" alt="Screenshot 2023-06-08 at 21 47 48" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/92ba194e-5014-45ad-830e-eb821d405239">|<img width="1238" alt="Screenshot 2023-06-08 at 21 49 12" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/1fc24a6b-7fc5-4c89-983f-d13ff4e703e7">|
+
+### Update hero patterns titles [#9769](https://github.com/woocommerce/woocommerce-blocks/pull/9769)
+
+1. On a new page or post, insert the `Hero product 3-split` pattern and make sure the h2 title says `Endless Tee's`.
+2. Insert the `Hero product chessboard` pattern and make sure the h3 title says `The Fall Collection`.
+3. Insert the `Hero product - split` pattern and make sure the h3 title says `Get cozy this fall with knit sweaters`.
+
+
+### Update Chessboard pattern images [#9761](https://github.com/woocommerce/woocommerce-blocks/pull/9761)
+
+1. From the editor (post, page, etc.) apply the `Hero Product Chessboard` pattern.
+2. Confirm the image matches the "After" version in the screenshot  in both the admin and the front end.
+
+| Before | After |
+| ------ | ----- |
+| <img width="1044" alt="Screenshot 2023-06-08 at 21 33 37" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/11e92d17-eb30-4419-bab6-96350394df30">| <img width="1075" alt="Screenshot 2023-06-08 at 21 33 03" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/df3f97b5-b026-4090-b692-8232ac211043">|
+
+
+### Update/collection pattern images [#9766](https://github.com/woocommerce/woocommerce-blocks/pull/9766)
+
+1. From the editor (post, page, etc.) apply the `Product Collections: Featured Collections` pattern.
+2. Confirm the image matches the "After" version in the screenshot in both the admin and the front end.
+3. Ensure all CTA links/buttons actually links to the Shop page.
+4. Add the `Shop by Price` pattern.
+5. Ensure all CTA links/buttons actually links to the Shop page.
+
+| Before | After |
+| ------ | ----- |
+|![file.png](https://github.com/woocommerce/woocommerce-blocks/assets/2132595/57fc7fa7-faf8-4ddf-9652-bba2aad9b98c)        |![file.png](https://github.com/woocommerce/woocommerce-blocks/assets/2132595/42db378d-3ac6-478d-b059-9c11584a593f)       |
+
+### Update Images for the Product Details Patterns [#9764](https://github.com/woocommerce/woocommerce-blocks/pull/9764)
+
+1. From the editor (post, page, etc.) apply each of the below patterns.
+2. Confirm the image matches the "After" version in the screenshots in both the admin and the front end.
+
+
+#### Product Hero
+
+| Before | After |
+| ------ | ----- |
+| ![CleanShot 2023-06-08 at 20 48 21](https://github.com/woocommerce/woocommerce-blocks/assets/481776/7d33a2fa-c959-483e-8e48-19ccb61d2cab) | ![CleanShot 2023-06-08 at 20 48 39](https://github.com/woocommerce/woocommerce-blocks/assets/481776/7a8c9a13-df7a-40b6-9456-9d13091f51c8) |
+
+#### Product Listing with Gallery and Description
+
+| Before | After |
+| ------ | ----- |
+| ![CleanShot 2023-06-08 at 21 41 43](https://github.com/woocommerce/woocommerce-blocks/assets/481776/863e35bb-3612-4630-be45-47e6cae7db6d) | ![CleanShot 2023-06-08 at 21 42 54](https://github.com/woocommerce/woocommerce-blocks/assets/481776/67c5f2b3-b3b8-47b9-b38d-b38a56ee731c) |
+
+#### Product Details: product listing
+
+| Before | After |
+| ------ | ----- |
+| ![CleanShot 2023-06-08 at 22 15 49](https://github.com/woocommerce/woocommerce-blocks/assets/481776/d0ba63d0-97a0-4d9c-bbad-ae851018c575) | ![CleanShot 2023-06-08 at 22 16 13](https://github.com/woocommerce/woocommerce-blocks/assets/481776/73fc630f-eaa3-4ba3-b7bd-259cf52a63f4) |
+
+#### Product Details Pattern
+
+| Before | After |
+| ------ | ----- |
+| ![CleanShot 2023-06-08 at 23 23 48](https://github.com/woocommerce/woocommerce-blocks/assets/481776/72648e8d-04ee-4b8b-a9c9-0101a1186abd) | ![CleanShot 2023-06-08 at 23 24 10](https://github.com/woocommerce/woocommerce-blocks/assets/481776/59420364-7dff-4e84-bdd5-a11974e6ed46) |
+
+
+### Update Banner Pattern To Replace Unsplash Image [#9760](https://github.com/woocommerce/woocommerce-blocks/pull/9760)
+
+1. From the editor (post, page, etc.) apply the `Banner` pattern.
+2. Confirm the image matches the "After" version in the screenshot in both the admin and the front end.
+3. Confirm the CTA button links to the Shop page on the front end.
+4. Confirm vertical spacing is fixed on the text column (extra padding on the top is removed).
+
+
+| Before | After |
+| ------ | ----- |
+| ![CleanShot 2023-06-08 at 15 15 25](https://github.com/woocommerce/woocommerce-blocks/assets/481776/6cc2d362-24e5-4a23-8694-511bc0e62fc4) | ![CleanShot 2023-06-08 at 15 34 37](https://github.com/woocommerce/woocommerce-blocks/assets/481776/338a024b-7bf1-4963-9206-9a84ceeb9077) |
+
+### Update/patterns featured category product collection [#9765](https://github.com/woocommerce/woocommerce-blocks/pull/9765)
+
+1. From the editor (post, page, etc.) apply the `Featured Category / Focus, Featured Category / Cover and Featured Category / Triple` pattern.
+2. Confirm the image matches the "After" version in the screenshot in both the admin and the front end.
+3. Ensure all CTA links/buttons actually links to the Shop page.
+
+
+#### Featured Category / Focused
+
+| Before | After |
+| ------ | ----- |
+|![file.png](https://github.com/woocommerce/woocommerce-blocks/assets/2132595/8e29acf0-305c-4de5-aa6f-7d608554dde5)        |![file.png](https://github.com/woocommerce/woocommerce-blocks/assets/2132595/f571a73c-f6c4-4198-b793-da0a29cc73e9)       |
+
+#### Featured Category / Cover image
+
+| Before | After |
+| ------ | ----- |
+|![file.png](https://github.com/woocommerce/woocommerce-blocks/assets/2132595/7346b9ff-c6fe-456b-93c0-722a411ac529)        |![file.png](https://github.com/woocommerce/woocommerce-blocks/assets/2132595/650f91bb-400a-441d-a6ea-29fd3d61a204)       |
+
+#### Featured Category / Triple
+
+| Before | After |
+| ------ | ----- |
+|![file.png](https://github.com/woocommerce/woocommerce-blocks/assets/2132595/c8b09fd1-0c5c-48eb-9be9-8545f35a37c1)        |![file.png](https://github.com/woocommerce/woocommerce-blocks/assets/2132595/cde1aaf7-0224-40df-93ce-ef1c5640537d)|
+
+

docs/internal-developers/testing/releases/README.md

@@ -150,6 +150,7 @@ Every release includes specific testing instructions for new features and bug fi
     -   [10.2.2](./1022.md)
 -   [10.3.0](./1030.md)
 -   [10.4.0](./1040.md)
+-   [10.4.2](./1042.md)
 <!-- FEEDBACK -->
 
 ---

package.json

@@ -2,7 +2,7 @@
 	"name": "@woocommerce/block-library",
 	"title": "WooCommerce Blocks",
 	"author": "Automattic",
-	"version": "10.4.0",
+	"version": "10.4.2",
 	"description": "WooCommerce blocks for the Gutenberg editor.",
 	"homepage": "https://github.com/woocommerce/woocommerce-gutenberg-products-block/",
 	"keywords": [

patterns/banner.php

@@ -8,8 +8,8 @@
 <!-- wp:group {"align":"wide","style":{"color":{"background":"#f9eddb","text":"#443127"},"spacing":{"padding":{"right":"50px","bottom":"50px","left":"50px","top":"50px"}}},"layout":{"type":"default"}} -->
 <div class="wp-block-group alignwide has-text-color has-background" style="color:#443127;background-color:#f9eddb;padding-top:50px;padding-right:50px;padding-bottom:50px;padding-left:50px"><!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column {"style":{"spacing":{"padding":{"left":"110px"}}}} -->
-<div class="wp-block-column" style="padding-left:110px"><!-- wp:group {"style":{"spacing":{"padding":{"top":"60px","right":"0","left":"0"}}},"layout":{"type":"constrained","wideSize":"360px","justifyContent":"left"}} -->
-<div class="wp-block-group" style="padding-top:60px;padding-right:0;padding-left:0"><!-- wp:paragraph {"style":{"color":{"text":"#c85643"},"typography":{"fontSize":"18px"},"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
+<div class="wp-block-column" style="padding-left:110px"><!-- wp:group {"style":{"spacing":{"padding":{"top":"0","right":"0","left":"0"}}},"layout":{"type":"constrained","wideSize":"360px","justifyContent":"left"}} -->
+<div class="wp-block-group" style="padding-top:0;padding-right:0;padding-left:0"><!-- wp:paragraph {"style":{"color":{"text":"#c85643"},"typography":{"fontSize":"18px"},"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
 <p class="has-text-color" style="color:#c85643;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;font-size:18px"><strong>HOLIDAY SALE</strong></p>
 <!-- /wp:paragraph -->
 
@@ -23,15 +23,15 @@
 
 <!-- wp:buttons {"style":{"spacing":{"blockGap":"0","margin":{"top":"20px","bottom":"0"}}}} -->
 <div class="wp-block-buttons" style="margin-top:20px;margin-bottom:0"><!-- wp:button {"style":{"typography":{"fontSize":"16px"},"color":{"text":"#000000","background":"#ffffff"},"border":{"width":"0px","style":"none"}},"className":"is-style-fill"} -->
-<div class="wp-block-button has-custom-font-size is-style-fill" style="font-size:16px"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="border-style:none;border-width:0px;color:#000000;background-color:#ffffff">Shop Holiday Sales</a></div>
+<div class="wp-block-button has-custom-font-size is-style-fill" style="font-size:16px"><a href="<?php echo esc_url( get_permalink( wc_get_page_id( 'shop' ) ) ); ?>" class="wp-block-button__link has-text-color has-background wp-element-button" style="border-style:none;border-width:0px;color:#000000;background-color:#ffffff">Shop Holiday Sales</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons --></div>
 <!-- /wp:group --></div>
 <!-- /wp:column -->
 
-<!-- wp:column -->
-<div class="wp-block-column"><!-- wp:image {"id":1,"sizeSlug":"full","linkDestination":"none"} -->
-<figure class="wp-block-image size-full"><img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-furniture-11.png', dirname( __FILE__ ) ) ); ?>" alt="" class="wp-image-1"/></figure>
+<!-- wp:column {"verticalAlignment":"center"} -->
+<div class="wp-block-column is-vertically-aligned-center"><!-- wp:image {"id":1,"sizeSlug":"full","linkDestination":"none"} -->
+<figure class="wp-block-image size-full"><img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/wood-home-wall-decoration-shelf-living-room.png', dirname( __FILE__ ) ) ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in a banner.', 'woo-gutenberg-products-block' ); ?>" class="wp-image-1"/></figure>
 <!-- /wp:image --></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns --></div>

patterns/featured-category-cover-image.php

@@ -5,10 +5,10 @@
  * Categories: WooCommerce
  */
 ?>
-<!-- wp:cover {"url":"<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-apparel-1.png', dirname( __FILE__ ) ) ); ?>","id":1,"dimRatio":0,"contentPosition":"top left","align":"wide","style":{"spacing":{"padding":{"top":"2em","right":"2.25em","bottom":"2.25em","left":"2.25em"}}},"layout":{"type":"constrained"}} -->
+<!-- wp:cover {"url":"<?php echo esc_url( plugins_url( 'images/pattern-placeholders/wood-leather-fur-shop-jeans-shelf.png', dirname( __FILE__ ) ) ); ?>","id":1,"dimRatio":0,"focalPoint":{"x":0,"y":0},"contentPosition":"top left","align":"wide","style":{"spacing":{"padding":{"top":"2em","right":"2.25em","bottom":"2.25em","left":"2.25em"}}},"layout":{"type":"constrained"}} -->
 <div class="wp-block-cover alignwide has-custom-content-position is-position-top-left" style="padding-top:2em;padding-right:2.25em;padding-bottom:2.25em;padding-left:2.25em">
 	<span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
-	<img class="wp-block-cover__image-background wp-image-1" alt="" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-apparel-1.png', dirname( __FILE__ ) ) ); ?>" data-object-fit="cover"/>
+	<img class="wp-block-cover__image-background wp-image-1" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in a featured category section.', 'woo-gutenberg-products-block' ); ?>" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/wood-leather-fur-shop-jeans-shelf.png', dirname( __FILE__ ) ) ); ?>" style="object-position:0% 0%" data-object-fit="cover" data-object-position="0% 0%"/>
 
 	<div class="wp-block-cover__inner-container">
 		<!-- wp:paragraph {"align":"left","placeholder":"Write title…","style":{"typography":{"lineHeight":"1.5","fontSize":"2.2em","textColor":"background"},"color":{"text":"#ffffff"},"spacing":{"margin":{"bottom":"0px","top":"0px"}}}} -->
@@ -22,7 +22,7 @@
 		<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"30px"}}}} -->
 		<div class="wp-block-buttons" style="margin-top:30px">
 			<!-- wp:button {"style":{"border":{"width":"0px","style":"none"},"color":{"text":"#000000","background":"#ffffff"}},"className":"is-style-fill"} -->
-			<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="border-style:none;border-width:0px;color:#000000;background-color:#ffffff">Shop jeans</a></div>
+			<div class="wp-block-button is-style-fill"><a href="<?php echo esc_url( wc_get_page_permalink( 'shop' ) ); ?>" class="wp-block-button__link has-text-color has-background wp-element-button" style="border-style:none;border-width:0px;color:#000000;background-color:#ffffff">Shop jeans</a></div>
 			<!-- /wp:button --></div>
 		<!-- /wp:buttons --></div>
 </div>