: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
function DefaultAppender({
const canInsertDefaultBlock = (0,external_wp_data_namespaceObject.useSelect)(select => select(store).canInsertBlockType((0,external_wp_blocks_namespaceObject.getDefaultBlockName)(), rootClientId));
if (canInsertDefaultBlock) {
// Render the default block appender if the context supports use
// of the default appender.
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DefaultBlockAppender, {
rootClientId: rootClientId
// Fallback in case the default block can't be inserted.
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(button_block_appender, {
rootClientId: rootClientId,
className: "block-list-appender__toggle"
function BlockListAppender({
const isDragOver = (0,external_wp_data_namespaceObject.useSelect)(select => {
isBlockInsertionPointVisible,
const insertionPoint = getBlockInsertionPoint();
// Ideally we should also check for `isDragging` but currently it
// requires a lot more setup. We can revisit this once we refactor
// the DnD utility hooks.
return isBlockInsertionPointVisible() && rootClientId === insertionPoint?.rootClientId && getBlockCount(rootClientId) === 0;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TagName
// A `tabIndex` is used on the wrapping `div` element in order to
// force a focus event to occur when an appender `button` element
// is clicked. In some browsers (Firefox, Safari), button clicks do
// not emit a focus event, which could cause this event to propagate
// unexpectedly. The `tabIndex` ensures that the interaction is
// captured as a focus, without also adding an extra tab stop.
// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
className: dist_clsx('block-list-appender wp-block', className, {
'is-drag-over': isDragOver
// Needed in case the whole editor is content editable (for multi
// selection). It fixes an edge case where ArrowDown and ArrowRight
// should collapse the selection to the end of that selection and
// not into the appender.
// The appender exists to let you add the first Paragraph before
// any is inserted. To that end, this appender should visually be
// presented as a block. That means theme CSS should style it as if
// it were an empty paragraph block. That means a `wp-block` class to
// ensure the width is correct, and a [data-block] attribute to ensure
// the correct margin is applied, especially for classic themes which
// have commonly targeted that attribute for margins.
children: CustomAppender ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CustomAppender, {}) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DefaultAppender, {
rootClientId: rootClientId
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-popover/inbetween.js
const inbetween_MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER;
const InsertionPointOpenRef = (0,external_wp_element_namespaceObject.createContext)();
function BlockPopoverInbetween({
// This is a temporary hack to get the inbetween inserter to recompute properly.
const [popoverRecomputeCounter, forcePopoverRecompute] = (0,external_wp_element_namespaceObject.useReducer)(
// Module is there to make sure that the counter doesn't overflow.
s => (s + 1) % inbetween_MAX_POPOVER_RECOMPUTE_COUNTER, 0);
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const _rootClientId = getBlockRootClientId(previousClientId !== null && previousClientId !== void 0 ? previousClientId : nextClientId);
orientation: getBlockListSettings(_rootClientId)?.orientation || 'vertical',
rootClientId: _rootClientId,
isVisible: isBlockVisible(previousClientId) && isBlockVisible(nextClientId)
}, [previousClientId, nextClientId]);
const previousElement = useBlockElement(previousClientId);
const nextElement = useBlockElement(nextClientId);
const isVertical = orientation === 'vertical';
const popoverAnchor = (0,external_wp_element_namespaceObject.useMemo)(() => {
// popoverRecomputeCounter is by definition always equal or greater than 0.
// This check is only there to satisfy the correctness of the
// exhaustive-deps rule for the `useMemo` hook.
popoverRecomputeCounter < 0 || !previousElement && !nextElement || !isVisible) {
const contextElement = operation === 'group' ? nextElement || previousElement : previousElement || nextElement;
getBoundingClientRect() {
const previousRect = previousElement ? previousElement.getBoundingClientRect() : null;
const nextRect = nextElement ? nextElement.getBoundingClientRect() : null;
if (operation === 'group') {
const targetRect = nextRect || previousRect;
// No spacing is likely around blocks in this operation.
// So width of the inserter containing rect is set to 0.
height = targetRect.bottom - targetRect.top;
// Popover calculates its distance from mid-block so some
// adjustments are needed to make it appear in the right place.
left = nearestSide === 'left' ? targetRect.left - 2 : targetRect.right - 2;
top = previousRect ? previousRect.bottom : nextRect.top;
width = previousRect ? previousRect.width : nextRect.width;
height = nextRect && previousRect ? nextRect.top - previousRect.bottom : 0;
left = previousRect ? previousRect.left : nextRect.left;
top = previousRect ? previousRect.top : nextRect.top;
height = previousRect ? previousRect.height : nextRect.height;
if ((0,external_wp_i18n_namespaceObject.isRTL)()) {
left = nextRect ? nextRect.right : previousRect.left;
width = previousRect && nextRect ? previousRect.left - nextRect.right : 0;
left = previousRect ? previousRect.right : nextRect.left;
width = previousRect && nextRect ? nextRect.left - previousRect.right : 0;
return new window.DOMRect(left, top, width, height);
}, [previousElement, nextElement, popoverRecomputeCounter, isVertical, isVisible, operation, nearestSide]);
const popoverScrollRef = use_popover_scroll(__unstableContentRef);
// This is only needed for a smooth transition when moving blocks.
// When blocks are moved up/down, their position can be set by
// updating the `transform` property manually (i.e. without using CSS
// transitions or animations). The animation, which can also scroll the block
// editor, can sometimes cause the position of the Popover to get out of sync.
// A MutationObserver is therefore used to make sure that changes to the
// selectedElement's attribute (i.e. `transform`) can be tracked and used to
// trigger the Popover to rerender.
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
const observer = new window.MutationObserver(forcePopoverRecompute);
observer.observe(previousElement, {
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
const observer = new window.MutationObserver(forcePopoverRecompute);
observer.observe(nextElement, {
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
previousElement.ownerDocument.defaultView.addEventListener('resize', forcePopoverRecompute);
previousElement.ownerDocument.defaultView?.removeEventListener('resize', forcePopoverRecompute);
// If there's either a previous or a next element, show the inbetween popover.
// Note that drag and drop uses the inbetween popover to show the drop indicator
// before the first block and after the last block.
if (!previousElement && !nextElement || !isVisible) {
/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
// While ideally it would be enough to capture the
// bubbling focus event from the Inserter, due to the
// characteristics of click focusing of `button`s in
// Firefox and Safari, it is not reliable.
// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Popover, {
// Render in the old slot if needed for backward compatibility,
// otherwise render in place (not in the default popover slot).
__unstableSlotName: __unstablePopoverSlot,
inline: !__unstablePopoverSlot
// Forces a remount of the popover when its position changes
// This makes sure the popover doesn't animate from its previous position.
className: dist_clsx('block-editor-block-popover', 'block-editor-block-popover__inbetween', props.className),
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-block-popover__inbetween-container",
}, nextClientId + '--' + rootClientId);
/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
/* harmony default export */ const inbetween = (BlockPopoverInbetween);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-popover/drop-zone.js
const animateVariants = {
function BlockDropZonePopover({
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const insertionPoint = getBlockInsertionPoint();
const order = getBlockOrder(insertionPoint.rootClientId);
clientId: order[insertionPoint.index]
const reducedMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)();
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(cover, {
__unstablePopoverSlot: __unstablePopoverSlot,
__unstableContentRef: __unstableContentRef,
className: "block-editor-block-popover__drop-zone",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__unstableMotion.div, {
"data-testid": "block-popover-drop-zone",
initial: reducedMotion ? animateVariants.show : animateVariants.hide,
animate: animateVariants.show,
exit: reducedMotion ? animateVariants.show : animateVariants.exit,
className: "block-editor-block-popover__drop-zone-foreground"
/* harmony default export */ const drop_zone = (BlockDropZonePopover);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-tools/insertion-point.js
const insertion_point_InsertionPointOpenRef = (0,external_wp_element_namespaceObject.createContext)();
function InbetweenInsertionPointPopover({
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const openRef = (0,external_wp_element_namespaceObject.useContext)(insertion_point_InsertionPointOpenRef);
const ref = (0,external_wp_element_namespaceObject.useRef)();
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
getPreviousBlockClientId,
isNavigationMode: _isNavigationMode
const insertionPoint = getBlockInsertionPoint();
const order = getBlockOrder(insertionPoint.rootClientId);
let _previousClientId = order[insertionPoint.index - 1];
let _nextClientId = order[insertionPoint.index];
while (isBlockBeingDragged(_previousClientId)) {
_previousClientId = getPreviousBlockClientId(_previousClientId);
while (isBlockBeingDragged(_nextClientId)) {
_nextClientId = getNextBlockClientId(_nextClientId);
const settings = getSettings();
previousClientId: _previousClientId,
nextClientId: _nextClientId,
orientation: getBlockListSettings(insertionPoint.rootClientId)?.orientation || 'vertical',
rootClientId: insertionPoint.rootClientId,
isNavigationMode: _isNavigationMode(),
isDistractionFree: settings.isDistractionFree,
isInserterShown: insertionPoint?.__unstableWithInserter
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const disableMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)();
function onClick(event) {
if (event.target === ref.current && nextClientId && getBlockEditingMode(nextClientId) !== 'disabled') {
selectBlock(nextClientId, -1);
function maybeHideInserterPoint(event) {
// Only hide the inserter if it's triggered on the wrapper,
// and the inserter is not open.
if (event.target === ref.current && !openRef.current) {
function onFocus(event) {
// Only handle click on the wrapper specifically, and not an event
// bubbled from the inserter itself.
if (event.target !== ref.current) {
// Initial position starts from the center and invisible.
// The line expands to fill the container. If the inserter is visible it
// is delayed so it appears orchestrated.
delay: isInserterShown ? 0.5 : 0,
const inserterVariants = {
scale: disableMotion ? 1 : 0
if (isDistractionFree && !isNavigationMode) {
const orientationClassname = orientation === 'horizontal' || operation === 'group' ? 'is-horizontal' : 'is-vertical';
const className = dist_clsx('block-editor-block-list__insertion-point', orientationClassname);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inbetween, {
previousClientId: previousClientId,
nextClientId: nextClientId,
__unstablePopoverSlot: __unstablePopoverSlot,
__unstableContentRef: __unstableContentRef,
nearestSide: nearestSide,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__unstableMotion.div, {
initial: disableMotion ? 'rest' : 'start',