Merge branch 'trunk' of github.com:woocommerce/woocommerce into 45593…

…-cys-on-core-product-rating-block-not-rendering
woocommerce · Mar 15, 2024 · 3026b12 · 3026b12
2 parents bcadab4 + 6016aad
commit 3026b12
Show file tree

Hide file tree

Showing 56 changed files with 2,531 additions and 362 deletions.
diff --git a/.github/workflows/release-code-freeze.yml b/.github/workflows/release-code-freeze.yml
@@ -232,6 +232,32 @@ jobs:
                   name: double-zipped-woocommerce.${{ needs.code-freeze-prep.outputs.acceleratedVersion }}
                   path: plugins/woocommerce/woocommerce.zip
                   retention-days: 2
+
+    r2-upload-monthly:
+      name: Upload Beta to R2
+      runs-on: ubuntu-20.04
+      needs: [ code-freeze-prep, build-monthly ]
+      if: ${{ needs.code-freeze-prep.outputs.isTodayMonthlyFreeze == 'yes' }}
+      steps:
+          - id: download
+            uses: actions/download-artifact@v3
+            env:
+                GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+            with:
+                name: double-zipped-woocommerce.${{ needs.code-freeze-prep.outputs.monthlyVersion }}-beta.1
+                path: download
+
+          - run: ls -lah ${{steps.download.outputs.download-path}}
+
+          - name: Upload release zip to Cloudflare R2 bucket
+            uses: ryand56/r2-upload-action@de3eabc2e3137ce07bc3805af441df55f535c64b
+            with:
+              r2-account-id: ${{ secrets.R2_ACCOUNT_ID }}
+              r2-access-key-id: ${{ secrets.R2_ACCESS_KEY_ID }}
+              r2-secret-access-key: ${{ secrets.R2_SECRET_ACCESS_KEY }}
+              r2-bucket: ${{ secrets.R2_BUCKET }}
+              source-dir: ${{ steps.download.outputs.download-path }}
+              destination-dir: ./monthly/                  
 
     slack-upload-monthly:
         name: Upload Beta to Slack
@@ -278,6 +304,32 @@ jobs:
               run : |
                   pnpm utils slack file "${{ secrets.CODE_FREEZE_BOT_TOKEN }}" "Here's the generated release build for ${{ needs.code-freeze-prep.outputs.monthlyVersion }}-beta.1" "${{ steps.download.outputs.download-path }}/woocommerce.zip" "${{ inputs.slackChannelOverride || secrets.WOO_RELEASE_SLACK_CHANNEL }}" --reply-ts ${{ needs.notify-slack.outputs.ts }} --filename "woocommerce.${{ needs.code-freeze-prep.outputs.monthlyVersion }}-beta.1.zip"
 
+    r2-upload-accelerated:
+      name: Upload Accelerated to R2
+      runs-on: ubuntu-20.04
+      needs: [ code-freeze-prep, build-a ]
+      if: ${{ needs.code-freeze-prep.outputs.isTodayAcceleratedFreeze == 'yes' }}
+      steps:
+          - id: download
+            uses: actions/download-artifact@v3
+            env:
+                GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+            with:
+                name: double-zipped-woocommerce.${{ needs.code-freeze-prep.outputs.acceleratedVersion }}
+                path: download
+
+          - run: ls -lah ${{steps.download.outputs.download-path}}
+
+          - name: Upload release zip to Cloudflare R2 bucket
+            uses: ryand56/r2-upload-action@de3eabc2e3137ce07bc3805af441df55f535c64b
+            with:
+              r2-account-id: ${{ secrets.R2_ACCOUNT_ID }}
+              r2-access-key-id: ${{ secrets.R2_ACCESS_KEY_ID }}
+              r2-secret-access-key: ${{ secrets.R2_SECRET_ACCESS_KEY }}
+              r2-bucket: ${{ secrets.R2_BUCKET }}
+              source-dir: ${{ steps.download.outputs.download-path }}
+              destination-dir: ./accelerated/
+
     slack-upload-accelerated:
         name: Upload Accelerated to Slack
         runs-on: ubuntu-20.04

