Skip to content

Omukiguy

  • Plugin Development
  • Videos
  • Support my Work
  • About
  • Contact Me
A gutenberg built testimonial using quote block

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

April 25, 2019 by omukiguy

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.

Alex sharing his love for the Gut.

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.

A gutenberg built testimonial using quote block
A gutenberg built testimonial using quote block

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.

Testimonial - Custom post type
Testimonial – Custom post type

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.

Gutenberg Quote Block

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.

A custom post type for the testimonial with a filled in quote block

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.

Post navigation

Previous Post:

Gutenberg: How do we tell our story?

Next Post:

Self teaching: How to program and develop software

3 Commments

  1. Emade Francis says:
    March 31, 2019 at 8:28 am

    Kindly i would like to know how to create domain names and host website.
    thanks
    Emade Francis

    Reply
    1. omukiguy says:
      March 31, 2019 at 8:40 am

      Hey Francis, Check out this nice article by Hamza at https://www.gotechug.com/make-a-wordpress-website-with-gutenberg/

      Reply
  2. Emade Francis says:
    March 31, 2019 at 8:49 am

    thanks very much

    Reply

Leave a Reply Cancel reply

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

Categories

  • Beginner Tools (4)
  • Building Native WordPress Gutenberg Blocks (2)
  • ClassicPress (1)
  • Dev Life (5)
  • Developer Tools (21)
  • Everyday Life (4)
  • Gutenberg Basics (2)
  • Junior Development Course (1)
  • Plugin Reviews (1)
  • Resources (3)

Subscribe to Newsletter

* indicates required




Reliable WordPress Hosting

Recent Writes

  • Add Google Maps Pins & Address AutoDetect on WooCommerce Store Billing & Shipping for Free
  • Settings Sidebar:: Add Block Text, Image and Checkbox Fields – WordPress Gutenberg Block
  • Create ACF Admin menu Options Page & Sub Pages with Advanced Custom Fields
  • Native WordPress Gutenberg Blocks – Tooling & Setup of first block
  • Build Custom Gutenberg Blocks with Advanced Custom Fields (ACF) for WordPress Block Editor
© 2022 Omukiguy | Built using WordPress and SuperbThemes