From 2432a98e0e3bf7f610d32694f45ff03219f432f9 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 17 Aug 2022 18:05:24 +1000 Subject: [PATCH 1/3] Latest Comments: Add typography support --- docs/reference-guides/core-blocks.md | 2 +- .../block-library/src/latest-comments/block.json | 13 +++++++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 0eb9894a07b76..5e18fa89cf58e 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -320,7 +320,7 @@ Display a list of your most recent comments. ([Source](https://github.com/WordPr - **Name:** core/latest-comments - **Category:** widgets -- **Supports:** align, anchor, spacing (margin, padding), ~~html~~ +- **Supports:** align, anchor, spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~ - **Attributes:** commentsToShow, displayAvatar, displayDate, displayExcerpt ## Latest Posts diff --git a/packages/block-library/src/latest-comments/block.json b/packages/block-library/src/latest-comments/block.json index b7ba5c71a6832..80fa4f5d2d063 100644 --- a/packages/block-library/src/latest-comments/block.json +++ b/packages/block-library/src/latest-comments/block.json @@ -34,6 +34,19 @@ "spacing": { "margin": true, "padding": true + }, + "typography": { + "fontSize": true, + "lineHeight": true, + "__experimentalFontFamily": true, + "__experimentalFontWeight": true, + "__experimentalFontStyle": true, + "__experimentalTextTransform": true, + "__experimentalTextDecoration": true, + "__experimentalLetterSpacing": true, + "__experimentalDefaultControls": { + "fontSize": true + } } }, "editorStyle": "wp-block-latest-comments-editor", From 565e365be393db93027fa319180bb7957feccdaf Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 16 Dec 2022 16:33:01 +0800 Subject: [PATCH 2/3] Prevent styles interfering with global styles and block supports --- .../src/latest-comments/style.scss | 32 +++++++++++++++---- 1 file changed, 25 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/latest-comments/style.scss b/packages/block-library/src/latest-comments/style.scss index ba088731ee412..604729f763caa 100644 --- a/packages/block-library/src/latest-comments/style.scss +++ b/packages/block-library/src/latest-comments/style.scss @@ -9,6 +9,23 @@ ol.wp-block-latest-comments { box-sizing: border-box; } +// Following styles leverage :where so that typography block support styles and +// global styles apply when necessary. +:where(.wp-block-latest-comments:not([style*="line-height"] .wp-block-latest-comments__comment)) { + line-height: 1.1; +} + +:where(.wp-block-latest-comments:not([style*="line-height"] .wp-block-latest-comments__comment-excerpt p)) { + line-height: 1.8; +} + +.has-dates, +.has-excerpts { + :where(.wp-block-latest-comments:not([style*="line-height"])) { + line-height: 1.5; + } +} + // Higher specificity - target list via wrapper. .wp-block-latest-comments .wp-block-latest-comments { // Remove left spacing. Higher specificity required to @@ -17,7 +34,6 @@ ol.wp-block-latest-comments { } .wp-block-latest-comments__comment { - line-height: 1.1; list-style: none; margin-bottom: 1em; @@ -30,16 +46,10 @@ ol.wp-block-latest-comments { margin-left: 3.25em; } } - - .has-dates &, - .has-excerpts & { - line-height: 1.5; - } } .wp-block-latest-comments__comment-excerpt p { font-size: 0.875em; - line-height: 1.8; margin: 0.36em 0 1.4em; } @@ -57,3 +67,11 @@ ol.wp-block-latest-comments { margin-right: 0.75em; width: 2.5em; } + +// Enforce font size when user has made selection at the individual block level. +.wp-block-latest-comments[style*="font-size"], +.wp-block-latest-comments[class*="-font-size"] { + a { + font-size: inherit; + } +} From 041f4def701effe4a25881452ab372bd70ff355a Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 9 Feb 2023 17:45:28 +1000 Subject: [PATCH 3/3] Only skip server side rendering of spacing styles --- packages/block-library/src/latest-comments/edit.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/latest-comments/edit.js b/packages/block-library/src/latest-comments/edit.js index 01eb9e11dc3de..5675c07df513e 100644 --- a/packages/block-library/src/latest-comments/edit.js +++ b/packages/block-library/src/latest-comments/edit.js @@ -28,6 +28,14 @@ export default function LatestComments( { attributes, setAttributes } ) { const { commentsToShow, displayAvatar, displayDate, displayExcerpt } = attributes; + const serverSideAttributes = { + ...attributes, + style: { + ...attributes?.style, + spacing: undefined, + }, + }; + return (
@@ -71,8 +79,7 @@ export default function LatestComments( { attributes, setAttributes } ) {