Home / Announcements / Photo Block Released: Advanced Image Customization is Here

Photo Block Released: Advanced Image Customization is Here

Photo Block for the Block Editor

I’m pleased to announce the release of Photo Block, a powerful (and free) image block for WordPress. Let’s explore the problems it solves and why Photo Block will improve your workflow.

Why Photo Block?

I write a lot of content, and many of my posts are image-heavy. The default image block is suitable for basic use cases, but as soon as you need responsive options or a customized caption, you’re often left to custom CSS territory. This made adding images to posts a chore.

I also tried other image blocks, including ones from several popular block suites. None fully met my image needs, and some blocks were frustrating to configure per image. I also experimented with programmatic block settings for the core image block, but this ended up breaking things.

Because of the shortcomings I discovered, I decided to create a simple yet fully featured image block called Photo Block. Let’s review specific pieces of Photo Block and discover why It should be your next image block.

Upload with ease using a multi-function uploader

A screenshot showing the regular image block as compared to Photo Block.
Regular Image Block Upload Screen vs Photo Block’s Upload Screen

The focus of Photo Block is to make adding and configuring an image as painless as possible. It’s a block designed to give you complete control over your images, all while keeping the editing experience intuitive. The main entry point of the block is the upload screen, so a lot of attention was focused on improving the upload experience.

With Photo Block, you’re able to upload files via:

  • The file dialogue (default)
  • The Media Library
  • An image URL
Adding an Image Via an Image URL Field
Adding an Image Via an Image URL Field

When you choose to upload an image via URL, you can either sideload the image (the default) or have the image render automatically without downloading it.

This streamlined upload experience, with the help of global styles, allows you to go from block insertion to completion in just four clicks. A demo of that is below.

Responsive options are at your fingertips

One pain point of the default image block is there are no responsive settings. With Photo Block, every dimension and typography control is responsive (i.e., it can be configured per major breakpoint).

Photo Block Responsive Controls Including Padding and Margin
Photo Block Responsive Controls Including Padding and Margin

Controls such as padding, margin, border, and border-radius are designed for flexibility and ease of use.

You can also set the width/height of the image container and position the image. This works for advanced layouts where an image needs a specific fit.

Container Sizing Options Allow For a Custom Fit
Container Sizing Options Allow For a Custom Fit

Captions are a fully developed block with advanced overlay settings

A Caption Block is Included as part of Photo Block

With many image blocks I’ve tried, captions seem almost a baked-on feature without much thought of customization or appearance. Captions in Photo Block have been given special attention, and I think you’ll be amazed at what you can do with them.

Captions can be positioned at the top, bottom, or over the photo, as shown in the animated GIF below.

Animated Gif of Caption Positioning

You can also enable multi-line captions, which allow you to insert any block you wish as part of the caption.

You can even use multi-line captions as an overlay and create a nice hover effect, as demonstrated below.

Overlay Caption in Hover-Only Mode
Overlay Caption in Hover-Only Mode

Global Styles turn effort into effortless

When you have created a photo style you’d like to use across multiple images, you can save these as a Global Style. For example, you may want a style for an introduction image and another for a post image.

These global styles will display at the top of the block sidebar, allowing you to choose between styles.

Animated GIF of Switching Between Global Styles

Global Styles are class and configuration-based, which will save you a lot of time and keep your images consistent throughout your site.

With Global Styles, you’re able to:

  • Save and overwrite any global style
  • Edit or delete global styles
  • Clear all block settings

If you overwrite a global style, any image using that global style will also be updated. Very powerful.

And so much more…

Photo Block is very comprehensive. I encourage you to check out the Photo Block documentation for details on all the significant features.

Photo Block is available for free from the WordPress plugin directory.

Like this tutorial? There's more like it. Subscribe today!

Name(Required)

Ronald Huereca
By: Ronald Huereca
Published On: on October 24, 2024

Ronald Huereca founded DLX Plugins in 2022 with the goal of providing deluxe plugins available for download. Find out more about DLX Plugins, check out some tutorials, and check out our plugins.

Leave Your Valuable Feedback

Your email address will not be published. Required fields are marked *

Shopping Cart
  • Your cart is empty.
Scroll to Top