A trainee project about using custom blocks in Wordpress Gutenberg editor

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!