Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Flip Card block with ACF Pro - Create a custom Gutenberg block for 3D hover animation - https://www.damiencarbery.com/2019/12/flip-card-block-with-acf-pro/
{
"key": "dcwd_flip_card_group",
"title": "Flip Card",
"fields": [
{
"key": "front_image",
"label": "Front image",
"name": "card_front",
"type": "image",
"return_format": "array",
"preview_size": "medium",
"library": "all",
},
{
"key": "back_image",
"label": "Back image",
"name": "card_back",
"type": "image",
"instructions": "",
"return_format": "array",
"preview_size": "medium",
"library": "all",
}
],
"location": [
[
{
"param": "block",
"operator": "==",
"value": "acf\/flip-card"
}
]
],
"active": 1,
"modified": 1575896854
}
<?php
/*
Plugin Name: Flip Card block with ACF Pro
Plugin URI: https://www.damiencarbery.com/2019/12/flip-card-block-with-acf-pro/
Description: Create a custom Gutenberg block for 3D hover animation.
Author: Damien Carbery
Version: 0.1
*/
// Register a slider block.
add_action('acf/init', 'register_flip_card_block');
function register_flip_card_block() {
// check function exists.
if ( function_exists('acf_register_block_type') ) {
// register a testimonial block.
acf_register_block_type(array(
'name' => 'flip_card',
'title' => __('Flip Card'),
'description' => __('Flip card block.'),
'render_template' => plugin_dir_path( __FILE__ ) . 'flip-card/flip-card.php',
'category' => 'formatting',
'icon' => 'format-gallery',
'align' => 'center',
'enqueue_assets' => function(){
wp_enqueue_style( 'flip-card', plugin_dir_url( __FILE__ ) . 'flip-card/flip-card.css', array(), null );
},
));
}
}
.flip-card {
background-color: transparent;
width: 150px; /* width and height should be configurable. */
height: 150px;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
}
/* Style the back side */
.flip-card-back {
transform: rotateY(180deg);
}
<?php
/**
* Flip Card Block Template.
*
* @param array $block The block settings and attributes.
* @param string $content The block inner HTML (empty).
* @param bool $is_preview True during AJAX preview.
* @param (int|string) $post_id The post ID this block is saved to.
*/
// $Id: $
// Create id attribute allowing for custom "anchor" value.
$id = 'flip-card-' . $block['id'];
if( !empty($block['anchor']) ) {
$id = $block['anchor'];
}
// Create class attribute allowing for custom "className" and "align" values.
$className = 'flip-card';
if( !empty($block['className']) ) {
$className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
$className .= ' align' . $block['align'];
}
if( $is_preview ) {
$className .= ' is-admin';
}
?>
<div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?>">
<div class="flip-card-inner">
<?php
$front_image = get_field('card_front');
$back_image = get_field('card_back');
?>
<div class="flip-card-front">
<?php echo wp_get_attachment_image( $front_image['id'], 'full' ); ?>
</div>
<div class="flip-card-back">
<?php echo wp_get_attachment_image( $back_image['id'], 'full' ); ?>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment