SlideShare ist ein Scribd-Unternehmen logo
1 von 44
WordPress Themes
& Gutenberg
with Rich Tabor
@richard_tabor
richtabor.com
I skate to where to puck is going to
be, not where it has been.
— Wayne Gretzky
WordPress Themes
of Today
It’s a mess.
1. One theme to rule them all.
2. Themes with page building built-in.
3. Themes compatible with specific page builders.
4. Theme lock-in.
5. You don’t know what you’re buying, ‘till you install it.
6. Disjointed WordPress experience.
WordPress Themes
of Tomorrow
A Future of Blocks
❖ Blocks are a fundamental shift in how content is
created within WordPress.
❖ In today’s WordPress, there are a multitude of ways to
add very similar content... like widgets and
shortcodes.
Blocks to Replace
Shortcodes
But it will...
❖ Shortcodes output content without any UI
❖ Mystery meat
❖ Content blocks are the new shortcodes
❖ Blocks are shortcodes with a UI
Blocks to Replace Widgets
& Widget Areas
❖ Block API is more flexible than the Widgets API
❖ All widgets should should appear as blocks
❖ There’s no difference between blocks and widgets
❖ No need for widget visibility settings
Block Templates
❖ Pre-defined templates of blocks
❖ Blocks can have predefined attributes, placeholder
content, and be static or dynamic.
❖ Block templates specify a default initial state for an
editor session.
❖ Custom post types can register templates
❖ Block templates for posts and pages too
❖ Locking Block Templates
❖ All — Prevents all operations
❖ Insert — Enable reordering, but prevents inserting new blocks
Block Templates are a
Work in Progress

but the Future is Bright
The key thing with page templates
is that we want all of it to be
potentially covered by blocks, not
just the_content.
— Matias Ventura
As soon as we expand the scope, include more
blocks (site title, header, menus, widgets, etc), and
describe a way to store page templates as a list of
blocks, Gutenberg would be fundamentally capable
of building an entire website.
— Matias Ventura
What About
Page Builders?
Page Builders, as we
know them today, are
on borrowed time
❖ Nobody wants a shortcode soup
❖ Nobody wants the complex interfaces authors
build to hide/manage them
❖ Why would folks accept with difficult experiences
when we can have a familiar (and great) native
experience everywhere?
WordPress Themes
of the Future
The future of themes can become
more about empowering users to
work on their vision, instead of
always having to learn how to theme.
— David A. Kennedy, Automattic
Companion Block Plugins
❖ Blocks built to expand your theme’s purpose
❖ Example: A simple blog theme may have ad
placement blocks, blogroll posts blocks, call to
actions, etc
❖ Themes can also support third-party blocks by adding
custom styling
Should custom blocks
be built into themes?
Nope.
❖ When a block no longer exists, the HTML markup is
spit out, instead of a [button color=””/] code
❖ You still lose any subjective styles that your theme
has applied — but objective styles should remain
(as they should be built into themes)
Styling Gutenberg
❖ You’ll likely need additional styles to resolve conflicts
❖ Gutenberg loads its own styles for many blocks
(buttons, block quotes, images, galleries, cover
images, horizontal rules, etc)
❖ Do not load the entire frontend stylesheet into the
Gutenberg editor
❖ Prepend with .edit-post-visual-editor
❖ SASS comes in handy
Resources
❖ github.com/wordpress/gutenberg-starter-theme
❖ github.com/wordpress/gutenberg
❖ richtabor.com/add-wordpress-theme-styles-to-gutenberg
Questions?

Weitere Àhnliche Inhalte

Was ist angesagt?

Was ist angesagt? (8)

Web components. Compose the web.
Web components. Compose the web.Web components. Compose the web.
Web components. Compose the web.
 
Word Camp North Canton 2013 - Say what? Say that again in plain English...
Word Camp North Canton 2013 - Say what? Say that again in plain English...Word Camp North Canton 2013 - Say what? Say that again in plain English...
Word Camp North Canton 2013 - Say what? Say that again in plain English...
 
WordCamp Sheffield 2014 Theme Workflow Presentation
WordCamp Sheffield 2014 Theme Workflow PresentationWordCamp Sheffield 2014 Theme Workflow Presentation
WordCamp Sheffield 2014 Theme Workflow Presentation
 
How to Build Custom WordPress Blocks
How to Build Custom WordPress BlocksHow to Build Custom WordPress Blocks
How to Build Custom WordPress Blocks
 
58 Ways To Build A Better Blog
58 Ways To Build A Better Blog58 Ways To Build A Better Blog
58 Ways To Build A Better Blog
 
Building the next generation of themes with WP Rig 2.0
Building the next generation of themes with WP Rig 2.0Building the next generation of themes with WP Rig 2.0
Building the next generation of themes with WP Rig 2.0
 
Sydjs: static site generators
Sydjs: static site generatorsSydjs: static site generators
Sydjs: static site generators
 
