📚 The Stack
WordPress
Flywheel + Local
React
TypeScript
(WP)GraphQL
eddev
Library
⚙️ Process
Creating a new site
Deployment
Bundle Optimisation
Favicons
🛠 Tooling
CLI
Import Shortcuts
Constants
✨ Starter Theme
Project Structure
ed.config.json
<FadeSlider />
💅 Styling
Overview
theme.css.tsx
Responsive Styles
Tokens
Colour & Subthemes
Spacing
Typography
Variants and Variables
Admin Styles
🧱 Gutenberg Blocks
Overview
Defining a block
Block ACF Fields
Block GraphQL Files
Inline Editing
Nested Blocks
Restricting to Post Types
Restricting to Page Templates
Dynamic Blocks
📄 Views
Overview
View Queries
Displaying Blocks
_app.tsx
View
Custom Templates
📝 Custom ACF Fields
Overview
❄️ GraphQL
Overview
Query Hooks
Extending the GraphQL Schema
👀 SEO and Tracking
Analytics & Tag Manager
☀️ Serverless
Serverless Overview
Config
WordPress + Vercel
APIs
RPC API
🧐 How To
Menus
Options Pages
Edit This Site
💅 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