Note: This post is part of Learning Decoupling Gatsby WordPress series. This learning post is still in active development and updated regularly.

In the previous Part 1 of Learning Decoupling Gatsby WordPress series, installation of WordPress and Gatsby Source WordPress starter sites, required dependent plugins WPGraphQL, WP Gatsby installation and exposing WordPress data endpoint to Gatsby site by updating gatsby-config.js were discussed.

The objective of this part 2 of the three-parts series is to expand the Gatsby site by update its global components, namely Layout, refactoring Header and adding Footer components. We will also install and configure Gatsby plugin Sass and add basic global layout with CSS Module.

Note: This post is part of Learning Decoupling Gatsby WordPress series. This learning post is still in active development and updated regularly. Most WordPress users, like myself, have come across the terms like headless, decoupled or static WordPress sites. We have read blog posts that many developers have migrated from the WordPress to the static […]

Note: This post is part of Learning Gatsby series. This learning post is still in active development and updated regularly. In components based websites like ReactJs, GatsbyJs, Vue and others reusable components play an important part. Components like <Header />,  <Footer />, <Layout /> and others are often shared throughout the site. In most Gatsbyjs […]

Note: This note is part of learning Gatsby series and still in development. This note is not complete and will be updated frequently. In ReactJs and GatsbyJS, styling components can be achieved in many different ways, including CSS Module. In Gatsby site, CSS Module works out of the box. One of the major advantages of […]

Note: This note is part of learning Gatsby series and still in development. This note is not complete and will be updated frequently. GraphQL query may contains query definitions and fragments. Fragments are selection of query definitions that can be re-used in multiple operations. The concept of query fragments is “to split complicated application data […]