The premium version of Advanced Custom Fields has the ability to create custom Gutenberg blocks. I hadn’t used this before as there seemed to be a lot of steps in the block creation process. However, I recently purchased a copy of the Blockstudio plugin, which promises to streamline the process of creating ACF blocks, so I wanted to try it out. I was surprised to learn just how fast the block creation process could be with Blockstudio. My goal here was not to learn all there is about ACF Blocks or Blockstudio, but rather to see how fast I could get something up and to get an idea about these options. In this post I share my fast start experience and try out my block in the Full Site Editor.
The setup of the testing site was actually important in this case, so let me start with that. I’m using a child theme of the Page Builder Framework theme. These days child themes might seem a bit passé, but it makes sense when using Blockstudio, as we’ll see further on.
If we look at the list of installed plugins, we see that I have CPT-UI and ACF Pro installed. I used CPT-UI to create the Book Custom Post Type and I used ACF to add some book related fields. Blockstudio is also installed.
Blockstudio creates a menu item under the Tools menu, but its only purpose is for entering the license.
If we look at ACF, we see there is a field group for book related fields and it is linked to the Book Custom Post Type.
If we look in the editor we see the custom fields and here I have given them values. For this test I’m just looking at the first two fields, Authors Photo and Authors Website. As you may know, WordPress doesn’t output custom fields automatically, so I was wondering how it would work if I used an ACF block to render them.
Creating the ACF Block Using Block Studio
What the Documentation Showed Me
So I had Blockstudio installed, now what? I took a look at the documentation. Reading through the docs I saw that you “can” use PHP to define the block, but you can just define the block in the header comment block. Huh?
Reading the documentation further, I saw that you could also define the ACF fields in this file. You didn’t even have to define them in the ACF user interface. You could also add some HTML along with a call to the ACF helper function “get_field( ‘field_name’ )” to output the fields. So, literally I could do it all in one file.
In this screenshot a block is defined in the comment, then the fields are defined, and then at the bottom is the code for the output.
My Block Definition
So I created a PHP file called “book-author-info.php”. This is where the child theme comes in. You place that file, your block definition PHP file, in a subdirectory of the currently active theme (you can change the file location with some settings). With it in the child theme folder, it won’t be lost when the parent theme is updated.
Here is the code. At the top you see a comment with the file name. Then there is a comment block and you can see the Title, Book Author Info, is going to be the block name, it will show up in the design category, and have a lightbulb as its icon. Preview is turned on and so is an align option.
The fields definition is commented out because I prefer to define the fields in the ACF UI and at first I didn’t even know why we would get this option, but it became clear further along. Then there is some HTML, some DIVs with an image and an anchor link. I used the ACF helper “get_fields” to output the field values inline. I also added a class from the theme that turns an anchor into a button and some inline CSS.
<?php // book-author-info.php /* Title: Book Author Info Description: Book author block. Category: design Icon: lightbulb Mode: preview SupportsAlign: true SupportsMode: false */ /* $fields = array( array( 'key' => 'authors_website_key', 'label' => 'Website', 'name' => 'authors_website', 'type' => 'Url', ), array( 'key' => 'authors_photo_key', 'label' => 'Photo', 'name' => 'authors_photo', 'type' => 'Image', ), ); */ ?> <div> <div style="width:200; text-align:center;"> <img src="<?php echo get_field( 'authors_photo', get_the_ID() ) ?: ''; ?>" style="height:100px; width:100px;"> </div> <div style="width:200; text-align:center; margin-top:10px;"> <a href="<?php echo get_field( 'authors_website', get_the_ID() ) ?: 'https://google.com'; ?>" class="wpbf-button"> Author's Website </a> </div> </div>
Testing It Out
When I saw that the block showed up in the list of blocks I was amazed. This was very straightforward!
I added the block to the editor. I wasn’t too surprised that the values didn’t show. I imagined they’d show on the front-end.
And here it is on the front-end.
Will This Work with the Full Site Editor?
I thought, “it would be amazing if this works with the Full Site Editor”. ACF has released a beta of the pro version of the plugin for working with the Full Site Editor, so I installed the beta.
I then switched to the Twenty Twenty-Two theme, which is a block-based theme that supports Full Site Editing. Normally I should install the child theme, but I figured this is just a quick test, but I would use a child theme so my work isn’t lost when the theme gets an update.
I copied the folder and PHP file over to the active theme.
Then in the theme templates directory I created an empty HTML file for the book single, naming it “single-book.html”. This name follows the template naming rules that WordPress has.
This new template showed up in the Full Site Editor’s list of templates.
I clicked to edit it and first added the header and footer template parts and then between those added a columns block with two columns. In the right I added the core Post Title and Post Content blocks. On the left I added the core Featured Image block and under that my Book Author Info block. I wasn’t surprised that it didn’t render because there was no context for it to find a book record.
I went into the editor for my book and removed the block that was added earlier. Then I took a look at the book record on the front. Wow! It worked! Note that it didn’t show as a button because the class I used was from the Page Builder Framework theme, and we had changed themes.
Discussion and Conclusions
First, lets talk about Blockstudio. One issue I found with Blockstudio is the documentation. There are some examples using custom fields, but they are minimal. I think the expectation is that the user already knows how to create blocks using ACF or Meta Box. In my case, however, I wanted to avoid the complexities of ACF blocks. As you see, Blockstudio works for that, but for more complex use cases you will need to consult the ACF documentation. When it comes to Meta Box the documentation gap was even more apparent because the few examples given are ACF based and Meta Box has different syntax.
On the plus side support is good. I used the support option to contact Blockstudio help and got replies very quickly. Blockstudio is reasonably priced and provides some nice helper functions to make it easier to create ACF blocks. It comes with support for Tailwind, Alpine, and Twig. I’ve used Twig before and it is very capable for creating templates. You can output custom fields, use conditional logic, and loop over arrays, including the list of posts returned in an archive. So, my conclusion is that Blockstudio is geared towards power users and developers who are willing to do some experimentation, but it really does help you to create blocks faster.
Now, lets talk about ACF blocks and the Full Site Editor. WordPress core now provides all of the place holder blocks you need for creating your own templates for posts and pages. However, WordPress has never provided the ability to display custom fields on the front-end. And this is the benefit of ACF blocks, the end user doesn’t have to edit a PHP template. Instead, the content creator can display custom fields output using Gutenberg.
And now ACF allows us to take this a step further. The ACF Pro beta lets us use ACF blocks with the Full Site Editor. This means that site builders are less dependent on page builders. Remember that it will be possible to use regular themes in hybrid mode, so we won’t have to always use block-based themes. My conclusion in regards to the ACF beta is that it makes the Full Site Editor a more attractive option.
Overall I was pleased with Blockstudio. I was able to quickly create a simple block to display custom fields. With some time and experimentation I could create a very polished block. In terms of the Full Site Editor, it is still in its early stages and may not be suitable yet for many situations. However, the ability to use ACF blocks with the Full Site Editor is a very interesting option for site builders who want to go all in with Gutenberg and avoid page builders. For these site builders using ACF blocks and Blockstudio could be a game changer.