Photo Directory : Button label disappears on click/focus

[krupajnanda]

The "Contributions" and "Favorites" button text briefly disappears when the button is clicked.

Steps to Reproduce:

1. Visit ​https://wordpress.org/photos/author/<authoer_name>
   E.g. ​https://wordpress.org/photos/author/krupajnanda/
2. Click the Contributions button.
3. Observe the button during the click/focus state.

Expected Result:

The button label ("Contributions"/"Favorites") should remain visible in all states (default, hover, focus, active).

Actual Result:

The text briefly disappears while the button is being clicked; leaving only the button background visible.

[modi2918]

It's Working Properly.

[tusharaddweb]

I was able to reproduce this issue on my end!

When the button enters the :active or :focus state, the background turns black, but the text color doesn't update to contrast it. This makes the text momentarily invisible, leaving just the black background box.

Since these buttons are using the .is-style-button-list navigation block, we can easily fix this by explicitly setting the text color for those interaction states.

Here is the CSS patch to resolve the issue:

  .wp-block-navigation.is-style-button-list .wp-block-navigation-item__content:active,
  .wp-block-navigation.is-style-button-list .wp-block-navigation-item__content:focus {
    color: #ffffff !important;
  }

[mkrndmane]

Please use the existing color variables instead of hardcoded color values. This will ensure that Customizer changes are reflected automatically. Also, !important does not appear to be necessary here.

  .wp-block-navigation.is-style-button-list .wp-block-navigation-item__content:active,
  .wp-block-navigation.is-style-button-list .wp-block-navigation-item__content:focus {
    color: var(--wp--custom--button--outline--color--text);
  }

[tusharaddweb]

@mkrndmane Thanks for the feedback. You're right—using the CSS variable is cleaner and ensures customizer changes are reflected. Tested with var(--wp-custom--button--outline--color--text) and confirmed it resolves the issue.

[tusharaddweb]

The same Issue I notice on Plugin directory also and I check with above patch so it is working as excepted.

The patch is working fine.

Refer below image :

​https://postimg.cc/PpGTywK9

[softglaze]

Reproduction Report

Reproduced. The trigger is a state combination, not the page reload it appears to be at first.

Environment

• Browser: Chrome 151.0.7922.174 (64-bit)
• OS: Windows 11 Pro N, build 26200
• Display: 200% scaling, devicePixelRatio 2
• Page: ​https://wordpress.org/photos/author/krupajnanda/
• Date: 22 August 2026

Steps taken

1. Opened the author page in Chrome with default settings, no DevTools state forcing at any point in steps 1 to 5.
2. Pressed and held the mouse button on "Contributions", which is the current-menu-item.
3. While still holding, dragged the pointer slightly off the button, then released. Because the release happened off-target, the link did not activate and no navigation or reload occurred. The button kept focus.
4. Moved the pointer back over the button, so it was now focused and hovered, with no mouse button held.
5. 🐞 Bug occurs: the label disappears and the button renders as a solid black rectangle. The focus ring is still drawn. The DOM still contains <span class="wp-block-navigation-item__label">Contributions</span>, so nothing is hidden or removed. The state persists for as long as focus and hover are both present.
6. Measured a lossless PNG of that state. The button interior is 11,772 pixels of exactly rgb(30, 30, 30), a single colour with no antialiasing anywhere. The label is being painted in the same colour as the button rather than not painted at all.

Expected result

• The label should stay legible in every state, including when the button is focused and hovered at the same time.

Additional Notes

The condition is focus and hover together. Each state on its own renders correctly, which is why this is easy to miss.

State	Label
rest	visible
hover only	visible
focus only	visible
focus + active, forced in DevTools	visible
focus + hover, real, nothing forced	invisible

:active does not reproduce it and actually masks it. Forcing :focus and :active together renders the label correctly in white. So testing by pressing and holding the button, which is the natural way to inspect an active state, shows a perfectly readable label. That may account for comment:1.

The long-press-and-drag in step 3 is only a convenient way to reach the state without navigating away. An ordinary click produces the same combination, since the button keeps focus and the pointer is usually still over it afterwards, which is why this can look like it happens during a reload.

On the cause, offered as a reading of the stylesheet rather than an assertion. For a .current-menu-item button, four rules appear to interact:

• .is-style-button-list .current-menu-item .wp-block-navigation-item__content:hover sets --wp--custom--button--outline--hover--color--text to charcoal-1
• .is-style-button-list .wp-block-navigation-item__content:hover, …:focus applies color: var(--wp--custom--button--outline--hover--color--text)
• .is-style-button-list .current-menu-item .wp-block-navigation-item__content sets --wp--custom--button--outline--focus--color--background to charcoal-1
• .is-style-button-list .wp-block-navigation-item__content:focus applies background-color: var(--wp--custom--button--outline--focus--color--background) and appears later in the file

With both states present, text and background would each resolve to charcoal-1, which matches the measured rgb(30, 30, 30). I have not confirmed this from the computed cascade, so please treat it as a hypothesis rather than a diagnosis.

Two notes on the fixes proposed above, from reading the token values on the live page:

--wp-custom--button--outline--color--text in comment:4 does not exist. Only the double-hyphen form --wp--custom--button--outline--color--text resolves. A var() referencing an undefined custom property with no fallback is invalid at computed-value time, so that declaration would apply nothing.

--wp--custom--button--outline--color--text in comment:3 is the rest token, not a state token. On the non-current button it resolves to #1e1e1e, and no state rule reads it, so setting color from it on :active and :focus would not address this.

One separate observation found while checking the tokens. --wp--custom--button--outline--focus--color--text is defined once, on :root, as #ffffff. A walk of all 33 stylesheets and 1,426 rules on this page found no rule anywhere that reads it. If a focus text colour is intended, nothing currently applies it.

Finally, worth flagging for whoever picks this up: the rules involved are in the wporg-parent-2021 parent theme, which is its own repository, and the file I read is a build artifact rather than source. Happy to open a PR against WordPress/wporg-parent-2021 if the team agrees on what the focused-and-hovered state should look like.

Screenshots/Screencast with results

• 8294-label-invisible-focus-plus-hover.png, the failing state after steps 2 to 4. Real focus and real hover, nothing forced, focus ring drawn, label absent, and the same shot shows the label span still present in the DOM.
• 8294-control-focus-plus-active-visible.png, control. Forced :focus plus :active, label visible in white.

[softglaze]

Following up on the design question I raised, and with a wider reproduction.

This is not specific to the Photo Directory. The same behaviour occurs on the Plugin Directory filter buttons at ​https://wordpress.org/plugins/, where the current "All" button renders as a solid black rectangle with the focus ring drawn and no label, under the same conditions: focused and hovered together, :active absent. Screenshot attached. I have seen it on other wporg buttons using this style as well.

That fits, because the rules are in the wporg-parent-2021 parent theme rather than in any one directory, so anything using is-style-button-list with a current-menu-item is affected.

On the cause, it may already be answered in the same file. In sass/blocks/_button.scss, the is-style-toggle style handles the equivalent focused-and-hovered case by overriding --wp--custom--button--outline--focus--color--background inside its &:hover block, so the focus background follows the hover background. The is-style-button-list current-menu-item block sets the hover text but not that override, which is where the two charcoals meet.

If that reading is right, the fix is one line in the &:hover block, and it would cover every site using the parent theme rather than one directory. Happy to open the PR against WordPress/wporg-parent-2021 whenever someone confirms.

• 8294-plugin-directory-all-button-invisible.png, the same failure on ​https://wordpress.org/plugins/, current "All" button, focus ring drawn and label absent.