{"id":151126,"date":"2024-05-28T12:58:13","date_gmt":"2024-05-28T17:58:13","guid":{"rendered":"https:\/\/wpengine.com\/?p=151126"},"modified":"2025-05-14T13:31:58","modified_gmt":"2025-05-14T18:31:58","slug":"acf-6-3-release","status":"publish","type":"post","link":"https:\/\/wpengine.com\/case-studies\/acf-6-3-release\/","title":{"rendered":"New Custom Block-Building Features Released in Advanced Custom Fields 6.3"},"content":{"rendered":"\n<p>Over the last couple of years, I\u2019ve attended nearly a dozen events, big and small, where the topic of building custom blocks with <a href=\"https:\/\/www.advancedcustomfields.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Advanced Custom Fields<\/a> (ACF) has triggered serious interest and excitement amongst the audience.<\/p>\n\n\n\n<p>It\u2019s no surprise that developers are simultaneously excited by the future of the WordPress experience while also wanting to leverage the development workflows they have refined for many years. The ACF team here at <a href=\"https:\/\/wpengine.com\" target=\"_blank\" rel=\"noreferrer noopener\">WP Engine<\/a> loves this\u2014it represents the best of what has brought us here, combined with the potential of where we can go!<\/p>\n\n\n\n<p>With this in mind, the ACF team is working hard on a series of releases to enhance custom block building with ACF even further, starting with the <a href=\"https:\/\/www.advancedcustomfields.com\/blog\/acf-6-3-0-released\/\" target=\"_blank\" rel=\"noreferrer noopener\">just-released ACF version 6.3<\/a>. These new features and capabilities will help you lean further into modern WordPress while leveraging your skills in PHP.\u00a0<\/p>\n\n\n\n<p>Let\u2019s have a look!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Field validation support for ACF Blocks<\/h2>\n\n\n\n<p>Restricting what data can be entered into a form field is an important part of a well thought through editing experience in WordPress.&nbsp;<\/p>\n\n\n\n<p>Validation rules facilitate this in form fields, and although these have been configurable for traditional ACF fields for some time, they haven\u2019t functioned for fields in ACF Blocks. Version 6.3 changes that! You can now set up custom validation rules for your block fields.<\/p>\n\n\n\n<p>Let\u2019s have a look at an example below. I have a custom block that I have built for the hero section of a college website. For the way I want this block to be used I want to make sure that:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The heading is never left blank<\/li>\n\n\n\n<li>The heading does not exceed a certain number of characters<\/li>\n<\/ol>\n\n\n\n<p>In the field group settings, it\u2019s easy to set the validation rules.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"555\" src=\"https:\/\/wpengine.com\/wp-content\/uploads\/2024\/05\/acf_63_setting_validation_rules-1024x555.png\" alt=\"\" class=\"wp-image-151129\" srcset=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/acf_63_setting_validation_rules-1024x555.png 1024w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/acf_63_setting_validation_rules-540x293.png 540w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/acf_63_setting_validation_rules-768x416.png 768w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/acf_63_setting_validation_rules.png 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Setting validation rules on a field<\/em><\/figcaption><\/figure>\n\n\n\n<p>Now in the content editing experience, you can see below that when the rules are not met, I see a visual warning for what needs to be done. Additionally, until the rule is met the editor cannot save the post.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"448\" src=\"https:\/\/wpengine.com\/wp-content\/uploads\/2024\/05\/acf_63_validation_warning-1024x448.png\" alt=\"\" class=\"wp-image-151130\" srcset=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/acf_63_validation_warning-1024x448.png 1024w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/acf_63_validation_warning-540x236.png 540w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/acf_63_validation_warning-768x336.png 768w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/acf_63_validation_warning.png 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Example of validation error notification in the block edito<\/em>r<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Storing ACF Block field values in post meta<\/h2>\n\n\n\n<p>By default, WordPress stores field data within the HTML comments of a block in the post_content column of the posts table. This works for many scenarios, but there are plenty of occasions where you may want to store and read data from the post_meta table.&nbsp;<\/p>\n\n\n\n<p>Version 6.3 makes this possible with a new attribute you can include in your block.json file: usePostMeta: true (default false). You can now enter your structured data through the blocks interface rather than deferring to the traditional custom fields interface.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"535\" src=\"https:\/\/wpengine.com\/wp-content\/uploads\/2024\/05\/acf_63_usePostMeta-1024x535.png\" alt=\"\" class=\"wp-image-151131\" srcset=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/acf_63_usePostMeta-1024x535.png 1024w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/acf_63_usePostMeta-540x282.png 540w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/acf_63_usePostMeta-768x401.png 768w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/acf_63_usePostMeta-1200x628.png 1200w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/acf_63_usePostMeta.png 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>block.json file including new usePostMeta attribute set to true<\/em>.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">New icon picker for custom post types and options pages<\/h2>\n\n\n\n<p>The custom post types and options pages you can easily spin up with ACF appear in the sidebar of the WordPress admin area. When working with ACF for this, you have been able to set an icon to sit alongside the text label.&nbsp;<\/p>\n\n\n\n<p>Version 6.3 introduces a simple icon picker that pulls in the open-source dashicon library. You can still select and set your own, but when you want to work with the native icon library of the WordPress admin, this new icon picker speeds up the experience.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"526\" src=\"https:\/\/wpengine.com\/wp-content\/uploads\/2024\/05\/acf_63_icon_picker-1024x526.png\" alt=\"\" class=\"wp-image-151132\" srcset=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/acf_63_icon_picker-1024x526.png 1024w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/acf_63_icon_picker-540x277.png 540w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/acf_63_icon_picker-768x394.png 768w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/acf_63_icon_picker.png 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>New icon picker within ACF 6.3<\/em><\/figcaption><\/figure>\n\n\n\n<p>For the astute ACF user, you may see this icon picker and think, \u201c<em>Why don\u2019t we make this a new general field type<\/em>?\u201d Well, we did!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">New icon picker field type<\/h2>\n\n\n\n<p>Leveraging the good work mentioned above, there is now a new field type: the \u201cIcon Picker\u201d field. When an editor needs to pick a dashicon icon or one from the media library, you can now add an icon picker field.&nbsp;<\/p>\n\n\n\n<p>Most modern web designs use icons in some way, and ACF users no longer have to leverage alternative field solutions for these. We plan to add extendability to this field type in a future release so that you can easily load other popular icon sets.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"914\" src=\"https:\/\/wpengine.com\/wp-content\/uploads\/2024\/05\/acf_63_icon_picker_field_type-1024x914.png\" alt=\"\" class=\"wp-image-151133\" srcset=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/acf_63_icon_picker_field_type-1024x914.png 1024w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/acf_63_icon_picker_field_type-540x482.png 540w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/acf_63_icon_picker_field_type-768x685.png 768w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/acf_63_icon_picker_field_type.png 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Selecting the icon picker field type in a field group<\/em><\/figcaption><\/figure>\n\n\n\n<p>These were the big headlines for the release, but it also includes a number of other improvements, which you can read about in the<a href=\"https:\/\/www.advancedcustomfields.com\/blog\/acf-6-3-0-released\/\" target=\"_blank\" rel=\"noreferrer noopener\"> full release post from the ACF team<\/a>.&nbsp;<\/p>\n\n\n\n<p>Visit the <a href=\"https:\/\/www.advancedcustomfields.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">ACF website<\/a> if you would like to use ACF to push the boundaries of what you can build with WordPress!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Want to level up your ACF game?<\/h2>\n\n\n\n<p>We run several events, community spaces, and content hubs for those who build with Advanced Custom Fields. If you want to learn more and find other like-minded WordPressers, check out<br><a href=\"https:\/\/wpengine.com\/builders\/\" target=\"_blank\" rel=\"noreferrer noopener\">WP Engine Builders.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Over the last couple of years, I\u2019ve attended nearly a dozen events, big and small, where the topic of building custom blocks with Advanced Custom Fields (ACF) has triggered serious interest and excitement amongst the audience. It\u2019s no surprise that developers are simultaneously excited by the future of the WordPress experience while also wanting to<span class=\"tile__ellipses\">&hellip;<\/span><span class=\"tile__ellipses--animated\"><\/span><\/p>\n","protected":false},"author":296,"featured_media":151127,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9,1294],"tags":[1395],"class_list":["post-151126","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product-updates","category-products","tag-advanced-custom-fields"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>New Custom Block-Building Features Released in Advanced Custom Fields 6.3<\/title>\n<meta name=\"description\" content=\"ACF 6.3 introduces new features and improvements to custom block functionality, including field validation and storing values in post meta.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"New custom block-building features released in Advanced Custom Fields 6.3\" \/>\n<meta property=\"og:description\" content=\"Advanced Custom Fields 6.3 brings new custom block features and improvements, including field validation and storing values in post meta.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/acf-6-3-release\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-28T17:58:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-14T18:31:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/advanced_custom_fields_63_release_blog_post.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1201\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Rob Stinson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"New custom block-building features released in Advanced Custom Fields 6.3\" \/>\n<meta name=\"twitter:description\" content=\"Advanced Custom Fields 6.3 brings new custom block features and improvements, including field validation and storing values in post meta.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/advanced_custom_fields_63_release_blog_post.png\" \/>\n<meta name=\"twitter:creator\" content=\"@wpengine\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rob Stinson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/acf-6-3-release\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/acf-6-3-release\/\",\"name\":\"New Custom Block-Building Features Released in Advanced Custom Fields 6.3\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2024-05-28T17:58:13+00:00\",\"dateModified\":\"2025-05-14T18:31:58+00:00\",\"author\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f0848121cff19947fa7b3aa561692150\"},\"description\":\"ACF 6.3 introduces new features and improvements to custom block functionality, including field validation and storing values in post meta.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/acf-6-3-release\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/acf-6-3-release\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/acf-6-3-release\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"New Custom Block-Building Features Released in Advanced Custom Fields 6.3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f0848121cff19947fa7b3aa561692150\",\"name\":\"Rob Stinson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9c6fb36ed63ff64e249480699a1d2f59c98cceaf3a4327c75e5d03c695c191d4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9c6fb36ed63ff64e249480699a1d2f59c98cceaf3a4327c75e5d03c695c191d4?s=96&d=mm&r=g\",\"caption\":\"Rob Stinson\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"New Custom Block-Building Features Released in Advanced Custom Fields 6.3","description":"ACF 6.3 introduces new features and improvements to custom block functionality, including field validation and storing values in post meta.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"New custom block-building features released in Advanced Custom Fields 6.3","og_description":"Advanced Custom Fields 6.3 brings new custom block features and improvements, including field validation and storing values in post meta.","og_url":"https:\/\/wpengine.com\/case-studies\/acf-6-3-release\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_published_time":"2024-05-28T17:58:13+00:00","article_modified_time":"2025-05-14T18:31:58+00:00","og_image":[{"width":1201,"height":628,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/advanced_custom_fields_63_release_blog_post.png","type":"image\/png"}],"author":"Rob Stinson","twitter_card":"summary_large_image","twitter_title":"New custom block-building features released in Advanced Custom Fields 6.3","twitter_description":"Advanced Custom Fields 6.3 brings new custom block features and improvements, including field validation and storing values in post meta.","twitter_image":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/advanced_custom_fields_63_release_blog_post.png","twitter_creator":"@wpengine","twitter_site":"@wpengine","twitter_misc":{"Written by":"Rob Stinson","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/acf-6-3-release\/","url":"https:\/\/wpengine.com\/case-studies\/acf-6-3-release\/","name":"New Custom Block-Building Features Released in Advanced Custom Fields 6.3","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2024-05-28T17:58:13+00:00","dateModified":"2025-05-14T18:31:58+00:00","author":{"@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f0848121cff19947fa7b3aa561692150"},"description":"ACF 6.3 introduces new features and improvements to custom block functionality, including field validation and storing values in post meta.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/acf-6-3-release\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/acf-6-3-release\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/acf-6-3-release\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"New Custom Block-Building Features Released in Advanced Custom Fields 6.3"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f0848121cff19947fa7b3aa561692150","name":"Rob Stinson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9c6fb36ed63ff64e249480699a1d2f59c98cceaf3a4327c75e5d03c695c191d4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9c6fb36ed63ff64e249480699a1d2f59c98cceaf3a4327c75e5d03c695c191d4?s=96&d=mm&r=g","caption":"Rob Stinson"}}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/posts\/151126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/296"}],"replies":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/comments?post=151126"}],"version-history":[{"count":0,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/posts\/151126\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/151127"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=151126"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/categories?post=151126"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/tags?post=151126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}