Skip to content

Commit 5aa2c7d

Browse files
khleomixkhleomix
committed
WDSBT-23 - Clean up posts blocks
1 parent f64fca5 commit 5aa2c7d

File tree

6 files changed

+157
-127
lines changed

6 files changed

+157
-127
lines changed

‎assets/scss/blocks/core/latest-posts.scss

Lines changed: 84 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,64 @@
33
/* -- latest-posts -- */
44

55
.wp-block-latest-posts {
6+
padding-bottom: var(--wp--preset--spacing--30);
7+
68
li {
9+
border-radius: 10px;
10+
box-shadow:
11+
0 0.5rem 1rem 0 rgba(48, 49, 51, 0.1),
12+
0 0 0.0625rem 0 rgba(48, 49, 51, 0.05);
13+
display: inline-flex;
14+
flex-direction: column;
715
margin-bottom: var(--wp--preset--spacing--30);
16+
position: relative;
17+
width: 100%;
18+
19+
> *:not(.wp-block-latest-posts__featured-image) {
20+
padding: 0.5rem 1.875rem;
21+
}
822

923
&:last-of-type {
1024
margin-bottom: 0;
1125
}
1226

13-
.wp-block-latest-posts__post-title,
14-
a:first-of-type {
27+
&:has(.wp-block-latest-posts__featured-image) {
28+
padding-left: 18.75rem;
29+
}
30+
31+
.wp-block-latest-posts__featured-image {
32+
aspect-ratio: 16/9;
33+
left: 0;
34+
margin-bottom: 0;
35+
height: 100%;
36+
overflow: hidden;
37+
position: absolute;
38+
max-width: 18.75rem;
39+
40+
a {
41+
display: block;
42+
height: 100%;
43+
}
44+
45+
img {
46+
border-top-left-radius: 10px;
47+
border-bottom-left-radius: 10px;
48+
height: 100%;
49+
max-width: 100%;
50+
object-fit: cover;
51+
vertical-align: bottom;
52+
width: 100%;
53+
}
54+
}
55+
56+
.wp-block-latest-posts__post-title {
1557
color: var(--wp--preset--color--black);
1658
display: inline-block;
1759
font-family: var(--wp--preset--font-family--headline);
1860
font-size: 1.375rem;
1961
font-weight: 600;
20-
padding-bottom: 0.5rem;
62+
margin-top: var(--wp--preset--spacing--20);
63+
padding: 0.5rem 1.875rem 0;
2164
text-decoration: none;
2265

2366
&:hover,
@@ -31,54 +74,68 @@
3174
color: var(--wp--preset--color--black);
3275
display: block;
3376
font-family: var(--wp--preset--font-family--body);
34-
font-size: var(--wp--preset--font-size--xxs);
35-
padding-bottom: 0.5rem;
77+
font-size: 0.8125em;
78+
margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
79+
padding: 0.5rem 1.875rem 0;
3680
}
3781

3882
.wp-block-latest-posts__post-excerpt {
39-
.wp-block-latest-posts__read-more,
40-
a:last-of-type {
83+
color: var(--wp--preset--color--grey-500);
84+
margin-top: 0;
85+
padding: 0.5rem 1.875rem;
86+
87+
.wp-block-latest-posts__read-more {
4188
color: var(--wp--preset--color--primary-500);
4289
display: block;
43-
font-size: var(--wp--preset--font-size--xs);
90+
font-family: var(--wp--preset--font-family--body);
91+
font-size: var(--wp--preset--font-size--xxs);
92+
font-weight: 300;
4493
padding-top: 1rem;
45-
text-decoration: none;
94+
text-decoration: underline;
4695
width: max-content;
4796

4897
&:hover,
4998
&:focus {
50-
color: var(--wp--preset--color--primary-700);
99+
color: var(--wp--preset--color--primary-300);
51100
}
52101
}
53102
}
54103
}
55104

56105
&.is-grid {
57-
justify-content: space-between;
58-
59106
li {
60-
display: inline-flex;
61-
flex-direction: column;
107+
padding-left: 0;
62108

63109
.wp-block-latest-posts__featured-image {
110+
height: unset;
111+
margin-bottom: var(--wp--preset--spacing--20);
112+
max-width: unset;
64113
order: 0;
114+
position: relative;
65115

66-
+ .wp-block-latest-posts__post-title {
67-
order: 2;
68-
69-
+ .wp-block-latest-posts__post-date {
70-
order: 1;
71-
}
116+
img {
117+
border-bottom-left-radius: 0;
118+
border-bottom-right-radius: 0;
119+
border-top-left-radius: 10px;
120+
border-top-right-radius: 10px;
72121
}
73122
}
74-
}
75-
}
76123

77-
@include responsive-min(960px) {
78-
&.columns-3 {
79-
li {
80-
margin: 0 2.25em 1.25em 0;
81-
width: calc(33.33333% - 2.25em);
124+
.wp-block-latest-posts__post-title {
125+
order: 2;
126+
margin-top: 0;
127+
}
128+
129+
.wp-block-latest-posts__post-date {
130+
order: 1;
131+
}
132+
133+
.wp-block-latest-posts__post-author {
134+
order: 3;
135+
}
136+
137+
.wp-block-latest-posts__post-excerpt {
138+
order: 4;
82139
}
83140
}
84141
}

‎assets/scss/blocks/core/post-terms.scss

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
/* -- post-terms -- */
22

33
.wp-block-post-terms {
4+
display: flex;
5+
flex-direction: row;
6+
justify-content: flex-start;
7+
gap: var(--wp--preset--spacing--10);
8+
49
.wp-block-post-terms__separator {
510
display: none;
611
}
7-
8-
a {
9-
font-weight: 600;
10-
padding-left: 0.75rem;
11-
text-decoration: none;
12-
}
1312
}

‎assets/scss/blocks/core/query.scss

Lines changed: 52 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,48 @@
55
.wp-block-query {
66
.wp-block-post-template {
77
.wp-block-post {
8-
margin-top: var(
9-
--wp--preset--spacing--30
10-
) !important; /* stylelint-disable-line declaration-no-important */
8+
border-radius: 10px;
9+
box-shadow:
10+
0 0.5rem 1rem 0 rgba(48, 49, 51, 0.1),
11+
0 0 0.0625rem 0 rgba(48, 49, 51, 0.05);
12+
13+
&:not(.has-post-thumbnail) {
14+
padding-top: 1.25rem;
15+
}
16+
17+
> *:not(.wp-block-post-featured-image):not(hr) {
18+
padding: 0.5rem 1.875rem;
19+
}
20+
21+
hr {
22+
border-top: 10px;
23+
margin: 0;
24+
}
25+
26+
.wp-block-post-featured-image {
27+
aspect-ratio: 16/9;
28+
margin-bottom: var(--wp--preset--spacing--20);
29+
overflow: hidden;
30+
31+
img {
32+
border-top-left-radius: 10px;
33+
border-top-right-radius: 10px;
34+
object-fit: cover;
35+
}
36+
}
1137

1238
.wp-block-post-title {
13-
margin-top: 0;
39+
color: var(--wp--preset--color--black);
40+
display: inline-block;
41+
font-family: var(--wp--preset--font-family--headline);
42+
font-size: 1.375rem;
43+
font-weight: 600;
44+
margin: 0;
45+
padding-bottom: 0;
46+
text-decoration: none;
1447

1548
a {
1649
color: var(--wp--preset--color--black);
17-
display: inline-block;
18-
font-family: var(--wp--preset--font-family--headline);
19-
font-size: 1.375rem;
20-
font-weight: 600;
21-
padding-bottom: 0;
2250
text-decoration: none;
2351

2452
&:hover,
@@ -33,12 +61,12 @@
3361
display: block;
3462
font-family: var(--wp--preset--font-family--body);
3563
font-size: var(--wp--preset--font-size--xxs);
36-
margin-top: 0.5rem !important; /* stylelint-disable-line declaration-no-important */
64+
margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
3765
padding-bottom: 0;
3866

3967
+ p {
4068
font-size: var(--wp--preset--font-size--xxs);
41-
margin-top: 0.5rem !important; /* stylelint-disable-line declaration-no-important */
69+
margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
4270
padding-bottom: 0;
4371
}
4472
}
@@ -61,25 +89,31 @@
6189
}
6290

6391
.wp-block-post-excerpt {
64-
margin-top: 0.75rem;
92+
color: var(--wp--preset--color--grey-500);
93+
margin-top: 0;
94+
padding: 0 0 1.25rem 0;
95+
96+
.wp-block-post-excerpt__excerpt {
97+
margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
98+
}
6599

66100
.wp-block-post-excerpt__more-text {
67-
margin-top: 0;
68-
padding-top: 0;
101+
margin-bottom: 0.75rem;
102+
margin-top: 0.75rem;
69103

70104
.wp-block-post-excerpt__more-link {
71105
color: var(--wp--preset--color--primary-500);
72106
display: block;
73107
font-family: var(--wp--preset--font-family--body);
74-
font-size: var(--wp--preset--font-size--xs);
75-
font-weight: 700;
108+
font-size: var(--wp--preset--font-size--xxs);
109+
font-weight: 300;
76110
padding-top: 1rem;
77-
text-decoration: none;
111+
text-decoration: underline;
78112
width: max-content;
79113

80114
&:hover,
81115
&:focus {
82-
color: var(--wp--preset--color--primary-700);
116+
color: var(--wp--preset--color--primary-300);
83117
}
84118
}
85119
}
@@ -89,14 +123,6 @@
89123
&.wp-block-post-template-is-layout-grid {
90124
.wp-block-post {
91125
margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
92-
93-
.wp-block-post-date {
94-
margin-top: 0.75rem !important; /* stylelint-disable-line declaration-no-important */
95-
}
96-
97-
@include responsive-min(960px) {
98-
margin: 0 2.25rem 1.25rem 0;
99-
}
100126
}
101127
}
102128
}

‎assets/scss/patterns/related-posts.scss

Lines changed: 0 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -2,63 +2,6 @@
22

33
.related-posts-query {
44
.wp-block-post {
5-
border-radius: 10px;
6-
box-shadow:
7-
0 0.5rem 1rem 0 rgba(48, 49, 51, 0.1),
8-
0 0 0.0625rem 0 rgba(48, 49, 51, 0.05);
9-
10-
> *:not(.wp-block-post-featured-image):not(hr) {
11-
padding: 0.5rem 1.875rem;
12-
}
13-
14-
.wp-block-post-featured-image {
15-
img {
16-
border-top-left-radius: 10px;
17-
border-top-right-radius: 10px;
18-
}
19-
}
20-
21-
.wp-block-post-terms {
22-
padding-bottom: 0;
23-
24-
a {
25-
color: var(--wp--preset--color--grey-400);
26-
padding-bottom: 0;
27-
text-transform: none;
28-
29-
&:hover,
30-
&:focus {
31-
color: var(--wp--preset--color--primary-500);
32-
}
33-
}
34-
}
35-
36-
.wp-block-post-title {
37-
margin: 0;
38-
39-
a {
40-
color: var(--wp--preset--color--black);
41-
font-size: var(--wp--preset--font-size--l);
42-
line-height: 1.3;
43-
44-
&:hover,
45-
&:focus {
46-
color: var(--wp--preset--color--primary-500);
47-
}
48-
}
49-
}
50-
51-
hr {
52-
border-top: 10px;
53-
margin: 0;
54-
}
55-
56-
.wp-block-post-excerpt {
57-
color: var(--wp--preset--color--grey-500);
58-
margin-top: 0;
59-
padding: 0 0 1.25rem 0;
60-
}
61-
625
.wp-block-read-more {
636
color: var(--wp--preset--color--primary-500);
647
font-size: var(--wp--preset--font-size--xxs);

‎inc/hooks/register-block-patterns.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ function register_custom_block_pattern() {
2020
'templateTypes' => array( 'single-post' ),
2121
'postTypes' => array( '' ),
2222
'description' => _x( 'Related Posts query variation', 'Block pattern description', 'wdsbt' ),
23-
'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 -->',
23+
'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 -->',
2424
)
2525
);
2626
}

0 commit comments

Comments
 (0)