Editing Toolkit: unable to select anything in layout selection modal when adding a new page with Gutenberg inactive

[liviopv]

Quick summary

When Editing Toolkit is active, but Gutenberg is not, the modal to select a modal when adding a new page doesn't work.

https://github.com/Automattic/wp-calypso/assets/14153300/a8f82d19-a281-420f-94fd-c1f855842f99

(Thanks for the video, @wensco)

Several console errors:

Steps to reproduce

1. Activate the WordPress.com Editing Toolkit plugin
2. Deactivate Gutenberg 16.2.1
3. Add a new page
4. Try to select any layout or click on "X"

What you expected to happen

Clicking on the modal options should select the desired layout

What actually happened

Nothing happens when you click on different options in the modal

Impact

Some (< 50%)

Available workarounds?

No and the platform is unusable

Platform (Simple and/or Atomic)

Atomic

Logs or notes

Tested on Chrome on Mac OS Ventura WordPress.com Editing Toolkit 3.72307 Gutenberg 16.2.1

[dpasque]

Taking a look at this, been unable to reproduce so far -- do you have any more details, like theme perhaps?

Worth noting on the errors: the unstable API one is one I haven't seen in the editor recently, but all those other errors are (unfortunately) the normal chatter right now on Atomic sites and probably aren't indicative of the underlying issue/

[dpasque]

Found the relevant error in the console!

Uncaught TypeError: r is not a function
    at Object.onClose (starter-page-templates.min.js?ver=1685618378:6:2082)
    at b.setPattern (starter-page-templates.min.js?ver=1685618378:6:3677)
    at onClick (starter-page-templates.min.js?ver=1685618378:6:7036)
    at Object.Xa (react-dom.min.js?ver=18.2.0:10:105903)
    at B (react-dom.min.js?ver=18.2.0:10:10501)
    at react-dom.min.js?ver=18.2.0:10:23221
    at $e (react-dom.min.js?ver=18.2.0:10:23315)
    at qe (react-dom.min.js?ver=18.2.0:10:23729)
    at react-dom.min.js?ver=18.2.0:10:29090
    at fl (react-dom.min.js?ver=18.2.0:10:85874)
(anonymous) @ starter-page-templates.min.js?ver=1685618378:6
(anonymous) @ starter-page-templates.min.js?ver=1685618378:6
onClick @ starter-page-templates.min.js?ver=1685618378:6
Xa @ react-dom.min.js?ver=18.2.0:10
B @ react-dom.min.js?ver=18.2.0:10
(anonymous) @ react-dom.min.js?ver=18.2.0:10
$e @ react-dom.min.js?ver=18.2.0:10
qe @ react-dom.min.js?ver=18.2.0:10
(anonymous) @ react-dom.min.js?ver=18.2.0:10
fl @ react-dom.min.js?ver=18.2.0:10
V @ react-dom.min.js?ver=18.2.0:10
Ze @ react-dom.min.js?ver=18.2.0:10
de @ react-dom.min.js?ver=18.2.0:10
ce @ react-dom.min.js?ver=18.2.0:10

[dpasque]

Okay, this is the line that is throwing: https://github.com/Automattic/wp-calypso/blob/trunk/apps/editing-toolkit/editing-toolkit-plugin/starter-page-templates/page-patterns-plugin.tsx#L110 It's saying setUsedPageOrPatternsModal() isn't a function, which is weird... That action creator seems to have been around for a while

[dpasque]

Escalation thread: p1689775247526229-slack-C02FMH4G8

[Gustavo-Hilario]

Another report here: 6554283-zen

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 6554283-zen

[cuemarie]

FYI - Troubleshooting and discussion is in progress in the escalation thread, here: p1689775247526229-slack-C02FMH4G8

📌 ACTIONS

• Assigned to Other

[cuemarie]

📌 ACTIONS

• Due to the age of this issue, KitKat has downgraded the priority from Blocker to High to better reflect it's impact/status in the larger landscape of open bugs.
• here's where the discussion left off back in July: p1689972803879329/1689775247.526229-slack-C02FMH4G8

[taipeicoder]

I was not able to reproduce this issue with Editing Toolkit 4.10070 Gutenberg 17.4.1

@liviopv @cuemarie could you reproduce?

[cuemarie]

Hey @taipeicoder !

I was not able to reproduce this issue with Editing Toolkit 4.10070 Gutenberg 17.4.1

The issue occurs when Gutenberg is inactive – just to check, did you test with that arrangement?

I retested today with Editing Toolkit 4.10732 and Gutenberg inactive, and when I click "Add New Page", I no longer get stuck at the page pattern modal, as that isn't able to load. Instead, I land on the page editor with a warning that the patterns can't load:

The "page-patterns" plugin has encountered an error and cannot be rendered.

This seems to be an improvement, though ideally we could use that warning to tell users to activate Gutenberg again, and that would empower them to resolve the issue without asking for support – but at least they're not stuck with this approach!

[liviopv]

Might be related https://github.com/Automattic/wp-calypso/issues/83654

[candy02058912]

I was not able to reproduce the issue, the versions are in the video recording:

https://github.com/Automattic/wp-calypso/assets/6586048/267c20ae-1070-4487-ad52-3a86748a6cdb

[!NOTE]
I noticed that the page automatically refreshes when loading the templates in the Create new page screen, which is a different issue.

As part of pb5gDS-3YO-p2, we're aiming to fix/close high-priority issues in The One Board, @taipeicoder @Automattic/lego can you close this issue since it looks fixed to me?

[taipeicoder]

@candy02058912 I tried it again and could not reproduce the issue. Using Gutenberg 18.7.1 and ETK 4.27750 for reference. And did not observe the warning message either.

Closing this issue since the original problem is no longer reproducible.