: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
} = (0,external_wp_data_namespaceObject.useDispatch)(external_wp_blockEditor_namespaceObject.store);
return (0,external_wp_compose_namespaceObject.useRefEffect)(element => {
const selectNearestEditableBlock = (x, y) => {
const editableBlockClientIds = getEnabledClientIdsTree().flatMap(({
const blockName = getBlockName(clientId);
if (blockName === 'core/template-part') {
if (blockName === 'core/post-content') {
const innerBlocks = getBlockOrder(clientId);
if (innerBlocks.length) {
let nearestDistance = Infinity,
for (const clientId of editableBlockClientIds) {
const block = element.querySelector(`[data-block="${clientId}"]`);
const rect = block.getBoundingClientRect();
const distance = distanceFromRect(x, y, rect);
if (distance < nearestDistance && distance < DISTANCE_THRESHOLD) {
nearestDistance = distance;
nearestClientId = clientId;
selectBlock(nearestClientId);
const handleClick = event => {
const shouldSelect = event.target === element || event.target.classList.contains('is-root-container');
selectNearestEditableBlock(event.clientX, event.clientY);
element.addEventListener('click', handleClick);
return () => element.removeEventListener('click', handleClick);
;// CONCATENATED MODULE: ./node_modules/@wordpress/editor/build-module/components/visual-editor/index.js
ExperimentalBlockCanvas: BlockCanvas,
} = unlock(external_wp_blockEditor_namespaceObject.privateApis);
* These post types have a special editor where they don't allow you to fill the title
* and they don't apply the layout styles.
const visual_editor_DESIGN_POST_TYPES = [PATTERN_POST_TYPE, TEMPLATE_POST_TYPE, NAVIGATION_POST_TYPE, TEMPLATE_PART_POST_TYPE];
* Given an array of nested blocks, find the first Post Content
* block inside it, recursing through any nesting levels,
* and return its attributes.
* @param {Array} blocks A list of blocks.
* @return {Object | undefined} The Post Content block.
function getPostContentAttributes(blocks) {
for (let i = 0; i < blocks.length; i++) {
if (blocks[i].name === 'core/post-content') {
return blocks[i].attributes;
if (blocks[i].innerBlocks.length) {
const nestedPostContent = getPostContentAttributes(blocks[i].innerBlocks);
return nestedPostContent;
function checkForPostContentAtRootLevel(blocks) {
for (let i = 0; i < blocks.length; i++) {
if (blocks[i].name === 'core/post-content') {
// Ideally as we unify post and site editors, we won't need these props.
const [resizeObserver, sizes] = (0,external_wp_compose_namespaceObject.useResizeObserver)();
const isMobileViewport = (0,external_wp_compose_namespaceObject.useViewportMatch)('small', '<');
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
} = select(external_wp_coreData_namespaceObject.store);
const postTypeSlug = getCurrentPostType();
const _renderingMode = getRenderingMode();
if (postTypeSlug === PATTERN_POST_TYPE) {
_wrapperBlockName = 'core/block';
} else if (_renderingMode === 'post-only') {
_wrapperBlockName = 'core/post-content';
const editorSettings = getEditorSettings();
const supportsTemplateMode = editorSettings.supportsTemplateMode;
const postTypeObject = getPostType(postTypeSlug);
const canEditTemplate = canUser('create', 'templates');
const currentTemplateId = getCurrentTemplateId();
const template = currentTemplateId ? getEditedEntityRecord('postType', TEMPLATE_POST_TYPE, currentTemplateId) : undefined;
renderingMode: _renderingMode,
postContentAttributes: editorSettings.postContentAttributes,
isDesignPostType: visual_editor_DESIGN_POST_TYPES.includes(postTypeSlug),
// Post template fetch returns a 404 on classic themes, which
// messes with e2e tests, so check it's a block theme first.
editedPostTemplate: postTypeObject?.viewable && supportsTemplateMode && canEditTemplate ? template : undefined,
wrapperBlockName: _wrapperBlockName,
wrapperUniqueId: getCurrentPostId(),
deviceType: getDeviceType(),
isFocusedEntity: !!editorSettings.onNavigateToPreviousEntityRecord,
isPreview: editorSettings.__unstableIsPreviewMode
} = (0,external_wp_data_namespaceObject.useSelect)(store_store);
hasRootPaddingAwareAlignments,
themeHasDisabledLayoutStyles,
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
} = select(external_wp_blockEditor_namespaceObject.store);
const _settings = getSettings();
themeHasDisabledLayoutStyles: _settings.disableLayoutStyles,
themeSupportsLayout: _settings.supportsLayout,
hasRootPaddingAwareAlignments: _settings.__experimentalFeatures?.useRootPaddingAwareAlignments,
isZoomOutMode: __unstableGetEditorMode() === 'zoom-out'
const deviceStyles = (0,external_wp_blockEditor_namespaceObject.__experimentalUseResizeCanvas)(deviceType);
const [globalLayoutSettings] = (0,external_wp_blockEditor_namespaceObject.useSettings)('layout');
// fallbackLayout is used if there is no Post Content,
const fallbackLayout = (0,external_wp_element_namespaceObject.useMemo)(() => {
if (renderingMode !== 'post-only' || isDesignPostType) {
if (themeSupportsLayout) {
// We need to ensure support for wide and full alignments,
// so we add the constrained type.
// Set default layout for classic themes so all alignments are supported.
}, [renderingMode, themeSupportsLayout, globalLayoutSettings, isDesignPostType]);
const newestPostContentAttributes = (0,external_wp_element_namespaceObject.useMemo)(() => {
if (!editedPostTemplate?.content && !editedPostTemplate?.blocks && postContentAttributes) {
return postContentAttributes;
// When in template editing mode, we can access the blocks directly.
if (editedPostTemplate?.blocks) {
return getPostContentAttributes(editedPostTemplate?.blocks);
// If there are no blocks, we have to parse the content string.
// Best double-check it's a string otherwise the parse function gets unhappy.
const parseableContent = typeof editedPostTemplate?.content === 'string' ? editedPostTemplate?.content : '';
return getPostContentAttributes((0,external_wp_blocks_namespaceObject.parse)(parseableContent)) || {};
}, [editedPostTemplate?.content, editedPostTemplate?.blocks, postContentAttributes]);
const hasPostContentAtRootLevel = (0,external_wp_element_namespaceObject.useMemo)(() => {
if (!editedPostTemplate?.content && !editedPostTemplate?.blocks) {
// When in template editing mode, we can access the blocks directly.
if (editedPostTemplate?.blocks) {
return checkForPostContentAtRootLevel(editedPostTemplate?.blocks);
// If there are no blocks, we have to parse the content string.
// Best double-check it's a string otherwise the parse function gets unhappy.
const parseableContent = typeof editedPostTemplate?.content === 'string' ? editedPostTemplate?.content : '';
return checkForPostContentAtRootLevel((0,external_wp_blocks_namespaceObject.parse)(parseableContent)) || false;
}, [editedPostTemplate?.content, editedPostTemplate?.blocks]);
} = newestPostContentAttributes || {};
const postContentLayoutClasses = useLayoutClasses(newestPostContentAttributes, 'core/post-content');
const blockListLayoutClass = dist_clsx({
'is-layout-flow': !themeSupportsLayout
}, themeSupportsLayout && postContentLayoutClasses, align && `align${align}`);
const postContentLayoutStyles = useLayoutStyles(newestPostContentAttributes, 'core/post-content', '.block-editor-block-list__layout.is-root-container');
// Update type for blocks using legacy layouts.
const postContentLayout = (0,external_wp_element_namespaceObject.useMemo)(() => {
return layout && (layout?.type === 'constrained' || layout?.inherit || layout?.contentSize || layout?.wideSize) ? {
}, [layout?.type, layout?.inherit, layout?.contentSize, layout?.wideSize, globalLayoutSettings]);
// If there is a Post Content block we use its layout for the block list;
// if not, this must be a classic theme, in which case we use the fallback layout.
const blockListLayout = postContentAttributes ? postContentLayout : fallbackLayout;
const postEditorLayout = blockListLayout?.type === 'default' && !hasPostContentAtRootLevel ? fallbackLayout : blockListLayout;
const observeTypingRef = (0,external_wp_blockEditor_namespaceObject.__unstableUseTypingObserver)();
const titleRef = (0,external_wp_element_namespaceObject.useRef)();
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (!autoFocus || !isCleanNewPost()) {
titleRef?.current?.focus();
}, [autoFocus, isCleanNewPost]);
// Add some styles for alignwide/alignfull Post Content and its children.
const alignCSS = `.is-root-container.alignwide { max-width: var(--wp--style--global--wide-size); margin-left: auto; margin-right: auto;}
.is-root-container.alignwide:where(.is-layout-flow) > :not(.alignleft):not(.alignright) { max-width: var(--wp--style--global--wide-size);}
.is-root-container.alignfull { max-width: none; margin-left: auto; margin-right: auto;}
.is-root-container.alignfull:where(.is-layout-flow) > :not(.alignleft):not(.alignright) { max-width: none;}`;
const localRef = (0,external_wp_element_namespaceObject.useRef)();
const typewriterRef = (0,external_wp_blockEditor_namespaceObject.__unstableUseTypewriter)();
contentRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([localRef, contentRef, renderingMode === 'post-only' ? typewriterRef : null, useFlashEditableBlocks({
isEnabled: renderingMode === 'template-locked'
}), useSelectNearestEditableBlock({
isEnabled: renderingMode === 'template-locked'
const zoomOutProps = isZoomOutMode ? {
const forceFullHeight = postType === NAVIGATION_POST_TYPE;
const enableResizing = [NAVIGATION_POST_TYPE, TEMPLATE_PART_POST_TYPE, PATTERN_POST_TYPE].includes(postType) &&
// Disable in previews / view mode.
// Disable resizing in mobile viewport.
// Dsiable resizing in zoomed-out mode.
const shouldIframe = !disableIframe || ['Tablet', 'Mobile'].includes(deviceType);
const iframeStyles = (0,external_wp_element_namespaceObject.useMemo)(() => {
return [...(styles !== null && styles !== void 0 ? styles : []), {
css: `.is-root-container{display:flow-root;${
// Some themes will have `min-height: 100vh` for the root container,
// which isn't a requirement in auto resize mode.
enableResizing ? 'min-height:0!important;' : ''}}`
}, [styles, enableResizing]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: dist_clsx('editor-visual-editor',
// this class is here for backward compatibility reasons.
'edit-post-visual-editor', className, {
'has-padding': isFocusedEntity || enableResizing,
'is-resizable': enableResizing,
'is-iframed': shouldIframe
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(resizable_editor, {
enableResizing: enableResizing,
height: sizes.height && !forceFullHeight ? sizes.height : '100%',
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(BlockCanvas, {
shouldIframe: shouldIframe,
children: [themeSupportsLayout && !themeHasDisabledLayoutStyles && renderingMode === 'post-only' && !isDesignPostType && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LayoutStyle, {
selector: ".editor-visual-editor__post-title-wrapper",
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LayoutStyle, {
selector: ".block-editor-block-list__layout.is-root-container",
}), align && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LayoutStyle, {
}), postContentLayoutStyles && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LayoutStyle, {
layout: postContentLayout,
css: postContentLayoutStyles
}), renderingMode === 'post-only' && !isDesignPostType && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: dist_clsx('editor-visual-editor__post-title-wrapper',
// The following class is only here for backward comapatibility
// some themes might be using it to style the post title.
'edit-post-visual-editor__post-title-wrapper', {
'has-global-padding': hasRootPaddingAwareAlignments
// This is using inline styles
// so it's applied for both iframed and non iframed editors.
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(post_title, {
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_blockEditor_namespaceObject.RecursionProvider, {
blockName: wrapperBlockName,
uniqueId: wrapperUniqueId,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_blockEditor_namespaceObject.BlockList, {
className: dist_clsx('is-' + deviceType.toLowerCase() + '-preview', renderingMode !== 'post-only' || isDesignPostType ? 'wp-site-blocks' : `${blockListLayoutClass} wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules.
// When iframed, pass in the html element of the iframe to
// ensure the drop zone extends to the edges of the iframe.
disableIframe ? localRef.current : localRef.current?.parentNode,
__unstableDisableDropZone:
// In template preview mode, disable drop zones at the root of the template.
renderingMode === 'template-locked' ? true : false
}), renderingMode === 'template-locked' && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(EditTemplateBlocksNotification, {
// Avoid resize listeners when not needed,
// these will trigger unnecessary re-renders
// when animating the iframe width.
enableResizing && resizeObserver]
/* harmony default export */ const visual_editor = (VisualEditor);
;// CONCATENATED MODULE: ./node_modules/@wordpress/editor/build-module/components/editor-interface/index.js
const interfaceLabels = {
/* translators: accessibility text for the editor top bar landmark region. */
header: (0,external_wp_i18n_namespaceObject.__)('Editor top bar'),
/* translators: accessibility text for the editor content landmark region. */
body: (0,external_wp_i18n_namespaceObject.__)('Editor content'),
/* translators: accessibility text for the editor settings landmark region. */
sidebar: (0,external_wp_i18n_namespaceObject.__)('Editor settings'),
/* translators: accessibility text for the editor publish landmark region. */
actions: (0,external_wp_i18n_namespaceObject.__)('Editor publish'),
/* translators: accessibility text for the editor footer landmark region. */
footer: (0,external_wp_i18n_namespaceObject.__)('Editor footer')
function EditorInterface({
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
} = select(external_wp_preferences_namespaceObject.store);
const editorSettings = getEditorSettings();
const postTypeLabel = getPostTypeLabel();
mode: select(store_store).getEditorMode(),
isRichEditingEnabled: editorSettings.richEditingEnabled,
isInserterOpened: select(store_store).isInserterOpened(),
isListViewOpened: select(store_store).isListViewOpened(),
isDistractionFree: get('core', 'distractionFree'),