This document discusses the differences between Gutenberg blocks and templates, custom post types (CPTs), and advanced custom fields (ACFs) in WordPress. It provides examples of using CPTs and ACFs to build a real estate website and discusses how that could be translated to using Gutenberg blocks and templates instead. It also gives examples of how CPTs might differ for an IMDB-style website for movies, TV shows, and people. The key difference is that CPTs and ACFs require changing the template to display the data on the front-end, while Gutenberg blocks display content without storing custom data in the database.

1. GUTENBERG TEMPLATES,
CPT’S AND ACF’S

2. ABOUT ME
QUALITY ASSURANCE SUPERVISOR, WEEVER APPS
FORMER INSTRUCTOR, SHERIDAN COLLEGE &
MOHAWK COLLEGE IN WEB DESIGN & DEVELOPMENT
SERIAL WORDCAMPER. SPOKEN AT MORE THAN 30,
INCLUDING ATTENDING MUMBAI, CO-ORGANIZER,
WORDCAMP HAMILTON, 2015-19, TORONTO, 2015
AND MILWAUKEE, 2016
Photo by Kiera Howe of DragonTeach

3. AGENDA
• QUICK REVIEW OF CPT’S AND ACF’S
• INTRO TO GUTENBERG BLOCKS AND TEMPLATES
• CASE STUDY: REAL ESTATE
• DIFFERENCES
• CASE STUDY: IMDB

4. CUSTOM POST TYPES
• Can act either as a Post or a Page (in theory)
• Can be organized by categories or tags (both built into
WordPress already) or by your own organization (custom
taxonomies)
• Will show up as a different entry on the dashboard
• Can be called in anywhere on your site

5. LISTINGS IS THE CPT
USING THE PLUGIN METHOD, THIS WILL
SHOW UP IN THE SIDEBAR ON THE
DASHBOARD

6. SOME
EXAMPLES
OF CPT’S
ECommerce product
pages, such as
WooCommerce
Portfolio pages
Author Pages Movie/TV Series pages or
People pages on
IMDB.com

7. (ADVANCED) CUSTOM FIELDS
● In a standard post on WordPress, you have a “Title”. This is a
field.
● Custom Fields hold pieces of data that you want to show. In
our example, perhaps Municipal Address of the property.
● Can hold different types of data, such as text or numbers.
This is the smallest of the three concepts.
● Advanced Custom Fields (ACF’s) is a plugin

8. SOME EXAMPLES OF ACF’S ON A LISTING

9. HOW DO I KNOW WHICH WITCH IS WHICH?
CPT’S AND ACF’S
• CUSTOM FIELDS ANSWERS THE
QUESTION: WHAT IS THIS PIECE OF
DATA IN RELATION TO THE CPT?
• CUSTOM POST TYPE ANSWERS THE
QUESTION: WHAT IS THE
CONTENT/LAYOUT?
GUTENBERG
• GUTENBERG BLOCK IS LIKE AN ACF
• GUTENBERG TEMPLATES ARE LIKE
CPT’S

10. OUR REAL ESTATE EXAMPLE (CPT’S & ACF’S)
CUSTOM POST TYPE
• Listing: Every listing for a Real
Estate firm
CUSTOM FIELDS
• Sale Price
• Rental Price
• Size of the unit

11. OUR REAL ESTATE EXAMPLE
CUSTOM
POST TYPE
▹PROPERTY
LISTING

12. OUR REAL ESTATE EXAMPLE
CUSTOM
FIELDS
▹ADDRESS
▹PRICE
▹SQ. FT.
Address

13. OUR REAL ESTATE EXAMPLE (GUTENBERG)
TEMPLATE
• Listing: Every listing for
different houses that are
identical in a subdivision
where the data is repeating
or similar
BLOCKS
• Address (same street,
different number)
• Sale Price (same range,
different number)
• Size of the unit (could be the
same)

14. GUTENBERG
BLOCKS
A SINGLE BLOCK OR A COLLECTION OF RELATED
BLOCKS

15. SO WHAT’S THE BIG DIFFERENCE?
WHY WOULD I USE ONE AND NOT THE OTHER OR VICE-VERSA?
Photo by Adi Goldstein on Unsplash

16. NO CODE
ONE REQUIRES YOU TO CHANGE THE
TEMPLATE FOR THE DATA TO APPEAR ON
THE FRONT END (CPT’S AND ACF’S)
THE OTHER DISPLAYS CONTENT, BUT
DOESN’T STORE THE DATA AS THAT DATA
IN THE DATABASE, SUCH AS A NUMBER,
OR CURRENCY
Photo by Markus Spiske on Unsplash

17. IMDB - TV SERIES
What’s Different?
• Seasons
• Episodes

18. IMDB - MOVIES
What’s different?
• Release Date

19. IMDB - PERSON
What’s different?
• Date of Birth
• Date of Death (if applicable)
• Role (actor, director)
• Known for...

20. RESOURCES
WordPress 5 Essential
Training on Lynda.com
with Morten Rand-
Hendriksen
Custom Post Types on
Lynda.com with Morten
Rand-Hendriksen
Advanced Custom Fields
on Lynda.com with
Morten Rand-Hendriksen
Posts & Pages,
Categories & Tags -
WordCamp Montreal
2015
How To Create
Gutenberg Templates
WTH are CPT’s and
ACF's? - WordCamp
Hamilton 2018

21. ANY
QUESTIONS?
YOU CAN FIND ME AT:
@SHANTADOTCA
HTTP://SHANTA.CA