: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
renderToggle: renderToggleComponent(other),
renderContent: () => children
/* harmony default export */ const color_style_selector = (BlockColorsStyleSelector);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/list-view.js
const listView = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M3 6h11v1.5H3V6Zm3.5 5.5h11V13h-11v-1.5ZM21 17H10v1.5h11V17Z"
/* harmony default export */ const list_view = (listView);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/context.js
const ListViewContext = (0,external_wp_element_namespaceObject.createContext)({});
const useListViewContext = () => (0,external_wp_element_namespaceObject.useContext)(ListViewContext);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/aria-referenced-text.js
* A component specifically designed to be used as an element referenced
* by ARIA attributes such as `aria-labelledby` or `aria-describedby`.
* @param {Object} props Props.
* @param {import('react').ReactNode} props.children
function AriaReferencedText({
const ref = (0,external_wp_element_namespaceObject.useRef)();
(0,external_wp_element_namespaceObject.useEffect)(() => {
// This seems like a no-op, but it fixes a bug in Firefox where
// it fails to recompute the text when only the text node changes.
// @see https://github.com/WordPress/gutenberg/pull/51035
ref.current.textContent = ref.current.textContent;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/appender.js
const Appender = (0,external_wp_element_namespaceObject.forwardRef)(({
} = useListViewContext();
const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(Appender);
const hideInserter = (0,external_wp_data_namespaceObject.useSelect)(select => {
return !!getTemplateLock(clientId) || __unstableGetEditorMode() === 'zoom-out';
const blockTitle = useBlockDisplayTitle({
const insertedBlockTitle = useBlockDisplayTitle({
clientId: insertedBlock?.clientId,
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (!insertedBlockTitle?.length) {
(0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.sprintf)(
// translators: %s: name of block being inserted (i.e. Paragraph, Image, Group etc)
(0,external_wp_i18n_namespaceObject.__)('%s block inserted'), insertedBlockTitle), 'assertive');
}, [insertedBlockTitle]);
const descriptionId = `list-view-appender__${instanceId}`;
const description = (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: 1: The name of the block. 2: The numerical position of the block. 3: The level of nesting for the block. */
(0,external_wp_i18n_namespaceObject.__)('Append to %1$s block at position %2$d, Level %3$d'), blockTitle, blockCount + 1, nestingLevel);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "list-view-appender",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inserter, {
position: "bottom right",
selectBlockOnInsert: false,
shouldDirectInsert: false,
__experimentalIsQuick: true,
'aria-describedby': descriptionId
onSelectOrClose: maybeInsertedBlock => {
if (maybeInsertedBlock?.clientId) {
setInsertedBlock(maybeInsertedBlock);
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AriaReferencedText, {
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/leaf.js
const AnimatedTreeGridRow = dist_esm_it(external_wp_components_namespaceObject.__experimentalTreeGridRow);
const ListViewLeaf = (0,external_wp_element_namespaceObject.forwardRef)(({
const animationRef = use_moving_animation({
clientId: props['data-block'],
triggerAnimationOnChange: path
const mergedRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, animationRef]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AnimatedTreeGridRow, {
className: dist_clsx('block-editor-list-view-leaf', className),
/* harmony default export */ const leaf = (ListViewLeaf);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/use-list-view-scroll-into-view.js
function useListViewScrollIntoView({
const isSingleSelection = selectedClientIds.length === 1;
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
// Skip scrolling into view if this particular block isn't selected,
// or if more than one block is selected overall. This is to avoid
// scrolling the view in a multi selection where the user has intentionally
// selected multiple blocks within the list view, but the initially
// selected block may be out of view.
if (!isSelected || !isSingleSelection || !rowItemRef.current) {
const scrollContainer = (0,external_wp_dom_namespaceObject.getScrollContainer)(rowItemRef.current);
const windowScroll = scrollContainer === ownerDocument.body || scrollContainer === ownerDocument.documentElement;
// If the there is no scroll container, of if the scroll container is the window,
// do not scroll into view, as the block is already in view.
if (windowScroll || !scrollContainer) {
const rowRect = rowItemRef.current.getBoundingClientRect();
const scrollContainerRect = scrollContainer.getBoundingClientRect();
// If the selected block is not currently visible, scroll to it.
if (rowRect.top < scrollContainerRect.top || rowRect.bottom > scrollContainerRect.bottom) {
rowItemRef.current.scrollIntoView();
}, [isSelected, isSingleSelection, rowItemRef]);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/pin-small.js
const pinSmall = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M10.97 10.159a3.382 3.382 0 0 0-2.857.955l1.724 1.723-2.836 2.913L7 17h1.25l2.913-2.837 1.723 1.723a3.38 3.38 0 0 0 .606-.825c.33-.63.446-1.343.35-2.032L17 10.695 13.305 7l-2.334 3.159Z"
/* harmony default export */ const pin_small = (pinSmall);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/lock-small.js
const lockSmall = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M15 11h-.2V9c0-1.5-1.2-2.8-2.8-2.8S9.2 7.5 9.2 9v2H9c-.6 0-1 .4-1 1v4c0 .6.4 1 1 1h6c.6 0 1-.4 1-1v-4c0-.6-.4-1-1-1zm-1.8 0h-2.5V9c0-.7.6-1.2 1.2-1.2s1.2.6 1.2 1.2v2z"
/* harmony default export */ const lock_small = (lockSmall);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/expander.js
function ListViewExpander({
// Keyboard events are handled by TreeGrid see: components/src/tree-grid/index.js
// The expander component is implemented as a pseudo element in the w3 example
// https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html
// We've mimicked this by adding an icon with aria-hidden set to true to hide this from the accessibility tree.
// For the current tree grid implementation, please do not try to make this a button.
// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
className: "block-editor-list-view__expander",
onClick: event => onClick(event, {
"data-testid": "list-view-expander",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
icon: (0,external_wp_i18n_namespaceObject.isRTL)() ? chevron_left_small : chevron_right_small
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/use-list-view-images.js
// Maximum number of images to display in a list view row.
function getImage(block) {
if (block.name !== 'core/image') {
if (block.attributes?.url) {
url: block.attributes.url,
alt: block.attributes.alt,
function getImagesFromGallery(block) {
if (block.name !== 'core/gallery' || !block.innerBlocks) {
for (const innerBlock of block.innerBlocks) {
const img = getImage(innerBlock);
if (images.length >= MAX_IMAGES) {
function getImagesFromBlock(block, isExpanded) {
const img = getImage(block);
return isExpanded ? [] : getImagesFromGallery(block);
* Get a block's preview images for display within a list view row.
* TODO: Currently only supports images from the core/image and core/gallery
* blocks. This should be expanded to support other blocks that have images,
* potentially via an API that blocks can opt into / provide their own logic.
* @param {Object} props Hook properties.
* @param {string} props.clientId The block's clientId.
* @param {boolean} props.isExpanded Whether or not the block is expanded in the list view.
* @return {Array} Images.
function useListViewImages({
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const _block = select(store).getBlock(clientId);
const images = (0,external_wp_element_namespaceObject.useMemo)(() => {
return getImagesFromBlock(block, isExpanded);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/block-select-button.js
function ListViewBlockSelectButton({
const blockInformation = useBlockDisplayInformation(clientId);
const blockTitle = useBlockDisplayTitle({
} = useBlockLock(clientId);
} = (0,external_wp_data_namespaceObject.useSelect)(select => ({
isContentOnly: select(store).getBlockEditingMode(clientId) === 'contentOnly'
const shouldShowLockIcon = isLocked && !isContentOnly;
const isSticky = blockInformation?.positionType === 'sticky';
const images = useListViewImages({
const positionLabel = blockInformation?.positionLabel ? (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: 1: Position of selected block, e.g. "Sticky" or "Fixed".
(0,external_wp_i18n_namespaceObject.__)('Position: %1$s'), blockInformation.positionLabel) : '';
// The `href` attribute triggers the browser's native HTML drag operations.
// When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html.
// We need to clear any HTML drag data to prevent `pasteHandler` from firing
// inside the `useOnBlockDrop` hook.
const onDragStartHandler = event => {
event.dataTransfer.clearData();
* @param {KeyboardEvent} event
function onKeyDown(event) {
if (event.keyCode === external_wp_keycodes_namespaceObject.ENTER || event.keyCode === external_wp_keycodes_namespaceObject.SPACE) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.Button, {
className: dist_clsx('block-editor-list-view-block-select-button', className),
onContextMenu: onContextMenu,
onMouseDown: onMouseDown,
onDragStart: onDragStartHandler,
href: `#block-${clientId}`,
"aria-describedby": ariaDescribedBy,
"aria-expanded": isExpanded,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ListViewExpander, {
onClick: onToggleExpanded
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_icon, {
icon: blockInformation?.icon,
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalHStack, {
className: "block-editor-list-view-block-select-button__label-wrapper",