: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
var triggerServerRender = true;
* Common block attributes.
default: defaultStyleSettings.formId
default: defaultStyleSettings.displayTitle
default: defaultStyleSettings.displayDesc
default: defaultStyleSettings.theme
default: defaultStyleSettings.themeName
default: defaultStyleSettings.labelSize
default: defaultStyleSettings.labelColor
default: defaultStyleSettings.labelSublabelColor
default: defaultStyleSettings.labelErrorColor
default: defaultStyleSettings.pageBreakColor
default: defaultStyleSettings.customCss
default: defaultStyleSettings.copyPasteJsonValue
* Handlers for custom styles settings, defined outside this module.
var customStylesHandlers = {};
* Public functions and properties.
* @param {Object} blockOptions Block options.
init: function init(blockOptions) {
app.panels = blockOptions.panels;
app.education = blockOptions.education;
app.initDefaults(blockOptions);
app.registerBlock(blockOptions);
ready: function ready() {
events: function events() {
el.$window.on('wpformsFormSelectorEdit', _.debounce(app.blockEdit, 250)).on('wpformsFormSelectorFormLoaded', _.debounce(app.formLoaded, 250));
initJConfirm: function initJConfirm() {
// jquery-confirm defaults.
backgroundDismiss: false,
animateFromElement: false
* Get a fresh list of forms via REST-API.
* @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-api-fetch/
getForms: function getForms() {
return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
return _regeneratorRuntime().wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
return _context.abrupt("return");
// Set the flag to true indicating a fetch is in progress.
path: wpforms_gutenberg_form_selector.route_namespace + 'forms/',
formList = _context.sent;
_context.t0 = _context["catch"](3);
// eslint-disable-next-line no-console
console.error(_context.t0);
return _context.finish(12);
}, _callee, null, [[3, 9, 12, 15]]);
* @param {string} clientID Block Client ID.
openBuilderPopup: function openBuilderPopup(clientID) {
if ($.isEmptyObject($popup)) {
var tmpl = $('#wpforms-gutenberg-popup');
var parent = $('#wpwrap');
$popup = parent.siblings('#wpforms-gutenberg-popup');
var url = wpforms_gutenberg_form_selector.get_started_url,
$iframe = $popup.find('iframe');
app.builderCloseButtonEvent(clientID);
$iframe.attr('src', url);
* Close button (inside the form builder) click event.
* @param {string} clientID Block Client ID.
builderCloseButtonEvent: function builderCloseButtonEvent(clientID) {
$popup.off('wpformsBuilderInPopupClose').on('wpformsBuilderInPopupClose', function (e, action, formId, formTitle) {
if (action !== 'saved' || !formId) {
// Insert a new block when a new form is created from the popup to update the form list and attributes.
var newBlock = wp.blocks.createBlock('wpforms/form-selector', {
formId: formId.toString() // Expects string value, make sure we insert string.
// eslint-disable-next-line camelcase
wp.data.dispatch('core/block-editor').removeBlock(clientID);
wp.data.dispatch('core/block-editor').insertBlocks(newBlock);
* @param {Object} blockOptions Additional block options.
// eslint-disable-next-line max-lines-per-function
registerBlock: function registerBlock(blockOptions) {
registerBlockType('wpforms/form-selector', {
description: strings.description,
keywords: strings.form_keywords,
attributes: app.getBlockAttributes(),
customClassName: app.hasForms()
edit: function edit(props) {
var attributes = props.attributes;
var formOptions = app.getFormOptions();
var handlers = app.getSettingsFieldsHandlers(props);
// Store block clientId in attributes.
if (!attributes.clientId || !app.isClientIdAttrUnique(props)) {
// We just want the client ID to update once.
// The block editor doesn't have a fixed block ID, so we need to get it on the initial load, but only once.
var jsx = [app.jsxParts.getMainSettings(attributes, handlers, formOptions)];
// Block preview picture.
jsx.push(app.jsxParts.getEmptyFormsPreview(props));
var sizeOptions = app.getSizeOptions();
// Show placeholder when form is not available (trashed, deleted etc.).
if (attributes && attributes.formId && app.isFormAvailable(attributes.formId) === false) {
// Block placeholder (form selector).
jsx.push(app.jsxParts.getBlockPlaceholder(props.attributes, handlers, formOptions));
// Form style settings & block content.
// Subscribe to block events.
app.maybeSubscribeToBlockEvents(props, handlers, blockOptions);
jsx.push(app.jsxParts.getStyleSettings(props, handlers, sizeOptions, blockOptions), app.jsxParts.getBlockFormContent(props));
handlers.updateCopyPasteContent();
el.$window.trigger('wpformsFormSelectorEdit', [props]);
// Block preview picture.
if (attributes.preview) {
jsx.push(app.jsxParts.getBlockPreview());
// Block placeholder (form selector).
jsx.push(app.jsxParts.getBlockPlaceholder(props.attributes, handlers, formOptions));
* Init default style settings.
* @since 1.8.8 Added blockOptions parameter.
* @param {Object} blockOptions Additional block options.
initDefaults: function initDefaults() {
var blockOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
commonAttributes = _objectSpread(_objectSpread({}, commonAttributes), blockOptions.getCommonAttributes());
customStylesHandlers = blockOptions.setStylesHandlers;
['formId', 'copyPasteJsonValue'].forEach(function (key) {
return delete defaultStyleSettings[key];
* Check if the site has forms.
* @return {boolean} Whether site has at least one form.
hasForms: function hasForms() {
return formList.length > 0;
* Check if form is available to be previewed.
* @param {number} formId Form ID.
* @return {boolean} Whether form is available.
isFormAvailable: function isFormAvailable(formId) {
return formList.find(function (_ref2) {
return ID === Number(formId);
* Set triggerServerRender flag.
* @param {boolean} $flag The value of the triggerServerRender flag.
setTriggerServerRender: function setTriggerServerRender($flag) {
triggerServerRender = Boolean($flag);
* Maybe subscribe to block events.
* @param {Object} subscriberProps Subscriber block properties.
* @param {Object} subscriberHandlers Subscriber block event handlers.
* @param {Object} subscriberBlockOptions Subscriber block options.
maybeSubscribeToBlockEvents: function maybeSubscribeToBlockEvents(subscriberProps, subscriberHandlers, subscriberBlockOptions) {
var id = subscriberProps.clientId;
// Unsubscribe from block events.
// This is needed to avoid multiple subscriptions when the block is re-rendered.
el.$window.off('wpformsFormSelectorDeleteTheme.' + id).off('wpformsFormSelectorUpdateTheme.' + id).off('wpformsFormSelectorSetTheme.' + id);
// Subscribe to block events.
el.$window.on('wpformsFormSelectorDeleteTheme.' + id, app.subscriberDeleteTheme(subscriberProps, subscriberBlockOptions)).on('wpformsFormSelectorUpdateTheme.' + id, app.subscriberUpdateTheme(subscriberProps, subscriberBlockOptions)).on('wpformsFormSelectorSetTheme.' + id, app.subscriberSetTheme(subscriberProps, subscriberBlockOptions));
* Block event `wpformsFormSelectorDeleteTheme` handler.
* @param {Object} subscriberProps Subscriber block properties
* @param {Object} subscriberBlockOptions Subscriber block options.
* @return {Function} Event handler.
subscriberDeleteTheme: function subscriberDeleteTheme(subscriberProps, subscriberBlockOptions) {
return function (e, themeSlug, triggerProps) {
var _subscriberProps$attr, _subscriberBlockOptio;
if (subscriberProps.clientId === triggerProps.clientId) {
if ((subscriberProps === null || subscriberProps === void 0 || (_subscriberProps$attr = subscriberProps.attributes) === null || _subscriberProps$attr === void 0 ? void 0 : _subscriberProps$attr.theme) !== themeSlug) {
if (!(subscriberBlockOptions !== null && subscriberBlockOptions !== void 0 && (_subscriberBlockOptio = subscriberBlockOptions.panels) !== null && _subscriberBlockOptio !== void 0 && _subscriberBlockOptio.themes)) {
// Reset theme to default one.
subscriberBlockOptions.panels.themes.setBlockTheme(subscriberProps, 'default');
* Block event `wpformsFormSelectorDeleteTheme` handler.
* @param {Object} subscriberProps Subscriber block properties
* @param {Object} subscriberBlockOptions Subscriber block options.
* @return {Function} Event handler.
subscriberUpdateTheme: function subscriberUpdateTheme(subscriberProps, subscriberBlockOptions) {
return function (e, themeSlug, themeData, triggerProps) {
var _subscriberProps$attr2, _subscriberBlockOptio2;
if (subscriberProps.clientId === triggerProps.clientId) {
if ((subscriberProps === null || subscriberProps === void 0 || (_subscriberProps$attr2 = subscriberProps.attributes) === null || _subscriberProps$attr2 === void 0 ? void 0 : _subscriberProps$attr2.theme) !== themeSlug) {
if (!(subscriberBlockOptions !== null && subscriberBlockOptions !== void 0 && (_subscriberBlockOptio2 = subscriberBlockOptions.panels) !== null && _subscriberBlockOptio2 !== void 0 && _subscriberBlockOptio2.themes)) {
// Reset theme to default one.
subscriberBlockOptions.panels.themes.setBlockTheme(subscriberProps, themeSlug);
* Block event `wpformsFormSelectorSetTheme` handler.
* @param {Object} subscriberProps Subscriber block properties
* @param {Object} subscriberBlockOptions Subscriber block options.
* @return {Function} Event handler.
subscriberSetTheme: function subscriberSetTheme(subscriberProps, subscriberBlockOptions) {
// noinspection JSUnusedLocalSymbols
return function (e, block, themeSlug, triggerProps) {
var _subscriberBlockOptio3;
// eslint-disable-line no-unused-vars
if (subscriberProps.clientId === triggerProps.clientId) {
if (!(subscriberBlockOptions !== null && subscriberBlockOptions !== void 0 && (_subscriberBlockOptio3 = subscriberBlockOptions.panels) !== null && _subscriberBlockOptio3 !== void 0 && _subscriberBlockOptio3.themes)) {