core/edit: remove wrapper

WordPress · Sep 10, 2019 · 31ef94b · 31ef94b
1 parent b97798d
commit 31ef94b
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 62 deletions.
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -125,12 +125,12 @@ const stopPropagationRelevantKeys = ( event ) => {
 };
 
 const ImageURLInputUI = ( {
-	advancedOptions,
-	linkDestination,
-	mediaLinks,
-	onChangeUrl,
-	url,
-} ) => {
+							  advancedOptions,
+							  linkDestination,
+							  mediaLinks,
+							  onChangeUrl,
+							  url,
+						  } ) => {
 	const [ isOpen, setIsOpen ] = useState( false );
 	const openLinkUI = useCallback( () => {
 		setIsOpen( true );
@@ -603,7 +603,6 @@ export class ImageEdit extends Component {
 					value={ align }
 					onChange={ this.updateAlignment }
 				/>
-
 				{ url && (
 					<>
 						<Toolbar>
@@ -694,7 +693,7 @@ export class ImageEdit extends Component {
 			[ `size-${ sizeSlug }` ]: sizeSlug,
 		} );
 
-		const isResizable = ( [ 'wide', 'full' ].indexOf( align ) === -1 ) && isLargeViewport;
+		const isResizable = ( [ 'wide', 'full', 'fullScreen' ].indexOf( align ) === -1 ) && isLargeViewport;
 
 		const imageSizeOptions = this.getImageSizeOptions();
 
@@ -804,14 +803,11 @@ export class ImageEdit extends Component {
 								defaultedAlt = __( 'This image has an empty alt attribute' );
 							}
 
-							const imgContainer = (
+							const img = (
 								// Disable reason: Image itself is not meant to be interactive, but
 								// should direct focus to block.
 								/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-								<div
-									className="wp-block-image__image-wrapper"
-									style={ { backgroundImage: `url(${ url })` } }
-								>
+								<>
 									<img
 										src={ url }
 										alt={ defaultedAlt }
@@ -820,7 +816,7 @@ export class ImageEdit extends Component {
 										onError={ () => this.onImageError( url ) }
 									/>
 									{ isBlobURL( url ) && <Spinner /> }
-								</div>
+								</>
 								/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
 							);
 
@@ -829,7 +825,7 @@ export class ImageEdit extends Component {
 									<>
 										{ getInspectorControls( imageWidth, imageHeight ) }
 										<div style={ { width, height } }>
-											{ imgContainer }
+											{ img }
 										</div>
 									</>
 								);
@@ -897,11 +893,7 @@ export class ImageEdit extends Component {
 											bottom: true,
 											left: showLeftHandle,
 										} }
-
-										onResizeStart={ () => {
-											toggleSelection( false );
-										} }
-
+										onResizeStart={ onResizeStart }
 										onResizeStop={ ( event, direction, elt, delta ) => {
 											onResizeStop();
 											setAttributes( {
@@ -910,7 +902,7 @@ export class ImageEdit extends Component {
 											} );
 										} }
 									>
-										{ imgContainer }
+										{ img }
 									</ResizableBox>
 								</>
 							);

diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
@@ -1,26 +1,14 @@
 .wp-block-image {
 	position: relative;
 
-	&.is-transient .wp-block-image__image-wrapper {
+	&.is-transient img {
 		opacity: 0.3;
 	}
 
 	figcaption img {
 		display: inline;
 	}
 
-	.wp-block-image__image-wrapper {
-		-webkit-background-size: cover;
-		background-size: cover;
-		background-repeat: no-repeat;
-		background-position: 50% 50%;
-		img {
-			opacity: 0;
-			margin: 0;
-			padding: 0;
-		}
-	}
-
 	// Shown while image is being uploaded
 	.components-spinner {
 		position: absolute;
@@ -125,18 +113,11 @@
 	}
 }
 
-
-
-// Joint behavior between align and expand.
-[data-type="core/image"][data-expand="screen"] {
-	.wp-block-image__image-wrapper,
-	.wp-block-image__image-wrapper img {
+[data-type="core/image"][data-align="fullScreen"] {
+	figure img {
+		width: 100%;
 		height: 100vh;
 	}
-
-	&:not([data-align="wide"]):not([data-align="full"]) .wp-block-image__image-wrapper {
-		display: inline-block;
-	}
 }
 
 // This is similar to above but for resized unfloated images only, where the markup is different.

diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
@@ -59,31 +59,13 @@
 	}
 }
 
-.wp-block-image .wp-block-image__image-wrapper {
-	-webkit-background-size: cover;
-	background-size: cover;
-	background-repeat: no-repeat;
-	background-position: 50% 50%;
-}
-
 .wp-block-image.expandscreen,
 .wp-block-image .expandscreen {
-	.wp-block-image__image-wrapper {
-		height: 100vh;
-	}
 
 	&.alignnone {
 		display: inline-block;
 	}
 
-	&.aligncenter .wp-block-image__image-wrapper {
-		display: inline-block;
-	}
-
-	&.alignfull .wp-block-image__image-wrapper {
-		width: 100vw;
-	}
-
 	img {
 		height: 100vh;
 		opacity: 0;