feat/3494: Add the "Did You Mean" block for Site editor

.wp-env.json

@@ -47,7 +47,8 @@
         "wp-content/plugins/multiple-required-features.php": "./tests/e2e/src/wordpress-files/test-plugins/multiple-required-features.php",
         "wp-content/uploads/content-example.xml": "./tests/e2e/src/wordpress-files/test-docs/content-example.xml",
         "wp-content/plugins/echo-shortcode.php": "./tests/e2e/src/wordpress-files/test-plugins/echo-shortcode.php",
-		"wp-content/plugins/simulate-setting-dependency.php": "./tests/e2e/src/wordpress-files/test-plugins/simulate-setting-dependency.php"
+        "wp-content/plugins/enable-did-you-mean-block.php": "./tests/e2e/src/wordpress-files/test-plugins/enable-did-you-mean-block.php",
+        "wp-content/plugins/simulate-setting-dependency.php": "./tests/e2e/src/wordpress-files/test-plugins/simulate-setting-dependency.php"
       }
     }
   }

assets/js/blocks/did-you-mean/Edit.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies.
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import { createInterpolateElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Edit component.
+ *
+ * @returns {Function} Component.
+ */
+const Edit = () => {
+	const blockProps = useBlockProps({
+		className: 'wp-block-elasticpress-did-you-mean',
+	});
+
+	return (
+		<div {...blockProps}>
+			{createInterpolateElement(__('Did you mean <a>Hello</a>?', 'elasticpress'), {
+				a: <a href="#" />, // eslint-disable-line jsx-a11y/anchor-has-content, jsx-a11y/control-has-associated-label, jsx-a11y/anchor-is-valid
+			})}
+		</div>
+	);
+};
+
+export default Edit;

assets/js/blocks/did-you-mean/block.json

@@ -0,0 +1,10 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "elasticpress/did-you-mean",
+	"title": "Did You Mean",
+	"category": "elasticpress",
+	"description": "Display ElasticPress spelling suggestions for search queries.",
+	"textdomain": "elasticpress",
+	"editorScript": "ep-did-you-mean-block-script"
+}

assets/js/blocks/did-you-mean/index.js

@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies.
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { search } from '@wordpress/icons';
+
+/**
+ * Internal dependencies.
+ */
+import Edit from './Edit';
+import { name } from './block.json';
+
+registerBlockType(name, {
+	icon: search,
+	edit: () => <Edit />,
+	save: () => null,
+});

includes/classes/Feature/DidYouMean/DidYouMean.php

@@ -8,7 +8,7 @@
 
 namespace ElasticPress\Feature\DidYouMean;
 
-use ElasticPress\{Elasticsearch, Feature, FeatureRequirementsStatus, Features };
+use ElasticPress\{Elasticsearch, Feature, FeatureRequirementsStatus, Utils };
 
 /**
  * Did You Mean feature class.
@@ -61,6 +61,91 @@ public function setup() {
 		add_filter( 'ep_integrate_search_queries', [ $this, 'set_ep_suggestion' ], 10, 2 );
 		add_action( 'template_redirect', [ $this, 'automatically_redirect_user' ] );
 		add_action( 'ep_suggestions', [ $this, 'the_output' ] );
+
+		if ( $this->is_block_enabled_in_editor() ) {
+			add_action( 'init', [ $this, 'register_block' ] );
+		}
+	}
+
+	/**
+	 * Check if Did You Mean block should be enabled in the editor.
+	 *
+	 * @since 5.4.0
+	 * @return bool
+	 */
+	protected function is_block_enabled_in_editor(): bool {
+		global $pagenow;
+
+		$in_editor = in_array( $pagenow, [ 'post-new.php', 'post.php' ], true );
+
+		/**
+		 * Filter if Did You Mean block should be enabled in the post editor.
+		 *
+		 * @since 5.4.0
+		 * @hook ep_did_you_mean_enabled_in_editor
+		 * @param {bool} $enabled If enabled or not.
+		 * @return {bool} If enabled or not.
+		 */
+		return ! ( $in_editor && ! apply_filters( 'ep_did_you_mean_enabled_in_editor', false ) );
+	}
+
+	/**
+	 * Register Did You Mean block.
+	 *
+	 * @return void
+	 * @since 5.4.0
+	 */
+	public function register_block(): void {
+		/**
+		 * Registering it here so translation works
+		 *
+		 * @see https://core.trac.wordpress.org/ticket/54797#comment:20
+		 */
+		wp_register_script(
+			'ep-did-you-mean-block-script',
+			EP_URL . 'dist/js/did-you-mean-block-script.js',
+			Utils\get_asset_info( 'did-you-mean-block-script', 'dependencies' ),
+			Utils\get_asset_info( 'did-you-mean-block-script', 'version' ),
+			true
+		);
+
+		wp_set_script_translations( 'ep-did-you-mean-block-script', 'elasticpress' );
+
+		register_block_type_from_metadata(
+			EP_PATH . 'assets/js/blocks/did-you-mean',
+			[
+				'render_callback' => [ $this, 'render_block' ],
+			]
+		);
+	}
+
+	/**
+	 * Render Did You Mean block.
+	 *
+	 * @param array $attributes Block attributes.
+	 * @return string
+	 * @since 5.4.0
+	 */
+	public function render_block( array $attributes = [] ): string {
+		ob_start();
+		do_action( 'ep_suggestions' );
+		$output = ob_get_clean();
+
+		if ( empty( $output ) ) {
+			return '';
+		}
+
+		$wrapper_attributes = get_block_wrapper_attributes(
+			[
+				'class' => 'wp-block-elasticpress-did-you-mean',
+			]
+		);
+
+		return sprintf(
+			'<div %1$s>%2$s</div>',
+			wp_kses_data( $wrapper_attributes ),
+			wp_kses_post( $output )
+		);
 	}
 
 	/**

package.json

@@ -70,6 +70,7 @@
       "comments-script": "./assets/js/comments.js",
       "comments-block-script": "./assets/js/blocks/comments/index.js",
       "dashboard-script": "./assets/js/dashboard.js",
+      "did-you-mean-block-script": "./assets/js/blocks/did-you-mean/index.js",
       "facets-script": "./assets/js/facets.js",
       "facets-block-script": "./assets/js/blocks/facets/taxonomy/index.js",
       "facets-date-block-script": "./assets/js/blocks/facets/date/index.js",

tests/e2e/src/specs/did-you-mean.spec.ts

@@ -0,0 +1,49 @@
+import { test, expect } from '../fixtures.js';
+import {
+	activatePlugin,
+	deactivatePlugin,
+	getEditorFrame,
+	goToAdminPage,
+	maybeEnableFeature,
+} from '../utils.js';
+import {
+	closeBlockInserter,
+	getBlocksList,
+	insertBlock,
+	openBlockInserter,
+} from '../block-editor.js';
+
+test.describe('Did You Mean Feature', { tag: '@group2' }, () => {
+	test.beforeAll(async () => {
+		await maybeEnableFeature('did-you-mean');
+	});
+
+	test.beforeEach(async ({ loggedInPage }) => {
+		await activatePlugin(loggedInPage, 'enable-did-you-mean-block', 'wpCli');
+	});
+
+	test.afterEach(async ({ loggedInPage }) => {
+		await deactivatePlugin(loggedInPage, 'enable-did-you-mean-block', 'wpCli');
+	});
+
+	/**
+	 * The block is gated behind the `ep_did_you_mean_enabled_in_editor` filter
+	 * in the post editor (it is intended for the FSE Site Editor). The test
+	 * plugin flips that filter so we can exercise the inserter and the
+	 * placeholder rendering without spinning up a block theme.
+	 */
+	test('Can insert the Did You Mean block and see its placeholder', async ({ loggedInPage }) => {
+		await goToAdminPage(loggedInPage, 'post-new.php');
+
+		await openBlockInserter(loggedInPage);
+		await expect(await getBlocksList(loggedInPage)).toContainText('Did You Mean');
+		await insertBlock(loggedInPage, 'Did You Mean');
+		await closeBlockInserter(loggedInPage);
+
+		const editorFrame = await getEditorFrame(loggedInPage);
+		const block = editorFrame.locator('.wp-block.wp-block-elasticpress-did-you-mean').first();
+
+		await expect(block).toBeVisible();
+		await expect(block).toContainText('Did you mean Hello?');
+	});
+});

