SlideShare a Scribd company logo
1 of 28
Download to read offline
Between a Block and a Hard Place
Let’s master modern WordPress - a world of blocks
Rob Stinson
PRODUCT MARKETING MANAGER, WP ENGINE
@rob_stino
Agenda
THE THINGS WE
WILL COVER
1. The future of WordPress “themeing”
2. Custom Collections (Block Patterns)
3. Custom blocks (live coding FTW!)
1.
The Future of WordPress
Themeing
Where We’ve Come From
Base Theme
Starter / boilerplate theme or parent theme. Underscores, Genesis Framework, Storefront
Child Theme
Implementation of global design patterns and page / archive design
Plugins
Functionality and integrations
Where We’re Going
Base Full-site Editing (FSE) Theme
Far simpler / more light weight than traditional themes
Block Patterns
Implementation of global design patterns and page/archive design
Custom Blocks
Functionality and integrations
Plugins
Functionality & integrations
Full-site Editing
THIS CHANGES THINGS
§ Block Editor expands beyond the content area
§ File structure changes
§ The role and type of code we write changes (template
hierarchy)
§ Where we “template” moves in to the WP experience
Block Patterns
REPLACES PAGE TEMPLATES
§ Pre-made content “chunks”
§ Built 100% with Blocks
§ Distributable…
§ A new product category
Custom Blocks
WHEN OFF-THE-SHELF DOESN’T DO THE JOB
§ Look the way you need
§ Behave the way you need
§ Integrate the way you need
§ Fine tuned control
Change Isn’t Easy!
Let’s Make It Easier Then
:)
2.
Custom Collections
(Block Patterns)
What’s a
Collection?
IN THE GENESIS CONTEXT
§ Collections are Patterns in
Genesis
§ An improved discovery
experience
§ An improved management
experience
§ Leverage distribution through
Genesis
Building Custom
Collections
WHY?
§ Build highly customisable block-
first boilerplate pages
§ Provide clients with end-user
friendly (all blocks) template
content they can work with
§ Distribute (the new child theme)
Building Custom
Collections
HOW?
1. Create your page sections & full
page layouts with blocks
2. Fine tune your content and
styling using pure block options
3. Leverage Genesis for
broader/richer content and
styling controls
4. Export and implement in plugin
(next slide)
5. Scaffold plugin (starter avail’)
6. Register Collection and it’s Layouts
& Sections
7. Active plugin alongside Genesis
Blocks plugin
8. Done
Building Custom
Collections
HOW (CONT’)?
Learn More…
studiopress.blog/the-ultimate-guide-to-building-custom-collections-in-genesis-blocks
3.
Custom Blocks
§ A WordPress plugin that provides an admin
interface and a simple templating system for
building custom Gutenberg blocks
§ Blocks that look & function EXACTLY as you
need
§ NOT dependant on the Genesis Framework
1
2
3
To cover this area exactly:
Size & Rotation
Height = 3”
Width = 4.3”
Position
X-position = 0.5”
Y-position = 0.5”
Who’s This For?
WORDPRESS DEVELOPERS
§ From Solo Freelancers through to large corporate
web team members
§ Junior & Senior
To cover this area exactly:
Size & Rotation
Height = 3”
Width = 4.3”
Position
X-position = 0.5”
Y-position = 0.5”
The Value It Provides
§ Simplifies upskilling dev for the block editor
§ Speeds up block production
§ Simplifies iteration
§ Simplifies integration
Options vs Decisions
Enough Talk!
Let’s Build Something!
wpengine.com/genesis
Thank You
Rob Stinson
PRODUCT MARKETING MANAGER, WP ENGINE
@rob_stino
Between a Block & a Hard Place

More Related Content

What's hot

How to make WordPress your friend
How to make WordPress your friendHow to make WordPress your friend
How to make WordPress your friendKerch McConlogue
 
Optimizing Your Site for Holiday Traffic
Optimizing Your Site for Holiday TrafficOptimizing Your Site for Holiday Traffic
Optimizing Your Site for Holiday TrafficWP Engine UK
 
The WordPress REST API as a Springboard for Website Greatness
The WordPress REST API as a Springboard for Website GreatnessThe WordPress REST API as a Springboard for Website Greatness
The WordPress REST API as a Springboard for Website GreatnessWP Engine UK
 
How to Create a Photography Website
How to Create a Photography WebsiteHow to Create a Photography Website
How to Create a Photography Websitenor_nilam
 
