From cefab035032a5924c0c5cc968d520abeffe50683 Mon Sep 17 00:00:00 2001
From: Adam Zielinski <adam@adamziel.com>
Date: Fri, 28 Aug 2020 18:08:38 +0200
Subject: [PATCH] Fix invalid HTML structure on the widgets screen (#24866)

* Fix invalid HTML structure on the widgets screen

* Hide the save button on widget blocks

* Add inline CSS to both widgets.php AND the customizer

* Only hide the save button on widgets.php

* Use a named function instead of anonymous one

* Lint
---
 gutenberg.php        | 36 ++++++++++++++++++++++++++++++++++--
 lib/widgets-page.php |  4 ++++
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/gutenberg.php b/gutenberg.php
index d2eb01ecbd298..e6a0c32099d90 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -186,9 +186,41 @@ 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'
+		);
 	}
 }
 
+/**
+ * Overrides dynamic_sidebar_params to make sure Blocks are not wrapped in <form> tag.
+ *
+ * @param  array $arg Dynamic sidebar params.
+ * @return array Updated dynamic sidebar params.
+ */
+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' );
diff --git a/lib/widgets-page.php b/lib/widgets-page.php
index b459a547e343a..6b866f7d0785b 100644
--- a/lib/widgets-page.php
+++ b/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 ) ) {