Add ACF Pro fields

Create Block

The first step is to create Gutenberg block, so you have where to assign ACF fields to it. If Block is not created you will not be able to target fields location.

Create and Assign field to block

You need to have ACF Pro to be able to assign fields to the blocks.

Navigate to Custom Fields > Fields Groups and hit Add newbutton.

My best practice is to add same title as Block title and add prefix “Block -” Hello World.

Bellow you can create needed fields

Under location be sure to chose:
“Block” – “is equal to” – “Block name” in this case “Hello World”.

screenshot 2022 05 15 at 20.35.41

Add ACF php code to render the fields.

screenshot 2022 05 15 at 20.47.03

Edit ACF Values inside Gutenberg

There is two ways to edit it.

In sidebar

screenshot 2022 05 15 at 20.49.10

Switch to edit mode

screenshot 2022 05 15 at 20.49.23
screenshot 2022 05 15 at 20.49.30