DNN Database Tips & Tricks
DNN Database Tips & TricksDNN Database Tips & Tricks
DNN Database Tips & TricksWill Strohl
 
WordCamp Bournemouth 2014 - Designing with data in WordPress
WordCamp Bournemouth 2014 - Designing with data in WordPressWordCamp Bournemouth 2014 - Designing with data in WordPress
WordCamp Bournemouth 2014 - Designing with data in WordPressJonny Allbut
 
Build a DNN Module in Minutes
Build a DNN Module in MinutesBuild a DNN Module in Minutes
Build a DNN Module in MinutesWill Strohl
 
WordCamp Sac '16 - a full stack workflow
WordCamp Sac '16 - a full stack workflowWordCamp Sac '16 - a full stack workflow
WordCamp Sac '16 - a full stack workflowJonathan Trujillo
 
Wordcamp 2010 presentation
Wordcamp 2010 presentationWordcamp 2010 presentation
Wordcamp 2010 presentationJonny Allbut
 
WordPress Meetup Bandung - December 2014
WordPress Meetup Bandung - December 2014WordPress Meetup Bandung - December 2014
WordPress Meetup Bandung - December 2014Fikri Rasyid
 
Developer's meetup wordpress presentation
Developer's meetup wordpress presentationDeveloper's meetup wordpress presentation
Developer's meetup wordpress presentationMelody Sharp Web Design
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themesopenchamp
 
21 Ways to Make WordPress Fast
21 Ways to Make WordPress Fast21 Ways to Make WordPress Fast
21 Ways to Make WordPress FastJason McCreary
 
Evaluating Extensions: A Comprehensive Guide to Keeping Your Site Clean
Evaluating Extensions: A Comprehensive Guide to Keeping Your Site CleanEvaluating Extensions: A Comprehensive Guide to Keeping Your Site Clean
Evaluating Extensions: A Comprehensive Guide to Keeping Your Site CleanWill Strohl
 
Bringing better user experience to Joomla with Page Builders
Bringing better user experience to Joomla with Page BuildersBringing better user experience to Joomla with Page Builders
Bringing better user experience to Joomla with Page BuildersBraveBits
 
Why Blogs Are Better
Why Blogs Are BetterWhy Blogs Are Better
Why Blogs Are BetterTris Hussey
 
WordPress plugin development
WordPress plugin developmentWordPress plugin development
WordPress plugin developmentarryaas
 
Cheat Sheet to a Lean Website
Cheat Sheet to a Lean WebsiteCheat Sheet to a Lean Website
Cheat Sheet to a Lean WebsiteBarbara Bermes
 
Secrets of WordPress Success - BlueGlass LA
Secrets of WordPress Success - BlueGlass LASecrets of WordPress Success - BlueGlass LA
Secrets of WordPress Success - BlueGlass LAAndrew Norcross
 

What's hot (20)

How to make WordPress your friend
How to make WordPress your friendHow to make WordPress your friend
How to make WordPress your friend
 
Optimizing Your Site for Holiday Traffic
Optimizing Your Site for Holiday TrafficOptimizing Your Site for Holiday Traffic
Optimizing Your Site for Holiday Traffic
 
The WordPress REST API as a Springboard for Website Greatness
The WordPress REST API as a Springboard for Website GreatnessThe WordPress REST API as a Springboard for Website Greatness
The WordPress REST API as a Springboard for Website Greatness
 
How to Create a Photography Website
How to Create a Photography WebsiteHow to Create a Photography Website
How to Create a Photography Website
 
DNN Database Tips & Tricks
DNN Database Tips & TricksDNN Database Tips & Tricks
DNN Database Tips & Tricks
 
Weniger schlecht-css-schreiben
Weniger schlecht-css-schreibenWeniger schlecht-css-schreiben
Weniger schlecht-css-schreiben
 
WordCamp Bournemouth 2014 - Designing with data in WordPress
WordCamp Bournemouth 2014 - Designing with data in WordPressWordCamp Bournemouth 2014 - Designing with data in WordPress
WordCamp Bournemouth 2014 - Designing with data in WordPress
 
Build a DNN Module in Minutes
Build a DNN Module in MinutesBuild a DNN Module in Minutes
Build a DNN Module in Minutes
 
