WordPress Block Theme Examples

https://github.com/wordpress/block-theme-examples
Admin
This repository showcases various WordPress block-related features with concise code examples for...
Tokens:8,696
Snippets:18
Trust Score:9
Update:1 year ago
Show doc for...
Tokens:
Raw
### WordPress Playground Blueprint: Build Process Example

Source: https://github.com/wordpress/block-theme-examples/blob/master/README.md

This blueprint sets up a WordPress environment with the 'example-build-process' block theme. It installs a base theme, then installs and activates the example theme from a zip file, and finally logs in to the WordPress admin.

```APIDOC
WordPressPlaygroundBlueprint:
  description: Installs and activates the example-build-process block theme.
  landingPage: /wp-admin/themes.php
  preferredVersions:
    php: 8.0
    wp: latest
  steps:
    - step: installTheme
      themeZipFile:
        resource: wordpress.org/themes
        slug: twentytwentyfour
    - step: installTheme
      themeZipFile:
        resource: url
        url: https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-build-process.zip
      options:
        activate: true
    - step: login
      username: admin
      password: password
```

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

### Twenty Twenty-Four Starter Content Patterns Setup

Source: https://github.com/wordpress/block-theme-examples/blob/master/README.md

This configuration sets up a WordPress environment with the Twenty Twenty-Four theme and installs starter content patterns from a zip file. It includes installing the base Twenty Twenty-Four theme, then the starter content patterns zip, and activates it, followed by setting up a default admin user.

```APIDOC
WordPress Playground Blueprint:
  $schema: "https://playground.wordpress.net/blueprint-schema.json"
  landingPage: "/wp-admin/themes.php"
  preferredVersions:
    php: "8.0"
    wp: "latest"
  steps:
    - step: installTheme
      themeZipFile:
        resource: "wordpress.org/themes"
        slug: "twentytwentyfour"
    - step: installTheme
      themeZipFile:
        resource: "url"
        url: "https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/twentytwentyfour-starter-content-patterns.zip"
      options:
        activate: true
    - step: login
      username: "admin"
      password: "password"
```

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

### WordPress Playground Blueprint: Locked Pattern Example

Source: https://github.com/wordpress/block-theme-examples/blob/master/README.md

This blueprint sets up a WordPress environment with the 'example-locked-pattern' block theme. It installs a base theme, then installs and activates the example theme from a zip file, and finally logs in to the WordPress admin.

```APIDOC
WordPressPlaygroundBlueprint:
  description: Installs and activates the example-locked-pattern block theme.
  landingPage: /wp-admin/themes.php
  preferredVersions:
    php: 8.0
    wp: latest
  steps:
    - step: installTheme
      themeZipFile:
        resource: wordpress.org/themes
        slug: twentytwentyfour
    - step: installTheme
      themeZipFile:
        resource: url
        url: https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-locked-pattern.zip
      options:
        activate: true
    - step: login
      username: admin
      password: password
```

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

### WordPress Playground Blueprint: Template Part Area Example

Source: https://github.com/wordpress/block-theme-examples/blob/master/README.md

This blueprint sets up a WordPress environment with the 'example-template-part-area' block theme. It installs a base theme, then installs and activates the example theme from a zip file, and finally logs in to the WordPress admin.

```APIDOC
WordPressPlaygroundBlueprint:
  description: Installs and activates the example-template-part-area block theme.
  landingPage: /wp-admin/themes.php
  preferredVersions:
    php: 8.0
    wp: latest
  steps:
    - step: installTheme
      themeZipFile:
        resource: wordpress.org/themes
        slug: twentytwentyfour
    - step: installTheme
      themeZipFile:
        resource: url
        url: https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-template-part-area.zip
      options:
        activate: true
    - step: login
      username: admin
      password: password
```

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

### Twenty Twenty-Four Starter Template Patterns Setup

Source: https://github.com/wordpress/block-theme-examples/blob/master/README.md

This configuration sets up a WordPress environment with the Twenty Twenty-Four theme and installs starter template patterns from a zip file. It includes installing the base Twenty Twenty-Four theme, then the starter template patterns zip, and activates it, followed by setting up a default admin user.

```APIDOC
WordPress Playground Blueprint:
  $schema: "https://playground.wordpress.net/blueprint-schema.json"
  landingPage: "/wp-admin/themes.php"
  preferredVersions:
    php: "8.0"
    wp: "latest"
  steps:
    - step: installTheme
      themeZipFile:
        resource: "wordpress.org/themes"
        slug: "twentytwentyfour"
    - step: installTheme
      themeZipFile:
        resource: "url"
        url: "https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/twentytwentyfour-starter-template-patterns.zip"
      options:
        activate: true
    - step: login
      username: "admin"
      password: "password"
```

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

### Start Development Build

Source: https://github.com/wordpress/block-theme-examples/blob/master/example-build-process/README.md

Starts the watch and build process for development using @wordpress/scripts. This command compiles SCSS to CSS, processes JavaScript, and watches for file changes to recompile automatically.

