Merge pull request #4803 from WordPress/polish/code-editor

Polish code editor

edit-post/assets/stylesheets/_z-index.scss

@@ -24,7 +24,6 @@ $z-layers: (
 	'.blocks-gallery-item__inline-menu': 20,
 	'.editor-block-settings-menu__popover': 20, // Below the header
 	'.edit-post-header': 30,
-	'.edit-post-text-editor__formatting': 30,
 	'.wp-block-image__resize-handlers': 1, // Resize handlers above sibling inserter
 
 	// Show drop zone above most standard content, but below any overlays

edit-post/components/modes/text-editor/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { PostTextEditor, PostTextEditorToolbar, PostTitle } from '@wordpress/editor';
+import { PostTextEditor, PostTitle } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -11,9 +11,6 @@ import './style.scss';
 function TextEditor() {
 	return (
 		<div className="edit-post-text-editor">
-			<div className="edit-post-text-editor__formatting">
-				<PostTextEditorToolbar />
-			</div>
 			<div className="edit-post-text-editor__body">
 				<PostTitle />
 				<PostTextEditor />

edit-post/components/modes/text-editor/style.scss

@@ -1,48 +1,3 @@
-.edit-post-text-editor__formatting {
-	background: $white;
-	border-bottom: 1px solid $light-gray-500;
-	min-height: $admin-sidebar-width-collapsed;
-	top: $admin-bar-height-big + $header-height;
-
-	@include break-medium() {
-		top: $admin-bar-height + $header-height;
-	}
-
-	margin-left: -20px;
-	margin-right: -20px;
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-
-	@include break-small() {
-		left: 0px;
-		right: 0px;
-		margin-left: 0;
-		margin-right: 0;
-		position: fixed;
-		z-index: z-index( '.edit-post-text-editor__formatting' );
-	}
-
-	.auto-fold.sticky-menu &,
-	.auto-fold & {
-		@include break-medium() {
-			left: $admin-sidebar-width-collapsed;
-		}
-
-		@include break-large() {
-			left: $admin-sidebar-width;
-		}
-	}
-
-	.folded & {
-		left: $admin-sidebar-width-collapsed;
-	}
-
-	.sticky-menu & {
-		left: $admin-sidebar-width;
-	}
-}
-
 .edit-post-text-editor__body {
 	padding-top: 40px;
 
@@ -55,7 +10,7 @@
 	}
 }
 
-/* Use padding to center text in the textarea, this allows you to click anywhere to focus it */
+// Use padding to center text in the textarea, this allows you to click anywhere to focus it
 .edit-post-text-editor {
 	padding-left: 20px;
 	padding-right: 20px;
@@ -65,14 +20,21 @@
 		padding-right: calc( 50% - #{ $text-editor-max-width / 2 } );
 	}
 
-	.edit-post-post-text-editor {
-		padding-top: 20px;
-		padding-bottom: 0;
-	}
-
 	.edit-post-post-text-editor__toolbar {
 		width: 100%;
 		max-width: $text-editor-max-width;
 		margin: 0 auto;
 	}
+
+	// Always show outlines in code editor
+	.editor-post-title div,
+	.editor-post-text-editor {
+		border: 1px solid $light-gray-500;
+	}
+
+	.editor-post-text-editor {
+		padding: $block-padding;
+		min-height: 200px;
+		line-height: 1.8;
+	}
 }

edit-post/components/sidebar/style.scss

@@ -101,10 +101,6 @@
 }
 
 /* Text Editor specific */
-.edit-post-layout.is-sidebar-opened .edit-post-text-editor__formatting {
-	margin-right: $sidebar-width;
-}
-
 .components-panel__header.edit-post-sidebar__panel-tabs {
 	justify-content: flex-start;
 	padding-left: 0;

editor/components/index.js

@@ -41,7 +41,6 @@ export { default as PostSwitchToDraftButton } from './post-switch-to-draft-butto
 export { default as PostTaxonomies } from './post-taxonomies';
 export { default as PostTaxonomiesCheck } from './post-taxonomies/check';
 export { default as PostTextEditor } from './post-text-editor';
-export { default as PostTextEditorToolbar } from './post-text-editor/toolbar';
 export { default as PostTitle } from './post-title';
 export { default as PostTrash } from './post-trash';
 export { default as PostTrashCheck } from './post-trash/check';