: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
container.style.setProperty("--wpforms-".concat(property), value);
container.style.setProperty("--wpforms-".concat(property, "-spare"), value);
* Set/unset field border vars in case of border-style is none.
* @param {Object} container Form container.
* @param {boolean} set True when set, false when unset.
toggleFieldBorderNoneCSSVarValue: function toggleFieldBorderNoneCSSVarValue(container, set) {
var cont = container.querySelector('form');
cont.style.setProperty('--wpforms-field-border-style', 'solid');
cont.style.setProperty('--wpforms-field-border-size', '1px');
cont.style.setProperty('--wpforms-field-border-color', 'transparent');
cont.style.setProperty('--wpforms-field-border-style', null);
cont.style.setProperty('--wpforms-field-border-size', null);
cont.style.setProperty('--wpforms-field-border-color', null);
* Maybe set the button's alternative background color.
* @param {string} value Attribute value.
* @param {string} buttonBorderColor Button border color.
* @param {Object} container Form container.
* @return {string|*} New background color.
maybeSetButtonAltBackgroundColor: function maybeSetButtonAltBackgroundColor(value, buttonBorderColor, container) {
// Setting css property value to child `form` element overrides the parent property value.
var form = container.querySelector('form');
form.style.setProperty('--wpforms-button-background-color-alt', value);
if (WPFormsUtils.cssColorsUtils.isTransparentColor(value)) {
return WPFormsUtils.cssColorsUtils.isTransparentColor(buttonBorderColor) ? defaultStyleSettings.buttonBackgroundColor : buttonBorderColor;
* Maybe set the button's alternative text color.
* @param {string} value Attribute value.
* @param {string} buttonBackgroundColor Button background color.
* @param {string} buttonBorderColor Button border color.
* @param {Object} container Form container.
maybeSetButtonAltTextColor: function maybeSetButtonAltTextColor(value, buttonBackgroundColor, buttonBorderColor, container) {
var form = container.querySelector('form');
value = value.toLowerCase();
if (WPFormsUtils.cssColorsUtils.isTransparentColor(value) || value === buttonBackgroundColor || WPFormsUtils.cssColorsUtils.isTransparentColor(buttonBackgroundColor) && value === buttonBorderColor) {
altColor = WPFormsUtils.cssColorsUtils.getContrastColor(buttonBackgroundColor);
container.style.setProperty("--wpforms-button-text-color-alt", value);
form.style.setProperty("--wpforms-button-text-color-alt", altColor);
* Maybe update accent color.
* @param {string} color Color value.
* @param {string} buttonBackgroundColor Button background color.
* @param {Object} container Form container.
maybeUpdateAccentColor: function maybeUpdateAccentColor(color, buttonBackgroundColor, container) {
// Setting css property value to child `form` element overrides the parent property value.
var form = container.querySelector('form');
// Fallback to default color if the border color is transparent.
color = WPFormsUtils.cssColorsUtils.isTransparentColor(color) ? defaultStyleSettings.buttonBackgroundColor : color;
if (WPFormsUtils.cssColorsUtils.isTransparentColor(buttonBackgroundColor)) {
form.style.setProperty('--wpforms-button-background-color-alt', 'rgba( 0, 0, 0, 0 )');
form.style.setProperty('--wpforms-button-background-color', color);
container.style.setProperty('--wpforms-button-background-color-alt', buttonBackgroundColor);
form.style.setProperty('--wpforms-button-background-color-alt', null);
form.style.setProperty('--wpforms-button-background-color', null);
* Get settings fields event handlers.
* @param {Object} props Block properties.
* @return {Object} Object that contains event handlers for the settings fields.
getSettingsFieldsHandlers: function getSettingsFieldsHandlers(props) {
// eslint-disable-line max-lines-per-function
* Field style attribute change event handler.
* @param {string} attribute Attribute name.
* @param {string} value New attribute value.
styleAttrChange: function styleAttrChange(attribute, value) {
var block = app.getBlockContainer(props),
container = block.querySelector("#wpforms-".concat(props.attributes.formId)),
// Unset the color means setting the transparent color.
if (attribute.includes('Color')) {
value = (_value = value) !== null && _value !== void 0 ? _value : 'rgba( 0, 0, 0, 0 )';
app.updatePreviewCSSVarValue(attribute, value, container, props);
setAttr[attribute] = value;
app.setBlockRuntimeStateVar(props.clientId, 'prevAttributesState', props.attributes);
props.setAttributes(setAttr);
triggerServerRender = false;
this.updateCopyPasteContent();
app.panels.themes.updateCustomThemeAttribute(attribute, value, props);
this.maybeToggleDropdown(props, attribute);
// Trigger event for developers.
el.$window.trigger('wpformsFormSelectorStyleAttrChange', [block, props, attribute, value]);
* Handles the toggling of the dropdown menu's visibility.
* @param {Object} props The block properties.
* @param {string} attribute The name of the attribute being changed.
maybeToggleDropdown: function maybeToggleDropdown(props, attribute) {
// eslint-disable-line no-shadow
var formId = props.attributes.formId;
var menu = document.querySelector("#wpforms-form-".concat(formId, " .choices__list.choices__list--dropdown"));
var classicMenu = document.querySelector("#wpforms-form-".concat(formId, " .wpforms-field-select-style-classic select"));
if (attribute === 'fieldMenuColor') {
menu.classList.add('is-active');
menu.parentElement.classList.add('is-open');
this.showClassicMenu(classicMenu);
clearTimeout(dropdownTimeout);
dropdownTimeout = setTimeout(function () {
var toClose = document.querySelector("#wpforms-form-".concat(formId, " .choices__list.choices__list--dropdown"));
toClose.classList.remove('is-active');
toClose.parentElement.classList.remove('is-open');
_this.hideClassicMenu(document.querySelector("#wpforms-form-".concat(formId, " .wpforms-field-select-style-classic select")));
menu.classList.remove('is-active');
this.hideClassicMenu(classicMenu);
* Shows the classic menu.
* @param {Object} classicMenu The classic menu.
showClassicMenu: function showClassicMenu(classicMenu) {
classicMenu.style.cssText = 'padding-top: 40px; padding-inline-end: 0; padding-inline-start: 0; position: relative;';
classicMenu.querySelectorAll('option').forEach(function (option) {
option.style.cssText = 'border-left: 1px solid #8c8f94; border-right: 1px solid #8c8f94; padding: 0 10px; z-index: 999999; position: relative;';
classicMenu.querySelector('option:last-child').style.cssText = 'border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; padding: 0 10px; border-left: 1px solid #8c8f94; border-right: 1px solid #8c8f94; border-bottom: 1px solid #8c8f94; z-index: 999999; position: relative;';
* Hides the classic menu.
* @param {Object} classicMenu The classic menu.
hideClassicMenu: function hideClassicMenu(classicMenu) {
classicMenu.style.cssText = 'padding-top: 0; padding-inline-end: 24px; padding-inline-start: 12px; position: relative;';
classicMenu.querySelectorAll('option').forEach(function (option) {
option.style.cssText = 'border: none;';
* Field regular attribute change event handler.
* @param {string} attribute Attribute name.
* @param {string} value New attribute value.
attrChange: function attrChange(attribute, value) {
setAttr[attribute] = value;
app.setBlockRuntimeStateVar(props.clientId, 'prevAttributesState', props.attributes);
props.setAttributes(setAttr);
triggerServerRender = true;
this.updateCopyPasteContent();
* Update content of the "Copy/Paste" fields.
updateCopyPasteContent: function updateCopyPasteContent() {
var atts = wp.data.select('core/block-editor').getBlockAttributes(props.clientId);
for (var key in defaultStyleSettings) {
content[key] = atts[key];
copyPasteJsonValue: JSON.stringify(content)
* Paste settings handler.
* @param {string} value New attribute value.
pasteSettings: function pasteSettings(value) {
var pasteAttributes = app.parseValidateJson(value);
wp.data.dispatch('core/notices').createErrorNotice(strings.copy_paste_error, {
id: 'wpforms-json-parse-error'
this.updateCopyPasteContent();
pasteAttributes.copyPasteJsonValue = value;
var themeSlug = app.panels.themes.maybeCreateCustomThemeFromAttributes(pasteAttributes);
app.setBlockRuntimeStateVar(props.clientId, 'prevAttributesState', props.attributes);
props.setAttributes(pasteAttributes);
app.panels.themes.setBlockTheme(props, themeSlug);
triggerServerRender = false;
* Parse and validate JSON string.
* @param {string} value JSON string.
* @return {boolean|object} Parsed JSON object OR false on error.
parseValidateJson: function parseValidateJson(value) {
if (typeof value !== 'string') {
atts = JSON.parse(value.trim());
* Get WPForms icon DOM element.
* @return {DOM.element} WPForms icon DOM element.
getIcon: function getIcon() {
return createElement('svg', {
}, createElement('path', {
d: 'M544,0H68C30.445,0,0,30.445,0,68v476c0,37.556,30.445,68,68,68h476c37.556,0,68-30.444,68-68V68 C612,30.445,581.556,0,544,0z M464.44,68L387.6,120.02L323.34,68H464.44z M288.66,68l-64.26,52.02L147.56,68H288.66z M544,544H68 V68h22.1l136,92.14l79.9-64.6l79.56,64.6l136-92.14H544V544z M114.24,263.16h95.88v-48.28h-95.88V263.16z M114.24,360.4h95.88 v-48.62h-95.88V360.4z M242.76,360.4h255v-48.62h-255V360.4L242.76,360.4z M242.76,263.16h255v-48.28h-255V263.16L242.76,263.16z M368.22,457.3h129.54V408H368.22V457.3z'
* @return {Array} Blocks array.
getWPFormsBlocks: function getWPFormsBlocks() {
var wpformsBlocks = wp.data.select('core/block-editor').getBlocks();
return wpformsBlocks.filter(function (props) {
return props.name === 'wpforms/form-selector';
* @param {Object} props Block properties.
* @return {Object} Block attributes.
isClientIdAttrUnique: function isClientIdAttrUnique(props) {
var wpformsBlocks = app.getWPFormsBlocks();
for (var key in wpformsBlocks) {
// Skip the current block.
if (wpformsBlocks[key].clientId === props.clientId) {
if (wpformsBlocks[key].attributes.clientId === props.attributes.clientId) {
* @return {Object} Block attributes.
getBlockAttributes: function getBlockAttributes() {
* Get block runtime state variable.
* @param {string} clientId Block client ID.
* @param {string} varName Block runtime variable name.
* @return {*} Block runtime state variable value.
getBlockRuntimeStateVar: function getBlockRuntimeStateVar(clientId, varName) {
return (_blocks$clientId = blocks[clientId]) === null || _blocks$clientId === void 0 ? void 0 : _blocks$clientId[varName];
* Set block runtime state variable value.
* @param {string} clientId Block client ID.
* @param {string} varName Block runtime state key.
* @param {*} value State variable value.
* @return {boolean} True on success.
setBlockRuntimeStateVar: function setBlockRuntimeStateVar(clientId, varName, value) {
// eslint-disable-line complexity
if (!clientId || !varName) {
blocks[clientId] = blocks[clientId] || {};
blocks[clientId][varName] = value;
// Prevent referencing to object.
if (_typeof(value) === 'object' && !Array.isArray(value) && value !== null) {
blocks[clientId][varName] = _objectSpread({}, value);
* Get form selector options.
* @return {Array} Form options.
getFormOptions: function getFormOptions() {
var formOptions = formList.map(function (value) {
label: strings.form_select
* Get size selector options.
* @return {Array} Size options.
getSizeOptions: function getSizeOptions() {
* Event `wpformsFormSelectorEdit` handler.
* @param {Object} e Event object.
* @param {Object} props Block properties.
blockEdit: function blockEdit(e, props) {
var block = app.getBlockContainer(props);
if (!(block !== null && block !== void 0 && block.dataset)) {
app.initLeadFormSettings(block.parentElement);
* Init Lead Form Settings panels.
* @param {Element} block Block element.
* @param {Object} block.dataset Block element.
initLeadFormSettings: function initLeadFormSettings(block) {
if (!(block !== null && block !== void 0 && block.dataset)) {
if (!app.isFullStylingEnabled()) {
var clientId = block.dataset.block;
var $form = $(block.querySelector('.wpforms-container'));
var $panel = $(".wpforms-block-settings-".concat(clientId));
if ($form.hasClass('wpforms-lead-forms-container')) {
$panel.addClass('disabled_panel').find('.wpforms-gutenberg-panel-notice.wpforms-lead-form-notice').css('display', 'block');
$panel.find('.wpforms-gutenberg-panel-notice.wpforms-use-modern-notice').css('display', 'none');
$panel.removeClass('disabled_panel').find('.wpforms-gutenberg-panel-notice.wpforms-lead-form-notice').css('display', 'none');
$panel.find('.wpforms-gutenberg-panel-notice.wpforms-use-modern-notice').css('display', null);
* Event `wpformsFormSelectorFormLoaded` handler.
* @param {Object} e Event object.
formLoaded: function formLoaded(e) {
app.initLeadFormSettings(e.detail.block);
app.updateAccentColors(e.detail);
app.loadChoicesJS(e.detail);
app.initRichTextField(e.detail.formId);
app.initRepeaterField(e.detail.formId);
$(e.detail.block).off('click').on('click', app.blockClick);
* Click on the block event handler.
* @param {Object} e Event object.
blockClick: function blockClick(e) {
app.initLeadFormSettings(e.currentTarget);
* Update accent colors of some fields in GB block in Modern Markup mode.
* @param {Object} detail Event details object.
updateAccentColors: function updateAccentColors(detail) {
if (!wpforms_gutenberg_form_selector.is_modern_markup || !((_window$WPForms = window.WPForms) !== null && _window$WPForms !== void 0 && _window$WPForms.FrontendModern) || !(detail !== null && detail !== void 0 && detail.block)) {
var $form = $(detail.block.querySelector("#wpforms-".concat(detail.formId))),