RSS: Border & Spacing support (#66411)

* RSS block border support * Added block and spacing support for RSS block * Doc Build * Lint js fix * Lint js fix * Feed back changes * Review changes * Update packages/block-library/src/rss/editor.scss Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> * Update packages/block-library/src/rss/style.scss Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> * Eslint fix & Format change --------- Co-authored-by: benazeer1909 <91200605+benazeerhassan1909@users.noreply.github.com> Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Unlinked contributors: benazeerhassan1909. Co-authored-by: benazeer-ben <benazeer@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: shail-mehta <shailu25@git.wordpress.org>
WordPress · Jan 31, 2025 · d9fa3ac · d9fa3ac
1 parent 4dadd50
commit d9fa3ac
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 10 deletions.
diff --git 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), ~~html~~
+-	**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
@@ -47,6 +47,20 @@
 		"interactivity": {
 			"clientNavigation": true
 		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"padding": false,
+				"margin": false
+			}
+		},
 		"color": {
 			"background": true,
 			"text": true,

diff --git a/packages/block-library/src/rss/edit.js b/packages/block-library/src/rss/edit.js
@@ -119,6 +119,19 @@ 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.
+	 */
+	const serverSideAttributes = {
+		...attributes,
+		style: {
+			...attributes?.style,
+			border: undefined,
+			spacing: undefined,
+		},
+	};
 	return (
 		<>
 			<BlockControls>
@@ -190,7 +203,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 				<Disabled>
 					<ServerSideRender
 						block="core/rss"
-						attributes={ attributes }
+						attributes={ serverSideAttributes }
 					/>
 				</Disabled>
 			</div>

diff --git a/packages/block-library/src/rss/editor.scss b/packages/block-library/src/rss/editor.scss
@@ -5,3 +5,10 @@
 .wp-block-rss__placeholder-form .wp-block-rss__placeholder-input {
 	flex: 1 1 auto;
 }
+// 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;
+	padding: 0;
+}
diff --git 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,3 +33,9 @@ ul.wp-block-rss { // The ul is needed for specificity to override the reset styl
 	display: block;
 	font-size: 0.8125em;
 }
+.wp-block-rss {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+	list-style: none;
+	padding: 0;
+}