editor.scss

.wp-block-image {
	position: relative;

	&.is-transient img {
		@include loading_fade;
	}

	figcaption img {
		display: inline;
	}
}

// This is necessary for the editor resize handles to accurately work on a non-floated, non-resized, small image.
.wp-block-image {
	.block-library-image__resizer {
		display: inline-block;

		img {
			display: block;
			width: 100%;
		}
	}
}

.block-library-image__resize-handler-right,
.block-library-image__resize-handler-bottom,
.block-library-image__resize-handler-left {
	@include resize-handler-container();

	.wp-block-image.is-focused & {
		display: block;
		z-index: z-index(".block-library-image__resize-handlers");
	}
}

// Draw the visible handle
.block-library-image__resize-handler-right::before,
.block-library-image__resize-handler-bottom::before,
.block-library-image__resize-handler-left::before {
	@include resize-handler();
}

/*!rtl:begin:ignore*/
// The unfortunate use of `!important` in the CSS below is because the
// re-resizable package, which we use for our resize functionality,
// applies an inline `style` attribute that cannot be disabled.
// See https://github.com/WordPress/gutenberg/pull/10331

.block-library-image__resize-handler-right {
	top: calc(50% - #{$resize-handler-container-size / 2}) !important;
	right: calc(#{$resize-handler-container-size / 2} * -1) !important;
}

.block-library-image__resize-handler-left {
	top: calc(50% - #{$resize-handler-container-size / 2}) !important;
	left: calc(#{$resize-handler-container-size / 2} * -1) !important;
}

.block-library-image__resize-handler-bottom {
	bottom: calc(#{$resize-handler-container-size / 2} * -1) !important;
	left: calc(50% - #{$resize-handler-container-size / 2}) !important;
}
/*!rtl:end:ignore*/

.editor-block-list__block[data-type="core/image"][data-align="center"] {
	.wp-block-image {
		margin-left: auto;
		margin-right: auto;
	}

	&[data-resized="false"] .wp-block-image > div {
		margin-left: auto;
		margin-right: auto;
	}
}

.edit-post-sidebar .block-library-image__dimensions {
	margin-bottom: 1em;

	.block-library-image__dimensions__row {
		display: flex;
		justify-content: space-between;

		.block-library-image__dimensions__width,
		.block-library-image__dimensions__height {
			margin-bottom: 0.5em;

			// Fix the text and placeholder text being misaligned in Safari
			input {
				line-height: 1.25;
			}
		}

		.block-library-image__dimensions__width {
			margin-right: 5px;
		}

		.block-library-image__dimensions__height {
			margin-left: 5px;
		}
	}
}

.editor-block-list__block[data-type="core/image"] .editor-block-toolbar .editor-url-input__button-modal {
	position: absolute;
	left: 0;
	right: 0;
	margin: -$border-width 0;

	@include break-small() {
		margin: -$border-width;
	}
}

// Although the float markup is different in the editor compared to the frontend,
// this CSS uses the same technique to allow floats in a wide images context.
// That is, the block retains its centering and max-width, and a child inside
// is floated instead of the block itself.
[data-type="core/image"][data-align="center"],
[data-type="core/image"][data-align="left"],
[data-type="core/image"][data-align="right"] {
	.editor-block-list__block-edit {
		figure {
			margin: 0;
			display: table;
		}

		// This maps to the figcaption on the frontend.
		.editor-rich-text {
			display: table-caption;
			caption-side: bottom;
		}
	}
}

[data-type="core/image"][data-align="wide"],
[data-type="core/image"][data-align="full"] {
	figure img {
		width: 100%;
	}
}

// This is similar to above but for resized unfloated images only, where the markup is different.
[data-type="core/image"] .editor-block-list__block-edit figure.is-resized {
	margin: 0;
	display: table;

	// This maps to the figcaption on the frontend.
	.editor-rich-text {
		display: table-caption;
		caption-side: bottom;
	}
}