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

Comment (by westonruter):

 @sirbrillig:

 Replying to [comment:62 sirbrillig]:
 > > Btw clicking the customizer link in the top admin or in the backend
 opens up the environment for live editing and previewing. Where the user
 can see the live site and make changes seen in realtime. One expects to
 see the site as it is and then make the adjustments needed.
 >
 > Just brainstorming, @paaljoachim, but what if immediately upon entering
 the Customizer the sidebar was collapsed, but we made the collapse/extend
 button big and bright (maybe even with an animation) so it's clear from
 the start how to hide/show the preview.

 I don't think opening the customizer with the pane collapsed would be well
 received because it would be yet another click to start getting to work.
 However, in the future when we can bootstrap the customizer on to the
 frontend, I definitely think this would be a great way to enter the
 customizer: the pane can be loaded and slide out on any frontend page and
 you could get to work right away without ever going to `customize.php`.

 From my personal aesthetic point of view, having the edit icons
 persistently shown in the preview when the controls are expanded is very
 visually cluttered. I feel strongly that we should figure out a way to
 only show the icons contextually, either showing them momentarily when the
 preview first loads, or showing them when hovering over a partial's
 placement container, or a second or so after a scroll/mousedown/touch
 event. To access the buttons then, on desktop and mobile, a user would
 just have to scroll the preview or hover over or touch some inert element
 of the screen to get the icons to show up, particularly the icon in the
 partial's container (although all the other icons could also be revealed,
 but perhaps with half-opacity to indicate that they're not related to any
 container being touched).

 Consider also mobile where there is no collapse button. You can show the
 preview or show the controls, not both. So when viewing the preview on
 mobile, the edit icons need to be shown intelligently but also not get in
 the way of the preview.

 Consider also in #36678 we fixed an issue whereby shift-clicking on an
 element in the preview can automatically expand the controls pane if it
 was collapsed. So the edit icons should be still available in the preview
 when the controls are collapsed.

 > > Uploaded some alternate button ideas, drawing from core button styles.
 >
 > @melchoyce: thanks! I like the square gray ones a lot, but partly that
 may be because they match the gray background in that theme. I guess the
 advantage of bright icons is that they are more easily visible with
 different backgrounds. ¯\_(ツ)_/¯

 I like the gray icons as well. The gray icons feel less visually-
 cluttered. But my concern about there being so many icons persistently all
 over the place remains.

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