style.scss

.edit-post-layout,
.edit-post-layout__content {
	height: 100%;
}

.edit-post-layout {
	position: relative;
	box-sizing: border-box;

	// Beyond the mobile breakpoint, the editor bar is fixed, so make room for it eabove the layout content.
	@include break-small {
		padding-top: $header-height;
	}

	// Beyond the medium breakpoint, the main scrolling area itself becomes fixed so the padding then becomes
	// unnecessary, but until then it's still needed.
}

.edit-post-layout__metaboxes:not(:empty) {
	border-top: $border-width solid $light-gray-500;
	margin-top: 10px;
	padding: 10px 0 10px;
	clear: both;

	.edit-post-meta-boxes-area {
		margin: auto 20px;
	}
}

// Adjust the position of the notices
.edit-post-layout__content .components-editor-notices__snackbar {
	position: fixed;
	right: 0;
	bottom: 20px;
	padding-left: 16px;
	padding-right: 16px;
}
@include editor-left(".edit-post-layout__content .components-editor-notices__snackbar");

.edit-post-layout__content {
	display: flex;
	flex-direction: column;

	// These rules are specific to mobile and small breakpoints.
	min-height: 100%;
	position: relative;

	// We scroll the main editing canvas, the sidebar, and the block library separately to prevent scroll bleed.
	// Because the navigation sidebar menu has "flyout" menus, we can't yet, scroll that independently, but as soon
	// as we can, we should simplify these rules.
	// In the mean time, if a user has a small screen and lots of plugin-added menu items in the navigation menu,
	// they have to be able to scroll. To accommodate the flyout menus, we scroll the `body` element for this.
	@include break-medium() {
		// Because the body element scrolls the navigation sidebar, we have to use position fixed here.
		// Otherwise you would scroll the editing canvas out of view when you scroll the sidebar.
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;

		// Because this is scoped to break-medium and larger, the admin-bar is always this height.
		top: $header-height + $admin-bar-height;

		// Sadly, `position: fixed;` do not inherit boundaries from a relative parent. Due to that we have to compensate using `calc`.
		min-height: calc(100% - #{ $header-height + $admin-bar-height });
		height: auto; // This overrides the 100% height the element inherits from line 3.

		// In this matrix, we compensate for any configurations for the presence and width of the navigation sidebar.
		// This is similar to the code in the @editor-left mixin, but uses margins instead.
		// Because we are beyond the medium breakpoint, we only have to worry about folded, auto-folded, and default.
		margin-left: $admin-sidebar-width;

		// Auto fold is when on smaller breakpoints, nav menu auto colllapses.
		body.auto-fold & {
			margin-left: $admin-sidebar-width-collapsed;

			@include break-large() {
				margin-left: $admin-sidebar-width;
			}
		}

		// Sidebar manually collapsed.
		body.folded & {
			margin-left: $admin-sidebar-width-collapsed;
		}

		// Provide special rules for fullscreen mode.
		body.is-fullscreen-mode & {
			margin-left: 0 !important;
			top: $header-height;
		}
	}

	// For users with the Top Toolbar option enabled, special rules apply to the height of the content area.
	.has-fixed-toolbar & {
		// From the medium breakpoint it sits below the editor bar.
		@include break-medium() {
			top: $header-height + $admin-bar-height + $block-controls-height;
		}

		// From the xlarge breakpoint it sits in the editor bar.
		@include break-xlarge() {
			top: $header-height + $admin-bar-height;
		}
	}

	// Pad the scroll box so content on the bottom can be scrolled up.
	padding-bottom: 50vh;
	@include break-small {
		padding-bottom: 0;
	}

	// On mobile the main content (html or body) area has to scroll.
	// If, like we do on the desktop, scroll an element (.edit-post-layout__content) you can invoke
	// the overscroll bounce on the non-scrolling container, causing for a frustrating scrolling experience.
	// The following rule enables this scrolling beyond the mobile breakpoint, because on the desktop
	// breakpoints scrolling an isolated element helps avoid scroll bleed.
	@include break-small() {
		overflow-y: auto;
	}
	-webkit-overflow-scrolling: touch;

	// This rule ensures that if you've scrolled to the end of a container,
	// then pause, then keep scrolling downwards, the browser doesn't try to scroll
	// the parent element, usually invoking a "bounce" effect and then preventing you
	// from scrolling upwards until you pause again.
	// This is only necessary beyond the small breakpoint because that's when the scroll container changes.
	@include break-small() {
		overscroll-behavior-y: none;
	}

	.edit-post-visual-editor {
		flex: 1 1 auto;

		// In IE11 flex-basis: 100% cause a bug where the metaboxes area overlap with the content area.
		// But it works as expected without it.
		// The flex-basis is needed for the other browsers to make sure the content area is full-height.
		@supports (position: sticky) {
			flex-basis: 100%;
		}
	}

	.edit-post-layout__metaboxes {
		flex-shrink: 0;
	}
}

.edit-post-layout .editor-post-publish-panel {
	position: fixed;
	z-index: z-index(".edit-post-layout .edit-post-post-publish-panel");
	top: $admin-bar-height-big;
	bottom: 0;
	right: 0;
	left: 0;
	overflow: auto;

	@include break-medium() {
		top: $admin-bar-height;
		left: auto;
		width: $sidebar-width;
		border-left: $border-width solid $light-gray-500;
		transform: translateX(+100%);
		animation: edit-post-post-publish-panel__slide-in-animation 0.1s forwards;
		@include reduce-motion("animation");

		body.is-fullscreen-mode & {
			top: 0;
		}

		// Keep it open on focus to avoid conflict with navigate-regions animation.
		.is-focusing-regions & {
			transform: translateX(0%);
		}
	}
}

@keyframes edit-post-post-publish-panel__slide-in-animation {
	100% {
		transform: translateX(0%);
	}
}

.edit-post-layout .editor-post-publish-panel__header-publish-button {
	// Match the size of the Publish... button.
	.components-button.is-large {
		height: 33px;
		line-height: 32px;
	}

	// Size the spacer flexibly to allow for different button lengths.
	.editor-post-publish-panel__spacer {
		display: inline-flex;
		flex: 0 1 52px; // This number is approximative to keep the publish button at the same position when opening the panel
	}
}

.edit-post-toggle-publish-panel {
	position: fixed;
	top: -9999em;
	bottom: auto;
	left: auto;
	right: 0;
	z-index: z-index(".edit-post-toggle-publish-panel");
	padding: 10px 10px 10px 0;
	width: $sidebar-width;
	background-color: $white;

	&:focus {
		top: auto;
		bottom: 0;
	}

	.edit-post-toggle-publish-panel__button {
		width: auto;
		height: auto;
		display: block;
		font-size: 14px;
		font-weight: 600;
		margin: 0 0 0 auto;
		padding: 15px 23px 14px;
		line-height: normal;
		text-decoration: none;
		outline: none;
		background: #f1f1f1;
		color: theme(secondary);

		&:focus {
			position: fixed;
			top: auto;
			right: 10px;
			bottom: 10px;
			left: auto;
		}
	}
}