Move the toolbar to the right place

WordPress · Apr 16, 2021 · 56fe438 · 56fe438
1 parent 95ffa54
commit 56fe438
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 84 deletions.
diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss
@@ -92,31 +92,6 @@
 	}
 }
 
-// Block toolbar when fixed to the top of the screen.
-.edit-post-header__block-toolbar {
-	height: $block-toolbar-height;
-	.block-editor-block-toolbar .components-toolbar-group,
-	.block-editor-block-toolbar .components-toolbar {
-		border-top: none;
-		border-bottom: none;
-	}
-
-	.is-sidebar-opened & {
-		display: none;
-	}
-
-	.block-editor-block-toolbar__block-parent-selector-wrapper {
-		display: none;
-	}
-
-	@include break-medium {
-		.is-sidebar-opened & {
-			display: block;
-			right: $sidebar-width;
-		}
-	}
-}
-
 .edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle.has-icon {
 	margin-right: $grid-unit-10;
 	// Special dimensions for this button.

diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
@@ -10,7 +10,6 @@ import { PostSavedState, PostPreviewButton } from '@wordpress/editor';
 import { useSelect } from '@wordpress/data';
 import { PinnedItems } from '@wordpress/interface';
 import { useViewportMatch } from '@wordpress/compose';
-import { BlockToolbar } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -25,9 +24,6 @@ import { store as editPostStore } from '../../store';
 
 function Header( { setEntitiesSavedStatesCallback } ) {
 	const {
-		hasFixedToolbar,
-		previewDeviceType,
-		isTemplateMode,
 		hasActiveMetaboxes,
 		isPublishSidebarOpened,
 		isSaving,
@@ -50,9 +46,6 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 		[]
 	);
 
-	const displayBlockToolbar =
-		! isLargeViewport || previewDeviceType !== 'Desktop' || hasFixedToolbar;
-
 	const isLargeViewport = useViewportMatch( 'large' );
 
 	const classes = classnames( 'edit-post-header', {
@@ -104,16 +97,6 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 					) }
 				</div>
 			</div>
-
-			{ displayBlockToolbar && (
-				<div
-					className={ classnames( 'edit-post-header__block-toolbar', {
-						'is-pushed-down': isTemplateMode,
-					} ) }
-				>
-					<BlockToolbar hideDragHandle />
-				</div>
-			) }
 		</div>
 	);
 }

diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
@@ -34,20 +34,11 @@
 }
 
 // Make both the default header toolbar and the toggled top toolbar be full-width.
