Flip Card block with ACF Pro

Create a custom Gutenberg block for 3D hover animation

I first used custom fields back in 2011 when developing the Body Connection Spa website. I hand coded the admin area interface (how brave!). Then I moved to Advanced Custom Fields and then to CMB2. I’ve been loyal to CMB2 but then ACF Pro added support for custom blocks!!

I am working on a revamp of the Shapemoda site. The front page is made with ACF fields. The content editor has been disabled. While this simplified maintenance it was quite restrictive.

My own custom blocks

My first step in the revamp was to create custom blocks to match the sections created with the ACF fields. I followed the excellent post about building a custom slider block and created a few custom blocks. I will write about them at some point in the future.

One of those custom blocks was for a flip card. The new design called for some images to change on hover. I decided that a flip card would be more impressive.

The file layout for custom blocks is quite simple – one PHP file to register the block, another to generate the markup and a CSS file to style the markup. I didn’t need any custom JavaScript for this block.

Register the block

This is quite simple. The block will appear in the Formatting of the block list.

Block Markup

The initial section is copied from Elliot’s slider demo. The block only needs two inputs – the front image and the back image. The markup is copied from David Walsh’s flip card post.

Block CSS

The CSS is also copied from David Walsh’s post. I hard coded the dimensions to 150 x 150 as that was what I needed (and I used 300×300 images in the block to improve things on retina displays). One could add a field to the ACF group to allow specifying custom dimensions.

Field Group

While writing this post I tried to use Local JSON to load the required field group settings for this block. Changes I made to the json file were not appearing in the Dashboard. I’m probably misunderstanding how it is supposed to work. Here is the json that can be imported into your site:

Demo

This is hard coded markup, not using the block, because I didn’t want to run ACF Pro on this site.

Enhancements

I thought about using a text field instead of an image field, to allow for text content in each side. I stuck with just images as I didn’t need that flexibility. It kept the field group and the markup simple. Changing from image to text field should be a relatively simple change to the markup file.

David Walsh’s post also has a vertical flip option though that requires knowing the height of the card. The code could be enhanced to include vertical/horizontal flip direction as an option, with the appropriate additional markup and CSS.