Rich Text

This field type requires the Genesis Custom Blocks Pro plugin which is available through a Genesis Pro subscription.

The Rich Text field creates a text editor option for the block suitable for formatted blocks of text. You can include bold, italics, code, and strikethrough text as well as links and inline images.

Click image to enlarge

1. Field Label: The field label will be displayed next to the field when adding it the block to the post or page.
2. Field Name: The field name should auto-fill based on the field label, but can be customized. This will be used in the PHP as part of the block template.
3. Field Type: Choose the Rich Text field type.
4. Help Text: Instructions to describe the data needed in the field.
5. Default Value: The default value for this field when adding the block.
6. Placeholder Text: The helper text which appears when the input is empty.

PHP API Controls

• name
• label
• control
• type
• order
• help
• default
• placeholder

Template Usage

To display the Rich Text field in your template, use the field name you provided.

There are two ways you can do this.

1. Template Editor: Using the built-in template editor is the easiest way to create the required block template. The template editor accepts HTML markup, field names (enclosed in 2 brackets), and CSS only.

Here’s an example of HTML you can use in the template editor:

<div>
     <h2>Pet's Description</h2>
     <p>{{pets-description}}</p>
</div>

2. PHP Template: If you need to use logic, loop syntax, define variables, or use PHP, you can create the template manually using the PHP templating method instead.

For example:

<?php block_field( 'pets-description' ); ?>

Example template file /blocks/block-example.php

<?php
// Example Rich Text Field
?>
 
<h2>Pet's Description</h2>
 <p><?php block_field( 'pets-description' ); ?></p>

Block Usage

To use the block with the Rich Text field on your site, locate it in the blocks menu.

Click image to enlarge

It will then display within your post or page editor.

Click image to enlarge

And on the front end of your site.

Click image to enlarge