Skip to content

Commit

Permalink
ListView: Converted additional content render into a Component (WordP…
Browse files Browse the repository at this point in the history 
…ress#51163)
  • Loading branch information
@Mamaduka @sethrubenstein
Mamaduka authored and sethrubenstein committed Jul 13, 2023
1 parent 8818a03 commit 14236f3
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 74 deletions.
15 changes: 8 additions & 7 deletions packages/block-editor/src/components/list-view/block-contents.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const ListViewBlockContents = forwardRef(
[]
);

const { renderAdditionalBlockUI, insertedBlock, setInsertedBlock } =
const { AdditionalBlockContent, insertedBlock, setInsertedBlock } =
useListViewContext();

const isBlockMoveTarget =
Expand All @@ -67,12 +67,13 @@ const ListViewBlockContents = forwardRef(

return (
<>
{ renderAdditionalBlockUI &&
renderAdditionalBlockUI(
block,
insertedBlock,
setInsertedBlock
) }
{ AdditionalBlockContent && (
<AdditionalBlockContent
block={ block }
insertedBlock={ insertedBlock }
setInsertedBlock={ setInsertedBlock }
/>
) }
<BlockDraggable clientIds={ draggableClientIds }>
{ ( { draggable, onDragStart, onDragEnd } ) => (
<ListViewBlockSelectButton
Expand Down
34 changes: 17 additions & 17 deletions packages/block-editor/src/components/list-view/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,19 +57,19 @@ 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 {?HTMLElement} props.dropZoneElement Optional element to be used as the drop zone.
* @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.onSelect Optional callback to be invoked when a block is selected. Receives the block object that was selected.
* @param {Function} props.renderAdditionalBlockUI Function that renders additional block content UI.
* @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 {?HTMLElement} props.dropZoneElement Optional element to be used as the drop zone.
* @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.onSelect Optional callback to be invoked when a block is selected. Receives the block object that was selected.
* @param {?ComponentType} props.additionalBlockContent Component that renders additional block content UI.
* @param {Ref} ref Forwarded ref
*/
function ListViewComponent(
{
Expand All @@ -83,7 +83,7 @@ function ListViewComponent(
rootClientId,
description,
onSelect,
renderAdditionalBlockUI,
additionalBlockContent: AdditionalBlockContent,
},
ref
) {
Expand Down Expand Up @@ -224,7 +224,7 @@ function ListViewComponent(
collapse,
BlockSettingsMenu,
listViewInstanceId: instanceId,
renderAdditionalBlockUI,
AdditionalBlockContent,
insertedBlock,
setInsertedBlock,
treeGridElementRef: elementRef,
Expand All @@ -236,7 +236,7 @@ function ListViewComponent(
collapse,
BlockSettingsMenu,
instanceId,
renderAdditionalBlockUI,
AdditionalBlockContent,
insertedBlock,
setInsertedBlock,
]
Expand Down Expand Up @@ -297,7 +297,7 @@ export default forwardRef( ( props, ref ) => {
showAppender={ false }
rootClientId={ null }
onSelect={ null }
renderAdditionalBlockUI={ null }
additionalBlockContent={ null }
blockSettingsMenu={ undefined }
/>
);
Expand Down
93 changes: 43 additions & 50 deletions packages/block-library/src/navigation/edit/menu-inspector-controls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,48 @@ const BLOCKS_WITH_LINK_UI_SUPPORT = [
'core/navigation-submenu',
];

function AdditionalBlockContent( { block, insertedBlock, setInsertedBlock } ) {
const { updateBlockAttributes } = useDispatch( blockEditorStore );

const supportsLinkControls = BLOCKS_WITH_LINK_UI_SUPPORT?.includes(
insertedBlock?.name
);
const blockWasJustInserted = insertedBlock?.clientId === block.clientId;
const showLinkControls = supportsLinkControls && blockWasJustInserted;

if ( ! showLinkControls ) {
return null;
}

const setInsertedBlockAttributes =
( _insertedBlockClientId ) => ( _updatedAttributes ) => {
if ( ! _insertedBlockClientId ) return;
updateBlockAttributes( _insertedBlockClientId, _updatedAttributes );
};

return (
<LinkUI
clientId={ insertedBlock?.clientId }
link={ insertedBlock?.attributes }
onClose={ () => {
setInsertedBlock( null );
} }
hasCreateSuggestion={ false }
onChange={ ( updatedValue ) => {
updateAttributes(
updatedValue,
setInsertedBlockAttributes( insertedBlock?.clientId ),
insertedBlock?.attributes
);
setInsertedBlock( null );
} }
onCancel={ () => {
setInsertedBlock( null );
} }
/>
);
}

const MainContent = ( {
clientId,
currentMenuId,
Expand All @@ -52,14 +94,6 @@ const MainContent = ( {
[ clientId ]
);

const { updateBlockAttributes } = useDispatch( blockEditorStore );

const setInsertedBlockAttributes =
( _insertedBlockClientId ) => ( _updatedAttributes ) => {
if ( ! _insertedBlockClientId ) return;
updateBlockAttributes( _insertedBlockClientId, _updatedAttributes );
};

const { navigationMenu } = useNavigationMenu( currentMenuId );

if ( currentMenuId && isNavigationMenuMissing ) {
Expand All @@ -80,47 +114,6 @@ const MainContent = ( {
'You have not yet created any menus. Displaying a list of your Pages'
);

const renderLinkUI = (
currentBlock,
lastInsertedBlock,
setLastInsertedBlock
) => {
const blockSupportsLinkUI = BLOCKS_WITH_LINK_UI_SUPPORT?.includes(
lastInsertedBlock?.name
);
const currentBlockWasJustInserted =
lastInsertedBlock?.clientId === currentBlock.clientId;

const shouldShowLinkUIForBlock =
blockSupportsLinkUI && currentBlockWasJustInserted;

return (
shouldShowLinkUIForBlock && (
<LinkUI
clientId={ lastInsertedBlock?.clientId }
link={ lastInsertedBlock?.attributes }
onClose={ () => {
setLastInsertedBlock( null );
} }
hasCreateSuggestion={ false }
onChange={ ( updatedValue ) => {
updateAttributes(
updatedValue,
setInsertedBlockAttributes(
lastInsertedBlock?.clientId
),
lastInsertedBlock?.attributes
);
setLastInsertedBlock( null );
} }
onCancel={ () => {
setLastInsertedBlock( null );
} }
/>
)
);
};

return (
<div className="wp-block-navigation__menu-inspector-controls">
{ clientIdsTree.length === 0 && (
Expand All @@ -135,7 +128,7 @@ const MainContent = ( {
description={ description }
showAppender
blockSettingsMenu={ LeafMoreMenu }
renderAdditionalBlockUI={ renderLinkUI }
additionalBlockContent={ AdditionalBlockContent }
/>
</div>
);
Expand Down

0 comments on commit 14236f3

Please sign in to comment.