Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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 #63097

Open
dmitrijCraq opened this issue Jul 3, 2024 · 8 comments
Labels
[Package] Rich text /packages/rich-text [Status] Needs More Info Follow-up required in order to be actionable. [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed. [Type] Enhancement A suggestion for improvement.

Comments

@dmitrijCraq
Copy link

dmitrijCraq commented Jul 3, 2024

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.

@dmitrijCraq dmitrijCraq added the [Type] Enhancement A suggestion for improvement. label Jul 3, 2024
@Mamaduka Mamaduka added the [Package] Rich text /packages/rich-text label Jul 3, 2024
@Mamaduka
Copy link
Member

Mamaduka commented Jul 3, 2024

Do you see any errors when using RichText in InspectorControls?

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

@dmitrijCraq
Copy link
Author

dmitrijCraq commented Jul 3, 2024

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
Copy link
Member

Mamaduka commented Jul 3, 2024

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

@Mamaduka Mamaduka added the [Status] Needs More Info Follow-up required in order to be actionable. label Jul 3, 2024
@bph
Copy link
Contributor

bph commented Jul 5, 2024

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:

Copy link

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.

@github-actions github-actions bot added the [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed. label Jul 21, 2024
@giannis-koulouris-bb
Copy link

giannis-koulouris-bb commented Oct 2, 2024

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
Copy link
Author

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 github-actions bot removed the [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed. label Oct 3, 2024
Copy link

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.

@github-actions github-actions bot added the [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed. label Oct 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Rich text /packages/rich-text [Status] Needs More Info Follow-up required in order to be actionable. [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

4 participants