Support forwardRef components in save functions (#16180)

WordPress · Jun 14, 2019 · 39c5ea7 · 39c5ea7
1 parent d6bf345
commit 39c5ea7
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/packages/element/src/serialize.js b/packages/element/src/serialize.js
@@ -49,10 +49,14 @@ import {
 	createContext,
 	Fragment,
 	StrictMode,
+	forwardRef,
 } from './react';
 import RawHTML from './raw-html';
 
 const { Provider, Consumer } = createContext();
+const ForwardRef = forwardRef( () => {
+	return null;
+} );
 
 /**
  * Valid attribute types.
@@ -406,6 +410,9 @@ export function renderElement( element, context, legacyContext = {} ) {
 
 		case Consumer.$$typeof:
 			return renderElement( props.children( context || type._currentValue ), context, legacyContext );
+
+		case ForwardRef.$$typeof:
+			return renderElement( type.render( props ), context, legacyContext );
 	}
 
 	return '';

diff --git a/packages/element/src/test/serialize.js b/packages/element/src/test/serialize.js
@@ -12,6 +12,7 @@ import {
 	createElement,
 	Fragment,
 	StrictMode,
+	forwardRef,
 } from '../react';
 import RawHTML from '../raw-html';
 import serialize, {
@@ -84,6 +85,20 @@ describe( 'serialize()', () => {
 		);
 	} );
 
+	it( 'should render with forwardRef', () => {
+		const ForwardedComponent = forwardRef( () => {
+			return <div>test</div>;
+		} );
+
+		const result = serialize(
+			<ForwardedComponent />
+		);
+
+		expect( result ).toBe(
+			'<div>test</div>'
+		);
+	} );
+
 	describe( 'empty attributes', () => {
 		it( 'should not render a null attribute value', () => {
 			const result = serialize( <video src={ undefined } /> );