June 9, 2023

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

Play Video

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.

Required Resources

GenerateBlocks Logo
Free Options
Gutenberg Logo
Credit to Build That Website
BuildThatWebsite YouTube Channel is a valuable resource for anyone interested in website development, particularly with WordPress. The channel offers a wide range of tutorials and guides
Create Dynamic Gutenberg Blocks with Query Loop, ACF, and GenerateBlocks
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.