WP Block Docs

https://www.wpblockdocs.com
Admin
WP Block Docs is a comprehensive reference guide for WordPress block HTML markup, providing...
Tokens:25,947
Snippets:215
Trust Score:4.5
Update:7 months ago
Show doc for...
Tokens:
Raw
### WordPress Paragraph Block: Blog Post Introduction Example

Source: https://www.wpblockdocs.com/blocks/paragraph

Shows a Paragraph block configured for a blog post introduction, featuring a drop cap, medium font size, custom class name 'intro-paragraph', and specific margin and line height styles. This example highlights advanced styling options.

```html
<!-- wp:paragraph {
  "dropCap":true,
  "fontSize":"medium",
  "className":"intro-paragraph",
  "style": {
    "spacing": {
      "margin": {"bottom": "var:preset|spacing|60"}
    },
    "typography": {
      "lineHeight": "1.7"
    }
  }
} -->
<p class="has-drop-cap has-medium-font-size intro-paragraph" 
   style="line-height:1.7;
          margin-bottom:var(--wp--preset--spacing--60)">
  Welcome to our comprehensive guide on mastering 
  WordPress block development. In this article, we'll 
  explore the fundamental concepts and advanced 
  techniques that will transform your approach to 
  content creation.
</p>
<!-- /wp:paragraph -->
```

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

### Border and Outline Properties Example

Source: https://www.wpblockdocs.com/properties

Provides examples for applying border styles, widths, colors, and radii to blocks. Includes options for individual sides and theme-defined styles.

```html
<!-- Applying a solid, 2px, grey border with 8px radius -->
<div style="border-color: #e5e7eb; border-width: 2px; border-style: solid; border-radius: 8px;">
  Box with border
</div>

<!-- Applying a specific top border -->
<div style="border-top-color: #ff6b9d; border-top-width: 1px; border-top-style: solid;">
  Box with top border
</div>
```

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

### WordPress Block Syntax Example

Source: https://www.wpblockdocs.com/

Demonstrates the structure of a WordPress block comment, including attributes and nested blocks. This example shows a 'group' block with styling for padding and contains a 'heading' block.

```html
<!-- wp:group {
  "style": {
    "spacing": {
      "padding": {
        "top": "var:preset|spacing|4xl"
      }
    }
  }
} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--4-xl)">
  <!-- wp:heading {"level":2} -->
  <h2 class="wp-block-heading">Your content here</h2>
  <!-- /wp:heading -->
</div>
<!-- /wp:group -->
```

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

### Portfolio Showcase Gallery

Source: https://www.wpblockdocs.com/blocks/gallery

Example of a portfolio showcase gallery with 3 columns, linking to attachments, and a custom class.

```APIDOC
## POST /websites/wpblockdocs/gallery

### Description
Creates a portfolio showcase gallery with project previews.

### Method
POST

### Endpoint
/websites/wpblockdocs/gallery

### Parameters
#### Request Body
- **columns** (number) - Optional - Number of columns in the gallery grid. Defaults to 3.
- **linkTo** (string) - Optional - Where gallery images should link. Values: none, media, attachment. Defaults to "attachment".
- **className** (string) - Optional - CSS class name(s) to add to the block wrapper.
- **images** (array) - Required - Array of image objects in the gallery. Each object should have 'url' and 'alt' properties.

### Request Example
```json
{
  "columns": 3,
  "linkTo": "attachment",
  "className": "portfolio-gallery",
  "images": [
    {
      "url": "project-preview.jpg",
      "alt": "E-commerce website redesign project"
    }
  ]
}
```

### Response
#### Success Response (200)
- **galleryId** (string) - The ID of the created gallery.
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "galleryId": "gallery_12345",
  "message": "Portfolio gallery created successfully."
}
```
```

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

### Spacing and Layout Properties Example

Source: https://www.wpblockdocs.com/properties

Demonstrates setting margins, padding, and block gaps using theme spacing presets. Covers 'style.spacing' for precise layout control.

```html
<div style="margin-top: var(--wp--preset--spacing--50); margin-right: var(--wp--preset--spacing--30); margin-bottom: var(--wp--preset--spacing--50); margin-left: var(--wp--preset--spacing--30); padding: var(--wp--preset--spacing--40);">
  <p>Content with custom spacing.</p>
</div>

<div class="wp-block-group" style="gap: var(--wp--preset--spacing--30);">
  <!-- Child blocks -->
</div>
```

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

### Template Hierarchy Comparison

Source: https://www.wpblockdocs.com/fse-quirks

Illustrates the difference between traditional PHP-based template hierarchy and the FSE HTML-based hierarchy, highlighting how database customizations can override theme files.

```html
<!-- Traditional expectation -->
single-product.php → single.php → index.php

<!-- FSE reality -->
single-product.html → single.html → index.html
↓ (but also...)
Customized templates in database override file-based templates
```

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

### Styling and Appearance Properties Example

Source: https://www.wpblockdocs.com/properties

Illustrates how to apply text, background, and gradient colors using both direct CSS values and theme palette slugs. Covers 'style.color' and theme-specific color properties.

```html
<!-- Using direct CSS values -->
<div style="color: #ff6b9d; background-color: var(--wp--preset--color--primary); background-image: linear-gradient(45deg, #ff6b9d, #c44569);">
  <!-- Content with custom colors -->
