Check for duplication in addGeneratedClassName (#4422)

* Check for duplication in addGeneratedClassName * Coding Standards * Update Syntax remove the classnames utility and added tests * Code Cleanup * Code Cleanup * New fixture for whatever reason * Handle unexpected whitespaces
WordPress · Jan 30, 2018 · b5e2ae7 · b5e2ae7
1 parent d56af63
commit b5e2ae7
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 14 deletions.
diff --git a/blocks/hooks/generated-class-name.js b/blocks/hooks/generated-class-name.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import { uniq } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -26,13 +26,20 @@ import { hasBlockSupport, getBlockDefaultClassname } from '../api';
 export function addGeneratedClassName( extraProps, blockType ) {
 	// Adding the generated className
 	if ( hasBlockSupport( blockType, 'className', true ) ) {
-		const updatedClassName = classnames(
-			getBlockDefaultClassname( blockType.name ),
-			extraProps.className,
-		);
-		extraProps.className = updatedClassName;
-	}
+		if ( typeof extraProps.className === 'string' ) {
+			// We have some extra classes and want to add the default classname
+			// We use uniq to prevent duplicate classnames
 
+			extraProps.className = uniq( [
+				getBlockDefaultClassname( blockType.name ),
+				...extraProps.className.split( ' ' ),
+			] ).join( ' ' ).trim();
+		} else {
+			// There is no string in the className variable,
+			// so we just dump the default name in there
+			extraProps.className = getBlockDefaultClassname( blockType.name );
+		}
+	}
 	return extraProps;
 }
 

diff --git a/blocks/hooks/test/generated-class-name.js b/blocks/hooks/test/generated-class-name.js
@@ -42,5 +42,12 @@ describe( 'generated className', () => {
 
 			expect( extraProps.className ).toBe( 'wp-block-chicken-ribs foo' );
 		} );
+
+		it( 'should not inject duplicates into className', () => {
+			const attributes = { className: 'bar' };
+			const extraProps = addSaveProps( { className: 'foo wp-block-chicken-ribs' }, blockSettings, attributes );
+
+			expect( extraProps.className ).toBe( 'wp-block-chicken-ribs foo' );
+		} );
 	} );
 } );
diff --git a/blocks/test/fixtures/core__cover-image.json b/blocks/test/fixtures/core__cover-image.json
@@ -8,9 +8,9 @@
                 "Guten Berg!"
             ],
             "url": "https://cldup.com/uuUqE_dXzy.jpg",
+            "contentAlign": "center",
             "hasParallax": false,
-            "dimRatio": 40,
-            "contentAlign": "center"
+            "dimRatio": 40
         },
         "originalContent": "<section class=\"wp-block-cover-image has-background-dim-40 has-background-dim\" style=\"background-image:url(https://cldup.com/uuUqE_dXzy.jpg)\">\n    <h2>Guten Berg!</h2>\n</section>"
     }

diff --git a/blocks/test/fixtures/core__image.json b/blocks/test/fixtures/core__image.json
@@ -5,8 +5,8 @@
         "isValid": true,
         "attributes": {
             "url": "https://cldup.com/uuUqE_dXzy.jpg",
-            "caption": [],
-            "alt": ""
+            "alt": "",
+            "caption": []
         },
         "originalContent": "<figure class=\"wp-block-image\"><img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"\" /></figure>"
     }

diff --git a/blocks/test/fixtures/core__image__center-caption.json b/blocks/test/fixtures/core__image__center-caption.json
@@ -5,11 +5,11 @@
         "isValid": true,
         "attributes": {
             "url": "https://cldup.com/YLYhpou2oq.jpg",
+            "alt": "",
             "caption": [
                 "Give it a try. Press the \"really wide\" button on the image toolbar."
             ],
-            "align": "center",
-            "alt": ""
+            "align": "center"
         },
         "originalContent": "<figure class=\"wp-block-image aligncenter\"><img src=\"https://cldup.com/YLYhpou2oq.jpg\" alt=\"\" /><figcaption>Give it a try. Press the &quot;really wide&quot; button on the image toolbar.</figcaption></figure>"
     }

diff --git a/blocks/test/fixtures/core__subhead.parsed.json b/blocks/test/fixtures/core__subhead.parsed.json
@@ -1,7 +1,8 @@
 [
     {
         "blockName": "core/subhead",
-        "attrs": null,"innerBlocks": [],
+        "attrs": null,
+        "innerBlocks": [],
         "innerHTML": "\n<p class=\"wp-block-subhead\">This is a <em>subhead</em>.</p>\n"
     },
     {