Rick Radko gave a presentation on Gutenberg, the new block editor in WordPress. He began with an introduction and overview of the plan for his presentation. He then discussed what Gutenberg is, how it differs from the previous TinyMCE editor by using a block-based interface. Radko demonstrated Gutenberg and discussed various tips and tricks as well as add-ons that can extend Gutenberg's capabilities. He concluded by encouraging people not to avoid Gutenberg but to embrace it as the future of WordPress editing.

1. r3df.com
Rick Radko
Gutenberg/Blocks 101
(How to get along with, and even like
WordPress's block editor)
Ottawa WordPress Meetup
September9th, 2020

2. © 2020 Rick Radko, r3df.com
I am:
RickRadko– R-Cubed Design Forge
 Software, web and app designer/developer, trainer,
speaker.
 Creator of web sites and web applications since 1996,
and custom WordPress sites since 2008.
 WordCamp Ottawa and Ottawa WordPress Meetup
Founder.
Slides: slideshare.net/r3df
1

3. © 2020 Rick Radko, r3df.com
The Plan
 Slide show intro
 Terminology, general information
 Demo
 Gutenberg show and tell
 Tips and tricks
 Add-ons to take it to the next level
 Questions
2

4. © 2020 Rick Radko, r3df.com
What is Gutenberg?
 Gutenberg is the code name for a block
based content management interface
added in WordPress 5.0on
December 6th, 2018.
 Gutenberg is now the default content
editor replacingTinyMCE.
 Gutenberg now officially the “Block Editor” (but you’ll
see “Gutenberg” commonly used).
 wordpress.org/support/article/wordpress-editor/
 wordpress.org/gutenberg/handbook/ 3

5. © 2020 Rick Radko, r3df.com
The Past:TinyMCE– “Classic” Editor
4

6. © 2020 Rick Radko, r3df.com
Don't block the block - Embrace theblock!
Remove the ClassicEditorPlugin on your sites
 Promised support until December 31, 2021
 BUT: Many major plugins now use, or are starting to use
Gutenberg functions or structures for new features – you
may be missing out!
 TESTbefore removing!!!
5

7. © 2020 Rick Radko, r3df.com
Gutenberg– “Block” Editor!
6

8. © 2020 Rick Radko, r3df.com
“GutenBlocks”
In Gutenberg- everythingis a block!
 Blocks
 ALLcontent: headings, paragraphs, lists, images,
embeds, shortcodes, plugin content, widgets, pretty
much everything!
 Blocks have properties.
 Blocks even provide
structure/layout.
7

9. © 2020 Rick Radko, r3df.com
What/Where?
 Gutenberg can be used on:
 Posts and pages
 Somecustom content:CPT’s(needs support)
 Currently– only page content
 “Full Site” coming
 Widgets and Menus in WP 5.6
8

10. © 2020 Rick Radko, r3df.com
Content Area
9

11. © 2020 Rick Radko, r3df.com
Gutenberg Plugin
Gutenberg is available as a plugin for trying out new
features: wordpress.org/plugins/gutenberg/
 Latest features (Current version 8.9.3, WP 5.5 is 8.5)
 Block based widgets
 Video Position Controls – Cover block
10

12. © 2020 Rick Radko, r3df.com
Coming to Gutenberg:
 BlockPatterns– here now
 GlobalStyles
 Blockbased navigation
 Widgets
 Full Site Editing
11

13. © 2020 Rick Radko, r3df.com
Block patterns
 wptavern.com/exploring-the-first-block-patterns-to-land-
in-the-wordpress-theme-directory
 wordpress.org/plugins/block-pattern-builder/
12

14. © 2020 Rick Radko, r3df.com
Why?
 Speed:
 gutenberghub.com/gutenberg-vs-elementor-html-bloat/
 It’s part of Wordpress.
 It's free
 Supported– whole community
 Pace of development of 3rd party add-ons is very high
 It will have a lot of power in a year
13

15. © 2020 Rick Radko, r3df.com
Extending: Block Libraries
 Addblock libraries without much cost– Light !!!
 Provide functionality to replace page builders
 Mix and match parts you need
 Kadence + Google maps fromUAG
14

16. © 2020 Rick Radko, r3df.com
Many Block Libraries
 Kadence Blocks
 UltimateAdd-onsfor Gutenberg
 Genesis Blocks (was Atomic Blocks)
 CoBlocks
 AdvancedGutenbergBlocks
 Caxton
 Qubely- Advanced GutenbergBlocks
 Stackable- GutenbergBlocks
+ more almost every week
15

17. © 2020 Rick Radko, r3df.com
Disable Gutenberg full screen mode
 Has per user setting
 wordpress.org/plugins/blockeditor-fullscreen-mode-control/
 All users
 wordpress.org/plugins/disable-fullscreen-mode/
 wordpress.org/plugins/disable-block-editor-fullscreen-mode/
16

18. © 2020 Rick Radko, r3df.com
Takeaways
 The Block Editor is here to stay, and will be the future
of WordPress editing.
 Basic but: loads of plugins to add advanced features.
 Warts- yes it hasthem. Butso do the pagebuilders,
you'vejust learned to ignore them by working around
them.
 Don’t stick your head inthe
sandor you may miss out
on a lot of cool stuff.
17

19. © 2020 Rick Radko, r3df.com
Contact
RickRadko
 email: wpinfo@r3df.com
 twitter: @r3designforge
Website:
 r3df.com
Slides at:
 www.slideshare.net/r3df
18

20. © 2020 Rick Radko, r3df.com
The End
19