### 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
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.
```
--------------------------------
### 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
Box with border
Box with top border
```
--------------------------------
### 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
Your content here
```
--------------------------------
### 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
Content with custom spacing.
```
--------------------------------
### 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
single-product.php → single.php → index.php
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
```
--------------------------------
### 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 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
```
--------------------------------
### 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
Styled text
Text with theme large font size
```
--------------------------------
### 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
```
--------------------------------
### 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
Ready to transform your business?
Get started today and see the difference.
```
--------------------------------
### 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
Complete Guide to WordPress Blocks
Introduction
Transform Your Business
```
--------------------------------
### 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
```
--------------------------------
### 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
```
--------------------------------
### 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
```
--------------------------------
### 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
```
--------------------------------
### 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
Feature Title
Feature Description
```
--------------------------------
### 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
Your Heading Text
Page Title (H1)
Main Section (H2)
Subsection (H3)
Sub-subsection (H4)
Minor Heading (H5)
Smallest Heading (H6)
```
--------------------------------
### 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 */
```
--------------------------------
### 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
Follow our comprehensive guide to master this technique
```
--------------------------------
### 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
```
--------------------------------
### 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
No results found.
```
--------------------------------
### 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
```
--------------------------------
### 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
```
--------------------------------
### 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
```
--------------------------------
### 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
The iconic view of Yosemite Valley during golden hour
```
--------------------------------
### 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
```
--------------------------------
### 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
```
