Gutenberg: Revolutionizing your WordPress site

R-Cubed Design Forge
R-Cubed Design ForgeR-Cubed Design Forge
r3df.com
Rick Radko
Gutenberg: Revolutionizing
your WordPress site
Ottawa WordPress Meetup
November 7th, 2018
© 2018 Rick Radko, r3df.com
TL;DR
 Gutenberg is the code name for a new block based
content management interface in WordPress 5.0, due
out on Nov. 19th.
 In 5.0 Gutenberg will be the default content editing
interface, and replaces the current editing interface.
 Sites MAY break, especially if you have a page builder!
 Test your sites, BEFORE WordPress 5.0!
 Not ready? You can block Gutenberg with a plugin.
Slides: slideshare.net/r3df
1
© 2018 Rick Radko, r3df.com
What is Gutenberg?
Historical note:
 Johannes Gutenberg is the inventor
of the movable-type printing press.
As pertains to WordPress:
 “Gutenberg” is the codename for the 2017 WordPress
editor focus. - codex.wordpress.org/Gutenberg
2
© 2018 Rick Radko, r3df.com
Gutenberg Editor Focus
The editor will endeavour to create a new page
and post building experience that makes
writing rich posts effortless, and has “blocks”
to make it easy what today might take
shortcodes, custom HTML, or “mystery meat”
embed discovery. — Matt Mullenweg
3
“
wordpress.org/gutenberg/handbook
© 2018 Rick Radko, r3df.com
“GutenBlocks”
In Gutenberg - everything is a block!
 Blocks
 ALL content: headings, paragraphs, lists, images,
embeds, shortcodes, plugin content, widgets, pretty
much everything!
 Blocks have properties.
 Blocks even provide
structure/layout.
4
© 2018 Rick Radko, r3df.com
The sky is falling!
The release schedule:
 make.wordpress.org/core/5-0
 Targeting: Nov 19th, part of WordPress 5.0.
 Oh, by the way, there is a Twenty Nineteen theme -
make.wordpress.org/core/2018/10/16/introducing-twenty-nineteen
 Beta 3 – slid 3 days to Nov 5th.
 While the release date may still be sliding, it is coming
soon!
5
© 2018 Rick Radko, r3df.com
Demo Sites
3 places you can try it out without installing anything:
 testgutenberg.com
 frontenberg.tomjn.com
 wordpress.org/gutenberg
6
© 2018 Rick Radko, r3df.com
Gutenberg Plugin
Gutenberg is currently available for testing as a plugin:
 https://wordpress.org/plugins/gutenberg/
7
© 2018 Rick Radko, r3df.com
Test WordPress 5.0
Installing WordPress betas
 WordPress Beta Tester plugin
wordpress.org/plugins/wordpress-beta-tester
8
© 2018 Rick Radko, r3df.com
Time to see it in action!
9
© 2018 Rick Radko, r3df.com
Future of Gutenberg
Not just an editor replacement, it changes everything!
 Gutenberg operates like a simple block based page
builder.
Gutenberg has three planned stages:
1. The post editing experience and the
implementation of blocks. ( WP 5.0)
2. Beyond the post, into page templates.
3. Full site customization.
10
© 2018 Rick Radko, r3df.com
Future of themes?
 Themes become block templates?
 Lock down block layouts, but not content
11
© 2018 Rick Radko, r3df.com
Issues
 Maturity
 Accessability
12
© 2018 Rick Radko, r3df.com
Getting Ready
Try out Gutenberg now!
 Try one of the demos.
 Install the Gutenberg plugin on a private test site.
 Subdomain on your hosting
 Localhost
 Have everyone who manages content on your site(s) try
it out
 Even better, create a copy of your site(s) and install
Gutenberg and try it there!
13
© 2018 Rick Radko, r3df.com
Getting Ready Continued…
Testing:
 Check with your website developer (if you have one) on
