{"id":17501,"date":"2019-06-19T08:57:54","date_gmt":"2019-06-18T22:57:54","guid":{"rendered":"https:\/\/getblocklab.com\/?post_type=docs&#038;p=17501"},"modified":"2021-07-27T18:09:56","modified_gmt":"2021-07-27T18:09:56","slug":"email","status":"publish","type":"page","link":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/email\/","title":{"rendered":"Email"},"content":{"rendered":"\n<p>The Email field creates a simple text input that only accepts valid email addresses.<\/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-email-field-settings-updated.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1428\" height=\"943\" src=\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2021\/01\/gcb-email-field-settings-updated.png\" alt=\"Screenshot of Email field settings\" class=\"wp-image-136994\" srcset=\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2021\/01\/gcb-email-field-settings-updated.png 1428w, https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2021\/01\/gcb-email-field-settings-updated-300x198.png 300w, https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2021\/01\/gcb-email-field-settings-updated-1024x676.png 1024w, https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2021\/01\/gcb-email-field-settings-updated-768x507.png 768w\" sizes=\"auto, (max-width: 1428px) 100vw, 1428px\" \/><\/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>Email<\/em>&nbsp;field type.<\/li><li><strong>Field Location:<\/strong>&nbsp;Choose a location to display the field.<ul><li><em>Editor<\/em>&nbsp;will show the field in the main editing area of a post or page.<\/li><li><em>Inspector<\/em>&nbsp;will display the field in the right-hand sidebar under the block inspector.<\/li><\/ul><\/li><li><strong>Field Width:<\/strong>&nbsp;Select how widely the field should be displayed.<\/li><li><strong>Help Text:<\/strong>&nbsp;Enter instructions to describe the data needed in the field. (optional).<\/li><li><strong>Default Value:<\/strong>&nbsp;The default value for this field when adding the block.<\/li><li><strong>Placeholder Text<\/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>location<\/li><li>width<\/li><li>help<\/li><li>default<\/li><li>placeholder<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/github.com\/getblocklab\/block-lab\/wiki\/6.-Available-field-types#template-usage-3\"><\/a>Template Usage<\/h2>\n\n\n\n<p>To display the Email 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;p>Interested in this pet? &lt;a href=\"mailto:{{owners-email}}\">Contact the owner for more information.&lt;\/a>&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;a href=\"mailto:&lt;?php block_field( 'owners-email' ); ?&gt;\"&gt;Owner's Email&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p>The API will return the email as a string.<\/p>\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\/\/ Genesis Custom Blocks Example Email Field\n?>\n\n&lt;p>Interested in this pet? &lt;a href=\"mailto:&lt;?php block_field( 'owners-email' ); ?>\" \/>Contact the owner for more information.&lt;\/a>&lt;\/p><\/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 Email 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-email-field-in-editor.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1113\" height=\"454\" src=\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2020\/08\/gcb-email-field-in-editor.png\" alt=\"Screenshot of Email field in the editor\" class=\"wp-image-136902\" srcset=\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2020\/08\/gcb-email-field-in-editor.png 1113w, https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2020\/08\/gcb-email-field-in-editor-300x122.png 300w, https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2020\/08\/gcb-email-field-in-editor-1024x418.png 1024w, https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2020\/08\/gcb-email-field-in-editor-768x313.png 768w\" sizes=\"auto, (max-width: 1113px) 100vw, 1113px\" \/><\/a><\/figure>\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-email-field-on-page.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1263\" height=\"224\" src=\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2020\/08\/gcb-email-field-on-page.png\" alt=\"Screenshot of Email field on front end of the site\" class=\"wp-image-136903\" srcset=\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2020\/08\/gcb-email-field-on-page.png 1263w, https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2020\/08\/gcb-email-field-on-page-300x53.png 300w, https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2020\/08\/gcb-email-field-on-page-1024x182.png 1024w, https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2020\/08\/gcb-email-field-on-page-768x136.png 768w\" sizes=\"auto, (max-width: 1263px) 100vw, 1263px\" \/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>The Email field creates a simple text input that only accepts valid email addresses. Field Label:&nbsp;The field label will be displayed next to the field when adding it the block to the post or page. Field Name:&nbsp;The field name should auto-fill based on the field label, but can be customized. This will be used in [&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-17501","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>Email - Genesis Custom Blocks<\/title>\n<meta name=\"description\" content=\"Add an Email 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\/email\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Email - Genesis Custom Blocks\" \/>\n<meta property=\"og:description\" content=\"Add an Email 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\/email\/\" \/>\n<meta property=\"og:site_name\" content=\"Genesis Custom Blocks\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-27T18:09:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2021\/01\/gcb-email-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\/email\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2021\/01\/gcb-email-field-settings-updated.png\",\"contentUrl\":\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2021\/01\/gcb-email-field-settings-updated.png\",\"width\":1428,\"height\":943,\"caption\":\"Screenshot of Email field settings\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/email\/#webpage\",\"url\":\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/email\/\",\"name\":\"Email - Genesis Custom Blocks\",\"isPartOf\":{\"@id\":\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/email\/#primaryimage\"},\"datePublished\":\"2019-06-18T22:57:54+00:00\",\"dateModified\":\"2021-07-27T18:09:56+00:00\",\"description\":\"Add an Email field to your custom Gutenberg block using the Block Lab WordPress plugin.\",\"breadcrumb\":{\"@id\":\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/email\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/email\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/email\/#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\":\"Email\"}]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Email - Genesis Custom Blocks","description":"Add an Email 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\/email\/","og_locale":"en_US","og_type":"article","og_title":"Email - Genesis Custom Blocks","og_description":"Add an Email field to your custom Gutenberg block using the Block Lab WordPress plugin.","og_url":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/email\/","og_site_name":"Genesis Custom Blocks","article_modified_time":"2021-07-27T18:09:56+00:00","og_image":[{"url":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2021\/01\/gcb-email-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\/email\/#primaryimage","inLanguage":"en-US","url":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2021\/01\/gcb-email-field-settings-updated.png","contentUrl":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-content\/uploads\/sites\/5\/2021\/01\/gcb-email-field-settings-updated.png","width":1428,"height":943,"caption":"Screenshot of Email field settings"},{"@type":"WebPage","@id":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/email\/#webpage","url":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/email\/","name":"Email - Genesis Custom Blocks","isPartOf":{"@id":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/#website"},"primaryImageOfPage":{"@id":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/email\/#primaryimage"},"datePublished":"2019-06-18T22:57:54+00:00","dateModified":"2021-07-27T18:09:56+00:00","description":"Add an Email field to your custom Gutenberg block using the Block Lab WordPress plugin.","breadcrumb":{"@id":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/email\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/email\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/fields\/email\/#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":"Email"}]}]}},"featured_image_src":null,"featured_image_src_square":null,"_links":{"self":[{"href":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-json\/wp\/v2\/pages\/17501","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=17501"}],"version-history":[{"count":0,"href":"https:\/\/developer.wpengine.com\/genesis-custom-blocks\/wp-json\/wp\/v2\/pages\/17501\/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=17501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}