Fix invalid HTML structure on the widgets screen

gutenberg.php

@@ -186,9 +186,35 @@ function register_site_icon_url( $response ) {
  * Registers the WP_Widget_Block widget
  */
 function gutenberg_register_widgets() {
-	if ( gutenberg_is_experiment_enabled( 'gutenberg-widget-experiments' ) ) {
-		register_widget( 'WP_Widget_Block' );
+	if ( ! gutenberg_is_experiment_enabled( 'gutenberg-widget-experiments' ) ) {
+		return;
+	}
+
+	register_widget( 'WP_Widget_Block' );
+	// By default every widget on widgets.php is wrapped with a <form>.
+	// This means that you can sometimes end up with invalid HTML, e.g. when
+	// one of the widgets is a Search block.
+	//
+	// To fix the problem, let's add a filter that moves the form below the actual
+	// widget content.
+	global $pagenow;
+	if ( 'widgets.php' === $pagenow ) {
+		add_filter(
+			'dynamic_sidebar_params',
+			'gutenberg_override_sidebar_params_for_block_widget'
+		);
 	}
 }
 
+function gutenberg_override_sidebar_params_for_block_widget( $arg ) {
+	if ( 'Block' === $arg[0]['widget_name'] ) {
+		$arg[0]['before_form']           = '';
+		$arg[0]['before_widget_content'] = '<div class="widget-content">';
+		$arg[0]['after_widget_content']  = '</div><form class="block-widget-form">';
+		$arg[0]['after_form']            = '</form>';
+	}
+
+	return $arg;
+}
+
 add_action( 'widgets_init', 'gutenberg_register_widgets' );

lib/widgets-page.php

@@ -39,6 +39,10 @@ function gutenberg_widgets_init( $hook ) {
 	if ( 'widgets.php' === $hook ) {
 		wp_enqueue_style( 'wp-block-library' );
 		wp_enqueue_style( 'wp-block-library-theme' );
+		wp_add_inline_style(
+			'wp-block-library-theme',
+			'.block-widget-form .widget-control-save { display: none; }'
+		);
 		return;
 	}
 	if ( ! in_array( $hook, array( 'gutenberg_page_gutenberg-widgets', 'gutenberg_customizer' ), true ) ) {