Build WordPress themes like a heavyweight - WordCamp Lancaster 2013
Build WordPress themes like a heavyweight - WordCamp Lancaster 2013Build WordPress themes like a heavyweight - WordCamp Lancaster 2013
Build WordPress themes like a heavyweight - WordCamp Lancaster 2013
 

Ähnlich wie The Future of WordPress Themes & Gutenberg

Theme frameworks & child themes
Theme frameworks & child themesTheme frameworks & child themes
Theme frameworks & child themes
Chris Olbekson
 

Ähnlich wie The Future of WordPress Themes & Gutenberg (20)

How word press themes work 2.19.18
How word press themes work 2.19.18How word press themes work 2.19.18
How word press themes work 2.19.18
 
How WordPress Themes Work
How WordPress Themes WorkHow WordPress Themes Work
How WordPress Themes Work
 
Architecting with Style
Architecting with StyleArchitecting with Style
Architecting with Style
 
Between a Block & a Hard Place
Between a Block & a Hard PlaceBetween a Block & a Hard Place
Between a Block & a Hard Place
 
Content Architectures in WordPress 5
Content Architectures in WordPress 5Content Architectures in WordPress 5
Content Architectures in WordPress 5
 
Be the Change: The Future of WordPress with WP Engine's Developer Relations Team
Be the Change: The Future of WordPress with WP Engine's Developer Relations TeamBe the Change: The Future of WordPress with WP Engine's Developer Relations Team
Be the Change: The Future of WordPress with WP Engine's Developer Relations Team
 
April 2016 - Atlanta WordPress Users Group - Child Themes
April 2016 - Atlanta WordPress Users Group - Child ThemesApril 2016 - Atlanta WordPress Users Group - Child Themes
April 2016 - Atlanta WordPress Users Group - Child Themes
 
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017
 
Customizing WordPress Themes
Customizing WordPress ThemesCustomizing WordPress Themes
Customizing WordPress Themes
 
Developing Custom WordPress Themes for Clients
Developing Custom WordPress Themes for ClientsDeveloping Custom WordPress Themes for Clients
Developing Custom WordPress Themes for Clients
 
Overview of Using Wordpress for Web Site Design
Overview of Using Wordpress for Web Site DesignOverview of Using Wordpress for Web Site Design
Overview of Using Wordpress for Web Site Design
 
WordCamp Miami 09 - WP Framework
WordCamp Miami 09 - WP FrameworkWordCamp Miami 09 - WP Framework
WordCamp Miami 09 - WP Framework
 
Wordpress overview
Wordpress overviewWordpress overview
Wordpress overview
 
The Power of Page Builder Plugins in Building a WordPress Site‹ - Presented b...
The Power of Page Builder Plugins in Building a WordPress Site‹ - Presented b...The Power of Page Builder Plugins in Building a WordPress Site‹ - Presented b...
The Power of Page Builder Plugins in Building a WordPress Site‹ - Presented b...
 
WordPress and Accessibility
WordPress and AccessibilityWordPress and Accessibility
WordPress and Accessibility
 
Child Themes and CSS in WordPress
Child Themes and CSS in WordPressChild Themes and CSS in WordPress
Child Themes and CSS in WordPress
 
How to select, install and customize a WordPress theme
How to select, install and customize a WordPress themeHow to select, install and customize a WordPress theme
How to select, install and customize a WordPress theme
 
Theme frameworks & child themes
Theme frameworks & child themesTheme frameworks & child themes
Theme frameworks & child themes
 
WordCamp Kent 2019 - WP 101: Guten.. What?
WordCamp Kent 2019 - WP 101: Guten.. What?WordCamp Kent 2019 - WP 101: Guten.. What?
WordCamp Kent 2019 - WP 101: Guten.. What?
 
Building Websites with WordPress UBC Summer 2012
Building Websites with WordPress UBC Summer 2012Building Websites with WordPress UBC Summer 2012
Building Websites with WordPress UBC Summer 2012
 

KĂŒrzlich hochgeladen

The title is not connected to what is inside
The title is not connected to what is insideThe title is not connected to what is inside
The title is not connected to what is inside
shinachiaurasa2
 
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICECHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM TechniquesAI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
VictorSzoltysek
 

KĂŒrzlich hochgeladen (20)

%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
 
The title is not connected to what is inside
The title is not connected to what is insideThe title is not connected to what is inside
The title is not connected to what is inside
 
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
 
Define the academic and professional writing..pdf
Define the academic and professional writing..pdfDefine the academic and professional writing..pdf
Define the academic and professional writing..pdf
 
8257 interfacing 2 in microprocessor for btech students
8257 interfacing 2 in microprocessor for btech students8257 interfacing 2 in microprocessor for btech students
8257 interfacing 2 in microprocessor for btech students
 
BUS PASS MANGEMENT SYSTEM USING PHP.pptx
BUS PASS MANGEMENT SYSTEM USING PHP.pptxBUS PASS MANGEMENT SYSTEM USING PHP.pptx
BUS PASS MANGEMENT SYSTEM USING PHP.pptx
 
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICECHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
 