their plans for updates/testing.
 Google your theme and plugins to see if there are
Gutenberg updates, or any planned.
 Many of the major vendors have at least posted blog
posts about Gutenberg. – Some of them are very
interesting reading!
 Create a copy of your site(s) and install Gutenberg and
test it! 14
© 2018 Rick Radko, r3df.com
Getting Ready Continued…
Where are the problems likely to be:
 Themes:
 Highly custom themes.
 Custom page layouts/templates.
 Plugins:
 Custom content on pages.
 Meta boxes for metadata.
 Shortcodes
 Custom work that pushes WordPresses boundaries.
15
© 2018 Rick Radko, r3df.com
Getting Ready Continued….
Updating to Gutenberg:
 Create backups of your site before updating!
 Test Gutenberg on a development copy of your site,
before updating.
 Update to Gutenberg.
16
© 2018 Rick Radko, r3df.com
Blocking Gutenberg
 You can block Gutenberg with the Classic Editor Plugin.
 Classic Editor - wordpress.org/plugins/classic-editor
17
© 2018 Rick Radko, r3df.com
Blocking Gutenberg
 You can block Gutenberg with one of 2 other plugins.
 Gutenberg Ramp
wordpress.org/plugins/gutenberg-ramp
 Disable Gutenberg
wordpress.org/plugins/disable-gutenberg
18
© 2018 Rick Radko, r3df.com
Links
More information:
 https://wordpress.org/gutenberg/
 https://wordpress.org/gutenberg/handbook/
 + Tons of reviews blog posts and rants if you search
Google.
19
© 2018 Rick Radko, r3df.com
Contact
Rick Radko
 email: wpinfo@r3df.com
 twitter: @r3designforge
Website:
 r3df.com
Slides at:
 www.slideshare.net/r3df
20
1 of 21

Recommended

Gutenberg - The future of WordPress by
Gutenberg - The future of WordPressGutenberg - The future of WordPress
Gutenberg - The future of WordPressR-Cubed Design Forge
181 views18 slides
Gutenberg 101/Blocks - How to get along with, and even like WordPress's block... by
Gutenberg 101/Blocks - How to get along with, and even like WordPress's block...Gutenberg 101/Blocks - How to get along with, and even like WordPress's block...
Gutenberg 101/Blocks - How to get along with, and even like WordPress's block...R-Cubed Design Forge
216 views20 slides
Backups, Backups, Backups by
Backups, Backups, BackupsBackups, Backups, Backups
Backups, Backups, BackupsR-Cubed Design Forge
138 views50 slides
Introduction to WordPress - WordCamp Ottawa 2019 by
Introduction to WordPress - WordCamp Ottawa 2019Introduction to WordPress - WordCamp Ottawa 2019
Introduction to WordPress - WordCamp Ottawa 2019R-Cubed Design Forge
304 views77 slides
Finding themes for your WordPress site by
Finding themes for your WordPress siteFinding themes for your WordPress site
Finding themes for your WordPress siteR-Cubed Design Forge
83 views23 slides
Setting up a local web server environment by
Setting up a local web server environmentSetting up a local web server environment
Setting up a local web server environmentR-Cubed Design Forge
100 views8 slides

More Related Content

What's hot

WordPress website backups – they're not optional by
WordPress website backups – they're not optionalWordPress website backups – they're not optional
WordPress website backups – they're not optionalR-Cubed Design Forge
362 views45 slides
Setting up a local web server environment by
Setting up a local web server environmentSetting up a local web server environment
Setting up a local web server environmentR-Cubed Design Forge
303 views8 slides
Setting up a local web server for WordPress by
Setting up a local web server for WordPressSetting up a local web server for WordPress
Setting up a local web server for WordPressR-Cubed Design Forge
482 views6 slides
Intro to WordPress Plugin Development by
Intro to WordPress Plugin DevelopmentIntro to WordPress Plugin Development
Intro to WordPress Plugin DevelopmentR-Cubed Design Forge
2.4K views71 slides
Getting WordPress to speak your langauge by
Getting WordPress to speak your langaugeGetting WordPress to speak your langauge
Getting WordPress to speak your langaugeR-Cubed Design Forge
4.7K views100 slides
Meetup gitbook by
Meetup gitbookMeetup gitbook
Meetup gitbookRebecca Peltz
133 views31 slides

