Tag Cloud: Add border block support (#63579)

* Add border support to tag cloud block * Prevent duplicate border styles in editor * Add comments on style and edit component changes in tag cloud block Co-authored-by: akasunil <[email protected]> Co-authored-by: aaronrobertshaw <[email protected]>
WordPress · Aug 12, 2024 · d86a499 · d86a499
1 parent da50610
commit d86a499
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git a/packages/block-library/src/tag-cloud/block.json b/packages/block-library/src/tag-cloud/block.json
@@ -51,6 +51,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-tag-cloud-editor"

diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js
@@ -107,6 +107,15 @@ function TagCloudEdit( { attributes, setAttributes } ) {
 		setAttributes( updateObj );
 	};
 
+	// Remove border styles from the server-side attributes to prevent duplicate border.
+	const serverSideAttributes = {
+		...attributes,
+		style: {
+			...attributes?.style,
+			border: undefined,
+		},
+	};
+
 	const inspectorControls = (
 		<InspectorControls>
 			<PanelBody title={ __( 'Settings' ) }>
@@ -188,7 +197,7 @@ function TagCloudEdit( { attributes, setAttributes } ) {
 					<ServerSideRender
 						skipBlockSupportAttributes
 						block="core/tag-cloud"
-						attributes={ attributes }
+						attributes={ serverSideAttributes }
 					/>
 				</Disabled>
 			</div>

diff --git a/packages/block-library/src/tag-cloud/editor.scss b/packages/block-library/src/tag-cloud/editor.scss
@@ -1,9 +1,11 @@
-// The following styles are to prevent duplicate spacing for the tag cloud
+// The following styles are to prevent duplicate spacing and border for the tag cloud
 // block in the editor given it uses server side rendering. The specificity
 // must be higher than `0-1-0` to override global styles. Targeting the
 // inner use of the .wp-block-tag-cloud class should minimize impact on
 // other 3rd party styles targeting the block.
 .wp-block-tag-cloud .wp-block-tag-cloud {
 	margin: 0;
 	padding: 0;
+	border: none;
+	border-radius: inherit;
 }