</div>

<!-- Using theme color palette slugs -->
<div class="has-primary-color has-background-color has-vivid-cyan-blue-to-vivid-purple-gradient-background">
  <!-- Content with theme colors -->
</div>
```

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

### Team Gallery

Source: https://www.wpblockdocs.com/blocks/gallery

Example of a team gallery with 4 columns, no linking, and custom class, including captions.

```APIDOC
## POST /websites/wpblockdocs/gallery

### Description
Creates a team gallery with member photos, captions, and roles.

### Method
POST

### Endpoint
/websites/wpblockdocs/gallery

### Parameters
#### Request Body
- **columns** (number) - Optional - Number of columns in the gallery grid. Defaults to 4.
- **linkTo** (string) - Optional - Where gallery images should link. Values: none, media, attachment. Defaults to "none".
- **className** (string) - Optional - CSS class name(s) to add to the block wrapper.
- **images** (array) - Required - Array of image objects in the gallery. Each object should have 'url', 'alt', and 'caption' properties.

### Request Example
```json
{
  "columns": 4,
  "linkTo": "none",
  "className": "team-gallery",
  "images": [
    {
      "url": "team-member.jpg",
      "alt": "Sarah Johnson, Lead Designer",
      "caption": "Sarah Johnson<br>Lead Designer"
    }
  ]
}
```

### Response
#### Success Response (200)
- **galleryId** (string) - The ID of the created gallery.
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "galleryId": "gallery_67890",
  "message": "Team gallery created successfully."
}
```
```

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

### Template Part Syncing

Source: https://www.wpblockdocs.com/fse-quirks

Demonstrates the syntax for template parts in FSE and notes the common issue where updates fail to propagate, often requiring cache clearing or direct database intervention.

```html
<!-- Template part that might not sync -->
<!-- wp:template-part {"slug":"header","area":"header"} /-->
```

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

### Spacing Scale Inconsistency

Source: https://www.wpblockdocs.com/fse-quirks

Demonstrates how complex values like 'clamp' in theme.json spacing configurations can sometimes result in simplified or broken CSS output.

```json
{
  "spacing": {
    "spacingSizes": [
      {"size": "clamp(1rem, 2.5vw, 2rem)", "slug": "medium", "name": "Medium"}
    ]
  }
}
```

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

### Typography Properties Example

Source: https://www.wpblockdocs.com/properties

Shows how to control font size, family, weight, line height, letter spacing, text decoration, and transformation using CSS units, presets, and theme slugs.

```html
<!-- Using CSS units and presets -->
<p style="font-size: var(--wp--preset--font-size--large); font-family: var(--wp--preset--font-family--heading); font-weight: 700; line-height: 1.5; letter-spacing: 0.1em; text-decoration: underline; text-transform: uppercase;">
  Styled text
</p>

<!-- Using theme font size slug -->
<p class="has-large-font-size">
  Text with theme large font size
</p>
```

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

### Responsive Padding Workaround

Source: https://www.wpblockdocs.com/fse-quirks

Demonstrates the lack of granular responsive controls in FSE and provides a CSS media query workaround to adjust block padding for mobile devices.

```css
@media (max-width: 768px) {
  .wp-block-group {
    padding: 1rem !important;
  }
}
```

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

### Core Block Attributes Example

Source: https://www.wpblockdocs.com/properties

Demonstrates the use of core attributes like 'className', 'anchor', and 'lock' for WordPress blocks. These are fundamental properties available to all blocks.

```html
<div class="my-custom-class another-class" id="section-hero">
  <!-- Block content -->
</div>

<!-- Example of lock attribute (WordPress 5.9+) -->
<!-- {"move": false, "remove": true} -->
```

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

### WordPress Paragraph Block: Call-to-Action Example

Source: https://www.wpblockdocs.com/blocks/paragraph

Presents a Paragraph block styled as a call-to-action, centered with a large font size, custom class 'cta-text', white text color, specific padding, and a bold font weight, using a 'primary' background color. This demonstrates styling for engagement.

```html
<!-- wp:paragraph {
  "align":"center",
  "fontSize":"large",
  "className":"cta-text",
  "style": {
    "color": {
      "text": "#ffffff"
    },
    "spacing": {
      "padding": {
        "top": "var:preset|spacing|50",
        "bottom": "var:preset|spacing|50"
      }
    },
    "typography": {
      "fontWeight": "600"
    }
  },
  "backgroundColor":"primary"
} -->
<p class="has-text-align-center has-large-font-size 
   has-primary-background-color has-background cta-text" 
   style="color:#ffffff;
          font-weight:600;
          padding-top:var(--wp--preset--spacing--50);
          padding-bottom:var(--wp--preset--spacing--50)">
  Ready to transform your business? 
  <strong>Get started today</strong> and see the difference.
</p>
<!-- /wp:paragraph -->
```

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

### Advanced Heading Styling and Content Structure

Source: https://www.wpblockdocs.com/blocks/heading

Examples of using the Heading block for complex layouts, including blog post structures with anchor links and highly customized marketing hero sections using inline styles and gradients.

```HTML
<!-- wp:heading {"level":1} -->
<h1 class="wp-block-heading">Complete Guide to WordPress Blocks</h1>
<!-- /wp:heading -->

<!-- wp:heading {"level":2,"anchor":"introduction"} -->
<h2 id="introduction" class="wp-block-heading">Introduction</h2>
<!-- /wp:heading -->

<!-- wp:heading {
  "level":1,
  "className":"hero-title",
  "style":{
    "typography":{
      "fontSize":"clamp(3rem, 8vw, 6rem)",
      "fontWeight":"900",
      "lineHeight":"0.9",
      "textTransform":"uppercase"
    },
    "color":{
      "gradient":"linear-gradient(45deg, #ff6b9d, #c44569)"
    }
  } 
} -->
<h1 class="wp-block-heading hero-title has-background" style="background:linear-gradient(45deg, #ff6b9d, #c44569); font-size:clamp(3rem, 8vw, 6rem); font-weight:900; line-height:0.9; text-transform:uppercase">Transform Your Business</h1>
<!-- /wp:heading -->
```

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

### Inline CSS Generation in WordPress Blocks

Source: https://www.wpblockdocs.com/fse-quirks

Demonstrates how individual styled blocks in WordPress generate inline CSS, contributing to increased page size and reduced performance. Multiple blocks can lead to significant duplication of CSS rules.

```html
<!-- Each styled block generates CSS like this -->
<style id="wp-block-library-inline-css">
.wp-block-group.is-layout-flow > .alignleft { float: left; }
.wp-block-group.is-layout-flow > .alignright { float: right; }
/* ... hundreds more lines for each block */
</style>

<!-- Multiple blocks = lots of repeated CSS -->
<!-- Consider: 20 blocks × 50 lines CSS = 1000 lines of inline CSS -->
```

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

### Card Container Group Block Example

Source: https://www.wpblockdocs.com/blocks/group

Illustrates a Group block styled as a card container, incorporating padding, a border with a specific radius, and a light border color. This setup is useful for creating distinct content cards.

```html
<!-- wp:group {
  "className": "card",
  "style": {
    "spacing": {
      "padding": {
        "top": "var:preset|spacing|50",
        "right": "var:preset|spacing|50",
        "bottom": "var:preset|spacing|50",
        "left": "var:preset|spacing|50"
      }
    },
    "border": {
      "radius": "8px",
      "width": "1px",
      "color": "#e5e7eb"
    }
  }
} -->
<div class="wp-block-group card has-border-color" 
     style="border-color:#e5e7eb;
            border-width:1px;
            border-radius:8px;
            padding-top:var(--wp--preset--spacing--50);
            padding-right:var(--wp--preset--spacing--50);
            padding-bottom:var(--wp--preset--spacing--50);
            padding-left:var(--wp--preset--spacing--50)">
  <!-- Card content -->
</div>
<!-- /wp:group -->
```

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

### Hero Section Group Block Example

Source: https://www.wpblockdocs.com/blocks/group

An example of a Group block configured as a hero section, featuring custom background color and significant top/bottom padding using spacing presets. It utilizes the 'constrained' layout type.

```html
<!-- wp:group {
  "className": "hero-section",
  "style": {
    "spacing": {
      "padding": {
        "top": "var:preset|spacing|80",
        "bottom": "var:preset|spacing|80"
      }
    },
    "color": {
      "background": "#1a1a2e"
    }
  },
  "layout": {
    "type": "constrained"
  }
} -->
<div class="wp-block-group hero-section has-background" 
     style="background-color:#1a1a2e;
            padding-top:var(--wp--preset--spacing--80);
            padding-bottom:var(--wp--preset--spacing--80)">
  <!-- Hero content -->
</div>
<!-- /wp:group -->
```

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

### Implement Product Image with Lightbox

Source: https://www.wpblockdocs.com/blocks/image

Configures an image with the lightbox feature enabled, requiring WordPress 6.4+, and includes data attributes for interactive behavior.

```HTML
<!-- wp:image {
  "id":789,
  "sizeSlug":"medium",
  "lightbox":{"enabled":true},
  "className":"product-image",
  "style":{"border":{"radius":"8px"}}
} -->
<figure class="wp-block-image size-medium product-image" 
        style="border-radius:8px">
  <img src="https://shop.example.com/product-photo.jpg" 
       alt="Premium leather handbag in brown" 
       class="wp-image-789"
       data-wp-on="click" 
       data-wp-on-click="lightbox::open" />
</figure>
<!-- /wp:image -->
```

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

### Configure Border and Outline

Source: https://www.wpblockdocs.com/blocks/heading

Sets border properties including color, width, style, and radius. Supports individual side-specific border configurations.

```json
{
  "style": {
    "border": {
      "color": "#e5e7eb",
      "width": "2px",
      "style": "solid",
      "radius": "8px",
      "top": {
        "color": "#ff6b9d",
        "width": "1px",
        "style": "solid"
      }
    }
  }
}
```

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

### Configure Block Styling and Colors

Source: https://www.wpblockdocs.com/blocks/heading

Sets visual appearance properties including text, background, and gradient colors using either direct values or theme-defined presets.

```json
{
  "style": {
    "color": {
      "text": "#ff6b9d",
      "background": "var:preset|color|primary",
      "gradient": "linear-gradient(45deg, #ff6b9d, #c44569)"
    }
  },
  "textColor": "primary",
  "backgroundColor": "secondary",
  "gradient": "vivid-cyan-blue-to-vivid-purple"
}
```

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

