Update our blocks apiVersion from 2 to 3

assets/js/blocks/comments/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "elasticpress/comments",
 	"title": "Search Comments",
 	"category": "elasticpress",

assets/js/blocks/facets/date/block.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://schemas.wp.org/trunk/block.json",
-  "apiVersion": 2,
+  "apiVersion": 3,
   "name": "elasticpress/facet-date",
   "title": "Filter by Post Date",
   "category": "elasticpress",

assets/js/blocks/facets/meta-range/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "elasticpress/facet-meta-range",
 	"title": "Filter by Metadata Range - Beta",
 	"category": "elasticpress",

assets/js/blocks/facets/meta/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "elasticpress/facet-meta",
 	"title": "Filter by Metadata",
 	"category": "elasticpress",

assets/js/blocks/facets/post-type/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"title": "Filter by Post Type",
 	"description": "Let visitors filter your content by post type.",
 	"textdomain": "elasticpress",

assets/js/blocks/facets/taxonomy/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "elasticpress/facet",
 	"title": "Filter by Taxonomy",
 	"category": "elasticpress",

assets/js/blocks/related-posts/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "elasticpress/related-posts",
 	"title": "Related Posts",
 	"category": "elasticpress",

tests/cypress/config.js

@@ -2,6 +2,7 @@ const fs = require('fs');
 const { defineConfig } = require('cypress');
 
 module.exports = defineConfig({
+	chromeWebSecurity: false,
 	fixturesFolder: 'tests/cypress/fixtures',
 	screenshotsFolder: 'tests/cypress/screenshots',
 	videosFolder: 'tests/cypress/videos',

tests/cypress/integration/features/instant-results.cy.js

@@ -309,14 +309,18 @@ describe('Instant Results Feature', { tags: '@slow' }, () => {
 					content: 'Testing openModal()',
 				});
 
+				cy.getBlockEditor().as('iframe');
 				cy.openBlockInserter();
 				cy.insertBlock('Buttons');
-				cy.get('.wp-block-button__link').type('Search "Block"');
+				cy.closeBlockInserter();
+				cy.get('@iframe').find('.wp-block-button__link').type('Search "Block"');
 
 				/**
 				 * Update the post and visit the front end.
 				 */
+				cy.wait(500); // eslint-disable-line
 				cy.get('.editor-post-publish-button__button').click();
+				cy.wait(2000); // eslint-disable-line
 				cy.get('.components-snackbar__action').click();
 
 				/**

tests/cypress/integration/features/related-posts.cy.js

@@ -51,18 +51,21 @@ describe('Related Posts Feature', () => {
 			content: 'Inceptos tristique class ac eleifend leo.',
 		});
 
+		cy.getBlockEditor().as('iframe');
+
 		/**
 		 * On the last post insert a Related Posts block.
 		 */
 		cy.openBlockInserter();
 		cy.getBlocksList().should('contain.text', 'Related Posts');
 		cy.insertBlock('Related Posts');
+		cy.closeBlockInserter();
 
 		/**
 		 * Verify that the block is inserted into the editor, and contains the
 		 * expected content.
 		 */
-		cy.get('.wp-block.wp-block-elasticpress-related-posts').first().as('block');
+		cy.get('@iframe').find('.wp-block.wp-block-elasticpress-related-posts').first().as('block');
 		cy.get('@block')
 			.find('li')
 			.should('contain', 'Test related posts block #')
@@ -104,6 +107,7 @@ describe('Related Posts Feature', () => {
 		 * Update the post and visit the front end.
 		 */
 		cy.get('.editor-post-publish-button__button').click();
+		cy.wait(2000); // eslint-disable-line
 		cy.get('.components-snackbar__action').click();
 
 		/**

tests/cypress/support/commands.js

@@ -130,7 +130,8 @@ Cypress.Commands.add('publishPost', (postData, viewPost) => {
 	const newPostData = { title: 'Test Post', content: 'Test content.', ...postData };
 
 	cy.visitAdminPage('post-new.php');
-	cy.get('h1.editor-post-title__input, #post-title-0').should('exist');
+	cy.getBlockEditor().as('iframe');
+	cy.get('@iframe').find('h1.editor-post-title__input, #post-title-0').should('exist');
 	cy.get('body').then(($body) => {
 		const welcomeGuide = $body.find(
 			'.edit-post-welcome-guide .components-modal__header button',
@@ -140,11 +141,15 @@ Cypress.Commands.add('publishPost', (postData, viewPost) => {
 		}
 	});
 
-	cy.get('h1.editor-post-title__input, #post-title-0').clearThenType(newPostData.title);
-	cy.get('.block-editor-default-block-appender__content').type(newPostData.content);
+	cy.get('@iframe')
+		.find('h1.editor-post-title__input, #post-title-0')
+		.clearThenType(newPostData.title);
+	cy.get('@iframe')
+		.find('.block-editor-default-block-appender__content')
+		.type(newPostData.content);
 
 	if (newPostData.password && newPostData.password !== '') {
-		cy.get('h1.editor-post-title__input').click();
+		cy.get('@iframe').find('h1.editor-post-title__input').click();
 		if (wpVersion === '6.0') {
 			cy.get('body').then(($body) => {
 				const $button = $body.find('.edit-post-post-visibility__toggle');
@@ -431,19 +436,23 @@ Cypress.Commands.add('createAutosavePost', (postData) => {
 	const newPostData = { title: 'Test Post', content: 'Test content.', ...postData };
 
 	cy.visitAdminPage('post-new.php');
-	cy.get('h1.editor-post-title__input, #post-title-0').should('exist');
+	cy.getBlockEditor().as('iframe');
+	cy.get('@iframe').find('h1.editor-post-title__input, #post-title-0').should('exist');
 	cy.get('body').then(($body) => {
 		const welcomeGuide = $body.find(
 			'.edit-post-welcome-guide .components-modal__header button',
 		);
-		cy.log(welcomeGuide);
 		if (welcomeGuide.length) {
 			welcomeGuide.click();
 		}
 	});
 
-	cy.get('h1.editor-post-title__input, #post-title-0').clearThenType(newPostData.title);
-	cy.get('.block-editor-default-block-appender__content').type(newPostData.content);
+	cy.get('@iframe')
+		.find('h1.editor-post-title__input, #post-title-0')
+		.clearThenType(newPostData.title);
+	cy.get('@iframe')
+		.find('.block-editor-default-block-appender__content')
+		.type(newPostData.content);
 
 	/**
 	 * Wait for autosave to complete.

tests/cypress/support/commands/block-editor.js

@@ -1,5 +1,7 @@
 /* global wpVersion */
 
+import { getIframe } from '../functions/get-iframe';
+
 Cypress.Commands.add('openBlockSettingsSidebar', () => {
 	cy.get('body').then(($el) => {
 		if ($el.hasClass('widgets-php')) {
@@ -15,7 +17,7 @@ Cypress.Commands.add('openBlockSettingsSidebar', () => {
 			cy.get(
 				`.edit-post-sidebar__panel-tab,
 				.edit-post-sidebar__panel-tabs button,
-				.editor-sidebar__panel-tabs button`,
+				.editor-sidebar__panel-tabs button:contains('Block')`,
 			)
 				.contains('Block')
 				.click();
@@ -39,6 +41,18 @@ Cypress.Commands.add('openBlockInserter', () => {
 	});
 });
 
+Cypress.Commands.add('closeBlockInserter', () => {
+	cy.get('body').then(($body) => {
+		if ($body.hasClass('widgets-php')) {
+			cy.get('.edit-widgets-header-toolbar__inserter-toggle').click();
+		} else {
+			cy.get(
+				'.edit-post-header-toolbar__inserter-toggle,.editor-document-tools__inserter-toggle',
+			).click();
+		}
+	});
+});
+
 Cypress.Commands.add('getBlocksList', () => {
 	cy.get('.block-editor-inserter__block-list');
 });
@@ -180,3 +194,18 @@ Cypress.Commands.add('supportsBlockDimensions', { prevSubject: true }, (subject,
 
 	cy.wrap(subject).should('have.css', 'padding', '10px 15px');
 });
+
+Cypress.Commands.add('getBlockEditor', () => {
+	// Ensure the editor is loaded.
+	cy.get('.edit-post-visual-editor').should('exist');
+
+	return cy
+		.get('body')
+		.then(($body) => {
+			if ($body.find('iframe[name="editor-canvas"]').length) {
+				return getIframe('iframe[name="editor-canvas"]');
+			}
+			return $body;
+		})
+		.then(cy.wrap);
+});

tests/cypress/support/functions/get-iframe.js

@@ -0,0 +1,108 @@
+/**
+ * Code taken from the Cypress iframe package.
+ *
+ * https://gitlab.com/kgroat/cypress-iframe
+ */
+
+const DEFAULT_OPTS = {
+	log: true,
+	timeout: 30000,
+};
+
+const DEFAULT_IFRAME_SELECTOR = 'iframe';
+
+function sleep(timeout) {
+	return new Promise((resolve) => setTimeout(resolve, timeout)); // eslint-disable-line no-promise-executor-return
+}
+
+const frameLoaded = (selector, opts) => {
+	if (selector === undefined) {
+		selector = DEFAULT_IFRAME_SELECTOR; // eslint-disable-line no-param-reassign
+	} else if (typeof selector === 'object') {
+		opts = selector; // eslint-disable-line no-param-reassign
+		selector = DEFAULT_IFRAME_SELECTOR; // eslint-disable-line no-param-reassign
+	}
+
+	const fullOpts = {
+		...DEFAULT_OPTS,
+		...opts,
+	};
+
+	const log = fullOpts.log
+		? Cypress.log({
+				name: 'frame loaded',
+				displayName: 'frame loaded',
+				message: [selector],
+		  }).snapshot()
+		: null;
+
+	return cy.get(selector, { log: false }).then({ timeout: fullOpts.timeout }, async ($frame) => {
+		log?.set('$el', $frame);
+
+		if ($frame.length !== 1) {
+			throw new Error(
+				`cypress-iframe commands can only be applied to exactly one iframe at a time. Instead found ${$frame.length}`,
+			);
+		}
+
+		const contentWindow = $frame.prop('contentWindow');
+
+		const hasNavigated = fullOpts.url
+			? () =>
+					typeof fullOpts.url === 'string'
+						? contentWindow.location.toString().includes(fullOpts.url)
+						: fullOpts.url?.test(contentWindow.location.toString())
+			: () => contentWindow.location.toString() !== 'about:blank';
+
+		while (!hasNavigated()) {
+			await sleep(100); // eslint-disable-line no-await-in-loop
+		}
+
+		if (contentWindow.document.readyState === 'complete') {
+			return $frame;
+		}
+
+		const loadLog = Cypress.log({
+			name: 'Frame Load',
+			message: [contentWindow.location.toString()],
+			event: true,
+		}).snapshot();
+
+		await new Promise((resolve) => {
+			Cypress.$(contentWindow).on('load', resolve);
+		});
+
+		loadLog.end();
+		log?.finish();
+
+		return $frame;
+	});
+};
+
+export const getIframe = (selector, opts) => {
+	if (selector === undefined) {
+		selector = DEFAULT_IFRAME_SELECTOR; // eslint-disable-line no-param-reassign
+	} else if (typeof selector === 'object') {
+		opts = selector; // eslint-disable-line no-param-reassign
+		selector = DEFAULT_IFRAME_SELECTOR; // eslint-disable-line no-param-reassign
+	}
+
+	const fullOpts = {
+		...DEFAULT_OPTS,
+		...opts,
+	};
+
+	const log = fullOpts.log
+		? Cypress.log({
+				name: 'iframe',
+				displayName: 'iframe',
+				message: [selector],
+		  }).snapshot()
+		: null;
+
+	return frameLoaded(selector, { ...fullOpts, log: false }).then(($frame) => {
+		log?.set('$el', $frame).end();
+		const contentWindow = $frame.prop('contentWindow');
+		return Cypress.$(contentWindow.document.body);
+	});
+};