Fix block editor usecase

assets/css/admin.css

@@ -28,7 +28,9 @@
 .context-group-custom_post_types_taxonomies .context-group-wrap { max-height:10em; overflow:auto; padding:0.5em; margin-bottom:0.5em; background:#fff; border:1px solid #ddd; }
 .context-group-custom_post_types_taxonomies label { display:block; padding:0.25em 0; }
 
-.context-group-wrap .wc-field-text-word-count input { width:3em; }
+.widget-context .context-group-word_count .context-group-wrap label { display: inline-block; }
+.widget-context .context-group-word_count .context-group-wrap select,
+.widget-context .context-group-word_count .context-group-wrap input[type="text"] { width:5em; display:inline-block; }
 
 .context-group-admin_notes textarea { height:4em; }
 
@@ -53,6 +55,13 @@
 .widget-content,
 #widgets-right .widget { clear:left; }
 
+.wp-block-legacy-widget__edit-form .widget-context { font-size:13px; line-height: 1.5; color:#000; }
+.wp-block-legacy-widget__edit-form .widget-context .widget-context-header h3 { font-weight:bold; line-height: 2.1; line-height: inherit; font-size:14px; color: #000; }
+.wp-block-legacy-widget__edit-form .context-toggle { font-size:1em; }
+.wp-block-legacy-widget__edit-form .widget-context .context-group { padding-left: 1em; border-left:1px solid #ddd; }
+.wp-block-legacy-widget__edit-form .widget-context .context-group-incexc { padding-left:0; border:none; }
+.wp-block-legacy-widget__edit-form .widget-context-legacy-notice { padding:0.5em 1em; margin:1em 0; font-size:14px; }
+
 @media screen and ( max-width: 900px ) {
 	.widget-context-settings-wrap { padding-right:0; }
 	.widget-context-form { margin:0; }

assets/js/widget-context.js

@@ -1,17 +1,19 @@
 /* global jQuery */
 jQuery( document ).ready( function( $ ) {
-	function showHideControls( widgetId ) {
-		var condition = $( '#widget-context-' + widgetId + ' .wc-field-select-condition select' ).val();
+	function showHideControls( widgetId, state ) {
+		if ( ! state ) {
+			state = $( '#widget-context-' + widgetId + ' .wc-field-select-condition select' ).val();
+		}
 
-		$( '#widget-context-' + widgetId ).toggleClass( 'context-global', ( condition === 'show' || condition === 'hide' ) );
+		$( '#widget-context-' + widgetId ).toggleClass( 'context-global', ( state === 'show' || state === 'hide' ) );
 	}
 
 	$( '.widget-context-inside' ).each( function() {
 		showHideControls( $( this ).data( 'widget-id' ) );
 	} );
 
-	$( '#widgets-right, #widgets-left, #customize-theme-controls' ).on( 'change', '.wc-field-select-condition select', function() {
-		showHideControls( $( this ).parent().data( 'widget-id' ) );
+	$( '#widgets-right, #widgets-left, #customize-theme-controls, .edit-widgets-block-editor' ).on( 'change', '.wc-field-select-condition select', function( condition ) {
+		showHideControls( $( this ).parent().data( 'widget-id' ), condition.target.value );
 	} );
 
 	$( document ).on( 'widget-updated widget-added', function( e, widget ) {

composer.json

@@ -46,7 +46,10 @@
   "scripts": {
     "lint": [
       "composer validate --no-check-publish --strict",
-      "phpcs ."
+      "phpcs"
+    ],
+    "lint-fix": [
+      "phpcbf"
     ],
     "mess": [
       "phpmd ./src text phpmd.xml --suffixes php"

phpcs.xml.dist

@@ -7,6 +7,8 @@
 	<arg name="colors" />
 	<arg value="s" /><!-- Show sniff codes in all reports. -->
 
+	<file>.</file>
+
 	<rule ref="PHPCompatibility" />
 	<config name="testVersion" value="5.6-" />
 

src/WidgetContext.php

@@ -87,7 +87,12 @@ public function init() {
 		// Add admin menu for config
 		add_action( 'admin_enqueue_scripts', array( $this, 'admin_scripts' ) );
 
-		// Save widget context settings, when in admin area
+		// Allow users to disable the block widget editor.
+		add_filter( 'gutenberg_use_widgets_block_editor', array( $this, 'maybe_disable_block_widget_editor' ) );
+		add_filter( 'use_widgets_block_editor', array( $this, 'maybe_disable_block_widget_editor' ) );
+		add_action( 'admin_notices', array( $this, 'maybe_notify_of_disabled_block_widget_editor' ) );
+
+		// Save widget context settings, when in admin area of the legacy widget editing screen.
 		add_action( 'sidebar_admin_setup', array( $this, 'save_widget_context_settings' ) );
 
 		// Fix legacy context option naming
@@ -163,20 +168,6 @@ function define_widget_contexts() {
 		uasort( $this->contexts, array( $this, 'sort_context_by_weight' ) );
 	}
 
-
-	public function get_context_options( $widget_id = null ) {
-		if ( ! $widget_id ) {
-			return $this->context_options;
-		}
-
-		if ( isset( $this->context_options[ $widget_id ] ) ) {
-			return $this->context_options[ $widget_id ];
-		}
-
-		return null;
-	}
-
-
 	public function get_context_settings( $widget_id = null ) {
 		if ( ! $widget_id ) {
 			return $this->context_settings;
@@ -283,34 +274,74 @@ function save_widget_context_settings() {
 			return;
 		}
 
-		// Delete a widget
+		// Delete a widget.
 		if ( isset( $_POST['delete_widget'] ) && isset( $_POST['the-widget-id'] ) ) {
-			unset( $this->context_options[ $_POST['the-widget-id'] ] );
+			$this->delete_context_settings_for_widget( $_POST['the-widget-id'] );
 		}
 
-		// Add / Update
-		$this->context_options = array_merge( $this->context_options, $_POST['wl'] );
-
-		$sidebars_widgets = wp_get_sidebars_widgets();
-		$all_widget_ids = array();
-
-		// Get a lits of all widget IDs
-		foreach ( $sidebars_widgets as $widget_area => $widgets ) {
-			foreach ( $widgets as $widget_order => $widget_id ) {
-				$all_widget_ids[] = $widget_id;
+		// Add or update widgets.
+		if ( ! empty( $_POST['wl'] ) && is_array( $_POST['wl'] ) ) {
+			foreach ( $_POST['wl'] as $widget_id => $widget_context_settings ) {
+				$this->update_context_settings_for_widget( $widget_id, $widget_context_settings );
 			}
 		}
 
+		$all_widget_ids = $this->get_all_widget_ids();
+
 		// Remove non-existant widget contexts from the settings
 		foreach ( $this->context_options as $widget_id => $widget_context ) {
 			if ( ! in_array( $widget_id, $all_widget_ids, true ) ) {
-				unset( $this->context_options[ $widget_id ] );
+				$this->delete_context_settings_for_widget( $widget_id );
 			}
 		}
 
-		update_option( $this->options_name, $this->context_options );
+		$this->store_widget_context_settings();
 	}
 
+	/**
+	 * Get widget IDs from all widget areas.
+	 *
+	 * @return array
+	 */
+	public function get_all_widget_ids() {
+		$all_widget_ids = array();
+
+		// Get a list of all widget IDs.
+		foreach ( wp_get_sidebars_widgets() as $widget_area => $widgets ) {
+			foreach ( $widgets as $widget_order => $widget_id ) {
+				$all_widget_ids[] = $widget_id;
+			}
+		}
+
+		return $all_widget_ids;
+	}
+
+	/**
+	 * Setting context settings for a widget by ID.
+	 *
+	 * @return void
+	 */
+	protected function update_context_settings_for_widget( $widget_id, $settings ) {
+		$this->context_options[ $widget_id ] = $settings;
+	}
+
+	/**
+	 * Delete context settings for a widget by ID.
+	 *
+	 * @return void
+	 */
+	protected function delete_context_settings_for_widget( $widget_id ) {
+		unset( $this->context_options[ $widget_id ] );
+	}
+
+	/**
+	 * Persist the context settings for all widgets.
+	 *
+	 * @return void
+	 */
+	protected function store_widget_context_settings() {
+		update_option( $this->options_name, $this->context_options );
+	}
 
 	function maybe_unset_widgets_by_context( $sidebars_widgets ) {
 		// Don't run this at the backend or before
@@ -686,6 +717,12 @@ function display_widget_context( $widget_id = null ) {
 		$has_controls = array_diff( $controls_not_core, $controls_disabled );
 
 		if ( empty( $controls ) || empty( $has_controls ) ) {
+			$controls = array(
+				sprintf(
+					'<p class="error">%s</p>',
+					__( 'No widget controls enabled.', 'widget-context' )
+				),
+			);
 
 			if ( current_user_can( 'edit_theme_options' ) ) {
 				$controls = array(
@@ -694,17 +731,10 @@ function display_widget_context( $widget_id = null ) {
 						sprintf(
 							/* translators: %s is a URL to the settings page. */
 							__( 'No widget controls enabled. You can enable them in <a href="%s">Widget Context settings</a>.', 'widget-context' ),
-							$this->plugin_settings_admin_url()
+							esc_url( $this->plugin_settings_admin_url() )
 						)
 					),
 				);
-			} else {
-				$controls = array(
-					sprintf(
-						'<p class="error">%s</p>',
-						__( 'No widget controls enabled.', 'widget-context' )
-					),
-				);
 			}
 		}
 
@@ -1064,16 +1094,74 @@ public function customize_widgets_admin_url() {
 		return admin_url( 'customize.php?autofocus[panel]=widgets' );
 	}
 
+	/**
+	 * Disable the widget block editor, if necessary.
+	 *
+	 * @return boolean
+	 */
+	public function maybe_disable_block_widget_editor( $enabled ) {
+		if ( $this->widget_block_editor_disabled() ) {
+			return false;
+		}
+
+		return $enabled;
+	}
+
+	/**
+	 * If the block widget editor is enabled.
+	 *
+	 * @return boolean
+	 */
+	public function widget_block_editor_enabled() {
+		return function_exists( 'wp_use_widgets_block_editor' ) && wp_use_widgets_block_editor();
+	}
+
+	/**
+	 * Check if the WP environment supports widget block editor.
+	 *
+	 * @return boolean
+	 */
+	public function widget_block_editor_supported() {
+		return function_exists( 'wp_use_widgets_block_editor' );
+	}
+
+	/**
+	 * Check if the widget block editor is enabled in our settings.
+	 *
+	 * @return boolean
+	 */
+	public function widget_block_editor_disabled() {
+		return ! empty( $this->context_settings['widget_block_editor_disable'] );
+	}
 
 	/**
 	 * Get the URL to the plugin settings page.
 	 *
 	 * @return string
 	 */
 	public function plugin_settings_admin_url() {
-		return admin_url( 'themes.php?page=widget_context_settings' );
+		return admin_url( sprintf( 'themes.php?page=%s', $this->settings_name ) );
 	}
 
+	/**
+	 * Maybe display a notice about the widget interface.
+	 *
+	 * @return void
+	 */
+	public function maybe_notify_of_disabled_block_widget_editor() {
+		$admin_screen = get_current_screen();
+
+		if ( ! empty( $admin_screen->base ) && 'widgets' === $admin_screen->base ) {
+			if ( $this->widget_block_editor_supported() && $this->widget_block_editor_disabled() ) {
+				printf(
+					'<div class="notice notice-info"><p>%s <a class="button" href="%s">%s</a></p></div>',
+					esc_html__( 'The legacy widget editor is currently enabled in the Widget Context settings.', 'widget-context' ),
+					esc_url( $this->plugin_settings_admin_url() ),
+					esc_html__( 'Configure', 'widget-context' )
+				);
+			}
+		}
+	}
 
 	function widget_context_admin_view() {
 		$context_controls = array();
@@ -1142,6 +1230,23 @@ function widget_context_admin_view() {
 									</p>
 								</td>
 							</tr>
+							<?php if ( $this->widget_block_editor_supported() ) : ?>
+							<tr>
+								<th scrope="row">
+									<?php esc_html_e( 'Widgets Editing', 'widget-context' ); ?>
+								</th>
+								<td>
+									<label>
+										<input name="<?php echo esc_attr( $this->settings_name ); ?>[widget_block_editor_disable]" type="hidden" value="0"  />
+										<input name="<?php echo esc_attr( $this->settings_name ); ?>[widget_block_editor_disable]" type="checkbox" value="1" <?php checked( $this->widget_block_editor_disabled(), true, true ); ?> />
+										<?php esc_html_e( 'Use legacy widget editor', 'widget-context' ); ?>
+									</label>
+									<p class="help">
+									<?php esc_html_e( 'Enables the widget editing interface used before WordPress version 5.8.', 'widget-context' ); ?>
+									</p>
+								</td>
+							</tr>
+							<?php endif; // Classic Widgets. ?>
 							<tr>
 								<th scrope="row">
 									<?php esc_html_e( 'Configure Widgets', 'widget-context' ); ?>