Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Block Navigation List: do not show appender and avoid closing the modal on block select #34337

Merged
merged 2 commits into from
Aug 27, 2021
Merged

Block Navigation List: do not show appender and avoid closing the modal on block select #34337

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
39fdd14
Block Navigation List: do not show appender and avoid closing the mod…
gwwar Aug 26, 2021
8d4838d
Block Navigation List: do not change modal size when dragging items
gwwar Aug 26, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 15 additions & 9 deletions packages/block-editor/src/components/list-view/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
useMemo,
useRef,
useReducer,
forwardRef,
} from '@wordpress/element';
import { __ } from '@wordpress/i18n';

Expand Down Expand Up @@ -48,15 +49,19 @@ const expanded = ( state, action ) => {
* @param {boolean} props.showOnlyCurrentHierarchy Flag to limit the list to the current hierarchy of blocks.
* @param {boolean} props.__experimentalFeatures Flag to enable experimental features.
* @param {boolean} props.__experimentalPersistentListViewFeatures Flag to enable features for the Persistent List View experiment.
* @param {Object} ref Forwarded ref
*/
export default function ListView( {
blocks,
showOnlyCurrentHierarchy,
onSelect = noop,
__experimentalFeatures,
__experimentalPersistentListViewFeatures,
...props
} ) {
function ListView(
{
blocks,
showOnlyCurrentHierarchy,
onSelect = noop,
__experimentalFeatures,
__experimentalPersistentListViewFeatures,
...props
},
ref
) {
const { clientIdsTree, selectedClientIds } = useListViewClientIds(
blocks,
showOnlyCurrentHierarchy,
Expand All @@ -74,7 +79,7 @@ export default function ListView( {

const { ref: dropZoneRef, target: blockDropTarget } = useListViewDropZone();
const elementRef = useRef();
const treeGridRef = useMergeRefs( [ elementRef, dropZoneRef ] );
const treeGridRef = useMergeRefs( [ elementRef, dropZoneRef, ref ] );

const isMounted = useRef( false );
useEffect( () => {
Expand Down Expand Up @@ -144,3 +149,4 @@ export default function ListView( {
</>
);
}
export default forwardRef( ListView );
23 changes: 16 additions & 7 deletions packages/block-library/src/navigation/block-navigation-list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
store as blockEditorStore,
} from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
import { useRef, useEffect, useState } from '@wordpress/element';

export default function BlockNavigationList( {
clientId,
Expand All @@ -17,13 +18,21 @@ export default function BlockNavigationList( {
[ clientId ]
);

const listViewRef = useRef();
const [ minHeight, setMinHeight ] = useState( 300 );
useEffect( () => {
setMinHeight( listViewRef?.current?.clientHeight ?? 300 );
}, [] );

return (
<ListView
blocks={ blocks }
showAppender
showBlockMovers
showNestedBlocks
__experimentalFeatures={ __experimentalFeatures }
/>
<div style={ { minHeight } }>
<ListView
ref={ listViewRef }
blocks={ blocks }
showBlockMovers
showNestedBlocks
__experimentalFeatures={ __experimentalFeatures }
/>
</div>
);
}
1 change: 1 addition & 0 deletions packages/block-library/src/navigation/use-block-navigator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export default function useBlockNavigator( clientId, __experimentalFeatures ) {
onRequestClose={ () => {
setIsNavigationListOpen( false );
} }
shouldCloseOnClickOutside={ false }
>
<BlockNavigationList
clientId={ clientId }
Expand Down