tests/e2e/src/wordpress-files/test-plugins/enable-did-you-mean-block.php

@@ -0,0 +1,12 @@
+<?php
+/**
+ * Plugin Name: Enable Did You Mean Block in Editor
+ * Description: Enables the Did You Mean block in the post editor for test purposes.
+ * Version:     1.0.0
+ * Author:      10up Inc.
+ * License:     GPLv2 or later
+ *
+ * @package ElasticPress_Tests_E2e
+ */
+
+add_filter( 'ep_did_you_mean_enabled_in_editor', '__return_true' );

tests/php/features/TestDidYouMean.php

@@ -380,6 +380,61 @@ public function testEPSuggestionsActionOtherThanMainQuery() {
 		$this->assertStringContainsString( '<span class="result">Showing results for: </span><strong>teet</strong>', $output );
 	}
 
+	/**
+	 * Test Did You Mean block rendering.
+	 */
+	public function testRenderBlock() {
+		global $wp_the_query, $wp_query;
+
+		$this->ep_factory->post->create( [ 'post_content' => 'Test post' ] );
+
+		ElasticPress\Elasticsearch::factory()->refresh_indices();
+
+		$query = new \WP_Query(
+			[
+				's' => 'teet',
+			]
+		);
+
+		$wp_the_query = $query;
+		$wp_query     = $query;
+
+		$feature = ElasticPress\Features::factory()->get_registered_feature( 'did-you-mean' );
+		$feature->register_block();
+
+		$blocks = parse_blocks( '<!-- wp:elasticpress/did-you-mean /-->' );
+		$output = render_block( $blocks[0] );
+
+		$expected = sprintf( '<span class="ep-spell-suggestion">Did you mean: <a href="%s">test</a>?</span>', get_search_link( 'test' ) );
+
+		$this->assertStringContainsString( 'wp-block-elasticpress-did-you-mean', $output );
+		$this->assertStringContainsString( $expected, $output );
+	}
+
+	/**
+	 * Test Did You Mean block rendering when no suggestion is available.
+	 */
+	public function testRenderBlockWithoutSuggestion() {
+		global $wp_the_query, $wp_query;
+
+		$this->ep_factory->post->create( [ 'post_content' => 'Test post' ] );
+
+		ElasticPress\Elasticsearch::factory()->refresh_indices();
+
+		$query = new \WP_Query(
+			[
+				's' => 'test',
+			]
+		);
+
+		$wp_the_query = $query;
+		$wp_query     = $query;
+
+		$output = ElasticPress\Features::factory()->get_registered_feature( 'did-you-mean' )->render_block();
+
+		$this->assertSame( '', $output );
+	}
+
 	/**
 	 * Test maybe_sanitize_suggestion method.
 	 */