Widget Visibility: add controls to widget block editor #20057

jeherve · 2021-06-10T11:51:18Z

Related issue: WordPress/gutenberg#31181

Jetpack's Widget Visibility module adds visibility controls to the widgets available in Appearance > Customize > Widgets and Appearance > Widgets

Those controls are added here:

jetpack/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php

Line 12 in 41fe374

public static function init() {

With the upcoming version of WordPress, the widget UI changes to allow you to insert legacy widgets as well as blocks, in two areas:

Under Appearance > Customize > Widgets in a refreshed UI.
Under a new interface at Appearance > Widgets, now loading themes.php?page=gutenberg-widgets instead of widgets.php.

We'll need to do a few things to ensure that Widget Visibility is compatible with those changes:

Revisit the changes that were introduced in Widget Visibility: Disable in Block Editor #17413 to allow the use of Widget Visibility in the block widget editor.
Update the Widget Visibility JS so it can hook its buttons into the block widget editor as well as the old interface.
Update its CSS to ensure its layout looks good in the old and the new UI.
Ensure that widget visibility controls are displayed for blocks.

Primary issue: #19654

Related discussion: pbAok1-2dI-p2

The text was updated successfully, but these errors were encountered:

jeherve · 2021-06-10T12:03:18Z

Loading the resources in the right screen seems to be possible (I believe something like below should help), but we'll need some extra work to update the JS to target the right elements.

diff --git a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions.php
index 2574690f73..6db2e95047 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 @@ class Jetpack_Widget_Conditions {
 	}
 
 	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(

cpapazoglou · 2021-06-25T08:09:26Z

Reserved for onboarding.

cpapazoglou · 2021-07-09T09:02:38Z

I would suggest limiting the scope of this issue to Legacy Widgets so that it's fully ready and tested when WordPress 5.8 is released and opening (?) a new issue regarding support to blocks which will need a more "Gutenberg" oriented approach rather than using jQuery to inject HTML.

cpapazoglou · 2021-07-09T09:02:58Z

cc: @simison

jeherve · 2021-07-09T09:12:46Z

I would suggest limiting the scope of this issue to Legacy Widgets so that it's fully ready and tested when WordPress 5.8 is released and opening (?) a new issue regarding support to blocks which will need a more "Gutenberg" oriented approach rather than using jQuery to inject HTML.

That's fair. We can also keep this issue open and add a new item to the task list here.

simison · 2021-07-09T09:23:51Z

Fine by me. 👍 We could even roll with that limited scope and sit back and observe feedback and adjust only later, if ever. Important to consider if it's clear why there's such a difference in UI between different blocks. Please also do inform .com happiness + docs people at pbAok1-2cr-p2 — @jeherve can prolly loop in Jetpack HEs/docs?

jeherve · 2021-07-09T09:26:58Z

can prolly loop in Jetpack HEs/docs?

@a8ck3n Could you add this to your list for the 9.1.1 release?

In short, Widget Visibility will only work for legacy widgets (i.e. widgets as we know them today) for all folks using the new Widget management screen that will be introduced in WP 5.8. That screen also allows you to add blocks to widget areas, but those will not include any widget visibility controls yet.

Thank you!

sdixon194 · 2021-07-21T14:52:36Z

Re-opened because widget visibility settings still need to be addressed for block widgets themselves, especially as more people convert legacy widgets to block, breaking their visibility settings.

mzitinfo · 2021-08-11T08:14:08Z

Another case in 4212591-zen

fresatomica · 2021-08-11T10:34:08Z

Another report here: https://wordpress.com/forums/topic/widget-visibility-on-block-editor/

jartes · 2021-08-12T10:30:11Z

Another report here 29532833-hc. User with a Simple Site with no visibility option (even with Legacy Widgets)

simison · 2021-08-13T06:53:45Z

The fix for legacy widgets in the new interface got deployed for simple sites (D65412-code, D65394-code).

Blocks in the new widgets interface still need a fix.

MaxPhilip · 2021-08-16T09:55:49Z

Another user who needs visibility settings: 4222374-zen

supernovia · 2021-08-17T22:51:50Z

Another case: https://wordpress.com/forums/topic/hiding-widgets-with-block-editor/

mtias · 2021-08-18T09:09:30Z

~~@simison is this assigned anywhere yet?~~ I see it is, scratch that :)

simison · 2021-08-18T11:21:31Z

@mtias No worries, thanks for caring. :-) Another half of these reports were sorted with the fix, and the rest will be sorted by work from Flow patrol.

Looks like we need design help though, so I've reached out to arrange some eyes for this. (p1629285502046400-slack-dotcom-design)

dcoleonline · 2021-08-20T12:45:52Z

4221429-zen asking for visibility for block widgets

mreishus · 2021-08-23T22:01:48Z

Looking for reviews on #20731

sajmes · 2021-08-26T12:48:51Z

Another request for visibility on block widgets: 4238114-zd-woothemes

xpurichan · 2021-08-27T16:11:27Z

31354335-hc

the-misha · 2021-09-02T18:51:09Z

Another request: 28417583-hc

jerrysarcastic · 2021-09-06T00:02:34Z

Request for followup in https://wordpress.com/forums/topic/changing-widget-visibility-in-sidebar/ when visibility is restored

simison · 2021-09-06T09:59:53Z

@mreishus hi! What's the status/timeframe on this?

aisajib · 2021-09-15T03:02:06Z

Another forum post regarding this here: https://wordpress.com/forums/topic/visibility-in-blocks-in-the-widget-area/

fresatomica · 2021-09-19T12:18:38Z

Mentioned here: https://wordpress.com/forums/topic/no-visibility-settings-for-paragraph-block/

edwinho89 · 2021-09-22T03:47:38Z

