Element: Apply wrapper div for RawHTML with non-children props

element/index.js

@@ -8,7 +8,6 @@ import {
 	flowRight,
 	isString,
 	upperFirst,
-	isEmpty,
 } from 'lodash';
 
 /**
@@ -212,14 +211,10 @@ export function createHigherOrderComponent( mapComponentToEnhancedComponent, mod
  * @return {WPElement} Dangerously-rendering element.
  */
 export function RawHTML( { children, ...props } ) {
-	// Render wrapper only if props are non-empty.
-	const tagName = isEmpty( props ) ? 'wp-raw-html' : 'div';
-
-	// Merge HTML into assigned props.
-	props = {
+	// The DIV wrapper will be stripped by serializer, unless there are
+	// non-children props present.
+	return createElement( 'div', {
 		dangerouslySetInnerHTML: { __html: children },
 		...props,
-	};
-
-	return createElement( tagName, props );
+	} );
 }

element/serialize.js

@@ -28,7 +28,7 @@
 /**
  * External dependencies
  */
-import { castArray, omit, kebabCase } from 'lodash';
+import { isEmpty, castArray, omit, kebabCase } from 'lodash';
 
 /**
  * Internal dependencies
@@ -363,7 +363,16 @@ export function renderElement( element, context = {} ) {
 			return renderChildren( props.children, context );
 
 		case RawHTML:
-			return props.children;
+			const { children, ...wrapperProps } = props;
+
+			return renderNativeComponent(
+				isEmpty( wrapperProps ) ? null : 'div',
+				{
+					...wrapperProps,
+					dangerouslySetInnerHTML: { __html: children },
+				},
+				context
+			);
 	}
 
 	switch ( typeof tagName ) {
@@ -384,7 +393,8 @@ export function renderElement( element, context = {} ) {
 /**
  * Serializes a native component type to string.
  *
- * @param {string}  type    Native component type to serialize.
+ * @param {?string} type    Native component type to serialize, or null if
+ *                          rendering as fragment of children content.
  * @param {Object}  props   Props object.
  * @param {?Object} context Context object.
  *
@@ -398,13 +408,18 @@ export function renderNativeComponent( type, props, context = {} ) {
 		// as well.
 		content = renderChildren( [ props.value ], context );
 		props = omit( props, 'value' );
-	} else if ( props.dangerouslySetInnerHTML ) {
+	} else if ( props.dangerouslySetInnerHTML &&
+			typeof props.dangerouslySetInnerHTML.__html === 'string' ) {
 		// Dangerous content is left unescaped.
 		content = props.dangerouslySetInnerHTML.__html;
 	} else if ( typeof props.children !== 'undefined' ) {
 		content = renderChildren( castArray( props.children ), context );
 	}
 
+	if ( ! type ) {
+		return content;
+	}
+
 	const attributes = renderAttributes( props );
 
 	if ( SELF_CLOSING_TAGS.has( type ) ) {

element/test/index.js

@@ -193,7 +193,7 @@ describe( 'element', () => {
 				</RawHTML>
 			);
 
-			expect( element.type() ).toBe( 'wp-raw-html' );
+			expect( element.type() ).toBe( 'div' );
 			expect( element.prop( 'dangerouslySetInnerHTML' ).__html ).toBe( html );
 			expect( element.prop( 'children' ) ).toBe( undefined );
 		} );

element/test/serialize.js

@@ -204,6 +204,24 @@ describe( 'renderElement()', () => {
 
 		expect( result ).toBe( '<img/>' );
 	} );
+
+	it( 'renders RawHTML with wrapper if props passed', () => {
+		const result = renderElement( <RawHTML className="foo">{ '<img/>' }</RawHTML> );
+
+		expect( result ).toBe( '<div class="foo"><img/></div>' );
+	} );
+
+	it( 'renders RawHTML with empty children as empty string', () => {
+		const result = renderElement( <RawHTML /> );
+
+		expect( result ).toBe( '' );
+	} );
+
+	it( 'renders RawHTML with wrapper and empty children', () => {
+		const result = renderElement( <RawHTML className="foo" /> );
+
+		expect( result ).toBe( '<div class="foo"></div>' );
+	} );
 } );
 
 describe( 'renderNativeComponent()', () => {
@@ -228,6 +246,12 @@ describe( 'renderNativeComponent()', () => {
 			expect( result ).toBe( '<div>&lt;img/></div>' );
 		} );
 
+		it( 'should not render invalid dangerouslySetInnerHTML', () => {
+			const result = renderNativeComponent( 'div', { dangerouslySetInnerHTML: { __html: undefined } } );
+
+			expect( result ).toBe( '<div></div>' );
+		} );
+
 		it( 'should not escape children with dangerouslySetInnerHTML', () => {
 			const result = renderNativeComponent( 'div', { dangerouslySetInnerHTML: { __html: '<img/>' } } );