WordPress.org

Make WordPress Core

Opened 4 years ago

Last modified 9 hours ago

#22058 new enhancement

Improve custom background properties UI

Reported by: grapplerulrich Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 3.4.2
Component: Customize Keywords: has-patch ui-feedback needs-testing has-screenshots
Focuses: ui, accessibility, administration Cc:

Description

For the the custom background display options there is only left, centre and right position. The top and bottom position is missing.

Attachments (17)

custom-background.php (17.1 KB) - added by grapplerulrich 4 years ago.
custom-background
theme.php (52.7 KB) - added by grapplerulrich 4 years ago.
theme.php
22058.patch (4.4 KB) - added by SergeyBiryukov 4 years ago.
A patch with grapplerulrich's changes
22058.2.patch (5.6 KB) - added by grapplerulrich 4 years ago.
22058.patch
22058.3.patch (7.2 KB) - added by grapplerulrich 4 years ago.
22058.2.patch​
22058.diff (10.6 KB) - added by cdog 3 years ago.
22058-editor.png (15.3 KB) - added by cdog 3 years ago.
22058-presets.png (14.4 KB) - added by cdog 3 years ago.
22058-background.png (38.8 KB) - added by cdog 17 months ago.
22058.4.patch (6.9 KB) - added by sebastian.pisula 5 months ago.
Patch for 4.5-alpha-36677
22058.png (60.5 KB) - added by celloexpressions 7 days ago.
22058.mobile.png (65.3 KB) - added by celloexpressions 7 days ago.
22058.gif (7.6 MB) - added by celloexpressions 7 days ago.
With 22058.1.diff.
22058.1.diff (22.9 KB) - added by celloexpressions 7 days ago.
See 28.
22058.2.png (54.7 KB) - added by celloexpressions 10 hours ago.
Tweak colors to soften UI, see 22058.2.diff.
22058.2.diff (23.0 KB) - added by celloexpressions 10 hours ago.
Tweak colors, ensure that background position control is displayed in 3 columns.
22058.before.png (52.8 KB) - added by celloexpressions 10 hours ago.
Existing UI in 4.6 (dates to WordPress 3.4 with the image control changing in 4.1).

Change History (51)

#1 @SergeyBiryukov
4 years ago

  • Component changed from Themes to Appearance

#2 @MikeHansenMe
4 years ago

  • Cc mdhansen@… added

Related post on the forum http://wordpress.org/support/topic/twenty-ten-align-background-to-bottom


I think adding this to customizer is a good idea. I tested background-position: left bottom; and it works in Chromium 20 and Firefox 15. We may need to check if IE8 would support the vertical position.

#3 @grapplerulrich
4 years ago

  • Keywords 2nd-opinion added

I created a solution. I attached the two files that I edited.
Here is the test site I am running on.
http://www.grappler.tk/wpdev/

This is my first edit so please bear with me.

#4 @SergeyBiryukov
4 years ago

  • Keywords needs-patch added

Rather than full files, you can submit a patch using Subversion:
http://make.wordpress.org/core/handbook/submitting-a-patch/

@grapplerulrich
4 years ago

custom-background

@grapplerulrich
4 years ago

theme.php

#5 @grapplerulrich
4 years ago

I have changed the files to patches.
Here is a screenshot of the admin view.
http://pix.am/LSq0/

I tested in in IE7-9, Opera, FF and Chrome on Win7 and it works.

@SergeyBiryukov
4 years ago

A patch with grapplerulrich's changes

#6 @SergeyBiryukov
4 years ago

  • Keywords has-patch added; needs-patch removed

#7 @MikeHansenMe
4 years ago

Tested the patch and it works well. We need to also add this to customizer.

@grapplerulrich
4 years ago

22058.patch

#8 @grapplerulrich
4 years ago

I have added the patch with the customizer. Here is a screenshot.
http://pix.am/dPVz/

#9 follow-up: @MikeHansenMe
4 years ago

@grapplerurlrich the patch works if you set horizontal then the vertical but if you go back to change the horizontal after setting vertical it sets vertical to top. At least in the preview, it does save them correctly and display as expected on the site.

#10 in reply to: ↑ 9 @grapplerulrich
4 years ago

Replying to MikeHansenMe:

@grapplerurlrich the patch works if you set horizontal then the vertical but if you go back to change the horizontal after setting vertical it sets vertical to top. At least in the preview, it does save them correctly and display as expected on the site.

What tool do you use to minifiy the js?

#11 @MikeHansenMe
4 years ago

Set define( 'SCRIPT_DEBUG', true); then edit the dev.js file instead of the min file.

@grapplerulrich
4 years ago

22058.2.patch​

#12 follow-up: @grapplerulrich
4 years ago

@MikeHansenMe Thanks, I updated the patch. I also saw a problem with the "background-attachment:" and fixed that too. How long will it take for it to be implemented in WordPress?

#13 in reply to: ↑ 12 @MikeHansenMe
4 years ago

Replying to grapplerulrich:

@MikeHansenMe Thanks, I updated the patch. I also saw a problem with the "background-attachment:" and fixed that too. How long will it take for it to be implemented in WordPress?

Tested and can confirm the customizer is now working as expected. We are currently in a feature freeze for this release cycle so it will likely be reviewed after 3.5 comes out when enhancements are being considered. Thanks for contributing.

#15 follow-up: @MikeHansenMe
3 years ago

Patch still applies but tested again and the changing the vertical position to center shows no change. It does save the change but does not show the change immediately as the horizontal change does.

Last edited 3 years ago by MikeHansenMe (previous) (diff)

@cdog
3 years ago

#16 in reply to: ↑ 15 @cdog
3 years ago

Replying to MikeHansenMe:

Patch still applies but tested again and the changing the vertical position to center shows no change. It does save the change but does not show the change immediately as the horizontal change does.

Please check: attachment:22058.diff. I've refreshed the patch and filled out missing parts.

#17 follow-up: @MikeHansenMe
3 years ago

Patch does not seem to show the change when center or bottom are selected.

#18 in reply to: ↑ 17 @cdog
3 years ago

Replying to MikeHansenMe:

Patch does not seem to show the change when center or bottom are selected.

I'm testing it in Firefox 16 with Twenty Eleven and it works as intended, both from Theme Customizer and Appearance > Background.

#19 follow-up: @MikeHansenMe
3 years ago

When you change the vertical positioning of the background image the preview does not update. It does after saving and refreshing. However, it should happen like horizontal does with immediate preview before saving. I tested using FF 20 and Chrome 25 on Ubuntu. I can test on Windows tonight to see if it works on Windows w/ IE.

#20 in reply to: ↑ 19 @cdog
3 years ago

  • Keywords needs-testing added

Replying to MikeHansenMe:

When you change the vertical positioning of the background image the preview does not update. It does after saving and refreshing.

Are you sure you're testing the latest patch? Please revert any changes and then apply attachment:22058.diff. Just tested it on IE and it seems to behave correctly. Where exactly do you encounter the issue, in Theme Customizer, in Appearance > Background or both? What are the steps to repoduce it? Thanks for helping.

#21 follow-up: @MikeHansenMe
3 years ago

I am running the most current trunk version(3.6-beta1-24023) and reverting all patches prior to testing. Then applying your patch 22058.diff

Please see the video for explanation
http://bit.ly/11CSUBC

Last edited 3 years ago by MikeHansenMe (previous) (diff)

#22 in reply to: ↑ 21 @cdog
3 years ago

Replying to MikeHansenMe:

Please see the video for explanation
http://bit.ly/11CSUBC

Well, that's really strange. Just tested it again, now using IE9 and FF21 on Windows and it works as expected. Please check that you have defined SCRIPT_DEBUG in your wp-config.php file:

define('WP_DEBUG', true);
define('SCRIPT_DEBUG', true);

It seems that everything is loaded, except recent changes to JS. Maybe you're using the minified scripts which are not affected by the patch. If it's not this, please take a look at the console and let me know if there are any errors. Thanks!

#23 follow-up: @bpetty
3 years ago

I'm seeing the same thing as MikeHansenMe in Chrome 25.0.1364.160.

... and yes, I'm using SCRIPT_DEBUG.

#24 in reply to: ↑ 23 @cdog
3 years ago

Replying to bpetty:

I'm seeing the same thing as MikeHansenMe in Chrome 25.0.1364.160.

... and yes, I'm using SCRIPT_DEBUG.

After applying the patch go to Appearance > Background (or Customize). Then press Ctrl + F5 to reload (override cache) and try uploading an image again. Please let me know if it helps.

