: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
className: "customize-widgets-welcome-guide",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "customize-widgets-welcome-guide__image__wrapper",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("picture", {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("source", {
srcSet: "https://s.w.org/images/block-editor/welcome-editor.svg",
media: "(prefers-reduced-motion: reduce)"
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("img", {
className: "customize-widgets-welcome-guide__image",
src: "https://s.w.org/images/block-editor/welcome-editor.gif",
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("h1", {
className: "customize-widgets-welcome-guide__heading",
children: (0,external_wp_i18n_namespaceObject.__)('Welcome to block Widgets')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("p", {
className: "customize-widgets-welcome-guide__text",
children: isEntirelyBlockWidgets ? (0,external_wp_i18n_namespaceObject.__)('Your theme provides different “block” areas for you to add and edit content. Try adding a search bar, social icons, or other types of blocks here and see how they’ll look on your site.') : (0,external_wp_i18n_namespaceObject.__)('You can now add any block to your site’s widget areas. Don’t worry, all of your favorite widgets still work flawlessly.')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
className: "customize-widgets-welcome-guide__button",
onClick: () => toggle('core/customize-widgets', 'welcomeGuide'),
children: (0,external_wp_i18n_namespaceObject.__)('Got it')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("hr", {
className: "customize-widgets-welcome-guide__separator"
}), !isEntirelyBlockWidgets && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("p", {
className: "customize-widgets-welcome-guide__more-info",
children: [(0,external_wp_i18n_namespaceObject.__)('Want to stick with the old widgets?'), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("br", {}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ExternalLink, {
href: (0,external_wp_i18n_namespaceObject.__)('https://wordpress.org/plugins/classic-widgets/'),
children: (0,external_wp_i18n_namespaceObject.__)('Get the Classic Widgets plugin.')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("p", {
className: "customize-widgets-welcome-guide__more-info",
children: [(0,external_wp_i18n_namespaceObject.__)('New to the block editor?'), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("br", {}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ExternalLink, {
href: (0,external_wp_i18n_namespaceObject.__)('https://wordpress.org/documentation/article/wordpress-block-editor/'),
children: (0,external_wp_i18n_namespaceObject.__)("Here's a detailed guide.")
;// CONCATENATED MODULE: ./node_modules/@wordpress/customize-widgets/build-module/components/keyboard-shortcuts/index.js
function KeyboardShortcuts({
(0,external_wp_keyboardShortcuts_namespaceObject.useShortcut)('core/customize-widgets/undo', event => {
(0,external_wp_keyboardShortcuts_namespaceObject.useShortcut)('core/customize-widgets/redo', event => {
(0,external_wp_keyboardShortcuts_namespaceObject.useShortcut)('core/customize-widgets/save', event => {
function KeyboardShortcutsRegister() {
} = (0,external_wp_data_namespaceObject.useDispatch)(external_wp_keyboardShortcuts_namespaceObject.store);
(0,external_wp_element_namespaceObject.useEffect)(() => {
name: 'core/customize-widgets/undo',
description: (0,external_wp_i18n_namespaceObject.__)('Undo your last changes.'),
name: 'core/customize-widgets/redo',
description: (0,external_wp_i18n_namespaceObject.__)('Redo your last undo.'),
modifier: 'primaryShift',
// Disable on Apple OS because it conflicts with the browser's
// history shortcut. It's a fine alias for both Windows and Linux.
// Since there's no conflict for Ctrl+Shift+Z on both Windows and
// Linux, we keep it as the default for consistency.
aliases: (0,external_wp_keycodes_namespaceObject.isAppleOS)() ? [] : [{
name: 'core/customize-widgets/save',
description: (0,external_wp_i18n_namespaceObject.__)('Save your changes.'),
unregisterShortcut('core/customize-widgets/undo');
unregisterShortcut('core/customize-widgets/redo');
unregisterShortcut('core/customize-widgets/save');
KeyboardShortcuts.Register = KeyboardShortcutsRegister;
/* harmony default export */ const keyboard_shortcuts = (KeyboardShortcuts);
;// CONCATENATED MODULE: ./node_modules/@wordpress/customize-widgets/build-module/components/block-appender/index.js
function BlockAppender(props) {
const ref = (0,external_wp_element_namespaceObject.useRef)();
const isBlocksListEmpty = (0,external_wp_data_namespaceObject.useSelect)(select => select(external_wp_blockEditor_namespaceObject.store).getBlockCount() === 0);
// Move the focus to the block appender to prevent focus from
// being lost when emptying the widget area.
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (isBlocksListEmpty && ref.current) {
if (!ownerDocument.activeElement || ownerDocument.activeElement === ownerDocument.body) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_blockEditor_namespaceObject.ButtonBlockAppender, {
;// CONCATENATED MODULE: ./node_modules/@wordpress/customize-widgets/build-module/components/sidebar-block-editor/index.js
ExperimentalBlockCanvas: BlockCanvas
} = unlock(external_wp_blockEditor_namespaceObject.privateApis);
} = unlock(external_wp_blockLibrary_namespaceObject.privateApis);
function SidebarBlockEditor({
const [isInserterOpened, setIsInserterOpened] = useInserter(inserter);
const isMediumViewport = (0,external_wp_compose_namespaceObject.useViewportMatch)('small');
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
} = select(external_wp_preferences_namespaceObject.store);
hasUploadPermissions: (_select$canUser = select(external_wp_coreData_namespaceObject.store).canUser('create', 'media')) !== null && _select$canUser !== void 0 ? _select$canUser : true,
isFixedToolbarActive: !!get('core/customize-widgets', 'fixedToolbar'),
keepCaretInsideBlock: !!get('core/customize-widgets', 'keepCaretInsideBlock'),
isWelcomeGuideActive: !!get('core/customize-widgets', 'welcomeGuide')
const settings = (0,external_wp_element_namespaceObject.useMemo)(() => {
let mediaUploadBlockEditor;
if (hasUploadPermissions) {
mediaUploadBlockEditor = ({
(0,external_wp_mediaUtils_namespaceObject.uploadMedia)({
wpAllowedMimeTypes: blockEditorSettings.allowedMimeTypes,
__experimentalSetIsInserterOpened: setIsInserterOpened,
mediaUpload: mediaUploadBlockEditor,
hasFixedToolbar: isFixedToolbarActive || !isMediumViewport,
__unstableHasCustomAppender: true
}, [hasUploadPermissions, blockEditorSettings, isFixedToolbarActive, isMediumViewport, keepCaretInsideBlock, setIsInserterOpened]);
if (isWelcomeGuideActive) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WelcomeGuide, {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(keyboard_shortcuts.Register, {}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockKeyboardShortcuts, {}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(SidebarEditorProvider, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(keyboard_shortcuts, {
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(header, {
isInserterOpened: isInserterOpened,
setIsInserterOpened: setIsInserterOpened,
isFixedToolbarActive: isFixedToolbarActive || !isMediumViewport
}), (isFixedToolbarActive || !isMediumViewport) && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_blockEditor_namespaceObject.BlockToolbar, {
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockCanvas, {
styles: settings.defaultEditorStyles,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_blockEditor_namespaceObject.BlockList, {
renderAppender: BlockAppender
}), (0,external_wp_element_namespaceObject.createPortal)(
// This is a temporary hack to prevent button component inside <BlockInspector>
// from submitting form when type="button" is not specified.
(0,external_ReactJSXRuntime_namespaceObject.jsx)("form", {
onSubmit: event => event.preventDefault(),
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_blockEditor_namespaceObject.BlockInspector, {})
}), inspector.contentContainer[0])]
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_blockEditor_namespaceObject.__unstableBlockSettingsMenuFirstItem, {
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_inspector_button, {
;// CONCATENATED MODULE: ./node_modules/@wordpress/customize-widgets/build-module/components/sidebar-controls/index.js
const SidebarControlsContext = (0,external_wp_element_namespaceObject.createContext)();
function SidebarControls({
const context = (0,external_wp_element_namespaceObject.useMemo)(() => ({
}), [sidebarControls, activeSidebarControl]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SidebarControlsContext.Provider, {
function useSidebarControls() {
} = (0,external_wp_element_namespaceObject.useContext)(SidebarControlsContext);
function useActiveSidebarControl() {
} = (0,external_wp_element_namespaceObject.useContext)(SidebarControlsContext);
return activeSidebarControl;
;// CONCATENATED MODULE: ./node_modules/@wordpress/customize-widgets/build-module/components/customize-widgets/use-clear-selected-block.js
* We can't just use <BlockSelectionClearer> because the customizer has
* many root nodes rather than just one in the post editor.
* We need to listen to the focus events in all those roots, and also in
* This hook will clear the selected block when focusing outside the editor,
* 1. Focusing on popovers.
* 2. Focusing on the inspector.
* 3. Focusing on any modals/dialogs.
* These cases are normally triggered by user interactions from the editor,
* not by explicitly focusing outside the editor, hence no need for clearing.
* @param {Object} sidebarControl The sidebar control instance.
* @param {Object} popoverRef The ref object of the popover node container.
function useClearSelectedBlock(sidebarControl, popoverRef) {
} = (0,external_wp_data_namespaceObject.useSelect)(external_wp_blockEditor_namespaceObject.store);
} = (0,external_wp_data_namespaceObject.useDispatch)(external_wp_blockEditor_namespaceObject.store);
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (popoverRef.current && sidebarControl) {
const inspector = sidebarControl.inspector;
const container = sidebarControl.container[0];
const ownerDocument = container.ownerDocument;
const ownerWindow = ownerDocument.defaultView;
function handleClearSelectedBlock(element) {
// 1. Make sure there are blocks being selected.
(hasSelectedBlock() || hasMultiSelection()) &&
// 2. The element should exist in the DOM (not deleted).
element && ownerDocument.contains(element) &&
// 3. It should also not exist in the container, the popover, nor the dialog.
!container.contains(element) && !popoverRef.current.contains(element) && !element.closest('[role="dialog"]') &&
// 4. The inspector should not be opened.
// Handle mouse down in the same document.
function handleMouseDown(event) {
handleClearSelectedBlock(event.target);
// Handle focusing outside the current document, like to iframes.
handleClearSelectedBlock(ownerDocument.activeElement);
ownerDocument.addEventListener('mousedown', handleMouseDown);
ownerWindow.addEventListener('blur', handleBlur);
ownerDocument.removeEventListener('mousedown', handleMouseDown);
ownerWindow.removeEventListener('blur', handleBlur);
}, [popoverRef, sidebarControl, hasSelectedBlock, hasMultiSelection, clearSelectedBlock]);
;// CONCATENATED MODULE: ./node_modules/@wordpress/customize-widgets/build-module/components/customize-widgets/index.js
function CustomizeWidgets({
const [activeSidebarControl, setActiveSidebarControl] = (0,external_wp_element_namespaceObject.useState)(null);
const parentContainer = document.getElementById('customize-theme-controls');
const popoverRef = (0,external_wp_element_namespaceObject.useRef)();
useClearSelectedBlock(activeSidebarControl, popoverRef);
(0,external_wp_element_namespaceObject.useEffect)(() => {
const unsubscribers = sidebarControls.map(sidebarControl => sidebarControl.subscribe(expanded => {
setActiveSidebarControl(sidebarControl);
unsubscribers.forEach(unsubscriber => unsubscriber());
const activeSidebar = activeSidebarControl && (0,external_wp_element_namespaceObject.createPortal)( /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ErrorBoundary, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SidebarBlockEditor, {
blockEditorSettings: blockEditorSettings,
sidebar: activeSidebarControl.sidebarAdapter,
inserter: activeSidebarControl.inserter,
inspector: activeSidebarControl.inspector
}, activeSidebarControl.id)
}), activeSidebarControl.container[0]);
// We have to portal this to the parent of both the editor and the inspector,
// so that the popovers will appear above both of them.
const popover = parentContainer && (0,external_wp_element_namespaceObject.createPortal)( /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "customize-widgets-popover",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Popover.Slot, {})
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.SlotFillProvider, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SidebarControls, {
sidebarControls: sidebarControls,
activeSidebarControl: activeSidebarControl,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(FocusControl, {
sidebarControls: sidebarControls,
children: [activeSidebar, popover]
;// CONCATENATED MODULE: ./node_modules/@wordpress/customize-widgets/build-module/controls/inspector-section.js
function getInspectorSection() {
return class InspectorSection extends customize.Section {
constructor(id, options) {
this.parentSection = options.parentSection;
this.returnFocusWhenClose = null;
this.triggerActiveCallbacks();
this.contentContainer[0].classList.add('customize-widgets-layout__inspector');
onChangeExpanded(expanded, args) {
super.onChangeExpanded(expanded, args);
if (this.parentSection && !args.unchanged) {
this.parentSection.collapse({
this.parentSection.expand({
completeCallback: () => {
// Return focus after finishing the transition.
if (this.returnFocusWhenClose && !this.contentContainer[0].contains(this.returnFocusWhenClose)) {
this.returnFocusWhenClose.focus();