Building a “Polaroid” Image Block Style

I am a child of the late ’80s and ’90s. Before we all had cameras built into our mobile phones—well, before mobile phones took off, really—families would lug around Polaroid cameras to capture those special moments. Even though I hated posing for awkward photos with my siblings, I am still nostalgic about the magic of film from a bygone era.

Now, I have grown old enough to see the return of physical prints, sparked primarily by Fujifilm Instax. They are at least popular in the journaling groups that I lurk around. I have yet to shell out the money for one of Fujifilm’s mini cameras or smartphone printers, but I am admittedly tempted. Perhaps it is a fad, but I am still pulled toward reliving that part of my youth.

Regardless of whether I own the physical equipment, I can always recreate Polaroid-style photos on the web. The WordPress block system makes it simple.

This Building with Blocks post will cater primarily to theme authors. However, DIY users can also try their hand at it. The tutorial will walk through the steps of creating a Polaroid-style image frame as a custom block style.

For this tutorial, I used Twenty Twenty-Two and WordPress 6.0 Beta 2. It should also work with WordPress 5.9. For other themes, you may need to adjust the colors.

Building the Block Style

Polaroid Image block style.

Much of the fun I have had with the block system has been creating custom styles. They typically only take a few lines of code to transform blocks into something entirely different. The Polaroid style is the same.

The first step is to use the register_block_style() function to register a custom style via your theme’s functions.php:

add_action( 'init', 'tavern_register_block_styles' );

function tavern_register_block_styles() {
    register_block_style( 'core/image', [
        'name'  => 'polaroid',
        'label' => __( 'Polaroid', 'tavern' )
    ] );
}

Once registered, it will appear as a selectable style for the Image block in the editor. However, it still needs a custom design. For that, you only need a bit of CSS.

Add the following to your theme’s stylesheet or, preferably, register it via wp_enqueue_block_style():

.wp-block-image[class*=is-style-polaroid] {
    box-sizing: border-box;
    padding: 1rem;
    background-color: #fff;
    box-shadow: 0 4px  10px 0 rgba( 0, 0, 0, 0.3 ),
                0 0 4rem rgba( 255, 255, 235, 0.5 ) inset;
}

.wp-block-image[class*=is-style-polaroid] figcaption {
    margin-top: 1rem;
    margin-bottom: 0;
}

That is literally it. Custom block styles are such easy wins that I do not understand why more theme authors are not including them. I had 70+ in my last theme project, and I was holding back—OK, so I may have gone a little overboard.

If you want to change the “age” of the photo, you can darken the inset shadow in the above CSS. It is a subtle effect by default, but feel free to tinker with it.

Keen-eyed readers may have noticed that I targeted [class*=is-style-polaroid] instead of .is-style-polaroid. There is a reason for that. It cuts back on the code for additional styles built on the same concept.

Bonus: Tilted Styles

A Polaroid-style frame is a fun effect, but we can take that one step more and add variations for tilting images left or right. Add the following to the existing tavern_register_block_styles() function created in the previous section:

register_block_style( 'core/image', [
    'name'  => 'polaroid-tilt-left',
    'label' => __( 'Polaroid: Tilt Left', 'tavern' )
] );

register_block_style( 'core/image', [
    'name'  => 'polaroid-tilt-right',
    'label' => __( 'Polaroid: Tilt Right', 'tavern' )
] );

For each of the “tilt” styles, you can use the transform CSS property along with the scale() and rotate() functions. I chose slight rotations of 2deg and -2deg, but you can push that as far as you want to get your preferred design.

.wp-block-image.is-style-polaroid-tilt-right {
    transform: scale( 0.99, 0.99 ) rotate( 2deg );
}

.wp-block-image.is-style-polaroid-tilt-left {
    transform: scale( 0.99, 0.99 ) rotate( -2deg );
}

One fun effect is to remove the tilt transformation when a visitor hovers their mouse over the images. Use the following CSS for that:

.wp-block-image[class*=is-style-polaroid-tilt] {
    transition: all 0.5s ease-in-out;
}

.wp-block-image[class*=is-style-polaroid-tilt]:hover {
    transform: scale( 1, 1 ) rotate( 0 );
}

Let me know in the comments if you gave this block style a shot. If you really want to lean into the old-school Polaroid style, try it with a custom handwriting font for the caption. Also, please share any custom image-related designs if you have them.

12

12 responses to “Building a “Polaroid” Image Block Style”

  1. Loving the “Building with Blocks” series!

    Changing the scale to 0.97 would be good here (3% smaller :sad:). On 0.99, few images (especially those who have big heights) seem to go out of the container if the post content width and parent container have the same width. This could overflow over the next vertical section.

    • That is great advice for some themes. I didn’t think about it since I tend to do single-column, open designs. It’s just one of those things that might need to be adjusted based on the design and the rotation chosen.

  2. I wrote a post about custom block styles just last week. I used the ‘style_handle’ parameter to automatically enqueue my CSS file. It also enqueues it in the editor.

    • Great! For a while there, I could not get style_handle to work. It was probably broken in whatever version of Gutenberg I had installed at the time.

      My preference is to use wp_enqueue_block_style() and put all of my styles for a specific block into a single stylesheet. So, I might have core-image.css, core-separator.css, etc.

    • For those cases, it’s best to do that on the server-side with the add_image_size() function (set a specific width and height, then hard crop to true). I wanted the above to work alongside a range of image sizes since the theme is not going to control which size a user selects.

  3. And long before Polaroid, which was just a miracle, was Instamatic with flash cubes and earlier Brownie Hawkeyes with flash bulbs

  4. I’ve been looking for something like this since the first gutenberg release, eventually I gave up and so I had no idea this existed! thanks a lot for this post

Leave a Reply to Vera Cancel reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: