From 0f07a267762864ffa93478274646a138b6b337b5 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 8 Jul 2020 12:43:34 +0100 Subject: [PATCH] Backport fixes to include in Gutenberg 8.5.0 (#23783) --- package-lock.json | 6 +++--- .../use-scroll-when-dragging.js | 3 +++ .../src/components/block-preview/style.scss | 1 + .../src/components/tool-selector/index.js | 4 ++-- packages/components/src/tab-panel/index.js | 18 ++++++++++++------ .../components/src/tab-panel/test/index.js | 19 +++++++++++++------ packages/edit-post/src/style.scss | 3 ++- 7 files changed, 36 insertions(+), 18 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9a9a42834d3a34..aca7405956d8e9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -45280,9 +45280,9 @@ } }, "tar-stream": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.1.2.tgz", - "integrity": "sha512-UaF6FoJ32WqALZGOIAApXx+OdxhekNMChu6axLJR85zMMjXKWFGjbIRe+J6P4UnRGg9rAwWvbTT0oI7hD/Un7Q==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.1.3.tgz", + "integrity": "sha512-Z9yri56Dih8IaK8gncVPx4Wqt86NDmQTSh49XLZgjWpGZL9GK9HKParS2scqHCC4w6X9Gh2jwaU45V47XTKwVA==", "dev": true, "requires": { "bl": "^4.0.1", 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 index e7f869b2d3b0a8..aa66c27503cf98 100644 --- 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 index ff9a6b65aab32c..34892baf88acfa 100644 --- 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 index 77080f5a3b563c..33e73995f3e470 100644 --- 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 = ( - { editIcon } + { __( 'Edit' ) } ), diff --git a/packages/components/src/tab-panel/index.js b/packages/components/src/tab-panel/index.js index 8ca38e19927b0d..fa867139c0339c 100644 --- 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 (
diff --git a/packages/components/src/tab-panel/test/index.js b/packages/components/src/tab-panel/test/index.js index e3d511a554a27d..ad29ea67c32ed5 100644 --- 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 index a671241c6293f4..13b9ae6ae7ec72 100644 --- 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; }