📚 The Stack

⚙️ Process

🛠 Tooling

✨ Starter Theme

💅 Styling

🧱 Gutenberg Blocks

📄 Views

📝 Custom ACF Fields

Overview

❄️ GraphQL

👀 SEO and Tracking

Analytics & Tag Manager

☀️ Serverless

🧐 How To

Dev Docs

📚 The Stack

1. WordPress

Why are we still using WordPress?

2. Flywheel + Local

Our WordPress hosting provider, and local WordPress development

3. React

Our frontend UI framework of choice

4. TypeScript

Better developer experience and type safety

5. (WP)GraphQL

Hooking up code to data

6. eddev Library

Our custom toolkit for building sites

⚙️ Process

1. Creating a new site

Setting up a new site in 25 easy steps

2. Deployment

Setting up Git-based deployment

3. Bundle Optimisation

Reducing bundle sizes for faster load times

4. Favicons

Standard process for creating favicons

🛠 Tooling

1. CLI

A tour of the default NPM scripts which come with the starter theme

2. Import Shortcuts

Import aliases for dealing with unwieldy import paths

3. Constants

Global values for affecting output bundles

✨ Starter Theme

1. Project Structure

The structure of a theme folder

2. ed.config.json

Configuration for eddev and eddev-php

3. <FadeSlider />

A simple fading carousel

💅 Styling

1. Overview

How does CSS work in our stack?

2. theme.css.tsx

The foundation of your project's design system

3. Responsive Styles

Responsive spacing, sizing and typography

4. Tokens

Abstracting styling values with tokens

5. Colour & Subthemes

Abstracting colour in your project

6. Spacing

Responsive Spacing

7. Typography

Standarising usage of typography in your app

8. Variants and Variables

Make your styled components flexible and efficient

9. Admin Styles

Custom styling for admins

🧱 Gutenberg Blocks

1. Overview

The basics of creating Gutenberg blocks

2. Defining a block

How to create a new block type

3. Block ACF Fields

Provide additional fields for authoring

4. Block GraphQL Files

Pipe data from WordPress into blocks

5. Inline Editing

Seamless content authoring without ACF

6. Nested Blocks

Blocks within blocks

7. Restricting to Post Types

Limit blocks for usage within specific post types

8. Restricting to Page Templates

Limit blocks for usage within specific page templates

9. Dynamic Blocks

Reduce bundle sizes by loading a block asynchronously

📄 Views

1. Overview

Page and post-type templates

2. View Queries

Pipe WordPress data into your templates

3. Displaying Blocks

Display Gutenberg content within a page

4. _app.tsx View

Common site layout

5. Custom Templates

Create custom templates for non-standard pages

📝 Custom ACF Fields

1. Overview

Add custom fields to ACF, with WPGraphQL Support

❄️ GraphQL

1. Overview

Working with GraphQL in the context of eddev

2. Query Hooks

Call queries and mutations dynamically in the browser

3. Extending the GraphQL Schema

Add custom fields to WPGraphQL

👀 SEO and Tracking

1. Analytics & Tag Manager

Setting up Google Analytics and/or Tag Manager

☀️ Serverless

1. Serverless Overview

2. Config

3. WordPress + Vercel

4. APIs

5. RPC API

🧐 How To

1. Menus

Working with WordPress menus

2. Options Pages

Creating ACF options pages and reading them via GraphQL

3. Edit This Site

It's pretty easy!