style.scss

.editor-block-list__layout .components-draggable__clone {
	& > .editor-block-list__block > .editor-block-list__block-draggable {
		background: $white; // @todo: ensure this works with themes that invert the color
		box-shadow: $shadow-popover;

		@include break-small {
			left: -$block-parent-side-ui-clearance - $border-width;
			right: -$block-parent-side-ui-clearance - $border-width;

			.editor-block-list__layout & {
				left: -$border-width;
				right: -$border-width;
			}
		}
	}

	// Hide the Block UI when dragging the block
	// This ensures the page scroll properly (no sticky elements)
	.editor-block-contextual-toolbar,
	.editor-block-mover,
	.editor-block-settings-menu {
		// I think important is fine here to avoid over complexing the selector
		display: none !important;
	}
}

.editor-block-list__layout .editor-block-list__block-draggable {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: z-index( '.editor-block-list__block-draggable' );

	> .editor-block-list__block-draggable-inner {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		visibility: hidden;

		// use opacity to work in various editor styles
		background-color: $dark-opacity-light-200;

		.is-dark-theme & {
			background-color: $light-opacity-light-200;
		}

		@include break-small {
			margin: 0 48px;
		}
	}

	&.is-visible > .editor-block-list__block-draggable-inner {
		visibility: visible;
	}

	@include break-small {
		// use a wider available space for hovering/selecting/dragging on top level blocks
		left: -$parent-block-padding - $block-padding;
		right: -$parent-block-padding - $block-padding;

		// use smaller space for hovering/selecting/dragging on child blocks
		.editor-block-list__layout & {
			left: 0;
			right: 0;
		}

		// Full width blocks don't have the place to expand on the side
		.editor-block-list__block[data-align="full"] & {
			left: 0;
			right: 0;
		}
	}


	cursor: move; // Fallback for IE/Edge < 14
	cursor: grab;
}


// Allow Drag & Drop when clicking on the empty area of the mover and the settings menu
.editor-block-list__layout .editor-block-list__block .editor-block-mover,
.editor-block-list__layout .editor-block-list__block .editor-block-settings-menu {
	pointer-events: none;

	// Nested blocks don't have any side affordance for drag and drop
	.editor-block-list__layout &,
	> * {
		pointer-events: auto;
	}
}

.editor-block-list__block {
	&.is-hidden *,
	&.is-hidden > * {
		visibility: hidden;
	}

	.editor-block-list__block-edit .shared-block-edit-panel * {
		z-index: z-index( '.editor-block-list__block-edit .shared-block-edit-panel *' );
	}
}


/**
 * General layout
 */

.editor-block-list__layout {
	// Make room in the main content column for the side UI.
	// The side UI uses negative margins to position itself so as to not affect the block width.
	@include break-small() {
		padding-left: $block-container-side-padding;
		padding-right: $block-container-side-padding;
	}

	// Don't add side padding for nested blocks, and compensate for block padding
	.editor-block-list__block & {
		// Compensate for side UI.
		padding-left: 0;
		padding-right: 0;

		// Compensate for block padding horizontally.
		margin-left: -$block-padding;
		margin-right: -$block-padding;

		// Compensate for block padding.
		margin-top: -$block-padding;
		margin-bottom: -$block-padding;
	}

	// Adjust the spacing of the appender, or the first block, to sit near the title.
	.editor-default-block-appender .editor-default-block-appender__content,
	.editor-block-list__block:first-child .editor-block-list__block-edit {
		margin-top: $block-padding - $block-spacing / 2;
	}

	// Space every block, and the default appender, using margins.
	// This allows margins to collapse, which gives a better representation of how it looks on the frontend.
	.editor-default-block-appender__content,
	.editor-block-list__block .editor-block-list__block-edit,
	.editor-block-list__layout .editor-block-list__block .editor-block-list__block-edit,
	.editor-block-list__layout .editor-default-block-appender .editor-default-block-appender__content { // Explicitly target nested blocks, as those need to override the preceding rule.
		margin-top: $block-padding * 2 + $block-spacing;
		margin-bottom: $block-padding * 2 + $block-spacing;
	}
}

