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 new” button.

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

Add ACF php code to render the fields.

Edit ACF Values inside Gutenberg

There is two ways to edit it.

In sidebar

Switch to edit mode