From 481026c98e60222ff55de093a1df8817f3862cba Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Wed, 15 Aug 2018 09:55:52 +0200 Subject: [PATCH 1/8] Fix input and focus style for permalink slug --- edit-post/assets/stylesheets/main.scss | 1 + packages/editor/src/components/post-permalink/style.scss | 5 +++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/edit-post/assets/stylesheets/main.scss b/edit-post/assets/stylesheets/main.scss index fbc3062666e880..63f488d1363907 100644 --- a/edit-post/assets/stylesheets/main.scss +++ b/edit-post/assets/stylesheets/main.scss @@ -129,6 +129,7 @@ body.gutenberg-editor-page { // Override core input styles to provide styles consistent with Gutenberg. // Upstream ticket for redesigned input and styles in general: https://core.trac.wordpress.org/ticket/44749 // Upstream ticket for redesigned checkbox: https://core.trac.wordpress.org/ticket/35596 +.editor-post-permalink, .edit-post-sidebar, .editor-post-publish-panel, .editor-block-list__block, diff --git a/packages/editor/src/components/post-permalink/style.scss b/packages/editor/src/components/post-permalink/style.scss index 30e1600bfd6a06..793d344eae689b 100644 --- a/packages/editor/src/components/post-permalink/style.scss +++ b/packages/editor/src/components/post-permalink/style.scss @@ -70,9 +70,10 @@ text-overflow: ellipsis; } -.editor-post-permalink-editor__edit { +.editor-post-permalink input[type="text"].editor-post-permalink-editor__edit { min-width: 20%; - margin: 0 5px; + margin: 0 3px; + padding: 2px 4px; } .editor-post-permalink-editor__suffix { From 63a23a7fcc7281c91244f4a0214925048113a036 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Wed, 15 Aug 2018 10:10:29 +0200 Subject: [PATCH 2/8] Fix regression with horizontal scrollbar on mobile. --- .../src/components/block-list/style.scss | 29 +++++++++++++------ 1 file changed, 20 insertions(+), 9 deletions(-) diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss index 2374128fc47d78..468edccafdad67 100644 --- a/packages/editor/src/components/block-list/style.scss +++ b/packages/editor/src/components/block-list/style.scss @@ -198,9 +198,9 @@ transition: outline 0.1s linear; pointer-events: none; - // Show wider padding for top level blocks. - right: -$parent-block-padding; - left: -$parent-block-padding; + // Go edge tp edge on mobile. + right: -$block-padding; + left: -$block-padding; top: -$block-padding; bottom: -$block-padding; @@ -780,11 +780,18 @@ > .editor-block-list__insertion-point { position: absolute; top: -$block-padding - $block-spacing / 2; - // Matches the whole empty space between two blocks + + // Matches the whole empty space between two blocks. height: $block-padding * 2; bottom: auto; - left: -$border-width; - right: -$border-width; + left: 0; + right: 0; + + // Stack with block borders beyond mobile. + @include break-small() { + left: -$border-width; + right: -$border-width; + } } &[data-align="full"] > .editor-block-list__insertion-point { @@ -854,8 +861,8 @@ } // Make block toolbar full width on mobile. - margin-left: -$border-width; - margin-right: -$border-width; + margin-left: 0; + margin-right: 0; @include break-small() { margin-left: -$parent-block-padding - $parent-block-padding - $border-width; @@ -962,9 +969,13 @@ z-index: z-index(".editor-block-list__breadcrumb"); // Position in the top right of the border. - right: -$block-parent-side-ui-clearance; + right: 0; top: -$block-padding - $border-width; + @include break-small() { + right: -$block-parent-side-ui-clearance; + } + // Nested .editor-block-list__block-edit & { right: $parent-block-padding - $block-padding - $block-parent-side-ui-clearance; From d069ac50521b9e04c4cde4768609ac7391f64914 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Wed, 15 Aug 2018 11:27:14 +0200 Subject: [PATCH 3/8] Use serious flexing to scale the permalink editor. --- .../src/components/post-permalink/editor.js | 2 +- .../src/components/post-permalink/style.scss | 28 +++++++++++++++++-- 2 files changed, 27 insertions(+), 3 deletions(-) diff --git a/packages/editor/src/components/post-permalink/editor.js b/packages/editor/src/components/post-permalink/editor.js index 3185fd2abe6ea6..669e18cf4e868b 100644 --- a/packages/editor/src/components/post-permalink/editor.js +++ b/packages/editor/src/components/post-permalink/editor.js @@ -49,7 +49,7 @@ class PostPermalinkEditor extends Component { className="editor-post-permalink-editor" onSubmit={ this.onSavePermalink } > - + { prefix } diff --git a/packages/editor/src/components/post-permalink/style.scss b/packages/editor/src/components/post-permalink/style.scss index 793d344eae689b..68130acd552b3b 100644 --- a/packages/editor/src/components/post-permalink/style.scss +++ b/packages/editor/src/components/post-permalink/style.scss @@ -55,9 +55,29 @@ display: inline-flex; align-items: center; + .editor-post-permalink-editor__container { + flex: 0 1 100%; + display: flex; + overflow: hidden; // This enables serious flex shrinking. + padding: $border-width 0; // Necessary for the overflow to not crop the focus style. + + .editor-post-permalink-editor__prefix { + flex: 1 1 auto; + + @include break-small { + flex: 1 0 auto; + } + } + + .editor-post-permalink-editor__edit { + flex: 1 1 100%; + } + } + // Higher specificity required to override core margin styles. .editor-post-permalink-editor__save { margin-left: auto; + flex: 0 1 auto; } } @@ -71,12 +91,16 @@ } .editor-post-permalink input[type="text"].editor-post-permalink-editor__edit { - min-width: 20%; + // Input fields are born with inherent widths. + // By supplying both a (any) width and a min-width, we allow it to scale in a flex container. + min-width: 10%; + width: 100%; margin: 0 3px; padding: 2px 4px; } .editor-post-permalink-editor__suffix { color: $dark-gray-300; - margin-right: 10px; + margin-right: 6px; + flex: 0 0 0%; } From bab5c54ac7fc92f2e3ecc387a86630523a8ef697 Mon Sep 17 00:00:00 2001 From: Matthew Riley MacPherson Date: Wed, 15 Aug 2018 10:37:48 +0100 Subject: [PATCH 4/8] chore: Fix typo --- packages/editor/src/components/block-list/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss index 468edccafdad67..ec81328b641db1 100644 --- a/packages/editor/src/components/block-list/style.scss +++ b/packages/editor/src/components/block-list/style.scss @@ -198,7 +198,7 @@ transition: outline 0.1s linear; pointer-events: none; - // Go edge tp edge on mobile. + // Go edge-to-edge on mobile. right: -$block-padding; left: -$block-padding; top: -$block-padding; From ab3c6283f87996a3764f65f12424dd816bea5850 Mon Sep 17 00:00:00 2001 From: Matthew Riley MacPherson Date: Wed, 15 Aug 2018 10:39:06 +0100 Subject: [PATCH 5/8] chore: Wording tweak --- packages/editor/src/components/post-permalink/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/post-permalink/style.scss b/packages/editor/src/components/post-permalink/style.scss index 68130acd552b3b..6202742f1ff574 100644 --- a/packages/editor/src/components/post-permalink/style.scss +++ b/packages/editor/src/components/post-permalink/style.scss @@ -91,7 +91,7 @@ } .editor-post-permalink input[type="text"].editor-post-permalink-editor__edit { - // Input fields are born with inherent widths. + // Input fields are created with inherent widths. // By supplying both a (any) width and a min-width, we allow it to scale in a flex container. min-width: 10%; width: 100%; From f5c3696b191263bc9309f28b215d4e801e5cde63 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Wed, 15 Aug 2018 12:40:33 +0200 Subject: [PATCH 6/8] Clarify comments. --- packages/editor/src/components/block-list/style.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss index ec81328b641db1..a23f31a224d10c 100644 --- a/packages/editor/src/components/block-list/style.scss +++ b/packages/editor/src/components/block-list/style.scss @@ -784,10 +784,12 @@ // Matches the whole empty space between two blocks. height: $block-padding * 2; bottom: auto; + + // Go edge to edge on mobile. left: 0; right: 0; - // Stack with block borders beyond mobile. + // Beyond mobile, make sure the toolbar overlaps the hover style. @include break-small() { left: -$border-width; right: -$border-width; From f0e3b9d5a885f29d76dbd4e1b29f9684c117c035 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 16 Aug 2018 09:21:25 +0200 Subject: [PATCH 7/8] Address feedback. --- packages/editor/src/components/post-permalink/editor.js | 2 +- packages/editor/src/components/post-permalink/style.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/post-permalink/editor.js b/packages/editor/src/components/post-permalink/editor.js index 669e18cf4e868b..17391c86c87b69 100644 --- a/packages/editor/src/components/post-permalink/editor.js +++ b/packages/editor/src/components/post-permalink/editor.js @@ -49,7 +49,7 @@ class PostPermalinkEditor extends Component { className="editor-post-permalink-editor" onSubmit={ this.onSavePermalink } > - + { prefix } diff --git a/packages/editor/src/components/post-permalink/style.scss b/packages/editor/src/components/post-permalink/style.scss index 6202742f1ff574..8f3139f7a5f2e4 100644 --- a/packages/editor/src/components/post-permalink/style.scss +++ b/packages/editor/src/components/post-permalink/style.scss @@ -55,7 +55,7 @@ display: inline-flex; align-items: center; - .editor-post-permalink-editor__container { + .editor-post-permalink__editor-container { flex: 0 1 100%; display: flex; overflow: hidden; // This enables serious flex shrinking. From 4c35997d1c1347f00005d5b4e98386a0ab804c24 Mon Sep 17 00:00:00 2001 From: Matthew Riley MacPherson Date: Thu, 16 Aug 2018 10:31:37 +0100 Subject: [PATCH 8/8] chore: Fix failing CSS Lint test --- packages/editor/src/components/post-permalink/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/post-permalink/style.scss b/packages/editor/src/components/post-permalink/style.scss index 8f3139f7a5f2e4..dfe7b7270f9db9 100644 --- a/packages/editor/src/components/post-permalink/style.scss +++ b/packages/editor/src/components/post-permalink/style.scss @@ -91,7 +91,7 @@ } .editor-post-permalink input[type="text"].editor-post-permalink-editor__edit { - // Input fields are created with inherent widths. + // Input fields are created with inherent widths. // By supplying both a (any) width and a min-width, we allow it to scale in a flex container. min-width: 10%; width: 100%;