WordCamp Sac '16 - a full stack workflow
WordCamp Sac '16 - a full stack workflowWordCamp Sac '16 - a full stack workflow
WordCamp Sac '16 - a full stack workflow
 
Wordcamp 2010 presentation
Wordcamp 2010 presentationWordcamp 2010 presentation
Wordcamp 2010 presentation
 
WordPress Meetup Bandung - December 2014
WordPress Meetup Bandung - December 2014WordPress Meetup Bandung - December 2014
WordPress Meetup Bandung - December 2014
 
Developer's meetup wordpress presentation
Developer's meetup wordpress presentationDeveloper's meetup wordpress presentation
Developer's meetup wordpress presentation
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themes
 
21 Ways to Make WordPress Fast
21 Ways to Make WordPress Fast21 Ways to Make WordPress Fast
21 Ways to Make WordPress Fast
 
Evaluating Extensions: A Comprehensive Guide to Keeping Your Site Clean
Evaluating Extensions: A Comprehensive Guide to Keeping Your Site CleanEvaluating Extensions: A Comprehensive Guide to Keeping Your Site Clean
Evaluating Extensions: A Comprehensive Guide to Keeping Your Site Clean
 
Bringing better user experience to Joomla with Page Builders
Bringing better user experience to Joomla with Page BuildersBringing better user experience to Joomla with Page Builders
Bringing better user experience to Joomla with Page Builders
 
Why Blogs Are Better
Why Blogs Are BetterWhy Blogs Are Better
Why Blogs Are Better
 
WordPress plugin development
WordPress plugin developmentWordPress plugin development
WordPress plugin development
 
Cheat Sheet to a Lean Website
Cheat Sheet to a Lean WebsiteCheat Sheet to a Lean Website
Cheat Sheet to a Lean Website
 
Secrets of WordPress Success - BlueGlass LA
Secrets of WordPress Success - BlueGlass LASecrets of WordPress Success - BlueGlass LA
Secrets of WordPress Success - BlueGlass LA
 

Similar to Between a Block & a Hard Place

Creating Landing Pages and Layouts for Drupal 8 - DrupalCon Baltimore
Creating Landing Pages and Layouts for Drupal 8 - DrupalCon BaltimoreCreating Landing Pages and Layouts for Drupal 8 - DrupalCon Baltimore
Creating Landing Pages and Layouts for Drupal 8 - DrupalCon BaltimoreSuzanne Dergacheva
 
full-site-editing-theme-presentation.pptx
full-site-editing-theme-presentation.pptxfull-site-editing-theme-presentation.pptx
full-site-editing-theme-presentation.pptxPlasterdog Web Design
 
Gutenberg (WidgiLabs Training Sessions)
Gutenberg  (WidgiLabs Training Sessions)Gutenberg  (WidgiLabs Training Sessions)
Gutenberg (WidgiLabs Training Sessions)Nuno Morgadinho
 
Blockity McBlock Blocks, Oh My!
Blockity McBlock Blocks, Oh My!Blockity McBlock Blocks, Oh My!
Blockity McBlock Blocks, Oh My!Evan Mullins
 
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 2017La Drupalera
 
Modeling Rich Narrative Content
Modeling Rich Narrative ContentModeling Rich Narrative Content
Modeling Rich Narrative ContentJeff Eaton
 
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine DevelopmentEECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine DevelopmentFortySeven Media
 
BP-7 Share Customization Best Practices
BP-7 Share Customization Best PracticesBP-7 Share Customization Best Practices
BP-7 Share Customization Best PracticesAlfresco Software
 
Developing Branding Solutions for 2013
Developing Branding Solutions for 2013Developing Branding Solutions for 2013
Developing Branding Solutions for 2013Thomas Daly
 
Sustainable Drupal Theming with Fusion
Sustainable Drupal Theming with FusionSustainable Drupal Theming with Fusion
Sustainable Drupal Theming with Fusionsheenadonnelly
 
Architecting with Style
Architecting with StyleArchitecting with Style
Architecting with StyleTimothy Knight
 
Meetup: The big change coming to WordPress in 2018 - Gutenberg
Meetup: The big change coming to WordPress in 2018 - GutenbergMeetup: The big change coming to WordPress in 2018 - Gutenberg
Meetup: The big change coming to WordPress in 2018 - GutenbergMickey Mellen
 
