ServerSideRender: add new skipBlockSupportAttributes prop

packages/server-side-render/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Feature
+
+-   Add `skipBlockSupportAttributes` props to prevent duplication of styles in the block wrapper and the `ServerSideRender` components. [#44491](https://github.com/WordPress/gutenberg/pull/44491)
+
 ## 3.16.0 (2022-09-21)
 
 ## 3.15.0 (2022-09-13)

packages/server-side-render/README.md

@@ -76,6 +76,13 @@ function add_rest_method( $endpoints ) {
 add_filter( 'rest_endpoints', 'add_rest_method');
 ```
 
+### skipBlockSupportAttributes
+
+Remove attributes and style properties applied by the block supports. This prevents duplication of styles in the block wrapper and the `ServerSideRender` components. Attributes and styles provided by the block supports for which `__experimentalSkipSerialization` is specified will not be removed.
+
+-   Type: `Boolean`
+-   Required: No
+
 ### urlQueryArgs
 
 Query arguments to apply to the request URL.

packages/server-side-render/src/constants.js

@@ -0,0 +1,81 @@
+export const ATTRIBUTE_PROPERTY = {
+	textColor: [ 'color', 'text' ],
+	backgroundColor: [ 'color', 'background' ],
+	gradient: [ 'color', 'gradients' ],
+	fontSize: [ 'typography', 'fontSize' ],
+	fontFamily: [ 'typography', '__experimentalFontFamily' ],
+	borderColor: [ '__experimentalBorder', 'color' ],
+};
+
+export const STYLE_PROPERTY = {
+	color: {
+		text: {
+			support: [ 'color', 'text' ],
+		},
+		background: {
+			support: [ 'color', 'background' ],
+		},
+		gradient: {
+			support: [ 'color', 'gradients' ],
+		},
+	},
+	elements: {
+		link: {
+			support: [ 'color', 'link' ],
+		},
+	},
+	typography: {
+		fontSize: {
+			support: [ 'typography', 'fontSize' ],
+		},
+		fontWeight: {
+			support: [ 'typography', '__experimentalFontWeight' ],
+		},
+		fontStyle: {
+			support: [ 'typography', '__experimentalFontStyle' ],
+		},
+		textTransform: {
+			support: [ 'typography', '__experimentalTextTransform' ],
+		},
+		leterSpacing: {
+			support: [ 'typography', '__experimentalLetterSpacing' ],
+		},
+		textDecoration: {
+			support: [ 'typography', '__experimentalTextDecoration' ],
+		},
+	},
+	spacing: {
+		margin: {
+			support: [ 'spacing', 'margin' ],
+		},
+		padding: {
+			support: [ 'spacing', 'padding' ],
+		},
+		blockGap: {
+			support: [ 'spacing', 'blockGap' ],
+		},
+	},
+	border: {
+		radius: {
+			support: [ '__experimentalBorder', 'radius' ],
+			subProperties: [
+				'topLeft',
+				'topRight',
+				'bottomRight',
+				'bottomLeft',
+			],
+		},
+		color: {
+			support: [ '__experimentalBorder', 'color' ],
+			additionalProperties: [ 'top', 'right', 'bottom', 'left' ],
+		},
+		style: {
+			support: [ '__experimentalBorder', 'style' ],
+			additionalProperties: [ 'top', 'right', 'bottom', 'left' ],
+		},
+		width: {
+			support: [ '__experimentalBorder', 'width' ],
+			additionalProperties: [ 'top', 'right', 'bottom', 'left' ],
+		},
+	},
+};

packages/server-side-render/src/server-side-render.js

@@ -10,17 +10,13 @@ import { useDebounce, usePrevious } from '@wordpress/compose';
 import { RawHTML, useEffect, useRef, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
-import { addQueryArgs } from '@wordpress/url';
 import { Placeholder, Spinner } from '@wordpress/components';
 import { __experimentalSanitizeBlockAttributes } from '@wordpress/blocks';
 
-export function rendererPath( block, attributes = null, urlQueryArgs = {} ) {
-	return addQueryArgs( `/wp/v2/block-renderer/${ block }`, {
-		context: 'edit',
-		...( null !== attributes ? { attributes } : {} ),
-		...urlQueryArgs,
-	} );
-}
+/**
+ * Internal dependencies
+ */
+import { rendererPath, removeBlockSupportAttributes } from './utils';
 
 function DefaultEmptyResponsePlaceholder( { className } ) {
 	return (
@@ -69,6 +65,7 @@ export default function ServerSideRender( props ) {
 		className,
 		httpMethod = 'GET',
 		urlQueryArgs,
+		skipBlockSupportAttributes = false,
 		EmptyResponsePlaceholder = DefaultEmptyResponsePlaceholder,
 		ErrorResponsePlaceholder = DefaultErrorResponsePlaceholder,
 		LoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder,
@@ -88,10 +85,17 @@ export default function ServerSideRender( props ) {
 
 		setIsLoading( true );
 
-		const sanitizedAttributes =
+		let sanitizedAttributes =
 			attributes &&
 			__experimentalSanitizeBlockAttributes( block, attributes );
 
+		if ( skipBlockSupportAttributes ) {
+			sanitizedAttributes = removeBlockSupportAttributes(
+				block,
+				sanitizedAttributes
+			);
+		}
+
 		// If httpMethod is 'POST', send the attributes in the request body instead of the URL.
 		// This allows sending a larger attributes object than in a GET request, where the attributes are in the URL.
 		const isPostRequest = 'POST' === httpMethod;