Theme Image Block

Use images from your theme as blocks in content.

Author:Happy Prime (profile at wordpress.org)
WordPress version required:6.8
WordPress version tested:6.9.1
Plugin version:1.1.1
Added to WordPress repository:16-12-2025
Last updated:20-02-2026
Rating, %:0
Rated by:0
Plugin URI:
Total downloads:185
plugin download
Click to start download

The Theme Image Block plugin allows you to register images from your theme and make them available as blocks in the WordPress editor. This is useful for logos, icons, and other images that are part of your theme’s design system.

Usage

Registering Theme Images

Theme images should be registered using HappyPrime\ThemeImageBlock\register_theme_image(). This is likely best done on the init or after_setup_theme action.

HappyPrime\ThemeImageBlock\register_theme_image(
    'happy-prime-logo',
    [
        'title' => 'Happy Prime Logo',
        'description' => 'The Happy Prime logo.',
        'alt' => 'Happy Prime',
        'path' => 'images/happy-prime-logo.svg',
        'width' => '300',
        'height' => '',
        'variations' => [
            'small' => [
                'path'   => 'images/happy-prime-logo-small.svg',
                'width'  => '100',
                'height' => '100',
            ],
            'medium' => [
                'path'   => 'images/happy-prime-logo-medium.svg',
                'width'  => '200',
                'height' => '200',
            ],
            'large' => [
                'path'   => 'images/happy-prime-logo-large.svg',
                'width'  => '300',
                'height' => '300',
            ],
        ],
        'sizes' => '(max-width: 600px) 100vw, 300px',
    ]
);

Registering Theme Image Styles

Theme image styles should be registered using HappyPrime\ThemeImageBlock\register_theme_image_style(). This is likely best done on the init or after_setup_theme action.

HappyPrime\ThemeImageBlock\register_theme_image_style(
    'hero',
    [
        'name'   => 'Hero',
        'width'  => 'clamp(10rem, 100vw, 60rem)',
        'height' => 'auto',
    ]
);

ChangeLog