From d7433cb44f194362f448b6508c8803cbe3a13650 Mon Sep 17 00:00:00 2001
From: Dean Sas <dean.sas@automattic.com>
Date: Fri, 2 Jul 2021 09:16:17 +0100
Subject: [PATCH 01/24] [not verified] Widget visiblity: Load conditions for
 gutenberg widgets

Lets the widget visibility conditions run using the new gutenberg based
widgets screen.
---
 .../modules/widget-visibility/widget-conditions.php   | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
index 2574690f7367b..6db2e95047293 100644
--- a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
+++ b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
@@ -10,11 +10,13 @@ class Jetpack_Widget_Conditions {
 	static $passed_template_redirect = false;
 
 	public static function init() {
-		if ( is_admin() ) {
+		global $pagenow;
+
+		if ( is_customize_preview() || 'widgets.php' === $pagenow || 'themes.php' === $pagenow ) {
 			add_action( 'sidebar_admin_setup', array( __CLASS__, 'widget_admin_setup' ) );
 			add_filter( 'widget_update_callback', array( __CLASS__, 'widget_update' ), 10, 3 );
 			add_action( 'in_widget_form', array( __CLASS__, 'widget_conditions_admin' ), 10, 3 );
-		} elseif ( ! in_array( $GLOBALS['pagenow'], array( 'wp-login.php', 'wp-register.php' ) ) ) {
+		} elseif ( ! in_array( $pagenow, array( 'wp-login.php', 'wp-register.php' ), true ) ) {
 			add_filter( 'widget_display_callback', array( __CLASS__, 'filter_widget' ) );
 			add_filter( 'sidebars_widgets', array( __CLASS__, 'sidebars_widgets' ) );
 			add_action( 'template_redirect', array( __CLASS__, 'template_redirect' ) );
@@ -22,11 +24,6 @@ public static function init() {
 	}
 
 	public static function widget_admin_setup() {
-		// Return early if we are not in the block editor.
-		if ( wp_should_load_block_editor_scripts_and_styles() ) {
-			return;
-		}
-
 		wp_enqueue_style( 'widget-conditions', plugins_url( 'widget-conditions/widget-conditions.css', __FILE__ ) );
 		wp_style_add_data( 'widget-conditions', 'rtl', 'replace' );
 		wp_enqueue_script(

From c053b90a14d6f9afab743d8ec03b2fdfa96dc6d4 Mon Sep 17 00:00:00 2001
From: Dean Sas <dean.sas@automattic.com>
Date: Fri, 2 Jul 2021 16:03:45 +0100
Subject: [PATCH 02/24] [not verified] Widget visibility: Include filters in
 API

Register the filters & actions for adding conditional visibility to
legacy widgets when te widget-types API is being called.

This means that the conditional visbility HTML will be included in the
response that gutenberg'd widgets use.
---
 .../jetpack/modules/widget-visibility/widget-conditions.php     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
index 6db2e95047293..a80f1ca52cab8 100644
--- a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
+++ b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
@@ -12,7 +12,7 @@ class Jetpack_Widget_Conditions {
 	public static function init() {
 		global $pagenow;
 
-		if ( is_customize_preview() || 'widgets.php' === $pagenow || 'themes.php' === $pagenow ) {
+		if ( is_customize_preview() || 'widgets.php' === $pagenow || 'themes.php' === $pagenow || str_starts_with( $_SERVER['REQUEST_URI'], '/wp-json/wp/v2/widget-types' ) ) {
 			add_action( 'sidebar_admin_setup', array( __CLASS__, 'widget_admin_setup' ) );
 			add_filter( 'widget_update_callback', array( __CLASS__, 'widget_update' ), 10, 3 );
 			add_action( 'in_widget_form', array( __CLASS__, 'widget_conditions_admin' ), 10, 3 );

From 4c97d8b71913db5156cf12d0aee56c0d995b43d1 Mon Sep 17 00:00:00 2001
From: Dean Sas <dean.sas@automattic.com>
Date: Fri, 2 Jul 2021 16:19:44 +0100
Subject: [PATCH 03/24] [not verified] Widget visibility: Update the JS for
 Gutenberg widgets

The conditional widget visiblity code held some assumptions about the
page it was on:
 - The ID of the element that wraps it
 - Where the visibility button should display

These selectors have been updated to be gutenberg friendly. Backwards
compatibility should be maintained too for the classic widgets screen,
though I haven't yet tested this.
---
 .../widget-conditions/widget-conditions.js    | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions/widget-conditions.js b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions/widget-conditions.js
index 4353eab00f7ac..9941c508d7995 100644
--- a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions/widget-conditions.js
+++ b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions/widget-conditions.js
@@ -1,10 +1,17 @@
 /* global isRtl, widget_conditions_parent_pages, widget_conditions_data, jQuery */
 
 jQuery( function ( $ ) {
-	var widgets_shell = $( 'div#widgets-right' );
+	//  Gutenberg widgets + customizer screen.
+	var widgets_shell = $( '#widgets-editor' );
 
-	if ( ! widgets_shell && ! widgets_shell.length ) {
-		widgets_shell = $( 'form#customize-controls' );
+	if ( 0 === widgets_shell.length ) {
+		// Pre-gutenberg widget screen.
+		widgets_shell = $( 'div#widgets-right' );
+
+		// Pre-gutenberg customizer screen.
+		if ( 0 === widgets_shell.length ) {
+			widgets_shell = $( 'form#customize-controls' );
+		}
 	}
 
 	function setWidgetMargin( $widget ) {
@@ -51,8 +58,15 @@ jQuery( function ( $ ) {
 	}
 
 	function moveWidgetVisibilityButton( $widget ) {
-		var $displayOptionsButton = $widget.find( 'a.display-options' ).first();
-		$displayOptionsButton.insertBefore( $widget.find( 'input.widget-control-save' ) );
+		var $displayOptionsButton = $widget.find( 'a.display-options' ).first(),
+			$relativeWidget = $widget.find( 'input.widget-control-save' );
+
+		if ( 0 === $relativeWidget.length ) {
+			// The save button doesn't exist in gutenberg widget editor, the conditional HTML ought to be displayed
+			// last inside the widget options, so display the button before that.
+			$relativeWidget = $widget.find( 'div.widget-conditional' );
+		}
+		$displayOptionsButton.insertBefore( $relativeWidget );
 
 		// Widgets with no configurable options don't show the Save button's container.
 		$displayOptionsButton

From 26b287bbe0890471af2658d7204720bcfca5fa11 Mon Sep 17 00:00:00 2001
From: Dean Sas <dean.sas@automattic.com>
Date: Mon, 5 Jul 2021 14:47:02 +0100
Subject: [PATCH 04/24] [not verified] Widget visibility: Don't use $_POST
 directly

Don't use $_POST directly for conditions - it isn't populated when using
the API. Instead output form names using the `WP_Widget::get_field_name`
method when creating the form in `widget_conditions_admin` and access
the values using instance variables in `widget_update`
---
 .../widget-visibility/widget-conditions.php   | 26 ++++++++-----------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
index a80f1ca52cab8..211126ae04a9a 100644
--- a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
+++ b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
@@ -292,7 +292,7 @@ public static function get_pages() {
 	/**
 	 * Add the widget conditions to each widget in the admin.
 	 *
-	 * @param $widget unused.
+	 * @param WP_Widget $widget Widget to add conditions settings to.
 	 * @param $return unused.
 	 * @param array         $instance The widget settings.
 	 */
@@ -357,7 +357,7 @@ class="
 				<a href="#" class="button display-options"><?php _e( 'Visibility', 'jetpack' ); ?></a><?php } ?>
 			<div class="widget-conditional-inner">
 				<div class="condition-top">
-					<?php printf( _x( '%s if:', 'placeholder: dropdown menu to select widget visibility; hide if or show if', 'jetpack' ), '<select name="conditions[action]"><option value="show" ' . selected( $conditions['action'], 'show', false ) . '>' . esc_html_x( 'Show', 'Used in the "%s if:" translation for the widget visibility dropdown', 'jetpack' ) . '</option><option value="hide" ' . selected( $conditions['action'], 'hide', false ) . '>' . esc_html_x( 'Hide', 'Used in the "%s if:" translation for the widget visibility dropdown', 'jetpack' ) . '</option></select>' ); ?>
+					<?php printf( _x( '%s if:', 'placeholder: dropdown menu to select widget visibility; hide if or show if', 'jetpack' ), '<select name="' .  esc_attr( $widget->get_field_name( 'conditions[action]' ) ) . '"><option value="show" ' . selected( $conditions['action'], 'show', false ) . '>' . esc_html_x( 'Show', 'Used in the "%s if:" translation for the widget visibility dropdown', 'jetpack' ) . '</option><option value="hide" ' . selected( $conditions['action'], 'hide', false ) . '>' . esc_html_x( 'Hide', 'Used in the "%s if:" translation for the widget visibility dropdown', 'jetpack' ) . '</option></select>' ); ?>
 				</div><!-- .condition-top -->
 
 				<div class="conditions">
@@ -375,7 +375,7 @@ class="
 						?>
 						<div class="condition" data-rule-major="<?php echo esc_attr( $rule['major'] ); ?>" data-rule-minor="<?php echo esc_attr( $rule['minor'] ); ?>" data-rule-has-children="<?php echo esc_attr( $rule['has_children'] ); ?>">
 							<div class="selection alignleft">
-								<select class="conditions-rule-major" name="conditions[rules_major][]">
+								<select class="conditions-rule-major" name="<?php echo esc_attr( $widget->get_field_name( 'conditions[rules_major][]' ) ); ?>">
 									<option value="" <?php selected( '', $rule['major'] ); ?>><?php echo esc_html_x( '-- Select --', 'Used as the default option in a dropdown list', 'jetpack' ); ?></option>
 									<option value="category" <?php selected( 'category', $rule['major'] ); ?>><?php esc_html_e( 'Category', 'jetpack' ); ?></option>
 									<option value="author" <?php selected( 'author', $rule['major'] ); ?>><?php echo esc_html_x( 'Author', 'Noun, as in: "The author of this post is..."', 'jetpack' ); ?></option>
@@ -395,7 +395,7 @@ class="
 
 								<?php _ex( 'is', 'Widget Visibility: {Rule Major [Page]} is {Rule Minor [Search results]}', 'jetpack' ); ?>
 
-								<select class="conditions-rule-minor" name="conditions[rules_minor][]"
+								<select class="conditions-rule-minor" name="<?php echo esc_attr( $widget->get_field_name( 'conditions[rules_minor][]' ) ); ?>"
 								<?php
 								if ( ! $rule['major'] ) {
 									?>
@@ -415,7 +415,7 @@ class="
 									?>
 									 style="display: none;"<?php } ?>>
 									<label>
-										<input type="checkbox" name="conditions[page_children][<?php echo $rule_index; ?>]" value="has" <?php checked( $rule['has_children'], true ); ?> />
+										<input type="checkbox" name="<?php echo esc_attr( $widget->get_field_name( "conditions[page_children][$rule_index]" ) );?>" value="has" <?php checked( $rule['has_children'], true ); ?> />
 										<?php echo esc_html_x( 'Include children', 'Checkbox on Widget Visibility if children of the selected page should be included in the visibility rule.', 'jetpack' ); ?>
 									</label>
 								</span>
@@ -444,7 +444,7 @@ class="
 						<label>
 							<input
 								type="checkbox"
-								name="conditions[match_all]"
+								name="<?php echo esc_attr( $widget->get_field_name( 'conditions[match_all]' ) ); ?>"
 								value="1"
 								class="conditions-match-all"
 								<?php checked( $conditions['match_all'], '1' ); ?> />
@@ -465,24 +465,20 @@ class="conditions-match-all"
 	 * @return array Modified settings.
 	 */
 	public static function widget_update( $instance, $new_instance, $old_instance ) {
-		if ( empty( $_POST['conditions'] ) ) {
-			return $instance;
-		}
-
 		$conditions              = array();
-		$conditions['action']    = $_POST['conditions']['action'];
-		$conditions['match_all'] = ( isset( $_POST['conditions']['match_all'] ) ? '1' : '0' );
+		$conditions['action']    = $instance['conditions']['action'];
+		$conditions['match_all'] = ( isset( $instance['conditions']['match_all'] ) ? '1' : '0' );
 		$conditions['rules']     = array();
 
-		foreach ( $_POST['conditions']['rules_major'] as $index => $major_rule ) {
+		foreach ( $instance['conditions']['rules_major'] as $index => $major_rule ) {
 			if ( ! $major_rule ) {
 				continue;
 			}
 
 			$conditions['rules'][] = array(
 				'major'        => $major_rule,
-				'minor'        => isset( $_POST['conditions']['rules_minor'][ $index ] ) ? $_POST['conditions']['rules_minor'][ $index ] : '',
-				'has_children' => isset( $_POST['conditions']['page_children'][ $index ] ) ? true : false,
+				'minor'        => isset( $instance['conditions']['rules_minor'][ $index ] ) ? $instance['conditions']['rules_minor'][ $index ] : '',
+				'has_children' => isset( $instance['conditions']['page_children'][ $index ] ) ? true : false,
 			);
 		}
 

From e8764c5ab3689bc9e145630fcf1c812869be321b Mon Sep 17 00:00:00 2001
From: Dean Sas <dean.sas@automattic.com>
Date: Mon, 5 Jul 2021 14:50:52 +0100
Subject: [PATCH 05/24] [not verified] Widget visibility: Make saving changes
 work

Saving widget visibility conditions via the API wasn't persisting them.
This was for two reasons:
 1. The hooks weren't registered - which has been solved by checking
    for use of the batch API
 2. Visibility conditions were not needed to be parsed (previous calls
    to the embed endpoint would do that) and so it was assumed there
    were no conditions to save. This has been fixed by not removing
    conditions if there were some in the new settings.
---
 .../modules/widget-visibility/widget-conditions.php        | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
index 211126ae04a9a..f5d41f79b3f8c 100644
--- a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
+++ b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
@@ -12,7 +12,9 @@ class Jetpack_Widget_Conditions {
 	public static function init() {
 		global $pagenow;
 
-		if ( is_customize_preview() || 'widgets.php' === $pagenow || 'themes.php' === $pagenow || str_starts_with( $_SERVER['REQUEST_URI'], '/wp-json/wp/v2/widget-types' ) ) {
+		if ( is_customize_preview() || 'widgets.php' === $pagenow || 'themes.php' === $pagenow ||
+			 str_starts_with( $_SERVER['REQUEST_URI'], '/wp-json/wp/v2/widget-types' ) ||	// Widget editing via API in gutenberg widgets
+			 str_starts_with($_SERVER['REQUEST_URI'], '/wp-json/batch/v1' )) {	// Saving widgets via API in gutenberg widgets
 			add_action( 'sidebar_admin_setup', array( __CLASS__, 'widget_admin_setup' ) );
 			add_filter( 'widget_update_callback', array( __CLASS__, 'widget_update' ), 10, 3 );
 			add_action( 'in_widget_form', array( __CLASS__, 'widget_conditions_admin' ), 10, 3 );
@@ -460,6 +462,7 @@ class="conditions-match-all"
 	/**
 	 * On an AJAX update of the widget settings, process the display conditions.
 	 *
+	 * @param array $instance The current instance's settings
 	 * @param array $new_instance New settings for this instance as input by the user.
 	 * @param array $old_instance Old settings for this instance.
 	 * @return array Modified settings.
@@ -484,7 +487,7 @@ public static function widget_update( $instance, $new_instance, $old_instance )
 
 		if ( ! empty( $conditions['rules'] ) ) {
 			$instance['conditions'] = $conditions;
-		} else {
+		} elseif ( empty( $new_instance['conditions']['rules'] ) ) {
 			unset( $instance['conditions'] );
 		}
 

From 6ad537c1537f560f3eecf7bb83afddb302bc6156 Mon Sep 17 00:00:00 2001
From: Dean Sas <dean.sas@automattic.com>
Date: Mon, 5 Jul 2021 17:10:25 +0100
Subject: [PATCH 06/24] [not verified] Widget visibility: Improve UI

The gutenberg experience overrides a lot of the CSS, which doesn't work
very well for conditional widgets interface:
 * Dashicons are broken
 * Positioning is incorrect
 * Font sizes on non-labels are too big
---
 .../widget-conditions/widget-conditions.css   | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions/widget-conditions.css b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions/widget-conditions.css
index d562d1fec18da..9641335751c38 100644
--- a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions/widget-conditions.css
+++ b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions/widget-conditions.css
@@ -74,6 +74,7 @@
 	top: 0;
 	left: 0;
 }
+.wp-block-legacy-widget .widget-conditional .condition-control .delete-condition,
 .widget-conditional .condition-control .delete-condition {
 	left: 0;
 	color: #f11;
@@ -82,6 +83,25 @@
 	right: 0;
 }
 
+
+.wp-block-legacy-widget .widget-conditional .widget-conditional-inner a.dashicons {
+	font-family: dashicons;
+}
+
+.wp-block-legacy-widget .widget-conditional .widget-conditional-inner a {
+	top:1.5rem
+}
+
+
+.wp-block-legacy-widget .widget-conditional .widget-conditional-inner select {
+	display:initial;
+	width:auto;
+}
+
+.editor-styles-wrapper .wp-block-legacy-widget .widget-conditional  .alignleft {
+	margin-left:20px
+}
+
 .widget-conditional .condition:last-child .condition-conjunction,
 .widget-conditional .condition:last-child .condition-intersection {
 	display: none;
@@ -115,3 +135,10 @@
 		top: 20px;
 	}
 }
+
+.wp-block-legacy-widget .widget-conditional-inner {
+	/*
+	 * fonts of labels are reset to 13px in gutenberg editor for legacy widgets, ensure a consistent look on non-labels
+	 */
+	font-size: 13px;
+}

From fe0aa1f30863811061d4707a700bc6a39d446f43 Mon Sep 17 00:00:00 2001
From: Dean Sas <dean.sas@automattic.com>
Date: Tue, 6 Jul 2021 11:20:58 +0100
Subject: [PATCH 07/24] [not verified] Widget visibility: Fix for classic
 interface

There were two problems on the classic widgets interface which have now
been resolved:
 * The hooks weren't registered, they now are.
 *  Updating the widget didn't work as the code was looking at the
    current instance - which had the updated version on the gutenberg
    interface due to the encode call, but didn't here. Switched to using
    the new instance, including preserving any conditional rules if
    present (e.g. due to having already used the embed endpoint).
---
 .../widget-visibility/widget-conditions.php   | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
index f5d41f79b3f8c..01f424e360fee 100644
--- a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
+++ b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
@@ -13,6 +13,7 @@ public static function init() {
 		global $pagenow;
 
 		if ( is_customize_preview() || 'widgets.php' === $pagenow || 'themes.php' === $pagenow ||
+			 ('admin-ajax.php' === $pagenow && array_key_exists( 'action', $_POST ) && 'save-widget' === $_POST['action'] ) ||	// Saving widgets on classic widget admin
 			 str_starts_with( $_SERVER['REQUEST_URI'], '/wp-json/wp/v2/widget-types' ) ||	// Widget editing via API in gutenberg widgets
 			 str_starts_with($_SERVER['REQUEST_URI'], '/wp-json/batch/v1' )) {	// Saving widgets via API in gutenberg widgets
 			add_action( 'sidebar_admin_setup', array( __CLASS__, 'widget_admin_setup' ) );
@@ -469,20 +470,22 @@ class="conditions-match-all"
 	 */
 	public static function widget_update( $instance, $new_instance, $old_instance ) {
 		$conditions              = array();
-		$conditions['action']    = $instance['conditions']['action'];
-		$conditions['match_all'] = ( isset( $instance['conditions']['match_all'] ) ? '1' : '0' );
-		$conditions['rules']     = array();
+		$conditions['action']    = $new_instance['conditions']['action'];
+		$conditions['match_all'] = ( isset( $new_instance['conditions']['match_all'] ) ? '1' : '0' );
+		$conditions['rules']     = isset( $new_instance['conditions']['rules'] ) ? $new_instance['conditions']['rules'] : array();
 
-		foreach ( $instance['conditions']['rules_major'] as $index => $major_rule ) {
-			if ( ! $major_rule ) {
-				continue;
-			}
+		if ( isset( $new_instance['conditions']['rules_major'] ) ) {
+			foreach ( $new_instance['conditions']['rules_major'] as $index => $major_rule ) {
+				if ( ! $major_rule ) {
+					continue;
+				}
 
-			$conditions['rules'][] = array(
-				'major'        => $major_rule,
-				'minor'        => isset( $instance['conditions']['rules_minor'][ $index ] ) ? $instance['conditions']['rules_minor'][ $index ] : '',
-				'has_children' => isset( $instance['conditions']['page_children'][ $index ] ) ? true : false,
-			);
+				$conditions['rules'][] = array(
+						'major'        => $major_rule,
+						'minor'        => isset( $new_instance['conditions']['rules_minor'][ $index ] ) ? $new_instance['conditions']['rules_minor'][ $index ] : '',
+						'has_children' => isset( $new_instance['conditions']['page_children'][ $index ] ) ? true : false,
+				);
+			}
 		}
 
 		if ( ! empty( $conditions['rules'] ) ) {

From 430ba6cb0754e9c78941b1f6c4625ef4c0e172a9 Mon Sep 17 00:00:00 2001
From: cpap <papazoglou.charalampos@gmail.com>
Date: Tue, 6 Jul 2021 15:51:11 +0300
Subject: [PATCH 08/24] [not verified] Fixes minor CSS issues: - Adds
 widgets.css files as a dependency so that it loads first - Prepends some
 classes to increase specificity over widgets.css

---
 .../widget-visibility/widget-conditions.php   |  2 +-
 .../widget-conditions/widget-conditions.css   | 22 ++++++++++++-------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
index 01f424e360fee..1934acadef4ce 100644
--- a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
+++ b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
@@ -27,7 +27,7 @@ public static function init() {
 	}
 
 	public static function widget_admin_setup() {
-		wp_enqueue_style( 'widget-conditions', plugins_url( 'widget-conditions/widget-conditions.css', __FILE__ ) );
+		wp_enqueue_style( 'widget-conditions', plugins_url( 'widget-conditions/widget-conditions.css', __FILE__ ), array( 'widgets' ), JETPACK__VERSION );
 		wp_style_add_data( 'widget-conditions', 'rtl', 'replace' );
 		wp_enqueue_script(
 			'widget-conditions',
diff --git a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions/widget-conditions.css b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions/widget-conditions.css
index 9641335751c38..8012f37ed0ee4 100644
--- a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions/widget-conditions.css
+++ b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions/widget-conditions.css
@@ -23,6 +23,7 @@
 }
 .widget-conditional {
 	margin-bottom: 12px;
+	margin-top: 10px;
 }
 .widget-conditional .conditions{
 	margin-bottom: 12px;
@@ -74,7 +75,7 @@
 	top: 0;
 	left: 0;
 }
-.wp-block-legacy-widget .widget-conditional .condition-control .delete-condition,
+.wp-block-legacy-widget__edit-form .widget-inside.widget-inside .widget-conditional .condition-control .delete-condition,
 .widget-conditional .condition-control .delete-condition {
 	left: 0;
 	color: #f11;
@@ -83,22 +84,27 @@
 	right: 0;
 }
 
-
-.wp-block-legacy-widget .widget-conditional .widget-conditional-inner a.dashicons {
+.wp-block-legacy-widget__edit-form .widget-inside.widget-inside .widget-conditional .widget-conditional-inner a.dashicons {
 	font-family: dashicons;
 }
 
-.wp-block-legacy-widget .widget-conditional .widget-conditional-inner a {
+.wp-block-legacy-widget__edit-form .widget-inside.widget-inside .widget-conditional .widget-conditional-inner a {
 	top:1.5rem
 }
 
-
-.wp-block-legacy-widget .widget-conditional .widget-conditional-inner select {
+.wp-block-legacy-widget__edit-form .widget-inside.widget-inside .widget-conditional-inner select {
 	display:initial;
 	width:auto;
+	background-color: #fff;
+}
+
+.wp-block-legacy-widget__edit-form .widget-inside.widget-inside .widget-conditional .widget-conditional-inner select:disabled {
+	color: #a7aaad;
+	border-color: #dcdcde;
+	background-color: #f6f7f7;
 }
 
-.editor-styles-wrapper .wp-block-legacy-widget .widget-conditional  .alignleft {
+.editor-styles-wrapper .wp-block-legacy-widget__edit-form .widget-inside.widget-inside .widget-conditional  .alignleft {
 	margin-left:20px
 }
 
@@ -136,7 +142,7 @@
 	}
 }
 
-.wp-block-legacy-widget .widget-conditional-inner {
+.wp-block-legacy-widget__edit-form .widget-inside.widget-inside .widget-conditional-inner {
 	/*
 	 * fonts of labels are reset to 13px in gutenberg editor for legacy widgets, ensure a consistent look on non-labels
 	 */

From 4c082c643ef734951049b515b67df4ebfb99812b Mon Sep 17 00:00:00 2001
From: Dean Sas <dean.sas@automattic.com>
Date: Tue, 6 Jul 2021 11:47:10 +0100
Subject: [PATCH 09/24] [not verified] Widget visibility: Explain why use of
 $_POST is ok

---
 .../jetpack/modules/widget-visibility/widget-conditions.php    | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
index 1934acadef4ce..c6f6356a97bfd 100644
--- a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
+++ b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
@@ -327,6 +327,9 @@ public static function widget_conditions_admin( $widget, $return, $instance ) {
 			class="
 				widget-conditional
 				<?php
+				// $_POST['widget-conditions-visible'] is used in the classic widget experience to decide whether to
+				// display the visibility panel open, e.g. when saving. In the gutenberg widget experience the POST
+				// value will always be empty, but this is fine - it doesn't rerender the HTML when saving anyway.
 				if (
 						empty( $_POST['widget-conditions-visible'] )
 						|| $_POST['widget-conditions-visible'] == '0'

From 58ff3049ba52a82d96c386c1cb282363eff6ea69 Mon Sep 17 00:00:00 2001
From: Dean Sas <dean.sas@automattic.com>
Date: Tue, 6 Jul 2021 15:35:36 +0100
Subject: [PATCH 10/24] [not verified] Widget visibility: Register hooks less
 often

Instead of registering hooks on all batch API requests, just register
the widget_update_callback hook, as that's the only one the API request
needs.
---
 .../modules/widget-visibility/widget-conditions.php  | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
index c6f6356a97bfd..281ad198d6d52 100644
--- a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
+++ b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
@@ -13,9 +13,10 @@ public static function init() {
 		global $pagenow;
 
 		if ( is_customize_preview() || 'widgets.php' === $pagenow || 'themes.php' === $pagenow ||
-			 ('admin-ajax.php' === $pagenow && array_key_exists( 'action', $_POST ) && 'save-widget' === $_POST['action'] ) ||	// Saving widgets on classic widget admin
-			 str_starts_with( $_SERVER['REQUEST_URI'], '/wp-json/wp/v2/widget-types' ) ||	// Widget editing via API in gutenberg widgets
-			 str_starts_with($_SERVER['REQUEST_URI'], '/wp-json/batch/v1' )) {	// Saving widgets via API in gutenberg widgets
+			 // phpcs:ignore WordPress.Security.NonceVerification.Missing
+			( 'admin-ajax.php' === $pagenow && array_key_exists( 'action', $_POST ) && 'save-widget' === $_POST['action'] ) || // Saving widgets on classic widget admin.
+			0 === strpos( $_SERVER['REQUEST_URI'], '/wp-json/wp/v2/widget-types' ) // Widget editing via API in gutenberg widgets.
+		) {
 			add_action( 'sidebar_admin_setup', array( __CLASS__, 'widget_admin_setup' ) );
 			add_filter( 'widget_update_callback', array( __CLASS__, 'widget_update' ), 10, 3 );
 			add_action( 'in_widget_form', array( __CLASS__, 'widget_conditions_admin' ), 10, 3 );
@@ -24,6 +25,11 @@ public static function init() {
 			add_filter( 'sidebars_widgets', array( __CLASS__, 'sidebars_widgets' ) );
 			add_action( 'template_redirect', array( __CLASS__, 'template_redirect' ) );
 		}
+
+		// Saving widgets via API in gutenberg widgets.
+		if ( 0 === strpos( $_SERVER['REQUEST_URI'], 'wp-json/batch/v1' ) ) {
+			add_filter( 'widget_update_callback', array( __CLASS__, 'widget_update' ), 10, 3 );
+		}
 	}
 
 	public static function widget_admin_setup() {

From 9608fa6b69b3099feb0a142ba7171b1745acdd19 Mon Sep 17 00:00:00 2001
From: Dean Sas <dean.sas@automattic.com>
Date: Tue, 6 Jul 2021 16:09:17 +0100
Subject: [PATCH 11/24] [not verified] Widget visibility: Don't register hooks
 on themes.php

themes.php isn't actually used for editing widgets.
---
 .../jetpack/modules/widget-visibility/widget-conditions.php     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
index 281ad198d6d52..b57a9b90f2e59 100644
--- a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
+++ b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
@@ -12,7 +12,7 @@ class Jetpack_Widget_Conditions {
 	public static function init() {
 		global $pagenow;
 
-		if ( is_customize_preview() || 'widgets.php' === $pagenow || 'themes.php' === $pagenow ||
+		if ( is_customize_preview() || 'widgets.php' === $pagenow ||
 			 // phpcs:ignore WordPress.Security.NonceVerification.Missing
 			( 'admin-ajax.php' === $pagenow && array_key_exists( 'action', $_POST ) && 'save-widget' === $_POST['action'] ) || // Saving widgets on classic widget admin.
 			0 === strpos( $_SERVER['REQUEST_URI'], '/wp-json/wp/v2/widget-types' ) // Widget editing via API in gutenberg widgets.

From 2c39fbf30e277631e760917f0cdd9427f0f9be6d Mon Sep 17 00:00:00 2001
From: Dean Sas <dean.sas@automattic.com>
Date: Tue, 6 Jul 2021 16:53:36 +0100
Subject: [PATCH 12/24] [not verified] Widget visibility: Fix various phpcs
 issues

Mainly trivial issues around phpdoc and spacing. The most interesting
change is to escape HTML for the show/hide if select widget.
---
 .../widget-visibility/widget-conditions.php   | 28 +++++++++++++------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
index b57a9b90f2e59..b6f59b21787f1 100644
--- a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
+++ b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
@@ -32,6 +32,9 @@ public static function init() {
 		}
 	}
 
+	/**
+	 * Prepare the interface for editing widgets - loading css, javascript & data
+	 */
 	public static function widget_admin_setup() {
 		wp_enqueue_style( 'widget-conditions', plugins_url( 'widget-conditions/widget-conditions.css', __FILE__ ), array( 'widgets' ), JETPACK__VERSION );
 		wp_style_add_data( 'widget-conditions', 'rtl', 'replace' );
@@ -302,8 +305,8 @@ public static function get_pages() {
 	 * Add the widget conditions to each widget in the admin.
 	 *
 	 * @param WP_Widget $widget Widget to add conditions settings to.
-	 * @param $return unused.
-	 * @param array         $instance The widget settings.
+	 * @param null      $return unused.
+	 * @param array     $instance The widget settings.
 	 */
 	public static function widget_conditions_admin( $widget, $return, $instance ) {
 		$conditions = array();
@@ -366,10 +369,19 @@ class="
 			<?php
 			if ( ! isset( $_POST['widget-conditions-visible'] ) ) {
 				?>
-				<a href="#" class="button display-options"><?php _e( 'Visibility', 'jetpack' ); ?></a><?php } ?>
+				<a href="#" class="button display-options"><?php esc_html_e( 'Visibility', 'jetpack' ); ?></a><?php } ?>
 			<div class="widget-conditional-inner">
 				<div class="condition-top">
-					<?php printf( _x( '%s if:', 'placeholder: dropdown menu to select widget visibility; hide if or show if', 'jetpack' ), '<select name="' .  esc_attr( $widget->get_field_name( 'conditions[action]' ) ) . '"><option value="show" ' . selected( $conditions['action'], 'show', false ) . '>' . esc_html_x( 'Show', 'Used in the "%s if:" translation for the widget visibility dropdown', 'jetpack' ) . '</option><option value="hide" ' . selected( $conditions['action'], 'hide', false ) . '>' . esc_html_x( 'Hide', 'Used in the "%s if:" translation for the widget visibility dropdown', 'jetpack' ) . '</option></select>' ); ?>
+					<?php
+						printf(
+							// translators: %s is a HTML select widget for widget visibility, 'show' and 'hide' are it's options. It will read like 'show if' or 'hide if'.
+							esc_html_x( '%s if:', 'placeholder: dropdown menu to select widget visibility; hide if or show if', 'jetpack' ),
+							'<select name="' . esc_attr( $widget->get_field_name( 'conditions[action]' ) ) . '">
+											<option value="show" ' . selected( $conditions['action'], 'show', false ) . '>' . esc_html_x( 'Show', 'Used in the "%s if:" translation for the widget visibility dropdown', 'jetpack' ) . '</option>
+											<option value="hide" ' . selected( $conditions['action'], 'hide', false ) . '>' . esc_html_x( 'Hide', 'Used in the "%s if:" translation for the widget visibility dropdown', 'jetpack' ) . '</option>
+										</select>'
+						);
+					?>
 				</div><!-- .condition-top -->
 
 				<div class="conditions">
@@ -472,7 +484,7 @@ class="conditions-match-all"
 	/**
 	 * On an AJAX update of the widget settings, process the display conditions.
 	 *
-	 * @param array $instance The current instance's settings
+	 * @param array $instance The current instance's settings.
 	 * @param array $new_instance New settings for this instance as input by the user.
 	 * @param array $old_instance Old settings for this instance.
 	 * @return array Modified settings.
@@ -490,9 +502,9 @@ public static function widget_update( $instance, $new_instance, $old_instance )
 				}
 
 				$conditions['rules'][] = array(
-						'major'        => $major_rule,
-						'minor'        => isset( $new_instance['conditions']['rules_minor'][ $index ] ) ? $new_instance['conditions']['rules_minor'][ $index ] : '',
-						'has_children' => isset( $new_instance['conditions']['page_children'][ $index ] ) ? true : false,
+					'major'        => $major_rule,
+					'minor'        => isset( $new_instance['conditions']['rules_minor'][ $index ] ) ? $new_instance['conditions']['rules_minor'][ $index ] : '',
+					'has_children' => isset( $new_instance['conditions']['page_children'][ $index ] ) ? true : false,
 				);
 			}
 		}

From a6e64edb3b4ad862870c8341aeb92d5021f90550 Mon Sep 17 00:00:00 2001
From: Dean Sas <dean.sas@automattic.com>
Date: Tue, 6 Jul 2021 17:01:32 +0100
Subject: [PATCH 13/24] [not verified] Widget visibility: Fix minor phpcs error

---
 .../jetpack/modules/widget-visibility/widget-conditions.php     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
index b6f59b21787f1..f5b059ff6c65c 100644
--- a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
+++ b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
@@ -439,7 +439,7 @@ class="
 									?>
 									 style="display: none;"<?php } ?>>
 									<label>
-										<input type="checkbox" name="<?php echo esc_attr( $widget->get_field_name( "conditions[page_children][$rule_index]" ) );?>" value="has" <?php checked( $rule['has_children'], true ); ?> />
+										<input type="checkbox" name="<?php echo esc_attr( $widget->get_field_name( "conditions[page_children][$rule_index]" ) ); ?>" value="has" <?php checked( $rule['has_children'], true ); ?> />
 										<?php echo esc_html_x( 'Include children', 'Checkbox on Widget Visibility if children of the selected page should be included in the visibility rule.', 'jetpack' ); ?>
 									</label>
 								</span>

From 9f771da9c2baf10800fdf5b10543f7a5a24a8e5e Mon Sep 17 00:00:00 2001
From: Dean Sas <dean.sas@automattic.com>
Date: Wed, 7 Jul 2021 10:12:54 +0100
Subject: [PATCH 14/24] [not verified] Widget visibility: Add changelog entry

---
 projects/plugins/jetpack/changelog/fix-widget-visibility | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 projects/plugins/jetpack/changelog/fix-widget-visibility

diff --git a/projects/plugins/jetpack/changelog/fix-widget-visibility b/projects/plugins/jetpack/changelog/fix-widget-visibility
new file mode 100644
index 0000000000000..4711aa71d1b0e
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/fix-widget-visibility
@@ -0,0 +1,4 @@
+Significance: patch
+Type: bugfix
+
+Allow the use of widget visibility conditions in gutenberg based widget editing

From 4e2e0fcd7236b8b26d21e25ba217f73e834ede82 Mon Sep 17 00:00:00 2001
From: Dean Sas <dean.sas@automattic.com>
Date: Wed, 7 Jul 2021 14:05:18 +0100
Subject: [PATCH 15/24] [not verified] Widget visibility: Cachebust
 widget-conditions js

---
 .../jetpack/modules/widget-visibility/widget-conditions.php     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
index f5b059ff6c65c..1c9fa8adefd80 100644
--- a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
+++ b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
@@ -45,7 +45,7 @@ public static function widget_admin_setup() {
 				'modules/widget-visibility/widget-conditions/widget-conditions.js'
 			),
 			array( 'jquery', 'jquery-ui-core' ),
-			20191128,
+			JETPACK__VERSION,
 			true
 		);
 

From f893869cd69ad94898183d9a2036b9d282fb3850 Mon Sep 17 00:00:00 2001
From: Dean Sas <dean.sas@automattic.com>
Date: Wed, 7 Jul 2021 14:17:39 +0100
Subject: [PATCH 16/24] [not verified] Widget visbility: Fix issue persisting
 widgets

The check for whether we're on the batch API was incorrect - so it
wasn't actually running the widget_update method.
---
 .../jetpack/modules/widget-visibility/widget-conditions.php     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
index 1c9fa8adefd80..174571574f943 100644
--- a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
+++ b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
@@ -27,7 +27,7 @@ public static function init() {
 		}
 
 		// Saving widgets via API in gutenberg widgets.
-		if ( 0 === strpos( $_SERVER['REQUEST_URI'], 'wp-json/batch/v1' ) ) {
+		if ( 0 === strpos( $_SERVER['REQUEST_URI'], '/wp-json/batch/v1' ) ) {
 			add_filter( 'widget_update_callback', array( __CLASS__, 'widget_update' ), 10, 3 );
 		}
 	}

From 61987eaddce58aa9638f02d626315b063a8f67f6 Mon Sep 17 00:00:00 2001
From: Dean Sas <dean.sas@automattic.com>
Date: Thu, 8 Jul 2021 17:36:14 +0100
Subject: [PATCH 17/24] [not verified] Widget visibility: Refactor registering
 of hooks

Refactored how hooking into WordPress works, so that the code runs less
often. This should make it more efficient.

The classic widget editing experience has not been changed.
---
 .../widget-visibility/widget-conditions.php   | 86 ++++++++++++++++---
 1 file changed, 74 insertions(+), 12 deletions(-)

diff --git a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
index 174571574f943..55ca9ba4b019f 100644
--- a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
+++ b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
@@ -12,24 +12,86 @@ class Jetpack_Widget_Conditions {
 	public static function init() {
 		global $pagenow;
 
-		if ( is_customize_preview() || 'widgets.php' === $pagenow ||
-			 // phpcs:ignore WordPress.Security.NonceVerification.Missing
-			( 'admin-ajax.php' === $pagenow && array_key_exists( 'action', $_POST ) && 'save-widget' === $_POST['action'] ) || // Saving widgets on classic widget admin.
-			0 === strpos( $_SERVER['REQUEST_URI'], '/wp-json/wp/v2/widget-types' ) // Widget editing via API in gutenberg widgets.
+		// Previews don't need widget editing loaded and also don't want to run the filter - it might mean the preview
+		// is empty which would be confusing.
+		// phpcs:ignore WordPress.Security.NonceVerification.Recommended
+		if ( isset( $_GET['legacy-widget-preview'] ) ) {
+			return;
+		}
+
+		// Not making use of the heartbeat functionality at all.
+		// phpcs:ignore WordPress.Security.NonceVerification.Missing
+		if ( isset( $_POST['action'] ) && 'heartbeat' === $_POST['action'] ) {
+			return;
+		}
+
+		// API call to *list* the widget types doesn't use editing visibility or display widgets.
+		if ( false !== strpos( $_SERVER['REQUEST_URI'], '/wp-json/wp/v2/widget-types?' ) ) {
+			return;
+		}
+
+		$add_data_assets_to_page = false;
+		$add_html_to_form        = false;
+		$handle_widget_updates   = false;
+
+		$using_classic_experience = ( ! function_exists( 'wp_use_widgets_block_editor' ) || ! wp_use_widgets_block_editor() );
+		if ( $using_classic_experience &&
+			(
+				is_customize_preview() || 'widgets.php' === $pagenow ||
+				// phpcs:ignore WordPress.Security.NonceVerification.Missing
+				( 'admin-ajax.php' === $pagenow && array_key_exists( 'action', $_POST ) && 'save-widget' === $_POST['action'] )
+			)
 		) {
-			add_action( 'sidebar_admin_setup', array( __CLASS__, 'widget_admin_setup' ) );
-			add_filter( 'widget_update_callback', array( __CLASS__, 'widget_update' ), 10, 3 );
+			$add_data_assets_to_page = true;
+			$add_html_to_form        = true;
+			$handle_widget_updates   = true;
+		} else {
+			// On a page that is hosting the API.
+			if ( is_customize_preview() || 'widgets.php' === $pagenow ) {
+				$add_data_assets_to_page = true;
+			}
+
+			// Encoding for a particular widget end point.
+			if ( 1 === preg_match( '|/wp-json/wp/v2/widget-types/.*/encode|', $_SERVER['REQUEST_URI'] ) ) {
+				$add_html_to_form      = true;
+				$handle_widget_updates = true;
+			}
+
+			// Batch API is usually saving but could be anything.
+			if ( false !== strpos( $_SERVER['REQUEST_URI'], '/wp-json/batch/v1' ) ) {
+				$handle_widget_updates = true;
+				$add_html_to_form      = true;
+			}
+
+			// Saving widgets via non-batch API. This isn't used within WordPress but could be used by third parties in theory.
+			if ( 'GET' !== $_SERVER['REQUEST_METHOD'] && false !== strpos( $_SERVER['REQUEST_URI'], '/wp/v2/widgets' ) ) {
+				$handle_widget_updates = true;
+				$add_html_to_form      = true;
+			}
+		}
+
+		if ( $add_html_to_form ) {
 			add_action( 'in_widget_form', array( __CLASS__, 'widget_conditions_admin' ), 10, 3 );
-		} elseif ( ! in_array( $pagenow, array( 'wp-login.php', 'wp-register.php' ), true ) ) {
-			add_filter( 'widget_display_callback', array( __CLASS__, 'filter_widget' ) );
-			add_filter( 'sidebars_widgets', array( __CLASS__, 'sidebars_widgets' ) );
-			add_action( 'template_redirect', array( __CLASS__, 'template_redirect' ) );
 		}
 
-		// Saving widgets via API in gutenberg widgets.
-		if ( 0 === strpos( $_SERVER['REQUEST_URI'], '/wp-json/batch/v1' ) ) {
+		if ( $handle_widget_updates ) {
 			add_filter( 'widget_update_callback', array( __CLASS__, 'widget_update' ), 10, 3 );
 		}
+
+		if ( $add_data_assets_to_page ) {
+			add_action( 'sidebar_admin_setup', array( __CLASS__, 'widget_admin_setup' ) );
+		}
+
+		if ( ! $add_html_to_form && ! $handle_widget_updates && ! $add_data_assets_to_page &&
+			! in_array( $pagenow, array( 'wp-login.php', 'wp-register.php' ), true ) &&
+			// Don't filter widgets when editing them - otherwise they could get filtered out and become impossible to edit.
+			( false === strpos( wp_get_raw_referer(), '/wp-admin/widgets.php' ) )
+		) {
+			// Not hit any known widget admin point, register widget display hooks instead.
+			add_filter( 'widget_display_callback', array( __CLASS__, 'filter_widget' ) );
+			add_filter( 'sidebars_widgets', array( __CLASS__, 'sidebars_widgets' ) );
+			add_action( 'template_redirect', array( __CLASS__, 'template_redirect' ) );
+		}
 	}
 
 	/**

From 2026a4ccfc91628fa1240669ab7cf5c710fcea3f Mon Sep 17 00:00:00 2001
From: Dean Sas <dean.sas@automattic.com>
Date: Thu, 8 Jul 2021 17:55:16 +0100
Subject: [PATCH 18/24] [not verified] Widget visibility: Correct widget shell
 comments

---
 .../widget-conditions/widget-conditions.js                  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions/widget-conditions.js b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions/widget-conditions.js
index 9941c508d7995..bc5115567a3ca 100644
--- a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions/widget-conditions.js
+++ b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions/widget-conditions.js
@@ -1,14 +1,14 @@
 /* global isRtl, widget_conditions_parent_pages, widget_conditions_data, jQuery */
 
 jQuery( function ( $ ) {
-	//  Gutenberg widgets + customizer screen.
+	//  Gutenberg widgets screen.
 	var widgets_shell = $( '#widgets-editor' );
 
 	if ( 0 === widgets_shell.length ) {
-		// Pre-gutenberg widget screen.
+		// Gutenberg + classic customizer
 		widgets_shell = $( 'div#widgets-right' );
 
-		// Pre-gutenberg customizer screen.
+		// For backwards compatibility
 		if ( 0 === widgets_shell.length ) {
 			widgets_shell = $( 'form#customize-controls' );
 		}

From f7163f87bb4fcc6475dce46fe243feee5b053c41 Mon Sep 17 00:00:00 2001
From: Dean Sas <dean@deansas.org>
Date: Fri, 9 Jul 2021 09:48:10 +0100
Subject: [PATCH 19/24] [not verified] Widget visibility: Improve/correct
 comments

h/t @cpapazoglou

Co-authored-by: Harris Papazolgou <hrrsppzgl@gmail.com>
---
 .../jetpack/modules/widget-visibility/widget-conditions.php   | 2 +-
 .../widget-visibility/widget-conditions/widget-conditions.js  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
index 55ca9ba4b019f..2c886d2429e48 100644
--- a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
+++ b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
@@ -87,7 +87,7 @@ public static function init() {
 			// Don't filter widgets when editing them - otherwise they could get filtered out and become impossible to edit.
 			( false === strpos( wp_get_raw_referer(), '/wp-admin/widgets.php' ) )
 		) {
-			// Not hit any known widget admin point, register widget display hooks instead.
+			// Not hit any known widget admin endpoint, register widget display hooks instead.
 			add_filter( 'widget_display_callback', array( __CLASS__, 'filter_widget' ) );
 			add_filter( 'sidebars_widgets', array( __CLASS__, 'sidebars_widgets' ) );
 			add_action( 'template_redirect', array( __CLASS__, 'template_redirect' ) );
diff --git a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions/widget-conditions.js b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions/widget-conditions.js
index bc5115567a3ca..d2332061e326e 100644
--- a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions/widget-conditions.js
+++ b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions/widget-conditions.js
@@ -1,11 +1,11 @@
 /* global isRtl, widget_conditions_parent_pages, widget_conditions_data, jQuery */
 
 jQuery( function ( $ ) {
-	//  Gutenberg widgets screen.
+	//  Gutenberg 'widgets.php' screen.
 	var widgets_shell = $( '#widgets-editor' );
 
 	if ( 0 === widgets_shell.length ) {
-		// Gutenberg + classic customizer
+		// Legacy 'widgets.php' screen + customizer.
 		widgets_shell = $( 'div#widgets-right' );
 
 		// For backwards compatibility

From b70e7b463a5260ea9ae30716a32a32d661c040a0 Mon Sep 17 00:00:00 2001
From: Dean Sas <dean.sas@automattic.com>
Date: Fri, 9 Jul 2021 10:43:19 +0100
Subject: [PATCH 20/24] [not verified] Widget visibility: CSS tweaks

Make the add/delete condition buttons more vertically centered on the
widgets screen.
---
 .../widget-conditions/widget-conditions.css              | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions/widget-conditions.css b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions/widget-conditions.css
index 8012f37ed0ee4..4f5fb19142146 100644
--- a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions/widget-conditions.css
+++ b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions/widget-conditions.css
@@ -69,6 +69,11 @@
 	text-indent: -9999px;
 	z-index: 1;
 }
+
+.wp-block-legacy-widget__edit-form .widget-conditional .condition-control a {
+	top: 20px;
+}
+
 .widget-conditional .condition-control a:before {
 	position: absolute;
 	text-indent: 0;
@@ -88,10 +93,6 @@
 	font-family: dashicons;
 }
 
-.wp-block-legacy-widget__edit-form .widget-inside.widget-inside .widget-conditional .widget-conditional-inner a {
-	top:1.5rem
-}
-
 .wp-block-legacy-widget__edit-form .widget-inside.widget-inside .widget-conditional-inner select {
 	display:initial;
 	width:auto;

From 7887f79a58ae40915301dd7b71231a1b13138b24 Mon Sep 17 00:00:00 2001
From: Dean Sas <dean.sas@automattic.com>
Date: Mon, 12 Jul 2021 15:40:50 +0100
Subject: [PATCH 21/24] [not verified] Widget visibility: Add explanatory
 comments

---
 .../widget-visibility/widget-conditions.php   | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
index 2c886d2429e48..68dc709d8ca52 100644
--- a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
+++ b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
@@ -3,17 +3,30 @@
 use Automattic\Jetpack\Assets;
 
 /**
- * Hide or show widgets conditionally.
+ * Hide or show legacy widgets conditionally.
+ *
+ * This class has two responsiblities - administrating the conditions in which legacy widgets may be hidden or shown
+ * and hiding/showing the legacy widgets on the front-end of the site, depending upon the evaluation of those conditions.
+ *
+ * Administrating the conditions can be done in one of four different WordPress screens, plus direct use of the API and
+ * is supplemented with a legacy widget preview screen. The four different admin screens are
+ *
+ * Gutenberg widget experience - widget admin (widgets.php + API + legacy widget preview)
+ * Gutenberg widget experience - Customizer (customizer screen/API + API + legacy widget preview)
+ * Classic widget experience - widget admin (widgets.php + admin-ajax XHR requests)
+ * Classic widget experience - Customizer (customizer screen/API)
+ *
+ * An introduction to the API endpoints can be found here: https://make.wordpress.org/core/2021/06/29/rest-api-changes-in-wordpress-5-8/
  */
-
 class Jetpack_Widget_Conditions {
 	static $passed_template_redirect = false;
 
 	public static function init() {
 		global $pagenow;
 
-		// Previews don't need widget editing loaded and also don't want to run the filter - it might mean the preview
-		// is empty which would be confusing.
+		// The Gutenberg based widget experience will show a preview of legacy widgets by including a URL beginning
+		// widgets.php?legacy-widget-preview inside an iframe. Previews don't need widget editing loaded and also don't
+		// want to run the filter - if the widget is filtered out it'll be empty, which would be confusing.
 		// phpcs:ignore WordPress.Security.NonceVerification.Recommended
 		if ( isset( $_GET['legacy-widget-preview'] ) ) {
 			return;
@@ -46,7 +59,7 @@ public static function init() {
 			$add_html_to_form        = true;
 			$handle_widget_updates   = true;
 		} else {
-			// On a page that is hosting the API.
+			// On a screen that is hosting the API in the gutenberg editing experience.
 			if ( is_customize_preview() || 'widgets.php' === $pagenow ) {
 				$add_data_assets_to_page = true;
 			}

From cf5e420ec28e050177cd92f171cc5c676405a825 Mon Sep 17 00:00:00 2001
From: Dean Sas <dean.sas@automattic.com>
Date: Mon, 12 Jul 2021 15:54:47 +0100
Subject: [PATCH 22/24] [not verified] Widget visibility: Fix E_NOTICe

An E_NOTICE could be triggered when saving a widget without a
condition action. This change prevents the notice from triggering.
---
 .../jetpack/modules/widget-visibility/widget-conditions.php   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
index 68dc709d8ca52..9193d1316d72b 100644
--- a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
+++ b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
@@ -566,8 +566,8 @@ class="conditions-match-all"
 	 */
 	public static function widget_update( $instance, $new_instance, $old_instance ) {
 		$conditions              = array();
-		$conditions['action']    = $new_instance['conditions']['action'];
-		$conditions['match_all'] = ( isset( $new_instance['conditions']['match_all'] ) ? '1' : '0' );
+		$conditions['action']    = isset( $new_instance['conditions']['action'] ) ? $new_instance['conditions']['action'] : null;
+		$conditions['match_all'] = isset( $new_instance['conditions']['match_all'] ) ? '1' : '0';
 		$conditions['rules']     = isset( $new_instance['conditions']['rules'] ) ? $new_instance['conditions']['rules'] : array();
 
 		if ( isset( $new_instance['conditions']['rules_major'] ) ) {

From 4479724c1875f27241355abfc69fa9de85eb1a6f Mon Sep 17 00:00:00 2001
From: Dean Sas <dean.sas@automattic.com>
Date: Mon, 12 Jul 2021 17:16:23 +0100
Subject: [PATCH 23/24] [not verified] Widget visibility: Minor efficiency
 change

Previously $_POST['action'] was used to avoid registering hooks in one
case - the heartbeat API. This has been changed from a block list to an
allow list, to minimise registering hooks when unnecessary.
---
 .../jetpack/modules/widget-visibility/widget-conditions.php  | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
index 9193d1316d72b..49e0d7f470140 100644
--- a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
+++ b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
@@ -32,9 +32,10 @@ public static function init() {
 			return;
 		}
 
-		// Not making use of the heartbeat functionality at all.
+		// If action is posted and it's save-widget then it's relevant to widget conditions, otherwise it's something
+		// else and it's not worth registering hooks.
 		// phpcs:ignore WordPress.Security.NonceVerification.Missing
-		if ( isset( $_POST['action'] ) && 'heartbeat' === $_POST['action'] ) {
+		if ( isset( $_POST['action'] ) && ! in_array( $_POST['action'], array( 'save-widget', 'update-widget' ), true ) ) {
 			return;
 		}
 

From 6595b8e6b672a63523c72444865429421cc40269 Mon Sep 17 00:00:00 2001
From: Dean Sas <dean.sas@automattic.com>
Date: Wed, 14 Jul 2021 10:49:19 +0100
Subject: [PATCH 24/24] [not verified] Widget visibility: Move filter referer
 check

Previously registration of the front-end hooks was not done in the
referer was the widgets.php admin page. This prevented the API from
running the filters which made filtered out widgets uneditable.

This also had the effect of running the filters if you clicked from the
widgets page to e.g. the homepage, which would look confusing to users.

This has been solved by changing the check so that filters aren't ran if
on the REST API AND the referer is the widgets.php admin page.
---
 .../modules/widget-visibility/widget-conditions.php    | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
index 49e0d7f470140..bde6d662ce533 100644
--- a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
+++ b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
@@ -97,9 +97,7 @@ public static function init() {
 		}
 
 		if ( ! $add_html_to_form && ! $handle_widget_updates && ! $add_data_assets_to_page &&
-			! in_array( $pagenow, array( 'wp-login.php', 'wp-register.php' ), true ) &&
-			// Don't filter widgets when editing them - otherwise they could get filtered out and become impossible to edit.
-			( false === strpos( wp_get_raw_referer(), '/wp-admin/widgets.php' ) )
+			! in_array( $pagenow, array( 'wp-login.php', 'wp-register.php' ), true )
 		) {
 			// Not hit any known widget admin endpoint, register widget display hooks instead.
 			add_filter( 'widget_display_callback', array( __CLASS__, 'filter_widget' ) );
@@ -707,6 +705,12 @@ public static function filter_widget( $instance ) {
 			return $instance;
 		}
 
+		// Don't filter widgets from the REST API when it's called via the widgets admin page - otherwise they could get
+		// filtered out and become impossible to edit.
+		if ( strpos( wp_get_raw_referer(), '/wp-admin/widgets.php' ) && false !== strpos( $_SERVER['REQUEST_URI'], '/wp-json/' ) ) {
+			return $instance;
+		}
+
 		// Store the results of all in-page condition lookups so that multiple widgets with
 		// the same visibility conditions don't result in duplicate DB queries.
 		static $condition_result_cache = array();