{"id":131719,"date":"2022-07-26T20:48:06","date_gmt":"2022-07-27T01:48:06","guid":{"rendered":"https:\/\/wpengine.com\/?post_type=resource&p=131719"},"modified":"2023-10-26T14:44:14","modified_gmt":"2023-10-26T19:44:14","slug":"create-great-wordpress-editing-experience-save-time-gutenberg-innerblocks","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/create-great-wordpress-editing-experience-save-time-gutenberg-innerblocks\/","title":{"rendered":"Create a Great WordPress Editing Experience and Save Time with Gutenberg InnerBlocks"},"content":{"rendered":"\n

Don\u2019t Repeat Yourself<\/strong><\/h2>\n\n\n\n

For developers, laziness can be a virtue. A well-made, reusable component saves time and allows for efficient reuse and consistency. This lends itself well to creating editing experiences in WordPress, as consistency breeds familiarity and knowledge for those using a website on a day-to-day basis.<\/p>\n\n\n\n

WordPress made a lot of noise with the release of the Gutenberg block editor, now known simply as \u201cThe Editor.\u201d For content editing, drafting, and publishing, it provides an excellent experience, far better than older WYSIWYGs. As a developer, I want to provide the best editing experience for my clients, I want to leverage core functionality, and I don\u2019t want to reinvent the wheel. Luckily, WordPress lets us do all of those things with custom blocks. <\/p>\n\n\n\n

Enter InnerBlocks<\/strong><\/h2>\n\n\n\n

InnerBlocks<\/a> is a great feature in the WordPress editor. Developers can use core blocks like the paragraph, headings, and buttons to create a consistent experience for a client. Instead of rewriting text sections and redeclaring fields, the client gets an experience that they become familiar with; editing and combining the same blocks. Let\u2019s take a look at a block we might need to build for a client, and see how InnerBlocks can help us achieve it. <\/p>\n\n\n\n

Building a Block with InnerBlocks<\/strong><\/h2>\n\n\n\n
\"An
Figure: an example Call to Action Block. This includes a headline, paragraph, and some button links.<\/em><\/figcaption><\/figure>\n\n\n\n

Let\u2019s examine this block and consider how we might build it. A common tool we reach for when making blocks is Advanced Custom Fields<\/a> (ACF). ACF Pro adds custom block support<\/a>, which lets developers write blocks in PHP for the editor and the front end. It also lets us use custom fields\u2014a paradigm many WordPress developers are familiar with. ACF supports InnerBlocks, meaning we can create a custom block, but won\u2019t even need to write custom code for that heading, paragraph, or buttons. <\/p>\n\n\n\n

With ACF Blocks, we can leverage core blocks to make a great editing experience for all the text we see in this block. Another potential option would be to use block patterns<\/a>, but as developers and curators of a fantastic WordPress experience, creating a custom block achieves the desired goal. <\/p>\n\n\n\n

Block Registration Code<\/h3>\n\n\n\n

Here\u2019s the code to register our custom ACF block. Read more about using the acf_register_block_type function here<\/a>. <\/p>\n\n\n\n

<?php\n\/**\n * Template for registering an ACF powered custom block.\n *\n * More info: https:\/\/www.advancedcustomfields.com\/resources\/blocks\/\n *\/\n\n\/**\n * Register the block.\n *\/\nadd_action(\n\t'acf\/init',\n\tfunction() {\n\t\t\/**\n\t\t * ACF block registration options here: https:\/\/www.advancedcustomfields.com\/resources\/acf_register_block_type\/\n\t\t *\/\n\t\tacf_register_block_type(\n\t\t\tarray(\n\t\t\t\t'name'            => 'call-to-action-demo', \/\/ JS will register as: acf\/{block-name}.\n\t\t\t\t'title'           => __( 'Call to Action ACF Demo', 'locale' ),\n\t\t\t\t'description'     => __( 'A custom ACF Call to Action block.', 'locale' ),\n\t\t\t\t'render_template' => 'partials\/blocks\/call-to-action-demo.php', \/\/ Change to block template.\n\t\t\t\t'category'        => 'design', \/\/ Category in the block inserter.\n\t\t\t\t'keywords'        => array( 'action', 'buttons', 'cta' ), \/\/ Searchable keywords.\n\t\t\t\t'supports'        => array(\n\t\t\t\t\t'align'  => false, \/\/ Disable support for align.\n\t\t\t\t\t'anchor' => true, \/\/ Enable support for anchor.\n\t\t\t\t\t'jsx'    => true, \/\/ Enable support for JSX.\n\t\t\t\t\t'mode'   => false, \/\/ Disable ACF block edit\/preview mode switching as we are only using InnerBlocks for editable content.\n\t\t\t\t),\n\t\t\t)\n\t\t);\n\t}\n);<\/code><\/pre>\n\n\n\n
Let\u2019s break the code down. We\u2019re using the acf_register_block_type function<\/a> to register our block, and we\u2019re passing an array of arguments that define our block and turn functionality on and off.<\/p>\n\n\n\n