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