Fix: Featured image block contains invalid HTML (#17754)

WordPress · Oct 10, 2019 · 401ed23 · 401ed23
1 parent 780860f
commit 401ed23
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/packages/components/src/responsive-wrapper/index.js b/packages/components/src/responsive-wrapper/index.js
@@ -8,20 +8,26 @@ import classnames from 'classnames';
  */
 import { cloneElement, Children } from '@wordpress/element';
 
-function ResponsiveWrapper( { naturalWidth, naturalHeight, children } ) {
+function ResponsiveWrapper( {
+	naturalWidth,
+	naturalHeight,
+	children,
+	isInline = false,
+} ) {
 	if ( Children.count( children ) !== 1 ) {
 		return null;
 	}
 	const imageStyle = {
 		paddingBottom: ( naturalHeight / naturalWidth * 100 ) + '%',
 	};
+	const TagName = isInline ? 'span' : 'div';
 	return (
-		<div className="components-responsive-wrapper">
-			<div style={ imageStyle } />
+		<TagName className="components-responsive-wrapper">
+			<TagName style={ imageStyle } />
 			{ cloneElement( children, {
 				className: classnames( 'components-responsive-wrapper__content', children.props.className ),
 			} ) }
-		</div>
+		</TagName>
 	);
 }
 

diff --git a/packages/components/src/responsive-wrapper/style.scss b/packages/components/src/responsive-wrapper/style.scss
@@ -1,6 +1,10 @@
 .components-responsive-wrapper {
 	position: relative;
 	max-width: 100%;
+	&,
+	& > span {
+		display: block;
+	}
 }
 
 .components-responsive-wrapper__content {

diff --git a/packages/editor/src/components/post-featured-image/index.js b/packages/editor/src/components/post-featured-image/index.js
@@ -62,6 +62,7 @@ function PostFeaturedImage( { currentPostId, featuredImageId, onUpdateImage, onR
 									<ResponsiveWrapper
 										naturalWidth={ mediaWidth }
 										naturalHeight={ mediaHeight }
+										isInline
 									>
 										<img src={ mediaSourceUrl } alt="" />
 									</ResponsiveWrapper>