[wp-trac] [WordPress Trac] #22058: Improve custom background properties UI (was: Custom background vertical position)

[WordPress Trac]

#22058: Improve custom background properties UI
-------------------------------------------------+-------------------------
 Reporter:  grapplerulrich                       |       Owner:
     Type:  enhancement                          |      Status:  new
 Priority:  normal                               |   Milestone:  Future
Component:  Customize                            |  Release
 Severity:  normal                               |     Version:  3.4.2
 Keywords:  has-patch ui-feedback needs-testing  |  Resolution:
                                                 |     Focuses:  ui,
                                                 |  administration
-------------------------------------------------+-------------------------
Changes (by celloexpressions):

 * keywords:   => has-patch ui-feedback needs-testing
 * milestone:  Awaiting Review => Future Release


Comment:

 [attachment:22058.1.diff] builds on all of the previous work here to
 introduce an almost-entirely-reworked UI for custom backgrounds in the
 customizer.

 Text radio buttons are replaced with visual representations of each
 option, background positions can be set vertically and horizontally,
 background-size can be set (merged from #26386), tiling is depicted
 visually, and background attachment is represented with a "scroll imge
 with page" checkbox.

 This should all be backwards compatible, although the background
 attachment checkbox could use a bit more work. I kept the existing work on
 the old backgrounds admin page in the patch, but didn't add background-
 size there since that page is only shown to no-JS and IE7 users by
 default, and isn't really maintained or supported by most themes at this
 point.

 The UI could use refinement - feels fairly heavy to me, which could
 probably be resolved with color, but I want to ensure that there are nice
 big tap-targets, consistency with the use of a single icon when
 representing each of the options visually, and using white backgrounds on
 the buttons to indicate clickability. The buttons-as-tiles follows a
 similar UI to the media modal, with the use of thick borders to indicate
 selection and hover. Definitely want to avoid making these look like the
 core "buttons" style, because there are so many of them and that would add
 a lot of visual clutter (with rounded borders, shadows, etc). The hope is
 for them to read as images representing each choice. See the screenshots
 and gif above for the visual. Because traditional radio inputs can't be
 used here, I went with `<button>`s for each choice, with screen reader
 text representing each option with the hope that this can be similarly
 accessible.

 In the background, there's one new customizer control to handle all of the
 image-select controls. This could potentially be used outside of core for
 other things, but it requires quite a bit of CSS specific to each use and
 one of the background options needs to handle two settings assigned to one
 control, so it's name is specific to backgrounds for now. It would be cool
 to build something like a layout control that uses a similar UI in core
 for themes and plugins to extend in the future, but let's focus on this
 one control for now.

 It's been a long time since custom background has gotten much attention,
 so let's polish this up in the next few weeks so it's ready early for 4.7.

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