: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
subscriberBlockOptions.panels.background.onSetTheme(subscriberProps);
* Get main settings JSX code.
* @param {Object} attributes Block attributes.
* @param {Object} handlers Block event handlers.
* @param {Object} formOptions Form selector options.
* @return {JSX.Element} Main setting JSX code.
getMainSettings: function getMainSettings(attributes, handlers, formOptions) {
return app.jsxParts.printEmptyFormsNotice(attributes.clientId);
return /*#__PURE__*/React.createElement(InspectorControls, {
key: "wpforms-gutenberg-form-selector-inspector-main-settings"
}, /*#__PURE__*/React.createElement(PanelBody, {
className: "wpforms-gutenberg-panel wpforms-gutenberg-panel-form-settings",
title: strings.form_settings
}, /*#__PURE__*/React.createElement(SelectControl, {
label: strings.form_selected,
value: attributes.formId,
onChange: function onChange(value) {
return handlers.attrChange('formId', value);
}), attributes.formId ? /*#__PURE__*/React.createElement("p", {
className: "wpforms-gutenberg-form-selector-actions"
}, /*#__PURE__*/React.createElement("a", {
href: urls.form_url.replace('{ID}', attributes.formId),
}, strings.form_edit), isPro && isLicenseActive && /*#__PURE__*/React.createElement(React.Fragment, null, "\xA0\xA0|\xA0\xA0", /*#__PURE__*/React.createElement("a", {
href: urls.entries_url.replace('{ID}', attributes.formId),
}, strings.form_entries))) : null, /*#__PURE__*/React.createElement(ToggleControl, {
label: strings.show_title,
checked: attributes.displayTitle,
onChange: function onChange(value) {
return handlers.attrChange('displayTitle', value);
}), /*#__PURE__*/React.createElement(ToggleControl, {
label: strings.show_description,
checked: attributes.displayDesc,
onChange: function onChange(value) {
return handlers.attrChange('displayDesc', value);
}), /*#__PURE__*/React.createElement("p", {
className: "wpforms-gutenberg-panel-notice"
}, /*#__PURE__*/React.createElement("strong", null, strings.panel_notice_head), strings.panel_notice_text, /*#__PURE__*/React.createElement("a", {
href: strings.panel_notice_link,
}, strings.panel_notice_link_text))));
* Print empty forms notice.
* @param {string} clientId Block client ID.
* @return {JSX.Element} Field styles JSX code.
printEmptyFormsNotice: function printEmptyFormsNotice(clientId) {
return /*#__PURE__*/React.createElement(InspectorControls, {
key: "wpforms-gutenberg-form-selector-inspector-main-settings"
}, /*#__PURE__*/React.createElement(PanelBody, {
className: "wpforms-gutenberg-panel",
title: strings.form_settings
}, /*#__PURE__*/React.createElement("p", {
className: "wpforms-gutenberg-panel-notice wpforms-warning wpforms-empty-form-notice",
}, /*#__PURE__*/React.createElement("strong", null, __('You haven’t created a form, yet!', 'wpforms-lite')), __('What are you waiting for?', 'wpforms-lite')), /*#__PURE__*/React.createElement("button", {
className: "get-started-button components-button is-secondary",
onClick: function onClick() {
app.openBuilderPopup(clientId);
}, __('Get Started', 'wpforms-lite'))));
* Get Label styles JSX code.
* @param {Object} props Block properties.
* @param {Object} handlers Block event handlers.
* @param {Object} sizeOptions Size selector options.
* @return {Object} Label styles JSX code.
getLabelStyles: function getLabelStyles(props, handlers, sizeOptions) {
return /*#__PURE__*/React.createElement(PanelBody, {
className: app.getPanelClass(props),
title: strings.label_styles
}, /*#__PURE__*/React.createElement(SelectControl, {
value: props.attributes.labelSize,
className: "wpforms-gutenberg-form-selector-fix-bottom-margin",
onChange: function onChange(value) {
return handlers.styleAttrChange('labelSize', value);
}), /*#__PURE__*/React.createElement("div", {
className: "wpforms-gutenberg-form-selector-color-picker"
}, /*#__PURE__*/React.createElement("div", {
className: "wpforms-gutenberg-form-selector-control-label"
}, strings.colors), /*#__PURE__*/React.createElement(PanelColorSettings, {
__experimentalIsRenderedInSidebar: true,
className: "wpforms-gutenberg-form-selector-color-panel",
value: props.attributes.labelColor,
onChange: function onChange(value) {
return handlers.styleAttrChange('labelColor', value);
value: props.attributes.labelSublabelColor,
onChange: function onChange(value) {
return handlers.styleAttrChange('labelSublabelColor', value);
label: strings.sublabel_hints.replace('&', '&')
value: props.attributes.labelErrorColor,
onChange: function onChange(value) {
return handlers.styleAttrChange('labelErrorColor', value);
label: strings.error_message
* Get Page Indicator styles JSX code.
* @param {Object} props Block properties.
* @param {Object} handlers Block event handlers.
* @return {Object} Page Indicator styles JSX code.
getPageIndicatorStyles: function getPageIndicatorStyles(props, handlers) {
// eslint-disable-line complexity
var hasPageBreak = app.hasPageBreak(formList, props.attributes.formId);
var hasRating = app.hasRating(formList, props.attributes.formId);
if (!hasPageBreak && !hasRating) {
if (hasPageBreak && hasRating) {
label = "".concat(strings.page_break, " / ").concat(strings.rating);
} else if (hasPageBreak) {
label = strings.page_break;
return /*#__PURE__*/React.createElement(PanelBody, {
className: app.getPanelClass(props),
title: strings.other_styles
}, /*#__PURE__*/React.createElement("div", {
className: "wpforms-gutenberg-form-selector-color-picker"
}, /*#__PURE__*/React.createElement("div", {
className: "wpforms-gutenberg-form-selector-control-label"
}, strings.colors), /*#__PURE__*/React.createElement(PanelColorSettings, {
__experimentalIsRenderedInSidebar: true,
className: "wpforms-gutenberg-form-selector-color-panel",
value: props.attributes.pageBreakColor,
onChange: function onChange(value) {
return handlers.styleAttrChange('pageBreakColor', value);
* Get style settings JSX code.
* @param {Object} props Block properties.
* @param {Object} handlers Block event handlers.
* @param {Object} sizeOptions Size selector options.
* @param {Object} blockOptions Block options loaded from external modules.
* @return {Object} Inspector controls JSX code.
getStyleSettings: function getStyleSettings(props, handlers, sizeOptions, blockOptions) {
return /*#__PURE__*/React.createElement(InspectorControls, {
key: "wpforms-gutenberg-form-selector-style-settings"
}, blockOptions.getThemesPanel(props, app, blockOptions.stockPhotos), blockOptions.getFieldStyles(props, handlers, sizeOptions, app), app.jsxParts.getLabelStyles(props, handlers, sizeOptions), blockOptions.getButtonStyles(props, handlers, sizeOptions, app), blockOptions.getContainerStyles(props, handlers, app), blockOptions.getBackgroundStyles(props, handlers, app, blockOptions.stockPhotos), app.jsxParts.getPageIndicatorStyles(props, handlers));
* Get block content JSX code.
* @param {Object} props Block properties.
* @return {JSX.Element} Block content JSX code.
getBlockFormContent: function getBlockFormContent(props) {
if (triggerServerRender) {
return /*#__PURE__*/React.createElement(ServerSideRender, {
key: "wpforms-gutenberg-form-selector-server-side-renderer",
block: "wpforms/form-selector",
attributes: props.attributes
var clientId = props.clientId;
var block = app.getBlockContainer(props);
// In the case of empty content, use server side renderer.
// This happens when the block is duplicated or converted to a reusable block.
if (!(block !== null && block !== void 0 && block.innerHTML)) {
triggerServerRender = true;
return app.jsxParts.getBlockFormContent(props);
blocks[clientId] = blocks[clientId] || {};
blocks[clientId].blockHTML = block.innerHTML;
blocks[clientId].loadedFormId = props.attributes.formId;
return /*#__PURE__*/React.createElement(Fragment, {
key: "wpforms-gutenberg-form-selector-fragment-form-html"
}, /*#__PURE__*/React.createElement("div", {
dangerouslySetInnerHTML: {
__html: blocks[clientId].blockHTML
* Get block preview JSX code.
* @return {JSX.Element} Block preview JSX code.
getBlockPreview: function getBlockPreview() {
return /*#__PURE__*/React.createElement(Fragment, {
key: "wpforms-gutenberg-form-selector-fragment-block-preview"
}, /*#__PURE__*/React.createElement("img", {
src: wpforms_gutenberg_form_selector.block_preview_url,
* Get block empty JSX code.
* @param {Object} props Block properties.
* @return {JSX.Element} Block empty JSX code.
getEmptyFormsPreview: function getEmptyFormsPreview(props) {
var clientId = props.clientId;
return /*#__PURE__*/React.createElement(Fragment, {
key: "wpforms-gutenberg-form-selector-fragment-block-empty"
}, /*#__PURE__*/React.createElement("div", {
className: "wpforms-no-form-preview"
}, /*#__PURE__*/React.createElement("img", {
src: wpforms_gutenberg_form_selector.block_empty_url,
}), /*#__PURE__*/React.createElement("p", null, createInterpolateElement(__('You can use <b>WPForms</b> to build contact forms, surveys, payment forms, and more with just a few clicks.', 'wpforms-lite'), {
b: /*#__PURE__*/React.createElement("strong", null)
})), /*#__PURE__*/React.createElement("button", {
className: "get-started-button components-button is-primary",
onClick: function onClick() {
app.openBuilderPopup(clientId);
}, __('Get Started', 'wpforms-lite')), /*#__PURE__*/React.createElement("p", {
}, createInterpolateElement(__('Need some help? Check out our <a>comprehensive guide.</a>', 'wpforms-lite'), {
// eslint-disable-next-line jsx-a11y/anchor-has-content
a: /*#__PURE__*/React.createElement("a", {
href: wpforms_gutenberg_form_selector.wpforms_guide,
rel: "noopener noreferrer"
})), /*#__PURE__*/React.createElement("div", {
id: "wpforms-gutenberg-popup",
className: "wpforms-builder-popup"
}, /*#__PURE__*/React.createElement("iframe", {
id: "wpforms-builder-iframe",
title: "WPForms Builder Popup"
* Get block placeholder (form selector) JSX code.
* @param {Object} attributes Block attributes.
* @param {Object} handlers Block event handlers.
* @param {Object} formOptions Form selector options.
* @return {JSX.Element} Block placeholder JSX code.
getBlockPlaceholder: function getBlockPlaceholder(attributes, handlers, formOptions) {
var isFormNotAvailable = attributes.formId && !app.isFormAvailable(attributes.formId);
return /*#__PURE__*/React.createElement(Placeholder, {
key: "wpforms-gutenberg-form-selector-wrap",
className: "wpforms-gutenberg-form-selector-wrap"
}, /*#__PURE__*/React.createElement("img", {
src: wpforms_gutenberg_form_selector.logo_url,
}), isFormNotAvailable && /*#__PURE__*/React.createElement("p", {
}, strings.form_not_available_message), /*#__PURE__*/React.createElement(SelectControl, {
key: "wpforms-gutenberg-form-selector-select-control",
value: attributes.formId,
onChange: function onChange(value) {
return handlers.attrChange('formId', value);
* Determine if the form has a Page Break field.
* @param {Object} forms The forms' data object.
* @param {number|string} formId Form ID.
* @return {boolean} True when the form has a Page Break field, false otherwise.
hasPageBreak: function hasPageBreak(forms, formId) {
var currentForm = forms.find(function (form) {
return parseInt(form.ID, 10) === parseInt(formId, 10);
if (!currentForm.post_content) {
var fields = (_JSON$parse = JSON.parse(currentForm.post_content)) === null || _JSON$parse === void 0 ? void 0 : _JSON$parse.fields;
return Object.values(fields).some(function (field) {
return field.type === 'pagebreak';
hasRating: function hasRating(forms, formId) {
var currentForm = forms.find(function (form) {
return parseInt(form.ID, 10) === parseInt(formId, 10);
if (!currentForm.post_content || !isPro || !isLicenseActive) {
var fields = (_JSON$parse2 = JSON.parse(currentForm.post_content)) === null || _JSON$parse2 === void 0 ? void 0 : _JSON$parse2.fields;
return Object.values(fields).some(function (field) {
return field.type === 'rating';
* Get Style Settings panel class.
* @param {Object} props Block properties.
* @return {string} Style Settings panel class.
getPanelClass: function getPanelClass(props) {
var cssClass = 'wpforms-gutenberg-panel wpforms-block-settings-' + props.clientId;
if (!app.isFullStylingEnabled()) {
cssClass += ' disabled_panel';
* Get color panel settings CSS class.
* @param {string} borderStyle Border style value.
* @return {string} Style Settings panel class.
getColorPanelClass: function getColorPanelClass(borderStyle) {
var cssClass = 'wpforms-gutenberg-form-selector-color-panel';
if (borderStyle === 'none') {
cssClass += ' wpforms-gutenberg-form-selector-border-color-disabled';
* Determine whether the full styling is enabled.
* @return {boolean} Whether the full styling is enabled.
isFullStylingEnabled: function isFullStylingEnabled() {
return wpforms_gutenberg_form_selector.is_modern_markup && wpforms_gutenberg_form_selector.is_full_styling;
* Get block container DOM element.
* @param {Object} props Block properties.
* @return {Element} Block container.
getBlockContainer: function getBlockContainer(props) {
var blockSelector = "#block-".concat(props.clientId, " > div");
var block = document.querySelector(blockSelector);
// For FSE / Gutenberg plugin, we need to take a look inside the iframe.
var editorCanvas = document.querySelector('iframe[name="editor-canvas"]');
block = editorCanvas === null || editorCanvas === void 0 ? void 0 : editorCanvas.contentWindow.document.querySelector(blockSelector);
* Update CSS variable(s) value(s) of the given attribute for given container on the preview.
* @param {string} attribute Style attribute: field-size, label-size, button-size, etc.
* @param {string} value Property new value.
* @param {Element} container Form container.
* @param {Object} props Block properties.
updatePreviewCSSVarValue: function updatePreviewCSSVarValue(attribute, value, container, props) {
// eslint-disable-line complexity, max-lines-per-function
if (!container || !attribute) {
var property = attribute.replace(/[A-Z]/g, function (letter) {
return "-".concat(letter.toLowerCase());
if (typeof customStylesHandlers[property] === 'function') {
customStylesHandlers[property](container, value);
case 'container-shadow-size':
for (var key in sizes[property][value]) {
container.style.setProperty("--wpforms-".concat(property, "-").concat(key), sizes[property][value][key]);
case 'field-border-style':
app.toggleFieldBorderNoneCSSVarValue(container, true);
app.toggleFieldBorderNoneCSSVarValue(container, false);
container.style.setProperty("--wpforms-".concat(property), value);
case 'button-background-color':
app.maybeUpdateAccentColor(props.attributes.buttonBorderColor, value, container);
value = app.maybeSetButtonAltBackgroundColor(value, props.attributes.buttonBorderColor, container);
app.maybeSetButtonAltTextColor(props.attributes.buttonTextColor, value, props.attributes.buttonBorderColor, container);
container.style.setProperty("--wpforms-".concat(property), value);
case 'button-border-color':
app.maybeUpdateAccentColor(value, props.attributes.buttonBackgroundColor, container);
app.maybeSetButtonAltTextColor(props.attributes.buttonTextColor, props.attributes.buttonBackgroundColor, value, container);
container.style.setProperty("--wpforms-".concat(property), value);
case 'button-text-color':
app.maybeSetButtonAltTextColor(value, props.attributes.buttonBackgroundColor, props.attributes.buttonBorderColor, container);
container.style.setProperty("--wpforms-".concat(property), value);
It is recommended that you Edit text format, this type of Fix handles quite a lot in one request
