RICH TEXT EXAMPLE HOW TO
RICH TEXT EXAMPLE UPDATE
RICH TEXT EXAMPLE CODE

See the JavaScript tutorial for how to load JavaScript in WordPress. To apply, you would need to enqueue the above script in your plugin or theme. For example to disable inline images, use: wp.richText.unregisterFormatType( 'core/image' ) If you just want to disable a format from the editor, you can use the unregisterFormatType function. The RichText component uses formats to display inline elements, for example images within the paragraph block. Top ↑ Disable Specific Format Types in Editor

If you want to limit the formats allowed, you can specify using allowedFormats property in your code, see the example above or the component documentation for details. If you’d still like to use RichText, you can eliminate all of the formatting options by specifying the withoutInteractiveFormatting property. Would it be better to use a basic input or textarea element? If you don’t think any formatting should be possible, these HTML tags may make more sense. Top ↑ Unwanted Formatting Options Still Displayīefore moving forward, consider if using the RichText component makes sense at all. Search: RichText is used in two places, for both the label above the search field and the submit button text.Quote: RichText is used in two places, for both the quotation and citation text.

Heading: RichText is used to enter the heading’s text.

Button: RichText is used to enter the button’s text.

The JavaScript edit function linked below for each block can be used as a best practice reference while creating your own blocks. There are a number of core blocks using the RichText component. Top ↑ Core Blocks Using the RichText Component Property Referenceįor a list of the possible properties to pass your RichText component, check out the component documentation on GitHub. Unlike other components that exist in the Component Reference section, RichText lives separately because it only makes sense within the block editor, and not within other areas of WordPress. For example, you can dictate whether to allow the user to make text bold, italics or both. Rich text items support all XHTML character entities, such as (non-breaking space), and the following elements: div, span, ul, ol, and li.

Control Over Formatting Options: It’s possible to dictate exactly which formatting options you want to allow for the RichText field.

Cohesive Placeholder Text: Before the user writes their content, it’s easy to include placeholder text that’s already styled to match the rest of the block editor.

This allows the styles you apply in style.css to more easily apply on the frontend and admin, without having to rewrite them in editor.css.

Consistent Styling in the Admin and Frontend: The editable container can be set to any block-level element, such as a div, h2 or p tag.

The RichText component is extremely powerful because it provides built-in functionality you won’t find in other components: RichText is a component that allows developers to render a contenteditable input, providing users with the option to format block content to make it bold, italics, linked, or use other formatting. Check out the Data Mappings & CTAs unit for a refresher on null checking.Īn example of a common use case is for FAQ Answer fields, as these all allow rich text formatting by default.Browse: Home / Block Editor Handbook / Reference Guides / RichText Reference RichText Reference Edit Make sure to include null checking as well. You’ll want to use the rich text formatter for the field mapping in the card’s component.js file. Add Rich Text Formatter to Rich Text Field

RICH TEXT EXAMPLE UPDATE

Make sure to update that field instead of details which is referenced throughout the rest of this unit. Rich text is most commonly used for the details section of cards but you can use it with any field you have stored as a Rich Text Field in the Knowledge Graph.

Since the rich text formatter converts markdown to HTML, update the Handlebars template to allow the HTML to display on the page.

Either disable truncation or update the card to handle RTF truncation, depending on what theme you’re on.

Add the rich text formatter to the field that uses rich text.

Make sure you’ve forked a card that you can edit at the top-level and you’re not editing a card in the theme itself. These days Unicode is the canonical method for exchanging text characters.

RICH TEXT EXAMPLE CODE

To add rich text to a card, we’ll need to update the relevant card in several ways. For example, if the code page is set to Windows-1256, the sequence c8 will encode the Arabic letter b. Null, so will use the browser default of “_self” String or object with keys for each link type(see below) Should be the same as the fieldName specified Passed as the fieldName to the analytics event.

Rich text example