Meetup: The big change coming to WordPress in 2018 - Gutenberg
Meetup: The big change coming to WordPress in 2018 - GutenbergMeetup: The big change coming to WordPress in 2018 - Gutenberg
Meetup: The big change coming to WordPress in 2018 - GutenbergEvan Mullins
 
Build and save your own Gutenberg Block Patterns
Build and save your own Gutenberg Block PatternsBuild and save your own Gutenberg Block Patterns
Build and save your own Gutenberg Block PatternsPlasterdog Web Design
 
BP-9 Share Customization Best Practices
BP-9 Share Customization Best PracticesBP-9 Share Customization Best Practices
BP-9 Share Customization Best PracticesAlfresco Software
 
Responsive themeworkshop wcneo2016
Responsive themeworkshop wcneo2016Responsive themeworkshop wcneo2016
Responsive themeworkshop wcneo2016David Brattoli
 
WP Joburg Meetup 10: Genesis Framework by Trish Cornelius
WP Joburg Meetup 10: Genesis Framework by Trish CorneliusWP Joburg Meetup 10: Genesis Framework by Trish Cornelius
WP Joburg Meetup 10: Genesis Framework by Trish CorneliusWPJoburg
 

Similar to Between a Block & a Hard Place (20)

Creating Landing Pages and Layouts for Drupal 8 - DrupalCon Baltimore
Creating Landing Pages and Layouts for Drupal 8 - DrupalCon BaltimoreCreating Landing Pages and Layouts for Drupal 8 - DrupalCon Baltimore
Creating Landing Pages and Layouts for Drupal 8 - DrupalCon Baltimore
 
full-site-editing-theme-presentation.pptx
full-site-editing-theme-presentation.pptxfull-site-editing-theme-presentation.pptx
full-site-editing-theme-presentation.pptx
 
Gutenberg (WidgiLabs Training Sessions)
Gutenberg  (WidgiLabs Training Sessions)Gutenberg  (WidgiLabs Training Sessions)
Gutenberg (WidgiLabs Training Sessions)
 
Blockity McBlock Blocks, Oh My!
Blockity McBlock Blocks, Oh My!Blockity McBlock Blocks, Oh My!
Blockity McBlock Blocks, Oh My!
 
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
 
Modeling Rich Narrative Content
Modeling Rich Narrative ContentModeling Rich Narrative Content
Modeling Rich Narrative Content
 
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine DevelopmentEECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
 
W pthemes
W pthemesW pthemes
W pthemes
 
BP-7 Share Customization Best Practices
BP-7 Share Customization Best PracticesBP-7 Share Customization Best Practices
BP-7 Share Customization Best Practices
 
Wordpress overview
Wordpress overviewWordpress overview
Wordpress overview
 
Developing Branding Solutions for 2013
Developing Branding Solutions for 2013Developing Branding Solutions for 2013
Developing Branding Solutions for 2013
 
Sustainable Drupal Theming with Fusion
Sustainable Drupal Theming with FusionSustainable Drupal Theming with Fusion
Sustainable Drupal Theming with Fusion
 
Architecting with Style
Architecting with StyleArchitecting with Style
Architecting with Style
 
Meetup: The big change coming to WordPress in 2018 - Gutenberg
Meetup: The big change coming to WordPress in 2018 - GutenbergMeetup: The big change coming to WordPress in 2018 - Gutenberg
Meetup: The big change coming to WordPress in 2018 - Gutenberg
 
Meetup: The big change coming to WordPress in 2018 - Gutenberg
Meetup: The big change coming to WordPress in 2018 - GutenbergMeetup: The big change coming to WordPress in 2018 - Gutenberg
Meetup: The big change coming to WordPress in 2018 - Gutenberg
 
Build and save your own Gutenberg Block Patterns
Build and save your own Gutenberg Block PatternsBuild and save your own Gutenberg Block Patterns
Build and save your own Gutenberg Block Patterns
 
BP-9 Share Customization Best Practices
BP-9 Share Customization Best PracticesBP-9 Share Customization Best Practices
BP-9 Share Customization Best Practices
 
Using class suffixes
Using class suffixesUsing class suffixes
Using class suffixes
 
Responsive themeworkshop wcneo2016
Responsive themeworkshop wcneo2016Responsive themeworkshop wcneo2016
Responsive themeworkshop wcneo2016
 
WP Joburg Meetup 10: Genesis Framework by Trish Cornelius
WP Joburg Meetup 10: Genesis Framework by Trish CorneliusWP Joburg Meetup 10: Genesis Framework by Trish Cornelius
WP Joburg Meetup 10: Genesis Framework by Trish Cornelius
 

More from WP Engine

More Dev. Less Drama.pdf
More Dev. Less Drama.pdfMore Dev. Less Drama.pdf
More Dev. Less Drama.pdfWP Engine
 
Why the Edge Isn't an Edge Case.pdf
Why the Edge Isn't an Edge Case.pdfWhy the Edge Isn't an Edge Case.pdf
Why the Edge Isn't an Edge Case.pdfWP Engine
 
Post eCommerce Site Launch- Optimizing Your Conversion Rate.pdf
Post eCommerce Site Launch- Optimizing Your Conversion Rate.pdfPost eCommerce Site Launch- Optimizing Your Conversion Rate.pdf
Post eCommerce Site Launch- Optimizing Your Conversion Rate.pdfWP Engine
 
Demo - New Features for Atlas.pdf
Demo - New Features for Atlas.pdfDemo - New Features for Atlas.pdf
Demo - New Features for Atlas.pdfWP Engine
 
Debunking The Myths of Migration.pdf
Debunking The Myths of Migration.pdfDebunking The Myths of Migration.pdf
Debunking The Myths of Migration.pdfWP Engine
 
Keeping Your WordPress Sites Safe Amidst A Rise in Global Cyberattacks.pdf
Keeping Your WordPress Sites Safe Amidst A Rise in Global Cyberattacks.pdfKeeping Your WordPress Sites Safe Amidst A Rise in Global Cyberattacks.pdf
Keeping Your WordPress Sites Safe Amidst A Rise in Global Cyberattacks.pdfWP Engine
 
Building WordPress eCommerce at Scale .pdf
Building WordPress eCommerce at Scale .pdfBuilding WordPress eCommerce at Scale .pdf
Building WordPress eCommerce at Scale .pdfWP Engine
 
When to Choose Headless for Clients.pdf
When to Choose Headless for Clients.pdfWhen to Choose Headless for Clients.pdf
When to Choose Headless for Clients.pdfWP Engine
 
Best Practices for Site Deployment With Local.pdf
Best Practices for Site Deployment With Local.pdfBest Practices for Site Deployment With Local.pdf
Best Practices for Site Deployment With Local.pdfWP Engine
 
Site Monitoring: The Intersection of Product, UX Design & Research .pdf
Site Monitoring: The Intersection of Product, UX Design & Research .pdfSite Monitoring: The Intersection of Product, UX Design & Research .pdf
Site Monitoring: The Intersection of Product, UX Design & Research .pdfWP Engine
 
Front End: Building Future-Proof eCommerce Sites.pdf
Front End: Building Future-Proof eCommerce Sites.pdfFront End: Building Future-Proof eCommerce Sites.pdf
Front End: Building Future-Proof eCommerce Sites.pdfWP Engine
 
Gutenberg and Headless WordPress.pdf
Gutenberg and Headless WordPress.pdfGutenberg and Headless WordPress.pdf
Gutenberg and Headless WordPress.pdfWP Engine
 
Blueprints and Other Local Features for Agencies.pdf
Blueprints and Other Local Features for Agencies.pdfBlueprints and Other Local Features for Agencies.pdf
Blueprints and Other Local Features for Agencies.pdfWP Engine
 
Modern Theming & The Future of WordPress- Working with Full Site Editing and ...
Modern Theming & The Future of WordPress- Working with Full Site Editing and ...Modern Theming & The Future of WordPress- Working with Full Site Editing and ...
Modern Theming & The Future of WordPress- Working with Full Site Editing and ...WP Engine
 
6 WooCommerce Dev Tricks for Building Fast eCommerce Websites.pdf
6 WooCommerce Dev Tricks for Building Fast eCommerce Websites.pdf6 WooCommerce Dev Tricks for Building Fast eCommerce Websites.pdf
6 WooCommerce Dev Tricks for Building Fast eCommerce Websites.pdfWP Engine
 
Headless 101 for WordPress Developers.pdf
Headless 101 for WordPress Developers.pdfHeadless 101 for WordPress Developers.pdf
Headless 101 for WordPress Developers.pdfWP Engine
 
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 TeamWP Engine
 
An Atlas of Atlas.pdf
An Atlas of Atlas.pdfAn Atlas of Atlas.pdf
An Atlas of Atlas.pdfWP Engine
 