### Create Feature Grid Layout

Source: https://www.wpblockdocs.com/blocks/columns

A complex layout example using three columns containing nested group blocks for feature cards.

```html
<!-- wp:columns {"columnCount":3,"className":"feature-grid"} -->
  <div class="wp-block-columns feature-grid">
    <!-- wp:column -->
    <div class="wp-block-column">
      <!-- wp:group {"className":"feature-card"} -->
      <div class="wp-block-group feature-card">
        <!-- wp:image -->
          <figure class="wp-block-image"><img alt="" /></figure>
        <!-- /wp:image -->
        <!-- wp:heading {"level":3} -->
          <h3>Feature Title</h3>
        <!-- /wp:heading -->
        <!-- wp:paragraph -->
          <p>Feature Description</p>
        <!-- /wp:paragraph -->
      </div>
      <!-- /wp:group -->
    </div>
    <!-- /wp:column -->
    
    <!-- Content -->
  </div>
  <!-- /wp:columns -->
```

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

### Implement Default and Hierarchical Headings

Source: https://www.wpblockdocs.com/blocks/heading

Demonstrates the basic syntax for creating a standard H2 heading and the implementation of the full range of heading levels (H1-H6) to maintain proper document structure.

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

<!-- 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 -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading">Sub-subsection (H4)</h4>
<!-- /wp:heading -->

<!-- wp:heading {"level":5} -->
<h5 class="wp-block-heading">Minor Heading (H5)</h5>
<!-- /wp:heading -->

<!-- wp:heading {"level":6} -->
<h6 class="wp-block-heading">Smallest Heading (H6)</h6>
<!-- /wp:heading -->
```

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

### CSS Custom Property Conflicts

Source: https://www.wpblockdocs.com/fse-quirks

Shows how WordPress-generated CSS variables from theme.json can override manually defined variables in a theme's CSS, and how block markup interacts with these presets.

```css
/* Your theme CSS */
:root {
  --wp--preset--color--primary: #your-color;
}

/* WordPress might generate */
:root {
  --wp--preset--color--primary: #theme-json-color; /* This wins */
}

/* Block markup */
<!-- wp:group {"backgroundColor":"primary"} -->
<div class="wp-block-group has-primary-background-color">
  <!-- Uses WordPress-generated value, not your CSS -->
</div>
<!-- /wp:group -->
```

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

### Border & Outline

Source: https://www.wpblockdocs.com/blocks/query-loop

Properties for defining border styles, colors, and radii.

```APIDOC
## Border & Outline Properties

### Description
Configures border styling and outline properties for blocks.

### Parameters
- **style.border.color** (string) - Optional - Border color
- **style.border.width** (string) - Optional - Border width
- **style.border.style** (string) - Optional - Border style (none, solid, dashed, dotted, double, groove, ridge, inset, outset)
- **style.border.radius** (string) - Optional - Border radius
- **style.border.top.color** (string) - Optional - Top border color
- **style.border.top.width** (string) - Optional - Top border width
- **style.border.top.style** (string) - Optional - Top border style

### Request Example
{
  "style": {
    "border": {
      "color": "#e5e7eb",
      "radius": "8px"
    }
  }
}
```

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

### Spacing & Layout

Source: https://www.wpblockdocs.com/blocks/query-loop

Properties for managing margins, padding, and block gaps.

```APIDOC
## Spacing & Layout Properties

### Description
Defines margin, padding, and layout spacing controls.

### Parameters
- **style.spacing.margin.top** (string) - Optional - Top margin
- **style.spacing.margin.right** (string) - Optional - Right margin
- **style.spacing.margin.bottom** (string) - Optional - Bottom margin
- **style.spacing.margin.left** (string) - Optional - Left margin
- **style.spacing.padding.top** (string) - Optional - Top padding
- **style.spacing.padding.right** (string) - Optional - Right padding
- **style.spacing.padding.bottom** (string) - Optional - Bottom padding
- **style.spacing.padding.left** (string) - Optional - Left padding
- **style.spacing.blockGap** (string) - Optional - Gap between child blocks

### Request Example
{
  "style": {
    "spacing": {
      "margin": { "top": "var:preset|spacing|50" },
      "padding": { "top": "var:preset|spacing|40" }
    }
  }
}
```

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

### Typography Styling

Source: https://www.wpblockdocs.com/blocks/query-loop

Properties for controlling text formatting, font families, and sizes.

```APIDOC
## Typography Properties

### Description
Controls text formatting and typography settings for blocks.

### Parameters
- **style.typography.fontSize** (string) - Optional - Font size (CSS unit or preset)
- **style.typography.fontFamily** (string) - Optional - Font family (CSS or preset)
- **style.typography.fontWeight** (string) - Optional - Font weight (100-900)
- **style.typography.lineHeight** (string) - Optional - Line height
- **style.typography.letterSpacing** (string) - Optional - Letter spacing
- **style.typography.textDecoration** (string) - Optional - Text decoration (none, underline, line-through, overline)
- **style.typography.textTransform** (string) - Optional - Text transformation (none, uppercase, lowercase, capitalize)
- **fontSize** (string) - Optional - Theme font size palette slug

