Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Highly Dynamic WordPress Sites with Gatsby and ...
Search
Zac Gordon
February 03, 2020
Technology
0
970
Highly Dynamic WordPress Sites with Gatsby and WordPress
Presentation at Gatsby Days LA
Zac Gordon
February 03, 2020
Tweet
Share
More Decks by Zac Gordon
See All by Zac Gordon
How We Can Make WordPress Better for the JAMstack
zgordon
0
280
Decoupled Days - JAMstack and WordPress for 2020
zgordon
0
180
The State of JavaScript and WordPress in 2020
zgordon
0
930
100 Things to Know About Building, Selling and Supporting Online Courses and Content
zgordon
0
610
How the New Redux Based Data API is Changing Everything in WordPress*
zgordon
0
360
The Data API in WordPress - WCMIA 2019
zgordon
0
1k
Building Custom WordPress Blocks with React - WCPHX 2019
zgordon
0
80
React for Gutenberg, WordPress & Beyond - WordCamp Baltimore 2018
zgordon
0
250
WordCamp Seattle 2017 JavaScript Workshop
zgordon
0
980
Other Decks in Technology
See All in Technology
東京海上日動におけるセキュアな開発プロセスの取り組み
miyabit
0
200
大規模組織にAIエージェントを迅速に導入するためのセキュリティの勘所 / AI agents for large-scale organizations
i35_267
6
320
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
sansantech
PRO
1
330
私とAWSとの関わりの歩み~意志あるところに道は開けるかも?~
nagisa53
1
130
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
nttcom
1
210
大規模イベントを支える ABEMA の アーキテクチャ 変遷 2025
nagapad
5
500
新規事業におけるAIリサーチの活用例
ranxxx
0
170
AI駆動開発 with MixLeap Study【大阪支部 #3】
lycorptech_jp
PRO
0
270
少人数でも回る! DevinとPlaybookで支える運用改善
ishikawa_pro
4
1.7k
完璧を目指さない小さく始める信頼性向上
kakehashi
PRO
0
110
ObsidianをLLM時代のナレッジベースに! クリッピング→Markdown→CLI連携の実践
srvhat09
7
9.7k
[TechNight #91] Oracle Database 最新パフォーマンス分析手法
oracle4engineer
PRO
3
140
Featured
See All Featured
The Language of Interfaces
destraynor
158
25k
Building Adaptive Systems
keathley
43
2.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Navigating Team Friction
lara
187
15k
Scaling GitHub
holman
461
140k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Adopting Sorbet at Scale
ufuk
77
9.5k
Optimizing for Happiness
mojombo
379
70k
How GitHub (no longer) Works
holman
314
140k
Visualization
eitanlees
146
16k
Being A Developer After 40
akosma
90
590k
Transcript
Highly Dynamic Gatsby Sites With WordPress
Hi! I'M ZAC Static & Headless WordPress Community Builder at
Strattic Hosting Educator at JavaScript for WordPress, Frontend Masters, Udacity, Udemy, Treehouse @zgordon gatsbyWPthemes.com
GIVE THANKS @JASONBAHL @MARCYSUTTON @HUSSAIN_THAJ @MUHSINLK @KIDUNOT89 @ALEXADARK @PEHAA @JLENGSTORF
@SCOTTBOLINGER @CHRISBISCARDI @KELLENMACE @ALEXANDERBYOUNG @TYLBAR @THEJEFFMATSON
Dynamic Sites A portion of the content is queried from
WordPress on the client side after the build process is complete. Static Sites Content is queried and created during build time
COMMENTS FORMS MEMBERSHIPS ECOMMERCE LMS GUTENBERG Dynamic Components
CODE IT Write the GraphQL or REST API requests needed
to create the functionality you want. DYNAMIC APPROACHES SASS IT Use a 3rd party service to get the functionality you want.
EXACTLY WHAT YOU WANT EXTENDABLE CODE IT + - SASS
IT DEVELOPMENT TIME & SKILL MAINTENANCE COSTS LITTLE / NO CUSTOM CODING MAINTAINED MAY NOT BE EXTENDABLE OR EVEN EXIST! COSTS
Comments
KEEP IT NATIVE COMMENTS CODE IT CUSTOM SASS IT
KEEP IT NATIVE COMMENTS 1 Code a custom comment form
2 Use Apollo and GraphQL to send comment to WP 3 Trigger rebuild after moderation * Check for new comments client side
COMMENTS tnorthstack.com/dynamic-comments-gatsby-wordpresst
COMMENTS
COMMENTS
COMMENTS github.com/zgordon/gatsby-wordpress-course
COMMENTS CODE IT CUSTOM 1 Code a comment form in
Gatsby 2 Save entries somewhere* 3 Setup moderation (and anti-spam)
COMMENTS jamstack-comments.netlify.com
COMMENTS css-tricks.com/jamstack-comments
COMMENTS
COMMENTS 1 Find the right one 2 Signup (Pay) 3
Embed / Install Pluing SASS IT
COMMENTS SASS IT
COMMENTS
KEEP IT NATIVE COMMENTS CODE IT CUSTOM SASS IT
Forms
FORMS WORDPRESS PLUGIN ROLL YOUR OWN SASS IT
COMMENTS
FORMS WORDPRESS PLUGIN 1 Find WP REST API or WP
GraphQL Compatible Plugin 2 Parse (or Custom Code) Form
FORMS gatsbyjs.org/packages/gatsby-source-gravityforms/
FORMS
FORMS github.com/harness-software/wp-graphql-gravity-forms
FORMS
FORMS GatsbyWPthemes.com
FORMS
FORMS ROLL YOUR OWN 1 Code Custom Form in Gatsby
2 Store Form Submissions 3 Validate(?) Send Emails Check for new comments client side
FORMS
FORMS
FORMS
FORMS SASS IT 1 Find the right one 2 Signup
(Pay) 3 Embed / Install Pluing
FORMS netlify.com/products/forms
FORMS
FORMS getform.io
FORMS
Memberships
Find plugin(s) with compatibility WORDPRESS PLUGIN 1 2 Setup Authentication
3 Login User & Check Permissions 4 Pull in Content Client Side MEMBERSHIPS
MEMBERSHIPS woocommerce.com/products/woocommerce-memberships
MEMBERSHIPS
MEMBERSHIPS
Ecommerce
ECOMMERCE WORDPRESS PLUGIN SASS IT
ECOMMERCE
ECOMMERCE anywherewc.com??? wcanywhere.com???
COMMENTS FORMS MEMBERSHIPS ECOMMERCE LMS GUTENBERG Dynamic Components
COME TALK TO ME! strattic.com // Static WP Hosting jsforwp.com
// Courses, Bootcamps GatsbyWPThemes.com // Themes! @zgordon