Components – RichText

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.

            {
      "$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

            <RichText attribute="myRichText" /> or
    <RichText attribute="myRichText"/>
Copy

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

Properties

allowedFormats

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

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

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

placeholder

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

            <RichText attribute="myRichText" placeholder="Enter some text" />
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.

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

tag

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

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

withoutInteractiveFormatting

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

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