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
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.