[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:  sirbrilling
     Type:  enhancement  |      Status:  assigned
 Priority:  normal       |   Milestone:  4.7
Component:  Customize    |     Version:  3.9
 Severity:  normal       |  Resolution:
 Keywords:  needs-patch  |     Focuses:  ui, accessibility, javascript
-------------------------+--------------------------------------------

Comment (by celloexpressions):

 I think we need to try to place the icons inside the partial container.
 I'm seeing a lot of issues, for example, with widget areas with the widget
 containers being floated or using masonry layouts - this causes all of the
 edit icons to be on top of each other. If a partial container has
 children, we should be able to inject the icon within the container
 without impacting the layout; otherwise it should remain before the
 partial itself. This will also make it easier for themes to add their own
 styles if needed.

 We have some color contrast issues here; I pushed a couple adjustments to
 the PR to improve that. I also added a visible focus style and an
 identical hover styling (so that there isn't a flash of distinct focus
 styling when clicking). I also updated the PR to show the icons by default
 and to restore using the `click` event to toggle the icons - the other way
 was always under the impression that there was a `mousemove` event when I
 clicked and there are a lot of things you could do to accidentally toggle
 the icons anyway, like double-clicking to select text. If someone has a
 solution that works better cross-browser, let's explore alternatives
 further.

 Is there a way to show icons somewhere for empty partials? Not sure what
 the best approach would be, but it would be nice if you could get an icon
 for adding a logo before there's a logo set, for example.

 Current patch in progress is now here for easier collaboration:
 https://github.com/xwp/wordpress-develop/pull/179.

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