What's hot(20)

Bootstrapping your plugin by Marko Heijnen
Bootstrapping your pluginBootstrapping your plugin
Bootstrapping your plugin
Marko Heijnen1.1K views
Building plugins like a pro by Marko Heijnen
Building plugins like a proBuilding plugins like a pro
Building plugins like a pro
Marko Heijnen2.1K views
Front Page of Hacker News with GitLab Pages by Will Hall
Front Page of Hacker News with GitLab PagesFront Page of Hacker News with GitLab Pages
Front Page of Hacker News with GitLab Pages
Will Hall105 views
Easy Decoupled Sitebuilding with GraphQL and Next.js by Jani Tarvainen
Easy Decoupled Sitebuilding with GraphQL and Next.jsEasy Decoupled Sitebuilding with GraphQL and Next.js
Easy Decoupled Sitebuilding with GraphQL and Next.js
Jani Tarvainen789 views
Unscrambling An Omelette - How Companies Can Use WordPress Better - Jeremy Ke... by WordCamp Sydney
Unscrambling An Omelette - How Companies Can Use WordPress Better - Jeremy Ke...Unscrambling An Omelette - How Companies Can Use WordPress Better - Jeremy Ke...
Unscrambling An Omelette - How Companies Can Use WordPress Better - Jeremy Ke...
WordCamp Sydney474 views
The Future Is The Cloud by Gatsbyjs
The Future Is The CloudThe Future Is The Cloud
The Future Is The Cloud
Gatsbyjs82 views
Getting started with Next.js by Gökhan Sarı
Getting started with Next.jsGetting started with Next.js
Getting started with Next.js
Gökhan Sarı1.9K views
Submitting Your First Plugin to WordPress.org by Linchpin
Submitting Your First Plugin to WordPress.orgSubmitting Your First Plugin to WordPress.org
Submitting Your First Plugin to WordPress.org
Linchpin232 views
Introducing ofgodpaperframework by yangbo zhou
Introducing ofgodpaperframeworkIntroducing ofgodpaperframework
Introducing ofgodpaperframework
yangbo zhou204 views
Ppt full stack developer by SudhirVarpe1
Ppt full stack developerPpt full stack developer
Ppt full stack developer
SudhirVarpe19.6K views

Similar to Gutenberg: Revolutionizing your WordPress site

WordPress page builders a quick introduction by
WordPress page builders a quick introductionWordPress page builders a quick introduction
WordPress page builders a quick introductionR-Cubed Design Forge
518 views25 slides
WordPress page builders - a new tool to build awesome pages quickly by
WordPress page builders - a new tool to build awesome pages quicklyWordPress page builders - a new tool to build awesome pages quickly
WordPress page builders - a new tool to build awesome pages quicklyR-Cubed Design Forge
456 views40 slides
A peek into the world of WordPress plugin development by
A peek into the world of WordPress plugin developmentA peek into the world of WordPress plugin development
A peek into the world of WordPress plugin developmentR-Cubed Design Forge
8.5K views56 slides
Intro to development sites and site migration by
Intro to development sites and site migrationIntro to development sites and site migration
Intro to development sites and site migrationR-Cubed Design Forge
1.6K views73 slides
Introduction to WordPress, WordCamp Ottawa 2019 by
Introduction to WordPress, WordCamp Ottawa 2019Introduction to WordPress, WordCamp Ottawa 2019
Introduction to WordPress, WordCamp Ottawa 2019rickrrr
78 views77 slides
Multisite for multilingual by
Multisite for multilingualMultisite for multilingual
Multisite for multilingualR-Cubed Design Forge
1.9K views50 slides