.editor-block-list__layout .editor-block-list__block {
	position: relative;
	padding-left: $block-padding;
	padding-right: $block-padding;

	// Break long strings of text without spaces so they don't overflow the block.
	overflow-wrap: break-word;

	@include break-small() {
		// The block mover needs to stay inside the block to allow clicks when hovering the block
		padding-left: $block-padding + $block-side-ui-padding - $border-width;
		padding-right: $block-padding + $block-side-ui-padding - $border-width;
	}

	/**
	 * Notices
	 */
	 .components-placeholder .components-with-notices-ui {
		margin: -10px 20px 12px 20px;
		width: calc( 100% - 40px );
	 }
	 .components-with-notices-ui {
		margin: 0 0 12px 0;
		width: 100%;

		.notice {
			margin-left: 0px;
			margin-right: 0px;

			p {
				font-size: $default-font-size;
			}
		}
	 }

	/**
	 * Block outline layout
	 */

	.editor-block-list__block-edit {
		position: relative;

		&:before {
			z-index: z-index( '.editor-block-list__block-edit:before' );
			content: '';
			position: absolute;
			outline: $border-width solid transparent;
			transition: outline .1s linear;
			pointer-events: none;

			// Show wider padding for top level blocks.
			right: -$parent-block-padding;
			left: -$parent-block-padding;
			top: -$block-padding;
			bottom: -$block-padding;

			// Show wider padding for top level blocks.
			@include break-small() {
				right: -$parent-block-padding;
				left: -$parent-block-padding;
			}
		}

		// Show smaller padding for child blocks.
		.editor-block-list__block-edit:before {
			right: -$block-padding;
			left: -$block-padding;
			top: -$block-padding;
			bottom: -$block-padding;
		}
	}

	// Selected style
	&.is-selected-parent > .editor-block-list__block-edit:before,
	&.is-selected > .editor-block-list__block-edit:before {
		// use opacity to work in various editor styles
		outline: $border-width solid $dark-opacity-light-500;

		.is-dark-theme & {
			outline-color: $light-opacity-light-500;
		}
	}

	// Hover style
	&.is-hovered > .editor-block-list__block-edit:before {
		outline: $border-width solid theme( outlines );
	}
}


/**
 * Cross-block selection
 */

.editor-block-list__layout .editor-block-list__block {
	::-moz-selection {
		background-color: $blue-medium-highlight;
	}

	::selection {
		background-color: $blue-medium-highlight;
	}

	// selection style for multiple blocks
	&.is-multi-selected *::selection {
		background-color: transparent;
	}

	&.is-multi-selected .editor-block-list__block-edit:before {
		background: $blue-medium-highlight;

		// use opacity to work in various editor styles
		mix-blend-mode: multiply;

		// Collapse extra vertical padding on selection
		top: -$block-padding;
		bottom: -$block-padding;

		.is-dark-theme & {
			mix-blend-mode: soft-light;
		}
	}
}


/**
 * Block styles and alignments
 */