diff --git a/packages/js/explat/CHANGELOG.md b/packages/js/explat/CHANGELOG.md
@@ -1,13 +1,13 @@
-# Changelog 
+# Changelog
 
 This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [2.3.0](https://www.npmjs.com/package/@woocommerce/packages/js/explat/v/2.3.0) - 2022-07-08 
+## [2.3.0](https://www.npmjs.com/package/@woocommerce/packages/js/explat/v/2.3.0) - 2022-07-08
 
 -   Patch - Fix fetchExperimentAssignment response
 -   Minor - Remove PHP and Composer dependencies for packaged JS packages
 
-## [2.2.0](https://www.npmjs.com/package/@woocommerce/packages/js/explat/v/2.2.0) - 2022-06-15 
+## [2.2.0](https://www.npmjs.com/package/@woocommerce/packages/js/explat/v/2.2.0) - 2022-06-15
 
 -   Patch - Added useExperiment example
 -   Patch - Standardize lint scripts: add lint:fix

diff --git a/packages/js/explat/README.md b/packages/js/explat/README.md
@@ -1,6 +1,6 @@
 # ExPlat
 
-This packages includes a component and utility functions that can be used to run A/B Tests in WooCommerce dashboard and reports pages.
+This packages includes a component and utility functions that can be used to run A/B Tests in WooCommerce dashboard, report pages, and frontend pages.
 
 ## Installation
 

diff --git a/packages/js/explat/changelog/45131-add-wca-support-to-explat b/packages/js/explat/changelog/45131-add-wca-support-to-explat
@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+Add support for WooCommerce Analytics.
diff --git a/packages/js/explat/changelog/add-wca-support-to-explat b/packages/js/explat/changelog/add-wca-support-to-explat
@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+Support running A/B testing in WooCommerce frontend
diff --git a/packages/js/explat/src/anon.ts b/packages/js/explat/src/anon.ts
@@ -3,6 +3,11 @@
  */
 import cookie from 'cookie';
 
+/**
+ * Internal dependencies
+ */
+import { canTrack } from './assignment';
+
 let initializeAnonIdPromise: null | Promise< string | null > = null;
 const anonIdPollingIntervalMilliseconds = 50;
 const anonIdPollingIntervalMaxAttempts = 100; // 50 * 100 = 5000 = 5 seconds
@@ -53,7 +58,7 @@ export const initializeAnonId = async (): Promise< string | null > => {
 };
 
 export const getAnonId = async (): Promise< string | null > => {
-	if ( ! window.wcTracks?.isEnabled ) {
+	if ( ! canTrack ) {
 		return null;
 	}
 

diff --git a/packages/js/explat/src/assignment.ts b/packages/js/explat/src/assignment.ts
@@ -5,6 +5,9 @@ import { stringify } from 'qs';
 import { applyFilters } from '@wordpress/hooks';
 import apiFetch from '@wordpress/api-fetch';
 
+export const canTrack =
+	window.wcTracks?.isEnabled || window?._wca?.push !== undefined;
+
 const EXPLAT_VERSION = '0.1.0';
 
 type QueryParams = {
@@ -83,7 +86,7 @@ export const fetchExperimentAssignment = async ( {
 	experimentName: string;
 	anonId: string | null;
 } ): Promise< unknown > => {
-	if ( ! window.wcTracks?.isEnabled ) {
+	if ( ! canTrack ) {
 		throw new Error(
 			`Tracking is disabled, can't fetch experimentAssignment`
 		);
@@ -111,7 +114,7 @@ export const fetchExperimentAssignmentWithAuth = async ( {
 	experimentName: string;
 	anonId: string | null;
 } ): Promise< unknown > => {
-	if ( ! window.wcTracks?.isEnabled ) {
+	if ( ! canTrack ) {
 		throw new Error(
 			`Tracking is disabled, can't fetch experimentAssignment`
 		);

diff --git a/packages/js/explat/src/error.ts b/packages/js/explat/src/error.ts
@@ -26,7 +26,7 @@ export const logError = (
 		if ( isDevelopmentMode ) {
 			console.error( '[ExPlat] ', error.message, error ); // eslint-disable-line no-console
 		} else {
-			if ( ! window.wcTracks?.isEnabled ) {
+			if ( ! window.wcTracks?.isEnabled && ! window?._wca?.push ) {
 				throw new Error(
 					`Tracking is disabled, can't send error to the server`
 				);

diff --git a/packages/js/explat/src/index.ts b/packages/js/explat/src/index.ts
@@ -12,6 +12,7 @@ import { logError } from './error';
 import {
 	fetchExperimentAssignment,
 	fetchExperimentAssignmentWithAuth,
+	canTrack,
 } from './assignment';
 import { getAnonId, initializeAnonId } from './anon';
 declare global {
@@ -20,11 +21,14 @@ declare global {
 			isEnabled: boolean;
 			enable?: ( cb: () => void ) => void;
 		};
+		_wca: {
+			push?: ( cb: () => void ) => void;
+		};
 	}
 }
 
 export const initializeExPlat = (): void => {
-	if ( window.wcTracks?.isEnabled ) {
+	if ( canTrack ) {
 		initializeAnonId().catch( ( e ) => logError( { message: e.message } ) );
 	}
 };

diff --git a/packages/js/explat/src/test/assignment-test.js b/packages/js/explat/src/test/assignment-test.js
@@ -1,3 +1,7 @@
+// Define that tracking is enabled before import
+// so that assignments can get the correct value.
+global.wcTracks.isEnabled = true;
+
 /**
  * External dependencies
  */
@@ -16,7 +20,6 @@ global.fetch = jest.fn().mockImplementation( () =>
 		status: 200,
 	} )
 );
-global.wcTracks.isEnabled = true;
 
 const fetchMock = jest.spyOn( global, 'fetch' );
 

diff --git a/packages/js/product-editor/changelog/fix-product-editor-crashes-text-area-toolbar b/packages/js/product-editor/changelog/fix-product-editor-crashes-text-area-toolbar
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Product Editor: Workaround a Gutenberg bug that resulted in a crash when clicking in the margin of the editor when the summary or description fields were focused, by reverting the changes that were made in #44166.
diff --git a/packages/js/product-editor/src/blocks/generic/tab/editor.scss b/packages/js/product-editor/src/blocks/generic/tab/editor.scss
@@ -4,19 +4,6 @@
 	}
 }
 
-.wp-block-woocommerce-product-tab {
-	padding-left: calc( 2 * $gap );
-	padding-right: calc( 2 * $gap );
-
-	@include breakpoint(">782px") {
-		padding-left: 0;
-		padding-right: 0;
-		max-width: 650px;
-		margin-left: auto;
-		margin-right: auto;
-	}
-}
-
 .woocommerce-product-tabs {
 	.wp-block-woocommerce-product-tab__button:focus:not( :disabled ) {
 		box-shadow: none;

diff --git a/packages/js/product-editor/src/blocks/generic/text-area/edit.tsx b/packages/js/product-editor/src/blocks/generic/text-area/edit.tsx
@@ -18,6 +18,7 @@ import type {
 	TextAreaBlockEditProps,
 } from './types';
 import AligmentToolbarButton from './toolbar/toolbar-button-alignment';
+import { useClearSelectedBlockOnBlur } from '../../../hooks/use-clear-selected-block-on-blur';
 import useProductEntityProp from '../../../hooks/use-product-entity-prop';
 import { Label } from '../../../components/label/label';
 
@@ -61,6 +62,11 @@ export function TextAreaBlockEdit( {
 		postType,
 	} );
 
+	// This is a workaround to hide the toolbar when the block is blurred.
+	// This is a temporary solution until using Gutenberg 18 with the
+	// fix from https://github.com/WordPress/gutenberg/pull/59800
+	const { handleBlur: hideToolbar } = useClearSelectedBlockOnBlur();
+
 	function setAlignment( value: TextAreaBlockEditAttributes[ 'align' ] ) {
 		setAttributes( { align: value } );
 	}
@@ -120,6 +126,7 @@ export function TextAreaBlockEdit( {
 						placeholder={ placeholder }
 						required={ required }
 						disabled={ disabled }
+						onBlur={ hideToolbar }
 					/>
 				) }
 
@@ -130,6 +137,7 @@ export function TextAreaBlockEdit( {
 						placeholder={ placeholder }
 						required={ required }
 						disabled={ disabled }
+						onBlur={ hideToolbar }
 					/>
 				) }
 			</BaseControl>

diff --git a/packages/js/product-editor/src/blocks/product-fields/summary/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/summary/edit.tsx
@@ -23,6 +23,7 @@ import { ParagraphRTLControl } from './paragraph-rtl-control';
 import { SummaryAttributes } from './types';
 import { ALIGNMENT_CONTROLS } from './constants';
 import { ProductEditorBlockEditProps } from '../../../types';
+import { useClearSelectedBlockOnBlur } from '../../../hooks/use-clear-selected-block-on-blur';
 
 export function SummaryBlockEdit( {
 	attributes,
@@ -44,6 +45,11 @@ export function SummaryBlockEdit( {
 		attributes.property
 	);
 
+	// This is a workaround to hide the toolbar when the block is blurred.
+	// This is a temporary solution until using Gutenberg 18 with the
+	// fix from https://github.com/WordPress/gutenberg/pull/59800
+	const { handleBlur: hideToolbar } = useClearSelectedBlockOnBlur();
+
 	function handleAlignmentChange( value: SummaryAttributes[ 'align' ] ) {
 		setAttributes( { align: value } );
 	}
@@ -114,6 +120,7 @@ export function SummaryBlockEdit( {
 						} ) }
 						dir={ direction }
 						allowedFormats={ allowedFormats }
+						onBlur={ hideToolbar }
 					/>
 				</div>
 			</BaseControl>

diff --git a/packages/js/product-editor/src/components/block-editor/style.scss b/packages/js/product-editor/src/components/block-editor/style.scss
@@ -147,7 +147,17 @@
 
 	.block-editor-block-list__layout {
 		&.is-root-container {
+			padding-left: 0;
+			padding-right: 0;
 			padding-bottom: 128px;
+			margin-left: calc(2 * $gap);
+			margin-right: calc(2 * $gap);
+
+			@include breakpoint(">782px") {
+				max-width: 650px;
+				margin-left: auto;
+				margin-right: auto;
+			}
 		}
 
 		.block-editor-block-list__block {

diff --git a/packages/js/product-editor/src/hooks/index.ts b/packages/js/product-editor/src/hooks/index.ts
@@ -10,3 +10,4 @@ export { useProductTemplate as __experimentalUseProductTemplate } from './use-pr
 export { useProductScheduled as __experimentalUseProductScheduled } from './use-product-scheduled';
 export { useProductManager as __experimentalUseProductManager } from './use-product-manager';
 export { useMetaboxHiddenProduct as __experimentalUseMetaboxHiddenProduct } from './use-metabox-hidden-product';
+export { useClearSelectedBlockOnBlur as __experimentalClearSelectedBlockOnBlur } from './use-clear-selected-block-on-blur';
diff --git a/packages/js/product-editor/src/hooks/use-clear-selected-block-on-blur/index.ts b/packages/js/product-editor/src/hooks/use-clear-selected-block-on-blur/index.ts
@@ -0,0 +1 @@
+export * from './use-clear-selected-block-on-blur';
diff --git a/...uct-editor/src/hooks/use-clear-selected-block-on-blur/use-clear-selected-block-on-blur.ts b/...uct-editor/src/hooks/use-clear-selected-block-on-blur/use-clear-selected-block-on-blur.ts
@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+// This is a workaround to hide the toolbar when the block is blurred.
+// This is a temporary solution until using Gutenberg 18 with the
+// fix from https://github.com/WordPress/gutenberg/pull/59800
+export const useClearSelectedBlockOnBlur = () => {
+	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+	// @ts-ignore No types for this exist yet.
+	const { clearSelectedBlock } = useDispatch( blockEditorStore );
+
+	function handleBlur( event: {
+		relatedTarget: ( EventTarget & Element ) | null;
+	} ) {
+		const isToolbar = event?.relatedTarget?.closest(
+			'.block-editor-block-contextual-toolbar'
+		);
+
+		if ( ! isToolbar ) {
+			clearSelectedBlock();
+		}
+	}
+
+	return {
+		handleBlur,
+	};
+};
diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/layout.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/layout.tsx
@@ -128,7 +128,6 @@ export const Layout = () => {
 				>
 					<Transitional
 						sendEvent={ sendEvent }
-						editor={ editor }
 						isWooExpress={ isWooExpress() }
 						isSurveyOpen={ isSurveyOpen }
 						setSurveyOpen={ setSurveyOpen }

diff --git a/plugins/woocommerce-admin/client/customize-store/assets/icons/lesson-plan.js b/plugins/woocommerce-admin/client/customize-store/assets/icons/lesson-plan.js
@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const lessonPLan = (
+	<SVG
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		fill="none"
+		viewBox="0 0 24 24"
+	>
+		<Path
+			fill="#1E1E1E"
+			d="m8.85 4.821-1.203-.895-2.083 2.802-1.114-.83L3.553 7.1 5.87 8.829l2.98-4.008ZM20 7.75h-8.889v-1.5H20v1.5Zm0 5h-8.889v-1.5H20v1.5Z"
+		/>
+		<Path
+			fill="#1E1E1E"
+			fillRule="evenodd"
+			d="M6 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0-1a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm2 4a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm-1 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+			clipRule="evenodd"
+		/>
+		<Path fill="#1E1E1E" d="M11.111 17.75H20v-1.5h-8.889v1.5Z" />
+	</SVG>
+);
+export default lessonPLan;