[wp-trac] [WordPress Trac] #27403: Improve UI for linking areas of Customizer preview to corresponding controls (desktop and mobile)

[WordPress Trac]

#27403: Improve UI for linking areas of Customizer preview to corresponding
controls (desktop and mobile)
-------------------------+-----------------------------
 Reporter:  westonruter  |       Owner:
     Type:  enhancement  |      Status:  new
 Priority:  low          |   Milestone:  Future Release
Component:  Widgets      |     Version:  3.9
 Severity:  minor        |  Resolution:
 Keywords:  needs-patch  |     Focuses:  ui, javascript
-------------------------+-----------------------------
Description changed by westonruter:

Old description:

> Right now you may Shift+Click on a widget in the customizer preview and
> the corresponding widget area customizer section will expand, along with
> the corresponding widget control, and focus on the first field in that
> widget control. This is also available for nav menu items (#32681), and
> for any elements that are using selective refresh (#27355).
>
> [[Image(https://cldup.com/r9cTBdwm2b.png)]]
>
> (Props @afercia for image from #33251.)
>
> While there is a tooltip that appears when hovering over a widget, this
> can be difficult for a user to discover. An alternative would be for
> there to be an Edit button that appears when hovering over a widget
> within the preview. The challenge with this, however, is that it may be
> difficult to universally style this button so that it can appear properly
> in all themes. The tooltip and Shift+Click requires no UI. A simple click
> (without a modifier key) was problematic because it prevents common
> mouse-based interactions with widgets.
>
> Originally reported in: https://github.com/x-team/wp-widget-
> customizer/issues/78
>
> For some alternative designs, see https://github.com/xwp/wp-widget-
> customizer/pull/16
>
> Some experimentation has been done on WordPress.com in the Customizer for
> adding Edit buttons alongside widgets.
>
> Additionally, there is a fundamental issue with the shift+click feature:
> it is not mobile friendly since there is no ability to do this on a touch
> screen. The immediate equivalent feature for mobile I think would be a
> long press. On mobile, the preview fills the screen so if a widget, nav
> menu item, or other partial was long-pressed it could then flip over to
> the controls pane where the relevant control would be focused.

New description:

 Right now you may Shift+Click on a widget in the customizer preview and
 the corresponding widget area customizer section will expand, along with
 the corresponding widget control, and focus on the first field in that
 widget control. This is also available for nav menu items (#32681), and
 for any elements that are using selective refresh (#27355).

 [[Image(https://cldup.com/r9cTBdwm2b.png)]]

 (Props @afercia for image from #33251.)

 While there is a tooltip that appears when hovering over a widget, this
 can be difficult for a user to discover. An alternative would be for there
 to be an Edit button that appears when hovering over a widget within the
 preview. The challenge with this, however, is that it may be difficult to
 universally style this button so that it can appear properly in all
 themes. The tooltip and Shift+Click requires no UI. A simple click
 (without a modifier key) was problematic because it prevents common mouse-
 based interactions with widgets.

 Originally reported in: https://github.com/x-team/wp-widget-
 customizer/issues/78

 For some alternative designs, see https://github.com/xwp/wp-widget-
 customizer/pull/16

 Some experimentation has been done on WordPress.com in the Customizer for
 adding Edit buttons alongside widgets.

 Additionally, there is a fundamental issue with the shift+click feature:
 it is not mobile friendly since there is no ability to do this on a touch
 screen. The immediate equivalent feature for mobile I think would be a
 long press. On mobile, the preview fills the screen so if a widget, nav
 menu item, or other partial was long-pressed it could then flip over to
 the controls pane where the relevant control would be focused. The problem
 with shift-click on desktop is similar to the problem with long-press on
 mobile: there is no indication which elements can be edited so the user
 doesn't know where to try.

--

--
Ticket URL: <https://core.trac.wordpress.org/ticket/27403#comment:5>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform