### Start Development Server (Bash)

Source: https://github.com/house-of-giants/wp-block-docs/blob/main/README.md

Starts the development server for the WordPress Block Documentation project. This command is used after installing dependencies to preview changes locally. Requires Node.js 18+ and pnpm.

```bash
pnpm run dev
```

--------------------------------

### Install Project Dependencies (Bash)

Source: https://github.com/house-of-giants/wp-block-docs/blob/main/README.md

Installs project dependencies using pnpm after cloning the repository. Requires Node.js 18+ and pnpm to be installed.

```bash
git clone https://github.com/house-of-giants/wp-block-docs.git
cd wp-block-docs
pnpm install
```

--------------------------------

### Setup and Repository Management

Source: https://github.com/house-of-giants/wp-block-docs/blob/main/CONTRIBUTING.md

Commands for cloning the repository, managing remotes, and syncing local branches with the upstream source.

```bash
git clone https://github.com/YOUR_USERNAME/wp-block-docs.git
cd wp-block-docs
git remote add upstream https://github.com/house-of-giants/wp-block-docs.git
git checkout main
git pull upstream main
git push origin main
git checkout -b feature/your-feature-name
```

--------------------------------

### Set Up Local Development Environment (Bash)

Source: https://context7.com/house-of-giants/wp-block-docs/llms.txt

This section outlines the local development workflow using Vite, React, and TypeScript. It includes prerequisites, cloning the repository, installing dependencies, and running development and build commands.

```bash
# Prerequisites: Node.js 18+, pnpm

# Clone and install
git clone https://github.com/house-of-giants/wp-block-docs.git
cd wp-block-docs
pnpm install

# Development server (http://localhost:8080)
pnpm run dev

# Production build
pnpm run build

# Type checking
pnpm run typecheck

# Run tests
pnpm test

# Format code
pnpm run format.fix
```

--------------------------------

### WordPress Heading Block Examples

Source: https://context7.com/house-of-giants/wp-block-docs/llms.txt

Provides examples of the WordPress Heading block, demonstrating different heading levels (H1-H6), anchor link creation, and custom styling for typography and color. Essential for structuring content and SEO.

```html
<!-- Default H2 heading -->
<!-- wp:heading -->
<h2 class="wp-block-heading">Your Heading Text</h2>
<!-- /wp:heading -->

<!-- All heading levels -->
<!-- wp:heading {"level":1} -->
<h1 class="wp-block-heading">Page Title (H1)</h1>
<!-- /wp:heading -->

<!-- wp:heading {"level":2} -->
<h2 class="wp-block-heading">Main Section (H2)</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Subsection (H3)</h3>
<!-- /wp:heading -->

<!-- Heading with anchor link -->
<!-- wp:heading {"anchor":"custom-section-id"} -->
<h2 class="wp-block-heading" id="custom-section-id">Section With Anchor</h2>
<!-- /wp:heading -->

<!-- Styled heading -->
<!-- wp:heading {
  "level":2,
  "style": {
    "typography": {
      "fontSize": "3rem",
      "fontWeight": "700"
    },
    "color": {
      "text": "#ff6b9d"
    }
  }
} -->
<h2 class="wp-block-heading has-text-color"
    style="color:#ff6b9d;font-size:3rem;font-weight:700">
  Custom Styled Heading
</h2>
<!-- /wp:heading -->
```

--------------------------------

### Local Development and Build Commands

Source: https://github.com/house-of-giants/wp-block-docs/blob/main/CONTRIBUTING.md

Essential commands for installing dependencies, running the development server, and executing quality assurance tasks like type checking and testing.

```bash
pnpm install
pnpm run dev
pnpm run typecheck
pnpm test
```

--------------------------------

### Available Development Scripts (Bash)

Source: https://github.com/house-of-giants/wp-block-docs/blob/main/README.md

Lists the available npm scripts for managing the development workflow of the WordPress Block Documentation project, including starting the dev server, building for production, type checking, testing, and formatting.

```bash
pnpm run dev          # Start development server
pnpm run build        # Build for production
pnpm run typecheck    # TypeScript type checking
pnpm test            # Run test suite
pnpm run format.fix  # Format code with Prettier
```

--------------------------------

### WordPress Paragraph Block Examples

Source: https://context7.com/house-of-giants/wp-block-docs/llms.txt

Illustrates various ways to use the WordPress Paragraph block, from simple text to advanced styling with drop caps, custom typography, and rich text formatting. It shows how attributes and inline styles are applied.

