60625 site icon UI

[kebbet]

First run of updating the UI.

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

Before

After

[github-actions[bot]]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props kebbet, peterwilsoncc, mukesh27, afercia, jorbin, swissspidy.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions[bot]]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• The Plugin and Theme Directories cannot be accessed within Playground.
• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance, it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[kebbet]

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

[afercia]

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.

[afercia]

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.

[kebbet]

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.

[afercia]

I removed the long italic style

Good catch, thank you.

[kebbet]

Thanks for taking the time for testing and reviewing @peterwilsoncc

[kebbet]

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

[kebbet]

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.

[peterwilsoncc]

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

Thanks for your patience during the review process.