Setting the :active state on the Navigation 'li' element in theme.json

[ATaylorUK]

Description

I shared this finding on a WordPress group on Facebook and comments suggested I should raise it as a bug.

I am building an FSE WordPress theme from scratch, I am fairly new to building themes and wondering if there is an answer to the below. I can of course override using a CSS stylesheet, but I want to keep much as possible in the theme.json file.

The ":active" pseudo-class isn't working in my theme.json file. The ":hover" class is working within theme.json.

Step-by-step reproduction instructions

See screenshots, using theme.json to control the active state of the navigational 'li' element when building a custom Wordpress theme.

Screenshots, screen recording, code snippet

Environment info

Wordpress: 6.4.2

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[hanneslsm]

In my theme it's working as attended.
You circled "about" in your screenshot, which makes me think that you might confuse :active (which is the state when the mouse button is still hold down) with the current menu item?
Styling the current page is not implemented yet: #42299

[ATaylorUK]

Of course! That makes sense now, my apologies for not recognising that! It is the 'current' that I was looking to achieve within the theme.json file. You're 100% spot on, thank you for correcting me. As the issue has previously been raised, please close my opened ticket. I do have work around in the meantime, targeting the 'current' class on the 'li' element within a CSS stylesheet using a custom variable that I've defined in theme.json. Many thanks!

…

On Sun, 7 Jan 2024 at 00:15, Hannes ***@***.***> wrote: In my theme it's working as attended. You circled "about" in your screenshot, which makes me think that you might confuse :active <https://developer.mozilla.org/en-US/docs/Web/CSS/:active> (which is the state when the mouse button is still hold down) with the current menu item? Styling the current page is not implemented yet: #42299 <#42299> — Reply to this email directly, view it on GitHub <#57625 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BFFCWMSOM2EVLRBMU4UK7NDYNHSL3AVCNFSM6AAAAABBP3XQD6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNZZHA4DQNRWHA> . You are receiving this because you authored the thread.Message ID: ***@***.***>