Create Dynamic Gutenberg Blocks with Query Loop, ACF, and GenerateBlocks

Discover with Build That Website how to create Dynamic Gutenberg Blocks with Query Loop, ACF (Advanced Custom Fields), and GenerateBlocks. This allows you to display and query dynamic data on your WordPress site, replacing the core functionality of expensive paid plugins while retaining full design control.

How to set up Dynamic Content

1. Setting Up
   Install and activate the Advanced Custom Fields plugin (version 6.1 or higher) and a plugin that allows you to display dynamic data inside Gutenberg blocks, such as GenerateBlocks.
2. Creating a Custom Post Type
   Navigate to ACF and create a new custom post type. In this tutorial, a custom post type called “featured brands” is created.
3. Creating Custom Fields
   After creating the custom post type, create a group of custom fields that you can pull data from on your custom post type. In this tutorial, the custom fields created include brand name, brand image, brand link, brand blurb, and brand price.
4. Creating a Query Loop in Gutenberg
   In your post or page, insert a Query Loop and select the custom post type you created. In the Query Loop settings, choose the post you want to display.
5. Adding Dynamic Content
   For each element in your Gutenberg block (image, headline, text, button), enable Dynamic Data and select the corresponding custom field as the content source.
6. Creating a Reusable Block
   Once you’ve set up your block with dynamic content, save it as a reusable block. This allows you to easily insert and customize it on different pages.

Why you should follow this tutorial

This tutorial is for anyone looking to enhance their WordPress site’s functionality and design with dynamic data. By creating dynamic content, you gain complete control over the design and functionality of your website. Plus, this method is not only efficient but also flexible, allowing you to create an unlimited number of posts with custom fields and query different ones on each page without having to create all these different templates.

Use Cases for Dynamic Gutenberg Blocks

Whether you’re running an affiliate marketing website, an e-commerce platform, or a blog, this tutorial is particularly useful. You can create custom post types for each of your affiliate brands or products, complete with custom fields. Then, you can use a Gutenberg block to display this dynamic content on your site, allowing you to easily update the content for each brand or product without having to manually edit each block.

Common Issues

1. Dynamic content not displaying
   Ensure you have enabled Dynamic Data for each element in your Gutenberg block and selected the corresponding custom field as the content source.
2. Query Loop not displaying the correct post
   In the Query Loop settings, ensure you have selected the correct post type and the post you want to display.
3. Custom fields not showing up in Dynamic Data options
   Ensure you have created the custom fields in Advanced Custom Fields and assigned them to the correct post type.
4. Reusable block not displaying correctly on different pages
   When inserting the reusable block on a different page, convert it to regular blocks. This allows you to adjust the Query Loop settings for each page.