From d8926ce8ede4028b0d39232593aed6393176abee Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Mon, 20 Sep 2021 09:51:18 +0100 Subject: [PATCH] Blockbase: Add post-meta template part (#4565) * 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 --- blockbase/assets/ponyfill.css | 4 ++++ blockbase/assets/svg/post-tag.svg | 1 + blockbase/block-template-parts/post-meta.html | 8 ++++++++ blockbase/block-templates/singular.html | 9 ++++++++- blockbase/sass/post/_meta.scss | 3 +++ blockbase/theme.json | 3 ++- geologist/theme.json | 3 ++- mayland-blocks/theme.json | 3 ++- quadrat/theme.json | 3 ++- seedlet-blocks/block-template-parts/post-meta.html | 4 +++- seedlet-blocks/theme.json | 3 ++- skatepark/assets/theme.css | 1 - skatepark/child-theme.json | 3 +++ skatepark/sass/elements/_post-meta.scss | 1 - skatepark/theme.json | 3 ++- 15 files changed, 42 insertions(+), 10 deletions(-) create mode 100644 blockbase/assets/svg/post-tag.svg create mode 100644 blockbase/block-template-parts/post-meta.html diff --git a/blockbase/assets/ponyfill.css b/blockbase/assets/ponyfill.css index 294f9cce29..4dd0affb7e 100644 --- a/blockbase/assets/ponyfill.css +++ b/blockbase/assets/ponyfill.css @@ -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, diff --git a/blockbase/assets/svg/post-tag.svg b/blockbase/assets/svg/post-tag.svg new file mode 100644 index 0000000000..136004dabd --- /dev/null +++ b/blockbase/assets/svg/post-tag.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/blockbase/block-template-parts/post-meta.html b/blockbase/block-template-parts/post-meta.html new file mode 100644 index 0000000000..c42e914259 --- /dev/null +++ b/blockbase/block-template-parts/post-meta.html @@ -0,0 +1,8 @@ + +
+ + + + +
+ diff --git a/blockbase/block-templates/singular.html b/blockbase/block-templates/singular.html index 39955d08f1..6194ea7877 100644 --- a/blockbase/block-templates/singular.html +++ b/blockbase/block-templates/singular.html @@ -11,11 +11,18 @@ + + -
+
+ + + + +
diff --git a/blockbase/sass/post/_meta.scss b/blockbase/sass/post/_meta.scss index ec4395e1a3..ca81c67654 100644 --- a/blockbase/sass/post/_meta.scss +++ b/blockbase/sass/post/_meta.scss @@ -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, diff --git a/blockbase/theme.json b/blockbase/theme.json index 2dde7eedfa..1e6635b09b 100644 --- a/blockbase/theme.json +++ b/blockbase/theme.json @@ -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)", diff --git a/geologist/theme.json b/geologist/theme.json index 508309cade..03bcabf13e 100644 --- a/geologist/theme.json +++ b/geologist/theme.json @@ -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)", diff --git a/mayland-blocks/theme.json b/mayland-blocks/theme.json index 99b436b13c..8fd2ff1e73 100644 --- a/mayland-blocks/theme.json +++ b/mayland-blocks/theme.json @@ -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)", diff --git a/quadrat/theme.json b/quadrat/theme.json index ece7367ccc..2649a70ac7 100644 --- a/quadrat/theme.json +++ b/quadrat/theme.json @@ -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)", diff --git a/seedlet-blocks/block-template-parts/post-meta.html b/seedlet-blocks/block-template-parts/post-meta.html index 8856e40968..a2180b8845 100644 --- a/seedlet-blocks/block-template-parts/post-meta.html +++ b/seedlet-blocks/block-template-parts/post-meta.html @@ -7,5 +7,7 @@ - + + + diff --git a/seedlet-blocks/theme.json b/seedlet-blocks/theme.json index a575866d97..c80ea71c05 100644 --- a/seedlet-blocks/theme.json +++ b/seedlet-blocks/theme.json @@ -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)", diff --git a/skatepark/assets/theme.css b/skatepark/assets/theme.css index 9675e7ea05..b5d8ef4cc5 100644 --- a/skatepark/assets/theme.css +++ b/skatepark/assets/theme.css @@ -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, diff --git a/skatepark/child-theme.json b/skatepark/child-theme.json index c02afa5486..20614900f9 100644 --- a/skatepark/child-theme.json +++ b/skatepark/child-theme.json @@ -379,6 +379,9 @@ } } }, + "spacing": { + "blockGap": "0.5em" + }, "typography": { "fontFamily": "var(--wp--preset--font-family--red-hat-display)", "fontWeight": "400" diff --git a/skatepark/sass/elements/_post-meta.scss b/skatepark/sass/elements/_post-meta.scss index a87eafb969..d220bd9539 100644 --- a/skatepark/sass/elements/_post-meta.scss +++ b/skatepark/sass/elements/_post-meta.scss @@ -2,7 +2,6 @@ &.wp-block-group { flex-direction: column; align-items: start; - gap: .5em; } .wp-block-post-date, diff --git a/skatepark/theme.json b/skatepark/theme.json index 3d2ee9d247..3a0bdd6c4c 100644 --- a/skatepark/theme.json +++ b/skatepark/theme.json @@ -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)",