Adding a Caption

With Photo Block, captions are a fully developed feature with many customization options. Let's review what you can do with captions.

Hiding the Caption Appender Button

If you do not want a caption on your photo but want to hide the "Add Caption" button, you can click the "Hide Caption" icon from the block toolbar.

Hide the Caption Button Appender by Toggling This Option

This will allow a better preview if the image doesn't warrant a caption.

Photo Block With Caption Appender Hidden

Adding a Caption

Adding a Caption Button

To add a caption to the photo, click "Add Caption" at the bottom of the block. This will create a caption appended to the bottom of the image.

Clicking the Add Caption Button Allows You to Add a Caption

From there, you will see the caption toolbar and block sidebar options.

The Caption Toolbar

Let's go over the available options in the caption toolbar.

The Caption Toolbar

1. Alignment Options - Align the caption, left, center, or right.

2. Caption Positioning - Position the caption at the top, overlay, or bottom.

3. Caption Mode - Choose between single-line and multi-line captions.

4. Remove Caption - This will remove the caption from the photo.

5. Formatting Options - Add basic formatting to the caption.

Positioning the Caption

You can position the caption at the top or bottom of the photo or over the photo, which we dub an overlay caption.

You can position the caption by interacting with the caption toolbar under Position.

Position Options in the Caption Toolbar

Once you click on Position, you're presented with three options.

Caption Positioning Choices

1. Top - Position the caption at the top of the photo.

2. Bottom - Position the caption at the bottom of the photo.

3. Overlay - Position the caption over the photo.

Positioning a caption at the top will move the caption above the photo.

Demo of Caption Positioning

Please visit the link below for overlay captions and how to create them.

Overlay Captions

Changing the Caption Mode

Switch Caption Modes From Single-Line to Multiple Lines

You can switch between single-line captions and multi-line captions by adjusting the caption's mode.

Switching between modes does not transfer existing captions. The two modes provide separate caption inputs, so they can't be carried across.

Single-line Captions

You can use single-line captions if you have a basic caption and only need a line of text to describe the image.

You'll find formatting options for Single-line captions in the block sidebar.

Caption Settings for Single-line Captions

You can adjust the font, background color, text color, link color, and link color on hover.

Multi-line Captions

Modal Asking Permission to Switch to a Multi-line Caption

Switching to Multi-line captions allows you to add multiple lines to the caption. In fact, you can place any block from the block editor into your caption, which opens up the possibilities of advanced customization.

Multi-Line Captions on the Photo Block

Multi-line Captions and Smart Styles

Smart Styles Help Style the Caption

You'll see an option for multi-line captions in the block sidebar for Smart Styles.

Smart Styles provides formatting and styles for the multi-line innerblocks, so you don't have to worry about styling the innerblocks yourself.

Smart Style Options for Multi-line Captions

You can set the font families, base font size, and colors for common elements.

If you plan to style the innerblocks yourself, you can disable Smart Styles.

Sizing and Dimension Options for a Caption

In the block sidebar, you'll see an area to adjust the sizing and dimensions of the caption.

Dimensions and Container Sizing Options

Padding, Margin, and Border

Dimension Options for the Photo Block

You can adjust per mobile breakpoint:

1. Padding

2. Margin

3. Border

4. Border Radius

These will be applied directly to the caption.

Caption Sizing Options

Caption Container Sizing Options

You're able to adjust the caption container. You can modify per breakpoint:

1. Width

2. Height

3. Min-Width

4. Min-Height

5. Max-Width

6. Max-Height

Removing a Caption

Remove Button in the Caption Block Toolbar

Click "Remove" in the caption block toolbar to remove a caption.

You'll be asked to confirm via a modal, and when approved, the caption will be removed.

Demo of Removing a Caption

Caption Advanced Options

Advanced Caption Options

In the Advanced panel in the block sidebar, you can:

1. Add CSS classes to the caption container

2. Add any custom data attributes you need for the caption

3. Hide on desktop, tablet, and mobile

You can also set global styles in the Advanced panel.

Global Style Options in the Caption Advanced Panel

Global Styles