```html
<!-- Simple paragraph -->
<!-- wp:paragraph -->
<p>This is a simple paragraph with some text content.</p>
<!-- /wp:paragraph -->

<!-- Paragraph with drop cap -->
<!-- wp:paragraph {"dropCap":true} -->
<p class="has-drop-cap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
The first letter will be styled as a large drop cap.</p>
<!-- /wp:paragraph -->

<!-- Paragraph with custom typography -->
<!-- wp:paragraph {
  "style": {
    "typography": {
      "fontSize": "var:preset|font-size|large",
      "lineHeight": "1.8"
    },
    "color": {
      "text": "#ff6b9d"
    }
  }
} -->
<p class="has-text-color" style="color:#ff6b9d;font-size:var(--wp--preset--font-size--large);line-height:1.8">
  Styled paragraph with custom typography settings.
</p>
<!-- /wp:paragraph -->

<!-- Rich text formatting -->
<!-- wp:paragraph -->
<p>This paragraph contains <strong>bold text</strong>,
<em>italic text</em>, and <mark>highlighted text</mark>.
You can also use <del>strikethrough</del> and
<sup>superscript</sup> or <sub>subscript</sub>.</p>
<!-- /wp:paragraph -->
```

--------------------------------

### Implement Image Block with Media Features

Source: https://context7.com/house-of-giants/wp-block-docs/llms.txt

Shows how to implement the WordPress Image block with support for captions, external links, lightbox functionality, and custom dimensions. These examples use the standard block markup format to define image attributes.

```html
<!-- Basic image -->
<!-- wp:image {"id":123,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large">
  <img src="https://example.com/image.jpg" alt="Descriptive alt text" class="wp-image-123" />
</figure>
<!-- /wp:image -->

<!-- Image with caption -->
<!-- wp:image {"id":123,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large">
  <img src="https://example.com/image.jpg" alt="Landscape photo" class="wp-image-123" />
  <figcaption class="wp-element-caption">Photo taken in Yosemite National Park</figcaption>
</figure>
<!-- /wp:image -->

<!-- Image with link -->
<!-- wp:image {"id":123,"href":"https://example.com/gallery","linkTarget":"_blank"} -->
<figure class="wp-block-image">
  <a href="https://example.com/gallery" target="_blank" rel="noreferrer noopener">
    <img src="https://example.com/image.jpg" alt="Gallery preview" class="wp-image-123" />
  </a>
</figure>
<!-- /wp:image -->

<!-- Image with lightbox (WordPress 6.4+) -->
<!-- wp:image {"id":123,"lightbox":{"enabled":true}} -->
<figure class="wp-block-image">
  <img src="https://example.com/image.jpg" alt="Click to enlarge" class="wp-image-123" />
</figure>
<!-- /wp:image -->
```

--------------------------------

### Create List Blocks in WordPress

Source: https://context7.com/house-of-giants/wp-block-docs/llms.txt

The List block supports ordered and unordered lists with nested items. It allows for advanced configurations such as custom start values and list types.

```html
<!-- wp:list -->
<ul class="wp-block-list">
  <li>First item</li>
</ul>
<!-- /wp:list -->

<!-- wp:list {"ordered":true,"start":5,"type":"A"} -->
<ol class="wp-block-list" start="5" type="A">
  <li>Item E</li>
</ol>
<!-- /wp:list -->
```

--------------------------------

### Development Commands for Project Management

Source: https://github.com/house-of-giants/wp-block-docs/blob/main/AGENTS.md

A collection of essential development commands for managing the project. These commands cover starting the development server, building for production, performing TypeScript validation, and running tests using Vitest.

```bash
pnpm run dev        # Start dev server
pnpm run build      # Production build
pnpm run typecheck  # TypeScript validation
pnpm test          # Run Vitest tests

```

--------------------------------

### Combine CSS Classes with cn Utility

Source: https://github.com/house-of-giants/wp-block-docs/blob/main/AGENTS.md

This example illustrates the usage of the `cn` utility function, which combines `clsx` and `tailwind-merge`. It's designed to conditionally apply Tailwind CSS classes and merge them with base classes and user-provided overrides for flexible styling.

```typescript
// cn utility usage
className={cn(
  "base-classes",
  { "conditional-class": condition },
  props.className  // User overrides
)}

```

--------------------------------

### Project Structure Overview (Text)

Source: https://github.com/house-of-giants/wp-block-docs/blob/main/README.md

Illustrates the directory structure of the WordPress Block Documentation project, highlighting key directories like 'client' for the frontend application and 'public' for static assets.

