RichText: add withoutInteractiveFormatting prop

[ellatrix]

Description

Fixes #15212 (comment).
Fixes #14528.
Fixes #15858.

Adds a withoutInteractiveFormatting prop to RichText. We currently have a use case where we'd like to remove the link button (and any other interactive elements) from blocks such as button, file, and search, as it would create invalid HTML.

Also deprecates formattingControls and introduces allowedFormats (similar to allowedBlocks). Example: [ 'core/bold' ].

How has this been tested?

Screenshots

Types of changes

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[noisysocks]

Flipping this API makes total sense to me! 👍

I think we need to make the new prop more backwards compatible. Other than that, this is great.

I'm not sure if there's a way to make it fully backwards compatible.

[ellatrix]

@chrisvanpatten Sure, it makes sense to allow it if you know what you're doing. I'll add something like allowedFormats (just like allowedBlocks) where you can fine tune the controls. I'll deprecate formattingControls and make it backwards compatible (even though it's been a bit broken for a while).

[chrisvanpatten]

@chrisvanpatten Sure, it makes sense to allow it if you know what you're doing. I'll add something like allowedFormats (just like allowedBlocks) where you can fine tune the controls. I'll deprecate formattingControls and make it backwards compatible (even though it's been a bit broken for a while).

@ellatrix you da best! That would be amaaaaazing. Thank you!!!

[ellatrix]

@chrisvanpatten @epiqueras I added a allowedFormats prop now. This would also remove the dropdown if there's no formats.

[ellatrix]

We will also need this PR for footnotes. The footnotes format will be disabled in instances that enabled withoutInteractiveFormatting (e.g. button block).

[ellatrix]

@mcsf Might be useful for you title block. :)

[obenland]

Got here through the "Good First Review" label and thought it was added by accident or a long time ago, given the size of this PR. My bad, I put it back :)

[noisysocks]

Looks great, and I like this API! 👍

We ought to add a note to block-editor/CHANGELOG.md which describes this change.

While testing this I noticed a bug where, in the Search block, if you move focus from the label field to the placeholder field, the formatting controls don't go away. This bug exists on master, though, so not a blocker.

[noisysocks]

Unless there's a specific version that we're planning to remove this, I think it's best to omit the version option.

Suggested change

version: 'the future',

[ellatrix]

I did what the docs recommended:

gutenberg/packages/deprecated/src/index.js

Lines 29 to 34 in f7d90b9

	* deprecated( 'Eating meat', {
	* version: 'the future',
	* alternative: 'vegetables',
	* plugin: 'the earth',
	* hint: 'You may find it beneficial to transition gradually.',
	* } );

[noisysocks]

This if isn't necessary if we move the deprecated() call to be after the if ( allowedFormats ) { ... } below.

[ellatrix]

What if you use both?

[ellatrix]

While testing this I noticed a bug where, in the Search block, if you move focus from the label field to the placeholder field, the formatting controls don't go away. This bug exists on master, though, so not a blocker.

That only happens when switching between a RichText instance and input or textarea, right? I know that this happens, we keep some selection state to work around losing it when you press a button outside the editable area. I'll try to fix it at some point.

[youknowriad]

Does this fix #12439 too?

[ktmn]

Also deprecates formattingControls and introduces allowedFormats

I've been using formattingControls={[]} to hide the controls from certain RichText's, but it's still possible for advanced users to Ctrl + I to make something italic or Ctrl + K to add a link inline, or use a third party format (if it has a hotkey) etc.

With the allowedFormats prop I can't do that and the toolbar is cluttered with the format controls which aren't really needed 99% of the time but I'd like to have available.

For example, I have a custom button block that already uses bold text. I don't really want to display the Bold format on the toolbar, so I should disallow it? For that I have to add every single other format to allowedFormats? What about third party formats?
But wait, the theme allows to customize whether the button uses bold text or not. Now I should make allowing of that format dynamic? I'd rather it just be available under Ctrl + B but not be cluttering up the toolbar.

I'd like to allow all formats, but just hide the controls. Maybe only keep the (More )Rich Text Controls button on the toolbar and nothing else:

Could there be a withoutFormattingControls prop or compactFormattingControls or something like that?

---

We currently have a use case where we'd like to remove the link button (and any other interactive elements) from blocks such as button, file, and search, as it would create invalid HTML.

Then why add a whitelist prop and not a blacklist prop? Doesn't this lock out 3rd party formats that may or may not have worked and been useful?

[talldan]

@ktmn I'd recommend either commenting on an existing open issue that is on the same topic or creating a new issue (if there isn't one already).

It's really easy to miss comments on already merged PRs.