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 WordPress
Search
Zac Gordon
February 03, 2020
Technology
0
870
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
220
Decoupled Days - JAMstack and WordPress for 2020
zgordon
0
160
The State of JavaScript and WordPress in 2020
zgordon
0
840
100 Things to Know About Building, Selling and Supporting Online Courses and Content
zgordon
0
540
How the New Redux Based Data API is Changing Everything in WordPress*
zgordon
0
300
The Data API in WordPress - WCMIA 2019
zgordon
0
920
Building Custom WordPress Blocks with React - WCPHX 2019
zgordon
0
69
React for Gutenberg, WordPress & Beyond - WordCamp Baltimore 2018
zgordon
0
240
WordCamp Seattle 2017 JavaScript Workshop
zgordon
0
820
Other Decks in Technology
See All in Technology
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
公共領域から学ぶ クラウド移行についてエンジニアが意識していること
kawakawa2222
0
140
ギークの理想が7つ集まるエムスリーで夢を叶えよう - エムスリー株式会社
m3_engineering
1
260
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
[NIKKEI Tech Talk]Bias for Action!! 実践から学ぶための仕組とコミュニティ / Community for Practice and Learning
kanamasa
0
280
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
AOAI Dev Day LLMシステム開発 Tips集
hirosatogamo
15
3.8k
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
MySQLのロックの種類とその競合
yoku0825
6
1.6k
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
AOAI Dev Day - Opening Session
yoshidashingo
2
470
Featured
See All Featured
Teambox: Starting and Learning
jrom
130
8.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
How STYLIGHT went responsive
nonsquared
93
5k
Practical Orchestrator
shlominoach
185
10k
How to Think Like a Performance Engineer
csswizardry
4
590
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Why Our Code Smells
bkeepers
PRO
332
56k
GitHub's CSS Performance
jonrohan
1026
450k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
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