@cdog
3 years ago

@cdog
3 years ago

#25 @cdog
3 years ago

  • Cc catalin.dogaru@… added
  • Keywords ui-feedback ux-feedback added

Current patch still applies but I'm not really satisfied with the growing list of radio buttons that are complicating too much the user interaction. I've attached two concepts illustrating variations of the idea that could improve the interface and provide a more engaging experience.

attachment:22058-editor.png puts accent not only on functionality but on UI improvements too.

attachment:22058-presets.png simplifies the idea even more exposing only common background settings presets. It's not as flexible as the first solution but it's much easier to use.

What do you think and which one do you prefer? Would it improve the current implementation?

Version 1, edited 3 years ago by cdog (previous) (next) (diff)

#26 follow-up: @helen
18 months ago

  • Focuses ui administration added
  • Keywords 2nd-opinion has-patch needs-testing ui-feedback ux-feedback removed

I really like the idea of an alternative UI to the radio buttons - the position concept in particular is very compelling. The others seem a little harder to understand as plain icons when you're not versed in CSS - even the words are tricky. For instance, attachment seems like it could be a checkbox, for instance, and called "Scroll with page" or something.

#27 in reply to: ↑ 26 @cdog
17 months ago

helen, great! What do you think of attachment:22058-background.png?

This ticket was mentioned in Slack in #core by cdog. View the logs.


17 months ago

@sebastian.pisula
5 months ago

Patch for 4.5-alpha-36677

@celloexpressions
7 days ago

@celloexpressions
7 days ago

See 28.

#29 @celloexpressions
6 days ago

  • Keywords has-patch ui-feedback needs-testing added
  • Milestone changed from Awaiting Review to Future Release
  • Summary changed from Custom background vertical position to Improve custom background properties UI

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.

#30 @celloexpressions
6 days ago

#26386 was marked as a duplicate.

This ticket was mentioned in Slack in #design by celloexpressions. View the logs.


6 days ago

#32 @afercia
6 days ago

  • Focuses accessibility added

#33 @FolioVision
24 hours ago

I find this a bit complex. It would certainly put me off using the function or recommending it to clients. [cdog's version from 17 months ago] is a bit better but the functionality is fairly obscure. The results look a little MySpacey. Are there people using these background functions and are they using the edge cases? While the current flexibility is amazing, it would be far clearer to have just three simple, attractive and usable presets available in the standard interface.

@celloexpressions
10 hours ago

Tweak colors to soften UI, see 22058.2.diff.

@celloexpressions
10 hours ago

Tweak colors, ensure that background position control is displayed in 3 columns.

@celloexpressions
10 hours ago

Existing UI in 4.6 (dates to WordPress 3.4 with the image control changing in 4.1).

#34 @celloexpressions
9 hours ago

  • Keywords has-screenshots added

22058.2.diff tweaks the colors to match the text color (#555) for the icons and use the darker gray for the selected border, and this feels better to me. It also fixes a bug on screens between 400-600px wide with the background position control.

@afercia: is the use of <button>s with screen reader text contents for each choice an appropriate way to handle accessibility? I tested on keyboard and it works well there, not sure about screen readers though.

@FolioVision: while I'd prefer not to have these options at all, this is how the custom background functionality works. If it were being built today, I doubt we'd have user-facing options for anything other than the image. But given that this feature was originally introduced 5+ years ago, we need to work with the assumptions that it makes. I don't know that we could determine three reasonable pre-set combinations that would be appropriate in the context of a given theme or image, let alone for core in general. I would also guess that a majority of themes no longer use this feature and a majority of users don't mess with the options, perhaps beyond setting an image.

It's really hard to make many assumptions about what a user might want to do with these options besides the fixed/cover-sized approach that's probably the most common right now. We know that background-repeat doesn't apply when background-size is cover, but beyond that we can't really hide any options based on other settings. A lot depends on the size and aspect ratio of the selected image and the size and orientation of the end user's screen. My goals here are to make the options more visual, reducing the use of technical terminology, and to fill in the clear gaps in functionality while prioritizing the most important options and providing a more appropriate flow between options. That improves the experience for the users that do use this feature while maintaining full backwards compatibility.

Note: See TracTickets for help on using tickets.