diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 4f0afd9c8583f9..075c228eb3e84e 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -92,21 +92,22 @@ function Layout( { - { ( mode === 'text' || ! isRichEditingEnabled ) && } +
+ { ( mode === 'text' || ! isRichEditingEnabled ) && } + { isRichEditingEnabled && mode === 'visual' && } +
+ +
+
+ +
+ { isMobileViewport && sidebarIsOpened && } +
{ isRichEditingEnabled && mode === 'visual' && ( - <> - -
- -
- +
+ +
) } -
- -
-
- -
{ publishSidebarOpened ? ( - { - isMobileViewport && sidebarIsOpened && - } ) } diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index f1fc0b7b25626b..67d0d1a04b3ed5 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -104,31 +104,6 @@ } } - // 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; @@ -241,10 +216,7 @@ // Stretch to mimic outline padding on desktop. @include break-medium() { - display: inline-flex; - position: fixed; - bottom: 0; - right: 0; + display: flex; background: $white; height: $icon-button-size-small; padding: 0 $grid-size; @@ -258,4 +230,29 @@ } } -@include editor-left(".edit-post-layout__footer"); +.edit-post-layout__scrollable-container { + // 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; + } + + // Pad the scroll box so content on the bottom can be scrolled up. + padding-bottom: 50vh; + @include break-small { + padding-bottom: 0; + } +} diff --git a/packages/edit-post/src/components/text-editor/style.scss b/packages/edit-post/src/components/text-editor/style.scss index 234eb46917b247..f7696bb4ee1959 100644 --- a/packages/edit-post/src/components/text-editor/style.scss +++ b/packages/edit-post/src/components/text-editor/style.scss @@ -1,30 +1,5 @@ -.edit-post-text-editor__body { - padding-top: $grid-size * 5; - - @include break-small() { - padding-top: ($grid-size * 5) + $admin-bar-height-big; - } - - @include break-medium() { - padding-top: $grid-size * 5; - - body.is-fullscreen-mode & { - padding-top: $grid-size * 5; - } - } -} - .edit-post-text-editor { width: 100%; - max-width: calc(100% - #{$grid-size-large * 2}); - margin-left: $grid-size-large; - margin-right: $grid-size-large; - - @include break-small() { - max-width: $content-width; - margin-left: auto; - margin-right: auto; - } // Always show outlines in code editor .editor-post-title__block { @@ -67,34 +42,41 @@ } } - .editor-post-text-editor { - padding: $block-padding; - min-height: 200px; - line-height: 1.8; - } - // Make room for toolbar. padding-top: $block-controls-height + $grid-size; +} - // Exit Code Editor toolbar. - .edit-post-text-editor__toolbar { - position: absolute; - top: $grid-size; - left: 0; - right: 0; - height: $block-controls-height; - line-height: $block-controls-height; - padding: 0 $grid-size 0 $grid-size-large; - display: flex; +// Exit Code Editor toolbar. +.edit-post-text-editor__toolbar { + position: absolute; + top: $grid-size; + left: 0; + right: 0; + height: $block-controls-height; + line-height: $block-controls-height; + padding: 0 $grid-size 0 $grid-size-large; + display: flex; + + h2 { + margin: 0 auto 0 0; + font-size: $default-font-size; + color: $dark-gray-500; + } - h2 { - margin: 0 auto 0 0; - font-size: $default-font-size; - color: $dark-gray-500; - } + .components-icon-button svg { + order: 1; + } +} - .components-icon-button svg { - order: 1; - } +.edit-post-text-editor__body { + max-width: calc(100% - #{$grid-size-large * 2}); + margin-left: $grid-size-large; + margin-right: $grid-size-large; + padding-top: $grid-size * 5; + + @include break-small() { + max-width: $content-width; + margin-left: auto; + margin-right: auto; } }