Try: Refactor contextual toolbar to work better with floats (#11357)

* Try: Refactor contextual toolbar to work better with floats This is rather big surgery this late in the phase. There may be dragons, and it may be necessary to punt this to phase 2. This PR seeks to fix #4764 by doing a number of things: - Move the contextual toolbar into the block edit div, which is the one we float. This helps make it _connected_ to the content. - Add some complex clearing rules so we avoid many of the gnarly situations where a selected block after a floated block has a weirdly tall size. - Fixes so a paragraph block that follows a float does behave as it will on the frontend (i.e. won't clear), but also has a toolbar that is correctly positioned. This moving around of things caused subsequent issues, which means this PR also: - Fixes the toolbar appearance on mobile. - Improves upon the appearance of the toolbar on floated items on mobile. - Fixes hover label positioning, not only so they work with floats, but are positioned correctly as a result of this refactor. - Fixes issues with wide and fullwide toolbar positioning. * Use block navigator to select the blocks * Remove block and inline level rules This removes the rules that were specific to inline blocks or block level blocks and levels the playing field. The benefit is no special rules. The downside is that a block following a float still might not perfectly match the user expectation. This PR also fixes issues with mobile toolbars. Finally, it makes the block toolbar not float. This rule used to be necessary, but for whatever reason it no longer appears to be. * Fix rebase issue. * Fix classic block.
WordPress · Nov 9, 2018 · 4338dcf · 4338dcf
1 parent 5da5962
commit 4338dcf
Show file tree

Hide file tree

Showing 6 changed files with 164 additions and 130 deletions.
diff --git a/packages/block-library/src/classic/editor.scss b/packages/block-library/src/classic/editor.scss
@@ -216,9 +216,12 @@ div[data-type="core/freeform"] .editor-block-contextual-toolbar + div {
 // So we move it to the right, and make room for it.
 @include break-small() {
 	.editor-block-list__block[data-type="core/freeform"] {
+		.editor-block-switcher__no-switcher-icon {
+			display: none;
+		}
 		.editor-block-contextual-toolbar {
 			float: right;
-			margin-right: -$block-side-ui-clearance - $border-width;
+			margin-right: $icon-button-size - $block-padding + $border-width;
 			transform: translateY(-#{ $block-padding - $border-width });
 			top: $block-padding;
 

diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
@@ -69,10 +69,10 @@
 			}
 
 			@include break-small() {
-				> .editor-block-contextual-toolbar {
+				> .editor-block-list__block-edit > .editor-block-contextual-toolbar {
 					top: $block-toolbar-height - $border-width;
 					transform: translateY(-$block-toolbar-height - $border-width);
-					margin-left: -$block-padding - $block-padding - $border-width;
+					margin-left: -$grid-size-large - $border-width;
 				}
 
 				> .editor-block-list__block-edit::before {
@@ -82,8 +82,9 @@
 					left: 0;
 				}
 
-				> .editor-block-list__breadcrumb {
-					margin-right: -$block-padding - $border-width;
+				> .editor-block-list__block-edit > .editor-block-list__breadcrumb {
+					top: 0;
+					right: 0;
 				}
 			}
 

diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
@@ -29,9 +29,9 @@
 
 		// Center the block toolbar on wide and full-wide blocks.
 		// Use specific selector to not affect nested block toolbars.
-		&[data-align="wide"] > .editor-block-contextual-toolbar,
-		&[data-align="full"] > .editor-block-contextual-toolbar {
-			width: calc(100% + #{ $block-side-ui-width * 2 + $block-padding * 2 + $border-width * 2 }); // Matches the negative margins applied to parent blocks.
+		&[data-align="wide"] > .editor-block-list__block-edit > .editor-block-contextual-toolbar,
+		&[data-align="full"] > .editor-block-list__block-edit > .editor-block-contextual-toolbar {
+			width: calc(100% + #{ $block-padding * 2 + $border-width * 2 }); // Matches the negative margins applied to parent blocks.
 			height: 0; // This collapses the container to an invisible element without margin.
 			text-align: center;
 
@@ -42,9 +42,11 @@
 			}
 		}
 
-		// The centering math changes when a fullwide image doesn't have block padding.
-		&[data-align="full"] > .editor-block-contextual-toolbar {
-			width: calc(100% + #{ $block-side-ui-width * 2 + $block-padding * 2 }); // Matches the negative margins applied to non-parent blocks, except for borders which are gone in fullwide.
+		// The centering math is simpler for a fullwide block, which doesn't have any block padding.
+		&[data-align="full"] > .editor-block-list__block-edit > .editor-block-contextual-toolbar {
+			width: 100%;
+			margin-left: 0;
+			margin-right: 0;
 
 			.editor-block-toolbar {
 				max-width: $content-width - $border-width - $border-width;
@@ -84,6 +86,12 @@
 }
 
 .edit-post-visual-editor {
+	// If the first block is floated, it needs top margin, unlike the rule in line 69.
+	.editor-block-list__layout > .editor-block-list__block[data-align="left"]:first-child,
+	.editor-block-list__layout > .editor-block-list__block[data-align="right"]:first-child {
+		margin-top: $block-padding + $block-spacing + $border-width + $border-width + $block-padding;
+	}
+
 	.editor-default-block-appender {
 		// Default to centered and content-width, like blocks
 		margin-left: auto;

diff --git a/packages/editor/src/components/block-list/block.js b/packages/editor/src/components/block-list/block.js
@@ -515,45 +515,46 @@ export class BlockListBlock extends Component {
 									onDragEnd={ this.onDragEnd }
 								/>
 							) }
-							{ shouldShowBreadcrumb && (
-								<BlockBreadcrumb
-									clientId={ clientId }
-									isHidden={ ! ( isHovered || isSelected ) || hoverArea !== 'left' }
-								/>
-							) }
-							{ shouldShowContextualToolbar && <BlockContextualToolbar /> }
 							{ isFirstMultiSelected && (
 								<BlockMultiControls rootClientId={ rootClientId } />
 							) }
-							<IgnoreNestedEvents
-								ref={ this.bindBlockNode }
-								onDragStart={ this.preventDrag }
-								onMouseDown={ this.onPointerDown }
-								className="editor-block-list__block-edit"
-								data-block={ clientId }
-							>
-								<BlockCrashBoundary onError={ this.onBlockError }>
-									{ isValid && blockEdit }
-									{ isValid && mode === 'html' && (
-										<BlockHtml clientId={ clientId } />
-									) }
-									{ ! isValid && [
-										<BlockInvalidWarning
-											key="invalid-warning"
-											block={ block }
-										/>,
-										<div key="invalid-preview">
-											{ getSaveElement( blockType, block.attributes ) }
-										</div>,
-									] }
-								</BlockCrashBoundary>
-								{ shouldShowMobileToolbar && (
-									<BlockMobileToolbar
+							<div className="editor-block-list__block-edit">
+								{ shouldShowBreadcrumb && (
+									<BlockBreadcrumb
 										clientId={ clientId }
+										isHidden={ ! ( isHovered || isSelected ) || hoverArea !== 'left' }
 									/>
 								) }
-								{ !! error && <BlockCrashWarning /> }
-							</IgnoreNestedEvents>
+								{ shouldShowContextualToolbar && <BlockContextualToolbar /> }
+								<IgnoreNestedEvents
+									ref={ this.bindBlockNode }
+									onDragStart={ this.preventDrag }
+									onMouseDown={ this.onPointerDown }
+									data-block={ clientId }
+								>
+									<BlockCrashBoundary onError={ this.onBlockError }>
+										{ isValid && blockEdit }
+										{ isValid && mode === 'html' && (
+											<BlockHtml clientId={ clientId } />
+										) }
+										{ ! isValid && [
+											<BlockInvalidWarning
+												key="invalid-warning"
+												block={ block }
+											/>,
+											<div key="invalid-preview">
+												{ getSaveElement( blockType, block.attributes ) }
+											</div>,
+										] }
+									</BlockCrashBoundary>
+									{ shouldShowMobileToolbar && (
+										<BlockMobileToolbar
+											clientId={ clientId }
+										/>
+									) }
+									{ !! error && <BlockCrashWarning /> }
+								</IgnoreNestedEvents>
+							</div>
 							{ showEmptyBlockSideInserter && (
 								<Fragment>
 									<div className="editor-block-list__side-inserter">