Fix aspect ratio of welcome image (#32302)

WordPress · May 31, 2021 · abf7b7d · abf7b7d
1 parent 48c8eca
commit abf7b7d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 12 deletions.
diff --git a/packages/customize-widgets/src/components/welcome-guide/index.js b/packages/customize-widgets/src/components/welcome-guide/index.js
@@ -21,18 +21,21 @@ export default function WelcomeGuide( { sidebar } ) {
 
 	return (
 		<div className="customize-widgets-welcome-guide">
-			<picture className="customize-widgets-welcome-guide__image">
-				<source
-					srcSet="https://s.w.org/images/block-editor/welcome-editor.svg"
-					media="(prefers-reduced-motion: reduce)"
-				/>
-				<img
-					src="https://s.w.org/images/block-editor/welcome-editor.gif"
-					width="312"
-					height="240"
-					alt=""
-				/>
-			</picture>
+			<div className="customize-widgets-welcome-guide__image__wrapper">
+				<picture>
+					<source
+						srcSet="https://s.w.org/images/block-editor/welcome-editor.svg"
+						media="(prefers-reduced-motion: reduce)"
+					/>
+					<img
+						className="customize-widgets-welcome-guide__image"
+						src="https://s.w.org/images/block-editor/welcome-editor.gif"
+						width="312"
+						height="240"
+						alt=""
+					/>
+				</picture>
+			</div>
 			<h1 className="customize-widgets-welcome-guide__heading">
 				{ __( 'Welcome to block Widgets' ) }
 			</h1>

diff --git a/packages/customize-widgets/src/components/welcome-guide/style.scss b/packages/customize-widgets/src/components/welcome-guide/style.scss
@@ -5,6 +5,10 @@
 		margin-bottom: $grid-unit-10;
 	}
 
+	&__image {
+		height: auto;
+	}
+
 	// Extra specificity to override `.wrap h1` styles.
 	.wrap &__heading {
 		font-size: 18px;