A Secure and Reliable Document Management System is Essential.docx
A Secure and Reliable Document Management System is Essential.docxA Secure and Reliable Document Management System is Essential.docx
A Secure and Reliable Document Management System is Essential.docx
 
The Guide to Integrating Generative AI into Unified Continuous Testing Platfo...
The Guide to Integrating Generative AI into Unified Continuous Testing Platfo...The Guide to Integrating Generative AI into Unified Continuous Testing Platfo...
The Guide to Integrating Generative AI into Unified Continuous Testing Platfo...
 
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
 
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
 
%in Midrand+277-882-255-28 abortion pills for sale in midrand
%in Midrand+277-882-255-28 abortion pills for sale in midrand%in Midrand+277-882-255-28 abortion pills for sale in midrand
%in Midrand+277-882-255-28 abortion pills for sale in midrand
 
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
Direct Style Effect Systems -The Print[A] Example- A Comprehension AidDirect Style Effect Systems -The Print[A] Example- A Comprehension Aid
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
 
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM TechniquesAI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
 
Introducing Microsoft’s new Enterprise Work Management (EWM) Solution
Introducing Microsoft’s new Enterprise Work Management (EWM) SolutionIntroducing Microsoft’s new Enterprise Work Management (EWM) Solution
Introducing Microsoft’s new Enterprise Work Management (EWM) Solution
 
Exploring the Best Video Editing App.pdf
Exploring the Best Video Editing App.pdfExploring the Best Video Editing App.pdf
Exploring the Best Video Editing App.pdf
 
Microsoft AI Transformation Partner Playbook.pdf
Microsoft AI Transformation Partner Playbook.pdfMicrosoft AI Transformation Partner Playbook.pdf
Microsoft AI Transformation Partner Playbook.pdf
 
Azure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdf
Azure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdfAzure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdf
Azure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdf
 
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdfPayment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
 
AI & Machine Learning Presentation Template
AI & Machine Learning Presentation TemplateAI & Machine Learning Presentation Template
AI & Machine Learning Presentation Template
 

The Future of WordPress Themes & Gutenberg

Hinweis der Redaktion

  1. Hi my name is Rich Tabor I’m a theme developer, 7 years, ThemeBeans Also review themes at ThemeForest Naomi reached out to me I’ve been writing, talking and sharing a lot about gutenberg lately — so much that my wife has to ask me if im actually working on everything else. haha
  2. I blog at richtabor.com Ive been writing a lot lately about gutenberg topics
  3. Gutenberg is not being developed to surpass the competition. Not the primary goal. Gutenberg aims to provide a content editing experience for the next 5-10 years. So to understand where themes are headed. We need to look at where they stand today.
  4. X, Avada — all trying to solve isues that WP could not solve, But they are all doing it differently Some themes have page building built in 5. If youre not super techinal, you may not have staging servers or local development environments. 6. All these points lead to a disjointed WP XP. So that’s where WP themes are today.
  5. Some of you may be thinking

  6. That will never ever ever happen

  7. But it will
  8. For example, contact form 7, Back to our CF7 example,
  9. There’s no need for admin pages or shortcodes. It’s all there.
  10. If you think about it, widgets are “blocks” of content already.
  11. Im building a site for a school system. So now that we understand where shortcodes and widgets are headed. Let’s look at tempates.
  12. Adjusting templates within the editor in the sky Another cool thing is that folks can build out their templates with blocks.
  13. It makes it so almost anyone can go in and do it.
  14. More facts about templates Portfolio blocks and plugin example. How to stop clients from breaking it You can also lock templates — esp good for clients (all and insert options).
  15. Block templates are still a WIP
  16. There’s a lot more potential than just templating out content the way that themes currently do it. Matias Ventura, the technical lead for the WordPress Gutenberg project mentioned the following on GitHub:
  17. Let’s think about this for a moment. Block templates will likely push beyond the content “box”, becoming whole-page editors. Headers, footers, what we know as “widget areas” — all of it could be set as templates. Footer block may have nested columns.
  18. Again, this is from the technical lead of the WordPress Gutenberg project. That’s a big deal So after all this talk about page editing...
  19. Say goodbye to custom theme-specific widgets. And to limiting page templates.
  20. The goal is to get the theme out of the way, and work with Gutenberg to empower users. To get rid of the hurdles. The future of WP themes holds well for themes to include blocks
  21. I foresee a future of WordPress themes that tie in companion block plugins which empower users to properly flesh out their ideas. So what are companion block plugins?
  22. A lot of themes are going to build companion blocks. If they’re done right, they can be used outside of the theme as well.
  23. Blocks should really apply objective styles — whereas subjective design choices should be left to the theme.
  24. A lot of chatter has been going on surrounding custom blocks and whether or not they should be included in WordPress themes — or built as separate block plugins. So, should custom blocks be built into themes?
  25. Nope. For the exact reasons that shortcodes are generally not supposed to be built into themes. Once you switch a theme, you loose everything. Now blocks are a bit different
 (next slide)
  26. The last bit I’ll talk about is styling gutenberg. When you first fire Gutenberg, it’s subjectively styled.
  27. Heres an example of styling the editor -- and what not to do.