function ResizableBox(_ref) {
var className = _ref.className,
children = _ref.children,
_ref$showHandle = _ref.showHandle,
showHandle = _ref$showHandle === void 0 ? true : _ref$showHandle,
_ref$__experimentalSh = _ref.__experimentalShowTooltip,
showTooltip = _ref$__experimentalSh === void 0 ? false : _ref$__experimentalSh,
_ref$__experimentalTo = _ref.__experimentalTooltipProps,
tooltipProps = _ref$__experimentalTo === void 0 ? {} : _ref$__experimentalTo,
props = Object(objectWithoutProperties["a" /* default */])(_ref, ["className", "children", "showHandle", "__experimentalShowTooltip", "__experimentalTooltipProps"]);
// Removes the inline styles in the drag handles.
var handleStylesOverrides = {
var handleClassName = 'components-resizable-box__handle';
var sideHandleClassName = 'components-resizable-box__side-handle';
var cornerHandleClassName = 'components-resizable-box__corner-handle';
return Object(external_wp_element_["createElement"])(lib_Resizable, Object(esm_extends["a" /* default */])({
className: classnames_default()('components-resizable-box__container', showHandle && 'has-show-handle', className),
top: classnames_default()(handleClassName, sideHandleClassName, 'components-resizable-box__handle-top'),
right: classnames_default()(handleClassName, sideHandleClassName, 'components-resizable-box__handle-right'),
bottom: classnames_default()(handleClassName, sideHandleClassName, 'components-resizable-box__handle-bottom'),
left: classnames_default()(handleClassName, sideHandleClassName, 'components-resizable-box__handle-left'),
topLeft: classnames_default()(handleClassName, cornerHandleClassName, 'components-resizable-box__handle-top', 'components-resizable-box__handle-left'),
topRight: classnames_default()(handleClassName, cornerHandleClassName, 'components-resizable-box__handle-top', 'components-resizable-box__handle-right'),
bottomRight: classnames_default()(handleClassName, cornerHandleClassName, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-right'),
bottomLeft: classnames_default()(handleClassName, cornerHandleClassName, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-left')
top: handleStylesOverrides,
right: handleStylesOverrides,
bottom: handleStylesOverrides,
left: handleStylesOverrides,
topLeft: handleStylesOverrides,
topRight: handleStylesOverrides,
bottomRight: handleStylesOverrides,
bottomLeft: handleStylesOverrides
}, props), children, showTooltip && Object(external_wp_element_["createElement"])(resize_tooltip, tooltipProps));
/* harmony default export */ var resizable_box = (ResizableBox);
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/responsive-wrapper/index.js
function ResponsiveWrapper(_ref) {
var naturalWidth = _ref.naturalWidth,
naturalHeight = _ref.naturalHeight,
children = _ref.children,
_ref$isInline = _ref.isInline,
isInline = _ref$isInline === void 0 ? false : _ref$isInline;
var _useResizeObserver = Object(external_wp_compose_["useResizeObserver"])(),
_useResizeObserver2 = Object(slicedToArray["a" /* default */])(_useResizeObserver, 2),
containerResizeListener = _useResizeObserver2[0],
containerWidth = _useResizeObserver2[1].width;
if (external_wp_element_["Children"].count(children) !== 1) {
paddingBottom: naturalWidth < containerWidth ? naturalHeight : naturalHeight / naturalWidth * 100 + '%'
var TagName = isInline ? 'span' : 'div';
return Object(external_wp_element_["createElement"])(TagName, {
className: "components-responsive-wrapper"
}, containerResizeListener, Object(external_wp_element_["createElement"])(TagName, {
}), Object(external_wp_element_["cloneElement"])(children, {
className: classnames_default()('components-responsive-wrapper__content', children.props.className)
/* harmony default export */ var responsive_wrapper = (ResponsiveWrapper);
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/sandbox/index.js
var observeAndResizeJS = "\n\t( function() {\n\t\tvar observer;\n\n\t\tif ( ! window.MutationObserver || ! document.body || ! window.parent ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfunction sendResize() {\n\t\t\tvar clientBoundingRect = document.body.getBoundingClientRect();\n\n\t\t\twindow.parent.postMessage( {\n\t\t\t\taction: 'resize',\n\t\t\t\twidth: clientBoundingRect.width,\n\t\t\t\theight: clientBoundingRect.height,\n\t\t\t}, '*' );\n\t\t}\n\n\t\tobserver = new MutationObserver( sendResize );\n\t\tobserver.observe( document.body, {\n\t\t\tattributes: true,\n\t\t\tattributeOldValue: false,\n\t\t\tcharacterData: true,\n\t\t\tcharacterDataOldValue: false,\n\t\t\tchildList: true,\n\t\t\tsubtree: true\n\t\t} );\n\n\t\twindow.addEventListener( 'load', sendResize, true );\n\n\t\t// Hack: Remove viewport unit styles, as these are relative\n\t\t// the iframe root and interfere with our mechanism for\n\t\t// determining the unconstrained page bounds.\n\t\tfunction removeViewportStyles( ruleOrNode ) {\n\t\t\tif( ruleOrNode.style ) {\n\t\t\t\t[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function( style ) {\n\t\t\t\t\tif ( /^\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] ) ) {\n\t\t\t\t\t\truleOrNode.style[ style ] = '';\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t}\n\t\t}\n\n\t\tArray.prototype.forEach.call( document.querySelectorAll( '[style]' ), removeViewportStyles );\n\t\tArray.prototype.forEach.call( document.styleSheets, function( stylesheet ) {\n\t\t\tArray.prototype.forEach.call( stylesheet.cssRules || stylesheet.rules, removeViewportStyles );\n\t\t} );\n\n\t\tdocument.body.style.position = 'absolute';\n\t\tdocument.body.style.width = '100%';\n\t\tdocument.body.setAttribute( 'data-resizable-iframe-connected', '' );\n\n\t\tsendResize();\n\n\t\t// Resize events can change the width of elements with 100% width, but we don't\n\t\t// get an DOM mutations for that, so do the resize when the window is resized, too.\n\t\twindow.addEventListener( 'resize', sendResize, true );\n} )();";
var sandbox_style = "\n\tbody {\n\t\tmargin: 0;\n\t}\n\thtml,\n\tbody,\n\tbody > div,\n\tbody > div iframe {\n\t\twidth: 100%;\n\t}\n\thtml.wp-has-aspect-ratio,\n\tbody.wp-has-aspect-ratio,\n\tbody.wp-has-aspect-ratio > div,\n\tbody.wp-has-aspect-ratio > div iframe {\n\t\theight: 100%;\n\t\toverflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */\n\t}\n\tbody > div > * {\n\t\tmargin-top: 0 !important; /* Has to have !important to override inline styles. */\n\t\tmargin-bottom: 0 !important;\n\t}\n";
var _ref$html = _ref.html,
html = _ref$html === void 0 ? '' : _ref$html,
title = _ref$title === void 0 ? '' : _ref$title,
_ref$styles = _ref.styles,
styles = _ref$styles === void 0 ? [] : _ref$styles,
_ref$scripts = _ref.scripts,
scripts = _ref$scripts === void 0 ? [] : _ref$scripts,
var ref = Object(external_wp_element_["useRef"])();
var _useState = Object(external_wp_element_["useState"])(0),
_useState2 = Object(slicedToArray["a" /* default */])(_useState, 2),
setWidth = _useState2[1];
var _useState3 = Object(external_wp_element_["useState"])(0),
_useState4 = Object(slicedToArray["a" /* default */])(_useState3, 2),
setHeight = _useState4[1];
function isFrameAccessible() {
return !!ref.current.contentDocument.body;
var forceRerender = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
if (!isFrameAccessible()) {
var _ref$current = ref.current,
contentDocument = _ref$current.contentDocument,
ownerDocument = _ref$current.ownerDocument;
var body = contentDocument.body;
if (!forceRerender && null !== body.getAttribute('data-resizable-iframe-connected')) {
} // put the html snippet into a html document, and then write it to the iframe's document
// we can use this in the future to inject custom styles or scripts.
// Scripts go into the body rather than the head, to support embedded content such as Instagram
// that expect the scripts to be part of the body.
var htmlDoc = Object(external_wp_element_["createElement"])("html", {
lang: ownerDocument.documentElement.lang,
}, Object(external_wp_element_["createElement"])("head", null, Object(external_wp_element_["createElement"])("title", null, title), Object(external_wp_element_["createElement"])("style", {
dangerouslySetInnerHTML: {
}), styles.map(function (rules, i) {
return Object(external_wp_element_["createElement"])("style", {
dangerouslySetInnerHTML: {
})), Object(external_wp_element_["createElement"])("body", {
"data-resizable-iframe-connected": "data-resizable-iframe-connected",
}, Object(external_wp_element_["createElement"])("div", {
dangerouslySetInnerHTML: {
}), Object(external_wp_element_["createElement"])("script", {
dangerouslySetInnerHTML: {
__html: observeAndResizeJS
}), scripts.map(function (src) {
return Object(external_wp_element_["createElement"])("script", {
}))); // writing the document like this makes it act in the same way as if it was
// loaded over the network, so DOM creation and mutation, script execution, etc.
contentDocument.write('<!DOCTYPE html>' + Object(external_wp_element_["renderToString"])(htmlDoc));
Object(external_wp_element_["useEffect"])(function () {
function tryNoForceSandbox() {
function checkMessageForResize(event) {
var iframe = ref.current; // Verify that the mounted element is the source of the message
if (!iframe || iframe.contentWindow !== event.source) {
} // Attempt to parse the message data as JSON if passed as string
var data = event.data || {};
if ('string' === typeof data) {
} // Update the state only if the message is formatted as we expect,
// i.e. as an object with a 'resize' action.
if ('resize' !== data.action) {
var ownerDocument = ref.current.ownerDocument;
var defaultView = ownerDocument.defaultView; // This used to be registered using <iframe onLoad={} />, but it made the iframe blank
// after reordering the containing block. See these two issues for more details:
// https://github.com/WordPress/gutenberg/issues/6146
// https://github.com/facebook/react/issues/18752
ref.current.addEventListener('load', tryNoForceSandbox, false);
defaultView.addEventListener('message', checkMessageForResize);
ref.current.removeEventListener('load', tryNoForceSandbox, false);
defaultView.addEventListener('message', checkMessageForResize);
Object(external_wp_element_["useEffect"])(function () {
}, [title, type, styles, scripts]);
Object(external_wp_element_["useEffect"])(function () {
return Object(external_wp_element_["createElement"])(FocusableIframe, {
className: "components-sandbox",
sandbox: "allow-scripts allow-same-origin allow-presentation",
height: Math.ceil(height)
// EXTERNAL MODULE: ./node_modules/@wordpress/components/build-module/snackbar/index.js
var snackbar = __webpack_require__("iB/h");
// EXTERNAL MODULE: external "regeneratorRuntime"
var external_regeneratorRuntime_ = __webpack_require__("dvlR");
var external_regeneratorRuntime_default = /*#__PURE__*/__webpack_require__.n(external_regeneratorRuntime_);
// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js
var asyncToGenerator = __webpack_require__("HaE+");
// EXTERNAL MODULE: ./node_modules/react-spring/web.cjs.js
var web_cjs = __webpack_require__("ZO3Q");
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/snackbar/list.js
* Renders a list of notices.
* @param {Object} $0 Props passed to the component.
* @param {Array} $0.notices Array of notices to render.
* @param {Function} $0.onRemove Function called when a notice should be removed / dismissed.
* @param {Object} $0.className Name of the class used by the component.
* @param {Object} $0.children Array of children to be rendered inside the notice list.
* @return {Object} The rendered notices list.
function SnackbarList(_ref) {
var notices = _ref.notices,
className = _ref.className,
children = _ref.children,
_ref$onRemove = _ref.onRemove,
onRemove = _ref$onRemove === void 0 ? external_lodash_["noop"] : _ref$onRemove;
var isReducedMotion = Object(external_wp_compose_["useReducedMotion"])();
var _useState = Object(external_wp_element_["useState"])(function () {
_useState2 = Object(slicedToArray["a" /* default */])(_useState, 1),
var transitions = Object(web_cjs["useTransition"])(notices, function (notice) {
enter: function enter(item) {
return /*#__PURE__*/function () {
var _ref2 = Object(asyncToGenerator["a" /* default */])( /*#__PURE__*/external_regeneratorRuntime_default.a.mark(function _callee(next) {
return external_regeneratorRuntime_default.a.wrap(function _callee$(_context) {
switch (_context.prev = _context.next) {
height: refMap.get(item).offsetHeight
return _context.abrupt("return", _context.sent);
return _ref2.apply(this, arguments);
leave: function leave() {
return /*#__PURE__*/function () {
var _ref3 = Object(asyncToGenerator["a" /* default */])( /*#__PURE__*/external_regeneratorRuntime_default.a.mark(function _callee2(next) {
return external_regeneratorRuntime_default.a.wrap(function _callee2$(_context2) {
switch (_context2.prev = _context2.next) {
return _ref3.apply(this, arguments);
immediate: isReducedMotion
className = classnames_default()('components-snackbar-list', className);
var removeNotice = function removeNotice(notice) {
return onRemove(notice.id);
return Object(external_wp_element_["createElement"])("div", {
}, children, transitions.map(function (_ref4) {
return Object(external_wp_element_["createElement"])(web_cjs["animated"].div, {
}, Object(external_wp_element_["createElement"])("div", {
className: "components-snackbar-list__notice-container",
ref: function ref(_ref5) {
return _ref5 && refMap.set(notice, _ref5);
}, Object(external_wp_element_["createElement"])(snackbar["a" /* default */], Object(esm_extends["a" /* default */])({}, Object(external_lodash_["omit"])(notice, ['content']), {
onRemove: removeNotice(notice)
/* harmony default export */ var snackbar_list = (SnackbarList);
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/config-values.js
/* harmony default export */ var config_values = ({
borderWidthFocus: '1.5px',
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/config.js
* @param {keyof CONFIG} name The variable name
* @return {string} The variable
var config_config = function config(name) {
return config_values[name];
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/spinner/styles/spinner-styles.js
function spinner_styles_templateObject() {
var data = _taggedTemplateLiteral(["\n\tfrom {\n\t\ttransform: rotate(0deg);\n\t}\n\n\tto {\n\t\ttransform: rotate(360deg);\n\t}\n"]);
spinner_styles_templateObject = function _templateObject() {
var spinAnimation = Object(core_browser_esm["c" /* keyframes */])(spinner_styles_templateObject());
var topLeft = "calc( ( ".concat(config_config('spinnerSize'), " - ").concat(config_config('spinnerSize'), " * ( 2 / 3 ) ) / 2 )");
var StyledSpinner = styled_base_browser_esm("span", {
})("display:inline-block;background-color:", colors_color('gray.600'), ";width:", config_config('spinnerSize'), ";height:", config_config('spinnerSize'), ";opacity:0.7;margin:5px 11px 0;border-radius:100%;position:relative;&::before{content:'';position:absolute;background-color:", colors_color('white'), ";top:", topLeft, ";left:", topLeft, ";width:calc( ", config_config('spinnerSize'), " / 4.5 );height:calc( ", config_config('spinnerSize'), " / 4.5 );border-radius:100%;transform-origin:calc( ", config_config('spinnerSize'), " / 3 ) calc( ", config_config('spinnerSize'), " / 3 );animation:", spinAnimation, " 1s infinite linear;}" + ( true ? "" : undefined));
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/spinner/index.js
return Object(external_wp_element_["createElement"])(StyledSpinner, {
className: "components-spinner"