From 8cf68afc1040767740db03c90623becca127d93a Mon Sep 17 00:00:00 2001 From: karthick-murugan Date: Thu, 10 Oct 2024 17:47:03 +0530 Subject: [PATCH 1/9] Latest Comments Border Block Support --- .../block-library/src/latest-comments/block.json | 12 ++++++++++++ packages/block-library/src/latest-comments/edit.js | 1 + .../block-library/src/latest-comments/style.scss | 3 +++ 3 files changed, 16 insertions(+) diff --git a/packages/block-library/src/latest-comments/block.json b/packages/block-library/src/latest-comments/block.json index 543512ddf3ce7c..2e58b111baad4d 100644 --- a/packages/block-library/src/latest-comments/block.json +++ b/packages/block-library/src/latest-comments/block.json @@ -58,6 +58,18 @@ }, "interactivity": { "clientNavigation": true + }, + "__experimentalBorder": { + "radius": true, + "color": true, + "width": true, + "style": true, + "__experimentalDefaultControls": { + "radius": true, + "color": true, + "width": true, + "style": true + } } }, "editorStyle": "wp-block-latest-comments-editor", diff --git a/packages/block-library/src/latest-comments/edit.js b/packages/block-library/src/latest-comments/edit.js index 85e66cf2e9dc60..1d00668126b6f9 100644 --- a/packages/block-library/src/latest-comments/edit.js +++ b/packages/block-library/src/latest-comments/edit.js @@ -33,6 +33,7 @@ export default function LatestComments( { attributes, setAttributes } ) { style: { ...attributes?.style, spacing: undefined, + border: undefined, }, }; diff --git a/packages/block-library/src/latest-comments/style.scss b/packages/block-library/src/latest-comments/style.scss index 8759da8c73d94d..37b12ad3670644 100644 --- a/packages/block-library/src/latest-comments/style.scss +++ b/packages/block-library/src/latest-comments/style.scss @@ -30,7 +30,10 @@ ol.wp-block-latest-comments { .wp-block-latest-comments .wp-block-latest-comments { // Remove left spacing. Higher specificity required to // override default wp-block layout styles in the Post/Site editor. + // The following styles are to prevent duplicate spacing and border for the latest comments. padding-left: 0; + border: none; + border-radius: inherit; } .wp-block-latest-comments__comment { From 8c2b7e1fa290087b953bfcb94e0fad74d8938952 Mon Sep 17 00:00:00 2001 From: karthick-murugan Date: Thu, 10 Oct 2024 19:04:54 +0530 Subject: [PATCH 2/9] Some design issues --- packages/block-library/src/latest-comments/style.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/latest-comments/style.scss b/packages/block-library/src/latest-comments/style.scss index 37b12ad3670644..7142f1e0dd5bbf 100644 --- a/packages/block-library/src/latest-comments/style.scss +++ b/packages/block-library/src/latest-comments/style.scss @@ -3,12 +3,13 @@ ol.wp-block-latest-comments { // Removes left spacing in Customizer Widgets screen. // Due to low specificity this will be safely overridden // by default wp-block layout styles in the Post/Site editor - margin-left: 0; - + margin: 0; + padding: 30px 30px 10px 30px; // This block has customizable padding, border-box makes that more predictable. 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)) { @@ -31,7 +32,6 @@ ol.wp-block-latest-comments { // Remove left spacing. Higher specificity required to // override default wp-block layout styles in the Post/Site editor. // The following styles are to prevent duplicate spacing and border for the latest comments. - padding-left: 0; border: none; border-radius: inherit; } From 62bebfb2949744622c47f430c34a462e31ecd202 Mon Sep 17 00:00:00 2001 From: karthick-murugan Date: Thu, 17 Oct 2024 11:02:44 +0530 Subject: [PATCH 3/9] Removed unwanted styles --- packages/block-library/src/latest-comments/style.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/latest-comments/style.scss b/packages/block-library/src/latest-comments/style.scss index 7142f1e0dd5bbf..e9ce44c0bf6ac4 100644 --- a/packages/block-library/src/latest-comments/style.scss +++ b/packages/block-library/src/latest-comments/style.scss @@ -3,8 +3,7 @@ ol.wp-block-latest-comments { // Removes left spacing in Customizer Widgets screen. // Due to low specificity this will be safely overridden // by default wp-block layout styles in the Post/Site editor - margin: 0; - padding: 30px 30px 10px 30px; + margin-left: 0; // This block has customizable padding, border-box makes that more predictable. box-sizing: border-box; } @@ -31,9 +30,10 @@ ol.wp-block-latest-comments { .wp-block-latest-comments .wp-block-latest-comments { // Remove left spacing. Higher specificity required to // override default wp-block layout styles in the Post/Site editor. - // The following styles are to prevent duplicate spacing and border for the latest comments. + // The following styles are to prevent duplicate border for the latest comments. border: none; border-radius: inherit; + box-sizing: border-box; } .wp-block-latest-comments__comment { From 0b1dd417364b7bf75d262c9c2460c2e0a6319a0c Mon Sep 17 00:00:00 2001 From: karthick-murugan Date: Thu, 17 Oct 2024 11:07:11 +0530 Subject: [PATCH 4/9] Style Update --- packages/block-library/src/latest-comments/style.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-library/src/latest-comments/style.scss b/packages/block-library/src/latest-comments/style.scss index e9ce44c0bf6ac4..3c3d398ccdbf01 100644 --- a/packages/block-library/src/latest-comments/style.scss +++ b/packages/block-library/src/latest-comments/style.scss @@ -4,6 +4,7 @@ ol.wp-block-latest-comments { // Due to low specificity this will be safely overridden // by default wp-block layout styles in the Post/Site editor margin-left: 0; + // This block has customizable padding, border-box makes that more predictable. box-sizing: border-box; } @@ -30,6 +31,7 @@ ol.wp-block-latest-comments { .wp-block-latest-comments .wp-block-latest-comments { // Remove left spacing. Higher specificity required to // override default wp-block layout styles in the Post/Site editor. + padding-left: 0; // The following styles are to prevent duplicate border for the latest comments. border: none; border-radius: inherit; From bfe764aec7ca35eb5918a4d78f4dc4b531f8a1e1 Mon Sep 17 00:00:00 2001 From: karthick-murugan Date: Thu, 17 Oct 2024 11:46:01 +0530 Subject: [PATCH 5/9] Removed space in css --- packages/block-library/src/latest-comments/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/latest-comments/style.scss b/packages/block-library/src/latest-comments/style.scss index 3c3d398ccdbf01..ec93998eb97fd7 100644 --- a/packages/block-library/src/latest-comments/style.scss +++ b/packages/block-library/src/latest-comments/style.scss @@ -9,7 +9,6 @@ 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)) { From b44780766e0b507e9b5b3ded97f761a406dc1694 Mon Sep 17 00:00:00 2001 From: karthick-murugan Date: Tue, 22 Oct 2024 18:37:48 +0530 Subject: [PATCH 6/9] Some css updates --- packages/block-library/src/latest-comments/style.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/latest-comments/style.scss b/packages/block-library/src/latest-comments/style.scss index ec93998eb97fd7..5bb22abf5a5aa8 100644 --- a/packages/block-library/src/latest-comments/style.scss +++ b/packages/block-library/src/latest-comments/style.scss @@ -1,3 +1,8 @@ +.wp-block-latest-comments { + // This block has customizable border, border-box makes that more predictable. + box-sizing: border-box; +} + // Lower specificity - target list element. ol.wp-block-latest-comments { // Removes left spacing in Customizer Widgets screen. @@ -34,7 +39,6 @@ ol.wp-block-latest-comments { // The following styles are to prevent duplicate border for the latest comments. border: none; border-radius: inherit; - box-sizing: border-box; } .wp-block-latest-comments__comment { From 37cb23551cff0c76b7e5db9047ac511373e8be2a Mon Sep 17 00:00:00 2001 From: karthick-murugan Date: Mon, 25 Nov 2024 11:24:38 +0530 Subject: [PATCH 7/9] Feedback changes updated --- .../block-library/src/latest-comments/editor.scss | 11 +++++++++++ packages/block-library/src/latest-comments/style.scss | 10 ---------- 2 files changed, 11 insertions(+), 10 deletions(-) create mode 100644 packages/block-library/src/latest-comments/editor.scss diff --git a/packages/block-library/src/latest-comments/editor.scss b/packages/block-library/src/latest-comments/editor.scss new file mode 100644 index 00000000000000..1435f248350b54 --- /dev/null +++ b/packages/block-library/src/latest-comments/editor.scss @@ -0,0 +1,11 @@ +// Higher specificity - target list via wrapper. +.wp-block-latest-comments .wp-block-latest-comments { + // Remove left spacing. Higher specificity required to + // override default wp-block layout styles in the Post/Site editor. + padding-left: 0; + // These styles prevent duplicate borders in the Latest Comments block caused by + // server-side rendering injecting additional styles in the editor. They ensure + // consistent appearance in the editor while avoiding conflicts with frontend styles. + border: none; + border-radius: inherit; +} diff --git a/packages/block-library/src/latest-comments/style.scss b/packages/block-library/src/latest-comments/style.scss index 5bb22abf5a5aa8..66682beb8402d3 100644 --- a/packages/block-library/src/latest-comments/style.scss +++ b/packages/block-library/src/latest-comments/style.scss @@ -31,16 +31,6 @@ ol.wp-block-latest-comments { } } -// Higher specificity - target list via wrapper. -.wp-block-latest-comments .wp-block-latest-comments { - // Remove left spacing. Higher specificity required to - // override default wp-block layout styles in the Post/Site editor. - padding-left: 0; - // The following styles are to prevent duplicate border for the latest comments. - border: none; - border-radius: inherit; -} - .wp-block-latest-comments__comment { list-style: none; margin-bottom: 1em; From 28e29c69921239b097d5ed1494b0107a461c6fbb Mon Sep 17 00:00:00 2001 From: karthick-murugan Date: Tue, 26 Nov 2024 12:50:06 +0530 Subject: [PATCH 8/9] add the editor.scss file --- packages/block-library/src/editor.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index 0669a082b1086f..d8209f32d3d78a 100644 --- a/packages/block-library/src/editor.scss +++ b/packages/block-library/src/editor.scss @@ -22,6 +22,7 @@ @import "./group/editor.scss"; @import "./html/editor.scss"; @import "./image/editor.scss"; +@import "./latest-comments/editor.scss"; @import "./latest-posts/editor.scss"; @import "./media-text/editor.scss"; @import "./more/editor.scss"; From 72b3168e701d28d909d12cac3e44360af298bfdf Mon Sep 17 00:00:00 2001 From: karthick-murugan Date: Wed, 27 Nov 2024 12:50:52 +0530 Subject: [PATCH 9/9] Feedback changes updated --- packages/block-library/src/latest-comments/editor.scss | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/latest-comments/editor.scss b/packages/block-library/src/latest-comments/editor.scss index 1435f248350b54..2de0a5e9fa0b8d 100644 --- a/packages/block-library/src/latest-comments/editor.scss +++ b/packages/block-library/src/latest-comments/editor.scss @@ -1,11 +1,17 @@ // Higher specificity - target list via wrapper. .wp-block-latest-comments .wp-block-latest-comments { - // Remove left spacing. Higher specificity required to + // Remove spacing. Higher specificity required to // override default wp-block layout styles in the Post/Site editor. - padding-left: 0; + padding: 0; // These styles prevent duplicate borders in the Latest Comments block caused by // server-side rendering injecting additional styles in the editor. They ensure // consistent appearance in the editor while avoiding conflicts with frontend styles. border: none; border-radius: inherit; } + +// Reset margin for inner elements of the server-side rendered block +// to avoid extra spacing introduced in the editor +ol.wp-block-latest-comments { + margin: 0; +}