4313215-zd-woothemes

sophiegyo · 2021-09-23T13:32:11Z

Another request came in via 31060326-hc / 4320892-zd

mreishus · 2021-09-23T20:26:48Z

This is scheduled for the next Jetpack release (10.2 on 2021-10-05) and is available on certain WordPress.com plans today.

p7DVsv-cIY-p2

jeherve added [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it [Feature] Widget Visibility [Pri] Normal [Focus] Blocks Issues related to the block editor, aka Gutenberg, and its extensions developed in Jetpack labels Jun 10, 2021

jeherve mentioned this issue Jun 10, 2021

WordPress 5.8 Compatibility: Primary issue #19654

Closed

20 tasks

cpapazoglou added the [Type] Good First Bug label Jun 25, 2021

cpapazoglou assigned cpapazoglou and dsas and unassigned cpapazoglou and dsas Jun 29, 2021

jeherve added this to the jetpack/9.9.1 milestone Jun 30, 2021

dsas mentioned this issue Jul 2, 2021

Widget visibility: supporting load conditions for legacy widgets in gutenberg widgets screen #20255

Merged

github-actions bot assigned dsas Jul 2, 2021

github-actions bot added the [Status] In Progress label Jul 2, 2021

dsas added the [Status] Needs Team Review label Jul 7, 2021

cpapazoglou removed the [Status] Needs Team Review label Jul 9, 2021

sdixon194 closed this as completed in #20255 Jul 14, 2021

sdixon194 reopened this Jul 21, 2021

sdixon194 modified the milestones: jetpack/9.9.1, jetpack/10.0 Jul 21, 2021

mtias mentioned this issue Jul 24, 2021

New Block Widget: Add Visibility Options WordPress/gutenberg#33671

Closed

simison mentioned this issue Aug 13, 2021

Widget visibility: Make request paths work on wpcom #20644

Merged

mreishus self-assigned this Aug 16, 2021

melek mentioned this issue Aug 16, 2021

Widget visibility: integrate with WooCommerce Shop Page #8343

Open

mreishus mentioned this issue Aug 17, 2021

Widget Visibility: add controls to widget block editor #20731

Merged

github-actions bot added the [Status] In Progress label Aug 17, 2021

sdixon194 modified the milestones: jetpack/10.1, jetpack/10.2 Sep 3, 2021

mreishus closed this as completed in #20731 Sep 23, 2021

mreishus mentioned this issue Sep 28, 2021

Widget Visibility: Restrict to top level blocks #21222

Merged

kraftbj removed the [Status] In Progress label Jan 18, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Widget Visibility: add controls to widget block editor #20057

Widget Visibility: add controls to widget block editor #20057

jeherve commented Jun 10, 2021 •

edited

Loading

jeherve commented Jun 10, 2021

cpapazoglou commented Jun 25, 2021

cpapazoglou commented Jul 9, 2021

cpapazoglou commented Jul 9, 2021

jeherve commented Jul 9, 2021

simison commented Jul 9, 2021

jeherve commented Jul 9, 2021

sdixon194 commented Jul 21, 2021

mzitinfo commented Aug 11, 2021

fresatomica commented Aug 11, 2021

jartes commented Aug 12, 2021

simison commented Aug 13, 2021 •

edited

Loading

MaxPhilip commented Aug 16, 2021 •

edited by kathrynwp

Loading

supernovia commented Aug 17, 2021

mtias commented Aug 18, 2021 •

edited

Loading

simison commented Aug 18, 2021

dcoleonline commented Aug 20, 2021

mreishus commented Aug 23, 2021

sajmes commented Aug 26, 2021

xpurichan commented Aug 27, 2021

the-misha commented Sep 2, 2021

jerrysarcastic commented Sep 6, 2021

simison commented Sep 6, 2021

aisajib commented Sep 15, 2021

fresatomica commented Sep 19, 2021

edwinho89 commented Sep 22, 2021

sophiegyo commented Sep 23, 2021

mreishus commented Sep 23, 2021 •

edited

Loading

Widget Visibility: add controls to widget block editor #20057

Widget Visibility: add controls to widget block editor #20057

Comments

jeherve commented Jun 10, 2021 • edited Loading

jeherve commented Jun 10, 2021

cpapazoglou commented Jun 25, 2021

cpapazoglou commented Jul 9, 2021

cpapazoglou commented Jul 9, 2021

jeherve commented Jul 9, 2021

simison commented Jul 9, 2021

jeherve commented Jul 9, 2021

sdixon194 commented Jul 21, 2021

mzitinfo commented Aug 11, 2021

fresatomica commented Aug 11, 2021

jartes commented Aug 12, 2021

simison commented Aug 13, 2021 • edited Loading

MaxPhilip commented Aug 16, 2021 • edited by kathrynwp Loading

supernovia commented Aug 17, 2021

mtias commented Aug 18, 2021 • edited Loading

simison commented Aug 18, 2021

dcoleonline commented Aug 20, 2021

mreishus commented Aug 23, 2021

sajmes commented Aug 26, 2021

xpurichan commented Aug 27, 2021

the-misha commented Sep 2, 2021

jerrysarcastic commented Sep 6, 2021

simison commented Sep 6, 2021

aisajib commented Sep 15, 2021

fresatomica commented Sep 19, 2021

edwinho89 commented Sep 22, 2021

sophiegyo commented Sep 23, 2021

mreishus commented Sep 23, 2021 • edited Loading

jeherve commented Jun 10, 2021 •

edited

Loading

simison commented Aug 13, 2021 •

edited

Loading

MaxPhilip commented Aug 16, 2021 •

edited by kathrynwp

Loading

mtias commented Aug 18, 2021 •

edited

Loading

mreishus commented Sep 23, 2021 •

edited

Loading