2. To BE COVERED
Main points of discussion
⩥ Why use Gatsby with WordPress?
⩥ Gatsby Theme for Decoupled WordPress
⩥ Real world project example.
⩥ Challenges when build custom home page
with Gatsby WordPress Theme
⩥ How do we solve those challenges?
⩥ Free Example theme with the
implementation.
3. ⩥ Free and open-source ( Both Gatsby and WordPress )
⩥ Blazing fast
⩥ Secure ( no direct connection to the database )
⩥ Development Experience ( Use modern front-end
libraries like React, GraphQL )
⩥ Content Mesh - ( Pull content from many sources )
⩥ Content Migration is easy.
Why Gatsby with WordPress
8. ⩥ Require custom data
⊳ Selectable and sortable featured posts.
⊳ Relational data
⊳ Taxonomies
⩥ Pages have interactive elements
When do we require Custom fields?
26. ⩥ gatsby-transformer-sharp
⊳ Creates ImageSharp nodes from image types
and provides fields for processing your
images in a variety of ways including
resizing, cropping, and creating responsive
images.
Image Optimization plugins - sharp library
27. ⩥ gatsby-plugin-sharp
⊳ Helper plugin that exposes several image
processing functions built on the Sharp
image processing library.
⩥ gatsby-source-filesystem
⊳ Sources data from your local filesystem and
creates File nodes from files.
Image Optimization plugins
28. ⩥ gatsby-plugin-graphql-image
⊳ Traverses a grapqhl schema sourced from the
gatsby-source-graphql plugin and generates
file nodes for use with gatsby-plugin-sharp
and gatsby-transformer-sharp.
Image Optimization plugins
34. I am Imran Sayed
Full Stack Engineer @rtCamp
You can find me at
@imranhsayed on twitter
Thank YOU!
Notes de l'éditeur
Since its introduction, few can argue that the Gutenberg editor has opened up and elevated the WordPress content creation experience. However, since Gutenberg dumps HTML right onto the page,when we have interactive elements like button click etc, it's not possible to run a direct DOM query on the content using React. One way out is to parse each of the blocks in order to add interactivity in the front end. However, this is a time-consuming process, and not always an option.
This was exactly the scenario that we found ourselves in with one of our clients, Open Web (formerly SPOT.IM) They wanted to build a Gatsby-powered front end that was lightning quick, and pair it with the flexible and stable WordPress CMS on the backend. The project had a steep deadline, only 1 month between commencement & launch.
So we had to find another way forward. What we came up with, and I think you will agree, is pretty stunning.
