wordpress-block-theming

Name: wordpress-block-theming
Author: Automattic

106stars12forks

How to install wordpress-block-theming?

automattic/wordpress-agent-skills/wordpress-block-theming

$npx -y skills add Automattic/wordpress-agent-skills --skill wordpress-block-theming

Installs into the current project.

Summary

WordPress Full Site Editing (FSE) theme architecture. Use when generating theme.json, block templates, template parts, patterns, and functions.php for WordPress block themes.

Files · 1

View on GitHub

SKILL.md

1	# WordPress Block Theming Skill
2
3	Comprehensive knowledge for building WordPress block themes using Full Site Editing (FSE) architecture.
4
5	## Absolute Rules
6
7	- NO EMOJIS: Never use emojis anywhere in generated content - not in headings, paragraphs, button text, or any other text. This applies to all templates, patterns, and content.
8
9	## Theme Architecture
10
11	### Directory Structure
12
13	```
14	theme-slug/
15	├── theme.json # Central configuration file
16	├── style.css # Theme metadata + custom CSS
17	├── functions.php # Asset enqueuing, pattern registration
18	├── templates/ # Block templates
19	│ ├── index.html # Main/fallback template
20	│ ├── single.html # Single post
21	│ ├── page.html # Single page
22	│ ├── archive.html # Archive listings
23	│ ├── search.html # Search results
24	│ └── 404.html # Not found
25	├── parts/ # Reusable template parts
26	│ ├── header.html # Site header
27	│ └── footer.html # Site footer
28	└── patterns/ # Block patterns
29	├── hero.php
30	├── features.php
31	└── cta.php
32	```
33
34	## theme.json Configuration
35
36	The `theme.json` file is the central configuration for block themes. It defines:
37
38	### Schema and Version
39
40	```json
41	{
42	"$schema": "https://schemas.wp.org/trunk/theme.json",
43	"version": 3
44	}
45	```
46
47	### Settings
48
49	Define available options for the editor:
50
51	```json
52	{
53	"settings": {
54	"appearanceTools": true,
55	"layout": { "contentSize": "800px", "wideSize": "1280px" },
56	"color": {
57	"palette": [ /* 5 colors: primary, secondary, accent, light, dark */ ],
58	"defaultPalette": false,
59	"defaultGradients": false
60	},
61	"typography": {
62	"fontFamilies": [ /* heading + body font families */ ],
63	"fontSizes": [ /* 5-6 step scale: small through huge */ ]
64	},
65	"spacing": {
66	"units": ["px", "em", "rem", "%", "vw", "vh"],
67	"spacingSizes": [ /* 6 steps from compact to spacious */ ]
68	}
69	}
70	}
71	```
72
73	### Styles
74
75	Define default styles for the site and blocks:
76
77	```json
78	{
79	"styles": {
80	"color": { /* background + text from palette */ },
81	"typography": { /* body font family, medium size, line-height 1.5-1.65 */ },
82	"elements": {
83	"heading": { /* heading font family, appropriate weight, line-height 1.1-1.3 */ },
84	"link": { /* accent color */ },
85	"button": { /* accent background, light text, border-radius */ }
86	}
87	}
88	}
89	```
90	## Typography
91	- Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
92	- Font size scale: Keep sizes grounded and usable. Body: 1rem. Headings: scale modestly (h1 ≤ 2.5–3rem). Use `clamp()` for responsive display text, but cap at ~3.5rem max. Avoid "massive"/"gigantic" sizes above 4rem—they rarely improve design and often degrade it. A good 6-step scale: 0.875rem / 1rem / 1.25rem / 1.75rem / 2.25rem / clamp(2.5rem, 4vw, 3.5rem).
93	- Line height: Body text: 1.5–1.65. Headings: 1.1–1.3. Never go below 1.0 for any text. Apply via `styles.typography.lineHeight` and `styles.elements.heading.typography.lineHeight` in theme.json.
94
95	## Block Templates
96
97	Templates use WordPress block markup (HTML comments with JSON attributes).
98
99	### Template Structure
100
101	```html
102	<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
103
104	<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
105	<main class="wp-block-group">
106	<!-- Content blocks here -->
107	</main>
108	<!-- /wp:group -->
109
110	<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
111	```
112
113	## Template Parts
114
115	### Header Requirements
116	- Constrained layout group with site-appropriate background
117	- Flex row: `site-title` (level:0 — renders `<p>` not `<h1>`) + `navigation`
118	- Appropriate padding using spacing presets
119
120	### Footer Requirements
121	- Constrained layout group, matching or complementing header style
122	- Content varies by site type (copyright, social links, contact info, etc.)
123	- Include footer margin reset in style.css
124
125	## Block Patterns
126
127	Patterns are PHP files that register reusable block content.
128
129	### Pattern Registration
130
131	```php
132	<?php
133	/**
134	* Title: Hero Section
135	* Slug: theme-slug/hero
136	* Categories: featured
137	*/
138	?>
139	<!-- wp:group {"backgroundColor":"primary","textColor":"light","layout":{"type":"constrained"}} -->
140	...
141	<!-- /wp:group -->
142	```
143
144	## functions.php
145
146	Keep functions.php minimal. Primary uses:
147
148	### Google Fonts Enqueuing
149
150	IMPORTANT: Always use `enqueue_block_assets` hook (not `wp_enqueue_scripts`) to ensure fonts load in BOTH the front-end AND block editor.
151
152	```php
153	<?php
154	/**
155	* Theme functions and definitions
156	*/
157
158	// Enqueue Google Font

People who liked this also viewed

6 picks

Type

wordpress-block-theming

106stars12forks

View on GitHub

How to install wordpress-block-theming?

automattic/wordpress-agent-skills/wordpress-block-theming

$npx -y skills add Automattic/wordpress-agent-skills --skill wordpress-block-theming

Installs into the current project.

Summary

WordPress Full Site Editing (FSE) theme architecture. Use when generating theme.json, block templates, template parts, patterns, and functions.php for WordPress block themes.

Files · 1

View on GitHub

SKILL.md

1	# WordPress Block Theming Skill
2
3	Comprehensive knowledge for building WordPress block themes using Full Site Editing (FSE) architecture.
4
5	## Absolute Rules
6
7	- NO EMOJIS: Never use emojis anywhere in generated content - not in headings, paragraphs, button text, or any other text. This applies to all templates, patterns, and content.
8
9	## Theme Architecture
10
11	### Directory Structure
12
13	```
14	theme-slug/
15	├── theme.json # Central configuration file
16	├── style.css # Theme metadata + custom CSS
17	├── functions.php # Asset enqueuing, pattern registration
18	├── templates/ # Block templates
19	│ ├── index.html # Main/fallback template
20	│ ├── single.html # Single post
21	│ ├── page.html # Single page
22	│ ├── archive.html # Archive listings
23	│ ├── search.html # Search results
24	│ └── 404.html # Not found
25	├── parts/ # Reusable template parts
26	│ ├── header.html # Site header
27	│ └── footer.html # Site footer
28	└── patterns/ # Block patterns
29	├── hero.php
30	├── features.php
31	└── cta.php
32	```
33
34	## theme.json Configuration
35
36	The `theme.json` file is the central configuration for block themes. It defines:
37
38	### Schema and Version
39
40	```json
41	{
42	"$schema": "https://schemas.wp.org/trunk/theme.json",
43	"version": 3
44	}
45	```
46
47	### Settings
48
49	Define available options for the editor:
50
51	```json
52	{
53	"settings": {
54	"appearanceTools": true,
55	"layout": { "contentSize": "800px", "wideSize": "1280px" },
56	"color": {
57	"palette": [ /* 5 colors: primary, secondary, accent, light, dark */ ],
58	"defaultPalette": false,
59	"defaultGradients": false
60	},
61	"typography": {
62	"fontFamilies": [ /* heading + body font families */ ],
63	"fontSizes": [ /* 5-6 step scale: small through huge */ ]
64	},
65	"spacing": {
66	"units": ["px", "em", "rem", "%", "vw", "vh"],
67	"spacingSizes": [ /* 6 steps from compact to spacious */ ]
68	}
69	}
70	}
71	```
72
73	### Styles
74
75	Define default styles for the site and blocks:
76
77	```json
78	{
79	"styles": {
80	"color": { /* background + text from palette */ },
81	"typography": { /* body font family, medium size, line-height 1.5-1.65 */ },
82	"elements": {
83	"heading": { /* heading font family, appropriate weight, line-height 1.1-1.3 */ },
84	"link": { /* accent color */ },
85	"button": { /* accent background, light text, border-radius */ }
86	}
87	}
88	}
89	```
90	## Typography
91	- Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
92	- Font size scale: Keep sizes grounded and usable. Body: 1rem. Headings: scale modestly (h1 ≤ 2.5–3rem). Use `clamp()` for responsive display text, but cap at ~3.5rem max. Avoid "massive"/"gigantic" sizes above 4rem—they rarely improve design and often degrade it. A good 6-step scale: 0.875rem / 1rem / 1.25rem / 1.75rem / 2.25rem / clamp(2.5rem, 4vw, 3.5rem).
93	- Line height: Body text: 1.5–1.65. Headings: 1.1–1.3. Never go below 1.0 for any text. Apply via `styles.typography.lineHeight` and `styles.elements.heading.typography.lineHeight` in theme.json.
94
95	## Block Templates
96
97	Templates use WordPress block markup (HTML comments with JSON attributes).
98
99	### Template Structure
100
101	```html
102	<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
103
104	<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
105	<main class="wp-block-group">
106	<!-- Content blocks here -->
107	</main>
108	<!-- /wp:group -->
109
110	<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
111	```
112
113	## Template Parts
114
115	### Header Requirements
116	- Constrained layout group with site-appropriate background
117	- Flex row: `site-title` (level:0 — renders `<p>` not `<h1>`) + `navigation`
118	- Appropriate padding using spacing presets
119
120	### Footer Requirements
121	- Constrained layout group, matching or complementing header style
122	- Content varies by site type (copyright, social links, contact info, etc.)
123	- Include footer margin reset in style.css
124
125	## Block Patterns
126
127	Patterns are PHP files that register reusable block content.
128
129	### Pattern Registration
130
131	```php
132	<?php
133	/**
134	* Title: Hero Section
135	* Slug: theme-slug/hero
136	* Categories: featured
137	*/
138	?>
139	<!-- wp:group {"backgroundColor":"primary","textColor":"light","layout":{"type":"constrained"}} -->
140	...
141	<!-- /wp:group -->
142	```
143
144	## functions.php
145
146	Keep functions.php minimal. Primary uses:
147
148	### Google Fonts Enqueuing
149
150	IMPORTANT: Always use `enqueue_block_assets` hook (not `wp_enqueue_scripts`) to ensure fonts load in BOTH the front-end AND block editor.
151
152	```php
153	<?php
154	/**
155	* Theme functions and definitions
156	*/
157
158	// Enqueue Google Font

People who liked this also viewed

6 picks

Type