```text
├── client/                 # React frontend application
│   ├── components/        # Reusable UI components
│   │   ├── ui/           # Base UI components (buttons, cards, etc.)
│   │   ├── PageHeader.tsx # Reusable page header component
│   │   ├── ContentSection.tsx # Content section wrapper
│   │   └── SearchModal.tsx # Global search functionality
│   ├── pages/            # Route components
│   │   ├── Index.tsx     # Homepage
│   │   ├── BlockIndex.tsx # Block directory
│   │   ├── Resources.tsx  # Developer resources
│   │   └── blocks/       # Individual block documentation
│   ├── hooks/            # Custom React hooks
│   ├── lib/              # Utility functions
│   └── global.css        # Global styles and theme
└── public/              # Static assets
```

--------------------------------

### Configure Columns Blocks

Source: https://context7.com/house-of-giants/wp-block-docs/llms.txt

Shows how to structure multi-column layouts, including custom width percentages, vertical alignment, and mobile stacking behavior.

```html
<!-- wp:columns {"verticalAlignment":"center"} -->
<div class="wp-block-columns are-vertically-aligned-center">
  <!-- wp:column -->
  <div class="wp-block-column">
    <!-- Content vertically centered -->
  </div>
  <!-- /wp:column -->
</div>
<!-- /wp:columns -->

<!-- wp:columns {"isStackedOnMobile":false} -->
<div class="wp-block-columns is-not-stacked-on-mobile">
  <!-- Columns remain side-by-side on mobile -->
</div>
<!-- /wp:columns -->
```

--------------------------------

### Implement Button Blocks

Source: https://context7.com/house-of-giants/wp-block-docs/llms.txt

Demonstrates how to create call-to-action buttons with support for external links, security attributes, custom colors, and width adjustments.

```html
<!-- wp:button -->
<div class="wp-block-button">
  <a class="wp-block-button__link wp-element-button">Click Me</a>
</div>
<!-- /wp:button -->

<!-- wp:button {"url":"https://example.com"} -->
<div class="wp-block-button">
  <a class="wp-block-button__link wp-element-button" href="https://example.com">Learn More</a>
</div>
<!-- /wp:button -->

<!-- wp:button {"linkTarget":"_blank","url":"https://external-site.com","rel":"noopener noreferrer"} -->
<div class="wp-block-button">
  <a class="wp-block-button__link wp-element-button"
     href="https://external-site.com"
     target="_blank"
     rel="noopener noreferrer">External Link</a>
</div>
<!-- /wp:button -->
```

--------------------------------

### Define Query Loop Blocks

Source: https://context7.com/house-of-giants/wp-block-docs/llms.txt

Illustrates how to fetch and display dynamic content using the Query Loop block, supporting pagination, category filtering, and main query inheritance.

```html
<!-- wp:query {"queryId":1,"query":{"perPage":3,"postType":"post","order":"desc","orderBy":"date"}} -->
<div class="wp-block-query">
  <!-- wp:post-template -->
    <!-- wp:post-title /-->
    <!-- wp:post-excerpt /-->
    <!-- wp:post-date /-->
  <!-- /wp:post-template -->

  <!-- wp:query-pagination -->
  <div class="wp-block-query-pagination">
    <!-- wp:query-pagination-previous /-->
    <!-- wp:query-pagination-numbers /-->
    <!-- wp:query-pagination-next /-->
  </div>
  <!-- /wp:query-pagination -->
</div>
<!-- /wp:query -->
```

--------------------------------

### Adding New Block Documentation (Text)

Source: https://github.com/house-of-giants/wp-block-docs/blob/main/README.md

Outlines the steps required to add documentation for a new WordPress block within the project. This involves creating a new page, using a layout component, updating routing and search data, and adding navigation links.

```text
1. Create a new page in `client/pages/blocks/`
2. Follow the existing pattern using `BlockPageLayout` component
3. Add the route to `client/App.tsx`
4. Update the search data in `client/components/SearchModal.tsx`
5. Add navigation links in `client/components/DocLayout.tsx`
```

--------------------------------

### Use React Components for WP Block Documentation (TSX)

Source: https://context7.com/house-of-giants/wp-block-docs/llms.txt

This project utilizes reusable React components for displaying WordPress block documentation. Features include syntax highlighting, copy-to-clipboard functionality, and structured layout components.

```tsx
import { WPBlockCodeBlock } from "@/components/WPBlockCodeBlock";
import { CodeBlock } from "@/components/CodeBlock";
import { PageHeader } from "@/components/PageHeader";
import { ContentSection } from "@/components/ContentSection";

// WordPress block code with syntax highlighting
<WPBlockCodeBlock
  code={`<!-- wp:paragraph -->
