From dc2af003cd0f34f6f8851e434d83eb9dfd23fe1a Mon Sep 17 00:00:00 2001 From: scruffian Date: Tue, 9 May 2023 11:03:09 +0100 Subject: [PATCH] List View: Adds a renderAdditionalBlockUI prop to ListView --- .../components/list-view/block-contents.js | 46 +++++++++++-------- .../src/components/list-view/block.js | 7 ++- .../src/components/list-view/index.js | 25 ++++++---- 3 files changed, 46 insertions(+), 32 deletions(-) diff --git a/packages/block-editor/src/components/list-view/block-contents.js b/packages/block-editor/src/components/list-view/block-contents.js index 507e7575344ab..a1f5f3562cfd4 100644 --- a/packages/block-editor/src/components/list-view/block-contents.js +++ b/packages/block-editor/src/components/list-view/block-contents.js @@ -15,6 +15,7 @@ import { forwardRef } from '@wordpress/element'; import ListViewBlockSelectButton from './block-select-button'; import BlockDraggable from '../block-draggable'; import { store as blockEditorStore } from '../../store'; +import { useListViewContext } from './context'; const ListViewBlockContents = forwardRef( ( @@ -46,6 +47,8 @@ const ListViewBlockContents = forwardRef( [ clientId ] ); + const { renderAdditionalBlockUI } = useListViewContext(); + const isBlockMoveTarget = blockMovingClientId && selectedBlockInBlockEditor === clientId; @@ -62,26 +65,29 @@ const ListViewBlockContents = forwardRef( : [ clientId ]; return ( - - { ( { draggable, onDragStart, onDragEnd } ) => ( - - ) } - + <> + { renderAdditionalBlockUI && renderAdditionalBlockUI( block ) } + + { ( { draggable, onDragStart, onDragEnd } ) => ( + + ) } + + ); } ); diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js index 43a135db7e5e8..4b9ca17715179 100644 --- a/packages/block-editor/src/components/list-view/block.js +++ b/packages/block-editor/src/components/list-view/block.js @@ -40,7 +40,7 @@ import useBlockDisplayInformation from '../use-block-display-information'; import { useBlockLock } from '../block-lock'; function ListViewBlock( { - block, + block: { clientId }, isDragged, isSelected, isBranchSelected, @@ -58,7 +58,6 @@ function ListViewBlock( { const cellRef = useRef( null ); const rowRef = useRef( null ); const [ isHovered, setIsHovered ] = useState( false ); - const { clientId } = block; const { isLocked, isContentLocked, canEdit } = useBlockLock( clientId ); const forceSelectionContentLock = useSelect( @@ -90,6 +89,10 @@ function ListViewBlock( { const blockInformation = useBlockDisplayInformation( clientId ); const blockTitle = blockInformation?.title || __( 'Untitled' ); + const block = useSelect( + ( select ) => select( blockEditorStore ).getBlock( clientId ), + [ clientId ] + ); const blockName = useSelect( ( select ) => select( blockEditorStore ).getBlockName( clientId ), [ clientId ] diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js index d715e35d216f7..95fffd31c3a76 100644 --- a/packages/block-editor/src/components/list-view/index.js +++ b/packages/block-editor/src/components/list-view/index.js @@ -56,16 +56,17 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36; /** * Show a hierarchical list of blocks. * - * @param {Object} props Components props. - * @param {string} props.id An HTML element id for the root element of ListView. - * @param {Array} props.blocks _deprecated_ Custom subset of block client IDs to be used instead of the default hierarchy. - * @param {?boolean} props.showBlockMovers Flag to enable block movers. Defaults to `false`. - * @param {?boolean} props.isExpanded Flag to determine whether nested levels are expanded by default. Defaults to `false`. - * @param {?boolean} props.showAppender Flag to show or hide the block appender. Defaults to `false`. - * @param {?ComponentType} props.blockSettingsMenu Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component. - * @param {string} props.rootClientId The client id of the root block from which we determine the blocks to show in the list. - * @param {string} props.description Optional accessible description for the tree grid component. - * @param {Ref} ref Forwarded ref + * @param {Object} props Components props. + * @param {string} props.id An HTML element id for the root element of ListView. + * @param {Array} props.blocks _deprecated_ Custom subset of block client IDs to be used instead of the default hierarchy. + * @param {?boolean} props.showBlockMovers Flag to enable block movers. Defaults to `false`. + * @param {?boolean} props.isExpanded Flag to determine whether nested levels are expanded by default. Defaults to `false`. + * @param {?boolean} props.showAppender Flag to show or hide the block appender. Defaults to `false`. + * @param {?ComponentType} props.blockSettingsMenu Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component. + * @param {string} props.rootClientId The client id of the root block from which we determine the blocks to show in the list. + * @param {string} props.description Optional accessible description for the tree grid component. + * @param {Function} props.renderAdditionalBlockUI Function that renders additional block content UI. + * @param {Ref} ref Forwarded ref */ function ListViewComponent( { @@ -77,6 +78,7 @@ function ListViewComponent( blockSettingsMenu: BlockSettingsMenu = BlockSettingsDropdown, rootClientId, description, + renderAdditionalBlockUI, }, ref ) { @@ -203,6 +205,7 @@ function ListViewComponent( collapse, BlockSettingsMenu, listViewInstanceId: instanceId, + renderAdditionalBlockUI, } ), [ draggedClientIds, @@ -211,6 +214,7 @@ function ListViewComponent( collapse, BlockSettingsMenu, instanceId, + renderAdditionalBlockUI, ] ); @@ -264,6 +268,7 @@ export default forwardRef( ( props, ref ) => { showAppender={ false } blockSettingsMenu={ BlockSettingsDropdown } rootClientId={ null } + renderAdditionalBlockUICallback={ null } /> ); } );