Site Editor: can't access the Patterns editor in mobile layout

[t-hamano]

Description

According to git bisect, this issue was introduced in #67199

When you access the Patterns page in the site editor in the mobile layout, you can see the Template Parts and Patterns categories, but when you click on these categories, an error is logged in the browser console and nothing happens:

Uncaught TypeError: navigate is not a function at handleClick (index.js:48:4)

router.tsx:132 Uncaught (in promise) SyntaxError: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty. at router.tsx:132:40

Actual	Expected

cc @youknowriad @tyxla @jsnajdr

Step-by-step reproduction instructions

N/A

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[ramonjd]

For the navigate function, it's not in the context because areas.mobile isn't rendered inside <SidebarContent />, which renders the SidebarNavigationContext.Provider.

gutenberg/packages/edit-site/src/components/layout/index.js

Line 160 in 6ef2f24

{ areas.mobile }

But for edit mode, areas.mobile would still need to be rendered outside I think.

[ramonjd]

I'm not sure if what I've done here is right: #67505

But here's the result:

Kapture.2024-12-03.at.12.05.56.mp4

[t-hamano]

@ramonjd Thanks for working on this issue!

Thanks for working on this issue!

It seems that a simpler solution has been submitted, #67467. That PR correctly restores the previous behavior and shows the all pattern list when accessing the Patterns screen in the Design screen.

However, I realized that this approach might not be ideal for mobile layouts because template parts are not accessible. It seems that this issue has been there for a while.

The correct behavior would probably be to show template parts and pattern categories instead of all patterns when accessing the Patterns screen in the Design screen, as attempted in #67505.

With that in mind, I'm thinking it might be better to merge #67467 first and then move on to #67505. What do you think?

[ramonjd]

It seems that a simpler solution has been submitted, #67467. That PR correctly restores the previous behavior and shows the all pattern list when accessing the Patterns screen in the Design screen.

I know I should look before I start working, but I never remember 😆

With that in mind, I'm thinking it might be better to merge #67467 first

Sounds good! Thank you 🙇🏻

[ramonjd]

Templates have the same issue:

PR here: #67547

I just followed the approach in #67467 for now.

[ramonjd]

The correct behavior would probably be to show template parts and pattern categories instead of all patterns when accessing the Patterns screen in the Design screen

I'll clean up #67505 for consideration. The templates route bug fix has a separate PR #67547 since it's a bug not an enhancement.

Thank you!

[ramonjd]

However, I realized that this approach might not be ideal for mobile layouts because template parts are not accessible. It seems that this issue has been there for a while.

Actually, am I missing something? I can see the template parts in "All patterns" in mobile.

Kapture.2024-12-04.at.11.45.25.mp4

It takes a bit of typing and/or clicking though 😄

[t-hamano]

@ramonjd In TT5, each pattern and template part has a header and footer 😅 On the "All patterns" page, you can search for headers/footers as patterns.

[ramonjd]

In TT5, each pattern and template part has a header and footer 😅 On the "All patterns" page, you can search for headers/footers as patterns.

That'd be it 😄

[ramonjd]

While I was there I noticed some weird stuff with the styles panel in mobile view and edit mode. Proposed fix here:

• Edit site: remove empty preview border and redirect to editor in global styles navigation #67548