Merge branch 'trunk' into update-chessboard-pattern

woocommerce · Mar 20, 2024 · 9c47529 · 9c47529
2 parents b08a240 + be63107
commit 9c47529
Show file tree

Hide file tree

Showing 107 changed files with 1,975 additions and 756 deletions.
diff --git a/changelog/43571-migrated-template-structure-documentation b/changelog/43571-migrated-template-structure-documentation
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+comment: Migrated Template structure & Overriding templates via a theme into /docs
diff --git a/docs/docs-manifest.json b/docs/docs-manifest.json
@@ -869,6 +869,13 @@
           "url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/theme-development/theme-design-ux-guidelines.md",
           "id": "ec1f05ca7c14ed81a52553fa1c3f1045df5f6a4f"
         },
+        {
+          "post_title": "Template structure & Overriding templates via a theme",
+          "edit_url": "https://github.com/woocommerce/woocommerce/edit/trunk/docs/theme-development/template-structure.md",
+          "hash": "faf1f9d46a5115cb3c573d61474e7e7b3ba473568956c87aca6a45be8f205b37",
+          "url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/theme-development/template-structure.md",
+          "id": "34bfebec9fc45e680976814928a7b8a1778af14e"
+        },
         {
           "post_title": "How to set up and use a child theme",
           "menu_title": "Set up and use a child theme",
@@ -1204,5 +1211,5 @@
       "categories": []
     }
   ],
-  "hash": "54c558ffb682cee4ce5f81069690e47439b174cffac8e4d0950d014145dcad9e"
+  "hash": "514bc14b1dd1c31a5aa6e3f47fe9fb61fb9dd28db4e475c2397f5f409ce06cf0"
 }
