From cb813a1971e9fcfd36b5d517d40d4ce5cf907d88 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 19 Jun 2020 14:33:32 -0400
Subject: [PATCH 01/22] Add scrollIntoView interaction for PanelBody

Refactor interactions with Reakit/Disclosure.
Add custom hooks for ref and rendering handling.
---
 packages/components/src/panel/body.js         | 172 +++++++++++-------
 packages/components/src/utils/index.js        |   4 +
 .../components/src/utils/use-combined-refs.js |  22 +++
 .../components/src/utils/use-update-effect.js |  21 +++
 4 files changed, 150 insertions(+), 69 deletions(-)
 create mode 100644 packages/components/src/utils/index.js
 create mode 100644 packages/components/src/utils/use-combined-refs.js
 create mode 100644 packages/components/src/utils/use-update-effect.js

diff --git a/packages/components/src/panel/body.js b/packages/components/src/panel/body.js
index 4121a99b6bbe2..55417a99aa117 100644
--- a/packages/components/src/panel/body.js
+++ b/packages/components/src/panel/body.js
@@ -2,11 +2,18 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { noop } from 'lodash';
+import {
+	useDisclosureState,
+	Disclosure,
+	DisclosureContent,
+} from 'reakit/Disclosure';
 
 /**
  * WordPress dependencies
  */
-import { Component, forwardRef } from '@wordpress/element';
+import { useReducedMotion } from '@wordpress/compose';
+import { forwardRef, useRef } from '@wordpress/element';
 import { chevronUp, chevronDown } from '@wordpress/icons';
 
 /**
@@ -14,82 +21,109 @@ import { chevronUp, chevronDown } from '@wordpress/icons';
  */
 import Button from '../button';
 import Icon from '../icon';
+import { useCombinedRefs, useUpdateEffect } from '../utils';
 
