Merge branch 'upkeep/9524' of github.com:Sidsector9/woocommerce-blocks into upkeep/9524

Author: Sidsector9

.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' );

assets/js/blocks/product-categories/block.js renamed to assets/js/blocks/product-categories/block.tsx

@@ -4,7 +4,6 @@
 import { __ } from '@wordpress/i18n';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import ServerSideRender from '@wordpress/server-side-render';
-import PropTypes from 'prop-types';
 import { Icon, listView } from '@wordpress/icons';
 import { isSiteEditorPage, isWidgetEditorPage } from '@woocommerce/utils';
 import { useSelect } from '@wordpress/data';
@@ -18,6 +17,10 @@ import {
 	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import type { ProductCategoriesBlockProps } from './types';
 
 const EmptyPlaceholder = () => (
 	<Placeholder
@@ -43,9 +46,15 @@ const EmptyPlaceholder = () => (
  * @param {function(any):any} props.setAttributes Setter for block attributes.
  * @param {string}            props.name          Name for block.
  */
-const ProductCategoriesBlock = ( { attributes, setAttributes, name } ) => {
-	const editSiteStore = useSelect( 'core/edit-site' );
-	const editWidgetStore = useSelect( 'core/edit-widgets' );
+const ProductCategoriesBlock = ( {
+	attributes,
+	setAttributes,
+	name,
+}: ProductCategoriesBlockProps ) => {
+	const editSiteStore = useSelect( ( select ) => select( 'core/edit-site' ) );
+	const editWidgetStore = useSelect( ( select ) =>
+		select( 'core/edit-widgets' )
+	);
 	const isSiteEditor = isSiteEditorPage( editSiteStore );
 	const isWidgetEditor = isWidgetEditorPage( editWidgetStore );
 	const getInspectorControls = () => {
@@ -73,7 +82,7 @@ const ProductCategoriesBlock = ( { attributes, setAttributes, name } ) => {
 							'woo-gutenberg-products-block'
 						) }
 						value={ isDropdown ? 'dropdown' : 'list' }
-						onChange={ ( value ) =>
+						onChange={ ( value: string ) =>
 							setAttributes( {
 								isDropdown: value === 'dropdown',
 							} )
@@ -195,19 +204,4 @@ const ProductCategoriesBlock = ( { attributes, setAttributes, name } ) => {
 	);
 };
 
-ProductCategoriesBlock.propTypes = {
-	/**
-	 * The attributes for this block
-	 */
-	attributes: PropTypes.object.isRequired,
-	/**
-	 * The register block name.
-	 */
-	name: PropTypes.string.isRequired,
-	/**
-	 * A callback to update attributes
-	 */
-	setAttributes: PropTypes.func.isRequired,
-};
-
 export default ProductCategoriesBlock;

assets/js/blocks/product-categories/edit.tsx

@@ -8,8 +8,9 @@ import { useBlockProps } from '@wordpress/block-editor';
  */
 import Block from './block';
 import './editor.scss';
+import type { ProductCategoriesBlockProps } from './types';
 
-export const Edit = ( props: unknown ): JSX.Element => {
+export const Edit = ( props: ProductCategoriesBlockProps ): JSX.Element => {
 	const blockProps = useBlockProps();
 
 	return (

assets/js/blocks/product-categories/index.tsx

@@ -11,6 +11,7 @@ import './editor.scss';
 import metadata from './block.json';
 import './style.scss';
 import { Edit } from './edit';
+import type { ProductCategoriesIndexProps } from './types';
 
 registerBlockType( metadata, {
 	icon: {
@@ -27,7 +28,10 @@ registerBlockType( metadata, {
 				type: 'block',
 				blocks: [ 'core/legacy-widget' ],
 				// We can't transform if raw instance isn't shown in the REST API.
-				isMatch: ( { idBase, instance } ) =>
+				isMatch: ( {
+					idBase,
+					instance,
+				}: ProductCategoriesIndexProps ) =>
 					idBase === 'woocommerce_product_categories' &&
 					!! instance?.raw,
 				transform: ( { instance } ) =>
@@ -77,10 +81,10 @@ registerBlockType( metadata, {
 			migrate( attributes ) {
 				return attributes;
 			},
-			save( props ) {
+			save( props: ProductCategoriesIndexProps ) {
 				const { hasCount, hasEmpty, isDropdown, isHierarchical } =
-					props.attributes;
-				const data = {};
+					props;
+				const data: { [ key: string ]: boolean } = {};
 				if ( hasCount ) {
 					data[ 'data-has-count' ] = true;
 				}

assets/js/blocks/product-categories/types.ts

@@ -0,0 +1,35 @@
+export interface ProductCategoriesBlockProps {
+	attributes: {
+		hasCount: boolean;
+		hasImage: boolean;
+		hasEmpty: boolean;
+		isDropdown: boolean;
+		isHierarchical: boolean;
+		showChildrenOnly: boolean;
+	};
+	name: string;
+	setAttributes: ( attributes: {
+		hasCount?: boolean;
+		hasImage?: boolean;
+		hasEmpty?: boolean;
+		isDropdown?: boolean;
+		isHierarchical?: boolean;
+		showChildrenOnly?: boolean;
+	} ) => void;
+}
+
+export interface ProductCategoriesIndexProps {
+	idBase?: string;
+	instance: {
+		raw: {
+			dropdown: boolean;
+			count: boolean;
+			hide_empty: boolean;
+			hierarchical: boolean;
+		};
+	};
+	hasCount: boolean;
+	hasEmpty: boolean;
+	isDropdown: boolean;
+	isHierarchical: boolean;
+}

patterns/banner.php

@@ -31,7 +31,7 @@
 
 <!-- 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="" class="wp-image-1"/></figure>
+<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

@@ -8,7 +8,7 @@
 <!-- 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/wood-leather-fur-shop-jeans-shelf.png', dirname( __FILE__ ) ) ); ?>" style="object-position:0% 0%" data-object-fit="cover" data-object-position="0% 0%"/>
+	<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"}}}} -->

patterns/featured-category-focus.php

@@ -8,7 +8,7 @@
 <!-- wp:group {"align":"full","style":{"color":{"background":"#84bfe1"},"spacing":{"padding":{"top":"var:preset|spacing|70","right":"var:preset|spacing|70","bottom":"var:preset|spacing|70","left":"var:preset|spacing|70"}}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"center","flexWrap":"wrap"}} -->
 <div class="wp-block-group alignfull has-background" style="background-color:#84bfe1;padding-top:var(--wp--preset--spacing--70);padding-right:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70);padding-left:var(--wp--preset--spacing--70)">
 	<!-- wp:image {"id":1,"width":502,"height":335,"sizeSlug":"full","linkDestination":"none"} -->
-	<figure class="wp-block-image size-full is-resized"><img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/floor-home-decoration-fireplace-property-living-room.png', dirname( __FILE__ ) ) ); ?>" alt="" class="wp-image-1" width="502" height="335"/></figure>
+	<figure class="wp-block-image size-full is-resized"><img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/floor-home-decoration-fireplace-property-living-room.png', dirname( __FILE__ ) ) ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in a featured category section.', 'woo-gutenberg-products-block' ); ?>" class="wp-image-1" width="502" height="335"/></figure>
 	<!-- /wp:image -->
 
 	<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#000000"}},"fontSize":"large"} -->