diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index 48b5506e452f2..04dda01ddaede 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -44,7 +44,6 @@ import BlockHtml from './block-html';
import BlockBreadcrumb from './breadcrumb';
import BlockContextualToolbar from './block-contextual-toolbar';
import BlockMultiControls from './multi-controls';
-import BlockMobileToolbar from './block-mobile-toolbar';
import BlockInsertionPoint from './insertion-point';
import IgnoreNestedEvents from '../ignore-nested-events';
import InserterWithShortcuts from '../inserter-with-shortcuts';
@@ -102,6 +101,7 @@ function BlockListBlock( {
enableAnimation,
isNavigationMode,
enableNavigationMode,
+ isLargeViewport,
} ) {
// Random state used to rerender the component if needed, ideally we don't need this
const [ , updateRerenderState ] = useState( {} );
@@ -410,12 +410,12 @@ function BlockListBlock( {
const shouldShowContextualToolbar =
! isNavigationMode &&
! hasFixedToolbar &&
+ isLargeViewport &&
! showEmptyBlockSideInserter &&
(
( isSelected && ( ! isTypingWithinBlock || isCaretWithinFormattedText ) ) ||
isFirstMultiSelected
);
- const shouldShowMobileToolbar = ! isNavigationMode && shouldAppearSelected;
// Insertion point can only be made visible if the block is at the
// the extent of a multi-selection, or not in a multi-selection.
@@ -589,9 +589,6 @@ function BlockListBlock( {
] }
</BlockCrashBoundary>
{ !! hasError && <BlockCrashWarning /> }
- { shouldShowMobileToolbar && (
- <BlockMobileToolbar clientId={ clientId } moverDirection={ moverDirection } />
- ) }
</IgnoreNestedEvents>
</div>
{ showInserterShortcuts && (
diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js
index 70d8ff2435b90..78fb6484f8124 100644
--- a/packages/block-editor/src/components/block-list/block.native.js
+++ b/packages/block-editor/src/components/block-list/block.native.js
@@ -23,7 +23,7 @@ import { __, sprintf } from '@wordpress/i18n';
import styles from './block.scss';
import BlockEdit from '../block-edit';
import BlockInvalidWarning from './block-invalid-warning';
-import BlockMobileToolbar from './block-mobile-toolbar';
+import BlockMobileToolbar from '../block-mobile-toolbar';
import FloatingToolbar from './block-mobile-floating-toolbar';
import Breadcrumbs from './breadcrumb';
import NavigateUpSVG from './nav-up-icon';
diff --git a/packages/block-editor/src/components/block-list/block-mobile-toolbar.js b/packages/block-editor/src/components/block-mobile-toolbar/index.js
similarity index 69%
rename from packages/block-editor/src/components/block-list/block-mobile-toolbar.js
rename to packages/block-editor/src/components/block-mobile-toolbar/index.js
index 8af64ec12c021..2e1b9a13fc2bc 100644
--- a/packages/block-editor/src/components/block-list/block-mobile-toolbar.js
+++ b/packages/block-editor/src/components/block-mobile-toolbar/index.js
@@ -7,12 +7,10 @@ import { ifViewportMatches } from '@wordpress/viewport';
* Internal dependencies
*/
import BlockMover from '../block-mover';
-import VisualEditorInserter from '../inserter';
function BlockMobileToolbar( { clientId, moverDirection } ) {
return (
- <div className="editor-block-list__block-mobile-toolbar block-editor-block-list__block-mobile-toolbar">
- <VisualEditorInserter />
+ <div className="block-editor-block-mobile-toolbar">
<BlockMover clientIds={ [ clientId ] } __experimentalOrientation={ moverDirection } />
</div>
);
diff --git a/packages/block-editor/src/components/block-list/block-mobile-toolbar.native.js b/packages/block-editor/src/components/block-mobile-toolbar/index.native.js
similarity index 100%
rename from packages/block-editor/src/components/block-list/block-mobile-toolbar.native.js
rename to packages/block-editor/src/components/block-mobile-toolbar/index.native.js
diff --git a/packages/block-editor/src/components/block-list/block-mobile-toolbar.native.scss b/packages/block-editor/src/components/block-mobile-toolbar/index.native.scss
similarity index 100%
rename from packages/block-editor/src/components/block-list/block-mobile-toolbar.native.scss
rename to packages/block-editor/src/components/block-mobile-toolbar/index.native.scss
diff --git a/packages/block-editor/src/components/block-mobile-toolbar/style.scss b/packages/block-editor/src/components/block-mobile-toolbar/style.scss
new file mode 100644
index 0000000000000..a57cd99fdd77f
--- /dev/null
+++ b/packages/block-editor/src/components/block-mobile-toolbar/style.scss
@@ -0,0 +1,29 @@
+.block-editor-block-mobile-toolbar {
+ display: flex;
+ flex-direction: row;
+ border-right: $border-width solid $light-gray-500;
+
+ .block-editor-block-mover__control {
+ width: $icon-button-size;
+ height: $icon-button-size;
+ border-radius: $radius-round-rectangle;
+ padding: 3px;
+ margin: 0;
+ justify-content: center;
+ align-items: center;
+
+ .dashicon {
+ margin: auto;
+ }
+ }
+
+ // Movers
+ .block-editor-block-mover {
+ display: flex;
+ margin-right: auto;
+
+ .block-editor-block-mover__control {
+ float: left;
+ }
+ }
+}
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index 83edd7814a0ed..1e165c2001211 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -7,6 +7,7 @@ import { withSelect } from '@wordpress/data';
* Internal dependencies
*/
import BlockSwitcher from '../block-switcher';
+import BlockMobileToolbar from '../block-mobile-toolbar';
import MultiBlocksSwitcher from '../block-switcher/multi-blocks-switcher';
import BlockControls from '../block-controls';
import BlockFormatControls from '../block-format-controls';
@@ -30,6 +31,7 @@ function BlockToolbar( { blockClientIds, isValid, mode } ) {
<div className="editor-block-toolbar block-editor-block-toolbar">
{ mode === 'visual' && isValid && (
<>
+ { blockClientIds.length === 1 && <BlockMobileToolbar clientId={ blockClientIds[ 0 ] } /> }
<BlockSwitcher clientIds={ blockClientIds } />
<BlockControls.Slot bubblesVirtually className="block-editor-block-toolbar__slot" />
<BlockFormatControls.Slot bubblesVirtually className="block-editor-block-toolbar__slot" />
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 3169be962d3b3..dc7228def35e3 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -6,6 +6,7 @@
@import "./components/block-breadcrumb/style.scss";
@import "./components/block-card/style.scss";
@import "./components/block-compare/style.scss";
+@import "./components/block-mobile-toolbar/style.scss";
@import "./components/block-mover/style.scss";
@import "./components/block-navigation/style.scss";
@import "./components/block-preview/style.scss";
diff --git a/packages/edit-post/src/components/editor-regions/style.scss b/packages/edit-post/src/components/editor-regions/style.scss
index 5bad0c7918bc6..b3a0f2493fce0 100644
--- a/packages/edit-post/src/components/editor-regions/style.scss
+++ b/packages/edit-post/src/components/editor-regions/style.scss
@@ -1,44 +1,77 @@
+// We have to hide admin-bar in editor on mobile, in order to make the Mobile Safari experience bearable.
+// These two rules need to be moved to somewhere appropriate, and the !importants removed.
+#wpadminbar {
+ display: none;
+ @include break-small() {
+ display: initial;
+ }
+}
+#wpbody {
+ padding-top: 0 !important;
+ @include break-small() {
+ padding-top: initial !important;
+ }
+}
+
.edit-post-editor-regions {
display: flex;
flex-direction: column;
height: 100%;
max-height: 100%;
- position: relative;
- // On Mobile keep a margin for the header and admin header
- // as both of these are fixed
+ // Fill the entire screen on Mobile.
+ // We don't show the WP-adminbar, as editing on Mobile Safari is barely usable with it present.
+ position: fixed;
top: 0;
- @include break-medium() {
- margin-top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
- // On Desktop position the container as fixed to avoid scroll bleed.
- position: fixed;
- top: $admin-bar-height;
- left: 0;
- right: 0;
- bottom: 0;
+ // Unhide the admin-bar.
+ @include break-small() {
height: auto;
+ top: $admin-bar-height-big;
+ }
+
+ // Adjust to admin-bar going small.
+ @include break-medium() {
+ top: $admin-bar-height;
+
.is-fullscreen-mode & {
top: 0;
}
}
}
+
@include editor-left(".edit-post-editor-regions");
.edit-post-editor-regions__body {
flex-grow: 1;
display: flex;
- // On Mobile the header is fixed to keep HTML as scrollable.
- @include break-medium() {
- overflow: auto;
- }
+ // Even on Mobile, we choose to scroll this element on its own.
+ // This helps enable a fixed-to-top toolbar that makes the editing experience
+ // on Mobile Safari usable.
+ // Unfortunately an issue still exists where if you swipe the top toolbar
+ // or beyond the bottom of the page when the soft keyboard is showing, you scroll
+ // the body element and can scroll the toolbar out of view.
+ // This is still preferable, though, as it allows the editor to function at all.
+ overflow: auto;
+
+ // In future versions of Mobile Safari, hopefully overscroll-behavior will be supported.
+ // This allows us to disallow the scroll-chaining and rubber-banding that is currently
+ // is the cause of the issue outlined above.
+ // In other words, the following behavior doesn't yet work in Safari, but if/when
+ // it is added, it should take care of the issue.
+ // See also: https://drafts.csswg.org/css-overscroll/
+ overscroll-behavior-y: none;
}
.edit-post-editor-regions__content {
flex-grow: 1;
- // On Mobile the header is fixed to keep HTML as scrollable.
+ // Beyond the medium breakpoint, we allow the sidebar.
+ // The sidebar should scroll independently, so enable scroll here also.
@include break-medium() {
overflow: auto;
}
@@ -78,12 +111,8 @@
position: sticky;
top: 0;
+ // Cancel the fixed positioning used on Mobile.
@include break-small() {
- top: $admin-bar-height-big; // The top bar is fixed on this breakpoint.
- }
-
- @include break-medium() {
- // Cancel the fixed positionning used in mobile.
position: initial;
top: 0;
}
diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
index d02a82156fcfe..928f77df04571 100644
--- a/packages/edit-post/src/components/header/header-toolbar/index.js
+++ b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -40,7 +40,7 @@ function HeaderToolbar( { hasFixedToolbar, isLargeViewport, showInserter, isText
<EditorHistoryRedo />
<TableOfContents hasOutlineItemsDisabled={ isTextModeEnabled } />
<BlockNavigationDropdown isDisabled={ isTextModeEnabled } />
- { hasFixedToolbar && isLargeViewport && (
+ { ( hasFixedToolbar || ! isLargeViewport ) && (
<div className="edit-post-header-toolbar__block-toolbar">
<BlockToolbar />
</div>
diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss
index 12a9337b67aed..0f8c0ac306bfc 100644
--- a/packages/edit-post/src/components/header/header-toolbar/style.scss
+++ b/packages/edit-post/src/components/header/header-toolbar/style.scss
@@ -33,6 +33,10 @@
min-height: $block-toolbar-height;
border-bottom: $border-width solid $light-gray-500;
+ &:empty {
+ display: none;
+ }
+
.block-editor-block-toolbar .components-toolbar {
border-top: none;
border-bottom: none;