beenull/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Skatepark: Add testimonial quote block style

Browse source
This commit is contained in:
Sarah Norris 2021-08-13 15:04:36 +01:00
parent 1db9f249ad
commit de3b5e5f47
4 changed files with 88 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
skatepark/assets/theme.css
View file

@ -287,6 +287,48 @@
text-indent: 10em;
}
.wp-block-quote.is-style-testimonial-quote {
/* Needs .wp-block-quote class to override editor styles */
border: 0;
display: flex;
flex-direction: row-reverse;
gap: calc( var(--wp--custom--margin--horizontal) * 1.6);
margin: calc( var(--wp--custom--margin--vertical) * 1.78) 0;
padding-left: 0;
}
@media (max-width: 599px) {
.wp-block-quote.is-style-testimonial-quote {
flex-direction: column;
gap: calc( var(--wp--custom--margin--vertical) * 0.75);
}
}
.wp-block-quote.is-style-testimonial-quote cite {
box-shadow: inset 0px 3px 0px 0px var(--wp--custom--color--primary);
display: inline-block;
flex: 1 0 0;
font-size: var(--wp--preset--font-size--normal);
font-style: normal;
font-weight: 500;
padding-top: calc( var(--wp--custom--margin--baseline) * 1.35);
text-align: right;
}
@media (max-width: 599px) {
.wp-block-quote.is-style-testimonial-quote cite {
text-align: left;
}
}
.wp-block-quote.is-style-testimonial-quote p, .wp-block-quote.is-style-testimonial-quote div.block-editor-rich-text__editable {
flex: 0 0 66.66%;
font-size: calc( var(--wp--preset--font-size--huge) * 1.34);
font-weight: bold;
line-height: 115%;
margin-bottom: 0;
}
.pre-footer h3 {
text-transform: uppercase;
}

9
skatepark/inc/block-styles.php
View file

@ -41,6 +41,15 @@ if ( ! function_exists( 'skatepark_register_block_styles' ) ) :
'style_handle' => 'indented-paragraph',
)
);
register_block_style(
'core/quote',
array(
'name' => 'testimonial-quote',
'label' => __( 'Testimonial', 'skatepark' ),
'style_handle' => 'testimonial-quote',
)
);
}
}
endif;

36
skatepark/sass/block-styles/_testimonial-quote.scss Normal file
View file

@ -0,0 +1,36 @@
.wp-block-quote.is-style-testimonial-quote { /* Needs .wp-block-quote class to override editor styles */
border: 0;
display: flex;
flex-direction: row-reverse;
gap: calc( var(--wp--custom--margin--horizontal) * 1.6);
margin: calc( var(--wp--custom--margin--vertical) * 1.78) 0;
padding-left: 0;
@include break-small-only() {
flex-direction: column;
gap: calc( var(--wp--custom--margin--vertical) * 0.75);
}
cite {
box-shadow: inset 0px 3px 0px 0px var(--wp--custom--color--primary);
display: inline-block;
flex: 1 0 0;
font-size: var(--wp--preset--font-size--normal);
font-style: normal;
font-weight: 500;
padding-top: calc( var(--wp--custom--margin--baseline) * 1.35);
text-align: right;
@include break-small-only() {
text-align: left;
}
}
p, div.block-editor-rich-text__editable {
flex: 0 0 66.66%;
font-size: calc( var(--wp--preset--font-size--huge) * 1.34);
font-weight: bold;
line-height: 115%;
margin-bottom: 0;
}
}

1
skatepark/sass/theme.scss
View file

@ -6,6 +6,7 @@
@import "blocks/search";
@import "block-styles/image-caption";
@import "block-styles/indented-paragraph";
@import "block-styles/testimonial-quote";
@import "block-patterns/pre-footer";
@import "block-patterns/testimonial";
@import "elements/headings";