Make WordPress Core

Opened 7 months ago

Closed 7 months ago

Last modified 6 months ago

#59372 closed defect (bug) (fixed)

Adjust theme details buttons in Customizer to improve proximity of controls

Reported by: joedolson's profile joedolson Owned by: joedolson's profile joedolson
Milestone: 6.4 Priority: normal
Severity: normal Version:
Component: Customize Keywords: has-patch commit
Focuses: ui, accessibility Cc:

Description

Related: #40822

https://cldup.com/VYiaYkmtKO.jpg

In the customizer modal, the placement of controls is reversed vs. the placement in Appearance > Themes, and are placed on the opposite sides of the screen.

Buttons should be moved to be next to each other and switch the order so that they match the sequence in Appearance > Themes.

Attachments (15)

59372.jpg (181.5 KB) - added by joedolson 7 months ago.
59372.diff (5.3 KB) - added by joedolson 7 months ago.
Patch. Includes patch for #59371
59372.2.diff (5.9 KB) - added by joedolson 7 months ago.
Fixes bottom margin on mobile in customizer when no delete link present
customizer_preview_before_59372-2.png (412.7 KB) - added by petitphp 7 months ago.
Customizer preview before patch 59372.2
customizer_preview_after_59372-2.png (409.1 KB) - added by petitphp 7 months ago.
Customizer preview after patch 59372.2
theme_preview_before_59372-2.png (407.5 KB) - added by petitphp 7 months ago.
Theme preview before patch 59372.2
theme_preview_after_59372-2.png (409.4 KB) - added by petitphp 7 months ago.
Customizer preview after patch 59372.2
customizer_preview_mobile_before_59372-2.png (452.1 KB) - added by petitphp 7 months ago.
Customizer preview mobile before patch 59372.2
customizer_preview_mobile_after_59372-2.png (404.2 KB) - added by petitphp 7 months ago.
Customizer preview mobile after patch 59372.2
delete_button_hover_after_59372-2.png (6.3 KB) - added by petitphp 7 months ago.
Delete button hover after patch 59372.2
59372.3.diff (6.0 KB) - added by mikinc860 7 months ago.
@petitphp, I have tested in my local with the same configuration that you have used for testing and I found that the button does not have the blue border but it is a focus/active state of the button. I have updated the box-shadow in the new patch.
59372.3.2.diff (6.0 KB) - added by mikinc860 7 months ago.
@petitphp, I have tested in my local with the same configuration that you have used for testing and I found that the button does not have the blue border but it is a focus/active state of the button.I have updated the box-shadow in the new patch.
59372.3.3.diff (6.0 KB) - added by mikinc860 7 months ago.
delete_button_fix.png (23.7 KB) - added by petitphp 7 months ago.
59372.4.diff (5.9 KB) - added by joedolson 7 months ago.
Eliminates extra 5px gap between delete and other buttons

Change History (27)

@joedolson
7 months ago

@joedolson
7 months ago

Patch. Includes patch for #59371

#1 @joedolson
7 months ago

  • Keywords has-patch needs-testing added; needs-patch removed

Current patch includes the patch for #59371, because the two are pretty intertwined, and this patch won't work correctly without most of that patch anyway.

Should probably just use this one to fix both tickets.

@joedolson
7 months ago

Fixes bottom margin on mobile in customizer when no delete link present

#2 @joedolson
7 months ago

  • Keywords commit added; needs-testing removed

Changes:

  • Customizer, desktop: moves links from delete on left & live preview on right to both links centered, ordered Live Preview > Delete
  • Customizer, mobile: same change.
  • Themes page, desktop: moves delete link from far right to centered with other links, on right, changes order of preview/activate links.
  • Themes page, mobile: no change.

(Includes changes from #59371)

#3 @petitphp
7 months ago

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/59372/59372.2.diff

Environment

  • OS: macOS 13.5.2
  • Web Server: Nginx
  • PHP: 7.4.33
  • WordPress: 6.4-alpha-56267-src
  • Browser: Firefox 118b9
  • Theme: Twenty Twenty (to activate the customizer)
  • Active Plugins: ø

Actual Results

  • ✅ Customizer Desktop : Links are centered, "Live Preview" | "Delete"
  • ✅ Customizer Mobile : Links are centered, "Live Preview" | "Delete"
  • ✅ Themes page Desktop : Links are centered, "Live Preview" | "Activate" | "Delete"
  • ✅ Delete button use a new darker color

Additional Notes

  • ⚠️ Delete button has a blueish border color on hover

@petitphp
7 months ago

Customizer preview before patch 59372.2

@petitphp
7 months ago

Customizer preview after patch 59372.2

@petitphp
7 months ago

Theme preview before patch 59372.2

@petitphp
7 months ago

Customizer preview after patch 59372.2

@petitphp
7 months ago

Customizer preview mobile before patch 59372.2

@petitphp
7 months ago

Customizer preview mobile after patch 59372.2

@petitphp
7 months ago

Delete button hover after patch 59372.2

@mikinc860
7 months ago

@petitphp, I have tested in my local with the same configuration that you have used for testing and I found that the button does not have the blue border but it is a focus/active state of the button. I have updated the box-shadow in the new patch.

@mikinc860
7 months ago

@petitphp, I have tested in my local with the same configuration that you have used for testing and I found that the button does not have the blue border but it is a focus/active state of the button.I have updated the box-shadow in the new patch.

@mikinc860
7 months ago

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


7 months ago

#5 @joedolson
7 months ago

I'm not sure about adding a one-off style for the delete button, although it does seem like this style is pretty unique in core - I'm not seeing a lot of other button styled delete links.

But I think adding that change would be better done as part of #36882, instead of making it as part of this patch.

#6 @petitphp
7 months ago

@mikinc860 @joedolson apologies, I had trouble applying the patch locally, and it seems I've missed a change in wp-admin/css/themes.css which is why my "Delete" button had incorrect border color.

Patch is all good for me now.

#7 @joedolson
7 months ago

You were right to observe that some states of the button have an odd border - it has the blue border, rather than a red border. However, that problem pre-existed this patch; it's what's currently in core.

If you want to explore standardizing some classes for button and link delete styles that could be applied more generally against #36882, I think that would be awesome.

I'm undecided whether to include the color change here. I think it is an improvement, but it's just another one-off style, which is...annoying. ;)

@joedolson
7 months ago

Eliminates extra 5px gap between delete and other buttons

#8 @joedolson
7 months ago

Decided to include the color change, as it does fix a bug; we'll just have to clean it up when (if) we add standard classes for destructive actions.

Final patch eliminates the doubled gap between Delete and other buttons, clearly visible in the button image above. No other difference.

#10 @joedolson
7 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 56639:

Administration: Improve control proximity in theme details modal.

Make the theme details modals in the Customizer and at Appearance > Themes consistent. Change the order of controls so both modals are in the same sequence, center all controls in both desktop and mobile views, and change delete link color to meet color contrast requirements.

Props trishasalas, afercia, melchoyce, karmatosed, cathibosco1, michaelarestad, joedolson, petitphp, mikinc860.
Fixes #59372. See #59371, #40822.

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


6 months ago

Note: See TracTickets for help on using tickets.