This document discusses custom blocks in the Gutenberg editor in WordPress. It provides basics about WordPress and discusses the old editor versus the new Gutenberg editor. It then explains what Advanced Custom Fields (ACF) is and how it can be used to create custom blocks for Gutenberg. It provides a demo of how to register a custom block, create fields for it in ACF, and build a template to display the block with the custom fields on a page.

1. Custom
blocks in
Gutenberg
editor

2. Contents
Contents
Wordpress
Advanced Custom Fields
Custom Blocks
Demo
1
2
3
4
5

3. Just some
basics about
Wordpress
● Content Management System
● Good for blogs, eCommerce,
businesses and much more
● Easy to use, even for beginners.
● Fun fact: about 35% of all the
websites on the Internet are
powered by wordpress

4. The old editor
● Classic
● Has a lot of advocates
● Text based WYSIWYG editor
● No visual editing experience

5. The new editor:
Gutenberg
● Comes with block layout
● More flexible when creating a
page/post
● Allows developer to create
custom features

6. Advanced
Custom
Fields

7. What is ACF ?
● Wordpress plugin
● Helps you to build your website faster
● Easier for clients to use
● Custom blocks for Gutenberg editor

8. Custom
Blocks

9. What’s the point in them ?
● By default there are the basics: paragraphs, headings,
buttons, images etc.
● With custom blocks you can create anything you
want!
WOW
!

10. Demo

11. Demo
● Let’s create an image of a person with a colorful block
attached to it with the name of the person.
● How is this possible ?

12. Demo
First we need to register the
custom block we want to
create in the functions.php file

13. Demo
● After registering the block, we
can go to the wordpress admin
panel, choose Custom Fields
and create a new one
● Here you can add fields to your
custom block
● Be sure to select in Location
that block is equals to the block
you just registered in the
functions.php file

14. Demo
● Now we need to create the
template that will render our
custom block.
● Create a new file, with the
same name as your custom
block
● Get the field you just created
and add them to the template

15. Demo
● You will now find your custom
block in the Gutenberg editor
blocks
● Now you can add your image
of choosing and the name of
the person!
● Publish the page, add some css
and you’re done!