Components - RichText

Last modified: April 13 2024.

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.

RichText is currently not working inside repeater fields.

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.

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" /> 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.

index.php

index.twig

              <div x-bind="content" data-index="1">
      <!--blockstudio/blockstudio-element/code--><pre class="blockstudio-element-code language-php" data-language="php"><code>
      &lt;RichText attribute="myRichText" allowedFormats="&lt;?php echo esc_attr(wp_json_encode(['core/bold', 'core/italic'])); ?&gt;" /&gt;</code><div role="button" class="blockstudio-element-code__copy"><span class="blockstudio-element-code__copy-text">Copy</span><span class="blockstudio-element-code__copy-check"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path></svg></span></div></pre>

  </div>
      <div x-bind="content" data-index="2">
      <!--blockstudio/blockstudio-element/code--><pre class="blockstudio-element-code language-twig" data-language="twig"><code>
      &lt;RichText attribute="myRichText" allowedFormats="{{ ['core/bold', 'core/italic']|json_encode|escape('html_attr') }}" /&gt;</code><div role="button" class="blockstudio-element-code__copy"><span class="blockstudio-element-code__copy-text">Copy</span><span class="blockstudio-element-code__copy-check"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path></svg></span></div></pre>

  </div>
  </div>

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

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

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

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