-export class PanelBody extends Component {
-	constructor( props ) {
-		super( ...arguments );
-		this.state = {
-			opened: props.initialOpen === undefined ? true : props.initialOpen,
-		};
-		this.toggle = this.toggle.bind( this );
+export function PanelBody(
+	{
+		children,
+		className,
+		disableSmoothScrollIntoView,
+		focusable,
+		icon,
+		initialOpen: initialOpenProp,
+		onToggle = noop,
+		opened,
+		title,
+	},
+	ref
+) {
+	const initialOpen = useRef( initialOpenProp ).current;
+	const disclosure = useDisclosureState( { visible: initialOpen || opened } );
+	const nodeRef = useRef();
+	const combinedRefs = useCombinedRefs( ref, nodeRef );
+
+	// Defaults to 'smooth' scrolling
+	// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
+	let scrollBehavior = useReducedMotion() ? 'auto' : 'smooth';
+
+	// However, this behavior can be overridden by prop
+	if ( disableSmoothScrollIntoView ) {
+		scrollBehavior = 'auto';
 	}
 
-	toggle( event ) {
-		event.preventDefault();
-		if ( this.props.opened === undefined ) {
-			this.setState( ( state ) => ( {
-				opened: ! state.opened,
-			} ) );
-		}
+	const isOpened = disclosure.visible;
 
-		if ( this.props.onToggle ) {
-			this.props.onToggle();
+	// Runs after initial render
+	useUpdateEffect( () => {
+		if ( disclosure.visible ) {
+			/*
+			 * Scrolls the content into view when visible.
+			 * This improves the UX when there are multiple stacking <PanelBody />
+			 * components in a scrollable container.
+			 */
+			nodeRef.current.scrollIntoView( {
+				inline: 'nearest',
+				block: 'nearest',
+				behavior: scrollBehavior,
+			} );
 		}
-	}
 
-	render() {
-		const {
-			title,
-			children,
-			opened,
-			className,
-			icon,
-			forwardedRef,
-		} = this.props;
-		const isOpened = opened === undefined ? this.state.opened : opened;
-		const classes = classnames( 'components-panel__body', className, {
-			'is-opened': isOpened,
-		} );
+		onToggle( disclosure.visible );
+	}, [ disclosure.visible, onToggle, scrollBehavior ] );
+
+	const classes = classnames( 'components-panel__body', className, {
+		'is-opened': isOpened,
+	} );
 
-		return (
-			<div className={ classes } ref={ forwardedRef }>
-				{ !! title && (
-					<h2 className="components-panel__body-title">
-						<Button
-							className="components-panel__body-toggle"
-							onClick={ this.toggle }
-							aria-expanded={ isOpened }
-						>
-							{ /*
-								Firefox + NVDA don't announce aria-expanded because the browser
-								repaints the whole element, so this wrapping span hides that.
-							*/ }
-							<span aria-hidden="true">
-								<Icon
-									className="components-panel__arrow"
-									icon={ isOpened ? chevronUp : chevronDown }
-								/>
-							</span>
-							{ title }
-							{ icon && (
-								<Icon
-									icon={ icon }
-									className="components-panel__icon"
-									size={ 20 }
-								/>
-							) }
-						</Button>
-					</h2>
+	return (
+		<div className={ classes } ref={ combinedRefs }>
+			<PanelHeader
+				focusable={ focusable }
+				title={ title }
+				icon={ icon }
+				{ ...disclosure }
+			/>
+			<DisclosureContent { ...disclosure }>
+				{ children }
+			</DisclosureContent>
+		</div>
+	);
+}
+
+function PanelHeader( { focusable, isOpened, icon, title, ...props } ) {
+	if ( ! title ) return null;
+
+	return (
+		<h2 className="components-panel__body-title">
+			<Disclosure
+				as={ Button }
+				className="components-panel__body-toggle"
+				focusable={ focusable }
+				{ ...props }
+			>
+				{ /*
+					Firefox + NVDA don't announce aria-expanded because the browser
+					repaints the whole element, so this wrapping span hides that.
+				*/ }
+				<span aria-hidden="true">
+					<Icon
+						className="components-panel__arrow"
+						icon={ isOpened ? chevronUp : chevronDown }
+					/>
+				</span>
+				{ title }
+				{ icon && (
+					<Icon
+						icon={ icon }
+						className="components-panel__icon"
+						size={ 20 }
+					/>
 				) }
-				{ isOpened && children }
-			</div>
-		);
-	}
+			</Disclosure>
+		</h2>
+	);
 }
 
-const forwardedPanelBody = ( props, ref ) => {
-	return <PanelBody { ...props } forwardedRef={ ref } />;
-};
-forwardedPanelBody.displayName = 'PanelBody';
+const ForwardedComponent = forwardRef( PanelBody );
 
-export default forwardRef( forwardedPanelBody );
+export default ForwardedComponent;
diff --git a/packages/components/src/utils/index.js b/packages/components/src/utils/index.js
new file mode 100644
index 0000000000000..280790fd3a157
--- /dev/null
+++ b/packages/components/src/utils/index.js
@@ -0,0 +1,4 @@
+export * from './hooks';
+export * from './style-mixins';
+export * from './use-combined-refs';
+export * from './use-update-effect';
diff --git a/packages/components/src/utils/use-combined-refs.js b/packages/components/src/utils/use-combined-refs.js
new file mode 100644
index 0000000000000..3e59d0343d4a6
--- /dev/null
+++ b/packages/components/src/utils/use-combined-refs.js
@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef } from '@wordpress/element';
+
+export function useCombinedRefs( ...refs ) {
+	const targetRef = useRef();
+
+	useEffect( () => {
+		refs.forEach( ( ref ) => {
+			if ( ! ref ) return;
+
+			if ( typeof ref === 'function' ) {
+				ref( targetRef.current );
+			} else {
+				ref.current = targetRef.current;
+			}
+		} );
+	}, [] );
+
+	return targetRef;
+}
diff --git a/packages/components/src/utils/use-update-effect.js b/packages/components/src/utils/use-update-effect.js
new file mode 100644
index 0000000000000..c7dfab9452dae
--- /dev/null
+++ b/packages/components/src/utils/use-update-effect.js
@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef, useEffect } from '@wordpress/element';
+
+/*
+ * A `React.useEffect` that will not run on the first render.
+ * Source:
+ * https://github.com/reakit/reakit/blob/master/packages/reakit-utils/src/useUpdateEffect.ts
+ */
+export function useUpdateEffect( effect, deps ) {
+	const mounted = useRef( false );
+
+	useEffect( () => {
+		if ( mounted.current ) {
+			return effect();
+		}
+		mounted.current = true;
+		return undefined;
+	}, deps );
+}

From 5cddfb023b20eec4b09b2fac26768b34f7259eb1 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 19 Jun 2020 14:34:35 -0400
Subject: [PATCH 02/22] Adjust PanelBody story to include scrollIntoView
 example

---
 .../components/src/panel/stories/index.js     | 58 ++++++++++++++-----
 1 file changed, 44 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/panel/stories/index.js b/packages/components/src/panel/stories/index.js
index 10c9a163f4549..778140694c9e8 100644
--- a/packages/components/src/panel/stories/index.js
+++ b/packages/components/src/panel/stories/index.js
@@ -26,21 +26,31 @@ export const _default = () => {
 };
 
 export const multipleBodies = () => {
-	const body1Title = text( '1: Body Title', 'First Settings' );
-	const body2Title = text( '2: Body Title', 'Second Settings' );
-	const body1Open = boolean( '1: Opened', true );
-	const body2Open = boolean( '2: Opened', false );
-	const row1Text = text( '1: Row Text', 'My Panel Inputs and Labels' );
-	const row2Text = text( '2: Row Text', 'My Panel Inputs and Labels' );
 	return (
-		<Panel header="My Panel">
-			<PanelBody title={ body1Title } opened={ body1Open }>
-				<PanelRow>{ row1Text }</PanelRow>
-			</PanelBody>
-			<PanelBody title={ body2Title } opened={ body2Open }>
-				<PanelRow>{ row2Text }</PanelRow>
-			</PanelBody>
-		</Panel>
+		<ScrollableContainer>
+			<Panel header="My Panel">
+				<PanelBody title="First Settings">
+					<PanelRow>
+						<Placeholder height={ 250 } />
+					</PanelRow>
+				</PanelBody>
+				<PanelBody title="Second Settings" initialOpen={ false }>
+					<PanelRow>
+						<Placeholder height={ 400 } />
+					</PanelRow>
+				</PanelBody>
+				<PanelBody title="Third Settings" initialOpen={ false }>
+					<PanelRow>
+						<Placeholder height={ 600 } />
+					</PanelRow>
+				</PanelBody>
+				<PanelBody title="Fourth Settings" initialOpen={ false }>
+					<PanelRow>
+						<Placeholder />
+					</PanelRow>
+				</PanelBody>
+			</Panel>
+		</ScrollableContainer>
 	);
 };
 
@@ -57,3 +67,23 @@ export const withIcon = () => {
 		</Panel>
 	);
 };
+
+function ScrollableContainer( { children } ) {
+	return (
+		<div
+			style={ {
+				width: 300,
+				height: '100vh',
+				overflowY: 'auto',
+				margin: 'auto',
+				boxShadow: '0 0 0 1px #ddd inset',
+			} }
+		>
+			{ children }
+		</div>
+	);
+}
+
+function Placeholder( { height = 200 } ) {
+	return <div style={ { background: '#ddd', height, width: '100%' } } />;
+}

From 7311fb768046f2a32120019f14b71c1e185e72b6 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 19 Jun 2020 14:34:55 -0400
Subject: [PATCH 03/22] Adjust bottom padding for Layout sidebar

---
 packages/edit-post/src/components/layout/style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index 65c1b49625ea1..af086b757a3c5 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -59,6 +59,7 @@
 
 .interface-interface-skeleton__sidebar > div {
 	height: 100%;
+	padding-bottom: $grid-unit-60;
 }
 
 .edit-post-layout .editor-post-publish-panel__header-publish-button {

From 7619ffd4bf583d10c57c17a00b386a36e5d03b86 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 19 Jun 2020 15:29:59 -0400
Subject: [PATCH 04/22] Allow for opened prop to control disclosure state

---
 packages/components/src/panel/body.js | 83 +++++++++++++++------------
 1 file changed, 47 insertions(+), 36 deletions(-)

diff --git a/packages/components/src/panel/body.js b/packages/components/src/panel/body.js
index 55417a99aa117..6ddc0a14b40a7 100644
--- a/packages/components/src/panel/body.js
+++ b/packages/components/src/panel/body.js
@@ -38,7 +38,9 @@ export function PanelBody(
 	ref
 ) {
 	const initialOpen = useRef( initialOpenProp ).current;
-	const disclosure = useDisclosureState( { visible: initialOpen || opened } );
+	const disclosure = useDisclosureState( {
+		visible: initialOpen !== undefined ? initialOpen : opened,
+	} );
 	const nodeRef = useRef();
 	const combinedRefs = useCombinedRefs( ref, nodeRef );
 
@@ -61,23 +63,29 @@ export function PanelBody(
 			 * This improves the UX when there are multiple stacking <PanelBody />
 			 * components in a scrollable container.
 			 */
-			nodeRef.current.scrollIntoView( {
-				inline: 'nearest',
-				block: 'nearest',
-				behavior: scrollBehavior,
-			} );
+			if ( nodeRef.current.scrollIntoView ) {
+				nodeRef.current.scrollIntoView( {
+					inline: 'nearest',
+					block: 'nearest',
+					behavior: scrollBehavior,
+				} );
+			}
 		}
 
 		onToggle( disclosure.visible );
 	}, [ disclosure.visible, onToggle, scrollBehavior ] );
 
+	useUpdateEffect( () => {
+		disclosure.setVisible( opened );
+	}, [ disclosure.setVisible, opened ] );
+
 	const classes = classnames( 'components-panel__body', className, {
 		'is-opened': isOpened,
 	} );
 
 	return (
 		<div className={ classes } ref={ combinedRefs }>
-			<PanelHeader
+			<PanelBodyTitle
 				focusable={ focusable }
 				title={ title }
 				icon={ icon }
@@ -90,39 +98,42 @@ export function PanelBody(
 	);
 }
 
-function PanelHeader( { focusable, isOpened, icon, title, ...props } ) {
-	if ( ! title ) return null;
+const PanelBodyTitle = forwardRef(
+	( { focusable, isOpened, icon, title, ...props }, ref ) => {
+		if ( ! title ) return null;
 
-	return (
-		<h2 className="components-panel__body-title">
-			<Disclosure
-				as={ Button }
-				className="components-panel__body-toggle"
-				focusable={ focusable }
-				{ ...props }
-			>
-				{ /*
+		return (
+			<h2 className="components-panel__body-title">
+				<Disclosure
+					as={ Button }
+					className="components-panel__body-toggle"
+					focusable={ focusable }
+					ref={ ref }
+					{ ...props }
+				>
+					{ /*
 					Firefox + NVDA don't announce aria-expanded because the browser
 					repaints the whole element, so this wrapping span hides that.
 				*/ }
-				<span aria-hidden="true">
-					<Icon
-						className="components-panel__arrow"
-						icon={ isOpened ? chevronUp : chevronDown }
-					/>
-				</span>
-				{ title }
-				{ icon && (
-					<Icon
-						icon={ icon }
-						className="components-panel__icon"
-						size={ 20 }
-					/>
-				) }
-			</Disclosure>
-		</h2>
-	);
-}
+					<span aria-hidden="true">
+						<Icon
+							className="components-panel__arrow"
+							icon={ isOpened ? chevronUp : chevronDown }
+						/>
+					</span>
+					{ title }
+					{ icon && (
+						<Icon
+							icon={ icon }
+							className="components-panel__icon"
+							size={ 20 }
+						/>
+					) }
+				</Disclosure>
+			</h2>
+		);
+	}
+);
 
 const ForwardedComponent = forwardRef( PanelBody );
 

From 546a84655ed4bc7299d5d45be0d90d59a822b1f2 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 19 Jun 2020 15:30:33 -0400
Subject: [PATCH 05/22] Update PanelBody tests

---
 packages/components/src/panel/test/body.js    | 148 ++++++++++--------
 .../components/src/utils/use-combined-refs.js |  16 +-
 2 files changed, 96 insertions(+), 68 deletions(-)

diff --git a/packages/components/src/panel/test/body.js b/packages/components/src/panel/test/body.js
index a3aa620432217..c0890a32faa18 100644
--- a/packages/components/src/panel/test/body.js
+++ b/packages/components/src/panel/test/body.js
@@ -1,97 +1,119 @@
 /**
  * External dependencies
  */
-import { shallow, mount } from 'enzyme';
+import { act, render, fireEvent } from '@testing-library/react';
 
 /**
  * Internal dependencies
  */
 import { PanelBody } from '../body';
 
+const getPanelBody = ( container ) =>
+	container.querySelector( '.components-panel__body' );
+const getPanelBodyContent = ( container ) =>
+	container.querySelector( '.components-panel__body > div' );
+const getPanelToggle = ( container ) =>
+	container.querySelector( '.components-panel__body-toggle' );
+
 describe( 'PanelBody', () => {
 	describe( 'basic rendering', () => {
 		it( 'should render an empty div with the matching className', () => {
-			const panelBody = shallow( <PanelBody /> );
-			expect( panelBody.hasClass( 'components-panel__body' ) ).toBe(
-				true
-			);
-			expect( panelBody.type() ).toBe( 'div' );
-		} );
+			const { container } = render( <PanelBody /> );
+			const panelBody = getPanelBody( container );
 
-		it( 'should render an Button matching the following props and state', () => {
-			const panelBody = shallow( <PanelBody title="Some Text" /> );
-			const button = panelBody.find( '.components-panel__body-toggle' );
-			expect( panelBody.hasClass( 'is-opened' ) ).toBe( true );
-			expect( panelBody.state( 'opened' ) ).toBe( true );
-			expect( button.prop( 'onClick' ) ).toBe(
-				panelBody.instance().toggle
-			);
-			expect( button.childAt( 0 ).name() ).toBe( 'span' );
-			expect( button.childAt( 0 ).childAt( 0 ).name() ).toBe( 'Icon' );
-			expect( button.childAt( 1 ).text() ).toBe( 'Some Text' );
+			expect( panelBody ).toBeTruthy();
+			expect( panelBody.tagName ).toBe( 'DIV' );
 		} );
 
-		it( 'should change state and class when sidebar is closed', () => {
-			const panelBody = shallow(
-				<PanelBody title="Some Text" initialOpen={ false } />
+		it( 'should render inner content', () => {
+			const { container } = render(
+				<PanelBody>
+					<div className="inner-content">Content</div>
+				</PanelBody>
 			);
-			expect( panelBody.state( 'opened' ) ).toBe( false );
-			expect( panelBody.hasClass( 'is-opened' ) ).toBe( false );
+			const panelContent = getPanelBodyContent( container );
+			const content = panelContent.querySelector( '.inner-content' );
+
+			expect( content ).toBeTruthy();
 		} );
 
-		it( 'should use the "opened" prop instead of state if provided', () => {
-			const panelBody = shallow(
-				<PanelBody
-					title="Some Text"
-					opened={ true }
-					initialOpen={ false }
-				/>
+		it( 'should be collapsed by default', () => {
+			const { container } = render(
+				<PanelBody>
+					<div>Content</div>
+				</PanelBody>
 			);
-			expect( panelBody.state( 'opened' ) ).toBe( false );
-			expect( panelBody.hasClass( 'is-opened' ) ).toBe( true );
-		} );
+			const panelContent = getPanelBodyContent( container );
 
-		it( 'should render child elements within PanelBody element', () => {
-			const panelBody = shallow( <PanelBody children="Some Text" /> );
-			expect( panelBody.instance().props.children ).toBe( 'Some Text' );
-			expect( panelBody.text() ).toBe( 'Some Text' );
+			expect( panelContent.style.display ).toBe( 'none' );
 		} );
 
-		it( 'should pass children prop but not render when sidebar is closed', () => {
-			const panelBody = shallow(
-				<PanelBody children="Some Text" initialOpen={ false } />
+		it( 'should render as initially opened, if specified', () => {
+			const { container } = render(
+				<PanelBody initialOpen={ true }>
+					<div>Content</div>
+				</PanelBody>
 			);
-			expect( panelBody.instance().props.children ).toBe( 'Some Text' );
-			// Text should be empty even though props.children is set.
-			expect( panelBody.text() ).toBe( '' );
+			const panelContent = getPanelBodyContent( container );
+
+			expect( panelContent.style.display ).not.toBe( 'none' );
 		} );
 	} );
 
-	describe( 'mounting behavior', () => {
-		it( 'should mount with a default of being opened', () => {
-			const panelBody = mount( <PanelBody /> );
-			expect( panelBody.state( 'opened' ) ).toBe( true );
-		} );
+	describe( 'toggling', () => {
+		it( 'should toggle collapse with opened prop', () => {
+			const { container, rerender } = render(
+				<PanelBody opened={ true }>
+					<div>Content</div>
+				</PanelBody>
+			);
+			const panelContent = getPanelBodyContent( container );
 
-		it( 'should mount with a state of not opened when initialOpen set to false', () => {
-			const panelBody = mount( <PanelBody initialOpen={ false } /> );
-			expect( panelBody.state( 'opened' ) ).toBe( false );
-		} );
-	} );
+			expect( panelContent.style.display ).not.toBe( 'none' );
+
+			act( () => {
+				rerender(
+					<PanelBody opened={ false }>
+						<div>Content</div>
+					</PanelBody>
+				);
+			} );
+
+			expect( panelContent.style.display ).toBe( 'none' );
 
-	describe( 'toggling behavior', () => {
-		const fakeEvent = { preventDefault: () => undefined };
+			act( () => {
+				rerender(
+					<PanelBody opened={ true }>
+						<div>Content</div>
+					</PanelBody>
+				);
+			} );
 
-		it( 'should set the opened state to false when a toggle fires', () => {
-			const panelBody = mount( <PanelBody /> );
-			panelBody.instance().toggle( fakeEvent );
-			expect( panelBody.state( 'opened' ) ).toBe( false );
+			expect( panelContent.style.display ).not.toBe( 'none' );
 		} );
 
-		it( 'should set the opened state to true when a toggle fires on a closed state', () => {
-			const panelBody = mount( <PanelBody initialOpen={ false } /> );
-			panelBody.instance().toggle( fakeEvent );
-			expect( panelBody.state( 'opened' ) ).toBe( true );
+		it( 'should toggle when clicking header', () => {
+			const { container } = render(
+				<PanelBody opened={ false } title="Panel">
+					<div>Content</div>
+				</PanelBody>
+			);
+			const panelContent = getPanelBodyContent( container );
+			const panelToggle = getPanelToggle( container );
+
+			expect( panelContent.style.display ).toBe( 'none' );
+
+			act( () => {
+				fireEvent.click( panelToggle );
+			} );
+
+			expect( panelContent.style.display ).not.toBe( 'none' );
+
+			act( () => {
+				fireEvent.click( panelToggle );
+			} );
+
+			expect( panelContent.style.display ).toBe( 'none' );
 		} );
 	} );
 } );
diff --git a/packages/components/src/utils/use-combined-refs.js b/packages/components/src/utils/use-combined-refs.js
index 3e59d0343d4a6..566bf1a7d114a 100644
--- a/packages/components/src/utils/use-combined-refs.js
+++ b/packages/components/src/utils/use-combined-refs.js
@@ -10,11 +10,17 @@ export function useCombinedRefs( ...refs ) {
 		refs.forEach( ( ref ) => {
 			if ( ! ref ) return;
 
-			if ( typeof ref === 'function' ) {
-				ref( targetRef.current );
-			} else {
-				ref.current = targetRef.current;
-			}
+			/*
+			 * Wrapping in try/catch as this causes issues in Jest.
+			 * Cannot add property current, object is not extensible
+			 */
+			try {
+				if ( typeof ref === 'function' ) {
+					ref( targetRef.current );
+				} else {
+					ref.current = targetRef.current;
+				}
+			} catch {}
 		} );
 	}, [] );
 

From ff1c7cf403de32fd0622aa284b5d60551ec890c3 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 19 Jun 2020 15:30:44 -0400
Subject: [PATCH 06/22] Update snapshots

---
 .../plugin-post-publish-panel/test/__snapshots__/index.js.snap  | 2 +-
 .../plugin-pre-publish-panel/test/__snapshots__/index.js.snap   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap
index aafa7c918f179..655f6ff6414bd 100644
--- a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap
+++ b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PluginPostPublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-post-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M12 8l-6 5.4 1 1.2 5-4.6 5 4.6 1-1.2z\\"></path></svg></span>My panel title</button></h2>My panel content</div>"`;
+exports[`PluginPostPublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-post-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" aria-controls=\\"id-187nmh\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z\\"></path></svg></span>My panel title</button></h2><div id=\\"id-187nmh\\">My panel content</div></div>"`;
diff --git a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap
index 6087ec62497e5..1a21e9e095e3b 100644
--- a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap
+++ b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PluginPrePublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-pre-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M12 8l-6 5.4 1 1.2 5-4.6 5 4.6 1-1.2z\\"></path></svg></span>My panel title</button></h2>My panel content</div>"`;
+exports[`PluginPrePublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-pre-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" aria-controls=\\"id-7j08v8\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z\\"></path></svg></span>My panel title</button></h2><div id=\\"id-7j08v8\\">My panel content</div></div>"`;

From fa31367b262e652c027e65a0414f7831b39d478d Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Mon, 22 Jun 2020 12:18:30 -0400
Subject: [PATCH 07/22] Fix tests for PanelColorSettings + Update snapshots

---
 .../panel-color-settings/test/index.js        | 200 ++++++++----------
 .../test/__snapshots__/index.js.snap          |   2 +-
 .../test/__snapshots__/index.js.snap          |   2 +-
 3 files changed, 95 insertions(+), 109 deletions(-)

diff --git a/packages/block-editor/src/components/panel-color-settings/test/index.js b/packages/block-editor/src/components/panel-color-settings/test/index.js
index 4a6c6e5baa3e2..565124f1eb81e 100644
--- a/packages/block-editor/src/components/panel-color-settings/test/index.js
+++ b/packages/block-editor/src/components/panel-color-settings/test/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { create, act } from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import { noop } from 'lodash';
 
 /**
@@ -11,120 +11,106 @@ import PanelColorSettings from '../';
 
 describe( 'PanelColorSettings', () => {
 	it( 'should not render anything if there are no colors to choose', async () => {
-		let root;
-
-		await act( async () => {
-			root = create(
-				<PanelColorSettings
-					title="Test Title"
-					colors={ [] }
-					disableCustomColors={ true }
-					colorSettings={ [
-						{
-							value: '#000',
-							onChange: noop,
-							label: 'border color',
-						},
-						{
-							value: '#111',
-							onChange: noop,
-							label: 'background color',
-						},
-					] }
-				/>
-			);
-		} );
-
-		expect( root.toJSON() ).toBe( null );
+		const { container } = render(
+			<PanelColorSettings
+				title="Test Title"
+				colors={ [] }
+				disableCustomColors={ true }
+				colorSettings={ [
+					{
+						value: '#000',
+						onChange: noop,
+						label: 'border color',
+					},
+					{
+						value: '#111',
+						onChange: noop,
+						label: 'background color',
+					},
+				] }
+			/>
+		);
+		expect( container.innerHTML ).toBe( '' );
 	} );
 
 	it( 'should render a color panel if at least one setting supports custom colors', async () => {
-		let root;
-		await act( async () => {
-			root = create(
-				<PanelColorSettings
-					title="Test Title"
-					colors={ [] }
-					disableCustomColors={ true }
-					colorSettings={ [
-						{
-							value: '#000',
-							onChange: noop,
-							label: 'border color',
-						},
-						{
-							value: '#111',
-							onChange: noop,
-							label: 'background color',
-							disableCustomColors: false,
-						},
-					] }
-				/>
-			);
-		} );
-		expect( root ).not.toBe( null );
+		const { container } = render(
+			<PanelColorSettings
+				title="Test Title"
+				colors={ [] }
+				disableCustomColors={ true }
+				colorSettings={ [
+					{
+						value: '#000',
+						onChange: noop,
+						label: 'border color',
+					},
+					{
+						value: '#111',
+						onChange: noop,
+						label: 'background color',
+						disableCustomColors: false,
+					},
+				] }
+			/>
+		);
+		expect( container.innerHTML ).not.toBe( '' );
 	} );
 
 	it( 'should render a color panel if at least one setting specifies some colors to choose', async () => {
-		let root;
-		await act( async () => {
-			root = create(
-				<PanelColorSettings
-					title="Test Title"
-					colors={ [] }
-					disableCustomColors={ true }
-					colorSettings={ [
-						{
-							value: '#000',
-							onChange: noop,
-							label: 'border color',
-							colors: [
-								{
-									slug: 'red',
-									name: 'Red',
-									color: '#ff0000',
-								},
-							],
-						},
-						{
-							value: '#111',
-							onChange: noop,
-							label: 'background color',
-						},
-					] }
-				/>
-			);
-		} );
-		expect( root ).not.toBe( null );
+		const { container } = render(
+			<PanelColorSettings
+				title="Test Title"
+				colors={ [] }
+				disableCustomColors={ true }
+				colorSettings={ [
+					{
+						value: '#000',
+						onChange: noop,
+						label: 'border color',
+						colors: [
+							{
+								slug: 'red',
+								name: 'Red',
+								color: '#ff0000',
+							},
+						],
+					},
+					{
+						value: '#111',
+						onChange: noop,
+						label: 'background color',
+					},
+				] }
+			/>
+		);
+		expect( container.innerHTML ).not.toBe( '' );
 	} );
 
 	it( 'should not render anything if none of the setting panels has colors to choose', async () => {
-		let root;
-		await act( async () => {
-			root = create(
-				<PanelColorSettings
-					title="Test Title"
-					colors={ [] }
-					disableCustomColors={ false }
-					colorSettings={ [
-						{
-							value: '#000',
-							onChange: noop,
-							label: 'border color',
-							colors: [],
-							disableCustomColors: true,
-						},
-						{
-							value: '#111',
-							onChange: noop,
-							label: 'background color',
-							colors: [],
-							disableCustomColors: true,
-						},
-					] }
-				/>
-			);
-		} );
-		expect( root ).not.toBe( null );
+		const { container } = render(
+			<PanelColorSettings
+				title="Test Title"
+				colors={ [] }
+				disableCustomColors={ false }
+				colorSettings={ [
+					{
+						value: '#000',
+						onChange: noop,
+						label: 'border color',
+						colors: [],
+						disableCustomColors: true,
+					},
+					{
+						value: '#111',
+						onChange: noop,
+						label: 'background color',
+						colors: [],
+						disableCustomColors: true,
+					},
+				] }
+			/>
+		);
+		expect( container.innerHTML ).not.toBe( '' );
 	} );
 } );
diff --git a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap
index 655f6ff6414bd..f245b0d9dab5c 100644
--- a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap
+++ b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PluginPostPublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-post-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" aria-controls=\\"id-187nmh\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z\\"></path></svg></span>My panel title</button></h2><div id=\\"id-187nmh\\">My panel content</div></div>"`;
+exports[`PluginPostPublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-post-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" aria-controls=\\"id-0m1oc0\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z\\"></path></svg></span>My panel title</button></h2><div id=\\"id-0m1oc0\\">My panel content</div></div>"`;
diff --git a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap
index 1a21e9e095e3b..69973880c0e16 100644
--- a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap
+++ b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PluginPrePublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-pre-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" aria-controls=\\"id-7j08v8\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z\\"></path></svg></span>My panel title</button></h2><div id=\\"id-7j08v8\\">My panel content</div></div>"`;
+exports[`PluginPrePublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-pre-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" aria-controls=\\"id-af56r5\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z\\"></path></svg></span>My panel title</button></h2><div id=\\"id-af56r5\\">My panel content</div></div>"`;

From d1fed38a9a35d2f05e65c1210bbf8158af35f701 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Mon, 22 Jun 2020 12:24:20 -0400
Subject: [PATCH 08/22] Add new PanelBody props to README

---
 packages/components/src/panel/README.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/components/src/panel/README.md b/packages/components/src/panel/README.md
index 8573230f14d35..f6f34fff67e76 100644
--- a/packages/components/src/panel/README.md
+++ b/packages/components/src/panel/README.md
@@ -120,6 +120,20 @@ The class that will be added with `components-panel__body`, if the panel is curr
 -   Type: `String`
 -   Required: No
 
+###### disableSmoothScrollIntoView
+
+By default, the `PanelBody` will smooth scroll into view (if needed). Smooth scrolling can be disabled if `disableSmoothScrollIntoView` is set to `true`.
+
+-   Type: `Boolean`
+-   Required: No
+
+###### focusable
+
+By default, the `PanelBody` header is focusable. This can be disabled if `focusable` is set to `false`.
+
+-   Type: `Boolean`
+-   Required: No
+
 ###### icon
 
 An icon to be shown next to the `PanelBody` title.

From 29a4949c5385a060d96de40f012af314bd98e448 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 23 Jun 2020 13:15:16 -0400
Subject: [PATCH 09/22] Add react-merge-refs dependency

---
 package-lock.json                | 6 ++++++
 packages/components/package.json | 1 +
 2 files changed, 7 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 4b2c9f3112026..b1fec956f9ff9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10613,6 +10613,7 @@
 				"moment": "^2.22.1",
 				"re-resizable": "^6.4.0",
 				"react-dates": "^17.1.1",
+				"react-merge-refs": "^1.0.0",
 				"react-resize-aware": "^3.0.1",
 				"react-spring": "^8.0.20",
 				"react-use-gesture": "^7.0.15",
@@ -37327,6 +37328,11 @@
 			"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
 			"dev": true
 		},
+		"react-merge-refs": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-1.0.0.tgz",
+			"integrity": "sha512-VkvWuCR5VoTjb+VYUcOjkFo66HDv1Hw8VjKcwQtWr2lJnT8g7epRRyfz8+Zkl2WhwqNeqR0gIe0XYrBa9ePeXg=="
+		},
 		"react-moment-proptypes": {
 			"version": "1.6.0",
 			"resolved": "https://registry.npmjs.org/react-moment-proptypes/-/react-moment-proptypes-1.6.0.tgz",
diff --git a/packages/components/package.json b/packages/components/package.json
index da086290d831a..00ecb1721cc86 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -52,6 +52,7 @@
 		"moment": "^2.22.1",
 		"re-resizable": "^6.4.0",
 		"react-dates": "^17.1.1",
+		"react-merge-refs": "^1.0.0",
 		"react-resize-aware": "^3.0.1",
 		"react-spring": "^8.0.20",
 		"react-use-gesture": "^7.0.15",

From 5e824066f43f937f6e394ef9a20f7ab0349d3665 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 23 Jun 2020 13:15:36 -0400
Subject: [PATCH 10/22] Use react-merge-refs util

---
 packages/components/src/panel/body.js  | 6 +++---
 packages/components/src/utils/index.js | 1 -
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/panel/body.js b/packages/components/src/panel/body.js
index 6ddc0a14b40a7..409f32c5eccc9 100644
--- a/packages/components/src/panel/body.js
+++ b/packages/components/src/panel/body.js
@@ -3,6 +3,7 @@
  */
 import classnames from 'classnames';
 import { noop } from 'lodash';
+import mergeRefs from 'react-merge-refs';
 import {
 	useDisclosureState,
 	Disclosure,
@@ -21,7 +22,7 @@ import { chevronUp, chevronDown } from '@wordpress/icons';
  */
 import Button from '../button';
 import Icon from '../icon';
-import { useCombinedRefs, useUpdateEffect } from '../utils';
+import { useUpdateEffect } from '../utils';
 
 export function PanelBody(
 	{
@@ -42,7 +43,6 @@ export function PanelBody(
 		visible: initialOpen !== undefined ? initialOpen : opened,
 	} );
 	const nodeRef = useRef();
-	const combinedRefs = useCombinedRefs( ref, nodeRef );
 
 	// Defaults to 'smooth' scrolling
 	// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
@@ -84,7 +84,7 @@ export function PanelBody(
 	} );
 
 	return (
-		<div className={ classes } ref={ combinedRefs }>
+		<div className={ classes } ref={ mergeRefs( [ nodeRef, ref ] ) }>
 			<PanelBodyTitle
 				focusable={ focusable }
 				title={ title }
diff --git a/packages/components/src/utils/index.js b/packages/components/src/utils/index.js
index 280790fd3a157..b903874d95f32 100644
--- a/packages/components/src/utils/index.js
+++ b/packages/components/src/utils/index.js
@@ -1,4 +1,3 @@
 export * from './hooks';
 export * from './style-mixins';
-export * from './use-combined-refs';
 export * from './use-update-effect';

From db594d7f67cf1aeda957774c8ef9c7d04899da5c Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 23 Jun 2020 13:18:06 -0400
Subject: [PATCH 11/22] Update test snapshots

---
 .../plugin-post-publish-panel/test/__snapshots__/index.js.snap  | 2 +-
 .../plugin-pre-publish-panel/test/__snapshots__/index.js.snap   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap
index f245b0d9dab5c..415aa42dbf776 100644
--- a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap
+++ b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PluginPostPublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-post-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" aria-controls=\\"id-0m1oc0\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z\\"></path></svg></span>My panel title</button></h2><div id=\\"id-0m1oc0\\">My panel content</div></div>"`;
+exports[`PluginPostPublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-post-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" aria-controls=\\"id-ilmaos\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z\\"></path></svg></span>My panel title</button></h2><div id=\\"id-ilmaos\\">My panel content</div></div>"`;
diff --git a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap
index 69973880c0e16..ec2cf6a0f8dc9 100644
--- a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap
+++ b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PluginPrePublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-pre-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" aria-controls=\\"id-af56r5\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z\\"></path></svg></span>My panel title</button></h2><div id=\\"id-af56r5\\">My panel content</div></div>"`;
+exports[`PluginPrePublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-pre-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" aria-controls=\\"id-iddj7l\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z\\"></path></svg></span>My panel title</button></h2><div id=\\"id-iddj7l\\">My panel content</div></div>"`;

From 277f2428044537311f641af440b78e020cac4b98 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 24 Jun 2020 13:16:40 -0400
Subject: [PATCH 12/22] Remove disableSmoothScrollIntoView prop from PanelBody

---
 packages/components/src/panel/README.md | 7 -------
 packages/components/src/panel/body.js   | 9 +--------
 2 files changed, 1 insertion(+), 15 deletions(-)

diff --git a/packages/components/src/panel/README.md b/packages/components/src/panel/README.md
index f6f34fff67e76..c060255e54f3b 100644
--- a/packages/components/src/panel/README.md
+++ b/packages/components/src/panel/README.md
@@ -120,13 +120,6 @@ The class that will be added with `components-panel__body`, if the panel is curr
 -   Type: `String`
 -   Required: No
 
-###### disableSmoothScrollIntoView
-
-By default, the `PanelBody` will smooth scroll into view (if needed). Smooth scrolling can be disabled if `disableSmoothScrollIntoView` is set to `true`.
-
--   Type: `Boolean`
--   Required: No
-
 ###### focusable
 
 By default, the `PanelBody` header is focusable. This can be disabled if `focusable` is set to `false`.
diff --git a/packages/components/src/panel/body.js b/packages/components/src/panel/body.js
index 409f32c5eccc9..9de61635106d2 100644
--- a/packages/components/src/panel/body.js
+++ b/packages/components/src/panel/body.js
@@ -28,7 +28,6 @@ export function PanelBody(
 	{
 		children,
 		className,
-		disableSmoothScrollIntoView,
 		focusable,
 		icon,
 		initialOpen: initialOpenProp,
@@ -46,13 +45,7 @@ export function PanelBody(
 
 	// Defaults to 'smooth' scrolling
 	// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
-	let scrollBehavior = useReducedMotion() ? 'auto' : 'smooth';
-
-	// However, this behavior can be overridden by prop
-	if ( disableSmoothScrollIntoView ) {
-		scrollBehavior = 'auto';
-	}
-
+	const scrollBehavior = useReducedMotion() ? 'auto' : 'smooth';
 	const isOpened = disclosure.visible;
 
 	// Runs after initial render

From 85d4384056e75fbf9743eb70477a26e4d3650e63 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 24 Jun 2020 13:29:33 -0400
Subject: [PATCH 13/22] Update snapshots

---
 .../plugin-post-publish-panel/test/__snapshots__/index.js.snap  | 2 +-
 .../plugin-pre-publish-panel/test/__snapshots__/index.js.snap   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap
index 415aa42dbf776..e2a8dbb892f8d 100644
--- a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap
+++ b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PluginPostPublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-post-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" aria-controls=\\"id-ilmaos\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z\\"></path></svg></span>My panel title</button></h2><div id=\\"id-ilmaos\\">My panel content</div></div>"`;
+exports[`PluginPostPublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-post-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" aria-controls=\\"id-5n8bb6\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z\\"></path></svg></span>My panel title</button></h2><div id=\\"id-5n8bb6\\">My panel content</div></div>"`;
diff --git a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap
index ec2cf6a0f8dc9..0b3f84f22acc1 100644
--- a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap
+++ b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PluginPrePublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-pre-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" aria-controls=\\"id-iddj7l\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z\\"></path></svg></span>My panel title</button></h2><div id=\\"id-iddj7l\\">My panel content</div></div>"`;
+exports[`PluginPrePublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-pre-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" aria-controls=\\"id-r5pu5t\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z\\"></path></svg></span>My panel title</button></h2><div id=\\"id-r5pu5t\\">My panel content</div></div>"`;

From 09776c141d97b1c50aac79e1f223df078219f159 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 24 Jun 2020 15:54:37 -0400
Subject: [PATCH 14/22] Remove focusable prop

---
 packages/components/src/panel/README.md |  7 -------
 packages/components/src/panel/body.js   | 11 ++---------
 2 files changed, 2 insertions(+), 16 deletions(-)

diff --git a/packages/components/src/panel/README.md b/packages/components/src/panel/README.md
index c060255e54f3b..8573230f14d35 100644
--- a/packages/components/src/panel/README.md
+++ b/packages/components/src/panel/README.md
@@ -120,13 +120,6 @@ The class that will be added with `components-panel__body`, if the panel is curr
 -   Type: `String`
 -   Required: No
 
-###### focusable
-
-By default, the `PanelBody` header is focusable. This can be disabled if `focusable` is set to `false`.
-
--   Type: `Boolean`
--   Required: No
-
 ###### icon
 
 An icon to be shown next to the `PanelBody` title.
diff --git a/packages/components/src/panel/body.js b/packages/components/src/panel/body.js
index 9de61635106d2..927c234d2fda9 100644
--- a/packages/components/src/panel/body.js
+++ b/packages/components/src/panel/body.js
@@ -28,7 +28,6 @@ export function PanelBody(
 	{
 		children,
 		className,
-		focusable,
 		icon,
 		initialOpen: initialOpenProp,
 		onToggle = noop,
@@ -78,12 +77,7 @@ export function PanelBody(
 
 	return (
 		<div className={ classes } ref={ mergeRefs( [ nodeRef, ref ] ) }>
-			<PanelBodyTitle
-				focusable={ focusable }
-				title={ title }
-				icon={ icon }
-				{ ...disclosure }
-			/>
+			<PanelBodyTitle title={ title } icon={ icon } { ...disclosure } />
 			<DisclosureContent { ...disclosure }>
 				{ children }
 			</DisclosureContent>
@@ -92,7 +86,7 @@ export function PanelBody(
 }
 
 const PanelBodyTitle = forwardRef(
-	( { focusable, isOpened, icon, title, ...props }, ref ) => {
+	( { isOpened, icon, title, ...props }, ref ) => {
 		if ( ! title ) return null;
 
 		return (
@@ -100,7 +94,6 @@ const PanelBodyTitle = forwardRef(
 				<Disclosure
 					as={ Button }
 					className="components-panel__body-toggle"
-					focusable={ focusable }
 					ref={ ref }
 					{ ...props }
 				>

From 1425782269a80c860128979b9fa6db088e3a8fc1 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 24 Jun 2020 15:56:04 -0400
Subject: [PATCH 15/22] Remove use-combined-refs - No longer needed

---
 .../components/src/utils/use-combined-refs.js | 28 -------------------
 1 file changed, 28 deletions(-)
 delete mode 100644 packages/components/src/utils/use-combined-refs.js

diff --git a/packages/components/src/utils/use-combined-refs.js b/packages/components/src/utils/use-combined-refs.js
deleted file mode 100644
index 566bf1a7d114a..0000000000000
--- a/packages/components/src/utils/use-combined-refs.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useEffect, useRef } from '@wordpress/element';
-
-export function useCombinedRefs( ...refs ) {
-	const targetRef = useRef();
-
-	useEffect( () => {
-		refs.forEach( ( ref ) => {
-			if ( ! ref ) return;
-
-			/*
-			 * Wrapping in try/catch as this causes issues in Jest.
-			 * Cannot add property current, object is not extensible
-			 */
-			try {
-				if ( typeof ref === 'function' ) {
-					ref( targetRef.current );
-				} else {
-					ref.current = targetRef.current;
-				}
-			} catch {}
-		} );
-	}, [] );
-
-	return targetRef;
-}

From 73783b1547d1b40912e311bd976e4e68cb19155c Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 24 Jun 2020 15:58:05 -0400
Subject: [PATCH 16/22] Remove onToggle from useUpdateEffect deps array

---
 packages/components/src/panel/body.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/panel/body.js b/packages/components/src/panel/body.js
index 927c234d2fda9..3248d8fc1135d 100644
--- a/packages/components/src/panel/body.js
+++ b/packages/components/src/panel/body.js
@@ -65,7 +65,7 @@ export function PanelBody(
 		}
 
 		onToggle( disclosure.visible );
-	}, [ disclosure.visible, onToggle, scrollBehavior ] );
+	}, [ disclosure.visible, scrollBehavior ] );
 
 	useUpdateEffect( () => {
 		disclosure.setVisible( opened );

From 444bc3ac43033c34c373e91cc53ae72a33d21966 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 26 Jun 2020 10:12:05 -0400
Subject: [PATCH 17/22] Adjust onToggle callback handling

---
 packages/components/src/panel/body.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/panel/body.js b/packages/components/src/panel/body.js
index 3248d8fc1135d..6a6dc42c99161 100644
--- a/packages/components/src/panel/body.js
+++ b/packages/components/src/panel/body.js
@@ -14,7 +14,7 @@ import {
  * WordPress dependencies
  */
 import { useReducedMotion } from '@wordpress/compose';
-import { forwardRef, useRef } from '@wordpress/element';
+import { forwardRef, useEffect, useRef } from '@wordpress/element';
 import { chevronUp, chevronDown } from '@wordpress/icons';
 
 /**
@@ -47,6 +47,12 @@ export function PanelBody(
 	const scrollBehavior = useReducedMotion() ? 'auto' : 'smooth';
 	const isOpened = disclosure.visible;
 
+	const currentOnToggle = useRef( onToggle );
+
+	useEffect( () => {
+		currentOnToggle.current = onToggle;
+	}, [ onToggle ] );
+
 	// Runs after initial render
 	useUpdateEffect( () => {
 		if ( disclosure.visible ) {
@@ -64,7 +70,7 @@ export function PanelBody(
 			}
 		}
 
-		onToggle( disclosure.visible );
+		currentOnToggle.current( disclosure.visible );
 	}, [ disclosure.visible, scrollBehavior ] );
 
 	useUpdateEffect( () => {

From fb33dc0a35beb90daaae3773cc448dc47910fcf7 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 7 Jul 2020 14:16:08 -0400
Subject: [PATCH 18/22] Remove Reakit/Disclosure integration (for now)

---
 packages/components/src/panel/body.js | 64 ++++++++++-----------------
 1 file changed, 23 insertions(+), 41 deletions(-)

diff --git a/packages/components/src/panel/body.js b/packages/components/src/panel/body.js
index 6a6dc42c99161..5f27a62d113c3 100644
--- a/packages/components/src/panel/body.js
+++ b/packages/components/src/panel/body.js
@@ -4,17 +4,12 @@
 import classnames from 'classnames';
 import { noop } from 'lodash';
 import mergeRefs from 'react-merge-refs';
-import {
-	useDisclosureState,
-	Disclosure,
-	DisclosureContent,
-} from 'reakit/Disclosure';
 
 /**
  * WordPress dependencies
  */
 import { useReducedMotion } from '@wordpress/compose';
-import { forwardRef, useEffect, useRef } from '@wordpress/element';
+import { forwardRef, useRef } from '@wordpress/element';
 import { chevronUp, chevronDown } from '@wordpress/icons';
 
 /**
@@ -22,40 +17,30 @@ import { chevronUp, chevronDown } from '@wordpress/icons';
  */
 import Button from '../button';
 import Icon from '../icon';
-import { useUpdateEffect } from '../utils';
+import { useControlledState, useUpdateEffect } from '../utils';
 
 export function PanelBody(
-	{
-		children,
-		className,
-		icon,
-		initialOpen: initialOpenProp,
-		onToggle = noop,
-		opened,
-		title,
-	},
+	{ children, className, icon, initialOpen, onToggle = noop, opened, title },
 	ref
 ) {
-	const initialOpen = useRef( initialOpenProp ).current;
-	const disclosure = useDisclosureState( {
-		visible: initialOpen !== undefined ? initialOpen : opened,
-	} );
+	const [ isOpened, setIsOpened ] = useControlledState(
+		initialOpen !== undefined ? initialOpen : opened
+	);
 	const nodeRef = useRef();
 
 	// Defaults to 'smooth' scrolling
 	// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
 	const scrollBehavior = useReducedMotion() ? 'auto' : 'smooth';
-	const isOpened = disclosure.visible;
-
-	const currentOnToggle = useRef( onToggle );
 
-	useEffect( () => {
-		currentOnToggle.current = onToggle;
-	}, [ onToggle ] );
+	const handleOnToggle = () => {
+		const next = ! isOpened;
+		setIsOpened( next );
+		onToggle( next );
+	};
 
 	// Runs after initial render
 	useUpdateEffect( () => {
-		if ( disclosure.visible ) {
+		if ( isOpened ) {
 			/*
 			 * Scrolls the content into view when visible.
 			 * This improves the UX when there are multiple stacking <PanelBody />
@@ -69,13 +54,7 @@ export function PanelBody(
 				} );
 			}
 		}
-
-		currentOnToggle.current( disclosure.visible );
-	}, [ disclosure.visible, scrollBehavior ] );
-
-	useUpdateEffect( () => {
-		disclosure.setVisible( opened );
-	}, [ disclosure.setVisible, opened ] );
+	}, [ isOpened, scrollBehavior ] );
 
 	const classes = classnames( 'components-panel__body', className, {
 		'is-opened': isOpened,
@@ -83,10 +62,13 @@ export function PanelBody(
 
 	return (
 		<div className={ classes } ref={ mergeRefs( [ nodeRef, ref ] ) }>
-			<PanelBodyTitle title={ title } icon={ icon } { ...disclosure } />
-			<DisclosureContent { ...disclosure }>
-				{ children }
-			</DisclosureContent>
+			<PanelBodyTitle
+				icon={ icon }
+				isOpened={ isOpened }
+				onClick={ handleOnToggle }
+				title={ title }
+			/>
+			{ isOpened && children }
 		</div>
 	);
 }
@@ -97,8 +79,7 @@ const PanelBodyTitle = forwardRef(
 
 		return (
 			<h2 className="components-panel__body-title">
-				<Disclosure
-					as={ Button }
+				<Button
 					className="components-panel__body-toggle"
 					ref={ ref }
 					{ ...props }
@@ -121,12 +102,13 @@ const PanelBodyTitle = forwardRef(
 							size={ 20 }
 						/>
 					) }
-				</Disclosure>
+				</Button>
 			</h2>
 		);
 	}
 );
 
 const ForwardedComponent = forwardRef( PanelBody );
+ForwardedComponent.displayName = 'PanelBody';
 
 export default ForwardedComponent;

From c50d0062e65291a0831e838d93b1c7dd6d662fb2 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 7 Jul 2020 14:16:24 -0400
Subject: [PATCH 19/22] Update PanelBody tests

---
 packages/components/src/panel/test/body.js | 37 +++++++++++++---------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/packages/components/src/panel/test/body.js b/packages/components/src/panel/test/body.js
index c0890a32faa18..4f1cb7297d83f 100644
--- a/packages/components/src/panel/test/body.js
+++ b/packages/components/src/panel/test/body.js
@@ -25,16 +25,15 @@ describe( 'PanelBody', () => {
 			expect( panelBody.tagName ).toBe( 'DIV' );
 		} );
 
-		it( 'should render inner content', () => {
+		it( 'should render inner content, if opened', () => {
 			const { container } = render(
-				<PanelBody>
+				<PanelBody opened={ true }>
 					<div className="inner-content">Content</div>
 				</PanelBody>
 			);
 			const panelContent = getPanelBodyContent( container );
-			const content = panelContent.querySelector( '.inner-content' );
 
-			expect( content ).toBeTruthy();
+			expect( panelContent ).toBeTruthy();
 		} );
 
 		it( 'should be collapsed by default', () => {
@@ -45,7 +44,7 @@ describe( 'PanelBody', () => {
 			);
 			const panelContent = getPanelBodyContent( container );
 
-			expect( panelContent.style.display ).toBe( 'none' );
+			expect( panelContent ).toBeFalsy();
 		} );
 
 		it( 'should render as initially opened, if specified', () => {
@@ -56,7 +55,7 @@ describe( 'PanelBody', () => {
 			);
 			const panelContent = getPanelBodyContent( container );
 
-			expect( panelContent.style.display ).not.toBe( 'none' );
+			expect( panelContent ).toBeTruthy();
 		} );
 	} );
 
@@ -67,9 +66,9 @@ describe( 'PanelBody', () => {
 					<div>Content</div>
 				</PanelBody>
 			);
-			const panelContent = getPanelBodyContent( container );
+			let panelContent = getPanelBodyContent( container );
 
-			expect( panelContent.style.display ).not.toBe( 'none' );
+			expect( panelContent ).toBeTruthy();
 
 			act( () => {
 				rerender(
@@ -79,7 +78,9 @@ describe( 'PanelBody', () => {
 				);
 			} );
 
-			expect( panelContent.style.display ).toBe( 'none' );
+			panelContent = getPanelBodyContent( container );
+
+			expect( panelContent ).toBeFalsy();
 
 			act( () => {
 				rerender(
@@ -89,31 +90,37 @@ describe( 'PanelBody', () => {
 				);
 			} );
 
-			expect( panelContent.style.display ).not.toBe( 'none' );
+			panelContent = getPanelBodyContent( container );
+
+			expect( panelContent ).toBeTruthy();
 		} );
 
 		it( 'should toggle when clicking header', () => {
 			const { container } = render(
-				<PanelBody opened={ false } title="Panel">
+				<PanelBody title="Panel">
 					<div>Content</div>
 				</PanelBody>
 			);
-			const panelContent = getPanelBodyContent( container );
+			let panelContent = getPanelBodyContent( container );
 			const panelToggle = getPanelToggle( container );
 
-			expect( panelContent.style.display ).toBe( 'none' );
+			expect( panelContent ).toBeFalsy();
 
 			act( () => {
 				fireEvent.click( panelToggle );
 			} );
 
-			expect( panelContent.style.display ).not.toBe( 'none' );
+			panelContent = getPanelBodyContent( container );
+
+			expect( panelContent ).toBeTruthy();
 
 			act( () => {
 				fireEvent.click( panelToggle );
 			} );
 
-			expect( panelContent.style.display ).toBe( 'none' );
+			panelContent = getPanelBodyContent( container );
+
+			expect( panelContent ).toBeFalsy();
 		} );
 	} );
 } );

From 10fdadce944efa54e0284fdfad87468f79b8f226 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 7 Jul 2020 14:16:40 -0400
Subject: [PATCH 20/22] Update snapshots

---
 .../src/more/test/__snapshots__/edit.js.snap              | 8 ++++----
 .../test/__snapshots__/index.js.snap                      | 2 +-
 .../test/__snapshots__/index.js.snap                      | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/block-library/src/more/test/__snapshots__/edit.js.snap b/packages/block-library/src/more/test/__snapshots__/edit.js.snap
index 10b47a9f65422..55069a6586839 100644
--- a/packages/block-library/src/more/test/__snapshots__/edit.js.snap
+++ b/packages/block-library/src/more/test/__snapshots__/edit.js.snap
@@ -3,14 +3,14 @@
 exports[`core/more/edit should match snapshot when noTeaser is false 1`] = `
 <React.Fragment>
   <InspectorControls>
-    <ForwardRef(PanelBody)>
+    <PanelBody>
       <ToggleControl
         checked={false}
         help={[Function]}
         label="Hide the excerpt on the full content page"
         onChange={[Function]}
       />
-    </ForwardRef(PanelBody)>
+    </PanelBody>
   </InspectorControls>
   <div
     className="wp-block-more"
@@ -33,14 +33,14 @@ exports[`core/more/edit should match snapshot when noTeaser is false 1`] = `
 exports[`core/more/edit should match snapshot when noTeaser is true 1`] = `
 <React.Fragment>
   <InspectorControls>
-    <ForwardRef(PanelBody)>
+    <PanelBody>
       <ToggleControl
         checked={true}
         help={[Function]}
         label="Hide the excerpt on the full content page"
         onChange={[Function]}
       />
-    </ForwardRef(PanelBody)>
+    </PanelBody>
   </InspectorControls>
   <div
     className="wp-block-more"
diff --git a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap
index e2a8dbb892f8d..a7eb099d379a5 100644
--- a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap
+++ b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PluginPostPublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-post-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" aria-controls=\\"id-5n8bb6\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z\\"></path></svg></span>My panel title</button></h2><div id=\\"id-5n8bb6\\">My panel content</div></div>"`;
+exports[`PluginPostPublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-post-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M12 8l-6 5.4 1 1.2 5-4.6 5 4.6 1-1.2z\\"></path></svg></span>My panel title</button></h2>My panel content</div>"`;
diff --git a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap
index 0b3f84f22acc1..f065917b0ee8a 100644
--- a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap
+++ b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PluginPrePublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-pre-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" aria-controls=\\"id-r5pu5t\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z\\"></path></svg></span>My panel title</button></h2><div id=\\"id-r5pu5t\\">My panel content</div></div>"`;
+exports[`PluginPrePublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-pre-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M12 8l-6 5.4 1 1.2 5-4.6 5 4.6 1-1.2z\\"></path></svg></span>My panel title</button></h2>My panel content</div>"`;

From 45510e74a633fef580a61eebb447a87b50fd7c30 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 8 Jul 2020 10:59:58 -0400
Subject: [PATCH 21/22] Fix initialOpen handling for PanelBody

---
 packages/components/src/panel/body.js      | 9 +++++----
 packages/components/src/panel/test/body.js | 6 +++---
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/components/src/panel/body.js b/packages/components/src/panel/body.js
index 5f27a62d113c3..dbfd895dc8a61 100644
--- a/packages/components/src/panel/body.js
+++ b/packages/components/src/panel/body.js
@@ -23,16 +23,17 @@ export function PanelBody(
 	{ children, className, icon, initialOpen, onToggle = noop, opened, title },
 	ref
 ) {
-	const [ isOpened, setIsOpened ] = useControlledState(
-		initialOpen !== undefined ? initialOpen : opened
-	);
+	const [ isOpened, setIsOpened ] = useControlledState( opened, {
+		initial: initialOpen === undefined ? true : initialOpen,
+	} );
 	const nodeRef = useRef();
 
 	// Defaults to 'smooth' scrolling
 	// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
 	const scrollBehavior = useReducedMotion() ? 'auto' : 'smooth';
 
-	const handleOnToggle = () => {
+	const handleOnToggle = ( event ) => {
+		event.preventDefault();
 		const next = ! isOpened;
 		setIsOpened( next );
 		onToggle( next );
diff --git a/packages/components/src/panel/test/body.js b/packages/components/src/panel/test/body.js
index 4f1cb7297d83f..0890c91ca2f2c 100644
--- a/packages/components/src/panel/test/body.js
+++ b/packages/components/src/panel/test/body.js
@@ -36,7 +36,7 @@ describe( 'PanelBody', () => {
 			expect( panelContent ).toBeTruthy();
 		} );
 
-		it( 'should be collapsed by default', () => {
+		it( 'should be opened by default', () => {
 			const { container } = render(
 				<PanelBody>
 					<div>Content</div>
@@ -44,7 +44,7 @@ describe( 'PanelBody', () => {
 			);
 			const panelContent = getPanelBodyContent( container );
 
-			expect( panelContent ).toBeFalsy();
+			expect( panelContent ).toBeTruthy();
 		} );
 
 		it( 'should render as initially opened, if specified', () => {
@@ -97,7 +97,7 @@ describe( 'PanelBody', () => {
 
 		it( 'should toggle when clicking header', () => {
 			const { container } = render(
-				<PanelBody title="Panel">
+				<PanelBody title="Panel" initialOpen={ false }>
 					<div>Content</div>
 				</PanelBody>
 			);

From 8a35791d60f8a69e2d155990e9c7e564248a4713 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Mon, 13 Jul 2020 12:01:50 -0400
Subject: [PATCH 22/22] Remove unnecessary act wrappers in panel body tests

---
 packages/components/src/panel/test/body.js | 34 +++++++++-------------
 1 file changed, 13 insertions(+), 21 deletions(-)

diff --git a/packages/components/src/panel/test/body.js b/packages/components/src/panel/test/body.js
index 0890c91ca2f2c..bf3f2860ec6ce 100644
--- a/packages/components/src/panel/test/body.js
+++ b/packages/components/src/panel/test/body.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { act, render, fireEvent } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -70,25 +70,21 @@ describe( 'PanelBody', () => {
 
 			expect( panelContent ).toBeTruthy();
 
-			act( () => {
-				rerender(
-					<PanelBody opened={ false }>
-						<div>Content</div>
-					</PanelBody>
-				);
-			} );
+			rerender(
+				<PanelBody opened={ false }>
+					<div>Content</div>
+				</PanelBody>
+			);
 
 			panelContent = getPanelBodyContent( container );
 
 			expect( panelContent ).toBeFalsy();
 
-			act( () => {
-				rerender(
-					<PanelBody opened={ true }>
-						<div>Content</div>
-					</PanelBody>
-				);
-			} );
+			rerender(
+				<PanelBody opened={ true }>
+					<div>Content</div>
+				</PanelBody>
+			);
 
 			panelContent = getPanelBodyContent( container );
 
@@ -106,17 +102,13 @@ describe( 'PanelBody', () => {
 
 			expect( panelContent ).toBeFalsy();
 
-			act( () => {
-				fireEvent.click( panelToggle );
-			} );
+			fireEvent.click( panelToggle );
 
 			panelContent = getPanelBodyContent( container );
 
 			expect( panelContent ).toBeTruthy();
 
-			act( () => {
-				fireEvent.click( panelToggle );
-			} );
+			fireEvent.click( panelToggle );
 
 			panelContent = getPanelBodyContent( container );