RichText: split out inline warning (#19545)

WordPress · Jan 10, 2020 · 5ec566b · 5ec566b
1 parent 1e0a6ce
commit 5ec566b
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/packages/rich-text/src/component/index.js b/packages/rich-text/src/component/index.js
@@ -36,6 +36,7 @@ import { removeLineSeparator } from '../remove-line-separator';
 import { isEmptyLine } from '../is-empty';
 import withFormatTypes from './with-format-types';
 import { BoundaryStyle } from './boundary-style';
+import { InlineWarning } from './inline-warning';
 
 /**
  * Browser dependencies
@@ -188,15 +189,6 @@ class RichText extends Component {
 	}
 
 	componentDidMount() {
-		if ( process.env.NODE_ENV === 'development' ) {
-			const computedStyle = getComputedStyle( this.props.forwardedRef.current );
-
-			if ( computedStyle.display === 'inline' ) {
-				// eslint-disable-next-line no-console
-				console.warn( 'RichText cannot be used with an inline container. Please use a different tagName.' );
-			}
-		}
-
 		this.applyRecord( this.record, { domOnly: true } );
 	}
 
@@ -1073,6 +1065,7 @@ class RichText extends Component {
 					activeFormats={ activeFormats }
 					forwardedRef={ forwardedRef }
 				/>
+				<InlineWarning forwardedRef={ forwardedRef } />
 				{ isSelected && <FormatEdit
 					allowedFormats={ allowedFormats }
 					withoutInteractiveFormatting={ withoutInteractiveFormatting }

diff --git a/packages/rich-text/src/component/inline-warning.js b/packages/rich-text/src/component/inline-warning.js
@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+
+export function InlineWarning( { forwardedRef } ) {
+	useEffect( () => {
+		if ( process.env.NODE_ENV === 'development' ) {
+			const computedStyle = window.getComputedStyle( forwardedRef.current );
+
+			if ( computedStyle.display === 'inline' ) {
+				// eslint-disable-next-line no-console
+				console.warn( 'RichText cannot be used with an inline container. Please use a different tagName.' );
+			}
+		}
+	}, [] );
+	return null;
+}