.editor-block-list__layout .editor-block-list__block {

	// Warnings
	 &.has-warning .editor-block-list__block-edit {
		min-height: 250px;

		> :not( .editor-warning ) {
			pointer-events: none;
			user-select: none;
		}
	}

	&.has-warning .editor-block-list__block-edit:after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba( $white, 0.6 );
		background-image: linear-gradient( to bottom, transparent, $white );
	}

	// Appender
	&.is-typing .editor-block-list__empty-block-inserter,
	&.is-typing .editor-block-list__side-inserter {
		opacity: 0;
	}

	.editor-block-list__empty-block-inserter,
	.editor-block-list__side-inserter {
		opacity: 1;
		transition: opacity 0.2s;
	}

	// Shared blocks
	&.is-shared > .editor-block-list__block-edit:before {
		// use opacity to work in various editor styles
		outline: $border-width dashed $dark-opacity-light-500;

		.is-dark-theme & {
			outline-color: $light-opacity-light-500;
		}
	}

	// Alignments
	&[data-align="left"],
	&[data-align="right"] {
		// Without z-index, won't be clickable as "above" adjacent content.
		z-index: z-index( '.editor-block-list__block {core/image aligned left or right}' );
		width: 100%;

		// When images are floated, the block itself should collapse to zero height.
		margin-bottom: 0;
		height: 0;

		// Hide block outline when an image is floated.
		.editor-block-list__block-edit {
			&:before {
				content: none;
			}
		}

		// Keep a 1px margin to compensate for the border/outline.
		.editor-block-contextual-toolbar {
			margin-bottom: 1px;
		}
	}

	// Left
	&[data-align="left"] {
		// This is in the editor only; the image should be floated on the frontend.
		.editor-block-list__block-edit {
			/*!rtl:begin:ignore*/
			float: left;
			margin-right: 2em;
			/*!rtl:end:ignore*/
		}
	}

	// Right
	&[data-align="right"] {
		// This is in the editor only; the image should be floated on the frontend.
		.editor-block-list__block-edit {
			/*!rtl:begin:ignore*/
			float: right;
			margin-left: 2em;
			/*!rtl:end:ignore*/
		}

		.editor-block-toolbar {
			/*!rtl:ignore*/
			float: right;
		}
	}

	// Wide and full-wide
	&[data-align="full"],
	&[data-align="wide"] {
		clear: both;

		// Without z-index, the block toolbar will be below an adjecent float
		z-index: z-index( '.editor-block-list__block {core/image aligned wide or fullwide}' );

		// Mover and settings above
		> .editor-block-mover,
		> .editor-block-settings-menu {
			// This moves the menu up by the height of the button + border + padding.
			top: -$block-side-ui-width - $block-padding - $block-side-ui-clearance;
			bottom: auto;
			min-height: 0;
			height: auto;
			width: auto;
			z-index: inherit;

			&:before {
				content: none;
			}
		}

		> .editor-block-settings-menu {
			width: $block-side-ui-width;
			flex-direction: row;
		}

		> .editor-block-mover .editor-block-mover__control,
		> .editor-block-settings-menu > * {
			float: left;
		}

		// There is no side UI clearance on full-wide elements, so they are simply not draggable on the sides
		> .editor-block-list__block-draggable {
			left: 0;
			right: 0;
		}

		// Position hover label on the right
		> .editor-block-list__breadcrumb {
			right: -$border-width;
		}

		// Hide mover until wide breakpoints, or it might be covered by toolbar
		> .editor-block-mover {
			display: none;
		}

		@include break-wide() {
			> .editor-block-mover {
				display: block;
			}
		}
	}

	// Wide
	&[data-align="wide"] {
		// Position hover label on the right
		> .editor-block-list__breadcrumb {
			right: -$block-padding;
		}

		// Position ellipsis.
		> .editor-block-settings-menu {
			right: -$block-padding + $block-side-ui-clearance;
		}

		// Position mover
		> .editor-block-mover {
			left: -$block-padding + $border-width;
		}
	}

	// Full-wide
	&[data-align="full"] {

		// Position hover label on the right
		> .editor-block-list__breadcrumb {
			right: -$border-width;
		}

		// Compensate for main container padding and subtract border.
		@include break-small() {
			margin-left: -$block-side-ui-width - $block-padding - $block-side-ui-clearance - $border-width;
			margin-right: -$block-side-ui-width - $block-padding - $block-side-ui-clearance - $border-width;
		}

		> .editor-block-list__block-edit {
			margin-left: -$block-padding;
			margin-right: -$block-padding;

			@include break-small() {
				margin-left: -$block-side-ui-padding - $block-padding;
				margin-right: -$block-side-ui-padding - $block-padding;
			}

			// This explicitly sets the width of the block, to override
			// `width: fit-content` from the image block.
			figure {
				width: 100%;
			}
		}

		> .editor-block-list__block-edit:before {
			left: 0;
			right: 0;
			border-left-width: 0;
			border-right-width: 0;
		}

		// Position ellipsis.
		> .editor-block-settings-menu {
			right: $block-side-ui-clearance;
		}

		// Position mover
		> .editor-block-mover {
			left: $border-width;
		}
	}

	// Clear floats
	&[data-clear="true"] {
		float: none;
	}

	// Dropzones
	.editor-block-drop-zone {
		top: -4px;
		bottom: -3px;
		margin: 0 $block-padding;
	}

	// Hide appender shortcuts in nested blocks
	// This essentially duplicates the mobile styles for the appender component
	// It would be nice to be able to use element queries in that component instead https://github.com/tomhodgins/element-queries-spec
	.editor-block-list__layout {
		.editor-inserter-with-shortcuts {
			display: none;
		}

		.editor-block-list__empty-block-inserter,
		.editor-default-block-appender .editor-inserter {
			left: auto;
			right: $item-spacing;
		}
	}
}


/**
 * Left and right side UI; Unified toolbar on Mobile
 */

.editor-block-list__block {

	// Left and right block settings and mover.
	> .editor-block-settings-menu,
	> .editor-block-mover {
		position: absolute;
		width: $block-side-ui-width + $block-side-ui-clearance;
		// stretch to fill half of the available space to increase hoverable area
		height: 100%;
		max-height: $block-side-ui-width * 4;
	}

	// Position depending on whether selected or not.
	> .editor-block-settings-menu,
	> .editor-block-mover {
		top: -$block-padding - $border-width;
	}

	// Elevate when block is selected or hovered.
	@include break-small() {
		&.is-multi-selected,
		&.is-selected,
		&.is-hovered {
			.editor-block-settings-menu,
			.editor-block-mover {
				z-index: z-index( '.editor-block-list__block.is-{selected,hovered} .editor-block-{settings-menu,mover}' );
			}
		}
	}

	// Right side UI
	> .editor-block-settings-menu {
		padding-left: $block-side-ui-clearance;

		// Position for top level blocks
		right: -$block-side-ui-width - $block-side-ui-clearance - $block-parent-side-ui-clearance;

		// Position for nested blocks
		.editor-block-list__block & {
			right: -$block-side-ui-width - $block-side-ui-clearance;
		}

		// Mobile
		display: none;
		@include break-small() {
			display: flex;
			flex-direction: column;
		}
	}

	// Left side UI
	> .editor-block-mover {
		padding-right: $block-side-ui-clearance;

		// Position for top level blocks
		left: -$block-side-ui-width - $block-side-ui-clearance - $block-parent-side-ui-clearance;

		// Position for nested blocks
		.editor-block-list__block & {
			left: -$block-side-ui-width - $block-side-ui-clearance;
		}

		// Mobile
		display: none;
		@include break-small() {
			display: block;
		}
	}
}


/**
 * Mobile unified toolbar.
 */

