: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
const block_preview_EMPTY_ADDITIONAL_STYLES = [];
additionalStyles = block_preview_EMPTY_ADDITIONAL_STYLES,
if (__experimentalMinHeight) {
minHeight = __experimentalMinHeight;
external_wp_deprecated_default()('The __experimentalMinHeight prop', {
if (__experimentalPadding) {
additionalStyles = [...additionalStyles, {
css: `body { padding: ${__experimentalPadding}px; }`
external_wp_deprecated_default()('The __experimentalPadding prop of BlockPreview', {
alternative: 'additionalStyles'
const originalSettings = (0,external_wp_data_namespaceObject.useSelect)(select => select(store).getSettings(), []);
const settings = (0,external_wp_element_namespaceObject.useMemo)(() => ({
// Disable "Spotlight mode".
__unstableIsPreviewMode: true
const renderedBlocks = (0,external_wp_element_namespaceObject.useMemo)(() => Array.isArray(blocks) ? blocks : [blocks], [blocks]);
if (!blocks || blocks.length === 0) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ExperimentalBlockEditorProvider, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AutoBlockPreview, {
viewportWidth: viewportWidth,
additionalStyles: additionalStyles
* BlockPreview renders a preview of a block or array of blocks.
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-preview/README.md
* @param {Object} preview options for how the preview should be shown
* @param {Array|Object} preview.blocks A block instance (object) or an array of blocks to be previewed.
* @param {number} preview.viewportWidth Width of the preview container in pixels. Controls at what size the blocks will be rendered inside the preview. Default: 700.
* @return {Component} The component to be rendered.
/* harmony default export */ const block_preview = ((0,external_wp_element_namespaceObject.memo)(BlockPreview));
* This hook is used to lightly mark an element as a block preview wrapper
* element. Call this hook and pass the returned props to the element to mark as
* a block preview wrapper, automatically rendering inner blocks as children. If
* you define a ref for the element, it is important to pass the ref to this
* hook, which the hook in turn will pass to the component through the props it
* returns. Optionally, you can also pass any other props through this hook, and
* they will be merged and returned.
* @param {Object} options Preview options.
* @param {WPBlock[]} options.blocks Block objects.
* @param {Object} options.props Optional. Props to pass to the element. Must contain
* the ref if one is defined.
* @param {Object} options.layout Layout settings to be used in the preview.
function useBlockPreview({
const originalSettings = (0,external_wp_data_namespaceObject.useSelect)(select => select(store).getSettings(), []);
const settings = (0,external_wp_element_namespaceObject.useMemo)(() => ({
// Clear styles included by the parent settings, as they are already output by the parent's EditorStyles.
// Disable "Spotlight mode".
__unstableIsPreviewMode: true
const disabledRef = (0,external_wp_compose_namespaceObject.useDisabled)();
const ref = (0,external_wp_compose_namespaceObject.useMergeRefs)([props.ref, disabledRef]);
const renderedBlocks = (0,external_wp_element_namespaceObject.useMemo)(() => Array.isArray(blocks) ? blocks : [blocks], [blocks]);
const children = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(ExperimentalBlockEditorProvider, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(editor_styles, {}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockListItems, {
className: dist_clsx(props.className, 'block-editor-block-preview__live-content', 'components-disabled'),
children: blocks?.length ? children : null
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/preview-panel.js
function InserterPreviewPanel({
var _example$viewportWidt;
const isReusable = (0,external_wp_blocks_namespaceObject.isReusableBlock)(item);
const blocks = (0,external_wp_element_namespaceObject.useMemo)(() => {
return (0,external_wp_blocks_namespaceObject.createBlock)(name, initialAttributes);
return (0,external_wp_blocks_namespaceObject.getBlockFromExample)(name, {
innerBlocks: example.innerBlocks
}, [name, example, initialAttributes]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-inserter__preview-container",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-inserter__preview",
children: isReusable || example ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-inserter__preview-content",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_preview, {
viewportWidth: (_example$viewportWidt = example?.viewportWidth) !== null && _example$viewportWidt !== void 0 ? _example$viewportWidt : 500,
css: 'body { padding: 24px; }'
}) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-inserter__preview-content-missing",
children: (0,external_wp_i18n_namespaceObject.__)('No preview available.')
}), !isReusable && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_card, {
/* harmony default export */ const preview_panel = (InserterPreviewPanel);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter-listbox/item.js
CompositeItemV2: item_CompositeItem
} = unlock(external_wp_components_namespaceObject.privateApis);
function InserterListboxItem({
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(item_CompositeItem, {
// Use the CompositeItem `accessibleWhenDisabled` prop
// over Button's `isFocusable`. The latter was shown to
// cause an issue with tab order in the inserter list.
accessibleWhenDisabled: true,
const propsWithTabIndex = {
tabIndex: isFirst ? 0 : htmlProps.tabIndex
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, {
if (typeof children === 'function') {
return children(propsWithTabIndex);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
/* harmony default export */ const inserter_listbox_item = ((0,external_wp_element_namespaceObject.forwardRef)(InserterListboxItem));
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/drag-handle.js
const dragHandle = /*#__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: "M8 7h2V5H8v2zm0 6h2v-2H8v2zm0 6h2v-2H8v2zm6-14v2h2V5h-2zm0 8h2v-2h-2v2zm0 6h2v-2h-2v2z"
/* harmony default export */ const drag_handle = (dragHandle);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-draggable/draggable-chip.js
function BlockDraggableChip({
const patternLabel = isPattern && (0,external_wp_i18n_namespaceObject.__)('Pattern');
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-block-draggable-chip-wrapper",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-block-draggable-chip",
"data-testid": "block-draggable-chip",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.Flex, {
className: "block-editor-block-draggable-chip__content",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexItem, {
children: icon ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_icon, {
}) : patternLabel || (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: Number of blocks. */
(0,external_wp_i18n_namespaceObject._n)('%d block', '%d blocks', count), count)
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexItem, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_icon, {
}), fadeWhenDisabled && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexItem, {
className: "block-editor-block-draggable-chip__disabled",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
className: "block-editor-block-draggable-chip__disabled-icon"
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter-draggable-blocks/index.js
const InserterDraggableBlocks = ({
const blockTypeIcon = (0,external_wp_data_namespaceObject.useSelect)(select => {
} = select(external_wp_blocks_namespaceObject.store);
return blocks.length === 1 && getBlockType(blocks[0].name)?.icon;
} = unlock((0,external_wp_data_namespaceObject.useDispatch)(store));
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Draggable, {
__experimentalTransferDataType: "wp-blocks",
transferData: transferData,
const parsedBlocks = pattern?.type === INSERTER_PATTERN_TYPES.user && pattern?.syncStatus !== 'unsynced' ? [(0,external_wp_blocks_namespaceObject.createBlock)('core/block', {
event.dataTransfer.setData('text/html', (0,external_wp_blocks_namespaceObject.serialize)(parsedBlocks));
__experimentalDragComponent: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockDraggableChip, {
icon: icon || !pattern && blockTypeIcon,
onDragStart: isEnabled ? onDraggableStart : undefined,
onDragEnd: isEnabled ? onDraggableEnd : undefined
/* harmony default export */ const inserter_draggable_blocks = (InserterDraggableBlocks);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter-list-item/index.js
function InserterListItem({
const isDragging = (0,external_wp_element_namespaceObject.useRef)(false);
const itemIconStyle = item.icon ? {
backgroundColor: item.icon.background,
color: item.icon.foreground
const blocks = (0,external_wp_element_namespaceObject.useMemo)(() => [(0,external_wp_blocks_namespaceObject.createBlock)(item.name, item.initialAttributes, (0,external_wp_blocks_namespaceObject.createBlocksFromInnerBlocksTemplate)(item.innerBlocks))], [item.name, item.initialAttributes, item.innerBlocks]);
const isSynced = (0,external_wp_blocks_namespaceObject.isReusableBlock)(item) && item.syncStatus !== 'unsynced' || (0,external_wp_blocks_namespaceObject.isTemplatePart)(item);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inserter_draggable_blocks, {
isEnabled: isDraggable && !item.isDisabled,
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: dist_clsx('block-editor-block-types-list__list-item', {
isDragging.current = true;
isDragging.current = false;
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(inserter_listbox_item, {
className: dist_clsx('block-editor-block-types-list__item', className),
disabled: item.isDisabled,
onSelect(item, (0,external_wp_keycodes_namespaceObject.isAppleOS)() ? event.metaKey : event.ctrlKey);
if (keyCode === external_wp_keycodes_namespaceObject.ENTER) {
onSelect(item, (0,external_wp_keycodes_namespaceObject.isAppleOS)() ? event.metaKey : event.ctrlKey);
if (isDragging.current) {
onMouseLeave: () => onHover(null),
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
className: "block-editor-block-types-list__item-icon",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_icon, {
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
className: "block-editor-block-types-list__item-title",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalTruncate, {
/* harmony default export */ const inserter_list_item = ((0,external_wp_element_namespaceObject.memo)(InserterListItem));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter-listbox/group.js
function InserterListboxGroup(props, ref) {
const [shouldSpeak, setShouldSpeak] = (0,external_wp_element_namespaceObject.useState)(false);
(0,external_wp_element_namespaceObject.useEffect)(() => {
(0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.__)('Use left and right arrow keys to move through blocks'));
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
"aria-orientation": "horizontal",