### Request Example
{
  "style": {
    "typography": {
      "fontSize": "var:preset|font-size|large",
      "fontWeight": "700"
    }
  }
}
```

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

### Editor vs Frontend CSS Discrepancies

Source: https://www.wpblockdocs.com/fse-quirks

Highlights how block styles applied via the editor may conflict with theme-specific CSS on the frontend, requiring CSS debugging to reconcile the two.

```css
/* Editor styles (simplified) */
.wp-block-group {
  padding: 2rem; /* Works as expected */
}

/* Frontend might have conflicting styles */
.wp-block-group {
  padding: 1rem !important; /* Theme override */
}
```

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

### Implement Featured Image with Custom Styles

Source: https://www.wpblockdocs.com/blocks/image

Shows an advanced configuration using block attributes for custom margins and CSS classes for styling a featured image.

```HTML
<!-- wp:image {
  "id":456,
  "sizeSlug":"large",
  "className":"featured-image",
  "style":{"spacing":{"margin":{"bottom":"var:preset|spacing|50"}}}
} -->
<figure class="wp-block-image size-large featured-image" 
        style="margin-bottom:var(--wp--preset--spacing--50)">
  <img src="https://blog.example.com/wp-content/uploads/2024/01/article-hero.jpg" 
       alt="Step-by-step tutorial illustration" 
       class="wp-image-456" />
  <figcaption class="wp-element-caption">
    Follow our comprehensive guide to master this technique
  </figcaption>
</figure>
<!-- /wp:image -->
```

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

### Styling and Appearance

Source: https://www.wpblockdocs.com/blocks/navigation

Visual styling properties including colors, gradients, typography, spacing, borders, and dimensions.

```APIDOC
## Styling & Appearance

### Description
Global styling properties supported by most blocks.

### Parameters
- **style.color.text** (string) - Optional - Text color (hex, rgb, or CSS custom property).
- **style.typography.fontSize** (string) - Optional - Font size (CSS unit or preset).
- **style.spacing.margin** (object) - Optional - Margin settings for top, right, bottom, left.
- **style.border.radius** (string) - Optional - Border radius value.
- **style.dimensions.minHeight** (string) - Optional - Minimum height of the block.
```

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

### Responsive Navigation Block with Mobile Overlay (HTML)

Source: https://www.wpblockdocs.com/blocks/navigation

Illustrates a responsive navigation menu that adapts to different screen sizes using the Navigation block's overlay menu feature. This pattern is suitable for mobile-first design, providing a clean user experience on smaller devices. It includes a button for toggling the mobile menu.

```html
<!-- wp:navigation {"layout":{"type":"flex","justifyContent":"space-between","flexWrap":"wrap"},"overlayMenu":"mobile","overlayBackgroundColor":"background","overlayTextColor":"foreground"} -->
<nav class="wp-block-navigation has-background-background-color has-foreground-color" aria-label="Main navigation">
  <ul class="wp-block-navigation__container">
    <!-- wp:navigation-link {"label":"Home","url":"/"} -->
    <li class="wp-block-navigation-item">
      <a class="wp-block-navigation-item__content" href="/">Home</a>
    </li>
    <!-- /wp:navigation-link -->
    
    <!-- wp:navigation-link {"label":"About","url":"/about"} -->
    <li class="wp-block-navigation-item">
      <a class="wp-block-navigation-item__content" href="/about">About</a>
    </li>
    <!-- /wp:navigation-link -->
    
    <!-- wp:navigation-link {"label":"Blog","url":"/blog"} -->
    <li class="wp-block-navigation-item">
      <a class="wp-block-navigation-item__content" href="/blog">Blog</a>
    </li>
    <!-- /wp:navigation-link -->
    
    <!-- wp:navigation-link {"label":"Contact","url":"/contact"} -->
    <li class="wp-block-navigation-item">
      <a class="wp-block-navigation-item__content" href="/contact">Contact</a>
    </li>
    <!-- /wp:navigation-link -->
  </ul>
  
  <!-- Mobile menu button (automatically generated) -->
  <button class="wp-block-navigation__responsive-container-open" aria-label="Open menu">
    <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z" />
    </svg>
  </button>
</nav>
<!-- /wp:navigation -->
```

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

### Implement a Basic Query Loop Block

Source: https://www.wpblockdocs.com/blocks/query-loop

This snippet demonstrates the standard WordPress block markup for a Query Loop, including post templates, pagination, and a no-results fallback. Note that queryId and postType attributes may require adjustment when copied between environments.

```html
<!-- wp:query {"queryId":19,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"taxQuery":null,"parents":[],"format":[]}} -->
<div class="wp-block-query">
  <!-- wp:post-template -->
    <!-- wp:post-title /-->
    <!-- wp:post-date /-->
    <!-- wp:post-excerpt /-->
  <!-- /wp:post-template -->
  <!-- wp:query-pagination -->
    <!-- wp:query-pagination-previous /-->
    <!-- wp:query-pagination-numbers /-->
    <!-- wp:query-pagination-next /-->
  <!-- /wp:query-pagination -->
  <!-- wp:query-no-results -->
    <!-- wp:paragraph {"placeholder":"Add text or blocks that will display when a query returns no results."} -->
      <p>No results found.</p>
    <!-- /wp:paragraph -->
  <!-- /wp:query-no-results -->
