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
990
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
290
Decoupled Days - JAMstack and WordPress for 2020
zgordon
0
180
The State of JavaScript and WordPress in 2020
zgordon
0
940
100 Things to Know About Building, Selling and Supporting Online Courses and Content
zgordon
0
620
How the New Redux Based Data API is Changing Everything in WordPress*
zgordon
0
370
The Data API in WordPress - WCMIA 2019
zgordon
0
1k
Building Custom WordPress Blocks with React - WCPHX 2019
zgordon
0
84
React for Gutenberg, WordPress & Beyond - WordCamp Baltimore 2018
zgordon
0
250
WordCamp Seattle 2017 JavaScript Workshop
zgordon
0
1k
Other Decks in Technology
See All in Technology
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
1
200
「改善」ってこれでいいんだっけ?
ukigmo_hiro
0
330
Azureコストと向き合った、4年半のリアル / Four and a half years of dealing with Azure costs
aeonpeople
1
130
生成AI時代のセキュアコーディングとDevSecOps
yuriemori
0
120
初めてのDatabricks Apps開発
taka_aki
1
130
HR Force における DWH の併用事例 ~ サービス基盤としての BigQuery / 分析基盤としての Snowflake ~@Cross Data Platforms Meetup #2「BigQueryと愉快な仲間たち」
ryo_suzuki
0
230
Performance Insights 廃止から Database Insights 利用へ/transition-from-performance-insights-to-database-insights
emiki
0
300
ニッポンの人に知ってもらいたいGISスポット
sakaik
0
160
Introduction to Sansan Meishi Maker Development Engineer
sansan33
PRO
0
310
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.6k
そのWAFのブロック、どう活かす? サービスを守るための実践的多層防御と思考法 / WAF blocks defense decision
kaminashi
0
200
React19.2のuseEffectEventを追う
maguroalternative
2
490
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Building an army of robots
kneath
306
46k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Side Projects
sachag
455
43k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
980
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
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