Last active
February 20, 2020 10:58
-
-
Save tessak22/797fae407d1b2bbb2b8a02de0d24e13f to your computer and use it in GitHub Desktop.
ACF Testimonial Block
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
/** | |
* Testimonial Block | |
*/ | |
function register_acf_block_types() { | |
// register a testimonial block. | |
acf_register_block_type(array( | |
'name' => 'testimonial', | |
'title' => __('Testimonial'), | |
'description' => __('A custom testimonial block.'), | |
'render_template' => 'template-parts/blocks/testimonial/testimonial.php', | |
'category' => 'formatting', | |
'icon' => 'admin-comments', | |
'keywords' => array( 'testimonial', 'quote' ), | |
)); | |
} | |
// Check if function exists and hook into setup. | |
if( function_exists('acf_register_block_type') ) { | |
add_action('acf/init', 'register_acf_block_types'); | |
} |
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
.testimonial {display: flex; margin: 0; padding: 0;} | |
.testimonial-image {width: 100%; max-width: 500px; height: 500px;} | |
.testimonial-author {display: block;} | |
.testimonial-role {font-style: italic; font-size: 80%;} |
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 | |
/** | |
* Testimonial 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. | |
*/ | |
// Create id attribute allowing for custom "anchor" value. | |
$id = 'testimonial-' . $block['id']; | |
if( !empty($block['anchor']) ) { | |
$id = $block['anchor']; | |
} | |
// Create class attribute allowing for custom "className" and "align" values. | |
$className = 'testimonial'; | |
if( !empty($block['className']) ) { | |
$className .= ' ' . $block['className']; | |
} | |
if( !empty($block['align']) ) { | |
$className .= ' align' . $block['align']; | |
} | |
// Load values (field data) | |
$text = get_field('testimonial'); | |
$author = get_field('author'); | |
$role = get_field('role'); | |
$image = get_field('image'); | |
$background_color = get_field('background_color'); | |
$text_color = get_field('text_color'); | |
?> | |
<div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?>"> | |
<blockquote class="testimonial-blockquote"> | |
<span class="testimonial-text"><?php echo $text; ?></span> | |
<span class="testimonial-author"><?php echo $author; ?></span> | |
<span class="testimonial-role"><?php echo $role; ?></span> | |
</blockquote> | |
<div class="testimonial-image"> | |
<?php echo wp_get_attachment_image( $image, 'full' ); ?> | |
</div> | |
<style type="text/css"> | |
#<?php echo $id; ?> { | |
background: <?php echo $background_color; ?>; | |
color: <?php echo $text_color; ?>; | |
} | |
</style> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment