style.scss

/**
 * Insertion Point.
 */

.block-editor-block-list__insertion-point {
	position: absolute;
}

.block-editor-block-list__insertion-point-indicator {
	position: absolute;
	background: var(--wp-admin-theme-color);

	.block-editor-block-list__insertion-point.is-vertical > & {
		top: 50%;
		height: $border-width;
	}

	.block-editor-block-list__insertion-point.is-horizontal > & {
		top: 0;
		right: 0;
		left: 50%;
		width: $border-width;
	}
}

// This is the clickable plus.
.block-editor-block-list__insertion-point-inserter {
	// Don't show on mobile.
	display: none;
	position: absolute;
	@include break-mobile() {
		display: flex;
	}

	justify-content: center;

	top: calc(50% - #{$button-size-small * 0.5});
	left: calc(50% - #{$button-size-small * 0.5});
}

.block-editor-block-list__block-popover-inserter {
	position: absolute;
	top: -9999em;
	margin-bottom: $block-padding;

	&.is-visible {
		position: static;
	}
}

// Sibling inserter / "inbetweenserter".
.block-editor-block-list__empty-block-inserter,
.block-editor-default-block-appender,
.block-editor-block-list__insertion-point-inserter,
.block-editor-block-list__block-popover-inserter,
.edit-site-block-list-exploded__inserter {
	.block-editor-inserter__toggle.components-button.has-icon {
		// Basic look
		background: $gray-900;
		border-radius: $radius-block-ui;
		color: $white;
		padding: 0;

		// Special dimensions for this button.
		min-width: $button-size-small;
		height: $button-size-small;

		&:hover {
			color: $white;
			background: var(--wp-admin-theme-color);
		}
	}
}
.edit-site-block-list-exploded__inserter,
.block-editor-block-list__insertion-point-inserter {
	.block-editor-inserter__toggle.components-button.has-icon {
		background: var(--wp-admin-theme-color);
		&:hover {
			background: $gray-900;
		}
	}
}

/**
 * Block Toolbar when contextual.
 */

.block-editor-block-contextual-toolbar {
	// Block UI appearance.
	display: inline-flex;
	border: $border-width solid $gray-900;
	border-radius: $radius-block-ui;
	background-color: $white;

	.block-editor-block-toolbar .components-toolbar-group,
	.block-editor-block-toolbar .components-toolbar {
		border-right-color: $gray-900;
	}

	&.is-fixed {
		position: sticky;
		top: 0;
		width: 100%;
		z-index: z-index(".block-editor-block-list__block-popover");
		// Fill up when empty
		min-height: $block-toolbar-height;
		display: block;

		border: none;
		border-bottom: $border-width solid $gray-200;
		border-radius: 0;

		.block-editor-block-toolbar .components-toolbar-group,
		.block-editor-block-toolbar .components-toolbar {
			border-right-color: $gray-200;
		}
	}

	.block-editor-block-mover-button {
		overflow: hidden;
	}

	// Extra specificity to override standard toolbar button styles.
	.block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button {
		min-width: $block-toolbar-height*0.5;
		width: $block-toolbar-height*0.5;

		svg {
			min-width: $block-toolbar-height*0.5;
		}
	}
}

// Position mover arrows for both toolbars.
.block-editor-block-contextual-toolbar .block-editor-block-mover:not(.is-horizontal) {
	// Position SVGs.
	.block-editor-block-mover-button {
		&:focus::before {
			left: 0 !important;
			min-width: 0;
			width: 100%;
		}
	}

	@include break-small() {
		.block-editor-block-mover-button.is-up-button svg {
			top: 5px;
		}

		.block-editor-block-mover-button.is-down-button svg {
			bottom: 5px;
		}
	}
}

/**
 * Block Label for Navigation/Selection Mode
 */

.block-editor-block-list__block-selection-button {
	display: inline-flex;
	padding: 0 $grid-unit-15;
	z-index: z-index(".block-editor-block-list__block-selection-button");

	// Dark block UI appearance.
	border-radius: $radius-block-ui;
	background-color: $gray-900;

	font-size: $default-font-size;
	height: $block-toolbar-height;

	.block-editor-block-list__block-selection-button__content {
		margin: auto;
		display: inline-flex;
		align-items: center;

		> .components-flex__item {
			margin-right: $grid-unit-15 * 0.5;
		}
	}
	.components-button.has-icon.block-selection-button_drag-handle {
		cursor: grab;
		padding: 0;
		height: $grid-unit-30;
		min-width: $grid-unit-30;
		margin-left: -2px;

		// Drag handle is smaller than the others.
		svg {
			min-width: 18px;
			min-height: 18px;
		}
	}

	.block-editor-block-icon {
		font-size: $default-font-size;
		color: $white;
		height: $block-toolbar-height;
	}

	// The button here has a special style to appear as a toolbar.
	.components-button {
		min-width: $button-size;
		color: $white;
		height: $block-toolbar-height;

		// When button is focused, it receives a box-shadow instead of the border.
		&:focus {
			box-shadow: none;
			border: none;
		}

		&:active {
			color: $white;
		}
		display: flex;
	}
	.block-selection-button_select-button.components-button {
		padding: 0;
	}
}

/**
 * Popovers.
 */

.block-editor-block-list__insertion-point-popover.is-without-arrow {
	z-index: z-index(".block-editor-block-list__insertion-point-popover");
	position: absolute;
	pointer-events: none;

	* {
		pointer-events: none;
	}

	.is-with-inserter {
		pointer-events: all;

		* {
			pointer-events: all;
		}
	}

	.components-popover__content.components-popover__content {
		// Needs specificity.
		background: none;
		border: none;
		box-shadow: none;
		overflow-y: visible;
		margin-left: 0;
	}
}

// Hide the popover block editor list while dragging.
// Using a hacky animation to delay hiding the element.
// It's needed because if we hide the element immediately upon dragging,
// the dragging will end immediately since there are no elements to be dragged anymore.
// Fortunately, we only have to keep it visible for a frame immediately after dragging,
// after that, we can safely hide it altogether.
@keyframes hide-during-dragging {
	to {
		position: fixed;
		transform: translate(9999px, 9999px);
	}
}

.components-popover.block-editor-block-list__block-popover {
	z-index: z-index(".block-editor-block-list__block-popover");
	position: absolute;

	.components-popover__content {
		margin: 0 !important;
		min-width: auto;
		width: max-content;
		background: none;
		border: none;
		box-shadow: none;
		overflow-y: visible;

		// Allow clicking through the toolbar holder.
		pointer-events: none;

		.block-editor-block-list__block-selection-button,
		.block-editor-block-contextual-toolbar,
		.block-editor-block-list__empty-block-inserter {
			pointer-events: all;
		}

		// Position the block toolbar.
		.block-editor-block-list__block-selection-button,
		.block-editor-block-contextual-toolbar {
			margin-top: $grid-unit-15;
			margin-bottom: $grid-unit-15;
		}
	}

	// Hide the block toolbar if the insertion point is shown.
	&.is-insertion-point-visible {
		visibility: hidden;
	}

	.is-dragging-components-draggable & {
		opacity: 0;
		// Use a minimal duration to delay hiding the element, see hide-during-dragging animation for more details.
		// It's essential to hide the toolbar/popover so that `dragEnter` events can pass through them to the underlying elements.
		animation: hide-during-dragging 1ms linear forwards;
	}
}

.is-dragging-components-draggable .components-tooltip {
	display: none;
}


// Size multiple sequential buttons to be optically balanced.
// Icons are 36px, as set by a 24px icon and 12px padding.
.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot, // When a plugin adds to a slot, the segment has a `components-toolbar` class.
.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar, // The nesting order is sometimes reversed.
.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown, // Targets unique markup for the "Replace" button.
.block-editor-block-toolbar .components-toolbar-group {
	padding-left: $grid-unit-15 * 0.5; // 6px.
	padding-right: $grid-unit-15 * 0.5;

	.components-button,
	.components-button.has-icon.has-icon {
		min-width: $block-toolbar-height - $grid-unit-15;
		padding-left: $grid-unit-15 * 0.5; // 6px.
		padding-right: $grid-unit-15 * 0.5;

		svg {
			min-width: $button-size-small; // This is the optimal icon size, and we size the whole button after this.
		}

		&::before {
			left: 2px;
			right: 2px;
		}
	}
}