Using Gutenberg “Lite” with to make a custom testimonial section

Everyone’s instinct is to run away from change as much as possible at least that is what psychology tells us. When Gutenberg the WordPress project first came out, I was excited but skeptical about it. The need to find out what it was about left me worried since my JavaScript skills left a lot to be desired.

Alex one of my favorite developers decided to take on a challenge to embrace Gutenberg. In my opinion, this direction is only taken by those who have settled in their minds that a Javascript core is imminent or at least JavaScript is second nature.

PHP vs JavaScript

For a number of WordPress developers this is a grey area. Many prefer to do things in PHP since working with MVC & Databases in WordPress and its PHP core made that possible with a small learning curve. This has resulted to a number of WordPress forks like ClassicPress.

However, a bridge is being set up by Advanced Custom Fields to help non-JS developers dive into Gutenberg development.

The Gutenberg Block Design Challenge

My need was simple; a static testimonial section for a new client. A testimonial coming from the Admin dashboard

• with an image,
• citation/quote of the client’s confidence in the product
• and where they come from.

The design looked like this.

My development choices:

• Install a made plugin.
• Make my own plugin (probably complex)

However, this would be a lot more code than needed in this instance.

In my coding projects, my mind runs to use the default code and backbone that WordPress provides (this is one of the biggest reasons I use WordPress for my solutions). A custom post type and gutenberg quote block was sufficient. In other cases before Gutenberg, custom metaboxes would have been the best case use to handle the content or at least for the author name and company. But clients sometimes forget to fill in these pieces since they are disconnected from the large editor.

Gutenberg provides us with a quote block that already has the details needed to enter the data – a citation and author plus the featured image of author.

How to piece this riddle together:

A featured image of the custom post could be called out on front-end. While the editor content in a custom post type could be restricted with only a quote block to provide the needed information.

On the front-end, only the the_post_thumbnail() and get_the_content() functions would be use to make the designed element. Making the developers work easy to meet the design need and the user content fill in “fool-proof”.

The Front-end HTML

<div class="testimonials background" id="testimonials">
    <div class="stars">
        <img src="<?php echo svg() . 'stars.svg'; ?>" alt="testimonials stars">
        <h2>What people say about us...</h2>
    </div>

    <?php 
    $args = array( 'post_type' => 'testimonials', 'posts_per_page' => 4 );
    $the_query = new WP_Query( $args ); 
    if ( $the_query->have_posts() ) : 
    ?>
    <div class="testimonies">

        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

        <div class="testimony">
            <?php wprig_post_thumbnail(); the_content();?>
        </div>

        <?php endwhile;?>

    </div>
    <?php endif; wp_reset_postdata(); ?>

</div><!-- #testimonials -->

The CSS

This was only necessary to place the testimonials correctly and also to add the custom css to the styles of the block that are already existing.

.testimonials {
	display: grid;
	grid-template-columns: 1fr;
	padding: 3rem;
	background: rgb(46, 64, 28);
	background: linear-gradient(
		180deg,
		rgba(46, 64, 28, 1) 0%,
		rgba(76, 141, 29, 1) 100%
	);
}

.stars {
	grid-column: 1/-1;
	display: grid;
	justify-content: center;
}

.stars h2 {
	color: #fff;
}

.stars img {
	width: 200px;
	display: grid;
	justify-self: center;
}

.testimony {
	display: grid;
	grid-template-columns: 2fr 10fr;
	grid-gap: 1rem;
	align-items: center;
}

.testimony .post-thumbnail img {
	border: 4px solid rgba(255, 255, 255, 0.7);
	border-radius: 100%;
}

.testimony .wp-block-quote,
.testimony .wp-block-quote.is-large.is-style-large,
.testimony .wp-block-quote:not(.is-large):not(.is-style-large) {
	border-left: none;
	padding-left: 0;
	color: #fff;
}

.testimony .wp-block-quote cite,
.testimony .wp-block-quote footer,
.testimony .wp-block-quote__citation {
	display: inline-block;
	margin-top: 1rem;
	color: #8cc959;
}

.testimony .wp-block-quote,
.testimony .wp-block-quote p {
	margin: 0;
}

@media (min-width: 800px) {
	.testimonials {
		grid-template-columns: 2fr 4fr 4fr 2fr;
		grid-gap: 2rem;
		padding: 3rem 0;
	}
	.testimonies {
		grid-column: 2/4;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 2rem;
	}
}

The breakpoint

Gutenberg comes with so many blocks inset and as part of the package. This can be a little confusing for the user who is given so many options. Thus the need to constrain the post type. With a little internet research, code snippet from Zac Gordon on how to add gutenberg block templates did the rest of the magic.

This ensured that only one block was allowed in the custom post type and also lock it from adding any other blocks. These are some of the perks of Gutenberg.

function mytheme_block_templates( $args, $post_type ) {
    if ( 'testimonials' == $post_type ) {
        $args['template_lock'] = 'all';
        $args['template'] = [
            [      
                'core/quote', [
                'align' => 'left',
                ]
            ]
        ];
    }
    return $args;
}
// Hook function into post type arguments filter
add_filter( 'register_post_type_args', 'mytheme_block_templates', 20, 2 );

Without so much coding, my work was complete.

This isn’t a super big way to use Gutenberg but it served the purpose. With a little CSS Grid to place the block in the section on the front-end, the section was up a running in less than 30 mins. For both development time and research. Of course, the research was faster since I had an earlier knowledge of some of the powers that Gutenberg has.

The Gutenberg project keeps evolving and now enters its second phase and soon third. How have you used Gutenberg? What’s your pain point? What’s impressed you about it? Let me know in the comments below.

<div class='sharedaddy sd-block sd-like jetpack-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-post-wrapper-143626637-190-5cc0e36583264' data-src='https://widgets.wp.com/likes/#blog_id=143626637&post_id=190&origin=omukiguy.com&obj_id=143626637-190-5cc0e36583264' data-name='like-post-frame-143626637-190-5cc0e36583264'><h3 class="sd-title">Like this:</h3><div class='likes-widget-placeholder post-likes-widget-placeholder' style='height: 55px;'><span class='button'><span>Like</span></span> <span class="loading">Loading...</span></div><span class='sd-text-color'></span><a class='sd-link-color'></a></div>