Skip to content

Commit

Permalink
WDSBT-23 - Clean up posts blocks
Browse files Browse the repository at this point in the history
  • Loading branch information
@khleomix
khleomix committed Aug 23, 2024
1 parent f64fca5 commit 5aa2c7d
Show file tree
Hide file tree
Showing 6 changed files with 157 additions and 127 deletions.
111 changes: 84 additions & 27 deletions assets/scss/blocks/core/latest-posts.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,64 @@
/* -- latest-posts -- */

.wp-block-latest-posts {
padding-bottom: var(--wp--preset--spacing--30);

li {
border-radius: 10px;
box-shadow:
0 0.5rem 1rem 0 rgba(48, 49, 51, 0.1),
0 0 0.0625rem 0 rgba(48, 49, 51, 0.05);
display: inline-flex;
flex-direction: column;
margin-bottom: var(--wp--preset--spacing--30);
position: relative;
width: 100%;

> *:not(.wp-block-latest-posts__featured-image) {
padding: 0.5rem 1.875rem;
}

&:last-of-type {
margin-bottom: 0;
}

.wp-block-latest-posts__post-title,
a:first-of-type {
&:has(.wp-block-latest-posts__featured-image) {
padding-left: 18.75rem;
}

.wp-block-latest-posts__featured-image {
aspect-ratio: 16/9;
left: 0;
margin-bottom: 0;
height: 100%;
overflow: hidden;
position: absolute;
max-width: 18.75rem;

a {
display: block;
height: 100%;
}

img {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
height: 100%;
max-width: 100%;
object-fit: cover;
vertical-align: bottom;
width: 100%;
}
}

.wp-block-latest-posts__post-title {
color: var(--wp--preset--color--black);
display: inline-block;
font-family: var(--wp--preset--font-family--headline);
font-size: 1.375rem;
font-weight: 600;
padding-bottom: 0.5rem;
margin-top: var(--wp--preset--spacing--20);
padding: 0.5rem 1.875rem 0;
text-decoration: none;

&:hover,
Expand All @@ -31,54 +74,68 @@
color: var(--wp--preset--color--black);
display: block;
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--xxs);
padding-bottom: 0.5rem;
font-size: 0.8125em;
margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
padding: 0.5rem 1.875rem 0;
}

.wp-block-latest-posts__post-excerpt {
.wp-block-latest-posts__read-more,
a:last-of-type {
color: var(--wp--preset--color--grey-500);
margin-top: 0;
padding: 0.5rem 1.875rem;

.wp-block-latest-posts__read-more {
color: var(--wp--preset--color--primary-500);
display: block;
font-size: var(--wp--preset--font-size--xs);
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--xxs);
font-weight: 300;
padding-top: 1rem;
text-decoration: none;
text-decoration: underline;
width: max-content;

&:hover,
&:focus {
color: var(--wp--preset--color--primary-700);
color: var(--wp--preset--color--primary-300);
}
}
}
}

&.is-grid {
justify-content: space-between;

li {
display: inline-flex;
flex-direction: column;
padding-left: 0;

.wp-block-latest-posts__featured-image {
height: unset;
margin-bottom: var(--wp--preset--spacing--20);
max-width: unset;
order: 0;
position: relative;

+ .wp-block-latest-posts__post-title {
order: 2;

+ .wp-block-latest-posts__post-date {
order: 1;
}
img {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
}
}
}

@include responsive-min(960px) {
&.columns-3 {
li {
margin: 0 2.25em 1.25em 0;
width: calc(33.33333% - 2.25em);
.wp-block-latest-posts__post-title {
order: 2;
margin-top: 0;
}

.wp-block-latest-posts__post-date {
order: 1;
}

.wp-block-latest-posts__post-author {
order: 3;
}

.wp-block-latest-posts__post-excerpt {
order: 4;
}
}
}
Expand Down
11 changes: 5 additions & 6 deletions assets/scss/blocks/core/post-terms.scss
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
/* -- post-terms -- */

.wp-block-post-terms {
display: flex;
flex-direction: row;
justify-content: flex-start;
gap: var(--wp--preset--spacing--10);

.wp-block-post-terms__separator {
display: none;
}

a {
font-weight: 600;
padding-left: 0.75rem;
text-decoration: none;
}
}
78 changes: 52 additions & 26 deletions assets/scss/blocks/core/query.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,48 @@
.wp-block-query {
.wp-block-post-template {
.wp-block-post {
margin-top: var(
--wp--preset--spacing--30
) !important; /* stylelint-disable-line declaration-no-important */
border-radius: 10px;
box-shadow:
0 0.5rem 1rem 0 rgba(48, 49, 51, 0.1),
0 0 0.0625rem 0 rgba(48, 49, 51, 0.05);

&:not(.has-post-thumbnail) {
padding-top: 1.25rem;
}

> *:not(.wp-block-post-featured-image):not(hr) {
padding: 0.5rem 1.875rem;
}

hr {
border-top: 10px;
margin: 0;
}

.wp-block-post-featured-image {
aspect-ratio: 16/9;
margin-bottom: var(--wp--preset--spacing--20);
overflow: hidden;

img {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
object-fit: cover;
}
}

.wp-block-post-title {
margin-top: 0;
color: var(--wp--preset--color--black);
display: inline-block;
font-family: var(--wp--preset--font-family--headline);
font-size: 1.375rem;
font-weight: 600;
margin: 0;
padding-bottom: 0;
text-decoration: none;

a {
color: var(--wp--preset--color--black);
display: inline-block;
font-family: var(--wp--preset--font-family--headline);
font-size: 1.375rem;
font-weight: 600;
padding-bottom: 0;
text-decoration: none;

&:hover,
Expand All @@ -33,12 +61,12 @@
display: block;
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--xxs);
margin-top: 0.5rem !important; /* stylelint-disable-line declaration-no-important */
margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
padding-bottom: 0;

+ p {
font-size: var(--wp--preset--font-size--xxs);
margin-top: 0.5rem !important; /* stylelint-disable-line declaration-no-important */
margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
padding-bottom: 0;
}
}
Expand All @@ -61,25 +89,31 @@
}

.wp-block-post-excerpt {
margin-top: 0.75rem;
color: var(--wp--preset--color--grey-500);
margin-top: 0;
padding: 0 0 1.25rem 0;

.wp-block-post-excerpt__excerpt {
margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
}

.wp-block-post-excerpt__more-text {
margin-top: 0;
padding-top: 0;
margin-bottom: 0.75rem;
margin-top: 0.75rem;

.wp-block-post-excerpt__more-link {
color: var(--wp--preset--color--primary-500);
display: block;
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--xs);
font-weight: 700;
font-size: var(--wp--preset--font-size--xxs);
font-weight: 300;
padding-top: 1rem;
text-decoration: none;
text-decoration: underline;
width: max-content;

&:hover,
&:focus {
color: var(--wp--preset--color--primary-700);
color: var(--wp--preset--color--primary-300);
}
}
}
Expand All @@ -89,14 +123,6 @@
&.wp-block-post-template-is-layout-grid {
.wp-block-post {
margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */

.wp-block-post-date {
margin-top: 0.75rem !important; /* stylelint-disable-line declaration-no-important */
}

@include responsive-min(960px) {
margin: 0 2.25rem 1.25rem 0;
}
}
}
}
Expand Down
57 changes: 0 additions & 57 deletions assets/scss/patterns/related-posts.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,63 +2,6 @@

.related-posts-query {
.wp-block-post {
border-radius: 10px;
box-shadow:
0 0.5rem 1rem 0 rgba(48, 49, 51, 0.1),
0 0 0.0625rem 0 rgba(48, 49, 51, 0.05);

> *:not(.wp-block-post-featured-image):not(hr) {
padding: 0.5rem 1.875rem;
}

.wp-block-post-featured-image {
img {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
}

.wp-block-post-terms {
padding-bottom: 0;

a {
color: var(--wp--preset--color--grey-400);
padding-bottom: 0;
text-transform: none;

&:hover,
&:focus {
color: var(--wp--preset--color--primary-500);
}
}
}

.wp-block-post-title {
margin: 0;

a {
color: var(--wp--preset--color--black);
font-size: var(--wp--preset--font-size--l);
line-height: 1.3;

&:hover,
&:focus {
color: var(--wp--preset--color--primary-500);
}
}
}

hr {
border-top: 10px;
margin: 0;
}

.wp-block-post-excerpt {
color: var(--wp--preset--color--grey-500);
margin-top: 0;
padding: 0 0 1.25rem 0;
}

.wp-block-read-more {
color: var(--wp--preset--color--primary-500);
font-size: var(--wp--preset--font-size--xxs);
Expand Down
2 changes: 1 addition & 1 deletion inc/hooks/register-block-patterns.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ function register_custom_block_pattern() {
'templateTypes' => array( 'single-post' ),
'postTypes' => array( '' ),
'description' => _x( 'Related Posts query variation', 'Block pattern description', 'wdsbt' ),
'content' => '<!-- wp:group {"tagName":"aside","metadata":{"name":"Related Posts"},"style":{"spacing":{"margin":{"top":"var:preset|spacing|40"},"padding":{"bottom":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} --><aside class="wp-block-group" style="margin-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:query {"queryId":0,"query":{"perPage":"2","pages":0,"offset":0,"inherit":false},"className":"related-posts"} --><div class="wp-block-query related-posts"><!-- wp:post-template {"className":"related-posts-query","layout":{"type":"grid","columnCount":null,"minimumColumnWidth":"22rem"}} --><!-- wp:post-featured-image {"isLink":true,"aspectRatio":"16/9"} /--><!-- wp:post-terms {"term":"category"} /--><!-- wp:post-title {"isLink":true,"fontSize":"small"} /--><!-- wp:post-excerpt {"excerptLength":20} /--><!-- wp:read-more /--><!-- /wp:post-template --></div><!-- /wp:query --></aside><!-- /wp:group -->',
'content' => '<!-- wp:group {"tagName":"aside","metadata":{"name":"Related Posts"},"style":{"spacing":{"margin":{"top":"var:preset|spacing|40"},"padding":{"bottom":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} --><aside class="wp-block-group" style="margin-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:query {"queryId":0,"query":{"perPage":"2","pages":0,"offset":0,"inherit":false},"className":"related-posts"} --><div class="wp-block-query related-posts"><!-- wp:post-template {"className":"related-posts-query","layout":{"type":"grid","columnCount":null,"minimumColumnWidth":"22rem"}} --><!-- wp:post-featured-image {"isLink":true,"aspectRatio":"16/9"} /--><!-- wp:post-terms {"term":"category"} /--><!-- wp:post-title {"isLink":true} /--><!-- wp:post-excerpt {"excerptLength":20} /--><!-- wp:read-more /--><!-- /wp:post-template --></div><!-- /wp:query --></aside><!-- /wp:group -->',
)
);
}
Expand Down
Loading

0 comments on commit 5aa2c7d

Please sign in to comment.