.editor-block-list__block {

	// Show side UI inline below the block on mobile.
	.editor-block-list__block-mobile-toolbar {
		display: flex;
		flex-direction: row;
		// Make room for the height of the block toolbar above.
		margin-top: $item-spacing + $block-toolbar-height - $block-padding;
		margin-right: -$block-padding;
		margin-left: -$block-padding;
		border-top: $border-width solid $light-gray-500;
		height: $block-toolbar-height;

		transform: translateY( #{ $block-padding + $border-width } );

		@include break-small() {
			display: none;
		}

		// Show a shadow below the selected block to imply separation.
		box-shadow: $shadow-below-only;
		@include break-small() {
			box-shadow: none;
		}

		// Movers, inserter, trash, and ellipsis.
		.editor-inserter {
			position: relative;
			left: auto;
			top: auto;
			margin: 0;
		}

		.editor-inserter__toggle,
		.editor-block-mover__control,
		.editor-block-settings-menu .components-button {
			width: $icon-button-size;
			height: $icon-button-size;
			border-radius: $button-style__radius-roundrect;
			padding: 3px;
			margin: 0;
			justify-content: center;
			align-items: center;

			.dashicon {
				margin: auto;
			}
		}

		// Movers
		.editor-block-mover {
			display: flex;
			margin-right: auto;

			.editor-inserter,
			.editor-block-mover__control {
				float: left;
			}
		}

		// Block Settings
		.editor-block-settings-menu > * {
			float: left;
		}
	}

	// Reset negative margins on mobile for full-width.
	&[data-align="full"] .editor-block-list__block-mobile-toolbar {
		margin-left: 0;
		margin-right: 0;
	}
}


/**
 * In-Canvas Inserter
 */

.editor-block-list .editor-inserter {
	margin: $item-spacing;
	cursor: move; // Fallback for IE/Edge < 14
	cursor: grab;
}

// Insertion point (includes inbetween inserter and insertion indicator)
.editor-block-list__insertion-point {
	position: relative;
	z-index: z-index( '.editor-block-list__insertion-point' );
}

.editor-block-list__insertion-point-indicator {
	position: absolute;
	top: calc( 50% - $border-width );
	height: 2px;
	left: 0;
	right: 0;
	background: theme( primary );
}

.editor-block-list__insertion-point-inserter {
	// Don't show on mobile.
	display: none;
	@include break-mobile() {
		display: flex;
	}

	position: absolute;
	bottom: auto;
	left: 0;
	right: 0;
	// Matches the whole empty space between two blocks
	height: $block-padding * 2;
	justify-content: center;

	// Position above block.
	top: -$block-padding;

	// Show a clickable plus.
	.editor-block-list__insertion-point-button {
		margin-top: -4px;
		border-radius: 50%;
		color: $blue-medium-focus;
		background: $white;
		height: $block-padding * 2 + 8px;
		width: $block-padding * 2 + 8px;

		&:not(:disabled):not([aria-disabled="true"]):hover {
			box-shadow: none;
		}
	}

	// Hide both the button until hovered.
	opacity: 0;
	transition: opacity 0.1s linear 0.1s;

	&:hover,
	&.is-visible {
		opacity: 1;
	}
}

// Don't show the sibling inserter before the selected block.
.edit-post-layout:not( .has-fixed-toolbar ) {
	// The child selector is necessary for this to work properly in nested contexts.
	.is-selected > .editor-block-list__insertion-point > .editor-block-list__insertion-point-inserter {
		opacity: 0;
		pointer-events: none;

		&:hover,
		&.is-visible {
			opacity: 1;
			pointer-events: auto;
		}
	}
}

.editor-block-list__block {
	> .editor-block-list__insertion-point {
		position: absolute;
		top: -$block-padding - $block-spacing / 2;
		// Matches the whole empty space between two blocks
		height: $block-padding * 2;
		bottom: auto;
		left: -$border-width;
		right: -$border-width;
	}

	&[data-align="full"] > .editor-block-list__insertion-point {
		left: 0;
		right: 0;
	}
}

.editor-block-list__block .editor-block-list__block-html-textarea {
	display: block;
	margin: 0;
	width: 100%;
	border: none;
	outline: none;
	box-shadow: none;
	resize: none;
	overflow: hidden;
	font-family: $editor-html-font;
	font-size: $text-editor-font-size;
	line-height: 150%;
	transition: padding .2s linear;

	&:focus {
		box-shadow: none;
	}
}


/**
 * Block Toolbar when contextual.
 */

.editor-block-list__block .editor-block-contextual-toolbar {
	position: sticky;
	z-index: z-index( '.editor-block-contextual-toolbar' );
	white-space: nowrap;
	text-align: left;
	pointer-events: none;

	// Position toolbar below the block on mobile.
	position: absolute;
	bottom: $block-toolbar-height - $block-padding;
	left: 0;
	right: 0;

	// Paint the borders on the toolbar itself on mobile.
	border-top: 1px solid $light-gray-500;
	.components-toolbar {
		border-top: none;
		border-bottom: none;

	}

	@include break-small() {
		border-top: none;
		.components-toolbar {
			border-top: 1px solid $light-gray-500;
			border-bottom: 1px solid $light-gray-500;
		}
	}

	// Floated items have special needs for the contextual toolbar position.
	.editor-block-list__block[data-align="left"] &,
	.editor-block-list__block[data-align="right"] & {
		margin-bottom: $border-width;
		margin-top: -$block-toolbar-height - $border-width;
	}

	// Make block toolbar full width on mobile.
	margin-left: -$border-width;
	margin-right: -$border-width;

	@include break-small() {
		margin-left: -$parent-block-padding - $parent-block-padding - $border-width;
		margin-right: -$parent-block-padding - $parent-block-padding - $border-width;

		// Position toolbar for nested contexts.
		.editor-block-list__block & {
			margin-left: -$parent-block-padding - $block-padding - $border-width;
			margin-right: -$parent-block-padding - $block-padding - $border-width;
		}

		// Except for wide elements, this causes a horizontal scrollbar.
		[data-align="full"] & {
			margin-left: -$block-padding - $block-side-ui-width;
			margin-right: -$block-padding - $block-side-ui-width;
		}
	}

	// Reset pointer-events on children.
	& > * {
		pointer-events: auto;
	}
}

// Enable toolbar footprint collapsing
.editor-block-contextual-toolbar {
	// Position the contextual toolbar above the block.
	.editor-block-list__block & {
		@include break-small() {
			bottom: auto;
			left: auto;
			right: auto;
			box-shadow: none;

			// Move the block toolbar out of the flow using translate.
			transform: translateY( -$block-toolbar-height -$block-padding -$border-width );

			// IE11 does not support `position: sticky`.
			@supports ( position: sticky ) {
				position: sticky;

				// Compensate for translate, so the sticky sticks to the top.
				top: $block-toolbar-height + $block-padding;
			}

			// This is an important one. Because the toolbar is sticky, it's part of the flow.
			// It behaves as relative, in other words, until it reaches an edge and then behaves as fixed.
			// But by applying a float, we take it out of this flow. The benefit is that we don't need to compensate for margins.
			// In turn, this allows margins on sibling elements to collapse to parent elements.
			float: left;
		}
	}

	.editor-block-list__block[data-align="right"] & {
		@include break-small() {
			float: right;
		}
	}
}

// Position the block toolbar when contextual.
.editor-block-contextual-toolbar .editor-block-toolbar {
	width: 100%;

	// Hide right border on desktop, where the .components-toolbar instead has a right border.
	@include break-small() {
		border-right: none;
	}

	// This prevents floats from messing up the position.
	@include break-small() {
		position: absolute;
		left: 0;
	}

	.editor-block-list__block[data-align="right"] & {
		/*!rtl:begin:ignore*/
		left: auto;
		right: 0;
		/*!rtl:end:ignore*/
	}

	.editor-block-list__block[data-align="left"] & {
		/*!rtl:begin:ignore*/
		right: auto;
		left: 0;
		/*!rtl:end:ignore*/
	}


	@include break-small() {
		width: auto;
	}
}


/**
 * Hover label
 */

.editor-block-list__breadcrumb {
	position: absolute;
	line-height: 1;
	z-index: z-index( '.editor-block-list__breadcrumb' );

	// Position in the top right of the border.
	right: -$block-parent-side-ui-clearance;
	top: -$block-padding - $border-width;

	// Nested
	.editor-block-list__block-edit & {
		right: $parent-block-padding - $block-padding - $block-parent-side-ui-clearance;
	}

	.components-toolbar {
		padding: 0;
		border: none;
		background: transparent;
		line-height: 1;
		font-family: $default-font;
		font-size: 11px;
		padding: 4px 4px;
		background: theme( outlines );
		color: $white;

		// Animate in
		.editor-block-list__block:hover & {
			@include fade_in( .1s );
		}
	}
}

.editor-block-list__descendant-arrow:before {
	content: '→';
	display: inline-block;
	padding: 0 4px;

	.rtl & {
		content: '←';
	}
}

.editor-block-list__block {
	@include break-small {
		// Increase the hover and selection area around blocks.
		// This makes the blue hover line and the settings button appear even if
		// the mouse cursor is technically outside the block.
		// This improves usability by making it possible to click somewhat outside
		// the block and select it. (eg. A fuzzy click target.)
		&:before {
			bottom: 0;
			content: '';
			left: -$parent-block-padding - $block-padding;
			position: absolute;
			right: -$parent-block-padding - $block-padding;
			top: 0;
		}

		// Remove the fuzzy click area effect set above on nested blocks.
		// It should only applies to top-level blocks; applying this rule to
		// nested blocks will result in difficult-to-use and possibly overlapping
		// click targets.
		& &:before {
			left: 0;
			right: 0;
		}

		// Don't use this for full-wide blocks, as there's no clearance to accommodate extra area on the side.
		&[data-align="full"]:before {
			content: none;
		}
	}
}