• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

WPbasics - A beginner's resource for WordPress

  • Blog
    • Tutorials
    • Articles
    • Showcase
    • Themes
    • Plugins
  • Recommended Hosts
  • About
  • Contact Us
ACF Blocks

ACF Blocks | Gutenberg

Last updated on January 29, 2020 1 Comment

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.

Field Group
[
    {
        "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.

Tagged With: ACF Blocks, Advanced Custom Fields, monochrome pro

Reader Interactions

Comments

  1. Shihab says

    January 18, 2020 at 3:27 pm

    Hi, How to retrieve a specific field data in front-end? I’m asking because the_field(‘field_name’) not working. It working on the back-end (edit page) but unable to display data in front-end.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Search this site

Popular Posts

  • How to copy a live WordPress site to a local host | Duplicator
  • How to add a jQuery UI Accordion to WordPress
  • How to copy a live WordPress site to a localhost
  • How to Use FileZilla | FTP Client
  • How to Create a Localhost with local by Flywheel

Recent Posts

  • How to Install a MailChimp Popup in WordPress
  • Googles reCaptcha slow mobile site
  • Check if your site is indexed by Search Engines
  • ACF Blocks | Gutenberg
  • ACF Blocks for Gutenberg | Introducing ACF 5.8
SEE MORE POSTS

Footer

Site Links

  • Affiliate Disclosure

Contact

  • Email
  • Twitter
  • Facebook

About WPbasics

WPbasics was created to assist WordPress Beginners. This site provides tutorial, reviews, and access to deals on products used by WordPress users.

Copyright © 2022 · WPbasics ·

Enter your name and email and get the weekly newsletter... it's FREE!
Signup today and be the first to get notified on new updates
Your information will *never* be shared or sold to a 3rd party.