Pull-Quote Block
Adds a [sc_pullquote cite="Author"] shortcode that renders a typographically styled pull-quote with optional attribution.
Module2 parts · by SnipCraft
PHPShortcode
php
<?php
if ( ! function_exists( 'scseed_pullquote_shortcode' ) ) {
function scseed_pullquote_shortcode( $atts, $content = '' ) {
$atts = shortcode_atts( [ 'cite' => '' ], $atts, 'sc_pullquote' );
$text = wp_kses_post( $content );
$cite = esc_html( $atts['cite'] );
$out = '<figure class="scseed-pullquote"><blockquote class="scseed-pullquote-text">' . $text . '</blockquote>';
if ( ! empty( $cite ) ) {
$out .= '<figcaption class="scseed-pullquote-cite">' . $cite . '</figcaption>';
}
$out .= '</figure>';
return $out;
}
}
add_shortcode( 'sc_pullquote', 'scseed_pullquote_shortcode' );CSSStyles
css
.scseed-pullquote {
margin: 32px 0;
padding: 28px 36px;
border-left: 5px solid #7c5cff;
background: #f5f3ff;
border-radius: 0 8px 8px 0;
}
.scseed-pullquote-text {
margin: 0 0 8px;
font-size: 21px;
font-style: italic;
line-height: 1.55;
color: #1a1a2e;
quotes: none;
}
.scseed-pullquote-text::before,
.scseed-pullquote-text::after { content: none; }
.scseed-pullquote-cite {
font-size: 13px;
font-weight: 600;
color: #7c5cff;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.scseed-pullquote-cite::before { content: '\2014\00A0'; }#content#shortcode#typography#quote