← All posts

Dynamic Gutenberg Block with ACF Fields: Editable Title and Link

scripts organizer

A hero block with hardcoded text isn't much use to a content editor. To change the heading or the button link, someone has to open the code, and every copy of the block shows the same thing. In this part of the "Create Gutenberg Blocks the Easy Way" series, we make the static hero block from the previous video dynamic with ACF fields. Editors can then change the title, button text and button URL from the block editor, and every copy of the block keeps its own content.

We build the block with the Scripts Organizer ACF Gutenberg addon, so the whole block is plain PHP markup and SCSS. There's no React and no build step.

Create the ACF field group for the block

Our hero block doesn't have any fields yet. When you select it and switch to edit mode, Gutenberg shows: "This block contains no editable fields. Assign a field group to add fields to this block." The first job is to create that field group.

  1. On the page, select the Hero block and click the edit (pencil) icon in the block toolbar.
  2. Click the field group link in the message. It opens ACF's Add New Field Group screen.
  3. Name the group. We use Block - Hero, which makes it easy to see which block each group belongs to.
  4. Add three fields:

| Label | Name | Type | |---|---|---| | Title | title | Text | | Button | button | Text | | Button URL | button_url | Url |

  1. Click Save Changes.

Assign the field group only to the Hero block

These fields only make sense for the hero. If you leave the location rule on all blocks, they'll show up in blocks where they don't belong.

  1. In the field group, scroll down to Settings → Location Rules.
  2. Set the rule to Block and change it from All to Hero.
  3. Save the field group and reload the page editor.

Now the Title, Button and Button URL fields appear in the block sidebar when you select the Hero block. You can also fill them in directly inside the block in edit mode. We entered "This is dynamic title", "This is awesome button" and a Google Maps URL.

Pull the field values into the block's PHP

If you save the page now, the front end doesn't change. The values are stored in the database, but the block template doesn't read them yet. The fix is ACF's the_field() function, and you can copy the pattern from the ACF documentation page for the Text field.

Open the block in Scripts Organizer (Edit ACF Block Title: Hero, with Enable ACF Block turned on). Then, in the PHP tab, replace the hardcoded text with the field names:

<div class="hero">
    <h1><?php the_field('title'); ?></h1>
    <a
    href="<?php the_field('button_url'); ?>" class="hero_button"><?php the_field('button'); ?></a>
</div>

Click Update and reload the front end. The hero now shows the title and button text you typed in the editor, and the button points to the URL from the Button URL field.

We also added target="_blank" to the link so the button opens in a new tab, and put the anchor's attributes on separate lines to make the markup easier to read.

Duplicate the block: each copy has its own content

This is where the block becomes reusable. With static markup, a second hero would be an exact copy of the first. With fields, each copy stores its own values.

  1. In the editor, duplicate the Hero block.
  2. Fill in different values in the copy. We used "marko" as the title and "google maps direction" as the button text.
  3. Update the page and check the front end.

Both heroes render with the same design and different content. The markup and styles live in one place, so if you change the design in the block's code, every instance on the site picks up the change.

Small styling fix

If the spacing looks off once real content is in, fix it in the block's own styles. We set the H1's top margin to zero, and after an update the change shows on every hero instance.

Who is this for

  • WordPress developers who want custom Gutenberg blocks with editable content and don't want to write React or set up a build process.
  • Site builders who hand sites over to clients: editors change the text and links in the block sidebar and never touch code.
  • Anyone repeating the same section across pages, who wants one block definition that stays consistent everywhere while each copy keeps its own content.

FAQ

How do I make a custom Gutenberg block dynamic with ACF? Create an ACF field group with the fields you need, set its location rule to Block equal to your block, and then output the values in the block's PHP template with the_field('field_name').

Why doesn't my block show the field values on the front end? Saving the fields only stores the values in the database. The block template also has to read them. Replace the hardcoded text in the block's PHP with the_field() calls that use the exact field names, like title, button and button_url.

Why should the field group be assigned to one block and not all blocks? With the location rule set to all blocks, the fields appear on every ACF block. Setting it to the specific block (here, Hero) keeps the fields where they belong.

Can I use the same block several times on one page with different content? Yes. Duplicate the block and fill in new values. Each instance stores its own field data, and all of them share the same markup and styles.

Do I need React or a build step for this? No. In the video, the whole block is PHP markup with ACF field calls, written in Scripts Organizer's block editor and saved with Update.

Get the Scripts Organizer ACF Gutenberg Addon → dplugins.com

Related posts