Skip to content

Commit 14236f3

Browse files
Mamadukasethrubenstein
Mamaduka
authored and
sethrubenstein
committed
ListView: Converted additional content render into a Component (WordPress#51163)
1 parent 8818a03 commit 14236f3

File tree

3 files changed

+68
-74
lines changed

3 files changed

+68
-74
lines changed

‎packages/block-editor/src/components/list-view/block-contents.js

+8-7
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const ListViewBlockContents = forwardRef(
4747
[]
4848
);
4949

50-
const { renderAdditionalBlockUI, insertedBlock, setInsertedBlock } =
50+
const { AdditionalBlockContent, insertedBlock, setInsertedBlock } =
5151
useListViewContext();
5252

5353
const isBlockMoveTarget =
@@ -67,12 +67,13 @@ const ListViewBlockContents = forwardRef(
6767

6868
return (
6969
<>
70-
{ renderAdditionalBlockUI &&
71-
renderAdditionalBlockUI(
72-
block,
73-
insertedBlock,
74-
setInsertedBlock
75-
) }
70+
{ AdditionalBlockContent && (
71+
<AdditionalBlockContent
72+
block={ block }
73+
insertedBlock={ insertedBlock }
74+
setInsertedBlock={ setInsertedBlock }
75+
/>
76+
) }
7677
<BlockDraggable clientIds={ draggableClientIds }>
7778
{ ( { draggable, onDragStart, onDragEnd } ) => (
7879
<ListViewBlockSelectButton

‎packages/block-editor/src/components/list-view/index.js

+17-17
Original file line numberDiff line numberDiff line change
@@ -57,19 +57,19 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
5757
/**
5858
* Show a hierarchical list of blocks.
5959
*
60-
* @param {Object} props Components props.
61-
* @param {string} props.id An HTML element id for the root element of ListView.
62-
* @param {Array} props.blocks _deprecated_ Custom subset of block client IDs to be used instead of the default hierarchy.
63-
* @param {?HTMLElement} props.dropZoneElement Optional element to be used as the drop zone.
64-
* @param {?boolean} props.showBlockMovers Flag to enable block movers. Defaults to `false`.
65-
* @param {?boolean} props.isExpanded Flag to determine whether nested levels are expanded by default. Defaults to `false`.
66-
* @param {?boolean} props.showAppender Flag to show or hide the block appender. Defaults to `false`.
67-
* @param {?ComponentType} props.blockSettingsMenu Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component.
68-
* @param {string} props.rootClientId The client id of the root block from which we determine the blocks to show in the list.
69-
* @param {string} props.description Optional accessible description for the tree grid component.
70-
* @param {?Function} props.onSelect Optional callback to be invoked when a block is selected. Receives the block object that was selected.
71-
* @param {Function} props.renderAdditionalBlockUI Function that renders additional block content UI.
72-
* @param {Ref} ref Forwarded ref
60+
* @param {Object} props Components props.
61+
* @param {string} props.id An HTML element id for the root element of ListView.
62+
* @param {Array} props.blocks _deprecated_ Custom subset of block client IDs to be used instead of the default hierarchy.
63+
* @param {?HTMLElement} props.dropZoneElement Optional element to be used as the drop zone.
64+
* @param {?boolean} props.showBlockMovers Flag to enable block movers. Defaults to `false`.
65+
* @param {?boolean} props.isExpanded Flag to determine whether nested levels are expanded by default. Defaults to `false`.
66+
* @param {?boolean} props.showAppender Flag to show or hide the block appender. Defaults to `false`.
67+
* @param {?ComponentType} props.blockSettingsMenu Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component.
68+
* @param {string} props.rootClientId The client id of the root block from which we determine the blocks to show in the list.
69+
* @param {string} props.description Optional accessible description for the tree grid component.
70+
* @param {?Function} props.onSelect Optional callback to be invoked when a block is selected. Receives the block object that was selected.
71+
* @param {?ComponentType} props.additionalBlockContent Component that renders additional block content UI.
72+
* @param {Ref} ref Forwarded ref
7373
*/
7474
function ListViewComponent(
7575
{
@@ -83,7 +83,7 @@ function ListViewComponent(
8383
rootClientId,
8484
description,
8585
onSelect,
86-
renderAdditionalBlockUI,
86+
additionalBlockContent: AdditionalBlockContent,
8787
},
8888
ref
8989
) {
@@ -224,7 +224,7 @@ function ListViewComponent(
224224
collapse,
225225
BlockSettingsMenu,
226226
listViewInstanceId: instanceId,
227-
renderAdditionalBlockUI,
227+
AdditionalBlockContent,
228228
insertedBlock,
229229
setInsertedBlock,
230230
treeGridElementRef: elementRef,
@@ -236,7 +236,7 @@ function ListViewComponent(
236236
collapse,
237237
BlockSettingsMenu,
238238
instanceId,
239-
renderAdditionalBlockUI,
239+
AdditionalBlockContent,
240240
insertedBlock,
241241
setInsertedBlock,
242242
]
@@ -297,7 +297,7 @@ export default forwardRef( ( props, ref ) => {
297297
showAppender={ false }
298298
rootClientId={ null }
299299
onSelect={ null }
300-
renderAdditionalBlockUI={ null }
300+
additionalBlockContent={ null }
301301
blockSettingsMenu={ undefined }
302302
/>
303303
);

‎packages/block-library/src/navigation/edit/menu-inspector-controls.js

+43-50
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,48 @@ const BLOCKS_WITH_LINK_UI_SUPPORT = [
3333
'core/navigation-submenu',
3434
];
3535

36+
function AdditionalBlockContent( { block, insertedBlock, setInsertedBlock } ) {
37+
const { updateBlockAttributes } = useDispatch( blockEditorStore );
38+
39+
const supportsLinkControls = BLOCKS_WITH_LINK_UI_SUPPORT?.includes(
40+
insertedBlock?.name
41+
);
42+
const blockWasJustInserted = insertedBlock?.clientId === block.clientId;
43+
const showLinkControls = supportsLinkControls && blockWasJustInserted;
44+
45+
if ( ! showLinkControls ) {
46+
return null;
47+
}
48+
49+
const setInsertedBlockAttributes =
50+
( _insertedBlockClientId ) => ( _updatedAttributes ) => {
51+
if ( ! _insertedBlockClientId ) return;
52+
updateBlockAttributes( _insertedBlockClientId, _updatedAttributes );
53+
};
54+
55+
return (
56+
<LinkUI
57+
clientId={ insertedBlock?.clientId }
58+
link={ insertedBlock?.attributes }
59+
onClose={ () => {
60+
setInsertedBlock( null );
61+
} }
62+
hasCreateSuggestion={ false }
63+
onChange={ ( updatedValue ) => {
64+
updateAttributes(
65+
updatedValue,
66+
setInsertedBlockAttributes( insertedBlock?.clientId ),
67+
insertedBlock?.attributes
68+
);
69+
setInsertedBlock( null );
70+
} }
71+
onCancel={ () => {
72+
setInsertedBlock( null );
73+
} }
74+
/>
75+
);
76+
}
77+
3678
const MainContent = ( {
3779
clientId,
3880
currentMenuId,
@@ -52,14 +94,6 @@ const MainContent = ( {
5294
[ clientId ]
5395
);
5496

55-
const { updateBlockAttributes } = useDispatch( blockEditorStore );
56-
57-
const setInsertedBlockAttributes =
58-
( _insertedBlockClientId ) => ( _updatedAttributes ) => {
59-
if ( ! _insertedBlockClientId ) return;
60-
updateBlockAttributes( _insertedBlockClientId, _updatedAttributes );
61-
};
62-
6397
const { navigationMenu } = useNavigationMenu( currentMenuId );
6498

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

83-
const renderLinkUI = (
84-
currentBlock,
85-
lastInsertedBlock,
86-
setLastInsertedBlock
87-
) => {
88-
const blockSupportsLinkUI = BLOCKS_WITH_LINK_UI_SUPPORT?.includes(
89-
lastInsertedBlock?.name
90-
);
91-
const currentBlockWasJustInserted =
92-
lastInsertedBlock?.clientId === currentBlock.clientId;
93-
94-
const shouldShowLinkUIForBlock =
95-
blockSupportsLinkUI && currentBlockWasJustInserted;
96-
97-
return (
98-
shouldShowLinkUIForBlock && (
99-
<LinkUI
100-
clientId={ lastInsertedBlock?.clientId }
101-
link={ lastInsertedBlock?.attributes }
102-
onClose={ () => {
103-
setLastInsertedBlock( null );
104-
} }
105-
hasCreateSuggestion={ false }
106-
onChange={ ( updatedValue ) => {
107-
updateAttributes(
108-
updatedValue,
109-
setInsertedBlockAttributes(
110-
lastInsertedBlock?.clientId
111-
),
112-
lastInsertedBlock?.attributes
113-
);
114-
setLastInsertedBlock( null );
115-
} }
116-
onCancel={ () => {
117-
setLastInsertedBlock( null );
118-
} }
119-
/>
120-
)
121-
);
122-
};
123-
124117
return (
125118
<div className="wp-block-navigation__menu-inspector-controls">
126119
{ clientIdsTree.length === 0 && (
@@ -135,7 +128,7 @@ const MainContent = ( {
135128
description={ description }
136129
showAppender
137130
blockSettingsMenu={ LeafMoreMenu }
138-
renderAdditionalBlockUI={ renderLinkUI }
131+
additionalBlockContent={ AdditionalBlockContent }
139132
/>
140133
</div>
141134
);

0 commit comments

Comments
 (0)