Dashboard 'Edit styles' link doesn't work

[talldan]

Description

A new user switching to 5.9 will see an 'Edit styles' link on the dashboard encouraging users to check out the new styles feature.

Unfortunately it doesn't work as expected on small / medium sized viewports (phone / tablet). The intention is to launch the site editor with the Styles panel open and welcome guide visible. In testing, the sidebar is only open for a flicker of a moment, before being closed automatically by some responsive logic. The welcome guide also opens but is closed in a flicker, and this means it won't be shown again.

edit: since more recent changes in the Gutenberg plugin, the link doesn't work at all on any screen size. I think these changes will also land in 6.0.

Step-by-step reproduction instructions

1. Clear local storage (specifically the WP_DATA_USER entries)
2. Resize your browser to be 782 pixels or narrower
3. From the Dashboard, click the 'Edit styles' link in the 5.9 banner

Expect: The site editor opens with the styles panel open and a welcome guide visible
Actual: Both the styles panel and welcome guide aren't visible

1. From the dashboard click 'Edit styles'
2. Observe that the style sidebar isn't open when the site editor loads.

Screenshots, screen recording, code snippet

Environment info

Observed while testing 5.9 RC4 backports - WordPress/wordpress-develop#2220
Mac OS / Brave
Gutenberg deactivated

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

[Andrew-Starr]

I have the same issue regardless of the viewport size, even on a large screen with browser full-width.

As above the welcome guide flickers visible for a very brief moment and then disappears, and the styles panel is closed.

The URL does have ?styles=open appended, so could there be an issue with this?

[talldan]

The URL does have ?styles=open appended, so could there be an issue with this?

@Andrew-Starr That's the thing that makes the styles panel open, but it does seem like something then causes it to close.

What width is your browser window when you experience it? (also, which browser / OS?)

[Andrew-Starr]

OS: windows 11
Browser: firefox and chrome
browser window is same issue regardless, whether it's 480, 1920 or 3840px

[Andrew-Starr]

This is the logged WP_DATA_USER local storage data

{"core/edit-site":{"preferences":{"features":{"welcomeGuide":false,"welcomeGuideStyles":true}}}}

[Andrew-Starr]

Apologies, tested again in a fresh install and it is working now on larger screens.

I can see the issue only on smaller browser widths where there appears to be some strange issue only on those narrower viewports.

Please disregard what I said previously.

[talldan]

Thanks for re-testing!

[Andrew-Starr]

So testing again on a fresh install with core 5.9 and no Gutenberg or other plugins, and all local storage emptied.

Without ?styles=open the site editor loads with a very brief flicker of the welcome guide which then disappears.
Local storage is then set as:
{"core/interface":{"enableItems":{"singleEnableItems":{"complementaryArea":{"core/edit-site":"edit-site/global-styles"}},"multipleEnableItems":{}},"preferences":{"features":{}}},"core/edit-site":{"preferences":{"features":{"welcomeGuide":false,"welcomeGuideStyles":false}}},"core/block-editor":{"preferences":{"insertUsage":{"core/group":{"time":1643190199207,"count":1,"insert":{"name":"core/group"}},"core/group/group-row":{"time":1643190200154,"count":1,"insert":{"name":"core/group/group-row"}}}}}}

With ?styles=open the editor loads with the the styles panel open correctly, but the "welcome to editor styles" welcome guide appears very briefly and then disappears.
Local storage is then set as:
{"core/edit-site":{"preferences":{"features":{"welcomeGuide":false,"welcomeGuideStyles":true}}},"core/block-editor":{"preferences":{"insertUsage":{"core/group":{"time":1643190309589,"count":1,"insert":{"name":"core/group"}},"core/group/group-row":{"time":1643190310730,"count":1,"insert":{"name":"core/group/group-row"}}}}}}

Same behaviour regardless of the browser viewport size. Small screen or large are same issue.

[talldan]

Adding this to the 6.0 project board as it was something that was never solved on the 5.9 board.

[talldan]

It seems like ?styles=open is now stripped from the URL when opening the site editor, so it definitely won't display when following the dashboard link.

[talldan]

Given the dashboard will probably be redesigned for 6.0, I wonder if it'd be better to remove the Edit styles link. It's quite late in the release cycle to fix all the issues (I think there are two or three simultaneous bugs happening that prevent this from working).

[ndiego]

@talldan this is now on the 6.0.1 Project Board. I think we should try and tackle this once and for all in 6.0.1, it's just getting a bit too late for 6.0. Are you ok with that?

[talldan]

@ndiego Yep, agreed 👍

[Mamaduka]

Related: https://core.trac.wordpress.org/ticket/55752

[talldan]

This does seem to almost work again now, though it opens the browse mode styles panel that only has variations.

I think the text on the dashboard isn't quite right as it says "Switch up your site’s look & feel with Styles. Tweak your site, or give it a whole new look! Get creative — how about a new color palette or font?", there isn't that much functionality in this now linked panel, though I believe there are plans to add more, so I think I'll close this.