Similar to Gutenberg: Revolutionizing your WordPress site(20)

WordPress page builders - a new tool to build awesome pages quickly by R-Cubed Design Forge
WordPress page builders - a new tool to build awesome pages quicklyWordPress page builders - a new tool to build awesome pages quickly
WordPress page builders - a new tool to build awesome pages quickly
A peek into the world of WordPress plugin development by R-Cubed Design Forge
A peek into the world of WordPress plugin developmentA peek into the world of WordPress plugin development
A peek into the world of WordPress plugin development
Introduction to WordPress, WordCamp Ottawa 2019 by rickrrr
Introduction to WordPress, WordCamp Ottawa 2019Introduction to WordPress, WordCamp Ottawa 2019
Introduction to WordPress, WordCamp Ottawa 2019
rickrrr78 views
Top 8 react static site generators for 2020 by Katy Slemon
Top 8 react static site generators for 2020Top 8 react static site generators for 2020
Top 8 react static site generators for 2020
Katy Slemon40 views
Backing up your WordPress website – it’s not optional by R-Cubed Design Forge
Backing up your WordPress website – it’s not optionalBacking up your WordPress website – it’s not optional
Backing up your WordPress website – it’s not optional
GitBucket: Open source self-hosting Git server built by Scala by takezoe
GitBucket: Open source self-hosting Git server built by ScalaGitBucket: Open source self-hosting Git server built by Scala
GitBucket: Open source self-hosting Git server built by Scala
takezoe4.4K views
Making the Magento 2 Javascript Loading Great Again - Robin van Raan by Magecom UK Limited
Making the Magento 2 Javascript Loading Great Again - Robin van RaanMaking the Magento 2 Javascript Loading Great Again - Robin van Raan
Making the Magento 2 Javascript Loading Great Again - Robin van Raan
Magecom UK Limited519 views
Word press optimizations by Shawn DeWolfe
Word press optimizations Word press optimizations
Word press optimizations
Shawn DeWolfe16 views
Build Fast WordPress Site With Gatsby by Imran Sayed
Build Fast WordPress Site With GatsbyBuild Fast WordPress Site With Gatsby
Build Fast WordPress Site With Gatsby
Imran Sayed1.3K views
Self Hosted Web-based GIT Repository Managers by Purav Gandhi
Self Hosted Web-based GIT Repository ManagersSelf Hosted Web-based GIT Repository Managers
Self Hosted Web-based GIT Repository Managers
Purav Gandhi1.6K views
Creating Customizer Options for Themes and Plugins by R-Cubed Design Forge
Creating Customizer Options for Themes and PluginsCreating Customizer Options for Themes and Plugins
Creating Customizer Options for Themes and Plugins

Recently uploaded

Kyo - Functional Scala 2023.pdf by
Kyo - Functional Scala 2023.pdfKyo - Functional Scala 2023.pdf
Kyo - Functional Scala 2023.pdfFlavio W. Brasil
400 views92 slides
Five Things You SHOULD Know About Postman by
Five Things You SHOULD Know About PostmanFive Things You SHOULD Know About Postman
Five Things You SHOULD Know About PostmanPostman
36 views43 slides
Piloting & Scaling Successfully With Microsoft Viva by
Piloting & Scaling Successfully With Microsoft VivaPiloting & Scaling Successfully With Microsoft Viva
Piloting & Scaling Successfully With Microsoft VivaRichard Harbridge
12 views160 slides
SAP Automation Using Bar Code and FIORI.pdf by
SAP Automation Using Bar Code and FIORI.pdfSAP Automation Using Bar Code and FIORI.pdf
SAP Automation Using Bar Code and FIORI.pdfVirendra Rai, PMP
23 views38 slides
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ... by
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...Jasper Oosterveld
19 views49 slides
virtual reality.pptx by
virtual reality.pptxvirtual reality.pptx
virtual reality.pptxG036GaikwadSnehal
14 views15 slides

