Skip to content

Omnipresent toolbar: show site icon instead of dashicon if set#79049

Merged
fushar merged 1 commit into
trunkfrom
admin-bar-in-editor-site-icon
Jun 10, 2026
Merged

Omnipresent toolbar: show site icon instead of dashicon if set#79049
fushar merged 1 commit into
trunkfrom
admin-bar-in-editor-site-icon

Conversation

@fushar

@fushar fushar commented Jun 9, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

What?

Part of #79036

This PR replaces the home / odometer dashicon, with the actual site icon, if set, in the admin bar. The icon will be 20x20px, with border-radius of 2px and background-color of #f0f0f1. If the site has not set site icon, then the default dashicons (home / odometer) is NOT changed.

This will be gated in the existing "Omnipresent Toolbar" Gutenberg experiment. Original Core PR: WordPress/wordpress-develop#11781

Why?

There are three main reasons:

  1. Currently, the icon is odometer on site frontend, and house in wp-admin. This feels confusing as the icon changes between screens, but the label (site name) is not. With this, the site name node appearance is fixed.
  2. This helps users in mobile viewport to identify the site. Instead of generic icon, we now see the site icon.
  3. In the "Toolbar in editor" experiment, the site icon at the top-left corner is replaced by a back button. With this change, this acts as the replacement. This is useful especially on mobile resolutions to identify the site. See the following screenshots

Post Editor

Before After
image image
image image

Site Editor

Before After
image image
image image

How?

Testing Instructions

Go to Gutenberg -> Experiments, scroll all the way down, then enable the following experiment:

image

Then, go to Settings -> General, upload a site icon, then verify it appears in the admin bar as shown in the below screenshots.

Screenshots or screencast

Before

image image

After

fresh modern blue coffee ectoplasm light midnight ocean sunrise

Before (mobile)

image image

After (mobile)

image image

Use of AI Tools

I used Codex with GPT-5.5 to help with the CSS implementation, with my supervision.

@github-actions

github-actions Bot commented Jun 9, 2026 •
edited
Loading

Copy link
Copy Markdown

Flaky tests detected in 64e8e1a.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/27266759275
📝 Reported issues:

@fushar fushar self-assigned this Jun 9, 2026
@fushar fushar marked this pull request as ready for review June 9, 2026 13:49
@fushar fushar requested a review from spacedmonkey as a code owner June 9, 2026 13:49
@github-actions

github-actions Bot commented Jun 9, 2026 •
edited
Loading

Copy link
Copy Markdown

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.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: fushar <fushar@git.wordpress.org>
Co-authored-by: StevenDufresne <dufresnesteven@git.wordpress.org>
Co-authored-by: arthur791004 <arthur791004@git.wordpress.org>

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

@fushar fushar added the [Type] Enhancement A suggestion for improvement. label Jun 9, 2026
StevenDufresne
StevenDufresne reviewed Jun 10, 2026
View reviewed changes
Comment thread lib/experimental/omnibar/load.php

$css = <<<CSS
#wpadminbar #wp-admin-bar-site-name.has-site-icon > .ab-item:before {
content: none;

@StevenDufresne StevenDufresne Jun 10, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this guaranteed to load after core's admin CSS?

@fushar fushar Jun 10, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, because we attach it to the admin-bar handle via wp_add_inline_style( 'admin-bar', $css ). This the HTML output:

image

Also, the specificity is higher anyway due to .has-site-icon class.

@fushar fushar force-pushed the admin-bar-in-editor-site-icon branch from da872b6 to 64e8e1a Compare June 10, 2026 09:27
@fushar fushar changed the title Admin bar in editor experiment: show site icon instead of dashicon if set Omnipresent toolbar: show site icon instead of dashicon if set Jun 10, 2026
@fushar fushar merged commit 8eb6461 into trunk Jun 10, 2026
50 of 51 checks passed
@fushar fushar deleted the admin-bar-in-editor-site-icon branch June 10, 2026 11:11
@github-actions github-actions Bot added this to the Gutenberg 23.5 milestone Jun 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@StevenDufresne StevenDufresne StevenDufresne left review comments

@arthur791004 arthur791004 arthur791004 approved these changes

@youknowriad youknowriad Awaiting requested review from youknowriad

@p-jackson p-jackson Awaiting requested review from p-jackson

@spacedmonkey spacedmonkey Awaiting requested review from spacedmonkey spacedmonkey is a code owner

Assignees

@fushar fushar

Labels

[Type] Enhancement A suggestion for improvement.

Projects

None yet

Milestone

Gutenberg 23.5

Development

Successfully merging this pull request may close these issues.

3 participants

@fushar @StevenDufresne @arthur791004