Toolbar showing for TextControl when RichText is not selected

[grappler]

Follow the test method descriped in Issue #16651 as the test case involved a core block.

---

I have created a block with both TextControl and RichText.

When I select the RichText I get the toolbar but the toolbar does not disappear when the TextControl is selected. I have tested this with Gutenberg 3.1

Here is a screenshot of the block with the TextControl and RichText.

I have created a example plugin where this can be tested: grappler-block.zip

The code it the edit is

<div className={ className }>
	<TextControl
		label={ __( 'TextControl' ) }
		value={ attributes.textControl || '' }
		type="text"
		onChange={ ( newValue ) => {
			setAttributes( { textControl: newValue } );
		} }
	/>

	<RichText
		multiline="li"
		tagName="ul"
		formattingControls={ [ 'bold', 'link' ] }
		value={ attributes.richText }
		placeholder={ __( 'RichText' ) }
		onChange={ ( content ) => setAttributes( { richText: content } ) }
	/>
</div>

This was previously working with a custom onFocus.

Related PRs #7029 & #6871

[gziolo]

Thanks for reporting. So as you noticed, we tried to automate also unfocusing RichText in #6871 to make sure that those controls get removed when other element/component gets focus. The idea is to have your code as simple as possible, but let Gutenberg handle everything else.

There is also a different but related issue to this one:

When transforming blocks with RichText from one type to another (e.g. Quote to Paragraph), immediately after the transformation, only alignment buttons are visible in the toolbar but not rich-text buttons, until I place the caret.

We just need to better understand what would be the best way to tackle all those flows plugin developers would like to have.

[gziolo]

I can confirm, it's still an issue.

[jorgefilipecosta]

With Gutenberg 5.8 and the last version of WordPress, the problem is still happening.

[talldan]

Just discovered this, closing my duplicate - #16651

This is very easily tested in the Search block, which has a RichText and a TextArea.

[adamziel]

The root cause is that unless isSelected prop is provided, the <RichText /> component uses useBlockEditContext().isSelected to determine whether or not it should display the format toolbar:

gutenberg/packages/block-editor/src/components/rich-text/index.js

Lines 137 to 141 in 0446ed1

	const {
	clientId,
	onCaretVerticalPositionChange,
	isSelected: blockIsSelected,
	} = useBlockEditContext();

gutenberg/packages/block-editor/src/components/rich-text/index.js

Lines 548 to 553 in 0446ed1

	{ nestedIsSelected && hasFormats && (
	<FormatToolbarContainer
	inline={ inlineToolbar }
	anchorRef={ ref.current }
	/>
	) }

When you select the rich text first, and then switch to the input, the block remains selected so the buttons don't disappear. I looked up why is it not an issue in e.g. the image block where the caption is also RichText, and there's some custom code in place to override the value of isSelected:

gutenberg/packages/block-library/src/image/edit.js

Lines 686 to 696 in 0446ed1

	<RichText
	tagName="figcaption"
	placeholder={ __( 'Write caption…' ) }
	value={ caption }
	unstableOnFocus={ this.onFocusCaption }
	onChange={ ( value ) =>
	setAttributes( { caption: value } )
	}
	isSelected={ this.state.captionFocused }
	inlineToolbar
	/>

One idea would be to check focus instead (or in addition to isSelected).

[adamziel]

A quick experiment confirms it would work:

An experimental branch available here:

#21818

It's not clean mergable code and requires some more care (like analyzing why onFocus is exposed as unstableOnFocus - this is a potential show stopper). I only played with it during the triage session so please feel free to take over and roll out a proper PR.

[paaljoachim]

Can we get an update from someone on this issue?
Thank you!

@talldan

[talldan]

@paaljoachim Have you tested to see if it's still an issue?

[grappler]

@talldan I have tested it again with WordPress 5.6 and Gutenberg 10.0 snd can confirm this is still an issue.

[talldan]

Thanks @grappler.

[glendaviesnz]

@grappler, this seems to be resolved in 5.8 with Gutenberg plugin 11.3.0:

[grappler]

Tested with WordPress 5.8 and it works as expected. Closing...