Recently uploaded(20)

Five Things You SHOULD Know About Postman by Postman
Five Things You SHOULD Know About PostmanFive Things You SHOULD Know About Postman
Five Things You SHOULD Know About Postman
Postman36 views
Piloting & Scaling Successfully With Microsoft Viva by Richard Harbridge
Piloting & Scaling Successfully With Microsoft VivaPiloting & Scaling Successfully With Microsoft Viva
Piloting & Scaling Successfully With Microsoft Viva
SAP Automation Using Bar Code and FIORI.pdf by Virendra Rai, PMP
SAP Automation Using Bar Code and FIORI.pdfSAP Automation Using Bar Code and FIORI.pdf
SAP Automation Using Bar Code and FIORI.pdf
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ... by Jasper Oosterveld
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
Powerful Google developer tools for immediate impact! (2023-24) by wesley chun
Powerful Google developer tools for immediate impact! (2023-24)Powerful Google developer tools for immediate impact! (2023-24)
Powerful Google developer tools for immediate impact! (2023-24)
wesley chun10 views
Igniting Next Level Productivity with AI-Infused Data Integration Workflows by Safe Software
Igniting Next Level Productivity with AI-Infused Data Integration Workflows Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Safe Software280 views
Future of AR - Facebook Presentation by ssuserb54b561
Future of AR - Facebook PresentationFuture of AR - Facebook Presentation
Future of AR - Facebook Presentation
ssuserb54b56115 views
STPI OctaNE CoE Brochure.pdf by madhurjyapb
STPI OctaNE CoE Brochure.pdfSTPI OctaNE CoE Brochure.pdf
STPI OctaNE CoE Brochure.pdf
madhurjyapb14 views
Voice Logger - Telephony Integration Solution at Aegis by Nirmal Sharma
Voice Logger - Telephony Integration Solution at AegisVoice Logger - Telephony Integration Solution at Aegis
Voice Logger - Telephony Integration Solution at Aegis
Nirmal Sharma39 views
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f... by TrustArc
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc11 views
"Running students' code in isolation. The hard way", Yurii Holiuk by Fwdays
"Running students' code in isolation. The hard way", Yurii Holiuk "Running students' code in isolation. The hard way", Yurii Holiuk
"Running students' code in isolation. The hard way", Yurii Holiuk
Fwdays17 views

