Percent Quote

blockquote.is-style-percent { .percent { max-width:100%; margin: 0 0 16px; } @include media(">=tablet") { @supports( display: $grid ) { display: grid; grid-template-columns: 180px 1fr; grid-column-gap: 20px; align-items: center; } .percent { margin: 0; } } .circle-wrap { margin: 0 auto 16px; width: 180px; height: 180px; background: rgba( map-get( $brand_colors, 'primary'), .15 ); border-radius: 50%; .circle { .mask, .fill { width: 180px; height: 180px; position: absolute; border-radius: 50%; } .mask { clip: rect(0px, 180px, 180px, 90px); .fill { clip: rect(0px, 90px, 180px, 0px); background-color: brand-color( 'primary' ); } } .mask.full, .fill { transform: rotate(var(--rotate)); } } .inside-circle { color: brand-color( 'primary' ); width: 160px; height: 160px; border-radius: 50%; background: brand-color( 'primary', 'bg' ); line-height: 160px; text-align: center; margin-top: 10px; margin-left: 10px; position: absolute; z-index: 100; font-family: $alt-font; font-weight: 700; font-size: 55px; } } }
<?php /** * Percent Quote block * * @package CultivateBlocks * @author Bill Erickson * @since 1.0.0 * @license GPL-2.0+ **/ $classes = ['wp-block-quote', 'is-style-percent']; if( !empty( $block['className'] ) ) $classes = array_merge( $classes, explode( ' ', $block['className'] ) ); if( !empty( $block['align'] ) ) $classes[] = 'align' . $block['align']; echo '<blockquote class="' . join( ' ', $classes ) . '">'; $percent = get_field( 'percent' ); echo '<div class="percent" style="--rotate:' . intval( ( $percent / 100 ) * 180 ) . 'deg;">'; echo '<div class="circle-wrap"> <div class="circle"> <div class="mask full"> <div class="fill"></div> </div> <div class="mask half"> <div class="fill"></div> </div> <div class="inside-circle">' . intval( $percent ) . '%</div> </div> </div></div>'; echo wpautop( get_field( 'quote' ) ); $byline = get_field( 'byline' ); if( !empty( $byline ) ) echo '<cite>' . $byline . '</cite>'; echo '</blockquote>';
Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk