RSS: Border & Spacing support

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

packages/block-library/src/rss/block.json

@@ -46,6 +46,20 @@
 		"html": false,
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"padding": false,
+				"margin": false
+			}
 		}
 	},
 	"editorStyle": "wp-block-rss-editor",

packages/block-library/src/rss/edit.js

@@ -118,6 +118,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>
@@ -189,7 +202,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 				<Disabled>
 					<ServerSideRender
 						block="core/rss"
-						attributes={ attributes }
+						attributes={ serverSideAttributes }
 					/>
 				</Disabled>
 			</div>

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;
 }
+// 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;
+}

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,10 @@ 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 {
+	box-sizing: border-box;
+	list-style: none;
+	padding: 0;
+}