```bash
npm run start
```

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

### WordPress Playground Blueprint for Locked Pattern Theme

Source: https://github.com/wordpress/block-theme-examples/blob/master/example-locked-pattern/README.md

This blueprint configures a WordPress environment using the Playground tool. It installs the Twenty Twenty-Four theme, then installs and activates the example-locked-pattern child theme from a provided URL. It also sets up a default admin user.

```APIDOC
WordPress Playground Blueprint:
  Schema: https://playground.wordpress.net/blueprint-schema.json
  Landing Page: /wp-admin/themes.php
  Preferred Versions:
    PHP: 8.0
    WordPress: latest
  Steps:
    - Step: installTheme
      Theme Zip File:
        Resource: wordpress.org/themes
        Slug: twentytwentyfour
    - Step: installTheme
      Theme Zip File:
        Resource: url
        URL: https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-locked-pattern.zip
      Options:
        Activate: true
    - Step: login
      Username: admin
      Password: password
```

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

### WordPress Playground Blueprint for Starter Template

Source: https://github.com/wordpress/block-theme-examples/blob/master/twentytwentyfour-starter-template-patterns/README.md

This blueprint configures a WordPress Playground environment to install and activate the Twenty Twenty-Four theme and then install and activate the 'twentytwentyfour-starter-template-patterns' theme zip. It also sets up a default admin user.

```APIDOC
WordPressPlaygroundBlueprint:
  $schema: https://playground.wordpress.net/blueprint-schema.json
  landingPage: /wp-admin/themes.php
  preferredVersions:
    php: 8.0
    wp: latest
  steps:
    - step: installTheme
      themeZipFile:
        resource: wordpress.org/themes
        slug: twentytwentyfour
    - step: installTheme
      themeZipFile:
        resource: url
        url: https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/twentytwentyfour-starter-template-patterns.zip
      options:
        activate: true
    - step: login
      username: admin
      password: password
```

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

### WordPress Playground Blueprint

Source: https://github.com/wordpress/block-theme-examples/blob/master/example-block-style-php/README.md

This JSON defines a WordPress Playground blueprint for the example-block-style-php theme. It specifies the theme files and configurations needed to run the example in a WordPress environment.

```JSON
{
  "landingPage": "/wp-admin/",
  "steps": [
    {
      "step": 1,
      "name": "Install WordPress",
      "description": "Install WordPress 6.4.3",
      "run": "wp core install --url=wordpress.local --title='Block Styles Example' --admin_user=admin --admin_password=password --admin_email=admin@example.com"
    },
    {
      "step": 2,
      "name": "Install Theme",
      "description": "Install the example-block-style-php theme",
      "run": "wp theme install https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-block-style-php.zip --activate"
    }
  ]
}
```

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

### WordPress Playground Blueprint for Template Part Area

Source: https://github.com/wordpress/block-theme-examples/blob/master/example-template-part-area/README.md

This configuration sets up a WordPress environment using the Twenty Twenty-Four theme and installs the example-template-part-area child theme. It allows users to interact with the template part area functionality directly in the browser.

```json
{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/wp-admin/themes.php",
  "preferredVersions": {
    "php": "8.0",
    "wp": "latest"
  },
  "steps": [
    {
      "step": "installTheme",
      "themeZipFile": {
        "resource": "wordpress.org/themes",
        "slug": "twentytwentyfour"
      }
    },
    {
      "step": "installTheme",
      "themeZipFile": {
        "resource": "url",
        "url": "https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-template-part-area.zip"
      },
      "options": {
        "activate": true
      }
    },
    {
      "step": "login",
      "username": "admin",
      "password": "password"
    }
  ]
}
```

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

### Example Block Style with JavaScript

Source: https://github.com/wordpress/block-theme-examples/blob/master/README.md

This example demonstrates how to implement custom block styles using JavaScript within a WordPress block theme. It includes the necessary files for styling and functionality.

```JavaScript
/**
 * Registers a new block style for the core Paragraph block.
 * This style adds a custom visual appearance to paragraphs.
 */
wp.blocks.registerBlockStyle( 'core/paragraph', {
    name: 'fancy-paragraph',
    label: 'Fancy Paragraph',
    isDefault: false
} );

/**
 * Example of a custom block variation or advanced JS integration.
 * (Actual implementation details would be more extensive).
 */
console.log('Block style example loaded.');

```

```HTML
<p class="wp-block-paragraph is-style-fancy-paragraph">This is a paragraph with the custom fancy style applied.</p>

```

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

### Twenty Twenty-Four Starter Content Pattern

Source: https://github.com/wordpress/block-theme-examples/blob/master/twentytwentyfour-starter-content-patterns/README.md

This example demonstrates a child theme for Twenty Twenty-Four that showcases a block pattern appearing in a modal when a user adds a new post. It requires the Twenty Twenty-Four theme as a dependency.

```HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Starter Content Pattern Example</title>
    <!-- Link to parent theme stylesheet if needed -->
</head>
<body>
    <!-- Content related to the starter content pattern -->
    <p>This is an example of a WordPress block theme starter content pattern.</p>
</body>
</html>
```

```JSON
{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/wp-admin/themes.php",
  "preferredVersions": {
    "php": "8.0",
    "wp": "latest"
  },
  "steps": [
    {
      "step": "installTheme",
      "themeZipFile": {
        "resource": "wordpress.org/themes",
        "slug": "twentytwentyfour"
      }
    },
    {
      "step": "installTheme",
      "themeZipFile": {
        "resource": "url",
        "url": "https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/twentytwentyfour-starter-content-patterns.zip"
      },
      "options": {
        "activate": true
      }
    },
    {
      "step": "login",
      "username": "admin",
      "password": "password"
    }
  ]
}
```

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

### Enqueue JavaScript for Block Editor

Source: https://github.com/wordpress/block-theme-examples/blob/master/example-block-variation/README.md

Enqueues the JavaScript file required for registering custom block variations in the WordPress editor. This script is loaded specifically for the editor context, ensuring the variation is available when blocks are managed.

```php
<?php
/**
 * Enqueue scripts and styles for the block editor.
 */
function block_theme_examples_enqueue_scripts() {
    wp_enqueue_script(
        'block-variations-js',
        get_stylesheet_directory_uri() . '/assets/js/block-variations.js',
        array( 'wp-blocks', 'wp-editor' ),
        filemtime( get_stylesheet_directory() . '/assets/js/block-variations.js' )
    );
}
add_action( 'enqueue_block_editor_assets', 'block_theme_examples_enqueue_scripts' );
?>
```

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

### Add Custom Block Variation in WordPress Theme

Source: https://github.com/wordpress/block-theme-examples/blob/master/example-block-variation/README.md

This example demonstrates how to add a custom block variation to a WordPress block theme. It serves as a child theme for the Twenty Twenty-Four theme and utilizes JavaScript to define the block variation's behavior and appearance.

```json
{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/wp-admin/themes.php",
  "preferredVersions": {
    "php": "8.0",
    "wp": "latest"
  },
  "steps": [
    {
      "step": "installTheme",
      "themeZipFile": {
        "resource": "wordpress.org/themes",
        "slug": "twentytwentyfour"
      }
    },
    {
      "step": "installTheme",
      "themeZipFile": {
        "resource": "url",
        "url": "https://raw.githubusercontent.com/WordPress/block-theme-examples/master/_zips/example-block-variation.zip"
      },
      "options": {
        "activate": true
      }
    },
    {
      "step": "login",
      "username": "admin",
      "password": "password"
    }
  ]
}
```

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

### Register Spacer Block Variation

Source: https://github.com/wordpress/block-theme-examples/blob/master/example-block-variation/README.md

Registers a custom variation for the core Spacer block, providing a predefined custom height. This JavaScript code defines the attributes, icon, title, and description for the new variation, making it selectable in the WordPress editor.

```javascript
wp.blocks.registerBlockVariation( 'core/spacer', {
    name: 'custom-height-variation',
    attributes: {
        height: '150px',
    },
    icon: 'star-filled',
    title: 'Custom Spacer (150px)',
    description: 'A spacer with a predefined height of 150px.',
} );
```

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

### Production Build

Source: https://github.com/wordpress/block-theme-examples/blob/master/example-build-process/README.md

Builds optimized files for production using @wordpress/scripts. This command compiles SCSS to CSS and processes JavaScript for deployment.

```bash
npm run build
```

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

### Register Custom Block Stylesheet in WordPress functions.php

Source: https://github.com/wordpress/block-theme-examples/blob/master/example-block-stylesheet/README.md

This PHP code snippet registers a custom stylesheet for the WordPress Image block. It ensures the stylesheet is loaded in the block editor and on the front-end when the Image block is present, enabling custom styling for the block's image element.

```php
<?php
/**
 * Enqueue custom block stylesheet.
 */
function my_theme_enqueue_block_styles() {
    wp_enqueue_style(
        'my-theme-image-block-style',
        get_template_directory_uri() . '/assets/css/blocks/core-image.css',
        array(),
        filemtime( get_template_directory() . '/assets/css/blocks/core-image.css' )
    );
}
add_action( 'enqueue_block_editor_assets', 'my_theme_enqueue_block_styles' );
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_block_styles' );

```

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

### Custom CSS for WordPress Image Block Gradient Border

Source: https://github.com/wordpress/block-theme-examples/blob/master/example-block-stylesheet/README.md

This CSS code defines a custom gradient border effect for the `<img>` element within the WordPress Image block. It targets the image element specifically within the context of the block's structure, applying the visual styling as intended.

```css
.wp-block-image img {
    border: 5px solid;
    border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) 1;
    padding: 5px;
    box-sizing: border-box;
}

```
Tokens:
Raw