</div>
<!-- /wp:query -->
```

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

### Dimensions

Source: https://www.wpblockdocs.com/blocks/query-loop

Properties for controlling block width, height, and minimum height.

```APIDOC
## Dimensions Properties

### Description
Defines width, height, and sizing properties.

### Parameters
- **style.dimensions.minHeight** (string) - Optional - Minimum height
- **width** (string) - Optional - Block width
- **height** (string) - Optional - Block height

### Request Example
{
  "style": {
    "dimensions": {
      "minHeight": "400px"
    }
  },
  "width": "50%",
  "height": "300px"
}
```

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

### Manage Spacing and Layout

Source: https://www.wpblockdocs.com/blocks/heading

Defines margin, padding, and block gap spacing for layout control. Uses theme-defined spacing presets for consistent design.

```json
{
  "style": {
    "spacing": {
      "margin": {
        "top": "var:preset|spacing|50",
        "right": "var:preset|spacing|30",
        "bottom": "var:preset|spacing|50",
        "left": "var:preset|spacing|30"
      },
      "padding": {
        "top": "var:preset|spacing|40",
        "right": "var:preset|spacing|40",
        "bottom": "var:preset|spacing|40",
        "left": "var:preset|spacing|40"
      },
      "blockGap": "var:preset|spacing|30"
    }
  }
}
```

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

### Portfolio Showcase Gallery (WordPress Block)

Source: https://www.wpblockdocs.com/blocks/gallery

Demonstrates a WordPress gallery block configured for a portfolio showcase. It uses 3 columns and links images to their attachments, with a custom CSS class for styling. Includes comments for image alt text.

```html
<!-- wp:gallery {"columns":3,"linkTo":"attachment","className":"portfolio-gallery"} -->
<figure class="wp-block-gallery has-nested-images columns-3 is-cropped portfolio-gallery">
  <!-- Images with descriptive alt text -->
  <!-- wp:image {"linkDestination":"attachment"} -->
  <figure class="wp-block-image">
    <a href="/project-1">
      <img src="project-preview.jpg" alt="E-commerce website redesign project" />
    </a>
  </figure>
  <!-- /wp:image -->
</figure>
<!-- /wp:gallery -->
```

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

### Apply Typography Settings

Source: https://www.wpblockdocs.com/blocks/heading

Controls text formatting including font size, family, weight, and decoration. Supports both CSS units and theme-defined typography presets.

```json
{
  "style": {
    "typography": {
      "fontSize": "var:preset|font-size|large",
      "fontFamily": "var:preset|font-family|heading",
      "fontWeight": "700",
      "lineHeight": "1.5",
      "letterSpacing": "0.1em",
      "textDecoration": "underline",
      "textTransform": "uppercase"
    }
  },
  "fontSize": "large"
}
```

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

### Implement Accessible Navigation

Source: https://www.wpblockdocs.com/best-practices

Demonstrates an accessible navigation block structure, including aria-labels and semantic navigation elements to support keyboard and screen reader users.

```html
<!-- wp:navigation {"className":"skip-link-target"} -->
<nav class="wp-block-navigation skip-link-target" aria-label="Main navigation">
  <!-- wp:navigation-link {"label":"Home","url":"/"} -->
  <a class="wp-block-navigation-item__content" href="/">Home</a>
  <!-- /wp:navigation-link -->
</nav>
<!-- /wp:navigation -->
```

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

### Implement Mobile-First Column Layouts in WordPress

Source: https://www.wpblockdocs.com/best-practices

This snippet demonstrates a responsive column structure using WordPress block markup. It utilizes the mobile-stack class to ensure content stacks correctly on smaller screens.

```HTML
<!-- wp:columns {"className":"mobile-stack"} -->
<div class="wp-block-columns mobile-stack">
  <!-- wp:column {"width":"66.66%"} -->
  <div class="wp-block-column" style="flex-basis:66.66%">
    <!-- Main content -->
  </div>
  <!-- /wp:column -->
  
  <!-- wp:column {"width":"33.33%"} -->
  <div class="wp-block-column" style="flex-basis:33.33%">
    <!-- Sidebar content -->
  </div>
  <!-- /wp:column -->
</div>
<!-- /wp:columns -->
```

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

### Spacing & Layout Properties

Source: https://www.wpblockdocs.com/blocks/quote

Controls for margin, padding, and layout spacing between child blocks.

```APIDOC
## Spacing & Layout

### Description
Controls for margin, padding, and layout spacing between child blocks.

### Method
N/A (These are properties, not endpoints)

### Endpoint
N/A

### Parameters
#### Style Properties
- **style.spacing.margin.top** (string) - Optional - Top margin. Example: `"var:preset|spacing|50"`
- **style.spacing.margin.right** (string) - Optional - Right margin. Example: `"var:preset|spacing|30"`
- **style.spacing.margin.bottom** (string) - Optional - Bottom margin. Example: `"var:preset|spacing|50"`
- **style.spacing.margin.left** (string) - Optional - Left margin. Example: `"var:preset|spacing|30"`
- **style.spacing.padding.top** (string) - Optional - Top padding. Example: `"var:preset|spacing|40"`
- **style.spacing.padding.right** (string) - Optional - Right padding. Example: `"var:preset|spacing|40"`
- **style.spacing.padding.bottom** (string) - Optional - Bottom padding. Example: `"var:preset|spacing|40"`
- **style.spacing.padding.left** (string) - Optional - Left padding. Example: `"var:preset|spacing|40"`
- **style.spacing.blockGap** (string) - Optional - Gap between child blocks. Example: `"var:preset|spacing|30"`