<p>Hello World</p>
<!-- /wp:paragraph -->`}
  showCopy={true}
  maxHeight="400px"
/>

// Generic code block
<CodeBlock
  code="const x = 1;"
  language="typescript"
  filename="example.ts"
  showCopy={true}
/>

// Page header with icon and badges
<PageHeader
  icon={FileText}
  iconColor="text-neon-cyan"
  iconBgColor="bg-neon-cyan/20"
  title="Paragraph Block"
  description="The most fundamental content block in WordPress."
  badges={[
    { text: "Core Block", variant: "secondary" },
    { text: "Rich Text", variant: "outline" }
  ]}
/>

// Content section wrapper
<ContentSection
  title="Basic Syntax"
  icon={Code}
  iconColor="text-neon-blue"
>
  {/* Section content */}
</ContentSection>
```

--------------------------------

### Implement Group Block with Layout and Styling

Source: https://context7.com/house-of-giants/wp-block-docs/llms.txt

Demonstrates various configurations for the WordPress Group block, including padding, margin, background colors, constrained layouts, and semantic HTML tags. These blocks serve as containers for grouping other content blocks.

```html
<!-- Minimal group block -->
<!-- wp:group -->
<div class="wp-block-group">
  <!-- Inner blocks go here -->
</div>
<!-- /wp:group -->

<!-- Group with padding and margin -->
<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|30","right":"var:preset|spacing|30"},"margin":{"top":"var:preset|spacing|40"}}}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--40);padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--30)">
  <!-- Content -->
</div>
<!-- /wp:group -->

<!-- Group with background color -->
<!-- wp:group {"backgroundColor":"primary","style":{"color":{"background":"#ff6b9d"}}} -->
<div class="wp-block-group has-primary-background-color has-background" style="background-color:#ff6b9d">
  <!-- Content -->
</div>
<!-- /wp:group -->

<!-- Group with constrained layout -->
<!-- wp:group {"layout":{"type":"constrained","contentSize":"800px","wideSize":"1200px"}} -->
<div class="wp-block-group">
  <!-- Content constrained to max-width -->
</div>
<!-- /wp:group -->

<!-- Group with semantic HTML tag -->
<!-- wp:group {"tagName":"section"} -->
<section class="wp-block-group">
  <!-- Use section, article, aside, header, footer, main, or nav -->
</section>
<!-- /wp:group -->
```

--------------------------------

### Highlight WordPress Block Markup with WPBlockHighlighter API (TypeScript)

Source: https://context7.com/house-of-giants/wp-block-docs/llms.txt

The WPBlockHighlighter API provides custom syntax highlighting for WordPress block markup, supporting block comments, JSON attributes, and HTML. It parses code into tokens and can convert these tokens into highlighted HTML.

```typescript
import { WPBlockHighlighter, HighlightToken } from "@/lib/wp-block-highlighter";

// Highlight WordPress block code
const code = `<!-- wp:paragraph {"dropCap":true} -->
<p class="has-drop-cap">Hello World</p>
<!-- /wp:paragraph -->`;

// Parse code into tokens
const tokens: HighlightToken[] = WPBlockHighlighter.highlight(code);

// Token types:
// - "block-comment-start" / "block-comment-end": <!-- wp: and -->
// - "block-name": paragraph, group, image, etc.
// - "block-attributes": JSON attributes like {"dropCap":true}
// - "html-tag": HTML elements
// - "html-attribute": class, style, href, etc.
// - "html-value": attribute values
// - "text": regular text content
// - "error": invalid JSON or syntax errors

// Convert tokens to highlighted HTML
const highlightedHtml: string = WPBlockHighlighter.tokensToHtml(tokens);
```

--------------------------------

### Define SPA Routes with React Router 6

Source: https://github.com/house-of-giants/wp-block-docs/blob/main/AGENTS.md

This snippet demonstrates how to define routes for a Single Page Application (SPA) using React Router 6. It shows the basic structure for setting up routes, including a home page and a catch-all route for 404 pages. Ensure custom routes are placed before the catch-all route.

```typescript
import { BrowserRouter, Routes, Route } from "react-router-dom";

<Routes>
  <Route path="/" element={<Index />} />
  {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
  <Route path="*" element={<NotFound />} />
</Routes>;

```

--------------------------------

### Configure Gallery Blocks in WordPress

Source: https://context7.com/house-of-giants/wp-block-docs/llms.txt

The Gallery block displays image collections in responsive grids. It supports column configuration, image linking, and captions.

