Adjust theme details buttons in Customizer to improve proximity of controls

[joedolson]

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.

[joedolson]

Patch. Includes patch for #59371

[joedolson]

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]

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

[joedolson]

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)

[petitphp]

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]

Customizer preview before patch 59372.2

[petitphp]

Customizer preview after patch 59372.2

[petitphp]

Theme preview before patch 59372.2

[petitphp]

Customizer preview after patch 59372.2

[petitphp]

Customizer preview mobile before patch 59372.2

[petitphp]

Customizer preview mobile after patch 59372.2

[petitphp]

Delete button hover after patch 59372.2

[mikinc860]

@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]

@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.

[joedolson]

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.

[petitphp]

@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.

[joedolson]

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]

Eliminates extra 5px gap between delete and other buttons

[joedolson]

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.

Trac ticket: https://core.trac.wordpress.org/ticket/59372

[joedolson]

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.

In r56639