Update user interface for Site icon selection

[kebbet]

Currently a user can set a site icon in two places outside the site editor: the general settings screen (added in 6.5) and the Customizer. Both these places have currently a design with some years to it. This ticket is aimed to discuss the design of these two places, and possible come up with a new one, and implement it.

Note that a preview also is displayed in the media modal when cropping the site icon.

This ticket has it's roots in ticket #54370

[joedolson]

With no specific accessibility issues cited, and no design or UI implementation available, I'm removing the accessibility focus. Feel free to add that back to the ticket when there are specific issues to discuss or a UI to address.

[nhrrob]

We have reviewed in today's bug scrub. It needs design and not ready for 6.6
Moving to next milestone.

[Joen]

There's a design here that is still relevant: https://core.trac.wordpress.org/ticket/54370#comment:61

First run of updating the UI.

https://core.trac.wordpress.org/ticket/60625

Before

After

[kebbet]

Please review linked PR and test it! Both in LTR and RTL cases. Make sure to build the RTL files.

Also fixed an issue in the crop view on smaller screen sizes, the crop tool was too narrow.

[kebbet]

How to test

• make sure to build RTL files in environment.
• make sure to follow test steps in both RTL and LTR environments.
• make sure layout works in all screen sizes.
• test with solid black and white images.

General options.

• Go to: wp-admin/options-general.php
• Remove existing site icon.
• Add a new image as icon (that already is 512x512px)
• Add a new image as icon (larger that 512x512px) to trigger crop flow.

Customizer.

• Activate a classic theme.
• Go to: wp-admin/customize.php, and Site Identity section
• Remove existing site icon.
• Add a new image as icon (that already is 512x512px)
• Add a new image as icon (larger that 512x512px) to trigger crop flow.

@mukeshpanchal27, whats your opinion, should we remove both these assets: browser-rtl.png and browser.png?

[kebbet]

The linked PR is based on a simplified version of a new design suggested by @jameskoster here: https://core.trac.wordpress.org/ticket/54370#comment:86

I'd like to suggest to take the opportunity of this PR to chamge a couple translatable strings, specifically the ones that use th the recommended size with this pattern: 512 × 512.
The problem with × is that, while visually looks like an x, it is ready by screen readers as times.
In the past some similar ases in core have been updated ot use by so that it will bread 512 by 512 pixels. I would also consider to remove the placeholder and make the string fully translatable. ​Here and ​here.

A few minor things:

In the media modal dialog preview;

The preview shows the app icon first and the browser icon last. However, the description As a browser icon and an app icon. mentions the two icons in a reversed order, which may be a little confusing. I'd suggest to change the description to use the same order of the visual preview order: As an app icon and a browser icon.

The customizer media control shows the Remove button first and the Change image button last:

While in the Settings page the order is different:

If possible, I would use the same order everywhere. Not sure if that would impact all the customizer media controsl though.
It's a minor thing though also because the Site icon UI is typically used once or very few times.

Noting that also the description placement in the customizer is different but I'm not sure that can be changed.

A few minor things:

In the media modal dialog preview;

[IMAGE]
The preview shows the app icon first and the browser icon last. However, the description As a browser icon and an app icon. mentions the two icons in a reversed order, which may be a little confusing. I'd suggest to change the description to use the same order of the visual preview order: As an app icon and a browser icon.

Great feedback, changed that.

The customizer media control shows the Remove button first and the Change image button last:

[IMAGE]
While in the Settings page the order is different:

[IMAGE]

If possible, I would use the same order everywhere. Not sure if that would impact all the customizer media controsl though. It's a minor thing though also because the Site icon UI is typically used once or very few times.

The site logo controller in the customizer share the same pattern as site icon controller. So i think thats a separate ticket.

Noting that also the description placement in the customizer is different but I'm not sure that can be changed.

That can be changed, which the screenshot shows, and I removed the long italic style, plus changed to 512 _by_ 512 in the description.

I removed the long italic style

Good catch, thank you.

Thanks for taking the time for testing and reviewing @peterwilsoncc

This is a screenshot with the current state of the PR.

[peterwilsoncc]

I think the ​linked pull request is ready for commit.

It would be good to get some additional testing and an approval from the design team.

[Joen]

I would've liked the final result to be slightly closer to what was previously suggested and designed here, https://core.trac.wordpress.org/ticket/54370#comment:61, but that's not a blocker. I expect this section in general to eventually be revisited in a more holistic sense, so it seems okay to veer closer to base functionality at this point.

However it is confusing to me that "Site Icon" shows up as two separate sections, one for the upload, one for the preview, and with Tagline in-between.

I share that review mainly based on a review of the visuals (thank you for including).

While looking at @jameskoster original comment i notices the suggestion to make the colors to CSS-vars. Latest commit implements that.

The commit also takes advantage of the CSS vars, and implements a dark mode style. See attached image.

[kebbet]

The screenshot-png is a composite of multiple images. I missed to separate empty state and active state for the site icon section, that’s why you gets confused @Joen A new screenshot begins after the tag line section, notice a black border to the right?

[Joen]

Ah, that makes sense! 👍 👍

[peterwilsoncc]

In 58927:

Administration: Modernize Site Icon UI in settings, customizer.

Updates the UI for previewing a site icon in general settings and the customizer to account for changes to browser designs over the past years.

Props joedolson, joen, kebbet, nhrrob, swissspidy, mukesh27, afercia, jorbin.
Fixes #60625.

Merged r58927 / ​https://github.com/WordPress/wordpress-develop/commit/3da83600189bc98661110b32dc488e753c8d622d

Thanks for your patience during the review process.