Make the inserter scrolling and behavior adapt to the content changes

WordPress · Jun 15, 2020 · fa5395d · fa5395d
1 parent 12ebd7c
commit fa5395d
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 48 deletions.
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -81,14 +81,12 @@ function InserterMenu( {
 	const blocksTab = (
 		<>
 			<div className="block-editor-inserter__block-list">
-				<div className="block-editor-inserter__scrollable">
-					<InserterBlockList
-						rootClientId={ destinationRootClientId }
-						onInsert={ onInsert }
-						onHover={ onHover }
-						filterValue={ filterValue }
-					/>
-				</div>
+				<InserterBlockList
+					rootClientId={ destinationRootClientId }
+					onInsert={ onInsert }
+					onHover={ onHover }
+					filterValue={ filterValue }
+				/>
 			</div>
 			{ showInserterHelpPanel && (
 				<div className="block-editor-inserter__tips">
@@ -102,9 +100,7 @@ function InserterMenu( {
 	);
 
 	const patternsTab = (
-		<div className="block-editor-inserter__scrollable">
-			<BlockPatterns onInsert={ onInsert } filterValue={ filterValue } />
-		</div>
+		<BlockPatterns onInsert={ onInsert } filterValue={ filterValue } />
 	);
 
 	// Disable reason (no-autofocus): The inserter menu is a modal display, not one which

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -16,11 +16,20 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
-.block-editor-inserter__popover > .components-popover__content {
-	@include break-medium {
-		overflow-y: visible;
-		height: 100vh;
-		padding: 0;
+.block-editor-inserter__popover .block-editor-inserter__menu {
+	margin: -$grid-unit-15;
+
+	.block-editor-inserter__search {
+		top: -$grid-unit-15;
+	}
+
+	.block-editor-inserter__tabs .components-tab-panel__tabs {
+		top: $grid-unit-10 + $grid-unit-20 + $grid-unit-60 - $grid-unit-15;
+	}
+
+	.block-editor-inserter__main-area {
+		overflow: visible;
+		height: auto;
 	}
 }
 
@@ -43,8 +52,7 @@ $block-inserter-tabs-height: 44px;
 
 .block-editor-inserter__main-area {
 	width: auto;
-	display: flex;
-	flex-direction: column;
+	overflow-y: auto;
 	height: 100%;
 	@include break-medium {
 		width: $block-inserter-width;
@@ -65,9 +73,10 @@ $block-inserter-tabs-height: 44px;
 
 .block-editor-inserter__search {
 	padding: $grid-unit-20;
+	position: sticky;
+	top: 0;
+	background: $white;
 	z-index: 1;
-	flex-shrink: 0;
-	position: relative;
 
 	input[type="search"].block-editor-inserter__search-input {
 		@include input-control;
@@ -103,11 +112,15 @@ $block-inserter-tabs-height: 44px;
 
 .block-editor-inserter__tabs {
 	display: flex;
-	flex-grow: 1;
 	flex-direction: column;
 	margin-top: -$grid-unit-10;
 
 	.components-tab-panel__tabs {
+		position: sticky;
+		// Computed based off the search input height and paddings
+		top: $grid-unit-10 + $grid-unit-20 + $grid-unit-60;
+		background: $white;
+		z-index: 1;
 		border-bottom: $border-width solid $light-gray-500;
 
 		.components-tab-panel__tabs-item {
@@ -147,18 +160,6 @@ $block-inserter-tabs-height: 44px;
 	position: relative;
 }
 
-// This extra div is needed because
-// flex grow and overflow auto doesn't work well together.
-.block-editor-inserter__scrollable {
-	overflow: auto;
-	position: absolute;
-	top: 0;
-	left: 0;
-	bottom: 0;
-	right: 0;
-	overflow-y: scroll;
-}
-
 .block-editor-inserter__popover .block-editor-block-types-list {
 	margin: 0 -8px;
 }

diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
@@ -10,7 +10,7 @@ import { useRef, useState, useEffect } from '@wordpress/element';
 import { focus, getRectangleFromRange } from '@wordpress/dom';
 import { ESCAPE } from '@wordpress/keycodes';
 import deprecated from '@wordpress/deprecated';
-import { useViewportMatch } from '@wordpress/compose';
+import { useViewportMatch, useResizeObserver } from '@wordpress/compose';
 import { close } from '@wordpress/icons';
 
 /**
@@ -260,11 +260,11 @@ const Popover = ( {
 	const anchorRefFallback = useRef( null );
 	const contentRef = useRef( null );
 	const containerRef = useRef();
-	const contentRect = useRef();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const [ animateOrigin, setAnimateOrigin ] = useState();
 	const slot = useSlot( __unstableSlotName );
 	const isExpanded = expandOnMobile && isMobileViewport;
+	const [ containerResizeListener, contentSize ] = useResizeObserver();
 
 	noArrow = isExpanded || noArrow;
 
@@ -299,10 +299,6 @@ const Popover = ( {
 				return;
 			}
 
-			if ( ! contentRect.current ) {
-				contentRect.current = contentRef.current.getBoundingClientRect();
-			}
-
 			let relativeOffsetTop = 0;
 
 			// If there is a positioned ancestor element that is not the body,
@@ -343,7 +339,7 @@ const Popover = ( {
 				contentWidth,
 			} = computePopoverPosition(
 				anchor,
-				contentRect.current,
+				contentSize,
 				position,
 				__unstableSticky,
 				containerRef.current,
@@ -481,6 +477,7 @@ const Popover = ( {
 		anchorRef,
 		shouldAnchorIncludePadding,
 		position,
+		contentSize,
 		__unstableSticky,
 		__unstableAllowVerticalSubpixelPosition,
 		__unstableAllowHorizontalSubpixelPosition,
@@ -603,7 +600,10 @@ const Popover = ( {
 							className="components-popover__content"
 							tabIndex="-1"
 						>
-							{ children }
+							<div style={ { position: 'relative' } }>
+								{ containerResizeListener }
+								{ children }
+							</div>
 						</div>
 					</IsolatedEventContainer>
 				) }

diff --git a/packages/components/src/popover/stories/index.js b/packages/components/src/popover/stories/index.js
@@ -3,11 +3,17 @@
  */
 import { boolean, select, text } from '@storybook/addon-knobs';
 
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
 import { DraggableWrapper } from './_utils';
 import Popover from '../';
+import Button from '../../button';
 
 export default { title: 'Components/Popover', component: Popover };
 
@@ -100,3 +106,52 @@ export const positioning = () => {
 		<DragExample label={ label } content={ content } noArrow={ noArrow } />
 	);
 };
+
+function DynamicHeightPopover() {
+	const [ height, setHeight ] = useState( 200 );
+	const increase = () => setHeight( height + 100 );
+	const decrease = () => setHeight( height - 100 );
+
+	return (
+		<div style={ { padding: '20px' } }>
+			<div>
+				<Button
+					isPrimary
+					onClick={ increase }
+					style={ {
+						marginRight: '20px',
+					} }
+				>
+					Increase Size
+				</Button>
+
+				<Button isPrimary onClick={ decrease }>
+					Decrease Size
+				</Button>
+			</div>
+
+			<p>
+				When the height of the popover exceeds the available space in
+				the canvas, a scrollbar inside the popover should appear.
+			</p>
+
+			<div>
+				<Popover>
+					<div
+						style={ {
+							height,
+							background: '#eee',
+							padding: '20px',
+						} }
+					>
+						Content with dynamic height
+					</div>
+				</Popover>
+			</div>
+		</div>
+	);
+}
+
+export const dynamicHeight = () => {
+	return <DynamicHeightPopover />;
+};
diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss
@@ -216,11 +216,6 @@ $arrow-size: 8px;
 	}
 }
 
-// The withFocusReturn div
-.components-popover__content > div {
-	height: 100%;
-}
-
 .components-popover__header {
 	align-items: center;
 	background: $white;

diff --git a/packages/components/src/popover/test/__snapshots__/index.js.snap b/packages/components/src/popover/test/__snapshots__/index.js.snap
@@ -15,7 +15,11 @@ exports[`Popover should pass additional props to portaled element 1`] = `
             class="components-popover__content"
             tabindex="-1"
           >
-            Hello
+            <div
+              style="position: relative;"
+            >
+              Hello
+            </div>
           </div>
         </div>
       </div>
@@ -38,7 +42,11 @@ exports[`Popover should render content 1`] = `
             class="components-popover__content"
             tabindex="-1"
           >
-            Hello
+            <div
+              style="position: relative;"
+            >
+              Hello
+            </div>
           </div>
         </div>
       </div>