### Request Example
```json
{
  "style": {
    "spacing": {
      "margin": {
        "top": "var:preset|spacing|50",
        "right": "var:preset|spacing|30",
        "bottom": "var:preset|spacing|50",
        "left": "var:preset|spacing|30"
      },
      "padding": {
        "top": "var:preset|spacing|40",
        "right": "var:preset|spacing|40",
        "bottom": "var:preset|spacing|40",
        "left": "var:preset|spacing|40"
      },
      "blockGap": "var:preset|spacing|30"
    }
  }
}
```

### Response
#### Success Response (200)
- **style.spacing.margin.top** (string) - Top margin
- **style.spacing.margin.right** (string) - Right margin
- **style.spacing.margin.bottom** (string) - Bottom margin
- **style.spacing.margin.left** (string) - Left margin
- **style.spacing.padding.top** (string) - Top padding
- **style.spacing.padding.right** (string) - Right padding
- **style.spacing.padding.bottom** (string) - Bottom padding
- **style.spacing.padding.left** (string) - Left padding
- **style.spacing.blockGap** (string) - Gap between child blocks

#### Response Example
```json
{
  "style": {
    "spacing": {
      "margin": {
        "top": "var:preset|spacing|50",
        "right": "var:preset|spacing|30",
        "bottom": "var:preset|spacing|50",
        "left": "var:preset|spacing|30"
      },
      "padding": {
        "top": "var:preset|spacing|40",
        "right": "var:preset|spacing|40",
        "bottom": "var:preset|spacing|40",
        "left": "var:preset|spacing|40"
      },
      "blockGap": "var:preset|spacing|30"
    }
  }
}
```
```

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

### Implement Image Block with Caption

Source: https://www.wpblockdocs.com/blocks/image

Demonstrates how to include a figcaption element within the figure tag to provide descriptive text for the image.

```HTML
<!-- wp:image {"id":123,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large">
  <img src="https://example.com/landscape.jpg" 
       alt="Yosemite Valley at sunset" 
       class="wp-image-123" />
  <figcaption class="wp-element-caption">
    The iconic view of Yosemite Valley during golden hour
  </figcaption>
</figure>
<!-- /wp:image -->
```

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

### Basic WordPress Gallery Block with Media Links

Source: https://www.wpblockdocs.com/blocks/gallery

Demonstrates a basic WordPress Gallery block configuration with a 3-column layout, linking images to their media files, and using 'large' size slugs. This is suitable for portfolios and photo collections where direct image access is desired. Note that image IDs are site-specific.

```html
<!-- wp:gallery {"columns":3,"linkTo":"media","sizeSlug":"large","ids":[123,124,125,126,127,128]} -->
<figure class="wp-block-gallery has-nested-images columns-3 is-cropped">
  <!-- wp:image {"id":123,"sizeSlug":"large","linkDestination":"media"} -->
  <figure class="wp-block-image size-large">
    <a href="/wp-content/uploads/2024/01/portfolio-1-large.jpg">
      <img src="/wp-content/uploads/2024/01/portfolio-1-1024x768.jpg" alt="Modern website design showcase" class="wp-image-123" />
    </a>
  </figure>
  <!-- /wp:image -->
  
  <!-- wp:image {"id":124,"sizeSlug":"large","linkDestination":"media"} -->
  <figure class="wp-block-image size-large">
    <a href="/wp-content/uploads/2024/01/portfolio-2-large.jpg">
      <img src="/wp-content/uploads/2024/01/portfolio-2-1024x768.jpg" alt="E-commerce platform interface" class="wp-image-124" />
    </a>
  </figure>
  <!-- /wp:image -->
  
  <!-- wp:image {"id":125,"sizeSlug":"large","linkDestination":"media"} -->
  <figure class="wp-block-image size-large">
    <a href="/wp-content/uploads/2024/01/portfolio-3-large.jpg">
      <img src="/wp-content/uploads/2024/01/portfolio-3-1024x768.jpg" alt="Mobile app design concept" class="wp-image-125" />
    </a>
  </figure>
  <!-- /wp:image -->
  
  <!-- wp:image {"id":126,"sizeSlug":"large","linkDestination":"media"} -->
  <figure class="wp-block-image size-large">
    <a href="/wp-content/uploads/2024/01/portfolio-4-large.jpg">
      <img src="/wp-content/uploads/2024/01/portfolio-4-1024x768.jpg" alt="Brand identity design package" class="wp-image-126" />
    </a>
  </figure>
  <!-- /wp:image -->
  
  <!-- wp:image {"id":127,"sizeSlug":"large","linkDestination":"media"} -->
  <figure class="wp-block-image size-large">
    <a href="/wp-content/uploads/2024/01/portfolio-5-large.jpg">
      <img src="/wp-content/uploads/2024/01/portfolio-5-1024x768.jpg" alt="Dashboard UI design" class="wp-image-127" />
    </a>
  </figure>
  <!-- /wp:image -->
  
  <!-- wp:image {"id":128,"sizeSlug":"large","linkDestination":"media"} -->
  <figure class="wp-block-image size-large">
    <a href="/wp-content/uploads/2024/01/portfolio-6-large.jpg">
      <img src="/wp-content/uploads/2024/01/portfolio-6-1024x768.jpg" alt="Print design collection" class="wp-image-128" />
    </a>
  </figure>
  <!-- /wp:image -->
</figure>
<!-- /wp:gallery -->
```

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

### Gallery Block Properties Reference

Source: https://www.wpblockdocs.com/blocks/gallery

Reference for all properties available for the Gallery block, including gallery-specific and universal properties.

```APIDOC
## Block Properties Reference

### Gallery Specific Properties

- **images** (array) - Array of image objects in the gallery. Example: `[{"id": 123, "url": "image1.jpg", "alt": "Description"}]`
- **ids** (array) - Array of image attachment IDs. Example: `[123, 124, 125]`
- **columns** (number) - Number of columns in the gallery grid. Default: 3. Example: `3`
- **linkTo** (string) - Where gallery images should link. Values: `none`, `media`, `attachment`. Default: `"none"`. Example: `"media"`
- **sizeSlug** (string) - WordPress image size to use. Values: `thumbnail`, `medium`, `large`, `full`. Default: `"large"`. Example: `"medium_large"`
- **imageCrop** (boolean) - Whether to crop images to fit grid. Default: `true`. Example: `false`
- **fixedHeight** (boolean) - Whether all images should have the same height. Default: `true`. Example: `false`
- **allowResize** (boolean) - Whether to allow resizing of images. Default: `true`. Example: `false`
- **caption** (string) - Gallery caption text. Example: `"A collection of stunning landscape photos"`

### Universal Properties

#### Core Attributes

- **className** (string) - CSS class name(s) to add to the block wrapper. Default: `""`. Example: `"my-custom-class another-class"`
- **anchor** (string) - HTML anchor/ID attribute for the block element. Default: `""`. Example: `"section-gallery"`
- **lock** (object) - Controls whether the block can be moved or removed. Example: `{"move": false, "remove": true}`

#### Styling & Appearance

- **style.color.text** (string) - Text color (hex, rgb, or CSS custom property). Example: `"#333333"`
- **style.color.background** (string) - Background color. Example: `"var:preset|color|light-gray"`
- **style.color.gradient** (string) - CSS gradient background. Example: `"linear-gradient(135deg, #f0f0f0, #dcdcdc)"`
- **textColor** (string) - Theme color palette slug for text. Example: `"dark-gray"`
- **backgroundColor** (string) - Theme color palette slug for background. Example: `"white"`
- **gradient** (string) - Theme gradient palette slug. Example: `"cool-to-warm-spectrum"`

#### Typography

- **style.typography.fontSize** (string) - Font size (CSS unit or preset). Example: `"1.2rem"` or `"var:preset|font-size|small"`
- **style.typography.fontFamily** (string) - Font family (CSS or preset). Example: `"Arial, sans-serif"` or `"var:preset|font-family|serif"`
- **style.typography.fontWeight** (string) - Font weight. Values: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`. Example: `"500"`
- **style.typography.lineHeight** (string) - Line height. Example: `"1.6"`
- **style.typography.letterSpacing** (string) - Letter spacing. Example: `"0.05em"`
- **style.typography.textDecoration** (string) - Text decoration. Values: `none`, `underline`, `line-through`, `overline`. Example: `"none"`
- **style.typography.textTransform** (string) - Text transformation. Values: `none`, `uppercase`, `lowercase`, `capitalize`. Example: `"capitalize"`
- **fontSize** (string) - Theme font size palette slug. Example: `"medium"`
```

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

### Basic Horizontal Navigation Block (HTML)

Source: https://www.wpblockdocs.com/blocks/navigation

Demonstrates how to create a simple horizontal navigation menu using the WordPress Navigation block with manual links. This is ideal for header template parts and ensures basic site navigation is functional. It uses core WordPress block markup.

```html
<!-- wp:navigation {"layout":{"type":"flex","justifyContent":"left"}} -->
<nav class="wp-block-navigation" aria-label="Main navigation">
  <ul class="wp-block-navigation__container">
    <!-- wp:navigation-link {"label":"Home","url":"/"} -->
    <li class="wp-block-navigation-item">
      <a class="wp-block-navigation-item__content" href="/">Home</a>
    </li>
    <!-- /wp:navigation-link -->
    
    <!-- wp:navigation-link {"label":"About","url":"/about"} -->
    <li class="wp-block-navigation-item">
      <a class="wp-block-navigation-item__content" href="/about">About</a>
    </li>
    <!-- /wp:navigation-link -->
    
    <!-- wp:navigation-link {"label":"Services","url":"/services"} -->
    <li class="wp-block-navigation-item">
      <a class="wp-block-navigation-item__content" href="/services">Services</a>
    </li>
    <!-- /wp:navigation-link -->
    
    <!-- wp:navigation-link {"label":"Contact","url":"/contact"} -->
    <li class="wp-block-navigation-item">
      <a class="wp-block-navigation-item__content" href="/contact">Contact</a>
    </li>
    <!-- /wp:navigation-link -->
  </ul>
</nav>
<!-- /wp:navigation -->
```
Tokens:
Raw