From 85b03132e31b99f79f678691c80bf58a269b15db Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 1 Feb 2018 10:51:25 +0100 Subject: [PATCH 1/2] Polish code editor We've neglected this piece for a while, because we know there will be likely be some CodeMirror involved. But that's no reason not to make small improvements in the meantime. This PR: - Removes the dummy quicktag buttons that did nothing. - Shows outlines around the title and body always. - Fix a typo that caused the textarea to be small. - Unify the paddings. - Relax the lineheight. --- edit-post/assets/stylesheets/_z-index.scss | 1 - .../components/modes/text-editor/index.js | 5 +- .../components/modes/text-editor/style.scss | 64 ++++--------------- edit-post/components/sidebar/style.scss | 4 -- 4 files changed, 14 insertions(+), 60 deletions(-) diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss index eb9dedd1a6a745..2c6e2e29a32516 100644 --- a/edit-post/assets/stylesheets/_z-index.scss +++ b/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 diff --git a/edit-post/components/modes/text-editor/index.js b/edit-post/components/modes/text-editor/index.js index a83f0b00cd2e9d..3a3e69b2176ef8 100644 --- a/edit-post/components/modes/text-editor/index.js +++ b/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 (
-
- -
diff --git a/edit-post/components/modes/text-editor/style.scss b/edit-post/components/modes/text-editor/style.scss index c4d427d06a21ce..39e7c8cb1943b6 100644 --- a/edit-post/components/modes/text-editor/style.scss +++ b/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; + } } diff --git a/edit-post/components/sidebar/style.scss b/edit-post/components/sidebar/style.scss index 025d0d14b420fb..d7de73101db4e2 100644 --- a/edit-post/components/sidebar/style.scss +++ b/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; From 05c3b95c5dcf1eac44e5ebf73c9bbf5a74c87cd3 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 1 Feb 2018 10:54:25 +0100 Subject: [PATCH 2/2] Actually remove toolbar. --- editor/components/index.js | 1 - editor/components/post-text-editor/toolbar.js | 21 ------------------- 2 files changed, 22 deletions(-) delete mode 100644 editor/components/post-text-editor/toolbar.js diff --git a/editor/components/index.js b/editor/components/index.js index 287247ed712ee2..c13e32820817dc 100644 --- a/editor/components/index.js +++ b/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'; diff --git a/editor/components/post-text-editor/toolbar.js b/editor/components/post-text-editor/toolbar.js deleted file mode 100644 index 5026e1c187828c..00000000000000 --- a/editor/components/post-text-editor/toolbar.js +++ /dev/null @@ -1,21 +0,0 @@ -function PostTextEditorToolbar() { - return ( -
- - - - - - - - - - - - - -
- ); -} - -export default PostTextEditorToolbar;