```html
<!-- wp:gallery {"columns":3,"linkTo":"none"} -->
<figure class="wp-block-gallery has-nested-images columns-3 is-cropped">
  <!-- wp:image {"id":123} -->
  <figure class="wp-block-image">
    <img src="image1.jpg" alt="" class="wp-image-123" />
  </figure>
  <!-- /wp:image -->
</figure>
<!-- /wp:gallery -->
```

--------------------------------

### Implement Navigation Block in WordPress

Source: https://context7.com/house-of-giants/wp-block-docs/llms.txt

The Navigation block facilitates responsive site menus. It supports referencing existing menus, inline link definitions, submenus, and custom styling via block attributes.

```html
<!-- wp:navigation {"ref":123} /-->

<!-- wp:navigation {"overlayMenu":"mobile"} -->
  <!-- wp:navigation-link {"label":"Home","url":"/"} /-->
  <!-- wp:navigation-link {"label":"About","url":"/about"} /-->
<!-- /wp:navigation -->
```

--------------------------------

### WordPress Block Syntax Structure

Source: https://context7.com/house-of-giants/wp-block-docs/llms.txt

Demonstrates the fundamental HTML comment structure used by WordPress Gutenberg blocks, including basic and self-closing block formats. This syntax is crucial for programmatic block manipulation.

```html
<!-- Basic block structure -->
<!-- wp:blockname {"attribute":"value"} -->
<div class="wp-block-blockname">
  <!-- Inner content or nested blocks -->
</div>
<!-- /wp:blockname -->

<!-- Self-closing block (no inner content) -->
<!-- wp:separator -->
<hr class="wp-block-separator" />
<!-- /wp:separator -->
```

--------------------------------

### Access Block Properties Definitions with TypeScript

Source: https://context7.com/house-of-giants/wp-block-docs/llms.txt

The block properties system offers comprehensive attribute definitions for all WordPress blocks. You can retrieve properties for specific block types or access universal properties common to all blocks.

```typescript
import {
  getBlockProperties,
  universalBlockProperties,
  PropertyCategory,
  BlockProperty
} from "@/lib/block-properties";

// Get all properties for a specific block type
const groupProperties: PropertyCategory[] = getBlockProperties("group");
// Includes universal properties + group-specific properties

// Universal properties available to ALL blocks:
// - className, anchor, lock (Core Attributes)
// - style.color.*, textColor, backgroundColor (Styling)
// - style.typography.*, fontSize (Typography)
// - style.spacing.* (Spacing & Layout)
// - style.border.* (Border & Outline)
// - style.dimensions.* (Dimensions)

// Supported block types:
type BlockType = "group" | "columns" | "image" | "heading" |
  "paragraph" | "button" | "query-loop" | "navigation" |
  "list" | "quote" | "gallery";
```

--------------------------------

### Add New Page Route in React App

Source: https://github.com/house-of-giants/wp-block-docs/blob/main/AGENTS.md

This snippet outlines the steps to add a new page route to the React application. It involves creating the page component in the `client/pages/` directory and then defining the corresponding route in `client/App.tsx`.

```typescript
1. Create component in `client/pages/MyPage.tsx`
2. Add route in `client/App.tsx`:

<Route path="/my-page" element={<MyPage />} />

```

--------------------------------

### Validate WordPress Block Markup with TypeScript

Source: https://context7.com/house-of-giants/wp-block-docs/llms.txt

The Block Validator tool checks WordPress block markup for syntax errors, accessibility issues, and adherence to best practices. It returns a ValidationResult object containing the type of issue, a message, and optional suggestions or fixed code.

```typescript
// Block validation result interface
interface ValidationResult {
  type: "error" | "warning" | "success" | "info";
  message: string;
  suggestion?: string;
  fixedCode?: string;
}

// Common validation checks performed:
// - Valid JSON syntax in block attributes
// - Matching opening and closing block comments
// - Alt text presence on images
// - Single H1 per page for SEO
// - rel="noopener noreferrer" on external links
// - Valid spacing preset formats
// - Semantic HTML usage recommendations
```

--------------------------------

### Define Quote Blocks in WordPress

Source: https://context7.com/house-of-giants/wp-block-docs/llms.txt

The Quote block is used for testimonials or highlighted text. It supports citations, custom CSS classes for styling, and inline typography attributes.

```html
<!-- wp:quote -->
<blockquote class="wp-block-quote">
  <p>The web is for everyone.</p>
  <cite>Tim Berners-Lee</cite>
</blockquote>
<!-- /wp:quote -->
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.