: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
selectBlock: selectBlock,
isBranchSelected: isSelectedBranch,
siblingBlockCount: blockCount,
showBlockMovers: showBlockMovers,
isExpanded: isDragged ? false : shouldExpand,
listPosition: nextPosition,
selectedClientIds: selectedClientIds,
isSyncedBranch: syncedBranch,
displacement: displacement,
isAfterDraggedBlocks: isAfterDraggedBlocks,
}), !showBlock && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("tr", {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("td", {
className: "block-editor-list-view-placeholder"
}), hasNestedBlocks && shouldExpand && !isDragged && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ListViewBranch, {
selectBlock: selectBlock,
showBlockMovers: showBlockMovers,
listPosition: nextPosition + 1,
fixedListWindow: fixedListWindow,
isBranchSelected: isSelectedBranch,
selectedClientIds: selectedClientIds,
isSyncedBranch: syncedBranch
}), showAppender && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalTreeGridRow, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalTreeGridCell, {
children: treeGridCellProps => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Appender, {
/* harmony default export */ const branch = ((0,external_wp_element_namespaceObject.memo)(ListViewBranch));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/drop-indicator.js
function ListViewDropIndicatorPreview({
const blockInformation = useBlockDisplayInformation(draggedBlockClientId);
const blockTitle = useBlockDisplayTitle({
clientId: draggedBlockClientId,
} = blockDropTarget || {};
const [rootBlockElement, blockElement] = (0,external_wp_element_namespaceObject.useMemo)(() => {
if (!listViewRef.current) {
// The rootClientId will be defined whenever dropping into inner
// block lists, but is undefined when dropping at the root level.
const _rootBlockElement = rootClientId ? listViewRef.current.querySelector(`[data-block="${rootClientId}"]`) : undefined;
// The clientId represents the sibling block, the dragged block will
// usually be inserted adjacent to it. It will be undefined when
// dropping a block into an empty block list.
const _blockElement = clientId ? listViewRef.current.querySelector(`[data-block="${clientId}"]`) : undefined;
return [_rootBlockElement, _blockElement];
}, [listViewRef, rootClientId, clientId]);
// The targetElement is the element that the drop indicator will appear
// before or after. When dropping into an empty block list, blockElement
// is undefined, so the indicator will appear after the rootBlockElement.
const targetElement = blockElement || rootBlockElement;
const rtl = (0,external_wp_i18n_namespaceObject.isRTL)();
const getDropIndicatorWidth = (0,external_wp_element_namespaceObject.useCallback)((targetElementRect, indent) => {
// Default to assuming that the width of the drop indicator
// should be the same as the target element.
let width = targetElement.offsetWidth;
// In deeply nested lists, where a scrollbar is present,
// the width of the drop indicator should be the width of
// the scroll container, minus the distance from the left
// edge of the scroll container to the left edge of the
const scrollContainer = (0,external_wp_dom_namespaceObject.getScrollContainer)(targetElement, 'horizontal');
const ownerDocument = targetElement.ownerDocument;
const windowScroll = scrollContainer === ownerDocument.body || scrollContainer === ownerDocument.documentElement;
if (scrollContainer && !windowScroll) {
const scrollContainerRect = scrollContainer.getBoundingClientRect();
const distanceBetweenContainerAndTarget = (0,external_wp_i18n_namespaceObject.isRTL)() ? scrollContainerRect.right - targetElementRect.right : targetElementRect.left - scrollContainerRect.left;
const scrollContainerWidth = scrollContainer.clientWidth;
if (scrollContainerWidth < width + distanceBetweenContainerAndTarget) {
width = scrollContainerWidth - distanceBetweenContainerAndTarget;
// LTR logic for ensuring the drop indicator does not extend
// beyond the right edge of the scroll container.
if (!rtl && targetElementRect.left + indent < scrollContainerRect.left) {
width -= scrollContainerRect.left - targetElementRect.left;
// RTL logic for ensuring the drop indicator does not extend
// beyond the right edge of the scroll container.
if (rtl && targetElementRect.right - indent > scrollContainerRect.right) {
width -= targetElementRect.right - scrollContainerRect.right;
// Subtract the indent from the final width of the indicator.
}, [rtl, targetElement]);
const style = (0,external_wp_element_namespaceObject.useMemo)(() => {
const targetElementRect = targetElement.getBoundingClientRect();
width: getDropIndicatorWidth(targetElementRect, 0)
}, [getDropIndicatorWidth, targetElement]);
const horizontalScrollOffsetStyle = (0,external_wp_element_namespaceObject.useMemo)(() => {
const scrollContainer = (0,external_wp_dom_namespaceObject.getScrollContainer)(targetElement);
const ownerDocument = targetElement.ownerDocument;
const windowScroll = scrollContainer === ownerDocument.body || scrollContainer === ownerDocument.documentElement;
if (scrollContainer && !windowScroll) {
const scrollContainerRect = scrollContainer.getBoundingClientRect();
const targetElementRect = targetElement.getBoundingClientRect();
const distanceBetweenContainerAndTarget = rtl ? scrollContainerRect.right - targetElementRect.right : targetElementRect.left - scrollContainerRect.left;
if (!rtl && scrollContainerRect.left > targetElementRect.left) {
transform: `translateX( ${distanceBetweenContainerAndTarget}px )`
if (rtl && scrollContainerRect.right < targetElementRect.right) {
transform: `translateX( ${distanceBetweenContainerAndTarget * -1}px )`
}, [rtl, targetElement]);
const ariaLevel = (0,external_wp_element_namespaceObject.useMemo)(() => {
const _ariaLevel = parseInt(rootBlockElement.getAttribute('aria-level'), 10);
return _ariaLevel ? _ariaLevel + 1 : 1;
const hasAdjacentSelectedBranch = (0,external_wp_element_namespaceObject.useMemo)(() => {
return targetElement.classList.contains('is-branch-selected');
const popoverAnchor = (0,external_wp_element_namespaceObject.useMemo)(() => {
const isValidDropPosition = dropPosition === 'top' || dropPosition === 'bottom' || dropPosition === 'inside';
if (!targetElement || !isValidDropPosition) {
contextElement: targetElement,
getBoundingClientRect() {
const rect = targetElement.getBoundingClientRect();
// In RTL languages, the drop indicator should be positioned
// to the left of the target element, with the width of the
// indicator determining the indent at the right edge of the
// target element. In LTR languages, the drop indicator should
// end at the right edge of the target element, with the indent
// added to the position of the left edge of the target element.
// let left = rtl ? rect.left : rect.left + indent;
// In deeply nested lists, where a scrollbar is present,
// the width of the drop indicator should be the width of
// the visible area of the scroll container. Additionally,
// the left edge of the drop indicator line needs to be
// offset by the distance the left edge of the target element
// and the left edge of the scroll container. The ensures
// that the drop indicator position never breaks out of the
// visible area of the scroll container.
const scrollContainer = (0,external_wp_dom_namespaceObject.getScrollContainer)(targetElement, 'horizontal');
const doc = targetElement.ownerDocument;
const windowScroll = scrollContainer === doc.body || scrollContainer === doc.documentElement;
// If the scroll container is not the window, offset the left position, if need be.
if (scrollContainer && !windowScroll) {
const scrollContainerRect = scrollContainer.getBoundingClientRect();
// In RTL languages, a vertical scrollbar is present on the
// left edge of the scroll container. The width of the
// scrollbar needs to be accounted for when positioning the
const scrollbarWidth = rtl ? scrollContainer.offsetWidth - scrollContainer.clientWidth : 0;
if (left < scrollContainerRect.left + scrollbarWidth) {
left = scrollContainerRect.left + scrollbarWidth;
if (dropPosition === 'top') {
top = rect.top - rect.height * 2;
// `dropPosition` is either `bottom` or `inside`
const width = getDropIndicatorWidth(rect, 0);
const height = rect.height;
return new window.DOMRect(left, top, width, height);
}, [targetElement, dropPosition, getDropIndicatorWidth, rtl]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Popover, {
className: "block-editor-list-view-drop-indicator--preview",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: dist_clsx('block-editor-list-view-drop-indicator__line', {
'block-editor-list-view-drop-indicator__line--darker': hasAdjacentSelectedBranch
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-list-view-leaf",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: dist_clsx('block-editor-list-view-block-select-button', 'block-editor-list-view-block-contents'),
style: horizontalScrollOffsetStyle,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ListViewExpander, {
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_icon, {
icon: blockInformation?.icon,
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalHStack, {
className: "block-editor-list-view-block-select-button__label-wrapper",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
className: "block-editor-list-view-block-select-button__title",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalTruncate, {
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-list-view-block__menu-cell"
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/use-block-selection.js
function useBlockSelection() {
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
getSelectedBlockClientIds,
} = (0,external_wp_data_namespaceObject.useSelect)(store);
} = (0,external_wp_data_namespaceObject.useSelect)(external_wp_blocks_namespaceObject.store);
const updateBlockSelection = (0,external_wp_element_namespaceObject.useCallback)(async (event, clientId, destinationClientId, focusPosition) => {
if (!event?.shiftKey && event?.keyCode !== external_wp_keycodes_namespaceObject.ESCAPE) {
selectBlock(clientId, focusPosition);
// To handle multiple block selection via the `SHIFT` key, prevent
// the browser default behavior of opening the link in a new window.
const isOnlyDeselection = event.type === 'keydown' && event.keyCode === external_wp_keycodes_namespaceObject.ESCAPE;
const isKeyPress = event.type === 'keydown' && (event.keyCode === external_wp_keycodes_namespaceObject.UP || event.keyCode === external_wp_keycodes_namespaceObject.DOWN || event.keyCode === external_wp_keycodes_namespaceObject.HOME || event.keyCode === external_wp_keycodes_namespaceObject.END);
// Handle clicking on a block when no blocks are selected, and return early.
if (!isKeyPress && !hasSelectedBlock() && !hasMultiSelection()) {
selectBlock(clientId, null);
const selectedBlocks = getSelectedBlockClientIds();
const clientIdWithParents = [...getBlockParents(clientId), clientId];
if (isOnlyDeselection || isKeyPress && !selectedBlocks.some(blockId => clientIdWithParents.includes(blockId))) {
// Ensure that shift-selecting blocks via the keyboard only
// expands the current selection if focusing over already
// selected blocks. Otherwise, clear the selection so that
// a user can create a new selection entirely by keyboard.
await clearSelectedBlock();
// Update selection, if not only clearing the selection.
if (!isOnlyDeselection) {
let startTarget = getBlockSelectionStart();
let endTarget = clientId;
// Handle keyboard behavior for selecting multiple blocks.
if (!hasSelectedBlock() && !hasMultiSelection()) {
// Set the starting point of the selection to the currently
// focused block, if there are no blocks currently selected.
// This ensures that as the selection is expanded or contracted,
// the starting point of the selection is anchored to that block.
if (destinationClientId) {
// If the user presses UP or DOWN, we want to ensure that the block they're
// moving to is the target for selection, and not the currently focused one.
endTarget = destinationClientId;
const startParents = getBlockParents(startTarget);
const endParents = getBlockParents(endTarget);
} = getCommonDepthClientIds(startTarget, endTarget, startParents, endParents);
await multiSelect(start, end, null);
// Announce deselected block, or number of deselected blocks if
// the total number of blocks deselected is greater than one.
const updatedSelectedBlocks = getSelectedBlockClientIds();
// If the selection is greater than 1 and the Home or End keys
// were used to generate the selection, then skip announcing the
if ((event.keyCode === external_wp_keycodes_namespaceObject.HOME || event.keyCode === external_wp_keycodes_namespaceObject.END) && updatedSelectedBlocks.length > 1) {
const selectionDiff = selectedBlocks.filter(blockId => !updatedSelectedBlocks.includes(blockId));
if (selectionDiff.length === 1) {
const title = getBlockType(getBlockName(selectionDiff[0]))?.title;
label = (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %s: block name */
(0,external_wp_i18n_namespaceObject.__)('%s deselected.'), title);
} else if (selectionDiff.length > 1) {
label = (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %s: number of deselected blocks */
(0,external_wp_i18n_namespaceObject.__)('%s blocks deselected.'), selectionDiff.length);
(0,external_wp_a11y_namespaceObject.speak)(label, 'assertive');
}, [clearSelectedBlock, getBlockName, getBlockType, getBlockParents, getBlockSelectionStart, getSelectedBlockClientIds, hasMultiSelection, hasSelectedBlock, multiSelect, selectBlock]);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/use-list-view-block-indexes.js
function useListViewBlockIndexes(blocks) {
const blockIndexes = (0,external_wp_element_namespaceObject.useMemo)(() => {
let currentGlobalIndex = 0;
const traverseBlocks = blockList => {
blockList.forEach(block => {
indexes[block.clientId] = currentGlobalIndex;
if (block.innerBlocks.length > 0) {
traverseBlocks(block.innerBlocks);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/use-list-view-client-ids.js
function useListViewClientIds({
return (0,external_wp_data_namespaceObject.useSelect)(select => {
getDraggedBlockClientIds,
getSelectedBlockClientIds,
} = unlock(select(store));
selectedClientIds: getSelectedBlockClientIds(),
draggedClientIds: getDraggedBlockClientIds(),
clientIdsTree: blocks !== null && blocks !== void 0 ? blocks : getEnabledClientIdsTree(rootClientId)
}, [blocks, rootClientId]);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/use-list-view-collapse-items.js
function useListViewCollapseItems({