Get Started

Components - RichText

Last modified:

The RichText component allows rendering an editable input inside the editor and a static HTML Element in the frontend. It is based on the RichText component WordPress provides.

Basic usage

To use RichText in its most basic form, you need to add the appropriate attribute to your block.json and add the RichText component to your block and.

block.json 

                {
      "$schema": "https://app.blockstudio.dev/schema",
      "name": "blockstudio/rich-text",
      "title": "Native Block",
      "category": "text",
      "icon": "star-filled",
      "description": "Native Blockstudio RichText block.",
      "blockstudio": {
        "attributes": [
          {
            "id": "myRichText",
            "type": "richtext",
          }
        ]
      }
    }

        
Copy
index.php 

                <RichText attribute="myRichText" />
Copy

You can use an unlimited number of RichText components in your block.

Properties

tag

By default, the RichText content is rendered inside a p element. You can change this by using the tag prop.

index.php 

                <RichText attribute="myRichText" tag="h1" />
Copy

placeholder

You can set a placeholder for the RichText component by using the placeholder prop.

index.php 

                <RichText attribute="myRichText" placeholder="Enter some text" />
Copy

allowedFormats

You can limit the formats that can be used in the RichText component by using the allowedFormats prop.

index.php 

                <RichText attribute="myRichText" allowedFormats="<?php echo esc_attr(wp_json_encode(['core/bold', 'core/italic'])); ?>" />
Copy
index.twig 

                <RichText attribute="myRichText" allowedFormats="{{ ['core/bold', 'core/italic']|json_encode|escape('html_attr') }}" />
Copy

multiline

By default, a line break is added when the user presses the Enter key. If the editable field can contain multiple paragraphs, you can use the multiline prop to enable this.

index.php 

                <RichText attribute="myRichText" multiline="true" />
Copy

withoutInteractiveFormatting

By default, all formatting controls are present. This setting can be used to remove formatting controls that would make content interactive.

index.php 

                <RichText attribute="myRichText" withoutInteractiveFormatting="true" />
Copy

preserveWhiteSpace

Whether to preserve white space characters in the value. Normally tab, newline and space characters are collapsed to a single space. If turned on, soft line breaks will be saved as newline characters, not as line break elements.

index.php 

                <RichText attribute="myRichText" preserveWhiteSpace="true" />
Copy
Search