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

Blockbase: Add post-meta template part (#4565)

Browse source 
* Blockbase: add post-meta template part

* Blockbase: add post-tag icon

* Blockbase: remove tags from post meta

* Blockbase: add post tags to post meta

* Blockbase: add post tag SVG from Seedlet

* Blockbase: remove separator from post meta

* Blockbase: add spacer above post comments block

* Seedlet Blocks: add post tags to post meta

* Blockbase: enable blockGap & set gap size for all children

* Blockbase children: sync up child-theme.json files

They were all using --wp--custom--margin--vertical instead of --wp--custom--gap--vertical

* Blockbase children: change gap size to GB default of 0.5em

* Blockbase & co: use gap baseline across BB & all children

* Blockbase: add row-gap value to post-meta

* Skatepark: remove gap value

This is now applied via theme.json (as the same value)

* Blockbase: add comment next to use of !important

* Blockbase: add link to GB issue around block gaps
This commit is contained in:
Sarah Norris 2021-09-20 09:51:18 +01:00 committed by GitHub
parent 0d25520809
commit d8926ce8ed
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 42 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
blockbase/assets/ponyfill.css
View file

@ -828,6 +828,10 @@ p.has-background {
margin-bottom: unset;
}
.post-meta {
row-gap: var(--wp--custom--gap--baseline) !important;
}
.post-meta .wp-block-post-author,
.post-meta .wp-block-post-date,
.post-meta .taxonomy-post_tag,

1
blockbase/assets/svg/post-tag.svg Normal file
View file

@ -0,0 +1 @@
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 12.2045C3 12.5941 3.15158 12.9684 3.42267 13.2482L9.71878 19.747C11.0769 21.1489 13.3201 21.1667 14.7003 19.7865L19.7873 14.6995C21.1677 13.319 21.1497 11.0753 19.7471 9.71731L13.2459 3.42238C12.9661 3.15147 12.5919 3 12.2025 3H4.5C3.67157 3 3 3.67157 3 4.5V12.2045ZM12.2025 4.5H4.5V12.2045L10.7961 18.7033C11.5714 19.5035 12.8518 19.5137 13.6396 18.7258L18.7266 13.6388C19.5146 12.8509 19.5043 11.5701 18.7037 10.7949L12.2025 4.5ZM8.4975 9.495C9.0484 9.495 9.495 9.0484 9.495 8.4975C9.495 7.9466 9.0484 7.5 8.4975 7.5C7.9466 7.5 7.5 7.9466 7.5 8.4975C7.5 9.0484 7.9466 9.495 8.4975 9.495Z" fill="currentColor"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 742 B

8
blockbase/block-template-parts/post-meta.html Normal file
View file

@ -0,0 +1,8 @@
<!-- wp:group {"className":"post-meta","layout":{"type":"flex"}} -->
<div class="wp-block-group post-meta">
<!-- wp:post-author {"showAvatar":false,"showBio":false,"fontSize":"tiny"} /-->
<!-- wp:post-date {"fontSize":"tiny","isLink":true} /-->
<!-- wp:post-terms {"term":"category","fontSize":"tiny"} /-->
<!-- wp:post-terms {"term": "post_tag", "fontSize":"tiny"} /-->
</div>
<!-- /wp:group -->

9
blockbase/block-templates/singular.html
View file

@ -11,11 +11,18 @@
<!-- wp:post-featured-image {"align":"full"} /-->
<!-- wp:post-content {"layout":{"inherit":true}} /-->
<!-- wp:template-part {"slug":"post-meta","layout":{"inherit":true}} /-->
</main>
<!-- /wp:group -->
<!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group"><!-- wp:post-comments /--></div>
<div class="wp-block-group">
<!-- wp:spacer {"height":60} -->
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:post-comments /-->
</div>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true},"className":"site-footer-container"} /-->

3
blockbase/sass/post/_meta.scss
View file

