Building Custom Blocks with ACF

Gutenberg, the new block-based content editor, introduces new tooling to enrich the editing experience. There’s just one little problem. These tools are extremely complicated to use!

Elliot Condon demonstrates an upcoming feature in ACF to help PHP developers create custom block types without a single line of JavaScript.

1. Building Custom Blocks
With ACF

Elliot Condon
Web Developer at ACF
@elliotcondon @wp_acf

2. A Quick intro to Gutenberg

Welcome to the Gutenberg Edito

The goal of this new editor is to make adding rich content to WordPress simple and
enjoyable. This whole post is composed of pieces of content—somewhat similar to LEGO
bricks—that you can move around and interact with. Move your cursor around and you'll
notice the different blocks light up with outlines and arrows. Press the arrows to
reposition blocks quickly, without fearing about losing things in the process of copying
and pasting.

Save Dratt

~~ EEN El

Document Block
Status & Visi

Publish immediate
D Stick to tne Front Page

DO Pending Review

Categories

Tags

3. Prev Gen

Specific areas
for specific content.

the_content();

4. New Gen

Block based
style guide for
any content type.

the_content();

5. What are blocks?

Heading
Paragraph
Image
Custom...

6. Quick Poll

#1 Developer or User?

7. Quick Poll

#2 Who is using Gutenberg?

8. Quick Poll

#3 Who is using ACF?

9. Quick Poll

#4 Who has created a custom block type?

10. Quick Poll
#4 Who has created a custom block type? Wy

js ho

11. Why is it so hard?

- Environment (npm and webpack)
- Language (React, JSX)

- API (inflexible)

- Debugging (minified JS code)

- Other restrictions (REST API)

12. Prove it!

A look at smashing magazine’s tutorial...

13. Solve it with ACF!

- 100% Dynamic PHP

- Minimal code

- Uses ACF's existing library of fields
- Flexible (allows for changes)

- Speeds up development

14. Demo

Creating testimonial and featured posts block types

15. Wrapping up

ACF Blocks = Easy Gutenberg Development

16. Questions?

Please no generic Gutenberg questions