Last active
January 6, 2020 18:11
-
-
Save damiencarbery/cf96104e707c8e84c8249f6e5c0f08c7 to your computer and use it in GitHub Desktop.
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/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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 | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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 ); | |
}, | |
)); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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