Fixes media styles block error

10up · Oct 6, 2023 · 4dba3d1 · 4dba3d1
1 parent e670cea
commit 4dba3d1
Showing 1 changed file with 12 additions and 8 deletions.
diff --git a/components/image/child-components/media.js b/components/image/child-components/media.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
-import { MediaPlaceholder, InspectorControls } from '@wordpress/block-editor';
 import { useContext, createContext } from '@wordpress/element';
+import { MediaPlaceholder, InspectorControls } from '@wordpress/block-editor';
 import { Spinner, FocalPointPicker, PanelBody, Placeholder } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -21,16 +21,13 @@ export const Media = (props) => {
 		hasImage,
 	} = useContext(ImageContext);
 
+	let focalPointStyle = {};
+
 	if (shouldDisplayFocalPointPicker) {
-		const focalPointStyle = {
+		focalPointStyle = {
 			objectFit: 'cover',
 			objectPosition: `${focalPoint.x * 100}% ${focalPoint.y * 100}%`,
 		};
-
-		props.styles = {
-			...style,
-			...focalPointStyle,
-		};
 	}
 
 	if (isResolvingMedia) {
@@ -55,7 +52,14 @@ export const Media = (props) => {
 					</PanelBody>
 				</InspectorControls>
 			)}
-			{hasImage && <img src={imageUrl} alt={altText} {...props} />}
+			{hasImage && (
+				<img
+					src={imageUrl}
+					alt={altText}
+					style={{ ...style, focalPointStyle }}
+					{...props}
+				/>
+			)}
 			{canEditImage && (
 				<MediaPlaceholder
 					labels={labels}