-.edit-post-header__toolbar,
-.edit-post-header__block-toolbar {
+.edit-post-header__toolbar {
 	display: flex;
 	flex-wrap: wrap;
-}
-
-.edit-post-header__toolbar {
 	height: $header-height;
 	justify-content: space-between;
-	border-bottom: $border-width solid $gray-300;
-}
-
-.edit-post-header__block-toolbar {
-	height: $block-toolbar-height;
 }
 
 .edit-post-header__toolbar-actions {

diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -16,6 +16,7 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	BlockBreadcrumb,
+	BlockToolbar,
 	__experimentalLibrary as Library,
 } from '@wordpress/block-editor';
 import {
@@ -74,6 +75,7 @@ const interfaceLabels = {
 function Layout( { styles } ) {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isHugeViewport = useViewportMatch( 'huge', '>=' );
+	const isLargeViewport = useViewportMatch( 'large' );
 	const {
 		openGeneralSidebar,
 		closeGeneralSidebar,
@@ -94,12 +96,16 @@ function Layout( { styles } ) {
 		showIconLabels,
 		hasReducedUI,
 		showBlockBreadcrumbs,
+		previewDeviceType,
 	} = useSelect( ( select ) => {
 		const editorSettings = select( 'core/editor' ).getEditorSettings();
 		return {
 			hasFixedToolbar: select( editPostStore ).isFeatureActive(
 				'fixedToolbar'
 			),
+			previewDeviceType: select(
+				editPostStore
+			).__experimentalGetPreviewDeviceType(),
 			sidebarIsOpened: !! (
 				select( interfaceStore ).getActiveComplementaryArea(
 					editPostStore.name
@@ -136,7 +142,6 @@ function Layout( { styles } ) {
 	}, [] );
 	const className = classnames( 'edit-post-layout', 'is-mode-' + mode, {
 		'is-sidebar-opened': sidebarIsOpened,
-		'has-fixed-toolbar': hasFixedToolbar,
 		'has-metaboxes': hasActiveMetaboxes,
 		'show-icon-labels': showIconLabels,
 	} );
@@ -176,6 +181,8 @@ function Layout( { styles } ) {
 	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
 		onClose: () => setIsInserterOpened( false ),
 	} );
+	const displayStickyBlockToolbar =
+		! isLargeViewport || previewDeviceType !== 'Desktop' || hasFixedToolbar;
 
 	return (
 		<>
@@ -247,6 +254,11 @@ function Layout( { styles } ) {
 				}
 				content={
 					<>
+						{ displayStickyBlockToolbar && (
+							<div className="edit-post-layout__sticky-block-toolbar">
+								<BlockToolbar hideDragHandle />
+							</div>
+						) }
 						<EditorNotices />
 						{ ( mode === 'text' || ! isRichEditingEnabled ) && (
 							<TextEditor />

diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
@@ -115,3 +115,11 @@
 		height: 100%;
 	}
 }
+
+.edit-post-layout__sticky-block-toolbar:not(:empty) {
+	position: sticky;
+	z-index: 10000;
+	top: 0;
+	background: $white;
+	border-bottom: 1px solid $gray-300;
+}
diff --git a/packages/editor/src/components/post-title/index.js b/packages/editor/src/components/post-title/index.js
@@ -36,32 +36,23 @@ export default function PostTitle() {
 		clearSelectedBlock,
 		insertBlocks,
 	} = useDispatch( 'core/block-editor' );
-	const {
-		isCleanNewPost,
-		title,
-		placeholder,
-		isFocusMode,
-		hasFixedToolbar,
-	} = useSelect( ( select ) => {
-		const {
-			getEditedPostAttribute,
-			isCleanNewPost: _isCleanNewPost,
-		} = select( 'core/editor' );
-		const { getSettings } = select( 'core/block-editor' );
-		const {
-			titlePlaceholder,
-			focusMode,
-			hasFixedToolbar: _hasFixedToolbar,
-		} = getSettings();
-
-		return {
-			isCleanNewPost: _isCleanNewPost(),
-			title: getEditedPostAttribute( 'title' ),
-			placeholder: titlePlaceholder,
-			isFocusMode: focusMode,
-			hasFixedToolbar: _hasFixedToolbar,
-		};
-	} );
+	const { isCleanNewPost, title, placeholder, isFocusMode } = useSelect(
+		( select ) => {
+			const {
+				getEditedPostAttribute,
+				isCleanNewPost: _isCleanNewPost,
+			} = select( 'core/editor' );
+			const { getSettings } = select( 'core/block-editor' );
+			const { titlePlaceholder, focusMode } = getSettings();
+
+			return {
+				isCleanNewPost: _isCleanNewPost(),
+				title: getEditedPostAttribute( 'title' ),
+				placeholder: titlePlaceholder,
+				isFocusMode: focusMode,
+			};
+		}
+	);
 
 	useEffect( () => {
 		if ( ! ref.current ) {
@@ -169,7 +160,6 @@ export default function PostTitle() {
 		{
 			'is-selected': isSelected,
 			'is-focus-mode': isFocusMode,
-			'has-fixed-toolbar': hasFixedToolbar,
 		}
 	);
 	const decodedPlaceholder = decodeEntities( placeholder );

diff --git a/packages/react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css b/packages/react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css
@@ -28,10 +28,6 @@
 }
 
 /* Move the block toolbar to the top */
-.edit-post-header__block-toolbar {
-    top: 0px;
-}
-
 .interface-interface-skeleton {
     top: 0px;
 }