skills.rest
Automattic
AutomatticOFFICIAL
Explore all skills by this author →
Website𝕏@automatticengGitHub

wordpress-block-theming

Guides WordPress block theme development with Full Site Editing architecture and theme.json configuration.

107|14|Updated Feb 13, 2026
Search Tags:#php#css#web design#wordpress#theme development#fse#block themes
One-click install
npx skills add https://github.com/Automattic/wordpress-agent-skills --skill wordpress-block-theming
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wordpress-block-theming
Source: https://github.com/Automattic/wordpress-agent-skills/tree/main/claude-cowork/wp-site-creator/skills/wordpress-block-theming
Command: npx skills add https://github.com/Automattic/wordpress-agent-skills --skill wordpress-block-theming

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance and best practices for creating modern WordPress block themes using the Full Site Editing (FSE) architecture, enabling developers to build flexible and dynamic themes.

Core Features & Use Cases

  • Theme Structure: Defines standard directory layouts for block themes (theme.json, templates/, parts/, patterns/).
  • theme.json Configuration: Details settings for colors, typography, and layout.
  • Block Templates & Parts: Illustrates how to structure HTML templates and reusable parts.
  • Block Patterns: Explains pattern registration and provides examples.
  • functions.php & style.css: Covers asset enqueuing, custom CSS, and theme metadata.
  • Animation & Motion: Guides on implementing CSS animations and scroll-triggered reveals.
  • Landing Page Design: Offers strategies for creating visually engaging full-bleed landing pages.
  • Use Case: A developer needs to create a custom WordPress block theme from scratch. They can use this Skill to understand the required file structure, configure theme.json for branding, design templates and patterns, and implement animations for a dynamic user experience.

Quick Start

Follow the provided structure and examples to begin developing a WordPress block theme.

Frequently Asked Questions about wordpress-block-theming

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a WordPress block theme using Full Site Editing?▼

To build a WordPress block theme, structure your directory with theme.json, templates, parts, and patterns. Configure theme.json for colors and typography, then build HTML templates and reusable parts to enable dynamic site editing.

How do I configure theme.json for a custom WordPress block theme?▼

Configuring theme.json involves defining settings for colors, typography, and layout. This central file controls global styling and branding, establishing the visual foundation for your block templates and patterns.

Do I need PHP and CSS for WordPress block theme development?▼

Yes, you still need PHP for functions.php to enqueue assets, and CSS for custom styling in style.css. While block templates are HTML, PHP manages metadata and enqueuing, and CSS handles specific design overrides.

What is the best way to structure block templates and parts in FSE?▼

The best way to structure Full Site Editing elements is placing block templates in the templates directory and reusable parts in the parts directory. This separation allows modular design and consistent template rendering across the site.

Can I add CSS animations and scroll-triggered reveals to WordPress block themes?▼

Yes, you can implement CSS animations and scroll-triggered reveals in WordPress block themes. The architecture supports custom motion techniques to create dynamic user experiences and visually engaging full-bleed landing pages.

Related Skills

Explore More Software Engineering Skills→
AutomatticAutomattic
31

liberate-local

Convert static HTML, CSS, and JS directories into WordPress block themes.

Official
Advanced
mikkelkrogsholmmikkelkrogsholm
2

wordpress-blocks

Develop and deploy WordPress Gutenberg blocks using Block Hooks and Interactivity APIs.

Community
Intermediate
bobmatnycbobmatnyc
68

wordpress-block-editor-fse

Develop WordPress block themes with theme.json, HTML templates, and custom blocks.

Community
Advanced
jorgerosaljorgerosal
69

wp-theme-development

Evaluate WordPress themes for compatibility with modern block, classic, hybrid, and child patterns.

Community
Advanced