{"id":4792,"date":"2022-10-13T15:29:15","date_gmt":"2022-10-13T21:29:15","guid":{"rendered":"https:\/\/wpengine.com\/builders\/?p=4792"},"modified":"2023-08-17T14:28:58","modified_gmt":"2023-08-17T19:28:58","slug":"accordion-block-acf-fields","status":"publish","type":"post","link":"https:\/\/wpengine.com\/builders\/accordion-block-acf-fields\/","title":{"rendered":"Create an Accordion Block with Advanced Custom Fields"},"content":{"rendered":"\n<p>There are a lot of <a href=\"https:\/\/wordpress.org\/support\/article\/blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\">native blocks available<\/a> in WordPress. However, there are a few common user interface patterns that are missing, like <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/21584\" target=\"_blank\" rel=\"noreferrer noopener\">accordions<\/a> and <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/34079\" target=\"_blank\" rel=\"noreferrer noopener\">tabs<\/a>. Of course, there are open requests for these blocks, but the implementation details have yet to be solidified. Today, we&#8217;re going to go over how to create an accordion block with Advanced Custom Fields (ACF) integration.<\/p>\n\n\n\n<p>First, let&#8217;s chat about where custom blocks belong. There is always a debate on whether blocks should reside in the theme or a plugin. I recommend placing your custom blocks in a plugin. This helps make them portable and encourages you to develop with theme-switching in mind. If you include your blocks within the theme then you&#8217;re more likely to make them rely solely on the theme, and if the user switches then the blocks will disappear and they&#8217;ll likely be confused and disappointed.<\/p>\n\n\n\n<p>Here are the steps we&#8217;ll follow:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"#create-block-plugin\">Create a Block Plugin with the <code>@wordpress\/create-block<\/code> Package<\/a><\/li>\n\n\n\n<li><a href=\"#reorganize-plugin\">Reorganize the New Plugin for ACF Field Integration<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"#file-renaming\">File Renaming and Restructuring<\/a><\/li>\n\n\n\n<li><a href=\"#register-fields\">Register ACF fields<\/a><\/li>\n\n\n\n<li><a href=\"#register-category\">Register a Custom Block Category<\/a><\/li>\n\n\n\n<li><a href=\"#call-block-json\">Call <code>block.json<\/code> Directly with <code>register_block_type()<\/code><\/a><\/li>\n\n\n\n<li><a href=\"#add-display-logic\">Add <code>accordion.php<\/code> Display Logic<\/a><\/li>\n\n\n\n<li><a href=\"#add-css-js\">Add Accordion CSS and JavaScript<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"#build-final-block\">Build our Final Block with <code>@wordpress\/scripts<\/code><\/a><\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:2rem;padding-right:1.5rem;padding-bottom:2rem;padding-left:1.5rem\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-style-default has-polar-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"padding-top:1.5rem;padding-right:1.5rem;padding-bottom:2rem;padding-left:1.5rem;flex-basis:100%\">\n<p class=\"has-text-align-center has-medium-large-font-size\">Final Accordion Block Plugin<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/wpeng.in\/bb72c2\/\">Download<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/wpeng.in\/882924-2\/\">Github<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-style-default has-polar-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"padding-top:1.5rem;padding-right:1.5rem;padding-bottom:2rem;padding-left:1.5rem;flex-basis:100%\">\n<p class=\"has-text-align-center has-medium-large-font-size\">Advanced Custom Fields<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/wpeng.in\/acf-4792\/\" target=\"_blank\" rel=\"noreferrer noopener\">Download<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"create-block-plugin\">Create a Block Plugin with the <code>@wordpress\/create-block<\/code> Package<\/h2>\n\n\n\n<p>Let&#8217;s start with scaffolding a custom plugin <em>and<\/em> our accordion block with the handy <code>@wordpress\/create-block<\/code> package. The <code>@wordpress\/create-block<\/code> package has several handy options you can pass when creating a plugin or block. Here is the full list:<\/p>\n\n\n\n<div class=\"wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow\"><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>-V, --version                output the version number\n<\/span><\/span><span class='shcb-loc'><span>-t, --template &lt;name&gt;        project template type name; allowed values: <span class=\"hljs-string\">\"static\"<\/span> (<span class=\"hljs-keyword\">default<\/span>), <span class=\"hljs-string\">\"es5\"<\/span>, the name <span class=\"hljs-keyword\">of<\/span> an external npm package, or the path to a local directory\n<\/span><\/span><span class='shcb-loc'><span>--no-plugin                  scaffold block files only\n<\/span><\/span><mark class='shcb-loc'><span>--namespace &lt;value&gt;          internal namespace <span class=\"hljs-keyword\">for<\/span> the block name\n<\/span><\/mark><span class='shcb-loc'><span>--title &lt;value&gt;              display title <span class=\"hljs-keyword\">for<\/span> the block and the WordPress plugin\n<\/span><\/span><span class='shcb-loc'><span>--short-description &lt;value&gt;  short description <span class=\"hljs-keyword\">for<\/span> the block and the WordPress plugin\n<\/span><\/span><mark class='shcb-loc'><span>--category &lt;name&gt;            category name <span class=\"hljs-keyword\">for<\/span> the block\n<\/span><\/mark><span class='shcb-loc'><span>--wp-scripts                 enable integration <span class=\"hljs-keyword\">with<\/span> <span class=\"hljs-string\">`@wordpress\/scripts`<\/span> package\n<\/span><\/span><span class='shcb-loc'><span>--no-wp-scripts              disable integration <span class=\"hljs-keyword\">with<\/span> <span class=\"hljs-string\">`@wordpress\/scripts`<\/span> package\n<\/span><\/span><span class='shcb-loc'><span>--wp-env                     enable integration <span class=\"hljs-keyword\">with<\/span> <span class=\"hljs-string\">`@wordpress\/env`<\/span> package\n<\/span><\/span><span class='shcb-loc'><span>-h, --help                   output usage information\n<\/span><\/span><mark class='shcb-loc'><span>--variant                    choose a block variant <span class=\"hljs-keyword\">as<\/span> defined by the template\n<\/span><\/mark><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<p>We&#8217;ll be using the <code>--variant<\/code> flag to make sure we get a dynamic block and we&#8217;ll also pass <code>acf<\/code> for our <code>--category<\/code> and <code>--namespace<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-group alignwide is-layout-flow wp-container-core-group-is-layout-47e5a185 wp-block-group-is-layout-flow\">\n<p class=\"has-text-align-center is-style-default has-polar-background-color has-background has-small-font-size\" style=\"line-height:1.2\">Let&#8217;s generate our accordion plugin and subsequent block.<\/p>\n\n\n<pre class=\"wp-block-code\" style=\"margin-top:0px;margin-bottom:0px\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-selector-tag\">npx<\/span> <span class=\"hljs-keyword\">@wordpress<\/span>\/create-block acf-accordion-block --variant dynamic --category acf-blocks --namespace acf &amp;&amp; cd acf-accordion-block\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<p>Running this command will give us a plugin with a block included and since we passed the <code>--variant dynamic<\/code> flag to <code>create-block<\/code> then we&#8217;ll get a dynamic block.<\/p>\n\n\n\n<div class=\"wp-block-group alignwide is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-b93cabc5 wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-image alignwide size-large is-style-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1003\" height=\"1024\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/acf-accordion-block-in-editor-1003x1024.png\" alt=\"WordPress editor with newly created accordion block inserted\" class=\"wp-image-4842\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/acf-accordion-block-in-editor-1003x1024.png 1003w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/acf-accordion-block-in-editor-294x300.png 294w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/acf-accordion-block-in-editor-768x784.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/acf-accordion-block-in-editor.png 1008w\" sizes=\"auto, (max-width: 1003px) 100vw, 1003px\" \/><figcaption class=\"wp-element-caption\">Barebones accordion block created with the <code>@wordpress\/create-block<\/code> package.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full is-style-border\"><img loading=\"lazy\" decoding=\"async\" width=\"546\" height=\"1015\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/acf-accordion-block-directory-structure.png\" alt=\"Directory structure of newly created accordion plugin in VS Code\" class=\"wp-image-4841\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/acf-accordion-block-directory-structure.png 546w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/acf-accordion-block-directory-structure-161x300.png 161w\" sizes=\"auto, (max-width: 546px) 100vw, 546px\" \/><figcaption class=\"wp-element-caption\">Directory structure of newly created accordion plugin in VS Code.<\/figcaption><\/figure>\n<\/div>\n\n\n\n<p>You can go ahead and activate the ACF Accordion Block plugin, create a new post and add the ACF Accordion Block to your post now. The block is registered and available but is far from finished.<\/p>\n\n\n\n<div class=\"wp-block-group has-base-color has-text-color has-background has-link-color wp-elements-b3b5111bd1ed80257b6afde7f6c47e8c has-global-padding is-layout-constrained wp-container-core-group-is-layout-9b866ece wp-block-group-is-layout-constrained\" style=\"border-radius:12px;background-color:#0076dc;margin-bottom:var(--wp--preset--spacing--30);padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\">\n<div class=\"wp-block-group alignwide is-content-justification-left is-layout-flex wp-container-core-group-is-layout-75880670 wp-block-group-is-layout-flex\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<div class=\"wp-block-outermost-icon-block\"><div class=\"icon-container\" style=\"width:80px\"><svg fill=\"none\" viewBox=\"0 0 80 36\" aria-label=\"ACF logo\"><path fill=\"currentColor\" d=\"M64.169 35.437h-8.673V.427h23.118v8.152H64.169v6.248h13.615v7.95H64.169v12.662-.002Z\"><\/path><path fill=\"currentColor\" d=\"M53.208 20.744h8.596c-1.272 8.911-8.74 14.805-17.787 14.805-9.907 0-17.974-7.45-17.974-17.483-.02-2.333.43-4.646 1.325-6.799a17.22 17.22 0 0 1 3.882-5.722A17.972 17.972 0 0 1 44.017.436c8.964 0 16.64 5.939 17.731 14.707h-8.587c-2.582-9.932-18.671-8.96-18.671 2.923 0 11.885 16.29 12.76 18.718 2.68v-.002Z\" opacity=\".05\"><\/path><path fill=\"currentColor\" d=\"M51.449 20.744c-1.475 5.014-6.724 7.994-11.89 6.746-5.17-1.253-8.409-6.28-7.336-11.39 1.072-5.113 6.071-8.48 11.323-7.628A9.366 9.366 0 0 1 49.16 11.4a9.656 9.656 0 0 1 2.24 3.742h8.337C58.645 6.354 50.948.436 42.006.436a17.97 17.97 0 0 0-12.77 5.106 17.214 17.214 0 0 0-3.884 5.725 17.302 17.302 0 0 0-1.324 6.802c0 10.032 8.02 17.48 17.98 17.48 9.04 0 16.487-5.894 17.781-14.805h-8.341.001Z\"><\/path><path fill=\"currentColor\" d=\"M25.544 30.344h-12.07l-1.972 5.088H2.266L16.4.389h6.16l14.697 35.054h-9.752l-1.964-5.1h.003Zm-8.639-8.674-.302.79h5.86l-.204-.593-2.728-7.515-2.626 7.318Z\" opacity=\".05\"><\/path><path fill=\"currentColor\" d=\"M23.258 30.344H11.21l-1.972 5.088H0L14.136.389h6.16l14.697 35.054h-9.748l-1.987-5.1ZM14.64 21.67l-.301.79h5.86l-.205-.593-2.727-7.515-2.626 7.318h-.001Z\"><\/path><\/svg><\/div><\/div>\n\n\n\n<p class=\"has-small-font-size wp-container-content-9cfa9a5a\" style=\"line-height:1.5\">Advanced custom fields to build <br>with WordPress your way.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-right is-nowrap is-layout-flex wp-container-core-buttons-is-layout-b315634e wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline-base\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/wpeng.in\/acf-builders\/\" style=\"border-radius:99px;padding-top:10px;padding-right:24px;padding-bottom:10px;padding-left:24px\" target=\"_blank\" rel=\"noreferrer noopener\">Download \u2192<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"reorganize-plugin\">Reorganize the plugin for ACF integration<\/h2>\n\n\n\n<p>ACF makes custom field registration and hookup a pretty simple task. Here are the ACF field types we&#8217;ll need:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.advancedcustomfields.com\/resources\/repeater\/\" target=\"_blank\" rel=\"noreferrer noopener\">Repeater<\/a> \u2013 Accordion Item (<code>accordion_item<\/code>)\n<ul class=\"wp-block-list\">\n<li>Sub-field \u2013 <a href=\"https:\/\/www.advancedcustomfields.com\/resources\/text\/\" target=\"_blank\" rel=\"noreferrer noopener\">Text<\/a> \u2013 Accordion Heading (<code>accordion_heading<\/code>)<\/li>\n\n\n\n<li>Sub-field \u2013 <a href=\"https:\/\/www.advancedcustomfields.com\/resources\/wysiwyg-editor\/\" target=\"_blank\" rel=\"noreferrer noopener\">WYSIWYG<\/a> \u2013 Accordion Content (<code>accordion_content<\/code>)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>First, be sure to <a href=\"https:\/\/www.advancedcustomfields.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">download and activate the latest Advanced Custom Fields plugin<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"file-renaming\">File Renaming and Restructuring<\/h3>\n\n\n\n<p>Delete the following files, as we will not need them:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>src\/editor.scss<\/code><\/li>\n\n\n\n<li><code>src\/edit.js<\/code><\/li>\n<\/ul>\n\n\n\n<p>Rename the following files:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>src\/index.js<\/code> &#8211;&gt; <code>src\/accordion.js<\/code><\/li>\n\n\n\n<li><code>src\/style.scss<\/code> &#8211;&gt; <code>src\/accordion.scss<\/code><\/li>\n\n\n\n<li><code>src\/template.php<\/code> &#8211;&gt; <code>src\/accordion.php<\/code><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"register-fields\">Register ACF Fields<\/h3>\n\n\n\n<p>With the ACF Pro plugin activated, we can now add our custom fields to our plugin using ACF&#8217;s <code>acf\/include_fields<\/code> action. Create a new file called <code>acf-fields.json<\/code> in the <code>acf-accordion-block<\/code> plugin, <a href=\"https:\/\/raw.githubusercontent.com\/colorful-tones\/acf-accordion-block\/main\/acf-fields.json\" target=\"_blank\" rel=\"noreferrer noopener\">grab the full field code<\/a> from the final plugin repo and paste it into this new file.<\/p>\n\n\n\n<p>Our ACF fields now exist in our plugin, but are not registered. Let&#8217;s register them and assign them directly to the <code>acf\/acf-accordion-block<\/code>:<\/p>\n\n\n\n<div class=\"wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"has-text-align-center has-polar-background-color has-background has-small-font-size\" style=\"line-height:1.2\">Add the following code to your plugin&#8217;s<code>acf-accordion-block.php<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" style=\"margin-top:0px;margin-bottom:0px\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-comment\">\/**<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * Register our block's fields into ACF.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * <span class=\"hljs-doctag\">@return<\/span> void<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">acf_accordion_block_register_include_fields<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n<\/span><\/span><mark class='shcb-loc'><span>\t$path                     = <span class=\"hljs-keyword\">__DIR__<\/span> . <span class=\"hljs-string\">'\/acf-fields.json'<\/span>;\n<\/span><\/mark><span class='shcb-loc'><span>\t$field_json               = json_decode( file_get_contents( $path ), <span class=\"hljs-keyword\">true<\/span> );\n<\/span><\/span><span class='shcb-loc'><span>\t$field_json&#91;<span class=\"hljs-string\">'location'<\/span>]   = <span class=\"hljs-keyword\">array<\/span>(\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-keyword\">array<\/span>(\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t<span class=\"hljs-keyword\">array<\/span>(\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-string\">'param'<\/span>    =&gt; <span class=\"hljs-string\">'block'<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-string\">'operator'<\/span> =&gt; <span class=\"hljs-string\">'=='<\/span>,\n<\/span><\/span><mark class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-string\">'value'<\/span>    =&gt; <span class=\"hljs-string\">'acf\/accordion'<\/span>, <span class=\"hljs-comment\">\/\/ block.json name.<\/span>\n<\/span><\/mark><span class='shcb-loc'><span>\t\t\t),\n<\/span><\/span><span class='shcb-loc'><span>\t\t),\n<\/span><\/span><span class='shcb-loc'><span>\t);\n<\/span><\/span><span class='shcb-loc'><span>\t$field_json&#91;<span class=\"hljs-string\">'local'<\/span>]      = <span class=\"hljs-string\">'json'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\t$field_json&#91;<span class=\"hljs-string\">'local_file'<\/span>] = $path;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>\tacf_add_local_field_group( $field_json );\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><span class='shcb-loc'><span>add_action( <span class=\"hljs-string\">'acf\/include_fields'<\/span>, <span class=\"hljs-string\">'acf_accordion_block_register_include_fields'<\/span> );\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<p>The two things to note are that the <code>$path<\/code> points to our <code>acf-fields.json<\/code>, and the <code>'location'<\/code> is assigned to the <code>acf\/accordion<\/code>. The <code>acf\/accordion<\/code> needs to match the <code>name<\/code> of our block within the <code>build\/block.json<\/code> file. Keep in mind that everything in the <code>build\/<\/code> directory is automatically built with <code><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-scripts\/\" target=\"_blank\" rel=\"noreferrer noopener\">@wordpress\/scripts<\/a><\/code>, which was installed as part of <code>@wordpress\/create-block<\/code> when we created our plugin. Everything in the <code>src\/<\/code> directory is the source of our block.<\/p>\n\n\n\n<p>The <code>block.json<\/code> is the heart of registering blocks and you can read all about it here: <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-metadata\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-metadata\/<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"register-category\">Register a Custom Block Category<\/h3>\n\n\n\n<p>You&#8217;ll recall that when we generated our plugin we passed the <code>--category acf<\/code>. This assigned a custom category to our block in the <code>block.json<\/code>. However, the custom block category needs to be registered. Otherwise, it does not truly exist.<\/p>\n\n\n\n<div class=\"wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"has-text-align-center has-polar-background-color has-background has-small-font-size\" style=\"line-height:1.2\">Add this to your plugin&#8217;s <code>acf-accordion-block.php<\/code> to register a custom <code>acf<\/code>category.<\/p>\n\n\n<pre class=\"wp-block-code\" style=\"margin-top:0px;margin-bottom:0px\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-comment\">\/**<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * Register a custom block category for our blocks.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * <span class=\"hljs-doctag\">@link<\/span> https:\/\/developer.wordpress.org\/reference\/hooks\/block_categories_all\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * <span class=\"hljs-doctag\">@param<\/span> array $block_categories Existing block categories<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * <span class=\"hljs-doctag\">@return<\/span> array Block categories<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">acf_accordion_block_block_categories<\/span><span class=\"hljs-params\">( $block_categories )<\/span> <\/span>{\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>\t$block_categories = array_merge(\n<\/span><\/span><span class='shcb-loc'><span>\t\t&#91;\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t&#91;\n<\/span><\/span><mark class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-string\">'slug'<\/span>  =&gt; <span class=\"hljs-string\">'acf-blocks'<\/span>,\n<\/span><\/mark><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-string\">'title'<\/span> =&gt; __( <span class=\"hljs-string\">'ACF Blocks'<\/span>, <span class=\"hljs-string\">'acf_accordion_block'<\/span> ),\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-string\">'icon'<\/span>  =&gt; <span class=\"hljs-string\">'&lt;svg viewBox=\"0 0 55 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;&lt;path d=\"M43.9986 23.8816H38.0521V0.0253448H53.9034V5.58064H43.9986V9.83762H53.334V15.2547H43.9986V23.8825V23.8816Z\" fill=\"black\"\/&gt;&lt;path opacity=\"0.05\" d=\"M36.4832 13.8697H42.3772C41.5051 19.9417 36.3849 23.9574 30.1814 23.9574C23.3882 23.9574 17.8572 18.8809 17.8572 12.0448C17.843 10.4551 18.1521 8.879 18.7658 7.41239C19.3795 5.94579 20.2849 4.61924 21.4271 3.51334C23.7714 1.24304 26.9182 -0.00834104 30.1814 0.0320335C36.3275 0.0320335 41.5908 4.07879 42.3392 10.0536H36.4511C34.6807 3.2856 23.649 3.94741 23.649 12.0448C23.649 20.1432 34.8189 20.7398 36.4832 13.8716V13.8697Z\" fill=\"black\"\/&gt;&lt;path d=\"M35.2772 13.8697C34.266 17.2858 30.667 19.317 27.1244 18.4664C23.5798 17.6128 21.3588 14.187 22.0946 10.7047C22.8294 7.22146 26.2572 4.92655 29.8582 5.50758C31.3334 5.70738 32.6937 6.41247 33.7074 7.50273C34.408 8.22394 34.9337 9.0963 35.2442 10.0526H40.96C40.2116 4.06425 34.9337 0.0320875 28.8022 0.0320875C25.5386 -0.00942939 22.391 1.24129 20.0459 3.51144C18.903 4.61761 17.997 5.94473 17.3831 7.41208C16.7693 8.87942 16.4603 10.4563 16.4751 12.0468C16.4751 18.8829 21.9739 23.9574 28.8042 23.9574C35.0028 23.9574 40.1084 19.9418 40.996 13.8697H35.2763H35.2772Z\" fill=\"black\"\/&gt;&lt;path opacity=\"0.05\" d=\"M17.5146 20.4109H9.2391L7.88629 23.8776H1.55337L11.245 0H15.4689L25.5459 23.8854H18.8597L17.5127 20.4109H17.5146ZM11.5914 14.5004L11.3841 15.0396H15.4017L15.2625 14.6347L13.3919 9.51446L11.5914 14.5004Z\" fill=\"black\"\/&gt;&lt;path d=\"M15.9476 20.4109H7.68573L6.33389 23.8776H0L9.69257 0H13.9165L23.9935 23.8854H17.3102L15.9476 20.4109ZM10.0381 14.5004L9.83174 15.0396H13.8493L13.7092 14.6347L11.8396 9.51446L10.039 14.5004H10.0381Z\" fill=\"black\"\/&gt;&lt;\/svg&gt;'<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t]\n<\/span><\/span><span class='shcb-loc'><span>\t\t],\n<\/span><\/span><span class='shcb-loc'><span>\t\t$block_categories,\n<\/span><\/span><span class='shcb-loc'><span>\t);\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-keyword\">return<\/span> $block_categories;\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><span class='shcb-loc'><span>add_filter( <span class=\"hljs-string\">'block_categories_all'<\/span>, <span class=\"hljs-string\">'acf_accordion_block_block_categories'<\/span> );\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<p>The <code>'slug' =&gt; 'acf-blocks'<\/code> is the crucial piece here. As long as this <code>slug<\/code> matches the category within the <code>block.json<\/code> then the block will be properly assigned to this new custom &#8220;ACF Blocks&#8221; category.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"call-block-json\">Call <code>block.json<\/code> Directly with <code>register_block_type()<\/code><\/h3>\n\n\n\n<p>By default, the <code>@wordpress\/create-block<\/code> uses <code><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type\/\" target=\"_blank\" rel=\"noreferrer noopener\">register_block_type()<\/a><\/code>&#8216;s <code>render_callback<\/code> to assign the <code>template.php<\/code> output. However, we&#8217;re going to streamline this a bit and call the block&#8217;s <code>build\/block.json<\/code> directly and let ACF&#8217;s <code>\"renderTemplate\": \"accordion.php\"<\/code> do the talking.<\/p>\n\n\n\n<div class=\"wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-align-center has-polar-background-color has-background has-small-font-size\" style=\"line-height:1.2\">Before: <code>acf-accordion-block.php<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" style=\"margin-top:0px;margin-bottom:0px\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-comment\">\/**<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * Registers the block using the metadata loaded from the `block.json` file.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * Behind the scenes, it registers also all assets so they can be enqueued<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * through the block editor in the corresponding context.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * <span class=\"hljs-doctag\">@see<\/span> https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">acf_accordion_block_init<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n<\/span><\/span><span class='shcb-loc'><span>\tregister_block_type(\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-keyword\">__DIR__<\/span> . <span class=\"hljs-string\">'\/build'<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-keyword\">array<\/span>(\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t<span class=\"hljs-string\">'render_callback'<\/span> =&gt; <span class=\"hljs-string\">'acf_accordion_block_render_callback'<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t)\n<\/span><\/span><span class='shcb-loc'><span>\t);\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><span class='shcb-loc'><span>add_action( <span class=\"hljs-string\">'init'<\/span>, <span class=\"hljs-string\">'acf_accordion_block_init'<\/span> );\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">\/**<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * Render callback function.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * <span class=\"hljs-doctag\">@param<\/span> array    $attributes The block attributes.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * <span class=\"hljs-doctag\">@param<\/span> string   $content    The block content.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * <span class=\"hljs-doctag\">@param<\/span> WP_Block $block      Block instance.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * <span class=\"hljs-doctag\">@return<\/span> string The rendered output.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">acf_accordion_block_render_callback<\/span><span class=\"hljs-params\">( $attributes, $content, $block )<\/span> <\/span>{\n<\/span><\/span><span class='shcb-loc'><span>\tob_start();\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-keyword\">require<\/span> plugin_dir_path( <span class=\"hljs-keyword\">__FILE__<\/span> ) . <span class=\"hljs-string\">'build\/template.php'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-keyword\">return<\/span> ob_get_clean();\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-align-center has-polar-background-color has-background has-small-font-size\" style=\"line-height:1.2\">After: <code>acf-accordion-block.php<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" style=\"margin-top:0px;margin-bottom:0px\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-comment\">\/**<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * We register the block on init, earlier than acf\/init,<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * so we can make sure we ask ACF to load this block's fields.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * <span class=\"hljs-doctag\">@return<\/span> void<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">acf_accordion_block_register<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n<\/span><\/span><span class='shcb-loc'><span>\tregister_block_type( dirname(<span class=\"hljs-keyword\">__FILE__<\/span>) . <span class=\"hljs-string\">'\/build\/block.json'<\/span> );\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><span class='shcb-loc'><span>add_action( <span class=\"hljs-string\">'init'<\/span>, <span class=\"hljs-string\">'acf_accordion_block_register'<\/span>, <span class=\"hljs-number\">5<\/span> );\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n<\/div>\n<\/div>\n\n\n\n<p>And now we need to update the block&#8217;s <code>block.json<\/code> to integrate ACF&#8217;s custom <code>\"acf\"<\/code> keyed object.<\/p>\n\n\n\n<div class=\"wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"has-text-align-center has-polar-background-color has-background has-small-font-size\" style=\"line-height:1.2\">The updated <code>src\/block.json<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" style=\"margin-top:0px;margin-bottom:0px\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>{\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"$schema\"<\/span>: <span class=\"hljs-string\">\"https:\/\/schemas.wp.org\/trunk\/block.json\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"apiVersion\"<\/span>: <span class=\"hljs-number\">2<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"name\"<\/span>: <span class=\"hljs-string\">\"acf\/accordion\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"version\"<\/span>: <span class=\"hljs-string\">\"0.1.0\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"title\"<\/span>: <span class=\"hljs-string\">\"ACF Accordion Block\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"category\"<\/span>: <span class=\"hljs-string\">\"acf-blocks\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"icon\"<\/span>: <span class=\"hljs-string\">\"menu-alt3\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"description\"<\/span>: <span class=\"hljs-string\">\"An accordion block with collapsible sections.\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"supports\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">\"color\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">\"text\"<\/span>: <span class=\"hljs-literal\">true<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">\"background\"<\/span>: <span class=\"hljs-literal\">false<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t},\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">\"mode\"<\/span>: <span class=\"hljs-literal\">false<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t},\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"keywords\"<\/span>: &#91;\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-string\">\"accordion\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-string\">\"toggle\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-string\">\"expand\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t],\n<\/span><\/span><mark class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"script\"<\/span>: <span class=\"hljs-string\">\"file:.\/accordion.js\"<\/span>,\n<\/span><\/mark><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"style\"<\/span>: <span class=\"hljs-string\">\"file:.\/accordion.css\"<\/span>,\n<\/span><\/span><mark class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"acf\"<\/span>: {\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">\"mode\"<\/span>: <span class=\"hljs-string\">\"preview\"<\/span>,\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">\"renderTemplate\"<\/span>: <span class=\"hljs-string\">\"accordion.php\"<\/span>\n<\/span><\/mark><mark class='shcb-loc'><span>\t}\n<\/span><\/mark><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<p>Here we&#8217;re telling ACF to use the Preview mode when displaying the block, and passing the <code>accordion.php<\/code> to render our block&#8217;s logic. We&#8217;ve also replaced the <code>\"editorStyles\"<\/code> with <code>\"script\"<\/code>. This is where we&#8217;ll put our accordion&#8217;s JavaScript.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"add-display-logic\">Add <code>accordion.php<\/code> Display Logic<\/h3>\n\n\n\n<p>The <code>src\/accordion.php<\/code> will hold all of the logic to display our final block in both the editor and the front end.<\/p>\n\n\n\n<div class=\"wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"has-text-align-center has-polar-background-color has-background has-small-font-size\" style=\"line-height:1.2\">Goes in the <code>src\/accordion.php<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" style=\"margin-top:0px;margin-bottom:0px\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>&lt;?php\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">\/**<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * Accordion block.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>$wrapper_attributes = get_block_wrapper_attributes(\n<\/span><\/span><span class='shcb-loc'><span>\t&#91;\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-string\">'class'<\/span> =&gt; <span class=\"hljs-string\">'accordion'<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t]\n<\/span><\/span><span class='shcb-loc'><span>);\n<\/span><\/span><span class='shcb-loc'><span>?&gt;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> &lt;?<span class=\"hljs-attr\">php<\/span> <span class=\"hljs-attr\">echo<\/span> $<span class=\"hljs-attr\">wrapper_attributes<\/span>; ?&gt;<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\">\t<span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span> <span class=\"hljs-keyword\">if<\/span> ( <span class=\"hljs-keyword\">empty<\/span>( get_field( <span class=\"hljs-string\">'accordion_item'<\/span> ) ) ) : <span class=\"hljs-meta\">?&gt;<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"php\">\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"acf-accordion-block-empty-state\"<\/span>&gt;<\/span><span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span> esc_html_e( <span class=\"hljs-string\">'Please add some content in the sidebar.'<\/span>, <span class=\"hljs-string\">'acf-accordion-block'<\/span> ); <span class=\"hljs-meta\">?&gt;<\/span><\/span> \u2192<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\">\t<span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span> <span class=\"hljs-keyword\">endif<\/span>; <span class=\"hljs-meta\">?&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\">\t<span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"php\">\t<span class=\"hljs-keyword\">foreach<\/span> ( get_field( <span class=\"hljs-string\">'accordion_item'<\/span> ) <span class=\"hljs-keyword\">as<\/span> $accordion_item ) :<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"php\">\t\t$heading = $accordion_item&#91;<span class=\"hljs-string\">'accordion_heading'<\/span>] ? $accordion_item&#91;<span class=\"hljs-string\">'accordion_heading'<\/span>] : <span class=\"hljs-string\">'Your heading goes here'<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"php\">\t\t$content = $accordion_item&#91;<span class=\"hljs-string\">'accordion_content'<\/span>] ? $accordion_item&#91;<span class=\"hljs-string\">'accordion_content'<\/span>] : <span class=\"hljs-string\">'Your content goes here...'<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"php\">\t\t<span class=\"hljs-meta\">?&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"php\">\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"accordion-header\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"button\"<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"php\"><span class=\"hljs-tag\">\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"accordion-title\"<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t<span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span> <span class=\"hljs-keyword\">echo<\/span> esc_html( $heading ); <span class=\"hljs-meta\">?&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"php\">\t\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"accordion-icon\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"accordion-content\"<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"accordion-label\"<\/span>&gt;<\/span><span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span> <span class=\"hljs-keyword\">echo<\/span> esc_html( $heading ); <span class=\"hljs-meta\">?&gt;<\/span><\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\">\t\t\t<span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span> <span class=\"hljs-keyword\">echo<\/span> $content; <span class=\"hljs-meta\">?&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\">\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><span class=\"hljs-comment\">&lt;!-- .accordion-content --&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\">\t\t<span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\">\t\t<span class=\"hljs-keyword\">endforeach<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\">\t<span class=\"hljs-meta\">?&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>&lt;!-- .accordion --&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><span class=\"php\"><span class=\"hljs-tag\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"add-css-js\">Add Accordion CSS and JavaScript<\/h3>\n\n\n\n<p>The amazing team at 10up created an <a href=\"https:\/\/baseline.10up.com\/component\/accordion\/\" target=\"_blank\" rel=\"noreferrer noopener\">accordion component package<\/a>, which offers robust accessibility affordances. This is what we&#8217;ll rely on for hooking up the JavaScript. Some highlights include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Extended key bindings to allow users to easily navigate in and out of accordion headings and content, e.g. <code>home<\/code>, <code>end<\/code>, <code>up<\/code> and <code>down<\/code>.<\/li>\n\n\n\n<li>Relies on simple, native HTML elements to avoid unnecessary ARIA, e.g. <code>button<\/code>.<\/li>\n<\/ul>\n\n\n\n<p>We can install this into our plugin with: <code>npm install --save @10up\/component-accordion<\/code><\/p>\n\n\n\n<div class=\"wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"has-text-align-center has-polar-background-color has-background has-small-font-size\" style=\"line-height:1.2\">Goes in the <code>src\/accordion.js<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" style=\"margin-top:0px;margin-bottom:0px\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-comment\">\/*<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * Accordion styling and state.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'.\/accordion.scss'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> Accordion <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@10up\/component-accordion'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">if<\/span> ( <span class=\"hljs-keyword\">typeof<\/span> <span class=\"hljs-built_in\">window<\/span>.ACFAccordionBlock !== <span class=\"hljs-string\">'object'<\/span> ) {\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-built_in\">window<\/span>.ACFAccordionBlock = {};\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-built_in\">window<\/span>.ACFAccordionBlock.Accordion = Accordion;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">accordionsInit<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-keyword\">new<\/span> ACFAccordionBlock.Accordion( <span class=\"hljs-string\">'.accordion'<\/span> );\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-built_in\">document<\/span>.addEventListener( <span class=\"hljs-string\">'DOMContentLoaded'<\/span>, () =&gt; {\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-keyword\">if<\/span> ( <span class=\"hljs-built_in\">window<\/span>.acf ) {\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-built_in\">window<\/span>.acf.addAction( <span class=\"hljs-string\">'render_block_preview'<\/span>, accordionsInit );\n<\/span><\/span><span class='shcb-loc'><span>\t} <span class=\"hljs-keyword\">else<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>\t\taccordionsInit();\n<\/span><\/span><span class='shcb-loc'><span>\t}\n<\/span><\/span><span class='shcb-loc'><span>} );\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<p>The complete and final CSS and JavaScript can be obtained from the final <a href=\"https:\/\/wpeng.in\/882924-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">plugin&#8217;s repo<\/a>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>src\/accordion.scss<\/code><\/li>\n\n\n\n<li><code>src\/accordion.js<\/code><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"build-final-block\">Build Our Final Block with <code>@wordpress\/scripts<\/code><\/h2>\n\n\n\n<p>Now that we have our plugin set up and activated and our accordion block ready to go, we need to run <code>npm run build<\/code> to build our block.<\/p>\n\n\n\n<p>You should now be able to add and edit your Accordion block.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"827\" height=\"664\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/accordion-demo.gif\" alt=\"Accordion block as displayed in the Frost theme\" class=\"wp-image-4843\"\/><figcaption class=\"wp-element-caption\">The ACF Accordion block as displayed in the Frost theme (Dark mode)<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>There are quite a few steps to organize and build out a custom block. However, there are enhancements being made to the <code>@wordpress\/create-block<\/code> package that should allow for a faster scaffolding experience.<\/p>\n\n\n\n<p>I hope you found this tutorial helpful, and please reach out to me <a href=\"https:\/\/twitter.com\/dcook\" target=\"_blank\" rel=\"noreferrer noopener\">@dcook <\/a>on Twitter if you hit any snags or have any questions.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Create an accordion block with ACF Pro integration.<\/p>\n","protected":false},"author":11,"featured_media":4839,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":""},"categories":[1],"tags":[10],"class_list":["post-4792","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-acf-pro"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Create an Accordion Block with Advanced Custom Fields - Builders<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wpengine.com\/builders\/accordion-block-acf-fields\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create an Accordion Block with Advanced Custom Fields - Builders\" \/>\n<meta property=\"og:description\" content=\"Create an accordion block with ACF Pro integration.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/builders\/accordion-block-acf-fields\/\" \/>\n<meta property=\"og:site_name\" content=\"Builders\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-13T21:29:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-17T19:28:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/create-accordion-block-og.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Damon Cook\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/create-accordion-block-og.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@dcook\" \/>\n<meta name=\"twitter:site\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Damon Cook\" \/>\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\":\"Article\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/accordion-block-acf-fields\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/accordion-block-acf-fields\\\/\"},\"author\":{\"name\":\"Damon Cook\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/9d8d20c8a321b90faceae588fcf6d30d\"},\"headline\":\"Create an Accordion Block with Advanced Custom Fields\",\"datePublished\":\"2022-10-13T21:29:15+00:00\",\"dateModified\":\"2023-08-17T19:28:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/accordion-block-acf-fields\\\/\"},\"wordCount\":1013,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/accordion-block-acf-fields\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/accordion-block-acf.png\",\"keywords\":[\"ACF PRO\"],\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/accordion-block-acf-fields\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/accordion-block-acf-fields\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/accordion-block-acf-fields\\\/\",\"name\":\"Create an Accordion Block with Advanced Custom Fields - Builders\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/accordion-block-acf-fields\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/accordion-block-acf-fields\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/accordion-block-acf.png\",\"datePublished\":\"2022-10-13T21:29:15+00:00\",\"dateModified\":\"2023-08-17T19:28:58+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/accordion-block-acf-fields\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/accordion-block-acf-fields\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/accordion-block-acf-fields\\\/#primaryimage\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/accordion-block-acf.png\",\"contentUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/accordion-block-acf.png\",\"width\":1920,\"height\":1080,\"caption\":\"accordion block with ACF\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/accordion-block-acf-fields\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create an Accordion Block with Advanced Custom Fields\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"name\":\"Builders\",\"description\":\"Reimagining the way we build with WordPress.\",\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\",\"name\":\"WP Engine\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"contentUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"width\":348,\"height\":68,\"caption\":\"WP Engine\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/wpebuilders\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCh1WuL54XFb9ZI6m6goFv1g\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/9d8d20c8a321b90faceae588fcf6d30d\",\"name\":\"Damon Cook\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/18d75285d6803fab88b7f45601bb68cbac7c3956347217c06a0291e27dc65f6a?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/18d75285d6803fab88b7f45601bb68cbac7c3956347217c06a0291e27dc65f6a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/18d75285d6803fab88b7f45601bb68cbac7c3956347217c06a0291e27dc65f6a?s=96&d=mm&r=g\",\"caption\":\"Damon Cook\"},\"description\":\"Damon Cook is a Developer Advocate at WP Engine. Previously, he navigated the WordPress agency land for a decade. He is a purveyor and discoverer of musical frisson. He can be found in the realms of WordPress Slack, WooCommerce Slack, and Twitter.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/dcook\"],\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/author\\\/damon-cook\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create an Accordion Block with Advanced Custom Fields - Builders","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:\/\/wpengine.com\/builders\/accordion-block-acf-fields\/","og_locale":"en_US","og_type":"article","og_title":"Create an Accordion Block with Advanced Custom Fields - Builders","og_description":"Create an accordion block with ACF Pro integration.","og_url":"https:\/\/wpengine.com\/builders\/accordion-block-acf-fields\/","og_site_name":"Builders","article_published_time":"2022-10-13T21:29:15+00:00","article_modified_time":"2023-08-17T19:28:58+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/create-accordion-block-og.jpg","type":"image\/jpeg"}],"author":"Damon Cook","twitter_card":"summary_large_image","twitter_image":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/create-accordion-block-og.jpg","twitter_creator":"@dcook","twitter_site":"@wpebuilders","twitter_misc":{"Written by":"Damon Cook","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wpengine.com\/builders\/accordion-block-acf-fields\/#article","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/accordion-block-acf-fields\/"},"author":{"name":"Damon Cook","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/9d8d20c8a321b90faceae588fcf6d30d"},"headline":"Create an Accordion Block with Advanced Custom Fields","datePublished":"2022-10-13T21:29:15+00:00","dateModified":"2023-08-17T19:28:58+00:00","mainEntityOfPage":{"@id":"https:\/\/wpengine.com\/builders\/accordion-block-acf-fields\/"},"wordCount":1013,"commentCount":0,"publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"image":{"@id":"https:\/\/wpengine.com\/builders\/accordion-block-acf-fields\/#primaryimage"},"thumbnailUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/accordion-block-acf.png","keywords":["ACF PRO"],"articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wpengine.com\/builders\/accordion-block-acf-fields\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wpengine.com\/builders\/accordion-block-acf-fields\/","url":"https:\/\/wpengine.com\/builders\/accordion-block-acf-fields\/","name":"Create an Accordion Block with Advanced Custom Fields - Builders","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wpengine.com\/builders\/accordion-block-acf-fields\/#primaryimage"},"image":{"@id":"https:\/\/wpengine.com\/builders\/accordion-block-acf-fields\/#primaryimage"},"thumbnailUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/accordion-block-acf.png","datePublished":"2022-10-13T21:29:15+00:00","dateModified":"2023-08-17T19:28:58+00:00","breadcrumb":{"@id":"https:\/\/wpengine.com\/builders\/accordion-block-acf-fields\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/builders\/accordion-block-acf-fields\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/accordion-block-acf-fields\/#primaryimage","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/accordion-block-acf.png","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/accordion-block-acf.png","width":1920,"height":1080,"caption":"accordion block with ACF"},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/builders\/accordion-block-acf-fields\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/builders\/"},{"@type":"ListItem","position":2,"name":"Create an Accordion Block with Advanced Custom Fields"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/builders\/#website","url":"https:\/\/wpengine.com\/builders\/","name":"Builders","description":"Reimagining the way we build with WordPress.","publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/builders\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wpengine.com\/builders\/#organization","name":"WP Engine","url":"https:\/\/wpengine.com\/builders\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","width":348,"height":68,"caption":"WP Engine"},"image":{"@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/wpebuilders","https:\/\/www.youtube.com\/channel\/UCh1WuL54XFb9ZI6m6goFv1g"]},{"@type":"Person","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/9d8d20c8a321b90faceae588fcf6d30d","name":"Damon Cook","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/18d75285d6803fab88b7f45601bb68cbac7c3956347217c06a0291e27dc65f6a?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/18d75285d6803fab88b7f45601bb68cbac7c3956347217c06a0291e27dc65f6a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/18d75285d6803fab88b7f45601bb68cbac7c3956347217c06a0291e27dc65f6a?s=96&d=mm&r=g","caption":"Damon Cook"},"description":"Damon Cook is a Developer Advocate at WP Engine. Previously, he navigated the WordPress agency land for a decade. He is a purveyor and discoverer of musical frisson. He can be found in the realms of WordPress Slack, WooCommerce Slack, and Twitter.","sameAs":["https:\/\/x.com\/dcook"],"url":"https:\/\/wpengine.com\/builders\/author\/damon-cook\/"}]}},"_links":{"self":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/4792","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/comments?post=4792"}],"version-history":[{"count":0,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/4792\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/media\/4839"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/media?parent=4792"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/categories?post=4792"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/tags?post=4792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}