From 4b56a4ab8c837eaab202c21e6fe75a6d182391ce Mon Sep 17 00:00:00 2001 From: benazeer1909 <91200605+benazeerhassan1909@users.noreply.github.com> Date: Thu, 24 Oct 2024 12:20:56 +0530 Subject: [PATCH 01/10] RSS block border support --- packages/block-library/src/rss/block.json | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/block-library/src/rss/block.json b/packages/block-library/src/rss/block.json index 36d70e7b7ccb9..87745569c060d 100644 --- a/packages/block-library/src/rss/block.json +++ b/packages/block-library/src/rss/block.json @@ -46,6 +46,18 @@ "html": false, "interactivity": { "clientNavigation": true + }, + "__experimentalBorder": { + "radius": true, + "color": true, + "width": true, + "style": true, + "__experimentalDefaultControls": { + "radius": true, + "color": true, + "width": true, + "style": true + } } }, "editorStyle": "wp-block-rss-editor", From 11696c16909453af1b4f9d015ace24b7ee7c678b Mon Sep 17 00:00:00 2001 From: benazeer Date: Thu, 24 Oct 2024 17:29:49 +0530 Subject: [PATCH 02/10] Added block and spacing support for RSS block --- packages/block-library/src/rss/block.json | 4 ++++ packages/block-library/src/rss/edit.js | 11 +++++++++-- packages/block-library/src/rss/style.scss | 7 +++++++ 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/rss/block.json b/packages/block-library/src/rss/block.json index 87745569c060d..780a9cc7a2a78 100644 --- a/packages/block-library/src/rss/block.json +++ b/packages/block-library/src/rss/block.json @@ -58,6 +58,10 @@ "width": true, "style": true } + }, + "spacing": { + "margin": true, + "padding": true } }, "editorStyle": "wp-block-rss-editor", diff --git a/packages/block-library/src/rss/edit.js b/packages/block-library/src/rss/edit.js index b67cb4f9193df..c14af5c750cab 100644 --- a/packages/block-library/src/rss/edit.js +++ b/packages/block-library/src/rss/edit.js @@ -117,7 +117,14 @@ export default function RSSEdit( { attributes, setAttributes } ) { isActive: blockLayout === 'grid', }, ]; - + const serverSideAttributes = { + ...attributes, + style: { + ...attributes?.style, + border: undefined, + spacing:undefined + }, + }; return ( <> @@ -189,7 +196,7 @@ export default function RSSEdit( { attributes, setAttributes } ) { diff --git a/packages/block-library/src/rss/style.scss b/packages/block-library/src/rss/style.scss index f7360ec76f85a..90d1498e8a8e4 100644 --- a/packages/block-library/src/rss/style.scss +++ b/packages/block-library/src/rss/style.scss @@ -41,3 +41,10 @@ ul.wp-block-rss { // The ul is needed for specificity to override the reset styl display: block; font-size: 0.8125em; } +.wp-block-rss { + box-sizing: border-box; + .wp-block-rss { + margin: 0; + border: 0; + } +} From 327b61db5db2dc21488febce89e33f794cb9c76b Mon Sep 17 00:00:00 2001 From: benazeer Date: Thu, 24 Oct 2024 22:32:20 +0530 Subject: [PATCH 03/10] Doc Build --- docs/reference-guides/core-blocks.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index dd49d15685724..d4a315fa720d6 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -801,7 +801,7 @@ Display entries from any RSS or Atom feed. ([Source](https://github.com/WordPres - **Name:** core/rss - **Category:** widgets -- **Supports:** align, interactivity (clientNavigation), ~~html~~ +- **Supports:** align, interactivity (clientNavigation), spacing (margin, padding), ~~html~~ - **Attributes:** blockLayout, columns, displayAuthor, displayDate, displayExcerpt, excerptLength, feedURL, itemsToShow ## Search From bb7cb65ee2d1fd948e35dcfe6490db671ba185df Mon Sep 17 00:00:00 2001 From: benazeer Date: Fri, 25 Oct 2024 11:07:36 +0530 Subject: [PATCH 04/10] Lint js fix --- packages/block-library/src/rss/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/rss/edit.js b/packages/block-library/src/rss/edit.js index c14af5c750cab..0e7132bf775d4 100644 --- a/packages/block-library/src/rss/edit.js +++ b/packages/block-library/src/rss/edit.js @@ -122,7 +122,7 @@ export default function RSSEdit( { attributes, setAttributes } ) { style: { ...attributes?.style, border: undefined, - spacing:undefined + spacing: undefined }, }; return ( From 3d05431b10f6fa7715a79766b6bac0f227659edb Mon Sep 17 00:00:00 2001 From: benazeer Date: Fri, 25 Oct 2024 11:14:29 +0530 Subject: [PATCH 05/10] Lint js fix --- packages/block-library/src/rss/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/rss/edit.js b/packages/block-library/src/rss/edit.js index 0e7132bf775d4..7d43315245737 100644 --- a/packages/block-library/src/rss/edit.js +++ b/packages/block-library/src/rss/edit.js @@ -122,7 +122,7 @@ export default function RSSEdit( { attributes, setAttributes } ) { style: { ...attributes?.style, border: undefined, - spacing: undefined + spacing: undefined, }, }; return ( From 209099d44a4771eb09220b3be047a8d375ced0a5 Mon Sep 17 00:00:00 2001 From: benazeer-ben Date: Wed, 13 Nov 2024 11:32:04 +0530 Subject: [PATCH 06/10] Feed back changes --- packages/block-library/src/rss/block.json | 8 +------- packages/block-library/src/rss/edit.js | 6 ++++++ packages/block-library/src/rss/editor.scss | 9 +++++++++ packages/block-library/src/rss/style.scss | 10 ++++++---- 4 files changed, 22 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/rss/block.json b/packages/block-library/src/rss/block.json index 780a9cc7a2a78..2e363ea1290a5 100644 --- a/packages/block-library/src/rss/block.json +++ b/packages/block-library/src/rss/block.json @@ -51,13 +51,7 @@ "radius": true, "color": true, "width": true, - "style": true, - "__experimentalDefaultControls": { - "radius": true, - "color": true, - "width": true, - "style": true - } + "style": true }, "spacing": { "margin": true, diff --git a/packages/block-library/src/rss/edit.js b/packages/block-library/src/rss/edit.js index 7d43315245737..4a0b9922546c9 100644 --- a/packages/block-library/src/rss/edit.js +++ b/packages/block-library/src/rss/edit.js @@ -117,6 +117,12 @@ export default function RSSEdit( { attributes, setAttributes } ) { isActive: blockLayout === 'grid', }, ]; + + /** + * This function merges the existing attributes with additional style properties. + * The `border` and `spacing` properties are set to `undefined` to ensure that + * these styles are reset and not applied on the server side. + */ const serverSideAttributes = { ...attributes, style: { diff --git a/packages/block-library/src/rss/editor.scss b/packages/block-library/src/rss/editor.scss index c5e79d6254460..35ad57dfb9d5f 100644 --- a/packages/block-library/src/rss/editor.scss +++ b/packages/block-library/src/rss/editor.scss @@ -5,3 +5,12 @@ .wp-block-rss__placeholder-form .wp-block-rss__placeholder-input { flex: 1 1 auto; } +// resetting all the various block support styles when skipping block supports in the server-side rendering +// to prevent the double-up of block support styles within the editor when server-side rendering +.wp-block-rss .wp-block-rss { + margin: 0; + padding: 0; + border: 0; + border-radius: inherit; + background: inherit; +} diff --git a/packages/block-library/src/rss/style.scss b/packages/block-library/src/rss/style.scss index 90d1498e8a8e4..7576e1eeca387 100644 --- a/packages/block-library/src/rss/style.scss +++ b/packages/block-library/src/rss/style.scss @@ -41,10 +41,12 @@ ul.wp-block-rss { // The ul is needed for specificity to override the reset styl display: block; font-size: 0.8125em; } +// The .wp-block-rss class is styled to use border-box for box-sizing to ensure padding and border +// are included in the element's total width and height. .wp-block-rss { box-sizing: border-box; - .wp-block-rss { - margin: 0; - border: 0; - } +} +// extract the padding to a new style with the reduced specificity +:where(ul.wp-block-rss) { + padding: 0; } From e8c3e098b2cd3a3319b3c900203407b165f1c025 Mon Sep 17 00:00:00 2001 From: benazeer-ben Date: Wed, 13 Nov 2024 14:23:59 +0530 Subject: [PATCH 07/10] Review changes --- packages/block-library/src/rss/block.json | 6 +++++- packages/block-library/src/rss/edit.js | 2 +- packages/block-library/src/rss/editor.scss | 4 +--- packages/block-library/src/rss/style.scss | 16 +++------------- 4 files changed, 10 insertions(+), 18 deletions(-) diff --git a/packages/block-library/src/rss/block.json b/packages/block-library/src/rss/block.json index 2e363ea1290a5..4e2620ddafc91 100644 --- a/packages/block-library/src/rss/block.json +++ b/packages/block-library/src/rss/block.json @@ -55,7 +55,11 @@ }, "spacing": { "margin": true, - "padding": true + "padding": true, + "__experimentalDefaultControls": { + "padding": false, + "margin": false + } } }, "editorStyle": "wp-block-rss-editor", diff --git a/packages/block-library/src/rss/edit.js b/packages/block-library/src/rss/edit.js index 4a0b9922546c9..8da635e0900ef 100644 --- a/packages/block-library/src/rss/edit.js +++ b/packages/block-library/src/rss/edit.js @@ -118,7 +118,7 @@ export default function RSSEdit( { attributes, setAttributes } ) { }, ]; - /** + /* * This function merges the existing attributes with additional style properties. * The `border` and `spacing` properties are set to `undefined` to ensure that * these styles are reset and not applied on the server side. diff --git a/packages/block-library/src/rss/editor.scss b/packages/block-library/src/rss/editor.scss index 35ad57dfb9d5f..a7b7c459cf794 100644 --- a/packages/block-library/src/rss/editor.scss +++ b/packages/block-library/src/rss/editor.scss @@ -8,9 +8,7 @@ // resetting all the various block support styles when skipping block supports in the server-side rendering // to prevent the double-up of block support styles within the editor when server-side rendering .wp-block-rss .wp-block-rss { + all: inherit; margin: 0; padding: 0; - border: 0; - border-radius: inherit; - background: inherit; } diff --git a/packages/block-library/src/rss/style.scss b/packages/block-library/src/rss/style.scss index 7576e1eeca387..0f3dd5bdc8294 100644 --- a/packages/block-library/src/rss/style.scss +++ b/packages/block-library/src/rss/style.scss @@ -1,11 +1,4 @@ ul.wp-block-rss { // The ul is needed for specificity to override the reset styles in the editor. - list-style: none; - padding: 0; - - // This needs extra specificity due to the reset mixin on the parent: https://github.com/WordPress/gutenberg/blob/a250e9e5fe00dd5195624f96a3d924e7078951c3/packages/edit-post/src/style.scss#L54 - &.wp-block-rss { - box-sizing: border-box; - } &.alignleft { /*rtl:ignore*/ @@ -19,7 +12,6 @@ ul.wp-block-rss { // The ul is needed for specificity to override the reset styl display: flex; flex-wrap: wrap; padding: 0; - list-style: none; li { margin: 0 1em 1em 0; @@ -41,12 +33,10 @@ ul.wp-block-rss { // The ul is needed for specificity to override the reset styl display: block; font-size: 0.8125em; } -// The .wp-block-rss class is styled to use border-box for box-sizing to ensure padding and border -// are included in the element's total width and height. +// This block has customizable padding, border-box makes that more predictable. +// This needs extra specificity due to the reset mixin on the parent: https://github.com/WordPress/gutenberg/blob/a250e9e5fe00dd5195624f96a3d924e7078951c3/packages/edit-post/src/style.scss#L54 .wp-block-rss { box-sizing: border-box; -} -// extract the padding to a new style with the reduced specificity -:where(ul.wp-block-rss) { + list-style: none; padding: 0; } From 4c41f458ba655a46480c3fae55a986c269e64c03 Mon Sep 17 00:00:00 2001 From: Benazeer Hassan <66269472+benazeer-ben@users.noreply.github.com> Date: Thu, 14 Nov 2024 10:30:55 +0530 Subject: [PATCH 08/10] Update packages/block-library/src/rss/editor.scss Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> --- packages/block-library/src/rss/editor.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/rss/editor.scss b/packages/block-library/src/rss/editor.scss index a7b7c459cf794..83fef1d73f4f3 100644 --- a/packages/block-library/src/rss/editor.scss +++ b/packages/block-library/src/rss/editor.scss @@ -5,8 +5,8 @@ .wp-block-rss__placeholder-form .wp-block-rss__placeholder-input { flex: 1 1 auto; } -// resetting all the various block support styles when skipping block supports in the server-side rendering -// to prevent the double-up of block support styles within the editor when server-side rendering +// Reset all styles when skipping block supports while server-side rendering. +// This prevents issues such as duplicate padding, borders etc. .wp-block-rss .wp-block-rss { all: inherit; margin: 0; From de5a348eccdcc5905408573f399b9e7494000885 Mon Sep 17 00:00:00 2001 From: Benazeer Hassan <66269472+benazeer-ben@users.noreply.github.com> Date: Thu, 14 Nov 2024 10:31:13 +0530 Subject: [PATCH 09/10] Update packages/block-library/src/rss/style.scss Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> --- packages/block-library/src/rss/style.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/block-library/src/rss/style.scss b/packages/block-library/src/rss/style.scss index 0f3dd5bdc8294..76cc232044ff3 100644 --- a/packages/block-library/src/rss/style.scss +++ b/packages/block-library/src/rss/style.scss @@ -33,9 +33,8 @@ ul.wp-block-rss { // The ul is needed for specificity to override the reset styl display: block; font-size: 0.8125em; } -// This block has customizable padding, border-box makes that more predictable. -// This needs extra specificity due to the reset mixin on the parent: https://github.com/WordPress/gutenberg/blob/a250e9e5fe00dd5195624f96a3d924e7078951c3/packages/edit-post/src/style.scss#L54 .wp-block-rss { + // This block has customizable padding, border-box makes that more predictable. box-sizing: border-box; list-style: none; padding: 0; From 41d26ae06daa232b7b99669dd6cd676a6a8e7948 Mon Sep 17 00:00:00 2001 From: benazeer-ben Date: Tue, 14 Jan 2025 11:29:08 +0530 Subject: [PATCH 10/10] Eslint fix & Format change --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/rss/block.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 25818429f043b..2be62597051bd 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -811,7 +811,7 @@ Display entries from any RSS or Atom feed. ([Source](https://github.com/WordPres - **Name:** core/rss - **Category:** widgets -- **Supports:** align, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding) +- **Supports:** align, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), ~~html~~ - **Attributes:** blockLayout, columns, displayAuthor, displayDate, displayExcerpt, excerptLength, feedURL, itemsToShow ## Search diff --git a/packages/block-library/src/rss/block.json b/packages/block-library/src/rss/block.json index 505de3289ecbc..112dec4a32c78 100644 --- a/packages/block-library/src/rss/block.json +++ b/packages/block-library/src/rss/block.json @@ -60,7 +60,7 @@ "padding": false, "margin": false } - }, + }, "color": { "background": true, "text": true,