diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 7ac8591cd19318..3579b9b81bf48f 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), ~~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 index 844104b7d8113d..112dec4a32c78b 100644 --- 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 index 39564da79b16e5..d931bc8cb01d87 100644 --- 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 ( <> @@ -190,7 +203,7 @@ export default function RSSEdit( { attributes, setAttributes } ) { diff --git a/packages/block-library/src/rss/editor.scss b/packages/block-library/src/rss/editor.scss index c5e79d6254460b..83fef1d73f4f37 100644 --- 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 index f7360ec76f85ac..76cc232044ff30 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,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; +}