{"id":30501,"date":"2019-08-11T05:33:20","date_gmt":"2019-08-10T19:33:20","guid":{"rendered":"https:\/\/getblocklab.com\/?post_type=docs&#038;p=30501"},"modified":"2021-07-27T17:53:04","modified_gmt":"2021-07-27T17:53:04","slug":"rich-text","status":"publish","type":"page","link":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/rich-text\/","title":{"rendered":"Rich Text"},"content":{"rendered":"\n<p class=\"has-background\" style=\"font-size:15px;background-color:#f5f5f5\"><strong>This field type requires the Genesis Custom Blocks Pro plugin which is available through a <a href=\"https:\/\/wpengine.com\/genesis-pro\/\" target=\"_blank\" rel=\"noreferrer noopener\">Genesis Pro subscription<\/a>.<\/strong><\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full border\"><a href=\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2021\/01\/gcb-rich-text-field-settings-updated.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1277\" height=\"767\" src=\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2021\/01\/gcb-rich-text-field-settings-updated.png\" alt=\"Screenshot of Rich Text field settings\" class=\"wp-image-136950\" srcset=\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2021\/01\/gcb-rich-text-field-settings-updated.png 1277w, https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2021\/01\/gcb-rich-text-field-settings-updated-300x180.png 300w, https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2021\/01\/gcb-rich-text-field-settings-updated-1024x615.png 1024w, https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2021\/01\/gcb-rich-text-field-settings-updated-768x461.png 768w\" sizes=\"auto, (max-width: 1277px) 100vw, 1277px\" \/><\/a><\/figure>\n\n\n\n<p style=\"font-size:13px\" class=\"has-text-align-center\"><em>Click image to enlarge<\/em><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>Field Label:<\/strong>&nbsp;The field label will be displayed next to the field when adding it the block to the post or page.<\/li><li><strong>Field Name:<\/strong>&nbsp;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.<\/li><li><strong>Field Type:<\/strong>&nbsp;Choose the&nbsp;<em>Rich Text<\/em>&nbsp;field type.<\/li><li><strong><strong>Help Text<\/strong>:<\/strong> Instructions to describe the data needed in the field.<\/li><li><strong><strong>Default Value<\/strong>:<\/strong> The default value for this field when adding the block.<\/li><li><strong><strong>Placeholder Text<\/strong>:<\/strong> The helper text which appears when the input is empty.<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">PHP API Controls<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>name<\/li><li>label<\/li><li>control<\/li><li>type<\/li><li>order<\/li><li>help<\/li><li>default<\/li><li>placeholder<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Template Usage<\/h2>\n\n\n\n<p>To display the Rich Text field in your template, use the field name you provided.<\/p>\n\n\n\n<p>There are two ways you can do this.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>Template Editor:<\/strong>&nbsp;Using the built-in&nbsp;<a href=\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/get-started\/create-your-first-custom-block\/#template-editor\">template editor<\/a>&nbsp;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.<\/li><\/ol>\n\n\n\n<p>Here\u2019s an example of HTML you can use in the template editor:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div>\n     &lt;h2>Pet's Description&lt;\/h2>\n     &lt;p>{{pets-description}}&lt;\/p>\n&lt;\/div><\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li><strong>PHP Template:<\/strong>&nbsp;If you need to use logic, loop syntax, define variables, or use PHP, you can create the template manually using the&nbsp;<a href=\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/get-started\/add-a-custom-block-to-your-website-content\/\">PHP templating method<\/a>&nbsp;instead.<\/li><\/ol>\n\n\n\n<p>For example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php block_field( 'pets-description' ); ?&gt;<\/code><\/pre>\n\n\n\n<p>Example template file&nbsp;<code>\/blocks\/block-example.php<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\/\/ Example Rich Text Field\n?&gt;\n \n&lt;h2&gt;Pet's Description&lt;\/h2&gt;\n &lt;p&gt;&lt;?php block_field( 'pets-description' ); ?&gt;&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Block Usage<\/h2>\n\n\n\n<p>To use the block with the Rich Text field on your site, locate it in the blocks menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full border\"><a href=\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2020\/08\/gcb-add-custom-block-to-page.png\"><img loading=\"lazy\" decoding=\"async\" width=\"855\" height=\"467\" src=\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2020\/08\/gcb-add-custom-block-to-page.png\" alt=\"Screenshot of custom block in the blocks menu\" class=\"wp-image-136807\" srcset=\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2020\/08\/gcb-add-custom-block-to-page.png 855w, https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2020\/08\/gcb-add-custom-block-to-page-300x164.png 300w, https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2020\/08\/gcb-add-custom-block-to-page-768x419.png 768w\" sizes=\"auto, (max-width: 855px) 100vw, 855px\" \/><\/a><\/figure>\n\n\n\n<p style=\"font-size:13px\" class=\"has-text-align-center\"><em>Click image to enlarge<\/em><\/p>\n\n\n\n<p>It will then display within your post or page editor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full border\"><a href=\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2020\/08\/gcb-rich-text-field-in-editor.png\"><img loading=\"lazy\" decoding=\"async\" width=\"855\" height=\"451\" src=\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2020\/08\/gcb-rich-text-field-in-editor.png\" alt=\"Screenshot of Rich Text field in the editor\" class=\"wp-image-136882\" srcset=\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2020\/08\/gcb-rich-text-field-in-editor.png 855w, https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2020\/08\/gcb-rich-text-field-in-editor-300x158.png 300w, https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2020\/08\/gcb-rich-text-field-in-editor-768x405.png 768w\" sizes=\"auto, (max-width: 855px) 100vw, 855px\" \/><\/a><\/figure>\n\n\n\n<p style=\"font-size:13px\" class=\"has-text-align-center\"><em>Click image to enlarge<\/em><\/p>\n\n\n\n<p>And on the front end of your site.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full border\"><a href=\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2020\/08\/gcb-rich-text-field-on-page.png\"><img loading=\"lazy\" decoding=\"async\" width=\"855\" height=\"279\" src=\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2020\/08\/gcb-rich-text-field-on-page.png\" alt=\"Screenshot of Rich Text field on frontend of the site\" class=\"wp-image-136883\" srcset=\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2020\/08\/gcb-rich-text-field-on-page.png 855w, https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2020\/08\/gcb-rich-text-field-on-page-300x98.png 300w, https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2020\/08\/gcb-rich-text-field-on-page-768x251.png 768w\" sizes=\"auto, (max-width: 855px) 100vw, 855px\" \/><\/a><\/figure>\n\n\n\n<p style=\"font-size:13px\" class=\"has-text-align-center\"><em>Click image to enlarge<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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. Field Label:&nbsp;The field label will be displayed next to the field when adding it the block to the post or page. [&hellip;]<\/p>\n","protected":false},"author":447,"featured_media":0,"parent":17394,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"class_list":{"0":"post-30501","1":"page","2":"type-page","3":"status-publish","5":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Rich Text - Genesis Custom Blocks<\/title>\n<meta name=\"description\" content=\"Add a Rich Text field to your custom Gutenberg block using the Block Lab WordPress plugin.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/rich-text\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Rich Text - Genesis Custom Blocks\" \/>\n<meta property=\"og:description\" content=\"Add a Rich Text field to your custom Gutenberg block using the Block Lab WordPress plugin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/rich-text\/\" \/>\n<meta property=\"og:site_name\" content=\"Genesis Custom Blocks\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-27T17:53:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2021\/01\/gcb-rich-text-field-settings-updated.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/#website\",\"url\":\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/\",\"name\":\"Genesis Custom Blocks\",\"description\":\"Create effective content faster.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/rich-text\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2021\/01\/gcb-rich-text-field-settings-updated.png\",\"contentUrl\":\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2021\/01\/gcb-rich-text-field-settings-updated.png\",\"width\":1277,\"height\":767,\"caption\":\"Screenshot of Rich Text field settings\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/rich-text\/#webpage\",\"url\":\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/rich-text\/\",\"name\":\"Rich Text - Genesis Custom Blocks\",\"isPartOf\":{\"@id\":\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/rich-text\/#primaryimage\"},\"datePublished\":\"2019-08-10T19:33:20+00:00\",\"dateModified\":\"2021-07-27T17:53:04+00:00\",\"description\":\"Add a Rich Text field to your custom Gutenberg block using the Block Lab WordPress plugin.\",\"breadcrumb\":{\"@id\":\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/rich-text\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/rich-text\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/rich-text\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fields\",\"item\":\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Rich Text\"}]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Rich Text - Genesis Custom Blocks","description":"Add a Rich Text field to your custom Gutenberg block using the Block Lab WordPress plugin.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/rich-text\/","og_locale":"en_US","og_type":"article","og_title":"Rich Text - Genesis Custom Blocks","og_description":"Add a Rich Text field to your custom Gutenberg block using the Block Lab WordPress plugin.","og_url":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/rich-text\/","og_site_name":"Genesis Custom Blocks","article_modified_time":"2021-07-27T17:53:04+00:00","og_image":[{"url":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2021\/01\/gcb-rich-text-field-settings-updated.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/#website","url":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/","name":"Genesis Custom Blocks","description":"Create effective content faster.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/rich-text\/#primaryimage","inLanguage":"en-US","url":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2021\/01\/gcb-rich-text-field-settings-updated.png","contentUrl":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2021\/01\/gcb-rich-text-field-settings-updated.png","width":1277,"height":767,"caption":"Screenshot of Rich Text field settings"},{"@type":"WebPage","@id":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/rich-text\/#webpage","url":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/rich-text\/","name":"Rich Text - Genesis Custom Blocks","isPartOf":{"@id":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/#website"},"primaryImageOfPage":{"@id":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/rich-text\/#primaryimage"},"datePublished":"2019-08-10T19:33:20+00:00","dateModified":"2021-07-27T17:53:04+00:00","description":"Add a Rich Text field to your custom Gutenberg block using the Block Lab WordPress plugin.","breadcrumb":{"@id":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/rich-text\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/rich-text\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/rich-text\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/"},{"@type":"ListItem","position":2,"name":"Fields","item":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/"},{"@type":"ListItem","position":3,"name":"Rich Text"}]}]}},"featured_image_src":null,"featured_image_src_square":null,"_links":{"self":[{"href":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-json\/wp\/v2\/pages\/30501","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-json\/wp\/v2\/users\/447"}],"replies":[{"embeddable":true,"href":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-json\/wp\/v2\/comments?post=30501"}],"version-history":[{"count":0,"href":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-json\/wp\/v2\/pages\/30501\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-json\/wp\/v2\/pages\/17394"}],"wp:attachment":[{"href":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-json\/wp\/v2\/media?parent=30501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}