Gutenberg: Revolutionizing your WordPress site

  • 1. r3df.com Rick Radko Gutenberg: Revolutionizing your WordPress site Ottawa WordPress Meetup November 7th, 2018
  • 2. © 2018 Rick Radko, r3df.com TL;DR  Gutenberg is the code name for a new block based content management interface in WordPress 5.0, due out on Nov. 19th.  In 5.0 Gutenberg will be the default content editing interface, and replaces the current editing interface.  Sites MAY break, especially if you have a page builder!  Test your sites, BEFORE WordPress 5.0!  Not ready? You can block Gutenberg with a plugin. Slides: slideshare.net/r3df 1
  • 3. © 2018 Rick Radko, r3df.com What is Gutenberg? Historical note:  Johannes Gutenberg is the inventor of the movable-type printing press. As pertains to WordPress:  “Gutenberg” is the codename for the 2017 WordPress editor focus. - codex.wordpress.org/Gutenberg 2
  • 4. © 2018 Rick Radko, r3df.com Gutenberg Editor Focus The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery. — Matt Mullenweg 3 “ wordpress.org/gutenberg/handbook
  • 5. © 2018 Rick Radko, r3df.com “GutenBlocks” In Gutenberg - everything is a block!  Blocks  ALL content: headings, paragraphs, lists, images, embeds, shortcodes, plugin content, widgets, pretty much everything!  Blocks have properties.  Blocks even provide structure/layout. 4
  • 6. © 2018 Rick Radko, r3df.com The sky is falling! The release schedule:  make.wordpress.org/core/5-0  Targeting: Nov 19th, part of WordPress 5.0.  Oh, by the way, there is a Twenty Nineteen theme - make.wordpress.org/core/2018/10/16/introducing-twenty-nineteen  Beta 3 – slid 3 days to Nov 5th.  While the release date may still be sliding, it is coming soon! 5
  • 7. © 2018 Rick Radko, r3df.com Demo Sites 3 places you can try it out without installing anything:  testgutenberg.com  frontenberg.tomjn.com  wordpress.org/gutenberg 6
  • 8. © 2018 Rick Radko, r3df.com Gutenberg Plugin Gutenberg is currently available for testing as a plugin:  https://wordpress.org/plugins/gutenberg/ 7
  • 9. © 2018 Rick Radko, r3df.com Test WordPress 5.0 Installing WordPress betas  WordPress Beta Tester plugin wordpress.org/plugins/wordpress-beta-tester 8
  • 10. © 2018 Rick Radko, r3df.com Time to see it in action! 9
  • 11. © 2018 Rick Radko, r3df.com Future of Gutenberg Not just an editor replacement, it changes everything!  Gutenberg operates like a simple block based page builder. Gutenberg has three planned stages: 1. The post editing experience and the implementation of blocks. ( WP 5.0) 2. Beyond the post, into page templates. 3. Full site customization. 10
  • 12. © 2018 Rick Radko, r3df.com Future of themes?  Themes become block templates?  Lock down block layouts, but not content 11
  • 13. © 2018 Rick Radko, r3df.com Issues  Maturity  Accessability 12
  • 14. © 2018 Rick Radko, r3df.com Getting Ready Try out Gutenberg now!  Try one of the demos.  Install the Gutenberg plugin on a private test site.  Subdomain on your hosting  Localhost  Have everyone who manages content on your site(s) try it out  Even better, create a copy of your site(s) and install Gutenberg and try it there! 13
  • 15. © 2018 Rick Radko, r3df.com Getting Ready Continued… Testing:  Check with your website developer (if you have one) on their plans for updates/testing.  Google your theme and plugins to see if there are Gutenberg updates, or any planned.  Many of the major vendors have at least posted blog posts about Gutenberg. – Some of them are very interesting reading!  Create a copy of your site(s) and install Gutenberg and test it! 14
  • 16. © 2018 Rick Radko, r3df.com Getting Ready Continued… Where are the problems likely to be:  Themes:  Highly custom themes.  Custom page layouts/templates.  Plugins:  Custom content on pages.  Meta boxes for metadata.  Shortcodes  Custom work that pushes WordPresses boundaries. 15
  • 17. © 2018 Rick Radko, r3df.com Getting Ready Continued…. Updating to Gutenberg:  Create backups of your site before updating!  Test Gutenberg on a development copy of your site, before updating.  Update to Gutenberg. 16
  • 18. © 2018 Rick Radko, r3df.com Blocking Gutenberg  You can block Gutenberg with the Classic Editor Plugin.  Classic Editor - wordpress.org/plugins/classic-editor 17
  • 19. © 2018 Rick Radko, r3df.com Blocking Gutenberg  You can block Gutenberg with one of 2 other plugins.  Gutenberg Ramp wordpress.org/plugins/gutenberg-ramp  Disable Gutenberg wordpress.org/plugins/disable-gutenberg 18
  • 20. © 2018 Rick Radko, r3df.com Links More information:  https://wordpress.org/gutenberg/  https://wordpress.org/gutenberg/handbook/  + Tons of reviews blog posts and rants if you search Google. 19
  • 21. © 2018 Rick Radko, r3df.com Contact Rick Radko  email: wpinfo@r3df.com  twitter: @r3designforge Website:  r3df.com Slides at:  www.slideshare.net/r3df 20