How to use inline html for RichText component

  • I created a Gutenberg block with RichText however html input not working.

    This is the code i am using :

    attributes:

    
description: {
    type: 'string',
    source: 'html',
    default: '',
}

    edit(); 

    
<RichText
    tagName={ "p" }
    placeholder={ __( "Write a Description" ) }
    value={ description }
    multiline={ false }
    onChange={ onChangeDescription }
/>

    save() :

    
<RichText.Content tagName="p" value={ description } />

    Here if i enter content like below in editor.

    
Multi platform <span class="text-warning">accessible</span>

    This will display raw html(Multi platform <span class=”text-warning”>accessible</span>) in frontend instead of “Multi platform accessible”.

    How can i fix this ?

Viewing 1 replies (of 1 total)

  • Hi @farooktransvelo

    If you’re typing HTML tags into a RichText block while it’s in visual mode, you’ll always get the raw HTML tag markup in your output, because it converts the tag characters to HTML entities. You’d need to click the block option to Edit As HTML first.

    If you’re wanting to be able to apply a span with a specific class to an arbitrary string of content, you might check out registering a custom format button instead of creating a whole custom block. There are quite a few tutorials out there on how to do this, but here’s one that looks fairly comprehensive:

    https://jeffreycarandang.com/how-to-create-custom-text-formats-for-gutenberg-block-editor/

    Does this help?

Viewing 1 replies (of 1 total)
  • The topic ‘How to use inline html for RichText component’ is closed to new replies.