Merge pull request #2819 from 10up/feature/2792

Support transforming legacy widgets to blocks and hide widgets when the blocks are available

.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",

assets/js/blocks/facets/index.js

@@ -7,9 +7,11 @@ import { registerBlockType } from '@wordpress/blocks';
  * Internal dependencies.
  */
 import edit from './edit';
+import transforms from './transforms';
 import block from './block.json';
 
 registerBlockType(block, {
 	edit,
 	save: () => {},
+	transforms,
 });

assets/js/blocks/facets/transforms.js

@@ -0,0 +1,29 @@
+/**
+ * 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 = null, ...attributes } = instance.raw;
+
+				if (!title) {
+					return createBlock('elasticpress/facet', attributes);
+				}
+
+				return [
+					createBlock('core/heading', { content: title }),
+					createBlock('elasticpress/facet', attributes),
+				];
+			},
+		},
+	],
+};

assets/js/blocks/related-posts/index.js

@@ -8,8 +8,10 @@ import { registerBlockType } from '@wordpress/blocks';
  */
 import Edit from './Edit';
 import block from './block.json';
+import transforms from './transforms';
 
 registerBlockType(block, {
 	edit: (props) => <Edit {...props} />,
 	save: () => {},
+	transforms,
 });

assets/js/blocks/related-posts/transforms.js

@@ -0,0 +1,29 @@
+/**
+ * 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 = null, num_posts: number } = instance.raw;
+
+				if (!title) {
+					return createBlock('elasticpress/related-posts', { number });
+				}
+
+				return [
+					createBlock('core/heading', { content: title }),
+					createBlock('elasticpress/related-posts', { number }),
+				];
+			},
+		},
+	],
+};

includes/classes/Feature/Facets/Facets.php

@@ -68,6 +68,7 @@ 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' ] );
@@ -488,6 +489,22 @@ 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
+	 * @param array $widgets An array of excluded widget-type IDs.
+	 * @return array array of excluded widget-type IDs to hide.
+	 */
+	public function hide_legacy_widget( $widgets ) {
+		$widgets[] = 'ep-facet';
+
+		return $widgets;
+	}
+
 	/**
 	 * Output feature box long
 	 *

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();

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' ] );
@@ -308,6 +309,22 @@ 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
+	 * @param array $widgets An array of excluded widget-type IDs.
+	 * @return array array of excluded widget-type IDs to hide.
+	 */
+	public function hide_legacy_widget( $widgets ) {
+		$widgets[] = 'ep-related-posts';
+
+		return $widgets;
+	}
+
 	/**
 	 * Output feature box long
 	 *

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 );
 	}