diff --git a/docs/theme-development/template-structure.md b/docs/theme-development/template-structure.md
@@ -0,0 +1,129 @@
+---
+post_title: Template structure & Overriding templates via a theme
+---
+
+---
+
+**Note:** this document is geared toward template development for classic themes. For the recommended modern approach,
+visit [Develop Your First Low-Code Block Theme](https://learn.wordpress.org/course/develop-your-first-low-code-block-theme/)
+to learn about block theme development, and explore
+the [Create Block Theme plugin](https://wordpress.org/plugins/create-block-theme/) tool when you're ready to create a
+new theme.  
+We are unable to provide support for customizations under our [Support Policy](http://woo.com/support-policy/). If you
+need to further customize a snippet, or extend its functionality, we highly
+recommend [Codeable](https://codeable.io/?ref=z4Hnp), or a [Certified WooExpert](https://woo.com/experts/).
+
+---
+
+## Overview
+
+---
+
+WooCommerce template files contain the **markup** and **template structure** for **frontend and HTML emails** of your
+store.
+
+[![Documentation for Template structure & Overriding templates via a theme](https://embed-ssl.wistia.com/deliveries/a2f57c5896505b39952aa8411a474066.jpg?image_play_button_size=2x&amp;image_crop_resized=960x540&amp;image_play_button=1&amp;image_play_button_color=694397e0)](https://woo.com/document/template-structure/?wvideo=8mvl4bro0g)
+
+When you open these files, you will notice they all contain **hooks** that allow you to add/move content without needing
+to edit template files themselves. This method protects against upgrade issues, as the template files can be left
+completely untouched.
+
+## Template List
+
+---
+
+Template files can be found within the **/woocommerce/templates/** directory:
+
+| Latest version | Files                                                                                                      |
+|:---------------|:-----------------------------------------------------------------------------------------------------------|
+| v8.4.0         | [View template files](https://github.com/woocommerce/woocommerce/tree/8.4.0/plugins/woocommerce/templates) |
+
+---
+<!-- markdownlint-disable MD033 -->
+<details>
+<summary>Expand to view files of all major previous versions</summary>
+
+| Version | Files                                                                                                      |
+|---------|------------------------------------------------------------------------------------------------------------|
+| v8.3.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/8.3.0/plugins/woocommerce/templates) |
+| v8.2.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/8.2.0/plugins/woocommerce/templates) |
+| v.8.1.0 | [View template files](https://github.com/woocommerce/woocommerce/tree/8.1.0/plugins/woocommerce/templates) |
+| v8.0.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/8.0.0/plugins/woocommerce/templates) |
+| v7.9.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/7.9.0/plugins/woocommerce/templates) |
+| v7.8.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/7.8.0/plugins/woocommerce/templates) |
+| v7.7.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/7.7.0/plugins/woocommerce/templates) |
+| v7.6.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/7.6.0/plugins/woocommerce/templates) |
+| v7.5.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/7.5.0/plugins/woocommerce/templates) |
+| v7.4.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/7.4.0/plugins/woocommerce/templates) |
+| v7.3.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/7.3.0/plugins/woocommerce/templates) |
+| v7.2.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/7.2.0/plugins/woocommerce/templates) |
+| v7.1.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/7.1.0/plugins/woocommerce/templates) |
+| v7.0.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/7.0.0/plugins/woocommerce/templates) |
+| v6.9.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/6.9.0/plugins/woocommerce/templates) |
+| v6.8.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/6.8.0/plugins/woocommerce/templates) |
+| v6.7.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/6.7.0/plugins/woocommerce/templates) |
+| v6.6.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/6.6.0/plugins/woocommerce/templates) |
+| v6.5.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/6.5.0/plugins/woocommerce/templates) |
+| v6.4.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/6.4.0/plugins/woocommerce/templates) |
+| v6.3.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/6.3.0/plugins/woocommerce/templates) |
+| v6.2.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/6.2.0/plugins/woocommerce/templates) |
+| v6.1.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/6.1.0/plugins/woocommerce/templates) |
+| v6.0.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/6.0.0/plugins/woocommerce/templates) |
+| v5.9.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/5.9.0/templates)                     |
+| v5.8.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/5.8.0/templates)                     |
+| v5.7.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/5.7.0/templates)                     |
+| v5.6.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/5.6.0/templates)                     |
+| v5.5.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/5.5.0/templates)                     |
+| v5.4.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/5.4.0/templates)                     |
+| v5.3.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/5.3.0/templates)                     |
+| v5.2.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/5.2.0/templates)                     |
+| v5.1.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/5.1.0/templates)                     |
+| v5.0.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/5.0.0/templates)                     |
+| v4.9.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/4.9.0/templates)                     |
+| v4.8.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/4.8.0/templates)                     |
+| v4.7.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/4.7.0/templates)                     |
+| v4.6.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/4.6.0/templates)                     |
+| v4.5.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/4.5.0/templates)                     |
+| v4.4.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/4.4.0/templates)                     |
+| v4.3.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/4.3.0/templates)                     |
+| v4.2.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/4.2.0/templates)                     |
+| v4.1.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/4.1.0/templates)                     |
+| v4.0.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/4.0.0/templates)                     |
+| v3.9.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/3.9.0/templates)                     |
+| v3.8.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/3.8.0/templates)                     |
+| v3.7.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/3.9.0/templates)                     |
+| v3.6.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/3.6.0/templates)                     |
+| v3.5.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/3.5.0/templates)                     |
+| v3.4.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/3.4.0/templates)                     |
+| v3.3.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/3.3.0/templates)                     |
+| v3.2.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/3.2.0/templates)                     |
+| v3.1.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/3.1.0/templates)                     |
+| v3.0.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/3.0.0/templates)                     |
+| v2.6.0  | [View template files](https://github.com/woocommerce/woocommerce/tree/2.6.0/templates)                     |
+</details>
+<!-- markdownlint-enable MD033 -->
+
+---
+
+## How to Edit Files
+
+---
+
+Edit files in an **upgrade-safe** way using **overrides**. Copy the template into a directory within your theme named `/woocommerce` keeping the same file structure but removing the `/templates/` subdirectory.
+
+Example: To override the admin order notification, copy: `wp-content/plugins/woocommerce/templates/emails/admin-new-order.php` to `wp-content/themes/yourtheme/woocommerce/emails/admin-new-order.php`.
+
+The copied file will now override the WooCommerce default template file.
+
+**Warning:** Do not edit these files within the core plugin itself as they are overwritten during the upgrade process and any customizations will be lost. For more detailed information, see [Fixing Outdated WooCommerce Templates](https://woo.com/document/fix-outdated-templates-woocommerce/).
+
+## For Custom Templates
+
+If you are a theme developer or using a theme with custom templates, you must declare WooCommerce theme support using the `add_theme_support` function. See [Declaring WooCommerce Support in Themes](https://github.com/woocommerce/woocommerce/wiki/Declaring-WooCommerce-support-in-themes) at GitHub.
+
+If your theme has a `woocommerce.php` file, you will be unable to override the `woocommerce/archive-product.php` custom template in your theme, as `woocommerce.php` has priority over other template files. This is intended to prevent display issues.
+
+---
+
+Need support with editing your Woo store? WooExpert agencies are here to help. They are trusted agencies with a proven track record of building highly customized, scalable online stores.
+[Hire an Expert](https://woo.com/customizations/).
diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/block-editor-container.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/block-editor-container.tsx
@@ -7,15 +7,20 @@
 import { store as blockEditorStore } from '@wordpress/block-editor';
 // @ts-expect-error No types for this exist yet.
 import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 // @ts-expect-error No types for this exist yet.
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 // @ts-expect-error No types for this exist yet.
 import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
 import { useQuery } from '@woocommerce/navigation';
 // @ts-expect-error No types for this exist yet.
 import useSiteEditorSettings from '@wordpress/edit-site/build-module/components/block-editor/use-site-editor-settings';
-import { useCallback, useContext, useMemo } from '@wordpress/element';
+import {
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+} from '@wordpress/element';
 // @ts-expect-error No types for this exist yet.
 import { store as editSiteStore } from '@wordpress/edit-site/build-module/store';
 
@@ -159,36 +164,51 @@ export const BlockEditorContainer = () => {
 
 	const opacityClass = 'preview-opacity';
 
-	const renderedBlocks = useMemo(
-		() =>
-			blocks.map( ( block ) => {
+	const clientIds = blocks.map( ( block ) => block.clientId );
+
+	// @ts-expect-error No types for this exist yet.
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	useEffect( () => {
+		const { blockIdToHighlight, restOfBlockIds } = clientIds.reduce(
+			( acc, clientId ) => {
 				if (
 					! isHighlighting ||
-					block.clientId === highlightedBlockClientId
+					clientId === highlightedBlockClientId
 				) {
 					return {
-						...block,
-						attributes: {
-							...block.attributes,
-							className: block.attributes.className?.replace(
-								opacityClass,
-								''
-							),
-						},
+						blockIdToHighlight: clientId,
+						restOfBlockIds: acc.restOfBlockIds,
 					};
 				}
 
 				return {
-					...block,
-					attributes: {
-						...block.attributes,
-						className:
-							block.attributes.className + ` ${ opacityClass }`,
-					},
+					blockIdToHighlight: acc.blockIdToHighlight,
+					restOfBlockIds: [ ...acc.restOfBlockIds, clientId ],
 				};
-			} ),
-		[ blocks, highlightedBlockClientId, isHighlighting ]
-	);
+			},
+			{
+				blockIdToHighlight: null,
+				restOfBlockIds: [],
+			} as {
+				blockIdToHighlight: string | null;
+				restOfBlockIds: string[];
+			}
+		);
+
+		updateBlockAttributes( blockIdToHighlight, {
+			className: '',
+		} );
+
+		updateBlockAttributes( restOfBlockIds, {
+			className: ` ${ opacityClass }`,
+		} );
+	}, [
+		clientIds,
+		highlightedBlockClientId,
+		isHighlighting,
+		updateBlockAttributes,
+	] );
 
 	const isScrollable = useMemo(
 		() =>
@@ -202,7 +222,7 @@ export const BlockEditorContainer = () => {
 
 	return (
 		<BlockEditor
-			renderedBlocks={ renderedBlocks }
+			renderedBlocks={ blocks }
 			isScrollable={ isScrollable }
 			onChange={ onChange }
 			settings={ settings }

diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/block-preview.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/block-preview.tsx
@@ -7,7 +7,7 @@
  */
 // @ts-ignore No types for this exist yet.
 import { BlockEditorProvider } from '@wordpress/block-editor';
-import { memo, useMemo } from '@wordpress/element';
+import { memo } from '@wordpress/element';
 import { BlockInstance } from '@wordpress/blocks';
 /**
  * Internal dependencies
@@ -30,10 +30,7 @@ export const BlockPreview = ( {
 	onChange?: ChangeHandler | undefined;
 	useSubRegistry?: boolean;
 } & Omit< ScaledBlockPreviewProps, 'containerWidth' > ) => {
-	const renderedBlocks = useMemo( () => {
-		const _blocks = Array.isArray( blocks ) ? blocks : [ blocks ];
-		return _blocks;
-	}, [ blocks ] );
+	const renderedBlocks = Array.isArray( blocks ) ? blocks : [ blocks ];
 
 	return (
 		<BlockEditorProvider

diff --git a/...admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage.tsx b/...admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage.tsx
@@ -18,6 +18,8 @@ import { store as coreStore } from '@wordpress/core-data';
 // @ts-expect-error Missing type in core-data.
 import { __experimentalBlockPatternsList as BlockPatternList } from '@wordpress/block-editor';
 import { recordEvent } from '@woocommerce/tracks';
+// @ts-expect-error Missing type in core-data.
+import { useIsSiteEditorLoading } from '@wordpress/edit-site/build-module/components/layout/hooks';
 
 /**
  * Internal dependencies
@@ -55,16 +57,21 @@ export const SidebarNavigationScreenHomepage = () => {
 	);
 	const onClickPattern = useCallback(
 		( pattern, selectedBlocks ) => {
+			if ( pattern === selectedPattern ) {
+				return;
+			}
 			setSelectedPattern( pattern );
 			onChange(
 				[ blocks[ 0 ], ...selectedBlocks, blocks[ blocks.length - 1 ] ],
 				{ selection: {} }
 			);
 			scroll();
 		},
-		[ blocks, onChange, setSelectedPattern, scroll ]
+		[ selectedPattern, setSelectedPattern, onChange, blocks, scroll ]
 	);
 
+	const isEditorLoading = useIsSiteEditorLoading();
+
 	const homePatterns = useMemo( () => {
 		return Object.entries( homeTemplates ).map(
 			( [ templateName, patterns ] ) => {
@@ -154,7 +161,11 @@ export const SidebarNavigationScreenHomepage = () => {
 			content={
 				<div className="woocommerce-customize-store__sidebar-homepage-content">
 					<div className="edit-site-sidebar-navigation-screen-patterns__group-homepage">
-						{ isLoading ? (
+						{ /* This is necessary to fix this issue: https://github.com/woocommerce/woocommerce/issues/45711
+						  If the user switch the homepage while the editor is loading, header and footer could disappear.
+						  For more details check: https://github.com/woocommerce/woocommerce/pull/45735
+						  */ }
+						{ isLoading || isEditorLoading ? (
 							<span className="components-placeholder__preview">
 								<Spinner />
 							</span>

diff --git a/plugins/woocommerce-admin/client/customize-store/transitional/style.scss b/plugins/woocommerce-admin/client/customize-store/transitional/style.scss
@@ -82,9 +82,8 @@
 	}
 
 	.woocommerce-customize-store__transitional-main-actions {
-		margin: 20px 0 0;
 		display: flex;
-		gap: 20px;
+		gap: 40px;
 		flex-direction: row;
 
 		@media only screen and (max-width: 600px) {

diff --git a/plugins/woocommerce-admin/client/customize-store/transitional/survey-form/index.tsx b/plugins/woocommerce-admin/client/customize-store/transitional/survey-form/index.tsx
@@ -79,7 +79,6 @@ export const SurveyForm = ( {
 
 	const disableSendButton =
 		rating === 0 ||
-		feedbackText === '' ||
 		( ! isStreamlineChecked &&
 			! isDislikeThemesChecked &&
 			! isThemeNoMatchChecked &&
@@ -188,7 +187,6 @@ export const SurveyForm = ( {
 						'Did you find anything confusing, irrelevant, or not useful?',
 						'woocommerce'
 					) }
-					<span>*</span>
 				</h4>
 				<TextareaControl
 					value={ feedbackText }