Layouts in Gatsby Themes
First let’s talk a bit about layouts. They come in many
shapes and sizes, with navigations, headers, footers,
sidebars, responsive menus, and many other components. In a
regular Gatsby site, you can ensure a layout is used across
all pages by taking advantage of
It results in a layout that generally can’t be removed by
application code and that usually isn’t an issue because
features can be added directly to the relevant code.
Now, having done that, it may seem prudent to put layouts in
wrapPageElement when building themes
as well. There’s a critical difference to this when building
themes though, and that’s the possibility of multiple other
page layouts existing.
Any given site or other theme can define a application-level
layout by wrapping the site using the
This means we need to be more defensive about how we build
up our theme because multiple themes wrapping the entire
application can result in nested layouts!
So if we aren’t going to apply our layouts globally, where do they go? The answer is that we can put our layout into each of the templates that use it individually in our theme. After doing this, the layouts will only apply to pages our theme controls, reducing the possibility of clashing with existing code. An added benefit is that with component shadowing, the entire layout for a given page can be overridden by the user with their own layout.
Applying layouts more granularly in themes yields more control over rendering to the user of our theme, and ensures themes compose well even with other themes we didn’t think to check against while developing!