%PDF-
%PDF-
Mini Shell
Mini Shell
/******/ (() => { // webpackBootstrap
/******/ var __webpack_modules__ = ({
/***/ 4306:
/***/ (function(module, exports) {
var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
autosize 4.0.4
license: MIT
http://www.jacklmoore.com/autosize
*/
(function (global, factory) {
if (true) {
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [module, exports], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
} else { var mod; }
})(this, function (module, exports) {
'use strict';
var map = typeof Map === "function" ? new Map() : function () {
var keys = [];
var values = [];
return {
has: function has(key) {
return keys.indexOf(key) > -1;
},
get: function get(key) {
return values[keys.indexOf(key)];
},
set: function set(key, value) {
if (keys.indexOf(key) === -1) {
keys.push(key);
values.push(value);
}
},
delete: function _delete(key) {
var index = keys.indexOf(key);
if (index > -1) {
keys.splice(index, 1);
values.splice(index, 1);
}
}
};
}();
var createEvent = function createEvent(name) {
return new Event(name, { bubbles: true });
};
try {
new Event('test');
} catch (e) {
// IE does not support `new Event()`
createEvent = function createEvent(name) {
var evt = document.createEvent('Event');
evt.initEvent(name, true, false);
return evt;
};
}
function assign(ta) {
if (!ta || !ta.nodeName || ta.nodeName !== 'TEXTAREA' || map.has(ta)) return;
var heightOffset = null;
var clientWidth = null;
var cachedHeight = null;
function init() {
var style = window.getComputedStyle(ta, null);
if (style.resize === 'vertical') {
ta.style.resize = 'none';
} else if (style.resize === 'both') {
ta.style.resize = 'horizontal';
}
if (style.boxSizing === 'content-box') {
heightOffset = -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom));
} else {
heightOffset = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
}
// Fix when a textarea is not on document body and heightOffset is Not a Number
if (isNaN(heightOffset)) {
heightOffset = 0;
}
update();
}
function changeOverflow(value) {
{
// Chrome/Safari-specific fix:
// When the textarea y-overflow is hidden, Chrome/Safari do not reflow the text to account for the space
// made available by removing the scrollbar. The following forces the necessary text reflow.
var width = ta.style.width;
ta.style.width = '0px';
// Force reflow:
/* jshint ignore:start */
ta.offsetWidth;
/* jshint ignore:end */
ta.style.width = width;
}
ta.style.overflowY = value;
}
function getParentOverflows(el) {
var arr = [];
while (el && el.parentNode && el.parentNode instanceof Element) {
if (el.parentNode.scrollTop) {
arr.push({
node: el.parentNode,
scrollTop: el.parentNode.scrollTop
});
}
el = el.parentNode;
}
return arr;
}
function resize() {
if (ta.scrollHeight === 0) {
// If the scrollHeight is 0, then the element probably has display:none or is detached from the DOM.
return;
}
var overflows = getParentOverflows(ta);
var docTop = document.documentElement && document.documentElement.scrollTop; // Needed for Mobile IE (ticket #240)
ta.style.height = '';
ta.style.height = ta.scrollHeight + heightOffset + 'px';
// used to check if an update is actually necessary on window.resize
clientWidth = ta.clientWidth;
// prevents scroll-position jumping
overflows.forEach(function (el) {
el.node.scrollTop = el.scrollTop;
});
if (docTop) {
document.documentElement.scrollTop = docTop;
}
}
function update() {
resize();
var styleHeight = Math.round(parseFloat(ta.style.height));
var computed = window.getComputedStyle(ta, null);
// Using offsetHeight as a replacement for computed.height in IE, because IE does not account use of border-box
var actualHeight = computed.boxSizing === 'content-box' ? Math.round(parseFloat(computed.height)) : ta.offsetHeight;
// The actual height not matching the style height (set via the resize method) indicates that
// the max-height has been exceeded, in which case the overflow should be allowed.
if (actualHeight < styleHeight) {
if (computed.overflowY === 'hidden') {
changeOverflow('scroll');
resize();
actualHeight = computed.boxSizing === 'content-box' ? Math.round(parseFloat(window.getComputedStyle(ta, null).height)) : ta.offsetHeight;
}
} else {
// Normally keep overflow set to hidden, to avoid flash of scrollbar as the textarea expands.
if (computed.overflowY !== 'hidden') {
changeOverflow('hidden');
resize();
actualHeight = computed.boxSizing === 'content-box' ? Math.round(parseFloat(window.getComputedStyle(ta, null).height)) : ta.offsetHeight;
}
}
if (cachedHeight !== actualHeight) {
cachedHeight = actualHeight;
var evt = createEvent('autosize:resized');
try {
ta.dispatchEvent(evt);
} catch (err) {
// Firefox will throw an error on dispatchEvent for a detached element
// https://bugzilla.mozilla.org/show_bug.cgi?id=889376
}
}
}
var pageResize = function pageResize() {
if (ta.clientWidth !== clientWidth) {
update();
}
};
var destroy = function (style) {
window.removeEventListener('resize', pageResize, false);
ta.removeEventListener('input', update, false);
ta.removeEventListener('keyup', update, false);
ta.removeEventListener('autosize:destroy', destroy, false);
ta.removeEventListener('autosize:update', update, false);
Object.keys(style).forEach(function (key) {
ta.style[key] = style[key];
});
map.delete(ta);
}.bind(ta, {
height: ta.style.height,
resize: ta.style.resize,
overflowY: ta.style.overflowY,
overflowX: ta.style.overflowX,
wordWrap: ta.style.wordWrap
});
ta.addEventListener('autosize:destroy', destroy, false);
// IE9 does not fire onpropertychange or oninput for deletions,
// so binding to onkeyup to catch most of those events.
// There is no way that I know of to detect something like 'cut' in IE9.
if ('onpropertychange' in ta && 'oninput' in ta) {
ta.addEventListener('keyup', update, false);
}
window.addEventListener('resize', pageResize, false);
ta.addEventListener('input', update, false);
ta.addEventListener('autosize:update', update, false);
ta.style.overflowX = 'hidden';
ta.style.wordWrap = 'break-word';
map.set(ta, {
destroy: destroy,
update: update
});
init();
}
function destroy(ta) {
var methods = map.get(ta);
if (methods) {
methods.destroy();
}
}
function update(ta) {
var methods = map.get(ta);
if (methods) {
methods.update();
}
}
var autosize = null;
// Do nothing in Node.js environment and IE8 (or lower)
if (typeof window === 'undefined' || typeof window.getComputedStyle !== 'function') {
autosize = function autosize(el) {
return el;
};
autosize.destroy = function (el) {
return el;
};
autosize.update = function (el) {
return el;
};
} else {
autosize = function autosize(el, options) {
if (el) {
Array.prototype.forEach.call(el.length ? el : [el], function (x) {
return assign(x, options);
});
}
return el;
};
autosize.destroy = function (el) {
if (el) {
Array.prototype.forEach.call(el.length ? el : [el], destroy);
}
return el;
};
autosize.update = function (el) {
if (el) {
Array.prototype.forEach.call(el.length ? el : [el], update);
}
return el;
};
}
exports.default = autosize;
module.exports = exports['default'];
});
/***/ }),
/***/ 6109:
/***/ ((module) => {
// This code has been refactored for 140 bytes
// You can see the original here: https://github.com/twolfson/computedStyle/blob/04cd1da2e30fa45844f95f5cb1ac898e9b9ef050/lib/computedStyle.js
var computedStyle = function (el, prop, getComputedStyle) {
getComputedStyle = window.getComputedStyle;
// In one fell swoop
return (
// If we have getComputedStyle
getComputedStyle ?
// Query it
// TODO: From CSS-Query notes, we might need (node, null) for FF
getComputedStyle(el) :
// Otherwise, we are in IE and use currentStyle
el.currentStyle
)[
// Switch to camelCase for CSSOM
// DEV: Grabbed from jQuery
// https://github.com/jquery/jquery/blob/1.9-stable/src/css.js#L191-L194
// https://github.com/jquery/jquery/blob/1.9-stable/src/core.js#L593-L597
prop.replace(/-(\w)/gi, function (word, letter) {
return letter.toUpperCase();
})
];
};
module.exports = computedStyle;
/***/ }),
/***/ 5417:
/***/ ((__unused_webpack_module, exports) => {
"use strict";
/*istanbul ignore start*/
Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports["default"] = Diff;
/*istanbul ignore end*/
function Diff() {}
Diff.prototype = {
/*istanbul ignore start*/
/*istanbul ignore end*/
diff: function diff(oldString, newString) {
/*istanbul ignore start*/
var
/*istanbul ignore end*/
options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var callback = options.callback;
if (typeof options === 'function') {
callback = options;
options = {};
}
this.options = options;
var self = this;
function done(value) {
if (callback) {
setTimeout(function () {
callback(undefined, value);
}, 0);
return true;
} else {
return value;
}
} // Allow subclasses to massage the input prior to running
oldString = this.castInput(oldString);
newString = this.castInput(newString);
oldString = this.removeEmpty(this.tokenize(oldString));
newString = this.removeEmpty(this.tokenize(newString));
var newLen = newString.length,
oldLen = oldString.length;
var editLength = 1;
var maxEditLength = newLen + oldLen;
var bestPath = [{
newPos: -1,
components: []
}]; // Seed editLength = 0, i.e. the content starts with the same values
var oldPos = this.extractCommon(bestPath[0], newString, oldString, 0);
if (bestPath[0].newPos + 1 >= newLen && oldPos + 1 >= oldLen) {
// Identity per the equality and tokenizer
return done([{
value: this.join(newString),
count: newString.length
}]);
} // Main worker method. checks all permutations of a given edit length for acceptance.
function execEditLength() {
for (var diagonalPath = -1 * editLength; diagonalPath <= editLength; diagonalPath += 2) {
var basePath =
/*istanbul ignore start*/
void 0
/*istanbul ignore end*/
;
var addPath = bestPath[diagonalPath - 1],
removePath = bestPath[diagonalPath + 1],
_oldPos = (removePath ? removePath.newPos : 0) - diagonalPath;
if (addPath) {
// No one else is going to attempt to use this value, clear it
bestPath[diagonalPath - 1] = undefined;
}
var canAdd = addPath && addPath.newPos + 1 < newLen,
canRemove = removePath && 0 <= _oldPos && _oldPos < oldLen;
if (!canAdd && !canRemove) {
// If this path is a terminal then prune
bestPath[diagonalPath] = undefined;
continue;
} // Select the diagonal that we want to branch from. We select the prior
// path whose position in the new string is the farthest from the origin
// and does not pass the bounds of the diff graph
if (!canAdd || canRemove && addPath.newPos < removePath.newPos) {
basePath = clonePath(removePath);
self.pushComponent(basePath.components, undefined, true);
} else {
basePath = addPath; // No need to clone, we've pulled it from the list
basePath.newPos++;
self.pushComponent(basePath.components, true, undefined);
}
_oldPos = self.extractCommon(basePath, newString, oldString, diagonalPath); // If we have hit the end of both strings, then we are done
if (basePath.newPos + 1 >= newLen && _oldPos + 1 >= oldLen) {
return done(buildValues(self, basePath.components, newString, oldString, self.useLongestToken));
} else {
// Otherwise track this path as a potential candidate and continue.
bestPath[diagonalPath] = basePath;
}
}
editLength++;
} // Performs the length of edit iteration. Is a bit fugly as this has to support the
// sync and async mode which is never fun. Loops over execEditLength until a value
// is produced.
if (callback) {
(function exec() {
setTimeout(function () {
// This should not happen, but we want to be safe.
/* istanbul ignore next */
if (editLength > maxEditLength) {
return callback();
}
if (!execEditLength()) {
exec();
}
}, 0);
})();
} else {
while (editLength <= maxEditLength) {
var ret = execEditLength();
if (ret) {
return ret;
}
}
}
},
/*istanbul ignore start*/
/*istanbul ignore end*/
pushComponent: function pushComponent(components, added, removed) {
var last = components[components.length - 1];
if (last && last.added === added && last.removed === removed) {
// We need to clone here as the component clone operation is just
// as shallow array clone
components[components.length - 1] = {
count: last.count + 1,
added: added,
removed: removed
};
} else {
components.push({
count: 1,
added: added,
removed: removed
});
}
},
/*istanbul ignore start*/
/*istanbul ignore end*/
extractCommon: function extractCommon(basePath, newString, oldString, diagonalPath) {
var newLen = newString.length,
oldLen = oldString.length,
newPos = basePath.newPos,
oldPos = newPos - diagonalPath,
commonCount = 0;
while (newPos + 1 < newLen && oldPos + 1 < oldLen && this.equals(newString[newPos + 1], oldString[oldPos + 1])) {
newPos++;
oldPos++;
commonCount++;
}
if (commonCount) {
basePath.components.push({
count: commonCount
});
}
basePath.newPos = newPos;
return oldPos;
},
/*istanbul ignore start*/
/*istanbul ignore end*/
equals: function equals(left, right) {
if (this.options.comparator) {
return this.options.comparator(left, right);
} else {
return left === right || this.options.ignoreCase && left.toLowerCase() === right.toLowerCase();
}
},
/*istanbul ignore start*/
/*istanbul ignore end*/
removeEmpty: function removeEmpty(array) {
var ret = [];
for (var i = 0; i < array.length; i++) {
if (array[i]) {
ret.push(array[i]);
}
}
return ret;
},
/*istanbul ignore start*/
/*istanbul ignore end*/
castInput: function castInput(value) {
return value;
},
/*istanbul ignore start*/
/*istanbul ignore end*/
tokenize: function tokenize(value) {
return value.split('');
},
/*istanbul ignore start*/
/*istanbul ignore end*/
join: function join(chars) {
return chars.join('');
}
};
function buildValues(diff, components, newString, oldString, useLongestToken) {
var componentPos = 0,
componentLen = components.length,
newPos = 0,
oldPos = 0;
for (; componentPos < componentLen; componentPos++) {
var component = components[componentPos];
if (!component.removed) {
if (!component.added && useLongestToken) {
var value = newString.slice(newPos, newPos + component.count);
value = value.map(function (value, i) {
var oldValue = oldString[oldPos + i];
return oldValue.length > value.length ? oldValue : value;
});
component.value = diff.join(value);
} else {
component.value = diff.join(newString.slice(newPos, newPos + component.count));
}
newPos += component.count; // Common case
if (!component.added) {
oldPos += component.count;
}
} else {
component.value = diff.join(oldString.slice(oldPos, oldPos + component.count));
oldPos += component.count; // Reverse add and remove so removes are output first to match common convention
// The diffing algorithm is tied to add then remove output and this is the simplest
// route to get the desired output with minimal overhead.
if (componentPos && components[componentPos - 1].added) {
var tmp = components[componentPos - 1];
components[componentPos - 1] = components[componentPos];
components[componentPos] = tmp;
}
}
} // Special case handle for when one terminal is ignored (i.e. whitespace).
// For this case we merge the terminal into the prior string and drop the change.
// This is only available for string mode.
var lastComponent = components[componentLen - 1];
if (componentLen > 1 && typeof lastComponent.value === 'string' && (lastComponent.added || lastComponent.removed) && diff.equals('', lastComponent.value)) {
components[componentLen - 2].value += lastComponent.value;
components.pop();
}
return components;
}
function clonePath(path) {
return {
newPos: path.newPos,
components: path.components.slice(0)
};
}
/***/ }),
/***/ 8021:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
"use strict";
var __webpack_unused_export__;
/*istanbul ignore start*/
__webpack_unused_export__ = ({
value: true
});
exports.JJ = diffChars;
__webpack_unused_export__ = void 0;
/*istanbul ignore end*/
var
/*istanbul ignore start*/
_base = _interopRequireDefault(__webpack_require__(5417))
/*istanbul ignore end*/
;
/*istanbul ignore start*/ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/*istanbul ignore end*/
var characterDiff = new
/*istanbul ignore start*/
_base
/*istanbul ignore end*/
.
/*istanbul ignore start*/
default
/*istanbul ignore end*/
();
/*istanbul ignore start*/
__webpack_unused_export__ = characterDiff;
/*istanbul ignore end*/
function diffChars(oldStr, newStr, options) {
return characterDiff.diff(oldStr, newStr, options);
}
/***/ }),
/***/ 7734:
/***/ ((module) => {
"use strict";
// do not edit .js files directly - edit src/index.jst
var envHasBigInt64Array = typeof BigInt64Array !== 'undefined';
module.exports = function equal(a, b) {
if (a === b) return true;
if (a && b && typeof a == 'object' && typeof b == 'object') {
if (a.constructor !== b.constructor) return false;
var length, i, keys;
if (Array.isArray(a)) {
length = a.length;
if (length != b.length) return false;
for (i = length; i-- !== 0;)
if (!equal(a[i], b[i])) return false;
return true;
}
if ((a instanceof Map) && (b instanceof Map)) {
if (a.size !== b.size) return false;
for (i of a.entries())
if (!b.has(i[0])) return false;
for (i of a.entries())
if (!equal(i[1], b.get(i[0]))) return false;
return true;
}
if ((a instanceof Set) && (b instanceof Set)) {
if (a.size !== b.size) return false;
for (i of a.entries())
if (!b.has(i[0])) return false;
return true;
}
if (ArrayBuffer.isView(a) && ArrayBuffer.isView(b)) {
length = a.length;
if (length != b.length) return false;
for (i = length; i-- !== 0;)
if (a[i] !== b[i]) return false;
return true;
}
if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
keys = Object.keys(a);
length = keys.length;
if (length !== Object.keys(b).length) return false;
for (i = length; i-- !== 0;)
if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
for (i = length; i-- !== 0;) {
var key = keys[i];
if (!equal(a[key], b[key])) return false;
}
return true;
}
// true if both NaN, false otherwise
return a!==a && b!==b;
};
/***/ }),
/***/ 5215:
/***/ ((module) => {
"use strict";
// do not edit .js files directly - edit src/index.jst
module.exports = function equal(a, b) {
if (a === b) return true;
if (a && b && typeof a == 'object' && typeof b == 'object') {
if (a.constructor !== b.constructor) return false;
var length, i, keys;
if (Array.isArray(a)) {
length = a.length;
if (length != b.length) return false;
for (i = length; i-- !== 0;)
if (!equal(a[i], b[i])) return false;
return true;
}
if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
keys = Object.keys(a);
length = keys.length;
if (length !== Object.keys(b).length) return false;
for (i = length; i-- !== 0;)
if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
for (i = length; i-- !== 0;) {
var key = keys[i];
if (!equal(a[key], b[key])) return false;
}
return true;
}
// true if both NaN, false otherwise
return a!==a && b!==b;
};
/***/ }),
/***/ 461:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
// Load in dependencies
var computedStyle = __webpack_require__(6109);
/**
* Calculate the `line-height` of a given node
* @param {HTMLElement} node Element to calculate line height of. Must be in the DOM.
* @returns {Number} `line-height` of the element in pixels
*/
function lineHeight(node) {
// Grab the line-height via style
var lnHeightStr = computedStyle(node, 'line-height');
var lnHeight = parseFloat(lnHeightStr, 10);
// If the lineHeight did not contain a unit (i.e. it was numeric), convert it to ems (e.g. '2.3' === '2.3em')
if (lnHeightStr === lnHeight + '') {
// Save the old lineHeight style and update the em unit to the element
var _lnHeightStyle = node.style.lineHeight;
node.style.lineHeight = lnHeightStr + 'em';
// Calculate the em based height
lnHeightStr = computedStyle(node, 'line-height');
lnHeight = parseFloat(lnHeightStr, 10);
// Revert the lineHeight style
if (_lnHeightStyle) {
node.style.lineHeight = _lnHeightStyle;
} else {
delete node.style.lineHeight;
}
}
// If the lineHeight is in `pt`, convert it to pixels (4px for 3pt)
// DEV: `em` units are converted to `pt` in IE6
// Conversion ratio from https://developer.mozilla.org/en-US/docs/Web/CSS/length
if (lnHeightStr.indexOf('pt') !== -1) {
lnHeight *= 4;
lnHeight /= 3;
// Otherwise, if the lineHeight is in `mm`, convert it to pixels (96px for 25.4mm)
} else if (lnHeightStr.indexOf('mm') !== -1) {
lnHeight *= 96;
lnHeight /= 25.4;
// Otherwise, if the lineHeight is in `cm`, convert it to pixels (96px for 2.54cm)
} else if (lnHeightStr.indexOf('cm') !== -1) {
lnHeight *= 96;
lnHeight /= 2.54;
// Otherwise, if the lineHeight is in `in`, convert it to pixels (96px for 1in)
} else if (lnHeightStr.indexOf('in') !== -1) {
lnHeight *= 96;
// Otherwise, if the lineHeight is in `pc`, convert it to pixels (12pt for 1pc)
} else if (lnHeightStr.indexOf('pc') !== -1) {
lnHeight *= 16;
}
// Continue our computation
lnHeight = Math.round(lnHeight);
// If the line-height is "normal", calculate by font-size
if (lnHeightStr === 'normal') {
// Create a temporary node
var nodeName = node.nodeName;
var _node = document.createElement(nodeName);
_node.innerHTML = ' ';
// If we have a text area, reset it to only 1 row
// https://github.com/twolfson/line-height/issues/4
if (nodeName.toUpperCase() === 'TEXTAREA') {
_node.setAttribute('rows', '1');
}
// Set the font-size of the element
var fontSizeStr = computedStyle(node, 'font-size');
_node.style.fontSize = fontSizeStr;
// Remove default padding/border which can affect offset height
// https://github.com/twolfson/line-height/issues/4
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight
_node.style.padding = '0px';
_node.style.border = '0px';
// Append it to the body
var body = document.body;
body.appendChild(_node);
// Assume the line height of the element is the height
var height = _node.offsetHeight;
lnHeight = height;
// Remove our child from the DOM
body.removeChild(_node);
}
// Return the calculated height
return lnHeight;
}
// Export lineHeight
module.exports = lineHeight;
/***/ }),
/***/ 7520:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
module.exports = __webpack_require__(7191);
/***/ }),
/***/ 8202:
/***/ ((module) => {
"use strict";
/**
* Copyright (c) 2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ExecutionEnvironment
*/
/*jslint evil: true */
var canUseDOM = !!(
typeof window !== 'undefined' &&
window.document &&
window.document.createElement
);
/**
* Simple, lightweight module assisting with the detection and context of
* Worker. Helps avoid circular dependencies and allows code to reason about
* whether or not they are in a Worker, even if they never include the main
* `ReactWorker` dependency.
*/
var ExecutionEnvironment = {
canUseDOM: canUseDOM,
canUseWorkers: typeof Worker !== 'undefined',
canUseEventListeners:
canUseDOM && !!(window.addEventListener || window.attachEvent),
canUseViewport: canUseDOM && !!window.screen,
isInWorker: !canUseDOM // For now, this is true - might change in the future.
};
module.exports = ExecutionEnvironment;
/***/ }),
/***/ 2213:
/***/ ((module) => {
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule UserAgent_DEPRECATED
*/
/**
* Provides entirely client-side User Agent and OS detection. You should prefer
* the non-deprecated UserAgent module when possible, which exposes our
* authoritative server-side PHP-based detection to the client.
*
* Usage is straightforward:
*
* if (UserAgent_DEPRECATED.ie()) {
* // IE
* }
*
* You can also do version checks:
*
* if (UserAgent_DEPRECATED.ie() >= 7) {
* // IE7 or better
* }
*
* The browser functions will return NaN if the browser does not match, so
* you can also do version compares the other way:
*
* if (UserAgent_DEPRECATED.ie() < 7) {
* // IE6 or worse
* }
*
* Note that the version is a float and may include a minor version number,
* so you should always use range operators to perform comparisons, not
* strict equality.
*
* **Note:** You should **strongly** prefer capability detection to browser
* version detection where it's reasonable:
*
* http://www.quirksmode.org/js/support.html
*
* Further, we have a large number of mature wrapper functions and classes
* which abstract away many browser irregularities. Check the documentation,
* grep for things, or ask on javascript@lists.facebook.com before writing yet
* another copy of "event || window.event".
*
*/
var _populated = false;
// Browsers
var _ie, _firefox, _opera, _webkit, _chrome;
// Actual IE browser for compatibility mode
var _ie_real_version;
// Platforms
var _osx, _windows, _linux, _android;
// Architectures
var _win64;
// Devices
var _iphone, _ipad, _native;
var _mobile;
function _populate() {
if (_populated) {
return;
}
_populated = true;
// To work around buggy JS libraries that can't handle multi-digit
// version numbers, Opera 10's user agent string claims it's Opera
// 9, then later includes a Version/X.Y field:
//
// Opera/9.80 (foo) Presto/2.2.15 Version/10.10
var uas = navigator.userAgent;
var agent = /(?:MSIE.(\d+\.\d+))|(?:(?:Firefox|GranParadiso|Iceweasel).(\d+\.\d+))|(?:Opera(?:.+Version.|.)(\d+\.\d+))|(?:AppleWebKit.(\d+(?:\.\d+)?))|(?:Trident\/\d+\.\d+.*rv:(\d+\.\d+))/.exec(uas);
var os = /(Mac OS X)|(Windows)|(Linux)/.exec(uas);
_iphone = /\b(iPhone|iP[ao]d)/.exec(uas);
_ipad = /\b(iP[ao]d)/.exec(uas);
_android = /Android/i.exec(uas);
_native = /FBAN\/\w+;/i.exec(uas);
_mobile = /Mobile/i.exec(uas);
// Note that the IE team blog would have you believe you should be checking
// for 'Win64; x64'. But MSDN then reveals that you can actually be coming
// from either x64 or ia64; so ultimately, you should just check for Win64
// as in indicator of whether you're in 64-bit IE. 32-bit IE on 64-bit
// Windows will send 'WOW64' instead.
_win64 = !!(/Win64/.exec(uas));
if (agent) {
_ie = agent[1] ? parseFloat(agent[1]) : (
agent[5] ? parseFloat(agent[5]) : NaN);
// IE compatibility mode
if (_ie && document && document.documentMode) {
_ie = document.documentMode;
}
// grab the "true" ie version from the trident token if available
var trident = /(?:Trident\/(\d+.\d+))/.exec(uas);
_ie_real_version = trident ? parseFloat(trident[1]) + 4 : _ie;
_firefox = agent[2] ? parseFloat(agent[2]) : NaN;
_opera = agent[3] ? parseFloat(agent[3]) : NaN;
_webkit = agent[4] ? parseFloat(agent[4]) : NaN;
if (_webkit) {
// We do not add the regexp to the above test, because it will always
// match 'safari' only since 'AppleWebKit' appears before 'Chrome' in
// the userAgent string.
agent = /(?:Chrome\/(\d+\.\d+))/.exec(uas);
_chrome = agent && agent[1] ? parseFloat(agent[1]) : NaN;
} else {
_chrome = NaN;
}
} else {
_ie = _firefox = _opera = _chrome = _webkit = NaN;
}
if (os) {
if (os[1]) {
// Detect OS X version. If no version number matches, set _osx to true.
// Version examples: 10, 10_6_1, 10.7
// Parses version number as a float, taking only first two sets of
// digits. If only one set of digits is found, returns just the major
// version number.
var ver = /(?:Mac OS X (\d+(?:[._]\d+)?))/.exec(uas);
_osx = ver ? parseFloat(ver[1].replace('_', '.')) : true;
} else {
_osx = false;
}
_windows = !!os[2];
_linux = !!os[3];
} else {
_osx = _windows = _linux = false;
}
}
var UserAgent_DEPRECATED = {
/**
* Check if the UA is Internet Explorer.
*
*
* @return float|NaN Version number (if match) or NaN.
*/
ie: function() {
return _populate() || _ie;
},
/**
* Check if we're in Internet Explorer compatibility mode.
*
* @return bool true if in compatibility mode, false if
* not compatibility mode or not ie
*/
ieCompatibilityMode: function() {
return _populate() || (_ie_real_version > _ie);
},
/**
* Whether the browser is 64-bit IE. Really, this is kind of weak sauce; we
* only need this because Skype can't handle 64-bit IE yet. We need to remove
* this when we don't need it -- tracked by #601957.
*/
ie64: function() {
return UserAgent_DEPRECATED.ie() && _win64;
},
/**
* Check if the UA is Firefox.
*
*
* @return float|NaN Version number (if match) or NaN.
*/
firefox: function() {
return _populate() || _firefox;
},
/**
* Check if the UA is Opera.
*
*
* @return float|NaN Version number (if match) or NaN.
*/
opera: function() {
return _populate() || _opera;
},
/**
* Check if the UA is WebKit.
*
*
* @return float|NaN Version number (if match) or NaN.
*/
webkit: function() {
return _populate() || _webkit;
},
/**
* For Push
* WILL BE REMOVED VERY SOON. Use UserAgent_DEPRECATED.webkit
*/
safari: function() {
return UserAgent_DEPRECATED.webkit();
},
/**
* Check if the UA is a Chrome browser.
*
*
* @return float|NaN Version number (if match) or NaN.
*/
chrome : function() {
return _populate() || _chrome;
},
/**
* Check if the user is running Windows.
*
* @return bool `true' if the user's OS is Windows.
*/
windows: function() {
return _populate() || _windows;
},
/**
* Check if the user is running Mac OS X.
*
* @return float|bool Returns a float if a version number is detected,
* otherwise true/false.
*/
osx: function() {
return _populate() || _osx;
},
/**
* Check if the user is running Linux.
*
* @return bool `true' if the user's OS is some flavor of Linux.
*/
linux: function() {
return _populate() || _linux;
},
/**
* Check if the user is running on an iPhone or iPod platform.
*
* @return bool `true' if the user is running some flavor of the
* iPhone OS.
*/
iphone: function() {
return _populate() || _iphone;
},
mobile: function() {
return _populate() || (_iphone || _ipad || _android || _mobile);
},
nativeApp: function() {
// webviews inside of the native apps
return _populate() || _native;
},
android: function() {
return _populate() || _android;
},
ipad: function() {
return _populate() || _ipad;
}
};
module.exports = UserAgent_DEPRECATED;
/***/ }),
/***/ 1087:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
"use strict";
/**
* Copyright 2013-2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule isEventSupported
*/
var ExecutionEnvironment = __webpack_require__(8202);
var useHasFeature;
if (ExecutionEnvironment.canUseDOM) {
useHasFeature =
document.implementation &&
document.implementation.hasFeature &&
// always returns true in newer browsers as per the standard.
// @see http://dom.spec.whatwg.org/#dom-domimplementation-hasfeature
document.implementation.hasFeature('', '') !== true;
}
/**
* Checks if an event is supported in the current execution environment.
*
* NOTE: This will not work correctly for non-generic events such as `change`,
* `reset`, `load`, `error`, and `select`.
*
* Borrows from Modernizr.
*
* @param {string} eventNameSuffix Event name, e.g. "click".
* @param {?boolean} capture Check if the capture phase is supported.
* @return {boolean} True if the event is supported.
* @internal
* @license Modernizr 3.0.0pre (Custom Build) | MIT
*/
function isEventSupported(eventNameSuffix, capture) {
if (!ExecutionEnvironment.canUseDOM ||
capture && !('addEventListener' in document)) {
return false;
}
var eventName = 'on' + eventNameSuffix;
var isSupported = eventName in document;
if (!isSupported) {
var element = document.createElement('div');
element.setAttribute(eventName, 'return;');
isSupported = typeof element[eventName] === 'function';
}
if (!isSupported && useHasFeature && eventNameSuffix === 'wheel') {
// This is the only way to test support for the `wheel` event in IE9+.
isSupported = document.implementation.hasFeature('Events.wheel', '3.0');
}
return isSupported;
}
module.exports = isEventSupported;
/***/ }),
/***/ 7191:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
"use strict";
/**
* Copyright (c) 2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule normalizeWheel
* @typechecks
*/
var UserAgent_DEPRECATED = __webpack_require__(2213);
var isEventSupported = __webpack_require__(1087);
// Reasonable defaults
var PIXEL_STEP = 10;
var LINE_HEIGHT = 40;
var PAGE_HEIGHT = 800;
/**
* Mouse wheel (and 2-finger trackpad) support on the web sucks. It is
* complicated, thus this doc is long and (hopefully) detailed enough to answer
* your questions.
*
* If you need to react to the mouse wheel in a predictable way, this code is
* like your bestest friend. * hugs *
*
* As of today, there are 4 DOM event types you can listen to:
*
* 'wheel' -- Chrome(31+), FF(17+), IE(9+)
* 'mousewheel' -- Chrome, IE(6+), Opera, Safari
* 'MozMousePixelScroll' -- FF(3.5 only!) (2010-2013) -- don't bother!
* 'DOMMouseScroll' -- FF(0.9.7+) since 2003
*
* So what to do? The is the best:
*
* normalizeWheel.getEventType();
*
* In your event callback, use this code to get sane interpretation of the
* deltas. This code will return an object with properties:
*
* spinX -- normalized spin speed (use for zoom) - x plane
* spinY -- " - y plane
* pixelX -- normalized distance (to pixels) - x plane
* pixelY -- " - y plane
*
* Wheel values are provided by the browser assuming you are using the wheel to
* scroll a web page by a number of lines or pixels (or pages). Values can vary
* significantly on different platforms and browsers, forgetting that you can
* scroll at different speeds. Some devices (like trackpads) emit more events
* at smaller increments with fine granularity, and some emit massive jumps with
* linear speed or acceleration.
*
* This code does its best to normalize the deltas for you:
*
* - spin is trying to normalize how far the wheel was spun (or trackpad
* dragged). This is super useful for zoom support where you want to
* throw away the chunky scroll steps on the PC and make those equal to
* the slow and smooth tiny steps on the Mac. Key data: This code tries to
* resolve a single slow step on a wheel to 1.
*
* - pixel is normalizing the desired scroll delta in pixel units. You'll
* get the crazy differences between browsers, but at least it'll be in
* pixels!
*
* - positive value indicates scrolling DOWN/RIGHT, negative UP/LEFT. This
* should translate to positive value zooming IN, negative zooming OUT.
* This matches the newer 'wheel' event.
*
* Why are there spinX, spinY (or pixels)?
*
* - spinX is a 2-finger side drag on the trackpad, and a shift + wheel turn
* with a mouse. It results in side-scrolling in the browser by default.
*
* - spinY is what you expect -- it's the classic axis of a mouse wheel.
*
* - I dropped spinZ/pixelZ. It is supported by the DOM 3 'wheel' event and
* probably is by browsers in conjunction with fancy 3D controllers .. but
* you know.
*
* Implementation info:
*
* Examples of 'wheel' event if you scroll slowly (down) by one step with an
* average mouse:
*
* OS X + Chrome (mouse) - 4 pixel delta (wheelDelta -120)
* OS X + Safari (mouse) - N/A pixel delta (wheelDelta -12)
* OS X + Firefox (mouse) - 0.1 line delta (wheelDelta N/A)
* Win8 + Chrome (mouse) - 100 pixel delta (wheelDelta -120)
* Win8 + Firefox (mouse) - 3 line delta (wheelDelta -120)
*
* On the trackpad:
*
* OS X + Chrome (trackpad) - 2 pixel delta (wheelDelta -6)
* OS X + Firefox (trackpad) - 1 pixel delta (wheelDelta N/A)
*
* On other/older browsers.. it's more complicated as there can be multiple and
* also missing delta values.
*
* The 'wheel' event is more standard:
*
* http://www.w3.org/TR/DOM-Level-3-Events/#events-wheelevents
*
* The basics is that it includes a unit, deltaMode (pixels, lines, pages), and
* deltaX, deltaY and deltaZ. Some browsers provide other values to maintain
* backward compatibility with older events. Those other values help us
* better normalize spin speed. Example of what the browsers provide:
*
* | event.wheelDelta | event.detail
* ------------------+------------------+--------------
* Safari v5/OS X | -120 | 0
* Safari v5/Win7 | -120 | 0
* Chrome v17/OS X | -120 | 0
* Chrome v17/Win7 | -120 | 0
* IE9/Win7 | -120 | undefined
* Firefox v4/OS X | undefined | 1
* Firefox v4/Win7 | undefined | 3
*
*/
function normalizeWheel(/*object*/ event) /*object*/ {
var sX = 0, sY = 0, // spinX, spinY
pX = 0, pY = 0; // pixelX, pixelY
// Legacy
if ('detail' in event) { sY = event.detail; }
if ('wheelDelta' in event) { sY = -event.wheelDelta / 120; }
if ('wheelDeltaY' in event) { sY = -event.wheelDeltaY / 120; }
if ('wheelDeltaX' in event) { sX = -event.wheelDeltaX / 120; }
// side scrolling on FF with DOMMouseScroll
if ( 'axis' in event && event.axis === event.HORIZONTAL_AXIS ) {
sX = sY;
sY = 0;
}
pX = sX * PIXEL_STEP;
pY = sY * PIXEL_STEP;
if ('deltaY' in event) { pY = event.deltaY; }
if ('deltaX' in event) { pX = event.deltaX; }
if ((pX || pY) && event.deltaMode) {
if (event.deltaMode == 1) { // delta in LINE units
pX *= LINE_HEIGHT;
pY *= LINE_HEIGHT;
} else { // delta in PAGE units
pX *= PAGE_HEIGHT;
pY *= PAGE_HEIGHT;
}
}
// Fall-back if spin cannot be determined
if (pX && !sX) { sX = (pX < 1) ? -1 : 1; }
if (pY && !sY) { sY = (pY < 1) ? -1 : 1; }
return { spinX : sX,
spinY : sY,
pixelX : pX,
pixelY : pY };
}
/**
* The best combination if you prefer spinX + spinY normalization. It favors
* the older DOMMouseScroll for Firefox, as FF does not include wheelDelta with
* 'wheel' event, making spin speed determination impossible.
*/
normalizeWheel.getEventType = function() /*string*/ {
return (UserAgent_DEPRECATED.firefox())
? 'DOMMouseScroll'
: (isEventSupported('wheel'))
? 'wheel'
: 'mousewheel';
};
module.exports = normalizeWheel;
/***/ }),
/***/ 2775:
/***/ ((module) => {
var x=String;
var create=function() {return {isColorSupported:false,reset:x,bold:x,dim:x,italic:x,underline:x,inverse:x,hidden:x,strikethrough:x,black:x,red:x,green:x,yellow:x,blue:x,magenta:x,cyan:x,white:x,gray:x,bgBlack:x,bgRed:x,bgGreen:x,bgYellow:x,bgBlue:x,bgMagenta:x,bgCyan:x,bgWhite:x,blackBright:x,redBright:x,greenBright:x,yellowBright:x,blueBright:x,magentaBright:x,cyanBright:x,whiteBright:x,bgBlackBright:x,bgRedBright:x,bgGreenBright:x,bgYellowBright:x,bgBlueBright:x,bgMagentaBright:x,bgCyanBright:x,bgWhiteBright:x}};
module.exports=create();
module.exports.createColors = create;
/***/ }),
/***/ 1443:
/***/ ((module) => {
module.exports = function postcssPrefixSelector(options) {
const prefix = options.prefix;
const prefixWithSpace = /\s+$/.test(prefix) ? prefix : `${prefix} `;
const ignoreFiles = options.ignoreFiles ? [].concat(options.ignoreFiles) : [];
const includeFiles = options.includeFiles
? [].concat(options.includeFiles)
: [];
return function (root) {
if (
ignoreFiles.length &&
root.source.input.file &&
isFileInArray(root.source.input.file, ignoreFiles)
) {
return;
}
if (
includeFiles.length &&
root.source.input.file &&
!isFileInArray(root.source.input.file, includeFiles)
) {
return;
}
root.walkRules((rule) => {
const keyframeRules = [
'keyframes',
'-webkit-keyframes',
'-moz-keyframes',
'-o-keyframes',
'-ms-keyframes',
];
if (rule.parent && keyframeRules.includes(rule.parent.name)) {
return;
}
rule.selectors = rule.selectors.map((selector) => {
if (options.exclude && excludeSelector(selector, options.exclude)) {
return selector;
}
if (options.transform) {
return options.transform(
prefix,
selector,
prefixWithSpace + selector,
root.source.input.file,
rule
);
}
return prefixWithSpace + selector;
});
});
};
};
function isFileInArray(file, arr) {
return arr.some((ruleOrString) => {
if (ruleOrString instanceof RegExp) {
return ruleOrString.test(file);
}
return file.includes(ruleOrString);
});
}
function excludeSelector(selector, excludeArr) {
return excludeArr.some((excludeRule) => {
if (excludeRule instanceof RegExp) {
return excludeRule.test(selector);
}
return selector === excludeRule;
});
}
/***/ }),
/***/ 5404:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
const CSSValueParser = __webpack_require__(1544)
/**
* @type {import('postcss').PluginCreator}
*/
module.exports = (opts) => {
const DEFAULTS = {
skipHostRelativeUrls: true,
}
const config = Object.assign(DEFAULTS, opts)
return {
postcssPlugin: 'rebaseUrl',
Declaration(decl) {
// The faster way to find Declaration node
const parsedValue = CSSValueParser(decl.value)
let valueChanged = false
parsedValue.walk(node => {
if (node.type !== 'function' || node.value !== 'url') {
return
}
const urlVal = node.nodes[0].value
// bases relative URLs with rootUrl
const basedUrl = new URL(urlVal, opts.rootUrl)
// skip host-relative, already normalized URLs (e.g. `/images/image.jpg`, without `..`s)
if ((basedUrl.pathname === urlVal) && config.skipHostRelativeUrls) {
return false // skip this value
}
node.nodes[0].value = basedUrl.toString()
valueChanged = true
return false // do not walk deeper
})
if (valueChanged) {
decl.value = CSSValueParser.stringify(parsedValue)
}
}
}
}
module.exports.postcss = true
/***/ }),
/***/ 1544:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
var parse = __webpack_require__(8491);
var walk = __webpack_require__(3815);
var stringify = __webpack_require__(4725);
function ValueParser(value) {
if (this instanceof ValueParser) {
this.nodes = parse(value);
return this;
}
return new ValueParser(value);
}
ValueParser.prototype.toString = function() {
return Array.isArray(this.nodes) ? stringify(this.nodes) : "";
};
ValueParser.prototype.walk = function(cb, bubble) {
walk(this.nodes, cb, bubble);
return this;
};
ValueParser.unit = __webpack_require__(1524);
ValueParser.walk = walk;
ValueParser.stringify = stringify;
module.exports = ValueParser;
/***/ }),
/***/ 8491:
/***/ ((module) => {
var openParentheses = "(".charCodeAt(0);
var closeParentheses = ")".charCodeAt(0);
var singleQuote = "'".charCodeAt(0);
var doubleQuote = '"'.charCodeAt(0);
var backslash = "\\".charCodeAt(0);
var slash = "/".charCodeAt(0);
var comma = ",".charCodeAt(0);
var colon = ":".charCodeAt(0);
var star = "*".charCodeAt(0);
var uLower = "u".charCodeAt(0);
var uUpper = "U".charCodeAt(0);
var plus = "+".charCodeAt(0);
var isUnicodeRange = /^[a-f0-9?-]+$/i;
module.exports = function(input) {
var tokens = [];
var value = input;
var next,
quote,
prev,
token,
escape,
escapePos,
whitespacePos,
parenthesesOpenPos;
var pos = 0;
var code = value.charCodeAt(pos);
var max = value.length;
var stack = [{ nodes: tokens }];
var balanced = 0;
var parent;
var name = "";
var before = "";
var after = "";
while (pos < max) {
// Whitespaces
if (code <= 32) {
next = pos;
do {
next += 1;
code = value.charCodeAt(next);
} while (code <= 32);
token = value.slice(pos, next);
prev = tokens[tokens.length - 1];
if (code === closeParentheses && balanced) {
after = token;
} else if (prev && prev.type === "div") {
prev.after = token;
prev.sourceEndIndex += token.length;
} else if (
code === comma ||
code === colon ||
(code === slash &&
value.charCodeAt(next + 1) !== star &&
(!parent ||
(parent && parent.type === "function" && parent.value !== "calc")))
) {
before = token;
} else {
tokens.push({
type: "space",
sourceIndex: pos,
sourceEndIndex: next,
value: token
});
}
pos = next;
// Quotes
} else if (code === singleQuote || code === doubleQuote) {
next = pos;
quote = code === singleQuote ? "'" : '"';
token = {
type: "string",
sourceIndex: pos,
quote: quote
};
do {
escape = false;
next = value.indexOf(quote, next + 1);
if (~next) {
escapePos = next;
while (value.charCodeAt(escapePos - 1) === backslash) {
escapePos -= 1;
escape = !escape;
}
} else {
value += quote;
next = value.length - 1;
token.unclosed = true;
}
} while (escape);
token.value = value.slice(pos + 1, next);
token.sourceEndIndex = token.unclosed ? next : next + 1;
tokens.push(token);
pos = next + 1;
code = value.charCodeAt(pos);
// Comments
} else if (code === slash && value.charCodeAt(pos + 1) === star) {
next = value.indexOf("*/", pos);
token = {
type: "comment",
sourceIndex: pos,
sourceEndIndex: next + 2
};
if (next === -1) {
token.unclosed = true;
next = value.length;
token.sourceEndIndex = next;
}
token.value = value.slice(pos + 2, next);
tokens.push(token);
pos = next + 2;
code = value.charCodeAt(pos);
// Operation within calc
} else if (
(code === slash || code === star) &&
parent &&
parent.type === "function" &&
parent.value === "calc"
) {
token = value[pos];
tokens.push({
type: "word",
sourceIndex: pos - before.length,
sourceEndIndex: pos + token.length,
value: token
});
pos += 1;
code = value.charCodeAt(pos);
// Dividers
} else if (code === slash || code === comma || code === colon) {
token = value[pos];
tokens.push({
type: "div",
sourceIndex: pos - before.length,
sourceEndIndex: pos + token.length,
value: token,
before: before,
after: ""
});
before = "";
pos += 1;
code = value.charCodeAt(pos);
// Open parentheses
} else if (openParentheses === code) {
// Whitespaces after open parentheses
next = pos;
do {
next += 1;
code = value.charCodeAt(next);
} while (code <= 32);
parenthesesOpenPos = pos;
token = {
type: "function",
sourceIndex: pos - name.length,
value: name,
before: value.slice(parenthesesOpenPos + 1, next)
};
pos = next;
if (name === "url" && code !== singleQuote && code !== doubleQuote) {
next -= 1;
do {
escape = false;
next = value.indexOf(")", next + 1);
if (~next) {
escapePos = next;
while (value.charCodeAt(escapePos - 1) === backslash) {
escapePos -= 1;
escape = !escape;
}
} else {
value += ")";
next = value.length - 1;
token.unclosed = true;
}
} while (escape);
// Whitespaces before closed
whitespacePos = next;
do {
whitespacePos -= 1;
code = value.charCodeAt(whitespacePos);
} while (code <= 32);
if (parenthesesOpenPos < whitespacePos) {
if (pos !== whitespacePos + 1) {
token.nodes = [
{
type: "word",
sourceIndex: pos,
sourceEndIndex: whitespacePos + 1,
value: value.slice(pos, whitespacePos + 1)
}
];
} else {
token.nodes = [];
}
if (token.unclosed && whitespacePos + 1 !== next) {
token.after = "";
token.nodes.push({
type: "space",
sourceIndex: whitespacePos + 1,
sourceEndIndex: next,
value: value.slice(whitespacePos + 1, next)
});
} else {
token.after = value.slice(whitespacePos + 1, next);
token.sourceEndIndex = next;
}
} else {
token.after = "";
token.nodes = [];
}
pos = next + 1;
token.sourceEndIndex = token.unclosed ? next : pos;
code = value.charCodeAt(pos);
tokens.push(token);
} else {
balanced += 1;
token.after = "";
token.sourceEndIndex = pos + 1;
tokens.push(token);
stack.push(token);
tokens = token.nodes = [];
parent = token;
}
name = "";
// Close parentheses
} else if (closeParentheses === code && balanced) {
pos += 1;
code = value.charCodeAt(pos);
parent.after = after;
parent.sourceEndIndex += after.length;
after = "";
balanced -= 1;
stack[stack.length - 1].sourceEndIndex = pos;
stack.pop();
parent = stack[balanced];
tokens = parent.nodes;
// Words
} else {
next = pos;
do {
if (code === backslash) {
next += 1;
}
next += 1;
code = value.charCodeAt(next);
} while (
next < max &&
!(
code <= 32 ||
code === singleQuote ||
code === doubleQuote ||
code === comma ||
code === colon ||
code === slash ||
code === openParentheses ||
(code === star &&
parent &&
parent.type === "function" &&
parent.value === "calc") ||
(code === slash &&
parent.type === "function" &&
parent.value === "calc") ||
(code === closeParentheses && balanced)
)
);
token = value.slice(pos, next);
if (openParentheses === code) {
name = token;
} else if (
(uLower === token.charCodeAt(0) || uUpper === token.charCodeAt(0)) &&
plus === token.charCodeAt(1) &&
isUnicodeRange.test(token.slice(2))
) {
tokens.push({
type: "unicode-range",
sourceIndex: pos,
sourceEndIndex: next,
value: token
});
} else {
tokens.push({
type: "word",
sourceIndex: pos,
sourceEndIndex: next,
value: token
});
}
pos = next;
}
}
for (pos = stack.length - 1; pos; pos -= 1) {
stack[pos].unclosed = true;
stack[pos].sourceEndIndex = value.length;
}
return stack[0].nodes;
};
/***/ }),
/***/ 4725:
/***/ ((module) => {
function stringifyNode(node, custom) {
var type = node.type;
var value = node.value;
var buf;
var customResult;
if (custom && (customResult = custom(node)) !== undefined) {
return customResult;
} else if (type === "word" || type === "space") {
return value;
} else if (type === "string") {
buf = node.quote || "";
return buf + value + (node.unclosed ? "" : buf);
} else if (type === "comment") {
return "/*" + value + (node.unclosed ? "" : "*/");
} else if (type === "div") {
return (node.before || "") + value + (node.after || "");
} else if (Array.isArray(node.nodes)) {
buf = stringify(node.nodes, custom);
if (type !== "function") {
return buf;
}
return (
value +
"(" +
(node.before || "") +
buf +
(node.after || "") +
(node.unclosed ? "" : ")")
);
}
return value;
}
function stringify(nodes, custom) {
var result, i;
if (Array.isArray(nodes)) {
result = "";
for (i = nodes.length - 1; ~i; i -= 1) {
result = stringifyNode(nodes[i], custom) + result;
}
return result;
}
return stringifyNode(nodes, custom);
}
module.exports = stringify;
/***/ }),
/***/ 1524:
/***/ ((module) => {
var minus = "-".charCodeAt(0);
var plus = "+".charCodeAt(0);
var dot = ".".charCodeAt(0);
var exp = "e".charCodeAt(0);
var EXP = "E".charCodeAt(0);
// Check if three code points would start a number
// https://www.w3.org/TR/css-syntax-3/#starts-with-a-number
function likeNumber(value) {
var code = value.charCodeAt(0);
var nextCode;
if (code === plus || code === minus) {
nextCode = value.charCodeAt(1);
if (nextCode >= 48 && nextCode <= 57) {
return true;
}
var nextNextCode = value.charCodeAt(2);
if (nextCode === dot && nextNextCode >= 48 && nextNextCode <= 57) {
return true;
}
return false;
}
if (code === dot) {
nextCode = value.charCodeAt(1);
if (nextCode >= 48 && nextCode <= 57) {
return true;
}
return false;
}
if (code >= 48 && code <= 57) {
return true;
}
return false;
}
// Consume a number
// https://www.w3.org/TR/css-syntax-3/#consume-number
module.exports = function(value) {
var pos = 0;
var length = value.length;
var code;
var nextCode;
var nextNextCode;
if (length === 0 || !likeNumber(value)) {
return false;
}
code = value.charCodeAt(pos);
if (code === plus || code === minus) {
pos++;
}
while (pos < length) {
code = value.charCodeAt(pos);
if (code < 48 || code > 57) {
break;
}
pos += 1;
}
code = value.charCodeAt(pos);
nextCode = value.charCodeAt(pos + 1);
if (code === dot && nextCode >= 48 && nextCode <= 57) {
pos += 2;
while (pos < length) {
code = value.charCodeAt(pos);
if (code < 48 || code > 57) {
break;
}
pos += 1;
}
}
code = value.charCodeAt(pos);
nextCode = value.charCodeAt(pos + 1);
nextNextCode = value.charCodeAt(pos + 2);
if (
(code === exp || code === EXP) &&
((nextCode >= 48 && nextCode <= 57) ||
((nextCode === plus || nextCode === minus) &&
nextNextCode >= 48 &&
nextNextCode <= 57))
) {
pos += nextCode === plus || nextCode === minus ? 3 : 2;
while (pos < length) {
code = value.charCodeAt(pos);
if (code < 48 || code > 57) {
break;
}
pos += 1;
}
}
return {
number: value.slice(0, pos),
unit: value.slice(pos)
};
};
/***/ }),
/***/ 3815:
/***/ ((module) => {
module.exports = function walk(nodes, cb, bubble) {
var i, max, node, result;
for (i = 0, max = nodes.length; i < max; i += 1) {
node = nodes[i];
if (!bubble) {
result = cb(node, i, nodes);
}
if (
result !== false &&
node.type === "function" &&
Array.isArray(node.nodes)
) {
walk(node.nodes, cb, bubble);
}
if (bubble) {
cb(node, i, nodes);
}
}
};
/***/ }),
/***/ 1326:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
"use strict";
let Container = __webpack_require__(683)
class AtRule extends Container {
constructor(defaults) {
super(defaults)
this.type = 'atrule'
}
append(...children) {
if (!this.proxyOf.nodes) this.nodes = []
return super.append(...children)
}
prepend(...children) {
if (!this.proxyOf.nodes) this.nodes = []
return super.prepend(...children)
}
}
module.exports = AtRule
AtRule.default = AtRule
Container.registerAtRule(AtRule)
/***/ }),
/***/ 6589:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
"use strict";
let Node = __webpack_require__(7490)
class Comment extends Node {
constructor(defaults) {
super(defaults)
this.type = 'comment'
}
}
module.exports = Comment
Comment.default = Comment
/***/ }),
/***/ 683:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
"use strict";
let Comment = __webpack_require__(6589)
let Declaration = __webpack_require__(1516)
let Node = __webpack_require__(7490)
let { isClean, my } = __webpack_require__(1381)
let AtRule, parse, Root, Rule
function cleanSource(nodes) {
return nodes.map(i => {
if (i.nodes) i.nodes = cleanSource(i.nodes)
delete i.source
return i
})
}
function markTreeDirty(node) {
node[isClean] = false
if (node.proxyOf.nodes) {
for (let i of node.proxyOf.nodes) {
markTreeDirty(i)
}
}
}
class Container extends Node {
append(...children) {
for (let child of children) {
let nodes = this.normalize(child, this.last)
for (let node of nodes) this.proxyOf.nodes.push(node)
}
this.markDirty()
return this
}
cleanRaws(keepBetween) {
super.cleanRaws(keepBetween)
if (this.nodes) {
for (let node of this.nodes) node.cleanRaws(keepBetween)
}
}
each(callback) {
if (!this.proxyOf.nodes) return undefined
let iterator = this.getIterator()
let index, result
while (this.indexes[iterator] < this.proxyOf.nodes.length) {
index = this.indexes[iterator]
result = callback(this.proxyOf.nodes[index], index)
if (result === false) break
this.indexes[iterator] += 1
}
delete this.indexes[iterator]
return result
}
every(condition) {
return this.nodes.every(condition)
}
getIterator() {
if (!this.lastEach) this.lastEach = 0
if (!this.indexes) this.indexes = {}
this.lastEach += 1
let iterator = this.lastEach
this.indexes[iterator] = 0
return iterator
}
getProxyProcessor() {
return {
get(node, prop) {
if (prop === 'proxyOf') {
return node
} else if (!node[prop]) {
return node[prop]
} else if (
prop === 'each' ||
(typeof prop === 'string' && prop.startsWith('walk'))
) {
return (...args) => {
return node[prop](
...args.map(i => {
if (typeof i === 'function') {
return (child, index) => i(child.toProxy(), index)
} else {
return i
}
})
)
}
} else if (prop === 'every' || prop === 'some') {
return cb => {
return node[prop]((child, ...other) =>
cb(child.toProxy(), ...other)
)
}
} else if (prop === 'root') {
return () => node.root().toProxy()
} else if (prop === 'nodes') {
return node.nodes.map(i => i.toProxy())
} else if (prop === 'first' || prop === 'last') {
return node[prop].toProxy()
} else {
return node[prop]
}
},
set(node, prop, value) {
if (node[prop] === value) return true
node[prop] = value
if (prop === 'name' || prop === 'params' || prop === 'selector') {
node.markDirty()
}
return true
}
}
}
index(child) {
if (typeof child === 'number') return child
if (child.proxyOf) child = child.proxyOf
return this.proxyOf.nodes.indexOf(child)
}
insertAfter(exist, add) {
let existIndex = this.index(exist)
let nodes = this.normalize(add, this.proxyOf.nodes[existIndex]).reverse()
existIndex = this.index(exist)
for (let node of nodes) this.proxyOf.nodes.splice(existIndex + 1, 0, node)
let index
for (let id in this.indexes) {
index = this.indexes[id]
if (existIndex < index) {
this.indexes[id] = index + nodes.length
}
}
this.markDirty()
return this
}
insertBefore(exist, add) {
let existIndex = this.index(exist)
let type = existIndex === 0 ? 'prepend' : false
let nodes = this.normalize(
add,
this.proxyOf.nodes[existIndex],
type
).reverse()
existIndex = this.index(exist)
for (let node of nodes) this.proxyOf.nodes.splice(existIndex, 0, node)
let index
for (let id in this.indexes) {
index = this.indexes[id]
if (existIndex <= index) {
this.indexes[id] = index + nodes.length
}
}
this.markDirty()
return this
}
normalize(nodes, sample) {
if (typeof nodes === 'string') {
nodes = cleanSource(parse(nodes).nodes)
} else if (typeof nodes === 'undefined') {
nodes = []
} else if (Array.isArray(nodes)) {
nodes = nodes.slice(0)
for (let i of nodes) {
if (i.parent) i.parent.removeChild(i, 'ignore')
}
} else if (nodes.type === 'root' && this.type !== 'document') {
nodes = nodes.nodes.slice(0)
for (let i of nodes) {
if (i.parent) i.parent.removeChild(i, 'ignore')
}
} else if (nodes.type) {
nodes = [nodes]
} else if (nodes.prop) {
if (typeof nodes.value === 'undefined') {
throw new Error('Value field is missed in node creation')
} else if (typeof nodes.value !== 'string') {
nodes.value = String(nodes.value)
}
nodes = [new Declaration(nodes)]
} else if (nodes.selector || nodes.selectors) {
nodes = [new Rule(nodes)]
} else if (nodes.name) {
nodes = [new AtRule(nodes)]
} else if (nodes.text) {
nodes = [new Comment(nodes)]
} else {
throw new Error('Unknown node type in node creation')
}
let processed = nodes.map(i => {
/* c8 ignore next */
if (!i[my]) Container.rebuild(i)
i = i.proxyOf
if (i.parent) i.parent.removeChild(i)
if (i[isClean]) markTreeDirty(i)
if (!i.raws) i.raws = {}
if (typeof i.raws.before === 'undefined') {
if (sample && typeof sample.raws.before !== 'undefined') {
i.raws.before = sample.raws.before.replace(/\S/g, '')
}
}
i.parent = this.proxyOf
return i
})
return processed
}
prepend(...children) {
children = children.reverse()
for (let child of children) {
let nodes = this.normalize(child, this.first, 'prepend').reverse()
for (let node of nodes) this.proxyOf.nodes.unshift(node)
for (let id in this.indexes) {
this.indexes[id] = this.indexes[id] + nodes.length
}
}
this.markDirty()
return this
}
push(child) {
child.parent = this
this.proxyOf.nodes.push(child)
return this
}
removeAll() {
for (let node of this.proxyOf.nodes) node.parent = undefined
this.proxyOf.nodes = []
this.markDirty()
return this
}
removeChild(child) {
child = this.index(child)
this.proxyOf.nodes[child].parent = undefined
this.proxyOf.nodes.splice(child, 1)
let index
for (let id in this.indexes) {
index = this.indexes[id]
if (index >= child) {
this.indexes[id] = index - 1
}
}
this.markDirty()
return this
}
replaceValues(pattern, opts, callback) {
if (!callback) {
callback = opts
opts = {}
}
this.walkDecls(decl => {
if (opts.props && !opts.props.includes(decl.prop)) return
if (opts.fast && !decl.value.includes(opts.fast)) return
decl.value = decl.value.replace(pattern, callback)
})
this.markDirty()
return this
}
some(condition) {
return this.nodes.some(condition)
}
walk(callback) {
return this.each((child, i) => {
let result
try {
result = callback(child, i)
} catch (e) {
throw child.addToError(e)
}
if (result !== false && child.walk) {
result = child.walk(callback)
}
return result
})
}
walkAtRules(name, callback) {
if (!callback) {
callback = name
return this.walk((child, i) => {
if (child.type === 'atrule') {
return callback(child, i)
}
})
}
if (name instanceof RegExp) {
return this.walk((child, i) => {
if (child.type === 'atrule' && name.test(child.name)) {
return callback(child, i)
}
})
}
return this.walk((child, i) => {
if (child.type === 'atrule' && child.name === name) {
return callback(child, i)
}
})
}
walkComments(callback) {
return this.walk((child, i) => {
if (child.type === 'comment') {
return callback(child, i)
}
})
}
walkDecls(prop, callback) {
if (!callback) {
callback = prop
return this.walk((child, i) => {
if (child.type === 'decl') {
return callback(child, i)
}
})
}
if (prop instanceof RegExp) {
return this.walk((child, i) => {
if (child.type === 'decl' && prop.test(child.prop)) {
return callback(child, i)
}
})
}
return this.walk((child, i) => {
if (child.type === 'decl' && child.prop === prop) {
return callback(child, i)
}
})
}
walkRules(selector, callback) {
if (!callback) {
callback = selector
return this.walk((child, i) => {
if (child.type === 'rule') {
return callback(child, i)
}
})
}
if (selector instanceof RegExp) {
return this.walk((child, i) => {
if (child.type === 'rule' && selector.test(child.selector)) {
return callback(child, i)
}
})
}
return this.walk((child, i) => {
if (child.type === 'rule' && child.selector === selector) {
return callback(child, i)
}
})
}
get first() {
if (!this.proxyOf.nodes) return undefined
return this.proxyOf.nodes[0]
}
get last() {
if (!this.proxyOf.nodes) return undefined
return this.proxyOf.nodes[this.proxyOf.nodes.length - 1]
}
}
Container.registerParse = dependant => {
parse = dependant
}
Container.registerRule = dependant => {
Rule = dependant
}
Container.registerAtRule = dependant => {
AtRule = dependant
}
Container.registerRoot = dependant => {
Root = dependant
}
module.exports = Container
Container.default = Container
/* c8 ignore start */
Container.rebuild = node => {
if (node.type === 'atrule') {
Object.setPrototypeOf(node, AtRule.prototype)
} else if (node.type === 'rule') {
Object.setPrototypeOf(node, Rule.prototype)
} else if (node.type === 'decl') {
Object.setPrototypeOf(node, Declaration.prototype)
} else if (node.type === 'comment') {
Object.setPrototypeOf(node, Comment.prototype)
} else if (node.type === 'root') {
Object.setPrototypeOf(node, Root.prototype)
}
node[my] = true
if (node.nodes) {
node.nodes.forEach(child => {
Container.rebuild(child)
})
}
}
/* c8 ignore stop */
/***/ }),
/***/ 356:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
"use strict";
let pico = __webpack_require__(2775)
let terminalHighlight = __webpack_require__(9746)
class CssSyntaxError extends Error {
constructor(message, line, column, source, file, plugin) {
super(message)
this.name = 'CssSyntaxError'
this.reason = message
if (file) {
this.file = file
}
if (source) {
this.source = source
}
if (plugin) {
this.plugin = plugin
}
if (typeof line !== 'undefined' && typeof column !== 'undefined') {
if (typeof line === 'number') {
this.line = line
this.column = column
} else {
this.line = line.line
this.column = line.column
this.endLine = column.line
this.endColumn = column.column
}
}
this.setMessage()
if (Error.captureStackTrace) {
Error.captureStackTrace(this, CssSyntaxError)
}
}
setMessage() {
this.message = this.plugin ? this.plugin + ': ' : ''
this.message += this.file ? this.file : '<css input>'
if (typeof this.line !== 'undefined') {
this.message += ':' + this.line + ':' + this.column
}
this.message += ': ' + this.reason
}
showSourceCode(color) {
if (!this.source) return ''
let css = this.source
if (color == null) color = pico.isColorSupported
let aside = text => text
let mark = text => text
let highlight = text => text
if (color) {
let { bold, gray, red } = pico.createColors(true)
mark = text => bold(red(text))
aside = text => gray(text)
if (terminalHighlight) {
highlight = text => terminalHighlight(text)
}
}
let lines = css.split(/\r?\n/)
let start = Math.max(this.line - 3, 0)
let end = Math.min(this.line + 2, lines.length)
let maxWidth = String(end).length
return lines
.slice(start, end)
.map((line, index) => {
let number = start + 1 + index
let gutter = ' ' + (' ' + number).slice(-maxWidth) + ' | '
if (number === this.line) {
if (line.length > 160) {
let padding = 20
let subLineStart = Math.max(0, this.column - padding)
let subLineEnd = Math.max(
this.column + padding,
this.endColumn + padding
)
let subLine = line.slice(subLineStart, subLineEnd)
let spacing =
aside(gutter.replace(/\d/g, ' ')) +
line
.slice(0, Math.min(this.column - 1, padding - 1))
.replace(/[^\t]/g, ' ')
return (
mark('>') +
aside(gutter) +
highlight(subLine) +
'\n ' +
spacing +
mark('^')
)
}
let spacing =
aside(gutter.replace(/\d/g, ' ')) +
line.slice(0, this.column - 1).replace(/[^\t]/g, ' ')
return (
mark('>') +
aside(gutter) +
highlight(line) +
'\n ' +
spacing +
mark('^')
)
}
return ' ' + aside(gutter) + highlight(line)
})
.join('\n')
}
toString() {
let code = this.showSourceCode()
if (code) {
code = '\n\n' + code + '\n'
}
return this.name + ': ' + this.message + code
}
}
module.exports = CssSyntaxError
CssSyntaxError.default = CssSyntaxError
/***/ }),
/***/ 1516:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
"use strict";
let Node = __webpack_require__(7490)
class Declaration extends Node {
constructor(defaults) {
if (
defaults &&
typeof defaults.value !== 'undefined' &&
typeof defaults.value !== 'string'
) {
defaults = { ...defaults, value: String(defaults.value) }
}
super(defaults)
this.type = 'decl'
}
get variable() {
return this.prop.startsWith('--') || this.prop[0] === '$'
}
}
module.exports = Declaration
Declaration.default = Declaration
/***/ }),
/***/ 271:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
"use strict";
let Container = __webpack_require__(683)
let LazyResult, Processor
class Document extends Container {
constructor(defaults) {
// type needs to be passed to super, otherwise child roots won't be normalized correctly
super({ type: 'document', ...defaults })
if (!this.nodes) {
this.nodes = []
}
}
toResult(opts = {}) {
let lazy = new LazyResult(new Processor(), this, opts)
return lazy.stringify()
}
}
Document.registerLazyResult = dependant => {
LazyResult = dependant
}
Document.registerProcessor = dependant => {
Processor = dependant
}
module.exports = Document
Document.default = Document
/***/ }),
/***/ 8940:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
"use strict";
let AtRule = __webpack_require__(1326)
let Comment = __webpack_require__(6589)
let Declaration = __webpack_require__(1516)
let Input = __webpack_require__(5380)
let PreviousMap = __webpack_require__(5696)
let Root = __webpack_require__(9434)
let Rule = __webpack_require__(4092)
function fromJSON(json, inputs) {
if (Array.isArray(json)) return json.map(n => fromJSON(n))
let { inputs: ownInputs, ...defaults } = json
if (ownInputs) {
inputs = []
for (let input of ownInputs) {
let inputHydrated = { ...input, __proto__: Input.prototype }
if (inputHydrated.map) {
inputHydrated.map = {
...inputHydrated.map,
__proto__: PreviousMap.prototype
}
}
inputs.push(inputHydrated)
}
}
if (defaults.nodes) {
defaults.nodes = json.nodes.map(n => fromJSON(n, inputs))
}
if (defaults.source) {
let { inputId, ...source } = defaults.source
defaults.source = source
if (inputId != null) {
defaults.source.input = inputs[inputId]
}
}
if (defaults.type === 'root') {
return new Root(defaults)
} else if (defaults.type === 'decl') {
return new Declaration(defaults)
} else if (defaults.type === 'rule') {
return new Rule(defaults)
} else if (defaults.type === 'comment') {
return new Comment(defaults)
} else if (defaults.type === 'atrule') {
return new AtRule(defaults)
} else {
throw new Error('Unknown node type: ' + json.type)
}
}
module.exports = fromJSON
fromJSON.default = fromJSON
/***/ }),
/***/ 5380:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
"use strict";
let { nanoid } = __webpack_require__(5042)
let { isAbsolute, resolve } = __webpack_require__(197)
let { SourceMapConsumer, SourceMapGenerator } = __webpack_require__(1866)
let { fileURLToPath, pathToFileURL } = __webpack_require__(2739)
let CssSyntaxError = __webpack_require__(356)
let PreviousMap = __webpack_require__(5696)
let terminalHighlight = __webpack_require__(9746)
let fromOffsetCache = Symbol('fromOffsetCache')
let sourceMapAvailable = Boolean(SourceMapConsumer && SourceMapGenerator)
let pathAvailable = Boolean(resolve && isAbsolute)
class Input {
constructor(css, opts = {}) {
if (
css === null ||
typeof css === 'undefined' ||
(typeof css === 'object' && !css.toString)
) {
throw new Error(`PostCSS received ${css} instead of CSS string`)
}
this.css = css.toString()
if (this.css[0] === '\uFEFF' || this.css[0] === '\uFFFE') {
this.hasBOM = true
this.css = this.css.slice(1)
} else {
this.hasBOM = false
}
if (opts.from) {
if (
!pathAvailable ||
/^\w+:\/\//.test(opts.from) ||
isAbsolute(opts.from)
) {
this.file = opts.from
} else {
this.file = resolve(opts.from)
}
}
if (pathAvailable && sourceMapAvailable) {
let map = new PreviousMap(this.css, opts)
if (map.text) {
this.map = map
let file = map.consumer().file
if (!this.file && file) this.file = this.mapResolve(file)
}
}
if (!this.file) {
this.id = '<input css ' + nanoid(6) + '>'
}
if (this.map) this.map.file = this.from
}
error(message, line, column, opts = {}) {
let endColumn, endLine, result
if (line && typeof line === 'object') {
let start = line
let end = column
if (typeof start.offset === 'number') {
let pos = this.fromOffset(start.offset)
line = pos.line
column = pos.col
} else {
line = start.line
column = start.column
}
if (typeof end.offset === 'number') {
let pos = this.fromOffset(end.offset)
endLine = pos.line
endColumn = pos.col
} else {
endLine = end.line
endColumn = end.column
}
} else if (!column) {
let pos = this.fromOffset(line)
line = pos.line
column = pos.col
}
let origin = this.origin(line, column, endLine, endColumn)
if (origin) {
result = new CssSyntaxError(
message,
origin.endLine === undefined
? origin.line
: { column: origin.column, line: origin.line },
origin.endLine === undefined
? origin.column
: { column: origin.endColumn, line: origin.endLine },
origin.source,
origin.file,
opts.plugin
)
} else {
result = new CssSyntaxError(
message,
endLine === undefined ? line : { column, line },
endLine === undefined ? column : { column: endColumn, line: endLine },
this.css,
this.file,
opts.plugin
)
}
result.input = { column, endColumn, endLine, line, source: this.css }
if (this.file) {
if (pathToFileURL) {
result.input.url = pathToFileURL(this.file).toString()
}
result.input.file = this.file
}
return result
}
fromOffset(offset) {
let lastLine, lineToIndex
if (!this[fromOffsetCache]) {
let lines = this.css.split('\n')
lineToIndex = new Array(lines.length)
let prevIndex = 0
for (let i = 0, l = lines.length; i < l; i++) {
lineToIndex[i] = prevIndex
prevIndex += lines[i].length + 1
}
this[fromOffsetCache] = lineToIndex
} else {
lineToIndex = this[fromOffsetCache]
}
lastLine = lineToIndex[lineToIndex.length - 1]
let min = 0
if (offset >= lastLine) {
min = lineToIndex.length - 1
} else {
let max = lineToIndex.length - 2
let mid
while (min < max) {
mid = min + ((max - min) >> 1)
if (offset < lineToIndex[mid]) {
max = mid - 1
} else if (offset >= lineToIndex[mid + 1]) {
min = mid + 1
} else {
min = mid
break
}
}
}
return {
col: offset - lineToIndex[min] + 1,
line: min + 1
}
}
mapResolve(file) {
if (/^\w+:\/\//.test(file)) {
return file
}
return resolve(this.map.consumer().sourceRoot || this.map.root || '.', file)
}
origin(line, column, endLine, endColumn) {
if (!this.map) return false
let consumer = this.map.consumer()
let from = consumer.originalPositionFor({ column, line })
if (!from.source) return false
let to
if (typeof endLine === 'number') {
to = consumer.originalPositionFor({ column: endColumn, line: endLine })
}
let fromUrl
if (isAbsolute(from.source)) {
fromUrl = pathToFileURL(from.source)
} else {
fromUrl = new URL(
from.source,
this.map.consumer().sourceRoot || pathToFileURL(this.map.mapFile)
)
}
let result = {
column: from.column,
endColumn: to && to.column,
endLine: to && to.line,
line: from.line,
url: fromUrl.toString()
}
if (fromUrl.protocol === 'file:') {
if (fileURLToPath) {
result.file = fileURLToPath(fromUrl)
} else {
/* c8 ignore next 2 */
throw new Error(`file: protocol is not available in this PostCSS build`)
}
}
let source = consumer.sourceContentFor(from.source)
if (source) result.source = source
return result
}
toJSON() {
let json = {}
for (let name of ['hasBOM', 'css', 'file', 'id']) {
if (this[name] != null) {
json[name] = this[name]
}
}
if (this.map) {
json.map = { ...this.map }
if (json.map.consumerCache) {
json.map.consumerCache = undefined
}
}
return json
}
get from() {
return this.file || this.id
}
}
module.exports = Input
Input.default = Input
if (terminalHighlight && terminalHighlight.registerInput) {
terminalHighlight.registerInput(Input)
}
/***/ }),
/***/ 448:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
"use strict";
let Container = __webpack_require__(683)
let Document = __webpack_require__(271)
let MapGenerator = __webpack_require__(1670)
let parse = __webpack_require__(4295)
let Result = __webpack_require__(9055)
let Root = __webpack_require__(9434)
let stringify = __webpack_require__(633)
let { isClean, my } = __webpack_require__(1381)
let warnOnce = __webpack_require__(3122)
const TYPE_TO_CLASS_NAME = {
atrule: 'AtRule',
comment: 'Comment',
decl: 'Declaration',
document: 'Document',
root: 'Root',
rule: 'Rule'
}
const PLUGIN_PROPS = {
AtRule: true,
AtRuleExit: true,
Comment: true,
CommentExit: true,
Declaration: true,
DeclarationExit: true,
Document: true,
DocumentExit: true,
Once: true,
OnceExit: true,
postcssPlugin: true,
prepare: true,
Root: true,
RootExit: true,
Rule: true,
RuleExit: true
}
const NOT_VISITORS = {
Once: true,
postcssPlugin: true,
prepare: true
}
const CHILDREN = 0
function isPromise(obj) {
return typeof obj === 'object' && typeof obj.then === 'function'
}
function getEvents(node) {
let key = false
let type = TYPE_TO_CLASS_NAME[node.type]
if (node.type === 'decl') {
key = node.prop.toLowerCase()
} else if (node.type === 'atrule') {
key = node.name.toLowerCase()
}
if (key && node.append) {
return [
type,
type + '-' + key,
CHILDREN,
type + 'Exit',
type + 'Exit-' + key
]
} else if (key) {
return [type, type + '-' + key, type + 'Exit', type + 'Exit-' + key]
} else if (node.append) {
return [type, CHILDREN, type + 'Exit']
} else {
return [type, type + 'Exit']
}
}
function toStack(node) {
let events
if (node.type === 'document') {
events = ['Document', CHILDREN, 'DocumentExit']
} else if (node.type === 'root') {
events = ['Root', CHILDREN, 'RootExit']
} else {
events = getEvents(node)
}
return {
eventIndex: 0,
events,
iterator: 0,
node,
visitorIndex: 0,
visitors: []
}
}
function cleanMarks(node) {
node[isClean] = false
if (node.nodes) node.nodes.forEach(i => cleanMarks(i))
return node
}
let postcss = {}
class LazyResult {
constructor(processor, css, opts) {
this.stringified = false
this.processed = false
let root
if (
typeof css === 'object' &&
css !== null &&
(css.type === 'root' || css.type === 'document')
) {
root = cleanMarks(css)
} else if (css instanceof LazyResult || css instanceof Result) {
root = cleanMarks(css.root)
if (css.map) {
if (typeof opts.map === 'undefined') opts.map = {}
if (!opts.map.inline) opts.map.inline = false
opts.map.prev = css.map
}
} else {
let parser = parse
if (opts.syntax) parser = opts.syntax.parse
if (opts.parser) parser = opts.parser
if (parser.parse) parser = parser.parse
try {
root = parser(css, opts)
} catch (error) {
this.processed = true
this.error = error
}
if (root && !root[my]) {
/* c8 ignore next 2 */
Container.rebuild(root)
}
}
this.result = new Result(processor, root, opts)
this.helpers = { ...postcss, postcss, result: this.result }
this.plugins = this.processor.plugins.map(plugin => {
if (typeof plugin === 'object' && plugin.prepare) {
return { ...plugin, ...plugin.prepare(this.result) }
} else {
return plugin
}
})
}
async() {
if (this.error) return Promise.reject(this.error)
if (this.processed) return Promise.resolve(this.result)
if (!this.processing) {
this.processing = this.runAsync()
}
return this.processing
}
catch(onRejected) {
return this.async().catch(onRejected)
}
finally(onFinally) {
return this.async().then(onFinally, onFinally)
}
getAsyncError() {
throw new Error('Use process(css).then(cb) to work with async plugins')
}
handleError(error, node) {
let plugin = this.result.lastPlugin
try {
if (node) node.addToError(error)
this.error = error
if (error.name === 'CssSyntaxError' && !error.plugin) {
error.plugin = plugin.postcssPlugin
error.setMessage()
} else if (plugin.postcssVersion) {
if (false) {}
}
} catch (err) {
/* c8 ignore next 3 */
// eslint-disable-next-line no-console
if (console && console.error) console.error(err)
}
return error
}
prepareVisitors() {
this.listeners = {}
let add = (plugin, type, cb) => {
if (!this.listeners[type]) this.listeners[type] = []
this.listeners[type].push([plugin, cb])
}
for (let plugin of this.plugins) {
if (typeof plugin === 'object') {
for (let event in plugin) {
if (!PLUGIN_PROPS[event] && /^[A-Z]/.test(event)) {
throw new Error(
`Unknown event ${event} in ${plugin.postcssPlugin}. ` +
`Try to update PostCSS (${this.processor.version} now).`
)
}
if (!NOT_VISITORS[event]) {
if (typeof plugin[event] === 'object') {
for (let filter in plugin[event]) {
if (filter === '*') {
add(plugin, event, plugin[event][filter])
} else {
add(
plugin,
event + '-' + filter.toLowerCase(),
plugin[event][filter]
)
}
}
} else if (typeof plugin[event] === 'function') {
add(plugin, event, plugin[event])
}
}
}
}
}
this.hasListener = Object.keys(this.listeners).length > 0
}
async runAsync() {
this.plugin = 0
for (let i = 0; i < this.plugins.length; i++) {
let plugin = this.plugins[i]
let promise = this.runOnRoot(plugin)
if (isPromise(promise)) {
try {
await promise
} catch (error) {
throw this.handleError(error)
}
}
}
this.prepareVisitors()
if (this.hasListener) {
let root = this.result.root
while (!root[isClean]) {
root[isClean] = true
let stack = [toStack(root)]
while (stack.length > 0) {
let promise = this.visitTick(stack)
if (isPromise(promise)) {
try {
await promise
} catch (e) {
let node = stack[stack.length - 1].node
throw this.handleError(e, node)
}
}
}
}
if (this.listeners.OnceExit) {
for (let [plugin, visitor] of this.listeners.OnceExit) {
this.result.lastPlugin = plugin
try {
if (root.type === 'document') {
let roots = root.nodes.map(subRoot =>
visitor(subRoot, this.helpers)
)
await Promise.all(roots)
} else {
await visitor(root, this.helpers)
}
} catch (e) {
throw this.handleError(e)
}
}
}
}
this.processed = true
return this.stringify()
}
runOnRoot(plugin) {
this.result.lastPlugin = plugin
try {
if (typeof plugin === 'object' && plugin.Once) {
if (this.result.root.type === 'document') {
let roots = this.result.root.nodes.map(root =>
plugin.Once(root, this.helpers)
)
if (isPromise(roots[0])) {
return Promise.all(roots)
}
return roots
}
return plugin.Once(this.result.root, this.helpers)
} else if (typeof plugin === 'function') {
return plugin(this.result.root, this.result)
}
} catch (error) {
throw this.handleError(error)
}
}
stringify() {
if (this.error) throw this.error
if (this.stringified) return this.result
this.stringified = true
this.sync()
let opts = this.result.opts
let str = stringify
if (opts.syntax) str = opts.syntax.stringify
if (opts.stringifier) str = opts.stringifier
if (str.stringify) str = str.stringify
let map = new MapGenerator(str, this.result.root, this.result.opts)
let data = map.generate()
this.result.css = data[0]
this.result.map = data[1]
return this.result
}
sync() {
if (this.error) throw this.error
if (this.processed) return this.result
this.processed = true
if (this.processing) {
throw this.getAsyncError()
}
for (let plugin of this.plugins) {
let promise = this.runOnRoot(plugin)
if (isPromise(promise)) {
throw this.getAsyncError()
}
}
this.prepareVisitors()
if (this.hasListener) {
let root = this.result.root
while (!root[isClean]) {
root[isClean] = true
this.walkSync(root)
}
if (this.listeners.OnceExit) {
if (root.type === 'document') {
for (let subRoot of root.nodes) {
this.visitSync(this.listeners.OnceExit, subRoot)
}
} else {
this.visitSync(this.listeners.OnceExit, root)
}
}
}
return this.result
}
then(onFulfilled, onRejected) {
if (false) {}
return this.async().then(onFulfilled, onRejected)
}
toString() {
return this.css
}
visitSync(visitors, node) {
for (let [plugin, visitor] of visitors) {
this.result.lastPlugin = plugin
let promise
try {
promise = visitor(node, this.helpers)
} catch (e) {
throw this.handleError(e, node.proxyOf)
}
if (node.type !== 'root' && node.type !== 'document' && !node.parent) {
return true
}
if (isPromise(promise)) {
throw this.getAsyncError()
}
}
}
visitTick(stack) {
let visit = stack[stack.length - 1]
let { node, visitors } = visit
if (node.type !== 'root' && node.type !== 'document' && !node.parent) {
stack.pop()
return
}
if (visitors.length > 0 && visit.visitorIndex < visitors.length) {
let [plugin, visitor] = visitors[visit.visitorIndex]
visit.visitorIndex += 1
if (visit.visitorIndex === visitors.length) {
visit.visitors = []
visit.visitorIndex = 0
}
this.result.lastPlugin = plugin
try {
return visitor(node.toProxy(), this.helpers)
} catch (e) {
throw this.handleError(e, node)
}
}
if (visit.iterator !== 0) {
let iterator = visit.iterator
let child
while ((child = node.nodes[node.indexes[iterator]])) {
node.indexes[iterator] += 1
if (!child[isClean]) {
child[isClean] = true
stack.push(toStack(child))
return
}
}
visit.iterator = 0
delete node.indexes[iterator]
}
let events = visit.events
while (visit.eventIndex < events.length) {
let event = events[visit.eventIndex]
visit.eventIndex += 1
if (event === CHILDREN) {
if (node.nodes && node.nodes.length) {
node[isClean] = true
visit.iterator = node.getIterator()
}
return
} else if (this.listeners[event]) {
visit.visitors = this.listeners[event]
return
}
}
stack.pop()
}
walkSync(node) {
node[isClean] = true
let events = getEvents(node)
for (let event of events) {
if (event === CHILDREN) {
if (node.nodes) {
node.each(child => {
if (!child[isClean]) this.walkSync(child)
})
}
} else {
let visitors = this.listeners[event]
if (visitors) {
if (this.visitSync(visitors, node.toProxy())) return
}
}
}
}
warnings() {
return this.sync().warnings()
}
get content() {
return this.stringify().content
}
get css() {
return this.stringify().css
}
get map() {
return this.stringify().map
}
get messages() {
return this.sync().messages
}
get opts() {
return this.result.opts
}
get processor() {
return this.result.processor
}
get root() {
return this.sync().root
}
get [Symbol.toStringTag]() {
return 'LazyResult'
}
}
LazyResult.registerPostcss = dependant => {
postcss = dependant
}
module.exports = LazyResult
LazyResult.default = LazyResult
Root.registerLazyResult(LazyResult)
Document.registerLazyResult(LazyResult)
/***/ }),
/***/ 7374:
/***/ ((module) => {
"use strict";
let list = {
comma(string) {
return list.split(string, [','], true)
},
space(string) {
let spaces = [' ', '\n', '\t']
return list.split(string, spaces)
},
split(string, separators, last) {
let array = []
let current = ''
let split = false
let func = 0
let inQuote = false
let prevQuote = ''
let escape = false
for (let letter of string) {
if (escape) {
escape = false
} else if (letter === '\\') {
escape = true
} else if (inQuote) {
if (letter === prevQuote) {
inQuote = false
}
} else if (letter === '"' || letter === "'") {
inQuote = true
prevQuote = letter
} else if (letter === '(') {
func += 1
} else if (letter === ')') {
if (func > 0) func -= 1
} else if (func === 0) {
if (separators.includes(letter)) split = true
}
if (split) {
if (current !== '') array.push(current.trim())
current = ''
split = false
} else {
current += letter
}
}
if (last || current !== '') array.push(current.trim())
return array
}
}
module.exports = list
list.default = list
/***/ }),
/***/ 1670:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
"use strict";
let { dirname, relative, resolve, sep } = __webpack_require__(197)
let { SourceMapConsumer, SourceMapGenerator } = __webpack_require__(1866)
let { pathToFileURL } = __webpack_require__(2739)
let Input = __webpack_require__(5380)
let sourceMapAvailable = Boolean(SourceMapConsumer && SourceMapGenerator)
let pathAvailable = Boolean(dirname && resolve && relative && sep)
class MapGenerator {
constructor(stringify, root, opts, cssString) {
this.stringify = stringify
this.mapOpts = opts.map || {}
this.root = root
this.opts = opts
this.css = cssString
this.originalCSS = cssString
this.usesFileUrls = !this.mapOpts.from && this.mapOpts.absolute
this.memoizedFileURLs = new Map()
this.memoizedPaths = new Map()
this.memoizedURLs = new Map()
}
addAnnotation() {
let content
if (this.isInline()) {
content =
'data:application/json;base64,' + this.toBase64(this.map.toString())
} else if (typeof this.mapOpts.annotation === 'string') {
content = this.mapOpts.annotation
} else if (typeof this.mapOpts.annotation === 'function') {
content = this.mapOpts.annotation(this.opts.to, this.root)
} else {
content = this.outputFile() + '.map'
}
let eol = '\n'
if (this.css.includes('\r\n')) eol = '\r\n'
this.css += eol + '/*# sourceMappingURL=' + content + ' */'
}
applyPrevMaps() {
for (let prev of this.previous()) {
let from = this.toUrl(this.path(prev.file))
let root = prev.root || dirname(prev.file)
let map
if (this.mapOpts.sourcesContent === false) {
map = new SourceMapConsumer(prev.text)
if (map.sourcesContent) {
map.sourcesContent = null
}
} else {
map = prev.consumer()
}
this.map.applySourceMap(map, from, this.toUrl(this.path(root)))
}
}
clearAnnotation() {
if (this.mapOpts.annotation === false) return
if (this.root) {
let node
for (let i = this.root.nodes.length - 1; i >= 0; i--) {
node = this.root.nodes[i]
if (node.type !== 'comment') continue
if (node.text.startsWith('# sourceMappingURL=')) {
this.root.removeChild(i)
}
}
} else if (this.css) {
this.css = this.css.replace(/\n*\/\*#[\S\s]*?\*\/$/gm, '')
}
}
generate() {
this.clearAnnotation()
if (pathAvailable && sourceMapAvailable && this.isMap()) {
return this.generateMap()
} else {
let result = ''
this.stringify(this.root, i => {
result += i
})
return [result]
}
}
generateMap() {
if (this.root) {
this.generateString()
} else if (this.previous().length === 1) {
let prev = this.previous()[0].consumer()
prev.file = this.outputFile()
this.map = SourceMapGenerator.fromSourceMap(prev, {
ignoreInvalidMapping: true
})
} else {
this.map = new SourceMapGenerator({
file: this.outputFile(),
ignoreInvalidMapping: true
})
this.map.addMapping({
generated: { column: 0, line: 1 },
original: { column: 0, line: 1 },
source: this.opts.from
? this.toUrl(this.path(this.opts.from))
: '<no source>'
})
}
if (this.isSourcesContent()) this.setSourcesContent()
if (this.root && this.previous().length > 0) this.applyPrevMaps()
if (this.isAnnotation()) this.addAnnotation()
if (this.isInline()) {
return [this.css]
} else {
return [this.css, this.map]
}
}
generateString() {
this.css = ''
this.map = new SourceMapGenerator({
file: this.outputFile(),
ignoreInvalidMapping: true
})
let line = 1
let column = 1
let noSource = '<no source>'
let mapping = {
generated: { column: 0, line: 0 },
original: { column: 0, line: 0 },
source: ''
}
let last, lines
this.stringify(this.root, (str, node, type) => {
this.css += str
if (node && type !== 'end') {
mapping.generated.line = line
mapping.generated.column = column - 1
if (node.source && node.source.start) {
mapping.source = this.sourcePath(node)
mapping.original.line = node.source.start.line
mapping.original.column = node.source.start.column - 1
this.map.addMapping(mapping)
} else {
mapping.source = noSource
mapping.original.line = 1
mapping.original.column = 0
this.map.addMapping(mapping)
}
}
lines = str.match(/\n/g)
if (lines) {
line += lines.length
last = str.lastIndexOf('\n')
column = str.length - last
} else {
column += str.length
}
if (node && type !== 'start') {
let p = node.parent || { raws: {} }
let childless =
node.type === 'decl' || (node.type === 'atrule' && !node.nodes)
if (!childless || node !== p.last || p.raws.semicolon) {
if (node.source && node.source.end) {
mapping.source = this.sourcePath(node)
mapping.original.line = node.source.end.line
mapping.original.column = node.source.end.column - 1
mapping.generated.line = line
mapping.generated.column = column - 2
this.map.addMapping(mapping)
} else {
mapping.source = noSource
mapping.original.line = 1
mapping.original.column = 0
mapping.generated.line = line
mapping.generated.column = column - 1
this.map.addMapping(mapping)
}
}
}
})
}
isAnnotation() {
if (this.isInline()) {
return true
}
if (typeof this.mapOpts.annotation !== 'undefined') {
return this.mapOpts.annotation
}
if (this.previous().length) {
return this.previous().some(i => i.annotation)
}
return true
}
isInline() {
if (typeof this.mapOpts.inline !== 'undefined') {
return this.mapOpts.inline
}
let annotation = this.mapOpts.annotation
if (typeof annotation !== 'undefined' && annotation !== true) {
return false
}
if (this.previous().length) {
return this.previous().some(i => i.inline)
}
return true
}
isMap() {
if (typeof this.opts.map !== 'undefined') {
return !!this.opts.map
}
return this.previous().length > 0
}
isSourcesContent() {
if (typeof this.mapOpts.sourcesContent !== 'undefined') {
return this.mapOpts.sourcesContent
}
if (this.previous().length) {
return this.previous().some(i => i.withContent())
}
return true
}
outputFile() {
if (this.opts.to) {
return this.path(this.opts.to)
} else if (this.opts.from) {
return this.path(this.opts.from)
} else {
return 'to.css'
}
}
path(file) {
if (this.mapOpts.absolute) return file
if (file.charCodeAt(0) === 60 /* `<` */) return file
if (/^\w+:\/\//.test(file)) return file
let cached = this.memoizedPaths.get(file)
if (cached) return cached
let from = this.opts.to ? dirname(this.opts.to) : '.'
if (typeof this.mapOpts.annotation === 'string') {
from = dirname(resolve(from, this.mapOpts.annotation))
}
let path = relative(from, file)
this.memoizedPaths.set(file, path)
return path
}
previous() {
if (!this.previousMaps) {
this.previousMaps = []
if (this.root) {
this.root.walk(node => {
if (node.source && node.source.input.map) {
let map = node.source.input.map
if (!this.previousMaps.includes(map)) {
this.previousMaps.push(map)
}
}
})
} else {
let input = new Input(this.originalCSS, this.opts)
if (input.map) this.previousMaps.push(input.map)
}
}
return this.previousMaps
}
setSourcesContent() {
let already = {}
if (this.root) {
this.root.walk(node => {
if (node.source) {
let from = node.source.input.from
if (from && !already[from]) {
already[from] = true
let fromUrl = this.usesFileUrls
? this.toFileUrl(from)
: this.toUrl(this.path(from))
this.map.setSourceContent(fromUrl, node.source.input.css)
}
}
})
} else if (this.css) {
let from = this.opts.from
? this.toUrl(this.path(this.opts.from))
: '<no source>'
this.map.setSourceContent(from, this.css)
}
}
sourcePath(node) {
if (this.mapOpts.from) {
return this.toUrl(this.mapOpts.from)
} else if (this.usesFileUrls) {
return this.toFileUrl(node.source.input.from)
} else {
return this.toUrl(this.path(node.source.input.from))
}
}
toBase64(str) {
if (Buffer) {
return Buffer.from(str).toString('base64')
} else {
return window.btoa(unescape(encodeURIComponent(str)))
}
}
toFileUrl(path) {
let cached = this.memoizedFileURLs.get(path)
if (cached) return cached
if (pathToFileURL) {
let fileURL = pathToFileURL(path).toString()
this.memoizedFileURLs.set(path, fileURL)
return fileURL
} else {
throw new Error(
'`map.absolute` option is not available in this PostCSS build'
)
}
}
toUrl(path) {
let cached = this.memoizedURLs.get(path)
if (cached) return cached
if (sep === '\\') {
path = path.replace(/\\/g, '/')
}
let url = encodeURI(path).replace(/[#?]/g, encodeURIComponent)
this.memoizedURLs.set(path, url)
return url
}
}
module.exports = MapGenerator
/***/ }),
/***/ 7661:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
"use strict";
let MapGenerator = __webpack_require__(1670)
let parse = __webpack_require__(4295)
const Result = __webpack_require__(9055)
let stringify = __webpack_require__(633)
let warnOnce = __webpack_require__(3122)
class NoWorkResult {
constructor(processor, css, opts) {
css = css.toString()
this.stringified = false
this._processor = processor
this._css = css
this._opts = opts
this._map = undefined
let root
let str = stringify
this.result = new Result(this._processor, root, this._opts)
this.result.css = css
let self = this
Object.defineProperty(this.result, 'root', {
get() {
return self.root
}
})
let map = new MapGenerator(str, root, this._opts, css)
if (map.isMap()) {
let [generatedCSS, generatedMap] = map.generate()
if (generatedCSS) {
this.result.css = generatedCSS
}
if (generatedMap) {
this.result.map = generatedMap
}
} else {
map.clearAnnotation()
this.result.css = map.css
}
}
async() {
if (this.error) return Promise.reject(this.error)
return Promise.resolve(this.result)
}
catch(onRejected) {
return this.async().catch(onRejected)
}
finally(onFinally) {
return this.async().then(onFinally, onFinally)
}
sync() {
if (this.error) throw this.error
return this.result
}
then(onFulfilled, onRejected) {
if (false) {}
return this.async().then(onFulfilled, onRejected)
}
toString() {
return this._css
}
warnings() {
return []
}
get content() {
return this.result.css
}
get css() {
return this.result.css
}
get map() {
return this.result.map
}
get messages() {
return []
}
get opts() {
return this.result.opts
}
get processor() {
return this.result.processor
}
get root() {
if (this._root) {
return this._root
}
let root
let parser = parse
try {
root = parser(this._css, this._opts)
} catch (error) {
this.error = error
}
if (this.error) {
throw this.error
} else {
this._root = root
return root
}
}
get [Symbol.toStringTag]() {
return 'NoWorkResult'
}
}
module.exports = NoWorkResult
NoWorkResult.default = NoWorkResult
/***/ }),
/***/ 7490:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
"use strict";
let CssSyntaxError = __webpack_require__(356)
let Stringifier = __webpack_require__(346)
let stringify = __webpack_require__(633)
let { isClean, my } = __webpack_require__(1381)
function cloneNode(obj, parent) {
let cloned = new obj.constructor()
for (let i in obj) {
if (!Object.prototype.hasOwnProperty.call(obj, i)) {
/* c8 ignore next 2 */
continue
}
if (i === 'proxyCache') continue
let value = obj[i]
let type = typeof value
if (i === 'parent' && type === 'object') {
if (parent) cloned[i] = parent
} else if (i === 'source') {
cloned[i] = value
} else if (Array.isArray(value)) {
cloned[i] = value.map(j => cloneNode(j, cloned))
} else {
if (type === 'object' && value !== null) value = cloneNode(value)
cloned[i] = value
}
}
return cloned
}
class Node {
constructor(defaults = {}) {
this.raws = {}
this[isClean] = false
this[my] = true
for (let name in defaults) {
if (name === 'nodes') {
this.nodes = []
for (let node of defaults[name]) {
if (typeof node.clone === 'function') {
this.append(node.clone())
} else {
this.append(node)
}
}
} else {
this[name] = defaults[name]
}
}
}
addToError(error) {
error.postcssNode = this
if (error.stack && this.source && /\n\s{4}at /.test(error.stack)) {
let s = this.source
error.stack = error.stack.replace(
/\n\s{4}at /,
`$&${s.input.from}:${s.start.line}:${s.start.column}$&`
)
}
return error
}
after(add) {
this.parent.insertAfter(this, add)
return this
}
assign(overrides = {}) {
for (let name in overrides) {
this[name] = overrides[name]
}
return this
}
before(add) {
this.parent.insertBefore(this, add)
return this
}
cleanRaws(keepBetween) {
delete this.raws.before
delete this.raws.after
if (!keepBetween) delete this.raws.between
}
clone(overrides = {}) {
let cloned = cloneNode(this)
for (let name in overrides) {
cloned[name] = overrides[name]
}
return cloned
}
cloneAfter(overrides = {}) {
let cloned = this.clone(overrides)
this.parent.insertAfter(this, cloned)
return cloned
}
cloneBefore(overrides = {}) {
let cloned = this.clone(overrides)
this.parent.insertBefore(this, cloned)
return cloned
}
error(message, opts = {}) {
if (this.source) {
let { end, start } = this.rangeBy(opts)
return this.source.input.error(
message,
{ column: start.column, line: start.line },
{ column: end.column, line: end.line },
opts
)
}
return new CssSyntaxError(message)
}
getProxyProcessor() {
return {
get(node, prop) {
if (prop === 'proxyOf') {
return node
} else if (prop === 'root') {
return () => node.root().toProxy()
} else {
return node[prop]
}
},
set(node, prop, value) {
if (node[prop] === value) return true
node[prop] = value
if (
prop === 'prop' ||
prop === 'value' ||
prop === 'name' ||
prop === 'params' ||
prop === 'important' ||
/* c8 ignore next */
prop === 'text'
) {
node.markDirty()
}
return true
}
}
}
/* c8 ignore next 3 */
markClean() {
this[isClean] = true
}
markDirty() {
if (this[isClean]) {
this[isClean] = false
let next = this
while ((next = next.parent)) {
next[isClean] = false
}
}
}
next() {
if (!this.parent) return undefined
let index = this.parent.index(this)
return this.parent.nodes[index + 1]
}
positionBy(opts, stringRepresentation) {
let pos = this.source.start
if (opts.index) {
pos = this.positionInside(opts.index, stringRepresentation)
} else if (opts.word) {
stringRepresentation = this.toString()
let index = stringRepresentation.indexOf(opts.word)
if (index !== -1) pos = this.positionInside(index, stringRepresentation)
}
return pos
}
positionInside(index, stringRepresentation) {
let string = stringRepresentation || this.toString()
let column = this.source.start.column
let line = this.source.start.line
for (let i = 0; i < index; i++) {
if (string[i] === '\n') {
column = 1
line += 1
} else {
column += 1
}
}
return { column, line }
}
prev() {
if (!this.parent) return undefined
let index = this.parent.index(this)
return this.parent.nodes[index - 1]
}
rangeBy(opts) {
let start = {
column: this.source.start.column,
line: this.source.start.line
}
let end = this.source.end
? {
column: this.source.end.column + 1,
line: this.source.end.line
}
: {
column: start.column + 1,
line: start.line
}
if (opts.word) {
let stringRepresentation = this.toString()
let index = stringRepresentation.indexOf(opts.word)
if (index !== -1) {
start = this.positionInside(index, stringRepresentation)
end = this.positionInside(
index + opts.word.length,
stringRepresentation
)
}
} else {
if (opts.start) {
start = {
column: opts.start.column,
line: opts.start.line
}
} else if (opts.index) {
start = this.positionInside(opts.index)
}
if (opts.end) {
end = {
column: opts.end.column,
line: opts.end.line
}
} else if (typeof opts.endIndex === 'number') {
end = this.positionInside(opts.endIndex)
} else if (opts.index) {
end = this.positionInside(opts.index + 1)
}
}
if (
end.line < start.line ||
(end.line === start.line && end.column <= start.column)
) {
end = { column: start.column + 1, line: start.line }
}
return { end, start }
}
raw(prop, defaultType) {
let str = new Stringifier()
return str.raw(this, prop, defaultType)
}
remove() {
if (this.parent) {
this.parent.removeChild(this)
}
this.parent = undefined
return this
}
replaceWith(...nodes) {
if (this.parent) {
let bookmark = this
let foundSelf = false
for (let node of nodes) {
if (node === this) {
foundSelf = true
} else if (foundSelf) {
this.parent.insertAfter(bookmark, node)
bookmark = node
} else {
this.parent.insertBefore(bookmark, node)
}
}
if (!foundSelf) {
this.remove()
}
}
return this
}
root() {
let result = this
while (result.parent && result.parent.type !== 'document') {
result = result.parent
}
return result
}
toJSON(_, inputs) {
let fixed = {}
let emitInputs = inputs == null
inputs = inputs || new Map()
let inputsNextIndex = 0
for (let name in this) {
if (!Object.prototype.hasOwnProperty.call(this, name)) {
/* c8 ignore next 2 */
continue
}
if (name === 'parent' || name === 'proxyCache') continue
let value = this[name]
if (Array.isArray(value)) {
fixed[name] = value.map(i => {
if (typeof i === 'object' && i.toJSON) {
return i.toJSON(null, inputs)
} else {
return i
}
})
} else if (typeof value === 'object' && value.toJSON) {
fixed[name] = value.toJSON(null, inputs)
} else if (name === 'source') {
let inputId = inputs.get(value.input)
if (inputId == null) {
inputId = inputsNextIndex
inputs.set(value.input, inputsNextIndex)
inputsNextIndex++
}
fixed[name] = {
end: value.end,
inputId,
start: value.start
}
} else {
fixed[name] = value
}
}
if (emitInputs) {
fixed.inputs = [...inputs.keys()].map(input => input.toJSON())
}
return fixed
}
toProxy() {
if (!this.proxyCache) {
this.proxyCache = new Proxy(this, this.getProxyProcessor())
}
return this.proxyCache
}
toString(stringifier = stringify) {
if (stringifier.stringify) stringifier = stringifier.stringify
let result = ''
stringifier(this, i => {
result += i
})
return result
}
warn(result, text, opts) {
let data = { node: this }
for (let i in opts) data[i] = opts[i]
return result.warn(text, data)
}
get proxyOf() {
return this
}
}
module.exports = Node
Node.default = Node
/***/ }),
/***/ 4295:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
"use strict";
let Container = __webpack_require__(683)
let Input = __webpack_require__(5380)
let Parser = __webpack_require__(3937)
function parse(css, opts) {
let input = new Input(css, opts)
let parser = new Parser(input)
try {
parser.parse()
} catch (e) {
if (false) {}
throw e
}
return parser.root
}
module.exports = parse
parse.default = parse
Container.registerParse(parse)
/***/ }),
/***/ 3937:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
"use strict";
let AtRule = __webpack_require__(1326)
let Comment = __webpack_require__(6589)
let Declaration = __webpack_require__(1516)
let Root = __webpack_require__(9434)
let Rule = __webpack_require__(4092)
let tokenizer = __webpack_require__(2327)
const SAFE_COMMENT_NEIGHBOR = {
empty: true,
space: true
}
function findLastWithPosition(tokens) {
for (let i = tokens.length - 1; i >= 0; i--) {
let token = tokens[i]
let pos = token[3] || token[2]
if (pos) return pos
}
}
class Parser {
constructor(input) {
this.input = input
this.root = new Root()
this.current = this.root
this.spaces = ''
this.semicolon = false
this.createTokenizer()
this.root.source = { input, start: { column: 1, line: 1, offset: 0 } }
}
atrule(token) {
let node = new AtRule()
node.name = token[1].slice(1)
if (node.name === '') {
this.unnamedAtrule(node, token)
}
this.init(node, token[2])
let type
let prev
let shift
let last = false
let open = false
let params = []
let brackets = []
while (!this.tokenizer.endOfFile()) {
token = this.tokenizer.nextToken()
type = token[0]
if (type === '(' || type === '[') {
brackets.push(type === '(' ? ')' : ']')
} else if (type === '{' && brackets.length > 0) {
brackets.push('}')
} else if (type === brackets[brackets.length - 1]) {
brackets.pop()
}
if (brackets.length === 0) {
if (type === ';') {
node.source.end = this.getPosition(token[2])
node.source.end.offset++
this.semicolon = true
break
} else if (type === '{') {
open = true
break
} else if (type === '}') {
if (params.length > 0) {
shift = params.length - 1
prev = params[shift]
while (prev && prev[0] === 'space') {
prev = params[--shift]
}
if (prev) {
node.source.end = this.getPosition(prev[3] || prev[2])
node.source.end.offset++
}
}
this.end(token)
break
} else {
params.push(token)
}
} else {
params.push(token)
}
if (this.tokenizer.endOfFile()) {
last = true
break
}
}
node.raws.between = this.spacesAndCommentsFromEnd(params)
if (params.length) {
node.raws.afterName = this.spacesAndCommentsFromStart(params)
this.raw(node, 'params', params)
if (last) {
token = params[params.length - 1]
node.source.end = this.getPosition(token[3] || token[2])
node.source.end.offset++
this.spaces = node.raws.between
node.raws.between = ''
}
} else {
node.raws.afterName = ''
node.params = ''
}
if (open) {
node.nodes = []
this.current = node
}
}
checkMissedSemicolon(tokens) {
let colon = this.colon(tokens)
if (colon === false) return
let founded = 0
let token
for (let j = colon - 1; j >= 0; j--) {
token = tokens[j]
if (token[0] !== 'space') {
founded += 1
if (founded === 2) break
}
}
// If the token is a word, e.g. `!important`, `red` or any other valid property's value.
// Then we need to return the colon after that word token. [3] is the "end" colon of that word.
// And because we need it after that one we do +1 to get the next one.
throw this.input.error(
'Missed semicolon',
token[0] === 'word' ? token[3] + 1 : token[2]
)
}
colon(tokens) {
let brackets = 0
let prev, token, type
for (let [i, element] of tokens.entries()) {
token = element
type = token[0]
if (type === '(') {
brackets += 1
}
if (type === ')') {
brackets -= 1
}
if (brackets === 0 && type === ':') {
if (!prev) {
this.doubleColon(token)
} else if (prev[0] === 'word' && prev[1] === 'progid') {
continue
} else {
return i
}
}
prev = token
}
return false
}
comment(token) {
let node = new Comment()
this.init(node, token[2])
node.source.end = this.getPosition(token[3] || token[2])
node.source.end.offset++
let text = token[1].slice(2, -2)
if (/^\s*$/.test(text)) {
node.text = ''
node.raws.left = text
node.raws.right = ''
} else {
let match = text.match(/^(\s*)([^]*\S)(\s*)$/)
node.text = match[2]
node.raws.left = match[1]
node.raws.right = match[3]
}
}
createTokenizer() {
this.tokenizer = tokenizer(this.input)
}
decl(tokens, customProperty) {
let node = new Declaration()
this.init(node, tokens[0][2])
let last = tokens[tokens.length - 1]
if (last[0] === ';') {
this.semicolon = true
tokens.pop()
}
node.source.end = this.getPosition(
last[3] || last[2] || findLastWithPosition(tokens)
)
node.source.end.offset++
while (tokens[0][0] !== 'word') {
if (tokens.length === 1) this.unknownWord(tokens)
node.raws.before += tokens.shift()[1]
}
node.source.start = this.getPosition(tokens[0][2])
node.prop = ''
while (tokens.length) {
let type = tokens[0][0]
if (type === ':' || type === 'space' || type === 'comment') {
break
}
node.prop += tokens.shift()[1]
}
node.raws.between = ''
let token
while (tokens.length) {
token = tokens.shift()
if (token[0] === ':') {
node.raws.between += token[1]
break
} else {
if (token[0] === 'word' && /\w/.test(token[1])) {
this.unknownWord([token])
}
node.raws.between += token[1]
}
}
if (node.prop[0] === '_' || node.prop[0] === '*') {
node.raws.before += node.prop[0]
node.prop = node.prop.slice(1)
}
let firstSpaces = []
let next
while (tokens.length) {
next = tokens[0][0]
if (next !== 'space' && next !== 'comment') break
firstSpaces.push(tokens.shift())
}
this.precheckMissedSemicolon(tokens)
for (let i = tokens.length - 1; i >= 0; i--) {
token = tokens[i]
if (token[1].toLowerCase() === '!important') {
node.important = true
let string = this.stringFrom(tokens, i)
string = this.spacesFromEnd(tokens) + string
if (string !== ' !important') node.raws.important = string
break
} else if (token[1].toLowerCase() === 'important') {
let cache = tokens.slice(0)
let str = ''
for (let j = i; j > 0; j--) {
let type = cache[j][0]
if (str.trim().startsWith('!') && type !== 'space') {
break
}
str = cache.pop()[1] + str
}
if (str.trim().startsWith('!')) {
node.important = true
node.raws.important = str
tokens = cache
}
}
if (token[0] !== 'space' && token[0] !== 'comment') {
break
}
}
let hasWord = tokens.some(i => i[0] !== 'space' && i[0] !== 'comment')
if (hasWord) {
node.raws.between += firstSpaces.map(i => i[1]).join('')
firstSpaces = []
}
this.raw(node, 'value', firstSpaces.concat(tokens), customProperty)
if (node.value.includes(':') && !customProperty) {
this.checkMissedSemicolon(tokens)
}
}
doubleColon(token) {
throw this.input.error(
'Double colon',
{ offset: token[2] },
{ offset: token[2] + token[1].length }
)
}
emptyRule(token) {
let node = new Rule()
this.init(node, token[2])
node.selector = ''
node.raws.between = ''
this.current = node
}
end(token) {
if (this.current.nodes && this.current.nodes.length) {
this.current.raws.semicolon = this.semicolon
}
this.semicolon = false
this.current.raws.after = (this.current.raws.after || '') + this.spaces
this.spaces = ''
if (this.current.parent) {
this.current.source.end = this.getPosition(token[2])
this.current.source.end.offset++
this.current = this.current.parent
} else {
this.unexpectedClose(token)
}
}
endFile() {
if (this.current.parent) this.unclosedBlock()
if (this.current.nodes && this.current.nodes.length) {
this.current.raws.semicolon = this.semicolon
}
this.current.raws.after = (this.current.raws.after || '') + this.spaces
this.root.source.end = this.getPosition(this.tokenizer.position())
}
freeSemicolon(token) {
this.spaces += token[1]
if (this.current.nodes) {
let prev = this.current.nodes[this.current.nodes.length - 1]
if (prev && prev.type === 'rule' && !prev.raws.ownSemicolon) {
prev.raws.ownSemicolon = this.spaces
this.spaces = ''
}
}
}
// Helpers
getPosition(offset) {
let pos = this.input.fromOffset(offset)
return {
column: pos.col,
line: pos.line,
offset
}
}
init(node, offset) {
this.current.push(node)
node.source = {
input: this.input,
start: this.getPosition(offset)
}
node.raws.before = this.spaces
this.spaces = ''
if (node.type !== 'comment') this.semicolon = false
}
other(start) {
let end = false
let type = null
let colon = false
let bracket = null
let brackets = []
let customProperty = start[1].startsWith('--')
let tokens = []
let token = start
while (token) {
type = token[0]
tokens.push(token)
if (type === '(' || type === '[') {
if (!bracket) bracket = token
brackets.push(type === '(' ? ')' : ']')
} else if (customProperty && colon && type === '{') {
if (!bracket) bracket = token
brackets.push('}')
} else if (brackets.length === 0) {
if (type === ';') {
if (colon) {
this.decl(tokens, customProperty)
return
} else {
break
}
} else if (type === '{') {
this.rule(tokens)
return
} else if (type === '}') {
this.tokenizer.back(tokens.pop())
end = true
break
} else if (type === ':') {
colon = true
}
} else if (type === brackets[brackets.length - 1]) {
brackets.pop()
if (brackets.length === 0) bracket = null
}
token = this.tokenizer.nextToken()
}
if (this.tokenizer.endOfFile()) end = true
if (brackets.length > 0) this.unclosedBracket(bracket)
if (end && colon) {
if (!customProperty) {
while (tokens.length) {
token = tokens[tokens.length - 1][0]
if (token !== 'space' && token !== 'comment') break
this.tokenizer.back(tokens.pop())
}
}
this.decl(tokens, customProperty)
} else {
this.unknownWord(tokens)
}
}
parse() {
let token
while (!this.tokenizer.endOfFile()) {
token = this.tokenizer.nextToken()
switch (token[0]) {
case 'space':
this.spaces += token[1]
break
case ';':
this.freeSemicolon(token)
break
case '}':
this.end(token)
break
case 'comment':
this.comment(token)
break
case 'at-word':
this.atrule(token)
break
case '{':
this.emptyRule(token)
break
default:
this.other(token)
break
}
}
this.endFile()
}
precheckMissedSemicolon(/* tokens */) {
// Hook for Safe Parser
}
raw(node, prop, tokens, customProperty) {
let token, type
let length = tokens.length
let value = ''
let clean = true
let next, prev
for (let i = 0; i < length; i += 1) {
token = tokens[i]
type = token[0]
if (type === 'space' && i === length - 1 && !customProperty) {
clean = false
} else if (type === 'comment') {
prev = tokens[i - 1] ? tokens[i - 1][0] : 'empty'
next = tokens[i + 1] ? tokens[i + 1][0] : 'empty'
if (!SAFE_COMMENT_NEIGHBOR[prev] && !SAFE_COMMENT_NEIGHBOR[next]) {
if (value.slice(-1) === ',') {
clean = false
} else {
value += token[1]
}
} else {
clean = false
}
} else {
value += token[1]
}
}
if (!clean) {
let raw = tokens.reduce((all, i) => all + i[1], '')
node.raws[prop] = { raw, value }
}
node[prop] = value
}
rule(tokens) {
tokens.pop()
let node = new Rule()
this.init(node, tokens[0][2])
node.raws.between = this.spacesAndCommentsFromEnd(tokens)
this.raw(node, 'selector', tokens)
this.current = node
}
spacesAndCommentsFromEnd(tokens) {
let lastTokenType
let spaces = ''
while (tokens.length) {
lastTokenType = tokens[tokens.length - 1][0]
if (lastTokenType !== 'space' && lastTokenType !== 'comment') break
spaces = tokens.pop()[1] + spaces
}
return spaces
}
// Errors
spacesAndCommentsFromStart(tokens) {
let next
let spaces = ''
while (tokens.length) {
next = tokens[0][0]
if (next !== 'space' && next !== 'comment') break
spaces += tokens.shift()[1]
}
return spaces
}
spacesFromEnd(tokens) {
let lastTokenType
let spaces = ''
while (tokens.length) {
lastTokenType = tokens[tokens.length - 1][0]
if (lastTokenType !== 'space') break
spaces = tokens.pop()[1] + spaces
}
return spaces
}
stringFrom(tokens, from) {
let result = ''
for (let i = from; i < tokens.length; i++) {
result += tokens[i][1]
}
tokens.splice(from, tokens.length - from)
return result
}
unclosedBlock() {
let pos = this.current.source.start
throw this.input.error('Unclosed block', pos.line, pos.column)
}
unclosedBracket(bracket) {
throw this.input.error(
'Unclosed bracket',
{ offset: bracket[2] },
{ offset: bracket[2] + 1 }
)
}
unexpectedClose(token) {
throw this.input.error(
'Unexpected }',
{ offset: token[2] },
{ offset: token[2] + 1 }
)
}
unknownWord(tokens) {
throw this.input.error(
'Unknown word',
{ offset: tokens[0][2] },
{ offset: tokens[0][2] + tokens[0][1].length }
)
}
unnamedAtrule(node, token) {
throw this.input.error(
'At-rule without name',
{ offset: token[2] },
{ offset: token[2] + token[1].length }
)
}
}
module.exports = Parser
/***/ }),
/***/ 4529:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
"use strict";
let AtRule = __webpack_require__(1326)
let Comment = __webpack_require__(6589)
let Container = __webpack_require__(683)
let CssSyntaxError = __webpack_require__(356)
let Declaration = __webpack_require__(1516)
let Document = __webpack_require__(271)
let fromJSON = __webpack_require__(8940)
let Input = __webpack_require__(5380)
let LazyResult = __webpack_require__(448)
let list = __webpack_require__(7374)
let Node = __webpack_require__(7490)
let parse = __webpack_require__(4295)
let Processor = __webpack_require__(9656)
let Result = __webpack_require__(9055)
let Root = __webpack_require__(9434)
let Rule = __webpack_require__(4092)
let stringify = __webpack_require__(633)
let Warning = __webpack_require__(5776)
function postcss(...plugins) {
if (plugins.length === 1 && Array.isArray(plugins[0])) {
plugins = plugins[0]
}
return new Processor(plugins)
}
postcss.plugin = function plugin(name, initializer) {
let warningPrinted = false
function creator(...args) {
// eslint-disable-next-line no-console
if (console && console.warn && !warningPrinted) {
warningPrinted = true
// eslint-disable-next-line no-console
console.warn(
name +
': postcss.plugin was deprecated. Migration guide:\n' +
'https://evilmartians.com/chronicles/postcss-8-plugin-migration'
)
if (process.env.LANG && process.env.LANG.startsWith('cn')) {
/* c8 ignore next 7 */
// eslint-disable-next-line no-console
console.warn(
name +
': 里面 postcss.plugin 被弃用. 迁移指南:\n' +
'https://www.w3ctech.com/topic/2226'
)
}
}
let transformer = initializer(...args)
transformer.postcssPlugin = name
transformer.postcssVersion = new Processor().version
return transformer
}
let cache
Object.defineProperty(creator, 'postcss', {
get() {
if (!cache) cache = creator()
return cache
}
})
creator.process = function (css, processOpts, pluginOpts) {
return postcss([creator(pluginOpts)]).process(css, processOpts)
}
return creator
}
postcss.stringify = stringify
postcss.parse = parse
postcss.fromJSON = fromJSON
postcss.list = list
postcss.comment = defaults => new Comment(defaults)
postcss.atRule = defaults => new AtRule(defaults)
postcss.decl = defaults => new Declaration(defaults)
postcss.rule = defaults => new Rule(defaults)
postcss.root = defaults => new Root(defaults)
postcss.document = defaults => new Document(defaults)
postcss.CssSyntaxError = CssSyntaxError
postcss.Declaration = Declaration
postcss.Container = Container
postcss.Processor = Processor
postcss.Document = Document
postcss.Comment = Comment
postcss.Warning = Warning
postcss.AtRule = AtRule
postcss.Result = Result
postcss.Input = Input
postcss.Rule = Rule
postcss.Root = Root
postcss.Node = Node
LazyResult.registerPostcss(postcss)
module.exports = postcss
postcss.default = postcss
/***/ }),
/***/ 5696:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
"use strict";
let { existsSync, readFileSync } = __webpack_require__(9977)
let { dirname, join } = __webpack_require__(197)
let { SourceMapConsumer, SourceMapGenerator } = __webpack_require__(1866)
function fromBase64(str) {
if (Buffer) {
return Buffer.from(str, 'base64').toString()
} else {
/* c8 ignore next 2 */
return window.atob(str)
}
}
class PreviousMap {
constructor(css, opts) {
if (opts.map === false) return
this.loadAnnotation(css)
this.inline = this.startWith(this.annotation, 'data:')
let prev = opts.map ? opts.map.prev : undefined
let text = this.loadMap(opts.from, prev)
if (!this.mapFile && opts.from) {
this.mapFile = opts.from
}
if (this.mapFile) this.root = dirname(this.mapFile)
if (text) this.text = text
}
consumer() {
if (!this.consumerCache) {
this.consumerCache = new SourceMapConsumer(this.text)
}
return this.consumerCache
}
decodeInline(text) {
let baseCharsetUri = /^data:application\/json;charset=utf-?8;base64,/
let baseUri = /^data:application\/json;base64,/
let charsetUri = /^data:application\/json;charset=utf-?8,/
let uri = /^data:application\/json,/
let uriMatch = text.match(charsetUri) || text.match(uri)
if (uriMatch) {
return decodeURIComponent(text.substr(uriMatch[0].length))
}
let baseUriMatch = text.match(baseCharsetUri) || text.match(baseUri)
if (baseUriMatch) {
return fromBase64(text.substr(baseUriMatch[0].length))
}
let encoding = text.match(/data:application\/json;([^,]+),/)[1]
throw new Error('Unsupported source map encoding ' + encoding)
}
getAnnotationURL(sourceMapString) {
return sourceMapString.replace(/^\/\*\s*# sourceMappingURL=/, '').trim()
}
isMap(map) {
if (typeof map !== 'object') return false
return (
typeof map.mappings === 'string' ||
typeof map._mappings === 'string' ||
Array.isArray(map.sections)
)
}
loadAnnotation(css) {
let comments = css.match(/\/\*\s*# sourceMappingURL=/g)
if (!comments) return
// sourceMappingURLs from comments, strings, etc.
let start = css.lastIndexOf(comments.pop())
let end = css.indexOf('*/', start)
if (start > -1 && end > -1) {
// Locate the last sourceMappingURL to avoid pickin
this.annotation = this.getAnnotationURL(css.substring(start, end))
}
}
loadFile(path) {
this.root = dirname(path)
if (existsSync(path)) {
this.mapFile = path
return readFileSync(path, 'utf-8').toString().trim()
}
}
loadMap(file, prev) {
if (prev === false) return false
if (prev) {
if (typeof prev === 'string') {
return prev
} else if (typeof prev === 'function') {
let prevPath = prev(file)
if (prevPath) {
let map = this.loadFile(prevPath)
if (!map) {
throw new Error(
'Unable to load previous source map: ' + prevPath.toString()
)
}
return map
}
} else if (prev instanceof SourceMapConsumer) {
return SourceMapGenerator.fromSourceMap(prev).toString()
} else if (prev instanceof SourceMapGenerator) {
return prev.toString()
} else if (this.isMap(prev)) {
return JSON.stringify(prev)
} else {
throw new Error(
'Unsupported previous source map format: ' + prev.toString()
)
}
} else if (this.inline) {
return this.decodeInline(this.annotation)
} else if (this.annotation) {
let map = this.annotation
if (file) map = join(dirname(file), map)
return this.loadFile(map)
}
}
startWith(string, start) {
if (!string) return false
return string.substr(0, start.length) === start
}
withContent() {
return !!(
this.consumer().sourcesContent &&
this.consumer().sourcesContent.length > 0
)
}
}
module.exports = PreviousMap
PreviousMap.default = PreviousMap
/***/ }),
/***/ 9656:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
"use strict";
let Document = __webpack_require__(271)
let LazyResult = __webpack_require__(448)
let NoWorkResult = __webpack_require__(7661)
let Root = __webpack_require__(9434)
class Processor {
constructor(plugins = []) {
this.version = '8.4.47'
this.plugins = this.normalize(plugins)
}
normalize(plugins) {
let normalized = []
for (let i of plugins) {
if (i.postcss === true) {
i = i()
} else if (i.postcss) {
i = i.postcss
}
if (typeof i === 'object' && Array.isArray(i.plugins)) {
normalized = normalized.concat(i.plugins)
} else if (typeof i === 'object' && i.postcssPlugin) {
normalized.push(i)
} else if (typeof i === 'function') {
normalized.push(i)
} else if (typeof i === 'object' && (i.parse || i.stringify)) {
if (false) {}
} else {
throw new Error(i + ' is not a PostCSS plugin')
}
}
return normalized
}
process(css, opts = {}) {
if (
!this.plugins.length &&
!opts.parser &&
!opts.stringifier &&
!opts.syntax
) {
return new NoWorkResult(this, css, opts)
} else {
return new LazyResult(this, css, opts)
}
}
use(plugin) {
this.plugins = this.plugins.concat(this.normalize([plugin]))
return this
}
}
module.exports = Processor
Processor.default = Processor
Root.registerProcessor(Processor)
Document.registerProcessor(Processor)
/***/ }),
/***/ 9055:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
"use strict";
let Warning = __webpack_require__(5776)
class Result {
constructor(processor, root, opts) {
this.processor = processor
this.messages = []
this.root = root
this.opts = opts
this.css = undefined
this.map = undefined
}
toString() {
return this.css
}
warn(text, opts = {}) {
if (!opts.plugin) {
if (this.lastPlugin && this.lastPlugin.postcssPlugin) {
opts.plugin = this.lastPlugin.postcssPlugin
}
}
let warning = new Warning(text, opts)
this.messages.push(warning)
return warning
}
warnings() {
return this.messages.filter(i => i.type === 'warning')
}
get content() {
return this.css
}
}
module.exports = Result
Result.default = Result
/***/ }),
/***/ 9434:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
"use strict";
let Container = __webpack_require__(683)
let LazyResult, Processor
class Root extends Container {
constructor(defaults) {
super(defaults)
this.type = 'root'
if (!this.nodes) this.nodes = []
}
normalize(child, sample, type) {
let nodes = super.normalize(child)
if (sample) {
if (type === 'prepend') {
if (this.nodes.length > 1) {
sample.raws.before = this.nodes[1].raws.before
} else {
delete sample.raws.before
}
} else if (this.first !== sample) {
for (let node of nodes) {
node.raws.before = sample.raws.before
}
}
}
return nodes
}
removeChild(child, ignore) {
let index = this.index(child)
if (!ignore && index === 0 && this.nodes.length > 1) {
this.nodes[1].raws.before = this.nodes[index].raws.before
}
return super.removeChild(child)
}
toResult(opts = {}) {
let lazy = new LazyResult(new Processor(), this, opts)
return lazy.stringify()
}
}
Root.registerLazyResult = dependant => {
LazyResult = dependant
}
Root.registerProcessor = dependant => {
Processor = dependant
}
module.exports = Root
Root.default = Root
Container.registerRoot(Root)
/***/ }),
/***/ 4092:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
"use strict";
let Container = __webpack_require__(683)
let list = __webpack_require__(7374)
class Rule extends Container {
constructor(defaults) {
super(defaults)
this.type = 'rule'
if (!this.nodes) this.nodes = []
}
get selectors() {
return list.comma(this.selector)
}
set selectors(values) {
let match = this.selector ? this.selector.match(/,\s*/) : null
let sep = match ? match[0] : ',' + this.raw('between', 'beforeOpen')
this.selector = values.join(sep)
}
}
module.exports = Rule
Rule.default = Rule
Container.registerRule(Rule)
/***/ }),
/***/ 346:
/***/ ((module) => {
"use strict";
const DEFAULT_RAW = {
after: '\n',
beforeClose: '\n',
beforeComment: '\n',
beforeDecl: '\n',
beforeOpen: ' ',
beforeRule: '\n',
colon: ': ',
commentLeft: ' ',
commentRight: ' ',
emptyBody: '',
indent: ' ',
semicolon: false
}
function capitalize(str) {
return str[0].toUpperCase() + str.slice(1)
}
class Stringifier {
constructor(builder) {
this.builder = builder
}
atrule(node, semicolon) {
let name = '@' + node.name
let params = node.params ? this.rawValue(node, 'params') : ''
if (typeof node.raws.afterName !== 'undefined') {
name += node.raws.afterName
} else if (params) {
name += ' '
}
if (node.nodes) {
this.block(node, name + params)
} else {
let end = (node.raws.between || '') + (semicolon ? ';' : '')
this.builder(name + params + end, node)
}
}
beforeAfter(node, detect) {
let value
if (node.type === 'decl') {
value = this.raw(node, null, 'beforeDecl')
} else if (node.type === 'comment') {
value = this.raw(node, null, 'beforeComment')
} else if (detect === 'before') {
value = this.raw(node, null, 'beforeRule')
} else {
value = this.raw(node, null, 'beforeClose')
}
let buf = node.parent
let depth = 0
while (buf && buf.type !== 'root') {
depth += 1
buf = buf.parent
}
if (value.includes('\n')) {
let indent = this.raw(node, null, 'indent')
if (indent.length) {
for (let step = 0; step < depth; step++) value += indent
}
}
return value
}
block(node, start) {
let between = this.raw(node, 'between', 'beforeOpen')
this.builder(start + between + '{', node, 'start')
let after
if (node.nodes && node.nodes.length) {
this.body(node)
after = this.raw(node, 'after')
} else {
after = this.raw(node, 'after', 'emptyBody')
}
if (after) this.builder(after)
this.builder('}', node, 'end')
}
body(node) {
let last = node.nodes.length - 1
while (last > 0) {
if (node.nodes[last].type !== 'comment') break
last -= 1
}
let semicolon = this.raw(node, 'semicolon')
for (let i = 0; i < node.nodes.length; i++) {
let child = node.nodes[i]
let before = this.raw(child, 'before')
if (before) this.builder(before)
this.stringify(child, last !== i || semicolon)
}
}
comment(node) {
let left = this.raw(node, 'left', 'commentLeft')
let right = this.raw(node, 'right', 'commentRight')
this.builder('/*' + left + node.text + right + '*/', node)
}
decl(node, semicolon) {
let between = this.raw(node, 'between', 'colon')
let string = node.prop + between + this.rawValue(node, 'value')
if (node.important) {
string += node.raws.important || ' !important'
}
if (semicolon) string += ';'
this.builder(string, node)
}
document(node) {
this.body(node)
}
raw(node, own, detect) {
let value
if (!detect) detect = own
// Already had
if (own) {
value = node.raws[own]
if (typeof value !== 'undefined') return value
}
let parent = node.parent
if (detect === 'before') {
// Hack for first rule in CSS
if (!parent || (parent.type === 'root' && parent.first === node)) {
return ''
}
// `root` nodes in `document` should use only their own raws
if (parent && parent.type === 'document') {
return ''
}
}
// Floating child without parent
if (!parent) return DEFAULT_RAW[detect]
// Detect style by other nodes
let root = node.root()
if (!root.rawCache) root.rawCache = {}
if (typeof root.rawCache[detect] !== 'undefined') {
return root.rawCache[detect]
}
if (detect === 'before' || detect === 'after') {
return this.beforeAfter(node, detect)
} else {
let method = 'raw' + capitalize(detect)
if (this[method]) {
value = this[method](root, node)
} else {
root.walk(i => {
value = i.raws[own]
if (typeof value !== 'undefined') return false
})
}
}
if (typeof value === 'undefined') value = DEFAULT_RAW[detect]
root.rawCache[detect] = value
return value
}
rawBeforeClose(root) {
let value
root.walk(i => {
if (i.nodes && i.nodes.length > 0) {
if (typeof i.raws.after !== 'undefined') {
value = i.raws.after
if (value.includes('\n')) {
value = value.replace(/[^\n]+$/, '')
}
return false
}
}
})
if (value) value = value.replace(/\S/g, '')
return value
}
rawBeforeComment(root, node) {
let value
root.walkComments(i => {
if (typeof i.raws.before !== 'undefined') {
value = i.raws.before
if (value.includes('\n')) {
value = value.replace(/[^\n]+$/, '')
}
return false
}
})
if (typeof value === 'undefined') {
value = this.raw(node, null, 'beforeDecl')
} else if (value) {
value = value.replace(/\S/g, '')
}
return value
}
rawBeforeDecl(root, node) {
let value
root.walkDecls(i => {
if (typeof i.raws.before !== 'undefined') {
value = i.raws.before
if (value.includes('\n')) {
value = value.replace(/[^\n]+$/, '')
}
return false
}
})
if (typeof value === 'undefined') {
value = this.raw(node, null, 'beforeRule')
} else if (value) {
value = value.replace(/\S/g, '')
}
return value
}
rawBeforeOpen(root) {
let value
root.walk(i => {
if (i.type !== 'decl') {
value = i.raws.between
if (typeof value !== 'undefined') return false
}
})
return value
}
rawBeforeRule(root) {
let value
root.walk(i => {
if (i.nodes && (i.parent !== root || root.first !== i)) {
if (typeof i.raws.before !== 'undefined') {
value = i.raws.before
if (value.includes('\n')) {
value = value.replace(/[^\n]+$/, '')
}
return false
}
}
})
if (value) value = value.replace(/\S/g, '')
return value
}
rawColon(root) {
let value
root.walkDecls(i => {
if (typeof i.raws.between !== 'undefined') {
value = i.raws.between.replace(/[^\s:]/g, '')
return false
}
})
return value
}
rawEmptyBody(root) {
let value
root.walk(i => {
if (i.nodes && i.nodes.length === 0) {
value = i.raws.after
if (typeof value !== 'undefined') return false
}
})
return value
}
rawIndent(root) {
if (root.raws.indent) return root.raws.indent
let value
root.walk(i => {
let p = i.parent
if (p && p !== root && p.parent && p.parent === root) {
if (typeof i.raws.before !== 'undefined') {
let parts = i.raws.before.split('\n')
value = parts[parts.length - 1]
value = value.replace(/\S/g, '')
return false
}
}
})
return value
}
rawSemicolon(root) {
let value
root.walk(i => {
if (i.nodes && i.nodes.length && i.last.type === 'decl') {
value = i.raws.semicolon
if (typeof value !== 'undefined') return false
}
})
return value
}
rawValue(node, prop) {
let value = node[prop]
let raw = node.raws[prop]
if (raw && raw.value === value) {
return raw.raw
}
return value
}
root(node) {
this.body(node)
if (node.raws.after) this.builder(node.raws.after)
}
rule(node) {
this.block(node, this.rawValue(node, 'selector'))
if (node.raws.ownSemicolon) {
this.builder(node.raws.ownSemicolon, node, 'end')
}
}
stringify(node, semicolon) {
/* c8 ignore start */
if (!this[node.type]) {
throw new Error(
'Unknown AST node type ' +
node.type +
'. ' +
'Maybe you need to change PostCSS stringifier.'
)
}
/* c8 ignore stop */
this[node.type](node, semicolon)
}
}
module.exports = Stringifier
Stringifier.default = Stringifier
/***/ }),
/***/ 633:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
"use strict";
let Stringifier = __webpack_require__(346)
function stringify(node, builder) {
let str = new Stringifier(builder)
str.stringify(node)
}
module.exports = stringify
stringify.default = stringify
/***/ }),
/***/ 1381:
/***/ ((module) => {
"use strict";
module.exports.isClean = Symbol('isClean')
module.exports.my = Symbol('my')
/***/ }),
/***/ 2327:
/***/ ((module) => {
"use strict";
const SINGLE_QUOTE = "'".charCodeAt(0)
const DOUBLE_QUOTE = '"'.charCodeAt(0)
const BACKSLASH = '\\'.charCodeAt(0)
const SLASH = '/'.charCodeAt(0)
const NEWLINE = '\n'.charCodeAt(0)
const SPACE = ' '.charCodeAt(0)
const FEED = '\f'.charCodeAt(0)
const TAB = '\t'.charCodeAt(0)
const CR = '\r'.charCodeAt(0)
const OPEN_SQUARE = '['.charCodeAt(0)
const CLOSE_SQUARE = ']'.charCodeAt(0)
const OPEN_PARENTHESES = '('.charCodeAt(0)
const CLOSE_PARENTHESES = ')'.charCodeAt(0)
const OPEN_CURLY = '{'.charCodeAt(0)
const CLOSE_CURLY = '}'.charCodeAt(0)
const SEMICOLON = ';'.charCodeAt(0)
const ASTERISK = '*'.charCodeAt(0)
const COLON = ':'.charCodeAt(0)
const AT = '@'.charCodeAt(0)
const RE_AT_END = /[\t\n\f\r "#'()/;[\\\]{}]/g
const RE_WORD_END = /[\t\n\f\r !"#'():;@[\\\]{}]|\/(?=\*)/g
const RE_BAD_BRACKET = /.[\r\n"'(/\\]/
const RE_HEX_ESCAPE = /[\da-f]/i
module.exports = function tokenizer(input, options = {}) {
let css = input.css.valueOf()
let ignore = options.ignoreErrors
let code, content, escape, next, quote
let currentToken, escaped, escapePos, n, prev
let length = css.length
let pos = 0
let buffer = []
let returned = []
function position() {
return pos
}
function unclosed(what) {
throw input.error('Unclosed ' + what, pos)
}
function endOfFile() {
return returned.length === 0 && pos >= length
}
function nextToken(opts) {
if (returned.length) return returned.pop()
if (pos >= length) return
let ignoreUnclosed = opts ? opts.ignoreUnclosed : false
code = css.charCodeAt(pos)
switch (code) {
case NEWLINE:
case SPACE:
case TAB:
case CR:
case FEED: {
next = pos
do {
next += 1
code = css.charCodeAt(next)
} while (
code === SPACE ||
code === NEWLINE ||
code === TAB ||
code === CR ||
code === FEED
)
currentToken = ['space', css.slice(pos, next)]
pos = next - 1
break
}
case OPEN_SQUARE:
case CLOSE_SQUARE:
case OPEN_CURLY:
case CLOSE_CURLY:
case COLON:
case SEMICOLON:
case CLOSE_PARENTHESES: {
let controlChar = String.fromCharCode(code)
currentToken = [controlChar, controlChar, pos]
break
}
case OPEN_PARENTHESES: {
prev = buffer.length ? buffer.pop()[1] : ''
n = css.charCodeAt(pos + 1)
if (
prev === 'url' &&
n !== SINGLE_QUOTE &&
n !== DOUBLE_QUOTE &&
n !== SPACE &&
n !== NEWLINE &&
n !== TAB &&
n !== FEED &&
n !== CR
) {
next = pos
do {
escaped = false
next = css.indexOf(')', next + 1)
if (next === -1) {
if (ignore || ignoreUnclosed) {
next = pos
break
} else {
unclosed('bracket')
}
}
escapePos = next
while (css.charCodeAt(escapePos - 1) === BACKSLASH) {
escapePos -= 1
escaped = !escaped
}
} while (escaped)
currentToken = ['brackets', css.slice(pos, next + 1), pos, next]
pos = next
} else {
next = css.indexOf(')', pos + 1)
content = css.slice(pos, next + 1)
if (next === -1 || RE_BAD_BRACKET.test(content)) {
currentToken = ['(', '(', pos]
} else {
currentToken = ['brackets', content, pos, next]
pos = next
}
}
break
}
case SINGLE_QUOTE:
case DOUBLE_QUOTE: {
quote = code === SINGLE_QUOTE ? "'" : '"'
next = pos
do {
escaped = false
next = css.indexOf(quote, next + 1)
if (next === -1) {
if (ignore || ignoreUnclosed) {
next = pos + 1
break
} else {
unclosed('string')
}
}
escapePos = next
while (css.charCodeAt(escapePos - 1) === BACKSLASH) {
escapePos -= 1
escaped = !escaped
}
} while (escaped)
currentToken = ['string', css.slice(pos, next + 1), pos, next]
pos = next
break
}
case AT: {
RE_AT_END.lastIndex = pos + 1
RE_AT_END.test(css)
if (RE_AT_END.lastIndex === 0) {
next = css.length - 1
} else {
next = RE_AT_END.lastIndex - 2
}
currentToken = ['at-word', css.slice(pos, next + 1), pos, next]
pos = next
break
}
case BACKSLASH: {
next = pos
escape = true
while (css.charCodeAt(next + 1) === BACKSLASH) {
next += 1
escape = !escape
}
code = css.charCodeAt(next + 1)
if (
escape &&
code !== SLASH &&
code !== SPACE &&
code !== NEWLINE &&
code !== TAB &&
code !== CR &&
code !== FEED
) {
next += 1
if (RE_HEX_ESCAPE.test(css.charAt(next))) {
while (RE_HEX_ESCAPE.test(css.charAt(next + 1))) {
next += 1
}
if (css.charCodeAt(next + 1) === SPACE) {
next += 1
}
}
}
currentToken = ['word', css.slice(pos, next + 1), pos, next]
pos = next
break
}
default: {
if (code === SLASH && css.charCodeAt(pos + 1) === ASTERISK) {
next = css.indexOf('*/', pos + 2) + 1
if (next === 0) {
if (ignore || ignoreUnclosed) {
next = css.length
} else {
unclosed('comment')
}
}
currentToken = ['comment', css.slice(pos, next + 1), pos, next]
pos = next
} else {
RE_WORD_END.lastIndex = pos + 1
RE_WORD_END.test(css)
if (RE_WORD_END.lastIndex === 0) {
next = css.length - 1
} else {
next = RE_WORD_END.lastIndex - 2
}
currentToken = ['word', css.slice(pos, next + 1), pos, next]
buffer.push(currentToken)
pos = next
}
break
}
}
pos++
return currentToken
}
function back(token) {
returned.push(token)
}
return {
back,
endOfFile,
nextToken,
position
}
}
/***/ }),
/***/ 3122:
/***/ ((module) => {
"use strict";
/* eslint-disable no-console */
let printed = {}
module.exports = function warnOnce(message) {
if (printed[message]) return
printed[message] = true
if (typeof console !== 'undefined' && console.warn) {
console.warn(message)
}
}
/***/ }),
/***/ 5776:
/***/ ((module) => {
"use strict";
class Warning {
constructor(text, opts = {}) {
this.type = 'warning'
this.text = text
if (opts.node && opts.node.source) {
let range = opts.node.rangeBy(opts)
this.line = range.start.line
this.column = range.start.column
this.endLine = range.end.line
this.endColumn = range.end.column
}
for (let opt in opts) this[opt] = opts[opt]
}
toString() {
if (this.node) {
return this.node.error(this.text, {
index: this.index,
plugin: this.plugin,
word: this.word
}).message
}
if (this.plugin) {
return this.plugin + ': ' + this.text
}
return this.text
}
}
module.exports = Warning
Warning.default = Warning
/***/ }),
/***/ 628:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
"use strict";
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var ReactPropTypesSecret = __webpack_require__(4067);
function emptyFunction() {}
function emptyFunctionWithReset() {}
emptyFunctionWithReset.resetWarningCache = emptyFunction;
module.exports = function() {
function shim(props, propName, componentName, location, propFullName, secret) {
if (secret === ReactPropTypesSecret) {
// It is still safe when called from React.
return;
}
var err = new Error(
'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
'Use PropTypes.checkPropTypes() to call them. ' +
'Read more at http://fb.me/use-check-prop-types'
);
err.name = 'Invariant Violation';
throw err;
};
shim.isRequired = shim;
function getShim() {
return shim;
};
// Important!
// Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
var ReactPropTypes = {
array: shim,
bigint: shim,
bool: shim,
func: shim,
number: shim,
object: shim,
string: shim,
symbol: shim,
any: shim,
arrayOf: getShim,
element: shim,
elementType: shim,
instanceOf: getShim,
node: shim,
objectOf: getShim,
oneOf: getShim,
oneOfType: getShim,
shape: getShim,
exact: getShim,
checkPropTypes: emptyFunctionWithReset,
resetWarningCache: emptyFunction
};
ReactPropTypes.PropTypes = ReactPropTypes;
return ReactPropTypes;
};
/***/ }),
/***/ 5826:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
if (false) { var throwOnDirectAccess, ReactIs; } else {
// By explicitly using `prop-types` you are opting into new production behavior.
// http://fb.me/prop-types-in-prod
module.exports = __webpack_require__(628)();
}
/***/ }),
/***/ 4067:
/***/ ((module) => {
"use strict";
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
module.exports = ReactPropTypesSecret;
/***/ }),
/***/ 4462:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
t[p[i]] = s[p[i]];
return t;
};
exports.__esModule = true;
var React = __webpack_require__(1609);
var PropTypes = __webpack_require__(5826);
var autosize = __webpack_require__(4306);
var _getLineHeight = __webpack_require__(461);
var getLineHeight = _getLineHeight;
var RESIZED = "autosize:resized";
/**
* A light replacement for built-in textarea component
* which automaticaly adjusts its height to match the content
*/
var TextareaAutosizeClass = /** @class */ (function (_super) {
__extends(TextareaAutosizeClass, _super);
function TextareaAutosizeClass() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
lineHeight: null
};
_this.textarea = null;
_this.onResize = function (e) {
if (_this.props.onResize) {
_this.props.onResize(e);
}
};
_this.updateLineHeight = function () {
if (_this.textarea) {
_this.setState({
lineHeight: getLineHeight(_this.textarea)
});
}
};
_this.onChange = function (e) {
var onChange = _this.props.onChange;
_this.currentValue = e.currentTarget.value;
onChange && onChange(e);
};
return _this;
}
TextareaAutosizeClass.prototype.componentDidMount = function () {
var _this = this;
var _a = this.props, maxRows = _a.maxRows, async = _a.async;
if (typeof maxRows === "number") {
this.updateLineHeight();
}
if (typeof maxRows === "number" || async) {
/*
the defer is needed to:
- force "autosize" to activate the scrollbar when this.props.maxRows is passed
- support StyledComponents (see #71)
*/
setTimeout(function () { return _this.textarea && autosize(_this.textarea); });
}
else {
this.textarea && autosize(this.textarea);
}
if (this.textarea) {
this.textarea.addEventListener(RESIZED, this.onResize);
}
};
TextareaAutosizeClass.prototype.componentWillUnmount = function () {
if (this.textarea) {
this.textarea.removeEventListener(RESIZED, this.onResize);
autosize.destroy(this.textarea);
}
};
TextareaAutosizeClass.prototype.render = function () {
var _this = this;
var _a = this, _b = _a.props, onResize = _b.onResize, maxRows = _b.maxRows, onChange = _b.onChange, style = _b.style, innerRef = _b.innerRef, children = _b.children, props = __rest(_b, ["onResize", "maxRows", "onChange", "style", "innerRef", "children"]), lineHeight = _a.state.lineHeight;
var maxHeight = maxRows && lineHeight ? lineHeight * maxRows : null;
return (React.createElement("textarea", __assign({}, props, { onChange: this.onChange, style: maxHeight ? __assign({}, style, { maxHeight: maxHeight }) : style, ref: function (element) {
_this.textarea = element;
if (typeof _this.props.innerRef === 'function') {
_this.props.innerRef(element);
}
else if (_this.props.innerRef) {
_this.props.innerRef.current = element;
}
} }), children));
};
TextareaAutosizeClass.prototype.componentDidUpdate = function () {
this.textarea && autosize.update(this.textarea);
};
TextareaAutosizeClass.defaultProps = {
rows: 1,
async: false
};
TextareaAutosizeClass.propTypes = {
rows: PropTypes.number,
maxRows: PropTypes.number,
onResize: PropTypes.func,
innerRef: PropTypes.any,
async: PropTypes.bool
};
return TextareaAutosizeClass;
}(React.Component));
exports.TextareaAutosize = React.forwardRef(function (props, ref) {
return React.createElement(TextareaAutosizeClass, __assign({}, props, { innerRef: ref }));
});
/***/ }),
/***/ 4132:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
"use strict";
var __webpack_unused_export__;
__webpack_unused_export__ = true;
var TextareaAutosize_1 = __webpack_require__(4462);
exports.A = TextareaAutosize_1.TextareaAutosize;
/***/ }),
/***/ 9681:
/***/ ((module) => {
var characterMap = {
"À": "A",
"Á": "A",
"Â": "A",
"Ã": "A",
"Ä": "A",
"Å": "A",
"Ấ": "A",
"Ắ": "A",
"Ẳ": "A",
"Ẵ": "A",
"Ặ": "A",
"Æ": "AE",
"Ầ": "A",
"Ằ": "A",
"Ȃ": "A",
"Ả": "A",
"Ạ": "A",
"Ẩ": "A",
"Ẫ": "A",
"Ậ": "A",
"Ç": "C",
"Ḉ": "C",
"È": "E",
"É": "E",
"Ê": "E",
"Ë": "E",
"Ế": "E",
"Ḗ": "E",
"Ề": "E",
"Ḕ": "E",
"Ḝ": "E",
"Ȇ": "E",
"Ẻ": "E",
"Ẽ": "E",
"Ẹ": "E",
"Ể": "E",
"Ễ": "E",
"Ệ": "E",
"Ì": "I",
"Í": "I",
"Î": "I",
"Ï": "I",
"Ḯ": "I",
"Ȋ": "I",
"Ỉ": "I",
"Ị": "I",
"Ð": "D",
"Ñ": "N",
"Ò": "O",
"Ó": "O",
"Ô": "O",
"Õ": "O",
"Ö": "O",
"Ø": "O",
"Ố": "O",
"Ṍ": "O",
"Ṓ": "O",
"Ȏ": "O",
"Ỏ": "O",
"Ọ": "O",
"Ổ": "O",
"Ỗ": "O",
"Ộ": "O",
"Ờ": "O",
"Ở": "O",
"Ỡ": "O",
"Ớ": "O",
"Ợ": "O",
"Ù": "U",
"Ú": "U",
"Û": "U",
"Ü": "U",
"Ủ": "U",
"Ụ": "U",
"Ử": "U",
"Ữ": "U",
"Ự": "U",
"Ý": "Y",
"à": "a",
"á": "a",
"â": "a",
"ã": "a",
"ä": "a",
"å": "a",
"ấ": "a",
"ắ": "a",
"ẳ": "a",
"ẵ": "a",
"ặ": "a",
"æ": "ae",
"ầ": "a",
"ằ": "a",
"ȃ": "a",
"ả": "a",
"ạ": "a",
"ẩ": "a",
"ẫ": "a",
"ậ": "a",
"ç": "c",
"ḉ": "c",
"è": "e",
"é": "e",
"ê": "e",
"ë": "e",
"ế": "e",
"ḗ": "e",
"ề": "e",
"ḕ": "e",
"ḝ": "e",
"ȇ": "e",
"ẻ": "e",
"ẽ": "e",
"ẹ": "e",
"ể": "e",
"ễ": "e",
"ệ": "e",
"ì": "i",
"í": "i",
"î": "i",
"ï": "i",
"ḯ": "i",
"ȋ": "i",
"ỉ": "i",
"ị": "i",
"ð": "d",
"ñ": "n",
"ò": "o",
"ó": "o",
"ô": "o",
"õ": "o",
"ö": "o",
"ø": "o",
"ố": "o",
"ṍ": "o",
"ṓ": "o",
"ȏ": "o",
"ỏ": "o",
"ọ": "o",
"ổ": "o",
"ỗ": "o",
"ộ": "o",
"ờ": "o",
"ở": "o",
"ỡ": "o",
"ớ": "o",
"ợ": "o",
"ù": "u",
"ú": "u",
"û": "u",
"ü": "u",
"ủ": "u",
"ụ": "u",
"ử": "u",
"ữ": "u",
"ự": "u",
"ý": "y",
"ÿ": "y",
"Ā": "A",
"ā": "a",
"Ă": "A",
"ă": "a",
"Ą": "A",
"ą": "a",
"Ć": "C",
"ć": "c",
"Ĉ": "C",
"ĉ": "c",
"Ċ": "C",
"ċ": "c",
"Č": "C",
"č": "c",
"C̆": "C",
"c̆": "c",
"Ď": "D",
"ď": "d",
"Đ": "D",
"đ": "d",
"Ē": "E",
"ē": "e",
"Ĕ": "E",
"ĕ": "e",
"Ė": "E",
"ė": "e",
"Ę": "E",
"ę": "e",
"Ě": "E",
"ě": "e",
"Ĝ": "G",
"Ǵ": "G",
"ĝ": "g",
"ǵ": "g",
"Ğ": "G",
"ğ": "g",
"Ġ": "G",
"ġ": "g",
"Ģ": "G",
"ģ": "g",
"Ĥ": "H",
"ĥ": "h",
"Ħ": "H",
"ħ": "h",
"Ḫ": "H",
"ḫ": "h",
"Ĩ": "I",
"ĩ": "i",
"Ī": "I",
"ī": "i",
"Ĭ": "I",
"ĭ": "i",
"Į": "I",
"į": "i",
"İ": "I",
"ı": "i",
"IJ": "IJ",
"ij": "ij",
"Ĵ": "J",
"ĵ": "j",
"Ķ": "K",
"ķ": "k",
"Ḱ": "K",
"ḱ": "k",
"K̆": "K",
"k̆": "k",
"Ĺ": "L",
"ĺ": "l",
"Ļ": "L",
"ļ": "l",
"Ľ": "L",
"ľ": "l",
"Ŀ": "L",
"ŀ": "l",
"Ł": "l",
"ł": "l",
"Ḿ": "M",
"ḿ": "m",
"M̆": "M",
"m̆": "m",
"Ń": "N",
"ń": "n",
"Ņ": "N",
"ņ": "n",
"Ň": "N",
"ň": "n",
"ʼn": "n",
"N̆": "N",
"n̆": "n",
"Ō": "O",
"ō": "o",
"Ŏ": "O",
"ŏ": "o",
"Ő": "O",
"ő": "o",
"Œ": "OE",
"œ": "oe",
"P̆": "P",
"p̆": "p",
"Ŕ": "R",
"ŕ": "r",
"Ŗ": "R",
"ŗ": "r",
"Ř": "R",
"ř": "r",
"R̆": "R",
"r̆": "r",
"Ȓ": "R",
"ȓ": "r",
"Ś": "S",
"ś": "s",
"Ŝ": "S",
"ŝ": "s",
"Ş": "S",
"Ș": "S",
"ș": "s",
"ş": "s",
"Š": "S",
"š": "s",
"Ţ": "T",
"ţ": "t",
"ț": "t",
"Ț": "T",
"Ť": "T",
"ť": "t",
"Ŧ": "T",
"ŧ": "t",
"T̆": "T",
"t̆": "t",
"Ũ": "U",
"ũ": "u",
"Ū": "U",
"ū": "u",
"Ŭ": "U",
"ŭ": "u",
"Ů": "U",
"ů": "u",
"Ű": "U",
"ű": "u",
"Ų": "U",
"ų": "u",
"Ȗ": "U",
"ȗ": "u",
"V̆": "V",
"v̆": "v",
"Ŵ": "W",
"ŵ": "w",
"Ẃ": "W",
"ẃ": "w",
"X̆": "X",
"x̆": "x",
"Ŷ": "Y",
"ŷ": "y",
"Ÿ": "Y",
"Y̆": "Y",
"y̆": "y",
"Ź": "Z",
"ź": "z",
"Ż": "Z",
"ż": "z",
"Ž": "Z",
"ž": "z",
"ſ": "s",
"ƒ": "f",
"Ơ": "O",
"ơ": "o",
"Ư": "U",
"ư": "u",
"Ǎ": "A",
"ǎ": "a",
"Ǐ": "I",
"ǐ": "i",
"Ǒ": "O",
"ǒ": "o",
"Ǔ": "U",
"ǔ": "u",
"Ǖ": "U",
"ǖ": "u",
"Ǘ": "U",
"ǘ": "u",
"Ǚ": "U",
"ǚ": "u",
"Ǜ": "U",
"ǜ": "u",
"Ứ": "U",
"ứ": "u",
"Ṹ": "U",
"ṹ": "u",
"Ǻ": "A",
"ǻ": "a",
"Ǽ": "AE",
"ǽ": "ae",
"Ǿ": "O",
"ǿ": "o",
"Þ": "TH",
"þ": "th",
"Ṕ": "P",
"ṕ": "p",
"Ṥ": "S",
"ṥ": "s",
"X́": "X",
"x́": "x",
"Ѓ": "Г",
"ѓ": "г",
"Ќ": "К",
"ќ": "к",
"A̋": "A",
"a̋": "a",
"E̋": "E",
"e̋": "e",
"I̋": "I",
"i̋": "i",
"Ǹ": "N",
"ǹ": "n",
"Ồ": "O",
"ồ": "o",
"Ṑ": "O",
"ṑ": "o",
"Ừ": "U",
"ừ": "u",
"Ẁ": "W",
"ẁ": "w",
"Ỳ": "Y",
"ỳ": "y",
"Ȁ": "A",
"ȁ": "a",
"Ȅ": "E",
"ȅ": "e",
"Ȉ": "I",
"ȉ": "i",
"Ȍ": "O",
"ȍ": "o",
"Ȑ": "R",
"ȑ": "r",
"Ȕ": "U",
"ȕ": "u",
"B̌": "B",
"b̌": "b",
"Č̣": "C",
"č̣": "c",
"Ê̌": "E",
"ê̌": "e",
"F̌": "F",
"f̌": "f",
"Ǧ": "G",
"ǧ": "g",
"Ȟ": "H",
"ȟ": "h",
"J̌": "J",
"ǰ": "j",
"Ǩ": "K",
"ǩ": "k",
"M̌": "M",
"m̌": "m",
"P̌": "P",
"p̌": "p",
"Q̌": "Q",
"q̌": "q",
"Ř̩": "R",
"ř̩": "r",
"Ṧ": "S",
"ṧ": "s",
"V̌": "V",
"v̌": "v",
"W̌": "W",
"w̌": "w",
"X̌": "X",
"x̌": "x",
"Y̌": "Y",
"y̌": "y",
"A̧": "A",
"a̧": "a",
"B̧": "B",
"b̧": "b",
"Ḑ": "D",
"ḑ": "d",
"Ȩ": "E",
"ȩ": "e",
"Ɛ̧": "E",
"ɛ̧": "e",
"Ḩ": "H",
"ḩ": "h",
"I̧": "I",
"i̧": "i",
"Ɨ̧": "I",
"ɨ̧": "i",
"M̧": "M",
"m̧": "m",
"O̧": "O",
"o̧": "o",
"Q̧": "Q",
"q̧": "q",
"U̧": "U",
"u̧": "u",
"X̧": "X",
"x̧": "x",
"Z̧": "Z",
"z̧": "z",
"й":"и",
"Й":"И",
"ё":"е",
"Ё":"Е",
};
var chars = Object.keys(characterMap).join('|');
var allAccents = new RegExp(chars, 'g');
var firstAccent = new RegExp(chars, '');
function matcher(match) {
return characterMap[match];
}
var removeAccents = function(string) {
return string.replace(allAccents, matcher);
};
var hasAccents = function(string) {
return !!string.match(firstAccent);
};
module.exports = removeAccents;
module.exports.has = hasAccents;
module.exports.remove = removeAccents;
/***/ }),
/***/ 1609:
/***/ ((module) => {
"use strict";
module.exports = window["React"];
/***/ }),
/***/ 9746:
/***/ (() => {
/* (ignored) */
/***/ }),
/***/ 9977:
/***/ (() => {
/* (ignored) */
/***/ }),
/***/ 197:
/***/ (() => {
/* (ignored) */
/***/ }),
/***/ 1866:
/***/ (() => {
/* (ignored) */
/***/ }),
/***/ 2739:
/***/ (() => {
/* (ignored) */
/***/ }),
/***/ 5042:
/***/ ((module) => {
let urlAlphabet =
'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict'
let customAlphabet = (alphabet, defaultSize = 21) => {
return (size = defaultSize) => {
let id = ''
let i = size
while (i--) {
id += alphabet[(Math.random() * alphabet.length) | 0]
}
return id
}
}
let nanoid = (size = 21) => {
let id = ''
let i = size
while (i--) {
id += urlAlphabet[(Math.random() * 64) | 0]
}
return id
}
module.exports = { nanoid, customAlphabet }
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
/******/ /* webpack/runtime/compat get default export */
/******/ (() => {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = (module) => {
/******/ var getter = module && module.__esModule ?
/******/ () => (module['default']) :
/******/ () => (module);
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ (() => {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = (exports, definition) => {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ })();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be in strict mode.
(() => {
"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
AlignmentControl: () => (/* reexport */ AlignmentControl),
AlignmentToolbar: () => (/* reexport */ AlignmentToolbar),
Autocomplete: () => (/* reexport */ autocomplete),
BlockAlignmentControl: () => (/* reexport */ BlockAlignmentControl),
BlockAlignmentToolbar: () => (/* reexport */ BlockAlignmentToolbar),
BlockBreadcrumb: () => (/* reexport */ block_breadcrumb),
BlockCanvas: () => (/* reexport */ block_canvas),
BlockColorsStyleSelector: () => (/* reexport */ color_style_selector),
BlockContextProvider: () => (/* reexport */ BlockContextProvider),
BlockControls: () => (/* reexport */ block_controls),
BlockEdit: () => (/* reexport */ BlockEdit),
BlockEditorKeyboardShortcuts: () => (/* reexport */ keyboard_shortcuts),
BlockEditorProvider: () => (/* reexport */ provider),
BlockFormatControls: () => (/* reexport */ BlockFormatControls),
BlockIcon: () => (/* reexport */ block_icon),
BlockInspector: () => (/* reexport */ block_inspector),
BlockList: () => (/* reexport */ BlockList),
BlockMover: () => (/* reexport */ block_mover),
BlockNavigationDropdown: () => (/* reexport */ dropdown),
BlockPopover: () => (/* reexport */ block_popover),
BlockPreview: () => (/* reexport */ block_preview),
BlockSelectionClearer: () => (/* reexport */ BlockSelectionClearer),
BlockSettingsMenu: () => (/* reexport */ block_settings_menu),
BlockSettingsMenuControls: () => (/* reexport */ block_settings_menu_controls),
BlockStyles: () => (/* reexport */ block_styles),
BlockTitle: () => (/* reexport */ BlockTitle),
BlockToolbar: () => (/* reexport */ BlockToolbar),
BlockTools: () => (/* reexport */ BlockTools),
BlockVerticalAlignmentControl: () => (/* reexport */ BlockVerticalAlignmentControl),
BlockVerticalAlignmentToolbar: () => (/* reexport */ BlockVerticalAlignmentToolbar),
ButtonBlockAppender: () => (/* reexport */ button_block_appender),
ButtonBlockerAppender: () => (/* reexport */ ButtonBlockerAppender),
ColorPalette: () => (/* reexport */ color_palette),
ColorPaletteControl: () => (/* reexport */ ColorPaletteControl),
ContrastChecker: () => (/* reexport */ contrast_checker),
CopyHandler: () => (/* reexport */ CopyHandler),
DefaultBlockAppender: () => (/* reexport */ DefaultBlockAppender),
FontSizePicker: () => (/* reexport */ font_size_picker),
HeadingLevelDropdown: () => (/* reexport */ HeadingLevelDropdown),
HeightControl: () => (/* reexport */ HeightControl),
InnerBlocks: () => (/* reexport */ inner_blocks),
Inserter: () => (/* reexport */ inserter),
InspectorAdvancedControls: () => (/* reexport */ InspectorAdvancedControls),
InspectorControls: () => (/* reexport */ inspector_controls),
JustifyContentControl: () => (/* reexport */ JustifyContentControl),
JustifyToolbar: () => (/* reexport */ JustifyToolbar),
LineHeightControl: () => (/* reexport */ line_height_control),
MediaPlaceholder: () => (/* reexport */ media_placeholder),
MediaReplaceFlow: () => (/* reexport */ media_replace_flow),
MediaUpload: () => (/* reexport */ media_upload),
MediaUploadCheck: () => (/* reexport */ check),
MultiSelectScrollIntoView: () => (/* reexport */ MultiSelectScrollIntoView),
NavigableToolbar: () => (/* reexport */ NavigableToolbar),
ObserveTyping: () => (/* reexport */ observe_typing),
PanelColorSettings: () => (/* reexport */ panel_color_settings),
PlainText: () => (/* reexport */ plain_text),
RecursionProvider: () => (/* reexport */ RecursionProvider),
RichText: () => (/* reexport */ rich_text),
RichTextShortcut: () => (/* reexport */ RichTextShortcut),
RichTextToolbarButton: () => (/* reexport */ RichTextToolbarButton),
SETTINGS_DEFAULTS: () => (/* reexport */ SETTINGS_DEFAULTS),
SkipToSelectedBlock: () => (/* reexport */ SkipToSelectedBlock),
ToolSelector: () => (/* reexport */ tool_selector),
Typewriter: () => (/* reexport */ typewriter),
URLInput: () => (/* reexport */ url_input),
URLInputButton: () => (/* reexport */ url_input_button),
URLPopover: () => (/* reexport */ url_popover),
Warning: () => (/* reexport */ warning),
WritingFlow: () => (/* reexport */ writing_flow),
__experimentalBlockAlignmentMatrixControl: () => (/* reexport */ block_alignment_matrix_control),
__experimentalBlockFullHeightAligmentControl: () => (/* reexport */ block_full_height_alignment_control),
__experimentalBlockPatternSetup: () => (/* reexport */ block_pattern_setup),
__experimentalBlockPatternsList: () => (/* reexport */ block_patterns_list),
__experimentalBlockVariationPicker: () => (/* reexport */ block_variation_picker),
__experimentalBlockVariationTransforms: () => (/* reexport */ block_variation_transforms),
__experimentalBorderRadiusControl: () => (/* reexport */ BorderRadiusControl),
__experimentalColorGradientControl: () => (/* reexport */ control),
__experimentalColorGradientSettingsDropdown: () => (/* reexport */ ColorGradientSettingsDropdown),
__experimentalDateFormatPicker: () => (/* reexport */ DateFormatPicker),
__experimentalDuotoneControl: () => (/* reexport */ duotone_control),
__experimentalFontAppearanceControl: () => (/* reexport */ FontAppearanceControl),
__experimentalFontFamilyControl: () => (/* reexport */ FontFamilyControl),
__experimentalGetBorderClassesAndStyles: () => (/* reexport */ getBorderClassesAndStyles),
__experimentalGetColorClassesAndStyles: () => (/* reexport */ getColorClassesAndStyles),
__experimentalGetElementClassName: () => (/* reexport */ __experimentalGetElementClassName),
__experimentalGetGapCSSValue: () => (/* reexport */ getGapCSSValue),
__experimentalGetGradientClass: () => (/* reexport */ __experimentalGetGradientClass),
__experimentalGetGradientObjectByGradientValue: () => (/* reexport */ __experimentalGetGradientObjectByGradientValue),
__experimentalGetShadowClassesAndStyles: () => (/* reexport */ getShadowClassesAndStyles),
__experimentalGetSpacingClassesAndStyles: () => (/* reexport */ getSpacingClassesAndStyles),
__experimentalImageEditor: () => (/* reexport */ ImageEditor),
__experimentalImageSizeControl: () => (/* reexport */ ImageSizeControl),
__experimentalImageURLInputUI: () => (/* reexport */ ImageURLInputUI),
__experimentalInspectorPopoverHeader: () => (/* reexport */ InspectorPopoverHeader),
__experimentalLetterSpacingControl: () => (/* reexport */ LetterSpacingControl),
__experimentalLibrary: () => (/* reexport */ library),
__experimentalLinkControl: () => (/* reexport */ link_control),
__experimentalLinkControlSearchInput: () => (/* reexport */ search_input),
__experimentalLinkControlSearchItem: () => (/* reexport */ search_item),
__experimentalLinkControlSearchResults: () => (/* reexport */ LinkControlSearchResults),
__experimentalListView: () => (/* reexport */ components_list_view),
__experimentalPanelColorGradientSettings: () => (/* reexport */ panel_color_gradient_settings),
__experimentalPreviewOptions: () => (/* reexport */ PreviewOptions),
__experimentalPublishDateTimePicker: () => (/* reexport */ publish_date_time_picker),
__experimentalRecursionProvider: () => (/* reexport */ DeprecatedExperimentalRecursionProvider),
__experimentalResponsiveBlockControl: () => (/* reexport */ responsive_block_control),
__experimentalSpacingSizesControl: () => (/* reexport */ SpacingSizesControl),
__experimentalTextDecorationControl: () => (/* reexport */ TextDecorationControl),
__experimentalTextTransformControl: () => (/* reexport */ TextTransformControl),
__experimentalUnitControl: () => (/* reexport */ UnitControl),
__experimentalUseBlockOverlayActive: () => (/* reexport */ useBlockOverlayActive),
__experimentalUseBlockPreview: () => (/* reexport */ useBlockPreview),
__experimentalUseBorderProps: () => (/* reexport */ useBorderProps),
__experimentalUseColorProps: () => (/* reexport */ useColorProps),
__experimentalUseCustomSides: () => (/* reexport */ useCustomSides),
__experimentalUseGradient: () => (/* reexport */ __experimentalUseGradient),
__experimentalUseHasRecursion: () => (/* reexport */ DeprecatedExperimentalUseHasRecursion),
__experimentalUseMultipleOriginColorsAndGradients: () => (/* reexport */ useMultipleOriginColorsAndGradients),
__experimentalUseResizeCanvas: () => (/* reexport */ useResizeCanvas),
__experimentalWritingModeControl: () => (/* reexport */ WritingModeControl),
__unstableBlockNameContext: () => (/* reexport */ block_name_context),
__unstableBlockSettingsMenuFirstItem: () => (/* reexport */ block_settings_menu_first_item),
__unstableBlockToolbarLastItem: () => (/* reexport */ block_toolbar_last_item),
__unstableEditorStyles: () => (/* reexport */ editor_styles),
__unstableIframe: () => (/* reexport */ iframe),
__unstableInserterMenuExtension: () => (/* reexport */ inserter_menu_extension),
__unstableRichTextInputEvent: () => (/* reexport */ __unstableRichTextInputEvent),
__unstableUseBlockSelectionClearer: () => (/* reexport */ useBlockSelectionClearer),
__unstableUseClipboardHandler: () => (/* reexport */ __unstableUseClipboardHandler),
__unstableUseMouseMoveTypingReset: () => (/* reexport */ useMouseMoveTypingReset),
__unstableUseTypewriter: () => (/* reexport */ useTypewriter),
__unstableUseTypingObserver: () => (/* reexport */ useTypingObserver),
createCustomColorsHOC: () => (/* reexport */ createCustomColorsHOC),
getColorClassName: () => (/* reexport */ getColorClassName),
getColorObjectByAttributeValues: () => (/* reexport */ getColorObjectByAttributeValues),
getColorObjectByColorValue: () => (/* reexport */ getColorObjectByColorValue),
getComputedFluidTypographyValue: () => (/* reexport */ getComputedFluidTypographyValue),
getCustomValueFromPreset: () => (/* reexport */ getCustomValueFromPreset),
getFontSize: () => (/* reexport */ utils_getFontSize),
getFontSizeClass: () => (/* reexport */ getFontSizeClass),
getFontSizeObjectByValue: () => (/* reexport */ utils_getFontSizeObjectByValue),
getGradientSlugByValue: () => (/* reexport */ getGradientSlugByValue),
getGradientValueBySlug: () => (/* reexport */ getGradientValueBySlug),
getPxFromCssUnit: () => (/* reexport */ get_px_from_css_unit),
getSpacingPresetCssVar: () => (/* reexport */ getSpacingPresetCssVar),
getTypographyClassesAndStyles: () => (/* reexport */ getTypographyClassesAndStyles),
isValueSpacingPreset: () => (/* reexport */ isValueSpacingPreset),
privateApis: () => (/* reexport */ privateApis),
store: () => (/* reexport */ store),
storeConfig: () => (/* reexport */ storeConfig),
transformStyles: () => (/* reexport */ transform_styles),
useBlockBindingsUtils: () => (/* reexport */ useBlockBindingsUtils),
useBlockCommands: () => (/* reexport */ useBlockCommands),
useBlockDisplayInformation: () => (/* reexport */ useBlockDisplayInformation),
useBlockEditContext: () => (/* reexport */ useBlockEditContext),
useBlockEditingMode: () => (/* reexport */ useBlockEditingMode),
useBlockProps: () => (/* reexport */ use_block_props_useBlockProps),
useCachedTruthy: () => (/* reexport */ useCachedTruthy),
useHasRecursion: () => (/* reexport */ useHasRecursion),
useInnerBlocksProps: () => (/* reexport */ useInnerBlocksProps),
useSetting: () => (/* reexport */ useSetting),
useSettings: () => (/* reexport */ use_settings_useSettings),
useStyleOverride: () => (/* reexport */ useStyleOverride),
withColorContext: () => (/* reexport */ with_color_context),
withColors: () => (/* reexport */ withColors),
withFontSizes: () => (/* reexport */ with_font_sizes)
});
// NAMESPACE OBJECT: ./node_modules/@wordpress/block-editor/build-module/store/private-selectors.js
var private_selectors_namespaceObject = {};
__webpack_require__.r(private_selectors_namespaceObject);
__webpack_require__.d(private_selectors_namespaceObject, {
getAllPatterns: () => (getAllPatterns),
getBlockRemovalRules: () => (getBlockRemovalRules),
getBlockSettings: () => (getBlockSettings),
getBlockStyles: () => (getBlockStyles),
getBlockWithoutAttributes: () => (getBlockWithoutAttributes),
getContentLockingParent: () => (getContentLockingParent),
getEnabledBlockParents: () => (getEnabledBlockParents),
getEnabledClientIdsTree: () => (getEnabledClientIdsTree),
getExpandedBlock: () => (getExpandedBlock),
getInserterMediaCategories: () => (getInserterMediaCategories),
getLastFocus: () => (getLastFocus),
getLastInsertedBlocksClientIds: () => (getLastInsertedBlocksClientIds),
getOpenedBlockSettingsMenu: () => (getOpenedBlockSettingsMenu),
getParentSectionBlock: () => (getParentSectionBlock),
getPatternBySlug: () => (getPatternBySlug),
getRegisteredInserterMediaCategories: () => (getRegisteredInserterMediaCategories),
getRemovalPromptData: () => (getRemovalPromptData),
getReusableBlocks: () => (getReusableBlocks),
getSectionRootClientId: () => (getSectionRootClientId),
getStyleOverrides: () => (getStyleOverrides),
getTemporarilyEditingAsBlocks: () => (getTemporarilyEditingAsBlocks),
getTemporarilyEditingFocusModeToRevert: () => (getTemporarilyEditingFocusModeToRevert),
getZoomLevel: () => (getZoomLevel),
hasAllowedPatterns: () => (hasAllowedPatterns),
isBlockInterfaceHidden: () => (private_selectors_isBlockInterfaceHidden),
isBlockSubtreeDisabled: () => (isBlockSubtreeDisabled),
isDragging: () => (private_selectors_isDragging),
isResolvingPatterns: () => (isResolvingPatterns),
isSectionBlock: () => (isSectionBlock),
isZoomOut: () => (isZoomOut),
isZoomOutMode: () => (isZoomOutMode)
});
// NAMESPACE OBJECT: ./node_modules/@wordpress/block-editor/build-module/store/selectors.js
var selectors_namespaceObject = {};
__webpack_require__.r(selectors_namespaceObject);
__webpack_require__.d(selectors_namespaceObject, {
__experimentalGetActiveBlockIdByBlockNames: () => (__experimentalGetActiveBlockIdByBlockNames),
__experimentalGetAllowedBlocks: () => (__experimentalGetAllowedBlocks),
__experimentalGetAllowedPatterns: () => (__experimentalGetAllowedPatterns),
__experimentalGetBlockListSettingsForBlocks: () => (__experimentalGetBlockListSettingsForBlocks),
__experimentalGetDirectInsertBlock: () => (__experimentalGetDirectInsertBlock),
__experimentalGetGlobalBlocksByName: () => (__experimentalGetGlobalBlocksByName),
__experimentalGetLastBlockAttributeChanges: () => (__experimentalGetLastBlockAttributeChanges),
__experimentalGetParsedPattern: () => (__experimentalGetParsedPattern),
__experimentalGetPatternTransformItems: () => (__experimentalGetPatternTransformItems),
__experimentalGetPatternsByBlockTypes: () => (__experimentalGetPatternsByBlockTypes),
__experimentalGetReusableBlockTitle: () => (__experimentalGetReusableBlockTitle),
__unstableGetBlockWithoutInnerBlocks: () => (__unstableGetBlockWithoutInnerBlocks),
__unstableGetClientIdWithClientIdsTree: () => (__unstableGetClientIdWithClientIdsTree),
__unstableGetClientIdsTree: () => (__unstableGetClientIdsTree),
__unstableGetContentLockingParent: () => (__unstableGetContentLockingParent),
__unstableGetEditorMode: () => (__unstableGetEditorMode),
__unstableGetSelectedBlocksWithPartialSelection: () => (__unstableGetSelectedBlocksWithPartialSelection),
__unstableGetTemporarilyEditingAsBlocks: () => (__unstableGetTemporarilyEditingAsBlocks),
__unstableGetTemporarilyEditingFocusModeToRevert: () => (__unstableGetTemporarilyEditingFocusModeToRevert),
__unstableGetVisibleBlocks: () => (__unstableGetVisibleBlocks),
__unstableHasActiveBlockOverlayActive: () => (__unstableHasActiveBlockOverlayActive),
__unstableIsFullySelected: () => (__unstableIsFullySelected),
__unstableIsLastBlockChangeIgnored: () => (__unstableIsLastBlockChangeIgnored),
__unstableIsSelectionCollapsed: () => (__unstableIsSelectionCollapsed),
__unstableIsSelectionMergeable: () => (__unstableIsSelectionMergeable),
__unstableIsWithinBlockOverlay: () => (__unstableIsWithinBlockOverlay),
__unstableSelectionHasUnmergeableBlock: () => (__unstableSelectionHasUnmergeableBlock),
areInnerBlocksControlled: () => (areInnerBlocksControlled),
canEditBlock: () => (canEditBlock),
canInsertBlockType: () => (canInsertBlockType),
canInsertBlocks: () => (canInsertBlocks),
canLockBlockType: () => (canLockBlockType),
canMoveBlock: () => (canMoveBlock),
canMoveBlocks: () => (canMoveBlocks),
canRemoveBlock: () => (canRemoveBlock),
canRemoveBlocks: () => (canRemoveBlocks),
didAutomaticChange: () => (didAutomaticChange),
getAdjacentBlockClientId: () => (getAdjacentBlockClientId),
getAllowedBlocks: () => (getAllowedBlocks),
getBlock: () => (getBlock),
getBlockAttributes: () => (getBlockAttributes),
getBlockCount: () => (getBlockCount),
getBlockEditingMode: () => (getBlockEditingMode),
getBlockHierarchyRootClientId: () => (getBlockHierarchyRootClientId),
getBlockIndex: () => (getBlockIndex),
getBlockInsertionPoint: () => (getBlockInsertionPoint),
getBlockListSettings: () => (getBlockListSettings),
getBlockMode: () => (getBlockMode),
getBlockName: () => (getBlockName),
getBlockNamesByClientId: () => (getBlockNamesByClientId),
getBlockOrder: () => (getBlockOrder),
getBlockParents: () => (getBlockParents),
getBlockParentsByBlockName: () => (getBlockParentsByBlockName),
getBlockRootClientId: () => (getBlockRootClientId),
getBlockSelectionEnd: () => (getBlockSelectionEnd),
getBlockSelectionStart: () => (getBlockSelectionStart),
getBlockTransformItems: () => (getBlockTransformItems),
getBlocks: () => (getBlocks),
getBlocksByClientId: () => (getBlocksByClientId),
getBlocksByName: () => (getBlocksByName),
getClientIdsOfDescendants: () => (getClientIdsOfDescendants),
getClientIdsWithDescendants: () => (getClientIdsWithDescendants),
getDirectInsertBlock: () => (getDirectInsertBlock),
getDraggedBlockClientIds: () => (getDraggedBlockClientIds),
getFirstMultiSelectedBlockClientId: () => (getFirstMultiSelectedBlockClientId),
getGlobalBlockCount: () => (getGlobalBlockCount),
getHoveredBlockClientId: () => (getHoveredBlockClientId),
getInserterItems: () => (getInserterItems),
getLastMultiSelectedBlockClientId: () => (getLastMultiSelectedBlockClientId),
getLowestCommonAncestorWithSelectedBlock: () => (getLowestCommonAncestorWithSelectedBlock),
getMultiSelectedBlockClientIds: () => (getMultiSelectedBlockClientIds),
getMultiSelectedBlocks: () => (getMultiSelectedBlocks),
getMultiSelectedBlocksEndClientId: () => (getMultiSelectedBlocksEndClientId),
getMultiSelectedBlocksStartClientId: () => (getMultiSelectedBlocksStartClientId),
getNextBlockClientId: () => (getNextBlockClientId),
getPatternsByBlockTypes: () => (getPatternsByBlockTypes),
getPreviousBlockClientId: () => (getPreviousBlockClientId),
getSelectedBlock: () => (getSelectedBlock),
getSelectedBlockClientId: () => (getSelectedBlockClientId),
getSelectedBlockClientIds: () => (getSelectedBlockClientIds),
getSelectedBlockCount: () => (getSelectedBlockCount),
getSelectedBlocksInitialCaretPosition: () => (getSelectedBlocksInitialCaretPosition),
getSelectionEnd: () => (getSelectionEnd),
getSelectionStart: () => (getSelectionStart),
getSettings: () => (getSettings),
getTemplate: () => (getTemplate),
getTemplateLock: () => (getTemplateLock),
hasBlockMovingClientId: () => (selectors_hasBlockMovingClientId),
hasDraggedInnerBlock: () => (hasDraggedInnerBlock),
hasInserterItems: () => (hasInserterItems),
hasMultiSelection: () => (hasMultiSelection),
hasSelectedBlock: () => (hasSelectedBlock),
hasSelectedInnerBlock: () => (hasSelectedInnerBlock),
isAncestorBeingDragged: () => (isAncestorBeingDragged),
isAncestorMultiSelected: () => (isAncestorMultiSelected),
isBlockBeingDragged: () => (isBlockBeingDragged),
isBlockHighlighted: () => (isBlockHighlighted),
isBlockInsertionPointVisible: () => (isBlockInsertionPointVisible),
isBlockMultiSelected: () => (isBlockMultiSelected),
isBlockSelected: () => (isBlockSelected),
isBlockValid: () => (isBlockValid),
isBlockVisible: () => (isBlockVisible),
isBlockWithinSelection: () => (isBlockWithinSelection),
isCaretWithinFormattedText: () => (isCaretWithinFormattedText),
isDraggingBlocks: () => (isDraggingBlocks),
isFirstMultiSelectedBlock: () => (isFirstMultiSelectedBlock),
isGroupable: () => (isGroupable),
isLastBlockChangePersistent: () => (isLastBlockChangePersistent),
isMultiSelecting: () => (selectors_isMultiSelecting),
isNavigationMode: () => (isNavigationMode),
isSelectionEnabled: () => (selectors_isSelectionEnabled),
isTyping: () => (selectors_isTyping),
isUngroupable: () => (isUngroupable),
isValidTemplate: () => (isValidTemplate),
wasBlockJustInserted: () => (wasBlockJustInserted)
});
// NAMESPACE OBJECT: ./node_modules/@wordpress/block-editor/build-module/store/private-actions.js
var private_actions_namespaceObject = {};
__webpack_require__.r(private_actions_namespaceObject);
__webpack_require__.d(private_actions_namespaceObject, {
__experimentalUpdateSettings: () => (__experimentalUpdateSettings),
clearBlockRemovalPrompt: () => (clearBlockRemovalPrompt),
deleteStyleOverride: () => (deleteStyleOverride),
ensureDefaultBlock: () => (ensureDefaultBlock),
expandBlock: () => (expandBlock),
hideBlockInterface: () => (hideBlockInterface),
modifyContentLockBlock: () => (modifyContentLockBlock),
privateRemoveBlocks: () => (privateRemoveBlocks),
resetZoomLevel: () => (resetZoomLevel),
setBlockRemovalRules: () => (setBlockRemovalRules),
setLastFocus: () => (setLastFocus),
setOpenedBlockSettingsMenu: () => (setOpenedBlockSettingsMenu),
setStyleOverride: () => (setStyleOverride),
setZoomLevel: () => (setZoomLevel),
showBlockInterface: () => (showBlockInterface),
startDragging: () => (startDragging),
stopDragging: () => (stopDragging),
stopEditingAsBlocks: () => (stopEditingAsBlocks)
});
// NAMESPACE OBJECT: ./node_modules/@wordpress/block-editor/build-module/store/actions.js
var actions_namespaceObject = {};
__webpack_require__.r(actions_namespaceObject);
__webpack_require__.d(actions_namespaceObject, {
__unstableDeleteSelection: () => (__unstableDeleteSelection),
__unstableExpandSelection: () => (__unstableExpandSelection),
__unstableMarkAutomaticChange: () => (__unstableMarkAutomaticChange),
__unstableMarkLastChangeAsPersistent: () => (__unstableMarkLastChangeAsPersistent),
__unstableMarkNextChangeAsNotPersistent: () => (__unstableMarkNextChangeAsNotPersistent),
__unstableSaveReusableBlock: () => (__unstableSaveReusableBlock),
__unstableSetEditorMode: () => (__unstableSetEditorMode),
__unstableSetTemporarilyEditingAsBlocks: () => (__unstableSetTemporarilyEditingAsBlocks),
__unstableSplitSelection: () => (__unstableSplitSelection),
clearSelectedBlock: () => (clearSelectedBlock),
duplicateBlocks: () => (duplicateBlocks),
enterFormattedText: () => (enterFormattedText),
exitFormattedText: () => (exitFormattedText),
flashBlock: () => (flashBlock),
hideInsertionPoint: () => (hideInsertionPoint),
hoverBlock: () => (hoverBlock),
insertAfterBlock: () => (insertAfterBlock),
insertBeforeBlock: () => (insertBeforeBlock),
insertBlock: () => (insertBlock),
insertBlocks: () => (insertBlocks),
insertDefaultBlock: () => (insertDefaultBlock),
mergeBlocks: () => (mergeBlocks),
moveBlockToPosition: () => (moveBlockToPosition),
moveBlocksDown: () => (moveBlocksDown),
moveBlocksToPosition: () => (moveBlocksToPosition),
moveBlocksUp: () => (moveBlocksUp),
multiSelect: () => (multiSelect),
receiveBlocks: () => (receiveBlocks),
registerInserterMediaCategory: () => (registerInserterMediaCategory),
removeBlock: () => (removeBlock),
removeBlocks: () => (removeBlocks),
replaceBlock: () => (replaceBlock),
replaceBlocks: () => (replaceBlocks),
replaceInnerBlocks: () => (replaceInnerBlocks),
resetBlocks: () => (resetBlocks),
resetSelection: () => (resetSelection),
selectBlock: () => (selectBlock),
selectNextBlock: () => (selectNextBlock),
selectPreviousBlock: () => (selectPreviousBlock),
selectionChange: () => (selectionChange),
setBlockEditingMode: () => (setBlockEditingMode),
setBlockMovingClientId: () => (setBlockMovingClientId),
setBlockVisibility: () => (setBlockVisibility),
setHasControlledInnerBlocks: () => (setHasControlledInnerBlocks),
setNavigationMode: () => (setNavigationMode),
setTemplateValidity: () => (setTemplateValidity),
showInsertionPoint: () => (showInsertionPoint),
startDraggingBlocks: () => (startDraggingBlocks),
startMultiSelect: () => (startMultiSelect),
startTyping: () => (startTyping),
stopDraggingBlocks: () => (stopDraggingBlocks),
stopMultiSelect: () => (stopMultiSelect),
stopTyping: () => (stopTyping),
synchronizeTemplate: () => (synchronizeTemplate),
toggleBlockHighlight: () => (toggleBlockHighlight),
toggleBlockMode: () => (toggleBlockMode),
toggleSelection: () => (toggleSelection),
unsetBlockEditingMode: () => (unsetBlockEditingMode),
updateBlock: () => (updateBlock),
updateBlockAttributes: () => (updateBlockAttributes),
updateBlockListSettings: () => (updateBlockListSettings),
updateSettings: () => (updateSettings),
validateBlocksToTemplate: () => (validateBlocksToTemplate)
});
// NAMESPACE OBJECT: ./node_modules/@wordpress/block-editor/build-module/components/global-styles/index.js
var global_styles_namespaceObject = {};
__webpack_require__.r(global_styles_namespaceObject);
__webpack_require__.d(global_styles_namespaceObject, {
AdvancedPanel: () => (AdvancedPanel),
BackgroundPanel: () => (background_panel_BackgroundImagePanel),
BorderPanel: () => (BorderPanel),
ColorPanel: () => (ColorPanel),
DimensionsPanel: () => (DimensionsPanel),
FiltersPanel: () => (FiltersPanel),
GlobalStylesContext: () => (GlobalStylesContext),
ImageSettingsPanel: () => (ImageSettingsPanel),
TypographyPanel: () => (TypographyPanel),
areGlobalStyleConfigsEqual: () => (areGlobalStyleConfigsEqual),
getBlockCSSSelector: () => (getBlockCSSSelector),
getBlockSelectors: () => (getBlockSelectors),
getGlobalStylesChanges: () => (getGlobalStylesChanges),
getLayoutStyles: () => (getLayoutStyles),
toStyles: () => (toStyles),
useGlobalSetting: () => (useGlobalSetting),
useGlobalStyle: () => (useGlobalStyle),
useGlobalStylesOutput: () => (useGlobalStylesOutput),
useGlobalStylesOutputWithConfig: () => (useGlobalStylesOutputWithConfig),
useGlobalStylesReset: () => (useGlobalStylesReset),
useHasBackgroundPanel: () => (useHasBackgroundPanel),
useHasBorderPanel: () => (useHasBorderPanel),
useHasBorderPanelControls: () => (useHasBorderPanelControls),
useHasColorPanel: () => (useHasColorPanel),
useHasDimensionsPanel: () => (useHasDimensionsPanel),
useHasFiltersPanel: () => (useHasFiltersPanel),
useHasImageSettingsPanel: () => (useHasImageSettingsPanel),
useHasTypographyPanel: () => (useHasTypographyPanel),
useSettingsForBlockElement: () => (useSettingsForBlockElement)
});
;// CONCATENATED MODULE: external ["wp","blocks"]
const external_wp_blocks_namespaceObject = window["wp"]["blocks"];
;// CONCATENATED MODULE: external ["wp","element"]
const external_wp_element_namespaceObject = window["wp"]["element"];
;// CONCATENATED MODULE: external ["wp","data"]
const external_wp_data_namespaceObject = window["wp"]["data"];
;// CONCATENATED MODULE: external ["wp","compose"]
const external_wp_compose_namespaceObject = window["wp"]["compose"];
;// CONCATENATED MODULE: external ["wp","hooks"]
const external_wp_hooks_namespaceObject = window["wp"]["hooks"];
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-edit/context.js
/**
* WordPress dependencies
*/
const mayDisplayControlsKey = Symbol('mayDisplayControls');
const mayDisplayParentControlsKey = Symbol('mayDisplayParentControls');
const blockEditingModeKey = Symbol('blockEditingMode');
const blockBindingsKey = Symbol('blockBindings');
const isPreviewModeKey = Symbol('isPreviewMode');
const DEFAULT_BLOCK_EDIT_CONTEXT = {
name: '',
isSelected: false
};
const Context = (0,external_wp_element_namespaceObject.createContext)(DEFAULT_BLOCK_EDIT_CONTEXT);
const {
Provider
} = Context;
/**
* A hook that returns the block edit context.
*
* @return {Object} Block edit context
*/
function useBlockEditContext() {
return (0,external_wp_element_namespaceObject.useContext)(Context);
}
;// CONCATENATED MODULE: external ["wp","deprecated"]
const external_wp_deprecated_namespaceObject = window["wp"]["deprecated"];
var external_wp_deprecated_default = /*#__PURE__*/__webpack_require__.n(external_wp_deprecated_namespaceObject);
// EXTERNAL MODULE: ./node_modules/fast-deep-equal/es6/index.js
var es6 = __webpack_require__(7734);
var es6_default = /*#__PURE__*/__webpack_require__.n(es6);
;// CONCATENATED MODULE: external ["wp","i18n"]
const external_wp_i18n_namespaceObject = window["wp"]["i18n"];
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/store/defaults.js
/**
* WordPress dependencies
*/
const PREFERENCES_DEFAULTS = {
insertUsage: {}
};
/**
* The default editor settings
*
* @typedef {Object} SETTINGS_DEFAULT
* @property {boolean} alignWide Enable/Disable Wide/Full Alignments
* @property {boolean} supportsLayout Enable/disable layouts support in container blocks.
* @property {boolean} imageEditing Image Editing settings set to false to disable.
* @property {Array} imageSizes Available image sizes
* @property {number} maxWidth Max width to constraint resizing
* @property {boolean|Array} allowedBlockTypes Allowed block types
* @property {boolean} hasFixedToolbar Whether or not the editor toolbar is fixed
* @property {boolean} distractionFree Whether or not the editor UI is distraction free
* @property {boolean} focusMode Whether the focus mode is enabled or not
* @property {Array} styles Editor Styles
* @property {boolean} keepCaretInsideBlock Whether caret should move between blocks in edit mode
* @property {string} bodyPlaceholder Empty post placeholder
* @property {string} titlePlaceholder Empty title placeholder
* @property {boolean} canLockBlocks Whether the user can manage Block Lock state
* @property {boolean} codeEditingEnabled Whether or not the user can switch to the code editor
* @property {boolean} generateAnchors Enable/Disable auto anchor generation for Heading blocks
* @property {boolean} enableOpenverseMediaCategory Enable/Disable the Openverse media category in the inserter.
* @property {boolean} clearBlockSelection Whether the block editor should clear selection on mousedown when a block is not clicked.
* @property {boolean} __experimentalCanUserUseUnfilteredHTML Whether the user should be able to use unfiltered HTML or the HTML should be filtered e.g., to remove elements considered insecure like iframes.
* @property {boolean} __experimentalBlockDirectory Whether the user has enabled the Block Directory
* @property {Array} __experimentalBlockPatterns Array of objects representing the block patterns
* @property {Array} __experimentalBlockPatternCategories Array of objects representing the block pattern categories
*/
const SETTINGS_DEFAULTS = {
alignWide: false,
supportsLayout: true,
// colors setting is not used anymore now defaults are passed from theme.json on the server and core has its own defaults.
// The setting is only kept for backward compatibility purposes.
colors: [{
name: (0,external_wp_i18n_namespaceObject.__)('Black'),
slug: 'black',
color: '#000000'
}, {
name: (0,external_wp_i18n_namespaceObject.__)('Cyan bluish gray'),
slug: 'cyan-bluish-gray',
color: '#abb8c3'
}, {
name: (0,external_wp_i18n_namespaceObject.__)('White'),
slug: 'white',
color: '#ffffff'
}, {
name: (0,external_wp_i18n_namespaceObject.__)('Pale pink'),
slug: 'pale-pink',
color: '#f78da7'
}, {
name: (0,external_wp_i18n_namespaceObject.__)('Vivid red'),
slug: 'vivid-red',
color: '#cf2e2e'
}, {
name: (0,external_wp_i18n_namespaceObject.__)('Luminous vivid orange'),
slug: 'luminous-vivid-orange',
color: '#ff6900'
}, {
name: (0,external_wp_i18n_namespaceObject.__)('Luminous vivid amber'),
slug: 'luminous-vivid-amber',
color: '#fcb900'
}, {
name: (0,external_wp_i18n_namespaceObject.__)('Light green cyan'),
slug: 'light-green-cyan',
color: '#7bdcb5'
}, {
name: (0,external_wp_i18n_namespaceObject.__)('Vivid green cyan'),
slug: 'vivid-green-cyan',
color: '#00d084'
}, {
name: (0,external_wp_i18n_namespaceObject.__)('Pale cyan blue'),
slug: 'pale-cyan-blue',
color: '#8ed1fc'
}, {
name: (0,external_wp_i18n_namespaceObject.__)('Vivid cyan blue'),
slug: 'vivid-cyan-blue',
color: '#0693e3'
}, {
name: (0,external_wp_i18n_namespaceObject.__)('Vivid purple'),
slug: 'vivid-purple',
color: '#9b51e0'
}],
// fontSizes setting is not used anymore now defaults are passed from theme.json on the server and core has its own defaults.
// The setting is only kept for backward compatibility purposes.
fontSizes: [{
name: (0,external_wp_i18n_namespaceObject._x)('Small', 'font size name'),
size: 13,
slug: 'small'
}, {
name: (0,external_wp_i18n_namespaceObject._x)('Normal', 'font size name'),
size: 16,
slug: 'normal'
}, {
name: (0,external_wp_i18n_namespaceObject._x)('Medium', 'font size name'),
size: 20,
slug: 'medium'
}, {
name: (0,external_wp_i18n_namespaceObject._x)('Large', 'font size name'),
size: 36,
slug: 'large'
}, {
name: (0,external_wp_i18n_namespaceObject._x)('Huge', 'font size name'),
size: 42,
slug: 'huge'
}],
// Image default size slug.
imageDefaultSize: 'large',
imageSizes: [{
slug: 'thumbnail',
name: (0,external_wp_i18n_namespaceObject.__)('Thumbnail')
}, {
slug: 'medium',
name: (0,external_wp_i18n_namespaceObject.__)('Medium')
}, {
slug: 'large',
name: (0,external_wp_i18n_namespaceObject.__)('Large')
}, {
slug: 'full',
name: (0,external_wp_i18n_namespaceObject.__)('Full Size')
}],
// Allow plugin to disable Image Editor if need be.
imageEditing: true,
// This is current max width of the block inner area
// It's used to constraint image resizing and this value could be overridden later by themes
maxWidth: 580,
// Allowed block types for the editor, defaulting to true (all supported).
allowedBlockTypes: true,
// Maximum upload size in bytes allowed for the site.
maxUploadFileSize: 0,
// List of allowed mime types and file extensions.
allowedMimeTypes: null,
// Allows to disable block locking interface.
canLockBlocks: true,
// Allows to disable Openverse media category in the inserter.
enableOpenverseMediaCategory: true,
clearBlockSelection: true,
__experimentalCanUserUseUnfilteredHTML: false,
__experimentalBlockDirectory: false,
__mobileEnablePageTemplates: false,
__experimentalBlockPatterns: [],
__experimentalBlockPatternCategories: [],
__unstableIsPreviewMode: false,
// These settings will be completely revamped in the future.
// The goal is to evolve this into an API which will instruct
// the block inspector to animate transitions between what it
// displays based on the relationship between the selected block
// and its parent, and only enable it if the parent is controlling
// its children blocks.
blockInspectorAnimation: {
animationParent: 'core/navigation',
'core/navigation': {
enterDirection: 'leftToRight'
},
'core/navigation-submenu': {
enterDirection: 'rightToLeft'
},
'core/navigation-link': {
enterDirection: 'rightToLeft'
},
'core/search': {
enterDirection: 'rightToLeft'
},
'core/social-links': {
enterDirection: 'rightToLeft'
},
'core/page-list': {
enterDirection: 'rightToLeft'
},
'core/spacer': {
enterDirection: 'rightToLeft'
},
'core/home-link': {
enterDirection: 'rightToLeft'
},
'core/site-title': {
enterDirection: 'rightToLeft'
},
'core/site-logo': {
enterDirection: 'rightToLeft'
}
},
generateAnchors: false,
// gradients setting is not used anymore now defaults are passed from theme.json on the server and core has its own defaults.
// The setting is only kept for backward compatibility purposes.
gradients: [{
name: (0,external_wp_i18n_namespaceObject.__)('Vivid cyan blue to vivid purple'),
gradient: 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
slug: 'vivid-cyan-blue-to-vivid-purple'
}, {
name: (0,external_wp_i18n_namespaceObject.__)('Light green cyan to vivid green cyan'),
gradient: 'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
slug: 'light-green-cyan-to-vivid-green-cyan'
}, {
name: (0,external_wp_i18n_namespaceObject.__)('Luminous vivid amber to luminous vivid orange'),
gradient: 'linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)',
slug: 'luminous-vivid-amber-to-luminous-vivid-orange'
}, {
name: (0,external_wp_i18n_namespaceObject.__)('Luminous vivid orange to vivid red'),
gradient: 'linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)',
slug: 'luminous-vivid-orange-to-vivid-red'
}, {
name: (0,external_wp_i18n_namespaceObject.__)('Very light gray to cyan bluish gray'),
gradient: 'linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)',
slug: 'very-light-gray-to-cyan-bluish-gray'
}, {
name: (0,external_wp_i18n_namespaceObject.__)('Cool to warm spectrum'),
gradient: 'linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)',
slug: 'cool-to-warm-spectrum'
}, {
name: (0,external_wp_i18n_namespaceObject.__)('Blush light purple'),
gradient: 'linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)',
slug: 'blush-light-purple'
}, {
name: (0,external_wp_i18n_namespaceObject.__)('Blush bordeaux'),
gradient: 'linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)',
slug: 'blush-bordeaux'
}, {
name: (0,external_wp_i18n_namespaceObject.__)('Luminous dusk'),
gradient: 'linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)',
slug: 'luminous-dusk'
}, {
name: (0,external_wp_i18n_namespaceObject.__)('Pale ocean'),
gradient: 'linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)',
slug: 'pale-ocean'
}, {
name: (0,external_wp_i18n_namespaceObject.__)('Electric grass'),
gradient: 'linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)',
slug: 'electric-grass'
}, {
name: (0,external_wp_i18n_namespaceObject.__)('Midnight'),
gradient: 'linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)',
slug: 'midnight'
}],
__unstableResolvedAssets: {
styles: [],
scripts: []
}
};
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/store/array.js
/**
* Insert one or multiple elements into a given position of an array.
*
* @param {Array} array Source array.
* @param {*} elements Elements to insert.
* @param {number} index Insert Position.
*
* @return {Array} Result.
*/
function insertAt(array, elements, index) {
return [...array.slice(0, index), ...(Array.isArray(elements) ? elements : [elements]), ...array.slice(index)];
}
/**
* Moves an element in an array.
*
* @param {Array} array Source array.
* @param {number} from Source index.
* @param {number} to Destination index.
* @param {number} count Number of elements to move.
*
* @return {Array} Result.
*/
function moveTo(array, from, to, count = 1) {
const withoutMovedElements = [...array];
withoutMovedElements.splice(from, count);
return insertAt(withoutMovedElements, array.slice(from, from + count), to);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/store/reducer.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const identity = x => x;
/**
* Given an array of blocks, returns an object where each key is a nesting
* context, the value of which is an array of block client IDs existing within
* that nesting context.
*
* @param {Array} blocks Blocks to map.
* @param {?string} rootClientId Assumed root client ID.
*
* @return {Object} Block order map object.
*/
function mapBlockOrder(blocks, rootClientId = '') {
const result = new Map();
const current = [];
result.set(rootClientId, current);
blocks.forEach(block => {
const {
clientId,
innerBlocks
} = block;
current.push(clientId);
mapBlockOrder(innerBlocks, clientId).forEach((order, subClientId) => {
result.set(subClientId, order);
});
});
return result;
}
/**
* Given an array of blocks, returns an object where each key contains
* the clientId of the block and the value is the parent of the block.
*
* @param {Array} blocks Blocks to map.
* @param {?string} rootClientId Assumed root client ID.
*
* @return {Object} Block order map object.
*/
function mapBlockParents(blocks, rootClientId = '') {
const result = [];
const stack = [[rootClientId, blocks]];
while (stack.length) {
const [parent, currentBlocks] = stack.shift();
currentBlocks.forEach(({
innerBlocks,
...block
}) => {
result.push([block.clientId, parent]);
if (innerBlocks?.length) {
stack.push([block.clientId, innerBlocks]);
}
});
}
return result;
}
/**
* Helper method to iterate through all blocks, recursing into inner blocks,
* applying a transformation function to each one.
* Returns a flattened object with the transformed blocks.
*
* @param {Array} blocks Blocks to flatten.
* @param {Function} transform Transforming function to be applied to each block.
*
* @return {Array} Flattened object.
*/
function flattenBlocks(blocks, transform = identity) {
const result = [];
const stack = [...blocks];
while (stack.length) {
const {
innerBlocks,
...block
} = stack.shift();
stack.push(...innerBlocks);
result.push([block.clientId, transform(block)]);
}
return result;
}
function getFlattenedClientIds(blocks) {
const result = {};
const stack = [...blocks];
while (stack.length) {
const {
innerBlocks,
...block
} = stack.shift();
stack.push(...innerBlocks);
result[block.clientId] = true;
}
return result;
}
/**
* Given an array of blocks, returns an object containing all blocks, without
* attributes, recursing into inner blocks. Keys correspond to the block client
* ID, the value of which is the attributes object.
*
* @param {Array} blocks Blocks to flatten.
*
* @return {Array} Flattened block attributes object.
*/
function getFlattenedBlocksWithoutAttributes(blocks) {
return flattenBlocks(blocks, block => {
const {
attributes,
...restBlock
} = block;
return restBlock;
});
}
/**
* Given an array of blocks, returns an object containing all block attributes,
* recursing into inner blocks. Keys correspond to the block client ID, the
* value of which is the attributes object.
*
* @param {Array} blocks Blocks to flatten.
*
* @return {Array} Flattened block attributes object.
*/
function getFlattenedBlockAttributes(blocks) {
return flattenBlocks(blocks, block => block.attributes);
}
/**
* Returns true if the two object arguments have the same keys, or false
* otherwise.
*
* @param {Object} a First object.
* @param {Object} b Second object.
*
* @return {boolean} Whether the two objects have the same keys.
*/
function hasSameKeys(a, b) {
return es6_default()(Object.keys(a), Object.keys(b));
}
/**
* Returns true if, given the currently dispatching action and the previously
* dispatched action, the two actions are updating the same block attribute, or
* false otherwise.
*
* @param {Object} action Currently dispatching action.
* @param {Object} lastAction Previously dispatched action.
*
* @return {boolean} Whether actions are updating the same block attribute.
*/
function isUpdatingSameBlockAttribute(action, lastAction) {
return action.type === 'UPDATE_BLOCK_ATTRIBUTES' && lastAction !== undefined && lastAction.type === 'UPDATE_BLOCK_ATTRIBUTES' && es6_default()(action.clientIds, lastAction.clientIds) && hasSameKeys(action.attributes, lastAction.attributes);
}
function updateBlockTreeForBlocks(state, blocks) {
const treeToUpdate = state.tree;
const stack = [...blocks];
const flattenedBlocks = [...blocks];
while (stack.length) {
const block = stack.shift();
stack.push(...block.innerBlocks);
flattenedBlocks.push(...block.innerBlocks);
}
// Create objects before mutating them, that way it's always defined.
for (const block of flattenedBlocks) {
treeToUpdate.set(block.clientId, {});
}
for (const block of flattenedBlocks) {
treeToUpdate.set(block.clientId, Object.assign(treeToUpdate.get(block.clientId), {
...state.byClientId.get(block.clientId),
attributes: state.attributes.get(block.clientId),
innerBlocks: block.innerBlocks.map(subBlock => treeToUpdate.get(subBlock.clientId))
}));
}
}
function updateParentInnerBlocksInTree(state, updatedClientIds, updateChildrenOfUpdatedClientIds = false) {
const treeToUpdate = state.tree;
const uncontrolledParents = new Set([]);
const controlledParents = new Set();
for (const clientId of updatedClientIds) {
let current = updateChildrenOfUpdatedClientIds ? clientId : state.parents.get(clientId);
do {
if (state.controlledInnerBlocks[current]) {
// Should stop on controlled blocks.
// If we reach a controlled parent, break out of the loop.
controlledParents.add(current);
break;
} else {
// Else continue traversing up through parents.
uncontrolledParents.add(current);
current = state.parents.get(current);
}
} while (current !== undefined);
}
// To make sure the order of assignments doesn't matter,
// we first create empty objects and mutates the inner blocks later.
for (const clientId of uncontrolledParents) {
treeToUpdate.set(clientId, {
...treeToUpdate.get(clientId)
});
}
for (const clientId of uncontrolledParents) {
treeToUpdate.get(clientId).innerBlocks = (state.order.get(clientId) || []).map(subClientId => treeToUpdate.get(subClientId));
}
// Controlled parent blocks, need a dedicated key for their inner blocks
// to be used when doing getBlocks( controlledBlockClientId ).
for (const clientId of controlledParents) {
treeToUpdate.set('controlled||' + clientId, {
innerBlocks: (state.order.get(clientId) || []).map(subClientId => treeToUpdate.get(subClientId))
});
}
}
/**
* Higher-order reducer intended to compute full block objects key for each block in the post.
* This is a denormalization to optimize the performance of the getBlock selectors and avoid
* recomputing the block objects and avoid heavy memoization.
*
* @param {Function} reducer Original reducer function.
*
* @return {Function} Enhanced reducer function.
*/
const withBlockTree = reducer => (state = {}, action) => {
const newState = reducer(state, action);
if (newState === state) {
return state;
}
newState.tree = state.tree ? state.tree : new Map();
switch (action.type) {
case 'RECEIVE_BLOCKS':
case 'INSERT_BLOCKS':
{
newState.tree = new Map(newState.tree);
updateBlockTreeForBlocks(newState, action.blocks);
updateParentInnerBlocksInTree(newState, action.rootClientId ? [action.rootClientId] : [''], true);
break;
}
case 'UPDATE_BLOCK':
newState.tree = new Map(newState.tree);
newState.tree.set(action.clientId, {
...newState.tree.get(action.clientId),
...newState.byClientId.get(action.clientId),
attributes: newState.attributes.get(action.clientId)
});
updateParentInnerBlocksInTree(newState, [action.clientId], false);
break;
case 'SYNC_DERIVED_BLOCK_ATTRIBUTES':
case 'UPDATE_BLOCK_ATTRIBUTES':
{
newState.tree = new Map(newState.tree);
action.clientIds.forEach(clientId => {
newState.tree.set(clientId, {
...newState.tree.get(clientId),
attributes: newState.attributes.get(clientId)
});
});
updateParentInnerBlocksInTree(newState, action.clientIds, false);
break;
}
case 'REPLACE_BLOCKS_AUGMENTED_WITH_CHILDREN':
{
const inserterClientIds = getFlattenedClientIds(action.blocks);
newState.tree = new Map(newState.tree);
action.replacedClientIds.forEach(clientId => {
newState.tree.delete(clientId);
// Controlled inner blocks are only removed
// if the block doesn't move to another position
// otherwise their content will be lost.
if (!inserterClientIds[clientId]) {
newState.tree.delete('controlled||' + clientId);
}
});
updateBlockTreeForBlocks(newState, action.blocks);
updateParentInnerBlocksInTree(newState, action.blocks.map(b => b.clientId), false);
// If there are no replaced blocks, it means we're removing blocks so we need to update their parent.
const parentsOfRemovedBlocks = [];
for (const clientId of action.clientIds) {
const parentId = state.parents.get(clientId);
if (parentId !== undefined && (parentId === '' || newState.byClientId.get(parentId))) {
parentsOfRemovedBlocks.push(parentId);
}
}
updateParentInnerBlocksInTree(newState, parentsOfRemovedBlocks, true);
break;
}
case 'REMOVE_BLOCKS_AUGMENTED_WITH_CHILDREN':
const parentsOfRemovedBlocks = [];
for (const clientId of action.clientIds) {
const parentId = state.parents.get(clientId);
if (parentId !== undefined && (parentId === '' || newState.byClientId.get(parentId))) {
parentsOfRemovedBlocks.push(parentId);
}
}
newState.tree = new Map(newState.tree);
action.removedClientIds.forEach(clientId => {
newState.tree.delete(clientId);
newState.tree.delete('controlled||' + clientId);
});
updateParentInnerBlocksInTree(newState, parentsOfRemovedBlocks, true);
break;
case 'MOVE_BLOCKS_TO_POSITION':
{
const updatedBlockUids = [];
if (action.fromRootClientId) {
updatedBlockUids.push(action.fromRootClientId);
} else {
updatedBlockUids.push('');
}
if (action.toRootClientId) {
updatedBlockUids.push(action.toRootClientId);
}
newState.tree = new Map(newState.tree);
updateParentInnerBlocksInTree(newState, updatedBlockUids, true);
break;
}
case 'MOVE_BLOCKS_UP':
case 'MOVE_BLOCKS_DOWN':
{
const updatedBlockUids = [action.rootClientId ? action.rootClientId : ''];
newState.tree = new Map(newState.tree);
updateParentInnerBlocksInTree(newState, updatedBlockUids, true);
break;
}
case 'SAVE_REUSABLE_BLOCK_SUCCESS':
{
const updatedBlockUids = [];
newState.attributes.forEach((attributes, clientId) => {
if (newState.byClientId.get(clientId).name === 'core/block' && attributes.ref === action.updatedId) {
updatedBlockUids.push(clientId);
}
});
newState.tree = new Map(newState.tree);
updatedBlockUids.forEach(clientId => {
newState.tree.set(clientId, {
...newState.byClientId.get(clientId),
attributes: newState.attributes.get(clientId),
innerBlocks: newState.tree.get(clientId).innerBlocks
});
});
updateParentInnerBlocksInTree(newState, updatedBlockUids, false);
}
}
return newState;
};
/**
* Higher-order reducer intended to augment the blocks reducer, assigning an
* `isPersistentChange` property value corresponding to whether a change in
* state can be considered as persistent. All changes are considered persistent
* except when updating the same block attribute as in the previous action.
*
* @param {Function} reducer Original reducer function.
*
* @return {Function} Enhanced reducer function.
*/
function withPersistentBlockChange(reducer) {
let lastAction;
let markNextChangeAsNotPersistent = false;
let explicitPersistent;
return (state, action) => {
let nextState = reducer(state, action);
let nextIsPersistentChange;
if (action.type === 'SET_EXPLICIT_PERSISTENT') {
var _state$isPersistentCh;
explicitPersistent = action.isPersistentChange;
nextIsPersistentChange = (_state$isPersistentCh = state.isPersistentChange) !== null && _state$isPersistentCh !== void 0 ? _state$isPersistentCh : true;
}
if (explicitPersistent !== undefined) {
nextIsPersistentChange = explicitPersistent;
return nextIsPersistentChange === nextState.isPersistentChange ? nextState : {
...nextState,
isPersistentChange: nextIsPersistentChange
};
}
const isExplicitPersistentChange = action.type === 'MARK_LAST_CHANGE_AS_PERSISTENT' || markNextChangeAsNotPersistent;
// Defer to previous state value (or default) unless changing or
// explicitly marking as persistent.
if (state === nextState && !isExplicitPersistentChange) {
var _state$isPersistentCh2;
markNextChangeAsNotPersistent = action.type === 'MARK_NEXT_CHANGE_AS_NOT_PERSISTENT';
nextIsPersistentChange = (_state$isPersistentCh2 = state?.isPersistentChange) !== null && _state$isPersistentCh2 !== void 0 ? _state$isPersistentCh2 : true;
if (state.isPersistentChange === nextIsPersistentChange) {
return state;
}
return {
...nextState,
isPersistentChange: nextIsPersistentChange
};
}
nextState = {
...nextState,
isPersistentChange: isExplicitPersistentChange ? !markNextChangeAsNotPersistent : !isUpdatingSameBlockAttribute(action, lastAction)
};
// In comparing against the previous action, consider only those which
// would have qualified as one which would have been ignored or not
// have resulted in a changed state.
lastAction = action;
markNextChangeAsNotPersistent = action.type === 'MARK_NEXT_CHANGE_AS_NOT_PERSISTENT';
return nextState;
};
}
/**
* Higher-order reducer intended to augment the blocks reducer, assigning an
* `isIgnoredChange` property value corresponding to whether a change in state
* can be considered as ignored. A change is considered ignored when the result
* of an action not incurred by direct user interaction.
*
* @param {Function} reducer Original reducer function.
*
* @return {Function} Enhanced reducer function.
*/
function withIgnoredBlockChange(reducer) {
/**
* Set of action types for which a blocks state change should be ignored.
*
* @type {Set}
*/
const IGNORED_ACTION_TYPES = new Set(['RECEIVE_BLOCKS']);
return (state, action) => {
const nextState = reducer(state, action);
if (nextState !== state) {
nextState.isIgnoredChange = IGNORED_ACTION_TYPES.has(action.type);
}
return nextState;
};
}
/**
* Higher-order reducer targeting the combined blocks reducer, augmenting
* block client IDs in remove action to include cascade of inner blocks.
*
* @param {Function} reducer Original reducer function.
*
* @return {Function} Enhanced reducer function.
*/
const withInnerBlocksRemoveCascade = reducer => (state, action) => {
// Gets all children which need to be removed.
const getAllChildren = clientIds => {
let result = clientIds;
for (let i = 0; i < result.length; i++) {
if (!state.order.get(result[i]) || action.keepControlledInnerBlocks && action.keepControlledInnerBlocks[result[i]]) {
continue;
}
if (result === clientIds) {
result = [...result];
}
result.push(...state.order.get(result[i]));
}
return result;
};
if (state) {
switch (action.type) {
case 'REMOVE_BLOCKS':
action = {
...action,
type: 'REMOVE_BLOCKS_AUGMENTED_WITH_CHILDREN',
removedClientIds: getAllChildren(action.clientIds)
};
break;
case 'REPLACE_BLOCKS':
action = {
...action,
type: 'REPLACE_BLOCKS_AUGMENTED_WITH_CHILDREN',
replacedClientIds: getAllChildren(action.clientIds)
};
break;
}
}
return reducer(state, action);
};
/**
* Higher-order reducer which targets the combined blocks reducer and handles
* the `RESET_BLOCKS` action. When dispatched, this action will replace all
* blocks that exist in the post, leaving blocks that exist only in state (e.g.
* reusable blocks and blocks controlled by inner blocks controllers) alone.
*
* @param {Function} reducer Original reducer function.
*
* @return {Function} Enhanced reducer function.
*/
const withBlockReset = reducer => (state, action) => {
if (action.type === 'RESET_BLOCKS') {
const newState = {
...state,
byClientId: new Map(getFlattenedBlocksWithoutAttributes(action.blocks)),
attributes: new Map(getFlattenedBlockAttributes(action.blocks)),
order: mapBlockOrder(action.blocks),
parents: new Map(mapBlockParents(action.blocks)),
controlledInnerBlocks: {}
};
newState.tree = new Map(state?.tree);
updateBlockTreeForBlocks(newState, action.blocks);
newState.tree.set('', {
innerBlocks: action.blocks.map(subBlock => newState.tree.get(subBlock.clientId))
});
return newState;
}
return reducer(state, action);
};
/**
* Higher-order reducer which targets the combined blocks reducer and handles
* the `REPLACE_INNER_BLOCKS` action. When dispatched, this action the state
* should become equivalent to the execution of a `REMOVE_BLOCKS` action
* containing all the child's of the root block followed by the execution of
* `INSERT_BLOCKS` with the new blocks.
*
* @param {Function} reducer Original reducer function.
*
* @return {Function} Enhanced reducer function.
*/
const withReplaceInnerBlocks = reducer => (state, action) => {
if (action.type !== 'REPLACE_INNER_BLOCKS') {
return reducer(state, action);
}
// Finds every nested inner block controller. We must check the action blocks
// and not just the block parent state because some inner block controllers
// should be deleted if specified, whereas others should not be deleted. If
// a controlled should not be deleted, then we need to avoid deleting its
// inner blocks from the block state because its inner blocks will not be
// attached to the block in the action.
const nestedControllers = {};
if (Object.keys(state.controlledInnerBlocks).length) {
const stack = [...action.blocks];
while (stack.length) {
const {
innerBlocks,
...block
} = stack.shift();
stack.push(...innerBlocks);
if (!!state.controlledInnerBlocks[block.clientId]) {
nestedControllers[block.clientId] = true;
}
}
}
// The `keepControlledInnerBlocks` prop will keep the inner blocks of the
// marked block in the block state so that they can be reattached to the
// marked block when we re-insert everything a few lines below.
let stateAfterBlocksRemoval = state;
if (state.order.get(action.rootClientId)) {
stateAfterBlocksRemoval = reducer(stateAfterBlocksRemoval, {
type: 'REMOVE_BLOCKS',
keepControlledInnerBlocks: nestedControllers,
clientIds: state.order.get(action.rootClientId)
});
}
let stateAfterInsert = stateAfterBlocksRemoval;
if (action.blocks.length) {
stateAfterInsert = reducer(stateAfterInsert, {
...action,
type: 'INSERT_BLOCKS',
index: 0
});
// We need to re-attach the controlled inner blocks to the blocks tree and
// preserve their block order. Otherwise, an inner block controller's blocks
// will be deleted entirely from its entity.
const stateAfterInsertOrder = new Map(stateAfterInsert.order);
Object.keys(nestedControllers).forEach(key => {
if (state.order.get(key)) {
stateAfterInsertOrder.set(key, state.order.get(key));
}
});
stateAfterInsert.order = stateAfterInsertOrder;
stateAfterInsert.tree = new Map(stateAfterInsert.tree);
Object.keys(nestedControllers).forEach(_key => {
const key = `controlled||${_key}`;
if (state.tree.has(key)) {
stateAfterInsert.tree.set(key, state.tree.get(key));
}
});
}
return stateAfterInsert;
};
/**
* Higher-order reducer which targets the combined blocks reducer and handles
* the `SAVE_REUSABLE_BLOCK_SUCCESS` action. This action can't be handled by
* regular reducers and needs a higher-order reducer since it needs access to
* both `byClientId` and `attributes` simultaneously.
*
* @param {Function} reducer Original reducer function.
*
* @return {Function} Enhanced reducer function.
*/
const withSaveReusableBlock = reducer => (state, action) => {
if (state && action.type === 'SAVE_REUSABLE_BLOCK_SUCCESS') {
const {
id,
updatedId
} = action;
// If a temporary reusable block is saved, we swap the temporary id with the final one.
if (id === updatedId) {
return state;
}
state = {
...state
};
state.attributes = new Map(state.attributes);
state.attributes.forEach((attributes, clientId) => {
const {
name
} = state.byClientId.get(clientId);
if (name === 'core/block' && attributes.ref === id) {
state.attributes.set(clientId, {
...attributes,
ref: updatedId
});
}
});
}
return reducer(state, action);
};
/**
* Higher-order reducer which removes blocks from state when switching parent block controlled state.
*
* @param {Function} reducer Original reducer function.
*
* @return {Function} Enhanced reducer function.
*/
const withResetControlledBlocks = reducer => (state, action) => {
if (action.type === 'SET_HAS_CONTROLLED_INNER_BLOCKS') {
// when switching a block from controlled to uncontrolled or inverse,
// we need to remove its content first.
const tempState = reducer(state, {
type: 'REPLACE_INNER_BLOCKS',
rootClientId: action.clientId,
blocks: []
});
return reducer(tempState, action);
}
return reducer(state, action);
};
/**
* Reducer returning the blocks state.
*
* @param {Object} state Current state.
* @param {Object} action Dispatched action.
*
* @return {Object} Updated state.
*/
const blocks = (0,external_wp_compose_namespaceObject.pipe)(external_wp_data_namespaceObject.combineReducers, withSaveReusableBlock,
// Needs to be before withBlockCache.
withBlockTree,
// Needs to be before withInnerBlocksRemoveCascade.
withInnerBlocksRemoveCascade, withReplaceInnerBlocks,
// Needs to be after withInnerBlocksRemoveCascade.
withBlockReset, withPersistentBlockChange, withIgnoredBlockChange, withResetControlledBlocks)({
// The state is using a Map instead of a plain object for performance reasons.
// You can run the "./test/performance.js" unit test to check the impact
// code changes can have on this reducer.
byClientId(state = new Map(), action) {
switch (action.type) {
case 'RECEIVE_BLOCKS':
case 'INSERT_BLOCKS':
{
const newState = new Map(state);
getFlattenedBlocksWithoutAttributes(action.blocks).forEach(([key, value]) => {
newState.set(key, value);
});
return newState;
}
case 'UPDATE_BLOCK':
{
// Ignore updates if block isn't known.
if (!state.has(action.clientId)) {
return state;
}
// Do nothing if only attributes change.
const {
attributes,
...changes
} = action.updates;
if (Object.values(changes).length === 0) {
return state;
}
const newState = new Map(state);
newState.set(action.clientId, {
...state.get(action.clientId),
...changes
});
return newState;
}
case 'REPLACE_BLOCKS_AUGMENTED_WITH_CHILDREN':
{
if (!action.blocks) {
return state;
}
const newState = new Map(state);
action.replacedClientIds.forEach(clientId => {
newState.delete(clientId);
});
getFlattenedBlocksWithoutAttributes(action.blocks).forEach(([key, value]) => {
newState.set(key, value);
});
return newState;
}
case 'REMOVE_BLOCKS_AUGMENTED_WITH_CHILDREN':
{
const newState = new Map(state);
action.removedClientIds.forEach(clientId => {
newState.delete(clientId);
});
return newState;
}
}
return state;
},
// The state is using a Map instead of a plain object for performance reasons.
// You can run the "./test/performance.js" unit test to check the impact
// code changes can have on this reducer.
attributes(state = new Map(), action) {
switch (action.type) {
case 'RECEIVE_BLOCKS':
case 'INSERT_BLOCKS':
{
const newState = new Map(state);
getFlattenedBlockAttributes(action.blocks).forEach(([key, value]) => {
newState.set(key, value);
});
return newState;
}
case 'UPDATE_BLOCK':
{
// Ignore updates if block isn't known or there are no attribute changes.
if (!state.get(action.clientId) || !action.updates.attributes) {
return state;
}
const newState = new Map(state);
newState.set(action.clientId, {
...state.get(action.clientId),
...action.updates.attributes
});
return newState;
}
case 'SYNC_DERIVED_BLOCK_ATTRIBUTES':
case 'UPDATE_BLOCK_ATTRIBUTES':
{
// Avoid a state change if none of the block IDs are known.
if (action.clientIds.every(id => !state.get(id))) {
return state;
}
let hasChange = false;
const newState = new Map(state);
for (const clientId of action.clientIds) {
var _action$attributes;
const updatedAttributeEntries = Object.entries(action.uniqueByBlock ? action.attributes[clientId] : (_action$attributes = action.attributes) !== null && _action$attributes !== void 0 ? _action$attributes : {});
if (updatedAttributeEntries.length === 0) {
continue;
}
let hasUpdatedAttributes = false;
const existingAttributes = state.get(clientId);
const newAttributes = {};
updatedAttributeEntries.forEach(([key, value]) => {
if (existingAttributes[key] !== value) {
hasUpdatedAttributes = true;
newAttributes[key] = value;
}
});
hasChange = hasChange || hasUpdatedAttributes;
if (hasUpdatedAttributes) {
newState.set(clientId, {
...existingAttributes,
...newAttributes
});
}
}
return hasChange ? newState : state;
}
case 'REPLACE_BLOCKS_AUGMENTED_WITH_CHILDREN':
{
if (!action.blocks) {
return state;
}
const newState = new Map(state);
action.replacedClientIds.forEach(clientId => {
newState.delete(clientId);
});
getFlattenedBlockAttributes(action.blocks).forEach(([key, value]) => {
newState.set(key, value);
});
return newState;
}
case 'REMOVE_BLOCKS_AUGMENTED_WITH_CHILDREN':
{
const newState = new Map(state);
action.removedClientIds.forEach(clientId => {
newState.delete(clientId);
});
return newState;
}
}
return state;
},
// The state is using a Map instead of a plain object for performance reasons.
// You can run the "./test/performance.js" unit test to check the impact
// code changes can have on this reducer.
order(state = new Map(), action) {
switch (action.type) {
case 'RECEIVE_BLOCKS':
{
var _state$get;
const blockOrder = mapBlockOrder(action.blocks);
const newState = new Map(state);
blockOrder.forEach((order, clientId) => {
if (clientId !== '') {
newState.set(clientId, order);
}
});
newState.set('', ((_state$get = state.get('')) !== null && _state$get !== void 0 ? _state$get : []).concat(blockOrder['']));
return newState;
}
case 'INSERT_BLOCKS':
{
const {
rootClientId = ''
} = action;
const subState = state.get(rootClientId) || [];
const mappedBlocks = mapBlockOrder(action.blocks, rootClientId);
const {
index = subState.length
} = action;
const newState = new Map(state);
mappedBlocks.forEach((order, clientId) => {
newState.set(clientId, order);
});
newState.set(rootClientId, insertAt(subState, mappedBlocks.get(rootClientId), index));
return newState;
}
case 'MOVE_BLOCKS_TO_POSITION':
{
var _state$get$filter;
const {
fromRootClientId = '',
toRootClientId = '',
clientIds
} = action;
const {
index = state.get(toRootClientId).length
} = action;
// Moving inside the same parent block.
if (fromRootClientId === toRootClientId) {
const subState = state.get(toRootClientId);
const fromIndex = subState.indexOf(clientIds[0]);
const newState = new Map(state);
newState.set(toRootClientId, moveTo(state.get(toRootClientId), fromIndex, index, clientIds.length));
return newState;
}
// Moving from a parent block to another.
const newState = new Map(state);
newState.set(fromRootClientId, (_state$get$filter = state.get(fromRootClientId)?.filter(id => !clientIds.includes(id))) !== null && _state$get$filter !== void 0 ? _state$get$filter : []);
newState.set(toRootClientId, insertAt(state.get(toRootClientId), clientIds, index));
return newState;
}
case 'MOVE_BLOCKS_UP':
{
const {
clientIds,
rootClientId = ''
} = action;
const firstClientId = clientIds[0];
const subState = state.get(rootClientId);
if (!subState.length || firstClientId === subState[0]) {
return state;
}
const firstIndex = subState.indexOf(firstClientId);
const newState = new Map(state);
newState.set(rootClientId, moveTo(subState, firstIndex, firstIndex - 1, clientIds.length));
return newState;
}
case 'MOVE_BLOCKS_DOWN':
{
const {
clientIds,
rootClientId = ''
} = action;
const firstClientId = clientIds[0];
const lastClientId = clientIds[clientIds.length - 1];
const subState = state.get(rootClientId);
if (!subState.length || lastClientId === subState[subState.length - 1]) {
return state;
}
const firstIndex = subState.indexOf(firstClientId);
const newState = new Map(state);
newState.set(rootClientId, moveTo(subState, firstIndex, firstIndex + 1, clientIds.length));
return newState;
}
case 'REPLACE_BLOCKS_AUGMENTED_WITH_CHILDREN':
{
const {
clientIds
} = action;
if (!action.blocks) {
return state;
}
const mappedBlocks = mapBlockOrder(action.blocks);
const newState = new Map(state);
action.replacedClientIds.forEach(clientId => {
newState.delete(clientId);
});
mappedBlocks.forEach((order, clientId) => {
if (clientId !== '') {
newState.set(clientId, order);
}
});
newState.forEach((order, clientId) => {
const newSubOrder = Object.values(order).reduce((result, subClientId) => {
if (subClientId === clientIds[0]) {
return [...result, ...mappedBlocks.get('')];
}
if (clientIds.indexOf(subClientId) === -1) {
result.push(subClientId);
}
return result;
}, []);
newState.set(clientId, newSubOrder);
});
return newState;
}
case 'REMOVE_BLOCKS_AUGMENTED_WITH_CHILDREN':
{
const newState = new Map(state);
// Remove inner block ordering for removed blocks.
action.removedClientIds.forEach(clientId => {
newState.delete(clientId);
});
newState.forEach((order, clientId) => {
var _order$filter;
const newSubOrder = (_order$filter = order?.filter(id => !action.removedClientIds.includes(id))) !== null && _order$filter !== void 0 ? _order$filter : [];
if (newSubOrder.length !== order.length) {
newState.set(clientId, newSubOrder);
}
});
return newState;
}
}
return state;
},
// While technically redundant data as the inverse of `order`, it serves as
// an optimization for the selectors which derive the ancestry of a block.
parents(state = new Map(), action) {
switch (action.type) {
case 'RECEIVE_BLOCKS':
{
const newState = new Map(state);
mapBlockParents(action.blocks).forEach(([key, value]) => {
newState.set(key, value);
});
return newState;
}
case 'INSERT_BLOCKS':
{
const newState = new Map(state);
mapBlockParents(action.blocks, action.rootClientId || '').forEach(([key, value]) => {
newState.set(key, value);
});
return newState;
}
case 'MOVE_BLOCKS_TO_POSITION':
{
const newState = new Map(state);
action.clientIds.forEach(id => {
newState.set(id, action.toRootClientId || '');
});
return newState;
}
case 'REPLACE_BLOCKS_AUGMENTED_WITH_CHILDREN':
{
const newState = new Map(state);
action.replacedClientIds.forEach(clientId => {
newState.delete(clientId);
});
mapBlockParents(action.blocks, state.get(action.clientIds[0])).forEach(([key, value]) => {
newState.set(key, value);
});
return newState;
}
case 'REMOVE_BLOCKS_AUGMENTED_WITH_CHILDREN':
{
const newState = new Map(state);
action.removedClientIds.forEach(clientId => {
newState.delete(clientId);
});
return newState;
}
}
return state;
},
controlledInnerBlocks(state = {}, {
type,
clientId,
hasControlledInnerBlocks
}) {
if (type === 'SET_HAS_CONTROLLED_INNER_BLOCKS') {
return {
...state,
[clientId]: hasControlledInnerBlocks
};
}
return state;
}
});
/**
* Reducer returning visibility status of block interface.
*
* @param {boolean} state Current state.
* @param {Object} action Dispatched action.
*
* @return {boolean} Updated state.
*/
function isBlockInterfaceHidden(state = false, action) {
switch (action.type) {
case 'HIDE_BLOCK_INTERFACE':
return true;
case 'SHOW_BLOCK_INTERFACE':
return false;
}
return state;
}
/**
* Reducer returning typing state.
*
* @param {boolean} state Current state.
* @param {Object} action Dispatched action.
*
* @return {boolean} Updated state.
*/
function isTyping(state = false, action) {
switch (action.type) {
case 'START_TYPING':
return true;
case 'STOP_TYPING':
return false;
}
return state;
}
/**
* Reducer returning dragging state. It is possible for a user to be dragging
* data from outside of the editor, so this state is separate from `draggedBlocks`.
*
* @param {boolean} state Current state.
* @param {Object} action Dispatched action.
*
* @return {boolean} Updated state.
*/
function isDragging(state = false, action) {
switch (action.type) {
case 'START_DRAGGING':
return true;
case 'STOP_DRAGGING':
return false;
}
return state;
}
/**
* Reducer returning dragged block client id.
*
* @param {string[]} state Current state.
* @param {Object} action Dispatched action.
*
* @return {string[]} Updated state.
*/
function draggedBlocks(state = [], action) {
switch (action.type) {
case 'START_DRAGGING_BLOCKS':
return action.clientIds;
case 'STOP_DRAGGING_BLOCKS':
return [];
}
return state;
}
/**
* Reducer tracking the visible blocks.
*
* @param {Record<string,boolean>} state Current state.
* @param {Object} action Dispatched action.
*
* @return {Record<string,boolean>} Block visibility.
*/
function blockVisibility(state = {}, action) {
if (action.type === 'SET_BLOCK_VISIBILITY') {
return {
...state,
...action.updates
};
}
return state;
}
/**
* Internal helper reducer for selectionStart and selectionEnd. Can hold a block
* selection, represented by an object with property clientId.
*
* @param {Object} state Current state.
* @param {Object} action Dispatched action.
*
* @return {Object} Updated state.
*/
function selectionHelper(state = {}, action) {
switch (action.type) {
case 'CLEAR_SELECTED_BLOCK':
{
if (state.clientId) {
return {};
}
return state;
}
case 'SELECT_BLOCK':
if (action.clientId === state.clientId) {
return state;
}
return {
clientId: action.clientId
};
case 'REPLACE_INNER_BLOCKS':
case 'INSERT_BLOCKS':
{
if (!action.updateSelection || !action.blocks.length) {
return state;
}
return {
clientId: action.blocks[0].clientId
};
}
case 'REMOVE_BLOCKS':
if (!action.clientIds || !action.clientIds.length || action.clientIds.indexOf(state.clientId) === -1) {
return state;
}
return {};
case 'REPLACE_BLOCKS':
{
if (action.clientIds.indexOf(state.clientId) === -1) {
return state;
}
const blockToSelect = action.blocks[action.indexToSelect] || action.blocks[action.blocks.length - 1];
if (!blockToSelect) {
return {};
}
if (blockToSelect.clientId === state.clientId) {
return state;
}
return {
clientId: blockToSelect.clientId
};
}
}
return state;
}
/**
* Reducer returning the selection state.
*
* @param {boolean} state Current state.
* @param {Object} action Dispatched action.
*
* @return {boolean} Updated state.
*/
function selection(state = {}, action) {
switch (action.type) {
case 'SELECTION_CHANGE':
if (action.clientId) {
return {
selectionStart: {
clientId: action.clientId,
attributeKey: action.attributeKey,
offset: action.startOffset
},
selectionEnd: {
clientId: action.clientId,
attributeKey: action.attributeKey,
offset: action.endOffset
}
};
}
return {
selectionStart: action.start || state.selectionStart,
selectionEnd: action.end || state.selectionEnd
};
case 'RESET_SELECTION':
const {
selectionStart,
selectionEnd
} = action;
return {
selectionStart,
selectionEnd
};
case 'MULTI_SELECT':
const {
start,
end
} = action;
if (start === state.selectionStart?.clientId && end === state.selectionEnd?.clientId) {
return state;
}
return {
selectionStart: {
clientId: start
},
selectionEnd: {
clientId: end
}
};
case 'RESET_BLOCKS':
const startClientId = state?.selectionStart?.clientId;
const endClientId = state?.selectionEnd?.clientId;
// Do nothing if there's no selected block.
if (!startClientId && !endClientId) {
return state;
}
// If the start of the selection won't exist after reset, remove selection.
if (!action.blocks.some(block => block.clientId === startClientId)) {
return {
selectionStart: {},
selectionEnd: {}
};
}
// If the end of the selection won't exist after reset, collapse selection.
if (!action.blocks.some(block => block.clientId === endClientId)) {
return {
...state,
selectionEnd: state.selectionStart
};
}
}
const selectionStart = selectionHelper(state.selectionStart, action);
const selectionEnd = selectionHelper(state.selectionEnd, action);
if (selectionStart === state.selectionStart && selectionEnd === state.selectionEnd) {
return state;
}
return {
selectionStart,
selectionEnd
};
}
/**
* Reducer returning whether the user is multi-selecting.
*
* @param {boolean} state Current state.
* @param {Object} action Dispatched action.
*
* @return {boolean} Updated state.
*/
function isMultiSelecting(state = false, action) {
switch (action.type) {
case 'START_MULTI_SELECT':
return true;
case 'STOP_MULTI_SELECT':
return false;
}
return state;
}
/**
* Reducer returning whether selection is enabled.
*
* @param {boolean} state Current state.
* @param {Object} action Dispatched action.
*
* @return {boolean} Updated state.
*/
function isSelectionEnabled(state = true, action) {
switch (action.type) {
case 'TOGGLE_SELECTION':
return action.isSelectionEnabled;
}
return state;
}
/**
* Reducer returning the data needed to display a prompt when certain blocks
* are removed, or `false` if no such prompt is requested.
*
* @param {boolean} state Current state.
* @param {Object} action Dispatched action.
*
* @return {Object|false} Data for removal prompt display, if any.
*/
function removalPromptData(state = false, action) {
switch (action.type) {
case 'DISPLAY_BLOCK_REMOVAL_PROMPT':
const {
clientIds,
selectPrevious,
message
} = action;
return {
clientIds,
selectPrevious,
message
};
case 'CLEAR_BLOCK_REMOVAL_PROMPT':
return false;
}
return state;
}
/**
* Reducer returning any rules that a block editor may provide in order to
* prevent a user from accidentally removing certain blocks. These rules are
* then used to display a confirmation prompt to the user. For instance, in the
* Site Editor, the Query Loop block is important enough to warrant such
* confirmation.
*
* The data is a record whose keys are block types (e.g. 'core/query') and
* whose values are the explanation to be shown to users (e.g. 'Query Loop
* displays a list of posts or pages.').
*
* @param {boolean} state Current state.
* @param {Object} action Dispatched action.
*
* @return {Record<string,string>} Updated state.
*/
function blockRemovalRules(state = false, action) {
switch (action.type) {
case 'SET_BLOCK_REMOVAL_RULES':
return action.rules;
}
return state;
}
/**
* Reducer returning the initial block selection.
*
* Currently this in only used to restore the selection after block deletion and
* pasting new content.This reducer should eventually be removed in favour of setting
* selection directly.
*
* @param {boolean} state Current state.
* @param {Object} action Dispatched action.
*
* @return {number|null} Initial position: 0, -1 or null.
*/
function initialPosition(state = null, action) {
if (action.type === 'REPLACE_BLOCKS' && action.initialPosition !== undefined) {
return action.initialPosition;
} else if (['MULTI_SELECT', 'SELECT_BLOCK', 'RESET_SELECTION', 'INSERT_BLOCKS', 'REPLACE_INNER_BLOCKS'].includes(action.type)) {
return action.initialPosition;
}
return state;
}
function blocksMode(state = {}, action) {
if (action.type === 'TOGGLE_BLOCK_MODE') {
const {
clientId
} = action;
return {
...state,
[clientId]: state[clientId] && state[clientId] === 'html' ? 'visual' : 'html'
};
}
return state;
}
/**
* Reducer returning the block insertion point visibility, either null if there
* is not an explicit insertion point assigned, or an object of its `index` and
* `rootClientId`.
*
* @param {Object} state Current state.
* @param {Object} action Dispatched action.
*
* @return {Object} Updated state.
*/
function insertionPoint(state = null, action) {
switch (action.type) {
case 'SHOW_INSERTION_POINT':
{
const {
rootClientId,
index,
__unstableWithInserter,
operation,
nearestSide
} = action;
const nextState = {
rootClientId,
index,
__unstableWithInserter,
operation,
nearestSide
};
// Bail out updates if the states are the same.
return es6_default()(state, nextState) ? state : nextState;
}
case 'HIDE_INSERTION_POINT':
return null;
}
return state;
}
/**
* Reducer returning whether the post blocks match the defined template or not.
*
* @param {Object} state Current state.
* @param {Object} action Dispatched action.
*
* @return {boolean} Updated state.
*/
function template(state = {
isValid: true
}, action) {
switch (action.type) {
case 'SET_TEMPLATE_VALIDITY':
return {
...state,
isValid: action.isValid
};
}
return state;
}
/**
* Reducer returning the editor setting.
*
* @param {Object} state Current state.
* @param {Object} action Dispatched action.
*
* @return {Object} Updated state.
*/
function settings(state = SETTINGS_DEFAULTS, action) {
switch (action.type) {
case 'UPDATE_SETTINGS':
if (action.reset) {
return {
...SETTINGS_DEFAULTS,
...action.settings
};
}
return {
...state,
...action.settings
};
}
return state;
}
/**
* Reducer returning the user preferences.
*
* @param {Object} state Current state.
* @param {Object} action Dispatched action.
*
* @return {string} Updated state.
*/
function preferences(state = PREFERENCES_DEFAULTS, action) {
switch (action.type) {
case 'INSERT_BLOCKS':
case 'REPLACE_BLOCKS':
{
const nextInsertUsage = action.blocks.reduce((prevUsage, block) => {
const {
attributes,
name: blockName
} = block;
let id = blockName;
// If a block variation match is found change the name to be the same with the
// one that is used for block variations in the Inserter (`getItemFromVariation`).
const match = (0,external_wp_data_namespaceObject.select)(external_wp_blocks_namespaceObject.store).getActiveBlockVariation(blockName, attributes);
if (match?.name) {
id += '/' + match.name;
}
if (blockName === 'core/block') {
id += '/' + attributes.ref;
}
return {
...prevUsage,
[id]: {
time: action.time,
count: prevUsage[id] ? prevUsage[id].count + 1 : 1
}
};
}, state.insertUsage);
return {
...state,
insertUsage: nextInsertUsage
};
}
}
return state;
}
/**
* Reducer returning an object where each key is a block client ID, its value
* representing the settings for its nested blocks.
*
* @param {Object} state Current state.
* @param {Object} action Dispatched action.
*
* @return {Object} Updated state.
*/
const blockListSettings = (state = {}, action) => {
switch (action.type) {
// Even if the replaced blocks have the same client ID, our logic
// should correct the state.
case 'REPLACE_BLOCKS':
case 'REMOVE_BLOCKS':
{
return Object.fromEntries(Object.entries(state).filter(([id]) => !action.clientIds.includes(id)));
}
case 'UPDATE_BLOCK_LIST_SETTINGS':
{
const updates = typeof action.clientId === 'string' ? {
[action.clientId]: action.settings
} : action.clientId;
// Remove settings that are the same as the current state.
for (const clientId in updates) {
if (!updates[clientId]) {
if (!state[clientId]) {
delete updates[clientId];
}
} else if (es6_default()(state[clientId], updates[clientId])) {
delete updates[clientId];
}
}
if (Object.keys(updates).length === 0) {
return state;
}
const merged = {
...state,
...updates
};
for (const clientId in updates) {
if (!updates[clientId]) {
delete merged[clientId];
}
}
return merged;
}
}
return state;
};
/**
* Reducer returning which mode is enabled.
*
* @param {string} state Current state.
* @param {Object} action Dispatched action.
*
* @return {string} Updated state.
*/
function editorMode(state = 'edit', action) {
// Let inserting block in navigation mode always trigger Edit mode.
if (action.type === 'INSERT_BLOCKS' && state === 'navigation') {
return 'edit';
}
if (action.type === 'SET_EDITOR_MODE') {
return action.mode;
}
return state;
}
/**
* Reducer returning whether the block moving mode is enabled or not.
*
* @param {string|null} state Current state.
* @param {Object} action Dispatched action.
*
* @return {string|null} Updated state.
*/
function hasBlockMovingClientId(state = null, action) {
if (action.type === 'SET_BLOCK_MOVING_MODE') {
return action.hasBlockMovingClientId;
}
if (action.type === 'SET_EDITOR_MODE') {
return null;
}
return state;
}
/**
* Reducer return an updated state representing the most recent block attribute
* update. The state is structured as an object where the keys represent the
* client IDs of blocks, the values a subset of attributes from the most recent
* block update. The state is always reset to null if the last action is
* anything other than an attributes update.
*
* @param {Object<string,Object>} state Current state.
* @param {Object} action Action object.
*
* @return {[string,Object]} Updated state.
*/
function lastBlockAttributesChange(state = null, action) {
switch (action.type) {
case 'UPDATE_BLOCK':
if (!action.updates.attributes) {
break;
}
return {
[action.clientId]: action.updates.attributes
};
case 'UPDATE_BLOCK_ATTRIBUTES':
return action.clientIds.reduce((accumulator, id) => ({
...accumulator,
[id]: action.uniqueByBlock ? action.attributes[id] : action.attributes
}), {});
}
return state;
}
/**
* Reducer returning current highlighted block.
*
* @param {boolean} state Current highlighted block.
* @param {Object} action Dispatched action.
*
* @return {string} Updated state.
*/
function highlightedBlock(state, action) {
switch (action.type) {
case 'TOGGLE_BLOCK_HIGHLIGHT':
const {
clientId,
isHighlighted
} = action;
if (isHighlighted) {
return clientId;
} else if (state === clientId) {
return null;
}
return state;
case 'SELECT_BLOCK':
if (action.clientId !== state) {
return null;
}
}
return state;
}
/**
* Reducer returning current expanded block in the list view.
*
* @param {string|null} state Current expanded block.
* @param {Object} action Dispatched action.
*
* @return {string|null} Updated state.
*/
function expandedBlock(state = null, action) {
switch (action.type) {
case 'SET_BLOCK_EXPANDED_IN_LIST_VIEW':
return action.clientId;
case 'SELECT_BLOCK':
if (action.clientId !== state) {
return null;
}
}
return state;
}
/**
* Reducer returning the block insertion event list state.
*
* @param {Object} state Current state.
* @param {Object} action Dispatched action.
*
* @return {Object} Updated state.
*/
function lastBlockInserted(state = {}, action) {
switch (action.type) {
case 'INSERT_BLOCKS':
case 'REPLACE_BLOCKS':
if (!action.blocks.length) {
return state;
}
const clientIds = action.blocks.map(block => {
return block.clientId;
});
const source = action.meta?.source;
return {
clientIds,
source
};
case 'RESET_BLOCKS':
return {};
}
return state;
}
/**
* Reducer returning the block that is eding temporarily edited as blocks.
*
* @param {Object} state Current state.
* @param {Object} action Dispatched action.
*
* @return {Object} Updated state.
*/
function temporarilyEditingAsBlocks(state = '', action) {
if (action.type === 'SET_TEMPORARILY_EDITING_AS_BLOCKS') {
return action.temporarilyEditingAsBlocks;
}
return state;
}
/**
* Reducer returning the focus mode that should be used when temporarily edit as blocks finishes.
*
* @param {Object} state Current state.
* @param {Object} action Dispatched action.
*
* @return {Object} Updated state.
*/
function temporarilyEditingFocusModeRevert(state = '', action) {
if (action.type === 'SET_TEMPORARILY_EDITING_AS_BLOCKS') {
return action.focusModeToRevert;
}
return state;
}
/**
* Reducer returning a map of block client IDs to block editing modes.
*
* @param {Map} state Current state.
* @param {Object} action Dispatched action.
*
* @return {Map} Updated state.
*/
function blockEditingModes(state = new Map(), action) {
switch (action.type) {
case 'SET_BLOCK_EDITING_MODE':
return new Map(state).set(action.clientId, action.mode);
case 'UNSET_BLOCK_EDITING_MODE':
{
const newState = new Map(state);
newState.delete(action.clientId);
return newState;
}
case 'RESET_BLOCKS':
{
return state.has('') ? new Map().set('', state.get('')) : state;
}
}
return state;
}
/**
* Reducer returning the clientId of the block settings menu that is currently open.
*
* @param {string|null} state Current state.
* @param {Object} action Dispatched action.
*
* @return {string|null} Updated state.
*/
function openedBlockSettingsMenu(state = null, action) {
if ('SET_OPENED_BLOCK_SETTINGS_MENU' === action.type) {
var _action$clientId;
return (_action$clientId = action?.clientId) !== null && _action$clientId !== void 0 ? _action$clientId : null;
}
return state;
}
/**
* Reducer returning a map of style IDs to style overrides.
*
* @param {Map} state Current state.
* @param {Object} action Dispatched action.
*
* @return {Map} Updated state.
*/
function styleOverrides(state = new Map(), action) {
switch (action.type) {
case 'SET_STYLE_OVERRIDE':
return new Map(state).set(action.id, action.style);
case 'DELETE_STYLE_OVERRIDE':
{
const newState = new Map(state);
newState.delete(action.id);
return newState;
}
}
return state;
}
/**
* Reducer returning a map of the registered inserter media categories.
*
* @param {Array} state Current state.
* @param {Object} action Dispatched action.
*
* @return {Array} Updated state.
*/
function registeredInserterMediaCategories(state = [], action) {
switch (action.type) {
case 'REGISTER_INSERTER_MEDIA_CATEGORY':
return [...state, action.category];
}
return state;
}
/**
* Reducer setting last focused element
*
* @param {boolean} state Current state.
* @param {Object} action Dispatched action.
*
* @return {boolean} Updated state.
*/
function lastFocus(state = false, action) {
switch (action.type) {
case 'LAST_FOCUS':
return action.lastFocus;
}
return state;
}
/**
* Reducer setting currently hovered block.
*
* @param {boolean} state Current state.
* @param {Object} action Dispatched action.
*
* @return {boolean} Updated state.
*/
function hoveredBlockClientId(state = false, action) {
switch (action.type) {
case 'HOVER_BLOCK':
return action.clientId;
}
return state;
}
/**
* Reducer setting zoom out state.
*
* @param {boolean} state Current state.
* @param {Object} action Dispatched action.
*
* @return {boolean} Updated state.
*/
function zoomLevel(state = 100, action) {
switch (action.type) {
case 'SET_ZOOM_LEVEL':
return action.zoom;
case 'RESET_ZOOM_LEVEL':
return 100;
}
return state;
}
const combinedReducers = (0,external_wp_data_namespaceObject.combineReducers)({
blocks,
isDragging,
isTyping,
isBlockInterfaceHidden,
draggedBlocks,
selection,
isMultiSelecting,
isSelectionEnabled,
initialPosition,
blocksMode,
blockListSettings,
insertionPoint,
template,
settings,
preferences,
lastBlockAttributesChange,
lastFocus,
editorMode,
hasBlockMovingClientId,
expandedBlock,
highlightedBlock,
lastBlockInserted,
temporarilyEditingAsBlocks,
temporarilyEditingFocusModeRevert,
blockVisibility,
blockEditingModes,
styleOverrides,
removalPromptData,
blockRemovalRules,
openedBlockSettingsMenu,
registeredInserterMediaCategories,
hoveredBlockClientId,
zoomLevel
});
function withAutomaticChangeReset(reducer) {
return (state, action) => {
const nextState = reducer(state, action);
if (!state) {
return nextState;
}
// Take over the last value without creating a new reference.
nextState.automaticChangeStatus = state.automaticChangeStatus;
if (action.type === 'MARK_AUTOMATIC_CHANGE') {
return {
...nextState,
automaticChangeStatus: 'pending'
};
}
if (action.type === 'MARK_AUTOMATIC_CHANGE_FINAL' && state.automaticChangeStatus === 'pending') {
return {
...nextState,
automaticChangeStatus: 'final'
};
}
// If there's a change that doesn't affect blocks or selection, maintain
// the current status.
if (nextState.blocks === state.blocks && nextState.selection === state.selection) {
return nextState;
}
// As long as the state is not final, ignore any selection changes.
if (nextState.automaticChangeStatus !== 'final' && nextState.selection !== state.selection) {
return nextState;
}
// Reset the status if blocks change or selection changes (when status is final).
return {
...nextState,
automaticChangeStatus: undefined
};
};
}
/* harmony default export */ const reducer = (withAutomaticChangeReset(combinedReducers));
;// CONCATENATED MODULE: external ["wp","primitives"]
const external_wp_primitives_namespaceObject = window["wp"]["primitives"];
;// CONCATENATED MODULE: external "ReactJSXRuntime"
const external_ReactJSXRuntime_namespaceObject = window["ReactJSXRuntime"];
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/symbol.js
/**
* WordPress dependencies
*/
const symbol = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M21.3 10.8l-5.6-5.6c-.7-.7-1.8-.7-2.5 0l-5.6 5.6c-.7.7-.7 1.8 0 2.5l5.6 5.6c.3.3.8.5 1.2.5s.9-.2 1.2-.5l5.6-5.6c.8-.7.8-1.9.1-2.5zm-1 1.4l-5.6 5.6c-.1.1-.3.1-.4 0l-5.6-5.6c-.1-.1-.1-.3 0-.4l5.6-5.6s.1-.1.2-.1.1 0 .2.1l5.6 5.6c.1.1.1.3 0 .4zm-16.6-.4L10 5.5l-1-1-6.3 6.3c-.7.7-.7 1.8 0 2.5L9 19.5l1.1-1.1-6.3-6.3c-.2 0-.2-.2-.1-.3z"
})
});
/* harmony default export */ const library_symbol = (symbol);
;// CONCATENATED MODULE: external ["wp","richText"]
const external_wp_richText_namespaceObject = window["wp"]["richText"];
;// CONCATENATED MODULE: external ["wp","blockSerializationDefaultParser"]
const external_wp_blockSerializationDefaultParser_namespaceObject = window["wp"]["blockSerializationDefaultParser"];
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/store/private-keys.js
const globalStylesDataKey = Symbol('globalStylesDataKey');
const globalStylesLinksDataKey = Symbol('globalStylesLinks');
const selectBlockPatternsKey = Symbol('selectBlockPatternsKey');
const reusableBlocksSelectKey = Symbol('reusableBlocksSelect');
const sectionRootClientIdKey = Symbol('sectionRootClientIdKey');
;// CONCATENATED MODULE: external ["wp","privateApis"]
const external_wp_privateApis_namespaceObject = window["wp"]["privateApis"];
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/lock-unlock.js
/**
* WordPress dependencies
*/
const {
lock,
unlock
} = (0,external_wp_privateApis_namespaceObject.__dangerousOptInToUnstableAPIsOnlyForCoreModules)('I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.', '@wordpress/block-editor');
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/store/constants.js
const STORE_NAME = 'core/block-editor';
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/store/utils.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const withRootClientIdOptionKey = Symbol('withRootClientId');
const parsedPatternCache = new WeakMap();
const grammarMapCache = new WeakMap();
function parsePattern(pattern) {
const blocks = (0,external_wp_blocks_namespaceObject.parse)(pattern.content, {
__unstableSkipMigrationLogs: true
});
if (blocks.length === 1) {
blocks[0].attributes = {
...blocks[0].attributes,
metadata: {
...(blocks[0].attributes.metadata || {}),
categories: pattern.categories,
patternName: pattern.name,
name: blocks[0].attributes.metadata?.name || pattern.title
}
};
}
return {
...pattern,
blocks
};
}
function getParsedPattern(pattern) {
let parsedPattern = parsedPatternCache.get(pattern);
if (!parsedPattern) {
parsedPattern = parsePattern(pattern);
parsedPatternCache.set(pattern, parsedPattern);
}
return parsedPattern;
}
function getGrammar(pattern) {
let grammarMap = grammarMapCache.get(pattern);
if (!grammarMap) {
grammarMap = (0,external_wp_blockSerializationDefaultParser_namespaceObject.parse)(pattern.content);
// Block names are null only at the top level for whitespace.
grammarMap = grammarMap.filter(block => block.blockName !== null);
grammarMapCache.set(pattern, grammarMap);
}
return grammarMap;
}
const checkAllowList = (list, item, defaultResult = null) => {
if (typeof list === 'boolean') {
return list;
}
if (Array.isArray(list)) {
// TODO: when there is a canonical way to detect that we are editing a post
// the following check should be changed to something like:
// if ( list.includes( 'core/post-content' ) && getEditorMode() === 'post-content' && item === null )
if (list.includes('core/post-content') && item === null) {
return true;
}
return list.includes(item);
}
return defaultResult;
};
const checkAllowListRecursive = (blocks, allowedBlockTypes) => {
if (typeof allowedBlockTypes === 'boolean') {
return allowedBlockTypes;
}
const blocksQueue = [...blocks];
while (blocksQueue.length > 0) {
const block = blocksQueue.shift();
const isAllowed = checkAllowList(allowedBlockTypes, block.name || block.blockName, true);
if (!isAllowed) {
return false;
}
block.innerBlocks?.forEach(innerBlock => {
blocksQueue.push(innerBlock);
});
}
return true;
};
const getAllPatternsDependants = select => state => {
return [state.settings.__experimentalBlockPatterns, state.settings.__experimentalUserPatternCategories, state.settings.__experimentalReusableBlocks, state.settings[selectBlockPatternsKey]?.(select), state.blockPatterns, unlock(select(STORE_NAME)).getReusableBlocks()];
};
function getInsertBlockTypeDependants(state, rootClientId) {
return [state.blockListSettings[rootClientId], state.blocks.byClientId.get(rootClientId), state.settings.allowedBlockTypes, state.settings.templateLock, state.blockEditingModes];
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/utils/sorting.js
/**
* Recursive stable sorting comparator function.
*
* @param {string|Function} field Field to sort by.
* @param {Array} items Items to sort.
* @param {string} order Order, 'asc' or 'desc'.
* @return {Function} Comparison function to be used in a `.sort()`.
*/
const comparator = (field, items, order) => {
return (a, b) => {
let cmpA, cmpB;
if (typeof field === 'function') {
cmpA = field(a);
cmpB = field(b);
} else {
cmpA = a[field];
cmpB = b[field];
}
if (cmpA > cmpB) {
return order === 'asc' ? 1 : -1;
} else if (cmpB > cmpA) {
return order === 'asc' ? -1 : 1;
}
const orderA = items.findIndex(item => item === a);
const orderB = items.findIndex(item => item === b);
// Stable sort: maintaining original array order
if (orderA > orderB) {
return 1;
} else if (orderB > orderA) {
return -1;
}
return 0;
};
};
/**
* Order items by a certain key.
* Supports decorator functions that allow complex picking of a comparison field.
* Sorts in ascending order by default, but supports descending as well.
* Stable sort - maintains original order of equal items.
*
* @param {Array} items Items to order.
* @param {string|Function} field Field to order by.
* @param {string} order Sorting order, `asc` or `desc`.
* @return {Array} Sorted items.
*/
function orderBy(items, field, order = 'asc') {
return items.concat().sort(comparator(field, items, order));
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/block-patterns-tab/utils.js
/**
* WordPress dependencies
*/
const INSERTER_PATTERN_TYPES = {
user: 'user',
theme: 'theme',
directory: 'directory'
};
const INSERTER_SYNC_TYPES = {
full: 'fully',
unsynced: 'unsynced'
};
const allPatternsCategory = {
name: 'allPatterns',
label: (0,external_wp_i18n_namespaceObject._x)('All', 'patterns')
};
const myPatternsCategory = {
name: 'myPatterns',
label: (0,external_wp_i18n_namespaceObject.__)('My patterns')
};
function isPatternFiltered(pattern, sourceFilter, syncFilter) {
const isUserPattern = pattern.name.startsWith('core/block');
const isDirectoryPattern = pattern.source === 'core' || pattern.source?.startsWith('pattern-directory');
// If theme source selected, filter out user created patterns and those from
// the core patterns directory.
if (sourceFilter === INSERTER_PATTERN_TYPES.theme && (isUserPattern || isDirectoryPattern)) {
return true;
}
// If the directory source is selected, filter out user created patterns
// and those bundled with the theme.
if (sourceFilter === INSERTER_PATTERN_TYPES.directory && (isUserPattern || !isDirectoryPattern)) {
return true;
}
// If user source selected, filter out theme patterns.
if (sourceFilter === INSERTER_PATTERN_TYPES.user && pattern.type !== INSERTER_PATTERN_TYPES.user) {
return true;
}
// Filter by sync status.
if (syncFilter === INSERTER_SYNC_TYPES.full && pattern.syncStatus !== '') {
return true;
}
if (syncFilter === INSERTER_SYNC_TYPES.unsynced && pattern.syncStatus !== 'unsynced' && isUserPattern) {
return true;
}
return false;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/utils/object.js
/**
* Immutably sets a value inside an object. Like `lodash#set`, but returning a
* new object. Treats nullish initial values as empty objects. Clones any
* nested objects. Supports arrays, too.
*
* @param {Object} object Object to set a value in.
* @param {number|string|Array} path Path in the object to modify.
* @param {*} value New value to set.
* @return {Object} Cloned object with the new value set.
*/
function setImmutably(object, path, value) {
// Normalize path
path = Array.isArray(path) ? [...path] : [path];
// Shallowly clone the base of the object
object = Array.isArray(object) ? [...object] : {
...object
};
const leaf = path.pop();
// Traverse object from root to leaf, shallowly cloning at each level
let prev = object;
for (const key of path) {
const lvl = prev[key];
prev = prev[key] = Array.isArray(lvl) ? [...lvl] : {
...lvl
};
}
prev[leaf] = value;
return object;
}
/**
* Helper util to return a value from a certain path of the object.
* Path is specified as either:
* - a string of properties, separated by dots, for example: "x.y".
* - an array of properties, for example `[ 'x', 'y' ]`.
* You can also specify a default value in case the result is nullish.
*
* @param {Object} object Input object.
* @param {string|Array} path Path to the object property.
* @param {*} defaultValue Default value if the value at the specified path is nullish.
* @return {*} Value of the object property at the specified path.
*/
const getValueFromObjectPath = (object, path, defaultValue) => {
var _value;
const arrayPath = Array.isArray(path) ? path : path.split('.');
let value = object;
arrayPath.forEach(fieldName => {
value = value?.[fieldName];
});
return (_value = value) !== null && _value !== void 0 ? _value : defaultValue;
};
/**
* Helper util to filter out objects with duplicate values for a given property.
*
* @param {Object[]} array Array of objects to filter.
* @param {string} property Property to filter unique values by.
*
* @return {Object[]} Array of objects with unique values for the specified property.
*/
function uniqByProperty(array, property) {
const seen = new Set();
return array.filter(item => {
const value = item[property];
return seen.has(value) ? false : seen.add(value);
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/store/get-block-settings.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const blockedPaths = ['color', 'border', 'dimensions', 'typography', 'spacing'];
const deprecatedFlags = {
'color.palette': settings => settings.colors,
'color.gradients': settings => settings.gradients,
'color.custom': settings => settings.disableCustomColors === undefined ? undefined : !settings.disableCustomColors,
'color.customGradient': settings => settings.disableCustomGradients === undefined ? undefined : !settings.disableCustomGradients,
'typography.fontSizes': settings => settings.fontSizes,
'typography.customFontSize': settings => settings.disableCustomFontSizes === undefined ? undefined : !settings.disableCustomFontSizes,
'typography.lineHeight': settings => settings.enableCustomLineHeight,
'spacing.units': settings => {
if (settings.enableCustomUnits === undefined) {
return;
}
if (settings.enableCustomUnits === true) {
return ['px', 'em', 'rem', 'vh', 'vw', '%'];
}
return settings.enableCustomUnits;
},
'spacing.padding': settings => settings.enableCustomSpacing
};
const prefixedFlags = {
/*
* These were only available in the plugin
* and can be removed when the minimum WordPress version
* for the plugin is 5.9.
*/
'border.customColor': 'border.color',
'border.customStyle': 'border.style',
'border.customWidth': 'border.width',
'typography.customFontStyle': 'typography.fontStyle',
'typography.customFontWeight': 'typography.fontWeight',
'typography.customLetterSpacing': 'typography.letterSpacing',
'typography.customTextDecorations': 'typography.textDecoration',
'typography.customTextTransforms': 'typography.textTransform',
/*
* These were part of WordPress 5.8 and we need to keep them.
*/
'border.customRadius': 'border.radius',
'spacing.customMargin': 'spacing.margin',
'spacing.customPadding': 'spacing.padding',
'typography.customLineHeight': 'typography.lineHeight'
};
/**
* Remove `custom` prefixes for flags that did not land in 5.8.
*
* This provides continued support for `custom` prefixed properties. It will
* be removed once third party devs have had sufficient time to update themes,
* plugins, etc.
*
* @see https://github.com/WordPress/gutenberg/pull/34485
*
* @param {string} path Path to desired value in settings.
* @return {string} The value for defined setting.
*/
const removeCustomPrefixes = path => {
return prefixedFlags[path] || path;
};
function getBlockSettings(state, clientId, ...paths) {
const blockName = getBlockName(state, clientId);
const candidates = [];
if (clientId) {
let id = clientId;
do {
const name = getBlockName(state, id);
if ((0,external_wp_blocks_namespaceObject.hasBlockSupport)(name, '__experimentalSettings', false)) {
candidates.push(id);
}
} while (id = state.blocks.parents.get(id));
}
return paths.map(path => {
if (blockedPaths.includes(path)) {
// eslint-disable-next-line no-console
console.warn('Top level useSetting paths are disabled. Please use a subpath to query the information needed.');
return undefined;
}
// 0. Allow third parties to filter the block's settings at runtime.
let result = (0,external_wp_hooks_namespaceObject.applyFilters)('blockEditor.useSetting.before', undefined, path, clientId, blockName);
if (undefined !== result) {
return result;
}
const normalizedPath = removeCustomPrefixes(path);
// 1. Take settings from the block instance or its ancestors.
// Start from the current block and work our way up the ancestors.
for (const candidateClientId of candidates) {
var _getValueFromObjectPa;
const candidateAtts = getBlockAttributes(state, candidateClientId);
result = (_getValueFromObjectPa = getValueFromObjectPath(candidateAtts.settings?.blocks?.[blockName], normalizedPath)) !== null && _getValueFromObjectPa !== void 0 ? _getValueFromObjectPa : getValueFromObjectPath(candidateAtts.settings, normalizedPath);
if (result !== undefined) {
// Stop the search for more distant ancestors and move on.
break;
}
}
// 2. Fall back to the settings from the block editor store (__experimentalFeatures).
const settings = getSettings(state);
if (result === undefined && blockName) {
result = getValueFromObjectPath(settings.__experimentalFeatures?.blocks?.[blockName], normalizedPath);
}
if (result === undefined) {
result = getValueFromObjectPath(settings.__experimentalFeatures, normalizedPath);
}
// Return if the setting was found in either the block instance or the store.
if (result !== undefined) {
if (external_wp_blocks_namespaceObject.__EXPERIMENTAL_PATHS_WITH_OVERRIDE[normalizedPath]) {
var _ref, _result$custom;
return (_ref = (_result$custom = result.custom) !== null && _result$custom !== void 0 ? _result$custom : result.theme) !== null && _ref !== void 0 ? _ref : result.default;
}
return result;
}
// 3. Otherwise, use deprecated settings.
const deprecatedSettingsValue = deprecatedFlags[normalizedPath]?.(settings);
if (deprecatedSettingsValue !== undefined) {
return deprecatedSettingsValue;
}
// 4. Fallback for typography.dropCap:
// This is only necessary to support typography.dropCap.
// when __experimentalFeatures are not present (core without plugin).
// To remove when __experimentalFeatures are ported to core.
return normalizedPath === 'typography.dropCap' ? true : undefined;
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/store/private-selectors.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Returns true if the block interface is hidden, or false otherwise.
*
* @param {Object} state Global application state.
*
* @return {boolean} Whether the block toolbar is hidden.
*/
function private_selectors_isBlockInterfaceHidden(state) {
return state.isBlockInterfaceHidden;
}
/**
* Gets the client ids of the last inserted blocks.
*
* @param {Object} state Global application state.
* @return {Array|undefined} Client Ids of the last inserted block(s).
*/
function getLastInsertedBlocksClientIds(state) {
return state?.lastBlockInserted?.clientIds;
}
function getBlockWithoutAttributes(state, clientId) {
return state.blocks.byClientId.get(clientId);
}
/**
* Returns true if all of the descendants of a block with the given client ID
* have an editing mode of 'disabled', or false otherwise.
*
* @param {Object} state Global application state.
* @param {string} clientId The block client ID.
*
* @return {boolean} Whether the block descendants are disabled.
*/
const isBlockSubtreeDisabled = (state, clientId) => {
const isChildSubtreeDisabled = childClientId => {
return getBlockEditingMode(state, childClientId) === 'disabled' && getBlockOrder(state, childClientId).every(isChildSubtreeDisabled);
};
return getBlockOrder(state, clientId).every(isChildSubtreeDisabled);
};
function getEnabledClientIdsTreeUnmemoized(state, rootClientId) {
const blockOrder = getBlockOrder(state, rootClientId);
const result = [];
for (const clientId of blockOrder) {
const innerBlocks = getEnabledClientIdsTreeUnmemoized(state, clientId);
if (getBlockEditingMode(state, clientId) !== 'disabled') {
result.push({
clientId,
innerBlocks
});
} else {
result.push(...innerBlocks);
}
}
return result;
}
/**
* Returns a tree of block objects with only clientID and innerBlocks set.
* Blocks with a 'disabled' editing mode are not included.
*
* @param {Object} state Global application state.
* @param {?string} rootClientId Optional root client ID of block list.
*
* @return {Object[]} Tree of block objects with only clientID and innerBlocks set.
*/
const getEnabledClientIdsTree = (0,external_wp_data_namespaceObject.createSelector)(getEnabledClientIdsTreeUnmemoized, state => [state.blocks.order, state.blockEditingModes, state.settings.templateLock, state.blockListSettings, state.editorMode]);
/**
* Returns a list of a given block's ancestors, from top to bottom. Blocks with
* a 'disabled' editing mode are excluded.
*
* @see getBlockParents
*
* @param {Object} state Global application state.
* @param {string} clientId The block client ID.
* @param {boolean} ascending Order results from bottom to top (true) or top
* to bottom (false).
*/
const getEnabledBlockParents = (0,external_wp_data_namespaceObject.createSelector)((state, clientId, ascending = false) => {
return getBlockParents(state, clientId, ascending).filter(parent => getBlockEditingMode(state, parent) !== 'disabled');
}, state => [state.blocks.parents, state.blockEditingModes, state.settings.templateLock, state.blockListSettings]);
/**
* Selector that returns the data needed to display a prompt when certain
* blocks are removed, or `false` if no such prompt is requested.
*
* @param {Object} state Global application state.
*
* @return {Object|false} Data for removal prompt display, if any.
*/
function getRemovalPromptData(state) {
return state.removalPromptData;
}
/**
* Returns true if removal prompt exists, or false otherwise.
*
* @param {Object} state Global application state.
*
* @return {boolean} Whether removal prompt exists.
*/
function getBlockRemovalRules(state) {
return state.blockRemovalRules;
}
/**
* Returns the client ID of the block settings menu that is currently open.
*
* @param {Object} state Global application state.
* @return {string|null} The client ID of the block menu that is currently open.
*/
function getOpenedBlockSettingsMenu(state) {
return state.openedBlockSettingsMenu;
}
/**
* Returns all style overrides, intended to be merged with global editor styles.
*
* Overrides are sorted to match the order of the blocks they relate to. This
* is useful to maintain correct CSS cascade order.
*
* @param {Object} state Global application state.
*
* @return {Array} An array of style ID to style override pairs.
*/
const getStyleOverrides = (0,external_wp_data_namespaceObject.createSelector)(state => {
const clientIds = getClientIdsWithDescendants(state);
const clientIdMap = clientIds.reduce((acc, clientId, index) => {
acc[clientId] = index;
return acc;
}, {});
return [...state.styleOverrides].sort((overrideA, overrideB) => {
var _clientIdMap$clientId, _clientIdMap$clientId2;
// Once the overrides Map is spread to an array, the first element
// is the key, while the second is the override itself including
// the clientId to sort by.
const [, {
clientId: clientIdA
}] = overrideA;
const [, {
clientId: clientIdB
}] = overrideB;
const aIndex = (_clientIdMap$clientId = clientIdMap[clientIdA]) !== null && _clientIdMap$clientId !== void 0 ? _clientIdMap$clientId : -1;
const bIndex = (_clientIdMap$clientId2 = clientIdMap[clientIdB]) !== null && _clientIdMap$clientId2 !== void 0 ? _clientIdMap$clientId2 : -1;
return aIndex - bIndex;
});
}, state => [state.blocks.order, state.styleOverrides]);
/** @typedef {import('./actions').InserterMediaCategory} InserterMediaCategory */
/**
* Returns the registered inserter media categories through the public API.
*
* @param {Object} state Editor state.
*
* @return {InserterMediaCategory[]} Inserter media categories.
*/
function getRegisteredInserterMediaCategories(state) {
return state.registeredInserterMediaCategories;
}
/**
* Returns an array containing the allowed inserter media categories.
* It merges the registered media categories from extenders with the
* core ones. It also takes into account the allowed `mime_types`, which
* can be altered by `upload_mimes` filter and restrict some of them.
*
* @param {Object} state Global application state.
*
* @return {InserterMediaCategory[]} Client IDs of descendants.
*/
const getInserterMediaCategories = (0,external_wp_data_namespaceObject.createSelector)(state => {
const {
settings: {
inserterMediaCategories,
allowedMimeTypes,
enableOpenverseMediaCategory
},
registeredInserterMediaCategories
} = state;
// The allowed `mime_types` can be altered by `upload_mimes` filter and restrict
// some of them. In this case we shouldn't add the category to the available media
// categories list in the inserter.
if (!inserterMediaCategories && !registeredInserterMediaCategories.length || !allowedMimeTypes) {
return;
}
const coreInserterMediaCategoriesNames = inserterMediaCategories?.map(({
name
}) => name) || [];
const mergedCategories = [...(inserterMediaCategories || []), ...(registeredInserterMediaCategories || []).filter(({
name
}) => !coreInserterMediaCategoriesNames.includes(name))];
return mergedCategories.filter(category => {
// Check if Openverse category is enabled.
if (!enableOpenverseMediaCategory && category.name === 'openverse') {
return false;
}
return Object.values(allowedMimeTypes).some(mimeType => mimeType.startsWith(`${category.mediaType}/`));
});
}, state => [state.settings.inserterMediaCategories, state.settings.allowedMimeTypes, state.settings.enableOpenverseMediaCategory, state.registeredInserterMediaCategories]);
/**
* Returns whether there is at least one allowed pattern for inner blocks children.
* This is useful for deferring the parsing of all patterns until needed.
*
* @param {Object} state Editor state.
* @param {string} [rootClientId=null] Target root client ID.
*
* @return {boolean} If there is at least one allowed pattern.
*/
const hasAllowedPatterns = (0,external_wp_data_namespaceObject.createRegistrySelector)(select => (0,external_wp_data_namespaceObject.createSelector)((state, rootClientId = null) => {
const {
getAllPatterns
} = unlock(select(STORE_NAME));
const patterns = getAllPatterns();
const {
allowedBlockTypes
} = getSettings(state);
return patterns.some(pattern => {
const {
inserter = true
} = pattern;
if (!inserter) {
return false;
}
const grammar = getGrammar(pattern);
return checkAllowListRecursive(grammar, allowedBlockTypes) && grammar.every(({
name: blockName
}) => canInsertBlockType(state, blockName, rootClientId));
});
}, (state, rootClientId) => [...getAllPatternsDependants(select)(state), ...getInsertBlockTypeDependants(state, rootClientId)]));
function mapUserPattern(userPattern, __experimentalUserPatternCategories = []) {
return {
name: `core/block/${userPattern.id}`,
id: userPattern.id,
type: INSERTER_PATTERN_TYPES.user,
title: userPattern.title.raw,
categories: userPattern.wp_pattern_category.map(catId => {
const category = __experimentalUserPatternCategories.find(({
id
}) => id === catId);
return category ? category.slug : catId;
}),
content: userPattern.content.raw,
syncStatus: userPattern.wp_pattern_sync_status
};
}
const getPatternBySlug = (0,external_wp_data_namespaceObject.createRegistrySelector)(select => (0,external_wp_data_namespaceObject.createSelector)((state, patternName) => {
var _state$settings$__exp, _state$settings$selec;
// Only fetch reusable blocks if we know we need them. To do: maybe
// use the entity record API to retrieve the block by slug.
if (patternName?.startsWith('core/block/')) {
const _id = parseInt(patternName.slice('core/block/'.length), 10);
const block = unlock(select(STORE_NAME)).getReusableBlocks().find(({
id
}) => id === _id);
if (!block) {
return null;
}
return mapUserPattern(block, state.settings.__experimentalUserPatternCategories);
}
return [
// This setting is left for back compat.
...((_state$settings$__exp = state.settings.__experimentalBlockPatterns) !== null && _state$settings$__exp !== void 0 ? _state$settings$__exp : []), ...((_state$settings$selec = state.settings[selectBlockPatternsKey]?.(select)) !== null && _state$settings$selec !== void 0 ? _state$settings$selec : [])].find(({
name
}) => name === patternName);
}, (state, patternName) => patternName?.startsWith('core/block/') ? [unlock(select(STORE_NAME)).getReusableBlocks(), state.settings.__experimentalReusableBlocks] : [state.settings.__experimentalBlockPatterns, state.settings[selectBlockPatternsKey]?.(select)]));
const getAllPatterns = (0,external_wp_data_namespaceObject.createRegistrySelector)(select => (0,external_wp_data_namespaceObject.createSelector)(state => {
var _state$settings$__exp2, _state$settings$selec2;
return [...unlock(select(STORE_NAME)).getReusableBlocks().map(userPattern => mapUserPattern(userPattern, state.settings.__experimentalUserPatternCategories)),
// This setting is left for back compat.
...((_state$settings$__exp2 = state.settings.__experimentalBlockPatterns) !== null && _state$settings$__exp2 !== void 0 ? _state$settings$__exp2 : []), ...((_state$settings$selec2 = state.settings[selectBlockPatternsKey]?.(select)) !== null && _state$settings$selec2 !== void 0 ? _state$settings$selec2 : [])].filter((x, index, arr) => index === arr.findIndex(y => x.name === y.name));
}, getAllPatternsDependants(select)));
const isResolvingPatterns = (0,external_wp_data_namespaceObject.createRegistrySelector)(select => (0,external_wp_data_namespaceObject.createSelector)(state => {
const blockPatternsSelect = state.settings[selectBlockPatternsKey];
const reusableBlocksSelect = state.settings[reusableBlocksSelectKey];
return (blockPatternsSelect ? blockPatternsSelect(select) === undefined : false) || (reusableBlocksSelect ? reusableBlocksSelect(select) === undefined : false);
}, getAllPatternsDependants(select)));
const EMPTY_ARRAY = [];
const getReusableBlocks = (0,external_wp_data_namespaceObject.createRegistrySelector)(select => state => {
var _ref;
const reusableBlocksSelect = state.settings[reusableBlocksSelectKey];
return (_ref = reusableBlocksSelect ? reusableBlocksSelect(select) : state.settings.__experimentalReusableBlocks) !== null && _ref !== void 0 ? _ref : EMPTY_ARRAY;
});
/**
* Returns the element of the last element that had focus when focus left the editor canvas.
*
* @param {Object} state Block editor state.
*
* @return {Object} Element.
*/
function getLastFocus(state) {
return state.lastFocus;
}
/**
* Returns true if the user is dragging anything, or false otherwise. It is possible for a
* user to be dragging data from outside of the editor, so this selector is separate from
* the `isDraggingBlocks` selector which only returns true if the user is dragging blocks.
*
* @param {Object} state Global application state.
*
* @return {boolean} Whether user is dragging.
*/
function private_selectors_isDragging(state) {
return state.isDragging;
}
/**
* Retrieves the expanded block from the state.
*
* @param {Object} state Block editor state.
*
* @return {string|null} The client ID of the expanded block, if set.
*/
function getExpandedBlock(state) {
return state.expandedBlock;
}
/**
* Retrieves the client ID of the ancestor block that is content locking the block
* with the provided client ID.
*
* @param {Object} state Global application state.
* @param {Object} clientId Client Id of the block.
*
* @return {?string} Client ID of the ancestor block that is content locking the block.
*/
const getContentLockingParent = (0,external_wp_data_namespaceObject.createSelector)((state, clientId) => {
let current = clientId;
let result;
while (current = state.blocks.parents.get(current)) {
if (getBlockName(state, current) === 'core/block' || getTemplateLock(state, current) === 'contentOnly') {
result = current;
}
}
return result;
}, state => [state.blocks.parents, state.blockListSettings]);
/**
* Retrieves the client ID of the block that is content locked but is
* currently being temporarily edited as a non-locked block.
*
* @param {Object} state Global application state.
*
* @return {?string} The client ID of the block being temporarily edited as a non-locked block.
*/
function getTemporarilyEditingAsBlocks(state) {
return state.temporarilyEditingAsBlocks;
}
/**
* Returns the focus mode that should be reapplied when the user stops editing
* a content locked blocks as a block without locking.
*
* @param {Object} state Global application state.
*
* @return {?string} The focus mode that should be re-set when temporarily editing as blocks stops.
*/
function getTemporarilyEditingFocusModeToRevert(state) {
return state.temporarilyEditingFocusModeRevert;
}
/**
* Returns the style attributes of multiple blocks.
*
* @param {Object} state Global application state.
* @param {string[]} clientIds An array of block client IDs.
*
* @return {Object} An object where keys are client IDs and values are the corresponding block styles or undefined.
*/
const getBlockStyles = (0,external_wp_data_namespaceObject.createSelector)((state, clientIds) => clientIds.reduce((styles, clientId) => {
styles[clientId] = state.blocks.attributes.get(clientId)?.style;
return styles;
}, {}), (state, clientIds) => [...clientIds.map(clientId => state.blocks.attributes.get(clientId)?.style)]);
/**
* Returns whether zoom out mode is enabled.
*
* @param {Object} state Editor state.
*
* @return {boolean} Is zoom out mode enabled.
*/
function isZoomOutMode(state) {
return __unstableGetEditorMode(state) === 'zoom-out';
}
/**
* Retrieves the client ID of the block which contains the blocks
* acting as "sections" in the editor. This is typically the "main content"
* of the template/post.
*
* @param {Object} state Editor state.
*
* @return {string|undefined} The section root client ID or undefined if not set.
*/
function getSectionRootClientId(state) {
return state.settings?.[sectionRootClientIdKey];
}
/**
* Returns the zoom out state.
*
* @param {Object} state Global application state.
* @return {boolean} The zoom out state.
*/
function getZoomLevel(state) {
return state.zoomLevel;
}
/**
* Returns whether the editor is considered zoomed out.
*
* @param {Object} state Global application state.
* @return {boolean} Whether the editor is zoomed.
*/
function isZoomOut(state) {
return getZoomLevel(state) < 100;
}
/**
* Retrieves the client ID of the parent section block.
*
* @param {Object} state Global application state.
* @param {string} clientId Client Id of the block.
*
* @return {?string} Client ID of the ancestor block that is content locking the block.
*/
const getParentSectionBlock = (state, clientId) => {
let current = clientId;
let result;
while (!result && (current = state.blocks.parents.get(current))) {
if (isSectionBlock(state, current)) {
result = current;
}
}
return result;
};
/**
* Retrieves the client ID is a content locking parent
*
* @param {Object} state Global application state.
* @param {string} clientId Client Id of the block.
*
* @return {boolean} Whether the block is a content locking parent.
*/
function isSectionBlock(state, clientId) {
const sectionRootClientId = getSectionRootClientId(state);
const sectionClientIds = getBlockOrder(state, sectionRootClientId);
return getBlockName(state, clientId) === 'core/block' || getTemplateLock(state, clientId) === 'contentOnly' || isNavigationMode(state) && sectionClientIds.includes(clientId);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/store/selectors.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* A block selection object.
*
* @typedef {Object} WPBlockSelection
*
* @property {string} clientId A block client ID.
* @property {string} attributeKey A block attribute key.
* @property {number} offset An attribute value offset, based on the rich
* text value. See `wp.richText.create`.
*/
// Module constants.
const MILLISECONDS_PER_HOUR = 3600 * 1000;
const MILLISECONDS_PER_DAY = 24 * 3600 * 1000;
const MILLISECONDS_PER_WEEK = 7 * 24 * 3600 * 1000;
/**
* Shared reference to an empty array for cases where it is important to avoid
* returning a new array reference on every invocation, as in a connected or
* other pure component which performs `shouldComponentUpdate` check on props.
* This should be used as a last resort, since the normalized data should be
* maintained by the reducer result in state.
*
* @type {Array}
*/
const selectors_EMPTY_ARRAY = [];
/**
* Shared reference to an empty Set for cases where it is important to avoid
* returning a new Set reference on every invocation, as in a connected or
* other pure component which performs `shouldComponentUpdate` check on props.
* This should be used as a last resort, since the normalized data should be
* maintained by the reducer result in state.
*
* @type {Set}
*/
const EMPTY_SET = new Set();
const EMPTY_OBJECT = {};
/**
* Returns a block's name given its client ID, or null if no block exists with
* the client ID.
*
* @param {Object} state Editor state.
* @param {string} clientId Block client ID.
*
* @return {string} Block name.
*/
function getBlockName(state, clientId) {
const block = state.blocks.byClientId.get(clientId);
const socialLinkName = 'core/social-link';
if (external_wp_element_namespaceObject.Platform.OS !== 'web' && block?.name === socialLinkName) {
const attributes = state.blocks.attributes.get(clientId);
const {
service
} = attributes !== null && attributes !== void 0 ? attributes : {};
return service ? `${socialLinkName}-${service}` : socialLinkName;
}
return block ? block.name : null;
}
/**
* Returns whether a block is valid or not.
*
* @param {Object} state Editor state.
* @param {string} clientId Block client ID.
*
* @return {boolean} Is Valid.
*/
function isBlockValid(state, clientId) {
const block = state.blocks.byClientId.get(clientId);
return !!block && block.isValid;
}
/**
* Returns a block's attributes given its client ID, or null if no block exists with
* the client ID.
*
* @param {Object} state Editor state.
* @param {string} clientId Block client ID.
*
* @return {Object?} Block attributes.
*/
function getBlockAttributes(state, clientId) {
const block = state.blocks.byClientId.get(clientId);
if (!block) {
return null;
}
return state.blocks.attributes.get(clientId);
}
/**
* Returns a block given its client ID. This is a parsed copy of the block,
* containing its `blockName`, `clientId`, and current `attributes` state. This
* is not the block's registration settings, which must be retrieved from the
* blocks module registration store.
*
* getBlock recurses through its inner blocks until all its children blocks have
* been retrieved. Note that getBlock will not return the child inner blocks of
* an inner block controller. This is because an inner block controller syncs
* itself with its own entity, and should therefore not be included with the
* blocks of a different entity. For example, say you call `getBlocks( TP )` to
* get the blocks of a template part. If another template part is a child of TP,
* then the nested template part's child blocks will not be returned. This way,
* the template block itself is considered part of the parent, but the children
* are not.
*
* @param {Object} state Editor state.
* @param {string} clientId Block client ID.
*
* @return {Object} Parsed block object.
*/
function getBlock(state, clientId) {
if (!state.blocks.byClientId.has(clientId)) {
return null;
}
return state.blocks.tree.get(clientId);
}
const __unstableGetBlockWithoutInnerBlocks = (0,external_wp_data_namespaceObject.createSelector)((state, clientId) => {
const block = state.blocks.byClientId.get(clientId);
if (!block) {
return null;
}
return {
...block,
attributes: getBlockAttributes(state, clientId)
};
}, (state, clientId) => [state.blocks.byClientId.get(clientId), state.blocks.attributes.get(clientId)]);
/**
* Returns all block objects for the current post being edited as an array in
* the order they appear in the post. Note that this will exclude child blocks
* of nested inner block controllers.
*
* @param {Object} state Editor state.
* @param {?string} rootClientId Optional root client ID of block list.
*
* @return {Object[]} Post blocks.
*/
function getBlocks(state, rootClientId) {
const treeKey = !rootClientId || !areInnerBlocksControlled(state, rootClientId) ? rootClientId || '' : 'controlled||' + rootClientId;
return state.blocks.tree.get(treeKey)?.innerBlocks || selectors_EMPTY_ARRAY;
}
/**
* Returns a stripped down block object containing only its client ID,
* and its inner blocks' client IDs.
*
* @deprecated
*
* @param {Object} state Editor state.
* @param {string} clientId Client ID of the block to get.
*
* @return {Object} Client IDs of the post blocks.
*/
const __unstableGetClientIdWithClientIdsTree = (0,external_wp_data_namespaceObject.createSelector)((state, clientId) => {
external_wp_deprecated_default()("wp.data.select( 'core/block-editor' ).__unstableGetClientIdWithClientIdsTree", {
since: '6.3',
version: '6.5'
});
return {
clientId,
innerBlocks: __unstableGetClientIdsTree(state, clientId)
};
}, state => [state.blocks.order]);
/**
* Returns the block tree represented in the block-editor store from the
* given root, consisting of stripped down block objects containing only
* their client IDs, and their inner blocks' client IDs.
*
* @deprecated
*
* @param {Object} state Editor state.
* @param {?string} rootClientId Optional root client ID of block list.
*
* @return {Object[]} Client IDs of the post blocks.
*/
const __unstableGetClientIdsTree = (0,external_wp_data_namespaceObject.createSelector)((state, rootClientId = '') => {
external_wp_deprecated_default()("wp.data.select( 'core/block-editor' ).__unstableGetClientIdsTree", {
since: '6.3',
version: '6.5'
});
return getBlockOrder(state, rootClientId).map(clientId => __unstableGetClientIdWithClientIdsTree(state, clientId));
}, state => [state.blocks.order]);
/**
* Returns an array containing the clientIds of all descendants of the blocks
* given. Returned ids are ordered first by the order of the ids given, then
* by the order that they appear in the editor.
*
* @param {Object} state Global application state.
* @param {string|string[]} rootIds Client ID(s) for which descendant blocks are to be returned.
*
* @return {Array} Client IDs of descendants.
*/
const getClientIdsOfDescendants = (0,external_wp_data_namespaceObject.createSelector)((state, rootIds) => {
rootIds = Array.isArray(rootIds) ? [...rootIds] : [rootIds];
const ids = [];
// Add the descendants of the root blocks first.
for (const rootId of rootIds) {
const order = state.blocks.order.get(rootId);
if (order) {
ids.push(...order);
}
}
let index = 0;
// Add the descendants of the descendants, recursively.
while (index < ids.length) {
const id = ids[index];
const order = state.blocks.order.get(id);
if (order) {
ids.splice(index + 1, 0, ...order);
}
index++;
}
return ids;
}, state => [state.blocks.order]);
/**
* Returns an array containing the clientIds of the top-level blocks and
* their descendants of any depth (for nested blocks). Ids are returned
* in the same order that they appear in the editor.
*
* @param {Object} state Global application state.
*
* @return {Array} ids of top-level and descendant blocks.
*/
const getClientIdsWithDescendants = state => getClientIdsOfDescendants(state, '');
/**
* Returns the total number of blocks, or the total number of blocks with a specific name in a post.
* The number returned includes nested blocks.
*
* @param {Object} state Global application state.
* @param {?string} blockName Optional block name, if specified only blocks of that type will be counted.
*
* @return {number} Number of blocks in the post, or number of blocks with name equal to blockName.
*/
const getGlobalBlockCount = (0,external_wp_data_namespaceObject.createSelector)((state, blockName) => {
const clientIds = getClientIdsWithDescendants(state);
if (!blockName) {
return clientIds.length;
}
let count = 0;
for (const clientId of clientIds) {
const block = state.blocks.byClientId.get(clientId);
if (block.name === blockName) {
count++;
}
}
return count;
}, state => [state.blocks.order, state.blocks.byClientId]);
/**
* Returns all blocks that match a blockName. Results include nested blocks.
*
* @param {Object} state Global application state.
* @param {string[]} blockName Block name(s) for which clientIds are to be returned.
*
* @return {Array} Array of clientIds of blocks with name equal to blockName.
*/
const getBlocksByName = (0,external_wp_data_namespaceObject.createSelector)((state, blockName) => {
if (!blockName) {
return selectors_EMPTY_ARRAY;
}
const blockNames = Array.isArray(blockName) ? blockName : [blockName];
const clientIds = getClientIdsWithDescendants(state);
const foundBlocks = clientIds.filter(clientId => {
const block = state.blocks.byClientId.get(clientId);
return blockNames.includes(block.name);
});
return foundBlocks.length > 0 ? foundBlocks : selectors_EMPTY_ARRAY;
}, state => [state.blocks.order, state.blocks.byClientId]);
/**
* Returns all global blocks that match a blockName. Results include nested blocks.
*
* @deprecated
*
* @param {Object} state Global application state.
* @param {string[]} blockName Block name(s) for which clientIds are to be returned.
*
* @return {Array} Array of clientIds of blocks with name equal to blockName.
*/
function __experimentalGetGlobalBlocksByName(state, blockName) {
external_wp_deprecated_default()("wp.data.select( 'core/block-editor' ).__experimentalGetGlobalBlocksByName", {
since: '6.5',
alternative: `wp.data.select( 'core/block-editor' ).getBlocksByName`
});
return getBlocksByName(state, blockName);
}
/**
* Given an array of block client IDs, returns the corresponding array of block
* objects.
*
* @param {Object} state Editor state.
* @param {string[]} clientIds Client IDs for which blocks are to be returned.
*
* @return {WPBlock[]} Block objects.
*/
const getBlocksByClientId = (0,external_wp_data_namespaceObject.createSelector)((state, clientIds) => (Array.isArray(clientIds) ? clientIds : [clientIds]).map(clientId => getBlock(state, clientId)), (state, clientIds) => (Array.isArray(clientIds) ? clientIds : [clientIds]).map(clientId => state.blocks.tree.get(clientId)));
/**
* Given an array of block client IDs, returns the corresponding array of block
* names.
*
* @param {Object} state Editor state.
* @param {string[]} clientIds Client IDs for which block names are to be returned.
*
* @return {string[]} Block names.
*/
const getBlockNamesByClientId = (0,external_wp_data_namespaceObject.createSelector)((state, clientIds) => getBlocksByClientId(state, clientIds).filter(Boolean).map(block => block.name), (state, clientIds) => getBlocksByClientId(state, clientIds));
/**
* Returns the number of blocks currently present in the post.
*
* @param {Object} state Editor state.
* @param {?string} rootClientId Optional root client ID of block list.
*
* @return {number} Number of blocks in the post.
*/
function getBlockCount(state, rootClientId) {
return getBlockOrder(state, rootClientId).length;
}
/**
* Returns the current selection start block client ID, attribute key and text
* offset.
*
* @param {Object} state Block editor state.
*
* @return {WPBlockSelection} Selection start information.
*/
function getSelectionStart(state) {
return state.selection.selectionStart;
}
/**
* Returns the current selection end block client ID, attribute key and text
* offset.
*
* @param {Object} state Block editor state.
*
* @return {WPBlockSelection} Selection end information.
*/
function getSelectionEnd(state) {
return state.selection.selectionEnd;
}
/**
* Returns the current block selection start. This value may be null, and it
* may represent either a singular block selection or multi-selection start.
* A selection is singular if its start and end match.
*
* @param {Object} state Global application state.
*
* @return {?string} Client ID of block selection start.
*/
function getBlockSelectionStart(state) {
return state.selection.selectionStart.clientId;
}
/**
* Returns the current block selection end. This value may be null, and it
* may represent either a singular block selection or multi-selection end.
* A selection is singular if its start and end match.
*
* @param {Object} state Global application state.
*
* @return {?string} Client ID of block selection end.
*/
function getBlockSelectionEnd(state) {
return state.selection.selectionEnd.clientId;
}
/**
* Returns the number of blocks currently selected in the post.
*
* @param {Object} state Global application state.
*
* @return {number} Number of blocks selected in the post.
*/
function getSelectedBlockCount(state) {
const multiSelectedBlockCount = getMultiSelectedBlockClientIds(state).length;
if (multiSelectedBlockCount) {
return multiSelectedBlockCount;
}
return state.selection.selectionStart.clientId ? 1 : 0;
}
/**
* Returns true if there is a single selected block, or false otherwise.
*
* @param {Object} state Editor state.
*
* @return {boolean} Whether a single block is selected.
*/
function hasSelectedBlock(state) {
const {
selectionStart,
selectionEnd
} = state.selection;
return !!selectionStart.clientId && selectionStart.clientId === selectionEnd.clientId;
}
/**
* Returns the currently selected block client ID, or null if there is no
* selected block.
*
* @param {Object} state Editor state.
*
* @return {?string} Selected block client ID.
*/
function getSelectedBlockClientId(state) {
const {
selectionStart,
selectionEnd
} = state.selection;
const {
clientId
} = selectionStart;
if (!clientId || clientId !== selectionEnd.clientId) {
return null;
}
return clientId;
}
/**
* Returns the currently selected block, or null if there is no selected block.
*
* @param {Object} state Global application state.
*
* @return {?Object} Selected block.
*/
function getSelectedBlock(state) {
const clientId = getSelectedBlockClientId(state);
return clientId ? getBlock(state, clientId) : null;
}
/**
* Given a block client ID, returns the root block from which the block is
* nested, an empty string for top-level blocks, or null if the block does not
* exist.
*
* @param {Object} state Editor state.
* @param {string} clientId Block from which to find root client ID.
*
* @return {?string} Root client ID, if exists
*/
function getBlockRootClientId(state, clientId) {
var _state$blocks$parents;
return (_state$blocks$parents = state.blocks.parents.get(clientId)) !== null && _state$blocks$parents !== void 0 ? _state$blocks$parents : null;
}
/**
* Given a block client ID, returns the list of all its parents from top to bottom.
*
* @param {Object} state Editor state.
* @param {string} clientId Block from which to find root client ID.
* @param {boolean} ascending Order results from bottom to top (true) or top to bottom (false).
*
* @return {Array} ClientIDs of the parent blocks.
*/
const getBlockParents = (0,external_wp_data_namespaceObject.createSelector)((state, clientId, ascending = false) => {
const parents = [];
let current = clientId;
while (current = state.blocks.parents.get(current)) {
parents.push(current);
}
if (!parents.length) {
return selectors_EMPTY_ARRAY;
}
return ascending ? parents : parents.reverse();
}, state => [state.blocks.parents]);
/**
* Given a block client ID and a block name, returns the list of all its parents
* from top to bottom, filtered by the given name(s). For example, if passed
* 'core/group' as the blockName, it will only return parents which are group
* blocks. If passed `[ 'core/group', 'core/cover']`, as the blockName, it will
* return parents which are group blocks and parents which are cover blocks.
*
* @param {Object} state Editor state.
* @param {string} clientId Block from which to find root client ID.
* @param {string|string[]} blockName Block name(s) to filter.
* @param {boolean} ascending Order results from bottom to top (true) or top to bottom (false).
*
* @return {Array} ClientIDs of the parent blocks.
*/
const getBlockParentsByBlockName = (0,external_wp_data_namespaceObject.createSelector)((state, clientId, blockName, ascending = false) => {
const parents = getBlockParents(state, clientId, ascending);
const hasName = Array.isArray(blockName) ? name => blockName.includes(name) : name => blockName === name;
return parents.filter(id => hasName(getBlockName(state, id)));
}, state => [state.blocks.parents]);
/**
* Given a block client ID, returns the root of the hierarchy from which the block is nested, return the block itself for root level blocks.
*
* @param {Object} state Editor state.
* @param {string} clientId Block from which to find root client ID.
*
* @return {string} Root client ID
*/
function getBlockHierarchyRootClientId(state, clientId) {
let current = clientId;
let parent;
do {
parent = current;
current = state.blocks.parents.get(current);
} while (current);
return parent;
}
/**
* Given a block client ID, returns the lowest common ancestor with selected client ID.
*
* @param {Object} state Editor state.
* @param {string} clientId Block from which to find common ancestor client ID.
*
* @return {string} Common ancestor client ID or undefined
*/
function getLowestCommonAncestorWithSelectedBlock(state, clientId) {
const selectedId = getSelectedBlockClientId(state);
const clientParents = [...getBlockParents(state, clientId), clientId];
const selectedParents = [...getBlockParents(state, selectedId), selectedId];
let lowestCommonAncestor;
const maxDepth = Math.min(clientParents.length, selectedParents.length);
for (let index = 0; index < maxDepth; index++) {
if (clientParents[index] === selectedParents[index]) {
lowestCommonAncestor = clientParents[index];
} else {
break;
}
}
return lowestCommonAncestor;
}
/**
* Returns the client ID of the block adjacent one at the given reference
* startClientId and modifier directionality. Defaults start startClientId to
* the selected block, and direction as next block. Returns null if there is no
* adjacent block.
*
* @param {Object} state Editor state.
* @param {?string} startClientId Optional client ID of block from which to
* search.
* @param {?number} modifier Directionality multiplier (1 next, -1
* previous).
*
* @return {?string} Return the client ID of the block, or null if none exists.
*/
function getAdjacentBlockClientId(state, startClientId, modifier = 1) {
// Default to selected block.
if (startClientId === undefined) {
startClientId = getSelectedBlockClientId(state);
}
// Try multi-selection starting at extent based on modifier.
if (startClientId === undefined) {
if (modifier < 0) {
startClientId = getFirstMultiSelectedBlockClientId(state);
} else {
startClientId = getLastMultiSelectedBlockClientId(state);
}
}
// Validate working start client ID.
if (!startClientId) {
return null;
}
// Retrieve start block root client ID, being careful to allow the falsey
// empty string top-level root by explicitly testing against null.
const rootClientId = getBlockRootClientId(state, startClientId);
if (rootClientId === null) {
return null;
}
const {
order
} = state.blocks;
const orderSet = order.get(rootClientId);
const index = orderSet.indexOf(startClientId);
const nextIndex = index + 1 * modifier;
// Block was first in set and we're attempting to get previous.
if (nextIndex < 0) {
return null;
}
// Block was last in set and we're attempting to get next.
if (nextIndex === orderSet.length) {
return null;
}
// Assume incremented index is within the set.
return orderSet[nextIndex];
}
/**
* Returns the previous block's client ID from the given reference start ID.
* Defaults start to the selected block. Returns null if there is no previous
* block.
*
* @param {Object} state Editor state.
* @param {?string} startClientId Optional client ID of block from which to
* search.
*
* @return {?string} Adjacent block's client ID, or null if none exists.
*/
function getPreviousBlockClientId(state, startClientId) {
return getAdjacentBlockClientId(state, startClientId, -1);
}
/**
* Returns the next block's client ID from the given reference start ID.
* Defaults start to the selected block. Returns null if there is no next
* block.
*
* @param {Object} state Editor state.
* @param {?string} startClientId Optional client ID of block from which to
* search.
*
* @return {?string} Adjacent block's client ID, or null if none exists.
*/
function getNextBlockClientId(state, startClientId) {
return getAdjacentBlockClientId(state, startClientId, 1);
}
/* eslint-disable jsdoc/valid-types */
/**
* Returns the initial caret position for the selected block.
* This position is to used to position the caret properly when the selected block changes.
* If the current block is not a RichText, having initial position set to 0 means "focus block"
*
* @param {Object} state Global application state.
*
* @return {0|-1|null} Initial position.
*/
function getSelectedBlocksInitialCaretPosition(state) {
/* eslint-enable jsdoc/valid-types */
return state.initialPosition;
}
/**
* Returns the current selection set of block client IDs (multiselection or single selection).
*
* @param {Object} state Editor state.
*
* @return {Array} Multi-selected block client IDs.
*/
const getSelectedBlockClientIds = (0,external_wp_data_namespaceObject.createSelector)(state => {
const {
selectionStart,
selectionEnd
} = state.selection;
if (!selectionStart.clientId || !selectionEnd.clientId) {
return selectors_EMPTY_ARRAY;
}
if (selectionStart.clientId === selectionEnd.clientId) {
return [selectionStart.clientId];
}
// Retrieve root client ID to aid in retrieving relevant nested block
// order, being careful to allow the falsey empty string top-level root
// by explicitly testing against null.
const rootClientId = getBlockRootClientId(state, selectionStart.clientId);
if (rootClientId === null) {
return selectors_EMPTY_ARRAY;
}
const blockOrder = getBlockOrder(state, rootClientId);
const startIndex = blockOrder.indexOf(selectionStart.clientId);
const endIndex = blockOrder.indexOf(selectionEnd.clientId);
if (startIndex > endIndex) {
return blockOrder.slice(endIndex, startIndex + 1);
}
return blockOrder.slice(startIndex, endIndex + 1);
}, state => [state.blocks.order, state.selection.selectionStart.clientId, state.selection.selectionEnd.clientId]);
/**
* Returns the current multi-selection set of block client IDs, or an empty
* array if there is no multi-selection.
*
* @param {Object} state Editor state.
*
* @return {Array} Multi-selected block client IDs.
*/
function getMultiSelectedBlockClientIds(state) {
const {
selectionStart,
selectionEnd
} = state.selection;
if (selectionStart.clientId === selectionEnd.clientId) {
return selectors_EMPTY_ARRAY;
}
return getSelectedBlockClientIds(state);
}
/**
* Returns the current multi-selection set of blocks, or an empty array if
* there is no multi-selection.
*
* @param {Object} state Editor state.
*
* @return {Array} Multi-selected block objects.
*/
const getMultiSelectedBlocks = (0,external_wp_data_namespaceObject.createSelector)(state => {
const multiSelectedBlockClientIds = getMultiSelectedBlockClientIds(state);
if (!multiSelectedBlockClientIds.length) {
return selectors_EMPTY_ARRAY;
}
return multiSelectedBlockClientIds.map(clientId => getBlock(state, clientId));
}, state => [...getSelectedBlockClientIds.getDependants(state), state.blocks.byClientId, state.blocks.order, state.blocks.attributes]);
/**
* Returns the client ID of the first block in the multi-selection set, or null
* if there is no multi-selection.
*
* @param {Object} state Editor state.
*
* @return {?string} First block client ID in the multi-selection set.
*/
function getFirstMultiSelectedBlockClientId(state) {
return getMultiSelectedBlockClientIds(state)[0] || null;
}
/**
* Returns the client ID of the last block in the multi-selection set, or null
* if there is no multi-selection.
*
* @param {Object} state Editor state.
*
* @return {?string} Last block client ID in the multi-selection set.
*/
function getLastMultiSelectedBlockClientId(state) {
const selectedClientIds = getMultiSelectedBlockClientIds(state);
return selectedClientIds[selectedClientIds.length - 1] || null;
}
/**
* Returns true if a multi-selection exists, and the block corresponding to the
* specified client ID is the first block of the multi-selection set, or false
* otherwise.
*
* @param {Object} state Editor state.
* @param {string} clientId Block client ID.
*
* @return {boolean} Whether block is first in multi-selection.
*/
function isFirstMultiSelectedBlock(state, clientId) {
return getFirstMultiSelectedBlockClientId(state) === clientId;
}
/**
* Returns true if the client ID occurs within the block multi-selection, or
* false otherwise.
*
* @param {Object} state Editor state.
* @param {string} clientId Block client ID.
*
* @return {boolean} Whether block is in multi-selection set.
*/
function isBlockMultiSelected(state, clientId) {
return getMultiSelectedBlockClientIds(state).indexOf(clientId) !== -1;
}
/**
* Returns true if an ancestor of the block is multi-selected, or false
* otherwise.
*
* @param {Object} state Editor state.
* @param {string} clientId Block client ID.
*
* @return {boolean} Whether an ancestor of the block is in multi-selection
* set.
*/
const isAncestorMultiSelected = (0,external_wp_data_namespaceObject.createSelector)((state, clientId) => {
let ancestorClientId = clientId;
let isMultiSelected = false;
while (ancestorClientId && !isMultiSelected) {
ancestorClientId = getBlockRootClientId(state, ancestorClientId);
isMultiSelected = isBlockMultiSelected(state, ancestorClientId);
}
return isMultiSelected;
}, state => [state.blocks.order, state.selection.selectionStart.clientId, state.selection.selectionEnd.clientId]);
/**
* Returns the client ID of the block which begins the multi-selection set, or
* null if there is no multi-selection.
*
* This is not necessarily the first client ID in the selection.
*
* @see getFirstMultiSelectedBlockClientId
*
* @param {Object} state Editor state.
*
* @return {?string} Client ID of block beginning multi-selection.
*/
function getMultiSelectedBlocksStartClientId(state) {
const {
selectionStart,
selectionEnd
} = state.selection;
if (selectionStart.clientId === selectionEnd.clientId) {
return null;
}
return selectionStart.clientId || null;
}
/**
* Returns the client ID of the block which ends the multi-selection set, or
* null if there is no multi-selection.
*
* This is not necessarily the last client ID in the selection.
*
* @see getLastMultiSelectedBlockClientId
*
* @param {Object} state Editor state.
*
* @return {?string} Client ID of block ending multi-selection.
*/
function getMultiSelectedBlocksEndClientId(state) {
const {
selectionStart,
selectionEnd
} = state.selection;
if (selectionStart.clientId === selectionEnd.clientId) {
return null;
}
return selectionEnd.clientId || null;
}
/**
* Returns true if the selection is not partial.
*
* @param {Object} state Editor state.
*
* @return {boolean} Whether the selection is mergeable.
*/
function __unstableIsFullySelected(state) {
const selectionAnchor = getSelectionStart(state);
const selectionFocus = getSelectionEnd(state);
return !selectionAnchor.attributeKey && !selectionFocus.attributeKey && typeof selectionAnchor.offset === 'undefined' && typeof selectionFocus.offset === 'undefined';
}
/**
* Returns true if the selection is collapsed.
*
* @param {Object} state Editor state.
*
* @return {boolean} Whether the selection is collapsed.
*/
function __unstableIsSelectionCollapsed(state) {
const selectionAnchor = getSelectionStart(state);
const selectionFocus = getSelectionEnd(state);
return !!selectionAnchor && !!selectionFocus && selectionAnchor.clientId === selectionFocus.clientId && selectionAnchor.attributeKey === selectionFocus.attributeKey && selectionAnchor.offset === selectionFocus.offset;
}
function __unstableSelectionHasUnmergeableBlock(state) {
return getSelectedBlockClientIds(state).some(clientId => {
const blockName = getBlockName(state, clientId);
const blockType = (0,external_wp_blocks_namespaceObject.getBlockType)(blockName);
return !blockType.merge;
});
}
/**
* Check whether the selection is mergeable.
*
* @param {Object} state Editor state.
* @param {boolean} isForward Whether to merge forwards.
*
* @return {boolean} Whether the selection is mergeable.
*/
function __unstableIsSelectionMergeable(state, isForward) {
const selectionAnchor = getSelectionStart(state);
const selectionFocus = getSelectionEnd(state);
// It's not mergeable if the start and end are within the same block.
if (selectionAnchor.clientId === selectionFocus.clientId) {
return false;
}
// It's not mergeable if there's no rich text selection.
if (!selectionAnchor.attributeKey || !selectionFocus.attributeKey || typeof selectionAnchor.offset === 'undefined' || typeof selectionFocus.offset === 'undefined') {
return false;
}
const anchorRootClientId = getBlockRootClientId(state, selectionAnchor.clientId);
const focusRootClientId = getBlockRootClientId(state, selectionFocus.clientId);
// It's not mergeable if the selection doesn't start and end in the same
// block list. Maybe in the future it should be allowed.
if (anchorRootClientId !== focusRootClientId) {
return false;
}
const blockOrder = getBlockOrder(state, anchorRootClientId);
const anchorIndex = blockOrder.indexOf(selectionAnchor.clientId);
const focusIndex = blockOrder.indexOf(selectionFocus.clientId);
// Reassign selection start and end based on order.
let selectionStart, selectionEnd;
if (anchorIndex > focusIndex) {
selectionStart = selectionFocus;
selectionEnd = selectionAnchor;
} else {
selectionStart = selectionAnchor;
selectionEnd = selectionFocus;
}
const targetBlockClientId = isForward ? selectionEnd.clientId : selectionStart.clientId;
const blockToMergeClientId = isForward ? selectionStart.clientId : selectionEnd.clientId;
const targetBlockName = getBlockName(state, targetBlockClientId);
const targetBlockType = (0,external_wp_blocks_namespaceObject.getBlockType)(targetBlockName);
if (!targetBlockType.merge) {
return false;
}
const blockToMerge = getBlock(state, blockToMergeClientId);
// It's mergeable if the blocks are of the same type.
if (blockToMerge.name === targetBlockName) {
return true;
}
// If the blocks are of a different type, try to transform the block being
// merged into the same type of block.
const blocksToMerge = (0,external_wp_blocks_namespaceObject.switchToBlockType)(blockToMerge, targetBlockName);
return blocksToMerge && blocksToMerge.length;
}
/**
* Get partial selected blocks with their content updated
* based on the selection.
*
* @param {Object} state Editor state.
*
* @return {Object[]} Updated partial selected blocks.
*/
const __unstableGetSelectedBlocksWithPartialSelection = state => {
const selectionAnchor = getSelectionStart(state);
const selectionFocus = getSelectionEnd(state);
if (selectionAnchor.clientId === selectionFocus.clientId) {
return selectors_EMPTY_ARRAY;
}
// Can't split if the selection is not set.
if (!selectionAnchor.attributeKey || !selectionFocus.attributeKey || typeof selectionAnchor.offset === 'undefined' || typeof selectionFocus.offset === 'undefined') {
return selectors_EMPTY_ARRAY;
}
const anchorRootClientId = getBlockRootClientId(state, selectionAnchor.clientId);
const focusRootClientId = getBlockRootClientId(state, selectionFocus.clientId);
// It's not splittable if the selection doesn't start and end in the same
// block list. Maybe in the future it should be allowed.
if (anchorRootClientId !== focusRootClientId) {
return selectors_EMPTY_ARRAY;
}
const blockOrder = getBlockOrder(state, anchorRootClientId);
const anchorIndex = blockOrder.indexOf(selectionAnchor.clientId);
const focusIndex = blockOrder.indexOf(selectionFocus.clientId);
// Reassign selection start and end based on order.
const [selectionStart, selectionEnd] = anchorIndex > focusIndex ? [selectionFocus, selectionAnchor] : [selectionAnchor, selectionFocus];
const blockA = getBlock(state, selectionStart.clientId);
const blockB = getBlock(state, selectionEnd.clientId);
const htmlA = blockA.attributes[selectionStart.attributeKey];
const htmlB = blockB.attributes[selectionEnd.attributeKey];
let valueA = (0,external_wp_richText_namespaceObject.create)({
html: htmlA
});
let valueB = (0,external_wp_richText_namespaceObject.create)({
html: htmlB
});
valueA = (0,external_wp_richText_namespaceObject.remove)(valueA, 0, selectionStart.offset);
valueB = (0,external_wp_richText_namespaceObject.remove)(valueB, selectionEnd.offset, valueB.text.length);
return [{
...blockA,
attributes: {
...blockA.attributes,
[selectionStart.attributeKey]: (0,external_wp_richText_namespaceObject.toHTMLString)({
value: valueA
})
}
}, {
...blockB,
attributes: {
...blockB.attributes,
[selectionEnd.attributeKey]: (0,external_wp_richText_namespaceObject.toHTMLString)({
value: valueB
})
}
}];
};
/**
* Returns an array containing all block client IDs in the editor in the order
* they appear. Optionally accepts a root client ID of the block list for which
* the order should be returned, defaulting to the top-level block order.
*
* @param {Object} state Editor state.
* @param {?string} rootClientId Optional root client ID of block list.
*
* @return {Array} Ordered client IDs of editor blocks.
*/
function getBlockOrder(state, rootClientId) {
return state.blocks.order.get(rootClientId || '') || selectors_EMPTY_ARRAY;
}
/**
* Returns the index at which the block corresponding to the specified client
* ID occurs within the block order, or `-1` if the block does not exist.
*
* @param {Object} state Editor state.
* @param {string} clientId Block client ID.
*
* @return {number} Index at which block exists in order.
*/
function getBlockIndex(state, clientId) {
const rootClientId = getBlockRootClientId(state, clientId);
return getBlockOrder(state, rootClientId).indexOf(clientId);
}
/**
* Returns true if the block corresponding to the specified client ID is
* currently selected and no multi-selection exists, or false otherwise.
*
* @param {Object} state Editor state.
* @param {string} clientId Block client ID.
*
* @return {boolean} Whether block is selected and multi-selection exists.
*/
function isBlockSelected(state, clientId) {
const {
selectionStart,
selectionEnd
} = state.selection;
if (selectionStart.clientId !== selectionEnd.clientId) {
return false;
}
return selectionStart.clientId === clientId;
}
/**
* Returns true if one of the block's inner blocks is selected.
*
* @param {Object} state Editor state.
* @param {string} clientId Block client ID.
* @param {boolean} deep Perform a deep check.
*
* @return {boolean} Whether the block has an inner block selected
*/
function hasSelectedInnerBlock(state, clientId, deep = false) {
const selectedBlockClientIds = getSelectedBlockClientIds(state);
if (!selectedBlockClientIds.length) {
return false;
}
if (deep) {
return selectedBlockClientIds.some(id =>
// Pass true because we don't care about order and it's more
// performant.
getBlockParents(state, id, true).includes(clientId));
}
return selectedBlockClientIds.some(id => getBlockRootClientId(state, id) === clientId);
}
/**
* Returns true if one of the block's inner blocks is dragged.
*
* @param {Object} state Editor state.
* @param {string} clientId Block client ID.
* @param {boolean} deep Perform a deep check.
*
* @return {boolean} Whether the block has an inner block dragged
*/
function hasDraggedInnerBlock(state, clientId, deep = false) {
return getBlockOrder(state, clientId).some(innerClientId => isBlockBeingDragged(state, innerClientId) || deep && hasDraggedInnerBlock(state, innerClientId, deep));
}
/**
* Returns true if the block corresponding to the specified client ID is
* currently selected but isn't the last of the selected blocks. Here "last"
* refers to the block sequence in the document, _not_ the sequence of
* multi-selection, which is why `state.selectionEnd` isn't used.
*
* @param {Object} state Editor state.
* @param {string} clientId Block client ID.
*
* @return {boolean} Whether block is selected and not the last in the
* selection.
*/
function isBlockWithinSelection(state, clientId) {
if (!clientId) {
return false;
}
const clientIds = getMultiSelectedBlockClientIds(state);
const index = clientIds.indexOf(clientId);
return index > -1 && index < clientIds.length - 1;
}
/**
* Returns true if a multi-selection has been made, or false otherwise.
*
* @param {Object} state Editor state.
*
* @return {boolean} Whether multi-selection has been made.
*/
function hasMultiSelection(state) {
const {
selectionStart,
selectionEnd
} = state.selection;
return selectionStart.clientId !== selectionEnd.clientId;
}
/**
* Whether in the process of multi-selecting or not. This flag is only true
* while the multi-selection is being selected (by mouse move), and is false
* once the multi-selection has been settled.
*
* @see hasMultiSelection
*
* @param {Object} state Global application state.
*
* @return {boolean} True if multi-selecting, false if not.
*/
function selectors_isMultiSelecting(state) {
return state.isMultiSelecting;
}
/**
* Selector that returns if multi-selection is enabled or not.
*
* @param {Object} state Global application state.
*
* @return {boolean} True if it should be possible to multi-select blocks, false if multi-selection is disabled.
*/
function selectors_isSelectionEnabled(state) {
return state.isSelectionEnabled;
}
/**
* Returns the block's editing mode, defaulting to "visual" if not explicitly
* assigned.
*
* @param {Object} state Editor state.
* @param {string} clientId Block client ID.
*
* @return {Object} Block editing mode.
*/
function getBlockMode(state, clientId) {
return state.blocksMode[clientId] || 'visual';
}
/**
* Returns true if the user is typing, or false otherwise.
*
* @param {Object} state Global application state.
*
* @return {boolean} Whether user is typing.
*/
function selectors_isTyping(state) {
return state.isTyping;
}
/**
* Returns true if the user is dragging blocks, or false otherwise.
*
* @param {Object} state Global application state.
*
* @return {boolean} Whether user is dragging blocks.
*/
function isDraggingBlocks(state) {
return !!state.draggedBlocks.length;
}
/**
* Returns the client ids of any blocks being directly dragged.
*
* This does not include children of a parent being dragged.
*
* @param {Object} state Global application state.
*
* @return {string[]} Array of dragged block client ids.
*/
function getDraggedBlockClientIds(state) {
return state.draggedBlocks;
}
/**
* Returns whether the block is being dragged.
*
* Only returns true if the block is being directly dragged,
* not if the block is a child of a parent being dragged.
* See `isAncestorBeingDragged` for child blocks.
*
* @param {Object} state Global application state.
* @param {string} clientId Client id for block to check.
*
* @return {boolean} Whether the block is being dragged.
*/
function isBlockBeingDragged(state, clientId) {
return state.draggedBlocks.includes(clientId);
}
/**
* Returns whether a parent/ancestor of the block is being dragged.
*
* @param {Object} state Global application state.
* @param {string} clientId Client id for block to check.
*
* @return {boolean} Whether the block's ancestor is being dragged.
*/
function isAncestorBeingDragged(state, clientId) {
// Return early if no blocks are being dragged rather than
// the more expensive check for parents.
if (!isDraggingBlocks(state)) {
return false;
}
const parents = getBlockParents(state, clientId);
return parents.some(parentClientId => isBlockBeingDragged(state, parentClientId));
}
/**
* Returns true if the caret is within formatted text, or false otherwise.
*
* @deprecated
*
* @return {boolean} Whether the caret is within formatted text.
*/
function isCaretWithinFormattedText() {
external_wp_deprecated_default()('wp.data.select( "core/block-editor" ).isCaretWithinFormattedText', {
since: '6.1',
version: '6.3'
});
return false;
}
/**
* Returns the insertion point, the index at which the new inserted block would
* be placed. Defaults to the last index.
*
* @param {Object} state Editor state.
*
* @return {Object} Insertion point object with `rootClientId`, `index`.
*/
const getBlockInsertionPoint = (0,external_wp_data_namespaceObject.createSelector)(state => {
let rootClientId, index;
const {
insertionPoint,
selection: {
selectionEnd
}
} = state;
if (insertionPoint !== null) {
return insertionPoint;
}
const {
clientId
} = selectionEnd;
if (clientId) {
rootClientId = getBlockRootClientId(state, clientId) || undefined;
index = getBlockIndex(state, selectionEnd.clientId) + 1;
} else {
index = getBlockOrder(state).length;
}
return {
rootClientId,
index
};
}, state => [state.insertionPoint, state.selection.selectionEnd.clientId, state.blocks.parents, state.blocks.order]);
/**
* Returns true if we should show the block insertion point.
*
* @param {Object} state Global application state.
*
* @return {?boolean} Whether the insertion point is visible or not.
*/
function isBlockInsertionPointVisible(state) {
return state.insertionPoint !== null;
}
/**
* Returns whether the blocks matches the template or not.
*
* @param {boolean} state
* @return {?boolean} Whether the template is valid or not.
*/
function isValidTemplate(state) {
return state.template.isValid;
}
/**
* Returns the defined block template
*
* @param {boolean} state
*
* @return {?Array} Block Template.
*/
function getTemplate(state) {
return state.settings.template;
}
/**
* Returns the defined block template lock. Optionally accepts a root block
* client ID as context, otherwise defaulting to the global context.
*
* @param {Object} state Editor state.
* @param {?string} rootClientId Optional block root client ID.
*
* @return {string|false} Block Template Lock
*/
function getTemplateLock(state, rootClientId) {
var _getBlockListSettings;
if (!rootClientId) {
var _state$settings$templ;
return (_state$settings$templ = state.settings.templateLock) !== null && _state$settings$templ !== void 0 ? _state$settings$templ : false;
}
return (_getBlockListSettings = getBlockListSettings(state, rootClientId)?.templateLock) !== null && _getBlockListSettings !== void 0 ? _getBlockListSettings : false;
}
/**
* Determines if the given block type is allowed to be inserted into the block list.
* This function is not exported and not memoized because using a memoized selector
* inside another memoized selector is just a waste of time.
*
* @param {Object} state Editor state.
* @param {string|Object} blockName The block type object, e.g., the response
* from the block directory; or a string name of
* an installed block type, e.g.' core/paragraph'.
* @param {?string} rootClientId Optional root client ID of block list.
*
* @return {boolean} Whether the given block type is allowed to be inserted.
*/
const canInsertBlockTypeUnmemoized = (state, blockName, rootClientId = null) => {
let blockType;
if (blockName && 'object' === typeof blockName) {
blockType = blockName;
blockName = blockType.name;
} else {
blockType = (0,external_wp_blocks_namespaceObject.getBlockType)(blockName);
}
if (!blockType) {
return false;
}
const {
allowedBlockTypes
} = getSettings(state);
const isBlockAllowedInEditor = checkAllowList(allowedBlockTypes, blockName, true);
if (!isBlockAllowedInEditor) {
return false;
}
const isLocked = !!getTemplateLock(state, rootClientId);
if (isLocked) {
return false;
}
if (getBlockEditingMode(state, rootClientId !== null && rootClientId !== void 0 ? rootClientId : '') === 'disabled') {
return false;
}
const parentBlockListSettings = getBlockListSettings(state, rootClientId);
// The parent block doesn't have settings indicating it doesn't support
// inner blocks, return false.
if (rootClientId && parentBlockListSettings === undefined) {
return false;
}
const parentName = getBlockName(state, rootClientId);
const parentBlockType = (0,external_wp_blocks_namespaceObject.getBlockType)(parentName);
// Look at the `blockType.allowedBlocks` field to determine whether this is an allowed child block.
const parentAllowedChildBlocks = parentBlockType?.allowedBlocks;
let hasParentAllowedBlock = checkAllowList(parentAllowedChildBlocks, blockName);
// The `allowedBlocks` block list setting can further limit which blocks are allowed children.
if (hasParentAllowedBlock !== false) {
const parentAllowedBlocks = parentBlockListSettings?.allowedBlocks;
const hasParentListAllowedBlock = checkAllowList(parentAllowedBlocks, blockName);
// Never downgrade the result from `true` to `null`
if (hasParentListAllowedBlock !== null) {
hasParentAllowedBlock = hasParentListAllowedBlock;
}
}
const blockAllowedParentBlocks = blockType.parent;
const hasBlockAllowedParent = checkAllowList(blockAllowedParentBlocks, parentName);
let hasBlockAllowedAncestor = true;
const blockAllowedAncestorBlocks = blockType.ancestor;
if (blockAllowedAncestorBlocks) {
const ancestors = [rootClientId, ...getBlockParents(state, rootClientId)];
hasBlockAllowedAncestor = ancestors.some(ancestorClientId => checkAllowList(blockAllowedAncestorBlocks, getBlockName(state, ancestorClientId)));
}
const canInsert = hasBlockAllowedAncestor && (hasParentAllowedBlock === null && hasBlockAllowedParent === null || hasParentAllowedBlock === true || hasBlockAllowedParent === true);
if (!canInsert) {
return canInsert;
}
/**
* This filter is an ad-hoc solution to prevent adding template parts inside post content.
* Conceptually, having a filter inside a selector is bad pattern so this code will be
* replaced by a declarative API that doesn't the following drawbacks:
*
* Filters are not reactive: Upon switching between "template mode" and non "template mode",
* the filter and selector won't necessarily be executed again. For now, it doesn't matter much
* because you can't switch between the two modes while the inserter stays open.
*
* Filters are global: Once they're defined, they will affect all editor instances and all registries.
* An ideal API would only affect specific editor instances.
*/
return (0,external_wp_hooks_namespaceObject.applyFilters)('blockEditor.__unstableCanInsertBlockType', canInsert, blockType, rootClientId, {
// Pass bound selectors of the current registry. If we're in a nested
// context, the data will differ from the one selected from the root
// registry.
getBlock: getBlock.bind(null, state),
getBlockParentsByBlockName: getBlockParentsByBlockName.bind(null, state)
});
};
/**
* Determines if the given block type is allowed to be inserted into the block list.
*
* @param {Object} state Editor state.
* @param {string} blockName The name of the block type, e.g.' core/paragraph'.
* @param {?string} rootClientId Optional root client ID of block list.
*
* @return {boolean} Whether the given block type is allowed to be inserted.
*/
const canInsertBlockType = (0,external_wp_data_namespaceObject.createSelector)(canInsertBlockTypeUnmemoized, (state, blockName, rootClientId) => getInsertBlockTypeDependants(state, rootClientId));
/**
* Determines if the given blocks are allowed to be inserted into the block
* list.
*
* @param {Object} state Editor state.
* @param {string} clientIds The block client IDs to be inserted.
* @param {?string} rootClientId Optional root client ID of block list.
*
* @return {boolean} Whether the given blocks are allowed to be inserted.
*/
function canInsertBlocks(state, clientIds, rootClientId = null) {
return clientIds.every(id => canInsertBlockType(state, getBlockName(state, id), rootClientId));
}
/**
* Determines if the given block is allowed to be deleted.
*
* @param {Object} state Editor state.
* @param {string} clientId The block client Id.
*
* @return {boolean} Whether the given block is allowed to be removed.
*/
function canRemoveBlock(state, clientId) {
const attributes = getBlockAttributes(state, clientId);
if (attributes === null) {
return true;
}
if (attributes.lock?.remove !== undefined) {
return !attributes.lock.remove;
}
const rootClientId = getBlockRootClientId(state, clientId);
if (getTemplateLock(state, rootClientId)) {
return false;
}
return getBlockEditingMode(state, rootClientId) !== 'disabled';
}
/**
* Determines if the given blocks are allowed to be removed.
*
* @param {Object} state Editor state.
* @param {string} clientIds The block client IDs to be removed.
*
* @return {boolean} Whether the given blocks are allowed to be removed.
*/
function canRemoveBlocks(state, clientIds) {
return clientIds.every(clientId => canRemoveBlock(state, clientId));
}
/**
* Determines if the given block is allowed to be moved.
*
* @param {Object} state Editor state.
* @param {string} clientId The block client Id.
*
* @return {boolean} Whether the given block is allowed to be moved.
*/
function canMoveBlock(state, clientId) {
const attributes = getBlockAttributes(state, clientId);
if (attributes === null) {
return true;
}
if (attributes.lock?.move !== undefined) {
return !attributes.lock.move;
}
const rootClientId = getBlockRootClientId(state, clientId);
if (getTemplateLock(state, rootClientId) === 'all') {
return false;
}
return getBlockEditingMode(state, rootClientId) !== 'disabled';
}
/**
* Determines if the given blocks are allowed to be moved.
*
* @param {Object} state Editor state.
* @param {string} clientIds The block client IDs to be moved.
*
* @return {boolean} Whether the given blocks are allowed to be moved.
*/
function canMoveBlocks(state, clientIds) {
return clientIds.every(clientId => canMoveBlock(state, clientId));
}
/**
* Determines if the given block is allowed to be edited.
*
* @param {Object} state Editor state.
* @param {string} clientId The block client Id.
*
* @return {boolean} Whether the given block is allowed to be edited.
*/
function canEditBlock(state, clientId) {
const attributes = getBlockAttributes(state, clientId);
if (attributes === null) {
return true;
}
const {
lock
} = attributes;
// When the edit is true, we cannot edit the block.
return !lock?.edit;
}
/**
* Determines if the given block type can be locked/unlocked by a user.
*
* @param {Object} state Editor state.
* @param {(string|Object)} nameOrType Block name or type object.
*
* @return {boolean} Whether a given block type can be locked/unlocked.
*/
function canLockBlockType(state, nameOrType) {
if (!(0,external_wp_blocks_namespaceObject.hasBlockSupport)(nameOrType, 'lock', true)) {
return false;
}
// Use block editor settings as the default value.
return !!state.settings?.canLockBlocks;
}
/**
* Returns information about how recently and frequently a block has been inserted.
*
* @param {Object} state Global application state.
* @param {string} id A string which identifies the insert, e.g. 'core/block/12'
*
* @return {?{ time: number, count: number }} An object containing `time` which is when the last
* insert occurred as a UNIX epoch, and `count` which is
* the number of inserts that have occurred.
*/
function getInsertUsage(state, id) {
var _state$preferences$in;
return (_state$preferences$in = state.preferences.insertUsage?.[id]) !== null && _state$preferences$in !== void 0 ? _state$preferences$in : null;
}
/**
* Returns whether we can show a block type in the inserter
*
* @param {Object} state Global State
* @param {Object} blockType BlockType
* @param {?string} rootClientId Optional root client ID of block list.
*
* @return {boolean} Whether the given block type is allowed to be shown in the inserter.
*/
const canIncludeBlockTypeInInserter = (state, blockType, rootClientId) => {
if (!(0,external_wp_blocks_namespaceObject.hasBlockSupport)(blockType, 'inserter', true)) {
return false;
}
return canInsertBlockTypeUnmemoized(state, blockType.name, rootClientId);
};
/**
* Return a function to be used to tranform a block variation to an inserter item
*
* @param {Object} state Global State
* @param {Object} item Denormalized inserter item
* @return {Function} Function to transform a block variation to inserter item
*/
const getItemFromVariation = (state, item) => variation => {
const variationId = `${item.id}/${variation.name}`;
const {
time,
count = 0
} = getInsertUsage(state, variationId) || {};
return {
...item,
id: variationId,
icon: variation.icon || item.icon,
title: variation.title || item.title,
description: variation.description || item.description,
category: variation.category || item.category,
// If `example` is explicitly undefined for the variation, the preview will not be shown.
example: variation.hasOwnProperty('example') ? variation.example : item.example,
initialAttributes: {
...item.initialAttributes,
...variation.attributes
},
innerBlocks: variation.innerBlocks,
keywords: variation.keywords || item.keywords,
frecency: calculateFrecency(time, count)
};
};
/**
* Returns the calculated frecency.
*
* 'frecency' is a heuristic (https://en.wikipedia.org/wiki/Frecency)
* that combines block usage frequenty and recency.
*
* @param {number} time When the last insert occurred as a UNIX epoch
* @param {number} count The number of inserts that have occurred.
*
* @return {number} The calculated frecency.
*/
const calculateFrecency = (time, count) => {
if (!time) {
return count;
}
// The selector is cached, which means Date.now() is the last time that the
// relevant state changed. This suits our needs.
const duration = Date.now() - time;
switch (true) {
case duration < MILLISECONDS_PER_HOUR:
return count * 4;
case duration < MILLISECONDS_PER_DAY:
return count * 2;
case duration < MILLISECONDS_PER_WEEK:
return count / 2;
default:
return count / 4;
}
};
/**
* Returns a function that accepts a block type and builds an item to be shown
* in a specific context. It's used for building items for Inserter and available
* block Transfroms list.
*
* @param {Object} state Editor state.
* @param {Object} options Options object for handling the building of a block type.
* @param {string} options.buildScope The scope for which the item is going to be used.
* @return {Function} Function returns an item to be shown in a specific context (Inserter|Transforms list).
*/
const buildBlockTypeItem = (state, {
buildScope = 'inserter'
}) => blockType => {
const id = blockType.name;
let isDisabled = false;
if (!(0,external_wp_blocks_namespaceObject.hasBlockSupport)(blockType.name, 'multiple', true)) {
isDisabled = getBlocksByClientId(state, getClientIdsWithDescendants(state)).some(({
name
}) => name === blockType.name);
}
const {
time,
count = 0
} = getInsertUsage(state, id) || {};
const blockItemBase = {
id,
name: blockType.name,
title: blockType.title,
icon: blockType.icon,
isDisabled,
frecency: calculateFrecency(time, count)
};
if (buildScope === 'transform') {
return blockItemBase;
}
const inserterVariations = (0,external_wp_blocks_namespaceObject.getBlockVariations)(blockType.name, 'inserter');
return {
...blockItemBase,
initialAttributes: {},
description: blockType.description,
category: blockType.category,
keywords: blockType.keywords,
variations: inserterVariations,
example: blockType.example,
utility: 1 // Deprecated.
};
};
/**
* Determines the items that appear in the inserter. Includes both static
* items (e.g. a regular block type) and dynamic items (e.g. a reusable block).
*
* Each item object contains what's necessary to display a button in the
* inserter and handle its selection.
*
* The 'frecency' property is a heuristic (https://en.wikipedia.org/wiki/Frecency)
* that combines block usage frequenty and recency.
*
* Items are returned ordered descendingly by their 'utility' and 'frecency'.
*
* @param {Object} state Editor state.
* @param {?string} rootClientId Optional root client ID of block list.
*
* @return {WPEditorInserterItem[]} Items that appear in inserter.
*
* @typedef {Object} WPEditorInserterItem
* @property {string} id Unique identifier for the item.
* @property {string} name The type of block to create.
* @property {Object} initialAttributes Attributes to pass to the newly created block.
* @property {string} title Title of the item, as it appears in the inserter.
* @property {string} icon Dashicon for the item, as it appears in the inserter.
* @property {string} category Block category that the item is associated with.
* @property {string[]} keywords Keywords that can be searched to find this item.
* @property {boolean} isDisabled Whether or not the user should be prevented from inserting
* this item.
* @property {number} frecency Heuristic that combines frequency and recency.
*/
const getInserterItems = (0,external_wp_data_namespaceObject.createRegistrySelector)(select => (0,external_wp_data_namespaceObject.createSelector)((state, rootClientId = null, options = EMPTY_OBJECT) => {
const buildReusableBlockInserterItem = reusableBlock => {
const icon = !reusableBlock.wp_pattern_sync_status ? {
src: library_symbol,
foreground: 'var(--wp-block-synced-color)'
} : library_symbol;
const id = `core/block/${reusableBlock.id}`;
const {
time,
count = 0
} = getInsertUsage(state, id) || {};
const frecency = calculateFrecency(time, count);
return {
id,
name: 'core/block',
initialAttributes: {
ref: reusableBlock.id
},
title: reusableBlock.title?.raw,
icon,
category: 'reusable',
keywords: ['reusable'],
isDisabled: false,
utility: 1,
// Deprecated.
frecency,
content: reusableBlock.content?.raw,
syncStatus: reusableBlock.wp_pattern_sync_status
};
};
const syncedPatternInserterItems = canInsertBlockTypeUnmemoized(state, 'core/block', rootClientId) ? unlock(select(STORE_NAME)).getReusableBlocks().map(buildReusableBlockInserterItem) : [];
const buildBlockTypeInserterItem = buildBlockTypeItem(state, {
buildScope: 'inserter'
});
let blockTypeInserterItems = (0,external_wp_blocks_namespaceObject.getBlockTypes)().filter(blockType => (0,external_wp_blocks_namespaceObject.hasBlockSupport)(blockType, 'inserter', true)).map(buildBlockTypeInserterItem);
if (options[withRootClientIdOptionKey]) {
blockTypeInserterItems = blockTypeInserterItems.reduce((accumulator, item) => {
item.rootClientId = rootClientId !== null && rootClientId !== void 0 ? rootClientId : '';
while (!canInsertBlockTypeUnmemoized(state, item.name, item.rootClientId)) {
if (!item.rootClientId) {
let sectionRootClientId;
try {
sectionRootClientId = getSectionRootClientId(state);
} catch (e) {}
if (sectionRootClientId && canInsertBlockTypeUnmemoized(state, item.name, sectionRootClientId)) {
item.rootClientId = sectionRootClientId;
} else {
delete item.rootClientId;
}
break;
} else {
const parentClientId = getBlockRootClientId(state, item.rootClientId);
item.rootClientId = parentClientId;
}
}
// We could also add non insertable items and gray them out.
if (item.hasOwnProperty('rootClientId')) {
accumulator.push(item);
}
return accumulator;
}, []);
} else {
blockTypeInserterItems = blockTypeInserterItems.filter(blockType => canIncludeBlockTypeInInserter(state, blockType, rootClientId));
}
const items = blockTypeInserterItems.reduce((accumulator, item) => {
const {
variations = []
} = item;
// Exclude any block type item that is to be replaced by a default variation.
if (!variations.some(({
isDefault
}) => isDefault)) {
accumulator.push(item);
}
if (variations.length) {
const variationMapper = getItemFromVariation(state, item);
accumulator.push(...variations.map(variationMapper));
}
return accumulator;
}, []);
// Ensure core blocks are prioritized in the returned results,
// because third party blocks can be registered earlier than
// the core blocks (usually by using the `init` action),
// thus affecting the display order.
// We don't sort reusable blocks as they are handled differently.
const groupByType = (blocks, block) => {
const {
core,
noncore
} = blocks;
const type = block.name.startsWith('core/') ? core : noncore;
type.push(block);
return blocks;
};
const {
core: coreItems,
noncore: nonCoreItems
} = items.reduce(groupByType, {
core: [],
noncore: []
});
const sortedBlockTypes = [...coreItems, ...nonCoreItems];
return [...sortedBlockTypes, ...syncedPatternInserterItems];
}, (state, rootClientId) => [(0,external_wp_blocks_namespaceObject.getBlockTypes)(), unlock(select(STORE_NAME)).getReusableBlocks(), state.blocks.order, state.preferences.insertUsage, ...getInsertBlockTypeDependants(state, rootClientId)]));
/**
* Determines the items that appear in the available block transforms list.
*
* Each item object contains what's necessary to display a menu item in the
* transform list and handle its selection.
*
* The 'frecency' property is a heuristic (https://en.wikipedia.org/wiki/Frecency)
* that combines block usage frequenty and recency.
*
* Items are returned ordered descendingly by their 'frecency'.
*
* @param {Object} state Editor state.
* @param {Object|Object[]} blocks Block object or array objects.
* @param {?string} rootClientId Optional root client ID of block list.
*
* @return {WPEditorTransformItem[]} Items that appear in inserter.
*
* @typedef {Object} WPEditorTransformItem
* @property {string} id Unique identifier for the item.
* @property {string} name The type of block to create.
* @property {string} title Title of the item, as it appears in the inserter.
* @property {string} icon Dashicon for the item, as it appears in the inserter.
* @property {boolean} isDisabled Whether or not the user should be prevented from inserting
* this item.
* @property {number} frecency Heuristic that combines frequency and recency.
*/
const getBlockTransformItems = (0,external_wp_data_namespaceObject.createSelector)((state, blocks, rootClientId = null) => {
const normalizedBlocks = Array.isArray(blocks) ? blocks : [blocks];
const buildBlockTypeTransformItem = buildBlockTypeItem(state, {
buildScope: 'transform'
});
const blockTypeTransformItems = (0,external_wp_blocks_namespaceObject.getBlockTypes)().filter(blockType => canIncludeBlockTypeInInserter(state, blockType, rootClientId)).map(buildBlockTypeTransformItem);
const itemsByName = Object.fromEntries(Object.entries(blockTypeTransformItems).map(([, value]) => [value.name, value]));
const possibleTransforms = (0,external_wp_blocks_namespaceObject.getPossibleBlockTransformations)(normalizedBlocks).reduce((accumulator, block) => {
if (itemsByName[block?.name]) {
accumulator.push(itemsByName[block.name]);
}
return accumulator;
}, []);
return orderBy(possibleTransforms, block => itemsByName[block.name].frecency, 'desc');
}, (state, blocks, rootClientId) => [(0,external_wp_blocks_namespaceObject.getBlockTypes)(), state.preferences.insertUsage, ...getInsertBlockTypeDependants(state, rootClientId)]);
/**
* Determines whether there are items to show in the inserter.
*
* @param {Object} state Editor state.
* @param {?string} rootClientId Optional root client ID of block list.
*
* @return {boolean} Items that appear in inserter.
*/
const hasInserterItems = (0,external_wp_data_namespaceObject.createRegistrySelector)(select => (state, rootClientId = null) => {
const hasBlockType = (0,external_wp_blocks_namespaceObject.getBlockTypes)().some(blockType => canIncludeBlockTypeInInserter(state, blockType, rootClientId));
if (hasBlockType) {
return true;
}
const hasReusableBlock = canInsertBlockTypeUnmemoized(state, 'core/block', rootClientId) && unlock(select(STORE_NAME)).getReusableBlocks().length > 0;
return hasReusableBlock;
});
/**
* Returns the list of allowed inserter blocks for inner blocks children.
*
* @param {Object} state Editor state.
* @param {?string} rootClientId Optional root client ID of block list.
*
* @return {Array?} The list of allowed block types.
*/
const getAllowedBlocks = (0,external_wp_data_namespaceObject.createRegistrySelector)(select => (0,external_wp_data_namespaceObject.createSelector)((state, rootClientId = null) => {
if (!rootClientId) {
return;
}
const blockTypes = (0,external_wp_blocks_namespaceObject.getBlockTypes)().filter(blockType => canIncludeBlockTypeInInserter(state, blockType, rootClientId));
const hasReusableBlock = canInsertBlockTypeUnmemoized(state, 'core/block', rootClientId) && unlock(select(STORE_NAME)).getReusableBlocks().length > 0;
if (hasReusableBlock) {
blockTypes.push('core/block');
}
return blockTypes;
}, (state, rootClientId) => [(0,external_wp_blocks_namespaceObject.getBlockTypes)(), unlock(select(STORE_NAME)).getReusableBlocks(), ...getInsertBlockTypeDependants(state, rootClientId)]));
const __experimentalGetAllowedBlocks = (0,external_wp_data_namespaceObject.createSelector)((state, rootClientId = null) => {
external_wp_deprecated_default()('wp.data.select( "core/block-editor" ).__experimentalGetAllowedBlocks', {
alternative: 'wp.data.select( "core/block-editor" ).getAllowedBlocks',
since: '6.2',
version: '6.4'
});
return getAllowedBlocks(state, rootClientId);
}, (state, rootClientId) => getAllowedBlocks.getDependants(state, rootClientId));
/**
* Returns the block to be directly inserted by the block appender.
*
* @param {Object} state Editor state.
* @param {?string} rootClientId Optional root client ID of block list.
*
* @return {WPDirectInsertBlock|undefined} The block type to be directly inserted.
*
* @typedef {Object} WPDirectInsertBlock
* @property {string} name The type of block.
* @property {?Object} attributes Attributes to pass to the newly created block.
* @property {?Array<string>} attributesToCopy Attributes to be copied from adjecent blocks when inserted.
*/
function getDirectInsertBlock(state, rootClientId = null) {
var _state$blockListSetti;
if (!rootClientId) {
return;
}
const {
defaultBlock,
directInsert
} = (_state$blockListSetti = state.blockListSettings[rootClientId]) !== null && _state$blockListSetti !== void 0 ? _state$blockListSetti : {};
if (!defaultBlock || !directInsert) {
return;
}
return defaultBlock;
}
function __experimentalGetDirectInsertBlock(state, rootClientId = null) {
external_wp_deprecated_default()('wp.data.select( "core/block-editor" ).__experimentalGetDirectInsertBlock', {
alternative: 'wp.data.select( "core/block-editor" ).getDirectInsertBlock',
since: '6.3',
version: '6.4'
});
return getDirectInsertBlock(state, rootClientId);
}
const __experimentalGetParsedPattern = (0,external_wp_data_namespaceObject.createRegistrySelector)(select => (state, patternName) => {
const pattern = unlock(select(STORE_NAME)).getPatternBySlug(patternName);
return pattern ? getParsedPattern(pattern) : null;
});
const getAllowedPatternsDependants = select => (state, rootClientId) => [...getAllPatternsDependants(select)(state), ...getInsertBlockTypeDependants(state, rootClientId)];
const patternsWithParsedBlocks = new WeakMap();
function enhancePatternWithParsedBlocks(pattern) {
let enhancedPattern = patternsWithParsedBlocks.get(pattern);
if (!enhancedPattern) {
enhancedPattern = {
...pattern,
get blocks() {
return getParsedPattern(pattern).blocks;
}
};
patternsWithParsedBlocks.set(pattern, enhancedPattern);
}
return enhancedPattern;
}
/**
* Returns the list of allowed patterns for inner blocks children.
*
* @param {Object} state Editor state.
* @param {?string} rootClientId Optional target root client ID.
*
* @return {Array?} The list of allowed patterns.
*/
const __experimentalGetAllowedPatterns = (0,external_wp_data_namespaceObject.createRegistrySelector)(select => {
return (0,external_wp_data_namespaceObject.createSelector)((state, rootClientId = null) => {
const {
getAllPatterns
} = unlock(select(STORE_NAME));
const patterns = getAllPatterns();
const {
allowedBlockTypes
} = getSettings(state);
const parsedPatterns = patterns.filter(({
inserter = true
}) => !!inserter).map(enhancePatternWithParsedBlocks);
const availableParsedPatterns = parsedPatterns.filter(pattern => checkAllowListRecursive(getGrammar(pattern), allowedBlockTypes));
const patternsAllowed = availableParsedPatterns.filter(pattern => getGrammar(pattern).every(({
blockName: name
}) => canInsertBlockType(state, name, rootClientId)));
return patternsAllowed;
}, getAllowedPatternsDependants(select));
});
/**
* Returns the list of patterns based on their declared `blockTypes`
* and a block's name.
* Patterns can use `blockTypes` to integrate in work flows like
* suggesting appropriate patterns in a Placeholder state(during insertion)
* or blocks transformations.
*
* @param {Object} state Editor state.
* @param {string|string[]} blockNames Block's name or array of block names to find matching pattens.
* @param {?string} rootClientId Optional target root client ID.
*
* @return {Array} The list of matched block patterns based on declared `blockTypes` and block name.
*/
const getPatternsByBlockTypes = (0,external_wp_data_namespaceObject.createRegistrySelector)(select => (0,external_wp_data_namespaceObject.createSelector)((state, blockNames, rootClientId = null) => {
if (!blockNames) {
return selectors_EMPTY_ARRAY;
}
const patterns = select(STORE_NAME).__experimentalGetAllowedPatterns(rootClientId);
const normalizedBlockNames = Array.isArray(blockNames) ? blockNames : [blockNames];
const filteredPatterns = patterns.filter(pattern => pattern?.blockTypes?.some?.(blockName => normalizedBlockNames.includes(blockName)));
if (filteredPatterns.length === 0) {
return selectors_EMPTY_ARRAY;
}
return filteredPatterns;
}, (state, blockNames, rootClientId) => getAllowedPatternsDependants(select)(state, rootClientId)));
const __experimentalGetPatternsByBlockTypes = (0,external_wp_data_namespaceObject.createRegistrySelector)(select => {
external_wp_deprecated_default()('wp.data.select( "core/block-editor" ).__experimentalGetPatternsByBlockTypes', {
alternative: 'wp.data.select( "core/block-editor" ).getPatternsByBlockTypes',
since: '6.2',
version: '6.4'
});
return select(STORE_NAME).getPatternsByBlockTypes;
});
/**
* Determines the items that appear in the available pattern transforms list.
*
* For now we only handle blocks without InnerBlocks and take into account
* the `role` property of blocks' attributes for the transformation.
*
* We return the first set of possible eligible block patterns,
* by checking the `blockTypes` property. We still have to recurse through
* block pattern's blocks and try to find matches from the selected blocks.
* Now this happens in the consumer to avoid heavy operations in the selector.
*
* @param {Object} state Editor state.
* @param {Object[]} blocks The selected blocks.
* @param {?string} rootClientId Optional root client ID of block list.
*
* @return {WPBlockPattern[]} Items that are eligible for a pattern transformation.
*/
const __experimentalGetPatternTransformItems = (0,external_wp_data_namespaceObject.createRegistrySelector)(select => (0,external_wp_data_namespaceObject.createSelector)((state, blocks, rootClientId = null) => {
if (!blocks) {
return selectors_EMPTY_ARRAY;
}
/**
* For now we only handle blocks without InnerBlocks and take into account
* the `role` property of blocks' attributes for the transformation.
* Note that the blocks have been retrieved through `getBlock`, which doesn't
* return the inner blocks of an inner block controller, so we still need
* to check for this case too.
*/
if (blocks.some(({
clientId,
innerBlocks
}) => innerBlocks.length || areInnerBlocksControlled(state, clientId))) {
return selectors_EMPTY_ARRAY;
}
// Create a Set of the selected block names that is used in patterns filtering.
const selectedBlockNames = Array.from(new Set(blocks.map(({
name
}) => name)));
/**
* Here we will return first set of possible eligible block patterns,
* by checking the `blockTypes` property. We still have to recurse through
* block pattern's blocks and try to find matches from the selected blocks.
* Now this happens in the consumer to avoid heavy operations in the selector.
*/
return select(STORE_NAME).getPatternsByBlockTypes(selectedBlockNames, rootClientId);
}, (state, blocks, rootClientId) => getAllowedPatternsDependants(select)(state, rootClientId)));
/**
* Returns the Block List settings of a block, if any exist.
*
* @param {Object} state Editor state.
* @param {?string} clientId Block client ID.
*
* @return {?Object} Block settings of the block if set.
*/
function getBlockListSettings(state, clientId) {
return state.blockListSettings[clientId];
}
/**
* Returns the editor settings.
*
* @param {Object} state Editor state.
*
* @return {Object} The editor settings object.
*/
function getSettings(state) {
return state.settings;
}
/**
* Returns true if the most recent block change is be considered persistent, or
* false otherwise. A persistent change is one committed by BlockEditorProvider
* via its `onChange` callback, in addition to `onInput`.
*
* @param {Object} state Block editor state.
*
* @return {boolean} Whether the most recent block change was persistent.
*/
function isLastBlockChangePersistent(state) {
return state.blocks.isPersistentChange;
}
/**
* Returns the block list settings for an array of blocks, if any exist.
*
* @param {Object} state Editor state.
* @param {Array} clientIds Block client IDs.
*
* @return {Object} An object where the keys are client ids and the values are
* a block list setting object.
*/
const __experimentalGetBlockListSettingsForBlocks = (0,external_wp_data_namespaceObject.createSelector)((state, clientIds = []) => {
return clientIds.reduce((blockListSettingsForBlocks, clientId) => {
if (!state.blockListSettings[clientId]) {
return blockListSettingsForBlocks;
}
return {
...blockListSettingsForBlocks,
[clientId]: state.blockListSettings[clientId]
};
}, {});
}, state => [state.blockListSettings]);
/**
* Returns the title of a given reusable block
*
* @param {Object} state Global application state.
* @param {number|string} ref The shared block's ID.
*
* @return {string} The reusable block saved title.
*/
const __experimentalGetReusableBlockTitle = (0,external_wp_data_namespaceObject.createRegistrySelector)(select => (0,external_wp_data_namespaceObject.createSelector)((state, ref) => {
external_wp_deprecated_default()("wp.data.select( 'core/block-editor' ).__experimentalGetReusableBlockTitle", {
since: '6.6',
version: '6.8'
});
const reusableBlock = unlock(select(STORE_NAME)).getReusableBlocks().find(block => block.id === ref);
if (!reusableBlock) {
return null;
}
return reusableBlock.title?.raw;
}, () => [unlock(select(STORE_NAME)).getReusableBlocks()]));
/**
* Returns true if the most recent block change is be considered ignored, or
* false otherwise. An ignored change is one not to be committed by
* BlockEditorProvider, neither via `onChange` nor `onInput`.
*
* @param {Object} state Block editor state.
*
* @return {boolean} Whether the most recent block change was ignored.
*/
function __unstableIsLastBlockChangeIgnored(state) {
// TODO: Removal Plan: Changes incurred by RECEIVE_BLOCKS should not be
// ignored if in-fact they result in a change in blocks state. The current
// need to ignore changes not a result of user interaction should be
// accounted for in the refactoring of reusable blocks as occurring within
// their own separate block editor / state (#7119).
return state.blocks.isIgnoredChange;
}
/**
* Returns the block attributes changed as a result of the last dispatched
* action.
*
* @param {Object} state Block editor state.
*
* @return {Object<string,Object>} Subsets of block attributes changed, keyed
* by block client ID.
*/
function __experimentalGetLastBlockAttributeChanges(state) {
return state.lastBlockAttributesChange;
}
/**
* Returns whether the navigation mode is enabled.
*
* @param {Object} state Editor state.
*
* @return {boolean} Is navigation mode enabled.
*/
function isNavigationMode(state) {
return state.editorMode === 'navigation';
}
/**
* Returns the current editor mode.
*
* @param {Object} state Editor state.
*
* @return {string} the editor mode.
*/
function __unstableGetEditorMode(state) {
return state.editorMode;
}
/**
* Returns whether block moving mode is enabled.
*
* @param {Object} state Editor state.
*
* @return {string} Client Id of moving block.
*/
function selectors_hasBlockMovingClientId(state) {
return state.hasBlockMovingClientId;
}
/**
* Returns true if the last change was an automatic change, false otherwise.
*
* @param {Object} state Global application state.
*
* @return {boolean} Whether the last change was automatic.
*/
function didAutomaticChange(state) {
return !!state.automaticChangeStatus;
}
/**
* Returns true if the current highlighted block matches the block clientId.
*
* @param {Object} state Global application state.
* @param {string} clientId The block to check.
*
* @return {boolean} Whether the block is currently highlighted.
*/
function isBlockHighlighted(state, clientId) {
return state.highlightedBlock === clientId;
}
/**
* Checks if a given block has controlled inner blocks.
*
* @param {Object} state Global application state.
* @param {string} clientId The block to check.
*
* @return {boolean} True if the block has controlled inner blocks.
*/
function areInnerBlocksControlled(state, clientId) {
return !!state.blocks.controlledInnerBlocks[clientId];
}
/**
* Returns the clientId for the first 'active' block of a given array of block names.
* A block is 'active' if it (or a child) is the selected block.
* Returns the first match moving up the DOM from the selected block.
*
* @param {Object} state Global application state.
* @param {string[]} validBlocksNames The names of block types to check for.
*
* @return {string} The matching block's clientId.
*/
const __experimentalGetActiveBlockIdByBlockNames = (0,external_wp_data_namespaceObject.createSelector)((state, validBlockNames) => {
if (!validBlockNames.length) {
return null;
}
// Check if selected block is a valid entity area.
const selectedBlockClientId = getSelectedBlockClientId(state);
if (validBlockNames.includes(getBlockName(state, selectedBlockClientId))) {
return selectedBlockClientId;
}
// Check if first selected block is a child of a valid entity area.
const multiSelectedBlockClientIds = getMultiSelectedBlockClientIds(state);
const entityAreaParents = getBlockParentsByBlockName(state, selectedBlockClientId || multiSelectedBlockClientIds[0], validBlockNames);
if (entityAreaParents) {
// Last parent closest/most interior.
return entityAreaParents[entityAreaParents.length - 1];
}
return null;
}, (state, validBlockNames) => [state.selection.selectionStart.clientId, state.selection.selectionEnd.clientId, validBlockNames]);
/**
* Tells if the block with the passed clientId was just inserted.
*
* @param {Object} state Global application state.
* @param {Object} clientId Client Id of the block.
* @param {?string} source Optional insertion source of the block.
* @return {boolean} True if the block matches the last block inserted from the specified source.
*/
function wasBlockJustInserted(state, clientId, source) {
const {
lastBlockInserted
} = state;
return lastBlockInserted.clientIds?.includes(clientId) && lastBlockInserted.source === source;
}
/**
* Tells if the block is visible on the canvas or not.
*
* @param {Object} state Global application state.
* @param {Object} clientId Client Id of the block.
* @return {boolean} True if the block is visible.
*/
function isBlockVisible(state, clientId) {
var _state$blockVisibilit;
return (_state$blockVisibilit = state.blockVisibility?.[clientId]) !== null && _state$blockVisibilit !== void 0 ? _state$blockVisibilit : true;
}
/**
* Returns the currently hovered block.
*
* @param {Object} state Global application state.
* @return {Object} Client Id of the hovered block.
*/
function getHoveredBlockClientId(state) {
return state.hoveredBlockClientId;
}
/**
* Returns the list of all hidden blocks.
*
* @param {Object} state Global application state.
* @return {[string]} List of hidden blocks.
*/
const __unstableGetVisibleBlocks = (0,external_wp_data_namespaceObject.createSelector)(state => {
const visibleBlocks = new Set(Object.keys(state.blockVisibility).filter(key => state.blockVisibility[key]));
if (visibleBlocks.size === 0) {
return EMPTY_SET;
}
return visibleBlocks;
}, state => [state.blockVisibility]);
function __unstableHasActiveBlockOverlayActive(state, clientId) {
// Prevent overlay on blocks with a non-default editing mode. If the mdoe is
// 'disabled' then the overlay is redundant since the block can't be
// selected. If the mode is 'contentOnly' then the overlay is redundant
// since there will be no controls to interact with once selected.
if (getBlockEditingMode(state, clientId) !== 'default') {
return false;
}
// If the block editing is locked, the block overlay is always active.
if (!canEditBlock(state, clientId)) {
return true;
}
const editorMode = __unstableGetEditorMode(state);
// In zoom-out mode, the block overlay is always active for section level blocks.
if (editorMode === 'zoom-out') {
const sectionRootClientId = getSectionRootClientId(state);
if (sectionRootClientId) {
const sectionClientIds = getBlockOrder(state, sectionRootClientId);
if (sectionClientIds?.includes(clientId)) {
return true;
}
} else if (clientId && !getBlockRootClientId(state, clientId)) {
return true;
}
}
// In navigation mode, the block overlay is active when the block is not
// selected (and doesn't contain a selected child). The same behavior is
// also enabled in all modes for blocks that have controlled children
// (reusable block, template part, navigation), unless explicitly disabled
// with `supports.__experimentalDisableBlockOverlay`.
const blockSupportDisable = (0,external_wp_blocks_namespaceObject.hasBlockSupport)(getBlockName(state, clientId), '__experimentalDisableBlockOverlay', false);
const shouldEnableIfUnselected = editorMode === 'navigation' || (blockSupportDisable ? false : areInnerBlocksControlled(state, clientId));
return shouldEnableIfUnselected && !isBlockSelected(state, clientId) && !hasSelectedInnerBlock(state, clientId, true);
}
function __unstableIsWithinBlockOverlay(state, clientId) {
let parent = state.blocks.parents.get(clientId);
while (!!parent) {
if (__unstableHasActiveBlockOverlayActive(state, parent)) {
return true;
}
parent = state.blocks.parents.get(parent);
}
return false;
}
/**
* @typedef {import('../components/block-editing-mode').BlockEditingMode} BlockEditingMode
*/
/**
* Returns the block editing mode for a given block.
*
* The mode can be one of three options:
*
* - `'disabled'`: Prevents editing the block entirely, i.e. it cannot be
* selected.
* - `'contentOnly'`: Hides all non-content UI, e.g. auxiliary controls in the
* toolbar, the block movers, block settings.
* - `'default'`: Allows editing the block as normal.
*
* Blocks can set a mode using the `useBlockEditingMode` hook.
*
* The mode is inherited by all of the block's inner blocks, unless they have
* their own mode.
*
* A template lock can also set a mode. If the template lock is `'contentOnly'`,
* the block's mode is overridden to `'contentOnly'` if the block has a content
* role attribute, or `'disabled'` otherwise.
*
* @see useBlockEditingMode
*
* @param {Object} state Global application state.
* @param {string} clientId The block client ID, or `''` for the root container.
*
* @return {BlockEditingMode} The block editing mode. One of `'disabled'`,
* `'contentOnly'`, or `'default'`.
*/
const getBlockEditingMode = (0,external_wp_data_namespaceObject.createRegistrySelector)(select => (state, clientId = '') => {
// Some selectors that call this provide `null` as the default
// rootClientId, but the default rootClientId is actually `''`.
if (clientId === null) {
clientId = '';
}
// In zoom-out mode, override the behavior set by
// __unstableSetBlockEditingMode to only allow editing the top-level
// sections.
const editorMode = __unstableGetEditorMode(state);
if (editorMode === 'zoom-out') {
const sectionRootClientId = getSectionRootClientId(state);
if (clientId === '' /* ROOT_CONTAINER_CLIENT_ID */) {
return sectionRootClientId ? 'disabled' : 'contentOnly';
}
if (clientId === sectionRootClientId) {
return 'contentOnly';
}
const sectionsClientIds = getBlockOrder(state, sectionRootClientId);
// Sections are always contentOnly.
if (sectionsClientIds?.includes(clientId)) {
return 'contentOnly';
}
return 'disabled';
}
const blockEditingMode = state.blockEditingModes.get(clientId);
if (blockEditingMode) {
return blockEditingMode;
}
if (!clientId) {
return 'default';
}
const rootClientId = getBlockRootClientId(state, clientId);
const templateLock = getTemplateLock(state, rootClientId);
if (templateLock === 'contentOnly') {
const name = getBlockName(state, clientId);
const {
hasContentRoleAttribute
} = unlock(select(external_wp_blocks_namespaceObject.store));
const isContent = hasContentRoleAttribute(name);
return isContent ? 'contentOnly' : 'disabled';
}
const parentMode = getBlockEditingMode(state, rootClientId);
return parentMode === 'contentOnly' ? 'default' : parentMode;
});
/**
* Indicates if a block is ungroupable.
* A block is ungroupable if it is a single grouping block with inner blocks.
* If a block has an `ungroup` transform, it is also ungroupable, without the
* requirement of being the default grouping block.
* Additionally a block can only be ungrouped if it has inner blocks and can
* be removed.
*
* @param {Object} state Global application state.
* @param {string} clientId Client Id of the block. If not passed the selected block's client id will be used.
* @return {boolean} True if the block is ungroupable.
*/
const isUngroupable = (0,external_wp_data_namespaceObject.createRegistrySelector)(select => (state, clientId = '') => {
const _clientId = clientId || getSelectedBlockClientId(state);
if (!_clientId) {
return false;
}
const {
getGroupingBlockName
} = select(external_wp_blocks_namespaceObject.store);
const block = getBlock(state, _clientId);
const groupingBlockName = getGroupingBlockName();
const _isUngroupable = block && (block.name === groupingBlockName || (0,external_wp_blocks_namespaceObject.getBlockType)(block.name)?.transforms?.ungroup) && !!block.innerBlocks.length;
return _isUngroupable && canRemoveBlock(state, _clientId);
});
/**
* Indicates if the provided blocks(by client ids) are groupable.
* We need to have at least one block, have a grouping block name set and
* be able to remove these blocks.
*
* @param {Object} state Global application state.
* @param {string[]} clientIds Block client ids. If not passed the selected blocks client ids will be used.
* @return {boolean} True if the blocks are groupable.
*/
const isGroupable = (0,external_wp_data_namespaceObject.createRegistrySelector)(select => (state, clientIds = selectors_EMPTY_ARRAY) => {
const {
getGroupingBlockName
} = select(external_wp_blocks_namespaceObject.store);
const groupingBlockName = getGroupingBlockName();
const _clientIds = clientIds?.length ? clientIds : getSelectedBlockClientIds(state);
const rootClientId = _clientIds?.length ? getBlockRootClientId(state, _clientIds[0]) : undefined;
const groupingBlockAvailable = canInsertBlockType(state, groupingBlockName, rootClientId);
const _isGroupable = groupingBlockAvailable && _clientIds.length;
return _isGroupable && canRemoveBlocks(state, _clientIds);
});
/**
* DO-NOT-USE in production.
* This selector is created for internal/experimental only usage and may be
* removed anytime without any warning, causing breakage on any plugin or theme invoking it.
*
* @deprecated
*
* @param {Object} state Global application state.
* @param {Object} clientId Client Id of the block.
*
* @return {?string} Client ID of the ancestor block that is content locking the block.
*/
const __unstableGetContentLockingParent = (state, clientId) => {
external_wp_deprecated_default()("wp.data.select( 'core/block-editor' ).__unstableGetContentLockingParent", {
since: '6.1',
version: '6.7'
});
return getContentLockingParent(state, clientId);
};
/**
* DO-NOT-USE in production.
* This selector is created for internal/experimental only usage and may be
* removed anytime without any warning, causing breakage on any plugin or theme invoking it.
*
* @deprecated
*
* @param {Object} state Global application state.
*/
function __unstableGetTemporarilyEditingAsBlocks(state) {
external_wp_deprecated_default()("wp.data.select( 'core/block-editor' ).__unstableGetTemporarilyEditingAsBlocks", {
since: '6.1',
version: '6.7'
});
return getTemporarilyEditingAsBlocks(state);
}
/**
* DO-NOT-USE in production.
* This selector is created for internal/experimental only usage and may be
* removed anytime without any warning, causing breakage on any plugin or theme invoking it.
*
* @deprecated
*
* @param {Object} state Global application state.
*/
function __unstableGetTemporarilyEditingFocusModeToRevert(state) {
external_wp_deprecated_default()("wp.data.select( 'core/block-editor' ).__unstableGetTemporarilyEditingFocusModeToRevert", {
since: '6.5',
version: '6.7'
});
return getTemporarilyEditingFocusModeToRevert(state);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/store/private-actions.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const castArray = maybeArray => Array.isArray(maybeArray) ? maybeArray : [maybeArray];
/**
* A list of private/experimental block editor settings that
* should not become a part of the WordPress public API.
* BlockEditorProvider will remove these settings from the
* settings object it receives.
*
* @see https://github.com/WordPress/gutenberg/pull/46131
*/
const privateSettings = ['inserterMediaCategories', 'blockInspectorAnimation'];
/**
* Action that updates the block editor settings and
* conditionally preserves the experimental ones.
*
* @param {Object} settings Updated settings
* @param {Object} options Options object.
* @param {boolean} options.stripExperimentalSettings Whether to strip experimental settings.
* @param {boolean} options.reset Whether to reset the settings.
* @return {Object} Action object
*/
function __experimentalUpdateSettings(settings, {
stripExperimentalSettings = false,
reset = false
} = {}) {
let cleanSettings = settings;
// There are no plugins in the mobile apps, so there is no
// need to strip the experimental settings:
if (stripExperimentalSettings && external_wp_element_namespaceObject.Platform.OS === 'web') {
cleanSettings = {};
for (const key in settings) {
if (!privateSettings.includes(key)) {
cleanSettings[key] = settings[key];
}
}
}
return {
type: 'UPDATE_SETTINGS',
settings: cleanSettings,
reset
};
}
/**
* Hides the block interface (eg. toolbar, outline, etc.)
*
* @return {Object} Action object.
*/
function hideBlockInterface() {
return {
type: 'HIDE_BLOCK_INTERFACE'
};
}
/**
* Shows the block interface (eg. toolbar, outline, etc.)
*
* @return {Object} Action object.
*/
function showBlockInterface() {
return {
type: 'SHOW_BLOCK_INTERFACE'
};
}
/**
* Yields action objects used in signalling that the blocks corresponding to
* the set of specified client IDs are to be removed.
*
* Compared to `removeBlocks`, this private interface exposes an additional
* parameter; see `forceRemove`.
*
* @param {string|string[]} clientIds Client IDs of blocks to remove.
* @param {boolean} selectPrevious True if the previous block
* or the immediate parent
* (if no previous block exists)
* should be selected
* when a block is removed.
* @param {boolean} forceRemove Whether to force the operation,
* bypassing any checks for certain
* block types.
*/
const privateRemoveBlocks = (clientIds, selectPrevious = true, forceRemove = false) => ({
select,
dispatch,
registry
}) => {
if (!clientIds || !clientIds.length) {
return;
}
clientIds = castArray(clientIds);
const canRemoveBlocks = select.canRemoveBlocks(clientIds);
if (!canRemoveBlocks) {
return;
}
// In certain editing contexts, we'd like to prevent accidental removal
// of important blocks. For example, in the site editor, the Query Loop
// block is deemed important. In such cases, we'll ask the user for
// confirmation that they intended to remove such block(s). However,
// the editor instance is responsible for presenting those confirmation
// prompts to the user. Any instance opting into removal prompts must
// register using `setBlockRemovalRules()`.
//
// @see https://github.com/WordPress/gutenberg/pull/51145
const rules = !forceRemove && select.getBlockRemovalRules();
if (rules) {
function flattenBlocks(blocks) {
const result = [];
const stack = [...blocks];
while (stack.length) {
const {
innerBlocks,
...block
} = stack.shift();
stack.push(...innerBlocks);
result.push(block);
}
return result;
}
const blockList = clientIds.map(select.getBlock);
const flattenedBlocks = flattenBlocks(blockList);
// Find the first message and use it.
let message;
for (const rule of rules) {
message = rule.callback(flattenedBlocks);
if (message) {
dispatch(displayBlockRemovalPrompt(clientIds, selectPrevious, message));
return;
}
}
}
if (selectPrevious) {
dispatch.selectPreviousBlock(clientIds[0], selectPrevious);
}
// We're batching these two actions because an extra `undo/redo` step can
// be created, based on whether we insert a default block or not.
registry.batch(() => {
dispatch({
type: 'REMOVE_BLOCKS',
clientIds
});
// To avoid a focus loss when removing the last block, assure there is
// always a default block if the last of the blocks have been removed.
dispatch(ensureDefaultBlock());
});
};
/**
* Action which will insert a default block insert action if there
* are no other blocks at the root of the editor. This action should be used
* in actions which may result in no blocks remaining in the editor (removal,
* replacement, etc).
*/
const ensureDefaultBlock = () => ({
select,
dispatch
}) => {
// To avoid a focus loss when removing the last block, assure there is
// always a default block if the last of the blocks have been removed.
const count = select.getBlockCount();
if (count > 0) {
return;
}
// If there's an custom appender, don't insert default block.
// We have to remember to manually move the focus elsewhere to
// prevent it from being lost though.
const {
__unstableHasCustomAppender
} = select.getSettings();
if (__unstableHasCustomAppender) {
return;
}
dispatch.insertDefaultBlock();
};
/**
* Returns an action object used in signalling that a block removal prompt must
* be displayed.
*
* Contrast with `setBlockRemovalRules`.
*
* @param {string|string[]} clientIds Client IDs of blocks to remove.
* @param {boolean} selectPrevious True if the previous block or the
* immediate parent (if no previous
* block exists) should be selected
* when a block is removed.
* @param {string} message Message to display in the prompt.
*
* @return {Object} Action object.
*/
function displayBlockRemovalPrompt(clientIds, selectPrevious, message) {
return {
type: 'DISPLAY_BLOCK_REMOVAL_PROMPT',
clientIds,
selectPrevious,
message
};
}
/**
* Returns an action object used in signalling that a block removal prompt must
* be cleared, either be cause the user has confirmed or canceled the request
* for removal.
*
* @return {Object} Action object.
*/
function clearBlockRemovalPrompt() {
return {
type: 'CLEAR_BLOCK_REMOVAL_PROMPT'
};
}
/**
* Returns an action object used to set up any rules that a block editor may
* provide in order to prevent a user from accidentally removing certain
* blocks. These rules are then used to display a confirmation prompt to the
* user. For instance, in the Site Editor, the Query Loop block is important
* enough to warrant such confirmation.
*
* IMPORTANT: Registering rules implicitly signals to the `privateRemoveBlocks`
* action that the editor will be responsible for displaying block removal
* prompts and confirming deletions. This action is meant to be used by
* component `BlockRemovalWarningModal` only.
*
* The data is a record whose keys are block types (e.g. 'core/query') and
* whose values are the explanation to be shown to users (e.g. 'Query Loop
* displays a list of posts or pages.').
*
* Contrast with `displayBlockRemovalPrompt`.
*
* @param {Record<string,string>|false} rules Block removal rules.
* @return {Object} Action object.
*/
function setBlockRemovalRules(rules = false) {
return {
type: 'SET_BLOCK_REMOVAL_RULES',
rules
};
}
/**
* Sets the client ID of the block settings menu that is currently open.
*
* @param {?string} clientId The block client ID.
* @return {Object} Action object.
*/
function setOpenedBlockSettingsMenu(clientId) {
return {
type: 'SET_OPENED_BLOCK_SETTINGS_MENU',
clientId
};
}
function setStyleOverride(id, style) {
return {
type: 'SET_STYLE_OVERRIDE',
id,
style
};
}
function deleteStyleOverride(id) {
return {
type: 'DELETE_STYLE_OVERRIDE',
id
};
}
/**
* Action that sets the element that had focus when focus leaves the editor canvas.
*
* @param {Object} lastFocus The last focused element.
*
*
* @return {Object} Action object.
*/
function setLastFocus(lastFocus = null) {
return {
type: 'LAST_FOCUS',
lastFocus
};
}
/**
* Action that stops temporarily editing as blocks.
*
* @param {string} clientId The block's clientId.
*/
function stopEditingAsBlocks(clientId) {
return ({
select,
dispatch,
registry
}) => {
const focusModeToRevert = unlock(registry.select(store)).getTemporarilyEditingFocusModeToRevert();
dispatch.__unstableMarkNextChangeAsNotPersistent();
dispatch.updateBlockAttributes(clientId, {
templateLock: 'contentOnly'
});
dispatch.updateBlockListSettings(clientId, {
...select.getBlockListSettings(clientId),
templateLock: 'contentOnly'
});
dispatch.updateSettings({
focusMode: focusModeToRevert
});
dispatch.__unstableSetTemporarilyEditingAsBlocks();
};
}
/**
* Returns an action object used in signalling that the user has begun to drag.
*
* @return {Object} Action object.
*/
function startDragging() {
return {
type: 'START_DRAGGING'
};
}
/**
* Returns an action object used in signalling that the user has stopped dragging.
*
* @return {Object} Action object.
*/
function stopDragging() {
return {
type: 'STOP_DRAGGING'
};
}
/**
* @param {string|null} clientId The block's clientId, or `null` to clear.
*
* @return {Object} Action object.
*/
function expandBlock(clientId) {
return {
type: 'SET_BLOCK_EXPANDED_IN_LIST_VIEW',
clientId
};
}
/**
* Temporarily modify/unlock the content-only block for editions.
*
* @param {string} clientId The client id of the block.
*/
const modifyContentLockBlock = clientId => ({
select,
dispatch
}) => {
dispatch.selectBlock(clientId);
dispatch.__unstableMarkNextChangeAsNotPersistent();
dispatch.updateBlockAttributes(clientId, {
templateLock: undefined
});
dispatch.updateBlockListSettings(clientId, {
...select.getBlockListSettings(clientId),
templateLock: false
});
const focusModeToRevert = select.getSettings().focusMode;
dispatch.updateSettings({
focusMode: true
});
dispatch.__unstableSetTemporarilyEditingAsBlocks(clientId, focusModeToRevert);
};
/**
* Sets the zoom level.
*
* @param {number} zoom the new zoom level
* @return {Object} Action object.
*/
function setZoomLevel(zoom = 100) {
return {
type: 'SET_ZOOM_LEVEL',
zoom
};
}
/**
* Resets the Zoom state.
* @return {Object} Action object.
*/
function resetZoomLevel() {
return {
type: 'RESET_ZOOM_LEVEL'
};
}
;// CONCATENATED MODULE: external ["wp","a11y"]
const external_wp_a11y_namespaceObject = window["wp"]["a11y"];
;// CONCATENATED MODULE: external ["wp","notices"]
const external_wp_notices_namespaceObject = window["wp"]["notices"];
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/utils/selection.js
/**
* WordPress dependencies
*/
/**
* A robust way to retain selection position through various
* transforms is to insert a special character at the position and
* then recover it.
*/
const START_OF_SELECTED_AREA = '\u0086';
/**
* Retrieve the block attribute that contains the selection position.
*
* @param {Object} blockAttributes Block attributes.
* @return {string|void} The name of the block attribute that was previously selected.
*/
function retrieveSelectedAttribute(blockAttributes) {
if (!blockAttributes) {
return;
}
return Object.keys(blockAttributes).find(name => {
const value = blockAttributes[name];
return (typeof value === 'string' || value instanceof external_wp_richText_namespaceObject.RichTextData) &&
// To do: refactor this to use rich text's selection instead, so we
// no longer have to use on this hack inserting a special character.
value.toString().indexOf(START_OF_SELECTED_AREA) !== -1;
});
}
function findRichTextAttributeKey(blockType) {
for (const [key, value] of Object.entries(blockType.attributes)) {
if (value.source === 'rich-text' || value.source === 'html') {
return key;
}
}
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/store/actions.js
/* eslint no-console: [ 'error', { allow: [ 'error', 'warn' ] } ] */
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/** @typedef {import('../components/use-on-block-drop/types').WPDropOperation} WPDropOperation */
const actions_castArray = maybeArray => Array.isArray(maybeArray) ? maybeArray : [maybeArray];
/**
* Action that resets blocks state to the specified array of blocks, taking precedence
* over any other content reflected as an edit in state.
*
* @param {Array} blocks Array of blocks.
*/
const resetBlocks = blocks => ({
dispatch
}) => {
dispatch({
type: 'RESET_BLOCKS',
blocks
});
dispatch(validateBlocksToTemplate(blocks));
};
/**
* Block validity is a function of blocks state (at the point of a
* reset) and the template setting. As a compromise to its placement
* across distinct parts of state, it is implemented here as a side
* effect of the block reset action.
*
* @param {Array} blocks Array of blocks.
*/
const validateBlocksToTemplate = blocks => ({
select,
dispatch
}) => {
const template = select.getTemplate();
const templateLock = select.getTemplateLock();
// Unlocked templates are considered always valid because they act
// as default values only.
const isBlocksValidToTemplate = !template || templateLock !== 'all' || (0,external_wp_blocks_namespaceObject.doBlocksMatchTemplate)(blocks, template);
// Update if validity has changed.
const isValidTemplate = select.isValidTemplate();
if (isBlocksValidToTemplate !== isValidTemplate) {
dispatch.setTemplateValidity(isBlocksValidToTemplate);
return isBlocksValidToTemplate;
}
};
/**
* A block selection object.
*
* @typedef {Object} WPBlockSelection
*
* @property {string} clientId A block client ID.
* @property {string} attributeKey A block attribute key.
* @property {number} offset An attribute value offset, based on the rich
* text value. See `wp.richText.create`.
*/
/**
* A selection object.
*
* @typedef {Object} WPSelection
*
* @property {WPBlockSelection} start The selection start.
* @property {WPBlockSelection} end The selection end.
*/
/* eslint-disable jsdoc/valid-types */
/**
* Returns an action object used in signalling that selection state should be
* reset to the specified selection.
*
* @param {WPBlockSelection} selectionStart The selection start.
* @param {WPBlockSelection} selectionEnd The selection end.
* @param {0|-1|null} initialPosition Initial block position.
*
* @return {Object} Action object.
*/
function resetSelection(selectionStart, selectionEnd, initialPosition) {
/* eslint-enable jsdoc/valid-types */
return {
type: 'RESET_SELECTION',
selectionStart,
selectionEnd,
initialPosition
};
}
/**
* Returns an action object used in signalling that blocks have been received.
* Unlike resetBlocks, these should be appended to the existing known set, not
* replacing.
*
* @deprecated
*
* @param {Object[]} blocks Array of block objects.
*
* @return {Object} Action object.
*/
function receiveBlocks(blocks) {
external_wp_deprecated_default()('wp.data.dispatch( "core/block-editor" ).receiveBlocks', {
since: '5.9',
alternative: 'resetBlocks or insertBlocks'
});
return {
type: 'RECEIVE_BLOCKS',
blocks
};
}
/**
* Action that updates attributes of multiple blocks with the specified client IDs.
*
* @param {string|string[]} clientIds Block client IDs.
* @param {Object} attributes Block attributes to be merged. Should be keyed by clientIds if
* uniqueByBlock is true.
* @param {boolean} uniqueByBlock true if each block in clientIds array has a unique set of attributes
* @return {Object} Action object.
*/
function updateBlockAttributes(clientIds, attributes, uniqueByBlock = false) {
return {
type: 'UPDATE_BLOCK_ATTRIBUTES',
clientIds: actions_castArray(clientIds),
attributes,
uniqueByBlock
};
}
/**
* Action that updates the block with the specified client ID.
*
* @param {string} clientId Block client ID.
* @param {Object} updates Block attributes to be merged.
*
* @return {Object} Action object.
*/
function updateBlock(clientId, updates) {
return {
type: 'UPDATE_BLOCK',
clientId,
updates
};
}
/* eslint-disable jsdoc/valid-types */
/**
* Returns an action object used in signalling that the block with the
* specified client ID has been selected, optionally accepting a position
* value reflecting its selection directionality. An initialPosition of -1
* reflects a reverse selection.
*
* @param {string} clientId Block client ID.
* @param {0|-1|null} initialPosition Optional initial position. Pass as -1 to
* reflect reverse selection.
*
* @return {Object} Action object.
*/
function selectBlock(clientId, initialPosition = 0) {
/* eslint-enable jsdoc/valid-types */
return {
type: 'SELECT_BLOCK',
initialPosition,
clientId
};
}
/**
* Returns an action object used in signalling that the block with the
* specified client ID has been hovered.
*
* @param {string} clientId Block client ID.
*
* @return {Object} Action object.
*/
function hoverBlock(clientId) {
return {
type: 'HOVER_BLOCK',
clientId
};
}
/**
* Yields action objects used in signalling that the block preceding the given
* clientId (or optionally, its first parent from bottom to top)
* should be selected.
*
* @param {string} clientId Block client ID.
* @param {boolean} fallbackToParent If true, select the first parent if there is no previous block.
*/
const selectPreviousBlock = (clientId, fallbackToParent = false) => ({
select,
dispatch
}) => {
const previousBlockClientId = select.getPreviousBlockClientId(clientId);
if (previousBlockClientId) {
dispatch.selectBlock(previousBlockClientId, -1);
} else if (fallbackToParent) {
const firstParentClientId = select.getBlockRootClientId(clientId);
if (firstParentClientId) {
dispatch.selectBlock(firstParentClientId, -1);
}
}
};
/**
* Yields action objects used in signalling that the block following the given
* clientId should be selected.
*
* @param {string} clientId Block client ID.
*/
const selectNextBlock = clientId => ({
select,
dispatch
}) => {
const nextBlockClientId = select.getNextBlockClientId(clientId);
if (nextBlockClientId) {
dispatch.selectBlock(nextBlockClientId);
}
};
/**
* Action that starts block multi-selection.
*
* @return {Object} Action object.
*/
function startMultiSelect() {
return {
type: 'START_MULTI_SELECT'
};
}
/**
* Action that stops block multi-selection.
*
* @return {Object} Action object.
*/
function stopMultiSelect() {
return {
type: 'STOP_MULTI_SELECT'
};
}
/**
* Action that changes block multi-selection.
*
* @param {string} start First block of the multi selection.
* @param {string} end Last block of the multiselection.
* @param {number|null} __experimentalInitialPosition Optional initial position. Pass as null to skip focus within editor canvas.
*/
const multiSelect = (start, end, __experimentalInitialPosition = 0) => ({
select,
dispatch
}) => {
const startBlockRootClientId = select.getBlockRootClientId(start);
const endBlockRootClientId = select.getBlockRootClientId(end);
// Only allow block multi-selections at the same level.
if (startBlockRootClientId !== endBlockRootClientId) {
return;
}
dispatch({
type: 'MULTI_SELECT',
start,
end,
initialPosition: __experimentalInitialPosition
});
const blockCount = select.getSelectedBlockCount();
(0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %s: number of selected blocks */
(0,external_wp_i18n_namespaceObject._n)('%s block selected.', '%s blocks selected.', blockCount), blockCount), 'assertive');
};
/**
* Action that clears the block selection.
*
* @return {Object} Action object.
*/
function clearSelectedBlock() {
return {
type: 'CLEAR_SELECTED_BLOCK'
};
}
/**
* Action that enables or disables block selection.
*
* @param {boolean} [isSelectionEnabled=true] Whether block selection should
* be enabled.
*
* @return {Object} Action object.
*/
function toggleSelection(isSelectionEnabled = true) {
return {
type: 'TOGGLE_SELECTION',
isSelectionEnabled
};
}
/* eslint-disable jsdoc/valid-types */
/**
* Action that replaces given blocks with one or more replacement blocks.
*
* @param {(string|string[])} clientIds Block client ID(s) to replace.
* @param {(Object|Object[])} blocks Replacement block(s).
* @param {number} indexToSelect Index of replacement block to select.
* @param {0|-1|null} initialPosition Index of caret after in the selected block after the operation.
* @param {?Object} meta Optional Meta values to be passed to the action object.
*
* @return {Object} Action object.
*/
const replaceBlocks = (clientIds, blocks, indexToSelect, initialPosition = 0, meta) => ({
select,
dispatch,
registry
}) => {
/* eslint-enable jsdoc/valid-types */
clientIds = actions_castArray(clientIds);
blocks = actions_castArray(blocks);
const rootClientId = select.getBlockRootClientId(clientIds[0]);
// Replace is valid if the new blocks can be inserted in the root block.
for (let index = 0; index < blocks.length; index++) {
const block = blocks[index];
const canInsertBlock = select.canInsertBlockType(block.name, rootClientId);
if (!canInsertBlock) {
return;
}
}
// We're batching these two actions because an extra `undo/redo` step can
// be created, based on whether we insert a default block or not.
registry.batch(() => {
dispatch({
type: 'REPLACE_BLOCKS',
clientIds,
blocks,
time: Date.now(),
indexToSelect,
initialPosition,
meta
});
// To avoid a focus loss when removing the last block, assure there is
// always a default block if the last of the blocks have been removed.
dispatch.ensureDefaultBlock();
});
};
/**
* Action that replaces a single block with one or more replacement blocks.
*
* @param {(string|string[])} clientId Block client ID to replace.
* @param {(Object|Object[])} block Replacement block(s).
*
* @return {Object} Action object.
*/
function replaceBlock(clientId, block) {
return replaceBlocks(clientId, block);
}
/**
* Higher-order action creator which, given the action type to dispatch creates
* an action creator for managing block movement.
*
* @param {string} type Action type to dispatch.
*
* @return {Function} Action creator.
*/
const createOnMove = type => (clientIds, rootClientId) => ({
select,
dispatch
}) => {
// If one of the blocks is locked or the parent is locked, we cannot move any block.
const canMoveBlocks = select.canMoveBlocks(clientIds);
if (!canMoveBlocks) {
return;
}
dispatch({
type,
clientIds: actions_castArray(clientIds),
rootClientId
});
};
const moveBlocksDown = createOnMove('MOVE_BLOCKS_DOWN');
const moveBlocksUp = createOnMove('MOVE_BLOCKS_UP');
/**
* Action that moves given blocks to a new position.
*
* @param {?string} clientIds The client IDs of the blocks.
* @param {?string} fromRootClientId Root client ID source.
* @param {?string} toRootClientId Root client ID destination.
* @param {number} index The index to move the blocks to.
*/
const moveBlocksToPosition = (clientIds, fromRootClientId = '', toRootClientId = '', index) => ({
select,
dispatch
}) => {
const canMoveBlocks = select.canMoveBlocks(clientIds);
// If one of the blocks is locked or the parent is locked, we cannot move any block.
if (!canMoveBlocks) {
return;
}
// If moving inside the same root block the move is always possible.
if (fromRootClientId !== toRootClientId) {
const canRemoveBlocks = select.canRemoveBlocks(clientIds);
// If we're moving to another block, it means we're deleting blocks from
// the original block, so we need to check if removing is possible.
if (!canRemoveBlocks) {
return;
}
const canInsertBlocks = select.canInsertBlocks(clientIds, toRootClientId);
// If moving to other parent block, the move is possible if we can insert a block of the same type inside the new parent block.
if (!canInsertBlocks) {
return;
}
}
dispatch({
type: 'MOVE_BLOCKS_TO_POSITION',
fromRootClientId,
toRootClientId,
clientIds,
index
});
};
/**
* Action that moves given block to a new position.
*
* @param {?string} clientId The client ID of the block.
* @param {?string} fromRootClientId Root client ID source.
* @param {?string} toRootClientId Root client ID destination.
* @param {number} index The index to move the block to.
*/
function moveBlockToPosition(clientId, fromRootClientId = '', toRootClientId = '', index) {
return moveBlocksToPosition([clientId], fromRootClientId, toRootClientId, index);
}
/**
* Action that inserts a single block, optionally at a specific index respective a root block list.
*
* Only allowed blocks are inserted. The action may fail silently for blocks that are not allowed or if
* a templateLock is active on the block list.
*
* @param {Object} block Block object to insert.
* @param {?number} index Index at which block should be inserted.
* @param {?string} rootClientId Optional root client ID of block list on which to insert.
* @param {?boolean} updateSelection If true block selection will be updated. If false, block selection will not change. Defaults to true.
* @param {?Object} meta Optional Meta values to be passed to the action object.
*
* @return {Object} Action object.
*/
function insertBlock(block, index, rootClientId, updateSelection, meta) {
return insertBlocks([block], index, rootClientId, updateSelection, 0, meta);
}
/* eslint-disable jsdoc/valid-types */
/**
* Action that inserts an array of blocks, optionally at a specific index respective a root block list.
*
* Only allowed blocks are inserted. The action may fail silently for blocks that are not allowed or if
* a templateLock is active on the block list.
*
* @param {Object[]} blocks Block objects to insert.
* @param {?number} index Index at which block should be inserted.
* @param {?string} rootClientId Optional root client ID of block list on which to insert.
* @param {?boolean} updateSelection If true block selection will be updated. If false, block selection will not change. Defaults to true.
* @param {0|-1|null} initialPosition Initial focus position. Setting it to null prevent focusing the inserted block.
* @param {?Object} meta Optional Meta values to be passed to the action object.
*
* @return {Object} Action object.
*/
const insertBlocks = (blocks, index, rootClientId, updateSelection = true, initialPosition = 0, meta) => ({
select,
dispatch
}) => {
/* eslint-enable jsdoc/valid-types */
if (initialPosition !== null && typeof initialPosition === 'object') {
meta = initialPosition;
initialPosition = 0;
external_wp_deprecated_default()("meta argument in wp.data.dispatch('core/block-editor')", {
since: '5.8',
hint: 'The meta argument is now the 6th argument of the function'
});
}
blocks = actions_castArray(blocks);
const allowedBlocks = [];
for (const block of blocks) {
const isValid = select.canInsertBlockType(block.name, rootClientId);
if (isValid) {
allowedBlocks.push(block);
}
}
if (allowedBlocks.length) {
dispatch({
type: 'INSERT_BLOCKS',
blocks: allowedBlocks,
index,
rootClientId,
time: Date.now(),
updateSelection,
initialPosition: updateSelection ? initialPosition : null,
meta
});
}
};
/**
* Action that shows the insertion point.
*
* @param {?string} rootClientId Optional root client ID of block list on
* which to insert.
* @param {?number} index Index at which block should be inserted.
* @param {?Object} __unstableOptions Additional options.
* @property {boolean} __unstableWithInserter Whether or not to show an inserter button.
* @property {WPDropOperation} operation The operation to perform when applied,
* either 'insert' or 'replace' for now.
*
* @return {Object} Action object.
*/
function showInsertionPoint(rootClientId, index, __unstableOptions = {}) {
const {
__unstableWithInserter,
operation,
nearestSide
} = __unstableOptions;
return {
type: 'SHOW_INSERTION_POINT',
rootClientId,
index,
__unstableWithInserter,
operation,
nearestSide
};
}
/**
* Action that hides the insertion point.
*/
const hideInsertionPoint = () => ({
select,
dispatch
}) => {
if (!select.isBlockInsertionPointVisible()) {
return;
}
dispatch({
type: 'HIDE_INSERTION_POINT'
});
};
/**
* Action that resets the template validity.
*
* @param {boolean} isValid template validity flag.
*
* @return {Object} Action object.
*/
function setTemplateValidity(isValid) {
return {
type: 'SET_TEMPLATE_VALIDITY',
isValid
};
}
/**
* Action that synchronizes the template with the list of blocks.
*
* @return {Object} Action object.
*/
const synchronizeTemplate = () => ({
select,
dispatch
}) => {
dispatch({
type: 'SYNCHRONIZE_TEMPLATE'
});
const blocks = select.getBlocks();
const template = select.getTemplate();
const updatedBlockList = (0,external_wp_blocks_namespaceObject.synchronizeBlocksWithTemplate)(blocks, template);
dispatch.resetBlocks(updatedBlockList);
};
/**
* Delete the current selection.
*
* @param {boolean} isForward
*/
const __unstableDeleteSelection = isForward => ({
registry,
select,
dispatch
}) => {
const selectionAnchor = select.getSelectionStart();
const selectionFocus = select.getSelectionEnd();
if (selectionAnchor.clientId === selectionFocus.clientId) {
return;
}
// It's not mergeable if there's no rich text selection.
if (!selectionAnchor.attributeKey || !selectionFocus.attributeKey || typeof selectionAnchor.offset === 'undefined' || typeof selectionFocus.offset === 'undefined') {
return false;
}
const anchorRootClientId = select.getBlockRootClientId(selectionAnchor.clientId);
const focusRootClientId = select.getBlockRootClientId(selectionFocus.clientId);
// It's not mergeable if the selection doesn't start and end in the same
// block list. Maybe in the future it should be allowed.
if (anchorRootClientId !== focusRootClientId) {
return;
}
const blockOrder = select.getBlockOrder(anchorRootClientId);
const anchorIndex = blockOrder.indexOf(selectionAnchor.clientId);
const focusIndex = blockOrder.indexOf(selectionFocus.clientId);
// Reassign selection start and end based on order.
let selectionStart, selectionEnd;
if (anchorIndex > focusIndex) {
selectionStart = selectionFocus;
selectionEnd = selectionAnchor;
} else {
selectionStart = selectionAnchor;
selectionEnd = selectionFocus;
}
const targetSelection = isForward ? selectionEnd : selectionStart;
const targetBlock = select.getBlock(targetSelection.clientId);
const targetBlockType = (0,external_wp_blocks_namespaceObject.getBlockType)(targetBlock.name);
if (!targetBlockType.merge) {
return;
}
const selectionA = selectionStart;
const selectionB = selectionEnd;
const blockA = select.getBlock(selectionA.clientId);
const blockB = select.getBlock(selectionB.clientId);
const htmlA = blockA.attributes[selectionA.attributeKey];
const htmlB = blockB.attributes[selectionB.attributeKey];
let valueA = (0,external_wp_richText_namespaceObject.create)({
html: htmlA
});
let valueB = (0,external_wp_richText_namespaceObject.create)({
html: htmlB
});
valueA = (0,external_wp_richText_namespaceObject.remove)(valueA, selectionA.offset, valueA.text.length);
valueB = (0,external_wp_richText_namespaceObject.insert)(valueB, START_OF_SELECTED_AREA, 0, selectionB.offset);
// Clone the blocks so we don't manipulate the original.
const cloneA = (0,external_wp_blocks_namespaceObject.cloneBlock)(blockA, {
[selectionA.attributeKey]: (0,external_wp_richText_namespaceObject.toHTMLString)({
value: valueA
})
});
const cloneB = (0,external_wp_blocks_namespaceObject.cloneBlock)(blockB, {
[selectionB.attributeKey]: (0,external_wp_richText_namespaceObject.toHTMLString)({
value: valueB
})
});
const followingBlock = isForward ? cloneA : cloneB;
// We can only merge blocks with similar types
// thus, we transform the block to merge first
const blocksWithTheSameType = blockA.name === blockB.name ? [followingBlock] : (0,external_wp_blocks_namespaceObject.switchToBlockType)(followingBlock, targetBlockType.name);
// If the block types can not match, do nothing
if (!blocksWithTheSameType || !blocksWithTheSameType.length) {
return;
}
let updatedAttributes;
if (isForward) {
const blockToMerge = blocksWithTheSameType.pop();
updatedAttributes = targetBlockType.merge(blockToMerge.attributes, cloneB.attributes);
} else {
const blockToMerge = blocksWithTheSameType.shift();
updatedAttributes = targetBlockType.merge(cloneA.attributes, blockToMerge.attributes);
}
const newAttributeKey = retrieveSelectedAttribute(updatedAttributes);
const convertedHtml = updatedAttributes[newAttributeKey];
const convertedValue = (0,external_wp_richText_namespaceObject.create)({
html: convertedHtml
});
const newOffset = convertedValue.text.indexOf(START_OF_SELECTED_AREA);
const newValue = (0,external_wp_richText_namespaceObject.remove)(convertedValue, newOffset, newOffset + 1);
const newHtml = (0,external_wp_richText_namespaceObject.toHTMLString)({
value: newValue
});
updatedAttributes[newAttributeKey] = newHtml;
const selectedBlockClientIds = select.getSelectedBlockClientIds();
const replacement = [...(isForward ? blocksWithTheSameType : []), {
// Preserve the original client ID.
...targetBlock,
attributes: {
...targetBlock.attributes,
...updatedAttributes
}
}, ...(isForward ? [] : blocksWithTheSameType)];
registry.batch(() => {
dispatch.selectionChange(targetBlock.clientId, newAttributeKey, newOffset, newOffset);
dispatch.replaceBlocks(selectedBlockClientIds, replacement, 0,
// If we don't pass the `indexToSelect` it will default to the last block.
select.getSelectedBlocksInitialCaretPosition());
});
};
/**
* Split the current selection.
* @param {?Array} blocks
*/
const __unstableSplitSelection = (blocks = []) => ({
registry,
select,
dispatch
}) => {
const selectionAnchor = select.getSelectionStart();
const selectionFocus = select.getSelectionEnd();
const anchorRootClientId = select.getBlockRootClientId(selectionAnchor.clientId);
const focusRootClientId = select.getBlockRootClientId(selectionFocus.clientId);
// It's not splittable if the selection doesn't start and end in the same
// block list. Maybe in the future it should be allowed.
if (anchorRootClientId !== focusRootClientId) {
return;
}
const blockOrder = select.getBlockOrder(anchorRootClientId);
const anchorIndex = blockOrder.indexOf(selectionAnchor.clientId);
const focusIndex = blockOrder.indexOf(selectionFocus.clientId);
// Reassign selection start and end based on order.
let selectionStart, selectionEnd;
if (anchorIndex > focusIndex) {
selectionStart = selectionFocus;
selectionEnd = selectionAnchor;
} else {
selectionStart = selectionAnchor;
selectionEnd = selectionFocus;
}
const selectionA = selectionStart;
const selectionB = selectionEnd;
const blockA = select.getBlock(selectionA.clientId);
const blockB = select.getBlock(selectionB.clientId);
const blockAType = (0,external_wp_blocks_namespaceObject.getBlockType)(blockA.name);
const blockBType = (0,external_wp_blocks_namespaceObject.getBlockType)(blockB.name);
const attributeKeyA = typeof selectionA.attributeKey === 'string' ? selectionA.attributeKey : findRichTextAttributeKey(blockAType);
const attributeKeyB = typeof selectionB.attributeKey === 'string' ? selectionB.attributeKey : findRichTextAttributeKey(blockBType);
const blockAttributes = select.getBlockAttributes(selectionA.clientId);
const bindings = blockAttributes?.metadata?.bindings;
// If the attribute is bound, don't split the selection and insert a new block instead.
if (bindings?.[attributeKeyA]) {
// Show warning if user tries to insert a block into another block with bindings.
if (blocks.length) {
const {
createWarningNotice
} = registry.dispatch(external_wp_notices_namespaceObject.store);
createWarningNotice((0,external_wp_i18n_namespaceObject.__)("Blocks can't be inserted into other blocks with bindings"), {
type: 'snackbar'
});
return;
}
dispatch.insertAfterBlock(selectionA.clientId);
return;
}
// Can't split if the selection is not set.
if (!attributeKeyA || !attributeKeyB || typeof selectionAnchor.offset === 'undefined' || typeof selectionFocus.offset === 'undefined') {
return;
}
// We can do some short-circuiting if the selection is collapsed.
if (selectionA.clientId === selectionB.clientId && attributeKeyA === attributeKeyB && selectionA.offset === selectionB.offset) {
// If an unmodified default block is selected, replace it. We don't
// want to be converting into a default block.
if (blocks.length) {
if ((0,external_wp_blocks_namespaceObject.isUnmodifiedDefaultBlock)(blockA)) {
dispatch.replaceBlocks([selectionA.clientId], blocks, blocks.length - 1, -1);
return;
}
}
// If selection is at the start or end, we can simply insert an
// empty block, provided this block has no inner blocks.
else if (!select.getBlockOrder(selectionA.clientId).length) {
function createEmpty() {
const defaultBlockName = (0,external_wp_blocks_namespaceObject.getDefaultBlockName)();
return select.canInsertBlockType(defaultBlockName, anchorRootClientId) ? (0,external_wp_blocks_namespaceObject.createBlock)(defaultBlockName) : (0,external_wp_blocks_namespaceObject.createBlock)(select.getBlockName(selectionA.clientId));
}
const length = blockAttributes[attributeKeyA].length;
if (selectionA.offset === 0 && length) {
dispatch.insertBlocks([createEmpty()], select.getBlockIndex(selectionA.clientId), anchorRootClientId, false);
return;
}
if (selectionA.offset === length) {
dispatch.insertBlocks([createEmpty()], select.getBlockIndex(selectionA.clientId) + 1, anchorRootClientId);
return;
}
}
}
const htmlA = blockA.attributes[attributeKeyA];
const htmlB = blockB.attributes[attributeKeyB];
let valueA = (0,external_wp_richText_namespaceObject.create)({
html: htmlA
});
let valueB = (0,external_wp_richText_namespaceObject.create)({
html: htmlB
});
valueA = (0,external_wp_richText_namespaceObject.remove)(valueA, selectionA.offset, valueA.text.length);
valueB = (0,external_wp_richText_namespaceObject.remove)(valueB, 0, selectionB.offset);
let head = {
// Preserve the original client ID.
...blockA,
// If both start and end are the same, should only copy innerBlocks
// once.
innerBlocks: blockA.clientId === blockB.clientId ? [] : blockA.innerBlocks,
attributes: {
...blockA.attributes,
[attributeKeyA]: (0,external_wp_richText_namespaceObject.toHTMLString)({
value: valueA
})
}
};
let tail = {
...blockB,
// Only preserve the original client ID if the end is different.
clientId: blockA.clientId === blockB.clientId ? (0,external_wp_blocks_namespaceObject.createBlock)(blockB.name).clientId : blockB.clientId,
attributes: {
...blockB.attributes,
[attributeKeyB]: (0,external_wp_richText_namespaceObject.toHTMLString)({
value: valueB
})
}
};
// When splitting a block, attempt to convert the tail block to the
// default block type. For example, when splitting a heading block, the
// tail block will be converted to a paragraph block. Note that for
// blocks such as a list item and button, this will be skipped because
// the default block type cannot be inserted.
const defaultBlockName = (0,external_wp_blocks_namespaceObject.getDefaultBlockName)();
if (
// A block is only split when the selection is within the same
// block.
blockA.clientId === blockB.clientId && defaultBlockName && tail.name !== defaultBlockName && select.canInsertBlockType(defaultBlockName, anchorRootClientId)) {
const switched = (0,external_wp_blocks_namespaceObject.switchToBlockType)(tail, defaultBlockName);
if (switched?.length === 1) {
tail = switched[0];
}
}
if (!blocks.length) {
dispatch.replaceBlocks(select.getSelectedBlockClientIds(), [head, tail]);
return;
}
let selection;
const output = [];
const clonedBlocks = [...blocks];
const firstBlock = clonedBlocks.shift();
const headType = (0,external_wp_blocks_namespaceObject.getBlockType)(head.name);
const firstBlocks = headType.merge && firstBlock.name === headType.name ? [firstBlock] : (0,external_wp_blocks_namespaceObject.switchToBlockType)(firstBlock, headType.name);
if (firstBlocks?.length) {
const first = firstBlocks.shift();
head = {
...head,
attributes: {
...head.attributes,
...headType.merge(head.attributes, first.attributes)
}
};
output.push(head);
selection = {
clientId: head.clientId,
attributeKey: attributeKeyA,
offset: (0,external_wp_richText_namespaceObject.create)({
html: head.attributes[attributeKeyA]
}).text.length
};
clonedBlocks.unshift(...firstBlocks);
} else {
if (!(0,external_wp_blocks_namespaceObject.isUnmodifiedBlock)(head)) {
output.push(head);
}
output.push(firstBlock);
}
const lastBlock = clonedBlocks.pop();
const tailType = (0,external_wp_blocks_namespaceObject.getBlockType)(tail.name);
if (clonedBlocks.length) {
output.push(...clonedBlocks);
}
if (lastBlock) {
const lastBlocks = tailType.merge && tailType.name === lastBlock.name ? [lastBlock] : (0,external_wp_blocks_namespaceObject.switchToBlockType)(lastBlock, tailType.name);
if (lastBlocks?.length) {
const last = lastBlocks.pop();
output.push({
...tail,
attributes: {
...tail.attributes,
...tailType.merge(last.attributes, tail.attributes)
}
});
output.push(...lastBlocks);
selection = {
clientId: tail.clientId,
attributeKey: attributeKeyB,
offset: (0,external_wp_richText_namespaceObject.create)({
html: last.attributes[attributeKeyB]
}).text.length
};
} else {
output.push(lastBlock);
if (!(0,external_wp_blocks_namespaceObject.isUnmodifiedBlock)(tail)) {
output.push(tail);
}
}
} else if (!(0,external_wp_blocks_namespaceObject.isUnmodifiedBlock)(tail)) {
output.push(tail);
}
registry.batch(() => {
dispatch.replaceBlocks(select.getSelectedBlockClientIds(), output, output.length - 1, 0);
if (selection) {
dispatch.selectionChange(selection.clientId, selection.attributeKey, selection.offset, selection.offset);
}
});
};
/**
* Expand the selection to cover the entire blocks, removing partial selection.
*/
const __unstableExpandSelection = () => ({
select,
dispatch
}) => {
const selectionAnchor = select.getSelectionStart();
const selectionFocus = select.getSelectionEnd();
dispatch.selectionChange({
start: {
clientId: selectionAnchor.clientId
},
end: {
clientId: selectionFocus.clientId
}
});
};
/**
* Action that merges two blocks.
*
* @param {string} firstBlockClientId Client ID of the first block to merge.
* @param {string} secondBlockClientId Client ID of the second block to merge.
*/
const mergeBlocks = (firstBlockClientId, secondBlockClientId) => ({
registry,
select,
dispatch
}) => {
const clientIdA = firstBlockClientId;
const clientIdB = secondBlockClientId;
const blockA = select.getBlock(clientIdA);
const blockAType = (0,external_wp_blocks_namespaceObject.getBlockType)(blockA.name);
if (!blockAType) {
return;
}
const blockB = select.getBlock(clientIdB);
if (!blockAType.merge && (0,external_wp_blocks_namespaceObject.getBlockSupport)(blockA.name, '__experimentalOnMerge')) {
// If there's no merge function defined, attempt merging inner
// blocks.
const blocksWithTheSameType = (0,external_wp_blocks_namespaceObject.switchToBlockType)(blockB, blockAType.name);
// Only focus the previous block if it's not mergeable.
if (blocksWithTheSameType?.length !== 1) {
dispatch.selectBlock(blockA.clientId);
return;
}
const [blockWithSameType] = blocksWithTheSameType;
if (blockWithSameType.innerBlocks.length < 1) {
dispatch.selectBlock(blockA.clientId);
return;
}
registry.batch(() => {
dispatch.insertBlocks(blockWithSameType.innerBlocks, undefined, clientIdA);
dispatch.removeBlock(clientIdB);
dispatch.selectBlock(blockWithSameType.innerBlocks[0].clientId);
// Attempt to merge the next block if it's the same type and
// same attributes. This is useful when merging a paragraph into
// a list, and the next block is also a list. If we don't merge,
// it looks like one list, but it's actually two lists. The same
// applies to other blocks such as a group with the same
// attributes.
const nextBlockClientId = select.getNextBlockClientId(clientIdA);
if (nextBlockClientId && select.getBlockName(clientIdA) === select.getBlockName(nextBlockClientId)) {
const rootAttributes = select.getBlockAttributes(clientIdA);
const previousRootAttributes = select.getBlockAttributes(nextBlockClientId);
if (Object.keys(rootAttributes).every(key => rootAttributes[key] === previousRootAttributes[key])) {
dispatch.moveBlocksToPosition(select.getBlockOrder(nextBlockClientId), nextBlockClientId, clientIdA);
dispatch.removeBlock(nextBlockClientId, false);
}
}
});
return;
}
if ((0,external_wp_blocks_namespaceObject.isUnmodifiedDefaultBlock)(blockA)) {
dispatch.removeBlock(clientIdA, select.isBlockSelected(clientIdA));
return;
}
if ((0,external_wp_blocks_namespaceObject.isUnmodifiedDefaultBlock)(blockB)) {
dispatch.removeBlock(clientIdB, select.isBlockSelected(clientIdB));
return;
}
if (!blockAType.merge) {
dispatch.selectBlock(blockA.clientId);
return;
}
const blockBType = (0,external_wp_blocks_namespaceObject.getBlockType)(blockB.name);
const {
clientId,
attributeKey,
offset
} = select.getSelectionStart();
const selectedBlockType = clientId === clientIdA ? blockAType : blockBType;
const attributeDefinition = selectedBlockType.attributes[attributeKey];
const canRestoreTextSelection = (clientId === clientIdA || clientId === clientIdB) && attributeKey !== undefined && offset !== undefined &&
// We cannot restore text selection if the RichText identifier
// is not a defined block attribute key. This can be the case if the
// fallback intance ID is used to store selection (and no RichText
// identifier is set), or when the identifier is wrong.
!!attributeDefinition;
if (!attributeDefinition) {
if (typeof attributeKey === 'number') {
window.console.error(`RichText needs an identifier prop that is the block attribute key of the attribute it controls. Its type is expected to be a string, but was ${typeof attributeKey}`);
} else {
window.console.error('The RichText identifier prop does not match any attributes defined by the block.');
}
}
// Clone the blocks so we don't insert the character in a "live" block.
const cloneA = (0,external_wp_blocks_namespaceObject.cloneBlock)(blockA);
const cloneB = (0,external_wp_blocks_namespaceObject.cloneBlock)(blockB);
if (canRestoreTextSelection) {
const selectedBlock = clientId === clientIdA ? cloneA : cloneB;
const html = selectedBlock.attributes[attributeKey];
const value = (0,external_wp_richText_namespaceObject.insert)((0,external_wp_richText_namespaceObject.create)({
html
}), START_OF_SELECTED_AREA, offset, offset);
selectedBlock.attributes[attributeKey] = (0,external_wp_richText_namespaceObject.toHTMLString)({
value
});
}
// We can only merge blocks with similar types
// thus, we transform the block to merge first.
const blocksWithTheSameType = blockA.name === blockB.name ? [cloneB] : (0,external_wp_blocks_namespaceObject.switchToBlockType)(cloneB, blockA.name);
// If the block types can not match, do nothing.
if (!blocksWithTheSameType || !blocksWithTheSameType.length) {
return;
}
// Calling the merge to update the attributes and remove the block to be merged.
const updatedAttributes = blockAType.merge(cloneA.attributes, blocksWithTheSameType[0].attributes);
if (canRestoreTextSelection) {
const newAttributeKey = retrieveSelectedAttribute(updatedAttributes);
const convertedHtml = updatedAttributes[newAttributeKey];
const convertedValue = (0,external_wp_richText_namespaceObject.create)({
html: convertedHtml
});
const newOffset = convertedValue.text.indexOf(START_OF_SELECTED_AREA);
const newValue = (0,external_wp_richText_namespaceObject.remove)(convertedValue, newOffset, newOffset + 1);
const newHtml = (0,external_wp_richText_namespaceObject.toHTMLString)({
value: newValue
});
updatedAttributes[newAttributeKey] = newHtml;
dispatch.selectionChange(blockA.clientId, newAttributeKey, newOffset, newOffset);
}
dispatch.replaceBlocks([blockA.clientId, blockB.clientId], [{
...blockA,
attributes: {
...blockA.attributes,
...updatedAttributes
}
}, ...blocksWithTheSameType.slice(1)], 0 // If we don't pass the `indexToSelect` it will default to the last block.
);
};
/**
* Yields action objects used in signalling that the blocks corresponding to
* the set of specified client IDs are to be removed.
*
* @param {string|string[]} clientIds Client IDs of blocks to remove.
* @param {boolean} selectPrevious True if the previous block
* or the immediate parent
* (if no previous block exists)
* should be selected
* when a block is removed.
*/
const removeBlocks = (clientIds, selectPrevious = true) => privateRemoveBlocks(clientIds, selectPrevious);
/**
* Returns an action object used in signalling that the block with the
* specified client ID is to be removed.
*
* @param {string} clientId Client ID of block to remove.
* @param {boolean} selectPrevious True if the previous block should be
* selected when a block is removed.
*
* @return {Object} Action object.
*/
function removeBlock(clientId, selectPrevious) {
return removeBlocks([clientId], selectPrevious);
}
/* eslint-disable jsdoc/valid-types */
/**
* Returns an action object used in signalling that the inner blocks with the
* specified client ID should be replaced.
*
* @param {string} rootClientId Client ID of the block whose InnerBlocks will re replaced.
* @param {Object[]} blocks Block objects to insert as new InnerBlocks
* @param {?boolean} updateSelection If true block selection will be updated. If false, block selection will not change. Defaults to false.
* @param {0|-1|null} initialPosition Initial block position.
* @return {Object} Action object.
*/
function replaceInnerBlocks(rootClientId, blocks, updateSelection = false, initialPosition = 0) {
/* eslint-enable jsdoc/valid-types */
return {
type: 'REPLACE_INNER_BLOCKS',
rootClientId,
blocks,
updateSelection,
initialPosition: updateSelection ? initialPosition : null,
time: Date.now()
};
}
/**
* Returns an action object used to toggle the block editing mode between
* visual and HTML modes.
*
* @param {string} clientId Block client ID.
*
* @return {Object} Action object.
*/
function toggleBlockMode(clientId) {
return {
type: 'TOGGLE_BLOCK_MODE',
clientId
};
}
/**
* Returns an action object used in signalling that the user has begun to type.
*
* @return {Object} Action object.
*/
function startTyping() {
return {
type: 'START_TYPING'
};
}
/**
* Returns an action object used in signalling that the user has stopped typing.
*
* @return {Object} Action object.
*/
function stopTyping() {
return {
type: 'STOP_TYPING'
};
}
/**
* Returns an action object used in signalling that the user has begun to drag blocks.
*
* @param {string[]} clientIds An array of client ids being dragged
*
* @return {Object} Action object.
*/
function startDraggingBlocks(clientIds = []) {
return {
type: 'START_DRAGGING_BLOCKS',
clientIds
};
}
/**
* Returns an action object used in signalling that the user has stopped dragging blocks.
*
* @return {Object} Action object.
*/
function stopDraggingBlocks() {
return {
type: 'STOP_DRAGGING_BLOCKS'
};
}
/**
* Returns an action object used in signalling that the caret has entered formatted text.
*
* @deprecated
*
* @return {Object} Action object.
*/
function enterFormattedText() {
external_wp_deprecated_default()('wp.data.dispatch( "core/block-editor" ).enterFormattedText', {
since: '6.1',
version: '6.3'
});
return {
type: 'DO_NOTHING'
};
}
/**
* Returns an action object used in signalling that the user caret has exited formatted text.
*
* @deprecated
*
* @return {Object} Action object.
*/
function exitFormattedText() {
external_wp_deprecated_default()('wp.data.dispatch( "core/block-editor" ).exitFormattedText', {
since: '6.1',
version: '6.3'
});
return {
type: 'DO_NOTHING'
};
}
/**
* Action that changes the position of the user caret.
*
* @param {string|WPSelection} clientId The selected block client ID.
* @param {string} attributeKey The selected block attribute key.
* @param {number} startOffset The start offset.
* @param {number} endOffset The end offset.
*
* @return {Object} Action object.
*/
function selectionChange(clientId, attributeKey, startOffset, endOffset) {
if (typeof clientId === 'string') {
return {
type: 'SELECTION_CHANGE',
clientId,
attributeKey,
startOffset,
endOffset
};
}
return {
type: 'SELECTION_CHANGE',
...clientId
};
}
/**
* Action that adds a new block of the default type to the block list.
*
* @param {?Object} attributes Optional attributes of the block to assign.
* @param {?string} rootClientId Optional root client ID of block list on which
* to append.
* @param {?number} index Optional index where to insert the default block.
*/
const insertDefaultBlock = (attributes, rootClientId, index) => ({
dispatch
}) => {
// Abort if there is no default block type (if it has been unregistered).
const defaultBlockName = (0,external_wp_blocks_namespaceObject.getDefaultBlockName)();
if (!defaultBlockName) {
return;
}
const block = (0,external_wp_blocks_namespaceObject.createBlock)(defaultBlockName, attributes);
return dispatch.insertBlock(block, index, rootClientId);
};
/**
* @typedef {Object< string, Object >} SettingsByClientId
*/
/**
* Action that changes the nested settings of the given block(s).
*
* @param {string | SettingsByClientId} clientId Client ID of the block whose
* nested setting are being
* received, or object of settings
* by client ID.
* @param {Object} settings Object with the new settings
* for the nested block.
*
* @return {Object} Action object
*/
function updateBlockListSettings(clientId, settings) {
return {
type: 'UPDATE_BLOCK_LIST_SETTINGS',
clientId,
settings
};
}
/**
* Action that updates the block editor settings.
*
* @param {Object} settings Updated settings
*
* @return {Object} Action object
*/
function updateSettings(settings) {
return __experimentalUpdateSettings(settings, {
stripExperimentalSettings: true
});
}
/**
* Action that signals that a temporary reusable block has been saved
* in order to switch its temporary id with the real id.
*
* @param {string} id Reusable block's id.
* @param {string} updatedId Updated block's id.
*
* @return {Object} Action object.
*/
function __unstableSaveReusableBlock(id, updatedId) {
return {
type: 'SAVE_REUSABLE_BLOCK_SUCCESS',
id,
updatedId
};
}
/**
* Action that marks the last block change explicitly as persistent.
*
* @return {Object} Action object.
*/
function __unstableMarkLastChangeAsPersistent() {
return {
type: 'MARK_LAST_CHANGE_AS_PERSISTENT'
};
}
/**
* Action that signals that the next block change should be marked explicitly as not persistent.
*
* @return {Object} Action object.
*/
function __unstableMarkNextChangeAsNotPersistent() {
return {
type: 'MARK_NEXT_CHANGE_AS_NOT_PERSISTENT'
};
}
/**
* Action that marks the last block change as an automatic change, meaning it was not
* performed by the user, and can be undone using the `Escape` and `Backspace` keys.
* This action must be called after the change was made, and any actions that are a
* consequence of it, so it is recommended to be called at the next idle period to ensure all
* selection changes have been recorded.
*/
const __unstableMarkAutomaticChange = () => ({
dispatch
}) => {
dispatch({
type: 'MARK_AUTOMATIC_CHANGE'
});
const {
requestIdleCallback = cb => setTimeout(cb, 100)
} = window;
requestIdleCallback(() => {
dispatch({
type: 'MARK_AUTOMATIC_CHANGE_FINAL'
});
});
};
/**
* Action that enables or disables the navigation mode.
*
* @param {boolean} isNavigationMode Enable/Disable navigation mode.
*/
const setNavigationMode = (isNavigationMode = true) => ({
dispatch
}) => {
dispatch.__unstableSetEditorMode(isNavigationMode ? 'navigation' : 'edit');
};
/**
* Action that sets the editor mode
*
* @param {string} mode Editor mode
*/
const __unstableSetEditorMode = mode => ({
dispatch,
select
}) => {
// When switching to zoom-out mode, we need to select the parent section
if (mode === 'zoom-out') {
const firstSelectedClientId = select.getBlockSelectionStart();
const sectionRootClientId = select.getSectionRootClientId();
if (firstSelectedClientId) {
let sectionClientId;
if (sectionRootClientId) {
const sectionClientIds = select.getBlockOrder(sectionRootClientId);
// If the selected block is a section block, use it.
if (sectionClientIds?.includes(firstSelectedClientId)) {
sectionClientId = firstSelectedClientId;
} else {
// If the selected block is not a section block, find
// the parent section that contains the selected block.
sectionClientId = select.getBlockParents(firstSelectedClientId).find(parent => sectionClientIds.includes(parent));
}
} else {
sectionClientId = select.getBlockHierarchyRootClientId(firstSelectedClientId);
}
if (sectionClientId) {
dispatch.selectBlock(sectionClientId);
} else {
dispatch.clearSelectedBlock();
}
}
}
dispatch({
type: 'SET_EDITOR_MODE',
mode
});
if (mode === 'navigation') {
(0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.__)('You are currently in navigation mode. Navigate blocks using the Tab key and Arrow keys. Use Left and Right Arrow keys to move between nesting levels. To exit navigation mode and edit the selected block, press Enter.'));
} else if (mode === 'edit') {
(0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.__)('You are currently in edit mode. To return to the navigation mode, press Escape.'));
} else if (mode === 'zoom-out') {
(0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.__)('You are currently in zoom-out mode.'));
}
};
/**
* Action that enables or disables the block moving mode.
*
* @param {string|null} hasBlockMovingClientId Enable/Disable block moving mode.
*/
const setBlockMovingClientId = (hasBlockMovingClientId = null) => ({
dispatch
}) => {
dispatch({
type: 'SET_BLOCK_MOVING_MODE',
hasBlockMovingClientId
});
if (hasBlockMovingClientId) {
(0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.__)('Use the Tab key and Arrow keys to choose new block location. Use Left and Right Arrow keys to move between nesting levels. Once location is selected press Enter or Space to move the block.'));
}
};
/**
* Action that duplicates a list of blocks.
*
* @param {string[]} clientIds
* @param {boolean} updateSelection
*/
const duplicateBlocks = (clientIds, updateSelection = true) => ({
select,
dispatch
}) => {
if (!clientIds || !clientIds.length) {
return;
}
// Return early if blocks don't exist.
const blocks = select.getBlocksByClientId(clientIds);
if (blocks.some(block => !block)) {
return;
}
// Return early if blocks don't support multiple usage.
const blockNames = blocks.map(block => block.name);
if (blockNames.some(blockName => !(0,external_wp_blocks_namespaceObject.hasBlockSupport)(blockName, 'multiple', true))) {
return;
}
const rootClientId = select.getBlockRootClientId(clientIds[0]);
const clientIdsArray = actions_castArray(clientIds);
const lastSelectedIndex = select.getBlockIndex(clientIdsArray[clientIdsArray.length - 1]);
const clonedBlocks = blocks.map(block => (0,external_wp_blocks_namespaceObject.__experimentalCloneSanitizedBlock)(block));
dispatch.insertBlocks(clonedBlocks, lastSelectedIndex + 1, rootClientId, updateSelection);
if (clonedBlocks.length > 1 && updateSelection) {
dispatch.multiSelect(clonedBlocks[0].clientId, clonedBlocks[clonedBlocks.length - 1].clientId);
}
return clonedBlocks.map(block => block.clientId);
};
/**
* Action that inserts a default block before a given block.
*
* @param {string} clientId
*/
const insertBeforeBlock = clientId => ({
select,
dispatch
}) => {
if (!clientId) {
return;
}
const rootClientId = select.getBlockRootClientId(clientId);
const isLocked = select.getTemplateLock(rootClientId);
if (isLocked) {
return;
}
const blockIndex = select.getBlockIndex(clientId);
const directInsertBlock = rootClientId ? select.getDirectInsertBlock(rootClientId) : null;
if (!directInsertBlock) {
return dispatch.insertDefaultBlock({}, rootClientId, blockIndex);
}
const copiedAttributes = {};
if (directInsertBlock.attributesToCopy) {
const attributes = select.getBlockAttributes(clientId);
directInsertBlock.attributesToCopy.forEach(key => {
if (attributes[key]) {
copiedAttributes[key] = attributes[key];
}
});
}
const block = (0,external_wp_blocks_namespaceObject.createBlock)(directInsertBlock.name, {
...directInsertBlock.attributes,
...copiedAttributes
});
return dispatch.insertBlock(block, blockIndex, rootClientId);
};
/**
* Action that inserts a default block after a given block.
*
* @param {string} clientId
*/
const insertAfterBlock = clientId => ({
select,
dispatch
}) => {
if (!clientId) {
return;
}
const rootClientId = select.getBlockRootClientId(clientId);
const isLocked = select.getTemplateLock(rootClientId);
if (isLocked) {
return;
}
const blockIndex = select.getBlockIndex(clientId);
const directInsertBlock = rootClientId ? select.getDirectInsertBlock(rootClientId) : null;
if (!directInsertBlock) {
return dispatch.insertDefaultBlock({}, rootClientId, blockIndex + 1);
}
const copiedAttributes = {};
if (directInsertBlock.attributesToCopy) {
const attributes = select.getBlockAttributes(clientId);
directInsertBlock.attributesToCopy.forEach(key => {
if (attributes[key]) {
copiedAttributes[key] = attributes[key];
}
});
}
const block = (0,external_wp_blocks_namespaceObject.createBlock)(directInsertBlock.name, {
...directInsertBlock.attributes,
...copiedAttributes
});
return dispatch.insertBlock(block, blockIndex + 1, rootClientId);
};
/**
* Action that toggles the highlighted block state.
*
* @param {string} clientId The block's clientId.
* @param {boolean} isHighlighted The highlight state.
*/
function toggleBlockHighlight(clientId, isHighlighted) {
return {
type: 'TOGGLE_BLOCK_HIGHLIGHT',
clientId,
isHighlighted
};
}
/**
* Action that "flashes" the block with a given `clientId` by rhythmically highlighting it.
*
* @param {string} clientId Target block client ID.
*/
const flashBlock = clientId => async ({
dispatch
}) => {
dispatch(toggleBlockHighlight(clientId, true));
await new Promise(resolve => setTimeout(resolve, 150));
dispatch(toggleBlockHighlight(clientId, false));
};
/**
* Action that sets whether a block has controlled inner blocks.
*
* @param {string} clientId The block's clientId.
* @param {boolean} hasControlledInnerBlocks True if the block's inner blocks are controlled.
*/
function setHasControlledInnerBlocks(clientId, hasControlledInnerBlocks) {
return {
type: 'SET_HAS_CONTROLLED_INNER_BLOCKS',
hasControlledInnerBlocks,
clientId
};
}
/**
* Action that sets whether given blocks are visible on the canvas.
*
* @param {Record<string,boolean>} updates For each block's clientId, its new visibility setting.
*/
function setBlockVisibility(updates) {
return {
type: 'SET_BLOCK_VISIBILITY',
updates
};
}
/**
* Action that sets whether a block is being temporarily edited as blocks.
*
* DO-NOT-USE in production.
* This action is created for internal/experimental only usage and may be
* removed anytime without any warning, causing breakage on any plugin or theme invoking it.
*
* @param {?string} temporarilyEditingAsBlocks The block's clientId being temporarily edited as blocks.
* @param {?string} focusModeToRevert The focus mode to revert after temporarily edit as blocks finishes.
*/
function __unstableSetTemporarilyEditingAsBlocks(temporarilyEditingAsBlocks, focusModeToRevert) {
return {
type: 'SET_TEMPORARILY_EDITING_AS_BLOCKS',
temporarilyEditingAsBlocks,
focusModeToRevert
};
}
/**
* Interface for inserter media requests.
*
* @typedef {Object} InserterMediaRequest
* @property {number} per_page How many items to fetch per page.
* @property {string} search The search term to use for filtering the results.
*/
/**
* Interface for inserter media responses. Any media resource should
* map their response to this interface, in order to create the core
* WordPress media blocks (image, video, audio).
*
* @typedef {Object} InserterMediaItem
* @property {string} title The title of the media item.
* @property {string} url The source url of the media item.
* @property {string} [previewUrl] The preview source url of the media item to display in the media list.
* @property {number} [id] The WordPress id of the media item.
* @property {number|string} [sourceId] The id of the media item from external source.
* @property {string} [alt] The alt text of the media item.
* @property {string} [caption] The caption of the media item.
*/
/**
* Registers a new inserter media category. Once registered, the media category is
* available in the inserter's media tab.
*
* The following interfaces are used:
*
* _Type Definition_
*
* - _InserterMediaRequest_ `Object`: Interface for inserter media requests.
*
* _Properties_
*
* - _per_page_ `number`: How many items to fetch per page.
* - _search_ `string`: The search term to use for filtering the results.
*
* _Type Definition_
*
* - _InserterMediaItem_ `Object`: Interface for inserter media responses. Any media resource should
* map their response to this interface, in order to create the core
* WordPress media blocks (image, video, audio).
*
* _Properties_
*
* - _title_ `string`: The title of the media item.
* - _url_ `string: The source url of the media item.
* - _previewUrl_ `[string]`: The preview source url of the media item to display in the media list.
* - _id_ `[number]`: The WordPress id of the media item.
* - _sourceId_ `[number|string]`: The id of the media item from external source.
* - _alt_ `[string]`: The alt text of the media item.
* - _caption_ `[string]`: The caption of the media item.
*
* @param {InserterMediaCategory} category The inserter media category to register.
*
* @example
* ```js
*
* wp.data.dispatch('core/block-editor').registerInserterMediaCategory( {
* name: 'openverse',
* labels: {
* name: 'Openverse',
* search_items: 'Search Openverse',
* },
* mediaType: 'image',
* async fetch( query = {} ) {
* const defaultArgs = {
* mature: false,
* excluded_source: 'flickr,inaturalist,wikimedia',
* license: 'pdm,cc0',
* };
* const finalQuery = { ...query, ...defaultArgs };
* // Sometimes you might need to map the supported request params according to `InserterMediaRequest`.
* // interface. In this example the `search` query param is named `q`.
* const mapFromInserterMediaRequest = {
* per_page: 'page_size',
* search: 'q',
* };
* const url = new URL( 'https://api.openverse.org/v1/images/' );
* Object.entries( finalQuery ).forEach( ( [ key, value ] ) => {
* const queryKey = mapFromInserterMediaRequest[ key ] || key;
* url.searchParams.set( queryKey, value );
* } );
* const response = await window.fetch( url, {
* headers: {
* 'User-Agent': 'WordPress/inserter-media-fetch',
* },
* } );
* const jsonResponse = await response.json();
* const results = jsonResponse.results;
* return results.map( ( result ) => ( {
* ...result,
* // If your response result includes an `id` prop that you want to access later, it should
* // be mapped to `InserterMediaItem`'s `sourceId` prop. This can be useful if you provide
* // a report URL getter.
* // Additionally you should always clear the `id` value of your response results because
* // it is used to identify WordPress media items.
* sourceId: result.id,
* id: undefined,
* caption: result.caption,
* previewUrl: result.thumbnail,
* } ) );
* },
* getReportUrl: ( { sourceId } ) =>
* `https://wordpress.org/openverse/image/${ sourceId }/report/`,
* isExternalResource: true,
* } );
* ```
*
* @typedef {Object} InserterMediaCategory Interface for inserter media category.
* @property {string} name The name of the media category, that should be unique among all media categories.
* @property {Object} labels Labels for the media category.
* @property {string} labels.name General name of the media category. It's used in the inserter media items list.
* @property {string} [labels.search_items='Search'] Label for searching items. Default is ‘Search Posts’ / ‘Search Pages’.
* @property {('image'|'audio'|'video')} mediaType The media type of the media category.
* @property {(InserterMediaRequest) => Promise<InserterMediaItem[]>} fetch The function to fetch media items for the category.
* @property {(InserterMediaItem) => string} [getReportUrl] If the media category supports reporting media items, this function should return
* the report url for the media item. It accepts the `InserterMediaItem` as an argument.
* @property {boolean} [isExternalResource] If the media category is an external resource, this should be set to true.
* This is used to avoid making a request to the external resource when the user
*/
const registerInserterMediaCategory = category => ({
select,
dispatch
}) => {
if (!category || typeof category !== 'object') {
console.error('Category should be an `InserterMediaCategory` object.');
return;
}
if (!category.name) {
console.error('Category should have a `name` that should be unique among all media categories.');
return;
}
if (!category.labels?.name) {
console.error('Category should have a `labels.name`.');
return;
}
if (!['image', 'audio', 'video'].includes(category.mediaType)) {
console.error('Category should have `mediaType` property that is one of `image|audio|video`.');
return;
}
if (!category.fetch || typeof category.fetch !== 'function') {
console.error('Category should have a `fetch` function defined with the following signature `(InserterMediaRequest) => Promise<InserterMediaItem[]>`.');
return;
}
const registeredInserterMediaCategories = select.getRegisteredInserterMediaCategories();
if (registeredInserterMediaCategories.some(({
name
}) => name === category.name)) {
console.error(`A category is already registered with the same name: "${category.name}".`);
return;
}
if (registeredInserterMediaCategories.some(({
labels: {
name
} = {}
}) => name === category.labels?.name)) {
console.error(`A category is already registered with the same labels.name: "${category.labels.name}".`);
return;
}
// `inserterMediaCategories` is a private block editor setting, which means it cannot
// be updated through the public `updateSettings` action. We preserve this setting as
// private, so extenders can only add new inserter media categories and don't have any
// control over the core media categories.
dispatch({
type: 'REGISTER_INSERTER_MEDIA_CATEGORY',
category: {
...category,
isExternalResource: true
}
});
};
/**
* @typedef {import('../components/block-editing-mode').BlockEditingMode} BlockEditingMode
*/
/**
* Sets the block editing mode for a given block.
*
* @see useBlockEditingMode
*
* @param {string} clientId The block client ID, or `''` for the root container.
* @param {BlockEditingMode} mode The block editing mode. One of `'disabled'`,
* `'contentOnly'`, or `'default'`.
*
* @return {Object} Action object.
*/
function setBlockEditingMode(clientId = '', mode) {
return {
type: 'SET_BLOCK_EDITING_MODE',
clientId,
mode
};
}
/**
* Clears the block editing mode for a given block.
*
* @see useBlockEditingMode
*
* @param {string} clientId The block client ID, or `''` for the root container.
*
* @return {Object} Action object.
*/
function unsetBlockEditingMode(clientId = '') {
return {
type: 'UNSET_BLOCK_EDITING_MODE',
clientId
};
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/store/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Block editor data store configuration.
*
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#registerStore
*/
const storeConfig = {
reducer: reducer,
selectors: selectors_namespaceObject,
actions: actions_namespaceObject
};
/**
* Store definition for the block editor namespace.
*
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore
*/
const store = (0,external_wp_data_namespaceObject.createReduxStore)(STORE_NAME, {
...storeConfig,
persist: ['preferences']
});
// We will be able to use the `register` function once we switch
// the "preferences" persistence to use the new preferences package.
const registeredStore = (0,external_wp_data_namespaceObject.registerStore)(STORE_NAME, {
...storeConfig,
persist: ['preferences']
});
unlock(registeredStore).registerPrivateActions(private_actions_namespaceObject);
unlock(registeredStore).registerPrivateSelectors(private_selectors_namespaceObject);
// TODO: Remove once we switch to the `register` function (see above).
//
// Until then, private functions also need to be attached to the original
// `store` descriptor in order to avoid unit tests failing, which could happen
// when tests create new registries in which they register stores.
//
// @see https://github.com/WordPress/gutenberg/pull/51145#discussion_r1239999590
unlock(store).registerPrivateActions(private_actions_namespaceObject);
unlock(store).registerPrivateSelectors(private_selectors_namespaceObject);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/use-settings/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Hook that retrieves the given settings for the block instance in use.
*
* It looks up the settings first in the block instance hierarchy.
* If none are found, it'll look them up in the block editor settings.
*
* @param {string[]} paths The paths to the settings.
* @return {any[]} Returns the values defined for the settings.
* @example
* ```js
* const [ fixed, sticky ] = useSettings( 'position.fixed', 'position.sticky' );
* ```
*/
function use_settings_useSettings(...paths) {
const {
clientId = null
} = useBlockEditContext();
return (0,external_wp_data_namespaceObject.useSelect)(select => unlock(select(store)).getBlockSettings(clientId, ...paths),
// eslint-disable-next-line react-hooks/exhaustive-deps
[clientId, ...paths]);
}
/**
* Hook that retrieves the given setting for the block instance in use.
*
* It looks up the setting first in the block instance hierarchy.
* If none is found, it'll look it up in the block editor settings.
*
* @deprecated 6.5.0 Use useSettings instead.
*
* @param {string} path The path to the setting.
* @return {any} Returns the value defined for the setting.
* @example
* ```js
* const isEnabled = useSetting( 'typography.dropCap' );
* ```
*/
function useSetting(path) {
external_wp_deprecated_default()('wp.blockEditor.useSetting', {
since: '6.5',
alternative: 'wp.blockEditor.useSettings',
note: 'The new useSettings function can retrieve multiple settings at once, with better performance.'
});
const [value] = use_settings_useSettings(path);
return value;
}
;// CONCATENATED MODULE: external ["wp","styleEngine"]
const external_wp_styleEngine_namespaceObject = window["wp"]["styleEngine"];
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/font-sizes/fluid-utils.js
/**
* The fluid utilities must match the backend equivalent.
* See: gutenberg_get_typography_font_size_value() in lib/block-supports/typography.php
* ---------------------------------------------------------------
*/
// Defaults.
const DEFAULT_MAXIMUM_VIEWPORT_WIDTH = '1600px';
const DEFAULT_MINIMUM_VIEWPORT_WIDTH = '320px';
const DEFAULT_SCALE_FACTOR = 1;
const DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MIN = 0.25;
const DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MAX = 0.75;
const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px';
/**
* Computes a fluid font-size value that uses clamp(). A minimum and maximum
* font size OR a single font size can be specified.
*
* If a single font size is specified, it is scaled up and down using a logarithmic scale.
*
* @example
* ```js
* // Calculate fluid font-size value from a minimum and maximum value.
* const fontSize = getComputedFluidTypographyValue( {
* minimumFontSize: '20px',
* maximumFontSize: '45px'
* } );
* // Calculate fluid font-size value from a single font size.
* const fontSize = getComputedFluidTypographyValue( {
* fontSize: '30px',
* } );
* ```
*
* @param {Object} args
* @param {?string} args.minimumViewportWidth Minimum viewport size from which type will have fluidity. Optional if fontSize is specified.
* @param {?string} args.maximumViewportWidth Maximum size up to which type will have fluidity. Optional if fontSize is specified.
* @param {string|number} [args.fontSize] Size to derive maximumFontSize and minimumFontSize from, if necessary. Optional if minimumFontSize and maximumFontSize are specified.
* @param {?string} args.maximumFontSize Maximum font size for any clamp() calculation. Optional.
* @param {?string} args.minimumFontSize Minimum font size for any clamp() calculation. Optional.
* @param {?number} args.scaleFactor A scale factor to determine how fast a font scales within boundaries. Optional.
* @param {?string} args.minimumFontSizeLimit The smallest a calculated font size may be. Optional.
*
* @return {string|null} A font-size value using clamp().
*/
function getComputedFluidTypographyValue({
minimumFontSize,
maximumFontSize,
fontSize,
minimumViewportWidth = DEFAULT_MINIMUM_VIEWPORT_WIDTH,
maximumViewportWidth = DEFAULT_MAXIMUM_VIEWPORT_WIDTH,
scaleFactor = DEFAULT_SCALE_FACTOR,
minimumFontSizeLimit
}) {
// Validate incoming settings and set defaults.
minimumFontSizeLimit = !!getTypographyValueAndUnit(minimumFontSizeLimit) ? minimumFontSizeLimit : DEFAULT_MINIMUM_FONT_SIZE_LIMIT;
/*
* Calculates missing minimumFontSize and maximumFontSize from
* defaultFontSize if provided.
*/
if (fontSize) {
// Parses default font size.
const fontSizeParsed = getTypographyValueAndUnit(fontSize);
// Protect against invalid units.
if (!fontSizeParsed?.unit) {
return null;
}
// Parses the minimum font size limit, so we can perform checks using it.
const minimumFontSizeLimitParsed = getTypographyValueAndUnit(minimumFontSizeLimit, {
coerceTo: fontSizeParsed.unit
});
// Don't enforce minimum font size if a font size has explicitly set a min and max value.
if (!!minimumFontSizeLimitParsed?.value && !minimumFontSize && !maximumFontSize) {
/*
* If a minimum size was not passed to this function
* and the user-defined font size is lower than $minimum_font_size_limit,
* do not calculate a fluid value.
*/
if (fontSizeParsed?.value <= minimumFontSizeLimitParsed?.value) {
return null;
}
}
// If no fluid max font size is available use the incoming value.
if (!maximumFontSize) {
maximumFontSize = `${fontSizeParsed.value}${fontSizeParsed.unit}`;
}
/*
* If no minimumFontSize is provided, create one using
* the given font size multiplied by the min font size scale factor.
*/
if (!minimumFontSize) {
const fontSizeValueInPx = fontSizeParsed.unit === 'px' ? fontSizeParsed.value : fontSizeParsed.value * 16;
/*
* The scale factor is a multiplier that affects how quickly the curve will move towards the minimum,
* that is, how quickly the size factor reaches 0 given increasing font size values.
* For a - b * log2(), lower values of b will make the curve move towards the minimum faster.
* The scale factor is constrained between min and max values.
*/
const minimumFontSizeFactor = Math.min(Math.max(1 - 0.075 * Math.log2(fontSizeValueInPx), DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MIN), DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MAX);
// Calculates the minimum font size.
const calculatedMinimumFontSize = roundToPrecision(fontSizeParsed.value * minimumFontSizeFactor, 3);
// Only use calculated min font size if it's > $minimum_font_size_limit value.
if (!!minimumFontSizeLimitParsed?.value && calculatedMinimumFontSize < minimumFontSizeLimitParsed?.value) {
minimumFontSize = `${minimumFontSizeLimitParsed.value}${minimumFontSizeLimitParsed.unit}`;
} else {
minimumFontSize = `${calculatedMinimumFontSize}${fontSizeParsed.unit}`;
}
}
}
// Grab the minimum font size and normalize it in order to use the value for calculations.
const minimumFontSizeParsed = getTypographyValueAndUnit(minimumFontSize);
// We get a 'preferred' unit to keep units consistent when calculating,
// otherwise the result will not be accurate.
const fontSizeUnit = minimumFontSizeParsed?.unit || 'rem';
// Grabs the maximum font size and normalize it in order to use the value for calculations.
const maximumFontSizeParsed = getTypographyValueAndUnit(maximumFontSize, {
coerceTo: fontSizeUnit
});
// Checks for mandatory min and max sizes, and protects against unsupported units.
if (!minimumFontSizeParsed || !maximumFontSizeParsed) {
return null;
}
// Uses rem for accessible fluid target font scaling.
const minimumFontSizeRem = getTypographyValueAndUnit(minimumFontSize, {
coerceTo: 'rem'
});
// Viewport widths defined for fluid typography. Normalize units
const maximumViewportWidthParsed = getTypographyValueAndUnit(maximumViewportWidth, {
coerceTo: fontSizeUnit
});
const minimumViewportWidthParsed = getTypographyValueAndUnit(minimumViewportWidth, {
coerceTo: fontSizeUnit
});
// Protect against unsupported units.
if (!maximumViewportWidthParsed || !minimumViewportWidthParsed || !minimumFontSizeRem) {
return null;
}
// Calculates the linear factor denominator. If it's 0, we cannot calculate a fluid value.
const linearDenominator = maximumViewportWidthParsed.value - minimumViewportWidthParsed.value;
if (!linearDenominator) {
return null;
}
// Build CSS rule.
// Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.
const minViewportWidthOffsetValue = roundToPrecision(minimumViewportWidthParsed.value / 100, 3);
const viewportWidthOffset = roundToPrecision(minViewportWidthOffsetValue, 3) + fontSizeUnit;
const linearFactor = 100 * ((maximumFontSizeParsed.value - minimumFontSizeParsed.value) / linearDenominator);
const linearFactorScaled = roundToPrecision((linearFactor || 1) * scaleFactor, 3);
const fluidTargetFontSize = `${minimumFontSizeRem.value}${minimumFontSizeRem.unit} + ((1vw - ${viewportWidthOffset}) * ${linearFactorScaled})`;
return `clamp(${minimumFontSize}, ${fluidTargetFontSize}, ${maximumFontSize})`;
}
/**
* Internal method that checks a string for a unit and value and returns an array consisting of `'value'` and `'unit'`, e.g., [ '42', 'rem' ].
* A raw font size of `value + unit` is expected. If the value is an integer, it will convert to `value + 'px'`.
*
* @param {string|number} rawValue Raw size value from theme.json.
* @param {Object|undefined} options Calculation options.
*
* @return {{ unit: string, value: number }|null} An object consisting of `'value'` and `'unit'` properties.
*/
function getTypographyValueAndUnit(rawValue, options = {}) {
if (typeof rawValue !== 'string' && typeof rawValue !== 'number') {
return null;
}
// Converts numeric values to pixel values by default.
if (isFinite(rawValue)) {
rawValue = `${rawValue}px`;
}
const {
coerceTo,
rootSizeValue,
acceptableUnits
} = {
coerceTo: '',
// Default browser font size. Later we could inject some JS to compute this `getComputedStyle( document.querySelector( "html" ) ).fontSize`.
rootSizeValue: 16,
acceptableUnits: ['rem', 'px', 'em'],
...options
};
const acceptableUnitsGroup = acceptableUnits?.join('|');
const regexUnits = new RegExp(`^(\\d*\\.?\\d+)(${acceptableUnitsGroup}){1,1}$`);
const matches = rawValue.match(regexUnits);
// We need a number value and a unit.
if (!matches || matches.length < 3) {
return null;
}
let [, value, unit] = matches;
let returnValue = parseFloat(value);
if ('px' === coerceTo && ('em' === unit || 'rem' === unit)) {
returnValue = returnValue * rootSizeValue;
unit = coerceTo;
}
if ('px' === unit && ('em' === coerceTo || 'rem' === coerceTo)) {
returnValue = returnValue / rootSizeValue;
unit = coerceTo;
}
/*
* No calculation is required if swapping between em and rem yet,
* since we assume a root size value. Later we might like to differentiate between
* :root font size (rem) and parent element font size (em) relativity.
*/
if (('em' === coerceTo || 'rem' === coerceTo) && ('em' === unit || 'rem' === unit)) {
unit = coerceTo;
}
return {
value: roundToPrecision(returnValue, 3),
unit
};
}
/**
* Returns a value rounded to defined precision.
* Returns `undefined` if the value is not a valid finite number.
*
* @param {number} value Raw value.
* @param {number} digits The number of digits to appear after the decimal point
*
* @return {number|undefined} Value rounded to standard precision.
*/
function roundToPrecision(value, digits = 3) {
const base = Math.pow(10, digits);
return Number.isFinite(value) ? parseFloat(Math.round(value * base) / base) : undefined;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/utils/format-font-style.js
/**
* WordPress dependencies
*/
/**
* Formats font styles to human readable names.
*
* @param {string} fontStyle font style string
* @return {Object} new object with formatted font style
*/
function formatFontStyle(fontStyle) {
if (!fontStyle) {
return {};
}
if (typeof fontStyle === 'object') {
return fontStyle;
}
let name;
switch (fontStyle) {
case 'normal':
name = (0,external_wp_i18n_namespaceObject._x)('Regular', 'font style');
break;
case 'italic':
name = (0,external_wp_i18n_namespaceObject._x)('Italic', 'font style');
break;
case 'oblique':
name = (0,external_wp_i18n_namespaceObject._x)('Oblique', 'font style');
break;
default:
name = fontStyle;
break;
}
return {
name,
value: fontStyle
};
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/utils/format-font-weight.js
/**
* WordPress dependencies
*/
/**
* Formats font weights to human readable names.
*
* @param {string} fontWeight font weight string
* @return {Object} new object with formatted font weight
*/
function formatFontWeight(fontWeight) {
if (!fontWeight) {
return {};
}
if (typeof fontWeight === 'object') {
return fontWeight;
}
let name;
switch (fontWeight) {
case 'normal':
case '400':
name = (0,external_wp_i18n_namespaceObject._x)('Regular', 'font weight');
break;
case 'bold':
case '700':
name = (0,external_wp_i18n_namespaceObject._x)('Bold', 'font weight');
break;
case '100':
name = (0,external_wp_i18n_namespaceObject._x)('Thin', 'font weight');
break;
case '200':
name = (0,external_wp_i18n_namespaceObject._x)('Extra Light', 'font weight');
break;
case '300':
name = (0,external_wp_i18n_namespaceObject._x)('Light', 'font weight');
break;
case '500':
name = (0,external_wp_i18n_namespaceObject._x)('Medium', 'font weight');
break;
case '600':
name = (0,external_wp_i18n_namespaceObject._x)('Semi Bold', 'font weight');
break;
case '800':
name = (0,external_wp_i18n_namespaceObject._x)('Extra Bold', 'font weight');
break;
case '900':
name = (0,external_wp_i18n_namespaceObject._x)('Black', 'font weight');
break;
case '1000':
name = (0,external_wp_i18n_namespaceObject._x)('Extra Black', 'font weight');
break;
default:
name = fontWeight;
break;
}
return {
name,
value: fontWeight
};
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/utils/get-font-styles-and-weights.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const FONT_STYLES = [{
name: (0,external_wp_i18n_namespaceObject._x)('Regular', 'font style'),
value: 'normal'
}, {
name: (0,external_wp_i18n_namespaceObject._x)('Italic', 'font style'),
value: 'italic'
}];
const FONT_WEIGHTS = [{
name: (0,external_wp_i18n_namespaceObject._x)('Thin', 'font weight'),
value: '100'
}, {
name: (0,external_wp_i18n_namespaceObject._x)('Extra Light', 'font weight'),
value: '200'
}, {
name: (0,external_wp_i18n_namespaceObject._x)('Light', 'font weight'),
value: '300'
}, {
name: (0,external_wp_i18n_namespaceObject._x)('Regular', 'font weight'),
value: '400'
}, {
name: (0,external_wp_i18n_namespaceObject._x)('Medium', 'font weight'),
value: '500'
}, {
name: (0,external_wp_i18n_namespaceObject._x)('Semi Bold', 'font weight'),
value: '600'
}, {
name: (0,external_wp_i18n_namespaceObject._x)('Bold', 'font weight'),
value: '700'
}, {
name: (0,external_wp_i18n_namespaceObject._x)('Extra Bold', 'font weight'),
value: '800'
}, {
name: (0,external_wp_i18n_namespaceObject._x)('Black', 'font weight'),
value: '900'
}, {
name: (0,external_wp_i18n_namespaceObject._x)('Extra Black', 'font weight'),
value: '1000'
}];
/**
* Builds a list of font style and weight options based on font family faces.
* Defaults to the standard font styles and weights if no font family faces are provided.
*
* @param {Array} fontFamilyFaces font family faces array
* @return {Object} new object with combined and separated font style and weight properties
*/
function getFontStylesAndWeights(fontFamilyFaces) {
let fontStyles = [];
let fontWeights = [];
const combinedStyleAndWeightOptions = [];
const isSystemFont = !fontFamilyFaces || fontFamilyFaces?.length === 0;
let isVariableFont = false;
fontFamilyFaces?.forEach(face => {
// Check for variable font by looking for a space in the font weight value. e.g. "100 900"
if ('string' === typeof face.fontWeight && /\s/.test(face.fontWeight.trim())) {
isVariableFont = true;
// Find font weight start and end values.
let [startValue, endValue] = face.fontWeight.split(' ');
startValue = parseInt(startValue.slice(0, 1));
if (endValue === '1000') {
endValue = 10;
} else {
endValue = parseInt(endValue.slice(0, 1));
}
// Create font weight options for available variable weights.
for (let i = startValue; i <= endValue; i++) {
const fontWeightValue = `${i.toString()}00`;
if (!fontWeights.some(weight => weight.value === fontWeightValue)) {
fontWeights.push(formatFontWeight(fontWeightValue));
}
}
}
// Format font style and weight values.
const fontWeight = formatFontWeight('number' === typeof face.fontWeight ? face.fontWeight.toString() : face.fontWeight);
const fontStyle = formatFontStyle(face.fontStyle);
// Create font style and font weight lists without duplicates.
if (fontStyle && Object.keys(fontStyle).length) {
if (!fontStyles.some(style => style.value === fontStyle.value)) {
fontStyles.push(fontStyle);
}
}
if (fontWeight && Object.keys(fontWeight).length) {
if (!fontWeights.some(weight => weight.value === fontWeight.value)) {
if (!isVariableFont) {
fontWeights.push(fontWeight);
}
}
}
});
// If there is no font weight of 600 or above, then include faux bold as an option.
if (!fontWeights.some(weight => weight.value >= '600')) {
fontWeights.push({
name: (0,external_wp_i18n_namespaceObject._x)('Bold', 'font weight'),
value: '700'
});
}
// If there is no italic font style, then include faux italic as an option.
if (!fontStyles.some(style => style.value === 'italic')) {
fontStyles.push({
name: (0,external_wp_i18n_namespaceObject._x)('Italic', 'font style'),
value: 'italic'
});
}
// Use default font styles and weights for system fonts.
if (isSystemFont) {
fontStyles = FONT_STYLES;
fontWeights = FONT_WEIGHTS;
}
// Use default styles and weights if there are no available styles or weights from the provided font faces.
fontStyles = fontStyles.length === 0 ? FONT_STYLES : fontStyles;
fontWeights = fontWeights.length === 0 ? FONT_WEIGHTS : fontWeights;
// Generate combined font style and weight options for available fonts.
fontStyles.forEach(({
name: styleName,
value: styleValue
}) => {
fontWeights.forEach(({
name: weightName,
value: weightValue
}) => {
const optionName = styleValue === 'normal' ? weightName : (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: 1: Font weight name. 2: Font style name. */
(0,external_wp_i18n_namespaceObject._x)('%1$s %2$s', 'font'), weightName, styleName);
combinedStyleAndWeightOptions.push({
key: `${styleValue}-${weightValue}`,
name: optionName,
style: {
fontStyle: styleValue,
fontWeight: weightValue
}
});
});
});
return {
fontStyles,
fontWeights,
combinedStyleAndWeightOptions,
isSystemFont,
isVariableFont
};
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/global-styles/typography-utils.js
/**
* The fluid utilities must match the backend equivalent.
* See: gutenberg_get_typography_font_size_value() in lib/block-supports/typography.php
* ---------------------------------------------------------------
*/
/**
* Internal dependencies
*/
/**
* @typedef {Object} FluidPreset
* @property {string|undefined} max A maximum font size value.
* @property {?string|undefined} min A minimum font size value.
*/
/**
* @typedef {Object} Preset
* @property {?string|?number} size A default font size.
* @property {string} name A font size name, displayed in the UI.
* @property {string} slug A font size slug
* @property {boolean|FluidPreset|undefined} fluid Specifies the minimum and maximum font size value of a fluid font size.
*/
/**
* @typedef {Object} TypographySettings
* @property {?string} minViewportWidth Minimum viewport size from which type will have fluidity. Optional if size is specified.
* @property {?string} maxViewportWidth Maximum size up to which type will have fluidity. Optional if size is specified.
* @property {?number} scaleFactor A scale factor to determine how fast a font scales within boundaries. Optional.
* @property {?number} minFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional.
* @property {?string} minFontSize The smallest a calculated font size may be. Optional.
*/
/**
* Returns a font-size value based on a given font-size preset.
* Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values.
*
* The Core PHP equivalent is wp_get_typography_font_size_value().
*
* @param {Preset} preset
* @param {Object} settings
* @param {boolean|TypographySettings} settings.typography.fluid Whether fluid typography is enabled, and, optionally, fluid font size options.
* @param {Object?} settings.typography.layout Layout options.
*
* @return {string|*} A font-size value or the value of preset.size.
*/
function getTypographyFontSizeValue(preset, settings) {
const {
size: defaultSize
} = preset;
/*
* Catch falsy values and 0/'0'. Fluid calculations cannot be performed on `0`.
* Also return early when a preset font size explicitly disables fluid typography with `false`.
*/
if (!defaultSize || '0' === defaultSize || false === preset?.fluid) {
return defaultSize;
}
/*
* Return early when fluid typography is disabled in the settings, and there
* are no local settings to enable it for the individual preset.
*
* If this condition isn't met, either the settings or individual preset settings
* have enabled fluid typography.
*/
if (!isFluidTypographyEnabled(settings?.typography) && !isFluidTypographyEnabled(preset)) {
return defaultSize;
}
let fluidTypographySettings = getFluidTypographyOptionsFromSettings(settings);
fluidTypographySettings = typeof fluidTypographySettings?.fluid === 'object' ? fluidTypographySettings?.fluid : {};
const fluidFontSizeValue = getComputedFluidTypographyValue({
minimumFontSize: preset?.fluid?.min,
maximumFontSize: preset?.fluid?.max,
fontSize: defaultSize,
minimumFontSizeLimit: fluidTypographySettings?.minFontSize,
maximumViewportWidth: fluidTypographySettings?.maxViewportWidth,
minimumViewportWidth: fluidTypographySettings?.minViewportWidth
});
if (!!fluidFontSizeValue) {
return fluidFontSizeValue;
}
return defaultSize;
}
function isFluidTypographyEnabled(typographySettings) {
const fluidSettings = typographySettings?.fluid;
return true === fluidSettings || fluidSettings && typeof fluidSettings === 'object' && Object.keys(fluidSettings).length > 0;
}
/**
* Returns fluid typography settings from theme.json setting object.
*
* @param {Object} settings Theme.json settings
* @param {Object} settings.typography Theme.json typography settings
* @param {Object} settings.layout Theme.json layout settings
* @return {TypographySettings} Fluid typography settings
*/
function getFluidTypographyOptionsFromSettings(settings) {
const typographySettings = settings?.typography;
const layoutSettings = settings?.layout;
const defaultMaxViewportWidth = getTypographyValueAndUnit(layoutSettings?.wideSize) ? layoutSettings?.wideSize : null;
return isFluidTypographyEnabled(typographySettings) && defaultMaxViewportWidth ? {
fluid: {
maxViewportWidth: defaultMaxViewportWidth,
...typographySettings.fluid
}
} : {
fluid: typographySettings?.fluid
};
}
/**
* Returns an object of merged font families and the font faces from the selected font family
* based on the theme.json settings object and the currently selected font family.
*
* @param {Object} settings Theme.json settings.
* @param {string} selectedFontFamily Decoded font family string.
* @return {Object} Merged font families and font faces from the selected font family.
*/
function getMergedFontFamiliesAndFontFamilyFaces(settings, selectedFontFamily) {
var _fontFamilies$find$fo;
const fontFamiliesFromSettings = settings?.typography?.fontFamilies;
const fontFamilies = ['default', 'theme', 'custom'].flatMap(key => {
var _fontFamiliesFromSett;
return (_fontFamiliesFromSett = fontFamiliesFromSettings?.[key]) !== null && _fontFamiliesFromSett !== void 0 ? _fontFamiliesFromSett : [];
});
const fontFamilyFaces = (_fontFamilies$find$fo = fontFamilies.find(family => family.fontFamily === selectedFontFamily)?.fontFace) !== null && _fontFamilies$find$fo !== void 0 ? _fontFamilies$find$fo : [];
return {
fontFamilies,
fontFamilyFaces
};
}
/**
* Returns the nearest font weight value from the available font weight list based on the new font weight.
* The nearest font weight is the one with the smallest difference from the new font weight.
*
* @param {Array} availableFontWeights Array of available font weights.
* @param {string} newFontWeightValue New font weight value.
* @return {string} Nearest font weight.
*/
function findNearestFontWeight(availableFontWeights, newFontWeightValue) {
newFontWeightValue = 'number' === typeof newFontWeightValue ? newFontWeightValue.toString() : newFontWeightValue;
if (!newFontWeightValue || typeof newFontWeightValue !== 'string') {
return '';
}
if (!availableFontWeights || availableFontWeights.length === 0) {
return newFontWeightValue;
}
const nearestFontWeight = availableFontWeights?.reduce((nearest, {
value: fw
}) => {
const currentDiff = Math.abs(parseInt(fw) - parseInt(newFontWeightValue));
const nearestDiff = Math.abs(parseInt(nearest) - parseInt(newFontWeightValue));
return currentDiff < nearestDiff ? fw : nearest;
}, availableFontWeights[0]?.value);
return nearestFontWeight;
}
/**
* Returns the nearest font style based on the new font style.
* Defaults to an empty string if the new font style is not valid or available.
*
* @param {Array} availableFontStyles Array of available font weights.
* @param {string} newFontStyleValue New font style value.
* @return {string} Nearest font style or an empty string.
*/
function findNearestFontStyle(availableFontStyles, newFontStyleValue) {
if (typeof newFontStyleValue !== 'string' || !newFontStyleValue) {
return '';
}
const validStyles = ['normal', 'italic', 'oblique'];
if (!validStyles.includes(newFontStyleValue)) {
return '';
}
if (!availableFontStyles || availableFontStyles.length === 0 || availableFontStyles.find(style => style.value === newFontStyleValue)) {
return newFontStyleValue;
}
if (newFontStyleValue === 'oblique' && !availableFontStyles.find(style => style.value === 'oblique')) {
return 'italic';
}
return '';
}
/**
* Returns the nearest font style and weight based on the available font family faces and the new font style and weight.
*
* @param {Array} fontFamilyFaces Array of available font family faces.
* @param {string} fontStyle New font style. Defaults to previous value.
* @param {string} fontWeight New font weight. Defaults to previous value.
* @return {Object} Nearest font style and font weight.
*/
function findNearestStyleAndWeight(fontFamilyFaces, fontStyle, fontWeight) {
let nearestFontStyle = fontStyle;
let nearestFontWeight = fontWeight;
const {
fontStyles,
fontWeights,
combinedStyleAndWeightOptions
} = getFontStylesAndWeights(fontFamilyFaces);
// Check if the new font style and weight are available in the font family faces.
const hasFontStyle = fontStyles?.some(({
value: fs
}) => fs === fontStyle);
const hasFontWeight = fontWeights?.some(({
value: fw
}) => fw?.toString() === fontWeight?.toString());
if (!hasFontStyle) {
/*
* Default to italic if oblique is not available.
* Or find the nearest font style based on the nearest font weight.
*/
nearestFontStyle = fontStyle ? findNearestFontStyle(fontStyles, fontStyle) : combinedStyleAndWeightOptions?.find(option => option.style.fontWeight === findNearestFontWeight(fontWeights, fontWeight))?.style?.fontStyle;
}
if (!hasFontWeight) {
/*
* Find the nearest font weight based on available weights.
* Or find the nearest font weight based on the nearest font style.
*/
nearestFontWeight = fontWeight ? findNearestFontWeight(fontWeights, fontWeight) : combinedStyleAndWeightOptions?.find(option => option.style.fontStyle === (nearestFontStyle || fontStyle))?.style?.fontWeight;
}
return {
nearestFontStyle,
nearestFontWeight
};
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/global-styles/utils.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/* Supporting data. */
const ROOT_BLOCK_SELECTOR = 'body';
const ROOT_CSS_PROPERTIES_SELECTOR = ':root';
const PRESET_METADATA = [{
path: ['color', 'palette'],
valueKey: 'color',
cssVarInfix: 'color',
classes: [{
classSuffix: 'color',
propertyName: 'color'
}, {
classSuffix: 'background-color',
propertyName: 'background-color'
}, {
classSuffix: 'border-color',
propertyName: 'border-color'
}]
}, {
path: ['color', 'gradients'],
valueKey: 'gradient',
cssVarInfix: 'gradient',
classes: [{
classSuffix: 'gradient-background',
propertyName: 'background'
}]
}, {
path: ['color', 'duotone'],
valueKey: 'colors',
cssVarInfix: 'duotone',
valueFunc: ({
slug
}) => `url( '#wp-duotone-${slug}' )`,
classes: []
}, {
path: ['shadow', 'presets'],
valueKey: 'shadow',
cssVarInfix: 'shadow',
classes: []
}, {
path: ['typography', 'fontSizes'],
valueFunc: (preset, settings) => getTypographyFontSizeValue(preset, settings),
valueKey: 'size',
cssVarInfix: 'font-size',
classes: [{
classSuffix: 'font-size',
propertyName: 'font-size'
}]
}, {
path: ['typography', 'fontFamilies'],
valueKey: 'fontFamily',
cssVarInfix: 'font-family',
classes: [{
classSuffix: 'font-family',
propertyName: 'font-family'
}]
}, {
path: ['spacing', 'spacingSizes'],
valueKey: 'size',
cssVarInfix: 'spacing',
valueFunc: ({
size
}) => size,
classes: []
}];
const STYLE_PATH_TO_CSS_VAR_INFIX = {
'color.background': 'color',
'color.text': 'color',
'filter.duotone': 'duotone',
'elements.link.color.text': 'color',
'elements.link.:hover.color.text': 'color',
'elements.link.typography.fontFamily': 'font-family',
'elements.link.typography.fontSize': 'font-size',
'elements.button.color.text': 'color',
'elements.button.color.background': 'color',
'elements.caption.color.text': 'color',
'elements.button.typography.fontFamily': 'font-family',
'elements.button.typography.fontSize': 'font-size',
'elements.heading.color': 'color',
'elements.heading.color.background': 'color',
'elements.heading.typography.fontFamily': 'font-family',
'elements.heading.gradient': 'gradient',
'elements.heading.color.gradient': 'gradient',
'elements.h1.color': 'color',
'elements.h1.color.background': 'color',
'elements.h1.typography.fontFamily': 'font-family',
'elements.h1.color.gradient': 'gradient',
'elements.h2.color': 'color',
'elements.h2.color.background': 'color',
'elements.h2.typography.fontFamily': 'font-family',
'elements.h2.color.gradient': 'gradient',
'elements.h3.color': 'color',
'elements.h3.color.background': 'color',
'elements.h3.typography.fontFamily': 'font-family',
'elements.h3.color.gradient': 'gradient',
'elements.h4.color': 'color',
'elements.h4.color.background': 'color',
'elements.h4.typography.fontFamily': 'font-family',
'elements.h4.color.gradient': 'gradient',
'elements.h5.color': 'color',
'elements.h5.color.background': 'color',
'elements.h5.typography.fontFamily': 'font-family',
'elements.h5.color.gradient': 'gradient',
'elements.h6.color': 'color',
'elements.h6.color.background': 'color',
'elements.h6.typography.fontFamily': 'font-family',
'elements.h6.color.gradient': 'gradient',
'color.gradient': 'gradient',
shadow: 'shadow',
'typography.fontSize': 'font-size',
'typography.fontFamily': 'font-family'
};
// A static list of block attributes that store global style preset slugs.
const STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {
'color.background': 'backgroundColor',
'color.text': 'textColor',
'color.gradient': 'gradient',
'typography.fontSize': 'fontSize',
'typography.fontFamily': 'fontFamily'
};
function useToolsPanelDropdownMenuProps() {
const isMobile = (0,external_wp_compose_namespaceObject.useViewportMatch)('medium', '<');
return !isMobile ? {
popoverProps: {
placement: 'left-start',
// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
offset: 259
}
} : {};
}
function findInPresetsBy(features, blockName, presetPath, presetProperty, presetValueValue) {
// Block presets take priority above root level presets.
const orderedPresetsByOrigin = [getValueFromObjectPath(features, ['blocks', blockName, ...presetPath]), getValueFromObjectPath(features, presetPath)];
for (const presetByOrigin of orderedPresetsByOrigin) {
if (presetByOrigin) {
// Preset origins ordered by priority.
const origins = ['custom', 'theme', 'default'];
for (const origin of origins) {
const presets = presetByOrigin[origin];
if (presets) {
const presetObject = presets.find(preset => preset[presetProperty] === presetValueValue);
if (presetObject) {
if (presetProperty === 'slug') {
return presetObject;
}
// If there is a highest priority preset with the same slug but different value the preset we found was overwritten and should be ignored.
const highestPresetObjectWithSameSlug = findInPresetsBy(features, blockName, presetPath, 'slug', presetObject.slug);
if (highestPresetObjectWithSameSlug[presetProperty] === presetObject[presetProperty]) {
return presetObject;
}
return undefined;
}
}
}
}
}
}
function getPresetVariableFromValue(features, blockName, variableStylePath, presetPropertyValue) {
if (!presetPropertyValue) {
return presetPropertyValue;
}
const cssVarInfix = STYLE_PATH_TO_CSS_VAR_INFIX[variableStylePath];
const metadata = PRESET_METADATA.find(data => data.cssVarInfix === cssVarInfix);
if (!metadata) {
// The property doesn't have preset data
// so the value should be returned as it is.
return presetPropertyValue;
}
const {
valueKey,
path
} = metadata;
const presetObject = findInPresetsBy(features, blockName, path, valueKey, presetPropertyValue);
if (!presetObject) {
// Value wasn't found in the presets,
// so it must be a custom value.
return presetPropertyValue;
}
return `var:preset|${cssVarInfix}|${presetObject.slug}`;
}
function getValueFromPresetVariable(features, blockName, variable, [presetType, slug]) {
const metadata = PRESET_METADATA.find(data => data.cssVarInfix === presetType);
if (!metadata) {
return variable;
}
const presetObject = findInPresetsBy(features.settings, blockName, metadata.path, 'slug', slug);
if (presetObject) {
const {
valueKey
} = metadata;
const result = presetObject[valueKey];
return getValueFromVariable(features, blockName, result);
}
return variable;
}
function getValueFromCustomVariable(features, blockName, variable, path) {
var _getValueFromObjectPa;
const result = (_getValueFromObjectPa = getValueFromObjectPath(features.settings, ['blocks', blockName, 'custom', ...path])) !== null && _getValueFromObjectPa !== void 0 ? _getValueFromObjectPa : getValueFromObjectPath(features.settings, ['custom', ...path]);
if (!result) {
return variable;
}
// A variable may reference another variable so we need recursion until we find the value.
return getValueFromVariable(features, blockName, result);
}
/**
* Attempts to fetch the value of a theme.json CSS variable.
*
* @param {Object} features GlobalStylesContext config, e.g., user, base or merged. Represents the theme.json tree.
* @param {string} blockName The name of a block as represented in the styles property. E.g., 'root' for root-level, and 'core/${blockName}' for blocks.
* @param {string|*} variable An incoming style value. A CSS var value is expected, but it could be any value.
* @return {string|*|{ref}} The value of the CSS var, if found. If not found, the passed variable argument.
*/
function getValueFromVariable(features, blockName, variable) {
if (!variable || typeof variable !== 'string') {
if (typeof variable?.ref === 'string') {
variable = getValueFromObjectPath(features, variable.ref);
// Presence of another ref indicates a reference to another dynamic value.
// Pointing to another dynamic value is not supported.
if (!variable || !!variable?.ref) {
return variable;
}
} else {
return variable;
}
}
const USER_VALUE_PREFIX = 'var:';
const THEME_VALUE_PREFIX = 'var(--wp--';
const THEME_VALUE_SUFFIX = ')';
let parsedVar;
if (variable.startsWith(USER_VALUE_PREFIX)) {
parsedVar = variable.slice(USER_VALUE_PREFIX.length).split('|');
} else if (variable.startsWith(THEME_VALUE_PREFIX) && variable.endsWith(THEME_VALUE_SUFFIX)) {
parsedVar = variable.slice(THEME_VALUE_PREFIX.length, -THEME_VALUE_SUFFIX.length).split('--');
} else {
// We don't know how to parse the value: either is raw of uses complex CSS such as `calc(1px * var(--wp--variable) )`
return variable;
}
const [type, ...path] = parsedVar;
if (type === 'preset') {
return getValueFromPresetVariable(features, blockName, variable, path);
}
if (type === 'custom') {
return getValueFromCustomVariable(features, blockName, variable, path);
}
return variable;
}
/**
* Function that scopes a selector with another one. This works a bit like
* SCSS nesting except the `&` operator isn't supported.
*
* @example
* ```js
* const scope = '.a, .b .c';
* const selector = '> .x, .y';
* const merged = scopeSelector( scope, selector );
* // merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'
* ```
*
* @param {string} scope Selector to scope to.
* @param {string} selector Original selector.
*
* @return {string} Scoped selector.
*/
function scopeSelector(scope, selector) {
if (!scope || !selector) {
return selector;
}
const scopes = scope.split(',');
const selectors = selector.split(',');
const selectorsScoped = [];
scopes.forEach(outer => {
selectors.forEach(inner => {
selectorsScoped.push(`${outer.trim()} ${inner.trim()}`);
});
});
return selectorsScoped.join(', ');
}
/**
* Scopes a collection of selectors for features and subfeatures.
*
* @example
* ```js
* const scope = '.custom-scope';
* const selectors = {
* color: '.wp-my-block p',
* typography: { fontSize: '.wp-my-block caption' },
* };
* const result = scopeFeatureSelector( scope, selectors );
* // result is {
* // color: '.custom-scope .wp-my-block p',
* // typography: { fonSize: '.custom-scope .wp-my-block caption' },
* // }
* ```
*
* @param {string} scope Selector to scope collection of selectors with.
* @param {Object} selectors Collection of feature selectors e.g.
*
* @return {Object|undefined} Scoped collection of feature selectors.
*/
function scopeFeatureSelectors(scope, selectors) {
if (!scope || !selectors) {
return;
}
const featureSelectors = {};
Object.entries(selectors).forEach(([feature, selector]) => {
if (typeof selector === 'string') {
featureSelectors[feature] = scopeSelector(scope, selector);
}
if (typeof selector === 'object') {
featureSelectors[feature] = {};
Object.entries(selector).forEach(([subfeature, subfeatureSelector]) => {
featureSelectors[feature][subfeature] = scopeSelector(scope, subfeatureSelector);
});
}
});
return featureSelectors;
}
/**
* Appends a sub-selector to an existing one.
*
* Given the compounded `selector` "h1, h2, h3"
* and the `toAppend` selector ".some-class" the result will be
* "h1.some-class, h2.some-class, h3.some-class".
*
* @param {string} selector Original selector.
* @param {string} toAppend Selector to append.
*
* @return {string} The new selector.
*/
function appendToSelector(selector, toAppend) {
if (!selector.includes(',')) {
return selector + toAppend;
}
const selectors = selector.split(',');
const newSelectors = selectors.map(sel => sel + toAppend);
return newSelectors.join(',');
}
/**
* Compares global style variations according to their styles and settings properties.
*
* @example
* ```js
* const globalStyles = { styles: { typography: { fontSize: '10px' } }, settings: {} };
* const variation = { styles: { typography: { fontSize: '10000px' } }, settings: {} };
* const isEqual = areGlobalStyleConfigsEqual( globalStyles, variation );
* // false
* ```
*
* @param {Object} original A global styles object.
* @param {Object} variation A global styles object.
*
* @return {boolean} Whether `original` and `variation` match.
*/
function areGlobalStyleConfigsEqual(original, variation) {
if (typeof original !== 'object' || typeof variation !== 'object') {
return original === variation;
}
return es6_default()(original?.styles, variation?.styles) && es6_default()(original?.settings, variation?.settings);
}
/**
* Generates the selector for a block style variation by creating the
* appropriate CSS class and adding it to the ancestor portion of the block's
* selector.
*
* For example, take the Button block which has a compound selector:
* `.wp-block-button .wp-block-button__link`. With a variation named 'custom',
* the class `.is-style-custom` should be added to the `.wp-block-button`
* ancestor only.
*
* This function will take into account comma separated and complex selectors.
*
* @param {string} variation Name for the variation.
* @param {string} blockSelector CSS selector for the block.
*
* @return {string} CSS selector for the block style variation.
*/
function getBlockStyleVariationSelector(variation, blockSelector) {
const variationClass = `.is-style-${variation}`;
if (!blockSelector) {
return variationClass;
}
const ancestorRegex = /((?::\([^)]+\))?\s*)([^\s:]+)/;
const addVariationClass = (_match, group1, group2) => {
return group1 + group2 + variationClass;
};
const result = blockSelector.split(',').map(part => part.replace(ancestorRegex, addVariationClass));
return result.join(',');
}
/**
* Looks up a theme file URI based on a relative path.
*
* @param {string} file A relative path.
* @param {Array<Object>} themeFileURIs A collection of absolute theme file URIs and their corresponding file paths.
* @return {string} A resolved theme file URI, if one is found in the themeFileURIs collection.
*/
function getResolvedThemeFilePath(file, themeFileURIs) {
if (!file || !themeFileURIs || !Array.isArray(themeFileURIs)) {
return file;
}
const uri = themeFileURIs.find(themeFileUri => themeFileUri?.name === file);
if (!uri?.href) {
return file;
}
return uri?.href;
}
/**
* Resolves ref values in theme JSON.
*
* @param {Object|string} ruleValue A block style value that may contain a reference to a theme.json value.
* @param {Object} tree A theme.json object.
* @return {*} The resolved value or incoming ruleValue.
*/
function getResolvedRefValue(ruleValue, tree) {
if (!ruleValue || !tree) {
return ruleValue;
}
/*
* Where the rule value is an object with a 'ref' property pointing
* to a path, this converts that path into the value at that path.
* For example: { "ref": "style.color.background" } => "#fff".
*/
if (typeof ruleValue !== 'string' && ruleValue?.ref) {
const resolvedRuleValue = (0,external_wp_styleEngine_namespaceObject.getCSSValueFromRawStyle)(getValueFromObjectPath(tree, ruleValue.ref));
/*
* Presence of another ref indicates a reference to another dynamic value.
* Pointing to another dynamic value is not supported.
*/
if (resolvedRuleValue?.ref) {
return undefined;
}
if (resolvedRuleValue === undefined) {
return ruleValue;
}
return resolvedRuleValue;
}
return ruleValue;
}
/**
* Resolves ref and relative path values in theme JSON.
*
* @param {Object|string} ruleValue A block style value that may contain a reference to a theme.json value.
* @param {Object} tree A theme.json object.
* @return {*} The resolved value or incoming ruleValue.
*/
function getResolvedValue(ruleValue, tree) {
if (!ruleValue || !tree) {
return ruleValue;
}
// Resolve ref values.
const resolvedValue = getResolvedRefValue(ruleValue, tree);
// Resolve relative paths.
if (resolvedValue?.url) {
resolvedValue.url = getResolvedThemeFilePath(resolvedValue.url, tree?._links?.['wp:theme-file']);
}
return resolvedValue;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/global-styles/context.js
/**
* WordPress dependencies
*/
const DEFAULT_GLOBAL_STYLES_CONTEXT = {
user: {},
base: {},
merged: {},
setUserConfig: () => {}
};
const GlobalStylesContext = (0,external_wp_element_namespaceObject.createContext)(DEFAULT_GLOBAL_STYLES_CONTEXT);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/global-styles/hooks.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const EMPTY_CONFIG = {
settings: {},
styles: {}
};
const VALID_SETTINGS = ['appearanceTools', 'useRootPaddingAwareAlignments', 'background.backgroundImage', 'background.backgroundRepeat', 'background.backgroundSize', 'background.backgroundPosition', 'border.color', 'border.radius', 'border.style', 'border.width', 'shadow.presets', 'shadow.defaultPresets', 'color.background', 'color.button', 'color.caption', 'color.custom', 'color.customDuotone', 'color.customGradient', 'color.defaultDuotone', 'color.defaultGradients', 'color.defaultPalette', 'color.duotone', 'color.gradients', 'color.heading', 'color.link', 'color.palette', 'color.text', 'custom', 'dimensions.aspectRatio', 'dimensions.minHeight', 'layout.contentSize', 'layout.definitions', 'layout.wideSize', 'lightbox.enabled', 'lightbox.allowEditing', 'position.fixed', 'position.sticky', 'spacing.customSpacingSize', 'spacing.defaultSpacingSizes', 'spacing.spacingSizes', 'spacing.spacingScale', 'spacing.blockGap', 'spacing.margin', 'spacing.padding', 'spacing.units', 'typography.fluid', 'typography.customFontSize', 'typography.defaultFontSizes', 'typography.dropCap', 'typography.fontFamilies', 'typography.fontSizes', 'typography.fontStyle', 'typography.fontWeight', 'typography.letterSpacing', 'typography.lineHeight', 'typography.textAlign', 'typography.textColumns', 'typography.textDecoration', 'typography.textTransform', 'typography.writingMode'];
const useGlobalStylesReset = () => {
const {
user,
setUserConfig
} = (0,external_wp_element_namespaceObject.useContext)(GlobalStylesContext);
const config = {
settings: user.settings,
styles: user.styles
};
const canReset = !!config && !es6_default()(config, EMPTY_CONFIG);
return [canReset, (0,external_wp_element_namespaceObject.useCallback)(() => setUserConfig(EMPTY_CONFIG), [setUserConfig])];
};
function useGlobalSetting(propertyPath, blockName, source = 'all') {
const {
setUserConfig,
...configs
} = (0,external_wp_element_namespaceObject.useContext)(GlobalStylesContext);
const appendedBlockPath = blockName ? '.blocks.' + blockName : '';
const appendedPropertyPath = propertyPath ? '.' + propertyPath : '';
const contextualPath = `settings${appendedBlockPath}${appendedPropertyPath}`;
const globalPath = `settings${appendedPropertyPath}`;
const sourceKey = source === 'all' ? 'merged' : source;
const settingValue = (0,external_wp_element_namespaceObject.useMemo)(() => {
const configToUse = configs[sourceKey];
if (!configToUse) {
throw 'Unsupported source';
}
if (propertyPath) {
var _getValueFromObjectPa;
return (_getValueFromObjectPa = getValueFromObjectPath(configToUse, contextualPath)) !== null && _getValueFromObjectPa !== void 0 ? _getValueFromObjectPa : getValueFromObjectPath(configToUse, globalPath);
}
let result = {};
VALID_SETTINGS.forEach(setting => {
var _getValueFromObjectPa2;
const value = (_getValueFromObjectPa2 = getValueFromObjectPath(configToUse, `settings${appendedBlockPath}.${setting}`)) !== null && _getValueFromObjectPa2 !== void 0 ? _getValueFromObjectPa2 : getValueFromObjectPath(configToUse, `settings.${setting}`);
if (value !== undefined) {
result = setImmutably(result, setting.split('.'), value);
}
});
return result;
}, [configs, sourceKey, propertyPath, contextualPath, globalPath, appendedBlockPath]);
const setSetting = newValue => {
setUserConfig(currentConfig => setImmutably(currentConfig, contextualPath.split('.'), newValue));
};
return [settingValue, setSetting];
}
function useGlobalStyle(path, blockName, source = 'all', {
shouldDecodeEncode = true
} = {}) {
const {
merged: mergedConfig,
base: baseConfig,
user: userConfig,
setUserConfig
} = (0,external_wp_element_namespaceObject.useContext)(GlobalStylesContext);
const appendedPath = path ? '.' + path : '';
const finalPath = !blockName ? `styles${appendedPath}` : `styles.blocks.${blockName}${appendedPath}`;
const setStyle = newValue => {
setUserConfig(currentConfig => setImmutably(currentConfig, finalPath.split('.'), shouldDecodeEncode ? getPresetVariableFromValue(mergedConfig.settings, blockName, path, newValue) : newValue));
};
let rawResult, result;
switch (source) {
case 'all':
rawResult = getValueFromObjectPath(mergedConfig, finalPath);
result = shouldDecodeEncode ? getValueFromVariable(mergedConfig, blockName, rawResult) : rawResult;
break;
case 'user':
rawResult = getValueFromObjectPath(userConfig, finalPath);
result = shouldDecodeEncode ? getValueFromVariable(mergedConfig, blockName, rawResult) : rawResult;
break;
case 'base':
rawResult = getValueFromObjectPath(baseConfig, finalPath);
result = shouldDecodeEncode ? getValueFromVariable(baseConfig, blockName, rawResult) : rawResult;
break;
default:
throw 'Unsupported source';
}
return [result, setStyle];
}
/**
* React hook that overrides a global settings object with block and element specific settings.
*
* @param {Object} parentSettings Settings object.
* @param {blockName?} blockName Block name.
* @param {element?} element Element name.
*
* @return {Object} Merge of settings and supports.
*/
function useSettingsForBlockElement(parentSettings, blockName, element) {
const {
supportedStyles,
supports
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
return {
supportedStyles: unlock(select(external_wp_blocks_namespaceObject.store)).getSupportedStyles(blockName, element),
supports: select(external_wp_blocks_namespaceObject.store).getBlockType(blockName)?.supports
};
}, [blockName, element]);
return (0,external_wp_element_namespaceObject.useMemo)(() => {
const updatedSettings = {
...parentSettings
};
if (!supportedStyles.includes('fontSize')) {
updatedSettings.typography = {
...updatedSettings.typography,
fontSizes: {},
customFontSize: false,
defaultFontSizes: false
};
}
if (!supportedStyles.includes('fontFamily')) {
updatedSettings.typography = {
...updatedSettings.typography,
fontFamilies: {}
};
}
updatedSettings.color = {
...updatedSettings.color,
text: updatedSettings.color?.text && supportedStyles.includes('color'),
background: updatedSettings.color?.background && (supportedStyles.includes('background') || supportedStyles.includes('backgroundColor')),
button: updatedSettings.color?.button && supportedStyles.includes('buttonColor'),
heading: updatedSettings.color?.heading && supportedStyles.includes('headingColor'),
link: updatedSettings.color?.link && supportedStyles.includes('linkColor'),
caption: updatedSettings.color?.caption && supportedStyles.includes('captionColor')
};
// Some blocks can enable background colors but disable gradients.
if (!supportedStyles.includes('background')) {
updatedSettings.color.gradients = [];
updatedSettings.color.customGradient = false;
}
// If filters are not supported by the block/element, disable duotone.
if (!supportedStyles.includes('filter')) {
updatedSettings.color.defaultDuotone = false;
updatedSettings.color.customDuotone = false;
}
['lineHeight', 'fontStyle', 'fontWeight', 'letterSpacing', 'textAlign', 'textTransform', 'textDecoration', 'writingMode'].forEach(key => {
if (!supportedStyles.includes(key)) {
updatedSettings.typography = {
...updatedSettings.typography,
[key]: false
};
}
});
// The column-count style is named text column to reduce confusion with
// the columns block and manage expectations from the support.
// See: https://github.com/WordPress/gutenberg/pull/33587
if (!supportedStyles.includes('columnCount')) {
updatedSettings.typography = {
...updatedSettings.typography,
textColumns: false
};
}
['contentSize', 'wideSize'].forEach(key => {
if (!supportedStyles.includes(key)) {
updatedSettings.layout = {
...updatedSettings.layout,
[key]: false
};
}
});
['padding', 'margin', 'blockGap'].forEach(key => {
if (!supportedStyles.includes(key)) {
updatedSettings.spacing = {
...updatedSettings.spacing,
[key]: false
};
}
const sides = Array.isArray(supports?.spacing?.[key]) ? supports?.spacing?.[key] : supports?.spacing?.[key]?.sides;
// Check if spacing type is supported before adding sides.
if (sides?.length && updatedSettings.spacing?.[key]) {
updatedSettings.spacing = {
...updatedSettings.spacing,
[key]: {
...updatedSettings.spacing?.[key],
sides
}
};
}
});
['aspectRatio', 'minHeight'].forEach(key => {
if (!supportedStyles.includes(key)) {
updatedSettings.dimensions = {
...updatedSettings.dimensions,
[key]: false
};
}
});
['radius', 'color', 'style', 'width'].forEach(key => {
if (!supportedStyles.includes('border' + key.charAt(0).toUpperCase() + key.slice(1))) {
updatedSettings.border = {
...updatedSettings.border,
[key]: false
};
}
});
['backgroundImage', 'backgroundSize'].forEach(key => {
if (!supportedStyles.includes(key)) {
updatedSettings.background = {
...updatedSettings.background,
[key]: false
};
}
});
updatedSettings.shadow = supportedStyles.includes('shadow') ? updatedSettings.shadow : false;
// Text alignment is only available for blocks.
if (element) {
updatedSettings.typography.textAlign = false;
}
return updatedSettings;
}, [parentSettings, supportedStyles, supports, element]);
}
function useColorsPerOrigin(settings) {
const customColors = settings?.color?.palette?.custom;
const themeColors = settings?.color?.palette?.theme;
const defaultColors = settings?.color?.palette?.default;
const shouldDisplayDefaultColors = settings?.color?.defaultPalette;
return (0,external_wp_element_namespaceObject.useMemo)(() => {
const result = [];
if (themeColors && themeColors.length) {
result.push({
name: (0,external_wp_i18n_namespaceObject._x)('Theme', 'Indicates this palette comes from the theme.'),
colors: themeColors
});
}
if (shouldDisplayDefaultColors && defaultColors && defaultColors.length) {
result.push({
name: (0,external_wp_i18n_namespaceObject._x)('Default', 'Indicates this palette comes from WordPress.'),
colors: defaultColors
});
}
if (customColors && customColors.length) {
result.push({
name: (0,external_wp_i18n_namespaceObject._x)('Custom', 'Indicates this palette is created by the user.'),
colors: customColors
});
}
return result;
}, [customColors, themeColors, defaultColors, shouldDisplayDefaultColors]);
}
function useGradientsPerOrigin(settings) {
const customGradients = settings?.color?.gradients?.custom;
const themeGradients = settings?.color?.gradients?.theme;
const defaultGradients = settings?.color?.gradients?.default;
const shouldDisplayDefaultGradients = settings?.color?.defaultGradients;
return (0,external_wp_element_namespaceObject.useMemo)(() => {
const result = [];
if (themeGradients && themeGradients.length) {
result.push({
name: (0,external_wp_i18n_namespaceObject._x)('Theme', 'Indicates this palette comes from the theme.'),
gradients: themeGradients
});
}
if (shouldDisplayDefaultGradients && defaultGradients && defaultGradients.length) {
result.push({
name: (0,external_wp_i18n_namespaceObject._x)('Default', 'Indicates this palette comes from WordPress.'),
gradients: defaultGradients
});
}
if (customGradients && customGradients.length) {
result.push({
name: (0,external_wp_i18n_namespaceObject._x)('Custom', 'Indicates this palette is created by the user.'),
gradients: customGradients
});
}
return result;
}, [customGradients, themeGradients, defaultGradients, shouldDisplayDefaultGradients]);
}
;// CONCATENATED MODULE: ./node_modules/clsx/dist/clsx.mjs
function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f)}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}/* harmony default export */ const dist_clsx = (clsx);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/utils.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* External dependencies
*/
/**
* Removed falsy values from nested object.
*
* @param {*} object
* @return {*} Object cleaned from falsy values
*/
const utils_cleanEmptyObject = object => {
if (object === null || typeof object !== 'object' || Array.isArray(object)) {
return object;
}
const cleanedNestedObjects = Object.entries(object).map(([key, value]) => [key, utils_cleanEmptyObject(value)]).filter(([, value]) => value !== undefined);
return !cleanedNestedObjects.length ? undefined : Object.fromEntries(cleanedNestedObjects);
};
function transformStyles(activeSupports, migrationPaths, result, source, index, results) {
// If there are no active supports return early.
if (Object.values(activeSupports !== null && activeSupports !== void 0 ? activeSupports : {}).every(isActive => !isActive)) {
return result;
}
// If the condition verifies we are probably in the presence of a wrapping transform
// e.g: nesting paragraphs in a group or columns and in that case the styles should not be transformed.
if (results.length === 1 && result.innerBlocks.length === source.length) {
return result;
}
// For cases where we have a transform from one block to multiple blocks
// or multiple blocks to one block we apply the styles of the first source block
// to the result(s).
let referenceBlockAttributes = source[0]?.attributes;
// If we are in presence of transform between more than one block in the source
// that has more than one block in the result
// we apply the styles on source N to the result N,
// if source N does not exists we do nothing.
if (results.length > 1 && source.length > 1) {
if (source[index]) {
referenceBlockAttributes = source[index]?.attributes;
} else {
return result;
}
}
let returnBlock = result;
Object.entries(activeSupports).forEach(([support, isActive]) => {
if (isActive) {
migrationPaths[support].forEach(path => {
const styleValue = getValueFromObjectPath(referenceBlockAttributes, path);
if (styleValue) {
returnBlock = {
...returnBlock,
attributes: setImmutably(returnBlock.attributes, path, styleValue)
};
}
});
}
});
return returnBlock;
}
/**
* Check whether serialization of specific block support feature or set should
* be skipped.
*
* @param {string|Object} blockNameOrType Block name or block type object.
* @param {string} featureSet Name of block support feature set.
* @param {string} feature Name of the individual feature to check.
*
* @return {boolean} Whether serialization should occur.
*/
function shouldSkipSerialization(blockNameOrType, featureSet, feature) {
const support = (0,external_wp_blocks_namespaceObject.getBlockSupport)(blockNameOrType, featureSet);
const skipSerialization = support?.__experimentalSkipSerialization;
if (Array.isArray(skipSerialization)) {
return skipSerialization.includes(feature);
}
return skipSerialization;
}
const pendingStyleOverrides = new WeakMap();
/**
* Override a block editor settings style. Leave the ID blank to create a new
* style.
*
* @param {Object} override Override object.
* @param {?string} override.id Id of the style override, leave blank to create
* a new style.
* @param {string} override.css CSS to apply.
*/
function useStyleOverride({
id,
css
}) {
return usePrivateStyleOverride({
id,
css
});
}
function usePrivateStyleOverride({
id,
css,
assets,
__unstableType,
variation,
clientId
} = {}) {
const {
setStyleOverride,
deleteStyleOverride
} = unlock((0,external_wp_data_namespaceObject.useDispatch)(store));
const registry = (0,external_wp_data_namespaceObject.useRegistry)();
const fallbackId = (0,external_wp_element_namespaceObject.useId)();
(0,external_wp_element_namespaceObject.useEffect)(() => {
// Unmount if there is CSS and assets are empty.
if (!css && !assets) {
return;
}
const _id = id || fallbackId;
const override = {
id,
css,
assets,
__unstableType,
variation,
clientId
};
// Batch updates to style overrides to avoid triggering cascading renders
// for each style override block included in a tree and optimize initial render.
if (!pendingStyleOverrides.get(registry)) {
pendingStyleOverrides.set(registry, []);
}
pendingStyleOverrides.get(registry).push([_id, override]);
window.queueMicrotask(() => {
if (pendingStyleOverrides.get(registry)?.length) {
registry.batch(() => {
pendingStyleOverrides.get(registry).forEach(args => {
setStyleOverride(...args);
});
pendingStyleOverrides.set(registry, []);
});
}
});
return () => {
const isPending = pendingStyleOverrides.get(registry)?.find(([currentId]) => currentId === _id);
if (isPending) {
pendingStyleOverrides.set(registry, pendingStyleOverrides.get(registry).filter(([currentId]) => currentId !== _id));
} else {
deleteStyleOverride(_id);
}
};
}, [id, css, clientId, assets, __unstableType, fallbackId, setStyleOverride, deleteStyleOverride, registry]);
}
/**
* Based on the block and its context, returns an object of all the block settings.
* This object can be passed as a prop to all the Styles UI components
* (TypographyPanel, DimensionsPanel...).
*
* @param {string} name Block name.
* @param {*} parentLayout Parent layout.
*
* @return {Object} Settings object.
*/
function useBlockSettings(name, parentLayout) {
const [backgroundImage, backgroundSize, customFontFamilies, defaultFontFamilies, themeFontFamilies, defaultFontSizesEnabled, customFontSizes, defaultFontSizes, themeFontSizes, customFontSize, fontStyle, fontWeight, lineHeight, textAlign, textColumns, textDecoration, writingMode, textTransform, letterSpacing, padding, margin, blockGap, defaultSpacingSizesEnabled, customSpacingSize, userSpacingSizes, defaultSpacingSizes, themeSpacingSizes, units, aspectRatio, minHeight, layout, borderColor, borderRadius, borderStyle, borderWidth, customColorsEnabled, customColors, customDuotone, themeColors, defaultColors, defaultPalette, defaultDuotone, userDuotonePalette, themeDuotonePalette, defaultDuotonePalette, userGradientPalette, themeGradientPalette, defaultGradientPalette, defaultGradients, areCustomGradientsEnabled, isBackgroundEnabled, isLinkEnabled, isTextEnabled, isHeadingEnabled, isButtonEnabled, shadow] = use_settings_useSettings('background.backgroundImage', 'background.backgroundSize', 'typography.fontFamilies.custom', 'typography.fontFamilies.default', 'typography.fontFamilies.theme', 'typography.defaultFontSizes', 'typography.fontSizes.custom', 'typography.fontSizes.default', 'typography.fontSizes.theme', 'typography.customFontSize', 'typography.fontStyle', 'typography.fontWeight', 'typography.lineHeight', 'typography.textAlign', 'typography.textColumns', 'typography.textDecoration', 'typography.writingMode', 'typography.textTransform', 'typography.letterSpacing', 'spacing.padding', 'spacing.margin', 'spacing.blockGap', 'spacing.defaultSpacingSizes', 'spacing.customSpacingSize', 'spacing.spacingSizes.custom', 'spacing.spacingSizes.default', 'spacing.spacingSizes.theme', 'spacing.units', 'dimensions.aspectRatio', 'dimensions.minHeight', 'layout', 'border.color', 'border.radius', 'border.style', 'border.width', 'color.custom', 'color.palette.custom', 'color.customDuotone', 'color.palette.theme', 'color.palette.default', 'color.defaultPalette', 'color.defaultDuotone', 'color.duotone.custom', 'color.duotone.theme', 'color.duotone.default', 'color.gradients.custom', 'color.gradients.theme', 'color.gradients.default', 'color.defaultGradients', 'color.customGradient', 'color.background', 'color.link', 'color.text', 'color.heading', 'color.button', 'shadow');
const rawSettings = (0,external_wp_element_namespaceObject.useMemo)(() => {
return {
background: {
backgroundImage,
backgroundSize
},
color: {
palette: {
custom: customColors,
theme: themeColors,
default: defaultColors
},
gradients: {
custom: userGradientPalette,
theme: themeGradientPalette,
default: defaultGradientPalette
},
duotone: {
custom: userDuotonePalette,
theme: themeDuotonePalette,
default: defaultDuotonePalette
},
defaultGradients,
defaultPalette,
defaultDuotone,
custom: customColorsEnabled,
customGradient: areCustomGradientsEnabled,
customDuotone,
background: isBackgroundEnabled,
link: isLinkEnabled,
heading: isHeadingEnabled,
button: isButtonEnabled,
text: isTextEnabled
},
typography: {
fontFamilies: {
custom: customFontFamilies,
default: defaultFontFamilies,
theme: themeFontFamilies
},
fontSizes: {
custom: customFontSizes,
default: defaultFontSizes,
theme: themeFontSizes
},
customFontSize,
defaultFontSizes: defaultFontSizesEnabled,
fontStyle,
fontWeight,
lineHeight,
textAlign,
textColumns,
textDecoration,
textTransform,
letterSpacing,
writingMode
},
spacing: {
spacingSizes: {
custom: userSpacingSizes,
default: defaultSpacingSizes,
theme: themeSpacingSizes
},
customSpacingSize,
defaultSpacingSizes: defaultSpacingSizesEnabled,
padding,
margin,
blockGap,
units
},
border: {
color: borderColor,
radius: borderRadius,
style: borderStyle,
width: borderWidth
},
dimensions: {
aspectRatio,
minHeight
},
layout,
parentLayout,
shadow
};
}, [backgroundImage, backgroundSize, customFontFamilies, defaultFontFamilies, themeFontFamilies, defaultFontSizesEnabled, customFontSizes, defaultFontSizes, themeFontSizes, customFontSize, fontStyle, fontWeight, lineHeight, textAlign, textColumns, textDecoration, textTransform, letterSpacing, writingMode, padding, margin, blockGap, defaultSpacingSizesEnabled, customSpacingSize, userSpacingSizes, defaultSpacingSizes, themeSpacingSizes, units, aspectRatio, minHeight, layout, parentLayout, borderColor, borderRadius, borderStyle, borderWidth, customColorsEnabled, customColors, customDuotone, themeColors, defaultColors, defaultPalette, defaultDuotone, userDuotonePalette, themeDuotonePalette, defaultDuotonePalette, userGradientPalette, themeGradientPalette, defaultGradientPalette, defaultGradients, areCustomGradientsEnabled, isBackgroundEnabled, isLinkEnabled, isTextEnabled, isHeadingEnabled, isButtonEnabled, shadow]);
return useSettingsForBlockElement(rawSettings, name);
}
function createBlockEditFilter(features) {
// We don't want block controls to re-render when typing inside a block.
// `memo` will prevent re-renders unless props change, so only pass the
// needed props and not the whole attributes object.
features = features.map(settings => {
return {
...settings,
Edit: (0,external_wp_element_namespaceObject.memo)(settings.edit)
};
});
const withBlockEditHooks = (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(OriginalBlockEdit => props => {
const context = useBlockEditContext();
// CAUTION: code added before this line will be executed for all
// blocks, not just those that support the feature! Code added
// above this line should be carefully evaluated for its impact on
// performance.
return [...features.map((feature, i) => {
const {
Edit,
hasSupport,
attributeKeys = [],
shareWithChildBlocks
} = feature;
const shouldDisplayControls = context[mayDisplayControlsKey] || context[mayDisplayParentControlsKey] && shareWithChildBlocks;
if (!shouldDisplayControls || !hasSupport(props.name)) {
return null;
}
const neededProps = {};
for (const key of attributeKeys) {
if (props.attributes[key]) {
neededProps[key] = props.attributes[key];
}
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Edit
// We can use the index because the array length
// is fixed per page load right now.
, {
name: props.name,
isSelected: props.isSelected,
clientId: props.clientId,
setAttributes: props.setAttributes,
__unstableParentLayout: props.__unstableParentLayout
// This component is pure, so only pass needed
// props!!!
,
...neededProps
}, i);
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(OriginalBlockEdit, {
...props
}, "edit")];
}, 'withBlockEditHooks');
(0,external_wp_hooks_namespaceObject.addFilter)('editor.BlockEdit', 'core/editor/hooks', withBlockEditHooks);
}
function BlockProps({
index,
useBlockProps,
setAllWrapperProps,
...props
}) {
const wrapperProps = useBlockProps(props);
const setWrapperProps = next => setAllWrapperProps(prev => {
const nextAll = [...prev];
nextAll[index] = next;
return nextAll;
});
// Setting state after every render is fine because this component is
// pure and will only re-render when needed props change.
(0,external_wp_element_namespaceObject.useEffect)(() => {
// We could shallow compare the props, but since this component only
// changes when needed attributes change, the benefit is probably small.
setWrapperProps(wrapperProps);
return () => {
setWrapperProps(undefined);
};
});
return null;
}
const BlockPropsPure = (0,external_wp_element_namespaceObject.memo)(BlockProps);
function createBlockListBlockFilter(features) {
const withBlockListBlockHooks = (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(BlockListBlock => props => {
const [allWrapperProps, setAllWrapperProps] = (0,external_wp_element_namespaceObject.useState)(Array(features.length).fill(undefined));
return [...features.map((feature, i) => {
const {
hasSupport,
attributeKeys = [],
useBlockProps,
isMatch
} = feature;
const neededProps = {};
for (const key of attributeKeys) {
if (props.attributes[key]) {
neededProps[key] = props.attributes[key];
}
}
if (
// Skip rendering if none of the needed attributes are
// set.
!Object.keys(neededProps).length || !hasSupport(props.name) || isMatch && !isMatch(neededProps)) {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockPropsPure
// We can use the index because the array length
// is fixed per page load right now.
, {
index: i,
useBlockProps: useBlockProps
// This component is pure, so we must pass a stable
// function reference.
,
setAllWrapperProps: setAllWrapperProps,
name: props.name,
clientId: props.clientId
// This component is pure, so only pass needed
// props!!!
,
...neededProps
}, i);
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockListBlock, {
...props,
wrapperProps: allWrapperProps.filter(Boolean).reduce((acc, wrapperProps) => {
return {
...acc,
...wrapperProps,
className: dist_clsx(acc.className, wrapperProps.className),
style: {
...acc.style,
...wrapperProps.style
}
};
}, props.wrapperProps || {})
}, "edit")];
}, 'withBlockListBlockHooks');
(0,external_wp_hooks_namespaceObject.addFilter)('editor.BlockListBlock', 'core/editor/hooks', withBlockListBlockHooks);
}
function createBlockSaveFilter(features) {
function extraPropsFromHooks(props, name, attributes) {
return features.reduce((accu, feature) => {
const {
hasSupport,
attributeKeys = [],
addSaveProps
} = feature;
const neededAttributes = {};
for (const key of attributeKeys) {
if (attributes[key]) {
neededAttributes[key] = attributes[key];
}
}
if (
// Skip rendering if none of the needed attributes are
// set.
!Object.keys(neededAttributes).length || !hasSupport(name)) {
return accu;
}
return addSaveProps(accu, name, neededAttributes);
}, props);
}
(0,external_wp_hooks_namespaceObject.addFilter)('blocks.getSaveContent.extraProps', 'core/editor/hooks', extraPropsFromHooks, 0);
(0,external_wp_hooks_namespaceObject.addFilter)('blocks.getSaveContent.extraProps', 'core/editor/hooks', props => {
// Previously we had a filter deleting the className if it was an empty
// string. That filter is no longer running, so now we need to delete it
// here.
if (props.hasOwnProperty('className') && !props.className) {
delete props.className;
}
return props;
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/compat.js
/**
* WordPress dependencies
*/
function migrateLightBlockWrapper(settings) {
const {
apiVersion = 1
} = settings;
if (apiVersion < 2 && (0,external_wp_blocks_namespaceObject.hasBlockSupport)(settings, 'lightBlockWrapper', false)) {
settings.apiVersion = 2;
}
return settings;
}
(0,external_wp_hooks_namespaceObject.addFilter)('blocks.registerBlockType', 'core/compat/migrateLightBlockWrapper', migrateLightBlockWrapper);
;// CONCATENATED MODULE: external ["wp","components"]
const external_wp_components_namespaceObject = window["wp"]["components"];
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-controls/groups.js
/**
* WordPress dependencies
*/
const BlockControlsDefault = (0,external_wp_components_namespaceObject.createSlotFill)('BlockControls');
const BlockControlsBlock = (0,external_wp_components_namespaceObject.createSlotFill)('BlockControlsBlock');
const BlockControlsInline = (0,external_wp_components_namespaceObject.createSlotFill)('BlockFormatControls');
const BlockControlsOther = (0,external_wp_components_namespaceObject.createSlotFill)('BlockControlsOther');
const BlockControlsParent = (0,external_wp_components_namespaceObject.createSlotFill)('BlockControlsParent');
const groups = {
default: BlockControlsDefault,
block: BlockControlsBlock,
inline: BlockControlsInline,
other: BlockControlsOther,
parent: BlockControlsParent
};
/* harmony default export */ const block_controls_groups = (groups);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-controls/hook.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function useBlockControlsFill(group, shareWithChildBlocks) {
const context = useBlockEditContext();
if (context[mayDisplayControlsKey]) {
return block_controls_groups[group]?.Fill;
}
if (context[mayDisplayParentControlsKey] && shareWithChildBlocks) {
return block_controls_groups.parent.Fill;
}
return null;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-controls/fill.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockControlsFill({
group = 'default',
controls,
children,
__experimentalShareWithChildBlocks = false
}) {
const Fill = useBlockControlsFill(group, __experimentalShareWithChildBlocks);
if (!Fill) {
return null;
}
const innerMarkup = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [group === 'default' && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarGroup, {
controls: controls
}), children]
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalStyleProvider, {
document: document,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Fill, {
children: fillProps => {
// `fillProps.forwardedContext` is an array of context provider entries, provided by slot,
// that should wrap the fill markup.
const {
forwardedContext = []
} = fillProps;
return forwardedContext.reduce((inner, [Provider, props]) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Provider, {
...props,
children: inner
}), innerMarkup);
}
})
});
}
;// CONCATENATED MODULE: external ["wp","warning"]
const external_wp_warning_namespaceObject = window["wp"]["warning"];
var external_wp_warning_default = /*#__PURE__*/__webpack_require__.n(external_wp_warning_namespaceObject);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-controls/slot.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const {
ComponentsContext
} = unlock(external_wp_components_namespaceObject.privateApis);
function BlockControlsSlot({
group = 'default',
...props
}) {
const toolbarState = (0,external_wp_element_namespaceObject.useContext)(external_wp_components_namespaceObject.__experimentalToolbarContext);
const contextState = (0,external_wp_element_namespaceObject.useContext)(ComponentsContext);
const fillProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({
forwardedContext: [[external_wp_components_namespaceObject.__experimentalToolbarContext.Provider, {
value: toolbarState
}], [ComponentsContext.Provider, {
value: contextState
}]]
}), [toolbarState, contextState]);
const Slot = block_controls_groups[group]?.Slot;
const fills = (0,external_wp_components_namespaceObject.__experimentalUseSlotFills)(Slot?.__unstableName);
if (!Slot) {
true ? external_wp_warning_default()(`Unknown BlockControls group "${group}" provided.`) : 0;
return null;
}
if (!fills?.length) {
return null;
}
const slot = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Slot, {
...props,
bubblesVirtually: true,
fillProps: fillProps
});
if (group === 'default') {
return slot;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarGroup, {
children: slot
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-controls/index.js
/**
* Internal dependencies
*/
const BlockControls = BlockControlsFill;
BlockControls.Slot = BlockControlsSlot;
// This is just here for backward compatibility.
const BlockFormatControls = props => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockControlsFill, {
group: "inline",
...props
});
};
BlockFormatControls.Slot = props => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockControlsSlot, {
group: "inline",
...props
});
};
/* harmony default export */ const block_controls = (BlockControls);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/justify-left.js
/**
* WordPress dependencies
*/
const justifyLeft = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M9 9v6h11V9H9zM4 20h1.5V4H4v16z"
})
});
/* harmony default export */ const justify_left = (justifyLeft);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/justify-center.js
/**
* WordPress dependencies
*/
const justifyCenter = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M12.5 15v5H11v-5H4V9h7V4h1.5v5h7v6h-7Z"
})
});
/* harmony default export */ const justify_center = (justifyCenter);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/justify-right.js
/**
* WordPress dependencies
*/
const justifyRight = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M4 15h11V9H4v6zM18.5 4v16H20V4h-1.5z"
})
});
/* harmony default export */ const justify_right = (justifyRight);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/justify-space-between.js
/**
* WordPress dependencies
*/
const justifySpaceBetween = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M9 15h6V9H9v6zm-5 5h1.5V4H4v16zM18.5 4v16H20V4h-1.5z"
})
});
/* harmony default export */ const justify_space_between = (justifySpaceBetween);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/justify-stretch.js
/**
* WordPress dependencies
*/
const justifyStretch = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M4 4H5.5V20H4V4ZM7 10L17 10V14L7 14V10ZM20 4H18.5V20H20V4Z"
})
});
/* harmony default export */ const justify_stretch = (justifyStretch);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/arrow-right.js
/**
* WordPress dependencies
*/
const arrowRight = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "m14.5 6.5-1 1 3.7 3.7H4v1.6h13.2l-3.7 3.7 1 1 5.6-5.5z"
})
});
/* harmony default export */ const arrow_right = (arrowRight);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/arrow-down.js
/**
* WordPress dependencies
*/
const arrowDown = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "m16.5 13.5-3.7 3.7V4h-1.5v13.2l-3.8-3.7-1 1 5.5 5.6 5.5-5.6z"
})
});
/* harmony default export */ const arrow_down = (arrowDown);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/layouts/definitions.js
// Layout definitions keyed by layout type.
// Provides a common definition of slugs, classnames, base styles, and spacing styles for each layout type.
// If making changes or additions to layout definitions, be sure to update the corresponding PHP definitions in
// `block-supports/layout.php` so that the server-side and client-side definitions match.
const LAYOUT_DEFINITIONS = {
default: {
name: 'default',
slug: 'flow',
className: 'is-layout-flow',
baseStyles: [{
selector: ' > .alignleft',
rules: {
float: 'left',
'margin-inline-start': '0',
'margin-inline-end': '2em'
}
}, {
selector: ' > .alignright',
rules: {
float: 'right',
'margin-inline-start': '2em',
'margin-inline-end': '0'
}
}, {
selector: ' > .aligncenter',
rules: {
'margin-left': 'auto !important',
'margin-right': 'auto !important'
}
}],
spacingStyles: [{
selector: ' > :first-child',
rules: {
'margin-block-start': '0'
}
}, {
selector: ' > :last-child',
rules: {
'margin-block-end': '0'
}
}, {
selector: ' > *',
rules: {
'margin-block-start': null,
'margin-block-end': '0'
}
}]
},
constrained: {
name: 'constrained',
slug: 'constrained',
className: 'is-layout-constrained',
baseStyles: [{
selector: ' > .alignleft',
rules: {
float: 'left',
'margin-inline-start': '0',
'margin-inline-end': '2em'
}
}, {
selector: ' > .alignright',
rules: {
float: 'right',
'margin-inline-start': '2em',
'margin-inline-end': '0'
}
}, {
selector: ' > .aligncenter',
rules: {
'margin-left': 'auto !important',
'margin-right': 'auto !important'
}
}, {
selector: ' > :where(:not(.alignleft):not(.alignright):not(.alignfull))',
rules: {
'max-width': 'var(--wp--style--global--content-size)',
'margin-left': 'auto !important',
'margin-right': 'auto !important'
}
}, {
selector: ' > .alignwide',
rules: {
'max-width': 'var(--wp--style--global--wide-size)'
}
}],
spacingStyles: [{
selector: ' > :first-child',
rules: {
'margin-block-start': '0'
}
}, {
selector: ' > :last-child',
rules: {
'margin-block-end': '0'
}
}, {
selector: ' > *',
rules: {
'margin-block-start': null,
'margin-block-end': '0'
}
}]
},
flex: {
name: 'flex',
slug: 'flex',
className: 'is-layout-flex',
displayMode: 'flex',
baseStyles: [{
selector: '',
rules: {
'flex-wrap': 'wrap',
'align-items': 'center'
}
}, {
selector: ' > :is(*, div)',
// :is(*, div) instead of just * increases the specificity by 001.
rules: {
margin: '0'
}
}],
spacingStyles: [{
selector: '',
rules: {
gap: null
}
}]
},
grid: {
name: 'grid',
slug: 'grid',
className: 'is-layout-grid',
displayMode: 'grid',
baseStyles: [{
selector: ' > :is(*, div)',
// :is(*, div) instead of just * increases the specificity by 001.
rules: {
margin: '0'
}
}],
spacingStyles: [{
selector: '',
rules: {
gap: null
}
}]
}
};
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/layouts/utils.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Utility to generate the proper CSS selector for layout styles.
*
* @param {string} selectors CSS selector, also supports multiple comma-separated selectors.
* @param {string} append The string to append.
*
* @return {string} - CSS selector.
*/
function appendSelectors(selectors, append = '') {
return selectors.split(',').map(subselector => `${subselector}${append ? ` ${append}` : ''}`).join(',');
}
/**
* Get generated blockGap CSS rules based on layout definitions provided in theme.json
* Falsy values in the layout definition's spacingStyles rules will be swapped out
* with the provided `blockGapValue`.
*
* @param {string} selector The CSS selector to target for the generated rules.
* @param {Object} layoutDefinitions Layout definitions object.
* @param {string} layoutType The layout type (e.g. `default` or `flex`).
* @param {string} blockGapValue The current blockGap value to be applied.
* @return {string} The generated CSS rules.
*/
function getBlockGapCSS(selector, layoutDefinitions = LAYOUT_DEFINITIONS, layoutType, blockGapValue) {
let output = '';
if (layoutDefinitions?.[layoutType]?.spacingStyles?.length && blockGapValue) {
layoutDefinitions[layoutType].spacingStyles.forEach(gapStyle => {
output += `${appendSelectors(selector, gapStyle.selector.trim())} { `;
output += Object.entries(gapStyle.rules).map(([cssProperty, value]) => `${cssProperty}: ${value ? value : blockGapValue}`).join('; ');
output += '; }';
});
}
return output;
}
/**
* Helper method to assign contextual info to clarify
* alignment settings.
*
* Besides checking if `contentSize` and `wideSize` have a
* value, we now show this information only if their values
* are not a `css var`. This needs to change when parsing
* css variables land.
*
* @see https://github.com/WordPress/gutenberg/pull/34710#issuecomment-918000752
*
* @param {Object} layout The layout object.
* @return {Object} An object with contextual info per alignment.
*/
function getAlignmentsInfo(layout) {
const {
contentSize,
wideSize,
type = 'default'
} = layout;
const alignmentInfo = {};
const sizeRegex = /^(?!0)\d+(px|em|rem|vw|vh|%|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)?$/i;
if (sizeRegex.test(contentSize) && type === 'constrained') {
// translators: %s: container size (i.e. 600px etc)
alignmentInfo.none = (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Max %s wide'), contentSize);
}
if (sizeRegex.test(wideSize)) {
// translators: %s: container size (i.e. 600px etc)
alignmentInfo.wide = (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Max %s wide'), wideSize);
}
return alignmentInfo;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/sides-all.js
/**
* WordPress dependencies
*/
const sidesAll = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "m7.5 6h9v-1.5h-9zm0 13.5h9v-1.5h-9zm-3-3h1.5v-9h-1.5zm13.5-9v9h1.5v-9z"
})
});
/* harmony default export */ const sides_all = (sidesAll);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/sides-horizontal.js
/**
* WordPress dependencies
*/
const sidesHorizontal = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "m7.5 6h9v-1.5h-9zm0 13.5h9v-1.5h-9zm-3-3h1.5v-9h-1.5zm13.5-9v9h1.5v-9z",
style: {
opacity: 0.25
}
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "m4.5 7.5v9h1.5v-9z"
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "m18 7.5v9h1.5v-9z"
})]
});
/* harmony default export */ const sides_horizontal = (sidesHorizontal);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/sides-vertical.js
/**
* WordPress dependencies
*/
const sidesVertical = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "m7.5 6h9v-1.5h-9zm0 13.5h9v-1.5h-9zm-3-3h1.5v-9h-1.5zm13.5-9v9h1.5v-9z",
style: {
opacity: 0.25
}
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "m7.5 6h9v-1.5h-9z"
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "m7.5 19.5h9v-1.5h-9z"
})]
});
/* harmony default export */ const sides_vertical = (sidesVertical);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/sides-top.js
/**
* WordPress dependencies
*/
const sidesTop = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "m7.5 6h9v-1.5h-9zm0 13.5h9v-1.5h-9zm-3-3h1.5v-9h-1.5zm13.5-9v9h1.5v-9z",
style: {
opacity: 0.25
}
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "m16.5 6h-9v-1.5h9z"
})]
});
/* harmony default export */ const sides_top = (sidesTop);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/sides-right.js
/**
* WordPress dependencies
*/
const sidesRight = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "m7.5 6h9v-1.5h-9zm0 13.5h9v-1.5h-9zm-3-3h1.5v-9h-1.5zm13.5-9v9h1.5v-9z",
style: {
opacity: 0.25
}
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "m18 16.5v-9h1.5v9z"
})]
});
/* harmony default export */ const sides_right = (sidesRight);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/sides-bottom.js
/**
* WordPress dependencies
*/
const sidesBottom = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "m7.5 6h9v-1.5h-9zm0 13.5h9v-1.5h-9zm-3-3h1.5v-9h-1.5zm13.5-9v9h1.5v-9z",
style: {
opacity: 0.25
}
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "m16.5 19.5h-9v-1.5h9z"
})]
});
/* harmony default export */ const sides_bottom = (sidesBottom);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/sides-left.js
/**
* WordPress dependencies
*/
const sidesLeft = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "m7.5 6h9v-1.5h-9zm0 13.5h9v-1.5h-9zm-3-3h1.5v-9h-1.5zm13.5-9v9h1.5v-9z",
style: {
opacity: 0.25
}
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "m4.5 16.5v-9h1.5v9z"
})]
});
/* harmony default export */ const sides_left = (sidesLeft);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/spacing-sizes-control/utils.js
/**
* WordPress dependencies
*/
const RANGE_CONTROL_MAX_SIZE = 8;
const ALL_SIDES = ['top', 'right', 'bottom', 'left'];
const DEFAULT_VALUES = {
top: undefined,
right: undefined,
bottom: undefined,
left: undefined
};
const ICONS = {
custom: sides_all,
axial: sides_all,
horizontal: sides_horizontal,
vertical: sides_vertical,
top: sides_top,
right: sides_right,
bottom: sides_bottom,
left: sides_left
};
const LABELS = {
default: (0,external_wp_i18n_namespaceObject.__)('Spacing control'),
top: (0,external_wp_i18n_namespaceObject.__)('Top'),
bottom: (0,external_wp_i18n_namespaceObject.__)('Bottom'),
left: (0,external_wp_i18n_namespaceObject.__)('Left'),
right: (0,external_wp_i18n_namespaceObject.__)('Right'),
mixed: (0,external_wp_i18n_namespaceObject.__)('Mixed'),
vertical: (0,external_wp_i18n_namespaceObject.__)('Vertical'),
horizontal: (0,external_wp_i18n_namespaceObject.__)('Horizontal'),
axial: (0,external_wp_i18n_namespaceObject.__)('Horizontal & vertical'),
custom: (0,external_wp_i18n_namespaceObject.__)('Custom')
};
const VIEWS = {
axial: 'axial',
top: 'top',
right: 'right',
bottom: 'bottom',
left: 'left',
custom: 'custom'
};
/**
* Checks is given value is a spacing preset.
*
* @param {string} value Value to check
*
* @return {boolean} Return true if value is string in format var:preset|spacing|.
*/
function isValueSpacingPreset(value) {
if (!value?.includes) {
return false;
}
return value === '0' || value.includes('var:preset|spacing|');
}
/**
* Converts a spacing preset into a custom value.
*
* @param {string} value Value to convert
* @param {Array} spacingSizes Array of the current spacing preset objects
*
* @return {string} Mapping of the spacing preset to its equivalent custom value.
*/
function getCustomValueFromPreset(value, spacingSizes) {
if (!isValueSpacingPreset(value)) {
return value;
}
const slug = getSpacingPresetSlug(value);
const spacingSize = spacingSizes.find(size => String(size.slug) === slug);
return spacingSize?.size;
}
/**
* Converts a custom value to preset value if one can be found.
*
* Returns value as-is if no match is found.
*
* @param {string} value Value to convert
* @param {Array} spacingSizes Array of the current spacing preset objects
*
* @return {string} The preset value if it can be found.
*/
function getPresetValueFromCustomValue(value, spacingSizes) {
// Return value as-is if it is undefined or is already a preset, or '0';
if (!value || isValueSpacingPreset(value) || value === '0') {
return value;
}
const spacingMatch = spacingSizes.find(size => String(size.size) === String(value));
if (spacingMatch?.slug) {
return `var:preset|spacing|${spacingMatch.slug}`;
}
return value;
}
/**
* Converts a spacing preset into a custom value.
*
* @param {string} value Value to convert.
*
* @return {string | undefined} CSS var string for given spacing preset value.
*/
function getSpacingPresetCssVar(value) {
if (!value) {
return;
}
const slug = value.match(/var:preset\|spacing\|(.+)/);
if (!slug) {
return value;
}
return `var(--wp--preset--spacing--${slug[1]})`;
}
/**
* Returns the slug section of the given spacing preset string.
*
* @param {string} value Value to extract slug from.
*
* @return {string|undefined} The int value of the slug from given spacing preset.
*/
function getSpacingPresetSlug(value) {
if (!value) {
return;
}
if (value === '0' || value === 'default') {
return value;
}
const slug = value.match(/var:preset\|spacing\|(.+)/);
return slug ? slug[1] : undefined;
}
/**
* Converts spacing preset value into a Range component value .
*
* @param {string} presetValue Value to convert to Range value.
* @param {Array} spacingSizes Array of current spacing preset value objects.
*
* @return {number} The int value for use in Range control.
*/
function getSliderValueFromPreset(presetValue, spacingSizes) {
if (presetValue === undefined) {
return 0;
}
const slug = parseFloat(presetValue, 10) === 0 ? '0' : getSpacingPresetSlug(presetValue);
const sliderValue = spacingSizes.findIndex(spacingSize => {
return String(spacingSize.slug) === slug;
});
// Returning NaN rather than undefined as undefined makes range control thumb sit in center
return sliderValue !== -1 ? sliderValue : NaN;
}
/**
* Gets an items with the most occurrence within an array
* https://stackoverflow.com/a/20762713
*
* @param {Array<any>} arr Array of items to check.
* @return {any} The item with the most occurrences.
*/
function mode(arr) {
return arr.sort((a, b) => arr.filter(v => v === a).length - arr.filter(v => v === b).length).pop();
}
/**
* Gets the 'all' input value from values data.
*
* @param {Object} values Box spacing values
*
* @return {string} The most common value from all sides of box.
*/
function getAllRawValue(values = {}) {
return mode(Object.values(values));
}
/**
* Checks to determine if values are mixed.
*
* @param {Object} values Box values.
* @param {Array} sides Sides that values relate to.
*
* @return {boolean} Whether values are mixed.
*/
function isValuesMixed(values = {}, sides = ALL_SIDES) {
return Object.values(values).length >= 1 && Object.values(values).length < sides.length || new Set(Object.values(values)).size > 1;
}
/**
* Checks to determine if values are defined.
*
* @param {Object} values Box values.
*
* @return {boolean} Whether values are defined.
*/
function isValuesDefined(values) {
if (values === undefined || values === null) {
return false;
}
return Object.values(values).filter(value => !!value).length > 0;
}
/**
* Determines whether a particular axis has support. If no axis is
* specified, this function checks if either axis is supported.
*
* @param {Array} sides Supported sides.
* @param {string} axis Which axis to check.
*
* @return {boolean} Whether there is support for the specified axis or both axes.
*/
function hasAxisSupport(sides, axis) {
if (!sides || !sides.length) {
return false;
}
const hasHorizontalSupport = sides.includes('horizontal') || sides.includes('left') && sides.includes('right');
const hasVerticalSupport = sides.includes('vertical') || sides.includes('top') && sides.includes('bottom');
if (axis === 'horizontal') {
return hasHorizontalSupport;
}
if (axis === 'vertical') {
return hasVerticalSupport;
}
return hasHorizontalSupport || hasVerticalSupport;
}
/**
* Determines which menu options should be included in the SidePicker.
*
* @param {Array} sides Supported sides.
*
* @return {Object} Menu options with each option containing label & icon.
*/
function getSupportedMenuItems(sides) {
if (!sides || !sides.length) {
return {};
}
const menuItems = {};
// Determine the primary "side" menu options.
const hasHorizontalSupport = hasAxisSupport(sides, 'horizontal');
const hasVerticalSupport = hasAxisSupport(sides, 'vertical');
if (hasHorizontalSupport && hasVerticalSupport) {
menuItems.axial = {
label: LABELS.axial,
icon: ICONS.axial
};
} else if (hasHorizontalSupport) {
menuItems.axial = {
label: LABELS.horizontal,
icon: ICONS.horizontal
};
} else if (hasVerticalSupport) {
menuItems.axial = {
label: LABELS.vertical,
icon: ICONS.vertical
};
}
// Track whether we have any individual sides so we can omit the custom
// option if required.
let numberOfIndividualSides = 0;
ALL_SIDES.forEach(side => {
if (sides.includes(side)) {
numberOfIndividualSides += 1;
menuItems[side] = {
label: LABELS[side],
icon: ICONS[side]
};
}
});
// Add custom item if there are enough sides to warrant a separated view.
if (numberOfIndividualSides > 1) {
menuItems.custom = {
label: LABELS.custom,
icon: ICONS.custom
};
}
return menuItems;
}
/**
* Checks if the supported sides are balanced for each axis.
* - Horizontal - both left and right sides are supported.
* - Vertical - both top and bottom are supported.
*
* @param {Array} sides The supported sides which may be axes as well.
*
* @return {boolean} Whether or not the supported sides are balanced.
*/
function hasBalancedSidesSupport(sides = []) {
const counts = {
top: 0,
right: 0,
bottom: 0,
left: 0
};
sides.forEach(side => counts[side] += 1);
return (counts.top + counts.bottom) % 2 === 0 && (counts.left + counts.right) % 2 === 0;
}
/**
* Determines which view the SpacingSizesControl should default to on its
* first render; Axial, Custom, or Single side.
*
* @param {Object} values Current side values.
* @param {Array} sides Supported sides.
*
* @return {string} View to display.
*/
function getInitialView(values = {}, sides) {
const {
top,
right,
bottom,
left
} = values;
const sideValues = [top, right, bottom, left].filter(Boolean);
// Axial ( Horizontal & vertical ).
// - Has axial side support
// - Has axial side values which match
// - Has no values and the supported sides are balanced
const hasMatchingAxialValues = top === bottom && left === right && (!!top || !!left);
const hasNoValuesAndBalancedSides = !sideValues.length && hasBalancedSidesSupport(sides);
const hasOnlyAxialSides = sides?.includes('horizontal') && sides?.includes('vertical') && sides?.length === 2;
if (hasAxisSupport(sides) && (hasMatchingAxialValues || hasNoValuesAndBalancedSides)) {
return VIEWS.axial;
}
// Only axial sides are supported and single value defined.
// - Ensure the side returned is the first side that has a value.
if (hasOnlyAxialSides && sideValues.length === 1) {
let side;
Object.entries(values).some(([key, value]) => {
side = key;
return value !== undefined;
});
return side;
}
// Only single side supported and no value defined.
if (sides?.length === 1 && !sideValues.length) {
return sides[0];
}
// Default to the Custom (separated sides) view.
return VIEWS.custom;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/gap.js
/**
* Internal dependencies
*/
/**
* Returns a BoxControl object value from a given blockGap style value.
* The string check is for backwards compatibility before Gutenberg supported
* split gap values (row and column) and the value was a string n + unit.
*
* @param {string? | Object?} blockGapValue A block gap string or axial object value, e.g., '10px' or { top: '10px', left: '10px'}.
* @return {Object|null} A value to pass to the BoxControl component.
*/
function getGapBoxControlValueFromStyle(blockGapValue) {
if (!blockGapValue) {
return null;
}
const isValueString = typeof blockGapValue === 'string';
return {
top: isValueString ? blockGapValue : blockGapValue?.top,
left: isValueString ? blockGapValue : blockGapValue?.left
};
}
/**
* Returns a CSS value for the `gap` property from a given blockGap style.
*
* @param {string? | Object?} blockGapValue A block gap string or axial object value, e.g., '10px' or { top: '10px', left: '10px'}.
* @param {string?} defaultValue A default gap value.
* @return {string|null} The concatenated gap value (row and column).
*/
function getGapCSSValue(blockGapValue, defaultValue = '0') {
const blockGapBoxControlValue = getGapBoxControlValueFromStyle(blockGapValue);
if (!blockGapBoxControlValue) {
return null;
}
const row = getSpacingPresetCssVar(blockGapBoxControlValue?.top) || defaultValue;
const column = getSpacingPresetCssVar(blockGapBoxControlValue?.left) || defaultValue;
return row === column ? row : `${row} ${column}`;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-vertical-alignment-control/icons.js
/**
* WordPress dependencies
*/
const alignBottom = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Path, {
d: "M15 4H9v11h6V4zM4 18.5V20h16v-1.5H4z"
})
});
const alignCenter = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Path, {
d: "M20 11h-5V4H9v7H4v1.5h5V20h6v-7.5h5z"
})
});
const alignTop = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Path, {
d: "M9 20h6V9H9v11zM4 4v1.5h16V4H4z"
})
});
const alignStretch = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Path, {
d: "M4 4L20 4L20 5.5L4 5.5L4 4ZM10 7L14 7L14 17L10 17L10 7ZM20 18.5L4 18.5L4 20L20 20L20 18.5Z"
})
});
const spaceBetween = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Path, {
d: "M7 4H17V8L7 8V4ZM7 16L17 16V20L7 20V16ZM20 11.25H4V12.75H20V11.25Z"
})
});
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-vertical-alignment-control/ui.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const BLOCK_ALIGNMENTS_CONTROLS = {
top: {
icon: alignTop,
title: (0,external_wp_i18n_namespaceObject._x)('Align top', 'Block vertical alignment setting')
},
center: {
icon: alignCenter,
title: (0,external_wp_i18n_namespaceObject._x)('Align middle', 'Block vertical alignment setting')
},
bottom: {
icon: alignBottom,
title: (0,external_wp_i18n_namespaceObject._x)('Align bottom', 'Block vertical alignment setting')
},
stretch: {
icon: alignStretch,
title: (0,external_wp_i18n_namespaceObject._x)('Stretch to fill', 'Block vertical alignment setting')
},
'space-between': {
icon: spaceBetween,
title: (0,external_wp_i18n_namespaceObject._x)('Space between', 'Block vertical alignment setting')
}
};
const DEFAULT_CONTROLS = ['top', 'center', 'bottom'];
const DEFAULT_CONTROL = 'top';
function BlockVerticalAlignmentUI({
value,
onChange,
controls = DEFAULT_CONTROLS,
isCollapsed = true,
isToolbar
}) {
function applyOrUnset(align) {
return () => onChange(value === align ? undefined : align);
}
const activeAlignment = BLOCK_ALIGNMENTS_CONTROLS[value];
const defaultAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[DEFAULT_CONTROL];
const UIComponent = isToolbar ? external_wp_components_namespaceObject.ToolbarGroup : external_wp_components_namespaceObject.ToolbarDropdownMenu;
const extraProps = isToolbar ? {
isCollapsed
} : {};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(UIComponent, {
icon: activeAlignment ? activeAlignment.icon : defaultAlignmentControl.icon,
label: (0,external_wp_i18n_namespaceObject._x)('Change vertical alignment', 'Block vertical alignment setting label'),
controls: controls.map(control => {
return {
...BLOCK_ALIGNMENTS_CONTROLS[control],
isActive: value === control,
role: isCollapsed ? 'menuitemradio' : undefined,
onClick: applyOrUnset(control)
};
}),
...extraProps
});
}
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-vertical-alignment-toolbar/README.md
*/
/* harmony default export */ const ui = (BlockVerticalAlignmentUI);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-vertical-alignment-control/index.js
/**
* Internal dependencies
*/
const BlockVerticalAlignmentControl = props => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ui, {
...props,
isToolbar: false
});
};
const BlockVerticalAlignmentToolbar = props => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ui, {
...props,
isToolbar: true
});
};
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-vertical-alignment-control/README.md
*/
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/justify-content-control/ui.js
/**
* WordPress dependencies
*/
const icons = {
left: justify_left,
center: justify_center,
right: justify_right,
'space-between': justify_space_between,
stretch: justify_stretch
};
function JustifyContentUI({
allowedControls = ['left', 'center', 'right', 'space-between'],
isCollapsed = true,
onChange,
value,
popoverProps,
isToolbar
}) {
// If the control is already selected we want a click
// again on the control to deselect the item, so we
// call onChange( undefined )
const handleClick = next => {
if (next === value) {
onChange(undefined);
} else {
onChange(next);
}
};
const icon = value ? icons[value] : icons.left;
const allControls = [{
name: 'left',
icon: justify_left,
title: (0,external_wp_i18n_namespaceObject.__)('Justify items left'),
isActive: 'left' === value,
onClick: () => handleClick('left')
}, {
name: 'center',
icon: justify_center,
title: (0,external_wp_i18n_namespaceObject.__)('Justify items center'),
isActive: 'center' === value,
onClick: () => handleClick('center')
}, {
name: 'right',
icon: justify_right,
title: (0,external_wp_i18n_namespaceObject.__)('Justify items right'),
isActive: 'right' === value,
onClick: () => handleClick('right')
}, {
name: 'space-between',
icon: justify_space_between,
title: (0,external_wp_i18n_namespaceObject.__)('Space between items'),
isActive: 'space-between' === value,
onClick: () => handleClick('space-between')
}, {
name: 'stretch',
icon: justify_stretch,
title: (0,external_wp_i18n_namespaceObject.__)('Stretch items'),
isActive: 'stretch' === value,
onClick: () => handleClick('stretch')
}];
const UIComponent = isToolbar ? external_wp_components_namespaceObject.ToolbarGroup : external_wp_components_namespaceObject.ToolbarDropdownMenu;
const extraProps = isToolbar ? {
isCollapsed
} : {};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(UIComponent, {
icon: icon,
popoverProps: popoverProps,
label: (0,external_wp_i18n_namespaceObject.__)('Change items justification'),
controls: allControls.filter(elem => allowedControls.includes(elem.name)),
...extraProps
});
}
/* harmony default export */ const justify_content_control_ui = (JustifyContentUI);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/justify-content-control/index.js
/**
* Internal dependencies
*/
const JustifyContentControl = props => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(justify_content_control_ui, {
...props,
isToolbar: false
});
};
const JustifyToolbar = props => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(justify_content_control_ui, {
...props,
isToolbar: true
});
};
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/justify-content-control/README.md
*/
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/layouts/flex.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
// Used with the default, horizontal flex orientation.
const justifyContentMap = {
left: 'flex-start',
right: 'flex-end',
center: 'center',
'space-between': 'space-between'
};
// Used with the vertical (column) flex orientation.
const alignItemsMap = {
left: 'flex-start',
right: 'flex-end',
center: 'center',
stretch: 'stretch'
};
const verticalAlignmentMap = {
top: 'flex-start',
center: 'center',
bottom: 'flex-end',
stretch: 'stretch',
'space-between': 'space-between'
};
const flexWrapOptions = ['wrap', 'nowrap'];
/* harmony default export */ const flex = ({
name: 'flex',
label: (0,external_wp_i18n_namespaceObject.__)('Flex'),
inspectorControls: function FlexLayoutInspectorControls({
layout = {},
onChange,
layoutBlockSupport = {}
}) {
const {
allowOrientation = true
} = layoutBlockSupport;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.Flex, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexItem, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexLayoutJustifyContentControl, {
layout: layout,
onChange: onChange
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexItem, {
children: allowOrientation && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(OrientationControl, {
layout: layout,
onChange: onChange
})
})]
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexWrapControl, {
layout: layout,
onChange: onChange
})]
});
},
toolBarControls: function FlexLayoutToolbarControls({
layout = {},
onChange,
layoutBlockSupport
}) {
if (layoutBlockSupport?.allowSwitching) {
return null;
}
const {
allowVerticalAlignment = true
} = layoutBlockSupport;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(block_controls, {
group: "block",
__experimentalShareWithChildBlocks: true,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexLayoutJustifyContentControl, {
layout: layout,
onChange: onChange,
isToolbar: true
}), allowVerticalAlignment && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexLayoutVerticalAlignmentControl, {
layout: layout,
onChange: onChange
})]
});
},
getLayoutStyle: function getLayoutStyle({
selector,
layout,
style,
blockName,
hasBlockGapSupport,
layoutDefinitions = LAYOUT_DEFINITIONS
}) {
const {
orientation = 'horizontal'
} = layout;
// If a block's block.json skips serialization for spacing or spacing.blockGap,
// don't apply the user-defined value to the styles.
const blockGapValue = style?.spacing?.blockGap && !shouldSkipSerialization(blockName, 'spacing', 'blockGap') ? getGapCSSValue(style?.spacing?.blockGap, '0.5em') : undefined;
const justifyContent = justifyContentMap[layout.justifyContent];
const flexWrap = flexWrapOptions.includes(layout.flexWrap) ? layout.flexWrap : 'wrap';
const verticalAlignment = verticalAlignmentMap[layout.verticalAlignment];
const alignItems = alignItemsMap[layout.justifyContent] || alignItemsMap.left;
let output = '';
const rules = [];
if (flexWrap && flexWrap !== 'wrap') {
rules.push(`flex-wrap: ${flexWrap}`);
}
if (orientation === 'horizontal') {
if (verticalAlignment) {
rules.push(`align-items: ${verticalAlignment}`);
}
if (justifyContent) {
rules.push(`justify-content: ${justifyContent}`);
}
} else {
if (verticalAlignment) {
rules.push(`justify-content: ${verticalAlignment}`);
}
rules.push('flex-direction: column');
rules.push(`align-items: ${alignItems}`);
}
if (rules.length) {
output = `${appendSelectors(selector)} {
${rules.join('; ')};
}`;
}
// Output blockGap styles based on rules contained in layout definitions in theme.json.
if (hasBlockGapSupport && blockGapValue) {
output += getBlockGapCSS(selector, layoutDefinitions, 'flex', blockGapValue);
}
return output;
},
getOrientation(layout) {
const {
orientation = 'horizontal'
} = layout;
return orientation;
},
getAlignments() {
return [];
}
});
function FlexLayoutVerticalAlignmentControl({
layout,
onChange
}) {
const {
orientation = 'horizontal'
} = layout;
const defaultVerticalAlignment = orientation === 'horizontal' ? verticalAlignmentMap.center : verticalAlignmentMap.top;
const {
verticalAlignment = defaultVerticalAlignment
} = layout;
const onVerticalAlignmentChange = value => {
onChange({
...layout,
verticalAlignment: value
});
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockVerticalAlignmentControl, {
onChange: onVerticalAlignmentChange,
value: verticalAlignment,
controls: orientation === 'horizontal' ? ['top', 'center', 'bottom', 'stretch'] : ['top', 'center', 'bottom', 'space-between']
});
}
const POPOVER_PROPS = {
placement: 'bottom-start'
};
function FlexLayoutJustifyContentControl({
layout,
onChange,
isToolbar = false
}) {
const {
justifyContent = 'left',
orientation = 'horizontal'
} = layout;
const onJustificationChange = value => {
onChange({
...layout,
justifyContent: value
});
};
const allowedControls = ['left', 'center', 'right'];
if (orientation === 'horizontal') {
allowedControls.push('space-between');
} else {
allowedControls.push('stretch');
}
if (isToolbar) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(JustifyContentControl, {
allowedControls: allowedControls,
value: justifyContent,
onChange: onJustificationChange,
popoverProps: POPOVER_PROPS
});
}
const justificationOptions = [{
value: 'left',
icon: justify_left,
label: (0,external_wp_i18n_namespaceObject.__)('Justify items left')
}, {
value: 'center',
icon: justify_center,
label: (0,external_wp_i18n_namespaceObject.__)('Justify items center')
}, {
value: 'right',
icon: justify_right,
label: (0,external_wp_i18n_namespaceObject.__)('Justify items right')
}];
if (orientation === 'horizontal') {
justificationOptions.push({
value: 'space-between',
icon: justify_space_between,
label: (0,external_wp_i18n_namespaceObject.__)('Space between items')
});
} else {
justificationOptions.push({
value: 'stretch',
icon: justify_stretch,
label: (0,external_wp_i18n_namespaceObject.__)('Stretch items')
});
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToggleGroupControl, {
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
label: (0,external_wp_i18n_namespaceObject.__)('Justification'),
value: justifyContent,
onChange: onJustificationChange,
className: "block-editor-hooks__flex-layout-justification-controls",
children: justificationOptions.map(({
value,
icon,
label
}) => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToggleGroupControlOptionIcon, {
value: value,
icon: icon,
label: label
}, value);
})
});
}
function FlexWrapControl({
layout,
onChange
}) {
const {
flexWrap = 'wrap'
} = layout;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToggleControl, {
__nextHasNoMarginBottom: true,
label: (0,external_wp_i18n_namespaceObject.__)('Allow to wrap to multiple lines'),
onChange: value => {
onChange({
...layout,
flexWrap: value ? 'wrap' : 'nowrap'
});
},
checked: flexWrap === 'wrap'
});
}
function OrientationControl({
layout,
onChange
}) {
const {
orientation = 'horizontal',
verticalAlignment,
justifyContent
} = layout;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalToggleGroupControl, {
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
className: "block-editor-hooks__flex-layout-orientation-controls",
label: (0,external_wp_i18n_namespaceObject.__)('Orientation'),
value: orientation,
onChange: value => {
// Make sure the vertical alignment and justification are compatible with the new orientation.
let newVerticalAlignment = verticalAlignment;
let newJustification = justifyContent;
if (value === 'horizontal') {
if (verticalAlignment === 'space-between') {
newVerticalAlignment = 'center';
}
if (justifyContent === 'stretch') {
newJustification = 'left';
}
} else {
if (verticalAlignment === 'stretch') {
newVerticalAlignment = 'top';
}
if (justifyContent === 'space-between') {
newJustification = 'left';
}
}
return onChange({
...layout,
orientation: value,
verticalAlignment: newVerticalAlignment,
justifyContent: newJustification
});
},
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToggleGroupControlOptionIcon, {
icon: arrow_right,
value: "horizontal",
label: (0,external_wp_i18n_namespaceObject.__)('Horizontal')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToggleGroupControlOptionIcon, {
icon: arrow_down,
value: "vertical",
label: (0,external_wp_i18n_namespaceObject.__)('Vertical')
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/layouts/flow.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/* harmony default export */ const flow = ({
name: 'default',
label: (0,external_wp_i18n_namespaceObject.__)('Flow'),
inspectorControls: function DefaultLayoutInspectorControls() {
return null;
},
toolBarControls: function DefaultLayoutToolbarControls() {
return null;
},
getLayoutStyle: function getLayoutStyle({
selector,
style,
blockName,
hasBlockGapSupport,
layoutDefinitions = LAYOUT_DEFINITIONS
}) {
const blockGapStyleValue = getGapCSSValue(style?.spacing?.blockGap);
// If a block's block.json skips serialization for spacing or
// spacing.blockGap, don't apply the user-defined value to the styles.
let blockGapValue = '';
if (!shouldSkipSerialization(blockName, 'spacing', 'blockGap')) {
// If an object is provided only use the 'top' value for this kind of gap.
if (blockGapStyleValue?.top) {
blockGapValue = getGapCSSValue(blockGapStyleValue?.top);
} else if (typeof blockGapStyleValue === 'string') {
blockGapValue = getGapCSSValue(blockGapStyleValue);
}
}
let output = '';
// Output blockGap styles based on rules contained in layout definitions in theme.json.
if (hasBlockGapSupport && blockGapValue) {
output += getBlockGapCSS(selector, layoutDefinitions, 'default', blockGapValue);
}
return output;
},
getOrientation() {
return 'vertical';
},
getAlignments(layout, isBlockBasedTheme) {
const alignmentInfo = getAlignmentsInfo(layout);
if (layout.alignments !== undefined) {
if (!layout.alignments.includes('none')) {
layout.alignments.unshift('none');
}
return layout.alignments.map(alignment => ({
name: alignment,
info: alignmentInfo[alignment]
}));
}
const alignments = [{
name: 'left'
}, {
name: 'center'
}, {
name: 'right'
}];
// This is for backwards compatibility with hybrid themes.
if (!isBlockBasedTheme) {
const {
contentSize,
wideSize
} = layout;
if (contentSize) {
alignments.unshift({
name: 'full'
});
}
if (wideSize) {
alignments.unshift({
name: 'wide',
info: alignmentInfo.wide
});
}
}
alignments.unshift({
name: 'none',
info: alignmentInfo.none
});
return alignments;
}
});
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/icon/index.js
/**
* WordPress dependencies
*/
/** @typedef {{icon: JSX.Element, size?: number} & import('@wordpress/primitives').SVGProps} IconProps */
/**
* Return an SVG icon.
*
* @param {IconProps} props icon is the SVG component to render
* size is a number specifiying the icon size in pixels
* Other props will be passed to wrapped SVG component
* @param {import('react').ForwardedRef<HTMLElement>} ref The forwarded ref to the SVG element.
*
* @return {JSX.Element} Icon component
*/
function Icon({
icon,
size = 24,
...props
}, ref) {
return (0,external_wp_element_namespaceObject.cloneElement)(icon, {
width: size,
height: size,
...props,
ref
});
}
/* harmony default export */ const build_module_icon = ((0,external_wp_element_namespaceObject.forwardRef)(Icon));
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/align-none.js
/**
* WordPress dependencies
*/
const alignNone = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M19 5.5H5V4h14v1.5ZM19 20H5v-1.5h14V20ZM5 9h14v6H5V9Z"
})
});
/* harmony default export */ const align_none = (alignNone);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/stretch-wide.js
/**
* WordPress dependencies
*/
const stretchWide = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M16 5.5H8V4h8v1.5ZM16 20H8v-1.5h8V20ZM5 9h14v6H5V9Z"
})
});
/* harmony default export */ const stretch_wide = (stretchWide);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/layouts/constrained.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/* harmony default export */ const constrained = ({
name: 'constrained',
label: (0,external_wp_i18n_namespaceObject.__)('Constrained'),
inspectorControls: function DefaultLayoutInspectorControls({
layout,
onChange,
layoutBlockSupport = {}
}) {
const {
wideSize,
contentSize,
justifyContent = 'center'
} = layout;
const {
allowJustification = true,
allowCustomContentAndWideSize = true
} = layoutBlockSupport;
const onJustificationChange = value => {
onChange({
...layout,
justifyContent: value
});
};
const justificationOptions = [{
value: 'left',
icon: justify_left,
label: (0,external_wp_i18n_namespaceObject.__)('Justify items left')
}, {
value: 'center',
icon: justify_center,
label: (0,external_wp_i18n_namespaceObject.__)('Justify items center')
}, {
value: 'right',
icon: justify_right,
label: (0,external_wp_i18n_namespaceObject.__)('Justify items right')
}];
const [availableUnits] = use_settings_useSettings('spacing.units');
const units = (0,external_wp_components_namespaceObject.__experimentalUseCustomUnits)({
availableUnits: availableUnits || ['%', 'px', 'em', 'rem', 'vw']
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalVStack, {
spacing: 4,
className: "block-editor-hooks__layout-constrained",
children: [allowCustomContentAndWideSize && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalUnitControl, {
__next40pxDefaultSize: true,
label: (0,external_wp_i18n_namespaceObject.__)('Content width'),
labelPosition: "top",
value: contentSize || wideSize || '',
onChange: nextWidth => {
nextWidth = 0 > parseFloat(nextWidth) ? '0' : nextWidth;
onChange({
...layout,
contentSize: nextWidth
});
},
units: units,
prefix: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalInputControlPrefixWrapper, {
variant: "icon",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
icon: align_none
})
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalUnitControl, {
__next40pxDefaultSize: true,
label: (0,external_wp_i18n_namespaceObject.__)('Wide width'),
labelPosition: "top",
value: wideSize || contentSize || '',
onChange: nextWidth => {
nextWidth = 0 > parseFloat(nextWidth) ? '0' : nextWidth;
onChange({
...layout,
wideSize: nextWidth
});
},
units: units,
prefix: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalInputControlPrefixWrapper, {
variant: "icon",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
icon: stretch_wide
})
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("p", {
className: "block-editor-hooks__layout-constrained-helptext",
children: (0,external_wp_i18n_namespaceObject.__)('Customize the width for all elements that are assigned to the center or wide columns.')
})]
}), allowJustification && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToggleGroupControl, {
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
label: (0,external_wp_i18n_namespaceObject.__)('Justification'),
value: justifyContent,
onChange: onJustificationChange,
children: justificationOptions.map(({
value,
icon,
label
}) => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToggleGroupControlOptionIcon, {
value: value,
icon: icon,
label: label
}, value);
})
})]
});
},
toolBarControls: function DefaultLayoutToolbarControls({
layout = {},
onChange,
layoutBlockSupport
}) {
const {
allowJustification = true
} = layoutBlockSupport;
if (!allowJustification) {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_controls, {
group: "block",
__experimentalShareWithChildBlocks: true,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DefaultLayoutJustifyContentControl, {
layout: layout,
onChange: onChange
})
});
},
getLayoutStyle: function getLayoutStyle({
selector,
layout = {},
style,
blockName,
hasBlockGapSupport,
layoutDefinitions = LAYOUT_DEFINITIONS
}) {
const {
contentSize,
wideSize,
justifyContent
} = layout;
const blockGapStyleValue = getGapCSSValue(style?.spacing?.blockGap);
// If a block's block.json skips serialization for spacing or
// spacing.blockGap, don't apply the user-defined value to the styles.
let blockGapValue = '';
if (!shouldSkipSerialization(blockName, 'spacing', 'blockGap')) {
// If an object is provided only use the 'top' value for this kind of gap.
if (blockGapStyleValue?.top) {
blockGapValue = getGapCSSValue(blockGapStyleValue?.top);
} else if (typeof blockGapStyleValue === 'string') {
blockGapValue = getGapCSSValue(blockGapStyleValue);
}
}
const marginLeft = justifyContent === 'left' ? '0 !important' : 'auto !important';
const marginRight = justifyContent === 'right' ? '0 !important' : 'auto !important';
let output = !!contentSize || !!wideSize ? `
${appendSelectors(selector, '> :where(:not(.alignleft):not(.alignright):not(.alignfull))')} {
max-width: ${contentSize !== null && contentSize !== void 0 ? contentSize : wideSize};
margin-left: ${marginLeft};
margin-right: ${marginRight};
}
${appendSelectors(selector, '> .alignwide')} {
max-width: ${wideSize !== null && wideSize !== void 0 ? wideSize : contentSize};
}
${appendSelectors(selector, '> .alignfull')} {
max-width: none;
}
` : '';
if (justifyContent === 'left') {
output += `${appendSelectors(selector, '> :where(:not(.alignleft):not(.alignright):not(.alignfull))')}
{ margin-left: ${marginLeft}; }`;
} else if (justifyContent === 'right') {
output += `${appendSelectors(selector, '> :where(:not(.alignleft):not(.alignright):not(.alignfull))')}
{ margin-right: ${marginRight}; }`;
}
// If there is custom padding, add negative margins for alignfull blocks.
if (style?.spacing?.padding) {
// The style object might be storing a preset so we need to make sure we get a usable value.
const paddingValues = (0,external_wp_styleEngine_namespaceObject.getCSSRules)(style);
paddingValues.forEach(rule => {
if (rule.key === 'paddingRight') {
// Add unit if 0, to avoid calc(0 * -1) which is invalid.
const paddingRightValue = rule.value === '0' ? '0px' : rule.value;
output += `
${appendSelectors(selector, '> .alignfull')} {
margin-right: calc(${paddingRightValue} * -1);
}
`;
} else if (rule.key === 'paddingLeft') {
// Add unit if 0, to avoid calc(0 * -1) which is invalid.
const paddingLeftValue = rule.value === '0' ? '0px' : rule.value;
output += `
${appendSelectors(selector, '> .alignfull')} {
margin-left: calc(${paddingLeftValue} * -1);
}
`;
}
});
}
// Output blockGap styles based on rules contained in layout definitions in theme.json.
if (hasBlockGapSupport && blockGapValue) {
output += getBlockGapCSS(selector, layoutDefinitions, 'constrained', blockGapValue);
}
return output;
},
getOrientation() {
return 'vertical';
},
getAlignments(layout) {
const alignmentInfo = getAlignmentsInfo(layout);
if (layout.alignments !== undefined) {
if (!layout.alignments.includes('none')) {
layout.alignments.unshift('none');
}
return layout.alignments.map(alignment => ({
name: alignment,
info: alignmentInfo[alignment]
}));
}
const {
contentSize,
wideSize
} = layout;
const alignments = [{
name: 'left'
}, {
name: 'center'
}, {
name: 'right'
}];
if (contentSize) {
alignments.unshift({
name: 'full'
});
}
if (wideSize) {
alignments.unshift({
name: 'wide',
info: alignmentInfo.wide
});
}
alignments.unshift({
name: 'none',
info: alignmentInfo.none
});
return alignments;
}
});
const constrained_POPOVER_PROPS = {
placement: 'bottom-start'
};
function DefaultLayoutJustifyContentControl({
layout,
onChange
}) {
const {
justifyContent = 'center'
} = layout;
const onJustificationChange = value => {
onChange({
...layout,
justifyContent: value
});
};
const allowedControls = ['left', 'center', 'right'];
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(JustifyContentControl, {
allowedControls: allowedControls,
value: justifyContent,
onChange: onJustificationChange,
popoverProps: constrained_POPOVER_PROPS
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/layouts/grid.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const RANGE_CONTROL_MAX_VALUES = {
px: 600,
'%': 100,
vw: 100,
vh: 100,
em: 38,
rem: 38,
svw: 100,
lvw: 100,
dvw: 100,
svh: 100,
lvh: 100,
dvh: 100,
vi: 100,
svi: 100,
lvi: 100,
dvi: 100,
vb: 100,
svb: 100,
lvb: 100,
dvb: 100,
vmin: 100,
svmin: 100,
lvmin: 100,
dvmin: 100,
vmax: 100,
svmax: 100,
lvmax: 100,
dvmax: 100
};
const units = [{
value: 'px',
label: 'px',
default: 0
}, {
value: 'rem',
label: 'rem',
default: 0
}, {
value: 'em',
label: 'em',
default: 0
}];
/* harmony default export */ const grid = ({
name: 'grid',
label: (0,external_wp_i18n_namespaceObject.__)('Grid'),
inspectorControls: function GridLayoutInspectorControls({
layout = {},
onChange,
layoutBlockSupport = {}
}) {
const {
allowSizingOnChildren = false
} = layoutBlockSupport;
// In the experiment we want to also show column control in Auto mode, and
// the minimum width control in Manual mode.
const showColumnsControl = window.__experimentalEnableGridInteractivity || !!layout?.columnCount;
const showMinWidthControl = window.__experimentalEnableGridInteractivity || !layout?.columnCount;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridLayoutTypeControl, {
layout: layout,
onChange: onChange
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalVStack, {
spacing: 4,
children: [showColumnsControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridLayoutColumnsAndRowsControl, {
layout: layout,
onChange: onChange,
allowSizingOnChildren: allowSizingOnChildren
}), showMinWidthControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridLayoutMinimumWidthControl, {
layout: layout,
onChange: onChange
})]
})]
});
},
toolBarControls: function GridLayoutToolbarControls() {
return null;
},
getLayoutStyle: function getLayoutStyle({
selector,
layout,
style,
blockName,
hasBlockGapSupport,
layoutDefinitions = LAYOUT_DEFINITIONS
}) {
const {
minimumColumnWidth = null,
columnCount = null,
rowCount = null
} = layout;
// Check that the grid layout attributes are of the correct type, so that we don't accidentally
// write code that stores a string attribute instead of a number.
if (false) {}
// If a block's block.json skips serialization for spacing or spacing.blockGap,
// don't apply the user-defined value to the styles.
const blockGapValue = style?.spacing?.blockGap && !shouldSkipSerialization(blockName, 'spacing', 'blockGap') ? getGapCSSValue(style?.spacing?.blockGap, '0.5em') : undefined;
let output = '';
const rules = [];
if (minimumColumnWidth && columnCount > 0) {
const maxValue = `max(${minimumColumnWidth}, ( 100% - (${blockGapValue || '1.2rem'}*${columnCount - 1}) ) / ${columnCount})`;
rules.push(`grid-template-columns: repeat(auto-fill, minmax(${maxValue}, 1fr))`, `container-type: inline-size`);
if (rowCount) {
rules.push(`grid-template-rows: repeat(${rowCount}, minmax(1rem, auto))`);
}
} else if (columnCount) {
rules.push(`grid-template-columns: repeat(${columnCount}, minmax(0, 1fr))`);
if (rowCount) {
rules.push(`grid-template-rows: repeat(${rowCount}, minmax(1rem, auto))`);
}
} else {
rules.push(`grid-template-columns: repeat(auto-fill, minmax(min(${minimumColumnWidth || '12rem'}, 100%), 1fr))`, 'container-type: inline-size');
}
if (rules.length) {
// Reason to disable: the extra line breaks added by prettier mess with the unit tests.
// eslint-disable-next-line prettier/prettier
output = `${appendSelectors(selector)} { ${rules.join('; ')}; }`;
}
// Output blockGap styles based on rules contained in layout definitions in theme.json.
if (hasBlockGapSupport && blockGapValue) {
output += getBlockGapCSS(selector, layoutDefinitions, 'grid', blockGapValue);
}
return output;
},
getOrientation() {
return 'horizontal';
},
getAlignments() {
return [];
}
});
// Enables setting minimum width of grid items.
function GridLayoutMinimumWidthControl({
layout,
onChange
}) {
const {
minimumColumnWidth,
columnCount,
isManualPlacement
} = layout;
const defaultValue = isManualPlacement || columnCount ? null : '12rem';
const value = minimumColumnWidth || defaultValue;
const [quantity, unit = 'rem'] = (0,external_wp_components_namespaceObject.__experimentalParseQuantityAndUnitFromRawValue)(value);
const handleSliderChange = next => {
onChange({
...layout,
minimumColumnWidth: [next, unit].join('')
});
};
// Mostly copied from HeightControl.
const handleUnitChange = newUnit => {
// Attempt to smooth over differences between currentUnit and newUnit.
// This should slightly improve the experience of switching between unit types.
let newValue;
if (['em', 'rem'].includes(newUnit) && unit === 'px') {
// Convert pixel value to an approximate of the new unit, assuming a root size of 16px.
newValue = (quantity / 16).toFixed(2) + newUnit;
} else if (['em', 'rem'].includes(unit) && newUnit === 'px') {
// Convert to pixel value assuming a root size of 16px.
newValue = Math.round(quantity * 16) + newUnit;
}
onChange({
...layout,
minimumColumnWidth: newValue
});
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("fieldset", {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.BaseControl.VisualLabel, {
as: "legend",
children: (0,external_wp_i18n_namespaceObject.__)('Minimum column width')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.Flex, {
gap: 4,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexItem, {
isBlock: true,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalUnitControl, {
size: "__unstable-large",
onChange: newValue => {
onChange({
...layout,
minimumColumnWidth: newValue === '' ? undefined : newValue
});
},
onUnitChange: handleUnitChange,
value: value,
units: units,
min: 0,
label: (0,external_wp_i18n_namespaceObject.__)('Minimum column width'),
hideLabelFromVision: true
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexItem, {
isBlock: true,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.RangeControl, {
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
onChange: handleSliderChange,
value: quantity || 0,
min: 0,
max: RANGE_CONTROL_MAX_VALUES[unit] || 600,
withInputField: false,
label: (0,external_wp_i18n_namespaceObject.__)('Minimum column width'),
hideLabelFromVision: true
})
})]
})]
});
}
// Enables setting number of grid columns
function GridLayoutColumnsAndRowsControl({
layout,
onChange,
allowSizingOnChildren
}) {
// If the grid interactivity experiment is enabled, allow unsetting the column count.
const defaultColumnCount = window.__experimentalEnableGridInteractivity ? undefined : 3;
const {
columnCount = defaultColumnCount,
rowCount,
isManualPlacement
} = layout;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("fieldset", {
children: [(!window.__experimentalEnableGridInteractivity || !isManualPlacement) && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.BaseControl.VisualLabel, {
as: "legend",
children: (0,external_wp_i18n_namespaceObject.__)('Columns')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.Flex, {
gap: 4,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexItem, {
isBlock: true,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalNumberControl, {
size: "__unstable-large",
onChange: value => {
if (window.__experimentalEnableGridInteractivity) {
// Allow unsetting the column count when in auto mode.
const defaultNewColumnCount = isManualPlacement ? 1 : undefined;
const newColumnCount = value === '' || value === '0' ? defaultNewColumnCount : parseInt(value, 10);
onChange({
...layout,
columnCount: newColumnCount
});
} else {
// Don't allow unsetting the column count.
const newColumnCount = value === '' || value === '0' ? 1 : parseInt(value, 10);
onChange({
...layout,
columnCount: newColumnCount
});
}
},
value: columnCount,
min: 1,
label: (0,external_wp_i18n_namespaceObject.__)('Columns'),
hideLabelFromVision: !window.__experimentalEnableGridInteractivity || !isManualPlacement
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexItem, {
isBlock: true,
children: window.__experimentalEnableGridInteractivity && allowSizingOnChildren && isManualPlacement ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalNumberControl, {
size: "__unstable-large",
onChange: value => {
// Don't allow unsetting the row count.
const newRowCount = value === '' || value === '0' ? 1 : parseInt(value, 10);
onChange({
...layout,
rowCount: newRowCount
});
},
value: rowCount,
min: 1,
label: (0,external_wp_i18n_namespaceObject.__)('Rows')
}) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.RangeControl, {
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
value: columnCount !== null && columnCount !== void 0 ? columnCount : 1,
onChange: value => onChange({
...layout,
columnCount: value === '' || value === '0' ? 1 : value
}),
min: 1,
max: 16,
withInputField: false,
label: (0,external_wp_i18n_namespaceObject.__)('Columns'),
hideLabelFromVision: true
})
})]
})]
})
});
}
// Enables switching between grid types
function GridLayoutTypeControl({
layout,
onChange
}) {
const {
columnCount,
rowCount,
minimumColumnWidth,
isManualPlacement
} = layout;
/**
* When switching, temporarily save any custom values set on the
* previous type so we can switch back without loss.
*/
const [tempColumnCount, setTempColumnCount] = (0,external_wp_element_namespaceObject.useState)(columnCount || 3);
const [tempRowCount, setTempRowCount] = (0,external_wp_element_namespaceObject.useState)(rowCount);
const [tempMinimumColumnWidth, setTempMinimumColumnWidth] = (0,external_wp_element_namespaceObject.useState)(minimumColumnWidth || '12rem');
const gridPlacement = isManualPlacement || !!columnCount && !window.__experimentalEnableGridInteractivity ? 'manual' : 'auto';
const onChangeType = value => {
if (value === 'manual') {
setTempMinimumColumnWidth(minimumColumnWidth || '12rem');
} else {
setTempColumnCount(columnCount || 3);
setTempRowCount(rowCount);
}
onChange({
...layout,
columnCount: value === 'manual' ? tempColumnCount : null,
rowCount: value === 'manual' && window.__experimentalEnableGridInteractivity ? tempRowCount : undefined,
isManualPlacement: value === 'manual' && window.__experimentalEnableGridInteractivity ? true : undefined,
minimumColumnWidth: value === 'auto' ? tempMinimumColumnWidth : null
});
};
const helpText = gridPlacement === 'manual' ? (0,external_wp_i18n_namespaceObject.__)('Grid items can be manually placed in any position on the grid.') : (0,external_wp_i18n_namespaceObject.__)('Grid items are placed automatically depending on their order.');
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalToggleGroupControl, {
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
label: (0,external_wp_i18n_namespaceObject.__)('Grid item position'),
value: gridPlacement,
onChange: onChangeType,
isBlock: true,
help: window.__experimentalEnableGridInteractivity ? helpText : undefined,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToggleGroupControlOption, {
value: "auto",
label: (0,external_wp_i18n_namespaceObject.__)('Auto')
}, "auto"), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToggleGroupControlOption, {
value: "manual",
label: (0,external_wp_i18n_namespaceObject.__)('Manual')
}, "manual")]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/layouts/index.js
/**
* Internal dependencies
*/
const layoutTypes = [flow, flex, constrained, grid];
/**
* Retrieves a layout type by name.
*
* @param {string} name - The name of the layout type.
* @return {Object} Layout type.
*/
function getLayoutType(name = 'default') {
return layoutTypes.find(layoutType => layoutType.name === name);
}
/**
* Retrieves the available layout types.
*
* @return {Array} Layout types.
*/
function getLayoutTypes() {
return layoutTypes;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-list/layout.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const defaultLayout = {
type: 'default'
};
const Layout = (0,external_wp_element_namespaceObject.createContext)(defaultLayout);
/**
* Allows to define the layout.
*/
const LayoutProvider = Layout.Provider;
/**
* React hook used to retrieve the layout config.
*/
function useLayout() {
return (0,external_wp_element_namespaceObject.useContext)(Layout);
}
function LayoutStyle({
layout = {},
css,
...props
}) {
const layoutType = getLayoutType(layout.type);
const [blockGapSupport] = use_settings_useSettings('spacing.blockGap');
const hasBlockGapSupport = blockGapSupport !== null;
if (layoutType) {
if (css) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("style", {
children: css
});
}
const layoutStyle = layoutType.getLayoutStyle?.({
hasBlockGapSupport,
layout,
...props
});
if (layoutStyle) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("style", {
children: layoutStyle
});
}
}
return null;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-alignment-control/use-available-alignments.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const use_available_alignments_EMPTY_ARRAY = [];
const use_available_alignments_DEFAULT_CONTROLS = ['none', 'left', 'center', 'right', 'wide', 'full'];
const WIDE_CONTROLS = ['wide', 'full'];
function useAvailableAlignments(controls = use_available_alignments_DEFAULT_CONTROLS) {
// Always add the `none` option if not exists.
if (!controls.includes('none')) {
controls = ['none', ...controls];
}
const isNoneOnly = controls.length === 1 && controls[0] === 'none';
const [wideControlsEnabled, themeSupportsLayout, isBlockBasedTheme] = (0,external_wp_data_namespaceObject.useSelect)(select => {
var _settings$alignWide;
// If `isNoneOnly` is true, we'll be returning early because there is
// nothing to filter on an empty array. We won't need the info from
// the `useSelect` but we must call it anyway because Rules of Hooks.
// So the callback returns early to avoid block editor subscription.
if (isNoneOnly) {
return [false, false, false];
}
const settings = select(store).getSettings();
return [(_settings$alignWide = settings.alignWide) !== null && _settings$alignWide !== void 0 ? _settings$alignWide : false, settings.supportsLayout, settings.__unstableIsBlockBasedTheme];
}, [isNoneOnly]);
const layout = useLayout();
if (isNoneOnly) {
return use_available_alignments_EMPTY_ARRAY;
}
const layoutType = getLayoutType(layout?.type);
if (themeSupportsLayout) {
const layoutAlignments = layoutType.getAlignments(layout, isBlockBasedTheme);
const alignments = layoutAlignments.filter(alignment => controls.includes(alignment.name));
// While we treat `none` as an alignment, we shouldn't return it if no
// other alignments exist.
if (alignments.length === 1 && alignments[0].name === 'none') {
return use_available_alignments_EMPTY_ARRAY;
}
return alignments;
}
// Starting here, it's the fallback for themes not supporting the layout config.
if (layoutType.name !== 'default' && layoutType.name !== 'constrained') {
return use_available_alignments_EMPTY_ARRAY;
}
const alignments = controls.filter(control => {
if (layout.alignments) {
return layout.alignments.includes(control);
}
if (!wideControlsEnabled && WIDE_CONTROLS.includes(control)) {
return false;
}
return use_available_alignments_DEFAULT_CONTROLS.includes(control);
}).map(name => ({
name
}));
// While we treat `none` as an alignment, we shouldn't return it if no
// other alignments exist.
if (alignments.length === 1 && alignments[0].name === 'none') {
return use_available_alignments_EMPTY_ARRAY;
}
return alignments;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/position-left.js
/**
* WordPress dependencies
*/
const positionLeft = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M5 5.5h8V4H5v1.5ZM5 20h8v-1.5H5V20ZM19 9H5v6h14V9Z"
})
});
/* harmony default export */ const position_left = (positionLeft);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/position-center.js
/**
* WordPress dependencies
*/
const positionCenter = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M19 5.5H5V4h14v1.5ZM19 20H5v-1.5h14V20ZM7 9h10v6H7V9Z"
})
});
/* harmony default export */ const position_center = (positionCenter);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/position-right.js
/**
* WordPress dependencies
*/
const positionRight = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M19 5.5h-8V4h8v1.5ZM19 20h-8v-1.5h8V20ZM5 9h14v6H5V9Z"
})
});
/* harmony default export */ const position_right = (positionRight);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/stretch-full-width.js
/**
* WordPress dependencies
*/
const stretchFullWidth = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M5 4h14v11H5V4Zm11 16H8v-1.5h8V20Z"
})
});
/* harmony default export */ const stretch_full_width = (stretchFullWidth);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-alignment-control/constants.js
/**
* WordPress dependencies
*/
const constants_BLOCK_ALIGNMENTS_CONTROLS = {
none: {
icon: align_none,
title: (0,external_wp_i18n_namespaceObject._x)('None', 'Alignment option')
},
left: {
icon: position_left,
title: (0,external_wp_i18n_namespaceObject.__)('Align left')
},
center: {
icon: position_center,
title: (0,external_wp_i18n_namespaceObject.__)('Align center')
},
right: {
icon: position_right,
title: (0,external_wp_i18n_namespaceObject.__)('Align right')
},
wide: {
icon: stretch_wide,
title: (0,external_wp_i18n_namespaceObject.__)('Wide width')
},
full: {
icon: stretch_full_width,
title: (0,external_wp_i18n_namespaceObject.__)('Full width')
}
};
const constants_DEFAULT_CONTROL = 'none';
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-alignment-control/ui.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockAlignmentUI({
value,
onChange,
controls,
isToolbar,
isCollapsed = true
}) {
const enabledControls = useAvailableAlignments(controls);
const hasEnabledControls = !!enabledControls.length;
if (!hasEnabledControls) {
return null;
}
function onChangeAlignment(align) {
onChange([value, 'none'].includes(align) ? undefined : align);
}
const activeAlignmentControl = constants_BLOCK_ALIGNMENTS_CONTROLS[value];
const defaultAlignmentControl = constants_BLOCK_ALIGNMENTS_CONTROLS[constants_DEFAULT_CONTROL];
const UIComponent = isToolbar ? external_wp_components_namespaceObject.ToolbarGroup : external_wp_components_namespaceObject.ToolbarDropdownMenu;
const commonProps = {
icon: activeAlignmentControl ? activeAlignmentControl.icon : defaultAlignmentControl.icon,
label: (0,external_wp_i18n_namespaceObject.__)('Align')
};
const extraProps = isToolbar ? {
isCollapsed,
controls: enabledControls.map(({
name: controlName
}) => {
return {
...constants_BLOCK_ALIGNMENTS_CONTROLS[controlName],
isActive: value === controlName || !value && controlName === 'none',
role: isCollapsed ? 'menuitemradio' : undefined,
onClick: () => onChangeAlignment(controlName)
};
})
} : {
toggleProps: {
description: (0,external_wp_i18n_namespaceObject.__)('Change alignment')
},
children: ({
onClose
}) => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuGroup, {
className: "block-editor-block-alignment-control__menu-group",
children: enabledControls.map(({
name: controlName,
info
}) => {
const {
icon,
title
} = constants_BLOCK_ALIGNMENTS_CONTROLS[controlName];
// If no value is provided, mark as selected the `none` option.
const isSelected = controlName === value || !value && controlName === 'none';
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
icon: icon,
iconPosition: "left",
className: dist_clsx('components-dropdown-menu__menu-item', {
'is-active': isSelected
}),
isSelected: isSelected,
onClick: () => {
onChangeAlignment(controlName);
onClose();
},
role: "menuitemradio",
info: info,
children: title
}, controlName);
})
})
});
}
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(UIComponent, {
...commonProps,
...extraProps
});
}
/* harmony default export */ const block_alignment_control_ui = (BlockAlignmentUI);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-alignment-control/index.js
/**
* Internal dependencies
*/
const BlockAlignmentControl = props => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_alignment_control_ui, {
...props,
isToolbar: false
});
};
const BlockAlignmentToolbar = props => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_alignment_control_ui, {
...props,
isToolbar: true
});
};
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-alignment-control/README.md
*/
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-editing-mode/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* @typedef {'disabled'|'contentOnly'|'default'} BlockEditingMode
*/
/**
* Allows a block to restrict the user interface that is displayed for editing
* that block and its inner blocks.
*
* @example
* ```js
* function MyBlock( { attributes, setAttributes } ) {
* useBlockEditingMode( 'disabled' );
* return <div { ...useBlockProps() }></div>;
* }
* ```
*
* `mode` can be one of three options:
*
* - `'disabled'`: Prevents editing the block entirely, i.e. it cannot be
* selected.
* - `'contentOnly'`: Hides all non-content UI, e.g. auxiliary controls in the
* toolbar, the block movers, block settings.
* - `'default'`: Allows editing the block as normal.
*
* The mode is inherited by all of the block's inner blocks, unless they have
* their own mode.
*
* If called outside of a block context, the mode is applied to all blocks.
*
* @param {?BlockEditingMode} mode The editing mode to apply. If undefined, the
* current editing mode is not changed.
*
* @return {BlockEditingMode} The current editing mode.
*/
function useBlockEditingMode(mode) {
const context = useBlockEditContext();
const {
clientId = ''
} = context;
const {
setBlockEditingMode,
unsetBlockEditingMode
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const globalBlockEditingMode = (0,external_wp_data_namespaceObject.useSelect)(select =>
// Avoid adding the subscription if not needed!
clientId ? null : select(store).getBlockEditingMode(), [clientId]);
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (mode) {
setBlockEditingMode(clientId, mode);
}
return () => {
if (mode) {
unsetBlockEditingMode(clientId);
}
};
}, [clientId, mode, setBlockEditingMode, unsetBlockEditingMode]);
return clientId ? context[blockEditingModeKey] : globalBlockEditingMode;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/align.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* An array which includes all possible valid alignments,
* used to validate if an alignment is valid or not.
*
* @constant
* @type {string[]}
*/
const ALL_ALIGNMENTS = ['left', 'center', 'right', 'wide', 'full'];
/**
* An array which includes all wide alignments.
* In order for this alignments to be valid they need to be supported by the block,
* and by the theme.
*
* @constant
* @type {string[]}
*/
const WIDE_ALIGNMENTS = ['wide', 'full'];
/**
* Returns the valid alignments.
* Takes into consideration the aligns supported by a block, if the block supports wide controls or not and if theme supports wide controls or not.
* Exported just for testing purposes, not exported outside the module.
*
* @param {?boolean|string[]} blockAlign Aligns supported by the block.
* @param {?boolean} hasWideBlockSupport True if block supports wide alignments. And False otherwise.
* @param {?boolean} hasWideEnabled True if theme supports wide alignments. And False otherwise.
*
* @return {string[]} Valid alignments.
*/
function getValidAlignments(blockAlign, hasWideBlockSupport = true, hasWideEnabled = true) {
let validAlignments;
if (Array.isArray(blockAlign)) {
validAlignments = ALL_ALIGNMENTS.filter(value => blockAlign.includes(value));
} else if (blockAlign === true) {
// `true` includes all alignments...
validAlignments = [...ALL_ALIGNMENTS];
} else {
validAlignments = [];
}
if (!hasWideEnabled || blockAlign === true && !hasWideBlockSupport) {
return validAlignments.filter(alignment => !WIDE_ALIGNMENTS.includes(alignment));
}
return validAlignments;
}
/**
* Filters registered block settings, extending attributes to include `align`.
*
* @param {Object} settings Original block settings.
*
* @return {Object} Filtered block settings.
*/
function addAttribute(settings) {
var _settings$attributes$;
// Allow blocks to specify their own attribute definition with default values if needed.
if ('type' in ((_settings$attributes$ = settings.attributes?.align) !== null && _settings$attributes$ !== void 0 ? _settings$attributes$ : {})) {
return settings;
}
if ((0,external_wp_blocks_namespaceObject.hasBlockSupport)(settings, 'align')) {
// Gracefully handle if settings.attributes is undefined.
settings.attributes = {
...settings.attributes,
align: {
type: 'string',
// Allow for '' since it is used by the `updateAlignment` function
// in toolbar controls for special cases with defined default values.
enum: [...ALL_ALIGNMENTS, '']
}
};
}
return settings;
}
function BlockEditAlignmentToolbarControlsPure({
name: blockName,
align,
setAttributes
}) {
// Compute the block valid alignments by taking into account,
// if the theme supports wide alignments or not and the layout's
// available alignments. We do that for conditionally rendering
// Slot.
const blockAllowedAlignments = getValidAlignments((0,external_wp_blocks_namespaceObject.getBlockSupport)(blockName, 'align'), (0,external_wp_blocks_namespaceObject.hasBlockSupport)(blockName, 'alignWide', true));
const validAlignments = useAvailableAlignments(blockAllowedAlignments).map(({
name
}) => name);
const blockEditingMode = useBlockEditingMode();
if (!validAlignments.length || blockEditingMode !== 'default') {
return null;
}
const updateAlignment = nextAlign => {
if (!nextAlign) {
const blockType = (0,external_wp_blocks_namespaceObject.getBlockType)(blockName);
const blockDefaultAlign = blockType?.attributes?.align?.default;
if (blockDefaultAlign) {
nextAlign = '';
}
}
setAttributes({
align: nextAlign
});
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_controls, {
group: "block",
__experimentalShareWithChildBlocks: true,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockAlignmentControl, {
value: align,
onChange: updateAlignment,
controls: validAlignments
})
});
}
/* harmony default export */ const align = ({
shareWithChildBlocks: true,
edit: BlockEditAlignmentToolbarControlsPure,
useBlockProps,
addSaveProps: addAssignedAlign,
attributeKeys: ['align'],
hasSupport(name) {
return (0,external_wp_blocks_namespaceObject.hasBlockSupport)(name, 'align', false);
}
});
function useBlockProps({
name,
align
}) {
const blockAllowedAlignments = getValidAlignments((0,external_wp_blocks_namespaceObject.getBlockSupport)(name, 'align'), (0,external_wp_blocks_namespaceObject.hasBlockSupport)(name, 'alignWide', true));
const validAlignments = useAvailableAlignments(blockAllowedAlignments);
if (validAlignments.some(alignment => alignment.name === align)) {
return {
'data-align': align
};
}
return {};
}
/**
* Override props assigned to save component to inject alignment class name if
* block supports it.
*
* @param {Object} props Additional props applied to save element.
* @param {Object} blockType Block type.
* @param {Object} attributes Block attributes.
*
* @return {Object} Filtered props applied to save element.
*/
function addAssignedAlign(props, blockType, attributes) {
const {
align
} = attributes;
const blockAlign = (0,external_wp_blocks_namespaceObject.getBlockSupport)(blockType, 'align');
const hasWideBlockSupport = (0,external_wp_blocks_namespaceObject.hasBlockSupport)(blockType, 'alignWide', true);
// Compute valid alignments without taking into account if
// the theme supports wide alignments or not.
// This way changing themes does not impact the block save.
const isAlignValid = getValidAlignments(blockAlign, hasWideBlockSupport).includes(align);
if (isAlignValid) {
props.className = dist_clsx(`align${align}`, props.className);
}
return props;
}
(0,external_wp_hooks_namespaceObject.addFilter)('blocks.registerBlockType', 'core/editor/align/addAttribute', addAttribute);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inspector-controls/groups.js
/**
* WordPress dependencies
*/
const InspectorControlsDefault = (0,external_wp_components_namespaceObject.createSlotFill)('InspectorControls');
const InspectorControlsAdvanced = (0,external_wp_components_namespaceObject.createSlotFill)('InspectorAdvancedControls');
const InspectorControlsBindings = (0,external_wp_components_namespaceObject.createSlotFill)('InspectorControlsBindings');
const InspectorControlsBackground = (0,external_wp_components_namespaceObject.createSlotFill)('InspectorControlsBackground');
const InspectorControlsBorder = (0,external_wp_components_namespaceObject.createSlotFill)('InspectorControlsBorder');
const InspectorControlsColor = (0,external_wp_components_namespaceObject.createSlotFill)('InspectorControlsColor');
const InspectorControlsFilter = (0,external_wp_components_namespaceObject.createSlotFill)('InspectorControlsFilter');
const InspectorControlsDimensions = (0,external_wp_components_namespaceObject.createSlotFill)('InspectorControlsDimensions');
const InspectorControlsPosition = (0,external_wp_components_namespaceObject.createSlotFill)('InspectorControlsPosition');
const InspectorControlsTypography = (0,external_wp_components_namespaceObject.createSlotFill)('InspectorControlsTypography');
const InspectorControlsListView = (0,external_wp_components_namespaceObject.createSlotFill)('InspectorControlsListView');
const InspectorControlsStyles = (0,external_wp_components_namespaceObject.createSlotFill)('InspectorControlsStyles');
const InspectorControlsEffects = (0,external_wp_components_namespaceObject.createSlotFill)('InspectorControlsEffects');
const groups_groups = {
default: InspectorControlsDefault,
advanced: InspectorControlsAdvanced,
background: InspectorControlsBackground,
bindings: InspectorControlsBindings,
border: InspectorControlsBorder,
color: InspectorControlsColor,
dimensions: InspectorControlsDimensions,
effects: InspectorControlsEffects,
filter: InspectorControlsFilter,
list: InspectorControlsListView,
position: InspectorControlsPosition,
settings: InspectorControlsDefault,
// Alias for default.
styles: InspectorControlsStyles,
typography: InspectorControlsTypography
};
/* harmony default export */ const inspector_controls_groups = (groups_groups);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inspector-controls/fill.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function InspectorControlsFill({
children,
group = 'default',
__experimentalGroup,
resetAllFilter
}) {
if (__experimentalGroup) {
external_wp_deprecated_default()('`__experimentalGroup` property in `InspectorControlsFill`', {
since: '6.2',
version: '6.4',
alternative: '`group`'
});
group = __experimentalGroup;
}
const context = useBlockEditContext();
const Fill = inspector_controls_groups[group]?.Fill;
if (!Fill) {
true ? external_wp_warning_default()(`Unknown InspectorControls group "${group}" provided.`) : 0;
return null;
}
if (!context[mayDisplayControlsKey]) {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalStyleProvider, {
document: document,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Fill, {
children: fillProps => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ToolsPanelInspectorControl, {
fillProps: fillProps,
children: children,
resetAllFilter: resetAllFilter
});
}
})
});
}
function RegisterResetAll({
resetAllFilter,
children
}) {
const {
registerResetAllFilter,
deregisterResetAllFilter
} = (0,external_wp_element_namespaceObject.useContext)(external_wp_components_namespaceObject.__experimentalToolsPanelContext);
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (resetAllFilter && registerResetAllFilter && deregisterResetAllFilter) {
registerResetAllFilter(resetAllFilter);
return () => {
deregisterResetAllFilter(resetAllFilter);
};
}
}, [resetAllFilter, registerResetAllFilter, deregisterResetAllFilter]);
return children;
}
function ToolsPanelInspectorControl({
children,
resetAllFilter,
fillProps
}) {
// `fillProps.forwardedContext` is an array of context provider entries, provided by slot,
// that should wrap the fill markup.
const {
forwardedContext = []
} = fillProps;
// Children passed to InspectorControlsFill will not have
// access to any React Context whose Provider is part of
// the InspectorControlsSlot tree. So we re-create the
// Provider in this subtree.
const innerMarkup = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RegisterResetAll, {
resetAllFilter: resetAllFilter,
children: children
});
return forwardedContext.reduce((inner, [Provider, props]) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Provider, {
...props,
children: inner
}), innerMarkup);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inspector-controls/block-support-tools-panel.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockSupportToolsPanel({
children,
group,
label
}) {
const {
updateBlockAttributes
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const {
getBlockAttributes,
getMultiSelectedBlockClientIds,
getSelectedBlockClientId,
hasMultiSelection
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
const panelId = getSelectedBlockClientId();
const resetAll = (0,external_wp_element_namespaceObject.useCallback)((resetFilters = []) => {
const newAttributes = {};
const clientIds = hasMultiSelection() ? getMultiSelectedBlockClientIds() : [panelId];
clientIds.forEach(clientId => {
const {
style
} = getBlockAttributes(clientId);
let newBlockAttributes = {
style
};
resetFilters.forEach(resetFilter => {
newBlockAttributes = {
...newBlockAttributes,
...resetFilter(newBlockAttributes)
};
});
// Enforce a cleaned style object.
newBlockAttributes = {
...newBlockAttributes,
style: utils_cleanEmptyObject(newBlockAttributes.style)
};
newAttributes[clientId] = newBlockAttributes;
});
updateBlockAttributes(clientIds, newAttributes, true);
}, [getBlockAttributes, getMultiSelectedBlockClientIds, hasMultiSelection, panelId, updateBlockAttributes]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanel, {
className: `${group}-block-support-panel`,
label: label,
resetAll: resetAll,
panelId: panelId,
hasInnerWrapper: true,
shouldRenderPlaceholderItems: true // Required to maintain fills ordering.
,
__experimentalFirstVisibleItemClass: "first",
__experimentalLastVisibleItemClass: "last",
dropdownMenuProps: dropdownMenuProps,
children: children
}, panelId);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inspector-controls/block-support-slot-container.js
/**
* WordPress dependencies
*/
function BlockSupportSlotContainer({
Slot,
fillProps,
...props
}) {
// Add the toolspanel context provider and value to existing fill props
const toolsPanelContext = (0,external_wp_element_namespaceObject.useContext)(external_wp_components_namespaceObject.__experimentalToolsPanelContext);
const computedFillProps = (0,external_wp_element_namespaceObject.useMemo)(() => {
var _fillProps$forwardedC;
return {
...(fillProps !== null && fillProps !== void 0 ? fillProps : {}),
forwardedContext: [...((_fillProps$forwardedC = fillProps?.forwardedContext) !== null && _fillProps$forwardedC !== void 0 ? _fillProps$forwardedC : []), [external_wp_components_namespaceObject.__experimentalToolsPanelContext.Provider, {
value: toolsPanelContext
}]]
};
}, [toolsPanelContext, fillProps]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Slot, {
...props,
fillProps: computedFillProps,
bubblesVirtually: true
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inspector-controls/slot.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function InspectorControlsSlot({
__experimentalGroup,
group = 'default',
label,
fillProps,
...props
}) {
if (__experimentalGroup) {
external_wp_deprecated_default()('`__experimentalGroup` property in `InspectorControlsSlot`', {
since: '6.2',
version: '6.4',
alternative: '`group`'
});
group = __experimentalGroup;
}
const Slot = inspector_controls_groups[group]?.Slot;
const fills = (0,external_wp_components_namespaceObject.__experimentalUseSlotFills)(Slot?.__unstableName);
const motionContextValue = (0,external_wp_element_namespaceObject.useContext)(external_wp_components_namespaceObject.__unstableMotionContext);
const computedFillProps = (0,external_wp_element_namespaceObject.useMemo)(() => {
var _fillProps$forwardedC;
return {
...(fillProps !== null && fillProps !== void 0 ? fillProps : {}),
forwardedContext: [...((_fillProps$forwardedC = fillProps?.forwardedContext) !== null && _fillProps$forwardedC !== void 0 ? _fillProps$forwardedC : []), [external_wp_components_namespaceObject.__unstableMotionContext.Provider, {
value: motionContextValue
}]]
};
}, [motionContextValue, fillProps]);
if (!Slot) {
true ? external_wp_warning_default()(`Unknown InspectorControls group "${group}" provided.`) : 0;
return null;
}
if (!fills?.length) {
return null;
}
if (label) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockSupportToolsPanel, {
group: group,
label: label,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockSupportSlotContainer, {
...props,
fillProps: computedFillProps,
Slot: Slot
})
});
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Slot, {
...props,
fillProps: computedFillProps,
bubblesVirtually: true
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inspector-controls/index.js
/**
* Internal dependencies
*/
const InspectorControls = InspectorControlsFill;
InspectorControls.Slot = InspectorControlsSlot;
// This is just here for backward compatibility.
const InspectorAdvancedControls = props => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InspectorControlsFill, {
...props,
group: "advanced"
});
};
InspectorAdvancedControls.Slot = props => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InspectorControlsSlot, {
...props,
group: "advanced"
});
};
InspectorAdvancedControls.slotName = 'InspectorAdvancedControls';
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inspector-controls/README.md
*/
/* harmony default export */ const inspector_controls = (InspectorControls);
;// CONCATENATED MODULE: external ["wp","url"]
const external_wp_url_namespaceObject = window["wp"]["url"];
;// CONCATENATED MODULE: external ["wp","dom"]
const external_wp_dom_namespaceObject = window["wp"]["dom"];
;// CONCATENATED MODULE: external ["wp","blob"]
const external_wp_blob_namespaceObject = window["wp"]["blob"];
;// CONCATENATED MODULE: external ["wp","keycodes"]
const external_wp_keycodes_namespaceObject = window["wp"]["keycodes"];
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/media.js
/**
* WordPress dependencies
*/
const media = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "m7 6.5 4 2.5-4 2.5z"
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
fillRule: "evenodd",
clipRule: "evenodd",
d: "m5 3c-1.10457 0-2 .89543-2 2v14c0 1.1046.89543 2 2 2h14c1.1046 0 2-.8954 2-2v-14c0-1.10457-.8954-2-2-2zm14 1.5h-14c-.27614 0-.5.22386-.5.5v10.7072l3.62953-2.6465c.25108-.1831.58905-.1924.84981-.0234l2.92666 1.8969 3.5712-3.4719c.2911-.2831.7545-.2831 1.0456 0l2.9772 2.8945v-9.3568c0-.27614-.2239-.5-.5-.5zm-14.5 14.5v-1.4364l4.09643-2.987 2.99567 1.9417c.2936.1903.6798.1523.9307-.0917l3.4772-3.3806 3.4772 3.3806.0228-.0234v2.5968c0 .2761-.2239.5-.5.5h-14c-.27614 0-.5-.2239-.5-.5z"
})]
});
/* harmony default export */ const library_media = (media);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/upload.js
/**
* WordPress dependencies
*/
const upload = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M18.5 15v3.5H13V6.7l4.5 4.1 1-1.1-6.2-5.8-5.8 5.8 1 1.1 4-4v11.7h-6V15H4v5h16v-5z"
})
});
/* harmony default export */ const library_upload = (upload);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/post-featured-image.js
/**
* WordPress dependencies
*/
const postFeaturedImage = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M19 3H5c-.6 0-1 .4-1 1v7c0 .5.4 1 1 1h14c.5 0 1-.4 1-1V4c0-.6-.4-1-1-1zM5.5 10.5v-.4l1.8-1.3 1.3.8c.3.2.7.2.9-.1L11 8.1l2.4 2.4H5.5zm13 0h-2.9l-4-4c-.3-.3-.8-.3-1.1 0L8.9 8l-1.2-.8c-.3-.2-.6-.2-.9 0l-1.3 1V4.5h13v6zM4 20h9v-1.5H4V20zm0-4h16v-1.5H4V16z"
})
});
/* harmony default export */ const post_featured_image = (postFeaturedImage);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/media-upload/index.js
/**
* WordPress dependencies
*/
/**
* This is a placeholder for the media upload component necessary to make it possible to provide
* an integration with the core blocks that handle media files. By default it renders nothing but
* it provides a way to have it overridden with the `editor.MediaUpload` filter.
*
* @return {Component} The component to be rendered.
*/
const MediaUpload = () => null;
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/media-upload/README.md
*/
/* harmony default export */ const media_upload = ((0,external_wp_components_namespaceObject.withFilters)('editor.MediaUpload')(MediaUpload));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/media-upload/check.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function MediaUploadCheck({
fallback = null,
children
}) {
const hasUploadPermissions = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getSettings
} = select(store);
return !!getSettings().mediaUpload;
}, []);
return hasUploadPermissions ? children : fallback;
}
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/media-upload/README.md
*/
/* harmony default export */ const check = (MediaUploadCheck);
;// CONCATENATED MODULE: external ["wp","isShallowEqual"]
const external_wp_isShallowEqual_namespaceObject = window["wp"]["isShallowEqual"];
var external_wp_isShallowEqual_default = /*#__PURE__*/__webpack_require__.n(external_wp_isShallowEqual_namespaceObject);
;// CONCATENATED MODULE: external ["wp","preferences"]
const external_wp_preferences_namespaceObject = window["wp"]["preferences"];
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/keyboard-return.js
/**
* WordPress dependencies
*/
const keyboardReturn = /*#__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: "m6.734 16.106 2.176-2.38-1.093-1.028-3.846 4.158 3.846 4.158 1.093-1.028-2.176-2.38h2.811c1.125 0 2.25.03 3.374 0 1.428-.001 3.362-.25 4.963-1.277 1.66-1.065 2.868-2.906 2.868-5.859 0-2.479-1.327-4.896-3.65-5.93-1.82-.813-3.044-.8-4.806-.788l-.567.002v1.5c.184 0 .368 0 .553-.002 1.82-.007 2.704-.014 4.21.657 1.854.827 2.76 2.657 2.76 4.561 0 2.472-.973 3.824-2.178 4.596-1.258.807-2.864 1.04-4.163 1.04h-.02c-1.115.03-2.229 0-3.344 0H6.734Z"
})
});
/* harmony default export */ const keyboard_return = (keyboardReturn);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/chevron-left-small.js
/**
* WordPress dependencies
*/
const chevronLeftSmall = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "m13.1 16-3.4-4 3.4-4 1.1 1-2.6 3 2.6 3-1.1 1z"
})
});
/* harmony default export */ const chevron_left_small = (chevronLeftSmall);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/chevron-right-small.js
/**
* WordPress dependencies
*/
const chevronRightSmall = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M10.8622 8.04053L14.2805 12.0286L10.8622 16.0167L9.72327 15.0405L12.3049 12.0286L9.72327 9.01672L10.8622 8.04053Z"
})
});
/* harmony default export */ const chevron_right_small = (chevronRightSmall);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/link-control/settings-drawer.js
/**
* WordPress dependencies
*/
function LinkSettingsDrawer({
children,
settingsOpen,
setSettingsOpen
}) {
const prefersReducedMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)();
const MaybeAnimatePresence = prefersReducedMotion ? external_wp_element_namespaceObject.Fragment : external_wp_components_namespaceObject.__unstableAnimatePresence;
const MaybeMotionDiv = prefersReducedMotion ? 'div' : external_wp_components_namespaceObject.__unstableMotion.div;
const id = (0,external_wp_compose_namespaceObject.useInstanceId)(LinkSettingsDrawer);
const settingsDrawerId = `link-control-settings-drawer-${id}`;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
className: "block-editor-link-control__drawer-toggle",
"aria-expanded": settingsOpen,
onClick: () => setSettingsOpen(!settingsOpen),
icon: (0,external_wp_i18n_namespaceObject.isRTL)() ? chevron_left_small : chevron_right_small,
"aria-controls": settingsDrawerId,
children: (0,external_wp_i18n_namespaceObject._x)('Advanced', 'Additional link settings')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MaybeAnimatePresence, {
children: settingsOpen && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MaybeMotionDiv, {
className: "block-editor-link-control__drawer",
hidden: !settingsOpen,
id: settingsDrawerId,
initial: "collapsed",
animate: "open",
exit: "collapsed",
variants: {
open: {
opacity: 1,
height: 'auto'
},
collapsed: {
opacity: 0,
height: 0
}
},
transition: {
duration: 0.1
},
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-link-control__drawer-inner",
children: children
})
})
})]
});
}
/* harmony default export */ const settings_drawer = (LinkSettingsDrawer);
// EXTERNAL MODULE: external "React"
var external_React_ = __webpack_require__(1609);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/url-input/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Whether the argument is a function.
*
* @param {*} maybeFunc The argument to check.
* @return {boolean} True if the argument is a function, false otherwise.
*/
function isFunction(maybeFunc) {
return typeof maybeFunc === 'function';
}
class URLInput extends external_wp_element_namespaceObject.Component {
constructor(props) {
super(props);
this.onChange = this.onChange.bind(this);
this.onFocus = this.onFocus.bind(this);
this.onKeyDown = this.onKeyDown.bind(this);
this.selectLink = this.selectLink.bind(this);
this.handleOnClick = this.handleOnClick.bind(this);
this.bindSuggestionNode = this.bindSuggestionNode.bind(this);
this.autocompleteRef = props.autocompleteRef || (0,external_wp_element_namespaceObject.createRef)();
this.inputRef = (0,external_wp_element_namespaceObject.createRef)();
this.updateSuggestions = (0,external_wp_compose_namespaceObject.debounce)(this.updateSuggestions.bind(this), 200);
this.suggestionNodes = [];
this.suggestionsRequest = null;
this.state = {
suggestions: [],
showSuggestions: false,
suggestionsValue: null,
selectedSuggestion: null,
suggestionsListboxId: '',
suggestionOptionIdPrefix: ''
};
}
componentDidUpdate(prevProps) {
const {
showSuggestions,
selectedSuggestion
} = this.state;
const {
value,
__experimentalShowInitialSuggestions = false
} = this.props;
// Only have to worry about scrolling selected suggestion into view
// when already expanded.
if (showSuggestions && selectedSuggestion !== null && this.suggestionNodes[selectedSuggestion]) {
this.suggestionNodes[selectedSuggestion].scrollIntoView({
behavior: 'instant',
block: 'nearest',
inline: 'nearest'
});
}
// Update suggestions when the value changes.
if (prevProps.value !== value && !this.props.disableSuggestions) {
if (value?.length) {
// If the new value is not empty we need to update with suggestions for it.
this.updateSuggestions(value);
} else if (__experimentalShowInitialSuggestions) {
// If the new value is empty and we can show initial suggestions, then show initial suggestions.
this.updateSuggestions();
}
}
}
componentDidMount() {
if (this.shouldShowInitialSuggestions()) {
this.updateSuggestions();
}
}
componentWillUnmount() {
this.suggestionsRequest?.cancel?.();
this.suggestionsRequest = null;
}
bindSuggestionNode(index) {
return ref => {
this.suggestionNodes[index] = ref;
};
}
shouldShowInitialSuggestions() {
const {
__experimentalShowInitialSuggestions = false,
value
} = this.props;
return __experimentalShowInitialSuggestions && !(value && value.length);
}
updateSuggestions(value = '') {
const {
__experimentalFetchLinkSuggestions: fetchLinkSuggestions,
__experimentalHandleURLSuggestions: handleURLSuggestions
} = this.props;
if (!fetchLinkSuggestions) {
return;
}
// Initial suggestions may only show if there is no value
// (note: this includes whitespace).
const isInitialSuggestions = !value?.length;
// Trim only now we've determined whether or not it originally had a "length"
// (even if that value was all whitespace).
value = value.trim();
// Allow a suggestions request if:
// - there are at least 2 characters in the search input (except manual searches where
// search input length is not required to trigger a fetch)
// - this is a direct entry (eg: a URL)
if (!isInitialSuggestions && (value.length < 2 || !handleURLSuggestions && (0,external_wp_url_namespaceObject.isURL)(value))) {
this.suggestionsRequest?.cancel?.();
this.suggestionsRequest = null;
this.setState({
suggestions: [],
showSuggestions: false,
suggestionsValue: value,
selectedSuggestion: null,
loading: false
});
return;
}
this.setState({
selectedSuggestion: null,
loading: true
});
const request = fetchLinkSuggestions(value, {
isInitialSuggestions
});
request.then(suggestions => {
// A fetch Promise doesn't have an abort option. It's mimicked by
// comparing the request reference in on the instance, which is
// reset or deleted on subsequent requests or unmounting.
if (this.suggestionsRequest !== request) {
return;
}
this.setState({
suggestions,
suggestionsValue: value,
loading: false,
showSuggestions: !!suggestions.length
});
if (!!suggestions.length) {
this.props.debouncedSpeak((0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: number of results. */
(0,external_wp_i18n_namespaceObject._n)('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', suggestions.length), suggestions.length), 'assertive');
} else {
this.props.debouncedSpeak((0,external_wp_i18n_namespaceObject.__)('No results.'), 'assertive');
}
}).catch(() => {
if (this.suggestionsRequest !== request) {
return;
}
this.setState({
loading: false
});
}).finally(() => {
// If this is the current promise then reset the reference
// to allow for checking if a new request is made.
if (this.suggestionsRequest === request) {
this.suggestionsRequest = null;
}
});
// Note that this assignment is handled *before* the async search request
// as a Promise always resolves on the next tick of the event loop.
this.suggestionsRequest = request;
}
onChange(newValue) {
this.props.onChange(newValue);
}
onFocus() {
const {
suggestions
} = this.state;
const {
disableSuggestions,
value
} = this.props;
// When opening the link editor, if there's a value present, we want to load the suggestions pane with the results for this input search value
// Don't re-run the suggestions on focus if there are already suggestions present (prevents searching again when tabbing between the input and buttons)
// or there is already a request in progress.
if (value && !disableSuggestions && !(suggestions && suggestions.length) && this.suggestionsRequest === null) {
// Ensure the suggestions are updated with the current input value.
this.updateSuggestions(value);
}
}
onKeyDown(event) {
this.props.onKeyDown?.(event);
const {
showSuggestions,
selectedSuggestion,
suggestions,
loading
} = this.state;
// If the suggestions are not shown or loading, we shouldn't handle the arrow keys
// We shouldn't preventDefault to allow block arrow keys navigation.
if (!showSuggestions || !suggestions.length || loading) {
// In the Windows version of Firefox the up and down arrows don't move the caret
// within an input field like they do for Mac Firefox/Chrome/Safari. This causes
// a form of focus trapping that is disruptive to the user experience. This disruption
// only happens if the caret is not in the first or last position in the text input.
// See: https://github.com/WordPress/gutenberg/issues/5693#issuecomment-436684747
switch (event.keyCode) {
// When UP is pressed, if the caret is at the start of the text, move it to the 0
// position.
case external_wp_keycodes_namespaceObject.UP:
{
if (0 !== event.target.selectionStart) {
event.preventDefault();
// Set the input caret to position 0.
event.target.setSelectionRange(0, 0);
}
break;
}
// When DOWN is pressed, if the caret is not at the end of the text, move it to the
// last position.
case external_wp_keycodes_namespaceObject.DOWN:
{
if (this.props.value.length !== event.target.selectionStart) {
event.preventDefault();
// Set the input caret to the last position.
event.target.setSelectionRange(this.props.value.length, this.props.value.length);
}
break;
}
// Submitting while loading should trigger onSubmit.
case external_wp_keycodes_namespaceObject.ENTER:
{
if (this.props.onSubmit) {
event.preventDefault();
this.props.onSubmit(null, event);
}
break;
}
}
return;
}
const suggestion = this.state.suggestions[this.state.selectedSuggestion];
switch (event.keyCode) {
case external_wp_keycodes_namespaceObject.UP:
{
event.preventDefault();
const previousIndex = !selectedSuggestion ? suggestions.length - 1 : selectedSuggestion - 1;
this.setState({
selectedSuggestion: previousIndex
});
break;
}
case external_wp_keycodes_namespaceObject.DOWN:
{
event.preventDefault();
const nextIndex = selectedSuggestion === null || selectedSuggestion === suggestions.length - 1 ? 0 : selectedSuggestion + 1;
this.setState({
selectedSuggestion: nextIndex
});
break;
}
case external_wp_keycodes_namespaceObject.TAB:
{
if (this.state.selectedSuggestion !== null) {
this.selectLink(suggestion);
// Announce a link has been selected when tabbing away from the input field.
this.props.speak((0,external_wp_i18n_namespaceObject.__)('Link selected.'));
}
break;
}
case external_wp_keycodes_namespaceObject.ENTER:
{
event.preventDefault();
if (this.state.selectedSuggestion !== null) {
this.selectLink(suggestion);
if (this.props.onSubmit) {
this.props.onSubmit(suggestion, event);
}
} else if (this.props.onSubmit) {
this.props.onSubmit(null, event);
}
break;
}
}
}
selectLink(suggestion) {
this.props.onChange(suggestion.url, suggestion);
this.setState({
selectedSuggestion: null,
showSuggestions: false
});
}
handleOnClick(suggestion) {
this.selectLink(suggestion);
// Move focus to the input field when a link suggestion is clicked.
this.inputRef.current.focus();
}
static getDerivedStateFromProps({
value,
instanceId,
disableSuggestions,
__experimentalShowInitialSuggestions = false
}, {
showSuggestions
}) {
let shouldShowSuggestions = showSuggestions;
const hasValue = value && value.length;
if (!__experimentalShowInitialSuggestions && !hasValue) {
shouldShowSuggestions = false;
}
if (disableSuggestions === true) {
shouldShowSuggestions = false;
}
return {
showSuggestions: shouldShowSuggestions,
suggestionsListboxId: `block-editor-url-input-suggestions-${instanceId}`,
suggestionOptionIdPrefix: `block-editor-url-input-suggestion-${instanceId}`
};
}
render() {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [this.renderControl(), this.renderSuggestions()]
});
}
renderControl() {
const {
label = null,
className,
isFullWidth,
instanceId,
placeholder = (0,external_wp_i18n_namespaceObject.__)('Paste URL or type to search'),
__experimentalRenderControl: renderControl,
value = '',
hideLabelFromVision = false
} = this.props;
const {
loading,
showSuggestions,
selectedSuggestion,
suggestionsListboxId,
suggestionOptionIdPrefix
} = this.state;
const inputId = `url-input-control-${instanceId}`;
const controlProps = {
id: inputId,
// Passes attribute to label for the for attribute
label,
className: dist_clsx('block-editor-url-input', className, {
'is-full-width': isFullWidth
}),
hideLabelFromVision
};
const inputProps = {
id: inputId,
value,
required: true,
type: 'text',
onChange: this.onChange,
onFocus: this.onFocus,
placeholder,
onKeyDown: this.onKeyDown,
role: 'combobox',
'aria-label': label ? undefined : (0,external_wp_i18n_namespaceObject.__)('URL'),
// Ensure input always has an accessible label
'aria-expanded': showSuggestions,
'aria-autocomplete': 'list',
'aria-owns': suggestionsListboxId,
'aria-activedescendant': selectedSuggestion !== null ? `${suggestionOptionIdPrefix}-${selectedSuggestion}` : undefined,
ref: this.inputRef,
suffix: this.props.suffix
};
if (renderControl) {
return renderControl(controlProps, inputProps, loading);
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.BaseControl, {
__nextHasNoMarginBottom: true,
...controlProps,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalInputControl, {
...inputProps,
__next40pxDefaultSize: true
}), loading && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Spinner, {})]
});
}
renderSuggestions() {
const {
className,
__experimentalRenderSuggestions: renderSuggestions
} = this.props;
const {
showSuggestions,
suggestions,
suggestionsValue,
selectedSuggestion,
suggestionsListboxId,
suggestionOptionIdPrefix,
loading
} = this.state;
if (!showSuggestions || suggestions.length === 0) {
return null;
}
const suggestionsListProps = {
id: suggestionsListboxId,
ref: this.autocompleteRef,
role: 'listbox'
};
const buildSuggestionItemProps = (suggestion, index) => {
return {
role: 'option',
tabIndex: '-1',
id: `${suggestionOptionIdPrefix}-${index}`,
ref: this.bindSuggestionNode(index),
'aria-selected': index === selectedSuggestion ? true : undefined
};
};
if (isFunction(renderSuggestions)) {
return renderSuggestions({
suggestions,
selectedSuggestion,
suggestionsListProps,
buildSuggestionItemProps,
isLoading: loading,
handleSuggestionClick: this.handleOnClick,
isInitialSuggestions: !suggestionsValue?.length,
currentInputValue: suggestionsValue
});
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Popover, {
placement: "bottom",
focusOnMount: false,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
...suggestionsListProps,
className: dist_clsx('block-editor-url-input__suggestions', `${className}__suggestions`),
children: suggestions.map((suggestion, index) => /*#__PURE__*/(0,external_React_.createElement)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
...buildSuggestionItemProps(suggestion, index),
key: suggestion.id,
className: dist_clsx('block-editor-url-input__suggestion', {
'is-selected': index === selectedSuggestion
}),
onClick: () => this.handleOnClick(suggestion)
}, suggestion.title))
})
});
}
}
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/url-input/README.md
*/
/* harmony default export */ const url_input = ((0,external_wp_compose_namespaceObject.compose)(external_wp_compose_namespaceObject.withSafeTimeout, external_wp_components_namespaceObject.withSpokenMessages, external_wp_compose_namespaceObject.withInstanceId, (0,external_wp_data_namespaceObject.withSelect)((select, props) => {
// If a link suggestions handler is already provided then
// bail.
if (isFunction(props.__experimentalFetchLinkSuggestions)) {
return;
}
const {
getSettings
} = select(store);
return {
__experimentalFetchLinkSuggestions: getSettings().__experimentalFetchLinkSuggestions
};
}))(URLInput));
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/plus.js
/**
* WordPress dependencies
*/
const plus = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M11 12.5V17.5H12.5V12.5H17.5V11H12.5V6H11V11H6V12.5H11Z"
})
});
/* harmony default export */ const library_plus = (plus);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/link-control/search-create-button.js
/**
* WordPress dependencies
*/
const LinkControlSearchCreate = ({
searchTerm,
onClick,
itemProps,
buttonText
}) => {
if (!searchTerm) {
return null;
}
let text;
if (buttonText) {
text = typeof buttonText === 'function' ? buttonText(searchTerm) : buttonText;
} else {
text = (0,external_wp_element_namespaceObject.createInterpolateElement)((0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %s: search term. */
(0,external_wp_i18n_namespaceObject.__)('Create: <mark>%s</mark>'), searchTerm), {
mark: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("mark", {})
});
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
...itemProps,
iconPosition: "left",
icon: library_plus,
className: "block-editor-link-control__search-item",
onClick: onClick,
children: text
});
};
/* harmony default export */ const search_create_button = (LinkControlSearchCreate);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/post-list.js
/**
* WordPress dependencies
*/
const postList = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M18 5.5H6a.5.5 0 0 0-.5.5v12a.5.5 0 0 0 .5.5h12a.5.5 0 0 0 .5-.5V6a.5.5 0 0 0-.5-.5ZM6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm1 5h1.5v1.5H7V9Zm1.5 4.5H7V15h1.5v-1.5ZM10 9h7v1.5h-7V9Zm7 4.5h-7V15h7v-1.5Z"
})
});
/* harmony default export */ const post_list = (postList);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/page.js
/**
* WordPress dependencies
*/
const page = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M15.5 7.5h-7V9h7V7.5Zm-7 3.5h7v1.5h-7V11Zm7 3.5h-7V16h7v-1.5Z"
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M17 4H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2ZM7 5.5h10a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5Z"
})]
});
/* harmony default export */ const library_page = (page);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/tag.js
/**
* WordPress dependencies
*/
const tag = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M4.75 4a.75.75 0 0 0-.75.75v7.826c0 .2.08.39.22.53l6.72 6.716a2.313 2.313 0 0 0 3.276-.001l5.61-5.611-.531-.53.532.528a2.315 2.315 0 0 0 0-3.264L13.104 4.22a.75.75 0 0 0-.53-.22H4.75ZM19 12.576a.815.815 0 0 1-.236.574l-5.61 5.611a.814.814 0 0 1-1.153 0L5.5 12.264V5.5h6.763l6.5 6.502a.816.816 0 0 1 .237.574ZM8.75 9.75a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
})
});
/* harmony default export */ const library_tag = (tag);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/category.js
/**
* WordPress dependencies
*/
const category = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M6 5.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5H6a.5.5 0 01-.5-.5V6a.5.5 0 01.5-.5zM4 6a2 2 0 012-2h3a2 2 0 012 2v3a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm11-.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5h-3a.5.5 0 01-.5-.5V6a.5.5 0 01.5-.5zM13 6a2 2 0 012-2h3a2 2 0 012 2v3a2 2 0 01-2 2h-3a2 2 0 01-2-2V6zm5 8.5h-3a.5.5 0 00-.5.5v3a.5.5 0 00.5.5h3a.5.5 0 00.5-.5v-3a.5.5 0 00-.5-.5zM15 13a2 2 0 00-2 2v3a2 2 0 002 2h3a2 2 0 002-2v-3a2 2 0 00-2-2h-3zm-9 1.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5H6a.5.5 0 01-.5-.5v-3a.5.5 0 01.5-.5zM4 15a2 2 0 012-2h3a2 2 0 012 2v3a2 2 0 01-2 2H6a2 2 0 01-2-2v-3z",
fillRule: "evenodd",
clipRule: "evenodd"
})
});
/* harmony default export */ const library_category = (category);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/file.js
/**
* WordPress dependencies
*/
const file = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M12.848 8a1 1 0 0 1-.914-.594l-.723-1.63a.5.5 0 0 0-.447-.276H5a.5.5 0 0 0-.5.5v11.5a.5.5 0 0 0 .5.5h14a.5.5 0 0 0 .5-.5v-9A.5.5 0 0 0 19 8h-6.152Zm.612-1.5a.5.5 0 0 1-.462-.31l-.445-1.084A2 2 0 0 0 10.763 4H5a2 2 0 0 0-2 2v11.5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-5.54Z"
})
});
/* harmony default export */ const library_file = (file);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/globe.js
/**
* WordPress dependencies
*/
const globe = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M12 3.3c-4.8 0-8.8 3.9-8.8 8.8 0 4.8 3.9 8.8 8.8 8.8 4.8 0 8.8-3.9 8.8-8.8s-4-8.8-8.8-8.8zm6.5 5.5h-2.6C15.4 7.3 14.8 6 14 5c2 .6 3.6 2 4.5 3.8zm.7 3.2c0 .6-.1 1.2-.2 1.8h-2.9c.1-.6.1-1.2.1-1.8s-.1-1.2-.1-1.8H19c.2.6.2 1.2.2 1.8zM12 18.7c-1-.7-1.8-1.9-2.3-3.5h4.6c-.5 1.6-1.3 2.9-2.3 3.5zm-2.6-4.9c-.1-.6-.1-1.1-.1-1.8 0-.6.1-1.2.1-1.8h5.2c.1.6.1 1.1.1 1.8s-.1 1.2-.1 1.8H9.4zM4.8 12c0-.6.1-1.2.2-1.8h2.9c-.1.6-.1 1.2-.1 1.8 0 .6.1 1.2.1 1.8H5c-.2-.6-.2-1.2-.2-1.8zM12 5.3c1 .7 1.8 1.9 2.3 3.5H9.7c.5-1.6 1.3-2.9 2.3-3.5zM10 5c-.8 1-1.4 2.3-1.8 3.8H5.5C6.4 7 8 5.6 10 5zM5.5 15.3h2.6c.4 1.5 1 2.8 1.8 3.7-1.8-.6-3.5-2-4.4-3.7zM14 19c.8-1 1.4-2.2 1.8-3.7h2.6C17.6 17 16 18.4 14 19z"
})
});
/* harmony default export */ const library_globe = (globe);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/home.js
/**
* WordPress dependencies
*/
const home = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M12 4L4 7.9V20h16V7.9L12 4zm6.5 14.5H14V13h-4v5.5H5.5V8.8L12 5.7l6.5 3.1v9.7z"
})
});
/* harmony default export */ const library_home = (home);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/verse.js
/**
* WordPress dependencies
*/
const verse = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M17.8 2l-.9.3c-.1 0-3.6 1-5.2 2.1C10 5.5 9.3 6.5 8.9 7.1c-.6.9-1.7 4.7-1.7 6.3l-.9 2.3c-.2.4 0 .8.4 1 .1 0 .2.1.3.1.3 0 .6-.2.7-.5l.6-1.5c.3 0 .7-.1 1.2-.2.7-.1 1.4-.3 2.2-.5.8-.2 1.6-.5 2.4-.8.7-.3 1.4-.7 1.9-1.2s.8-1.2 1-1.9c.2-.7.3-1.6.4-2.4.1-.8.1-1.7.2-2.5 0-.8.1-1.5.2-2.1V2zm-1.9 5.6c-.1.8-.2 1.5-.3 2.1-.2.6-.4 1-.6 1.3-.3.3-.8.6-1.4.9-.7.3-1.4.5-2.2.8-.6.2-1.3.3-1.8.4L15 7.5c.3-.3.6-.7 1-1.1 0 .4 0 .8-.1 1.2zM6 20h8v-1.5H6V20z"
})
});
/* harmony default export */ const library_verse = (verse);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/link-control/search-item.js
/**
* WordPress dependencies
*/
const ICONS_MAP = {
post: post_list,
page: library_page,
post_tag: library_tag,
category: library_category,
attachment: library_file
};
function SearchItemIcon({
isURL,
suggestion
}) {
let icon = null;
if (isURL) {
icon = library_globe;
} else if (suggestion.type in ICONS_MAP) {
icon = ICONS_MAP[suggestion.type];
if (suggestion.type === 'page') {
if (suggestion.isFrontPage) {
icon = library_home;
}
if (suggestion.isBlogHome) {
icon = library_verse;
}
}
}
if (icon) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
className: "block-editor-link-control__search-item-icon",
icon: icon
});
}
return null;
}
/**
* Adds a leading slash to a url if it doesn't already have one.
* @param {string} url the url to add a leading slash to.
* @return {string} the url with a leading slash.
*/
function addLeadingSlash(url) {
const trimmedURL = url?.trim();
if (!trimmedURL?.length) {
return url;
}
return url?.replace(/^\/?/, '/');
}
function removeTrailingSlash(url) {
const trimmedURL = url?.trim();
if (!trimmedURL?.length) {
return url;
}
return url?.replace(/\/$/, '');
}
const partialRight = (fn, ...partialArgs) => (...args) => fn(...args, ...partialArgs);
const defaultTo = d => v => {
return v === null || v === undefined || v !== v ? d : v;
};
/**
* Prepares a URL for display in the UI.
* - decodes the URL.
* - filters it (removes protocol, www, etc.).
* - truncates it if necessary.
* - adds a leading slash.
* @param {string} url the url.
* @return {string} the processed url to display.
*/
function getURLForDisplay(url) {
if (!url) {
return url;
}
return (0,external_wp_compose_namespaceObject.pipe)(external_wp_url_namespaceObject.safeDecodeURI, external_wp_url_namespaceObject.getPath, defaultTo(''), partialRight(external_wp_url_namespaceObject.filterURLForDisplay, 24), removeTrailingSlash, addLeadingSlash)(url);
}
const LinkControlSearchItem = ({
itemProps,
suggestion,
searchTerm,
onClick,
isURL = false,
shouldShowType = false
}) => {
const info = isURL ? (0,external_wp_i18n_namespaceObject.__)('Press ENTER to add this link') : getURLForDisplay(suggestion.url);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
...itemProps,
info: info,
iconPosition: "left",
icon: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SearchItemIcon, {
suggestion: suggestion,
isURL: isURL
}),
onClick: onClick,
shortcut: shouldShowType && getVisualTypeName(suggestion),
className: "block-editor-link-control__search-item",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.TextHighlight
// The component expects a plain text string.
, {
text: (0,external_wp_dom_namespaceObject.__unstableStripHTML)(suggestion.title),
highlight: searchTerm
})
});
};
function getVisualTypeName(suggestion) {
if (suggestion.isFrontPage) {
return 'front page';
}
if (suggestion.isBlogHome) {
return 'blog home';
}
// Rename 'post_tag' to 'tag'. Ideally, the API would return the localised CPT or taxonomy label.
return suggestion.type === 'post_tag' ? 'tag' : suggestion.type;
}
/* harmony default export */ const search_item = (LinkControlSearchItem);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/link-control/constants.js
/**
* WordPress dependencies
*/
// Used as a unique identifier for the "Create" option within search results.
// Used to help distinguish the "Create" suggestion within the search results in
// order to handle it as a unique case.
const CREATE_TYPE = '__CREATE__';
const TEL_TYPE = 'tel';
const URL_TYPE = 'link';
const MAILTO_TYPE = 'mailto';
const INTERNAL_TYPE = 'internal';
const LINK_ENTRY_TYPES = [URL_TYPE, MAILTO_TYPE, TEL_TYPE, INTERNAL_TYPE];
const DEFAULT_LINK_SETTINGS = [{
id: 'opensInNewTab',
title: (0,external_wp_i18n_namespaceObject.__)('Open in new tab')
}];
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/link-control/search-results.js
/**
* WordPress dependencies
*/
/**
* External dependencies
*/
/**
* Internal dependencies
*/
function LinkControlSearchResults({
instanceId,
withCreateSuggestion,
currentInputValue,
handleSuggestionClick,
suggestionsListProps,
buildSuggestionItemProps,
suggestions,
selectedSuggestion,
isLoading,
isInitialSuggestions,
createSuggestionButtonText,
suggestionsQuery
}) {
const resultsListClasses = dist_clsx('block-editor-link-control__search-results', {
'is-loading': isLoading
});
const isSingleDirectEntryResult = suggestions.length === 1 && LINK_ENTRY_TYPES.includes(suggestions[0].type);
const shouldShowCreateSuggestion = withCreateSuggestion && !isSingleDirectEntryResult && !isInitialSuggestions;
// If the query has a specified type, then we can skip showing them in the result. See #24839.
const shouldShowSuggestionsTypes = !suggestionsQuery?.type;
// According to guidelines aria-label should be added if the label
// itself is not visible.
// See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role
const searchResultsLabelId = `block-editor-link-control-search-results-label-${instanceId}`;
const labelText = isInitialSuggestions ? (0,external_wp_i18n_namespaceObject.__)('Suggestions') : (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %s: search term. */
(0,external_wp_i18n_namespaceObject.__)('Search results for "%s"'), currentInputValue);
const searchResultsLabel = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.VisuallyHidden, {
id: searchResultsLabelId,
children: labelText
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-link-control__search-results-wrapper",
children: [searchResultsLabel, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
...suggestionsListProps,
className: resultsListClasses,
"aria-labelledby": searchResultsLabelId,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuGroup, {
children: suggestions.map((suggestion, index) => {
if (shouldShowCreateSuggestion && CREATE_TYPE === suggestion.type) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(search_create_button, {
searchTerm: currentInputValue,
buttonText: createSuggestionButtonText,
onClick: () => handleSuggestionClick(suggestion)
// Intentionally only using `type` here as
// the constant is enough to uniquely
// identify the single "CREATE" suggestion.
,
itemProps: buildSuggestionItemProps(suggestion, index),
isSelected: index === selectedSuggestion
}, suggestion.type);
}
// If we're not handling "Create" suggestions above then
// we don't want them in the main results so exit early.
if (CREATE_TYPE === suggestion.type) {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(search_item, {
itemProps: buildSuggestionItemProps(suggestion, index),
suggestion: suggestion,
index: index,
onClick: () => {
handleSuggestionClick(suggestion);
},
isSelected: index === selectedSuggestion,
isURL: LINK_ENTRY_TYPES.includes(suggestion.type),
searchTerm: currentInputValue,
shouldShowType: shouldShowSuggestionsTypes,
isFrontPage: suggestion?.isFrontPage,
isBlogHome: suggestion?.isBlogHome
}, `${suggestion.id}-${suggestion.type}`);
})
})
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/link-control/is-url-like.js
/**
* WordPress dependencies
*/
/**
* Determines whether a given value could be a URL. Note this does not
* guarantee the value is a URL only that it looks like it might be one. For
* example, just because a string has `www.` in it doesn't make it a URL,
* but it does make it highly likely that it will be so in the context of
* creating a link it makes sense to treat it like one.
*
* @param {string} val the candidate for being URL-like (or not).
*
* @return {boolean} whether or not the value is potentially a URL.
*/
function isURLLike(val) {
const hasSpaces = val.includes(' ');
if (hasSpaces) {
return false;
}
const protocol = (0,external_wp_url_namespaceObject.getProtocol)(val);
const protocolIsValid = (0,external_wp_url_namespaceObject.isValidProtocol)(protocol);
const mayBeTLD = hasPossibleTLD(val);
const isWWW = val?.startsWith('www.');
const isInternal = val?.startsWith('#') && (0,external_wp_url_namespaceObject.isValidFragment)(val);
return protocolIsValid || isWWW || isInternal || mayBeTLD;
}
/**
* Checks if a given URL has a valid Top-Level Domain (TLD).
*
* @param {string} url - The URL to check.
* @param {number} maxLength - The maximum length of the TLD.
* @return {boolean} Returns true if the URL has a valid TLD, false otherwise.
*/
function hasPossibleTLD(url, maxLength = 6) {
// Clean the URL by removing anything after the first occurrence of "?" or "#".
const cleanedURL = url.split(/[?#]/)[0];
// Regular expression explanation:
// - (?<=\S) : Positive lookbehind assertion to ensure there is at least one non-whitespace character before the TLD
// - \. : Matches a literal dot (.)
// - [a-zA-Z_]{2,maxLength} : Matches 2 to maxLength letters or underscores, representing the TLD
// - (?:\/|$) : Non-capturing group that matches either a forward slash (/) or the end of the string
const regex = new RegExp(`(?<=\\S)\\.(?:[a-zA-Z_]{2,${maxLength}})(?:\\/|$)`);
return regex.test(cleanedURL);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/link-control/use-search-handler.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const handleNoop = () => Promise.resolve([]);
const handleDirectEntry = val => {
let type = URL_TYPE;
const protocol = (0,external_wp_url_namespaceObject.getProtocol)(val) || '';
if (protocol.includes('mailto')) {
type = MAILTO_TYPE;
}
if (protocol.includes('tel')) {
type = TEL_TYPE;
}
if (val?.startsWith('#')) {
type = INTERNAL_TYPE;
}
return Promise.resolve([{
id: val,
title: val,
url: type === 'URL' ? (0,external_wp_url_namespaceObject.prependHTTP)(val) : val,
type
}]);
};
const handleEntitySearch = async (val, suggestionsQuery, fetchSearchSuggestions, withCreateSuggestion, pageOnFront, pageForPosts) => {
const {
isInitialSuggestions
} = suggestionsQuery;
const results = await fetchSearchSuggestions(val, suggestionsQuery);
// Identify front page and update type to match.
results.map(result => {
if (Number(result.id) === pageOnFront) {
result.isFrontPage = true;
return result;
} else if (Number(result.id) === pageForPosts) {
result.isBlogHome = true;
return result;
}
return result;
});
// If displaying initial suggestions just return plain results.
if (isInitialSuggestions) {
return results;
}
// Here we append a faux suggestion to represent a "CREATE" option. This
// is detected in the rendering of the search results and handled as a
// special case. This is currently necessary because the suggestions
// dropdown will only appear if there are valid suggestions and
// therefore unless the create option is a suggestion it will not
// display in scenarios where there are no results returned from the
// API. In addition promoting CREATE to a first class suggestion affords
// the a11y benefits afforded by `URLInput` to all suggestions (eg:
// keyboard handling, ARIA roles...etc).
//
// Note also that the value of the `title` and `url` properties must correspond
// to the text value of the `<input>`. This is because `title` is used
// when creating the suggestion. Similarly `url` is used when using keyboard to select
// the suggestion (the <form> `onSubmit` handler falls-back to `url`).
return isURLLike(val) || !withCreateSuggestion ? results : results.concat({
// the `id` prop is intentionally ommitted here because it
// is never exposed as part of the component's public API.
// see: https://github.com/WordPress/gutenberg/pull/19775#discussion_r378931316.
title: val,
// Must match the existing `<input>`s text value.
url: val,
// Must match the existing `<input>`s text value.
type: CREATE_TYPE
});
};
function useSearchHandler(suggestionsQuery, allowDirectEntry, withCreateSuggestion) {
const {
fetchSearchSuggestions,
pageOnFront,
pageForPosts
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getSettings
} = select(store);
return {
pageOnFront: getSettings().pageOnFront,
pageForPosts: getSettings().pageForPosts,
fetchSearchSuggestions: getSettings().__experimentalFetchLinkSuggestions
};
}, []);
const directEntryHandler = allowDirectEntry ? handleDirectEntry : handleNoop;
return (0,external_wp_element_namespaceObject.useCallback)((val, {
isInitialSuggestions
}) => {
return isURLLike(val) ? directEntryHandler(val, {
isInitialSuggestions
}) : handleEntitySearch(val, {
...suggestionsQuery,
isInitialSuggestions
}, fetchSearchSuggestions, withCreateSuggestion, pageOnFront, pageForPosts);
}, [directEntryHandler, fetchSearchSuggestions, pageOnFront, pageForPosts, suggestionsQuery, withCreateSuggestion]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/link-control/search-input.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
// Must be a function as otherwise URLInput will default
// to the fetchLinkSuggestions passed in block editor settings
// which will cause an unintended http request.
const noopSearchHandler = () => Promise.resolve([]);
const noop = () => {};
const LinkControlSearchInput = (0,external_wp_element_namespaceObject.forwardRef)(({
value,
children,
currentLink = {},
className = null,
placeholder = null,
withCreateSuggestion = false,
onCreateSuggestion = noop,
onChange = noop,
onSelect = noop,
showSuggestions = true,
renderSuggestions = props => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LinkControlSearchResults, {
...props
}),
fetchSuggestions = null,
allowDirectEntry = true,
showInitialSuggestions = false,
suggestionsQuery = {},
withURLSuggestion = true,
createSuggestionButtonText,
hideLabelFromVision = false,
suffix
}, ref) => {
const genericSearchHandler = useSearchHandler(suggestionsQuery, allowDirectEntry, withCreateSuggestion, withURLSuggestion);
const searchHandler = showSuggestions ? fetchSuggestions || genericSearchHandler : noopSearchHandler;
const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(LinkControlSearchInput);
const [focusedSuggestion, setFocusedSuggestion] = (0,external_wp_element_namespaceObject.useState)();
/**
* Handles the user moving between different suggestions. Does not handle
* choosing an individual item.
*
* @param {string} selection the url of the selected suggestion.
* @param {Object} suggestion the suggestion object.
*/
const onInputChange = (selection, suggestion) => {
onChange(selection);
setFocusedSuggestion(suggestion);
};
const handleRenderSuggestions = props => renderSuggestions({
...props,
instanceId,
withCreateSuggestion,
createSuggestionButtonText,
suggestionsQuery,
handleSuggestionClick: suggestion => {
if (props.handleSuggestionClick) {
props.handleSuggestionClick(suggestion);
}
onSuggestionSelected(suggestion);
}
});
const onSuggestionSelected = async selectedSuggestion => {
let suggestion = selectedSuggestion;
if (CREATE_TYPE === selectedSuggestion.type) {
// Create a new page and call onSelect with the output from the onCreateSuggestion callback.
try {
suggestion = await onCreateSuggestion(selectedSuggestion.title);
if (suggestion?.url) {
onSelect(suggestion);
}
} catch (e) {}
return;
}
if (allowDirectEntry || suggestion && Object.keys(suggestion).length >= 1) {
const {
id,
url,
...restLinkProps
} = currentLink !== null && currentLink !== void 0 ? currentLink : {};
onSelect(
// Some direct entries don't have types or IDs, and we still need to clear the previous ones.
{
...restLinkProps,
...suggestion
}, suggestion);
}
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-link-control__search-input-container",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(url_input, {
disableSuggestions: currentLink?.url === value,
label: (0,external_wp_i18n_namespaceObject.__)('Link'),
hideLabelFromVision: hideLabelFromVision,
className: className,
value: value,
onChange: onInputChange,
placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : (0,external_wp_i18n_namespaceObject.__)('Search or type URL'),
__experimentalRenderSuggestions: showSuggestions ? handleRenderSuggestions : null,
__experimentalFetchLinkSuggestions: searchHandler,
__experimentalHandleURLSuggestions: true,
__experimentalShowInitialSuggestions: showInitialSuggestions,
onSubmit: (suggestion, event) => {
const hasSuggestion = suggestion || focusedSuggestion;
// If there is no suggestion and the value (ie: any manually entered URL) is empty
// then don't allow submission otherwise we get empty links.
if (!hasSuggestion && !value?.trim()?.length) {
event.preventDefault();
} else {
onSuggestionSelected(hasSuggestion || {
url: value
});
}
},
ref: ref,
suffix: suffix
}), children]
});
});
/* harmony default export */ const search_input = (LinkControlSearchInput);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/info.js
/**
* WordPress dependencies
*/
const info = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M12 3.2c-4.8 0-8.8 3.9-8.8 8.8 0 4.8 3.9 8.8 8.8 8.8 4.8 0 8.8-3.9 8.8-8.8 0-4.8-4-8.8-8.8-8.8zm0 16c-4 0-7.2-3.3-7.2-7.2C4.8 8 8 4.8 12 4.8s7.2 3.3 7.2 7.2c0 4-3.2 7.2-7.2 7.2zM11 17h2v-6h-2v6zm0-8h2V7h-2v2z"
})
});
/* harmony default export */ const library_info = (info);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/pencil.js
/**
* WordPress dependencies
*/
const pencil = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "m19 7-3-3-8.5 8.5-1 4 4-1L19 7Zm-7 11.5H5V20h7v-1.5Z"
})
});
/* harmony default export */ const library_pencil = (pencil);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/edit.js
/**
* Internal dependencies
*/
/* harmony default export */ const edit = (library_pencil);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/link-off.js
/**
* WordPress dependencies
*/
const linkOff = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M17.031 4.703 15.576 4l-1.56 3H14v.03l-2.324 4.47H9.5V13h1.396l-1.502 2.889h-.95a3.694 3.694 0 0 1 0-7.389H10V7H8.444a5.194 5.194 0 1 0 0 10.389h.17L7.5 19.53l1.416.719L15.049 8.5h.507a3.694 3.694 0 0 1 0 7.39H14v1.5h1.556a5.194 5.194 0 0 0 .273-10.383l1.202-2.304Z"
})
});
/* harmony default export */ const link_off = (linkOff);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/copy-small.js
/**
* WordPress dependencies
*/
const copySmall = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M5.625 5.5h9.75c.069 0 .125.056.125.125v9.75a.125.125 0 0 1-.125.125h-9.75a.125.125 0 0 1-.125-.125v-9.75c0-.069.056-.125.125-.125ZM4 5.625C4 4.728 4.728 4 5.625 4h9.75C16.273 4 17 4.728 17 5.625v9.75c0 .898-.727 1.625-1.625 1.625h-9.75A1.625 1.625 0 0 1 4 15.375v-9.75Zm14.5 11.656v-9H20v9C20 18.8 18.77 20 17.251 20H6.25v-1.5h11.001c.69 0 1.249-.528 1.249-1.219Z"
})
});
/* harmony default export */ const copy_small = (copySmall);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/link-control/viewer-slot.js
/**
* WordPress dependencies
*/
const {
Slot: ViewerSlot,
Fill: ViewerFill
} = (0,external_wp_components_namespaceObject.createSlotFill)('BlockEditorLinkControlViewer');
/* harmony default export */ const viewer_slot = ((/* unused pure expression or super */ null && (ViewerSlot)));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/link-control/use-rich-url-data.js
/**
* Internal dependencies
*/
/**
* WordPress dependencies
*/
function use_rich_url_data_reducer(state, action) {
switch (action.type) {
case 'RESOLVED':
return {
...state,
isFetching: false,
richData: action.richData
};
case 'ERROR':
return {
...state,
isFetching: false,
richData: null
};
case 'LOADING':
return {
...state,
isFetching: true
};
default:
throw new Error(`Unexpected action type ${action.type}`);
}
}
function useRemoteUrlData(url) {
const [state, dispatch] = (0,external_wp_element_namespaceObject.useReducer)(use_rich_url_data_reducer, {
richData: null,
isFetching: false
});
const {
fetchRichUrlData
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getSettings
} = select(store);
return {
fetchRichUrlData: getSettings().__experimentalFetchRichUrlData
};
}, []);
(0,external_wp_element_namespaceObject.useEffect)(() => {
// Only make the request if we have an actual URL
// and the fetching util is available. In some editors
// there may not be such a util.
if (url?.length && fetchRichUrlData && typeof AbortController !== 'undefined') {
dispatch({
type: 'LOADING'
});
const controller = new window.AbortController();
const signal = controller.signal;
fetchRichUrlData(url, {
signal
}).then(urlData => {
dispatch({
type: 'RESOLVED',
richData: urlData
});
}).catch(() => {
// Avoid setting state on unmounted component
if (!signal.aborted) {
dispatch({
type: 'ERROR'
});
}
});
// Cleanup: when the URL changes the abort the current request.
return () => {
controller.abort();
};
}
}, [url]);
return state;
}
/* harmony default export */ const use_rich_url_data = (useRemoteUrlData);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/link-control/link-preview.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Filters the title for display. Removes the protocol and www prefix.
*
* @param {string} title The title to be filtered.
*
* @return {string} The filtered title.
*/
function filterTitleForDisplay(title) {
// Derived from `filterURLForDisplay` in `@wordpress/url`.
return title.replace(/^[a-z\-.\+]+[0-9]*:(\/\/)?/i, '').replace(/^www\./i, '');
}
function LinkPreview({
value,
onEditClick,
hasRichPreviews = false,
hasUnlinkControl = false,
onRemove
}) {
const showIconLabels = (0,external_wp_data_namespaceObject.useSelect)(select => select(external_wp_preferences_namespaceObject.store).get('core', 'showIconLabels'), []);
// Avoid fetching if rich previews are not desired.
const showRichPreviews = hasRichPreviews ? value?.url : null;
const {
richData,
isFetching
} = use_rich_url_data(showRichPreviews);
// Rich data may be an empty object so test for that.
const hasRichData = richData && Object.keys(richData).length;
const displayURL = value && (0,external_wp_url_namespaceObject.filterURLForDisplay)((0,external_wp_url_namespaceObject.safeDecodeURI)(value.url), 24) || '';
// url can be undefined if the href attribute is unset
const isEmptyURL = !value?.url?.length;
const displayTitle = !isEmptyURL && (0,external_wp_dom_namespaceObject.__unstableStripHTML)(richData?.title || value?.title || displayURL);
const isUrlRedundant = !value?.url || filterTitleForDisplay(displayTitle) === displayURL;
let icon;
if (richData?.icon) {
icon = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("img", {
src: richData?.icon,
alt: ""
});
} else if (isEmptyURL) {
icon = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
icon: library_info,
size: 32
});
} else {
icon = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
icon: library_globe
});
}
const {
createNotice
} = (0,external_wp_data_namespaceObject.useDispatch)(external_wp_notices_namespaceObject.store);
const ref = (0,external_wp_compose_namespaceObject.useCopyToClipboard)(value.url, () => {
createNotice('info', (0,external_wp_i18n_namespaceObject.__)('Link copied to clipboard.'), {
isDismissible: true,
type: 'snackbar'
});
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
"aria-label": (0,external_wp_i18n_namespaceObject.__)('Currently selected'),
className: dist_clsx('block-editor-link-control__search-item', {
'is-current': true,
'is-rich': hasRichData,
'is-fetching': !!isFetching,
'is-preview': true,
'is-error': isEmptyURL,
'is-url-title': displayTitle === displayURL
}),
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-link-control__search-item-top",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("span", {
className: "block-editor-link-control__search-item-header",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
className: dist_clsx('block-editor-link-control__search-item-icon', {
'is-image': richData?.icon
}),
children: icon
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
className: "block-editor-link-control__search-item-details",
children: !isEmptyURL ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ExternalLink, {
className: "block-editor-link-control__search-item-title",
href: value.url,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalTruncate, {
numberOfLines: 1,
children: displayTitle
})
}), !isUrlRedundant && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
className: "block-editor-link-control__search-item-info",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalTruncate, {
numberOfLines: 1,
children: displayURL
})
})]
}) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
className: "block-editor-link-control__search-item-error-notice",
children: (0,external_wp_i18n_namespaceObject.__)('Link is empty')
})
})]
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
icon: edit,
label: (0,external_wp_i18n_namespaceObject.__)('Edit link'),
onClick: onEditClick,
size: "compact"
}), hasUnlinkControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
icon: link_off,
label: (0,external_wp_i18n_namespaceObject.__)('Remove link'),
onClick: onRemove,
size: "compact"
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
icon: copy_small,
label: (0,external_wp_i18n_namespaceObject.sprintf)(
// Translators: %s is a placeholder for the link URL and an optional colon, (if a Link URL is present).
(0,external_wp_i18n_namespaceObject.__)('Copy link%s'),
// Ends up looking like "Copy link: https://example.com".
isEmptyURL || showIconLabels ? '' : ': ' + value.url),
ref: ref,
accessibleWhenDisabled: true,
disabled: isEmptyURL,
size: "compact"
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ViewerSlot, {
fillProps: value
})]
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/link-control/settings.js
/**
* WordPress dependencies
*/
const settings_noop = () => {};
const LinkControlSettings = ({
value,
onChange = settings_noop,
settings
}) => {
if (!settings || !settings.length) {
return null;
}
const handleSettingChange = setting => newValue => {
onChange({
...value,
[setting.id]: newValue
});
};
const theSettings = settings.map(setting => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.CheckboxControl, {
__nextHasNoMarginBottom: true,
className: "block-editor-link-control__setting",
label: setting.title,
onChange: handleSettingChange(setting),
checked: value ? !!value[setting.id] : false,
help: setting?.help
}, setting.id));
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("fieldset", {
className: "block-editor-link-control__settings",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.VisuallyHidden, {
as: "legend",
children: (0,external_wp_i18n_namespaceObject.__)('Currently selected link settings')
}), theSettings]
});
};
/* harmony default export */ const link_control_settings = (LinkControlSettings);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/link-control/use-create-page.js
/**
* WordPress dependencies
*/
function useCreatePage(handleCreatePage) {
const cancelableCreateSuggestion = (0,external_wp_element_namespaceObject.useRef)();
const [isCreatingPage, setIsCreatingPage] = (0,external_wp_element_namespaceObject.useState)(false);
const [errorMessage, setErrorMessage] = (0,external_wp_element_namespaceObject.useState)(null);
const createPage = async function (suggestionTitle) {
setIsCreatingPage(true);
setErrorMessage(null);
try {
// Make cancellable in order that we can avoid setting State
// if the component unmounts during the call to `createSuggestion`
cancelableCreateSuggestion.current = makeCancelable(
// Using Promise.resolve to allow createSuggestion to return a
// non-Promise based value.
Promise.resolve(handleCreatePage(suggestionTitle)));
return await cancelableCreateSuggestion.current.promise;
} catch (error) {
if (error && error.isCanceled) {
return; // bail if canceled to avoid setting state
}
setErrorMessage(error.message || (0,external_wp_i18n_namespaceObject.__)('An unknown error occurred during creation. Please try again.'));
throw error;
} finally {
setIsCreatingPage(false);
}
};
/**
* Handles cancelling any pending Promises that have been made cancelable.
*/
(0,external_wp_element_namespaceObject.useEffect)(() => {
return () => {
// componentDidUnmount
if (cancelableCreateSuggestion.current) {
cancelableCreateSuggestion.current.cancel();
}
};
}, []);
return {
createPage,
isCreatingPage,
errorMessage
};
}
/**
* Creates a wrapper around a promise which allows it to be programmatically
* cancelled.
* See: https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html
*
* @param {Promise} promise the Promise to make cancelable
*/
const makeCancelable = promise => {
let hasCanceled_ = false;
const wrappedPromise = new Promise((resolve, reject) => {
promise.then(val => hasCanceled_ ? reject({
isCanceled: true
}) : resolve(val), error => hasCanceled_ ? reject({
isCanceled: true
}) : reject(error));
});
return {
promise: wrappedPromise,
cancel() {
hasCanceled_ = true;
}
};
};
// EXTERNAL MODULE: ./node_modules/fast-deep-equal/index.js
var fast_deep_equal = __webpack_require__(5215);
var fast_deep_equal_default = /*#__PURE__*/__webpack_require__.n(fast_deep_equal);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/link-control/use-internal-value.js
/**
* WordPress dependencies
*/
/**
* External dependencies
*/
function useInternalValue(value) {
const [internalValue, setInternalValue] = (0,external_wp_element_namespaceObject.useState)(value || {});
const [previousValue, setPreviousValue] = (0,external_wp_element_namespaceObject.useState)(value);
// If the value prop changes, update the internal state.
// See:
// - https://github.com/WordPress/gutenberg/pull/51387#issuecomment-1722927384.
// - https://react.dev/reference/react/useState#storing-information-from-previous-renders.
if (!fast_deep_equal_default()(value, previousValue)) {
setPreviousValue(value);
setInternalValue(value);
}
const setInternalURLInputValue = nextValue => {
setInternalValue({
...internalValue,
url: nextValue
});
};
const setInternalTextInputValue = nextValue => {
setInternalValue({
...internalValue,
title: nextValue
});
};
const createSetInternalSettingValueHandler = settingsKeys => nextValue => {
// Only apply settings values which are defined in the settings prop.
const settingsUpdates = Object.keys(nextValue).reduce((acc, key) => {
if (settingsKeys.includes(key)) {
acc[key] = nextValue[key];
}
return acc;
}, {});
setInternalValue({
...internalValue,
...settingsUpdates
});
};
return [internalValue, setInternalValue, setInternalURLInputValue, setInternalTextInputValue, createSetInternalSettingValueHandler];
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/link-control/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Default properties associated with a link control value.
*
* @typedef WPLinkControlDefaultValue
*
* @property {string} url Link URL.
* @property {string=} title Link title.
* @property {boolean=} opensInNewTab Whether link should open in a new browser
* tab. This value is only assigned if not
* providing a custom `settings` prop.
*/
/* eslint-disable jsdoc/valid-types */
/**
* Custom settings values associated with a link.
*
* @typedef {{[setting:string]:any}} WPLinkControlSettingsValue
*/
/* eslint-enable */
/**
* Custom settings values associated with a link.
*
* @typedef WPLinkControlSetting
*
* @property {string} id Identifier to use as property for setting value.
* @property {string} title Human-readable label to show in user interface.
*/
/**
* Properties associated with a link control value, composed as a union of the
* default properties and any custom settings values.
*
* @typedef {WPLinkControlDefaultValue&WPLinkControlSettingsValue} WPLinkControlValue
*/
/** @typedef {(nextValue:WPLinkControlValue)=>void} WPLinkControlOnChangeProp */
/**
* Properties associated with a search suggestion used within the LinkControl.
*
* @typedef WPLinkControlSuggestion
*
* @property {string} id Identifier to use to uniquely identify the suggestion.
* @property {string} type Identifies the type of the suggestion (eg: `post`,
* `page`, `url`...etc)
* @property {string} title Human-readable label to show in user interface.
* @property {string} url A URL for the suggestion.
*/
/** @typedef {(title:string)=>WPLinkControlSuggestion} WPLinkControlCreateSuggestionProp */
/**
* @typedef WPLinkControlProps
*
* @property {(WPLinkControlSetting[])=} settings An array of settings objects. Each object will used to
* render a `ToggleControl` for that setting.
* @property {boolean=} forceIsEditingLink If passed as either `true` or `false`, controls the
* internal editing state of the component to respective
* show or not show the URL input field.
* @property {WPLinkControlValue=} value Current link value.
* @property {WPLinkControlOnChangeProp=} onChange Value change handler, called with the updated value if
* the user selects a new link or updates settings.
* @property {boolean=} noDirectEntry Whether to allow turning a URL-like search query directly into a link.
* @property {boolean=} showSuggestions Whether to present suggestions when typing the URL.
* @property {boolean=} showInitialSuggestions Whether to present initial suggestions immediately.
* @property {boolean=} withCreateSuggestion Whether to allow creation of link value from suggestion.
* @property {Object=} suggestionsQuery Query parameters to pass along to wp.blockEditor.__experimentalFetchLinkSuggestions.
* @property {boolean=} noURLSuggestion Whether to add a fallback suggestion which treats the search query as a URL.
* @property {boolean=} hasTextControl Whether to add a text field to the UI to update the value.title.
* @property {string|Function|undefined} createSuggestionButtonText The text to use in the button that calls createSuggestion.
* @property {Function} renderControlBottom Optional controls to be rendered at the bottom of the component.
*/
const link_control_noop = () => {};
const PREFERENCE_SCOPE = 'core/block-editor';
const PREFERENCE_KEY = 'linkControlSettingsDrawer';
/**
* Renders a link control. A link control is a controlled input which maintains
* a value associated with a link (HTML anchor element) and relevant settings
* for how that link is expected to behave.
*
* @param {WPLinkControlProps} props Component props.
*/
function LinkControl({
searchInputPlaceholder,
value,
settings = DEFAULT_LINK_SETTINGS,
onChange = link_control_noop,
onRemove,
onCancel,
noDirectEntry = false,
showSuggestions = true,
showInitialSuggestions,
forceIsEditingLink,
createSuggestion,
withCreateSuggestion,
inputValue: propInputValue = '',
suggestionsQuery = {},
noURLSuggestion = false,
createSuggestionButtonText,
hasRichPreviews = false,
hasTextControl = false,
renderControlBottom = null
}) {
if (withCreateSuggestion === undefined && createSuggestion) {
withCreateSuggestion = true;
}
const [settingsOpen, setSettingsOpen] = (0,external_wp_element_namespaceObject.useState)(false);
const {
advancedSettingsPreference
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
var _prefsStore$get;
const prefsStore = select(external_wp_preferences_namespaceObject.store);
return {
advancedSettingsPreference: (_prefsStore$get = prefsStore.get(PREFERENCE_SCOPE, PREFERENCE_KEY)) !== null && _prefsStore$get !== void 0 ? _prefsStore$get : false
};
}, []);
const {
set: setPreference
} = (0,external_wp_data_namespaceObject.useDispatch)(external_wp_preferences_namespaceObject.store);
/**
* Sets the open/closed state of the Advanced Settings Drawer,
* optionlly persisting the state to the user's preferences.
*
* Note that Block Editor components can be consumed by non-WordPress
* environments which may not have preferences setup.
* Therefore a local state is also used as a fallback.
*
* @param {boolean} prefVal the open/closed state of the Advanced Settings Drawer.
*/
const setSettingsOpenWithPreference = prefVal => {
if (setPreference) {
setPreference(PREFERENCE_SCOPE, PREFERENCE_KEY, prefVal);
}
setSettingsOpen(prefVal);
};
// Block Editor components can be consumed by non-WordPress environments
// which may not have these preferences setup.
// Therefore a local state is used as a fallback.
const isSettingsOpen = advancedSettingsPreference || settingsOpen;
const isMountingRef = (0,external_wp_element_namespaceObject.useRef)(true);
const wrapperNode = (0,external_wp_element_namespaceObject.useRef)();
const textInputRef = (0,external_wp_element_namespaceObject.useRef)();
const isEndingEditWithFocusRef = (0,external_wp_element_namespaceObject.useRef)(false);
const settingsKeys = settings.map(({
id
}) => id);
const [internalControlValue, setInternalControlValue, setInternalURLInputValue, setInternalTextInputValue, createSetInternalSettingValueHandler] = useInternalValue(value);
const valueHasChanges = value && !(0,external_wp_isShallowEqual_namespaceObject.isShallowEqualObjects)(internalControlValue, value);
const [isEditingLink, setIsEditingLink] = (0,external_wp_element_namespaceObject.useState)(forceIsEditingLink !== undefined ? forceIsEditingLink : !value || !value.url);
const {
createPage,
isCreatingPage,
errorMessage
} = useCreatePage(createSuggestion);
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (forceIsEditingLink === undefined) {
return;
}
setIsEditingLink(forceIsEditingLink);
}, [forceIsEditingLink]);
(0,external_wp_element_namespaceObject.useEffect)(() => {
// We don't auto focus into the Link UI on mount
// because otherwise using the keyboard to select text
// *within* the link format is not possible.
if (isMountingRef.current) {
return;
}
// Scenario - when:
// - switching between editable and non editable LinkControl
// - clicking on a link
// ...then move focus to the *first* element to avoid focus loss
// and to ensure focus is *within* the Link UI.
const nextFocusTarget = external_wp_dom_namespaceObject.focus.focusable.find(wrapperNode.current)[0] || wrapperNode.current;
nextFocusTarget.focus();
isEndingEditWithFocusRef.current = false;
}, [isEditingLink, isCreatingPage]);
// The component mounting reference is maintained separately
// to correctly reset values in `StrictMode`.
(0,external_wp_element_namespaceObject.useEffect)(() => {
isMountingRef.current = false;
return () => {
isMountingRef.current = true;
};
}, []);
const hasLinkValue = value?.url?.trim()?.length > 0;
/**
* Cancels editing state and marks that focus may need to be restored after
* the next render, if focus was within the wrapper when editing finished.
*/
const stopEditing = () => {
isEndingEditWithFocusRef.current = !!wrapperNode.current?.contains(wrapperNode.current.ownerDocument.activeElement);
setIsEditingLink(false);
};
const handleSelectSuggestion = updatedValue => {
// Suggestions may contains "settings" values (e.g. `opensInNewTab`)
// which should not overide any existing settings values set by the
// user. This filters out any settings values from the suggestion.
const nonSettingsChanges = Object.keys(updatedValue).reduce((acc, key) => {
if (!settingsKeys.includes(key)) {
acc[key] = updatedValue[key];
}
return acc;
}, {});
onChange({
...internalControlValue,
...nonSettingsChanges,
// As title is not a setting, it must be manually applied
// in such a way as to preserve the users changes over
// any "title" value provided by the "suggestion".
title: internalControlValue?.title || updatedValue?.title
});
stopEditing();
};
const handleSubmit = () => {
if (valueHasChanges) {
// Submit the original value with new stored values applied
// on top. URL is a special case as it may also be a prop.
onChange({
...value,
...internalControlValue,
url: currentUrlInputValue
});
}
stopEditing();
};
const handleSubmitWithEnter = event => {
const {
keyCode
} = event;
if (keyCode === external_wp_keycodes_namespaceObject.ENTER && !currentInputIsEmpty // Disallow submitting empty values.
) {
event.preventDefault();
handleSubmit();
}
};
const resetInternalValues = () => {
setInternalControlValue(value);
};
const handleCancel = event => {
event.preventDefault();
event.stopPropagation();
// Ensure that any unsubmitted input changes are reset.
resetInternalValues();
if (hasLinkValue) {
// If there is a link then exist editing mode and show preview.
stopEditing();
} else {
// If there is no link value, then remove the link entirely.
onRemove?.();
}
onCancel?.();
};
const currentUrlInputValue = propInputValue || internalControlValue?.url || '';
const currentInputIsEmpty = !currentUrlInputValue?.trim()?.length;
const shownUnlinkControl = onRemove && value && !isEditingLink && !isCreatingPage;
const showActions = isEditingLink && hasLinkValue;
// Only show text control once a URL value has been committed
// and it isn't just empty whitespace.
// See https://github.com/WordPress/gutenberg/pull/33849/#issuecomment-932194927.
const showTextControl = hasLinkValue && hasTextControl;
const isEditing = (isEditingLink || !value) && !isCreatingPage;
const isDisabled = !valueHasChanges || currentInputIsEmpty;
const showSettings = !!settings?.length && isEditingLink && hasLinkValue;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
tabIndex: -1,
ref: wrapperNode,
className: "block-editor-link-control",
children: [isCreatingPage && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-link-control__loading",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Spinner, {}), " ", (0,external_wp_i18n_namespaceObject.__)('Creating'), "\u2026"]
}), isEditing && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: dist_clsx({
'block-editor-link-control__search-input-wrapper': true,
'has-text-control': showTextControl,
'has-actions': showActions
}),
children: [showTextControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.TextControl, {
__nextHasNoMarginBottom: true,
ref: textInputRef,
className: "block-editor-link-control__field block-editor-link-control__text-content",
label: (0,external_wp_i18n_namespaceObject.__)('Text'),
value: internalControlValue?.title,
onChange: setInternalTextInputValue,
onKeyDown: handleSubmitWithEnter,
__next40pxDefaultSize: true
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(search_input, {
currentLink: value,
className: "block-editor-link-control__field block-editor-link-control__search-input",
placeholder: searchInputPlaceholder,
value: currentUrlInputValue,
withCreateSuggestion: withCreateSuggestion,
onCreateSuggestion: createPage,
onChange: setInternalURLInputValue,
onSelect: handleSelectSuggestion,
showInitialSuggestions: showInitialSuggestions,
allowDirectEntry: !noDirectEntry,
showSuggestions: showSuggestions,
suggestionsQuery: suggestionsQuery,
withURLSuggestion: !noURLSuggestion,
createSuggestionButtonText: createSuggestionButtonText,
hideLabelFromVision: !showTextControl,
suffix: showActions ? undefined : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalInputControlSuffixWrapper, {
variant: "control",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
onClick: isDisabled ? link_control_noop : handleSubmit,
label: (0,external_wp_i18n_namespaceObject.__)('Submit'),
icon: keyboard_return,
className: "block-editor-link-control__search-submit",
"aria-disabled": isDisabled,
size: "small"
})
}),
props: true
})]
}), errorMessage && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Notice, {
className: "block-editor-link-control__search-error",
status: "error",
isDismissible: false,
children: errorMessage
})]
}), value && !isEditingLink && !isCreatingPage && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LinkPreview, {
// force remount when URL changes to avoid race conditions for rich previews
value: value,
onEditClick: () => setIsEditingLink(true),
hasRichPreviews: hasRichPreviews,
hasUnlinkControl: shownUnlinkControl,
onRemove: () => {
onRemove();
setIsEditingLink(true);
}
}, value?.url), showSettings && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-link-control__tools",
children: !currentInputIsEmpty && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(settings_drawer, {
settingsOpen: isSettingsOpen,
setSettingsOpen: setSettingsOpenWithPreference,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(link_control_settings, {
value: internalControlValue,
settings: settings,
onChange: createSetInternalSettingValueHandler(settingsKeys)
})
})
}), showActions && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalHStack, {
justify: "right",
className: "block-editor-link-control__search-actions",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
variant: "tertiary",
onClick: handleCancel,
children: (0,external_wp_i18n_namespaceObject.__)('Cancel')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
variant: "primary",
onClick: isDisabled ? link_control_noop : handleSubmit,
className: "block-editor-link-control__search-submit",
"aria-disabled": isDisabled,
children: (0,external_wp_i18n_namespaceObject.__)('Save')
})]
}), !isCreatingPage && renderControlBottom && renderControlBottom()]
});
}
LinkControl.ViewerFill = ViewerFill;
LinkControl.DEFAULT_LINK_SETTINGS = DEFAULT_LINK_SETTINGS;
/* harmony default export */ const link_control = (LinkControl);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/media-replace-flow/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const media_replace_flow_noop = () => {};
let uniqueId = 0;
const MediaReplaceFlow = ({
mediaURL,
mediaId,
mediaIds,
allowedTypes,
accept,
onError,
onSelect,
onSelectURL,
onReset,
onToggleFeaturedImage,
useFeaturedImage,
onFilesUpload = media_replace_flow_noop,
name = (0,external_wp_i18n_namespaceObject.__)('Replace'),
createNotice,
removeNotice,
children,
multiple = false,
addToGallery,
handleUpload = true,
popoverProps
}) => {
const mediaUpload = (0,external_wp_data_namespaceObject.useSelect)(select => {
return select(store).getSettings().mediaUpload;
}, []);
const canUpload = !!mediaUpload;
const editMediaButtonRef = (0,external_wp_element_namespaceObject.useRef)();
const errorNoticeID = `block-editor/media-replace-flow/error-notice/${++uniqueId}`;
const onUploadError = message => {
const safeMessage = (0,external_wp_dom_namespaceObject.__unstableStripHTML)(message);
if (onError) {
onError(safeMessage);
return;
}
// We need to set a timeout for showing the notice
// so that VoiceOver and possibly other screen readers
// can announce the error after the toolbar button
// regains focus once the upload dialog closes.
// Otherwise VO simply skips over the notice and announces
// the focused element and the open menu.
setTimeout(() => {
createNotice('error', safeMessage, {
speak: true,
id: errorNoticeID,
isDismissible: true
});
}, 1000);
};
const selectMedia = (media, closeMenu) => {
if (useFeaturedImage && onToggleFeaturedImage) {
onToggleFeaturedImage();
}
closeMenu();
// Calling `onSelect` after the state update since it might unmount the component.
onSelect(media);
(0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.__)('The media file has been replaced'));
removeNotice(errorNoticeID);
};
const uploadFiles = (event, closeMenu) => {
const files = event.target.files;
if (!handleUpload) {
closeMenu();
return onSelect(files);
}
onFilesUpload(files);
mediaUpload({
allowedTypes,
filesList: files,
onFileChange: ([media]) => {
selectMedia(media, closeMenu);
},
onError: onUploadError
});
};
const openOnArrowDown = event => {
if (event.keyCode === external_wp_keycodes_namespaceObject.DOWN) {
event.preventDefault();
event.target.click();
}
};
const onlyAllowsImages = () => {
if (!allowedTypes || allowedTypes.length === 0) {
return false;
}
return allowedTypes.every(allowedType => allowedType === 'image' || allowedType.startsWith('image/'));
};
const gallery = multiple && onlyAllowsImages();
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Dropdown, {
popoverProps: popoverProps,
contentClassName: "block-editor-media-replace-flow__options",
renderToggle: ({
isOpen,
onToggle
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarButton, {
ref: editMediaButtonRef,
"aria-expanded": isOpen,
"aria-haspopup": "true",
onClick: onToggle,
onKeyDown: openOnArrowDown,
children: name
}),
renderContent: ({
onClose
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.NavigableMenu, {
className: "block-editor-media-replace-flow__media-upload-menu",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(check, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(media_upload, {
gallery: gallery,
addToGallery: addToGallery,
multiple: multiple,
value: multiple ? mediaIds : mediaId,
onSelect: media => selectMedia(media, onClose),
allowedTypes: allowedTypes,
render: ({
open
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
icon: library_media,
onClick: open,
children: (0,external_wp_i18n_namespaceObject.__)('Open Media Library')
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FormFileUpload, {
onChange: event => {
uploadFiles(event, onClose);
},
accept: accept,
multiple: !!multiple,
render: ({
openFileDialog
}) => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
icon: library_upload,
onClick: () => {
openFileDialog();
},
children: (0,external_wp_i18n_namespaceObject.__)('Upload')
});
}
})]
}), onToggleFeaturedImage && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
icon: post_featured_image,
onClick: onToggleFeaturedImage,
isPressed: useFeaturedImage,
children: (0,external_wp_i18n_namespaceObject.__)('Use featured image')
}), mediaURL && onReset && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
onClick: () => {
onReset();
onClose();
},
children: (0,external_wp_i18n_namespaceObject.__)('Reset')
}), typeof children === 'function' ? children({
onClose
}) : children]
}), onSelectURL &&
/*#__PURE__*/
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
(0,external_ReactJSXRuntime_namespaceObject.jsxs)("form", {
className: dist_clsx('block-editor-media-flow__url-input', {
'has-siblings': canUpload || onToggleFeaturedImage
}),
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
className: "block-editor-media-replace-flow__image-url-label",
children: (0,external_wp_i18n_namespaceObject.__)('Current media URL:')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(link_control, {
value: {
url: mediaURL
},
settings: [],
showSuggestions: false,
onChange: ({
url
}) => {
onSelectURL(url);
editMediaButtonRef.current.focus();
}
})]
})]
})
});
};
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/media-replace-flow/README.md
*/
/* harmony default export */ const media_replace_flow = ((0,external_wp_compose_namespaceObject.compose)([(0,external_wp_data_namespaceObject.withDispatch)(dispatch => {
const {
createNotice,
removeNotice
} = dispatch(external_wp_notices_namespaceObject.store);
return {
createNotice,
removeNotice
};
}), (0,external_wp_components_namespaceObject.withFilters)('editor.MediaReplaceFlow')])(MediaReplaceFlow));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/background-image-control/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const IMAGE_BACKGROUND_TYPE = 'image';
const BACKGROUND_POPOVER_PROPS = {
placement: 'left-start',
offset: 36,
shift: true,
className: 'block-editor-global-styles-background-panel__popover'
};
const background_image_control_noop = () => {};
/**
* Get the help text for the background size control.
*
* @param {string} value backgroundSize value.
* @return {string} Translated help text.
*/
function backgroundSizeHelpText(value) {
if (value === 'cover' || value === undefined) {
return (0,external_wp_i18n_namespaceObject.__)('Image covers the space evenly.');
}
if (value === 'contain') {
return (0,external_wp_i18n_namespaceObject.__)('Image is contained without distortion.');
}
return (0,external_wp_i18n_namespaceObject.__)('Image has a fixed width.');
}
/**
* Converts decimal x and y coords from FocalPointPicker to percentage-based values
* to use as backgroundPosition value.
*
* @param {{x?:number, y?:number}} value FocalPointPicker coords.
* @return {string} backgroundPosition value.
*/
const coordsToBackgroundPosition = value => {
if (!value || isNaN(value.x) && isNaN(value.y)) {
return undefined;
}
const x = isNaN(value.x) ? 0.5 : value.x;
const y = isNaN(value.y) ? 0.5 : value.y;
return `${x * 100}% ${y * 100}%`;
};
/**
* Converts backgroundPosition value to x and y coords for FocalPointPicker.
*
* @param {string} value backgroundPosition value.
* @return {{x?:number, y?:number}} FocalPointPicker coords.
*/
const backgroundPositionToCoords = value => {
if (!value) {
return {
x: undefined,
y: undefined
};
}
let [x, y] = value.split(' ').map(v => parseFloat(v) / 100);
x = isNaN(x) ? undefined : x;
y = isNaN(y) ? x : y;
return {
x,
y
};
};
function InspectorImagePreviewItem({
as = 'span',
imgUrl,
toggleProps = {},
filename,
label,
className,
onToggleCallback = background_image_control_noop
}) {
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (typeof toggleProps?.isOpen !== 'undefined') {
onToggleCallback(toggleProps?.isOpen);
}
}, [toggleProps?.isOpen, onToggleCallback]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalItemGroup, {
as: as,
className: className,
...toggleProps,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalHStack, {
justify: "flex-start",
as: "span",
className: "block-editor-global-styles-background-panel__inspector-preview-inner",
children: [imgUrl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
className: "block-editor-global-styles-background-panel__inspector-image-indicator-wrapper",
"aria-hidden": true,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
className: "block-editor-global-styles-background-panel__inspector-image-indicator",
style: {
backgroundImage: `url(${imgUrl})`
}
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.FlexItem, {
as: "span",
style: imgUrl ? {} : {
flexGrow: 1
},
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalTruncate, {
numberOfLines: 1,
className: "block-editor-global-styles-background-panel__inspector-media-replace-title",
children: label
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.VisuallyHidden, {
as: "span",
children: imgUrl ? (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %s: file name */
(0,external_wp_i18n_namespaceObject.__)('Background image: %s'), filename || label) : (0,external_wp_i18n_namespaceObject.__)('No background image selected')
})]
})]
})
});
}
function BackgroundControlsPanel({
label,
filename,
url: imgUrl,
children,
onToggle: onToggleCallback = background_image_control_noop,
hasImageValue
}) {
if (!hasImageValue) {
return;
}
const imgLabel = label || (0,external_wp_url_namespaceObject.getFilename)(imgUrl) || (0,external_wp_i18n_namespaceObject.__)('Add background image');
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Dropdown, {
popoverProps: BACKGROUND_POPOVER_PROPS,
renderToggle: ({
onToggle,
isOpen
}) => {
const toggleProps = {
onClick: onToggle,
className: 'block-editor-global-styles-background-panel__dropdown-toggle',
'aria-expanded': isOpen,
'aria-label': (0,external_wp_i18n_namespaceObject.__)('Background size, position and repeat options.'),
isOpen
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InspectorImagePreviewItem, {
imgUrl: imgUrl,
filename: filename,
label: imgLabel,
toggleProps: toggleProps,
as: "button",
onToggleCallback: onToggleCallback
});
},
renderContent: () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalDropdownContentWrapper, {
className: "block-editor-global-styles-background-panel__dropdown-content-wrapper",
paddingSize: "medium",
children: children
})
});
}
function LoadingSpinner() {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Placeholder, {
className: "block-editor-global-styles-background-panel__loading",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Spinner, {})
});
}
function BackgroundImageControls({
onChange,
style,
inheritedValue,
onRemoveImage = background_image_control_noop,
onResetImage = background_image_control_noop,
displayInPanel,
defaultValues
}) {
const [isUploading, setIsUploading] = (0,external_wp_element_namespaceObject.useState)(false);
const {
getSettings
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
id,
title,
url
} = style?.background?.backgroundImage || {
...inheritedValue?.background?.backgroundImage
};
const replaceContainerRef = (0,external_wp_element_namespaceObject.useRef)();
const {
createErrorNotice
} = (0,external_wp_data_namespaceObject.useDispatch)(external_wp_notices_namespaceObject.store);
const onUploadError = message => {
createErrorNotice(message, {
type: 'snackbar'
});
setIsUploading(false);
};
const resetBackgroundImage = () => onChange(setImmutably(style, ['background', 'backgroundImage'], undefined));
const onSelectMedia = media => {
if (!media || !media.url) {
resetBackgroundImage();
setIsUploading(false);
return;
}
if ((0,external_wp_blob_namespaceObject.isBlobURL)(media.url)) {
setIsUploading(true);
return;
}
// For media selections originated from a file upload.
if (media.media_type && media.media_type !== IMAGE_BACKGROUND_TYPE || !media.media_type && media.type && media.type !== IMAGE_BACKGROUND_TYPE) {
onUploadError((0,external_wp_i18n_namespaceObject.__)('Only images can be used as a background image.'));
return;
}
const sizeValue = style?.background?.backgroundSize || defaultValues?.backgroundSize;
const positionValue = style?.background?.backgroundPosition;
onChange(setImmutably(style, ['background'], {
...style?.background,
backgroundImage: {
url: media.url,
id: media.id,
source: 'file',
title: media.title || undefined
},
backgroundPosition:
/*
* A background image uploaded and set in the editor receives a default background position of '50% 0',
* when the background image size is the equivalent of "Tile".
* This is to increase the chance that the image's focus point is visible.
* This is in-editor only to assist with the user experience.
*/
!positionValue && ('auto' === sizeValue || !sizeValue) ? '50% 0' : positionValue,
backgroundSize: sizeValue
}));
setIsUploading(false);
};
// Drag and drop callback, restricting image to one.
const onFilesDrop = filesList => {
if (filesList?.length > 1) {
onUploadError((0,external_wp_i18n_namespaceObject.__)('Only one image can be used as a background image.'));
return;
}
getSettings().mediaUpload({
allowedTypes: [IMAGE_BACKGROUND_TYPE],
filesList,
onFileChange([image]) {
onSelectMedia(image);
},
onError: onUploadError
});
};
const hasValue = hasBackgroundImageValue(style);
const closeAndFocus = () => {
const [toggleButton] = external_wp_dom_namespaceObject.focus.tabbable.find(replaceContainerRef.current);
// Focus the toggle button and close the dropdown menu.
// This ensures similar behaviour as to selecting an image, where the dropdown is
// closed and focus is redirected to the dropdown toggle button.
toggleButton?.focus();
toggleButton?.click();
};
const onRemove = () => onChange(setImmutably(style, ['background'], {
backgroundImage: 'none'
}));
const canRemove = !hasValue && hasBackgroundImageValue(inheritedValue);
const imgLabel = title || (0,external_wp_url_namespaceObject.getFilename)(url) || (0,external_wp_i18n_namespaceObject.__)('Add background image');
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
ref: replaceContainerRef,
className: "block-editor-global-styles-background-panel__image-tools-panel-item",
children: [isUploading && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LoadingSpinner, {}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(media_replace_flow, {
mediaId: id,
mediaURL: url,
allowedTypes: [IMAGE_BACKGROUND_TYPE],
accept: "image/*",
onSelect: onSelectMedia,
popoverProps: {
className: dist_clsx({
'block-editor-global-styles-background-panel__media-replace-popover': displayInPanel
})
},
name: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InspectorImagePreviewItem, {
className: "block-editor-global-styles-background-panel__image-preview",
imgUrl: url,
filename: title,
label: imgLabel
}),
variant: "secondary",
onError: onUploadError,
onReset: () => {
closeAndFocus();
onResetImage();
},
children: canRemove && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
onClick: () => {
closeAndFocus();
onRemove();
onRemoveImage();
},
children: (0,external_wp_i18n_namespaceObject.__)('Remove')
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.DropZone, {
onFilesDrop: onFilesDrop,
label: (0,external_wp_i18n_namespaceObject.__)('Drop to upload')
})]
});
}
function BackgroundSizeControls({
onChange,
style,
inheritedValue,
defaultValues
}) {
const sizeValue = style?.background?.backgroundSize || inheritedValue?.background?.backgroundSize;
const repeatValue = style?.background?.backgroundRepeat || inheritedValue?.background?.backgroundRepeat;
const imageValue = style?.background?.backgroundImage?.url || inheritedValue?.background?.backgroundImage?.url;
const isUploadedImage = style?.background?.backgroundImage?.id;
const positionValue = style?.background?.backgroundPosition || inheritedValue?.background?.backgroundPosition;
const attachmentValue = style?.background?.backgroundAttachment || inheritedValue?.background?.backgroundAttachment;
/*
* Set default values for uploaded images.
* The default values are passed by the consumer.
* Block-level controls may have different defaults to root-level controls.
* A falsy value is treated by default as `auto` (Tile).
*/
let currentValueForToggle = !sizeValue && isUploadedImage ? defaultValues?.backgroundSize : sizeValue || 'auto';
/*
* The incoming value could be a value + unit, e.g. '20px'.
* In this case set the value to 'tile'.
*/
currentValueForToggle = !['cover', 'contain', 'auto'].includes(currentValueForToggle) ? 'auto' : currentValueForToggle;
/*
* If the current value is `cover` and the repeat value is `undefined`, then
* the toggle should be unchecked as the default state. Otherwise, the toggle
* should reflect the current repeat value.
*/
const repeatCheckedValue = !(repeatValue === 'no-repeat' || currentValueForToggle === 'cover' && repeatValue === undefined);
const updateBackgroundSize = next => {
// When switching to 'contain' toggle the repeat off.
let nextRepeat = repeatValue;
let nextPosition = positionValue;
if (next === 'contain') {
nextRepeat = 'no-repeat';
nextPosition = undefined;
}
if (next === 'cover') {
nextRepeat = undefined;
nextPosition = undefined;
}
if ((currentValueForToggle === 'cover' || currentValueForToggle === 'contain') && next === 'auto') {
nextRepeat = undefined;
/*
* A background image uploaded and set in the editor (an image with a record id),
* receives a default background position of '50% 0',
* when the toggle switches to "Tile". This is to increase the chance that
* the image's focus point is visible.
* This is in-editor only to assist with the user experience.
*/
if (!!style?.background?.backgroundImage?.id) {
nextPosition = '50% 0';
}
}
/*
* Next will be null when the input is cleared,
* in which case the value should be 'auto'.
*/
if (!next && currentValueForToggle === 'auto') {
next = 'auto';
}
onChange(setImmutably(style, ['background'], {
...style?.background,
backgroundPosition: nextPosition,
backgroundRepeat: nextRepeat,
backgroundSize: next
}));
};
const updateBackgroundPosition = next => {
onChange(setImmutably(style, ['background', 'backgroundPosition'], coordsToBackgroundPosition(next)));
};
const toggleIsRepeated = () => onChange(setImmutably(style, ['background', 'backgroundRepeat'], repeatCheckedValue === true ? 'no-repeat' : 'repeat'));
const toggleScrollWithPage = () => onChange(setImmutably(style, ['background', 'backgroundAttachment'], attachmentValue === 'fixed' ? 'scroll' : 'fixed'));
// Set a default background position for non-site-wide, uploaded images with a size of 'contain'.
const backgroundPositionValue = !positionValue && isUploadedImage && 'contain' === sizeValue ? defaultValues?.backgroundPosition : positionValue;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalVStack, {
spacing: 3,
className: "single-column",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FocalPointPicker, {
__nextHasNoMarginBottom: true,
label: (0,external_wp_i18n_namespaceObject.__)('Focal point'),
url: imageValue,
value: backgroundPositionToCoords(backgroundPositionValue),
onChange: updateBackgroundPosition
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToggleControl, {
__nextHasNoMarginBottom: true,
label: (0,external_wp_i18n_namespaceObject.__)('Fixed background'),
checked: attachmentValue === 'fixed',
onChange: toggleScrollWithPage
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalToggleGroupControl, {
__nextHasNoMarginBottom: true,
size: "__unstable-large",
label: (0,external_wp_i18n_namespaceObject.__)('Size'),
value: currentValueForToggle,
onChange: updateBackgroundSize,
isBlock: true,
help: backgroundSizeHelpText(sizeValue || defaultValues?.backgroundSize),
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToggleGroupControlOption, {
value: "cover",
label: (0,external_wp_i18n_namespaceObject._x)('Cover', 'Size option for background image control')
}, "cover"), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToggleGroupControlOption, {
value: "contain",
label: (0,external_wp_i18n_namespaceObject._x)('Contain', 'Size option for background image control')
}, "contain"), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToggleGroupControlOption, {
value: "auto",
label: (0,external_wp_i18n_namespaceObject._x)('Tile', 'Size option for background image control')
}, "tile")]
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalHStack, {
justify: "flex-start",
spacing: 2,
as: "span",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalUnitControl, {
"aria-label": (0,external_wp_i18n_namespaceObject.__)('Background image width'),
onChange: updateBackgroundSize,
value: sizeValue,
size: "__unstable-large",
__unstableInputWidth: "100px",
min: 0,
placeholder: (0,external_wp_i18n_namespaceObject.__)('Auto'),
disabled: currentValueForToggle !== 'auto' || currentValueForToggle === undefined
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToggleControl, {
__nextHasNoMarginBottom: true,
label: (0,external_wp_i18n_namespaceObject.__)('Repeat'),
checked: repeatCheckedValue,
onChange: toggleIsRepeated,
disabled: currentValueForToggle === 'cover'
})]
})]
});
}
function BackgroundImagePanel({
value,
onChange,
inheritedValue = value,
settings,
defaultValues = {}
}) {
/*
* Resolve any inherited "ref" pointers.
* Should the block editor need resolved, inherited values
* across all controls, this could be abstracted into a hook,
* e.g., useResolveGlobalStyle
*/
const {
globalStyles,
_links
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getSettings
} = select(store);
const _settings = getSettings();
return {
globalStyles: _settings[globalStylesDataKey],
_links: _settings[globalStylesLinksDataKey]
};
}, []);
const resolvedInheritedValue = (0,external_wp_element_namespaceObject.useMemo)(() => {
const resolvedValues = {
background: {}
};
if (!inheritedValue?.background) {
return inheritedValue;
}
Object.entries(inheritedValue?.background).forEach(([key, backgroundValue]) => {
resolvedValues.background[key] = getResolvedValue(backgroundValue, {
styles: globalStyles,
_links
});
});
return resolvedValues;
}, [globalStyles, _links, inheritedValue]);
const resetBackground = () => onChange(setImmutably(value, ['background'], {}));
const {
title,
url
} = value?.background?.backgroundImage || {
...resolvedInheritedValue?.background?.backgroundImage
};
const hasImageValue = hasBackgroundImageValue(value) || hasBackgroundImageValue(resolvedInheritedValue);
const imageValue = value?.background?.backgroundImage || inheritedValue?.background?.backgroundImage;
const shouldShowBackgroundImageControls = hasImageValue && 'none' !== imageValue && (settings?.background?.backgroundSize || settings?.background?.backgroundPosition || settings?.background?.backgroundRepeat);
const [isDropDownOpen, setIsDropDownOpen] = (0,external_wp_element_namespaceObject.useState)(false);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: dist_clsx('block-editor-global-styles-background-panel__inspector-media-replace-container', {
'is-open': isDropDownOpen
}),
children: shouldShowBackgroundImageControls ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BackgroundControlsPanel, {
label: title,
filename: title,
url: url,
onToggle: setIsDropDownOpen,
hasImageValue: hasImageValue,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalVStack, {
spacing: 3,
className: "single-column",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BackgroundImageControls, {
onChange: onChange,
style: value,
inheritedValue: resolvedInheritedValue,
displayInPanel: true,
onResetImage: () => {
setIsDropDownOpen(false);
resetBackground();
},
onRemoveImage: () => setIsDropDownOpen(false),
defaultValues: defaultValues
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BackgroundSizeControls, {
onChange: onChange,
style: value,
defaultValues: defaultValues,
inheritedValue: resolvedInheritedValue
})]
})
}) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BackgroundImageControls, {
onChange: onChange,
style: value,
inheritedValue: resolvedInheritedValue,
defaultValues: defaultValues,
onResetImage: () => {
setIsDropDownOpen(false);
resetBackground();
},
onRemoveImage: () => setIsDropDownOpen(false)
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/global-styles/background-panel.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const background_panel_DEFAULT_CONTROLS = {
backgroundImage: true
};
/**
* Checks site settings to see if the background panel may be used.
* `settings.background.backgroundSize` exists also,
* but can only be used if settings?.background?.backgroundImage is `true`.
*
* @param {Object} settings Site settings
* @return {boolean} Whether site settings has activated background panel.
*/
function useHasBackgroundPanel(settings) {
return external_wp_element_namespaceObject.Platform.OS === 'web' && settings?.background?.backgroundImage;
}
/**
* Checks if there is a current value in the background size block support
* attributes. Background size values include background size as well
* as background position.
*
* @param {Object} style Style attribute.
* @return {boolean} Whether the block has a background size value set.
*/
function hasBackgroundSizeValue(style) {
return style?.background?.backgroundPosition !== undefined || style?.background?.backgroundSize !== undefined;
}
/**
* Checks if there is a current value in the background image block support
* attributes.
*
* @param {Object} style Style attribute.
* @return {boolean} Whether the block has a background image value set.
*/
function hasBackgroundImageValue(style) {
return !!style?.background?.backgroundImage?.id ||
// Supports url() string values in theme.json.
'string' === typeof style?.background?.backgroundImage || !!style?.background?.backgroundImage?.url;
}
function BackgroundToolsPanel({
resetAllFilter,
onChange,
value,
panelId,
children,
headerLabel
}) {
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
const resetAll = () => {
const updatedValue = resetAllFilter(value);
onChange(updatedValue);
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanel, {
label: headerLabel,
resetAll: resetAll,
panelId: panelId,
dropdownMenuProps: dropdownMenuProps,
children: children
});
}
function background_panel_BackgroundImagePanel({
as: Wrapper = BackgroundToolsPanel,
value,
onChange,
inheritedValue,
settings,
panelId,
defaultControls = background_panel_DEFAULT_CONTROLS,
defaultValues = {},
headerLabel = (0,external_wp_i18n_namespaceObject.__)('Background image')
}) {
const showBackgroundImageControl = useHasBackgroundPanel(settings);
const resetBackground = () => onChange(setImmutably(value, ['background'], {}));
const resetAllFilter = (0,external_wp_element_namespaceObject.useCallback)(previousValue => {
return {
...previousValue,
background: {}
};
}, []);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Wrapper, {
resetAllFilter: resetAllFilter,
value: value,
onChange: onChange,
panelId: panelId,
headerLabel: headerLabel,
children: showBackgroundImageControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
hasValue: () => !!value?.background,
label: (0,external_wp_i18n_namespaceObject.__)('Image'),
onDeselect: resetBackground,
isShownByDefault: defaultControls.backgroundImage,
panelId: panelId,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BackgroundImagePanel, {
value: value,
onChange: onChange,
settings: settings,
inheritedValue: inheritedValue,
defaultControls: defaultControls,
defaultValues: defaultValues
})
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/background.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const BACKGROUND_SUPPORT_KEY = 'background';
// Initial control values.
const BACKGROUND_BLOCK_DEFAULT_VALUES = {
backgroundSize: 'cover',
backgroundPosition: '50% 50%' // used only when backgroundSize is 'contain'.
};
/**
* Determine whether there is block support for background.
*
* @param {string} blockName Block name.
* @param {string} feature Background image feature to check for.
*
* @return {boolean} Whether there is support.
*/
function hasBackgroundSupport(blockName, feature = 'any') {
const support = (0,external_wp_blocks_namespaceObject.getBlockSupport)(blockName, BACKGROUND_SUPPORT_KEY);
if (support === true) {
return true;
}
if (feature === 'any') {
return !!support?.backgroundImage || !!support?.backgroundSize || !!support?.backgroundRepeat;
}
return !!support?.[feature];
}
function setBackgroundStyleDefaults(backgroundStyle) {
if (!backgroundStyle || !backgroundStyle?.backgroundImage?.url) {
return;
}
let backgroundStylesWithDefaults;
// Set block background defaults.
if (!backgroundStyle?.backgroundSize) {
backgroundStylesWithDefaults = {
backgroundSize: BACKGROUND_BLOCK_DEFAULT_VALUES.backgroundSize
};
}
if ('contain' === backgroundStyle?.backgroundSize && !backgroundStyle?.backgroundPosition) {
backgroundStylesWithDefaults = {
backgroundPosition: BACKGROUND_BLOCK_DEFAULT_VALUES.backgroundPosition
};
}
return backgroundStylesWithDefaults;
}
function background_useBlockProps({
name,
style
}) {
if (!hasBackgroundSupport(name) || !style?.background?.backgroundImage) {
return;
}
const backgroundStyles = setBackgroundStyleDefaults(style?.background);
if (!backgroundStyles) {
return;
}
return {
style: {
...backgroundStyles
}
};
}
/**
* Generates a CSS class name if an background image is set.
*
* @param {Object} style A block's style attribute.
*
* @return {string} CSS class name.
*/
function getBackgroundImageClasses(style) {
return hasBackgroundImageValue(style) ? 'has-background' : '';
}
function BackgroundInspectorControl({
children
}) {
const resetAllFilter = (0,external_wp_element_namespaceObject.useCallback)(attributes => {
return {
...attributes,
style: {
...attributes.style,
background: undefined
}
};
}, []);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls, {
group: "background",
resetAllFilter: resetAllFilter,
children: children
});
}
function background_BackgroundImagePanel({
clientId,
name,
setAttributes,
settings
}) {
const {
style,
inheritedValue
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockAttributes,
getSettings
} = select(store);
const _settings = getSettings();
return {
style: getBlockAttributes(clientId)?.style,
/*
* To ensure we pass down the right inherited values:
* @TODO 1. Pass inherited value down to all block style controls,
* See: packages/block-editor/src/hooks/style.js
* @TODO 2. Add support for block style variations,
* See implementation: packages/block-editor/src/hooks/block-style-variation.js
*/
inheritedValue: _settings[globalStylesDataKey]?.blocks?.[name]
};
}, [clientId, name]);
if (!useHasBackgroundPanel(settings) || !hasBackgroundSupport(name, 'backgroundImage')) {
return null;
}
const onChange = newStyle => {
setAttributes({
style: utils_cleanEmptyObject(newStyle)
});
};
const updatedSettings = {
...settings,
background: {
...settings.background,
backgroundSize: settings?.background?.backgroundSize && hasBackgroundSupport(name, 'backgroundSize')
}
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(background_panel_BackgroundImagePanel, {
inheritedValue: inheritedValue,
as: BackgroundInspectorControl,
panelId: clientId,
defaultValues: BACKGROUND_BLOCK_DEFAULT_VALUES,
settings: updatedSettings,
onChange: onChange,
value: style
});
}
/* harmony default export */ const background = ({
useBlockProps: background_useBlockProps,
attributeKeys: ['style'],
hasSupport: hasBackgroundSupport
});
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/lock.js
/**
* WordPress dependencies
*/
/**
* Filters registered block settings, extending attributes to include `lock`.
*
* @param {Object} settings Original block settings.
*
* @return {Object} Filtered block settings.
*/
function lock_addAttribute(settings) {
var _settings$attributes$;
// Allow blocks to specify their own attribute definition with default values if needed.
if ('type' in ((_settings$attributes$ = settings.attributes?.lock) !== null && _settings$attributes$ !== void 0 ? _settings$attributes$ : {})) {
return settings;
}
// Gracefully handle if settings.attributes is undefined.
settings.attributes = {
...settings.attributes,
lock: {
type: 'object'
}
};
return settings;
}
(0,external_wp_hooks_namespaceObject.addFilter)('blocks.registerBlockType', 'core/lock/addAttribute', lock_addAttribute);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/anchor.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Regular expression matching invalid anchor characters for replacement.
*
* @type {RegExp}
*/
const ANCHOR_REGEX = /[\s#]/g;
const ANCHOR_SCHEMA = {
type: 'string',
source: 'attribute',
attribute: 'id',
selector: '*'
};
/**
* Filters registered block settings, extending attributes with anchor using ID
* of the first node.
*
* @param {Object} settings Original block settings.
*
* @return {Object} Filtered block settings.
*/
function anchor_addAttribute(settings) {
var _settings$attributes$;
// Allow blocks to specify their own attribute definition with default values if needed.
if ('type' in ((_settings$attributes$ = settings.attributes?.anchor) !== null && _settings$attributes$ !== void 0 ? _settings$attributes$ : {})) {
return settings;
}
if ((0,external_wp_blocks_namespaceObject.hasBlockSupport)(settings, 'anchor')) {
// Gracefully handle if settings.attributes is undefined.
settings.attributes = {
...settings.attributes,
anchor: ANCHOR_SCHEMA
};
}
return settings;
}
function BlockEditAnchorControlPure({
anchor,
setAttributes
}) {
const blockEditingMode = useBlockEditingMode();
if (blockEditingMode !== 'default') {
return null;
}
const isWeb = external_wp_element_namespaceObject.Platform.OS === 'web';
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls, {
group: "advanced",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.TextControl, {
__nextHasNoMarginBottom: true,
__next40pxDefaultSize: true,
className: "html-anchor-control",
label: (0,external_wp_i18n_namespaceObject.__)('HTML anchor'),
help: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [(0,external_wp_i18n_namespaceObject.__)('Enter a word or two — without spaces — to make a unique web address just for this block, called an “anchor”. Then, you’ll be able to link directly to this section of your page.'), isWeb && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [' ', /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ExternalLink, {
href: (0,external_wp_i18n_namespaceObject.__)('https://wordpress.org/documentation/article/page-jumps/'),
children: (0,external_wp_i18n_namespaceObject.__)('Learn more about anchors')
})]
})]
}),
value: anchor || '',
placeholder: !isWeb ? (0,external_wp_i18n_namespaceObject.__)('Add an anchor') : null,
onChange: nextValue => {
nextValue = nextValue.replace(ANCHOR_REGEX, '-');
setAttributes({
anchor: nextValue
});
},
autoCapitalize: "none",
autoComplete: "off"
})
});
}
/* harmony default export */ const hooks_anchor = ({
addSaveProps,
edit: BlockEditAnchorControlPure,
attributeKeys: ['anchor'],
hasSupport(name) {
return (0,external_wp_blocks_namespaceObject.hasBlockSupport)(name, 'anchor');
}
});
/**
* Override props assigned to save component to inject anchor ID, if block
* supports anchor. This is only applied if the block's save result is an
* element and not a markup string.
*
* @param {Object} extraProps Additional props applied to save element.
* @param {Object} blockType Block type.
* @param {Object} attributes Current block attributes.
*
* @return {Object} Filtered props applied to save element.
*/
function addSaveProps(extraProps, blockType, attributes) {
if ((0,external_wp_blocks_namespaceObject.hasBlockSupport)(blockType, 'anchor')) {
extraProps.id = attributes.anchor === '' ? null : attributes.anchor;
}
return extraProps;
}
(0,external_wp_hooks_namespaceObject.addFilter)('blocks.registerBlockType', 'core/anchor/attribute', anchor_addAttribute);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/aria-label.js
/**
* WordPress dependencies
*/
const ARIA_LABEL_SCHEMA = {
type: 'string',
source: 'attribute',
attribute: 'aria-label',
selector: '*'
};
/**
* Filters registered block settings, extending attributes with ariaLabel using aria-label
* of the first node.
*
* @param {Object} settings Original block settings.
*
* @return {Object} Filtered block settings.
*/
function aria_label_addAttribute(settings) {
// Allow blocks to specify their own attribute definition with default values if needed.
if (settings?.attributes?.ariaLabel?.type) {
return settings;
}
if ((0,external_wp_blocks_namespaceObject.hasBlockSupport)(settings, 'ariaLabel')) {
// Gracefully handle if settings.attributes is undefined.
settings.attributes = {
...settings.attributes,
ariaLabel: ARIA_LABEL_SCHEMA
};
}
return settings;
}
/**
* Override props assigned to save component to inject aria-label, if block
* supports ariaLabel. This is only applied if the block's save result is an
* element and not a markup string.
*
* @param {Object} extraProps Additional props applied to save element.
* @param {Object} blockType Block type.
* @param {Object} attributes Current block attributes.
*
* @return {Object} Filtered props applied to save element.
*/
function aria_label_addSaveProps(extraProps, blockType, attributes) {
if ((0,external_wp_blocks_namespaceObject.hasBlockSupport)(blockType, 'ariaLabel')) {
extraProps['aria-label'] = attributes.ariaLabel === '' ? null : attributes.ariaLabel;
}
return extraProps;
}
/* harmony default export */ const aria_label = ({
addSaveProps: aria_label_addSaveProps,
attributeKeys: ['ariaLabel'],
hasSupport(name) {
return (0,external_wp_blocks_namespaceObject.hasBlockSupport)(name, 'ariaLabel');
}
});
(0,external_wp_hooks_namespaceObject.addFilter)('blocks.registerBlockType', 'core/ariaLabel/attribute', aria_label_addAttribute);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/custom-class-name.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Filters registered block settings, extending attributes to include `className`.
*
* @param {Object} settings Original block settings.
*
* @return {Object} Filtered block settings.
*/
function custom_class_name_addAttribute(settings) {
if ((0,external_wp_blocks_namespaceObject.hasBlockSupport)(settings, 'customClassName', true)) {
// Gracefully handle if settings.attributes is undefined.
settings.attributes = {
...settings.attributes,
className: {
type: 'string'
}
};
}
return settings;
}
function CustomClassNameControlsPure({
className,
setAttributes
}) {
const blockEditingMode = useBlockEditingMode();
if (blockEditingMode !== 'default') {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls, {
group: "advanced",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.TextControl, {
__nextHasNoMarginBottom: true,
__next40pxDefaultSize: true,
autoComplete: "off",
label: (0,external_wp_i18n_namespaceObject.__)('Additional CSS class(es)'),
value: className || '',
onChange: nextValue => {
setAttributes({
className: nextValue !== '' ? nextValue : undefined
});
},
help: (0,external_wp_i18n_namespaceObject.__)('Separate multiple classes with spaces.')
})
});
}
/* harmony default export */ const custom_class_name = ({
edit: CustomClassNameControlsPure,
addSaveProps: custom_class_name_addSaveProps,
attributeKeys: ['className'],
hasSupport(name) {
return (0,external_wp_blocks_namespaceObject.hasBlockSupport)(name, 'customClassName', true);
}
});
/**
* Override props assigned to save component to inject the className, if block
* supports customClassName. This is only applied if the block's save result is an
* element and not a markup string.
*
* @param {Object} extraProps Additional props applied to save element.
* @param {Object} blockType Block type.
* @param {Object} attributes Current block attributes.
*
* @return {Object} Filtered props applied to save element.
*/
function custom_class_name_addSaveProps(extraProps, blockType, attributes) {
if ((0,external_wp_blocks_namespaceObject.hasBlockSupport)(blockType, 'customClassName', true) && attributes.className) {
extraProps.className = dist_clsx(extraProps.className, attributes.className);
}
return extraProps;
}
function addTransforms(result, source, index, results) {
if (!(0,external_wp_blocks_namespaceObject.hasBlockSupport)(result.name, 'customClassName', true)) {
return result;
}
// If the condition verifies we are probably in the presence of a wrapping transform
// e.g: nesting paragraphs in a group or columns and in that case the class should not be kept.
if (results.length === 1 && result.innerBlocks.length === source.length) {
return result;
}
// If we are transforming one block to multiple blocks or multiple blocks to one block,
// we ignore the class during the transform.
if (results.length === 1 && source.length > 1 || results.length > 1 && source.length === 1) {
return result;
}
// If we are in presence of transform between one or more block in the source
// that have one or more blocks in the result
// we apply the class on source N to the result N,
// if source N does not exists we do nothing.
if (source[index]) {
const originClassName = source[index]?.attributes.className;
if (originClassName) {
return {
...result,
attributes: {
...result.attributes,
className: originClassName
}
};
}
}
return result;
}
(0,external_wp_hooks_namespaceObject.addFilter)('blocks.registerBlockType', 'core/editor/custom-class-name/attribute', custom_class_name_addAttribute);
(0,external_wp_hooks_namespaceObject.addFilter)('blocks.switchToBlockType.transformedBlock', 'core/color/addTransforms', addTransforms);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/generated-class-name.js
/**
* WordPress dependencies
*/
/**
* Override props assigned to save component to inject generated className if
* block supports it. This is only applied if the block's save result is an
* element and not a markup string.
*
* @param {Object} extraProps Additional props applied to save element.
* @param {Object} blockType Block type.
*
* @return {Object} Filtered props applied to save element.
*/
function addGeneratedClassName(extraProps, blockType) {
// Adding the generated className.
if ((0,external_wp_blocks_namespaceObject.hasBlockSupport)(blockType, 'className', true)) {
if (typeof extraProps.className === 'string') {
// We have some extra classes and want to add the default classname
// We use uniq to prevent duplicate classnames.
extraProps.className = [...new Set([(0,external_wp_blocks_namespaceObject.getBlockDefaultClassName)(blockType.name), ...extraProps.className.split(' ')])].join(' ').trim();
} else {
// There is no string in the className variable,
// so we just dump the default name in there.
extraProps.className = (0,external_wp_blocks_namespaceObject.getBlockDefaultClassName)(blockType.name);
}
}
return extraProps;
}
(0,external_wp_hooks_namespaceObject.addFilter)('blocks.getSaveContent.extraProps', 'core/generated-class-name/save-props', addGeneratedClassName);
;// CONCATENATED MODULE: ./node_modules/colord/index.mjs
var colord_r={grad:.9,turn:360,rad:360/(2*Math.PI)},t=function(r){return"string"==typeof r?r.length>0:"number"==typeof r},n=function(r,t,n){return void 0===t&&(t=0),void 0===n&&(n=Math.pow(10,t)),Math.round(n*r)/n+0},e=function(r,t,n){return void 0===t&&(t=0),void 0===n&&(n=1),r>n?n:r>t?r:t},u=function(r){return(r=isFinite(r)?r%360:0)>0?r:r+360},a=function(r){return{r:e(r.r,0,255),g:e(r.g,0,255),b:e(r.b,0,255),a:e(r.a)}},o=function(r){return{r:n(r.r),g:n(r.g),b:n(r.b),a:n(r.a,3)}},i=/^#([0-9a-f]{3,8})$/i,s=function(r){var t=r.toString(16);return t.length<2?"0"+t:t},h=function(r){var t=r.r,n=r.g,e=r.b,u=r.a,a=Math.max(t,n,e),o=a-Math.min(t,n,e),i=o?a===t?(n-e)/o:a===n?2+(e-t)/o:4+(t-n)/o:0;return{h:60*(i<0?i+6:i),s:a?o/a*100:0,v:a/255*100,a:u}},b=function(r){var t=r.h,n=r.s,e=r.v,u=r.a;t=t/360*6,n/=100,e/=100;var a=Math.floor(t),o=e*(1-n),i=e*(1-(t-a)*n),s=e*(1-(1-t+a)*n),h=a%6;return{r:255*[e,i,o,o,s,e][h],g:255*[s,e,e,i,o,o][h],b:255*[o,o,s,e,e,i][h],a:u}},g=function(r){return{h:u(r.h),s:e(r.s,0,100),l:e(r.l,0,100),a:e(r.a)}},d=function(r){return{h:n(r.h),s:n(r.s),l:n(r.l),a:n(r.a,3)}},f=function(r){return b((n=(t=r).s,{h:t.h,s:(n*=((e=t.l)<50?e:100-e)/100)>0?2*n/(e+n)*100:0,v:e+n,a:t.a}));var t,n,e},c=function(r){return{h:(t=h(r)).h,s:(u=(200-(n=t.s))*(e=t.v)/100)>0&&u<200?n*e/100/(u<=100?u:200-u)*100:0,l:u/2,a:t.a};var t,n,e,u},l=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,p=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,v=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,m=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,y={string:[[function(r){var t=i.exec(r);return t?(r=t[1]).length<=4?{r:parseInt(r[0]+r[0],16),g:parseInt(r[1]+r[1],16),b:parseInt(r[2]+r[2],16),a:4===r.length?n(parseInt(r[3]+r[3],16)/255,2):1}:6===r.length||8===r.length?{r:parseInt(r.substr(0,2),16),g:parseInt(r.substr(2,2),16),b:parseInt(r.substr(4,2),16),a:8===r.length?n(parseInt(r.substr(6,2),16)/255,2):1}:null:null},"hex"],[function(r){var t=v.exec(r)||m.exec(r);return t?t[2]!==t[4]||t[4]!==t[6]?null:a({r:Number(t[1])/(t[2]?100/255:1),g:Number(t[3])/(t[4]?100/255:1),b:Number(t[5])/(t[6]?100/255:1),a:void 0===t[7]?1:Number(t[7])/(t[8]?100:1)}):null},"rgb"],[function(t){var n=l.exec(t)||p.exec(t);if(!n)return null;var e,u,a=g({h:(e=n[1],u=n[2],void 0===u&&(u="deg"),Number(e)*(colord_r[u]||1)),s:Number(n[3]),l:Number(n[4]),a:void 0===n[5]?1:Number(n[5])/(n[6]?100:1)});return f(a)},"hsl"]],object:[[function(r){var n=r.r,e=r.g,u=r.b,o=r.a,i=void 0===o?1:o;return t(n)&&t(e)&&t(u)?a({r:Number(n),g:Number(e),b:Number(u),a:Number(i)}):null},"rgb"],[function(r){var n=r.h,e=r.s,u=r.l,a=r.a,o=void 0===a?1:a;if(!t(n)||!t(e)||!t(u))return null;var i=g({h:Number(n),s:Number(e),l:Number(u),a:Number(o)});return f(i)},"hsl"],[function(r){var n=r.h,a=r.s,o=r.v,i=r.a,s=void 0===i?1:i;if(!t(n)||!t(a)||!t(o))return null;var h=function(r){return{h:u(r.h),s:e(r.s,0,100),v:e(r.v,0,100),a:e(r.a)}}({h:Number(n),s:Number(a),v:Number(o),a:Number(s)});return b(h)},"hsv"]]},N=function(r,t){for(var n=0;n<t.length;n++){var e=t[n][0](r);if(e)return[e,t[n][1]]}return[null,void 0]},x=function(r){return"string"==typeof r?N(r.trim(),y.string):"object"==typeof r&&null!==r?N(r,y.object):[null,void 0]},I=function(r){return x(r)[1]},M=function(r,t){var n=c(r);return{h:n.h,s:e(n.s+100*t,0,100),l:n.l,a:n.a}},H=function(r){return(299*r.r+587*r.g+114*r.b)/1e3/255},$=function(r,t){var n=c(r);return{h:n.h,s:n.s,l:e(n.l+100*t,0,100),a:n.a}},colord_j=function(){function r(r){this.parsed=x(r)[0],this.rgba=this.parsed||{r:0,g:0,b:0,a:1}}return r.prototype.isValid=function(){return null!==this.parsed},r.prototype.brightness=function(){return n(H(this.rgba),2)},r.prototype.isDark=function(){return H(this.rgba)<.5},r.prototype.isLight=function(){return H(this.rgba)>=.5},r.prototype.toHex=function(){return r=o(this.rgba),t=r.r,e=r.g,u=r.b,i=(a=r.a)<1?s(n(255*a)):"","#"+s(t)+s(e)+s(u)+i;var r,t,e,u,a,i},r.prototype.toRgb=function(){return o(this.rgba)},r.prototype.toRgbString=function(){return r=o(this.rgba),t=r.r,n=r.g,e=r.b,(u=r.a)<1?"rgba("+t+", "+n+", "+e+", "+u+")":"rgb("+t+", "+n+", "+e+")";var r,t,n,e,u},r.prototype.toHsl=function(){return d(c(this.rgba))},r.prototype.toHslString=function(){return r=d(c(this.rgba)),t=r.h,n=r.s,e=r.l,(u=r.a)<1?"hsla("+t+", "+n+"%, "+e+"%, "+u+")":"hsl("+t+", "+n+"%, "+e+"%)";var r,t,n,e,u},r.prototype.toHsv=function(){return r=h(this.rgba),{h:n(r.h),s:n(r.s),v:n(r.v),a:n(r.a,3)};var r},r.prototype.invert=function(){return w({r:255-(r=this.rgba).r,g:255-r.g,b:255-r.b,a:r.a});var r},r.prototype.saturate=function(r){return void 0===r&&(r=.1),w(M(this.rgba,r))},r.prototype.desaturate=function(r){return void 0===r&&(r=.1),w(M(this.rgba,-r))},r.prototype.grayscale=function(){return w(M(this.rgba,-1))},r.prototype.lighten=function(r){return void 0===r&&(r=.1),w($(this.rgba,r))},r.prototype.darken=function(r){return void 0===r&&(r=.1),w($(this.rgba,-r))},r.prototype.rotate=function(r){return void 0===r&&(r=15),this.hue(this.hue()+r)},r.prototype.alpha=function(r){return"number"==typeof r?w({r:(t=this.rgba).r,g:t.g,b:t.b,a:r}):n(this.rgba.a,3);var t},r.prototype.hue=function(r){var t=c(this.rgba);return"number"==typeof r?w({h:r,s:t.s,l:t.l,a:t.a}):n(t.h)},r.prototype.isEqual=function(r){return this.toHex()===w(r).toHex()},r}(),w=function(r){return r instanceof colord_j?r:new colord_j(r)},S=[],k=function(r){r.forEach(function(r){S.indexOf(r)<0&&(r(colord_j,y),S.push(r))})},E=function(){return new colord_j({r:255*Math.random(),g:255*Math.random(),b:255*Math.random()})};
;// CONCATENATED MODULE: ./node_modules/colord/plugins/names.mjs
/* harmony default export */ function names(e,f){var a={white:"#ffffff",bisque:"#ffe4c4",blue:"#0000ff",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",antiquewhite:"#faebd7",aqua:"#00ffff",azure:"#f0ffff",whitesmoke:"#f5f5f5",papayawhip:"#ffefd5",plum:"#dda0dd",blanchedalmond:"#ffebcd",black:"#000000",gold:"#ffd700",goldenrod:"#daa520",gainsboro:"#dcdcdc",cornsilk:"#fff8dc",cornflowerblue:"#6495ed",burlywood:"#deb887",aquamarine:"#7fffd4",beige:"#f5f5dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkkhaki:"#bdb76b",darkgray:"#a9a9a9",darkgreen:"#006400",darkgrey:"#a9a9a9",peachpuff:"#ffdab9",darkmagenta:"#8b008b",darkred:"#8b0000",darkorchid:"#9932cc",darkorange:"#ff8c00",darkslateblue:"#483d8b",gray:"#808080",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",deeppink:"#ff1493",deepskyblue:"#00bfff",wheat:"#f5deb3",firebrick:"#b22222",floralwhite:"#fffaf0",ghostwhite:"#f8f8ff",darkviolet:"#9400d3",magenta:"#ff00ff",green:"#008000",dodgerblue:"#1e90ff",grey:"#808080",honeydew:"#f0fff0",hotpink:"#ff69b4",blueviolet:"#8a2be2",forestgreen:"#228b22",lawngreen:"#7cfc00",indianred:"#cd5c5c",indigo:"#4b0082",fuchsia:"#ff00ff",brown:"#a52a2a",maroon:"#800000",mediumblue:"#0000cd",lightcoral:"#f08080",darkturquoise:"#00ced1",lightcyan:"#e0ffff",ivory:"#fffff0",lightyellow:"#ffffe0",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",linen:"#faf0e6",mediumaquamarine:"#66cdaa",lemonchiffon:"#fffacd",lime:"#00ff00",khaki:"#f0e68c",mediumseagreen:"#3cb371",limegreen:"#32cd32",mediumspringgreen:"#00fa9a",lightskyblue:"#87cefa",lightblue:"#add8e6",midnightblue:"#191970",lightpink:"#ffb6c1",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",mintcream:"#f5fffa",lightslategray:"#778899",lightslategrey:"#778899",navajowhite:"#ffdead",navy:"#000080",mediumvioletred:"#c71585",powderblue:"#b0e0e6",palegoldenrod:"#eee8aa",oldlace:"#fdf5e6",paleturquoise:"#afeeee",mediumturquoise:"#48d1cc",mediumorchid:"#ba55d3",rebeccapurple:"#663399",lightsteelblue:"#b0c4de",mediumslateblue:"#7b68ee",thistle:"#d8bfd8",tan:"#d2b48c",orchid:"#da70d6",mediumpurple:"#9370db",purple:"#800080",pink:"#ffc0cb",skyblue:"#87ceeb",springgreen:"#00ff7f",palegreen:"#98fb98",red:"#ff0000",yellow:"#ffff00",slateblue:"#6a5acd",lavenderblush:"#fff0f5",peru:"#cd853f",palevioletred:"#db7093",violet:"#ee82ee",teal:"#008080",slategray:"#708090",slategrey:"#708090",aliceblue:"#f0f8ff",darkseagreen:"#8fbc8f",darkolivegreen:"#556b2f",greenyellow:"#adff2f",seagreen:"#2e8b57",seashell:"#fff5ee",tomato:"#ff6347",silver:"#c0c0c0",sienna:"#a0522d",lavender:"#e6e6fa",lightgreen:"#90ee90",orange:"#ffa500",orangered:"#ff4500",steelblue:"#4682b4",royalblue:"#4169e1",turquoise:"#40e0d0",yellowgreen:"#9acd32",salmon:"#fa8072",saddlebrown:"#8b4513",sandybrown:"#f4a460",rosybrown:"#bc8f8f",darksalmon:"#e9967a",lightgoldenrodyellow:"#fafad2",snow:"#fffafa",lightgrey:"#d3d3d3",lightgray:"#d3d3d3",dimgray:"#696969",dimgrey:"#696969",olivedrab:"#6b8e23",olive:"#808000"},r={};for(var d in a)r[a[d]]=d;var l={};e.prototype.toName=function(f){if(!(this.rgba.a||this.rgba.r||this.rgba.g||this.rgba.b))return"transparent";var d,i,n=r[this.toHex()];if(n)return n;if(null==f?void 0:f.closest){var o=this.toRgb(),t=1/0,b="black";if(!l.length)for(var c in a)l[c]=new e(a[c]).toRgb();for(var g in a){var u=(d=o,i=l[g],Math.pow(d.r-i.r,2)+Math.pow(d.g-i.g,2)+Math.pow(d.b-i.b,2));u<t&&(t=u,b=g)}return b}};f.string.push([function(f){var r=f.toLowerCase(),d="transparent"===r?"#0000":a[r];return d?new e(d).toRgb():null},"name"])}
;// CONCATENATED MODULE: ./node_modules/colord/plugins/a11y.mjs
var a11y_o=function(o){var t=o/255;return t<.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)},a11y_t=function(t){return.2126*a11y_o(t.r)+.7152*a11y_o(t.g)+.0722*a11y_o(t.b)};/* harmony default export */ function a11y(o){o.prototype.luminance=function(){return o=a11y_t(this.rgba),void 0===(r=2)&&(r=0),void 0===n&&(n=Math.pow(10,r)),Math.round(n*o)/n+0;var o,r,n},o.prototype.contrast=function(r){void 0===r&&(r="#FFF");var n,a,i,e,v,u,d,c=r instanceof o?r:new o(r);return e=this.rgba,v=c.toRgb(),u=a11y_t(e),d=a11y_t(v),n=u>d?(u+.05)/(d+.05):(d+.05)/(u+.05),void 0===(a=2)&&(a=0),void 0===i&&(i=Math.pow(10,a)),Math.floor(i*n)/i+0},o.prototype.isReadable=function(o,t){return void 0===o&&(o="#FFF"),void 0===t&&(t={}),this.contrast(o)>=(e=void 0===(i=(r=t).size)?"normal":i,"AAA"===(a=void 0===(n=r.level)?"AA":n)&&"normal"===e?7:"AA"===a&&"large"===e?3:4.5);var r,n,a,i,e}}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/colors/utils.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
k([names, a11y]);
const {
kebabCase
} = unlock(external_wp_components_namespaceObject.privateApis);
/**
* Provided an array of color objects as set by the theme or by the editor defaults,
* and the values of the defined color or custom color returns a color object describing the color.
*
* @param {Array} colors Array of color objects as set by the theme or by the editor defaults.
* @param {?string} definedColor A string containing the color slug.
* @param {?string} customColor A string containing the customColor value.
*
* @return {?Object} If definedColor is passed and the name is found in colors,
* the color object exactly as set by the theme or editor defaults is returned.
* Otherwise, an object that just sets the color is defined.
*/
const getColorObjectByAttributeValues = (colors, definedColor, customColor) => {
if (definedColor) {
const colorObj = colors?.find(color => color.slug === definedColor);
if (colorObj) {
return colorObj;
}
}
return {
color: customColor
};
};
/**
* Provided an array of color objects as set by the theme or by the editor defaults, and a color value returns the color object matching that value or undefined.
*
* @param {Array} colors Array of color objects as set by the theme or by the editor defaults.
* @param {?string} colorValue A string containing the color value.
*
* @return {?Object} Color object included in the colors array whose color property equals colorValue.
* Returns undefined if no color object matches this requirement.
*/
const getColorObjectByColorValue = (colors, colorValue) => {
return colors?.find(color => color.color === colorValue);
};
/**
* Returns a class based on the context a color is being used and its slug.
*
* @param {string} colorContextName Context/place where color is being used e.g: background, text etc...
* @param {string} colorSlug Slug of the color.
*
* @return {?string} String with the class corresponding to the color in the provided context.
* Returns undefined if either colorContextName or colorSlug are not provided.
*/
function getColorClassName(colorContextName, colorSlug) {
if (!colorContextName || !colorSlug) {
return undefined;
}
return `has-${kebabCase(colorSlug)}-${colorContextName}`;
}
/**
* Given an array of color objects and a color value returns the color value of the most readable color in the array.
*
* @param {Array} colors Array of color objects as set by the theme or by the editor defaults.
* @param {?string} colorValue A string containing the color value.
*
* @return {string} String with the color value of the most readable color.
*/
function getMostReadableColor(colors, colorValue) {
const colordColor = w(colorValue);
const getColorContrast = ({
color
}) => colordColor.contrast(color);
const maxContrast = Math.max(...colors.map(getColorContrast));
return colors.find(color => getColorContrast(color) === maxContrast).color;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/colors-gradients/use-multiple-origin-colors-and-gradients.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Retrieves color and gradient related settings.
*
* The arrays for colors and gradients are made up of color palettes from each
* origin i.e. "Core", "Theme", and "User".
*
* @return {Object} Color and gradient related settings.
*/
function useMultipleOriginColorsAndGradients() {
const [enableCustomColors, customColors, themeColors, defaultColors, shouldDisplayDefaultColors, enableCustomGradients, customGradients, themeGradients, defaultGradients, shouldDisplayDefaultGradients] = use_settings_useSettings('color.custom', 'color.palette.custom', 'color.palette.theme', 'color.palette.default', 'color.defaultPalette', 'color.customGradient', 'color.gradients.custom', 'color.gradients.theme', 'color.gradients.default', 'color.defaultGradients');
const colorGradientSettings = {
disableCustomColors: !enableCustomColors,
disableCustomGradients: !enableCustomGradients
};
colorGradientSettings.colors = (0,external_wp_element_namespaceObject.useMemo)(() => {
const result = [];
if (themeColors && themeColors.length) {
result.push({
name: (0,external_wp_i18n_namespaceObject._x)('Theme', 'Indicates this palette comes from the theme.'),
colors: themeColors
});
}
if (shouldDisplayDefaultColors && defaultColors && defaultColors.length) {
result.push({
name: (0,external_wp_i18n_namespaceObject._x)('Default', 'Indicates this palette comes from WordPress.'),
colors: defaultColors
});
}
if (customColors && customColors.length) {
result.push({
name: (0,external_wp_i18n_namespaceObject._x)('Custom', 'Indicates this palette comes from the theme.'),
colors: customColors
});
}
return result;
}, [customColors, themeColors, defaultColors, shouldDisplayDefaultColors]);
colorGradientSettings.gradients = (0,external_wp_element_namespaceObject.useMemo)(() => {
const result = [];
if (themeGradients && themeGradients.length) {
result.push({
name: (0,external_wp_i18n_namespaceObject._x)('Theme', 'Indicates this palette comes from the theme.'),
gradients: themeGradients
});
}
if (shouldDisplayDefaultGradients && defaultGradients && defaultGradients.length) {
result.push({
name: (0,external_wp_i18n_namespaceObject._x)('Default', 'Indicates this palette comes from WordPress.'),
gradients: defaultGradients
});
}
if (customGradients && customGradients.length) {
result.push({
name: (0,external_wp_i18n_namespaceObject._x)('Custom', 'Indicates this palette is created by the user.'),
gradients: customGradients
});
}
return result;
}, [customGradients, themeGradients, defaultGradients, shouldDisplayDefaultGradients]);
colorGradientSettings.hasColorsOrGradients = !!colorGradientSettings.colors.length || !!colorGradientSettings.gradients.length;
return colorGradientSettings;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/border-radius-control/utils.js
/**
* WordPress dependencies
*/
/**
* Gets the (non-undefined) item with the highest occurrence within an array
* Based in part on: https://stackoverflow.com/a/20762713
*
* Undefined values are always sorted to the end by `sort`, so this function
* returns the first element, to always prioritize real values over undefined
* values.
*
* See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#description
*
* @param {Array<any>} inputArray Array of items to check.
* @return {any} The item with the most occurrences.
*/
function utils_mode(inputArray) {
const arr = [...inputArray];
return arr.sort((a, b) => inputArray.filter(v => v === b).length - inputArray.filter(v => v === a).length).shift();
}
/**
* Returns the most common CSS unit from the current CSS unit selections.
*
* - If a single flat border radius is set, its unit will be used
* - If individual corner selections, the most common of those will be used
* - Failing any unit selections a default of 'px' is returned.
*
* @param {Object} selectedUnits Unit selections for flat radius & each corner.
* @return {string} Most common CSS unit from current selections. Default: `px`.
*/
function getAllUnit(selectedUnits = {}) {
const {
flat,
...cornerUnits
} = selectedUnits;
return flat || utils_mode(Object.values(cornerUnits).filter(Boolean)) || 'px';
}
/**
* Gets the 'all' input value and unit from values data.
*
* @param {Object|string} values Radius values.
* @return {string} A value + unit for the 'all' input.
*/
function getAllValue(values = {}) {
/**
* Border radius support was originally a single pixel value.
*
* To maintain backwards compatibility treat this case as the all value.
*/
if (typeof values === 'string') {
return values;
}
const parsedQuantitiesAndUnits = Object.values(values).map(value => (0,external_wp_components_namespaceObject.__experimentalParseQuantityAndUnitFromRawValue)(value));
const allValues = parsedQuantitiesAndUnits.map(value => {
var _value$;
return (_value$ = value[0]) !== null && _value$ !== void 0 ? _value$ : '';
});
const allUnits = parsedQuantitiesAndUnits.map(value => value[1]);
const value = allValues.every(v => v === allValues[0]) ? allValues[0] : '';
const unit = utils_mode(allUnits);
const allValue = value === 0 || value ? `${value}${unit}` : undefined;
return allValue;
}
/**
* Checks to determine if values are mixed.
*
* @param {Object} values Radius values.
* @return {boolean} Whether values are mixed.
*/
function hasMixedValues(values = {}) {
const allValue = getAllValue(values);
const isMixed = typeof values === 'string' ? false : isNaN(parseFloat(allValue));
return isMixed;
}
/**
* Checks to determine if values are defined.
*
* @param {Object} values Radius values.
* @return {boolean} Whether values are mixed.
*/
function hasDefinedValues(values) {
if (!values) {
return false;
}
// A string value represents a shorthand value.
if (typeof values === 'string') {
return true;
}
// An object represents longhand border radius values, if any are set
// flag values as being defined.
const filteredValues = Object.values(values).filter(value => {
return !!value || value === 0;
});
return !!filteredValues.length;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/border-radius-control/all-input-control.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function AllInputControl({
onChange,
selectedUnits,
setSelectedUnits,
values,
...props
}) {
let allValue = getAllValue(values);
if (allValue === undefined) {
// If we don't have any value set the unit to any current selection
// or the most common unit from the individual radii values.
allValue = getAllUnit(selectedUnits);
}
const hasValues = hasDefinedValues(values);
const isMixed = hasValues && hasMixedValues(values);
const allPlaceholder = isMixed ? (0,external_wp_i18n_namespaceObject.__)('Mixed') : null;
// Filter out CSS-unit-only values to prevent invalid styles.
const handleOnChange = next => {
const isNumeric = !isNaN(parseFloat(next));
const nextValue = isNumeric ? next : undefined;
onChange(nextValue);
};
// Store current unit selection for use as fallback for individual
// radii controls.
const handleOnUnitChange = unit => {
setSelectedUnits({
topLeft: unit,
topRight: unit,
bottomLeft: unit,
bottomRight: unit
});
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalUnitControl, {
...props,
"aria-label": (0,external_wp_i18n_namespaceObject.__)('Border radius'),
disableUnits: isMixed,
isOnly: true,
value: allValue,
onChange: handleOnChange,
onUnitChange: handleOnUnitChange,
placeholder: allPlaceholder,
size: "__unstable-large"
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/border-radius-control/input-controls.js
/**
* WordPress dependencies
*/
const CORNERS = {
topLeft: (0,external_wp_i18n_namespaceObject.__)('Top left'),
topRight: (0,external_wp_i18n_namespaceObject.__)('Top right'),
bottomLeft: (0,external_wp_i18n_namespaceObject.__)('Bottom left'),
bottomRight: (0,external_wp_i18n_namespaceObject.__)('Bottom right')
};
function BoxInputControls({
onChange,
selectedUnits,
setSelectedUnits,
values: valuesProp,
...props
}) {
const createHandleOnChange = corner => next => {
if (!onChange) {
return;
}
// Filter out CSS-unit-only values to prevent invalid styles.
const isNumeric = !isNaN(parseFloat(next));
const nextValue = isNumeric ? next : undefined;
onChange({
...values,
[corner]: nextValue
});
};
const createHandleOnUnitChange = side => next => {
const newUnits = {
...selectedUnits
};
newUnits[side] = next;
setSelectedUnits(newUnits);
};
// For shorthand style & backwards compatibility, handle flat string value.
const values = typeof valuesProp !== 'string' ? valuesProp : {
topLeft: valuesProp,
topRight: valuesProp,
bottomLeft: valuesProp,
bottomRight: valuesProp
};
// Controls are wrapped in tooltips as visible labels aren't desired here.
// Tooltip rendering also requires the UnitControl to be wrapped. See:
// https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "components-border-radius-control__input-controls-wrapper",
children: Object.entries(CORNERS).map(([corner, label]) => {
const [parsedQuantity, parsedUnit] = (0,external_wp_components_namespaceObject.__experimentalParseQuantityAndUnitFromRawValue)(values[corner]);
const computedUnit = values[corner] ? parsedUnit : selectedUnits[corner] || selectedUnits.flat;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Tooltip, {
text: label,
placement: "top",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "components-border-radius-control__tooltip-wrapper",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalUnitControl, {
...props,
"aria-label": label,
value: [parsedQuantity, computedUnit].join(''),
onChange: createHandleOnChange(corner),
onUnitChange: createHandleOnUnitChange(corner),
size: "__unstable-large"
})
})
}, corner);
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/link.js
/**
* WordPress dependencies
*/
const link_link = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M10 17.389H8.444A5.194 5.194 0 1 1 8.444 7H10v1.5H8.444a3.694 3.694 0 0 0 0 7.389H10v1.5ZM14 7h1.556a5.194 5.194 0 0 1 0 10.39H14v-1.5h1.556a3.694 3.694 0 0 0 0-7.39H14V7Zm-4.5 6h5v-1.5h-5V13Z"
})
});
/* harmony default export */ const library_link = (link_link);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/border-radius-control/linked-button.js
/**
* WordPress dependencies
*/
function LinkedButton({
isLinked,
...props
}) {
const label = isLinked ? (0,external_wp_i18n_namespaceObject.__)('Unlink radii') : (0,external_wp_i18n_namespaceObject.__)('Link radii');
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Tooltip, {
text: label,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
...props,
className: "component-border-radius-control__linked-button",
size: "small",
icon: isLinked ? library_link : link_off,
iconSize: 24,
"aria-label": label
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/border-radius-control/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const border_radius_control_DEFAULT_VALUES = {
topLeft: undefined,
topRight: undefined,
bottomLeft: undefined,
bottomRight: undefined
};
const MIN_BORDER_RADIUS_VALUE = 0;
const MAX_BORDER_RADIUS_VALUES = {
px: 100,
em: 20,
rem: 20
};
/**
* Control to display border radius options.
*
* @param {Object} props Component props.
* @param {Function} props.onChange Callback to handle onChange.
* @param {Object} props.values Border radius values.
*
* @return {Element} Custom border radius control.
*/
function BorderRadiusControl({
onChange,
values
}) {
const [isLinked, setIsLinked] = (0,external_wp_element_namespaceObject.useState)(!hasDefinedValues(values) || !hasMixedValues(values));
// Tracking selected units via internal state allows filtering of CSS unit
// only values from being saved while maintaining preexisting unit selection
// behaviour. Filtering CSS unit only values prevents invalid style values.
const [selectedUnits, setSelectedUnits] = (0,external_wp_element_namespaceObject.useState)({
flat: typeof values === 'string' ? (0,external_wp_components_namespaceObject.__experimentalParseQuantityAndUnitFromRawValue)(values)[1] : undefined,
topLeft: (0,external_wp_components_namespaceObject.__experimentalParseQuantityAndUnitFromRawValue)(values?.topLeft)[1],
topRight: (0,external_wp_components_namespaceObject.__experimentalParseQuantityAndUnitFromRawValue)(values?.topRight)[1],
bottomLeft: (0,external_wp_components_namespaceObject.__experimentalParseQuantityAndUnitFromRawValue)(values?.bottomLeft)[1],
bottomRight: (0,external_wp_components_namespaceObject.__experimentalParseQuantityAndUnitFromRawValue)(values?.bottomRight)[1]
});
const [availableUnits] = use_settings_useSettings('spacing.units');
const units = (0,external_wp_components_namespaceObject.__experimentalUseCustomUnits)({
availableUnits: availableUnits || ['px', 'em', 'rem']
});
const unit = getAllUnit(selectedUnits);
const unitConfig = units && units.find(item => item.value === unit);
const step = unitConfig?.step || 1;
const [allValue] = (0,external_wp_components_namespaceObject.__experimentalParseQuantityAndUnitFromRawValue)(getAllValue(values));
const toggleLinked = () => setIsLinked(!isLinked);
const handleSliderChange = next => {
onChange(next !== undefined ? `${next}${unit}` : undefined);
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("fieldset", {
className: "components-border-radius-control",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.BaseControl.VisualLabel, {
as: "legend",
children: (0,external_wp_i18n_namespaceObject.__)('Radius')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "components-border-radius-control__wrapper",
children: [isLinked ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AllInputControl, {
className: "components-border-radius-control__unit-control",
values: values,
min: MIN_BORDER_RADIUS_VALUE,
onChange: onChange,
selectedUnits: selectedUnits,
setSelectedUnits: setSelectedUnits,
units: units
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.RangeControl, {
__next40pxDefaultSize: true,
label: (0,external_wp_i18n_namespaceObject.__)('Border radius'),
hideLabelFromVision: true,
className: "components-border-radius-control__range-control",
value: allValue !== null && allValue !== void 0 ? allValue : '',
min: MIN_BORDER_RADIUS_VALUE,
max: MAX_BORDER_RADIUS_VALUES[unit],
initialPosition: 0,
withInputField: false,
onChange: handleSliderChange,
step: step,
__nextHasNoMarginBottom: true
})]
}) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BoxInputControls, {
min: MIN_BORDER_RADIUS_VALUE,
onChange: onChange,
selectedUnits: selectedUnits,
setSelectedUnits: setSelectedUnits,
values: values || border_radius_control_DEFAULT_VALUES,
units: units
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LinkedButton, {
onClick: toggleLinked,
isLinked: isLinked
})]
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/check.js
/**
* WordPress dependencies
*/
const check_check = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
})
});
/* harmony default export */ const library_check = (check_check);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/shadow.js
/**
* WordPress dependencies
*/
const shadow = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M12 8c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zm0 6.5c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5zM12.8 3h-1.5v3h1.5V3zm-1.6 18h1.5v-3h-1.5v3zm6.8-9.8v1.5h3v-1.5h-3zm-12 0H3v1.5h3v-1.5zm9.7 5.6 2.1 2.1 1.1-1.1-2.1-2.1-1.1 1.1zM8.3 7.2 6.2 5.1 5.1 6.2l2.1 2.1 1.1-1.1zM5.1 17.8l1.1 1.1 2.1-2.1-1.1-1.1-2.1 2.1zM18.9 6.2l-1.1-1.1-2.1 2.1 1.1 1.1 2.1-2.1z"
})
});
/* harmony default export */ const library_shadow = (shadow);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/global-styles/shadow-panel-components.js
/**
* WordPress dependencies
*/
/**
* External dependencies
*/
/**
* Shared reference to an empty array for cases where it is important to avoid
* returning a new array reference on every invocation.
*
* @type {Array}
*/
const shadow_panel_components_EMPTY_ARRAY = [];
function ShadowPopoverContainer({
shadow,
onShadowChange,
settings
}) {
const shadows = useShadowPresets(settings);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-global-styles__shadow-popover-container",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalVStack, {
spacing: 4,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalHeading, {
level: 5,
children: (0,external_wp_i18n_namespaceObject.__)('Drop shadow')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ShadowPresets, {
presets: shadows,
activeShadow: shadow,
onSelect: onShadowChange
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-global-styles__clear-shadow",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
variant: "tertiary",
onClick: () => onShadowChange(undefined),
children: (0,external_wp_i18n_namespaceObject.__)('Clear')
})
})]
})
});
}
function ShadowPresets({
presets,
activeShadow,
onSelect
}) {
return !presets ? null : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Composite, {
role: "listbox",
className: "block-editor-global-styles__shadow__list",
"aria-label": (0,external_wp_i18n_namespaceObject.__)('Drop shadows'),
children: presets.map(({
name,
slug,
shadow
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ShadowIndicator, {
label: name,
isActive: shadow === activeShadow,
type: slug === 'unset' ? 'unset' : 'preset',
onSelect: () => onSelect(shadow === activeShadow ? undefined : shadow),
shadow: shadow
}, slug))
});
}
function ShadowIndicator({
type,
label,
isActive,
onSelect,
shadow
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Tooltip, {
text: label,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Composite.Item, {
role: "option",
"aria-label": label,
"aria-selected": isActive,
className: dist_clsx('block-editor-global-styles__shadow__item', {
'is-active': isActive
}),
render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("button", {
className: dist_clsx('block-editor-global-styles__shadow-indicator', {
unset: type === 'unset'
}),
onClick: onSelect,
style: {
boxShadow: shadow
},
"aria-label": label,
children: isActive && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
icon: library_check
})
})
})
});
}
function ShadowPopover({
shadow,
onShadowChange,
settings
}) {
const popoverProps = {
placement: 'left-start',
offset: 36,
shift: true
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Dropdown, {
popoverProps: popoverProps,
className: "block-editor-global-styles__shadow-dropdown",
renderToggle: renderShadowToggle(),
renderContent: () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalDropdownContentWrapper, {
paddingSize: "medium",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ShadowPopoverContainer, {
shadow: shadow,
onShadowChange: onShadowChange,
settings: settings
})
})
});
}
function renderShadowToggle() {
return ({
onToggle,
isOpen
}) => {
const toggleProps = {
onClick: onToggle,
className: dist_clsx({
'is-open': isOpen
}),
'aria-expanded': isOpen
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
...toggleProps,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalHStack, {
justify: "flex-start",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
className: "block-editor-global-styles__toggle-icon",
icon: library_shadow,
size: 24
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexItem, {
children: (0,external_wp_i18n_namespaceObject.__)('Drop shadow')
})]
})
});
};
}
function useShadowPresets(settings) {
return (0,external_wp_element_namespaceObject.useMemo)(() => {
var _settings$shadow$pres;
if (!settings?.shadow) {
return shadow_panel_components_EMPTY_ARRAY;
}
const defaultPresetsEnabled = settings?.shadow?.defaultPresets;
const {
default: defaultShadows,
theme: themeShadows,
custom: customShadows
} = (_settings$shadow$pres = settings?.shadow?.presets) !== null && _settings$shadow$pres !== void 0 ? _settings$shadow$pres : {};
const unsetShadow = {
name: (0,external_wp_i18n_namespaceObject.__)('Unset'),
slug: 'unset',
shadow: 'none'
};
const shadowPresets = [...(defaultPresetsEnabled && defaultShadows || shadow_panel_components_EMPTY_ARRAY), ...(themeShadows || shadow_panel_components_EMPTY_ARRAY), ...(customShadows || shadow_panel_components_EMPTY_ARRAY)];
if (shadowPresets.length) {
shadowPresets.unshift(unsetShadow);
}
return shadowPresets;
}, [settings]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/global-styles/border-panel.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function useHasBorderPanel(settings) {
const controls = Object.values(useHasBorderPanelControls(settings));
return controls.some(Boolean);
}
function useHasBorderPanelControls(settings) {
const controls = {
hasBorderColor: useHasBorderColorControl(settings),
hasBorderRadius: useHasBorderRadiusControl(settings),
hasBorderStyle: useHasBorderStyleControl(settings),
hasBorderWidth: useHasBorderWidthControl(settings),
hasShadow: useHasShadowControl(settings)
};
return controls;
}
function useHasBorderColorControl(settings) {
return settings?.border?.color;
}
function useHasBorderRadiusControl(settings) {
return settings?.border?.radius;
}
function useHasBorderStyleControl(settings) {
return settings?.border?.style;
}
function useHasBorderWidthControl(settings) {
return settings?.border?.width;
}
function useHasShadowControl(settings) {
const shadows = useShadowPresets(settings);
return !!settings?.shadow && shadows.length > 0;
}
function BorderToolsPanel({
resetAllFilter,
onChange,
value,
panelId,
children,
label
}) {
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
const resetAll = () => {
const updatedValue = resetAllFilter(value);
onChange(updatedValue);
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanel, {
label: label,
resetAll: resetAll,
panelId: panelId,
dropdownMenuProps: dropdownMenuProps,
children: children
});
}
const border_panel_DEFAULT_CONTROLS = {
radius: true,
color: true,
width: true,
shadow: true
};
function BorderPanel({
as: Wrapper = BorderToolsPanel,
value,
onChange,
inheritedValue = value,
settings,
panelId,
name,
defaultControls = border_panel_DEFAULT_CONTROLS
}) {
var _settings$shadow$pres, _ref, _ref2, _shadowPresets$custom;
const colors = useColorsPerOrigin(settings);
const decodeValue = (0,external_wp_element_namespaceObject.useCallback)(rawValue => getValueFromVariable({
settings
}, '', rawValue), [settings]);
const encodeColorValue = colorValue => {
const allColors = colors.flatMap(({
colors: originColors
}) => originColors);
const colorObject = allColors.find(({
color
}) => color === colorValue);
return colorObject ? 'var:preset|color|' + colorObject.slug : colorValue;
};
const border = (0,external_wp_element_namespaceObject.useMemo)(() => {
if ((0,external_wp_components_namespaceObject.__experimentalHasSplitBorders)(inheritedValue?.border)) {
const borderValue = {
...inheritedValue?.border
};
['top', 'right', 'bottom', 'left'].forEach(side => {
borderValue[side] = {
...borderValue[side],
color: decodeValue(borderValue[side]?.color)
};
});
return borderValue;
}
return {
...inheritedValue?.border,
color: inheritedValue?.border?.color ? decodeValue(inheritedValue?.border?.color) : undefined
};
}, [inheritedValue?.border, decodeValue]);
const setBorder = newBorder => onChange({
...value,
border: newBorder
});
const showBorderColor = useHasBorderColorControl(settings);
const showBorderStyle = useHasBorderStyleControl(settings);
const showBorderWidth = useHasBorderWidthControl(settings);
// Border radius.
const showBorderRadius = useHasBorderRadiusControl(settings);
const borderRadiusValues = decodeValue(border?.radius);
const setBorderRadius = newBorderRadius => setBorder({
...border,
radius: newBorderRadius
});
const hasBorderRadius = () => {
const borderValues = value?.border?.radius;
if (typeof borderValues === 'object') {
return Object.entries(borderValues).some(Boolean);
}
return !!borderValues;
};
const hasShadowControl = useHasShadowControl(settings);
// Shadow
const shadow = decodeValue(inheritedValue?.shadow);
const shadowPresets = (_settings$shadow$pres = settings?.shadow?.presets) !== null && _settings$shadow$pres !== void 0 ? _settings$shadow$pres : {};
const mergedShadowPresets = (_ref = (_ref2 = (_shadowPresets$custom = shadowPresets.custom) !== null && _shadowPresets$custom !== void 0 ? _shadowPresets$custom : shadowPresets.theme) !== null && _ref2 !== void 0 ? _ref2 : shadowPresets.default) !== null && _ref !== void 0 ? _ref : [];
const setShadow = newValue => {
const slug = mergedShadowPresets?.find(({
shadow: shadowName
}) => shadowName === newValue)?.slug;
onChange(setImmutably(value, ['shadow'], slug ? `var:preset|shadow|${slug}` : newValue || undefined));
};
const hasShadow = () => !!value?.shadow;
const resetShadow = () => setShadow(undefined);
const resetBorder = () => {
if (hasBorderRadius()) {
return setBorder({
radius: value?.border?.radius
});
}
setBorder(undefined);
};
const onBorderChange = newBorder => {
// Ensure we have a visible border style when a border width or
// color is being selected.
const updatedBorder = {
...newBorder
};
if ((0,external_wp_components_namespaceObject.__experimentalHasSplitBorders)(updatedBorder)) {
['top', 'right', 'bottom', 'left'].forEach(side => {
if (updatedBorder[side]) {
updatedBorder[side] = {
...updatedBorder[side],
color: encodeColorValue(updatedBorder[side]?.color)
};
}
});
} else if (updatedBorder) {
updatedBorder.color = encodeColorValue(updatedBorder.color);
}
// As radius is maintained separately to color, style, and width
// maintain its value. Undefined values here will be cleaned when
// global styles are saved.
setBorder({
radius: border?.radius,
...updatedBorder
});
};
const resetAllFilter = (0,external_wp_element_namespaceObject.useCallback)(previousValue => {
return {
...previousValue,
border: undefined,
shadow: undefined
};
}, []);
const showBorderByDefault = defaultControls?.color || defaultControls?.width;
const hasBorderControl = showBorderColor || showBorderStyle || showBorderWidth || showBorderRadius;
const label = useBorderPanelLabel({
blockName: name,
hasShadowControl,
hasBorderControl
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Wrapper, {
resetAllFilter: resetAllFilter,
value: value,
onChange: onChange,
panelId: panelId,
label: label,
children: [(showBorderWidth || showBorderColor) && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
hasValue: () => (0,external_wp_components_namespaceObject.__experimentalIsDefinedBorder)(value?.border),
label: (0,external_wp_i18n_namespaceObject.__)('Border'),
onDeselect: () => resetBorder(),
isShownByDefault: showBorderByDefault,
panelId: panelId,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalBorderBoxControl, {
colors: colors,
enableAlpha: true,
enableStyle: showBorderStyle,
onChange: onBorderChange,
popoverOffset: 40,
popoverPlacement: "left-start",
value: border,
__experimentalIsRenderedInSidebar: true,
size: "__unstable-large",
hideLabelFromVision: !hasShadowControl,
label: (0,external_wp_i18n_namespaceObject.__)('Border')
})
}), showBorderRadius && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
hasValue: hasBorderRadius,
label: (0,external_wp_i18n_namespaceObject.__)('Radius'),
onDeselect: () => setBorderRadius(undefined),
isShownByDefault: defaultControls.radius,
panelId: panelId,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BorderRadiusControl, {
values: borderRadiusValues,
onChange: newValue => {
setBorderRadius(newValue || undefined);
}
})
}), hasShadowControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
label: (0,external_wp_i18n_namespaceObject.__)('Shadow'),
hasValue: hasShadow,
onDeselect: resetShadow,
isShownByDefault: defaultControls.shadow,
panelId: panelId,
children: [hasBorderControl ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.BaseControl.VisualLabel, {
as: "legend",
children: (0,external_wp_i18n_namespaceObject.__)('Shadow')
}) : null, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalItemGroup, {
isBordered: true,
isSeparated: true,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ShadowPopover, {
shadow: shadow,
onShadowChange: setShadow,
settings: settings
})
})]
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/border.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const BORDER_SUPPORT_KEY = '__experimentalBorder';
const SHADOW_SUPPORT_KEY = 'shadow';
const getColorByProperty = (colors, property, value) => {
let matchedColor;
colors.some(origin => origin.colors.some(color => {
if (color[property] === value) {
matchedColor = color;
return true;
}
return false;
}));
return matchedColor;
};
const getMultiOriginColor = ({
colors,
namedColor,
customColor
}) => {
// Search each origin (default, theme, or user) for matching color by name.
if (namedColor) {
const colorObject = getColorByProperty(colors, 'slug', namedColor);
if (colorObject) {
return colorObject;
}
}
// Skip if no custom color or matching named color.
if (!customColor) {
return {
color: undefined
};
}
// Attempt to find color via custom color value or build new object.
const colorObject = getColorByProperty(colors, 'color', customColor);
return colorObject ? colorObject : {
color: customColor
};
};
function getColorSlugFromVariable(value) {
const namedColor = /var:preset\|color\|(.+)/.exec(value);
if (namedColor && namedColor[1]) {
return namedColor[1];
}
return null;
}
function styleToAttributes(style) {
if ((0,external_wp_components_namespaceObject.__experimentalHasSplitBorders)(style?.border)) {
return {
style,
borderColor: undefined
};
}
const borderColorValue = style?.border?.color;
const borderColorSlug = borderColorValue?.startsWith('var:preset|color|') ? borderColorValue.substring('var:preset|color|'.length) : undefined;
const updatedStyle = {
...style
};
updatedStyle.border = {
...updatedStyle.border,
color: borderColorSlug ? undefined : borderColorValue
};
return {
style: utils_cleanEmptyObject(updatedStyle),
borderColor: borderColorSlug
};
}
function attributesToStyle(attributes) {
if ((0,external_wp_components_namespaceObject.__experimentalHasSplitBorders)(attributes.style?.border)) {
return attributes.style;
}
return {
...attributes.style,
border: {
...attributes.style?.border,
color: attributes.borderColor ? 'var:preset|color|' + attributes.borderColor : attributes.style?.border?.color
}
};
}
function BordersInspectorControl({
label,
children,
resetAllFilter
}) {
const attributesResetAllFilter = (0,external_wp_element_namespaceObject.useCallback)(attributes => {
const existingStyle = attributesToStyle(attributes);
const updatedStyle = resetAllFilter(existingStyle);
return {
...attributes,
...styleToAttributes(updatedStyle)
};
}, [resetAllFilter]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls, {
group: "border",
resetAllFilter: attributesResetAllFilter,
label: label,
children: children
});
}
function border_BorderPanel({
clientId,
name,
setAttributes,
settings
}) {
const isEnabled = useHasBorderPanel(settings);
function selector(select) {
const {
style,
borderColor
} = select(store).getBlockAttributes(clientId) || {};
return {
style,
borderColor
};
}
const {
style,
borderColor
} = (0,external_wp_data_namespaceObject.useSelect)(selector, [clientId]);
const value = (0,external_wp_element_namespaceObject.useMemo)(() => {
return attributesToStyle({
style,
borderColor
});
}, [style, borderColor]);
const onChange = newStyle => {
setAttributes(styleToAttributes(newStyle));
};
if (!isEnabled) {
return null;
}
const defaultControls = {
...(0,external_wp_blocks_namespaceObject.getBlockSupport)(name, [BORDER_SUPPORT_KEY, '__experimentalDefaultControls']),
...(0,external_wp_blocks_namespaceObject.getBlockSupport)(name, [SHADOW_SUPPORT_KEY, '__experimentalDefaultControls'])
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BorderPanel, {
as: BordersInspectorControl,
panelId: clientId,
settings: settings,
value: value,
onChange: onChange,
defaultControls: defaultControls
});
}
/**
* Determine whether there is block support for border properties.
*
* @param {string} blockName Block name.
* @param {string} feature Border feature to check support for.
*
* @return {boolean} Whether there is support.
*/
function hasBorderSupport(blockName, feature = 'any') {
if (external_wp_element_namespaceObject.Platform.OS !== 'web') {
return false;
}
const support = (0,external_wp_blocks_namespaceObject.getBlockSupport)(blockName, BORDER_SUPPORT_KEY);
if (support === true) {
return true;
}
if (feature === 'any') {
return !!(support?.color || support?.radius || support?.width || support?.style);
}
return !!support?.[feature];
}
/**
* Determine whether there is block support for shadow properties.
*
* @param {string} blockName Block name.
*
* @return {boolean} Whether there is support.
*/
function hasShadowSupport(blockName) {
return hasBlockSupport(blockName, SHADOW_SUPPORT_KEY);
}
function useBorderPanelLabel({
blockName,
hasBorderControl,
hasShadowControl
} = {}) {
const settings = useBlockSettings(blockName);
const controls = useHasBorderPanelControls(settings);
if (!hasBorderControl && !hasShadowControl && blockName) {
hasBorderControl = controls?.hasBorderColor || controls?.hasBorderStyle || controls?.hasBorderWidth || controls?.hasBorderRadius;
hasShadowControl = controls?.hasShadow;
}
if (hasBorderControl && hasShadowControl) {
return (0,external_wp_i18n_namespaceObject.__)('Border & Shadow');
}
if (hasShadowControl) {
return (0,external_wp_i18n_namespaceObject.__)('Shadow');
}
return (0,external_wp_i18n_namespaceObject.__)('Border');
}
/**
* Returns a new style object where the specified border attribute has been
* removed.
*
* @param {Object} style Styles from block attributes.
* @param {string} attribute The border style attribute to clear.
*
* @return {Object} Style object with the specified attribute removed.
*/
function removeBorderAttribute(style, attribute) {
return cleanEmptyObject({
...style,
border: {
...style?.border,
[attribute]: undefined
}
});
}
/**
* Filters registered block settings, extending attributes to include
* `borderColor` if needed.
*
* @param {Object} settings Original block settings.
*
* @return {Object} Updated block settings.
*/
function addAttributes(settings) {
if (!hasBorderSupport(settings, 'color')) {
return settings;
}
// Allow blocks to specify default value if needed.
if (settings.attributes.borderColor) {
return settings;
}
// Add new borderColor attribute to block settings.
return {
...settings,
attributes: {
...settings.attributes,
borderColor: {
type: 'string'
}
}
};
}
/**
* Override props assigned to save component to inject border color.
*
* @param {Object} props Additional props applied to save element.
* @param {Object|string} blockNameOrType Block type definition.
* @param {Object} attributes Block's attributes.
*
* @return {Object} Filtered props to apply to save element.
*/
function border_addSaveProps(props, blockNameOrType, attributes) {
if (!hasBorderSupport(blockNameOrType, 'color') || shouldSkipSerialization(blockNameOrType, BORDER_SUPPORT_KEY, 'color')) {
return props;
}
const borderClasses = getBorderClasses(attributes);
const newClassName = dist_clsx(props.className, borderClasses);
// If we are clearing the last of the previous classes in `className`
// set it to `undefined` to avoid rendering empty DOM attributes.
props.className = newClassName ? newClassName : undefined;
return props;
}
/**
* Generates a CSS class name consisting of all the applicable border color
* classes given the current block attributes.
*
* @param {Object} attributes Block's attributes.
*
* @return {string} CSS class name.
*/
function getBorderClasses(attributes) {
const {
borderColor,
style
} = attributes;
const borderColorClass = getColorClassName('border-color', borderColor);
return dist_clsx({
'has-border-color': borderColor || style?.border?.color,
[borderColorClass]: !!borderColorClass
});
}
function border_useBlockProps({
name,
borderColor,
style
}) {
const {
colors
} = useMultipleOriginColorsAndGradients();
if (!hasBorderSupport(name, 'color') || shouldSkipSerialization(name, BORDER_SUPPORT_KEY, 'color')) {
return {};
}
const {
color: borderColorValue
} = getMultiOriginColor({
colors,
namedColor: borderColor
});
const {
color: borderTopColor
} = getMultiOriginColor({
colors,
namedColor: getColorSlugFromVariable(style?.border?.top?.color)
});
const {
color: borderRightColor
} = getMultiOriginColor({
colors,
namedColor: getColorSlugFromVariable(style?.border?.right?.color)
});
const {
color: borderBottomColor
} = getMultiOriginColor({
colors,
namedColor: getColorSlugFromVariable(style?.border?.bottom?.color)
});
const {
color: borderLeftColor
} = getMultiOriginColor({
colors,
namedColor: getColorSlugFromVariable(style?.border?.left?.color)
});
const extraStyles = {
borderTopColor: borderTopColor || borderColorValue,
borderRightColor: borderRightColor || borderColorValue,
borderBottomColor: borderBottomColor || borderColorValue,
borderLeftColor: borderLeftColor || borderColorValue
};
return border_addSaveProps({
style: utils_cleanEmptyObject(extraStyles) || {}
}, name, {
borderColor,
style
});
}
/* harmony default export */ const border = ({
useBlockProps: border_useBlockProps,
addSaveProps: border_addSaveProps,
attributeKeys: ['borderColor', 'style'],
hasSupport(name) {
return hasBorderSupport(name, 'color');
}
});
(0,external_wp_hooks_namespaceObject.addFilter)('blocks.registerBlockType', 'core/border/addAttributes', addAttributes);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/gradients/use-gradient.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function __experimentalGetGradientClass(gradientSlug) {
if (!gradientSlug) {
return undefined;
}
return `has-${gradientSlug}-gradient-background`;
}
/**
* Retrieves the gradient value per slug.
*
* @param {Array} gradients Gradient Palette
* @param {string} slug Gradient slug
*
* @return {string} Gradient value.
*/
function getGradientValueBySlug(gradients, slug) {
const gradient = gradients?.find(g => g.slug === slug);
return gradient && gradient.gradient;
}
function __experimentalGetGradientObjectByGradientValue(gradients, value) {
const gradient = gradients?.find(g => g.gradient === value);
return gradient;
}
/**
* Retrieves the gradient slug per slug.
*
* @param {Array} gradients Gradient Palette
* @param {string} value Gradient value
* @return {string} Gradient slug.
*/
function getGradientSlugByValue(gradients, value) {
const gradient = __experimentalGetGradientObjectByGradientValue(gradients, value);
return gradient && gradient.slug;
}
function __experimentalUseGradient({
gradientAttribute = 'gradient',
customGradientAttribute = 'customGradient'
} = {}) {
const {
clientId
} = useBlockEditContext();
const [userGradientPalette, themeGradientPalette, defaultGradientPalette] = use_settings_useSettings('color.gradients.custom', 'color.gradients.theme', 'color.gradients.default');
const allGradients = (0,external_wp_element_namespaceObject.useMemo)(() => [...(userGradientPalette || []), ...(themeGradientPalette || []), ...(defaultGradientPalette || [])], [userGradientPalette, themeGradientPalette, defaultGradientPalette]);
const {
gradient,
customGradient
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockAttributes
} = select(store);
const attributes = getBlockAttributes(clientId) || {};
return {
customGradient: attributes[customGradientAttribute],
gradient: attributes[gradientAttribute]
};
}, [clientId, gradientAttribute, customGradientAttribute]);
const {
updateBlockAttributes
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const setGradient = (0,external_wp_element_namespaceObject.useCallback)(newGradientValue => {
const slug = getGradientSlugByValue(allGradients, newGradientValue);
if (slug) {
updateBlockAttributes(clientId, {
[gradientAttribute]: slug,
[customGradientAttribute]: undefined
});
return;
}
updateBlockAttributes(clientId, {
[gradientAttribute]: undefined,
[customGradientAttribute]: newGradientValue
});
}, [allGradients, clientId, updateBlockAttributes]);
const gradientClass = __experimentalGetGradientClass(gradient);
let gradientValue;
if (gradient) {
gradientValue = getGradientValueBySlug(allGradients, gradient);
} else {
gradientValue = customGradient;
}
return {
gradientClass,
gradientValue,
setGradient
};
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/colors-gradients/control.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const {
Tabs
} = unlock(external_wp_components_namespaceObject.privateApis);
const colorsAndGradientKeys = ['colors', 'disableCustomColors', 'gradients', 'disableCustomGradients'];
const TAB_IDS = {
color: 'color',
gradient: 'gradient'
};
function ColorGradientControlInner({
colors,
gradients,
disableCustomColors,
disableCustomGradients,
__experimentalIsRenderedInSidebar,
className,
label,
onColorChange,
onGradientChange,
colorValue,
gradientValue,
clearable,
showTitle = true,
enableAlpha,
headingLevel
}) {
const canChooseAColor = onColorChange && (colors && colors.length > 0 || !disableCustomColors);
const canChooseAGradient = onGradientChange && (gradients && gradients.length > 0 || !disableCustomGradients);
if (!canChooseAColor && !canChooseAGradient) {
return null;
}
const tabPanels = {
[TAB_IDS.color]: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ColorPalette, {
value: colorValue,
onChange: canChooseAGradient ? newColor => {
onColorChange(newColor);
onGradientChange();
} : onColorChange,
colors,
disableCustomColors,
__experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
clearable: clearable,
enableAlpha: enableAlpha,
headingLevel: headingLevel
}),
[TAB_IDS.gradient]: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.GradientPicker, {
value: gradientValue,
onChange: canChooseAColor ? newGradient => {
onGradientChange(newGradient);
onColorChange();
} : onGradientChange,
gradients,
disableCustomGradients,
__experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
clearable: clearable,
headingLevel: headingLevel
})
};
const renderPanelType = type => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-color-gradient-control__panel",
children: tabPanels[type]
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.BaseControl, {
__nextHasNoMarginBottom: true,
className: dist_clsx('block-editor-color-gradient-control', className),
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("fieldset", {
className: "block-editor-color-gradient-control__fieldset",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalVStack, {
spacing: 1,
children: [showTitle && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("legend", {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-color-gradient-control__color-indicator",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.BaseControl.VisualLabel, {
children: label
})
})
}), canChooseAColor && canChooseAGradient && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Tabs, {
defaultTabId: gradientValue ? TAB_IDS.gradient : !!canChooseAColor && TAB_IDS.color,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Tabs.TabList, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Tabs.Tab, {
tabId: TAB_IDS.color,
children: (0,external_wp_i18n_namespaceObject.__)('Color')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Tabs.Tab, {
tabId: TAB_IDS.gradient,
children: (0,external_wp_i18n_namespaceObject.__)('Gradient')
})]
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Tabs.TabPanel, {
tabId: TAB_IDS.color,
className: "block-editor-color-gradient-control__panel",
focusable: false,
children: tabPanels.color
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Tabs.TabPanel, {
tabId: TAB_IDS.gradient,
className: "block-editor-color-gradient-control__panel",
focusable: false,
children: tabPanels.gradient
})]
})
}), !canChooseAGradient && renderPanelType(TAB_IDS.color), !canChooseAColor && renderPanelType(TAB_IDS.gradient)]
})
})
});
}
function ColorGradientControlSelect(props) {
const [colors, gradients, customColors, customGradients] = use_settings_useSettings('color.palette', 'color.gradients', 'color.custom', 'color.customGradient');
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorGradientControlInner, {
colors: colors,
gradients: gradients,
disableCustomColors: !customColors,
disableCustomGradients: !customGradients,
...props
});
}
function ColorGradientControl(props) {
if (colorsAndGradientKeys.every(key => props.hasOwnProperty(key))) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorGradientControlInner, {
...props
});
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorGradientControlSelect, {
...props
});
}
/* harmony default export */ const control = (ColorGradientControl);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/global-styles/color-panel.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function useHasColorPanel(settings) {
const hasTextPanel = useHasTextPanel(settings);
const hasBackgroundPanel = useHasBackgroundColorPanel(settings);
const hasLinkPanel = useHasLinkPanel(settings);
const hasHeadingPanel = useHasHeadingPanel(settings);
const hasButtonPanel = useHasButtonPanel(settings);
const hasCaptionPanel = useHasCaptionPanel(settings);
return hasTextPanel || hasBackgroundPanel || hasLinkPanel || hasHeadingPanel || hasButtonPanel || hasCaptionPanel;
}
function useHasTextPanel(settings) {
const colors = useColorsPerOrigin(settings);
return settings?.color?.text && (colors?.length > 0 || settings?.color?.custom);
}
function useHasLinkPanel(settings) {
const colors = useColorsPerOrigin(settings);
return settings?.color?.link && (colors?.length > 0 || settings?.color?.custom);
}
function useHasCaptionPanel(settings) {
const colors = useColorsPerOrigin(settings);
return settings?.color?.caption && (colors?.length > 0 || settings?.color?.custom);
}
function useHasHeadingPanel(settings) {
const colors = useColorsPerOrigin(settings);
const gradients = useGradientsPerOrigin(settings);
return settings?.color?.heading && (colors?.length > 0 || settings?.color?.custom || gradients?.length > 0 || settings?.color?.customGradient);
}
function useHasButtonPanel(settings) {
const colors = useColorsPerOrigin(settings);
const gradients = useGradientsPerOrigin(settings);
return settings?.color?.button && (colors?.length > 0 || settings?.color?.custom || gradients?.length > 0 || settings?.color?.customGradient);
}
function useHasBackgroundColorPanel(settings) {
const colors = useColorsPerOrigin(settings);
const gradients = useGradientsPerOrigin(settings);
return settings?.color?.background && (colors?.length > 0 || settings?.color?.custom || gradients?.length > 0 || settings?.color?.customGradient);
}
function ColorToolsPanel({
resetAllFilter,
onChange,
value,
panelId,
children
}) {
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
const resetAll = () => {
const updatedValue = resetAllFilter(value);
onChange(updatedValue);
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanel, {
label: (0,external_wp_i18n_namespaceObject.__)('Elements'),
resetAll: resetAll,
panelId: panelId,
hasInnerWrapper: true,
headingLevel: 3,
className: "color-block-support-panel",
__experimentalFirstVisibleItemClass: "first",
__experimentalLastVisibleItemClass: "last",
dropdownMenuProps: dropdownMenuProps,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "color-block-support-panel__inner-wrapper",
children: children
})
});
}
const color_panel_DEFAULT_CONTROLS = {
text: true,
background: true,
link: true,
heading: true,
button: true,
caption: true
};
const popoverProps = {
placement: 'left-start',
offset: 36,
shift: true
};
const {
Tabs: color_panel_Tabs
} = unlock(external_wp_components_namespaceObject.privateApis);
const LabeledColorIndicators = ({
indicators,
label
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalHStack, {
justify: "flex-start",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalZStack, {
isLayered: false,
offset: -8,
children: indicators.map((indicator, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Flex, {
expanded: false,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ColorIndicator, {
colorValue: indicator
})
}, index))
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexItem, {
className: "block-editor-panel-color-gradient-settings__color-name",
title: label,
children: label
})]
});
function ColorPanelTab({
isGradient,
inheritedValue,
userValue,
setValue,
colorGradientControlSettings
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(control, {
...colorGradientControlSettings,
showTitle: false,
enableAlpha: true,
__experimentalIsRenderedInSidebar: true,
colorValue: isGradient ? undefined : inheritedValue,
gradientValue: isGradient ? inheritedValue : undefined,
onColorChange: isGradient ? undefined : setValue,
onGradientChange: isGradient ? setValue : undefined,
clearable: inheritedValue === userValue,
headingLevel: 3
});
}
function ColorPanelDropdown({
label,
hasValue,
resetValue,
isShownByDefault,
indicators,
tabs,
colorGradientControlSettings,
panelId
}) {
var _tabs$;
const currentTab = tabs.find(tab => tab.userValue !== undefined);
const {
key: firstTabKey,
...firstTab
} = (_tabs$ = tabs[0]) !== null && _tabs$ !== void 0 ? _tabs$ : {};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
className: "block-editor-tools-panel-color-gradient-settings__item",
hasValue: hasValue,
label: label,
onDeselect: resetValue,
isShownByDefault: isShownByDefault,
panelId: panelId,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Dropdown, {
popoverProps: popoverProps,
className: "block-editor-tools-panel-color-gradient-settings__dropdown",
renderToggle: ({
onToggle,
isOpen
}) => {
const toggleProps = {
onClick: onToggle,
className: dist_clsx('block-editor-panel-color-gradient-settings__dropdown', {
'is-open': isOpen
}),
'aria-expanded': isOpen,
'aria-label': (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %s is the type of color property, e.g., "background" */
(0,external_wp_i18n_namespaceObject.__)('Color %s styles'), label)
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
...toggleProps,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LabeledColorIndicators, {
indicators: indicators,
label: label
})
});
},
renderContent: () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalDropdownContentWrapper, {
paddingSize: "none",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-panel-color-gradient-settings__dropdown-content",
children: [tabs.length === 1 && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorPanelTab, {
...firstTab,
colorGradientControlSettings: colorGradientControlSettings
}, firstTabKey), tabs.length > 1 && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(color_panel_Tabs, {
defaultTabId: currentTab?.key,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(color_panel_Tabs.TabList, {
children: tabs.map(tab => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(color_panel_Tabs.Tab, {
tabId: tab.key,
children: tab.label
}, tab.key))
}), tabs.map(tab => {
const {
key: tabKey,
...restTabProps
} = tab;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(color_panel_Tabs.TabPanel, {
tabId: tabKey,
focusable: false,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorPanelTab, {
...restTabProps,
colorGradientControlSettings: colorGradientControlSettings
}, tabKey)
}, tabKey);
})]
})]
})
})
})
});
}
function ColorPanel({
as: Wrapper = ColorToolsPanel,
value,
onChange,
inheritedValue = value,
settings,
panelId,
defaultControls = color_panel_DEFAULT_CONTROLS,
children
}) {
const colors = useColorsPerOrigin(settings);
const gradients = useGradientsPerOrigin(settings);
const areCustomSolidsEnabled = settings?.color?.custom;
const areCustomGradientsEnabled = settings?.color?.customGradient;
const hasSolidColors = colors.length > 0 || areCustomSolidsEnabled;
const hasGradientColors = gradients.length > 0 || areCustomGradientsEnabled;
const decodeValue = rawValue => getValueFromVariable({
settings
}, '', rawValue);
const encodeColorValue = colorValue => {
const allColors = colors.flatMap(({
colors: originColors
}) => originColors);
const colorObject = allColors.find(({
color
}) => color === colorValue);
return colorObject ? 'var:preset|color|' + colorObject.slug : colorValue;
};
const encodeGradientValue = gradientValue => {
const allGradients = gradients.flatMap(({
gradients: originGradients
}) => originGradients);
const gradientObject = allGradients.find(({
gradient
}) => gradient === gradientValue);
return gradientObject ? 'var:preset|gradient|' + gradientObject.slug : gradientValue;
};
// BackgroundColor
const showBackgroundPanel = useHasBackgroundColorPanel(settings);
const backgroundColor = decodeValue(inheritedValue?.color?.background);
const userBackgroundColor = decodeValue(value?.color?.background);
const gradient = decodeValue(inheritedValue?.color?.gradient);
const userGradient = decodeValue(value?.color?.gradient);
const hasBackground = () => !!userBackgroundColor || !!userGradient;
const setBackgroundColor = newColor => {
const newValue = setImmutably(value, ['color', 'background'], encodeColorValue(newColor));
newValue.color.gradient = undefined;
onChange(newValue);
};
const setGradient = newGradient => {
const newValue = setImmutably(value, ['color', 'gradient'], encodeGradientValue(newGradient));
newValue.color.background = undefined;
onChange(newValue);
};
const resetBackground = () => {
const newValue = setImmutably(value, ['color', 'background'], undefined);
newValue.color.gradient = undefined;
onChange(newValue);
};
// Links
const showLinkPanel = useHasLinkPanel(settings);
const linkColor = decodeValue(inheritedValue?.elements?.link?.color?.text);
const userLinkColor = decodeValue(value?.elements?.link?.color?.text);
const setLinkColor = newColor => {
onChange(setImmutably(value, ['elements', 'link', 'color', 'text'], encodeColorValue(newColor)));
};
const hoverLinkColor = decodeValue(inheritedValue?.elements?.link?.[':hover']?.color?.text);
const userHoverLinkColor = decodeValue(value?.elements?.link?.[':hover']?.color?.text);
const setHoverLinkColor = newColor => {
onChange(setImmutably(value, ['elements', 'link', ':hover', 'color', 'text'], encodeColorValue(newColor)));
};
const hasLink = () => !!userLinkColor || !!userHoverLinkColor;
const resetLink = () => {
let newValue = setImmutably(value, ['elements', 'link', ':hover', 'color', 'text'], undefined);
newValue = setImmutably(newValue, ['elements', 'link', 'color', 'text'], undefined);
onChange(newValue);
};
// Text Color
const showTextPanel = useHasTextPanel(settings);
const textColor = decodeValue(inheritedValue?.color?.text);
const userTextColor = decodeValue(value?.color?.text);
const hasTextColor = () => !!userTextColor;
const setTextColor = newColor => {
let changedObject = setImmutably(value, ['color', 'text'], encodeColorValue(newColor));
if (textColor === linkColor) {
changedObject = setImmutably(changedObject, ['elements', 'link', 'color', 'text'], encodeColorValue(newColor));
}
onChange(changedObject);
};
const resetTextColor = () => setTextColor(undefined);
// Elements
const elements = [{
name: 'caption',
label: (0,external_wp_i18n_namespaceObject.__)('Captions'),
showPanel: useHasCaptionPanel(settings)
}, {
name: 'button',
label: (0,external_wp_i18n_namespaceObject.__)('Button'),
showPanel: useHasButtonPanel(settings)
}, {
name: 'heading',
label: (0,external_wp_i18n_namespaceObject.__)('Heading'),
showPanel: useHasHeadingPanel(settings)
}, {
name: 'h1',
label: (0,external_wp_i18n_namespaceObject.__)('H1'),
showPanel: useHasHeadingPanel(settings)
}, {
name: 'h2',
label: (0,external_wp_i18n_namespaceObject.__)('H2'),
showPanel: useHasHeadingPanel(settings)
}, {
name: 'h3',
label: (0,external_wp_i18n_namespaceObject.__)('H3'),
showPanel: useHasHeadingPanel(settings)
}, {
name: 'h4',
label: (0,external_wp_i18n_namespaceObject.__)('H4'),
showPanel: useHasHeadingPanel(settings)
}, {
name: 'h5',
label: (0,external_wp_i18n_namespaceObject.__)('H5'),
showPanel: useHasHeadingPanel(settings)
}, {
name: 'h6',
label: (0,external_wp_i18n_namespaceObject.__)('H6'),
showPanel: useHasHeadingPanel(settings)
}];
const resetAllFilter = (0,external_wp_element_namespaceObject.useCallback)(previousValue => {
return {
...previousValue,
color: undefined,
elements: {
...previousValue?.elements,
link: {
...previousValue?.elements?.link,
color: undefined,
':hover': {
color: undefined
}
},
...elements.reduce((acc, element) => {
return {
...acc,
[element.name]: {
...previousValue?.elements?.[element.name],
color: undefined
}
};
}, {})
}
};
}, []);
const items = [showTextPanel && {
key: 'text',
label: (0,external_wp_i18n_namespaceObject.__)('Text'),
hasValue: hasTextColor,
resetValue: resetTextColor,
isShownByDefault: defaultControls.text,
indicators: [textColor],
tabs: [{
key: 'text',
label: (0,external_wp_i18n_namespaceObject.__)('Text'),
inheritedValue: textColor,
setValue: setTextColor,
userValue: userTextColor
}]
}, showBackgroundPanel && {
key: 'background',
label: (0,external_wp_i18n_namespaceObject.__)('Background'),
hasValue: hasBackground,
resetValue: resetBackground,
isShownByDefault: defaultControls.background,
indicators: [gradient !== null && gradient !== void 0 ? gradient : backgroundColor],
tabs: [hasSolidColors && {
key: 'background',
label: (0,external_wp_i18n_namespaceObject.__)('Color'),
inheritedValue: backgroundColor,
setValue: setBackgroundColor,
userValue: userBackgroundColor
}, hasGradientColors && {
key: 'gradient',
label: (0,external_wp_i18n_namespaceObject.__)('Gradient'),
inheritedValue: gradient,
setValue: setGradient,
userValue: userGradient,
isGradient: true
}].filter(Boolean)
}, showLinkPanel && {
key: 'link',
label: (0,external_wp_i18n_namespaceObject.__)('Link'),
hasValue: hasLink,
resetValue: resetLink,
isShownByDefault: defaultControls.link,
indicators: [linkColor, hoverLinkColor],
tabs: [{
key: 'link',
label: (0,external_wp_i18n_namespaceObject.__)('Default'),
inheritedValue: linkColor,
setValue: setLinkColor,
userValue: userLinkColor
}, {
key: 'hover',
label: (0,external_wp_i18n_namespaceObject.__)('Hover'),
inheritedValue: hoverLinkColor,
setValue: setHoverLinkColor,
userValue: userHoverLinkColor
}]
}].filter(Boolean);
elements.forEach(({
name,
label,
showPanel
}) => {
if (!showPanel) {
return;
}
const elementBackgroundColor = decodeValue(inheritedValue?.elements?.[name]?.color?.background);
const elementGradient = decodeValue(inheritedValue?.elements?.[name]?.color?.gradient);
const elementTextColor = decodeValue(inheritedValue?.elements?.[name]?.color?.text);
const elementBackgroundUserColor = decodeValue(value?.elements?.[name]?.color?.background);
const elementGradientUserColor = decodeValue(value?.elements?.[name]?.color?.gradient);
const elementTextUserColor = decodeValue(value?.elements?.[name]?.color?.text);
const hasElement = () => !!(elementTextUserColor || elementBackgroundUserColor || elementGradientUserColor);
const resetElement = () => {
const newValue = setImmutably(value, ['elements', name, 'color', 'background'], undefined);
newValue.elements[name].color.gradient = undefined;
newValue.elements[name].color.text = undefined;
onChange(newValue);
};
const setElementTextColor = newTextColor => {
onChange(setImmutably(value, ['elements', name, 'color', 'text'], encodeColorValue(newTextColor)));
};
const setElementBackgroundColor = newBackgroundColor => {
const newValue = setImmutably(value, ['elements', name, 'color', 'background'], encodeColorValue(newBackgroundColor));
newValue.elements[name].color.gradient = undefined;
onChange(newValue);
};
const setElementGradient = newGradient => {
const newValue = setImmutably(value, ['elements', name, 'color', 'gradient'], encodeGradientValue(newGradient));
newValue.elements[name].color.background = undefined;
onChange(newValue);
};
const supportsTextColor = true;
// Background color is not supported for `caption`
// as there isn't yet a way to set padding for the element.
const supportsBackground = name !== 'caption';
items.push({
key: name,
label,
hasValue: hasElement,
resetValue: resetElement,
isShownByDefault: defaultControls[name],
indicators: supportsTextColor && supportsBackground ? [elementTextColor, elementGradient !== null && elementGradient !== void 0 ? elementGradient : elementBackgroundColor] : [supportsTextColor ? elementTextColor : elementGradient !== null && elementGradient !== void 0 ? elementGradient : elementBackgroundColor],
tabs: [hasSolidColors && supportsTextColor && {
key: 'text',
label: (0,external_wp_i18n_namespaceObject.__)('Text'),
inheritedValue: elementTextColor,
setValue: setElementTextColor,
userValue: elementTextUserColor
}, hasSolidColors && supportsBackground && {
key: 'background',
label: (0,external_wp_i18n_namespaceObject.__)('Background'),
inheritedValue: elementBackgroundColor,
setValue: setElementBackgroundColor,
userValue: elementBackgroundUserColor
}, hasGradientColors && supportsBackground && {
key: 'gradient',
label: (0,external_wp_i18n_namespaceObject.__)('Gradient'),
inheritedValue: elementGradient,
setValue: setElementGradient,
userValue: elementGradientUserColor,
isGradient: true
}].filter(Boolean)
});
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Wrapper, {
resetAllFilter: resetAllFilter,
value: value,
onChange: onChange,
panelId: panelId,
children: [items.map(item => {
const {
key,
...restItem
} = item;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorPanelDropdown, {
...restItem,
colorGradientControlSettings: {
colors,
disableCustomColors: !areCustomSolidsEnabled,
gradients,
disableCustomGradients: !areCustomGradientsEnabled
},
panelId: panelId
}, key);
}), children]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/contrast-checker/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
k([names, a11y]);
function ContrastChecker({
backgroundColor,
fallbackBackgroundColor,
fallbackTextColor,
fallbackLinkColor,
fontSize,
// Font size value in pixels.
isLargeText,
textColor,
linkColor,
enableAlphaChecker = false
}) {
const currentBackgroundColor = backgroundColor || fallbackBackgroundColor;
// Must have a background color.
if (!currentBackgroundColor) {
return null;
}
const currentTextColor = textColor || fallbackTextColor;
const currentLinkColor = linkColor || fallbackLinkColor;
// Must have at least one text color.
if (!currentTextColor && !currentLinkColor) {
return null;
}
const textColors = [{
color: currentTextColor,
description: (0,external_wp_i18n_namespaceObject.__)('text color')
}, {
color: currentLinkColor,
description: (0,external_wp_i18n_namespaceObject.__)('link color')
}];
const colordBackgroundColor = w(currentBackgroundColor);
const backgroundColorHasTransparency = colordBackgroundColor.alpha() < 1;
const backgroundColorBrightness = colordBackgroundColor.brightness();
const isReadableOptions = {
level: 'AA',
size: isLargeText || isLargeText !== false && fontSize >= 24 ? 'large' : 'small'
};
let message = '';
let speakMessage = '';
for (const item of textColors) {
// If there is no color, go no further.
if (!item.color) {
continue;
}
const colordTextColor = w(item.color);
const isColordTextReadable = colordTextColor.isReadable(colordBackgroundColor, isReadableOptions);
const textHasTransparency = colordTextColor.alpha() < 1;
// If the contrast is not readable.
if (!isColordTextReadable) {
// Don't show the message if the background or text is transparent.
if (backgroundColorHasTransparency || textHasTransparency) {
continue;
}
message = backgroundColorBrightness < colordTextColor.brightness() ? (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: %s is a type of text color, e.g., "text color" or "link color".
(0,external_wp_i18n_namespaceObject.__)('This color combination may be hard for people to read. Try using a darker background color and/or a brighter %s.'), item.description) : (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: %s is a type of text color, e.g., "text color" or "link color".
(0,external_wp_i18n_namespaceObject.__)('This color combination may be hard for people to read. Try using a brighter background color and/or a darker %s.'), item.description);
speakMessage = (0,external_wp_i18n_namespaceObject.__)('This color combination may be hard for people to read.');
// Break from the loop when we have a contrast warning.
// These messages take priority over the transparency warning.
break;
}
// If there is no contrast warning and the text is transparent,
// show the transparent warning if alpha check is enabled.
if (textHasTransparency && enableAlphaChecker) {
message = (0,external_wp_i18n_namespaceObject.__)('Transparent text may be hard for people to read.');
speakMessage = (0,external_wp_i18n_namespaceObject.__)('Transparent text may be hard for people to read.');
}
}
if (!message) {
return null;
}
// Note: The `Notice` component can speak messages via its `spokenMessage`
// prop, but the contrast checker requires granular control over when the
// announcements are made. Notably, the message will be re-announced if a
// new color combination is selected and the contrast is still insufficient.
(0,external_wp_a11y_namespaceObject.speak)(speakMessage);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-contrast-checker",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Notice, {
spokenMessage: null,
status: "warning",
isDismissible: false,
children: message
})
});
}
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/contrast-checker/README.md
*/
/* harmony default export */ const contrast_checker = (ContrastChecker);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/provider/block-refs-provider.js
/**
* WordPress dependencies
*/
const BlockRefs = (0,external_wp_element_namespaceObject.createContext)({
refsMap: (0,external_wp_compose_namespaceObject.observableMap)()
});
function BlockRefsProvider({
children
}) {
const value = (0,external_wp_element_namespaceObject.useMemo)(() => ({
refsMap: (0,external_wp_compose_namespaceObject.observableMap)()
}), []);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockRefs.Provider, {
value: value,
children: children
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-list/use-block-props/use-block-refs.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/** @typedef {import('@wordpress/element').RefCallback} RefCallback */
/** @typedef {import('@wordpress/element').Ref} Ref */
/**
* Provides a ref to the BlockRefs context.
*
* @param {string} clientId The client ID of the element ref.
*
* @return {RefCallback} Ref callback.
*/
function useBlockRefProvider(clientId) {
const {
refsMap
} = (0,external_wp_element_namespaceObject.useContext)(BlockRefs);
return (0,external_wp_compose_namespaceObject.useRefEffect)(element => {
refsMap.set(clientId, element);
return () => refsMap.delete(clientId);
}, [clientId]);
}
function assignRef(ref, value) {
if (typeof ref === 'function') {
ref(value);
} else if (ref) {
ref.current = value;
}
}
/**
* Tracks the DOM element for the block identified by `clientId` and assigns it to the `ref`
* whenever it changes.
*
* @param {string} clientId The client ID to track.
* @param {Ref} ref The ref object/callback to assign to.
*/
function useBlockElementRef(clientId, ref) {
const {
refsMap
} = (0,external_wp_element_namespaceObject.useContext)(BlockRefs);
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
assignRef(ref, refsMap.get(clientId));
const unsubscribe = refsMap.subscribe(clientId, () => assignRef(ref, refsMap.get(clientId)));
return () => {
unsubscribe();
assignRef(ref, null);
};
}, [refsMap, clientId, ref]);
}
/**
* Return the element for a given client ID. Updates whenever the element
* changes, becomes available, or disappears.
*
* @param {string} clientId The client ID to an element for.
*
* @return {Element|null} The block's wrapper element.
*/
function useBlockElement(clientId) {
const [blockElement, setBlockElement] = (0,external_wp_element_namespaceObject.useState)(null);
useBlockElementRef(clientId, setBlockElement);
return blockElement;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/contrast-checker.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function getComputedStyle(node) {
return node.ownerDocument.defaultView.getComputedStyle(node);
}
function BlockColorContrastChecker({
clientId
}) {
const [detectedBackgroundColor, setDetectedBackgroundColor] = (0,external_wp_element_namespaceObject.useState)();
const [detectedColor, setDetectedColor] = (0,external_wp_element_namespaceObject.useState)();
const [detectedLinkColor, setDetectedLinkColor] = (0,external_wp_element_namespaceObject.useState)();
const blockEl = useBlockElement(clientId);
// There are so many things that can change the color of a block
// So we perform this check on every render.
// eslint-disable-next-line react-hooks/exhaustive-deps
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (!blockEl) {
return;
}
setDetectedColor(getComputedStyle(blockEl).color);
const firstLinkElement = blockEl.querySelector('a');
if (firstLinkElement && !!firstLinkElement.innerText) {
setDetectedLinkColor(getComputedStyle(firstLinkElement).color);
}
let backgroundColorNode = blockEl;
let backgroundColor = getComputedStyle(backgroundColorNode).backgroundColor;
while (backgroundColor === 'rgba(0, 0, 0, 0)' && backgroundColorNode.parentNode && backgroundColorNode.parentNode.nodeType === backgroundColorNode.parentNode.ELEMENT_NODE) {
backgroundColorNode = backgroundColorNode.parentNode;
backgroundColor = getComputedStyle(backgroundColorNode).backgroundColor;
}
setDetectedBackgroundColor(backgroundColor);
}, [blockEl]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(contrast_checker, {
backgroundColor: detectedBackgroundColor,
textColor: detectedColor,
enableAlphaChecker: true,
linkColor: detectedLinkColor
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/color.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const COLOR_SUPPORT_KEY = 'color';
const hasColorSupport = blockNameOrType => {
const colorSupport = (0,external_wp_blocks_namespaceObject.getBlockSupport)(blockNameOrType, COLOR_SUPPORT_KEY);
return colorSupport && (colorSupport.link === true || colorSupport.gradient === true || colorSupport.background !== false || colorSupport.text !== false);
};
const hasLinkColorSupport = blockType => {
if (external_wp_element_namespaceObject.Platform.OS !== 'web') {
return false;
}
const colorSupport = (0,external_wp_blocks_namespaceObject.getBlockSupport)(blockType, COLOR_SUPPORT_KEY);
return colorSupport !== null && typeof colorSupport === 'object' && !!colorSupport.link;
};
const hasGradientSupport = blockNameOrType => {
const colorSupport = (0,external_wp_blocks_namespaceObject.getBlockSupport)(blockNameOrType, COLOR_SUPPORT_KEY);
return colorSupport !== null && typeof colorSupport === 'object' && !!colorSupport.gradients;
};
const hasBackgroundColorSupport = blockType => {
const colorSupport = (0,external_wp_blocks_namespaceObject.getBlockSupport)(blockType, COLOR_SUPPORT_KEY);
return colorSupport && colorSupport.background !== false;
};
const hasTextColorSupport = blockType => {
const colorSupport = (0,external_wp_blocks_namespaceObject.getBlockSupport)(blockType, COLOR_SUPPORT_KEY);
return colorSupport && colorSupport.text !== false;
};
/**
* Filters registered block settings, extending attributes to include
* `backgroundColor` and `textColor` attribute.
*
* @param {Object} settings Original block settings.
*
* @return {Object} Filtered block settings.
*/
function color_addAttributes(settings) {
if (!hasColorSupport(settings)) {
return settings;
}
// Allow blocks to specify their own attribute definition with default values if needed.
if (!settings.attributes.backgroundColor) {
Object.assign(settings.attributes, {
backgroundColor: {
type: 'string'
}
});
}
if (!settings.attributes.textColor) {
Object.assign(settings.attributes, {
textColor: {
type: 'string'
}
});
}
if (hasGradientSupport(settings) && !settings.attributes.gradient) {
Object.assign(settings.attributes, {
gradient: {
type: 'string'
}
});
}
return settings;
}
/**
* Override props assigned to save component to inject colors classnames.
*
* @param {Object} props Additional props applied to save element.
* @param {Object|string} blockNameOrType Block type.
* @param {Object} attributes Block attributes.
*
* @return {Object} Filtered props applied to save element.
*/
function color_addSaveProps(props, blockNameOrType, attributes) {
if (!hasColorSupport(blockNameOrType) || shouldSkipSerialization(blockNameOrType, COLOR_SUPPORT_KEY)) {
return props;
}
const hasGradient = hasGradientSupport(blockNameOrType);
// I'd have preferred to avoid the "style" attribute usage here
const {
backgroundColor,
textColor,
gradient,
style
} = attributes;
const shouldSerialize = feature => !shouldSkipSerialization(blockNameOrType, COLOR_SUPPORT_KEY, feature);
// Primary color classes must come before the `has-text-color`,
// `has-background` and `has-link-color` classes to maintain backwards
// compatibility and avoid block invalidations.
const textClass = shouldSerialize('text') ? getColorClassName('color', textColor) : undefined;
const gradientClass = shouldSerialize('gradients') ? __experimentalGetGradientClass(gradient) : undefined;
const backgroundClass = shouldSerialize('background') ? getColorClassName('background-color', backgroundColor) : undefined;
const serializeHasBackground = shouldSerialize('background') || shouldSerialize('gradients');
const hasBackground = backgroundColor || style?.color?.background || hasGradient && (gradient || style?.color?.gradient);
const newClassName = dist_clsx(props.className, textClass, gradientClass, {
// Don't apply the background class if there's a custom gradient.
[backgroundClass]: (!hasGradient || !style?.color?.gradient) && !!backgroundClass,
'has-text-color': shouldSerialize('text') && (textColor || style?.color?.text),
'has-background': serializeHasBackground && hasBackground,
'has-link-color': shouldSerialize('link') && style?.elements?.link?.color
});
props.className = newClassName ? newClassName : undefined;
return props;
}
function color_styleToAttributes(style) {
const textColorValue = style?.color?.text;
const textColorSlug = textColorValue?.startsWith('var:preset|color|') ? textColorValue.substring('var:preset|color|'.length) : undefined;
const backgroundColorValue = style?.color?.background;
const backgroundColorSlug = backgroundColorValue?.startsWith('var:preset|color|') ? backgroundColorValue.substring('var:preset|color|'.length) : undefined;
const gradientValue = style?.color?.gradient;
const gradientSlug = gradientValue?.startsWith('var:preset|gradient|') ? gradientValue.substring('var:preset|gradient|'.length) : undefined;
const updatedStyle = {
...style
};
updatedStyle.color = {
...updatedStyle.color,
text: textColorSlug ? undefined : textColorValue,
background: backgroundColorSlug ? undefined : backgroundColorValue,
gradient: gradientSlug ? undefined : gradientValue
};
return {
style: utils_cleanEmptyObject(updatedStyle),
textColor: textColorSlug,
backgroundColor: backgroundColorSlug,
gradient: gradientSlug
};
}
function color_attributesToStyle(attributes) {
return {
...attributes.style,
color: {
...attributes.style?.color,
text: attributes.textColor ? 'var:preset|color|' + attributes.textColor : attributes.style?.color?.text,
background: attributes.backgroundColor ? 'var:preset|color|' + attributes.backgroundColor : attributes.style?.color?.background,
gradient: attributes.gradient ? 'var:preset|gradient|' + attributes.gradient : attributes.style?.color?.gradient
}
};
}
function ColorInspectorControl({
children,
resetAllFilter
}) {
const attributesResetAllFilter = (0,external_wp_element_namespaceObject.useCallback)(attributes => {
const existingStyle = color_attributesToStyle(attributes);
const updatedStyle = resetAllFilter(existingStyle);
return {
...attributes,
...color_styleToAttributes(updatedStyle)
};
}, [resetAllFilter]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls, {
group: "color",
resetAllFilter: attributesResetAllFilter,
children: children
});
}
function ColorEdit({
clientId,
name,
setAttributes,
settings
}) {
const isEnabled = useHasColorPanel(settings);
function selector(select) {
const {
style,
textColor,
backgroundColor,
gradient
} = select(store).getBlockAttributes(clientId) || {};
return {
style,
textColor,
backgroundColor,
gradient
};
}
const {
style,
textColor,
backgroundColor,
gradient
} = (0,external_wp_data_namespaceObject.useSelect)(selector, [clientId]);
const value = (0,external_wp_element_namespaceObject.useMemo)(() => {
return color_attributesToStyle({
style,
textColor,
backgroundColor,
gradient
});
}, [style, textColor, backgroundColor, gradient]);
const onChange = newStyle => {
setAttributes(color_styleToAttributes(newStyle));
};
if (!isEnabled) {
return null;
}
const defaultControls = (0,external_wp_blocks_namespaceObject.getBlockSupport)(name, [COLOR_SUPPORT_KEY, '__experimentalDefaultControls']);
const enableContrastChecking = external_wp_element_namespaceObject.Platform.OS === 'web' && !value?.color?.gradient && (settings?.color?.text || settings?.color?.link) &&
// Contrast checking is enabled by default.
// Deactivating it requires `enableContrastChecker` to have
// an explicit value of `false`.
false !== (0,external_wp_blocks_namespaceObject.getBlockSupport)(name, [COLOR_SUPPORT_KEY, 'enableContrastChecker']);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorPanel, {
as: ColorInspectorControl,
panelId: clientId,
settings: settings,
value: value,
onChange: onChange,
defaultControls: defaultControls,
enableContrastChecker: false !== (0,external_wp_blocks_namespaceObject.getBlockSupport)(name, [COLOR_SUPPORT_KEY, 'enableContrastChecker']),
children: enableContrastChecking && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockColorContrastChecker, {
clientId: clientId
})
});
}
function color_useBlockProps({
name,
backgroundColor,
textColor,
gradient,
style
}) {
const [userPalette, themePalette, defaultPalette] = use_settings_useSettings('color.palette.custom', 'color.palette.theme', 'color.palette.default');
const colors = (0,external_wp_element_namespaceObject.useMemo)(() => [...(userPalette || []), ...(themePalette || []), ...(defaultPalette || [])], [userPalette, themePalette, defaultPalette]);
if (!hasColorSupport(name) || shouldSkipSerialization(name, COLOR_SUPPORT_KEY)) {
return {};
}
const extraStyles = {};
if (textColor && !shouldSkipSerialization(name, COLOR_SUPPORT_KEY, 'text')) {
extraStyles.color = getColorObjectByAttributeValues(colors, textColor)?.color;
}
if (backgroundColor && !shouldSkipSerialization(name, COLOR_SUPPORT_KEY, 'background')) {
extraStyles.backgroundColor = getColorObjectByAttributeValues(colors, backgroundColor)?.color;
}
const saveProps = color_addSaveProps({
style: extraStyles
}, name, {
textColor,
backgroundColor,
gradient,
style
});
const hasBackgroundValue = backgroundColor || style?.color?.background || gradient || style?.color?.gradient;
return {
...saveProps,
className: dist_clsx(saveProps.className,
// Add background image classes in the editor, if not already handled by background color values.
!hasBackgroundValue && getBackgroundImageClasses(style))
};
}
/* harmony default export */ const color = ({
useBlockProps: color_useBlockProps,
addSaveProps: color_addSaveProps,
attributeKeys: ['backgroundColor', 'textColor', 'gradient', 'style'],
hasSupport: hasColorSupport
});
const MIGRATION_PATHS = {
linkColor: [['style', 'elements', 'link', 'color', 'text']],
textColor: [['textColor'], ['style', 'color', 'text']],
backgroundColor: [['backgroundColor'], ['style', 'color', 'background']],
gradient: [['gradient'], ['style', 'color', 'gradient']]
};
function color_addTransforms(result, source, index, results) {
const destinationBlockType = result.name;
const activeSupports = {
linkColor: hasLinkColorSupport(destinationBlockType),
textColor: hasTextColorSupport(destinationBlockType),
backgroundColor: hasBackgroundColorSupport(destinationBlockType),
gradient: hasGradientSupport(destinationBlockType)
};
return transformStyles(activeSupports, MIGRATION_PATHS, result, source, index, results);
}
(0,external_wp_hooks_namespaceObject.addFilter)('blocks.registerBlockType', 'core/color/addAttribute', color_addAttributes);
(0,external_wp_hooks_namespaceObject.addFilter)('blocks.switchToBlockType.transformedBlock', 'core/color/addTransforms', color_addTransforms);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/font-family/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function FontFamilyControl({
/** Start opting into the larger default height that will become the default size in a future version. */
__next40pxDefaultSize = false,
/** Start opting into the new margin-free styles that will become the default in a future version. */
__nextHasNoMarginBottom = false,
value = '',
onChange,
fontFamilies,
...props
}) {
const [blockLevelFontFamilies] = use_settings_useSettings('typography.fontFamilies');
if (!fontFamilies) {
fontFamilies = blockLevelFontFamilies;
}
if (!fontFamilies || fontFamilies.length === 0) {
return null;
}
const options = [{
value: '',
label: (0,external_wp_i18n_namespaceObject.__)('Default')
}, ...fontFamilies.map(({
fontFamily,
name
}) => {
return {
value: fontFamily,
label: name || fontFamily
};
})];
if (!__nextHasNoMarginBottom) {
external_wp_deprecated_default()('Bottom margin styles for wp.blockEditor.FontFamilyControl', {
since: '6.7',
version: '7.0',
hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version'
});
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.SelectControl, {
__next40pxDefaultSize: __next40pxDefaultSize,
__nextHasNoMarginBottom: __nextHasNoMarginBottom,
label: (0,external_wp_i18n_namespaceObject.__)('Font'),
options: options,
value: value,
onChange: onChange,
labelPosition: "top",
...props
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/font-appearance-control/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Adjusts font appearance field label in case either font styles or weights
* are disabled.
*
* @param {boolean} hasFontStyles Whether font styles are enabled and present.
* @param {boolean} hasFontWeights Whether font weights are enabled and present.
* @return {string} A label representing what font appearance is being edited.
*/
const getFontAppearanceLabel = (hasFontStyles, hasFontWeights) => {
if (!hasFontStyles) {
return (0,external_wp_i18n_namespaceObject.__)('Font weight');
}
if (!hasFontWeights) {
return (0,external_wp_i18n_namespaceObject.__)('Font style');
}
return (0,external_wp_i18n_namespaceObject.__)('Appearance');
};
/**
* Control to display font style and weight options of the active font.
*
* @param {Object} props Component props.
*
* @return {Element} Font appearance control.
*/
function FontAppearanceControl(props) {
const {
/** Start opting into the larger default height that will become the default size in a future version. */
__next40pxDefaultSize = false,
onChange,
hasFontStyles = true,
hasFontWeights = true,
fontFamilyFaces,
value: {
fontStyle,
fontWeight
},
...otherProps
} = props;
const hasStylesOrWeights = hasFontStyles || hasFontWeights;
const label = getFontAppearanceLabel(hasFontStyles, hasFontWeights);
const defaultOption = {
key: 'default',
name: (0,external_wp_i18n_namespaceObject.__)('Default'),
style: {
fontStyle: undefined,
fontWeight: undefined
}
};
const {
fontStyles,
fontWeights,
combinedStyleAndWeightOptions
} = getFontStylesAndWeights(fontFamilyFaces);
// Generates select options for combined font styles and weights.
const combineOptions = () => {
const combinedOptions = [defaultOption];
if (combinedStyleAndWeightOptions) {
combinedOptions.push(...combinedStyleAndWeightOptions);
}
return combinedOptions;
};
// Generates select options for font styles only.
const styleOptions = () => {
const combinedOptions = [defaultOption];
fontStyles.forEach(({
name,
value
}) => {
combinedOptions.push({
key: value,
name,
style: {
fontStyle: value,
fontWeight: undefined
}
});
});
return combinedOptions;
};
// Generates select options for font weights only.
const weightOptions = () => {
const combinedOptions = [defaultOption];
fontWeights.forEach(({
name,
value
}) => {
combinedOptions.push({
key: value,
name,
style: {
fontStyle: undefined,
fontWeight: value
}
});
});
return combinedOptions;
};
// Map font styles and weights to select options.
const selectOptions = (0,external_wp_element_namespaceObject.useMemo)(() => {
// Display combined available font style and weight options.
if (hasFontStyles && hasFontWeights) {
return combineOptions();
}
// Display only font style options or font weight options.
return hasFontStyles ? styleOptions() : weightOptions();
}, [props.options, fontStyles, fontWeights, combinedStyleAndWeightOptions]);
// Find current selection by comparing font style & weight against options,
// and fall back to the Default option if there is no matching option.
const currentSelection = selectOptions.find(option => option.style.fontStyle === fontStyle && option.style.fontWeight === fontWeight) || selectOptions[0];
// Adjusts screen reader description based on styles or weights.
const getDescribedBy = () => {
if (!currentSelection) {
return (0,external_wp_i18n_namespaceObject.__)('No selected font appearance');
}
if (!hasFontStyles) {
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: %s: Currently selected font weight.
(0,external_wp_i18n_namespaceObject.__)('Currently selected font weight: %s'), currentSelection.name);
}
if (!hasFontWeights) {
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: %s: Currently selected font style.
(0,external_wp_i18n_namespaceObject.__)('Currently selected font style: %s'), currentSelection.name);
}
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: %s: Currently selected font appearance.
(0,external_wp_i18n_namespaceObject.__)('Currently selected font appearance: %s'), currentSelection.name);
};
return hasStylesOrWeights && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.CustomSelectControl, {
...otherProps,
className: "components-font-appearance-control",
__next40pxDefaultSize: __next40pxDefaultSize,
label: label,
describedBy: getDescribedBy(),
options: selectOptions,
value: currentSelection,
onChange: ({
selectedItem
}) => onChange(selectedItem.style)
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/line-height-control/utils.js
const BASE_DEFAULT_VALUE = 1.5;
const STEP = 0.01;
/**
* A spin factor of 10 allows the spin controls to increment/decrement by 0.1.
* e.g. A line-height value of 1.55 will increment to 1.65.
*/
const SPIN_FACTOR = 10;
/**
* There are varying value types within LineHeightControl:
*
* {undefined} Initial value. No changes from the user.
* {string} Input value. Value consumed/outputted by the input. Empty would be ''.
* {number} Block attribute type. Input value needs to be converted for attribute setting.
*
* Note: If the value is undefined, the input requires it to be an empty string ('')
* in order to be considered "controlled" by props (rather than internal state).
*/
const RESET_VALUE = '';
/**
* Determines if the lineHeight attribute has been properly defined.
*
* @param {any} lineHeight The value to check.
*
* @return {boolean} Whether the lineHeight attribute is valid.
*/
function isLineHeightDefined(lineHeight) {
return lineHeight !== undefined && lineHeight !== RESET_VALUE;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/line-height-control/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const line_height_control_LineHeightControl = ({
/** Start opting into the larger default height that will become the default size in a future version. */
__next40pxDefaultSize = false,
value: lineHeight,
onChange,
__unstableInputWidth = '60px',
...otherProps
}) => {
const isDefined = isLineHeightDefined(lineHeight);
const adjustNextValue = (nextValue, wasTypedOrPasted) => {
// Set the next value without modification if lineHeight has been defined.
if (isDefined) {
return nextValue;
}
/**
* The following logic handles the initial spin up/down action
* (from an undefined value state) so that the next values are better suited for
* line-height rendering. For example, the first spin up should immediately
* go to 1.6, rather than the normally expected 0.1.
*
* Spin up/down actions can be triggered by keydowns of the up/down arrow keys,
* dragging the input or by clicking the spin buttons.
*/
const spin = STEP * SPIN_FACTOR;
switch (`${nextValue}`) {
case `${spin}`:
// Increment by spin value.
return BASE_DEFAULT_VALUE + spin;
case '0':
{
// This means the user explicitly input '0', rather than using the
// spin down action from an undefined value state.
if (wasTypedOrPasted) {
return nextValue;
}
// Decrement by spin value.
return BASE_DEFAULT_VALUE - spin;
}
case '':
return BASE_DEFAULT_VALUE;
default:
return nextValue;
}
};
const stateReducer = (state, action) => {
// Be careful when changing this — cross-browser behavior of the
// `inputType` field in `input` events are inconsistent.
// For example, Firefox emits an input event with inputType="insertReplacementText"
// on spin button clicks, while other browsers do not even emit an input event.
const wasTypedOrPasted = ['insertText', 'insertFromPaste'].includes(action.payload.event.nativeEvent?.inputType);
const value = adjustNextValue(state.value, wasTypedOrPasted);
return {
...state,
value
};
};
const value = isDefined ? lineHeight : RESET_VALUE;
const handleOnChange = (nextValue, {
event
}) => {
if (nextValue === '') {
onChange();
return;
}
if (event.type === 'click') {
onChange(adjustNextValue(`${nextValue}`, false));
return;
}
onChange(`${nextValue}`);
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-line-height-control",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalNumberControl, {
...otherProps,
__next40pxDefaultSize: __next40pxDefaultSize,
__unstableInputWidth: __unstableInputWidth,
__unstableStateReducer: stateReducer,
onChange: handleOnChange,
label: (0,external_wp_i18n_namespaceObject.__)('Line height'),
placeholder: BASE_DEFAULT_VALUE,
step: STEP,
spinFactor: SPIN_FACTOR,
value: value,
min: 0,
spinControls: "custom"
})
});
};
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/line-height-control/README.md
*/
/* harmony default export */ const line_height_control = (line_height_control_LineHeightControl);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/letter-spacing-control/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Control for letter-spacing.
*
* @param {Object} props Component props.
* @param {boolean} props.__next40pxDefaultSize Start opting into the larger default height that will become the default size in a future version.
* @param {string} props.value Currently selected letter-spacing.
* @param {Function} props.onChange Handles change in letter-spacing selection.
* @param {string|number|undefined} props.__unstableInputWidth Input width to pass through to inner UnitControl. Should be a valid CSS value.
*
* @return {Element} Letter-spacing control.
*/
function LetterSpacingControl({
__next40pxDefaultSize = false,
value,
onChange,
__unstableInputWidth = '60px',
...otherProps
}) {
const [availableUnits] = use_settings_useSettings('spacing.units');
const units = (0,external_wp_components_namespaceObject.__experimentalUseCustomUnits)({
availableUnits: availableUnits || ['px', 'em', 'rem'],
defaultValues: {
px: 2,
em: 0.2,
rem: 0.2
}
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalUnitControl, {
__next40pxDefaultSize: __next40pxDefaultSize,
...otherProps,
label: (0,external_wp_i18n_namespaceObject.__)('Letter spacing'),
value: value,
__unstableInputWidth: __unstableInputWidth,
units: units,
onChange: onChange
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/align-left.js
/**
* WordPress dependencies
*/
const alignLeft = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M13 5.5H4V4h9v1.5Zm7 7H4V11h16v1.5Zm-7 7H4V18h9v1.5Z"
})
});
/* harmony default export */ const align_left = (alignLeft);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/align-center.js
/**
* WordPress dependencies
*/
const align_center_alignCenter = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M7.5 5.5h9V4h-9v1.5Zm-3.5 7h16V11H4v1.5Zm3.5 7h9V18h-9v1.5Z"
})
});
/* harmony default export */ const align_center = (align_center_alignCenter);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/align-right.js
/**
* WordPress dependencies
*/
const alignRight = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M11.111 5.5H20V4h-8.889v1.5ZM4 12.5h16V11H4v1.5Zm7.111 7H20V18h-8.889v1.5Z"
})
});
/* harmony default export */ const align_right = (alignRight);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/align-justify.js
/**
* WordPress dependencies
*/
const alignJustify = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M4 12.8h16v-1.5H4v1.5zm0 7h12.4v-1.5H4v1.5zM4 4.3v1.5h16V4.3H4z"
})
});
/* harmony default export */ const align_justify = (alignJustify);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/text-alignment-control/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
const TEXT_ALIGNMENT_OPTIONS = [{
label: (0,external_wp_i18n_namespaceObject.__)('Align text left'),
value: 'left',
icon: align_left
}, {
label: (0,external_wp_i18n_namespaceObject.__)('Align text center'),
value: 'center',
icon: align_center
}, {
label: (0,external_wp_i18n_namespaceObject.__)('Align text right'),
value: 'right',
icon: align_right
}, {
label: (0,external_wp_i18n_namespaceObject.__)('Justify text'),
value: 'justify',
icon: align_justify
}];
const DEFAULT_OPTIONS = ['left', 'center', 'right'];
/**
* Control to facilitate text alignment selections.
*
* @param {Object} props Component props.
* @param {string} props.className Class name to add to the control.
* @param {string} props.value Currently selected text alignment.
* @param {Function} props.onChange Handles change in text alignment selection.
* @param {string[]} props.options Array of text alignment options to display.
*
* @return {Element} Text alignment control.
*/
function TextAlignmentControl({
className,
value,
onChange,
options = DEFAULT_OPTIONS
}) {
const validOptions = (0,external_wp_element_namespaceObject.useMemo)(() => TEXT_ALIGNMENT_OPTIONS.filter(option => options.includes(option.value)), [options]);
if (!validOptions.length) {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToggleGroupControl, {
isDeselectable: true,
__nextHasNoMarginBottom: true,
__next40pxDefaultSize: true,
label: (0,external_wp_i18n_namespaceObject.__)('Text alignment'),
className: dist_clsx('block-editor-text-alignment-control', className),
value: value,
onChange: newValue => {
onChange(newValue === value ? undefined : newValue);
},
children: validOptions.map(option => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToggleGroupControlOptionIcon, {
value: option.value,
icon: option.icon,
label: option.label
}, option.value);
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/reset.js
/**
* WordPress dependencies
*/
const reset_reset = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M7 11.5h10V13H7z"
})
});
/* harmony default export */ const library_reset = (reset_reset);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/format-uppercase.js
/**
* WordPress dependencies
*/
const formatUppercase = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M6.1 6.8L2.1 18h1.6l1.1-3h4.3l1.1 3h1.6l-4-11.2H6.1zm-.8 6.8L7 8.9l1.7 4.7H5.3zm15.1-.7c-.4-.5-.9-.8-1.6-1 .4-.2.7-.5.8-.9.2-.4.3-.9.3-1.4 0-.9-.3-1.6-.8-2-.6-.5-1.3-.7-2.4-.7h-3.5V18h4.2c1.1 0 2-.3 2.6-.8.6-.6 1-1.4 1-2.4-.1-.8-.3-1.4-.6-1.9zm-5.7-4.7h1.8c.6 0 1.1.1 1.4.4.3.2.5.7.5 1.3 0 .6-.2 1.1-.5 1.3-.3.2-.8.4-1.4.4h-1.8V8.2zm4 8c-.4.3-.9.5-1.5.5h-2.6v-3.8h2.6c1.4 0 2 .6 2 1.9.1.6-.1 1-.5 1.4z"
})
});
/* harmony default export */ const format_uppercase = (formatUppercase);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/format-lowercase.js
/**
* WordPress dependencies
*/
const formatLowercase = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M11 16.8c-.1-.1-.2-.3-.3-.5v-2.6c0-.9-.1-1.7-.3-2.2-.2-.5-.5-.9-.9-1.2-.4-.2-.9-.3-1.6-.3-.5 0-1 .1-1.5.2s-.9.3-1.2.6l.2 1.2c.4-.3.7-.4 1.1-.5.3-.1.7-.2 1-.2.6 0 1 .1 1.3.4.3.2.4.7.4 1.4-1.2 0-2.3.2-3.3.7s-1.4 1.1-1.4 2.1c0 .7.2 1.2.7 1.6.4.4 1 .6 1.8.6.9 0 1.7-.4 2.4-1.2.1.3.2.5.4.7.1.2.3.3.6.4.3.1.6.1 1.1.1h.1l.2-1.2h-.1c-.4.1-.6 0-.7-.1zM9.2 16c-.2.3-.5.6-.9.8-.3.1-.7.2-1.1.2-.4 0-.7-.1-.9-.3-.2-.2-.3-.5-.3-.9 0-.6.2-1 .7-1.3.5-.3 1.3-.4 2.5-.5v2zm10.6-3.9c-.3-.6-.7-1.1-1.2-1.5-.6-.4-1.2-.6-1.9-.6-.5 0-.9.1-1.4.3-.4.2-.8.5-1.1.8V6h-1.4v12h1.3l.2-1c.2.4.6.6 1 .8.4.2.9.3 1.4.3.7 0 1.2-.2 1.8-.5.5-.4 1-.9 1.3-1.5.3-.6.5-1.3.5-2.1-.1-.6-.2-1.3-.5-1.9zm-1.7 4c-.4.5-.9.8-1.6.8s-1.2-.2-1.7-.7c-.4-.5-.7-1.2-.7-2.1 0-.9.2-1.6.7-2.1.4-.5 1-.7 1.7-.7s1.2.3 1.6.8c.4.5.6 1.2.6 2s-.2 1.4-.6 2z"
})
});
/* harmony default export */ const format_lowercase = (formatLowercase);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/format-capitalize.js
/**
* WordPress dependencies
*/
const formatCapitalize = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M7.1 6.8L3.1 18h1.6l1.1-3h4.3l1.1 3h1.6l-4-11.2H7.1zm-.8 6.8L8 8.9l1.7 4.7H6.3zm14.5-1.5c-.3-.6-.7-1.1-1.2-1.5-.6-.4-1.2-.6-1.9-.6-.5 0-.9.1-1.4.3-.4.2-.8.5-1.1.8V6h-1.4v12h1.3l.2-1c.2.4.6.6 1 .8.4.2.9.3 1.4.3.7 0 1.2-.2 1.8-.5.5-.4 1-.9 1.3-1.5.3-.6.5-1.3.5-2.1-.1-.6-.2-1.3-.5-1.9zm-1.7 4c-.4.5-.9.8-1.6.8s-1.2-.2-1.7-.7c-.4-.5-.7-1.2-.7-2.1 0-.9.2-1.6.7-2.1.4-.5 1-.7 1.7-.7s1.2.3 1.6.8c.4.5.6 1.2.6 2 .1.8-.2 1.4-.6 2z"
})
});
/* harmony default export */ const format_capitalize = (formatCapitalize);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/text-transform-control/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
const TEXT_TRANSFORMS = [{
label: (0,external_wp_i18n_namespaceObject.__)('None'),
value: 'none',
icon: library_reset
}, {
label: (0,external_wp_i18n_namespaceObject.__)('Uppercase'),
value: 'uppercase',
icon: format_uppercase
}, {
label: (0,external_wp_i18n_namespaceObject.__)('Lowercase'),
value: 'lowercase',
icon: format_lowercase
}, {
label: (0,external_wp_i18n_namespaceObject.__)('Capitalize'),
value: 'capitalize',
icon: format_capitalize
}];
/**
* Control to facilitate text transform selections.
*
* @param {Object} props Component props.
* @param {string} props.className Class name to add to the control.
* @param {string} props.value Currently selected text transform.
* @param {Function} props.onChange Handles change in text transform selection.
*
* @return {Element} Text transform control.
*/
function TextTransformControl({
className,
value,
onChange
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToggleGroupControl, {
isDeselectable: true,
__nextHasNoMarginBottom: true,
__next40pxDefaultSize: true,
label: (0,external_wp_i18n_namespaceObject.__)('Letter case'),
className: dist_clsx('block-editor-text-transform-control', className),
value: value,
onChange: newValue => {
onChange(newValue === value ? undefined : newValue);
},
children: TEXT_TRANSFORMS.map(option => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToggleGroupControlOptionIcon, {
value: option.value,
icon: option.icon,
label: option.label
}, option.value);
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/format-underline.js
/**
* WordPress dependencies
*/
const formatUnderline = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M7 18v1h10v-1H7zm5-2c1.5 0 2.6-.4 3.4-1.2.8-.8 1.1-2 1.1-3.5V5H15v5.8c0 1.2-.2 2.1-.6 2.8-.4.7-1.2 1-2.4 1s-2-.3-2.4-1c-.4-.7-.6-1.6-.6-2.8V5H7.5v6.2c0 1.5.4 2.7 1.1 3.5.8.9 1.9 1.3 3.4 1.3z"
})
});
/* harmony default export */ const format_underline = (formatUnderline);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/format-strikethrough.js
/**
* WordPress dependencies
*/
const formatStrikethrough = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M9.1 9v-.5c0-.6.2-1.1.7-1.4.5-.3 1.2-.5 2-.5.7 0 1.4.1 2.1.3.7.2 1.4.5 2.1.9l.2-1.9c-.6-.3-1.2-.5-1.9-.7-.8-.1-1.6-.2-2.4-.2-1.5 0-2.7.3-3.6 1-.8.7-1.2 1.5-1.2 2.6V9h2zM20 12H4v1h8.3c.3.1.6.2.8.3.5.2.9.5 1.1.8.3.3.4.7.4 1.2 0 .7-.2 1.1-.8 1.5-.5.3-1.2.5-2.1.5-.8 0-1.6-.1-2.4-.3-.8-.2-1.5-.5-2.2-.8L7 18.1c.5.2 1.2.4 2 .6.8.2 1.6.3 2.4.3 1.7 0 3-.3 3.9-1 .9-.7 1.3-1.6 1.3-2.8 0-.9-.2-1.7-.7-2.2H20v-1z"
})
});
/* harmony default export */ const format_strikethrough = (formatStrikethrough);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/text-decoration-control/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
const TEXT_DECORATIONS = [{
label: (0,external_wp_i18n_namespaceObject.__)('None'),
value: 'none',
icon: library_reset
}, {
label: (0,external_wp_i18n_namespaceObject.__)('Underline'),
value: 'underline',
icon: format_underline
}, {
label: (0,external_wp_i18n_namespaceObject.__)('Strikethrough'),
value: 'line-through',
icon: format_strikethrough
}];
/**
* Control to facilitate text decoration selections.
*
* @param {Object} props Component props.
* @param {string} props.value Currently selected text decoration.
* @param {Function} props.onChange Handles change in text decoration selection.
* @param {string} props.className Additional class name to apply.
*
* @return {Element} Text decoration control.
*/
function TextDecorationControl({
value,
onChange,
className
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToggleGroupControl, {
isDeselectable: true,
__nextHasNoMarginBottom: true,
__next40pxDefaultSize: true,
label: (0,external_wp_i18n_namespaceObject.__)('Decoration'),
className: dist_clsx('block-editor-text-decoration-control', className),
value: value,
onChange: newValue => {
onChange(newValue === value ? undefined : newValue);
},
children: TEXT_DECORATIONS.map(option => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToggleGroupControlOptionIcon, {
value: option.value,
icon: option.icon,
label: option.label
}, option.value);
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/text-horizontal.js
/**
* WordPress dependencies
*/
const textHorizontal = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M8.2 14.4h3.9L13 17h1.7L11 6.5H9.3L5.6 17h1.7l.9-2.6zm2-5.5 1.4 4H8.8l1.4-4zm7.4 7.5-1.3.8.8 1.4H5.5V20h14.3l-2.2-3.6z"
})
});
/* harmony default export */ const text_horizontal = (textHorizontal);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/text-vertical.js
/**
* WordPress dependencies
*/
const textVertical = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M7 5.6v1.7l2.6.9v3.9L7 13v1.7L17.5 11V9.3L7 5.6zm4.2 6V8.8l4 1.4-4 1.4zm-5.7 5.6V5.5H4v14.3l3.6-2.2-.8-1.3-1.3.9z"
})
});
/* harmony default export */ const text_vertical = (textVertical);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/writing-mode-control/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
const WRITING_MODES = [{
label: (0,external_wp_i18n_namespaceObject.__)('Horizontal'),
value: 'horizontal-tb',
icon: text_horizontal
}, {
label: (0,external_wp_i18n_namespaceObject.__)('Vertical'),
value: (0,external_wp_i18n_namespaceObject.isRTL)() ? 'vertical-lr' : 'vertical-rl',
icon: text_vertical
}];
/**
* Control to facilitate writing mode selections.
*
* @param {Object} props Component props.
* @param {string} props.className Class name to add to the control.
* @param {string} props.value Currently selected writing mode.
* @param {Function} props.onChange Handles change in the writing mode selection.
*
* @return {Element} Writing Mode control.
*/
function WritingModeControl({
className,
value,
onChange
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToggleGroupControl, {
isDeselectable: true,
__nextHasNoMarginBottom: true,
__next40pxDefaultSize: true,
label: (0,external_wp_i18n_namespaceObject.__)('Orientation'),
className: dist_clsx('block-editor-writing-mode-control', className),
value: value,
onChange: newValue => {
onChange(newValue === value ? undefined : newValue);
},
children: WRITING_MODES.map(option => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToggleGroupControlOptionIcon, {
value: option.value,
icon: option.icon,
label: option.label
}, option.value);
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/global-styles/typography-panel.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const MIN_TEXT_COLUMNS = 1;
const MAX_TEXT_COLUMNS = 6;
function useHasTypographyPanel(settings) {
const hasFontFamily = useHasFontFamilyControl(settings);
const hasLineHeight = useHasLineHeightControl(settings);
const hasFontAppearance = useHasAppearanceControl(settings);
const hasLetterSpacing = useHasLetterSpacingControl(settings);
const hasTextAlign = useHasTextAlignmentControl(settings);
const hasTextTransform = useHasTextTransformControl(settings);
const hasTextDecoration = useHasTextDecorationControl(settings);
const hasWritingMode = useHasWritingModeControl(settings);
const hasTextColumns = useHasTextColumnsControl(settings);
const hasFontSize = useHasFontSizeControl(settings);
return hasFontFamily || hasLineHeight || hasFontAppearance || hasLetterSpacing || hasTextAlign || hasTextTransform || hasFontSize || hasTextDecoration || hasWritingMode || hasTextColumns;
}
function useHasFontSizeControl(settings) {
return settings?.typography?.defaultFontSizes !== false && settings?.typography?.fontSizes?.default?.length || settings?.typography?.fontSizes?.theme?.length || settings?.typography?.fontSizes?.custom?.length || settings?.typography?.customFontSize;
}
function useHasFontFamilyControl(settings) {
return ['default', 'theme', 'custom'].some(key => settings?.typography?.fontFamilies?.[key]?.length);
}
function useHasLineHeightControl(settings) {
return settings?.typography?.lineHeight;
}
function useHasAppearanceControl(settings) {
return settings?.typography?.fontStyle || settings?.typography?.fontWeight;
}
function useAppearanceControlLabel(settings) {
if (!settings?.typography?.fontStyle) {
return (0,external_wp_i18n_namespaceObject.__)('Font weight');
}
if (!settings?.typography?.fontWeight) {
return (0,external_wp_i18n_namespaceObject.__)('Font style');
}
return (0,external_wp_i18n_namespaceObject.__)('Appearance');
}
function useHasLetterSpacingControl(settings) {
return settings?.typography?.letterSpacing;
}
function useHasTextTransformControl(settings) {
return settings?.typography?.textTransform;
}
function useHasTextAlignmentControl(settings) {
return settings?.typography?.textAlign;
}
function useHasTextDecorationControl(settings) {
return settings?.typography?.textDecoration;
}
function useHasWritingModeControl(settings) {
return settings?.typography?.writingMode;
}
function useHasTextColumnsControl(settings) {
return settings?.typography?.textColumns;
}
/**
* Concatenate all the font sizes into a single list for the font size picker.
*
* @param {Object} settings The global styles settings.
*
* @return {Array} The merged font sizes.
*/
function getMergedFontSizes(settings) {
var _fontSizes$custom, _fontSizes$theme, _fontSizes$default;
const fontSizes = settings?.typography?.fontSizes;
const defaultFontSizesEnabled = !!settings?.typography?.defaultFontSizes;
return [...((_fontSizes$custom = fontSizes?.custom) !== null && _fontSizes$custom !== void 0 ? _fontSizes$custom : []), ...((_fontSizes$theme = fontSizes?.theme) !== null && _fontSizes$theme !== void 0 ? _fontSizes$theme : []), ...(defaultFontSizesEnabled ? (_fontSizes$default = fontSizes?.default) !== null && _fontSizes$default !== void 0 ? _fontSizes$default : [] : [])];
}
function TypographyToolsPanel({
resetAllFilter,
onChange,
value,
panelId,
children
}) {
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
const resetAll = () => {
const updatedValue = resetAllFilter(value);
onChange(updatedValue);
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanel, {
label: (0,external_wp_i18n_namespaceObject.__)('Typography'),
resetAll: resetAll,
panelId: panelId,
dropdownMenuProps: dropdownMenuProps,
children: children
});
}
const typography_panel_DEFAULT_CONTROLS = {
fontFamily: true,
fontSize: true,
fontAppearance: true,
lineHeight: true,
letterSpacing: true,
textAlign: true,
textTransform: true,
textDecoration: true,
writingMode: true,
textColumns: true
};
function TypographyPanel({
as: Wrapper = TypographyToolsPanel,
value,
onChange,
inheritedValue = value,
settings,
panelId,
defaultControls = typography_panel_DEFAULT_CONTROLS
}) {
const decodeValue = rawValue => getValueFromVariable({
settings
}, '', rawValue);
// Font Family
const hasFontFamilyEnabled = useHasFontFamilyControl(settings);
const fontFamily = decodeValue(inheritedValue?.typography?.fontFamily);
const {
fontFamilies,
fontFamilyFaces
} = (0,external_wp_element_namespaceObject.useMemo)(() => {
return getMergedFontFamiliesAndFontFamilyFaces(settings, fontFamily);
}, [settings, fontFamily]);
const setFontFamily = newValue => {
const slug = fontFamilies?.find(({
fontFamily: f
}) => f === newValue)?.slug;
onChange(setImmutably(value, ['typography', 'fontFamily'], slug ? `var:preset|font-family|${slug}` : newValue || undefined));
};
const hasFontFamily = () => !!value?.typography?.fontFamily;
const resetFontFamily = () => setFontFamily(undefined);
// Font Size
const hasFontSizeEnabled = useHasFontSizeControl(settings);
const disableCustomFontSizes = !settings?.typography?.customFontSize;
const mergedFontSizes = getMergedFontSizes(settings);
const fontSize = decodeValue(inheritedValue?.typography?.fontSize);
const setFontSize = (newValue, metadata) => {
const actualValue = !!metadata?.slug ? `var:preset|font-size|${metadata?.slug}` : newValue;
onChange(setImmutably(value, ['typography', 'fontSize'], actualValue || undefined));
};
const hasFontSize = () => !!value?.typography?.fontSize;
const resetFontSize = () => setFontSize(undefined);
// Appearance
const hasAppearanceControl = useHasAppearanceControl(settings);
const appearanceControlLabel = useAppearanceControlLabel(settings);
const hasFontStyles = settings?.typography?.fontStyle;
const hasFontWeights = settings?.typography?.fontWeight;
const fontStyle = decodeValue(inheritedValue?.typography?.fontStyle);
const fontWeight = decodeValue(inheritedValue?.typography?.fontWeight);
const {
nearestFontStyle,
nearestFontWeight
} = findNearestStyleAndWeight(fontFamilyFaces, fontStyle, fontWeight);
const setFontAppearance = (0,external_wp_element_namespaceObject.useCallback)(({
fontStyle: newFontStyle,
fontWeight: newFontWeight
}) => {
// Only update the font style and weight if they have changed.
if (newFontStyle !== fontStyle || newFontWeight !== fontWeight) {
onChange({
...value,
typography: {
...value?.typography,
fontStyle: newFontStyle || undefined,
fontWeight: newFontWeight || undefined
}
});
}
}, [fontStyle, fontWeight, onChange, value]);
const hasFontAppearance = () => !!value?.typography?.fontStyle || !!value?.typography?.fontWeight;
const resetFontAppearance = (0,external_wp_element_namespaceObject.useCallback)(() => {
setFontAppearance({});
}, [setFontAppearance]);
// Check if previous font style and weight values are available in the new font family.
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (nearestFontStyle && nearestFontWeight) {
setFontAppearance({
fontStyle: nearestFontStyle,
fontWeight: nearestFontWeight
});
} else {
// Reset font appearance if there are no available styles or weights.
resetFontAppearance();
}
}, [nearestFontStyle, nearestFontWeight, resetFontAppearance, setFontAppearance]);
// Line Height
const hasLineHeightEnabled = useHasLineHeightControl(settings);
const lineHeight = decodeValue(inheritedValue?.typography?.lineHeight);
const setLineHeight = newValue => {
onChange(setImmutably(value, ['typography', 'lineHeight'], newValue || undefined));
};
const hasLineHeight = () => value?.typography?.lineHeight !== undefined;
const resetLineHeight = () => setLineHeight(undefined);
// Letter Spacing
const hasLetterSpacingControl = useHasLetterSpacingControl(settings);
const letterSpacing = decodeValue(inheritedValue?.typography?.letterSpacing);
const setLetterSpacing = newValue => {
onChange(setImmutably(value, ['typography', 'letterSpacing'], newValue || undefined));
};
const hasLetterSpacing = () => !!value?.typography?.letterSpacing;
const resetLetterSpacing = () => setLetterSpacing(undefined);
// Text Columns
const hasTextColumnsControl = useHasTextColumnsControl(settings);
const textColumns = decodeValue(inheritedValue?.typography?.textColumns);
const setTextColumns = newValue => {
onChange(setImmutably(value, ['typography', 'textColumns'], newValue || undefined));
};
const hasTextColumns = () => !!value?.typography?.textColumns;
const resetTextColumns = () => setTextColumns(undefined);
// Text Transform
const hasTextTransformControl = useHasTextTransformControl(settings);
const textTransform = decodeValue(inheritedValue?.typography?.textTransform);
const setTextTransform = newValue => {
onChange(setImmutably(value, ['typography', 'textTransform'], newValue || undefined));
};
const hasTextTransform = () => !!value?.typography?.textTransform;
const resetTextTransform = () => setTextTransform(undefined);
// Text Decoration
const hasTextDecorationControl = useHasTextDecorationControl(settings);
const textDecoration = decodeValue(inheritedValue?.typography?.textDecoration);
const setTextDecoration = newValue => {
onChange(setImmutably(value, ['typography', 'textDecoration'], newValue || undefined));
};
const hasTextDecoration = () => !!value?.typography?.textDecoration;
const resetTextDecoration = () => setTextDecoration(undefined);
// Text Orientation
const hasWritingModeControl = useHasWritingModeControl(settings);
const writingMode = decodeValue(inheritedValue?.typography?.writingMode);
const setWritingMode = newValue => {
onChange(setImmutably(value, ['typography', 'writingMode'], newValue || undefined));
};
const hasWritingMode = () => !!value?.typography?.writingMode;
const resetWritingMode = () => setWritingMode(undefined);
// Text Alignment
const hasTextAlignmentControl = useHasTextAlignmentControl(settings);
const textAlign = decodeValue(inheritedValue?.typography?.textAlign);
const setTextAlign = newValue => {
onChange(setImmutably(value, ['typography', 'textAlign'], newValue || undefined));
};
const hasTextAlign = () => !!value?.typography?.textAlign;
const resetTextAlign = () => setTextAlign(undefined);
const resetAllFilter = (0,external_wp_element_namespaceObject.useCallback)(previousValue => {
return {
...previousValue,
typography: {}
};
}, []);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Wrapper, {
resetAllFilter: resetAllFilter,
value: value,
onChange: onChange,
panelId: panelId,
children: [hasFontFamilyEnabled && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
label: (0,external_wp_i18n_namespaceObject.__)('Font'),
hasValue: hasFontFamily,
onDeselect: resetFontFamily,
isShownByDefault: defaultControls.fontFamily,
panelId: panelId,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FontFamilyControl, {
fontFamilies: fontFamilies,
value: fontFamily,
onChange: setFontFamily,
size: "__unstable-large",
__nextHasNoMarginBottom: true
})
}), hasFontSizeEnabled && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
label: (0,external_wp_i18n_namespaceObject.__)('Size'),
hasValue: hasFontSize,
onDeselect: resetFontSize,
isShownByDefault: defaultControls.fontSize,
panelId: panelId,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FontSizePicker, {
value: fontSize,
onChange: setFontSize,
fontSizes: mergedFontSizes,
disableCustomFontSizes: disableCustomFontSizes,
withReset: false,
withSlider: true,
size: "__unstable-large"
})
}), hasAppearanceControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
className: "single-column",
label: appearanceControlLabel,
hasValue: hasFontAppearance,
onDeselect: resetFontAppearance,
isShownByDefault: defaultControls.fontAppearance,
panelId: panelId,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FontAppearanceControl, {
value: {
fontStyle,
fontWeight
},
onChange: setFontAppearance,
hasFontStyles: hasFontStyles,
hasFontWeights: hasFontWeights,
fontFamilyFaces: fontFamilyFaces,
size: "__unstable-large"
})
}), hasLineHeightEnabled && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
className: "single-column",
label: (0,external_wp_i18n_namespaceObject.__)('Line height'),
hasValue: hasLineHeight,
onDeselect: resetLineHeight,
isShownByDefault: defaultControls.lineHeight,
panelId: panelId,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(line_height_control, {
__unstableInputWidth: "auto",
value: lineHeight,
onChange: setLineHeight,
size: "__unstable-large"
})
}), hasLetterSpacingControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
className: "single-column",
label: (0,external_wp_i18n_namespaceObject.__)('Letter spacing'),
hasValue: hasLetterSpacing,
onDeselect: resetLetterSpacing,
isShownByDefault: defaultControls.letterSpacing,
panelId: panelId,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LetterSpacingControl, {
value: letterSpacing,
onChange: setLetterSpacing,
size: "__unstable-large",
__unstableInputWidth: "auto"
})
}), hasTextColumnsControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
className: "single-column",
label: (0,external_wp_i18n_namespaceObject.__)('Columns'),
hasValue: hasTextColumns,
onDeselect: resetTextColumns,
isShownByDefault: defaultControls.textColumns,
panelId: panelId,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalNumberControl, {
label: (0,external_wp_i18n_namespaceObject.__)('Columns'),
max: MAX_TEXT_COLUMNS,
min: MIN_TEXT_COLUMNS,
onChange: setTextColumns,
size: "__unstable-large",
spinControls: "custom",
value: textColumns,
initialPosition: 1
})
}), hasTextDecorationControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
className: "single-column",
label: (0,external_wp_i18n_namespaceObject.__)('Decoration'),
hasValue: hasTextDecoration,
onDeselect: resetTextDecoration,
isShownByDefault: defaultControls.textDecoration,
panelId: panelId,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TextDecorationControl, {
value: textDecoration,
onChange: setTextDecoration,
size: "__unstable-large",
__unstableInputWidth: "auto"
})
}), hasWritingModeControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
className: "single-column",
label: (0,external_wp_i18n_namespaceObject.__)('Orientation'),
hasValue: hasWritingMode,
onDeselect: resetWritingMode,
isShownByDefault: defaultControls.writingMode,
panelId: panelId,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WritingModeControl, {
value: writingMode,
onChange: setWritingMode,
size: "__unstable-large",
__nextHasNoMarginBottom: true
})
}), hasTextTransformControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
label: (0,external_wp_i18n_namespaceObject.__)('Letter case'),
hasValue: hasTextTransform,
onDeselect: resetTextTransform,
isShownByDefault: defaultControls.textTransform,
panelId: panelId,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TextTransformControl, {
value: textTransform,
onChange: setTextTransform,
showNone: true,
isBlock: true,
size: "__unstable-large",
__nextHasNoMarginBottom: true
})
}), hasTextAlignmentControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
label: (0,external_wp_i18n_namespaceObject.__)('Text alignment'),
hasValue: hasTextAlign,
onDeselect: resetTextAlign,
isShownByDefault: defaultControls.textAlign,
panelId: panelId,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TextAlignmentControl, {
value: textAlign,
onChange: setTextAlign,
size: "__unstable-large",
__nextHasNoMarginBottom: true
})
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/line-height.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const LINE_HEIGHT_SUPPORT_KEY = 'typography.lineHeight';
/**
* Inspector control panel containing the line height related configuration
*
* @param {Object} props
*
* @return {Element} Line height edit element.
*/
function LineHeightEdit(props) {
const {
attributes: {
style
},
setAttributes
} = props;
const onChange = newLineHeightValue => {
const newStyle = {
...style,
typography: {
...style?.typography,
lineHeight: newLineHeightValue
}
};
setAttributes({
style: cleanEmptyObject(newStyle)
});
};
return /*#__PURE__*/_jsx(LineHeightControl, {
__unstableInputWidth: "100%",
value: style?.typography?.lineHeight,
onChange: onChange,
size: "__unstable-large"
});
}
/**
* Custom hook that checks if line-height settings have been disabled.
*
* @param {string} name The name of the block.
* @return {boolean} Whether setting is disabled.
*/
function useIsLineHeightDisabled({
name: blockName
} = {}) {
const [isEnabled] = useSettings('typography.lineHeight');
return !isEnabled || !hasBlockSupport(blockName, LINE_HEIGHT_SUPPORT_KEY);
}
;// CONCATENATED MODULE: external ["wp","tokenList"]
const external_wp_tokenList_namespaceObject = window["wp"]["tokenList"];
var external_wp_tokenList_default = /*#__PURE__*/__webpack_require__.n(external_wp_tokenList_namespaceObject);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/font-family.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
const {
kebabCase: font_family_kebabCase
} = unlock(external_wp_components_namespaceObject.privateApis);
/**
* Filters registered block settings, extending attributes to include
* the `fontFamily` attribute.
*
* @param {Object} settings Original block settings
* @return {Object} Filtered block settings
*/
function font_family_addAttributes(settings) {
if (!(0,external_wp_blocks_namespaceObject.hasBlockSupport)(settings, FONT_FAMILY_SUPPORT_KEY)) {
return settings;
}
// Allow blocks to specify a default value if needed.
if (!settings.attributes.fontFamily) {
Object.assign(settings.attributes, {
fontFamily: {
type: 'string'
}
});
}
return settings;
}
/**
* Override props assigned to save component to inject font family.
*
* @param {Object} props Additional props applied to save element
* @param {Object} blockType Block type
* @param {Object} attributes Block attributes
* @return {Object} Filtered props applied to save element
*/
function font_family_addSaveProps(props, blockType, attributes) {
if (!(0,external_wp_blocks_namespaceObject.hasBlockSupport)(blockType, FONT_FAMILY_SUPPORT_KEY)) {
return props;
}
if (shouldSkipSerialization(blockType, TYPOGRAPHY_SUPPORT_KEY, 'fontFamily')) {
return props;
}
if (!attributes?.fontFamily) {
return props;
}
// Use TokenList to dedupe classes.
const classes = new (external_wp_tokenList_default())(props.className);
classes.add(`has-${font_family_kebabCase(attributes?.fontFamily)}-font-family`);
const newClassName = classes.value;
props.className = newClassName ? newClassName : undefined;
return props;
}
function font_family_useBlockProps({
name,
fontFamily
}) {
return font_family_addSaveProps({}, name, {
fontFamily
});
}
/* harmony default export */ const font_family = ({
useBlockProps: font_family_useBlockProps,
addSaveProps: font_family_addSaveProps,
attributeKeys: ['fontFamily'],
hasSupport(name) {
return (0,external_wp_blocks_namespaceObject.hasBlockSupport)(name, FONT_FAMILY_SUPPORT_KEY);
}
});
/**
* Resets the font family block support attribute. This can be used when
* disabling the font family support controls for a block via a progressive
* discovery panel.
*
* @param {Object} props Block props.
* @param {Object} props.setAttributes Function to set block's attributes.
*/
function resetFontFamily({
setAttributes
}) {
setAttributes({
fontFamily: undefined
});
}
(0,external_wp_hooks_namespaceObject.addFilter)('blocks.registerBlockType', 'core/fontFamily/addAttribute', font_family_addAttributes);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/font-sizes/utils.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const {
kebabCase: utils_kebabCase
} = unlock(external_wp_components_namespaceObject.privateApis);
/**
* Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values.
* If namedFontSize is undefined or not found in fontSizes an object with just the size value based on customFontSize is returned.
*
* @param {Array} fontSizes Array of font size objects containing at least the "name" and "size" values as properties.
* @param {?string} fontSizeAttribute Content of the font size attribute (slug).
* @param {?number} customFontSizeAttribute Contents of the custom font size attribute (value).
*
* @return {?Object} If fontSizeAttribute is set and an equal slug is found in fontSizes it returns the font size object for that slug.
* Otherwise, an object with just the size value based on customFontSize is returned.
*/
const utils_getFontSize = (fontSizes, fontSizeAttribute, customFontSizeAttribute) => {
if (fontSizeAttribute) {
const fontSizeObject = fontSizes?.find(({
slug
}) => slug === fontSizeAttribute);
if (fontSizeObject) {
return fontSizeObject;
}
}
return {
size: customFontSizeAttribute
};
};
/**
* Returns the corresponding font size object for a given value.
*
* @param {Array} fontSizes Array of font size objects.
* @param {number} value Font size value.
*
* @return {Object} Font size object.
*/
function utils_getFontSizeObjectByValue(fontSizes, value) {
const fontSizeObject = fontSizes?.find(({
size
}) => size === value);
if (fontSizeObject) {
return fontSizeObject;
}
return {
size: value
};
}
/**
* Returns a class based on fontSizeName.
*
* @param {string} fontSizeSlug Slug of the fontSize.
*
* @return {string | undefined} String with the class corresponding to the fontSize passed.
* The class is generated by appending 'has-' followed by fontSizeSlug in kebabCase and ending with '-font-size'.
*/
function getFontSizeClass(fontSizeSlug) {
if (!fontSizeSlug) {
return;
}
return `has-${utils_kebabCase(fontSizeSlug)}-font-size`;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/font-size.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';
/**
* Filters registered block settings, extending attributes to include
* `fontSize` and `fontWeight` attributes.
*
* @param {Object} settings Original block settings.
*
* @return {Object} Filtered block settings.
*/
function font_size_addAttributes(settings) {
if (!(0,external_wp_blocks_namespaceObject.hasBlockSupport)(settings, FONT_SIZE_SUPPORT_KEY)) {
return settings;
}
// Allow blocks to specify a default value if needed.
if (!settings.attributes.fontSize) {
Object.assign(settings.attributes, {
fontSize: {
type: 'string'
}
});
}
return settings;
}
/**
* Override props assigned to save component to inject font size.
*
* @param {Object} props Additional props applied to save element.
* @param {Object} blockNameOrType Block type.
* @param {Object} attributes Block attributes.
*
* @return {Object} Filtered props applied to save element.
*/
function font_size_addSaveProps(props, blockNameOrType, attributes) {
if (!(0,external_wp_blocks_namespaceObject.hasBlockSupport)(blockNameOrType, FONT_SIZE_SUPPORT_KEY)) {
return props;
}
if (shouldSkipSerialization(blockNameOrType, TYPOGRAPHY_SUPPORT_KEY, 'fontSize')) {
return props;
}
// Use TokenList to dedupe classes.
const classes = new (external_wp_tokenList_default())(props.className);
classes.add(getFontSizeClass(attributes.fontSize));
const newClassName = classes.value;
props.className = newClassName ? newClassName : undefined;
return props;
}
/**
* Inspector control panel containing the font size related configuration
*
* @param {Object} props
*
* @return {Element} Font size edit element.
*/
function FontSizeEdit(props) {
const {
attributes: {
fontSize,
style
},
setAttributes
} = props;
const [fontSizes] = useSettings('typography.fontSizes');
const onChange = value => {
const fontSizeSlug = getFontSizeObjectByValue(fontSizes, value).slug;
setAttributes({
style: cleanEmptyObject({
...style,
typography: {
...style?.typography,
fontSize: fontSizeSlug ? undefined : value
}
}),
fontSize: fontSizeSlug
});
};
const fontSizeObject = getFontSize(fontSizes, fontSize, style?.typography?.fontSize);
const fontSizeValue = fontSizeObject?.size || style?.typography?.fontSize || fontSize;
return /*#__PURE__*/_jsx(FontSizePicker, {
onChange: onChange,
value: fontSizeValue,
withReset: false,
withSlider: true,
size: "__unstable-large"
});
}
/**
* Custom hook that checks if font-size settings have been disabled.
*
* @param {string} name The name of the block.
* @return {boolean} Whether setting is disabled.
*/
function useIsFontSizeDisabled({
name: blockName
} = {}) {
const [fontSizes] = useSettings('typography.fontSizes');
const hasFontSizes = !!fontSizes?.length;
return !hasBlockSupport(blockName, FONT_SIZE_SUPPORT_KEY) || !hasFontSizes;
}
function font_size_useBlockProps({
name,
fontSize,
style
}) {
const [fontSizes, fluidTypographySettings, layoutSettings] = use_settings_useSettings('typography.fontSizes', 'typography.fluid', 'layout');
/*
* Only add inline styles if the block supports font sizes,
* doesn't skip serialization of font sizes,
* and has either a custom font size or a preset font size.
*/
if (!(0,external_wp_blocks_namespaceObject.hasBlockSupport)(name, FONT_SIZE_SUPPORT_KEY) || shouldSkipSerialization(name, TYPOGRAPHY_SUPPORT_KEY, 'fontSize') || !fontSize && !style?.typography?.fontSize) {
return;
}
let props;
if (style?.typography?.fontSize) {
props = {
style: {
fontSize: getTypographyFontSizeValue({
size: style.typography.fontSize
}, {
typography: {
fluid: fluidTypographySettings
},
layout: layoutSettings
})
}
};
}
if (fontSize) {
props = {
style: {
fontSize: utils_getFontSize(fontSizes, fontSize, style?.typography?.fontSize).size
}
};
}
if (!props) {
return;
}
return font_size_addSaveProps(props, name, {
fontSize
});
}
/* harmony default export */ const font_size = ({
useBlockProps: font_size_useBlockProps,
addSaveProps: font_size_addSaveProps,
attributeKeys: ['fontSize', 'style'],
hasSupport(name) {
return (0,external_wp_blocks_namespaceObject.hasBlockSupport)(name, FONT_SIZE_SUPPORT_KEY);
}
});
const font_size_MIGRATION_PATHS = {
fontSize: [['fontSize'], ['style', 'typography', 'fontSize']]
};
function font_size_addTransforms(result, source, index, results) {
const destinationBlockType = result.name;
const activeSupports = {
fontSize: (0,external_wp_blocks_namespaceObject.hasBlockSupport)(destinationBlockType, FONT_SIZE_SUPPORT_KEY)
};
return transformStyles(activeSupports, font_size_MIGRATION_PATHS, result, source, index, results);
}
(0,external_wp_hooks_namespaceObject.addFilter)('blocks.registerBlockType', 'core/font/addAttribute', font_size_addAttributes);
(0,external_wp_hooks_namespaceObject.addFilter)('blocks.switchToBlockType.transformedBlock', 'core/font-size/addTransforms', font_size_addTransforms);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/alignment-control/ui.js
/**
* WordPress dependencies
*/
const DEFAULT_ALIGNMENT_CONTROLS = [{
icon: align_left,
title: (0,external_wp_i18n_namespaceObject.__)('Align text left'),
align: 'left'
}, {
icon: align_center,
title: (0,external_wp_i18n_namespaceObject.__)('Align text center'),
align: 'center'
}, {
icon: align_right,
title: (0,external_wp_i18n_namespaceObject.__)('Align text right'),
align: 'right'
}];
const ui_POPOVER_PROPS = {
placement: 'bottom-start'
};
function AlignmentUI({
value,
onChange,
alignmentControls = DEFAULT_ALIGNMENT_CONTROLS,
label = (0,external_wp_i18n_namespaceObject.__)('Align text'),
description = (0,external_wp_i18n_namespaceObject.__)('Change text alignment'),
isCollapsed = true,
isToolbar
}) {
function applyOrUnset(align) {
return () => onChange(value === align ? undefined : align);
}
const activeAlignment = alignmentControls.find(control => control.align === value);
function setIcon() {
if (activeAlignment) {
return activeAlignment.icon;
}
return (0,external_wp_i18n_namespaceObject.isRTL)() ? align_right : align_left;
}
const UIComponent = isToolbar ? external_wp_components_namespaceObject.ToolbarGroup : external_wp_components_namespaceObject.ToolbarDropdownMenu;
const extraProps = isToolbar ? {
isCollapsed
} : {
toggleProps: {
description
},
popoverProps: ui_POPOVER_PROPS
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(UIComponent, {
icon: setIcon(),
label: label,
controls: alignmentControls.map(control => {
const {
align
} = control;
const isActive = value === align;
return {
...control,
isActive,
role: isCollapsed ? 'menuitemradio' : undefined,
onClick: applyOrUnset(align)
};
}),
...extraProps
});
}
/* harmony default export */ const alignment_control_ui = (AlignmentUI);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/alignment-control/index.js
/**
* Internal dependencies
*/
const AlignmentControl = props => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(alignment_control_ui, {
...props,
isToolbar: false
});
};
const AlignmentToolbar = props => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(alignment_control_ui, {
...props,
isToolbar: true
});
};
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/alignment-control/README.md
*/
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/text-align.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const TEXT_ALIGN_SUPPORT_KEY = 'typography.textAlign';
const text_align_TEXT_ALIGNMENT_OPTIONS = [{
icon: align_left,
title: (0,external_wp_i18n_namespaceObject.__)('Align text left'),
align: 'left'
}, {
icon: align_center,
title: (0,external_wp_i18n_namespaceObject.__)('Align text center'),
align: 'center'
}, {
icon: align_right,
title: (0,external_wp_i18n_namespaceObject.__)('Align text right'),
align: 'right'
}];
const VALID_TEXT_ALIGNMENTS = ['left', 'center', 'right'];
const NO_TEXT_ALIGNMENTS = [];
/**
* Returns the valid text alignments.
* Takes into consideration the text aligns supported by a block.
* Exported just for testing purposes, not exported outside the module.
*
* @param {?boolean|string[]} blockTextAlign Text aligns supported by the block.
*
* @return {string[]} Valid text alignments.
*/
function getValidTextAlignments(blockTextAlign) {
if (Array.isArray(blockTextAlign)) {
return VALID_TEXT_ALIGNMENTS.filter(textAlign => blockTextAlign.includes(textAlign));
}
return blockTextAlign === true ? VALID_TEXT_ALIGNMENTS : NO_TEXT_ALIGNMENTS;
}
function BlockEditTextAlignmentToolbarControlsPure({
style,
name: blockName,
setAttributes
}) {
const settings = useBlockSettings(blockName);
const hasTextAlignControl = settings?.typography?.textAlign;
const blockEditingMode = useBlockEditingMode();
if (!hasTextAlignControl || blockEditingMode !== 'default') {
return null;
}
const validTextAlignments = getValidTextAlignments((0,external_wp_blocks_namespaceObject.getBlockSupport)(blockName, TEXT_ALIGN_SUPPORT_KEY));
if (!validTextAlignments.length) {
return null;
}
const textAlignmentControls = text_align_TEXT_ALIGNMENT_OPTIONS.filter(control => validTextAlignments.includes(control.align));
const onChange = newTextAlignValue => {
const newStyle = {
...style,
typography: {
...style?.typography,
textAlign: newTextAlignValue
}
};
setAttributes({
style: utils_cleanEmptyObject(newStyle)
});
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_controls, {
group: "block",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AlignmentControl, {
value: style?.typography?.textAlign,
onChange: onChange,
alignmentControls: textAlignmentControls
})
});
}
/* harmony default export */ const text_align = ({
edit: BlockEditTextAlignmentToolbarControlsPure,
useBlockProps: text_align_useBlockProps,
addSaveProps: addAssignedTextAlign,
attributeKeys: ['style'],
hasSupport(name) {
return (0,external_wp_blocks_namespaceObject.hasBlockSupport)(name, TEXT_ALIGN_SUPPORT_KEY, false);
}
});
function text_align_useBlockProps({
name,
style
}) {
if (!style?.typography?.textAlign) {
return null;
}
const validTextAlignments = getValidTextAlignments((0,external_wp_blocks_namespaceObject.getBlockSupport)(name, TEXT_ALIGN_SUPPORT_KEY));
if (!validTextAlignments.length) {
return null;
}
if (shouldSkipSerialization(name, TYPOGRAPHY_SUPPORT_KEY, 'textAlign')) {
return null;
}
const textAlign = style.typography.textAlign;
const className = dist_clsx({
[`has-text-align-${textAlign}`]: textAlign
});
return {
className
};
}
/**
* Override props assigned to save component to inject text alignment class
* name if block supports it.
*
* @param {Object} props Additional props applied to save element.
* @param {Object} blockType Block type.
* @param {Object} attributes Block attributes.
*
* @return {Object} Filtered props applied to save element.
*/
function addAssignedTextAlign(props, blockType, attributes) {
if (!attributes?.style?.typography?.textAlign) {
return props;
}
const {
textAlign
} = attributes.style.typography;
const blockTextAlign = (0,external_wp_blocks_namespaceObject.getBlockSupport)(blockType, TEXT_ALIGN_SUPPORT_KEY);
const isTextAlignValid = getValidTextAlignments(blockTextAlign).includes(textAlign);
if (isTextAlignValid && !shouldSkipSerialization(blockType, TYPOGRAPHY_SUPPORT_KEY, 'textAlign')) {
props.className = dist_clsx(`has-text-align-${textAlign}`, props.className);
}
return props;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/typography.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function omit(object, keys) {
return Object.fromEntries(Object.entries(object).filter(([key]) => !keys.includes(key)));
}
const LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing';
const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform';
const TEXT_DECORATION_SUPPORT_KEY = 'typography.__experimentalTextDecoration';
const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';
const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
const WRITING_MODE_SUPPORT_KEY = 'typography.__experimentalWritingMode';
const TYPOGRAPHY_SUPPORT_KEY = 'typography';
const TYPOGRAPHY_SUPPORT_KEYS = [LINE_HEIGHT_SUPPORT_KEY, FONT_SIZE_SUPPORT_KEY, FONT_STYLE_SUPPORT_KEY, FONT_WEIGHT_SUPPORT_KEY, FONT_FAMILY_SUPPORT_KEY, TEXT_ALIGN_SUPPORT_KEY, TEXT_COLUMNS_SUPPORT_KEY, TEXT_DECORATION_SUPPORT_KEY, WRITING_MODE_SUPPORT_KEY, TEXT_TRANSFORM_SUPPORT_KEY, LETTER_SPACING_SUPPORT_KEY];
function typography_styleToAttributes(style) {
const updatedStyle = {
...omit(style, ['fontFamily'])
};
const fontSizeValue = style?.typography?.fontSize;
const fontFamilyValue = style?.typography?.fontFamily;
const fontSizeSlug = fontSizeValue?.startsWith('var:preset|font-size|') ? fontSizeValue.substring('var:preset|font-size|'.length) : undefined;
const fontFamilySlug = fontFamilyValue?.startsWith('var:preset|font-family|') ? fontFamilyValue.substring('var:preset|font-family|'.length) : undefined;
updatedStyle.typography = {
...omit(updatedStyle.typography, ['fontFamily']),
fontSize: fontSizeSlug ? undefined : fontSizeValue
};
return {
style: utils_cleanEmptyObject(updatedStyle),
fontFamily: fontFamilySlug,
fontSize: fontSizeSlug
};
}
function typography_attributesToStyle(attributes) {
return {
...attributes.style,
typography: {
...attributes.style?.typography,
fontFamily: attributes.fontFamily ? 'var:preset|font-family|' + attributes.fontFamily : undefined,
fontSize: attributes.fontSize ? 'var:preset|font-size|' + attributes.fontSize : attributes.style?.typography?.fontSize
}
};
}
function TypographyInspectorControl({
children,
resetAllFilter
}) {
const attributesResetAllFilter = (0,external_wp_element_namespaceObject.useCallback)(attributes => {
const existingStyle = typography_attributesToStyle(attributes);
const updatedStyle = resetAllFilter(existingStyle);
return {
...attributes,
...typography_styleToAttributes(updatedStyle)
};
}, [resetAllFilter]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls, {
group: "typography",
resetAllFilter: attributesResetAllFilter,
children: children
});
}
function typography_TypographyPanel({
clientId,
name,
setAttributes,
settings
}) {
function selector(select) {
const {
style,
fontFamily,
fontSize
} = select(store).getBlockAttributes(clientId) || {};
return {
style,
fontFamily,
fontSize
};
}
const {
style,
fontFamily,
fontSize
} = (0,external_wp_data_namespaceObject.useSelect)(selector, [clientId]);
const isEnabled = useHasTypographyPanel(settings);
const value = (0,external_wp_element_namespaceObject.useMemo)(() => typography_attributesToStyle({
style,
fontFamily,
fontSize
}), [style, fontSize, fontFamily]);
const onChange = newStyle => {
setAttributes(typography_styleToAttributes(newStyle));
};
if (!isEnabled) {
return null;
}
const defaultControls = (0,external_wp_blocks_namespaceObject.getBlockSupport)(name, [TYPOGRAPHY_SUPPORT_KEY, '__experimentalDefaultControls']);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TypographyPanel, {
as: TypographyInspectorControl,
panelId: clientId,
settings: settings,
value: value,
onChange: onChange,
defaultControls: defaultControls
});
}
const hasTypographySupport = blockName => {
return TYPOGRAPHY_SUPPORT_KEYS.some(key => hasBlockSupport(blockName, key));
};
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/settings.js
/**
* WordPress dependencies
*/
const settings_settings = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "m19 7.5h-7.628c-.3089-.87389-1.1423-1.5-2.122-1.5-.97966 0-1.81309.62611-2.12197 1.5h-2.12803v1.5h2.12803c.30888.87389 1.14231 1.5 2.12197 1.5.9797 0 1.8131-.62611 2.122-1.5h7.628z"
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "m19 15h-2.128c-.3089-.8739-1.1423-1.5-2.122-1.5s-1.8131.6261-2.122 1.5h-7.628v1.5h7.628c.3089.8739 1.1423 1.5 2.122 1.5s1.8131-.6261 2.122-1.5h2.128z"
})]
});
/* harmony default export */ const library_settings = (settings_settings);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/spacing-sizes-control/input-controls/spacing-input-control.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const CUSTOM_VALUE_SETTINGS = {
px: {
max: 300,
steps: 1
},
'%': {
max: 100,
steps: 1
},
vw: {
max: 100,
steps: 1
},
vh: {
max: 100,
steps: 1
},
em: {
max: 10,
steps: 0.1
},
rm: {
max: 10,
steps: 0.1
},
svw: {
max: 100,
steps: 1
},
lvw: {
max: 100,
steps: 1
},
dvw: {
max: 100,
steps: 1
},
svh: {
max: 100,
steps: 1
},
lvh: {
max: 100,
steps: 1
},
dvh: {
max: 100,
steps: 1
},
vi: {
max: 100,
steps: 1
},
svi: {
max: 100,
steps: 1
},
lvi: {
max: 100,
steps: 1
},
dvi: {
max: 100,
steps: 1
},
vb: {
max: 100,
steps: 1
},
svb: {
max: 100,
steps: 1
},
lvb: {
max: 100,
steps: 1
},
dvb: {
max: 100,
steps: 1
},
vmin: {
max: 100,
steps: 1
},
svmin: {
max: 100,
steps: 1
},
lvmin: {
max: 100,
steps: 1
},
dvmin: {
max: 100,
steps: 1
},
vmax: {
max: 100,
steps: 1
},
svmax: {
max: 100,
steps: 1
},
lvmax: {
max: 100,
steps: 1
},
dvmax: {
max: 100,
steps: 1
}
};
function SpacingInputControl({
icon,
isMixed = false,
minimumCustomValue,
onChange,
onMouseOut,
onMouseOver,
showSideInLabel = true,
side,
spacingSizes,
type,
value
}) {
var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2;
// Treat value as a preset value if the passed in value matches the value of one of the spacingSizes.
value = getPresetValueFromCustomValue(value, spacingSizes);
let selectListSizes = spacingSizes;
const showRangeControl = spacingSizes.length <= RANGE_CONTROL_MAX_SIZE;
const disableCustomSpacingSizes = (0,external_wp_data_namespaceObject.useSelect)(select => {
const editorSettings = select(store).getSettings();
return editorSettings?.disableCustomSpacingSizes;
});
const [showCustomValueControl, setShowCustomValueControl] = (0,external_wp_element_namespaceObject.useState)(!disableCustomSpacingSizes && value !== undefined && !isValueSpacingPreset(value));
const [minValue, setMinValue] = (0,external_wp_element_namespaceObject.useState)(minimumCustomValue);
const previousValue = (0,external_wp_compose_namespaceObject.usePrevious)(value);
if (!!value && previousValue !== value && !isValueSpacingPreset(value) && showCustomValueControl !== true) {
setShowCustomValueControl(true);
}
const [availableUnits] = use_settings_useSettings('spacing.units');
const units = (0,external_wp_components_namespaceObject.__experimentalUseCustomUnits)({
availableUnits: availableUnits || ['px', 'em', 'rem']
});
let currentValue = null;
const showCustomValueInSelectList = !showRangeControl && !showCustomValueControl && value !== undefined && (!isValueSpacingPreset(value) || isValueSpacingPreset(value) && isMixed);
if (showCustomValueInSelectList) {
selectListSizes = [...spacingSizes, {
name: !isMixed ?
// translators: %s: A custom measurement, e.g. a number followed by a unit like 12px.
(0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Custom (%s)'), value) : (0,external_wp_i18n_namespaceObject.__)('Mixed'),
slug: 'custom',
size: value
}];
currentValue = selectListSizes.length - 1;
} else if (!isMixed) {
currentValue = !showCustomValueControl ? getSliderValueFromPreset(value, spacingSizes) : getCustomValueFromPreset(value, spacingSizes);
}
const selectedUnit = (0,external_wp_element_namespaceObject.useMemo)(() => (0,external_wp_components_namespaceObject.__experimentalParseQuantityAndUnitFromRawValue)(currentValue), [currentValue])[1] || units[0]?.value;
const setInitialValue = () => {
if (value === undefined) {
onChange('0');
}
};
const customTooltipContent = newValue => value === undefined ? undefined : spacingSizes[newValue]?.name;
const customRangeValue = parseFloat(currentValue, 10);
const getNewCustomValue = newSize => {
const isNumeric = !isNaN(parseFloat(newSize));
const nextValue = isNumeric ? newSize : undefined;
return nextValue;
};
const getNewPresetValue = (newSize, controlType) => {
const size = parseInt(newSize, 10);
if (controlType === 'selectList') {
if (size === 0) {
return undefined;
}
if (size === 1) {
return '0';
}
} else if (size === 0) {
return '0';
}
return `var:preset|spacing|${spacingSizes[newSize]?.slug}`;
};
const handleCustomValueSliderChange = next => {
onChange([next, selectedUnit].join(''));
};
const allPlaceholder = isMixed ? (0,external_wp_i18n_namespaceObject.__)('Mixed') : null;
const options = selectListSizes.map((size, index) => ({
key: index,
name: size.name
}));
const marks = spacingSizes.slice(1, spacingSizes.length - 1).map((_newValue, index) => ({
value: index + 1,
label: undefined
}));
const sideLabel = ALL_SIDES.includes(side) && showSideInLabel ? LABELS[side] : '';
const typeLabel = showSideInLabel ? type?.toLowerCase() : type;
const ariaLabel = (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: 1: The side of the block being modified (top, bottom, left etc.). 2. Type of spacing being modified (padding, margin, etc).
(0,external_wp_i18n_namespaceObject._x)('%1$s %2$s', 'spacing'), sideLabel, typeLabel).trim();
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalHStack, {
className: "spacing-sizes-control__wrapper",
children: [icon && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Icon, {
className: "spacing-sizes-control__icon",
icon: icon,
size: 24
}), showCustomValueControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalUnitControl, {
onMouseOver: onMouseOver,
onMouseOut: onMouseOut,
onFocus: onMouseOver,
onBlur: onMouseOut,
onChange: newSize => onChange(getNewCustomValue(newSize)),
value: currentValue,
units: units,
min: minValue,
placeholder: allPlaceholder,
disableUnits: isMixed,
label: ariaLabel,
hideLabelFromVision: true,
className: "spacing-sizes-control__custom-value-input",
size: "__unstable-large",
onDragStart: () => {
if (value?.charAt(0) === '-') {
setMinValue(0);
}
},
onDrag: () => {
if (value?.charAt(0) === '-') {
setMinValue(0);
}
},
onDragEnd: () => {
setMinValue(minimumCustomValue);
}
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.RangeControl, {
__next40pxDefaultSize: true,
onMouseOver: onMouseOver,
onMouseOut: onMouseOut,
onFocus: onMouseOver,
onBlur: onMouseOut,
value: customRangeValue,
min: 0,
max: (_CUSTOM_VALUE_SETTING = CUSTOM_VALUE_SETTINGS[selectedUnit]?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10,
step: (_CUSTOM_VALUE_SETTING2 = CUSTOM_VALUE_SETTINGS[selectedUnit]?.steps) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1,
withInputField: false,
onChange: handleCustomValueSliderChange,
className: "spacing-sizes-control__custom-value-range",
__nextHasNoMarginBottom: true,
label: ariaLabel,
hideLabelFromVision: true
})]
}), showRangeControl && !showCustomValueControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.RangeControl, {
__next40pxDefaultSize: true,
onMouseOver: onMouseOver,
onMouseOut: onMouseOut,
className: "spacing-sizes-control__range-control",
value: currentValue,
onChange: newSize => onChange(getNewPresetValue(newSize)),
onMouseDown: event => {
// If mouse down is near start of range set initial value to 0, which
// prevents the user have to drag right then left to get 0 setting.
if (event?.nativeEvent?.offsetX < 35) {
setInitialValue();
}
},
withInputField: false,
"aria-valuenow": currentValue,
"aria-valuetext": spacingSizes[currentValue]?.name,
renderTooltipContent: customTooltipContent,
min: 0,
max: spacingSizes.length - 1,
marks: marks,
label: ariaLabel,
hideLabelFromVision: true,
__nextHasNoMarginBottom: true,
onFocus: onMouseOver,
onBlur: onMouseOut
}), !showRangeControl && !showCustomValueControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.CustomSelectControl, {
className: "spacing-sizes-control__custom-select-control",
value:
// passing empty string as a fallback to continue using the
// component in controlled mode
options.find(option => option.key === currentValue) || '',
onChange: selection => {
onChange(getNewPresetValue(selection.selectedItem.key, 'selectList'));
},
options: options,
label: ariaLabel,
hideLabelFromVision: true,
size: "__unstable-large",
onMouseOver: onMouseOver,
onMouseOut: onMouseOut,
onFocus: onMouseOver,
onBlur: onMouseOut
}), !disableCustomSpacingSizes && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
label: showCustomValueControl ? (0,external_wp_i18n_namespaceObject.__)('Use size preset') : (0,external_wp_i18n_namespaceObject.__)('Set custom size'),
icon: library_settings,
onClick: () => {
setShowCustomValueControl(!showCustomValueControl);
},
isPressed: showCustomValueControl,
size: "small",
className: "spacing-sizes-control__custom-toggle",
iconSize: 24
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/spacing-sizes-control/input-controls/axial.js
/**
* Internal dependencies
*/
const groupedSides = ['vertical', 'horizontal'];
function AxialInputControls({
minimumCustomValue,
onChange,
onMouseOut,
onMouseOver,
sides,
spacingSizes,
type,
values
}) {
const createHandleOnChange = side => next => {
if (!onChange) {
return;
}
// Encode the existing value into the preset value if the passed in value matches the value of one of the spacingSizes.
const nextValues = {
...Object.keys(values).reduce((acc, key) => {
acc[key] = getPresetValueFromCustomValue(values[key], spacingSizes);
return acc;
}, {})
};
if (side === 'vertical') {
nextValues.top = next;
nextValues.bottom = next;
}
if (side === 'horizontal') {
nextValues.left = next;
nextValues.right = next;
}
onChange(nextValues);
};
// Filter sides if custom configuration provided, maintaining default order.
const filteredSides = sides?.length ? groupedSides.filter(side => hasAxisSupport(sides, side)) : groupedSides;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: filteredSides.map(side => {
const axisValue = side === 'vertical' ? values.top : values.left;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SpacingInputControl, {
icon: ICONS[side],
label: LABELS[side],
minimumCustomValue: minimumCustomValue,
onChange: createHandleOnChange(side),
onMouseOut: onMouseOut,
onMouseOver: onMouseOver,
side: side,
spacingSizes: spacingSizes,
type: type,
value: axisValue,
withInputField: false
}, `spacing-sizes-control-${side}`);
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/spacing-sizes-control/input-controls/separated.js
/**
* Internal dependencies
*/
function SeparatedInputControls({
minimumCustomValue,
onChange,
onMouseOut,
onMouseOver,
sides,
spacingSizes,
type,
values
}) {
// Filter sides if custom configuration provided, maintaining default order.
const filteredSides = sides?.length ? ALL_SIDES.filter(side => sides.includes(side)) : ALL_SIDES;
const createHandleOnChange = side => next => {
// Encode the existing value into the preset value if the passed in value matches the value of one of the spacingSizes.
const nextValues = {
...Object.keys(values).reduce((acc, key) => {
acc[key] = getPresetValueFromCustomValue(values[key], spacingSizes);
return acc;
}, {})
};
nextValues[side] = next;
onChange(nextValues);
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: filteredSides.map(side => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SpacingInputControl, {
icon: ICONS[side],
label: LABELS[side],
minimumCustomValue: minimumCustomValue,
onChange: createHandleOnChange(side),
onMouseOut: onMouseOut,
onMouseOver: onMouseOver,
side: side,
spacingSizes: spacingSizes,
type: type,
value: values[side],
withInputField: false
}, `spacing-sizes-control-${side}`);
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/spacing-sizes-control/input-controls/single.js
/**
* Internal dependencies
*/
function SingleInputControl({
minimumCustomValue,
onChange,
onMouseOut,
onMouseOver,
showSideInLabel,
side,
spacingSizes,
type,
values
}) {
const createHandleOnChange = currentSide => next => {
// Encode the existing value into the preset value if the passed in value matches the value of one of the spacingSizes.
const nextValues = {
...Object.keys(values).reduce((acc, key) => {
acc[key] = getPresetValueFromCustomValue(values[key], spacingSizes);
return acc;
}, {})
};
nextValues[currentSide] = next;
onChange(nextValues);
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SpacingInputControl, {
label: LABELS[side],
minimumCustomValue: minimumCustomValue,
onChange: createHandleOnChange(side),
onMouseOut: onMouseOut,
onMouseOver: onMouseOver,
showSideInLabel: showSideInLabel,
side: side,
spacingSizes: spacingSizes,
type: type,
value: values[side],
withInputField: false
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/spacing-sizes-control/linked-button.js
/**
* WordPress dependencies
*/
function linked_button_LinkedButton({
isLinked,
...props
}) {
const label = isLinked ? (0,external_wp_i18n_namespaceObject.__)('Unlink sides') : (0,external_wp_i18n_namespaceObject.__)('Link sides');
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Tooltip, {
text: label,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
...props,
size: "small",
icon: isLinked ? library_link : link_off,
iconSize: 24,
"aria-label": label
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/spacing-sizes-control/hooks/use-spacing-sizes.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const use_spacing_sizes_EMPTY_ARRAY = [];
const compare = new Intl.Collator('und', {
numeric: true
}).compare;
function useSpacingSizes() {
const [customSpacingSizes, themeSpacingSizes, defaultSpacingSizes, defaultSpacingSizesEnabled] = use_settings_useSettings('spacing.spacingSizes.custom', 'spacing.spacingSizes.theme', 'spacing.spacingSizes.default', 'spacing.defaultSpacingSizes');
const customSizes = customSpacingSizes !== null && customSpacingSizes !== void 0 ? customSpacingSizes : use_spacing_sizes_EMPTY_ARRAY;
const themeSizes = themeSpacingSizes !== null && themeSpacingSizes !== void 0 ? themeSpacingSizes : use_spacing_sizes_EMPTY_ARRAY;
const defaultSizes = defaultSpacingSizes && defaultSpacingSizesEnabled !== false ? defaultSpacingSizes : use_spacing_sizes_EMPTY_ARRAY;
return (0,external_wp_element_namespaceObject.useMemo)(() => {
const sizes = [{
name: (0,external_wp_i18n_namespaceObject.__)('None'),
slug: '0',
size: 0
}, ...customSizes, ...themeSizes, ...defaultSizes];
// Using numeric slugs opts-in to sorting by slug.
if (sizes.every(({
slug
}) => /^[0-9]/.test(slug))) {
sizes.sort((a, b) => compare(a.slug, b.slug));
}
return sizes.length > RANGE_CONTROL_MAX_SIZE ? [{
name: (0,external_wp_i18n_namespaceObject.__)('Default'),
slug: 'default',
size: undefined
}, ...sizes] : sizes;
}, [customSizes, themeSizes, defaultSizes]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/spacing-sizes-control/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function SpacingSizesControl({
inputProps,
label: labelProp,
minimumCustomValue = 0,
onChange,
onMouseOut,
onMouseOver,
showSideInLabel = true,
sides = ALL_SIDES,
useSelect,
values
}) {
const spacingSizes = useSpacingSizes();
const inputValues = values || DEFAULT_VALUES;
const hasOneSide = sides?.length === 1;
const hasOnlyAxialSides = sides?.includes('horizontal') && sides?.includes('vertical') && sides?.length === 2;
const [view, setView] = (0,external_wp_element_namespaceObject.useState)(getInitialView(inputValues, sides));
const toggleLinked = () => {
setView(view === VIEWS.axial ? VIEWS.custom : VIEWS.axial);
};
const handleOnChange = nextValue => {
const newValues = {
...values,
...nextValue
};
onChange(newValues);
};
const inputControlProps = {
...inputProps,
minimumCustomValue,
onChange: handleOnChange,
onMouseOut,
onMouseOver,
sides,
spacingSizes,
type: labelProp,
useSelect,
values: inputValues
};
const renderControls = () => {
if (view === VIEWS.axial) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AxialInputControls, {
...inputControlProps
});
}
if (view === VIEWS.custom) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SeparatedInputControls, {
...inputControlProps
});
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SingleInputControl, {
side: view,
...inputControlProps,
showSideInLabel: showSideInLabel
});
};
const sideLabel = ALL_SIDES.includes(view) && showSideInLabel ? LABELS[view] : '';
const label = (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: 1: The side of the block being modified (top, bottom, left etc.). 2. Type of spacing being modified (padding, margin, etc).
(0,external_wp_i18n_namespaceObject._x)('%1$s %2$s', 'spacing'), labelProp, sideLabel).trim();
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("fieldset", {
className: "spacing-sizes-control",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalHStack, {
className: "spacing-sizes-control__header",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.BaseControl.VisualLabel, {
as: "legend",
className: "spacing-sizes-control__label",
children: label
}), !hasOneSide && !hasOnlyAxialSides && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(linked_button_LinkedButton, {
label: labelProp,
onClick: toggleLinked,
isLinked: view === VIEWS.axial
})]
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalVStack, {
spacing: 0.5,
children: renderControls()
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/height-control/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const RANGE_CONTROL_CUSTOM_SETTINGS = {
px: {
max: 1000,
step: 1
},
'%': {
max: 100,
step: 1
},
vw: {
max: 100,
step: 1
},
vh: {
max: 100,
step: 1
},
em: {
max: 50,
step: 0.1
},
rem: {
max: 50,
step: 0.1
},
svw: {
max: 100,
step: 1
},
lvw: {
max: 100,
step: 1
},
dvw: {
max: 100,
step: 1
},
svh: {
max: 100,
step: 1
},
lvh: {
max: 100,
step: 1
},
dvh: {
max: 100,
step: 1
},
vi: {
max: 100,
step: 1
},
svi: {
max: 100,
step: 1
},
lvi: {
max: 100,
step: 1
},
dvi: {
max: 100,
step: 1
},
vb: {
max: 100,
step: 1
},
svb: {
max: 100,
step: 1
},
lvb: {
max: 100,
step: 1
},
dvb: {
max: 100,
step: 1
},
vmin: {
max: 100,
step: 1
},
svmin: {
max: 100,
step: 1
},
lvmin: {
max: 100,
step: 1
},
dvmin: {
max: 100,
step: 1
},
vmax: {
max: 100,
step: 1
},
svmax: {
max: 100,
step: 1
},
lvmax: {
max: 100,
step: 1
},
dvmax: {
max: 100,
step: 1
}
};
/**
* HeightControl renders a linked unit control and range control for adjusting the height of a block.
*
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/height-control/README.md
*
* @param {Object} props
* @param {?string} props.label A label for the control.
* @param {( value: string ) => void } props.onChange Called when the height changes.
* @param {string} props.value The current height value.
*
* @return {Component} The component to be rendered.
*/
function HeightControl({
label = (0,external_wp_i18n_namespaceObject.__)('Height'),
onChange,
value
}) {
var _RANGE_CONTROL_CUSTOM, _RANGE_CONTROL_CUSTOM2;
const customRangeValue = parseFloat(value);
const [availableUnits] = use_settings_useSettings('spacing.units');
const units = (0,external_wp_components_namespaceObject.__experimentalUseCustomUnits)({
availableUnits: availableUnits || ['%', 'px', 'em', 'rem', 'vh', 'vw']
});
const selectedUnit = (0,external_wp_element_namespaceObject.useMemo)(() => (0,external_wp_components_namespaceObject.__experimentalParseQuantityAndUnitFromRawValue)(value), [value])[1] || units[0]?.value || 'px';
const handleSliderChange = next => {
onChange([next, selectedUnit].join(''));
};
const handleUnitChange = newUnit => {
// Attempt to smooth over differences between currentUnit and newUnit.
// This should slightly improve the experience of switching between unit types.
const [currentValue, currentUnit] = (0,external_wp_components_namespaceObject.__experimentalParseQuantityAndUnitFromRawValue)(value);
if (['em', 'rem'].includes(newUnit) && currentUnit === 'px') {
// Convert pixel value to an approximate of the new unit, assuming a root size of 16px.
onChange((currentValue / 16).toFixed(2) + newUnit);
} else if (['em', 'rem'].includes(currentUnit) && newUnit === 'px') {
// Convert to pixel value assuming a root size of 16px.
onChange(Math.round(currentValue * 16) + newUnit);
} else if (['%', 'vw', 'svw', 'lvw', 'dvw', 'vh', 'svh', 'lvh', 'dvh', 'vi', 'svi', 'lvi', 'dvi', 'vb', 'svb', 'lvb', 'dvb', 'vmin', 'svmin', 'lvmin', 'dvmin', 'vmax', 'svmax', 'lvmax', 'dvmax'].includes(newUnit) && currentValue > 100) {
// When converting to `%` or viewport-relative units, cap the new value at 100.
onChange(100 + newUnit);
}
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("fieldset", {
className: "block-editor-height-control",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.BaseControl.VisualLabel, {
as: "legend",
children: label
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.Flex, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexItem, {
isBlock: true,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalUnitControl, {
value: value,
units: units,
onChange: onChange,
onUnitChange: handleUnitChange,
min: 0,
size: "__unstable-large",
label: label,
hideLabelFromVision: true
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexItem, {
isBlock: true,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalSpacer, {
marginX: 2,
marginBottom: 0,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.RangeControl, {
__next40pxDefaultSize: true,
value: customRangeValue,
min: 0,
max: (_RANGE_CONTROL_CUSTOM = RANGE_CONTROL_CUSTOM_SETTINGS[selectedUnit]?.max) !== null && _RANGE_CONTROL_CUSTOM !== void 0 ? _RANGE_CONTROL_CUSTOM : 100,
step: (_RANGE_CONTROL_CUSTOM2 = RANGE_CONTROL_CUSTOM_SETTINGS[selectedUnit]?.step) !== null && _RANGE_CONTROL_CUSTOM2 !== void 0 ? _RANGE_CONTROL_CUSTOM2 : 0.1,
withInputField: false,
onChange: handleSliderChange,
__nextHasNoMarginBottom: true,
label: label,
hideLabelFromVision: true
})
})
})]
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/grid/use-get-number-of-blocks-before-cell.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function useGetNumberOfBlocksBeforeCell(gridClientId, numColumns) {
const {
getBlockOrder,
getBlockAttributes
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const getNumberOfBlocksBeforeCell = (column, row) => {
const targetIndex = (row - 1) * numColumns + column - 1;
let count = 0;
for (const clientId of getBlockOrder(gridClientId)) {
var _getBlockAttributes$s;
const {
columnStart,
rowStart
} = (_getBlockAttributes$s = getBlockAttributes(clientId).style?.layout) !== null && _getBlockAttributes$s !== void 0 ? _getBlockAttributes$s : {};
const cellIndex = (rowStart - 1) * numColumns + columnStart - 1;
if (cellIndex < targetIndex) {
count++;
}
}
return count;
};
return getNumberOfBlocksBeforeCell;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/child-layout-control/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function helpText(selfStretch, parentLayout) {
const {
orientation = 'horizontal'
} = parentLayout;
if (selfStretch === 'fill') {
return (0,external_wp_i18n_namespaceObject.__)('Stretch to fill available space.');
}
if (selfStretch === 'fixed' && orientation === 'horizontal') {
return (0,external_wp_i18n_namespaceObject.__)('Specify a fixed width.');
} else if (selfStretch === 'fixed') {
return (0,external_wp_i18n_namespaceObject.__)('Specify a fixed height.');
}
return (0,external_wp_i18n_namespaceObject.__)('Fit contents.');
}
/**
* Form to edit the child layout value.
*
* @param {Object} props Props.
* @param {Object} props.value The child layout value.
* @param {Function} props.onChange Function to update the child layout value.
* @param {Object} props.parentLayout The parent layout value.
*
* @param {boolean} props.isShownByDefault
* @param {string} props.panelId
* @return {Element} child layout edit element.
*/
function ChildLayoutControl({
value: childLayout = {},
onChange,
parentLayout,
isShownByDefault,
panelId
}) {
const {
type: parentType,
default: {
type: defaultParentType = 'default'
} = {}
} = parentLayout !== null && parentLayout !== void 0 ? parentLayout : {};
const parentLayoutType = parentType || defaultParentType;
if (parentLayoutType === 'flex') {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexControls, {
childLayout: childLayout,
onChange: onChange,
parentLayout: parentLayout,
isShownByDefault: isShownByDefault,
panelId: panelId
});
} else if (parentLayoutType === 'grid') {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridControls, {
childLayout: childLayout,
onChange: onChange,
parentLayout: parentLayout,
isShownByDefault: isShownByDefault,
panelId: panelId
});
}
return null;
}
function FlexControls({
childLayout,
onChange,
parentLayout,
isShownByDefault,
panelId
}) {
const {
selfStretch,
flexSize
} = childLayout;
const {
orientation = 'horizontal'
} = parentLayout !== null && parentLayout !== void 0 ? parentLayout : {};
const hasFlexValue = () => !!selfStretch;
const flexResetLabel = orientation === 'horizontal' ? (0,external_wp_i18n_namespaceObject.__)('Width') : (0,external_wp_i18n_namespaceObject.__)('Height');
const resetFlex = () => {
onChange({
selfStretch: undefined,
flexSize: undefined
});
};
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (selfStretch === 'fixed' && !flexSize) {
onChange({
...childLayout,
selfStretch: 'fit'
});
}
}, []);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalVStack, {
as: external_wp_components_namespaceObject.__experimentalToolsPanelItem,
spacing: 2,
hasValue: hasFlexValue,
label: flexResetLabel,
onDeselect: resetFlex,
isShownByDefault: isShownByDefault,
panelId: panelId,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalToggleGroupControl, {
__nextHasNoMarginBottom: true,
size: "__unstable-large",
label: childLayoutOrientation(parentLayout),
value: selfStretch || 'fit',
help: helpText(selfStretch, parentLayout),
onChange: value => {
const newFlexSize = value !== 'fixed' ? null : flexSize;
onChange({
selfStretch: value,
flexSize: newFlexSize
});
},
isBlock: true,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToggleGroupControlOption, {
value: "fit",
label: (0,external_wp_i18n_namespaceObject._x)('Fit', 'Intrinsic block width in flex layout')
}, "fit"), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToggleGroupControlOption, {
value: "fill",
label: (0,external_wp_i18n_namespaceObject._x)('Grow', 'Block with expanding width in flex layout')
}, "fill"), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToggleGroupControlOption, {
value: "fixed",
label: (0,external_wp_i18n_namespaceObject._x)('Fixed', 'Block with fixed width in flex layout')
}, "fixed")]
}), selfStretch === 'fixed' && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalUnitControl, {
size: "__unstable-large",
onChange: value => {
onChange({
selfStretch,
flexSize: value
});
},
value: flexSize,
label: flexResetLabel,
hideLabelFromVision: true
})]
});
}
function childLayoutOrientation(parentLayout) {
const {
orientation = 'horizontal'
} = parentLayout;
return orientation === 'horizontal' ? (0,external_wp_i18n_namespaceObject.__)('Width') : (0,external_wp_i18n_namespaceObject.__)('Height');
}
function GridControls({
childLayout,
onChange,
parentLayout,
isShownByDefault,
panelId
}) {
const {
columnStart,
rowStart,
columnSpan,
rowSpan
} = childLayout;
const {
columnCount = 3,
rowCount
} = parentLayout !== null && parentLayout !== void 0 ? parentLayout : {};
const rootClientId = (0,external_wp_data_namespaceObject.useSelect)(select => select(store).getBlockRootClientId(panelId));
const {
moveBlocksToPosition,
__unstableMarkNextChangeAsNotPersistent
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(rootClientId, columnCount);
const hasStartValue = () => !!columnStart || !!rowStart;
const hasSpanValue = () => !!columnSpan || !!rowSpan;
const resetGridStarts = () => {
onChange({
columnStart: undefined,
rowStart: undefined
});
};
const resetGridSpans = () => {
onChange({
columnSpan: undefined,
rowSpan: undefined
});
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalHStack, {
as: external_wp_components_namespaceObject.__experimentalToolsPanelItem,
hasValue: hasSpanValue,
label: (0,external_wp_i18n_namespaceObject.__)('Grid span'),
onDeselect: resetGridSpans,
isShownByDefault: isShownByDefault,
panelId: panelId,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalInputControl, {
size: "__unstable-large",
label: (0,external_wp_i18n_namespaceObject.__)('Column span'),
type: "number",
onChange: value => {
// Don't allow unsetting.
const newColumnSpan = value === '' ? 1 : parseInt(value, 10);
onChange({
columnStart,
rowStart,
rowSpan,
columnSpan: newColumnSpan
});
},
value: columnSpan !== null && columnSpan !== void 0 ? columnSpan : 1,
min: 1
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalInputControl, {
size: "__unstable-large",
label: (0,external_wp_i18n_namespaceObject.__)('Row span'),
type: "number",
onChange: value => {
// Don't allow unsetting.
const newRowSpan = value === '' ? 1 : parseInt(value, 10);
onChange({
columnStart,
rowStart,
columnSpan,
rowSpan: newRowSpan
});
},
value: rowSpan !== null && rowSpan !== void 0 ? rowSpan : 1,
min: 1
})]
}), window.__experimentalEnableGridInteractivity && columnCount &&
/*#__PURE__*/
// Use Flex with an explicit width on the FlexItem instead of HStack to
// work around an issue in webkit where inputs with a max attribute are
// sized incorrectly.
(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.Flex, {
as: external_wp_components_namespaceObject.__experimentalToolsPanelItem,
hasValue: hasStartValue,
label: (0,external_wp_i18n_namespaceObject.__)('Grid placement'),
onDeselect: resetGridStarts,
isShownByDefault: false,
panelId: panelId,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexItem, {
style: {
width: '50%'
},
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalInputControl, {
size: "__unstable-large",
label: (0,external_wp_i18n_namespaceObject.__)('Column'),
type: "number",
onChange: value => {
// Don't allow unsetting.
const newColumnStart = value === '' ? 1 : parseInt(value, 10);
onChange({
columnStart: newColumnStart,
rowStart,
columnSpan,
rowSpan
});
__unstableMarkNextChangeAsNotPersistent();
moveBlocksToPosition([panelId], rootClientId, rootClientId, getNumberOfBlocksBeforeCell(newColumnStart, rowStart));
},
value: columnStart !== null && columnStart !== void 0 ? columnStart : 1,
min: 1,
max: columnCount ? columnCount - (columnSpan !== null && columnSpan !== void 0 ? columnSpan : 1) + 1 : undefined
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexItem, {
style: {
width: '50%'
},
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalInputControl, {
size: "__unstable-large",
label: (0,external_wp_i18n_namespaceObject.__)('Row'),
type: "number",
onChange: value => {
// Don't allow unsetting.
const newRowStart = value === '' ? 1 : parseInt(value, 10);
onChange({
columnStart,
rowStart: newRowStart,
columnSpan,
rowSpan
});
__unstableMarkNextChangeAsNotPersistent();
moveBlocksToPosition([panelId], rootClientId, rootClientId, getNumberOfBlocksBeforeCell(columnStart, newRowStart));
},
value: rowStart !== null && rowStart !== void 0 ? rowStart : 1,
min: 1,
max: rowCount ? rowCount - (rowSpan !== null && rowSpan !== void 0 ? rowSpan : 1) + 1 : undefined
})
})]
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/dimensions-tool/aspect-ratio-tool.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
*/
/**
* @callback AspectRatioToolPropsOnChange
* @param {string} [value] New aspect ratio value.
* @return {void} No return.
*/
/**
* @typedef {Object} AspectRatioToolProps
* @property {string} [panelId] ID of the panel this tool is associated with.
* @property {string} [value] Current aspect ratio value.
* @property {AspectRatioToolPropsOnChange} [onChange] Callback to update the aspect ratio value.
* @property {SelectControlProps[]} [options] Aspect ratio options.
* @property {string} [defaultValue] Default aspect ratio value.
* @property {boolean} [isShownByDefault] Whether the tool is shown by default.
*/
function AspectRatioTool({
panelId,
value,
onChange = () => {},
options,
defaultValue = 'auto',
hasValue,
isShownByDefault = true
}) {
// Match the CSS default so if the value is used directly in CSS it will look correct in the control.
const displayValue = value !== null && value !== void 0 ? value : 'auto';
const [defaultRatios, themeRatios, showDefaultRatios] = use_settings_useSettings('dimensions.aspectRatios.default', 'dimensions.aspectRatios.theme', 'dimensions.defaultAspectRatios');
const themeOptions = themeRatios?.map(({
name,
ratio
}) => ({
label: name,
value: ratio
}));
const defaultOptions = defaultRatios?.map(({
name,
ratio
}) => ({
label: name,
value: ratio
}));
const aspectRatioOptions = [{
label: (0,external_wp_i18n_namespaceObject._x)('Original', 'Aspect ratio option for dimensions control'),
value: 'auto'
}, ...(showDefaultRatios ? defaultOptions : []), ...(themeOptions ? themeOptions : []), {
label: (0,external_wp_i18n_namespaceObject._x)('Custom', 'Aspect ratio option for dimensions control'),
value: 'custom',
disabled: true,
hidden: true
}];
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
hasValue: hasValue ? hasValue : () => displayValue !== defaultValue,
label: (0,external_wp_i18n_namespaceObject.__)('Aspect ratio'),
onDeselect: () => onChange(undefined),
isShownByDefault: isShownByDefault,
panelId: panelId,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.SelectControl, {
label: (0,external_wp_i18n_namespaceObject.__)('Aspect ratio'),
value: displayValue,
options: options !== null && options !== void 0 ? options : aspectRatioOptions,
onChange: onChange,
size: "__unstable-large",
__nextHasNoMarginBottom: true
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/global-styles/dimensions-panel.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const AXIAL_SIDES = ['horizontal', 'vertical'];
function useHasDimensionsPanel(settings) {
const hasContentSize = useHasContentSize(settings);
const hasWideSize = useHasWideSize(settings);
const hasPadding = useHasPadding(settings);
const hasMargin = useHasMargin(settings);
const hasGap = useHasGap(settings);
const hasMinHeight = useHasMinHeight(settings);
const hasAspectRatio = useHasAspectRatio(settings);
const hasChildLayout = useHasChildLayout(settings);
return external_wp_element_namespaceObject.Platform.OS === 'web' && (hasContentSize || hasWideSize || hasPadding || hasMargin || hasGap || hasMinHeight || hasAspectRatio || hasChildLayout);
}
function useHasContentSize(settings) {
return settings?.layout?.contentSize;
}
function useHasWideSize(settings) {
return settings?.layout?.wideSize;
}
function useHasPadding(settings) {
return settings?.spacing?.padding;
}
function useHasMargin(settings) {
return settings?.spacing?.margin;
}
function useHasGap(settings) {
return settings?.spacing?.blockGap;
}
function useHasMinHeight(settings) {
return settings?.dimensions?.minHeight;
}
function useHasAspectRatio(settings) {
return settings?.dimensions?.aspectRatio;
}
function useHasChildLayout(settings) {
var _settings$parentLayou;
const {
type: parentLayoutType = 'default',
default: {
type: defaultParentLayoutType = 'default'
} = {},
allowSizingOnChildren = false
} = (_settings$parentLayou = settings?.parentLayout) !== null && _settings$parentLayou !== void 0 ? _settings$parentLayou : {};
const support = (defaultParentLayoutType === 'flex' || parentLayoutType === 'flex' || defaultParentLayoutType === 'grid' || parentLayoutType === 'grid') && allowSizingOnChildren;
return !!settings?.layout && support;
}
function useHasSpacingPresets(settings) {
const {
defaultSpacingSizes,
spacingSizes
} = settings?.spacing || {};
return defaultSpacingSizes !== false && spacingSizes?.default?.length > 0 || spacingSizes?.theme?.length > 0 || spacingSizes?.custom?.length > 0;
}
function filterValuesBySides(values, sides) {
// If no custom side configuration, all sides are opted into by default.
// Without any values, we have nothing to filter either.
if (!sides || !values) {
return values;
}
// Only include sides opted into within filtered values.
const filteredValues = {};
sides.forEach(side => {
if (side === 'vertical') {
filteredValues.top = values.top;
filteredValues.bottom = values.bottom;
}
if (side === 'horizontal') {
filteredValues.left = values.left;
filteredValues.right = values.right;
}
filteredValues[side] = values?.[side];
});
return filteredValues;
}
function splitStyleValue(value) {
// Check for shorthand value (a string value).
if (value && typeof value === 'string') {
// Convert to value for individual sides for BoxControl.
return {
top: value,
right: value,
bottom: value,
left: value
};
}
return value;
}
function splitGapValue(value) {
// Check for shorthand value (a string value).
if (value && typeof value === 'string') {
// If the value is a string, treat it as a single side (top) for the spacing controls.
return {
top: value
};
}
if (value) {
return {
...value,
right: value?.left,
bottom: value?.top
};
}
return value;
}
function DimensionsToolsPanel({
resetAllFilter,
onChange,
value,
panelId,
children
}) {
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
const resetAll = () => {
const updatedValue = resetAllFilter(value);
onChange(updatedValue);
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanel, {
label: (0,external_wp_i18n_namespaceObject.__)('Dimensions'),
resetAll: resetAll,
panelId: panelId,
dropdownMenuProps: dropdownMenuProps,
children: children
});
}
const dimensions_panel_DEFAULT_CONTROLS = {
contentSize: true,
wideSize: true,
padding: true,
margin: true,
blockGap: true,
minHeight: true,
aspectRatio: true,
childLayout: true
};
function DimensionsPanel({
as: Wrapper = DimensionsToolsPanel,
value,
onChange,
inheritedValue = value,
settings,
panelId,
defaultControls = dimensions_panel_DEFAULT_CONTROLS,
onVisualize = () => {},
// Special case because the layout controls are not part of the dimensions panel
// in global styles but not in block inspector.
includeLayoutControls = false
}) {
var _defaultControls$cont, _defaultControls$wide, _defaultControls$padd, _defaultControls$marg, _defaultControls$bloc, _defaultControls$chil, _defaultControls$minH, _defaultControls$aspe;
const {
dimensions,
spacing
} = settings;
const decodeValue = rawValue => {
if (rawValue && typeof rawValue === 'object') {
return Object.keys(rawValue).reduce((acc, key) => {
acc[key] = getValueFromVariable({
settings: {
dimensions,
spacing
}
}, '', rawValue[key]);
return acc;
}, {});
}
return getValueFromVariable({
settings: {
dimensions,
spacing
}
}, '', rawValue);
};
const showSpacingPresetsControl = useHasSpacingPresets(settings);
const units = (0,external_wp_components_namespaceObject.__experimentalUseCustomUnits)({
availableUnits: settings?.spacing?.units || ['%', 'px', 'em', 'rem', 'vw']
});
//Minimum Margin Value
const minimumMargin = -Infinity;
const [minMarginValue, setMinMarginValue] = (0,external_wp_element_namespaceObject.useState)(minimumMargin);
// Content Width
const showContentSizeControl = useHasContentSize(settings) && includeLayoutControls;
const contentSizeValue = decodeValue(inheritedValue?.layout?.contentSize);
const setContentSizeValue = newValue => {
onChange(setImmutably(value, ['layout', 'contentSize'], newValue || undefined));
};
const hasUserSetContentSizeValue = () => !!value?.layout?.contentSize;
const resetContentSizeValue = () => setContentSizeValue(undefined);
// Wide Width
const showWideSizeControl = useHasWideSize(settings) && includeLayoutControls;
const wideSizeValue = decodeValue(inheritedValue?.layout?.wideSize);
const setWideSizeValue = newValue => {
onChange(setImmutably(value, ['layout', 'wideSize'], newValue || undefined));
};
const hasUserSetWideSizeValue = () => !!value?.layout?.wideSize;
const resetWideSizeValue = () => setWideSizeValue(undefined);
// Padding
const showPaddingControl = useHasPadding(settings);
const rawPadding = decodeValue(inheritedValue?.spacing?.padding);
const paddingValues = splitStyleValue(rawPadding);
const paddingSides = Array.isArray(settings?.spacing?.padding) ? settings?.spacing?.padding : settings?.spacing?.padding?.sides;
const isAxialPadding = paddingSides && paddingSides.some(side => AXIAL_SIDES.includes(side));
const setPaddingValues = newPaddingValues => {
const padding = filterValuesBySides(newPaddingValues, paddingSides);
onChange(setImmutably(value, ['spacing', 'padding'], padding));
};
const hasPaddingValue = () => !!value?.spacing?.padding && Object.keys(value?.spacing?.padding).length;
const resetPaddingValue = () => setPaddingValues(undefined);
const onMouseOverPadding = () => onVisualize('padding');
// Margin
const showMarginControl = useHasMargin(settings);
const rawMargin = decodeValue(inheritedValue?.spacing?.margin);
const marginValues = splitStyleValue(rawMargin);
const marginSides = Array.isArray(settings?.spacing?.margin) ? settings?.spacing?.margin : settings?.spacing?.margin?.sides;
const isAxialMargin = marginSides && marginSides.some(side => AXIAL_SIDES.includes(side));
const setMarginValues = newMarginValues => {
const margin = filterValuesBySides(newMarginValues, marginSides);
onChange(setImmutably(value, ['spacing', 'margin'], margin));
};
const hasMarginValue = () => !!value?.spacing?.margin && Object.keys(value?.spacing?.margin).length;
const resetMarginValue = () => setMarginValues(undefined);
const onMouseOverMargin = () => onVisualize('margin');
// Block Gap
const showGapControl = useHasGap(settings);
const gapValue = decodeValue(inheritedValue?.spacing?.blockGap);
const gapValues = splitGapValue(gapValue);
const gapSides = Array.isArray(settings?.spacing?.blockGap) ? settings?.spacing?.blockGap : settings?.spacing?.blockGap?.sides;
const isAxialGap = gapSides && gapSides.some(side => AXIAL_SIDES.includes(side));
const setGapValue = newGapValue => {
onChange(setImmutably(value, ['spacing', 'blockGap'], newGapValue));
};
const setGapValues = nextBoxGapValue => {
if (!nextBoxGapValue) {
setGapValue(null);
}
// If axial gap is not enabled, treat the 'top' value as the shorthand gap value.
if (!isAxialGap && nextBoxGapValue?.hasOwnProperty('top')) {
setGapValue(nextBoxGapValue.top);
} else {
setGapValue({
top: nextBoxGapValue?.top,
left: nextBoxGapValue?.left
});
}
};
const resetGapValue = () => setGapValue(undefined);
const hasGapValue = () => !!value?.spacing?.blockGap;
// Min Height
const showMinHeightControl = useHasMinHeight(settings);
const minHeightValue = decodeValue(inheritedValue?.dimensions?.minHeight);
const setMinHeightValue = newValue => {
const tempValue = setImmutably(value, ['dimensions', 'minHeight'], newValue);
// Apply min-height, while removing any applied aspect ratio.
onChange(setImmutably(tempValue, ['dimensions', 'aspectRatio'], undefined));
};
const resetMinHeightValue = () => {
setMinHeightValue(undefined);
};
const hasMinHeightValue = () => !!value?.dimensions?.minHeight;
// Aspect Ratio
const showAspectRatioControl = useHasAspectRatio(settings);
const aspectRatioValue = decodeValue(inheritedValue?.dimensions?.aspectRatio);
const setAspectRatioValue = newValue => {
const tempValue = setImmutably(value, ['dimensions', 'aspectRatio'], newValue);
// Apply aspect-ratio, while removing any applied min-height.
onChange(setImmutably(tempValue, ['dimensions', 'minHeight'], undefined));
};
const hasAspectRatioValue = () => !!value?.dimensions?.aspectRatio;
// Child Layout
const showChildLayoutControl = useHasChildLayout(settings);
const childLayout = inheritedValue?.layout;
const setChildLayout = newChildLayout => {
onChange({
...value,
layout: {
...newChildLayout
}
});
};
const resetAllFilter = (0,external_wp_element_namespaceObject.useCallback)(previousValue => {
return {
...previousValue,
layout: utils_cleanEmptyObject({
...previousValue?.layout,
contentSize: undefined,
wideSize: undefined,
selfStretch: undefined,
flexSize: undefined,
columnStart: undefined,
rowStart: undefined,
columnSpan: undefined,
rowSpan: undefined
}),
spacing: {
...previousValue?.spacing,
padding: undefined,
margin: undefined,
blockGap: undefined
},
dimensions: {
...previousValue?.dimensions,
minHeight: undefined,
aspectRatio: undefined
}
};
}, []);
const onMouseLeaveControls = () => onVisualize(false);
const inputProps = {
min: minMarginValue,
onDragStart: () => {
//Reset to 0 in case the value was negative.
setMinMarginValue(0);
},
onDragEnd: () => {
setMinMarginValue(minimumMargin);
}
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Wrapper, {
resetAllFilter: resetAllFilter,
value: value,
onChange: onChange,
panelId: panelId,
children: [(showContentSizeControl || showWideSizeControl) && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
className: "span-columns",
children: (0,external_wp_i18n_namespaceObject.__)('Set the width of the main content area.')
}), showContentSizeControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
label: (0,external_wp_i18n_namespaceObject.__)('Content width'),
hasValue: hasUserSetContentSizeValue,
onDeselect: resetContentSizeValue,
isShownByDefault: (_defaultControls$cont = defaultControls.contentSize) !== null && _defaultControls$cont !== void 0 ? _defaultControls$cont : dimensions_panel_DEFAULT_CONTROLS.contentSize,
panelId: panelId,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalUnitControl, {
__next40pxDefaultSize: true,
label: (0,external_wp_i18n_namespaceObject.__)('Content width'),
labelPosition: "top",
value: contentSizeValue || '',
onChange: nextContentSize => {
setContentSizeValue(nextContentSize);
},
units: units,
prefix: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalInputControlPrefixWrapper, {
variant: "icon",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
icon: align_none
})
})
})
}), showWideSizeControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
label: (0,external_wp_i18n_namespaceObject.__)('Wide width'),
hasValue: hasUserSetWideSizeValue,
onDeselect: resetWideSizeValue,
isShownByDefault: (_defaultControls$wide = defaultControls.wideSize) !== null && _defaultControls$wide !== void 0 ? _defaultControls$wide : dimensions_panel_DEFAULT_CONTROLS.wideSize,
panelId: panelId,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalUnitControl, {
__next40pxDefaultSize: true,
label: (0,external_wp_i18n_namespaceObject.__)('Wide width'),
labelPosition: "top",
value: wideSizeValue || '',
onChange: nextWideSize => {
setWideSizeValue(nextWideSize);
},
units: units,
prefix: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalInputControlPrefixWrapper, {
variant: "icon",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
icon: stretch_wide
})
})
})
}), showPaddingControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
hasValue: hasPaddingValue,
label: (0,external_wp_i18n_namespaceObject.__)('Padding'),
onDeselect: resetPaddingValue,
isShownByDefault: (_defaultControls$padd = defaultControls.padding) !== null && _defaultControls$padd !== void 0 ? _defaultControls$padd : dimensions_panel_DEFAULT_CONTROLS.padding,
className: dist_clsx({
'tools-panel-item-spacing': showSpacingPresetsControl
}),
panelId: panelId,
children: [!showSpacingPresetsControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalBoxControl, {
__next40pxDefaultSize: true,
values: paddingValues,
onChange: setPaddingValues,
label: (0,external_wp_i18n_namespaceObject.__)('Padding'),
sides: paddingSides,
units: units,
allowReset: false,
splitOnAxis: isAxialPadding,
onMouseOver: onMouseOverPadding,
onMouseOut: onMouseLeaveControls
}), showSpacingPresetsControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SpacingSizesControl, {
values: paddingValues,
onChange: setPaddingValues,
label: (0,external_wp_i18n_namespaceObject.__)('Padding'),
sides: paddingSides,
units: units,
allowReset: false,
onMouseOver: onMouseOverPadding,
onMouseOut: onMouseLeaveControls
})]
}), showMarginControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
hasValue: hasMarginValue,
label: (0,external_wp_i18n_namespaceObject.__)('Margin'),
onDeselect: resetMarginValue,
isShownByDefault: (_defaultControls$marg = defaultControls.margin) !== null && _defaultControls$marg !== void 0 ? _defaultControls$marg : dimensions_panel_DEFAULT_CONTROLS.margin,
className: dist_clsx({
'tools-panel-item-spacing': showSpacingPresetsControl
}),
panelId: panelId,
children: [!showSpacingPresetsControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalBoxControl, {
__next40pxDefaultSize: true,
values: marginValues,
onChange: setMarginValues,
inputProps: inputProps,
label: (0,external_wp_i18n_namespaceObject.__)('Margin'),
sides: marginSides,
units: units,
allowReset: false,
splitOnAxis: isAxialMargin,
onMouseOver: onMouseOverMargin,
onMouseOut: onMouseLeaveControls
}), showSpacingPresetsControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SpacingSizesControl, {
values: marginValues,
onChange: setMarginValues,
minimumCustomValue: -Infinity,
label: (0,external_wp_i18n_namespaceObject.__)('Margin'),
sides: marginSides,
units: units,
allowReset: false,
onMouseOver: onMouseOverMargin,
onMouseOut: onMouseLeaveControls
})]
}), showGapControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
hasValue: hasGapValue,
label: (0,external_wp_i18n_namespaceObject.__)('Block spacing'),
onDeselect: resetGapValue,
isShownByDefault: (_defaultControls$bloc = defaultControls.blockGap) !== null && _defaultControls$bloc !== void 0 ? _defaultControls$bloc : dimensions_panel_DEFAULT_CONTROLS.blockGap,
className: dist_clsx({
'tools-panel-item-spacing': showSpacingPresetsControl,
'single-column':
// If UnitControl is used, should be single-column.
!showSpacingPresetsControl && !isAxialGap
}),
panelId: panelId,
children: [!showSpacingPresetsControl && (isAxialGap ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalBoxControl, {
__next40pxDefaultSize: true,
label: (0,external_wp_i18n_namespaceObject.__)('Block spacing'),
min: 0,
onChange: setGapValues,
units: units,
sides: gapSides,
values: gapValues,
allowReset: false,
splitOnAxis: isAxialGap
}) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalUnitControl, {
__next40pxDefaultSize: true,
label: (0,external_wp_i18n_namespaceObject.__)('Block spacing'),
min: 0,
onChange: setGapValue,
units: units,
value: gapValue
})), showSpacingPresetsControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SpacingSizesControl, {
label: (0,external_wp_i18n_namespaceObject.__)('Block spacing'),
min: 0,
onChange: setGapValues,
showSideInLabel: false,
sides: isAxialGap ? gapSides : ['top'] // Use 'top' as the shorthand property in non-axial configurations.
,
values: gapValues,
allowReset: false
})]
}), showChildLayoutControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ChildLayoutControl, {
value: childLayout,
onChange: setChildLayout,
parentLayout: settings?.parentLayout,
panelId: panelId,
isShownByDefault: (_defaultControls$chil = defaultControls.childLayout) !== null && _defaultControls$chil !== void 0 ? _defaultControls$chil : dimensions_panel_DEFAULT_CONTROLS.childLayout
}), showMinHeightControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
hasValue: hasMinHeightValue,
label: (0,external_wp_i18n_namespaceObject.__)('Minimum height'),
onDeselect: resetMinHeightValue,
isShownByDefault: (_defaultControls$minH = defaultControls.minHeight) !== null && _defaultControls$minH !== void 0 ? _defaultControls$minH : dimensions_panel_DEFAULT_CONTROLS.minHeight,
panelId: panelId,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(HeightControl, {
label: (0,external_wp_i18n_namespaceObject.__)('Minimum height'),
value: minHeightValue,
onChange: setMinHeightValue
})
}), showAspectRatioControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AspectRatioTool, {
hasValue: hasAspectRatioValue,
value: aspectRatioValue,
onChange: setAspectRatioValue,
panelId: panelId,
isShownByDefault: (_defaultControls$aspe = defaultControls.aspectRatio) !== null && _defaultControls$aspe !== void 0 ? _defaultControls$aspe : dimensions_panel_DEFAULT_CONTROLS.aspectRatio
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-popover/use-popover-scroll.js
/**
* WordPress dependencies
*/
/**
* Allow scrolling "through" popovers over the canvas. This is only called for
* as long as the pointer is over a popover. Do not use React events because it
* will bubble through portals.
*
* @param {Object} scrollableRef
*/
function usePopoverScroll(scrollableRef) {
return (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
if (!scrollableRef) {
return;
}
function onWheel(event) {
const {
deltaX,
deltaY
} = event;
scrollableRef.current.scrollBy(deltaX, deltaY);
}
// Tell the browser that we do not call event.preventDefault
// See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners
const options = {
passive: true
};
node.addEventListener('wheel', onWheel, options);
return () => {
node.removeEventListener('wheel', onWheel, options);
};
}, [scrollableRef]);
}
/* harmony default export */ const use_popover_scroll = (usePopoverScroll);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/utils/dom.js
const BLOCK_SELECTOR = '.block-editor-block-list__block';
const APPENDER_SELECTOR = '.block-list-appender';
const BLOCK_APPENDER_CLASS = '.block-editor-button-block-appender';
/**
* Returns true if two elements are contained within the same block.
*
* @param {Element} a First element.
* @param {Element} b Second element.
*
* @return {boolean} Whether elements are in the same block.
*/
function isInSameBlock(a, b) {
return a.closest(BLOCK_SELECTOR) === b.closest(BLOCK_SELECTOR);
}
/**
* Returns true if an element is considered part of the block and not its inner
* blocks or appender.
*
* @param {Element} blockElement Block container element.
* @param {Element} element Element.
*
* @return {boolean} Whether an element is considered part of the block and not
* its inner blocks or appender.
*/
function isInsideRootBlock(blockElement, element) {
const parentBlock = element.closest([BLOCK_SELECTOR, APPENDER_SELECTOR, BLOCK_APPENDER_CLASS].join(','));
return parentBlock === blockElement;
}
/**
* Finds the block client ID given any DOM node inside the block.
*
* @param {Node?} node DOM node.
*
* @return {string|undefined} Client ID or undefined if the node is not part of
* a block.
*/
function getBlockClientId(node) {
while (node && node.nodeType !== node.ELEMENT_NODE) {
node = node.parentNode;
}
if (!node) {
return;
}
const elementNode = /** @type {Element} */node;
const blockNode = elementNode.closest(BLOCK_SELECTOR);
if (!blockNode) {
return;
}
return blockNode.id.slice('block-'.length);
}
/**
* Calculates the union of two rectangles.
*
* @param {DOMRect} rect1 First rectangle.
* @param {DOMRect} rect2 Second rectangle.
* @return {DOMRect} Union of the two rectangles.
*/
function rectUnion(rect1, rect2) {
const left = Math.min(rect1.left, rect2.left);
const right = Math.max(rect1.right, rect2.right);
const bottom = Math.max(rect1.bottom, rect2.bottom);
const top = Math.min(rect1.top, rect2.top);
return new window.DOMRectReadOnly(left, top, right - left, bottom - top);
}
/**
* Returns whether an element is visible.
*
* @param {Element} element Element.
* @return {boolean} Whether the element is visible.
*/
function isElementVisible(element) {
const viewport = element.ownerDocument.defaultView;
if (!viewport) {
return false;
}
// Check for <VisuallyHidden> component.
if (element.classList.contains('components-visually-hidden')) {
return false;
}
const bounds = element.getBoundingClientRect();
if (bounds.width === 0 || bounds.height === 0) {
return false;
}
// Older browsers, e.g. Safari < 17.4 may not support the `checkVisibility` method.
if (element.checkVisibility) {
return element.checkVisibility?.({
opacityProperty: true,
contentVisibilityAuto: true,
visibilityProperty: true
});
}
const style = viewport.getComputedStyle(element);
if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') {
return false;
}
return true;
}
/**
* Checks if the element is scrollable.
*
* @param {Element} element Element.
* @return {boolean} True if the element is scrollable.
*/
function isScrollable(element) {
const style = window.getComputedStyle(element);
return style.overflowX === 'auto' || style.overflowX === 'scroll' || style.overflowY === 'auto' || style.overflowY === 'scroll';
}
const WITH_OVERFLOW_ELEMENT_BLOCKS = ['core/navigation'];
/**
* Returns the bounding rectangle of an element, with special handling for blocks
* that have visible overflowing children (defined in WITH_OVERFLOW_ELEMENT_BLOCKS).
*
* For blocks like Navigation that can have overflowing elements (e.g. submenus),
* this function calculates the combined bounds of both the parent and its visible
* children. The returned rect may extend beyond the viewport.
* The returned rect represents the full extent of the element and its visible
* children, which may extend beyond the viewport.
*
* @param {Element} element Element.
* @return {DOMRect} Bounding client rect of the element and its visible children.
*/
function getElementBounds(element) {
const viewport = element.ownerDocument.defaultView;
if (!viewport) {
return new window.DOMRectReadOnly();
}
let bounds = element.getBoundingClientRect();
const dataType = element.getAttribute('data-type');
/*
* For blocks with overflowing elements (like Navigation), include the bounds
* of visible children that extend beyond the parent container.
*/
if (dataType && WITH_OVERFLOW_ELEMENT_BLOCKS.includes(dataType)) {
const stack = [element];
let currentElement;
while (currentElement = stack.pop()) {
// Children won’t affect bounds unless the element is not scrollable.
if (!isScrollable(currentElement)) {
for (const child of currentElement.children) {
if (isElementVisible(child)) {
const childBounds = child.getBoundingClientRect();
bounds = rectUnion(bounds, childBounds);
stack.push(child);
}
}
}
}
}
/*
* Take into account the outer horizontal limits of the container in which
* an element is supposed to be "visible". For example, if an element is
* positioned -10px to the left of the window x value (0), this function
* discounts the negative overhang because it's not visible and therefore
* not to be counted in the visibility calculations. Top and bottom values
* are not accounted for to accommodate vertical scroll.
*/
const left = Math.max(bounds.left, 0);
const right = Math.min(bounds.right, viewport.innerWidth);
bounds = new window.DOMRectReadOnly(left, bounds.top, right - left, bounds.height);
return bounds;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-popover/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER;
function BlockPopover({
clientId,
bottomClientId,
children,
__unstablePopoverSlot,
__unstableContentRef,
shift = true,
...props
}, ref) {
const selectedElement = useBlockElement(clientId);
const lastSelectedElement = useBlockElement(bottomClientId !== null && bottomClientId !== void 0 ? bottomClientId : clientId);
const mergedRefs = (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, use_popover_scroll(__unstableContentRef)]);
const [popoverDimensionsRecomputeCounter, forceRecomputePopoverDimensions] = (0,external_wp_element_namespaceObject.useReducer)(
// Module is there to make sure that the counter doesn't overflow.
s => (s + 1) % MAX_POPOVER_RECOMPUTE_COUNTER, 0);
// When blocks are moved up/down, they are animated to their new position by
// updating the `transform` property manually (i.e. without using CSS
// transitions or animations). The animation, which can also scroll the block
// editor, can sometimes cause the position of the Popover to get out of sync.
// A MutationObserver is therefore used to make sure that changes to the
// selectedElement's attribute (i.e. `transform`) can be tracked and used to
// trigger the Popover to rerender.
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
if (!selectedElement) {
return;
}
const observer = new window.MutationObserver(forceRecomputePopoverDimensions);
observer.observe(selectedElement, {
attributes: true
});
return () => {
observer.disconnect();
};
}, [selectedElement]);
const popoverAnchor = (0,external_wp_element_namespaceObject.useMemo)(() => {
if (
// popoverDimensionsRecomputeCounter is by definition always equal or greater
// than 0. This check is only there to satisfy the correctness of the
// exhaustive-deps rule for the `useMemo` hook.
popoverDimensionsRecomputeCounter < 0 || !selectedElement || bottomClientId && !lastSelectedElement) {
return undefined;
}
return {
getBoundingClientRect() {
return lastSelectedElement ? rectUnion(getElementBounds(selectedElement), getElementBounds(lastSelectedElement)) : getElementBounds(selectedElement);
},
contextElement: selectedElement
};
}, [popoverDimensionsRecomputeCounter, selectedElement, bottomClientId, lastSelectedElement]);
if (!selectedElement || bottomClientId && !lastSelectedElement) {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Popover, {
ref: mergedRefs,
animate: false,
focusOnMount: false,
anchor: popoverAnchor
// Render in the old slot if needed for backward compatibility,
// otherwise render in place (not in the default popover slot).
,
__unstableSlotName: __unstablePopoverSlot,
inline: !__unstablePopoverSlot,
placement: "top-start",
resize: false,
flip: false,
shift: shift,
...props,
className: dist_clsx('block-editor-block-popover', props.className),
variant: "unstyled",
children: children
});
}
const PrivateBlockPopover = (0,external_wp_element_namespaceObject.forwardRef)(BlockPopover);
const PublicBlockPopover = ({
clientId,
bottomClientId,
children,
...props
}, ref) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PrivateBlockPopover, {
...props,
bottomClientId: bottomClientId,
clientId: clientId,
__unstableContentRef: undefined,
__unstablePopoverSlot: undefined,
ref: ref,
children: children
});
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-popover/README.md
*/
/* harmony default export */ const block_popover = ((0,external_wp_element_namespaceObject.forwardRef)(PublicBlockPopover));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-popover/cover.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockPopoverCover({
clientId,
bottomClientId,
children,
shift = false,
additionalStyles,
...props
}, ref) {
var _bottomClientId;
(_bottomClientId = bottomClientId) !== null && _bottomClientId !== void 0 ? _bottomClientId : bottomClientId = clientId;
const selectedElement = useBlockElement(clientId);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PrivateBlockPopover, {
ref: ref,
clientId: clientId,
bottomClientId: bottomClientId,
shift: shift,
...props,
children: selectedElement && clientId === bottomClientId ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CoverContainer, {
selectedElement: selectedElement,
additionalStyles: additionalStyles,
children: children
}) : children
});
}
function CoverContainer({
selectedElement,
additionalStyles = {},
children
}) {
const [width, setWidth] = (0,external_wp_element_namespaceObject.useState)(selectedElement.offsetWidth);
const [height, setHeight] = (0,external_wp_element_namespaceObject.useState)(selectedElement.offsetHeight);
(0,external_wp_element_namespaceObject.useEffect)(() => {
const observer = new window.ResizeObserver(() => {
setWidth(selectedElement.offsetWidth);
setHeight(selectedElement.offsetHeight);
});
observer.observe(selectedElement, {
box: 'border-box'
});
return () => observer.disconnect();
}, [selectedElement]);
const style = (0,external_wp_element_namespaceObject.useMemo)(() => {
return {
position: 'absolute',
width,
height,
...additionalStyles
};
}, [width, height, additionalStyles]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
style: style,
children: children
});
}
/* harmony default export */ const cover = ((0,external_wp_element_namespaceObject.forwardRef)(BlockPopoverCover));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/spacing-visualizer.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function SpacingVisualizer({
clientId,
value,
computeStyle,
forceShow
}) {
const blockElement = useBlockElement(clientId);
const [style, updateStyle] = (0,external_wp_element_namespaceObject.useReducer)(() => computeStyle(blockElement));
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
if (!blockElement) {
return;
}
// It's not sufficient to read the computed spacing value when value.spacing changes as
// useEffect may run before the browser recomputes CSS. We therefore combine
// useLayoutEffect and two rAF calls to ensure that we read the spacing after the current
// paint but before the next paint.
// See https://github.com/WordPress/gutenberg/pull/59227.
window.requestAnimationFrame(() => window.requestAnimationFrame(updateStyle));
}, [blockElement, value]);
const previousValueRef = (0,external_wp_element_namespaceObject.useRef)(value);
const [isActive, setIsActive] = (0,external_wp_element_namespaceObject.useState)(false);
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (external_wp_isShallowEqual_default()(value, previousValueRef.current) || forceShow) {
return;
}
setIsActive(true);
previousValueRef.current = value;
const timeout = setTimeout(() => {
setIsActive(false);
}, 400);
return () => {
setIsActive(false);
clearTimeout(timeout);
};
}, [value, forceShow]);
if (!isActive && !forceShow) {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(cover, {
clientId: clientId,
__unstablePopoverSlot: "block-toolbar",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor__spacing-visualizer",
style: style
})
});
}
function getComputedCSS(element, property) {
return element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue(property);
}
function MarginVisualizer({
clientId,
value,
forceShow
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SpacingVisualizer, {
clientId: clientId,
value: value?.spacing?.margin,
computeStyle: blockElement => {
const top = getComputedCSS(blockElement, 'margin-top');
const right = getComputedCSS(blockElement, 'margin-right');
const bottom = getComputedCSS(blockElement, 'margin-bottom');
const left = getComputedCSS(blockElement, 'margin-left');
return {
borderTopWidth: top,
borderRightWidth: right,
borderBottomWidth: bottom,
borderLeftWidth: left,
top: top ? `-${top}` : 0,
right: right ? `-${right}` : 0,
bottom: bottom ? `-${bottom}` : 0,
left: left ? `-${left}` : 0
};
},
forceShow: forceShow
});
}
function PaddingVisualizer({
clientId,
value,
forceShow
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SpacingVisualizer, {
clientId: clientId,
value: value?.spacing?.padding,
computeStyle: blockElement => ({
borderTopWidth: getComputedCSS(blockElement, 'padding-top'),
borderRightWidth: getComputedCSS(blockElement, 'padding-right'),
borderBottomWidth: getComputedCSS(blockElement, 'padding-bottom'),
borderLeftWidth: getComputedCSS(blockElement, 'padding-left')
}),
forceShow: forceShow
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/dimensions.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const DIMENSIONS_SUPPORT_KEY = 'dimensions';
const SPACING_SUPPORT_KEY = 'spacing';
const dimensions_ALL_SIDES = (/* unused pure expression or super */ null && (['top', 'right', 'bottom', 'left']));
const dimensions_AXIAL_SIDES = (/* unused pure expression or super */ null && (['vertical', 'horizontal']));
function useVisualizer() {
const [property, setProperty] = (0,external_wp_element_namespaceObject.useState)(false);
const {
hideBlockInterface,
showBlockInterface
} = unlock((0,external_wp_data_namespaceObject.useDispatch)(store));
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (!property) {
showBlockInterface();
} else {
hideBlockInterface();
}
}, [property, showBlockInterface, hideBlockInterface]);
return [property, setProperty];
}
function DimensionsInspectorControl({
children,
resetAllFilter
}) {
const attributesResetAllFilter = (0,external_wp_element_namespaceObject.useCallback)(attributes => {
const existingStyle = attributes.style;
const updatedStyle = resetAllFilter(existingStyle);
return {
...attributes,
style: updatedStyle
};
}, [resetAllFilter]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls, {
group: "dimensions",
resetAllFilter: attributesResetAllFilter,
children: children
});
}
function dimensions_DimensionsPanel({
clientId,
name,
setAttributes,
settings
}) {
const isEnabled = useHasDimensionsPanel(settings);
const value = (0,external_wp_data_namespaceObject.useSelect)(select => select(store).getBlockAttributes(clientId)?.style, [clientId]);
const [visualizedProperty, setVisualizedProperty] = useVisualizer();
const onChange = newStyle => {
setAttributes({
style: utils_cleanEmptyObject(newStyle)
});
};
if (!isEnabled) {
return null;
}
const defaultDimensionsControls = (0,external_wp_blocks_namespaceObject.getBlockSupport)(name, [DIMENSIONS_SUPPORT_KEY, '__experimentalDefaultControls']);
const defaultSpacingControls = (0,external_wp_blocks_namespaceObject.getBlockSupport)(name, [SPACING_SUPPORT_KEY, '__experimentalDefaultControls']);
const defaultControls = {
...defaultDimensionsControls,
...defaultSpacingControls
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DimensionsPanel, {
as: DimensionsInspectorControl,
panelId: clientId,
settings: settings,
value: value,
onChange: onChange,
defaultControls: defaultControls,
onVisualize: setVisualizedProperty
}), !!settings?.spacing?.padding && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PaddingVisualizer, {
forceShow: visualizedProperty === 'padding',
clientId: clientId,
value: value
}), !!settings?.spacing?.margin && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MarginVisualizer, {
forceShow: visualizedProperty === 'margin',
clientId: clientId,
value: value
})]
});
}
/**
* Determine whether there is block support for dimensions.
*
* @param {string} blockName Block name.
* @param {string} feature Background image feature to check for.
*
* @return {boolean} Whether there is support.
*/
function hasDimensionsSupport(blockName, feature = 'any') {
if (external_wp_element_namespaceObject.Platform.OS !== 'web') {
return false;
}
const support = (0,external_wp_blocks_namespaceObject.getBlockSupport)(blockName, DIMENSIONS_SUPPORT_KEY);
if (support === true) {
return true;
}
if (feature === 'any') {
return !!(support?.aspectRatio || !!support?.minHeight);
}
return !!support?.[feature];
}
/* harmony default export */ const dimensions = ({
useBlockProps: dimensions_useBlockProps,
attributeKeys: ['minHeight', 'style'],
hasSupport(name) {
return hasDimensionsSupport(name, 'aspectRatio');
}
});
function dimensions_useBlockProps({
name,
minHeight,
style
}) {
if (!hasDimensionsSupport(name, 'aspectRatio') || shouldSkipSerialization(name, DIMENSIONS_SUPPORT_KEY, 'aspectRatio')) {
return {};
}
const className = dist_clsx({
'has-aspect-ratio': !!style?.dimensions?.aspectRatio
});
// Allow dimensions-based inline style overrides to override any global styles rules that
// might be set for the block, and therefore affect the display of the aspect ratio.
const inlineStyleOverrides = {};
// Apply rules to unset incompatible styles.
// Note that a set `aspectRatio` will win out if both an aspect ratio and a minHeight are set.
// This is because the aspect ratio is a newer block support, so (in theory) any aspect ratio
// that is set should be intentional and should override any existing minHeight. The Cover block
// and dimensions controls have logic that will manually clear the aspect ratio if a minHeight
// is set.
if (style?.dimensions?.aspectRatio) {
// To ensure the aspect ratio does not get overridden by `minHeight` unset any existing rule.
inlineStyleOverrides.minHeight = 'unset';
} else if (minHeight || style?.dimensions?.minHeight) {
// To ensure the minHeight does not get overridden by `aspectRatio` unset any existing rule.
inlineStyleOverrides.aspectRatio = 'unset';
}
return {
className,
style: inlineStyleOverrides
};
}
/**
* @deprecated
*/
function useCustomSides() {
external_wp_deprecated_default()('wp.blockEditor.__experimentalUseCustomSides', {
since: '6.3',
version: '6.4'
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/style.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const styleSupportKeys = [...TYPOGRAPHY_SUPPORT_KEYS, BORDER_SUPPORT_KEY, COLOR_SUPPORT_KEY, DIMENSIONS_SUPPORT_KEY, BACKGROUND_SUPPORT_KEY, SPACING_SUPPORT_KEY, SHADOW_SUPPORT_KEY];
const hasStyleSupport = nameOrType => styleSupportKeys.some(key => (0,external_wp_blocks_namespaceObject.hasBlockSupport)(nameOrType, key));
/**
* Returns the inline styles to add depending on the style object
*
* @param {Object} styles Styles configuration.
*
* @return {Object} Flattened CSS variables declaration.
*/
function getInlineStyles(styles = {}) {
const output = {};
// The goal is to move everything to server side generated engine styles
// This is temporary as we absorb more and more styles into the engine.
(0,external_wp_styleEngine_namespaceObject.getCSSRules)(styles).forEach(rule => {
output[rule.key] = rule.value;
});
return output;
}
/**
* Filters registered block settings, extending attributes to include `style` attribute.
*
* @param {Object} settings Original block settings.
*
* @return {Object} Filtered block settings.
*/
function style_addAttribute(settings) {
if (!hasStyleSupport(settings)) {
return settings;
}
// Allow blocks to specify their own attribute definition with default values if needed.
if (!settings.attributes.style) {
Object.assign(settings.attributes, {
style: {
type: 'object'
}
});
}
return settings;
}
/**
* A dictionary of paths to flag skipping block support serialization as the key,
* with values providing the style paths to be omitted from serialization.
*
* @constant
* @type {Record<string, string[]>}
*/
const skipSerializationPathsEdit = {
[`${BORDER_SUPPORT_KEY}.__experimentalSkipSerialization`]: ['border'],
[`${COLOR_SUPPORT_KEY}.__experimentalSkipSerialization`]: [COLOR_SUPPORT_KEY],
[`${TYPOGRAPHY_SUPPORT_KEY}.__experimentalSkipSerialization`]: [TYPOGRAPHY_SUPPORT_KEY],
[`${DIMENSIONS_SUPPORT_KEY}.__experimentalSkipSerialization`]: [DIMENSIONS_SUPPORT_KEY],
[`${SPACING_SUPPORT_KEY}.__experimentalSkipSerialization`]: [SPACING_SUPPORT_KEY],
[`${SHADOW_SUPPORT_KEY}.__experimentalSkipSerialization`]: [SHADOW_SUPPORT_KEY]
};
/**
* A dictionary of paths to flag skipping block support serialization as the key,
* with values providing the style paths to be omitted from serialization.
*
* Extends the Edit skip paths to enable skipping additional paths in just
* the Save component. This allows a block support to be serialized within the
* editor, while using an alternate approach, such as server-side rendering, when
* the support is saved.
*
* @constant
* @type {Record<string, string[]>}
*/
const skipSerializationPathsSave = {
...skipSerializationPathsEdit,
[`${DIMENSIONS_SUPPORT_KEY}.aspectRatio`]: [`${DIMENSIONS_SUPPORT_KEY}.aspectRatio`],
// Skip serialization of aspect ratio in save mode.
[`${BACKGROUND_SUPPORT_KEY}`]: [BACKGROUND_SUPPORT_KEY] // Skip serialization of background support in save mode.
};
const skipSerializationPathsSaveChecks = {
[`${DIMENSIONS_SUPPORT_KEY}.aspectRatio`]: true,
[`${BACKGROUND_SUPPORT_KEY}`]: true
};
/**
* A dictionary used to normalize feature names between support flags, style
* object properties and __experimentSkipSerialization configuration arrays.
*
* This allows not having to provide a migration for a support flag and possible
* backwards compatibility bridges, while still achieving consistency between
* the support flag and the skip serialization array.
*
* @constant
* @type {Record<string, string>}
*/
const renamedFeatures = {
gradients: 'gradient'
};
/**
* A utility function used to remove one or more paths from a style object.
* Works in a way similar to Lodash's `omit()`. See unit tests and examples below.
*
* It supports a single string path:
*
* ```
* omitStyle( { color: 'red' }, 'color' ); // {}
* ```
*
* or an array of paths:
*
* ```
* omitStyle( { color: 'red', background: '#fff' }, [ 'color', 'background' ] ); // {}
* ```
*
* It also allows you to specify paths at multiple levels in a string.
*
* ```
* omitStyle( { typography: { textDecoration: 'underline' } }, 'typography.textDecoration' ); // {}
* ```
*
* You can remove multiple paths at the same time:
*
* ```
* omitStyle(
* {
* typography: {
* textDecoration: 'underline',
* textTransform: 'uppercase',
* }
* },
* [
* 'typography.textDecoration',
* 'typography.textTransform',
* ]
* );
* // {}
* ```
*
* You can also specify nested paths as arrays:
*
* ```
* omitStyle(
* {
* typography: {
* textDecoration: 'underline',
* textTransform: 'uppercase',
* }
* },
* [
* [ 'typography', 'textDecoration' ],
* [ 'typography', 'textTransform' ],
* ]
* );
* // {}
* ```
*
* With regards to nesting of styles, infinite depth is supported:
*
* ```
* omitStyle(
* {
* border: {
* radius: {
* topLeft: '10px',
* topRight: '0.5rem',
* }
* }
* },
* [
* [ 'border', 'radius', 'topRight' ],
* ]
* );
* // { border: { radius: { topLeft: '10px' } } }
* ```
*
* The third argument, `preserveReference`, defines how to treat the input style object.
* It is mostly necessary to properly handle mutation when recursively handling the style object.
* Defaulting to `false`, this will always create a new object, avoiding to mutate `style`.
* However, when recursing, we change that value to `true` in order to work with a single copy
* of the original style object.
*
* @see https://lodash.com/docs/4.17.15#omit
*
* @param {Object} style Styles object.
* @param {Array|string} paths Paths to remove.
* @param {boolean} preserveReference True to mutate the `style` object, false otherwise.
* @return {Object} Styles object with the specified paths removed.
*/
function omitStyle(style, paths, preserveReference = false) {
if (!style) {
return style;
}
let newStyle = style;
if (!preserveReference) {
newStyle = JSON.parse(JSON.stringify(style));
}
if (!Array.isArray(paths)) {
paths = [paths];
}
paths.forEach(path => {
if (!Array.isArray(path)) {
path = path.split('.');
}
if (path.length > 1) {
const [firstSubpath, ...restPath] = path;
omitStyle(newStyle[firstSubpath], [restPath], true);
} else if (path.length === 1) {
delete newStyle[path[0]];
}
});
return newStyle;
}
/**
* Override props assigned to save component to inject the CSS variables definition.
*
* @param {Object} props Additional props applied to save element.
* @param {Object|string} blockNameOrType Block type.
* @param {Object} attributes Block attributes.
* @param {?Record<string, string[]>} skipPaths An object of keys and paths to skip serialization.
*
* @return {Object} Filtered props applied to save element.
*/
function style_addSaveProps(props, blockNameOrType, attributes, skipPaths = skipSerializationPathsSave) {
if (!hasStyleSupport(blockNameOrType)) {
return props;
}
let {
style
} = attributes;
Object.entries(skipPaths).forEach(([indicator, path]) => {
const skipSerialization = skipSerializationPathsSaveChecks[indicator] || (0,external_wp_blocks_namespaceObject.getBlockSupport)(blockNameOrType, indicator);
if (skipSerialization === true) {
style = omitStyle(style, path);
}
if (Array.isArray(skipSerialization)) {
skipSerialization.forEach(featureName => {
const feature = renamedFeatures[featureName] || featureName;
style = omitStyle(style, [[...path, feature]]);
});
}
});
props.style = {
...getInlineStyles(style),
...props.style
};
return props;
}
function BlockStyleControls({
clientId,
name,
setAttributes,
__unstableParentLayout
}) {
const settings = useBlockSettings(name, __unstableParentLayout);
const blockEditingMode = useBlockEditingMode();
const passedProps = {
clientId,
name,
setAttributes,
settings: {
...settings,
typography: {
...settings.typography,
// The text alignment UI for individual blocks is rendered in
// the block toolbar, so disable it here.
textAlign: false
}
}
};
if (blockEditingMode !== 'default') {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorEdit, {
...passedProps
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(background_BackgroundImagePanel, {
...passedProps
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(typography_TypographyPanel, {
...passedProps
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_BorderPanel, {
...passedProps
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dimensions_DimensionsPanel, {
...passedProps
})]
});
}
/* harmony default export */ const style = ({
edit: BlockStyleControls,
hasSupport: hasStyleSupport,
addSaveProps: style_addSaveProps,
attributeKeys: ['style'],
useBlockProps: style_useBlockProps
});
// Defines which element types are supported, including their hover styles or
// any other elements that have been included under a single element type
// e.g. heading and h1-h6.
const elementTypes = [{
elementType: 'button'
}, {
elementType: 'link',
pseudo: [':hover']
}, {
elementType: 'heading',
elements: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
}];
function style_useBlockProps({
name,
style
}) {
const blockElementsContainerIdentifier = `wp-elements-${(0,external_wp_compose_namespaceObject.useInstanceId)(style_useBlockProps)}`;
const baseElementSelector = `.${blockElementsContainerIdentifier}`;
const blockElementStyles = style?.elements;
const styles = (0,external_wp_element_namespaceObject.useMemo)(() => {
if (!blockElementStyles) {
return;
}
const elementCSSRules = [];
elementTypes.forEach(({
elementType,
pseudo,
elements
}) => {
const skipSerialization = shouldSkipSerialization(name, COLOR_SUPPORT_KEY, elementType);
if (skipSerialization) {
return;
}
const elementStyles = blockElementStyles?.[elementType];
// Process primary element type styles.
if (elementStyles) {
const selector = scopeSelector(baseElementSelector, external_wp_blocks_namespaceObject.__EXPERIMENTAL_ELEMENTS[elementType]);
elementCSSRules.push((0,external_wp_styleEngine_namespaceObject.compileCSS)(elementStyles, {
selector
}));
// Process any interactive states for the element type.
if (pseudo) {
pseudo.forEach(pseudoSelector => {
if (elementStyles[pseudoSelector]) {
elementCSSRules.push((0,external_wp_styleEngine_namespaceObject.compileCSS)(elementStyles[pseudoSelector], {
selector: scopeSelector(baseElementSelector, `${external_wp_blocks_namespaceObject.__EXPERIMENTAL_ELEMENTS[elementType]}${pseudoSelector}`)
}));
}
});
}
}
// Process related elements e.g. h1-h6 for headings
if (elements) {
elements.forEach(element => {
if (blockElementStyles[element]) {
elementCSSRules.push((0,external_wp_styleEngine_namespaceObject.compileCSS)(blockElementStyles[element], {
selector: scopeSelector(baseElementSelector, external_wp_blocks_namespaceObject.__EXPERIMENTAL_ELEMENTS[element])
}));
}
});
}
});
return elementCSSRules.length > 0 ? elementCSSRules.join('') : undefined;
}, [baseElementSelector, blockElementStyles, name]);
useStyleOverride({
css: styles
});
return style_addSaveProps({
className: blockElementsContainerIdentifier
}, name, {
style
}, skipSerializationPathsEdit);
}
(0,external_wp_hooks_namespaceObject.addFilter)('blocks.registerBlockType', 'core/style/addAttribute', style_addAttribute);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/settings.js
/**
* WordPress dependencies
*/
const hasSettingsSupport = blockType => (0,external_wp_blocks_namespaceObject.hasBlockSupport)(blockType, '__experimentalSettings', false);
function settings_addAttribute(settings) {
if (!hasSettingsSupport(settings)) {
return settings;
}
// Allow blocks to specify their own attribute definition with default values if needed.
if (!settings?.attributes?.settings) {
settings.attributes = {
...settings.attributes,
settings: {
type: 'object'
}
};
}
return settings;
}
(0,external_wp_hooks_namespaceObject.addFilter)('blocks.registerBlockType', 'core/settings/addAttribute', settings_addAttribute);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/filter.js
/**
* WordPress dependencies
*/
const filter = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M12 4 4 19h16L12 4zm0 3.2 5.5 10.3H12V7.2z"
})
});
/* harmony default export */ const library_filter = (filter);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/duotone-control/index.js
/**
* WordPress dependencies
*/
function DuotoneControl({
id: idProp,
colorPalette,
duotonePalette,
disableCustomColors,
disableCustomDuotone,
value,
onChange
}) {
let toolbarIcon;
if (value === 'unset') {
toolbarIcon = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ColorIndicator, {
className: "block-editor-duotone-control__unset-indicator"
});
} else if (value) {
toolbarIcon = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.DuotoneSwatch, {
values: value
});
} else {
toolbarIcon = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
icon: library_filter
});
}
const actionLabel = (0,external_wp_i18n_namespaceObject.__)('Apply duotone filter');
const id = (0,external_wp_compose_namespaceObject.useInstanceId)(DuotoneControl, 'duotone-control', idProp);
const descriptionId = `${id}__description`;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Dropdown, {
popoverProps: {
className: 'block-editor-duotone-control__popover',
headerTitle: (0,external_wp_i18n_namespaceObject.__)('Duotone')
},
renderToggle: ({
isOpen,
onToggle
}) => {
const openOnArrowDown = event => {
if (!isOpen && event.keyCode === external_wp_keycodes_namespaceObject.DOWN) {
event.preventDefault();
onToggle();
}
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarButton, {
showTooltip: true,
onClick: onToggle,
"aria-haspopup": "true",
"aria-expanded": isOpen,
onKeyDown: openOnArrowDown,
label: actionLabel,
icon: toolbarIcon
});
},
renderContent: () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.MenuGroup, {
label: (0,external_wp_i18n_namespaceObject.__)('Duotone'),
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("p", {
children: (0,external_wp_i18n_namespaceObject.__)('Create a two-tone color effect without losing your original image.')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.DuotonePicker, {
"aria-label": actionLabel,
"aria-describedby": descriptionId,
colorPalette: colorPalette,
duotonePalette: duotonePalette,
disableCustomColors: disableCustomColors,
disableCustomDuotone: disableCustomDuotone,
value: value,
onChange: onChange
})]
})
});
}
/* harmony default export */ const duotone_control = (DuotoneControl);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/duotone/utils.js
/**
* External dependencies
*/
/**
* Convert a list of colors to an object of R, G, and B values.
*
* @param {string[]} colors Array of RBG color strings.
*
* @return {Object} R, G, and B values.
*/
function getValuesFromColors(colors = []) {
const values = {
r: [],
g: [],
b: [],
a: []
};
colors.forEach(color => {
const rgbColor = w(color).toRgb();
values.r.push(rgbColor.r / 255);
values.g.push(rgbColor.g / 255);
values.b.push(rgbColor.b / 255);
values.a.push(rgbColor.a);
});
return values;
}
/**
* Stylesheet for disabling a global styles duotone filter.
*
* @param {string} selector Selector to disable the filter for.
*
* @return {string} Filter none style.
*/
function getDuotoneUnsetStylesheet(selector) {
return `${selector}{filter:none}`;
}
/**
* SVG and stylesheet needed for rendering the duotone filter.
*
* @param {string} selector Selector to apply the filter to.
* @param {string} id Unique id for this duotone filter.
*
* @return {string} Duotone filter style.
*/
function getDuotoneStylesheet(selector, id) {
return `${selector}{filter:url(#${id})}`;
}
/**
* The SVG part of the duotone filter.
*
* @param {string} id Unique id for this duotone filter.
* @param {string[]} colors Color strings from dark to light.
*
* @return {string} Duotone SVG.
*/
function getDuotoneFilter(id, colors) {
const values = getValuesFromColors(colors);
return `
<svg
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 0 0"
width="0"
height="0"
focusable="false"
role="none"
aria-hidden="true"
style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;"
>
<defs>
<filter id="${id}">
<!--
Use sRGB instead of linearRGB so transparency looks correct.
Use perceptual brightness to convert to grayscale.
-->
<feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 "></feColorMatrix>
<!-- Use sRGB instead of linearRGB to be consistent with how CSS gradients work. -->
<feComponentTransfer color-interpolation-filters="sRGB">
<feFuncR type="table" tableValues="${values.r.join(' ')}"></feFuncR>
<feFuncG type="table" tableValues="${values.g.join(' ')}"></feFuncG>
<feFuncB type="table" tableValues="${values.b.join(' ')}"></feFuncB>
<feFuncA type="table" tableValues="${values.a.join(' ')}"></feFuncA>
</feComponentTransfer>
<!-- Re-mask the image with the original transparency since the feColorMatrix above loses that information. -->
<feComposite in2="SourceGraphic" operator="in"></feComposite>
</filter>
</defs>
</svg>`;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/global-styles/get-block-css-selector.js
/**
* Internal dependencies
*/
/**
* Determine the CSS selector for the block type and target provided, returning
* it if available.
*
* @param {import('@wordpress/blocks').Block} blockType The block's type.
* @param {string|string[]} target The desired selector's target e.g. `root`, delimited string, or array path.
* @param {Object} options Options object.
* @param {boolean} options.fallback Whether or not to fallback to broader selector.
*
* @return {?string} The CSS selector or `null` if no selector available.
*/
function getBlockCSSSelector(blockType, target = 'root', options = {}) {
if (!target) {
return null;
}
const {
fallback = false
} = options;
const {
name,
selectors,
supports
} = blockType;
const hasSelectors = selectors && Object.keys(selectors).length > 0;
const path = Array.isArray(target) ? target.join('.') : target;
// Root selector.
// Calculated before returning as it can be used as a fallback for feature
// selectors later on.
let rootSelector = null;
if (hasSelectors && selectors.root) {
// Use the selectors API if available.
rootSelector = selectors?.root;
} else if (supports?.__experimentalSelector) {
// Use the old experimental selector supports property if set.
rootSelector = supports.__experimentalSelector;
} else {
// If no root selector found, generate default block class selector.
rootSelector = '.wp-block-' + name.replace('core/', '').replace('/', '-');
}
// Return selector if it's the root target we are looking for.
if (path === 'root') {
return rootSelector;
}
// If target is not `root` or `duotone` we have a feature or subfeature
// as the target. If the target is a string convert to an array.
const pathArray = Array.isArray(target) ? target : target.split('.');
// Feature selectors ( may fallback to root selector );
if (pathArray.length === 1) {
const fallbackSelector = fallback ? rootSelector : null;
// Prefer the selectors API if available.
if (hasSelectors) {
// Get selector from either `feature.root` or shorthand path.
const featureSelector = getValueFromObjectPath(selectors, `${path}.root`, null) || getValueFromObjectPath(selectors, path, null);
// Return feature selector if found or any available fallback.
return featureSelector || fallbackSelector;
}
// Try getting old experimental supports selector value.
const featureSelector = getValueFromObjectPath(supports, `${path}.__experimentalSelector`, null);
// If nothing to work with, provide fallback selector if available.
if (!featureSelector) {
return fallbackSelector;
}
// Scope the feature selector by the block's root selector.
return scopeSelector(rootSelector, featureSelector);
}
// Subfeature selector.
// This may fallback either to parent feature or root selector.
let subfeatureSelector;
// Use selectors API if available.
if (hasSelectors) {
subfeatureSelector = getValueFromObjectPath(selectors, path, null);
}
// Only return if we have a subfeature selector.
if (subfeatureSelector) {
return subfeatureSelector;
}
// To this point we don't have a subfeature selector. If a fallback has been
// requested, remove subfeature from target path and return results of a
// call for the parent feature's selector.
if (fallback) {
return getBlockCSSSelector(blockType, pathArray[0], options);
}
// We tried.
return null;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/global-styles/filters-panel.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const filters_panel_EMPTY_ARRAY = [];
function useMultiOriginColorPresets(settings, {
presetSetting,
defaultSetting
}) {
const disableDefault = !settings?.color?.[defaultSetting];
const userPresets = settings?.color?.[presetSetting]?.custom || filters_panel_EMPTY_ARRAY;
const themePresets = settings?.color?.[presetSetting]?.theme || filters_panel_EMPTY_ARRAY;
const defaultPresets = settings?.color?.[presetSetting]?.default || filters_panel_EMPTY_ARRAY;
return (0,external_wp_element_namespaceObject.useMemo)(() => [...userPresets, ...themePresets, ...(disableDefault ? filters_panel_EMPTY_ARRAY : defaultPresets)], [disableDefault, userPresets, themePresets, defaultPresets]);
}
function useHasFiltersPanel(settings) {
return useHasDuotoneControl(settings);
}
function useHasDuotoneControl(settings) {
return settings.color.customDuotone || settings.color.defaultDuotone || settings.color.duotone.length > 0;
}
function FiltersToolsPanel({
resetAllFilter,
onChange,
value,
panelId,
children
}) {
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
const resetAll = () => {
const updatedValue = resetAllFilter(value);
onChange(updatedValue);
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanel, {
label: (0,external_wp_i18n_namespaceObject._x)('Filters', 'Name for applying graphical effects'),
resetAll: resetAll,
panelId: panelId,
dropdownMenuProps: dropdownMenuProps,
children: children
});
}
const filters_panel_DEFAULT_CONTROLS = {
duotone: true
};
const filters_panel_popoverProps = {
placement: 'left-start',
offset: 36,
shift: true,
className: 'block-editor-duotone-control__popover',
headerTitle: (0,external_wp_i18n_namespaceObject.__)('Duotone')
};
const LabeledColorIndicator = ({
indicator,
label
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalHStack, {
justify: "flex-start",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalZStack, {
isLayered: false,
offset: -8,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Flex, {
expanded: false,
children: indicator === 'unset' || !indicator ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ColorIndicator, {
className: "block-editor-duotone-control__unset-indicator"
}) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.DuotoneSwatch, {
values: indicator
})
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexItem, {
title: label,
children: label
})]
});
function FiltersPanel({
as: Wrapper = FiltersToolsPanel,
value,
onChange,
inheritedValue = value,
settings,
panelId,
defaultControls = filters_panel_DEFAULT_CONTROLS
}) {
const decodeValue = rawValue => getValueFromVariable({
settings
}, '', rawValue);
// Duotone
const hasDuotoneEnabled = useHasDuotoneControl(settings);
const duotonePalette = useMultiOriginColorPresets(settings, {
presetSetting: 'duotone',
defaultSetting: 'defaultDuotone'
});
const colorPalette = useMultiOriginColorPresets(settings, {
presetSetting: 'palette',
defaultSetting: 'defaultPalette'
});
const duotone = decodeValue(inheritedValue?.filter?.duotone);
const setDuotone = newValue => {
const duotonePreset = duotonePalette.find(({
colors
}) => {
return colors === newValue;
});
const settedValue = duotonePreset ? `var:preset|duotone|${duotonePreset.slug}` : newValue;
onChange(setImmutably(value, ['filter', 'duotone'], settedValue));
};
const hasDuotone = () => !!value?.filter?.duotone;
const resetDuotone = () => setDuotone(undefined);
const resetAllFilter = (0,external_wp_element_namespaceObject.useCallback)(previousValue => {
return {
...previousValue,
filter: {
...previousValue.filter,
duotone: undefined
}
};
}, []);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Wrapper, {
resetAllFilter: resetAllFilter,
value: value,
onChange: onChange,
panelId: panelId,
children: hasDuotoneEnabled && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
label: (0,external_wp_i18n_namespaceObject.__)('Duotone'),
hasValue: hasDuotone,
onDeselect: resetDuotone,
isShownByDefault: defaultControls.duotone,
panelId: panelId,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Dropdown, {
popoverProps: filters_panel_popoverProps,
className: "block-editor-global-styles-filters-panel__dropdown",
renderToggle: ({
onToggle,
isOpen
}) => {
const toggleProps = {
onClick: onToggle,
className: dist_clsx({
'is-open': isOpen
}),
'aria-expanded': isOpen
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalItemGroup, {
isBordered: true,
isSeparated: true,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
...toggleProps,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LabeledColorIndicator, {
indicator: duotone,
label: (0,external_wp_i18n_namespaceObject.__)('Duotone')
})
})
});
},
renderContent: () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalDropdownContentWrapper, {
paddingSize: "small",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.MenuGroup, {
label: (0,external_wp_i18n_namespaceObject.__)('Duotone'),
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("p", {
children: (0,external_wp_i18n_namespaceObject.__)('Create a two-tone color effect without losing your original image.')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.DuotonePicker, {
colorPalette: colorPalette,
duotonePalette: duotonePalette
// TODO: Re-enable both when custom colors are supported for block-level styles.
,
disableCustomColors: true,
disableCustomDuotone: true,
value: duotone,
onChange: setDuotone
})]
})
})
})
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/duotone.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const duotone_EMPTY_ARRAY = [];
// Safari does not always update the duotone filter when the duotone colors
// are changed. This browser check is later used to force a re-render of the block
// element to ensure the duotone filter is updated. The check is included at the
// root of this file as it only needs to be run once per page load.
const isSafari = window?.navigator.userAgent && window.navigator.userAgent.includes('Safari') && !window.navigator.userAgent.includes('Chrome') && !window.navigator.userAgent.includes('Chromium');
k([names]);
function useMultiOriginPresets({
presetSetting,
defaultSetting
}) {
const [enableDefault, userPresets, themePresets, defaultPresets] = use_settings_useSettings(defaultSetting, `${presetSetting}.custom`, `${presetSetting}.theme`, `${presetSetting}.default`);
return (0,external_wp_element_namespaceObject.useMemo)(() => [...(userPresets || duotone_EMPTY_ARRAY), ...(themePresets || duotone_EMPTY_ARRAY), ...(enableDefault && defaultPresets || duotone_EMPTY_ARRAY)], [enableDefault, userPresets, themePresets, defaultPresets]);
}
function getColorsFromDuotonePreset(duotone, duotonePalette) {
if (!duotone) {
return;
}
const preset = duotonePalette?.find(({
slug
}) => {
return duotone === `var:preset|duotone|${slug}`;
});
return preset ? preset.colors : undefined;
}
function getDuotonePresetFromColors(colors, duotonePalette) {
if (!colors || !Array.isArray(colors)) {
return;
}
const preset = duotonePalette?.find(duotonePreset => {
return duotonePreset?.colors?.every((val, index) => val === colors[index]);
});
return preset ? `var:preset|duotone|${preset.slug}` : undefined;
}
function DuotonePanelPure({
style,
setAttributes,
name
}) {
const duotoneStyle = style?.color?.duotone;
const settings = useBlockSettings(name);
const blockEditingMode = useBlockEditingMode();
const duotonePalette = useMultiOriginPresets({
presetSetting: 'color.duotone',
defaultSetting: 'color.defaultDuotone'
});
const colorPalette = useMultiOriginPresets({
presetSetting: 'color.palette',
defaultSetting: 'color.defaultPalette'
});
const [enableCustomColors, enableCustomDuotone] = use_settings_useSettings('color.custom', 'color.customDuotone');
const disableCustomColors = !enableCustomColors;
const disableCustomDuotone = !enableCustomDuotone || colorPalette?.length === 0 && disableCustomColors;
if (duotonePalette?.length === 0 && disableCustomDuotone) {
return null;
}
if (blockEditingMode !== 'default') {
return null;
}
const duotonePresetOrColors = !Array.isArray(duotoneStyle) ? getColorsFromDuotonePreset(duotoneStyle, duotonePalette) : duotoneStyle;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls, {
group: "filter",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FiltersPanel, {
value: {
filter: {
duotone: duotonePresetOrColors
}
},
onChange: newDuotone => {
const newStyle = {
...style,
color: {
...newDuotone?.filter
}
};
setAttributes({
style: newStyle
});
},
settings: settings
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_controls, {
group: "block",
__experimentalShareWithChildBlocks: true,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(duotone_control, {
duotonePalette: duotonePalette,
colorPalette: colorPalette,
disableCustomDuotone: disableCustomDuotone,
disableCustomColors: disableCustomColors,
value: duotonePresetOrColors,
onChange: newDuotone => {
const maybePreset = getDuotonePresetFromColors(newDuotone, duotonePalette);
const newStyle = {
...style,
color: {
...style?.color,
duotone: maybePreset !== null && maybePreset !== void 0 ? maybePreset : newDuotone // use preset or fallback to custom colors.
}
};
setAttributes({
style: newStyle
});
},
settings: settings
})
})]
});
}
/* harmony default export */ const duotone = ({
shareWithChildBlocks: true,
edit: DuotonePanelPure,
useBlockProps: duotone_useBlockProps,
attributeKeys: ['style'],
hasSupport(name) {
return (0,external_wp_blocks_namespaceObject.hasBlockSupport)(name, 'filter.duotone');
}
});
/**
* Filters registered block settings, extending attributes to include
* the `duotone` attribute.
*
* @param {Object} settings Original block settings.
*
* @return {Object} Filtered block settings.
*/
function addDuotoneAttributes(settings) {
// Previous `color.__experimentalDuotone` support flag is migrated via
// block_type_metadata_settings filter in `lib/block-supports/duotone.php`.
if (!(0,external_wp_blocks_namespaceObject.hasBlockSupport)(settings, 'filter.duotone')) {
return settings;
}
// Allow blocks to specify their own attribute definition with default
// values if needed.
if (!settings.attributes.style) {
Object.assign(settings.attributes, {
style: {
type: 'object'
}
});
}
return settings;
}
function useDuotoneStyles({
clientId,
id: filterId,
selector: duotoneSelector,
attribute: duotoneAttr
}) {
const duotonePalette = useMultiOriginPresets({
presetSetting: 'color.duotone',
defaultSetting: 'color.defaultDuotone'
});
// Possible values for duotone attribute:
// 1. Array of colors - e.g. ['#000000', '#ffffff'].
// 2. Variable for an existing Duotone preset - e.g. 'var:preset|duotone|green-blue' or 'var(--wp--preset--duotone--green-blue)''
// 3. A CSS string - e.g. 'unset' to remove globally applied duotone.
const isCustom = Array.isArray(duotoneAttr);
const duotonePreset = isCustom ? undefined : getColorsFromDuotonePreset(duotoneAttr, duotonePalette);
const isPreset = typeof duotoneAttr === 'string' && duotonePreset;
const isCSS = typeof duotoneAttr === 'string' && !isPreset;
// Match the structure of WP_Duotone_Gutenberg::render_duotone_support() in PHP.
let colors = null;
if (isPreset) {
// Array of colors.
colors = duotonePreset;
} else if (isCSS) {
// CSS filter property string (e.g. 'unset').
colors = duotoneAttr;
} else if (isCustom) {
// Array of colors.
colors = duotoneAttr;
}
// Build the CSS selectors to which the filter will be applied.
const selectors = duotoneSelector.split(',');
const selectorsScoped = selectors.map(selectorPart => {
// Assuming the selector part is a subclass selector (not a tag name)
// so we can prepend the filter id class. If we want to support elements
// such as `img` or namespaces, we'll need to add a case for that here.
return `.${filterId}${selectorPart.trim()}`;
});
const selector = selectorsScoped.join(', ');
const isValidFilter = Array.isArray(colors) || colors === 'unset';
usePrivateStyleOverride(isValidFilter ? {
css: colors !== 'unset' ? getDuotoneStylesheet(selector, filterId) : getDuotoneUnsetStylesheet(selector),
__unstableType: 'presets'
} : undefined);
usePrivateStyleOverride(isValidFilter ? {
assets: colors !== 'unset' ? getDuotoneFilter(filterId, colors) : '',
__unstableType: 'svgs'
} : undefined);
const blockElement = useBlockElement(clientId);
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (!isValidFilter) {
return;
}
// Safari does not always update the duotone filter when the duotone
// colors are changed. When using Safari, force the block element to be
// repainted by the browser to ensure any changes are reflected
// visually. This logic matches that used on the site frontend in
// `block-supports/duotone.php`.
if (blockElement && isSafari) {
const display = blockElement.style.display;
// Switch to `inline-block` to force a repaint. In the editor,
// `inline-block` is used instead of `none` to ensure that scroll
// position is not affected, as `none` results in the editor
// scrolling to the top of the block.
blockElement.style.display = 'inline-block';
// Simply accessing el.offsetHeight flushes layout and style changes
// in WebKit without having to wait for setTimeout.
// eslint-disable-next-line no-unused-expressions
blockElement.offsetHeight;
blockElement.style.display = display;
}
// `colors` must be a dependency so this effect runs when the colors
// change in Safari.
}, [isValidFilter, blockElement, colors]);
}
function duotone_useBlockProps({
clientId,
name,
style
}) {
const id = (0,external_wp_compose_namespaceObject.useInstanceId)(duotone_useBlockProps);
const selector = (0,external_wp_element_namespaceObject.useMemo)(() => {
const blockType = (0,external_wp_blocks_namespaceObject.getBlockType)(name);
if (blockType) {
// Backwards compatibility for `supports.color.__experimentalDuotone`
// is provided via the `block_type_metadata_settings` filter. If
// `supports.filter.duotone` has not been set and the
// experimental property has been, the experimental property
// value is copied into `supports.filter.duotone`.
const duotoneSupport = (0,external_wp_blocks_namespaceObject.getBlockSupport)(blockType, 'filter.duotone', false);
if (!duotoneSupport) {
return null;
}
// If the experimental duotone support was set, that value is
// to be treated as a selector and requires scoping.
const experimentalDuotone = (0,external_wp_blocks_namespaceObject.getBlockSupport)(blockType, 'color.__experimentalDuotone', false);
if (experimentalDuotone) {
const rootSelector = getBlockCSSSelector(blockType);
return typeof experimentalDuotone === 'string' ? scopeSelector(rootSelector, experimentalDuotone) : rootSelector;
}
// Regular filter.duotone support uses filter.duotone selectors with fallbacks.
return getBlockCSSSelector(blockType, 'filter.duotone', {
fallback: true
});
}
}, [name]);
const attribute = style?.color?.duotone;
const filterClass = `wp-duotone-${id}`;
const shouldRender = selector && attribute;
useDuotoneStyles({
clientId,
id: filterClass,
selector,
attribute
});
return {
className: shouldRender ? filterClass : ''
};
}
(0,external_wp_hooks_namespaceObject.addFilter)('blocks.registerBlockType', 'core/editor/duotone/add-attributes', addDuotoneAttributes);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/use-block-display-information/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/** @typedef {import('@wordpress/blocks').WPIcon} WPIcon */
/**
* Contains basic block's information for display reasons.
*
* @typedef {Object} WPBlockDisplayInformation
*
* @property {boolean} isSynced True if is a reusable block or template part
* @property {string} title Human-readable block type label.
* @property {WPIcon} icon Block type icon.
* @property {string} description A detailed block type description.
* @property {string} anchor HTML anchor.
* @property {name} name A custom, human readable name for the block.
*/
/**
* Get the display label for a block's position type.
*
* @param {Object} attributes Block attributes.
* @return {string} The position type label.
*/
function getPositionTypeLabel(attributes) {
const positionType = attributes?.style?.position?.type;
if (positionType === 'sticky') {
return (0,external_wp_i18n_namespaceObject.__)('Sticky');
}
if (positionType === 'fixed') {
return (0,external_wp_i18n_namespaceObject.__)('Fixed');
}
return null;
}
/**
* Hook used to try to find a matching block variation and return
* the appropriate information for display reasons. In order to
* to try to find a match we need to things:
* 1. Block's client id to extract it's current attributes.
* 2. A block variation should have set `isActive` prop to a proper function.
*
* If for any reason a block variation match cannot be found,
* the returned information come from the Block Type.
* If no blockType is found with the provided clientId, returns null.
*
* @param {string} clientId Block's client id.
* @return {?WPBlockDisplayInformation} Block's display information, or `null` when the block or its type not found.
*/
function useBlockDisplayInformation(clientId) {
return (0,external_wp_data_namespaceObject.useSelect)(select => {
if (!clientId) {
return null;
}
const {
getBlockName,
getBlockAttributes
} = select(store);
const {
getBlockType,
getActiveBlockVariation
} = select(external_wp_blocks_namespaceObject.store);
const blockName = getBlockName(clientId);
const blockType = getBlockType(blockName);
if (!blockType) {
return null;
}
const attributes = getBlockAttributes(clientId);
const match = getActiveBlockVariation(blockName, attributes);
const isSynced = (0,external_wp_blocks_namespaceObject.isReusableBlock)(blockType) || (0,external_wp_blocks_namespaceObject.isTemplatePart)(blockType);
const syncedTitle = isSynced ? (0,external_wp_blocks_namespaceObject.__experimentalGetBlockLabel)(blockType, attributes) : undefined;
const title = syncedTitle || blockType.title;
const positionLabel = getPositionTypeLabel(attributes);
const blockTypeInfo = {
isSynced,
title,
icon: blockType.icon,
description: blockType.description,
anchor: attributes?.anchor,
positionLabel,
positionType: attributes?.style?.position?.type,
name: attributes?.metadata?.name
};
if (!match) {
return blockTypeInfo;
}
return {
isSynced,
title: match.title || blockType.title,
icon: match.icon || blockType.icon,
description: match.description || blockType.description,
anchor: attributes?.anchor,
positionLabel,
positionType: attributes?.style?.position?.type,
name: attributes?.metadata?.name
};
}, [clientId]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/position.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const POSITION_SUPPORT_KEY = 'position';
const DEFAULT_OPTION = {
key: 'default',
value: '',
name: (0,external_wp_i18n_namespaceObject.__)('Default')
};
const STICKY_OPTION = {
key: 'sticky',
value: 'sticky',
name: (0,external_wp_i18n_namespaceObject._x)('Sticky', 'Name for the value of the CSS position property'),
hint: (0,external_wp_i18n_namespaceObject.__)('The block will stick to the top of the window instead of scrolling.')
};
const FIXED_OPTION = {
key: 'fixed',
value: 'fixed',
name: (0,external_wp_i18n_namespaceObject._x)('Fixed', 'Name for the value of the CSS position property'),
hint: (0,external_wp_i18n_namespaceObject.__)('The block will not move when the page is scrolled.')
};
const POSITION_SIDES = ['top', 'right', 'bottom', 'left'];
const VALID_POSITION_TYPES = ['sticky', 'fixed'];
/**
* Get calculated position CSS.
*
* @param {Object} props Component props.
* @param {string} props.selector Selector to use.
* @param {Object} props.style Style object.
* @return {string} The generated CSS rules.
*/
function getPositionCSS({
selector,
style
}) {
let output = '';
const {
type: positionType
} = style?.position || {};
if (!VALID_POSITION_TYPES.includes(positionType)) {
return output;
}
output += `${selector} {`;
output += `position: ${positionType};`;
POSITION_SIDES.forEach(side => {
if (style?.position?.[side] !== undefined) {
output += `${side}: ${style.position[side]};`;
}
});
if (positionType === 'sticky' || positionType === 'fixed') {
// TODO: Replace hard-coded z-index value with a z-index preset approach in theme.json.
output += `z-index: 10`;
}
output += `}`;
return output;
}
/**
* Determines if there is sticky position support.
*
* @param {string|Object} blockType Block name or Block Type object.
*
* @return {boolean} Whether there is support.
*/
function hasStickyPositionSupport(blockType) {
const support = (0,external_wp_blocks_namespaceObject.getBlockSupport)(blockType, POSITION_SUPPORT_KEY);
return !!(true === support || support?.sticky);
}
/**
* Determines if there is fixed position support.
*
* @param {string|Object} blockType Block name or Block Type object.
*
* @return {boolean} Whether there is support.
*/
function hasFixedPositionSupport(blockType) {
const support = (0,external_wp_blocks_namespaceObject.getBlockSupport)(blockType, POSITION_SUPPORT_KEY);
return !!(true === support || support?.fixed);
}
/**
* Determines if there is position support.
*
* @param {string|Object} blockType Block name or Block Type object.
*
* @return {boolean} Whether there is support.
*/
function hasPositionSupport(blockType) {
const support = (0,external_wp_blocks_namespaceObject.getBlockSupport)(blockType, POSITION_SUPPORT_KEY);
return !!support;
}
/**
* Checks if there is a current value in the position block support attributes.
*
* @param {Object} props Block props.
* @return {boolean} Whether or not the block has a position value set.
*/
function hasPositionValue(props) {
return props.attributes.style?.position?.type !== undefined;
}
/**
* Checks if the block is currently set to a sticky or fixed position.
* This check is helpful for determining how to position block toolbars or other elements.
*
* @param {Object} attributes Block attributes.
* @return {boolean} Whether or not the block is set to a sticky or fixed position.
*/
function hasStickyOrFixedPositionValue(attributes) {
const positionType = attributes?.style?.position?.type;
return positionType === 'sticky' || positionType === 'fixed';
}
/**
* Resets the position block support attributes. This can be used when disabling
* the position support controls for a block via a `ToolsPanel`.
*
* @param {Object} props Block props.
* @param {Object} props.attributes Block's attributes.
* @param {Object} props.setAttributes Function to set block's attributes.
*/
function resetPosition({
attributes = {},
setAttributes
}) {
const {
style = {}
} = attributes;
setAttributes({
style: cleanEmptyObject({
...style,
position: {
...style?.position,
type: undefined,
top: undefined,
right: undefined,
bottom: undefined,
left: undefined
}
})
});
}
/**
* Custom hook that checks if position settings have been disabled.
*
* @param {string} name The name of the block.
*
* @return {boolean} Whether padding setting is disabled.
*/
function useIsPositionDisabled({
name: blockName
} = {}) {
const [allowFixed, allowSticky] = use_settings_useSettings('position.fixed', 'position.sticky');
const isDisabled = !allowFixed && !allowSticky;
return !hasPositionSupport(blockName) || isDisabled;
}
/*
* Position controls rendered in an inspector control panel.
*
* @param {Object} props
*
* @return {Element} Position panel.
*/
function PositionPanelPure({
style = {},
clientId,
name: blockName,
setAttributes
}) {
const allowFixed = hasFixedPositionSupport(blockName);
const allowSticky = hasStickyPositionSupport(blockName);
const value = style?.position?.type;
const {
firstParentClientId
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockParents
} = select(store);
const parents = getBlockParents(clientId);
return {
firstParentClientId: parents[parents.length - 1]
};
}, [clientId]);
const blockInformation = useBlockDisplayInformation(firstParentClientId);
const stickyHelpText = allowSticky && value === STICKY_OPTION.value && blockInformation ? (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %s: the name of the parent block. */
(0,external_wp_i18n_namespaceObject.__)('The block will stick to the scrollable area of the parent %s block.'), blockInformation.title) : null;
const options = (0,external_wp_element_namespaceObject.useMemo)(() => {
const availableOptions = [DEFAULT_OPTION];
// Display options if they are allowed, or if a block already has a valid value set.
// This allows for a block to be switched off from a position type that is not allowed.
if (allowSticky || value === STICKY_OPTION.value) {
availableOptions.push(STICKY_OPTION);
}
if (allowFixed || value === FIXED_OPTION.value) {
availableOptions.push(FIXED_OPTION);
}
return availableOptions;
}, [allowFixed, allowSticky, value]);
const onChangeType = next => {
// For now, use a hard-coded `0px` value for the position.
// `0px` is preferred over `0` as it can be used in `calc()` functions.
// In the future, it could be useful to allow for an offset value.
const placementValue = '0px';
const newStyle = {
...style,
position: {
...style?.position,
type: next,
top: next === 'sticky' || next === 'fixed' ? placementValue : undefined
}
};
setAttributes({
style: utils_cleanEmptyObject(newStyle)
});
};
const selectedOption = value ? options.find(option => option.value === value) || DEFAULT_OPTION : DEFAULT_OPTION;
// Only display position controls if there is at least one option to choose from.
return external_wp_element_namespaceObject.Platform.select({
web: options.length > 1 ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls, {
group: "position",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.BaseControl, {
__nextHasNoMarginBottom: true,
help: stickyHelpText,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.CustomSelectControl, {
__next40pxDefaultSize: true,
label: (0,external_wp_i18n_namespaceObject.__)('Position'),
hideLabelFromVision: true,
describedBy: (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: %s: Currently selected position.
(0,external_wp_i18n_namespaceObject.__)('Currently selected position: %s'), selectedOption.name),
options: options,
value: selectedOption,
onChange: ({
selectedItem
}) => {
onChangeType(selectedItem.value);
},
size: "__unstable-large"
})
})
}) : null,
native: null
});
}
/* harmony default export */ const position = ({
edit: function Edit(props) {
const isPositionDisabled = useIsPositionDisabled(props);
if (isPositionDisabled) {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PositionPanelPure, {
...props
});
},
useBlockProps: position_useBlockProps,
attributeKeys: ['style'],
hasSupport(name) {
return (0,external_wp_blocks_namespaceObject.hasBlockSupport)(name, POSITION_SUPPORT_KEY);
}
});
function position_useBlockProps({
name,
style
}) {
const hasPositionBlockSupport = (0,external_wp_blocks_namespaceObject.hasBlockSupport)(name, POSITION_SUPPORT_KEY);
const isPositionDisabled = useIsPositionDisabled({
name
});
const allowPositionStyles = hasPositionBlockSupport && !isPositionDisabled;
const id = (0,external_wp_compose_namespaceObject.useInstanceId)(position_useBlockProps);
// Higher specificity to override defaults in editor UI.
const positionSelector = `.wp-container-${id}.wp-container-${id}`;
// Get CSS string for the current position values.
let css;
if (allowPositionStyles) {
css = getPositionCSS({
selector: positionSelector,
style
}) || '';
}
// Attach a `wp-container-` id-based class name.
const className = dist_clsx({
[`wp-container-${id}`]: allowPositionStyles && !!css,
// Only attach a container class if there is generated CSS to be attached.
[`is-position-${style?.position?.type}`]: allowPositionStyles && !!css && !!style?.position?.type
});
useStyleOverride({
css
});
return {
className
};
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/global-styles/use-global-styles-output.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
// Elements that rely on class names in their selectors.
const ELEMENT_CLASS_NAMES = {
button: 'wp-element-button',
caption: 'wp-element-caption'
};
// List of block support features that can have their related styles
// generated under their own feature level selector rather than the block's.
const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = {
__experimentalBorder: 'border',
color: 'color',
spacing: 'spacing',
typography: 'typography'
};
const {
kebabCase: use_global_styles_output_kebabCase
} = unlock(external_wp_components_namespaceObject.privateApis);
/**
* Transform given preset tree into a set of style declarations.
*
* @param {Object} blockPresets
* @param {Object} mergedSettings Merged theme.json settings.
*
* @return {Array<Object>} An array of style declarations.
*/
function getPresetsDeclarations(blockPresets = {}, mergedSettings) {
return PRESET_METADATA.reduce((declarations, {
path,
valueKey,
valueFunc,
cssVarInfix
}) => {
const presetByOrigin = getValueFromObjectPath(blockPresets, path, []);
['default', 'theme', 'custom'].forEach(origin => {
if (presetByOrigin[origin]) {
presetByOrigin[origin].forEach(value => {
if (valueKey && !valueFunc) {
declarations.push(`--wp--preset--${cssVarInfix}--${use_global_styles_output_kebabCase(value.slug)}: ${value[valueKey]}`);
} else if (valueFunc && typeof valueFunc === 'function') {
declarations.push(`--wp--preset--${cssVarInfix}--${use_global_styles_output_kebabCase(value.slug)}: ${valueFunc(value, mergedSettings)}`);
}
});
}
});
return declarations;
}, []);
}
/**
* Transform given preset tree into a set of preset class declarations.
*
* @param {?string} blockSelector
* @param {Object} blockPresets
* @return {string} CSS declarations for the preset classes.
*/
function getPresetsClasses(blockSelector = '*', blockPresets = {}) {
return PRESET_METADATA.reduce((declarations, {
path,
cssVarInfix,
classes
}) => {
if (!classes) {
return declarations;
}
const presetByOrigin = getValueFromObjectPath(blockPresets, path, []);
['default', 'theme', 'custom'].forEach(origin => {
if (presetByOrigin[origin]) {
presetByOrigin[origin].forEach(({
slug
}) => {
classes.forEach(({
classSuffix,
propertyName
}) => {
const classSelectorToUse = `.has-${use_global_styles_output_kebabCase(slug)}-${classSuffix}`;
const selectorToUse = blockSelector.split(',') // Selector can be "h1, h2, h3"
.map(selector => `${selector}${classSelectorToUse}`).join(',');
const value = `var(--wp--preset--${cssVarInfix}--${use_global_styles_output_kebabCase(slug)})`;
declarations += `${selectorToUse}{${propertyName}: ${value} !important;}`;
});
});
}
});
return declarations;
}, '');
}
function getPresetsSvgFilters(blockPresets = {}) {
return PRESET_METADATA.filter(
// Duotone are the only type of filters for now.
metadata => metadata.path.at(-1) === 'duotone').flatMap(metadata => {
const presetByOrigin = getValueFromObjectPath(blockPresets, metadata.path, {});
return ['default', 'theme'].filter(origin => presetByOrigin[origin]).flatMap(origin => presetByOrigin[origin].map(preset => getDuotoneFilter(`wp-duotone-${preset.slug}`, preset.colors))).join('');
});
}
function flattenTree(input = {}, prefix, token) {
let result = [];
Object.keys(input).forEach(key => {
const newKey = prefix + use_global_styles_output_kebabCase(key.replace('/', '-'));
const newLeaf = input[key];
if (newLeaf instanceof Object) {
const newPrefix = newKey + token;
result = [...result, ...flattenTree(newLeaf, newPrefix, token)];
} else {
result.push(`${newKey}: ${newLeaf}`);
}
});
return result;
}
/**
* Gets variation selector string from feature selector.
*
* @param {string} featureSelector The feature selector.
*
* @param {string} styleVariationSelector The style variation selector.
* @return {string} Combined selector string.
*/
function concatFeatureVariationSelectorString(featureSelector, styleVariationSelector) {
const featureSelectors = featureSelector.split(',');
const combinedSelectors = [];
featureSelectors.forEach(selector => {
combinedSelectors.push(`${styleVariationSelector.trim()}${selector.trim()}`);
});
return combinedSelectors.join(', ');
}
/**
* Generate style declarations for a block's custom feature and subfeature
* selectors.
*
* NOTE: The passed `styles` object will be mutated by this function.
*
* @param {Object} selectors Custom selectors object for a block.
* @param {Object} styles A block's styles object.
*
* @return {Object} Style declarations.
*/
const getFeatureDeclarations = (selectors, styles) => {
const declarations = {};
Object.entries(selectors).forEach(([feature, selector]) => {
// We're only processing features/subfeatures that have styles.
if (feature === 'root' || !styles?.[feature]) {
return;
}
const isShorthand = typeof selector === 'string';
// If we have a selector object instead of shorthand process it.
if (!isShorthand) {
Object.entries(selector).forEach(([subfeature, subfeatureSelector]) => {
// Don't process root feature selector yet or any
// subfeature that doesn't have a style.
if (subfeature === 'root' || !styles?.[feature][subfeature]) {
return;
}
// Create a temporary styles object and build
// declarations for subfeature.
const subfeatureStyles = {
[feature]: {
[subfeature]: styles[feature][subfeature]
}
};
const newDeclarations = getStylesDeclarations(subfeatureStyles);
// Merge new declarations in with any others that
// share the same selector.
declarations[subfeatureSelector] = [...(declarations[subfeatureSelector] || []), ...newDeclarations];
// Remove the subfeature's style now it will be
// included under its own selector not the block's.
delete styles[feature][subfeature];
});
}
// Now subfeatures have been processed and removed, we can
// process root, or shorthand, feature selectors.
if (isShorthand || selector.root) {
const featureSelector = isShorthand ? selector : selector.root;
// Create temporary style object and build declarations for feature.
const featureStyles = {
[feature]: styles[feature]
};
const newDeclarations = getStylesDeclarations(featureStyles);
// Merge new declarations with any others that share the selector.
declarations[featureSelector] = [...(declarations[featureSelector] || []), ...newDeclarations];
// Remove the feature from the block's styles now as it will be
// included under its own selector not the block's.
delete styles[feature];
}
});
return declarations;
};
/**
* Transform given style tree into a set of style declarations.
*
* @param {Object} blockStyles Block styles.
*
* @param {string} selector The selector these declarations should attach to.
*
* @param {boolean} useRootPaddingAlign Whether to use CSS custom properties in root selector.
*
* @param {Object} tree A theme.json tree containing layout definitions.
*
* @param {boolean} disableRootPadding Whether to force disable the root padding styles.
* @return {Array} An array of style declarations.
*/
function getStylesDeclarations(blockStyles = {}, selector = '', useRootPaddingAlign, tree = {}, disableRootPadding = false) {
const isRoot = ROOT_BLOCK_SELECTOR === selector;
const output = Object.entries(external_wp_blocks_namespaceObject.__EXPERIMENTAL_STYLE_PROPERTY).reduce((declarations, [key, {
value,
properties,
useEngine,
rootOnly
}]) => {
if (rootOnly && !isRoot) {
return declarations;
}
const pathToValue = value;
if (pathToValue[0] === 'elements' || useEngine) {
return declarations;
}
const styleValue = getValueFromObjectPath(blockStyles, pathToValue);
// Root-level padding styles don't currently support strings with CSS shorthand values.
// This may change: https://github.com/WordPress/gutenberg/issues/40132.
if (key === '--wp--style--root--padding' && (typeof styleValue === 'string' || !useRootPaddingAlign)) {
return declarations;
}
if (properties && typeof styleValue !== 'string') {
Object.entries(properties).forEach(entry => {
const [name, prop] = entry;
if (!getValueFromObjectPath(styleValue, [prop], false)) {
// Do not create a declaration
// for sub-properties that don't have any value.
return;
}
const cssProperty = name.startsWith('--') ? name : use_global_styles_output_kebabCase(name);
declarations.push(`${cssProperty}: ${(0,external_wp_styleEngine_namespaceObject.getCSSValueFromRawStyle)(getValueFromObjectPath(styleValue, [prop]))}`);
});
} else if (getValueFromObjectPath(blockStyles, pathToValue, false)) {
const cssProperty = key.startsWith('--') ? key : use_global_styles_output_kebabCase(key);
declarations.push(`${cssProperty}: ${(0,external_wp_styleEngine_namespaceObject.getCSSValueFromRawStyle)(getValueFromObjectPath(blockStyles, pathToValue))}`);
}
return declarations;
}, []);
/*
* Preprocess background image values.
*
* Note: As we absorb more and more styles into the engine, we could simplify this function.
* A refactor is for the style engine to handle ref resolution (and possibly defaults)
* via a public util used internally and externally. Theme.json tree and defaults could be passed
* as options.
*/
if (!!blockStyles.background) {
/*
* Resolve dynamic values before they are compiled by the style engine,
* which doesn't (yet) resolve dynamic values.
*/
if (blockStyles.background?.backgroundImage) {
blockStyles.background.backgroundImage = getResolvedValue(blockStyles.background.backgroundImage, tree);
}
/*
* Set default values for block background styles.
* Top-level styles are an exception as they are applied to the body.
*/
if (!isRoot && !!blockStyles.background?.backgroundImage?.id) {
blockStyles = {
...blockStyles,
background: {
...blockStyles.background,
...setBackgroundStyleDefaults(blockStyles.background)
}
};
}
}
const extraRules = (0,external_wp_styleEngine_namespaceObject.getCSSRules)(blockStyles);
extraRules.forEach(rule => {
// Don't output padding properties if padding variables are set or if we're not editing a full template.
if (isRoot && (useRootPaddingAlign || disableRootPadding) && rule.key.startsWith('padding')) {
return;
}
const cssProperty = rule.key.startsWith('--') ? rule.key : use_global_styles_output_kebabCase(rule.key);
let ruleValue = getResolvedValue(rule.value, tree, null);
// Calculate fluid typography rules where available.
if (cssProperty === 'font-size') {
/*
* getTypographyFontSizeValue() will check
* if fluid typography has been activated and also
* whether the incoming value can be converted to a fluid value.
* Values that already have a "clamp()" function will not pass the test,
* and therefore the original $value will be returned.
*/
ruleValue = getTypographyFontSizeValue({
size: ruleValue
}, tree?.settings);
}
// For aspect ratio to work, other dimensions rules (and Cover block defaults) must be unset.
// This ensures that a fixed height does not override the aspect ratio.
if (cssProperty === 'aspect-ratio') {
output.push('min-height: unset');
}
output.push(`${cssProperty}: ${ruleValue}`);
});
return output;
}
/**
* Get generated CSS for layout styles by looking up layout definitions provided
* in theme.json, and outputting common layout styles, and specific blockGap values.
*
* @param {Object} props
* @param {Object} props.layoutDefinitions Layout definitions, keyed by layout type.
* @param {Object} props.style A style object containing spacing values.
* @param {string} props.selector Selector used to group together layout styling rules.
* @param {boolean} props.hasBlockGapSupport Whether or not the theme opts-in to blockGap support.
* @param {boolean} props.hasFallbackGapSupport Whether or not the theme allows fallback gap styles.
* @param {?string} props.fallbackGapValue An optional fallback gap value if no real gap value is available.
* @return {string} Generated CSS rules for the layout styles.
*/
function getLayoutStyles({
layoutDefinitions = LAYOUT_DEFINITIONS,
style,
selector,
hasBlockGapSupport,
hasFallbackGapSupport,
fallbackGapValue
}) {
let ruleset = '';
let gapValue = hasBlockGapSupport ? getGapCSSValue(style?.spacing?.blockGap) : '';
// Ensure a fallback gap value for the root layout definitions,
// and use a fallback value if one is provided for the current block.
if (hasFallbackGapSupport) {
if (selector === ROOT_BLOCK_SELECTOR) {
gapValue = !gapValue ? '0.5em' : gapValue;
} else if (!hasBlockGapSupport && fallbackGapValue) {
gapValue = fallbackGapValue;
}
}
if (gapValue && layoutDefinitions) {
Object.values(layoutDefinitions).forEach(({
className,
name,
spacingStyles
}) => {
// Allow outputting fallback gap styles for flex layout type when block gap support isn't available.
if (!hasBlockGapSupport && 'flex' !== name && 'grid' !== name) {
return;
}
if (spacingStyles?.length) {
spacingStyles.forEach(spacingStyle => {
const declarations = [];
if (spacingStyle.rules) {
Object.entries(spacingStyle.rules).forEach(([cssProperty, cssValue]) => {
declarations.push(`${cssProperty}: ${cssValue ? cssValue : gapValue}`);
});
}
if (declarations.length) {
let combinedSelector = '';
if (!hasBlockGapSupport) {
// For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles.
combinedSelector = selector === ROOT_BLOCK_SELECTOR ? `:where(.${className}${spacingStyle?.selector || ''})` : `:where(${selector}.${className}${spacingStyle?.selector || ''})`;
} else {
combinedSelector = selector === ROOT_BLOCK_SELECTOR ? `:root :where(.${className})${spacingStyle?.selector || ''}` : `:root :where(${selector}-${className})${spacingStyle?.selector || ''}`;
}
ruleset += `${combinedSelector} { ${declarations.join('; ')}; }`;
}
});
}
});
// For backwards compatibility, ensure the legacy block gap CSS variable is still available.
if (selector === ROOT_BLOCK_SELECTOR && hasBlockGapSupport) {
ruleset += `${ROOT_CSS_PROPERTIES_SELECTOR} { --wp--style--block-gap: ${gapValue}; }`;
}
}
// Output base styles
if (selector === ROOT_BLOCK_SELECTOR && layoutDefinitions) {
const validDisplayModes = ['block', 'flex', 'grid'];
Object.values(layoutDefinitions).forEach(({
className,
displayMode,
baseStyles
}) => {
if (displayMode && validDisplayModes.includes(displayMode)) {
ruleset += `${selector} .${className} { display:${displayMode}; }`;
}
if (baseStyles?.length) {
baseStyles.forEach(baseStyle => {
const declarations = [];
if (baseStyle.rules) {
Object.entries(baseStyle.rules).forEach(([cssProperty, cssValue]) => {
declarations.push(`${cssProperty}: ${cssValue}`);
});
}
if (declarations.length) {
const combinedSelector = `.${className}${baseStyle?.selector || ''}`;
ruleset += `${combinedSelector} { ${declarations.join('; ')}; }`;
}
});
}
});
}
return ruleset;
}
const STYLE_KEYS = ['border', 'color', 'dimensions', 'spacing', 'typography', 'filter', 'outline', 'shadow', 'background'];
function pickStyleKeys(treeToPickFrom) {
if (!treeToPickFrom) {
return {};
}
const entries = Object.entries(treeToPickFrom);
const pickedEntries = entries.filter(([key]) => STYLE_KEYS.includes(key));
// clone the style objects so that `getFeatureDeclarations` can remove consumed keys from it
const clonedEntries = pickedEntries.map(([key, style]) => [key, JSON.parse(JSON.stringify(style))]);
return Object.fromEntries(clonedEntries);
}
const getNodesWithStyles = (tree, blockSelectors) => {
var _tree$styles$blocks;
const nodes = [];
if (!tree?.styles) {
return nodes;
}
// Top-level.
const styles = pickStyleKeys(tree.styles);
if (styles) {
nodes.push({
styles,
selector: ROOT_BLOCK_SELECTOR,
// Root selector (body) styles should not be wrapped in `:root where()` to keep
// specificity at (0,0,1) and maintain backwards compatibility.
skipSelectorWrapper: true
});
}
Object.entries(external_wp_blocks_namespaceObject.__EXPERIMENTAL_ELEMENTS).forEach(([name, selector]) => {
if (tree.styles?.elements?.[name]) {
nodes.push({
styles: tree.styles?.elements?.[name],
selector,
// Top level elements that don't use a class name should not receive the
// `:root :where()` wrapper to maintain backwards compatibility.
skipSelectorWrapper: !ELEMENT_CLASS_NAMES[name]
});
}
});
// Iterate over blocks: they can have styles & elements.
Object.entries((_tree$styles$blocks = tree.styles?.blocks) !== null && _tree$styles$blocks !== void 0 ? _tree$styles$blocks : {}).forEach(([blockName, node]) => {
var _node$elements;
const blockStyles = pickStyleKeys(node);
if (node?.variations) {
const variations = {};
Object.entries(node.variations).forEach(([variationName, variation]) => {
var _variation$elements, _variation$blocks;
variations[variationName] = pickStyleKeys(variation);
if (variation?.css) {
variations[variationName].css = variation.css;
}
const variationSelector = blockSelectors[blockName]?.styleVariationSelectors?.[variationName];
// Process the variation's inner element styles.
// This comes before the inner block styles so the
// element styles within the block type styles take
// precedence over these.
Object.entries((_variation$elements = variation?.elements) !== null && _variation$elements !== void 0 ? _variation$elements : {}).forEach(([element, elementStyles]) => {
if (elementStyles && external_wp_blocks_namespaceObject.__EXPERIMENTAL_ELEMENTS[element]) {
nodes.push({
styles: elementStyles,
selector: scopeSelector(variationSelector, external_wp_blocks_namespaceObject.__EXPERIMENTAL_ELEMENTS[element])
});
}
});
// Process the variations inner block type styles.
Object.entries((_variation$blocks = variation?.blocks) !== null && _variation$blocks !== void 0 ? _variation$blocks : {}).forEach(([variationBlockName, variationBlockStyles]) => {
var _variationBlockStyles;
const variationBlockSelector = scopeSelector(variationSelector, blockSelectors[variationBlockName]?.selector);
const variationDuotoneSelector = scopeSelector(variationSelector, blockSelectors[variationBlockName]?.duotoneSelector);
const variationFeatureSelectors = scopeFeatureSelectors(variationSelector, blockSelectors[variationBlockName]?.featureSelectors);
const variationBlockStyleNodes = pickStyleKeys(variationBlockStyles);
if (variationBlockStyles?.css) {
variationBlockStyleNodes.css = variationBlockStyles.css;
}
nodes.push({
selector: variationBlockSelector,
duotoneSelector: variationDuotoneSelector,
featureSelectors: variationFeatureSelectors,
fallbackGapValue: blockSelectors[variationBlockName]?.fallbackGapValue,
hasLayoutSupport: blockSelectors[variationBlockName]?.hasLayoutSupport,
styles: variationBlockStyleNodes
});
// Process element styles for the inner blocks
// of the variation.
Object.entries((_variationBlockStyles = variationBlockStyles.elements) !== null && _variationBlockStyles !== void 0 ? _variationBlockStyles : {}).forEach(([variationBlockElement, variationBlockElementStyles]) => {
if (variationBlockElementStyles && external_wp_blocks_namespaceObject.__EXPERIMENTAL_ELEMENTS[variationBlockElement]) {
nodes.push({
styles: variationBlockElementStyles,
selector: scopeSelector(variationBlockSelector, external_wp_blocks_namespaceObject.__EXPERIMENTAL_ELEMENTS[variationBlockElement])
});
}
});
});
});
blockStyles.variations = variations;
}
if (blockSelectors?.[blockName]?.selector) {
nodes.push({
duotoneSelector: blockSelectors[blockName].duotoneSelector,
fallbackGapValue: blockSelectors[blockName].fallbackGapValue,
hasLayoutSupport: blockSelectors[blockName].hasLayoutSupport,
selector: blockSelectors[blockName].selector,
styles: blockStyles,
featureSelectors: blockSelectors[blockName].featureSelectors,
styleVariationSelectors: blockSelectors[blockName].styleVariationSelectors
});
}
Object.entries((_node$elements = node?.elements) !== null && _node$elements !== void 0 ? _node$elements : {}).forEach(([elementName, value]) => {
if (value && blockSelectors?.[blockName] && external_wp_blocks_namespaceObject.__EXPERIMENTAL_ELEMENTS[elementName]) {
nodes.push({
styles: value,
selector: blockSelectors[blockName]?.selector.split(',').map(sel => {
const elementSelectors = external_wp_blocks_namespaceObject.__EXPERIMENTAL_ELEMENTS[elementName].split(',');
return elementSelectors.map(elementSelector => sel + ' ' + elementSelector);
}).join(',')
});
}
});
});
return nodes;
};
const getNodesWithSettings = (tree, blockSelectors) => {
var _tree$settings$blocks;
const nodes = [];
if (!tree?.settings) {
return nodes;
}
const pickPresets = treeToPickFrom => {
let presets = {};
PRESET_METADATA.forEach(({
path
}) => {
const value = getValueFromObjectPath(treeToPickFrom, path, false);
if (value !== false) {
presets = setImmutably(presets, path, value);
}
});
return presets;
};
// Top-level.
const presets = pickPresets(tree.settings);
const custom = tree.settings?.custom;
if (Object.keys(presets).length > 0 || custom) {
nodes.push({
presets,
custom,
selector: ROOT_CSS_PROPERTIES_SELECTOR
});
}
// Blocks.
Object.entries((_tree$settings$blocks = tree.settings?.blocks) !== null && _tree$settings$blocks !== void 0 ? _tree$settings$blocks : {}).forEach(([blockName, node]) => {
const blockPresets = pickPresets(node);
const blockCustom = node.custom;
if (Object.keys(blockPresets).length > 0 || blockCustom) {
nodes.push({
presets: blockPresets,
custom: blockCustom,
selector: blockSelectors[blockName]?.selector
});
}
});
return nodes;
};
const toCustomProperties = (tree, blockSelectors) => {
const settings = getNodesWithSettings(tree, blockSelectors);
let ruleset = '';
settings.forEach(({
presets,
custom,
selector
}) => {
const declarations = getPresetsDeclarations(presets, tree?.settings);
const customProps = flattenTree(custom, '--wp--custom--', '--');
if (customProps.length > 0) {
declarations.push(...customProps);
}
if (declarations.length > 0) {
ruleset += `${selector}{${declarations.join(';')};}`;
}
});
return ruleset;
};
const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles = false, disableRootPadding = false, styleOptions = undefined) => {
// These allow opting out of certain sets of styles.
const options = {
blockGap: true,
blockStyles: true,
layoutStyles: true,
marginReset: true,
presets: true,
rootPadding: true,
variationStyles: false,
...styleOptions
};
const nodesWithStyles = getNodesWithStyles(tree, blockSelectors);
const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
const useRootPaddingAlign = tree?.settings?.useRootPaddingAwareAlignments;
const {
contentSize,
wideSize
} = tree?.settings?.layout || {};
const hasBodyStyles = options.marginReset || options.rootPadding || options.layoutStyles;
let ruleset = '';
if (options.presets && (contentSize || wideSize)) {
ruleset += `${ROOT_CSS_PROPERTIES_SELECTOR} {`;
ruleset = contentSize ? ruleset + ` --wp--style--global--content-size: ${contentSize};` : ruleset;
ruleset = wideSize ? ruleset + ` --wp--style--global--wide-size: ${wideSize};` : ruleset;
ruleset += '}';
}
if (hasBodyStyles) {
/*
* Reset default browser margin on the body element.
* This is set on the body selector **before** generating the ruleset
* from the `theme.json`. This is to ensure that if the `theme.json` declares
* `margin` in its `spacing` declaration for the `body` element then these
* user-generated values take precedence in the CSS cascade.
* @link https://github.com/WordPress/gutenberg/issues/36147.
*/
ruleset += ':where(body) {margin: 0;';
// Root padding styles should be output for full templates, patterns and template parts.
if (options.rootPadding && useRootPaddingAlign) {
/*
* These rules reproduce the ones from https://github.com/WordPress/gutenberg/blob/79103f124925d1f457f627e154f52a56228ed5ad/lib/class-wp-theme-json-gutenberg.php#L2508
* almost exactly, but for the selectors that target block wrappers in the front end. This code only runs in the editor, so it doesn't need those selectors.
*/
ruleset += `padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) }
.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }
.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; }
.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull { margin-left: 0; margin-right: 0;
`;
}
ruleset += '}';
}
if (options.blockStyles) {
nodesWithStyles.forEach(({
selector,
duotoneSelector,
styles,
fallbackGapValue,
hasLayoutSupport,
featureSelectors,
styleVariationSelectors,
skipSelectorWrapper
}) => {
// Process styles for block support features with custom feature level
// CSS selectors set.
if (featureSelectors) {
const featureDeclarations = getFeatureDeclarations(featureSelectors, styles);
Object.entries(featureDeclarations).forEach(([cssSelector, declarations]) => {
if (declarations.length) {
const rules = declarations.join(';');
ruleset += `:root :where(${cssSelector}){${rules};}`;
}
});
}
// Process duotone styles.
if (duotoneSelector) {
const duotoneStyles = {};
if (styles?.filter) {
duotoneStyles.filter = styles.filter;
delete styles.filter;
}
const duotoneDeclarations = getStylesDeclarations(duotoneStyles);
if (duotoneDeclarations.length) {
ruleset += `${duotoneSelector}{${duotoneDeclarations.join(';')};}`;
}
}
// Process blockGap and layout styles.
if (!disableLayoutStyles && (ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport)) {
ruleset += getLayoutStyles({
style: styles,
selector,
hasBlockGapSupport,
hasFallbackGapSupport,
fallbackGapValue
});
}
// Process the remaining block styles (they use either normal block class or __experimentalSelector).
const styleDeclarations = getStylesDeclarations(styles, selector, useRootPaddingAlign, tree, disableRootPadding);
if (styleDeclarations?.length) {
const generalSelector = skipSelectorWrapper ? selector : `:root :where(${selector})`;
ruleset += `${generalSelector}{${styleDeclarations.join(';')};}`;
}
if (styles?.css) {
ruleset += processCSSNesting(styles.css, `:root :where(${selector})`);
}
if (options.variationStyles && styleVariationSelectors) {
Object.entries(styleVariationSelectors).forEach(([styleVariationName, styleVariationSelector]) => {
const styleVariations = styles?.variations?.[styleVariationName];
if (styleVariations) {
// If the block uses any custom selectors for block support, add those first.
if (featureSelectors) {
const featureDeclarations = getFeatureDeclarations(featureSelectors, styleVariations);
Object.entries(featureDeclarations).forEach(([baseSelector, declarations]) => {
if (declarations.length) {
const cssSelector = concatFeatureVariationSelectorString(baseSelector, styleVariationSelector);
const rules = declarations.join(';');
ruleset += `:root :where(${cssSelector}){${rules};}`;
}
});
}
// Otherwise add regular selectors.
const styleVariationDeclarations = getStylesDeclarations(styleVariations, styleVariationSelector, useRootPaddingAlign, tree);
if (styleVariationDeclarations.length) {
ruleset += `:root :where(${styleVariationSelector}){${styleVariationDeclarations.join(';')};}`;
}
if (styleVariations?.css) {
ruleset += processCSSNesting(styleVariations.css, `:root :where(${styleVariationSelector})`);
}
}
});
}
// Check for pseudo selector in `styles` and handle separately.
const pseudoSelectorStyles = Object.entries(styles).filter(([key]) => key.startsWith(':'));
if (pseudoSelectorStyles?.length) {
pseudoSelectorStyles.forEach(([pseudoKey, pseudoStyle]) => {
const pseudoDeclarations = getStylesDeclarations(pseudoStyle);
if (!pseudoDeclarations?.length) {
return;
}
// `selector` may be provided in a form
// where block level selectors have sub element
// selectors appended to them as a comma separated
// string.
// e.g. `h1 a,h2 a,h3 a,h4 a,h5 a,h6 a`;
// Split and append pseudo selector to create
// the proper rules to target the elements.
const _selector = selector.split(',').map(sel => sel + pseudoKey).join(',');
// As pseudo classes such as :hover, :focus etc. have class-level
// specificity, they must use the `:root :where()` wrapper. This.
// caps the specificity at `0-1-0` to allow proper nesting of variations
// and block type element styles.
const pseudoRule = `:root :where(${_selector}){${pseudoDeclarations.join(';')};}`;
ruleset += pseudoRule;
});
}
});
}
if (options.layoutStyles) {
/* Add alignment / layout styles */
ruleset = ruleset + '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
ruleset = ruleset + '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
ruleset = ruleset + '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
}
if (options.blockGap && hasBlockGapSupport) {
// Use fallback of `0.5em` just in case, however if there is blockGap support, there should nearly always be a real value.
const gapValue = getGapCSSValue(tree?.styles?.spacing?.blockGap) || '0.5em';
ruleset = ruleset + `:root :where(.wp-site-blocks) > * { margin-block-start: ${gapValue}; margin-block-end: 0; }`;
ruleset = ruleset + ':root :where(.wp-site-blocks) > :first-child { margin-block-start: 0; }';
ruleset = ruleset + ':root :where(.wp-site-blocks) > :last-child { margin-block-end: 0; }';
}
if (options.presets) {
nodesWithSettings.forEach(({
selector,
presets
}) => {
if (ROOT_BLOCK_SELECTOR === selector || ROOT_CSS_PROPERTIES_SELECTOR === selector) {
// Do not add extra specificity for top-level classes.
selector = '';
}
const classes = getPresetsClasses(selector, presets);
if (classes.length > 0) {
ruleset += classes;
}
});
}
return ruleset;
};
function toSvgFilters(tree, blockSelectors) {
const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
return nodesWithSettings.flatMap(({
presets
}) => {
return getPresetsSvgFilters(presets);
});
}
const getSelectorsConfig = (blockType, rootSelector) => {
if (blockType?.selectors && Object.keys(blockType.selectors).length > 0) {
return blockType.selectors;
}
const config = {
root: rootSelector
};
Object.entries(BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS).forEach(([featureKey, featureName]) => {
const featureSelector = getBlockCSSSelector(blockType, featureKey);
if (featureSelector) {
config[featureName] = featureSelector;
}
});
return config;
};
const getBlockSelectors = (blockTypes, getBlockStyles, variationInstanceId) => {
const result = {};
blockTypes.forEach(blockType => {
const name = blockType.name;
const selector = getBlockCSSSelector(blockType);
let duotoneSelector = getBlockCSSSelector(blockType, 'filter.duotone');
// Keep backwards compatibility for support.color.__experimentalDuotone.
if (!duotoneSelector) {
const rootSelector = getBlockCSSSelector(blockType);
const duotoneSupport = (0,external_wp_blocks_namespaceObject.getBlockSupport)(blockType, 'color.__experimentalDuotone', false);
duotoneSelector = duotoneSupport && scopeSelector(rootSelector, duotoneSupport);
}
const hasLayoutSupport = !!blockType?.supports?.layout || !!blockType?.supports?.__experimentalLayout;
const fallbackGapValue = blockType?.supports?.spacing?.blockGap?.__experimentalDefault;
const blockStyleVariations = getBlockStyles(name);
const styleVariationSelectors = {};
blockStyleVariations?.forEach(variation => {
const variationSuffix = variationInstanceId ? `-${variationInstanceId}` : '';
const variationName = `${variation.name}${variationSuffix}`;
const styleVariationSelector = getBlockStyleVariationSelector(variationName, selector);
styleVariationSelectors[variationName] = styleVariationSelector;
});
// For each block support feature add any custom selectors.
const featureSelectors = getSelectorsConfig(blockType, selector);
result[name] = {
duotoneSelector,
fallbackGapValue,
featureSelectors: Object.keys(featureSelectors).length ? featureSelectors : undefined,
hasLayoutSupport,
name,
selector,
styleVariationSelectors: blockStyleVariations?.length ? styleVariationSelectors : undefined
};
});
return result;
};
/**
* If there is a separator block whose color is defined in theme.json via background,
* update the separator color to the same value by using border color.
*
* @param {Object} config Theme.json configuration file object.
* @return {Object} configTheme.json configuration file object updated.
*/
function updateConfigWithSeparator(config) {
const needsSeparatorStyleUpdate = config.styles?.blocks?.['core/separator'] && config.styles?.blocks?.['core/separator'].color?.background && !config.styles?.blocks?.['core/separator'].color?.text && !config.styles?.blocks?.['core/separator'].border?.color;
if (needsSeparatorStyleUpdate) {
return {
...config,
styles: {
...config.styles,
blocks: {
...config.styles.blocks,
'core/separator': {
...config.styles.blocks['core/separator'],
color: {
...config.styles.blocks['core/separator'].color,
text: config.styles?.blocks['core/separator'].color.background
}
}
}
}
};
}
return config;
}
function processCSSNesting(css, blockSelector) {
let processedCSS = '';
if (!css || css.trim() === '') {
return processedCSS;
}
// Split CSS nested rules.
const parts = css.split('&');
parts.forEach(part => {
if (!part || part.trim() === '') {
return;
}
const isRootCss = !part.includes('{');
if (isRootCss) {
// If the part doesn't contain braces, it applies to the root level.
processedCSS += `:root :where(${blockSelector}){${part.trim()}}`;
} else {
// If the part contains braces, it's a nested CSS rule.
const splittedPart = part.replace('}', '').split('{');
if (splittedPart.length !== 2) {
return;
}
const [nestedSelector, cssValue] = splittedPart;
// Handle pseudo elements such as ::before, ::after, etc. Regex will also
// capture any leading combinator such as >, +, or ~, as well as spaces.
// This allows pseudo elements as descendants e.g. `.parent ::before`.
const matches = nestedSelector.match(/([>+~\s]*::[a-zA-Z-]+)/);
const pseudoPart = matches ? matches[1] : '';
const withoutPseudoElement = matches ? nestedSelector.replace(pseudoPart, '').trim() : nestedSelector.trim();
let combinedSelector;
if (withoutPseudoElement === '') {
// Only contained a pseudo element to use the block selector to form
// the final `:root :where()` selector.
combinedSelector = blockSelector;
} else {
// If the nested selector is a descendant of the block scope it with the
// block selector. Otherwise append it to the block selector.
combinedSelector = nestedSelector.startsWith(' ') ? scopeSelector(blockSelector, withoutPseudoElement) : appendToSelector(blockSelector, withoutPseudoElement);
}
// Build final rule, re-adding any pseudo element outside the `:where()`
// to maintain valid CSS selector.
processedCSS += `:root :where(${combinedSelector})${pseudoPart}{${cssValue.trim()}}`;
}
});
return processedCSS;
}
/**
* Returns the global styles output using a global styles configuration.
* If wishing to generate global styles and settings based on the
* global styles config loaded in the editor context, use `useGlobalStylesOutput()`.
* The use case for a custom config is to generate bespoke styles
* and settings for previews, or other out-of-editor experiences.
*
* @param {Object} mergedConfig Global styles configuration.
* @param {boolean} disableRootPadding Disable root padding styles.
*
* @return {Array} Array of stylesheets and settings.
*/
function useGlobalStylesOutputWithConfig(mergedConfig = {}, disableRootPadding) {
const [blockGap] = useGlobalSetting('spacing.blockGap');
const hasBlockGapSupport = blockGap !== null;
const hasFallbackGapSupport = !hasBlockGapSupport; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback styles support.
const disableLayoutStyles = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getSettings
} = select(store);
return !!getSettings().disableLayoutStyles;
});
const {
getBlockStyles
} = (0,external_wp_data_namespaceObject.useSelect)(external_wp_blocks_namespaceObject.store);
return (0,external_wp_element_namespaceObject.useMemo)(() => {
var _updatedConfig$styles;
if (!mergedConfig?.styles || !mergedConfig?.settings) {
return [];
}
const updatedConfig = updateConfigWithSeparator(mergedConfig);
const blockSelectors = getBlockSelectors((0,external_wp_blocks_namespaceObject.getBlockTypes)(), getBlockStyles);
const customProperties = toCustomProperties(updatedConfig, blockSelectors);
const globalStyles = toStyles(updatedConfig, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles, disableRootPadding);
const svgs = toSvgFilters(updatedConfig, blockSelectors);
const styles = [{
css: customProperties,
isGlobalStyles: true
}, {
css: globalStyles,
isGlobalStyles: true
},
// Load custom CSS in own stylesheet so that any invalid CSS entered in the input won't break all the global styles in the editor.
{
css: (_updatedConfig$styles = updatedConfig.styles.css) !== null && _updatedConfig$styles !== void 0 ? _updatedConfig$styles : '',
isGlobalStyles: true
}, {
assets: svgs,
__unstableType: 'svg',
isGlobalStyles: true
}];
// Loop through the blocks to check if there are custom CSS values.
// If there are, get the block selector and push the selector together with
// the CSS value to the 'stylesheets' array.
(0,external_wp_blocks_namespaceObject.getBlockTypes)().forEach(blockType => {
if (updatedConfig.styles.blocks[blockType.name]?.css) {
const selector = blockSelectors[blockType.name].selector;
styles.push({
css: processCSSNesting(updatedConfig.styles.blocks[blockType.name]?.css, selector),
isGlobalStyles: true
});
}
});
return [styles, updatedConfig.settings];
}, [hasBlockGapSupport, hasFallbackGapSupport, mergedConfig, disableLayoutStyles, disableRootPadding, getBlockStyles]);
}
/**
* Returns the global styles output based on the current state of global styles config loaded in the editor context.
*
* @param {boolean} disableRootPadding Disable root padding styles.
*
* @return {Array} Array of stylesheets and settings.
*/
function useGlobalStylesOutput(disableRootPadding = false) {
const {
merged: mergedConfig
} = (0,external_wp_element_namespaceObject.useContext)(GlobalStylesContext);
return useGlobalStylesOutputWithConfig(mergedConfig, disableRootPadding);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/block-style-variation.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const VARIATION_PREFIX = 'is-style-';
function getVariationMatches(className) {
if (!className) {
return [];
}
return className.split(/\s+/).reduce((matches, name) => {
if (name.startsWith(VARIATION_PREFIX)) {
const match = name.slice(VARIATION_PREFIX.length);
if (match !== 'default') {
matches.push(match);
}
}
return matches;
}, []);
}
/**
* Get the first block style variation that has been registered from the class string.
*
* @param {string} className CSS class string for a block.
* @param {Array} registeredStyles Currently registered block styles.
*
* @return {string|null} The name of the first registered variation.
*/
function getVariationNameFromClass(className, registeredStyles = []) {
// The global flag affects how capturing groups work in JS. So the regex
// below will only return full CSS classes not just the variation name.
const matches = getVariationMatches(className);
if (!matches) {
return null;
}
for (const variation of matches) {
if (registeredStyles.some(style => style.name === variation)) {
return variation;
}
}
return null;
}
// A helper component to apply a style override using the useStyleOverride hook.
function OverrideStyles({
override
}) {
usePrivateStyleOverride(override);
}
/**
* This component is used to generate new block style variation overrides
* based on an incoming theme config. If a matching style is found in the config,
* a new override is created and returned. The overrides can be used in conjunction with
* useStyleOverride to apply the new styles to the editor. Its use is
* subject to change.
*
* @param {Object} props Props.
* @param {Object} props.config A global styles object, containing settings and styles.
* @return {JSX.Element|undefined} An array of new block variation overrides.
*/
function __unstableBlockStyleVariationOverridesWithConfig({
config
}) {
const {
getBlockStyles,
overrides
} = (0,external_wp_data_namespaceObject.useSelect)(select => ({
getBlockStyles: select(external_wp_blocks_namespaceObject.store).getBlockStyles,
overrides: unlock(select(store)).getStyleOverrides()
}), []);
const {
getBlockName
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const overridesWithConfig = (0,external_wp_element_namespaceObject.useMemo)(() => {
if (!overrides?.length) {
return;
}
const newOverrides = [];
const overriddenClientIds = [];
for (const [, override] of overrides) {
if (override?.variation && override?.clientId &&
/*
* Because this component overwrites existing style overrides,
* filter out any overrides that are already present in the store.
*/
!overriddenClientIds.includes(override.clientId)) {
const blockName = getBlockName(override.clientId);
const configStyles = config?.styles?.blocks?.[blockName]?.variations?.[override.variation];
if (configStyles) {
const variationConfig = {
settings: config?.settings,
// The variation style data is all that is needed to generate
// the styles for the current application to a block. The variation
// name is updated to match the instance specific class name.
styles: {
blocks: {
[blockName]: {
variations: {
[`${override.variation}-${override.clientId}`]: configStyles
}
}
}
}
};
const blockSelectors = getBlockSelectors((0,external_wp_blocks_namespaceObject.getBlockTypes)(), getBlockStyles, override.clientId);
const hasBlockGapSupport = false;
const hasFallbackGapSupport = true;
const disableLayoutStyles = true;
const disableRootPadding = true;
const variationStyles = toStyles(variationConfig, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles, disableRootPadding, {
blockGap: false,
blockStyles: true,
layoutStyles: false,
marginReset: false,
presets: false,
rootPadding: false,
variationStyles: true
});
newOverrides.push({
id: `${override.variation}-${override.clientId}`,
css: variationStyles,
__unstableType: 'variation',
variation: override.variation,
// The clientId will be stored with the override and used to ensure
// the order of overrides matches the order of blocks so that the
// correct CSS cascade is maintained.
clientId: override.clientId
});
overriddenClientIds.push(override.clientId);
}
}
}
return newOverrides;
}, [config, overrides, getBlockStyles, getBlockName]);
if (!overridesWithConfig || !overridesWithConfig.length) {
return;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: overridesWithConfig.map(override => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(OverrideStyles, {
override: override
}, override.id))
});
}
/**
* Retrieves any variation styles data and resolves any referenced values.
*
* @param {Object} globalStyles A complete global styles object, containing settings and styles.
* @param {string} name The name of the desired block type.
* @param {variation} variation The of the block style variation to retrieve data for.
*
* @return {Object|undefined} The global styles data for the specified variation.
*/
function getVariationStylesWithRefValues(globalStyles, name, variation) {
if (!globalStyles?.styles?.blocks?.[name]?.variations?.[variation]) {
return;
}
// Helper to recursively look for `ref` values to resolve.
const replaceRefs = variationStyles => {
Object.keys(variationStyles).forEach(key => {
const value = variationStyles[key];
// Only process objects.
if (typeof value === 'object' && value !== null) {
// Process `ref` value if present.
if (value.ref !== undefined) {
if (typeof value.ref !== 'string' || value.ref.trim() === '') {
// Remove invalid ref.
delete variationStyles[key];
} else {
// Resolve `ref` value.
const refValue = getValueFromObjectPath(globalStyles, value.ref);
if (refValue) {
variationStyles[key] = refValue;
} else {
delete variationStyles[key];
}
}
} else {
// Recursively resolve `ref` values in nested objects.
replaceRefs(value);
// After recursion, if value is empty due to explicitly
// `undefined` ref value, remove it.
if (Object.keys(value).length === 0) {
delete variationStyles[key];
}
}
}
});
};
// Deep clone variation node to avoid mutating it within global styles and losing refs.
const styles = JSON.parse(JSON.stringify(globalStyles.styles.blocks[name].variations[variation]));
replaceRefs(styles);
return styles;
}
function useBlockStyleVariation(name, variation, clientId) {
// Prefer global styles data in GlobalStylesContext, which are available
// if in the site editor. Otherwise fall back to whatever is in the
// editor settings and available in the post editor.
const {
merged: mergedConfig
} = (0,external_wp_element_namespaceObject.useContext)(GlobalStylesContext);
const {
globalSettings,
globalStyles
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const settings = select(store).getSettings();
return {
globalSettings: settings.__experimentalFeatures,
globalStyles: settings[globalStylesDataKey]
};
}, []);
return (0,external_wp_element_namespaceObject.useMemo)(() => {
var _mergedConfig$setting, _mergedConfig$styles, _mergedConfig$setting2;
const variationStyles = getVariationStylesWithRefValues({
settings: (_mergedConfig$setting = mergedConfig?.settings) !== null && _mergedConfig$setting !== void 0 ? _mergedConfig$setting : globalSettings,
styles: (_mergedConfig$styles = mergedConfig?.styles) !== null && _mergedConfig$styles !== void 0 ? _mergedConfig$styles : globalStyles
}, name, variation);
return {
settings: (_mergedConfig$setting2 = mergedConfig?.settings) !== null && _mergedConfig$setting2 !== void 0 ? _mergedConfig$setting2 : globalSettings,
// The variation style data is all that is needed to generate
// the styles for the current application to a block. The variation
// name is updated to match the instance specific class name.
styles: {
blocks: {
[name]: {
variations: {
[`${variation}-${clientId}`]: variationStyles
}
}
}
}
};
}, [mergedConfig, globalSettings, globalStyles, variation, clientId, name]);
}
// Rather than leveraging `useInstanceId` here, the `clientId` is used.
// This is so that the variation style override's ID is predictable
// when the order of applied style variations changes.
function block_style_variation_useBlockProps({
name,
className,
clientId
}) {
const {
getBlockStyles
} = (0,external_wp_data_namespaceObject.useSelect)(external_wp_blocks_namespaceObject.store);
const registeredStyles = getBlockStyles(name);
const variation = getVariationNameFromClass(className, registeredStyles);
const variationClass = `${VARIATION_PREFIX}${variation}-${clientId}`;
const {
settings,
styles
} = useBlockStyleVariation(name, variation, clientId);
const variationStyles = (0,external_wp_element_namespaceObject.useMemo)(() => {
if (!variation) {
return;
}
const variationConfig = {
settings,
styles
};
const blockSelectors = getBlockSelectors((0,external_wp_blocks_namespaceObject.getBlockTypes)(), getBlockStyles, clientId);
const hasBlockGapSupport = false;
const hasFallbackGapSupport = true;
const disableLayoutStyles = true;
const disableRootPadding = true;
return toStyles(variationConfig, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles, disableRootPadding, {
blockGap: false,
blockStyles: true,
layoutStyles: false,
marginReset: false,
presets: false,
rootPadding: false,
variationStyles: true
});
}, [variation, settings, styles, getBlockStyles, clientId]);
usePrivateStyleOverride({
id: `variation-${clientId}`,
css: variationStyles,
__unstableType: 'variation',
variation,
// The clientId will be stored with the override and used to ensure
// the order of overrides matches the order of blocks so that the
// correct CSS cascade is maintained.
clientId
});
return variation ? {
className: variationClass
} : {};
}
/* harmony default export */ const block_style_variation = ({
hasSupport: () => true,
attributeKeys: ['className'],
isMatch: ({
className
}) => getVariationMatches(className).length > 0,
useBlockProps: block_style_variation_useBlockProps
});
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/layout.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const layoutBlockSupportKey = 'layout';
const {
kebabCase: layout_kebabCase
} = unlock(external_wp_components_namespaceObject.privateApis);
function hasLayoutBlockSupport(blockName) {
return (0,external_wp_blocks_namespaceObject.hasBlockSupport)(blockName, 'layout') || (0,external_wp_blocks_namespaceObject.hasBlockSupport)(blockName, '__experimentalLayout');
}
/**
* Generates the utility classnames for the given block's layout attributes.
*
* @param { Object } blockAttributes Block attributes.
* @param { string } blockName Block name.
*
* @return { Array } Array of CSS classname strings.
*/
function useLayoutClasses(blockAttributes = {}, blockName = '') {
const {
layout
} = blockAttributes;
const {
default: defaultBlockLayout
} = (0,external_wp_blocks_namespaceObject.getBlockSupport)(blockName, layoutBlockSupportKey) || {};
const usedLayout = layout?.inherit || layout?.contentSize || layout?.wideSize ? {
...layout,
type: 'constrained'
} : layout || defaultBlockLayout || {};
const layoutClassnames = [];
if (LAYOUT_DEFINITIONS[usedLayout?.type || 'default']?.className) {
const baseClassName = LAYOUT_DEFINITIONS[usedLayout?.type || 'default']?.className;
const splitBlockName = blockName.split('/');
const fullBlockName = splitBlockName[0] === 'core' ? splitBlockName.pop() : splitBlockName.join('-');
const compoundClassName = `wp-block-${fullBlockName}-${baseClassName}`;
layoutClassnames.push(baseClassName, compoundClassName);
}
const hasGlobalPadding = (0,external_wp_data_namespaceObject.useSelect)(select => {
return (usedLayout?.inherit || usedLayout?.contentSize || usedLayout?.type === 'constrained') && select(store).getSettings().__experimentalFeatures?.useRootPaddingAwareAlignments;
}, [usedLayout?.contentSize, usedLayout?.inherit, usedLayout?.type]);
if (hasGlobalPadding) {
layoutClassnames.push('has-global-padding');
}
if (usedLayout?.orientation) {
layoutClassnames.push(`is-${layout_kebabCase(usedLayout.orientation)}`);
}
if (usedLayout?.justifyContent) {
layoutClassnames.push(`is-content-justification-${layout_kebabCase(usedLayout.justifyContent)}`);
}
if (usedLayout?.flexWrap && usedLayout.flexWrap === 'nowrap') {
layoutClassnames.push('is-nowrap');
}
return layoutClassnames;
}
/**
* Generates a CSS rule with the given block's layout styles.
*
* @param { Object } blockAttributes Block attributes.
* @param { string } blockName Block name.
* @param { string } selector A selector to use in generating the CSS rule.
*
* @return { string } CSS rule.
*/
function useLayoutStyles(blockAttributes = {}, blockName, selector) {
const {
layout = {},
style = {}
} = blockAttributes;
// Update type for blocks using legacy layouts.
const usedLayout = layout?.inherit || layout?.contentSize || layout?.wideSize ? {
...layout,
type: 'constrained'
} : layout || {};
const fullLayoutType = getLayoutType(usedLayout?.type || 'default');
const [blockGapSupport] = use_settings_useSettings('spacing.blockGap');
const hasBlockGapSupport = blockGapSupport !== null;
return fullLayoutType?.getLayoutStyle?.({
blockName,
selector,
layout,
style,
hasBlockGapSupport
});
}
function LayoutPanelPure({
layout,
setAttributes,
name: blockName,
clientId
}) {
const settings = useBlockSettings(blockName);
// Block settings come from theme.json under settings.[blockName].
const {
layout: layoutSettings
} = settings;
const {
themeSupportsLayout
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getSettings
} = select(store);
return {
themeSupportsLayout: getSettings().supportsLayout
};
}, []);
const blockEditingMode = useBlockEditingMode();
if (blockEditingMode !== 'default') {
return null;
}
// Layout block support comes from the block's block.json.
const layoutBlockSupport = (0,external_wp_blocks_namespaceObject.getBlockSupport)(blockName, layoutBlockSupportKey, {});
const blockSupportAndThemeSettings = {
...layoutSettings,
...layoutBlockSupport
};
const {
allowSwitching,
allowEditing = true,
allowInheriting = true,
default: defaultBlockLayout
} = blockSupportAndThemeSettings;
if (!allowEditing) {
return null;
}
/*
* Try to find the layout type from either the
* block's layout settings or any saved layout config.
*/
const blockSupportAndLayout = {
...layoutBlockSupport,
...layout
};
const {
type,
default: {
type: defaultType = 'default'
} = {}
} = blockSupportAndLayout;
const blockLayoutType = type || defaultType;
// Only show the inherit toggle if it's supported,
// and either the default / flow or the constrained layout type is in use, as the toggle switches from one to the other.
const showInheritToggle = !!(allowInheriting && (!blockLayoutType || blockLayoutType === 'default' || blockLayoutType === 'constrained' || blockSupportAndLayout.inherit));
const usedLayout = layout || defaultBlockLayout || {};
const {
inherit = false,
contentSize = null
} = usedLayout;
/**
* `themeSupportsLayout` is only relevant to the `default/flow` or
* `constrained` layouts and it should not be taken into account when other
* `layout` types are used.
*/
if ((blockLayoutType === 'default' || blockLayoutType === 'constrained') && !themeSupportsLayout) {
return null;
}
const layoutType = getLayoutType(blockLayoutType);
const constrainedType = getLayoutType('constrained');
const displayControlsForLegacyLayouts = !usedLayout.type && (contentSize || inherit);
const hasContentSizeOrLegacySettings = !!inherit || !!contentSize;
const onChangeType = newType => setAttributes({
layout: {
type: newType
}
});
const onChangeLayout = newLayout => setAttributes({
layout: newLayout
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.PanelBody, {
title: (0,external_wp_i18n_namespaceObject.__)('Layout'),
children: [showInheritToggle && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToggleControl, {
__nextHasNoMarginBottom: true,
label: (0,external_wp_i18n_namespaceObject.__)('Inner blocks use content width'),
checked: layoutType?.name === 'constrained' || hasContentSizeOrLegacySettings,
onChange: () => setAttributes({
layout: {
type: layoutType?.name === 'constrained' || hasContentSizeOrLegacySettings ? 'default' : 'constrained'
}
}),
help: layoutType?.name === 'constrained' || hasContentSizeOrLegacySettings ? (0,external_wp_i18n_namespaceObject.__)('Nested blocks use content width with options for full and wide widths.') : (0,external_wp_i18n_namespaceObject.__)('Nested blocks will fill the width of this container. Toggle to constrain.')
})
}), !inherit && allowSwitching && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LayoutTypeSwitcher, {
type: blockLayoutType,
onChange: onChangeType
}), layoutType && layoutType.name !== 'default' && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(layoutType.inspectorControls, {
layout: usedLayout,
onChange: onChangeLayout,
layoutBlockSupport: blockSupportAndThemeSettings,
name: blockName,
clientId: clientId
}), constrainedType && displayControlsForLegacyLayouts && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(constrainedType.inspectorControls, {
layout: usedLayout,
onChange: onChangeLayout,
layoutBlockSupport: blockSupportAndThemeSettings,
name: blockName,
clientId: clientId
})]
})
}), !inherit && layoutType && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(layoutType.toolBarControls, {
layout: usedLayout,
onChange: onChangeLayout,
layoutBlockSupport: layoutBlockSupport,
name: blockName,
clientId: clientId
})]
});
}
/* harmony default export */ const layout = ({
shareWithChildBlocks: true,
edit: LayoutPanelPure,
attributeKeys: ['layout'],
hasSupport(name) {
return hasLayoutBlockSupport(name);
}
});
function LayoutTypeSwitcher({
type,
onChange
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToggleGroupControl, {
__next40pxDefaultSize: true,
isBlock: true,
label: (0,external_wp_i18n_namespaceObject.__)('Layout type'),
__nextHasNoMarginBottom: true,
hideLabelFromVision: true,
isAdaptiveWidth: true,
value: type,
onChange: onChange,
children: getLayoutTypes().map(({
name,
label
}) => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToggleGroupControlOption, {
value: name,
label: label
}, name);
})
});
}
/**
* Filters registered block settings, extending attributes to include `layout`.
*
* @param {Object} settings Original block settings.
*
* @return {Object} Filtered block settings.
*/
function layout_addAttribute(settings) {
var _settings$attributes$;
if ('type' in ((_settings$attributes$ = settings.attributes?.layout) !== null && _settings$attributes$ !== void 0 ? _settings$attributes$ : {})) {
return settings;
}
if (hasLayoutBlockSupport(settings)) {
settings.attributes = {
...settings.attributes,
layout: {
type: 'object'
}
};
}
return settings;
}
function BlockWithLayoutStyles({
block: BlockListBlock,
props,
blockGapSupport,
layoutClasses
}) {
const {
name,
attributes
} = props;
const id = (0,external_wp_compose_namespaceObject.useInstanceId)(BlockListBlock);
const {
layout
} = attributes;
const {
default: defaultBlockLayout
} = (0,external_wp_blocks_namespaceObject.getBlockSupport)(name, layoutBlockSupportKey) || {};
const usedLayout = layout?.inherit || layout?.contentSize || layout?.wideSize ? {
...layout,
type: 'constrained'
} : layout || defaultBlockLayout || {};
const selectorPrefix = `wp-container-${layout_kebabCase(name)}-is-layout-`;
// Higher specificity to override defaults from theme.json.
const selector = `.${selectorPrefix}${id}`;
const hasBlockGapSupport = blockGapSupport !== null;
// Get CSS string for the current layout type.
// The CSS and `style` element is only output if it is not empty.
const fullLayoutType = getLayoutType(usedLayout?.type || 'default');
const css = fullLayoutType?.getLayoutStyle?.({
blockName: name,
selector,
layout: usedLayout,
style: attributes?.style,
hasBlockGapSupport
});
// Attach a `wp-container-` id-based class name as well as a layout class name such as `is-layout-flex`.
const layoutClassNames = dist_clsx({
[`${selectorPrefix}${id}`]: !!css // Only attach a container class if there is generated CSS to be attached.
}, layoutClasses);
useStyleOverride({
css
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockListBlock, {
...props,
__unstableLayoutClassNames: layoutClassNames
});
}
/**
* Override the default block element to add the layout styles.
*
* @param {Function} BlockListBlock Original component.
*
* @return {Function} Wrapped component.
*/
const withLayoutStyles = (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(BlockListBlock => props => {
const {
clientId,
name,
attributes
} = props;
const blockSupportsLayout = hasLayoutBlockSupport(name);
const layoutClasses = useLayoutClasses(attributes, name);
const extraProps = (0,external_wp_data_namespaceObject.useSelect)(select => {
// The callback returns early to avoid block editor subscription.
if (!blockSupportsLayout) {
return;
}
const {
getSettings,
getBlockSettings
} = unlock(select(store));
const {
disableLayoutStyles
} = getSettings();
if (disableLayoutStyles) {
return;
}
const [blockGapSupport] = getBlockSettings(clientId, 'spacing.blockGap');
return {
blockGapSupport
};
}, [blockSupportsLayout, clientId]);
if (!extraProps) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockListBlock, {
...props,
__unstableLayoutClassNames: blockSupportsLayout ? layoutClasses : undefined
});
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockWithLayoutStyles, {
block: BlockListBlock,
props: props,
layoutClasses: layoutClasses,
...extraProps
});
}, 'withLayoutStyles');
(0,external_wp_hooks_namespaceObject.addFilter)('blocks.registerBlockType', 'core/layout/addAttribute', layout_addAttribute);
(0,external_wp_hooks_namespaceObject.addFilter)('editor.BlockListBlock', 'core/editor/layout/with-layout-styles', withLayoutStyles);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/grid/utils.js
function range(start, length) {
return Array.from({
length
}, (_, i) => start + i);
}
class GridRect {
constructor({
columnStart,
rowStart,
columnEnd,
rowEnd,
columnSpan,
rowSpan
} = {}) {
this.columnStart = columnStart !== null && columnStart !== void 0 ? columnStart : 1;
this.rowStart = rowStart !== null && rowStart !== void 0 ? rowStart : 1;
if (columnSpan !== undefined) {
this.columnEnd = this.columnStart + columnSpan - 1;
} else {
this.columnEnd = columnEnd !== null && columnEnd !== void 0 ? columnEnd : this.columnStart;
}
if (rowSpan !== undefined) {
this.rowEnd = this.rowStart + rowSpan - 1;
} else {
this.rowEnd = rowEnd !== null && rowEnd !== void 0 ? rowEnd : this.rowStart;
}
}
get columnSpan() {
return this.columnEnd - this.columnStart + 1;
}
get rowSpan() {
return this.rowEnd - this.rowStart + 1;
}
contains(column, row) {
return column >= this.columnStart && column <= this.columnEnd && row >= this.rowStart && row <= this.rowEnd;
}
containsRect(rect) {
return this.contains(rect.columnStart, rect.rowStart) && this.contains(rect.columnEnd, rect.rowEnd);
}
intersectsRect(rect) {
return this.columnStart <= rect.columnEnd && this.columnEnd >= rect.columnStart && this.rowStart <= rect.rowEnd && this.rowEnd >= rect.rowStart;
}
}
function utils_getComputedCSS(element, property) {
return element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue(property);
}
/**
* Given a grid-template-columns or grid-template-rows CSS property value, gets the start and end
* position in pixels of each grid track.
*
* https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-track
*
* @param {string} template The grid-template-columns or grid-template-rows CSS property value.
* Only supports fixed sizes in pixels.
* @param {number} gap The gap between grid tracks in pixels.
*
* @return {Array<{start: number, end: number}>} An array of objects with the start and end
* position in pixels of each grid track.
*/
function getGridTracks(template, gap) {
const tracks = [];
for (const size of template.split(' ')) {
const previousTrack = tracks[tracks.length - 1];
const start = previousTrack ? previousTrack.end + gap : 0;
const end = start + parseFloat(size);
tracks.push({
start,
end
});
}
return tracks;
}
/**
* Given an array of grid tracks and a position in pixels, gets the index of the closest track to
* that position.
*
* https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-track
*
* @param {Array<{start: number, end: number}>} tracks An array of objects with the start and end
* position in pixels of each grid track.
* @param {number} position The position in pixels.
* @param {string} edge The edge of the track to compare the
* position to. Either 'start' or 'end'.
*
* @return {number} The index of the closest track to the position. 0-based, unlike CSS grid which
* is 1-based.
*/
function getClosestTrack(tracks, position, edge = 'start') {
return tracks.reduce((closest, track, index) => Math.abs(track[edge] - position) < Math.abs(tracks[closest][edge] - position) ? index : closest, 0);
}
function getGridRect(gridElement, rect) {
const columnGap = parseFloat(utils_getComputedCSS(gridElement, 'column-gap'));
const rowGap = parseFloat(utils_getComputedCSS(gridElement, 'row-gap'));
const gridColumnTracks = getGridTracks(utils_getComputedCSS(gridElement, 'grid-template-columns'), columnGap);
const gridRowTracks = getGridTracks(utils_getComputedCSS(gridElement, 'grid-template-rows'), rowGap);
const columnStart = getClosestTrack(gridColumnTracks, rect.left) + 1;
const rowStart = getClosestTrack(gridRowTracks, rect.top) + 1;
const columnEnd = getClosestTrack(gridColumnTracks, rect.right, 'end') + 1;
const rowEnd = getClosestTrack(gridRowTracks, rect.bottom, 'end') + 1;
return new GridRect({
columnStart,
columnEnd,
rowStart,
rowEnd
});
}
function getGridItemRect(gridItemElement) {
return getGridRect(gridItemElement.parentElement, new window.DOMRect(gridItemElement.offsetLeft, gridItemElement.offsetTop, gridItemElement.offsetWidth, gridItemElement.offsetHeight));
}
function getGridInfo(gridElement) {
const gridTemplateColumns = utils_getComputedCSS(gridElement, 'grid-template-columns');
const gridTemplateRows = utils_getComputedCSS(gridElement, 'grid-template-rows');
const numColumns = gridTemplateColumns.split(' ').length;
const numRows = gridTemplateRows.split(' ').length;
const numItems = numColumns * numRows;
return {
numColumns,
numRows,
numItems,
currentColor: utils_getComputedCSS(gridElement, 'color'),
style: {
gridTemplateColumns,
gridTemplateRows,
gap: utils_getComputedCSS(gridElement, 'gap'),
padding: utils_getComputedCSS(gridElement, 'padding')
}
};
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/tips.js
/**
* WordPress dependencies
*/
const globalTips = [(0,external_wp_element_namespaceObject.createInterpolateElement)((0,external_wp_i18n_namespaceObject.__)('While writing, you can press <kbd>/</kbd> to quickly insert new blocks.'), {
kbd: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("kbd", {})
}), (0,external_wp_element_namespaceObject.createInterpolateElement)((0,external_wp_i18n_namespaceObject.__)('Indent a list by pressing <kbd>space</kbd> at the beginning of a line.'), {
kbd: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("kbd", {})
}), (0,external_wp_element_namespaceObject.createInterpolateElement)((0,external_wp_i18n_namespaceObject.__)('Outdent a list by pressing <kbd>backspace</kbd> at the beginning of a line.'), {
kbd: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("kbd", {})
}), (0,external_wp_i18n_namespaceObject.__)('Drag files into the editor to automatically insert media blocks.'), (0,external_wp_i18n_namespaceObject.__)("Change a block's type by pressing the block icon on the toolbar.")];
function Tips() {
const [randomIndex] = (0,external_wp_element_namespaceObject.useState)(
// Disable Reason: I'm not generating an HTML id.
// eslint-disable-next-line no-restricted-syntax
Math.floor(Math.random() * globalTips.length));
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Tip, {
children: globalTips[randomIndex]
});
}
/* harmony default export */ const tips = (Tips);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/chevron-right.js
/**
* WordPress dependencies
*/
const chevronRight = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z"
})
});
/* harmony default export */ const chevron_right = (chevronRight);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/chevron-left.js
/**
* WordPress dependencies
*/
const chevronLeft = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M14.6 7l-1.2-1L8 12l5.4 6 1.2-1-4.6-5z"
})
});
/* harmony default export */ const chevron_left = (chevronLeft);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/block-default.js
/**
* WordPress dependencies
*/
const blockDefault = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M19 8h-1V6h-5v2h-2V6H6v2H5c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-8c0-1.1-.9-2-2-2zm.5 10c0 .3-.2.5-.5.5H5c-.3 0-.5-.2-.5-.5v-8c0-.3.2-.5.5-.5h14c.3 0 .5.2.5.5v8z"
})
});
/* harmony default export */ const block_default = (blockDefault);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-icon/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
function BlockIcon({
icon,
showColors = false,
className,
context
}) {
if (icon?.src === 'block-default') {
icon = {
src: block_default
};
}
const renderedIcon = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Icon, {
icon: icon && icon.src ? icon.src : icon,
context: context
});
const style = showColors ? {
backgroundColor: icon && icon.background,
color: icon && icon.foreground
} : {};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
style: style,
className: dist_clsx('block-editor-block-icon', className, {
'has-colors': showColors
}),
children: renderedIcon
});
}
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-icon/README.md
*/
/* harmony default export */ const block_icon = ((0,external_wp_element_namespaceObject.memo)(BlockIcon));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-card/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockCard({
title,
icon,
description,
blockType,
className,
name
}) {
if (blockType) {
external_wp_deprecated_default()('`blockType` property in `BlockCard component`', {
since: '5.7',
alternative: '`title, icon and description` properties'
});
({
title,
icon,
description
} = blockType);
}
const {
parentNavBlockClientId
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getSelectedBlockClientId,
getBlockParentsByBlockName
} = select(store);
const _selectedBlockClientId = getSelectedBlockClientId();
return {
parentNavBlockClientId: getBlockParentsByBlockName(_selectedBlockClientId, 'core/navigation', true)[0]
};
}, []);
const {
selectBlock
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: dist_clsx('block-editor-block-card', className),
children: [parentNavBlockClientId &&
/*#__PURE__*/
// This is only used by the Navigation block for now. It's not ideal having Navigation block specific code here.
(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
onClick: () => selectBlock(parentNavBlockClientId),
label: (0,external_wp_i18n_namespaceObject.__)('Go to parent Navigation block'),
style:
// TODO: This style override is also used in ToolsPanelHeader.
// It should be supported out-of-the-box by Button.
{
minWidth: 24,
padding: 0
},
icon: (0,external_wp_i18n_namespaceObject.isRTL)() ? chevron_right : chevron_left,
size: "small"
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_icon, {
icon: icon,
showColors: true
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalVStack, {
spacing: 1,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("h2", {
className: "block-editor-block-card__title",
children: name?.length ? (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: 1: Custom block name. 2: Block title.
(0,external_wp_i18n_namespaceObject._x)('%1$s (%2$s)', 'block label'), name, title) : title
}), description && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalText, {
className: "block-editor-block-card__description",
children: description
})]
})]
});
}
/* harmony default export */ const block_card = (BlockCard);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/provider/with-registry-provider.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function getSubRegistry(subRegistries, registry, useSubRegistry) {
if (!useSubRegistry) {
return registry;
}
let subRegistry = subRegistries.get(registry);
if (!subRegistry) {
subRegistry = (0,external_wp_data_namespaceObject.createRegistry)({}, registry);
subRegistry.registerStore(STORE_NAME, storeConfig);
subRegistries.set(registry, subRegistry);
}
return subRegistry;
}
const withRegistryProvider = (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => ({
useSubRegistry = true,
...props
}) => {
const registry = (0,external_wp_data_namespaceObject.useRegistry)();
const [subRegistries] = (0,external_wp_element_namespaceObject.useState)(() => new WeakMap());
const subRegistry = getSubRegistry(subRegistries, registry, useSubRegistry);
if (subRegistry === registry) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WrappedComponent, {
registry: registry,
...props
});
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_data_namespaceObject.RegistryProvider, {
value: subRegistry,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WrappedComponent, {
registry: subRegistry,
...props
})
});
}, 'withRegistryProvider');
/* harmony default export */ const with_registry_provider = (withRegistryProvider);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/provider/use-block-sync.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const use_block_sync_noop = () => {};
/**
* A function to call when the block value has been updated in the block-editor
* store.
*
* @callback onBlockUpdate
* @param {Object[]} blocks The updated blocks.
* @param {Object} options The updated block options, such as selectionStart
* and selectionEnd.
*/
/**
* useBlockSync is a side effect which handles bidirectional sync between the
* block-editor store and a controlling data source which provides blocks. This
* is most commonly used by the BlockEditorProvider to synchronize the contents
* of the block-editor store with the root entity, like a post.
*
* Another example would be the template part block, which provides blocks from
* a separate entity data source than a root entity. This hook syncs edits to
* the template part in the block editor back to the entity and vice-versa.
*
* Here are some of its basic functions:
* - Initalizes the block-editor store for the given clientID to the blocks
* given via props.
* - Adds incoming changes (like undo) to the block-editor store.
* - Adds outgoing changes (like editing content) to the controlling entity,
* determining if a change should be considered persistent or not.
* - Handles edge cases and race conditions which occur in those operations.
* - Ignores changes which happen to other entities (like nested inner block
* controllers.
* - Passes selection state from the block-editor store to the controlling entity.
*
* @param {Object} props Props for the block sync hook
* @param {string} props.clientId The client ID of the inner block controller.
* If none is passed, then it is assumed to be a
* root controller rather than an inner block
* controller.
* @param {Object[]} props.value The control value for the blocks. This value
* is used to initalize the block-editor store
* and for resetting the blocks to incoming
* changes like undo.
* @param {Object} props.selection The selection state responsible to restore the selection on undo/redo.
* @param {onBlockUpdate} props.onChange Function to call when a persistent
* change has been made in the block-editor blocks
* for the given clientId. For example, after
* this function is called, an entity is marked
* dirty because it has changes to save.
* @param {onBlockUpdate} props.onInput Function to call when a non-persistent
* change has been made in the block-editor blocks
* for the given clientId. When this is called,
* controlling sources do not become dirty.
*/
function useBlockSync({
clientId = null,
value: controlledBlocks,
selection: controlledSelection,
onChange = use_block_sync_noop,
onInput = use_block_sync_noop
}) {
const registry = (0,external_wp_data_namespaceObject.useRegistry)();
const {
resetBlocks,
resetSelection,
replaceInnerBlocks,
setHasControlledInnerBlocks,
__unstableMarkNextChangeAsNotPersistent
} = registry.dispatch(store);
const {
getBlockName,
getBlocks,
getSelectionStart,
getSelectionEnd
} = registry.select(store);
const isControlled = (0,external_wp_data_namespaceObject.useSelect)(select => {
return !clientId || select(store).areInnerBlocksControlled(clientId);
}, [clientId]);
const pendingChangesRef = (0,external_wp_element_namespaceObject.useRef)({
incoming: null,
outgoing: []
});
const subscribedRef = (0,external_wp_element_namespaceObject.useRef)(false);
const setControlledBlocks = () => {
if (!controlledBlocks) {
return;
}
// We don't need to persist this change because we only replace
// controlled inner blocks when the change was caused by an entity,
// and so it would already be persisted.
__unstableMarkNextChangeAsNotPersistent();
if (clientId) {
// It is important to batch here because otherwise,
// as soon as `setHasControlledInnerBlocks` is called
// the effect to restore might be triggered
// before the actual blocks get set properly in state.
registry.batch(() => {
setHasControlledInnerBlocks(clientId, true);
const storeBlocks = controlledBlocks.map(block => (0,external_wp_blocks_namespaceObject.cloneBlock)(block));
if (subscribedRef.current) {
pendingChangesRef.current.incoming = storeBlocks;
}
__unstableMarkNextChangeAsNotPersistent();
replaceInnerBlocks(clientId, storeBlocks);
});
} else {
if (subscribedRef.current) {
pendingChangesRef.current.incoming = controlledBlocks;
}
resetBlocks(controlledBlocks);
}
};
// Clean up the changes made by setControlledBlocks() when the component
// containing useBlockSync() unmounts.
const unsetControlledBlocks = () => {
__unstableMarkNextChangeAsNotPersistent();
if (clientId) {
setHasControlledInnerBlocks(clientId, false);
__unstableMarkNextChangeAsNotPersistent();
replaceInnerBlocks(clientId, []);
} else {
resetBlocks([]);
}
};
// Add a subscription to the block-editor registry to detect when changes
// have been made. This lets us inform the data source of changes. This
// is an effect so that the subscriber can run synchronously without
// waiting for React renders for changes.
const onInputRef = (0,external_wp_element_namespaceObject.useRef)(onInput);
const onChangeRef = (0,external_wp_element_namespaceObject.useRef)(onChange);
(0,external_wp_element_namespaceObject.useEffect)(() => {
onInputRef.current = onInput;
onChangeRef.current = onChange;
}, [onInput, onChange]);
// Determine if blocks need to be reset when they change.
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (pendingChangesRef.current.outgoing.includes(controlledBlocks)) {
// Skip block reset if the value matches expected outbound sync
// triggered by this component by a preceding change detection.
// Only skip if the value matches expectation, since a reset should
// still occur if the value is modified (not equal by reference),
// to allow that the consumer may apply modifications to reflect
// back on the editor.
if (pendingChangesRef.current.outgoing[pendingChangesRef.current.outgoing.length - 1] === controlledBlocks) {
pendingChangesRef.current.outgoing = [];
}
} else if (getBlocks(clientId) !== controlledBlocks) {
// Reset changing value in all other cases than the sync described
// above. Since this can be reached in an update following an out-
// bound sync, unset the outbound value to avoid considering it in
// subsequent renders.
pendingChangesRef.current.outgoing = [];
setControlledBlocks();
if (controlledSelection) {
resetSelection(controlledSelection.selectionStart, controlledSelection.selectionEnd, controlledSelection.initialPosition);
}
}
}, [controlledBlocks, clientId]);
const isMountedRef = (0,external_wp_element_namespaceObject.useRef)(false);
(0,external_wp_element_namespaceObject.useEffect)(() => {
// On mount, controlled blocks are already set in the effect above.
if (!isMountedRef.current) {
isMountedRef.current = true;
return;
}
// When the block becomes uncontrolled, it means its inner state has been reset
// we need to take the blocks again from the external value property.
if (!isControlled) {
pendingChangesRef.current.outgoing = [];
setControlledBlocks();
}
}, [isControlled]);
(0,external_wp_element_namespaceObject.useEffect)(() => {
const {
getSelectedBlocksInitialCaretPosition,
isLastBlockChangePersistent,
__unstableIsLastBlockChangeIgnored,
areInnerBlocksControlled
} = registry.select(store);
let blocks = getBlocks(clientId);
let isPersistent = isLastBlockChangePersistent();
let previousAreBlocksDifferent = false;
subscribedRef.current = true;
const unsubscribe = registry.subscribe(() => {
// Sometimes, when changing block lists, lingering subscriptions
// might trigger before they are cleaned up. If the block for which
// the subscription runs is no longer in the store, this would clear
// its parent entity's block list. To avoid this, we bail out if
// the subscription is triggering for a block (`clientId !== null`)
// and its block name can't be found because it's not on the list.
// (`getBlockName( clientId ) === null`).
if (clientId !== null && getBlockName(clientId) === null) {
return;
}
// When RESET_BLOCKS on parent blocks get called, the controlled blocks
// can reset to uncontrolled, in these situations, it means we need to populate
// the blocks again from the external blocks (the value property here)
// and we should stop triggering onChange
const isStillControlled = !clientId || areInnerBlocksControlled(clientId);
if (!isStillControlled) {
return;
}
const newIsPersistent = isLastBlockChangePersistent();
const newBlocks = getBlocks(clientId);
const areBlocksDifferent = newBlocks !== blocks;
blocks = newBlocks;
if (areBlocksDifferent && (pendingChangesRef.current.incoming || __unstableIsLastBlockChangeIgnored())) {
pendingChangesRef.current.incoming = null;
isPersistent = newIsPersistent;
return;
}
// Since we often dispatch an action to mark the previous action as
// persistent, we need to make sure that the blocks changed on the
// previous action before committing the change.
const didPersistenceChange = previousAreBlocksDifferent && !areBlocksDifferent && newIsPersistent && !isPersistent;
if (areBlocksDifferent || didPersistenceChange) {
isPersistent = newIsPersistent;
// We know that onChange/onInput will update controlledBlocks.
// We need to be aware that it was caused by an outgoing change
// so that we do not treat it as an incoming change later on,
// which would cause a block reset.
pendingChangesRef.current.outgoing.push(blocks);
// Inform the controlling entity that changes have been made to
// the block-editor store they should be aware about.
const updateParent = isPersistent ? onChangeRef.current : onInputRef.current;
updateParent(blocks, {
selection: {
selectionStart: getSelectionStart(),
selectionEnd: getSelectionEnd(),
initialPosition: getSelectedBlocksInitialCaretPosition()
}
});
}
previousAreBlocksDifferent = areBlocksDifferent;
}, store);
return () => {
subscribedRef.current = false;
unsubscribe();
};
}, [registry, clientId]);
(0,external_wp_element_namespaceObject.useEffect)(() => {
return () => {
unsetControlledBlocks();
};
}, []);
}
;// CONCATENATED MODULE: external ["wp","keyboardShortcuts"]
const external_wp_keyboardShortcuts_namespaceObject = window["wp"]["keyboardShortcuts"];
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/keyboard-shortcuts/index.js
/**
* WordPress dependencies
*/
function KeyboardShortcuts() {
return null;
}
function KeyboardShortcutsRegister() {
// Registering the shortcuts.
const {
registerShortcut
} = (0,external_wp_data_namespaceObject.useDispatch)(external_wp_keyboardShortcuts_namespaceObject.store);
(0,external_wp_element_namespaceObject.useEffect)(() => {
registerShortcut({
name: 'core/block-editor/duplicate',
category: 'block',
description: (0,external_wp_i18n_namespaceObject.__)('Duplicate the selected block(s).'),
keyCombination: {
modifier: 'primaryShift',
character: 'd'
}
});
registerShortcut({
name: 'core/block-editor/remove',
category: 'block',
description: (0,external_wp_i18n_namespaceObject.__)('Remove the selected block(s).'),
keyCombination: {
modifier: 'access',
character: 'z'
}
});
registerShortcut({
name: 'core/block-editor/insert-before',
category: 'block',
description: (0,external_wp_i18n_namespaceObject.__)('Insert a new block before the selected block(s).'),
keyCombination: {
modifier: 'primaryAlt',
character: 't'
}
});
registerShortcut({
name: 'core/block-editor/insert-after',
category: 'block',
description: (0,external_wp_i18n_namespaceObject.__)('Insert a new block after the selected block(s).'),
keyCombination: {
modifier: 'primaryAlt',
character: 'y'
}
});
registerShortcut({
name: 'core/block-editor/delete-multi-selection',
category: 'block',
description: (0,external_wp_i18n_namespaceObject.__)('Delete selection.'),
keyCombination: {
character: 'del'
},
aliases: [{
character: 'backspace'
}]
});
registerShortcut({
name: 'core/block-editor/select-all',
category: 'selection',
description: (0,external_wp_i18n_namespaceObject.__)('Select all text when typing. Press again to select all blocks.'),
keyCombination: {
modifier: 'primary',
character: 'a'
}
});
registerShortcut({
name: 'core/block-editor/unselect',
category: 'selection',
description: (0,external_wp_i18n_namespaceObject.__)('Clear selection.'),
keyCombination: {
character: 'escape'
}
});
registerShortcut({
name: 'core/block-editor/multi-text-selection',
category: 'selection',
description: (0,external_wp_i18n_namespaceObject.__)('Select text across multiple blocks.'),
keyCombination: {
modifier: 'shift',
character: 'arrow'
}
});
registerShortcut({
name: 'core/block-editor/focus-toolbar',
category: 'global',
description: (0,external_wp_i18n_namespaceObject.__)('Navigate to the nearest toolbar.'),
keyCombination: {
modifier: 'alt',
character: 'F10'
}
});
registerShortcut({
name: 'core/block-editor/move-up',
category: 'block',
description: (0,external_wp_i18n_namespaceObject.__)('Move the selected block(s) up.'),
keyCombination: {
modifier: 'secondary',
character: 't'
}
});
registerShortcut({
name: 'core/block-editor/move-down',
category: 'block',
description: (0,external_wp_i18n_namespaceObject.__)('Move the selected block(s) down.'),
keyCombination: {
modifier: 'secondary',
character: 'y'
}
});
// List view shortcuts.
registerShortcut({
name: 'core/block-editor/collapse-list-view',
category: 'list-view',
description: (0,external_wp_i18n_namespaceObject.__)('Collapse all other items.'),
keyCombination: {
modifier: 'alt',
character: 'l'
}
});
registerShortcut({
name: 'core/block-editor/group',
category: 'block',
description: (0,external_wp_i18n_namespaceObject.__)('Create a group block from the selected multiple blocks.'),
keyCombination: {
modifier: 'primary',
character: 'g'
}
});
}, [registerShortcut]);
return null;
}
KeyboardShortcuts.Register = KeyboardShortcutsRegister;
/* harmony default export */ const keyboard_shortcuts = (KeyboardShortcuts);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/provider/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/** @typedef {import('@wordpress/data').WPDataRegistry} WPDataRegistry */
const ExperimentalBlockEditorProvider = with_registry_provider(props => {
const {
children,
settings,
stripExperimentalSettings = false
} = props;
const {
__experimentalUpdateSettings
} = unlock((0,external_wp_data_namespaceObject.useDispatch)(store));
(0,external_wp_element_namespaceObject.useEffect)(() => {
__experimentalUpdateSettings({
...settings,
__internalIsInitialized: true
}, {
stripExperimentalSettings,
reset: true
});
}, [settings, stripExperimentalSettings, __experimentalUpdateSettings]);
// Syncs the entity provider with changes in the block-editor store.
useBlockSync(props);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.SlotFillProvider, {
passthrough: true,
children: [!settings?.__unstableIsPreviewMode && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(keyboard_shortcuts.Register, {}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockRefsProvider, {
children: children
})]
});
});
const BlockEditorProvider = props => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ExperimentalBlockEditorProvider, {
...props,
stripExperimentalSettings: true,
children: props.children
});
};
/* harmony default export */ const provider = (BlockEditorProvider);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-context/index.js
/**
* WordPress dependencies
*/
/** @typedef {import('react').ReactNode} ReactNode */
/**
* @typedef BlockContextProviderProps
*
* @property {Record<string,*>} value Context value to merge with current
* value.
* @property {ReactNode} children Component children.
*/
/** @type {import('react').Context<Record<string,*>>} */
const block_context_Context = (0,external_wp_element_namespaceObject.createContext)({});
/**
* Component which merges passed value with current consumed block context.
*
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-context/README.md
*
* @param {BlockContextProviderProps} props
*/
function BlockContextProvider({
value,
children
}) {
const context = (0,external_wp_element_namespaceObject.useContext)(block_context_Context);
const nextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({
...context,
...value
}), [context, value]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_context_Context.Provider, {
value: nextValue,
children: children
});
}
/* harmony default export */ const block_context = (block_context_Context);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-edit/edit.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Default value used for blocks which do not define their own context needs,
* used to guarantee that a block's `context` prop will always be an object. It
* is assigned as a constant since it is always expected to be an empty object,
* and in order to avoid unnecessary React reconciliations of a changing object.
*
* @type {{}}
*/
const DEFAULT_BLOCK_CONTEXT = {};
const Edit = props => {
const {
name
} = props;
const blockType = (0,external_wp_blocks_namespaceObject.getBlockType)(name);
if (!blockType) {
return null;
}
// `edit` and `save` are functions or components describing the markup
// with which a block is displayed. If `blockType` is valid, assign
// them preferentially as the render value for the block.
const Component = blockType.edit || blockType.save;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, {
...props
});
};
const EditWithFilters = (0,external_wp_components_namespaceObject.withFilters)('editor.BlockEdit')(Edit);
const EditWithGeneratedProps = props => {
const {
attributes = {},
name
} = props;
const blockType = (0,external_wp_blocks_namespaceObject.getBlockType)(name);
const blockContext = (0,external_wp_element_namespaceObject.useContext)(block_context);
// Assign context values using the block type's declared context needs.
const context = (0,external_wp_element_namespaceObject.useMemo)(() => {
return blockType && blockType.usesContext ? Object.fromEntries(Object.entries(blockContext).filter(([key]) => blockType.usesContext.includes(key))) : DEFAULT_BLOCK_CONTEXT;
}, [blockType, blockContext]);
if (!blockType) {
return null;
}
if (blockType.apiVersion > 1) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(EditWithFilters, {
...props,
context: context
});
}
// Generate a class name for the block's editable form.
const generatedClassName = (0,external_wp_blocks_namespaceObject.hasBlockSupport)(blockType, 'className', true) ? (0,external_wp_blocks_namespaceObject.getBlockDefaultClassName)(name) : null;
const className = dist_clsx(generatedClassName, attributes.className, props.className);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(EditWithFilters, {
...props,
context: context,
className: className
});
};
/* harmony default export */ const block_edit_edit = (EditWithGeneratedProps);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/more-vertical.js
/**
* WordPress dependencies
*/
const moreVertical = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
})
});
/* harmony default export */ const more_vertical = (moreVertical);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/warning/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
function Warning({
className,
actions,
children,
secondaryActions
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
style: {
display: 'contents',
all: 'initial'
},
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: dist_clsx(className, 'block-editor-warning'),
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-warning__contents",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("p", {
className: "block-editor-warning__message",
children: children
}), (external_wp_element_namespaceObject.Children.count(actions) > 0 || secondaryActions) && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-warning__actions",
children: [external_wp_element_namespaceObject.Children.count(actions) > 0 && external_wp_element_namespaceObject.Children.map(actions, (action, i) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
className: "block-editor-warning__action",
children: action
}, i)), secondaryActions && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.DropdownMenu, {
className: "block-editor-warning__secondary",
icon: more_vertical,
label: (0,external_wp_i18n_namespaceObject.__)('More options'),
popoverProps: {
position: 'bottom left',
className: 'block-editor-warning__dropdown'
},
noIcons: true,
children: () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuGroup, {
children: secondaryActions.map((item, pos) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
onClick: item.onClick,
children: item.title
}, pos))
})
})]
})]
})
})
});
}
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/warning/README.md
*/
/* harmony default export */ const warning = (Warning);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-edit/multiple-usage-warning.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function MultipleUsageWarning({
originalBlockClientId,
name,
onReplace
}) {
const {
selectBlock
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const blockType = (0,external_wp_blocks_namespaceObject.getBlockType)(name);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(warning, {
actions: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
variant: "secondary",
onClick: () => selectBlock(originalBlockClientId),
children: (0,external_wp_i18n_namespaceObject.__)('Find original')
}, "find-original"), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
variant: "secondary",
onClick: () => onReplace([]),
children: (0,external_wp_i18n_namespaceObject.__)('Remove')
}, "remove")],
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("strong", {
children: [blockType?.title, ": "]
}), (0,external_wp_i18n_namespaceObject.__)('This block can only be used once.')]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-list/private-block-context.js
/**
* WordPress dependencies
*/
const PrivateBlockContext = (0,external_wp_element_namespaceObject.createContext)({});
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-edit/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* The `useBlockEditContext` hook provides information about the block this hook is being used in.
* It returns an object with the `name`, `isSelected` state, and the `clientId` of the block.
* It is useful if you want to create custom hooks that need access to the current blocks clientId
* but don't want to rely on the data getting passed in as a parameter.
*
* @return {Object} Block edit context
*/
function BlockEdit({
mayDisplayControls,
mayDisplayParentControls,
blockEditingMode,
isPreviewMode,
// The remaining props are passed through the BlockEdit filters and are thus
// public API!
...props
}) {
const {
name,
isSelected,
clientId,
attributes = {},
__unstableLayoutClassNames
} = props;
const {
layout = null,
metadata = {}
} = attributes;
const {
bindings
} = metadata;
const layoutSupport = (0,external_wp_blocks_namespaceObject.hasBlockSupport)(name, 'layout', false) || (0,external_wp_blocks_namespaceObject.hasBlockSupport)(name, '__experimentalLayout', false);
const {
originalBlockClientId
} = (0,external_wp_element_namespaceObject.useContext)(PrivateBlockContext);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Provider
// It is important to return the same object if props haven't
// changed to avoid unnecessary rerenders.
// See https://reactjs.org/docs/context.html#caveats.
, {
value: (0,external_wp_element_namespaceObject.useMemo)(() => ({
name,
isSelected,
clientId,
layout: layoutSupport ? layout : null,
__unstableLayoutClassNames,
// We use symbols in favour of an __unstable prefix to avoid
// usage outside of the package (this context is exposed).
[mayDisplayControlsKey]: mayDisplayControls,
[mayDisplayParentControlsKey]: mayDisplayParentControls,
[blockEditingModeKey]: blockEditingMode,
[blockBindingsKey]: bindings,
[isPreviewModeKey]: isPreviewMode
}), [name, isSelected, clientId, layoutSupport, layout, __unstableLayoutClassNames, mayDisplayControls, mayDisplayParentControls, blockEditingMode, bindings, isPreviewMode]),
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_edit_edit, {
...props
}), originalBlockClientId && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MultipleUsageWarning, {
originalBlockClientId: originalBlockClientId,
name: name,
onReplace: props.onReplace
})]
});
}
// EXTERNAL MODULE: ./node_modules/diff/lib/diff/character.js
var character = __webpack_require__(8021);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-compare/block-view.js
/**
* WordPress dependencies
*/
function BlockView({
title,
rawContent,
renderedContent,
action,
actionText,
className
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: className,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-block-compare__content",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("h2", {
className: "block-editor-block-compare__heading",
children: title
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-block-compare__html",
children: rawContent
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-block-compare__preview edit-post-visual-editor",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_element_namespaceObject.RawHTML, {
children: (0,external_wp_dom_namespaceObject.safeHTML)(renderedContent)
})
})]
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-block-compare__action",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
variant: "secondary",
tabIndex: "0",
onClick: action,
children: actionText
})
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-compare/index.js
/**
* External dependencies
*/
// diff doesn't tree-shake correctly, so we import from the individual
// module here, to avoid including too much of the library
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockCompare({
block,
onKeep,
onConvert,
convertor,
convertButtonText
}) {
function getDifference(originalContent, newContent) {
const difference = (0,character/* diffChars */.JJ)(originalContent, newContent);
return difference.map((item, pos) => {
const classes = dist_clsx({
'block-editor-block-compare__added': item.added,
'block-editor-block-compare__removed': item.removed
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
className: classes,
children: item.value
}, pos);
});
}
function getConvertedContent(convertedBlock) {
// The convertor may return an array of items or a single item.
const newBlocks = Array.isArray(convertedBlock) ? convertedBlock : [convertedBlock];
// Get converted block details.
const newContent = newBlocks.map(item => (0,external_wp_blocks_namespaceObject.getSaveContent)(item.name, item.attributes, item.innerBlocks));
return newContent.join('');
}
const converted = getConvertedContent(convertor(block));
const difference = getDifference(block.originalContent, converted);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-block-compare__wrapper",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockView, {
title: (0,external_wp_i18n_namespaceObject.__)('Current'),
className: "block-editor-block-compare__current",
action: onKeep,
actionText: (0,external_wp_i18n_namespaceObject.__)('Convert to HTML'),
rawContent: block.originalContent,
renderedContent: block.originalContent
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockView, {
title: (0,external_wp_i18n_namespaceObject.__)('After Conversion'),
className: "block-editor-block-compare__converted",
action: onConvert,
actionText: convertButtonText,
rawContent: difference,
renderedContent: converted
})]
});
}
/* harmony default export */ const block_compare = (BlockCompare);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-list/block-invalid-warning.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const blockToBlocks = block => (0,external_wp_blocks_namespaceObject.rawHandler)({
HTML: block.originalContent
});
function BlockInvalidWarning({
clientId
}) {
const {
block,
canInsertHTMLBlock,
canInsertClassicBlock
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
canInsertBlockType,
getBlock,
getBlockRootClientId
} = select(store);
const rootClientId = getBlockRootClientId(clientId);
return {
block: getBlock(clientId),
canInsertHTMLBlock: canInsertBlockType('core/html', rootClientId),
canInsertClassicBlock: canInsertBlockType('core/freeform', rootClientId)
};
}, [clientId]);
const {
replaceBlock
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const [compare, setCompare] = (0,external_wp_element_namespaceObject.useState)(false);
const onCompareClose = (0,external_wp_element_namespaceObject.useCallback)(() => setCompare(false), []);
const convert = (0,external_wp_element_namespaceObject.useMemo)(() => ({
toClassic() {
const classicBlock = (0,external_wp_blocks_namespaceObject.createBlock)('core/freeform', {
content: block.originalContent
});
return replaceBlock(block.clientId, classicBlock);
},
toHTML() {
const htmlBlock = (0,external_wp_blocks_namespaceObject.createBlock)('core/html', {
content: block.originalContent
});
return replaceBlock(block.clientId, htmlBlock);
},
toBlocks() {
const newBlocks = blockToBlocks(block);
return replaceBlock(block.clientId, newBlocks);
},
toRecoveredBlock() {
const recoveredBlock = (0,external_wp_blocks_namespaceObject.createBlock)(block.name, block.attributes, block.innerBlocks);
return replaceBlock(block.clientId, recoveredBlock);
}
}), [block, replaceBlock]);
const secondaryActions = (0,external_wp_element_namespaceObject.useMemo)(() => [{
// translators: Button to fix block content
title: (0,external_wp_i18n_namespaceObject._x)('Resolve', 'imperative verb'),
onClick: () => setCompare(true)
}, canInsertHTMLBlock && {
title: (0,external_wp_i18n_namespaceObject.__)('Convert to HTML'),
onClick: convert.toHTML
}, canInsertClassicBlock && {
title: (0,external_wp_i18n_namespaceObject.__)('Convert to Classic Block'),
onClick: convert.toClassic
}].filter(Boolean), [canInsertHTMLBlock, canInsertClassicBlock, convert]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(warning, {
actions: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
onClick: convert.toRecoveredBlock,
variant: "primary",
children: (0,external_wp_i18n_namespaceObject.__)('Attempt recovery')
}, "recover")],
secondaryActions: secondaryActions,
children: (0,external_wp_i18n_namespaceObject.__)('Block contains unexpected or invalid content.')
}), compare && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Modal, {
title:
// translators: Dialog title to fix block content
(0,external_wp_i18n_namespaceObject.__)('Resolve Block'),
onRequestClose: onCompareClose,
className: "block-editor-block-compare",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_compare, {
block: block,
onKeep: convert.toHTML,
onConvert: convert.toBlocks,
convertor: blockToBlocks,
convertButtonText: (0,external_wp_i18n_namespaceObject.__)('Convert to Blocks')
})
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-list/block-crash-warning.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const block_crash_warning_warning = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(warning, {
className: "block-editor-block-list__block-crash-warning",
children: (0,external_wp_i18n_namespaceObject.__)('This block has encountered an error and cannot be previewed.')
});
/* harmony default export */ const block_crash_warning = (() => block_crash_warning_warning);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-list/block-crash-boundary.js
/**
* WordPress dependencies
*/
class BlockCrashBoundary extends external_wp_element_namespaceObject.Component {
constructor() {
super(...arguments);
this.state = {
hasError: false
};
}
componentDidCatch() {
this.setState({
hasError: true
});
}
render() {
if (this.state.hasError) {
return this.props.fallback;
}
return this.props.children;
}
}
/* harmony default export */ const block_crash_boundary = (BlockCrashBoundary);
// EXTERNAL MODULE: ./node_modules/react-autosize-textarea/lib/index.js
var lib = __webpack_require__(4132);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-list/block-html.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockHTML({
clientId
}) {
const [html, setHtml] = (0,external_wp_element_namespaceObject.useState)('');
const block = (0,external_wp_data_namespaceObject.useSelect)(select => select(store).getBlock(clientId), [clientId]);
const {
updateBlock
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const onChange = () => {
const blockType = (0,external_wp_blocks_namespaceObject.getBlockType)(block.name);
if (!blockType) {
return;
}
const attributes = (0,external_wp_blocks_namespaceObject.getBlockAttributes)(blockType, html, block.attributes);
// If html is empty we reset the block to the default HTML and mark it as valid to avoid triggering an error
const content = html ? html : (0,external_wp_blocks_namespaceObject.getSaveContent)(blockType, attributes);
const [isValid] = html ? (0,external_wp_blocks_namespaceObject.validateBlock)({
...block,
attributes,
originalContent: content
}) : [true];
updateBlock(clientId, {
attributes,
originalContent: content,
isValid
});
// Ensure the state is updated if we reset so it displays the default content.
if (!html) {
setHtml(content);
}
};
(0,external_wp_element_namespaceObject.useEffect)(() => {
setHtml((0,external_wp_blocks_namespaceObject.getBlockContent)(block));
}, [block]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(lib/* default */.A, {
className: "block-editor-block-list__block-html-textarea",
value: html,
onBlur: onChange,
onChange: event => setHtml(event.target.value)
});
}
/* harmony default export */ const block_html = (BlockHTML);
;// CONCATENATED MODULE: ./node_modules/@react-spring/rafz/dist/esm/index.js
var esm_f=esm_l(),esm_n=e=>esm_c(e,esm_f),esm_m=esm_l();esm_n.write=e=>esm_c(e,esm_m);var esm_d=esm_l();esm_n.onStart=e=>esm_c(e,esm_d);var esm_h=esm_l();esm_n.onFrame=e=>esm_c(e,esm_h);var esm_p=esm_l();esm_n.onFinish=e=>esm_c(e,esm_p);var esm_i=[];esm_n.setTimeout=(e,t)=>{let a=esm_n.now()+t,o=()=>{let F=esm_i.findIndex(z=>z.cancel==o);~F&&esm_i.splice(F,1),esm_u-=~F?1:0},s={time:a,handler:e,cancel:o};return esm_i.splice(esm_w(a),0,s),esm_u+=1,esm_v(),s};var esm_w=e=>~(~esm_i.findIndex(t=>t.time>e)||~esm_i.length);esm_n.cancel=e=>{esm_d.delete(e),esm_h.delete(e),esm_p.delete(e),esm_f.delete(e),esm_m.delete(e)};esm_n.sync=e=>{T=!0,esm_n.batchedUpdates(e),T=!1};esm_n.throttle=e=>{let t;function a(){try{e(...t)}finally{t=null}}function o(...s){t=s,esm_n.onStart(a)}return o.handler=e,o.cancel=()=>{esm_d.delete(a),t=null},o};var esm_y=typeof window<"u"?window.requestAnimationFrame:()=>{};esm_n.use=e=>esm_y=e;esm_n.now=typeof performance<"u"?()=>performance.now():Date.now;esm_n.batchedUpdates=e=>e();esm_n.catch=console.error;esm_n.frameLoop="always";esm_n.advance=()=>{esm_n.frameLoop!=="demand"?console.warn("Cannot call the manual advancement of rafz whilst frameLoop is not set as demand"):esm_x()};var esm_r=-1,esm_u=0,T=!1;function esm_c(e,t){T?(t.delete(e),e(0)):(t.add(e),esm_v())}function esm_v(){esm_r<0&&(esm_r=0,esm_n.frameLoop!=="demand"&&esm_y(esm_b))}function esm_R(){esm_r=-1}function esm_b(){~esm_r&&(esm_y(esm_b),esm_n.batchedUpdates(esm_x))}function esm_x(){let e=esm_r;esm_r=esm_n.now();let t=esm_w(esm_r);if(t&&(Q(esm_i.splice(0,t),a=>a.handler()),esm_u-=t),!esm_u){esm_R();return}esm_d.flush(),esm_f.flush(e?Math.min(64,esm_r-e):16.667),esm_h.flush(),esm_m.flush(),esm_p.flush()}function esm_l(){let e=new Set,t=e;return{add(a){esm_u+=t==e&&!e.has(a)?1:0,e.add(a)},delete(a){return esm_u-=t==e&&e.has(a)?1:0,e.delete(a)},flush(a){t.size&&(e=new Set,esm_u-=t.size,Q(t,o=>o(a)&&e.add(o)),esm_u+=e.size,t=e)}}}function Q(e,t){e.forEach(a=>{try{t(a)}catch(o){esm_n.catch(o)}})}var esm_S={count(){return esm_u},isRunning(){return esm_r>=0},clear(){esm_r=-1,esm_i=[],esm_d=esm_l(),esm_f=esm_l(),esm_h=esm_l(),esm_m=esm_l(),esm_p=esm_l(),esm_u=0}};
;// CONCATENATED MODULE: ./node_modules/@react-spring/shared/dist/esm/index.js
var ze=Object.defineProperty;var Le=(e,t)=>{for(var r in t)ze(e,r,{get:t[r],enumerable:!0})};var dist_esm_p={};Le(dist_esm_p,{assign:()=>U,colors:()=>dist_esm_c,createStringInterpolator:()=>esm_k,skipAnimation:()=>ee,to:()=>J,willAdvance:()=>dist_esm_S});function Y(){}var mt=(e,t,r)=>Object.defineProperty(e,t,{value:r,writable:!0,configurable:!0}),dist_esm_l={arr:Array.isArray,obj:e=>!!e&&e.constructor.name==="Object",fun:e=>typeof e=="function",str:e=>typeof e=="string",num:e=>typeof e=="number",und:e=>e===void 0};function bt(e,t){if(dist_esm_l.arr(e)){if(!dist_esm_l.arr(t)||e.length!==t.length)return!1;for(let r=0;r<e.length;r++)if(e[r]!==t[r])return!1;return!0}return e===t}var esm_Ve=(e,t)=>e.forEach(t);function xt(e,t,r){if(dist_esm_l.arr(e)){for(let n=0;n<e.length;n++)t.call(r,e[n],`${n}`);return}for(let n in e)e.hasOwnProperty(n)&&t.call(r,e[n],n)}var ht=e=>dist_esm_l.und(e)?[]:dist_esm_l.arr(e)?e:[e];function Pe(e,t){if(e.size){let r=Array.from(e);e.clear(),esm_Ve(r,t)}}var yt=(e,...t)=>Pe(e,r=>r(...t)),dist_esm_h=()=>typeof window>"u"||!window.navigator||/ServerSideRendering|^Deno\//.test(window.navigator.userAgent);var esm_k,J,dist_esm_c=null,ee=!1,dist_esm_S=Y,U=e=>{e.to&&(J=e.to),e.now&&(esm_n.now=e.now),e.colors!==void 0&&(dist_esm_c=e.colors),e.skipAnimation!=null&&(ee=e.skipAnimation),e.createStringInterpolator&&(esm_k=e.createStringInterpolator),e.requestAnimationFrame&&esm_n.use(e.requestAnimationFrame),e.batchedUpdates&&(esm_n.batchedUpdates=e.batchedUpdates),e.willAdvance&&(dist_esm_S=e.willAdvance),e.frameLoop&&(esm_n.frameLoop=e.frameLoop)};var esm_E=new Set,dist_esm_u=[],esm_H=[],A=0,qe={get idle(){return!esm_E.size&&!dist_esm_u.length},start(e){A>e.priority?(esm_E.add(e),esm_n.onStart($e)):(te(e),esm_n(B))},advance:B,sort(e){if(A)esm_n.onFrame(()=>qe.sort(e));else{let t=dist_esm_u.indexOf(e);~t&&(dist_esm_u.splice(t,1),re(e))}},clear(){dist_esm_u=[],esm_E.clear()}};function $e(){esm_E.forEach(te),esm_E.clear(),esm_n(B)}function te(e){dist_esm_u.includes(e)||re(e)}function re(e){dist_esm_u.splice(Ge(dist_esm_u,t=>t.priority>e.priority),0,e)}function B(e){let t=esm_H;for(let r=0;r<dist_esm_u.length;r++){let n=dist_esm_u[r];A=n.priority,n.idle||(dist_esm_S(n),n.advance(e),n.idle||t.push(n))}return A=0,esm_H=dist_esm_u,esm_H.length=0,dist_esm_u=t,dist_esm_u.length>0}function Ge(e,t){let r=e.findIndex(t);return r<0?e.length:r}var ne=(e,t,r)=>Math.min(Math.max(r,e),t);var It={transparent:0,aliceblue:4042850303,antiquewhite:4209760255,aqua:16777215,aquamarine:2147472639,azure:4043309055,beige:4126530815,bisque:4293182719,black:255,blanchedalmond:4293643775,blue:65535,blueviolet:2318131967,brown:2771004159,burlywood:3736635391,burntsienna:3934150143,cadetblue:1604231423,chartreuse:2147418367,chocolate:3530104575,coral:4286533887,cornflowerblue:1687547391,cornsilk:4294499583,crimson:3692313855,cyan:16777215,darkblue:35839,darkcyan:9145343,darkgoldenrod:3095792639,darkgray:2846468607,darkgreen:6553855,darkgrey:2846468607,darkkhaki:3182914559,darkmagenta:2332068863,darkolivegreen:1433087999,darkorange:4287365375,darkorchid:2570243327,darkred:2332033279,darksalmon:3918953215,darkseagreen:2411499519,darkslateblue:1211993087,darkslategray:793726975,darkslategrey:793726975,darkturquoise:13554175,darkviolet:2483082239,deeppink:4279538687,deepskyblue:12582911,dimgray:1768516095,dimgrey:1768516095,dodgerblue:512819199,firebrick:2988581631,floralwhite:4294635775,forestgreen:579543807,fuchsia:4278255615,gainsboro:3705462015,ghostwhite:4177068031,gold:4292280575,goldenrod:3668254975,gray:2155905279,green:8388863,greenyellow:2919182335,grey:2155905279,honeydew:4043305215,hotpink:4285117695,indianred:3445382399,indigo:1258324735,ivory:4294963455,khaki:4041641215,lavender:3873897215,lavenderblush:4293981695,lawngreen:2096890111,lemonchiffon:4294626815,lightblue:2916673279,lightcoral:4034953471,lightcyan:3774873599,lightgoldenrodyellow:4210742015,lightgray:3553874943,lightgreen:2431553791,lightgrey:3553874943,lightpink:4290167295,lightsalmon:4288707327,lightseagreen:548580095,lightskyblue:2278488831,lightslategray:2005441023,lightslategrey:2005441023,lightsteelblue:2965692159,lightyellow:4294959359,lime:16711935,limegreen:852308735,linen:4210091775,magenta:4278255615,maroon:2147483903,mediumaquamarine:1724754687,mediumblue:52735,mediumorchid:3126187007,mediumpurple:2473647103,mediumseagreen:1018393087,mediumslateblue:2070474495,mediumspringgreen:16423679,mediumturquoise:1221709055,mediumvioletred:3340076543,midnightblue:421097727,mintcream:4127193855,mistyrose:4293190143,moccasin:4293178879,navajowhite:4292783615,navy:33023,oldlace:4260751103,olive:2155872511,olivedrab:1804477439,orange:4289003775,orangered:4282712319,orchid:3664828159,palegoldenrod:4008225535,palegreen:2566625535,paleturquoise:2951671551,palevioletred:3681588223,papayawhip:4293907967,peachpuff:4292524543,peru:3448061951,pink:4290825215,plum:3718307327,powderblue:2967529215,purple:2147516671,rebeccapurple:1714657791,red:4278190335,rosybrown:3163525119,royalblue:1097458175,saddlebrown:2336560127,salmon:4202722047,sandybrown:4104413439,seagreen:780883967,seashell:4294307583,sienna:2689740287,silver:3233857791,skyblue:2278484991,slateblue:1784335871,slategray:1887473919,slategrey:1887473919,snow:4294638335,springgreen:16744447,steelblue:1182971135,tan:3535047935,teal:8421631,thistle:3636451583,tomato:4284696575,turquoise:1088475391,violet:4001558271,wheat:4125012991,white:4294967295,whitesmoke:4126537215,yellow:4294902015,yellowgreen:2597139199};var dist_esm_d="[-+]?\\d*\\.?\\d+",esm_M=dist_esm_d+"%";function C(...e){return"\\(\\s*("+e.join(")\\s*,\\s*(")+")\\s*\\)"}var oe=new RegExp("rgb"+C(dist_esm_d,dist_esm_d,dist_esm_d)),fe=new RegExp("rgba"+C(dist_esm_d,dist_esm_d,dist_esm_d,dist_esm_d)),ae=new RegExp("hsl"+C(dist_esm_d,esm_M,esm_M)),ie=new RegExp("hsla"+C(dist_esm_d,esm_M,esm_M,dist_esm_d)),se=/^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,ue=/^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,le=/^#([0-9a-fA-F]{6})$/,esm_ce=/^#([0-9a-fA-F]{8})$/;function be(e){let t;return typeof e=="number"?e>>>0===e&&e>=0&&e<=4294967295?e:null:(t=le.exec(e))?parseInt(t[1]+"ff",16)>>>0:dist_esm_c&&dist_esm_c[e]!==void 0?dist_esm_c[e]:(t=oe.exec(e))?(dist_esm_y(t[1])<<24|dist_esm_y(t[2])<<16|dist_esm_y(t[3])<<8|255)>>>0:(t=fe.exec(e))?(dist_esm_y(t[1])<<24|dist_esm_y(t[2])<<16|dist_esm_y(t[3])<<8|me(t[4]))>>>0:(t=se.exec(e))?parseInt(t[1]+t[1]+t[2]+t[2]+t[3]+t[3]+"ff",16)>>>0:(t=esm_ce.exec(e))?parseInt(t[1],16)>>>0:(t=ue.exec(e))?parseInt(t[1]+t[1]+t[2]+t[2]+t[3]+t[3]+t[4]+t[4],16)>>>0:(t=ae.exec(e))?(de(esm_pe(t[1]),esm_z(t[2]),esm_z(t[3]))|255)>>>0:(t=ie.exec(e))?(de(esm_pe(t[1]),esm_z(t[2]),esm_z(t[3]))|me(t[4]))>>>0:null}function esm_j(e,t,r){return r<0&&(r+=1),r>1&&(r-=1),r<1/6?e+(t-e)*6*r:r<1/2?t:r<2/3?e+(t-e)*(2/3-r)*6:e}function de(e,t,r){let n=r<.5?r*(1+t):r+t-r*t,f=2*r-n,o=esm_j(f,n,e+1/3),i=esm_j(f,n,e),s=esm_j(f,n,e-1/3);return Math.round(o*255)<<24|Math.round(i*255)<<16|Math.round(s*255)<<8}function dist_esm_y(e){let t=parseInt(e,10);return t<0?0:t>255?255:t}function esm_pe(e){return(parseFloat(e)%360+360)%360/360}function me(e){let t=parseFloat(e);return t<0?0:t>1?255:Math.round(t*255)}function esm_z(e){let t=parseFloat(e);return t<0?0:t>100?1:t/100}function D(e){let t=be(e);if(t===null)return e;t=t||0;let r=(t&4278190080)>>>24,n=(t&16711680)>>>16,f=(t&65280)>>>8,o=(t&255)/255;return`rgba(${r}, ${n}, ${f}, ${o})`}var W=(e,t,r)=>{if(dist_esm_l.fun(e))return e;if(dist_esm_l.arr(e))return W({range:e,output:t,extrapolate:r});if(dist_esm_l.str(e.output[0]))return esm_k(e);let n=e,f=n.output,o=n.range||[0,1],i=n.extrapolateLeft||n.extrapolate||"extend",s=n.extrapolateRight||n.extrapolate||"extend",x=n.easing||(a=>a);return a=>{let F=He(a,o);return Ue(a,o[F],o[F+1],f[F],f[F+1],x,i,s,n.map)}};function Ue(e,t,r,n,f,o,i,s,x){let a=x?x(e):e;if(a<t){if(i==="identity")return a;i==="clamp"&&(a=t)}if(a>r){if(s==="identity")return a;s==="clamp"&&(a=r)}return n===f?n:t===r?e<=t?n:f:(t===-1/0?a=-a:r===1/0?a=a-t:a=(a-t)/(r-t),a=o(a),n===-1/0?a=-a:f===1/0?a=a+n:a=a*(f-n)+n,a)}function He(e,t){for(var r=1;r<t.length-1&&!(t[r]>=e);++r);return r-1}var Be=(e,t="end")=>r=>{r=t==="end"?Math.min(r,.999):Math.max(r,.001);let n=r*e,f=t==="end"?Math.floor(n):Math.ceil(n);return ne(0,1,f/e)},P=1.70158,L=P*1.525,xe=P+1,he=2*Math.PI/3,ye=2*Math.PI/4.5,V=e=>e<1/2.75?7.5625*e*e:e<2/2.75?7.5625*(e-=1.5/2.75)*e+.75:e<2.5/2.75?7.5625*(e-=2.25/2.75)*e+.9375:7.5625*(e-=2.625/2.75)*e+.984375,Lt={linear:e=>e,easeInQuad:e=>e*e,easeOutQuad:e=>1-(1-e)*(1-e),easeInOutQuad:e=>e<.5?2*e*e:1-Math.pow(-2*e+2,2)/2,easeInCubic:e=>e*e*e,easeOutCubic:e=>1-Math.pow(1-e,3),easeInOutCubic:e=>e<.5?4*e*e*e:1-Math.pow(-2*e+2,3)/2,easeInQuart:e=>e*e*e*e,easeOutQuart:e=>1-Math.pow(1-e,4),easeInOutQuart:e=>e<.5?8*e*e*e*e:1-Math.pow(-2*e+2,4)/2,easeInQuint:e=>e*e*e*e*e,easeOutQuint:e=>1-Math.pow(1-e,5),easeInOutQuint:e=>e<.5?16*e*e*e*e*e:1-Math.pow(-2*e+2,5)/2,easeInSine:e=>1-Math.cos(e*Math.PI/2),easeOutSine:e=>Math.sin(e*Math.PI/2),easeInOutSine:e=>-(Math.cos(Math.PI*e)-1)/2,easeInExpo:e=>e===0?0:Math.pow(2,10*e-10),easeOutExpo:e=>e===1?1:1-Math.pow(2,-10*e),easeInOutExpo:e=>e===0?0:e===1?1:e<.5?Math.pow(2,20*e-10)/2:(2-Math.pow(2,-20*e+10))/2,easeInCirc:e=>1-Math.sqrt(1-Math.pow(e,2)),easeOutCirc:e=>Math.sqrt(1-Math.pow(e-1,2)),easeInOutCirc:e=>e<.5?(1-Math.sqrt(1-Math.pow(2*e,2)))/2:(Math.sqrt(1-Math.pow(-2*e+2,2))+1)/2,easeInBack:e=>xe*e*e*e-P*e*e,easeOutBack:e=>1+xe*Math.pow(e-1,3)+P*Math.pow(e-1,2),easeInOutBack:e=>e<.5?Math.pow(2*e,2)*((L+1)*2*e-L)/2:(Math.pow(2*e-2,2)*((L+1)*(e*2-2)+L)+2)/2,easeInElastic:e=>e===0?0:e===1?1:-Math.pow(2,10*e-10)*Math.sin((e*10-10.75)*he),easeOutElastic:e=>e===0?0:e===1?1:Math.pow(2,-10*e)*Math.sin((e*10-.75)*he)+1,easeInOutElastic:e=>e===0?0:e===1?1:e<.5?-(Math.pow(2,20*e-10)*Math.sin((20*e-11.125)*ye))/2:Math.pow(2,-20*e+10)*Math.sin((20*e-11.125)*ye)/2+1,easeInBounce:e=>1-V(1-e),easeOutBounce:V,easeInOutBounce:e=>e<.5?(1-V(1-2*e))/2:(1+V(2*e-1))/2,steps:Be};var esm_g=Symbol.for("FluidValue.get"),dist_esm_m=Symbol.for("FluidValue.observers");var Pt=e=>Boolean(e&&e[esm_g]),ve=e=>e&&e[esm_g]?e[esm_g]():e,esm_qt=e=>e[dist_esm_m]||null;function je(e,t){e.eventObserved?e.eventObserved(t):e(t)}function $t(e,t){let r=e[dist_esm_m];r&&r.forEach(n=>{je(n,t)})}var esm_ge=class{[esm_g];[dist_esm_m];constructor(t){if(!t&&!(t=this.get))throw Error("Unknown getter");De(this,t)}},De=(e,t)=>Ee(e,esm_g,t);function Gt(e,t){if(e[esm_g]){let r=e[dist_esm_m];r||Ee(e,dist_esm_m,r=new Set),r.has(t)||(r.add(t),e.observerAdded&&e.observerAdded(r.size,t))}return t}function Qt(e,t){let r=e[dist_esm_m];if(r&&r.has(t)){let n=r.size-1;n?r.delete(t):e[dist_esm_m]=null,e.observerRemoved&&e.observerRemoved(n,t)}}var Ee=(e,t,r)=>Object.defineProperty(e,t,{value:r,writable:!0,configurable:!0});var O=/[+\-]?(?:0|[1-9]\d*)(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,esm_Oe=/(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))/gi,K=new RegExp(`(${O.source})(%|[a-z]+)`,"i"),we=/rgba\(([0-9\.-]+), ([0-9\.-]+), ([0-9\.-]+), ([0-9\.-]+)\)/gi,dist_esm_b=/var\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\)/;var esm_N=e=>{let[t,r]=We(e);if(!t||dist_esm_h())return e;let n=window.getComputedStyle(document.documentElement).getPropertyValue(t);if(n)return n.trim();if(r&&r.startsWith("--")){let f=window.getComputedStyle(document.documentElement).getPropertyValue(r);return f||e}else{if(r&&dist_esm_b.test(r))return esm_N(r);if(r)return r}return e},We=e=>{let t=dist_esm_b.exec(e);if(!t)return[,];let[,r,n]=t;return[r,n]};var _,esm_Ke=(e,t,r,n,f)=>`rgba(${Math.round(t)}, ${Math.round(r)}, ${Math.round(n)}, ${f})`,Xt=e=>{_||(_=dist_esm_c?new RegExp(`(${Object.keys(dist_esm_c).join("|")})(?!\\w)`,"g"):/^\b$/);let t=e.output.map(o=>ve(o).replace(dist_esm_b,esm_N).replace(esm_Oe,D).replace(_,D)),r=t.map(o=>o.match(O).map(Number)),f=r[0].map((o,i)=>r.map(s=>{if(!(i in s))throw Error('The arity of each "output" value must be equal');return s[i]})).map(o=>W({...e,output:o}));return o=>{let i=!K.test(t[0])&&t.find(x=>K.test(x))?.replace(O,""),s=0;return t[0].replace(O,()=>`${f[s++](o)}${i||""}`).replace(we,esm_Ke)}};var Z="react-spring: ",Te=e=>{let t=e,r=!1;if(typeof t!="function")throw new TypeError(`${Z}once requires a function parameter`);return(...n)=>{r||(t(...n),r=!0)}},Ne=Te(console.warn);function Jt(){Ne(`${Z}The "interpolate" function is deprecated in v9 (use "to" instead)`)}var _e=Te(console.warn);function er(){_e(`${Z}Directly calling start instead of using the api object is deprecated in v9 (use ".start" instead), this will be removed in later 0.X.0 versions`)}function esm_or(e){return dist_esm_l.str(e)&&(e[0]=="#"||/\d/.test(e)||!dist_esm_h()&&dist_esm_b.test(e)||e in(dist_esm_c||{}))}var dist_esm_v,q=new WeakMap,Ze=e=>e.forEach(({target:t,contentRect:r})=>q.get(t)?.forEach(n=>n(r)));function Fe(e,t){dist_esm_v||typeof ResizeObserver<"u"&&(dist_esm_v=new ResizeObserver(Ze));let r=q.get(t);return r||(r=new Set,q.set(t,r)),r.add(e),dist_esm_v&&dist_esm_v.observe(t),()=>{let n=q.get(t);!n||(n.delete(e),!n.size&&dist_esm_v&&dist_esm_v.unobserve(t))}}var esm_$=new Set,dist_esm_w,esm_Xe=()=>{let e=()=>{esm_$.forEach(t=>t({width:window.innerWidth,height:window.innerHeight}))};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},Ie=e=>(esm_$.add(e),dist_esm_w||(dist_esm_w=esm_Xe()),()=>{esm_$.delete(e),!esm_$.size&&dist_esm_w&&(dist_esm_w(),dist_esm_w=void 0)});var ke=(e,{container:t=document.documentElement}={})=>t===document.documentElement?Ie(e):Fe(e,t);var Se=(e,t,r)=>t-e===0?1:(r-e)/(t-e);var esm_Ye={x:{length:"Width",position:"Left"},y:{length:"Height",position:"Top"}},esm_G=class{callback;container;info;constructor(t,r){this.callback=t,this.container=r,this.info={time:0,x:this.createAxis(),y:this.createAxis()}}createAxis=()=>({current:0,progress:0,scrollLength:0});updateAxis=t=>{let r=this.info[t],{length:n,position:f}=esm_Ye[t];r.current=this.container[`scroll${f}`],r.scrollLength=this.container["scroll"+n]-this.container["client"+n],r.progress=Se(0,r.scrollLength,r.current)};update=()=>{this.updateAxis("x"),this.updateAxis("y")};sendEvent=()=>{this.callback(this.info)};advance=()=>{this.update(),this.sendEvent()}};var esm_T=new WeakMap,Ae=new WeakMap,X=new WeakMap,Me=e=>e===document.documentElement?window:e,yr=(e,{container:t=document.documentElement}={})=>{let r=X.get(t);r||(r=new Set,X.set(t,r));let n=new esm_G(e,t);if(r.add(n),!esm_T.has(t)){let o=()=>(r?.forEach(s=>s.advance()),!0);esm_T.set(t,o);let i=Me(t);window.addEventListener("resize",o,{passive:!0}),t!==document.documentElement&&Ae.set(t,ke(o,{container:t})),i.addEventListener("scroll",o,{passive:!0})}let f=esm_T.get(t);return Re(f),()=>{Re.cancel(f);let o=X.get(t);if(!o||(o.delete(n),o.size))return;let i=esm_T.get(t);esm_T.delete(t),i&&(Me(t).removeEventListener("scroll",i),window.removeEventListener("resize",i),Ae.get(t)?.())}};function Er(e){let t=Je(null);return t.current===null&&(t.current=e()),t.current}var esm_Q=dist_esm_h()?external_React_.useEffect:external_React_.useLayoutEffect;var Ce=()=>{let e=(0,external_React_.useRef)(!1);return esm_Q(()=>(e.current=!0,()=>{e.current=!1}),[]),e};function Mr(){let e=(0,external_React_.useState)()[1],t=Ce();return()=>{t.current&&e(Math.random())}}function Lr(e,t){let[r]=(0,external_React_.useState)(()=>({inputs:t,result:e()})),n=(0,external_React_.useRef)(),f=n.current,o=f;return o?Boolean(t&&o.inputs&&it(t,o.inputs))||(o={inputs:t,result:e()}):o=r,(0,external_React_.useEffect)(()=>{n.current=o,f==r&&(r.inputs=r.result=void 0)},[o]),o.result}function it(e,t){if(e.length!==t.length)return!1;for(let r=0;r<e.length;r++)if(e[r]!==t[r])return!1;return!0}var $r=e=>(0,external_React_.useEffect)(e,ut),ut=[];function Ur(e){let t=ct();return lt(()=>{t.current=e}),t.current}var Wr=()=>{let[e,t]=dt(null);return esm_Q(()=>{let r=window.matchMedia("(prefers-reduced-motion)"),n=f=>{t(f.matches),U({skipAnimation:f.matches})};return n(r),r.addEventListener("change",n),()=>{r.removeEventListener("change",n)}},[]),e};
;// CONCATENATED MODULE: ./node_modules/@react-spring/animated/dist/esm/index.js
var animated_dist_esm_h=Symbol.for("Animated:node"),animated_dist_esm_v=e=>!!e&&e[animated_dist_esm_h]===e,dist_esm_k=e=>e&&e[animated_dist_esm_h],esm_D=(e,t)=>mt(e,animated_dist_esm_h,t),F=e=>e&&e[animated_dist_esm_h]&&e[animated_dist_esm_h].getPayload(),animated_dist_esm_c=class{payload;constructor(){esm_D(this,this)}getPayload(){return this.payload||[]}};var animated_dist_esm_l=class extends animated_dist_esm_c{constructor(r){super();this._value=r;dist_esm_l.num(this._value)&&(this.lastPosition=this._value)}done=!0;elapsedTime;lastPosition;lastVelocity;v0;durationProgress=0;static create(r){return new animated_dist_esm_l(r)}getPayload(){return[this]}getValue(){return this._value}setValue(r,n){return dist_esm_l.num(r)&&(this.lastPosition=r,n&&(r=Math.round(r/n)*n,this.done&&(this.lastPosition=r))),this._value===r?!1:(this._value=r,!0)}reset(){let{done:r}=this;this.done=!1,dist_esm_l.num(this._value)&&(this.elapsedTime=0,this.durationProgress=0,this.lastPosition=this._value,r&&(this.lastVelocity=null),this.v0=null)}};var animated_dist_esm_d=class extends animated_dist_esm_l{_string=null;_toString;constructor(t){super(0),this._toString=W({output:[t,t]})}static create(t){return new animated_dist_esm_d(t)}getValue(){let t=this._string;return t??(this._string=this._toString(this._value))}setValue(t){if(dist_esm_l.str(t)){if(t==this._string)return!1;this._string=t,this._value=1}else if(super.setValue(t))this._string=null;else return!1;return!0}reset(t){t&&(this._toString=W({output:[this.getValue(),t]})),this._value=0,super.reset()}};var dist_esm_f={dependencies:null};var animated_dist_esm_u=class extends animated_dist_esm_c{constructor(r){super();this.source=r;this.setValue(r)}getValue(r){let n={};return xt(this.source,(a,i)=>{animated_dist_esm_v(a)?n[i]=a.getValue(r):Pt(a)?n[i]=ve(a):r||(n[i]=a)}),n}setValue(r){this.source=r,this.payload=this._makePayload(r)}reset(){this.payload&&esm_Ve(this.payload,r=>r.reset())}_makePayload(r){if(r){let n=new Set;return xt(r,this._addToPayload,n),Array.from(n)}}_addToPayload(r){dist_esm_f.dependencies&&Pt(r)&&dist_esm_f.dependencies.add(r);let n=F(r);n&&esm_Ve(n,a=>this.add(a))}};var animated_dist_esm_y=class extends animated_dist_esm_u{constructor(t){super(t)}static create(t){return new animated_dist_esm_y(t)}getValue(){return this.source.map(t=>t.getValue())}setValue(t){let r=this.getPayload();return t.length==r.length?r.map((n,a)=>n.setValue(t[a])).some(Boolean):(super.setValue(t.map(dist_esm_z)),!0)}};function dist_esm_z(e){return(esm_or(e)?animated_dist_esm_d:animated_dist_esm_l).create(e)}function esm_Le(e){let t=dist_esm_k(e);return t?t.constructor:dist_esm_l.arr(e)?animated_dist_esm_y:esm_or(e)?animated_dist_esm_d:animated_dist_esm_l}var dist_esm_x=(e,t)=>{let r=!dist_esm_l.fun(e)||e.prototype&&e.prototype.isReactComponent;return (0,external_React_.forwardRef)((n,a)=>{let i=(0,external_React_.useRef)(null),o=r&&(0,external_React_.useCallback)(s=>{i.current=esm_ae(a,s)},[a]),[m,T]=esm_ne(n,t),W=Mr(),P=()=>{let s=i.current;if(r&&!s)return;(s?t.applyAnimatedValues(s,m.getValue(!0)):!1)===!1&&W()},_=new animated_dist_esm_b(P,T),p=(0,external_React_.useRef)();esm_Q(()=>(p.current=_,esm_Ve(T,s=>Gt(s,_)),()=>{p.current&&(esm_Ve(p.current.deps,s=>Qt(s,p.current)),esm_n.cancel(p.current.update))})),(0,external_React_.useEffect)(P,[]),$r(()=>()=>{let s=p.current;esm_Ve(s.deps,S=>Qt(S,s))});let $=t.getComponentProps(m.getValue());return external_React_.createElement(e,{...$,ref:o})})},animated_dist_esm_b=class{constructor(t,r){this.update=t;this.deps=r}eventObserved(t){t.type=="change"&&esm_n.write(this.update)}};function esm_ne(e,t){let r=new Set;return dist_esm_f.dependencies=r,e.style&&(e={...e,style:t.createAnimatedStyle(e.style)}),e=new animated_dist_esm_u(e),dist_esm_f.dependencies=null,[e,r]}function esm_ae(e,t){return e&&(dist_esm_l.fun(e)?e(t):e.current=t),t}var dist_esm_j=Symbol.for("AnimatedComponent"),dist_esm_Ke=(e,{applyAnimatedValues:t=()=>!1,createAnimatedStyle:r=a=>new animated_dist_esm_u(a),getComponentProps:n=a=>a}={})=>{let a={applyAnimatedValues:t,createAnimatedStyle:r,getComponentProps:n},i=o=>{let m=esm_I(o)||"Anonymous";return dist_esm_l.str(o)?o=i[o]||(i[o]=dist_esm_x(o,a)):o=o[dist_esm_j]||(o[dist_esm_j]=dist_esm_x(o,a)),o.displayName=`Animated(${m})`,o};return xt(e,(o,m)=>{dist_esm_l.arr(e)&&(m=esm_I(o)),i[m]=i(o)}),{animated:i}},esm_I=e=>dist_esm_l.str(e)?e:e&&dist_esm_l.str(e.displayName)?e.displayName:dist_esm_l.fun(e)&&e.name||null;
;// CONCATENATED MODULE: ./node_modules/@react-spring/core/dist/esm/index.js
function dist_esm_I(t,...e){return dist_esm_l.fun(t)?t(...e):t}var esm_te=(t,e)=>t===!0||!!(e&&t&&(dist_esm_l.fun(t)?t(e):ht(t).includes(e))),et=(t,e)=>dist_esm_l.obj(t)?e&&t[e]:t;var esm_ke=(t,e)=>t.default===!0?t[e]:t.default?t.default[e]:void 0,nn=t=>t,dist_esm_ne=(t,e=nn)=>{let n=rn;t.default&&t.default!==!0&&(t=t.default,n=Object.keys(t));let r={};for(let o of n){let s=e(t[o],o);dist_esm_l.und(s)||(r[o]=s)}return r},rn=["config","onProps","onStart","onChange","onPause","onResume","onRest"],on={config:1,from:1,to:1,ref:1,loop:1,reset:1,pause:1,cancel:1,reverse:1,immediate:1,default:1,delay:1,onProps:1,onStart:1,onChange:1,onPause:1,onResume:1,onRest:1,onResolve:1,items:1,trail:1,sort:1,expires:1,initial:1,enter:1,update:1,leave:1,children:1,onDestroyed:1,keys:1,callId:1,parentId:1};function sn(t){let e={},n=0;if(xt(t,(r,o)=>{on[o]||(e[o]=r,n++)}),n)return e}function esm_de(t){let e=sn(t);if(e){let n={to:e};return xt(t,(r,o)=>o in e||(n[o]=r)),n}return{...t}}function esm_me(t){return t=ve(t),dist_esm_l.arr(t)?t.map(esm_me):esm_or(t)?dist_esm_p.createStringInterpolator({range:[0,1],output:[t,t]})(1):t}function esm_Ue(t){for(let e in t)return!0;return!1}function esm_Ee(t){return dist_esm_l.fun(t)||dist_esm_l.arr(t)&&dist_esm_l.obj(t[0])}function esm_xe(t,e){t.ref?.delete(t),e?.delete(t)}function esm_he(t,e){e&&t.ref!==e&&(t.ref?.delete(t),e.add(t),t.ref=e)}function wr(t,e,n=1e3){an(()=>{if(e){let r=0;ge(t,(o,s)=>{let a=o.current;if(a.length){let i=n*e[s];isNaN(i)?i=r:r=i,ge(a,u=>{ge(u.queue,p=>{let f=p.delay;p.delay=d=>i+dist_esm_I(f||0,d)})}),o.start()}})}else{let r=Promise.resolve();ge(t,o=>{let s=o.current;if(s.length){let a=s.map(i=>{let u=i.queue;return i.queue=[],u});r=r.then(()=>(ge(s,(i,u)=>ge(a[u]||[],p=>i.queue.push(p))),Promise.all(o.start())))}})}})}var esm_mt={default:{tension:170,friction:26},gentle:{tension:120,friction:14},wobbly:{tension:180,friction:12},stiff:{tension:210,friction:20},slow:{tension:280,friction:60},molasses:{tension:280,friction:120}};var tt={...esm_mt.default,mass:1,damping:1,easing:Lt.linear,clamp:!1},esm_we=class{tension;friction;frequency;damping;mass;velocity=0;restVelocity;precision;progress;duration;easing;clamp;bounce;decay;round;constructor(){Object.assign(this,tt)}};function gt(t,e,n){n&&(n={...n},esm_ht(n,e),e={...n,...e}),esm_ht(t,e),Object.assign(t,e);for(let a in tt)t[a]==null&&(t[a]=tt[a]);let{mass:r,frequency:o,damping:s}=t;return dist_esm_l.und(o)||(o<.01&&(o=.01),s<0&&(s=0),t.tension=Math.pow(2*Math.PI/o,2)*r,t.friction=4*Math.PI*s*r/o),t}function esm_ht(t,e){if(!dist_esm_l.und(e.decay))t.duration=void 0;else{let n=!dist_esm_l.und(e.tension)||!dist_esm_l.und(e.friction);(n||!dist_esm_l.und(e.frequency)||!dist_esm_l.und(e.damping)||!dist_esm_l.und(e.mass))&&(t.duration=void 0,t.decay=void 0),n&&(t.frequency=void 0)}}var esm_yt=[],dist_esm_Le=class{changed=!1;values=esm_yt;toValues=null;fromValues=esm_yt;to;from;config=new esm_we;immediate=!1};function esm_Me(t,{key:e,props:n,defaultProps:r,state:o,actions:s}){return new Promise((a,i)=>{let u,p,f=esm_te(n.cancel??r?.cancel,e);if(f)b();else{dist_esm_l.und(n.pause)||(o.paused=esm_te(n.pause,e));let c=r?.pause;c!==!0&&(c=o.paused||esm_te(c,e)),u=dist_esm_I(n.delay||0,e),c?(o.resumeQueue.add(m),s.pause()):(s.resume(),m())}function d(){o.resumeQueue.add(m),o.timeouts.delete(p),p.cancel(),u=p.time-esm_n.now()}function m(){u>0&&!dist_esm_p.skipAnimation?(o.delayed=!0,p=esm_n.setTimeout(b,u),o.pauseQueue.add(d),o.timeouts.add(p)):b()}function b(){o.delayed&&(o.delayed=!1),o.pauseQueue.delete(d),o.timeouts.delete(p),t<=(o.cancelId||0)&&(f=!0);try{s.start({...n,callId:t,cancel:f},a)}catch(c){i(c)}}})}var esm_be=(t,e)=>e.length==1?e[0]:e.some(n=>n.cancelled)?esm_q(t.get()):e.every(n=>n.noop)?nt(t.get()):dist_esm_E(t.get(),e.every(n=>n.finished)),nt=t=>({value:t,noop:!0,finished:!0,cancelled:!1}),dist_esm_E=(t,e,n=!1)=>({value:t,finished:e,cancelled:n}),esm_q=t=>({value:t,cancelled:!0,finished:!1});function esm_De(t,e,n,r){let{callId:o,parentId:s,onRest:a}=e,{asyncTo:i,promise:u}=n;return!s&&t===i&&!e.reset?u:n.promise=(async()=>{n.asyncId=o,n.asyncTo=t;let p=dist_esm_ne(e,(l,h)=>h==="onRest"?void 0:l),f,d,m=new Promise((l,h)=>(f=l,d=h)),b=l=>{let h=o<=(n.cancelId||0)&&esm_q(r)||o!==n.asyncId&&dist_esm_E(r,!1);if(h)throw l.result=h,d(l),l},c=(l,h)=>{let g=new esm_Ae,x=new esm_Ne;return(async()=>{if(dist_esm_p.skipAnimation)throw esm_oe(n),x.result=dist_esm_E(r,!1),d(x),x;b(g);let S=dist_esm_l.obj(l)?{...l}:{...h,to:l};S.parentId=o,xt(p,(V,_)=>{dist_esm_l.und(S[_])&&(S[_]=V)});let A=await r.start(S);return b(g),n.paused&&await new Promise(V=>{n.resumeQueue.add(V)}),A})()},P;if(dist_esm_p.skipAnimation)return esm_oe(n),dist_esm_E(r,!1);try{let l;dist_esm_l.arr(t)?l=(async h=>{for(let g of h)await c(g)})(t):l=Promise.resolve(t(c,r.stop.bind(r))),await Promise.all([l.then(f),m]),P=dist_esm_E(r.get(),!0,!1)}catch(l){if(l instanceof esm_Ae)P=l.result;else if(l instanceof esm_Ne)P=l.result;else throw l}finally{o==n.asyncId&&(n.asyncId=s,n.asyncTo=s?i:void 0,n.promise=s?u:void 0)}return dist_esm_l.fun(a)&&esm_n.batchedUpdates(()=>{a(P,r,r.item)}),P})()}function esm_oe(t,e){Pe(t.timeouts,n=>n.cancel()),t.pauseQueue.clear(),t.resumeQueue.clear(),t.asyncId=t.asyncTo=t.promise=void 0,e&&(t.cancelId=e)}var esm_Ae=class extends Error{result;constructor(){super("An async animation has been interrupted. You see this error because you forgot to use `await` or `.catch(...)` on its returned promise.")}},esm_Ne=class extends Error{result;constructor(){super("SkipAnimationSignal")}};var esm_Re=t=>t instanceof esm_X,Sn=1,esm_X=class extends esm_ge{id=Sn++;_priority=0;get priority(){return this._priority}set priority(e){this._priority!=e&&(this._priority=e,this._onPriorityChange(e))}get(){let e=dist_esm_k(this);return e&&e.getValue()}to(...e){return dist_esm_p.to(this,e)}interpolate(...e){return Jt(),dist_esm_p.to(this,e)}toJSON(){return this.get()}observerAdded(e){e==1&&this._attach()}observerRemoved(e){e==0&&this._detach()}_attach(){}_detach(){}_onChange(e,n=!1){$t(this,{type:"change",parent:this,value:e,idle:n})}_onPriorityChange(e){this.idle||qe.sort(this),$t(this,{type:"priority",parent:this,priority:e})}};var esm_se=Symbol.for("SpringPhase"),esm_bt=1,rt=2,ot=4,esm_qe=t=>(t[esm_se]&esm_bt)>0,dist_esm_Q=t=>(t[esm_se]&rt)>0,esm_ye=t=>(t[esm_se]&ot)>0,st=(t,e)=>e?t[esm_se]|=rt|esm_bt:t[esm_se]&=~rt,esm_it=(t,e)=>e?t[esm_se]|=ot:t[esm_se]&=~ot;var esm_ue=class extends esm_X{key;animation=new dist_esm_Le;queue;defaultProps={};_state={paused:!1,delayed:!1,pauseQueue:new Set,resumeQueue:new Set,timeouts:new Set};_pendingCalls=new Set;_lastCallId=0;_lastToId=0;_memoizedDuration=0;constructor(e,n){if(super(),!dist_esm_l.und(e)||!dist_esm_l.und(n)){let r=dist_esm_l.obj(e)?{...e}:{...n,from:e};dist_esm_l.und(r.default)&&(r.default=!0),this.start(r)}}get idle(){return!(dist_esm_Q(this)||this._state.asyncTo)||esm_ye(this)}get goal(){return ve(this.animation.to)}get velocity(){let e=dist_esm_k(this);return e instanceof animated_dist_esm_l?e.lastVelocity||0:e.getPayload().map(n=>n.lastVelocity||0)}get hasAnimated(){return esm_qe(this)}get isAnimating(){return dist_esm_Q(this)}get isPaused(){return esm_ye(this)}get isDelayed(){return this._state.delayed}advance(e){let n=!0,r=!1,o=this.animation,{config:s,toValues:a}=o,i=F(o.to);!i&&Pt(o.to)&&(a=ht(ve(o.to))),o.values.forEach((f,d)=>{if(f.done)return;let m=f.constructor==animated_dist_esm_d?1:i?i[d].lastPosition:a[d],b=o.immediate,c=m;if(!b){if(c=f.lastPosition,s.tension<=0){f.done=!0;return}let P=f.elapsedTime+=e,l=o.fromValues[d],h=f.v0!=null?f.v0:f.v0=dist_esm_l.arr(s.velocity)?s.velocity[d]:s.velocity,g,x=s.precision||(l==m?.005:Math.min(1,Math.abs(m-l)*.001));if(dist_esm_l.und(s.duration))if(s.decay){let S=s.decay===!0?.998:s.decay,A=Math.exp(-(1-S)*P);c=l+h/(1-S)*(1-A),b=Math.abs(f.lastPosition-c)<=x,g=h*A}else{g=f.lastVelocity==null?h:f.lastVelocity;let S=s.restVelocity||x/10,A=s.clamp?0:s.bounce,V=!dist_esm_l.und(A),_=l==m?f.v0>0:l<m,v,w=!1,C=1,$=Math.ceil(e/C);for(let L=0;L<$&&(v=Math.abs(g)>S,!(!v&&(b=Math.abs(m-c)<=x,b)));++L){V&&(w=c==m||c>m==_,w&&(g=-g*A,c=m));let N=-s.tension*1e-6*(c-m),y=-s.friction*.001*g,T=(N+y)/s.mass;g=g+T*C,c=c+g*C}}else{let S=1;s.duration>0&&(this._memoizedDuration!==s.duration&&(this._memoizedDuration=s.duration,f.durationProgress>0&&(f.elapsedTime=s.duration*f.durationProgress,P=f.elapsedTime+=e)),S=(s.progress||0)+P/this._memoizedDuration,S=S>1?1:S<0?0:S,f.durationProgress=S),c=l+s.easing(S)*(m-l),g=(c-f.lastPosition)/e,b=S==1}f.lastVelocity=g,Number.isNaN(c)&&(console.warn("Got NaN while animating:",this),b=!0)}i&&!i[d].done&&(b=!1),b?f.done=!0:n=!1,f.setValue(c,s.round)&&(r=!0)});let u=dist_esm_k(this),p=u.getValue();if(n){let f=ve(o.to);(p!==f||r)&&!s.decay?(u.setValue(f),this._onChange(f)):r&&s.decay&&this._onChange(p),this._stop()}else r&&this._onChange(p)}set(e){return esm_n.batchedUpdates(()=>{this._stop(),this._focus(e),this._set(e)}),this}pause(){this._update({pause:!0})}resume(){this._update({pause:!1})}finish(){if(dist_esm_Q(this)){let{to:e,config:n}=this.animation;esm_n.batchedUpdates(()=>{this._onStart(),n.decay||this._set(e,!1),this._stop()})}return this}update(e){return(this.queue||(this.queue=[])).push(e),this}start(e,n){let r;return dist_esm_l.und(e)?(r=this.queue||[],this.queue=[]):r=[dist_esm_l.obj(e)?e:{...n,to:e}],Promise.all(r.map(o=>this._update(o))).then(o=>esm_be(this,o))}stop(e){let{to:n}=this.animation;return this._focus(this.get()),esm_oe(this._state,e&&this._lastCallId),esm_n.batchedUpdates(()=>this._stop(n,e)),this}reset(){this._update({reset:!0})}eventObserved(e){e.type=="change"?this._start():e.type=="priority"&&(this.priority=e.priority+1)}_prepareNode(e){let n=this.key||"",{to:r,from:o}=e;r=dist_esm_l.obj(r)?r[n]:r,(r==null||esm_Ee(r))&&(r=void 0),o=dist_esm_l.obj(o)?o[n]:o,o==null&&(o=void 0);let s={to:r,from:o};return esm_qe(this)||(e.reverse&&([r,o]=[o,r]),o=ve(o),dist_esm_l.und(o)?dist_esm_k(this)||this._set(r):this._set(o)),s}_update({...e},n){let{key:r,defaultProps:o}=this;e.default&&Object.assign(o,dist_esm_ne(e,(i,u)=>/^on/.test(u)?et(i,r):i)),_t(this,e,"onProps"),esm_Ie(this,"onProps",e,this);let s=this._prepareNode(e);if(Object.isFrozen(this))throw Error("Cannot animate a `SpringValue` object that is frozen. Did you forget to pass your component to `animated(...)` before animating its props?");let a=this._state;return esm_Me(++this._lastCallId,{key:r,props:e,defaultProps:o,state:a,actions:{pause:()=>{esm_ye(this)||(esm_it(this,!0),yt(a.pauseQueue),esm_Ie(this,"onPause",dist_esm_E(this,esm_Ce(this,this.animation.to)),this))},resume:()=>{esm_ye(this)&&(esm_it(this,!1),dist_esm_Q(this)&&this._resume(),yt(a.resumeQueue),esm_Ie(this,"onResume",dist_esm_E(this,esm_Ce(this,this.animation.to)),this))},start:this._merge.bind(this,s)}}).then(i=>{if(e.loop&&i.finished&&!(n&&i.noop)){let u=at(e);if(u)return this._update(u,!0)}return i})}_merge(e,n,r){if(n.cancel)return this.stop(!0),r(esm_q(this));let o=!dist_esm_l.und(e.to),s=!dist_esm_l.und(e.from);if(o||s)if(n.callId>this._lastToId)this._lastToId=n.callId;else return r(esm_q(this));let{key:a,defaultProps:i,animation:u}=this,{to:p,from:f}=u,{to:d=p,from:m=f}=e;s&&!o&&(!n.default||dist_esm_l.und(d))&&(d=m),n.reverse&&([d,m]=[m,d]);let b=!bt(m,f);b&&(u.from=m),m=ve(m);let c=!bt(d,p);c&&this._focus(d);let P=esm_Ee(n.to),{config:l}=u,{decay:h,velocity:g}=l;(o||s)&&(l.velocity=0),n.config&&!P&>(l,dist_esm_I(n.config,a),n.config!==i.config?dist_esm_I(i.config,a):void 0);let x=dist_esm_k(this);if(!x||dist_esm_l.und(d))return r(dist_esm_E(this,!0));let S=dist_esm_l.und(n.reset)?s&&!n.default:!dist_esm_l.und(m)&&esm_te(n.reset,a),A=S?m:this.get(),V=esm_me(d),_=dist_esm_l.num(V)||dist_esm_l.arr(V)||esm_or(V),v=!P&&(!_||esm_te(i.immediate||n.immediate,a));if(c){let L=esm_Le(d);if(L!==x.constructor)if(v)x=this._set(V);else throw Error(`Cannot animate between ${x.constructor.name} and ${L.name}, as the "to" prop suggests`)}let w=x.constructor,C=Pt(d),$=!1;if(!C){let L=S||!esm_qe(this)&&b;(c||L)&&($=bt(esm_me(A),V),C=!$),(!bt(u.immediate,v)&&!v||!bt(l.decay,h)||!bt(l.velocity,g))&&(C=!0)}if($&&dist_esm_Q(this)&&(u.changed&&!S?C=!0:C||this._stop(p)),!P&&((C||Pt(p))&&(u.values=x.getPayload(),u.toValues=Pt(d)?null:w==animated_dist_esm_d?[1]:ht(V)),u.immediate!=v&&(u.immediate=v,!v&&!S&&this._set(p)),C)){let{onRest:L}=u;esm_Ve(_n,y=>_t(this,n,y));let N=dist_esm_E(this,esm_Ce(this,p));yt(this._pendingCalls,N),this._pendingCalls.add(r),u.changed&&esm_n.batchedUpdates(()=>{u.changed=!S,L?.(N,this),S?dist_esm_I(i.onRest,N):u.onStart?.(N,this)})}S&&this._set(A),P?r(esm_De(n.to,n,this._state,this)):C?this._start():dist_esm_Q(this)&&!c?this._pendingCalls.add(r):r(nt(A))}_focus(e){let n=this.animation;e!==n.to&&(esm_qt(this)&&this._detach(),n.to=e,esm_qt(this)&&this._attach())}_attach(){let e=0,{to:n}=this.animation;Pt(n)&&(Gt(n,this),esm_Re(n)&&(e=n.priority+1)),this.priority=e}_detach(){let{to:e}=this.animation;Pt(e)&&Qt(e,this)}_set(e,n=!0){let r=ve(e);if(!dist_esm_l.und(r)){let o=dist_esm_k(this);if(!o||!bt(r,o.getValue())){let s=esm_Le(r);!o||o.constructor!=s?esm_D(this,s.create(r)):o.setValue(r),o&&esm_n.batchedUpdates(()=>{this._onChange(r,n)})}}return dist_esm_k(this)}_onStart(){let e=this.animation;e.changed||(e.changed=!0,esm_Ie(this,"onStart",dist_esm_E(this,esm_Ce(this,e.to)),this))}_onChange(e,n){n||(this._onStart(),dist_esm_I(this.animation.onChange,e,this)),dist_esm_I(this.defaultProps.onChange,e,this),super._onChange(e,n)}_start(){let e=this.animation;dist_esm_k(this).reset(ve(e.to)),e.immediate||(e.fromValues=e.values.map(n=>n.lastPosition)),dist_esm_Q(this)||(st(this,!0),esm_ye(this)||this._resume())}_resume(){dist_esm_p.skipAnimation?this.finish():qe.start(this)}_stop(e,n){if(dist_esm_Q(this)){st(this,!1);let r=this.animation;esm_Ve(r.values,s=>{s.done=!0}),r.toValues&&(r.onChange=r.onPause=r.onResume=void 0),$t(this,{type:"idle",parent:this});let o=n?esm_q(this.get()):dist_esm_E(this.get(),esm_Ce(this,e??r.to));yt(this._pendingCalls,o),r.changed&&(r.changed=!1,esm_Ie(this,"onRest",o,this))}}};function esm_Ce(t,e){let n=esm_me(e),r=esm_me(t.get());return bt(r,n)}function at(t,e=t.loop,n=t.to){let r=dist_esm_I(e);if(r){let o=r!==!0&&esm_de(r),s=(o||t).reverse,a=!o||o.reset;return esm_Pe({...t,loop:e,default:!1,pause:void 0,to:!s||esm_Ee(n)?n:void 0,from:a?t.from:void 0,reset:a,...o})}}function esm_Pe(t){let{to:e,from:n}=t=esm_de(t),r=new Set;return dist_esm_l.obj(e)&&Vt(e,r),dist_esm_l.obj(n)&&Vt(n,r),t.keys=r.size?Array.from(r):null,t}function Ot(t){let e=esm_Pe(t);return R.und(e.default)&&(e.default=dist_esm_ne(e)),e}function Vt(t,e){xt(t,(n,r)=>n!=null&&e.add(r))}var _n=["onStart","onRest","onChange","onPause","onResume"];function _t(t,e,n){t.animation[n]=e[n]!==esm_ke(e,n)?et(e[n],t.key):void 0}function esm_Ie(t,e,...n){t.animation[e]?.(...n),t.defaultProps[e]?.(...n)}var Fn=["onStart","onChange","onRest"],kn=1,esm_le=class{id=kn++;springs={};queue=[];ref;_flush;_initialProps;_lastAsyncId=0;_active=new Set;_changed=new Set;_started=!1;_item;_state={paused:!1,pauseQueue:new Set,resumeQueue:new Set,timeouts:new Set};_events={onStart:new Map,onChange:new Map,onRest:new Map};constructor(e,n){this._onFrame=this._onFrame.bind(this),n&&(this._flush=n),e&&this.start({default:!0,...e})}get idle(){return!this._state.asyncTo&&Object.values(this.springs).every(e=>e.idle&&!e.isDelayed&&!e.isPaused)}get item(){return this._item}set item(e){this._item=e}get(){let e={};return this.each((n,r)=>e[r]=n.get()),e}set(e){for(let n in e){let r=e[n];dist_esm_l.und(r)||this.springs[n].set(r)}}update(e){return e&&this.queue.push(esm_Pe(e)),this}start(e){let{queue:n}=this;return e?n=ht(e).map(esm_Pe):this.queue=[],this._flush?this._flush(this,n):(jt(this,n),esm_ze(this,n))}stop(e,n){if(e!==!!e&&(n=e),n){let r=this.springs;esm_Ve(ht(n),o=>r[o].stop(!!e))}else esm_oe(this._state,this._lastAsyncId),this.each(r=>r.stop(!!e));return this}pause(e){if(dist_esm_l.und(e))this.start({pause:!0});else{let n=this.springs;esm_Ve(ht(e),r=>n[r].pause())}return this}resume(e){if(dist_esm_l.und(e))this.start({pause:!1});else{let n=this.springs;esm_Ve(ht(e),r=>n[r].resume())}return this}each(e){xt(this.springs,e)}_onFrame(){let{onStart:e,onChange:n,onRest:r}=this._events,o=this._active.size>0,s=this._changed.size>0;(o&&!this._started||s&&!this._started)&&(this._started=!0,Pe(e,([u,p])=>{p.value=this.get(),u(p,this,this._item)}));let a=!o&&this._started,i=s||a&&r.size?this.get():null;s&&n.size&&Pe(n,([u,p])=>{p.value=i,u(p,this,this._item)}),a&&(this._started=!1,Pe(r,([u,p])=>{p.value=i,u(p,this,this._item)}))}eventObserved(e){if(e.type=="change")this._changed.add(e.parent),e.idle||this._active.add(e.parent);else if(e.type=="idle")this._active.delete(e.parent);else return;esm_n.onFrame(this._onFrame)}};function esm_ze(t,e){return Promise.all(e.map(n=>wt(t,n))).then(n=>esm_be(t,n))}async function wt(t,e,n){let{keys:r,to:o,from:s,loop:a,onRest:i,onResolve:u}=e,p=dist_esm_l.obj(e.default)&&e.default;a&&(e.loop=!1),o===!1&&(e.to=null),s===!1&&(e.from=null);let f=dist_esm_l.arr(o)||dist_esm_l.fun(o)?o:void 0;f?(e.to=void 0,e.onRest=void 0,p&&(p.onRest=void 0)):esm_Ve(Fn,P=>{let l=e[P];if(dist_esm_l.fun(l)){let h=t._events[P];e[P]=({finished:g,cancelled:x})=>{let S=h.get(l);S?(g||(S.finished=!1),x&&(S.cancelled=!0)):h.set(l,{value:null,finished:g||!1,cancelled:x||!1})},p&&(p[P]=e[P])}});let d=t._state;e.pause===!d.paused?(d.paused=e.pause,yt(e.pause?d.pauseQueue:d.resumeQueue)):d.paused&&(e.pause=!0);let m=(r||Object.keys(t.springs)).map(P=>t.springs[P].start(e)),b=e.cancel===!0||esm_ke(e,"cancel")===!0;(f||b&&d.asyncId)&&m.push(esm_Me(++t._lastAsyncId,{props:e,state:d,actions:{pause:Y,resume:Y,start(P,l){b?(esm_oe(d,t._lastAsyncId),l(esm_q(t))):(P.onRest=i,l(esm_De(f,P,d,t)))}}})),d.paused&&await new Promise(P=>{d.resumeQueue.add(P)});let c=esm_be(t,await Promise.all(m));if(a&&c.finished&&!(n&&c.noop)){let P=at(e,a,o);if(P)return jt(t,[P]),wt(t,P,!0)}return u&&esm_n.batchedUpdates(()=>u(c,t,t.item)),c}function esm_e(t,e){let n={...t.springs};return e&&pe(Ve(e),r=>{z.und(r.keys)&&(r=esm_Pe(r)),z.obj(r.to)||(r={...r,to:void 0}),Mt(n,r,o=>esm_Lt(o))}),pt(t,n),n}function pt(t,e){Ut(e,(n,r)=>{t.springs[r]||(t.springs[r]=n,Et(n,t))})}function esm_Lt(t,e){let n=new esm_ue;return n.key=t,e&&Gt(n,e),n}function Mt(t,e,n){e.keys&&esm_Ve(e.keys,r=>{(t[r]||(t[r]=n(r)))._prepareNode(e)})}function jt(t,e){esm_Ve(e,n=>{Mt(t.springs,n,r=>esm_Lt(r,t))})}var dist_esm_H=({children:t,...e})=>{let n=(0,external_React_.useContext)(esm_Ge),r=e.pause||!!n.pause,o=e.immediate||!!n.immediate;e=Lr(()=>({pause:r,immediate:o}),[r,o]);let{Provider:s}=esm_Ge;return external_React_.createElement(s,{value:e},t)},esm_Ge=wn(dist_esm_H,{});dist_esm_H.Provider=esm_Ge.Provider;dist_esm_H.Consumer=esm_Ge.Consumer;function wn(t,e){return Object.assign(t,external_React_.createContext(e)),t.Provider._context=t,t.Consumer._context=t,t}var esm_fe=()=>{let t=[],e=function(r){Ln();let o=[];return ce(t,(s,a)=>{if(Ke.und(r))o.push(s.start());else{let i=n(r,s,a);i&&o.push(s.start(i))}}),o};e.current=t,e.add=function(r){t.includes(r)||t.push(r)},e.delete=function(r){let o=t.indexOf(r);~o&&t.splice(o,1)},e.pause=function(){return ce(t,r=>r.pause(...arguments)),this},e.resume=function(){return ce(t,r=>r.resume(...arguments)),this},e.set=function(r){ce(t,(o,s)=>{let a=Ke.fun(r)?r(s,o):r;a&&o.set(a)})},e.start=function(r){let o=[];return ce(t,(s,a)=>{if(Ke.und(r))o.push(s.start());else{let i=this._getProps(r,s,a);i&&o.push(s.start(i))}}),o},e.stop=function(){return ce(t,r=>r.stop(...arguments)),this},e.update=function(r){return ce(t,(o,s)=>o.update(this._getProps(r,o,s))),this};let n=function(r,o,s){return Ke.fun(r)?r(s,o):r};return e._getProps=n,e};function esm_He(t,e,n){let r=jn.fun(e)&&e;r&&!n&&(n=[]);let o=Xe(()=>r||arguments.length==3?esm_fe():void 0,[]),s=Nt(0),a=Dn(),i=Xe(()=>({ctrls:[],queue:[],flush(h,g){let x=esm_e(h,g);return s.current>0&&!i.queue.length&&!Object.keys(x).some(A=>!h.springs[A])?esm_ze(h,g):new Promise(A=>{pt(h,x),i.queue.push(()=>{A(esm_ze(h,g))}),a()})}}),[]),u=Nt([...i.ctrls]),p=[],f=Dt(t)||0;Xe(()=>{Ye(u.current.slice(t,f),h=>{esm_xe(h,o),h.stop(!0)}),u.current.length=t,d(f,t)},[t]),Xe(()=>{d(0,Math.min(f,t))},n);function d(h,g){for(let x=h;x<g;x++){let S=u.current[x]||(u.current[x]=new esm_le(null,i.flush)),A=r?r(x,S):e[x];A&&(p[x]=Ot(A))}}let m=u.current.map((h,g)=>esm_e(h,p[g])),b=Mn(dist_esm_H),c=Dt(b),P=b!==c&&esm_Ue(b);qn(()=>{s.current++,i.ctrls=u.current;let{queue:h}=i;h.length&&(i.queue=[],Ye(h,g=>g())),Ye(u.current,(g,x)=>{o?.add(g),P&&g.start({default:b});let S=p[x];S&&(esm_he(g,S.ref),g.ref?g.queue.push(S):g.start(S))})}),Nn(()=>()=>{Ye(i.ctrls,h=>h.stop(!0))});let l=m.map(h=>({...h}));return o?[l,o]:l}function esm_J(t,e){let n=Qn.fun(t),[[r],o]=esm_He(1,n?t:[t],n?e||[]:e);return n||arguments.length==2?[r,o]:r}var Gn=()=>esm_fe(),Xo=()=>zn(Gn)[0];var Wo=(t,e)=>{let n=Bn(()=>new esm_ue(t,e));return Kn(()=>()=>{n.stop()}),n};function esm_Qt(t,e,n){let r=qt.fun(e)&&e;r&&!n&&(n=[]);let o=!0,s,a=esm_He(t,(i,u)=>{let p=r?r(i,u):e;return s=p.ref,o=o&&p.reverse,p},n||[{}]);if(Yn(()=>{Xn(a[1].current,(i,u)=>{let p=a[1].current[u+(o?1:-1)];if(esm_he(i,s),i.ref){p&&i.update({to:p.springs});return}p?i.start({to:p.springs}):i.start()})},n),r||arguments.length==3){let i=s??a[1];return i._getProps=(u,p,f)=>{let d=qt.fun(u)?u(f,p):u;if(d){let m=i.current[f+(d.reverse?1:-1)];return m&&(d.to=m.springs),d}},a}return a[0]}function esm_Gt(t,e,n){let r=G.fun(e)&&e,{reset:o,sort:s,trail:a=0,expires:i=!0,exitBeforeEnter:u=!1,onDestroyed:p,ref:f,config:d}=r?r():e,m=Jn(()=>r||arguments.length==3?esm_fe():void 0,[]),b=zt(t),c=[],P=lt(null),l=o?null:P.current;Je(()=>{P.current=c}),$n(()=>(j(c,y=>{m?.add(y.ctrl),y.ctrl.ref=m}),()=>{j(P.current,y=>{y.expired&&clearTimeout(y.expirationId),esm_xe(y.ctrl,m),y.ctrl.stop(!0)})}));let h=tr(b,r?r():e,l),g=o&&P.current||[];Je(()=>j(g,({ctrl:y,item:T,key:F})=>{esm_xe(y,m),dist_esm_I(p,T,F)}));let x=[];if(l&&j(l,(y,T)=>{y.expired?(clearTimeout(y.expirationId),g.push(y)):(T=x[T]=h.indexOf(y.key),~T&&(c[T]=y))}),j(b,(y,T)=>{c[T]||(c[T]={key:h[T],item:y,phase:"mount",ctrl:new esm_le},c[T].ctrl.item=y)}),x.length){let y=-1,{leave:T}=r?r():e;j(x,(F,k)=>{let O=l[k];~F?(y=c.indexOf(O),c[y]={...O,item:b[F]}):T&&c.splice(++y,0,O)})}G.fun(s)&&c.sort((y,T)=>s(y.item,T.item));let S=-a,A=Wn(),V=dist_esm_ne(e),_=new Map,v=lt(new Map),w=lt(!1);j(c,(y,T)=>{let F=y.key,k=y.phase,O=r?r():e,U,D,Jt=dist_esm_I(O.delay||0,F);if(k=="mount")U=O.enter,D="enter";else{let M=h.indexOf(F)<0;if(k!="leave")if(M)U=O.leave,D="leave";else if(U=O.update)D="update";else return;else if(!M)U=O.enter,D="enter";else return}if(U=dist_esm_I(U,y.item,T),U=G.obj(U)?esm_de(U):{to:U},!U.config){let M=d||V.config;U.config=dist_esm_I(M,y.item,T,D)}S+=a;let Z={...V,delay:Jt+S,ref:f,immediate:O.immediate,reset:!1,...U};if(D=="enter"&&G.und(Z.from)){let M=r?r():e,Te=G.und(M.initial)||l?M.from:M.initial;Z.from=dist_esm_I(Te,y.item,T)}let{onResolve:Wt}=Z;Z.onResolve=M=>{dist_esm_I(Wt,M);let Te=P.current,B=Te.find(Fe=>Fe.key===F);if(!!B&&!(M.cancelled&&B.phase!="update")&&B.ctrl.idle){let Fe=Te.every(ee=>ee.ctrl.idle);if(B.phase=="leave"){let ee=dist_esm_I(i,B.item);if(ee!==!1){let Ze=ee===!0?0:ee;if(B.expired=!0,!Fe&&Ze>0){Ze<=2147483647&&(B.expirationId=setTimeout(A,Ze));return}}}Fe&&Te.some(ee=>ee.expired)&&(v.current.delete(B),u&&(w.current=!0),A())}};let ft=esm_e(y.ctrl,Z);D==="leave"&&u?v.current.set(y,{phase:D,springs:ft,payload:Z}):_.set(y,{phase:D,springs:ft,payload:Z})});let C=Hn(dist_esm_H),$=Zn(C),L=C!==$&&esm_Ue(C);Je(()=>{L&&j(c,y=>{y.ctrl.start({default:C})})},[C]),j(_,(y,T)=>{if(v.current.size){let F=c.findIndex(k=>k.key===T.key);c.splice(F,1)}}),Je(()=>{j(v.current.size?v.current:_,({phase:y,payload:T},F)=>{let{ctrl:k}=F;F.phase=y,m?.add(k),L&&y=="enter"&&k.start({default:C}),T&&(esm_he(k,T.ref),(k.ref||m)&&!w.current?k.update(T):(k.start(T),w.current&&(w.current=!1)))})},o?void 0:n);let N=y=>Oe.createElement(Oe.Fragment,null,c.map((T,F)=>{let{springs:k}=_.get(T)||T.ctrl,O=y({...k},T.item,T,F);return O&&O.type?Oe.createElement(O.type,{...O.props,key:G.str(T.key)||G.num(T.key)?T.key:T.ctrl.id,ref:O.ref}):O}));return m?[N,m]:N}var esm_er=1;function tr(t,{key:e,keys:n=e},r){if(n===null){let o=new Set;return t.map(s=>{let a=r&&r.find(i=>i.item===s&&i.phase!=="leave"&&!o.has(i));return a?(o.add(a),a.key):esm_er++})}return G.und(n)?t:G.fun(n)?t.map(n):zt(n)}var hs=({container:t,...e}={})=>{let[n,r]=esm_J(()=>({scrollX:0,scrollY:0,scrollXProgress:0,scrollYProgress:0,...e}),[]);return or(()=>{let o=rr(({x:s,y:a})=>{r.start({scrollX:s.current,scrollXProgress:s.progress,scrollY:a.current,scrollYProgress:a.progress})},{container:t?.current||void 0});return()=>{nr(Object.values(n),s=>s.stop()),o()}},[]),n};var Ps=({container:t,...e})=>{let[n,r]=esm_J(()=>({width:0,height:0,...e}),[]);return ar(()=>{let o=sr(({width:s,height:a})=>{r.start({width:s,height:a,immediate:n.width.get()===0||n.height.get()===0})},{container:t?.current||void 0});return()=>{ir(Object.values(n),s=>s.stop()),o()}},[]),n};var cr={any:0,all:1};function Cs(t,e){let[n,r]=pr(!1),o=ur(),s=Bt.fun(t)&&t,a=s?s():{},{to:i={},from:u={},...p}=a,f=s?e:t,[d,m]=esm_J(()=>({from:u,...p}),[]);return lr(()=>{let b=o.current,{root:c,once:P,amount:l="any",...h}=f??{};if(!b||P&&n||typeof IntersectionObserver>"u")return;let g=new WeakMap,x=()=>(i&&m.start(i),r(!0),P?void 0:()=>{u&&m.start(u),r(!1)}),S=V=>{V.forEach(_=>{let v=g.get(_.target);if(_.isIntersecting!==Boolean(v))if(_.isIntersecting){let w=x();Bt.fun(w)?g.set(_.target,w):A.unobserve(_.target)}else v&&(v(),g.delete(_.target))})},A=new IntersectionObserver(S,{root:c&&c.current||void 0,threshold:typeof l=="number"||Array.isArray(l)?l:cr[l],...h});return A.observe(b),()=>A.unobserve(b)},[f]),s?[o,d]:[o,n]}function qs({children:t,...e}){return t(esm_J(e))}function Bs({items:t,children:e,...n}){let r=esm_Qt(t.length,n);return t.map((o,s)=>{let a=e(o,s);return fr.fun(a)?a(r[s]):a})}function Ys({items:t,children:e,...n}){return esm_Gt(t,n)(e)}var esm_W=class extends esm_X{constructor(n,r){super();this.source=n;this.calc=W(...r);let o=this._get(),s=esm_Le(o);esm_D(this,s.create(o))}key;idle=!0;calc;_active=new Set;advance(n){let r=this._get(),o=this.get();bt(r,o)||(dist_esm_k(this).setValue(r),this._onChange(r,this.idle)),!this.idle&&Yt(this._active)&&esm_ct(this)}_get(){let n=dist_esm_l.arr(this.source)?this.source.map(ve):ht(ve(this.source));return this.calc(...n)}_start(){this.idle&&!Yt(this._active)&&(this.idle=!1,esm_Ve(F(this),n=>{n.done=!1}),dist_esm_p.skipAnimation?(esm_n.batchedUpdates(()=>this.advance()),esm_ct(this)):qe.start(this))}_attach(){let n=1;esm_Ve(ht(this.source),r=>{Pt(r)&&Gt(r,this),esm_Re(r)&&(r.idle||this._active.add(r),n=Math.max(n,r.priority+1))}),this.priority=n,this._start()}_detach(){esm_Ve(ht(this.source),n=>{Pt(n)&&Qt(n,this)}),this._active.clear(),esm_ct(this)}eventObserved(n){n.type=="change"?n.idle?this.advance():(this._active.add(n.parent),this._start()):n.type=="idle"?this._active.delete(n.parent):n.type=="priority"&&(this.priority=ht(this.source).reduce((r,o)=>Math.max(r,(esm_Re(o)?o.priority:0)+1),0))}};function vr(t){return t.idle!==!1}function Yt(t){return!t.size||Array.from(t).every(vr)}function esm_ct(t){t.idle||(t.idle=!0,esm_Ve(F(t),e=>{e.done=!0}),$t(t,{type:"idle",parent:t}))}var esm_ui=(t,...e)=>new esm_W(t,e),pi=(t,...e)=>(Cr(),new esm_W(t,e));dist_esm_p.assign({createStringInterpolator:Xt,to:(t,e)=>new esm_W(t,e)});var di=qe.advance;
;// CONCATENATED MODULE: external "ReactDOM"
const external_ReactDOM_namespaceObject = window["ReactDOM"];
;// CONCATENATED MODULE: ./node_modules/@react-spring/web/dist/esm/index.js
var web_dist_esm_k=/^--/;function web_dist_esm_I(t,e){return e==null||typeof e=="boolean"||e===""?"":typeof e=="number"&&e!==0&&!web_dist_esm_k.test(t)&&!(web_dist_esm_c.hasOwnProperty(t)&&web_dist_esm_c[t])?e+"px":(""+e).trim()}var web_dist_esm_v={};function esm_V(t,e){if(!t.nodeType||!t.setAttribute)return!1;let r=t.nodeName==="filter"||t.parentNode&&t.parentNode.nodeName==="filter",{style:i,children:s,scrollTop:u,scrollLeft:l,viewBox:a,...n}=e,d=Object.values(n),m=Object.keys(n).map(o=>r||t.hasAttribute(o)?o:web_dist_esm_v[o]||(web_dist_esm_v[o]=o.replace(/([A-Z])/g,p=>"-"+p.toLowerCase())));s!==void 0&&(t.textContent=s);for(let o in i)if(i.hasOwnProperty(o)){let p=web_dist_esm_I(o,i[o]);web_dist_esm_k.test(o)?t.style.setProperty(o,p):t.style[o]=p}m.forEach((o,p)=>{t.setAttribute(o,d[p])}),u!==void 0&&(t.scrollTop=u),l!==void 0&&(t.scrollLeft=l),a!==void 0&&t.setAttribute("viewBox",a)}var web_dist_esm_c={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},esm_F=(t,e)=>t+e.charAt(0).toUpperCase()+e.substring(1),esm_L=["Webkit","Ms","Moz","O"];web_dist_esm_c=Object.keys(web_dist_esm_c).reduce((t,e)=>(esm_L.forEach(r=>t[esm_F(r,e)]=t[e]),t),web_dist_esm_c);var esm_=/^(matrix|translate|scale|rotate|skew)/,dist_esm_$=/^(translate)/,dist_esm_G=/^(rotate|skew)/,web_dist_esm_y=(t,e)=>dist_esm_l.num(t)&&t!==0?t+e:t,web_dist_esm_h=(t,e)=>dist_esm_l.arr(t)?t.every(r=>web_dist_esm_h(r,e)):dist_esm_l.num(t)?t===e:parseFloat(t)===e,dist_esm_g=class extends animated_dist_esm_u{constructor({x:e,y:r,z:i,...s}){let u=[],l=[];(e||r||i)&&(u.push([e||0,r||0,i||0]),l.push(a=>[`translate3d(${a.map(n=>web_dist_esm_y(n,"px")).join(",")})`,web_dist_esm_h(a,0)])),xt(s,(a,n)=>{if(n==="transform")u.push([a||""]),l.push(d=>[d,d===""]);else if(esm_.test(n)){if(delete s[n],dist_esm_l.und(a))return;let d=dist_esm_$.test(n)?"px":dist_esm_G.test(n)?"deg":"";u.push(ht(a)),l.push(n==="rotate3d"?([m,o,p,O])=>[`rotate3d(${m},${o},${p},${web_dist_esm_y(O,d)})`,web_dist_esm_h(O,0)]:m=>[`${n}(${m.map(o=>web_dist_esm_y(o,d)).join(",")})`,web_dist_esm_h(m,n.startsWith("scale")?1:0)])}}),u.length&&(s.transform=new web_dist_esm_x(u,l)),super(s)}},web_dist_esm_x=class extends esm_ge{constructor(r,i){super();this.inputs=r;this.transforms=i}_value=null;get(){return this._value||(this._value=this._get())}_get(){let r="",i=!0;return esm_Ve(this.inputs,(s,u)=>{let l=ve(s[0]),[a,n]=this.transforms[u](dist_esm_l.arr(l)?l:s.map(ve));r+=" "+a,i=i&&n}),i?"none":r}observerAdded(r){r==1&&esm_Ve(this.inputs,i=>esm_Ve(i,s=>Pt(s)&&Gt(s,this)))}observerRemoved(r){r==0&&esm_Ve(this.inputs,i=>esm_Ve(i,s=>Pt(s)&&Qt(s,this)))}eventObserved(r){r.type=="change"&&(this._value=null),$t(this,r)}};var esm_C=["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr","circle","clipPath","defs","ellipse","foreignObject","g","image","line","linearGradient","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","tspan"];dist_esm_p.assign({batchedUpdates:external_ReactDOM_namespaceObject.unstable_batchedUpdates,createStringInterpolator:Xt,colors:It});var dist_esm_q=dist_esm_Ke(esm_C,{applyAnimatedValues:esm_V,createAnimatedStyle:t=>new dist_esm_g(t),getComponentProps:({scrollTop:t,scrollLeft:e,...r})=>r}),dist_esm_it=dist_esm_q.animated;
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/use-moving-animation/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* If the block count exceeds the threshold, we disable the reordering animation
* to avoid laginess.
*/
const BLOCK_ANIMATION_THRESHOLD = 200;
function getAbsolutePosition(element) {
return {
top: element.offsetTop,
left: element.offsetLeft
};
}
/**
* Hook used to compute the styles required to move a div into a new position.
*
* The way this animation works is the following:
* - It first renders the element as if there was no animation.
* - It takes a snapshot of the position of the block to use it
* as a destination point for the animation.
* - It restores the element to the previous position using a CSS transform
* - It uses the "resetAnimation" flag to reset the animation
* from the beginning in order to animate to the new destination point.
*
* @param {Object} $1 Options
* @param {*} $1.triggerAnimationOnChange Variable used to trigger the animation if it changes.
* @param {string} $1.clientId
*/
function useMovingAnimation({
triggerAnimationOnChange,
clientId
}) {
const ref = (0,external_wp_element_namespaceObject.useRef)();
const {
isTyping,
getGlobalBlockCount,
isBlockSelected,
isFirstMultiSelectedBlock,
isBlockMultiSelected,
isAncestorMultiSelected
} = (0,external_wp_data_namespaceObject.useSelect)(store);
// Whenever the trigger changes, we need to take a snapshot of the current
// position of the block to use it as a destination point for the animation.
const {
previous,
prevRect
} = (0,external_wp_element_namespaceObject.useMemo)(() => ({
previous: ref.current && getAbsolutePosition(ref.current),
prevRect: ref.current && ref.current.getBoundingClientRect()
}),
// eslint-disable-next-line react-hooks/exhaustive-deps
[triggerAnimationOnChange]);
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
if (!previous || !ref.current) {
return;
}
const scrollContainer = (0,external_wp_dom_namespaceObject.getScrollContainer)(ref.current);
const isSelected = isBlockSelected(clientId);
const adjustScrolling = isSelected || isFirstMultiSelectedBlock(clientId);
function preserveScrollPosition() {
if (adjustScrolling && prevRect) {
const blockRect = ref.current.getBoundingClientRect();
const diff = blockRect.top - prevRect.top;
if (diff) {
scrollContainer.scrollTop += diff;
}
}
}
// We disable the animation if the user has a preference for reduced
// motion, if the user is typing (insertion by Enter), or if the block
// count exceeds the threshold (insertion caused all the blocks that
// follow to animate).
// To do: consider enableing the _moving_ animation even for large
// posts, while only disabling the _insertion_ animation?
const disableAnimation = window.matchMedia('(prefers-reduced-motion: reduce)').matches || isTyping() || getGlobalBlockCount() > BLOCK_ANIMATION_THRESHOLD;
if (disableAnimation) {
// If the animation is disabled and the scroll needs to be adjusted,
// just move directly to the final scroll position.
preserveScrollPosition();
return;
}
const isPartOfSelection = isSelected || isBlockMultiSelected(clientId) || isAncestorMultiSelected(clientId);
// Make sure the other blocks move under the selected block(s).
const zIndex = isPartOfSelection ? '1' : '';
const controller = new esm_le({
x: 0,
y: 0,
config: {
mass: 5,
tension: 2000,
friction: 200
},
onChange({
value
}) {
if (!ref.current) {
return;
}
let {
x,
y
} = value;
x = Math.round(x);
y = Math.round(y);
const finishedMoving = x === 0 && y === 0;
ref.current.style.transformOrigin = 'center center';
ref.current.style.transform = finishedMoving ? null // Set to `null` to explicitly remove the transform.
: `translate3d(${x}px,${y}px,0)`;
ref.current.style.zIndex = zIndex;
preserveScrollPosition();
}
});
ref.current.style.transform = undefined;
const destination = getAbsolutePosition(ref.current);
const x = Math.round(previous.left - destination.left);
const y = Math.round(previous.top - destination.top);
controller.start({
x: 0,
y: 0,
from: {
x,
y
}
});
return () => {
controller.stop();
controller.set({
x: 0,
y: 0
});
};
}, [previous, prevRect, clientId, isTyping, getGlobalBlockCount, isBlockSelected, isFirstMultiSelectedBlock, isBlockMultiSelected, isAncestorMultiSelected]);
return ref;
}
/* harmony default export */ const use_moving_animation = (useMovingAnimation);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-list/use-block-props/use-focus-first-element.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/** @typedef {import('@wordpress/element').RefObject} RefObject */
/**
* Transitions focus to the block or inner tabbable when the block becomes
* selected and an initial position is set.
*
* @param {string} clientId Block client ID.
*
* @return {RefObject} React ref with the block element.
*/
function useFocusFirstElement({
clientId,
initialPosition
}) {
const ref = (0,external_wp_element_namespaceObject.useRef)();
const {
isBlockSelected,
isMultiSelecting,
__unstableGetEditorMode
} = (0,external_wp_data_namespaceObject.useSelect)(store);
(0,external_wp_element_namespaceObject.useEffect)(() => {
// Check if the block is still selected at the time this effect runs.
if (!isBlockSelected(clientId) || isMultiSelecting() || __unstableGetEditorMode() === 'zoom-out') {
return;
}
if (initialPosition === undefined || initialPosition === null) {
return;
}
if (!ref.current) {
return;
}
const {
ownerDocument
} = ref.current;
// Do not focus the block if it already contains the active element.
if (isInsideRootBlock(ref.current, ownerDocument.activeElement)) {
return;
}
// Find all tabbables within node.
const textInputs = external_wp_dom_namespaceObject.focus.tabbable.find(ref.current).filter(node => (0,external_wp_dom_namespaceObject.isTextField)(node));
// If reversed (e.g. merge via backspace), use the last in the set of
// tabbables.
const isReverse = -1 === initialPosition;
const target = textInputs[isReverse ? textInputs.length - 1 : 0] || ref.current;
if (!isInsideRootBlock(ref.current, target)) {
ref.current.focus();
return;
}
// Check to see if element is focussable before a generic caret insert.
if (!ref.current.getAttribute('contenteditable')) {
const focusElement = external_wp_dom_namespaceObject.focus.tabbable.findNext(ref.current);
// Make sure focusElement is valid, contained in the same block, and a form field.
if (focusElement && isInsideRootBlock(ref.current, focusElement) && (0,external_wp_dom_namespaceObject.isFormElement)(focusElement)) {
focusElement.focus();
return;
}
}
(0,external_wp_dom_namespaceObject.placeCaretAtHorizontalEdge)(target, isReverse);
}, [initialPosition, clientId]);
return ref;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-list/use-block-props/use-is-hovered.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/*
* Adds `is-hovered` class when the block is hovered and in navigation or
* outline mode.
*/
function useIsHovered({
clientId
}) {
const {
hoverBlock
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
function listener(event) {
if (event.defaultPrevented) {
return;
}
const action = event.type === 'mouseover' ? 'add' : 'remove';
event.preventDefault();
event.currentTarget.classList[action]('is-hovered');
if (action === 'add') {
hoverBlock(clientId);
} else {
hoverBlock(null);
}
}
return (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
node.addEventListener('mouseout', listener);
node.addEventListener('mouseover', listener);
return () => {
node.removeEventListener('mouseout', listener);
node.removeEventListener('mouseover', listener);
// Remove class in case it lingers.
node.classList.remove('is-hovered');
hoverBlock(null);
};
}, []);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-list/use-block-props/use-focus-handler.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Selects the block if it receives focus.
*
* @param {string} clientId Block client ID.
*/
function useFocusHandler(clientId) {
const {
isBlockSelected
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
selectBlock,
selectionChange
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
return (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
/**
* Marks the block as selected when focused and not already
* selected. This specifically handles the case where block does not
* set focus on its own (via `setFocus`), typically if there is no
* focusable input in the block.
*
* @param {FocusEvent} event Focus event.
*/
function onFocus(event) {
// When the whole editor is editable, let writing flow handle
// selection.
if (node.parentElement.closest('[contenteditable="true"]')) {
return;
}
// Check synchronously because a non-selected block might be
// getting data through `useSelect` asynchronously.
if (isBlockSelected(clientId)) {
// Potentially change selection away from rich text.
if (!event.target.isContentEditable) {
selectionChange(clientId);
}
return;
}
// If an inner block is focussed, that block is resposible for
// setting the selected block.
if (!isInsideRootBlock(node, event.target)) {
return;
}
selectBlock(clientId);
}
node.addEventListener('focusin', onFocus);
return () => {
node.removeEventListener('focusin', onFocus);
};
}, [isBlockSelected, selectBlock]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-list/use-block-props/use-selected-block-event-handlers.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Adds block behaviour:
* - Removes the block on BACKSPACE.
* - Inserts a default block on ENTER.
* - Disables dragging of block contents.
*
* @param {string} clientId Block client ID.
*/
function useEventHandlers({
clientId,
isSelected
}) {
const {
getBlockRootClientId,
getBlockIndex,
isZoomOut,
__unstableGetEditorMode
} = unlock((0,external_wp_data_namespaceObject.useSelect)(store));
const {
insertAfterBlock,
removeBlock,
__unstableSetEditorMode,
resetZoomLevel
} = unlock((0,external_wp_data_namespaceObject.useDispatch)(store));
return (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
if (!isSelected) {
return;
}
/**
* Interprets keydown event intent to remove or insert after block if
* key event occurs on wrapper node. This can occur when the block has
* no text fields of its own, particularly after initial insertion, to
* allow for easy deletion and continuous writing flow to add additional
* content.
*
* @param {KeyboardEvent} event Keydown event.
*/
function onKeyDown(event) {
const {
keyCode,
target
} = event;
if (keyCode !== external_wp_keycodes_namespaceObject.ENTER && keyCode !== external_wp_keycodes_namespaceObject.BACKSPACE && keyCode !== external_wp_keycodes_namespaceObject.DELETE) {
return;
}
if (target !== node || (0,external_wp_dom_namespaceObject.isTextField)(target)) {
return;
}
event.preventDefault();
if (keyCode === external_wp_keycodes_namespaceObject.ENTER && __unstableGetEditorMode() === 'zoom-out' && isZoomOut()) {
__unstableSetEditorMode('edit');
resetZoomLevel();
} else if (keyCode === external_wp_keycodes_namespaceObject.ENTER) {
insertAfterBlock(clientId);
} else {
removeBlock(clientId);
}
}
/**
* Prevents default dragging behavior within a block. To do: we must
* handle this in the future and clean up the drag target.
*
* @param {DragEvent} event Drag event.
*/
function onDragStart(event) {
event.preventDefault();
}
node.addEventListener('keydown', onKeyDown);
node.addEventListener('dragstart', onDragStart);
return () => {
node.removeEventListener('keydown', onKeyDown);
node.removeEventListener('dragstart', onDragStart);
};
}, [clientId, isSelected, getBlockRootClientId, getBlockIndex, insertAfterBlock, removeBlock, __unstableGetEditorMode, __unstableSetEditorMode, isZoomOut, resetZoomLevel]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-list/use-block-props/use-nav-mode-exit.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Allows navigation mode to be exited by clicking in the selected block.
*
* @param {string} clientId Block client ID.
*/
function useNavModeExit(clientId) {
const {
isNavigationMode,
isBlockSelected
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
setNavigationMode,
selectBlock
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
return (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
function onMouseDown(event) {
// Don't select a block if it's already handled by a child
// block.
if (isNavigationMode() && !event.defaultPrevented) {
// Prevent focus from moving to the block.
event.preventDefault();
// When clicking on a selected block, exit navigation mode.
if (isBlockSelected(clientId)) {
setNavigationMode(false);
} else {
selectBlock(clientId);
}
}
}
node.addEventListener('mousedown', onMouseDown);
return () => {
node.removeEventListener('mousedown', onMouseDown);
};
}, [clientId, isNavigationMode, isBlockSelected, setNavigationMode]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-list/use-block-props/use-zoom-out-mode-exit.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Allows Zoom Out mode to be exited by double clicking in the selected block.
*/
function useZoomOutModeExit() {
const {
getSettings,
isZoomOut,
__unstableGetEditorMode
} = unlock((0,external_wp_data_namespaceObject.useSelect)(store));
const {
__unstableSetEditorMode,
resetZoomLevel
} = unlock((0,external_wp_data_namespaceObject.useDispatch)(store));
return (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
function onDoubleClick(event) {
// In "compose" mode.
const composeMode = __unstableGetEditorMode() === 'zoom-out' && isZoomOut();
if (!composeMode) {
return;
}
if (!event.defaultPrevented) {
event.preventDefault();
const {
__experimentalSetIsInserterOpened
} = getSettings();
if (typeof __experimentalSetIsInserterOpened === 'function') {
__experimentalSetIsInserterOpened(false);
}
__unstableSetEditorMode('edit');
resetZoomLevel();
}
}
node.addEventListener('dblclick', onDoubleClick);
return () => {
node.removeEventListener('dblclick', onDoubleClick);
};
}, [getSettings, __unstableSetEditorMode, __unstableGetEditorMode, isZoomOut, resetZoomLevel]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-list/use-block-props/use-intersection-observer.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function useIntersectionObserver() {
const observer = (0,external_wp_element_namespaceObject.useContext)(block_list_IntersectionObserver);
return (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
if (observer) {
observer.observe(node);
return () => {
observer.unobserve(node);
};
}
}, [observer]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-list/use-block-props/use-scroll-into-view.js
/**
* WordPress dependencies
*/
function useScrollIntoView({
isSelected
}) {
const prefersReducedMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)();
return (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
if (isSelected) {
const {
ownerDocument
} = node;
const {
defaultView
} = ownerDocument;
if (!defaultView.IntersectionObserver) {
return;
}
const observer = new defaultView.IntersectionObserver(entries => {
// Once observing starts, we always get an initial
// entry with the intersecting state.
if (!entries[0].isIntersecting) {
node.scrollIntoView({
behavior: prefersReducedMotion ? 'instant' : 'smooth'
});
}
observer.disconnect();
});
observer.observe(node);
return () => {
observer.disconnect();
};
}
}, [isSelected]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/use-flash-editable-blocks/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function useFlashEditableBlocks({
clientId = '',
isEnabled = true
} = {}) {
const {
getEnabledClientIdsTree
} = unlock((0,external_wp_data_namespaceObject.useSelect)(store));
return (0,external_wp_compose_namespaceObject.useRefEffect)(element => {
if (!isEnabled) {
return;
}
const flashEditableBlocks = () => {
getEnabledClientIdsTree(clientId).forEach(({
clientId: id
}) => {
const block = element.querySelector(`[data-block="${id}"]`);
if (!block) {
return;
}
block.classList.remove('has-editable-outline');
// Force reflow to trigger the animation.
// eslint-disable-next-line no-unused-expressions
block.offsetWidth;
block.classList.add('has-editable-outline');
});
};
const handleClick = event => {
const shouldFlash = event.target === element || event.target.classList.contains('is-root-container');
if (!shouldFlash) {
return;
}
if (event.defaultPrevented) {
return;
}
event.preventDefault();
flashEditableBlocks();
};
element.addEventListener('click', handleClick);
return () => element.removeEventListener('click', handleClick);
}, [isEnabled]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/use-bindings-attributes.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/** @typedef {import('@wordpress/compose').WPHigherOrderComponent} WPHigherOrderComponent */
/** @typedef {import('@wordpress/blocks').WPBlockSettings} WPBlockSettings */
/**
* Given a binding of block attributes, returns a higher order component that
* overrides its `attributes` and `setAttributes` props to sync any changes needed.
*
* @return {WPHigherOrderComponent} Higher-order component.
*/
const BLOCK_BINDINGS_ALLOWED_BLOCKS = {
'core/paragraph': ['content'],
'core/heading': ['content'],
'core/image': ['id', 'url', 'title', 'alt'],
'core/button': ['url', 'text', 'linkTarget', 'rel']
};
const DEFAULT_ATTRIBUTE = '__default';
/**
* Returns the bindings with the `__default` binding for pattern overrides
* replaced with the full-set of supported attributes. e.g.:
*
* bindings passed in: `{ __default: { source: 'core/pattern-overrides' } }`
* bindings returned: `{ content: { source: 'core/pattern-overrides' } }`
*
* @param {string} blockName The block name (e.g. 'core/paragraph').
* @param {Object} bindings A block's bindings from the metadata attribute.
*
* @return {Object} The bindings with default replaced for pattern overrides.
*/
function replacePatternOverrideDefaultBindings(blockName, bindings) {
// The `__default` binding currently only works for pattern overrides.
if (bindings?.[DEFAULT_ATTRIBUTE]?.source === 'core/pattern-overrides') {
const supportedAttributes = BLOCK_BINDINGS_ALLOWED_BLOCKS[blockName];
const bindingsWithDefaults = {};
for (const attributeName of supportedAttributes) {
// If the block has mixed binding sources, retain any non pattern override bindings.
const bindingSource = bindings[attributeName] ? bindings[attributeName] : {
source: 'core/pattern-overrides'
};
bindingsWithDefaults[attributeName] = bindingSource;
}
return bindingsWithDefaults;
}
return bindings;
}
/**
* Based on the given block name,
* check if it is possible to bind the block.
*
* @param {string} blockName - The block name.
* @return {boolean} Whether it is possible to bind the block to sources.
*/
function canBindBlock(blockName) {
return blockName in BLOCK_BINDINGS_ALLOWED_BLOCKS;
}
/**
* Based on the given block name and attribute name,
* check if it is possible to bind the block attribute.
*
* @param {string} blockName - The block name.
* @param {string} attributeName - The attribute name.
* @return {boolean} Whether it is possible to bind the block attribute.
*/
function canBindAttribute(blockName, attributeName) {
return canBindBlock(blockName) && BLOCK_BINDINGS_ALLOWED_BLOCKS[blockName].includes(attributeName);
}
function getBindableAttributes(blockName) {
return BLOCK_BINDINGS_ALLOWED_BLOCKS[blockName];
}
const withBlockBindingSupport = (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(BlockEdit => props => {
const registry = (0,external_wp_data_namespaceObject.useRegistry)();
const blockContext = (0,external_wp_element_namespaceObject.useContext)(block_context);
const sources = (0,external_wp_data_namespaceObject.useSelect)(select => unlock(select(external_wp_blocks_namespaceObject.store)).getAllBlockBindingsSources());
const {
name,
clientId,
context,
setAttributes
} = props;
const blockBindings = (0,external_wp_element_namespaceObject.useMemo)(() => replacePatternOverrideDefaultBindings(name, props.attributes.metadata?.bindings), [props.attributes.metadata?.bindings, name]);
// While this hook doesn't directly call any selectors, `useSelect` is
// used purposely here to ensure `boundAttributes` is updated whenever
// there are attribute updates.
// `source.getValues` may also call a selector via `registry.select`.
const updatedContext = {};
const boundAttributes = (0,external_wp_data_namespaceObject.useSelect)(select => {
if (!blockBindings) {
return;
}
const attributes = {};
const blockBindingsBySource = new Map();
for (const [attributeName, binding] of Object.entries(blockBindings)) {
const {
source: sourceName,
args: sourceArgs
} = binding;
const source = sources[sourceName];
if (!source || !canBindAttribute(name, attributeName)) {
continue;
}
// Populate context.
for (const key of source.usesContext || []) {
updatedContext[key] = blockContext[key];
}
blockBindingsBySource.set(source, {
...blockBindingsBySource.get(source),
[attributeName]: {
args: sourceArgs
}
});
}
if (blockBindingsBySource.size) {
for (const [source, bindings] of blockBindingsBySource) {
// Get values in batch if the source supports it.
let values = {};
if (!source.getValues) {
Object.keys(bindings).forEach(attr => {
// Default to the the source label when `getValues` doesn't exist.
values[attr] = source.label;
});
} else {
values = source.getValues({
select,
context: updatedContext,
clientId,
bindings
});
}
for (const [attributeName, value] of Object.entries(values)) {
if (attributeName === 'url' && (!value || !isURLLike(value))) {
// Return null if value is not a valid URL.
attributes[attributeName] = null;
} else {
attributes[attributeName] = value;
}
}
}
}
return attributes;
}, [blockBindings, name, clientId, updatedContext, sources]);
const hasParentPattern = !!updatedContext['pattern/overrides'];
const hasPatternOverridesDefaultBinding = props.attributes.metadata?.bindings?.[DEFAULT_ATTRIBUTE]?.source === 'core/pattern-overrides';
const _setAttributes = (0,external_wp_element_namespaceObject.useCallback)(nextAttributes => {
registry.batch(() => {
if (!blockBindings) {
setAttributes(nextAttributes);
return;
}
const keptAttributes = {
...nextAttributes
};
const blockBindingsBySource = new Map();
// Loop only over the updated attributes to avoid modifying the bound ones that haven't changed.
for (const [attributeName, newValue] of Object.entries(keptAttributes)) {
if (!blockBindings[attributeName] || !canBindAttribute(name, attributeName)) {
continue;
}
const binding = blockBindings[attributeName];
const source = sources[binding?.source];
if (!source?.setValues) {
continue;
}
blockBindingsBySource.set(source, {
...blockBindingsBySource.get(source),
[attributeName]: {
args: binding.args,
newValue
}
});
delete keptAttributes[attributeName];
}
if (blockBindingsBySource.size) {
for (const [source, bindings] of blockBindingsBySource) {
source.setValues({
select: registry.select,
dispatch: registry.dispatch,
context: updatedContext,
clientId,
bindings
});
}
}
if (
// Don't update non-connected attributes if the block is using pattern overrides
// and the editing is happening while overriding the pattern (not editing the original).
!(hasPatternOverridesDefaultBinding && hasParentPattern) && Object.keys(keptAttributes).length) {
// Don't update caption and href until they are supported.
if (hasPatternOverridesDefaultBinding) {
delete keptAttributes?.caption;
delete keptAttributes?.href;
}
setAttributes(keptAttributes);
}
});
}, [registry, blockBindings, name, clientId, updatedContext, setAttributes, sources, hasPatternOverridesDefaultBinding, hasParentPattern]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockEdit, {
...props,
attributes: {
...props.attributes,
...boundAttributes
},
setAttributes: _setAttributes,
context: {
...context,
...updatedContext
}
})
});
}, 'withBlockBindingSupport');
/**
* Filters a registered block's settings to enhance a block's `edit` component
* to upgrade bound attributes.
*
* @param {WPBlockSettings} settings - Registered block settings.
* @param {string} name - Block name.
* @return {WPBlockSettings} Filtered block settings.
*/
function shimAttributeSource(settings, name) {
if (!canBindBlock(name)) {
return settings;
}
return {
...settings,
edit: withBlockBindingSupport(settings.edit)
};
}
(0,external_wp_hooks_namespaceObject.addFilter)('blocks.registerBlockType', 'core/editor/custom-sources-backwards-compatibility/shim-attribute-source', shimAttributeSource);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-list/use-block-props/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* This hook is used to lightly mark an element as a block element. The element
* should be the outermost element of a block. Call this hook and pass the
* returned props to the element to mark as a block. 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.
*
* Use of this hook on the outermost element of a block is required if using API >= v2.
*
* @example
* ```js
* import { useBlockProps } from '@wordpress/block-editor';
*
* export default function Edit() {
*
* const blockProps = useBlockProps( {
* className: 'my-custom-class',
* style: {
* color: '#222222',
* backgroundColor: '#eeeeee'
* }
* } )
*
* return (
* <div { ...blockProps }>
*
* </div>
* )
* }
*
* ```
*
*
* @param {Object} props Optional. Props to pass to the element. Must contain
* the ref if one is defined.
* @param {Object} options Options for internal use only.
* @param {boolean} options.__unstableIsHtml
*
* @return {Object} Props to pass to the element to mark as a block.
*/
function use_block_props_useBlockProps(props = {}, {
__unstableIsHtml
} = {}) {
const {
clientId,
className,
wrapperProps = {},
isAligned,
index,
mode,
name,
blockApiVersion,
blockTitle,
isSelected,
isSubtreeDisabled,
hasOverlay,
initialPosition,
blockEditingMode,
isHighlighted,
isMultiSelected,
isPartiallySelected,
isReusable,
isDragging,
hasChildSelected,
isBlockMovingMode,
canInsertMovingBlock,
isEditingDisabled,
hasEditableOutline,
isTemporarilyEditingAsBlocks,
defaultClassName,
templateLock
} = (0,external_wp_element_namespaceObject.useContext)(PrivateBlockContext);
// translators: %s: Type of block (i.e. Text, Image etc)
const blockLabel = (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Block: %s'), blockTitle);
const htmlSuffix = mode === 'html' && !__unstableIsHtml ? '-visual' : '';
const mergedRefs = (0,external_wp_compose_namespaceObject.useMergeRefs)([props.ref, useFocusFirstElement({
clientId,
initialPosition
}), useBlockRefProvider(clientId), useFocusHandler(clientId), useEventHandlers({
clientId,
isSelected
}), useNavModeExit(clientId), useZoomOutModeExit(), useIsHovered({
clientId
}), useIntersectionObserver(), use_moving_animation({
triggerAnimationOnChange: index,
clientId
}), (0,external_wp_compose_namespaceObject.useDisabled)({
isDisabled: !hasOverlay
}), useFlashEditableBlocks({
clientId,
isEnabled: name === 'core/block' || templateLock === 'contentOnly'
}), useScrollIntoView({
isSelected
})]);
const blockEditContext = useBlockEditContext();
const hasBlockBindings = !!blockEditContext[blockBindingsKey];
const bindingsStyle = hasBlockBindings && canBindBlock(name) ? {
'--wp-admin-theme-color': 'var(--wp-block-synced-color)',
'--wp-admin-theme-color--rgb': 'var(--wp-block-synced-color--rgb)'
} : {};
// Ensures it warns only inside the `edit` implementation for the block.
if (blockApiVersion < 2 && clientId === blockEditContext.clientId) {
true ? external_wp_warning_default()(`Block type "${name}" must support API version 2 or higher to work correctly with "useBlockProps" method.`) : 0;
}
let hasNegativeMargin = false;
if (wrapperProps?.style?.marginTop?.charAt(0) === '-' || wrapperProps?.style?.marginBottom?.charAt(0) === '-' || wrapperProps?.style?.marginLeft?.charAt(0) === '-' || wrapperProps?.style?.marginRight?.charAt(0) === '-') {
hasNegativeMargin = true;
}
return {
tabIndex: blockEditingMode === 'disabled' ? -1 : 0,
...wrapperProps,
...props,
ref: mergedRefs,
id: `block-${clientId}${htmlSuffix}`,
role: 'document',
'aria-label': blockLabel,
'data-block': clientId,
'data-type': name,
'data-title': blockTitle,
inert: isSubtreeDisabled ? 'true' : undefined,
className: dist_clsx('block-editor-block-list__block', {
// The wp-block className is important for editor styles.
'wp-block': !isAligned,
'has-block-overlay': hasOverlay,
'is-selected': isSelected,
'is-highlighted': isHighlighted,
'is-multi-selected': isMultiSelected,
'is-partially-selected': isPartiallySelected,
'is-reusable': isReusable,
'is-dragging': isDragging,
'has-child-selected': hasChildSelected,
'is-block-moving-mode': isBlockMovingMode,
'can-insert-moving-block': canInsertMovingBlock,
'is-editing-disabled': isEditingDisabled,
'has-editable-outline': hasEditableOutline,
'has-negative-margin': hasNegativeMargin,
'is-content-locked-temporarily-editing-as-blocks': isTemporarilyEditingAsBlocks
}, className, props.className, wrapperProps.className, defaultClassName),
style: {
...wrapperProps.style,
...props.style,
...bindingsStyle
}
};
}
/**
* Call within a save function to get the props for the block wrapper.
*
* @param {Object} props Optional. Props to pass to the element.
*/
use_block_props_useBlockProps.save = external_wp_blocks_namespaceObject.__unstableGetBlockProps;
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-list/block.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const {
isUnmodifiedBlockContent
} = unlock(external_wp_blocks_namespaceObject.privateApis);
/**
* Merges wrapper props with special handling for classNames and styles.
*
* @param {Object} propsA
* @param {Object} propsB
*
* @return {Object} Merged props.
*/
function mergeWrapperProps(propsA, propsB) {
const newProps = {
...propsA,
...propsB
};
// May be set to undefined, so check if the property is set!
if (propsA?.hasOwnProperty('className') && propsB?.hasOwnProperty('className')) {
newProps.className = dist_clsx(propsA.className, propsB.className);
}
if (propsA?.hasOwnProperty('style') && propsB?.hasOwnProperty('style')) {
newProps.style = {
...propsA.style,
...propsB.style
};
}
return newProps;
}
function Block({
children,
isHtml,
...props
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
...use_block_props_useBlockProps(props, {
__unstableIsHtml: isHtml
}),
children: children
});
}
function BlockListBlock({
block: {
__unstableBlockSource
},
mode,
isLocked,
canRemove,
clientId,
isSelected,
isSelectionEnabled,
className,
__unstableLayoutClassNames: layoutClassNames,
name,
isValid,
attributes,
wrapperProps,
setAttributes,
onReplace,
onInsertBlocksAfter,
onMerge,
toggleSelection
}) {
var _wrapperProps;
const {
mayDisplayControls,
mayDisplayParentControls,
themeSupportsLayout,
...context
} = (0,external_wp_element_namespaceObject.useContext)(PrivateBlockContext);
const {
removeBlock
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const onRemove = (0,external_wp_element_namespaceObject.useCallback)(() => removeBlock(clientId), [clientId, removeBlock]);
const parentLayout = useLayout() || {};
// We wrap the BlockEdit component in a div that hides it when editing in
// HTML mode. This allows us to render all of the ancillary pieces
// (InspectorControls, etc.) which are inside `BlockEdit` but not
// `BlockHTML`, even in HTML mode.
let blockEdit = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockEdit, {
name: name,
isSelected: isSelected,
attributes: attributes,
setAttributes: setAttributes,
insertBlocksAfter: isLocked ? undefined : onInsertBlocksAfter,
onReplace: canRemove ? onReplace : undefined,
onRemove: canRemove ? onRemove : undefined,
mergeBlocks: canRemove ? onMerge : undefined,
clientId: clientId,
isSelectionEnabled: isSelectionEnabled,
toggleSelection: toggleSelection,
__unstableLayoutClassNames: layoutClassNames,
__unstableParentLayout: Object.keys(parentLayout).length ? parentLayout : undefined,
mayDisplayControls: mayDisplayControls,
mayDisplayParentControls: mayDisplayParentControls,
blockEditingMode: context.blockEditingMode,
isPreviewMode: context.isPreviewMode
});
const blockType = (0,external_wp_blocks_namespaceObject.getBlockType)(name);
// Determine whether the block has props to apply to the wrapper.
if (blockType?.getEditWrapperProps) {
wrapperProps = mergeWrapperProps(wrapperProps, blockType.getEditWrapperProps(attributes));
}
const isAligned = wrapperProps && !!wrapperProps['data-align'] && !themeSupportsLayout;
// Support for sticky position in classic themes with alignment wrappers.
const isSticky = className?.includes('is-position-sticky');
// For aligned blocks, provide a wrapper element so the block can be
// positioned relative to the block column.
// This is only kept for classic themes that don't support layout
// Historically we used to rely on extra divs and data-align to
// provide the alignments styles in the editor.
// Due to the differences between frontend and backend, we migrated
// to the layout feature, and we're now aligning the markup of frontend
// and backend.
if (isAligned) {
blockEdit = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: dist_clsx('wp-block', isSticky && className),
"data-align": wrapperProps['data-align'],
children: blockEdit
});
}
let block;
if (!isValid) {
const saveContent = __unstableBlockSource ? (0,external_wp_blocks_namespaceObject.serializeRawBlock)(__unstableBlockSource) : (0,external_wp_blocks_namespaceObject.getSaveContent)(blockType, attributes);
block = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Block, {
className: "has-warning",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockInvalidWarning, {
clientId: clientId
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_element_namespaceObject.RawHTML, {
children: (0,external_wp_dom_namespaceObject.safeHTML)(saveContent)
})]
});
} else if (mode === 'html') {
// Render blockEdit so the inspector controls don't disappear.
// See #8969.
block = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
style: {
display: 'none'
},
children: blockEdit
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Block, {
isHtml: true,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_html, {
clientId: clientId
})
})]
});
} else if (blockType?.apiVersion > 1) {
block = blockEdit;
} else {
block = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Block, {
children: blockEdit
});
}
const {
'data-align': dataAlign,
...restWrapperProps
} = (_wrapperProps = wrapperProps) !== null && _wrapperProps !== void 0 ? _wrapperProps : {};
const updatedWrapperProps = {
...restWrapperProps,
className: dist_clsx(restWrapperProps.className, dataAlign && themeSupportsLayout && `align${dataAlign}`, !(dataAlign && isSticky) && className)
};
// We set a new context with the adjusted and filtered wrapperProps (through
// `editor.BlockListBlock`), which the `BlockListBlockProvider` did not have
// access to.
// Note that the context value doesn't have to be memoized in this case
// because when it changes, this component will be re-rendered anyway, and
// none of the consumers (BlockListBlock and useBlockProps) are memoized or
// "pure". This is different from the public BlockEditContext, where
// consumers might be memoized or "pure".
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PrivateBlockContext.Provider, {
value: {
wrapperProps: updatedWrapperProps,
isAligned,
...context
},
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_crash_boundary, {
fallback: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Block, {
className: "has-warning",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_crash_warning, {})
}),
children: block
})
});
}
const applyWithDispatch = (0,external_wp_data_namespaceObject.withDispatch)((dispatch, ownProps, registry) => {
const {
updateBlockAttributes,
insertBlocks,
mergeBlocks,
replaceBlocks,
toggleSelection,
__unstableMarkLastChangeAsPersistent,
moveBlocksToPosition,
removeBlock,
selectBlock
} = dispatch(store);
// Do not add new properties here, use `useDispatch` instead to avoid
// leaking new props to the public API (editor.BlockListBlock filter).
return {
setAttributes(newAttributes) {
const {
getMultiSelectedBlockClientIds
} = registry.select(store);
const multiSelectedBlockClientIds = getMultiSelectedBlockClientIds();
const {
clientId
} = ownProps;
const clientIds = multiSelectedBlockClientIds.length ? multiSelectedBlockClientIds : [clientId];
updateBlockAttributes(clientIds, newAttributes);
},
onInsertBlocks(blocks, index) {
const {
rootClientId
} = ownProps;
insertBlocks(blocks, index, rootClientId);
},
onInsertBlocksAfter(blocks) {
const {
clientId,
rootClientId
} = ownProps;
const {
getBlockIndex
} = registry.select(store);
const index = getBlockIndex(clientId);
insertBlocks(blocks, index + 1, rootClientId);
},
onMerge(forward) {
const {
clientId,
rootClientId
} = ownProps;
const {
getPreviousBlockClientId,
getNextBlockClientId,
getBlock,
getBlockAttributes,
getBlockName,
getBlockOrder,
getBlockIndex,
getBlockRootClientId,
canInsertBlockType
} = registry.select(store);
function switchToDefaultOrRemove() {
const block = getBlock(clientId);
const defaultBlockName = (0,external_wp_blocks_namespaceObject.getDefaultBlockName)();
if (getBlockName(clientId) !== defaultBlockName) {
const replacement = (0,external_wp_blocks_namespaceObject.switchToBlockType)(block, defaultBlockName);
if (replacement && replacement.length) {
replaceBlocks(clientId, replacement);
}
} else if ((0,external_wp_blocks_namespaceObject.isUnmodifiedDefaultBlock)(block)) {
const nextBlockClientId = getNextBlockClientId(clientId);
if (nextBlockClientId) {
registry.batch(() => {
removeBlock(clientId);
selectBlock(nextBlockClientId);
});
}
}
}
/**
* Moves the block with clientId up one level. If the block type
* cannot be inserted at the new location, it will be attempted to
* convert to the default block type.
*
* @param {string} _clientId The block to move.
* @param {boolean} changeSelection Whether to change the selection
* to the moved block.
*/
function moveFirstItemUp(_clientId, changeSelection = true) {
const targetRootClientId = getBlockRootClientId(_clientId);
const blockOrder = getBlockOrder(_clientId);
const [firstClientId] = blockOrder;
if (blockOrder.length === 1 && (0,external_wp_blocks_namespaceObject.isUnmodifiedBlock)(getBlock(firstClientId))) {
removeBlock(_clientId);
} else {
registry.batch(() => {
const firstBlock = getBlock(firstClientId);
const isFirstBlockContentUnmodified = isUnmodifiedBlockContent(firstBlock);
const defaultBlockName = (0,external_wp_blocks_namespaceObject.getDefaultBlockName)();
const replacement = (0,external_wp_blocks_namespaceObject.switchToBlockType)(firstBlock, defaultBlockName);
const canTransformToDefaultBlock = !!replacement?.length && replacement.every(block => canInsertBlockType(block.name, _clientId));
if (isFirstBlockContentUnmodified && canTransformToDefaultBlock) {
// Step 1: If the block is empty and can be transformed to the default block type.
replaceBlocks(firstClientId, replacement, changeSelection);
} else if (isFirstBlockContentUnmodified && firstBlock.name === defaultBlockName) {
// Step 2: If the block is empty and is already the default block type.
removeBlock(firstClientId);
const nextBlockClientId = getNextBlockClientId(clientId);
if (nextBlockClientId) {
selectBlock(nextBlockClientId);
}
} else if (canInsertBlockType(firstBlock.name, targetRootClientId)) {
// Step 3: If the block can be moved up.
moveBlocksToPosition([firstClientId], _clientId, targetRootClientId, getBlockIndex(_clientId));
} else {
const canLiftAndTransformToDefaultBlock = !!replacement?.length && replacement.every(block => canInsertBlockType(block.name, targetRootClientId));
if (canLiftAndTransformToDefaultBlock) {
// Step 4: If the block can be transformed to the default block type and moved up.
insertBlocks(replacement, getBlockIndex(_clientId), targetRootClientId, changeSelection);
removeBlock(firstClientId, false);
} else {
// Step 5: Continue the default behavior.
switchToDefaultOrRemove();
}
}
if (!getBlockOrder(_clientId).length && (0,external_wp_blocks_namespaceObject.isUnmodifiedBlock)(getBlock(_clientId))) {
removeBlock(_clientId, false);
}
});
}
}
// For `Delete` or forward merge, we should do the exact same thing
// as `Backspace`, but from the other block.
if (forward) {
if (rootClientId) {
const nextRootClientId = getNextBlockClientId(rootClientId);
if (nextRootClientId) {
// If there is a block that follows with the same parent
// block name and the same attributes, merge the inner
// blocks.
if (getBlockName(rootClientId) === getBlockName(nextRootClientId)) {
const rootAttributes = getBlockAttributes(rootClientId);
const previousRootAttributes = getBlockAttributes(nextRootClientId);
if (Object.keys(rootAttributes).every(key => rootAttributes[key] === previousRootAttributes[key])) {
registry.batch(() => {
moveBlocksToPosition(getBlockOrder(nextRootClientId), nextRootClientId, rootClientId);
removeBlock(nextRootClientId, false);
});
return;
}
} else {
mergeBlocks(rootClientId, nextRootClientId);
return;
}
}
}
const nextBlockClientId = getNextBlockClientId(clientId);
if (!nextBlockClientId) {
return;
}
if (getBlockOrder(nextBlockClientId).length) {
moveFirstItemUp(nextBlockClientId, false);
} else {
mergeBlocks(clientId, nextBlockClientId);
}
} else {
const previousBlockClientId = getPreviousBlockClientId(clientId);
if (previousBlockClientId) {
mergeBlocks(previousBlockClientId, clientId);
} else if (rootClientId) {
const previousRootClientId = getPreviousBlockClientId(rootClientId);
// If there is a preceding block with the same parent block
// name and the same attributes, merge the inner blocks.
if (previousRootClientId && getBlockName(rootClientId) === getBlockName(previousRootClientId)) {
const rootAttributes = getBlockAttributes(rootClientId);
const previousRootAttributes = getBlockAttributes(previousRootClientId);
if (Object.keys(rootAttributes).every(key => rootAttributes[key] === previousRootAttributes[key])) {
registry.batch(() => {
moveBlocksToPosition(getBlockOrder(rootClientId), rootClientId, previousRootClientId);
removeBlock(rootClientId, false);
});
return;
}
}
moveFirstItemUp(rootClientId);
} else {
switchToDefaultOrRemove();
}
}
},
onReplace(blocks, indexToSelect, initialPosition) {
if (blocks.length && !(0,external_wp_blocks_namespaceObject.isUnmodifiedDefaultBlock)(blocks[blocks.length - 1])) {
__unstableMarkLastChangeAsPersistent();
}
//Unsynced patterns are nested in an array so we need to flatten them.
const replacementBlocks = blocks?.length === 1 && Array.isArray(blocks[0]) ? blocks[0] : blocks;
replaceBlocks([ownProps.clientId], replacementBlocks, indexToSelect, initialPosition);
},
toggleSelection(selectionEnabled) {
toggleSelection(selectionEnabled);
}
};
});
// This component is used by the BlockListBlockProvider component below. It will
// add the props necessary for the `editor.BlockListBlock` filters.
BlockListBlock = (0,external_wp_compose_namespaceObject.compose)(applyWithDispatch, (0,external_wp_components_namespaceObject.withFilters)('editor.BlockListBlock'))(BlockListBlock);
// This component provides all the information we need through a single store
// subscription (useSelect mapping). Only the necessary props are passed down
// to the BlockListBlock component, which is a filtered component, so these
// props are public API. To avoid adding to the public API, we use a private
// context to pass the rest of the information to the filtered BlockListBlock
// component, and useBlockProps.
function BlockListBlockProvider(props) {
const {
clientId,
rootClientId
} = props;
const selectedProps = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
isBlockSelected,
getBlockMode,
isSelectionEnabled,
getTemplateLock,
getBlockWithoutAttributes,
getBlockAttributes,
canRemoveBlock,
canMoveBlock,
getSettings,
getTemporarilyEditingAsBlocks,
getBlockEditingMode,
getBlockName,
isFirstMultiSelectedBlock,
getMultiSelectedBlockClientIds,
hasSelectedInnerBlock,
getBlocksByName,
getBlockIndex,
isBlockMultiSelected,
isBlockSubtreeDisabled,
isBlockHighlighted,
__unstableIsFullySelected,
__unstableSelectionHasUnmergeableBlock,
isBlockBeingDragged,
isDragging,
hasBlockMovingClientId,
canInsertBlockType,
__unstableHasActiveBlockOverlayActive,
__unstableGetEditorMode,
getSelectedBlocksInitialCaretPosition
} = unlock(select(store));
const blockWithoutAttributes = getBlockWithoutAttributes(clientId);
// This is a temporary fix.
// This function should never be called when a block is not
// present in the state. It happens now because the order in
// withSelect rendering is not correct.
if (!blockWithoutAttributes) {
return;
}
const {
hasBlockSupport: _hasBlockSupport,
getActiveBlockVariation
} = select(external_wp_blocks_namespaceObject.store);
const attributes = getBlockAttributes(clientId);
const {
name: blockName,
isValid
} = blockWithoutAttributes;
const blockType = (0,external_wp_blocks_namespaceObject.getBlockType)(blockName);
const {
supportsLayout,
__unstableIsPreviewMode: isPreviewMode
} = getSettings();
const hasLightBlockWrapper = blockType?.apiVersion > 1;
const previewContext = {
isPreviewMode,
blockWithoutAttributes,
name: blockName,
attributes,
isValid,
themeSupportsLayout: supportsLayout,
index: getBlockIndex(clientId),
isReusable: (0,external_wp_blocks_namespaceObject.isReusableBlock)(blockType),
className: hasLightBlockWrapper ? attributes.className : undefined,
defaultClassName: hasLightBlockWrapper ? (0,external_wp_blocks_namespaceObject.getBlockDefaultClassName)(blockName) : undefined,
blockTitle: blockType?.title
};
// When in preview mode, we can avoid a lot of selection and
// editing related selectors.
if (isPreviewMode) {
return previewContext;
}
const _isSelected = isBlockSelected(clientId);
const canRemove = canRemoveBlock(clientId);
const canMove = canMoveBlock(clientId);
const match = getActiveBlockVariation(blockName, attributes);
const isMultiSelected = isBlockMultiSelected(clientId);
const checkDeep = true;
const isAncestorOfSelectedBlock = hasSelectedInnerBlock(clientId, checkDeep);
const movingClientId = hasBlockMovingClientId();
const blockEditingMode = getBlockEditingMode(clientId);
const multiple = (0,external_wp_blocks_namespaceObject.hasBlockSupport)(blockName, 'multiple', true);
// For block types with `multiple` support, there is no "original
// block" to be found in the content, as the block itself is valid.
const blocksWithSameName = multiple ? [] : getBlocksByName(blockName);
const isInvalid = blocksWithSameName.length && blocksWithSameName[0] !== clientId;
const editorMode = __unstableGetEditorMode();
return {
...previewContext,
mode: getBlockMode(clientId),
isSelectionEnabled: isSelectionEnabled(),
isLocked: !!getTemplateLock(rootClientId),
templateLock: getTemplateLock(clientId),
canRemove,
canMove,
isSelected: _isSelected,
isTemporarilyEditingAsBlocks: getTemporarilyEditingAsBlocks() === clientId,
blockEditingMode,
mayDisplayControls: _isSelected || isFirstMultiSelectedBlock(clientId) && getMultiSelectedBlockClientIds().every(id => getBlockName(id) === blockName),
mayDisplayParentControls: _hasBlockSupport(getBlockName(clientId), '__experimentalExposeControlsToChildren', false) && hasSelectedInnerBlock(clientId),
blockApiVersion: blockType?.apiVersion || 1,
blockTitle: match?.title || blockType?.title,
isSubtreeDisabled: blockEditingMode === 'disabled' && isBlockSubtreeDisabled(clientId),
hasOverlay: __unstableHasActiveBlockOverlayActive(clientId) && !isDragging(),
initialPosition: _isSelected && (editorMode === 'edit' || editorMode === 'zoom-out') // Don't recalculate the initialPosition when toggling in/out of zoom-out mode
? getSelectedBlocksInitialCaretPosition() : undefined,
isHighlighted: isBlockHighlighted(clientId),
isMultiSelected,
isPartiallySelected: isMultiSelected && !__unstableIsFullySelected() && !__unstableSelectionHasUnmergeableBlock(),
isDragging: isBlockBeingDragged(clientId),
hasChildSelected: isAncestorOfSelectedBlock,
isBlockMovingMode: !!movingClientId,
canInsertMovingBlock: movingClientId && canInsertBlockType(getBlockName(movingClientId), rootClientId),
isEditingDisabled: blockEditingMode === 'disabled',
hasEditableOutline: blockEditingMode !== 'disabled' && getBlockEditingMode(rootClientId) === 'disabled',
originalBlockClientId: isInvalid ? blocksWithSameName[0] : false
};
}, [clientId, rootClientId]);
const {
isPreviewMode,
// Fill values that end up as a public API and may not be defined in
// preview mode.
mode = 'visual',
isSelectionEnabled = false,
isLocked = false,
canRemove = false,
canMove = false,
blockWithoutAttributes,
name,
attributes,
isValid,
isSelected = false,
themeSupportsLayout,
isTemporarilyEditingAsBlocks,
blockEditingMode,
mayDisplayControls,
mayDisplayParentControls,
index,
blockApiVersion,
blockTitle,
isSubtreeDisabled,
hasOverlay,
initialPosition,
isHighlighted,
isMultiSelected,
isPartiallySelected,
isReusable,
isDragging,
hasChildSelected,
isBlockMovingMode,
canInsertMovingBlock,
templateLock,
isEditingDisabled,
hasEditableOutline,
className,
defaultClassName,
originalBlockClientId
} = selectedProps;
// Users of the editor.BlockListBlock filter used to be able to
// access the block prop.
// Ideally these blocks would rely on the clientId prop only.
// This is kept for backward compatibility reasons.
const block = (0,external_wp_element_namespaceObject.useMemo)(() => ({
...blockWithoutAttributes,
attributes
}), [blockWithoutAttributes, attributes]);
// Block is sometimes not mounted at the right time, causing it be
// undefined see issue for more info
// https://github.com/WordPress/gutenberg/issues/17013
if (!selectedProps) {
return null;
}
const privateContext = {
isPreviewMode,
clientId,
className,
index,
mode,
name,
blockApiVersion,
blockTitle,
isSelected,
isSubtreeDisabled,
hasOverlay,
initialPosition,
blockEditingMode,
isHighlighted,
isMultiSelected,
isPartiallySelected,
isReusable,
isDragging,
hasChildSelected,
isBlockMovingMode,
canInsertMovingBlock,
templateLock,
isEditingDisabled,
hasEditableOutline,
isTemporarilyEditingAsBlocks,
defaultClassName,
mayDisplayControls,
mayDisplayParentControls,
originalBlockClientId,
themeSupportsLayout
};
// Here we separate between the props passed to BlockListBlock and any other
// information we selected for internal use. BlockListBlock is a filtered
// component and thus ALL the props are PUBLIC API.
// Note that the context value doesn't have to be memoized in this case
// because when it changes, this component will be re-rendered anyway, and
// none of the consumers (BlockListBlock and useBlockProps) are memoized or
// "pure". This is different from the public BlockEditContext, where
// consumers might be memoized or "pure".
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PrivateBlockContext.Provider, {
value: privateContext,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockListBlock, {
...props,
mode,
isSelectionEnabled,
isLocked,
canRemove,
canMove,
// Users of the editor.BlockListBlock filter used to be able
// to access the block prop. Ideally these blocks would rely
// on the clientId prop only. This is kept for backward
// compatibility reasons.
block,
name,
attributes,
isValid,
isSelected
})
});
}
/* harmony default export */ const block = ((0,external_wp_element_namespaceObject.memo)(BlockListBlockProvider));
;// CONCATENATED MODULE: external ["wp","htmlEntities"]
const external_wp_htmlEntities_namespaceObject = window["wp"]["htmlEntities"];
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/default-block-appender/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Zero width non-breaking space, used as padding for the paragraph when it is
* empty.
*/
const ZWNBSP = '\ufeff';
function DefaultBlockAppender({
rootClientId
}) {
const {
showPrompt,
isLocked,
placeholder,
isManualGrid
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockCount,
getSettings,
getTemplateLock,
getBlockAttributes
} = select(store);
const isEmpty = !getBlockCount(rootClientId);
const {
bodyPlaceholder
} = getSettings();
return {
showPrompt: isEmpty,
isLocked: !!getTemplateLock(rootClientId),
placeholder: bodyPlaceholder,
isManualGrid: getBlockAttributes(rootClientId)?.layout?.isManualPlacement
};
}, [rootClientId]);
const {
insertDefaultBlock,
startTyping
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
if (isLocked || isManualGrid) {
return null;
}
const value = (0,external_wp_htmlEntities_namespaceObject.decodeEntities)(placeholder) || (0,external_wp_i18n_namespaceObject.__)('Type / to choose a block');
const onAppend = () => {
insertDefaultBlock(undefined, rootClientId);
startTyping();
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
"data-root-client-id": rootClientId || '',
className: dist_clsx('block-editor-default-block-appender', {
'has-visible-prompt': showPrompt
}),
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("p", {
tabIndex: "0"
// We want this element to be styled as a paragraph by themes.
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
,
role: "button",
"aria-label": (0,external_wp_i18n_namespaceObject.__)('Add default block')
// A wrapping container for this one already has the wp-block className.
,
className: "block-editor-default-block-appender__content",
onKeyDown: event => {
if (external_wp_keycodes_namespaceObject.ENTER === event.keyCode || external_wp_keycodes_namespaceObject.SPACE === event.keyCode) {
onAppend();
}
},
onClick: () => onAppend(),
onFocus: () => {
if (showPrompt) {
onAppend();
}
},
children: showPrompt ? value : ZWNBSP
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inserter, {
rootClientId: rootClientId,
position: "bottom right",
isAppender: true,
__experimentalIsQuick: true
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-list-appender/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function DefaultAppender({
rootClientId
}) {
const canInsertDefaultBlock = (0,external_wp_data_namespaceObject.useSelect)(select => select(store).canInsertBlockType((0,external_wp_blocks_namespaceObject.getDefaultBlockName)(), rootClientId));
if (canInsertDefaultBlock) {
// Render the default block appender if the context supports use
// of the default appender.
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DefaultBlockAppender, {
rootClientId: rootClientId
});
}
// Fallback in case the default block can't be inserted.
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(button_block_appender, {
rootClientId: rootClientId,
className: "block-list-appender__toggle"
});
}
function BlockListAppender({
rootClientId,
CustomAppender,
className,
tagName: TagName = 'div'
}) {
const isDragOver = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockInsertionPoint,
isBlockInsertionPointVisible,
getBlockCount
} = select(store);
const insertionPoint = getBlockInsertionPoint();
// Ideally we should also check for `isDragging` but currently it
// requires a lot more setup. We can revisit this once we refactor
// the DnD utility hooks.
return isBlockInsertionPointVisible() && rootClientId === insertionPoint?.rootClientId && getBlockCount(rootClientId) === 0;
}, [rootClientId]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TagName
// A `tabIndex` is used on the wrapping `div` element in order to
// force a focus event to occur when an appender `button` element
// is clicked. In some browsers (Firefox, Safari), button clicks do
// not emit a focus event, which could cause this event to propagate
// unexpectedly. The `tabIndex` ensures that the interaction is
// captured as a focus, without also adding an extra tab stop.
//
// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
, {
tabIndex: -1,
className: dist_clsx('block-list-appender wp-block', className, {
'is-drag-over': isDragOver
})
// Needed in case the whole editor is content editable (for multi
// selection). It fixes an edge case where ArrowDown and ArrowRight
// should collapse the selection to the end of that selection and
// not into the appender.
,
contentEditable: false
// The appender exists to let you add the first Paragraph before
// any is inserted. To that end, this appender should visually be
// presented as a block. That means theme CSS should style it as if
// it were an empty paragraph block. That means a `wp-block` class to
// ensure the width is correct, and a [data-block] attribute to ensure
// the correct margin is applied, especially for classic themes which
// have commonly targeted that attribute for margins.
,
"data-block": true,
children: CustomAppender ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CustomAppender, {}) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DefaultAppender, {
rootClientId: rootClientId
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-popover/inbetween.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const inbetween_MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER;
const InsertionPointOpenRef = (0,external_wp_element_namespaceObject.createContext)();
function BlockPopoverInbetween({
previousClientId,
nextClientId,
children,
__unstablePopoverSlot,
__unstableContentRef,
operation = 'insert',
nearestSide = 'right',
...props
}) {
// This is a temporary hack to get the inbetween inserter to recompute properly.
const [popoverRecomputeCounter, forcePopoverRecompute] = (0,external_wp_element_namespaceObject.useReducer)(
// Module is there to make sure that the counter doesn't overflow.
s => (s + 1) % inbetween_MAX_POPOVER_RECOMPUTE_COUNTER, 0);
const {
orientation,
rootClientId,
isVisible
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockListSettings,
getBlockRootClientId,
isBlockVisible
} = select(store);
const _rootClientId = getBlockRootClientId(previousClientId !== null && previousClientId !== void 0 ? previousClientId : nextClientId);
return {
orientation: getBlockListSettings(_rootClientId)?.orientation || 'vertical',
rootClientId: _rootClientId,
isVisible: isBlockVisible(previousClientId) && isBlockVisible(nextClientId)
};
}, [previousClientId, nextClientId]);
const previousElement = useBlockElement(previousClientId);
const nextElement = useBlockElement(nextClientId);
const isVertical = orientation === 'vertical';
const popoverAnchor = (0,external_wp_element_namespaceObject.useMemo)(() => {
if (
// popoverRecomputeCounter is by definition always equal or greater than 0.
// This check is only there to satisfy the correctness of the
// exhaustive-deps rule for the `useMemo` hook.
popoverRecomputeCounter < 0 || !previousElement && !nextElement || !isVisible) {
return undefined;
}
const contextElement = operation === 'group' ? nextElement || previousElement : previousElement || nextElement;
return {
contextElement,
getBoundingClientRect() {
const previousRect = previousElement ? previousElement.getBoundingClientRect() : null;
const nextRect = nextElement ? nextElement.getBoundingClientRect() : null;
let left = 0;
let top = 0;
let width = 0;
let height = 0;
if (operation === 'group') {
const targetRect = nextRect || previousRect;
top = targetRect.top;
// No spacing is likely around blocks in this operation.
// So width of the inserter containing rect is set to 0.
width = 0;
height = targetRect.bottom - targetRect.top;
// Popover calculates its distance from mid-block so some
// adjustments are needed to make it appear in the right place.
left = nearestSide === 'left' ? targetRect.left - 2 : targetRect.right - 2;
} else if (isVertical) {
// vertical
top = previousRect ? previousRect.bottom : nextRect.top;
width = previousRect ? previousRect.width : nextRect.width;
height = nextRect && previousRect ? nextRect.top - previousRect.bottom : 0;
left = previousRect ? previousRect.left : nextRect.left;
} else {
top = previousRect ? previousRect.top : nextRect.top;
height = previousRect ? previousRect.height : nextRect.height;
if ((0,external_wp_i18n_namespaceObject.isRTL)()) {
// non vertical, rtl
left = nextRect ? nextRect.right : previousRect.left;
width = previousRect && nextRect ? previousRect.left - nextRect.right : 0;
} else {
// non vertical, ltr
left = previousRect ? previousRect.right : nextRect.left;
width = previousRect && nextRect ? nextRect.left - previousRect.right : 0;
}
}
return new window.DOMRect(left, top, width, height);
}
};
}, [previousElement, nextElement, popoverRecomputeCounter, isVertical, isVisible, operation, nearestSide]);
const popoverScrollRef = use_popover_scroll(__unstableContentRef);
// This is only needed for a smooth transition when moving blocks.
// When blocks are moved up/down, their position can be set by
// updating the `transform` property manually (i.e. without using CSS
// transitions or animations). The animation, which can also scroll the block
// editor, can sometimes cause the position of the Popover to get out of sync.
// A MutationObserver is therefore used to make sure that changes to the
// selectedElement's attribute (i.e. `transform`) can be tracked and used to
// trigger the Popover to rerender.
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
if (!previousElement) {
return;
}
const observer = new window.MutationObserver(forcePopoverRecompute);
observer.observe(previousElement, {
attributes: true
});
return () => {
observer.disconnect();
};
}, [previousElement]);
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
if (!nextElement) {
return;
}
const observer = new window.MutationObserver(forcePopoverRecompute);
observer.observe(nextElement, {
attributes: true
});
return () => {
observer.disconnect();
};
}, [nextElement]);
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
if (!previousElement) {
return;
}
previousElement.ownerDocument.defaultView.addEventListener('resize', forcePopoverRecompute);
return () => {
previousElement.ownerDocument.defaultView?.removeEventListener('resize', forcePopoverRecompute);
};
}, [previousElement]);
// If there's either a previous or a next element, show the inbetween popover.
// Note that drag and drop uses the inbetween popover to show the drop indicator
// before the first block and after the last block.
if (!previousElement && !nextElement || !isVisible) {
return null;
}
/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
// While ideally it would be enough to capture the
// bubbling focus event from the Inserter, due to the
// characteristics of click focusing of `button`s in
// Firefox and Safari, it is not reliable.
//
// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Popover, {
ref: popoverScrollRef,
animate: false,
anchor: popoverAnchor,
focusOnMount: false
// Render in the old slot if needed for backward compatibility,
// otherwise render in place (not in the default popover slot).
,
__unstableSlotName: __unstablePopoverSlot,
inline: !__unstablePopoverSlot
// Forces a remount of the popover when its position changes
// This makes sure the popover doesn't animate from its previous position.
,
...props,
className: dist_clsx('block-editor-block-popover', 'block-editor-block-popover__inbetween', props.className),
resize: false,
flip: false,
placement: "overlay",
variant: "unstyled",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-block-popover__inbetween-container",
children: children
})
}, nextClientId + '--' + rootClientId);
/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
}
/* harmony default export */ const inbetween = (BlockPopoverInbetween);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-popover/drop-zone.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const animateVariants = {
hide: {
opacity: 0,
scaleY: 0.75
},
show: {
opacity: 1,
scaleY: 1
},
exit: {
opacity: 0,
scaleY: 0.9
}
};
function BlockDropZonePopover({
__unstablePopoverSlot,
__unstableContentRef
}) {
const {
clientId
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockOrder,
getBlockInsertionPoint
} = select(store);
const insertionPoint = getBlockInsertionPoint();
const order = getBlockOrder(insertionPoint.rootClientId);
if (!order.length) {
return {};
}
return {
clientId: order[insertionPoint.index]
};
}, []);
const reducedMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)();
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(cover, {
clientId: clientId,
__unstablePopoverSlot: __unstablePopoverSlot,
__unstableContentRef: __unstableContentRef,
className: "block-editor-block-popover__drop-zone",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__unstableMotion.div, {
"data-testid": "block-popover-drop-zone",
initial: reducedMotion ? animateVariants.show : animateVariants.hide,
animate: animateVariants.show,
exit: reducedMotion ? animateVariants.show : animateVariants.exit,
className: "block-editor-block-popover__drop-zone-foreground"
})
});
}
/* harmony default export */ const drop_zone = (BlockDropZonePopover);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-tools/insertion-point.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const insertion_point_InsertionPointOpenRef = (0,external_wp_element_namespaceObject.createContext)();
function InbetweenInsertionPointPopover({
__unstablePopoverSlot,
__unstableContentRef,
operation = 'insert',
nearestSide = 'right'
}) {
const {
selectBlock,
hideInsertionPoint
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const openRef = (0,external_wp_element_namespaceObject.useContext)(insertion_point_InsertionPointOpenRef);
const ref = (0,external_wp_element_namespaceObject.useRef)();
const {
orientation,
previousClientId,
nextClientId,
rootClientId,
isInserterShown,
isDistractionFree,
isNavigationMode,
isZoomOutMode
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockOrder,
getBlockListSettings,
getBlockInsertionPoint,
isBlockBeingDragged,
getPreviousBlockClientId,
getNextBlockClientId,
getSettings,
isNavigationMode: _isNavigationMode,
__unstableGetEditorMode
} = select(store);
const insertionPoint = getBlockInsertionPoint();
const order = getBlockOrder(insertionPoint.rootClientId);
if (!order.length) {
return {};
}
let _previousClientId = order[insertionPoint.index - 1];
let _nextClientId = order[insertionPoint.index];
while (isBlockBeingDragged(_previousClientId)) {
_previousClientId = getPreviousBlockClientId(_previousClientId);
}
while (isBlockBeingDragged(_nextClientId)) {
_nextClientId = getNextBlockClientId(_nextClientId);
}
const settings = getSettings();
return {
previousClientId: _previousClientId,
nextClientId: _nextClientId,
orientation: getBlockListSettings(insertionPoint.rootClientId)?.orientation || 'vertical',
rootClientId: insertionPoint.rootClientId,
isNavigationMode: _isNavigationMode(),
isDistractionFree: settings.isDistractionFree,
isInserterShown: insertionPoint?.__unstableWithInserter,
isZoomOutMode: __unstableGetEditorMode() === 'zoom-out'
};
}, []);
const {
getBlockEditingMode
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const disableMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)();
function onClick(event) {
if (event.target === ref.current && nextClientId && getBlockEditingMode(nextClientId) !== 'disabled') {
selectBlock(nextClientId, -1);
}
}
function maybeHideInserterPoint(event) {
// Only hide the inserter if it's triggered on the wrapper,
// and the inserter is not open.
if (event.target === ref.current && !openRef.current) {
hideInsertionPoint();
}
}
function onFocus(event) {
// Only handle click on the wrapper specifically, and not an event
// bubbled from the inserter itself.
if (event.target !== ref.current) {
openRef.current = true;
}
}
const lineVariants = {
// Initial position starts from the center and invisible.
start: {
opacity: 0,
scale: 0
},
// The line expands to fill the container. If the inserter is visible it
// is delayed so it appears orchestrated.
rest: {
opacity: 1,
scale: 1,
transition: {
delay: isInserterShown ? 0.5 : 0,
type: 'tween'
}
},
hover: {
opacity: 1,
scale: 1,
transition: {
delay: 0.5,
type: 'tween'
}
}
};
const inserterVariants = {
start: {
scale: disableMotion ? 1 : 0
},
rest: {
scale: 1,
transition: {
delay: 0.4,
type: 'tween'
}
}
};
if (isDistractionFree && !isNavigationMode) {
return null;
}
// Zoom out mode should only show the insertion point for the insert operation.
// Other operations such as "group" are when the editor tries to create a row
// block by grouping the block being dragged with the block it's being dropped
// onto.
if (isZoomOutMode && operation !== 'insert') {
return null;
}
const orientationClassname = orientation === 'horizontal' || operation === 'group' ? 'is-horizontal' : 'is-vertical';
const className = dist_clsx('block-editor-block-list__insertion-point', orientationClassname);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inbetween, {
previousClientId: previousClientId,
nextClientId: nextClientId,
__unstablePopoverSlot: __unstablePopoverSlot,
__unstableContentRef: __unstableContentRef,
operation: operation,
nearestSide: nearestSide,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__unstableMotion.div, {
layout: !disableMotion,
initial: disableMotion ? 'rest' : 'start',
animate: "rest",
whileHover: "hover",
whileTap: "pressed",
exit: "start",
ref: ref,
tabIndex: -1,
onClick: onClick,
onFocus: onFocus,
className: dist_clsx(className, {
'is-with-inserter': isInserterShown
}),
onHoverEnd: maybeHideInserterPoint,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__unstableMotion.div, {
variants: lineVariants,
className: "block-editor-block-list__insertion-point-indicator",
"data-testid": "block-list-insertion-point-indicator"
}), isInserterShown && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__unstableMotion.div, {
variants: inserterVariants,
className: dist_clsx('block-editor-block-list__insertion-point-inserter'),
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inserter, {
position: "bottom center",
clientId: nextClientId,
rootClientId: rootClientId,
__experimentalIsQuick: true,
onToggle: isOpen => {
openRef.current = isOpen;
},
onSelectOrClose: () => {
openRef.current = false;
}
})
})]
})
});
}
function InsertionPoint(props) {
const {
insertionPoint,
isVisible,
isBlockListEmpty
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockInsertionPoint,
isBlockInsertionPointVisible,
getBlockCount
} = select(store);
const blockInsertionPoint = getBlockInsertionPoint();
return {
insertionPoint: blockInsertionPoint,
isVisible: isBlockInsertionPointVisible(),
isBlockListEmpty: getBlockCount(blockInsertionPoint?.rootClientId) === 0
};
}, []);
if (!isVisible ||
// Don't render the insertion point if the block list is empty.
// The insertion point will be represented by the appender instead.
isBlockListEmpty) {
return null;
}
/**
* Render a popover that overlays the block when the desired operation is to replace it.
* Otherwise, render a popover in between blocks for the indication of inserting between them.
*/
return insertionPoint.operation === 'replace' ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(drop_zone
// Force remount to trigger the animation.
, {
...props
}, `${insertionPoint.rootClientId}-${insertionPoint.index}`) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InbetweenInsertionPointPopover, {
operation: insertionPoint.operation,
nearestSide: insertionPoint.nearestSide,
...props
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-list/use-in-between-inserter.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function useInBetweenInserter() {
const openRef = (0,external_wp_element_namespaceObject.useContext)(insertion_point_InsertionPointOpenRef);
const isInBetweenInserterDisabled = (0,external_wp_data_namespaceObject.useSelect)(select => select(store).getSettings().isDistractionFree || select(store).__unstableGetEditorMode() === 'zoom-out', []);
const {
getBlockListSettings,
getBlockIndex,
isMultiSelecting,
getSelectedBlockClientIds,
getSettings,
getTemplateLock,
__unstableIsWithinBlockOverlay,
getBlockEditingMode,
getBlockName,
getBlockAttributes
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
showInsertionPoint,
hideInsertionPoint
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
return (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
if (isInBetweenInserterDisabled) {
return;
}
function onMouseMove(event) {
// openRef is the reference to the insertion point between blocks.
// If the reference is not set or the insertion point is already open, return.
if (openRef === undefined || openRef.current) {
return;
}
// Ignore text nodes sometimes detected in FireFox.
if (event.target.nodeType === event.target.TEXT_NODE) {
return;
}
if (isMultiSelecting()) {
return;
}
if (!event.target.classList.contains('block-editor-block-list__layout')) {
hideInsertionPoint();
return;
}
let rootClientId;
if (!event.target.classList.contains('is-root-container')) {
const blockElement = !!event.target.getAttribute('data-block') ? event.target : event.target.closest('[data-block]');
rootClientId = blockElement.getAttribute('data-block');
}
if (getTemplateLock(rootClientId) || getBlockEditingMode(rootClientId) === 'disabled' || getBlockName(rootClientId) === 'core/block' || rootClientId && getBlockAttributes(rootClientId).layout?.isManualPlacement) {
return;
}
const blockListSettings = getBlockListSettings(rootClientId);
const orientation = blockListSettings?.orientation || 'vertical';
const captureToolbars = !!blockListSettings?.__experimentalCaptureToolbars;
const offsetTop = event.clientY;
const offsetLeft = event.clientX;
const children = Array.from(event.target.children);
let element = children.find(blockEl => {
const blockElRect = blockEl.getBoundingClientRect();
return blockEl.classList.contains('wp-block') && orientation === 'vertical' && blockElRect.top > offsetTop || blockEl.classList.contains('wp-block') && orientation === 'horizontal' && ((0,external_wp_i18n_namespaceObject.isRTL)() ? blockElRect.right < offsetLeft : blockElRect.left > offsetLeft);
});
if (!element) {
hideInsertionPoint();
return;
}
// The block may be in an alignment wrapper, so check the first direct
// child if the element has no ID.
if (!element.id) {
element = element.firstElementChild;
if (!element) {
hideInsertionPoint();
return;
}
}
// Don't show the insertion point if a parent block has an "overlay"
// See https://github.com/WordPress/gutenberg/pull/34012#pullrequestreview-727762337
const clientId = element.id.slice('block-'.length);
if (!clientId || __unstableIsWithinBlockOverlay(clientId)) {
return;
}
// Don't show the inserter if the following conditions are met,
// as it conflicts with the block toolbar:
// 1. when hovering above or inside selected block(s)
// 2. when the orientation is vertical
// 3. when the __experimentalCaptureToolbars is not enabled
// 4. when the Top Toolbar is not disabled
if (getSelectedBlockClientIds().includes(clientId) && orientation === 'vertical' && !captureToolbars && !getSettings().hasFixedToolbar) {
return;
}
const elementRect = element.getBoundingClientRect();
if (orientation === 'horizontal' && (event.clientY > elementRect.bottom || event.clientY < elementRect.top) || orientation === 'vertical' && (event.clientX > elementRect.right || event.clientX < elementRect.left)) {
hideInsertionPoint();
return;
}
const index = getBlockIndex(clientId);
// Don't show the in-between inserter before the first block in
// the list (preserves the original behaviour).
if (index === 0) {
hideInsertionPoint();
return;
}
showInsertionPoint(rootClientId, index, {
__unstableWithInserter: true
});
}
node.addEventListener('mousemove', onMouseMove);
return () => {
node.removeEventListener('mousemove', onMouseMove);
};
}, [openRef, getBlockListSettings, getBlockIndex, isMultiSelecting, showInsertionPoint, hideInsertionPoint, getSelectedBlockClientIds, isInBetweenInserterDisabled]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-selection-clearer/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Pass the returned ref callback to an element that should clear block
* selection. Selection will only be cleared if the element is clicked directly,
* not if a child element is clicked.
*
* @return {import('react').RefCallback} Ref callback.
*/
function useBlockSelectionClearer() {
const {
getSettings,
hasSelectedBlock,
hasMultiSelection
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
clearSelectedBlock
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const {
clearBlockSelection: isEnabled
} = getSettings();
return (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
if (!isEnabled) {
return;
}
function onMouseDown(event) {
if (!hasSelectedBlock() && !hasMultiSelection()) {
return;
}
// Only handle clicks on the element, not the children.
if (event.target !== node) {
return;
}
clearSelectedBlock();
}
node.addEventListener('mousedown', onMouseDown);
return () => {
node.removeEventListener('mousedown', onMouseDown);
};
}, [hasSelectedBlock, hasMultiSelection, clearSelectedBlock, isEnabled]);
}
function BlockSelectionClearer(props) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
ref: useBlockSelectionClearer(),
...props
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inner-blocks/button-block-appender.js
/**
* External dependencies
*/
/**
* Internal dependencies
*/
function ButtonBlockAppender({
showSeparator,
isFloating,
onAddBlock,
isToggle
}) {
const {
clientId
} = useBlockEditContext();
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(button_block_appender, {
className: dist_clsx({
'block-list-appender__toggle': isToggle
}),
rootClientId: clientId,
showSeparator: showSeparator,
isFloating: isFloating,
onAddBlock: onAddBlock
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inner-blocks/default-block-appender.js
/**
* Internal dependencies
*/
function default_block_appender_DefaultBlockAppender() {
const {
clientId
} = useBlockEditContext();
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DefaultBlockAppender, {
rootClientId: clientId
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inner-blocks/use-nested-settings-update.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/** @typedef {import('../../selectors').WPDirectInsertBlock } WPDirectInsertBlock */
const pendingSettingsUpdates = new WeakMap();
function useShallowMemo(value) {
const [prevValue, setPrevValue] = (0,external_wp_element_namespaceObject.useState)(value);
if (!external_wp_isShallowEqual_default()(prevValue, value)) {
setPrevValue(value);
}
return prevValue;
}
/**
* This hook is a side effect which updates the block-editor store when changes
* happen to inner block settings. The given props are transformed into a
* settings object, and if that is different from the current settings object in
* the block-editor store, then the store is updated with the new settings which
* came from props.
*
* @param {string} clientId The client ID of the block to update.
* @param {string} parentLock
* @param {string[]} allowedBlocks An array of block names which are permitted
* in inner blocks.
* @param {string[]} prioritizedInserterBlocks Block names and/or block variations to be prioritized in the inserter, in the format {blockName}/{variationName}.
* @param {?WPDirectInsertBlock} defaultBlock The default block to insert: [ blockName, { blockAttributes } ].
* @param {?boolean} directInsert If a default block should be inserted directly by the appender.
*
* @param {?WPDirectInsertBlock} __experimentalDefaultBlock A deprecated prop for the default block to insert: [ blockName, { blockAttributes } ]. Use `defaultBlock` instead.
*
* @param {?boolean} __experimentalDirectInsert A deprecated prop for whether a default block should be inserted directly by the appender. Use `directInsert` instead.
*
* @param {string} [templateLock] The template lock specified for the inner
* blocks component. (e.g. "all")
* @param {boolean} captureToolbars Whether or children toolbars should be shown
* in the inner blocks component rather than on
* the child block.
* @param {string} orientation The direction in which the block
* should face.
* @param {Object} layout The layout object for the block container.
*/
function useNestedSettingsUpdate(clientId, parentLock, allowedBlocks, prioritizedInserterBlocks, defaultBlock, directInsert, __experimentalDefaultBlock, __experimentalDirectInsert, templateLock, captureToolbars, orientation, layout) {
// Instead of adding a useSelect mapping here, please add to the useSelect
// mapping in InnerBlocks! Every subscription impacts performance.
const registry = (0,external_wp_data_namespaceObject.useRegistry)();
// Implementors often pass a new array on every render,
// and the contents of the arrays are just strings, so the entire array
// can be passed as dependencies but We need to include the length of the array,
// otherwise if the arrays change length but the first elements are equal the comparison,
// does not works as expected.
const _allowedBlocks = useShallowMemo(allowedBlocks);
const _prioritizedInserterBlocks = (0,external_wp_element_namespaceObject.useMemo)(() => prioritizedInserterBlocks,
// eslint-disable-next-line react-hooks/exhaustive-deps
prioritizedInserterBlocks);
const _templateLock = templateLock === undefined || parentLock === 'contentOnly' ? parentLock : templateLock;
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
const newSettings = {
allowedBlocks: _allowedBlocks,
prioritizedInserterBlocks: _prioritizedInserterBlocks,
templateLock: _templateLock
};
// These values are not defined for RN, so only include them if they
// are defined.
if (captureToolbars !== undefined) {
newSettings.__experimentalCaptureToolbars = captureToolbars;
}
// Orientation depends on layout,
// ideally the separate orientation prop should be deprecated.
if (orientation !== undefined) {
newSettings.orientation = orientation;
} else {
const layoutType = getLayoutType(layout?.type);
newSettings.orientation = layoutType.getOrientation(layout);
}
if (__experimentalDefaultBlock !== undefined) {
external_wp_deprecated_default()('__experimentalDefaultBlock', {
alternative: 'defaultBlock',
since: '6.3',
version: '6.4'
});
newSettings.defaultBlock = __experimentalDefaultBlock;
}
if (defaultBlock !== undefined) {
newSettings.defaultBlock = defaultBlock;
}
if (__experimentalDirectInsert !== undefined) {
external_wp_deprecated_default()('__experimentalDirectInsert', {
alternative: 'directInsert',
since: '6.3',
version: '6.4'
});
newSettings.directInsert = __experimentalDirectInsert;
}
if (directInsert !== undefined) {
newSettings.directInsert = directInsert;
}
if (newSettings.directInsert !== undefined && typeof newSettings.directInsert !== 'boolean') {
external_wp_deprecated_default()('Using `Function` as a `directInsert` argument', {
alternative: '`boolean` values',
since: '6.5'
});
}
// Batch updates to block list settings to avoid triggering cascading renders
// for each container block included in a tree and optimize initial render.
// To avoid triggering updateBlockListSettings for each container block
// causing X re-renderings for X container blocks,
// we batch all the updatedBlockListSettings in a single "data" batch
// which results in a single re-render.
if (!pendingSettingsUpdates.get(registry)) {
pendingSettingsUpdates.set(registry, {});
}
pendingSettingsUpdates.get(registry)[clientId] = newSettings;
window.queueMicrotask(() => {
const settings = pendingSettingsUpdates.get(registry);
if (Object.keys(settings).length) {
const {
updateBlockListSettings
} = registry.dispatch(store);
updateBlockListSettings(settings);
pendingSettingsUpdates.set(registry, {});
}
});
}, [clientId, _allowedBlocks, _prioritizedInserterBlocks, _templateLock, defaultBlock, directInsert, __experimentalDefaultBlock, __experimentalDirectInsert, captureToolbars, orientation, layout, registry]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inner-blocks/use-inner-block-template-sync.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* This hook makes sure that a block's inner blocks stay in sync with the given
* block "template". The template is a block hierarchy to which inner blocks must
* conform. If the blocks get "out of sync" with the template and the template
* is meant to be locked (e.g. templateLock = "all" or templateLock = "contentOnly"),
* then we replace the inner blocks with the correct value after synchronizing it with the template.
*
* @param {string} clientId The block client ID.
* @param {Object} template The template to match.
* @param {string} templateLock The template lock state for the inner blocks. For
* example, if the template lock is set to "all",
* then the inner blocks will stay in sync with the
* template. If not defined or set to false, then
* the inner blocks will not be synchronized with
* the given template.
* @param {boolean} templateInsertUpdatesSelection Whether or not to update the
* block-editor selection state when inner blocks
* are replaced after template synchronization.
*/
function useInnerBlockTemplateSync(clientId, template, templateLock, templateInsertUpdatesSelection) {
// Instead of adding a useSelect mapping here, please add to the useSelect
// mapping in InnerBlocks! Every subscription impacts performance.
const {
getBlocks,
getSelectedBlocksInitialCaretPosition,
isBlockSelected
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
replaceInnerBlocks,
__unstableMarkNextChangeAsNotPersistent
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
// Maintain a reference to the previous value so we can do a deep equality check.
const existingTemplateRef = (0,external_wp_element_namespaceObject.useRef)(null);
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
let isCancelled = false;
// There's an implicit dependency between useInnerBlockTemplateSync and useNestedSettingsUpdate
// The former needs to happen after the latter and since the latter is using microtasks to batch updates (performance optimization),
// we need to schedule this one in a microtask as well.
// Example: If you remove queueMicrotask here, ctrl + click to insert quote block won't close the inserter.
window.queueMicrotask(() => {
if (isCancelled) {
return;
}
// Only synchronize innerBlocks with template if innerBlocks are empty
// or a locking "all" or "contentOnly" exists directly on the block.
const currentInnerBlocks = getBlocks(clientId);
const shouldApplyTemplate = currentInnerBlocks.length === 0 || templateLock === 'all' || templateLock === 'contentOnly';
const hasTemplateChanged = !es6_default()(template, existingTemplateRef.current);
if (!shouldApplyTemplate || !hasTemplateChanged) {
return;
}
existingTemplateRef.current = template;
const nextBlocks = (0,external_wp_blocks_namespaceObject.synchronizeBlocksWithTemplate)(currentInnerBlocks, template);
if (!es6_default()(nextBlocks, currentInnerBlocks)) {
__unstableMarkNextChangeAsNotPersistent();
replaceInnerBlocks(clientId, nextBlocks, currentInnerBlocks.length === 0 && templateInsertUpdatesSelection && nextBlocks.length !== 0 && isBlockSelected(clientId),
// This ensures the "initialPosition" doesn't change when applying the template
// If we're supposed to focus the block, we'll focus the first inner block
// otherwise, we won't apply any auto-focus.
// This ensures for instance that the focus stays in the inserter when inserting the "buttons" block.
getSelectedBlocksInitialCaretPosition());
}
});
return () => {
isCancelled = true;
};
}, [template, templateLock, clientId]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inner-blocks/use-block-context.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Returns a context object for a given block.
*
* @param {string} clientId The block client ID.
*
* @return {Record<string,*>} Context value.
*/
function useBlockContext(clientId) {
return (0,external_wp_data_namespaceObject.useSelect)(select => {
const block = select(store).getBlock(clientId);
if (!block) {
return undefined;
}
const blockType = select(external_wp_blocks_namespaceObject.store).getBlockType(block.name);
if (!blockType) {
return undefined;
}
if (Object.keys(blockType.providesContext).length === 0) {
return undefined;
}
return Object.fromEntries(Object.entries(blockType.providesContext).map(([contextName, attributeName]) => [contextName, block.attributes[attributeName]]));
}, [clientId]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/use-on-block-drop/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/** @typedef {import('react').SyntheticEvent} SyntheticEvent */
/** @typedef {import('./types').WPDropOperation} WPDropOperation */
/**
* Retrieve the data for a block drop event.
*
* @param {SyntheticEvent} event The drop event.
*
* @return {Object} An object with block drag and drop data.
*/
function parseDropEvent(event) {
let result = {
srcRootClientId: null,
srcClientIds: null,
srcIndex: null,
type: null,
blocks: null
};
if (!event.dataTransfer) {
return result;
}
try {
result = Object.assign(result, JSON.parse(event.dataTransfer.getData('wp-blocks')));
} catch (err) {
return result;
}
return result;
}
/**
* A function that returns an event handler function for block drop events.
*
* @param {string} targetRootClientId The root client id where the block(s) will be inserted.
* @param {number} targetBlockIndex The index where the block(s) will be inserted.
* @param {Function} getBlockIndex A function that gets the index of a block.
* @param {Function} getClientIdsOfDescendants A function that gets the client ids of descendant blocks.
* @param {Function} moveBlocks A function that moves blocks.
* @param {Function} insertOrReplaceBlocks A function that inserts or replaces blocks.
* @param {Function} clearSelectedBlock A function that clears block selection.
* @param {string} operation The type of operation to perform on drop. Could be `insert` or `replace` or `group`.
* @param {Function} getBlock A function that returns a block given its client id.
* @return {Function} The event handler for a block drop event.
*/
function onBlockDrop(targetRootClientId, targetBlockIndex, getBlockIndex, getClientIdsOfDescendants, moveBlocks, insertOrReplaceBlocks, clearSelectedBlock, operation, getBlock) {
return event => {
const {
srcRootClientId: sourceRootClientId,
srcClientIds: sourceClientIds,
type: dropType,
blocks
} = parseDropEvent(event);
// If the user is inserting a block.
if (dropType === 'inserter') {
clearSelectedBlock();
const blocksToInsert = blocks.map(block => (0,external_wp_blocks_namespaceObject.cloneBlock)(block));
insertOrReplaceBlocks(blocksToInsert, true, null);
}
// If the user is moving a block.
if (dropType === 'block') {
const sourceBlockIndex = getBlockIndex(sourceClientIds[0]);
// If the user is dropping to the same position, return early.
if (sourceRootClientId === targetRootClientId && sourceBlockIndex === targetBlockIndex) {
return;
}
// If the user is attempting to drop a block within its own
// nested blocks, return early as this would create infinite
// recursion.
if (sourceClientIds.includes(targetRootClientId) || getClientIdsOfDescendants(sourceClientIds).some(id => id === targetRootClientId)) {
return;
}
// If the user is dropping a block over another block, replace both blocks
// with a group block containing them
if (operation === 'group') {
const blocksToInsert = sourceClientIds.map(clientId => getBlock(clientId));
insertOrReplaceBlocks(blocksToInsert, true, null, sourceClientIds);
return;
}
const isAtSameLevel = sourceRootClientId === targetRootClientId;
const draggedBlockCount = sourceClientIds.length;
// If the block is kept at the same level and moved downwards,
// subtract to take into account that the blocks being dragged
// were removed from the block list above the insertion point.
const insertIndex = isAtSameLevel && sourceBlockIndex < targetBlockIndex ? targetBlockIndex - draggedBlockCount : targetBlockIndex;
moveBlocks(sourceClientIds, sourceRootClientId, insertIndex);
}
};
}
/**
* A function that returns an event handler function for block-related file drop events.
*
* @param {string} targetRootClientId The root client id where the block(s) will be inserted.
* @param {Function} getSettings A function that gets the block editor settings.
* @param {Function} updateBlockAttributes A function that updates a block's attributes.
* @param {Function} canInsertBlockType A function that returns checks whether a block type can be inserted.
* @param {Function} insertOrReplaceBlocks A function that inserts or replaces blocks.
*
* @return {Function} The event handler for a block-related file drop event.
*/
function onFilesDrop(targetRootClientId, getSettings, updateBlockAttributes, canInsertBlockType, insertOrReplaceBlocks) {
return files => {
if (!getSettings().mediaUpload) {
return;
}
const transformation = (0,external_wp_blocks_namespaceObject.findTransform)((0,external_wp_blocks_namespaceObject.getBlockTransforms)('from'), transform => transform.type === 'files' && canInsertBlockType(transform.blockName, targetRootClientId) && transform.isMatch(files));
if (transformation) {
const blocks = transformation.transform(files, updateBlockAttributes);
insertOrReplaceBlocks(blocks);
}
};
}
/**
* A function that returns an event handler function for block-related HTML drop events.
*
* @param {Function} insertOrReplaceBlocks A function that inserts or replaces blocks.
*
* @return {Function} The event handler for a block-related HTML drop event.
*/
function onHTMLDrop(insertOrReplaceBlocks) {
return HTML => {
const blocks = (0,external_wp_blocks_namespaceObject.pasteHandler)({
HTML,
mode: 'BLOCKS'
});
if (blocks.length) {
insertOrReplaceBlocks(blocks);
}
};
}
/**
* A React hook for handling block drop events.
*
* @param {string} targetRootClientId The root client id where the block(s) will be inserted.
* @param {number} targetBlockIndex The index where the block(s) will be inserted.
* @param {Object} options The optional options.
* @param {WPDropOperation} [options.operation] The type of operation to perform on drop. Could be `insert` or `replace` for now.
*
* @return {Function} A function to be passed to the onDrop handler.
*/
function useOnBlockDrop(targetRootClientId, targetBlockIndex, options = {}) {
const {
operation = 'insert',
nearestSide = 'right'
} = options;
const {
canInsertBlockType,
getBlockIndex,
getClientIdsOfDescendants,
getBlockOrder,
getBlocksByClientId,
getSettings,
getBlock
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
getGroupingBlockName
} = (0,external_wp_data_namespaceObject.useSelect)(external_wp_blocks_namespaceObject.store);
const {
insertBlocks,
moveBlocksToPosition,
updateBlockAttributes,
clearSelectedBlock,
replaceBlocks,
removeBlocks
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const registry = (0,external_wp_data_namespaceObject.useRegistry)();
const insertOrReplaceBlocks = (0,external_wp_element_namespaceObject.useCallback)((blocks, updateSelection = true, initialPosition = 0, clientIdsToReplace = []) => {
if (!Array.isArray(blocks)) {
blocks = [blocks];
}
const clientIds = getBlockOrder(targetRootClientId);
const clientId = clientIds[targetBlockIndex];
if (operation === 'replace') {
replaceBlocks(clientId, blocks, undefined, initialPosition);
} else if (operation === 'group') {
const targetBlock = getBlock(clientId);
if (nearestSide === 'left') {
blocks.push(targetBlock);
} else {
blocks.unshift(targetBlock);
}
const groupInnerBlocks = blocks.map(block => {
return (0,external_wp_blocks_namespaceObject.createBlock)(block.name, block.attributes, block.innerBlocks);
});
const areAllImages = blocks.every(block => {
return block.name === 'core/image';
});
const galleryBlock = canInsertBlockType('core/gallery', targetRootClientId);
const wrappedBlocks = (0,external_wp_blocks_namespaceObject.createBlock)(areAllImages && galleryBlock ? 'core/gallery' : getGroupingBlockName(), {
layout: {
type: 'flex',
flexWrap: areAllImages && galleryBlock ? null : 'nowrap'
}
}, groupInnerBlocks);
// Need to make sure both the target block and the block being dragged are replaced
// otherwise the dragged block will be duplicated.
replaceBlocks([clientId, ...clientIdsToReplace], wrappedBlocks, undefined, initialPosition);
} else {
insertBlocks(blocks, targetBlockIndex, targetRootClientId, updateSelection, initialPosition);
}
}, [getBlockOrder, targetRootClientId, targetBlockIndex, operation, replaceBlocks, getBlock, nearestSide, canInsertBlockType, getGroupingBlockName, insertBlocks]);
const moveBlocks = (0,external_wp_element_namespaceObject.useCallback)((sourceClientIds, sourceRootClientId, insertIndex) => {
if (operation === 'replace') {
const sourceBlocks = getBlocksByClientId(sourceClientIds);
const targetBlockClientIds = getBlockOrder(targetRootClientId);
const targetBlockClientId = targetBlockClientIds[targetBlockIndex];
registry.batch(() => {
// Remove the source blocks.
removeBlocks(sourceClientIds, false);
// Replace the target block with the source blocks.
replaceBlocks(targetBlockClientId, sourceBlocks, undefined, 0);
});
} else {
moveBlocksToPosition(sourceClientIds, sourceRootClientId, targetRootClientId, insertIndex);
}
}, [operation, getBlockOrder, getBlocksByClientId, moveBlocksToPosition, registry, removeBlocks, replaceBlocks, targetBlockIndex, targetRootClientId]);
const _onDrop = onBlockDrop(targetRootClientId, targetBlockIndex, getBlockIndex, getClientIdsOfDescendants, moveBlocks, insertOrReplaceBlocks, clearSelectedBlock, operation, getBlock);
const _onFilesDrop = onFilesDrop(targetRootClientId, getSettings, updateBlockAttributes, canInsertBlockType, insertOrReplaceBlocks);
const _onHTMLDrop = onHTMLDrop(insertOrReplaceBlocks);
return event => {
const files = (0,external_wp_dom_namespaceObject.getFilesFromDataTransfer)(event.dataTransfer);
const html = event.dataTransfer.getData('text/html');
/**
* From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
* The order of the checks is important to recognise the HTML drop.
*/
if (html) {
_onHTMLDrop(html);
} else if (files.length) {
_onFilesDrop(files);
} else {
_onDrop(event);
}
};
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/utils/math.js
/**
* A string representing the name of an edge.
*
* @typedef {'top'|'right'|'bottom'|'left'} WPEdgeName
*/
/**
* @typedef {Object} WPPoint
* @property {number} x The horizontal position.
* @property {number} y The vertical position.
*/
/**
* Given a point, a DOMRect and the name of an edge, returns the distance to
* that edge of the rect.
*
* This function works for edges that are horizontal or vertical (e.g. not
* rotated), the following terms are used so that the function works in both
* orientations:
*
* - Forward, meaning the axis running horizontally when an edge is vertical
* and vertically when an edge is horizontal.
* - Lateral, meaning the axis running vertically when an edge is vertical
* and horizontally when an edge is horizontal.
*
* @param {WPPoint} point The point to measure distance from.
* @param {DOMRect} rect A DOM Rect containing edge positions.
* @param {WPEdgeName} edge The edge to measure to.
*/
function getDistanceFromPointToEdge(point, rect, edge) {
const isHorizontal = edge === 'top' || edge === 'bottom';
const {
x,
y
} = point;
const pointLateralPosition = isHorizontal ? x : y;
const pointForwardPosition = isHorizontal ? y : x;
const edgeStart = isHorizontal ? rect.left : rect.top;
const edgeEnd = isHorizontal ? rect.right : rect.bottom;
const edgeForwardPosition = rect[edge];
// Measure the straight line distance to the edge of the rect, when the
// point is adjacent to the edge.
// Else, if the point is positioned diagonally to the edge of the rect,
// measure diagonally to the nearest corner that the edge meets.
let edgeLateralPosition;
if (pointLateralPosition >= edgeStart && pointLateralPosition <= edgeEnd) {
edgeLateralPosition = pointLateralPosition;
} else if (pointLateralPosition < edgeEnd) {
edgeLateralPosition = edgeStart;
} else {
edgeLateralPosition = edgeEnd;
}
return Math.sqrt((pointLateralPosition - edgeLateralPosition) ** 2 + (pointForwardPosition - edgeForwardPosition) ** 2);
}
/**
* Given a point, a DOMRect and a list of allowed edges returns the name of and
* distance to the nearest edge.
*
* @param {WPPoint} point The point to measure distance from.
* @param {DOMRect} rect A DOM Rect containing edge positions.
* @param {WPEdgeName[]} allowedEdges A list of the edges included in the
* calculation. Defaults to all edges.
*
* @return {[number, string]} An array where the first value is the distance
* and a second is the edge name.
*/
function getDistanceToNearestEdge(point, rect, allowedEdges = ['top', 'bottom', 'left', 'right']) {
let candidateDistance;
let candidateEdge;
allowedEdges.forEach(edge => {
const distance = getDistanceFromPointToEdge(point, rect, edge);
if (candidateDistance === undefined || distance < candidateDistance) {
candidateDistance = distance;
candidateEdge = edge;
}
});
return [candidateDistance, candidateEdge];
}
/**
* Is the point contained by the rectangle.
*
* @param {WPPoint} point The point.
* @param {DOMRect} rect The rectangle.
*
* @return {boolean} True if the point is contained by the rectangle, false otherwise.
*/
function isPointContainedByRect(point, rect) {
return rect.left <= point.x && rect.right >= point.x && rect.top <= point.y && rect.bottom >= point.y;
}
/**
* Is the point within the top and bottom boundaries of the rectangle.
*
* @param {WPPoint} point The point.
* @param {DOMRect} rect The rectangle.
*
* @return {boolean} True if the point is within top and bottom of rectangle, false otherwise.
*/
function isPointWithinTopAndBottomBoundariesOfRect(point, rect) {
return rect.top <= point.y && rect.bottom >= point.y;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/use-block-drop-zone/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const THRESHOLD_DISTANCE = 30;
const MINIMUM_HEIGHT_FOR_THRESHOLD = 120;
const MINIMUM_WIDTH_FOR_THRESHOLD = 120;
/** @typedef {import('../../utils/math').WPPoint} WPPoint */
/** @typedef {import('../use-on-block-drop/types').WPDropOperation} WPDropOperation */
/**
* The orientation of a block list.
*
* @typedef {'horizontal'|'vertical'|undefined} WPBlockListOrientation
*/
/**
* The insert position when dropping a block.
*
* @typedef {'before'|'after'} WPInsertPosition
*/
/**
* @typedef {Object} WPBlockData
* @property {boolean} isUnmodifiedDefaultBlock Is the block unmodified default block.
* @property {() => DOMRect} getBoundingClientRect Get the bounding client rect of the block.
* @property {number} blockIndex The index of the block.
*/
/**
* Get the drop target position from a given drop point and the orientation.
*
* @param {WPBlockData[]} blocksData The block data list.
* @param {WPPoint} position The position of the item being dragged.
* @param {WPBlockListOrientation} orientation The orientation of the block list.
* @param {Object} options Additional options.
* @return {[number, WPDropOperation]} The drop target position.
*/
function getDropTargetPosition(blocksData, position, orientation = 'vertical', options = {}) {
const allowedEdges = orientation === 'horizontal' ? ['left', 'right'] : ['top', 'bottom'];
let nearestIndex = 0;
let insertPosition = 'before';
let minDistance = Infinity;
let targetBlockIndex = null;
let nearestSide = 'right';
const {
dropZoneElement,
parentBlockOrientation,
rootBlockIndex = 0
} = options;
// Allow before/after when dragging over the top/bottom edges of the drop zone.
if (dropZoneElement && parentBlockOrientation !== 'horizontal') {
const rect = dropZoneElement.getBoundingClientRect();
const [distance, edge] = getDistanceToNearestEdge(position, rect, ['top', 'bottom']);
// If dragging over the top or bottom of the drop zone, insert the block
// before or after the parent block. This only applies to blocks that use
// a drop zone element, typically container blocks such as Group or Cover.
if (rect.height > MINIMUM_HEIGHT_FOR_THRESHOLD && distance < THRESHOLD_DISTANCE) {
if (edge === 'top') {
return [rootBlockIndex, 'before'];
}
if (edge === 'bottom') {
return [rootBlockIndex + 1, 'after'];
}
}
}
const isRightToLeft = (0,external_wp_i18n_namespaceObject.isRTL)();
// Allow before/after when dragging over the left/right edges of the drop zone.
if (dropZoneElement && parentBlockOrientation === 'horizontal') {
const rect = dropZoneElement.getBoundingClientRect();
const [distance, edge] = getDistanceToNearestEdge(position, rect, ['left', 'right']);
// If dragging over the left or right of the drop zone, insert the block
// before or after the parent block. This only applies to blocks that use
// a drop zone element, typically container blocks such as Group.
if (rect.width > MINIMUM_WIDTH_FOR_THRESHOLD && distance < THRESHOLD_DISTANCE) {
if (isRightToLeft && edge === 'right' || !isRightToLeft && edge === 'left') {
return [rootBlockIndex, 'before'];
}
if (isRightToLeft && edge === 'left' || !isRightToLeft && edge === 'right') {
return [rootBlockIndex + 1, 'after'];
}
}
}
blocksData.forEach(({
isUnmodifiedDefaultBlock,
getBoundingClientRect,
blockIndex,
blockOrientation
}) => {
const rect = getBoundingClientRect();
let [distance, edge] = getDistanceToNearestEdge(position, rect, allowedEdges);
// If the the point is close to a side, prioritize that side.
const [sideDistance, sideEdge] = getDistanceToNearestEdge(position, rect, ['left', 'right']);
const isPointInsideRect = isPointContainedByRect(position, rect);
// Prioritize the element if the point is inside of an unmodified default block.
if (isUnmodifiedDefaultBlock && isPointInsideRect) {
distance = 0;
} else if (orientation === 'vertical' && blockOrientation !== 'horizontal' && (isPointInsideRect && sideDistance < THRESHOLD_DISTANCE || !isPointInsideRect && isPointWithinTopAndBottomBoundariesOfRect(position, rect))) {
/**
* This condition should only apply when the layout is vertical (otherwise there's
* no need to create a Row) and dropzones should only activate when the block is
* either within and close to the sides of the target block or on its outer sides.
*/
targetBlockIndex = blockIndex;
nearestSide = sideEdge;
}
if (distance < minDistance) {
// Where the dropped block will be inserted on the nearest block.
insertPosition = edge === 'bottom' || !isRightToLeft && edge === 'right' || isRightToLeft && edge === 'left' ? 'after' : 'before';
// Update the currently known best candidate.
minDistance = distance;
nearestIndex = blockIndex;
}
});
const adjacentIndex = nearestIndex + (insertPosition === 'after' ? 1 : -1);
const isNearestBlockUnmodifiedDefaultBlock = !!blocksData[nearestIndex]?.isUnmodifiedDefaultBlock;
const isAdjacentBlockUnmodifiedDefaultBlock = !!blocksData[adjacentIndex]?.isUnmodifiedDefaultBlock;
// If the target index is set then group with the block at that index.
if (targetBlockIndex !== null) {
return [targetBlockIndex, 'group', nearestSide];
}
// If both blocks are not unmodified default blocks then just insert between them.
if (!isNearestBlockUnmodifiedDefaultBlock && !isAdjacentBlockUnmodifiedDefaultBlock) {
// If the user is dropping to the trailing edge of the block
// add 1 to the index to represent dragging after.
const insertionIndex = insertPosition === 'after' ? nearestIndex + 1 : nearestIndex;
return [insertionIndex, 'insert'];
}
// Otherwise, replace the nearest unmodified default block.
return [isNearestBlockUnmodifiedDefaultBlock ? nearestIndex : adjacentIndex, 'replace'];
}
/**
* Check if the dragged blocks can be dropped on the target.
* @param {Function} getBlockType
* @param {Object[]} allowedBlocks
* @param {string[]} draggedBlockNames
* @param {string} targetBlockName
* @return {boolean} Whether the dragged blocks can be dropped on the target.
*/
function isDropTargetValid(getBlockType, allowedBlocks, draggedBlockNames, targetBlockName) {
// At root level allowedBlocks is undefined and all blocks are allowed.
// Otherwise, check if all dragged blocks are allowed.
let areBlocksAllowed = true;
if (allowedBlocks) {
const allowedBlockNames = allowedBlocks?.map(({
name
}) => name);
areBlocksAllowed = draggedBlockNames.every(name => allowedBlockNames?.includes(name));
}
// Work out if dragged blocks have an allowed parent and if so
// check target block matches the allowed parent.
const draggedBlockTypes = draggedBlockNames.map(name => getBlockType(name));
const targetMatchesDraggedBlockParents = draggedBlockTypes.every(block => {
const [allowedParentName] = block?.parent || [];
if (!allowedParentName) {
return true;
}
return allowedParentName === targetBlockName;
});
return areBlocksAllowed && targetMatchesDraggedBlockParents;
}
/**
* Checks if the given element is an insertion point.
*
* @param {EventTarget|null} targetToCheck - The element to check.
* @param {Document} ownerDocument - The owner document of the element.
* @return {boolean} True if the element is a insertion point, false otherwise.
*/
function isInsertionPoint(targetToCheck, ownerDocument) {
const {
defaultView
} = ownerDocument;
return !!(defaultView && targetToCheck instanceof defaultView.HTMLElement && targetToCheck.closest('[data-is-insertion-point]'));
}
/**
* @typedef {Object} WPBlockDropZoneConfig
* @property {?HTMLElement} dropZoneElement Optional element to be used as the drop zone.
* @property {string} rootClientId The root client id for the block list.
*/
/**
* A React hook that can be used to make a block list handle drag and drop.
*
* @param {WPBlockDropZoneConfig} dropZoneConfig configuration data for the drop zone.
*/
function useBlockDropZone({
dropZoneElement,
// An undefined value represents a top-level block. Default to an empty
// string for this so that `targetRootClientId` can be easily compared to
// values returned by the `getRootBlockClientId` selector, which also uses
// an empty string to represent top-level blocks.
rootClientId: targetRootClientId = '',
parentClientId: parentBlockClientId = '',
isDisabled = false
} = {}) {
const registry = (0,external_wp_data_namespaceObject.useRegistry)();
const [dropTarget, setDropTarget] = (0,external_wp_element_namespaceObject.useState)({
index: null,
operation: 'insert'
});
const {
getBlockType,
getBlockVariations,
getGroupingBlockName
} = (0,external_wp_data_namespaceObject.useSelect)(external_wp_blocks_namespaceObject.store);
const {
canInsertBlockType,
getBlockListSettings,
getBlocks,
getBlockIndex,
getDraggedBlockClientIds,
getBlockNamesByClientId,
getAllowedBlocks,
isDragging,
isGroupable,
isZoomOutMode,
getSectionRootClientId
} = unlock((0,external_wp_data_namespaceObject.useSelect)(store));
const {
showInsertionPoint,
hideInsertionPoint,
startDragging,
stopDragging
} = unlock((0,external_wp_data_namespaceObject.useDispatch)(store));
const onBlockDrop = useOnBlockDrop(dropTarget.operation === 'before' || dropTarget.operation === 'after' ? parentBlockClientId : targetRootClientId, dropTarget.index, {
operation: dropTarget.operation,
nearestSide: dropTarget.nearestSide
});
const throttled = (0,external_wp_compose_namespaceObject.useThrottle)((0,external_wp_element_namespaceObject.useCallback)((event, ownerDocument) => {
if (!isDragging()) {
// When dragging from the desktop, no drag start event is fired.
// So, ensure that the drag state is set when the user drags over a drop zone.
startDragging();
}
const allowedBlocks = getAllowedBlocks(targetRootClientId);
const targetBlockName = getBlockNamesByClientId([targetRootClientId])[0];
const draggedBlockNames = getBlockNamesByClientId(getDraggedBlockClientIds());
const isBlockDroppingAllowed = isDropTargetValid(getBlockType, allowedBlocks, draggedBlockNames, targetBlockName);
if (!isBlockDroppingAllowed) {
return;
}
const sectionRootClientId = getSectionRootClientId();
// In Zoom Out mode, if the target is not the section root provided by settings then
// do not allow dropping as the drop target is not within the root (that which is
// treated as "the content" by Zoom Out Mode).
if (isZoomOutMode() && sectionRootClientId !== targetRootClientId) {
return;
}
const blocks = getBlocks(targetRootClientId);
// The block list is empty, don't show the insertion point but still allow dropping.
if (blocks.length === 0) {
registry.batch(() => {
setDropTarget({
index: 0,
operation: 'insert'
});
showInsertionPoint(targetRootClientId, 0, {
operation: 'insert'
});
});
return;
}
const blocksData = blocks.map(block => {
const clientId = block.clientId;
return {
isUnmodifiedDefaultBlock: (0,external_wp_blocks_namespaceObject.isUnmodifiedDefaultBlock)(block),
getBoundingClientRect: () => ownerDocument.getElementById(`block-${clientId}`).getBoundingClientRect(),
blockIndex: getBlockIndex(clientId),
blockOrientation: getBlockListSettings(clientId)?.orientation
};
});
const dropTargetPosition = getDropTargetPosition(blocksData, {
x: event.clientX,
y: event.clientY
}, getBlockListSettings(targetRootClientId)?.orientation, {
dropZoneElement,
parentBlockClientId,
parentBlockOrientation: parentBlockClientId ? getBlockListSettings(parentBlockClientId)?.orientation : undefined,
rootBlockIndex: getBlockIndex(targetRootClientId)
});
const [targetIndex, operation, nearestSide] = dropTargetPosition;
if (isZoomOutMode() && operation !== 'insert') {
return;
}
if (operation === 'group') {
const targetBlock = blocks[targetIndex];
const areAllImages = [targetBlock.name, ...draggedBlockNames].every(name => name === 'core/image');
const canInsertGalleryBlock = canInsertBlockType('core/gallery', targetRootClientId);
const areGroupableBlocks = isGroupable([targetBlock.clientId, getDraggedBlockClientIds()]);
const groupBlockVariations = getBlockVariations(getGroupingBlockName(), 'block');
const canInsertRow = groupBlockVariations && groupBlockVariations.find(({
name
}) => name === 'group-row');
// If the dragged blocks and the target block are all images,
// check if it is creatable either a Row variation or a Gallery block.
if (areAllImages && !canInsertGalleryBlock && (!areGroupableBlocks || !canInsertRow)) {
return;
}
// If the dragged blocks and the target block are not all images,
// check if it is creatable a Row variation.
if (!areAllImages && (!areGroupableBlocks || !canInsertRow)) {
return;
}
}
registry.batch(() => {
setDropTarget({
index: targetIndex,
operation,
nearestSide
});
const insertionPointClientId = ['before', 'after'].includes(operation) ? parentBlockClientId : targetRootClientId;
showInsertionPoint(insertionPointClientId, targetIndex, {
operation,
nearestSide
});
});
}, [isDragging, getAllowedBlocks, targetRootClientId, getBlockNamesByClientId, getDraggedBlockClientIds, getBlockType, getSectionRootClientId, isZoomOutMode, getBlocks, getBlockListSettings, dropZoneElement, parentBlockClientId, getBlockIndex, registry, startDragging, showInsertionPoint, canInsertBlockType, isGroupable, getBlockVariations, getGroupingBlockName]), 200);
return (0,external_wp_compose_namespaceObject.__experimentalUseDropZone)({
dropZoneElement,
isDisabled,
onDrop: onBlockDrop,
onDragOver(event) {
// `currentTarget` is only available while the event is being
// handled, so get it now and pass it to the thottled function.
// https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
throttled(event, event.currentTarget.ownerDocument);
},
onDragLeave(event) {
const {
ownerDocument
} = event.currentTarget;
// If the drag event is leaving the drop zone and entering an insertion point,
// do not hide the insertion point as it is conceptually within the dropzone.
if (isInsertionPoint(event.relatedTarget, ownerDocument) || isInsertionPoint(event.target, ownerDocument)) {
return;
}
throttled.cancel();
hideInsertionPoint();
},
onDragEnd() {
throttled.cancel();
stopDragging();
hideInsertionPoint();
}
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inner-blocks/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const inner_blocks_EMPTY_OBJECT = {};
function BlockContext({
children,
clientId
}) {
const context = useBlockContext(clientId);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockContextProvider, {
value: context,
children: children
});
}
const BlockListItemsMemo = (0,external_wp_element_namespaceObject.memo)(BlockListItems);
/**
* InnerBlocks is a component which allows a single block to have multiple blocks
* as children. The UncontrolledInnerBlocks component is used whenever the inner
* blocks are not controlled by another entity. In other words, it is normally
* used for inner blocks in the post editor
*
* @param {Object} props The component props.
*/
function UncontrolledInnerBlocks(props) {
const {
clientId,
allowedBlocks,
prioritizedInserterBlocks,
defaultBlock,
directInsert,
__experimentalDefaultBlock,
__experimentalDirectInsert,
template,
templateLock,
wrapperRef,
templateInsertUpdatesSelection,
__experimentalCaptureToolbars: captureToolbars,
__experimentalAppenderTagName,
renderAppender,
orientation,
placeholder,
layout,
name,
blockType,
parentLock,
defaultLayout
} = props;
useNestedSettingsUpdate(clientId, parentLock, allowedBlocks, prioritizedInserterBlocks, defaultBlock, directInsert, __experimentalDefaultBlock, __experimentalDirectInsert, templateLock, captureToolbars, orientation, layout);
useInnerBlockTemplateSync(clientId, template, templateLock, templateInsertUpdatesSelection);
const defaultLayoutBlockSupport = (0,external_wp_blocks_namespaceObject.getBlockSupport)(name, 'layout') || (0,external_wp_blocks_namespaceObject.getBlockSupport)(name, '__experimentalLayout') || inner_blocks_EMPTY_OBJECT;
const {
allowSizingOnChildren = false
} = defaultLayoutBlockSupport;
const usedLayout = layout || defaultLayoutBlockSupport;
const memoedLayout = (0,external_wp_element_namespaceObject.useMemo)(() => ({
// Default layout will know about any content/wide size defined by the theme.
...defaultLayout,
...usedLayout,
...(allowSizingOnChildren && {
allowSizingOnChildren: true
})
}), [defaultLayout, usedLayout, allowSizingOnChildren]);
// For controlled inner blocks, we don't want a change in blocks to
// re-render the blocks list.
const items = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockListItemsMemo, {
rootClientId: clientId,
renderAppender: renderAppender,
__experimentalAppenderTagName: __experimentalAppenderTagName,
layout: memoedLayout,
wrapperRef: wrapperRef,
placeholder: placeholder
});
if (!blockType?.providesContext || Object.keys(blockType.providesContext).length === 0) {
return items;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockContext, {
clientId: clientId,
children: items
});
}
/**
* The controlled inner blocks component wraps the uncontrolled inner blocks
* component with the blockSync hook. This keeps the innerBlocks of the block in
* the block-editor store in sync with the blocks of the controlling entity. An
* example of an inner block controller is a template part block, which provides
* its own blocks from the template part entity data source.
*
* @param {Object} props The component props.
*/
function ControlledInnerBlocks(props) {
useBlockSync(props);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(UncontrolledInnerBlocks, {
...props
});
}
const ForwardedInnerBlocks = (0,external_wp_element_namespaceObject.forwardRef)((props, ref) => {
const innerBlocksProps = useInnerBlocksProps({
ref
}, props);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-inner-blocks",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
...innerBlocksProps
})
});
});
/**
* This hook is used to lightly mark an element as an inner blocks wrapper
* element. Call this hook and pass the returned props to the element to mark as
* an inner blocks 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} props Optional. Props to pass to the element. Must contain
* the ref if one is defined.
* @param {Object} options Optional. Inner blocks options.
*
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md
*/
function useInnerBlocksProps(props = {}, options = {}) {
const {
__unstableDisableLayoutClassNames,
__unstableDisableDropZone,
dropZoneElement
} = options;
const {
clientId,
layout = null,
__unstableLayoutClassNames: layoutClassNames = ''
} = useBlockEditContext();
const selected = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockName,
isBlockSelected,
hasSelectedInnerBlock,
__unstableGetEditorMode,
getTemplateLock,
getBlockRootClientId,
getBlockEditingMode,
getBlockSettings,
isDragging,
getSectionRootClientId,
isZoomOutMode: isZoomOut
} = unlock(select(store));
if (!clientId) {
const sectionRootClientId = getSectionRootClientId();
// Disable the root drop zone when zoomed out and the section root client id
// is not the root block list (represented by an empty string).
// This avoids drag handling bugs caused by having two block lists acting as
// drop zones - the actual 'root' block list and the section root.
return {
isDropZoneDisabled: isZoomOut() && sectionRootClientId !== ''
};
}
const {
hasBlockSupport,
getBlockType
} = select(external_wp_blocks_namespaceObject.store);
const blockName = getBlockName(clientId);
const enableClickThrough = __unstableGetEditorMode() === 'navigation';
const blockEditingMode = getBlockEditingMode(clientId);
const parentClientId = getBlockRootClientId(clientId);
const [defaultLayout] = getBlockSettings(clientId, 'layout');
let _isDropZoneDisabled = blockEditingMode === 'disabled';
if (__unstableGetEditorMode() === 'zoom-out') {
// In zoom out mode, we want to disable the drop zone for the sections.
// The inner blocks belonging to the section drop zone is
// already disabled by the blocks themselves being disabled.
const sectionRootClientId = getSectionRootClientId();
_isDropZoneDisabled = clientId !== sectionRootClientId;
}
return {
__experimentalCaptureToolbars: hasBlockSupport(blockName, '__experimentalExposeControlsToChildren', false),
hasOverlay: blockName !== 'core/template' && !isBlockSelected(clientId) && !hasSelectedInnerBlock(clientId, true) && enableClickThrough && !isDragging(),
name: blockName,
blockType: getBlockType(blockName),
parentLock: getTemplateLock(parentClientId),
parentClientId,
isDropZoneDisabled: _isDropZoneDisabled,
defaultLayout
};
}, [clientId]);
const {
__experimentalCaptureToolbars,
hasOverlay,
name,
blockType,
parentLock,
parentClientId,
isDropZoneDisabled,
defaultLayout
} = selected;
const blockDropZoneRef = useBlockDropZone({
dropZoneElement,
rootClientId: clientId,
parentClientId
});
const ref = (0,external_wp_compose_namespaceObject.useMergeRefs)([props.ref, __unstableDisableDropZone || isDropZoneDisabled || layout?.isManualPlacement && window.__experimentalEnableGridInteractivity ? null : blockDropZoneRef]);
const innerBlocksProps = {
__experimentalCaptureToolbars,
layout,
name,
blockType,
parentLock,
defaultLayout,
...options
};
const InnerBlocks = innerBlocksProps.value && innerBlocksProps.onChange ? ControlledInnerBlocks : UncontrolledInnerBlocks;
return {
...props,
ref,
className: dist_clsx(props.className, 'block-editor-block-list__layout', __unstableDisableLayoutClassNames ? '' : layoutClassNames, {
'has-overlay': hasOverlay
}),
children: clientId ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InnerBlocks, {
...innerBlocksProps,
clientId: clientId
}) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockListItems, {
...options
})
};
}
useInnerBlocksProps.save = external_wp_blocks_namespaceObject.__unstableGetInnerBlocksProps;
// Expose default appender placeholders as components.
ForwardedInnerBlocks.DefaultBlockAppender = default_block_appender_DefaultBlockAppender;
ForwardedInnerBlocks.ButtonBlockAppender = ButtonBlockAppender;
ForwardedInnerBlocks.Content = () => useInnerBlocksProps.save().children;
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md
*/
/* harmony default export */ const inner_blocks = (ForwardedInnerBlocks);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/observe-typing/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Set of key codes upon which typing is to be initiated on a keydown event.
*
* @type {Set<number>}
*/
const KEY_DOWN_ELIGIBLE_KEY_CODES = new Set([external_wp_keycodes_namespaceObject.UP, external_wp_keycodes_namespaceObject.RIGHT, external_wp_keycodes_namespaceObject.DOWN, external_wp_keycodes_namespaceObject.LEFT, external_wp_keycodes_namespaceObject.ENTER, external_wp_keycodes_namespaceObject.BACKSPACE]);
/**
* Returns true if a given keydown event can be inferred as intent to start
* typing, or false otherwise. A keydown is considered eligible if it is a
* text navigation without shift active.
*
* @param {KeyboardEvent} event Keydown event to test.
*
* @return {boolean} Whether event is eligible to start typing.
*/
function isKeyDownEligibleForStartTyping(event) {
const {
keyCode,
shiftKey
} = event;
return !shiftKey && KEY_DOWN_ELIGIBLE_KEY_CODES.has(keyCode);
}
/**
* Removes the `isTyping` flag when the mouse moves in the document of the given
* element.
*/
function useMouseMoveTypingReset() {
const isTyping = (0,external_wp_data_namespaceObject.useSelect)(select => select(store).isTyping(), []);
const {
stopTyping
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
return (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
if (!isTyping) {
return;
}
const {
ownerDocument
} = node;
let lastClientX;
let lastClientY;
/**
* On mouse move, unset typing flag if user has moved cursor.
*
* @param {MouseEvent} event Mousemove event.
*/
function stopTypingOnMouseMove(event) {
const {
clientX,
clientY
} = event;
// We need to check that the mouse really moved because Safari
// triggers mousemove events when shift or ctrl are pressed.
if (lastClientX && lastClientY && (lastClientX !== clientX || lastClientY !== clientY)) {
stopTyping();
}
lastClientX = clientX;
lastClientY = clientY;
}
ownerDocument.addEventListener('mousemove', stopTypingOnMouseMove);
return () => {
ownerDocument.removeEventListener('mousemove', stopTypingOnMouseMove);
};
}, [isTyping, stopTyping]);
}
/**
* Sets and removes the `isTyping` flag based on user actions:
*
* - Sets the flag if the user types within the given element.
* - Removes the flag when the user selects some text, focusses a non-text
* field, presses ESC or TAB, or moves the mouse in the document.
*/
function useTypingObserver() {
const {
isTyping
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
isTyping: _isTyping
} = select(store);
return {
isTyping: _isTyping()
};
}, []);
const {
startTyping,
stopTyping
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const ref1 = useMouseMoveTypingReset();
const ref2 = (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
const {
ownerDocument
} = node;
const {
defaultView
} = ownerDocument;
const selection = defaultView.getSelection();
// Listeners to stop typing should only be added when typing.
// Listeners to start typing should only be added when not typing.
if (isTyping) {
let timerId;
/**
* Stops typing when focus transitions to a non-text field element.
*
* @param {FocusEvent} event Focus event.
*/
function stopTypingOnNonTextField(event) {
const {
target
} = event;
// Since focus to a non-text field via arrow key will trigger
// before the keydown event, wait until after current stack
// before evaluating whether typing is to be stopped. Otherwise,
// typing will re-start.
timerId = defaultView.setTimeout(() => {
if (!(0,external_wp_dom_namespaceObject.isTextField)(target)) {
stopTyping();
}
});
}
/**
* Unsets typing flag if user presses Escape while typing flag is
* active.
*
* @param {KeyboardEvent} event Keypress or keydown event to
* interpret.
*/
function stopTypingOnEscapeKey(event) {
const {
keyCode
} = event;
if (keyCode === external_wp_keycodes_namespaceObject.ESCAPE || keyCode === external_wp_keycodes_namespaceObject.TAB) {
stopTyping();
}
}
/**
* On selection change, unset typing flag if user has made an
* uncollapsed (shift) selection.
*/
function stopTypingOnSelectionUncollapse() {
if (!selection.isCollapsed) {
stopTyping();
}
}
node.addEventListener('focus', stopTypingOnNonTextField);
node.addEventListener('keydown', stopTypingOnEscapeKey);
ownerDocument.addEventListener('selectionchange', stopTypingOnSelectionUncollapse);
return () => {
defaultView.clearTimeout(timerId);
node.removeEventListener('focus', stopTypingOnNonTextField);
node.removeEventListener('keydown', stopTypingOnEscapeKey);
ownerDocument.removeEventListener('selectionchange', stopTypingOnSelectionUncollapse);
};
}
/**
* Handles a keypress or keydown event to infer intention to start
* typing.
*
* @param {KeyboardEvent} event Keypress or keydown event to interpret.
*/
function startTypingInTextField(event) {
const {
type,
target
} = event;
// Abort early if already typing, or key press is incurred outside a
// text field (e.g. arrow-ing through toolbar buttons).
// Ignore typing if outside the current DOM container
if (!(0,external_wp_dom_namespaceObject.isTextField)(target) || !node.contains(target)) {
return;
}
// Special-case keydown because certain keys do not emit a keypress
// event. Conversely avoid keydown as the canonical event since
// there are many keydown which are explicitly not targeted for
// typing.
if (type === 'keydown' && !isKeyDownEligibleForStartTyping(event)) {
return;
}
startTyping();
}
node.addEventListener('keypress', startTypingInTextField);
node.addEventListener('keydown', startTypingInTextField);
return () => {
node.removeEventListener('keypress', startTypingInTextField);
node.removeEventListener('keydown', startTypingInTextField);
};
}, [isTyping, startTyping, stopTyping]);
return (0,external_wp_compose_namespaceObject.useMergeRefs)([ref1, ref2]);
}
function ObserveTyping({
children
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
ref: useTypingObserver(),
children: children
});
}
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/observe-typing/README.md
*/
/* harmony default export */ const observe_typing = (ObserveTyping);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-list/zoom-out-separator.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function ZoomOutSeparator({
clientId,
rootClientId = '',
position = 'top'
}) {
const [isDraggedOver, setIsDraggedOver] = (0,external_wp_element_namespaceObject.useState)(false);
const {
sectionRootClientId,
sectionClientIds,
blockInsertionPoint,
blockInsertionPointVisible
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockInsertionPoint,
getBlockOrder,
isBlockInsertionPointVisible,
getSectionRootClientId
} = unlock(select(store));
const root = getSectionRootClientId();
const sectionRootClientIds = getBlockOrder(root);
return {
sectionRootClientId: root,
sectionClientIds: sectionRootClientIds,
blockOrder: getBlockOrder(root),
blockInsertionPoint: getBlockInsertionPoint(),
blockInsertionPointVisible: isBlockInsertionPointVisible()
};
}, []);
const isReducedMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)();
if (!clientId) {
return;
}
let isVisible = false;
const isSectionBlock = rootClientId === sectionRootClientId && sectionClientIds && sectionClientIds.includes(clientId);
if (!isSectionBlock) {
return null;
}
if (position === 'top') {
isVisible = blockInsertionPointVisible && blockInsertionPoint.index === 0 && clientId === sectionClientIds[blockInsertionPoint.index];
}
if (position === 'bottom') {
isVisible = blockInsertionPointVisible && clientId === sectionClientIds[blockInsertionPoint.index - 1];
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__unstableAnimatePresence, {
children: isVisible && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__unstableMotion.div, {
initial: {
height: 0
},
animate: {
// Use a height equal to that of the zoom out frame size.
height: 'calc(1.5 * var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale)'
},
exit: {
height: 0
},
transition: {
type: 'tween',
duration: isReducedMotion ? 0 : 0.2,
ease: [0.6, 0, 0.4, 1]
},
className: dist_clsx('block-editor-block-list__zoom-out-separator', {
'is-dragged-over': isDraggedOver
}),
"data-is-insertion-point": "true",
onDragOver: () => setIsDraggedOver(true),
onDragLeave: () => setIsDraggedOver(false),
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__unstableMotion.div, {
initial: {
opacity: 0
},
animate: {
opacity: 1
},
exit: {
opacity: 0,
transition: {
delay: -0.125
}
},
transition: {
ease: 'linear',
duration: 0.1,
delay: 0.125
},
children: (0,external_wp_i18n_namespaceObject.__)('Drop pattern.')
})
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-list/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const block_list_IntersectionObserver = (0,external_wp_element_namespaceObject.createContext)();
const pendingBlockVisibilityUpdatesPerRegistry = new WeakMap();
function Root({
className,
...settings
}) {
const isLargeViewport = (0,external_wp_compose_namespaceObject.useViewportMatch)('medium');
const {
isOutlineMode,
isFocusMode,
editorMode,
temporarilyEditingAsBlocks
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getSettings,
__unstableGetEditorMode,
getTemporarilyEditingAsBlocks,
isTyping
} = unlock(select(store));
const {
outlineMode,
focusMode
} = getSettings();
return {
isOutlineMode: outlineMode && !isTyping(),
isFocusMode: focusMode,
editorMode: __unstableGetEditorMode(),
temporarilyEditingAsBlocks: getTemporarilyEditingAsBlocks()
};
}, []);
const registry = (0,external_wp_data_namespaceObject.useRegistry)();
const {
setBlockVisibility
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const delayedBlockVisibilityUpdates = (0,external_wp_compose_namespaceObject.useDebounce)((0,external_wp_element_namespaceObject.useCallback)(() => {
const updates = {};
pendingBlockVisibilityUpdatesPerRegistry.get(registry).forEach(([id, isIntersecting]) => {
updates[id] = isIntersecting;
});
setBlockVisibility(updates);
}, [registry]), 300, {
trailing: true
});
const intersectionObserver = (0,external_wp_element_namespaceObject.useMemo)(() => {
const {
IntersectionObserver: Observer
} = window;
if (!Observer) {
return;
}
return new Observer(entries => {
if (!pendingBlockVisibilityUpdatesPerRegistry.get(registry)) {
pendingBlockVisibilityUpdatesPerRegistry.set(registry, []);
}
for (const entry of entries) {
const clientId = entry.target.getAttribute('data-block');
pendingBlockVisibilityUpdatesPerRegistry.get(registry).push([clientId, entry.isIntersecting]);
}
delayedBlockVisibilityUpdates();
});
}, []);
const innerBlocksProps = useInnerBlocksProps({
ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([useBlockSelectionClearer(), useInBetweenInserter(), useTypingObserver()]),
className: dist_clsx('is-root-container', className, {
'is-outline-mode': isOutlineMode,
'is-focus-mode': isFocusMode && isLargeViewport,
'is-navigate-mode': editorMode === 'navigation'
})
}, settings);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(block_list_IntersectionObserver.Provider, {
value: intersectionObserver,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
...innerBlocksProps
}), !!temporarilyEditingAsBlocks && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StopEditingAsBlocksOnOutsideSelect, {
clientId: temporarilyEditingAsBlocks
})]
});
}
function StopEditingAsBlocksOnOutsideSelect({
clientId
}) {
const {
stopEditingAsBlocks
} = unlock((0,external_wp_data_namespaceObject.useDispatch)(store));
const isBlockOrDescendantSelected = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
isBlockSelected,
hasSelectedInnerBlock
} = select(store);
return isBlockSelected(clientId) || hasSelectedInnerBlock(clientId, true);
}, [clientId]);
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (!isBlockOrDescendantSelected) {
stopEditingAsBlocks(clientId);
}
}, [isBlockOrDescendantSelected, clientId, stopEditingAsBlocks]);
return null;
}
function BlockList(settings) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Provider, {
value: DEFAULT_BLOCK_EDIT_CONTEXT,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Root, {
...settings
})
});
}
const block_list_EMPTY_ARRAY = [];
const block_list_EMPTY_SET = new Set();
function Items({
placeholder,
rootClientId,
renderAppender: CustomAppender,
__experimentalAppenderTagName,
layout = defaultLayout
}) {
// Avoid passing CustomAppender to useSelect because it could be a new
// function on every render.
const hasAppender = CustomAppender !== false;
const hasCustomAppender = !!CustomAppender;
const {
order,
isZoomOut,
selectedBlocks,
visibleBlocks,
shouldRenderAppender
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getSettings,
getBlockOrder,
getSelectedBlockClientId,
getSelectedBlockClientIds,
__unstableGetVisibleBlocks,
getTemplateLock,
getBlockEditingMode,
__unstableGetEditorMode
} = select(store);
const _order = getBlockOrder(rootClientId);
if (getSettings().__unstableIsPreviewMode) {
return {
order: _order,
selectedBlocks: block_list_EMPTY_ARRAY,
visibleBlocks: block_list_EMPTY_SET
};
}
const selectedBlockClientId = getSelectedBlockClientId();
return {
order: _order,
selectedBlocks: getSelectedBlockClientIds(),
visibleBlocks: __unstableGetVisibleBlocks(),
isZoomOut: __unstableGetEditorMode() === 'zoom-out',
shouldRenderAppender: hasAppender && __unstableGetEditorMode() !== 'zoom-out' && (hasCustomAppender ? !getTemplateLock(rootClientId) && getBlockEditingMode(rootClientId) !== 'disabled' : rootClientId === selectedBlockClientId || !rootClientId && !selectedBlockClientId && !_order.length)
};
}, [rootClientId, hasAppender, hasCustomAppender]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(LayoutProvider, {
value: layout,
children: [order.map(clientId => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_data_namespaceObject.AsyncModeProvider, {
value:
// Only provide data asynchronously if the block is
// not visible and not selected.
!visibleBlocks.has(clientId) && !selectedBlocks.includes(clientId),
children: [isZoomOut && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ZoomOutSeparator, {
clientId: clientId,
rootClientId: rootClientId,
position: "top"
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block, {
rootClientId: rootClientId,
clientId: clientId
}), isZoomOut && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ZoomOutSeparator, {
clientId: clientId,
rootClientId: rootClientId,
position: "bottom"
})]
}, clientId)), order.length < 1 && placeholder, shouldRenderAppender && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockListAppender, {
tagName: __experimentalAppenderTagName,
rootClientId: rootClientId,
CustomAppender: CustomAppender
})]
});
}
function BlockListItems(props) {
// This component needs to always be synchronous as it's the one changing
// the async mode depending on the block selection.
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_data_namespaceObject.AsyncModeProvider, {
value: false,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Items, {
...props
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/writing-flow/use-multi-selection.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function selector(select) {
const {
isMultiSelecting,
getMultiSelectedBlockClientIds,
hasMultiSelection,
getSelectedBlockClientId,
getSelectedBlocksInitialCaretPosition,
__unstableIsFullySelected
} = select(store);
return {
isMultiSelecting: isMultiSelecting(),
multiSelectedBlockClientIds: getMultiSelectedBlockClientIds(),
hasMultiSelection: hasMultiSelection(),
selectedBlockClientId: getSelectedBlockClientId(),
initialPosition: getSelectedBlocksInitialCaretPosition(),
isFullSelection: __unstableIsFullySelected()
};
}
function useMultiSelection() {
const {
initialPosition,
isMultiSelecting,
multiSelectedBlockClientIds,
hasMultiSelection,
selectedBlockClientId,
isFullSelection
} = (0,external_wp_data_namespaceObject.useSelect)(selector, []);
/**
* When the component updates, and there is multi selection, we need to
* select the entire block contents.
*/
return (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
const {
ownerDocument
} = node;
const {
defaultView
} = ownerDocument;
// Allow initialPosition to bypass focus behavior. This is useful
// for the list view or other areas where we don't want to transfer
// focus to the editor canvas.
if (initialPosition === undefined || initialPosition === null) {
return;
}
if (!hasMultiSelection || isMultiSelecting) {
return;
}
const {
length
} = multiSelectedBlockClientIds;
if (length < 2) {
return;
}
if (!isFullSelection) {
return;
}
// Allow cross contentEditable selection by temporarily making
// all content editable. We can't rely on using the store and
// React because re-rending happens too slowly. We need to be
// able to select across instances immediately.
node.contentEditable = true;
// For some browsers, like Safari, it is important that focus
// happens BEFORE selection removal.
node.focus();
defaultView.getSelection().removeAllRanges();
}, [hasMultiSelection, isMultiSelecting, multiSelectedBlockClientIds, selectedBlockClientId, initialPosition, isFullSelection]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/writing-flow/use-tab-nav.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function useTabNav() {
const container = (0,external_wp_element_namespaceObject.useRef)();
const focusCaptureBeforeRef = (0,external_wp_element_namespaceObject.useRef)();
const focusCaptureAfterRef = (0,external_wp_element_namespaceObject.useRef)();
const {
hasMultiSelection,
getSelectedBlockClientId,
getBlockCount
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
setNavigationMode,
setLastFocus
} = unlock((0,external_wp_data_namespaceObject.useDispatch)(store));
const isNavigationMode = (0,external_wp_data_namespaceObject.useSelect)(select => select(store).isNavigationMode(), []);
const {
getLastFocus
} = unlock((0,external_wp_data_namespaceObject.useSelect)(store));
// Don't allow tabbing to this element in Navigation mode.
const focusCaptureTabIndex = !isNavigationMode ? '0' : undefined;
// Reference that holds the a flag for enabling or disabling
// capturing on the focus capture elements.
const noCaptureRef = (0,external_wp_element_namespaceObject.useRef)();
function onFocusCapture(event) {
// Do not capture incoming focus if set by us in WritingFlow.
if (noCaptureRef.current) {
noCaptureRef.current = null;
} else if (hasMultiSelection()) {
container.current.focus();
} else if (getSelectedBlockClientId()) {
if (getLastFocus()?.current) {
getLastFocus().current.focus();
} else {
// Handles when the last focus has not been set yet, or has been cleared by new blocks being added via the inserter.
container.current.querySelector(`[data-block="${getSelectedBlockClientId()}"]`).focus();
}
} else {
setNavigationMode(true);
const canvasElement = container.current.ownerDocument === event.target.ownerDocument ? container.current : container.current.ownerDocument.defaultView.frameElement;
const isBefore =
// eslint-disable-next-line no-bitwise
event.target.compareDocumentPosition(canvasElement) & event.target.DOCUMENT_POSITION_FOLLOWING;
const tabbables = external_wp_dom_namespaceObject.focus.tabbable.find(container.current);
if (tabbables.length) {
const next = isBefore ? tabbables[0] : tabbables[tabbables.length - 1];
next.focus();
}
}
}
const before = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
ref: focusCaptureBeforeRef,
tabIndex: focusCaptureTabIndex,
onFocus: onFocusCapture
});
const after = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
ref: focusCaptureAfterRef,
tabIndex: focusCaptureTabIndex,
onFocus: onFocusCapture
});
const ref = (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
function onKeyDown(event) {
if (event.defaultPrevented) {
return;
}
if (event.keyCode === external_wp_keycodes_namespaceObject.ESCAPE && !hasMultiSelection()) {
event.preventDefault();
setNavigationMode(true);
return;
}
// In Edit mode, Tab should focus the first tabbable element after
// the content, which is normally the sidebar (with block controls)
// and Shift+Tab should focus the first tabbable element before the
// content, which is normally the block toolbar.
// Arrow keys can be used, and Tab and arrow keys can be used in
// Navigation mode (press Esc), to navigate through blocks.
if (event.keyCode !== external_wp_keycodes_namespaceObject.TAB) {
return;
}
const isShift = event.shiftKey;
const direction = isShift ? 'findPrevious' : 'findNext';
if (!hasMultiSelection() && !getSelectedBlockClientId()) {
// Preserve the behaviour of entering navigation mode when
// tabbing into the content without a block selection.
// `onFocusCapture` already did this previously, but we need to
// do it again here because after clearing block selection,
// focus land on the writing flow container and pressing Tab
// will no longer send focus through the focus capture element.
if (event.target === node) {
setNavigationMode(true);
}
return;
}
const nextTabbable = external_wp_dom_namespaceObject.focus.tabbable[direction](event.target);
// We want to constrain the tabbing to the block and its child blocks.
// If the preceding form element is within a different block,
// such as two sibling image blocks in the placeholder state,
// we want shift + tab from the first form element to move to the image
// block toolbar and not the previous image block's form element.
const currentBlock = event.target.closest('[data-block]');
const isElementPartOfSelectedBlock = currentBlock && nextTabbable && (isInSameBlock(currentBlock, nextTabbable) || isInsideRootBlock(currentBlock, nextTabbable));
// Allow tabbing from the block wrapper to a form element,
// and between form elements rendered in a block and its child blocks,
// such as inside a placeholder. Form elements are generally
// meant to be UI rather than part of the content. Ideally
// these are not rendered in the content and perhaps in the
// future they can be rendered in an iframe or shadow DOM.
if ((0,external_wp_dom_namespaceObject.isFormElement)(nextTabbable) && isElementPartOfSelectedBlock) {
return;
}
const next = isShift ? focusCaptureBeforeRef : focusCaptureAfterRef;
// Disable focus capturing on the focus capture element, so it
// doesn't refocus this block and so it allows default behaviour
// (moving focus to the next tabbable element).
noCaptureRef.current = true;
// Focusing the focus capture element, which is located above and
// below the editor, should not scroll the page all the way up or
// down.
next.current.focus({
preventScroll: true
});
}
function onFocusOut(event) {
setLastFocus({
...getLastFocus(),
current: event.target
});
const {
ownerDocument
} = node;
// If focus disappears due to there being no blocks, move focus to
// the writing flow wrapper.
if (!event.relatedTarget && ownerDocument.activeElement === ownerDocument.body && getBlockCount() === 0) {
node.focus();
}
}
// When tabbing back to an element in block list, this event handler prevents scrolling if the
// focus capture divs (before/after) are outside of the viewport. (For example shift+tab back to a paragraph
// when focus is on a sidebar element. This prevents the scrollable writing area from jumping either to the
// top or bottom of the document.
//
// Note that it isn't possible to disable scrolling in the onFocus event. We need to intercept this
// earlier in the keypress handler, and call focus( { preventScroll: true } ) instead.
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus#parameters
function preventScrollOnTab(event) {
if (event.keyCode !== external_wp_keycodes_namespaceObject.TAB) {
return;
}
if (event.target?.getAttribute('role') === 'region') {
return;
}
if (container.current === event.target) {
return;
}
const isShift = event.shiftKey;
const direction = isShift ? 'findPrevious' : 'findNext';
const target = external_wp_dom_namespaceObject.focus.tabbable[direction](event.target);
// Only do something when the next tabbable is a focus capture div (before/after)
if (target === focusCaptureBeforeRef.current || target === focusCaptureAfterRef.current) {
event.preventDefault();
target.focus({
preventScroll: true
});
}
}
const {
ownerDocument
} = node;
const {
defaultView
} = ownerDocument;
defaultView.addEventListener('keydown', preventScrollOnTab);
node.addEventListener('keydown', onKeyDown);
node.addEventListener('focusout', onFocusOut);
return () => {
defaultView.removeEventListener('keydown', preventScrollOnTab);
node.removeEventListener('keydown', onKeyDown);
node.removeEventListener('focusout', onFocusOut);
};
}, []);
const mergedRefs = (0,external_wp_compose_namespaceObject.useMergeRefs)([container, ref]);
return [before, mergedRefs, after];
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/writing-flow/use-arrow-nav.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Returns true if the element should consider edge navigation upon a keyboard
* event of the given directional key code, or false otherwise.
*
* @param {Element} element HTML element to test.
* @param {number} keyCode KeyboardEvent keyCode to test.
* @param {boolean} hasModifier Whether a modifier is pressed.
*
* @return {boolean} Whether element should consider edge navigation.
*/
function isNavigationCandidate(element, keyCode, hasModifier) {
const isVertical = keyCode === external_wp_keycodes_namespaceObject.UP || keyCode === external_wp_keycodes_namespaceObject.DOWN;
const {
tagName
} = element;
const elementType = element.getAttribute('type');
// Native inputs should not navigate vertically, unless they are simple types that don't need up/down arrow keys.
if (isVertical && !hasModifier) {
if (tagName === 'INPUT') {
const verticalInputTypes = ['date', 'datetime-local', 'month', 'number', 'range', 'time', 'week'];
return !verticalInputTypes.includes(elementType);
}
return true;
}
// Native inputs should not navigate horizontally, unless they are simple types that don't need left/right arrow keys.
if (tagName === 'INPUT') {
const simpleInputTypes = ['button', 'checkbox', 'number', 'color', 'file', 'image', 'radio', 'reset', 'submit'];
return simpleInputTypes.includes(elementType);
}
// Native textareas should not navigate horizontally.
return tagName !== 'TEXTAREA';
}
/**
* Returns the optimal tab target from the given focused element in the desired
* direction. A preference is made toward text fields, falling back to the block
* focus stop if no other candidates exist for the block.
*
* @param {Element} target Currently focused text field.
* @param {boolean} isReverse True if considering as the first field.
* @param {Element} containerElement Element containing all blocks.
* @param {boolean} onlyVertical Whether to only consider tabbable elements
* that are visually above or under the
* target.
*
* @return {?Element} Optimal tab target, if one exists.
*/
function getClosestTabbable(target, isReverse, containerElement, onlyVertical) {
// Since the current focus target is not guaranteed to be a text field, find
// all focusables. Tabbability is considered later.
let focusableNodes = external_wp_dom_namespaceObject.focus.focusable.find(containerElement);
if (isReverse) {
focusableNodes.reverse();
}
// Consider as candidates those focusables after the current target. It's
// assumed this can only be reached if the target is focusable (on its
// keydown event), so no need to verify it exists in the set.
focusableNodes = focusableNodes.slice(focusableNodes.indexOf(target) + 1);
let targetRect;
if (onlyVertical) {
targetRect = target.getBoundingClientRect();
}
function isTabCandidate(node) {
if (node.closest('[inert]')) {
return;
}
// Skip if there's only one child that is content editable (and thus a
// better candidate).
if (node.children.length === 1 && isInSameBlock(node, node.firstElementChild) && node.firstElementChild.getAttribute('contenteditable') === 'true') {
return;
}
// Not a candidate if the node is not tabbable.
if (!external_wp_dom_namespaceObject.focus.tabbable.isTabbableIndex(node)) {
return false;
}
// Skip focusable elements such as links within content editable nodes.
if (node.isContentEditable && node.contentEditable !== 'true') {
return false;
}
if (onlyVertical) {
const nodeRect = node.getBoundingClientRect();
if (nodeRect.left >= targetRect.right || nodeRect.right <= targetRect.left) {
return false;
}
}
return true;
}
return focusableNodes.find(isTabCandidate);
}
function useArrowNav() {
const {
getMultiSelectedBlocksStartClientId,
getMultiSelectedBlocksEndClientId,
getSettings,
hasMultiSelection,
__unstableIsFullySelected
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
selectBlock
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
return (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
// Here a DOMRect is stored while moving the caret vertically so
// vertical position of the start position can be restored. This is to
// recreate browser behaviour across blocks.
let verticalRect;
function onMouseDown() {
verticalRect = null;
}
function isClosestTabbableABlock(target, isReverse) {
const closestTabbable = getClosestTabbable(target, isReverse, node);
return closestTabbable && getBlockClientId(closestTabbable);
}
function onKeyDown(event) {
// Abort if navigation has already been handled (e.g. RichText
// inline boundaries).
if (event.defaultPrevented) {
return;
}
const {
keyCode,
target,
shiftKey,
ctrlKey,
altKey,
metaKey
} = event;
const isUp = keyCode === external_wp_keycodes_namespaceObject.UP;
const isDown = keyCode === external_wp_keycodes_namespaceObject.DOWN;
const isLeft = keyCode === external_wp_keycodes_namespaceObject.LEFT;
const isRight = keyCode === external_wp_keycodes_namespaceObject.RIGHT;
const isReverse = isUp || isLeft;
const isHorizontal = isLeft || isRight;
const isVertical = isUp || isDown;
const isNav = isHorizontal || isVertical;
const hasModifier = shiftKey || ctrlKey || altKey || metaKey;
const isNavEdge = isVertical ? external_wp_dom_namespaceObject.isVerticalEdge : external_wp_dom_namespaceObject.isHorizontalEdge;
const {
ownerDocument
} = node;
const {
defaultView
} = ownerDocument;
if (!isNav) {
return;
}
// If there is a multi-selection, the arrow keys should collapse the
// selection to the start or end of the selection.
if (hasMultiSelection()) {
if (shiftKey) {
return;
}
// Only handle if we have a full selection (not a native partial
// selection).
if (!__unstableIsFullySelected()) {
return;
}
event.preventDefault();
if (isReverse) {
selectBlock(getMultiSelectedBlocksStartClientId());
} else {
selectBlock(getMultiSelectedBlocksEndClientId(), -1);
}
return;
}
// Abort if our current target is not a candidate for navigation
// (e.g. preserve native input behaviors).
if (!isNavigationCandidate(target, keyCode, hasModifier)) {
return;
}
// When presing any key other than up or down, the initial vertical
// position must ALWAYS be reset. The vertical position is saved so
// it can be restored as well as possible on sebsequent vertical
// arrow key presses. It may not always be possible to restore the
// exact same position (such as at an empty line), so it wouldn't be
// good to compute the position right before any vertical arrow key
// press.
if (!isVertical) {
verticalRect = null;
} else if (!verticalRect) {
verticalRect = (0,external_wp_dom_namespaceObject.computeCaretRect)(defaultView);
}
// In the case of RTL scripts, right means previous and left means
// next, which is the exact reverse of LTR.
const isReverseDir = (0,external_wp_dom_namespaceObject.isRTL)(target) ? !isReverse : isReverse;
const {
keepCaretInsideBlock
} = getSettings();
if (shiftKey) {
if (isClosestTabbableABlock(target, isReverse) && isNavEdge(target, isReverse)) {
node.contentEditable = true;
// Firefox doesn't automatically move focus.
node.focus();
}
} else if (isVertical && (0,external_wp_dom_namespaceObject.isVerticalEdge)(target, isReverse) && (
// When Alt is pressed, only intercept if the caret is also at
// the horizontal edge.
altKey ? (0,external_wp_dom_namespaceObject.isHorizontalEdge)(target, isReverseDir) : true) && !keepCaretInsideBlock) {
const closestTabbable = getClosestTabbable(target, isReverse, node, true);
if (closestTabbable) {
(0,external_wp_dom_namespaceObject.placeCaretAtVerticalEdge)(closestTabbable,
// When Alt is pressed, place the caret at the furthest
// horizontal edge and the furthest vertical edge.
altKey ? !isReverse : isReverse, altKey ? undefined : verticalRect);
event.preventDefault();
}
} else if (isHorizontal && defaultView.getSelection().isCollapsed && (0,external_wp_dom_namespaceObject.isHorizontalEdge)(target, isReverseDir) && !keepCaretInsideBlock) {
const closestTabbable = getClosestTabbable(target, isReverseDir, node);
(0,external_wp_dom_namespaceObject.placeCaretAtHorizontalEdge)(closestTabbable, isReverse);
event.preventDefault();
}
}
node.addEventListener('mousedown', onMouseDown);
node.addEventListener('keydown', onKeyDown);
return () => {
node.removeEventListener('mousedown', onMouseDown);
node.removeEventListener('keydown', onKeyDown);
};
}, []);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/writing-flow/use-select-all.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function useSelectAll() {
const {
getBlockOrder,
getSelectedBlockClientIds,
getBlockRootClientId
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
multiSelect,
selectBlock
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const isMatch = (0,external_wp_keyboardShortcuts_namespaceObject.__unstableUseShortcutEventMatch)();
return (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
function onKeyDown(event) {
if (!isMatch('core/block-editor/select-all', event)) {
return;
}
const selectedClientIds = getSelectedBlockClientIds();
if (selectedClientIds.length < 2 && !(0,external_wp_dom_namespaceObject.isEntirelySelected)(event.target)) {
return;
}
event.preventDefault();
const [firstSelectedClientId] = selectedClientIds;
const rootClientId = getBlockRootClientId(firstSelectedClientId);
const blockClientIds = getBlockOrder(rootClientId);
// If we have selected all sibling nested blocks, try selecting up a
// level. See: https://github.com/WordPress/gutenberg/pull/31859/
if (selectedClientIds.length === blockClientIds.length) {
if (rootClientId) {
node.ownerDocument.defaultView.getSelection().removeAllRanges();
selectBlock(rootClientId);
}
return;
}
multiSelect(blockClientIds[0], blockClientIds[blockClientIds.length - 1]);
}
node.addEventListener('keydown', onKeyDown);
return () => {
node.removeEventListener('keydown', onKeyDown);
};
}, []);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/writing-flow/use-drag-selection.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Sets the `contenteditable` wrapper element to `value`.
*
* @param {HTMLElement} node Block element.
* @param {boolean} value `contentEditable` value (true or false)
*/
function setContentEditableWrapper(node, value) {
node.contentEditable = value;
// Firefox doesn't automatically move focus.
if (value) {
node.focus();
}
}
/**
* Sets a multi-selection based on the native selection across blocks.
*/
function useDragSelection() {
const {
startMultiSelect,
stopMultiSelect
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const {
isSelectionEnabled,
hasSelectedBlock,
isDraggingBlocks,
isMultiSelecting
} = (0,external_wp_data_namespaceObject.useSelect)(store);
return (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
const {
ownerDocument
} = node;
const {
defaultView
} = ownerDocument;
let anchorElement;
let rafId;
function onMouseUp() {
stopMultiSelect();
// Equivalent to attaching the listener once.
defaultView.removeEventListener('mouseup', onMouseUp);
// The browser selection won't have updated yet at this point,
// so wait until the next animation frame to get the browser
// selection.
rafId = defaultView.requestAnimationFrame(() => {
if (!hasSelectedBlock()) {
return;
}
// If the selection is complete (on mouse up), and no
// multiple blocks have been selected, set focus back to the
// anchor element. if the anchor element contains the
// selection. Additionally, the contentEditable wrapper can
// now be disabled again.
setContentEditableWrapper(node, false);
const selection = defaultView.getSelection();
if (selection.rangeCount) {
const range = selection.getRangeAt(0);
const {
commonAncestorContainer
} = range;
const clonedRange = range.cloneRange();
if (anchorElement.contains(commonAncestorContainer)) {
anchorElement.focus();
selection.removeAllRanges();
selection.addRange(clonedRange);
}
}
});
}
function onMouseLeave({
buttons,
target,
relatedTarget
}) {
// If we're moving into a child element, ignore. We're tracking
// the mouse leaving the element to a parent, no a child.
if (target.contains(relatedTarget)) {
return;
}
// Avoid triggering a multi-selection if the user is already
// dragging blocks.
if (isDraggingBlocks()) {
return;
}
// The primary button must be pressed to initiate selection.
// See https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
if (buttons !== 1) {
return;
}
// Abort if we are already multi-selecting.
if (isMultiSelecting()) {
return;
}
// Abort if selection is leaving writing flow.
if (node === target) {
return;
}
// Check the attribute, not the contentEditable attribute. All
// child elements of the content editable wrapper are editable
// and return true for this property. We only want to start
// multi selecting when the mouse leaves the wrapper.
if (target.getAttribute('contenteditable') !== 'true') {
return;
}
if (!isSelectionEnabled()) {
return;
}
// Do not rely on the active element because it may change after
// the mouse leaves for the first time. See
// https://github.com/WordPress/gutenberg/issues/48747.
anchorElement = target;
startMultiSelect();
// `onSelectionStart` is called after `mousedown` and
// `mouseleave` (from a block). The selection ends when
// `mouseup` happens anywhere in the window.
defaultView.addEventListener('mouseup', onMouseUp);
// Allow cross contentEditable selection by temporarily making
// all content editable. We can't rely on using the store and
// React because re-rending happens too slowly. We need to be
// able to select across instances immediately.
setContentEditableWrapper(node, true);
}
node.addEventListener('mouseout', onMouseLeave);
return () => {
node.removeEventListener('mouseout', onMouseLeave);
defaultView.removeEventListener('mouseup', onMouseUp);
defaultView.cancelAnimationFrame(rafId);
};
}, [startMultiSelect, stopMultiSelect, isSelectionEnabled, hasSelectedBlock]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/writing-flow/use-selection-observer.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Extract the selection start node from the selection. When the anchor node is
* not a text node, the selection offset is the index of a child node.
*
* @param {Selection} selection The selection.
*
* @return {Element} The selection start node.
*/
function extractSelectionStartNode(selection) {
const {
anchorNode,
anchorOffset
} = selection;
if (anchorNode.nodeType === anchorNode.TEXT_NODE) {
return anchorNode;
}
if (anchorOffset === 0) {
return anchorNode;
}
return anchorNode.childNodes[anchorOffset - 1];
}
/**
* Extract the selection end node from the selection. When the focus node is not
* a text node, the selection offset is the index of a child node. The selection
* reaches up to but excluding that child node.
*
* @param {Selection} selection The selection.
*
* @return {Element} The selection start node.
*/
function extractSelectionEndNode(selection) {
const {
focusNode,
focusOffset
} = selection;
if (focusNode.nodeType === focusNode.TEXT_NODE) {
return focusNode;
}
if (focusOffset === focusNode.childNodes.length) {
return focusNode;
}
// When the selection is forward (the selection ends with the focus node),
// the selection may extend into the next element with an offset of 0. This
// may trigger multi selection even though the selection does not visually
// end in the next block.
if (focusOffset === 0 && (0,external_wp_dom_namespaceObject.isSelectionForward)(selection)) {
var _focusNode$previousSi;
return (_focusNode$previousSi = focusNode.previousSibling) !== null && _focusNode$previousSi !== void 0 ? _focusNode$previousSi : focusNode.parentElement;
}
return focusNode.childNodes[focusOffset];
}
function findDepth(a, b) {
let depth = 0;
while (a[depth] === b[depth]) {
depth++;
}
return depth;
}
/**
* Sets the `contenteditable` wrapper element to `value`.
*
* @param {HTMLElement} node Block element.
* @param {boolean} value `contentEditable` value (true or false)
*/
function use_selection_observer_setContentEditableWrapper(node, value) {
// Since we are calling this on every selection change, check if the value
// needs to be updated first because it trigger the browser to recalculate
// style.
if (node.contentEditable !== String(value)) {
node.contentEditable = value;
// Firefox doesn't automatically move focus.
if (value) {
node.focus();
}
}
}
function getRichTextElement(node) {
const element = node.nodeType === node.ELEMENT_NODE ? node : node.parentElement;
return element?.closest('[data-wp-block-attribute-key]');
}
/**
* Sets a multi-selection based on the native selection across blocks.
*/
function useSelectionObserver() {
const {
multiSelect,
selectBlock,
selectionChange
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const {
getBlockParents,
getBlockSelectionStart,
isMultiSelecting
} = (0,external_wp_data_namespaceObject.useSelect)(store);
return (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
const {
ownerDocument
} = node;
const {
defaultView
} = ownerDocument;
function onSelectionChange(event) {
const selection = defaultView.getSelection();
if (!selection.rangeCount) {
return;
}
const startNode = extractSelectionStartNode(selection);
const endNode = extractSelectionEndNode(selection);
if (!node.contains(startNode) || !node.contains(endNode)) {
return;
}
// If selection is collapsed and we haven't used `shift+click`,
// end multi selection and disable the contentEditable wrapper.
// We have to check about `shift+click` case because elements
// that don't support text selection might be involved, and we might
// update the clientIds to multi-select blocks.
// For now we check if the event is a `mouse` event.
const isClickShift = event.shiftKey && event.type === 'mouseup';
if (selection.isCollapsed && !isClickShift) {
if (node.contentEditable === 'true' && !isMultiSelecting()) {
use_selection_observer_setContentEditableWrapper(node, false);
let element = startNode.nodeType === startNode.ELEMENT_NODE ? startNode : startNode.parentElement;
element = element?.closest('[contenteditable]');
element?.focus();
}
return;
}
let startClientId = getBlockClientId(startNode);
let endClientId = getBlockClientId(endNode);
// If the selection has changed and we had pressed `shift+click`,
// we need to check if in an element that doesn't support
// text selection has been clicked.
if (isClickShift) {
const selectedClientId = getBlockSelectionStart();
const clickedClientId = getBlockClientId(event.target);
// `endClientId` is not defined if we end the selection by clicking a non-selectable block.
// We need to check if there was already a selection with a non-selectable focusNode.
const focusNodeIsNonSelectable = clickedClientId !== endClientId;
if (startClientId === endClientId && selection.isCollapsed || !endClientId || focusNodeIsNonSelectable) {
endClientId = clickedClientId;
}
// Handle the case when we have a non-selectable block
// selected and click another one.
if (startClientId !== selectedClientId) {
startClientId = selectedClientId;
}
}
// If the selection did not involve a block, return.
if (startClientId === undefined && endClientId === undefined) {
use_selection_observer_setContentEditableWrapper(node, false);
return;
}
const isSingularSelection = startClientId === endClientId;
if (isSingularSelection) {
if (!isMultiSelecting()) {
selectBlock(startClientId);
} else {
multiSelect(startClientId, startClientId);
}
} else {
const startPath = [...getBlockParents(startClientId), startClientId];
const endPath = [...getBlockParents(endClientId), endClientId];
const depth = findDepth(startPath, endPath);
if (startPath[depth] !== startClientId || endPath[depth] !== endClientId) {
multiSelect(startPath[depth], endPath[depth]);
return;
}
const richTextElementStart = getRichTextElement(startNode);
const richTextElementEnd = getRichTextElement(endNode);
if (richTextElementStart && richTextElementEnd) {
var _richTextDataStart$st, _richTextDataEnd$star;
const range = selection.getRangeAt(0);
const richTextDataStart = (0,external_wp_richText_namespaceObject.create)({
element: richTextElementStart,
range,
__unstableIsEditableTree: true
});
const richTextDataEnd = (0,external_wp_richText_namespaceObject.create)({
element: richTextElementEnd,
range,
__unstableIsEditableTree: true
});
const startOffset = (_richTextDataStart$st = richTextDataStart.start) !== null && _richTextDataStart$st !== void 0 ? _richTextDataStart$st : richTextDataStart.end;
const endOffset = (_richTextDataEnd$star = richTextDataEnd.start) !== null && _richTextDataEnd$star !== void 0 ? _richTextDataEnd$star : richTextDataEnd.end;
selectionChange({
start: {
clientId: startClientId,
attributeKey: richTextElementStart.dataset.wpBlockAttributeKey,
offset: startOffset
},
end: {
clientId: endClientId,
attributeKey: richTextElementEnd.dataset.wpBlockAttributeKey,
offset: endOffset
}
});
} else {
multiSelect(startClientId, endClientId);
}
}
}
ownerDocument.addEventListener('selectionchange', onSelectionChange);
defaultView.addEventListener('mouseup', onSelectionChange);
return () => {
ownerDocument.removeEventListener('selectionchange', onSelectionChange);
defaultView.removeEventListener('mouseup', onSelectionChange);
};
}, [multiSelect, selectBlock, selectionChange, getBlockParents]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/writing-flow/use-click-selection.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function useClickSelection() {
const {
selectBlock
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const {
isSelectionEnabled,
getBlockSelectionStart,
hasMultiSelection
} = (0,external_wp_data_namespaceObject.useSelect)(store);
return (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
function onMouseDown(event) {
// The main button.
// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
if (!isSelectionEnabled() || event.button !== 0) {
return;
}
const startClientId = getBlockSelectionStart();
const clickedClientId = getBlockClientId(event.target);
if (event.shiftKey) {
if (startClientId !== clickedClientId) {
node.contentEditable = true;
// Firefox doesn't automatically move focus.
node.focus();
}
} else if (hasMultiSelection()) {
// Allow user to escape out of a multi-selection to a
// singular selection of a block via click. This is handled
// here since focus handling excludes blocks when there is
// multiselection, as focus can be incurred by starting a
// multiselection (focus moved to first block's multi-
// controls).
selectBlock(clickedClientId);
}
}
node.addEventListener('mousedown', onMouseDown);
return () => {
node.removeEventListener('mousedown', onMouseDown);
};
}, [selectBlock, isSelectionEnabled, getBlockSelectionStart, hasMultiSelection]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/writing-flow/use-input.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Handles input for selections across blocks.
*/
function useInput() {
const {
__unstableIsFullySelected,
getSelectedBlockClientIds,
getSelectedBlockClientId,
__unstableIsSelectionMergeable,
hasMultiSelection,
getBlockName,
canInsertBlockType,
getBlockRootClientId,
getSelectionStart,
getSelectionEnd,
getBlockAttributes
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
replaceBlocks,
__unstableSplitSelection,
removeBlocks,
__unstableDeleteSelection,
__unstableExpandSelection,
__unstableMarkAutomaticChange
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
return (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
function onBeforeInput(event) {
// If writing flow is editable, NEVER allow the browser to alter the
// DOM. This will cause React errors (and the DOM should only be
// altered in a controlled fashion).
if (node.contentEditable === 'true') {
event.preventDefault();
}
}
function onKeyDown(event) {
if (event.defaultPrevented) {
return;
}
if (!hasMultiSelection()) {
if (event.keyCode === external_wp_keycodes_namespaceObject.ENTER) {
if (event.shiftKey || __unstableIsFullySelected()) {
return;
}
const clientId = getSelectedBlockClientId();
const blockName = getBlockName(clientId);
const selectionStart = getSelectionStart();
const selectionEnd = getSelectionEnd();
if (selectionStart.attributeKey === selectionEnd.attributeKey) {
const selectedAttributeValue = getBlockAttributes(clientId)[selectionStart.attributeKey];
const transforms = (0,external_wp_blocks_namespaceObject.getBlockTransforms)('from').filter(({
type
}) => type === 'enter');
const transformation = (0,external_wp_blocks_namespaceObject.findTransform)(transforms, item => {
return item.regExp.test(selectedAttributeValue);
});
if (transformation) {
replaceBlocks(clientId, transformation.transform({
content: selectedAttributeValue
}));
__unstableMarkAutomaticChange();
return;
}
}
if (!(0,external_wp_blocks_namespaceObject.hasBlockSupport)(blockName, 'splitting', false) && !event.__deprecatedOnSplit) {
return;
}
// Ensure template is not locked.
if (canInsertBlockType(blockName, getBlockRootClientId(clientId))) {
__unstableSplitSelection();
event.preventDefault();
}
}
return;
}
if (event.keyCode === external_wp_keycodes_namespaceObject.ENTER) {
node.contentEditable = false;
event.preventDefault();
if (__unstableIsFullySelected()) {
replaceBlocks(getSelectedBlockClientIds(), (0,external_wp_blocks_namespaceObject.createBlock)((0,external_wp_blocks_namespaceObject.getDefaultBlockName)()));
} else {
__unstableSplitSelection();
}
} else if (event.keyCode === external_wp_keycodes_namespaceObject.BACKSPACE || event.keyCode === external_wp_keycodes_namespaceObject.DELETE) {
node.contentEditable = false;
event.preventDefault();
if (__unstableIsFullySelected()) {
removeBlocks(getSelectedBlockClientIds());
} else if (__unstableIsSelectionMergeable()) {
__unstableDeleteSelection(event.keyCode === external_wp_keycodes_namespaceObject.DELETE);
} else {
__unstableExpandSelection();
}
} else if (
// If key.length is longer than 1, it's a control key that doesn't
// input anything.
event.key.length === 1 && !(event.metaKey || event.ctrlKey)) {
node.contentEditable = false;
if (__unstableIsSelectionMergeable()) {
__unstableDeleteSelection(event.keyCode === external_wp_keycodes_namespaceObject.DELETE);
} else {
event.preventDefault();
// Safari does not stop default behaviour with either
// event.preventDefault() or node.contentEditable = false, so
// remove the selection to stop browser manipulation.
node.ownerDocument.defaultView.getSelection().removeAllRanges();
}
}
}
function onCompositionStart(event) {
if (!hasMultiSelection()) {
return;
}
node.contentEditable = false;
if (__unstableIsSelectionMergeable()) {
__unstableDeleteSelection();
} else {
event.preventDefault();
// Safari does not stop default behaviour with either
// event.preventDefault() or node.contentEditable = false, so
// remove the selection to stop browser manipulation.
node.ownerDocument.defaultView.getSelection().removeAllRanges();
}
}
node.addEventListener('beforeinput', onBeforeInput);
node.addEventListener('keydown', onKeyDown);
node.addEventListener('compositionstart', onCompositionStart);
return () => {
node.removeEventListener('beforeinput', onBeforeInput);
node.removeEventListener('keydown', onKeyDown);
node.removeEventListener('compositionstart', onCompositionStart);
};
}, []);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/utils/use-notify-copy.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function useNotifyCopy() {
const {
getBlockName
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
getBlockType
} = (0,external_wp_data_namespaceObject.useSelect)(external_wp_blocks_namespaceObject.store);
const {
createSuccessNotice
} = (0,external_wp_data_namespaceObject.useDispatch)(external_wp_notices_namespaceObject.store);
return (0,external_wp_element_namespaceObject.useCallback)((eventType, selectedBlockClientIds) => {
let notice = '';
if (selectedBlockClientIds.length === 1) {
const clientId = selectedBlockClientIds[0];
const title = getBlockType(getBlockName(clientId))?.title;
notice = eventType === 'copy' ? (0,external_wp_i18n_namespaceObject.sprintf)(
// Translators: Name of the block being copied, e.g. "Paragraph".
(0,external_wp_i18n_namespaceObject.__)('Copied "%s" to clipboard.'), title) : (0,external_wp_i18n_namespaceObject.sprintf)(
// Translators: Name of the block being cut, e.g. "Paragraph".
(0,external_wp_i18n_namespaceObject.__)('Moved "%s" to clipboard.'), title);
} else {
notice = eventType === 'copy' ? (0,external_wp_i18n_namespaceObject.sprintf)(
// Translators: %d: Number of blocks being copied.
(0,external_wp_i18n_namespaceObject._n)('Copied %d block to clipboard.', 'Copied %d blocks to clipboard.', selectedBlockClientIds.length), selectedBlockClientIds.length) : (0,external_wp_i18n_namespaceObject.sprintf)(
// Translators: %d: Number of blocks being cut.
(0,external_wp_i18n_namespaceObject._n)('Moved %d block to clipboard.', 'Moved %d blocks to clipboard.', selectedBlockClientIds.length), selectedBlockClientIds.length);
}
createSuccessNotice(notice, {
type: 'snackbar'
});
}, []);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/utils/pasting.js
/**
* WordPress dependencies
*/
/**
* Normalizes a given string of HTML to remove the Windows-specific "Fragment"
* comments and any preceding and trailing content.
*
* @param {string} html the html to be normalized
* @return {string} the normalized html
*/
function removeWindowsFragments(html) {
const startStr = '<!--StartFragment-->';
const startIdx = html.indexOf(startStr);
if (startIdx > -1) {
html = html.substring(startIdx + startStr.length);
} else {
// No point looking for EndFragment
return html;
}
const endStr = '<!--EndFragment-->';
const endIdx = html.indexOf(endStr);
if (endIdx > -1) {
html = html.substring(0, endIdx);
}
return html;
}
/**
* Removes the charset meta tag inserted by Chromium.
* See:
* - https://github.com/WordPress/gutenberg/issues/33585
* - https://bugs.chromium.org/p/chromium/issues/detail?id=1264616#c4
*
* @param {string} html the html to be stripped of the meta tag.
* @return {string} the cleaned html
*/
function removeCharsetMetaTag(html) {
const metaTag = `<meta charset='utf-8'>`;
if (html.startsWith(metaTag)) {
return html.slice(metaTag.length);
}
return html;
}
function getPasteEventData({
clipboardData
}) {
let plainText = '';
let html = '';
try {
plainText = clipboardData.getData('text/plain');
html = clipboardData.getData('text/html');
} catch (error) {
// Some browsers like UC Browser paste plain text by default and
// don't support clipboardData at all, so allow default
// behaviour.
return;
}
// Remove Windows-specific metadata appended within copied HTML text.
html = removeWindowsFragments(html);
// Strip meta tag.
html = removeCharsetMetaTag(html);
const files = (0,external_wp_dom_namespaceObject.getFilesFromDataTransfer)(clipboardData);
if (files.length && !shouldDismissPastedFiles(files, html)) {
return {
files
};
}
return {
html,
plainText,
files: []
};
}
/**
* Given a collection of DataTransfer files and HTML and plain text strings,
* determine whether the files are to be dismissed in favor of the HTML.
*
* Certain office-type programs, like Microsoft Word or Apple Numbers,
* will, upon copy, generate a screenshot of the content being copied and
* attach it to the clipboard alongside the actual rich text that the user
* sought to copy. In those cases, we should let Gutenberg handle the rich text
* content and not the screenshot, since this allows Gutenberg to insert
* meaningful blocks, like paragraphs, lists or even tables.
*
* @param {File[]} files File objects obtained from a paste event
* @param {string} html HTML content obtained from a paste event
* @return {boolean} True if the files should be dismissed
*/
function shouldDismissPastedFiles(files, html /*, plainText */) {
// The question is only relevant when there is actual HTML content and when
// there is exactly one image file.
if (html && files?.length === 1 && files[0].type.indexOf('image/') === 0) {
// A single <img> tag found in the HTML source suggests that the
// content being pasted revolves around an image. Sometimes there are
// other elements found, like <figure>, but we assume that the user's
// intention is to paste the actual image file.
const IMAGE_TAG = /<\s*img\b/gi;
if (html.match(IMAGE_TAG)?.length !== 1) {
return true;
}
// Even when there is exactly one <img> tag in the HTML payload, we
// choose to weed out local images, i.e. those whose source starts with
// "file://". These payloads occur in specific configurations, such as
// when copying an entire document from Microsoft Word, that contains
// text and exactly one image, and pasting that content using Google
// Chrome.
const IMG_WITH_LOCAL_SRC = /<\s*img\b[^>]*\bsrc="file:\/\//i;
if (html.match(IMG_WITH_LOCAL_SRC)) {
return true;
}
}
return false;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/writing-flow/utils.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const requiresWrapperOnCopy = Symbol('requiresWrapperOnCopy');
/**
* Sets the clipboard data for the provided blocks, with both HTML and plain
* text representations.
*
* @param {ClipboardEvent} event Clipboard event.
* @param {WPBlock[]} blocks Blocks to set as clipboard data.
* @param {Object} registry The registry to select from.
*/
function setClipboardBlocks(event, blocks, registry) {
let _blocks = blocks;
const [firstBlock] = blocks;
if (firstBlock) {
const firstBlockType = registry.select(external_wp_blocks_namespaceObject.store).getBlockType(firstBlock.name);
if (firstBlockType[requiresWrapperOnCopy]) {
const {
getBlockRootClientId,
getBlockName,
getBlockAttributes
} = registry.select(store);
const wrapperBlockClientId = getBlockRootClientId(firstBlock.clientId);
const wrapperBlockName = getBlockName(wrapperBlockClientId);
if (wrapperBlockName) {
_blocks = (0,external_wp_blocks_namespaceObject.createBlock)(wrapperBlockName, getBlockAttributes(wrapperBlockClientId), _blocks);
}
}
}
const serialized = (0,external_wp_blocks_namespaceObject.serialize)(_blocks);
event.clipboardData.setData('text/plain', toPlainText(serialized));
event.clipboardData.setData('text/html', serialized);
}
/**
* Returns the blocks to be pasted from the clipboard event.
*
* @param {ClipboardEvent} event The clipboard event.
* @param {boolean} canUserUseUnfilteredHTML Whether the user can or can't post unfiltered HTML.
* @return {Array|string} A list of blocks or a string, depending on `handlerMode`.
*/
function getPasteBlocks(event, canUserUseUnfilteredHTML) {
const {
plainText,
html,
files
} = getPasteEventData(event);
let blocks = [];
if (files.length) {
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]));
if (transformation) {
accumulator.push(transformation.transform([file]));
}
return accumulator;
}, []).flat();
} else {
blocks = (0,external_wp_blocks_namespaceObject.pasteHandler)({
HTML: html,
plainText,
mode: 'BLOCKS',
canUserUseUnfilteredHTML
});
}
return blocks;
}
/**
* Given a string of HTML representing serialized blocks, returns the plain
* text extracted after stripping the HTML of any tags and fixing line breaks.
*
* @param {string} html Serialized blocks.
* @return {string} The plain-text content with any html removed.
*/
function toPlainText(html) {
// Manually handle BR tags as line breaks prior to `stripHTML` call
html = html.replace(/<br>/g, '\n');
const plainText = (0,external_wp_dom_namespaceObject.__unstableStripHTML)(html).trim();
// Merge any consecutive line breaks
return plainText.replace(/\n\n+/g, '\n\n');
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/writing-flow/use-clipboard-handler.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function useClipboardHandler() {
const registry = (0,external_wp_data_namespaceObject.useRegistry)();
const {
getBlocksByClientId,
getSelectedBlockClientIds,
hasMultiSelection,
getSettings,
getBlockName,
__unstableIsFullySelected,
__unstableIsSelectionCollapsed,
__unstableIsSelectionMergeable,
__unstableGetSelectedBlocksWithPartialSelection,
canInsertBlockType,
getBlockRootClientId
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
flashBlock,
removeBlocks,
replaceBlocks,
__unstableDeleteSelection,
__unstableExpandSelection,
__unstableSplitSelection
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const notifyCopy = useNotifyCopy();
return (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
function handler(event) {
if (event.defaultPrevented) {
// This was likely already handled in rich-text/use-paste-handler.js.
return;
}
const selectedBlockClientIds = getSelectedBlockClientIds();
if (selectedBlockClientIds.length === 0) {
return;
}
// Let native copy/paste behaviour take over in input fields.
// But always handle multiple selected blocks.
if (!hasMultiSelection()) {
const {
target
} = event;
const {
ownerDocument
} = target;
// If copying, only consider actual text selection as selection.
// Otherwise, any focus on an input field is considered.
const hasSelection = event.type === 'copy' || event.type === 'cut' ? (0,external_wp_dom_namespaceObject.documentHasUncollapsedSelection)(ownerDocument) : (0,external_wp_dom_namespaceObject.documentHasSelection)(ownerDocument) && !ownerDocument.activeElement.isContentEditable;
// Let native copy behaviour take over in input fields.
if (hasSelection) {
return;
}
}
const {
activeElement
} = event.target.ownerDocument;
if (!node.contains(activeElement)) {
return;
}
const isSelectionMergeable = __unstableIsSelectionMergeable();
const shouldHandleWholeBlocks = __unstableIsSelectionCollapsed() || __unstableIsFullySelected();
const expandSelectionIsNeeded = !shouldHandleWholeBlocks && !isSelectionMergeable;
if (event.type === 'copy' || event.type === 'cut') {
event.preventDefault();
if (selectedBlockClientIds.length === 1) {
flashBlock(selectedBlockClientIds[0]);
}
// If we have a partial selection that is not mergeable, just
// expand the selection to the whole blocks.
if (expandSelectionIsNeeded) {
__unstableExpandSelection();
} else {
notifyCopy(event.type, selectedBlockClientIds);
let blocks;
// Check if we have partial selection.
if (shouldHandleWholeBlocks) {
blocks = getBlocksByClientId(selectedBlockClientIds);
} else {
const [head, tail] = __unstableGetSelectedBlocksWithPartialSelection();
const inBetweenBlocks = getBlocksByClientId(selectedBlockClientIds.slice(1, selectedBlockClientIds.length - 1));
blocks = [head, ...inBetweenBlocks, tail];
}
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);
} else {
event.target.ownerDocument.activeElement.contentEditable = false;
__unstableDeleteSelection();
}
} else if (event.type === 'paste') {
const {
__experimentalCanUserUseUnfilteredHTML: canUserUseUnfilteredHTML
} = getSettings();
const isInternal = event.clipboardData.getData('rich-text') === 'true';
if (isInternal) {
return;
}
const {
plainText,
html,
files
} = getPasteEventData(event);
const isFullySelected = __unstableIsFullySelected();
let blocks = [];
if (files.length) {
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]));
if (transformation) {
accumulator.push(transformation.transform([file]));
}
return accumulator;
}, []).flat();
} else {
blocks = (0,external_wp_blocks_namespaceObject.pasteHandler)({
HTML: html,
plainText,
mode: isFullySelected ? 'BLOCKS' : 'AUTO',
canUserUseUnfilteredHTML
});
}
// Inline paste: let rich text handle it.
if (typeof blocks === 'string') {
return;
}
if (isFullySelected) {
replaceBlocks(selectedBlockClientIds, blocks, blocks.length - 1, -1);
event.preventDefault();
return;
}
// If a block doesn't support splitting, let rich text paste
// inline.
if (!hasMultiSelection() && !(0,external_wp_blocks_namespaceObject.hasBlockSupport)(getBlockName(selectedBlockClientIds[0]), 'splitting', false) && !event.__deprecatedOnSplit) {
return;
}
const [firstSelectedClientId] = selectedBlockClientIds;
const rootClientId = getBlockRootClientId(firstSelectedClientId);
const newBlocks = [];
for (const block of blocks) {
if (canInsertBlockType(block.name, rootClientId)) {
newBlocks.push(block);
} else {
// If a block cannot be inserted in a root block, try
// converting it to that root block type and insert the
// inner blocks.
// 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];
if (!switchedBlocks) {
return;
}
for (const switchedBlock of switchedBlocks) {
for (const innerBlock of switchedBlock.innerBlocks) {
newBlocks.push(innerBlock);
}
}
}
}
__unstableSplitSelection(newBlocks);
event.preventDefault();
}
}
node.ownerDocument.addEventListener('copy', handler);
node.ownerDocument.addEventListener('cut', handler);
node.ownerDocument.addEventListener('paste', handler);
return () => {
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
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
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 => {
node.tabIndex = 0;
if (!hasMultiSelection) {
return;
}
node.classList.add('has-multi-selection');
node.setAttribute('aria-label', (0,external_wp_i18n_namespaceObject.__)('Multiple selected blocks'));
return () => {
node.classList.remove('has-multi-selection');
node.removeAttribute('aria-label');
};
}, [hasMultiSelection])]), after];
}
function WritingFlow({
children,
...props
}, forwardedRef) {
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", {
...props,
ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, forwardedRef]),
className: dist_clsx(props.className, 'block-editor-writing-flow'),
children: children
}), after]
});
}
/**
* 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
// change.
compatibilityStyles = Array.from(document.styleSheets).reduce((accumulator, styleSheet) => {
try {
// May fail for external styles.
// eslint-disable-next-line no-unused-expressions
styleSheet.cssRules;
} catch (e) {
return accumulator;
}
const {
ownerNode,
cssRules
} = styleSheet;
// Stylesheet is added by another stylesheet. See
// https://developer.mozilla.org/en-US/docs/Web/API/StyleSheet/ownerNode#notes.
if (ownerNode === null) {
return accumulator;
}
if (!cssRules) {
return accumulator;
}
// 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
// styles.
if (['wp-reset-editor-styles-css', 'wp-reset-editor-styles-rtl-css'].includes(ownerNode.id)) {
return accumulator;
}
// Don't try to add styles without ID. Styles enqueued via the WP dependency system will always have IDs.
if (!ownerNode.id) {
return accumulator;
}
function matchFromRules(_cssRules) {
return Array.from(_cssRules).find(({
selectorText,
conditionText,
cssRules: __cssRules
}) => {
// If the rule is conditional then it will not have selector text.
// Recurse into child CSS ruleset to determine selector eligibility.
if (conditionText) {
return matchFromRules(__cssRules);
}
return selectorText && (selectorText.includes('.editor-styles-wrapper') || selectorText.includes('.wp-block'));
});
}
if (matchFromRules(cssRules)) {
const isInline = ownerNode.tagName === 'STYLE';
if (isInline) {
// 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);
if (mainStylesElement) {
accumulator.push(mainStylesElement.cloneNode(true));
}
}
accumulator.push(ownerNode.cloneNode(true));
if (!isInline) {
// 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 accumulator;
}, []);
return compatibilityStyles;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/iframe/index.js
/* wp:polyfill */
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function bubbleEvent(event, Constructor, frame) {
const init = {};
for (const key in event) {
init[key] = event[key];
}
// 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);
if (cancelled) {
event.preventDefault();
}
}
/**
* 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 {
defaultView
} = iframeDocument;
if (!defaultView) {
return;
}
const {
frameElement
} = defaultView;
const html = iframeDocument.documentElement;
const eventTypes = ['dragover', 'mousemove'];
const handlers = {};
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]);
}
return () => {
for (const name of eventTypes) {
html.removeEventListener(name, handlers[name]);
}
};
});
}
function Iframe({
contentRef,
children,
tabIndex = 0,
scale = 1,
frameSize = 0,
readonly,
forwardedRef: ref,
title = (0,external_wp_i18n_namespaceObject.__)('Editor canvas'),
...props
}) {
const {
resolvedAssets,
isPreviewMode
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getSettings
} = select(store);
const settings = getSettings();
return {
resolvedAssets: settings.__unstableResolvedAssets,
isPreviewMode: settings.__unstableIsPreviewMode
};
}, []);
const {
styles = '',
scripts = ''
} = resolvedAssets;
const [iframeDocument, setIframeDocument] = (0,external_wp_element_namespaceObject.useState)();
const initialContainerWidth = (0,external_wp_element_namespaceObject.useRef)(0);
const [bodyClasses, setBodyClasses] = (0,external_wp_element_namespaceObject.useState)([]);
const clearerRef = useBlockSelectionClearer();
const [before, writingFlowRef, after] = useWritingFlow();
const [contentResizeListener, {
height: contentHeight
}] = (0,external_wp_compose_namespaceObject.useResizeObserver)();
const [containerResizeListener, {
width: containerWidth
}] = (0,external_wp_compose_namespaceObject.useResizeObserver)();
const setRef = (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
node._load = () => {
setIframeDocument(node.contentDocument);
};
let iFrameDocument;
// Prevent the default browser action for files dropped outside of dropzones.
function preventFileDropDefault(event) {
event.preventDefault();
}
function onLoad() {
const {
contentDocument,
ownerDocument
} = node;
const {
documentElement
} = contentDocument;
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)) {
continue;
}
contentDocument.head.appendChild(compatStyle.cloneNode(true));
if (!isPreviewMode) {
// 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);
return () => {
delete node._load;
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);
const onResize = () => {
setIframeWindowInnerHeight(nodeWindow.innerHeight);
};
nodeWindow.addEventListener('resize', onResize);
return () => {
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);
const onResize = () => {
setWindowInnerWidth(nodeWindow.innerWidth);
};
nodeWindow.addEventListener('resize', onResize);
return () => {
nodeWindow.removeEventListener('resize', onResize);
};
}, []);
const isZoomedOut = scale !== 1;
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (!isZoomedOut) {
initialContainerWidth.current = containerWidth;
}
}, [containerWidth, isZoomedOut]);
const scaleContainerWidth = Math.max(initialContainerWidth.current, containerWidth);
const disabledRef = (0,external_wp_compose_namespaceObject.useDisabled)({
isDisabled: !readonly
});
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
// content.
const html = `<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>window.frameElement._load()</script>
<style>
html{
height: auto !important;
min-height: 100%;
}
/* Lowest specificity to not override global styles */
:where(body) {
margin: 0;
/* Default background color in case zoom out mode background
colors the html element */
background-color: white;
}
</style>
${styles}
${scripts}
</head>
<body>
<script>document.currentScript.parentElement.remove()</script>
</body>
</html>`;
const [src, cleanup] = (0,external_wp_element_namespaceObject.useMemo)(() => {
const _src = URL.createObjectURL(new window.Blob([html], {
type: 'text/html'
}));
return [_src, () => URL.revokeObjectURL(_src)];
}, [html]);
(0,external_wp_element_namespaceObject.useEffect)(() => cleanup, [cleanup]);
const zoomOutAnimationClassnameRef = (0,external_wp_element_namespaceObject.useRef)(null);
// Toggle zoom out CSS Classes only when zoom out mode changes. We could add these into the useEffect
// that controls settings the CSS variables, but then we would need to do more work to ensure we're
// only toggling these when the zoom out mode changes, as that useEffect is also triggered by a large
// number of dependencies.
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (!iframeDocument || !isZoomedOut) {
return;
}
const handleZoomOutAnimationClassname = () => {
clearTimeout(zoomOutAnimationClassnameRef.current);
iframeDocument.documentElement.classList.add('zoom-out-animation');
zoomOutAnimationClassnameRef.current = setTimeout(() => {
iframeDocument.documentElement.classList.remove('zoom-out-animation');
}, 400); // 400ms should match the animation speed used in components/iframe/content.scss
};
handleZoomOutAnimationClassname();
iframeDocument.documentElement.classList.add('is-zoomed-out');
return () => {
handleZoomOutAnimationClassname();
iframeDocument.documentElement.classList.remove('is-zoomed-out');
};
}, [iframeDocument, isZoomedOut]);
// Calculate the scaling and CSS variables for the zoom out canvas
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (!iframeDocument || !isZoomedOut) {
return;
}
const maxWidth = 750;
// Note: When we initialize the zoom out when the canvas is smaller (sidebars open),
// initialContainerWidth will be smaller than the full page, and reflow will happen
// when the canvas area becomes larger due to sidebars closing. This is a known but
// minor divergence for now.
// This scaling calculation has to happen within the JS because CSS calc() can
// only divide and multiply by a unitless value. I.e. calc( 100px / 2 ) is valid
// but calc( 100px / 2px ) is not.
iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-scale', scale === 'default' ? (Math.min(containerWidth, maxWidth) - parseInt(frameSize) * 2) / scaleContainerWidth : scale);
// frameSize has to be a px value for the scaling and frame size to be computed correctly.
iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-frame-size', typeof frameSize === 'number' ? `${frameSize}px` : frameSize);
iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-content-height', `${contentHeight}px`);
iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-inner-height', `${iframeWindowInnerHeight}px`);
iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-container-width', `${containerWidth}px`);
iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-scale-container-width', `${scaleContainerWidth}px`);
return () => {
iframeDocument.documentElement.style.removeProperty('--wp-block-editor-iframe-zoom-out-scale');
iframeDocument.documentElement.style.removeProperty('--wp-block-editor-iframe-zoom-out-frame-size');
iframeDocument.documentElement.style.removeProperty('--wp-block-editor-iframe-zoom-out-content-height');
iframeDocument.documentElement.style.removeProperty('--wp-block-editor-iframe-zoom-out-inner-height');
iframeDocument.documentElement.style.removeProperty('--wp-block-editor-iframe-zoom-out-container-width');
iframeDocument.documentElement.style.removeProperty('--wp-block-editor-iframe-zoom-out-scale-container-width');
};
}, [scale, frameSize, iframeDocument, iframeWindowInnerHeight, contentHeight, containerWidth, windowInnerWidth, isZoomedOut, scaleContainerWidth]);
// Make sure to not render the before and after focusable div elements in view
// mode. They're only needed to capture focus in edit mode.
const shouldRenderFocusCaptureElements = tabIndex >= 0 && !isPreviewMode;
const iframe = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [shouldRenderFocusCaptureElements && before, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("iframe", {
...props,
style: {
...props.style,
height: props.style?.height,
border: 0
},
ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, setRef]),
tabIndex: tabIndex
// Correct doctype is required to enable rendering in standards
// mode. Also preload the styles to avoid a flash of unstyled
// content.
,
src: src,
title: title,
onKeyDown: event => {
if (props.onKeyDown) {
props.onKeyDown(event);
}
// If the event originates from inside the iframe, it means
// it bubbled through the portal, but only with React
// events. We need to to bubble native events as well,
// though by doing so we also trigger another React event,
// so we need to stop the propagation of this event to avoid
// duplication.
if (event.currentTarget.ownerDocument !== event.target.ownerDocument) {
// We should only stop propagation of the React event,
// the native event should further bubble inside the
// iframe to the document and window.
// Alternatively, we could consider redispatching the
// native event in the iframe.
const {
stopPropagation
} = event.nativeEvent;
event.nativeEvent.stopPropagation = () => {};
event.stopPropagation();
event.nativeEvent.stopPropagation = stopPropagation;
bubbleEvent(event, window.KeyboardEvent, event.currentTarget);
}
},
children: iframeDocument && (0,external_wp_element_namespaceObject.createPortal)(
/*#__PURE__*/
// We want to prevent React events from bubbling throught the iframe
// we bubble these manually.
/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
(0,external_ReactJSXRuntime_namespaceObject.jsxs)("body", {
ref: bodyRef,
className: dist_clsx('block-editor-iframe__body', 'editor-styles-wrapper', ...bodyClasses),
children: [contentResizeListener, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalStyleProvider, {
document: iframeDocument,
children: children
})]
}), iframeDocument.documentElement)
}), shouldRenderFocusCaptureElements && after]
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-iframe__container",
ref: windowResizeRef,
children: [containerResizeListener, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: dist_clsx('block-editor-iframe__scale-container', isZoomedOut && 'is-zoomed-out'),
style: {
'--wp-block-editor-iframe-zoom-out-scale-container-width': isZoomedOut && `${scaleContainerWidth}px`
},
children: iframe
})]
});
}
function IframeIfReady(props, ref) {
const isInitialised = (0,external_wp_data_namespaceObject.useSelect)(select => select(store).getSettings().__internalIsInitialized, []);
// We shouldn't render the iframe until the editor settings are initialised.
// The initial settings are needed to get the styles for the srcDoc, which
// cannot be changed after the iframe is mounted. srcDoc is used to to set
// the initial iframe HTML, which is required to avoid a flash of unstyled
// content.
if (!isInitialised) {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Iframe, {
...props,
forwardedRef: ref
});
}
/* harmony default export */ const iframe = ((0,external_wp_element_namespaceObject.forwardRef)(IframeIfReady));
;// CONCATENATED MODULE: ./node_modules/parsel-js/dist/parsel.js
const TOKENS = {
attribute: /\[\s*(?:(?<namespace>\*|[-\w\P{ASCII}]*)\|)?(?<name>[-\w\P{ASCII}]+)\s*(?:(?<operator>\W?=)\s*(?<value>.+?)\s*(\s(?<caseSensitive>[iIsS]))?\s*)?\]/gu,
id: /#(?<name>[-\w\P{ASCII}]+)/gu,
class: /\.(?<name>[-\w\P{ASCII}]+)/gu,
comma: /\s*,\s*/g,
combinator: /\s*[\s>+~]\s*/g,
'pseudo-element': /::(?<name>[-\w\P{ASCII}]+)(?:\((?<argument>¶*)\))?/gu,
'pseudo-class': /:(?<name>[-\w\P{ASCII}]+)(?:\((?<argument>¶*)\))?/gu,
universal: /(?:(?<namespace>\*|[-\w\P{ASCII}]*)\|)?\*/gu,
type: /(?:(?<namespace>\*|[-\w\P{ASCII}]*)\|)?(?<name>[-\w\P{ASCII}]+)/gu, // this must be last
};
const TRIM_TOKENS = new Set(['combinator', 'comma']);
const RECURSIVE_PSEUDO_CLASSES = new Set([
'not',
'is',
'where',
'has',
'matches',
'-moz-any',
'-webkit-any',
'nth-child',
'nth-last-child',
]);
const nthChildRegExp = /(?<index>[\dn+-]+)\s+of\s+(?<subtree>.+)/;
const RECURSIVE_PSEUDO_CLASSES_ARGS = {
'nth-child': nthChildRegExp,
'nth-last-child': nthChildRegExp,
};
const getArgumentPatternByType = (type) => {
switch (type) {
case 'pseudo-element':
case 'pseudo-class':
return new RegExp(TOKENS[type].source.replace('(?<argument>¶*)', '(?<argument>.*)'), 'gu');
default:
return TOKENS[type];
}
};
function gobbleParens(text, offset) {
let nesting = 0;
let result = '';
for (; offset < text.length; offset++) {
const char = text[offset];
switch (char) {
case '(':
++nesting;
break;
case ')':
--nesting;
break;
}
result += char;
if (nesting === 0) {
return result;
}
}
return result;
}
function tokenizeBy(text, grammar = TOKENS) {
if (!text) {
return [];
}
const tokens = [text];
for (const [type, pattern] of Object.entries(grammar)) {
for (let i = 0; i < tokens.length; i++) {
const token = tokens[i];
if (typeof token !== 'string') {
continue;
}
pattern.lastIndex = 0;
const match = pattern.exec(token);
if (!match) {
continue;
}
const from = match.index - 1;
const args = [];
const content = match[0];
const before = token.slice(0, from + 1);
if (before) {
args.push(before);
}
args.push({
...match.groups,
type,
content,
});
const after = token.slice(from + content.length + 1);
if (after) {
args.push(after);
}
tokens.splice(i, 1, ...args);
}
}
let offset = 0;
for (const token of tokens) {
switch (typeof token) {
case 'string':
throw new Error(`Unexpected sequence ${token} found at index ${offset}`);
case 'object':
offset += token.content.length;
token.pos = [offset - token.content.length, offset];
if (TRIM_TOKENS.has(token.type)) {
token.content = token.content.trim() || ' ';
}
break;
}
}
return tokens;
}
const STRING_PATTERN = /(['"])([^\\\n]+?)\1/g;
const ESCAPE_PATTERN = /\\./g;
function parsel_tokenize(selector, grammar = TOKENS) {
// Prevent leading/trailing whitespaces from being interpreted as combinators
selector = selector.trim();
if (selector === '') {
return [];
}
const replacements = [];
// Replace escapes with placeholders.
selector = selector.replace(ESCAPE_PATTERN, (value, offset) => {
replacements.push({ value, offset });
return '\uE000'.repeat(value.length);
});
// Replace strings with placeholders.
selector = selector.replace(STRING_PATTERN, (value, quote, content, offset) => {
replacements.push({ value, offset });
return `${quote}${'\uE001'.repeat(content.length)}${quote}`;
});
// Replace parentheses with placeholders.
{
let pos = 0;
let offset;
while ((offset = selector.indexOf('(', pos)) > -1) {
const value = gobbleParens(selector, offset);
replacements.push({ value, offset });
selector = `${selector.substring(0, offset)}(${'¶'.repeat(value.length - 2)})${selector.substring(offset + value.length)}`;
pos = offset + value.length;
}
}
// Now we have no nested structures and we can parse with regexes
const tokens = tokenizeBy(selector, grammar);
// Replace placeholders in reverse order.
const changedTokens = new Set();
for (const replacement of replacements.reverse()) {
for (const token of tokens) {
const { offset, value } = replacement;
if (!(token.pos[0] <= offset &&
offset + value.length <= token.pos[1])) {
continue;
}
const { content } = token;
const tokenOffset = offset - token.pos[0];
token.content =
content.slice(0, tokenOffset) +
value +
content.slice(tokenOffset + value.length);
if (token.content !== content) {
changedTokens.add(token);
}
}
}
// Update changed tokens.
for (const token of changedTokens) {
const pattern = getArgumentPatternByType(token.type);
if (!pattern) {
throw new Error(`Unknown token type: ${token.type}`);
}
pattern.lastIndex = 0;
const match = pattern.exec(token.content);
if (!match) {
throw new Error(`Unable to parse content for ${token.type}: ${token.content}`);
}
Object.assign(token, match.groups);
}
return tokens;
}
/**
* Convert a flat list of tokens into a tree of complex & compound selectors
*/
function nestTokens(tokens, { list = true } = {}) {
if (list && tokens.find((t) => t.type === 'comma')) {
const selectors = [];
const temp = [];
for (let i = 0; i < tokens.length; i++) {
if (tokens[i].type === 'comma') {
if (temp.length === 0) {
throw new Error('Incorrect comma at ' + i);
}
selectors.push(nestTokens(temp, { list: false }));
temp.length = 0;
}
else {
temp.push(tokens[i]);
}
}
if (temp.length === 0) {
throw new Error('Trailing comma');
}
else {
selectors.push(nestTokens(temp, { list: false }));
}
return { type: 'list', list: selectors };
}
for (let i = tokens.length - 1; i >= 0; i--) {
let token = tokens[i];
if (token.type === 'combinator') {
let left = tokens.slice(0, i);
let right = tokens.slice(i + 1);
return {
type: 'complex',
combinator: token.content,
left: nestTokens(left),
right: nestTokens(right),
};
}
}
switch (tokens.length) {
case 0:
throw new Error('Could not build AST.');
case 1:
// If we're here, there are no combinators, so it's just a list.
return tokens[0];
default:
return {
type: 'compound',
list: [...tokens], // clone to avoid pointers messing up the AST
};
}
}
/**
* Traverse an AST in depth-first order
*/
function* flatten(node,
/**
* @internal
*/
parent) {
switch (node.type) {
case 'list':
for (let child of node.list) {
yield* flatten(child, node);
}
break;
case 'complex':
yield* flatten(node.left, node);
yield* flatten(node.right, node);
break;
case 'compound':
yield* node.list.map((token) => [token, node]);
break;
default:
yield [node, parent];
}
}
/**
* Traverse an AST (or part thereof), in depth-first order
*/
function walk(node, visit,
/**
* @internal
*/
parent) {
if (!node) {
return;
}
for (const [token, ast] of flatten(node, parent)) {
visit(token, ast);
}
}
/**
* Parse a CSS selector
*
* @param selector - The selector to parse
* @param options.recursive - Whether to parse the arguments of pseudo-classes like :is(), :has() etc. Defaults to true.
* @param options.list - Whether this can be a selector list (A, B, C etc). Defaults to true.
*/
function parse(selector, { recursive = true, list = true } = {}) {
const tokens = parsel_tokenize(selector);
if (!tokens) {
return;
}
const ast = nestTokens(tokens, { list });
if (!recursive) {
return ast;
}
for (const [token] of flatten(ast)) {
if (token.type !== 'pseudo-class' || !token.argument) {
continue;
}
if (!RECURSIVE_PSEUDO_CLASSES.has(token.name)) {
continue;
}
let argument = token.argument;
const childArg = RECURSIVE_PSEUDO_CLASSES_ARGS[token.name];
if (childArg) {
const match = childArg.exec(argument);
if (!match) {
continue;
}
Object.assign(token, match.groups);
argument = match.groups['subtree'];
}
if (!argument) {
continue;
}
Object.assign(token, {
subtree: parse(argument, {
recursive: true,
list: true,
}),
});
}
return ast;
}
/**
* Converts the given list or (sub)tree to a string.
*/
function stringify(listOrNode) {
let tokens;
if (Array.isArray(listOrNode)) {
tokens = listOrNode;
}
else {
tokens = [...flatten(listOrNode)].map(([token]) => token);
}
return tokens.map(token => token.content).join('');
}
/**
* To convert the specificity array to a number
*/
function specificityToNumber(specificity, base) {
base = base || Math.max(...specificity) + 1;
return (specificity[0] * (base << 1) + specificity[1] * base + specificity[2]);
}
/**
* Calculate specificity of a selector.
*
* If the selector is a list, the max specificity is returned.
*/
function specificity(selector) {
let ast = selector;
if (typeof ast === 'string') {
ast = parse(ast, { recursive: true });
}
if (!ast) {
return [];
}
if (ast.type === 'list' && 'list' in ast) {
let base = 10;
const specificities = ast.list.map((ast) => {
const sp = specificity(ast);
base = Math.max(base, ...specificity(ast));
return sp;
});
const numbers = specificities.map((ast) => specificityToNumber(ast, base));
return specificities[numbers.indexOf(Math.max(...numbers))];
}
const ret = [0, 0, 0];
for (const [token] of flatten(ast)) {
switch (token.type) {
case 'id':
ret[0]++;
break;
case 'class':
case 'attribute':
ret[1]++;
break;
case 'pseudo-element':
case 'type':
ret[2]++;
break;
case 'pseudo-class':
if (token.name === 'where') {
break;
}
if (!RECURSIVE_PSEUDO_CLASSES.has(token.name) ||
!token.subtree) {
ret[1]++;
break;
}
const sub = specificity(token.subtree);
sub.forEach((s, i) => (ret[i] += s));
// :nth-child() & :nth-last-child() add (0, 1, 0) to the specificity of their most complex selector
if (token.name === 'nth-child' ||
token.name === 'nth-last-child') {
ret[1]++;
}
}
}
return ret;
}
// EXTERNAL MODULE: ./node_modules/postcss/lib/postcss.js
var postcss = __webpack_require__(4529);
;// CONCATENATED MODULE: ./node_modules/postcss/lib/postcss.mjs
/* harmony default export */ const lib_postcss = (postcss);
const postcss_stringify = postcss.stringify
const fromJSON = postcss.fromJSON
const postcss_plugin = postcss.plugin
const postcss_parse = postcss.parse
const list = postcss.list
const postcss_document = postcss.document
const comment = postcss.comment
const atRule = postcss.atRule
const rule = postcss.rule
const decl = postcss.decl
const root = postcss.root
const CssSyntaxError = postcss.CssSyntaxError
const Declaration = postcss.Declaration
const Container = postcss.Container
const Processor = postcss.Processor
const Document = postcss.Document
const Comment = postcss.Comment
const postcss_Warning = postcss.Warning
const AtRule = postcss.AtRule
const Result = postcss.Result
const Input = postcss.Input
const Rule = postcss.Rule
const postcss_Root = postcss.Root
const Node = postcss.Node
// EXTERNAL MODULE: ./node_modules/postcss-prefix-selector/index.js
var postcss_prefix_selector = __webpack_require__(1443);
var postcss_prefix_selector_default = /*#__PURE__*/__webpack_require__.n(postcss_prefix_selector);
// EXTERNAL MODULE: ./node_modules/postcss-urlrebase/index.js
var postcss_urlrebase = __webpack_require__(5404);
var postcss_urlrebase_default = /*#__PURE__*/__webpack_require__.n(postcss_urlrebase);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/utils/transform-styles/index.js
/**
* External dependencies
*/
const cacheByWrapperSelector = new Map();
const ROOT_SELECTOR_TOKENS = [{
type: 'type',
content: 'body'
}, {
type: 'type',
content: 'html'
}, {
type: 'pseudo-class',
content: ':root'
}, {
type: 'pseudo-class',
content: ':where(body)'
}, {
type: 'pseudo-class',
content: ':where(:root)'
}, {
type: 'pseudo-class',
content: ':where(html)'
}];
/**
* Prefixes root selectors in a way that ensures consistent specificity.
* This requires special handling, since prefixing a classname before
* html, body, or :root will generally result in an invalid selector.
*
* Some libraries will simply replace the root selector with the prefix
* instead, but this results in inconsistent specificity.
*
* This function instead inserts the prefix after the root tags but before
* any other part of the selector. This results in consistent specificity:
* - If a `:where()` selector is used for the prefix, all selectors output
* by `transformStyles` will have no specificity increase.
* - If a classname, id, or something else is used as the prefix, all selectors
* will have the same specificity bump when transformed.
*
* @param {string} prefix The prefix.
* @param {string} selector The selector.
*
* @return {string} The prefixed root selector.
*/
function prefixRootSelector(prefix, selector) {
// Use a tokenizer, since regular expressions are unreliable.
const tokenized = parsel_tokenize(selector);
// Find the last token that contains a root selector by walking back
// through the tokens.
const lastRootIndex = tokenized.findLastIndex(({
content,
type
}) => {
return ROOT_SELECTOR_TOKENS.some(rootSelector => content === rootSelector.content && type === rootSelector.type);
});
// Walk forwards to find the combinator after the last root.
// This is where the root ends and the rest of the selector begins,
// and the index to insert before.
// Doing it this way takes into account that a root selector like
// 'body' may have additional id/class/pseudo-class/attribute-selector
// parts chained to it, which is difficult to quantify using a regex.
let insertionPoint = -1;
for (let i = lastRootIndex + 1; i < tokenized.length; i++) {
if (tokenized[i].type === 'combinator') {
insertionPoint = i;
break;
}
}
// Tokenize and insert the prefix with a ' ' combinator before it.
const tokenizedPrefix = parsel_tokenize(prefix);
tokenized.splice(
// Insert at the insertion point, or the end.
insertionPoint === -1 ? tokenized.length : insertionPoint, 0, {
type: 'combinator',
content: ' '
}, ...tokenizedPrefix);
return stringify(tokenized);
}
function transformStyle({
css,
ignoredSelectors = [],
baseURL
}, wrapperSelector = '', transformOptions) {
// When there is no wrapper selector and no base URL, there is no need
// to transform the CSS. This is most cases because in the default
// iframed editor, no wrapping is needed, and not many styles
// provide a base URL.
if (!wrapperSelector && !baseURL) {
return css;
}
try {
var _transformOptions$ign;
const excludedSelectors = [...ignoredSelectors, ...((_transformOptions$ign = transformOptions?.ignoredSelectors) !== null && _transformOptions$ign !== void 0 ? _transformOptions$ign : []), wrapperSelector];
return lib_postcss([wrapperSelector && postcss_prefix_selector_default()({
prefix: wrapperSelector,
transform(prefix, selector, prefixedSelector) {
// For backwards compatibility, don't use the `exclude` option
// of postcss-prefix-selector, instead handle it here to match
// the behavior of the old library (postcss-prefix-wrap) that
// `transformStyle` previously used.
if (excludedSelectors.some(excludedSelector => excludedSelector instanceof RegExp ? selector.match(excludedSelector) : selector.includes(excludedSelector))) {
return selector;
}
const hasRootSelector = ROOT_SELECTOR_TOKENS.some(rootSelector => selector.startsWith(rootSelector.content));
// Reorganize root selectors such that the root part comes before the prefix,
// but the prefix still comes before the remaining part of the selector.
if (hasRootSelector) {
return prefixRootSelector(prefix, selector);
}
return prefixedSelector;
}
}), baseURL && postcss_urlrebase_default()({
rootUrl: baseURL
})].filter(Boolean)).process(css, {}).css; // use sync PostCSS API
} catch (error) {
if (error instanceof CssSyntaxError) {
// eslint-disable-next-line no-console
console.warn('wp.blockEditor.transformStyles Failed to transform CSS.', error.message + '\n' + error.showSourceCode(false));
} else {
// eslint-disable-next-line no-console
console.warn('wp.blockEditor.transformStyles Failed to transform CSS.', error);
}
return null;
}
}
/**
* @typedef {Object} EditorStyle
* @property {string} css the CSS block(s), as a single string.
* @property {?string} baseURL the base URL to be used as the reference when rewritting urls.
* @property {?string[]} ignoredSelectors the selectors not to wrap.
*/
/**
* @typedef {Object} TransformOptions
* @property {?string[]} ignoredSelectors the selectors not to wrap.
*/
/**
* Applies a series of CSS rule transforms to wrap selectors inside a given class and/or rewrite URLs depending on the parameters passed.
*
* @param {EditorStyle[]} styles CSS rules.
* @param {string} wrapperSelector Wrapper selector.
* @param {TransformOptions} transformOptions Additional options for style transformation.
* @return {Array} converted rules.
*/
const transform_styles_transformStyles = (styles, wrapperSelector = '', transformOptions) => {
let cache = cacheByWrapperSelector.get(wrapperSelector);
if (!cache) {
cache = new WeakMap();
cacheByWrapperSelector.set(wrapperSelector, cache);
}
return styles.map(style => {
let css = cache.get(style);
if (!css) {
css = transformStyle(style, wrapperSelector, transformOptions);
cache.set(style, css);
}
return css;
});
};
/* harmony default export */ const transform_styles = (transform_styles_transformStyles);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/editor-styles/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
k([names, a11y]);
function useDarkThemeBodyClassName(styles, scope) {
return (0,external_wp_element_namespaceObject.useCallback)(node => {
if (!node) {
return;
}
const {
ownerDocument
} = node;
const {
defaultView,
body
} = ownerDocument;
const canvas = scope ? ownerDocument.querySelector(scope) : body;
let backgroundColor;
if (!canvas) {
// The real .editor-styles-wrapper element might not exist in the
// DOM, so calculate the background color by creating a fake
// wrapper.
const tempCanvas = ownerDocument.createElement('div');
tempCanvas.classList.add('editor-styles-wrapper');
body.appendChild(tempCanvas);
backgroundColor = defaultView?.getComputedStyle(tempCanvas, null).getPropertyValue('background-color');
body.removeChild(tempCanvas);
} else {
backgroundColor = defaultView?.getComputedStyle(canvas, null).getPropertyValue('background-color');
}
const colordBackgroundColor = w(backgroundColor);
// If background is transparent, it should be treated as light color.
if (colordBackgroundColor.luminance() > 0.5 || colordBackgroundColor.alpha() === 0) {
body.classList.remove('is-dark-theme');
} else {
body.classList.add('is-dark-theme');
}
}, [styles, scope]);
}
function EditorStyles({
styles,
scope,
transformOptions
}) {
const overrides = (0,external_wp_data_namespaceObject.useSelect)(select => unlock(select(store)).getStyleOverrides(), []);
const [transformedStyles, transformedSvgs] = (0,external_wp_element_namespaceObject.useMemo)(() => {
const _styles = Object.values(styles !== null && styles !== void 0 ? styles : []);
for (const [id, override] of overrides) {
const index = _styles.findIndex(({
id: _id
}) => id === _id);
const overrideWithId = {
...override,
id
};
if (index === -1) {
_styles.push(overrideWithId);
} else {
_styles[index] = overrideWithId;
}
}
return [transform_styles(_styles.filter(style => style?.css), scope, transformOptions), _styles.filter(style => style.__unstableType === 'svgs').map(style => style.assets).join('')];
}, [styles, overrides, scope, transformOptions]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("style", {
ref: useDarkThemeBodyClassName(transformedStyles, scope)
}), transformedStyles.map((css, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("style", {
children: css
}, index)), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 0 0",
width: "0",
height: "0",
role: "none",
style: {
visibility: 'hidden',
position: 'absolute',
left: '-9999px',
overflow: 'hidden'
},
dangerouslySetInnerHTML: {
__html: transformedSvgs
}
})]
});
}
/* harmony default export */ const editor_styles = ((0,external_wp_element_namespaceObject.memo)(EditorStyles));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-preview/auto.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
// This is used to avoid rendering the block list if the sizes change.
let MemoizedBlockList;
const MAX_HEIGHT = 2000;
const EMPTY_ADDITIONAL_STYLES = [];
function ScaledBlockPreview({
viewportWidth,
containerWidth,
minHeight,
additionalStyles = EMPTY_ADDITIONAL_STYLES
}) {
if (!viewportWidth) {
viewportWidth = containerWidth;
}
const [contentResizeListener, {
height: contentHeight
}] = (0,external_wp_compose_namespaceObject.useResizeObserver)();
const {
styles
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const settings = select(store).getSettings();
return {
styles: settings.styles
};
}, []);
// Avoid scrollbars for pattern previews.
const editorStyles = (0,external_wp_element_namespaceObject.useMemo)(() => {
if (styles) {
return [...styles, {
css: 'body{height:auto;overflow:hidden;border:none;padding:0;}',
__unstableType: 'presets'
}, ...additionalStyles];
}
return styles;
}, [styles, additionalStyles]);
// Initialize on render instead of module top level, to avoid circular dependency issues.
MemoizedBlockList = MemoizedBlockList || (0,external_wp_element_namespaceObject.memo)(BlockList);
const scale = containerWidth / viewportWidth;
const aspectRatio = contentHeight ? containerWidth / (contentHeight * scale) : 0;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Disabled, {
className: "block-editor-block-preview__content",
style: {
transform: `scale(${scale})`,
// Using width + aspect-ratio instead of height here triggers browsers' native
// handling of scrollbar's visibility. It prevents the flickering issue seen
// in https://github.com/WordPress/gutenberg/issues/52027.
// See https://github.com/WordPress/gutenberg/pull/52921 for more info.
aspectRatio,
maxHeight: contentHeight > MAX_HEIGHT ? MAX_HEIGHT * scale : undefined,
minHeight
},
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(iframe, {
contentRef: (0,external_wp_compose_namespaceObject.useRefEffect)(bodyElement => {
const {
ownerDocument: {
documentElement
}
} = bodyElement;
documentElement.classList.add('block-editor-block-preview__content-iframe');
documentElement.style.position = 'absolute';
documentElement.style.width = '100%';
// Necessary for contentResizeListener to work.
bodyElement.style.boxSizing = 'border-box';
bodyElement.style.position = 'absolute';
bodyElement.style.width = '100%';
}, []),
"aria-hidden": true,
tabIndex: -1,
style: {
position: 'absolute',
width: viewportWidth,
height: contentHeight,
pointerEvents: 'none',
// This is a catch-all max-height for patterns.
// See: https://github.com/WordPress/gutenberg/pull/38175.
maxHeight: MAX_HEIGHT,
minHeight: scale !== 0 && scale < 1 && minHeight ? minHeight / scale : minHeight
},
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(editor_styles, {
styles: editorStyles
}), contentResizeListener, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MemoizedBlockList, {
renderAppender: false
})]
})
});
}
function AutoBlockPreview(props) {
const [containerResizeListener, {
width: containerWidth
}] = (0,external_wp_compose_namespaceObject.useResizeObserver)();
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
style: {
position: 'relative',
width: '100%',
height: 0
},
children: containerResizeListener
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-block-preview__container",
children: !!containerWidth && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ScaledBlockPreview, {
...props,
containerWidth: containerWidth
})
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-preview/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const block_preview_EMPTY_ADDITIONAL_STYLES = [];
function BlockPreview({
blocks,
viewportWidth = 1200,
minHeight,
additionalStyles = block_preview_EMPTY_ADDITIONAL_STYLES,
// Deprecated props:
__experimentalMinHeight,
__experimentalPadding
}) {
if (__experimentalMinHeight) {
minHeight = __experimentalMinHeight;
external_wp_deprecated_default()('The __experimentalMinHeight prop', {
since: '6.2',
version: '6.4',
alternative: 'minHeight'
});
}
if (__experimentalPadding) {
additionalStyles = [...additionalStyles, {
css: `body { padding: ${__experimentalPadding}px; }`
}];
external_wp_deprecated_default()('The __experimentalPadding prop of BlockPreview', {
since: '6.2',
version: '6.4',
alternative: 'additionalStyles'
});
}
const originalSettings = (0,external_wp_data_namespaceObject.useSelect)(select => select(store).getSettings(), []);
const settings = (0,external_wp_element_namespaceObject.useMemo)(() => ({
...originalSettings,
focusMode: false,
// Disable "Spotlight mode".
__unstableIsPreviewMode: true
}), [originalSettings]);
const renderedBlocks = (0,external_wp_element_namespaceObject.useMemo)(() => Array.isArray(blocks) ? blocks : [blocks], [blocks]);
if (!blocks || blocks.length === 0) {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ExperimentalBlockEditorProvider, {
value: renderedBlocks,
settings: settings,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AutoBlockPreview, {
viewportWidth: viewportWidth,
minHeight: minHeight,
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({
blocks,
props = {},
layout
}) {
const originalSettings = (0,external_wp_data_namespaceObject.useSelect)(select => select(store).getSettings(), []);
const settings = (0,external_wp_element_namespaceObject.useMemo)(() => ({
...originalSettings,
styles: undefined,
// Clear styles included by the parent settings, as they are already output by the parent's EditorStyles.
focusMode: false,
// Disable "Spotlight mode".
__unstableIsPreviewMode: true
}), [originalSettings]);
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, {
value: renderedBlocks,
settings: settings,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(editor_styles, {}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockListItems, {
renderAppender: false,
layout: layout
})]
});
return {
...props,
ref,
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
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function InserterPreviewPanel({
item
}) {
var _example$viewportWidt;
const {
name,
title,
icon,
description,
initialAttributes,
example
} = item;
const isReusable = (0,external_wp_blocks_namespaceObject.isReusableBlock)(item);
const blocks = (0,external_wp_element_namespaceObject.useMemo)(() => {
if (!example) {
return (0,external_wp_blocks_namespaceObject.createBlock)(name, initialAttributes);
}
return (0,external_wp_blocks_namespaceObject.getBlockFromExample)(name, {
attributes: {
...example.attributes,
...initialAttributes
},
innerBlocks: example.innerBlocks
});
}, [name, example, initialAttributes]);
// Same as height of BlockPreviewPanel.
const previewHeight = 144;
const sidebarWidth = 280;
const viewportWidth = (_example$viewportWidt = example?.viewportWidth) !== null && _example$viewportWidt !== void 0 ? _example$viewportWidt : 500;
const scale = sidebarWidth / viewportWidth;
const minHeight = scale !== 0 && scale < 1 && previewHeight ? previewHeight / scale : previewHeight;
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, {
blocks: blocks,
viewportWidth: viewportWidth,
minHeight: previewHeight,
additionalStyles:
//We want this CSS to be in sync with the one in BlockPreviewPanel.
[{
css: `
body {
padding: 24px;
min-height:${Math.round(minHeight)}px;
display:flex;
align-items:center;
}
.is-root-container { width: 100%; }
`
}]
})
}) : /*#__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, {
title: title,
icon: icon,
description: description
})]
});
}
/* harmony default export */ const preview_panel = (InserterPreviewPanel);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter-listbox/item.js
/**
* WordPress dependencies
*/
function InserterListboxItem({
isFirst,
as: Component,
children,
...props
}, ref) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Composite.Item, {
ref: ref,
role: "option"
// Use the Composite.Item `accessibleWhenDisabled` prop
// over Button's `isFocusable`. The latter was shown to
// cause an issue with tab order in the inserter list.
,
accessibleWhenDisabled: true,
...props,
render: htmlProps => {
const propsWithTabIndex = {
...htmlProps,
tabIndex: isFirst ? 0 : htmlProps.tabIndex
};
if (Component) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, {
...propsWithTabIndex,
children: children
});
}
if (typeof children === 'function') {
return children(propsWithTabIndex);
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
...propsWithTabIndex,
children: children
});
}
});
}
/* 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
/**
* WordPress dependencies
*/
const dragHandle = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
width: "24",
height: "24",
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
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
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockDraggableChip({
count,
icon,
isPattern,
fadeWhenDisabled
}) {
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, {
justify: "center",
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, {
icon: 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, {
icon: drag_handle
})
}), 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
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const InserterDraggableBlocks = ({
isEnabled,
blocks,
icon,
children,
pattern
}) => {
const transferData = {
type: 'inserter',
blocks
};
const blockTypeIcon = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockType
} = select(external_wp_blocks_namespaceObject.store);
return blocks.length === 1 && getBlockType(blocks[0].name)?.icon;
}, [blocks]);
const {
startDragging,
stopDragging
} = unlock((0,external_wp_data_namespaceObject.useDispatch)(store));
if (!isEnabled) {
return children({
draggable: false,
onDragStart: undefined,
onDragEnd: undefined
});
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Draggable, {
__experimentalTransferDataType: "wp-blocks",
transferData: transferData,
onDragStart: event => {
startDragging();
const parsedBlocks = pattern?.type === INSERTER_PATTERN_TYPES.user && pattern?.syncStatus !== 'unsynced' ? [(0,external_wp_blocks_namespaceObject.createBlock)('core/block', {
ref: pattern.id
})] : blocks;
event.dataTransfer.setData('text/html', (0,external_wp_blocks_namespaceObject.serialize)(parsedBlocks));
},
onDragEnd: () => {
stopDragging();
},
__experimentalDragComponent: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockDraggableChip, {
count: blocks.length,
icon: icon || !pattern && blockTypeIcon,
isPattern: !!pattern
}),
children: ({
onDraggableStart,
onDraggableEnd
}) => {
return children({
draggable: true,
onDragStart: onDraggableStart,
onDragEnd: onDraggableEnd
});
}
});
};
/* harmony default export */ const inserter_draggable_blocks = (InserterDraggableBlocks);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter-list-item/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function InserterListItem({
className,
isFirst,
item,
onSelect,
onHover,
isDraggable,
...props
}) {
const isDraggingRef = (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,
blocks: blocks,
icon: item.icon,
children: ({
draggable,
onDragStart,
onDragEnd
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: dist_clsx('block-editor-block-types-list__list-item', {
'is-synced': isSynced
}),
draggable: draggable,
onDragStart: event => {
isDraggingRef.current = true;
if (onDragStart) {
onHover(null);
onDragStart(event);
}
},
onDragEnd: event => {
isDraggingRef.current = false;
if (onDragEnd) {
onDragEnd(event);
}
},
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(inserter_listbox_item, {
isFirst: isFirst,
className: dist_clsx('block-editor-block-types-list__item', className),
disabled: item.isDisabled,
onClick: event => {
event.preventDefault();
onSelect(item, (0,external_wp_keycodes_namespaceObject.isAppleOS)() ? event.metaKey : event.ctrlKey);
onHover(null);
},
onKeyDown: event => {
const {
keyCode
} = event;
if (keyCode === external_wp_keycodes_namespaceObject.ENTER) {
event.preventDefault();
onSelect(item, (0,external_wp_keycodes_namespaceObject.isAppleOS)() ? event.metaKey : event.ctrlKey);
onHover(null);
}
},
onMouseEnter: () => {
if (isDraggingRef.current) {
return;
}
onHover(item);
},
onMouseLeave: () => onHover(null),
...props,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
className: "block-editor-block-types-list__item-icon",
style: itemIconStyle,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_icon, {
icon: item.icon,
showColors: true
})
}), /*#__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, {
numberOfLines: 3,
children: item.title
})
})]
})
})
});
}
/* 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
/**
* WordPress dependencies
*/
function InserterListboxGroup(props, ref) {
const [shouldSpeak, setShouldSpeak] = (0,external_wp_element_namespaceObject.useState)(false);
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (shouldSpeak) {
(0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.__)('Use left and right arrow keys to move through blocks'));
}
}, [shouldSpeak]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
ref: ref,
role: "listbox",
"aria-orientation": "horizontal",
onFocus: () => {
setShouldSpeak(true);
},
onBlur: event => {
const focusingOutsideGroup = !event.currentTarget.contains(event.relatedTarget);
if (focusingOutsideGroup) {
setShouldSpeak(false);
}
},
...props
});
}
/* harmony default export */ const group = ((0,external_wp_element_namespaceObject.forwardRef)(InserterListboxGroup));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter-listbox/row.js
/**
* WordPress dependencies
*/
function InserterListboxRow(props, ref) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Composite.Group, {
role: "presentation",
ref: ref,
...props
});
}
/* harmony default export */ const inserter_listbox_row = ((0,external_wp_element_namespaceObject.forwardRef)(InserterListboxRow));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-types-list/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function chunk(array, size) {
const chunks = [];
for (let i = 0, j = array.length; i < j; i += size) {
chunks.push(array.slice(i, i + size));
}
return chunks;
}
function BlockTypesList({
items = [],
onSelect,
onHover = () => {},
children,
label,
isDraggable = true
}) {
const className = 'block-editor-block-types-list';
const listId = (0,external_wp_compose_namespaceObject.useInstanceId)(BlockTypesList, className);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(group, {
className: className,
"aria-label": label,
children: [chunk(items, 3).map((row, i) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inserter_listbox_row, {
children: row.map((item, j) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inserter_list_item, {
item: item,
className: (0,external_wp_blocks_namespaceObject.getBlockMenuDefaultClassName)(item.id),
onSelect: onSelect,
onHover: onHover,
isDraggable: isDraggable && !item.isDisabled,
isFirst: i === 0 && j === 0,
rowId: `${listId}-${i}`
}, item.id))
}, i)), children]
});
}
/* harmony default export */ const block_types_list = (BlockTypesList);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/panel.js
/**
* WordPress dependencies
*/
function InserterPanel({
title,
icon,
children
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-inserter__panel-header",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("h2", {
className: "block-editor-inserter__panel-title",
children: title
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Icon, {
icon: icon
})]
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-inserter__panel-content",
children: children
})]
});
}
/* harmony default export */ const panel = (InserterPanel);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/hooks/use-block-types-state.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Retrieves the block types inserter state.
*
* @param {string=} rootClientId Insertion's root client ID.
* @param {Function} onInsert function called when inserter a list of blocks.
* @param {boolean} isQuick
* @return {Array} Returns the block types state. (block types, categories, collections, onSelect handler)
*/
const useBlockTypesState = (rootClientId, onInsert, isQuick) => {
const options = (0,external_wp_element_namespaceObject.useMemo)(() => ({
[withRootClientIdOptionKey]: !isQuick
}), [isQuick]);
const [items] = (0,external_wp_data_namespaceObject.useSelect)(select => [select(store).getInserterItems(rootClientId, options)], [rootClientId, options]);
const [categories, collections] = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getCategories,
getCollections
} = select(external_wp_blocks_namespaceObject.store);
return [getCategories(), getCollections()];
}, []);
const onSelectItem = (0,external_wp_element_namespaceObject.useCallback)(({
name,
initialAttributes,
innerBlocks,
syncStatus,
content,
rootClientId: _rootClientId
}, shouldFocusBlock) => {
const insertedBlock = syncStatus === 'unsynced' ? (0,external_wp_blocks_namespaceObject.parse)(content, {
__unstableSkipMigrationLogs: true
}) : (0,external_wp_blocks_namespaceObject.createBlock)(name, initialAttributes, (0,external_wp_blocks_namespaceObject.createBlocksFromInnerBlocksTemplate)(innerBlocks));
onInsert(insertedBlock, undefined, shouldFocusBlock, _rootClientId);
}, [onInsert]);
return [items, categories, collections, onSelectItem];
};
/* harmony default export */ const use_block_types_state = (useBlockTypesState);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter-listbox/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function InserterListbox({
children
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Composite, {
focusShift: true,
focusWrap: "horizontal",
render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {}),
children: children
});
}
/* harmony default export */ const inserter_listbox = (InserterListbox);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/no-results.js
/**
* WordPress dependencies
*/
function InserterNoResults() {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-inserter__no-results",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
className: "block-editor-inserter__no-results-icon",
icon: block_default
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("p", {
children: (0,external_wp_i18n_namespaceObject.__)('No results found.')
})]
});
}
/* harmony default export */ const no_results = (InserterNoResults);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/block-types-tab.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const getBlockNamespace = item => item.name.split('/')[0];
const MAX_SUGGESTED_ITEMS = 6;
/**
* Shared reference to an empty array for cases where it is important to avoid
* returning a new array reference on every invocation and rerendering the component.
*
* @type {Array}
*/
const block_types_tab_EMPTY_ARRAY = [];
function BlockTypesTabPanel({
items,
collections,
categories,
onSelectItem,
onHover,
showMostUsedBlocks,
className
}) {
const suggestedItems = (0,external_wp_element_namespaceObject.useMemo)(() => {
return orderBy(items, 'frecency', 'desc').slice(0, MAX_SUGGESTED_ITEMS);
}, [items]);
const uncategorizedItems = (0,external_wp_element_namespaceObject.useMemo)(() => {
return items.filter(item => !item.category);
}, [items]);
const itemsPerCollection = (0,external_wp_element_namespaceObject.useMemo)(() => {
// Create a new Object to avoid mutating collection.
const result = {
...collections
};
Object.keys(collections).forEach(namespace => {
result[namespace] = items.filter(item => getBlockNamespace(item) === namespace);
if (result[namespace].length === 0) {
delete result[namespace];
}
});
return result;
}, [items, collections]);
// Hide block preview on unmount.
(0,external_wp_element_namespaceObject.useEffect)(() => () => onHover(null), []);
/**
* The inserter contains a big number of blocks and opening it is a costful operation.
* The rendering is the most costful part of it, in order to improve the responsiveness
* of the "opening" action, these lazy lists allow us to render the inserter category per category,
* once all the categories are rendered, we start rendering the collections and the uncategorized block types.
*/
const currentlyRenderedCategories = (0,external_wp_compose_namespaceObject.useAsyncList)(categories);
const didRenderAllCategories = categories.length === currentlyRenderedCategories.length;
// Async List requires an array.
const collectionEntries = (0,external_wp_element_namespaceObject.useMemo)(() => {
return Object.entries(collections);
}, [collections]);
const currentlyRenderedCollections = (0,external_wp_compose_namespaceObject.useAsyncList)(didRenderAllCategories ? collectionEntries : block_types_tab_EMPTY_ARRAY);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: className,
children: [showMostUsedBlocks &&
// Only show the most used blocks if the total amount of block
// is larger than 1 row, otherwise it is not so useful.
items.length > 3 && !!suggestedItems.length && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(panel, {
title: (0,external_wp_i18n_namespaceObject._x)('Most used', 'blocks'),
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_types_list, {
items: suggestedItems,
onSelect: onSelectItem,
onHover: onHover,
label: (0,external_wp_i18n_namespaceObject._x)('Most used', 'blocks')
})
}), currentlyRenderedCategories.map(category => {
const categoryItems = items.filter(item => item.category === category.slug);
if (!categoryItems || !categoryItems.length) {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(panel, {
title: category.title,
icon: category.icon,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_types_list, {
items: categoryItems,
onSelect: onSelectItem,
onHover: onHover,
label: category.title
})
}, category.slug);
}), didRenderAllCategories && uncategorizedItems.length > 0 && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(panel, {
className: "block-editor-inserter__uncategorized-blocks-panel",
title: (0,external_wp_i18n_namespaceObject.__)('Uncategorized'),
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_types_list, {
items: uncategorizedItems,
onSelect: onSelectItem,
onHover: onHover,
label: (0,external_wp_i18n_namespaceObject.__)('Uncategorized')
})
}), currentlyRenderedCollections.map(([namespace, collection]) => {
const collectionItems = itemsPerCollection[namespace];
if (!collectionItems || !collectionItems.length) {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(panel, {
title: collection.title,
icon: collection.icon,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_types_list, {
items: collectionItems,
onSelect: onSelectItem,
onHover: onHover,
label: collection.title
})
}, namespace);
})]
});
}
function BlockTypesTab({
rootClientId,
onInsert,
onHover,
showMostUsedBlocks
}, ref) {
const [items, categories, collections, onSelectItem] = use_block_types_state(rootClientId, onInsert);
if (!items.length) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(no_results, {});
}
const itemsForCurrentRoot = [];
const itemsRemaining = [];
for (const item of items) {
// Skip reusable blocks, they moved to the patterns tab.
if (item.category === 'reusable') {
continue;
}
if (rootClientId && item.rootClientId === rootClientId) {
itemsForCurrentRoot.push(item);
} else {
itemsRemaining.push(item);
}
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inserter_listbox, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
ref: ref,
children: [!!itemsForCurrentRoot.length && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockTypesTabPanel, {
items: itemsForCurrentRoot,
categories: categories,
collections: collections,
onSelectItem: onSelectItem,
onHover: onHover,
showMostUsedBlocks: showMostUsedBlocks,
className: "block-editor-inserter__insertable-blocks-at-selection"
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockTypesTabPanel, {
items: itemsRemaining,
categories: categories,
collections: collections,
onSelectItem: onSelectItem,
onHover: onHover,
showMostUsedBlocks: showMostUsedBlocks,
className: "block-editor-inserter__all-blocks"
})]
})
});
}
/* harmony default export */ const block_types_tab = ((0,external_wp_element_namespaceObject.forwardRef)(BlockTypesTab));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/block-patterns-explorer/pattern-explorer-sidebar.js
/**
* WordPress dependencies
*/
function PatternCategoriesList({
selectedCategory,
patternCategories,
onClickCategory
}) {
const baseClassName = 'block-editor-block-patterns-explorer__sidebar';
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: `${baseClassName}__categories-list`,
children: patternCategories.map(({
name,
label
}) => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
label: label,
className: `${baseClassName}__categories-list__item`,
isPressed: selectedCategory === name,
onClick: () => {
onClickCategory(name);
},
children: label
}, name);
})
});
}
function PatternsExplorerSearch({
searchValue,
setSearchValue
}) {
const baseClassName = 'block-editor-block-patterns-explorer__search';
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: baseClassName,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.SearchControl, {
__nextHasNoMarginBottom: true,
onChange: setSearchValue,
value: searchValue,
label: (0,external_wp_i18n_namespaceObject.__)('Search for patterns'),
placeholder: (0,external_wp_i18n_namespaceObject.__)('Search')
})
});
}
function PatternExplorerSidebar({
selectedCategory,
patternCategories,
onClickCategory,
searchValue,
setSearchValue
}) {
const baseClassName = 'block-editor-block-patterns-explorer__sidebar';
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: baseClassName,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PatternsExplorerSearch, {
searchValue: searchValue,
setSearchValue: setSearchValue
}), !searchValue && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PatternCategoriesList, {
selectedCategory: selectedCategory,
patternCategories: patternCategories,
onClickCategory: onClickCategory
})]
});
}
/* harmony default export */ const pattern_explorer_sidebar = (PatternExplorerSidebar);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-patterns-paging/index.js
/**
* WordPress dependencies
*/
function Pagination({
currentPage,
numPages,
changePage,
totalItems
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalVStack, {
className: "block-editor-patterns__grid-pagination-wrapper",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalText, {
variant: "muted",
children: (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: %s: Total number of patterns.
(0,external_wp_i18n_namespaceObject._n)('%s item', '%s items', totalItems), totalItems)
}), numPages > 1 && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalHStack, {
expanded: false,
spacing: 3,
justify: "flex-start",
className: "block-editor-patterns__grid-pagination",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalHStack, {
expanded: false,
spacing: 1,
className: "block-editor-patterns__grid-pagination-previous",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button
// TODO: Switch to `true` (40px size) if possible
, {
__next40pxDefaultSize: false,
variant: "tertiary",
onClick: () => changePage(1),
disabled: currentPage === 1,
"aria-label": (0,external_wp_i18n_namespaceObject.__)('First page'),
accessibleWhenDisabled: true,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
children: "\xAB"
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button
// TODO: Switch to `true` (40px size) if possible
, {
__next40pxDefaultSize: false,
variant: "tertiary",
onClick: () => changePage(currentPage - 1),
disabled: currentPage === 1,
"aria-label": (0,external_wp_i18n_namespaceObject.__)('Previous page'),
accessibleWhenDisabled: true,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
children: "\u2039"
})
})]
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalText, {
variant: "muted",
children: (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: 1: Current page number. 2: Total number of pages.
(0,external_wp_i18n_namespaceObject._x)('%1$s of %2$s', 'paging'), currentPage, numPages)
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalHStack, {
expanded: false,
spacing: 1,
className: "block-editor-patterns__grid-pagination-next",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button
// TODO: Switch to `true` (40px size) if possible
, {
__next40pxDefaultSize: false,
variant: "tertiary",
onClick: () => changePage(currentPage + 1),
disabled: currentPage === numPages,
"aria-label": (0,external_wp_i18n_namespaceObject.__)('Next page'),
accessibleWhenDisabled: true,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
children: "\u203A"
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
variant: "tertiary",
onClick: () => changePage(numPages),
disabled: currentPage === numPages,
"aria-label": (0,external_wp_i18n_namespaceObject.__)('Last page'),
size: "default",
accessibleWhenDisabled: true,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
children: "\xBB"
})
})]
})]
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-patterns-list/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const WithToolTip = ({
showTooltip,
title,
children
}) => {
if (showTooltip) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Tooltip, {
text: title,
children: children
});
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: children
});
};
function BlockPattern({
id,
isDraggable,
pattern,
onClick,
onHover,
showTitle = true,
showTooltip,
category
}) {
const [isDragging, setIsDragging] = (0,external_wp_element_namespaceObject.useState)(false);
const {
blocks,
viewportWidth
} = pattern;
const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(BlockPattern);
const descriptionId = `block-editor-block-patterns-list__item-description-${instanceId}`;
// When we have a selected category and the pattern is draggable, we need to update the
// pattern's categories in metadata to only contain the selected category, and pass this to
// InserterDraggableBlocks component. We do that because we use this information for pattern
// shuffling and it makes more sense to show only the ones from the initially selected category during insertion.
const patternBlocks = (0,external_wp_element_namespaceObject.useMemo)(() => {
if (!category || !isDraggable) {
return blocks;
}
return (blocks !== null && blocks !== void 0 ? blocks : []).map(block => {
const clonedBlock = (0,external_wp_blocks_namespaceObject.cloneBlock)(block);
if (clonedBlock.attributes.metadata?.categories?.includes(category)) {
clonedBlock.attributes.metadata.categories = [category];
}
return clonedBlock;
});
}, [blocks, isDraggable, category]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inserter_draggable_blocks, {
isEnabled: isDraggable,
blocks: patternBlocks,
pattern: pattern,
children: ({
draggable,
onDragStart,
onDragEnd
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-block-patterns-list__list-item",
draggable: draggable,
onDragStart: event => {
setIsDragging(true);
if (onDragStart) {
onHover?.(null);
onDragStart(event);
}
},
onDragEnd: event => {
setIsDragging(false);
if (onDragEnd) {
onDragEnd(event);
}
},
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WithToolTip, {
showTooltip: showTooltip && !pattern.type !== INSERTER_PATTERN_TYPES.user,
title: pattern.title,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.Composite.Item, {
render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
role: "option",
"aria-label": pattern.title,
"aria-describedby": pattern.description ? descriptionId : undefined,
className: dist_clsx('block-editor-block-patterns-list__item', {
'block-editor-block-patterns-list__list-item-synced': pattern.type === INSERTER_PATTERN_TYPES.user && !pattern.syncStatus
})
}),
id: id,
onClick: () => {
onClick(pattern, blocks);
onHover?.(null);
},
onMouseEnter: () => {
if (isDragging) {
return;
}
onHover?.(pattern);
},
onMouseLeave: () => onHover?.(null),
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_preview, {
blocks: blocks,
viewportWidth: viewportWidth
}), showTitle && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalHStack, {
className: "block-editor-patterns__pattern-details",
spacing: 2,
children: [pattern.type === INSERTER_PATTERN_TYPES.user && !pattern.syncStatus && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-patterns__pattern-icon-wrapper",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
className: "block-editor-patterns__pattern-icon",
icon: library_symbol
})
}), (!showTooltip || pattern.type === INSERTER_PATTERN_TYPES.user) && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-block-patterns-list__item-title",
children: pattern.title
})]
}), !!pattern.description && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.VisuallyHidden, {
id: descriptionId,
children: pattern.description
})]
})
})
})
});
}
function BlockPatternPlaceholder() {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-block-patterns-list__item is-placeholder"
});
}
function BlockPatternsList({
isDraggable,
blockPatterns,
shownPatterns,
onHover,
onClickPattern,
orientation,
label = (0,external_wp_i18n_namespaceObject.__)('Block patterns'),
category,
showTitle = true,
showTitlesAsTooltip,
pagingProps
}, ref) {
const [activeCompositeId, setActiveCompositeId] = (0,external_wp_element_namespaceObject.useState)(undefined);
(0,external_wp_element_namespaceObject.useEffect)(() => {
// Reset the active composite item whenever the available patterns change,
// to make sure that Composite widget can receive focus correctly when its
// composite items change. The first composite item will receive focus.
const firstCompositeItemId = blockPatterns.find(pattern => shownPatterns.includes(pattern))?.name;
setActiveCompositeId(firstCompositeItemId);
}, [shownPatterns, blockPatterns]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.Composite, {
orientation: orientation,
activeId: activeCompositeId,
setActiveId: setActiveCompositeId,
role: "listbox",
className: "block-editor-block-patterns-list",
"aria-label": label,
ref: ref,
children: [blockPatterns.map(pattern => {
const isShown = shownPatterns.includes(pattern);
return isShown ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockPattern, {
id: pattern.name,
pattern: pattern,
onClick: onClickPattern,
onHover: onHover,
isDraggable: isDraggable,
showTitle: showTitle,
showTooltip: showTitlesAsTooltip,
category: category
}, pattern.name) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockPatternPlaceholder, {}, pattern.name);
}), pagingProps && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Pagination, {
...pagingProps
})]
});
}
/* harmony default export */ const block_patterns_list = ((0,external_wp_element_namespaceObject.forwardRef)(BlockPatternsList));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/hooks/use-insertion-point.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function getIndex({
destinationRootClientId,
destinationIndex,
rootClientId,
registry
}) {
if (rootClientId === destinationRootClientId) {
return destinationIndex;
}
const parents = ['', ...registry.select(store).getBlockParents(destinationRootClientId), destinationRootClientId];
const parentIndex = parents.indexOf(rootClientId);
if (parentIndex !== -1) {
return registry.select(store).getBlockIndex(parents[parentIndex + 1]) + 1;
}
return registry.select(store).getBlockOrder(rootClientId).length;
}
/**
* @typedef WPInserterConfig
*
* @property {string=} rootClientId If set, insertion will be into the
* block with this ID.
* @property {number=} insertionIndex If set, insertion will be into this
* explicit position.
* @property {string=} clientId If set, insertion will be after the
* block with this ID.
* @property {boolean=} isAppender Whether the inserter is an appender
* or not.
* @property {Function=} onSelect Called after insertion.
*/
/**
* Returns the insertion point state given the inserter config.
*
* @param {WPInserterConfig} config Inserter Config.
* @return {Array} Insertion Point State (rootClientID, onInsertBlocks and onToggle).
*/
function useInsertionPoint({
rootClientId = '',
insertionIndex,
clientId,
isAppender,
onSelect,
shouldFocusBlock = true,
selectBlockOnInsert = true
}) {
const registry = (0,external_wp_data_namespaceObject.useRegistry)();
const {
getSelectedBlock
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
destinationRootClientId,
destinationIndex
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getSelectedBlockClientId,
getBlockRootClientId,
getBlockIndex,
getBlockOrder,
getSectionRootClientId,
__unstableGetEditorMode
} = unlock(select(store));
const selectedBlockClientId = getSelectedBlockClientId();
let _destinationRootClientId = rootClientId;
let _destinationIndex;
if (insertionIndex !== undefined) {
// Insert into a specific index.
_destinationIndex = insertionIndex;
} else if (clientId) {
// Insert after a specific client ID.
_destinationIndex = getBlockIndex(clientId);
} else if (!isAppender && selectedBlockClientId) {
const sectionRootClientId = getSectionRootClientId();
// Avoids empty inserter when the selected block is acting
// as the "root".
// See https://github.com/WordPress/gutenberg/pull/66214.
if (__unstableGetEditorMode() === 'zoom-out' && sectionRootClientId === selectedBlockClientId) {
_destinationRootClientId = sectionRootClientId;
_destinationIndex = getBlockOrder(_destinationRootClientId).length;
} else {
_destinationRootClientId = getBlockRootClientId(selectedBlockClientId);
_destinationIndex = getBlockIndex(selectedBlockClientId) + 1;
}
} else {
// Insert at the end of the list.
_destinationIndex = getBlockOrder(_destinationRootClientId).length;
}
return {
destinationRootClientId: _destinationRootClientId,
destinationIndex: _destinationIndex
};
}, [rootClientId, insertionIndex, clientId, isAppender]);
const {
replaceBlocks,
insertBlocks,
showInsertionPoint,
hideInsertionPoint,
setLastFocus
} = unlock((0,external_wp_data_namespaceObject.useDispatch)(store));
const onInsertBlocks = (0,external_wp_element_namespaceObject.useCallback)((blocks, meta, shouldForceFocusBlock = false, _rootClientId) => {
// When we are trying to move focus or select a new block on insert, we also
// need to clear the last focus to avoid the focus being set to the wrong block
// when tabbing back into the canvas if the block was added from outside the
// editor canvas.
if (shouldForceFocusBlock || shouldFocusBlock || selectBlockOnInsert) {
setLastFocus(null);
}
const selectedBlock = getSelectedBlock();
if (!isAppender && selectedBlock && (0,external_wp_blocks_namespaceObject.isUnmodifiedDefaultBlock)(selectedBlock)) {
replaceBlocks(selectedBlock.clientId, blocks, null, shouldFocusBlock || shouldForceFocusBlock ? 0 : null, meta);
} else {
insertBlocks(blocks, isAppender || _rootClientId === undefined ? destinationIndex : getIndex({
destinationRootClientId,
destinationIndex,
rootClientId: _rootClientId,
registry
}), isAppender || _rootClientId === undefined ? destinationRootClientId : _rootClientId, selectBlockOnInsert, shouldFocusBlock || shouldForceFocusBlock ? 0 : null, meta);
}
const blockLength = Array.isArray(blocks) ? blocks.length : 1;
const message = (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: %d: the name of the block that has been added
(0,external_wp_i18n_namespaceObject._n)('%d block added.', '%d blocks added.', blockLength), blockLength);
(0,external_wp_a11y_namespaceObject.speak)(message);
if (onSelect) {
onSelect(blocks);
}
}, [isAppender, getSelectedBlock, replaceBlocks, insertBlocks, destinationRootClientId, destinationIndex, onSelect, shouldFocusBlock, selectBlockOnInsert]);
const onToggleInsertionPoint = (0,external_wp_element_namespaceObject.useCallback)(item => {
if (item?.hasOwnProperty('rootClientId')) {
showInsertionPoint(item.rootClientId, getIndex({
destinationRootClientId,
destinationIndex,
rootClientId: item.rootClientId,
registry
}));
} else {
hideInsertionPoint();
}
}, [showInsertionPoint, hideInsertionPoint, destinationRootClientId, destinationIndex]);
return [destinationRootClientId, onInsertBlocks, onToggleInsertionPoint];
}
/* harmony default export */ const use_insertion_point = (useInsertionPoint);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/hooks/use-patterns-state.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Retrieves the block patterns inserter state.
*
* @param {Function} onInsert function called when inserter a list of blocks.
* @param {string=} rootClientId Insertion's root client ID.
*
* @param {string} selectedCategory The selected pattern category.
* @return {Array} Returns the patterns state. (patterns, categories, onSelect handler)
*/
const usePatternsState = (onInsert, rootClientId, selectedCategory) => {
const {
patternCategories,
patterns,
userPatternCategories
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
__experimentalGetAllowedPatterns,
getSettings
} = select(store);
const {
__experimentalUserPatternCategories,
__experimentalBlockPatternCategories
} = getSettings();
return {
patterns: __experimentalGetAllowedPatterns(rootClientId),
userPatternCategories: __experimentalUserPatternCategories,
patternCategories: __experimentalBlockPatternCategories
};
}, [rootClientId]);
const allCategories = (0,external_wp_element_namespaceObject.useMemo)(() => {
const categories = [...patternCategories];
userPatternCategories?.forEach(userCategory => {
if (!categories.find(existingCategory => existingCategory.name === userCategory.name)) {
categories.push(userCategory);
}
});
return categories;
}, [patternCategories, userPatternCategories]);
const {
createSuccessNotice
} = (0,external_wp_data_namespaceObject.useDispatch)(external_wp_notices_namespaceObject.store);
const onClickPattern = (0,external_wp_element_namespaceObject.useCallback)((pattern, blocks) => {
const patternBlocks = pattern.type === INSERTER_PATTERN_TYPES.user && pattern.syncStatus !== 'unsynced' ? [(0,external_wp_blocks_namespaceObject.createBlock)('core/block', {
ref: pattern.id
})] : blocks;
onInsert((patternBlocks !== null && patternBlocks !== void 0 ? patternBlocks : []).map(block => {
const clonedBlock = (0,external_wp_blocks_namespaceObject.cloneBlock)(block);
if (clonedBlock.attributes.metadata?.categories?.includes(selectedCategory)) {
clonedBlock.attributes.metadata.categories = [selectedCategory];
}
return clonedBlock;
}), pattern.name);
createSuccessNotice((0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %s: block pattern title. */
(0,external_wp_i18n_namespaceObject.__)('Block pattern "%s" inserted.'), pattern.title), {
type: 'snackbar',
id: 'block-pattern-inserted-notice'
});
}, [createSuccessNotice, onInsert, selectedCategory]);
return [patterns, allCategories, onClickPattern];
};
/* harmony default export */ const use_patterns_state = (usePatternsState);
// EXTERNAL MODULE: ./node_modules/remove-accents/index.js
var remove_accents = __webpack_require__(9681);
var remove_accents_default = /*#__PURE__*/__webpack_require__.n(remove_accents);
;// CONCATENATED MODULE: ./node_modules/lower-case/dist.es2015/index.js
/**
* Source: ftp://ftp.unicode.org/Public/UCD/latest/ucd/SpecialCasing.txt
*/
var SUPPORTED_LOCALE = {
tr: {
regexp: /\u0130|\u0049|\u0049\u0307/g,
map: {
İ: "\u0069",
I: "\u0131",
İ: "\u0069",
},
},
az: {
regexp: /\u0130/g,
map: {
İ: "\u0069",
I: "\u0131",
İ: "\u0069",
},
},
lt: {
regexp: /\u0049|\u004A|\u012E|\u00CC|\u00CD|\u0128/g,
map: {
I: "\u0069\u0307",
J: "\u006A\u0307",
Į: "\u012F\u0307",
Ì: "\u0069\u0307\u0300",
Í: "\u0069\u0307\u0301",
Ĩ: "\u0069\u0307\u0303",
},
},
};
/**
* Localized lower case.
*/
function localeLowerCase(str, locale) {
var lang = SUPPORTED_LOCALE[locale.toLowerCase()];
if (lang)
return lowerCase(str.replace(lang.regexp, function (m) { return lang.map[m]; }));
return lowerCase(str);
}
/**
* Lower case as a function.
*/
function lowerCase(str) {
return str.toLowerCase();
}
;// CONCATENATED MODULE: ./node_modules/no-case/dist.es2015/index.js
// Support camel case ("camelCase" -> "camel Case" and "CAMELCase" -> "CAMEL Case").
var DEFAULT_SPLIT_REGEXP = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g];
// Remove all non-word characters.
var DEFAULT_STRIP_REGEXP = /[^A-Z0-9]+/gi;
/**
* Normalize the string into something other libraries can manipulate easier.
*/
function noCase(input, options) {
if (options === void 0) { options = {}; }
var _a = options.splitRegexp, splitRegexp = _a === void 0 ? DEFAULT_SPLIT_REGEXP : _a, _b = options.stripRegexp, stripRegexp = _b === void 0 ? DEFAULT_STRIP_REGEXP : _b, _c = options.transform, transform = _c === void 0 ? lowerCase : _c, _d = options.delimiter, delimiter = _d === void 0 ? " " : _d;
var result = dist_es2015_replace(dist_es2015_replace(input, splitRegexp, "$1\0$2"), stripRegexp, "\0");
var start = 0;
var end = result.length;
// Trim the delimiter from around the output string.
while (result.charAt(start) === "\0")
start++;
while (result.charAt(end - 1) === "\0")
end--;
// Transform each token independently.
return result.slice(start, end).split("\0").map(transform).join(delimiter);
}
/**
* Replace `re` in the input string with the replacement value.
*/
function dist_es2015_replace(input, re, value) {
if (re instanceof RegExp)
return input.replace(re, value);
return re.reduce(function (input, re) { return input.replace(re, value); }, input);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/search-items.js
/**
* External dependencies
*/
// Default search helpers.
const defaultGetName = item => item.name || '';
const defaultGetTitle = item => item.title;
const defaultGetDescription = item => item.description || '';
const defaultGetKeywords = item => item.keywords || [];
const defaultGetCategory = item => item.category;
const defaultGetCollection = () => null;
// Normalization regexes
const splitRegexp = [/([\p{Ll}\p{Lo}\p{N}])([\p{Lu}\p{Lt}])/gu,
// One lowercase or digit, followed by one uppercase.
/([\p{Lu}\p{Lt}])([\p{Lu}\p{Lt}][\p{Ll}\p{Lo}])/gu // One uppercase followed by one uppercase and one lowercase.
];
const stripRegexp = /(\p{C}|\p{P}|\p{S})+/giu; // Anything that's not a punctuation, symbol or control/format character.
// Normalization cache
const extractedWords = new Map();
const normalizedStrings = new Map();
/**
* Extracts words from an input string.
*
* @param {string} input The input string.
*
* @return {Array} Words, extracted from the input string.
*/
function extractWords(input = '') {
if (extractedWords.has(input)) {
return extractedWords.get(input);
}
const result = noCase(input, {
splitRegexp,
stripRegexp
}).split(' ').filter(Boolean);
extractedWords.set(input, result);
return result;
}
/**
* Sanitizes the search input string.
*
* @param {string} input The search input to normalize.
*
* @return {string} The normalized search input.
*/
function normalizeString(input = '') {
if (normalizedStrings.has(input)) {
return normalizedStrings.get(input);
}
// Disregard diacritics.
// Input: "média"
let result = remove_accents_default()(input);
// Accommodate leading slash, matching autocomplete expectations.
// Input: "/media"
result = result.replace(/^\//, '');
// Lowercase.
// Input: "MEDIA"
result = result.toLowerCase();
normalizedStrings.set(input, result);
return result;
}
/**
* Converts the search term into a list of normalized terms.
*
* @param {string} input The search term to normalize.
*
* @return {string[]} The normalized list of search terms.
*/
const getNormalizedSearchTerms = (input = '') => {
return extractWords(normalizeString(input));
};
const removeMatchingTerms = (unmatchedTerms, unprocessedTerms) => {
return unmatchedTerms.filter(term => !getNormalizedSearchTerms(unprocessedTerms).some(unprocessedTerm => unprocessedTerm.includes(term)));
};
const searchBlockItems = (items, categories, collections, searchInput) => {
const normalizedSearchTerms = getNormalizedSearchTerms(searchInput);
if (normalizedSearchTerms.length === 0) {
return items;
}
const config = {
getCategory: item => categories.find(({
slug
}) => slug === item.category)?.title,
getCollection: item => collections[item.name.split('/')[0]]?.title
};
return searchItems(items, searchInput, config);
};
/**
* Filters an item list given a search term.
*
* @param {Array} items Item list
* @param {string} searchInput Search input.
* @param {Object} config Search Config.
*
* @return {Array} Filtered item list.
*/
const searchItems = (items = [], searchInput = '', config = {}) => {
const normalizedSearchTerms = getNormalizedSearchTerms(searchInput);
if (normalizedSearchTerms.length === 0) {
return items;
}
const rankedItems = items.map(item => {
return [item, getItemSearchRank(item, searchInput, config)];
}).filter(([, rank]) => rank > 0);
rankedItems.sort(([, rank1], [, rank2]) => rank2 - rank1);
return rankedItems.map(([item]) => item);
};
/**
* Get the search rank for a given item and a specific search term.
* The better the match, the higher the rank.
* If the rank equals 0, it should be excluded from the results.
*
* @param {Object} item Item to filter.
* @param {string} searchTerm Search term.
* @param {Object} config Search Config.
*
* @return {number} Search Rank.
*/
function getItemSearchRank(item, searchTerm, config = {}) {
const {
getName = defaultGetName,
getTitle = defaultGetTitle,
getDescription = defaultGetDescription,
getKeywords = defaultGetKeywords,
getCategory = defaultGetCategory,
getCollection = defaultGetCollection
} = config;
const name = getName(item);
const title = getTitle(item);
const description = getDescription(item);
const keywords = getKeywords(item);
const category = getCategory(item);
const collection = getCollection(item);
const normalizedSearchInput = normalizeString(searchTerm);
const normalizedTitle = normalizeString(title);
let rank = 0;
// Prefers exact matches
// Then prefers if the beginning of the title matches the search term
// name, keywords, categories, collection, variations match come later.
if (normalizedSearchInput === normalizedTitle) {
rank += 30;
} else if (normalizedTitle.startsWith(normalizedSearchInput)) {
rank += 20;
} else {
const terms = [name, title, description, ...keywords, category, collection].join(' ');
const normalizedSearchTerms = extractWords(normalizedSearchInput);
const unmatchedTerms = removeMatchingTerms(normalizedSearchTerms, terms);
if (unmatchedTerms.length === 0) {
rank += 10;
}
}
// Give a better rank to "core" namespaced items.
if (rank !== 0 && name.startsWith('core/')) {
const isCoreBlockVariation = name !== item.id;
// Give a bit better rank to "core" blocks over "core" block variations.
rank += isCoreBlockVariation ? 1 : 2;
}
return rank;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/hooks/use-patterns-paging.js
/**
* WordPress dependencies
*/
const PAGE_SIZE = 20;
const INITIAL_INSERTER_RESULTS = 5;
/**
* Supplies values needed to page the patterns list client side.
*
* @param {Array} currentCategoryPatterns An array of the current patterns to display.
* @param {string} currentCategory The currently selected category.
* @param {Object} scrollContainerRef Ref of container to to find scroll container for when moving between pages.
* @param {string} currentFilter The currently search filter.
*
* @return {Object} Returns the relevant paging values. (totalItems, categoryPatternsList, numPages, changePage, currentPage)
*/
function usePatternsPaging(currentCategoryPatterns, currentCategory, scrollContainerRef, currentFilter = '') {
const [currentPage, setCurrentPage] = (0,external_wp_element_namespaceObject.useState)(1);
const previousCategory = (0,external_wp_compose_namespaceObject.usePrevious)(currentCategory);
const previousFilter = (0,external_wp_compose_namespaceObject.usePrevious)(currentFilter);
if ((previousCategory !== currentCategory || previousFilter !== currentFilter) && currentPage !== 1) {
setCurrentPage(1);
}
const totalItems = currentCategoryPatterns.length;
const pageIndex = currentPage - 1;
const categoryPatterns = (0,external_wp_element_namespaceObject.useMemo)(() => {
return currentCategoryPatterns.slice(pageIndex * PAGE_SIZE, pageIndex * PAGE_SIZE + PAGE_SIZE);
}, [pageIndex, currentCategoryPatterns]);
const categoryPatternsAsyncList = (0,external_wp_compose_namespaceObject.useAsyncList)(categoryPatterns, {
step: INITIAL_INSERTER_RESULTS
});
const numPages = Math.ceil(currentCategoryPatterns.length / PAGE_SIZE);
const changePage = page => {
const scrollContainer = (0,external_wp_dom_namespaceObject.getScrollContainer)(scrollContainerRef?.current);
scrollContainer?.scrollTo(0, 0);
setCurrentPage(page);
};
(0,external_wp_element_namespaceObject.useEffect)(function scrollToTopOnCategoryChange() {
const scrollContainer = (0,external_wp_dom_namespaceObject.getScrollContainer)(scrollContainerRef?.current);
scrollContainer?.scrollTo(0, 0);
}, [currentCategory, scrollContainerRef]);
return {
totalItems,
categoryPatterns,
categoryPatternsAsyncList,
numPages,
changePage,
currentPage
};
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/block-patterns-explorer/pattern-list.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function PatternsListHeader({
filterValue,
filteredBlockPatternsLength
}) {
if (!filterValue) {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalHeading, {
level: 2,
lineHeight: "48px",
className: "block-editor-block-patterns-explorer__search-results-count",
children: (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: number of patterns. */
(0,external_wp_i18n_namespaceObject._n)('%d pattern found', '%d patterns found', filteredBlockPatternsLength), filteredBlockPatternsLength)
});
}
function PatternList({
searchValue,
selectedCategory,
patternCategories,
rootClientId
}) {
const container = (0,external_wp_element_namespaceObject.useRef)();
const debouncedSpeak = (0,external_wp_compose_namespaceObject.useDebounce)(external_wp_a11y_namespaceObject.speak, 500);
const [destinationRootClientId, onInsertBlocks] = use_insertion_point({
rootClientId,
shouldFocusBlock: true
});
const [patterns,, onClickPattern] = use_patterns_state(onInsertBlocks, destinationRootClientId, selectedCategory);
const registeredPatternCategories = (0,external_wp_element_namespaceObject.useMemo)(() => patternCategories.map(patternCategory => patternCategory.name), [patternCategories]);
const filteredBlockPatterns = (0,external_wp_element_namespaceObject.useMemo)(() => {
const filteredPatterns = patterns.filter(pattern => {
if (selectedCategory === allPatternsCategory.name) {
return true;
}
if (selectedCategory === myPatternsCategory.name && pattern.type === INSERTER_PATTERN_TYPES.user) {
return true;
}
if (selectedCategory === 'uncategorized') {
var _pattern$categories$s;
const hasKnownCategory = (_pattern$categories$s = pattern.categories?.some(category => registeredPatternCategories.includes(category))) !== null && _pattern$categories$s !== void 0 ? _pattern$categories$s : false;
return !pattern.categories?.length || !hasKnownCategory;
}
return pattern.categories?.includes(selectedCategory);
});
if (!searchValue) {
return filteredPatterns;
}
return searchItems(filteredPatterns, searchValue);
}, [searchValue, patterns, selectedCategory, registeredPatternCategories]);
// Announce search results on change.
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (!searchValue) {
return;
}
const count = filteredBlockPatterns.length;
const resultsFoundMessage = (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: number of results. */
(0,external_wp_i18n_namespaceObject._n)('%d result found.', '%d results found.', count), count);
debouncedSpeak(resultsFoundMessage);
}, [searchValue, debouncedSpeak, filteredBlockPatterns.length]);
const pagingProps = usePatternsPaging(filteredBlockPatterns, selectedCategory, container);
// Reset page when search value changes.
const [previousSearchValue, setPreviousSearchValue] = (0,external_wp_element_namespaceObject.useState)(searchValue);
if (searchValue !== previousSearchValue) {
setPreviousSearchValue(searchValue);
pagingProps.changePage(1);
}
const hasItems = !!filteredBlockPatterns?.length;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-block-patterns-explorer__list",
ref: container,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PatternsListHeader, {
filterValue: searchValue,
filteredBlockPatternsLength: filteredBlockPatterns.length
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inserter_listbox, {
children: hasItems && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_patterns_list, {
shownPatterns: pagingProps.categoryPatternsAsyncList,
blockPatterns: pagingProps.categoryPatterns,
onClickPattern: onClickPattern,
isDraggable: false
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Pagination, {
...pagingProps
})]
})
})]
});
}
/* harmony default export */ const pattern_list = (PatternList);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/block-patterns-tab/use-pattern-categories.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function hasRegisteredCategory(pattern, allCategories) {
if (!pattern.categories || !pattern.categories.length) {
return false;
}
return pattern.categories.some(cat => allCategories.some(category => category.name === cat));
}
function usePatternCategories(rootClientId, sourceFilter = 'all') {
const [patterns, allCategories] = use_patterns_state(undefined, rootClientId);
const filteredPatterns = (0,external_wp_element_namespaceObject.useMemo)(() => sourceFilter === 'all' ? patterns : patterns.filter(pattern => !isPatternFiltered(pattern, sourceFilter)), [sourceFilter, patterns]);
// Remove any empty categories.
const populatedCategories = (0,external_wp_element_namespaceObject.useMemo)(() => {
const categories = allCategories.filter(category => filteredPatterns.some(pattern => pattern.categories?.includes(category.name))).sort((a, b) => a.label.localeCompare(b.label));
if (filteredPatterns.some(pattern => !hasRegisteredCategory(pattern, allCategories)) && !categories.find(category => category.name === 'uncategorized')) {
categories.push({
name: 'uncategorized',
label: (0,external_wp_i18n_namespaceObject._x)('Uncategorized')
});
}
if (filteredPatterns.some(pattern => pattern.type === INSERTER_PATTERN_TYPES.user)) {
categories.unshift(myPatternsCategory);
}
if (filteredPatterns.length > 0) {
categories.unshift({
name: allPatternsCategory.name,
label: allPatternsCategory.label
});
}
(0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: number of categories . */
(0,external_wp_i18n_namespaceObject._n)('%d category button displayed.', '%d category buttons displayed.', categories.length), categories.length));
return categories;
}, [allCategories, filteredPatterns]);
return populatedCategories;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/block-patterns-explorer/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function PatternsExplorer({
initialCategory,
rootClientId
}) {
const [searchValue, setSearchValue] = (0,external_wp_element_namespaceObject.useState)('');
const [selectedCategory, setSelectedCategory] = (0,external_wp_element_namespaceObject.useState)(initialCategory?.name);
const patternCategories = usePatternCategories(rootClientId);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-block-patterns-explorer",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(pattern_explorer_sidebar, {
selectedCategory: selectedCategory,
patternCategories: patternCategories,
onClickCategory: setSelectedCategory,
searchValue: searchValue,
setSearchValue: setSearchValue
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(pattern_list, {
searchValue: searchValue,
selectedCategory: selectedCategory,
patternCategories: patternCategories,
rootClientId: rootClientId
})]
});
}
function PatternsExplorerModal({
onModalClose,
...restProps
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Modal, {
title: (0,external_wp_i18n_namespaceObject.__)('Patterns'),
onRequestClose: onModalClose,
isFullScreen: true,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PatternsExplorer, {
...restProps
})
});
}
/* harmony default export */ const block_patterns_explorer = (PatternsExplorerModal);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/mobile-tab-navigation.js
/**
* WordPress dependencies
*/
function ScreenHeader({
title
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalVStack, {
spacing: 0,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalView, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalSpacer, {
marginBottom: 0,
paddingX: 4,
paddingY: 3,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalHStack, {
spacing: 2,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalNavigatorBackButton, {
style:
// TODO: This style override is also used in ToolsPanelHeader.
// It should be supported out-of-the-box by Button.
{
minWidth: 24,
padding: 0
},
icon: (0,external_wp_i18n_namespaceObject.isRTL)() ? chevron_right : chevron_left,
size: "small",
label: (0,external_wp_i18n_namespaceObject.__)('Back')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalSpacer, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalHeading, {
level: 5,
children: title
})
})]
})
})
})
});
}
function MobileTabNavigation({
categories,
children
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalNavigatorProvider, {
initialPath: "/",
className: "block-editor-inserter__mobile-tab-navigation",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalNavigatorScreen, {
path: "/",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalItemGroup, {
children: categories.map(category => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalNavigatorButton, {
path: `/category/${category.name}`,
as: external_wp_components_namespaceObject.__experimentalItem,
isAction: true,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalHStack, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexBlock, {
children: category.label
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
icon: (0,external_wp_i18n_namespaceObject.isRTL)() ? chevron_left : chevron_right
})]
})
}, category.name))
})
}), categories.map(category => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalNavigatorScreen, {
path: `/category/${category.name}`,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ScreenHeader, {
title: (0,external_wp_i18n_namespaceObject.__)('Back')
}), children(category)]
}, category.name))]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/block-patterns-tab/patterns-filter.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const getShouldDisableSyncFilter = sourceFilter => sourceFilter !== 'all' && sourceFilter !== 'user';
const getShouldHideSourcesFilter = category => {
return category.name === myPatternsCategory.name;
};
const PATTERN_SOURCE_MENU_OPTIONS = [{
value: 'all',
label: (0,external_wp_i18n_namespaceObject._x)('All', 'patterns')
}, {
value: INSERTER_PATTERN_TYPES.directory,
label: (0,external_wp_i18n_namespaceObject.__)('Pattern Directory')
}, {
value: INSERTER_PATTERN_TYPES.theme,
label: (0,external_wp_i18n_namespaceObject.__)('Theme & Plugins')
}, {
value: INSERTER_PATTERN_TYPES.user,
label: (0,external_wp_i18n_namespaceObject.__)('User')
}];
function PatternsFilter({
setPatternSyncFilter,
setPatternSourceFilter,
patternSyncFilter,
patternSourceFilter,
scrollContainerRef,
category
}) {
// If the category is `myPatterns` then we need to set the source filter to `user`, but
// we do this by deriving from props rather than calling setPatternSourceFilter otherwise
// the user may be confused when switching to another category if the haven't explicity set
// this filter themselves.
const currentPatternSourceFilter = category.name === myPatternsCategory.name ? INSERTER_PATTERN_TYPES.user : patternSourceFilter;
// We need to disable the sync filter option if the source filter is not 'all' or 'user'
// otherwise applying them will just result in no patterns being shown.
const shouldDisableSyncFilter = getShouldDisableSyncFilter(currentPatternSourceFilter);
// We also hide the directory and theme source filter if the category is `myPatterns`
// otherwise there will only be one option available.
const shouldHideSourcesFilter = getShouldHideSourcesFilter(category);
const patternSyncMenuOptions = (0,external_wp_element_namespaceObject.useMemo)(() => [{
value: 'all',
label: (0,external_wp_i18n_namespaceObject._x)('All', 'patterns')
}, {
value: INSERTER_SYNC_TYPES.full,
label: (0,external_wp_i18n_namespaceObject._x)('Synced', 'patterns'),
disabled: shouldDisableSyncFilter
}, {
value: INSERTER_SYNC_TYPES.unsynced,
label: (0,external_wp_i18n_namespaceObject._x)('Not synced', 'patterns'),
disabled: shouldDisableSyncFilter
}], [shouldDisableSyncFilter]);
function handleSetSourceFilterChange(newSourceFilter) {
setPatternSourceFilter(newSourceFilter);
if (getShouldDisableSyncFilter(newSourceFilter)) {
setPatternSyncFilter('all');
}
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.DropdownMenu, {
popoverProps: {
placement: 'right-end'
},
label: (0,external_wp_i18n_namespaceObject.__)('Filter patterns'),
toggleProps: {
size: 'compact'
},
icon: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
icon: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.SVG, {
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Path, {
d: "M10 17.5H14V16H10V17.5ZM6 6V7.5H18V6H6ZM8 12.5H16V11H8V12.5Z",
fill: "currentColor"
})
})
}),
children: () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [!shouldHideSourcesFilter && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuGroup, {
label: (0,external_wp_i18n_namespaceObject.__)('Source'),
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItemsChoice, {
choices: PATTERN_SOURCE_MENU_OPTIONS,
onSelect: value => {
handleSetSourceFilterChange(value);
scrollContainerRef.current?.scrollTo(0, 0);
},
value: currentPatternSourceFilter
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuGroup, {
label: (0,external_wp_i18n_namespaceObject.__)('Type'),
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItemsChoice, {
choices: patternSyncMenuOptions,
onSelect: value => {
setPatternSyncFilter(value);
scrollContainerRef.current?.scrollTo(0, 0);
},
value: patternSyncFilter
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-tool-selector__help",
children: (0,external_wp_element_namespaceObject.createInterpolateElement)((0,external_wp_i18n_namespaceObject.__)('Patterns are available from the <Link>WordPress.org Pattern Directory</Link>, bundled in the active theme, or created by users on this site. Only patterns created on this site can be synced.'), {
Link: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ExternalLink, {
href: (0,external_wp_i18n_namespaceObject.__)('https://wordpress.org/patterns/')
})
})
})]
})
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/block-patterns-tab/pattern-category-previews.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const pattern_category_previews_noop = () => {};
function PatternCategoryPreviews({
rootClientId,
onInsert,
onHover = pattern_category_previews_noop,
category,
showTitlesAsTooltip
}) {
const isZoomOutMode = (0,external_wp_data_namespaceObject.useSelect)(select => select(store).__unstableGetEditorMode() === 'zoom-out', []);
const [allPatterns,, onClickPattern] = use_patterns_state(onInsert, rootClientId, category?.name);
const [patternSyncFilter, setPatternSyncFilter] = (0,external_wp_element_namespaceObject.useState)('all');
const [patternSourceFilter, setPatternSourceFilter] = (0,external_wp_element_namespaceObject.useState)('all');
const availableCategories = usePatternCategories(rootClientId, patternSourceFilter);
const scrollContainerRef = (0,external_wp_element_namespaceObject.useRef)();
const currentCategoryPatterns = (0,external_wp_element_namespaceObject.useMemo)(() => allPatterns.filter(pattern => {
if (isPatternFiltered(pattern, patternSourceFilter, patternSyncFilter)) {
return false;
}
if (category.name === allPatternsCategory.name) {
return true;
}
if (category.name === myPatternsCategory.name && pattern.type === INSERTER_PATTERN_TYPES.user) {
return true;
}
if (category.name === 'uncategorized') {
// The uncategorized category should show all the patterns without any category...
if (!pattern.categories) {
return true;
}
// ...or with no available category.
return !pattern.categories.some(catName => availableCategories.some(c => c.name === catName));
}
return pattern.categories?.includes(category.name);
}), [allPatterns, availableCategories, category.name, patternSourceFilter, patternSyncFilter]);
const pagingProps = usePatternsPaging(currentCategoryPatterns, category, scrollContainerRef);
const {
changePage
} = pagingProps;
// Hide block pattern preview on unmount.
// eslint-disable-next-line react-hooks/exhaustive-deps
(0,external_wp_element_namespaceObject.useEffect)(() => () => onHover(null), []);
const onSetPatternSyncFilter = (0,external_wp_element_namespaceObject.useCallback)(value => {
setPatternSyncFilter(value);
changePage(1);
}, [setPatternSyncFilter, changePage]);
const onSetPatternSourceFilter = (0,external_wp_element_namespaceObject.useCallback)(value => {
setPatternSourceFilter(value);
changePage(1);
}, [setPatternSourceFilter, changePage]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalVStack, {
spacing: 2,
className: "block-editor-inserter__patterns-category-panel-header",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalHStack, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexBlock, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalHeading, {
className: "block-editor-inserter__patterns-category-panel-title",
size: 13,
level: 4,
as: "div",
children: category.label
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PatternsFilter, {
patternSyncFilter: patternSyncFilter,
patternSourceFilter: patternSourceFilter,
setPatternSyncFilter: onSetPatternSyncFilter,
setPatternSourceFilter: onSetPatternSourceFilter,
scrollContainerRef: scrollContainerRef,
category: category
})]
}), !currentCategoryPatterns.length && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalText, {
variant: "muted",
className: "block-editor-inserter__patterns-category-no-results",
children: (0,external_wp_i18n_namespaceObject.__)('No results found')
})]
}), currentCategoryPatterns.length > 0 && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [isZoomOutMode && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalText, {
size: "12",
as: "p",
className: "block-editor-inserter__help-text",
children: (0,external_wp_i18n_namespaceObject.__)('Drag and drop patterns into the canvas.')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_patterns_list, {
ref: scrollContainerRef,
shownPatterns: pagingProps.categoryPatternsAsyncList,
blockPatterns: pagingProps.categoryPatterns,
onClickPattern: onClickPattern,
onHover: onHover,
label: category.label,
orientation: "vertical",
category: category.name,
isDraggable: true,
showTitlesAsTooltip: showTitlesAsTooltip,
patternFilter: patternSourceFilter,
pagingProps: pagingProps
})]
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/category-tabs/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const {
Tabs: category_tabs_Tabs
} = unlock(external_wp_components_namespaceObject.privateApis);
function CategoryTabs({
categories,
selectedCategory,
onSelectCategory,
children
}) {
// Copied from InterfaceSkeleton.
const ANIMATION_DURATION = 0.25;
const disableMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)();
const defaultTransition = {
type: 'tween',
duration: disableMotion ? 0 : ANIMATION_DURATION,
ease: [0.6, 0, 0.4, 1]
};
const previousSelectedCategory = (0,external_wp_compose_namespaceObject.usePrevious)(selectedCategory);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(category_tabs_Tabs, {
className: "block-editor-inserter__category-tabs",
selectOnMove: false,
selectedTabId: selectedCategory ? selectedCategory.name : null,
orientation: "vertical",
onSelect: categoryId => {
// Pass the full category object
onSelectCategory(categories.find(category => category.name === categoryId));
},
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(category_tabs_Tabs.TabList, {
className: "block-editor-inserter__category-tablist",
children: categories.map(category => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(category_tabs_Tabs.Tab, {
tabId: category.name,
className: "block-editor-inserter__category-tab",
"aria-label": category.label,
"aria-current": category === selectedCategory ? 'true' : undefined,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalHStack, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexBlock, {
children: category.label
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
icon: (0,external_wp_i18n_namespaceObject.isRTL)() ? chevron_left : chevron_right
})]
})
}, category.name))
}), categories.map(category => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(category_tabs_Tabs.TabPanel, {
tabId: category.name,
focusable: false,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__unstableMotion.div, {
className: "block-editor-inserter__category-panel",
initial: !previousSelectedCategory ? 'closed' : 'open',
animate: "open",
variants: {
open: {
transform: 'translateX( 0 )',
transitionEnd: {
zIndex: '1'
}
},
closed: {
transform: 'translateX( -100% )',
zIndex: '-1'
}
},
transition: defaultTransition,
children: children
})
}, category.name))]
});
}
/* harmony default export */ const category_tabs = (CategoryTabs);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/block-patterns-tab/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockPatternsTab({
onSelectCategory,
selectedCategory,
onInsert,
rootClientId,
setHasCategories,
children
}) {
const [showPatternsExplorer, setShowPatternsExplorer] = (0,external_wp_element_namespaceObject.useState)(false);
const categories = usePatternCategories(rootClientId);
const isMobile = (0,external_wp_compose_namespaceObject.useViewportMatch)('medium', '<');
const isResolvingPatterns = (0,external_wp_data_namespaceObject.useSelect)(select => unlock(select(store)).isResolvingPatterns(), []);
(0,external_wp_element_namespaceObject.useEffect)(() => {
setHasCategories(!!categories.length);
}, [categories, setHasCategories]);
if (isResolvingPatterns) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-inserter__patterns-loading",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Spinner, {})
});
}
if (!categories.length) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(no_results, {});
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [!isMobile && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-inserter__block-patterns-tabs-container",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(category_tabs, {
categories: categories,
selectedCategory: selectedCategory,
onSelectCategory: onSelectCategory,
children: children
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
className: "block-editor-inserter__patterns-explore-button",
onClick: () => setShowPatternsExplorer(true),
variant: "secondary",
children: (0,external_wp_i18n_namespaceObject.__)('Explore all patterns')
})]
}), isMobile && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MobileTabNavigation, {
categories: categories,
children: category => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-inserter__category-panel",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PatternCategoryPreviews, {
onInsert: onInsert,
rootClientId: rootClientId,
category: category,
showTitlesAsTooltip: false
}, category.name)
})
}), showPatternsExplorer && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_patterns_explorer, {
initialCategory: selectedCategory || categories[0],
patternCategories: categories,
onModalClose: () => setShowPatternsExplorer(false),
rootClientId: rootClientId
})]
});
}
/* harmony default export */ const block_patterns_tab = (BlockPatternsTab);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/external.js
/**
* WordPress dependencies
*/
const external = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M19.5 4.5h-7V6h4.44l-5.97 5.97 1.06 1.06L18 7.06v4.44h1.5v-7Zm-13 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3H17v3a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h3V5.5h-3Z"
})
});
/* harmony default export */ const library_external = (external);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/media-tab/utils.js
/**
* WordPress dependencies
*/
const mediaTypeTag = {
image: 'img',
video: 'video',
audio: 'audio'
};
/** @typedef {import('./hooks').InserterMediaItem} InserterMediaItem */
/**
* Creates a block and a preview element from a media object.
*
* @param {InserterMediaItem} media The media object to create the block from.
* @param {('image'|'audio'|'video')} mediaType The media type to create the block for.
* @return {[WPBlock, JSX.Element]} An array containing the block and the preview element.
*/
function getBlockAndPreviewFromMedia(media, mediaType) {
// Add the common attributes between the different media types.
const attributes = {
id: media.id || undefined,
caption: media.caption || undefined
};
const mediaSrc = media.url;
const alt = media.alt || undefined;
if (mediaType === 'image') {
attributes.url = mediaSrc;
attributes.alt = alt;
} else if (['video', 'audio'].includes(mediaType)) {
attributes.src = mediaSrc;
}
const PreviewTag = mediaTypeTag[mediaType];
const preview = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PreviewTag, {
src: media.previewUrl || mediaSrc,
alt: alt,
controls: mediaType === 'audio' ? true : undefined,
inert: "true",
onError: ({
currentTarget
}) => {
// Fall back to the media source if the preview cannot be loaded.
if (currentTarget.src === media.previewUrl) {
currentTarget.src = mediaSrc;
}
}
});
return [(0,external_wp_blocks_namespaceObject.createBlock)(`core/${mediaType}`, attributes), preview];
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/media-tab/media-preview.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const ALLOWED_MEDIA_TYPES = ['image'];
const MAXIMUM_TITLE_LENGTH = 25;
const MEDIA_OPTIONS_POPOVER_PROPS = {
position: 'bottom left',
className: 'block-editor-inserter__media-list__item-preview-options__popover'
};
function MediaPreviewOptions({
category,
media
}) {
if (!category.getReportUrl) {
return null;
}
const reportUrl = category.getReportUrl(media);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.DropdownMenu, {
className: "block-editor-inserter__media-list__item-preview-options",
label: (0,external_wp_i18n_namespaceObject.__)('Options'),
popoverProps: MEDIA_OPTIONS_POPOVER_PROPS,
icon: more_vertical,
children: () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuGroup, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
onClick: () => window.open(reportUrl, '_blank').focus(),
icon: library_external,
children: (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %s: The media type to report e.g: "image", "video", "audio" */
(0,external_wp_i18n_namespaceObject.__)('Report %s'), category.mediaType)
})
})
});
}
function InsertExternalImageModal({
onClose,
onSubmit
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.Modal, {
title: (0,external_wp_i18n_namespaceObject.__)('Insert external image'),
onRequestClose: onClose,
className: "block-editor-inserter-media-tab-media-preview-inserter-external-image-modal",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalVStack, {
spacing: 3,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("p", {
children: (0,external_wp_i18n_namespaceObject.__)('This image cannot be uploaded to your Media Library, but it can still be inserted as an external image.')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("p", {
children: (0,external_wp_i18n_namespaceObject.__)('External images can be removed by the external provider without warning and could even have legal compliance issues related to privacy legislation.')
})]
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.Flex, {
className: "block-editor-block-lock-modal__actions",
justify: "flex-end",
expanded: false,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexItem, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
variant: "tertiary",
onClick: onClose,
children: (0,external_wp_i18n_namespaceObject.__)('Cancel')
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexItem, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
variant: "primary",
onClick: onSubmit,
children: (0,external_wp_i18n_namespaceObject.__)('Insert')
})
})]
})]
});
}
function MediaPreview({
media,
onClick,
category
}) {
const [showExternalUploadModal, setShowExternalUploadModal] = (0,external_wp_element_namespaceObject.useState)(false);
const [isHovered, setIsHovered] = (0,external_wp_element_namespaceObject.useState)(false);
const [isInserting, setIsInserting] = (0,external_wp_element_namespaceObject.useState)(false);
const [block, preview] = (0,external_wp_element_namespaceObject.useMemo)(() => getBlockAndPreviewFromMedia(media, category.mediaType), [media, category.mediaType]);
const {
createErrorNotice,
createSuccessNotice
} = (0,external_wp_data_namespaceObject.useDispatch)(external_wp_notices_namespaceObject.store);
const {
getSettings
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const onMediaInsert = (0,external_wp_element_namespaceObject.useCallback)(previewBlock => {
// Prevent multiple uploads when we're in the process of inserting.
if (isInserting) {
return;
}
const settings = getSettings();
const clonedBlock = (0,external_wp_blocks_namespaceObject.cloneBlock)(previewBlock);
const {
id,
url,
caption
} = clonedBlock.attributes;
// User has no permission to upload media.
if (!id && !settings.mediaUpload) {
setShowExternalUploadModal(true);
return;
}
// Media item already exists in library, so just insert it.
if (!!id) {
onClick(clonedBlock);
return;
}
setIsInserting(true);
// Media item does not exist in library, so try to upload it.
// Fist fetch the image data. This may fail if the image host
// doesn't allow CORS with the domain.
// If this happens, we insert the image block using the external
// URL and let the user know about the possible implications.
window.fetch(url).then(response => response.blob()).then(blob => {
settings.mediaUpload({
filesList: [blob],
additionalData: {
caption
},
onFileChange([img]) {
if ((0,external_wp_blob_namespaceObject.isBlobURL)(img.url)) {
return;
}
onClick({
...clonedBlock,
attributes: {
...clonedBlock.attributes,
id: img.id,
url: img.url
}
});
createSuccessNotice((0,external_wp_i18n_namespaceObject.__)('Image uploaded and inserted.'), {
type: 'snackbar'
});
setIsInserting(false);
},
allowedTypes: ALLOWED_MEDIA_TYPES,
onError(message) {
createErrorNotice(message, {
type: 'snackbar'
});
setIsInserting(false);
}
});
}).catch(() => {
setShowExternalUploadModal(true);
setIsInserting(false);
});
}, [isInserting, getSettings, onClick, createSuccessNotice, createErrorNotice]);
const title = typeof media.title === 'string' ? media.title : media.title?.rendered || (0,external_wp_i18n_namespaceObject.__)('no title');
let truncatedTitle;
if (title.length > MAXIMUM_TITLE_LENGTH) {
const omission = '...';
truncatedTitle = title.slice(0, MAXIMUM_TITLE_LENGTH - omission.length) + omission;
}
const onMouseEnter = (0,external_wp_element_namespaceObject.useCallback)(() => setIsHovered(true), []);
const onMouseLeave = (0,external_wp_element_namespaceObject.useCallback)(() => setIsHovered(false), []);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inserter_draggable_blocks, {
isEnabled: true,
blocks: [block],
children: ({
draggable,
onDragStart,
onDragEnd
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: dist_clsx('block-editor-inserter__media-list__list-item', {
'is-hovered': isHovered
}),
draggable: draggable,
onDragStart: onDragStart,
onDragEnd: onDragEnd,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Tooltip, {
text: truncatedTitle || title,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Composite.Item, {
render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
"aria-label": title,
role: "option",
className: "block-editor-inserter__media-list__item"
}),
onClick: () => onMediaInsert(block),
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-inserter__media-list__item-preview",
children: [preview, isInserting && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-inserter__media-list__item-preview-spinner",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Spinner, {})
})]
})
})
}), !isInserting && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MediaPreviewOptions, {
category: category,
media: media
})]
})
})
}), showExternalUploadModal && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InsertExternalImageModal, {
onClose: () => setShowExternalUploadModal(false),
onSubmit: () => {
onClick((0,external_wp_blocks_namespaceObject.cloneBlock)(block));
createSuccessNotice((0,external_wp_i18n_namespaceObject.__)('Image inserted.'), {
type: 'snackbar'
});
setShowExternalUploadModal(false);
}
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/media-tab/media-list.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function MediaList({
mediaList,
category,
onClick,
label = (0,external_wp_i18n_namespaceObject.__)('Media List')
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Composite, {
role: "listbox",
className: "block-editor-inserter__media-list",
"aria-label": label,
children: mediaList.map((media, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MediaPreview, {
media: media,
category: category,
onClick: onClick
}, media.id || media.sourceId || index))
});
}
/* harmony default export */ const media_list = (MediaList);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/media-tab/hooks.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/** @typedef {import('../../../store/actions').InserterMediaRequest} InserterMediaRequest */
/** @typedef {import('../../../store/actions').InserterMediaItem} InserterMediaItem */
/**
* Fetches media items based on the provided category.
* Each media category is responsible for providing a `fetch` function.
*
* @param {Object} category The media category to fetch results for.
* @param {InserterMediaRequest} query The query args to use for the request.
* @return {InserterMediaItem[]} The media results.
*/
function useMediaResults(category, query = {}) {
const [mediaList, setMediaList] = (0,external_wp_element_namespaceObject.useState)();
const [isLoading, setIsLoading] = (0,external_wp_element_namespaceObject.useState)(false);
// We need to keep track of the last request made because
// multiple request can be fired without knowing the order
// of resolution, and we need to ensure we are showing
// the results of the last request.
// In the future we could use AbortController to cancel previous
// requests, but we don't for now as it involves adding support
// for this to `core-data` package.
const lastRequestRef = (0,external_wp_element_namespaceObject.useRef)();
(0,external_wp_element_namespaceObject.useEffect)(() => {
(async () => {
const key = JSON.stringify({
category: category.name,
...query
});
lastRequestRef.current = key;
setIsLoading(true);
setMediaList([]); // Empty the previous results.
const _media = await category.fetch?.(query);
if (key === lastRequestRef.current) {
setMediaList(_media);
setIsLoading(false);
}
})();
}, [category.name, ...Object.values(query)]);
return {
mediaList,
isLoading
};
}
function useMediaCategories(rootClientId) {
const [categories, setCategories] = (0,external_wp_element_namespaceObject.useState)([]);
const inserterMediaCategories = (0,external_wp_data_namespaceObject.useSelect)(select => unlock(select(store)).getInserterMediaCategories(), []);
const {
canInsertImage,
canInsertVideo,
canInsertAudio
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
canInsertBlockType
} = select(store);
return {
canInsertImage: canInsertBlockType('core/image', rootClientId),
canInsertVideo: canInsertBlockType('core/video', rootClientId),
canInsertAudio: canInsertBlockType('core/audio', rootClientId)
};
}, [rootClientId]);
(0,external_wp_element_namespaceObject.useEffect)(() => {
(async () => {
const _categories = [];
// If `inserterMediaCategories` is not defined in
// block editor settings, do not show any media categories.
if (!inserterMediaCategories) {
return;
}
// Loop through categories to check if they have at least one media item.
const categoriesHaveMedia = new Map(await Promise.all(inserterMediaCategories.map(async category => {
// Some sources are external and we don't need to make a request.
if (category.isExternalResource) {
return [category.name, true];
}
let results = [];
try {
results = await category.fetch({
per_page: 1
});
} catch (e) {
// If the request fails, we shallow the error and just don't show
// the category, in order to not break the media tab.
}
return [category.name, !!results.length];
})));
// We need to filter out categories that don't have any media items or
// whose corresponding block type is not allowed to be inserted, based
// on the category's `mediaType`.
const canInsertMediaType = {
image: canInsertImage,
video: canInsertVideo,
audio: canInsertAudio
};
inserterMediaCategories.forEach(category => {
if (canInsertMediaType[category.mediaType] && categoriesHaveMedia.get(category.name)) {
_categories.push(category);
}
});
if (!!_categories.length) {
setCategories(_categories);
}
})();
}, [canInsertImage, canInsertVideo, canInsertAudio, inserterMediaCategories]);
return categories;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/media-tab/media-panel.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const INITIAL_MEDIA_ITEMS_PER_PAGE = 10;
function MediaCategoryPanel({
rootClientId,
onInsert,
category
}) {
const [search, setSearch, debouncedSearch] = (0,external_wp_compose_namespaceObject.useDebouncedInput)();
const {
mediaList,
isLoading
} = useMediaResults(category, {
per_page: !!debouncedSearch ? 20 : INITIAL_MEDIA_ITEMS_PER_PAGE,
search: debouncedSearch
});
const baseCssClass = 'block-editor-inserter__media-panel';
const searchLabel = category.labels.search_items || (0,external_wp_i18n_namespaceObject.__)('Search');
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: baseCssClass,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.SearchControl, {
__nextHasNoMarginBottom: true,
className: `${baseCssClass}-search`,
onChange: setSearch,
value: search,
label: searchLabel,
placeholder: searchLabel
}), isLoading && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: `${baseCssClass}-spinner`,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Spinner, {})
}), !isLoading && !mediaList?.length && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(no_results, {}), !isLoading && !!mediaList?.length && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(media_list, {
rootClientId: rootClientId,
onClick: onInsert,
mediaList: mediaList,
category: category
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/media-tab/media-tab.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const media_tab_ALLOWED_MEDIA_TYPES = ['image', 'video', 'audio'];
function MediaTab({
rootClientId,
selectedCategory,
onSelectCategory,
setHasCategories,
onInsert,
children
}) {
const mediaCategories = useMediaCategories(rootClientId);
const isMobile = (0,external_wp_compose_namespaceObject.useViewportMatch)('medium', '<');
const baseCssClass = 'block-editor-inserter__media-tabs';
const onSelectMedia = (0,external_wp_element_namespaceObject.useCallback)(media => {
if (!media?.url) {
return;
}
const [block] = getBlockAndPreviewFromMedia(media, media.type);
onInsert(block);
}, [onInsert]);
const categories = (0,external_wp_element_namespaceObject.useMemo)(() => mediaCategories.map(mediaCategory => ({
...mediaCategory,
label: mediaCategory.labels.name
})), [mediaCategories]);
(0,external_wp_element_namespaceObject.useEffect)(() => {
setHasCategories(!!categories.length);
}, [categories, setHasCategories]);
if (!categories.length) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(no_results, {});
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [!isMobile && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: `${baseCssClass}-container`,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(category_tabs, {
categories: categories,
selectedCategory: selectedCategory,
onSelectCategory: onSelectCategory,
children: children
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(check, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(media_upload, {
multiple: false,
onSelect: onSelectMedia,
allowedTypes: media_tab_ALLOWED_MEDIA_TYPES,
render: ({
open
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
onClick: event => {
// Safari doesn't emit a focus event on button elements when
// clicked and we need to manually focus the button here.
// The reason is that core's Media Library modal explicitly triggers a
// focus event and therefore a `blur` event is triggered on a different
// element, which doesn't contain the `data-unstable-ignore-focus-outside-for-relatedtarget`
// attribute making the Inserter dialog to close.
event.target.focus();
open();
},
className: "block-editor-inserter__media-library-button",
variant: "secondary",
"data-unstable-ignore-focus-outside-for-relatedtarget": ".media-modal",
children: (0,external_wp_i18n_namespaceObject.__)('Open Media Library')
})
})
})]
}), isMobile && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MobileTabNavigation, {
categories: categories,
children: category => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MediaCategoryPanel, {
onInsert: onInsert,
rootClientId: rootClientId,
category: category
})
})]
});
}
/* harmony default export */ const media_tab = (MediaTab);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter-menu-extension/index.js
/**
* WordPress dependencies
*/
const {
Fill: __unstableInserterMenuExtension,
Slot
} = (0,external_wp_components_namespaceObject.createSlotFill)('__unstableInserterMenuExtension');
__unstableInserterMenuExtension.Slot = Slot;
/* harmony default export */ const inserter_menu_extension = (__unstableInserterMenuExtension);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/utils/order-inserter-block-items.js
/** @typedef {import('../store/selectors').WPEditorInserterItem} WPEditorInserterItem */
/**
* Helper function to order inserter block items according to a provided array of prioritized blocks.
*
* @param {WPEditorInserterItem[]} items The array of editor inserter block items to be sorted.
* @param {string[]} priority The array of block names to be prioritized.
* @return {WPEditorInserterItem[]} The sorted array of editor inserter block items.
*/
const orderInserterBlockItems = (items, priority) => {
if (!priority) {
return items;
}
items.sort(({
id: aName
}, {
id: bName
}) => {
// Sort block items according to `priority`.
let aIndex = priority.indexOf(aName);
let bIndex = priority.indexOf(bName);
// All other block items should come after that.
if (aIndex < 0) {
aIndex = priority.length;
}
if (bIndex < 0) {
bIndex = priority.length;
}
return aIndex - bIndex;
});
return items;
};
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/search-results.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const search_results_INITIAL_INSERTER_RESULTS = 9;
/**
* Shared reference to an empty array for cases where it is important to avoid
* returning a new array reference on every invocation and rerendering the component.
*
* @type {Array}
*/
const search_results_EMPTY_ARRAY = [];
function InserterSearchResults({
filterValue,
onSelect,
onHover,
onHoverPattern,
rootClientId,
clientId,
isAppender,
__experimentalInsertionIndex,
maxBlockPatterns,
maxBlockTypes,
showBlockDirectory = false,
isDraggable = true,
shouldFocusBlock = true,
prioritizePatterns,
selectBlockOnInsert,
isQuick
}) {
const debouncedSpeak = (0,external_wp_compose_namespaceObject.useDebounce)(external_wp_a11y_namespaceObject.speak, 500);
const {
prioritizedBlocks
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const blockListSettings = select(store).getBlockListSettings(rootClientId);
return {
prioritizedBlocks: blockListSettings?.prioritizedInserterBlocks || search_results_EMPTY_ARRAY
};
}, [rootClientId]);
const [destinationRootClientId, onInsertBlocks] = use_insertion_point({
onSelect,
rootClientId,
clientId,
isAppender,
insertionIndex: __experimentalInsertionIndex,
shouldFocusBlock,
selectBlockOnInsert
});
const [blockTypes, blockTypeCategories, blockTypeCollections, onSelectBlockType] = use_block_types_state(destinationRootClientId, onInsertBlocks, isQuick);
const [patterns,, onClickPattern] = use_patterns_state(onInsertBlocks, destinationRootClientId);
const filteredBlockPatterns = (0,external_wp_element_namespaceObject.useMemo)(() => {
if (maxBlockPatterns === 0) {
return [];
}
const results = searchItems(patterns, filterValue);
return maxBlockPatterns !== undefined ? results.slice(0, maxBlockPatterns) : results;
}, [filterValue, patterns, maxBlockPatterns]);
let maxBlockTypesToShow = maxBlockTypes;
if (prioritizePatterns && filteredBlockPatterns.length > 2) {
maxBlockTypesToShow = 0;
}
const filteredBlockTypes = (0,external_wp_element_namespaceObject.useMemo)(() => {
if (maxBlockTypesToShow === 0) {
return [];
}
const nonPatternBlockTypes = blockTypes.filter(blockType => blockType.name !== 'core/block');
let orderedItems = orderBy(nonPatternBlockTypes, 'frecency', 'desc');
if (!filterValue && prioritizedBlocks.length) {
orderedItems = orderInserterBlockItems(orderedItems, prioritizedBlocks);
}
const results = searchBlockItems(orderedItems, blockTypeCategories, blockTypeCollections, filterValue);
return maxBlockTypesToShow !== undefined ? results.slice(0, maxBlockTypesToShow) : results;
}, [filterValue, blockTypes, blockTypeCategories, blockTypeCollections, maxBlockTypesToShow, prioritizedBlocks]);
// Announce search results on change.
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (!filterValue) {
return;
}
const count = filteredBlockTypes.length + filteredBlockPatterns.length;
const resultsFoundMessage = (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: number of results. */
(0,external_wp_i18n_namespaceObject._n)('%d result found.', '%d results found.', count), count);
debouncedSpeak(resultsFoundMessage);
}, [filterValue, debouncedSpeak, filteredBlockTypes, filteredBlockPatterns]);
const currentShownBlockTypes = (0,external_wp_compose_namespaceObject.useAsyncList)(filteredBlockTypes, {
step: search_results_INITIAL_INSERTER_RESULTS
});
const currentShownPatterns = (0,external_wp_compose_namespaceObject.useAsyncList)(currentShownBlockTypes.length === filteredBlockTypes.length ? filteredBlockPatterns : search_results_EMPTY_ARRAY);
const hasItems = filteredBlockTypes.length > 0 || filteredBlockPatterns.length > 0;
const blocksUI = !!filteredBlockTypes.length && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(panel, {
title: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.VisuallyHidden, {
children: (0,external_wp_i18n_namespaceObject.__)('Blocks')
}),
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_types_list, {
items: currentShownBlockTypes,
onSelect: onSelectBlockType,
onHover: onHover,
label: (0,external_wp_i18n_namespaceObject.__)('Blocks'),
isDraggable: isDraggable
})
});
const patternsUI = !!filteredBlockPatterns.length && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(panel, {
title: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.VisuallyHidden, {
children: (0,external_wp_i18n_namespaceObject.__)('Block patterns')
}),
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-inserter__quick-inserter-patterns",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_patterns_list, {
shownPatterns: currentShownPatterns,
blockPatterns: filteredBlockPatterns,
onClickPattern: onClickPattern,
onHover: onHoverPattern,
isDraggable: isDraggable
})
})
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(inserter_listbox, {
children: [!showBlockDirectory && !hasItems && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(no_results, {}), prioritizePatterns ? patternsUI : blocksUI, !!filteredBlockTypes.length && !!filteredBlockPatterns.length && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-inserter__quick-inserter-separator"
}), prioritizePatterns ? blocksUI : patternsUI, showBlockDirectory && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inserter_menu_extension.Slot, {
fillProps: {
onSelect: onSelectBlockType,
onHover,
filterValue,
hasItems,
rootClientId: destinationRootClientId
},
children: fills => {
if (fills.length) {
return fills;
}
if (!hasItems) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(no_results, {});
}
return null;
}
})]
});
}
/* harmony default export */ const search_results = (InserterSearchResults);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/close-small.js
/**
* WordPress dependencies
*/
const closeSmall = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"
})
});
/* harmony default export */ const close_small = (closeSmall);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/tabbed-sidebar/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const {
Tabs: tabbed_sidebar_Tabs
} = unlock(external_wp_components_namespaceObject.privateApis);
function TabbedSidebar({
defaultTabId,
onClose,
onSelect,
selectedTab,
tabs,
closeButtonLabel
}, ref) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-tabbed-sidebar",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(tabbed_sidebar_Tabs, {
selectOnMove: false,
defaultTabId: defaultTabId,
onSelect: onSelect,
selectedTabId: selectedTab,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-tabbed-sidebar__tablist-and-close-button",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
className: "block-editor-tabbed-sidebar__close-button",
icon: close_small,
label: closeButtonLabel,
onClick: () => onClose(),
size: "small"
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tabbed_sidebar_Tabs.TabList, {
className: "block-editor-tabbed-sidebar__tablist",
ref: ref,
children: tabs.map(tab => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tabbed_sidebar_Tabs.Tab, {
tabId: tab.name,
className: "block-editor-tabbed-sidebar__tab",
children: tab.title
}, tab.name))
})]
}), tabs.map(tab => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tabbed_sidebar_Tabs.TabPanel, {
tabId: tab.name,
focusable: false,
className: "block-editor-tabbed-sidebar__tabpanel",
ref: tab.panelRef,
children: tab.panel
}, tab.name))]
})
});
}
/* harmony default export */ const tabbed_sidebar = ((0,external_wp_element_namespaceObject.forwardRef)(TabbedSidebar));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/use-zoom-out.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.
*
* @param {boolean} zoomOut If we should enter into zoomOut mode or not
*/
function useZoomOut(zoomOut = true) {
const {
__unstableSetEditorMode,
setZoomLevel
} = unlock((0,external_wp_data_namespaceObject.useDispatch)(store));
const {
__unstableGetEditorMode
} = unlock((0,external_wp_data_namespaceObject.useSelect)(store));
const originalEditingModeRef = (0,external_wp_element_namespaceObject.useRef)(null);
const mode = __unstableGetEditorMode();
(0,external_wp_element_namespaceObject.useEffect)(() => {
// Only set this on mount so we know what to return to when we unmount.
if (!originalEditingModeRef.current) {
originalEditingModeRef.current = mode;
}
return () => {
// We need to use __unstableGetEditorMode() here and not `mode`, as mode may not update on unmount
if (__unstableGetEditorMode() === 'zoom-out' && __unstableGetEditorMode() !== originalEditingModeRef.current) {
__unstableSetEditorMode(originalEditingModeRef.current);
setZoomLevel(100);
}
};
}, []);
// The effect opens the zoom-out view if we want it open and it's not currently in zoom-out mode.
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (zoomOut && mode !== 'zoom-out') {
__unstableSetEditorMode('zoom-out');
setZoomLevel(50);
} else if (!zoomOut && __unstableGetEditorMode() === 'zoom-out' && originalEditingModeRef.current !== mode) {
__unstableSetEditorMode(originalEditingModeRef.current);
setZoomLevel(100);
}
}, [__unstableGetEditorMode, __unstableSetEditorMode, zoomOut, setZoomLevel]); // Mode is deliberately excluded from the dependencies so that the effect does not run when mode changes.
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/menu.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const NOOP = () => {};
function InserterMenu({
rootClientId,
clientId,
isAppender,
__experimentalInsertionIndex,
onSelect,
showInserterHelpPanel,
showMostUsedBlocks,
__experimentalFilterValue = '',
shouldFocusBlock = true,
onPatternCategorySelection,
onClose,
__experimentalInitialTab,
__experimentalInitialCategory
}, ref) {
const isZoomOutMode = (0,external_wp_data_namespaceObject.useSelect)(select => select(store).__unstableGetEditorMode() === 'zoom-out', []);
const [filterValue, setFilterValue, delayedFilterValue] = (0,external_wp_compose_namespaceObject.useDebouncedInput)(__experimentalFilterValue);
const [hoveredItem, setHoveredItem] = (0,external_wp_element_namespaceObject.useState)(null);
const [selectedPatternCategory, setSelectedPatternCategory] = (0,external_wp_element_namespaceObject.useState)(__experimentalInitialCategory);
const [patternFilter, setPatternFilter] = (0,external_wp_element_namespaceObject.useState)('all');
const [selectedMediaCategory, setSelectedMediaCategory] = (0,external_wp_element_namespaceObject.useState)(null);
const isLargeViewport = (0,external_wp_compose_namespaceObject.useViewportMatch)('large');
const [hasCategories, setHasCategories] = (0,external_wp_element_namespaceObject.useState)(true);
function getInitialTab() {
if (__experimentalInitialTab) {
return __experimentalInitialTab;
}
if (isZoomOutMode) {
return 'patterns';
}
}
const [selectedTab, setSelectedTab] = (0,external_wp_element_namespaceObject.useState)(getInitialTab());
const shouldUseZoomOut = selectedTab === 'patterns' || selectedTab === 'media';
useZoomOut(shouldUseZoomOut && isLargeViewport);
const [destinationRootClientId, onInsertBlocks, onToggleInsertionPoint] = use_insertion_point({
rootClientId,
clientId,
isAppender,
insertionIndex: __experimentalInsertionIndex,
shouldFocusBlock
});
const blockTypesTabRef = (0,external_wp_element_namespaceObject.useRef)();
const onInsert = (0,external_wp_element_namespaceObject.useCallback)((blocks, meta, shouldForceFocusBlock, _rootClientId) => {
onInsertBlocks(blocks, meta, shouldForceFocusBlock, _rootClientId);
onSelect(blocks);
// Check for focus loss due to filtering blocks by selected block type
window.requestAnimationFrame(() => {
if (!shouldFocusBlock && !blockTypesTabRef.current?.contains(ref.current.ownerDocument.activeElement)) {
// There has been a focus loss, so focus the first button in the block types tab
blockTypesTabRef.current?.querySelector('button').focus();
}
});
}, [onInsertBlocks, onSelect, shouldFocusBlock]);
const onInsertPattern = (0,external_wp_element_namespaceObject.useCallback)((blocks, patternName) => {
onToggleInsertionPoint(false);
onInsertBlocks(blocks, {
patternName
});
onSelect();
}, [onInsertBlocks, onSelect]);
const onHover = (0,external_wp_element_namespaceObject.useCallback)(item => {
onToggleInsertionPoint(item);
setHoveredItem(item);
}, [onToggleInsertionPoint, setHoveredItem]);
const onClickPatternCategory = (0,external_wp_element_namespaceObject.useCallback)((patternCategory, filter) => {
setSelectedPatternCategory(patternCategory);
setPatternFilter(filter);
onPatternCategorySelection?.();
}, [setSelectedPatternCategory, onPatternCategorySelection]);
const showPatternPanel = selectedTab === 'patterns' && hasCategories && !delayedFilterValue && !!selectedPatternCategory;
const showMediaPanel = selectedTab === 'media' && !!selectedMediaCategory && hasCategories;
const inserterSearch = (0,external_wp_element_namespaceObject.useMemo)(() => {
if (selectedTab === 'media') {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.SearchControl, {
__nextHasNoMarginBottom: true,
className: "block-editor-inserter__search",
onChange: value => {
if (hoveredItem) {
setHoveredItem(null);
}
setFilterValue(value);
},
value: filterValue,
label: (0,external_wp_i18n_namespaceObject.__)('Search for blocks and patterns'),
placeholder: (0,external_wp_i18n_namespaceObject.__)('Search')
}), !!delayedFilterValue && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(search_results, {
filterValue: delayedFilterValue,
onSelect: onSelect,
onHover: onHover,
rootClientId: rootClientId,
clientId: clientId,
isAppender: isAppender,
__experimentalInsertionIndex: __experimentalInsertionIndex,
showBlockDirectory: true,
shouldFocusBlock: shouldFocusBlock,
prioritizePatterns: selectedTab === 'patterns'
})]
});
}, [selectedTab, hoveredItem, setHoveredItem, setFilterValue, filterValue, delayedFilterValue, onSelect, onHover, shouldFocusBlock, clientId, rootClientId, __experimentalInsertionIndex, isAppender]);
const blocksTab = (0,external_wp_element_namespaceObject.useMemo)(() => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-inserter__block-list",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_types_tab, {
ref: blockTypesTabRef,
rootClientId: destinationRootClientId,
onInsert: onInsert,
onHover: onHover,
showMostUsedBlocks: showMostUsedBlocks
})
}), showInserterHelpPanel && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-inserter__tips",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.VisuallyHidden, {
as: "h2",
children: (0,external_wp_i18n_namespaceObject.__)('A tip for using the block editor')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tips, {})]
})]
});
}, [destinationRootClientId, onInsert, onHover, showMostUsedBlocks, showInserterHelpPanel]);
const patternsTab = (0,external_wp_element_namespaceObject.useMemo)(() => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_patterns_tab, {
rootClientId: destinationRootClientId,
onInsert: onInsertPattern,
onSelectCategory: onClickPatternCategory,
selectedCategory: selectedPatternCategory,
setHasCategories: setHasCategories,
children: showPatternPanel && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PatternCategoryPreviews, {
rootClientId: destinationRootClientId,
onInsert: onInsertPattern,
category: selectedPatternCategory,
patternFilter: patternFilter,
showTitlesAsTooltip: true
})
});
}, [destinationRootClientId, onInsertPattern, onClickPatternCategory, patternFilter, selectedPatternCategory, showPatternPanel]);
const mediaTab = (0,external_wp_element_namespaceObject.useMemo)(() => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(media_tab, {
rootClientId: destinationRootClientId,
selectedCategory: selectedMediaCategory,
onSelectCategory: setSelectedMediaCategory,
onInsert: onInsert,
setHasCategories: setHasCategories,
children: showMediaPanel && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MediaCategoryPanel, {
rootClientId: destinationRootClientId,
onInsert: onInsert,
category: selectedMediaCategory
})
});
}, [destinationRootClientId, onInsert, selectedMediaCategory, setSelectedMediaCategory, showMediaPanel]);
const handleSetSelectedTab = value => {
// If no longer on patterns tab remove the category setting.
if (value !== 'patterns') {
setSelectedPatternCategory(null);
}
setSelectedTab(value);
};
// Focus first active tab, if any
const tabsRef = (0,external_wp_element_namespaceObject.useRef)();
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
if (tabsRef.current) {
window.requestAnimationFrame(() => {
tabsRef.current.querySelector('[role="tab"][aria-selected="true"]')?.focus();
});
}
}, []);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: dist_clsx('block-editor-inserter__menu', {
'show-panel': showPatternPanel || showMediaPanel,
'is-zoom-out': isZoomOutMode
}),
ref: ref,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-inserter__main-area",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tabbed_sidebar, {
ref: tabsRef,
onSelect: handleSetSelectedTab,
onClose: onClose,
selectedTab: selectedTab,
closeButtonLabel: (0,external_wp_i18n_namespaceObject.__)('Close block inserter'),
tabs: [{
name: 'blocks',
title: (0,external_wp_i18n_namespaceObject.__)('Blocks'),
panel: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [inserterSearch, selectedTab === 'blocks' && !delayedFilterValue && blocksTab]
})
}, {
name: 'patterns',
title: (0,external_wp_i18n_namespaceObject.__)('Patterns'),
panel: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [inserterSearch, selectedTab === 'patterns' && !delayedFilterValue && patternsTab]
})
}, {
name: 'media',
title: (0,external_wp_i18n_namespaceObject.__)('Media'),
panel: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [inserterSearch, mediaTab]
})
}]
})
}), showInserterHelpPanel && hoveredItem && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Popover, {
className: "block-editor-inserter__preview-container__popover",
placement: "right-start",
offset: 16,
focusOnMount: false,
animate: false,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(preview_panel, {
item: hoveredItem
})
})]
});
}
const PrivateInserterMenu = (0,external_wp_element_namespaceObject.forwardRef)(InserterMenu);
function PublicInserterMenu(props, ref) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PrivateInserterMenu, {
...props,
onPatternCategorySelection: NOOP,
ref: ref
});
}
/* harmony default export */ const menu = ((0,external_wp_element_namespaceObject.forwardRef)(PublicInserterMenu));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/quick-inserter.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const SEARCH_THRESHOLD = 6;
const SHOWN_BLOCK_TYPES = 6;
const SHOWN_BLOCK_PATTERNS = 2;
const SHOWN_BLOCK_PATTERNS_WITH_PRIORITIZATION = 4;
function QuickInserter({
onSelect,
rootClientId,
clientId,
isAppender,
prioritizePatterns,
selectBlockOnInsert,
hasSearch = true
}) {
const [filterValue, setFilterValue] = (0,external_wp_element_namespaceObject.useState)('');
const [destinationRootClientId, onInsertBlocks] = use_insertion_point({
onSelect,
rootClientId,
clientId,
isAppender,
selectBlockOnInsert
});
const [blockTypes] = use_block_types_state(destinationRootClientId, onInsertBlocks, true);
const [patterns] = use_patterns_state(onInsertBlocks, destinationRootClientId);
const {
setInserterIsOpened,
insertionIndex
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getSettings,
getBlockIndex,
getBlockCount
} = select(store);
const settings = getSettings();
const index = getBlockIndex(clientId);
const blockCount = getBlockCount();
return {
setInserterIsOpened: settings.__experimentalSetIsInserterOpened,
insertionIndex: index === -1 ? blockCount : index
};
}, [clientId]);
const showPatterns = patterns.length && (!!filterValue || prioritizePatterns);
const showSearch = hasSearch && (showPatterns && patterns.length > SEARCH_THRESHOLD || blockTypes.length > SEARCH_THRESHOLD);
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (setInserterIsOpened) {
setInserterIsOpened(false);
}
}, [setInserterIsOpened]);
// When clicking Browse All select the appropriate block so as
// the insertion point can work as expected.
const onBrowseAll = () => {
setInserterIsOpened({
rootClientId,
insertionIndex,
filterValue,
onSelect
});
};
let maxBlockPatterns = 0;
if (showPatterns) {
maxBlockPatterns = prioritizePatterns ? SHOWN_BLOCK_PATTERNS_WITH_PRIORITIZATION : SHOWN_BLOCK_PATTERNS;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: dist_clsx('block-editor-inserter__quick-inserter', {
'has-search': showSearch,
'has-expand': setInserterIsOpened
}),
children: [showSearch && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.SearchControl, {
__nextHasNoMarginBottom: true,
className: "block-editor-inserter__search",
value: filterValue,
onChange: value => {
setFilterValue(value);
},
label: (0,external_wp_i18n_namespaceObject.__)('Search for blocks and patterns'),
placeholder: (0,external_wp_i18n_namespaceObject.__)('Search')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-inserter__quick-inserter-results",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(search_results, {
filterValue: filterValue,
onSelect: onSelect,
rootClientId: rootClientId,
clientId: clientId,
isAppender: isAppender,
maxBlockPatterns: maxBlockPatterns,
maxBlockTypes: SHOWN_BLOCK_TYPES,
isDraggable: false,
prioritizePatterns: prioritizePatterns,
selectBlockOnInsert: selectBlockOnInsert,
isQuick: true
})
}), setInserterIsOpened && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
className: "block-editor-inserter__quick-inserter-expand",
onClick: onBrowseAll,
"aria-label": (0,external_wp_i18n_namespaceObject.__)('Browse all. This will open the main inserter panel in the editor toolbar.'),
children: (0,external_wp_i18n_namespaceObject.__)('Browse all')
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const defaultRenderToggle = ({
onToggle,
disabled,
isOpen,
blockTitle,
hasSingleBlockType,
toggleProps = {},
prioritizePatterns
}) => {
const {
as: Wrapper = external_wp_components_namespaceObject.Button,
label: labelProp,
onClick,
...rest
} = toggleProps;
let label = labelProp;
if (!label && hasSingleBlockType) {
label = (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: %s: the name of the block when there is only one
(0,external_wp_i18n_namespaceObject._x)('Add %s', 'directly add the only allowed block'), blockTitle);
} else if (!label && prioritizePatterns) {
label = (0,external_wp_i18n_namespaceObject.__)('Add pattern');
} else if (!label) {
label = (0,external_wp_i18n_namespaceObject._x)('Add block', 'Generic label for block inserter button');
}
// Handle both onClick functions from the toggle and the parent component.
function handleClick(event) {
if (onToggle) {
onToggle(event);
}
if (onClick) {
onClick(event);
}
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Wrapper, {
icon: library_plus,
label: label,
tooltipPosition: "bottom",
onClick: handleClick,
className: "block-editor-inserter__toggle",
"aria-haspopup": !hasSingleBlockType ? 'true' : false,
"aria-expanded": !hasSingleBlockType ? isOpen : false,
disabled: disabled,
...rest
});
};
class Inserter extends external_wp_element_namespaceObject.Component {
constructor() {
super(...arguments);
this.onToggle = this.onToggle.bind(this);
this.renderToggle = this.renderToggle.bind(this);
this.renderContent = this.renderContent.bind(this);
}
onToggle(isOpen) {
const {
onToggle
} = this.props;
// Surface toggle callback to parent component.
if (onToggle) {
onToggle(isOpen);
}
}
/**
* Render callback to display Dropdown toggle element.
*
* @param {Object} options
* @param {Function} options.onToggle Callback to invoke when toggle is
* pressed.
* @param {boolean} options.isOpen Whether dropdown is currently open.
*
* @return {Element} Dropdown toggle element.
*/
renderToggle({
onToggle,
isOpen
}) {
const {
disabled,
blockTitle,
hasSingleBlockType,
directInsertBlock,
toggleProps,
hasItems,
renderToggle = defaultRenderToggle,
prioritizePatterns
} = this.props;
return renderToggle({
onToggle,
isOpen,
disabled: disabled || !hasItems,
blockTitle,
hasSingleBlockType,
directInsertBlock,
toggleProps,
prioritizePatterns
});
}
/**
* Render callback to display Dropdown content element.
*
* @param {Object} options
* @param {Function} options.onClose Callback to invoke when dropdown is
* closed.
*
* @return {Element} Dropdown content element.
*/
renderContent({
onClose
}) {
const {
rootClientId,
clientId,
isAppender,
showInserterHelpPanel,
// This prop is experimental to give some time for the quick inserter to mature
// Feel free to make them stable after a few releases.
__experimentalIsQuick: isQuick,
prioritizePatterns,
onSelectOrClose,
selectBlockOnInsert
} = this.props;
if (isQuick) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(QuickInserter, {
onSelect: blocks => {
const firstBlock = Array.isArray(blocks) && blocks?.length ? blocks[0] : blocks;
if (onSelectOrClose && typeof onSelectOrClose === 'function') {
onSelectOrClose(firstBlock);
}
onClose();
},
rootClientId: rootClientId,
clientId: clientId,
isAppender: isAppender,
prioritizePatterns: prioritizePatterns,
selectBlockOnInsert: selectBlockOnInsert
});
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(menu, {
onSelect: () => {
onClose();
},
rootClientId: rootClientId,
clientId: clientId,
isAppender: isAppender,
showInserterHelpPanel: showInserterHelpPanel
});
}
render() {
const {
position,
hasSingleBlockType,
directInsertBlock,
insertOnlyAllowedBlock,
__experimentalIsQuick: isQuick,
onSelectOrClose
} = this.props;
if (hasSingleBlockType || directInsertBlock) {
return this.renderToggle({
onToggle: insertOnlyAllowedBlock
});
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Dropdown, {
className: "block-editor-inserter",
contentClassName: dist_clsx('block-editor-inserter__popover', {
'is-quick': isQuick
}),
popoverProps: {
position,
shift: true
},
onToggle: this.onToggle,
expandOnMobile: true,
headerTitle: (0,external_wp_i18n_namespaceObject.__)('Add a block'),
renderToggle: this.renderToggle,
renderContent: this.renderContent,
onClose: onSelectOrClose
});
}
}
/* harmony default export */ const inserter = ((0,external_wp_compose_namespaceObject.compose)([(0,external_wp_data_namespaceObject.withSelect)((select, {
clientId,
rootClientId,
shouldDirectInsert = true
}) => {
const {
getBlockRootClientId,
hasInserterItems,
getAllowedBlocks,
getDirectInsertBlock,
getSettings
} = select(store);
const {
getBlockVariations
} = select(external_wp_blocks_namespaceObject.store);
rootClientId = rootClientId || getBlockRootClientId(clientId) || undefined;
const allowedBlocks = getAllowedBlocks(rootClientId);
const directInsertBlock = shouldDirectInsert && getDirectInsertBlock(rootClientId);
const settings = getSettings();
const hasSingleBlockType = allowedBlocks?.length === 1 && getBlockVariations(allowedBlocks[0].name, 'inserter')?.length === 0;
let allowedBlockType = false;
if (hasSingleBlockType) {
allowedBlockType = allowedBlocks[0];
}
return {
hasItems: hasInserterItems(rootClientId),
hasSingleBlockType,
blockTitle: allowedBlockType ? allowedBlockType.title : '',
allowedBlockType,
directInsertBlock,
rootClientId,
prioritizePatterns: settings.__experimentalPreferPatternsOnRoot && !rootClientId
};
}), (0,external_wp_data_namespaceObject.withDispatch)((dispatch, ownProps, {
select
}) => {
return {
insertOnlyAllowedBlock() {
const {
rootClientId,
clientId,
isAppender,
hasSingleBlockType,
allowedBlockType,
directInsertBlock,
onSelectOrClose,
selectBlockOnInsert
} = ownProps;
if (!hasSingleBlockType && !directInsertBlock) {
return;
}
function getAdjacentBlockAttributes(attributesToCopy) {
const {
getBlock,
getPreviousBlockClientId
} = select(store);
if (!attributesToCopy || !clientId && !rootClientId) {
return {};
}
const result = {};
let adjacentAttributes = {};
// If there is no clientId, then attempt to get attributes
// from the last block within innerBlocks of the root block.
if (!clientId) {
const parentBlock = getBlock(rootClientId);
if (parentBlock?.innerBlocks?.length) {
const lastInnerBlock = parentBlock.innerBlocks[parentBlock.innerBlocks.length - 1];
if (directInsertBlock && directInsertBlock?.name === lastInnerBlock.name) {
adjacentAttributes = lastInnerBlock.attributes;
}
}
} else {
// Otherwise, attempt to get attributes from the
// previous block relative to the current clientId.
const currentBlock = getBlock(clientId);
const previousBlock = getBlock(getPreviousBlockClientId(clientId));
if (currentBlock?.name === previousBlock?.name) {
adjacentAttributes = previousBlock?.attributes || {};
}
}
// Copy over only those attributes flagged to be copied.
attributesToCopy.forEach(attribute => {
if (adjacentAttributes.hasOwnProperty(attribute)) {
result[attribute] = adjacentAttributes[attribute];
}
});
return result;
}
function getInsertionIndex() {
const {
getBlockIndex,
getBlockSelectionEnd,
getBlockOrder,
getBlockRootClientId
} = select(store);
// If the clientId is defined, we insert at the position of the block.
if (clientId) {
return getBlockIndex(clientId);
}
// If there a selected block, we insert after the selected block.
const end = getBlockSelectionEnd();
if (!isAppender && end && getBlockRootClientId(end) === rootClientId) {
return getBlockIndex(end) + 1;
}
// Otherwise, we insert at the end of the current rootClientId.
return getBlockOrder(rootClientId).length;
}
const {
insertBlock
} = dispatch(store);
let blockToInsert;
// Attempt to augment the directInsertBlock with attributes from an adjacent block.
// This ensures styling from nearby blocks is preserved in the newly inserted block.
// See: https://github.com/WordPress/gutenberg/issues/37904
if (directInsertBlock) {
const newAttributes = getAdjacentBlockAttributes(directInsertBlock.attributesToCopy);
blockToInsert = (0,external_wp_blocks_namespaceObject.createBlock)(directInsertBlock.name, {
...(directInsertBlock.attributes || {}),
...newAttributes
});
} else {
blockToInsert = (0,external_wp_blocks_namespaceObject.createBlock)(allowedBlockType.name);
}
insertBlock(blockToInsert, getInsertionIndex(), rootClientId, selectBlockOnInsert);
if (onSelectOrClose) {
onSelectOrClose({
clientId: blockToInsert?.clientId
});
}
const message = (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: %s: the name of the block that has been added
(0,external_wp_i18n_namespaceObject.__)('%s block added'), allowedBlockType.title);
(0,external_wp_a11y_namespaceObject.speak)(message);
}
};
}),
// The global inserter should always be visible, we are using ( ! isAppender && ! rootClientId && ! clientId ) as
// a way to detect the global Inserter.
(0,external_wp_compose_namespaceObject.ifCondition)(({
hasItems,
isAppender,
rootClientId,
clientId
}) => hasItems || !isAppender && !rootClientId && !clientId)])(Inserter));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/button-block-appender/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function button_block_appender_ButtonBlockAppender({
rootClientId,
className,
onFocus,
tabIndex,
onSelect
}, ref) {
const inserterButtonRef = (0,external_wp_element_namespaceObject.useRef)();
const mergedInserterButtonRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([inserterButtonRef, ref]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inserter, {
position: "bottom center",
rootClientId: rootClientId,
__experimentalIsQuick: true,
onSelectOrClose: (...args) => {
if (onSelect && typeof onSelect === 'function') {
onSelect(...args);
}
inserterButtonRef.current?.focus();
},
renderToggle: ({
onToggle,
disabled,
isOpen,
blockTitle,
hasSingleBlockType
}) => {
const isToggleButton = !hasSingleBlockType;
const label = hasSingleBlockType ? (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: %s: the name of the block when there is only one
(0,external_wp_i18n_namespaceObject._x)('Add %s', 'directly add the only allowed block'), blockTitle) : (0,external_wp_i18n_namespaceObject._x)('Add block', 'Generic label for block inserter button');
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
ref: mergedInserterButtonRef,
onFocus: onFocus,
tabIndex: tabIndex,
className: dist_clsx(className, 'block-editor-button-block-appender'),
onClick: onToggle,
"aria-haspopup": isToggleButton ? 'true' : undefined,
"aria-expanded": isToggleButton ? isOpen : undefined
// Disable reason: There shouldn't be a case where this button is disabled but not visually hidden.
// eslint-disable-next-line no-restricted-syntax
,
disabled: disabled,
label: label,
showTooltip: true,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
icon: library_plus
})
});
},
isAppender: true
});
}
/**
* Use `ButtonBlockAppender` instead.
*
* @deprecated
*/
const ButtonBlockerAppender = (0,external_wp_element_namespaceObject.forwardRef)((props, ref) => {
external_wp_deprecated_default()(`wp.blockEditor.ButtonBlockerAppender`, {
alternative: 'wp.blockEditor.ButtonBlockAppender',
since: '5.9'
});
return button_block_appender_ButtonBlockAppender(props, ref);
});
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/button-block-appender/README.md
*/
/* harmony default export */ const button_block_appender = ((0,external_wp_element_namespaceObject.forwardRef)(button_block_appender_ButtonBlockAppender));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/grid/grid-visualizer.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function GridVisualizer({
clientId,
contentRef,
parentLayout
}) {
const isDistractionFree = (0,external_wp_data_namespaceObject.useSelect)(select => select(store).getSettings().isDistractionFree, []);
const gridElement = useBlockElement(clientId);
if (isDistractionFree || !gridElement) {
return null;
}
const isManualGrid = parentLayout?.isManualPlacement && window.__experimentalEnableGridInteractivity;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridVisualizerGrid, {
gridClientId: clientId,
gridElement: gridElement,
isManualGrid: isManualGrid,
ref: contentRef
});
}
const GridVisualizerGrid = (0,external_wp_element_namespaceObject.forwardRef)(({
gridClientId,
gridElement,
isManualGrid
}, ref) => {
const [gridInfo, setGridInfo] = (0,external_wp_element_namespaceObject.useState)(() => getGridInfo(gridElement));
const [isDroppingAllowed, setIsDroppingAllowed] = (0,external_wp_element_namespaceObject.useState)(false);
(0,external_wp_element_namespaceObject.useEffect)(() => {
const observers = [];
for (const element of [gridElement, ...gridElement.children]) {
const observer = new window.ResizeObserver(() => {
setGridInfo(getGridInfo(gridElement));
});
observer.observe(element);
observers.push(observer);
}
return () => {
for (const observer of observers) {
observer.disconnect();
}
};
}, [gridElement]);
(0,external_wp_element_namespaceObject.useEffect)(() => {
function onGlobalDrag() {
setIsDroppingAllowed(true);
}
function onGlobalDragEnd() {
setIsDroppingAllowed(false);
}
document.addEventListener('drag', onGlobalDrag);
document.addEventListener('dragend', onGlobalDragEnd);
return () => {
document.removeEventListener('drag', onGlobalDrag);
document.removeEventListener('dragend', onGlobalDragEnd);
};
}, []);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(cover, {
className: dist_clsx('block-editor-grid-visualizer', {
'is-dropping-allowed': isDroppingAllowed
}),
clientId: gridClientId,
__unstablePopoverSlot: "__unstable-block-tools-after",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
ref: ref,
className: "block-editor-grid-visualizer__grid",
style: gridInfo.style,
children: isManualGrid ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ManualGridVisualizer, {
gridClientId: gridClientId,
gridInfo: gridInfo
}) : Array.from({
length: gridInfo.numItems
}, (_, i) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridVisualizerCell, {
color: gridInfo.currentColor
}, i))
})
});
});
function ManualGridVisualizer({
gridClientId,
gridInfo
}) {
const [highlightedRect, setHighlightedRect] = (0,external_wp_element_namespaceObject.useState)(null);
const gridItemStyles = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockOrder,
getBlockStyles
} = unlock(select(store));
const blockOrder = getBlockOrder(gridClientId);
return getBlockStyles(blockOrder);
}, [gridClientId]);
const occupiedRects = (0,external_wp_element_namespaceObject.useMemo)(() => {
const rects = [];
for (const style of Object.values(gridItemStyles)) {
var _style$layout;
const {
columnStart,
rowStart,
columnSpan = 1,
rowSpan = 1
} = (_style$layout = style?.layout) !== null && _style$layout !== void 0 ? _style$layout : {};
if (!columnStart || !rowStart) {
continue;
}
rects.push(new GridRect({
columnStart,
rowStart,
columnSpan,
rowSpan
}));
}
return rects;
}, [gridItemStyles]);
return range(1, gridInfo.numRows).map(row => range(1, gridInfo.numColumns).map(column => {
var _highlightedRect$cont;
const isCellOccupied = occupiedRects.some(rect => rect.contains(column, row));
const isHighlighted = (_highlightedRect$cont = highlightedRect?.contains(column, row)) !== null && _highlightedRect$cont !== void 0 ? _highlightedRect$cont : false;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridVisualizerCell, {
color: gridInfo.currentColor,
className: isHighlighted && 'is-highlighted',
children: isCellOccupied ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridVisualizerDropZone, {
column: column,
row: row,
gridClientId: gridClientId,
gridInfo: gridInfo,
setHighlightedRect: setHighlightedRect
}) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridVisualizerAppender, {
column: column,
row: row,
gridClientId: gridClientId,
gridInfo: gridInfo,
setHighlightedRect: setHighlightedRect
})
}, `${row}-${column}`);
}));
}
function GridVisualizerCell({
color,
children,
className
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: dist_clsx('block-editor-grid-visualizer__cell', className),
style: {
boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${color} 20%, #0000)`,
color
},
children: children
});
}
function useGridVisualizerDropZone(column, row, gridClientId, gridInfo, setHighlightedRect) {
const {
getBlockAttributes,
getBlockRootClientId,
canInsertBlockType,
getBlockName
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
updateBlockAttributes,
moveBlocksToPosition,
__unstableMarkNextChangeAsNotPersistent
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(gridClientId, gridInfo.numColumns);
return useDropZoneWithValidation({
validateDrag(srcClientId) {
const blockName = getBlockName(srcClientId);
if (!canInsertBlockType(blockName, gridClientId)) {
return false;
}
const attributes = getBlockAttributes(srcClientId);
const rect = new GridRect({
columnStart: column,
rowStart: row,
columnSpan: attributes.style?.layout?.columnSpan,
rowSpan: attributes.style?.layout?.rowSpan
});
const isInBounds = new GridRect({
columnSpan: gridInfo.numColumns,
rowSpan: gridInfo.numRows
}).containsRect(rect);
return isInBounds;
},
onDragEnter(srcClientId) {
const attributes = getBlockAttributes(srcClientId);
setHighlightedRect(new GridRect({
columnStart: column,
rowStart: row,
columnSpan: attributes.style?.layout?.columnSpan,
rowSpan: attributes.style?.layout?.rowSpan
}));
},
onDragLeave() {
// onDragEnter can be called before onDragLeave if the user moves
// their mouse quickly, so only clear the highlight if it was set
// by this cell.
setHighlightedRect(prevHighlightedRect => prevHighlightedRect?.columnStart === column && prevHighlightedRect?.rowStart === row ? null : prevHighlightedRect);
},
onDrop(srcClientId) {
setHighlightedRect(null);
const attributes = getBlockAttributes(srcClientId);
updateBlockAttributes(srcClientId, {
style: {
...attributes.style,
layout: {
...attributes.style?.layout,
columnStart: column,
rowStart: row
}
}
});
__unstableMarkNextChangeAsNotPersistent();
moveBlocksToPosition([srcClientId], getBlockRootClientId(srcClientId), gridClientId, getNumberOfBlocksBeforeCell(column, row));
}
});
}
function GridVisualizerDropZone({
column,
row,
gridClientId,
gridInfo,
setHighlightedRect
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-grid-visualizer__drop-zone",
ref: useGridVisualizerDropZone(column, row, gridClientId, gridInfo, setHighlightedRect)
});
}
function GridVisualizerAppender({
column,
row,
gridClientId,
gridInfo,
setHighlightedRect
}) {
const {
updateBlockAttributes,
moveBlocksToPosition,
__unstableMarkNextChangeAsNotPersistent
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(gridClientId, gridInfo.numColumns);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(button_block_appender, {
rootClientId: gridClientId,
className: "block-editor-grid-visualizer__appender",
ref: useGridVisualizerDropZone(column, row, gridClientId, gridInfo, setHighlightedRect),
style: {
color: gridInfo.currentColor
},
onSelect: block => {
if (!block) {
return;
}
updateBlockAttributes(block.clientId, {
style: {
layout: {
columnStart: column,
rowStart: row
}
}
});
__unstableMarkNextChangeAsNotPersistent();
moveBlocksToPosition([block.clientId], gridClientId, gridClientId, getNumberOfBlocksBeforeCell(column, row));
}
});
}
function useDropZoneWithValidation({
validateDrag,
onDragEnter,
onDragLeave,
onDrop
}) {
const {
getDraggedBlockClientIds
} = (0,external_wp_data_namespaceObject.useSelect)(store);
return (0,external_wp_compose_namespaceObject.__experimentalUseDropZone)({
onDragEnter() {
const [srcClientId] = getDraggedBlockClientIds();
if (srcClientId && validateDrag(srcClientId)) {
onDragEnter(srcClientId);
}
},
onDragLeave() {
onDragLeave();
},
onDrop() {
const [srcClientId] = getDraggedBlockClientIds();
if (srcClientId && validateDrag(srcClientId)) {
onDrop(srcClientId);
}
}
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/grid/grid-item-resizer.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function GridItemResizer({
clientId,
bounds,
onChange,
parentLayout
}) {
const blockElement = useBlockElement(clientId);
const rootBlockElement = blockElement?.parentElement;
const {
isManualPlacement
} = parentLayout;
if (!blockElement || !rootBlockElement) {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridItemResizerInner, {
clientId: clientId,
bounds: bounds,
blockElement: blockElement,
rootBlockElement: rootBlockElement,
onChange: onChange,
isManualGrid: isManualPlacement && window.__experimentalEnableGridInteractivity
});
}
function GridItemResizerInner({
clientId,
bounds,
blockElement,
rootBlockElement,
onChange,
isManualGrid
}) {
const [resizeDirection, setResizeDirection] = (0,external_wp_element_namespaceObject.useState)(null);
const [enableSide, setEnableSide] = (0,external_wp_element_namespaceObject.useState)({
top: false,
bottom: false,
left: false,
right: false
});
(0,external_wp_element_namespaceObject.useEffect)(() => {
const observer = new window.ResizeObserver(() => {
const blockClientRect = blockElement.getBoundingClientRect();
const rootBlockClientRect = rootBlockElement.getBoundingClientRect();
setEnableSide({
top: blockClientRect.top > rootBlockClientRect.top,
bottom: blockClientRect.bottom < rootBlockClientRect.bottom,
left: blockClientRect.left > rootBlockClientRect.left,
right: blockClientRect.right < rootBlockClientRect.right
});
});
observer.observe(blockElement);
return () => observer.disconnect();
}, [blockElement, rootBlockElement]);
const justification = {
right: 'left',
left: 'right'
};
const alignment = {
top: 'flex-end',
bottom: 'flex-start'
};
const styles = {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
...(justification[resizeDirection] && {
justifyContent: justification[resizeDirection]
}),
...(alignment[resizeDirection] && {
alignItems: alignment[resizeDirection]
})
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(cover, {
className: "block-editor-grid-item-resizer",
clientId: clientId,
__unstablePopoverSlot: "__unstable-block-tools-after",
additionalStyles: styles,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ResizableBox, {
className: "block-editor-grid-item-resizer__box",
size: {
width: '100%',
height: '100%'
},
enable: {
bottom: enableSide.bottom,
bottomLeft: false,
bottomRight: false,
left: enableSide.left,
right: enableSide.right,
top: enableSide.top,
topLeft: false,
topRight: false
},
bounds: bounds,
boundsByDirection: true,
onPointerDown: ({
target,
pointerId
}) => {
/*
* Captures the pointer to avoid hiccups while dragging over objects
* like iframes and ensures that the event to end the drag is
* captured by the target (resize handle) whether or not it’s under
* the pointer.
*/
target.setPointerCapture(pointerId);
},
onResizeStart: (event, direction) => {
/*
* The container justification and alignment need to be set
* according to the direction the resizer is being dragged in,
* so that it resizes in the right direction.
*/
setResizeDirection(direction);
},
onResizeStop: (event, direction, boxElement) => {
const columnGap = parseFloat(utils_getComputedCSS(rootBlockElement, 'column-gap'));
const rowGap = parseFloat(utils_getComputedCSS(rootBlockElement, 'row-gap'));
const gridColumnTracks = getGridTracks(utils_getComputedCSS(rootBlockElement, 'grid-template-columns'), columnGap);
const gridRowTracks = getGridTracks(utils_getComputedCSS(rootBlockElement, 'grid-template-rows'), rowGap);
const rect = new window.DOMRect(blockElement.offsetLeft + boxElement.offsetLeft, blockElement.offsetTop + boxElement.offsetTop, boxElement.offsetWidth, boxElement.offsetHeight);
const columnStart = getClosestTrack(gridColumnTracks, rect.left) + 1;
const rowStart = getClosestTrack(gridRowTracks, rect.top) + 1;
const columnEnd = getClosestTrack(gridColumnTracks, rect.right, 'end') + 1;
const rowEnd = getClosestTrack(gridRowTracks, rect.bottom, 'end') + 1;
onChange({
columnSpan: columnEnd - columnStart + 1,
rowSpan: rowEnd - rowStart + 1,
columnStart: isManualGrid ? columnStart : undefined,
rowStart: isManualGrid ? rowStart : undefined
});
}
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/chevron-up.js
/**
* WordPress dependencies
*/
const chevronUp = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z"
})
});
/* harmony default export */ const chevron_up = (chevronUp);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/chevron-down.js
/**
* WordPress dependencies
*/
const chevronDown = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
})
});
/* harmony default export */ const chevron_down = (chevronDown);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/grid/grid-item-movers.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function GridItemMovers({
layout,
parentLayout,
onChange,
gridClientId,
blockClientId
}) {
var _layout$columnStart, _layout$rowStart, _layout$columnSpan, _layout$rowSpan;
const {
moveBlocksToPosition,
__unstableMarkNextChangeAsNotPersistent
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const columnStart = (_layout$columnStart = layout?.columnStart) !== null && _layout$columnStart !== void 0 ? _layout$columnStart : 1;
const rowStart = (_layout$rowStart = layout?.rowStart) !== null && _layout$rowStart !== void 0 ? _layout$rowStart : 1;
const columnSpan = (_layout$columnSpan = layout?.columnSpan) !== null && _layout$columnSpan !== void 0 ? _layout$columnSpan : 1;
const rowSpan = (_layout$rowSpan = layout?.rowSpan) !== null && _layout$rowSpan !== void 0 ? _layout$rowSpan : 1;
const columnEnd = columnStart + columnSpan - 1;
const rowEnd = rowStart + rowSpan - 1;
const columnCount = parentLayout?.columnCount;
const rowCount = parentLayout?.rowCount;
const getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(gridClientId, columnCount);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_controls, {
group: "parent",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.ToolbarGroup, {
className: "block-editor-grid-item-mover__move-button-container",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-grid-item-mover__move-horizontal-button-container is-left",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridItemMover, {
icon: (0,external_wp_i18n_namespaceObject.isRTL)() ? chevron_right : chevron_left,
label: (0,external_wp_i18n_namespaceObject.__)('Move left'),
description: (0,external_wp_i18n_namespaceObject.__)('Move left'),
isDisabled: columnStart <= 1,
onClick: () => {
onChange({
columnStart: columnStart - 1
});
__unstableMarkNextChangeAsNotPersistent();
moveBlocksToPosition([blockClientId], gridClientId, gridClientId, getNumberOfBlocksBeforeCell(columnStart - 1, rowStart));
}
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-grid-item-mover__move-vertical-button-container",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridItemMover, {
className: "is-up-button",
icon: chevron_up,
label: (0,external_wp_i18n_namespaceObject.__)('Move up'),
description: (0,external_wp_i18n_namespaceObject.__)('Move up'),
isDisabled: rowStart <= 1,
onClick: () => {
onChange({
rowStart: rowStart - 1
});
__unstableMarkNextChangeAsNotPersistent();
moveBlocksToPosition([blockClientId], gridClientId, gridClientId, getNumberOfBlocksBeforeCell(columnStart, rowStart - 1));
}
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridItemMover, {
className: "is-down-button",
icon: chevron_down,
label: (0,external_wp_i18n_namespaceObject.__)('Move down'),
description: (0,external_wp_i18n_namespaceObject.__)('Move down'),
isDisabled: rowCount && rowEnd >= rowCount,
onClick: () => {
onChange({
rowStart: rowStart + 1
});
__unstableMarkNextChangeAsNotPersistent();
moveBlocksToPosition([blockClientId], gridClientId, gridClientId, getNumberOfBlocksBeforeCell(columnStart, rowStart + 1));
}
})]
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-grid-item-mover__move-horizontal-button-container is-right",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridItemMover, {
icon: (0,external_wp_i18n_namespaceObject.isRTL)() ? chevron_left : chevron_right,
label: (0,external_wp_i18n_namespaceObject.__)('Move right'),
description: (0,external_wp_i18n_namespaceObject.__)('Move right'),
isDisabled: columnCount && columnEnd >= columnCount,
onClick: () => {
onChange({
columnStart: columnStart + 1
});
__unstableMarkNextChangeAsNotPersistent();
moveBlocksToPosition([blockClientId], gridClientId, gridClientId, getNumberOfBlocksBeforeCell(columnStart + 1, rowStart));
}
})
})]
})
});
}
function GridItemMover({
className,
icon,
label,
isDisabled,
onClick,
description
}) {
const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(GridItemMover);
const descriptionId = `block-editor-grid-item-mover-button__description-${instanceId}`;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarButton, {
className: dist_clsx('block-editor-grid-item-mover-button', className),
icon: icon,
label: label,
"aria-describedby": descriptionId,
onClick: isDisabled ? null : onClick,
disabled: isDisabled,
accessibleWhenDisabled: true
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.VisuallyHidden, {
id: descriptionId,
children: description
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/layout-child.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function useBlockPropsChildLayoutStyles({
style
}) {
var _style$layout;
const shouldRenderChildLayoutStyles = (0,external_wp_data_namespaceObject.useSelect)(select => {
return !select(store).getSettings().disableLayoutStyles;
});
const layout = (_style$layout = style?.layout) !== null && _style$layout !== void 0 ? _style$layout : {};
const {
selfStretch,
flexSize,
columnStart,
rowStart,
columnSpan,
rowSpan
} = layout;
const parentLayout = useLayout() || {};
const {
columnCount,
minimumColumnWidth
} = parentLayout;
const id = (0,external_wp_compose_namespaceObject.useInstanceId)(useBlockPropsChildLayoutStyles);
const selector = `.wp-container-content-${id}`;
// Check that the grid layout attributes are of the correct type, so that we don't accidentally
// write code that stores a string attribute instead of a number.
if (false) {}
let css = '';
if (shouldRenderChildLayoutStyles) {
if (selfStretch === 'fixed' && flexSize) {
css = `${selector} {
flex-basis: ${flexSize};
box-sizing: border-box;
}`;
} else if (selfStretch === 'fill') {
css = `${selector} {
flex-grow: 1;
}`;
} else if (columnStart && columnSpan) {
css = `${selector} {
grid-column: ${columnStart} / span ${columnSpan};
}`;
} else if (columnStart) {
css = `${selector} {
grid-column: ${columnStart};
}`;
} else if (columnSpan) {
css = `${selector} {
grid-column: span ${columnSpan};
}`;
}
if (rowStart && rowSpan) {
css += `${selector} {
grid-row: ${rowStart} / span ${rowSpan};
}`;
} else if (rowStart) {
css += `${selector} {
grid-row: ${rowStart};
}`;
} else if (rowSpan) {
css += `${selector} {
grid-row: span ${rowSpan};
}`;
}
/**
* If minimumColumnWidth is set on the parent, or if no
* columnCount is set, the grid is responsive so a
* container query is needed for the span to resize.
*/
if ((columnSpan || columnStart) && (minimumColumnWidth || !columnCount)) {
let parentColumnValue = parseFloat(minimumColumnWidth);
/**
* 12rem is the default minimumColumnWidth value.
* If parentColumnValue is not a number, default to 12.
*/
if (isNaN(parentColumnValue)) {
parentColumnValue = 12;
}
let parentColumnUnit = minimumColumnWidth?.replace(parentColumnValue, '');
/**
* Check that parent column unit is either 'px', 'rem' or 'em'.
* If not, default to 'rem'.
*/
if (!['px', 'rem', 'em'].includes(parentColumnUnit)) {
parentColumnUnit = 'rem';
}
let numColsToBreakAt = 2;
if (columnSpan && columnStart) {
numColsToBreakAt = columnSpan + columnStart - 1;
} else if (columnSpan) {
numColsToBreakAt = columnSpan;
} else {
numColsToBreakAt = columnStart;
}
const defaultGapValue = parentColumnUnit === 'px' ? 24 : 1.5;
const containerQueryValue = numColsToBreakAt * parentColumnValue + (numColsToBreakAt - 1) * defaultGapValue;
// For blocks that only span one column, we want to remove any rowStart values as
// the container reduces in size, so that blocks are still arranged in markup order.
const minimumContainerQueryValue = parentColumnValue * 2 + defaultGapValue - 1;
// If a span is set we want to preserve it as long as possible, otherwise we just reset the value.
const gridColumnValue = columnSpan && columnSpan > 1 ? '1/-1' : 'auto';
css += `@container (max-width: ${Math.max(containerQueryValue, minimumContainerQueryValue)}${parentColumnUnit}) {
${selector} {
grid-column: ${gridColumnValue};
grid-row: auto;
}
}`;
}
}
useStyleOverride({
css
});
// Only attach a container class if there is generated CSS to be attached.
if (!css) {
return;
}
// Attach a `wp-container-content` id-based classname.
return {
className: `wp-container-content-${id}`
};
}
function ChildLayoutControlsPure({
clientId,
style,
setAttributes
}) {
const parentLayout = useLayout() || {};
const {
type: parentLayoutType = 'default',
allowSizingOnChildren = false,
isManualPlacement
} = parentLayout;
if (parentLayoutType !== 'grid') {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridTools, {
clientId: clientId,
style: style,
setAttributes: setAttributes,
allowSizingOnChildren: allowSizingOnChildren,
isManualPlacement: isManualPlacement,
parentLayout: parentLayout
});
}
function GridTools({
clientId,
style,
setAttributes,
allowSizingOnChildren,
isManualPlacement,
parentLayout
}) {
const {
rootClientId,
isVisible
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockRootClientId,
getBlockEditingMode,
getTemplateLock
} = select(store);
const _rootClientId = getBlockRootClientId(clientId);
if (getTemplateLock(_rootClientId) || getBlockEditingMode(_rootClientId) !== 'default') {
return {
rootClientId: _rootClientId,
isVisible: false
};
}
return {
rootClientId: _rootClientId,
isVisible: true
};
}, [clientId]);
// Use useState() instead of useRef() so that GridItemResizer updates when ref is set.
const [resizerBounds, setResizerBounds] = (0,external_wp_element_namespaceObject.useState)();
if (!isVisible) {
return null;
}
function updateLayout(layout) {
setAttributes({
style: {
...style,
layout: {
...style?.layout,
...layout
}
}
});
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridVisualizer, {
clientId: rootClientId,
contentRef: setResizerBounds,
parentLayout: parentLayout
}), allowSizingOnChildren && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridItemResizer, {
clientId: clientId
// Don't allow resizing beyond the grid visualizer.
,
bounds: resizerBounds,
onChange: updateLayout,
parentLayout: parentLayout
}), isManualPlacement && window.__experimentalEnableGridInteractivity && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridItemMovers, {
layout: style?.layout,
parentLayout: parentLayout,
onChange: updateLayout,
gridClientId: rootClientId,
blockClientId: clientId
})]
});
}
/* harmony default export */ const layout_child = ({
useBlockProps: useBlockPropsChildLayoutStyles,
edit: ChildLayoutControlsPure,
attributeKeys: ['style'],
hasSupport() {
return true;
}
});
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/content-lock-ui.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
// The implementation of content locking is mainly in this file, although the mechanism
// to stop temporarily editing as blocks when an outside block is selected is on component StopEditingAsBlocksOnOutsideSelect
// at block-editor/src/components/block-list/index.js.
// Besides the components on this file and the file referenced above the implementation
// also includes artifacts on the store (actions, reducers, and selector).
function ContentLockControlsPure({
clientId
}) {
const {
templateLock,
isLockedByParent,
isEditingAsBlocks
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getContentLockingParent,
getTemplateLock,
getTemporarilyEditingAsBlocks
} = unlock(select(store));
return {
templateLock: getTemplateLock(clientId),
isLockedByParent: !!getContentLockingParent(clientId),
isEditingAsBlocks: getTemporarilyEditingAsBlocks() === clientId
};
}, [clientId]);
const {
stopEditingAsBlocks
} = unlock((0,external_wp_data_namespaceObject.useDispatch)(store));
const isContentLocked = !isLockedByParent && templateLock === 'contentOnly';
const stopEditingAsBlockCallback = (0,external_wp_element_namespaceObject.useCallback)(() => {
stopEditingAsBlocks(clientId);
}, [clientId, stopEditingAsBlocks]);
if (!isContentLocked && !isEditingAsBlocks) {
return null;
}
const showStopEditingAsBlocks = isEditingAsBlocks && !isContentLocked;
return showStopEditingAsBlocks && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_controls, {
group: "other",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarButton, {
onClick: stopEditingAsBlockCallback,
children: (0,external_wp_i18n_namespaceObject.__)('Done')
})
});
}
/* harmony default export */ const content_lock_ui = ({
edit: ContentLockControlsPure,
hasSupport() {
return true;
}
});
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/metadata.js
/**
* WordPress dependencies
*/
const META_ATTRIBUTE_NAME = 'metadata';
/**
* Filters registered block settings, extending attributes to include `metadata`.
*
* see: https://github.com/WordPress/gutenberg/pull/40393/files#r864632012
*
* @param {Object} blockTypeSettings Original block settings.
* @return {Object} Filtered block settings.
*/
function addMetaAttribute(blockTypeSettings) {
// Allow blocks to specify their own attribute definition with default values if needed.
if (blockTypeSettings?.attributes?.[META_ATTRIBUTE_NAME]?.type) {
return blockTypeSettings;
}
blockTypeSettings.attributes = {
...blockTypeSettings.attributes,
[META_ATTRIBUTE_NAME]: {
type: 'object'
}
};
return blockTypeSettings;
}
(0,external_wp_hooks_namespaceObject.addFilter)('blocks.registerBlockType', 'core/metadata/addMetaAttribute', addMetaAttribute);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/block-hooks.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const block_hooks_EMPTY_OBJECT = {};
function BlockHooksControlPure({
name,
clientId,
metadata: {
ignoredHookedBlocks = []
} = {}
}) {
const blockTypes = (0,external_wp_data_namespaceObject.useSelect)(select => select(external_wp_blocks_namespaceObject.store).getBlockTypes(), []);
// A hooked block added via a filter will not be exposed through a block
// type's `blockHooks` property; however, if the containing layout has been
// modified, it will be present in the anchor block's `ignoredHookedBlocks`
// metadata.
const hookedBlocksForCurrentBlock = (0,external_wp_element_namespaceObject.useMemo)(() => blockTypes?.filter(({
name: blockName,
blockHooks
}) => blockHooks && name in blockHooks || ignoredHookedBlocks.includes(blockName)), [blockTypes, name, ignoredHookedBlocks]);
const hookedBlockClientIds = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlocks,
getBlockRootClientId,
getGlobalBlockCount
} = select(store);
const rootClientId = getBlockRootClientId(clientId);
const _hookedBlockClientIds = hookedBlocksForCurrentBlock.reduce((clientIds, block) => {
// If the block doesn't exist anywhere in the block tree,
// we know that we have to set the toggle to disabled.
if (getGlobalBlockCount(block.name) === 0) {
return clientIds;
}
const relativePosition = block?.blockHooks?.[name];
let candidates;
switch (relativePosition) {
case 'before':
case 'after':
// Any of the current block's siblings (with the right block type) qualifies
// as a hooked block (inserted `before` or `after` the current one), as the block
// might've been automatically inserted and then moved around a bit by the user.
candidates = getBlocks(rootClientId);
break;
case 'first_child':
case 'last_child':
// Any of the current block's child blocks (with the right block type) qualifies
// as a hooked first or last child block, as the block might've been automatically
// inserted and then moved around a bit by the user.
candidates = getBlocks(clientId);
break;
case undefined:
// If we haven't found a blockHooks field with a relative position for the hooked
// block, it means that it was added by a filter. In this case, we look for the block
// both among the current block's siblings and its children.
candidates = [...getBlocks(rootClientId), ...getBlocks(clientId)];
break;
}
const hookedBlock = candidates?.find(candidate => candidate.name === block.name);
// If the block exists in the designated location, we consider it hooked
// and show the toggle as enabled.
if (hookedBlock) {
return {
...clientIds,
[block.name]: hookedBlock.clientId
};
}
// If no hooked block was found in any of its designated locations,
// we set the toggle to disabled.
return clientIds;
}, {});
if (Object.values(_hookedBlockClientIds).length > 0) {
return _hookedBlockClientIds;
}
return block_hooks_EMPTY_OBJECT;
}, [hookedBlocksForCurrentBlock, name, clientId]);
const {
getBlockIndex,
getBlockCount,
getBlockRootClientId
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
insertBlock,
removeBlock
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
if (!hookedBlocksForCurrentBlock.length) {
return null;
}
// Group by block namespace (i.e. prefix before the slash).
const groupedHookedBlocks = hookedBlocksForCurrentBlock.reduce((groups, block) => {
const [namespace] = block.name.split('/');
if (!groups[namespace]) {
groups[namespace] = [];
}
groups[namespace].push(block);
return groups;
}, {});
const insertBlockIntoDesignatedLocation = (block, relativePosition) => {
const blockIndex = getBlockIndex(clientId);
const innerBlocksLength = getBlockCount(clientId);
const rootClientId = getBlockRootClientId(clientId);
switch (relativePosition) {
case 'before':
case 'after':
insertBlock(block, relativePosition === 'after' ? blockIndex + 1 : blockIndex, rootClientId,
// Insert as a child of the current block's parent
false);
break;
case 'first_child':
case 'last_child':
insertBlock(block,
// TODO: It'd be great if insertBlock() would accept negative indices for insertion.
relativePosition === 'first_child' ? 0 : innerBlocksLength, clientId,
// Insert as a child of the current block.
false);
break;
case undefined:
// If we do not know the relative position, it is because the block was
// added via a filter. In this case, we default to inserting it after the
// current block.
insertBlock(block, blockIndex + 1, rootClientId,
// Insert as a child of the current block's parent
false);
break;
}
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.PanelBody, {
className: "block-editor-hooks__block-hooks",
title: (0,external_wp_i18n_namespaceObject.__)('Plugins'),
initialOpen: true,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("p", {
className: "block-editor-hooks__block-hooks-helptext",
children: (0,external_wp_i18n_namespaceObject.__)('Manage the inclusion of blocks added automatically by plugins.')
}), Object.keys(groupedHookedBlocks).map(vendor => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_element_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("h3", {
children: vendor
}), groupedHookedBlocks[vendor].map(block => {
const checked = (block.name in hookedBlockClientIds);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToggleControl, {
__nextHasNoMarginBottom: true,
checked: checked,
label: block.title,
onChange: () => {
if (!checked) {
// Create and insert block.
const relativePosition = block.blockHooks[name];
insertBlockIntoDesignatedLocation((0,external_wp_blocks_namespaceObject.createBlock)(block.name), relativePosition);
return;
}
// Remove block.
removeBlock(hookedBlockClientIds[block.name], false);
}
}, block.title);
})]
}, vendor);
})]
})
});
}
/* harmony default export */ const block_hooks = ({
edit: BlockHooksControlPure,
attributeKeys: ['metadata'],
hasSupport() {
return true;
}
});
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/utils/block-bindings.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function isObjectEmpty(object) {
return !object || Object.keys(object).length === 0;
}
/**
* Contains utils to update the block `bindings` metadata.
*
* @typedef {Object} WPBlockBindingsUtils
*
* @property {Function} updateBlockBindings Updates the value of the bindings connected to block attributes.
* @property {Function} removeAllBlockBindings Removes the bindings property of the `metadata` attribute.
*/
/**
* Retrieves the existing utils needed to update the block `bindings` metadata.
* They can be used to create, modify, or remove connections from the existing block attributes.
*
* It contains the following utils:
* - `updateBlockBindings`: Updates the value of the bindings connected to block attributes. It can be used to remove a specific binding by setting the value to `undefined`.
* - `removeAllBlockBindings`: Removes the bindings property of the `metadata` attribute.
*
* @param {?string} clientId Optional block client ID. If not set, it will use the current block client ID from the context.
*
* @return {?WPBlockBindingsUtils} Object containing the block bindings utils.
*
* @example
* ```js
* import { useBlockBindingsUtils } from '@wordpress/block-editor'
* const { updateBlockBindings, removeAllBlockBindings } = useBlockBindingsUtils();
*
* // Update url and alt attributes.
* updateBlockBindings( {
* url: {
* source: 'core/post-meta',
* args: {
* key: 'url_custom_field',
* },
* },
* alt: {
* source: 'core/post-meta',
* args: {
* key: 'text_custom_field',
* },
* },
* } );
*
* // Remove binding from url attribute.
* updateBlockBindings( { url: undefined } );
*
* // Remove bindings from all attributes.
* removeAllBlockBindings();
* ```
*/
function useBlockBindingsUtils(clientId) {
const {
clientId: contextClientId
} = useBlockEditContext();
const blockClientId = clientId || contextClientId;
const {
updateBlockAttributes
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const {
getBlockAttributes
} = (0,external_wp_data_namespaceObject.useRegistry)().select(store);
/**
* Updates the value of the bindings connected to block attributes.
* It removes the binding when the new value is `undefined`.
*
* @param {Object} bindings Bindings including the attributes to update and the new object.
* @param {string} bindings.source The source name to connect to.
* @param {Object} [bindings.args] Object containing the arguments needed by the source.
*
* @example
* ```js
* import { useBlockBindingsUtils } from '@wordpress/block-editor'
*
* const { updateBlockBindings } = useBlockBindingsUtils();
* updateBlockBindings( {
* url: {
* source: 'core/post-meta',
* args: {
* key: 'url_custom_field',
* },
* },
* alt: {
* source: 'core/post-meta',
* args: {
* key: 'text_custom_field',
* },
* }
* } );
* ```
*/
const updateBlockBindings = bindings => {
const {
metadata: {
bindings: currentBindings,
...metadata
} = {}
} = getBlockAttributes(blockClientId);
const newBindings = {
...currentBindings
};
Object.entries(bindings).forEach(([attribute, binding]) => {
if (!binding && newBindings[attribute]) {
delete newBindings[attribute];
return;
}
newBindings[attribute] = binding;
});
const newMetadata = {
...metadata,
bindings: newBindings
};
if (isObjectEmpty(newMetadata.bindings)) {
delete newMetadata.bindings;
}
updateBlockAttributes(blockClientId, {
metadata: isObjectEmpty(newMetadata) ? undefined : newMetadata
});
};
/**
* Removes the bindings property of the `metadata` attribute.
*
* @example
* ```js
* import { useBlockBindingsUtils } from '@wordpress/block-editor'
*
* const { removeAllBlockBindings } = useBlockBindingsUtils();
* removeAllBlockBindings();
* ```
*/
const removeAllBlockBindings = () => {
const {
metadata: {
bindings,
...metadata
} = {}
} = getBlockAttributes(blockClientId);
updateBlockAttributes(blockClientId, {
metadata: isObjectEmpty(metadata) ? undefined : metadata
});
};
return {
updateBlockBindings,
removeAllBlockBindings
};
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/block-bindings.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const {
DropdownMenuV2
} = unlock(external_wp_components_namespaceObject.privateApis);
const block_bindings_EMPTY_OBJECT = {};
const block_bindings_useToolsPanelDropdownMenuProps = () => {
const isMobile = (0,external_wp_compose_namespaceObject.useViewportMatch)('medium', '<');
return !isMobile ? {
popoverProps: {
placement: 'left-start',
// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
offset: 259
}
} : {};
};
function BlockBindingsPanelDropdown({
fieldsList,
attribute,
binding
}) {
const {
clientId
} = useBlockEditContext();
const registeredSources = (0,external_wp_blocks_namespaceObject.getBlockBindingsSources)();
const {
updateBlockBindings
} = useBlockBindingsUtils();
const currentKey = binding?.args?.key;
const attributeType = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
name: blockName
} = select(store).getBlock(clientId);
const _attributeType = (0,external_wp_blocks_namespaceObject.getBlockType)(blockName).attributes?.[attribute]?.type;
return _attributeType === 'rich-text' ? 'string' : _attributeType;
}, [clientId, attribute]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: Object.entries(fieldsList).map(([name, fields], i) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_element_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(DropdownMenuV2.Group, {
children: [Object.keys(fieldsList).length > 1 && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DropdownMenuV2.GroupLabel, {
children: registeredSources[name].label
}), Object.entries(fields).filter(([, args]) => args?.type === attributeType).map(([key, args]) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(DropdownMenuV2.RadioItem, {
onChange: () => updateBlockBindings({
[attribute]: {
source: name,
args: {
key
}
}
}),
name: attribute + '-binding',
value: key,
checked: key === currentKey,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DropdownMenuV2.ItemLabel, {
children: args?.label
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DropdownMenuV2.ItemHelpText, {
children: args?.value
})]
}, key))]
}), i !== Object.keys(fieldsList).length - 1 && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DropdownMenuV2.Separator, {})]
}, name))
});
}
function BlockBindingsAttribute({
attribute,
binding,
fieldsList
}) {
const {
source: sourceName,
args
} = binding || {};
const sourceProps = (0,external_wp_blocks_namespaceObject.getBlockBindingsSource)(sourceName);
const isSourceInvalid = !sourceProps;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalVStack, {
className: "block-editor-bindings__item",
spacing: 0,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalText, {
truncate: true,
children: attribute
}), !!binding && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalText, {
truncate: true,
variant: !isSourceInvalid && 'muted',
isDestructive: isSourceInvalid,
children: isSourceInvalid ? (0,external_wp_i18n_namespaceObject.__)('Invalid source') : fieldsList?.[sourceName]?.[args?.key]?.label || sourceProps?.label || sourceName
})]
});
}
function ReadOnlyBlockBindingsPanelItems({
bindings,
fieldsList
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: Object.entries(bindings).map(([attribute, binding]) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalItem, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockBindingsAttribute, {
attribute: attribute,
binding: binding,
fieldsList: fieldsList
})
}, attribute))
});
}
function EditableBlockBindingsPanelItems({
attributes,
bindings,
fieldsList
}) {
const {
updateBlockBindings
} = useBlockBindingsUtils();
const isMobile = (0,external_wp_compose_namespaceObject.useViewportMatch)('medium', '<');
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: attributes.map(attribute => {
const binding = bindings[attribute];
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
hasValue: () => !!binding,
label: attribute,
onDeselect: () => {
updateBlockBindings({
[attribute]: undefined
});
},
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DropdownMenuV2, {
placement: isMobile ? 'bottom-start' : 'left-start',
gutter: isMobile ? 8 : 36,
trigger: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalItem, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockBindingsAttribute, {
attribute: attribute,
binding: binding,
fieldsList: fieldsList
})
}),
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockBindingsPanelDropdown, {
fieldsList: fieldsList,
attribute: attribute,
binding: binding
})
})
}, attribute);
})
});
}
const BlockBindingsPanel = ({
name: blockName,
metadata
}) => {
const blockContext = (0,external_wp_element_namespaceObject.useContext)(block_context);
const {
removeAllBlockBindings
} = useBlockBindingsUtils();
const bindableAttributes = getBindableAttributes(blockName);
const dropdownMenuProps = block_bindings_useToolsPanelDropdownMenuProps();
// `useSelect` is used purposely here to ensure `getFieldsList`
// is updated whenever there are updates in block context.
// `source.getFieldsList` may also call a selector via `select`.
const _fieldsList = {};
const {
fieldsList,
canUpdateBlockBindings
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
if (!bindableAttributes || bindableAttributes.length === 0) {
return block_bindings_EMPTY_OBJECT;
}
const registeredSources = (0,external_wp_blocks_namespaceObject.getBlockBindingsSources)();
Object.entries(registeredSources).forEach(([sourceName, {
getFieldsList,
usesContext
}]) => {
if (getFieldsList) {
// Populate context.
const context = {};
if (usesContext?.length) {
for (const key of usesContext) {
context[key] = blockContext[key];
}
}
const sourceList = getFieldsList({
select,
context
});
// Only add source if the list is not empty.
if (Object.keys(sourceList || {}).length) {
_fieldsList[sourceName] = {
...sourceList
};
}
}
});
return {
fieldsList: Object.values(_fieldsList).length > 0 ? _fieldsList : block_bindings_EMPTY_OBJECT,
canUpdateBlockBindings: select(store).getSettings().canUpdateBlockBindings
};
}, [blockContext, bindableAttributes]);
// Return early if there are no bindable attributes.
if (!bindableAttributes || bindableAttributes.length === 0) {
return null;
}
// Filter bindings to only show bindable attributes and remove pattern overrides.
const {
bindings
} = metadata || {};
const filteredBindings = {
...bindings
};
Object.keys(filteredBindings).forEach(key => {
if (!canBindAttribute(blockName, key) || filteredBindings[key].source === 'core/pattern-overrides') {
delete filteredBindings[key];
}
});
// Lock the UI when the user can't update bindings or there are no fields to connect to.
const readOnly = !canUpdateBlockBindings || !Object.keys(fieldsList).length;
if (readOnly && Object.keys(filteredBindings).length === 0) {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls, {
group: "bindings",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalToolsPanel, {
label: (0,external_wp_i18n_namespaceObject.__)('Attributes'),
resetAll: () => {
removeAllBlockBindings();
},
dropdownMenuProps: dropdownMenuProps,
className: "block-editor-bindings__panel",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalItemGroup, {
isBordered: true,
isSeparated: true,
children: readOnly ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ReadOnlyBlockBindingsPanelItems, {
bindings: filteredBindings,
fieldsList: fieldsList
}) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(EditableBlockBindingsPanelItems, {
attributes: bindableAttributes,
bindings: filteredBindings,
fieldsList: fieldsList
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalItemGroup, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalText, {
variant: "muted",
children: (0,external_wp_i18n_namespaceObject.__)('Attributes connected to custom fields or other dynamic data.')
})
})]
})
});
};
/* harmony default export */ const block_bindings = ({
edit: BlockBindingsPanel,
attributeKeys: ['metadata'],
hasSupport() {
return true;
}
});
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/block-renaming.js
/**
* WordPress dependencies
*/
/**
* Filters registered block settings, adding an `__experimentalLabel` callback if one does not already exist.
*
* @param {Object} settings Original block settings.
*
* @return {Object} Filtered block settings.
*/
function addLabelCallback(settings) {
// If blocks provide their own label callback, do not override it.
if (settings.__experimentalLabel) {
return settings;
}
const supportsBlockNaming = (0,external_wp_blocks_namespaceObject.hasBlockSupport)(settings, 'renaming', true // default value
);
// Check whether block metadata is supported before using it.
if (supportsBlockNaming) {
settings.__experimentalLabel = (attributes, {
context
}) => {
const {
metadata
} = attributes;
// In the list view, use the block's name attribute as the label.
if (context === 'list-view' && metadata?.name) {
return metadata.name;
}
};
}
return settings;
}
(0,external_wp_hooks_namespaceObject.addFilter)('blocks.registerBlockType', 'core/metadata/addLabelCallback', addLabelCallback);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/grid/use-grid-layout-sync.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function useGridLayoutSync({
clientId: gridClientId
}) {
const {
gridLayout,
blockOrder,
selectedBlockLayout
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
var _getBlockAttributes$l;
const {
getBlockAttributes,
getBlockOrder
} = select(store);
const selectedBlock = select(store).getSelectedBlock();
return {
gridLayout: (_getBlockAttributes$l = getBlockAttributes(gridClientId).layout) !== null && _getBlockAttributes$l !== void 0 ? _getBlockAttributes$l : {},
blockOrder: getBlockOrder(gridClientId),
selectedBlockLayout: selectedBlock?.attributes.style?.layout
};
}, [gridClientId]);
const {
getBlockAttributes,
getBlockRootClientId
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
updateBlockAttributes,
__unstableMarkNextChangeAsNotPersistent
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const selectedBlockRect = (0,external_wp_element_namespaceObject.useMemo)(() => selectedBlockLayout ? new GridRect(selectedBlockLayout) : null, [selectedBlockLayout]);
const previouslySelectedBlockRect = (0,external_wp_compose_namespaceObject.usePrevious)(selectedBlockRect);
const previousIsManualPlacement = (0,external_wp_compose_namespaceObject.usePrevious)(gridLayout.isManualPlacement);
const previousBlockOrder = (0,external_wp_compose_namespaceObject.usePrevious)(blockOrder);
(0,external_wp_element_namespaceObject.useEffect)(() => {
const updates = {};
if (gridLayout.isManualPlacement) {
const occupiedRects = [];
// Respect the position of blocks that already have a columnStart and rowStart value.
for (const clientId of blockOrder) {
var _getBlockAttributes$s;
const {
columnStart,
rowStart,
columnSpan = 1,
rowSpan = 1
} = (_getBlockAttributes$s = getBlockAttributes(clientId).style?.layout) !== null && _getBlockAttributes$s !== void 0 ? _getBlockAttributes$s : {};
if (!columnStart || !rowStart) {
continue;
}
occupiedRects.push(new GridRect({
columnStart,
rowStart,
columnSpan,
rowSpan
}));
}
// When in manual mode, ensure that every block has a columnStart and rowStart value.
for (const clientId of blockOrder) {
var _attributes$style$lay;
const attributes = getBlockAttributes(clientId);
const {
columnStart,
rowStart,
columnSpan = 1,
rowSpan = 1
} = (_attributes$style$lay = attributes.style?.layout) !== null && _attributes$style$lay !== void 0 ? _attributes$style$lay : {};
if (columnStart && rowStart) {
continue;
}
const [newColumnStart, newRowStart] = placeBlock(occupiedRects, gridLayout.columnCount, columnSpan, rowSpan, previouslySelectedBlockRect?.columnEnd, previouslySelectedBlockRect?.rowEnd);
occupiedRects.push(new GridRect({
columnStart: newColumnStart,
rowStart: newRowStart,
columnSpan,
rowSpan
}));
updates[clientId] = {
style: {
...attributes.style,
layout: {
...attributes.style?.layout,
columnStart: newColumnStart,
rowStart: newRowStart
}
}
};
}
// Ensure there's enough rows to fit all blocks.
const bottomMostRow = Math.max(...occupiedRects.map(r => r.rowEnd));
if (!gridLayout.rowCount || gridLayout.rowCount < bottomMostRow) {
updates[gridClientId] = {
layout: {
...gridLayout,
rowCount: bottomMostRow
}
};
}
// Unset grid layout attributes for blocks removed from the grid.
for (const clientId of previousBlockOrder !== null && previousBlockOrder !== void 0 ? previousBlockOrder : []) {
if (!blockOrder.includes(clientId)) {
var _attributes$style$lay2;
const rootClientId = getBlockRootClientId(clientId);
// Block was removed from the editor, so nothing to do.
if (rootClientId === null) {
continue;
}
// Check if the block is being moved to another grid.
// If so, do nothing and let the new grid parent handle
// the attributes.
const rootAttributes = getBlockAttributes(rootClientId);
if (rootAttributes?.layout?.type === 'grid') {
continue;
}
const attributes = getBlockAttributes(clientId);
const {
columnStart,
rowStart,
columnSpan,
rowSpan,
...layout
} = (_attributes$style$lay2 = attributes.style?.layout) !== null && _attributes$style$lay2 !== void 0 ? _attributes$style$lay2 : {};
if (columnStart || rowStart || columnSpan || rowSpan) {
const hasEmptyLayoutAttribute = Object.keys(layout).length === 0;
updates[clientId] = setImmutably(attributes, ['style', 'layout'], hasEmptyLayoutAttribute ? undefined : layout);
}
}
}
} else {
// Remove all of the columnStart and rowStart values
// when switching from manual to auto mode,
if (previousIsManualPlacement === true) {
for (const clientId of blockOrder) {
var _attributes$style$lay3;
const attributes = getBlockAttributes(clientId);
const {
columnStart,
rowStart,
...layout
} = (_attributes$style$lay3 = attributes.style?.layout) !== null && _attributes$style$lay3 !== void 0 ? _attributes$style$lay3 : {};
// Only update attributes if columnStart or rowStart are set.
if (columnStart || rowStart) {
const hasEmptyLayoutAttribute = Object.keys(layout).length === 0;
updates[clientId] = setImmutably(attributes, ['style', 'layout'], hasEmptyLayoutAttribute ? undefined : layout);
}
}
}
// Remove row styles in auto mode
if (gridLayout.rowCount) {
updates[gridClientId] = {
layout: {
...gridLayout,
rowCount: undefined
}
};
}
}
if (Object.keys(updates).length) {
__unstableMarkNextChangeAsNotPersistent();
updateBlockAttributes(Object.keys(updates), updates, /* uniqueByBlock: */true);
}
}, [
// Actual deps to sync:
gridClientId, gridLayout, previousBlockOrder, blockOrder, previouslySelectedBlockRect, previousIsManualPlacement,
// These won't change, but the linter thinks they might:
__unstableMarkNextChangeAsNotPersistent, getBlockAttributes, getBlockRootClientId, updateBlockAttributes]);
}
/**
* @param {GridRect[]} occupiedRects
* @param {number} gridColumnCount
* @param {number} blockColumnSpan
* @param {number} blockRowSpan
* @param {number?} startColumn
* @param {number?} startRow
*/
function placeBlock(occupiedRects, gridColumnCount, blockColumnSpan, blockRowSpan, startColumn = 1, startRow = 1) {
for (let row = startRow;; row++) {
for (let column = row === startRow ? startColumn : 1; column <= gridColumnCount; column++) {
const candidateRect = new GridRect({
columnStart: column,
rowStart: row,
columnSpan: blockColumnSpan,
rowSpan: blockRowSpan
});
if (!occupiedRects.some(r => r.intersectsRect(candidateRect))) {
return [column, row];
}
}
}
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/grid-visualizer.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function GridLayoutSync(props) {
useGridLayoutSync(props);
}
function grid_visualizer_GridTools({
clientId,
layout
}) {
const isVisible = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
isBlockSelected,
isDraggingBlocks,
getTemplateLock,
getBlockEditingMode
} = select(store);
// These calls are purposely ordered from least expensive to most expensive.
// Hides the visualizer in cases where the user is not or cannot interact with it.
if (!isDraggingBlocks() && !isBlockSelected(clientId) || getTemplateLock(clientId) || getBlockEditingMode(clientId) !== 'default') {
return false;
}
return true;
}, [clientId]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridLayoutSync, {
clientId: clientId
}), isVisible && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridVisualizer, {
clientId: clientId,
parentLayout: layout
})]
});
}
const addGridVisualizerToBlockEdit = (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(BlockEdit => props => {
if (props.attributes.layout?.type !== 'grid') {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockEdit, {
...props
}, "edit");
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(grid_visualizer_GridTools, {
clientId: props.clientId,
layout: props.attributes.layout
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockEdit, {
...props
}, "edit")]
});
}, 'addGridVisualizerToBlockEdit');
(0,external_wp_hooks_namespaceObject.addFilter)('editor.BlockEdit', 'core/editor/grid-visualizer', addGridVisualizerToBlockEdit);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/use-border-props.js
/**
* Internal dependencies
*/
// This utility is intended to assist where the serialization of the border
// block support is being skipped for a block but the border related CSS classes
// & styles still need to be generated so they can be applied to inner elements.
/**
* Provides the CSS class names and inline styles for a block's border support
* attributes.
*
* @param {Object} attributes Block attributes.
* @return {Object} Border block support derived CSS classes & styles.
*/
function getBorderClassesAndStyles(attributes) {
const border = attributes.style?.border || {};
const className = getBorderClasses(attributes);
return {
className: className || undefined,
style: getInlineStyles({
border
})
};
}
/**
* Derives the border related props for a block from its border block support
* attributes.
*
* Inline styles are forced for named colors to ensure these selections are
* reflected when themes do not load their color stylesheets in the editor.
*
* @param {Object} attributes Block attributes.
*
* @return {Object} ClassName & style props from border block support.
*/
function useBorderProps(attributes) {
const {
colors
} = useMultipleOriginColorsAndGradients();
const borderProps = getBorderClassesAndStyles(attributes);
const {
borderColor
} = attributes;
// Force inline styles to apply named border colors when themes do not load
// their color stylesheets in the editor.
if (borderColor) {
const borderColorObject = getMultiOriginColor({
colors,
namedColor: borderColor
});
borderProps.style.borderColor = borderColorObject.color;
}
return borderProps;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/use-shadow-props.js
/**
* Internal dependencies
*/
// This utility is intended to assist where the serialization of the shadow
// block support is being skipped for a block but the shadow related CSS classes
// & styles still need to be generated so they can be applied to inner elements.
/**
* Provides the CSS class names and inline styles for a block's shadow support
* attributes.
*
* @param {Object} attributes Block attributes.
* @return {Object} Shadow block support derived CSS classes & styles.
*/
function getShadowClassesAndStyles(attributes) {
const shadow = attributes.style?.shadow || '';
return {
style: getInlineStyles({
shadow
})
};
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/use-color-props.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
// The code in this file has largely been lifted from the color block support
// hook.
//
// This utility is intended to assist where the serialization of the colors
// block support is being skipped for a block but the color related CSS classes
// & styles still need to be generated so they can be applied to inner elements.
/**
* Provides the CSS class names and inline styles for a block's color support
* attributes.
*
* @param {Object} attributes Block attributes.
*
* @return {Object} Color block support derived CSS classes & styles.
*/
function getColorClassesAndStyles(attributes) {
const {
backgroundColor,
textColor,
gradient,
style
} = attributes;
// Collect color CSS classes.
const backgroundClass = getColorClassName('background-color', backgroundColor);
const textClass = getColorClassName('color', textColor);
const gradientClass = __experimentalGetGradientClass(gradient);
const hasGradient = gradientClass || style?.color?.gradient;
// Determine color CSS class name list.
const className = dist_clsx(textClass, gradientClass, {
// Don't apply the background class if there's a gradient.
[backgroundClass]: !hasGradient && !!backgroundClass,
'has-text-color': textColor || style?.color?.text,
'has-background': backgroundColor || style?.color?.background || gradient || style?.color?.gradient,
'has-link-color': style?.elements?.link?.color
});
// Collect inline styles for colors.
const colorStyles = style?.color || {};
const styleProp = getInlineStyles({
color: colorStyles
});
return {
className: className || undefined,
style: styleProp
};
}
/**
* Determines the color related props for a block derived from its color block
* support attributes.
*
* Inline styles are forced for named colors to ensure these selections are
* reflected when themes do not load their color stylesheets in the editor.
*
* @param {Object} attributes Block attributes.
*
* @return {Object} ClassName & style props from colors block support.
*/
function useColorProps(attributes) {
const {
backgroundColor,
textColor,
gradient
} = attributes;
const [userPalette, themePalette, defaultPalette, userGradients, themeGradients, defaultGradients] = use_settings_useSettings('color.palette.custom', 'color.palette.theme', 'color.palette.default', 'color.gradients.custom', 'color.gradients.theme', 'color.gradients.default');
const colors = (0,external_wp_element_namespaceObject.useMemo)(() => [...(userPalette || []), ...(themePalette || []), ...(defaultPalette || [])], [userPalette, themePalette, defaultPalette]);
const gradients = (0,external_wp_element_namespaceObject.useMemo)(() => [...(userGradients || []), ...(themeGradients || []), ...(defaultGradients || [])], [userGradients, themeGradients, defaultGradients]);
const colorProps = getColorClassesAndStyles(attributes);
// Force inline styles to apply colors when themes do not load their color
// stylesheets in the editor.
if (backgroundColor) {
const backgroundColorObject = getColorObjectByAttributeValues(colors, backgroundColor);
colorProps.style.backgroundColor = backgroundColorObject.color;
}
if (gradient) {
colorProps.style.background = getGradientValueBySlug(gradients, gradient);
}
if (textColor) {
const textColorObject = getColorObjectByAttributeValues(colors, textColor);
colorProps.style.color = textColorObject.color;
}
return colorProps;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/use-spacing-props.js
/**
* Internal dependencies
*/
// This utility is intended to assist where the serialization of the spacing
// block support is being skipped for a block but the spacing related CSS
// styles still need to be generated so they can be applied to inner elements.
/**
* Provides the CSS class names and inline styles for a block's spacing support
* attributes.
*
* @param {Object} attributes Block attributes.
*
* @return {Object} Spacing block support derived CSS classes & styles.
*/
function getSpacingClassesAndStyles(attributes) {
const {
style
} = attributes;
// Collect inline styles for spacing.
const spacingStyles = style?.spacing || {};
const styleProp = getInlineStyles({
spacing: spacingStyles
});
return {
style: styleProp
};
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/use-typography-props.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const {
kebabCase: use_typography_props_kebabCase
} = unlock(external_wp_components_namespaceObject.privateApis);
/*
* This utility is intended to assist where the serialization of the typography
* block support is being skipped for a block but the typography related CSS
* styles still need to be generated so they can be applied to inner elements.
*/
/**
* Provides the CSS class names and inline styles for a block's typography support
* attributes.
*
* @param {Object} attributes Block attributes.
* @param {Object|boolean} settings Merged theme.json settings
*
* @return {Object} Typography block support derived CSS classes & styles.
*/
function getTypographyClassesAndStyles(attributes, settings) {
let typographyStyles = attributes?.style?.typography || {};
typographyStyles = {
...typographyStyles,
fontSize: getTypographyFontSizeValue({
size: attributes?.style?.typography?.fontSize
}, settings)
};
const style = getInlineStyles({
typography: typographyStyles
});
const fontFamilyClassName = !!attributes?.fontFamily ? `has-${use_typography_props_kebabCase(attributes.fontFamily)}-font-family` : '';
const textAlignClassName = !!attributes?.style?.typography?.textAlign ? `has-text-align-${attributes?.style?.typography?.textAlign}` : '';
const className = dist_clsx(fontFamilyClassName, textAlignClassName, getFontSizeClass(attributes?.fontSize));
return {
className,
style
};
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/use-cached-truthy.js
/**
* WordPress dependencies
*/
/**
* Keeps an up-to-date copy of the passed value and returns it. If value becomes falsy, it will return the last truthy copy.
*
* @param {any} value
* @return {any} value
*/
function useCachedTruthy(value) {
const [cachedValue, setCachedValue] = (0,external_wp_element_namespaceObject.useState)(value);
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (value) {
setCachedValue(value);
}
}, [value]);
return cachedValue;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/index.js
/**
* Internal dependencies
*/
createBlockEditFilter([align, text_align, hooks_anchor, custom_class_name, style, duotone, position, layout, content_lock_ui, block_hooks, block_bindings, layout_child].filter(Boolean));
createBlockListBlockFilter([align, text_align, background, style, color, dimensions, duotone, font_family, font_size, border, position, block_style_variation, layout_child]);
createBlockSaveFilter([align, text_align, hooks_anchor, aria_label, custom_class_name, border, color, style, font_family, font_size]);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/colors/with-colors.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const {
kebabCase: with_colors_kebabCase
} = unlock(external_wp_components_namespaceObject.privateApis);
/**
* Capitalizes the first letter in a string.
*
* @param {string} str The string whose first letter the function will capitalize.
*
* @return {string} Capitalized string.
*/
const upperFirst = ([firstLetter, ...rest]) => firstLetter.toUpperCase() + rest.join('');
/**
* Higher order component factory for injecting the `colorsArray` argument as
* the colors prop in the `withCustomColors` HOC.
*
* @param {Array} colorsArray An array of color objects.
*
* @return {Function} The higher order component.
*/
const withCustomColorPalette = colorsArray => (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => props => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WrappedComponent, {
...props,
colors: colorsArray
}), 'withCustomColorPalette');
/**
* Higher order component factory for injecting the editor colors as the
* `colors` prop in the `withColors` HOC.
*
* @return {Function} The higher order component.
*/
const withEditorColorPalette = () => (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => props => {
const [userPalette, themePalette, defaultPalette] = use_settings_useSettings('color.palette.custom', 'color.palette.theme', 'color.palette.default');
const allColors = (0,external_wp_element_namespaceObject.useMemo)(() => [...(userPalette || []), ...(themePalette || []), ...(defaultPalette || [])], [userPalette, themePalette, defaultPalette]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WrappedComponent, {
...props,
colors: allColors
});
}, 'withEditorColorPalette');
/**
* Helper function used with `createHigherOrderComponent` to create
* higher order components for managing color logic.
*
* @param {Array} colorTypes An array of color types (e.g. 'backgroundColor, borderColor).
* @param {Function} withColorPalette A HOC for injecting the 'colors' prop into the WrappedComponent.
*
* @return {Component} The component that can be used as a HOC.
*/
function createColorHOC(colorTypes, withColorPalette) {
const colorMap = colorTypes.reduce((colorObject, colorType) => {
return {
...colorObject,
...(typeof colorType === 'string' ? {
[colorType]: with_colors_kebabCase(colorType)
} : colorType)
};
}, {});
return (0,external_wp_compose_namespaceObject.compose)([withColorPalette, WrappedComponent => {
return class extends external_wp_element_namespaceObject.Component {
constructor(props) {
super(props);
this.setters = this.createSetters();
this.colorUtils = {
getMostReadableColor: this.getMostReadableColor.bind(this)
};
this.state = {};
}
getMostReadableColor(colorValue) {
const {
colors
} = this.props;
return getMostReadableColor(colors, colorValue);
}
createSetters() {
return Object.keys(colorMap).reduce((settersAccumulator, colorAttributeName) => {
const upperFirstColorAttributeName = upperFirst(colorAttributeName);
const customColorAttributeName = `custom${upperFirstColorAttributeName}`;
settersAccumulator[`set${upperFirstColorAttributeName}`] = this.createSetColor(colorAttributeName, customColorAttributeName);
return settersAccumulator;
}, {});
}
createSetColor(colorAttributeName, customColorAttributeName) {
return colorValue => {
const colorObject = getColorObjectByColorValue(this.props.colors, colorValue);
this.props.setAttributes({
[colorAttributeName]: colorObject && colorObject.slug ? colorObject.slug : undefined,
[customColorAttributeName]: colorObject && colorObject.slug ? undefined : colorValue
});
};
}
static getDerivedStateFromProps({
attributes,
colors
}, previousState) {
return Object.entries(colorMap).reduce((newState, [colorAttributeName, colorContext]) => {
const colorObject = getColorObjectByAttributeValues(colors, attributes[colorAttributeName], attributes[`custom${upperFirst(colorAttributeName)}`]);
const previousColorObject = previousState[colorAttributeName];
const previousColor = previousColorObject?.color;
/**
* The "and previousColorObject" condition checks that a previous color object was already computed.
* At the start previousColorObject and colorValue are both equal to undefined
* bus as previousColorObject does not exist we should compute the object.
*/
if (previousColor === colorObject.color && previousColorObject) {
newState[colorAttributeName] = previousColorObject;
} else {
newState[colorAttributeName] = {
...colorObject,
class: getColorClassName(colorContext, colorObject.slug)
};
}
return newState;
}, {});
}
render() {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WrappedComponent, {
...this.props,
colors: undefined,
...this.state,
...this.setters,
colorUtils: this.colorUtils
});
}
};
}]);
}
/**
* A higher-order component factory for creating a 'withCustomColors' HOC, which handles color logic
* for class generation color value, retrieval and color attribute setting.
*
* Use this higher-order component to work with a custom set of colors.
*
* @example
*
* ```jsx
* const CUSTOM_COLORS = [ { name: 'Red', slug: 'red', color: '#ff0000' }, { name: 'Blue', slug: 'blue', color: '#0000ff' } ];
* const withCustomColors = createCustomColorsHOC( CUSTOM_COLORS );
* // ...
* export default compose(
* withCustomColors( 'backgroundColor', 'borderColor' ),
* MyColorfulComponent,
* );
* ```
*
* @param {Array} colorsArray The array of color objects (name, slug, color, etc... ).
*
* @return {Function} Higher-order component.
*/
function createCustomColorsHOC(colorsArray) {
return (...colorTypes) => {
const withColorPalette = withCustomColorPalette(colorsArray);
return (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(createColorHOC(colorTypes, withColorPalette), 'withCustomColors');
};
}
/**
* A higher-order component, which handles color logic for class generation color value, retrieval and color attribute setting.
*
* For use with the default editor/theme color palette.
*
* @example
*
* ```jsx
* export default compose(
* withColors( 'backgroundColor', { textColor: 'color' } ),
* MyColorfulComponent,
* );
* ```
*
* @param {...(Object|string)} colorTypes The arguments can be strings or objects. If the argument is an object,
* it should contain the color attribute name as key and the color context as value.
* If the argument is a string the value should be the color attribute name,
* the color context is computed by applying a kebab case transform to the value.
* Color context represents the context/place where the color is going to be used.
* The class name of the color is generated using 'has' followed by the color name
* and ending with the color context all in kebab case e.g: has-green-background-color.
*
* @return {Function} Higher-order component.
*/
function withColors(...colorTypes) {
const withColorPalette = withEditorColorPalette();
return (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(createColorHOC(colorTypes, withColorPalette), 'withColors');
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/colors/index.js
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/gradients/index.js
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/font-sizes/font-size-picker.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function font_size_picker_FontSizePicker(props) {
const [fontSizes, customFontSize] = use_settings_useSettings('typography.fontSizes', 'typography.customFontSize');
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FontSizePicker, {
...props,
fontSizes: fontSizes,
disableCustomFontSizes: !customFontSize
});
}
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/font-sizes/README.md
*/
/* harmony default export */ const font_size_picker = (font_size_picker_FontSizePicker);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/font-sizes/with-font-sizes.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const DEFAULT_FONT_SIZES = [];
/**
* Capitalizes the first letter in a string.
*
* @param {string} str The string whose first letter the function will capitalize.
*
* @return {string} Capitalized string.
*/
const with_font_sizes_upperFirst = ([firstLetter, ...rest]) => firstLetter.toUpperCase() + rest.join('');
/**
* Higher-order component, which handles font size logic for class generation,
* font size value retrieval, and font size change handling.
*
* @param {...(Object|string)} fontSizeNames The arguments should all be strings.
* Each string contains the font size
* attribute name e.g: 'fontSize'.
*
* @return {Function} Higher-order component.
*/
/* harmony default export */ const with_font_sizes = ((...fontSizeNames) => {
/*
* Computes an object whose key is the font size attribute name as passed in the array,
* and the value is the custom font size attribute name.
* Custom font size is automatically compted by appending custom followed by the font size attribute name in with the first letter capitalized.
*/
const fontSizeAttributeNames = fontSizeNames.reduce((fontSizeAttributeNamesAccumulator, fontSizeAttributeName) => {
fontSizeAttributeNamesAccumulator[fontSizeAttributeName] = `custom${with_font_sizes_upperFirst(fontSizeAttributeName)}`;
return fontSizeAttributeNamesAccumulator;
}, {});
return (0,external_wp_compose_namespaceObject.createHigherOrderComponent)((0,external_wp_compose_namespaceObject.compose)([(0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => props => {
const [fontSizes] = use_settings_useSettings('typography.fontSizes');
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WrappedComponent, {
...props,
fontSizes: fontSizes || DEFAULT_FONT_SIZES
});
}, 'withFontSizes'), WrappedComponent => {
return class extends external_wp_element_namespaceObject.Component {
constructor(props) {
super(props);
this.setters = this.createSetters();
this.state = {};
}
createSetters() {
return Object.entries(fontSizeAttributeNames).reduce((settersAccumulator, [fontSizeAttributeName, customFontSizeAttributeName]) => {
const upperFirstFontSizeAttributeName = with_font_sizes_upperFirst(fontSizeAttributeName);
settersAccumulator[`set${upperFirstFontSizeAttributeName}`] = this.createSetFontSize(fontSizeAttributeName, customFontSizeAttributeName);
return settersAccumulator;
}, {});
}
createSetFontSize(fontSizeAttributeName, customFontSizeAttributeName) {
return fontSizeValue => {
const fontSizeObject = this.props.fontSizes?.find(({
size
}) => size === Number(fontSizeValue));
this.props.setAttributes({
[fontSizeAttributeName]: fontSizeObject && fontSizeObject.slug ? fontSizeObject.slug : undefined,
[customFontSizeAttributeName]: fontSizeObject && fontSizeObject.slug ? undefined : fontSizeValue
});
};
}
static getDerivedStateFromProps({
attributes,
fontSizes
}, previousState) {
const didAttributesChange = (customFontSizeAttributeName, fontSizeAttributeName) => {
if (previousState[fontSizeAttributeName]) {
// If new font size is name compare with the previous slug.
if (attributes[fontSizeAttributeName]) {
return attributes[fontSizeAttributeName] !== previousState[fontSizeAttributeName].slug;
}
// If font size is not named, update when the font size value changes.
return previousState[fontSizeAttributeName].size !== attributes[customFontSizeAttributeName];
}
// In this case we need to build the font size object.
return true;
};
if (!Object.values(fontSizeAttributeNames).some(didAttributesChange)) {
return null;
}
const newState = Object.entries(fontSizeAttributeNames).filter(([key, value]) => didAttributesChange(value, key)).reduce((newStateAccumulator, [fontSizeAttributeName, customFontSizeAttributeName]) => {
const fontSizeAttributeValue = attributes[fontSizeAttributeName];
const fontSizeObject = utils_getFontSize(fontSizes, fontSizeAttributeValue, attributes[customFontSizeAttributeName]);
newStateAccumulator[fontSizeAttributeName] = {
...fontSizeObject,
class: getFontSizeClass(fontSizeAttributeValue)
};
return newStateAccumulator;
}, {});
return {
...previousState,
...newState
};
}
render() {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WrappedComponent, {
...this.props,
fontSizes: undefined,
...this.state,
...this.setters
});
}
};
}]), 'withFontSizes');
});
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/font-sizes/index.js
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/autocompleters/block.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const block_noop = () => {};
const block_SHOWN_BLOCK_TYPES = 9;
/** @typedef {import('@wordpress/components').WPCompleter} WPCompleter */
/**
* Creates a blocks repeater for replacing the current block with a selected block type.
*
* @return {WPCompleter} A blocks completer.
*/
function createBlockCompleter() {
return {
name: 'blocks',
className: 'block-editor-autocompleters__block',
triggerPrefix: '/',
useItems(filterValue) {
const {
rootClientId,
selectedBlockName,
prioritizedBlocks
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getSelectedBlockClientId,
getBlockName,
getBlockListSettings,
getBlockRootClientId
} = select(store);
const selectedBlockClientId = getSelectedBlockClientId();
const _rootClientId = getBlockRootClientId(selectedBlockClientId);
return {
selectedBlockName: selectedBlockClientId ? getBlockName(selectedBlockClientId) : null,
rootClientId: _rootClientId,
prioritizedBlocks: getBlockListSettings(_rootClientId)?.prioritizedInserterBlocks
};
}, []);
const [items, categories, collections] = use_block_types_state(rootClientId, block_noop, true);
const filteredItems = (0,external_wp_element_namespaceObject.useMemo)(() => {
const initialFilteredItems = !!filterValue.trim() ? searchBlockItems(items, categories, collections, filterValue) : orderInserterBlockItems(orderBy(items, 'frecency', 'desc'), prioritizedBlocks);
return initialFilteredItems.filter(item => item.name !== selectedBlockName).slice(0, block_SHOWN_BLOCK_TYPES);
}, [filterValue, selectedBlockName, items, categories, collections, prioritizedBlocks]);
const options = (0,external_wp_element_namespaceObject.useMemo)(() => filteredItems.map(blockItem => {
const {
title,
icon,
isDisabled
} = blockItem;
return {
key: `block-${blockItem.id}`,
value: blockItem,
label: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_icon, {
icon: icon,
showColors: true
}, "icon"), title]
}),
isDisabled
};
}), [filteredItems]);
return [options];
},
allowContext(before, after) {
return !(/\S/.test(before) || /\S/.test(after));
},
getOptionCompletion(inserterItem) {
const {
name,
initialAttributes,
innerBlocks,
syncStatus,
content
} = inserterItem;
return {
action: 'replace',
value: syncStatus === 'unsynced' ? (0,external_wp_blocks_namespaceObject.parse)(content, {
__unstableSkipMigrationLogs: true
}) : (0,external_wp_blocks_namespaceObject.createBlock)(name, initialAttributes, (0,external_wp_blocks_namespaceObject.createBlocksFromInnerBlocksTemplate)(innerBlocks))
};
}
};
}
/**
* Creates a blocks repeater for replacing the current block with a selected block type.
*
* @return {WPCompleter} A blocks completer.
*/
/* harmony default export */ const autocompleters_block = (createBlockCompleter());
;// CONCATENATED MODULE: external ["wp","apiFetch"]
const external_wp_apiFetch_namespaceObject = window["wp"]["apiFetch"];
var external_wp_apiFetch_default = /*#__PURE__*/__webpack_require__.n(external_wp_apiFetch_namespaceObject);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/post.js
/**
* WordPress dependencies
*/
const post = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "m7.3 9.7 1.4 1.4c.2-.2.3-.3.4-.5 0 0 0-.1.1-.1.3-.5.4-1.1.3-1.6L12 7 9 4 7.2 6.5c-.6-.1-1.1 0-1.6.3 0 0-.1 0-.1.1-.3.1-.4.2-.6.4l1.4 1.4L4 11v1h1l2.3-2.3zM4 20h9v-1.5H4V20zm0-5.5V16h16v-1.5H4z"
})
});
/* harmony default export */ const library_post = (post);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/autocompleters/link.js
/**
* WordPress dependencies
*/
// Disable Reason: Needs to be refactored.
// eslint-disable-next-line no-restricted-imports
const SHOWN_SUGGESTIONS = 10;
/** @typedef {import('@wordpress/components').WPCompleter} WPCompleter */
/**
* Creates a suggestion list for links to posts or pages.
*
* @return {WPCompleter} A links completer.
*/
function createLinkCompleter() {
return {
name: 'links',
className: 'block-editor-autocompleters__link',
triggerPrefix: '[[',
options: async letters => {
let options = await external_wp_apiFetch_default()({
path: (0,external_wp_url_namespaceObject.addQueryArgs)('/wp/v2/search', {
per_page: SHOWN_SUGGESTIONS,
search: letters,
type: 'post',
order_by: 'menu_order'
})
});
options = options.filter(option => option.title !== '');
return options;
},
getOptionKeywords(item) {
const expansionWords = item.title.split(/\s+/);
return [...expansionWords];
},
getOptionLabel(item) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
icon: item.subtype === 'page' ? library_page : library_post
}, "icon"), item.title]
});
},
getOptionCompletion(item) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("a", {
href: item.url,
children: item.title
});
}
};
}
/**
* Creates a suggestion list for links to posts or pages..
*
* @return {WPCompleter} A link completer.
*/
/* harmony default export */ const autocompleters_link = (createLinkCompleter());
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/autocomplete/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Shared reference to an empty array for cases where it is important to avoid
* returning a new array reference on every invocation.
*
* @type {Array}
*/
const autocomplete_EMPTY_ARRAY = [];
function useCompleters({
completers = autocomplete_EMPTY_ARRAY
}) {
const {
name
} = useBlockEditContext();
return (0,external_wp_element_namespaceObject.useMemo)(() => {
let filteredCompleters = [...completers, autocompleters_link];
if (name === (0,external_wp_blocks_namespaceObject.getDefaultBlockName)() || (0,external_wp_blocks_namespaceObject.getBlockSupport)(name, '__experimentalSlashInserter', false)) {
filteredCompleters = [...filteredCompleters, autocompleters_block];
}
if ((0,external_wp_hooks_namespaceObject.hasFilter)('editor.Autocomplete.completers')) {
// Provide copies so filters may directly modify them.
if (filteredCompleters === completers) {
filteredCompleters = filteredCompleters.map(completer => ({
...completer
}));
}
filteredCompleters = (0,external_wp_hooks_namespaceObject.applyFilters)('editor.Autocomplete.completers', filteredCompleters, name);
}
return filteredCompleters;
}, [completers, name]);
}
function useBlockEditorAutocompleteProps(props) {
return (0,external_wp_components_namespaceObject.__unstableUseAutocompleteProps)({
...props,
completers: useCompleters(props)
});
}
/**
* Wrap the default Autocomplete component with one that supports a filter hook
* for customizing its list of autocompleters.
*
* @type {import('react').FC}
*/
function BlockEditorAutocomplete(props) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Autocomplete, {
...props,
completers: useCompleters(props)
});
}
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/autocomplete/README.md
*/
/* harmony default export */ const autocomplete = (BlockEditorAutocomplete);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/fullscreen.js
/**
* WordPress dependencies
*/
const fullscreen = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M6 4a2 2 0 0 0-2 2v3h1.5V6a.5.5 0 0 1 .5-.5h3V4H6Zm3 14.5H6a.5.5 0 0 1-.5-.5v-3H4v3a2 2 0 0 0 2 2h3v-1.5Zm6 1.5v-1.5h3a.5.5 0 0 0 .5-.5v-3H20v3a2 2 0 0 1-2 2h-3Zm3-16a2 2 0 0 1 2 2v3h-1.5V6a.5.5 0 0 0-.5-.5h-3V4h3Z"
})
});
/* harmony default export */ const library_fullscreen = (fullscreen);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-full-height-alignment-control/index.js
/**
* WordPress dependencies
*/
function BlockFullHeightAlignmentControl({
isActive,
label = (0,external_wp_i18n_namespaceObject.__)('Toggle full height'),
onToggle,
isDisabled
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarButton, {
isActive: isActive,
icon: library_fullscreen,
label: label,
onClick: () => onToggle(!isActive),
disabled: isDisabled
});
}
/* harmony default export */ const block_full_height_alignment_control = (BlockFullHeightAlignmentControl);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-alignment-matrix-control/index.js
/**
* WordPress dependencies
*/
const block_alignment_matrix_control_noop = () => {};
function BlockAlignmentMatrixControl(props) {
const {
label = (0,external_wp_i18n_namespaceObject.__)('Change matrix alignment'),
onChange = block_alignment_matrix_control_noop,
value = 'center',
isDisabled
} = props;
const icon = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.AlignmentMatrixControl.Icon, {
value: value
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Dropdown, {
popoverProps: {
placement: 'bottom-start'
},
renderToggle: ({
onToggle,
isOpen
}) => {
const openOnArrowDown = event => {
if (!isOpen && event.keyCode === external_wp_keycodes_namespaceObject.DOWN) {
event.preventDefault();
onToggle();
}
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarButton, {
onClick: onToggle,
"aria-haspopup": "true",
"aria-expanded": isOpen,
onKeyDown: openOnArrowDown,
label: label,
icon: icon,
showTooltip: true,
disabled: isDisabled
});
},
renderContent: () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.AlignmentMatrixControl, {
hasFocusBorder: false,
onChange: onChange,
value: value
})
});
}
/* harmony default export */ const block_alignment_matrix_control = (BlockAlignmentMatrixControl);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-title/use-block-display-title.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Returns the block's configured title as a string, or empty if the title
* cannot be determined.
*
* @example
*
* ```js
* useBlockDisplayTitle( { clientId: 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1', maximumLength: 17 } );
* ```
*
* @param {Object} props
* @param {string} props.clientId Client ID of block.
* @param {number|undefined} props.maximumLength The maximum length that the block title string may be before truncated.
* @param {string|undefined} props.context The context to pass to `getBlockLabel`.
* @return {?string} Block title.
*/
function useBlockDisplayTitle({
clientId,
maximumLength,
context
}) {
const blockTitle = (0,external_wp_data_namespaceObject.useSelect)(select => {
if (!clientId) {
return null;
}
const {
getBlockName,
getBlockAttributes
} = select(store);
const {
getBlockType,
getActiveBlockVariation
} = select(external_wp_blocks_namespaceObject.store);
const blockName = getBlockName(clientId);
const blockType = getBlockType(blockName);
if (!blockType) {
return null;
}
const attributes = getBlockAttributes(clientId);
const label = (0,external_wp_blocks_namespaceObject.__experimentalGetBlockLabel)(blockType, attributes, context);
// If the label is defined we prioritize it over a possible block variation title match.
if (label !== blockType.title) {
return label;
}
const match = getActiveBlockVariation(blockName, attributes);
// Label will fallback to the title if no label is defined for the current label context.
return match?.title || blockType.title;
}, [clientId, context]);
if (!blockTitle) {
return null;
}
if (maximumLength && maximumLength > 0 && blockTitle.length > maximumLength) {
const omission = '...';
return blockTitle.slice(0, maximumLength - omission.length) + omission;
}
return blockTitle;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-title/index.js
/**
* Internal dependencies
*/
/**
* Renders the block's configured title as a string, or empty if the title
* cannot be determined.
*
* @example
*
* ```jsx
* <BlockTitle clientId="afd1cb17-2c08-4e7a-91be-007ba7ddc3a1" maximumLength={ 17 }/>
* ```
*
* @param {Object} props
* @param {string} props.clientId Client ID of block.
* @param {number|undefined} props.maximumLength The maximum length that the block title string may be before truncated.
* @param {string|undefined} props.context The context to pass to `getBlockLabel`.
*
* @return {JSX.Element} Block title.
*/
function BlockTitle({
clientId,
maximumLength,
context
}) {
return useBlockDisplayTitle({
clientId,
maximumLength,
context
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/utils/get-editor-region.js
/**
* Gets the editor region for a given editor canvas element or
* returns the passed element if no region is found
*
* @param { Object } editor The editor canvas element.
* @return { Object } The editor region or given editor element
*/
function getEditorRegion(editor) {
var _Array$from$find, _editorCanvas$closest;
if (!editor) {
return null;
}
// If there are multiple editors, we need to find the iframe that contains our contentRef to make sure
// we're focusing the region that contains this editor.
const editorCanvas = (_Array$from$find = Array.from(document.querySelectorAll('iframe[name="editor-canvas"]').values()).find(iframe => {
// Find the iframe that contains our contentRef
const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
return iframeDocument === editor.ownerDocument;
})) !== null && _Array$from$find !== void 0 ? _Array$from$find : editor;
// The region is provided by the editor, not the block-editor.
// We should send focus to the region if one is available to reuse the
// same interface for navigating landmarks. If no region is available,
// use the canvas instead.
return (_editorCanvas$closest = editorCanvas?.closest('[role="region"]')) !== null && _editorCanvas$closest !== void 0 ? _editorCanvas$closest : editorCanvas;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-breadcrumb/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Block breadcrumb component, displaying the hierarchy of the current block selection as a breadcrumb.
*
* @param {Object} props Component props.
* @param {string} props.rootLabelText Translated label for the root element of the breadcrumb trail.
* @return {Element} Block Breadcrumb.
*/
function BlockBreadcrumb({
rootLabelText
}) {
const {
selectBlock,
clearSelectedBlock
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const {
clientId,
parents,
hasSelection
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getSelectionStart,
getSelectedBlockClientId,
getEnabledBlockParents
} = unlock(select(store));
const selectedBlockClientId = getSelectedBlockClientId();
return {
parents: getEnabledBlockParents(selectedBlockClientId),
clientId: selectedBlockClientId,
hasSelection: !!getSelectionStart().clientId
};
}, []);
const rootLabel = rootLabelText || (0,external_wp_i18n_namespaceObject.__)('Document');
// We don't care about this specific ref, but this is a way
// to get a ref within the editor canvas so we can focus it later.
const blockRef = (0,external_wp_element_namespaceObject.useRef)();
useBlockElementRef(clientId, blockRef);
/*
* Disable reason: The `list` ARIA role is redundant but
* Safari+VoiceOver won't announce the list otherwise.
*/
/* eslint-disable jsx-a11y/no-redundant-roles */
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("ul", {
className: "block-editor-block-breadcrumb",
role: "list",
"aria-label": (0,external_wp_i18n_namespaceObject.__)('Block breadcrumb'),
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("li", {
className: !hasSelection ? 'block-editor-block-breadcrumb__current' : undefined,
"aria-current": !hasSelection ? 'true' : undefined,
children: [hasSelection && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
size: "small",
className: "block-editor-block-breadcrumb__button",
onClick: () => {
// Find the block editor wrapper for the selected block
const blockEditor = blockRef.current?.closest('.editor-styles-wrapper');
clearSelectedBlock();
getEditorRegion(blockEditor)?.focus();
},
children: rootLabel
}), !hasSelection && rootLabel, !!clientId && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
icon: chevron_right_small,
className: "block-editor-block-breadcrumb__separator"
})]
}), parents.map(parentClientId => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("li", {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
size: "small",
className: "block-editor-block-breadcrumb__button",
onClick: () => selectBlock(parentClientId),
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockTitle, {
clientId: parentClientId,
maximumLength: 35
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
icon: chevron_right_small,
className: "block-editor-block-breadcrumb__separator"
})]
}, parentClientId)), !!clientId && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("li", {
className: "block-editor-block-breadcrumb__current",
"aria-current": "true",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockTitle, {
clientId: clientId,
maximumLength: 35
})
})]
})
/* eslint-enable jsx-a11y/no-redundant-roles */;
}
/* harmony default export */ const block_breadcrumb = (BlockBreadcrumb);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-content-overlay/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function useBlockOverlayActive(clientId) {
return (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
__unstableHasActiveBlockOverlayActive
} = select(store);
return __unstableHasActiveBlockOverlayActive(clientId);
}, [clientId]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-tools/use-block-toolbar-popover-props.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const COMMON_PROPS = {
placement: 'top-start'
};
// By default the toolbar sets the `shift` prop. If the user scrolls the page
// down the toolbar will stay on screen by adopting a sticky position at the
// top of the viewport.
const DEFAULT_PROPS = {
...COMMON_PROPS,
flip: false,
shift: true
};
// When there isn't enough height between the top of the block and the editor
// canvas, the `shift` prop is set to `false`, as it will cause the block to be
// obscured. The `flip` behavior is enabled, which positions the toolbar below
// the block. This only happens if the block is smaller than the viewport, as
// otherwise the toolbar will be off-screen.
const RESTRICTED_HEIGHT_PROPS = {
...COMMON_PROPS,
flip: true,
shift: false
};
/**
* Get the popover props for the block toolbar, determined by the space at the top of the canvas and the toolbar height.
*
* @param {Element} contentElement The DOM element that represents the editor content or canvas.
* @param {Element} selectedBlockElement The outer DOM element of the first selected block.
* @param {Element} scrollContainer The scrollable container for the contentElement.
* @param {number} toolbarHeight The height of the toolbar in pixels.
* @param {boolean} isSticky Whether or not the selected block is sticky or fixed.
*
* @return {Object} The popover props used to determine the position of the toolbar.
*/
function getProps(contentElement, selectedBlockElement, scrollContainer, toolbarHeight, isSticky) {
if (!contentElement || !selectedBlockElement) {
return DEFAULT_PROPS;
}
// Get how far the content area has been scrolled.
const scrollTop = scrollContainer?.scrollTop || 0;
const blockRect = getElementBounds(selectedBlockElement);
const contentRect = contentElement.getBoundingClientRect();
// Get the vertical position of top of the visible content area.
const topOfContentElementInViewport = scrollTop + contentRect.top;
// The document element's clientHeight represents the viewport height.
const viewportHeight = contentElement.ownerDocument.documentElement.clientHeight;
// The restricted height area is calculated as the sum of the
// vertical position of the visible content area, plus the height
// of the block toolbar.
const restrictedTopArea = topOfContentElementInViewport + toolbarHeight;
const hasSpaceForToolbarAbove = blockRect.top > restrictedTopArea;
const isBlockTallerThanViewport = blockRect.height > viewportHeight - toolbarHeight;
// Sticky blocks are treated as if they will never have enough space for the toolbar above.
if (!isSticky && (hasSpaceForToolbarAbove || isBlockTallerThanViewport)) {
return DEFAULT_PROPS;
}
return RESTRICTED_HEIGHT_PROPS;
}
/**
* Determines the desired popover positioning behavior, returning a set of appropriate props.
*
* @param {Object} elements
* @param {Element} elements.contentElement The DOM element that represents the editor content or canvas.
* @param {string} elements.clientId The clientId of the first selected block.
*
* @return {Object} The popover props used to determine the position of the toolbar.
*/
function useBlockToolbarPopoverProps({
contentElement,
clientId
}) {
const selectedBlockElement = useBlockElement(clientId);
const [toolbarHeight, setToolbarHeight] = (0,external_wp_element_namespaceObject.useState)(0);
const {
blockIndex,
isSticky
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockIndex,
getBlockAttributes
} = select(store);
return {
blockIndex: getBlockIndex(clientId),
isSticky: hasStickyOrFixedPositionValue(getBlockAttributes(clientId))
};
}, [clientId]);
const scrollContainer = (0,external_wp_element_namespaceObject.useMemo)(() => {
if (!contentElement) {
return;
}
return (0,external_wp_dom_namespaceObject.getScrollContainer)(contentElement);
}, [contentElement]);
const [props, setProps] = (0,external_wp_element_namespaceObject.useState)(() => getProps(contentElement, selectedBlockElement, scrollContainer, toolbarHeight, isSticky));
const popoverRef = (0,external_wp_compose_namespaceObject.useRefEffect)(popoverNode => {
setToolbarHeight(popoverNode.offsetHeight);
}, []);
const updateProps = (0,external_wp_element_namespaceObject.useCallback)(() => setProps(getProps(contentElement, selectedBlockElement, scrollContainer, toolbarHeight, isSticky)), [contentElement, selectedBlockElement, scrollContainer, toolbarHeight]);
// Update props when the block is moved. This also ensures the props are
// correct on initial mount, and when the selected block or content element
// changes (since the callback ref will update).
(0,external_wp_element_namespaceObject.useLayoutEffect)(updateProps, [blockIndex, updateProps]);
// Update props when the viewport is resized or the block is resized.
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
if (!contentElement || !selectedBlockElement) {
return;
}
// Update the toolbar props on viewport resize.
const contentView = contentElement?.ownerDocument?.defaultView;
contentView?.addEventHandler?.('resize', updateProps);
// Update the toolbar props on block resize.
let resizeObserver;
const blockView = selectedBlockElement?.ownerDocument?.defaultView;
if (blockView.ResizeObserver) {
resizeObserver = new blockView.ResizeObserver(updateProps);
resizeObserver.observe(selectedBlockElement);
}
return () => {
contentView?.removeEventHandler?.('resize', updateProps);
if (resizeObserver) {
resizeObserver.disconnect();
}
};
}, [updateProps, contentElement, selectedBlockElement]);
return {
...props,
ref: popoverRef
};
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-tools/use-selected-block-tool-props.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Returns props for the selected block tools and empty block inserter.
*
* @param {string} clientId Selected block client ID.
*/
function useSelectedBlockToolProps(clientId) {
const selectedBlockProps = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockRootClientId,
getBlockParents,
__experimentalGetBlockListSettingsForBlocks,
isBlockInsertionPointVisible,
getBlockInsertionPoint,
getBlockOrder,
hasMultiSelection,
getLastMultiSelectedBlockClientId
} = select(store);
const blockParentsClientIds = getBlockParents(clientId);
// Get Block List Settings for all ancestors of the current Block clientId.
const parentBlockListSettings = __experimentalGetBlockListSettingsForBlocks(blockParentsClientIds);
// Get the clientId of the topmost parent with the capture toolbars setting.
const capturingClientId = blockParentsClientIds.find(parentClientId => parentBlockListSettings[parentClientId]?.__experimentalCaptureToolbars);
let isInsertionPointVisible = false;
if (isBlockInsertionPointVisible()) {
const insertionPoint = getBlockInsertionPoint();
const order = getBlockOrder(insertionPoint.rootClientId);
isInsertionPointVisible = order[insertionPoint.index] === clientId;
}
return {
capturingClientId,
isInsertionPointVisible,
lastClientId: hasMultiSelection() ? getLastMultiSelectedBlockClientId() : null,
rootClientId: getBlockRootClientId(clientId)
};
}, [clientId]);
return selectedBlockProps;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-tools/empty-block-inserter.js
/**
* External dependencies
*/
/**
* Internal dependencies
*/
function EmptyBlockInserter({
clientId,
__unstableContentRef
}) {
const {
capturingClientId,
isInsertionPointVisible,
lastClientId,
rootClientId
} = useSelectedBlockToolProps(clientId);
const popoverProps = useBlockToolbarPopoverProps({
contentElement: __unstableContentRef?.current,
clientId
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(cover, {
clientId: capturingClientId || clientId,
bottomClientId: lastClientId,
className: dist_clsx('block-editor-block-list__block-side-inserter-popover', {
'is-insertion-point-visible': isInsertionPointVisible
}),
__unstableContentRef: __unstableContentRef,
...popoverProps,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-block-list__empty-block-inserter",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inserter, {
position: "bottom right",
rootClientId: rootClientId,
clientId: clientId,
__experimentalIsQuick: true
})
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-draggable/use-scroll-when-dragging.js
/**
* WordPress dependencies
*/
const SCROLL_INACTIVE_DISTANCE_PX = 50;
const SCROLL_INTERVAL_MS = 25;
const PIXELS_PER_SECOND_PER_PERCENTAGE = 1000;
const VELOCITY_MULTIPLIER = PIXELS_PER_SECOND_PER_PERCENTAGE * (SCROLL_INTERVAL_MS / 1000);
/**
* React hook that scrolls the scroll container when a block is being dragged.
*
* @return {Function[]} `startScrolling`, `scrollOnDragOver`, `stopScrolling`
* functions to be called in `onDragStart`, `onDragOver`
* and `onDragEnd` events respectively.
*/
function useScrollWhenDragging() {
const dragStartYRef = (0,external_wp_element_namespaceObject.useRef)(null);
const velocityYRef = (0,external_wp_element_namespaceObject.useRef)(null);
const scrollParentYRef = (0,external_wp_element_namespaceObject.useRef)(null);
const scrollEditorIntervalRef = (0,external_wp_element_namespaceObject.useRef)(null);
// Clear interval when unmounting.
(0,external_wp_element_namespaceObject.useEffect)(() => () => {
if (scrollEditorIntervalRef.current) {
clearInterval(scrollEditorIntervalRef.current);
scrollEditorIntervalRef.current = null;
}
}, []);
const startScrolling = (0,external_wp_element_namespaceObject.useCallback)(event => {
dragStartYRef.current = event.clientY;
// Find nearest parent(s) to scroll.
scrollParentYRef.current = (0,external_wp_dom_namespaceObject.getScrollContainer)(event.target);
scrollEditorIntervalRef.current = setInterval(() => {
if (scrollParentYRef.current && velocityYRef.current) {
const newTop = scrollParentYRef.current.scrollTop + velocityYRef.current;
// Setting `behavior: 'smooth'` as a scroll property seems to hurt performance.
// Better to use a small scroll interval.
scrollParentYRef.current.scroll({
top: newTop
});
}
}, SCROLL_INTERVAL_MS);
}, []);
const scrollOnDragOver = (0,external_wp_element_namespaceObject.useCallback)(event => {
if (!scrollParentYRef.current) {
return;
}
const scrollParentHeight = scrollParentYRef.current.offsetHeight;
const offsetDragStartPosition = dragStartYRef.current - scrollParentYRef.current.offsetTop;
const offsetDragPosition = event.clientY - scrollParentYRef.current.offsetTop;
if (event.clientY > offsetDragStartPosition) {
// User is dragging downwards.
const moveableDistance = Math.max(scrollParentHeight - offsetDragStartPosition - SCROLL_INACTIVE_DISTANCE_PX, 0);
const dragDistance = Math.max(offsetDragPosition - offsetDragStartPosition - SCROLL_INACTIVE_DISTANCE_PX, 0);
const distancePercentage = moveableDistance === 0 || dragDistance === 0 ? 0 : dragDistance / moveableDistance;
velocityYRef.current = VELOCITY_MULTIPLIER * distancePercentage;
} else if (event.clientY < offsetDragStartPosition) {
// User is dragging upwards.
const moveableDistance = Math.max(offsetDragStartPosition - SCROLL_INACTIVE_DISTANCE_PX, 0);
const dragDistance = Math.max(offsetDragStartPosition - offsetDragPosition - SCROLL_INACTIVE_DISTANCE_PX, 0);
const distancePercentage = moveableDistance === 0 || dragDistance === 0 ? 0 : dragDistance / moveableDistance;
velocityYRef.current = -VELOCITY_MULTIPLIER * distancePercentage;
} else {
velocityYRef.current = 0;
}
}, []);
const stopScrolling = () => {
dragStartYRef.current = null;
scrollParentYRef.current = null;
if (scrollEditorIntervalRef.current) {
clearInterval(scrollEditorIntervalRef.current);
scrollEditorIntervalRef.current = null;
}
};
return [startScrolling, scrollOnDragOver, stopScrolling];
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-draggable/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const BlockDraggable = ({
appendToOwnerDocument,
children,
clientIds,
cloneClassname,
elementId,
onDragStart,
onDragEnd,
fadeWhenDisabled = false,
dragComponent
}) => {
const {
srcRootClientId,
isDraggable,
icon,
visibleInserter,
getBlockType
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
canMoveBlocks,
getBlockRootClientId,
getBlockName,
getBlockAttributes,
isBlockInsertionPointVisible
} = select(store);
const {
getBlockType: _getBlockType,
getActiveBlockVariation
} = select(external_wp_blocks_namespaceObject.store);
const rootClientId = getBlockRootClientId(clientIds[0]);
const blockName = getBlockName(clientIds[0]);
const variation = getActiveBlockVariation(blockName, getBlockAttributes(clientIds[0]));
return {
srcRootClientId: rootClientId,
isDraggable: canMoveBlocks(clientIds),
icon: variation?.icon || _getBlockType(blockName)?.icon,
visibleInserter: isBlockInsertionPointVisible(),
getBlockType: _getBlockType
};
}, [clientIds]);
const isDraggingRef = (0,external_wp_element_namespaceObject.useRef)(false);
const [startScrolling, scrollOnDragOver, stopScrolling] = useScrollWhenDragging();
const {
getAllowedBlocks,
getBlockNamesByClientId,
getBlockRootClientId
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
startDraggingBlocks,
stopDraggingBlocks
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
// Stop dragging blocks if the block draggable is unmounted.
(0,external_wp_element_namespaceObject.useEffect)(() => {
return () => {
if (isDraggingRef.current) {
stopDraggingBlocks();
}
};
}, []);
// Find the root of the editor iframe.
const blockEl = useBlockElement(clientIds[0]);
const editorRoot = blockEl?.closest('body');
/*
* Add a dragover event listener to the editor root to track the blocks being dragged over.
* The listener has to be inside the editor iframe otherwise the target isn't accessible.
*/
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (!editorRoot || !fadeWhenDisabled) {
return;
}
const onDragOver = event => {
if (!event.target.closest('[data-block]')) {
return;
}
const draggedBlockNames = getBlockNamesByClientId(clientIds);
const targetClientId = event.target.closest('[data-block]').getAttribute('data-block');
const allowedBlocks = getAllowedBlocks(targetClientId);
const targetBlockName = getBlockNamesByClientId([targetClientId])[0];
/*
* Check if the target is valid to drop in.
* If the target's allowedBlocks is an empty array,
* it isn't a container block, in which case we check
* its parent's validity instead.
*/
let dropTargetValid;
if (allowedBlocks?.length === 0) {
const targetRootClientId = getBlockRootClientId(targetClientId);
const targetRootBlockName = getBlockNamesByClientId([targetRootClientId])[0];
const rootAllowedBlocks = getAllowedBlocks(targetRootClientId);
dropTargetValid = isDropTargetValid(getBlockType, rootAllowedBlocks, draggedBlockNames, targetRootBlockName);
} else {
dropTargetValid = isDropTargetValid(getBlockType, allowedBlocks, draggedBlockNames, targetBlockName);
}
/*
* Update the body class to reflect if drop target is valid.
* This has to be done on the document body because the draggable
* chip is rendered outside of the editor iframe.
*/
if (!dropTargetValid && !visibleInserter) {
window?.document?.body?.classList?.add('block-draggable-invalid-drag-token');
} else {
window?.document?.body?.classList?.remove('block-draggable-invalid-drag-token');
}
};
const throttledOnDragOver = (0,external_wp_compose_namespaceObject.throttle)(onDragOver, 200);
editorRoot.addEventListener('dragover', throttledOnDragOver);
return () => {
editorRoot.removeEventListener('dragover', throttledOnDragOver);
};
}, [clientIds, editorRoot, fadeWhenDisabled, getAllowedBlocks, getBlockNamesByClientId, getBlockRootClientId, getBlockType, visibleInserter]);
if (!isDraggable) {
return children({
draggable: false
});
}
const transferData = {
type: 'block',
srcClientIds: clientIds,
srcRootClientId
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Draggable, {
appendToOwnerDocument: appendToOwnerDocument,
cloneClassname: cloneClassname,
__experimentalTransferDataType: "wp-blocks",
transferData: transferData,
onDragStart: event => {
// Defer hiding the dragged source element to the next
// frame to enable dragging.
window.requestAnimationFrame(() => {
startDraggingBlocks(clientIds);
isDraggingRef.current = true;
startScrolling(event);
if (onDragStart) {
onDragStart();
}
});
},
onDragOver: scrollOnDragOver,
onDragEnd: () => {
stopDraggingBlocks();
isDraggingRef.current = false;
stopScrolling();
if (onDragEnd) {
onDragEnd();
}
},
__experimentalDragComponent:
// Check against `undefined` so that `null` can be used to disable
// the default drag component.
dragComponent !== undefined ? dragComponent : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockDraggableChip, {
count: clientIds.length,
icon: icon,
fadeWhenDisabled: true
}),
elementId: elementId,
children: ({
onDraggableStart,
onDraggableEnd
}) => {
return children({
draggable: true,
onDragStart: onDraggableStart,
onDragEnd: onDraggableEnd
});
}
});
};
/* harmony default export */ const block_draggable = (BlockDraggable);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-mover/mover-description.js
/**
* WordPress dependencies
*/
const getMovementDirection = (moveDirection, orientation) => {
if (moveDirection === 'up') {
if (orientation === 'horizontal') {
return (0,external_wp_i18n_namespaceObject.isRTL)() ? 'right' : 'left';
}
return 'up';
} else if (moveDirection === 'down') {
if (orientation === 'horizontal') {
return (0,external_wp_i18n_namespaceObject.isRTL)() ? 'left' : 'right';
}
return 'down';
}
return null;
};
/**
* Return a label for the block movement controls depending on block position.
*
* @param {number} selectedCount Number of blocks selected.
* @param {string} type Block type - in the case of a single block, should
* define its 'type'. I.e. 'Text', 'Heading', 'Image' etc.
* @param {number} firstIndex The index (position - 1) of the first block selected.
* @param {boolean} isFirst This is the first block.
* @param {boolean} isLast This is the last block.
* @param {number} dir Direction of movement (> 0 is considered to be going
* down, < 0 is up).
* @param {string} orientation The orientation of the block movers, vertical or
* horizontal.
*
* @return {string | undefined} Label for the block movement controls.
*/
function getBlockMoverDescription(selectedCount, type, firstIndex, isFirst, isLast, dir, orientation) {
const position = firstIndex + 1;
if (selectedCount > 1) {
return getMultiBlockMoverDescription(selectedCount, firstIndex, isFirst, isLast, dir, orientation);
}
if (isFirst && isLast) {
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: %s: Type of block (i.e. Text, Image etc)
(0,external_wp_i18n_namespaceObject.__)('Block %s is the only block, and cannot be moved'), type);
}
if (dir > 0 && !isLast) {
// Moving down.
const movementDirection = getMovementDirection('down', orientation);
if (movementDirection === 'down') {
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: 1: Type of block (i.e. Text, Image etc), 2: Position of selected block, 3: New position
(0,external_wp_i18n_namespaceObject.__)('Move %1$s block from position %2$d down to position %3$d'), type, position, position + 1);
}
if (movementDirection === 'left') {
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: 1: Type of block (i.e. Text, Image etc), 2: Position of selected block, 3: New position
(0,external_wp_i18n_namespaceObject.__)('Move %1$s block from position %2$d left to position %3$d'), type, position, position + 1);
}
if (movementDirection === 'right') {
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: 1: Type of block (i.e. Text, Image etc), 2: Position of selected block, 3: New position
(0,external_wp_i18n_namespaceObject.__)('Move %1$s block from position %2$d right to position %3$d'), type, position, position + 1);
}
}
if (dir > 0 && isLast) {
// Moving down, and is the last item.
const movementDirection = getMovementDirection('down', orientation);
if (movementDirection === 'down') {
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: 1: Type of block (i.e. Text, Image etc)
(0,external_wp_i18n_namespaceObject.__)('Block %1$s is at the end of the content and can’t be moved down'), type);
}
if (movementDirection === 'left') {
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: 1: Type of block (i.e. Text, Image etc)
(0,external_wp_i18n_namespaceObject.__)('Block %1$s is at the end of the content and can’t be moved left'), type);
}
if (movementDirection === 'right') {
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: 1: Type of block (i.e. Text, Image etc)
(0,external_wp_i18n_namespaceObject.__)('Block %1$s is at the end of the content and can’t be moved right'), type);
}
}
if (dir < 0 && !isFirst) {
// Moving up.
const movementDirection = getMovementDirection('up', orientation);
if (movementDirection === 'up') {
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: 1: Type of block (i.e. Text, Image etc), 2: Position of selected block, 3: New position
(0,external_wp_i18n_namespaceObject.__)('Move %1$s block from position %2$d up to position %3$d'), type, position, position - 1);
}
if (movementDirection === 'left') {
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: 1: Type of block (i.e. Text, Image etc), 2: Position of selected block, 3: New position
(0,external_wp_i18n_namespaceObject.__)('Move %1$s block from position %2$d left to position %3$d'), type, position, position - 1);
}
if (movementDirection === 'right') {
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: 1: Type of block (i.e. Text, Image etc), 2: Position of selected block, 3: New position
(0,external_wp_i18n_namespaceObject.__)('Move %1$s block from position %2$d right to position %3$d'), type, position, position - 1);
}
}
if (dir < 0 && isFirst) {
// Moving up, and is the first item.
const movementDirection = getMovementDirection('up', orientation);
if (movementDirection === 'up') {
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: 1: Type of block (i.e. Text, Image etc)
(0,external_wp_i18n_namespaceObject.__)('Block %1$s is at the beginning of the content and can’t be moved up'), type);
}
if (movementDirection === 'left') {
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: 1: Type of block (i.e. Text, Image etc)
(0,external_wp_i18n_namespaceObject.__)('Block %1$s is at the beginning of the content and can’t be moved left'), type);
}
if (movementDirection === 'right') {
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: 1: Type of block (i.e. Text, Image etc)
(0,external_wp_i18n_namespaceObject.__)('Block %1$s is at the beginning of the content and can’t be moved right'), type);
}
}
}
/**
* Return a label for the block movement controls depending on block position.
*
* @param {number} selectedCount Number of blocks selected.
* @param {number} firstIndex The index (position - 1) of the first block selected.
* @param {boolean} isFirst This is the first block.
* @param {boolean} isLast This is the last block.
* @param {number} dir Direction of movement (> 0 is considered to be going
* down, < 0 is up).
* @param {string} orientation The orientation of the block movers, vertical or
* horizontal.
*
* @return {string | undefined} Label for the block movement controls.
*/
function getMultiBlockMoverDescription(selectedCount, firstIndex, isFirst, isLast, dir, orientation) {
const position = firstIndex + 1;
if (isFirst && isLast) {
// All blocks are selected
return (0,external_wp_i18n_namespaceObject.__)('All blocks are selected, and cannot be moved');
}
if (dir > 0 && !isLast) {
// moving down
const movementDirection = getMovementDirection('down', orientation);
if (movementDirection === 'down') {
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: 1: Number of selected blocks, 2: Position of selected blocks
(0,external_wp_i18n_namespaceObject.__)('Move %1$d blocks from position %2$d down by one place'), selectedCount, position);
}
if (movementDirection === 'left') {
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: 1: Number of selected blocks, 2: Position of selected blocks
(0,external_wp_i18n_namespaceObject.__)('Move %1$d blocks from position %2$d left by one place'), selectedCount, position);
}
if (movementDirection === 'right') {
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: 1: Number of selected blocks, 2: Position of selected blocks
(0,external_wp_i18n_namespaceObject.__)('Move %1$d blocks from position %2$d right by one place'), selectedCount, position);
}
}
if (dir > 0 && isLast) {
// moving down, and the selected blocks are the last item
const movementDirection = getMovementDirection('down', orientation);
if (movementDirection === 'down') {
return (0,external_wp_i18n_namespaceObject.__)('Blocks cannot be moved down as they are already at the bottom');
}
if (movementDirection === 'left') {
return (0,external_wp_i18n_namespaceObject.__)('Blocks cannot be moved left as they are already are at the leftmost position');
}
if (movementDirection === 'right') {
return (0,external_wp_i18n_namespaceObject.__)('Blocks cannot be moved right as they are already are at the rightmost position');
}
}
if (dir < 0 && !isFirst) {
// moving up
const movementDirection = getMovementDirection('up', orientation);
if (movementDirection === 'up') {
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: 1: Number of selected blocks, 2: Position of selected blocks
(0,external_wp_i18n_namespaceObject.__)('Move %1$d blocks from position %2$d up by one place'), selectedCount, position);
}
if (movementDirection === 'left') {
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: 1: Number of selected blocks, 2: Position of selected blocks
(0,external_wp_i18n_namespaceObject.__)('Move %1$d blocks from position %2$d left by one place'), selectedCount, position);
}
if (movementDirection === 'right') {
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: 1: Number of selected blocks, 2: Position of selected blocks
(0,external_wp_i18n_namespaceObject.__)('Move %1$d blocks from position %2$d right by one place'), selectedCount, position);
}
}
if (dir < 0 && isFirst) {
// moving up, and the selected blocks are the first item
const movementDirection = getMovementDirection('up', orientation);
if (movementDirection === 'up') {
return (0,external_wp_i18n_namespaceObject.__)('Blocks cannot be moved up as they are already at the top');
}
if (movementDirection === 'left') {
return (0,external_wp_i18n_namespaceObject.__)('Blocks cannot be moved left as they are already are at the leftmost position');
}
if (movementDirection === 'right') {
return (0,external_wp_i18n_namespaceObject.__)('Blocks cannot be moved right as they are already are at the rightmost position');
}
}
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-mover/button.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const getArrowIcon = (direction, orientation) => {
if (direction === 'up') {
if (orientation === 'horizontal') {
return (0,external_wp_i18n_namespaceObject.isRTL)() ? chevron_right : chevron_left;
}
return chevron_up;
} else if (direction === 'down') {
if (orientation === 'horizontal') {
return (0,external_wp_i18n_namespaceObject.isRTL)() ? chevron_left : chevron_right;
}
return chevron_down;
}
return null;
};
const getMovementDirectionLabel = (moveDirection, orientation) => {
if (moveDirection === 'up') {
if (orientation === 'horizontal') {
return (0,external_wp_i18n_namespaceObject.isRTL)() ? (0,external_wp_i18n_namespaceObject.__)('Move right') : (0,external_wp_i18n_namespaceObject.__)('Move left');
}
return (0,external_wp_i18n_namespaceObject.__)('Move up');
} else if (moveDirection === 'down') {
if (orientation === 'horizontal') {
return (0,external_wp_i18n_namespaceObject.isRTL)() ? (0,external_wp_i18n_namespaceObject.__)('Move left') : (0,external_wp_i18n_namespaceObject.__)('Move right');
}
return (0,external_wp_i18n_namespaceObject.__)('Move down');
}
return null;
};
const BlockMoverButton = (0,external_wp_element_namespaceObject.forwardRef)(({
clientIds,
direction,
orientation: moverOrientation,
...props
}, ref) => {
const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(BlockMoverButton);
const normalizedClientIds = Array.isArray(clientIds) ? clientIds : [clientIds];
const blocksCount = normalizedClientIds.length;
const {
disabled
} = props;
const {
blockType,
isDisabled,
rootClientId,
isFirst,
isLast,
firstIndex,
orientation = 'vertical'
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockIndex,
getBlockRootClientId,
getBlockOrder,
getBlock,
getBlockListSettings
} = select(store);
const firstClientId = normalizedClientIds[0];
const blockRootClientId = getBlockRootClientId(firstClientId);
const firstBlockIndex = getBlockIndex(firstClientId);
const lastBlockIndex = getBlockIndex(normalizedClientIds[normalizedClientIds.length - 1]);
const blockOrder = getBlockOrder(blockRootClientId);
const block = getBlock(firstClientId);
const isFirstBlock = firstBlockIndex === 0;
const isLastBlock = lastBlockIndex === blockOrder.length - 1;
const {
orientation: blockListOrientation
} = getBlockListSettings(blockRootClientId) || {};
return {
blockType: block ? (0,external_wp_blocks_namespaceObject.getBlockType)(block.name) : null,
isDisabled: disabled || (direction === 'up' ? isFirstBlock : isLastBlock),
rootClientId: blockRootClientId,
firstIndex: firstBlockIndex,
isFirst: isFirstBlock,
isLast: isLastBlock,
orientation: moverOrientation || blockListOrientation
};
}, [clientIds, direction]);
const {
moveBlocksDown,
moveBlocksUp
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const moverFunction = direction === 'up' ? moveBlocksUp : moveBlocksDown;
const onClick = event => {
moverFunction(clientIds, rootClientId);
if (props.onClick) {
props.onClick(event);
}
};
const descriptionId = `block-editor-block-mover-button__description-${instanceId}`;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
ref: ref,
className: dist_clsx('block-editor-block-mover-button', `is-${direction}-button`),
icon: getArrowIcon(direction, orientation),
label: getMovementDirectionLabel(direction, orientation),
"aria-describedby": descriptionId,
...props,
onClick: isDisabled ? null : onClick,
disabled: isDisabled,
accessibleWhenDisabled: true
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.VisuallyHidden, {
id: descriptionId,
children: getBlockMoverDescription(blocksCount, blockType && blockType.title, firstIndex, isFirst, isLast, direction === 'up' ? -1 : 1, orientation)
})]
});
});
const BlockMoverUpButton = (0,external_wp_element_namespaceObject.forwardRef)((props, ref) => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockMoverButton, {
direction: "up",
ref: ref,
...props
});
});
const BlockMoverDownButton = (0,external_wp_element_namespaceObject.forwardRef)((props, ref) => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockMoverButton, {
direction: "down",
ref: ref,
...props
});
});
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-mover/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockMover({
clientIds,
hideDragHandle,
isBlockMoverUpButtonDisabled,
isBlockMoverDownButtonDisabled
}) {
const {
canMove,
rootClientId,
isFirst,
isLast,
orientation,
isManualGrid
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
var _getBlockAttributes;
const {
getBlockIndex,
getBlockListSettings,
canMoveBlocks,
getBlockOrder,
getBlockRootClientId,
getBlockAttributes
} = select(store);
const normalizedClientIds = Array.isArray(clientIds) ? clientIds : [clientIds];
const firstClientId = normalizedClientIds[0];
const _rootClientId = getBlockRootClientId(firstClientId);
const firstIndex = getBlockIndex(firstClientId);
const lastIndex = getBlockIndex(normalizedClientIds[normalizedClientIds.length - 1]);
const blockOrder = getBlockOrder(_rootClientId);
const {
layout = {}
} = (_getBlockAttributes = getBlockAttributes(_rootClientId)) !== null && _getBlockAttributes !== void 0 ? _getBlockAttributes : {};
return {
canMove: canMoveBlocks(clientIds),
rootClientId: _rootClientId,
isFirst: firstIndex === 0,
isLast: lastIndex === blockOrder.length - 1,
orientation: getBlockListSettings(_rootClientId)?.orientation,
isManualGrid: layout.type === 'grid' && layout.isManualPlacement && window.__experimentalEnableGridInteractivity
};
}, [clientIds]);
if (!canMove || isFirst && isLast && !rootClientId || hideDragHandle && isManualGrid) {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.ToolbarGroup, {
className: dist_clsx('block-editor-block-mover', {
'is-horizontal': orientation === 'horizontal'
}),
children: [!hideDragHandle && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_draggable, {
clientIds: clientIds,
fadeWhenDisabled: true,
children: draggableProps => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
icon: drag_handle,
className: "block-editor-block-mover__drag-handle",
label: (0,external_wp_i18n_namespaceObject.__)('Drag')
// Should not be able to tab to drag handle as this
// button can only be used with a pointer device.
,
tabIndex: "-1",
...draggableProps
})
}), !isManualGrid && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-block-mover__move-button-container",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarItem, {
children: itemProps => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockMoverUpButton, {
disabled: isBlockMoverUpButtonDisabled,
clientIds: clientIds,
...itemProps
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarItem, {
children: itemProps => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockMoverDownButton, {
disabled: isBlockMoverDownButtonDisabled,
clientIds: clientIds,
...itemProps
})
})]
})]
});
}
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-mover/README.md
*/
/* harmony default export */ const block_mover = (BlockMover);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-toolbar/utils.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const {
clearTimeout: utils_clearTimeout,
setTimeout: utils_setTimeout
} = window;
const DEBOUNCE_TIMEOUT = 200;
/**
* Hook that creates debounced callbacks when the node is hovered or focused.
*
* @param {Object} props Component props.
* @param {Object} props.ref Element reference.
* @param {boolean} props.isFocused Whether the component has current focus.
* @param {number} props.highlightParent Whether to highlight the parent block. It defaults in highlighting the selected block.
* @param {number} [props.debounceTimeout=250] Debounce timeout in milliseconds.
*/
function useDebouncedShowGestures({
ref,
isFocused,
highlightParent,
debounceTimeout = DEBOUNCE_TIMEOUT
}) {
const {
getSelectedBlockClientId,
getBlockRootClientId
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
toggleBlockHighlight
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const timeoutRef = (0,external_wp_element_namespaceObject.useRef)();
const isDistractionFree = (0,external_wp_data_namespaceObject.useSelect)(select => select(store).getSettings().isDistractionFree, []);
const handleOnChange = nextIsFocused => {
if (nextIsFocused && isDistractionFree) {
return;
}
const selectedBlockClientId = getSelectedBlockClientId();
const clientId = highlightParent ? getBlockRootClientId(selectedBlockClientId) : selectedBlockClientId;
toggleBlockHighlight(clientId, nextIsFocused);
};
const getIsHovered = () => {
return ref?.current && ref.current.matches(':hover');
};
const shouldHideGestures = () => {
const isHovered = getIsHovered();
return !isFocused && !isHovered;
};
const clearTimeoutRef = () => {
const timeout = timeoutRef.current;
if (timeout && utils_clearTimeout) {
utils_clearTimeout(timeout);
}
};
const debouncedShowGestures = event => {
if (event) {
event.stopPropagation();
}
clearTimeoutRef();
handleOnChange(true);
};
const debouncedHideGestures = event => {
if (event) {
event.stopPropagation();
}
clearTimeoutRef();
timeoutRef.current = utils_setTimeout(() => {
if (shouldHideGestures()) {
handleOnChange(false);
}
}, debounceTimeout);
};
(0,external_wp_element_namespaceObject.useEffect)(() => () => {
/**
* We need to call the change handler with `isFocused`
* set to false on unmount because we also clear the
* timeout that would handle that.
*/
handleOnChange(false);
clearTimeoutRef();
}, []);
return {
debouncedShowGestures,
debouncedHideGestures
};
}
/**
* Hook that provides gesture events for DOM elements
* that interact with the isFocused state.
*
* @param {Object} props Component props.
* @param {Object} props.ref Element reference.
* @param {number} [props.highlightParent=false] Whether to highlight the parent block. It defaults to highlighting the selected block.
* @param {number} [props.debounceTimeout=250] Debounce timeout in milliseconds.
*/
function useShowHoveredOrFocusedGestures({
ref,
highlightParent = false,
debounceTimeout = DEBOUNCE_TIMEOUT
}) {
const [isFocused, setIsFocused] = (0,external_wp_element_namespaceObject.useState)(false);
const {
debouncedShowGestures,
debouncedHideGestures
} = useDebouncedShowGestures({
ref,
debounceTimeout,
isFocused,
highlightParent
});
const registerRef = (0,external_wp_element_namespaceObject.useRef)(false);
const isFocusedWithin = () => {
return ref?.current && ref.current.contains(ref.current.ownerDocument.activeElement);
};
(0,external_wp_element_namespaceObject.useEffect)(() => {
const node = ref.current;
const handleOnFocus = () => {
if (isFocusedWithin()) {
setIsFocused(true);
debouncedShowGestures();
}
};
const handleOnBlur = () => {
if (!isFocusedWithin()) {
setIsFocused(false);
debouncedHideGestures();
}
};
/**
* Events are added via DOM events (vs. React synthetic events),
* as the child React components swallow mouse events.
*/
if (node && !registerRef.current) {
node.addEventListener('focus', handleOnFocus, true);
node.addEventListener('blur', handleOnBlur, true);
registerRef.current = true;
}
return () => {
if (node) {
node.removeEventListener('focus', handleOnFocus);
node.removeEventListener('blur', handleOnBlur);
}
};
}, [ref, registerRef, setIsFocused, debouncedShowGestures, debouncedHideGestures]);
return {
onMouseMove: debouncedShowGestures,
onMouseLeave: debouncedHideGestures
};
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-parent-selector/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Block parent selector component, displaying the hierarchy of the
* current block selection as a single icon to "go up" a level.
*
* @return {Component} Parent block selector.
*/
function BlockParentSelector() {
const {
selectBlock
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const {
firstParentClientId,
isVisible
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockName,
getBlockParents,
getSelectedBlockClientId,
getBlockEditingMode
} = select(store);
const {
hasBlockSupport
} = select(external_wp_blocks_namespaceObject.store);
const selectedBlockClientId = getSelectedBlockClientId();
const parents = getBlockParents(selectedBlockClientId);
const _firstParentClientId = parents[parents.length - 1];
const parentBlockName = getBlockName(_firstParentClientId);
const _parentBlockType = (0,external_wp_blocks_namespaceObject.getBlockType)(parentBlockName);
return {
firstParentClientId: _firstParentClientId,
isVisible: _firstParentClientId && getBlockEditingMode(_firstParentClientId) === 'default' && hasBlockSupport(_parentBlockType, '__experimentalParentSelector', true)
};
}, []);
const blockInformation = useBlockDisplayInformation(firstParentClientId);
// Allows highlighting the parent block outline when focusing or hovering
// the parent block selector within the child.
const nodeRef = (0,external_wp_element_namespaceObject.useRef)();
const showHoveredOrFocusedGestures = useShowHoveredOrFocusedGestures({
ref: nodeRef,
highlightParent: true
});
if (!isVisible) {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-block-parent-selector",
ref: nodeRef,
...showHoveredOrFocusedGestures,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarButton, {
className: "block-editor-block-parent-selector__button",
onClick: () => selectBlock(firstParentClientId),
label: (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %s: Name of the block's parent. */
(0,external_wp_i18n_namespaceObject.__)('Select parent block: %s'), blockInformation?.title),
showTooltip: true,
icon: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_icon, {
icon: blockInformation?.icon
})
})
}, firstParentClientId);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/copy.js
/**
* WordPress dependencies
*/
const copy_copy = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M5 4.5h11a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V5a.5.5 0 0 1 .5-.5ZM3 5a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm17 3v10.75c0 .69-.56 1.25-1.25 1.25H6v1.5h12.75a2.75 2.75 0 0 0 2.75-2.75V8H20Z"
})
});
/* harmony default export */ const library_copy = (copy_copy);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-switcher/preview-block-popover.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function PreviewBlockPopover({
blocks
}) {
const isMobile = (0,external_wp_compose_namespaceObject.useViewportMatch)('medium', '<');
if (isMobile) {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-block-switcher__popover-preview-container",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Popover, {
className: "block-editor-block-switcher__popover-preview",
placement: "right-start",
focusOnMount: false,
offset: 16,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-block-switcher__preview",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-block-switcher__preview-title",
children: (0,external_wp_i18n_namespaceObject.__)('Preview')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_preview, {
viewportWidth: 500,
blocks: blocks
})]
})
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-switcher/block-variation-transformations.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const block_variation_transformations_EMPTY_OBJECT = {};
function useBlockVariationTransforms({
clientIds,
blocks
}) {
const {
activeBlockVariation,
blockVariationTransformations
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockAttributes,
canRemoveBlocks
} = select(store);
const {
getActiveBlockVariation,
getBlockVariations
} = select(external_wp_blocks_namespaceObject.store);
const canRemove = canRemoveBlocks(clientIds);
// Only handle single selected blocks for now.
if (blocks.length !== 1 || !canRemove) {
return block_variation_transformations_EMPTY_OBJECT;
}
const [firstBlock] = blocks;
return {
blockVariationTransformations: getBlockVariations(firstBlock.name, 'transform'),
activeBlockVariation: getActiveBlockVariation(firstBlock.name, getBlockAttributes(firstBlock.clientId))
};
}, [clientIds, blocks]);
const transformations = (0,external_wp_element_namespaceObject.useMemo)(() => {
return blockVariationTransformations?.filter(({
name
}) => name !== activeBlockVariation?.name);
}, [blockVariationTransformations, activeBlockVariation]);
return transformations;
}
const BlockVariationTransformations = ({
transformations,
onSelect,
blocks
}) => {
const [hoveredTransformItemName, setHoveredTransformItemName] = (0,external_wp_element_namespaceObject.useState)();
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [hoveredTransformItemName && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PreviewBlockPopover, {
blocks: (0,external_wp_blocks_namespaceObject.cloneBlock)(blocks[0], transformations.find(({
name
}) => name === hoveredTransformItemName).attributes)
}), transformations?.map(item => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockVariationTranformationItem, {
item: item,
onSelect: onSelect,
setHoveredTransformItemName: setHoveredTransformItemName
}, item.name))]
});
};
function BlockVariationTranformationItem({
item,
onSelect,
setHoveredTransformItemName
}) {
const {
name,
icon,
title
} = item;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.MenuItem, {
className: (0,external_wp_blocks_namespaceObject.getBlockMenuDefaultClassName)(name),
onClick: event => {
event.preventDefault();
onSelect(name);
},
onMouseLeave: () => setHoveredTransformItemName(null),
onMouseEnter: () => setHoveredTransformItemName(name),
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_icon, {
icon: icon,
showColors: true
}), title]
});
}
/* harmony default export */ const block_variation_transformations = (BlockVariationTransformations);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-switcher/block-transformations-menu.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Helper hook to group transformations to display them in a specific order in the UI.
* For now we group only priority content driven transformations(ex. paragraph -> heading).
*
* Later on we could also group 'layout' transformations(ex. paragraph -> group) and
* display them in different sections.
*
* @param {Object[]} possibleBlockTransformations The available block transformations.
* @return {Record<string, Object[]>} The grouped block transformations.
*/
function useGroupedTransforms(possibleBlockTransformations) {
const priorityContentTranformationBlocks = {
'core/paragraph': 1,
'core/heading': 2,
'core/list': 3,
'core/quote': 4
};
const transformations = (0,external_wp_element_namespaceObject.useMemo)(() => {
const priorityTextTranformsNames = Object.keys(priorityContentTranformationBlocks);
const groupedPossibleTransforms = possibleBlockTransformations.reduce((accumulator, item) => {
const {
name
} = item;
if (priorityTextTranformsNames.includes(name)) {
accumulator.priorityTextTransformations.push(item);
} else {
accumulator.restTransformations.push(item);
}
return accumulator;
}, {
priorityTextTransformations: [],
restTransformations: []
});
/**
* If there is only one priority text transformation and it's a Quote,
* is should move to the rest transformations. This is because Quote can
* be a container for any block type, so in multi-block selection it will
* always be suggested, even for non-text blocks.
*/
if (groupedPossibleTransforms.priorityTextTransformations.length === 1 && groupedPossibleTransforms.priorityTextTransformations[0].name === 'core/quote') {
const singleQuote = groupedPossibleTransforms.priorityTextTransformations.pop();
groupedPossibleTransforms.restTransformations.push(singleQuote);
}
return groupedPossibleTransforms;
}, [possibleBlockTransformations]);
// Order the priority text transformations.
transformations.priorityTextTransformations.sort(({
name: currentName
}, {
name: nextName
}) => {
return priorityContentTranformationBlocks[currentName] < priorityContentTranformationBlocks[nextName] ? -1 : 1;
});
return transformations;
}
const BlockTransformationsMenu = ({
className,
possibleBlockTransformations,
possibleBlockVariationTransformations,
onSelect,
onSelectVariation,
blocks
}) => {
const [hoveredTransformItemName, setHoveredTransformItemName] = (0,external_wp_element_namespaceObject.useState)();
const {
priorityTextTransformations,
restTransformations
} = useGroupedTransforms(possibleBlockTransformations);
// We have to check if both content transformations(priority and rest) are set
// in order to create a separate MenuGroup for them.
const hasBothContentTransformations = priorityTextTransformations.length && restTransformations.length;
const restTransformItems = !!restTransformations.length && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RestTransformationItems, {
restTransformations: restTransformations,
onSelect: onSelect,
setHoveredTransformItemName: setHoveredTransformItemName
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.MenuGroup, {
label: (0,external_wp_i18n_namespaceObject.__)('Transform to'),
className: className,
children: [hoveredTransformItemName && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PreviewBlockPopover, {
blocks: (0,external_wp_blocks_namespaceObject.switchToBlockType)(blocks, hoveredTransformItemName)
}), !!possibleBlockVariationTransformations?.length && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_variation_transformations, {
transformations: possibleBlockVariationTransformations,
blocks: blocks,
onSelect: onSelectVariation
}), priorityTextTransformations.map(item => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockTranformationItem, {
item: item,
onSelect: onSelect,
setHoveredTransformItemName: setHoveredTransformItemName
}, item.name)), !hasBothContentTransformations && restTransformItems]
}), !!hasBothContentTransformations && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuGroup, {
className: className,
children: restTransformItems
})]
});
};
function RestTransformationItems({
restTransformations,
onSelect,
setHoveredTransformItemName
}) {
return restTransformations.map(item => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockTranformationItem, {
item: item,
onSelect: onSelect,
setHoveredTransformItemName: setHoveredTransformItemName
}, item.name));
}
function BlockTranformationItem({
item,
onSelect,
setHoveredTransformItemName
}) {
const {
name,
icon,
title,
isDisabled
} = item;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.MenuItem, {
className: (0,external_wp_blocks_namespaceObject.getBlockMenuDefaultClassName)(name),
onClick: event => {
event.preventDefault();
onSelect(name);
},
disabled: isDisabled,
onMouseLeave: () => setHoveredTransformItemName(null),
onMouseEnter: () => setHoveredTransformItemName(name),
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_icon, {
icon: icon,
showColors: true
}), title]
});
}
/* harmony default export */ const block_transformations_menu = (BlockTransformationsMenu);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-styles/utils.js
/**
* WordPress dependencies
*/
/**
* Returns the active style from the given className.
*
* @param {Array} styles Block styles.
* @param {string} className Class name
*
* @return {Object?} The active style.
*/
function getActiveStyle(styles, className) {
for (const style of new (external_wp_tokenList_default())(className).values()) {
if (style.indexOf('is-style-') === -1) {
continue;
}
const potentialStyleName = style.substring(9);
const activeStyle = styles?.find(({
name
}) => name === potentialStyleName);
if (activeStyle) {
return activeStyle;
}
}
return getDefaultStyle(styles);
}
/**
* Replaces the active style in the block's className.
*
* @param {string} className Class name.
* @param {Object?} activeStyle The replaced style.
* @param {Object} newStyle The replacing style.
*
* @return {string} The updated className.
*/
function replaceActiveStyle(className, activeStyle, newStyle) {
const list = new (external_wp_tokenList_default())(className);
if (activeStyle) {
list.remove('is-style-' + activeStyle.name);
}
list.add('is-style-' + newStyle.name);
return list.value;
}
/**
* Returns a collection of styles that can be represented on the frontend.
* The function checks a style collection for a default style. If none is found, it adds one to
* act as a fallback for when there is no active style applied to a block. The default item also serves
* as a switch on the frontend to deactivate non-default styles.
*
* @param {Array} styles Block styles.
*
* @return {Array<Object?>} The style collection.
*/
function getRenderedStyles(styles) {
if (!styles || styles.length === 0) {
return [];
}
return getDefaultStyle(styles) ? styles : [{
name: 'default',
label: (0,external_wp_i18n_namespaceObject._x)('Default', 'block style'),
isDefault: true
}, ...styles];
}
/**
* Returns a style object from a collection of styles where that style object is the default block style.
*
* @param {Array} styles Block styles.
*
* @return {Object?} The default style object, if found.
*/
function getDefaultStyle(styles) {
return styles?.find(style => style.isDefault);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-styles/use-styles-for-block.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
*
* @param {WPBlock} block Block object.
* @param {WPBlockType} type Block type settings.
* @return {WPBlock} A generic block ready for styles preview.
*/
function useGenericPreviewBlock(block, type) {
return (0,external_wp_element_namespaceObject.useMemo)(() => {
const example = type?.example;
const blockName = type?.name;
if (example && blockName) {
return (0,external_wp_blocks_namespaceObject.getBlockFromExample)(blockName, {
attributes: example.attributes,
innerBlocks: example.innerBlocks
});
}
if (block) {
return (0,external_wp_blocks_namespaceObject.cloneBlock)(block);
}
}, [type?.example ? block?.name : block, type]);
}
/**
* @typedef useStylesForBlocksArguments
* @property {string} clientId Block client ID.
* @property {() => void} onSwitch Block style switch callback function.
*/
/**
*
* @param {useStylesForBlocksArguments} useStylesForBlocks arguments.
* @return {Object} Results of the select methods.
*/
function useStylesForBlocks({
clientId,
onSwitch
}) {
const selector = select => {
const {
getBlock
} = select(store);
const block = getBlock(clientId);
if (!block) {
return {};
}
const blockType = (0,external_wp_blocks_namespaceObject.getBlockType)(block.name);
const {
getBlockStyles
} = select(external_wp_blocks_namespaceObject.store);
return {
block,
blockType,
styles: getBlockStyles(block.name),
className: block.attributes.className || ''
};
};
const {
styles,
block,
blockType,
className
} = (0,external_wp_data_namespaceObject.useSelect)(selector, [clientId]);
const {
updateBlockAttributes
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const stylesToRender = getRenderedStyles(styles);
const activeStyle = getActiveStyle(stylesToRender, className);
const genericPreviewBlock = useGenericPreviewBlock(block, blockType);
const onSelect = style => {
const styleClassName = replaceActiveStyle(className, activeStyle, style);
updateBlockAttributes(clientId, {
className: styleClassName
});
onSwitch();
};
return {
onSelect,
stylesToRender,
activeStyle,
genericPreviewBlock,
className
};
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-styles/menu-items.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const menu_items_noop = () => {};
function BlockStylesMenuItems({
clientId,
onSwitch = menu_items_noop
}) {
const {
onSelect,
stylesToRender,
activeStyle
} = useStylesForBlocks({
clientId,
onSwitch
});
if (!stylesToRender || stylesToRender.length === 0) {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: stylesToRender.map(style => {
const menuItemText = style.label || style.name;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
icon: activeStyle.name === style.name ? library_check : null,
onClick: () => onSelect(style),
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalText, {
as: "span",
limit: 18,
ellipsizeMode: "tail",
truncate: true,
children: menuItemText
})
}, style.name);
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-switcher/block-styles-menu.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockStylesMenu({
hoveredBlock,
onSwitch
}) {
const {
clientId
} = hoveredBlock;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuGroup, {
label: (0,external_wp_i18n_namespaceObject.__)('Styles'),
className: "block-editor-block-switcher__styles__menugroup",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockStylesMenuItems, {
clientId: clientId,
onSwitch: onSwitch
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-switcher/utils.js
/**
* WordPress dependencies
*/
/**
* Try to find a matching block by a block's name in a provided
* block. We recurse through InnerBlocks and return the reference
* of the matched block (it could be an InnerBlock).
* If no match is found return nothing.
*
* @param {WPBlock} block The block to try to find a match.
* @param {string} selectedBlockName The block's name to use for matching condition.
* @param {Set} consumedBlocks A set holding the previously matched/consumed blocks.
*
* @return {WPBlock | undefined} The matched block if found or nothing(`undefined`).
*/
const getMatchingBlockByName = (block, selectedBlockName, consumedBlocks = new Set()) => {
const {
clientId,
name,
innerBlocks = []
} = block;
// Check if block has been consumed already.
if (consumedBlocks.has(clientId)) {
return;
}
if (name === selectedBlockName) {
return block;
}
// Try to find a matching block from InnerBlocks recursively.
for (const innerBlock of innerBlocks) {
const match = getMatchingBlockByName(innerBlock, selectedBlockName, consumedBlocks);
if (match) {
return match;
}
}
};
/**
* Find and return the block attributes to retain through
* the transformation, based on Block Type's `role:content`
* attributes. If no `role:content` attributes exist,
* return selected block's attributes.
*
* @param {string} name Block type's namespaced name.
* @param {Object} attributes Selected block's attributes.
* @return {Object} The block's attributes to retain.
*/
const getRetainedBlockAttributes = (name, attributes) => {
const contentAttributes = (0,external_wp_blocks_namespaceObject.getBlockAttributesNamesByRole)(name, 'content');
if (!contentAttributes?.length) {
return attributes;
}
return contentAttributes.reduce((_accumulator, attribute) => {
if (attributes[attribute]) {
_accumulator[attribute] = attributes[attribute];
}
return _accumulator;
}, {});
};
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-switcher/use-transformed-patterns.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Mutate the matched block's attributes by getting
* which block type's attributes to retain and prioritize
* them in the merging of the attributes.
*
* @param {WPBlock} match The matched block.
* @param {WPBlock} selectedBlock The selected block.
* @return {void}
*/
const transformMatchingBlock = (match, selectedBlock) => {
// Get the block attributes to retain through the transformation.
const retainedBlockAttributes = getRetainedBlockAttributes(selectedBlock.name, selectedBlock.attributes);
match.attributes = {
...match.attributes,
...retainedBlockAttributes
};
};
/**
* By providing the selected blocks and pattern's blocks
* find the matching blocks, transform them and return them.
* If not all selected blocks are matched, return nothing.
*
* @param {WPBlock[]} selectedBlocks The selected blocks.
* @param {WPBlock[]} patternBlocks The pattern's blocks.
* @return {WPBlock[]|void} The transformed pattern's blocks or undefined if not all selected blocks have been matched.
*/
const getPatternTransformedBlocks = (selectedBlocks, patternBlocks) => {
// Clone Pattern's blocks to produce new clientIds and be able to mutate the matches.
const _patternBlocks = patternBlocks.map(block => (0,external_wp_blocks_namespaceObject.cloneBlock)(block));
/**
* Keep track of the consumed pattern blocks.
* This is needed because we loop the selected blocks
* and for example we may have selected two paragraphs and
* the pattern's blocks could have more `paragraphs`.
*/
const consumedBlocks = new Set();
for (const selectedBlock of selectedBlocks) {
let isMatch = false;
for (const patternBlock of _patternBlocks) {
const match = getMatchingBlockByName(patternBlock, selectedBlock.name, consumedBlocks);
if (!match) {
continue;
}
isMatch = true;
consumedBlocks.add(match.clientId);
// We update (mutate) the matching pattern block.
transformMatchingBlock(match, selectedBlock);
// No need to loop through other pattern's blocks.
break;
}
// Bail eary if a selected block has not been matched.
if (!isMatch) {
return;
}
}
return _patternBlocks;
};
/**
* @typedef {WPBlockPattern & {transformedBlocks: WPBlock[]}} TransformedBlockPattern
*/
/**
* Custom hook that accepts patterns from state and the selected
* blocks and tries to match these with the pattern's blocks.
* If all selected blocks are matched with a Pattern's block,
* we transform them by retaining block's attributes with `role:content`.
* The transformed pattern's blocks are set to a new pattern
* property `transformedBlocks`.
*
* @param {WPBlockPattern[]} patterns Patterns from state.
* @param {WPBlock[]} selectedBlocks The currently selected blocks.
* @return {TransformedBlockPattern[]} Returns the eligible matched patterns with all the selected blocks.
*/
const useTransformedPatterns = (patterns, selectedBlocks) => {
return (0,external_wp_element_namespaceObject.useMemo)(() => patterns.reduce((accumulator, _pattern) => {
const transformedBlocks = getPatternTransformedBlocks(selectedBlocks, _pattern.blocks);
if (transformedBlocks) {
accumulator.push({
..._pattern,
transformedBlocks
});
}
return accumulator;
}, []), [patterns, selectedBlocks]);
};
/* harmony default export */ const use_transformed_patterns = (useTransformedPatterns);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-switcher/pattern-transformations-menu.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function PatternTransformationsMenu({
blocks,
patterns: statePatterns,
onSelect
}) {
const [showTransforms, setShowTransforms] = (0,external_wp_element_namespaceObject.useState)(false);
const patterns = use_transformed_patterns(statePatterns, blocks);
if (!patterns.length) {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.MenuGroup, {
className: "block-editor-block-switcher__pattern__transforms__menugroup",
children: [showTransforms && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PreviewPatternsPopover, {
patterns: patterns,
onSelect: onSelect
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
onClick: event => {
event.preventDefault();
setShowTransforms(!showTransforms);
},
icon: chevron_right,
children: (0,external_wp_i18n_namespaceObject.__)('Patterns')
})]
});
}
function PreviewPatternsPopover({
patterns,
onSelect
}) {
const isMobile = (0,external_wp_compose_namespaceObject.useViewportMatch)('medium', '<');
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-block-switcher__popover-preview-container",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Popover, {
className: "block-editor-block-switcher__popover-preview",
placement: isMobile ? 'bottom' : 'right-start',
offset: 16,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-block-switcher__preview is-pattern-list-preview",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(pattern_transformations_menu_BlockPatternsList, {
patterns: patterns,
onSelect: onSelect
})
})
})
});
}
function pattern_transformations_menu_BlockPatternsList({
patterns,
onSelect
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Composite, {
role: "listbox",
className: "block-editor-block-switcher__preview-patterns-container",
"aria-label": (0,external_wp_i18n_namespaceObject.__)('Patterns list'),
children: patterns.map(pattern => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(pattern_transformations_menu_BlockPattern, {
pattern: pattern,
onSelect: onSelect
}, pattern.name))
});
}
function pattern_transformations_menu_BlockPattern({
pattern,
onSelect
}) {
// TODO check pattern/preview width...
const baseClassName = 'block-editor-block-switcher__preview-patterns-container';
const descriptionId = (0,external_wp_compose_namespaceObject.useInstanceId)(pattern_transformations_menu_BlockPattern, `${baseClassName}-list__item-description`);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: `${baseClassName}-list__list-item`,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.Composite.Item, {
render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
role: "option",
"aria-label": pattern.title,
"aria-describedby": pattern.description ? descriptionId : undefined,
className: `${baseClassName}-list__item`
}),
onClick: () => onSelect(pattern.transformedBlocks),
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_preview, {
blocks: pattern.transformedBlocks,
viewportWidth: pattern.viewportWidth || 500
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: `${baseClassName}-list__item-title`,
children: pattern.title
})]
}), !!pattern.description && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.VisuallyHidden, {
id: descriptionId,
children: pattern.description
})]
});
}
/* harmony default export */ const pattern_transformations_menu = (PatternTransformationsMenu);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-switcher/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockSwitcherDropdownMenuContents({
onClose,
clientIds,
hasBlockStyles,
canRemove,
isUsingBindings
}) {
const {
replaceBlocks,
multiSelect,
updateBlockAttributes
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const {
possibleBlockTransformations,
patterns,
blocks
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlocksByClientId,
getBlockRootClientId,
getBlockTransformItems,
__experimentalGetPatternTransformItems
} = select(store);
const rootClientId = getBlockRootClientId(Array.isArray(clientIds) ? clientIds[0] : clientIds);
const _blocks = getBlocksByClientId(clientIds);
return {
blocks: _blocks,
possibleBlockTransformations: getBlockTransformItems(_blocks, rootClientId),
patterns: __experimentalGetPatternTransformItems(_blocks, rootClientId)
};
}, [clientIds]);
const blockVariationTransformations = useBlockVariationTransforms({
clientIds,
blocks
});
function selectForMultipleBlocks(insertedBlocks) {
if (insertedBlocks.length > 1) {
multiSelect(insertedBlocks[0].clientId, insertedBlocks[insertedBlocks.length - 1].clientId);
}
}
// Simple block tranformation based on the `Block Transforms` API.
function onBlockTransform(name) {
const newBlocks = (0,external_wp_blocks_namespaceObject.switchToBlockType)(blocks, name);
replaceBlocks(clientIds, newBlocks);
selectForMultipleBlocks(newBlocks);
}
function onBlockVariationTransform(name) {
updateBlockAttributes(blocks[0].clientId, {
...blockVariationTransformations.find(({
name: variationName
}) => variationName === name).attributes
});
}
// Pattern transformation through the `Patterns` API.
function onPatternTransform(transformedBlocks) {
replaceBlocks(clientIds, transformedBlocks);
selectForMultipleBlocks(transformedBlocks);
}
/**
* The `isTemplate` check is a stopgap solution here.
* Ideally, the Transforms API should handle this
* by allowing to exclude blocks from wildcard transformations.
*/
const isSingleBlock = blocks.length === 1;
const isTemplate = isSingleBlock && (0,external_wp_blocks_namespaceObject.isTemplatePart)(blocks[0]);
const hasPossibleBlockTransformations = !!possibleBlockTransformations.length && canRemove && !isTemplate;
const hasPossibleBlockVariationTransformations = !!blockVariationTransformations?.length;
const hasPatternTransformation = !!patterns?.length && canRemove;
const hasBlockOrBlockVariationTransforms = hasPossibleBlockTransformations || hasPossibleBlockVariationTransformations;
const hasContents = hasBlockStyles || hasBlockOrBlockVariationTransforms || hasPatternTransformation;
if (!hasContents) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("p", {
className: "block-editor-block-switcher__no-transforms",
children: (0,external_wp_i18n_namespaceObject.__)('No transforms.')
});
}
const connectedBlockDescription = isSingleBlock ? (0,external_wp_i18n_namespaceObject._x)('This block is connected.', 'block toolbar button label and description') : (0,external_wp_i18n_namespaceObject._x)('These blocks are connected.', 'block toolbar button label and description');
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-block-switcher__container",
children: [hasPatternTransformation && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(pattern_transformations_menu, {
blocks: blocks,
patterns: patterns,
onSelect: transformedBlocks => {
onPatternTransform(transformedBlocks);
onClose();
}
}), hasBlockOrBlockVariationTransforms && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_transformations_menu, {
className: "block-editor-block-switcher__transforms__menugroup",
possibleBlockTransformations: possibleBlockTransformations,
possibleBlockVariationTransformations: blockVariationTransformations,
blocks: blocks,
onSelect: name => {
onBlockTransform(name);
onClose();
},
onSelectVariation: name => {
onBlockVariationTransform(name);
onClose();
}
}), hasBlockStyles && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockStylesMenu, {
hoveredBlock: blocks[0],
onSwitch: onClose
}), isUsingBindings && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuGroup, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalText, {
className: "block-editor-block-switcher__binding-indicator",
children: connectedBlockDescription
})
})]
});
}
const BlockIndicator = ({
icon,
showTitle,
blockTitle
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_icon, {
className: "block-editor-block-switcher__toggle",
icon: icon,
showColors: true
}), showTitle && blockTitle && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
className: "block-editor-block-switcher__toggle-text",
children: blockTitle
})]
});
const BlockSwitcher = ({
clientIds,
disabled,
isUsingBindings
}) => {
const {
hasContentOnlyLocking,
canRemove,
hasBlockStyles,
icon,
invalidBlocks,
isReusable,
isTemplate
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getTemplateLock,
getBlocksByClientId,
getBlockAttributes,
canRemoveBlocks
} = select(store);
const {
getBlockStyles,
getBlockType,
getActiveBlockVariation
} = select(external_wp_blocks_namespaceObject.store);
const _blocks = getBlocksByClientId(clientIds);
if (!_blocks.length || _blocks.some(block => !block)) {
return {
invalidBlocks: true
};
}
const [{
name: firstBlockName
}] = _blocks;
const _isSingleBlockSelected = _blocks.length === 1;
const blockType = getBlockType(firstBlockName);
let _icon;
let _hasTemplateLock;
if (_isSingleBlockSelected) {
const match = getActiveBlockVariation(firstBlockName, getBlockAttributes(clientIds[0]));
// Take into account active block variations.
_icon = match?.icon || blockType.icon;
_hasTemplateLock = getTemplateLock(clientIds[0]) === 'contentOnly';
} else {
const isSelectionOfSameType = new Set(_blocks.map(({
name
}) => name)).size === 1;
_hasTemplateLock = clientIds.some(id => getTemplateLock(id) === 'contentOnly');
// When selection consists of blocks of multiple types, display an
// appropriate icon to communicate the non-uniformity.
_icon = isSelectionOfSameType ? blockType.icon : library_copy;
}
return {
canRemove: canRemoveBlocks(clientIds),
hasBlockStyles: _isSingleBlockSelected && !!getBlockStyles(firstBlockName)?.length,
icon: _icon,
isReusable: _isSingleBlockSelected && (0,external_wp_blocks_namespaceObject.isReusableBlock)(_blocks[0]),
isTemplate: _isSingleBlockSelected && (0,external_wp_blocks_namespaceObject.isTemplatePart)(_blocks[0]),
hasContentOnlyLocking: _hasTemplateLock
};
}, [clientIds]);
const blockTitle = useBlockDisplayTitle({
clientId: clientIds?.[0],
maximumLength: 35
});
if (invalidBlocks) {
return null;
}
const isSingleBlock = clientIds.length === 1;
const blockSwitcherLabel = isSingleBlock ? blockTitle : (0,external_wp_i18n_namespaceObject.__)('Multiple blocks selected');
const hideDropdown = disabled || !hasBlockStyles && !canRemove || hasContentOnlyLocking;
if (hideDropdown) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarGroup, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarButton, {
disabled: true,
className: "block-editor-block-switcher__no-switcher-icon",
title: blockSwitcherLabel,
icon: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockIndicator, {
icon: icon,
showTitle: isReusable || isTemplate,
blockTitle: blockTitle
})
})
});
}
const blockSwitcherDescription = isSingleBlock ? (0,external_wp_i18n_namespaceObject.__)('Change block type or style') : (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: number of blocks. */
(0,external_wp_i18n_namespaceObject._n)('Change type of %d block', 'Change type of %d blocks', clientIds.length), clientIds.length);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarGroup, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarItem, {
children: toggleProps => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.DropdownMenu, {
className: "block-editor-block-switcher",
label: blockSwitcherLabel,
popoverProps: {
placement: 'bottom-start',
className: 'block-editor-block-switcher__popover'
},
icon: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockIndicator, {
icon: icon,
showTitle: isReusable || isTemplate,
blockTitle: blockTitle
}),
toggleProps: {
description: blockSwitcherDescription,
...toggleProps
},
menuProps: {
orientation: 'both'
},
children: ({
onClose
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockSwitcherDropdownMenuContents, {
onClose: onClose,
clientIds: clientIds,
hasBlockStyles: hasBlockStyles,
canRemove: canRemove,
isUsingBindings: isUsingBindings
})
})
})
});
};
/* harmony default export */ const block_switcher = (BlockSwitcher);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-toolbar/block-toolbar-last-item.js
/**
* WordPress dependencies
*/
const {
Fill: __unstableBlockToolbarLastItem,
Slot: block_toolbar_last_item_Slot
} = (0,external_wp_components_namespaceObject.createSlotFill)('__unstableBlockToolbarLastItem');
__unstableBlockToolbarLastItem.Slot = block_toolbar_last_item_Slot;
/* harmony default export */ const block_toolbar_last_item = (__unstableBlockToolbarLastItem);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/supports.js
/**
* WordPress dependencies
*/
const ALIGN_SUPPORT_KEY = 'align';
const ALIGN_WIDE_SUPPORT_KEY = 'alignWide';
const supports_BORDER_SUPPORT_KEY = '__experimentalBorder';
const supports_COLOR_SUPPORT_KEY = 'color';
const CUSTOM_CLASS_NAME_SUPPORT_KEY = 'customClassName';
const supports_FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
const supports_FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';
const supports_LINE_HEIGHT_SUPPORT_KEY = 'typography.lineHeight';
/**
* Key within block settings' support array indicating support for font style.
*/
const supports_FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
/**
* Key within block settings' support array indicating support for font weight.
*/
const supports_FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
/**
* Key within block settings' supports array indicating support for text
* align e.g. settings found in `block.json`.
*/
const supports_TEXT_ALIGN_SUPPORT_KEY = 'typography.textAlign';
/**
* Key within block settings' supports array indicating support for text
* columns e.g. settings found in `block.json`.
*/
const supports_TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';
/**
* Key within block settings' supports array indicating support for text
* decorations e.g. settings found in `block.json`.
*/
const supports_TEXT_DECORATION_SUPPORT_KEY = 'typography.__experimentalTextDecoration';
/**
* Key within block settings' supports array indicating support for writing mode
* e.g. settings found in `block.json`.
*/
const supports_WRITING_MODE_SUPPORT_KEY = 'typography.__experimentalWritingMode';
/**
* Key within block settings' supports array indicating support for text
* transforms e.g. settings found in `block.json`.
*/
const supports_TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform';
/**
* Key within block settings' supports array indicating support for letter-spacing
* e.g. settings found in `block.json`.
*/
const supports_LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing';
const LAYOUT_SUPPORT_KEY = 'layout';
const supports_TYPOGRAPHY_SUPPORT_KEYS = [supports_LINE_HEIGHT_SUPPORT_KEY, supports_FONT_SIZE_SUPPORT_KEY, supports_FONT_STYLE_SUPPORT_KEY, supports_FONT_WEIGHT_SUPPORT_KEY, supports_FONT_FAMILY_SUPPORT_KEY, supports_TEXT_ALIGN_SUPPORT_KEY, supports_TEXT_COLUMNS_SUPPORT_KEY, supports_TEXT_DECORATION_SUPPORT_KEY, supports_TEXT_TRANSFORM_SUPPORT_KEY, supports_WRITING_MODE_SUPPORT_KEY, supports_LETTER_SPACING_SUPPORT_KEY];
const EFFECTS_SUPPORT_KEYS = ['shadow'];
const supports_SPACING_SUPPORT_KEY = 'spacing';
const supports_styleSupportKeys = [...EFFECTS_SUPPORT_KEYS, ...supports_TYPOGRAPHY_SUPPORT_KEYS, supports_BORDER_SUPPORT_KEY, supports_COLOR_SUPPORT_KEY, supports_SPACING_SUPPORT_KEY];
/**
* Returns true if the block defines support for align.
*
* @param {string|Object} nameOrType Block name or type object.
* @return {boolean} Whether the block supports the feature.
*/
const hasAlignSupport = nameOrType => (0,external_wp_blocks_namespaceObject.hasBlockSupport)(nameOrType, ALIGN_SUPPORT_KEY);
/**
* Returns the block support value for align, if defined.
*
* @param {string|Object} nameOrType Block name or type object.
* @return {unknown} The block support value.
*/
const getAlignSupport = nameOrType => getBlockSupport(nameOrType, ALIGN_SUPPORT_KEY);
/**
* Returns true if the block defines support for align wide.
*
* @param {string|Object} nameOrType Block name or type object.
* @return {boolean} Whether the block supports the feature.
*/
const hasAlignWideSupport = nameOrType => hasBlockSupport(nameOrType, ALIGN_WIDE_SUPPORT_KEY);
/**
* Returns the block support value for align wide, if defined.
*
* @param {string|Object} nameOrType Block name or type object.
* @return {unknown} The block support value.
*/
const getAlignWideSupport = nameOrType => getBlockSupport(nameOrType, ALIGN_WIDE_SUPPORT_KEY);
/**
* Determine whether there is block support for border properties.
*
* @param {string|Object} nameOrType Block name or type object.
* @param {string} feature Border feature to check support for.
*
* @return {boolean} Whether there is support.
*/
function supports_hasBorderSupport(nameOrType, feature = 'any') {
if (external_wp_element_namespaceObject.Platform.OS !== 'web') {
return false;
}
const support = (0,external_wp_blocks_namespaceObject.getBlockSupport)(nameOrType, supports_BORDER_SUPPORT_KEY);
if (support === true) {
return true;
}
if (feature === 'any') {
return !!(support?.color || support?.radius || support?.width || support?.style);
}
return !!support?.[feature];
}
/**
* Get block support for border properties.
*
* @param {string|Object} nameOrType Block name or type object.
* @param {string} feature Border feature to get.
*
* @return {unknown} The block support.
*/
const getBorderSupport = (nameOrType, feature) => getBlockSupport(nameOrType, [supports_BORDER_SUPPORT_KEY, feature]);
/**
* Returns true if the block defines support for color.
*
* @param {string|Object} nameOrType Block name or type object.
* @return {boolean} Whether the block supports the feature.
*/
const supports_hasColorSupport = nameOrType => {
const colorSupport = getBlockSupport(nameOrType, supports_COLOR_SUPPORT_KEY);
return colorSupport && (colorSupport.link === true || colorSupport.gradient === true || colorSupport.background !== false || colorSupport.text !== false);
};
/**
* Returns true if the block defines support for link color.
*
* @param {string|Object} nameOrType Block name or type object.
* @return {boolean} Whether the block supports the feature.
*/
const supports_hasLinkColorSupport = nameOrType => {
if (Platform.OS !== 'web') {
return false;
}
const colorSupport = getBlockSupport(nameOrType, supports_COLOR_SUPPORT_KEY);
return colorSupport !== null && typeof colorSupport === 'object' && !!colorSupport.link;
};
/**
* Returns true if the block defines support for gradient color.
*
* @param {string|Object} nameOrType Block name or type object.
* @return {boolean} Whether the block supports the feature.
*/
const supports_hasGradientSupport = nameOrType => {
const colorSupport = (0,external_wp_blocks_namespaceObject.getBlockSupport)(nameOrType, supports_COLOR_SUPPORT_KEY);
return colorSupport !== null && typeof colorSupport === 'object' && !!colorSupport.gradients;
};
/**
* Returns true if the block defines support for background color.
*
* @param {string|Object} nameOrType Block name or type object.
* @return {boolean} Whether the block supports the feature.
*/
const supports_hasBackgroundColorSupport = nameOrType => {
const colorSupport = (0,external_wp_blocks_namespaceObject.getBlockSupport)(nameOrType, supports_COLOR_SUPPORT_KEY);
return colorSupport && colorSupport.background !== false;
};
/**
* Returns true if the block defines support for text-align.
*
* @param {string|Object} nameOrType Block name or type object.
* @return {boolean} Whether the block supports the feature.
*/
const hasTextAlignSupport = nameOrType => (0,external_wp_blocks_namespaceObject.hasBlockSupport)(nameOrType, supports_TEXT_ALIGN_SUPPORT_KEY);
/**
* Returns the block support value for text-align, if defined.
*
* @param {string|Object} nameOrType Block name or type object.
* @return {unknown} The block support value.
*/
const getTextAlignSupport = nameOrType => getBlockSupport(nameOrType, supports_TEXT_ALIGN_SUPPORT_KEY);
/**
* Returns true if the block defines support for background color.
*
* @param {string|Object} nameOrType Block name or type object.
* @return {boolean} Whether the block supports the feature.
*/
const supports_hasTextColorSupport = nameOrType => {
const colorSupport = (0,external_wp_blocks_namespaceObject.getBlockSupport)(nameOrType, supports_COLOR_SUPPORT_KEY);
return colorSupport && colorSupport.text !== false;
};
/**
* Get block support for color properties.
*
* @param {string|Object} nameOrType Block name or type object.
* @param {string} feature Color feature to get.
*
* @return {unknown} The block support.
*/
const getColorSupport = (nameOrType, feature) => getBlockSupport(nameOrType, [supports_COLOR_SUPPORT_KEY, feature]);
/**
* Returns true if the block defines support for custom class name.
*
* @param {string|Object} nameOrType Block name or type object.
* @return {boolean} Whether the block supports the feature.
*/
const hasCustomClassNameSupport = nameOrType => (0,external_wp_blocks_namespaceObject.hasBlockSupport)(nameOrType, CUSTOM_CLASS_NAME_SUPPORT_KEY, true);
/**
* Returns the block support value for custom class name, if defined.
*
* @param {string|Object} nameOrType Block name or type object.
* @return {unknown} The block support value.
*/
const getCustomClassNameSupport = nameOrType => getBlockSupport(nameOrType, CUSTOM_CLASS_NAME_SUPPORT_KEY, true);
/**
* Returns true if the block defines support for font family.
*
* @param {string|Object} nameOrType Block name or type object.
* @return {boolean} Whether the block supports the feature.
*/
const hasFontFamilySupport = nameOrType => (0,external_wp_blocks_namespaceObject.hasBlockSupport)(nameOrType, supports_FONT_FAMILY_SUPPORT_KEY);
/**
* Returns the block support value for font family, if defined.
*
* @param {string|Object} nameOrType Block name or type object.
* @return {unknown} The block support value.
*/
const getFontFamilySupport = nameOrType => getBlockSupport(nameOrType, supports_FONT_FAMILY_SUPPORT_KEY);
/**
* Returns true if the block defines support for font size.
*
* @param {string|Object} nameOrType Block name or type object.
* @return {boolean} Whether the block supports the feature.
*/
const hasFontSizeSupport = nameOrType => (0,external_wp_blocks_namespaceObject.hasBlockSupport)(nameOrType, supports_FONT_SIZE_SUPPORT_KEY);
/**
* Returns the block support value for font size, if defined.
*
* @param {string|Object} nameOrType Block name or type object.
* @return {unknown} The block support value.
*/
const getFontSizeSupport = nameOrType => getBlockSupport(nameOrType, supports_FONT_SIZE_SUPPORT_KEY);
/**
* Returns true if the block defines support for layout.
*
* @param {string|Object} nameOrType Block name or type object.
* @return {boolean} Whether the block supports the feature.
*/
const hasLayoutSupport = nameOrType => (0,external_wp_blocks_namespaceObject.hasBlockSupport)(nameOrType, LAYOUT_SUPPORT_KEY);
/**
* Returns the block support value for layout, if defined.
*
* @param {string|Object} nameOrType Block name or type object.
* @return {unknown} The block support value.
*/
const getLayoutSupport = nameOrType => getBlockSupport(nameOrType, LAYOUT_SUPPORT_KEY);
/**
* Returns true if the block defines support for style.
*
* @param {string|Object} nameOrType Block name or type object.
* @return {boolean} Whether the block supports the feature.
*/
const supports_hasStyleSupport = nameOrType => supports_styleSupportKeys.some(key => (0,external_wp_blocks_namespaceObject.hasBlockSupport)(nameOrType, key));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/use-paste-styles/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Determine if the copied text looks like serialized blocks or not.
* Since plain text will always get parsed into a freeform block,
* we check that if the parsed blocks is anything other than that.
*
* @param {string} text The copied text.
* @return {boolean} True if the text looks like serialized blocks, false otherwise.
*/
function hasSerializedBlocks(text) {
try {
const blocks = (0,external_wp_blocks_namespaceObject.parse)(text, {
__unstableSkipMigrationLogs: true,
__unstableSkipAutop: true
});
if (blocks.length === 1 && blocks[0].name === 'core/freeform') {
// It's likely that the text is just plain text and not serialized blocks.
return false;
}
return true;
} catch (err) {
// Parsing error, the text is not serialized blocks.
// (Even though that it technically won't happen)
return false;
}
}
/**
* Style attributes are attributes being added in `block-editor/src/hooks/*`.
* (Except for some unrelated to style like `anchor` or `settings`.)
* They generally represent the default block supports.
*/
const STYLE_ATTRIBUTES = {
align: hasAlignSupport,
borderColor: nameOrType => supports_hasBorderSupport(nameOrType, 'color'),
backgroundColor: supports_hasBackgroundColorSupport,
textAlign: hasTextAlignSupport,
textColor: supports_hasTextColorSupport,
gradient: supports_hasGradientSupport,
className: hasCustomClassNameSupport,
fontFamily: hasFontFamilySupport,
fontSize: hasFontSizeSupport,
layout: hasLayoutSupport,
style: supports_hasStyleSupport
};
/**
* Get the "style attributes" from a given block to a target block.
*
* @param {WPBlock} sourceBlock The source block.
* @param {WPBlock} targetBlock The target block.
* @return {Object} the filtered attributes object.
*/
function getStyleAttributes(sourceBlock, targetBlock) {
return Object.entries(STYLE_ATTRIBUTES).reduce((attributes, [attributeKey, hasSupport]) => {
// Only apply the attribute if both blocks support it.
if (hasSupport(sourceBlock.name) && hasSupport(targetBlock.name)) {
// Override attributes that are not present in the block to their defaults.
attributes[attributeKey] = sourceBlock.attributes[attributeKey];
}
return attributes;
}, {});
}
/**
* Update the target blocks with style attributes recursively.
*
* @param {WPBlock[]} targetBlocks The target blocks to be updated.
* @param {WPBlock[]} sourceBlocks The source blocks to get th style attributes from.
* @param {Function} updateBlockAttributes The function to update the attributes.
*/
function recursivelyUpdateBlockAttributes(targetBlocks, sourceBlocks, updateBlockAttributes) {
for (let index = 0; index < Math.min(sourceBlocks.length, targetBlocks.length); index += 1) {
updateBlockAttributes(targetBlocks[index].clientId, getStyleAttributes(sourceBlocks[index], targetBlocks[index]));
recursivelyUpdateBlockAttributes(targetBlocks[index].innerBlocks, sourceBlocks[index].innerBlocks, updateBlockAttributes);
}
}
/**
* A hook to return a pasteStyles event function for handling pasting styles to blocks.
*
* @return {Function} A function to update the styles to the blocks.
*/
function usePasteStyles() {
const registry = (0,external_wp_data_namespaceObject.useRegistry)();
const {
updateBlockAttributes
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const {
createSuccessNotice,
createWarningNotice,
createErrorNotice
} = (0,external_wp_data_namespaceObject.useDispatch)(external_wp_notices_namespaceObject.store);
return (0,external_wp_element_namespaceObject.useCallback)(async targetBlocks => {
let html = '';
try {
// `http:` sites won't have the clipboard property on navigator.
// (with the exception of localhost.)
if (!window.navigator.clipboard) {
createErrorNotice((0,external_wp_i18n_namespaceObject.__)('Unable to paste styles. This feature is only available on secure (https) sites in supporting browsers.'), {
type: 'snackbar'
});
return;
}
html = await window.navigator.clipboard.readText();
} catch (error) {
// Possibly the permission is denied.
createErrorNotice((0,external_wp_i18n_namespaceObject.__)('Unable to paste styles. Please allow browser clipboard permissions before continuing.'), {
type: 'snackbar'
});
return;
}
// Abort if the copied text is empty or doesn't look like serialized blocks.
if (!html || !hasSerializedBlocks(html)) {
createWarningNotice((0,external_wp_i18n_namespaceObject.__)("Unable to paste styles. Block styles couldn't be found within the copied content."), {
type: 'snackbar'
});
return;
}
const copiedBlocks = (0,external_wp_blocks_namespaceObject.parse)(html);
if (copiedBlocks.length === 1) {
// Apply styles of the block to all the target blocks.
registry.batch(() => {
recursivelyUpdateBlockAttributes(targetBlocks, targetBlocks.map(() => copiedBlocks[0]), updateBlockAttributes);
});
} else {
registry.batch(() => {
recursivelyUpdateBlockAttributes(targetBlocks, copiedBlocks, updateBlockAttributes);
});
}
if (targetBlocks.length === 1) {
const title = (0,external_wp_blocks_namespaceObject.getBlockType)(targetBlocks[0].name)?.title;
createSuccessNotice((0,external_wp_i18n_namespaceObject.sprintf)(
// Translators: Name of the block being pasted, e.g. "Paragraph".
(0,external_wp_i18n_namespaceObject.__)('Pasted styles to %s.'), title), {
type: 'snackbar'
});
} else {
createSuccessNotice((0,external_wp_i18n_namespaceObject.sprintf)(
// Translators: The number of the blocks.
(0,external_wp_i18n_namespaceObject.__)('Pasted styles to %d blocks.'), targetBlocks.length), {
type: 'snackbar'
});
}
}, [registry.batch, updateBlockAttributes, createSuccessNotice, createWarningNotice, createErrorNotice]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-actions/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockActions({
clientIds,
children,
__experimentalUpdateSelection: updateSelection
}) {
const {
getDefaultBlockName,
getGroupingBlockName
} = (0,external_wp_data_namespaceObject.useSelect)(external_wp_blocks_namespaceObject.store);
const selected = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
canInsertBlockType,
getBlockRootClientId,
getBlocksByClientId,
getDirectInsertBlock,
canMoveBlocks,
canRemoveBlocks
} = select(store);
const blocks = getBlocksByClientId(clientIds);
const rootClientId = getBlockRootClientId(clientIds[0]);
const canInsertDefaultBlock = canInsertBlockType(getDefaultBlockName(), rootClientId);
const directInsertBlock = rootClientId ? getDirectInsertBlock(rootClientId) : null;
return {
canMove: canMoveBlocks(clientIds),
canRemove: canRemoveBlocks(clientIds),
canInsertBlock: canInsertDefaultBlock || !!directInsertBlock,
canCopyStyles: blocks.every(block => {
return !!block && ((0,external_wp_blocks_namespaceObject.hasBlockSupport)(block.name, 'color') || (0,external_wp_blocks_namespaceObject.hasBlockSupport)(block.name, 'typography'));
}),
canDuplicate: blocks.every(block => {
return !!block && (0,external_wp_blocks_namespaceObject.hasBlockSupport)(block.name, 'multiple', true) && canInsertBlockType(block.name, rootClientId);
})
};
}, [clientIds, getDefaultBlockName]);
const {
getBlocksByClientId,
getBlocks
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
canMove,
canRemove,
canInsertBlock,
canCopyStyles,
canDuplicate
} = selected;
const {
removeBlocks,
replaceBlocks,
duplicateBlocks,
insertAfterBlock,
insertBeforeBlock,
flashBlock,
setBlockMovingClientId,
setNavigationMode,
selectBlock
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const notifyCopy = useNotifyCopy();
const pasteStyles = usePasteStyles();
return children({
canCopyStyles,
canDuplicate,
canInsertBlock,
canMove,
canRemove,
onDuplicate() {
return duplicateBlocks(clientIds, updateSelection);
},
onRemove() {
return removeBlocks(clientIds, updateSelection);
},
onInsertBefore() {
insertBeforeBlock(clientIds[0]);
},
onInsertAfter() {
insertAfterBlock(clientIds[clientIds.length - 1]);
},
onMoveTo() {
setNavigationMode(true);
selectBlock(clientIds[0]);
setBlockMovingClientId(clientIds[0]);
},
onGroup() {
if (!clientIds.length) {
return;
}
const groupingBlockName = getGroupingBlockName();
// Activate the `transform` on `core/group` which does the conversion.
const newBlocks = (0,external_wp_blocks_namespaceObject.switchToBlockType)(getBlocksByClientId(clientIds), groupingBlockName);
if (!newBlocks) {
return;
}
replaceBlocks(clientIds, newBlocks);
},
onUngroup() {
if (!clientIds.length) {
return;
}
const innerBlocks = getBlocks(clientIds[0]);
if (!innerBlocks.length) {
return;
}
replaceBlocks(clientIds, innerBlocks);
},
onCopy() {
if (clientIds.length === 1) {
flashBlock(clientIds[0]);
}
notifyCopy('copy', clientIds);
},
async onPasteStyles() {
await pasteStyles(getBlocksByClientId(clientIds));
}
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-settings-menu/block-html-convert-button.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockHTMLConvertButton({
clientId
}) {
const block = (0,external_wp_data_namespaceObject.useSelect)(select => select(store).getBlock(clientId), [clientId]);
const {
replaceBlocks
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
if (!block || block.name !== 'core/html') {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
onClick: () => replaceBlocks(clientId, (0,external_wp_blocks_namespaceObject.rawHandler)({
HTML: (0,external_wp_blocks_namespaceObject.getBlockContent)(block)
})),
children: (0,external_wp_i18n_namespaceObject.__)('Convert to Blocks')
});
}
/* harmony default export */ const block_html_convert_button = (BlockHTMLConvertButton);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-settings-menu/block-settings-menu-first-item.js
/**
* WordPress dependencies
*/
const {
Fill: __unstableBlockSettingsMenuFirstItem,
Slot: block_settings_menu_first_item_Slot
} = (0,external_wp_components_namespaceObject.createSlotFill)('__unstableBlockSettingsMenuFirstItem');
__unstableBlockSettingsMenuFirstItem.Slot = block_settings_menu_first_item_Slot;
/* harmony default export */ const block_settings_menu_first_item = (__unstableBlockSettingsMenuFirstItem);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/convert-to-group-buttons/use-convert-to-group-button-props.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Contains the properties `ConvertToGroupButton` component needs.
*
* @typedef {Object} ConvertToGroupButtonProps
* @property {string[]} clientIds An array of the selected client ids.
* @property {boolean} isGroupable Indicates if the selected blocks can be grouped.
* @property {boolean} isUngroupable Indicates if the selected blocks can be ungrouped.
* @property {WPBlock[]} blocksSelection An array of the selected blocks.
* @property {string} groupingBlockName The name of block used for handling grouping interactions.
*/
/**
* Returns the properties `ConvertToGroupButton` component needs to work properly.
* It is used in `BlockSettingsMenuControls` to know if `ConvertToGroupButton`
* should be rendered, to avoid ending up with an empty MenuGroup.
*
* @param {?string[]} selectedClientIds An optional array of clientIds to group. The selected blocks
* from the block editor store are used if this is not provided.
*
* @return {ConvertToGroupButtonProps} Returns the properties needed by `ConvertToGroupButton`.
*/
function useConvertToGroupButtonProps(selectedClientIds) {
return (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlocksByClientId,
getSelectedBlockClientIds,
isUngroupable,
isGroupable
} = select(store);
const {
getGroupingBlockName,
getBlockType
} = select(external_wp_blocks_namespaceObject.store);
const clientIds = selectedClientIds?.length ? selectedClientIds : getSelectedBlockClientIds();
const blocksSelection = getBlocksByClientId(clientIds);
const [firstSelectedBlock] = blocksSelection;
const _isUngroupable = clientIds.length === 1 && isUngroupable(clientIds[0]);
return {
clientIds,
isGroupable: isGroupable(clientIds),
isUngroupable: _isUngroupable,
blocksSelection,
groupingBlockName: getGroupingBlockName(),
onUngroup: _isUngroupable && getBlockType(firstSelectedBlock.name)?.transforms?.ungroup
};
}, [selectedClientIds]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/convert-to-group-buttons/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function ConvertToGroupButton({
clientIds,
isGroupable,
isUngroupable,
onUngroup,
blocksSelection,
groupingBlockName,
onClose = () => {}
}) {
const {
getSelectedBlockClientIds
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
replaceBlocks
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const onConvertToGroup = () => {
// Activate the `transform` on the Grouping Block which does the conversion.
const newBlocks = (0,external_wp_blocks_namespaceObject.switchToBlockType)(blocksSelection, groupingBlockName);
if (newBlocks) {
replaceBlocks(clientIds, newBlocks);
}
};
const onConvertFromGroup = () => {
let innerBlocks = blocksSelection[0].innerBlocks;
if (!innerBlocks.length) {
return;
}
if (onUngroup) {
innerBlocks = onUngroup(blocksSelection[0].attributes, blocksSelection[0].innerBlocks);
}
replaceBlocks(clientIds, innerBlocks);
};
if (!isGroupable && !isUngroupable) {
return null;
}
const selectedBlockClientIds = getSelectedBlockClientIds();
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [isGroupable && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
shortcut: selectedBlockClientIds.length > 1 ? external_wp_keycodes_namespaceObject.displayShortcut.primary('g') : undefined,
onClick: () => {
onConvertToGroup();
onClose();
},
children: (0,external_wp_i18n_namespaceObject._x)('Group', 'verb')
}), isUngroupable && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
onClick: () => {
onConvertFromGroup();
onClose();
},
children: (0,external_wp_i18n_namespaceObject._x)('Ungroup', 'Ungrouping blocks from within a grouping block back into individual blocks within the Editor')
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-lock/use-block-lock.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Return details about the block lock status.
*
* @param {string} clientId The block client Id.
*
* @return {Object} Block lock status
*/
function useBlockLock(clientId) {
return (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
canEditBlock,
canMoveBlock,
canRemoveBlock,
canLockBlockType,
getBlockName,
getTemplateLock
} = select(store);
const canEdit = canEditBlock(clientId);
const canMove = canMoveBlock(clientId);
const canRemove = canRemoveBlock(clientId);
return {
canEdit,
canMove,
canRemove,
canLock: canLockBlockType(getBlockName(clientId)),
isContentLocked: getTemplateLock(clientId) === 'contentOnly',
isLocked: !canEdit || !canMove || !canRemove
};
}, [clientId]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/unlock.js
/**
* WordPress dependencies
*/
const unlock_unlock = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M17 10h-1.2V7c0-2.1-1.7-3.8-3.8-3.8-2.1 0-3.8 1.7-3.8 3.8h1.5c0-1.2 1-2.2 2.2-2.2s2.2 1 2.2 2.2v3H7c-.6 0-1 .4-1 1v8c0 .6.4 1 1 1h10c.6 0 1-.4 1-1v-8c0-.6-.4-1-1-1z"
})
});
/* harmony default export */ const library_unlock = (unlock_unlock);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/lock-outline.js
/**
* WordPress dependencies
*/
const lockOutline = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M17 10h-1.2V7c0-2.1-1.7-3.8-3.8-3.8-2.1 0-3.8 1.7-3.8 3.8v3H7c-.6 0-1 .4-1 1v8c0 .6.4 1 1 1h10c.6 0 1-.4 1-1v-8c0-.6-.4-1-1-1zM9.8 7c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v3H9.8V7zm6.7 11.5h-9v-7h9v7z"
})
});
/* harmony default export */ const lock_outline = (lockOutline);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/lock.js
/**
* WordPress dependencies
*/
const lock_lock = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M17 10h-1.2V7c0-2.1-1.7-3.8-3.8-3.8-2.1 0-3.8 1.7-3.8 3.8v3H7c-.6 0-1 .4-1 1v8c0 .6.4 1 1 1h10c.6 0 1-.4 1-1v-8c0-.6-.4-1-1-1zm-2.8 0H9.8V7c0-1.2 1-2.2 2.2-2.2s2.2 1 2.2 2.2v3z"
})
});
/* harmony default export */ const library_lock = (lock_lock);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-lock/modal.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
// Entity based blocks which allow edit locking
const ALLOWS_EDIT_LOCKING = ['core/block', 'core/navigation'];
function getTemplateLockValue(lock) {
// Prevents all operations.
if (lock.remove && lock.move) {
return 'all';
}
// Prevents inserting or removing blocks, but allows moving existing blocks.
if (lock.remove && !lock.move) {
return 'insert';
}
return false;
}
function BlockLockModal({
clientId,
onClose
}) {
const [lock, setLock] = (0,external_wp_element_namespaceObject.useState)({
move: false,
remove: false
});
const {
canEdit,
canMove,
canRemove
} = useBlockLock(clientId);
const {
allowsEditLocking,
templateLock,
hasTemplateLock
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockName,
getBlockAttributes
} = select(store);
const blockName = getBlockName(clientId);
const blockType = (0,external_wp_blocks_namespaceObject.getBlockType)(blockName);
return {
allowsEditLocking: ALLOWS_EDIT_LOCKING.includes(blockName),
templateLock: getBlockAttributes(clientId)?.templateLock,
hasTemplateLock: !!blockType?.attributes?.templateLock
};
}, [clientId]);
const [applyTemplateLock, setApplyTemplateLock] = (0,external_wp_element_namespaceObject.useState)(!!templateLock);
const {
updateBlockAttributes
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const blockInformation = useBlockDisplayInformation(clientId);
(0,external_wp_element_namespaceObject.useEffect)(() => {
setLock({
move: !canMove,
remove: !canRemove,
...(allowsEditLocking ? {
edit: !canEdit
} : {})
});
}, [canEdit, canMove, canRemove, allowsEditLocking]);
const isAllChecked = Object.values(lock).every(Boolean);
const isMixed = Object.values(lock).some(Boolean) && !isAllChecked;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Modal, {
title: (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %s: Name of the block. */
(0,external_wp_i18n_namespaceObject.__)('Lock %s'), blockInformation.title),
overlayClassName: "block-editor-block-lock-modal",
onRequestClose: onClose,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("form", {
onSubmit: event => {
event.preventDefault();
updateBlockAttributes([clientId], {
lock,
templateLock: applyTemplateLock ? getTemplateLockValue(lock) : undefined
});
onClose();
},
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("fieldset", {
className: "block-editor-block-lock-modal__options",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("legend", {
children: (0,external_wp_i18n_namespaceObject.__)('Choose specific attributes to restrict or lock all available options.')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("ul", {
role: "list",
className: "block-editor-block-lock-modal__checklist",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("li", {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.CheckboxControl, {
__nextHasNoMarginBottom: true,
className: "block-editor-block-lock-modal__options-all",
label: (0,external_wp_i18n_namespaceObject.__)('Lock all'),
checked: isAllChecked,
indeterminate: isMixed,
onChange: newValue => setLock({
move: newValue,
remove: newValue,
...(allowsEditLocking ? {
edit: newValue
} : {})
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("ul", {
role: "list",
className: "block-editor-block-lock-modal__checklist",
children: [allowsEditLocking && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("li", {
className: "block-editor-block-lock-modal__checklist-item",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.CheckboxControl, {
__nextHasNoMarginBottom: true,
label: (0,external_wp_i18n_namespaceObject.__)('Restrict editing'),
checked: !!lock.edit,
onChange: edit => setLock(prevLock => ({
...prevLock,
edit
}))
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Icon, {
className: "block-editor-block-lock-modal__lock-icon",
icon: lock.edit ? library_lock : library_unlock
})]
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("li", {
className: "block-editor-block-lock-modal__checklist-item",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.CheckboxControl, {
__nextHasNoMarginBottom: true,
label: (0,external_wp_i18n_namespaceObject.__)('Disable movement'),
checked: lock.move,
onChange: move => setLock(prevLock => ({
...prevLock,
move
}))
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Icon, {
className: "block-editor-block-lock-modal__lock-icon",
icon: lock.move ? library_lock : library_unlock
})]
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("li", {
className: "block-editor-block-lock-modal__checklist-item",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.CheckboxControl, {
__nextHasNoMarginBottom: true,
label: (0,external_wp_i18n_namespaceObject.__)('Prevent removal'),
checked: lock.remove,
onChange: remove => setLock(prevLock => ({
...prevLock,
remove
}))
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Icon, {
className: "block-editor-block-lock-modal__lock-icon",
icon: lock.remove ? library_lock : library_unlock
})]
})]
})]
})
}), hasTemplateLock && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToggleControl, {
__nextHasNoMarginBottom: true,
className: "block-editor-block-lock-modal__template-lock",
label: (0,external_wp_i18n_namespaceObject.__)('Apply to all blocks inside'),
checked: applyTemplateLock,
disabled: lock.move && !lock.remove,
onChange: () => setApplyTemplateLock(!applyTemplateLock)
})]
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.Flex, {
className: "block-editor-block-lock-modal__actions",
justify: "flex-end",
expanded: false,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexItem, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
variant: "tertiary",
onClick: onClose,
__next40pxDefaultSize: true,
children: (0,external_wp_i18n_namespaceObject.__)('Cancel')
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexItem, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
variant: "primary",
type: "submit",
__next40pxDefaultSize: true,
children: (0,external_wp_i18n_namespaceObject.__)('Apply')
})
})]
})]
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-lock/menu-item.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockLockMenuItem({
clientId
}) {
const {
canLock,
isLocked
} = useBlockLock(clientId);
const [isModalOpen, toggleModal] = (0,external_wp_element_namespaceObject.useReducer)(isActive => !isActive, false);
if (!canLock) {
return null;
}
const label = isLocked ? (0,external_wp_i18n_namespaceObject.__)('Unlock') : (0,external_wp_i18n_namespaceObject.__)('Lock');
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
icon: isLocked ? library_unlock : lock_outline,
onClick: toggleModal,
"aria-expanded": isModalOpen,
"aria-haspopup": "dialog",
children: label
}), isModalOpen && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockLockModal, {
clientId: clientId,
onClose: toggleModal
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-settings-menu/block-mode-toggle.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const block_mode_toggle_noop = () => {};
function BlockModeToggle({
clientId,
onToggle = block_mode_toggle_noop
}) {
const {
blockType,
mode,
isCodeEditingEnabled
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlock,
getBlockMode,
getSettings
} = select(store);
const block = getBlock(clientId);
return {
mode: getBlockMode(clientId),
blockType: block ? (0,external_wp_blocks_namespaceObject.getBlockType)(block.name) : null,
isCodeEditingEnabled: getSettings().codeEditingEnabled
};
}, [clientId]);
const {
toggleBlockMode
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
if (!blockType || !(0,external_wp_blocks_namespaceObject.hasBlockSupport)(blockType, 'html', true) || !isCodeEditingEnabled) {
return null;
}
const label = mode === 'visual' ? (0,external_wp_i18n_namespaceObject.__)('Edit as HTML') : (0,external_wp_i18n_namespaceObject.__)('Edit visually');
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
onClick: () => {
toggleBlockMode(clientId);
onToggle();
},
children: label
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/content-lock/modify-content-lock-menu-item.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
// The implementation of content locking is mainly in this file, although the mechanism
// to stop temporarily editing as blocks when an outside block is selected is on component StopEditingAsBlocksOnOutsideSelect
// at block-editor/src/components/block-list/index.js.
// Besides the components on this file and the file referenced above the implementation
// also includes artifacts on the store (actions, reducers, and selector).
function ModifyContentLockMenuItem({
clientId,
onClose
}) {
const {
templateLock,
isLockedByParent,
isEditingAsBlocks
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getContentLockingParent,
getTemplateLock,
getTemporarilyEditingAsBlocks
} = unlock(select(store));
return {
templateLock: getTemplateLock(clientId),
isLockedByParent: !!getContentLockingParent(clientId),
isEditingAsBlocks: getTemporarilyEditingAsBlocks() === clientId
};
}, [clientId]);
const blockEditorActions = (0,external_wp_data_namespaceObject.useDispatch)(store);
const isContentLocked = !isLockedByParent && templateLock === 'contentOnly';
if (!isContentLocked && !isEditingAsBlocks) {
return null;
}
const {
modifyContentLockBlock
} = unlock(blockEditorActions);
const showStartEditingAsBlocks = !isEditingAsBlocks && isContentLocked;
return showStartEditingAsBlocks && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
onClick: () => {
modifyContentLockBlock(clientId);
onClose();
},
children: (0,external_wp_i18n_namespaceObject._x)('Modify', 'Unlock content locked blocks')
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-rename/use-block-rename.js
/**
* WordPress dependencies
*/
function useBlockRename(name) {
return {
canRename: (0,external_wp_blocks_namespaceObject.getBlockSupport)(name, 'renaming', true)
};
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-rename/is-empty-string.js
function isEmptyString(testString) {
return testString?.trim()?.length === 0;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-rename/modal.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockRenameModal({
blockName,
originalBlockName,
onClose,
onSave,
// Pattern Overrides is a WordPress-only feature but it also uses the Block Binding API.
// Ideally this should not be inside the block editor package, but we keep it here for simplicity.
hasOverridesWarning
}) {
const [editedBlockName, setEditedBlockName] = (0,external_wp_element_namespaceObject.useState)(blockName);
const nameHasChanged = editedBlockName !== blockName;
const nameIsOriginal = editedBlockName === originalBlockName;
const nameIsEmpty = isEmptyString(editedBlockName);
const isNameValid = nameHasChanged || nameIsOriginal;
const autoSelectInputText = event => event.target.select();
const handleSubmit = () => {
const message = nameIsOriginal || nameIsEmpty ? (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %s: new name/label for the block */
(0,external_wp_i18n_namespaceObject.__)('Block name reset to: "%s".'), editedBlockName) : (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %s: new name/label for the block */
(0,external_wp_i18n_namespaceObject.__)('Block name changed to: "%s".'), editedBlockName);
// Must be assertive to immediately announce change.
(0,external_wp_a11y_namespaceObject.speak)(message, 'assertive');
onSave(editedBlockName);
// Immediate close avoids ability to hit save multiple times.
onClose();
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Modal, {
title: (0,external_wp_i18n_namespaceObject.__)('Rename'),
onRequestClose: onClose,
overlayClassName: "block-editor-block-rename-modal",
focusOnMount: "firstContentElement",
size: "small",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("form", {
onSubmit: e => {
e.preventDefault();
if (!isNameValid) {
return;
}
handleSubmit();
},
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalVStack, {
spacing: "3",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.TextControl, {
__nextHasNoMarginBottom: true,
__next40pxDefaultSize: true,
value: editedBlockName,
label: (0,external_wp_i18n_namespaceObject.__)('Name'),
help: hasOverridesWarning ? (0,external_wp_i18n_namespaceObject.__)('This block allows overrides. Changing the name can cause problems with content entered into instances of this pattern.') : undefined,
placeholder: originalBlockName,
onChange: setEditedBlockName,
onFocus: autoSelectInputText
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalHStack, {
justify: "right",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
variant: "tertiary",
onClick: onClose,
children: (0,external_wp_i18n_namespaceObject.__)('Cancel')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
"aria-disabled": !isNameValid,
variant: "primary",
type: "submit",
children: (0,external_wp_i18n_namespaceObject.__)('Save')
})]
})]
})
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-rename/rename-control.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockRenameControl({
clientId
}) {
const [renamingBlock, setRenamingBlock] = (0,external_wp_element_namespaceObject.useState)(false);
const {
metadata
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockAttributes
} = select(store);
const _metadata = getBlockAttributes(clientId)?.metadata;
return {
metadata: _metadata
};
}, [clientId]);
const {
updateBlockAttributes
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const customName = metadata?.name;
const hasPatternOverrides = !!customName && !!metadata?.bindings && Object.values(metadata.bindings).some(binding => binding.source === 'core/pattern-overrides');
function onChange(newName) {
updateBlockAttributes([clientId], {
metadata: {
...metadata,
name: newName
}
});
}
const blockInformation = useBlockDisplayInformation(clientId);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
onClick: () => {
setRenamingBlock(true);
},
"aria-expanded": renamingBlock,
"aria-haspopup": "dialog",
children: (0,external_wp_i18n_namespaceObject.__)('Rename')
}), renamingBlock && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockRenameModal, {
blockName: customName || '',
originalBlockName: blockInformation?.title,
hasOverridesWarning: hasPatternOverrides,
onClose: () => setRenamingBlock(false),
onSave: newName => {
// If the new value is the block's original name (e.g. `Group`)
// or it is an empty string then assume the intent is to reset
// the value. Therefore reset the metadata.
if (newName === blockInformation?.title || isEmptyString(newName)) {
newName = undefined;
}
onChange(newName);
}
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-settings-menu-controls/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const {
Fill,
Slot: block_settings_menu_controls_Slot
} = (0,external_wp_components_namespaceObject.createSlotFill)('BlockSettingsMenuControls');
const BlockSettingsMenuControlsSlot = ({
fillProps,
clientIds = null
}) => {
const {
selectedBlocks,
selectedClientIds,
isContentOnly
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockNamesByClientId,
getSelectedBlockClientIds,
getBlockEditingMode
} = select(store);
const ids = clientIds !== null ? clientIds : getSelectedBlockClientIds();
return {
selectedBlocks: getBlockNamesByClientId(ids),
selectedClientIds: ids,
isContentOnly: getBlockEditingMode(ids[0]) === 'contentOnly'
};
}, [clientIds]);
const {
canLock
} = useBlockLock(selectedClientIds[0]);
const {
canRename
} = useBlockRename(selectedBlocks[0]);
const showLockButton = selectedClientIds.length === 1 && canLock && !isContentOnly;
const showRenameButton = selectedClientIds.length === 1 && canRename && !isContentOnly;
// Check if current selection of blocks is Groupable or Ungroupable
// and pass this props down to ConvertToGroupButton.
const convertToGroupButtonProps = useConvertToGroupButtonProps(selectedClientIds);
const {
isGroupable,
isUngroupable
} = convertToGroupButtonProps;
const showConvertToGroupButton = (isGroupable || isUngroupable) && !isContentOnly;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_settings_menu_controls_Slot, {
fillProps: {
...fillProps,
selectedBlocks,
selectedClientIds
},
children: fills => {
if (!fills?.length > 0 && !showConvertToGroupButton && !showLockButton) {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.MenuGroup, {
children: [showConvertToGroupButton && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ConvertToGroupButton, {
...convertToGroupButtonProps,
onClose: fillProps?.onClose
}), showLockButton && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockLockMenuItem, {
clientId: selectedClientIds[0]
}), showRenameButton && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockRenameControl, {
clientId: selectedClientIds[0]
}), fills, fillProps?.canMove && !fillProps?.onlyBlock && !isContentOnly && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
onClick: (0,external_wp_compose_namespaceObject.pipe)(fillProps?.onClose, fillProps?.onMoveTo),
children: (0,external_wp_i18n_namespaceObject.__)('Move to')
}), selectedClientIds.length === 1 && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ModifyContentLockMenuItem, {
clientId: selectedClientIds[0],
onClose: fillProps?.onClose
}), fillProps?.count === 1 && !isContentOnly && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockModeToggle, {
clientId: fillProps?.firstBlockClientId,
onToggle: fillProps?.onClose
})]
});
}
});
};
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-settings-menu-controls/README.md
*
* @param {Object} props Fill props.
* @return {Element} Element.
*/
function BlockSettingsMenuControls({
...props
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalStyleProvider, {
document: document,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Fill, {
...props
})
});
}
BlockSettingsMenuControls.Slot = BlockSettingsMenuControlsSlot;
/* harmony default export */ const block_settings_menu_controls = (BlockSettingsMenuControls);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-settings-menu/block-parent-selector-menu-item.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockParentSelectorMenuItem({
parentClientId,
parentBlockType
}) {
const isSmallViewport = (0,external_wp_compose_namespaceObject.useViewportMatch)('medium', '<');
const {
selectBlock
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
// Allows highlighting the parent block outline when focusing or hovering
// the parent block selector within the child.
const menuItemRef = (0,external_wp_element_namespaceObject.useRef)();
const gesturesProps = useShowHoveredOrFocusedGestures({
ref: menuItemRef,
highlightParent: true
});
if (!isSmallViewport) {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
...gesturesProps,
ref: menuItemRef,
icon: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_icon, {
icon: parentBlockType.icon
}),
onClick: () => selectBlock(parentClientId),
children: (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %s: Name of the block's parent. */
(0,external_wp_i18n_namespaceObject.__)('Select parent block (%s)'), parentBlockType.title)
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-settings-menu/block-settings-dropdown.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const block_settings_dropdown_POPOVER_PROPS = {
className: 'block-editor-block-settings-menu__popover',
placement: 'bottom-start'
};
function CopyMenuItem({
clientIds,
onCopy,
label,
shortcut
}) {
const {
getBlocksByClientId
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const ref = (0,external_wp_compose_namespaceObject.useCopyToClipboard)(() => (0,external_wp_blocks_namespaceObject.serialize)(getBlocksByClientId(clientIds)), onCopy);
const copyMenuItemLabel = label ? label : (0,external_wp_i18n_namespaceObject.__)('Copy');
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
ref: ref,
shortcut: shortcut,
children: copyMenuItemLabel
});
}
function BlockSettingsDropdown({
block,
clientIds,
children,
__experimentalSelectBlock,
...props
}) {
// Get the client id of the current block for this menu, if one is set.
const currentClientId = block?.clientId;
const count = clientIds.length;
const firstBlockClientId = clientIds[0];
const isZoomOut = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
__unstableGetEditorMode
} = unlock(select(store));
return __unstableGetEditorMode() === 'zoom-out';
});
const {
firstParentClientId,
onlyBlock,
parentBlockType,
previousBlockClientId,
selectedBlockClientIds,
openedBlockSettingsMenu,
isContentOnly
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockCount,
getBlockName,
getBlockRootClientId,
getPreviousBlockClientId,
getSelectedBlockClientIds,
getBlockAttributes,
getOpenedBlockSettingsMenu,
getBlockEditingMode
} = unlock(select(store));
const {
getActiveBlockVariation
} = select(external_wp_blocks_namespaceObject.store);
const _firstParentClientId = getBlockRootClientId(firstBlockClientId);
const parentBlockName = _firstParentClientId && getBlockName(_firstParentClientId);
return {
firstParentClientId: _firstParentClientId,
onlyBlock: 1 === getBlockCount(_firstParentClientId),
parentBlockType: _firstParentClientId && (getActiveBlockVariation(parentBlockName, getBlockAttributes(_firstParentClientId)) || (0,external_wp_blocks_namespaceObject.getBlockType)(parentBlockName)),
previousBlockClientId: getPreviousBlockClientId(firstBlockClientId),
selectedBlockClientIds: getSelectedBlockClientIds(),
openedBlockSettingsMenu: getOpenedBlockSettingsMenu(),
isContentOnly: getBlockEditingMode(firstBlockClientId) === 'contentOnly'
};
}, [firstBlockClientId]);
const {
getBlockOrder,
getSelectedBlockClientIds
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
setOpenedBlockSettingsMenu
} = unlock((0,external_wp_data_namespaceObject.useDispatch)(store));
const shortcuts = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getShortcutRepresentation
} = select(external_wp_keyboardShortcuts_namespaceObject.store);
return {
duplicate: getShortcutRepresentation('core/block-editor/duplicate'),
remove: getShortcutRepresentation('core/block-editor/remove'),
insertAfter: getShortcutRepresentation('core/block-editor/insert-after'),
insertBefore: getShortcutRepresentation('core/block-editor/insert-before')
};
}, []);
const hasSelectedBlocks = selectedBlockClientIds.length > 0;
async function updateSelectionAfterDuplicate(clientIdsPromise) {
if (!__experimentalSelectBlock) {
return;
}
const ids = await clientIdsPromise;
if (ids && ids[0]) {
__experimentalSelectBlock(ids[0], false);
}
}
function updateSelectionAfterRemove() {
if (!__experimentalSelectBlock) {
return;
}
let blockToFocus = previousBlockClientId || firstParentClientId;
// Focus the first block if there's no previous block nor parent block.
if (!blockToFocus) {
blockToFocus = getBlockOrder()[0];
}
// Only update the selection if the original selection is removed.
const shouldUpdateSelection = hasSelectedBlocks && getSelectedBlockClientIds().length === 0;
__experimentalSelectBlock(blockToFocus, shouldUpdateSelection);
}
// This can occur when the selected block (the parent)
// displays child blocks within a List View.
const parentBlockIsSelected = selectedBlockClientIds?.includes(firstParentClientId);
// When a currentClientId is in use, treat the menu as a controlled component.
// This ensures that only one block settings menu is open at a time.
// This is a temporary solution to work around an issue with `onFocusOutside`
// where it does not allow a dropdown to be closed if focus was never within
// the dropdown to begin with. Examples include a user either CMD+Clicking or
// right clicking into an inactive window.
// See: https://github.com/WordPress/gutenberg/pull/54083
const open = !currentClientId ? undefined : openedBlockSettingsMenu === currentClientId || false;
function onToggle(localOpen) {
if (localOpen && openedBlockSettingsMenu !== currentClientId) {
setOpenedBlockSettingsMenu(currentClientId);
} else if (!localOpen && openedBlockSettingsMenu && openedBlockSettingsMenu === currentClientId) {
setOpenedBlockSettingsMenu(undefined);
}
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockActions, {
clientIds: clientIds,
__experimentalUpdateSelection: !__experimentalSelectBlock,
children: ({
canCopyStyles,
canDuplicate,
canInsertBlock,
canMove,
canRemove,
onDuplicate,
onInsertAfter,
onInsertBefore,
onRemove,
onCopy,
onPasteStyles,
onMoveTo
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.DropdownMenu, {
icon: more_vertical,
label: (0,external_wp_i18n_namespaceObject.__)('Options'),
className: "block-editor-block-settings-menu",
popoverProps: block_settings_dropdown_POPOVER_PROPS,
open: open,
onToggle: onToggle,
noIcons: true,
...props,
children: ({
onClose
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.MenuGroup, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_settings_menu_first_item.Slot, {
fillProps: {
onClose
}
}), !parentBlockIsSelected && !!firstParentClientId && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockParentSelectorMenuItem, {
parentClientId: firstParentClientId,
parentBlockType: parentBlockType
}), count === 1 && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_html_convert_button, {
clientId: firstBlockClientId
}), (!isContentOnly || isZoomOut) && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CopyMenuItem, {
clientIds: clientIds,
onCopy: onCopy,
shortcut: external_wp_keycodes_namespaceObject.displayShortcut.primary('c')
}), canDuplicate && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
onClick: (0,external_wp_compose_namespaceObject.pipe)(onClose, onDuplicate, updateSelectionAfterDuplicate),
shortcut: shortcuts.duplicate,
children: (0,external_wp_i18n_namespaceObject.__)('Duplicate')
}), canInsertBlock && !isContentOnly && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
onClick: (0,external_wp_compose_namespaceObject.pipe)(onClose, onInsertBefore),
shortcut: shortcuts.insertBefore,
children: (0,external_wp_i18n_namespaceObject.__)('Add before')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
onClick: (0,external_wp_compose_namespaceObject.pipe)(onClose, onInsertAfter),
shortcut: shortcuts.insertAfter,
children: (0,external_wp_i18n_namespaceObject.__)('Add after')
})]
})]
}), canCopyStyles && !isContentOnly && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.MenuGroup, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CopyMenuItem, {
clientIds: clientIds,
onCopy: onCopy,
label: (0,external_wp_i18n_namespaceObject.__)('Copy styles')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
onClick: onPasteStyles,
children: (0,external_wp_i18n_namespaceObject.__)('Paste styles')
})]
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_settings_menu_controls.Slot, {
fillProps: {
onClose,
canMove,
onMoveTo,
onlyBlock,
count,
firstBlockClientId
},
clientIds: clientIds
}), typeof children === 'function' ? children({
onClose
}) : external_wp_element_namespaceObject.Children.map(child => (0,external_wp_element_namespaceObject.cloneElement)(child, {
onClose
})), canRemove && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuGroup, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
onClick: (0,external_wp_compose_namespaceObject.pipe)(onClose, onRemove, updateSelectionAfterRemove),
shortcut: shortcuts.remove,
children: (0,external_wp_i18n_namespaceObject.__)('Delete')
})
})]
})
})
});
}
/* harmony default export */ const block_settings_dropdown = (BlockSettingsDropdown);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-settings-menu/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockSettingsMenu({
clientIds,
...props
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarGroup, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarItem, {
children: toggleProps => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_settings_dropdown, {
clientIds: clientIds,
toggleProps: toggleProps,
...props
})
})
});
}
/* harmony default export */ const block_settings_menu = (BlockSettingsMenu);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-lock/toolbar.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockLockToolbar({
clientId
}) {
const {
canLock,
isLocked
} = useBlockLock(clientId);
const [isModalOpen, toggleModal] = (0,external_wp_element_namespaceObject.useReducer)(isActive => !isActive, false);
const hasLockButtonShownRef = (0,external_wp_element_namespaceObject.useRef)(false);
// If the block lock button has been shown, we don't want to remove it
// from the toolbar until the toolbar is rendered again without it.
// Removing it beforehand can cause focus loss issues, such as when
// unlocking the block from the modal. It needs to return focus from
// whence it came, and to do that, we need to leave the button in the toolbar.
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (isLocked) {
hasLockButtonShownRef.current = true;
}
}, [isLocked]);
if (!isLocked && !hasLockButtonShownRef.current) {
return null;
}
let label = isLocked ? (0,external_wp_i18n_namespaceObject.__)('Unlock') : (0,external_wp_i18n_namespaceObject.__)('Lock');
if (!canLock && isLocked) {
label = (0,external_wp_i18n_namespaceObject.__)('Locked');
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarGroup, {
className: "block-editor-block-lock-toolbar",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarButton, {
disabled: !canLock,
icon: isLocked ? library_lock : library_unlock,
label: label,
onClick: toggleModal,
"aria-expanded": isModalOpen,
"aria-haspopup": "dialog"
})
}), isModalOpen && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockLockModal, {
clientId: clientId,
onClose: toggleModal
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/group.js
/**
* WordPress dependencies
*/
const group_group = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M18 4h-7c-1.1 0-2 .9-2 2v3H6c-1.1 0-2 .9-2 2v7c0 1.1.9 2 2 2h7c1.1 0 2-.9 2-2v-3h3c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-4.5 14c0 .3-.2.5-.5.5H6c-.3 0-.5-.2-.5-.5v-7c0-.3.2-.5.5-.5h3V13c0 1.1.9 2 2 2h2.5v3zm0-4.5H11c-.3 0-.5-.2-.5-.5v-2.5H13c.3 0 .5.2.5.5v2.5zm5-.5c0 .3-.2.5-.5.5h-3V11c0-1.1-.9-2-2-2h-2.5V6c0-.3.2-.5.5-.5h7c.3 0 .5.2.5.5v7z"
})
});
/* harmony default export */ const library_group = (group_group);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/row.js
/**
* WordPress dependencies
*/
const row = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M4 6.5h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4V16h5a.5.5 0 0 0 .5-.5v-7A.5.5 0 0 0 9 8H4V6.5Zm16 0h-5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h5V16h-5a.5.5 0 0 1-.5-.5v-7A.5.5 0 0 1 15 8h5V6.5Z"
})
});
/* harmony default export */ const library_row = (row);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/stack.js
/**
* WordPress dependencies
*/
const stack = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M17.5 4v5a2 2 0 0 1-2 2h-7a2 2 0 0 1-2-2V4H8v5a.5.5 0 0 0 .5.5h7A.5.5 0 0 0 16 9V4h1.5Zm0 16v-5a2 2 0 0 0-2-2h-7a2 2 0 0 0-2 2v5H8v-5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v5h1.5Z"
})
});
/* harmony default export */ const library_stack = (stack);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/grid.js
/**
* WordPress dependencies
*/
const grid_grid = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "m3 5c0-1.10457.89543-2 2-2h13.5c1.1046 0 2 .89543 2 2v13.5c0 1.1046-.8954 2-2 2h-13.5c-1.10457 0-2-.8954-2-2zm2-.5h6v6.5h-6.5v-6c0-.27614.22386-.5.5-.5zm-.5 8v6c0 .2761.22386.5.5.5h6v-6.5zm8 0v6.5h6c.2761 0 .5-.2239.5-.5v-6zm0-8v6.5h6.5v-6c0-.27614-.2239-.5-.5-.5z",
fillRule: "evenodd",
clipRule: "evenodd"
})
});
/* harmony default export */ const library_grid = (grid_grid);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/convert-to-group-buttons/toolbar.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const layouts = {
group: {
type: 'constrained'
},
row: {
type: 'flex',
flexWrap: 'nowrap'
},
stack: {
type: 'flex',
orientation: 'vertical'
},
grid: {
type: 'grid'
}
};
function BlockGroupToolbar() {
const {
blocksSelection,
clientIds,
groupingBlockName,
isGroupable
} = useConvertToGroupButtonProps();
const {
replaceBlocks
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const {
canRemove,
variations
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
canRemoveBlocks
} = select(store);
const {
getBlockVariations
} = select(external_wp_blocks_namespaceObject.store);
return {
canRemove: canRemoveBlocks(clientIds),
variations: getBlockVariations(groupingBlockName, 'transform')
};
}, [clientIds, groupingBlockName]);
const onConvertToGroup = layout => {
const newBlocks = (0,external_wp_blocks_namespaceObject.switchToBlockType)(blocksSelection, groupingBlockName);
if (typeof layout !== 'string') {
layout = 'group';
}
if (newBlocks && newBlocks.length > 0) {
// Because the block is not in the store yet we can't use
// updateBlockAttributes so need to manually update attributes.
newBlocks[0].attributes.layout = layouts[layout];
replaceBlocks(clientIds, newBlocks);
}
};
const onConvertToRow = () => onConvertToGroup('row');
const onConvertToStack = () => onConvertToGroup('stack');
const onConvertToGrid = () => onConvertToGroup('grid');
// Don't render the button if the current selection cannot be grouped.
// A good example is selecting multiple button blocks within a Buttons block:
// The group block is not a valid child of Buttons, so we should not show the button.
// Any blocks that are locked against removal also cannot be grouped.
if (!isGroupable || !canRemove) {
return null;
}
const canInsertRow = !!variations.find(({
name
}) => name === 'group-row');
const canInsertStack = !!variations.find(({
name
}) => name === 'group-stack');
const canInsertGrid = !!variations.find(({
name
}) => name === 'group-grid');
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.ToolbarGroup, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarButton, {
icon: library_group,
label: (0,external_wp_i18n_namespaceObject._x)('Group', 'verb'),
onClick: onConvertToGroup
}), canInsertRow && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarButton, {
icon: library_row,
label: (0,external_wp_i18n_namespaceObject._x)('Row', 'single horizontal line'),
onClick: onConvertToRow
}), canInsertStack && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarButton, {
icon: library_stack,
label: (0,external_wp_i18n_namespaceObject._x)('Stack', 'verb'),
onClick: onConvertToStack
}), canInsertGrid && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarButton, {
icon: library_grid,
label: (0,external_wp_i18n_namespaceObject._x)('Grid', 'verb'),
onClick: onConvertToGrid
})]
});
}
/* harmony default export */ const toolbar = (BlockGroupToolbar);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-edit-visually-button/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockEditVisuallyButton({
clientIds
}) {
// Edit visually only works for single block selection.
const clientId = clientIds.length === 1 ? clientIds[0] : undefined;
const canEditVisually = (0,external_wp_data_namespaceObject.useSelect)(select => !!clientId && select(store).getBlockMode(clientId) === 'html', [clientId]);
const {
toggleBlockMode
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
if (!canEditVisually) {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarGroup, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarButton, {
onClick: () => {
toggleBlockMode(clientId);
},
children: (0,external_wp_i18n_namespaceObject.__)('Edit visually')
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-toolbar/block-name-context.js
/**
* WordPress dependencies
*/
const __unstableBlockNameContext = (0,external_wp_element_namespaceObject.createContext)('');
/* harmony default export */ const block_name_context = (__unstableBlockNameContext);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/navigable-toolbar/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function hasOnlyToolbarItem(elements) {
const dataProp = 'toolbarItem';
return !elements.some(element => !(dataProp in element.dataset));
}
function getAllFocusableToolbarItemsIn(container) {
return Array.from(container.querySelectorAll('[data-toolbar-item]:not([disabled])'));
}
function hasFocusWithin(container) {
return container.contains(container.ownerDocument.activeElement);
}
function focusFirstTabbableIn(container) {
const [firstTabbable] = external_wp_dom_namespaceObject.focus.tabbable.find(container);
if (firstTabbable) {
firstTabbable.focus({
// When focusing newly mounted toolbars,
// the position of the popover is often not right on the first render
// This prevents the layout shifts when focusing the dialogs.
preventScroll: true
});
}
}
function useIsAccessibleToolbar(toolbarRef) {
/*
* By default, we'll assume the starting accessible state of the Toolbar
* is true, as it seems to be the most common case.
*
* Transitioning from an (initial) false to true state causes the
* <Toolbar /> component to mount twice, which is causing undesired
* side-effects. These side-effects appear to only affect certain
* E2E tests.
*
* This was initial discovered in this pull-request:
* https://github.com/WordPress/gutenberg/pull/23425
*/
const initialAccessibleToolbarState = true;
// By default, it's gonna render NavigableMenu. If all the tabbable elements
// inside the toolbar are ToolbarItem components (or derived components like
// ToolbarButton), then we can wrap them with the accessible Toolbar
// component.
const [isAccessibleToolbar, setIsAccessibleToolbar] = (0,external_wp_element_namespaceObject.useState)(initialAccessibleToolbarState);
const determineIsAccessibleToolbar = (0,external_wp_element_namespaceObject.useCallback)(() => {
const tabbables = external_wp_dom_namespaceObject.focus.tabbable.find(toolbarRef.current);
const onlyToolbarItem = hasOnlyToolbarItem(tabbables);
if (!onlyToolbarItem) {
external_wp_deprecated_default()('Using custom components as toolbar controls', {
since: '5.6',
alternative: 'ToolbarItem, ToolbarButton or ToolbarDropdownMenu components',
link: 'https://developer.wordpress.org/block-editor/components/toolbar-button/#inside-blockcontrols'
});
}
setIsAccessibleToolbar(onlyToolbarItem);
}, [toolbarRef]);
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
// Toolbar buttons may be rendered asynchronously, so we use
// MutationObserver to check if the toolbar subtree has been modified.
const observer = new window.MutationObserver(determineIsAccessibleToolbar);
observer.observe(toolbarRef.current, {
childList: true,
subtree: true
});
return () => observer.disconnect();
}, [determineIsAccessibleToolbar, isAccessibleToolbar, toolbarRef]);
return isAccessibleToolbar;
}
function useToolbarFocus({
toolbarRef,
focusOnMount,
isAccessibleToolbar,
defaultIndex,
onIndexChange,
shouldUseKeyboardFocusShortcut,
focusEditorOnEscape
}) {
// Make sure we don't use modified versions of this prop.
const [initialFocusOnMount] = (0,external_wp_element_namespaceObject.useState)(focusOnMount);
const [initialIndex] = (0,external_wp_element_namespaceObject.useState)(defaultIndex);
const focusToolbar = (0,external_wp_element_namespaceObject.useCallback)(() => {
focusFirstTabbableIn(toolbarRef.current);
}, [toolbarRef]);
const focusToolbarViaShortcut = () => {
if (shouldUseKeyboardFocusShortcut) {
focusToolbar();
}
};
// Focus on toolbar when pressing alt+F10 when the toolbar is visible.
(0,external_wp_keyboardShortcuts_namespaceObject.useShortcut)('core/block-editor/focus-toolbar', focusToolbarViaShortcut);
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (initialFocusOnMount) {
focusToolbar();
}
}, [isAccessibleToolbar, initialFocusOnMount, focusToolbar]);
(0,external_wp_element_namespaceObject.useEffect)(() => {
// Store ref so we have access on useEffect cleanup: https://legacy.reactjs.org/blog/2020/08/10/react-v17-rc.html#effect-cleanup-timing
const navigableToolbarRef = toolbarRef.current;
// If initialIndex is passed, we focus on that toolbar item when the
// toolbar gets mounted and initial focus is not forced.
// We have to wait for the next browser paint because block controls aren't
// rendered right away when the toolbar gets mounted.
let raf = 0;
// If the toolbar already had focus before the render, we don't want to move it.
// https://github.com/WordPress/gutenberg/issues/58511
if (!initialFocusOnMount && !hasFocusWithin(navigableToolbarRef)) {
raf = window.requestAnimationFrame(() => {
const items = getAllFocusableToolbarItemsIn(navigableToolbarRef);
const index = initialIndex || 0;
if (items[index] && hasFocusWithin(navigableToolbarRef)) {
items[index].focus({
// When focusing newly mounted toolbars,
// the position of the popover is often not right on the first render
// This prevents the layout shifts when focusing the dialogs.
preventScroll: true
});
}
});
}
return () => {
window.cancelAnimationFrame(raf);
if (!onIndexChange || !navigableToolbarRef) {
return;
}
// When the toolbar element is unmounted and onIndexChange is passed, we
// pass the focused toolbar item index so it can be hydrated later.
const items = getAllFocusableToolbarItemsIn(navigableToolbarRef);
const index = items.findIndex(item => item.tabIndex === 0);
onIndexChange(index);
};
}, [initialIndex, initialFocusOnMount, onIndexChange, toolbarRef]);
const {
getLastFocus
} = unlock((0,external_wp_data_namespaceObject.useSelect)(store));
/**
* Handles returning focus to the block editor canvas when pressing escape.
*/
(0,external_wp_element_namespaceObject.useEffect)(() => {
const navigableToolbarRef = toolbarRef.current;
if (focusEditorOnEscape) {
const handleKeyDown = event => {
const lastFocus = getLastFocus();
if (event.keyCode === external_wp_keycodes_namespaceObject.ESCAPE && lastFocus?.current) {
// Focus the last focused element when pressing escape.
event.preventDefault();
lastFocus.current.focus();
}
};
navigableToolbarRef.addEventListener('keydown', handleKeyDown);
return () => {
navigableToolbarRef.removeEventListener('keydown', handleKeyDown);
};
}
}, [focusEditorOnEscape, getLastFocus, toolbarRef]);
}
function NavigableToolbar({
children,
focusOnMount,
focusEditorOnEscape = false,
shouldUseKeyboardFocusShortcut = true,
__experimentalInitialIndex: initialIndex,
__experimentalOnIndexChange: onIndexChange,
orientation = 'horizontal',
...props
}) {
const toolbarRef = (0,external_wp_element_namespaceObject.useRef)();
const isAccessibleToolbar = useIsAccessibleToolbar(toolbarRef);
useToolbarFocus({
toolbarRef,
focusOnMount,
defaultIndex: initialIndex,
onIndexChange,
isAccessibleToolbar,
shouldUseKeyboardFocusShortcut,
focusEditorOnEscape
});
if (isAccessibleToolbar) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Toolbar, {
label: props['aria-label'],
ref: toolbarRef,
orientation: orientation,
...props,
children: children
});
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.NavigableMenu, {
orientation: orientation,
role: "toolbar",
ref: toolbarRef,
...props,
children: children
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-controls/use-has-block-controls.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function useHasAnyBlockControls() {
let hasAnyBlockControls = false;
for (const group in block_controls_groups) {
// It is safe to violate the rules of hooks here as the `groups` object
// is static and will not change length between renders. Do not return
// early as that will cause the hook to be called a different number of
// times between renders.
// eslint-disable-next-line react-hooks/rules-of-hooks
if (useHasBlockControls(group)) {
hasAnyBlockControls = true;
}
}
return hasAnyBlockControls;
}
function useHasBlockControls(group = 'default') {
const Slot = block_controls_groups[group]?.Slot;
const fills = (0,external_wp_components_namespaceObject.__experimentalUseSlotFills)(Slot?.__unstableName);
if (!Slot) {
true ? external_wp_warning_default()(`Unknown BlockControls group "${group}" provided.`) : 0;
return null;
}
return !!fills?.length;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-toolbar/use-has-block-toolbar.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Returns true if the block toolbar should be shown.
*
* @return {boolean} Whether the block toolbar component will be rendered.
*/
function useHasBlockToolbar() {
const {
isToolbarEnabled,
isBlockDisabled
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockEditingMode,
getBlockName,
getBlockSelectionStart
} = select(store);
// we only care about the 1st selected block
// for the toolbar, so we use getBlockSelectionStart
// instead of getSelectedBlockClientIds
const selectedBlockClientId = getBlockSelectionStart();
const blockType = selectedBlockClientId && (0,external_wp_blocks_namespaceObject.getBlockType)(getBlockName(selectedBlockClientId));
return {
isToolbarEnabled: blockType && (0,external_wp_blocks_namespaceObject.hasBlockSupport)(blockType, '__experimentalToolbar', true),
isBlockDisabled: getBlockEditingMode(selectedBlockClientId) === 'disabled'
};
}, []);
const hasAnyBlockControls = useHasAnyBlockControls();
if (!isToolbarEnabled || isBlockDisabled && !hasAnyBlockControls) {
return false;
}
return true;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/shuffle.js
/**
* WordPress dependencies
*/
const shuffle = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/SVG",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M17.192 6.75L15.47 5.03l1.06-1.06 3.537 3.53-3.537 3.53-1.06-1.06 1.723-1.72h-3.19c-.602 0-.993.202-1.28.498-.309.319-.538.792-.695 1.383-.13.488-.222 1.023-.296 1.508-.034.664-.116 1.413-.303 2.117-.193.721-.513 1.467-1.068 2.04-.575.594-1.359.954-2.357.954H4v-1.5h4.003c.601 0 .993-.202 1.28-.498.308-.319.538-.792.695-1.383.149-.557.216-1.093.288-1.662l.039-.31a9.653 9.653 0 0 1 .272-1.653c.193-.722.513-1.467 1.067-2.04.576-.594 1.36-.954 2.358-.954h3.19zM8.004 6.75c.8 0 1.46.23 1.988.628a6.24 6.24 0 0 0-.684 1.396 1.725 1.725 0 0 0-.024-.026c-.287-.296-.679-.498-1.28-.498H4v-1.5h4.003zM12.699 14.726c-.161.459-.38.94-.684 1.396.527.397 1.188.628 1.988.628h3.19l-1.722 1.72 1.06 1.06L20.067 16l-3.537-3.53-1.06 1.06 1.723 1.72h-3.19c-.602 0-.993-.202-1.28-.498a1.96 1.96 0 0 1-.024-.026z"
})
});
/* harmony default export */ const library_shuffle = (shuffle);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-toolbar/shuffle.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const shuffle_EMPTY_ARRAY = [];
function shuffle_Container(props) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarGroup, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarButton, {
...props
})
});
}
function Shuffle({
clientId,
as = shuffle_Container
}) {
const {
categories,
patterns,
patternName
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockAttributes,
getBlockRootClientId,
__experimentalGetAllowedPatterns
} = select(store);
const attributes = getBlockAttributes(clientId);
const _categories = attributes?.metadata?.categories || shuffle_EMPTY_ARRAY;
const _patternName = attributes?.metadata?.patternName;
const rootBlock = getBlockRootClientId(clientId);
// Calling `__experimentalGetAllowedPatterns` is expensive.
// Checking if the block can be shuffled prevents unnecessary selector calls.
// See: https://github.com/WordPress/gutenberg/pull/64736.
const _patterns = _categories.length > 0 ? __experimentalGetAllowedPatterns(rootBlock) : shuffle_EMPTY_ARRAY;
return {
categories: _categories,
patterns: _patterns,
patternName: _patternName
};
}, [clientId]);
const {
replaceBlocks
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const sameCategoryPatternsWithSingleWrapper = (0,external_wp_element_namespaceObject.useMemo)(() => {
if (categories.length === 0 || !patterns || patterns.length === 0) {
return shuffle_EMPTY_ARRAY;
}
return patterns.filter(pattern => {
const isCorePattern = pattern.source === 'core' || pattern.source?.startsWith('pattern-directory') && pattern.source !== 'pattern-directory/theme';
return (
// Check if the pattern has only one top level block,
// otherwise we may shuffle to pattern that will not allow to continue shuffling.
pattern.blocks.length === 1 &&
// We exclude the core patterns and pattern directory patterns that are not theme patterns.
!isCorePattern && pattern.categories?.some(category => {
return categories.includes(category);
}) && (
// Check if the pattern is not a synced pattern.
pattern.syncStatus === 'unsynced' || !pattern.id)
);
});
}, [categories, patterns]);
if (sameCategoryPatternsWithSingleWrapper.length < 2) {
return null;
}
function getNextPattern() {
const numberOfPatterns = sameCategoryPatternsWithSingleWrapper.length;
const patternIndex = sameCategoryPatternsWithSingleWrapper.findIndex(({
name
}) => name === patternName);
const nextPatternIndex = patternIndex + 1 < numberOfPatterns ? patternIndex + 1 : 0;
return sameCategoryPatternsWithSingleWrapper[nextPatternIndex];
}
const ComponentToUse = as;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ComponentToUse, {
label: (0,external_wp_i18n_namespaceObject.__)('Shuffle'),
icon: library_shuffle,
className: "block-editor-block-toolbar-shuffle",
onClick: () => {
const nextPattern = getNextPattern();
nextPattern.blocks[0].attributes = {
...nextPattern.blocks[0].attributes,
metadata: {
...nextPattern.blocks[0].attributes.metadata,
categories
}
};
replaceBlocks(clientId, nextPattern.blocks);
}
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-toolbar/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Renders the block toolbar.
*
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-toolbar/README.md
*
* @param {Object} props Components props.
* @param {boolean} props.hideDragHandle Show or hide the Drag Handle for drag and drop functionality.
* @param {boolean} props.focusOnMount Focus the toolbar when mounted.
* @param {number} props.__experimentalInitialIndex The initial index of the toolbar item to focus.
* @param {Function} props.__experimentalOnIndexChange Callback function to be called when the index of the focused toolbar item changes.
* @param {string} props.variant Style variant of the toolbar, also passed to the Dropdowns rendered from Block Toolbar Buttons.
*/
function PrivateBlockToolbar({
hideDragHandle,
focusOnMount,
__experimentalInitialIndex,
__experimentalOnIndexChange,
variant = 'unstyled'
}) {
const {
blockClientId,
blockClientIds,
isDefaultEditingMode,
blockType,
toolbarKey,
shouldShowVisualToolbar,
showParentSelector,
isUsingBindings,
hasParentPattern,
hasContentOnlyLocking,
showShuffleButton,
showSlots,
showGroupButtons,
showLockButtons
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockName,
getBlockMode,
getBlockParents,
getSelectedBlockClientIds,
isBlockValid,
getBlockEditingMode,
getBlockAttributes,
getBlockParentsByBlockName,
getTemplateLock,
isZoomOutMode
} = unlock(select(store));
const selectedBlockClientIds = getSelectedBlockClientIds();
const selectedBlockClientId = selectedBlockClientIds[0];
const parents = getBlockParents(selectedBlockClientId);
const firstParentClientId = parents[parents.length - 1];
const parentBlockName = getBlockName(firstParentClientId);
const parentBlockType = (0,external_wp_blocks_namespaceObject.getBlockType)(parentBlockName);
const editingMode = getBlockEditingMode(selectedBlockClientId);
const _isDefaultEditingMode = editingMode === 'default';
const _blockName = getBlockName(selectedBlockClientId);
const isValid = selectedBlockClientIds.every(id => isBlockValid(id));
const isVisual = selectedBlockClientIds.every(id => getBlockMode(id) === 'visual');
const _isUsingBindings = selectedBlockClientIds.every(clientId => !!getBlockAttributes(clientId)?.metadata?.bindings);
const _hasParentPattern = selectedBlockClientIds.every(clientId => getBlockParentsByBlockName(clientId, 'core/block', true).length > 0);
// If one or more selected blocks are locked, do not show the BlockGroupToolbar.
const _hasTemplateLock = selectedBlockClientIds.some(id => getTemplateLock(id) === 'contentOnly');
return {
blockClientId: selectedBlockClientId,
blockClientIds: selectedBlockClientIds,
isDefaultEditingMode: _isDefaultEditingMode,
blockType: selectedBlockClientId && (0,external_wp_blocks_namespaceObject.getBlockType)(_blockName),
shouldShowVisualToolbar: isValid && isVisual,
toolbarKey: `${selectedBlockClientId}${firstParentClientId}`,
showParentSelector: !isZoomOutMode() && parentBlockType && getBlockEditingMode(firstParentClientId) === 'default' && (0,external_wp_blocks_namespaceObject.hasBlockSupport)(parentBlockType, '__experimentalParentSelector', true) && selectedBlockClientIds.length === 1 && _isDefaultEditingMode,
isUsingBindings: _isUsingBindings,
hasParentPattern: _hasParentPattern,
hasContentOnlyLocking: _hasTemplateLock,
showShuffleButton: isZoomOutMode(),
showSlots: !isZoomOutMode(),
showGroupButtons: !isZoomOutMode(),
showLockButtons: !isZoomOutMode()
};
}, []);
const toolbarWrapperRef = (0,external_wp_element_namespaceObject.useRef)(null);
// Handles highlighting the current block outline on hover or focus of the
// block type toolbar area.
const nodeRef = (0,external_wp_element_namespaceObject.useRef)();
const showHoveredOrFocusedGestures = useShowHoveredOrFocusedGestures({
ref: nodeRef
});
const isLargeViewport = !(0,external_wp_compose_namespaceObject.useViewportMatch)('medium', '<');
const hasBlockToolbar = useHasBlockToolbar();
if (!hasBlockToolbar) {
return null;
}
const isMultiToolbar = blockClientIds.length > 1;
const isSynced = (0,external_wp_blocks_namespaceObject.isReusableBlock)(blockType) || (0,external_wp_blocks_namespaceObject.isTemplatePart)(blockType);
// Shifts the toolbar to make room for the parent block selector.
const classes = dist_clsx('block-editor-block-contextual-toolbar', {
'has-parent': showParentSelector
});
const innerClasses = dist_clsx('block-editor-block-toolbar', {
'is-synced': isSynced,
'is-connected': isUsingBindings
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NavigableToolbar, {
focusEditorOnEscape: true,
className: classes
/* translators: accessibility text for the block toolbar */,
"aria-label": (0,external_wp_i18n_namespaceObject.__)('Block tools')
// The variant is applied as "toolbar" when undefined, which is the black border style of the dropdown from the toolbar popover.
,
variant: variant === 'toolbar' ? undefined : variant,
focusOnMount: focusOnMount,
__experimentalInitialIndex: __experimentalInitialIndex,
__experimentalOnIndexChange: __experimentalOnIndexChange
// Resets the index whenever the active block changes so
// this is not persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
ref: toolbarWrapperRef,
className: innerClasses,
children: [showParentSelector && !isMultiToolbar && isLargeViewport && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockParentSelector, {}), (shouldShowVisualToolbar || isMultiToolbar) && !hasParentPattern && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
ref: nodeRef,
...showHoveredOrFocusedGestures,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.ToolbarGroup, {
className: "block-editor-block-toolbar__block-controls",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_switcher, {
clientIds: blockClientIds,
disabled: !isDefaultEditingMode,
isUsingBindings: isUsingBindings
}), !isMultiToolbar && showLockButtons && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockLockToolbar, {
clientId: blockClientId
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_mover, {
clientIds: blockClientIds,
hideDragHandle: hideDragHandle
})]
})
}), !hasContentOnlyLocking && shouldShowVisualToolbar && isMultiToolbar && showGroupButtons && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toolbar, {}), showShuffleButton && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarGroup, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Shuffle, {
clientId: blockClientIds[0],
as: external_wp_components_namespaceObject.ToolbarButton
})
}), shouldShowVisualToolbar && showSlots && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_controls.Slot, {
group: "parent",
className: "block-editor-block-toolbar__slot"
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_controls.Slot, {
group: "block",
className: "block-editor-block-toolbar__slot"
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_controls.Slot, {
className: "block-editor-block-toolbar__slot"
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_controls.Slot, {
group: "inline",
className: "block-editor-block-toolbar__slot"
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_controls.Slot, {
group: "other",
className: "block-editor-block-toolbar__slot"
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_name_context.Provider, {
value: blockType?.name,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_toolbar_last_item.Slot, {})
})]
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockEditVisuallyButton, {
clientIds: blockClientIds
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_settings_menu, {
clientIds: blockClientIds
})]
})
}, toolbarKey);
}
/**
* Renders the block toolbar.
*
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-toolbar/README.md
*
* @param {Object} props Components props.
* @param {boolean} props.hideDragHandle Show or hide the Drag Handle for drag and drop functionality.
* @param {string} props.variant Style variant of the toolbar, also passed to the Dropdowns rendered from Block Toolbar Buttons.
*/
function BlockToolbar({
hideDragHandle,
variant
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PrivateBlockToolbar, {
hideDragHandle: hideDragHandle,
variant: variant,
focusOnMount: undefined,
__experimentalInitialIndex: undefined,
__experimentalOnIndexChange: undefined
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-tools/block-toolbar-popover.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockToolbarPopover({
clientId,
isTyping,
__unstableContentRef
}) {
const {
capturingClientId,
isInsertionPointVisible,
lastClientId
} = useSelectedBlockToolProps(clientId);
// Stores the active toolbar item index so the block toolbar can return focus
// to it when re-mounting.
const initialToolbarItemIndexRef = (0,external_wp_element_namespaceObject.useRef)();
(0,external_wp_element_namespaceObject.useEffect)(() => {
// Resets the index whenever the active block changes so this is not
// persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
initialToolbarItemIndexRef.current = undefined;
}, [clientId]);
const {
stopTyping
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const isToolbarForcedRef = (0,external_wp_element_namespaceObject.useRef)(false);
(0,external_wp_keyboardShortcuts_namespaceObject.useShortcut)('core/block-editor/focus-toolbar', () => {
isToolbarForcedRef.current = true;
stopTyping(true);
});
(0,external_wp_element_namespaceObject.useEffect)(() => {
isToolbarForcedRef.current = false;
});
// If the block has a parent with __experimentalCaptureToolbars enabled,
// the toolbar should be positioned over the topmost capturing parent.
const clientIdToPositionOver = capturingClientId || clientId;
const popoverProps = useBlockToolbarPopoverProps({
contentElement: __unstableContentRef?.current,
clientId: clientIdToPositionOver
});
return !isTyping && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_popover, {
clientId: clientIdToPositionOver,
bottomClientId: lastClientId,
className: dist_clsx('block-editor-block-list__block-popover', {
'is-insertion-point-visible': isInsertionPointVisible
}),
resize: false,
...popoverProps,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PrivateBlockToolbar
// If the toolbar is being shown because of being forced
// it should focus the toolbar right after the mount.
, {
focusOnMount: isToolbarForcedRef.current,
__experimentalInitialIndex: initialToolbarItemIndexRef.current,
__experimentalOnIndexChange: index => {
initialToolbarItemIndexRef.current = index;
},
variant: "toolbar"
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-tools/block-selection-button.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Block selection button component, displaying the label of the block. If the block
* descends from a root block, a button is displayed enabling the user to select
* the root block.
*
* @param {string} props Component props.
* @param {string} props.clientId Client ID of block.
* @param {Object} ref Reference to the component.
*
* @return {Component} The component to be rendered.
*/
function BlockSelectionButton({
clientId,
rootClientId
}, ref) {
const selected = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlock,
getBlockIndex,
hasBlockMovingClientId,
getBlockListSettings,
__unstableGetEditorMode,
getNextBlockClientId,
getPreviousBlockClientId,
canMoveBlock
} = select(store);
const {
getActiveBlockVariation,
getBlockType
} = select(external_wp_blocks_namespaceObject.store);
const index = getBlockIndex(clientId);
const {
name,
attributes
} = getBlock(clientId);
const blockType = getBlockType(name);
const orientation = getBlockListSettings(rootClientId)?.orientation;
const match = getActiveBlockVariation(name, attributes);
return {
blockMovingMode: hasBlockMovingClientId(),
editorMode: __unstableGetEditorMode(),
icon: match?.icon || blockType.icon,
label: (0,external_wp_blocks_namespaceObject.__experimentalGetAccessibleBlockLabel)(blockType, attributes, index + 1, orientation),
canMove: canMoveBlock(clientId, rootClientId),
getNextBlockClientId,
getPreviousBlockClientId
};
}, [clientId, rootClientId]);
const {
label,
icon,
blockMovingMode,
editorMode,
canMove
} = selected;
const {
setNavigationMode,
removeBlock
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
// Focus the breadcrumb in navigation mode.
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (editorMode === 'navigation') {
ref.current.focus();
(0,external_wp_a11y_namespaceObject.speak)(label);
}
}, [label, editorMode]);
const blockElement = useBlockElement(clientId);
const {
hasBlockMovingClientId,
getBlockIndex,
getBlockRootClientId,
getClientIdsOfDescendants,
getSelectedBlockClientId,
getMultiSelectedBlocksEndClientId,
getPreviousBlockClientId,
getNextBlockClientId
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
selectBlock,
clearSelectedBlock,
setBlockMovingClientId,
moveBlockToPosition
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
function onKeyDown(event) {
const {
keyCode
} = event;
const isUp = keyCode === external_wp_keycodes_namespaceObject.UP;
const isDown = keyCode === external_wp_keycodes_namespaceObject.DOWN;
const isLeft = keyCode === external_wp_keycodes_namespaceObject.LEFT;
const isRight = keyCode === external_wp_keycodes_namespaceObject.RIGHT;
const isTab = keyCode === external_wp_keycodes_namespaceObject.TAB;
const isEscape = keyCode === external_wp_keycodes_namespaceObject.ESCAPE;
const isEnter = keyCode === external_wp_keycodes_namespaceObject.ENTER;
const isSpace = keyCode === external_wp_keycodes_namespaceObject.SPACE;
const isShift = event.shiftKey;
if (keyCode === external_wp_keycodes_namespaceObject.BACKSPACE || keyCode === external_wp_keycodes_namespaceObject.DELETE) {
removeBlock(clientId);
event.preventDefault();
return;
}
const selectedBlockClientId = getSelectedBlockClientId();
const selectionEndClientId = getMultiSelectedBlocksEndClientId();
const selectionBeforeEndClientId = getPreviousBlockClientId(selectionEndClientId || selectedBlockClientId);
const selectionAfterEndClientId = getNextBlockClientId(selectionEndClientId || selectedBlockClientId);
const navigateUp = isTab && isShift || isUp;
const navigateDown = isTab && !isShift || isDown;
// Move out of current nesting level (no effect if at root level).
const navigateOut = isLeft;
// Move into next nesting level (no effect if the current block has no innerBlocks).
const navigateIn = isRight;
let focusedBlockUid;
if (navigateUp) {
focusedBlockUid = selectionBeforeEndClientId;
} else if (navigateDown) {
focusedBlockUid = selectionAfterEndClientId;
} else if (navigateOut) {
var _getBlockRootClientId;
focusedBlockUid = (_getBlockRootClientId = getBlockRootClientId(selectedBlockClientId)) !== null && _getBlockRootClientId !== void 0 ? _getBlockRootClientId : selectedBlockClientId;
} else if (navigateIn) {
var _getClientIdsOfDescen;
focusedBlockUid = (_getClientIdsOfDescen = getClientIdsOfDescendants(selectedBlockClientId)[0]) !== null && _getClientIdsOfDescen !== void 0 ? _getClientIdsOfDescen : selectedBlockClientId;
}
const startingBlockClientId = hasBlockMovingClientId();
if (isEscape && startingBlockClientId && !event.defaultPrevented) {
setBlockMovingClientId(null);
event.preventDefault();
}
if ((isEnter || isSpace) && startingBlockClientId) {
const sourceRoot = getBlockRootClientId(startingBlockClientId);
const destRoot = getBlockRootClientId(selectedBlockClientId);
const sourceBlockIndex = getBlockIndex(startingBlockClientId);
let destinationBlockIndex = getBlockIndex(selectedBlockClientId);
if (sourceBlockIndex < destinationBlockIndex && sourceRoot === destRoot) {
destinationBlockIndex -= 1;
}
moveBlockToPosition(startingBlockClientId, sourceRoot, destRoot, destinationBlockIndex);
selectBlock(startingBlockClientId);
setBlockMovingClientId(null);
}
// Prevent the block from being moved into itself.
if (startingBlockClientId && selectedBlockClientId === startingBlockClientId && navigateIn) {
return;
}
if (navigateDown || navigateUp || navigateOut || navigateIn) {
if (focusedBlockUid) {
event.preventDefault();
selectBlock(focusedBlockUid);
} else if (isTab && selectedBlockClientId) {
let nextTabbable;
if (navigateDown) {
nextTabbable = blockElement;
do {
nextTabbable = external_wp_dom_namespaceObject.focus.tabbable.findNext(nextTabbable);
} while (nextTabbable && blockElement.contains(nextTabbable));
if (!nextTabbable) {
nextTabbable = blockElement.ownerDocument.defaultView.frameElement;
nextTabbable = external_wp_dom_namespaceObject.focus.tabbable.findNext(nextTabbable);
}
} else {
nextTabbable = external_wp_dom_namespaceObject.focus.tabbable.findPrevious(blockElement);
}
if (nextTabbable) {
event.preventDefault();
nextTabbable.focus();
clearSelectedBlock();
}
}
}
}
const classNames = dist_clsx('block-editor-block-list__block-selection-button', {
'is-block-moving-mode': !!blockMovingMode
});
const dragHandleLabel = (0,external_wp_i18n_namespaceObject.__)('Drag');
const showBlockDraggable = canMove && editorMode === 'navigation';
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: classNames,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.Flex, {
justify: "center",
className: "block-editor-block-list__block-selection-button__content",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexItem, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_icon, {
icon: icon,
showColors: true
})
}), showBlockDraggable && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexItem, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_draggable, {
clientIds: [clientId],
children: draggableProps => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button
// TODO: Switch to `true` (40px size) if possible
, {
__next40pxDefaultSize: false,
icon: drag_handle,
className: "block-selection-button_drag-handle",
label: dragHandleLabel
// Should not be able to tab to drag handle as this
// button can only be used with a pointer device.
,
tabIndex: "-1",
...draggableProps
})
})
}), editorMode === 'navigation' && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexItem, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button
// TODO: Switch to `true` (40px size) if possible
, {
__next40pxDefaultSize: false,
ref: ref,
onClick: editorMode === 'navigation' ? () => setNavigationMode(false) : undefined,
onKeyDown: onKeyDown,
label: label,
showTooltip: false,
className: "block-selection-button_select-button",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockTitle, {
clientId: clientId,
maximumLength: 35
})
})
})]
})
});
}
/* harmony default export */ const block_selection_button = ((0,external_wp_element_namespaceObject.forwardRef)(BlockSelectionButton));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-tools/block-toolbar-breadcrumb.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockToolbarBreadcrumb({
clientId,
__unstableContentRef
}, ref) {
const {
capturingClientId,
isInsertionPointVisible,
lastClientId,
rootClientId
} = useSelectedBlockToolProps(clientId);
const popoverProps = useBlockToolbarPopoverProps({
contentElement: __unstableContentRef?.current,
clientId
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PrivateBlockPopover, {
clientId: capturingClientId || clientId,
bottomClientId: lastClientId,
className: dist_clsx('block-editor-block-list__block-popover', {
'is-insertion-point-visible': isInsertionPointVisible
}),
resize: false,
...popoverProps,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_selection_button, {
ref: ref,
clientId: clientId,
rootClientId: rootClientId
})
});
}
/* harmony default export */ const block_toolbar_breadcrumb = ((0,external_wp_element_namespaceObject.forwardRef)(BlockToolbarBreadcrumb));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-tools/zoom-out-mode-inserter-button.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
function ZoomOutModeInserterButton({
isVisible,
onClick
}) {
const [zoomOutModeInserterButtonHovered, setZoomOutModeInserterButtonHovered] = (0,external_wp_element_namespaceObject.useState)(false);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
variant: "primary",
icon: library_plus,
size: "compact",
className: dist_clsx('block-editor-button-pattern-inserter__button', 'block-editor-block-tools__zoom-out-mode-inserter-button', {
'is-visible': isVisible || zoomOutModeInserterButtonHovered
}),
onClick: onClick,
onMouseOver: () => {
setZoomOutModeInserterButtonHovered(true);
},
onMouseOut: () => {
setZoomOutModeInserterButtonHovered(false);
},
label: (0,external_wp_i18n_namespaceObject._x)('Add pattern', 'Generic label for pattern inserter button')
});
}
/* harmony default export */ const zoom_out_mode_inserter_button = (ZoomOutModeInserterButton);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-tools/zoom-out-mode-inserters.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function ZoomOutModeInserters() {
const [isReady, setIsReady] = (0,external_wp_element_namespaceObject.useState)(false);
const {
hasSelection,
blockOrder,
setInserterIsOpened,
sectionRootClientId,
selectedBlockClientId
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getSettings,
getBlockOrder,
getSelectionStart,
getSelectedBlockClientId,
getSectionRootClientId
} = unlock(select(store));
const root = getSectionRootClientId();
return {
hasSelection: !!getSelectionStart().clientId,
blockOrder: getBlockOrder(root),
sectionRootClientId: root,
setInserterIsOpened: getSettings().__experimentalSetIsInserterOpened,
selectedBlockClientId: getSelectedBlockClientId()
};
}, []);
const {
showInsertionPoint
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
// Defer the initial rendering to avoid the jumps due to the animation.
(0,external_wp_element_namespaceObject.useEffect)(() => {
const timeout = setTimeout(() => {
setIsReady(true);
}, 500);
return () => {
clearTimeout(timeout);
};
}, []);
if (!isReady || !hasSelection) {
return null;
}
const previousClientId = selectedBlockClientId;
const index = blockOrder.findIndex(clientId => selectedBlockClientId === clientId);
const nextClientId = blockOrder[index + 1];
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inbetween, {
previousClientId: previousClientId,
nextClientId: nextClientId,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(zoom_out_mode_inserter_button, {
onClick: () => {
// Hotfix for wp/6.7 where focus is not transferred to the sidebar if the
// block library is already open.
const blockLibrary = document.querySelector('[aria-label="Block Library"]');
setInserterIsOpened({
rootClientId: sectionRootClientId,
insertionIndex: index + 1,
tab: 'patterns',
category: 'all'
});
showInsertionPoint(sectionRootClientId, index + 1, {
operation: 'insert'
});
// If the block library was available before we opened it with `setInserterIsOpened`, we need to
// send focus to the block library.
if (blockLibrary) {
blockLibrary.focus();
}
}
})
});
}
/* harmony default export */ const zoom_out_mode_inserters = (ZoomOutModeInserters);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-tools/use-show-block-tools.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Source of truth for which block tools are showing in the block editor.
*
* @return {Object} Object of which block tools will be shown.
*/
function useShowBlockTools() {
return (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getSelectedBlockClientId,
getFirstMultiSelectedBlockClientId,
getBlock,
getBlockMode,
getSettings,
hasMultiSelection,
__unstableGetEditorMode,
isTyping
} = unlock(select(store));
const clientId = getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
const block = getBlock(clientId);
const editorMode = __unstableGetEditorMode();
const hasSelectedBlock = !!clientId && !!block;
const isEmptyDefaultBlock = hasSelectedBlock && (0,external_wp_blocks_namespaceObject.isUnmodifiedDefaultBlock)(block) && getBlockMode(clientId) !== 'html';
const _showEmptyBlockSideInserter = clientId && !isTyping() && editorMode === 'edit' && isEmptyDefaultBlock;
const maybeShowBreadcrumb = hasSelectedBlock && !hasMultiSelection() && editorMode === 'navigation';
const _showBlockToolbarPopover = !getSettings().hasFixedToolbar && !_showEmptyBlockSideInserter && hasSelectedBlock && !isEmptyDefaultBlock && !maybeShowBreadcrumb;
return {
showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
showBreadcrumb: !_showEmptyBlockSideInserter && maybeShowBreadcrumb,
showBlockToolbarPopover: _showBlockToolbarPopover
};
}, []);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-tools/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function block_tools_selector(select) {
const {
getSelectedBlockClientId,
getFirstMultiSelectedBlockClientId,
getSettings,
__unstableGetEditorMode,
isTyping
} = select(store);
const clientId = getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
const editorMode = __unstableGetEditorMode();
return {
clientId,
hasFixedToolbar: getSettings().hasFixedToolbar,
isTyping: isTyping(),
isZoomOutMode: editorMode === 'zoom-out'
};
}
/**
* Renders block tools (the block toolbar, select/navigation mode toolbar, the
* insertion point and a slot for the inline rich text toolbar). Must be wrapped
* around the block content and editor styles wrapper or iframe.
*
* @param {Object} $0 Props.
* @param {Object} $0.children The block content and style container.
* @param {Object} $0.__unstableContentRef Ref holding the content scroll container.
*/
function BlockTools({
children,
__unstableContentRef,
...props
}) {
const {
clientId,
hasFixedToolbar,
isTyping,
isZoomOutMode
} = (0,external_wp_data_namespaceObject.useSelect)(block_tools_selector, []);
const isMatch = (0,external_wp_keyboardShortcuts_namespaceObject.__unstableUseShortcutEventMatch)();
const {
getBlocksByClientId,
getSelectedBlockClientIds,
getBlockRootClientId,
isGroupable
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
getGroupingBlockName
} = (0,external_wp_data_namespaceObject.useSelect)(external_wp_blocks_namespaceObject.store);
const {
showEmptyBlockSideInserter,
showBreadcrumb,
showBlockToolbarPopover
} = useShowBlockTools();
const {
clearSelectedBlock,
duplicateBlocks,
removeBlocks,
replaceBlocks,
insertAfterBlock,
insertBeforeBlock,
selectBlock,
moveBlocksUp,
moveBlocksDown,
expandBlock
} = unlock((0,external_wp_data_namespaceObject.useDispatch)(store));
const blockSelectionButtonRef = (0,external_wp_element_namespaceObject.useRef)();
function onKeyDown(event) {
if (event.defaultPrevented) {
return;
}
if (isMatch('core/block-editor/move-up', event)) {
const clientIds = getSelectedBlockClientIds();
if (clientIds.length) {
event.preventDefault();
const rootClientId = getBlockRootClientId(clientIds[0]);
moveBlocksUp(clientIds, rootClientId);
}
} else if (isMatch('core/block-editor/move-down', event)) {
const clientIds = getSelectedBlockClientIds();
if (clientIds.length) {
event.preventDefault();
const rootClientId = getBlockRootClientId(clientIds[0]);
moveBlocksDown(clientIds, rootClientId);
}
} else if (isMatch('core/block-editor/duplicate', event)) {
const clientIds = getSelectedBlockClientIds();
if (clientIds.length) {
event.preventDefault();
duplicateBlocks(clientIds);
}
} else if (isMatch('core/block-editor/remove', event)) {
const clientIds = getSelectedBlockClientIds();
if (clientIds.length) {
event.preventDefault();
removeBlocks(clientIds);
}
} else if (isMatch('core/block-editor/insert-after', event)) {
const clientIds = getSelectedBlockClientIds();
if (clientIds.length) {
event.preventDefault();
insertAfterBlock(clientIds[clientIds.length - 1]);
}
} else if (isMatch('core/block-editor/insert-before', event)) {
const clientIds = getSelectedBlockClientIds();
if (clientIds.length) {
event.preventDefault();
insertBeforeBlock(clientIds[0]);
}
} else if (isMatch('core/block-editor/unselect', event)) {
if (event.target.closest('[role=toolbar]')) {
// This shouldn't be necessary, but we have a combination of a few things all combining to create a situation where:
// - Because the block toolbar uses createPortal to populate the block toolbar fills, we can't rely on the React event bubbling to hit the onKeyDown listener for the block toolbar
// - Since we can't use the React tree, we use the DOM tree which _should_ handle the event bubbling correctly from a `createPortal` element.
// - This bubbles via the React tree, which hits this `unselect` escape keypress before the block toolbar DOM event listener has access to it.
// An alternative would be to remove the addEventListener on the navigableToolbar and use this event to handle it directly right here. That feels hacky too though.
return;
}
const clientIds = getSelectedBlockClientIds();
if (clientIds.length > 1) {
event.preventDefault();
// If there is more than one block selected, select the first
// block so that focus is directed back to the beginning of the selection.
// In effect, to the user this feels like deselecting the multi-selection.
selectBlock(clientIds[0]);
} else if (clientIds.length === 1 && event.target === blockSelectionButtonRef?.current) {
event.preventDefault();
clearSelectedBlock();
getEditorRegion(__unstableContentRef.current)?.focus();
}
} else if (isMatch('core/block-editor/collapse-list-view', event)) {
// If focus is currently within a text field, such as a rich text block or other editable field,
// skip collapsing the list view, and allow the keyboard shortcut to be handled by the text field.
// This condition checks for both the active element and the active element within an iframed editor.
if ((0,external_wp_dom_namespaceObject.isTextField)(event.target) || (0,external_wp_dom_namespaceObject.isTextField)(event.target?.contentWindow?.document?.activeElement)) {
return;
}
event.preventDefault();
expandBlock(clientId);
} else if (isMatch('core/block-editor/group', event)) {
const clientIds = getSelectedBlockClientIds();
if (clientIds.length > 1 && isGroupable(clientIds)) {
event.preventDefault();
const blocks = getBlocksByClientId(clientIds);
const groupingBlockName = getGroupingBlockName();
const newBlocks = (0,external_wp_blocks_namespaceObject.switchToBlockType)(blocks, groupingBlockName);
replaceBlocks(clientIds, newBlocks);
(0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.__)('Selected blocks are grouped.'));
}
}
}
const blockToolbarRef = use_popover_scroll(__unstableContentRef);
const blockToolbarAfterRef = use_popover_scroll(__unstableContentRef);
return (
/*#__PURE__*/
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
...props,
onKeyDown: onKeyDown,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(insertion_point_InsertionPointOpenRef.Provider, {
value: (0,external_wp_element_namespaceObject.useRef)(false),
children: [!isTyping && !isZoomOutMode && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InsertionPoint, {
__unstableContentRef: __unstableContentRef
}), showEmptyBlockSideInserter && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(EmptyBlockInserter, {
__unstableContentRef: __unstableContentRef,
clientId: clientId
}), showBlockToolbarPopover && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockToolbarPopover, {
__unstableContentRef: __unstableContentRef,
clientId: clientId,
isTyping: isTyping
}), showBreadcrumb && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_toolbar_breadcrumb, {
ref: blockSelectionButtonRef,
__unstableContentRef: __unstableContentRef,
clientId: clientId
}), !isZoomOutMode && !hasFixedToolbar && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Popover.Slot, {
name: "block-toolbar",
ref: blockToolbarRef
}), children, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Popover.Slot, {
name: "__unstable-block-tools-after",
ref: blockToolbarAfterRef
}), isZoomOutMode && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(zoom_out_mode_inserters, {
__unstableContentRef: __unstableContentRef
})]
})
})
);
}
;// CONCATENATED MODULE: external ["wp","commands"]
const external_wp_commands_namespaceObject = window["wp"]["commands"];
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/move-to.js
/**
* WordPress dependencies
*/
const move_to_moveTo = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M19.75 9c0-1.257-.565-2.197-1.39-2.858-.797-.64-1.827-1.017-2.815-1.247-1.802-.42-3.703-.403-4.383-.396L11 4.5V6l.177-.001c.696-.006 2.416-.02 4.028.356.887.207 1.67.518 2.216.957.52.416.829.945.829 1.688 0 .592-.167.966-.407 1.23-.255.281-.656.508-1.236.674-1.19.34-2.82.346-4.607.346h-.077c-1.692 0-3.527 0-4.942.404-.732.209-1.424.545-1.935 1.108-.526.579-.796 1.33-.796 2.238 0 1.257.565 2.197 1.39 2.858.797.64 1.827 1.017 2.815 1.247 1.802.42 3.703.403 4.383.396L13 19.5h.714V22L18 18.5 13.714 15v3H13l-.177.001c-.696.006-2.416.02-4.028-.356-.887-.207-1.67-.518-2.216-.957-.52-.416-.829-.945-.829-1.688 0-.592.167-.966.407-1.23.255-.281.656-.508 1.237-.674 1.189-.34 2.819-.346 4.606-.346h.077c1.692 0 3.527 0 4.941-.404.732-.209 1.425-.545 1.936-1.108.526-.579.796-1.33.796-2.238z"
})
});
/* harmony default export */ const move_to = (move_to_moveTo);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/ungroup.js
/**
* WordPress dependencies
*/
const ungroup = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M18 4h-7c-1.1 0-2 .9-2 2v7c0 1.1.9 2 2 2h7c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm.5 9c0 .3-.2.5-.5.5h-7c-.3 0-.5-.2-.5-.5V6c0-.3.2-.5.5-.5h7c.3 0 .5.2.5.5v7zm-5 5c0 .3-.2.5-.5.5H6c-.3 0-.5-.2-.5-.5v-7c0-.3.2-.5.5-.5h1V9H6c-1.1 0-2 .9-2 2v7c0 1.1.9 2 2 2h7c1.1 0 2-.9 2-2v-1h-1.5v1z"
})
});
/* harmony default export */ const library_ungroup = (ungroup);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/trash.js
/**
* WordPress dependencies
*/
const trash = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M12 5.5A2.25 2.25 0 0 0 9.878 7h4.244A2.251 2.251 0 0 0 12 5.5ZM12 4a3.751 3.751 0 0 0-3.675 3H5v1.5h1.27l.818 8.997a2.75 2.75 0 0 0 2.739 2.501h4.347a2.75 2.75 0 0 0 2.738-2.5L17.73 8.5H19V7h-3.325A3.751 3.751 0 0 0 12 4Zm4.224 4.5H7.776l.806 8.861a1.25 1.25 0 0 0 1.245 1.137h4.347a1.25 1.25 0 0 0 1.245-1.137l.805-8.861Z"
})
});
/* harmony default export */ const library_trash = (trash);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/use-block-commands/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const useTransformCommands = () => {
const {
replaceBlocks,
multiSelect
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const {
blocks,
clientIds,
canRemove,
possibleBlockTransformations,
invalidSelection
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockRootClientId,
getBlockTransformItems,
getSelectedBlockClientIds,
getBlocksByClientId,
canRemoveBlocks
} = select(store);
const selectedBlockClientIds = getSelectedBlockClientIds();
const selectedBlocks = getBlocksByClientId(selectedBlockClientIds);
// selectedBlocks can have `null`s when something tries to call `selectBlock` with an inexistent clientId.
// These nulls will cause fatal errors down the line.
// In order to prevent discrepancies between selectedBlockClientIds and selectedBlocks, we effectively treat the entire selection as invalid.
// @see https://github.com/WordPress/gutenberg/pull/59410#issuecomment-2006304536
if (selectedBlocks.filter(block => !block).length > 0) {
return {
invalidSelection: true
};
}
const rootClientId = getBlockRootClientId(selectedBlockClientIds[0]);
return {
blocks: selectedBlocks,
clientIds: selectedBlockClientIds,
possibleBlockTransformations: getBlockTransformItems(selectedBlocks, rootClientId),
canRemove: canRemoveBlocks(selectedBlockClientIds),
invalidSelection: false
};
}, []);
if (invalidSelection) {
return {
isLoading: false,
commands: []
};
}
const isTemplate = blocks.length === 1 && (0,external_wp_blocks_namespaceObject.isTemplatePart)(blocks[0]);
function selectForMultipleBlocks(insertedBlocks) {
if (insertedBlocks.length > 1) {
multiSelect(insertedBlocks[0].clientId, insertedBlocks[insertedBlocks.length - 1].clientId);
}
}
// Simple block tranformation based on the `Block Transforms` API.
function onBlockTransform(name) {
const newBlocks = (0,external_wp_blocks_namespaceObject.switchToBlockType)(blocks, name);
replaceBlocks(clientIds, newBlocks);
selectForMultipleBlocks(newBlocks);
}
/**
* The `isTemplate` check is a stopgap solution here.
* Ideally, the Transforms API should handle this
* by allowing to exclude blocks from wildcard transformations.
*/
const hasPossibleBlockTransformations = !!possibleBlockTransformations.length && canRemove && !isTemplate;
if (!clientIds || clientIds.length < 1 || !hasPossibleBlockTransformations) {
return {
isLoading: false,
commands: []
};
}
const commands = possibleBlockTransformations.map(transformation => {
const {
name,
title,
icon
} = transformation;
return {
name: 'core/block-editor/transform-to-' + name.replace('/', '-'),
/* translators: %s: Block or block variation name. */
label: (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Transform to %s'), title),
icon: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_icon, {
icon: icon
}),
callback: ({
close
}) => {
onBlockTransform(name);
close();
}
};
});
return {
isLoading: false,
commands
};
};
const useActionsCommands = () => {
const {
clientIds
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getSelectedBlockClientIds
} = select(store);
const selectedBlockClientIds = getSelectedBlockClientIds();
return {
clientIds: selectedBlockClientIds
};
}, []);
const {
getBlockRootClientId,
canMoveBlocks,
getBlockCount
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
setBlockMovingClientId,
setNavigationMode,
selectBlock
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
if (!clientIds || clientIds.length < 1) {
return {
isLoading: false,
commands: []
};
}
const rootClientId = getBlockRootClientId(clientIds[0]);
const canMove = canMoveBlocks(clientIds) && getBlockCount(rootClientId) !== 1;
const commands = [];
if (canMove) {
commands.push({
name: 'move-to',
label: (0,external_wp_i18n_namespaceObject.__)('Move to'),
callback: () => {
setNavigationMode(true);
selectBlock(clientIds[0]);
setBlockMovingClientId(clientIds[0]);
},
icon: move_to
});
}
return {
isLoading: false,
commands: commands.map(command => ({
...command,
name: 'core/block-editor/action-' + command.name,
callback: ({
close
}) => {
command.callback();
close();
}
}))
};
};
const useQuickActionsCommands = () => {
const {
clientIds,
isUngroupable,
isGroupable
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getSelectedBlockClientIds,
isUngroupable: _isUngroupable,
isGroupable: _isGroupable
} = select(store);
const selectedBlockClientIds = getSelectedBlockClientIds();
return {
clientIds: selectedBlockClientIds,
isUngroupable: _isUngroupable(),
isGroupable: _isGroupable()
};
}, []);
const {
canInsertBlockType,
getBlockRootClientId,
getBlocksByClientId,
canRemoveBlocks
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
getDefaultBlockName,
getGroupingBlockName
} = (0,external_wp_data_namespaceObject.useSelect)(external_wp_blocks_namespaceObject.store);
const blocks = getBlocksByClientId(clientIds);
const {
removeBlocks,
replaceBlocks,
duplicateBlocks,
insertAfterBlock,
insertBeforeBlock
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const onGroup = () => {
if (!blocks.length) {
return;
}
const groupingBlockName = getGroupingBlockName();
// Activate the `transform` on `core/group` which does the conversion.
const newBlocks = (0,external_wp_blocks_namespaceObject.switchToBlockType)(blocks, groupingBlockName);
if (!newBlocks) {
return;
}
replaceBlocks(clientIds, newBlocks);
};
const onUngroup = () => {
if (!blocks.length) {
return;
}
const innerBlocks = blocks[0].innerBlocks;
if (!innerBlocks.length) {
return;
}
replaceBlocks(clientIds, innerBlocks);
};
if (!clientIds || clientIds.length < 1) {
return {
isLoading: false,
commands: []
};
}
const rootClientId = getBlockRootClientId(clientIds[0]);
const canInsertDefaultBlock = canInsertBlockType(getDefaultBlockName(), rootClientId);
const canDuplicate = blocks.every(block => {
return !!block && (0,external_wp_blocks_namespaceObject.hasBlockSupport)(block.name, 'multiple', true) && canInsertBlockType(block.name, rootClientId);
});
const canRemove = canRemoveBlocks(clientIds);
const commands = [];
if (canDuplicate) {
commands.push({
name: 'duplicate',
label: (0,external_wp_i18n_namespaceObject.__)('Duplicate'),
callback: () => duplicateBlocks(clientIds, true),
icon: library_copy
});
}
if (canInsertDefaultBlock) {
commands.push({
name: 'add-before',
label: (0,external_wp_i18n_namespaceObject.__)('Add before'),
callback: () => {
const clientId = Array.isArray(clientIds) ? clientIds[0] : clientId;
insertBeforeBlock(clientId);
},
icon: library_plus
}, {
name: 'add-after',
label: (0,external_wp_i18n_namespaceObject.__)('Add after'),
callback: () => {
const clientId = Array.isArray(clientIds) ? clientIds[clientIds.length - 1] : clientId;
insertAfterBlock(clientId);
},
icon: library_plus
});
}
if (isGroupable) {
commands.push({
name: 'Group',
label: (0,external_wp_i18n_namespaceObject.__)('Group'),
callback: onGroup,
icon: library_group
});
}
if (isUngroupable) {
commands.push({
name: 'ungroup',
label: (0,external_wp_i18n_namespaceObject.__)('Ungroup'),
callback: onUngroup,
icon: library_ungroup
});
}
if (canRemove) {
commands.push({
name: 'remove',
label: (0,external_wp_i18n_namespaceObject.__)('Delete'),
callback: () => removeBlocks(clientIds, true),
icon: library_trash
});
}
return {
isLoading: false,
commands: commands.map(command => ({
...command,
name: 'core/block-editor/action-' + command.name,
callback: ({
close
}) => {
command.callback();
close();
}
}))
};
};
const useBlockCommands = () => {
(0,external_wp_commands_namespaceObject.useCommandLoader)({
name: 'core/block-editor/blockTransforms',
hook: useTransformCommands
});
(0,external_wp_commands_namespaceObject.useCommandLoader)({
name: 'core/block-editor/blockActions',
hook: useActionsCommands
});
(0,external_wp_commands_namespaceObject.useCommandLoader)({
name: 'core/block-editor/blockQuickActions',
hook: useQuickActionsCommands,
context: 'block-selection-edit'
});
};
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-canvas/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
// EditorStyles is a memoized component, so avoid passing a new
// object reference on each render.
const EDITOR_STYLE_TRANSFORM_OPTIONS = {
// Don't transform selectors that already specify `.editor-styles-wrapper`.
ignoredSelectors: [/\.editor-styles-wrapper/gi]
};
function ExperimentalBlockCanvas({
shouldIframe = true,
height = '300px',
children = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockList, {}),
styles,
contentRef: contentRefProp,
iframeProps
}) {
useBlockCommands();
const resetTypingRef = useMouseMoveTypingReset();
const clearerRef = useBlockSelectionClearer();
const localRef = (0,external_wp_element_namespaceObject.useRef)();
const contentRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([contentRefProp, clearerRef, localRef]);
if (!shouldIframe) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(BlockTools, {
__unstableContentRef: localRef,
style: {
height,
display: 'flex'
},
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(editor_styles, {
styles: styles,
scope: ":where(.editor-styles-wrapper)",
transformOptions: EDITOR_STYLE_TRANSFORM_OPTIONS
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(writing_flow, {
ref: contentRef,
className: "editor-styles-wrapper",
tabIndex: -1,
style: {
height: '100%',
width: '100%'
},
children: children
})]
});
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockTools, {
__unstableContentRef: localRef,
style: {
height,
display: 'flex'
},
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(iframe, {
...iframeProps,
ref: resetTypingRef,
contentRef: contentRef,
style: {
...iframeProps?.style
},
name: "editor-canvas",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(editor_styles, {
styles: styles
}), children]
})
});
}
/**
* BlockCanvas component is a component used to display the canvas of the block editor.
* What we call the canvas is an iframe containing the block list that you can manipulate.
* The component is also responsible of wiring up all the necessary hooks to enable
* the keyboard navigation across blocks in the editor and inject content styles into the iframe.
*
* @example
*
* ```jsx
* function MyBlockEditor() {
* const [ blocks, updateBlocks ] = useState([]);
* return (
* <BlockEditorProvider
* value={ blocks }
* onInput={ updateBlocks }
* onChange={ persistBlocks }
* >
* <BlockCanvas height="400px" />
* </BlockEditorProvider>
* );
* }
* ```
*
* @param {Object} props Component props.
* @param {string} props.height Canvas height, defaults to 300px.
* @param {Array} props.styles Content styles to inject into the iframe.
* @param {Element} props.children Content of the canvas, defaults to the BlockList component.
* @return {Element} Block Breadcrumb.
*/
function BlockCanvas({
children,
height,
styles
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ExperimentalBlockCanvas, {
height: height,
styles: styles,
children: children
});
}
/* harmony default export */ const block_canvas = (BlockCanvas);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/color-style-selector/index.js
/**
* WordPress dependencies
*/
const ColorSelectorSVGIcon = () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 20 20",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Path, {
d: "M7.434 5l3.18 9.16H8.538l-.692-2.184H4.628l-.705 2.184H2L5.18 5h2.254zm-1.13 1.904h-.115l-1.148 3.593H7.44L6.304 6.904zM14.348 7.006c1.853 0 2.9.876 2.9 2.374v4.78h-1.79v-.914h-.114c-.362.64-1.123 1.022-2.031 1.022-1.346 0-2.292-.826-2.292-2.108 0-1.27.972-2.006 2.71-2.107l1.696-.102V9.38c0-.584-.42-.914-1.18-.914-.667 0-1.112.228-1.264.647h-1.701c.12-1.295 1.307-2.107 3.066-2.107zm1.079 4.1l-1.416.09c-.793.056-1.18.342-1.18.844 0 .52.45.837 1.091.837.857 0 1.505-.545 1.505-1.256v-.515z"
})
});
/**
* Color Selector Icon component.
*
* @param {Object} props Component properties.
* @param {Object} props.style Style object.
* @param {string} props.className Class name for component.
*
* @return {*} React Icon component.
*/
const ColorSelectorIcon = ({
style,
className
}) => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-library-colors-selector__icon-container",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: `${className} block-library-colors-selector__state-selection`,
style: style,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorSelectorSVGIcon, {})
})
});
};
/**
* Renders the Colors Selector Toolbar with the icon button.
*
* @param {Object} props Component properties.
* @param {Object} props.TextColor Text color component that wraps icon.
* @param {Object} props.BackgroundColor Background color component that wraps icon.
*
* @return {*} React toggle button component.
*/
const renderToggleComponent = ({
TextColor,
BackgroundColor
}) => ({
onToggle,
isOpen
}) => {
const openOnArrowDown = event => {
if (!isOpen && event.keyCode === external_wp_keycodes_namespaceObject.DOWN) {
event.preventDefault();
onToggle();
}
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarGroup, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarButton, {
className: "components-toolbar__control block-library-colors-selector__toggle",
label: (0,external_wp_i18n_namespaceObject.__)('Open Colors Selector'),
onClick: onToggle,
onKeyDown: openOnArrowDown,
icon: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BackgroundColor, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TextColor, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorSelectorIcon, {})
})
})
})
});
};
const BlockColorsStyleSelector = ({
children,
...other
}) => {
external_wp_deprecated_default()(`wp.blockEditor.BlockColorsStyleSelector`, {
alternative: 'block supports API',
since: '6.1',
version: '6.3'
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Dropdown, {
popoverProps: {
placement: 'bottom-start'
},
className: "block-library-colors-selector",
contentClassName: "block-library-colors-selector__popover",
renderToggle: renderToggleComponent(other),
renderContent: () => children
});
};
/* harmony default export */ const color_style_selector = (BlockColorsStyleSelector);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/list-view.js
/**
* WordPress dependencies
*/
const listView = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M3 6h11v1.5H3V6Zm3.5 5.5h11V13h-11v-1.5ZM21 17H10v1.5h11V17Z"
})
});
/* harmony default export */ const list_view = (listView);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/context.js
/**
* WordPress dependencies
*/
const ListViewContext = (0,external_wp_element_namespaceObject.createContext)({});
const useListViewContext = () => (0,external_wp_element_namespaceObject.useContext)(ListViewContext);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/aria-referenced-text.js
/**
* WordPress dependencies
*/
/**
* A component specifically designed to be used as an element referenced
* by ARIA attributes such as `aria-labelledby` or `aria-describedby`.
*
* @param {Object} props Props.
* @param {import('react').ReactNode} props.children
*/
function AriaReferencedText({
children,
...props
}) {
const ref = (0,external_wp_element_namespaceObject.useRef)();
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (ref.current) {
// This seems like a no-op, but it fixes a bug in Firefox where
// it fails to recompute the text when only the text node changes.
// @see https://github.com/WordPress/gutenberg/pull/51035
ref.current.textContent = ref.current.textContent;
}
}, [children]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
hidden: true,
...props,
ref: ref,
children: children
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/appender.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const Appender = (0,external_wp_element_namespaceObject.forwardRef)(({
nestingLevel,
blockCount,
clientId,
...props
}, ref) => {
const {
insertedBlock,
setInsertedBlock
} = useListViewContext();
const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(Appender);
const hideInserter = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getTemplateLock,
__unstableGetEditorMode
} = select(store);
return !!getTemplateLock(clientId) || __unstableGetEditorMode() === 'zoom-out';
}, [clientId]);
const blockTitle = useBlockDisplayTitle({
clientId,
context: 'list-view'
});
const insertedBlockTitle = useBlockDisplayTitle({
clientId: insertedBlock?.clientId,
context: 'list-view'
});
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (!insertedBlockTitle?.length) {
return;
}
(0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.sprintf)(
// translators: %s: name of block being inserted (i.e. Paragraph, Image, Group etc)
(0,external_wp_i18n_namespaceObject.__)('%s block inserted'), insertedBlockTitle), 'assertive');
}, [insertedBlockTitle]);
if (hideInserter) {
return null;
}
const descriptionId = `list-view-appender__${instanceId}`;
const description = (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: 1: The name of the block. 2: The numerical position of the block. 3: The level of nesting for the block. */
(0,external_wp_i18n_namespaceObject.__)('Append to %1$s block at position %2$d, Level %3$d'), blockTitle, blockCount + 1, nestingLevel);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "list-view-appender",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inserter, {
ref: ref,
rootClientId: clientId,
position: "bottom right",
isAppender: true,
selectBlockOnInsert: false,
shouldDirectInsert: false,
__experimentalIsQuick: true,
...props,
toggleProps: {
'aria-describedby': descriptionId
},
onSelectOrClose: maybeInsertedBlock => {
if (maybeInsertedBlock?.clientId) {
setInsertedBlock(maybeInsertedBlock);
}
}
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AriaReferencedText, {
id: descriptionId,
children: description
})]
});
});
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/leaf.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const AnimatedTreeGridRow = dist_esm_it(external_wp_components_namespaceObject.__experimentalTreeGridRow);
const ListViewLeaf = (0,external_wp_element_namespaceObject.forwardRef)(({
isDragged,
isSelected,
position,
level,
rowCount,
children,
className,
path,
...props
}, ref) => {
const animationRef = use_moving_animation({
clientId: props['data-block'],
enableAnimation: true,
triggerAnimationOnChange: path
});
const mergedRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, animationRef]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AnimatedTreeGridRow, {
ref: mergedRef,
className: dist_clsx('block-editor-list-view-leaf', className),
level: level,
positionInSet: position,
setSize: rowCount,
isExpanded: undefined,
...props,
children: children
});
});
/* harmony default export */ const leaf = (ListViewLeaf);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/use-list-view-scroll-into-view.js
/**
* WordPress dependencies
*/
function useListViewScrollIntoView({
isSelected,
selectedClientIds,
rowItemRef
}) {
const isSingleSelection = selectedClientIds.length === 1;
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
// Skip scrolling into view if this particular block isn't selected,
// or if more than one block is selected overall. This is to avoid
// scrolling the view in a multi selection where the user has intentionally
// selected multiple blocks within the list view, but the initially
// selected block may be out of view.
if (!isSelected || !isSingleSelection || !rowItemRef.current) {
return;
}
const scrollContainer = (0,external_wp_dom_namespaceObject.getScrollContainer)(rowItemRef.current);
const {
ownerDocument
} = rowItemRef.current;
const windowScroll = scrollContainer === ownerDocument.body || scrollContainer === ownerDocument.documentElement;
// If the there is no scroll container, of if the scroll container is the window,
// do not scroll into view, as the block is already in view.
if (windowScroll || !scrollContainer) {
return;
}
const rowRect = rowItemRef.current.getBoundingClientRect();
const scrollContainerRect = scrollContainer.getBoundingClientRect();
// If the selected block is not currently visible, scroll to it.
if (rowRect.top < scrollContainerRect.top || rowRect.bottom > scrollContainerRect.bottom) {
rowItemRef.current.scrollIntoView();
}
}, [isSelected, isSingleSelection, rowItemRef]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/pin-small.js
/**
* WordPress dependencies
*/
const pinSmall = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
width: "24",
height: "24",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M10.97 10.159a3.382 3.382 0 0 0-2.857.955l1.724 1.723-2.836 2.913L7 17h1.25l2.913-2.837 1.723 1.723a3.38 3.38 0 0 0 .606-.825c.33-.63.446-1.343.35-2.032L17 10.695 13.305 7l-2.334 3.159Z"
})
});
/* harmony default export */ const pin_small = (pinSmall);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/lock-small.js
/**
* WordPress dependencies
*/
const lockSmall = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M15 11h-.2V9c0-1.5-1.2-2.8-2.8-2.8S9.2 7.5 9.2 9v2H9c-.6 0-1 .4-1 1v4c0 .6.4 1 1 1h6c.6 0 1-.4 1-1v-4c0-.6-.4-1-1-1zm-1.8 0h-2.5V9c0-.7.6-1.2 1.2-1.2s1.2.6 1.2 1.2v2z"
})
});
/* harmony default export */ const lock_small = (lockSmall);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/expander.js
/**
* WordPress dependencies
*/
function ListViewExpander({
onClick
}) {
return (
/*#__PURE__*/
// Keyboard events are handled by TreeGrid see: components/src/tree-grid/index.js
//
// The expander component is implemented as a pseudo element in the w3 example
// https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html
//
// We've mimicked this by adding an icon with aria-hidden set to true to hide this from the accessibility tree.
// For the current tree grid implementation, please do not try to make this a button.
//
// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
className: "block-editor-list-view__expander",
onClick: event => onClick(event, {
forceToggle: true
}),
"aria-hidden": "true",
"data-testid": "list-view-expander",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
icon: (0,external_wp_i18n_namespaceObject.isRTL)() ? chevron_left_small : chevron_right_small
})
})
);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/use-list-view-images.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
// Maximum number of images to display in a list view row.
const MAX_IMAGES = 3;
function getImage(block) {
if (block.name !== 'core/image') {
return;
}
if (block.attributes?.url) {
return {
url: block.attributes.url,
alt: block.attributes.alt,
clientId: block.clientId
};
}
}
function getImagesFromGallery(block) {
if (block.name !== 'core/gallery' || !block.innerBlocks) {
return [];
}
const images = [];
for (const innerBlock of block.innerBlocks) {
const img = getImage(innerBlock);
if (img) {
images.push(img);
}
if (images.length >= MAX_IMAGES) {
return images;
}
}
return images;
}
function getImagesFromBlock(block, isExpanded) {
const img = getImage(block);
if (img) {
return [img];
}
return isExpanded ? [] : getImagesFromGallery(block);
}
/**
* Get a block's preview images for display within a list view row.
*
* TODO: Currently only supports images from the core/image and core/gallery
* blocks. This should be expanded to support other blocks that have images,
* potentially via an API that blocks can opt into / provide their own logic.
*
* @param {Object} props Hook properties.
* @param {string} props.clientId The block's clientId.
* @param {boolean} props.isExpanded Whether or not the block is expanded in the list view.
* @return {Array} Images.
*/
function useListViewImages({
clientId,
isExpanded
}) {
const {
block
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const _block = select(store).getBlock(clientId);
return {
block: _block
};
}, [clientId]);
const images = (0,external_wp_element_namespaceObject.useMemo)(() => {
return getImagesFromBlock(block, isExpanded);
}, [block, isExpanded]);
return images;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/block-select-button.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function ListViewBlockSelectButton({
className,
block: {
clientId
},
onClick,
onContextMenu,
onMouseDown,
onToggleExpanded,
tabIndex,
onFocus,
onDragStart,
onDragEnd,
draggable,
isExpanded,
ariaDescribedBy
}, ref) {
const blockInformation = useBlockDisplayInformation(clientId);
const blockTitle = useBlockDisplayTitle({
clientId,
context: 'list-view'
});
const {
isLocked
} = useBlockLock(clientId);
const {
isContentOnly
} = (0,external_wp_data_namespaceObject.useSelect)(select => ({
isContentOnly: select(store).getBlockEditingMode(clientId) === 'contentOnly'
}), [clientId]);
const shouldShowLockIcon = isLocked && !isContentOnly;
const isSticky = blockInformation?.positionType === 'sticky';
const images = useListViewImages({
clientId,
isExpanded
});
// The `href` attribute triggers the browser's native HTML drag operations.
// When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html.
// We need to clear any HTML drag data to prevent `pasteHandler` from firing
// inside the `useOnBlockDrop` hook.
const onDragStartHandler = event => {
event.dataTransfer.clearData();
onDragStart?.(event);
};
/**
* @param {KeyboardEvent} event
*/
function onKeyDown(event) {
if (event.keyCode === external_wp_keycodes_namespaceObject.ENTER || event.keyCode === external_wp_keycodes_namespaceObject.SPACE) {
onClick(event);
}
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("a", {
className: dist_clsx('block-editor-list-view-block-select-button', className),
onClick: onClick,
onContextMenu: onContextMenu,
onKeyDown: onKeyDown,
onMouseDown: onMouseDown,
ref: ref,
tabIndex: tabIndex,
onFocus: onFocus,
onDragStart: onDragStartHandler,
onDragEnd: onDragEnd,
draggable: draggable,
href: `#block-${clientId}`,
"aria-describedby": ariaDescribedBy,
"aria-expanded": isExpanded,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ListViewExpander, {
onClick: onToggleExpanded
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_icon, {
icon: blockInformation?.icon,
showColors: true,
context: "list-view"
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalHStack, {
alignment: "center",
className: "block-editor-list-view-block-select-button__label-wrapper",
justify: "flex-start",
spacing: 1,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
className: "block-editor-list-view-block-select-button__title",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalTruncate, {
ellipsizeMode: "auto",
children: blockTitle
})
}), blockInformation?.anchor && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
className: "block-editor-list-view-block-select-button__anchor-wrapper",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalTruncate, {
className: "block-editor-list-view-block-select-button__anchor",
ellipsizeMode: "auto",
children: blockInformation.anchor
})
}), isSticky && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
className: "block-editor-list-view-block-select-button__sticky",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
icon: pin_small
})
}), images.length ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
className: "block-editor-list-view-block-select-button__images",
"aria-hidden": true,
children: images.map((image, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
className: "block-editor-list-view-block-select-button__image",
style: {
backgroundImage: `url(${image.url})`,
zIndex: images.length - index // Ensure the first image is on top, and subsequent images are behind.
}
}, image.clientId))
}) : null, shouldShowLockIcon && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
className: "block-editor-list-view-block-select-button__lock",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
icon: lock_small
})
})]
})]
});
}
/* harmony default export */ const block_select_button = ((0,external_wp_element_namespaceObject.forwardRef)(ListViewBlockSelectButton));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/block-contents.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const ListViewBlockContents = (0,external_wp_element_namespaceObject.forwardRef)(({
onClick,
onToggleExpanded,
block,
isSelected,
position,
siblingBlockCount,
level,
isExpanded,
selectedClientIds,
...props
}, ref) => {
const {
clientId
} = block;
const {
blockMovingClientId,
selectedBlockInBlockEditor
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
hasBlockMovingClientId,
getSelectedBlockClientId
} = select(store);
return {
blockMovingClientId: hasBlockMovingClientId(),
selectedBlockInBlockEditor: getSelectedBlockClientId()
};
}, []);
const {
AdditionalBlockContent,
insertedBlock,
setInsertedBlock
} = useListViewContext();
const isBlockMoveTarget = blockMovingClientId && selectedBlockInBlockEditor === clientId;
const className = dist_clsx('block-editor-list-view-block-contents', {
'is-dropping-before': isBlockMoveTarget
});
// Only include all selected blocks if the currently clicked on block
// is one of the selected blocks. This ensures that if a user attempts
// to drag a block that isn't part of the selection, they're still able
// to drag it and rearrange its position.
const draggableClientIds = selectedClientIds.includes(clientId) ? selectedClientIds : [clientId];
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [AdditionalBlockContent && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AdditionalBlockContent, {
block: block,
insertedBlock: insertedBlock,
setInsertedBlock: setInsertedBlock
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_draggable, {
appendToOwnerDocument: true,
clientIds: draggableClientIds,
cloneClassname: "block-editor-list-view-draggable-chip",
children: ({
draggable,
onDragStart,
onDragEnd
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_select_button, {
ref: ref,
className: className,
block: block,
onClick: onClick,
onToggleExpanded: onToggleExpanded,
isSelected: isSelected,
position: position,
siblingBlockCount: siblingBlockCount,
level: level,
draggable: draggable,
onDragStart: onDragStart,
onDragEnd: onDragEnd,
isExpanded: isExpanded,
...props
})
})]
});
});
/* harmony default export */ const block_contents = (ListViewBlockContents);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/utils.js
/**
* WordPress dependencies
*/
const getBlockPositionDescription = (position, siblingCount, level) => (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: 1: The numerical position of the block. 2: The total number of blocks. 3. The level of nesting for the block. */
(0,external_wp_i18n_namespaceObject.__)('Block %1$d of %2$d, Level %3$d.'), position, siblingCount, level);
const getBlockPropertiesDescription = (blockInformation, isLocked) => [blockInformation?.positionLabel ? `${(0,external_wp_i18n_namespaceObject.sprintf)(
// translators: %s: Position of selected block, e.g. "Sticky" or "Fixed".
(0,external_wp_i18n_namespaceObject.__)('Position: %s'), blockInformation.positionLabel)}.` : undefined, isLocked ? (0,external_wp_i18n_namespaceObject.__)('This block is locked.') : undefined].filter(Boolean).join(' ');
/**
* Returns true if the client ID occurs within the block selection or multi-selection,
* or false otherwise.
*
* @param {string} clientId Block client ID.
* @param {string|string[]} selectedBlockClientIds Selected block client ID, or an array of multi-selected blocks client IDs.
*
* @return {boolean} Whether the block is in multi-selection set.
*/
const isClientIdSelected = (clientId, selectedBlockClientIds) => Array.isArray(selectedBlockClientIds) && selectedBlockClientIds.length ? selectedBlockClientIds.indexOf(clientId) !== -1 : selectedBlockClientIds === clientId;
/**
* From a start and end clientId of potentially different nesting levels,
* return the nearest-depth ids that have a common level of depth in the
* nesting hierarchy. For multiple block selection, this ensure that the
* selection is always at the same nesting level, and not split across
* separate levels.
*
* @param {string} startId The first id of a selection.
* @param {string} endId The end id of a selection, usually one that has been clicked on.
* @param {string[]} startParents An array of ancestor ids for the start id, in descending order.
* @param {string[]} endParents An array of ancestor ids for the end id, in descending order.
* @return {Object} An object containing the start and end ids.
*/
function getCommonDepthClientIds(startId, endId, startParents, endParents) {
const startPath = [...startParents, startId];
const endPath = [...endParents, endId];
const depth = Math.min(startPath.length, endPath.length) - 1;
const start = startPath[depth];
const end = endPath[depth];
return {
start,
end
};
}
/**
* Shift focus to the list view item associated with a particular clientId.
*
* @typedef {import('@wordpress/element').RefObject} RefObject
*
* @param {string} focusClientId The client ID of the block to focus.
* @param {?HTMLElement} treeGridElement The container element to search within.
*/
function focusListItem(focusClientId, treeGridElement) {
const getFocusElement = () => {
const row = treeGridElement?.querySelector(`[role=row][data-block="${focusClientId}"]`);
if (!row) {
return null;
}
// Focus the first focusable in the row, which is the ListViewBlockSelectButton.
return external_wp_dom_namespaceObject.focus.focusable.find(row)[0];
};
let focusElement = getFocusElement();
if (focusElement) {
focusElement.focus();
} else {
// The element hasn't been painted yet. Defer focusing on the next frame.
// This could happen when all blocks have been deleted and the default block
// hasn't been added to the editor yet.
window.requestAnimationFrame(() => {
focusElement = getFocusElement();
// Ignore if the element still doesn't exist.
if (focusElement) {
focusElement.focus();
}
});
}
}
/**
* Get values for the block that flag whether the block should be displaced up or down,
* whether the block is being nested, and whether the block appears after the dragged
* blocks. These values are used to determine the class names to apply to the block.
* The list view rows are displaced visually via CSS rules. Displacement rules:
* - `normal`: no displacement — used to apply a translateY of `0` so that the block
* appears in its original position, and moves to that position smoothly when dragging
* outside of the list view area.
* - `up`: the block should be displaced up, creating room beneath the block for the drop indicator.
* - `down`: the block should be displaced down, creating room above the block for the drop indicator.
*
* @param {Object} props
* @param {Object} props.blockIndexes The indexes of all the blocks in the list view, keyed by clientId.
* @param {number|null|undefined} props.blockDropTargetIndex The index of the block that the user is dropping to.
* @param {?string} props.blockDropPosition The position relative to the block that the user is dropping to.
* @param {string} props.clientId The client id for the current block.
* @param {?number} props.firstDraggedBlockIndex The index of the first dragged block.
* @param {?boolean} props.isDragged Whether the current block is being dragged. Dragged blocks skip displacement.
* @return {Object} An object containing the `displacement`, `isAfterDraggedBlocks` and `isNesting` values.
*/
function getDragDisplacementValues({
blockIndexes,
blockDropTargetIndex,
blockDropPosition,
clientId,
firstDraggedBlockIndex,
isDragged
}) {
let displacement;
let isNesting;
let isAfterDraggedBlocks;
if (!isDragged) {
isNesting = false;
const thisBlockIndex = blockIndexes[clientId];
isAfterDraggedBlocks = thisBlockIndex > firstDraggedBlockIndex;
// Determine where to displace the position of the current block, relative
// to the blocks being dragged (in their original position) and the drop target
// (the position where a user is currently dragging the blocks to).
if (blockDropTargetIndex !== undefined && blockDropTargetIndex !== null && firstDraggedBlockIndex !== undefined) {
// If the block is being dragged and there is a valid drop target,
// determine if the block being rendered should be displaced up or down.
if (thisBlockIndex !== undefined) {
if (thisBlockIndex >= firstDraggedBlockIndex && thisBlockIndex < blockDropTargetIndex) {
// If the current block appears after the set of dragged blocks
// (in their original position), but is before the drop target,
// then the current block should be displaced up.
displacement = 'up';
} else if (thisBlockIndex < firstDraggedBlockIndex && thisBlockIndex >= blockDropTargetIndex) {
// If the current block appears before the set of dragged blocks
// (in their original position), but is after the drop target,
// then the current block should be displaced down.
displacement = 'down';
} else {
displacement = 'normal';
}
isNesting = typeof blockDropTargetIndex === 'number' && blockDropTargetIndex - 1 === thisBlockIndex && blockDropPosition === 'inside';
}
} else if (blockDropTargetIndex === null && firstDraggedBlockIndex !== undefined) {
// A `null` value for `blockDropTargetIndex` indicates that the
// drop target is outside of the valid areas within the list view.
// In this case, the drag is still active, but as there is no
// valid drop target, we should remove the gap indicating where
// the block would be inserted.
if (thisBlockIndex !== undefined && thisBlockIndex >= firstDraggedBlockIndex) {
displacement = 'up';
} else {
displacement = 'normal';
}
} else if (blockDropTargetIndex !== undefined && blockDropTargetIndex !== null && firstDraggedBlockIndex === undefined) {
// If the blockdrop target is defined, but there are no dragged blocks,
// then the block should be displaced relative to the drop target.
if (thisBlockIndex !== undefined) {
if (thisBlockIndex < blockDropTargetIndex) {
displacement = 'normal';
} else {
displacement = 'down';
}
}
} else if (blockDropTargetIndex === null) {
displacement = 'normal';
}
}
return {
displacement,
isNesting,
isAfterDraggedBlocks
};
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/block.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function ListViewBlock({
block: {
clientId
},
displacement,
isAfterDraggedBlocks,
isDragged,
isNesting,
isSelected,
isBranchSelected,
selectBlock,
position,
level,
rowCount,
siblingBlockCount,
showBlockMovers,
path,
isExpanded,
selectedClientIds,
isSyncedBranch
}) {
const cellRef = (0,external_wp_element_namespaceObject.useRef)(null);
const rowRef = (0,external_wp_element_namespaceObject.useRef)(null);
const settingsRef = (0,external_wp_element_namespaceObject.useRef)(null);
const [isHovered, setIsHovered] = (0,external_wp_element_namespaceObject.useState)(false);
const [settingsAnchorRect, setSettingsAnchorRect] = (0,external_wp_element_namespaceObject.useState)();
const {
isLocked,
canEdit,
canMove
} = useBlockLock(clientId);
const isFirstSelectedBlock = isSelected && selectedClientIds[0] === clientId;
const isLastSelectedBlock = isSelected && selectedClientIds[selectedClientIds.length - 1] === clientId;
const {
toggleBlockHighlight,
duplicateBlocks,
multiSelect,
replaceBlocks,
removeBlocks,
insertAfterBlock,
insertBeforeBlock,
setOpenedBlockSettingsMenu
} = unlock((0,external_wp_data_namespaceObject.useDispatch)(store));
const {
canInsertBlockType,
getSelectedBlockClientIds,
getPreviousBlockClientId,
getBlockRootClientId,
getBlockOrder,
getBlockParents,
getBlocksByClientId,
canRemoveBlocks,
isGroupable
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
getGroupingBlockName
} = (0,external_wp_data_namespaceObject.useSelect)(external_wp_blocks_namespaceObject.store);
const blockInformation = useBlockDisplayInformation(clientId);
const {
block,
blockName,
allowRightClickOverrides
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlock,
getBlockName,
getSettings
} = select(store);
return {
block: getBlock(clientId),
blockName: getBlockName(clientId),
allowRightClickOverrides: getSettings().allowRightClickOverrides
};
}, [clientId]);
const showBlockActions =
// When a block hides its toolbar it also hides the block settings menu,
// since that menu is part of the toolbar in the editor canvas.
// List View respects this by also hiding the block settings menu.
(0,external_wp_blocks_namespaceObject.hasBlockSupport)(blockName, '__experimentalToolbar', true);
const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(ListViewBlock);
const descriptionId = `list-view-block-select-button__description-${instanceId}`;
const {
expand,
collapse,
collapseAll,
BlockSettingsMenu,
listViewInstanceId,
expandedState,
setInsertedBlock,
treeGridElementRef,
rootClientId
} = useListViewContext();
const isMatch = (0,external_wp_keyboardShortcuts_namespaceObject.__unstableUseShortcutEventMatch)();
// Determine which blocks to update:
// If the current (focused) block is part of the block selection, use the whole selection.
// If the focused block is not part of the block selection, only update the focused block.
function getBlocksToUpdate() {
const selectedBlockClientIds = getSelectedBlockClientIds();
const isUpdatingSelectedBlocks = selectedBlockClientIds.includes(clientId);
const firstBlockClientId = isUpdatingSelectedBlocks ? selectedBlockClientIds[0] : clientId;
const firstBlockRootClientId = getBlockRootClientId(firstBlockClientId);
const blocksToUpdate = isUpdatingSelectedBlocks ? selectedBlockClientIds : [clientId];
return {
blocksToUpdate,
firstBlockClientId,
firstBlockRootClientId,
selectedBlockClientIds
};
}
/**
* @param {KeyboardEvent} event
*/
async function onKeyDown(event) {
if (event.defaultPrevented) {
return;
}
// Do not handle events if it comes from modals;
// retain the default behavior for these keys.
if (event.target.closest('[role=dialog]')) {
return;
}
const isDeleteKey = [external_wp_keycodes_namespaceObject.BACKSPACE, external_wp_keycodes_namespaceObject.DELETE].includes(event.keyCode);
// If multiple blocks are selected, deselect all blocks when the user
// presses the escape key.
if (isMatch('core/block-editor/unselect', event) && selectedClientIds.length > 0) {
event.stopPropagation();
event.preventDefault();
selectBlock(event, undefined);
} else if (isDeleteKey || isMatch('core/block-editor/remove', event)) {
var _getPreviousBlockClie;
const {
blocksToUpdate: blocksToDelete,
firstBlockClientId,
firstBlockRootClientId,
selectedBlockClientIds
} = getBlocksToUpdate();
// Don't update the selection if the blocks cannot be deleted.
if (!canRemoveBlocks(blocksToDelete)) {
return;
}
let blockToFocus = (_getPreviousBlockClie = getPreviousBlockClientId(firstBlockClientId)) !== null && _getPreviousBlockClie !== void 0 ? _getPreviousBlockClie :
// If the previous block is not found (when the first block is deleted),
// fallback to focus the parent block.
firstBlockRootClientId;
removeBlocks(blocksToDelete, false);
// Update the selection if the original selection has been removed.
const shouldUpdateSelection = selectedBlockClientIds.length > 0 && getSelectedBlockClientIds().length === 0;
// If there's no previous block nor parent block, focus the first block.
if (!blockToFocus) {
blockToFocus = getBlockOrder()[0];
}
updateFocusAndSelection(blockToFocus, shouldUpdateSelection);
} else if (isMatch('core/block-editor/duplicate', event)) {
event.preventDefault();
const {
blocksToUpdate,
firstBlockRootClientId
} = getBlocksToUpdate();
const canDuplicate = getBlocksByClientId(blocksToUpdate).every(blockToUpdate => {
return !!blockToUpdate && (0,external_wp_blocks_namespaceObject.hasBlockSupport)(blockToUpdate.name, 'multiple', true) && canInsertBlockType(blockToUpdate.name, firstBlockRootClientId);
});
if (canDuplicate) {
const updatedBlocks = await duplicateBlocks(blocksToUpdate, false);
if (updatedBlocks?.length) {
// If blocks have been duplicated, focus the first duplicated block.
updateFocusAndSelection(updatedBlocks[0], false);
}
}
} else if (isMatch('core/block-editor/insert-before', event)) {
event.preventDefault();
const {
blocksToUpdate
} = getBlocksToUpdate();
await insertBeforeBlock(blocksToUpdate[0]);
const newlySelectedBlocks = getSelectedBlockClientIds();
// Focus the first block of the newly inserted blocks, to keep focus within the list view.
setOpenedBlockSettingsMenu(undefined);
updateFocusAndSelection(newlySelectedBlocks[0], false);
} else if (isMatch('core/block-editor/insert-after', event)) {
event.preventDefault();
const {
blocksToUpdate
} = getBlocksToUpdate();
await insertAfterBlock(blocksToUpdate.at(-1));
const newlySelectedBlocks = getSelectedBlockClientIds();
// Focus the first block of the newly inserted blocks, to keep focus within the list view.
setOpenedBlockSettingsMenu(undefined);
updateFocusAndSelection(newlySelectedBlocks[0], false);
} else if (isMatch('core/block-editor/select-all', event)) {
event.preventDefault();
const {
firstBlockRootClientId,
selectedBlockClientIds
} = getBlocksToUpdate();
const blockClientIds = getBlockOrder(firstBlockRootClientId);
if (!blockClientIds.length) {
return;
}
// If we have selected all sibling nested blocks, try selecting up a level.
// This is a similar implementation to that used by `useSelectAll`.
// `isShallowEqual` is used for the list view instead of a length check,
// as the array of siblings of the currently focused block may be a different
// set of blocks from the current block selection if the user is focused
// on a different part of the list view from the block selection.
if (external_wp_isShallowEqual_default()(selectedBlockClientIds, blockClientIds)) {
// Only select up a level if the first block is not the root block.
// This ensures that the block selection can't break out of the root block
// used by the list view, if the list view is only showing a partial hierarchy.
if (firstBlockRootClientId && firstBlockRootClientId !== rootClientId) {
updateFocusAndSelection(firstBlockRootClientId, true);
return;
}
}
// Select all while passing `null` to skip focusing to the editor canvas,
// and retain focus within the list view.
multiSelect(blockClientIds[0], blockClientIds[blockClientIds.length - 1], null);
} else if (isMatch('core/block-editor/collapse-list-view', event)) {
event.preventDefault();
const {
firstBlockClientId
} = getBlocksToUpdate();
const blockParents = getBlockParents(firstBlockClientId, false);
// Collapse all blocks.
collapseAll();
// Expand all parents of the current block.
expand(blockParents);
} else if (isMatch('core/block-editor/group', event)) {
const {
blocksToUpdate
} = getBlocksToUpdate();
if (blocksToUpdate.length > 1 && isGroupable(blocksToUpdate)) {
event.preventDefault();
const blocks = getBlocksByClientId(blocksToUpdate);
const groupingBlockName = getGroupingBlockName();
const newBlocks = (0,external_wp_blocks_namespaceObject.switchToBlockType)(blocks, groupingBlockName);
replaceBlocks(blocksToUpdate, newBlocks);
(0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.__)('Selected blocks are grouped.'));
const newlySelectedBlocks = getSelectedBlockClientIds();
// Focus the first block of the newly inserted blocks, to keep focus within the list view.
setOpenedBlockSettingsMenu(undefined);
updateFocusAndSelection(newlySelectedBlocks[0], false);
}
}
}
const onMouseEnter = (0,external_wp_element_namespaceObject.useCallback)(() => {
setIsHovered(true);
toggleBlockHighlight(clientId, true);
}, [clientId, setIsHovered, toggleBlockHighlight]);
const onMouseLeave = (0,external_wp_element_namespaceObject.useCallback)(() => {
setIsHovered(false);
toggleBlockHighlight(clientId, false);
}, [clientId, setIsHovered, toggleBlockHighlight]);
const selectEditorBlock = (0,external_wp_element_namespaceObject.useCallback)(event => {
selectBlock(event, clientId);
event.preventDefault();
}, [clientId, selectBlock]);
const updateFocusAndSelection = (0,external_wp_element_namespaceObject.useCallback)((focusClientId, shouldSelectBlock) => {
if (shouldSelectBlock) {
selectBlock(undefined, focusClientId, null, null);
}
focusListItem(focusClientId, treeGridElementRef?.current);
}, [selectBlock, treeGridElementRef]);
const toggleExpanded = (0,external_wp_element_namespaceObject.useCallback)(event => {
// Prevent shift+click from opening link in a new window when toggling.
event.preventDefault();
event.stopPropagation();
if (isExpanded === true) {
collapse(clientId);
} else if (isExpanded === false) {
expand(clientId);
}
}, [clientId, expand, collapse, isExpanded]);
// Allow right-clicking an item in the List View to open up the block settings dropdown.
const onContextMenu = (0,external_wp_element_namespaceObject.useCallback)(event => {
if (showBlockActions && allowRightClickOverrides) {
settingsRef.current?.click();
// Ensure the position of the settings dropdown is at the cursor.
setSettingsAnchorRect(new window.DOMRect(event.clientX, event.clientY, 0, 0));
event.preventDefault();
}
}, [allowRightClickOverrides, settingsRef, showBlockActions]);
const onMouseDown = (0,external_wp_element_namespaceObject.useCallback)(event => {
// Prevent right-click from focusing the block,
// because focus will be handled when opening the block settings dropdown.
if (allowRightClickOverrides && event.button === 2) {
event.preventDefault();
}
}, [allowRightClickOverrides]);
const settingsPopoverAnchor = (0,external_wp_element_namespaceObject.useMemo)(() => {
const {
ownerDocument
} = rowRef?.current || {};
// If no custom position is set, the settings dropdown will be anchored to the
// DropdownMenu toggle button.
if (!settingsAnchorRect || !ownerDocument) {
return undefined;
}
// Position the settings dropdown at the cursor when right-clicking a block.
return {
ownerDocument,
getBoundingClientRect() {
return settingsAnchorRect;
}
};
}, [settingsAnchorRect]);
const clearSettingsAnchorRect = (0,external_wp_element_namespaceObject.useCallback)(() => {
// Clear the custom position for the settings dropdown so that it is restored back
// to being anchored to the DropdownMenu toggle button.
setSettingsAnchorRect(undefined);
}, [setSettingsAnchorRect]);
// Pass in a ref to the row, so that it can be scrolled
// into view when selected. For long lists, the placeholder for the
// selected block is also observed, within ListViewLeafPlaceholder.
useListViewScrollIntoView({
isSelected,
rowItemRef: rowRef,
selectedClientIds
});
// When switching between rendering modes (such as template preview and content only),
// it is possible for a block to temporarily be unavailable. In this case, we should not
// render the leaf, to avoid errors further down the tree.
if (!block) {
return null;
}
const blockPositionDescription = getBlockPositionDescription(position, siblingBlockCount, level);
const blockPropertiesDescription = getBlockPropertiesDescription(blockInformation, isLocked);
const hasSiblings = siblingBlockCount > 0;
const hasRenderedMovers = showBlockMovers && hasSiblings;
const moverCellClassName = dist_clsx('block-editor-list-view-block__mover-cell', {
'is-visible': isHovered || isSelected
});
const listViewBlockSettingsClassName = dist_clsx('block-editor-list-view-block__menu-cell', {
'is-visible': isHovered || isFirstSelectedBlock
});
let colSpan;
if (hasRenderedMovers) {
colSpan = 2;
} else if (!showBlockActions) {
colSpan = 3;
}
const classes = dist_clsx({
'is-selected': isSelected,
'is-first-selected': isFirstSelectedBlock,
'is-last-selected': isLastSelectedBlock,
'is-branch-selected': isBranchSelected,
'is-synced-branch': isSyncedBranch,
'is-dragging': isDragged,
'has-single-cell': !showBlockActions,
'is-synced': blockInformation?.isSynced,
'is-draggable': canMove,
'is-displacement-normal': displacement === 'normal',
'is-displacement-up': displacement === 'up',
'is-displacement-down': displacement === 'down',
'is-after-dragged-blocks': isAfterDraggedBlocks,
'is-nesting': isNesting
});
// Only include all selected blocks if the currently clicked on block
// is one of the selected blocks. This ensures that if a user attempts
// to alter a block that isn't part of the selection, they're still able
// to do so.
const dropdownClientIds = selectedClientIds.includes(clientId) ? selectedClientIds : [clientId];
// Detect if there is a block in the canvas currently being edited and multi-selection is not happening.
const currentlyEditingBlockInCanvas = isSelected && selectedClientIds.length === 1;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(leaf, {
className: classes,
isDragged: isDragged,
onKeyDown: onKeyDown,
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
onFocus: onMouseEnter,
onBlur: onMouseLeave,
level: level,
position: position,
rowCount: rowCount,
path: path,
id: `list-view-${listViewInstanceId}-block-${clientId}`,
"data-block": clientId,
"data-expanded": canEdit ? isExpanded : undefined,
ref: rowRef,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalTreeGridCell, {
className: "block-editor-list-view-block__contents-cell",
colSpan: colSpan,
ref: cellRef,
"aria-selected": !!isSelected,
children: ({
ref,
tabIndex,
onFocus
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-list-view-block__contents-container",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_contents, {
block: block,
onClick: selectEditorBlock,
onContextMenu: onContextMenu,
onMouseDown: onMouseDown,
onToggleExpanded: toggleExpanded,
isSelected: isSelected,
position: position,
siblingBlockCount: siblingBlockCount,
level: level,
ref: ref,
tabIndex: currentlyEditingBlockInCanvas ? 0 : tabIndex,
onFocus: onFocus,
isExpanded: canEdit ? isExpanded : undefined,
selectedClientIds: selectedClientIds,
ariaDescribedBy: descriptionId
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AriaReferencedText, {
id: descriptionId,
children: [blockPositionDescription, blockPropertiesDescription].filter(Boolean).join(' ')
})]
})
}), hasRenderedMovers && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalTreeGridCell, {
className: moverCellClassName,
withoutGridItem: true,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalTreeGridItem, {
children: ({
ref,
tabIndex,
onFocus
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockMoverUpButton, {
orientation: "vertical",
clientIds: [clientId],
ref: ref,
tabIndex: tabIndex,
onFocus: onFocus
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalTreeGridItem, {
children: ({
ref,
tabIndex,
onFocus
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockMoverDownButton, {
orientation: "vertical",
clientIds: [clientId],
ref: ref,
tabIndex: tabIndex,
onFocus: onFocus
})
})]
})
}), showBlockActions && BlockSettingsMenu && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalTreeGridCell, {
className: listViewBlockSettingsClassName,
"aria-selected": !!isSelected,
ref: settingsRef,
children: ({
ref,
tabIndex,
onFocus
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockSettingsMenu, {
clientIds: dropdownClientIds,
block: block,
icon: more_vertical,
label: (0,external_wp_i18n_namespaceObject.__)('Options'),
popoverProps: {
anchor: settingsPopoverAnchor // Used to position the settings at the cursor on right-click.
},
toggleProps: {
ref,
className: 'block-editor-list-view-block__menu',
tabIndex,
onClick: clearSettingsAnchorRect,
onFocus
},
disableOpenOnArrowDown: true,
expand: expand,
expandedState: expandedState,
setInsertedBlock: setInsertedBlock,
__experimentalSelectBlock: updateFocusAndSelection
})
})]
});
}
/* harmony default export */ const list_view_block = ((0,external_wp_element_namespaceObject.memo)(ListViewBlock));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/branch.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Given a block, returns the total number of blocks in that subtree. This is used to help determine
* the list position of a block.
*
* When a block is collapsed, we do not count their children as part of that total. In the current drag
* implementation dragged blocks and their children are not counted.
*
* @param {Object} block block tree
* @param {Object} expandedState state that notes which branches are collapsed
* @param {Array} draggedClientIds a list of dragged client ids
* @param {boolean} isExpandedByDefault flag to determine the default fallback expanded state.
* @return {number} block count
*/
function countBlocks(block, expandedState, draggedClientIds, isExpandedByDefault) {
var _expandedState$block$;
const isDragged = draggedClientIds?.includes(block.clientId);
if (isDragged) {
return 0;
}
const isExpanded = (_expandedState$block$ = expandedState[block.clientId]) !== null && _expandedState$block$ !== void 0 ? _expandedState$block$ : isExpandedByDefault;
if (isExpanded) {
return 1 + block.innerBlocks.reduce(countReducer(expandedState, draggedClientIds, isExpandedByDefault), 0);
}
return 1;
}
const countReducer = (expandedState, draggedClientIds, isExpandedByDefault) => (count, block) => {
var _expandedState$block$2;
const isDragged = draggedClientIds?.includes(block.clientId);
if (isDragged) {
return count;
}
const isExpanded = (_expandedState$block$2 = expandedState[block.clientId]) !== null && _expandedState$block$2 !== void 0 ? _expandedState$block$2 : isExpandedByDefault;
if (isExpanded && block.innerBlocks.length > 0) {
return count + countBlocks(block, expandedState, draggedClientIds, isExpandedByDefault);
}
return count + 1;
};
const branch_noop = () => {};
function ListViewBranch(props) {
const {
blocks,
selectBlock = branch_noop,
showBlockMovers,
selectedClientIds,
level = 1,
path = '',
isBranchSelected = false,
listPosition = 0,
fixedListWindow,
isExpanded,
parentId,
shouldShowInnerBlocks = true,
isSyncedBranch = false,
showAppender: showAppenderProp = true
} = props;
const parentBlockInformation = useBlockDisplayInformation(parentId);
const syncedBranch = isSyncedBranch || !!parentBlockInformation?.isSynced;
const canParentExpand = (0,external_wp_data_namespaceObject.useSelect)(select => {
if (!parentId) {
return true;
}
return select(store).canEditBlock(parentId);
}, [parentId]);
const {
blockDropPosition,
blockDropTargetIndex,
firstDraggedBlockIndex,
blockIndexes,
expandedState,
draggedClientIds
} = useListViewContext();
if (!canParentExpand) {
return null;
}
// Only show the appender at the first level.
const showAppender = showAppenderProp && level === 1;
const filteredBlocks = blocks.filter(Boolean);
const blockCount = filteredBlocks.length;
// The appender means an extra row in List View, so add 1 to the row count.
const rowCount = showAppender ? blockCount + 1 : blockCount;
let nextPosition = listPosition;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [filteredBlocks.map((block, index) => {
var _expandedState$client;
const {
clientId,
innerBlocks
} = block;
if (index > 0) {
nextPosition += countBlocks(filteredBlocks[index - 1], expandedState, draggedClientIds, isExpanded);
}
const isDragged = !!draggedClientIds?.includes(clientId);
// Determine the displacement of the block while dragging. This
// works out whether the current block should be displaced up or
// down, relative to the dragged blocks and the drop target.
const {
displacement,
isAfterDraggedBlocks,
isNesting
} = getDragDisplacementValues({
blockIndexes,
blockDropTargetIndex,
blockDropPosition,
clientId,
firstDraggedBlockIndex,
isDragged
});
const {
itemInView
} = fixedListWindow;
const blockInView = itemInView(nextPosition);
const position = index + 1;
const updatedPath = path.length > 0 ? `${path}_${position}` : `${position}`;
const hasNestedBlocks = !!innerBlocks?.length;
const shouldExpand = hasNestedBlocks && shouldShowInnerBlocks ? (_expandedState$client = expandedState[clientId]) !== null && _expandedState$client !== void 0 ? _expandedState$client : isExpanded : undefined;
// Make updates to the selected or dragged blocks synchronous,
// but asynchronous for any other block.
const isSelected = isClientIdSelected(clientId, selectedClientIds);
const isSelectedBranch = isBranchSelected || isSelected && hasNestedBlocks;
// To avoid performance issues, we only render blocks that are in view,
// or blocks that are selected or dragged. If a block is selected,
// it is only counted if it is the first of the block selection.
// This prevents the entire tree from being rendered when a branch is
// selected, or a user selects all blocks, while still enabling scroll
// into view behavior when selecting a block or opening the list view.
// The first and last blocks of the list are always rendered, to ensure
// that Home and End keys work as expected.
const showBlock = isDragged || blockInView || isSelected && clientId === selectedClientIds[0] || index === 0 || index === blockCount - 1;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_data_namespaceObject.AsyncModeProvider, {
value: !isSelected,
children: [showBlock && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(list_view_block, {
block: block,
selectBlock: selectBlock,
isSelected: isSelected,
isBranchSelected: isSelectedBranch,
isDragged: isDragged,
level: level,
position: position,
rowCount: rowCount,
siblingBlockCount: blockCount,
showBlockMovers: showBlockMovers,
path: updatedPath,
isExpanded: isDragged ? false : shouldExpand,
listPosition: nextPosition,
selectedClientIds: selectedClientIds,
isSyncedBranch: syncedBranch,
displacement: displacement,
isAfterDraggedBlocks: isAfterDraggedBlocks,
isNesting: isNesting
}), !showBlock && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("tr", {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("td", {
className: "block-editor-list-view-placeholder"
})
}), hasNestedBlocks && shouldExpand && !isDragged && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ListViewBranch, {
parentId: clientId,
blocks: innerBlocks,
selectBlock: selectBlock,
showBlockMovers: showBlockMovers,
level: level + 1,
path: updatedPath,
listPosition: nextPosition + 1,
fixedListWindow: fixedListWindow,
isBranchSelected: isSelectedBranch,
selectedClientIds: selectedClientIds,
isExpanded: isExpanded,
isSyncedBranch: syncedBranch
})]
}, clientId);
}), showAppender && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalTreeGridRow, {
level: level,
setSize: rowCount,
positionInSet: rowCount,
isExpanded: true,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalTreeGridCell, {
children: treeGridCellProps => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Appender, {
clientId: parentId,
nestingLevel: level,
blockCount: blockCount,
...treeGridCellProps
})
})
})]
});
}
/* harmony default export */ const branch = ((0,external_wp_element_namespaceObject.memo)(ListViewBranch));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/drop-indicator.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function ListViewDropIndicatorPreview({
draggedBlockClientId,
listViewRef,
blockDropTarget
}) {
const blockInformation = useBlockDisplayInformation(draggedBlockClientId);
const blockTitle = useBlockDisplayTitle({
clientId: draggedBlockClientId,
context: 'list-view'
});
const {
rootClientId,
clientId,
dropPosition
} = blockDropTarget || {};
const [rootBlockElement, blockElement] = (0,external_wp_element_namespaceObject.useMemo)(() => {
if (!listViewRef.current) {
return [];
}
// The rootClientId will be defined whenever dropping into inner
// block lists, but is undefined when dropping at the root level.
const _rootBlockElement = rootClientId ? listViewRef.current.querySelector(`[data-block="${rootClientId}"]`) : undefined;
// The clientId represents the sibling block, the dragged block will
// usually be inserted adjacent to it. It will be undefined when
// dropping a block into an empty block list.
const _blockElement = clientId ? listViewRef.current.querySelector(`[data-block="${clientId}"]`) : undefined;
return [_rootBlockElement, _blockElement];
}, [listViewRef, rootClientId, clientId]);
// The targetElement is the element that the drop indicator will appear
// before or after. When dropping into an empty block list, blockElement
// is undefined, so the indicator will appear after the rootBlockElement.
const targetElement = blockElement || rootBlockElement;
const rtl = (0,external_wp_i18n_namespaceObject.isRTL)();
const getDropIndicatorWidth = (0,external_wp_element_namespaceObject.useCallback)((targetElementRect, indent) => {
if (!targetElement) {
return 0;
}
// Default to assuming that the width of the drop indicator
// should be the same as the target element.
let width = targetElement.offsetWidth;
// In deeply nested lists, where a scrollbar is present,
// the width of the drop indicator should be the width of
// the scroll container, minus the distance from the left
// edge of the scroll container to the left edge of the
// target element.
const scrollContainer = (0,external_wp_dom_namespaceObject.getScrollContainer)(targetElement, 'horizontal');
const ownerDocument = targetElement.ownerDocument;
const windowScroll = scrollContainer === ownerDocument.body || scrollContainer === ownerDocument.documentElement;
if (scrollContainer && !windowScroll) {
const scrollContainerRect = scrollContainer.getBoundingClientRect();
const distanceBetweenContainerAndTarget = (0,external_wp_i18n_namespaceObject.isRTL)() ? scrollContainerRect.right - targetElementRect.right : targetElementRect.left - scrollContainerRect.left;
const scrollContainerWidth = scrollContainer.clientWidth;
if (scrollContainerWidth < width + distanceBetweenContainerAndTarget) {
width = scrollContainerWidth - distanceBetweenContainerAndTarget;
}
// LTR logic for ensuring the drop indicator does not extend
// beyond the right edge of the scroll container.
if (!rtl && targetElementRect.left + indent < scrollContainerRect.left) {
width -= scrollContainerRect.left - targetElementRect.left;
return width;
}
// RTL logic for ensuring the drop indicator does not extend
// beyond the right edge of the scroll container.
if (rtl && targetElementRect.right - indent > scrollContainerRect.right) {
width -= targetElementRect.right - scrollContainerRect.right;
return width;
}
}
// Subtract the indent from the final width of the indicator.
return width - indent;
}, [rtl, targetElement]);
const style = (0,external_wp_element_namespaceObject.useMemo)(() => {
if (!targetElement) {
return {};
}
const targetElementRect = targetElement.getBoundingClientRect();
return {
width: getDropIndicatorWidth(targetElementRect, 0)
};
}, [getDropIndicatorWidth, targetElement]);
const horizontalScrollOffsetStyle = (0,external_wp_element_namespaceObject.useMemo)(() => {
if (!targetElement) {
return {};
}
const scrollContainer = (0,external_wp_dom_namespaceObject.getScrollContainer)(targetElement);
const ownerDocument = targetElement.ownerDocument;
const windowScroll = scrollContainer === ownerDocument.body || scrollContainer === ownerDocument.documentElement;
if (scrollContainer && !windowScroll) {
const scrollContainerRect = scrollContainer.getBoundingClientRect();
const targetElementRect = targetElement.getBoundingClientRect();
const distanceBetweenContainerAndTarget = rtl ? scrollContainerRect.right - targetElementRect.right : targetElementRect.left - scrollContainerRect.left;
if (!rtl && scrollContainerRect.left > targetElementRect.left) {
return {
transform: `translateX( ${distanceBetweenContainerAndTarget}px )`
};
}
if (rtl && scrollContainerRect.right < targetElementRect.right) {
return {
transform: `translateX( ${distanceBetweenContainerAndTarget * -1}px )`
};
}
}
return {};
}, [rtl, targetElement]);
const ariaLevel = (0,external_wp_element_namespaceObject.useMemo)(() => {
if (!rootBlockElement) {
return 1;
}
const _ariaLevel = parseInt(rootBlockElement.getAttribute('aria-level'), 10);
return _ariaLevel ? _ariaLevel + 1 : 1;
}, [rootBlockElement]);
const hasAdjacentSelectedBranch = (0,external_wp_element_namespaceObject.useMemo)(() => {
if (!targetElement) {
return false;
}
return targetElement.classList.contains('is-branch-selected');
}, [targetElement]);
const popoverAnchor = (0,external_wp_element_namespaceObject.useMemo)(() => {
const isValidDropPosition = dropPosition === 'top' || dropPosition === 'bottom' || dropPosition === 'inside';
if (!targetElement || !isValidDropPosition) {
return undefined;
}
return {
contextElement: targetElement,
getBoundingClientRect() {
const rect = targetElement.getBoundingClientRect();
// In RTL languages, the drop indicator should be positioned
// to the left of the target element, with the width of the
// indicator determining the indent at the right edge of the
// target element. In LTR languages, the drop indicator should
// end at the right edge of the target element, with the indent
// added to the position of the left edge of the target element.
// let left = rtl ? rect.left : rect.left + indent;
let left = rect.left;
let top = 0;
// In deeply nested lists, where a scrollbar is present,
// the width of the drop indicator should be the width of
// the visible area of the scroll container. Additionally,
// the left edge of the drop indicator line needs to be
// offset by the distance the left edge of the target element
// and the left edge of the scroll container. The ensures
// that the drop indicator position never breaks out of the
// visible area of the scroll container.
const scrollContainer = (0,external_wp_dom_namespaceObject.getScrollContainer)(targetElement, 'horizontal');
const doc = targetElement.ownerDocument;
const windowScroll = scrollContainer === doc.body || scrollContainer === doc.documentElement;
// If the scroll container is not the window, offset the left position, if need be.
if (scrollContainer && !windowScroll) {
const scrollContainerRect = scrollContainer.getBoundingClientRect();
// In RTL languages, a vertical scrollbar is present on the
// left edge of the scroll container. The width of the
// scrollbar needs to be accounted for when positioning the
// drop indicator.
const scrollbarWidth = rtl ? scrollContainer.offsetWidth - scrollContainer.clientWidth : 0;
if (left < scrollContainerRect.left + scrollbarWidth) {
left = scrollContainerRect.left + scrollbarWidth;
}
}
if (dropPosition === 'top') {
top = rect.top - rect.height * 2;
} else {
// `dropPosition` is either `bottom` or `inside`
top = rect.top;
}
const width = getDropIndicatorWidth(rect, 0);
const height = rect.height;
return new window.DOMRect(left, top, width, height);
}
};
}, [targetElement, dropPosition, getDropIndicatorWidth, rtl]);
if (!targetElement) {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Popover, {
animate: false,
anchor: popoverAnchor,
focusOnMount: false,
className: "block-editor-list-view-drop-indicator--preview",
variant: "unstyled",
flip: false,
resize: true,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
style: style,
className: dist_clsx('block-editor-list-view-drop-indicator__line', {
'block-editor-list-view-drop-indicator__line--darker': hasAdjacentSelectedBranch
}),
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-list-view-leaf",
"aria-level": ariaLevel,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: dist_clsx('block-editor-list-view-block-select-button', 'block-editor-list-view-block-contents'),
style: horizontalScrollOffsetStyle,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ListViewExpander, {
onClick: () => {}
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_icon, {
icon: blockInformation?.icon,
showColors: true,
context: "list-view"
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalHStack, {
alignment: "center",
className: "block-editor-list-view-block-select-button__label-wrapper",
justify: "flex-start",
spacing: 1,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
className: "block-editor-list-view-block-select-button__title",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalTruncate, {
ellipsizeMode: "auto",
children: blockTitle
})
})
})]
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-list-view-block__menu-cell"
})]
})
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/use-block-selection.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function useBlockSelection() {
const {
clearSelectedBlock,
multiSelect,
selectBlock
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const {
getBlockName,
getBlockParents,
getBlockSelectionStart,
getSelectedBlockClientIds,
hasMultiSelection,
hasSelectedBlock
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
getBlockType
} = (0,external_wp_data_namespaceObject.useSelect)(external_wp_blocks_namespaceObject.store);
const updateBlockSelection = (0,external_wp_element_namespaceObject.useCallback)(async (event, clientId, destinationClientId, focusPosition) => {
if (!event?.shiftKey && event?.keyCode !== external_wp_keycodes_namespaceObject.ESCAPE) {
selectBlock(clientId, focusPosition);
return;
}
// To handle multiple block selection via the `SHIFT` key, prevent
// the browser default behavior of opening the link in a new window.
event.preventDefault();
const isOnlyDeselection = event.type === 'keydown' && event.keyCode === external_wp_keycodes_namespaceObject.ESCAPE;
const isKeyPress = event.type === 'keydown' && (event.keyCode === external_wp_keycodes_namespaceObject.UP || event.keyCode === external_wp_keycodes_namespaceObject.DOWN || event.keyCode === external_wp_keycodes_namespaceObject.HOME || event.keyCode === external_wp_keycodes_namespaceObject.END);
// Handle clicking on a block when no blocks are selected, and return early.
if (!isKeyPress && !hasSelectedBlock() && !hasMultiSelection()) {
selectBlock(clientId, null);
return;
}
const selectedBlocks = getSelectedBlockClientIds();
const clientIdWithParents = [...getBlockParents(clientId), clientId];
if (isOnlyDeselection || isKeyPress && !selectedBlocks.some(blockId => clientIdWithParents.includes(blockId))) {
// Ensure that shift-selecting blocks via the keyboard only
// expands the current selection if focusing over already
// selected blocks. Otherwise, clear the selection so that
// a user can create a new selection entirely by keyboard.
await clearSelectedBlock();
}
// Update selection, if not only clearing the selection.
if (!isOnlyDeselection) {
let startTarget = getBlockSelectionStart();
let endTarget = clientId;
// Handle keyboard behavior for selecting multiple blocks.
if (isKeyPress) {
if (!hasSelectedBlock() && !hasMultiSelection()) {
// Set the starting point of the selection to the currently
// focused block, if there are no blocks currently selected.
// This ensures that as the selection is expanded or contracted,
// the starting point of the selection is anchored to that block.
startTarget = clientId;
}
if (destinationClientId) {
// If the user presses UP or DOWN, we want to ensure that the block they're
// moving to is the target for selection, and not the currently focused one.
endTarget = destinationClientId;
}
}
const startParents = getBlockParents(startTarget);
const endParents = getBlockParents(endTarget);
const {
start,
end
} = getCommonDepthClientIds(startTarget, endTarget, startParents, endParents);
await multiSelect(start, end, null);
}
// Announce deselected block, or number of deselected blocks if
// the total number of blocks deselected is greater than one.
const updatedSelectedBlocks = getSelectedBlockClientIds();
// If the selection is greater than 1 and the Home or End keys
// were used to generate the selection, then skip announcing the
// deselected blocks.
if ((event.keyCode === external_wp_keycodes_namespaceObject.HOME || event.keyCode === external_wp_keycodes_namespaceObject.END) && updatedSelectedBlocks.length > 1) {
return;
}
const selectionDiff = selectedBlocks.filter(blockId => !updatedSelectedBlocks.includes(blockId));
let label;
if (selectionDiff.length === 1) {
const title = getBlockType(getBlockName(selectionDiff[0]))?.title;
if (title) {
label = (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %s: block name */
(0,external_wp_i18n_namespaceObject.__)('%s deselected.'), title);
}
} else if (selectionDiff.length > 1) {
label = (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %s: number of deselected blocks */
(0,external_wp_i18n_namespaceObject.__)('%s blocks deselected.'), selectionDiff.length);
}
if (label) {
(0,external_wp_a11y_namespaceObject.speak)(label, 'assertive');
}
}, [clearSelectedBlock, getBlockName, getBlockType, getBlockParents, getBlockSelectionStart, getSelectedBlockClientIds, hasMultiSelection, hasSelectedBlock, multiSelect, selectBlock]);
return {
updateBlockSelection
};
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/use-list-view-block-indexes.js
/**
* WordPress dependencies
*/
function useListViewBlockIndexes(blocks) {
const blockIndexes = (0,external_wp_element_namespaceObject.useMemo)(() => {
const indexes = {};
let currentGlobalIndex = 0;
const traverseBlocks = blockList => {
blockList.forEach(block => {
indexes[block.clientId] = currentGlobalIndex;
currentGlobalIndex++;
if (block.innerBlocks.length > 0) {
traverseBlocks(block.innerBlocks);
}
});
};
traverseBlocks(blocks);
return indexes;
}, [blocks]);
return blockIndexes;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/use-list-view-client-ids.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function useListViewClientIds({
blocks,
rootClientId
}) {
return (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getDraggedBlockClientIds,
getSelectedBlockClientIds,
getEnabledClientIdsTree
} = unlock(select(store));
return {
selectedClientIds: getSelectedBlockClientIds(),
draggedClientIds: getDraggedBlockClientIds(),
clientIdsTree: blocks !== null && blocks !== void 0 ? blocks : getEnabledClientIdsTree(rootClientId)
};
}, [blocks, rootClientId]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/use-list-view-collapse-items.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function useListViewCollapseItems({
collapseAll,
expand
}) {
const {
expandedBlock,
getBlockParents
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockParents: _getBlockParents,
getExpandedBlock
} = unlock(select(store));
return {
expandedBlock: getExpandedBlock(),
getBlockParents: _getBlockParents
};
}, []);
// Collapse all but the specified block when the expanded block client Id changes.
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (expandedBlock) {
const blockParents = getBlockParents(expandedBlock, false);
// Collapse all blocks and expand the block's parents.
collapseAll();
expand(blockParents);
}
}, [collapseAll, expand, expandedBlock, getBlockParents]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/use-list-view-drop-zone.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/** @typedef {import('../../utils/math').WPPoint} WPPoint */
/**
* The type of a drag event.
*
* @typedef {'default'|'file'|'html'} WPDragEventType
*/
/**
* An object representing data for blocks in the DOM used by drag and drop.
*
* @typedef {Object} WPListViewDropZoneBlock
* @property {string} clientId The client id for the block.
* @property {string} rootClientId The root client id for the block.
* @property {number} blockIndex The block's index.
* @property {Element} element The DOM element representing the block.
* @property {number} innerBlockCount The number of inner blocks the block has.
* @property {boolean} isDraggedBlock Whether the block is currently being dragged.
* @property {boolean} isExpanded Whether the block is expanded in the UI.
* @property {boolean} canInsertDraggedBlocksAsSibling Whether the dragged block can be a sibling of this block.
* @property {boolean} canInsertDraggedBlocksAsChild Whether the dragged block can be a child of this block.
*/
/**
* An array representing data for blocks in the DOM used by drag and drop.
*
* @typedef {WPListViewDropZoneBlock[]} WPListViewDropZoneBlocks
*/
/**
* An object containing details of a drop target.
*
* @typedef {Object} WPListViewDropZoneTarget
* @property {string} blockIndex The insertion index.
* @property {string} rootClientId The root client id for the block.
* @property {string|undefined} clientId The client id for the block.
* @property {'top'|'bottom'|'inside'} dropPosition The position relative to the block that the user is dropping to.
* 'inside' refers to nesting as an inner block.
*/
// When the indentation level, the corresponding left margin in `style.scss`
// must be updated as well to ensure the drop zone is aligned with the indentation.
const NESTING_LEVEL_INDENTATION = 24;
/**
* Determines whether the user is positioning the dragged block to be
* moved up to a parent level.
*
* Determined based on nesting level indentation of the current block.
*
* @param {WPPoint} point The point representing the cursor position when dragging.
* @param {DOMRect} rect The rectangle.
* @param {number} nestingLevel The nesting level of the block.
* @param {boolean} rtl Whether the editor is in RTL mode.
* @return {boolean} Whether the gesture is an upward gesture.
*/
function isUpGesture(point, rect, nestingLevel = 1, rtl = false) {
// If the block is nested, and the user is dragging to the bottom
// left of the block (or bottom right in RTL languages), then it is an upward gesture.
const blockIndentPosition = rtl ? rect.right - nestingLevel * NESTING_LEVEL_INDENTATION : rect.left + nestingLevel * NESTING_LEVEL_INDENTATION;
return rtl ? point.x > blockIndentPosition : point.x < blockIndentPosition;
}
/**
* Returns how many nesting levels up the user is attempting to drag to.
*
* The relative parent level is calculated based on how far
* the cursor is from the provided nesting level (e.g. of a candidate block
* that the user is hovering over). The nesting level is considered "desired"
* because it is not guaranteed that the user will be able to drag to the desired level.
*
* The returned integer can be used to access an ascending array
* of parent blocks, where the first item is the block the user
* is hovering over, and the last item is the root block.
*
* @param {WPPoint} point The point representing the cursor position when dragging.
* @param {DOMRect} rect The rectangle.
* @param {number} nestingLevel The nesting level of the block.
* @param {boolean} rtl Whether the editor is in RTL mode.
* @return {number} The desired relative parent level.
*/
function getDesiredRelativeParentLevel(point, rect, nestingLevel = 1, rtl = false) {
// In RTL languages, the block indent position is from the right edge of the block.
// In LTR languages, the block indent position is from the left edge of the block.
const blockIndentPosition = rtl ? rect.right - nestingLevel * NESTING_LEVEL_INDENTATION : rect.left + nestingLevel * NESTING_LEVEL_INDENTATION;
const distanceBetweenPointAndBlockIndentPosition = rtl ? blockIndentPosition - point.x : point.x - blockIndentPosition;
const desiredParentLevel = Math.round(distanceBetweenPointAndBlockIndentPosition / NESTING_LEVEL_INDENTATION);
return Math.abs(desiredParentLevel);
}
/**
* Returns an array of the parent blocks of the block the user is dropping to.
*
* @param {WPListViewDropZoneBlock} candidateBlockData The block the user is dropping to.
* @param {WPListViewDropZoneBlocks} blocksData Data about the blocks in list view.
* @return {WPListViewDropZoneBlocks} An array of block parents, including the block the user is dropping to.
*/
function getCandidateBlockParents(candidateBlockData, blocksData) {
const candidateBlockParents = [];
let currentBlockData = candidateBlockData;
while (currentBlockData) {
candidateBlockParents.push({
...currentBlockData
});
currentBlockData = blocksData.find(blockData => blockData.clientId === currentBlockData.rootClientId);
}
return candidateBlockParents;
}
/**
* Given a list of blocks data and a block index, return the next non-dragged
* block. This is used to determine the block that the user is dropping to,
* while ignoring the dragged block.
*
* @param {WPListViewDropZoneBlocks} blocksData Data about the blocks in list view.
* @param {number} index The index to begin searching from.
* @return {WPListViewDropZoneBlock | undefined} The next non-dragged block.
*/
function getNextNonDraggedBlock(blocksData, index) {
const nextBlockData = blocksData[index + 1];
if (nextBlockData && nextBlockData.isDraggedBlock) {
return getNextNonDraggedBlock(blocksData, index + 1);
}
return nextBlockData;
}
/**
* Determines whether the user positioning the dragged block to nest as an
* inner block.
*
* Determined based on nesting level indentation of the current block, plus
* the indentation of the next level of nesting. The vertical position of the
* cursor must also be within the block.
*
* @param {WPPoint} point The point representing the cursor position when dragging.
* @param {DOMRect} rect The rectangle.
* @param {number} nestingLevel The nesting level of the block.
* @param {boolean} rtl Whether the editor is in RTL mode.
*/
function isNestingGesture(point, rect, nestingLevel = 1, rtl = false) {
const blockIndentPosition = rtl ? rect.right - nestingLevel * NESTING_LEVEL_INDENTATION : rect.left + nestingLevel * NESTING_LEVEL_INDENTATION;
const isNestingHorizontalGesture = rtl ? point.x < blockIndentPosition - NESTING_LEVEL_INDENTATION : point.x > blockIndentPosition + NESTING_LEVEL_INDENTATION;
return isNestingHorizontalGesture && point.y < rect.bottom;
}
// Block navigation is always a vertical list, so only allow dropping
// to the above or below a block.
const ALLOWED_DROP_EDGES = ['top', 'bottom'];
/**
* Given blocks data and the cursor position, compute the drop target.
*
* @param {WPListViewDropZoneBlocks} blocksData Data about the blocks in list view.
* @param {WPPoint} position The point representing the cursor position when dragging.
* @param {boolean} rtl Whether the editor is in RTL mode.
*
* @return {WPListViewDropZoneTarget | undefined} An object containing data about the drop target.
*/
function getListViewDropTarget(blocksData, position, rtl = false) {
let candidateEdge;
let candidateBlockData;
let candidateDistance;
let candidateRect;
let candidateBlockIndex;
for (let i = 0; i < blocksData.length; i++) {
const blockData = blocksData[i];
if (blockData.isDraggedBlock) {
continue;
}
const rect = blockData.element.getBoundingClientRect();
const [distance, edge] = getDistanceToNearestEdge(position, rect, ALLOWED_DROP_EDGES);
const isCursorWithinBlock = isPointContainedByRect(position, rect);
if (candidateDistance === undefined || distance < candidateDistance || isCursorWithinBlock) {
candidateDistance = distance;
const index = blocksData.indexOf(blockData);
const previousBlockData = blocksData[index - 1];
// If dragging near the top of a block and the preceding block
// is at the same level, use the preceding block as the candidate
// instead, as later it makes determining a nesting drop easier.
if (edge === 'top' && previousBlockData && previousBlockData.rootClientId === blockData.rootClientId && !previousBlockData.isDraggedBlock) {
candidateBlockData = previousBlockData;
candidateEdge = 'bottom';
candidateRect = previousBlockData.element.getBoundingClientRect();
candidateBlockIndex = index - 1;
} else {
candidateBlockData = blockData;
candidateEdge = edge;
candidateRect = rect;
candidateBlockIndex = index;
}
// If the mouse position is within the block, break early
// as the user would intend to drop either before or after
// this block.
//
// This solves an issue where some rows in the list view
// tree overlap slightly due to sub-pixel rendering.
if (isCursorWithinBlock) {
break;
}
}
}
if (!candidateBlockData) {
return;
}
const candidateBlockParents = getCandidateBlockParents(candidateBlockData, blocksData);
const isDraggingBelow = candidateEdge === 'bottom';
// If the user is dragging towards the bottom of the block check whether
// they might be trying to nest the block as a child.
// If the block already has inner blocks, and is expanded, this should be treated
// as nesting since the next block in the tree will be the first child.
// However, if the block is collapsed, dragging beneath the block should
// still be allowed, as the next visible block in the tree will be a sibling.
if (isDraggingBelow && candidateBlockData.canInsertDraggedBlocksAsChild && (candidateBlockData.innerBlockCount > 0 && candidateBlockData.isExpanded || isNestingGesture(position, candidateRect, candidateBlockParents.length, rtl))) {
// If the block is expanded, insert the block as the first child.
// Otherwise, for collapsed blocks, insert the block as the last child.
const newBlockIndex = candidateBlockData.isExpanded ? 0 : candidateBlockData.innerBlockCount || 0;
return {
rootClientId: candidateBlockData.clientId,
clientId: candidateBlockData.clientId,
blockIndex: newBlockIndex,
dropPosition: 'inside'
};
}
// If the user is dragging towards the bottom of the block check whether
// they might be trying to move the block to be at a parent level.
if (isDraggingBelow && candidateBlockData.rootClientId && isUpGesture(position, candidateRect, candidateBlockParents.length, rtl)) {
const nextBlock = getNextNonDraggedBlock(blocksData, candidateBlockIndex);
const currentLevel = candidateBlockData.nestingLevel;
const nextLevel = nextBlock ? nextBlock.nestingLevel : 1;
if (currentLevel && nextLevel) {
// Determine the desired relative level of the block to be dropped.
const desiredRelativeLevel = getDesiredRelativeParentLevel(position, candidateRect, candidateBlockParents.length, rtl);
const targetParentIndex = Math.max(Math.min(desiredRelativeLevel, currentLevel - nextLevel), 0);
if (candidateBlockParents[targetParentIndex]) {
// Default to the block index of the candidate block.
let newBlockIndex = candidateBlockData.blockIndex;
// If the next block is at the same level, use that as the default
// block index. This ensures that the block is dropped in the correct
// position when dragging to the bottom of a block.
if (candidateBlockParents[targetParentIndex].nestingLevel === nextBlock?.nestingLevel) {
newBlockIndex = nextBlock?.blockIndex;
} else {
// Otherwise, search from the current block index back
// to find the last block index within the same target parent.
for (let i = candidateBlockIndex; i >= 0; i--) {
const blockData = blocksData[i];
if (blockData.rootClientId === candidateBlockParents[targetParentIndex].rootClientId) {
newBlockIndex = blockData.blockIndex + 1;
break;
}
}
}
return {
rootClientId: candidateBlockParents[targetParentIndex].rootClientId,
clientId: candidateBlockData.clientId,
blockIndex: newBlockIndex,
dropPosition: candidateEdge
};
}
}
}
// If dropping as a sibling, but block cannot be inserted in
// this context, return early.
if (!candidateBlockData.canInsertDraggedBlocksAsSibling) {
return;
}
const offset = isDraggingBelow ? 1 : 0;
return {
rootClientId: candidateBlockData.rootClientId,
clientId: candidateBlockData.clientId,
blockIndex: candidateBlockData.blockIndex + offset,
dropPosition: candidateEdge
};
}
// Throttle options need to be defined outside of the hook to avoid
// re-creating the object on every render. This is due to a limitation
// of the `useThrottle` hook, where the options object is included
// in the dependency array for memoization.
const EXPAND_THROTTLE_OPTIONS = {
leading: false,
// Don't call the function immediately on the first call.
trailing: true // Do call the function on the last call.
};
/**
* A react hook for implementing a drop zone in list view.
*
* @param {Object} props Named parameters.
* @param {?HTMLElement} [props.dropZoneElement] Optional element to be used as the drop zone.
* @param {Object} [props.expandedState] The expanded state of the blocks in the list view.
* @param {Function} [props.setExpandedState] Function to set the expanded state of a list of block clientIds.
*
* @return {WPListViewDropZoneTarget} The drop target.
*/
function useListViewDropZone({
dropZoneElement,
expandedState,
setExpandedState
}) {
const {
getBlockRootClientId,
getBlockIndex,
getBlockCount,
getDraggedBlockClientIds,
canInsertBlocks
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const [target, setTarget] = (0,external_wp_element_namespaceObject.useState)();
const {
rootClientId: targetRootClientId,
blockIndex: targetBlockIndex
} = target || {};
const onBlockDrop = useOnBlockDrop(targetRootClientId, targetBlockIndex);
const rtl = (0,external_wp_i18n_namespaceObject.isRTL)();
const previousRootClientId = (0,external_wp_compose_namespaceObject.usePrevious)(targetRootClientId);
const maybeExpandBlock = (0,external_wp_element_namespaceObject.useCallback)((_expandedState, _target) => {
// If the user is attempting to drop a block inside a collapsed block,
// that is, using a nesting gesture flagged by 'inside' dropPosition,
// expand the block within the list view, if it isn't already.
const {
rootClientId
} = _target || {};
if (!rootClientId) {
return;
}
if (_target?.dropPosition === 'inside' && !_expandedState[rootClientId]) {
setExpandedState({
type: 'expand',
clientIds: [rootClientId]
});
}
}, [setExpandedState]);
// Throttle the maybeExpandBlock function to avoid expanding the block
// too quickly when the user is dragging over the block. This is to
// avoid expanding the block when the user is just passing over it.
const throttledMaybeExpandBlock = (0,external_wp_compose_namespaceObject.useThrottle)(maybeExpandBlock, 500, EXPAND_THROTTLE_OPTIONS);
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (target?.dropPosition !== 'inside' || previousRootClientId !== target?.rootClientId) {
throttledMaybeExpandBlock.cancel();
return;
}
throttledMaybeExpandBlock(expandedState, target);
}, [expandedState, previousRootClientId, target, throttledMaybeExpandBlock]);
const draggedBlockClientIds = getDraggedBlockClientIds();
const throttled = (0,external_wp_compose_namespaceObject.useThrottle)((0,external_wp_element_namespaceObject.useCallback)((event, currentTarget) => {
const position = {
x: event.clientX,
y: event.clientY
};
const isBlockDrag = !!draggedBlockClientIds?.length;
const blockElements = Array.from(currentTarget.querySelectorAll('[data-block]'));
const blocksData = blockElements.map(blockElement => {
const clientId = blockElement.dataset.block;
const isExpanded = blockElement.dataset.expanded === 'true';
const isDraggedBlock = blockElement.classList.contains('is-dragging');
// Get nesting level from `aria-level` attribute because Firefox does not support `element.ariaLevel`.
const nestingLevel = parseInt(blockElement.getAttribute('aria-level'), 10);
const rootClientId = getBlockRootClientId(clientId);
return {
clientId,
isExpanded,
rootClientId,
blockIndex: getBlockIndex(clientId),
element: blockElement,
nestingLevel: nestingLevel || undefined,
isDraggedBlock: isBlockDrag ? isDraggedBlock : false,
innerBlockCount: getBlockCount(clientId),
canInsertDraggedBlocksAsSibling: isBlockDrag ? canInsertBlocks(draggedBlockClientIds, rootClientId) : true,
canInsertDraggedBlocksAsChild: isBlockDrag ? canInsertBlocks(draggedBlockClientIds, clientId) : true
};
});
const newTarget = getListViewDropTarget(blocksData, position, rtl);
if (newTarget) {
setTarget(newTarget);
}
}, [canInsertBlocks, draggedBlockClientIds, getBlockCount, getBlockIndex, getBlockRootClientId, rtl]), 50);
const ref = (0,external_wp_compose_namespaceObject.__experimentalUseDropZone)({
dropZoneElement,
onDrop(event) {
throttled.cancel();
if (target) {
onBlockDrop(event);
}
// Use `undefined` value to indicate that the drag has concluded.
// This allows styling rules that are active only when a user is
// dragging to be removed.
setTarget(undefined);
},
onDragLeave() {
throttled.cancel();
// Use `null` value to indicate that the drop target is not valid,
// but that the drag is still active. This allows for styling rules
// that are active only when a user drags outside of the list view.
setTarget(null);
},
onDragOver(event) {
// `currentTarget` is only available while the event is being
// handled, so get it now and pass it to the thottled function.
// https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
throttled(event, event.currentTarget);
},
onDragEnd() {
throttled.cancel();
// Use `undefined` value to indicate that the drag has concluded.
// This allows styling rules that are active only when a user is
// dragging to be removed.
setTarget(undefined);
}
});
return {
ref,
target
};
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/use-list-view-expand-selected-item.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function useListViewExpandSelectedItem({
firstSelectedBlockClientId,
setExpandedState
}) {
const [selectedTreeId, setSelectedTreeId] = (0,external_wp_element_namespaceObject.useState)(null);
const {
selectedBlockParentClientIds
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockParents
} = select(store);
return {
selectedBlockParentClientIds: getBlockParents(firstSelectedBlockClientId, false)
};
}, [firstSelectedBlockClientId]);
// Expand tree when a block is selected.
(0,external_wp_element_namespaceObject.useEffect)(() => {
// If the selectedTreeId is the same as the selected block,
// it means that the block was selected using the block list tree.
if (selectedTreeId === firstSelectedBlockClientId) {
return;
}
// If the selected block has parents, get the top-level parent.
if (selectedBlockParentClientIds?.length) {
// If the selected block has parents,
// expand the tree branch.
setExpandedState({
type: 'expand',
clientIds: selectedBlockParentClientIds
});
}
}, [firstSelectedBlockClientId, selectedBlockParentClientIds, selectedTreeId, setExpandedState]);
return {
setSelectedTreeId
};
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/list-view/use-clipboard-handler.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
// This hook borrows from useClipboardHandler in ../writing-flow/use-clipboard-handler.js
// and adds behaviour for the list view, while skipping partial selection.
function use_clipboard_handler_useClipboardHandler({
selectBlock
}) {
const registry = (0,external_wp_data_namespaceObject.useRegistry)();
const {
getBlockOrder,
getBlockRootClientId,
getBlocksByClientId,
getPreviousBlockClientId,
getSelectedBlockClientIds,
getSettings,
canInsertBlockType,
canRemoveBlocks
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
flashBlock,
removeBlocks,
replaceBlocks,
insertBlocks
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const notifyCopy = useNotifyCopy();
return (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
function updateFocusAndSelection(focusClientId, shouldSelectBlock) {
if (shouldSelectBlock) {
selectBlock(undefined, focusClientId, null, null);
}
focusListItem(focusClientId, node);
}
// Determine which blocks to update:
// If the current (focused) block is part of the block selection, use the whole selection.
// If the focused block is not part of the block selection, only update the focused block.
function getBlocksToUpdate(clientId) {
const selectedBlockClientIds = getSelectedBlockClientIds();
const isUpdatingSelectedBlocks = selectedBlockClientIds.includes(clientId);
const firstBlockClientId = isUpdatingSelectedBlocks ? selectedBlockClientIds[0] : clientId;
const firstBlockRootClientId = getBlockRootClientId(firstBlockClientId);
const blocksToUpdate = isUpdatingSelectedBlocks ? selectedBlockClientIds : [clientId];
return {
blocksToUpdate,
firstBlockClientId,
firstBlockRootClientId,
originallySelectedBlockClientIds: selectedBlockClientIds
};
}
function handler(event) {
if (event.defaultPrevented) {
// This was possibly already handled in rich-text/use-paste-handler.js.
return;
}
// Only handle events that occur within the list view.
if (!node.contains(event.target.ownerDocument.activeElement)) {
return;
}
// Retrieve the block clientId associated with the focused list view row.
// This enables applying copy / cut / paste behavior to the focused block,
// rather than just the blocks that are currently selected.
const listViewRow = event.target.ownerDocument.activeElement?.closest('[role=row]');
const clientId = listViewRow?.dataset?.block;
if (!clientId) {
return;
}
const {
blocksToUpdate: selectedBlockClientIds,
firstBlockClientId,
firstBlockRootClientId,
originallySelectedBlockClientIds
} = getBlocksToUpdate(clientId);
if (selectedBlockClientIds.length === 0) {
return;
}
event.preventDefault();
if (event.type === 'copy' || event.type === 'cut') {
if (selectedBlockClientIds.length === 1) {
flashBlock(selectedBlockClientIds[0]);
}
notifyCopy(event.type, selectedBlockClientIds);
const blocks = getBlocksByClientId(selectedBlockClientIds);
setClipboardBlocks(event, blocks, registry);
}
if (event.type === 'cut') {
var _getPreviousBlockClie;
// Don't update the selection if the blocks cannot be deleted.
if (!canRemoveBlocks(selectedBlockClientIds)) {
return;
}
let blockToFocus = (_getPreviousBlockClie = getPreviousBlockClientId(firstBlockClientId)) !== null && _getPreviousBlockClie !== void 0 ? _getPreviousBlockClie :
// If the previous block is not found (when the first block is deleted),
// fallback to focus the parent block.
firstBlockRootClientId;
// Remove blocks, but don't update selection, and it will be handled below.
removeBlocks(selectedBlockClientIds, false);
// Update the selection if the original selection has been removed.
const shouldUpdateSelection = originallySelectedBlockClientIds.length > 0 && getSelectedBlockClientIds().length === 0;
// If there's no previous block nor parent block, focus the first block.
if (!blockToFocus) {
blockToFocus = getBlockOrder()[0];
}
updateFocusAndSelection(blockToFocus, shouldUpdateSelection);
} else if (event.type === 'paste') {
const {
__experimentalCanUserUseUnfilteredHTML: canUserUseUnfilteredHTML
} = getSettings();
const blocks = getPasteBlocks(event, canUserUseUnfilteredHTML);
if (selectedBlockClientIds.length === 1) {
const [selectedBlockClientId] = selectedBlockClientIds;
// If a single block is focused, and the blocks to be posted can
// be inserted within the block, then append the pasted blocks
// within the focused block. For example, if you have copied a paragraph
// block and paste it within a single Group block, this will append
// the paragraph block within the Group block.
if (blocks.every(block => canInsertBlockType(block.name, selectedBlockClientId))) {
insertBlocks(blocks, undefined, selectedBlockClientId);
updateFocusAndSelection(blocks[0]?.clientId, false);
return;
}
}
replaceBlocks(selectedBlockClientIds, blocks, blocks.length - 1, -1);
updateFocusAndSelection(blocks[0]?.clientId, false);
}
}
node.ownerDocument.addEventListener('copy', handler);
node.ownerDocument.addEventListener('cut', handler);
node.ownerDocument.addEventListener('paste', handler);
return () => {
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/list-view/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const expanded = (state, action) => {
if (action.type === 'clear') {
return {};
}
if (Array.isArray(action.clientIds)) {
return {
...state,
...action.clientIds.reduce((newState, id) => ({
...newState,
[id]: action.type === 'expand'
}), {})
};
}
return state;
};
const BLOCK_LIST_ITEM_HEIGHT = 32;
/** @typedef {import('react').ComponentType} ComponentType */
/** @typedef {import('react').Ref<HTMLElement>} Ref */
/**
* Show a hierarchical list of blocks.
*
* @param {Object} props Components props.
* @param {string} props.id An HTML element id for the root element of ListView.
* @param {Array} props.blocks _deprecated_ Custom subset of block client IDs to be used instead of the default hierarchy.
* @param {?HTMLElement} props.dropZoneElement Optional element to be used as the drop zone.
* @param {?boolean} props.showBlockMovers Flag to enable block movers. Defaults to `false`.
* @param {?boolean} props.isExpanded Flag to determine whether nested levels are expanded by default. Defaults to `false`.
* @param {?boolean} props.showAppender Flag to show or hide the block appender. Defaults to `false`.
* @param {?ComponentType} props.blockSettingsMenu Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component.
* @param {string} props.rootClientId The client id of the root block from which we determine the blocks to show in the list.
* @param {string} props.description Optional accessible description for the tree grid component.
* @param {?Function} props.onSelect Optional callback to be invoked when a block is selected. Receives the block object that was selected.
* @param {?ComponentType} props.additionalBlockContent Component that renders additional block content UI.
* @param {Ref} ref Forwarded ref
*/
function ListViewComponent({
id,
blocks,
dropZoneElement,
showBlockMovers = false,
isExpanded = false,
showAppender = false,
blockSettingsMenu: BlockSettingsMenu = BlockSettingsDropdown,
rootClientId,
description,
onSelect,
additionalBlockContent: AdditionalBlockContent
}, ref) {
// This can be removed once we no longer need to support the blocks prop.
if (blocks) {
external_wp_deprecated_default()('`blocks` property in `wp.blockEditor.__experimentalListView`', {
since: '6.3',
alternative: '`rootClientId` property'
});
}
const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(ListViewComponent);
const {
clientIdsTree,
draggedClientIds,
selectedClientIds
} = useListViewClientIds({
blocks,
rootClientId
});
const blockIndexes = useListViewBlockIndexes(clientIdsTree);
const {
getBlock
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
visibleBlockCount
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getGlobalBlockCount,
getClientIdsOfDescendants
} = select(store);
const draggedBlockCount = draggedClientIds?.length > 0 ? getClientIdsOfDescendants(draggedClientIds).length + 1 : 0;
return {
visibleBlockCount: getGlobalBlockCount() - draggedBlockCount
};
}, [draggedClientIds]);
const {
updateBlockSelection
} = useBlockSelection();
const [expandedState, setExpandedState] = (0,external_wp_element_namespaceObject.useReducer)(expanded, {});
const [insertedBlock, setInsertedBlock] = (0,external_wp_element_namespaceObject.useState)(null);
const {
setSelectedTreeId
} = useListViewExpandSelectedItem({
firstSelectedBlockClientId: selectedClientIds[0],
setExpandedState
});
const selectEditorBlock = (0,external_wp_element_namespaceObject.useCallback)(
/**
* @param {MouseEvent | KeyboardEvent | undefined} event
* @param {string} blockClientId
* @param {null | undefined | -1 | 1} focusPosition
*/
(event, blockClientId, focusPosition) => {
updateBlockSelection(event, blockClientId, null, focusPosition);
setSelectedTreeId(blockClientId);
if (onSelect) {
onSelect(getBlock(blockClientId));
}
}, [setSelectedTreeId, updateBlockSelection, onSelect, getBlock]);
const {
ref: dropZoneRef,
target: blockDropTarget
} = useListViewDropZone({
dropZoneElement,
expandedState,
setExpandedState
});
const elementRef = (0,external_wp_element_namespaceObject.useRef)();
// Allow handling of copy, cut, and paste events.
const clipBoardRef = use_clipboard_handler_useClipboardHandler({
selectBlock: selectEditorBlock
});
const treeGridRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([clipBoardRef, elementRef, dropZoneRef, ref]);
(0,external_wp_element_namespaceObject.useEffect)(() => {
// If a blocks are already selected when the list view is initially
// mounted, shift focus to the first selected block.
if (selectedClientIds?.length) {
focusListItem(selectedClientIds[0], elementRef?.current);
}
// Disable reason: Only focus on the selected item when the list view is mounted.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const expand = (0,external_wp_element_namespaceObject.useCallback)(clientId => {
if (!clientId) {
return;
}
const clientIds = Array.isArray(clientId) ? clientId : [clientId];
setExpandedState({
type: 'expand',
clientIds
});
}, [setExpandedState]);
const collapse = (0,external_wp_element_namespaceObject.useCallback)(clientId => {
if (!clientId) {
return;
}
setExpandedState({
type: 'collapse',
clientIds: [clientId]
});
}, [setExpandedState]);
const collapseAll = (0,external_wp_element_namespaceObject.useCallback)(() => {
setExpandedState({
type: 'clear'
});
}, [setExpandedState]);
const expandRow = (0,external_wp_element_namespaceObject.useCallback)(row => {
expand(row?.dataset?.block);
}, [expand]);
const collapseRow = (0,external_wp_element_namespaceObject.useCallback)(row => {
collapse(row?.dataset?.block);
}, [collapse]);
const focusRow = (0,external_wp_element_namespaceObject.useCallback)((event, startRow, endRow) => {
if (event.shiftKey) {
updateBlockSelection(event, startRow?.dataset?.block, endRow?.dataset?.block);
}
}, [updateBlockSelection]);
useListViewCollapseItems({
collapseAll,
expand
});
const firstDraggedBlockClientId = draggedClientIds?.[0];
// Convert a blockDropTarget into indexes relative to the blocks in the list view.
// These values are used to determine which blocks should be displaced to make room
// for the drop indicator. See `ListViewBranch` and `getDragDisplacementValues`.
const {
blockDropTargetIndex,
blockDropPosition,
firstDraggedBlockIndex
} = (0,external_wp_element_namespaceObject.useMemo)(() => {
let _blockDropTargetIndex, _firstDraggedBlockIndex;
if (blockDropTarget?.clientId) {
const foundBlockIndex = blockIndexes[blockDropTarget.clientId];
// If dragging below or inside the block, treat the drop target as the next block.
_blockDropTargetIndex = foundBlockIndex === undefined || blockDropTarget?.dropPosition === 'top' ? foundBlockIndex : foundBlockIndex + 1;
} else if (blockDropTarget === null) {
// A `null` value is used to indicate that the user is dragging outside of the list view.
_blockDropTargetIndex = null;
}
if (firstDraggedBlockClientId) {
const foundBlockIndex = blockIndexes[firstDraggedBlockClientId];
_firstDraggedBlockIndex = foundBlockIndex === undefined || blockDropTarget?.dropPosition === 'top' ? foundBlockIndex : foundBlockIndex + 1;
}
return {
blockDropTargetIndex: _blockDropTargetIndex,
blockDropPosition: blockDropTarget?.dropPosition,
firstDraggedBlockIndex: _firstDraggedBlockIndex
};
}, [blockDropTarget, blockIndexes, firstDraggedBlockClientId]);
const contextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({
blockDropPosition,
blockDropTargetIndex,
blockIndexes,
draggedClientIds,
expandedState,
expand,
firstDraggedBlockIndex,
collapse,
collapseAll,
BlockSettingsMenu,
listViewInstanceId: instanceId,
AdditionalBlockContent,
insertedBlock,
setInsertedBlock,
treeGridElementRef: elementRef,
rootClientId
}), [blockDropPosition, blockDropTargetIndex, blockIndexes, draggedClientIds, expandedState, expand, firstDraggedBlockIndex, collapse, collapseAll, BlockSettingsMenu, instanceId, AdditionalBlockContent, insertedBlock, setInsertedBlock, rootClientId]);
// List View renders a fixed number of items and relies on each having a fixed item height of 36px.
// If this value changes, we should also change the itemHeight value set in useFixedWindowList.
// See: https://github.com/WordPress/gutenberg/pull/35230 for additional context.
const [fixedListWindow] = (0,external_wp_compose_namespaceObject.__experimentalUseFixedWindowList)(elementRef, BLOCK_LIST_ITEM_HEIGHT, visibleBlockCount, {
// Ensure that the windowing logic is recalculated when the expanded state changes.
// This is necessary because expanding a collapsed block in a short list view can
// switch the list view to a tall list view with a scrollbar, and vice versa.
// When this happens, the windowing logic needs to be recalculated to ensure that
// the correct number of blocks are rendered, by rechecking for a scroll container.
expandedState,
useWindowing: true,
windowOverscan: 40
});
// If there are no blocks to show and we're not showing the appender, do not render the list view.
if (!clientIdsTree.length && !showAppender) {
return null;
}
const describedById = description && `block-editor-list-view-description-${instanceId}`;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_data_namespaceObject.AsyncModeProvider, {
value: true,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ListViewDropIndicatorPreview, {
draggedBlockClientId: firstDraggedBlockClientId,
listViewRef: elementRef,
blockDropTarget: blockDropTarget
}), description && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.VisuallyHidden, {
id: describedById,
children: description
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalTreeGrid, {
id: id,
className: dist_clsx('block-editor-list-view-tree', {
'is-dragging': draggedClientIds?.length > 0 && blockDropTargetIndex !== undefined
}),
"aria-label": (0,external_wp_i18n_namespaceObject.__)('Block navigation structure'),
ref: treeGridRef,
onCollapseRow: collapseRow,
onExpandRow: expandRow,
onFocusRow: focusRow,
applicationAriaLabel: (0,external_wp_i18n_namespaceObject.__)('Block navigation structure'),
"aria-describedby": describedById,
style: {
'--wp-admin--list-view-dragged-items-height': draggedClientIds?.length ? `${BLOCK_LIST_ITEM_HEIGHT * (draggedClientIds.length - 1)}px` : null
},
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ListViewContext.Provider, {
value: contextValue,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(branch, {
blocks: clientIdsTree,
parentId: rootClientId,
selectBlock: selectEditorBlock,
showBlockMovers: showBlockMovers,
fixedListWindow: fixedListWindow,
selectedClientIds: selectedClientIds,
isExpanded: isExpanded,
showAppender: showAppender
})
})
})]
});
}
// This is the private API for the ListView component.
// It allows access to all props, not just the public ones.
const PrivateListView = (0,external_wp_element_namespaceObject.forwardRef)(ListViewComponent);
// This is the public API for the ListView component.
// We wrap the PrivateListView component to hide some props from the public API.
/* harmony default export */ const components_list_view = ((0,external_wp_element_namespaceObject.forwardRef)((props, ref) => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PrivateListView, {
ref: ref,
...props,
showAppender: false,
rootClientId: null,
onSelect: null,
additionalBlockContent: null,
blockSettingsMenu: undefined
});
}));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-navigation/dropdown.js
/**
* WordPress dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockNavigationDropdownToggle({
isEnabled,
onToggle,
isOpen,
innerRef,
...props
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button
// TODO: Switch to `true` (40px size) if possible
, {
__next40pxDefaultSize: false,
...props,
ref: innerRef,
icon: list_view,
"aria-expanded": isOpen,
"aria-haspopup": "true",
onClick: isEnabled ? onToggle : undefined
/* translators: button label text should, if possible, be under 16 characters. */,
label: (0,external_wp_i18n_namespaceObject.__)('List view'),
className: "block-editor-block-navigation",
"aria-disabled": !isEnabled
});
}
function BlockNavigationDropdown({
isDisabled,
...props
}, ref) {
external_wp_deprecated_default()('wp.blockEditor.BlockNavigationDropdown', {
since: '6.1',
alternative: 'wp.components.Dropdown and wp.blockEditor.ListView'
});
const hasBlocks = (0,external_wp_data_namespaceObject.useSelect)(select => !!select(store).getBlockCount(), []);
const isEnabled = hasBlocks && !isDisabled;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Dropdown, {
contentClassName: "block-editor-block-navigation__popover",
popoverProps: {
placement: 'bottom-start'
},
renderToggle: ({
isOpen,
onToggle
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockNavigationDropdownToggle, {
...props,
innerRef: ref,
isOpen: isOpen,
onToggle: onToggle,
isEnabled: isEnabled
}),
renderContent: () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-block-navigation__container",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("p", {
className: "block-editor-block-navigation__label",
children: (0,external_wp_i18n_namespaceObject.__)('List view')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(components_list_view, {})]
})
});
}
/* harmony default export */ const dropdown = ((0,external_wp_element_namespaceObject.forwardRef)(BlockNavigationDropdown));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-styles/preview-panel.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockStylesPreviewPanel({
genericPreviewBlock,
style,
className,
activeStyle
}) {
const example = (0,external_wp_blocks_namespaceObject.getBlockType)(genericPreviewBlock.name)?.example;
const styleClassName = replaceActiveStyle(className, activeStyle, style);
const previewBlocks = (0,external_wp_element_namespaceObject.useMemo)(() => {
return {
...genericPreviewBlock,
title: style.label || style.name,
description: style.description,
initialAttributes: {
...genericPreviewBlock.attributes,
className: styleClassName + ' block-editor-block-styles__block-preview-container'
},
example
};
}, [genericPreviewBlock, styleClassName]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(preview_panel, {
item: previewBlocks
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-styles/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const block_styles_noop = () => {};
// Block Styles component for the Settings Sidebar.
function BlockStyles({
clientId,
onSwitch = block_styles_noop,
onHoverClassName = block_styles_noop
}) {
const {
onSelect,
stylesToRender,
activeStyle,
genericPreviewBlock,
className: previewClassName
} = useStylesForBlocks({
clientId,
onSwitch
});
const [hoveredStyle, setHoveredStyle] = (0,external_wp_element_namespaceObject.useState)(null);
const isMobileViewport = (0,external_wp_compose_namespaceObject.useViewportMatch)('medium', '<');
if (!stylesToRender || stylesToRender.length === 0) {
return null;
}
const debouncedSetHoveredStyle = (0,external_wp_compose_namespaceObject.debounce)(setHoveredStyle, 250);
const onSelectStylePreview = style => {
onSelect(style);
onHoverClassName(null);
setHoveredStyle(null);
debouncedSetHoveredStyle.cancel();
};
const styleItemHandler = item => {
var _item$name;
if (hoveredStyle === item) {
debouncedSetHoveredStyle.cancel();
return;
}
debouncedSetHoveredStyle(item);
onHoverClassName((_item$name = item?.name) !== null && _item$name !== void 0 ? _item$name : null);
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-block-styles",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-block-styles__variants",
children: stylesToRender.map(style => {
const buttonText = style.label || style.name;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
className: dist_clsx('block-editor-block-styles__item', {
'is-active': activeStyle.name === style.name
}),
variant: "secondary",
label: buttonText,
onMouseEnter: () => styleItemHandler(style),
onFocus: () => styleItemHandler(style),
onMouseLeave: () => styleItemHandler(null),
onBlur: () => styleItemHandler(null),
onClick: () => onSelectStylePreview(style),
"aria-current": activeStyle.name === style.name,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalTruncate, {
numberOfLines: 1,
className: "block-editor-block-styles__item-text",
children: buttonText
})
}, style.name);
})
}), hoveredStyle && !isMobileViewport && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Popover, {
placement: "left-start",
offset: 34,
focusOnMount: false,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-block-styles__preview-panel",
onMouseLeave: () => styleItemHandler(null),
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockStylesPreviewPanel, {
activeStyle: activeStyle,
className: previewClassName,
genericPreviewBlock: genericPreviewBlock,
style: hoveredStyle
})
})
})]
});
}
/* harmony default export */ const block_styles = (BlockStyles);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/paragraph.js
/**
* WordPress dependencies
*/
const paragraph = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "m9.99609 14v-.2251l.00391.0001v6.225h1.5v-14.5h2.5v14.5h1.5v-14.5h3v-1.5h-8.50391c-2.76142 0-5 2.23858-5 5 0 2.7614 2.23858 5 5 5z"
})
});
/* harmony default export */ const library_paragraph = (paragraph);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/heading-level-1.js
/**
* WordPress dependencies
*/
const headingLevel1 = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M17.6 7c-.6.9-1.5 1.7-2.6 2v1h2v7h2V7h-1.4zM11 11H7V7H5v10h2v-4h4v4h2V7h-2v4z"
})
});
/* harmony default export */ const heading_level_1 = (headingLevel1);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/heading-level-2.js
/**
* WordPress dependencies
*/
const headingLevel2 = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M9 11.1H5v-4H3v10h2v-4h4v4h2v-10H9v4zm8 4c.5-.4.6-.6 1.1-1.1.4-.4.8-.8 1.2-1.3.3-.4.6-.8.9-1.3.2-.4.3-.8.3-1.3 0-.4-.1-.9-.3-1.3-.2-.4-.4-.7-.8-1-.3-.3-.7-.5-1.2-.6-.5-.2-1-.2-1.5-.2-.4 0-.7 0-1.1.1-.3.1-.7.2-1 .3-.3.1-.6.3-.9.5-.3.2-.6.4-.8.7l1.2 1.2c.3-.3.6-.5 1-.7.4-.2.7-.3 1.2-.3s.9.1 1.3.4c.3.3.5.7.5 1.1 0 .4-.1.8-.4 1.1-.3.5-.6.9-1 1.2-.4.4-1 .9-1.6 1.4-.6.5-1.4 1.1-2.2 1.6v1.5h8v-2H17z"
})
});
/* harmony default export */ const heading_level_2 = (headingLevel2);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/heading-level-3.js
/**
* WordPress dependencies
*/
const headingLevel3 = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M9 11H5V7H3v10h2v-4h4v4h2V7H9v4zm11.3 1.7c-.4-.4-1-.7-1.6-.8v-.1c.6-.2 1.1-.5 1.5-.9.3-.4.5-.8.5-1.3 0-.4-.1-.8-.3-1.1-.2-.3-.5-.6-.8-.8-.4-.2-.8-.4-1.2-.5-.6-.1-1.1-.2-1.6-.2-.6 0-1.3.1-1.8.3s-1.1.5-1.6.9l1.2 1.4c.4-.2.7-.4 1.1-.6.3-.2.7-.3 1.1-.3.4 0 .8.1 1.1.3.3.2.4.5.4.8 0 .4-.2.7-.6.9-.7.3-1.5.5-2.2.4v1.6c.5 0 1 0 1.5.1.3.1.7.2 1 .3.2.1.4.2.5.4s.1.4.1.6c0 .3-.2.7-.5.8-.4.2-.9.3-1.4.3s-1-.1-1.4-.3c-.4-.2-.8-.4-1.2-.7L13 15.6c.5.4 1 .8 1.6 1 .7.3 1.5.4 2.3.4.6 0 1.1-.1 1.6-.2.4-.1.9-.2 1.3-.5.4-.2.7-.5.9-.9.2-.4.3-.8.3-1.2 0-.6-.3-1.1-.7-1.5z"
})
});
/* harmony default export */ const heading_level_3 = (headingLevel3);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/heading-level-4.js
/**
* WordPress dependencies
*/
const headingLevel4 = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M20 13V7h-3l-4 6v2h5v2h2v-2h1v-2h-1zm-2 0h-2.8L18 9v4zm-9-2H5V7H3v10h2v-4h4v4h2V7H9v4z"
})
});
/* harmony default export */ const heading_level_4 = (headingLevel4);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/heading-level-5.js
/**
* WordPress dependencies
*/
const headingLevel5 = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M9 11H5V7H3v10h2v-4h4v4h2V7H9v4zm11.7 1.2c-.2-.3-.5-.7-.8-.9-.3-.3-.7-.5-1.1-.6-.5-.1-.9-.2-1.4-.2-.2 0-.5.1-.7.1-.2.1-.5.1-.7.2l.1-1.9h4.3V7H14l-.3 5 1 .6.5-.2.4-.1c.1-.1.3-.1.4-.1h.5c.5 0 1 .1 1.4.4.4.2.6.7.6 1.1 0 .4-.2.8-.6 1.1-.4.3-.9.4-1.4.4-.4 0-.9-.1-1.3-.3-.4-.2-.7-.4-1.1-.7 0 0-1.1 1.4-1 1.5.5.4 1 .8 1.6 1 .7.3 1.5.4 2.3.4.5 0 1-.1 1.5-.3s.9-.4 1.3-.7c.4-.3.7-.7.9-1.1s.3-.9.3-1.4-.1-1-.3-1.4z"
})
});
/* harmony default export */ const heading_level_5 = (headingLevel5);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/heading-level-6.js
/**
* WordPress dependencies
*/
const headingLevel6 = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M20.7 12.4c-.2-.3-.4-.6-.7-.9s-.6-.5-1-.6c-.4-.2-.8-.2-1.2-.2-.5 0-.9.1-1.3.3s-.8.5-1.2.8c0-.5 0-.9.2-1.4l.6-.9c.2-.2.5-.4.8-.5.6-.2 1.3-.2 1.9 0 .3.1.6.3.8.5 0 0 1.3-1.3 1.3-1.4-.4-.3-.9-.6-1.4-.8-.6-.2-1.3-.3-2-.3-.6 0-1.1.1-1.7.4-.5.2-1 .5-1.4.9-.4.4-.8 1-1 1.6-.3.7-.4 1.5-.4 2.3s.1 1.5.3 2.1c.2.6.6 1.1 1 1.5.4.4.9.7 1.4.9 1 .3 2 .3 3 0 .4-.1.8-.3 1.2-.6.3-.3.6-.6.8-1 .2-.5.3-.9.3-1.4s-.1-.9-.3-1.3zm-2 2.1c-.1.2-.3.4-.4.5-.1.1-.3.2-.5.2-.2.1-.4.1-.6.1-.2.1-.5 0-.7-.1-.2 0-.3-.2-.5-.3-.1-.2-.3-.4-.4-.6-.2-.3-.3-.7-.3-1 .3-.3.6-.5 1-.7.3-.1.7-.2 1-.2.4 0 .8.1 1.1.3.3.3.4.7.4 1.1 0 .2 0 .5-.1.7zM9 11H5V7H3v10h2v-4h4v4h2V7H9v4z"
})
});
/* harmony default export */ const heading_level_6 = (headingLevel6);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-heading-level-dropdown/heading-level-icon.js
/**
* WordPress dependencies
*/
/** @typedef {import('react').ComponentType} ComponentType */
/**
* HeadingLevelIcon props.
*
* @typedef WPHeadingLevelIconProps
*
* @property {number} level The heading level to show an icon for.
*/
const LEVEL_TO_PATH = {
0: library_paragraph,
1: heading_level_1,
2: heading_level_2,
3: heading_level_3,
4: heading_level_4,
5: heading_level_5,
6: heading_level_6
};
/**
* Heading level icon.
*
* @param {WPHeadingLevelIconProps} props Component props.
*
* @return {?ComponentType} The icon.
*/
function HeadingLevelIcon({
level
}) {
if (LEVEL_TO_PATH[level]) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Icon, {
icon: LEVEL_TO_PATH[level]
});
}
return null;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-heading-level-dropdown/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const HEADING_LEVELS = [1, 2, 3, 4, 5, 6];
const block_heading_level_dropdown_POPOVER_PROPS = {
className: 'block-library-heading-level-dropdown'
};
/** @typedef {import('react').ComponentType} ComponentType */
/**
* HeadingLevelDropdown props.
*
* @typedef WPHeadingLevelDropdownProps
*
* @property {number} value The chosen heading level.
* @property {number[]} options An array of supported heading levels.
* @property {()=>number} onChange Function called with
* the selected value changes.
*/
/**
* Dropdown for selecting a heading level (1 through 6) or paragraph (0).
*
* @param {WPHeadingLevelDropdownProps} props Component props.
*
* @return {ComponentType} The toolbar.
*/
function HeadingLevelDropdown({
options = HEADING_LEVELS,
value,
onChange
}) {
const validOptions = options.filter(option => option === 0 || HEADING_LEVELS.includes(option)).sort((a, b) => a - b); // Sorts numerically in ascending order;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarDropdownMenu, {
popoverProps: block_heading_level_dropdown_POPOVER_PROPS,
icon: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(HeadingLevelIcon, {
level: value
}),
label: (0,external_wp_i18n_namespaceObject.__)('Change level'),
controls: validOptions.map(targetLevel => {
const isActive = targetLevel === value;
return {
icon: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(HeadingLevelIcon, {
level: targetLevel
}),
title: targetLevel === 0 ? (0,external_wp_i18n_namespaceObject.__)('Paragraph') : (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: %d: heading level e.g: "1", "2", "3"
(0,external_wp_i18n_namespaceObject.__)('Heading %d'), targetLevel),
isActive,
onClick() {
onChange(targetLevel);
},
role: 'menuitemradio'
};
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/layout.js
/**
* WordPress dependencies
*/
const layout_layout = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M18 5.5H6a.5.5 0 00-.5.5v3h13V6a.5.5 0 00-.5-.5zm.5 5H10v8h8a.5.5 0 00.5-.5v-7.5zm-10 0h-3V18a.5.5 0 00.5.5h2.5v-8zM6 4h12a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2z"
})
});
/* harmony default export */ const library_layout = (layout_layout);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-variation-picker/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
function BlockVariationPicker({
icon = library_layout,
label = (0,external_wp_i18n_namespaceObject.__)('Choose variation'),
instructions = (0,external_wp_i18n_namespaceObject.__)('Select a variation to start with:'),
variations,
onSelect,
allowSkip
}) {
const classes = dist_clsx('block-editor-block-variation-picker', {
'has-many-variations': variations.length > 4
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.Placeholder, {
icon: icon,
label: label,
instructions: instructions,
className: classes,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("ul", {
className: "block-editor-block-variation-picker__variations",
role: "list",
"aria-label": (0,external_wp_i18n_namespaceObject.__)('Block variations'),
children: variations.map(variation => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("li", {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
variant: "tertiary",
icon: variation.icon && variation.icon.src ? variation.icon.src : variation.icon,
iconSize: 48,
onClick: () => onSelect(variation),
className: "block-editor-block-variation-picker__variation",
label: variation.description || variation.title
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
className: "block-editor-block-variation-picker__variation-label",
children: variation.title
})]
}, variation.name))
}), allowSkip && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-block-variation-picker__skip",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
variant: "link",
onClick: () => onSelect(),
children: (0,external_wp_i18n_namespaceObject.__)('Skip')
})
})]
});
}
/* harmony default export */ const block_variation_picker = (BlockVariationPicker);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-pattern-setup/constants.js
const VIEWMODES = {
carousel: 'carousel',
grid: 'grid'
};
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-pattern-setup/setup-toolbar.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const Actions = ({
onBlockPatternSelect
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-block-pattern-setup__actions",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button
// TODO: Switch to `true` (40px size) if possible
, {
__next40pxDefaultSize: false,
variant: "primary",
onClick: onBlockPatternSelect,
children: (0,external_wp_i18n_namespaceObject.__)('Choose')
})
});
const CarouselNavigation = ({
handlePrevious,
handleNext,
activeSlide,
totalSlides
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-block-pattern-setup__navigation",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button
// TODO: Switch to `true` (40px size) if possible
, {
__next40pxDefaultSize: false,
icon: (0,external_wp_i18n_namespaceObject.isRTL)() ? chevron_right : chevron_left,
label: (0,external_wp_i18n_namespaceObject.__)('Previous pattern'),
onClick: handlePrevious,
disabled: activeSlide === 0,
accessibleWhenDisabled: true
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button
// TODO: Switch to `true` (40px size) if possible
, {
__next40pxDefaultSize: false,
icon: (0,external_wp_i18n_namespaceObject.isRTL)() ? chevron_left : chevron_right,
label: (0,external_wp_i18n_namespaceObject.__)('Next pattern'),
onClick: handleNext,
disabled: activeSlide === totalSlides - 1,
accessibleWhenDisabled: true
})]
});
const SetupToolbar = ({
viewMode,
setViewMode,
handlePrevious,
handleNext,
activeSlide,
totalSlides,
onBlockPatternSelect
}) => {
const isCarouselView = viewMode === VIEWMODES.carousel;
const displayControls = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-block-pattern-setup__display-controls",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button
// TODO: Switch to `true` (40px size) if possible
, {
__next40pxDefaultSize: false,
icon: stretch_full_width,
label: (0,external_wp_i18n_namespaceObject.__)('Carousel view'),
onClick: () => setViewMode(VIEWMODES.carousel),
isPressed: isCarouselView
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button
// TODO: Switch to `true` (40px size) if possible
, {
__next40pxDefaultSize: false,
icon: library_grid,
label: (0,external_wp_i18n_namespaceObject.__)('Grid view'),
onClick: () => setViewMode(VIEWMODES.grid),
isPressed: viewMode === VIEWMODES.grid
})]
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-block-pattern-setup__toolbar",
children: [isCarouselView && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CarouselNavigation, {
handlePrevious: handlePrevious,
handleNext: handleNext,
activeSlide: activeSlide,
totalSlides: totalSlides
}), displayControls, isCarouselView && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Actions, {
onBlockPatternSelect: onBlockPatternSelect
})]
});
};
/* harmony default export */ const setup_toolbar = (SetupToolbar);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-pattern-setup/use-patterns-setup.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function usePatternsSetup(clientId, blockName, filterPatternsFn) {
return (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockRootClientId,
getPatternsByBlockTypes,
__experimentalGetAllowedPatterns
} = select(store);
const rootClientId = getBlockRootClientId(clientId);
if (filterPatternsFn) {
return __experimentalGetAllowedPatterns(rootClientId).filter(filterPatternsFn);
}
return getPatternsByBlockTypes(blockName, rootClientId);
}, [clientId, blockName, filterPatternsFn]);
}
/* harmony default export */ const use_patterns_setup = (usePatternsSetup);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-pattern-setup/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const SetupContent = ({
viewMode,
activeSlide,
patterns,
onBlockPatternSelect,
showTitles
}) => {
const containerClass = 'block-editor-block-pattern-setup__container';
if (viewMode === VIEWMODES.carousel) {
const slideClass = new Map([[activeSlide, 'active-slide'], [activeSlide - 1, 'previous-slide'], [activeSlide + 1, 'next-slide']]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-block-pattern-setup__carousel",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: containerClass,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "carousel-container",
children: patterns.map((pattern, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockPatternSlide, {
active: index === activeSlide,
className: slideClass.get(index) || '',
pattern: pattern
}, pattern.name))
})
})
});
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-block-pattern-setup__grid",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Composite, {
role: "listbox",
className: containerClass,
"aria-label": (0,external_wp_i18n_namespaceObject.__)('Patterns list'),
children: patterns.map(pattern => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_pattern_setup_BlockPattern, {
pattern: pattern,
onSelect: onBlockPatternSelect,
showTitles: showTitles
}, pattern.name))
})
});
};
function block_pattern_setup_BlockPattern({
pattern,
onSelect,
showTitles
}) {
const baseClassName = 'block-editor-block-pattern-setup-list';
const {
blocks,
description,
viewportWidth = 700
} = pattern;
const descriptionId = (0,external_wp_compose_namespaceObject.useInstanceId)(block_pattern_setup_BlockPattern, `${baseClassName}__item-description`);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: `${baseClassName}__list-item`,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.Composite.Item, {
render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
"aria-describedby": description ? descriptionId : undefined,
"aria-label": pattern.title,
className: `${baseClassName}__item`
}),
id: `${baseClassName}__pattern__${pattern.name}`,
role: "option",
onClick: () => onSelect(blocks),
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_preview, {
blocks: blocks,
viewportWidth: viewportWidth
}), showTitles && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: `${baseClassName}__item-title`,
children: pattern.title
}), !!description && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.VisuallyHidden, {
id: descriptionId,
children: description
})]
})
});
}
function BlockPatternSlide({
active,
className,
pattern,
minHeight
}) {
const {
blocks,
title,
description
} = pattern;
const descriptionId = (0,external_wp_compose_namespaceObject.useInstanceId)(BlockPatternSlide, 'block-editor-block-pattern-setup-list__item-description');
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
"aria-hidden": !active,
role: "img",
className: `pattern-slide ${className}`,
"aria-label": title,
"aria-describedby": description ? descriptionId : undefined,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_preview, {
blocks: blocks,
minHeight: minHeight
}), !!description && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.VisuallyHidden, {
id: descriptionId,
children: description
})]
});
}
const BlockPatternSetup = ({
clientId,
blockName,
filterPatternsFn,
onBlockPatternSelect,
initialViewMode = VIEWMODES.carousel,
showTitles = false
}) => {
const [viewMode, setViewMode] = (0,external_wp_element_namespaceObject.useState)(initialViewMode);
const [activeSlide, setActiveSlide] = (0,external_wp_element_namespaceObject.useState)(0);
const {
replaceBlock
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const patterns = use_patterns_setup(clientId, blockName, filterPatternsFn);
if (!patterns?.length) {
return null;
}
const onBlockPatternSelectDefault = blocks => {
const clonedBlocks = blocks.map(block => (0,external_wp_blocks_namespaceObject.cloneBlock)(block));
replaceBlock(clientId, clonedBlocks);
};
const onPatternSelectCallback = onBlockPatternSelect || onBlockPatternSelectDefault;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: `block-editor-block-pattern-setup view-mode-${viewMode}`,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SetupContent, {
viewMode: viewMode,
activeSlide: activeSlide,
patterns: patterns,
onBlockPatternSelect: onPatternSelectCallback,
showTitles: showTitles
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(setup_toolbar, {
viewMode: viewMode,
setViewMode: setViewMode,
activeSlide: activeSlide,
totalSlides: patterns.length,
handleNext: () => {
setActiveSlide(active => Math.min(active + 1, patterns.length - 1));
},
handlePrevious: () => {
setActiveSlide(active => Math.max(active - 1, 0));
},
onBlockPatternSelect: () => {
onPatternSelectCallback(patterns[activeSlide].blocks);
}
})]
})
});
};
/* harmony default export */ const block_pattern_setup = (BlockPatternSetup);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-variation-transforms/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function VariationsButtons({
className,
onSelectVariation,
selectedValue,
variations
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("fieldset", {
className: className,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.VisuallyHidden, {
as: "legend",
children: (0,external_wp_i18n_namespaceObject.__)('Transform to variation')
}), variations.map(variation => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
size: "compact",
icon: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_icon, {
icon: variation.icon,
showColors: true
}),
isPressed: selectedValue === variation.name,
label: selectedValue === variation.name ? variation.title : (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %s: Block or block variation name. */
(0,external_wp_i18n_namespaceObject.__)('Transform to %s'), variation.title),
onClick: () => onSelectVariation(variation.name),
"aria-label": variation.title,
showTooltip: true
}, variation.name))]
});
}
function VariationsDropdown({
className,
onSelectVariation,
selectedValue,
variations
}) {
const selectOptions = variations.map(({
name,
title,
description
}) => ({
value: name,
label: title,
info: description
}));
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.DropdownMenu, {
className: className,
label: (0,external_wp_i18n_namespaceObject.__)('Transform to variation'),
text: (0,external_wp_i18n_namespaceObject.__)('Transform to variation'),
popoverProps: {
position: 'bottom center',
className: `${className}__popover`
},
icon: chevron_down,
toggleProps: {
iconPosition: 'right'
},
children: () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: `${className}__container`,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuGroup, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItemsChoice, {
choices: selectOptions,
value: selectedValue,
onSelect: onSelectVariation
})
})
})
});
}
function VariationsToggleGroupControl({
className,
onSelectVariation,
selectedValue,
variations
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: className,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToggleGroupControl, {
label: (0,external_wp_i18n_namespaceObject.__)('Transform to variation'),
value: selectedValue,
hideLabelFromVision: true,
onChange: onSelectVariation,
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
children: variations.map(variation => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToggleGroupControlOptionIcon, {
icon: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_icon, {
icon: variation.icon,
showColors: true
}),
value: variation.name,
label: selectedValue === variation.name ? variation.title : (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %s: Block or block variation name. */
(0,external_wp_i18n_namespaceObject.__)('Transform to %s'), variation.title)
}, variation.name))
})
});
}
function __experimentalBlockVariationTransforms({
blockClientId
}) {
const {
updateBlockAttributes
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const {
activeBlockVariation,
variations,
isContentOnly
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getActiveBlockVariation,
getBlockVariations
} = select(external_wp_blocks_namespaceObject.store);
const {
getBlockName,
getBlockAttributes,
getBlockEditingMode
} = select(store);
const name = blockClientId && getBlockName(blockClientId);
const {
hasContentRoleAttribute
} = unlock(select(external_wp_blocks_namespaceObject.store));
const isContentBlock = hasContentRoleAttribute(name);
return {
activeBlockVariation: getActiveBlockVariation(name, getBlockAttributes(blockClientId)),
variations: name && getBlockVariations(name, 'transform'),
isContentOnly: getBlockEditingMode(blockClientId) === 'contentOnly' && !isContentBlock
};
}, [blockClientId]);
const selectedValue = activeBlockVariation?.name;
// Check if each variation has a unique icon.
const hasUniqueIcons = (0,external_wp_element_namespaceObject.useMemo)(() => {
const variationIcons = new Set();
if (!variations) {
return false;
}
variations.forEach(variation => {
if (variation.icon) {
variationIcons.add(variation.icon?.src || variation.icon);
}
});
return variationIcons.size === variations.length;
}, [variations]);
const onSelectVariation = variationName => {
updateBlockAttributes(blockClientId, {
...variations.find(({
name
}) => name === variationName).attributes
});
};
if (!variations?.length || isContentOnly) {
return null;
}
const baseClass = 'block-editor-block-variation-transforms';
// Show buttons if there are more than 5 variations because the ToggleGroupControl does not wrap
const showButtons = variations.length > 5;
const ButtonComponent = showButtons ? VariationsButtons : VariationsToggleGroupControl;
const Component = hasUniqueIcons ? ButtonComponent : VariationsDropdown;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, {
className: baseClass,
onSelectVariation: onSelectVariation,
selectedValue: selectedValue,
variations: variations
});
}
/* harmony default export */ const block_variation_transforms = (__experimentalBlockVariationTransforms);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/color-palette/with-color-context.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/* harmony default export */ const with_color_context = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => {
return props => {
const [colorsFeature, enableCustomColors] = use_settings_useSettings('color.palette', 'color.custom');
const {
colors = colorsFeature,
disableCustomColors = !enableCustomColors
} = props;
const hasColorsToChoose = colors && colors.length > 0 || !disableCustomColors;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WrappedComponent, {
...props,
colors,
disableCustomColors,
hasColorsToChoose
});
};
}, 'withColorContext'));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/color-palette/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/* harmony default export */ const color_palette = (with_color_context(external_wp_components_namespaceObject.ColorPalette));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/color-palette/control.js
/**
* Internal dependencies
*/
function ColorPaletteControl({
onChange,
value,
...otherProps
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(control, {
...otherProps,
onColorChange: onChange,
colorValue: value,
gradients: [],
disableCustomGradients: true
});
}
;// CONCATENATED MODULE: external ["wp","date"]
const external_wp_date_namespaceObject = window["wp"]["date"];
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/date-format-picker/index.js
/**
* WordPress dependencies
*/
// So that we illustrate the different formats in the dropdown properly, show a date that is
// somwhat recent, has a day greater than 12, and a month with more than three letters.
const exampleDate = new Date();
exampleDate.setDate(20);
exampleDate.setMonth(exampleDate.getMonth() - 3);
if (exampleDate.getMonth() === 4) {
// May has three letters, so use March.
exampleDate.setMonth(3);
}
/**
* The `DateFormatPicker` component renders controls that let the user choose a
* _date format_. That is, how they want their dates to be formatted.
*
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/date-format-picker/README.md
*
* @param {Object} props
* @param {string|null} props.format The selected date
* format. If
* `null`,
* _Default_ is
* selected.
* @param {string} props.defaultFormat The date format that
* will be used if the
* user selects
* 'Default'.
* @param {( format: string|null ) => void} props.onChange Called when a
* selection is
* made. If `null`,
* _Default_ is
* selected.
*/
function DateFormatPicker({
format,
defaultFormat,
onChange
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("fieldset", {
className: "block-editor-date-format-picker",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.VisuallyHidden, {
as: "legend",
children: (0,external_wp_i18n_namespaceObject.__)('Date format')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToggleControl, {
__nextHasNoMarginBottom: true,
label: (0,external_wp_i18n_namespaceObject.__)('Default format'),
help: `${(0,external_wp_i18n_namespaceObject.__)('Example:')} ${(0,external_wp_date_namespaceObject.dateI18n)(defaultFormat, exampleDate)}`,
checked: !format,
onChange: checked => onChange(checked ? null : defaultFormat)
}), format && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NonDefaultControls, {
format: format,
onChange: onChange
})]
});
}
function NonDefaultControls({
format,
onChange
}) {
var _suggestedOptions$fin;
// Suggest a short format, medium format, long format, and a standardised
// (YYYY-MM-DD) format. The short, medium, and long formats are localised as
// different languages have different ways of writing these. For example, 'F
// j, Y' (April 20, 2022) in American English (en_US) is 'j. F Y' (20. April
// 2022) in German (de). The resultant array is de-duplicated as some
// languages will use the same format string for short, medium, and long
// formats.
const suggestedFormats = [...new Set([/* translators: See https://www.php.net/manual/datetime.format.php */
'Y-m-d', /* translators: See https://www.php.net/manual/datetime.format.php */
(0,external_wp_i18n_namespaceObject._x)('n/j/Y', 'short date format'), /* translators: See https://www.php.net/manual/datetime.format.php */
(0,external_wp_i18n_namespaceObject._x)('n/j/Y g:i A', 'short date format with time'), /* translators: See https://www.php.net/manual/datetime.format.php */
(0,external_wp_i18n_namespaceObject._x)('M j, Y', 'medium date format'), /* translators: See https://www.php.net/manual/datetime.format.php */
(0,external_wp_i18n_namespaceObject._x)('M j, Y g:i A', 'medium date format with time'), /* translators: See https://www.php.net/manual/datetime.format.php */
(0,external_wp_i18n_namespaceObject._x)('F j, Y', 'long date format'), /* translators: See https://www.php.net/manual/datetime.format.php */
(0,external_wp_i18n_namespaceObject._x)('M j', 'short date format without the year')])];
const suggestedOptions = [...suggestedFormats.map((suggestedFormat, index) => ({
key: `suggested-${index}`,
name: (0,external_wp_date_namespaceObject.dateI18n)(suggestedFormat, exampleDate),
format: suggestedFormat
})), {
key: 'human-diff',
name: (0,external_wp_date_namespaceObject.humanTimeDiff)(exampleDate),
format: 'human-diff'
}];
const customOption = {
key: 'custom',
name: (0,external_wp_i18n_namespaceObject.__)('Custom'),
className: 'block-editor-date-format-picker__custom-format-select-control__custom-option',
hint: (0,external_wp_i18n_namespaceObject.__)('Enter your own date format')
};
const [isCustom, setIsCustom] = (0,external_wp_element_namespaceObject.useState)(() => !!format && !suggestedOptions.some(option => option.format === format));
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalVStack, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.CustomSelectControl, {
__next40pxDefaultSize: true,
label: (0,external_wp_i18n_namespaceObject.__)('Choose a format'),
options: [...suggestedOptions, customOption],
value: isCustom ? customOption : (_suggestedOptions$fin = suggestedOptions.find(option => option.format === format)) !== null && _suggestedOptions$fin !== void 0 ? _suggestedOptions$fin : customOption,
onChange: ({
selectedItem
}) => {
if (selectedItem === customOption) {
setIsCustom(true);
} else {
setIsCustom(false);
onChange(selectedItem.format);
}
}
}), isCustom && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.TextControl, {
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
label: (0,external_wp_i18n_namespaceObject.__)('Custom format'),
hideLabelFromVision: true,
help: (0,external_wp_element_namespaceObject.createInterpolateElement)((0,external_wp_i18n_namespaceObject.__)('Enter a date or time <Link>format string</Link>.'), {
Link: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ExternalLink, {
href: (0,external_wp_i18n_namespaceObject.__)('https://wordpress.org/documentation/article/customize-date-and-time-format/')
})
}),
value: format,
onChange: value => onChange(value)
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/colors-gradients/dropdown.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
// When the `ColorGradientSettingsDropdown` controls are being rendered to a
// `ToolsPanel` they must be wrapped in a `ToolsPanelItem`.
const WithToolsPanelItem = ({
setting,
children,
panelId,
...props
}) => {
const clearValue = () => {
if (setting.colorValue) {
setting.onColorChange();
} else if (setting.gradientValue) {
setting.onGradientChange();
}
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
hasValue: () => {
return !!setting.colorValue || !!setting.gradientValue;
},
label: setting.label,
onDeselect: clearValue,
isShownByDefault: setting.isShownByDefault !== undefined ? setting.isShownByDefault : true,
...props,
className: "block-editor-tools-panel-color-gradient-settings__item",
panelId: panelId
// Pass resetAllFilter if supplied due to rendering via SlotFill
// into parent ToolsPanel.
,
resetAllFilter: setting.resetAllFilter,
children: children
});
};
const dropdown_LabeledColorIndicator = ({
colorValue,
label
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalHStack, {
justify: "flex-start",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ColorIndicator, {
className: "block-editor-panel-color-gradient-settings__color-indicator",
colorValue: colorValue
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexItem, {
className: "block-editor-panel-color-gradient-settings__color-name",
title: label,
children: label
})]
});
// Renders a color dropdown's toggle as an `Item` if it is within an `ItemGroup`
// or as a `Button` if it isn't e.g. the controls are being rendered in
// a `ToolsPanel`.
const renderToggle = settings => ({
onToggle,
isOpen
}) => {
const {
colorValue,
label
} = settings;
const toggleProps = {
onClick: onToggle,
className: dist_clsx('block-editor-panel-color-gradient-settings__dropdown', {
'is-open': isOpen
}),
'aria-expanded': isOpen
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
...toggleProps,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_LabeledColorIndicator, {
colorValue: colorValue,
label: label
})
});
};
// Renders a collection of color controls as dropdowns. Depending upon the
// context in which these dropdowns are being rendered, they may be wrapped
// in an `ItemGroup` with each dropdown's toggle as an `Item`, or alternatively,
// the may be individually wrapped in a `ToolsPanelItem` with the toggle as
// a regular `Button`.
//
// For more context see: https://github.com/WordPress/gutenberg/pull/40084
function ColorGradientSettingsDropdown({
colors,
disableCustomColors,
disableCustomGradients,
enableAlpha,
gradients,
settings,
__experimentalIsRenderedInSidebar,
...props
}) {
let popoverProps;
if (__experimentalIsRenderedInSidebar) {
popoverProps = {
placement: 'left-start',
offset: 36,
shift: true
};
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: settings.map((setting, index) => {
var _setting$gradientValu;
const controlProps = {
clearable: false,
colorValue: setting.colorValue,
colors,
disableCustomColors,
disableCustomGradients,
enableAlpha,
gradientValue: setting.gradientValue,
gradients,
label: setting.label,
onColorChange: setting.onColorChange,
onGradientChange: setting.onGradientChange,
showTitle: false,
__experimentalIsRenderedInSidebar,
...setting
};
const toggleSettings = {
colorValue: (_setting$gradientValu = setting.gradientValue) !== null && _setting$gradientValu !== void 0 ? _setting$gradientValu : setting.colorValue,
label: setting.label
};
return setting &&
/*#__PURE__*/
// If not in an `ItemGroup` wrap the dropdown in a
// `ToolsPanelItem`
(0,external_ReactJSXRuntime_namespaceObject.jsx)(WithToolsPanelItem, {
setting: setting,
...props,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Dropdown, {
popoverProps: popoverProps,
className: "block-editor-tools-panel-color-gradient-settings__dropdown",
renderToggle: renderToggle(toggleSettings),
renderContent: () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalDropdownContentWrapper, {
paddingSize: "none",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-panel-color-gradient-settings__dropdown-content",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(control, {
...controlProps
})
})
})
})
}, index);
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/colors-gradients/panel-color-gradient-settings.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const panel_color_gradient_settings_colorsAndGradientKeys = ['colors', 'disableCustomColors', 'gradients', 'disableCustomGradients'];
const PanelColorGradientSettingsInner = ({
className,
colors,
gradients,
disableCustomColors,
disableCustomGradients,
children,
settings,
title,
showTitle = true,
__experimentalIsRenderedInSidebar,
enableAlpha
}) => {
const panelId = (0,external_wp_compose_namespaceObject.useInstanceId)(PanelColorGradientSettingsInner);
const {
batch
} = (0,external_wp_data_namespaceObject.useRegistry)();
if ((!colors || colors.length === 0) && (!gradients || gradients.length === 0) && disableCustomColors && disableCustomGradients && settings?.every(setting => (!setting.colors || setting.colors.length === 0) && (!setting.gradients || setting.gradients.length === 0) && (setting.disableCustomColors === undefined || setting.disableCustomColors) && (setting.disableCustomGradients === undefined || setting.disableCustomGradients))) {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalToolsPanel, {
className: dist_clsx('block-editor-panel-color-gradient-settings', className),
label: showTitle ? title : undefined,
resetAll: () => {
batch(() => {
settings.forEach(({
colorValue,
gradientValue,
onColorChange,
onGradientChange
}) => {
if (colorValue) {
onColorChange();
} else if (gradientValue) {
onGradientChange();
}
});
});
},
panelId: panelId,
__experimentalFirstVisibleItemClass: "first",
__experimentalLastVisibleItemClass: "last",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorGradientSettingsDropdown, {
settings: settings,
panelId: panelId,
colors,
gradients,
disableCustomColors,
disableCustomGradients,
__experimentalIsRenderedInSidebar,
enableAlpha
}), !!children && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalSpacer, {
marginY: 4
}), " ", children]
})]
});
};
const PanelColorGradientSettingsSelect = props => {
const colorGradientSettings = useMultipleOriginColorsAndGradients();
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PanelColorGradientSettingsInner, {
...colorGradientSettings,
...props
});
};
const PanelColorGradientSettings = props => {
if (panel_color_gradient_settings_colorsAndGradientKeys.every(key => props.hasOwnProperty(key))) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PanelColorGradientSettingsInner, {
...props
});
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PanelColorGradientSettingsSelect, {
...props
});
};
/* harmony default export */ const panel_color_gradient_settings = (PanelColorGradientSettings);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/aspect-ratio.js
/**
* WordPress dependencies
*/
const aspectRatio = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M18.5 5.5h-13c-1.1 0-2 .9-2 2v9c0 1.1.9 2 2 2h13c1.1 0 2-.9 2-2v-9c0-1.1-.9-2-2-2zm.5 11c0 .3-.2.5-.5.5h-13c-.3 0-.5-.2-.5-.5v-9c0-.3.2-.5.5-.5h13c.3 0 .5.2.5.5v9zM6.5 12H8v-2h2V8.5H6.5V12zm9.5 2h-2v1.5h3.5V12H16v2z"
})
});
/* harmony default export */ const aspect_ratio = (aspectRatio);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/image-editor/constants.js
const MIN_ZOOM = 100;
const MAX_ZOOM = 300;
const constants_POPOVER_PROPS = {
placement: 'bottom-start'
};
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/image-editor/use-save-image.js
/**
* WordPress dependencies
*/
// Disable Reason: Needs to be refactored.
// eslint-disable-next-line no-restricted-imports
function useSaveImage({
crop,
rotation,
url,
id,
onSaveImage,
onFinishEditing
}) {
const {
createErrorNotice
} = (0,external_wp_data_namespaceObject.useDispatch)(external_wp_notices_namespaceObject.store);
const [isInProgress, setIsInProgress] = (0,external_wp_element_namespaceObject.useState)(false);
const cancel = (0,external_wp_element_namespaceObject.useCallback)(() => {
setIsInProgress(false);
onFinishEditing();
}, [onFinishEditing]);
const apply = (0,external_wp_element_namespaceObject.useCallback)(() => {
setIsInProgress(true);
const modifiers = [];
if (rotation > 0) {
modifiers.push({
type: 'rotate',
args: {
angle: rotation
}
});
}
// The crop script may return some very small, sub-pixel values when the image was not cropped.
// Crop only when the new size has changed by more than 0.1%.
if (crop.width < 99.9 || crop.height < 99.9) {
modifiers.push({
type: 'crop',
args: {
left: crop.x,
top: crop.y,
width: crop.width,
height: crop.height
}
});
}
if (modifiers.length === 0) {
// No changes to apply.
setIsInProgress(false);
onFinishEditing();
return;
}
external_wp_apiFetch_default()({
path: `/wp/v2/media/${id}/edit`,
method: 'POST',
data: {
src: url,
modifiers
}
}).then(response => {
onSaveImage({
id: response.id,
url: response.source_url
});
}).catch(error => {
createErrorNotice((0,external_wp_i18n_namespaceObject.sprintf)( /* translators: 1. Error message */
(0,external_wp_i18n_namespaceObject.__)('Could not edit image. %s'), (0,external_wp_dom_namespaceObject.__unstableStripHTML)(error.message)), {
id: 'image-editing-error',
type: 'snackbar'
});
}).finally(() => {
setIsInProgress(false);
onFinishEditing();
});
}, [crop, rotation, id, url, onSaveImage, createErrorNotice, onFinishEditing]);
return (0,external_wp_element_namespaceObject.useMemo)(() => ({
isInProgress,
apply,
cancel
}), [isInProgress, apply, cancel]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/image-editor/use-transform-image.js
/* wp:polyfill */
/**
* WordPress dependencies
*/
function useTransformImage({
url,
naturalWidth,
naturalHeight
}) {
const [editedUrl, setEditedUrl] = (0,external_wp_element_namespaceObject.useState)();
const [crop, setCrop] = (0,external_wp_element_namespaceObject.useState)();
const [position, setPosition] = (0,external_wp_element_namespaceObject.useState)({
x: 0,
y: 0
});
const [zoom, setZoom] = (0,external_wp_element_namespaceObject.useState)(100);
const [rotation, setRotation] = (0,external_wp_element_namespaceObject.useState)(0);
const defaultAspect = naturalWidth / naturalHeight;
const [aspect, setAspect] = (0,external_wp_element_namespaceObject.useState)(defaultAspect);
const rotateClockwise = (0,external_wp_element_namespaceObject.useCallback)(() => {
const angle = (rotation + 90) % 360;
let naturalAspectRatio = defaultAspect;
if (rotation % 180 === 90) {
naturalAspectRatio = 1 / defaultAspect;
}
if (angle === 0) {
setEditedUrl();
setRotation(angle);
setAspect(defaultAspect);
setPosition(prevPosition => ({
x: -(prevPosition.y * naturalAspectRatio),
y: prevPosition.x * naturalAspectRatio
}));
return;
}
function editImage(event) {
const canvas = document.createElement('canvas');
let translateX = 0;
let translateY = 0;
if (angle % 180) {
canvas.width = event.target.height;
canvas.height = event.target.width;
} else {
canvas.width = event.target.width;
canvas.height = event.target.height;
}
if (angle === 90 || angle === 180) {
translateX = canvas.width;
}
if (angle === 270 || angle === 180) {
translateY = canvas.height;
}
const context = canvas.getContext('2d');
context.translate(translateX, translateY);
context.rotate(angle * Math.PI / 180);
context.drawImage(event.target, 0, 0);
canvas.toBlob(blob => {
setEditedUrl(URL.createObjectURL(blob));
setRotation(angle);
setAspect(canvas.width / canvas.height);
setPosition(prevPosition => ({
x: -(prevPosition.y * naturalAspectRatio),
y: prevPosition.x * naturalAspectRatio
}));
});
}
const el = new window.Image();
el.src = url;
el.onload = editImage;
const imgCrossOrigin = (0,external_wp_hooks_namespaceObject.applyFilters)('media.crossOrigin', undefined, url);
if (typeof imgCrossOrigin === 'string') {
el.crossOrigin = imgCrossOrigin;
}
}, [rotation, defaultAspect, url]);
return (0,external_wp_element_namespaceObject.useMemo)(() => ({
editedUrl,
setEditedUrl,
crop,
setCrop,
position,
setPosition,
zoom,
setZoom,
rotation,
setRotation,
rotateClockwise,
aspect,
setAspect,
defaultAspect
}), [editedUrl, crop, position, zoom, rotation, rotateClockwise, aspect, defaultAspect]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/image-editor/context.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const ImageEditingContext = (0,external_wp_element_namespaceObject.createContext)({});
const useImageEditingContext = () => (0,external_wp_element_namespaceObject.useContext)(ImageEditingContext);
function ImageEditingProvider({
id,
url,
naturalWidth,
naturalHeight,
onFinishEditing,
onSaveImage,
children
}) {
const transformImage = useTransformImage({
url,
naturalWidth,
naturalHeight
});
const saveImage = useSaveImage({
id,
url,
onSaveImage,
onFinishEditing,
...transformImage
});
const providerValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({
...transformImage,
...saveImage
}), [transformImage, saveImage]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ImageEditingContext.Provider, {
value: providerValue,
children: children
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/image-editor/aspect-ratio-dropdown.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function AspectRatioGroup({
aspectRatios,
isDisabled,
label,
onClick,
value
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuGroup, {
label: label,
children: aspectRatios.map(({
name,
slug,
ratio
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
disabled: isDisabled,
onClick: () => {
onClick(ratio);
},
role: "menuitemradio",
isSelected: ratio === value,
icon: ratio === value ? library_check : undefined,
children: name
}, slug))
});
}
function ratioToNumber(str) {
// TODO: support two-value aspect ratio?
// https://css-tricks.com/almanac/properties/a/aspect-ratio/#aa-it-can-take-two-values
const [a, b, ...rest] = str.split('/').map(Number);
if (a <= 0 || b <= 0 || Number.isNaN(a) || Number.isNaN(b) || rest.length) {
return NaN;
}
return b ? a / b : a;
}
function presetRatioAsNumber({
ratio,
...rest
}) {
return {
ratio: ratioToNumber(ratio),
...rest
};
}
function AspectRatioDropdown({
toggleProps
}) {
const {
isInProgress,
aspect,
setAspect,
defaultAspect
} = useImageEditingContext();
const [defaultRatios, themeRatios, showDefaultRatios] = use_settings_useSettings('dimensions.aspectRatios.default', 'dimensions.aspectRatios.theme', 'dimensions.defaultAspectRatios');
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.DropdownMenu, {
icon: aspect_ratio,
label: (0,external_wp_i18n_namespaceObject.__)('Aspect Ratio'),
popoverProps: constants_POPOVER_PROPS,
toggleProps: toggleProps,
children: ({
onClose
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AspectRatioGroup, {
isDisabled: isInProgress,
onClick: newAspect => {
setAspect(newAspect);
onClose();
},
value: aspect,
aspectRatios: [
// All ratios should be mirrored in AspectRatioTool in @wordpress/block-editor.
{
slug: 'original',
name: (0,external_wp_i18n_namespaceObject.__)('Original'),
aspect: defaultAspect
}, ...(showDefaultRatios ? defaultRatios.map(presetRatioAsNumber).filter(({
ratio
}) => ratio === 1) : [])]
}), themeRatios?.length > 0 && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AspectRatioGroup, {
label: (0,external_wp_i18n_namespaceObject.__)('Theme'),
isDisabled: isInProgress,
onClick: newAspect => {
setAspect(newAspect);
onClose();
},
value: aspect,
aspectRatios: themeRatios
}), showDefaultRatios && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AspectRatioGroup, {
label: (0,external_wp_i18n_namespaceObject.__)('Landscape'),
isDisabled: isInProgress,
onClick: newAspect => {
setAspect(newAspect);
onClose();
},
value: aspect,
aspectRatios: defaultRatios.map(presetRatioAsNumber).filter(({
ratio
}) => ratio > 1)
}), showDefaultRatios && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AspectRatioGroup, {
label: (0,external_wp_i18n_namespaceObject.__)('Portrait'),
isDisabled: isInProgress,
onClick: newAspect => {
setAspect(newAspect);
onClose();
},
value: aspect,
aspectRatios: defaultRatios.map(presetRatioAsNumber).filter(({
ratio
}) => ratio < 1)
})]
})
});
}
;// CONCATENATED MODULE: ./node_modules/tslib/tslib.es6.mjs
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
}
return __assign.apply(this, arguments);
}
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __param(paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
}
function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
var _, done = false;
for (var i = decorators.length - 1; i >= 0; i--) {
var context = {};
for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
for (var p in contextIn.access) context.access[p] = contextIn.access[p];
context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
if (kind === "accessor") {
if (result === void 0) continue;
if (result === null || typeof result !== "object") throw new TypeError("Object expected");
if (_ = accept(result.get)) descriptor.get = _;
if (_ = accept(result.set)) descriptor.set = _;
if (_ = accept(result.init)) initializers.unshift(_);
}
else if (_ = accept(result)) {
if (kind === "field") initializers.unshift(_);
else descriptor[key] = _;
}
}
if (target) Object.defineProperty(target, contextIn.name, descriptor);
done = true;
};
function __runInitializers(thisArg, initializers, value) {
var useValue = arguments.length > 2;
for (var i = 0; i < initializers.length; i++) {
value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
}
return useValue ? value : void 0;
};
function __propKey(x) {
return typeof x === "symbol" ? x : "".concat(x);
};
function __setFunctionName(f, name, prefix) {
if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
};
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
}
var __createBinding = Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
});
function __exportStar(m, o) {
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);
}
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
}
/** @deprecated */
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
/** @deprecated */
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
}
function __spreadArray(to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
}
function __await(v) {
return this instanceof __await ? (this.v = v, this) : new __await(v);
}
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
var g = generator.apply(thisArg, _arguments || []), i, q = [];
return i = Object.create((typeof AsyncIterator === "function" ? AsyncIterator : Object).prototype), verb("next"), verb("throw"), verb("return", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;
function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }
function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } }
function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
function reject(value) { resume("throw", value); }
function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
}
function __asyncDelegator(o) {
var i, p;
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }
}
function __asyncValues(o) {
if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __setModuleDefault = Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
};
function __importStar(mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
}
function __importDefault(mod) {
return (mod && mod.__esModule) ? mod : { default: mod };
}
function __classPrivateFieldGet(receiver, state, kind, f) {
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
}
function __classPrivateFieldSet(receiver, state, value, kind, f) {
if (kind === "m") throw new TypeError("Private method is not writable");
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
}
function __classPrivateFieldIn(state, receiver) {
if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function")) throw new TypeError("Cannot use 'in' operator on non-object");
return typeof state === "function" ? receiver === state : state.has(receiver);
}
function __addDisposableResource(env, value, async) {
if (value !== null && value !== void 0) {
if (typeof value !== "object" && typeof value !== "function") throw new TypeError("Object expected.");
var dispose, inner;
if (async) {
if (!Symbol.asyncDispose) throw new TypeError("Symbol.asyncDispose is not defined.");
dispose = value[Symbol.asyncDispose];
}
if (dispose === void 0) {
if (!Symbol.dispose) throw new TypeError("Symbol.dispose is not defined.");
dispose = value[Symbol.dispose];
if (async) inner = dispose;
}
if (typeof dispose !== "function") throw new TypeError("Object not disposable.");
if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };
env.stack.push({ value: value, dispose: dispose, async: async });
}
else if (async) {
env.stack.push({ async: true });
}
return value;
}
var _SuppressedError = typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
function __disposeResources(env) {
function fail(e) {
env.error = env.hasError ? new _SuppressedError(e, env.error, "An error was suppressed during disposal.") : e;
env.hasError = true;
}
var r, s = 0;
function next() {
while (r = env.stack.pop()) {
try {
if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);
if (r.dispose) {
var result = r.dispose.call(r.value);
if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });
}
else s |= 1;
}
catch (e) {
fail(e);
}
}
if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();
if (env.hasError) throw env.error;
}
return next();
}
/* harmony default export */ const tslib_es6 = ({
__extends,
__assign,
__rest,
__decorate,
__param,
__metadata,
__awaiter,
__generator,
__createBinding,
__exportStar,
__values,
__read,
__spread,
__spreadArrays,
__spreadArray,
__await,
__asyncGenerator,
__asyncDelegator,
__asyncValues,
__makeTemplateObject,
__importStar,
__importDefault,
__classPrivateFieldGet,
__classPrivateFieldSet,
__classPrivateFieldIn,
__addDisposableResource,
__disposeResources,
});
// EXTERNAL MODULE: ./node_modules/normalize-wheel/index.js
var normalize_wheel = __webpack_require__(7520);
var normalize_wheel_default = /*#__PURE__*/__webpack_require__.n(normalize_wheel);
;// CONCATENATED MODULE: ./node_modules/react-easy-crop/index.module.js
/**
* Compute the dimension of the crop area based on media size,
* aspect ratio and optionally rotation
*/
function getCropSize(mediaWidth, mediaHeight, containerWidth, containerHeight, aspect, rotation) {
if (rotation === void 0) {
rotation = 0;
}
var _a = rotateSize(mediaWidth, mediaHeight, rotation),
width = _a.width,
height = _a.height;
var fittingWidth = Math.min(width, containerWidth);
var fittingHeight = Math.min(height, containerHeight);
if (fittingWidth > fittingHeight * aspect) {
return {
width: fittingHeight * aspect,
height: fittingHeight
};
}
return {
width: fittingWidth,
height: fittingWidth / aspect
};
}
/**
* Compute media zoom.
* We fit the media into the container with "max-width: 100%; max-height: 100%;"
*/
function getMediaZoom(mediaSize) {
// Take the axis with more pixels to improve accuracy
return mediaSize.width > mediaSize.height ? mediaSize.width / mediaSize.naturalWidth : mediaSize.height / mediaSize.naturalHeight;
}
/**
* Ensure a new media position stays in the crop area.
*/
function restrictPosition(position, mediaSize, cropSize, zoom, rotation) {
if (rotation === void 0) {
rotation = 0;
}
var _a = rotateSize(mediaSize.width, mediaSize.height, rotation),
width = _a.width,
height = _a.height;
return {
x: restrictPositionCoord(position.x, width, cropSize.width, zoom),
y: restrictPositionCoord(position.y, height, cropSize.height, zoom)
};
}
function restrictPositionCoord(position, mediaSize, cropSize, zoom) {
var maxPosition = mediaSize * zoom / 2 - cropSize / 2;
return clamp(position, -maxPosition, maxPosition);
}
function getDistanceBetweenPoints(pointA, pointB) {
return Math.sqrt(Math.pow(pointA.y - pointB.y, 2) + Math.pow(pointA.x - pointB.x, 2));
}
function getRotationBetweenPoints(pointA, pointB) {
return Math.atan2(pointB.y - pointA.y, pointB.x - pointA.x) * 180 / Math.PI;
}
/**
* Compute the output cropped area of the media in percentages and pixels.
* x/y are the top-left coordinates on the src media
*/
function computeCroppedArea(crop, mediaSize, cropSize, aspect, zoom, rotation, restrictPosition) {
if (rotation === void 0) {
rotation = 0;
}
if (restrictPosition === void 0) {
restrictPosition = true;
}
// if the media is rotated by the user, we cannot limit the position anymore
// as it might need to be negative.
var limitAreaFn = restrictPosition ? limitArea : noOp;
var mediaBBoxSize = rotateSize(mediaSize.width, mediaSize.height, rotation);
var mediaNaturalBBoxSize = rotateSize(mediaSize.naturalWidth, mediaSize.naturalHeight, rotation);
// calculate the crop area in percentages
// in the rotated space
var croppedAreaPercentages = {
x: limitAreaFn(100, ((mediaBBoxSize.width - cropSize.width / zoom) / 2 - crop.x / zoom) / mediaBBoxSize.width * 100),
y: limitAreaFn(100, ((mediaBBoxSize.height - cropSize.height / zoom) / 2 - crop.y / zoom) / mediaBBoxSize.height * 100),
width: limitAreaFn(100, cropSize.width / mediaBBoxSize.width * 100 / zoom),
height: limitAreaFn(100, cropSize.height / mediaBBoxSize.height * 100 / zoom)
};
// we compute the pixels size naively
var widthInPixels = Math.round(limitAreaFn(mediaNaturalBBoxSize.width, croppedAreaPercentages.width * mediaNaturalBBoxSize.width / 100));
var heightInPixels = Math.round(limitAreaFn(mediaNaturalBBoxSize.height, croppedAreaPercentages.height * mediaNaturalBBoxSize.height / 100));
var isImgWiderThanHigh = mediaNaturalBBoxSize.width >= mediaNaturalBBoxSize.height * aspect;
// then we ensure the width and height exactly match the aspect (to avoid rounding approximations)
// if the media is wider than high, when zoom is 0, the crop height will be equals to image height
// thus we want to compute the width from the height and aspect for accuracy.
// Otherwise, we compute the height from width and aspect.
var sizePixels = isImgWiderThanHigh ? {
width: Math.round(heightInPixels * aspect),
height: heightInPixels
} : {
width: widthInPixels,
height: Math.round(widthInPixels / aspect)
};
var croppedAreaPixels = __assign(__assign({}, sizePixels), {
x: Math.round(limitAreaFn(mediaNaturalBBoxSize.width - sizePixels.width, croppedAreaPercentages.x * mediaNaturalBBoxSize.width / 100)),
y: Math.round(limitAreaFn(mediaNaturalBBoxSize.height - sizePixels.height, croppedAreaPercentages.y * mediaNaturalBBoxSize.height / 100))
});
return {
croppedAreaPercentages: croppedAreaPercentages,
croppedAreaPixels: croppedAreaPixels
};
}
/**
* Ensure the returned value is between 0 and max
*/
function limitArea(max, value) {
return Math.min(max, Math.max(0, value));
}
function noOp(_max, value) {
return value;
}
/**
* Compute crop and zoom from the croppedAreaPercentages.
*/
function getInitialCropFromCroppedAreaPercentages(croppedAreaPercentages, mediaSize, rotation, cropSize, minZoom, maxZoom) {
var mediaBBoxSize = rotateSize(mediaSize.width, mediaSize.height, rotation);
// This is the inverse process of computeCroppedArea
var zoom = clamp(cropSize.width / mediaBBoxSize.width * (100 / croppedAreaPercentages.width), minZoom, maxZoom);
var crop = {
x: zoom * mediaBBoxSize.width / 2 - cropSize.width / 2 - mediaBBoxSize.width * zoom * (croppedAreaPercentages.x / 100),
y: zoom * mediaBBoxSize.height / 2 - cropSize.height / 2 - mediaBBoxSize.height * zoom * (croppedAreaPercentages.y / 100)
};
return {
crop: crop,
zoom: zoom
};
}
/**
* Compute zoom from the croppedAreaPixels
*/
function getZoomFromCroppedAreaPixels(croppedAreaPixels, mediaSize, cropSize) {
var mediaZoom = getMediaZoom(mediaSize);
return cropSize.height > cropSize.width ? cropSize.height / (croppedAreaPixels.height * mediaZoom) : cropSize.width / (croppedAreaPixels.width * mediaZoom);
}
/**
* Compute crop and zoom from the croppedAreaPixels
*/
function getInitialCropFromCroppedAreaPixels(croppedAreaPixels, mediaSize, rotation, cropSize, minZoom, maxZoom) {
if (rotation === void 0) {
rotation = 0;
}
var mediaNaturalBBoxSize = rotateSize(mediaSize.naturalWidth, mediaSize.naturalHeight, rotation);
var zoom = clamp(getZoomFromCroppedAreaPixels(croppedAreaPixels, mediaSize, cropSize), minZoom, maxZoom);
var cropZoom = cropSize.height > cropSize.width ? cropSize.height / croppedAreaPixels.height : cropSize.width / croppedAreaPixels.width;
var crop = {
x: ((mediaNaturalBBoxSize.width - croppedAreaPixels.width) / 2 - croppedAreaPixels.x) * cropZoom,
y: ((mediaNaturalBBoxSize.height - croppedAreaPixels.height) / 2 - croppedAreaPixels.y) * cropZoom
};
return {
crop: crop,
zoom: zoom
};
}
/**
* Return the point that is the center of point a and b
*/
function getCenter(a, b) {
return {
x: (b.x + a.x) / 2,
y: (b.y + a.y) / 2
};
}
function getRadianAngle(degreeValue) {
return degreeValue * Math.PI / 180;
}
/**
* Returns the new bounding area of a rotated rectangle.
*/
function rotateSize(width, height, rotation) {
var rotRad = getRadianAngle(rotation);
return {
width: Math.abs(Math.cos(rotRad) * width) + Math.abs(Math.sin(rotRad) * height),
height: Math.abs(Math.sin(rotRad) * width) + Math.abs(Math.cos(rotRad) * height)
};
}
/**
* Clamp value between min and max
*/
function clamp(value, min, max) {
return Math.min(Math.max(value, min), max);
}
/**
* Combine multiple class names into a single string.
*/
function classNames() {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return args.filter(function (value) {
if (typeof value === 'string' && value.length > 0) {
return true;
}
return false;
}).join(' ').trim();
}
var css_248z = ".reactEasyCrop_Container {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n overflow: hidden;\n user-select: none;\n touch-action: none;\n cursor: move;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.reactEasyCrop_Image,\n.reactEasyCrop_Video {\n will-change: transform; /* this improves performances and prevent painting issues on iOS Chrome */\n}\n\n.reactEasyCrop_Contain {\n max-width: 100%;\n max-height: 100%;\n margin: auto;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n}\n.reactEasyCrop_Cover_Horizontal {\n width: 100%;\n height: auto;\n}\n.reactEasyCrop_Cover_Vertical {\n width: auto;\n height: 100%;\n}\n\n.reactEasyCrop_CropArea {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n border: 1px solid rgba(255, 255, 255, 0.5);\n box-sizing: border-box;\n box-shadow: 0 0 0 9999em;\n color: rgba(0, 0, 0, 0.5);\n overflow: hidden;\n}\n\n.reactEasyCrop_CropAreaRound {\n border-radius: 50%;\n}\n\n.reactEasyCrop_CropAreaGrid::before {\n content: ' ';\n box-sizing: border-box;\n position: absolute;\n border: 1px solid rgba(255, 255, 255, 0.5);\n top: 0;\n bottom: 0;\n left: 33.33%;\n right: 33.33%;\n border-top: 0;\n border-bottom: 0;\n}\n\n.reactEasyCrop_CropAreaGrid::after {\n content: ' ';\n box-sizing: border-box;\n position: absolute;\n border: 1px solid rgba(255, 255, 255, 0.5);\n top: 33.33%;\n bottom: 33.33%;\n left: 0;\n right: 0;\n border-left: 0;\n border-right: 0;\n}\n";
var index_module_MIN_ZOOM = 1;
var index_module_MAX_ZOOM = 3;
var Cropper = /** @class */function (_super) {
__extends(Cropper, _super);
function Cropper() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.imageRef = external_React_.createRef();
_this.videoRef = external_React_.createRef();
_this.containerPosition = {
x: 0,
y: 0
};
_this.containerRef = null;
_this.styleRef = null;
_this.containerRect = null;
_this.mediaSize = {
width: 0,
height: 0,
naturalWidth: 0,
naturalHeight: 0
};
_this.dragStartPosition = {
x: 0,
y: 0
};
_this.dragStartCrop = {
x: 0,
y: 0
};
_this.gestureZoomStart = 0;
_this.gestureRotationStart = 0;
_this.isTouching = false;
_this.lastPinchDistance = 0;
_this.lastPinchRotation = 0;
_this.rafDragTimeout = null;
_this.rafPinchTimeout = null;
_this.wheelTimer = null;
_this.currentDoc = typeof document !== 'undefined' ? document : null;
_this.currentWindow = typeof window !== 'undefined' ? window : null;
_this.resizeObserver = null;
_this.state = {
cropSize: null,
hasWheelJustStarted: false,
mediaObjectFit: undefined
};
_this.initResizeObserver = function () {
if (typeof window.ResizeObserver === 'undefined' || !_this.containerRef) {
return;
}
var isFirstResize = true;
_this.resizeObserver = new window.ResizeObserver(function (entries) {
if (isFirstResize) {
isFirstResize = false; // observe() is called on mount, we don't want to trigger a recompute on mount
return;
}
_this.computeSizes();
});
_this.resizeObserver.observe(_this.containerRef);
};
// this is to prevent Safari on iOS >= 10 to zoom the page
_this.preventZoomSafari = function (e) {
return e.preventDefault();
};
_this.cleanEvents = function () {
if (!_this.currentDoc) return;
_this.currentDoc.removeEventListener('mousemove', _this.onMouseMove);
_this.currentDoc.removeEventListener('mouseup', _this.onDragStopped);
_this.currentDoc.removeEventListener('touchmove', _this.onTouchMove);
_this.currentDoc.removeEventListener('touchend', _this.onDragStopped);
_this.currentDoc.removeEventListener('gesturemove', _this.onGestureMove);
_this.currentDoc.removeEventListener('gestureend', _this.onGestureEnd);
_this.currentDoc.removeEventListener('scroll', _this.onScroll);
};
_this.clearScrollEvent = function () {
if (_this.containerRef) _this.containerRef.removeEventListener('wheel', _this.onWheel);
if (_this.wheelTimer) {
clearTimeout(_this.wheelTimer);
}
};
_this.onMediaLoad = function () {
var cropSize = _this.computeSizes();
if (cropSize) {
_this.emitCropData();
_this.setInitialCrop(cropSize);
}
if (_this.props.onMediaLoaded) {
_this.props.onMediaLoaded(_this.mediaSize);
}
};
_this.setInitialCrop = function (cropSize) {
if (_this.props.initialCroppedAreaPercentages) {
var _a = getInitialCropFromCroppedAreaPercentages(_this.props.initialCroppedAreaPercentages, _this.mediaSize, _this.props.rotation, cropSize, _this.props.minZoom, _this.props.maxZoom),
crop = _a.crop,
zoom = _a.zoom;
_this.props.onCropChange(crop);
_this.props.onZoomChange && _this.props.onZoomChange(zoom);
} else if (_this.props.initialCroppedAreaPixels) {
var _b = getInitialCropFromCroppedAreaPixels(_this.props.initialCroppedAreaPixels, _this.mediaSize, _this.props.rotation, cropSize, _this.props.minZoom, _this.props.maxZoom),
crop = _b.crop,
zoom = _b.zoom;
_this.props.onCropChange(crop);
_this.props.onZoomChange && _this.props.onZoomChange(zoom);
}
};
_this.computeSizes = function () {
var _a, _b, _c, _d, _e, _f;
var mediaRef = _this.imageRef.current || _this.videoRef.current;
if (mediaRef && _this.containerRef) {
_this.containerRect = _this.containerRef.getBoundingClientRect();
_this.saveContainerPosition();
var containerAspect = _this.containerRect.width / _this.containerRect.height;
var naturalWidth = ((_a = _this.imageRef.current) === null || _a === void 0 ? void 0 : _a.naturalWidth) || ((_b = _this.videoRef.current) === null || _b === void 0 ? void 0 : _b.videoWidth) || 0;
var naturalHeight = ((_c = _this.imageRef.current) === null || _c === void 0 ? void 0 : _c.naturalHeight) || ((_d = _this.videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) || 0;
var isMediaScaledDown = mediaRef.offsetWidth < naturalWidth || mediaRef.offsetHeight < naturalHeight;
var mediaAspect = naturalWidth / naturalHeight;
// We do not rely on the offsetWidth/offsetHeight if the media is scaled down
// as the values they report are rounded. That will result in precision losses
// when calculating zoom. We use the fact that the media is positionned relative
// to the container. That allows us to use the container's dimensions
// and natural aspect ratio of the media to calculate accurate media size.
// However, for this to work, the container should not be rotated
var renderedMediaSize = void 0;
if (isMediaScaledDown) {
switch (_this.state.mediaObjectFit) {
default:
case 'contain':
renderedMediaSize = containerAspect > mediaAspect ? {
width: _this.containerRect.height * mediaAspect,
height: _this.containerRect.height
} : {
width: _this.containerRect.width,
height: _this.containerRect.width / mediaAspect
};
break;
case 'horizontal-cover':
renderedMediaSize = {
width: _this.containerRect.width,
height: _this.containerRect.width / mediaAspect
};
break;
case 'vertical-cover':
renderedMediaSize = {
width: _this.containerRect.height * mediaAspect,
height: _this.containerRect.height
};
break;
}
} else {
renderedMediaSize = {
width: mediaRef.offsetWidth,
height: mediaRef.offsetHeight
};
}
_this.mediaSize = __assign(__assign({}, renderedMediaSize), {
naturalWidth: naturalWidth,
naturalHeight: naturalHeight
});
// set media size in the parent
if (_this.props.setMediaSize) {
_this.props.setMediaSize(_this.mediaSize);
}
var cropSize = _this.props.cropSize ? _this.props.cropSize : getCropSize(_this.mediaSize.width, _this.mediaSize.height, _this.containerRect.width, _this.containerRect.height, _this.props.aspect, _this.props.rotation);
if (((_e = _this.state.cropSize) === null || _e === void 0 ? void 0 : _e.height) !== cropSize.height || ((_f = _this.state.cropSize) === null || _f === void 0 ? void 0 : _f.width) !== cropSize.width) {
_this.props.onCropSizeChange && _this.props.onCropSizeChange(cropSize);
}
_this.setState({
cropSize: cropSize
}, _this.recomputeCropPosition);
// pass crop size to parent
if (_this.props.setCropSize) {
_this.props.setCropSize(cropSize);
}
return cropSize;
}
};
_this.saveContainerPosition = function () {
if (_this.containerRef) {
var bounds = _this.containerRef.getBoundingClientRect();
_this.containerPosition = {
x: bounds.left,
y: bounds.top
};
}
};
_this.onMouseDown = function (e) {
if (!_this.currentDoc) return;
e.preventDefault();
_this.currentDoc.addEventListener('mousemove', _this.onMouseMove);
_this.currentDoc.addEventListener('mouseup', _this.onDragStopped);
_this.saveContainerPosition();
_this.onDragStart(Cropper.getMousePoint(e));
};
_this.onMouseMove = function (e) {
return _this.onDrag(Cropper.getMousePoint(e));
};
_this.onScroll = function (e) {
if (!_this.currentDoc) return;
e.preventDefault();
_this.saveContainerPosition();
};
_this.onTouchStart = function (e) {
if (!_this.currentDoc) return;
_this.isTouching = true;
if (_this.props.onTouchRequest && !_this.props.onTouchRequest(e)) {
return;
}
_this.currentDoc.addEventListener('touchmove', _this.onTouchMove, {
passive: false
}); // iOS 11 now defaults to passive: true
_this.currentDoc.addEventListener('touchend', _this.onDragStopped);
_this.saveContainerPosition();
if (e.touches.length === 2) {
_this.onPinchStart(e);
} else if (e.touches.length === 1) {
_this.onDragStart(Cropper.getTouchPoint(e.touches[0]));
}
};
_this.onTouchMove = function (e) {
// Prevent whole page from scrolling on iOS.
e.preventDefault();
if (e.touches.length === 2) {
_this.onPinchMove(e);
} else if (e.touches.length === 1) {
_this.onDrag(Cropper.getTouchPoint(e.touches[0]));
}
};
_this.onGestureStart = function (e) {
if (!_this.currentDoc) return;
e.preventDefault();
_this.currentDoc.addEventListener('gesturechange', _this.onGestureMove);
_this.currentDoc.addEventListener('gestureend', _this.onGestureEnd);
_this.gestureZoomStart = _this.props.zoom;
_this.gestureRotationStart = _this.props.rotation;
};
_this.onGestureMove = function (e) {
e.preventDefault();
if (_this.isTouching) {
// this is to avoid conflict between gesture and touch events
return;
}
var point = Cropper.getMousePoint(e);
var newZoom = _this.gestureZoomStart - 1 + e.scale;
_this.setNewZoom(newZoom, point, {
shouldUpdatePosition: true
});
if (_this.props.onRotationChange) {
var newRotation = _this.gestureRotationStart + e.rotation;
_this.props.onRotationChange(newRotation);
}
};
_this.onGestureEnd = function (e) {
_this.cleanEvents();
};
_this.onDragStart = function (_a) {
var _b, _c;
var x = _a.x,
y = _a.y;
_this.dragStartPosition = {
x: x,
y: y
};
_this.dragStartCrop = __assign({}, _this.props.crop);
(_c = (_b = _this.props).onInteractionStart) === null || _c === void 0 ? void 0 : _c.call(_b);
};
_this.onDrag = function (_a) {
var x = _a.x,
y = _a.y;
if (!_this.currentWindow) return;
if (_this.rafDragTimeout) _this.currentWindow.cancelAnimationFrame(_this.rafDragTimeout);
_this.rafDragTimeout = _this.currentWindow.requestAnimationFrame(function () {
if (!_this.state.cropSize) return;
if (x === undefined || y === undefined) return;
var offsetX = x - _this.dragStartPosition.x;
var offsetY = y - _this.dragStartPosition.y;
var requestedPosition = {
x: _this.dragStartCrop.x + offsetX,
y: _this.dragStartCrop.y + offsetY
};
var newPosition = _this.props.restrictPosition ? restrictPosition(requestedPosition, _this.mediaSize, _this.state.cropSize, _this.props.zoom, _this.props.rotation) : requestedPosition;
_this.props.onCropChange(newPosition);
});
};
_this.onDragStopped = function () {
var _a, _b;
_this.isTouching = false;
_this.cleanEvents();
_this.emitCropData();
(_b = (_a = _this.props).onInteractionEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
};
_this.onWheel = function (e) {
if (!_this.currentWindow) return;
if (_this.props.onWheelRequest && !_this.props.onWheelRequest(e)) {
return;
}
e.preventDefault();
var point = Cropper.getMousePoint(e);
var pixelY = normalize_wheel_default()(e).pixelY;
var newZoom = _this.props.zoom - pixelY * _this.props.zoomSpeed / 200;
_this.setNewZoom(newZoom, point, {
shouldUpdatePosition: true
});
if (!_this.state.hasWheelJustStarted) {
_this.setState({
hasWheelJustStarted: true
}, function () {
var _a, _b;
return (_b = (_a = _this.props).onInteractionStart) === null || _b === void 0 ? void 0 : _b.call(_a);
});
}
if (_this.wheelTimer) {
clearTimeout(_this.wheelTimer);
}
_this.wheelTimer = _this.currentWindow.setTimeout(function () {
return _this.setState({
hasWheelJustStarted: false
}, function () {
var _a, _b;
return (_b = (_a = _this.props).onInteractionEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
});
}, 250);
};
_this.getPointOnContainer = function (_a, containerTopLeft) {
var x = _a.x,
y = _a.y;
if (!_this.containerRect) {
throw new Error('The Cropper is not mounted');
}
return {
x: _this.containerRect.width / 2 - (x - containerTopLeft.x),
y: _this.containerRect.height / 2 - (y - containerTopLeft.y)
};
};
_this.getPointOnMedia = function (_a) {
var x = _a.x,
y = _a.y;
var _b = _this.props,
crop = _b.crop,
zoom = _b.zoom;
return {
x: (x + crop.x) / zoom,
y: (y + crop.y) / zoom
};
};
_this.setNewZoom = function (zoom, point, _a) {
var _b = _a === void 0 ? {} : _a,
_c = _b.shouldUpdatePosition,
shouldUpdatePosition = _c === void 0 ? true : _c;
if (!_this.state.cropSize || !_this.props.onZoomChange) return;
var newZoom = clamp(zoom, _this.props.minZoom, _this.props.maxZoom);
if (shouldUpdatePosition) {
var zoomPoint = _this.getPointOnContainer(point, _this.containerPosition);
var zoomTarget = _this.getPointOnMedia(zoomPoint);
var requestedPosition = {
x: zoomTarget.x * newZoom - zoomPoint.x,
y: zoomTarget.y * newZoom - zoomPoint.y
};
var newPosition = _this.props.restrictPosition ? restrictPosition(requestedPosition, _this.mediaSize, _this.state.cropSize, newZoom, _this.props.rotation) : requestedPosition;
_this.props.onCropChange(newPosition);
}
_this.props.onZoomChange(newZoom);
};
_this.getCropData = function () {
if (!_this.state.cropSize) {
return null;
}
// this is to ensure the crop is correctly restricted after a zoom back (https://github.com/ValentinH/react-easy-crop/issues/6)
var restrictedPosition = _this.props.restrictPosition ? restrictPosition(_this.props.crop, _this.mediaSize, _this.state.cropSize, _this.props.zoom, _this.props.rotation) : _this.props.crop;
return computeCroppedArea(restrictedPosition, _this.mediaSize, _this.state.cropSize, _this.getAspect(), _this.props.zoom, _this.props.rotation, _this.props.restrictPosition);
};
_this.emitCropData = function () {
var cropData = _this.getCropData();
if (!cropData) return;
var croppedAreaPercentages = cropData.croppedAreaPercentages,
croppedAreaPixels = cropData.croppedAreaPixels;
if (_this.props.onCropComplete) {
_this.props.onCropComplete(croppedAreaPercentages, croppedAreaPixels);
}
if (_this.props.onCropAreaChange) {
_this.props.onCropAreaChange(croppedAreaPercentages, croppedAreaPixels);
}
};
_this.emitCropAreaChange = function () {
var cropData = _this.getCropData();
if (!cropData) return;
var croppedAreaPercentages = cropData.croppedAreaPercentages,
croppedAreaPixels = cropData.croppedAreaPixels;
if (_this.props.onCropAreaChange) {
_this.props.onCropAreaChange(croppedAreaPercentages, croppedAreaPixels);
}
};
_this.recomputeCropPosition = function () {
if (!_this.state.cropSize) return;
var newPosition = _this.props.restrictPosition ? restrictPosition(_this.props.crop, _this.mediaSize, _this.state.cropSize, _this.props.zoom, _this.props.rotation) : _this.props.crop;
_this.props.onCropChange(newPosition);
_this.emitCropData();
};
return _this;
}
Cropper.prototype.componentDidMount = function () {
if (!this.currentDoc || !this.currentWindow) return;
if (this.containerRef) {
if (this.containerRef.ownerDocument) {
this.currentDoc = this.containerRef.ownerDocument;
}
if (this.currentDoc.defaultView) {
this.currentWindow = this.currentDoc.defaultView;
}
this.initResizeObserver();
// only add window resize listener if ResizeObserver is not supported. Otherwise, it would be redundant
if (typeof window.ResizeObserver === 'undefined') {
this.currentWindow.addEventListener('resize', this.computeSizes);
}
this.props.zoomWithScroll && this.containerRef.addEventListener('wheel', this.onWheel, {
passive: false
});
this.containerRef.addEventListener('gesturestart', this.onGestureStart);
}
this.currentDoc.addEventListener('scroll', this.onScroll);
if (!this.props.disableAutomaticStylesInjection) {
this.styleRef = this.currentDoc.createElement('style');
this.styleRef.setAttribute('type', 'text/css');
if (this.props.nonce) {
this.styleRef.setAttribute('nonce', this.props.nonce);
}
this.styleRef.innerHTML = css_248z;
this.currentDoc.head.appendChild(this.styleRef);
}
// when rendered via SSR, the image can already be loaded and its onLoad callback will never be called
if (this.imageRef.current && this.imageRef.current.complete) {
this.onMediaLoad();
}
// set image and video refs in the parent if the callbacks exist
if (this.props.setImageRef) {
this.props.setImageRef(this.imageRef);
}
if (this.props.setVideoRef) {
this.props.setVideoRef(this.videoRef);
}
};
Cropper.prototype.componentWillUnmount = function () {
var _a, _b;
if (!this.currentDoc || !this.currentWindow) return;
if (typeof window.ResizeObserver === 'undefined') {
this.currentWindow.removeEventListener('resize', this.computeSizes);
}
(_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
if (this.containerRef) {
this.containerRef.removeEventListener('gesturestart', this.preventZoomSafari);
}
if (this.styleRef) {
(_b = this.styleRef.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(this.styleRef);
}
this.cleanEvents();
this.props.zoomWithScroll && this.clearScrollEvent();
};
Cropper.prototype.componentDidUpdate = function (prevProps) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
if (prevProps.rotation !== this.props.rotation) {
this.computeSizes();
this.recomputeCropPosition();
} else if (prevProps.aspect !== this.props.aspect) {
this.computeSizes();
} else if (prevProps.objectFit !== this.props.objectFit) {
this.computeSizes();
} else if (prevProps.zoom !== this.props.zoom) {
this.recomputeCropPosition();
} else if (((_a = prevProps.cropSize) === null || _a === void 0 ? void 0 : _a.height) !== ((_b = this.props.cropSize) === null || _b === void 0 ? void 0 : _b.height) || ((_c = prevProps.cropSize) === null || _c === void 0 ? void 0 : _c.width) !== ((_d = this.props.cropSize) === null || _d === void 0 ? void 0 : _d.width)) {
this.computeSizes();
} else if (((_e = prevProps.crop) === null || _e === void 0 ? void 0 : _e.x) !== ((_f = this.props.crop) === null || _f === void 0 ? void 0 : _f.x) || ((_g = prevProps.crop) === null || _g === void 0 ? void 0 : _g.y) !== ((_h = this.props.crop) === null || _h === void 0 ? void 0 : _h.y)) {
this.emitCropAreaChange();
}
if (prevProps.zoomWithScroll !== this.props.zoomWithScroll && this.containerRef) {
this.props.zoomWithScroll ? this.containerRef.addEventListener('wheel', this.onWheel, {
passive: false
}) : this.clearScrollEvent();
}
if (prevProps.video !== this.props.video) {
(_j = this.videoRef.current) === null || _j === void 0 ? void 0 : _j.load();
}
var objectFit = this.getObjectFit();
if (objectFit !== this.state.mediaObjectFit) {
this.setState({
mediaObjectFit: objectFit
}, this.computeSizes);
}
};
Cropper.prototype.getAspect = function () {
var _a = this.props,
cropSize = _a.cropSize,
aspect = _a.aspect;
if (cropSize) {
return cropSize.width / cropSize.height;
}
return aspect;
};
Cropper.prototype.getObjectFit = function () {
var _a, _b, _c, _d;
if (this.props.objectFit === 'cover') {
var mediaRef = this.imageRef.current || this.videoRef.current;
if (mediaRef && this.containerRef) {
this.containerRect = this.containerRef.getBoundingClientRect();
var containerAspect = this.containerRect.width / this.containerRect.height;
var naturalWidth = ((_a = this.imageRef.current) === null || _a === void 0 ? void 0 : _a.naturalWidth) || ((_b = this.videoRef.current) === null || _b === void 0 ? void 0 : _b.videoWidth) || 0;
var naturalHeight = ((_c = this.imageRef.current) === null || _c === void 0 ? void 0 : _c.naturalHeight) || ((_d = this.videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) || 0;
var mediaAspect = naturalWidth / naturalHeight;
return mediaAspect < containerAspect ? 'horizontal-cover' : 'vertical-cover';
}
return 'horizontal-cover';
}
return this.props.objectFit;
};
Cropper.prototype.onPinchStart = function (e) {
var pointA = Cropper.getTouchPoint(e.touches[0]);
var pointB = Cropper.getTouchPoint(e.touches[1]);
this.lastPinchDistance = getDistanceBetweenPoints(pointA, pointB);
this.lastPinchRotation = getRotationBetweenPoints(pointA, pointB);
this.onDragStart(getCenter(pointA, pointB));
};
Cropper.prototype.onPinchMove = function (e) {
var _this = this;
if (!this.currentDoc || !this.currentWindow) return;
var pointA = Cropper.getTouchPoint(e.touches[0]);
var pointB = Cropper.getTouchPoint(e.touches[1]);
var center = getCenter(pointA, pointB);
this.onDrag(center);
if (this.rafPinchTimeout) this.currentWindow.cancelAnimationFrame(this.rafPinchTimeout);
this.rafPinchTimeout = this.currentWindow.requestAnimationFrame(function () {
var distance = getDistanceBetweenPoints(pointA, pointB);
var newZoom = _this.props.zoom * (distance / _this.lastPinchDistance);
_this.setNewZoom(newZoom, center, {
shouldUpdatePosition: false
});
_this.lastPinchDistance = distance;
var rotation = getRotationBetweenPoints(pointA, pointB);
var newRotation = _this.props.rotation + (rotation - _this.lastPinchRotation);
_this.props.onRotationChange && _this.props.onRotationChange(newRotation);
_this.lastPinchRotation = rotation;
});
};
Cropper.prototype.render = function () {
var _this = this;
var _a = this.props,
image = _a.image,
video = _a.video,
mediaProps = _a.mediaProps,
transform = _a.transform,
_b = _a.crop,
x = _b.x,
y = _b.y,
rotation = _a.rotation,
zoom = _a.zoom,
cropShape = _a.cropShape,
showGrid = _a.showGrid,
_c = _a.style,
containerStyle = _c.containerStyle,
cropAreaStyle = _c.cropAreaStyle,
mediaStyle = _c.mediaStyle,
_d = _a.classes,
containerClassName = _d.containerClassName,
cropAreaClassName = _d.cropAreaClassName,
mediaClassName = _d.mediaClassName;
var objectFit = this.state.mediaObjectFit;
return external_React_.createElement("div", {
onMouseDown: this.onMouseDown,
onTouchStart: this.onTouchStart,
ref: function ref(el) {
return _this.containerRef = el;
},
"data-testid": "container",
style: containerStyle,
className: classNames('reactEasyCrop_Container', containerClassName)
}, image ? external_React_.createElement("img", __assign({
alt: "",
className: classNames('reactEasyCrop_Image', objectFit === 'contain' && 'reactEasyCrop_Contain', objectFit === 'horizontal-cover' && 'reactEasyCrop_Cover_Horizontal', objectFit === 'vertical-cover' && 'reactEasyCrop_Cover_Vertical', mediaClassName)
}, mediaProps, {
src: image,
ref: this.imageRef,
style: __assign(__assign({}, mediaStyle), {
transform: transform || "translate(".concat(x, "px, ").concat(y, "px) rotate(").concat(rotation, "deg) scale(").concat(zoom, ")")
}),
onLoad: this.onMediaLoad
})) : video && external_React_.createElement("video", __assign({
autoPlay: true,
loop: true,
muted: true,
className: classNames('reactEasyCrop_Video', objectFit === 'contain' && 'reactEasyCrop_Contain', objectFit === 'horizontal-cover' && 'reactEasyCrop_Cover_Horizontal', objectFit === 'vertical-cover' && 'reactEasyCrop_Cover_Vertical', mediaClassName)
}, mediaProps, {
ref: this.videoRef,
onLoadedMetadata: this.onMediaLoad,
style: __assign(__assign({}, mediaStyle), {
transform: transform || "translate(".concat(x, "px, ").concat(y, "px) rotate(").concat(rotation, "deg) scale(").concat(zoom, ")")
}),
controls: false
}), (Array.isArray(video) ? video : [{
src: video
}]).map(function (item) {
return external_React_.createElement("source", __assign({
key: item.src
}, item));
})), this.state.cropSize && external_React_.createElement("div", {
style: __assign(__assign({}, cropAreaStyle), {
width: this.state.cropSize.width,
height: this.state.cropSize.height
}),
"data-testid": "cropper",
className: classNames('reactEasyCrop_CropArea', cropShape === 'round' && 'reactEasyCrop_CropAreaRound', showGrid && 'reactEasyCrop_CropAreaGrid', cropAreaClassName)
}));
};
Cropper.defaultProps = {
zoom: 1,
rotation: 0,
aspect: 4 / 3,
maxZoom: index_module_MAX_ZOOM,
minZoom: index_module_MIN_ZOOM,
cropShape: 'rect',
objectFit: 'contain',
showGrid: true,
style: {},
classes: {},
mediaProps: {},
zoomSpeed: 1,
restrictPosition: true,
zoomWithScroll: true
};
Cropper.getMousePoint = function (e) {
return {
x: Number(e.clientX),
y: Number(e.clientY)
};
};
Cropper.getTouchPoint = function (touch) {
return {
x: Number(touch.clientX),
y: Number(touch.clientY)
};
};
return Cropper;
}(external_React_.Component);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/image-editor/cropper.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function ImageCropper({
url,
width,
height,
naturalHeight,
naturalWidth,
borderProps
}) {
const {
isInProgress,
editedUrl,
position,
zoom,
aspect,
setPosition,
setCrop,
setZoom,
rotation
} = useImageEditingContext();
const [contentResizeListener, {
width: clientWidth
}] = (0,external_wp_compose_namespaceObject.useResizeObserver)();
let editedHeight = height || clientWidth * naturalHeight / naturalWidth;
if (rotation % 180 === 90) {
editedHeight = clientWidth * naturalWidth / naturalHeight;
}
const area = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: dist_clsx('wp-block-image__crop-area', borderProps?.className, {
'is-applying': isInProgress
}),
style: {
...borderProps?.style,
width: width || clientWidth,
height: editedHeight
},
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Cropper, {
image: editedUrl || url,
disabled: isInProgress,
minZoom: MIN_ZOOM / 100,
maxZoom: MAX_ZOOM / 100,
crop: position,
zoom: zoom / 100,
aspect: aspect,
onCropChange: pos => {
setPosition(pos);
},
onCropComplete: newCropPercent => {
setCrop(newCropPercent);
},
onZoomChange: newZoom => {
setZoom(newZoom * 100);
}
}), isInProgress && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Spinner, {})]
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [contentResizeListener, area]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/search.js
/**
* WordPress dependencies
*/
const search = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M13 5c-3.3 0-6 2.7-6 6 0 1.4.5 2.7 1.3 3.7l-3.8 3.8 1.1 1.1 3.8-3.8c1 .8 2.3 1.3 3.7 1.3 3.3 0 6-2.7 6-6S16.3 5 13 5zm0 10.5c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5 4.5 2 4.5 4.5-2 4.5-4.5 4.5z"
})
});
/* harmony default export */ const library_search = (search);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/image-editor/zoom-dropdown.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function ZoomDropdown() {
const {
isInProgress,
zoom,
setZoom
} = useImageEditingContext();
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Dropdown, {
contentClassName: "wp-block-image__zoom",
popoverProps: constants_POPOVER_PROPS,
renderToggle: ({
isOpen,
onToggle
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarButton, {
icon: library_search,
label: (0,external_wp_i18n_namespaceObject.__)('Zoom'),
onClick: onToggle,
"aria-expanded": isOpen,
disabled: isInProgress
}),
renderContent: () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalDropdownContentWrapper, {
paddingSize: "medium",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.RangeControl, {
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
label: (0,external_wp_i18n_namespaceObject.__)('Zoom'),
min: MIN_ZOOM,
max: MAX_ZOOM,
value: Math.round(zoom),
onChange: setZoom
})
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/rotate-right.js
/**
* WordPress dependencies
*/
const rotateRight = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M15.1 4.8l-3-2.5V4c-4.4 0-8 3.6-8 8 0 3.7 2.5 6.9 6 7.7.3.1.6.1 1 .2l.2-1.5c-.4 0-.7-.1-1.1-.2l-.1.2v-.2c-2.6-.8-4.5-3.3-4.5-6.2 0-3.6 2.9-6.5 6.5-6.5v1.8l3-2.5zM20 11c-.2-1.4-.7-2.7-1.6-3.8l-1.2.8c.7.9 1.1 2 1.3 3.1L20 11zm-1.5 1.8c-.1.5-.2 1.1-.4 1.6s-.5 1-.8 1.5l1.2.9c.4-.5.8-1.1 1-1.8s.5-1.3.5-2l-1.5-.2zm-5.6 5.6l.2 1.5c1.4-.2 2.7-.7 3.8-1.6l-.9-1.1c-.9.7-2 1.1-3.1 1.2z"
})
});
/* harmony default export */ const rotate_right = (rotateRight);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/image-editor/rotation-button.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function RotationButton() {
const {
isInProgress,
rotateClockwise
} = useImageEditingContext();
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarButton, {
icon: rotate_right,
label: (0,external_wp_i18n_namespaceObject.__)('Rotate'),
onClick: rotateClockwise,
disabled: isInProgress
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/image-editor/form-controls.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function FormControls() {
const {
isInProgress,
apply,
cancel
} = useImageEditingContext();
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarButton, {
onClick: apply,
disabled: isInProgress,
children: (0,external_wp_i18n_namespaceObject.__)('Apply')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarButton, {
onClick: cancel,
children: (0,external_wp_i18n_namespaceObject.__)('Cancel')
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/image-editor/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function ImageEditor({
id,
url,
width,
height,
naturalHeight,
naturalWidth,
onSaveImage,
onFinishEditing,
borderProps
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(ImageEditingProvider, {
id: id,
url: url,
naturalWidth: naturalWidth,
naturalHeight: naturalHeight,
onSaveImage: onSaveImage,
onFinishEditing: onFinishEditing,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ImageCropper, {
borderProps: borderProps,
url: url,
width: width,
height: height,
naturalHeight: naturalHeight,
naturalWidth: naturalWidth
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(block_controls, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.ToolbarGroup, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ZoomDropdown, {}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarItem, {
children: toggleProps => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AspectRatioDropdown, {
toggleProps: toggleProps
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RotationButton, {})]
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarGroup, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FormControls, {})
})]
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/image-size-control/use-dimension-handler.js
/**
* WordPress dependencies
*/
function useDimensionHandler(customHeight, customWidth, defaultHeight, defaultWidth, onChange) {
var _ref, _ref2;
const [currentWidth, setCurrentWidth] = (0,external_wp_element_namespaceObject.useState)((_ref = customWidth !== null && customWidth !== void 0 ? customWidth : defaultWidth) !== null && _ref !== void 0 ? _ref : '');
const [currentHeight, setCurrentHeight] = (0,external_wp_element_namespaceObject.useState)((_ref2 = customHeight !== null && customHeight !== void 0 ? customHeight : defaultHeight) !== null && _ref2 !== void 0 ? _ref2 : '');
// When an image is first inserted, the default dimensions are initially
// undefined. This effect updates the dimensions when the default values
// come through.
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (customWidth === undefined && defaultWidth !== undefined) {
setCurrentWidth(defaultWidth);
}
if (customHeight === undefined && defaultHeight !== undefined) {
setCurrentHeight(defaultHeight);
}
}, [defaultWidth, defaultHeight]);
// If custom values change, it means an outsider has resized the image using some other method (eg resize box)
// this keeps track of these values too. We need to parse before comparing; custom values can be strings.
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (customWidth !== undefined && Number.parseInt(customWidth) !== Number.parseInt(currentWidth)) {
setCurrentWidth(customWidth);
}
if (customHeight !== undefined && Number.parseInt(customHeight) !== Number.parseInt(currentHeight)) {
setCurrentHeight(customHeight);
}
}, [customWidth, customHeight]);
const updateDimension = (dimension, value) => {
const parsedValue = value === '' ? undefined : parseInt(value, 10);
if (dimension === 'width') {
setCurrentWidth(parsedValue);
} else {
setCurrentHeight(parsedValue);
}
onChange({
[dimension]: parsedValue
});
};
const updateDimensions = (nextHeight, nextWidth) => {
setCurrentHeight(nextHeight !== null && nextHeight !== void 0 ? nextHeight : defaultHeight);
setCurrentWidth(nextWidth !== null && nextWidth !== void 0 ? nextWidth : defaultWidth);
onChange({
height: nextHeight,
width: nextWidth
});
};
return {
currentHeight,
currentWidth,
updateDimension,
updateDimensions
};
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/image-size-control/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const IMAGE_SIZE_PRESETS = [25, 50, 75, 100];
const image_size_control_noop = () => {};
function ImageSizeControl({
imageSizeHelp,
imageWidth,
imageHeight,
imageSizeOptions = [],
isResizable = true,
slug,
width,
height,
onChange,
onChangeImage = image_size_control_noop
}) {
const {
currentHeight,
currentWidth,
updateDimension,
updateDimensions
} = useDimensionHandler(height, width, imageHeight, imageWidth, onChange);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [imageSizeOptions && imageSizeOptions.length > 0 && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.SelectControl, {
__nextHasNoMarginBottom: true,
label: (0,external_wp_i18n_namespaceObject.__)('Resolution'),
value: slug,
options: imageSizeOptions,
onChange: onChangeImage,
help: imageSizeHelp,
size: "__unstable-large"
}), isResizable && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-image-size-control",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalHStack, {
align: "baseline",
spacing: "3",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalNumberControl, {
className: "block-editor-image-size-control__width",
label: (0,external_wp_i18n_namespaceObject.__)('Width'),
value: currentWidth,
min: 1,
onChange: value => updateDimension('width', value),
size: "__unstable-large"
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalNumberControl, {
className: "block-editor-image-size-control__height",
label: (0,external_wp_i18n_namespaceObject.__)('Height'),
value: currentHeight,
min: 1,
onChange: value => updateDimension('height', value),
size: "__unstable-large"
})]
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalHStack, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ButtonGroup, {
"aria-label": (0,external_wp_i18n_namespaceObject.__)('Image size presets'),
children: IMAGE_SIZE_PRESETS.map(scale => {
const scaledWidth = Math.round(imageWidth * (scale / 100));
const scaledHeight = Math.round(imageHeight * (scale / 100));
const isCurrent = currentWidth === scaledWidth && currentHeight === scaledHeight;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.Button, {
size: "small",
variant: isCurrent ? 'primary' : undefined,
isPressed: isCurrent,
onClick: () => updateDimensions(scaledHeight, scaledWidth),
children: [scale, "%"]
}, scale);
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
size: "small",
onClick: () => updateDimensions(),
children: (0,external_wp_i18n_namespaceObject.__)('Reset')
})]
})]
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/url-popover/link-viewer-url.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
function LinkViewerURL({
url,
urlLabel,
className
}) {
const linkClassName = dist_clsx(className, 'block-editor-url-popover__link-viewer-url');
if (!url) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
className: linkClassName
});
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ExternalLink, {
className: linkClassName,
href: url,
children: urlLabel || (0,external_wp_url_namespaceObject.filterURLForDisplay)((0,external_wp_url_namespaceObject.safeDecodeURI)(url))
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/url-popover/link-viewer.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function LinkViewer({
className,
linkClassName,
onEditLinkClick,
url,
urlLabel,
...props
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: dist_clsx('block-editor-url-popover__link-viewer', className),
...props,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LinkViewerURL, {
url: url,
urlLabel: urlLabel,
className: linkClassName
}), onEditLinkClick && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
icon: edit,
label: (0,external_wp_i18n_namespaceObject.__)('Edit'),
onClick: onEditLinkClick,
size: "compact"
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/url-popover/link-editor.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function LinkEditor({
autocompleteRef,
className,
onChangeInputValue,
value,
...props
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("form", {
className: dist_clsx('block-editor-url-popover__link-editor', className),
...props,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(url_input, {
value: value,
onChange: onChangeInputValue,
autocompleteRef: autocompleteRef
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
icon: keyboard_return,
label: (0,external_wp_i18n_namespaceObject.__)('Apply'),
type: "submit",
size: "compact"
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/url-popover/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const {
__experimentalPopoverLegacyPositionToPlacement
} = unlock(external_wp_components_namespaceObject.privateApis);
const DEFAULT_PLACEMENT = 'bottom';
const URLPopover = (0,external_wp_element_namespaceObject.forwardRef)(({
additionalControls,
children,
renderSettings,
// The DEFAULT_PLACEMENT value is assigned inside the function's body
placement,
focusOnMount = 'firstElement',
// Deprecated
position,
// Rest
...popoverProps
}, ref) => {
if (position !== undefined) {
external_wp_deprecated_default()('`position` prop in wp.blockEditor.URLPopover', {
since: '6.2',
alternative: '`placement` prop'
});
}
// Compute popover's placement:
// - give priority to `placement` prop, if defined
// - otherwise, compute it from the legacy `position` prop (if defined)
// - finally, fallback to the DEFAULT_PLACEMENT.
let computedPlacement;
if (placement !== undefined) {
computedPlacement = placement;
} else if (position !== undefined) {
computedPlacement = __experimentalPopoverLegacyPositionToPlacement(position);
}
computedPlacement = computedPlacement || DEFAULT_PLACEMENT;
const [isSettingsExpanded, setIsSettingsExpanded] = (0,external_wp_element_namespaceObject.useState)(false);
const showSettings = !!renderSettings && isSettingsExpanded;
const toggleSettingsVisibility = () => {
setIsSettingsExpanded(!isSettingsExpanded);
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.Popover, {
ref: ref,
role: "dialog",
"aria-modal": "true",
"aria-label": (0,external_wp_i18n_namespaceObject.__)('Edit URL'),
className: "block-editor-url-popover",
focusOnMount: focusOnMount,
placement: computedPlacement,
shift: true,
variant: "toolbar",
...popoverProps,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-url-popover__input-container",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-url-popover__row",
children: [children, !!renderSettings && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
className: "block-editor-url-popover__settings-toggle",
icon: chevron_down,
label: (0,external_wp_i18n_namespaceObject.__)('Link settings'),
onClick: toggleSettingsVisibility,
"aria-expanded": isSettingsExpanded,
size: "compact"
})]
})
}), showSettings && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-url-popover__settings",
children: renderSettings()
}), additionalControls && !showSettings && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-url-popover__additional-controls",
children: additionalControls
})]
});
});
URLPopover.LinkEditor = LinkEditor;
URLPopover.LinkViewer = LinkViewer;
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/url-popover/README.md
*/
/* harmony default export */ const url_popover = (URLPopover);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/media-placeholder/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const media_placeholder_noop = () => {};
const InsertFromURLPopover = ({
src,
onChange,
onSubmit,
onClose,
popoverAnchor
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(url_popover, {
anchor: popoverAnchor,
onClose: onClose,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("form", {
className: "block-editor-media-placeholder__url-input-form",
onSubmit: onSubmit,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalInputControl, {
__next40pxDefaultSize: true,
label: (0,external_wp_i18n_namespaceObject.__)('URL'),
hideLabelFromVision: true,
placeholder: (0,external_wp_i18n_namespaceObject.__)('Paste or type URL'),
onChange: onChange,
value: src,
suffix: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalInputControlSuffixWrapper, {
variant: "control",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
size: "small",
icon: keyboard_return,
label: (0,external_wp_i18n_namespaceObject.__)('Apply'),
type: "submit"
})
})
})
})
});
const URLSelectionUI = ({
src,
onChangeSrc,
onSelectURL
}) => {
// Use internal state instead of a ref to make sure that the component
// re-renders when the popover's anchor updates.
const [popoverAnchor, setPopoverAnchor] = (0,external_wp_element_namespaceObject.useState)(null);
const [isURLInputVisible, setIsURLInputVisible] = (0,external_wp_element_namespaceObject.useState)(false);
const openURLInput = () => {
setIsURLInputVisible(true);
};
const closeURLInput = () => {
setIsURLInputVisible(false);
popoverAnchor?.focus();
};
const onSubmitSrc = event => {
event.preventDefault();
if (src && onSelectURL) {
onSelectURL(src);
closeURLInput();
}
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-media-placeholder__url-input-container",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
className: "block-editor-media-placeholder__button",
onClick: openURLInput,
isPressed: isURLInputVisible,
variant: "secondary",
"aria-haspopup": "dialog",
ref: setPopoverAnchor,
children: (0,external_wp_i18n_namespaceObject.__)('Insert from URL')
}), isURLInputVisible && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InsertFromURLPopover, {
src: src,
onChange: onChangeSrc,
onSubmit: onSubmitSrc,
onClose: closeURLInput,
popoverAnchor: popoverAnchor
})]
});
};
function MediaPlaceholder({
value = {},
allowedTypes,
className,
icon,
labels = {},
mediaPreview,
notices,
isAppender,
accept,
addToGallery,
multiple = false,
handleUpload = true,
disableDropZone,
disableMediaButtons,
onError,
onSelect,
onCancel,
onSelectURL,
onToggleFeaturedImage,
onDoubleClick,
onFilesPreUpload = media_placeholder_noop,
onHTMLDrop: deprecatedOnHTMLDrop,
children,
mediaLibraryButton,
placeholder,
style
}) {
if (deprecatedOnHTMLDrop) {
external_wp_deprecated_default()('wp.blockEditor.MediaPlaceholder onHTMLDrop prop', {
since: '6.2',
version: '6.4'
});
}
const mediaUpload = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getSettings
} = select(store);
return getSettings().mediaUpload;
}, []);
const [src, setSrc] = (0,external_wp_element_namespaceObject.useState)('');
(0,external_wp_element_namespaceObject.useEffect)(() => {
var _value$src;
setSrc((_value$src = value?.src) !== null && _value$src !== void 0 ? _value$src : '');
}, [value?.src]);
const onlyAllowsImages = () => {
if (!allowedTypes || allowedTypes.length === 0) {
return false;
}
return allowedTypes.every(allowedType => allowedType === 'image' || allowedType.startsWith('image/'));
};
const onFilesUpload = files => {
if (!handleUpload || typeof handleUpload === 'function' && !handleUpload(files)) {
return onSelect(files);
}
onFilesPreUpload(files);
let setMedia;
if (multiple) {
if (addToGallery) {
// Since the setMedia function runs multiple times per upload group
// and is passed newMedia containing every item in its group each time, we must
// filter out whatever this upload group had previously returned to the
// gallery before adding and returning the image array with replacement newMedia
// values.
// Define an array to store urls from newMedia between subsequent function calls.
let lastMediaPassed = [];
setMedia = newMedia => {
// Remove any images this upload group is responsible for (lastMediaPassed).
// Their replacements are contained in newMedia.
const filteredMedia = (value !== null && value !== void 0 ? value : []).filter(item => {
// If Item has id, only remove it if lastMediaPassed has an item with that id.
if (item.id) {
return !lastMediaPassed.some(
// Be sure to convert to number for comparison.
({
id
}) => Number(id) === Number(item.id));
}
// Compare transient images via .includes since gallery may append extra info onto the url.
return !lastMediaPassed.some(({
urlSlug
}) => item.url.includes(urlSlug));
});
// Return the filtered media array along with newMedia.
onSelect(filteredMedia.concat(newMedia));
// Reset lastMediaPassed and set it with ids and urls from newMedia.
lastMediaPassed = newMedia.map(media => {
// Add everything up to '.fileType' to compare via .includes.
const cutOffIndex = media.url.lastIndexOf('.');
const urlSlug = media.url.slice(0, cutOffIndex);
return {
id: media.id,
urlSlug
};
});
};
} else {
setMedia = onSelect;
}
} else {
setMedia = ([media]) => onSelect(media);
}
mediaUpload({
allowedTypes,
filesList: files,
onFileChange: setMedia,
onError
});
};
async function handleBlocksDrop(blocks) {
if (!blocks || !Array.isArray(blocks)) {
return;
}
function recursivelyFindMediaFromBlocks(_blocks) {
return _blocks.flatMap(block => (block.name === 'core/image' || block.name === 'core/audio' || block.name === 'core/video') && block.attributes.url ? [block] : recursivelyFindMediaFromBlocks(block.innerBlocks));
}
const mediaBlocks = recursivelyFindMediaFromBlocks(blocks);
if (!mediaBlocks.length) {
return;
}
const uploadedMediaList = await Promise.all(mediaBlocks.map(block => block.attributes.id ? block.attributes : new Promise((resolve, reject) => {
window.fetch(block.attributes.url).then(response => response.blob()).then(blob => mediaUpload({
filesList: [blob],
additionalData: {
title: block.attributes.title,
alt_text: block.attributes.alt,
caption: block.attributes.caption
},
onFileChange: ([media]) => {
if (media.id) {
resolve(media);
}
},
allowedTypes,
onError: reject
})).catch(() => resolve(block.attributes.url));
}))).catch(err => onError(err));
if (multiple) {
onSelect(uploadedMediaList);
} else {
onSelect(uploadedMediaList[0]);
}
}
async function onHTMLDrop(HTML) {
const blocks = (0,external_wp_blocks_namespaceObject.pasteHandler)({
HTML
});
return await handleBlocksDrop(blocks);
}
const onUpload = event => {
onFilesUpload(event.target.files);
};
const defaultRenderPlaceholder = content => {
let {
instructions,
title
} = labels;
if (!mediaUpload && !onSelectURL) {
instructions = (0,external_wp_i18n_namespaceObject.__)('To edit this block, you need permission to upload media.');
}
if (instructions === undefined || title === undefined) {
const typesAllowed = allowedTypes !== null && allowedTypes !== void 0 ? allowedTypes : [];
const [firstAllowedType] = typesAllowed;
const isOneType = 1 === typesAllowed.length;
const isAudio = isOneType && 'audio' === firstAllowedType;
const isImage = isOneType && 'image' === firstAllowedType;
const isVideo = isOneType && 'video' === firstAllowedType;
if (instructions === undefined && mediaUpload) {
instructions = (0,external_wp_i18n_namespaceObject.__)('Upload a media file or pick one from your media library.');
if (isAudio) {
instructions = (0,external_wp_i18n_namespaceObject.__)('Upload or drag an audio file here, or pick one from your library.');
} else if (isImage) {
instructions = (0,external_wp_i18n_namespaceObject.__)('Upload or drag an image file here, or pick one from your library.');
} else if (isVideo) {
instructions = (0,external_wp_i18n_namespaceObject.__)('Upload or drag a video file here, or pick one from your library.');
}
}
if (title === undefined) {
title = (0,external_wp_i18n_namespaceObject.__)('Media');
if (isAudio) {
title = (0,external_wp_i18n_namespaceObject.__)('Audio');
} else if (isImage) {
title = (0,external_wp_i18n_namespaceObject.__)('Image');
} else if (isVideo) {
title = (0,external_wp_i18n_namespaceObject.__)('Video');
}
}
}
const placeholderClassName = dist_clsx('block-editor-media-placeholder', className, {
'is-appender': isAppender
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.Placeholder, {
icon: icon,
label: title,
instructions: instructions,
className: placeholderClassName,
notices: notices,
onDoubleClick: onDoubleClick,
preview: mediaPreview,
style: style,
children: [content, children]
});
};
const renderPlaceholder = placeholder !== null && placeholder !== void 0 ? placeholder : defaultRenderPlaceholder;
const renderDropZone = () => {
if (disableDropZone) {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.DropZone, {
onFilesDrop: onFilesUpload,
onHTMLDrop: onHTMLDrop
});
};
const renderCancelLink = () => {
return onCancel && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
className: "block-editor-media-placeholder__cancel-button",
title: (0,external_wp_i18n_namespaceObject.__)('Cancel'),
variant: "link",
onClick: onCancel,
children: (0,external_wp_i18n_namespaceObject.__)('Cancel')
});
};
const renderUrlSelectionUI = () => {
return onSelectURL && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(URLSelectionUI, {
src: src,
onChangeSrc: setSrc,
onSelectURL: onSelectURL
});
};
const renderFeaturedImageToggle = () => {
return onToggleFeaturedImage && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-media-placeholder__url-input-container",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
className: "block-editor-media-placeholder__button",
onClick: onToggleFeaturedImage,
variant: "secondary",
children: (0,external_wp_i18n_namespaceObject.__)('Use featured image')
})
});
};
const renderMediaUploadChecked = () => {
const defaultButton = ({
open
}) => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
variant: "secondary",
onClick: () => {
open();
},
children: (0,external_wp_i18n_namespaceObject.__)('Media Library')
});
};
const libraryButton = mediaLibraryButton !== null && mediaLibraryButton !== void 0 ? mediaLibraryButton : defaultButton;
const uploadMediaLibraryButton = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(media_upload, {
addToGallery: addToGallery,
gallery: multiple && onlyAllowsImages(),
multiple: multiple,
onSelect: onSelect,
allowedTypes: allowedTypes,
mode: "browse",
value: Array.isArray(value) ? value.map(({
id
}) => id) : value.id,
render: libraryButton
});
if (mediaUpload && isAppender) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [renderDropZone(), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FormFileUpload, {
onChange: onUpload,
accept: accept,
multiple: !!multiple,
render: ({
openFileDialog
}) => {
const content = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
variant: "primary",
className: dist_clsx('block-editor-media-placeholder__button', 'block-editor-media-placeholder__upload-button'),
onClick: openFileDialog,
children: (0,external_wp_i18n_namespaceObject.__)('Upload')
}), uploadMediaLibraryButton, renderUrlSelectionUI(), renderFeaturedImageToggle(), renderCancelLink()]
});
return renderPlaceholder(content);
}
})]
});
}
if (mediaUpload) {
const content = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [renderDropZone(), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FormFileUpload, {
render: ({
openFileDialog
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
onClick: openFileDialog,
variant: "primary",
className: dist_clsx('block-editor-media-placeholder__button', 'block-editor-media-placeholder__upload-button'),
children: (0,external_wp_i18n_namespaceObject.__)('Upload')
}),
onChange: onUpload,
accept: accept,
multiple: !!multiple
}), uploadMediaLibraryButton, renderUrlSelectionUI(), renderFeaturedImageToggle(), renderCancelLink()]
});
return renderPlaceholder(content);
}
return renderPlaceholder(uploadMediaLibraryButton);
};
if (disableMediaButtons) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(check, {
children: renderDropZone()
});
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(check, {
fallback: renderPlaceholder(renderUrlSelectionUI()),
children: renderMediaUploadChecked()
});
}
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/media-placeholder/README.md
*/
/* harmony default export */ const media_placeholder = ((0,external_wp_components_namespaceObject.withFilters)('editor.MediaPlaceholder')(MediaPlaceholder));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/panel-color-settings/index.js
/**
* Internal dependencies
*/
const PanelColorSettings = ({
colorSettings,
...props
}) => {
const settings = colorSettings.map(setting => {
if (!setting) {
return setting;
}
const {
value,
onChange,
...otherSettings
} = setting;
return {
...otherSettings,
colorValue: value,
onColorChange: onChange
};
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(panel_color_gradient_settings, {
settings: settings,
gradients: [],
disableCustomGradients: true,
...props
});
};
/* harmony default export */ const panel_color_settings = (PanelColorSettings);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/rich-text/format-toolbar/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const format_toolbar_POPOVER_PROPS = {
placement: 'bottom-start'
};
const FormatToolbar = () => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [['bold', 'italic', 'link', 'unknown'].map(format => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Slot, {
name: `RichText.ToolbarControls.${format}`
}, format)), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Slot, {
name: "RichText.ToolbarControls",
children: fills => {
if (!fills.length) {
return null;
}
const allProps = fills.map(([{
props
}]) => props);
const hasActive = allProps.some(({
isActive
}) => isActive);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarItem, {
children: toggleProps => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.DropdownMenu, {
icon: chevron_down
/* translators: button label text should, if possible, be under 16 characters. */,
label: (0,external_wp_i18n_namespaceObject.__)('More'),
toggleProps: {
...toggleProps,
className: dist_clsx(toggleProps.className, {
'is-pressed': hasActive
}),
description: (0,external_wp_i18n_namespaceObject.__)('Displays more block tools')
},
controls: orderBy(fills.map(([{
props
}]) => props), 'title'),
popoverProps: format_toolbar_POPOVER_PROPS
})
});
}
})]
});
};
/* harmony default export */ const format_toolbar = (FormatToolbar);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/rich-text/format-toolbar-container.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function InlineToolbar({
popoverAnchor
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Popover, {
placement: "top",
focusOnMount: false,
anchor: popoverAnchor,
className: "block-editor-rich-text__inline-format-toolbar",
__unstableSlotName: "block-toolbar",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NavigableToolbar, {
className: "block-editor-rich-text__inline-format-toolbar-group"
/* translators: accessibility text for the inline format toolbar */,
"aria-label": (0,external_wp_i18n_namespaceObject.__)('Format tools'),
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarGroup, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(format_toolbar, {})
})
})
});
}
const FormatToolbarContainer = ({
inline,
editableContentElement
}) => {
if (inline) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InlineToolbar, {
popoverAnchor: editableContentElement
});
}
// Render regular toolbar.
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_controls, {
group: "inline",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(format_toolbar, {})
});
};
/* harmony default export */ const format_toolbar_container = (FormatToolbarContainer);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/rich-text/use-mark-persistent.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function useMarkPersistent({
html,
value
}) {
const previousTextRef = (0,external_wp_element_namespaceObject.useRef)();
const hasActiveFormats = !!value.activeFormats?.length;
const {
__unstableMarkLastChangeAsPersistent
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
// Must be set synchronously to make sure it applies to the last change.
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
// Ignore mount.
if (!previousTextRef.current) {
previousTextRef.current = value.text;
return;
}
// Text input, so don't create an undo level for every character.
// Create an undo level after 1 second of no input.
if (previousTextRef.current !== value.text) {
const timeout = window.setTimeout(() => {
__unstableMarkLastChangeAsPersistent();
}, 1000);
previousTextRef.current = value.text;
return () => {
window.clearTimeout(timeout);
};
}
__unstableMarkLastChangeAsPersistent();
}, [html, hasActiveFormats]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/rich-text/use-format-types.js
/**
* WordPress dependencies
*/
function formatTypesSelector(select) {
return select(external_wp_richText_namespaceObject.store).getFormatTypes();
}
/**
* Set of all interactive content tags.
*
* @see https://html.spec.whatwg.org/multipage/dom.html#interactive-content
*/
const interactiveContentTags = new Set(['a', 'audio', 'button', 'details', 'embed', 'iframe', 'input', 'label', 'select', 'textarea', 'video']);
function prefixSelectKeys(selected, prefix) {
if (typeof selected !== 'object') {
return {
[prefix]: selected
};
}
return Object.fromEntries(Object.entries(selected).map(([key, value]) => [`${prefix}.${key}`, value]));
}
function getPrefixedSelectKeys(selected, prefix) {
if (selected[prefix]) {
return selected[prefix];
}
return Object.keys(selected).filter(key => key.startsWith(prefix + '.')).reduce((accumulator, key) => {
accumulator[key.slice(prefix.length + 1)] = selected[key];
return accumulator;
}, {});
}
/**
* This hook provides RichText with the `formatTypes` and its derived props from
* experimental format type settings.
*
* @param {Object} $0 Options
* @param {string} $0.clientId Block client ID.
* @param {string} $0.identifier Block attribute.
* @param {boolean} $0.withoutInteractiveFormatting Whether to clean the interactive formattings or not.
* @param {Array} $0.allowedFormats Allowed formats
*/
function useFormatTypes({
clientId,
identifier,
withoutInteractiveFormatting,
allowedFormats
}) {
const allFormatTypes = (0,external_wp_data_namespaceObject.useSelect)(formatTypesSelector, []);
const formatTypes = (0,external_wp_element_namespaceObject.useMemo)(() => {
return allFormatTypes.filter(({
name,
interactive,
tagName
}) => {
if (allowedFormats && !allowedFormats.includes(name)) {
return false;
}
if (withoutInteractiveFormatting && (interactive || interactiveContentTags.has(tagName))) {
return false;
}
return true;
});
}, [allFormatTypes, allowedFormats, withoutInteractiveFormatting]);
const keyedSelected = (0,external_wp_data_namespaceObject.useSelect)(select => formatTypes.reduce((accumulator, type) => {
if (!type.__experimentalGetPropsForEditableTreePreparation) {
return accumulator;
}
return {
...accumulator,
...prefixSelectKeys(type.__experimentalGetPropsForEditableTreePreparation(select, {
richTextIdentifier: identifier,
blockClientId: clientId
}), type.name)
};
}, {}), [formatTypes, clientId, identifier]);
const dispatch = (0,external_wp_data_namespaceObject.useDispatch)();
const prepareHandlers = [];
const valueHandlers = [];
const changeHandlers = [];
const dependencies = [];
for (const key in keyedSelected) {
dependencies.push(keyedSelected[key]);
}
formatTypes.forEach(type => {
if (type.__experimentalCreatePrepareEditableTree) {
const handler = type.__experimentalCreatePrepareEditableTree(getPrefixedSelectKeys(keyedSelected, type.name), {
richTextIdentifier: identifier,
blockClientId: clientId
});
if (type.__experimentalCreateOnChangeEditableValue) {
valueHandlers.push(handler);
} else {
prepareHandlers.push(handler);
}
}
if (type.__experimentalCreateOnChangeEditableValue) {
let dispatchers = {};
if (type.__experimentalGetPropsForEditableTreeChangeHandler) {
dispatchers = type.__experimentalGetPropsForEditableTreeChangeHandler(dispatch, {
richTextIdentifier: identifier,
blockClientId: clientId
});
}
const selected = getPrefixedSelectKeys(keyedSelected, type.name);
changeHandlers.push(type.__experimentalCreateOnChangeEditableValue({
...(typeof selected === 'object' ? selected : {}),
...dispatchers
}, {
richTextIdentifier: identifier,
blockClientId: clientId
}));
}
});
return {
formatTypes,
prepareHandlers,
valueHandlers,
changeHandlers,
dependencies
};
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/rich-text/event-listeners/before-input-rules.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* When typing over a selection, the selection will we wrapped by a matching
* character pair. The second character is optional, it defaults to the first
* character.
*
* @type {string[]} Array of character pairs.
*/
const wrapSelectionSettings = ['`', '"', "'", '“”', '‘’'];
/* harmony default export */ const before_input_rules = (props => element => {
function onInput(event) {
const {
inputType,
data
} = event;
const {
value,
onChange,
registry
} = props.current;
// Only run the rules when inserting text.
if (inputType !== 'insertText') {
return;
}
if ((0,external_wp_richText_namespaceObject.isCollapsed)(value)) {
return;
}
const pair = (0,external_wp_hooks_namespaceObject.applyFilters)('blockEditor.wrapSelectionSettings', wrapSelectionSettings).find(([startChar, endChar]) => startChar === data || endChar === data);
if (!pair) {
return;
}
const [startChar, endChar = startChar] = pair;
const start = value.start;
const end = value.end + startChar.length;
let newValue = (0,external_wp_richText_namespaceObject.insert)(value, startChar, start, start);
newValue = (0,external_wp_richText_namespaceObject.insert)(newValue, endChar, end, end);
const {
__unstableMarkLastChangeAsPersistent,
__unstableMarkAutomaticChange
} = registry.dispatch(store);
__unstableMarkLastChangeAsPersistent();
onChange(newValue);
__unstableMarkAutomaticChange();
const init = {};
for (const key in event) {
init[key] = event[key];
}
init.data = endChar;
const {
ownerDocument
} = element;
const {
defaultView
} = ownerDocument;
const newEvent = new defaultView.InputEvent('input', init);
// Dispatch an `input` event with the new data. This will trigger the
// input rules.
// Postpone the `input` to the next event loop tick so that the dispatch
// doesn't happen synchronously in the middle of `beforeinput` dispatch.
// This is closer to how native `input` event would be timed, and also
// makes sure that the `input` event is dispatched only after the `onChange`
// call few lines above has fully updated the data store state and rerendered
// all affected components.
window.queueMicrotask(() => {
event.target.dispatchEvent(newEvent);
});
event.preventDefault();
}
element.addEventListener('beforeinput', onInput);
return () => {
element.removeEventListener('beforeinput', onInput);
};
});
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/rich-text/prevent-event-discovery.js
/**
* WordPress dependencies
*/
function preventEventDiscovery(value) {
const searchText = 'tales of gutenberg';
const addText = ' 🐡🐢🦀🐤🦋🐘🐧🐹🦁🦄🦍🐼🐿🎃🐴🐝🐆🦕🦔🌱🍇π🍌🐉💧🥨🌌🍂🍠🥦🥚🥝🎟🥥🥒🛵🥖🍒🍯🎾🎲🐺🐚🐮⌛️';
const {
start,
text
} = value;
if (start < searchText.length) {
return value;
}
const charactersBefore = text.slice(start - searchText.length, start);
if (charactersBefore.toLowerCase() !== searchText) {
return value;
}
return (0,external_wp_richText_namespaceObject.insert)(value, addText);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/rich-text/event-listeners/input-rules.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function findSelection(blocks) {
let i = blocks.length;
while (i--) {
const attributeKey = retrieveSelectedAttribute(blocks[i].attributes);
if (attributeKey) {
blocks[i].attributes[attributeKey] = blocks[i].attributes[attributeKey]
// To do: refactor this to use rich text's selection instead, so
// we no longer have to use on this hack inserting a special
// character.
.toString().replace(START_OF_SELECTED_AREA, '');
return [blocks[i].clientId, attributeKey, 0, 0];
}
const nestedSelection = findSelection(blocks[i].innerBlocks);
if (nestedSelection) {
return nestedSelection;
}
}
return [];
}
/* harmony default export */ const input_rules = (props => element => {
function inputRule() {
const {
getValue,
onReplace,
selectionChange,
registry
} = props.current;
if (!onReplace) {
return;
}
// We must use getValue() here because value may be update
// asynchronously.
const value = getValue();
const {
start,
text
} = value;
const characterBefore = text.slice(start - 1, start);
// The character right before the caret must be a plain space.
if (characterBefore !== ' ') {
return;
}
const trimmedTextBefore = text.slice(0, start).trim();
const prefixTransforms = (0,external_wp_blocks_namespaceObject.getBlockTransforms)('from').filter(({
type
}) => type === 'prefix');
const transformation = (0,external_wp_blocks_namespaceObject.findTransform)(prefixTransforms, ({
prefix
}) => {
return trimmedTextBefore === prefix;
});
if (!transformation) {
return;
}
const content = (0,external_wp_richText_namespaceObject.toHTMLString)({
value: (0,external_wp_richText_namespaceObject.insert)(value, START_OF_SELECTED_AREA, 0, start)
});
const block = transformation.transform(content);
selectionChange(...findSelection([block]));
onReplace([block]);
registry.dispatch(store).__unstableMarkAutomaticChange();
return true;
}
function onInput(event) {
const {
inputType,
type
} = event;
const {
getValue,
onChange,
__unstableAllowPrefixTransformations,
formatTypes,
registry
} = props.current;
// Only run input rules when inserting text.
if (inputType !== 'insertText' && type !== 'compositionend') {
return;
}
if (__unstableAllowPrefixTransformations && inputRule()) {
return;
}
const value = getValue();
const transformed = formatTypes.reduce((accumlator, {
__unstableInputRule
}) => {
if (__unstableInputRule) {
accumlator = __unstableInputRule(accumlator);
}
return accumlator;
}, preventEventDiscovery(value));
const {
__unstableMarkLastChangeAsPersistent,
__unstableMarkAutomaticChange
} = registry.dispatch(store);
if (transformed !== value) {
__unstableMarkLastChangeAsPersistent();
onChange({
...transformed,
activeFormats: value.activeFormats
});
__unstableMarkAutomaticChange();
}
}
element.addEventListener('input', onInput);
element.addEventListener('compositionend', onInput);
return () => {
element.removeEventListener('input', onInput);
element.removeEventListener('compositionend', onInput);
};
});
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/rich-text/event-listeners/insert-replacement-text.js
/**
* Internal dependencies
*/
/**
* When the browser is about to auto correct, add an undo level so the user can
* revert the change.
*
* @param {Object} props
*/
/* harmony default export */ const insert_replacement_text = (props => element => {
function onInput(event) {
if (event.inputType !== 'insertReplacementText') {
return;
}
const {
registry
} = props.current;
registry.dispatch(store).__unstableMarkLastChangeAsPersistent();
}
element.addEventListener('beforeinput', onInput);
return () => {
element.removeEventListener('beforeinput', onInput);
};
});
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/rich-text/event-listeners/remove-browser-shortcuts.js
/**
* WordPress dependencies
*/
/**
* Hook to prevent default behaviors for key combinations otherwise handled
* internally by RichText.
*/
/* harmony default export */ const remove_browser_shortcuts = (() => node => {
function onKeydown(event) {
if (external_wp_keycodes_namespaceObject.isKeyboardEvent.primary(event, 'z') || external_wp_keycodes_namespaceObject.isKeyboardEvent.primary(event, 'y') || external_wp_keycodes_namespaceObject.isKeyboardEvent.primaryShift(event, 'z')) {
event.preventDefault();
}
}
node.addEventListener('keydown', onKeydown);
return () => {
node.removeEventListener('keydown', onKeydown);
};
});
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/rich-text/event-listeners/shortcuts.js
/* harmony default export */ const shortcuts = (props => element => {
const {
keyboardShortcuts
} = props.current;
function onKeyDown(event) {
for (const keyboardShortcut of keyboardShortcuts.current) {
keyboardShortcut(event);
}
}
element.addEventListener('keydown', onKeyDown);
return () => {
element.removeEventListener('keydown', onKeyDown);
};
});
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/rich-text/event-listeners/input-events.js
/* harmony default export */ const input_events = (props => element => {
const {
inputEvents
} = props.current;
function onInput(event) {
for (const keyboardShortcut of inputEvents.current) {
keyboardShortcut(event);
}
}
element.addEventListener('input', onInput);
return () => {
element.removeEventListener('input', onInput);
};
});
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/rich-text/event-listeners/undo-automatic-change.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/* harmony default export */ const undo_automatic_change = (props => element => {
function onKeyDown(event) {
const {
keyCode
} = event;
if (event.defaultPrevented) {
return;
}
if (keyCode !== external_wp_keycodes_namespaceObject.BACKSPACE && keyCode !== external_wp_keycodes_namespaceObject.ESCAPE) {
return;
}
const {
registry
} = props.current;
const {
didAutomaticChange,
getSettings
} = registry.select(store);
const {
__experimentalUndo
} = getSettings();
if (!__experimentalUndo) {
return;
}
if (!didAutomaticChange()) {
return;
}
event.preventDefault();
__experimentalUndo();
}
element.addEventListener('keydown', onKeyDown);
return () => {
element.removeEventListener('keydown', onKeyDown);
};
});
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/rich-text/utils.js
/**
* WordPress dependencies
*/
function addActiveFormats(value, activeFormats) {
if (activeFormats?.length) {
let index = value.formats.length;
while (index--) {
value.formats[index] = [...activeFormats, ...(value.formats[index] || [])];
}
}
}
/**
* Get the multiline tag based on the multiline prop.
*
* @param {?(string|boolean)} multiline The multiline prop.
*
* @return {string | undefined} The multiline tag.
*/
function getMultilineTag(multiline) {
if (multiline !== true && multiline !== 'p' && multiline !== 'li') {
return;
}
return multiline === true ? 'p' : multiline;
}
function getAllowedFormats({
allowedFormats,
disableFormats
}) {
if (disableFormats) {
return getAllowedFormats.EMPTY_ARRAY;
}
return allowedFormats;
}
getAllowedFormats.EMPTY_ARRAY = [];
/**
* Creates a link from pasted URL.
* Creates a paragraph block containing a link to the URL, and calls `onReplace`.
*
* @param {string} url The URL that could not be embedded.
* @param {Function} onReplace Function to call with the created fallback block.
*/
function createLinkInParagraph(url, onReplace) {
const link = /*#__PURE__*/_jsx("a", {
href: url,
children: url
});
onReplace(createBlock('core/paragraph', {
content: renderToString(link)
}));
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/rich-text/event-listeners/paste-handler.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/** @typedef {import('@wordpress/rich-text').RichTextValue} RichTextValue */
/* harmony default export */ const paste_handler = (props => element => {
function _onPaste(event) {
const {
disableFormats,
onChange,
value,
formatTypes,
tagName,
onReplace,
__unstableEmbedURLOnPaste,
preserveWhiteSpace,
pastePlainText
} = props.current;
// The event listener is attached to the window, so we need to check if
// the target is the element or inside the element.
if (!element.contains(event.target)) {
return;
}
if (event.defaultPrevented) {
return;
}
const {
plainText,
html
} = getPasteEventData(event);
event.preventDefault();
// Allows us to ask for this information when we get a report.
window.console.log('Received HTML:\n\n', html);
window.console.log('Received plain text:\n\n', plainText);
if (disableFormats) {
onChange((0,external_wp_richText_namespaceObject.insert)(value, plainText));
return;
}
const isInternal = event.clipboardData.getData('rich-text') === 'true';
function pasteInline(content) {
const transformed = formatTypes.reduce((accumulator, {
__unstablePasteRule
}) => {
// Only allow one transform.
if (__unstablePasteRule && accumulator === value) {
accumulator = __unstablePasteRule(value, {
html,
plainText
});
}
return accumulator;
}, value);
if (transformed !== value) {
onChange(transformed);
} else {
const valueToInsert = (0,external_wp_richText_namespaceObject.create)({
html: content
});
addActiveFormats(valueToInsert, value.activeFormats);
onChange((0,external_wp_richText_namespaceObject.insert)(value, valueToInsert));
}
}
// If the data comes from a rich text instance, we can directly use it
// without filtering the data. The filters are only meant for externally
// pasted content and remove inline styles.
if (isInternal) {
pasteInline(html);
return;
}
if (pastePlainText) {
onChange((0,external_wp_richText_namespaceObject.insert)(value, (0,external_wp_richText_namespaceObject.create)({
text: plainText
})));
return;
}
let mode = 'INLINE';
const trimmedPlainText = plainText.trim();
if (__unstableEmbedURLOnPaste && (0,external_wp_richText_namespaceObject.isEmpty)(value) && (0,external_wp_url_namespaceObject.isURL)(trimmedPlainText) &&
// For the link pasting feature, allow only http(s) protocols.
/^https?:/.test(trimmedPlainText)) {
mode = 'BLOCKS';
}
const content = (0,external_wp_blocks_namespaceObject.pasteHandler)({
HTML: html,
plainText,
mode,
tagName,
preserveWhiteSpace
});
if (typeof content === 'string') {
pasteInline(content);
} else if (content.length > 0) {
if (onReplace && (0,external_wp_richText_namespaceObject.isEmpty)(value)) {
onReplace(content, content.length - 1, -1);
}
}
}
const {
defaultView
} = element.ownerDocument;
// Attach the listener to the window so parent elements have the chance to
// prevent the default behavior.
defaultView.addEventListener('paste', _onPaste);
return () => {
defaultView.removeEventListener('paste', _onPaste);
};
});
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/rich-text/event-listeners/delete.js
/**
* WordPress dependencies
*/
/* harmony default export */ const event_listeners_delete = (props => element => {
function onKeyDown(event) {
const {
keyCode
} = event;
if (event.defaultPrevented) {
return;
}
const {
value,
onMerge,
onRemove
} = props.current;
if (keyCode === external_wp_keycodes_namespaceObject.DELETE || keyCode === external_wp_keycodes_namespaceObject.BACKSPACE) {
const {
start,
end,
text
} = value;
const isReverse = keyCode === external_wp_keycodes_namespaceObject.BACKSPACE;
const hasActiveFormats = value.activeFormats && !!value.activeFormats.length;
// Only process delete if the key press occurs at an uncollapsed edge.
if (!(0,external_wp_richText_namespaceObject.isCollapsed)(value) || hasActiveFormats || isReverse && start !== 0 || !isReverse && end !== text.length) {
return;
}
if (onMerge) {
onMerge(!isReverse);
}
// Only handle remove on Backspace. This serves dual-purpose of being
// an intentional user interaction distinguishing between Backspace and
// Delete to remove the empty field, but also to avoid merge & remove
// causing destruction of two fields (merge, then removed merged).
else if (onRemove && (0,external_wp_richText_namespaceObject.isEmpty)(value) && isReverse) {
onRemove(!isReverse);
}
event.preventDefault();
}
}
element.addEventListener('keydown', onKeyDown);
return () => {
element.removeEventListener('keydown', onKeyDown);
};
});
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/rich-text/event-listeners/enter.js
/**
* WordPress dependencies
*/
/* harmony default export */ const enter = (props => element => {
function onKeyDownDeprecated(event) {
if (event.keyCode !== external_wp_keycodes_namespaceObject.ENTER) {
return;
}
const {
onReplace,
onSplit
} = props.current;
if (onReplace && onSplit) {
event.__deprecatedOnSplit = true;
}
}
function onKeyDown(event) {
if (event.defaultPrevented) {
return;
}
// The event listener is attached to the window, so we need to check if
// the target is the element.
if (event.target !== element) {
return;
}
if (event.keyCode !== external_wp_keycodes_namespaceObject.ENTER) {
return;
}
const {
value,
onChange,
disableLineBreaks,
onSplitAtEnd,
onSplitAtDoubleLineEnd,
registry
} = props.current;
event.preventDefault();
const {
text,
start,
end
} = value;
if (event.shiftKey) {
if (!disableLineBreaks) {
onChange((0,external_wp_richText_namespaceObject.insert)(value, '\n'));
}
} else if (onSplitAtEnd && start === end && end === text.length) {
onSplitAtEnd();
} else if (
// For some blocks it's desirable to split at the end of the
// block when there are two line breaks at the end of the
// block, so triple Enter exits the block.
onSplitAtDoubleLineEnd && start === end && end === text.length && text.slice(-2) === '\n\n') {
registry.batch(() => {
const _value = {
...value
};
_value.start = _value.end - 2;
onChange((0,external_wp_richText_namespaceObject.remove)(_value));
onSplitAtDoubleLineEnd();
});
} else if (!disableLineBreaks) {
onChange((0,external_wp_richText_namespaceObject.insert)(value, '\n'));
}
}
const {
defaultView
} = element.ownerDocument;
// Attach the listener to the window so parent elements have the chance to
// prevent the default behavior.
defaultView.addEventListener('keydown', onKeyDown);
element.addEventListener('keydown', onKeyDownDeprecated);
return () => {
defaultView.removeEventListener('keydown', onKeyDown);
element.removeEventListener('keydown', onKeyDownDeprecated);
};
});
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/rich-text/event-listeners/firefox-compat.js
/**
* Internal dependencies
*/
/* harmony default export */ const firefox_compat = (props => element => {
function onFocus() {
const {
registry
} = props.current;
if (!registry.select(store).isMultiSelecting()) {
return;
}
// This is a little hack to work around focus issues with nested
// editable elements in Firefox. For some reason the editable child
// element sometimes regains focus, while it should not be focusable
// and focus should remain on the editable parent element.
// To do: try to find the cause of the shifting focus.
const parentEditable = element.parentElement.closest('[contenteditable="true"]');
if (parentEditable) {
parentEditable.focus();
}
}
element.addEventListener('focus', onFocus);
return () => {
element.removeEventListener('focus', onFocus);
};
});
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/rich-text/event-listeners/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const allEventListeners = [before_input_rules, input_rules, insert_replacement_text, remove_browser_shortcuts, shortcuts, input_events, undo_automatic_change, paste_handler, event_listeners_delete, enter, firefox_compat];
function useEventListeners(props) {
const propsRef = (0,external_wp_element_namespaceObject.useRef)(props);
propsRef.current = props;
const refEffects = (0,external_wp_element_namespaceObject.useMemo)(() => allEventListeners.map(refEffect => refEffect(propsRef)), [propsRef]);
return (0,external_wp_compose_namespaceObject.useRefEffect)(element => {
if (!props.isSelected) {
return;
}
const cleanups = refEffects.map(effect => effect(element));
return () => {
cleanups.forEach(cleanup => cleanup());
};
}, [refEffects, props.isSelected]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/rich-text/format-edit.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const format_edit_DEFAULT_BLOCK_CONTEXT = {};
const usesContextKey = Symbol('usesContext');
function format_edit_Edit({
onChange,
onFocus,
value,
forwardedRef,
settings
}) {
const {
name,
edit: EditFunction,
[usesContextKey]: usesContext
} = settings;
const blockContext = (0,external_wp_element_namespaceObject.useContext)(block_context);
// Assign context values using the block type's declared context needs.
const context = (0,external_wp_element_namespaceObject.useMemo)(() => {
return usesContext ? Object.fromEntries(Object.entries(blockContext).filter(([key]) => usesContext.includes(key))) : format_edit_DEFAULT_BLOCK_CONTEXT;
}, [usesContext, blockContext]);
if (!EditFunction) {
return null;
}
const activeFormat = (0,external_wp_richText_namespaceObject.getActiveFormat)(value, name);
const isActive = activeFormat !== undefined;
const activeObject = (0,external_wp_richText_namespaceObject.getActiveObject)(value);
const isObjectActive = activeObject !== undefined && activeObject.type === name;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(EditFunction, {
isActive: isActive,
activeAttributes: isActive ? activeFormat.attributes || {} : {},
isObjectActive: isObjectActive,
activeObjectAttributes: isObjectActive ? activeObject.attributes || {} : {},
value: value,
onChange: onChange,
onFocus: onFocus,
contentRef: forwardedRef,
context: context
}, name);
}
function FormatEdit({
formatTypes,
...props
}) {
return formatTypes.map(settings => /*#__PURE__*/(0,external_React_.createElement)(format_edit_Edit, {
settings: settings,
...props,
key: settings.name
}));
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/rich-text/content.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Internal dependencies
*/
function valueToHTMLString(value, multiline) {
if (rich_text.isEmpty(value)) {
const multilineTag = getMultilineTag(multiline);
return multilineTag ? `<${multilineTag}></${multilineTag}>` : '';
}
if (Array.isArray(value)) {
external_wp_deprecated_default()('wp.blockEditor.RichText value prop as children type', {
since: '6.1',
version: '6.3',
alternative: 'value prop as string',
link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/'
});
return external_wp_blocks_namespaceObject.children.toHTML(value);
}
// To do: deprecate string type.
if (typeof value === 'string') {
return value;
}
// To do: create a toReactComponent method on RichTextData, which we
// might in the future also use for the editable tree. See
// https://github.com/WordPress/gutenberg/pull/41655.
return value.toHTMLString();
}
function Content({
value,
tagName: Tag,
multiline,
format,
...props
}) {
value = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_element_namespaceObject.RawHTML, {
children: valueToHTMLString(value, multiline)
});
return Tag ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Tag, {
...props,
children: value
}) : value;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/rich-text/multiline.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function RichTextMultiline({
children,
identifier,
tagName: TagName = 'div',
value = '',
onChange,
multiline,
...props
}, forwardedRef) {
external_wp_deprecated_default()('wp.blockEditor.RichText multiline prop', {
since: '6.1',
version: '6.3',
alternative: 'nested blocks (InnerBlocks)',
link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/nested-blocks-inner-blocks/'
});
const {
clientId
} = useBlockEditContext();
const {
getSelectionStart,
getSelectionEnd
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
selectionChange
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const multilineTagName = getMultilineTag(multiline);
value = value || `<${multilineTagName}></${multilineTagName}>`;
const padded = `</${multilineTagName}>${value}<${multilineTagName}>`;
const values = padded.split(`</${multilineTagName}><${multilineTagName}>`);
values.shift();
values.pop();
function _onChange(newValues) {
onChange(`<${multilineTagName}>${newValues.join(`</${multilineTagName}><${multilineTagName}>`)}</${multilineTagName}>`);
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TagName, {
ref: forwardedRef,
children: values.map((_value, index) => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RichTextWrapper, {
identifier: `${identifier}-${index}`,
tagName: multilineTagName,
value: _value,
onChange: newValue => {
const newValues = values.slice();
newValues[index] = newValue;
_onChange(newValues);
},
isSelected: undefined,
onKeyDown: event => {
if (event.keyCode !== external_wp_keycodes_namespaceObject.ENTER) {
return;
}
event.preventDefault();
const {
offset: start
} = getSelectionStart();
const {
offset: end
} = getSelectionEnd();
// Cannot split if there is no selection.
if (typeof start !== 'number' || typeof end !== 'number') {
return;
}
const richTextValue = (0,external_wp_richText_namespaceObject.create)({
html: _value
});
richTextValue.start = start;
richTextValue.end = end;
const array = (0,external_wp_richText_namespaceObject.split)(richTextValue).map(v => (0,external_wp_richText_namespaceObject.toHTMLString)({
value: v
}));
const newValues = values.slice();
newValues.splice(index, 1, ...array);
_onChange(newValues);
selectionChange(clientId, `${identifier}-${index + 1}`, 0, 0);
},
onMerge: forward => {
const newValues = values.slice();
let offset = 0;
if (forward) {
if (!newValues[index + 1]) {
return;
}
newValues.splice(index, 2, newValues[index] + newValues[index + 1]);
offset = newValues[index].length - 1;
} else {
if (!newValues[index - 1]) {
return;
}
newValues.splice(index - 1, 2, newValues[index - 1] + newValues[index]);
offset = newValues[index - 1].length - 1;
}
_onChange(newValues);
selectionChange(clientId, `${identifier}-${index - (forward ? 0 : 1)}`, offset, offset);
},
...props
}, index);
})
});
}
/* harmony default export */ const multiline = ((0,external_wp_element_namespaceObject.forwardRef)(RichTextMultiline));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/rich-text/with-deprecations.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function withDeprecations(Component) {
return (0,external_wp_element_namespaceObject.forwardRef)((props, ref) => {
let value = props.value;
let onChange = props.onChange;
// Handle deprecated format.
if (Array.isArray(value)) {
external_wp_deprecated_default()('wp.blockEditor.RichText value prop as children type', {
since: '6.1',
version: '6.3',
alternative: 'value prop as string',
link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/'
});
value = external_wp_blocks_namespaceObject.children.toHTML(props.value);
onChange = newValue => props.onChange(external_wp_blocks_namespaceObject.children.fromDOM((0,external_wp_richText_namespaceObject.__unstableCreateElement)(document, newValue).childNodes));
}
const NewComponent = props.multiline ? multiline : Component;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NewComponent, {
...props,
value: value,
onChange: onChange,
ref: ref
});
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/rich-text/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const keyboardShortcutContext = (0,external_wp_element_namespaceObject.createContext)();
const inputEventContext = (0,external_wp_element_namespaceObject.createContext)();
const instanceIdKey = Symbol('instanceId');
/**
* Removes props used for the native version of RichText so that they are not
* passed to the DOM element and log warnings.
*
* @param {Object} props Props to filter.
*
* @return {Object} Filtered props.
*/
function removeNativeProps(props) {
const {
__unstableMobileNoFocusOnMount,
deleteEnter,
placeholderTextColor,
textAlign,
selectionColor,
tagsToEliminate,
disableEditingMenu,
fontSize,
fontFamily,
fontWeight,
fontStyle,
minWidth,
maxWidth,
disableSuggestions,
disableAutocorrection,
...restProps
} = props;
return restProps;
}
function RichTextWrapper({
children,
tagName = 'div',
value: adjustedValue = '',
onChange: adjustedOnChange,
isSelected: originalIsSelected,
multiline,
inlineToolbar,
wrapperClassName,
autocompleters,
onReplace,
placeholder,
allowedFormats,
withoutInteractiveFormatting,
onRemove,
onMerge,
onSplit,
__unstableOnSplitAtEnd: onSplitAtEnd,
__unstableOnSplitAtDoubleLineEnd: onSplitAtDoubleLineEnd,
identifier,
preserveWhiteSpace,
__unstablePastePlainText: pastePlainText,
__unstableEmbedURLOnPaste,
__unstableDisableFormats: disableFormats,
disableLineBreaks,
__unstableAllowPrefixTransformations,
readOnly,
...props
}, forwardedRef) {
props = removeNativeProps(props);
if (onSplit) {
external_wp_deprecated_default()('wp.blockEditor.RichText onSplit prop', {
since: '6.4',
alternative: 'block.json support key: "splitting"'
});
}
const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(RichTextWrapper);
const anchorRef = (0,external_wp_element_namespaceObject.useRef)();
const context = useBlockEditContext();
const {
clientId,
isSelected: isBlockSelected,
name: blockName
} = context;
const blockBindings = context[blockBindingsKey];
const blockContext = (0,external_wp_element_namespaceObject.useContext)(block_context);
const registry = (0,external_wp_data_namespaceObject.useRegistry)();
const selector = select => {
// Avoid subscribing to the block editor store if the block is not
// selected.
if (!isBlockSelected) {
return {
isSelected: false
};
}
const {
getSelectionStart,
getSelectionEnd
} = select(store);
const selectionStart = getSelectionStart();
const selectionEnd = getSelectionEnd();
let isSelected;
if (originalIsSelected === undefined) {
isSelected = selectionStart.clientId === clientId && selectionEnd.clientId === clientId && (identifier ? selectionStart.attributeKey === identifier : selectionStart[instanceIdKey] === instanceId);
} else if (originalIsSelected) {
isSelected = selectionStart.clientId === clientId;
}
return {
selectionStart: isSelected ? selectionStart.offset : undefined,
selectionEnd: isSelected ? selectionEnd.offset : undefined,
isSelected
};
};
const {
selectionStart,
selectionEnd,
isSelected
} = (0,external_wp_data_namespaceObject.useSelect)(selector, [clientId, identifier, instanceId, originalIsSelected, isBlockSelected]);
const {
disableBoundBlock,
bindingsPlaceholder,
bindingsLabel
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
var _fieldsList$relatedBi;
if (!blockBindings?.[identifier] || !canBindBlock(blockName)) {
return {};
}
const relatedBinding = blockBindings[identifier];
const blockBindingsSource = (0,external_wp_blocks_namespaceObject.getBlockBindingsSource)(relatedBinding.source);
const blockBindingsContext = {};
if (blockBindingsSource?.usesContext?.length) {
for (const key of blockBindingsSource.usesContext) {
blockBindingsContext[key] = blockContext[key];
}
}
const _disableBoundBlock = !blockBindingsSource?.canUserEditValue?.({
select,
context: blockBindingsContext,
args: relatedBinding.args
});
// Don't modify placeholders if value is not empty.
if (adjustedValue.length > 0) {
return {
disableBoundBlock: _disableBoundBlock,
// Null values will make them fall back to the default behavior.
bindingsPlaceholder: null,
bindingsLabel: null
};
}
const {
getBlockAttributes
} = select(store);
const blockAttributes = getBlockAttributes(clientId);
const fieldsList = blockBindingsSource?.getFieldsList?.({
select,
context: blockBindingsContext
});
const bindingKey = (_fieldsList$relatedBi = fieldsList?.[relatedBinding?.args?.key]?.label) !== null && _fieldsList$relatedBi !== void 0 ? _fieldsList$relatedBi : blockBindingsSource?.label;
const _bindingsPlaceholder = _disableBoundBlock ? bindingKey : (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %s: connected field label or source label */
(0,external_wp_i18n_namespaceObject.__)('Add %s'), bindingKey);
const _bindingsLabel = _disableBoundBlock ? relatedBinding?.args?.key || blockBindingsSource?.label : (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %s: source label or key */
(0,external_wp_i18n_namespaceObject.__)('Empty %s; start writing to edit its value'), relatedBinding?.args?.key || blockBindingsSource?.label);
return {
disableBoundBlock: _disableBoundBlock,
bindingsPlaceholder: blockAttributes?.placeholder || _bindingsPlaceholder,
bindingsLabel: _bindingsLabel
};
}, [blockBindings, identifier, blockName, blockContext, adjustedValue]);
const shouldDisableEditing = readOnly || disableBoundBlock;
const {
getSelectionStart,
getSelectionEnd,
getBlockRootClientId
} = (0,external_wp_data_namespaceObject.useSelect)(store);
const {
selectionChange
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const adjustedAllowedFormats = getAllowedFormats({
allowedFormats,
disableFormats
});
const hasFormats = !adjustedAllowedFormats || adjustedAllowedFormats.length > 0;
const onSelectionChange = (0,external_wp_element_namespaceObject.useCallback)((start, end) => {
const selection = {};
const unset = start === undefined && end === undefined;
const baseSelection = {
clientId,
[identifier ? 'attributeKey' : instanceIdKey]: identifier ? identifier : instanceId
};
if (typeof start === 'number' || unset) {
// If we are only setting the start (or the end below), which
// means a partial selection, and we're not updating a selection
// with the same client ID, abort. This means the selected block
// is a parent block.
if (end === undefined && getBlockRootClientId(clientId) !== getBlockRootClientId(getSelectionEnd().clientId)) {
return;
}
selection.start = {
...baseSelection,
offset: start
};
}
if (typeof end === 'number' || unset) {
if (start === undefined && getBlockRootClientId(clientId) !== getBlockRootClientId(getSelectionStart().clientId)) {
return;
}
selection.end = {
...baseSelection,
offset: end
};
}
selectionChange(selection);
}, [clientId, getBlockRootClientId, getSelectionEnd, getSelectionStart, identifier, instanceId, selectionChange]);
const {
formatTypes,
prepareHandlers,
valueHandlers,
changeHandlers,
dependencies
} = useFormatTypes({
clientId,
identifier,
withoutInteractiveFormatting,
allowedFormats: adjustedAllowedFormats
});
function addEditorOnlyFormats(value) {
return valueHandlers.reduce((accumulator, fn) => fn(accumulator, value.text), value.formats);
}
function removeEditorOnlyFormats(value) {
formatTypes.forEach(formatType => {
// Remove formats created by prepareEditableTree, because they are editor only.
if (formatType.__experimentalCreatePrepareEditableTree) {
value = (0,external_wp_richText_namespaceObject.removeFormat)(value, formatType.name, 0, value.text.length);
}
});
return value.formats;
}
function addInvisibleFormats(value) {
return prepareHandlers.reduce((accumulator, fn) => fn(accumulator, value.text), value.formats);
}
const {
value,
getValue,
onChange,
ref: richTextRef
} = (0,external_wp_richText_namespaceObject.__unstableUseRichText)({
value: adjustedValue,
onChange(html, {
__unstableFormats,
__unstableText
}) {
adjustedOnChange(html);
Object.values(changeHandlers).forEach(changeHandler => {
changeHandler(__unstableFormats, __unstableText);
});
},
selectionStart,
selectionEnd,
onSelectionChange,
placeholder: bindingsPlaceholder || placeholder,
__unstableIsSelected: isSelected,
__unstableDisableFormats: disableFormats,
preserveWhiteSpace,
__unstableDependencies: [...dependencies, tagName],
__unstableAfterParse: addEditorOnlyFormats,
__unstableBeforeSerialize: removeEditorOnlyFormats,
__unstableAddInvisibleFormats: addInvisibleFormats
});
const autocompleteProps = useBlockEditorAutocompleteProps({
onReplace,
completers: autocompleters,
record: value,
onChange
});
useMarkPersistent({
html: adjustedValue,
value
});
const keyboardShortcuts = (0,external_wp_element_namespaceObject.useRef)(new Set());
const inputEvents = (0,external_wp_element_namespaceObject.useRef)(new Set());
function onFocus() {
anchorRef.current?.focus();
}
const TagName = tagName;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [isSelected && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(keyboardShortcutContext.Provider, {
value: keyboardShortcuts,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inputEventContext.Provider, {
value: inputEvents,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.Popover.__unstableSlotNameProvider, {
value: "__unstable-block-tools-after",
children: [children && children({
value,
onChange,
onFocus
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FormatEdit, {
value: value,
onChange: onChange,
onFocus: onFocus,
formatTypes: formatTypes,
forwardedRef: anchorRef
})]
})
})
}), isSelected && hasFormats && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(format_toolbar_container, {
inline: inlineToolbar,
editableContentElement: anchorRef.current
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TagName
// Overridable props.
, {
role: "textbox",
"aria-multiline": !disableLineBreaks,
"aria-readonly": shouldDisableEditing,
...props,
"aria-label": bindingsLabel || props['aria-label'] || placeholder,
...autocompleteProps,
ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([
// Rich text ref must be first because its focus listener
// must be set up before any other ref calls .focus() on
// mount.
richTextRef, forwardedRef, autocompleteProps.ref, props.ref, useEventListeners({
registry,
getValue,
onChange,
__unstableAllowPrefixTransformations,
formatTypes,
onReplace,
selectionChange,
isSelected,
disableFormats,
value,
tagName,
onSplit,
__unstableEmbedURLOnPaste,
pastePlainText,
onMerge,
onRemove,
removeEditorOnlyFormats,
disableLineBreaks,
onSplitAtEnd,
onSplitAtDoubleLineEnd,
keyboardShortcuts,
inputEvents
}), anchorRef]),
contentEditable: !shouldDisableEditing,
suppressContentEditableWarning: true,
className: dist_clsx('block-editor-rich-text__editable', props.className, 'rich-text')
// Setting tabIndex to 0 is unnecessary, the element is already
// focusable because it's contentEditable. This also fixes a
// Safari bug where it's not possible to Shift+Click multi
// select blocks when Shift Clicking into an element with
// tabIndex because Safari will focus the element. However,
// Safari will correctly ignore nested contentEditable elements.
,
tabIndex: props.tabIndex === 0 && !shouldDisableEditing ? null : props.tabIndex,
"data-wp-block-attribute-key": identifier
})]
});
}
// This is the private API for the RichText component.
// It allows access to all props, not just the public ones.
const PrivateRichText = withDeprecations((0,external_wp_element_namespaceObject.forwardRef)(RichTextWrapper));
PrivateRichText.Content = Content;
PrivateRichText.isEmpty = value => {
return !value || value.length === 0;
};
// This is the public API for the RichText component.
// We wrap the PrivateRichText component to hide some props from the public API.
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md
*/
const PublicForwardedRichTextContainer = (0,external_wp_element_namespaceObject.forwardRef)((props, ref) => {
const context = useBlockEditContext();
const isPreviewMode = context[isPreviewModeKey];
if (isPreviewMode) {
// Remove all non-content props.
const {
children,
tagName: Tag = 'div',
value,
onChange,
isSelected,
multiline,
inlineToolbar,
wrapperClassName,
autocompleters,
onReplace,
placeholder,
allowedFormats,
withoutInteractiveFormatting,
onRemove,
onMerge,
onSplit,
__unstableOnSplitAtEnd,
__unstableOnSplitAtDoubleLineEnd,
identifier,
preserveWhiteSpace,
__unstablePastePlainText,
__unstableEmbedURLOnPaste,
__unstableDisableFormats,
disableLineBreaks,
__unstableAllowPrefixTransformations,
readOnly,
...contentProps
} = removeNativeProps(props);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Tag, {
...contentProps,
dangerouslySetInnerHTML: {
__html: valueToHTMLString(value, multiline)
}
});
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PrivateRichText, {
ref: ref,
...props,
readOnly: false
});
});
PublicForwardedRichTextContainer.Content = Content;
PublicForwardedRichTextContainer.isEmpty = value => {
return !value || value.length === 0;
};
/* harmony default export */ const rich_text = (PublicForwardedRichTextContainer);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/editable-text/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const EditableText = (0,external_wp_element_namespaceObject.forwardRef)((props, ref) => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(rich_text, {
ref: ref,
...props,
__unstableDisableFormats: true
});
});
EditableText.Content = ({
value = '',
tagName: Tag = 'div',
...props
}) => {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Tag, {
...props,
children: value
});
};
/**
* Renders an editable text input in which text formatting is not allowed.
*/
/* harmony default export */ const editable_text = (EditableText);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/plain-text/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/plain-text/README.md
*/
const PlainText = (0,external_wp_element_namespaceObject.forwardRef)(({
__experimentalVersion,
...props
}, ref) => {
if (__experimentalVersion === 2) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(editable_text, {
ref: ref,
...props
});
}
const {
className,
onChange,
...remainingProps
} = props;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(lib/* default */.A, {
ref: ref,
className: dist_clsx('block-editor-plain-text', className),
onChange: event => onChange(event.target.value),
...remainingProps
});
});
/* harmony default export */ const plain_text = (PlainText);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/responsive-block-control/label.js
/**
* WordPress dependencies
*/
function ResponsiveBlockControlLabel({
property,
viewport,
desc
}) {
const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(ResponsiveBlockControlLabel);
const accessibleLabel = desc || (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: 1: property name. 2: viewport name. */
(0,external_wp_i18n_namespaceObject._x)('Controls the %1$s property for %2$s viewports.', 'Text labelling a interface as controlling a given layout property (eg: margin) for a given screen size.'), property, viewport.label);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
"aria-describedby": `rbc-desc-${instanceId}`,
children: viewport.label
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.VisuallyHidden, {
as: "span",
id: `rbc-desc-${instanceId}`,
children: accessibleLabel
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/responsive-block-control/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function ResponsiveBlockControl(props) {
const {
title,
property,
toggleLabel,
onIsResponsiveChange,
renderDefaultControl,
renderResponsiveControls,
isResponsive = false,
defaultLabel = {
id: 'all',
label: (0,external_wp_i18n_namespaceObject._x)('All', 'screen sizes')
},
viewports = [{
id: 'small',
label: (0,external_wp_i18n_namespaceObject.__)('Small screens')
}, {
id: 'medium',
label: (0,external_wp_i18n_namespaceObject.__)('Medium screens')
}, {
id: 'large',
label: (0,external_wp_i18n_namespaceObject.__)('Large screens')
}]
} = props;
if (!title || !property || !renderDefaultControl) {
return null;
}
const toggleControlLabel = toggleLabel || (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %s: Property value for the control (eg: margin, padding, etc.). */
(0,external_wp_i18n_namespaceObject.__)('Use the same %s on all screen sizes.'), property);
const toggleHelpText = (0,external_wp_i18n_namespaceObject.__)('Toggle between using the same value for all screen sizes or using a unique value per screen size.');
const defaultControl = renderDefaultControl( /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ResponsiveBlockControlLabel, {
property: property,
viewport: defaultLabel
}), defaultLabel);
const defaultResponsiveControls = () => {
return viewports.map(viewport => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_element_namespaceObject.Fragment, {
children: renderDefaultControl( /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ResponsiveBlockControlLabel, {
property: property,
viewport: viewport
}), viewport)
}, viewport.id));
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("fieldset", {
className: "block-editor-responsive-block-control",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("legend", {
className: "block-editor-responsive-block-control__title",
children: title
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-responsive-block-control__inner",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToggleControl, {
__nextHasNoMarginBottom: true,
className: "block-editor-responsive-block-control__toggle",
label: toggleControlLabel,
checked: !isResponsive,
onChange: onIsResponsiveChange,
help: toggleHelpText
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: dist_clsx('block-editor-responsive-block-control__group', {
'is-responsive': isResponsive
}),
children: [!isResponsive && defaultControl, isResponsive && (renderResponsiveControls ? renderResponsiveControls(viewports) : defaultResponsiveControls())]
})]
})]
});
}
/* harmony default export */ const responsive_block_control = (ResponsiveBlockControl);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/rich-text/shortcut.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function RichTextShortcut({
character,
type,
onUse
}) {
const keyboardShortcuts = (0,external_wp_element_namespaceObject.useContext)(keyboardShortcutContext);
const onUseRef = (0,external_wp_element_namespaceObject.useRef)();
onUseRef.current = onUse;
(0,external_wp_element_namespaceObject.useEffect)(() => {
function callback(event) {
if (external_wp_keycodes_namespaceObject.isKeyboardEvent[type](event, character)) {
onUseRef.current();
event.preventDefault();
}
}
keyboardShortcuts.current.add(callback);
return () => {
keyboardShortcuts.current.delete(callback);
};
}, [character, type]);
return null;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/rich-text/toolbar-button.js
/**
* WordPress dependencies
*/
function RichTextToolbarButton({
name,
shortcutType,
shortcutCharacter,
...props
}) {
let shortcut;
let fillName = 'RichText.ToolbarControls';
if (name) {
fillName += `.${name}`;
}
if (shortcutType && shortcutCharacter) {
shortcut = external_wp_keycodes_namespaceObject.displayShortcut[shortcutType](shortcutCharacter);
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Fill, {
name: fillName,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarButton, {
...props,
shortcut: shortcut
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/rich-text/input-event.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function __unstableRichTextInputEvent({
inputType,
onInput
}) {
const callbacks = (0,external_wp_element_namespaceObject.useContext)(inputEventContext);
const onInputRef = (0,external_wp_element_namespaceObject.useRef)();
onInputRef.current = onInput;
(0,external_wp_element_namespaceObject.useEffect)(() => {
function callback(event) {
if (event.inputType === inputType) {
onInputRef.current();
event.preventDefault();
}
}
callbacks.current.add(callback);
return () => {
callbacks.current.delete(callback);
};
}, [inputType]);
return null;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/tool-selector/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const selectIcon = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Path, {
d: "M9.4 20.5L5.2 3.8l14.6 9-2 .3c-.2 0-.4.1-.7.1-.9.2-1.6.3-2.2.5-.8.3-1.4.5-1.8.8-.4.3-.8.8-1.3 1.5-.4.5-.8 1.2-1.2 2l-.3.6-.9 1.9zM7.6 7.1l2.4 9.3c.2-.4.5-.8.7-1.1.6-.8 1.1-1.4 1.6-1.8.5-.4 1.3-.8 2.2-1.1l1.2-.3-8.1-5z"
})
});
function ToolSelector(props, ref) {
const mode = (0,external_wp_data_namespaceObject.useSelect)(select => select(store).__unstableGetEditorMode(), []);
const {
resetZoomLevel,
__unstableSetEditorMode
} = unlock((0,external_wp_data_namespaceObject.useDispatch)(store));
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Dropdown, {
renderToggle: ({
isOpen,
onToggle
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
size: "compact",
...props,
ref: ref,
icon: mode === 'navigation' ? selectIcon : edit,
"aria-expanded": isOpen,
"aria-haspopup": "true",
onClick: onToggle
/* translators: button label text should, if possible, be under 16 characters. */,
label: (0,external_wp_i18n_namespaceObject.__)('Tools')
}),
popoverProps: {
placement: 'bottom-start'
},
renderContent: () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.NavigableMenu, {
role: "menu",
"aria-label": (0,external_wp_i18n_namespaceObject.__)('Tools'),
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItemsChoice, {
value: mode === 'navigation' ? 'navigation' : 'edit',
onSelect: newMode => {
resetZoomLevel();
__unstableSetEditorMode(newMode);
},
choices: [{
value: 'edit',
label: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
icon: edit
}), (0,external_wp_i18n_namespaceObject.__)('Edit')]
})
}, {
value: 'navigation',
label: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [selectIcon, (0,external_wp_i18n_namespaceObject.__)('Select')]
})
}]
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-tool-selector__help",
children: (0,external_wp_i18n_namespaceObject.__)('Tools provide different interactions for selecting, navigating, and editing blocks. Toggle between select and edit by pressing Escape and Enter.')
})]
})
});
}
/* harmony default export */ const tool_selector = ((0,external_wp_element_namespaceObject.forwardRef)(ToolSelector));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/unit-control/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function UnitControl({
units: unitsProp,
...props
}) {
const [availableUnits] = use_settings_useSettings('spacing.units');
const units = (0,external_wp_components_namespaceObject.__experimentalUseCustomUnits)({
availableUnits: availableUnits || ['%', 'px', 'em', 'rem', 'vw'],
units: unitsProp
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalUnitControl, {
units: units,
...props
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/arrow-left.js
/**
* WordPress dependencies
*/
const arrowLeft = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M20 11.2H6.8l3.7-3.7-1-1L3.9 12l5.6 5.5 1-1-3.7-3.7H20z"
})
});
/* harmony default export */ const arrow_left = (arrowLeft);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/url-input/button.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
class URLInputButton extends external_wp_element_namespaceObject.Component {
constructor() {
super(...arguments);
this.toggle = this.toggle.bind(this);
this.submitLink = this.submitLink.bind(this);
this.state = {
expanded: false
};
}
toggle() {
this.setState({
expanded: !this.state.expanded
});
}
submitLink(event) {
event.preventDefault();
this.toggle();
}
render() {
const {
url,
onChange
} = this.props;
const {
expanded
} = this.state;
const buttonLabel = url ? (0,external_wp_i18n_namespaceObject.__)('Edit link') : (0,external_wp_i18n_namespaceObject.__)('Insert link');
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-url-input__button",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
size: "compact",
icon: library_link,
label: buttonLabel,
onClick: this.toggle,
className: "components-toolbar__control",
isPressed: !!url
}), expanded && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("form", {
className: "block-editor-url-input__button-modal",
onSubmit: this.submitLink,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-url-input__button-modal-line",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
className: "block-editor-url-input__back",
icon: arrow_left,
label: (0,external_wp_i18n_namespaceObject.__)('Close'),
onClick: this.toggle
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(url_input, {
value: url || '',
onChange: onChange,
suffix: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalInputControlSuffixWrapper, {
variant: "control",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
size: "small",
icon: keyboard_return,
label: (0,external_wp_i18n_namespaceObject.__)('Submit'),
type: "submit"
})
})
})]
})
})]
});
}
}
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/url-input/README.md
*/
/* harmony default export */ const url_input_button = (URLInputButton);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/image.js
/**
* WordPress dependencies
*/
const image_image = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 4.5h14c.3 0 .5.2.5.5v8.4l-3-2.9c-.3-.3-.8-.3-1 0L11.9 14 9 12c-.3-.2-.6-.2-.8 0l-3.6 2.6V5c-.1-.3.1-.5.4-.5zm14 15H5c-.3 0-.5-.2-.5-.5v-2.4l4.1-3 3 1.9c.3.2.7.2.9-.1L16 12l3.5 3.4V19c0 .3-.2.5-.5.5z"
})
});
/* harmony default export */ const library_image = (image_image);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/url-popover/image-url-input-ui.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const LINK_DESTINATION_NONE = 'none';
const LINK_DESTINATION_CUSTOM = 'custom';
const LINK_DESTINATION_MEDIA = 'media';
const LINK_DESTINATION_ATTACHMENT = 'attachment';
const NEW_TAB_REL = ['noreferrer', 'noopener'];
const ImageURLInputUI = ({
linkDestination,
onChangeUrl,
url,
mediaType = 'image',
mediaUrl,
mediaLink,
linkTarget,
linkClass,
rel,
showLightboxSetting,
lightboxEnabled,
onSetLightbox,
resetLightbox
}) => {
const [isOpen, setIsOpen] = (0,external_wp_element_namespaceObject.useState)(false);
// Use internal state instead of a ref to make sure that the component
// re-renders when the popover's anchor updates.
const [popoverAnchor, setPopoverAnchor] = (0,external_wp_element_namespaceObject.useState)(null);
const openLinkUI = () => {
setIsOpen(true);
};
const [isEditingLink, setIsEditingLink] = (0,external_wp_element_namespaceObject.useState)(false);
const [urlInput, setUrlInput] = (0,external_wp_element_namespaceObject.useState)(null);
const autocompleteRef = (0,external_wp_element_namespaceObject.useRef)(null);
const wrapperRef = (0,external_wp_element_namespaceObject.useRef)();
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (!wrapperRef.current) {
return;
}
const nextFocusTarget = external_wp_dom_namespaceObject.focus.focusable.find(wrapperRef.current)[0] || wrapperRef.current;
nextFocusTarget.focus();
}, [isEditingLink, url, lightboxEnabled]);
const startEditLink = () => {
if (linkDestination === LINK_DESTINATION_MEDIA || linkDestination === LINK_DESTINATION_ATTACHMENT) {
setUrlInput('');
}
setIsEditingLink(true);
};
const stopEditLink = () => {
setIsEditingLink(false);
};
const closeLinkUI = () => {
setUrlInput(null);
stopEditLink();
setIsOpen(false);
};
const getUpdatedLinkTargetSettings = value => {
const newLinkTarget = value ? '_blank' : undefined;
let updatedRel;
if (newLinkTarget) {
const rels = (rel !== null && rel !== void 0 ? rel : '').split(' ');
NEW_TAB_REL.forEach(relVal => {
if (!rels.includes(relVal)) {
rels.push(relVal);
}
});
updatedRel = rels.join(' ');
} else {
const rels = (rel !== null && rel !== void 0 ? rel : '').split(' ').filter(relVal => NEW_TAB_REL.includes(relVal) === false);
updatedRel = rels.length ? rels.join(' ') : undefined;
}
return {
linkTarget: newLinkTarget,
rel: updatedRel
};
};
const onFocusOutside = () => {
return event => {
// The autocomplete suggestions list renders in a separate popover (in a portal),
// so onFocusOutside fails to detect that a click on a suggestion occurred in the
// LinkContainer. Detect clicks on autocomplete suggestions using a ref here, and
// return to avoid the popover being closed.
const autocompleteElement = autocompleteRef.current;
if (autocompleteElement && autocompleteElement.contains(event.target)) {
return;
}
setIsOpen(false);
setUrlInput(null);
stopEditLink();
};
};
const onSubmitLinkChange = () => {
return event => {
if (urlInput) {
// It is possible the entered URL actually matches a named link destination.
// This check will ensure our link destination is correct.
const selectedDestination = getLinkDestinations().find(destination => destination.url === urlInput)?.linkDestination || LINK_DESTINATION_CUSTOM;
onChangeUrl({
href: urlInput,
linkDestination: selectedDestination,
lightbox: {
enabled: false
}
});
}
stopEditLink();
setUrlInput(null);
event.preventDefault();
};
};
const onLinkRemove = () => {
onChangeUrl({
linkDestination: LINK_DESTINATION_NONE,
href: ''
});
};
const getLinkDestinations = () => {
const linkDestinations = [{
linkDestination: LINK_DESTINATION_MEDIA,
title: (0,external_wp_i18n_namespaceObject.__)('Link to image file'),
url: mediaType === 'image' ? mediaUrl : undefined,
icon: library_image
}];
if (mediaType === 'image' && mediaLink) {
linkDestinations.push({
linkDestination: LINK_DESTINATION_ATTACHMENT,
title: (0,external_wp_i18n_namespaceObject.__)('Link to attachment page'),
url: mediaType === 'image' ? mediaLink : undefined,
icon: library_page
});
}
return linkDestinations;
};
const onSetHref = value => {
const linkDestinations = getLinkDestinations();
let linkDestinationInput;
if (!value) {
linkDestinationInput = LINK_DESTINATION_NONE;
} else {
linkDestinationInput = (linkDestinations.find(destination => {
return destination.url === value;
}) || {
linkDestination: LINK_DESTINATION_CUSTOM
}).linkDestination;
}
onChangeUrl({
linkDestination: linkDestinationInput,
href: value
});
};
const onSetNewTab = value => {
const updatedLinkTarget = getUpdatedLinkTargetSettings(value);
onChangeUrl(updatedLinkTarget);
};
const onSetLinkRel = value => {
onChangeUrl({
rel: value
});
};
const onSetLinkClass = value => {
onChangeUrl({
linkClass: value
});
};
const advancedOptions = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalVStack, {
spacing: "3",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToggleControl, {
__nextHasNoMarginBottom: true,
label: (0,external_wp_i18n_namespaceObject.__)('Open in new tab'),
onChange: onSetNewTab,
checked: linkTarget === '_blank'
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.TextControl, {
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
label: (0,external_wp_i18n_namespaceObject.__)('Link rel'),
value: rel !== null && rel !== void 0 ? rel : '',
onChange: onSetLinkRel
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.TextControl, {
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
label: (0,external_wp_i18n_namespaceObject.__)('Link CSS class'),
value: linkClass || '',
onChange: onSetLinkClass
})]
});
const linkEditorValue = urlInput !== null ? urlInput : url;
const hideLightboxPanel = !lightboxEnabled || lightboxEnabled && !showLightboxSetting;
const showLinkEditor = !linkEditorValue && hideLightboxPanel;
const urlLabel = (getLinkDestinations().find(destination => destination.linkDestination === linkDestination) || {}).title;
const PopoverChildren = () => {
if (lightboxEnabled && showLightboxSetting && !url && !isEditingLink) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-url-popover__expand-on-click",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
icon: library_fullscreen
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "text",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("p", {
children: (0,external_wp_i18n_namespaceObject.__)('Expand on click')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("p", {
className: "description",
children: (0,external_wp_i18n_namespaceObject.__)('Scales the image with a lightbox effect')
})]
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
icon: link_off,
label: (0,external_wp_i18n_namespaceObject.__)('Disable expand on click'),
onClick: () => {
onSetLightbox?.(false);
},
size: "compact"
})]
});
} else if (!url || isEditingLink) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(url_popover.LinkEditor, {
className: "block-editor-format-toolbar__link-container-content",
value: linkEditorValue,
onChangeInputValue: setUrlInput,
onSubmit: onSubmitLinkChange(),
autocompleteRef: autocompleteRef
});
} else if (url && !isEditingLink) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(url_popover.LinkViewer, {
className: "block-editor-format-toolbar__link-container-content",
url: url,
onEditLinkClick: startEditLink,
urlLabel: urlLabel
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
icon: link_off,
label: (0,external_wp_i18n_namespaceObject.__)('Remove link'),
onClick: () => {
onLinkRemove();
resetLightbox?.();
},
size: "compact"
})]
});
}
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToolbarButton, {
icon: library_link,
className: "components-toolbar__control",
label: (0,external_wp_i18n_namespaceObject.__)('Link'),
"aria-expanded": isOpen,
onClick: openLinkUI,
ref: setPopoverAnchor,
isActive: !!url || lightboxEnabled && showLightboxSetting
}), isOpen && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(url_popover, {
ref: wrapperRef,
anchor: popoverAnchor,
onFocusOutside: onFocusOutside(),
onClose: closeLinkUI,
renderSettings: hideLightboxPanel ? () => advancedOptions : null,
additionalControls: showLinkEditor && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.NavigableMenu, {
children: [getLinkDestinations().map(link => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
icon: link.icon,
iconPosition: "left",
onClick: () => {
setUrlInput(null);
onSetHref(link.url);
stopEditLink();
},
children: link.title
}, link.linkDestination)), showLightboxSetting && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
className: "block-editor-url-popover__expand-on-click",
icon: library_fullscreen,
info: (0,external_wp_i18n_namespaceObject.__)('Scale the image with a lightbox effect.'),
iconPosition: "left",
onClick: () => {
setUrlInput(null);
onChangeUrl({
linkDestination: LINK_DESTINATION_NONE,
href: ''
});
onSetLightbox?.(true);
stopEditLink();
},
children: (0,external_wp_i18n_namespaceObject.__)('Expand on click')
}, "expand-on-click")]
}),
offset: 13,
children: PopoverChildren()
})]
});
};
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/preview-options/index.js
/**
* WordPress dependencies
*/
function PreviewOptions() {
external_wp_deprecated_default()('wp.blockEditor.PreviewOptions', {
version: '6.5'
});
return null;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/use-resize-canvas/index.js
/**
* WordPress dependencies
*/
/**
* Function to resize the editor window.
*
* @param {string} deviceType Used for determining the size of the container (e.g. Desktop, Tablet, Mobile)
*
* @return {Object} Inline styles to be added to resizable container.
*/
function useResizeCanvas(deviceType) {
const [actualWidth, updateActualWidth] = (0,external_wp_element_namespaceObject.useState)(window.innerWidth);
(0,external_wp_element_namespaceObject.useEffect)(() => {
if (deviceType === 'Desktop') {
return;
}
const resizeListener = () => updateActualWidth(window.innerWidth);
window.addEventListener('resize', resizeListener);
return () => {
window.removeEventListener('resize', resizeListener);
};
}, [deviceType]);
const getCanvasWidth = device => {
let deviceWidth;
switch (device) {
case 'Tablet':
deviceWidth = 780;
break;
case 'Mobile':
deviceWidth = 360;
break;
default:
return null;
}
return deviceWidth < actualWidth ? deviceWidth : actualWidth;
};
const contentInlineStyles = device => {
const height = device === 'Mobile' ? '768px' : '1024px';
const marginVertical = '40px';
const marginHorizontal = 'auto';
switch (device) {
case 'Tablet':
case 'Mobile':
return {
width: getCanvasWidth(device),
// Keeping margin styles separate to avoid warnings
// when those props get overridden in the iframe component
marginTop: marginVertical,
marginBottom: marginVertical,
marginLeft: marginHorizontal,
marginRight: marginHorizontal,
height,
overflowY: 'auto'
};
default:
return {
marginLeft: marginHorizontal,
marginRight: marginHorizontal
};
}
};
return contentInlineStyles(deviceType);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/skip-to-selected-block/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/skip-to-selected-block/README.md
*/
function SkipToSelectedBlock() {
const selectedBlockClientId = (0,external_wp_data_namespaceObject.useSelect)(select => select(store).getBlockSelectionStart(), []);
const ref = (0,external_wp_element_namespaceObject.useRef)();
useBlockElementRef(selectedBlockClientId, ref);
const onClick = () => {
ref.current?.focus();
};
return selectedBlockClientId ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
__next40pxDefaultSize: true,
variant: "secondary",
className: "block-editor-skip-to-selected-block",
onClick: onClick,
children: (0,external_wp_i18n_namespaceObject.__)('Skip to the selected block')
}) : null;
}
;// CONCATENATED MODULE: external ["wp","wordcount"]
const external_wp_wordcount_namespaceObject = window["wp"]["wordcount"];
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/multi-selection-inspector/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function MultiSelectionInspector() {
const {
blocks
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getMultiSelectedBlocks
} = select(store);
return {
blocks: getMultiSelectedBlocks()
};
}, []);
const words = (0,external_wp_wordcount_namespaceObject.count)((0,external_wp_blocks_namespaceObject.serialize)(blocks), 'words');
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-multi-selection-inspector__card",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_icon, {
icon: library_copy,
showColors: true
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-multi-selection-inspector__card-content",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-multi-selection-inspector__card-title",
children: (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: number of blocks */
(0,external_wp_i18n_namespaceObject._n)('%d Block', '%d Blocks', blocks.length), blocks.length)
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-multi-selection-inspector__card-description",
children: (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: number of words */
(0,external_wp_i18n_namespaceObject._n)('%d word selected.', '%d words selected.', words), words)
})]
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/cog.js
/**
* WordPress dependencies
*/
const cog = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
fillRule: "evenodd",
d: "M10.289 4.836A1 1 0 0111.275 4h1.306a1 1 0 01.987.836l.244 1.466c.787.26 1.503.679 2.108 1.218l1.393-.522a1 1 0 011.216.437l.653 1.13a1 1 0 01-.23 1.273l-1.148.944a6.025 6.025 0 010 2.435l1.149.946a1 1 0 01.23 1.272l-.653 1.13a1 1 0 01-1.216.437l-1.394-.522c-.605.54-1.32.958-2.108 1.218l-.244 1.466a1 1 0 01-.987.836h-1.306a1 1 0 01-.986-.836l-.244-1.466a5.995 5.995 0 01-2.108-1.218l-1.394.522a1 1 0 01-1.217-.436l-.653-1.131a1 1 0 01.23-1.272l1.149-.946a6.026 6.026 0 010-2.435l-1.148-.944a1 1 0 01-.23-1.272l.653-1.131a1 1 0 011.217-.437l1.393.522a5.994 5.994 0 012.108-1.218l.244-1.466zM14.929 12a3 3 0 11-6 0 3 3 0 016 0z",
clipRule: "evenodd"
})
});
/* harmony default export */ const library_cog = (cog);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/styles.js
/**
* WordPress dependencies
*/
const styles = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M20 12a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 0 1-6.5 6.5v-13a6.5 6.5 0 0 1 6.5 6.5Z"
})
});
/* harmony default export */ const library_styles = (styles);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inspector-controls-tabs/utils.js
/**
* WordPress dependencies
*/
const TAB_SETTINGS = {
name: 'settings',
title: (0,external_wp_i18n_namespaceObject.__)('Settings'),
value: 'settings',
icon: library_cog,
className: 'block-editor-block-inspector__tab-item'
};
const TAB_STYLES = {
name: 'styles',
title: (0,external_wp_i18n_namespaceObject.__)('Styles'),
value: 'styles',
icon: library_styles,
className: 'block-editor-block-inspector__tab-item'
};
const TAB_LIST_VIEW = {
name: 'list',
title: (0,external_wp_i18n_namespaceObject.__)('List View'),
value: 'list-view',
icon: list_view,
className: 'block-editor-block-inspector__tab-item'
};
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inspector-controls-tabs/advanced-controls-panel.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const AdvancedControls = () => {
const fills = (0,external_wp_components_namespaceObject.__experimentalUseSlotFills)(InspectorAdvancedControls.slotName);
const hasFills = Boolean(fills && fills.length);
if (!hasFills) {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.PanelBody, {
className: "block-editor-block-inspector__advanced",
title: (0,external_wp_i18n_namespaceObject.__)('Advanced'),
initialOpen: false,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls.Slot, {
group: "advanced"
})
});
};
/* harmony default export */ const advanced_controls_panel = (AdvancedControls);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inspector-controls-tabs/position-controls-panel.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const PositionControlsPanel = () => {
const [initialOpen, setInitialOpen] = (0,external_wp_element_namespaceObject.useState)();
// Determine whether the panel should be expanded.
const {
multiSelectedBlocks
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlocksByClientId,
getSelectedBlockClientIds
} = select(store);
const clientIds = getSelectedBlockClientIds();
return {
multiSelectedBlocks: getBlocksByClientId(clientIds)
};
}, []);
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
// If any selected block has a position set, open the panel by default.
// The first block's value will still be used within the control though.
if (initialOpen === undefined) {
setInitialOpen(multiSelectedBlocks.some(({
attributes
}) => !!attributes?.style?.position?.type));
}
}, [initialOpen, multiSelectedBlocks, setInitialOpen]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.PanelBody, {
className: "block-editor-block-inspector__position",
title: (0,external_wp_i18n_namespaceObject.__)('Position'),
initialOpen: initialOpen !== null && initialOpen !== void 0 ? initialOpen : false,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls.Slot, {
group: "position"
})
});
};
const PositionControls = () => {
const fills = (0,external_wp_components_namespaceObject.__experimentalUseSlotFills)(inspector_controls_groups.position.Slot.__unstableName);
const hasFills = Boolean(fills && fills.length);
if (!hasFills) {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PositionControlsPanel, {});
};
/* harmony default export */ const position_controls_panel = (PositionControls);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inspector-controls-tabs/settings-tab.js
/**
* Internal dependencies
*/
const SettingsTab = ({
showAdvancedControls = false
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls.Slot, {}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(position_controls_panel, {}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls.Slot, {
group: "bindings"
}), showAdvancedControls && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(advanced_controls_panel, {})
})]
});
/* harmony default export */ const settings_tab = (SettingsTab);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inspector-controls-tabs/styles-tab.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const StylesTab = ({
blockName,
clientId,
hasBlockStyles
}) => {
const borderPanelLabel = useBorderPanelLabel({
blockName
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [hasBlockStyles && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.PanelBody, {
title: (0,external_wp_i18n_namespaceObject.__)('Styles'),
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_styles, {
clientId: clientId
})
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls.Slot, {
group: "color",
label: (0,external_wp_i18n_namespaceObject.__)('Color'),
className: "color-block-support-panel__inner-wrapper"
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls.Slot, {
group: "background",
label: (0,external_wp_i18n_namespaceObject.__)('Background image')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls.Slot, {
group: "filter"
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls.Slot, {
group: "typography",
label: (0,external_wp_i18n_namespaceObject.__)('Typography')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls.Slot, {
group: "dimensions",
label: (0,external_wp_i18n_namespaceObject.__)('Dimensions')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls.Slot, {
group: "border",
label: borderPanelLabel
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls.Slot, {
group: "styles"
})]
});
};
/* harmony default export */ const styles_tab = (StylesTab);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inspector-controls-tabs/use-is-list-view-tab-disabled.js
// List view tab restricts the blocks that may render to it via the
// allowlist below.
const allowlist = ['core/navigation'];
const useIsListViewTabDisabled = blockName => {
return !allowlist.includes(blockName);
};
/* harmony default export */ const use_is_list_view_tab_disabled = (useIsListViewTabDisabled);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inspector-controls-tabs/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const {
Tabs: inspector_controls_tabs_Tabs
} = unlock(external_wp_components_namespaceObject.privateApis);
function InspectorControlsTabs({
blockName,
clientId,
hasBlockStyles,
tabs
}) {
const showIconLabels = (0,external_wp_data_namespaceObject.useSelect)(select => {
return select(external_wp_preferences_namespaceObject.store).get('core', 'showIconLabels');
}, []);
// The tabs panel will mount before fills are rendered to the list view
// slot. This means the list view tab isn't initially included in the
// available tabs so the panel defaults selection to the settings tab
// which at the time is the first tab. This check allows blocks known to
// include the list view tab to set it as the tab selected by default.
const initialTabName = !use_is_list_view_tab_disabled(blockName) ? TAB_LIST_VIEW.name : undefined;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-block-inspector__tabs",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(inspector_controls_tabs_Tabs, {
defaultTabId: initialTabName,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls_tabs_Tabs.TabList, {
children: tabs.map(tab => showIconLabels ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls_tabs_Tabs.Tab, {
tabId: tab.name,
className: tab.className,
children: tab.title
}, tab.name) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Tooltip, {
text: tab.title,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls_tabs_Tabs.Tab, {
tabId: tab.name,
className: tab.className,
"aria-label": tab.title,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Icon, {
icon: tab.icon
})
})
}, tab.name))
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls_tabs_Tabs.TabPanel, {
tabId: TAB_SETTINGS.name,
focusable: false,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(settings_tab, {
showAdvancedControls: !!blockName
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls_tabs_Tabs.TabPanel, {
tabId: TAB_STYLES.name,
focusable: false,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_tab, {
blockName: blockName,
clientId: clientId,
hasBlockStyles: hasBlockStyles
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls_tabs_Tabs.TabPanel, {
tabId: TAB_LIST_VIEW.name,
focusable: false,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls.Slot, {
group: "list"
})
})]
}, clientId)
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inspector-controls-tabs/use-inspector-controls-tabs.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const use_inspector_controls_tabs_EMPTY_ARRAY = [];
function getShowTabs(blockName, tabSettings = {}) {
// Block specific setting takes precedence over generic default.
if (tabSettings[blockName] !== undefined) {
return tabSettings[blockName];
}
// Use generic default if set over the Gutenberg experiment option.
if (tabSettings.default !== undefined) {
return tabSettings.default;
}
return true;
}
function useInspectorControlsTabs(blockName) {
const tabs = [];
const {
bindings: bindingsGroup,
border: borderGroup,
color: colorGroup,
default: defaultGroup,
dimensions: dimensionsGroup,
list: listGroup,
position: positionGroup,
styles: stylesGroup,
typography: typographyGroup,
effects: effectsGroup
} = inspector_controls_groups;
// List View Tab: If there are any fills for the list group add that tab.
const listViewDisabled = use_is_list_view_tab_disabled(blockName);
const listFills = (0,external_wp_components_namespaceObject.__experimentalUseSlotFills)(listGroup.Slot.__unstableName);
const hasListFills = !listViewDisabled && !!listFills && listFills.length;
// Styles Tab: Add this tab if there are any fills for block supports
// e.g. border, color, spacing, typography, etc.
const styleFills = [...((0,external_wp_components_namespaceObject.__experimentalUseSlotFills)(borderGroup.Slot.__unstableName) || []), ...((0,external_wp_components_namespaceObject.__experimentalUseSlotFills)(colorGroup.Slot.__unstableName) || []), ...((0,external_wp_components_namespaceObject.__experimentalUseSlotFills)(dimensionsGroup.Slot.__unstableName) || []), ...((0,external_wp_components_namespaceObject.__experimentalUseSlotFills)(stylesGroup.Slot.__unstableName) || []), ...((0,external_wp_components_namespaceObject.__experimentalUseSlotFills)(typographyGroup.Slot.__unstableName) || []), ...((0,external_wp_components_namespaceObject.__experimentalUseSlotFills)(effectsGroup.Slot.__unstableName) || [])];
const hasStyleFills = styleFills.length;
// Settings Tab: If we don't have multiple tabs to display
// (i.e. both list view and styles), check only the default and position
// InspectorControls slots. If we have multiple tabs, we'll need to check
// the advanced controls slot as well to ensure they are rendered.
const advancedFills = [...((0,external_wp_components_namespaceObject.__experimentalUseSlotFills)(InspectorAdvancedControls.slotName) || []), ...((0,external_wp_components_namespaceObject.__experimentalUseSlotFills)(bindingsGroup.Slot.__unstableName) || [])];
const settingsFills = [...((0,external_wp_components_namespaceObject.__experimentalUseSlotFills)(defaultGroup.Slot.__unstableName) || []), ...((0,external_wp_components_namespaceObject.__experimentalUseSlotFills)(positionGroup.Slot.__unstableName) || []), ...(hasListFills && hasStyleFills > 1 ? advancedFills : [])];
// Add the tabs in the order that they will default to if available.
// List View > Settings > Styles.
if (hasListFills) {
tabs.push(TAB_LIST_VIEW);
}
if (settingsFills.length) {
tabs.push(TAB_SETTINGS);
}
if (hasStyleFills) {
tabs.push(TAB_STYLES);
}
const tabSettings = (0,external_wp_data_namespaceObject.useSelect)(select => {
return select(store).getSettings().blockInspectorTabs;
}, []);
const showTabs = getShowTabs(blockName, tabSettings);
return showTabs ? tabs : use_inspector_controls_tabs_EMPTY_ARRAY;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-inspector/useBlockInspectorAnimationSettings.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function useBlockInspectorAnimationSettings(blockType) {
return (0,external_wp_data_namespaceObject.useSelect)(select => {
if (blockType) {
const globalBlockInspectorAnimationSettings = select(store).getSettings().blockInspectorAnimation;
// Get the name of the block that will allow it's children to be animated.
const animationParent = globalBlockInspectorAnimationSettings?.animationParent;
// Determine whether the animationParent block is a parent of the selected block.
const {
getSelectedBlockClientId,
getBlockParentsByBlockName
} = select(store);
const _selectedBlockClientId = getSelectedBlockClientId();
const animationParentBlockClientId = getBlockParentsByBlockName(_selectedBlockClientId, animationParent, true)[0];
// If the selected block is not a child of the animationParent block,
// and not an animationParent block itself, don't animate.
if (!animationParentBlockClientId && blockType.name !== animationParent) {
return null;
}
return globalBlockInspectorAnimationSettings?.[blockType.name];
}
return null;
}, [blockType]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-info-slot-fill/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const {
createPrivateSlotFill
} = unlock(external_wp_components_namespaceObject.privateApis);
const {
Fill: block_info_slot_fill_Fill,
Slot: block_info_slot_fill_Slot
} = createPrivateSlotFill('BlockInformation');
const BlockInfo = props => {
const context = useBlockEditContext();
if (!context[mayDisplayControlsKey]) {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_info_slot_fill_Fill, {
...props
});
};
BlockInfo.Slot = props => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_info_slot_fill_Slot, {
...props
});
/* harmony default export */ const block_info_slot_fill = (BlockInfo);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-quick-navigation/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockQuickNavigation({
clientIds,
onSelect
}) {
if (!clientIds.length) {
return null;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalVStack, {
spacing: 1,
children: clientIds.map(clientId => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockQuickNavigationItem, {
onSelect: onSelect,
clientId: clientId
}, clientId))
});
}
function BlockQuickNavigationItem({
clientId,
onSelect
}) {
const blockInformation = useBlockDisplayInformation(clientId);
const blockTitle = useBlockDisplayTitle({
clientId,
context: 'list-view'
});
const {
isSelected
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
isBlockSelected,
hasSelectedInnerBlock
} = select(store);
return {
isSelected: isBlockSelected(clientId) || hasSelectedInnerBlock(clientId, /* deep: */true)
};
}, [clientId]);
const {
selectBlock
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button
// TODO: Switch to `true` (40px size) if possible
, {
__next40pxDefaultSize: false,
isPressed: isSelected,
onClick: async () => {
await selectBlock(clientId);
if (onSelect) {
onSelect(clientId);
}
},
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.Flex, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexItem, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_icon, {
icon: blockInformation?.icon
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexBlock, {
style: {
textAlign: 'left'
},
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalTruncate, {
children: blockTitle
})
})]
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-inspector/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockStylesPanel({
clientId
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.PanelBody, {
title: (0,external_wp_i18n_namespaceObject.__)('Styles'),
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_styles, {
clientId: clientId
})
});
}
function BlockInspectorLockedBlocks({
topLevelLockedBlock
}) {
const contentClientIds = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getClientIdsOfDescendants,
getBlockName,
getBlockEditingMode
} = select(store);
return getClientIdsOfDescendants(topLevelLockedBlock).filter(clientId => getBlockName(clientId) !== 'core/list-item' && getBlockEditingMode(clientId) === 'contentOnly');
}, [topLevelLockedBlock]);
const hasBlockStyles = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockName
} = select(store);
const {
getBlockStyles
} = select(external_wp_blocks_namespaceObject.store);
return !!getBlockStyles(getBlockName(topLevelLockedBlock))?.length;
}, [topLevelLockedBlock]);
const blockInformation = useBlockDisplayInformation(topLevelLockedBlock);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-block-inspector",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_card, {
...blockInformation,
className: blockInformation.isSynced && 'is-synced'
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_info_slot_fill.Slot, {}), hasBlockStyles && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockStylesPanel, {
clientId: topLevelLockedBlock
}), contentClientIds.length > 0 && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.PanelBody, {
title: (0,external_wp_i18n_namespaceObject.__)('Content'),
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockQuickNavigation, {
clientIds: contentClientIds
})
})]
});
}
const BlockInspector = ({
showNoBlockSelectedMessage = true
}) => {
const {
count,
selectedBlockName,
selectedBlockClientId,
blockType,
topLevelLockedBlock
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getSelectedBlockClientId,
getSelectedBlockCount,
getBlockName,
getContentLockingParent,
getTemplateLock
} = unlock(select(store));
const _selectedBlockClientId = getSelectedBlockClientId();
const _selectedBlockName = _selectedBlockClientId && getBlockName(_selectedBlockClientId);
const _blockType = _selectedBlockName && (0,external_wp_blocks_namespaceObject.getBlockType)(_selectedBlockName);
return {
count: getSelectedBlockCount(),
selectedBlockClientId: _selectedBlockClientId,
selectedBlockName: _selectedBlockName,
blockType: _blockType,
topLevelLockedBlock: getContentLockingParent(_selectedBlockClientId) || (getTemplateLock(_selectedBlockClientId) === 'contentOnly' || _selectedBlockName === 'core/block' ? _selectedBlockClientId : undefined)
};
}, []);
const availableTabs = useInspectorControlsTabs(blockType?.name);
const showTabs = availableTabs?.length > 1;
// The block inspector animation settings will be completely
// removed in the future to create an API which allows the block
// inspector to transition between what it
// displays based on the relationship between the selected block
// and its parent, and only enable it if the parent is controlling
// its children blocks.
const blockInspectorAnimationSettings = useBlockInspectorAnimationSettings(blockType);
const borderPanelLabel = useBorderPanelLabel({
blockName: selectedBlockName
});
if (count > 1) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-block-inspector",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MultiSelectionInspector, {}), showTabs ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InspectorControlsTabs, {
tabs: availableTabs
}) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls.Slot, {}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls.Slot, {
group: "color",
label: (0,external_wp_i18n_namespaceObject.__)('Color'),
className: "color-block-support-panel__inner-wrapper"
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls.Slot, {
group: "background",
label: (0,external_wp_i18n_namespaceObject.__)('Background image')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls.Slot, {
group: "typography",
label: (0,external_wp_i18n_namespaceObject.__)('Typography')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls.Slot, {
group: "dimensions",
label: (0,external_wp_i18n_namespaceObject.__)('Dimensions')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls.Slot, {
group: "border",
label: borderPanelLabel
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls.Slot, {
group: "styles"
})]
})]
});
}
const isSelectedBlockUnregistered = selectedBlockName === (0,external_wp_blocks_namespaceObject.getUnregisteredTypeHandlerName)();
/*
* If the selected block is of an unregistered type, avoid showing it as an actual selection
* because we want the user to focus on the unregistered block warning, not block settings.
*/
if (!blockType || !selectedBlockClientId || isSelectedBlockUnregistered) {
if (showNoBlockSelectedMessage) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
className: "block-editor-block-inspector__no-blocks",
children: (0,external_wp_i18n_namespaceObject.__)('No block selected.')
});
}
return null;
}
if (topLevelLockedBlock) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockInspectorLockedBlocks, {
topLevelLockedBlock: topLevelLockedBlock
});
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockInspectorSingleBlockWrapper, {
animate: blockInspectorAnimationSettings,
wrapper: children => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AnimatedContainer, {
blockInspectorAnimationSettings: blockInspectorAnimationSettings,
selectedBlockClientId: selectedBlockClientId,
children: children
}),
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockInspectorSingleBlock, {
clientId: selectedBlockClientId,
blockName: blockType.name
})
});
};
const BlockInspectorSingleBlockWrapper = ({
animate,
wrapper,
children
}) => {
return animate ? wrapper(children) : children;
};
const AnimatedContainer = ({
blockInspectorAnimationSettings,
selectedBlockClientId,
children
}) => {
const animationOrigin = blockInspectorAnimationSettings && blockInspectorAnimationSettings.enterDirection === 'leftToRight' ? -50 : 50;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__unstableMotion.div, {
animate: {
x: 0,
opacity: 1,
transition: {
ease: 'easeInOut',
duration: 0.14
}
},
initial: {
x: animationOrigin,
opacity: 0
},
children: children
}, selectedBlockClientId);
};
const BlockInspectorSingleBlock = ({
clientId,
blockName
}) => {
const availableTabs = useInspectorControlsTabs(blockName);
const showTabs = availableTabs?.length > 1;
const hasBlockStyles = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockStyles
} = select(external_wp_blocks_namespaceObject.store);
const blockStyles = getBlockStyles(blockName);
return blockStyles && blockStyles.length > 0;
}, [blockName]);
const blockInformation = useBlockDisplayInformation(clientId);
const borderPanelLabel = useBorderPanelLabel({
blockName
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "block-editor-block-inspector",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_card, {
...blockInformation,
className: blockInformation.isSynced && 'is-synced'
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_variation_transforms, {
blockClientId: clientId
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(block_info_slot_fill.Slot, {}), showTabs && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InspectorControlsTabs, {
hasBlockStyles: hasBlockStyles,
clientId: clientId,
blockName: blockName,
tabs: availableTabs
}), !showTabs && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [hasBlockStyles && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockStylesPanel, {
clientId: clientId
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls.Slot, {}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls.Slot, {
group: "list"
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls.Slot, {
group: "color",
label: (0,external_wp_i18n_namespaceObject.__)('Color'),
className: "color-block-support-panel__inner-wrapper"
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls.Slot, {
group: "background",
label: (0,external_wp_i18n_namespaceObject.__)('Background image')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls.Slot, {
group: "typography",
label: (0,external_wp_i18n_namespaceObject.__)('Typography')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls.Slot, {
group: "dimensions",
label: (0,external_wp_i18n_namespaceObject.__)('Dimensions')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls.Slot, {
group: "border",
label: borderPanelLabel
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls.Slot, {
group: "styles"
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(position_controls_panel, {}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls.Slot, {
group: "bindings"
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(advanced_controls_panel, {})
})]
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SkipToSelectedBlock, {}, "back")]
});
};
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-inspector/README.md
*/
/* harmony default export */ const block_inspector = (BlockInspector);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/copy-handler/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* @deprecated
*/
const __unstableUseClipboardHandler = () => {
external_wp_deprecated_default()('__unstableUseClipboardHandler', {
alternative: 'BlockCanvas or WritingFlow',
since: '6.4',
version: '6.7'
});
return useClipboardHandler();
};
/**
* @deprecated
* @param {Object} props
*/
function CopyHandler(props) {
external_wp_deprecated_default()('CopyHandler', {
alternative: 'BlockCanvas or WritingFlow',
since: '6.4',
version: '6.7'
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
...props,
ref: useClipboardHandler()
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inserter/library.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const library_noop = () => {};
function InserterLibrary({
rootClientId,
clientId,
isAppender,
showInserterHelpPanel,
showMostUsedBlocks = false,
__experimentalInsertionIndex,
__experimentalInitialTab,
__experimentalInitialCategory,
__experimentalFilterValue,
onPatternCategorySelection,
onSelect = library_noop,
shouldFocusBlock = false,
onClose
}, ref) {
const {
destinationRootClientId
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
getBlockRootClientId
} = select(store);
const _rootClientId = rootClientId || getBlockRootClientId(clientId) || undefined;
return {
destinationRootClientId: _rootClientId
};
}, [clientId, rootClientId]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PrivateInserterMenu, {
onSelect: onSelect,
rootClientId: destinationRootClientId,
clientId: clientId,
isAppender: isAppender,
showInserterHelpPanel: showInserterHelpPanel,
showMostUsedBlocks: showMostUsedBlocks,
__experimentalInsertionIndex: __experimentalInsertionIndex,
__experimentalFilterValue: __experimentalFilterValue,
onPatternCategorySelection: onPatternCategorySelection,
__experimentalInitialTab: __experimentalInitialTab,
__experimentalInitialCategory: __experimentalInitialCategory,
shouldFocusBlock: shouldFocusBlock,
ref: ref,
onClose: onClose
});
}
const PrivateInserterLibrary = (0,external_wp_element_namespaceObject.forwardRef)(InserterLibrary);
function PublicInserterLibrary(props, ref) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PrivateInserterLibrary, {
...props,
onPatternCategorySelection: undefined,
ref: ref
});
}
/* harmony default export */ const library = ((0,external_wp_element_namespaceObject.forwardRef)(PublicInserterLibrary));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/selection-scroll-into-view/index.js
/**
* WordPress dependencies
*/
/**
* Scrolls the multi block selection end into view if not in view already. This
* is important to do after selection by keyboard.
*
* @deprecated
*/
function MultiSelectScrollIntoView() {
external_wp_deprecated_default()('wp.blockEditor.MultiSelectScrollIntoView', {
hint: 'This behaviour is now built-in.',
since: '5.8'
});
return null;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/typewriter/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const isIE = window.navigator.userAgent.indexOf('Trident') !== -1;
const arrowKeyCodes = new Set([external_wp_keycodes_namespaceObject.UP, external_wp_keycodes_namespaceObject.DOWN, external_wp_keycodes_namespaceObject.LEFT, external_wp_keycodes_namespaceObject.RIGHT]);
const initialTriggerPercentage = 0.75;
function useTypewriter() {
const hasSelectedBlock = (0,external_wp_data_namespaceObject.useSelect)(select => select(store).hasSelectedBlock(), []);
return (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
if (!hasSelectedBlock) {
return;
}
const {
ownerDocument
} = node;
const {
defaultView
} = ownerDocument;
let scrollResizeRafId;
let onKeyDownRafId;
let caretRect;
function onScrollResize() {
if (scrollResizeRafId) {
return;
}
scrollResizeRafId = defaultView.requestAnimationFrame(() => {
computeCaretRectangle();
scrollResizeRafId = null;
});
}
function onKeyDown(event) {
// Ensure the any remaining request is cancelled.
if (onKeyDownRafId) {
defaultView.cancelAnimationFrame(onKeyDownRafId);
}
// Use an animation frame for a smooth result.
onKeyDownRafId = defaultView.requestAnimationFrame(() => {
maintainCaretPosition(event);
onKeyDownRafId = null;
});
}
/**
* Maintains the scroll position after a selection change caused by a
* keyboard event.
*
* @param {KeyboardEvent} event Keyboard event.
*/
function maintainCaretPosition({
keyCode
}) {
if (!isSelectionEligibleForScroll()) {
return;
}
const currentCaretRect = (0,external_wp_dom_namespaceObject.computeCaretRect)(defaultView);
if (!currentCaretRect) {
return;
}
// If for some reason there is no position set to be scrolled to, let
// this be the position to be scrolled to in the future.
if (!caretRect) {
caretRect = currentCaretRect;
return;
}
// Even though enabling the typewriter effect for arrow keys results in
// a pleasant experience, it may not be the case for everyone, so, for
// now, let's disable it.
if (arrowKeyCodes.has(keyCode)) {
// Reset the caret position to maintain.
caretRect = currentCaretRect;
return;
}
const diff = currentCaretRect.top - caretRect.top;
if (diff === 0) {
return;
}
const scrollContainer = (0,external_wp_dom_namespaceObject.getScrollContainer)(node);
// The page must be scrollable.
if (!scrollContainer) {
return;
}
const windowScroll = scrollContainer === ownerDocument.body || scrollContainer === ownerDocument.documentElement;
const scrollY = windowScroll ? defaultView.scrollY : scrollContainer.scrollTop;
const scrollContainerY = windowScroll ? 0 : scrollContainer.getBoundingClientRect().top;
const relativeScrollPosition = windowScroll ? caretRect.top / defaultView.innerHeight : (caretRect.top - scrollContainerY) / (defaultView.innerHeight - scrollContainerY);
// If the scroll position is at the start, the active editable element
// is the last one, and the caret is positioned within the initial
// trigger percentage of the page, do not scroll the page.
// The typewriter effect should not kick in until an empty page has been
// filled with the initial trigger percentage or the user scrolls
// intentionally down.
if (scrollY === 0 && relativeScrollPosition < initialTriggerPercentage && isLastEditableNode()) {
// Reset the caret position to maintain.
caretRect = currentCaretRect;
return;
}
const scrollContainerHeight = windowScroll ? defaultView.innerHeight : scrollContainer.clientHeight;
// Abort if the target scroll position would scroll the caret out of
// view.
if (
// The caret is under the lower fold.
caretRect.top + caretRect.height > scrollContainerY + scrollContainerHeight ||
// The caret is above the upper fold.
caretRect.top < scrollContainerY) {
// Reset the caret position to maintain.
caretRect = currentCaretRect;
return;
}
if (windowScroll) {
defaultView.scrollBy(0, diff);
} else {
scrollContainer.scrollTop += diff;
}
}
/**
* Adds a `selectionchange` listener to reset the scroll position to be
* maintained.
*/
function addSelectionChangeListener() {
ownerDocument.addEventListener('selectionchange', computeCaretRectOnSelectionChange);
}
/**
* Resets the scroll position to be maintained during a `selectionchange`
* event. Also removes the listener, so it acts as a one-time listener.
*/
function computeCaretRectOnSelectionChange() {
ownerDocument.removeEventListener('selectionchange', computeCaretRectOnSelectionChange);
computeCaretRectangle();
}
/**
* Resets the scroll position to be maintained.
*/
function computeCaretRectangle() {
if (isSelectionEligibleForScroll()) {
caretRect = (0,external_wp_dom_namespaceObject.computeCaretRect)(defaultView);
}
}
/**
* Checks if the current situation is elegible for scroll:
* - There should be one and only one block selected.
* - The component must contain the selection.
* - The active element must be contenteditable.
*/
function isSelectionEligibleForScroll() {
return node.contains(ownerDocument.activeElement) && ownerDocument.activeElement.isContentEditable;
}
function isLastEditableNode() {
const editableNodes = node.querySelectorAll('[contenteditable="true"]');
const lastEditableNode = editableNodes[editableNodes.length - 1];
return lastEditableNode === ownerDocument.activeElement;
}
// When the user scrolls or resizes, the scroll position should be
// reset.
defaultView.addEventListener('scroll', onScrollResize, true);
defaultView.addEventListener('resize', onScrollResize, true);
node.addEventListener('keydown', onKeyDown);
node.addEventListener('keyup', maintainCaretPosition);
node.addEventListener('mousedown', addSelectionChangeListener);
node.addEventListener('touchstart', addSelectionChangeListener);
return () => {
defaultView.removeEventListener('scroll', onScrollResize, true);
defaultView.removeEventListener('resize', onScrollResize, true);
node.removeEventListener('keydown', onKeyDown);
node.removeEventListener('keyup', maintainCaretPosition);
node.removeEventListener('mousedown', addSelectionChangeListener);
node.removeEventListener('touchstart', addSelectionChangeListener);
ownerDocument.removeEventListener('selectionchange', computeCaretRectOnSelectionChange);
defaultView.cancelAnimationFrame(scrollResizeRafId);
defaultView.cancelAnimationFrame(onKeyDownRafId);
};
}, [hasSelectedBlock]);
}
function Typewriter({
children
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
ref: useTypewriter(),
className: "block-editor__typewriter",
children: children
});
}
/**
* The exported component. The implementation of Typewriter faced technical
* challenges in Internet Explorer, and is simply skipped, rendering the given
* props children instead.
*
* @type {Component}
*/
const TypewriterOrIEBypass = isIE ? props => props.children : Typewriter;
/**
* Ensures that the text selection keeps the same vertical distance from the
* viewport during keyboard events within this component. The vertical distance
* can vary. It is the last clicked or scrolled to position.
*/
/* harmony default export */ const typewriter = (TypewriterOrIEBypass);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/recursion-provider/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const RenderedRefsContext = (0,external_wp_element_namespaceObject.createContext)({});
/**
* Immutably adds an unique identifier to a set scoped for a given block type.
*
* @param {Object} renderedBlocks Rendered blocks grouped by block name
* @param {string} blockName Name of the block.
* @param {*} uniqueId Any value that acts as a unique identifier for a block instance.
*
* @return {Object} The list of rendered blocks grouped by block name.
*/
function addToBlockType(renderedBlocks, blockName, uniqueId) {
const result = {
...renderedBlocks,
[blockName]: renderedBlocks[blockName] ? new Set(renderedBlocks[blockName]) : new Set()
};
result[blockName].add(uniqueId);
return result;
}
/**
* A React context provider for use with the `useHasRecursion` hook to prevent recursive
* renders.
*
* Wrap block content with this provider and provide the same `uniqueId` prop as used
* with `useHasRecursion`.
*
* @param {Object} props
* @param {*} props.uniqueId Any value that acts as a unique identifier for a block instance.
* @param {string} props.blockName Optional block name.
* @param {JSX.Element} props.children React children.
*
* @return {JSX.Element} A React element.
*/
function RecursionProvider({
children,
uniqueId,
blockName = ''
}) {
const previouslyRenderedBlocks = (0,external_wp_element_namespaceObject.useContext)(RenderedRefsContext);
const {
name
} = useBlockEditContext();
blockName = blockName || name;
const newRenderedBlocks = (0,external_wp_element_namespaceObject.useMemo)(() => addToBlockType(previouslyRenderedBlocks, blockName, uniqueId), [previouslyRenderedBlocks, blockName, uniqueId]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RenderedRefsContext.Provider, {
value: newRenderedBlocks,
children: children
});
}
/**
* A React hook for keeping track of blocks previously rendered up in the block
* tree. Blocks susceptible to recursion can use this hook in their `Edit`
* function to prevent said recursion.
*
* Use this with the `RecursionProvider` component, using the same `uniqueId` value
* for both the hook and the provider.
*
* @param {*} uniqueId Any value that acts as a unique identifier for a block instance.
* @param {string} blockName Optional block name.
*
* @return {boolean} A boolean describing whether the provided id has already been rendered.
*/
function useHasRecursion(uniqueId, blockName = '') {
const previouslyRenderedBlocks = (0,external_wp_element_namespaceObject.useContext)(RenderedRefsContext);
const {
name
} = useBlockEditContext();
blockName = blockName || name;
return Boolean(previouslyRenderedBlocks[blockName]?.has(uniqueId));
}
const DeprecatedExperimentalRecursionProvider = props => {
external_wp_deprecated_default()('wp.blockEditor.__experimentalRecursionProvider', {
since: '6.5',
alternative: 'wp.blockEditor.RecursionProvider'
});
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RecursionProvider, {
...props
});
};
const DeprecatedExperimentalUseHasRecursion = (...args) => {
external_wp_deprecated_default()('wp.blockEditor.__experimentalUseHasRecursion', {
since: '6.5',
alternative: 'wp.blockEditor.useHasRecursion'
});
return useHasRecursion(...args);
};
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/inspector-popover-header/index.js
/**
* WordPress dependencies
*/
function InspectorPopoverHeader({
title,
help,
actions = [],
onClose
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalVStack, {
className: "block-editor-inspector-popover-header",
spacing: 4,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalHStack, {
alignment: "center",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalHeading, {
className: "block-editor-inspector-popover-header__heading",
level: 2,
size: 13,
children: title
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalSpacer, {}), actions.map(({
label,
icon,
onClick
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
size: "small",
className: "block-editor-inspector-popover-header__action",
label: label,
icon: icon,
variant: !icon && 'tertiary',
onClick: onClick,
children: !icon && label
}, label)), onClose && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
size: "small",
className: "block-editor-inspector-popover-header__action",
label: (0,external_wp_i18n_namespaceObject.__)('Close'),
icon: close_small,
onClick: onClose
})]
}), help && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalText, {
children: help
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/publish-date-time-picker/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function PublishDateTimePicker({
onClose,
onChange,
showPopoverHeaderActions,
isCompact,
currentDate,
...additionalProps
}, ref) {
const datePickerProps = {
startOfWeek: (0,external_wp_date_namespaceObject.getSettings)().l10n.startOfWeek,
onChange,
currentDate: isCompact ? undefined : currentDate,
currentTime: isCompact ? currentDate : undefined,
...additionalProps
};
const DatePickerComponent = isCompact ? external_wp_components_namespaceObject.TimePicker : external_wp_components_namespaceObject.DateTimePicker;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
ref: ref,
className: "block-editor-publish-date-time-picker",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InspectorPopoverHeader, {
title: (0,external_wp_i18n_namespaceObject.__)('Publish'),
actions: showPopoverHeaderActions ? [{
label: (0,external_wp_i18n_namespaceObject.__)('Now'),
onClick: () => onChange?.(null)
}] : undefined,
onClose: onClose
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DatePickerComponent, {
...datePickerProps
})]
});
}
const PrivatePublishDateTimePicker = (0,external_wp_element_namespaceObject.forwardRef)(PublishDateTimePicker);
function PublicPublishDateTimePicker(props, ref) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PrivatePublishDateTimePicker, {
...props,
showPopoverHeaderActions: true,
isCompact: false,
ref: ref
});
}
/* harmony default export */ const publish_date_time_picker = ((0,external_wp_element_namespaceObject.forwardRef)(PublicPublishDateTimePicker));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/index.js
/*
* Block Creation Components
*/
/*
* Content Related Components
*/
/*
* State Related Components
*/
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/elements/index.js
const elements_ELEMENT_CLASS_NAMES = {
button: 'wp-element-button',
caption: 'wp-element-caption'
};
const __experimentalGetElementClassName = element => {
return elements_ELEMENT_CLASS_NAMES[element] ? elements_ELEMENT_CLASS_NAMES[element] : '';
};
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/utils/get-px-from-css-unit.js
/**
* This function was accidentally exposed for mobile/native usage.
*
* @deprecated
*
* @return {string} Empty string.
*/
/* harmony default export */ const get_px_from_css_unit = (() => '');
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/utils/index.js
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/global-styles/image-settings-panel.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function useHasImageSettingsPanel(name, value, inheritedValue) {
// Note: If lightbox `value` exists, that means it was
// defined via the the Global Styles UI and will NOT
// be a boolean value or contain the `allowEditing` property,
// so we should show the settings panel in those cases.
return name === 'core/image' && inheritedValue?.lightbox?.allowEditing || !!value?.lightbox;
}
function ImageSettingsPanel({
onChange,
value,
inheritedValue,
panelId
}) {
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
const resetLightbox = () => {
onChange(undefined);
};
const onChangeLightbox = newSetting => {
onChange({
enabled: newSetting
});
};
let lightboxChecked = false;
if (inheritedValue?.lightbox?.enabled) {
lightboxChecked = inheritedValue.lightbox.enabled;
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanel, {
label: (0,external_wp_i18n_namespaceObject._x)('Settings', 'Image settings'),
resetAll: resetLightbox,
panelId: panelId,
dropdownMenuProps: dropdownMenuProps,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanelItem
// We use the `userSettings` prop instead of `settings`, because `settings`
// contains the core/theme values for the lightbox and we want to show the
// "RESET" button ONLY when the user has explicitly set a value in the
// Global Styles.
, {
hasValue: () => !!value?.lightbox,
label: (0,external_wp_i18n_namespaceObject.__)('Expand on click'),
onDeselect: resetLightbox,
isShownByDefault: true,
panelId: panelId,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToggleControl, {
__nextHasNoMarginBottom: true,
label: (0,external_wp_i18n_namespaceObject.__)('Expand on click'),
checked: lightboxChecked,
onChange: onChangeLightbox
})
})
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/global-styles/advanced-panel.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function AdvancedPanel({
value,
onChange,
inheritedValue = value
}) {
// Custom CSS
const [cssError, setCSSError] = (0,external_wp_element_namespaceObject.useState)(null);
const customCSS = inheritedValue?.css;
function handleOnChange(newValue) {
onChange({
...value,
css: newValue
});
if (cssError) {
// Check if the new value is valid CSS, and pass a wrapping selector
// to ensure that `transformStyles` validates the CSS. Note that the
// wrapping selector here is not used in the actual output of any styles.
const [transformed] = transform_styles([{
css: newValue
}], '.for-validation-only');
if (transformed) {
setCSSError(null);
}
}
}
function handleOnBlur(event) {
if (!event?.target?.value) {
setCSSError(null);
return;
}
// Check if the new value is valid CSS, and pass a wrapping selector
// to ensure that `transformStyles` validates the CSS. Note that the
// wrapping selector here is not used in the actual output of any styles.
const [transformed] = transform_styles([{
css: event.target.value
}], '.for-validation-only');
setCSSError(transformed === null ? (0,external_wp_i18n_namespaceObject.__)('There is an error with your CSS structure.') : null);
}
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalVStack, {
spacing: 3,
children: [cssError && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Notice, {
status: "error",
onRemove: () => setCSSError(null),
children: cssError
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.TextareaControl, {
label: (0,external_wp_i18n_namespaceObject.__)('Additional CSS'),
__nextHasNoMarginBottom: true,
value: customCSS,
onChange: newValue => handleOnChange(newValue),
onBlur: handleOnBlur,
className: "block-editor-global-styles-advanced-panel__custom-css-input",
spellCheck: false
})]
});
}
;// CONCATENATED MODULE: ./node_modules/memize/dist/index.js
/**
* Memize options object.
*
* @typedef MemizeOptions
*
* @property {number} [maxSize] Maximum size of the cache.
*/
/**
* Internal cache entry.
*
* @typedef MemizeCacheNode
*
* @property {?MemizeCacheNode|undefined} [prev] Previous node.
* @property {?MemizeCacheNode|undefined} [next] Next node.
* @property {Array<*>} args Function arguments for cache
* entry.
* @property {*} val Function result.
*/
/**
* Properties of the enhanced function for controlling cache.
*
* @typedef MemizeMemoizedFunction
*
* @property {()=>void} clear Clear the cache.
*/
/**
* Accepts a function to be memoized, and returns a new memoized function, with
* optional options.
*
* @template {(...args: any[]) => any} F
*
* @param {F} fn Function to memoize.
* @param {MemizeOptions} [options] Options object.
*
* @return {((...args: Parameters<F>) => ReturnType<F>) & MemizeMemoizedFunction} Memoized function.
*/
function memize(fn, options) {
var size = 0;
/** @type {?MemizeCacheNode|undefined} */
var head;
/** @type {?MemizeCacheNode|undefined} */
var tail;
options = options || {};
function memoized(/* ...args */) {
var node = head,
len = arguments.length,
args,
i;
searchCache: while (node) {
// Perform a shallow equality test to confirm that whether the node
// under test is a candidate for the arguments passed. Two arrays
// are shallowly equal if their length matches and each entry is
// strictly equal between the two sets. Avoid abstracting to a
// function which could incur an arguments leaking deoptimization.
// Check whether node arguments match arguments length
if (node.args.length !== arguments.length) {
node = node.next;
continue;
}
// Check whether node arguments match arguments values
for (i = 0; i < len; i++) {
if (node.args[i] !== arguments[i]) {
node = node.next;
continue searchCache;
}
}
// At this point we can assume we've found a match
// Surface matched node to head if not already
if (node !== head) {
// As tail, shift to previous. Must only shift if not also
// head, since if both head and tail, there is no previous.
if (node === tail) {
tail = node.prev;
}
// Adjust siblings to point to each other. If node was tail,
// this also handles new tail's empty `next` assignment.
/** @type {MemizeCacheNode} */ (node.prev).next = node.next;
if (node.next) {
node.next.prev = node.prev;
}
node.next = head;
node.prev = null;
/** @type {MemizeCacheNode} */ (head).prev = node;
head = node;
}
// Return immediately
return node.val;
}
// No cached value found. Continue to insertion phase:
// Create a copy of arguments (avoid leaking deoptimization)
args = new Array(len);
for (i = 0; i < len; i++) {
args[i] = arguments[i];
}
node = {
args: args,
// Generate the result from original function
val: fn.apply(null, args),
};
// Don't need to check whether node is already head, since it would
// have been returned above already if it was
// Shift existing head down list
if (head) {
head.prev = node;
node.next = head;
} else {
// If no head, follows that there's no tail (at initial or reset)
tail = node;
}
// Trim tail if we're reached max size and are pending cache insertion
if (size === /** @type {MemizeOptions} */ (options).maxSize) {
tail = /** @type {MemizeCacheNode} */ (tail).prev;
/** @type {MemizeCacheNode} */ (tail).next = null;
} else {
size++;
}
head = node;
return node.val;
}
memoized.clear = function () {
head = null;
tail = null;
size = 0;
};
// Ignore reason: There's not a clear solution to create an intersection of
// the function with additional properties, where the goal is to retain the
// function signature of the incoming argument and add control properties
// on the return value.
// @ts-ignore
return memoized;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/global-styles/get-global-styles-changes.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
const globalStylesChangesCache = new Map();
const get_global_styles_changes_EMPTY_ARRAY = [];
const translationMap = {
caption: (0,external_wp_i18n_namespaceObject.__)('Caption'),
link: (0,external_wp_i18n_namespaceObject.__)('Link'),
button: (0,external_wp_i18n_namespaceObject.__)('Button'),
heading: (0,external_wp_i18n_namespaceObject.__)('Heading'),
h1: (0,external_wp_i18n_namespaceObject.__)('H1'),
h2: (0,external_wp_i18n_namespaceObject.__)('H2'),
h3: (0,external_wp_i18n_namespaceObject.__)('H3'),
h4: (0,external_wp_i18n_namespaceObject.__)('H4'),
h5: (0,external_wp_i18n_namespaceObject.__)('H5'),
h6: (0,external_wp_i18n_namespaceObject.__)('H6'),
'settings.color': (0,external_wp_i18n_namespaceObject.__)('Color'),
'settings.typography': (0,external_wp_i18n_namespaceObject.__)('Typography'),
'styles.color': (0,external_wp_i18n_namespaceObject.__)('Colors'),
'styles.spacing': (0,external_wp_i18n_namespaceObject.__)('Spacing'),
'styles.background': (0,external_wp_i18n_namespaceObject.__)('Background'),
'styles.typography': (0,external_wp_i18n_namespaceObject.__)('Typography')
};
const getBlockNames = memize(() => (0,external_wp_blocks_namespaceObject.getBlockTypes)().reduce((accumulator, {
name,
title
}) => {
accumulator[name] = title;
return accumulator;
}, {}));
const isObject = obj => obj !== null && typeof obj === 'object';
/**
* Get the translation for a given global styles key.
* @param {string} key A key representing a path to a global style property or setting.
* @return {string|undefined} A translated key or undefined if no translation exists.
*/
function getTranslation(key) {
if (translationMap[key]) {
return translationMap[key];
}
const keyArray = key.split('.');
if (keyArray?.[0] === 'blocks') {
const blockName = getBlockNames()?.[keyArray[1]];
return blockName || keyArray[1];
}
if (keyArray?.[0] === 'elements') {
return translationMap[keyArray[1]] || keyArray[1];
}
return undefined;
}
/**
* A deep comparison of two objects, optimized for comparing global styles.
* @param {Object} changedObject The changed object to compare.
* @param {Object} originalObject The original object to compare against.
* @param {string} parentPath A key/value pair object of block names and their rendered titles.
* @return {string[]} An array of paths whose values have changed.
*/
function deepCompare(changedObject, originalObject, parentPath = '') {
// We have two non-object values to compare.
if (!isObject(changedObject) && !isObject(originalObject)) {
/*
* Only return a path if the value has changed.
* And then only the path name up to 2 levels deep.
*/
return changedObject !== originalObject ? parentPath.split('.').slice(0, 2).join('.') : undefined;
}
// Enable comparison when an object doesn't have a corresponding property to compare.
changedObject = isObject(changedObject) ? changedObject : {};
originalObject = isObject(originalObject) ? originalObject : {};
const allKeys = new Set([...Object.keys(changedObject), ...Object.keys(originalObject)]);
let diffs = [];
for (const key of allKeys) {
const path = parentPath ? parentPath + '.' + key : key;
const changedPath = deepCompare(changedObject[key], originalObject[key], path);
if (changedPath) {
diffs = diffs.concat(changedPath);
}
}
return diffs;
}
/**
* Returns an array of translated summarized global styles changes.
* Results are cached using a Map() key of `JSON.stringify( { next, previous } )`.
*
* @param {Object} next The changed object to compare.
* @param {Object} previous The original object to compare against.
* @return {Array[]} A 2-dimensional array of tuples: [ "group", "translated change" ].
*/
function getGlobalStylesChangelist(next, previous) {
const cacheKey = JSON.stringify({
next,
previous
});
if (globalStylesChangesCache.has(cacheKey)) {
return globalStylesChangesCache.get(cacheKey);
}
/*
* Compare the two changesets with normalized keys.
* The order of these keys determines the order in which
* they'll appear in the results.
*/
const changedValueTree = deepCompare({
styles: {
background: next?.styles?.background,
color: next?.styles?.color,
typography: next?.styles?.typography,
spacing: next?.styles?.spacing
},
blocks: next?.styles?.blocks,
elements: next?.styles?.elements,
settings: next?.settings
}, {
styles: {
background: previous?.styles?.background,
color: previous?.styles?.color,
typography: previous?.styles?.typography,
spacing: previous?.styles?.spacing
},
blocks: previous?.styles?.blocks,
elements: previous?.styles?.elements,
settings: previous?.settings
});
if (!changedValueTree.length) {
globalStylesChangesCache.set(cacheKey, get_global_styles_changes_EMPTY_ARRAY);
return get_global_styles_changes_EMPTY_ARRAY;
}
// Remove duplicate results.
const result = [...new Set(changedValueTree)]
/*
* Translate the keys.
* Remove empty translations.
*/.reduce((acc, curr) => {
const translation = getTranslation(curr);
if (translation) {
acc.push([curr.split('.')[0], translation]);
}
return acc;
}, []);
globalStylesChangesCache.set(cacheKey, result);
return result;
}
/**
* From a getGlobalStylesChangelist() result, returns an array of translated global styles changes, grouped by type.
* The types are 'blocks', 'elements', 'settings', and 'styles'.
*
* @param {Object} next The changed object to compare.
* @param {Object} previous The original object to compare against.
* @param {{maxResults:number}} options Options. maxResults: results to return before truncating.
* @return {string[]} An array of translated changes.
*/
function getGlobalStylesChanges(next, previous, options = {}) {
let changeList = getGlobalStylesChangelist(next, previous);
const changesLength = changeList.length;
const {
maxResults
} = options;
if (changesLength) {
// Truncate to `n` results if necessary.
if (!!maxResults && changesLength > maxResults) {
changeList = changeList.slice(0, maxResults);
}
return Object.entries(changeList.reduce((acc, curr) => {
const group = acc[curr[0]] || [];
if (!group.includes(curr[1])) {
acc[curr[0]] = [...group, curr[1]];
}
return acc;
}, {})).map(([key, changeValues]) => {
const changeValuesLength = changeValues.length;
const joinedChangesValue = changeValues.join( /* translators: Used between list items, there is a space after the comma. */
(0,external_wp_i18n_namespaceObject.__)(', ') // eslint-disable-line @wordpress/i18n-no-flanking-whitespace
);
switch (key) {
case 'blocks':
{
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: %s: a list of block names separated by a comma.
(0,external_wp_i18n_namespaceObject._n)('%s block.', '%s blocks.', changeValuesLength), joinedChangesValue);
}
case 'elements':
{
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: %s: a list of element names separated by a comma.
(0,external_wp_i18n_namespaceObject._n)('%s element.', '%s elements.', changeValuesLength), joinedChangesValue);
}
case 'settings':
{
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: %s: a list of theme.json setting labels separated by a comma.
(0,external_wp_i18n_namespaceObject.__)('%s settings.'), joinedChangesValue);
}
case 'styles':
{
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: %s: a list of theme.json top-level styles labels separated by a comma.
(0,external_wp_i18n_namespaceObject.__)('%s styles.'), joinedChangesValue);
}
default:
{
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: %s: a list of global styles changes separated by a comma.
(0,external_wp_i18n_namespaceObject.__)('%s.'), joinedChangesValue);
}
}
});
}
return get_global_styles_changes_EMPTY_ARRAY;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/global-styles/index.js
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/rich-text/get-rich-text-values.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/*
* This function is similar to `@wordpress/element`'s `renderToString` function,
* except that it does not render the elements to a string, but instead collects
* the values of all rich text `Content` elements.
*/
function addValuesForElement(element, values, innerBlocks) {
if (null === element || undefined === element || false === element) {
return;
}
if (Array.isArray(element)) {
return addValuesForElements(element, values, innerBlocks);
}
switch (typeof element) {
case 'string':
case 'number':
return;
}
const {
type,
props
} = element;
switch (type) {
case external_wp_element_namespaceObject.StrictMode:
case external_wp_element_namespaceObject.Fragment:
return addValuesForElements(props.children, values, innerBlocks);
case external_wp_element_namespaceObject.RawHTML:
return;
case inner_blocks.Content:
return addValuesForBlocks(values, innerBlocks);
case Content:
values.push(props.value);
return;
}
switch (typeof type) {
case 'string':
if (typeof props.children !== 'undefined') {
return addValuesForElements(props.children, values, innerBlocks);
}
return;
case 'function':
const el = type.prototype && typeof type.prototype.render === 'function' ? new type(props).render() : type(props);
return addValuesForElement(el, values, innerBlocks);
}
}
function addValuesForElements(children, ...args) {
children = Array.isArray(children) ? children : [children];
for (let i = 0; i < children.length; i++) {
addValuesForElement(children[i], ...args);
}
}
function addValuesForBlocks(values, blocks) {
for (let i = 0; i < blocks.length; i++) {
const {
name,
attributes,
innerBlocks
} = blocks[i];
const saveElement = (0,external_wp_blocks_namespaceObject.getSaveElement)(name, attributes,
/*#__PURE__*/
// Instead of letting save elements use `useInnerBlocksProps.save`,
// force them to use InnerBlocks.Content instead so we can intercept
// a single component.
(0,external_ReactJSXRuntime_namespaceObject.jsx)(inner_blocks.Content, {}));
addValuesForElement(saveElement, values, innerBlocks);
}
}
function getRichTextValues(blocks = []) {
external_wp_blocks_namespaceObject.__unstableGetBlockProps.skipFilters = true;
const values = [];
addValuesForBlocks(values, blocks);
external_wp_blocks_namespaceObject.__unstableGetBlockProps.skipFilters = false;
return values.map(value => value instanceof external_wp_richText_namespaceObject.RichTextData ? value : external_wp_richText_namespaceObject.RichTextData.fromHTMLString(value));
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/resizable-box-popover/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function ResizableBoxPopover({
clientId,
resizableBoxProps,
...props
}) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(cover, {
clientId: clientId,
__unstablePopoverSlot: "block-toolbar",
...props,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ResizableBox, {
...resizableBoxProps
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/block-removal-warning-modal/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockRemovalWarningModal({
rules
}) {
const {
clientIds,
selectPrevious,
message
} = (0,external_wp_data_namespaceObject.useSelect)(select => unlock(select(store)).getRemovalPromptData());
const {
clearBlockRemovalPrompt,
setBlockRemovalRules,
privateRemoveBlocks
} = unlock((0,external_wp_data_namespaceObject.useDispatch)(store));
// Load block removal rules, simultaneously signalling that the block
// removal prompt is in place.
(0,external_wp_element_namespaceObject.useEffect)(() => {
setBlockRemovalRules(rules);
return () => {
setBlockRemovalRules();
};
}, [rules, setBlockRemovalRules]);
if (!message) {
return;
}
const onConfirmRemoval = () => {
privateRemoveBlocks(clientIds, selectPrevious, /* force */true);
clearBlockRemovalPrompt();
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.Modal, {
title: (0,external_wp_i18n_namespaceObject.__)('Be careful!'),
onRequestClose: clearBlockRemovalPrompt,
size: "medium",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("p", {
children: message
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalHStack, {
justify: "right",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
variant: "tertiary",
onClick: clearBlockRemovalPrompt,
__next40pxDefaultSize: true,
children: (0,external_wp_i18n_namespaceObject.__)('Cancel')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
variant: "primary",
onClick: onConfirmRemoval,
__next40pxDefaultSize: true,
children: (0,external_wp_i18n_namespaceObject.__)('Delete')
})]
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/dimensions-tool/scale-tool.js
/**
* WordPress dependencies
*/
/**
* @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
*/
/**
* The descriptions are purposely made generic as object-fit could be used for
* any replaced element. Provide your own set of options if you need different
* help text or labels.
*
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element
*
* @type {SelectControlProps[]}
*/
const DEFAULT_SCALE_OPTIONS = [{
value: 'fill',
label: (0,external_wp_i18n_namespaceObject._x)('Fill', 'Scale option for dimensions control'),
help: (0,external_wp_i18n_namespaceObject.__)('Fill the space by stretching the content.')
}, {
value: 'contain',
label: (0,external_wp_i18n_namespaceObject._x)('Contain', 'Scale option for dimensions control'),
help: (0,external_wp_i18n_namespaceObject.__)('Fit the content to the space without clipping.')
}, {
value: 'cover',
label: (0,external_wp_i18n_namespaceObject._x)('Cover', 'Scale option for dimensions control'),
help: (0,external_wp_i18n_namespaceObject.__)("Fill the space by clipping what doesn't fit.")
}, {
value: 'none',
label: (0,external_wp_i18n_namespaceObject._x)('None', 'Scale option for dimensions control'),
help: (0,external_wp_i18n_namespaceObject.__)('Do not adjust the sizing of the content. Content that is too large will be clipped, and content that is too small will have additional padding.')
}, {
value: 'scale-down',
label: (0,external_wp_i18n_namespaceObject._x)('Scale down', 'Scale option for dimensions control'),
help: (0,external_wp_i18n_namespaceObject.__)('Scale down the content to fit the space if it is too big. Content that is too small will have additional padding.')
}];
/**
* @callback ScaleToolPropsOnChange
* @param {string} nextValue New scale value.
* @return {void}
*/
/**
* @typedef {Object} ScaleToolProps
* @property {string} [panelId] ID of the panel that contains the controls.
* @property {string} [value] Current scale value.
* @property {ScaleToolPropsOnChange} [onChange] Callback to update the scale value.
* @property {SelectControlProps[]} [options] Scale options.
* @property {string} [defaultValue] Default scale value.
* @property {boolean} [showControl=true] Whether to show the control.
* @property {boolean} [isShownByDefault=true] Whether the tool panel is shown by default.
*/
/**
* A tool to select the CSS object-fit property for the image.
*
* @param {ScaleToolProps} props
*
* @return {import('react').ReactElement} The scale tool.
*/
function ScaleTool({
panelId,
value,
onChange,
options = DEFAULT_SCALE_OPTIONS,
defaultValue = DEFAULT_SCALE_OPTIONS[0].value,
isShownByDefault = true
}) {
// Match the CSS default so if the value is used directly in CSS it will look correct in the control.
const displayValue = value !== null && value !== void 0 ? value : 'fill';
const scaleHelp = (0,external_wp_element_namespaceObject.useMemo)(() => {
return options.reduce((acc, option) => {
acc[option.value] = option.help;
return acc;
}, {});
}, [options]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
label: (0,external_wp_i18n_namespaceObject.__)('Scale'),
isShownByDefault: isShownByDefault,
hasValue: () => displayValue !== defaultValue,
onDeselect: () => onChange(defaultValue),
panelId: panelId,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToggleGroupControl, {
__nextHasNoMarginBottom: true,
label: (0,external_wp_i18n_namespaceObject.__)('Scale'),
isBlock: true,
help: scaleHelp[displayValue],
value: displayValue,
onChange: onChange,
size: "__unstable-large",
children: options.map(option => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToggleGroupControlOption, {
...option
}, option.value))
})
});
}
;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/extends.js
function extends_extends() {
extends_extends = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return extends_extends.apply(this, arguments);
}
;// CONCATENATED MODULE: ./node_modules/@emotion/memoize/dist/emotion-memoize.esm.js
function memoize(fn) {
var cache = Object.create(null);
return function (arg) {
if (cache[arg] === undefined) cache[arg] = fn(arg);
return cache[arg];
};
}
;// CONCATENATED MODULE: ./node_modules/@emotion/styled/node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js
var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
var isPropValid = /* #__PURE__ */memoize(function (prop) {
return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
/* o */
&& prop.charCodeAt(1) === 110
/* n */
&& prop.charCodeAt(2) < 91;
}
/* Z+1 */
);
;// CONCATENATED MODULE: ./node_modules/@emotion/sheet/dist/emotion-sheet.browser.esm.js
/*
Based off glamor's StyleSheet, thanks Sunil ❤️
high performance StyleSheet for css-in-js systems
- uses multiple style tags behind the scenes for millions of rules
- uses `insertRule` for appending in production for *much* faster performance
// usage
import { StyleSheet } from '@emotion/sheet'
let styleSheet = new StyleSheet({ key: '', container: document.head })
styleSheet.insert('#box { border: 1px solid red; }')
- appends a css rule into the stylesheet
styleSheet.flush()
- empties the stylesheet of all its contents
*/
// $FlowFixMe
function sheetForTag(tag) {
if (tag.sheet) {
// $FlowFixMe
return tag.sheet;
} // this weirdness brought to you by firefox
/* istanbul ignore next */
for (var i = 0; i < document.styleSheets.length; i++) {
if (document.styleSheets[i].ownerNode === tag) {
// $FlowFixMe
return document.styleSheets[i];
}
}
}
function createStyleElement(options) {
var tag = document.createElement('style');
tag.setAttribute('data-emotion', options.key);
if (options.nonce !== undefined) {
tag.setAttribute('nonce', options.nonce);
}
tag.appendChild(document.createTextNode(''));
tag.setAttribute('data-s', '');
return tag;
}
var StyleSheet = /*#__PURE__*/function () {
// Using Node instead of HTMLElement since container may be a ShadowRoot
function StyleSheet(options) {
var _this = this;
this._insertTag = function (tag) {
var before;
if (_this.tags.length === 0) {
if (_this.insertionPoint) {
before = _this.insertionPoint.nextSibling;
} else if (_this.prepend) {
before = _this.container.firstChild;
} else {
before = _this.before;
}
} else {
before = _this.tags[_this.tags.length - 1].nextSibling;
}
_this.container.insertBefore(tag, before);
_this.tags.push(tag);
};
this.isSpeedy = options.speedy === undefined ? "production" === 'production' : options.speedy;
this.tags = [];
this.ctr = 0;
this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets
this.key = options.key;
this.container = options.container;
this.prepend = options.prepend;
this.insertionPoint = options.insertionPoint;
this.before = null;
}
var _proto = StyleSheet.prototype;
_proto.hydrate = function hydrate(nodes) {
nodes.forEach(this._insertTag);
};
_proto.insert = function insert(rule) {
// the max length is how many rules we have per style tag, it's 65000 in speedy mode
// it's 1 in dev because we insert source maps that map a single rule to a location
// and you can only have one source map per style tag
if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
this._insertTag(createStyleElement(this));
}
var tag = this.tags[this.tags.length - 1];
if (false) { var isImportRule; }
if (this.isSpeedy) {
var sheet = sheetForTag(tag);
try {
// this is the ultrafast version, works across browsers
// the big drawback is that the css won't be editable in devtools
sheet.insertRule(rule, sheet.cssRules.length);
} catch (e) {
if (false) {}
}
} else {
tag.appendChild(document.createTextNode(rule));
}
this.ctr++;
};
_proto.flush = function flush() {
// $FlowFixMe
this.tags.forEach(function (tag) {
return tag.parentNode && tag.parentNode.removeChild(tag);
});
this.tags = [];
this.ctr = 0;
if (false) {}
};
return StyleSheet;
}();
;// CONCATENATED MODULE: ./node_modules/stylis/src/Utility.js
/**
* @param {number}
* @return {number}
*/
var abs = Math.abs
/**
* @param {number}
* @return {string}
*/
var Utility_from = String.fromCharCode
/**
* @param {object}
* @return {object}
*/
var Utility_assign = Object.assign
/**
* @param {string} value
* @param {number} length
* @return {number}
*/
function hash (value, length) {
return Utility_charat(value, 0) ^ 45 ? (((((((length << 2) ^ Utility_charat(value, 0)) << 2) ^ Utility_charat(value, 1)) << 2) ^ Utility_charat(value, 2)) << 2) ^ Utility_charat(value, 3) : 0
}
/**
* @param {string} value
* @return {string}
*/
function trim (value) {
return value.trim()
}
/**
* @param {string} value
* @param {RegExp} pattern
* @return {string?}
*/
function Utility_match (value, pattern) {
return (value = pattern.exec(value)) ? value[0] : value
}
/**
* @param {string} value
* @param {(string|RegExp)} pattern
* @param {string} replacement
* @return {string}
*/
function Utility_replace (value, pattern, replacement) {
return value.replace(pattern, replacement)
}
/**
* @param {string} value
* @param {string} search
* @return {number}
*/
function indexof (value, search) {
return value.indexOf(search)
}
/**
* @param {string} value
* @param {number} index
* @return {number}
*/
function Utility_charat (value, index) {
return value.charCodeAt(index) | 0
}
/**
* @param {string} value
* @param {number} begin
* @param {number} end
* @return {string}
*/
function Utility_substr (value, begin, end) {
return value.slice(begin, end)
}
/**
* @param {string} value
* @return {number}
*/
function Utility_strlen (value) {
return value.length
}
/**
* @param {any[]} value
* @return {number}
*/
function Utility_sizeof (value) {
return value.length
}
/**
* @param {any} value
* @param {any[]} array
* @return {any}
*/
function Utility_append (value, array) {
return array.push(value), value
}
/**
* @param {string[]} array
* @param {function} callback
* @return {string}
*/
function Utility_combine (array, callback) {
return array.map(callback).join('')
}
;// CONCATENATED MODULE: ./node_modules/stylis/src/Tokenizer.js
var line = 1
var column = 1
var Tokenizer_length = 0
var Tokenizer_position = 0
var Tokenizer_character = 0
var characters = ''
/**
* @param {string} value
* @param {object | null} root
* @param {object | null} parent
* @param {string} type
* @param {string[] | string} props
* @param {object[] | string} children
* @param {number} length
*/
function node (value, root, parent, type, props, children, length) {
return {value: value, root: root, parent: parent, type: type, props: props, children: children, line: line, column: column, length: length, return: ''}
}
/**
* @param {object} root
* @param {object} props
* @return {object}
*/
function Tokenizer_copy (root, props) {
return Utility_assign(node('', null, null, '', null, null, 0), root, {length: -root.length}, props)
}
/**
* @return {number}
*/
function Tokenizer_char () {
return Tokenizer_character
}
/**
* @return {number}
*/
function prev () {
Tokenizer_character = Tokenizer_position > 0 ? Utility_charat(characters, --Tokenizer_position) : 0
if (column--, Tokenizer_character === 10)
column = 1, line--
return Tokenizer_character
}
/**
* @return {number}
*/
function next () {
Tokenizer_character = Tokenizer_position < Tokenizer_length ? Utility_charat(characters, Tokenizer_position++) : 0
if (column++, Tokenizer_character === 10)
column = 1, line++
return Tokenizer_character
}
/**
* @return {number}
*/
function peek () {
return Utility_charat(characters, Tokenizer_position)
}
/**
* @return {number}
*/
function caret () {
return Tokenizer_position
}
/**
* @param {number} begin
* @param {number} end
* @return {string}
*/
function slice (begin, end) {
return Utility_substr(characters, begin, end)
}
/**
* @param {number} type
* @return {number}
*/
function token (type) {
switch (type) {
// \0 \t \n \r \s whitespace token
case 0: case 9: case 10: case 13: case 32:
return 5
// ! + , / > @ ~ isolate token
case 33: case 43: case 44: case 47: case 62: case 64: case 126:
// ; { } breakpoint token
case 59: case 123: case 125:
return 4
// : accompanied token
case 58:
return 3
// " ' ( [ opening delimit token
case 34: case 39: case 40: case 91:
return 2
// ) ] closing delimit token
case 41: case 93:
return 1
}
return 0
}
/**
* @param {string} value
* @return {any[]}
*/
function alloc (value) {
return line = column = 1, Tokenizer_length = Utility_strlen(characters = value), Tokenizer_position = 0, []
}
/**
* @param {any} value
* @return {any}
*/
function dealloc (value) {
return characters = '', value
}
/**
* @param {number} type
* @return {string}
*/
function delimit (type) {
return trim(slice(Tokenizer_position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)))
}
/**
* @param {string} value
* @return {string[]}
*/
function Tokenizer_tokenize (value) {
return dealloc(tokenizer(alloc(value)))
}
/**
* @param {number} type
* @return {string}
*/
function whitespace (type) {
while (Tokenizer_character = peek())
if (Tokenizer_character < 33)
next()
else
break
return token(type) > 2 || token(Tokenizer_character) > 3 ? '' : ' '
}
/**
* @param {string[]} children
* @return {string[]}
*/
function tokenizer (children) {
while (next())
switch (token(Tokenizer_character)) {
case 0: append(identifier(Tokenizer_position - 1), children)
break
case 2: append(delimit(Tokenizer_character), children)
break
default: append(from(Tokenizer_character), children)
}
return children
}
/**
* @param {number} index
* @param {number} count
* @return {string}
*/
function escaping (index, count) {
while (--count && next())
// not 0-9 A-F a-f
if (Tokenizer_character < 48 || Tokenizer_character > 102 || (Tokenizer_character > 57 && Tokenizer_character < 65) || (Tokenizer_character > 70 && Tokenizer_character < 97))
break
return slice(index, caret() + (count < 6 && peek() == 32 && next() == 32))
}
/**
* @param {number} type
* @return {number}
*/
function delimiter (type) {
while (next())
switch (Tokenizer_character) {
// ] ) " '
case type:
return Tokenizer_position
// " '
case 34: case 39:
if (type !== 34 && type !== 39)
delimiter(Tokenizer_character)
break
// (
case 40:
if (type === 41)
delimiter(type)
break
// \
case 92:
next()
break
}
return Tokenizer_position
}
/**
* @param {number} type
* @param {number} index
* @return {number}
*/
function commenter (type, index) {
while (next())
// //
if (type + Tokenizer_character === 47 + 10)
break
// /*
else if (type + Tokenizer_character === 42 + 42 && peek() === 47)
break
return '/*' + slice(index, Tokenizer_position - 1) + '*' + Utility_from(type === 47 ? type : next())
}
/**
* @param {number} index
* @return {string}
*/
function identifier (index) {
while (!token(peek()))
next()
return slice(index, Tokenizer_position)
}
;// CONCATENATED MODULE: ./node_modules/stylis/src/Enum.js
var Enum_MS = '-ms-'
var Enum_MOZ = '-moz-'
var Enum_WEBKIT = '-webkit-'
var COMMENT = 'comm'
var Enum_RULESET = 'rule'
var Enum_DECLARATION = 'decl'
var PAGE = '@page'
var MEDIA = '@media'
var IMPORT = '@import'
var CHARSET = '@charset'
var VIEWPORT = '@viewport'
var SUPPORTS = '@supports'
var DOCUMENT = '@document'
var NAMESPACE = '@namespace'
var Enum_KEYFRAMES = '@keyframes'
var FONT_FACE = '@font-face'
var COUNTER_STYLE = '@counter-style'
var FONT_FEATURE_VALUES = '@font-feature-values'
;// CONCATENATED MODULE: ./node_modules/stylis/src/Serializer.js
/**
* @param {object[]} children
* @param {function} callback
* @return {string}
*/
function Serializer_serialize (children, callback) {
var output = ''
var length = Utility_sizeof(children)
for (var i = 0; i < length; i++)
output += callback(children[i], i, children, callback) || ''
return output
}
/**
* @param {object} element
* @param {number} index
* @param {object[]} children
* @param {function} callback
* @return {string}
*/
function Serializer_stringify (element, index, children, callback) {
switch (element.type) {
case IMPORT: case Enum_DECLARATION: return element.return = element.return || element.value
case COMMENT: return ''
case Enum_KEYFRAMES: return element.return = element.value + '{' + Serializer_serialize(element.children, callback) + '}'
case Enum_RULESET: element.value = element.props.join(',')
}
return Utility_strlen(children = Serializer_serialize(element.children, callback)) ? element.return = element.value + '{' + children + '}' : ''
}
;// CONCATENATED MODULE: ./node_modules/stylis/src/Middleware.js
/**
* @param {function[]} collection
* @return {function}
*/
function middleware (collection) {
var length = Utility_sizeof(collection)
return function (element, index, children, callback) {
var output = ''
for (var i = 0; i < length; i++)
output += collection[i](element, index, children, callback) || ''
return output
}
}
/**
* @param {function} callback
* @return {function}
*/
function rulesheet (callback) {
return function (element) {
if (!element.root)
if (element = element.return)
callback(element)
}
}
/**
* @param {object} element
* @param {number} index
* @param {object[]} children
* @param {function} callback
*/
function prefixer (element, index, children, callback) {
if (element.length > -1)
if (!element.return)
switch (element.type) {
case DECLARATION: element.return = prefix(element.value, element.length, children)
return
case KEYFRAMES:
return serialize([copy(element, {value: replace(element.value, '@', '@' + WEBKIT)})], callback)
case RULESET:
if (element.length)
return combine(element.props, function (value) {
switch (match(value, /(::plac\w+|:read-\w+)/)) {
// :read-(only|write)
case ':read-only': case ':read-write':
return serialize([copy(element, {props: [replace(value, /:(read-\w+)/, ':' + MOZ + '$1')]})], callback)
// :placeholder
case '::placeholder':
return serialize([
copy(element, {props: [replace(value, /:(plac\w+)/, ':' + WEBKIT + 'input-$1')]}),
copy(element, {props: [replace(value, /:(plac\w+)/, ':' + MOZ + '$1')]}),
copy(element, {props: [replace(value, /:(plac\w+)/, MS + 'input-$1')]})
], callback)
}
return ''
})
}
}
/**
* @param {object} element
* @param {number} index
* @param {object[]} children
*/
function namespace (element) {
switch (element.type) {
case RULESET:
element.props = element.props.map(function (value) {
return combine(tokenize(value), function (value, index, children) {
switch (charat(value, 0)) {
// \f
case 12:
return substr(value, 1, strlen(value))
// \0 ( + > ~
case 0: case 40: case 43: case 62: case 126:
return value
// :
case 58:
if (children[++index] === 'global')
children[index] = '', children[++index] = '\f' + substr(children[index], index = 1, -1)
// \s
case 32:
return index === 1 ? '' : value
default:
switch (index) {
case 0: element = value
return sizeof(children) > 1 ? '' : value
case index = sizeof(children) - 1: case 2:
return index === 2 ? value + element + element : value + element
default:
return value
}
}
})
})
}
}
;// CONCATENATED MODULE: ./node_modules/stylis/src/Parser.js
/**
* @param {string} value
* @return {object[]}
*/
function compile (value) {
return dealloc(Parser_parse('', null, null, null, [''], value = alloc(value), 0, [0], value))
}
/**
* @param {string} value
* @param {object} root
* @param {object?} parent
* @param {string[]} rule
* @param {string[]} rules
* @param {string[]} rulesets
* @param {number[]} pseudo
* @param {number[]} points
* @param {string[]} declarations
* @return {object}
*/
function Parser_parse (value, root, parent, rule, rules, rulesets, pseudo, points, declarations) {
var index = 0
var offset = 0
var length = pseudo
var atrule = 0
var property = 0
var previous = 0
var variable = 1
var scanning = 1
var ampersand = 1
var character = 0
var type = ''
var props = rules
var children = rulesets
var reference = rule
var characters = type
while (scanning)
switch (previous = character, character = next()) {
// (
case 40:
if (previous != 108 && Utility_charat(characters, length - 1) == 58) {
if (indexof(characters += Utility_replace(delimit(character), '&', '&\f'), '&\f') != -1)
ampersand = -1
break
}
// " ' [
case 34: case 39: case 91:
characters += delimit(character)
break
// \t \n \r \s
case 9: case 10: case 13: case 32:
characters += whitespace(previous)
break
// \
case 92:
characters += escaping(caret() - 1, 7)
continue
// /
case 47:
switch (peek()) {
case 42: case 47:
Utility_append(Parser_comment(commenter(next(), caret()), root, parent), declarations)
break
default:
characters += '/'
}
break
// {
case 123 * variable:
points[index++] = Utility_strlen(characters) * ampersand
// } ; \0
case 125 * variable: case 59: case 0:
switch (character) {
// \0 }
case 0: case 125: scanning = 0
// ;
case 59 + offset:
if (property > 0 && (Utility_strlen(characters) - length))
Utility_append(property > 32 ? declaration(characters + ';', rule, parent, length - 1) : declaration(Utility_replace(characters, ' ', '') + ';', rule, parent, length - 2), declarations)
break
// @ ;
case 59: characters += ';'
// { rule/at-rule
default:
Utility_append(reference = ruleset(characters, root, parent, index, offset, rules, points, type, props = [], children = [], length), rulesets)
if (character === 123)
if (offset === 0)
Parser_parse(characters, root, reference, reference, props, rulesets, length, points, children)
else
switch (atrule === 99 && Utility_charat(characters, 3) === 110 ? 100 : atrule) {
// d m s
case 100: case 109: case 115:
Parser_parse(value, reference, reference, rule && Utility_append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length), children), rules, children, length, points, rule ? props : children)
break
default:
Parser_parse(characters, reference, reference, reference, [''], children, 0, points, children)
}
}
index = offset = property = 0, variable = ampersand = 1, type = characters = '', length = pseudo
break
// :
case 58:
length = 1 + Utility_strlen(characters), property = previous
default:
if (variable < 1)
if (character == 123)
--variable
else if (character == 125 && variable++ == 0 && prev() == 125)
continue
switch (characters += Utility_from(character), character * variable) {
// &
case 38:
ampersand = offset > 0 ? 1 : (characters += '\f', -1)
break
// ,
case 44:
points[index++] = (Utility_strlen(characters) - 1) * ampersand, ampersand = 1
break
// @
case 64:
// -
if (peek() === 45)
characters += delimit(next())
atrule = peek(), offset = length = Utility_strlen(type = characters += identifier(caret())), character++
break
// -
case 45:
if (previous === 45 && Utility_strlen(characters) == 2)
variable = 0
}
}
return rulesets
}
/**
* @param {string} value
* @param {object} root
* @param {object?} parent
* @param {number} index
* @param {number} offset
* @param {string[]} rules
* @param {number[]} points
* @param {string} type
* @param {string[]} props
* @param {string[]} children
* @param {number} length
* @return {object}
*/
function ruleset (value, root, parent, index, offset, rules, points, type, props, children, length) {
var post = offset - 1
var rule = offset === 0 ? rules : ['']
var size = Utility_sizeof(rule)
for (var i = 0, j = 0, k = 0; i < index; ++i)
for (var x = 0, y = Utility_substr(value, post + 1, post = abs(j = points[i])), z = value; x < size; ++x)
if (z = trim(j > 0 ? rule[x] + ' ' + y : Utility_replace(y, /&\f/g, rule[x])))
props[k++] = z
return node(value, root, parent, offset === 0 ? Enum_RULESET : type, props, children, length)
}
/**
* @param {number} value
* @param {object} root
* @param {object?} parent
* @return {object}
*/
function Parser_comment (value, root, parent) {
return node(value, root, parent, COMMENT, Utility_from(Tokenizer_char()), Utility_substr(value, 2, -2), 0)
}
/**
* @param {string} value
* @param {object} root
* @param {object?} parent
* @param {number} length
* @return {object}
*/
function declaration (value, root, parent, length) {
return node(value, root, parent, Enum_DECLARATION, Utility_substr(value, 0, length), Utility_substr(value, length + 1, -1), length)
}
;// CONCATENATED MODULE: ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js
var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {
var previous = 0;
var character = 0;
while (true) {
previous = character;
character = peek(); // &\f
if (previous === 38 && character === 12) {
points[index] = 1;
}
if (token(character)) {
break;
}
next();
}
return slice(begin, Tokenizer_position);
};
var toRules = function toRules(parsed, points) {
// pretend we've started with a comma
var index = -1;
var character = 44;
do {
switch (token(character)) {
case 0:
// &\f
if (character === 38 && peek() === 12) {
// this is not 100% correct, we don't account for literal sequences here - like for example quoted strings
// stylis inserts \f after & to know when & where it should replace this sequence with the context selector
// and when it should just concatenate the outer and inner selectors
// it's very unlikely for this sequence to actually appear in a different context, so we just leverage this fact here
points[index] = 1;
}
parsed[index] += identifierWithPointTracking(Tokenizer_position - 1, points, index);
break;
case 2:
parsed[index] += delimit(character);
break;
case 4:
// comma
if (character === 44) {
// colon
parsed[++index] = peek() === 58 ? '&\f' : '';
points[index] = parsed[index].length;
break;
}
// fallthrough
default:
parsed[index] += Utility_from(character);
}
} while (character = next());
return parsed;
};
var getRules = function getRules(value, points) {
return dealloc(toRules(alloc(value), points));
}; // WeakSet would be more appropriate, but only WeakMap is supported in IE11
var fixedElements = /* #__PURE__ */new WeakMap();
var compat = function compat(element) {
if (element.type !== 'rule' || !element.parent || // positive .length indicates that this rule contains pseudo
// negative .length indicates that this rule has been already prefixed
element.length < 1) {
return;
}
var value = element.value,
parent = element.parent;
var isImplicitRule = element.column === parent.column && element.line === parent.line;
while (parent.type !== 'rule') {
parent = parent.parent;
if (!parent) return;
} // short-circuit for the simplest case
if (element.props.length === 1 && value.charCodeAt(0) !== 58
/* colon */
&& !fixedElements.get(parent)) {
return;
} // if this is an implicitly inserted rule (the one eagerly inserted at the each new nested level)
// then the props has already been manipulated beforehand as they that array is shared between it and its "rule parent"
if (isImplicitRule) {
return;
}
fixedElements.set(element, true);
var points = [];
var rules = getRules(value, points);
var parentRules = parent.props;
for (var i = 0, k = 0; i < rules.length; i++) {
for (var j = 0; j < parentRules.length; j++, k++) {
element.props[k] = points[i] ? rules[i].replace(/&\f/g, parentRules[j]) : parentRules[j] + " " + rules[i];
}
}
};
var removeLabel = function removeLabel(element) {
if (element.type === 'decl') {
var value = element.value;
if ( // charcode for l
value.charCodeAt(0) === 108 && // charcode for b
value.charCodeAt(2) === 98) {
// this ignores label
element["return"] = '';
element.value = '';
}
}
};
var ignoreFlag = 'emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason';
var isIgnoringComment = function isIgnoringComment(element) {
return element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1;
};
var createUnsafeSelectorsAlarm = function createUnsafeSelectorsAlarm(cache) {
return function (element, index, children) {
if (element.type !== 'rule' || cache.compat) return;
var unsafePseudoClasses = element.value.match(/(:first|:nth|:nth-last)-child/g);
if (unsafePseudoClasses) {
var isNested = element.parent === children[0]; // in nested rules comments become children of the "auto-inserted" rule
//
// considering this input:
// .a {
// .b /* comm */ {}
// color: hotpink;
// }
// we get output corresponding to this:
// .a {
// & {
// /* comm */
// color: hotpink;
// }
// .b {}
// }
var commentContainer = isNested ? children[0].children : // global rule at the root level
children;
for (var i = commentContainer.length - 1; i >= 0; i--) {
var node = commentContainer[i];
if (node.line < element.line) {
break;
} // it is quite weird but comments are *usually* put at `column: element.column - 1`
// so we seek *from the end* for the node that is earlier than the rule's `element` and check that
// this will also match inputs like this:
// .a {
// /* comm */
// .b {}
// }
//
// but that is fine
//
// it would be the easiest to change the placement of the comment to be the first child of the rule:
// .a {
// .b { /* comm */ }
// }
// with such inputs we wouldn't have to search for the comment at all
// TODO: consider changing this comment placement in the next major version
if (node.column < element.column) {
if (isIgnoringComment(node)) {
return;
}
break;
}
}
unsafePseudoClasses.forEach(function (unsafePseudoClass) {
console.error("The pseudo class \"" + unsafePseudoClass + "\" is potentially unsafe when doing server-side rendering. Try changing it to \"" + unsafePseudoClass.split('-child')[0] + "-of-type\".");
});
}
};
};
var isImportRule = function isImportRule(element) {
return element.type.charCodeAt(1) === 105 && element.type.charCodeAt(0) === 64;
};
var isPrependedWithRegularRules = function isPrependedWithRegularRules(index, children) {
for (var i = index - 1; i >= 0; i--) {
if (!isImportRule(children[i])) {
return true;
}
}
return false;
}; // use this to remove incorrect elements from further processing
// so they don't get handed to the `sheet` (or anything else)
// as that could potentially lead to additional logs which in turn could be overhelming to the user
var nullifyElement = function nullifyElement(element) {
element.type = '';
element.value = '';
element["return"] = '';
element.children = '';
element.props = '';
};
var incorrectImportAlarm = function incorrectImportAlarm(element, index, children) {
if (!isImportRule(element)) {
return;
}
if (element.parent) {
console.error("`@import` rules can't be nested inside other rules. Please move it to the top level and put it before regular rules. Keep in mind that they can only be used within global styles.");
nullifyElement(element);
} else if (isPrependedWithRegularRules(index, children)) {
console.error("`@import` rules can't be after other rules. Please put your `@import` rules before your other rules.");
nullifyElement(element);
}
};
/* eslint-disable no-fallthrough */
function emotion_cache_browser_esm_prefix(value, length) {
switch (hash(value, length)) {
// color-adjust
case 5103:
return Enum_WEBKIT + 'print-' + value + value;
// animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
case 5737:
case 4201:
case 3177:
case 3433:
case 1641:
case 4457:
case 2921: // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break
case 5572:
case 6356:
case 5844:
case 3191:
case 6645:
case 3005: // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
case 6391:
case 5879:
case 5623:
case 6135:
case 4599:
case 4855: // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)
case 4215:
case 6389:
case 5109:
case 5365:
case 5621:
case 3829:
return Enum_WEBKIT + value + value;
// appearance, user-select, transform, hyphens, text-size-adjust
case 5349:
case 4246:
case 4810:
case 6968:
case 2756:
return Enum_WEBKIT + value + Enum_MOZ + value + Enum_MS + value + value;
// flex, flex-direction
case 6828:
case 4268:
return Enum_WEBKIT + value + Enum_MS + value + value;
// order
case 6165:
return Enum_WEBKIT + value + Enum_MS + 'flex-' + value + value;
// align-items
case 5187:
return Enum_WEBKIT + value + Utility_replace(value, /(\w+).+(:[^]+)/, Enum_WEBKIT + 'box-$1$2' + Enum_MS + 'flex-$1$2') + value;
// align-self
case 5443:
return Enum_WEBKIT + value + Enum_MS + 'flex-item-' + Utility_replace(value, /flex-|-self/, '') + value;
// align-content
case 4675:
return Enum_WEBKIT + value + Enum_MS + 'flex-line-pack' + Utility_replace(value, /align-content|flex-|-self/, '') + value;
// flex-shrink
case 5548:
return Enum_WEBKIT + value + Enum_MS + Utility_replace(value, 'shrink', 'negative') + value;
// flex-basis
case 5292:
return Enum_WEBKIT + value + Enum_MS + Utility_replace(value, 'basis', 'preferred-size') + value;
// flex-grow
case 6060:
return Enum_WEBKIT + 'box-' + Utility_replace(value, '-grow', '') + Enum_WEBKIT + value + Enum_MS + Utility_replace(value, 'grow', 'positive') + value;
// transition
case 4554:
return Enum_WEBKIT + Utility_replace(value, /([^-])(transform)/g, '$1' + Enum_WEBKIT + '$2') + value;
// cursor
case 6187:
return Utility_replace(Utility_replace(Utility_replace(value, /(zoom-|grab)/, Enum_WEBKIT + '$1'), /(image-set)/, Enum_WEBKIT + '$1'), value, '') + value;
// background, background-image
case 5495:
case 3959:
return Utility_replace(value, /(image-set\([^]*)/, Enum_WEBKIT + '$1' + '$`$1');
// justify-content
case 4968:
return Utility_replace(Utility_replace(value, /(.+:)(flex-)?(.*)/, Enum_WEBKIT + 'box-pack:$3' + Enum_MS + 'flex-pack:$3'), /s.+-b[^;]+/, 'justify') + Enum_WEBKIT + value + value;
// (margin|padding)-inline-(start|end)
case 4095:
case 3583:
case 4068:
case 2532:
return Utility_replace(value, /(.+)-inline(.+)/, Enum_WEBKIT + '$1$2') + value;
// (min|max)?(width|height|inline-size|block-size)
case 8116:
case 7059:
case 5753:
case 5535:
case 5445:
case 5701:
case 4933:
case 4677:
case 5533:
case 5789:
case 5021:
case 4765:
// stretch, max-content, min-content, fill-available
if (Utility_strlen(value) - 1 - length > 6) switch (Utility_charat(value, length + 1)) {
// (m)ax-content, (m)in-content
case 109:
// -
if (Utility_charat(value, length + 4) !== 45) break;
// (f)ill-available, (f)it-content
case 102:
return Utility_replace(value, /(.+:)(.+)-([^]+)/, '$1' + Enum_WEBKIT + '$2-$3' + '$1' + Enum_MOZ + (Utility_charat(value, length + 3) == 108 ? '$3' : '$2-$3')) + value;
// (s)tretch
case 115:
return ~indexof(value, 'stretch') ? emotion_cache_browser_esm_prefix(Utility_replace(value, 'stretch', 'fill-available'), length) + value : value;
}
break;
// position: sticky
case 4949:
// (s)ticky?
if (Utility_charat(value, length + 1) !== 115) break;
// display: (flex|inline-flex)
case 6444:
switch (Utility_charat(value, Utility_strlen(value) - 3 - (~indexof(value, '!important') && 10))) {
// stic(k)y
case 107:
return Utility_replace(value, ':', ':' + Enum_WEBKIT) + value;
// (inline-)?fl(e)x
case 101:
return Utility_replace(value, /(.+:)([^;!]+)(;|!.+)?/, '$1' + Enum_WEBKIT + (Utility_charat(value, 14) === 45 ? 'inline-' : '') + 'box$3' + '$1' + Enum_WEBKIT + '$2$3' + '$1' + Enum_MS + '$2box$3') + value;
}
break;
// writing-mode
case 5936:
switch (Utility_charat(value, length + 11)) {
// vertical-l(r)
case 114:
return Enum_WEBKIT + value + Enum_MS + Utility_replace(value, /[svh]\w+-[tblr]{2}/, 'tb') + value;
// vertical-r(l)
case 108:
return Enum_WEBKIT + value + Enum_MS + Utility_replace(value, /[svh]\w+-[tblr]{2}/, 'tb-rl') + value;
// horizontal(-)tb
case 45:
return Enum_WEBKIT + value + Enum_MS + Utility_replace(value, /[svh]\w+-[tblr]{2}/, 'lr') + value;
}
return Enum_WEBKIT + value + Enum_MS + value + value;
}
return value;
}
var emotion_cache_browser_esm_prefixer = function prefixer(element, index, children, callback) {
if (element.length > -1) if (!element["return"]) switch (element.type) {
case Enum_DECLARATION:
element["return"] = emotion_cache_browser_esm_prefix(element.value, element.length);
break;
case Enum_KEYFRAMES:
return Serializer_serialize([Tokenizer_copy(element, {
value: Utility_replace(element.value, '@', '@' + Enum_WEBKIT)
})], callback);
case Enum_RULESET:
if (element.length) return Utility_combine(element.props, function (value) {
switch (Utility_match(value, /(::plac\w+|:read-\w+)/)) {
// :read-(only|write)
case ':read-only':
case ':read-write':
return Serializer_serialize([Tokenizer_copy(element, {
props: [Utility_replace(value, /:(read-\w+)/, ':' + Enum_MOZ + '$1')]
})], callback);
// :placeholder
case '::placeholder':
return Serializer_serialize([Tokenizer_copy(element, {
props: [Utility_replace(value, /:(plac\w+)/, ':' + Enum_WEBKIT + 'input-$1')]
}), Tokenizer_copy(element, {
props: [Utility_replace(value, /:(plac\w+)/, ':' + Enum_MOZ + '$1')]
}), Tokenizer_copy(element, {
props: [Utility_replace(value, /:(plac\w+)/, Enum_MS + 'input-$1')]
})], callback);
}
return '';
});
}
};
var defaultStylisPlugins = [emotion_cache_browser_esm_prefixer];
var createCache = function createCache(options) {
var key = options.key;
if (false) {}
if ( key === 'css') {
var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])"); // get SSRed styles out of the way of React's hydration
// document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be)
// note this very very intentionally targets all style elements regardless of the key to ensure
// that creating a cache works inside of render of a React component
Array.prototype.forEach.call(ssrStyles, function (node) {
// we want to only move elements which have a space in the data-emotion attribute value
// because that indicates that it is an Emotion 11 server-side rendered style elements
// while we will already ignore Emotion 11 client-side inserted styles because of the :not([data-s]) part in the selector
// Emotion 10 client-side inserted styles did not have data-s (but importantly did not have a space in their data-emotion attributes)
// so checking for the space ensures that loading Emotion 11 after Emotion 10 has inserted some styles
// will not result in the Emotion 10 styles being destroyed
var dataEmotionAttribute = node.getAttribute('data-emotion');
if (dataEmotionAttribute.indexOf(' ') === -1) {
return;
}
document.head.appendChild(node);
node.setAttribute('data-s', '');
});
}
var stylisPlugins = options.stylisPlugins || defaultStylisPlugins;
if (false) {}
var inserted = {};
var container;
var nodesToHydrate = [];
{
container = options.container || document.head;
Array.prototype.forEach.call( // this means we will ignore elements which don't have a space in them which
// means that the style elements we're looking at are only Emotion 11 server-rendered style elements
document.querySelectorAll("style[data-emotion^=\"" + key + " \"]"), function (node) {
var attrib = node.getAttribute("data-emotion").split(' '); // $FlowFixMe
for (var i = 1; i < attrib.length; i++) {
inserted[attrib[i]] = true;
}
nodesToHydrate.push(node);
});
}
var _insert;
var omnipresentPlugins = [compat, removeLabel];
if (false) {}
{
var currentSheet;
var finalizingPlugins = [Serializer_stringify, false ? 0 : rulesheet(function (rule) {
currentSheet.insert(rule);
})];
var serializer = middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));
var stylis = function stylis(styles) {
return Serializer_serialize(compile(styles), serializer);
};
_insert = function insert(selector, serialized, sheet, shouldCache) {
currentSheet = sheet;
if (false) {}
stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
if (shouldCache) {
cache.inserted[serialized.name] = true;
}
};
}
var cache = {
key: key,
sheet: new StyleSheet({
key: key,
container: container,
nonce: options.nonce,
speedy: options.speedy,
prepend: options.prepend,
insertionPoint: options.insertionPoint
}),
nonce: options.nonce,
inserted: inserted,
registered: {},
insert: _insert
};
cache.sheet.hydrate(nodesToHydrate);
return cache;
};
/* harmony default export */ const emotion_cache_browser_esm = (createCache);
;// CONCATENATED MODULE: ./node_modules/@emotion/hash/dist/emotion-hash.esm.js
/* eslint-disable */
// Inspired by https://github.com/garycourt/murmurhash-js
// Ported from https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp#L37-L86
function murmur2(str) {
// 'm' and 'r' are mixing constants generated offline.
// They're not really 'magic', they just happen to work well.
// const m = 0x5bd1e995;
// const r = 24;
// Initialize the hash
var h = 0; // Mix 4 bytes at a time into the hash
var k,
i = 0,
len = str.length;
for (; len >= 4; ++i, len -= 4) {
k = str.charCodeAt(i) & 0xff | (str.charCodeAt(++i) & 0xff) << 8 | (str.charCodeAt(++i) & 0xff) << 16 | (str.charCodeAt(++i) & 0xff) << 24;
k =
/* Math.imul(k, m): */
(k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16);
k ^=
/* k >>> r: */
k >>> 24;
h =
/* Math.imul(k, m): */
(k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16) ^
/* Math.imul(h, m): */
(h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
} // Handle the last few bytes of the input array
switch (len) {
case 3:
h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
case 2:
h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
case 1:
h ^= str.charCodeAt(i) & 0xff;
h =
/* Math.imul(h, m): */
(h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
} // Do a few final mixes of the hash to ensure the last few
// bytes are well-incorporated.
h ^= h >>> 13;
h =
/* Math.imul(h, m): */
(h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
return ((h ^ h >>> 15) >>> 0).toString(36);
}
/* harmony default export */ const emotion_hash_esm = (murmur2);
;// CONCATENATED MODULE: ./node_modules/@emotion/unitless/dist/emotion-unitless.esm.js
var unitlessKeys = {
animationIterationCount: 1,
borderImageOutset: 1,
borderImageSlice: 1,
borderImageWidth: 1,
boxFlex: 1,
boxFlexGroup: 1,
boxOrdinalGroup: 1,
columnCount: 1,
columns: 1,
flex: 1,
flexGrow: 1,
flexPositive: 1,
flexShrink: 1,
flexNegative: 1,
flexOrder: 1,
gridRow: 1,
gridRowEnd: 1,
gridRowSpan: 1,
gridRowStart: 1,
gridColumn: 1,
gridColumnEnd: 1,
gridColumnSpan: 1,
gridColumnStart: 1,
msGridRow: 1,
msGridRowSpan: 1,
msGridColumn: 1,
msGridColumnSpan: 1,
fontWeight: 1,
lineHeight: 1,
opacity: 1,
order: 1,
orphans: 1,
tabSize: 1,
widows: 1,
zIndex: 1,
zoom: 1,
WebkitLineClamp: 1,
// SVG-related properties
fillOpacity: 1,
floodOpacity: 1,
stopOpacity: 1,
strokeDasharray: 1,
strokeDashoffset: 1,
strokeMiterlimit: 1,
strokeOpacity: 1,
strokeWidth: 1
};
/* harmony default export */ const emotion_unitless_esm = (unitlessKeys);
;// CONCATENATED MODULE: ./node_modules/@emotion/serialize/dist/emotion-serialize.browser.esm.js
var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
var UNDEFINED_AS_OBJECT_KEY_ERROR = "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).";
var hyphenateRegex = /[A-Z]|^ms/g;
var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
var isCustomProperty = function isCustomProperty(property) {
return property.charCodeAt(1) === 45;
};
var isProcessableValue = function isProcessableValue(value) {
return value != null && typeof value !== 'boolean';
};
var processStyleName = /* #__PURE__ */memoize(function (styleName) {
return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
});
var processStyleValue = function processStyleValue(key, value) {
switch (key) {
case 'animation':
case 'animationName':
{
if (typeof value === 'string') {
return value.replace(animationRegex, function (match, p1, p2) {
cursor = {
name: p1,
styles: p2,
next: cursor
};
return p1;
});
}
}
}
if (emotion_unitless_esm[key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) {
return value + 'px';
}
return value;
};
if (false) { var hyphenatedCache, hyphenPattern, msPattern, oldProcessStyleValue, contentValues, contentValuePattern; }
var noComponentSelectorMessage = (/* unused pure expression or super */ null && ('Component selectors can only be used in conjunction with ' + '@emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware ' + 'compiler transform.'));
function handleInterpolation(mergedProps, registered, interpolation) {
if (interpolation == null) {
return '';
}
if (interpolation.__emotion_styles !== undefined) {
if (false) {}
return interpolation;
}
switch (typeof interpolation) {
case 'boolean':
{
return '';
}
case 'object':
{
if (interpolation.anim === 1) {
cursor = {
name: interpolation.name,
styles: interpolation.styles,
next: cursor
};
return interpolation.name;
}
if (interpolation.styles !== undefined) {
var next = interpolation.next;
if (next !== undefined) {
// not the most efficient thing ever but this is a pretty rare case
// and there will be very few iterations of this generally
while (next !== undefined) {
cursor = {
name: next.name,
styles: next.styles,
next: cursor
};
next = next.next;
}
}
var styles = interpolation.styles + ";";
if (false) {}
return styles;
}
return createStringFromObject(mergedProps, registered, interpolation);
}
case 'function':
{
if (mergedProps !== undefined) {
var previousCursor = cursor;
var result = interpolation(mergedProps);
cursor = previousCursor;
return handleInterpolation(mergedProps, registered, result);
} else if (false) {}
break;
}
case 'string':
if (false) { var replaced, matched; }
break;
} // finalize string values (regular strings and functions interpolated into css calls)
if (registered == null) {
return interpolation;
}
var cached = registered[interpolation];
return cached !== undefined ? cached : interpolation;
}
function createStringFromObject(mergedProps, registered, obj) {
var string = '';
if (Array.isArray(obj)) {
for (var i = 0; i < obj.length; i++) {
string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
}
} else {
for (var _key in obj) {
var value = obj[_key];
if (typeof value !== 'object') {
if (registered != null && registered[value] !== undefined) {
string += _key + "{" + registered[value] + "}";
} else if (isProcessableValue(value)) {
string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
}
} else {
if (_key === 'NO_COMPONENT_SELECTOR' && "production" !== 'production') {}
if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) {
for (var _i = 0; _i < value.length; _i++) {
if (isProcessableValue(value[_i])) {
string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
}
}
} else {
var interpolated = handleInterpolation(mergedProps, registered, value);
switch (_key) {
case 'animation':
case 'animationName':
{
string += processStyleName(_key) + ":" + interpolated + ";";
break;
}
default:
{
if (false) {}
string += _key + "{" + interpolated + "}";
}
}
}
}
}
}
return string;
}
var labelPattern = /label:\s*([^\s;\n{]+)\s*(;|$)/g;
var sourceMapPattern;
if (false) {} // this is the cursor for keyframes
// keyframes are stored on the SerializedStyles object as a linked list
var cursor;
var emotion_serialize_browser_esm_serializeStyles = function serializeStyles(args, registered, mergedProps) {
if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
return args[0];
}
var stringMode = true;
var styles = '';
cursor = undefined;
var strings = args[0];
if (strings == null || strings.raw === undefined) {
stringMode = false;
styles += handleInterpolation(mergedProps, registered, strings);
} else {
if (false) {}
styles += strings[0];
} // we start at 1 since we've already handled the first arg
for (var i = 1; i < args.length; i++) {
styles += handleInterpolation(mergedProps, registered, args[i]);
if (stringMode) {
if (false) {}
styles += strings[i];
}
}
var sourceMap;
if (false) {} // using a global regex with .exec is stateful so lastIndex has to be reset each time
labelPattern.lastIndex = 0;
var identifierName = '';
var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5
while ((match = labelPattern.exec(styles)) !== null) {
identifierName += '-' + // $FlowFixMe we know it's not null
match[1];
}
var name = emotion_hash_esm(styles) + identifierName;
if (false) {}
return {
name: name,
styles: styles,
next: cursor
};
};
;// CONCATENATED MODULE: ./node_modules/@emotion/use-insertion-effect-with-fallbacks/dist/emotion-use-insertion-effect-with-fallbacks.browser.esm.js
var syncFallback = function syncFallback(create) {
return create();
};
var useInsertionEffect = external_React_['useInsertion' + 'Effect'] ? external_React_['useInsertion' + 'Effect'] : false;
var emotion_use_insertion_effect_with_fallbacks_browser_esm_useInsertionEffectAlwaysWithSyncFallback = useInsertionEffect || syncFallback;
var useInsertionEffectWithLayoutFallback = (/* unused pure expression or super */ null && (useInsertionEffect || useLayoutEffect));
;// CONCATENATED MODULE: ./node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js
var emotion_element_6a883da9_browser_esm_hasOwnProperty = {}.hasOwnProperty;
var EmotionCacheContext = /* #__PURE__ */(0,external_React_.createContext)( // we're doing this to avoid preconstruct's dead code elimination in this one case
// because this module is primarily intended for the browser and node
// but it's also required in react native and similar environments sometimes
// and we could have a special build just for that
// but this is much easier and the native packages
// might use a different theme context in the future anyway
typeof HTMLElement !== 'undefined' ? /* #__PURE__ */emotion_cache_browser_esm({
key: 'css'
}) : null);
if (false) {}
var CacheProvider = EmotionCacheContext.Provider;
var __unsafe_useEmotionCache = function useEmotionCache() {
return useContext(EmotionCacheContext);
};
var withEmotionCache = function withEmotionCache(func) {
// $FlowFixMe
return /*#__PURE__*/(0,external_React_.forwardRef)(function (props, ref) {
// the cache will never be null in the browser
var cache = (0,external_React_.useContext)(EmotionCacheContext);
return func(props, cache, ref);
});
};
var ThemeContext = /* #__PURE__ */(0,external_React_.createContext)({});
if (false) {}
var useTheme = function useTheme() {
return useContext(ThemeContext);
};
var getTheme = function getTheme(outerTheme, theme) {
if (typeof theme === 'function') {
var mergedTheme = theme(outerTheme);
if (false) {}
return mergedTheme;
}
if (false) {}
return _extends({}, outerTheme, theme);
};
var createCacheWithTheme = /* #__PURE__ */(/* unused pure expression or super */ null && (weakMemoize(function (outerTheme) {
return weakMemoize(function (theme) {
return getTheme(outerTheme, theme);
});
})));
var ThemeProvider = function ThemeProvider(props) {
var theme = useContext(ThemeContext);
if (props.theme !== theme) {
theme = createCacheWithTheme(theme)(props.theme);
}
return /*#__PURE__*/createElement(ThemeContext.Provider, {
value: theme
}, props.children);
};
function withTheme(Component) {
var componentName = Component.displayName || Component.name || 'Component';
var render = function render(props, ref) {
var theme = useContext(ThemeContext);
return /*#__PURE__*/createElement(Component, _extends({
theme: theme,
ref: ref
}, props));
}; // $FlowFixMe
var WithTheme = /*#__PURE__*/forwardRef(render);
WithTheme.displayName = "WithTheme(" + componentName + ")";
return hoistNonReactStatics(WithTheme, Component);
}
var getLastPart = function getLastPart(functionName) {
// The match may be something like 'Object.createEmotionProps' or
// 'Loader.prototype.render'
var parts = functionName.split('.');
return parts[parts.length - 1];
};
var getFunctionNameFromStackTraceLine = function getFunctionNameFromStackTraceLine(line) {
// V8
var match = /^\s+at\s+([A-Za-z0-9$.]+)\s/.exec(line);
if (match) return getLastPart(match[1]); // Safari / Firefox
match = /^([A-Za-z0-9$.]+)@/.exec(line);
if (match) return getLastPart(match[1]);
return undefined;
};
var internalReactFunctionNames = /* #__PURE__ */new Set(['renderWithHooks', 'processChild', 'finishClassComponent', 'renderToString']); // These identifiers come from error stacks, so they have to be valid JS
// identifiers, thus we only need to replace what is a valid character for JS,
// but not for CSS.
var sanitizeIdentifier = function sanitizeIdentifier(identifier) {
return identifier.replace(/\$/g, '-');
};
var getLabelFromStackTrace = function getLabelFromStackTrace(stackTrace) {
if (!stackTrace) return undefined;
var lines = stackTrace.split('\n');
for (var i = 0; i < lines.length; i++) {
var functionName = getFunctionNameFromStackTraceLine(lines[i]); // The first line of V8 stack traces is just "Error"
if (!functionName) continue; // If we reach one of these, we have gone too far and should quit
if (internalReactFunctionNames.has(functionName)) break; // The component name is the first function in the stack that starts with an
// uppercase letter
if (/^[A-Z]/.test(functionName)) return sanitizeIdentifier(functionName);
}
return undefined;
};
var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';
var labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__';
var createEmotionProps = function createEmotionProps(type, props) {
if (false) {}
var newProps = {};
for (var key in props) {
if (emotion_element_6a883da9_browser_esm_hasOwnProperty.call(props, key)) {
newProps[key] = props[key];
}
}
newProps[typePropName] = type; // For performance, only call getLabelFromStackTrace in development and when
// the label hasn't already been computed
if (false) { var label; }
return newProps;
};
var Insertion = function Insertion(_ref) {
var cache = _ref.cache,
serialized = _ref.serialized,
isStringTag = _ref.isStringTag;
registerStyles(cache, serialized, isStringTag);
var rules = useInsertionEffectAlwaysWithSyncFallback(function () {
return insertStyles(cache, serialized, isStringTag);
});
return null;
};
var Emotion = /* #__PURE__ */(/* unused pure expression or super */ null && (withEmotionCache(function (props, cache, ref) {
var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works
// not passing the registered cache to serializeStyles because it would
// make certain babel optimisations not possible
if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) {
cssProp = cache.registered[cssProp];
}
var WrappedComponent = props[typePropName];
var registeredStyles = [cssProp];
var className = '';
if (typeof props.className === 'string') {
className = getRegisteredStyles(cache.registered, registeredStyles, props.className);
} else if (props.className != null) {
className = props.className + " ";
}
var serialized = serializeStyles(registeredStyles, undefined, useContext(ThemeContext));
if (false) { var labelFromStack; }
className += cache.key + "-" + serialized.name;
var newProps = {};
for (var key in props) {
if (emotion_element_6a883da9_browser_esm_hasOwnProperty.call(props, key) && key !== 'css' && key !== typePropName && ( true || 0)) {
newProps[key] = props[key];
}
}
newProps.ref = ref;
newProps.className = className;
return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Insertion, {
cache: cache,
serialized: serialized,
isStringTag: typeof WrappedComponent === 'string'
}), /*#__PURE__*/createElement(WrappedComponent, newProps));
})));
if (false) {}
;// CONCATENATED MODULE: ./node_modules/@emotion/utils/dist/emotion-utils.browser.esm.js
var isBrowser = "object" !== 'undefined';
function emotion_utils_browser_esm_getRegisteredStyles(registered, registeredStyles, classNames) {
var rawClassName = '';
classNames.split(' ').forEach(function (className) {
if (registered[className] !== undefined) {
registeredStyles.push(registered[className] + ";");
} else {
rawClassName += className + " ";
}
});
return rawClassName;
}
var emotion_utils_browser_esm_registerStyles = function registerStyles(cache, serialized, isStringTag) {
var className = cache.key + "-" + serialized.name;
if ( // we only need to add the styles to the registered cache if the
// class name could be used further down
// the tree but if it's a string tag, we know it won't
// so we don't have to add it to registered cache.
// this improves memory usage since we can avoid storing the whole style string
(isStringTag === false || // we need to always store it if we're in compat mode and
// in node since emotion-server relies on whether a style is in
// the registered cache to know whether a style is global or not
// also, note that this check will be dead code eliminated in the browser
isBrowser === false ) && cache.registered[className] === undefined) {
cache.registered[className] = serialized.styles;
}
};
var emotion_utils_browser_esm_insertStyles = function insertStyles(cache, serialized, isStringTag) {
emotion_utils_browser_esm_registerStyles(cache, serialized, isStringTag);
var className = cache.key + "-" + serialized.name;
if (cache.inserted[serialized.name] === undefined) {
var current = serialized;
do {
var maybeStyles = cache.insert(serialized === current ? "." + className : '', current, cache.sheet, true);
current = current.next;
} while (current !== undefined);
}
};
;// CONCATENATED MODULE: ./node_modules/@emotion/styled/base/dist/emotion-styled-base.browser.esm.js
var testOmitPropsOnStringTag = isPropValid;
var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
return key !== 'theme';
};
var getDefaultShouldForwardProp = function getDefaultShouldForwardProp(tag) {
return typeof tag === 'string' && // 96 is one less than the char code
// for "a" so this is checking that
// it's a lowercase character
tag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;
};
var composeShouldForwardProps = function composeShouldForwardProps(tag, options, isReal) {
var shouldForwardProp;
if (options) {
var optionsShouldForwardProp = options.shouldForwardProp;
shouldForwardProp = tag.__emotion_forwardProp && optionsShouldForwardProp ? function (propName) {
return tag.__emotion_forwardProp(propName) && optionsShouldForwardProp(propName);
} : optionsShouldForwardProp;
}
if (typeof shouldForwardProp !== 'function' && isReal) {
shouldForwardProp = tag.__emotion_forwardProp;
}
return shouldForwardProp;
};
var emotion_styled_base_browser_esm_ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
var emotion_styled_base_browser_esm_Insertion = function Insertion(_ref) {
var cache = _ref.cache,
serialized = _ref.serialized,
isStringTag = _ref.isStringTag;
emotion_utils_browser_esm_registerStyles(cache, serialized, isStringTag);
var rules = emotion_use_insertion_effect_with_fallbacks_browser_esm_useInsertionEffectAlwaysWithSyncFallback(function () {
return emotion_utils_browser_esm_insertStyles(cache, serialized, isStringTag);
});
return null;
};
var createStyled = function createStyled(tag, options) {
if (false) {}
var isReal = tag.__emotion_real === tag;
var baseTag = isReal && tag.__emotion_base || tag;
var identifierName;
var targetClassName;
if (options !== undefined) {
identifierName = options.label;
targetClassName = options.target;
}
var shouldForwardProp = composeShouldForwardProps(tag, options, isReal);
var defaultShouldForwardProp = shouldForwardProp || getDefaultShouldForwardProp(baseTag);
var shouldUseAs = !defaultShouldForwardProp('as');
return function () {
var args = arguments;
var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : [];
if (identifierName !== undefined) {
styles.push("label:" + identifierName + ";");
}
if (args[0] == null || args[0].raw === undefined) {
styles.push.apply(styles, args);
} else {
if (false) {}
styles.push(args[0][0]);
var len = args.length;
var i = 1;
for (; i < len; i++) {
if (false) {}
styles.push(args[i], args[0][i]);
}
} // $FlowFixMe: we need to cast StatelessFunctionalComponent to our PrivateStyledComponent class
var Styled = withEmotionCache(function (props, cache, ref) {
var FinalTag = shouldUseAs && props.as || baseTag;
var className = '';
var classInterpolations = [];
var mergedProps = props;
if (props.theme == null) {
mergedProps = {};
for (var key in props) {
mergedProps[key] = props[key];
}
mergedProps.theme = (0,external_React_.useContext)(ThemeContext);
}
if (typeof props.className === 'string') {
className = emotion_utils_browser_esm_getRegisteredStyles(cache.registered, classInterpolations, props.className);
} else if (props.className != null) {
className = props.className + " ";
}
var serialized = emotion_serialize_browser_esm_serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps);
className += cache.key + "-" + serialized.name;
if (targetClassName !== undefined) {
className += " " + targetClassName;
}
var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(FinalTag) : defaultShouldForwardProp;
var newProps = {};
for (var _key in props) {
if (shouldUseAs && _key === 'as') continue;
if ( // $FlowFixMe
finalShouldForwardProp(_key)) {
newProps[_key] = props[_key];
}
}
newProps.className = className;
newProps.ref = ref;
return /*#__PURE__*/(0,external_React_.createElement)(external_React_.Fragment, null, /*#__PURE__*/(0,external_React_.createElement)(emotion_styled_base_browser_esm_Insertion, {
cache: cache,
serialized: serialized,
isStringTag: typeof FinalTag === 'string'
}), /*#__PURE__*/(0,external_React_.createElement)(FinalTag, newProps));
});
Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";
Styled.defaultProps = tag.defaultProps;
Styled.__emotion_real = Styled;
Styled.__emotion_base = baseTag;
Styled.__emotion_styles = styles;
Styled.__emotion_forwardProp = shouldForwardProp;
Object.defineProperty(Styled, 'toString', {
value: function value() {
if (targetClassName === undefined && "production" !== 'production') {} // $FlowFixMe: coerce undefined to string
return "." + targetClassName;
}
});
Styled.withComponent = function (nextTag, nextOptions) {
return createStyled(nextTag, extends_extends({}, options, nextOptions, {
shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
})).apply(void 0, styles);
};
return Styled;
};
};
/* harmony default export */ const emotion_styled_base_browser_esm = (createStyled);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/dimensions-tool/width-height-tool.js
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
const SingleColumnToolsPanelItem = /*#__PURE__*/emotion_styled_base_browser_esm(external_wp_components_namespaceObject.__experimentalToolsPanelItem, true ? {
target: "ef8pe3d0"
} : 0)( true ? {
name: "957xgf",
styles: "grid-column:span 1"
} : 0);
/**
* @typedef {import('@wordpress/components/build-types/unit-control/types').WPUnitControlUnit} WPUnitControlUnit
*/
/**
* @typedef {Object} WidthHeightToolValue
* @property {string} [width] Width CSS value.
* @property {string} [height] Height CSS value.
*/
/**
* @callback WidthHeightToolOnChange
* @param {WidthHeightToolValue} nextValue Next dimensions value.
* @return {void}
*/
/**
* @typedef {Object} WidthHeightToolProps
* @property {string} [panelId] ID of the panel that contains the controls.
* @property {WidthHeightToolValue} [value] Current dimensions values.
* @property {WidthHeightToolOnChange} [onChange] Callback to update the dimensions values.
* @property {WPUnitControlUnit[]} [units] Units options.
* @property {boolean} [isShownByDefault] Whether the panel is shown by default.
*/
/**
* Component that renders controls to edit the dimensions of an image or container.
*
* @param {WidthHeightToolProps} props The component props.
*
* @return {import('react').ReactElement} The width and height tool.
*/
function WidthHeightTool({
panelId,
value = {},
onChange = () => {},
units,
isShownByDefault = true
}) {
var _value$width, _value$height;
// null, undefined, and 'auto' all represent the default value.
const width = value.width === 'auto' ? '' : (_value$width = value.width) !== null && _value$width !== void 0 ? _value$width : '';
const height = value.height === 'auto' ? '' : (_value$height = value.height) !== null && _value$height !== void 0 ? _value$height : '';
const onDimensionChange = dimension => nextDimension => {
const nextValue = {
...value
};
// Empty strings or undefined may be passed and both represent removing the value.
if (!nextDimension) {
delete nextValue[dimension];
} else {
nextValue[dimension] = nextDimension;
}
onChange(nextValue);
};
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SingleColumnToolsPanelItem, {
label: (0,external_wp_i18n_namespaceObject.__)('Width'),
isShownByDefault: isShownByDefault,
hasValue: () => width !== '',
onDeselect: onDimensionChange('width'),
panelId: panelId,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalUnitControl, {
label: (0,external_wp_i18n_namespaceObject.__)('Width'),
placeholder: (0,external_wp_i18n_namespaceObject.__)('Auto'),
labelPosition: "top",
units: units,
min: 0,
value: width,
onChange: onDimensionChange('width'),
size: "__unstable-large"
})
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SingleColumnToolsPanelItem, {
label: (0,external_wp_i18n_namespaceObject.__)('Height'),
isShownByDefault: isShownByDefault,
hasValue: () => height !== '',
onDeselect: onDimensionChange('height'),
panelId: panelId,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalUnitControl, {
label: (0,external_wp_i18n_namespaceObject.__)('Height'),
placeholder: (0,external_wp_i18n_namespaceObject.__)('Auto'),
labelPosition: "top",
units: units,
min: 0,
value: height,
onChange: onDimensionChange('height'),
size: "__unstable-large"
})
})]
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/dimensions-tool/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
*/
/**
* @typedef {import('@wordpress/components/build-types/unit-control/types').WPUnitControlUnit} WPUnitControlUnit
*/
/**
* @typedef {Object} Dimensions
* @property {string} [width] CSS width property.
* @property {string} [height] CSS height property.
* @property {string} [scale] CSS object-fit property.
* @property {string} [aspectRatio] CSS aspect-ratio property.
*/
/**
* @callback DimensionsControlsOnChange
* @param {Dimensions} nextValue
* @return {void}
*/
/**
* @typedef {Object} DimensionsControlsProps
* @property {string} [panelId] ID of the panel that contains the controls.
* @property {Dimensions} [value] Current dimensions values.
* @property {DimensionsControlsOnChange} [onChange] Callback to update the dimensions values.
* @property {SelectControlProps[]} [aspectRatioOptions] Aspect ratio options.
* @property {SelectControlProps[]} [scaleOptions] Scale options.
* @property {WPUnitControlUnit[]} [unitsOptions] Units options.
*/
/**
* Component that renders controls to edit the dimensions of an image or container.
*
* @param {DimensionsControlsProps} props The component props.
*
* @return {Element} The dimensions controls.
*/
function DimensionsTool({
panelId,
value = {},
onChange = () => {},
aspectRatioOptions,
// Default options handled by AspectRatioTool.
defaultAspectRatio = 'auto',
// Match CSS default value for aspect-ratio.
scaleOptions,
// Default options handled by ScaleTool.
defaultScale = 'fill',
// Match CSS default value for object-fit.
unitsOptions,
// Default options handled by UnitControl.
tools = ['aspectRatio', 'widthHeight', 'scale']
}) {
// Coerce undefined and CSS default values to be null.
const width = value.width === undefined || value.width === 'auto' ? null : value.width;
const height = value.height === undefined || value.height === 'auto' ? null : value.height;
const aspectRatio = value.aspectRatio === undefined || value.aspectRatio === 'auto' ? null : value.aspectRatio;
const scale = value.scale === undefined || value.scale === 'fill' ? null : value.scale;
// Keep track of state internally, so when the value is cleared by means
// other than directly editing that field, it's easier to restore the
// previous value.
const [lastScale, setLastScale] = (0,external_wp_element_namespaceObject.useState)(scale);
const [lastAspectRatio, setLastAspectRatio] = (0,external_wp_element_namespaceObject.useState)(aspectRatio);
// 'custom' is not a valid value for CSS aspect-ratio, but it is used in the
// dropdown to indicate that setting both the width and height is the same
// as a custom aspect ratio.
const aspectRatioValue = width && height ? 'custom' : lastAspectRatio;
const showScaleControl = aspectRatio || width && height;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [tools.includes('aspectRatio') && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AspectRatioTool, {
panelId: panelId,
options: aspectRatioOptions,
defaultValue: defaultAspectRatio,
value: aspectRatioValue,
onChange: nextAspectRatio => {
const nextValue = {
...value
};
// 'auto' is CSS default, so it gets treated as null.
nextAspectRatio = nextAspectRatio === 'auto' ? null : nextAspectRatio;
setLastAspectRatio(nextAspectRatio);
// Update aspectRatio.
if (!nextAspectRatio) {
delete nextValue.aspectRatio;
} else {
nextValue.aspectRatio = nextAspectRatio;
}
// Auto-update scale.
if (!nextAspectRatio) {
delete nextValue.scale;
} else if (lastScale) {
nextValue.scale = lastScale;
} else {
nextValue.scale = defaultScale;
setLastScale(defaultScale);
}
// Auto-update width and height.
if ('custom' !== nextAspectRatio && width && height) {
delete nextValue.height;
}
onChange(nextValue);
}
}), tools.includes('widthHeight') && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WidthHeightTool, {
panelId: panelId,
units: unitsOptions,
value: {
width,
height
},
onChange: ({
width: nextWidth,
height: nextHeight
}) => {
const nextValue = {
...value
};
// 'auto' is CSS default, so it gets treated as null.
nextWidth = nextWidth === 'auto' ? null : nextWidth;
nextHeight = nextHeight === 'auto' ? null : nextHeight;
// Update width.
if (!nextWidth) {
delete nextValue.width;
} else {
nextValue.width = nextWidth;
}
// Update height.
if (!nextHeight) {
delete nextValue.height;
} else {
nextValue.height = nextHeight;
}
// Auto-update aspectRatio.
if (nextWidth && nextHeight) {
delete nextValue.aspectRatio;
} else if (lastAspectRatio) {
nextValue.aspectRatio = lastAspectRatio;
} else {
// No setting defaultAspectRatio here, because
// aspectRatio is optional in this scenario,
// unlike scale.
}
// Auto-update scale.
if (!lastAspectRatio && !!nextWidth !== !!nextHeight) {
delete nextValue.scale;
} else if (lastScale) {
nextValue.scale = lastScale;
} else {
nextValue.scale = defaultScale;
setLastScale(defaultScale);
}
onChange(nextValue);
}
}), tools.includes('scale') && showScaleControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ScaleTool, {
panelId: panelId,
options: scaleOptions,
defaultValue: defaultScale,
value: lastScale,
onChange: nextScale => {
const nextValue = {
...value
};
// 'fill' is CSS default, so it gets treated as null.
nextScale = nextScale === 'fill' ? null : nextScale;
setLastScale(nextScale);
// Update scale.
if (!nextScale) {
delete nextValue.scale;
} else {
nextValue.scale = nextScale;
}
onChange(nextValue);
}
})]
});
}
/* harmony default export */ const dimensions_tool = (DimensionsTool);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/resolution-tool/index.js
/**
* WordPress dependencies
*/
const DEFAULT_SIZE_OPTIONS = [{
label: (0,external_wp_i18n_namespaceObject._x)('Thumbnail', 'Image size option for resolution control'),
value: 'thumbnail'
}, {
label: (0,external_wp_i18n_namespaceObject._x)('Medium', 'Image size option for resolution control'),
value: 'medium'
}, {
label: (0,external_wp_i18n_namespaceObject._x)('Large', 'Image size option for resolution control'),
value: 'large'
}, {
label: (0,external_wp_i18n_namespaceObject._x)('Full Size', 'Image size option for resolution control'),
value: 'full'
}];
function ResolutionTool({
panelId,
value,
onChange,
options = DEFAULT_SIZE_OPTIONS,
defaultValue = DEFAULT_SIZE_OPTIONS[0].value,
isShownByDefault = true
}) {
const displayValue = value !== null && value !== void 0 ? value : defaultValue;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
hasValue: () => displayValue !== defaultValue,
label: (0,external_wp_i18n_namespaceObject.__)('Resolution'),
onDeselect: () => onChange(defaultValue),
isShownByDefault: isShownByDefault,
panelId: panelId,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.SelectControl, {
__nextHasNoMarginBottom: true,
label: (0,external_wp_i18n_namespaceObject.__)('Resolution'),
value: displayValue,
options: options,
onChange: onChange,
help: (0,external_wp_i18n_namespaceObject.__)('Select the size of the source image.'),
size: "__unstable-large"
})
});
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/private-apis.js
/**
* Internal dependencies
*/
/**
* Private @wordpress/block-editor APIs.
*/
const privateApis = {};
lock(privateApis, {
...global_styles_namespaceObject,
ExperimentalBlockCanvas: ExperimentalBlockCanvas,
ExperimentalBlockEditorProvider: ExperimentalBlockEditorProvider,
getDuotoneFilter: getDuotoneFilter,
getRichTextValues: getRichTextValues,
PrivateQuickInserter: QuickInserter,
extractWords: extractWords,
getNormalizedSearchTerms: getNormalizedSearchTerms,
normalizeString: normalizeString,
PrivateListView: PrivateListView,
ResizableBoxPopover: ResizableBoxPopover,
BlockInfo: block_info_slot_fill,
useHasBlockToolbar: useHasBlockToolbar,
cleanEmptyObject: utils_cleanEmptyObject,
BlockQuickNavigation: BlockQuickNavigation,
LayoutStyle: LayoutStyle,
BlockRemovalWarningModal: BlockRemovalWarningModal,
useLayoutClasses: useLayoutClasses,
useLayoutStyles: useLayoutStyles,
DimensionsTool: dimensions_tool,
ResolutionTool: ResolutionTool,
TabbedSidebar: tabbed_sidebar,
TextAlignmentControl: TextAlignmentControl,
usesContextKey: usesContextKey,
useFlashEditableBlocks: useFlashEditableBlocks,
useZoomOutModeExit: useZoomOutModeExit,
useZoomOut: useZoomOut,
globalStylesDataKey: globalStylesDataKey,
globalStylesLinksDataKey: globalStylesLinksDataKey,
selectBlockPatternsKey: selectBlockPatternsKey,
requiresWrapperOnCopy: requiresWrapperOnCopy,
PrivateRichText: PrivateRichText,
PrivateInserterLibrary: PrivateInserterLibrary,
reusableBlocksSelectKey: reusableBlocksSelectKey,
PrivateBlockPopover: PrivateBlockPopover,
PrivatePublishDateTimePicker: PrivatePublishDateTimePicker,
useSpacingSizes: useSpacingSizes,
useBlockDisplayTitle: useBlockDisplayTitle,
__unstableBlockStyleVariationOverridesWithConfig: __unstableBlockStyleVariationOverridesWithConfig,
setBackgroundStyleDefaults: setBackgroundStyleDefaults,
sectionRootClientIdKey: sectionRootClientIdKey
});
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/index.js
/**
* Internal dependencies
*/
})();
(window.wp = window.wp || {}).blockEditor = __webpack_exports__;
/******/ })()
;
Zerion Mini Shell 1.0