[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:  normal       |   Milestone:  Future Release
Component:  Customize    |     Version:  3.9
 Severity:  normal       |  Resolution:
 Keywords:  needs-patch  |     Focuses:  ui, javascript
-------------------------+-----------------------------

Comment (by sirbrillig):

 ok, so... thinking a little out loud here, the steps to bringing the CDM
 plugin into core (if that's what we decide to do) would probably look like
 this:

 1. We would need to convert all the javascript from ES2015 to ES5, because
 AFAIK including transpiled javascript is not really a core thing.
 2. We'd need to find a good place to enqueue the javascript. I'm not sure
 where right now.
 3. Most of the plugin is JS, and mostly in the preview pane. However,
 there's also a piece for the admin side (the sidebar) that adds an API to
 focus certain things that were not otherwise focusable and to create the
 "bounce" effect on the appropriate input element. We would need to decide
 where to put those API pieces and the "bounce" highlight.
 4. We'd need to do a little work to make some theme elements more
 discoverable (like menus) which is PHP code that's currently in the plugin
 file. This is maybe the most challenging part of the plugin: how can JS be
 used to find things in the preview for different themes?

 There's also the idea of adding awareness of partials for discoverability,
 which Weston pointed out here: https://github.com/Automattic/customize-
 direct-manipulation/issues/23

 A note on the "bounce" effect: we did that because it wasn't always
 obvious when you click an element that the sidebar just became focused
 (eg: if the relevant sidebar pane is already visible), or what part of the
 sidebar was relevant to the click. In our user tests the little bounce
 made a big difference in discoverability.

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