Backport fixes to include in Gutenberg 8.5.0 (#23783)

WordPress · Jul 8, 2020 · 0f07a26 · 0f07a26
1 parent 8384ca7
commit 0f07a26
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 18 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-editor/src/components/block-draggable/use-scroll-when-dragging.js b/packages/block-editor/src/components/block-draggable/use-scroll-when-dragging.js
@@ -55,6 +55,9 @@ export default function useScrollWhenDragging() {
 	}, [] );
 
 	const scrollOnDragOver = useCallback( ( event ) => {
+		if ( ! scrollParentY.current ) {
+			return;
+		}
 		const scrollParentHeight = scrollParentY.current.offsetHeight;
 		const offsetDragStartPosition =
 			dragStartY.current - scrollParentY.current.offsetTop;

diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
@@ -13,6 +13,7 @@
 	// Overrides the default padding applied in editor styles otherwise preview centering break.
 	&.editor-styles-wrapper {
 		padding: 0;
+		margin: 0;
 	}
 }
 

diff --git a/packages/block-editor/src/components/tool-selector/index.js b/packages/block-editor/src/components/tool-selector/index.js
@@ -12,7 +12,7 @@ import {
 import { __ } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { forwardRef } from '@wordpress/element';
-import { edit as editIcon } from '@wordpress/icons';
+import { Icon, edit as editIcon } from '@wordpress/icons';
 
 const selectIcon = (
 	<SVG
@@ -60,7 +60,7 @@ function ToolSelector( props, ref ) {
 									value: 'edit',
 									label: (
 										<>
-											{ editIcon }
+											<Icon icon={ editIcon } />
 											{ __( 'Edit' ) }
 										</>
 									),

diff --git a/packages/components/src/tab-panel/index.js b/packages/components/src/tab-panel/index.js
@@ -7,7 +7,7 @@ import { partial, noop, find } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 
 /**
@@ -39,9 +39,7 @@ export default function TabPanel( {
 	onSelect = noop,
 } ) {
 	const instanceId = useInstanceId( TabPanel, 'tab-panel' );
-	const [ selected, setSelected ] = useState(
-		initialTabName || ( tabs.length > 0 ? tabs[ 0 ].name : null )
-	);
+	const [ selected, setSelected ] = useState( null );
 
 	const handleClick = ( tabKey ) => {
 		setSelected( tabKey );
@@ -51,9 +49,17 @@ export default function TabPanel( {
 	const onNavigate = ( childIndex, child ) => {
 		child.click();
 	};
-
 	const selectedTab = find( tabs, { name: selected } );
-	const selectedId = `${ instanceId }-${ selectedTab.name }`;
+	const selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;
+
+	useEffect( () => {
+		const newSelectedTab = find( tabs, { name: selected } );
+		if ( ! newSelectedTab ) {
+			setSelected(
+				initialTabName || ( tabs.length > 0 ? tabs[ 0 ].name : null )
+			);
+		}
+	}, [ tabs ] );
 
 	return (
 		<div className={ className }>

diff --git a/packages/components/src/tab-panel/test/index.js b/packages/components/src/tab-panel/test/index.js
@@ -74,9 +74,12 @@ describe( 'TabPanel', () => {
 				},
 			};
 
-			const wrapper = TestUtils.renderIntoDocument(
-				getTestComponent( TabPanel, props )
-			);
+			let wrapper;
+			TestUtils.act( () => {
+				wrapper = TestUtils.renderIntoDocument(
+					getTestComponent( TabPanel, props )
+				);
+			} );
 
 			const alphaTab = getElementByClass( wrapper, 'alpha' );
 			const betaTab = getElementByClass( wrapper, 'beta' );
@@ -162,9 +165,13 @@ describe( 'TabPanel', () => {
 				);
 			},
 		};
-		const wrapper = TestUtils.renderIntoDocument(
-			getTestComponent( TabPanel, props )
-		);
+
+		let wrapper;
+		TestUtils.act( () => {
+			wrapper = TestUtils.renderIntoDocument(
+				getTestComponent( TabPanel, props )
+			);
+		} );
 
 		const getActiveTab = () => getElementByClass( wrapper, 'active-tab' );
 		expect( getActiveTab().innerHTML ).toBe( 'Beta' );

diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
@@ -57,7 +57,8 @@ body.block-editor-page {
 .edit-post-sidebar,
 .editor-post-publish-panel,
 .components-popover,
-.components-modal__frame {
+.components-modal__frame,
+.edit-post-layout__inserter-panel {
 	@include reset;
 }