@ -1,4 +1,7 @@
.post-meta {
// We're setting row-gap here as currently, we can't specify separate vertical and horizontal block gaps.
// Tracking in Gutenberg here: https://github.com/WordPress/gutenberg/issues/34529
row-gap: var(--wp--custom--gap--baseline) !important; // !important is needed to override the unique .wp-container-ID classes
.wp-block-post-author,
.wp-block-post-date,
.taxonomy-post_tag,

3
blockbase/theme.json
View file

@ -311,6 +311,7 @@
"wideSize": "1000px"
},
"spacing": {
"blockGap": true,
"customPadding": true,
"units": [
"%",
@ -571,7 +572,7 @@
}
},
"spacing": {
"blockGap": "var(--wp--custom--gap--vertical)"
"blockGap": "calc(2 * var(--wp--custom--gap--baseline))"
},
"typography": {
"lineHeight": "var(--wp--custom--body--typography--line-height)",

3
geologist/theme.json
View file

@ -335,6 +335,7 @@
"wideSize": "1128px"
},
"spacing": {
"blockGap": true,
"customPadding": true,
"units": [
"%",
@ -641,7 +642,7 @@
}
},
"spacing": {
"blockGap": "var(--wp--custom--gap--vertical)"
"blockGap": "calc(2 * var(--wp--custom--gap--baseline))"
},
"typography": {
"lineHeight": "var(--wp--custom--body--typography--line-height)",

3
mayland-blocks/theme.json
View file

@ -323,6 +323,7 @@
"wideSize": "1000px"
},
"spacing": {
"blockGap": true,
"customPadding": true,
"units": [
"%",
@ -593,7 +594,7 @@
}
},
"spacing": {
"blockGap": "var(--wp--custom--gap--vertical)"
"blockGap": "calc(2 * var(--wp--custom--gap--baseline))"
},
"typography": {
"lineHeight": "var(--wp--custom--body--typography--line-height)",

3
quadrat/theme.json
View file

@ -361,6 +361,7 @@
"wideSize": "1128px"
},
"spacing": {
"blockGap": true,
"customPadding": true,
"units": [
"%",
@ -667,7 +668,7 @@
}
},
"spacing": {
"blockGap": "var(--wp--custom--gap--vertical)"
"blockGap": "calc(2 * var(--wp--custom--gap--baseline))"
},
"typography": {
"lineHeight": "var(--wp--custom--body--typography--line-height)",

4
seedlet-blocks/block-template-parts/post-meta.html
View file

@ -7,5 +7,7 @@
<!-- wp:post-date {"fontSize":"tiny","isLink":true} /-->
<!-- wp:post-terms {"term":"category","fontSize":"tiny"} /--></div>
<!-- wp:post-terms {"term":"category","fontSize":"tiny"} /-->
<!-- wp:post-terms {"term": "post_tag", "fontSize":"tiny"} /--></div>
<!-- /wp:group -->

3
seedlet-blocks/theme.json
View file

@ -352,6 +352,7 @@
"wideSize": "790px"
},
"spacing": {
"blockGap": true,
"customPadding": true,
"units": [
"%",
@ -627,7 +628,7 @@
}
},
"spacing": {
"blockGap": "var(--wp--custom--gap--vertical)"
"blockGap": "calc(2 * var(--wp--custom--gap--baseline))"
},
"typography": {
"lineHeight": "var(--wp--custom--body--typography--line-height)",

1
skatepark/assets/theme.css
View file

@ -442,7 +442,6 @@ a:not(.ab-item):not(.screen-reader-shortcut):focus {
.post-meta.wp-block-group {
flex-direction: column;
align-items: start;
gap: .5em;
}
.post-meta .wp-block-post-date,

3
skatepark/child-theme.json
View file

@ -379,6 +379,9 @@
}
}
},
"spacing": {
"blockGap": "0.5em"
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--red-hat-display)",
"fontWeight": "400"

1
skatepark/sass/elements/_post-meta.scss
View file

@ -2,7 +2,6 @@
&.wp-block-group {
flex-direction: column;
align-items: start;
gap: .5em;
}
.wp-block-post-date,

3
skatepark/theme.json
View file

@ -360,6 +360,7 @@
"wideSize": "1194px"
},
"spacing": {
"blockGap": true,
"customPadding": true,
"units": [
"%",
@ -652,7 +653,7 @@
}
},
"spacing": {
"blockGap": "var(--wp--custom--gap--vertical)"
"blockGap": "0.5em"
},
"typography": {
"lineHeight": "var(--wp--custom--body--typography--line-height)",