2022 – Year of the WordPress Developer.pdf
2022 – Year of the WordPress Developer.pdf2022 – Year of the WordPress Developer.pdf
2022 – Year of the WordPress Developer.pdfWP Engine
 
Using WooCommerce to Scale Your Store
Using WooCommerce to Scale Your StoreUsing WooCommerce to Scale Your Store
Using WooCommerce to Scale Your StoreWP Engine
 

More from WP Engine (20)

More Dev. Less Drama.pdf
More Dev. Less Drama.pdfMore Dev. Less Drama.pdf
More Dev. Less Drama.pdf
 
Why the Edge Isn't an Edge Case.pdf
Why the Edge Isn't an Edge Case.pdfWhy the Edge Isn't an Edge Case.pdf
Why the Edge Isn't an Edge Case.pdf
 
Post eCommerce Site Launch- Optimizing Your Conversion Rate.pdf
Post eCommerce Site Launch- Optimizing Your Conversion Rate.pdfPost eCommerce Site Launch- Optimizing Your Conversion Rate.pdf
Post eCommerce Site Launch- Optimizing Your Conversion Rate.pdf
 
Demo - New Features for Atlas.pdf
Demo - New Features for Atlas.pdfDemo - New Features for Atlas.pdf
Demo - New Features for Atlas.pdf
 
Debunking The Myths of Migration.pdf
Debunking The Myths of Migration.pdfDebunking The Myths of Migration.pdf
Debunking The Myths of Migration.pdf
 
Keeping Your WordPress Sites Safe Amidst A Rise in Global Cyberattacks.pdf
Keeping Your WordPress Sites Safe Amidst A Rise in Global Cyberattacks.pdfKeeping Your WordPress Sites Safe Amidst A Rise in Global Cyberattacks.pdf
Keeping Your WordPress Sites Safe Amidst A Rise in Global Cyberattacks.pdf
 
Building WordPress eCommerce at Scale .pdf
Building WordPress eCommerce at Scale .pdfBuilding WordPress eCommerce at Scale .pdf
Building WordPress eCommerce at Scale .pdf
 
When to Choose Headless for Clients.pdf
When to Choose Headless for Clients.pdfWhen to Choose Headless for Clients.pdf
When to Choose Headless for Clients.pdf
 
Best Practices for Site Deployment With Local.pdf
Best Practices for Site Deployment With Local.pdfBest Practices for Site Deployment With Local.pdf
Best Practices for Site Deployment With Local.pdf
 
Site Monitoring: The Intersection of Product, UX Design & Research .pdf
Site Monitoring: The Intersection of Product, UX Design & Research .pdfSite Monitoring: The Intersection of Product, UX Design & Research .pdf
Site Monitoring: The Intersection of Product, UX Design & Research .pdf
 
Front End: Building Future-Proof eCommerce Sites.pdf
Front End: Building Future-Proof eCommerce Sites.pdfFront End: Building Future-Proof eCommerce Sites.pdf
Front End: Building Future-Proof eCommerce Sites.pdf
 
Gutenberg and Headless WordPress.pdf
Gutenberg and Headless WordPress.pdfGutenberg and Headless WordPress.pdf
Gutenberg and Headless WordPress.pdf
 
Blueprints and Other Local Features for Agencies.pdf
Blueprints and Other Local Features for Agencies.pdfBlueprints and Other Local Features for Agencies.pdf
Blueprints and Other Local Features for Agencies.pdf
 
Modern Theming & The Future of WordPress- Working with Full Site Editing and ...
Modern Theming & The Future of WordPress- Working with Full Site Editing and ...Modern Theming & The Future of WordPress- Working with Full Site Editing and ...
Modern Theming & The Future of WordPress- Working with Full Site Editing and ...
 
6 WooCommerce Dev Tricks for Building Fast eCommerce Websites.pdf
6 WooCommerce Dev Tricks for Building Fast eCommerce Websites.pdf6 WooCommerce Dev Tricks for Building Fast eCommerce Websites.pdf
6 WooCommerce Dev Tricks for Building Fast eCommerce Websites.pdf
 
Headless 101 for WordPress Developers.pdf
Headless 101 for WordPress Developers.pdfHeadless 101 for WordPress Developers.pdf
Headless 101 for WordPress Developers.pdf
 
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
 
An Atlas of Atlas.pdf
An Atlas of Atlas.pdfAn Atlas of Atlas.pdf
An Atlas of Atlas.pdf
 
2022 – Year of the WordPress Developer.pdf
2022 – Year of the WordPress Developer.pdf2022 – Year of the WordPress Developer.pdf
2022 – Year of the WordPress Developer.pdf
 
Using WooCommerce to Scale Your Store
Using WooCommerce to Scale Your StoreUsing WooCommerce to Scale Your Store
Using WooCommerce to Scale Your Store
 

Recently uploaded

『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书rnrncn29
 
Company Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxCompany Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxMario
 
Unidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxUnidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxmibuzondetrabajo
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书zdzoqco
 
TRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptxTRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptxAndrieCagasanAkio
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa494f574xmv
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxDyna Gilbert
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书rnrncn29
 
ETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptxETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptxNIMMANAGANTI RAMAKRISHNA
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predieusebiomeyer
 
IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119APNIC
 

Recently uploaded (11)

『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
 
Company Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxCompany Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptx
 
Unidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxUnidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptx
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
 
TRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptxTRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptx
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptx
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
 
ETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptxETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptx
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predi
 
IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119
 

Between a Block & a Hard Place

  • 1.
  • 2. Between a Block and a Hard Place Let’s master modern WordPress - a world of blocks Rob Stinson PRODUCT MARKETING MANAGER, WP ENGINE @rob_stino
  • 3. Agenda THE THINGS WE WILL COVER 1. The future of WordPress “themeing” 2. Custom Collections (Block Patterns) 3. Custom blocks (live coding FTW!)
  • 4. 1. The Future of WordPress Themeing
  • 5. Where We’ve Come From Base Theme Starter / boilerplate theme or parent theme. Underscores, Genesis Framework, Storefront Child Theme Implementation of global design patterns and page / archive design Plugins Functionality and integrations
  • 6. Where We’re Going Base Full-site Editing (FSE) Theme Far simpler / more light weight than traditional themes Block Patterns Implementation of global design patterns and page/archive design Custom Blocks Functionality and integrations Plugins Functionality & integrations
  • 7. Full-site Editing THIS CHANGES THINGS § Block Editor expands beyond the content area § File structure changes § The role and type of code we write changes (template hierarchy) § Where we “template” moves in to the WP experience
  • 8. Block Patterns REPLACES PAGE TEMPLATES § Pre-made content “chunks” § Built 100% with Blocks § Distributable… § A new product category
  • 9. Custom Blocks WHEN OFF-THE-SHELF DOESN’T DO THE JOB § Look the way you need § Behave the way you need § Integrate the way you need § Fine tuned control
  • 11. Let’s Make It Easier Then :)
  • 13. What’s a Collection? IN THE GENESIS CONTEXT § Collections are Patterns in Genesis § An improved discovery experience § An improved management experience § Leverage distribution through Genesis
  • 14. Building Custom Collections WHY? § Build highly customisable block- first boilerplate pages § Provide clients with end-user friendly (all blocks) template content they can work with § Distribute (the new child theme)
  • 15. Building Custom Collections HOW? 1. Create your page sections & full page layouts with blocks 2. Fine tune your content and styling using pure block options 3. Leverage Genesis for broader/richer content and styling controls 4. Export and implement in plugin (next slide)
  • 16. 5. Scaffold plugin (starter avail’) 6. Register Collection and it’s Layouts & Sections 7. Active plugin alongside Genesis Blocks plugin 8. Done Building Custom Collections HOW (CONT’)?
  • 19. § A WordPress plugin that provides an admin interface and a simple templating system for building custom Gutenberg blocks § Blocks that look & function EXACTLY as you need § NOT dependant on the Genesis Framework
  • 20.
  • 21. 1 2 3
  • 22. To cover this area exactly: Size & Rotation Height = 3” Width = 4.3” Position X-position = 0.5” Y-position = 0.5” Who’s This For? WORDPRESS DEVELOPERS § From Solo Freelancers through to large corporate web team members § Junior & Senior
  • 23. To cover this area exactly: Size & Rotation Height = 3” Width = 4.3” Position X-position = 0.5” Y-position = 0.5” The Value It Provides § Simplifies upskilling dev for the block editor § Speeds up block production § Simplifies iteration § Simplifies integration
  • 27. Thank You Rob Stinson PRODUCT MARKETING MANAGER, WP ENGINE @rob_stino