HTML tags in Textarea field

[StreetDog71]

Maybe I'm missing something really obvious here, but I haven't found a way to do this with Gutenberg components without some workarounds.

I'm using a textarea field in a custom block, and I'd like to split the text into paragraphs. I can add some spaces between the text lines, but those spaces are stripped out on the block output.

As a workaround, I've used a richtext component with multiline set to "p". Since I'm using this field on the block sidebar, it shows up a bit weird, without a label or a border. I added the label manually and the border on the editor.scss, and it looks ok.

I'm wondering if there's an easier way to achieve this.

Thanks!

[t-hamano]

Hi @MindProcess-WebDev,

Why would you want to type multi-line paragraphs in the sidebar? If you want to use the input text as the block content, it is better to develop it as an inner block that can only insert paragraph blocks.

Additionally, the RichText component's multiline prop is deprecated.

[StreetDog71]

I can think of a lot of situations where I need multi-line paragraphs in the sidebar. When working with large blocks of text, it's very common for a user to need spaces between text sections.

Imagine you're building a timeline block, where you have a text field for the title and a textarea field for the description of the event. Sometimes you need to add some space between the description text.

[t-hamano]

In that case, I think it's better to enter the content in the block itself instead of in the sidebar. Specifically, it is a block with a RichText component for entering a title and InnerBlocks for entering a description. The blocks that can be inserted into InnerBlocks can be controlled by the allowedBlocks prop. I think it's much easier than trying to somehow put spaces between text.

The Details block should be close to its implementation.

[StreetDog71]

I've used InnerBlocks on several custom blocks, and I agree it's a great option. But, in this specific case it's not.

I'm building a dynamic block that shows different information, depending on where it's displayed on the frontend. For each option I need a title and a description. It's impossible to add the description to the block itself, because the dynamic options don't show on the editor, and it would be a mess if they would.

How hard would it be to make the textarea automatically create
or

tags? The ACF textarea field does this, and it's really useful.

[t-hamano]

If so, I think it's up to you to decide what kind of UI you want to provide. You might be able to split the text at line breaks within the text area and wrap each one in a p tag. Alternatively, you could consider a UI that allows you to add, delete, or rearrange a single text field.

If you want to use the UI provided by Gutenberg, you may want to check out Storybook.

[StreetDog71]

Hello again.

I was able to make it work with the textarea field, by using wpautop when outputting the variable on the frontend.
Thanks to @s3rgiosan, from 10up, for the quick fix and for being a life saver when it comes to block related stuff!

Thanks for your help.