Element: Render explicitly empty attribute values

WordPress · Mar 30, 2018 · c0846d2 · c0846d2
1 parent 17b1397
commit c0846d2
Show file tree

Hide file tree

Showing 10 changed files with 23 additions and 20 deletions.
diff --git a/blocks/api/raw-handling/test/integration/evernote-out.html b/blocks/api/raw-handling/test/integration/evernote-out.html
@@ -56,5 +56,5 @@
 <!-- /wp:table -->
 
 <!-- wp:image -->
-<figure class="wp-block-image"><img/></figure>
+<figure class="wp-block-image"><img src="" alt="" /></figure>
 <!-- /wp:image -->
diff --git a/blocks/api/raw-handling/test/integration/google-docs-out.html b/blocks/api/raw-handling/test/integration/google-docs-out.html
@@ -60,6 +60,6 @@ <h2>This is a <em>heading</em></h2>
 <!-- /wp:paragraph -->
 
 <!-- wp:image -->
-<figure class="wp-block-image"><img src="https://lh4.googleusercontent.com/ID" /></figure>
+<figure class="wp-block-image"><img src="https://lh4.googleusercontent.com/ID" alt="" /></figure>
 <!-- /wp:image -->
 
diff --git a/blocks/api/raw-handling/test/integration/ms-word-online-out.html b/blocks/api/raw-handling/test/integration/ms-word-online-out.html
@@ -50,5 +50,5 @@
 <!-- /wp:paragraph -->
 
 <!-- wp:image -->
-<figure class="wp-block-image"><img/></figure>
+<figure class="wp-block-image"><img src="" alt="" /></figure>
 <!-- /wp:image -->
diff --git a/blocks/api/raw-handling/test/integration/ms-word-out.html b/blocks/api/raw-handling/test/integration/ms-word-out.html
@@ -85,5 +85,5 @@ <h2>This is a heading level 2</h2>
 <!-- /wp:paragraph -->
 
 <!-- wp:image -->
-<figure class="wp-block-image"><img/></figure>
+<figure class="wp-block-image"><img src="" alt="" /></figure>
 <!-- /wp:image -->
diff --git a/blocks/api/raw-handling/test/integration/one-image-out.html b/blocks/api/raw-handling/test/integration/one-image-out.html
@@ -1,3 +1,3 @@
 <!-- wp:image -->
-<figure class="wp-block-image"><img src="http://localhost/wp-content/uploads/2018/01/Dec-08-2017-15-12-24-17-300x137.gif" /></figure>
+<figure class="wp-block-image"><img src="http://localhost/wp-content/uploads/2018/01/Dec-08-2017-15-12-24-17-300x137.gif" alt="" /></figure>
 <!-- /wp:image -->
diff --git a/blocks/api/raw-handling/test/integration/two-images-out.html b/blocks/api/raw-handling/test/integration/two-images-out.html
@@ -1,7 +1,7 @@
 <!-- wp:image -->
-<figure class="wp-block-image"><img src="http://localhost/wp-content/uploads/2018/01/Dec-08-2017-15-12-24-17-300x137.gif" /></figure>
+<figure class="wp-block-image"><img src="http://localhost/wp-content/uploads/2018/01/Dec-08-2017-15-12-24-17-300x137.gif" alt="" /></figure>
 <!-- /wp:image -->
 
 <!-- wp:image -->
-<figure class="wp-block-image"><img src="http://localhost/wp-content/uploads/2018/01/Dec-05-2017-17-52-09-9-300x248.gif" /></figure>
+<figure class="wp-block-image"><img src="http://localhost/wp-content/uploads/2018/01/Dec-05-2017-17-52-09-9-300x248.gif" alt="" /></figure>
 <!-- /wp:image -->
diff --git a/blocks/test/fixtures/core__image.serialized.html b/blocks/test/fixtures/core__image.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:image -->
-<figure class="wp-block-image"><img src="https://cldup.com/uuUqE_dXzy.jpg" /></figure>
+<figure class="wp-block-image"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="" /></figure>
 <!-- /wp:image -->
diff --git a/blocks/test/fixtures/core__image__center-caption.serialized.html b/blocks/test/fixtures/core__image__center-caption.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:image {"align":"center"} -->
-<figure class="wp-block-image aligncenter"><img src="https://cldup.com/YLYhpou2oq.jpg" />
+<figure class="wp-block-image aligncenter"><img src="https://cldup.com/YLYhpou2oq.jpg" alt="" />
     <figcaption>Give it a try. Press the "really wide" button on the image toolbar.</figcaption>
 </figure>
 <!-- /wp:image -->
diff --git a/element/serialize.js b/element/serialize.js
@@ -495,11 +495,6 @@ export function renderAttributes( props ) {
 			continue;
 		}
 
-		// Empty values are only rendered if for a meaningful attribute.
-		if ( ! value && ! isMeaningfulAttribute ) {
-			continue;
-		}
-
 		result += ' ' + attribute;
 
 		// Boolean attributes should write attribute name, but without value.
@@ -526,7 +521,7 @@ export function renderAttributes( props ) {
  * @return {string} Style attribute value.
  */
 export function renderStyle( style ) {
-	let result = '';
+	let result;
 
 	for ( const property in style ) {
 		const value = style[ property ];
@@ -536,6 +531,8 @@ export function renderStyle( style ) {
 
 		if ( result ) {
 			result += ';';
+		} else {
+			result = '';
 		}
 
 		result += kebabCase( property ) + ':' + getNormalStyleValue( property, value );

diff --git a/element/test/serialize.js b/element/test/serialize.js
@@ -74,14 +74,14 @@ describe( 'serialize()', () => {
 			expect( result ).toBe( '<video></video>' );
 		} );
 
-		it( 'should render an empty "as-is" attribute', () => {
-			const result = serialize( <video controls="" preload="" /> );
+		it( 'should an explicitly empty string attribute', () => {
+			const result = serialize( <video className="" /> );
 
-			expect( result ).toBe( '<video controls preload=""></video>' );
+			expect( result ).toBe( '<video class=""></video>' );
 		} );
 
-		it( 'should not render an empty attribute if not as-is', () => {
-			const result = serialize( <video className="" /> );
+		it( 'should not render an empty object style', () => {
+			const result = serialize( <video style={ {} } /> );
 
 			expect( result ).toBe( '<video></video>' );
 		} );
@@ -424,6 +424,12 @@ describe( 'renderAttributes()', () => {
 } );
 
 describe( 'renderStyle()', () => {
+	it( 'should return undefined if empty', () => {
+		const result = renderStyle( {} );
+
+		expect( result ).toBe( undefined );
+	} );
+
 	it( 'should render without trailing semi-colon', () => {
 		const result = renderStyle( {
 			color: 'red',