Use canvas param instead of manually entering edit mode

plugins/woocommerce-blocks/tests/e2e/tests/add-to-cart-form/add-to-cart-form.block_theme.spec.ts

@@ -62,8 +62,8 @@ test.describe( `${ blockData.name } Block`, () => {
 		await admin.visitSiteEditor( {
 			postId: `woocommerce/woocommerce//archive-product`,
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
-		await editorUtils.enterEditMode();
 
 		await editor.insertBlock( { name: 'woocommerce/single-product' } );
 
@@ -89,8 +89,8 @@ test.describe( `${ blockData.name } Block`, () => {
 		await admin.visitSiteEditor( {
 			postId: `woocommerce/woocommerce//single-product`,
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
-		await editorUtils.enterEditMode();
 
 		await editor.setContent( '' );
 

plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-block.merchant.block_theme.spec.ts

@@ -25,12 +25,12 @@ test.describe( 'Merchant → Cart', () => {
 	const blockSelectorInEditor = blockData.selectors.editor.block as string;
 
 	test.describe( 'in page editor', () => {
-		test.beforeEach( async ( { editorUtils, admin } ) => {
+		test.beforeEach( async ( { admin } ) => {
 			await admin.visitSiteEditor( {
 				postId: 'woocommerce/woocommerce//page-cart',
 				postType: 'wp_template',
+				canvas: 'edit',
 			} );
-			await editorUtils.enterEditMode();
 		} );
 
 		test( 'renders without crashing and can only be inserted once', async ( {

plugins/woocommerce-blocks/tests/e2e/tests/checkout/checkout-block.merchant.block_theme.spec.ts

@@ -42,12 +42,13 @@ test.describe( 'Merchant → Checkout', () => {
 	// `as string` is safe here because we know the variable is a string, it is defined above.
 	const blockSelectorInEditor = blockData.selectors.editor.block as string;
 
-	test.beforeEach( async ( { editorUtils, admin, editor } ) => {
+	test.beforeEach( async ( { admin, editor } ) => {
 		await admin.visitSiteEditor( {
 			postId: 'woocommerce/woocommerce//page-checkout',
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
-		await editorUtils.enterEditMode();
+
 		await editor.openDocumentSettingsSidebar();
 	} );
 
@@ -147,8 +148,8 @@ test.describe( 'Merchant → Checkout', () => {
 		await admin.visitSiteEditor( {
 			postId: 'woocommerce/woocommerce//page-checkout',
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
-		await editorUtils.enterEditMode();
 		await editor.openDocumentSettingsSidebar();
 		await editor.selectBlocks(
 			blockSelectorInEditor +
@@ -190,8 +191,8 @@ test.describe( 'Merchant → Checkout', () => {
 		await admin.visitSiteEditor( {
 			postId: 'woocommerce/woocommerce//page-checkout',
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
-		await editorUtils.enterEditMode();
 		await editor.openDocumentSettingsSidebar();
 		await editor.selectBlocks(
 			blockSelectorInEditor +

plugins/woocommerce-blocks/tests/e2e/tests/checkout/checkout-block.shopper.block_theme.side_effects.spec.ts

@@ -237,33 +237,31 @@ test.describe( 'Shopper → Shipping and Billing Addresses', () => {
 	// `as string` is safe here because we know the variable is a string, it is defined above.
 	const blockSelectorInEditor = blockData.selectors.editor.block as string;
 
-	test.beforeEach(
+	test.beforeEach( async ( { editor, admin, editorUtils, page } ) => {
-		async ( { editor, frontendUtils, admin, editorUtils, page } ) => {
+		await admin.visitSiteEditor( {
-			await admin.visitSiteEditor( {
+			postId: 'woocommerce/woocommerce//page-checkout',
-				postId: 'woocommerce/woocommerce//page-checkout',
+			postType: 'wp_template',
-				postType: 'wp_template',
+			canvas: 'edit',
-			} );
+		} );
-			await editorUtils.enterEditMode();
+		await editor.openDocumentSettingsSidebar();
-			await editor.openDocumentSettingsSidebar();
+		await editor.selectBlocks(
-			await editor.selectBlocks(
+			blockSelectorInEditor +
-				blockSelectorInEditor +
+				'  [data-type="woocommerce/checkout-shipping-address-block"]'
-					'  [data-type="woocommerce/checkout-shipping-address-block"]'
+		);
-			);
 
-			const checkbox = page.getByRole( 'checkbox', {
+		const checkbox = page.getByRole( 'checkbox', {
-				name: 'Company',
+			name: 'Company',
-				exact: true,
+			exact: true,
-			} );
+		} );
-			await checkbox.check();
+		await checkbox.check();
-			await expect( checkbox ).toBeChecked();
+		await expect( checkbox ).toBeChecked();
-			await expect(
+		await expect(
-				editor.canvas.locator(
+			editor.canvas.locator(
-					'div.wc-block-components-address-form__company'
+				'div.wc-block-components-address-form__company'
-				)
+			)
-			).toBeVisible();
+		).toBeVisible();
-			await editorUtils.saveSiteEditorEntities();
+		await editorUtils.saveSiteEditorEntities();
-		}
+	} );
-	);
 
 	test( 'User can add postcodes for different countries', async ( {
 		frontendUtils,

plugins/woocommerce-blocks/tests/e2e/tests/checkout/order-confirmation.block_theme.side_effects.spec.ts

@@ -44,8 +44,8 @@ test.describe( 'Shopper → Order Confirmation (logged in user)', () => {
 		await admin.visitSiteEditor( {
 			postId: 'woocommerce/woocommerce//order-confirmation',
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
-		await editorUtils.enterEditMode();
 		await editorUtils.transformIntoBlocks();
 	} );
 

plugins/woocommerce-blocks/tests/e2e/tests/classic-template/classic-template.block_theme.side_effects.spec.ts

@@ -62,8 +62,8 @@ for ( const { templateTitle, slug } of Object.values( templates ) ) {
 			await admin.visitSiteEditor( {
 				postId: `woocommerce/woocommerce//${ slug }`,
 				postType: 'wp_template',
+				canvas: 'edit',
 			} );
-			await editorUtils.enterEditMode();
 			const block = await editorUtils.getBlockByName( blockData.name );
 
 			await expect( block ).toBeVisible();
@@ -75,14 +75,13 @@ for ( const { templateTitle, slug } of Object.values( templates ) ) {
 		test.skip( `is rendered on ${ templateTitle } template - frontend side`, async ( {
 			admin,
 			editor,
-			editorUtils,
 			page,
 		} ) => {
 			await admin.visitSiteEditor( {
 				postId: `woocommerce/woocommerce//${ slug }`,
 				postType: 'wp_template',
+				canvas: 'edit',
 			} );
-			await editorUtils.enterEditMode();
 			await editor.insertBlock( {
 				name: 'core/paragraph',
 				attributes: { content: 'Hello World' },

plugins/woocommerce-blocks/tests/e2e/tests/local-pickup/local-pickup.merchant.block_theme.side_effects.spec.ts

@@ -37,8 +37,8 @@ test.describe( 'Merchant → Local Pickup Settings', () => {
 		await admin.visitSiteEditor( {
 			postId: 'woocommerce/woocommerce//page-checkout',
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
-		await editorUtils.enterEditMode();
 
 		const block = await editorUtils.getBlockByName(
 			'woocommerce/checkout-shipping-method-block'
@@ -73,8 +73,8 @@ test.describe( 'Merchant → Local Pickup Settings', () => {
 		await admin.visitSiteEditor( {
 			postId: 'woocommerce/woocommerce//page-checkout',
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
-		await editorUtils.enterEditMode();
 
 		await expect(
 			editor.canvas.getByText( 'Edited from settings page' )

plugins/woocommerce-blocks/tests/e2e/tests/mini-cart/mini-cart-block.merchant.block_theme.side_effects.spec.ts

@@ -24,8 +24,8 @@ test.describe( 'Merchant → Mini Cart', () => {
 			await admin.visitSiteEditor( {
 				postId: `woocommerce/woocommerce//single-product`,
 				postType: 'wp_template',
+				canvas: 'edit',
 			} );
-			await editorUtils.enterEditMode();
 
 			await editor.setContent( '' );
 
@@ -40,8 +40,8 @@ test.describe( 'Merchant → Mini Cart', () => {
 			await admin.visitSiteEditor( {
 				postId: `woocommerce/woocommerce//single-product`,
 				postType: 'wp_template',
+				canvas: 'edit',
 			} );
-			await editorUtils.enterEditMode();
 			await editorUtils.openGlobalBlockInserter();
 
 			await editorUtils.page

plugins/woocommerce-blocks/tests/e2e/tests/on-sale-badge/on-sale-badge-single-product-template.block_theme.side_effects.spec.ts

@@ -72,12 +72,12 @@ const getBoundingClientRect = async ( {
 };
 test.describe( `${ blockData.name }`, () => {
 	test.describe( `On the Single Product Template`, () => {
-		test.beforeEach( async ( { admin, editorUtils, editor } ) => {
+		test.beforeEach( async ( { admin, editor } ) => {
 			await admin.visitSiteEditor( {
 				postId: `woocommerce/woocommerce//${ blockData.slug }`,
 				postType: 'wp_template',
+				canvas: 'edit',
 			} );
-			await editorUtils.enterEditMode();
 			await editor.setContent( '' );
 		} );
 

plugins/woocommerce-blocks/tests/e2e/tests/product-collection/product-collection.block_theme.side_effects.spec.ts

@@ -953,8 +953,8 @@ test.describe( 'Product Collection', () => {
 			await admin.visitSiteEditor( {
 				postId: `woocommerce/woocommerce//taxonomy-product_cat`,
 				postType: 'wp_template',
+				canvas: 'edit',
 			} );
-			await editorUtils.enterEditMode();
 			await editorUtils.insertBlockUsingGlobalInserter(
 				pageObject.BLOCK_NAME
 			);
@@ -982,8 +982,8 @@ test.describe( 'Product Collection', () => {
 			await admin.visitSiteEditor( {
 				postId: `woocommerce/woocommerce//taxonomy-product_tag`,
 				postType: 'wp_template',
+				canvas: 'edit',
 			} );
-			await editorUtils.enterEditMode();
 			await editorUtils.insertBlockUsingGlobalInserter(
 				pageObject.BLOCK_NAME
 			);

plugins/woocommerce-blocks/tests/e2e/tests/product-collection/product-collection.page.ts

@@ -182,9 +182,8 @@ class ProductCollectionPage {
 		await this.admin.visitSiteEditor( {
 			postId: template,
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
-		await this.editorUtils.waitForSiteEditorFinishLoading();
-		await this.editorUtils.enterEditMode();
 		await this.editorUtils.replaceBlockByBlockName(
 			'core/query',
 			this.BLOCK_SLUG

plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-large-image-next-previous/product-gallery-large-image-next-previous.block_theme.side_effects.spec.ts

@@ -87,12 +87,12 @@ const test = base.extend< { pageObject: ProductGalleryPage } >( {
 } );
 
 test.describe( `${ blockData.name }`, () => {
-	test.beforeEach( async ( { admin, editorUtils } ) => {
+	test.beforeEach( async ( { admin } ) => {
 		await admin.visitSiteEditor( {
 			postId: `woocommerce/woocommerce//${ blockData.slug }`,
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
-		await editorUtils.enterEditMode();
 	} );
 
 	// eslint-disable-next-line playwright/no-skipped-test

plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-large-image-next-previous/utils.ts

@@ -1,19 +1,14 @@
 /**
  * External dependencies
  */
-import { EditorUtils } from '@woocommerce/e2e-utils';
 import { Admin, Editor } from '@wordpress/e2e-test-utils-playwright';
 
-export const addBlock = async (
+export const addBlock = async ( admin: Admin, editor: Editor ) => {
-	admin: Admin,
-	editor: Editor,
-	editorUtils: EditorUtils
-) => {
 	await admin.visitSiteEditor( {
 		postId: `woocommerce/woocommerce//single-product`,
 		postType: 'wp_template',
+		canvas: 'edit',
 	} );
-	await editorUtils.enterEditMode();
 
 	await editor.insertBlock( {
 		name: 'woocommerce/product-gallery',

plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-large-image/product-gallery-large-image.block_theme.side_effects.spec.ts

@@ -31,12 +31,12 @@ const test = base.extend< { pageObject: ProductGalleryPage } >( {
 } );
 
 test.describe( `${ blockData.name }`, () => {
-	test.beforeEach( async ( { admin, editorUtils, editor } ) => {
+	test.beforeEach( async ( { admin, editor } ) => {
 		await admin.visitSiteEditor( {
 			postId: `woocommerce/woocommerce//${ blockData.slug }`,
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
-		await editorUtils.enterEditMode();
 		await editor.openDocumentSettingsSidebar();
 	} );
 

plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-pager/product-gallery-pager.block_theme.side_effects.spec.ts

@@ -44,12 +44,12 @@ const test = base.extend< { pageObject: ProductGalleryPage } >( {
 } );
 
 test.describe( `${ blockData.name }`, () => {
-	test.beforeEach( async ( { admin, editorUtils, editor } ) => {
+	test.beforeEach( async ( { admin, editor } ) => {
 		await admin.visitSiteEditor( {
 			postId: `woocommerce/woocommerce//${ blockData.slug }`,
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
-		await editorUtils.enterEditMode();
 		await editor.openDocumentSettingsSidebar();
 	} );
 

plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-thumbnails/product-gallery-thumbnails.block_theme.side_effects.spec.ts

@@ -48,12 +48,12 @@ const test = base.extend< { pageObject: ProductGalleryPage } >( {
 	},
 } );
 test.describe( `${ blockData.name }`, () => {
-	test.beforeEach( async ( { admin, editorUtils } ) => {
+	test.beforeEach( async ( { admin } ) => {
 		await admin.visitSiteEditor( {
 			postId: `woocommerce/woocommerce//${ blockData.slug }`,
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
-		await editorUtils.enterEditMode();
 	} );
 
 	test( 'Renders Product Gallery Thumbnails block on the editor and frontend side', async ( {

plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-thumbnails/utils.ts

@@ -1,24 +1,17 @@
 /**
  * External dependencies
  */
-import { EditorUtils } from '@woocommerce/e2e-utils';
 import { Admin, Editor } from '@wordpress/e2e-test-utils-playwright';
 
 // Define a utility function to add the "woocommerce/product-gallery" block to the editor
-export const addBlock = async (
+export const addBlock = async ( admin: Admin, editor: Editor ) => {
-	admin: Admin,
-	editor: Editor,
-	editorUtils: EditorUtils
-) => {
 	// Visit the site editor for the specific product page
 	await admin.visitSiteEditor( {
 		postId: `woocommerce/woocommerce//single-product`,
 		postType: 'wp_template',
+		canvas: 'edit',
 	} );
 
-	// Enter the edit mode
-	await editorUtils.enterEditMode();
-
 	// Insert the "woocommerce/product-gallery" block
 	await editor.insertBlock( {
 		name: 'woocommerce/product-gallery',

plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/product-gallery.block_theme.side_effects.spec.ts

@@ -83,12 +83,12 @@ const getThumbnailImageIdByNth = async (
 };
 
 test.describe( `${ blockData.name }`, () => {
-	test.beforeEach( async ( { admin, editorUtils } ) => {
+	test.beforeEach( async ( { admin } ) => {
 		await admin.visitSiteEditor( {
 			postId: `woocommerce/woocommerce//${ blockData.slug }`,
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
-		await editorUtils.enterEditMode();
 	} );
 
 	test.describe( 'with thumbnails', () => {
@@ -532,8 +532,8 @@ test.describe( `${ blockData.name }`, () => {
 			await admin.visitSiteEditor( {
 				postId: `woocommerce/woocommerce//product-gallery`,
 				postType: 'wp_template_part',
+				canvas: 'edit',
 			} );
-			await editorUtils.enterEditMode();
 			await editorUtils.openGlobalBlockInserter();
 			await page.getByRole( 'tab', { name: 'Blocks' } ).click();
 			const productGalleryBlockOption = page

plugins/woocommerce-blocks/tests/e2e/tests/related-products/related-products.block_theme.spec.ts

@@ -32,13 +32,12 @@ test.describe( `${ blockData.name } Block`, () => {
 	test( "can't be added in the Post Editor - Product Catalog Template", async ( {
 		admin,
 		editor,
-		editorUtils,
 	} ) => {
 		await admin.visitSiteEditor( {
 			postId: `woocommerce/woocommerce//archive-product`,
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
-		await editorUtils.enterEditMode();
 
 		try {
 			await editor.insertBlock( { name: blockData.slug } );
@@ -55,8 +54,8 @@ test.describe( `${ blockData.name } Block`, () => {
 		await admin.visitSiteEditor( {
 			postId: `woocommerce/woocommerce//single-product`,
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
-		await editorUtils.enterEditMode();
 
 		await editor.setContent( '' );
 

plugins/woocommerce-blocks/tests/e2e/tests/templates/cart-template.block_theme.spec.ts

@@ -11,13 +11,12 @@ test.describe( 'Test the cart template', async () => {
 	test( 'Template can be opened in the site editor', async ( {
 		admin,
 		page,
-		editorUtils,
 	} ) => {
 		await admin.visitSiteEditor( {
 			postId: templatePath,
 			postType: templateType,
+			canvas: 'edit',
 		} );
-		await editorUtils.enterEditMode();
 		await expect(
 			page
 				.frameLocator( 'iframe[title="Editor canvas"i]' )
@@ -37,7 +36,6 @@ test.describe( 'Test the cart template', async () => {
 			.getByRole( 'button', { name: 'Cart', exact: true } )
 			.click();
 		await editorUtils.enterEditMode();
-
 		await expect(
 			editor.canvas.locator( 'h1:has-text("Cart")' ).first()
 		).toBeVisible();
@@ -66,14 +64,13 @@ test.describe( 'Test the cart template', async () => {
 test.describe( 'Test editing the cart template', async () => {
 	test( 'Merchant can transform shortcode block into blocks', async ( {
 		admin,
-		editorUtils,
 		editor,
 	} ) => {
 		await admin.visitSiteEditor( {
 			postId: templatePath,
 			postType: templateType,
+			canvas: 'edit',
 		} );
-		await editorUtils.enterEditMode();
 		await editor.setContent(
 			'<!-- wp:woocommerce/classic-shortcode {"shortcode":"cart"} /-->'
 		);

plugins/woocommerce-blocks/tests/e2e/tests/templates/checkout-template.block_theme.spec.ts

@@ -11,13 +11,12 @@ test.describe( 'Test the checkout template', async () => {
 	test( 'Template can be opened in the site editor', async ( {
 		admin,
 		page,
-		editorUtils,
 	} ) => {
 		await admin.visitSiteEditor( {
 			postId: templatePath,
 			postType: templateType,
+			canvas: 'edit',
 		} );
-		await editorUtils.enterEditMode();
 		await expect(
 			page
 				.frameLocator( 'iframe[title="Editor canvas"i]' )
@@ -75,14 +74,13 @@ test.describe( 'Test the checkout template', async () => {
 test.describe( 'Test editing the checkout template', async () => {
 	test( 'Merchant can transform shortcode block into blocks', async ( {
 		admin,
-		editorUtils,
 		editor,
 	} ) => {
 		await admin.visitSiteEditor( {
 			postId: templatePath,
 			postType: templateType,
+			canvas: 'edit',
 		} );
-		await editorUtils.enterEditMode();
 		await editor.setContent(
 			'<!-- wp:woocommerce/classic-shortcode {"shortcode":"checkout"} /-->'
 		);

plugins/woocommerce-blocks/tests/e2e/tests/templates/order-confirmation.block_theme.spec.ts

@@ -12,8 +12,8 @@ test.describe( 'Test the order confirmation template', async () => {
 		await admin.visitSiteEditor( {
 			postId: 'woocommerce/woocommerce//order-confirmation',
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
-		await editorUtils.enterEditMode();
 		await editorUtils.transformIntoBlocks();
 		await expect(
 			page

plugins/woocommerce-blocks/tests/e2e/tests/templates/template-customization.block_theme.side_effects.spec.ts

@@ -48,9 +48,8 @@ for ( const testData of testToRun ) {
 			await admin.visitSiteEditor( {
 				postId: `${ BLOCK_THEME_WITH_TEMPLATES_SLUG }//${ testData.templatePath }`,
 				postType: testData.templateType,
+				canvas: 'edit',
 			} );
-			await editorUtils.enterEditMode();
-			await editorUtils.waitForSiteEditorFinishLoading();
 			await editorUtils.editor.insertBlock( {
 				name: 'core/paragraph',
 				attributes: { content: userText },