Create a component that provides the same functionalities of RichText component so that it can be used in the Inspector Control or in Gutenberg settings plugin

[dmitrijCraq]

What problem does this address?

As a WordPress developer I'm using Gutenberg plugins to make the editor handle post meta management. Sometimes the post meta to edit are so many that I prefer to put them in a modal. A lot of times I need to edit a post meta of type string that should contain some rich text formatting like "core/link", "core/bold" and "core/italic", now there is no component except for the RichText able to do such things. The problem is that the RichText can only be used in the block editor area.

What is your proposed solution?

Since the RichText implementation is totally dependent on the presence of the block in which is used, I propose to create a new component able to do that independently of its position in the editor.

[Mamaduka]

Do you see any errors when using RichText in InspectorControls?

I found a related issue, which seems to be resolved - #9203.

[dmitrijCraq]

Hi @Mamaduka, in case the RichText is used inside a Gutenberg plugin, which functionalities are provided by the npm package @wordpress/plugins, it does not work at all since inspecting the RichText source code it works well only if the component is rendered inside a block edit function. The issue #9203 does not solve the problem.

In the case of Gutenberg plugins, my goal is to have the ability to manipulate a post meta of type string so that it can contain basic HTML. It would be nice to have a control like RichText that provides this capability out of the block scope, making the management of post meta much more flexible, especially when they are displayed on the front end. I hope I explained myself well. At the moment this is not possible in a nice way, you need a TextAreaControl and you have to write the HTML directly and in my opinion it is not user friendly. Another possibility is to use Advanced Custom Fields plugin that provides the WYSIWYG control however this is not the way to go since I strongly believe in the Gutenberg project.

[Mamaduka]

Can you share an minimal example code to reproduce the issue?

[bph]

It might not fit into a overal modal concept, you try to accomplish. You might want to look into Block Bindings for post/meta data, as you can bind a paragraph block directly to a post meta field and have all the formatting controls available from the core block. With WordPress 6.6, User can now update the paragraph and post meta field.

The Developer Blog also has two articles that go a little deeper on this topic:

• Building a book review site with Block Bindings, part 1: Custom fields and block variations
• Building a book review site with Block Bindings, part 2: Queries, patterns, and templates

[github-actions[bot]]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

[giannis-koulouris-bb]

I also have the same issue, many times I need to extend core blocks, or add a setting to a custom block that stores richtext/html on block attribute.

For example, in a recent project I needed to create tooltip functionality for core/list-item block. I extended the block, added the correct attributes, and I would like to have ability to show a RichText component on the sidebar, or even inside a modal, where user will be able to add the content for the tooltip.

<BlockEdit {...props} />
<InspectorControls>
    <PanelBody title="Tooltip text" initialOpen={true}>
        <TextareaControl
            label="Tooltip text"
            value={tooltipText}
            onChange={(tooltipText) => setAttributes({ tooltipText })}
        />
    </PanelBody>
</InspectorControls>

As you can see right now I'm forced to use the TextareaControl because richText doesn't work correctly inside the InspectorControls, so we are limited on adding plain text.

[dmitrijCraq]

Hi @giannis-koulouris-bb thank you for your feedaback. I'd like to have something like the RIchText for the allowedFormat property that makes easier for the editor to insert text with a particular formatting like core/bold etc... I'm already using your approach at the moment because I have no alternative.

The problem I am trying to solve is not how to edit the text of a Gutenberg block, but how to edit string-type post meta that contains HTML code within a Gutenberg js plugin.

[github-actions[bot]]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.