Framework gutenberg playground, BlockTools cursor issue.

[youknowriad]

Discussed in #57138

^{Originally posted by kohheepeace December 17, 2023}
@youknowriad

Assumption

I have started a gutenberg project for framework(standalone) with the following referenced Links. In doing so, I encountered a problem, so I would like to ask a question.

📍 stackblitz URL
https://stackblitz.com/edit/stackblitz-starters-papfri

Referenced links to setup project

• https://github.com/WordPress/gutenberg/blob/trunk/storybook/stories/playground/fullpage/index.js
• platform docs#intro "Bootstrap your block editor"

Problems

As shown in the following video, it takes two clicks to edit paragraph.

The first click places the focus on the BlockTools button, and the second click makes it editable.

2023-12-17.23.31.14.mp4

[youknowriad]

cc @ellatrix maybe you have a quick idea about why the toolbar is stealing the focus on the implementation above.

[costasovo]

I'm experiencing the same issue on a standalone editor after updating to tag wp-6.4.
On the first click on the block, it and the toolbar are focused, but I can’t type, and the toolbar is missing inline format tools. On the second click, I can type in rich text, and format tools are displayed.
I tried to debug the issue and I found that on the first click useSlotFills (#) for "BlockFormatControls" returns an empty array, but on the second click it returns an array with one item.

[costasovo]

I found that, in my case, the issue is present only when StrictMode is enabled. When I compile the code for production or remove the <StrictMode> wrap, BlockTools works as expected. So this might be related to how StrictMode reruns useEffects or additionally re-render components.

[youknowriad]

Also @jeryj maybe you have an idea about this.

[jeryj]

I thought the issue would be from focusOnMount in the <NavigableToolbar /> running when it shouldn't, so I removed the <NavigableToolbar /> to debug. The toolbar was still getting focused though...

I ended up removing pieces of the toolbar until it wasn't stealing focus. That led me to this code that focuses the toolbar when the block lock modal is closed. Commenting out that useEffect from #51666 fixes this focus-stealing on mount when using <StrictMode />. I haven't looked into the specifics of why that was added, so I'm not sure what to do to fix it.

Unrelated Note: In the StackBlitz demo, I believe the <BlockTools /> should not be wrapping <BlockCanvas />, as <BlockTools /> is included within <BlockCanvas /> already.

[jeryj]

Also, thank you @costasovo for figuring out the <StrictMode /> piece of it! That was hugely helpful for debugging this.

[kohheepeace]

Unrelated Note: In the StackBlitz demo, I believe the <BlockTools /> should not be wrapping <BlockCanvas />, as <BlockTools /> is included within <BlockCanvas /> already.

Yes! that was my mistake 😢 I fixed it in stackblitz! Thanks!

Before	After
<BlockTools className="playground__content"> <BlockCanvas height="100%" styles={editorStyles} /> </BlockTools>	<div className="playground__content"> <BlockCanvas height="100%" styles={editorStyles} /> </div>

[jeryj]

This should be fixed by #57185