From 596cbbfa17fd51b9a1ac81e42e31dd2e9bf6044f Mon Sep 17 00:00:00 2001
From: Jacob Peattie <jacob.peattie@10up.com>
Date: Thu, 2 Jun 2022 23:00:09 +1000
Subject: [PATCH 01/16] Support transforming the Facet widget to a Block.

---
 assets/js/blocks/facets/index.js           | 12 +++++++++--
 assets/js/blocks/facets/transforms.js      | 25 ++++++++++++++++++++++
 includes/classes/Feature/Facets/Widget.php |  6 +++++-
 3 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 assets/js/blocks/facets/transforms.js

diff --git a/assets/js/blocks/facets/index.js b/assets/js/blocks/facets/index.js
index 96828bf403..1eb8cd711c 100644
--- a/assets/js/blocks/facets/index.js
+++ b/assets/js/blocks/facets/index.js
@@ -1,9 +1,17 @@
+/**
+ * WordPress dependencies.
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies.
+ */
 import edit from './edit';
+import transforms from './transforms';
 import block from './block.json';
 
-const { registerBlockType } = wp.blocks;
-
 registerBlockType(block, {
 	edit,
 	save: () => {},
+	transforms,
 });
diff --git a/assets/js/blocks/facets/transforms.js b/assets/js/blocks/facets/transforms.js
new file mode 100644
index 0000000000..5aa1b2b197
--- /dev/null
+++ b/assets/js/blocks/facets/transforms.js
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies.
+ */
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * Facet widget block transforms.
+ */
+export default {
+	from: [
+		{
+			type: 'block',
+			blocks: ['core/legacy-widget'],
+			isMatch: ({ idBase }) => idBase === 'ep-facet',
+			transform: ({ instance }) => {
+				const { title, ...attributes } = instance.raw;
+
+				return [
+					createBlock('core/heading', { content: title }),
+					createBlock('elasticpress/facet', attributes),
+				];
+			},
+		},
+	],
+};
diff --git a/includes/classes/Feature/Facets/Widget.php b/includes/classes/Feature/Facets/Widget.php
index ca53a43ee3..4779c928a0 100644
--- a/includes/classes/Feature/Facets/Widget.php
+++ b/includes/classes/Feature/Facets/Widget.php
@@ -29,7 +29,11 @@ class Widget extends WP_Widget {
 	 * Create widget
 	 */
 	public function __construct() {
-		$options = array( 'description' => esc_html__( 'Add a facet to an archive or search results page.', 'elasticpress' ) );
+		$options = array(
+			'description'           => esc_html__( 'Add a facet to an archive or search results page.', 'elasticpress' ),
+			'show_instance_in_rest' => true,
+		);
+
 		parent::__construct( 'ep-facet', esc_html__( 'ElasticPress - Facet', 'elasticpress' ), $options );
 
 		$this->renderer = new Renderer();

From f7b15a5ef5a4aaf47b142223bc734cf9bc2f8df3 Mon Sep 17 00:00:00 2001
From: Jacob Peattie <jacob.peattie@10up.com>
Date: Thu, 2 Jun 2022 23:00:51 +1000
Subject: [PATCH 02/16] Hide legacy Facet widget in the block editor by
 default.

---
 includes/classes/Feature/Facets/Facets.php | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/includes/classes/Feature/Facets/Facets.php b/includes/classes/Feature/Facets/Facets.php
index 62e3da7dae..a019f60bff 100644
--- a/includes/classes/Feature/Facets/Facets.php
+++ b/includes/classes/Feature/Facets/Facets.php
@@ -61,6 +61,7 @@ public function __construct() {
 	 */
 	public function setup() {
 		add_action( 'widgets_init', [ $this, 'register_widgets' ] );
+		add_filter( 'widget_types_to_hide_from_legacy_widget_block', [ $this, 'hide_legacy_widget' ] );
 		add_action( 'ep_valid_response', [ $this, 'get_aggs' ], 10, 4 );
 		add_filter( 'ep_post_formatted_args', [ $this, 'set_agg_filters' ], 10, 3 );
 		add_action( 'pre_get_posts', [ $this, 'facet_query' ] );
@@ -485,6 +486,20 @@ public function register_widgets() {
 		register_widget( __NAMESPACE__ . '\Widget' );
 	}
 
+	/**
+	 * Hide the legacy widget.
+	 *
+	 * Hides the legacy widget in favor of the Block when the block editor
+	 * is in use and the legacy widget has not been used.
+	 *
+	 * @since 4.3
+	 */
+	function hide_legacy_widget( $widget_types ) {
+		$widget_types[] = 'ep-facet';
+
+		return $widget_types;
+	}
+
 	/**
 	 * Output feature box long
 	 *

From bbc0241d287d1a0cb078a1e4b29585af60785b9b Mon Sep 17 00:00:00 2001
From: Jacob Peattie <jacob.peattie@10up.com>
Date: Thu, 2 Jun 2022 23:37:04 +1000
Subject: [PATCH 03/16] Support transforming Related Posts widget to a Block.

---
 assets/js/blocks/related-posts/block.js       |  2 ++
 assets/js/blocks/related-posts/transforms.js  | 25 +++++++++++++++++++
 .../classes/Feature/RelatedPosts/Widget.php   |  6 ++++-
 3 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 assets/js/blocks/related-posts/transforms.js

diff --git a/assets/js/blocks/related-posts/block.js b/assets/js/blocks/related-posts/block.js
index 3542f90a29..2cc099beee 100644
--- a/assets/js/blocks/related-posts/block.js
+++ b/assets/js/blocks/related-posts/block.js
@@ -8,6 +8,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies.
  */
 import Edit from './Edit';
+import transforms from './transforms';
 
 registerBlockType('elasticpress/related-posts', {
 	title: __('Related Posts (ElasticPress)', 'elasticpress'),
@@ -25,6 +26,7 @@ registerBlockType('elasticpress/related-posts', {
 			default: 5,
 		},
 	},
+	transforms,
 
 	/**
 	 * Handle edit
diff --git a/assets/js/blocks/related-posts/transforms.js b/assets/js/blocks/related-posts/transforms.js
new file mode 100644
index 0000000000..6b8e05f1df
--- /dev/null
+++ b/assets/js/blocks/related-posts/transforms.js
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies.
+ */
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * Facet widget block transforms.
+ */
+export default {
+	from: [
+		{
+			type: 'block',
+			blocks: ['core/legacy-widget'],
+			isMatch: ({ idBase }) => idBase === 'ep-related-posts',
+			transform: ({ instance }) => {
+				const { title, num_posts: number } = instance.raw;
+
+				return [
+					createBlock('core/heading', { content: title }),
+					createBlock('elasticpress/related-posts', { number }),
+				];
+			},
+		},
+	],
+};
diff --git a/includes/classes/Feature/RelatedPosts/Widget.php b/includes/classes/Feature/RelatedPosts/Widget.php
index 04ee94aa5b..74c1b1823d 100644
--- a/includes/classes/Feature/RelatedPosts/Widget.php
+++ b/includes/classes/Feature/RelatedPosts/Widget.php
@@ -26,7 +26,11 @@ class Widget extends WP_Widget {
 	 * @since 6.4
 	 */
 	public function __construct() {
-		$options = array( 'description' => esc_html__( 'Show related posts using ElasticPress. This widget will only appear on single post, page, and custom type pages.', 'elasticpress' ) );
+		$options = array(
+			'description'           => esc_html__( 'Show related posts using ElasticPress. This widget will only appear on single post, page, and custom type pages.', 'elasticpress' ),
+			'show_instance_in_rest' => true,
+		);
+
 		parent::__construct( 'ep-related-posts', esc_html__( 'ElasticPress - Related Posts', 'elasticpress' ), $options );
 	}
 

From ec77466b9e682cd8507a638a55040c5f5bc88e48 Mon Sep 17 00:00:00 2001
From: Jacob Peattie <jacob.peattie@10up.com>
Date: Thu, 2 Jun 2022 23:41:57 +1000
Subject: [PATCH 04/16] Hide legacy Related Posts widget in the block editor by
 default.

---
 .../classes/Feature/RelatedPosts/RelatedPosts.php | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/includes/classes/Feature/RelatedPosts/RelatedPosts.php b/includes/classes/Feature/RelatedPosts/RelatedPosts.php
index 7045397848..7c9cab33fb 100644
--- a/includes/classes/Feature/RelatedPosts/RelatedPosts.php
+++ b/includes/classes/Feature/RelatedPosts/RelatedPosts.php
@@ -163,6 +163,7 @@ public function find_related( $post_id, $return = 5 ) {
 	 */
 	public function setup() {
 		add_action( 'widgets_init', [ $this, 'register_widget' ] );
+		add_filter( 'widget_types_to_hide_from_legacy_widget_block', [ $this, 'hide_legacy_widget' ] );
 		add_filter( 'ep_formatted_args', [ $this, 'formatted_args' ], 10, 2 );
 		add_action( 'init', [ $this, 'register_block' ] );
 		add_action( 'rest_api_init', [ $this, 'setup_endpoint' ] );
@@ -349,6 +350,20 @@ public function register_widget() {
 		register_widget( __NAMESPACE__ . '\Widget' );
 	}
 
+	/**
+	 * Hide the legacy widget.
+	 *
+	 * Hides the legacy widget in favor of the Block when the block editor
+	 * is in use and the legacy widget has not been used.
+	 *
+	 * @since 4.3
+	 */
+	function hide_legacy_widget( $widget_types ) {
+		$widget_types[] = 'ep-related-posts';
+
+		return $widget_types;
+	}
+
 	/**
 	 * Output feature box long
 	 *

From 492c5cbd03342725a8bec72794d4ad123f4629ce Mon Sep 17 00:00:00 2001
From: Jacob Peattie <jacob.peattie@10up.com>
Date: Thu, 2 Jun 2022 23:56:50 +1000
Subject: [PATCH 05/16] Only insert heading on transform if there is a value.

---
 assets/js/blocks/facets/transforms.js        | 6 +++++-
 assets/js/blocks/related-posts/transforms.js | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/assets/js/blocks/facets/transforms.js b/assets/js/blocks/facets/transforms.js
index 5aa1b2b197..66d5e8b690 100644
--- a/assets/js/blocks/facets/transforms.js
+++ b/assets/js/blocks/facets/transforms.js
@@ -13,7 +13,11 @@ export default {
 			blocks: ['core/legacy-widget'],
 			isMatch: ({ idBase }) => idBase === 'ep-facet',
 			transform: ({ instance }) => {
-				const { title, ...attributes } = instance.raw;
+				const { title = null, ...attributes } = instance.raw;
+
+				if (!title) {
+					return createBlock('elasticpress/facet', attributes);
+				}
 
 				return [
 					createBlock('core/heading', { content: title }),
diff --git a/assets/js/blocks/related-posts/transforms.js b/assets/js/blocks/related-posts/transforms.js
index 6b8e05f1df..bb81ea4ec6 100644
--- a/assets/js/blocks/related-posts/transforms.js
+++ b/assets/js/blocks/related-posts/transforms.js
@@ -13,7 +13,11 @@ export default {
 			blocks: ['core/legacy-widget'],
 			isMatch: ({ idBase }) => idBase === 'ep-related-posts',
 			transform: ({ instance }) => {
-				const { title, num_posts: number } = instance.raw;
+				const { title = null, num_posts: number } = instance.raw;
+
+				if (!title) {
+					return createBlock('elasticpress/related-posts', { number });
+				}
 
 				return [
 					createBlock('core/heading', { content: title }),

From 4b3336b3e94e0d1e289529f0ec046ce2835e77c6 Mon Sep 17 00:00:00 2001
From: Jacob Peattie <jacob.peattie@10up.com>
Date: Fri, 3 Jun 2022 00:27:54 +1000
Subject: [PATCH 06/16] Fix PHP linting errors.

---
 includes/classes/Feature/Facets/Facets.php             | 8 +++++---
 includes/classes/Feature/RelatedPosts/RelatedPosts.php | 8 +++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/includes/classes/Feature/Facets/Facets.php b/includes/classes/Feature/Facets/Facets.php
index a019f60bff..ebe5cd1246 100644
--- a/includes/classes/Feature/Facets/Facets.php
+++ b/includes/classes/Feature/Facets/Facets.php
@@ -493,11 +493,13 @@ public function register_widgets() {
 	 * is in use and the legacy widget has not been used.
 	 *
 	 * @since 4.3
+	 * @param array $widgets An array of excluded widget-type IDs.
+	 * @return array array of excluded widget-type IDs to hide.
 	 */
-	function hide_legacy_widget( $widget_types ) {
-		$widget_types[] = 'ep-facet';
+	public function hide_legacy_widget( $widgets ) {
+		$widgets[] = 'ep-facet';
 
-		return $widget_types;
+		return $widgets;
 	}
 
 	/**
diff --git a/includes/classes/Feature/RelatedPosts/RelatedPosts.php b/includes/classes/Feature/RelatedPosts/RelatedPosts.php
index 7c9cab33fb..4a6e8c258d 100644
--- a/includes/classes/Feature/RelatedPosts/RelatedPosts.php
+++ b/includes/classes/Feature/RelatedPosts/RelatedPosts.php
@@ -357,11 +357,13 @@ public function register_widget() {
 	 * is in use and the legacy widget has not been used.
 	 *
 	 * @since 4.3
+	 * @param array $widgets An array of excluded widget-type IDs.
+	 * @return array array of excluded widget-type IDs to hide.
 	 */
-	function hide_legacy_widget( $widget_types ) {
-		$widget_types[] = 'ep-related-posts';
+	public function hide_legacy_widget( $widgets ) {
+		$widgets[] = 'ep-related-posts';
 
-		return $widget_types;
+		return $widgets;
 	}
 
 	/**

From 855045ad1be63801f36c1586a8f69fba0eb38ee8 Mon Sep 17 00:00:00 2001
From: Jacob Peattie <jacob.peattie@10up.com>
Date: Tue, 21 Jun 2022 20:53:05 +1000
Subject: [PATCH 07/16] Tests WIP.

---
 assets/js/blocks/facets/edit.js               |  41 ++++++-
 .../components/common/modal.js                |   4 +-
 .../features/related-posts.spec.js            |  25 +++--
 .../features/related-posts/block.spec.js      |  15 +++
 .../features/related-posts/widget.spec.js     | 100 ++++++++++++++++++
 tests/cypress/support/commands.js             |  17 +++
 6 files changed, 190 insertions(+), 12 deletions(-)
 create mode 100644 tests/cypress/integration/features/related-posts/block.spec.js
 create mode 100644 tests/cypress/integration/features/related-posts/widget.spec.js

diff --git a/assets/js/blocks/facets/edit.js b/assets/js/blocks/facets/edit.js
index 04d3390418..b988874459 100644
--- a/assets/js/blocks/facets/edit.js
+++ b/assets/js/blocks/facets/edit.js
@@ -1,14 +1,17 @@
-import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import { BlockControls, InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import {
 	PanelBody,
 	RadioControl,
 	SelectControl,
 	Spinner,
+	TextControl,
+	ToolbarButton,
 	Placeholder,
+	Popover,
 } from '@wordpress/components';
 import { Fragment, useEffect, useState, useCallback } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 
 const FacetBlockEdit = (props) => {
 	const { attributes, setAttributes } = props;
@@ -16,7 +19,8 @@ const FacetBlockEdit = (props) => {
 	const [preview, setPreview] = useState('');
 	const [loading, setLoading] = useState(false);
 	const { facet, orderby, order } = attributes;
-
+	const [isInputDialogVisible, setIsInputDialogVisible] = useState(false);
+	const [name, setName] = useState('');
 	const blockProps = useBlockProps();
 
 	const load = useCallback(async () => {
@@ -42,8 +46,39 @@ const FacetBlockEdit = (props) => {
 			.finally(() => setLoading(false));
 	}, [facet, orderby, order]);
 
+	const InputNameDialog = useCallback(
+		() => (
+			<TextControl
+				className="name-attribute"
+				label={_x('Control name', 'Popup control name', 'namespace')}
+				help={_x('This is title of field', 'Popup help text', 'namespace')}
+				value={name}
+				onChange={(name) => setName(name)}
+			/>
+		),
+		[name],
+	);
+
 	return (
 		<Fragment>
+			<BlockControls group="block">
+				<ToolbarButton
+					onClick={() => {
+						setIsInputDialogVisible(true);
+					}}
+					icon="nametag"
+				>
+					{isInputDialogVisible && (
+						<Popover
+							onClose={() => {
+								setIsInputDialogVisible(false);
+							}}
+						>
+							<InputNameDialog />
+						</Popover>
+					)}
+				</ToolbarButton>
+			</BlockControls>
 			<InspectorControls>
 				<PanelBody title={__('Facet Settings', 'elasticpress')}>
 					<SelectControl
diff --git a/assets/js/instant-results/components/common/modal.js b/assets/js/instant-results/components/common/modal.js
index 8e96a38e50..fd96a35533 100644
--- a/assets/js/instant-results/components/common/modal.js
+++ b/assets/js/instant-results/components/common/modal.js
@@ -84,7 +84,9 @@ const Modal = ({ children, isOpen, onClose, ...props }, ref) => {
 			{...props}
 		>
 			{isOpen && (
-				<FocusTrap>
+				<FocusTrap
+					focusTrapOptions={{ clickOutsideDeactivates: true, onDeactivate: onClose }}
+				>
 					<div className="ep-search-modal__content">
 						<button
 							className="ep-search-modal__close ep-search-reset-button ep-search-icon-button"
diff --git a/tests/cypress/integration/features/related-posts.spec.js b/tests/cypress/integration/features/related-posts.spec.js
index cedc32703e..c642d17fb1 100644
--- a/tests/cypress/integration/features/related-posts.spec.js
+++ b/tests/cypress/integration/features/related-posts.spec.js
@@ -1,12 +1,21 @@
 describe('Related Posts Feature', () => {
-	it('Can see the widget in the Dashboard', () => {
-		// Disable the feature.
-		cy.visitAdminPage('admin.php?page=elasticpress');
-		cy.get('.ep-feature-related_posts .settings-button').click();
-		cy.get('.ep-feature-related_posts [name="settings[active]"][value="0"]').click();
-		cy.get('.ep-feature-related_posts .button-primary').click();
+	it('Can see the block in the Dashboard', () => {
+		cy.blockExistsForFeature('Related Posts (ElasticPress)', 'related_posts');
+		cy.maybeDisableFeature('related_posts');
+		cy.visitAdminPage('post-new.php');
 
-		cy.openWidgetsPage();
+		cy.getBlocksList()
+			.should('exist')
+			.should('not.contain.text', 'Related Posts (ElasticPress)')
+			.should('not.contain.text', 'ElasticPress - Related Posts');
+
+		cy.maybeEnableFeature('related_posts');
+		cy.visitAdminPage('post-new.php');
+
+		cy.getBlocksList()
+			.should('exist')
+			.should('contain.text', 'Related Posts (ElasticPress)')
+			.should('not.contain.text', 'ElasticPress - Related Posts');
 
 		cy.get('.edit-widgets-header-toolbar__inserter-toggle').click();
 		cy.get('.components-search-control__input').clearThenType('ElasticPress Related Posts');
@@ -26,7 +35,7 @@ describe('Related Posts Feature', () => {
 
 		cy.get('.block-editor-inserter__no-results').should('not.exist');
 		cy.get('.block-editor-block-types-list').should(($widgetsList) => {
-			expect($widgetsList).to.contain.text('ElasticPress - Related Posts');
+			expect($widgetsList).to.contain.text('');
 			expect($widgetsList).to.contain.text('Related Posts (ElasticPress)');
 		});
 	});
diff --git a/tests/cypress/integration/features/related-posts/block.spec.js b/tests/cypress/integration/features/related-posts/block.spec.js
new file mode 100644
index 0000000000..87bbdd7b23
--- /dev/null
+++ b/tests/cypress/integration/features/related-posts/block.spec.js
@@ -0,0 +1,15 @@
+describe('Related Posts block', () => {
+	const blockName = 'Related Posts (ElasticPress)';
+
+	it('Related Posts block is available when feature is enabled', () => {
+		cy.maybeEnableFeature('related_posts');
+		cy.visitAdminPage('post-new.php');
+		cy.getBlocksList().should('contain.text', blockName);
+	});
+
+	it('Related Posts block is not available when feature is disabled', () => {
+		cy.maybeDisableFeature('related_posts');
+		cy.visitAdminPage('post-new.php');
+		cy.getBlocksList().should('not.contain.text', blockName);
+	});
+});
diff --git a/tests/cypress/integration/features/related-posts/widget.spec.js b/tests/cypress/integration/features/related-posts/widget.spec.js
new file mode 100644
index 0000000000..7724534683
--- /dev/null
+++ b/tests/cypress/integration/features/related-posts/widget.spec.js
@@ -0,0 +1,100 @@
+describe('Related Posts widget', () => {
+	const blockId = 'elasticpress/related-posts';
+	const blockName = 'Related Posts (ElasticPress)';
+	const widgetId = 'ep-related-posts';
+	const widgetName = 'ElasticPress - Related Posts';
+	const widgetTitle = 'My related posts';
+	const widgetNumPosts = '3';
+
+	/**
+	 * Add a copy of the widget for all tests.
+	 */
+	before(() => {
+		cy.wpCli('widget reset --all');
+		cy.wpCli('wp plugin install classic-widgets --activate');
+
+		cy.maybeEnableFeature('related_posts');
+
+		cy.visitAdminPage('widgets.php');
+		cy.intercept('/wp-admin/admin-ajax.php').as('adminAjax');
+
+		/**
+		 * Find and add the widget.
+		 */
+		cy.get(`#widget-list [id*="${widgetId}"]`)
+			.click()
+			.within(() => {
+				cy.get('.widgets-chooser-add').click();
+			});
+
+		cy.wait('@adminAjax');
+
+		/**
+		 * Set the widget values and save.
+		 */
+		cy.get(`#widgets-right [id*="${widgetId}"]`).within(() => {
+			cy.get('input[name$="[title]"]').clearThenType(widgetTitle);
+			cy.get('input[name$="[num_posts]"]').clearThenType(widgetNumPosts);
+			cy.get('input[type="submit"]').click();
+		});
+
+		cy.wait('@adminAjax');
+	});
+
+	it('Can see the widget on the front end', () => {
+		cy.visit('/');
+
+		/**
+		 * The widget should be visible and contain the correct title.
+		 */
+		cy.get(`[id^="${widgetId}"]`).should('be.visible').should('contain.text', widgetTitle);
+	});
+
+	it('Can transform legacy widget into block', () => {
+		cy.wpCli('wp plugin deactivate classic-widgets');
+
+		cy.visitAdminPage('widgets.php');
+
+		/**
+		 * Find the legacy widget block, select it, and get its values.
+		 */
+		cy.get('.wp-block')
+			.contains(`input[name="id_base"][value="${widgetId}"]`)
+			.click()
+			.within(() => {
+				cy.get('input[name$="[title]"]').invoke('val').as('@title');
+				cy.get('input[name$="[num_posts]"]').invoke('val').as('@numPosts');
+			});
+
+		/**
+		 * Transform the widget into to the block.
+		 */
+		cy.get('.block-editor-block-switcher button').click();
+		cy.get('.block-editor-block-switcher__popover button').contains(blockName).click();
+
+		/**
+		 * Check that the widget has been transformed into the correct block
+		 * and that the title was transformed into a heading block.
+		 */
+		cy.focused()
+			.invoke('attr', 'data-type')
+			.should('eq', blockId)
+			.prev()
+			.invoke('attr', 'data-type')
+			.should('eq', 'core/heading')
+			.invoke('text')
+			.should('eq', widgetTitle);
+
+		/**
+		 * Check that the number of items matches what was set on the widget.
+		 */
+		cy.get('.block-editor-block-inspector input[aria-label="Number of items"]')
+			.invoke('val')
+			.should('eq', widgetNumPosts);
+	});
+
+	it('Related Posts legacy widget is not available as a block', () => {
+		cy.visitAdminPage('widgets.php');
+		cy.getBlocksList().should('not.contain.text', widgetName);
+	});
+});
diff --git a/tests/cypress/support/commands.js b/tests/cypress/support/commands.js
index 1983e0204d..01e308c9ac 100644
--- a/tests/cypress/support/commands.js
+++ b/tests/cypress/support/commands.js
@@ -319,3 +319,20 @@ Cypress.Commands.add('deactivatePlugin', (slug, method = 'dashboard', mode = 'si
 	}
 	cy.wpCli(command);
 });
+
+Cypress.Commands.add('blockExistsForFeature', (blockName, feature = null) => {
+	const blockInserterToggle = '.edit-post-header-toolbar__inserter-toggle';
+	const blockList = '.block-editor-inserter__block-list';
+
+	if (feature) {
+		cy.maybeDisableFeature(feature);
+		cy.visitAdminPage('post-new.php');
+		cy.get(blockInserterToggle).click();
+		cy.get(blockList).should('not.contain.text', blockName);
+		cy.maybeEnableFeature(feature);
+	}
+
+	cy.visitAdminPage('post-new.php');
+	cy.get(blockInserterToggle).click();
+	cy.get(blockList).should('contain.text', blockName);
+});

From 6e9cadedb838f00892f8dbdcbb9ac39e1343c808 Mon Sep 17 00:00:00 2001
From: Jacob Peattie <jacob.peattie@10up.com>
Date: Wed, 20 Jul 2022 15:10:47 +1000
Subject: [PATCH 08/16] WIP: Related Posts block tests.

---
 .../features/related-posts.spec.js            | 86 ++++++++++++-------
 tests/cypress/support/commands.js             | 53 ++++--------
 2 files changed, 74 insertions(+), 65 deletions(-)

diff --git a/tests/cypress/integration/features/related-posts.spec.js b/tests/cypress/integration/features/related-posts.spec.js
index c642d17fb1..dad6520403 100644
--- a/tests/cypress/integration/features/related-posts.spec.js
+++ b/tests/cypress/integration/features/related-posts.spec.js
@@ -1,43 +1,71 @@
 describe('Related Posts Feature', () => {
-	it('Can see the block in the Dashboard', () => {
-		cy.blockExistsForFeature('Related Posts (ElasticPress)', 'related_posts');
+	it('Block can be inserted', () => {
+		/**
+		 * Make sure the block isn't available if the feature is not active.
+		 */
 		cy.maybeDisableFeature('related_posts');
 		cy.visitAdminPage('post-new.php');
+		cy.closeWelcomeGuide();
+		cy.openBlockInserter();
+		cy.getBlocksList().should('not.contain.text', 'Related Posts (ElasticPress)');
 
-		cy.getBlocksList()
-			.should('exist')
-			.should('not.contain.text', 'Related Posts (ElasticPress)')
-			.should('not.contain.text', 'ElasticPress - Related Posts');
-
+		/**
+		 * Create some posts that will be related.
+		 */
 		cy.maybeEnableFeature('related_posts');
-		cy.visitAdminPage('post-new.php');
-
-		cy.getBlocksList()
-			.should('exist')
-			.should('contain.text', 'Related Posts (ElasticPress)')
-			.should('not.contain.text', 'ElasticPress - Related Posts');
 
-		cy.get('.edit-widgets-header-toolbar__inserter-toggle').click();
-		cy.get('.components-search-control__input').clearThenType('ElasticPress Related Posts');
+		const postsToPublish = [
+			{
+				title: 'Test related posts block #1',
+				content: 'Inceptos tristique class ac eleifend leo.',
+			},
+			{
+				title: 'Test related posts block #2',
+				content: 'Inceptos tristique class ac eleifend leo.',
+			},
+			{
+				title: 'Test related posts block #3',
+				content: 'Inceptos tristique class ac eleifend leo.',
+			},
+		];
 
-		cy.get('.block-editor-inserter__no-results').should('exist');
+		postsToPublish.forEach((postData) => {
+			cy.publishPost(postData);
+		});
 
-		// Re-enable the feature.
-		cy.visitAdminPage('admin.php?page=elasticpress');
-		cy.get('.ep-feature-related_posts .settings-button').click();
-		cy.get('.ep-feature-related_posts [name="settings[active]"][value="1"]').click();
-		cy.get('.ep-feature-related_posts .button-primary').click();
+		/**
+		 * On the last post insert a Related Posts block.
+		 */
+		cy.openBlockInserter();
+		cy.getBlocksList().should('contain.text', 'Related Posts (ElasticPress)');
+		cy.insertBlock('Related Posts (ElasticPress)');
 
-		cy.openWidgetsPage();
+		/**
+		 * Check that the block is inserted into the editor, and contains the
+		 * expected content.
+		 */
+		cy.get(`.block-editor-block-list__layout .wp-block-elasticpress-related-posts`)
+			.should('exist')
+			.should('contain.text', 'Test related posts block #1')
+			.click();
 
-		cy.get('.edit-widgets-header-toolbar__inserter-toggle').click();
-		cy.get('.components-search-control__input').clearThenType('ElasticPress Related Posts');
+		/**
+		 * Check that the number control works.
+		 */
+		cy.openDocumentSettingsSidebar();
+		cy.get('.edit-post-sidebar__panel-tab').contains('Block').click();
+		cy.get('input[type="number"][aria-label="Number of items"]').clearThenType('2');
+		cy.get(`.wp-block-elasticpress-related-posts li`).should('have.length', 2);
 
-		cy.get('.block-editor-inserter__no-results').should('not.exist');
-		cy.get('.block-editor-block-types-list').should(($widgetsList) => {
-			expect($widgetsList).to.contain.text('');
-			expect($widgetsList).to.contain.text('Related Posts (ElasticPress)');
-		});
+		/**
+		 * Check that the block is rendered on the front-end, and contains
+		 * the expected content.
+		 */
+		cy.updatePostAndView();
+		cy.get('.wp-block-elasticpress-related-posts li')
+			.should('exist')
+			.should('contain', 'Test related posts block #1')
+			.should('have.length', 2);
 	});
 
 	it('Can instantiate and use the widget', () => {
diff --git a/tests/cypress/support/commands.js b/tests/cypress/support/commands.js
index 789d22e6b1..f4caaf7d1b 100644
--- a/tests/cypress/support/commands.js
+++ b/tests/cypress/support/commands.js
@@ -62,29 +62,6 @@ Cypress.Commands.add('createTaxonomy', (name = 'Test taxonomy', taxonomy = 'cate
 	cy.get('#tag-name').click().type(`${name}{enter}`);
 });
 
-Cypress.Commands.add('openDocumentSettingsSidebar', () => {
-	const button =
-		'.edit-post-header__settings button[aria-label="Settings"][aria-expanded="false"]';
-	cy.get('body').then(($body) => {
-		if ($body.find(button).length > 0) {
-			cy.get(button).click();
-		}
-	});
-	cy.get('.edit-post-sidebar__panel-tab').contains('Post').click();
-});
-
-Cypress.Commands.add('openDocumentSettingsPanel', (name) => {
-	cy.openDocumentSettingsSidebar();
-	cy.get('.components-panel__body .components-panel__body-title button')
-		.contains(name)
-		.then((panel) => {
-			if (!panel.hasClass('.is-opened')) {
-				cy.get(panel).click();
-				cy.get(panel).parents('.components-panel__body').should('have.class', 'is-opened');
-			}
-		});
-});
-
 Cypress.Commands.add('clearThenType', { prevSubject: true }, (subject, text, force = false) => {
 	cy.wrap(subject).clear().type(text, { force });
 });
@@ -290,19 +267,23 @@ Cypress.Commands.add('deactivatePlugin', (slug, method = 'dashboard', mode = 'si
 	cy.wpCli(command);
 });
 
-Cypress.Commands.add('blockExistsForFeature', (blockName, feature = null) => {
-	const blockInserterToggle = '.edit-post-header-toolbar__inserter-toggle';
-	const blockList = '.block-editor-inserter__block-list';
+Cypress.Commands.add('closeWelcomeGuide', () => {
+	cy.get('.edit-post-welcome-guide .components-modal__header button').click();
+});
 
-	if (feature) {
-		cy.maybeDisableFeature(feature);
-		cy.visitAdminPage('post-new.php');
-		cy.get(blockInserterToggle).click();
-		cy.get(blockList).should('not.contain.text', blockName);
-		cy.maybeEnableFeature(feature);
-	}
+Cypress.Commands.add('openBlockInserter', () => {
+	cy.get('.edit-post-header-toolbar__inserter-toggle').click();
+});
 
-	cy.visitAdminPage('post-new.php');
-	cy.get(blockInserterToggle).click();
-	cy.get(blockList).should('contain.text', blockName);
+Cypress.Commands.add('getBlocksList', () => {
+	cy.get('.block-editor-inserter__block-list');
+});
+
+Cypress.Commands.add('insertBlock', (blockName) => {
+	cy.get('.block-editor-block-types-list__item').contains(blockName).click();
+});
+
+Cypress.Commands.add('updatePostAndView', () => {
+	cy.get('.editor-post-publish-button__button').click();
+	cy.get('.components-snackbar__action').click();
 });

From e65e4bfd3d324467e98abc17c70ab35c4d4f8719 Mon Sep 17 00:00:00 2001
From: Jacob Peattie <jacob.peattie@10up.com>
Date: Mon, 25 Jul 2022 19:31:50 +1000
Subject: [PATCH 09/16] Completed tests for Related Posts.

---
 .../features/related-posts.spec.js            | 201 ++++++++++++------
 .../features/related-posts/block.spec.js      |  15 --
 .../features/related-posts/widget.spec.js     | 100 ---------
 tests/cypress/support/commands.js             |  15 +-
 4 files changed, 142 insertions(+), 189 deletions(-)
 delete mode 100644 tests/cypress/integration/features/related-posts/block.spec.js
 delete mode 100644 tests/cypress/integration/features/related-posts/widget.spec.js

diff --git a/tests/cypress/integration/features/related-posts.spec.js b/tests/cypress/integration/features/related-posts.spec.js
index dad6520403..5dd04e1263 100644
--- a/tests/cypress/integration/features/related-posts.spec.js
+++ b/tests/cypress/integration/features/related-posts.spec.js
@@ -1,37 +1,23 @@
 describe('Related Posts Feature', () => {
-	it('Block can be inserted', () => {
+
+	/**
+	 * Test that the Related Posts block is functional.
+	 */
+	it('Related Posts block is functional', () => {
 		/**
-		 * Make sure the block isn't available if the feature is not active.
+		 * Enable the feature.
 		 */
-		cy.maybeDisableFeature('related_posts');
-		cy.visitAdminPage('post-new.php');
-		cy.closeWelcomeGuide();
-		cy.openBlockInserter();
-		cy.getBlocksList().should('not.contain.text', 'Related Posts (ElasticPress)');
+		cy.maybeEnableFeature('related_posts');
 
 		/**
 		 * Create some posts that will be related.
 		 */
-		cy.maybeEnableFeature('related_posts');
-
-		const postsToPublish = [
-			{
-				title: 'Test related posts block #1',
-				content: 'Inceptos tristique class ac eleifend leo.',
-			},
-			{
-				title: 'Test related posts block #2',
+		for (let i = 0; i < 4; i++) {
+			cy.publishPost({
+				title: `Test related posts block #${i + 1}`,
 				content: 'Inceptos tristique class ac eleifend leo.',
-			},
-			{
-				title: 'Test related posts block #3',
-				content: 'Inceptos tristique class ac eleifend leo.',
-			},
-		];
-
-		postsToPublish.forEach((postData) => {
-			cy.publishPost(postData);
-		});
+			});
+		}
 
 		/**
 		 * On the last post insert a Related Posts block.
@@ -52,7 +38,7 @@ describe('Related Posts Feature', () => {
 		/**
 		 * Check that the number control works.
 		 */
-		cy.openDocumentSettingsSidebar();
+		cy.openSettingsSidebar();
 		cy.get('.edit-post-sidebar__panel-tab').contains('Block').click();
 		cy.get('input[type="number"][aria-label="Number of items"]').clearThenType('2');
 		cy.get(`.wp-block-elasticpress-related-posts li`).should('have.length', 2);
@@ -61,62 +47,145 @@ describe('Related Posts Feature', () => {
 		 * Check that the block is rendered on the front-end, and contains
 		 * the expected content.
 		 */
-		cy.updatePostAndView();
+		cy.get('.editor-post-publish-button__button').click();
+		cy.get('.components-snackbar__action').click();
 		cy.get('.wp-block-elasticpress-related-posts li')
 			.should('exist')
-			.should('contain', 'Test related posts block #1')
+			.should('contain', 'Test related posts block #')
 			.should('have.length', 2);
 	});
 
-	it('Can instantiate and use the widget', () => {
+	/**
+	 * Test that the Related Posts widget is functional and can be transformed
+	 * into the Related Posts block.
+	 */
+	it('Related Posts widget is functional', () => {
+		/**
+		 * Enable the feature.
+		 */
 		cy.maybeEnableFeature('related_posts');
 
+		/**
+		 * Clear any existing widgets.
+		 */
+		cy.wpCli('widget reset --all');
+
+		/**
+		 * Visit the classic Widgets screen.
+		 */
+		cy.wpCli('wp plugin install classic-widgets --activate');
 		cy.openWidgetsPage();
 
-		cy.get('.edit-widgets-header-toolbar__inserter-toggle').click();
-		cy.get(
-			'.block-editor-inserter__panel-content [class*="legacy-widget/ep-related-posts"]',
-		).click({
-			force: true,
+		/**
+		 * Find and add the widget to the first widget area.
+		 */
+		cy.intercept('/wp-admin/admin-ajax.php').as('adminAjax');
+
+		cy.get(`#widget-list [id$="ep-related-posts-__i__"]`)
+			.click('top')
+			.within(() => {
+				cy.get('.widgets-chooser-add').click();
+			});
+
+		cy.wait('@adminAjax');
+
+		/**
+		 * Add a title, set the post count, and save.
+		 */
+		cy.get(`#widgets-right [id*="ep-related-posts"]`).within(() => {
+			cy.get('input[name$="[title]"]').clearThenType('My related posts');
+			cy.get('input[name$="[num_posts]"]').clearThenType('2');
+			cy.get('input[type="submit"]').click();
 		});
-		cy.get('input[name^="widget-ep-related-posts"][name$="[title]"]').clearThenType(
-			'Related Posts',
-		);
+
+		cy.wait('@adminAjax');
 
 		/**
-		 * Wait for WordPress to recognize the title typed.
-		 *
-		 * @todo investigate why this is needed.
+		 * Create some posts that will be related and view the last post.
 		 */
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(2000);
+		for (let i = 0; i < 4; i++) {
+			const viewPost = i === 3;
 
-		cy.get('.edit-widgets-header__actions .components-button.is-primary').click();
-		cy.get('body').should('contain.text', 'Widgets saved.');
+			cy.publishPost(
+				{
+					title: `Test related posts widget #${i + 1}`,
+					content: 'Inceptos tristique class ac eleifend leo.',
+				},
+				viewPost,
+			);
+		}
 
-		const postsData = [
-			{
-				title: 'test related posts 1',
-				content: 'findme test 1',
-			},
-			{
-				title: 'test related posts 2',
-				content: 'findme test 2',
-			},
+		/**
+		 * When viewing the last post the widget should be visible and contain
+		 * the correct title and number of posts.
+		 */
+		cy.get(`[id^="ep-related-posts"]`)
+			.should('be.visible')
+			.should('contain.text', 'My related posts')
+			.within(() => {
+				cy.get('li')
+					.should('exist')
+					.should('contain', 'Test related posts widget #')
+					.should('have.length', 2);
+			});
+
+		/**
+		 * Visit the block-based Widgets screen.
+		 */
+		cy.wpCli('wp plugin deactivate classic-widgets');
+		cy.openWidgetsPage();
+
+		/**
+		 * Check that the widget is inserted in to the editor as a Legacy
+		 * Widget block.
+		 */
+		cy.get(`.block-editor-block-list__layout .wp-block-legacy-widget`)
+			.should('exist')
+			.should('contain.text', 'ElasticPress - Related Posts')
+			.first()
+			.click();
+
+		/**
+		 * Transform the legacywidget into the block.
+		 */
+		cy.get('.block-editor-block-switcher button').click();
+		cy.get(
+			'.block-editor-block-switcher__popover .editor-block-list-item-elasticpress-related-posts',
+		).click();
+
+		/**
+		 * Check that the widget has been transformed into the correct blocks
+		 * and that their content matches the widget's settings.
+		 */
+		cy.get(`.block-editor-block-list__layout .wp-block-heading`)
+			.should('exist')
+			.should('contain.text', 'My related posts');
+
+		cy.get(`.block-editor-block-list__layout .wp-block-elasticpress-related-posts li`)
+			.should('exist')
+			.should('contain.text', 'Test related posts widget #')
+			.should('have.length', 2);
+
+		cy.get('.edit-widgets-header__actions button').contains('Update').click();
+
+		/**
+		 * Create a new post and view it.
+		 */
+		cy.publishPost(
 			{
-				title: 'test related posts 3',
-				content: 'findme test 3',
+				title: 'Test related posts widget #5',
+				content: 'Inceptos tristique class ac eleifend leo.',
 			},
-		];
-
-		postsData.forEach((postData) => {
-			cy.publishPost(postData);
-		});
+			true,
+		);
 
-		// Clicking on the "View Post" button.
-		cy.get('.post-publish-panel__postpublish-buttons a.components-button.is-primary').click();
-		cy.get('body').should('contain.text', 'Related Posts');
-		cy.contains('a', 'test related posts 1').should('exist');
-		cy.contains('a', 'test related posts 2').should('exist');
+		/**
+		 * Confirm that the transformed block is rendered on the front-end,
+		 * and contains the expected content.
+		 */
+		cy.get('.wp-block-elasticpress-related-posts li')
+			.should('exist')
+			.should('contain', 'Test related posts widget #')
+			.should('have.length', 2);
 	});
 });
diff --git a/tests/cypress/integration/features/related-posts/block.spec.js b/tests/cypress/integration/features/related-posts/block.spec.js
deleted file mode 100644
index 87bbdd7b23..0000000000
--- a/tests/cypress/integration/features/related-posts/block.spec.js
+++ /dev/null
@@ -1,15 +0,0 @@
-describe('Related Posts block', () => {
-	const blockName = 'Related Posts (ElasticPress)';
-
-	it('Related Posts block is available when feature is enabled', () => {
-		cy.maybeEnableFeature('related_posts');
-		cy.visitAdminPage('post-new.php');
-		cy.getBlocksList().should('contain.text', blockName);
-	});
-
-	it('Related Posts block is not available when feature is disabled', () => {
-		cy.maybeDisableFeature('related_posts');
-		cy.visitAdminPage('post-new.php');
-		cy.getBlocksList().should('not.contain.text', blockName);
-	});
-});
diff --git a/tests/cypress/integration/features/related-posts/widget.spec.js b/tests/cypress/integration/features/related-posts/widget.spec.js
deleted file mode 100644
index 7724534683..0000000000
--- a/tests/cypress/integration/features/related-posts/widget.spec.js
+++ /dev/null
@@ -1,100 +0,0 @@
-describe('Related Posts widget', () => {
-	const blockId = 'elasticpress/related-posts';
-	const blockName = 'Related Posts (ElasticPress)';
-	const widgetId = 'ep-related-posts';
-	const widgetName = 'ElasticPress - Related Posts';
-	const widgetTitle = 'My related posts';
-	const widgetNumPosts = '3';
-
-	/**
-	 * Add a copy of the widget for all tests.
-	 */
-	before(() => {
-		cy.wpCli('widget reset --all');
-		cy.wpCli('wp plugin install classic-widgets --activate');
-
-		cy.maybeEnableFeature('related_posts');
-
-		cy.visitAdminPage('widgets.php');
-		cy.intercept('/wp-admin/admin-ajax.php').as('adminAjax');
-
-		/**
-		 * Find and add the widget.
-		 */
-		cy.get(`#widget-list [id*="${widgetId}"]`)
-			.click()
-			.within(() => {
-				cy.get('.widgets-chooser-add').click();
-			});
-
-		cy.wait('@adminAjax');
-
-		/**
-		 * Set the widget values and save.
-		 */
-		cy.get(`#widgets-right [id*="${widgetId}"]`).within(() => {
-			cy.get('input[name$="[title]"]').clearThenType(widgetTitle);
-			cy.get('input[name$="[num_posts]"]').clearThenType(widgetNumPosts);
-			cy.get('input[type="submit"]').click();
-		});
-
-		cy.wait('@adminAjax');
-	});
-
-	it('Can see the widget on the front end', () => {
-		cy.visit('/');
-
-		/**
-		 * The widget should be visible and contain the correct title.
-		 */
-		cy.get(`[id^="${widgetId}"]`).should('be.visible').should('contain.text', widgetTitle);
-	});
-
-	it('Can transform legacy widget into block', () => {
-		cy.wpCli('wp plugin deactivate classic-widgets');
-
-		cy.visitAdminPage('widgets.php');
-
-		/**
-		 * Find the legacy widget block, select it, and get its values.
-		 */
-		cy.get('.wp-block')
-			.contains(`input[name="id_base"][value="${widgetId}"]`)
-			.click()
-			.within(() => {
-				cy.get('input[name$="[title]"]').invoke('val').as('@title');
-				cy.get('input[name$="[num_posts]"]').invoke('val').as('@numPosts');
-			});
-
-		/**
-		 * Transform the widget into to the block.
-		 */
-		cy.get('.block-editor-block-switcher button').click();
-		cy.get('.block-editor-block-switcher__popover button').contains(blockName).click();
-
-		/**
-		 * Check that the widget has been transformed into the correct block
-		 * and that the title was transformed into a heading block.
-		 */
-		cy.focused()
-			.invoke('attr', 'data-type')
-			.should('eq', blockId)
-			.prev()
-			.invoke('attr', 'data-type')
-			.should('eq', 'core/heading')
-			.invoke('text')
-			.should('eq', widgetTitle);
-
-		/**
-		 * Check that the number of items matches what was set on the widget.
-		 */
-		cy.get('.block-editor-block-inspector input[aria-label="Number of items"]')
-			.invoke('val')
-			.should('eq', widgetNumPosts);
-	});
-
-	it('Related Posts legacy widget is not available as a block', () => {
-		cy.visitAdminPage('widgets.php');
-		cy.getBlocksList().should('not.contain.text', widgetName);
-	});
-});
diff --git a/tests/cypress/support/commands.js b/tests/cypress/support/commands.js
index f4caaf7d1b..619c8fb9eb 100644
--- a/tests/cypress/support/commands.js
+++ b/tests/cypress/support/commands.js
@@ -95,7 +95,7 @@ Cypress.Commands.add('wpCliEval', (command) => {
 	});
 });
 
-Cypress.Commands.add('publishPost', (postData) => {
+Cypress.Commands.add('publishPost', (postData, viewPost) => {
 	const newPostData = { title: 'Test Post', content: 'Test content.', ...postData };
 
 	cy.visitAdminPage('post-new.php');
@@ -123,6 +123,10 @@ Cypress.Commands.add('publishPost', (postData) => {
 		cy.get('.editor-post-publish-button').click();
 
 		cy.get('.components-snackbar').should('be.visible');
+
+		if (viewPost) {
+			cy.get('.post-publish-panel__postpublish-buttons a').contains('View Post').click();
+		}
 	}
 
 	/**
@@ -267,8 +271,8 @@ Cypress.Commands.add('deactivatePlugin', (slug, method = 'dashboard', mode = 'si
 	cy.wpCli(command);
 });
 
-Cypress.Commands.add('closeWelcomeGuide', () => {
-	cy.get('.edit-post-welcome-guide .components-modal__header button').click();
+Cypress.Commands.add('openSettingsSidebar', () => {
+	cy.get('.edit-post-header__settings button[aria-label="Settings"]').click();
 });
 
 Cypress.Commands.add('openBlockInserter', () => {
@@ -282,8 +286,3 @@ Cypress.Commands.add('getBlocksList', () => {
 Cypress.Commands.add('insertBlock', (blockName) => {
 	cy.get('.block-editor-block-types-list__item').contains(blockName).click();
 });
-
-Cypress.Commands.add('updatePostAndView', () => {
-	cy.get('.editor-post-publish-button__button').click();
-	cy.get('.components-snackbar__action').click();
-});

From aab01dd08b029db93ebeb757bd0e32cd027d28cb Mon Sep 17 00:00:00 2001
From: Jacob Peattie <jacob.peattie@10up.com>
Date: Mon, 25 Jul 2022 19:45:26 +1000
Subject: [PATCH 10/16] Remove unrelated changes.

---
 assets/js/blocks/facets/edit.js | 41 +++------------------------------
 1 file changed, 3 insertions(+), 38 deletions(-)

diff --git a/assets/js/blocks/facets/edit.js b/assets/js/blocks/facets/edit.js
index b988874459..04d3390418 100644
--- a/assets/js/blocks/facets/edit.js
+++ b/assets/js/blocks/facets/edit.js
@@ -1,17 +1,14 @@
-import { BlockControls, InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import {
 	PanelBody,
 	RadioControl,
 	SelectControl,
 	Spinner,
-	TextControl,
-	ToolbarButton,
 	Placeholder,
-	Popover,
 } from '@wordpress/components';
 import { Fragment, useEffect, useState, useCallback } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 
 const FacetBlockEdit = (props) => {
 	const { attributes, setAttributes } = props;
@@ -19,8 +16,7 @@ const FacetBlockEdit = (props) => {
 	const [preview, setPreview] = useState('');
 	const [loading, setLoading] = useState(false);
 	const { facet, orderby, order } = attributes;
-	const [isInputDialogVisible, setIsInputDialogVisible] = useState(false);
-	const [name, setName] = useState('');
+
 	const blockProps = useBlockProps();
 
 	const load = useCallback(async () => {
@@ -46,39 +42,8 @@ const FacetBlockEdit = (props) => {
 			.finally(() => setLoading(false));
 	}, [facet, orderby, order]);
 
-	const InputNameDialog = useCallback(
-		() => (
-			<TextControl
-				className="name-attribute"
-				label={_x('Control name', 'Popup control name', 'namespace')}
-				help={_x('This is title of field', 'Popup help text', 'namespace')}
-				value={name}
-				onChange={(name) => setName(name)}
-			/>
-		),
-		[name],
-	);
-
 	return (
 		<Fragment>
-			<BlockControls group="block">
-				<ToolbarButton
-					onClick={() => {
-						setIsInputDialogVisible(true);
-					}}
-					icon="nametag"
-				>
-					{isInputDialogVisible && (
-						<Popover
-							onClose={() => {
-								setIsInputDialogVisible(false);
-							}}
-						>
-							<InputNameDialog />
-						</Popover>
-					)}
-				</ToolbarButton>
-			</BlockControls>
 			<InspectorControls>
 				<PanelBody title={__('Facet Settings', 'elasticpress')}>
 					<SelectControl

From c2ee646144287f0f236e0febc449498260928cab Mon Sep 17 00:00:00 2001
From: Jacob Peattie <jacob.peattie@10up.com>
Date: Mon, 25 Jul 2022 19:48:35 +1000
Subject: [PATCH 11/16] Fix linting errors.

---
 tests/cypress/integration/features/related-posts.spec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tests/cypress/integration/features/related-posts.spec.js b/tests/cypress/integration/features/related-posts.spec.js
index 5dd04e1263..37b4c48b5f 100644
--- a/tests/cypress/integration/features/related-posts.spec.js
+++ b/tests/cypress/integration/features/related-posts.spec.js
@@ -1,5 +1,4 @@
 describe('Related Posts Feature', () => {
-
 	/**
 	 * Test that the Related Posts block is functional.
 	 */

From 0147bc7c566499d7ea997d7e499c7bee985c6c8d Mon Sep 17 00:00:00 2001
From: Jacob Peattie <jacob.peattie@10up.com>
Date: Tue, 2 Aug 2022 16:48:09 +1000
Subject: [PATCH 12/16] WIP: Progress on Facet tests.

---
 .../integration/features/facets.spec.js       | 245 +++++++++++-------
 .../features/related-posts.spec.js            |   3 +-
 tests/cypress/support/assertions.js           |  13 +
 tests/cypress/support/commands.js             |  20 +-
 tests/cypress/support/index.js                |   1 +
 5 files changed, 178 insertions(+), 104 deletions(-)
 create mode 100644 tests/cypress/support/assertions.js

diff --git a/tests/cypress/integration/features/facets.spec.js b/tests/cypress/integration/features/facets.spec.js
index b3cbaf32f5..c9f5c1250e 100644
--- a/tests/cypress/integration/features/facets.spec.js
+++ b/tests/cypress/integration/features/facets.spec.js
@@ -1,116 +1,163 @@
 describe('Facets Feature', () => {
-	/**
-	 * Create a facets widget.
-	 *
-	 * @param {string} title The widget title
-	 * @param {string} category The category slug.
-	 */
-	function createWidget(title, category) {
-		cy.openWidgetsPage();
-
-		let createdWidgetsLength = 0;
-
-		cy.get('.is-opened').then(($openedWidgetArea) => {
-			createdWidgetsLength = $openedWidgetArea.find('.wp-block-legacy-widget').length;
-
-			cy.get('.edit-widgets-header-toolbar__inserter-toggle').click();
-			cy.get('.block-editor-inserter__panel-content [class*="legacy-widget/ep-facet"]')
-				.click({
-					force: true,
-				})
-				.then(() => {
-					cy.get(
-						`.is-opened .wp-block-legacy-widget:eq(${createdWidgetsLength}) .wp-block-legacy-widget__edit-form:visible .widefat:visible`,
-						{ timeout: 10000 },
-					)
-						.closest('.widget-ep-facet')
-						.within(() => {
-							cy.get('input[name^="widget-ep-facet"][name$="[title]"]').clearThenType(
-								title,
-								true,
-							);
-							cy.get('select[name^="widget-ep-facet"][name$="[facet]"]').select(
-								category,
-							);
-						});
-
-					/**
-					 * Wait for WordPress to recognize the title typed.
-					 *
-					 * @todo investigate why this is needed.
-					 */
-					// eslint-disable-next-line cypress/no-unnecessary-waiting
-					cy.wait(2000);
-
-					cy.get('.edit-widgets-header__actions .components-button.is-primary').click();
-					cy.get('body').should('contain.text', 'Widgets saved.');
-				});
-		});
-	}
-
 	before(() => {
 		cy.maybeEnableFeature('facets');
-
 		cy.wpCli('elasticpress index --setup --yes');
+		cy.wpCli('wp plugin install classic-widgets');
 	});
 
-	it('Can see the widget in the frontend', () => {
+	beforeEach(() => {
 		cy.wpCli('widget reset --all');
+		cy.wpCli('wp plugin deactivate classic-widgets');
+	});
 
-		createWidget('Facet (categories)', 'category');
+	/**
+	 * Test that the Related Posts block is functional.
+	 */
+	it('Facets block is functional', () => {
+		/**
+		 * Visit the block-based Widgets screen.
+		 */
+		cy.openWidgetsPage();
 
+		/**
+		 * Insert a Facets block.
+		 */
+		cy.openBlockInserter();
+		cy.getBlocksList().should('contain.text', 'Facet (ElasticPress)');
+		cy.insertBlock('Facet (ElasticPress)');
+		cy.get('.wp-block-elasticpress-facet').first().as('facetBlock');
+
+		/**
+		 * Check that the block is inserted into the editor, and contains the
+		 * expected content.
+		 */
+		cy.get('@facetBlock').find('input').should('have.attr', 'placeholder', 'Search Categories');
+		cy.get('@facetBlock').click();
+
+		/**
+		 * Set the block to use Tags and sort by name in ascending order.
+		 */
+		cy.openBlockSettingsSidebar();
+		cy.get('.block-editor-block-inspector select').select('post_tag');
+		cy.get('.block-editor-block-inspector input[type="radio"][value="name"]').click();
+		cy.get('.block-editor-block-inspector input[type="radio"][value="asc"]').click();
+
+		/**
+		 * Verify the block has the expected output.
+		 */
+		cy.get('@facetBlock').find('input').should('have.attr', 'placeholder', 'Search Tags');
+		cy.get('@facetBlock').find('.term').should('be.elementsSortedAlphabetically');
+
+		/**
+		 * Save widgets.
+		 */
+		cy.intercept('/wp-json/wp/v2/sidebars/*').as('sidebarsRest');
+		cy.get('.edit-widgets-header__actions button').contains('Update').click();
+		cy.wait('@sidebarsRest');
+
+		/**
+		 * Check the output of the block on the front end.
+		 */
 		cy.visit('/');
+		cy.get('.wp-block-elasticpress-facet').first().as('facetBlock');
+		cy.get('@facetBlock').find('input').should('have.attr', 'placeholder', 'Search Tags');
+		cy.get('@facetBlock').find('.term').should('be.elementsSortedAlphabetically');
+	});
 
-		// Check if the first widget is visible.
-		cy.get('.widget_ep-facet').should('be.visible');
-		cy.contains('.widget-title', 'Facet (categories)').should('be.visible');
-
-		// Create a second widget, so we can test both working together.
-		createWidget('Facet (Tags)', 'post_tag');
+	/**
+	 * Test that the Related Posts widget is functional and can be transformed
+	 * into the Related Posts block.
+	 */
+	it('Related Posts widget is functional', () => {
+		/**
+		 * Visit the classic Widgets screen.
+		 */
+		cy.wpCli('wp plugin activate classic-widgets');
+		cy.openWidgetsPage();
+		cy.intercept('/wp-admin/admin-ajax.php').as('adminAjax');
+
+		/**
+		 * Find and add the widget to the first widget area.
+		 */
+		cy.get(`#widget-list [id$="ep-facet-__i__"]`)
+			.click('top')
+			.within(() => {
+				cy.get('.widgets-chooser-add').click();
+			})
+			.wait('@adminAjax');
+
+		/**
+		 * Add a title, set facet options, and save.
+		 */
+		cy.get(`#widgets-right [id*="ep-facet"]`)
+			.within(() => {
+				cy.get('input[name$="[title]"]').clearThenType('My facet');
+				cy.get('select[name$="[facet]"]').select('post_tag');
+				cy.get('select[name$="[orderby]"]').select('name');
+				cy.get('select[name$="[order]"]').select('asc');
+				cy.get('input[type="submit"]').click();
+			})
+			.wait('@adminAjax');
+
+		/**
+		 * When viewing the last post the widget should be visible and contain
+		 * the correct title and number of posts.
+		 */
+		cy.visit('/');
+		cy.get('.widget_ep-facet').first().as('facetWidget');
+		cy.get('@facetWidget').find('input').should('have.attr', 'placeholder', 'Search Tags');
+		cy.get('@facetWidget').find('.term').should('be.elementsSortedAlphabetically');
+
+		/**
+		 * Visit the block-based Widgets screen.
+		 */
+		cy.wpCli('wp plugin deactivate classic-widgets');
+		cy.openWidgetsPage();
 
+		/**
+		 * Check that the widget is inserted in to the editor as a Legacy
+		 * Widget block.
+		 */
+		cy.get('.wp-block-legacy-widget')
+			.should('contain.text', 'ElasticPress - Facet')
+			.first()
+			.click();
+
+		/**
+		 * Transform the legacywidget into the block.
+		 */
+		cy.get('.block-editor-block-switcher button').click();
+		cy.get(
+			'.block-editor-block-switcher__popover .editor-block-list-item-elasticpress-facet',
+		).click();
+
+		/**
+		 * Check that the widget has been transformed into the correct blocks
+		 * and that their content matches the widget's settings.
+		 */
+		cy.get('.wp-block-heading').contains('My facet').should('exist');
+		cy.get('.wp-block-elasticpress-facet').first().as('facetBlock');
+		cy.get('@facetBlock').find('input').should('have.attr', 'placeholder', 'Search Tags');
+		cy.get('@facetBlock').find('.term').should('be.elementsSortedAlphabetically');
+
+		/**
+		 * Save widgets.
+		 */
+		cy.intercept('/wp-json/wp/v2/sidebars/*').as('sidebarsRest');
+		cy.get('.edit-widgets-header__actions button').contains('Update').click();
+		cy.wait('@sidebarsRest');
+
+		/**
+		 * Check the output of the block on the front end.
+		 */
 		cy.visit('/');
+		cy.get('.wp-block-elasticpress-facet').first().as('facetBlock');
+		cy.get('@facetBlock').find('input').should('have.attr', 'placeholder', 'Search Tags');
+		cy.get('@facetBlock').find('.term').should('be.elementsSortedAlphabetically');
 
-		// We should have two widgets now, one of them the created above.
-		cy.get('.widget_ep-facet').should('have.length', 2);
-		cy.contains('.widget-title', 'Facet (Tags)').should('be.visible');
-
-		// Check if the widget search works. Additionally, checks a hyphenated slug category.
-		cy.get('.widget_ep-facet').first().as('firstWidget');
-		cy.get('@firstWidget').find('.facet-search').clearThenType('Parent C');
-		cy.get('@firstWidget').contains('.term', 'Parent Category').should('be.visible');
-		cy.get('@firstWidget').contains('.term', 'Child Category').should('not.be.visible');
-
-		// Searching in the first widget should not affect the second.
-		cy.get('.widget_ep-facet').last().as('lastWidget');
-		cy.get('@lastWidget').contains('.term', 'content').should('be.visible');
-
-		// Clear the search input and click in a term that was not visible before.
-		cy.get('@firstWidget').find('.facet-search').clear();
-		cy.get('@firstWidget').contains('.term', 'Classic').click();
-
-		// URL should have changed and selected term should be marked as checked.
-		cy.url().should('include', 'ep_filter_category=classic');
-		cy.get('@firstWidget')
-			.contains('.term', 'Classic')
-			.find('.ep-checkbox')
-			.should('have.class', 'checked');
-
-		// Visible articles should contain the selected category.
-		cy.get('article').each(($article) => {
-			cy.wrap($article).contains('.cat-links a', 'Classic').should('be.visible');
-		});
-
-		// Check pagination.
-		cy.get('.next.page-numbers').click();
-		cy.url().should('include', 'page/2/?ep_filter_category=classic');
-		cy.get('article').each(($article) => {
-			cy.wrap($article).contains('.cat-links a', 'Classic').should('be.visible');
-		});
-
-		// Check if pagination resets when clicking on a different term.
-		cy.get('@firstWidget').contains('.term', 'Post Formats').click();
-		cy.url().should('include', 'ep_filter_category=classic%2Cpost-formats');
-		cy.url().should('not.include', 'page');
+		/**
+		 * TODO: Test searching within block and if links are correct.
+		 */
 	});
 
 	it('Does not change post types being displayed', () => {
diff --git a/tests/cypress/integration/features/related-posts.spec.js b/tests/cypress/integration/features/related-posts.spec.js
index 37b4c48b5f..f877de7432 100644
--- a/tests/cypress/integration/features/related-posts.spec.js
+++ b/tests/cypress/integration/features/related-posts.spec.js
@@ -37,8 +37,7 @@ describe('Related Posts Feature', () => {
 		/**
 		 * Check that the number control works.
 		 */
-		cy.openSettingsSidebar();
-		cy.get('.edit-post-sidebar__panel-tab').contains('Block').click();
+		cy.openBlockSettingsSidebar();
 		cy.get('input[type="number"][aria-label="Number of items"]').clearThenType('2');
 		cy.get(`.wp-block-elasticpress-related-posts li`).should('have.length', 2);
 
diff --git a/tests/cypress/support/assertions.js b/tests/cypress/support/assertions.js
new file mode 100644
index 0000000000..5f5e015629
--- /dev/null
+++ b/tests/cypress/support/assertions.js
@@ -0,0 +1,13 @@
+/**
+ * Assert that a value should be a list of elements sorted alphabetically by
+ * its text content.
+ */
+chai.Assertion.addMethod('elementsSortedAlphabetically', function () {
+	const actual = this._obj.toArray().map(($el) => $el.textContent);
+	const expected = [...actual].sort((a, b) => a.localeCompare(b));
+
+	this.assert(
+		new chai.Assertion(actual).to.deep.equal(expected),
+		' Expected #{this} to be sorted alphabetically',
+	);
+});
diff --git a/tests/cypress/support/commands.js b/tests/cypress/support/commands.js
index 619c8fb9eb..7136e204c1 100644
--- a/tests/cypress/support/commands.js
+++ b/tests/cypress/support/commands.js
@@ -271,12 +271,26 @@ Cypress.Commands.add('deactivatePlugin', (slug, method = 'dashboard', mode = 'si
 	cy.wpCli(command);
 });
 
-Cypress.Commands.add('openSettingsSidebar', () => {
-	cy.get('.edit-post-header__settings button[aria-label="Settings"]').click();
+Cypress.Commands.add('openBlockSettingsSidebar', () => {
+	cy.get('body').then(($el) => {
+		if ($el.hasClass('widgets-php')) {
+			cy.get('.edit-widgets-header__actions button[aria-label="Settings"]').click();
+			cy.get('.edit-widgets-sidebar__panel-tab').contains('Block').click();
+		} else {
+			cy.get('.edit-post-header__settings button[aria-label="Settings"]').click();
+			cy.get('.edit-post-sidebar__panel-tab').contains('Block').click();
+		}
+	});
 });
 
 Cypress.Commands.add('openBlockInserter', () => {
-	cy.get('.edit-post-header-toolbar__inserter-toggle').click();
+	cy.get('body').then(($el) => {
+		if ($el.hasClass('widgets-php')) {
+			cy.get('.edit-widgets-header-toolbar__inserter-toggle').click();
+		} else {
+			cy.get('.edit-post-header-toolbar__inserter-toggle').click();
+		}
+	});
 });
 
 Cypress.Commands.add('getBlocksList', () => {
diff --git a/tests/cypress/support/index.js b/tests/cypress/support/index.js
index f42dec1025..8d9ac30512 100644
--- a/tests/cypress/support/index.js
+++ b/tests/cypress/support/index.js
@@ -14,6 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
+import './assertions';
 import './commands';
 import './global-hooks';
 

From 142e9d324581326bafe1b91df56bd3c3ca35c6a4 Mon Sep 17 00:00:00 2001
From: Jacob Peattie <jacob.peattie@10up.com>
Date: Tue, 9 Aug 2022 19:07:46 +1000
Subject: [PATCH 13/16] Complete block and widget tests.

---
 .../integration/features/facets.spec.js       | 226 ++++++++++++------
 .../features/related-posts.spec.js            | 179 +++++++-------
 tests/cypress/support/commands.js             |  52 ++++
 3 files changed, 280 insertions(+), 177 deletions(-)

diff --git a/tests/cypress/integration/features/facets.spec.js b/tests/cypress/integration/features/facets.spec.js
index c9f5c1250e..8092b3a85c 100644
--- a/tests/cypress/integration/features/facets.spec.js
+++ b/tests/cypress/integration/features/facets.spec.js
@@ -1,115 +1,195 @@
 describe('Facets Feature', () => {
+	/**
+	 * Ensure the feature is active, perform an index, and ensure Classic
+	 * Widgets is installed before running tests.
+	 */
 	before(() => {
 		cy.maybeEnableFeature('facets');
 		cy.wpCli('elasticpress index --setup --yes');
-		cy.wpCli('wp plugin install classic-widgets');
+		cy.wpCli('plugin install classic-widgets');
+		cy.wpCli('post list --s="A new" --ep_integrate=false --format=ids').then(
+			(wpCliResponse) => {
+				if (wpCliResponse.stdout) {
+					cy.wpCli(`post delete ${wpCliResponse.stdout} --force`);
+				}
+			},
+		);
 	});
 
+	/**
+	 * Delete all widgets and ensure Classic Widgets is deactivated before each
+	 * test.
+	 */
 	beforeEach(() => {
-		cy.wpCli('widget reset --all');
-		cy.wpCli('wp plugin deactivate classic-widgets');
+		cy.emptyWidgets();
+		cy.wpCli('plugin deactivate classic-widgets');
 	});
 
 	/**
 	 * Test that the Related Posts block is functional.
 	 */
-	it('Facets block is functional', () => {
+	it('Facet block', () => {
 		/**
-		 * Visit the block-based Widgets screen.
+		 * Insert two Facets blocks.
 		 */
 		cy.openWidgetsPage();
-
-		/**
-		 * Insert a Facets block.
-		 */
 		cy.openBlockInserter();
 		cy.getBlocksList().should('contain.text', 'Facet (ElasticPress)');
 		cy.insertBlock('Facet (ElasticPress)');
-		cy.get('.wp-block-elasticpress-facet').first().as('facetBlock');
+		cy.insertBlock('Facet (ElasticPress)');
+		cy.get('.wp-block-elasticpress-facet').last().as('block');
 
 		/**
-		 * Check that the block is inserted into the editor, and contains the
+		 * Verify that the blocks are inserted into the editor, and contain the
 		 * expected content.
 		 */
-		cy.get('@facetBlock').find('input').should('have.attr', 'placeholder', 'Search Categories');
-		cy.get('@facetBlock').click();
+		cy.get('@block').find('input').should('have.attr', 'placeholder', 'Search Categories');
 
 		/**
-		 * Set the block to use Tags and sort by name in ascending order.
+		 * Set the second block to use Tags and sort by name in ascending order.
 		 */
+		cy.get('@block').click();
 		cy.openBlockSettingsSidebar();
 		cy.get('.block-editor-block-inspector select').select('post_tag');
 		cy.get('.block-editor-block-inspector input[type="radio"][value="name"]').click();
 		cy.get('.block-editor-block-inspector input[type="radio"][value="asc"]').click();
 
 		/**
-		 * Verify the block has the expected output.
+		 * Verify the block has the expected output in the editor based on the
+		 * block's settings.
 		 */
-		cy.get('@facetBlock').find('input').should('have.attr', 'placeholder', 'Search Tags');
-		cy.get('@facetBlock').find('.term').should('be.elementsSortedAlphabetically');
+		cy.get('@block').find('input').should('have.attr', 'placeholder', 'Search Tags');
+		cy.get('@block').find('.term').should('be.elementsSortedAlphabetically');
 
 		/**
-		 * Save widgets.
+		 * Save widgets and visit the front page.
 		 */
 		cy.intercept('/wp-json/wp/v2/sidebars/*').as('sidebarsRest');
 		cy.get('.edit-widgets-header__actions button').contains('Update').click();
 		cy.wait('@sidebarsRest');
+		cy.visit('/');
 
 		/**
-		 * Check the output of the block on the front end.
+		 * Verify the blocks have the expected output on the front-end based on
+		 * their settings.
 		 */
-		cy.visit('/');
-		cy.get('.wp-block-elasticpress-facet').first().as('facetBlock');
-		cy.get('@facetBlock').find('input').should('have.attr', 'placeholder', 'Search Tags');
-		cy.get('@facetBlock').find('.term').should('be.elementsSortedAlphabetically');
-	});
+		cy.get('.wp-block-elasticpress-facet').first().as('firstBlock');
+		cy.get('.wp-block-elasticpress-facet').last().as('secondBlock');
+		cy.get('@firstBlock').find('input').should('have.attr', 'placeholder', 'Search Categories');
+		cy.get('@secondBlock').find('input').should('have.attr', 'placeholder', 'Search Tags');
+		cy.get('@secondBlock').find('.term').should('be.elementsSortedAlphabetically');
 
-	/**
-	 * Test that the Related Posts widget is functional and can be transformed
-	 * into the Related Posts block.
-	 */
-	it('Related Posts widget is functional', () => {
 		/**
-		 * Visit the classic Widgets screen.
+		 * Typing in the input should filter the list of terms for that block
+		 * without affecting other blocks.
 		 */
-		cy.wpCli('wp plugin activate classic-widgets');
-		cy.openWidgetsPage();
-		cy.intercept('/wp-admin/admin-ajax.php').as('adminAjax');
+		cy.get('@firstBlock').find('input').as('firstBlockSearch').clearThenType('Parent C');
+		cy.get('@firstBlock').contains('.term', 'Parent Category').should('be.visible');
+		cy.get('@firstBlock').contains('.term', 'Child Category').should('not.be.visible');
+		cy.get('@secondBlock').contains('.term', 'content').should('be.visible');
+
+		/**
+		 * Clearing the input should restore previously hidden terms and allow
+		 * them to be selected.
+		 */
+		cy.get('@firstBlockSearch').clear();
+		cy.get('@firstBlock').contains('.term', 'Classic').click();
+
+		/**
+		 * Selecting that term should lead to the correct URL, mark the correct
+		 * item as checked, and all articles being displayed should have the
+		 * selected category.
+		 */
+		cy.url().should('include', 'ep_filter_category=classic');
+		cy.get('@firstBlock')
+			.contains('.term', 'Classic')
+			.find('.ep-checkbox')
+			.should('have.class', 'checked');
+		cy.get('article').each(($article) => {
+			cy.wrap($article).contains('.cat-links a', 'Classic').should('exist');
+		});
 
 		/**
-		 * Find and add the widget to the first widget area.
+		 * Facets should continue to apply across pagination.
 		 */
-		cy.get(`#widget-list [id$="ep-facet-__i__"]`)
-			.click('top')
-			.within(() => {
-				cy.get('.widgets-chooser-add').click();
-			})
-			.wait('@adminAjax');
+		cy.get('.page-numbers.next').click();
+		cy.url().should('include', 'page/2');
+		cy.url().should('include', 'ep_filter_category=classic');
+		cy.get('article').each(($article) => {
+			cy.wrap($article).contains('.cat-links a', 'Classic').should('exist');
+		});
 
 		/**
-		 * Add a title, set facet options, and save.
+		 * When another facet is selected pagination should reset and results
+		 * should be filtered by both selections.
 		 */
-		cy.get(`#widgets-right [id*="ep-facet"]`)
-			.within(() => {
-				cy.get('input[name$="[title]"]').clearThenType('My facet');
-				cy.get('select[name$="[facet]"]').select('post_tag');
-				cy.get('select[name$="[orderby]"]').select('name');
-				cy.get('select[name$="[order]"]').select('asc');
-				cy.get('input[type="submit"]').click();
-			})
-			.wait('@adminAjax');
+		cy.get('@secondBlock').contains('.term', 'template').click();
+		cy.url().should('include', 'ep_filter_category=classic');
+		cy.url().should('include', 'ep_filter_post_tag=template');
+		cy.url().should('not.include', 'page/2');
+		cy.get('@firstBlock')
+			.contains('.term', 'Classic')
+			.find('.ep-checkbox')
+			.should('have.class', 'checked');
+		cy.get('@secondBlock')
+			.contains('.term', 'template')
+			.find('.ep-checkbox')
+			.should('have.class', 'checked');
+		cy.get('article').each(($article) => {
+			cy.wrap($article).contains('.cat-links a', 'Classic').should('exist');
+			cy.wrap($article).contains('.tags-links a', 'template').should('exist');
+		});
 
 		/**
-		 * When viewing the last post the widget should be visible and contain
-		 * the correct title and number of posts.
+		 * Clicking selected facet should remove it while keeping any other
+		 * facets active.
+		 */
+		cy.get('@secondBlock').contains('.term', 'template').click();
+		cy.url().should('not.include', 'ep_filter_post_tag=template');
+		cy.url().should('include', 'ep_filter_category=classic');
+	});
+
+	/**
+	 * Test that the Facet widget is functional and can be transformed into the
+	 * Facet block.
+	 */
+	it('Facet widget', () => {
+		/**
+		 * Add the legacy widget.
+		 */
+		cy.createClassicWidget('ep-facet', [
+			{
+				name: 'title',
+				value: 'My facet',
+			},
+			{
+				name: 'facet',
+				value: 'post_tag',
+				type: 'select',
+			},
+			{
+				name: 'orderby',
+				value: 'name',
+				type: 'select',
+			},
+			{
+				name: 'order',
+				value: 'asc',
+				type: 'select',
+			},
+		]);
+
+		/**
+		 * Verify the widget has the expected output on the front-end based on
+		 * the widget's settings.
 		 */
 		cy.visit('/');
-		cy.get('.widget_ep-facet').first().as('facetWidget');
-		cy.get('@facetWidget').find('input').should('have.attr', 'placeholder', 'Search Tags');
-		cy.get('@facetWidget').find('.term').should('be.elementsSortedAlphabetically');
+		cy.get('.widget_ep-facet').first().as('widget');
+		cy.get('@widget').find('input').should('have.attr', 'placeholder', 'Search Tags');
+		cy.get('@widget').find('.term').should('be.elementsSortedAlphabetically');
 
 		/**
-		 * Visit the block-based Widgets screen.
+		 * Visit the block-based widgets screen.
 		 */
 		cy.wpCli('wp plugin deactivate classic-widgets');
 		cy.openWidgetsPage();
@@ -124,7 +204,7 @@ describe('Facets Feature', () => {
 			.click();
 
 		/**
-		 * Transform the legacywidget into the block.
+		 * Transform the legacy widget into the block.
 		 */
 		cy.get('.block-editor-block-switcher button').click();
 		cy.get(
@@ -132,34 +212,24 @@ describe('Facets Feature', () => {
 		).click();
 
 		/**
-		 * Check that the widget has been transformed into the correct blocks
-		 * and that their content matches the widget's settings.
+		 * Check that the widget has been transformed into the correct blocks.
 		 */
 		cy.get('.wp-block-heading').contains('My facet').should('exist');
-		cy.get('.wp-block-elasticpress-facet').first().as('facetBlock');
-		cy.get('@facetBlock').find('input').should('have.attr', 'placeholder', 'Search Tags');
-		cy.get('@facetBlock').find('.term').should('be.elementsSortedAlphabetically');
+		cy.get('.wp-block-elasticpress-facet').should('exist').first().as('block');
 
 		/**
-		 * Save widgets.
-		 */
-		cy.intercept('/wp-json/wp/v2/sidebars/*').as('sidebarsRest');
-		cy.get('.edit-widgets-header__actions button').contains('Update').click();
-		cy.wait('@sidebarsRest');
-
-		/**
-		 * Check the output of the block on the front end.
-		 */
-		cy.visit('/');
-		cy.get('.wp-block-elasticpress-facet').first().as('facetBlock');
-		cy.get('@facetBlock').find('input').should('have.attr', 'placeholder', 'Search Tags');
-		cy.get('@facetBlock').find('.term').should('be.elementsSortedAlphabetically');
-
-		/**
-		 * TODO: Test searching within block and if links are correct.
+		 * Check that the block's settings match the widget's.
 		 */
+		cy.get('@block').click();
+		cy.get('.block-editor-block-inspector option[value="post_tag"]').should('be.selected');
+		cy.get('.block-editor-block-inspector input[value="name"]').should('be.checked');
+		cy.get('.block-editor-block-inspector input[value="asc"]').should('be.checked');
 	});
 
+	/**
+	 * Test that the blog, taxonomy archives, and search only display the
+	 * expected post types.
+	 */
 	it('Does not change post types being displayed', () => {
 		cy.wpCliEval(
 			`
diff --git a/tests/cypress/integration/features/related-posts.spec.js b/tests/cypress/integration/features/related-posts.spec.js
index f877de7432..e9b8baab3e 100644
--- a/tests/cypress/integration/features/related-posts.spec.js
+++ b/tests/cypress/integration/features/related-posts.spec.js
@@ -1,13 +1,33 @@
 describe('Related Posts Feature', () => {
 	/**
-	 * Test that the Related Posts block is functional.
+	 * Ensure the feature is active and ensure Classic Widgets is installed
+	 * before running tests.
 	 */
-	it('Related Posts block is functional', () => {
-		/**
-		 * Enable the feature.
-		 */
+	before(() => {
 		cy.maybeEnableFeature('related_posts');
+		cy.wpCli('wp plugin install classic-widgets');
+	});
 
+	/**
+	 * Delete all widgets, ensure Classic Widgets is deactivated, and remove
+	 * test posts before each test.
+	 */
+	beforeEach(() => {
+		cy.emptyWidgets();
+		cy.wpCli('plugin deactivate classic-widgets');
+		cy.wpCli('post list --s="Test related posts" --ep_integrate=false --format=ids').then(
+			(wpCliResponse) => {
+				if (wpCliResponse.stdout) {
+					cy.wpCli(`post delete ${wpCliResponse.stdout} --force`);
+				}
+			},
+		);
+	});
+
+	/**
+	 * Test that the Related Posts block is functional.
+	 */
+	it('Related Posts block', () => {
 		/**
 		 * Create some posts that will be related.
 		 */
@@ -26,29 +46,44 @@ describe('Related Posts Feature', () => {
 		cy.insertBlock('Related Posts (ElasticPress)');
 
 		/**
-		 * Check that the block is inserted into the editor, and contains the
+		 * Verify that the block is inserted into the editor, and contains the
 		 * expected content.
 		 */
-		cy.get(`.block-editor-block-list__layout .wp-block-elasticpress-related-posts`)
-			.should('exist')
-			.should('contain.text', 'Test related posts block #1')
-			.click();
+		cy.get('.wp-block-elasticpress-related-posts').first().as('block');
+		cy.get('@block')
+			.find('li')
+			.should('contain', 'Test related posts block #')
+			.should('have.length', 5);
 
 		/**
-		 * Check that the number control works.
+		 * Set the block to display 2 related posts.
 		 */
+		cy.get('@block').click();
 		cy.openBlockSettingsSidebar();
 		cy.get('input[type="number"][aria-label="Number of items"]').clearThenType('2');
-		cy.get(`.wp-block-elasticpress-related-posts li`).should('have.length', 2);
 
 		/**
-		 * Check that the block is rendered on the front-end, and contains
-		 * the expected content.
+		 * Verify the block has the expected output in the editor based on the
+		 * block's settings.
+		 */
+		cy.get('@block')
+			.find('li')
+			.should('contain', 'Test related posts block #')
+			.should('have.length', 2);
+
+		/**
+		 * Update the post and visit the front end.
 		 */
 		cy.get('.editor-post-publish-button__button').click();
 		cy.get('.components-snackbar__action').click();
-		cy.get('.wp-block-elasticpress-related-posts li')
-			.should('exist')
+
+		/**
+		 * Verify the block has the expected output on the front-end based on the
+		 * block's settings.
+		 */
+		cy.get('.wp-block-elasticpress-related-posts').first().as('block');
+		cy.get('@block')
+			.find('li')
 			.should('contain', 'Test related posts block #')
 			.should('have.length', 2);
 	});
@@ -57,46 +92,20 @@ describe('Related Posts Feature', () => {
 	 * Test that the Related Posts widget is functional and can be transformed
 	 * into the Related Posts block.
 	 */
-	it('Related Posts widget is functional', () => {
+	it('Related Posts widget', () => {
 		/**
-		 * Enable the feature.
+		 * Add the legacy widget.
 		 */
-		cy.maybeEnableFeature('related_posts');
-
-		/**
-		 * Clear any existing widgets.
-		 */
-		cy.wpCli('widget reset --all');
-
-		/**
-		 * Visit the classic Widgets screen.
-		 */
-		cy.wpCli('wp plugin install classic-widgets --activate');
-		cy.openWidgetsPage();
-
-		/**
-		 * Find and add the widget to the first widget area.
-		 */
-		cy.intercept('/wp-admin/admin-ajax.php').as('adminAjax');
-
-		cy.get(`#widget-list [id$="ep-related-posts-__i__"]`)
-			.click('top')
-			.within(() => {
-				cy.get('.widgets-chooser-add').click();
-			});
-
-		cy.wait('@adminAjax');
-
-		/**
-		 * Add a title, set the post count, and save.
-		 */
-		cy.get(`#widgets-right [id*="ep-related-posts"]`).within(() => {
-			cy.get('input[name$="[title]"]').clearThenType('My related posts');
-			cy.get('input[name$="[num_posts]"]').clearThenType('2');
-			cy.get('input[type="submit"]').click();
-		});
-
-		cy.wait('@adminAjax');
+		cy.createClassicWidget('ep-related-posts', [
+			{
+				name: 'title',
+				value: 'My related posts widget',
+			},
+			{
+				name: 'num_posts',
+				value: '2',
+			},
+		]);
 
 		/**
 		 * Create some posts that will be related and view the last post.
@@ -114,18 +123,15 @@ describe('Related Posts Feature', () => {
 		}
 
 		/**
-		 * When viewing the last post the widget should be visible and contain
-		 * the correct title and number of posts.
+		 * Verify the widget has the expected output on the front-end based on
+		 * the widget's settings.
 		 */
-		cy.get(`[id^="ep-related-posts"]`)
-			.should('be.visible')
-			.should('contain.text', 'My related posts')
-			.within(() => {
-				cy.get('li')
-					.should('exist')
-					.should('contain', 'Test related posts widget #')
-					.should('have.length', 2);
-			});
+		cy.get(`[id^="ep-related-posts"]`).first().as('widget');
+		cy.get('@widget')
+			.should('contain.text', 'My related posts widget')
+			.find('li')
+			.should('contain', 'Test related posts widget #')
+			.should('have.length', 2);
 
 		/**
 		 * Visit the block-based Widgets screen.
@@ -137,53 +143,28 @@ describe('Related Posts Feature', () => {
 		 * Check that the widget is inserted in to the editor as a Legacy
 		 * Widget block.
 		 */
-		cy.get(`.block-editor-block-list__layout .wp-block-legacy-widget`)
-			.should('exist')
-			.should('contain.text', 'ElasticPress - Related Posts')
-			.first()
-			.click();
+		cy.get(`.wp-block-legacy-widget`).first().as('widget');
+		cy.get('@widget').should('contain.text', 'ElasticPress - Related Posts');
 
 		/**
 		 * Transform the legacywidget into the block.
 		 */
+		cy.get('@widget').click();
 		cy.get('.block-editor-block-switcher button').click();
 		cy.get(
 			'.block-editor-block-switcher__popover .editor-block-list-item-elasticpress-related-posts',
 		).click();
 
 		/**
-		 * Check that the widget has been transformed into the correct blocks
-		 * and that their content matches the widget's settings.
-		 */
-		cy.get(`.block-editor-block-list__layout .wp-block-heading`)
-			.should('exist')
-			.should('contain.text', 'My related posts');
-
-		cy.get(`.block-editor-block-list__layout .wp-block-elasticpress-related-posts li`)
-			.should('exist')
-			.should('contain.text', 'Test related posts widget #')
-			.should('have.length', 2);
-
-		cy.get('.edit-widgets-header__actions button').contains('Update').click();
-
-		/**
-		 * Create a new post and view it.
+		 * Check that the widget has been transformed into the correct blocks.
 		 */
-		cy.publishPost(
-			{
-				title: 'Test related posts widget #5',
-				content: 'Inceptos tristique class ac eleifend leo.',
-			},
-			true,
-		);
+		cy.get(`.wp-block-heading`).contains('My related posts widget').should('exist');
+		cy.get('.wp-block-elasticpress-related-posts').should('exist').first().as('block');
 
 		/**
-		 * Confirm that the transformed block is rendered on the front-end,
-		 * and contains the expected content.
+		 * Check that the block's settings match the widget's.
 		 */
-		cy.get('.wp-block-elasticpress-related-posts li')
-			.should('exist')
-			.should('contain', 'Test related posts widget #')
-			.should('have.length', 2);
+		cy.get('@block').click();
+		cy.get('input[type="number"][aria-label="Number of items"]').should('have.value', '2');
 	});
 });
diff --git a/tests/cypress/support/commands.js b/tests/cypress/support/commands.js
index 7136e204c1..f96c329bf5 100644
--- a/tests/cypress/support/commands.js
+++ b/tests/cypress/support/commands.js
@@ -300,3 +300,55 @@ Cypress.Commands.add('getBlocksList', () => {
 Cypress.Commands.add('insertBlock', (blockName) => {
 	cy.get('.block-editor-block-types-list__item').contains(blockName).click();
 });
+
+Cypress.Commands.add('createClassicWidget', (widgetId, settings) => {
+	cy.wpCli('wp plugin activate classic-widgets');
+	cy.openWidgetsPage();
+	cy.intercept('/wp-admin/admin-ajax.php').as('adminAjax');
+
+	/**
+	 * Find and add the widget to the first widget area.
+	 */
+	cy.get(`#widget-list [id$="${widgetId}-__i__"]`)
+		.click('top')
+		.within(() => {
+			cy.get('.widgets-chooser-add').click();
+		})
+		.wait('@adminAjax');
+
+	/**
+	 * Set widget settings and save.
+	 */
+	cy.get(`#widgets-right .widget[id*="${widgetId}"]`)
+		.last()
+		.within(() => {
+			for (const setting of settings) {
+				cy.get(`[name$="[${setting.name}]"]`).as('control');
+
+				switch (setting.type) {
+					case 'select':
+						cy.get('@control').select(setting.value);
+						break;
+					case 'checkbox':
+					case 'radio':
+						cy.get('@control').check(setting.value);
+						break;
+					default:
+						cy.get('@control').clearThenType(setting.value);
+						break;
+				}
+			}
+
+			cy.get('input[type="submit"]').click();
+		})
+		.wait('@adminAjax');
+});
+
+Cypress.Commands.add('emptyWidgets', () => {
+	cy.wpCli('widget reset --all');
+	cy.wpCli('widget list wp_inactive_widgets --format=ids').then((wpCliResponse) => {
+		if (wpCliResponse.stdout) {
+			cy.wpCli(`widget delete ${wpCliResponse.stdout}`);
+		}
+	});
+});

From b6052be9ff05fd2879756c9472463c8c17190b0b Mon Sep 17 00:00:00 2001
From: Jacob Peattie <jacob.peattie@10up.com>
Date: Thu, 11 Aug 2022 21:32:17 +1000
Subject: [PATCH 14/16] Move classic-widgets plugin to wp-env for tests.

---
 .wp-env.json                                             | 1 +
 tests/cypress/integration/features/facets.spec.js        | 6 +++---
 tests/cypress/integration/features/related-posts.spec.js | 6 +++---
 tests/cypress/support/commands.js                        | 1 -
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/.wp-env.json b/.wp-env.json
index bbee30b2b1..52180f7c55 100644
--- a/.wp-env.json
+++ b/.wp-env.json
@@ -6,6 +6,7 @@
       ],
       "plugins": [
         ".",
+        "https://downloads.wordpress.org/plugin/classic-widgets.zip",
         "https://downloads.wordpress.org/plugin/debug-bar.zip",
         "https://downloads.wordpress.org/plugin/debug-bar-elasticpress.zip",
         "https://downloads.wordpress.org/plugin/wordpress-importer.zip",
diff --git a/tests/cypress/integration/features/facets.spec.js b/tests/cypress/integration/features/facets.spec.js
index 8092b3a85c..6175a03027 100644
--- a/tests/cypress/integration/features/facets.spec.js
+++ b/tests/cypress/integration/features/facets.spec.js
@@ -6,7 +6,6 @@ describe('Facets Feature', () => {
 	before(() => {
 		cy.maybeEnableFeature('facets');
 		cy.wpCli('elasticpress index --setup --yes');
-		cy.wpCli('plugin install classic-widgets');
 		cy.wpCli('post list --s="A new" --ep_integrate=false --format=ids').then(
 			(wpCliResponse) => {
 				if (wpCliResponse.stdout) {
@@ -22,7 +21,7 @@ describe('Facets Feature', () => {
 	 */
 	beforeEach(() => {
 		cy.emptyWidgets();
-		cy.wpCli('plugin deactivate classic-widgets');
+		cy.deactivatePlugin('classic-widgets', 'wpCli');
 	});
 
 	/**
@@ -157,6 +156,7 @@ describe('Facets Feature', () => {
 		/**
 		 * Add the legacy widget.
 		 */
+		cy.activatePlugin('classic-widgets', 'wpCli');
 		cy.createClassicWidget('ep-facet', [
 			{
 				name: 'title',
@@ -191,7 +191,7 @@ describe('Facets Feature', () => {
 		/**
 		 * Visit the block-based widgets screen.
 		 */
-		cy.wpCli('wp plugin deactivate classic-widgets');
+		cy.deactivatePlugin('classic-widgets', 'wpCli');
 		cy.openWidgetsPage();
 
 		/**
diff --git a/tests/cypress/integration/features/related-posts.spec.js b/tests/cypress/integration/features/related-posts.spec.js
index e9b8baab3e..2071b32fa4 100644
--- a/tests/cypress/integration/features/related-posts.spec.js
+++ b/tests/cypress/integration/features/related-posts.spec.js
@@ -5,7 +5,6 @@ describe('Related Posts Feature', () => {
 	 */
 	before(() => {
 		cy.maybeEnableFeature('related_posts');
-		cy.wpCli('wp plugin install classic-widgets');
 	});
 
 	/**
@@ -14,7 +13,7 @@ describe('Related Posts Feature', () => {
 	 */
 	beforeEach(() => {
 		cy.emptyWidgets();
-		cy.wpCli('plugin deactivate classic-widgets');
+		cy.deactivatePlugin('classic-widgets', 'wpCli');
 		cy.wpCli('post list --s="Test related posts" --ep_integrate=false --format=ids').then(
 			(wpCliResponse) => {
 				if (wpCliResponse.stdout) {
@@ -96,6 +95,7 @@ describe('Related Posts Feature', () => {
 		/**
 		 * Add the legacy widget.
 		 */
+		cy.activatePlugin('classic-widgets', 'wpCli');
 		cy.createClassicWidget('ep-related-posts', [
 			{
 				name: 'title',
@@ -136,7 +136,7 @@ describe('Related Posts Feature', () => {
 		/**
 		 * Visit the block-based Widgets screen.
 		 */
-		cy.wpCli('wp plugin deactivate classic-widgets');
+		cy.deactivatePlugin('classic-widgets', 'wpCli');
 		cy.openWidgetsPage();
 
 		/**
diff --git a/tests/cypress/support/commands.js b/tests/cypress/support/commands.js
index a393441451..8b98bf8906 100644
--- a/tests/cypress/support/commands.js
+++ b/tests/cypress/support/commands.js
@@ -302,7 +302,6 @@ Cypress.Commands.add('insertBlock', (blockName) => {
 });
 
 Cypress.Commands.add('createClassicWidget', (widgetId, settings) => {
-	cy.wpCli('wp plugin activate classic-widgets');
 	cy.openWidgetsPage();
 	cy.intercept('/wp-admin/admin-ajax.php').as('adminAjax');
 

From 31fb393b92cbe291119040a3a113ffe9754854a6 Mon Sep 17 00:00:00 2001
From: Jacob Peattie <jacob.peattie@10up.com>
Date: Thu, 11 Aug 2022 21:41:03 +1000
Subject: [PATCH 15/16] Clearer test names.

---
 tests/cypress/integration/features/facets.spec.js        | 8 ++++----
 tests/cypress/integration/features/related-posts.spec.js | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/tests/cypress/integration/features/facets.spec.js b/tests/cypress/integration/features/facets.spec.js
index 6175a03027..5c1ae96484 100644
--- a/tests/cypress/integration/features/facets.spec.js
+++ b/tests/cypress/integration/features/facets.spec.js
@@ -1,7 +1,7 @@
 describe('Facets Feature', () => {
 	/**
-	 * Ensure the feature is active, perform an index, and ensure Classic
-	 * Widgets is installed before running tests.
+	 * Ensure the feature is active, perform an index, and remove test posts
+	 * before running tests.
 	 */
 	before(() => {
 		cy.maybeEnableFeature('facets');
@@ -27,7 +27,7 @@ describe('Facets Feature', () => {
 	/**
 	 * Test that the Related Posts block is functional.
 	 */
-	it('Facet block', () => {
+	it('Can insert, configure, and use the Facet block', () => {
 		/**
 		 * Insert two Facets blocks.
 		 */
@@ -152,7 +152,7 @@ describe('Facets Feature', () => {
 	 * Test that the Facet widget is functional and can be transformed into the
 	 * Facet block.
 	 */
-	it('Facet widget', () => {
+	it('Can insert, configure, use, and transform the legacy Facet widget', () => {
 		/**
 		 * Add the legacy widget.
 		 */
diff --git a/tests/cypress/integration/features/related-posts.spec.js b/tests/cypress/integration/features/related-posts.spec.js
index 2071b32fa4..b94c7e1e53 100644
--- a/tests/cypress/integration/features/related-posts.spec.js
+++ b/tests/cypress/integration/features/related-posts.spec.js
@@ -26,7 +26,7 @@ describe('Related Posts Feature', () => {
 	/**
 	 * Test that the Related Posts block is functional.
 	 */
-	it('Related Posts block', () => {
+	it('Can insert, configure, and use the Related Posts block', () => {
 		/**
 		 * Create some posts that will be related.
 		 */
@@ -91,7 +91,7 @@ describe('Related Posts Feature', () => {
 	 * Test that the Related Posts widget is functional and can be transformed
 	 * into the Related Posts block.
 	 */
-	it('Related Posts widget', () => {
+	it('Can insert, configure, use, and transform the legacy Related Posts widget', () => {
 		/**
 		 * Add the legacy widget.
 		 */

From 462f2fc290691c10684b411e51f17e8d041c9863 Mon Sep 17 00:00:00 2001
From: Jacob Peattie <jacob.peattie@10up.com>
Date: Thu, 11 Aug 2022 21:52:24 +1000
Subject: [PATCH 16/16] Move block editor commands to their own file.

---
 tests/cypress/support/commands.js             | 31 +------------------
 .../cypress/support/commands/block-editor.js  | 29 +++++++++++++++++
 2 files changed, 30 insertions(+), 30 deletions(-)
 create mode 100644 tests/cypress/support/commands/block-editor.js

diff --git a/tests/cypress/support/commands.js b/tests/cypress/support/commands.js
index 8b98bf8906..012a5da3e7 100644
--- a/tests/cypress/support/commands.js
+++ b/tests/cypress/support/commands.js
@@ -25,6 +25,7 @@
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
 
 import 'cypress-file-upload';
+import './commands/block-editor';
 
 Cypress.Commands.add('login', (username = 'admin', password = 'password') => {
 	cy.visit(`/wp-admin`);
@@ -271,36 +272,6 @@ Cypress.Commands.add('deactivatePlugin', (slug, method = 'dashboard', mode = 'si
 	cy.wpCli(command);
 });
 
-Cypress.Commands.add('openBlockSettingsSidebar', () => {
-	cy.get('body').then(($el) => {
-		if ($el.hasClass('widgets-php')) {
-			cy.get('.edit-widgets-header__actions button[aria-label="Settings"]').click();
-			cy.get('.edit-widgets-sidebar__panel-tab').contains('Block').click();
-		} else {
-			cy.get('.edit-post-header__settings button[aria-label="Settings"]').click();
-			cy.get('.edit-post-sidebar__panel-tab').contains('Block').click();
-		}
-	});
-});
-
-Cypress.Commands.add('openBlockInserter', () => {
-	cy.get('body').then(($el) => {
-		if ($el.hasClass('widgets-php')) {
-			cy.get('.edit-widgets-header-toolbar__inserter-toggle').click();
-		} else {
-			cy.get('.edit-post-header-toolbar__inserter-toggle').click();
-		}
-	});
-});
-
-Cypress.Commands.add('getBlocksList', () => {
-	cy.get('.block-editor-inserter__block-list');
-});
-
-Cypress.Commands.add('insertBlock', (blockName) => {
-	cy.get('.block-editor-block-types-list__item').contains(blockName).click();
-});
-
 Cypress.Commands.add('createClassicWidget', (widgetId, settings) => {
 	cy.openWidgetsPage();
 	cy.intercept('/wp-admin/admin-ajax.php').as('adminAjax');
diff --git a/tests/cypress/support/commands/block-editor.js b/tests/cypress/support/commands/block-editor.js
new file mode 100644
index 0000000000..637eb46204
--- /dev/null
+++ b/tests/cypress/support/commands/block-editor.js
@@ -0,0 +1,29 @@
+Cypress.Commands.add('openBlockSettingsSidebar', () => {
+	cy.get('body').then(($el) => {
+		if ($el.hasClass('widgets-php')) {
+			cy.get('.edit-widgets-header__actions button[aria-label="Settings"]').click();
+			cy.get('.edit-widgets-sidebar__panel-tab').contains('Block').click();
+		} else {
+			cy.get('.edit-post-header__settings button[aria-label="Settings"]').click();
+			cy.get('.edit-post-sidebar__panel-tab').contains('Block').click();
+		}
+	});
+});
+
+Cypress.Commands.add('openBlockInserter', () => {
+	cy.get('body').then(($el) => {
+		if ($el.hasClass('widgets-php')) {
+			cy.get('.edit-widgets-header-toolbar__inserter-toggle').click();
+		} else {
+			cy.get('.edit-post-header-toolbar__inserter-toggle').click();
+		}
+	});
+});
+
+Cypress.Commands.add('getBlocksList', () => {
+	cy.get('.block-editor-inserter__block-list');
+});
+
+Cypress.Commands.add('insertBlock', (blockName) => {
+	cy.get('.block-editor-block-types-list__item').contains(blockName).click();
+});