Create Custom Blocks With ACF Blocks
With the introduction of Gutenberg, some have been worried about how they would create custom blocks without knowing JavaScript. Well the answer is here. Advanced Custom Fields Pro (ACF Blocks) has introduced a way to easily create custom blocks with only PHP and CSS.
In this tutorial I will create a custom testimonial block. I based the testimonial design on code I found online. You can find the original code here https://codepen.io/littlesnippets/pen/meBZyL.
I am using the Genesis framework with the Monochrome theme for this tutorial, but the code should work on most themes with slight modifications. In order for this tutorial to work you must have purchased installed and activated ACF PRO.
Below you will find all the code I used in the video tutorial. I have also included detailed instructions.
Let’s get started!!
Step 1 – Register Block
The first thing that we need to do is to Register our Testimonial block. In order to do this, open the functions.php file and add this code to the bottom of the file.
// ACF Custom Blocks **************************************************************************************
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');
}Step 2 – Create a Field Group
We now have to create the Field Group that will be used in our Testimonial block. Go back to your WordPress dashboard and go ahead and click on Custom Fields/Add New. Create 7 fields as in the image below. I have included a .json file below the image. You can import this into ACF and the the field group will be there for you.
Don’t forget to add the defaults for the Background Color and Text Color. Once you have done this, let’s move on to the next step.
[
{
"key": "group_5cd33c7f64f54",
"title": "Block: Testimonial",
"fields": [
{
"key": "field_5cd33c9120b63",
"label": "Testimonial",
"name": "testimonial",
"type": "textarea",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"maxlength": "",
"rows": "",
"new_lines": ""
},
{
"key": "field_5cd33cae20b64",
"label": "Author",
"name": "author",
"type": "text",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"prepend": "",
"append": "",
"maxlength": ""
},
{
"key": "field_5cd33ccd20b65",
"label": "Role",
"name": "role",
"type": "text",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"prepend": "",
"append": "",
"maxlength": ""
},
{
"key": "field_5cd33cd620b66",
"label": "Image",
"name": "image",
"type": "image",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"return_format": "id",
"preview_size": "full",
"library": "all",
"min_width": "",
"min_height": "",
"min_size": "",
"max_width": "",
"max_height": "",
"max_size": "",
"mime_types": ""
},
{
"key": "field_5cd33cf620b67",
"label": "Color Settings",
"name": "",
"type": "accordion",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"open": 0,
"multi_expand": 0,
"endpoint": 0
},
{
"key": "field_5cd33d0f20b68",
"label": "Background Color",
"name": "background_color",
"type": "color_picker",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "#ffffff"
},
{
"key": "field_5cd33d1f20b69",
"label": "Text Color",
"name": "text_color",
"type": "color_picker",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "#000000"
}
],
"location": [
[
{
"param": "block",
"operator": "==",
"value": "acf\/testimonial"
}
]
],
"menu_order": 0,
"position": "normal",
"style": "default",
"label_placement": "top",
"instruction_placement": "label",
"hide_on_screen": "",
"active": true,
"description": ""
}
]Step 3 – Render the Block
The next step is to Render the Block.
- Create a directory in your child theme as follows; template-parts/blocks/testimonial/testimonial.php
- Add the code below to testimonial.php
Modify the markup as required.
<?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 and assing defaults.
$text = get_field('testimonial') ?: 'Your testimonial here...';
$author = get_field('author') ?: 'Author name';
$role = get_field('role') ?: 'Author role';
$image = get_field('image') ?: 295;
$background_color = get_field('background_color');
$text_color = get_field('text_color');
?>
<!--Markup for Testimonial-->
<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>
<div class="testimonial-arrow"></div>
</blockquote>
<div class="testimonial-image">
<?php echo wp_get_attachment_image( $image, 'full' ); ?>
</div>
<div class="testimonial-author"><h5><?php echo $author; ?><span class="testimonial-role"><cite><?php echo $role; ?></cite></span></h5></div>
<!--Inline style for Testimonial Block-->
<style type="text/css">
#<?php echo $id; ?> {
background: <?php echo $background_color; ?>;
color: <?php echo $text_color; ?>;
}
#<?php echo $id; ?> .testimonial-arrow {
border-top: 25px solid<?php echo $background_color; ?>;
color: <?php echo $text_color; ?>;
}
#<?php echo $id; ?> .testimonial-author {
background-color: <?php echo $background_color; ?>;
color: <?php echo $text_color; ?>;
}
</style>
</div>
Step 3 – CSS
Go ahead and create a file called testimonial.css in the template-parts/block/testimonial directory. Now go ahead and add the code below to the testimonial .css file
.testimonial {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 220px;
max-width: 310px;
width: 100%;
color: #333;
text-align: left;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
border-radius: 8px;
}
.testimonial * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
.testimonial img {
max-width: 100%;
vertical-align: middle;
}
.testimonial blockquote {
position: relative;
padding: 25px 50px 25px 50px;
font-size: 0.8rem;
font-weight: 500;
text-align: left;
margin: 0;
line-height: 1.6em;
font-style: italic;
}
.testimonial blockquote:before,
.testimonial blockquote:after {
font-family: 'FontAwesome';
content: "\201C";
position: absolute;
font-size: 50px;
opacity: 0.3;
font-style: normal;
}
.testimonial blockquote:before {
top: 25px;
left: 20px;
}
.testimonial blockquote:after {
content: "\201D";
right: 20px;
bottom: 0;
}
.testimonial-arrow {
top: 100%;
width: 0;
height: 0;
border-left: 0 solid transparent;
border-right: 25px solid transparent;
margin: 0;
position: absolute;
}
.testimonial .testimonial-author {
position: absolute;
bottom: 0;
width: 100%;
padding: 5px 25px;
margin: 0;
text-transform: uppercase;
}
.testimonial .testimonial-author h5 {
opacity: 0.8;
margin: 0;
font-weight: 800;
font-size: 0.8rem;
}
.testimonial .testimonial-author h5 span {
font-weight: 400;
text-transform: none;
padding-left: 5px;
}Step 4 – Enqueue CSS
At this point we have our CSS code but WordPress does not see it yet. In order to fix this we need to Enqueue the style sheet. In order to do this; at this code to the Monochrome Pros’ functions.php file as follows; I added the code to line 83. You can create your own function, but seeing as Monochrome Pro already has a function to enqueue scripts and styles, I feel it’s easier to just use the existing function.
wp_enqueue_style( 'block-testimonial', get_stylesheet_directory_uri() . '/template-parts/blocks/testimonial/testimonial.css');
That’s it that’s all there is to it.
Did this tutorial help you out? Leave a comment below and tell me about it.
Leave a Reply