Merge branch 'trunk' into add/6558-create-cross-sells-product-list

woocommerce · Jun 30, 2022 · ea612d6 · ea612d6
2 parents b3b864d + c422c07
commit ea612d6
Show file tree

Hide file tree

Showing 30 changed files with 41,664 additions and 35,252 deletions.
diff --git a/assets/js/atomic/utils/render-parent-block.tsx b/assets/js/atomic/utils/render-parent-block.tsx
@@ -93,6 +93,7 @@ const renderForcedBlocks = (
 						: getBlockComponentFromMap( blockName, blockMap );
 					return ForcedComponent ? (
 						<BlockErrorBoundary
+							key={ `${ blockName }_blockerror` }
 							text={ `Unexpected error in: ${ blockName }` }
 							showErrorBlock={ CURRENT_USER_IS_ADMIN as boolean }
 						>

diff --git a/assets/js/blocks/classic-template/constants.ts b/assets/js/blocks/classic-template/constants.ts
@@ -3,6 +3,8 @@
  */
 import { __ } from '@wordpress/i18n';
 
+export const BLOCK_SLUG = 'woocommerce/legacy-template';
+
 export const TEMPLATES: Record< string, Record< string, string > > = {
 	'single-product': {
 		title: __(
@@ -32,4 +34,11 @@ export const TEMPLATES: Record< string, Record< string, string > > = {
 		),
 		placeholder: 'archive-product',
 	},
+	'product-search-results': {
+		title: __(
+			'WooCommerce Product Search Results Block',
+			'woo-gutenberg-products-block'
+		),
+		placeholder: 'archive-product',
+	},
 };
diff --git a/assets/js/blocks/classic-template/index.tsx b/assets/js/blocks/classic-template/index.tsx
@@ -1,7 +1,14 @@
 /**
  * External dependencies
  */
-import { createBlock, registerBlockType } from '@wordpress/blocks';
+import {
+	Block,
+	BlockEditProps,
+	createBlock,
+	getBlockType,
+	registerBlockType,
+	unregisterBlockType,
+} from '@wordpress/blocks';
 import {
 	isExperimentalBuild,
 	WC_BLOCKS_IMAGE_URL,
@@ -10,31 +17,43 @@ import { useBlockProps } from '@wordpress/block-editor';
 import { Button, Placeholder } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { box, Icon } from '@wordpress/icons';
-import { useDispatch } from '@wordpress/data';
+import { select, useDispatch, subscribe } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import './editor.scss';
 import './style.scss';
-import { TEMPLATES } from './constants';
-
-interface Props {
-	attributes: {
-		template: string;
-		align: string;
-	};
-	clientId: string;
-}
+import { BLOCK_SLUG, TEMPLATES } from './constants';
+
+type Attributes = {
+	template: string;
+	align: string;
+};
 
-const Edit = ( { clientId, attributes }: Props ) => {
+const Edit = ( {
+	clientId,
+	attributes,
+	setAttributes,
+}: BlockEditProps< Attributes > ) => {
 	const { replaceBlock } = useDispatch( 'core/block-editor' );
 
 	const blockProps = useBlockProps();
 	const templateTitle =
 		TEMPLATES[ attributes.template ]?.title ?? attributes.template;
 	const templatePlaceholder =
 		TEMPLATES[ attributes.template ]?.placeholder ?? 'fallback';
+
+	useEffect(
+		() =>
+			setAttributes( {
+				template: attributes.template,
+				align: attributes.align ?? 'wide',
+			} ),
+		[ attributes.align, attributes.template, setAttributes ]
+	);
+
 	return (
 		<div { ...blockProps }>
 			<Placeholder
@@ -99,51 +118,146 @@ const Edit = ( { clientId, attributes }: Props ) => {
 	);
 };
 
-/**
- * The 'WooCommerce Legacy Template' block was renamed to 'WooCommerce Classic Template', however, the internal block
- * name 'woocommerce/legacy-template' needs to remain the same. Otherwise, it would result in a corrupt block when
- * loaded for users who have customized templates using the legacy-template (since the internal block name is
- * stored in the database).
- *
- * See https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/5861 for more context
- */
-registerBlockType( 'woocommerce/legacy-template', {
-	title: __( 'WooCommerce Classic Template', 'woo-gutenberg-products-block' ),
-	icon: (
-		<Icon icon={ box } className="wc-block-editor-components-block-icon" />
-	),
-	category: 'woocommerce',
-	apiVersion: 2,
-	keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
-	description: __(
-		'Renders classic WooCommerce PHP templates.',
-		'woo-gutenberg-products-block'
-	),
-	supports: {
-		align: [ 'wide', 'full' ],
-		html: false,
-		multiple: false,
-		reusable: false,
-		inserter: false,
-	},
-	example: {
-		attributes: {
-			isPreview: true,
+const templates = Object.keys( TEMPLATES );
+
+const registerClassicTemplateBlock = ( {
+	template,
+	inserter,
+}: {
+	template?: string;
+	inserter: boolean;
+} ) => {
+	/**
+	 * The 'WooCommerce Legacy Template' block was renamed to 'WooCommerce Classic Template', however, the internal block
+	 * name 'woocommerce/legacy-template' needs to remain the same. Otherwise, it would result in a corrupt block when
+	 * loaded for users who have customized templates using the legacy-template (since the internal block name is
+	 * stored in the database).
+	 *
+	 * See https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/5861 for more context
+	 */
+	registerBlockType( BLOCK_SLUG, {
+		title: template
+			? TEMPLATES[ template ].title
+			: __(
+					'WooCommerce Classic Template',
+					'woo-gutenberg-products-block'
+			  ),
+		icon: (
+			<Icon
+				icon={ box }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+		category: 'woocommerce',
+		apiVersion: 2,
+		keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
+		description: __(
+			'Renders classic WooCommerce PHP templates.',
+			'woo-gutenberg-products-block'
+		),
+		supports: {
+			align: [ 'wide', 'full' ],
+			html: false,
+			multiple: false,
+			reusable: false,
+			inserter,
+		},
+		example: {
+			attributes: {
+				isPreview: true,
+			},
 		},
-	},
-	attributes: {
-		/**
-		 * Template attribute is used to determine which core PHP template gets rendered.
-		 */
-		template: {
-			type: 'string',
-			default: 'any',
+		attributes: {
+			/**
+			 * Template attribute is used to determine which core PHP template gets rendered.
+			 */
+			template: {
+				type: 'string',
+				default: 'any',
+			},
+			align: {
+				type: 'string',
+				default: 'wide',
+			},
 		},
-		align: {
-			type: 'string',
-			default: 'wide',
+		edit: ( {
+			attributes,
+			clientId,
+			setAttributes,
+		}: BlockEditProps< Attributes > ) => {
+			const newTemplate = template ?? attributes.template;
+
+			return (
+				<Edit
+					attributes={ {
+						...attributes,
+						template: newTemplate,
+					} }
+					setAttributes={ setAttributes }
+					clientId={ clientId }
+				/>
+			);
 		},
-	},
-	edit: Edit,
-	save: () => null,
-} );
+		save: () => null,
+	} );
+};
+
+const isClassicTemplateBlockRegisteredWithAnotherTitle = (
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	block: Block< any > | undefined,
+	parsedTemplate: string
+) => block?.title !== TEMPLATES[ parsedTemplate ].title;
+
+const hasTemplateSupportForClassicTemplateBlock = ( parsedTemplate: string ) =>
+	templates.includes( parsedTemplate );
+
+// @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;
+
+if ( isExperimentalBuild() ) {
+	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 );
+
+		if (
+			block !== undefined &&
+			( ! hasTemplateSupportForClassicTemplateBlock( parsedTemplate ) ||
+				isClassicTemplateBlockRegisteredWithAnotherTitle(
+					block,
+					parsedTemplate
+				) )
+		) {
+			unregisterBlockType( BLOCK_SLUG );
+			currentTemplateId = undefined;
+			return;
+		}
+
+		if (
+			block === undefined &&
+			hasTemplateSupportForClassicTemplateBlock( parsedTemplate )
+		) {
+			registerClassicTemplateBlock( {
+				template: parsedTemplate,
+				inserter: true,
+			} );
+		}
+	} );
+} else {
+	registerClassicTemplateBlock( {
+		inserter: false,
+	} );
+}