acf blocks blockstudio and the full site editor

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.

Video Version

About Blockstudio

blockstudio home page

Blockstudio is a plugin that acts as a helper for the premium versions of ACF and Meta Box. It is in essence, a wrapper around their block creation functionality and it is a huge simplification. In this post I’m looking at the absolute simplest use case, where we are going to define an ACF block and its HTML output in a small amount of code. Note however, that Blockstudio comes with Tailwind and Alpine. Tailwind is a CSS utility framework and Alpine is a JavaScript library for adding behaviors to your markup. I’m not using either of those here. Blockstudio also gives you the option to use Twig for your layout. Twig is a powerful and easy to use templating engine, which I’m also not going to use. I’m mentioning these things to let you know that there is more to Blockstudio than I’m covering here.

Testing Site

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.

using the page builder frameowrk child theme

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.

list of installed plugins

Blockstudio creates a menu item under the Tools menu, but its only purpose is for entering the license.

blockstudio menu item

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.

acf fields linked to the book cpt

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.

book record in the editor

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?

blockstudio documentation

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.

do everything in one file

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.

pho file in theme folder

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!

my block shows up in the list of blocks

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.

my block added to editor

And here it is on the front-end.

my block showing 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.

switch to the beta version of acf pro

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.

switch to the 2022 block theme

I copied the folder and PHP file over to the active theme.

copied the foloder and php file to the new 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.

created an empty html template for the book single

This new template showed up in the Full Site Editor’s list of templates.

book template in fse tempate list

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.

block added to template

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.

wow it worked block showing on front

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.

Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. You will still pay the same amount so there is no extra cost to you. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”

Similar Posts