editor.scss

// Adding `figure` to the selector increases the specificity above the global
// styles specificity, which is levelled at 0-1-0. We should figure out why
// `figure` is needed.
:root :where(figure.wp-block-gallery) {
	// Override the default list style type _only in the editor_
	// to avoid :not() selector specificity issues.
	// See https://github.com/WordPress/gutenberg/pull/10358

	display: block;

	> .blocks-gallery-caption {
		flex: 0 0 100%;
	}

	> .blocks-gallery-media-placeholder-wrapper {
		flex-basis: 100%;
	}

	.wp-block-image {
		.components-notice.is-error {
			display: block;
		}
		.components-notice__content {
			margin: 4px 0;
		}
		.components-notice__dismiss {
			position: absolute;
			top: 0;
			right: 5px;
		}
	}

	// @todo this deserves a refactor, by being moved to the toolbar.
	.block-editor-media-placeholder.is-appender {
		.components-placeholder__label {
			display: none;
		}
		.block-editor-media-placeholder__button {
			margin-bottom: 0;
		}
	}
	.block-editor-media-placeholder {
		margin: 0;
		.components-placeholder__label {
			display: flex;
		}
		figcaption {
			z-index: 2;
		}
	}

	// Shown while image is being uploaded
	.components-spinner {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -9px;
		margin-left: -9px;
	}
}

/**
 * Gallery inspector controls settings.
 */
.gallery-settings-buttons {
	.components-button:first-child {
		margin-right: 8px;
	}
}

.gallery-image-sizes {
	.components-base-control__label {
		margin-bottom: 4px;
	}

	.gallery-image-sizes__loading {
		display: flex;
		align-items: center;
		color: $gray-700;
		font-size: $helptext-font-size;
	}

	.components-spinner {
		margin: 0 8px 0 4px;
	}
}

/**
 * Deprecated css past this point. This can be removed once all galleries are migrated
 * to V2.
 */
.blocks-gallery-item {
	// Hide the focus outline that otherwise briefly appears when selecting a block.
	figure:not(.is-selected):focus,
	img:focus {
		outline: none;
	}

	figure.is-selected {

		&::before {
			box-shadow: 0 0 0 $border-width $white inset, 0 0 0 3px var(--wp-admin-theme-color) inset;
			content: "";
			// Shown in Windows 10 high contrast mode.
			outline: 2px solid transparent;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 1;
			pointer-events: none;
		}
	}

	figure.is-transient img {
		opacity: 0.3;
	}

	.is-selected .block-library-gallery-item__inline-menu {
		display: inline-flex;
	}

	.block-editor-media-placeholder {
		margin: 0;
		height: 100%;

		.components-placeholder__label {
			display: flex;
		}
	}
}

.block-library-gallery-item__inline-menu {
	display: none;
	position: absolute;
	top: -2px;
	margin: $grid-unit-10;
	z-index: z-index(".block-library-gallery-item__inline-menu");
	transition: box-shadow 0.2s ease-out;
	@include reduce-motion("transition");
	border-radius: $radius-small;
	background: $white;
	border: $border-width solid $gray-900;

	&:hover {
		box-shadow: $elevation-x-small;
	}

	@include break-small() {
		// Use smaller buttons to fit when there are many columns.
		.columns-7 &,
		.columns-8 & {
			padding: $grid-unit-05 * 0.5;
		}
	}

	.components-button.has-icon {
		&:not(:focus) {
			border: none;
			box-shadow: none;
		}

		@include break-small() {
			// Use smaller buttons to fit when there are many columns.
			.columns-7 &,
			.columns-8 & {
				padding: 0;
				width: inherit;
				height: inherit;
			}
		}
	}

	&.is-left {
		left: -2px;
	}

	&.is-right {
		right: -2px;
	}
}

.wp-block-gallery ul.blocks-gallery-grid {
	padding: 0;
	// Some themes give all <ul> default margin instead of padding.
	margin: 0;
}

.wp-block-update-gallery-modal {
	@include break-small() {
		max-width: $break-mobile;
	}
}

.wp-block-update-gallery-modal-buttons {
	display: flex;
	justify-content: flex-end;
	gap: $grid-unit-15;
}