Introduction and Overview
Photo Block makes it easy to add and customize photos in the block editor.
Last updated
Photo Block makes it easy to add and customize photos in the block editor.
Last updated
Welcome to Photo Block. Photo Block makes adding and configuring images easy using the WordPress block editor. It supports responsive images, custom captions, a lightbox setting, and so much more.
Photo Block is designed for those needing a quick way to add fully customizable photos and captions to the block editor.
Here are the major features of Photo Block.
An intuitive uploader, with support for all major image formats, is available.
It provides for quick uploading and supports a fast uploader, media library uploading, and downloading an image from a URL.
Photo Block has a custom cropper; you can go advanced and enter custom ratios if you desire.
The cropper remembers your aspect ratio and can be adjusted for finer control.
Cropping a PhotoAdd dimensions such as padding, margin, and borders with full responsive support.
Adjust the size of the image container and constrain it to fit how you desire.
CSS Gram is a neat little library that allows for adjustments to an image via CSS. This works in all modern browsers and features 26 presets.
Use the drop shadow toggle to add a drop shadow to your image, allowing for neat 3D effects.
Create a single or multi-line caption, allowing for complex captions through available blocks.
Adding a CaptionCreate an overlay from the caption, including support for multi-line captions. Create a nice hover effect to show off captions, or display a caption in a custom position (e.g., the top left of an image).
Overlay CaptionsThe Photo Block works great in a query loop, serving as the featured image source. The caption is pulled from the image caption.
How to Add Photo Block to the Query LoopAfter spending time configuring the Photo Block, you'll realize there are many different ways to customize the photo. You can save these customizations as Global Styles and apply them to other photo blocks.
This allows quick re-use of styles without having to configure a new block every time.
Since Global Styles are applied globally, you can also update a global style and have it reflect across your site immediately.
Global Styles
