: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
setClipboardBlocks(event, blocks, registry);
if (event.type === 'cut') {
// We need to also check if at the start we needed to
// expand the selection, as in this point we might have
// programmatically fully selected the blocks above.
if (shouldHandleWholeBlocks && !expandSelectionIsNeeded) {
removeBlocks(selectedBlockClientIds);
event.target.ownerDocument.activeElement.contentEditable = false;
__unstableDeleteSelection();
} else if (event.type === 'paste') {
__experimentalCanUserUseUnfilteredHTML: canUserUseUnfilteredHTML
const isInternal = event.clipboardData.getData('rich-text') === 'true';
} = getPasteEventData(event);
const isFullySelected = __unstableIsFullySelected();
const fromTransforms = (0,external_wp_blocks_namespaceObject.getBlockTransforms)('from');
blocks = files.reduce((accumulator, file) => {
const transformation = (0,external_wp_blocks_namespaceObject.findTransform)(fromTransforms, transform => transform.type === 'files' && transform.isMatch([file]));
accumulator.push(transformation.transform([file]));
blocks = (0,external_wp_blocks_namespaceObject.pasteHandler)({
mode: isFullySelected ? 'BLOCKS' : 'AUTO',
// Inline paste: let rich text handle it.
if (typeof blocks === 'string') {
replaceBlocks(selectedBlockClientIds, blocks, blocks.length - 1, -1);
// If a block doesn't support splitting, let rich text paste
if (!hasMultiSelection() && !(0,external_wp_blocks_namespaceObject.hasBlockSupport)(getBlockName(selectedBlockClientIds[0]), 'splitting', false) && !event.__deprecatedOnSplit) {
const [firstSelectedClientId] = selectedBlockClientIds;
const rootClientId = getBlockRootClientId(firstSelectedClientId);
for (const block of blocks) {
if (canInsertBlockType(block.name, rootClientId)) {
// If a block cannot be inserted in a root block, try
// converting it to that root block type and insert the
// Example: paragraphs cannot be inserted into a list,
// so convert the paragraphs to a list for list items.
const rootBlockName = getBlockName(rootClientId);
const switchedBlocks = block.name !== rootBlockName ? (0,external_wp_blocks_namespaceObject.switchToBlockType)(block, rootBlockName) : [block];
for (const switchedBlock of switchedBlocks) {
for (const innerBlock of switchedBlock.innerBlocks) {
newBlocks.push(innerBlock);
__unstableSplitSelection(newBlocks);
node.ownerDocument.addEventListener('copy', handler);
node.ownerDocument.addEventListener('cut', handler);
node.ownerDocument.addEventListener('paste', handler);
node.ownerDocument.removeEventListener('copy', handler);
node.ownerDocument.removeEventListener('cut', handler);
node.ownerDocument.removeEventListener('paste', handler);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/writing-flow/index.js
function useWritingFlow() {
const [before, ref, after] = useTabNav();
const hasMultiSelection = (0,external_wp_data_namespaceObject.useSelect)(select => select(store).hasMultiSelection(), []);
return [before, (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, useClipboardHandler(), useInput(), useDragSelection(), useSelectionObserver(), useClickSelection(), useMultiSelection(), useSelectAll(), useArrowNav(), (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
if (!hasMultiSelection) {
node.classList.add('has-multi-selection');
node.setAttribute('aria-label', (0,external_wp_i18n_namespaceObject.__)('Multiple selected blocks'));
node.classList.remove('has-multi-selection');
node.removeAttribute('aria-label');
}, [hasMultiSelection])]), after];
const [before, ref, after] = useWritingFlow();
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [before, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, forwardedRef]),
className: dist_clsx(props.className, 'block-editor-writing-flow'),
* Handles selection and navigation across blocks. This component should be
* wrapped around BlockList.
* @param {Object} props Component properties.
* @param {Element} props.children Children to be rendered.
/* harmony default export */ const writing_flow = ((0,external_wp_element_namespaceObject.forwardRef)(WritingFlow));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/iframe/get-compatibility-styles.js
let compatibilityStyles = null;
* Returns a list of stylesheets that target the editor canvas. A stylesheet is
* considered targetting the editor a canvas if it contains the
* `editor-styles-wrapper`, `wp-block`, or `wp-block-*` class selectors.
* Ideally, this hook should be removed in the future and styles should be added
* explicitly as editor styles.
function getCompatibilityStyles() {
if (compatibilityStyles) {
return compatibilityStyles;
// Only memoize the result once on load, since these stylesheets should not
compatibilityStyles = Array.from(document.styleSheets).reduce((accumulator, styleSheet) => {
// May fail for external styles.
// eslint-disable-next-line no-unused-expressions
// Stylesheet is added by another stylesheet. See
// https://developer.mozilla.org/en-US/docs/Web/API/StyleSheet/ownerNode#notes.
if (ownerNode === null) {
// Don't try to add the reset styles, which were removed as a dependency
// from `edit-blocks` for the iframe since we don't need to reset admin
if (ownerNode.id === 'wp-reset-editor-styles-css') {
// Don't try to add styles without ID. Styles enqueued via the WP dependency system will always have IDs.
function matchFromRules(_cssRules) {
return Array.from(_cssRules).find(({
// If the rule is conditional then it will not have selector text.
// Recurse into child CSS ruleset to determine selector eligibility.
return matchFromRules(__cssRules);
return selectorText && (selectorText.includes('.editor-styles-wrapper') || selectorText.includes('.wp-block'));
if (matchFromRules(cssRules)) {
const isInline = ownerNode.tagName === 'STYLE';
// If the current target is inline,
// it could be a dependency of an existing stylesheet.
// Look for that dependency and add it BEFORE the current target.
const mainStylesCssId = ownerNode.id.replace('-inline-css', '-css');
const mainStylesElement = document.getElementById(mainStylesCssId);
accumulator.push(mainStylesElement.cloneNode(true));
accumulator.push(ownerNode.cloneNode(true));
// If the current target is not inline,
// we still look for inline styles that could be relevant for the current target.
// If they exist, add them AFTER the current target.
const inlineStylesCssId = ownerNode.id.replace('-css', '-inline-css');
const inlineStylesElement = document.getElementById(inlineStylesCssId);
if (inlineStylesElement) {
accumulator.push(inlineStylesElement.cloneNode(true));
return compatibilityStyles;
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/iframe/index.js
function bubbleEvent(event, Constructor, frame) {
for (const key in event) {
// Check if the event is a MouseEvent generated within the iframe.
// If so, adjust the coordinates to be relative to the position of
// the iframe. This ensures that components such as Draggable
// receive coordinates relative to the window, instead of relative
// to the iframe. Without this, the Draggable event handler would
// result in components "jumping" position as soon as the user
// drags over the iframe.
if (event instanceof frame.contentDocument.defaultView.MouseEvent) {
const rect = frame.getBoundingClientRect();
init.clientX += rect.left;
init.clientY += rect.top;
const newEvent = new Constructor(event.type, init);
if (init.defaultPrevented) {
newEvent.preventDefault();
const cancelled = !frame.dispatchEvent(newEvent);
* Bubbles some event types (keydown, keypress, and dragover) to parent document
* document to ensure that the keyboard shortcuts and drag and drop work.
* Ideally, we should remove event bubbling in the future. Keyboard shortcuts
* should be context dependent, e.g. actions on blocks like Cmd+A should not
* work globally outside the block editor.
* @param {Document} iframeDocument Document to attach listeners to.
function useBubbleEvents(iframeDocument) {
return (0,external_wp_compose_namespaceObject.useRefEffect)(() => {
const html = iframeDocument.documentElement;
const eventTypes = ['dragover', 'mousemove'];
for (const name of eventTypes) {
handlers[name] = event => {
const prototype = Object.getPrototypeOf(event);
const constructorName = prototype.constructor.name;
const Constructor = window[constructorName];
bubbleEvent(event, Constructor, frameElement);
html.addEventListener(name, handlers[name]);
for (const name of eventTypes) {
html.removeEventListener(name, handlers[name]);
title = (0,external_wp_i18n_namespaceObject.__)('Editor canvas'),
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const settings = getSettings();
resolvedAssets: settings.__unstableResolvedAssets,
isPreviewMode: settings.__unstableIsPreviewMode
const [iframeDocument, setIframeDocument] = (0,external_wp_element_namespaceObject.useState)();
const prevContainerWidth = (0,external_wp_element_namespaceObject.useRef)();
const [bodyClasses, setBodyClasses] = (0,external_wp_element_namespaceObject.useState)([]);
const clearerRef = useBlockSelectionClearer();
const [before, writingFlowRef, after] = useWritingFlow();
const [contentResizeListener, {
}] = (0,external_wp_compose_namespaceObject.useResizeObserver)();
const [containerResizeListener, {
}] = (0,external_wp_compose_namespaceObject.useResizeObserver)();
const setRef = (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
setIframeDocument(node.contentDocument);
// Prevent the default browser action for files dropped outside of dropzones.
function preventFileDropDefault(event) {
iFrameDocument = contentDocument;
documentElement.classList.add('block-editor-iframe__html');
clearerRef(documentElement);
// Ideally ALL classes that are added through get_body_class should
// be added in the editor too, which we'll somehow have to get from
// the server in the future (which will run the PHP filters).
setBodyClasses(Array.from(ownerDocument.body.classList).filter(name => name.startsWith('admin-color-') || name.startsWith('post-type-') || name === 'wp-embed-responsive'));
contentDocument.dir = ownerDocument.dir;
for (const compatStyle of getCompatibilityStyles()) {
if (contentDocument.getElementById(compatStyle.id)) {
contentDocument.head.appendChild(compatStyle.cloneNode(true));
// eslint-disable-next-line no-console
console.warn(`${compatStyle.id} was added to the iframe incorrectly. Please use block.json or enqueue_block_assets to add styles to the iframe.`, compatStyle);
iFrameDocument.addEventListener('dragover', preventFileDropDefault, false);
iFrameDocument.addEventListener('drop', preventFileDropDefault, false);
node.addEventListener('load', onLoad);
node.removeEventListener('load', onLoad);
iFrameDocument?.removeEventListener('dragover', preventFileDropDefault);
iFrameDocument?.removeEventListener('drop', preventFileDropDefault);
const [iframeWindowInnerHeight, setIframeWindowInnerHeight] = (0,external_wp_element_namespaceObject.useState)();
const iframeResizeRef = (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
const nodeWindow = node.ownerDocument.defaultView;
setIframeWindowInnerHeight(nodeWindow.innerHeight);
setIframeWindowInnerHeight(nodeWindow.innerHeight);
nodeWindow.addEventListener('resize', onResize);
nodeWindow.removeEventListener('resize', onResize);
const [windowInnerWidth, setWindowInnerWidth] = (0,external_wp_element_namespaceObject.useState)();
const windowResizeRef = (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
const nodeWindow = node.ownerDocument.defaultView;
setWindowInnerWidth(nodeWindow.innerWidth);
setWindowInnerWidth(nodeWindow.innerWidth);
nodeWindow.addEventListener('resize', onResize);
nodeWindow.removeEventListener('resize', onResize);
const isZoomedOut = scale !== 1;
(0,external_wp_element_namespaceObject.useEffect)(() => {
prevContainerWidth.current = containerWidth;
}, [containerWidth, isZoomedOut]);
const disabledRef = (0,external_wp_compose_namespaceObject.useDisabled)({
const bodyRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([useBubbleEvents(iframeDocument), contentRef, clearerRef, writingFlowRef, disabledRef,
// Avoid resize listeners when not needed, these will trigger
// unnecessary re-renders when animating the iframe width, or when
// expanding preview iframes.
isZoomedOut ? iframeResizeRef : null]);
// Correct doctype is required to enable rendering in standards
// mode. Also preload the styles to avoid a flash of unstyled
const html = `<!doctype html>
<script>window.frameElement._load()</script>
/* Lowest specificity to not override global styles */
/* Default background color in case zoom out mode background
colors the html element */
It is recommended that you Edit text format, this type of Fix handles quite a lot in one request
