diff --git a/assets/application-admin.js b/assets/application-admin.js index d245ebb8..f1cca9de 100644 --- a/assets/application-admin.js +++ b/assets/application-admin.js @@ -11,5 +11,5 @@ import './styles/application-admin.scss'; import './../src/Blocks/assets/application-admin'; // // Load Scripts -import './scripts/application-admin'; +// import './scripts/application-admin'; import './../src/Blocks/assets/scripts/application-admin'; diff --git a/assets/application.js b/assets/application.js index 5050e60a..4dd94af5 100644 --- a/assets/application.js +++ b/assets/application.js @@ -6,14 +6,5 @@ * Usage: `WordPress frontend screen`. */ -// Load Styles -import './styles/application.scss'; - -// // Load Scripts -import './scripts/application'; - // Load images import './images'; - -// Load fonts -import './fonts'; diff --git a/src/Blocks/assets/application-blocks-frontend.js b/src/Blocks/assets/application-blocks-frontend.js index 6ff688a8..ed45ba4d 100644 --- a/src/Blocks/assets/application-blocks-frontend.js +++ b/src/Blocks/assets/application-blocks-frontend.js @@ -5,8 +5,5 @@ * Usage: `WordPress frontend screen`. */ -// Styles. -import './styles/application-blocks-frontend.scss'; - // Scripts. import './scripts/application-blocks-frontend'; diff --git a/src/Blocks/assets/scripts/application-blocks-editor.js b/src/Blocks/assets/scripts/application-blocks-editor.js index da07bc41..491d2402 100644 --- a/src/Blocks/assets/scripts/application-blocks-editor.js +++ b/src/Blocks/assets/scripts/application-blocks-editor.js @@ -1,4 +1,4 @@ -/* global esFormsBlocksLocalization */ +/* global esFormsLocalization */ /** * This is the main entry point for Block Editor blocks scripts used for the `WordPress admin editor`. * This file registers blocks dynamically using `registerBlocks` helper method. @@ -36,7 +36,7 @@ registerBlocks( outputCssVariablesGlobal(); // Remove form-selector block from anywhere else other than form CPT. -if (esFormsBlocksLocalization?.postType !== 'eightshift-forms') { +if (esFormsLocalization?.postType !== 'eightshift-forms') { const namespace = select(STORE_NAME).getSettingsNamespace(); unregisterBlockType(`${namespace}/form-selector`); diff --git a/src/Blocks/assets/styles/application-blocks-frontend.scss b/src/Blocks/assets/styles/application-blocks-frontend.scss deleted file mode 100644 index a8dd6d78..00000000 --- a/src/Blocks/assets/styles/application-blocks-frontend.scss +++ /dev/null @@ -1,21 +0,0 @@ -/** - * This is the main entry point for Block Editor blocks styles used for the `WordPress frontend screen`. - * File names must follow naming convention to be able to run dynamically. - * - * `src/blocks/custom/block_name/block_name-editor.scss`. - * - * Usage: `WordPress frontend screen`. - * - */ - -// Globals. -// @import './../../../../assets/styles/parts/shared'; - -// Register Wrapper block styles. -// @import './../../wrapper/wrapper-frontend.scss'; - -// Find all components and require component_name-style.scss inside it. -// @import './../../components/*/*-frontend.scss'; - -// Find all blocks and require block_name-editor.scss inside it. -// @import './../../custom/*/*-frontend.scss'; diff --git a/src/Blocks/assets/styles/application-editor.scss b/src/Blocks/assets/styles/application-editor.scss index 4ee1d946..2574b2e0 100644 --- a/src/Blocks/assets/styles/application-editor.scss +++ b/src/Blocks/assets/styles/application-editor.scss @@ -8,7 +8,6 @@ // Globals. @import './../../../../assets/styles/parts/shared'; - @import '@eightshift/frontend-libs/styles/es-utility-classes.scss'; @import '@eightshift/frontend-libs/styles/es-component-styles.scss'; diff --git a/src/Blocks/components/checkbox/checkbox-style.scss b/src/Blocks/components/checkbox/checkbox-style.scss index c6fa544a..4d28581b 100644 --- a/src/Blocks/components/checkbox/checkbox-style.scss +++ b/src/Blocks/components/checkbox/checkbox-style.scss @@ -1,5 +1,6 @@ .es-checkbox { $this: &; + --es-checkbox-scoped-icon-size: 18px; margin-bottom: var(--es-checkbox-scoped-spacing, 10px); diff --git a/src/Blocks/components/checkboxes/components/checkboxes-editor.js b/src/Blocks/components/checkboxes/components/checkboxes-editor.js index 5d298fa8..695f0e88 100644 --- a/src/Blocks/components/checkboxes/components/checkboxes-editor.js +++ b/src/Blocks/components/checkboxes/components/checkboxes-editor.js @@ -1,4 +1,4 @@ -/* global esFormsBlocksLocalization */ +/* global esFormsLocalization */ import React, { useMemo, useEffect } from 'react'; import { @@ -34,10 +34,10 @@ export const CheckboxesEditor = (attributes) => { let additionalContent = ''; if ( - typeof esFormsBlocksLocalization !== 'undefined' && - (esFormsBlocksLocalization?.checkboxesBlockAdditionalContent) !== '' + typeof esFormsLocalization !== 'undefined' && + (esFormsLocalization?.checkboxesBlockAdditionalContent) !== '' ) { - additionalContent = esFormsBlocksLocalization.checkboxesBlockAdditionalContent; + additionalContent = esFormsLocalization.checkboxesBlockAdditionalContent; } const checkboxes = ( diff --git a/src/Blocks/components/divider/divider-admin.scss b/src/Blocks/components/divider/divider-admin.scss index 4e20f1c0..5120cf47 100644 --- a/src/Blocks/components/divider/divider-admin.scss +++ b/src/Blocks/components/divider/divider-admin.scss @@ -1,7 +1,9 @@ .es-divider { border-bottom: 1px solid var(--global-colors-es-ebb); - margin-bottom: 30px; - margin-top: 30px; - margin-left: calc(var(--global-es-spacing-horizontal) * -1); - margin-right: calc(var(--global-es-spacing-horizontal) * -1); + margin: { + bottom: 30px; + top: 30px; + left: calc(var(--global-es-spacing-horizontal) * -1); + right: calc(var(--global-es-spacing-horizontal) * -1); + } } diff --git a/src/Blocks/components/field/components/field-editor.js b/src/Blocks/components/field/components/field-editor.js index 6544bfec..ba4f7778 100644 --- a/src/Blocks/components/field/components/field-editor.js +++ b/src/Blocks/components/field/components/field-editor.js @@ -1,4 +1,4 @@ -/* global esFormsBlocksLocalization */ +/* global esFormsLocalization */ import React from 'react'; import classnames from 'classnames'; @@ -25,14 +25,14 @@ export const FieldEditor = (attributes) => { // Update media breakpoints from the filter. if ( - typeof esFormsBlocksLocalization !== 'undefined' && - isObject(esFormsBlocksLocalization?.mediaBreakpoints) && - Object.prototype.hasOwnProperty.call(esFormsBlocksLocalization?.mediaBreakpoints, "mobile") && - Object.prototype.hasOwnProperty.call(esFormsBlocksLocalization?.mediaBreakpoints, "tablet") && - Object.prototype.hasOwnProperty.call(esFormsBlocksLocalization?.mediaBreakpoints, "desktop") && - Object.prototype.hasOwnProperty.call(esFormsBlocksLocalization?.mediaBreakpoints, "large") + typeof esFormsLocalization !== 'undefined' && + isObject(esFormsLocalization?.mediaBreakpoints) && + Object.prototype.hasOwnProperty.call(esFormsLocalization?.mediaBreakpoints, "mobile") && + Object.prototype.hasOwnProperty.call(esFormsLocalization?.mediaBreakpoints, "tablet") && + Object.prototype.hasOwnProperty.call(esFormsLocalization?.mediaBreakpoints, "desktop") && + Object.prototype.hasOwnProperty.call(esFormsLocalization?.mediaBreakpoints, "large") ) { - dispatch(STORE_NAME).setSettingsGlobalVariablesBreakpoints(esFormsBlocksLocalization.mediaBreakpoints); + dispatch(STORE_NAME).setSettingsGlobalVariablesBreakpoints(esFormsLocalization.mediaBreakpoints); } const fieldLabel = checkAttr('fieldLabel', attributes, manifest); diff --git a/src/Blocks/components/field/components/field-options-advanced.js b/src/Blocks/components/field/components/field-options-advanced.js index e0c947e6..d217d7ad 100644 --- a/src/Blocks/components/field/components/field-options-advanced.js +++ b/src/Blocks/components/field/components/field-options-advanced.js @@ -1,4 +1,4 @@ -/* global esFormsBlocksLocalization */ +/* global esFormsLocalization */ import React from 'react'; import { __ } from '@wordpress/i18n'; @@ -34,8 +34,8 @@ export const FieldOptionsAdvanced = (attributes) => { let fieldStyleOptions = []; - if (typeof esFormsBlocksLocalization !== 'undefined' && isObject(esFormsBlocksLocalization?.fieldBlockStyleOptions)) { - fieldStyleOptions = esFormsBlocksLocalization.fieldBlockStyleOptions[blockName]; + if (typeof esFormsLocalization !== 'undefined' && isObject(esFormsLocalization?.fieldBlockStyleOptions)) { + fieldStyleOptions = esFormsLocalization.fieldBlockStyleOptions[blockName]; } const mainFieldWidth = checkAttr(fieldWidth['large'], attributes, manifest, true); diff --git a/src/Blocks/components/field/field-admin.scss b/src/Blocks/components/field/field-admin.scss index 247ace8a..bd588fdb 100644 --- a/src/Blocks/components/field/field-admin.scss +++ b/src/Blocks/components/field/field-admin.scss @@ -26,15 +26,13 @@ font-size: inherit; padding-top: 0.75rem; margin-bottom: 0; - grid-column-start: 1; - grid-column-end: 4; + grid-column: 1 / 4; } } &__content { @include media(desktop up) { - grid-column-start: 4; - grid-column-end: 13; + grid-column: 4 / 13; } @include media(large up) { @@ -47,8 +45,7 @@ margin-top: 0.5rem; @include media(desktop up) { - grid-column-start: 4; - grid-column-end: 13; + grid-column: 4 / 13; } @include media(large up) { @@ -75,8 +72,7 @@ &__es-error { @include media(desktop up) { - grid-column-start: 4; - grid-column-end: 13; + grid-column: 4 / 13; } @include media(large up) { diff --git a/src/Blocks/components/file/components/file-editor.js b/src/Blocks/components/file/components/file-editor.js index fcca7068..fc088cfe 100644 --- a/src/Blocks/components/file/components/file-editor.js +++ b/src/Blocks/components/file/components/file-editor.js @@ -1,4 +1,4 @@ -/* global esFormsBlocksLocalization */ +/* global esFormsLocalization */ import React, { useMemo, useEffect } from 'react'; import classnames from 'classnames'; @@ -39,10 +39,10 @@ export const FileEditor = (attributes) => { let additionalContent = ''; if ( - typeof esFormsBlocksLocalization !== 'undefined' && - (esFormsBlocksLocalization?.fileBlockAdditionalContent) !== '' + typeof esFormsLocalization !== 'undefined' && + (esFormsLocalization?.fileBlockAdditionalContent) !== '' ) { - additionalContent = esFormsBlocksLocalization.fileBlockAdditionalContent; + additionalContent = esFormsLocalization.fileBlockAdditionalContent; } const file = ( diff --git a/src/Blocks/components/file/file-style.scss b/src/Blocks/components/file/file-style.scss index 1caa81a0..97ff3306 100644 --- a/src/Blocks/components/file/file-style.scss +++ b/src/Blocks/components/file/file-style.scss @@ -78,7 +78,7 @@ padding-bottom: 20px; .dz-error-message { - @extend .es-error; + @extend .es-error; // stylelint-disable-line scss/at-extend-no-missing-placeholder display: block; position: absolute; left: 0; diff --git a/src/Blocks/components/form/assets-admin/cache.js b/src/Blocks/components/form/assets-admin/cache.js index e71a82e5..e7f64116 100644 --- a/src/Blocks/components/form/assets-admin/cache.js +++ b/src/Blocks/components/form/assets-admin/cache.js @@ -15,7 +15,7 @@ export class Cache { [...elements].forEach((element) => { element.addEventListener('click', this.onClick, true); }); - } + }; // Handle form submit and all logic. onClick = (event) => { @@ -52,7 +52,7 @@ export class Cache { location.reload(); }, 1000); }); - } + }; // Set global message. setGlobalMsg = (msg, status) => { @@ -65,5 +65,5 @@ export class Cache { messageContainer.classList.add(this.CLASS_ACTIVE); messageContainer.dataset.status = status; messageContainer.innerHTML = `${msg}`; - } + }; } diff --git a/src/Blocks/components/form/assets/form.js b/src/Blocks/components/form/assets/form.js index fcc99df2..ff7f9be0 100644 --- a/src/Blocks/components/form/assets/form.js +++ b/src/Blocks/components/form/assets/form.js @@ -156,7 +156,7 @@ export class Form { // Set localStorage data from global variable. this.setLocalStorage(); - } + }; // Handle form submit and all logic. onFormSubmit = (event) => { @@ -173,7 +173,7 @@ export class Form { } else { this.formSubmit(element); } - } + }; // Handle form submit and all logic for only one field click. onFormSubmitSingle = (event) => { @@ -181,7 +181,7 @@ export class Form { const {target} = event; this.formSubmit(target.closest(this.formSelector), target); - } + }; // Handle form submit and all logic in case we have captcha in place. formSubmitCaptcha = (element, token) => { @@ -233,7 +233,7 @@ export class Form { }, parseInt(this.hideGlobalMessageTimeout, 10)); } }); - } + }; // Handle form submit and all logic. formSubmit = (element, singleSubmit = false) => { @@ -360,7 +360,7 @@ export class Form { // Dispatch event. this.dispatchFormEvent(element, FORM_EVENTS.AFTER_FORM_SUBMIT_END); }); - } + }; // Build form data object. getFormData = (element, singleSubmit = false) => { @@ -535,7 +535,7 @@ export class Form { } return formData; - } + }; // Output all error for fields. outputErrors = (element, fields) => { @@ -556,7 +556,7 @@ export class Form { this.scrollToElement(element.querySelector(`${this.errorSelector}[data-id="${firstItem}"]`).parentElement); } - } + }; // Reset form values if the condition is right. resetForm = (element) => { @@ -593,7 +593,7 @@ export class Form { // Dispatch event. this.dispatchFormEvent(element, FORM_EVENTS.AFTER_FORM_SUBMIT_RESET); } - } + }; // Reset for in general. reset = (element) => { @@ -606,7 +606,7 @@ export class Form { element.querySelectorAll(`.${this.CLASS_HAS_ERROR}`).forEach((element) => element.classList.remove(this.CLASS_HAS_ERROR)); this.unsetGlobalMsg(element); - } + }; // Show loader. showLoader = (element) => { @@ -619,7 +619,7 @@ export class Form { } loader.classList.add(this.CLASS_ACTIVE); - } + }; // Hide loader. hideLoader = (element) => { @@ -634,7 +634,7 @@ export class Form { loader.classList.remove(this.CLASS_ACTIVE); }, parseInt(this.hideLoadingStateTimeout, 10)); - } + }; // Set global message. setGlobalMsg = (element, msg, status) => { @@ -656,7 +656,7 @@ export class Form { if (status === 'success' && this.formDisableScrollToGlobalMessageOnSuccess !== '1') { this.scrollToElement(messageContainer); } - } + }; // Unset global message. unsetGlobalMsg(element) { @@ -770,7 +770,7 @@ export class Form { if (element !== null) { element.scrollIntoView({block: 'start', behavior: 'smooth'}); } - } + }; // Dispatch custom event. dispatchFormEvent(element, name) { @@ -788,7 +788,7 @@ export class Form { input.addEventListener('keydown', this.onFocusEvent); input.addEventListener('focus', this.onFocusEvent); input.addEventListener('blur', this.onBlurEvent); - } + }; // Setup Select field. setupSelectField = (select, formId) => { @@ -816,7 +816,7 @@ export class Form { select.addEventListener('focus', this.onFocusEvent); select.addEventListener('blur', this.onBlurEvent); } - } + }; // Setup Textarea field. setupTextareaField = (textarea, formId) => { @@ -836,7 +836,7 @@ export class Form { this.customTextareas[formId].push(autosize.default); }); } - } + }; // Setup file single field. setupFileField = (file, formId, index) => { @@ -891,7 +891,7 @@ export class Form { button.addEventListener('blur', this.onBlurEvent); }); } - } + }; // On custom file wrapper click event callback. onCustomFileWrapClickEvent = (event) => { @@ -902,7 +902,7 @@ export class Form { const formId = event.currentTarget.getAttribute('dropzone-form-id'); this.customFiles[formId][index].hiddenFileInput.click(); - } + }; // Prefill inputs active/filled on init. preFillOnInit = (input, type) => { @@ -927,12 +927,12 @@ export class Form { } break; } - } + }; // On Focus event for regular fields. onFocusEvent = (event) => { event.target.closest(this.fieldSelector).classList.add(this.CLASS_ACTIVE); - } + }; // On Blur generic method. Check for length of value. onBlurEvent = (event) => { @@ -975,7 +975,7 @@ export class Form { } else { field.classList.remove(this.CLASS_ACTIVE, this.CLASS_FILLED); } - } + }; // Determine if field is custom type or normal. isCustom(item) { @@ -1073,7 +1073,18 @@ export class Form { const searchParams = new URLSearchParams(window.location.search); // Get storage from backend this is considered new by the page request. - const newStorage = searchParams.entries().filter(([key, value]) => allowedTags.includes(key) && value !== ''); + const newStorage = {}; + + // Loop entries and get new storage values. + for (const [key, value] of searchParams.entries()) { + // Bailout if not allowed or empty + if (!allowedTags.includes(key) || value === '') { + continue; + } + + // Add valid tag. + newStorage[key] = value; + } // Bailout if nothing is set from allowed tags or everything is empty. if (Object.keys(newStorage).length === 0) { diff --git a/src/Blocks/components/form/assets/index.js b/src/Blocks/components/form/assets/index.js index bdc6ead6..1d287c71 100644 --- a/src/Blocks/components/form/assets/index.js +++ b/src/Blocks/components/form/assets/index.js @@ -4,6 +4,10 @@ import domReady from '@wordpress/dom-ready'; import manifest from './../manifest.json'; import { FORM_EVENTS, FORM_SELECTORS, FORM_DATA_ATTRIBUTES } from './form'; +if (typeof esFormsLocalization === 'undefined') { + throw 'Your project is missing global variable esFormsLocalization called from the enqueue script in the forms.'; +} + const { componentJsClass, } = manifest; @@ -139,54 +143,24 @@ function initAll() { }); } -let loadCounter = 0; -const maxTry = 5; -const intervalTime = 100; - -// Load interval for checking if global variable has loaded in dom. -const interval = setInterval(() => { - loadCounter++; - - if (loadCounter >= maxTry) { - clearInterval(interval); - - throw `We tried ${maxTry} times to find esFormsLocalization global variable and it looks like your project is missing it. The variable is called using the the enqueue script in the forms. Please check if you disabled loading forms scripts on the frontend.`; - } - - if (typeof esFormsLocalization !== 'undefined') { - clearInterval(interval); - - // You can disable auto init from the admin. - const disableAutoInit = Boolean(esFormsLocalization.formDisableAutoInit) ?? false; - - // Load window form no matter what the option is set. - window['esForms'] = { - ...window['esForms'], - initAll: () => { - // Bailout if form is loaded but you want to init form again. - if (!disableAutoInit) { - throw 'You are trying to re-init form class that already exists. Please review your code or disable auto-initialize scripts in the forms global settings.'; - } - - initAll(); - }, - }; +// You can disable auto init from the admin. +const disableAutoInit = Boolean(esFormsLocalization.formDisableAutoInit); - // Load normal forms on dom ready event otherwise use manual trigger from the window object. - if (!disableAutoInit) { - domReady(() => { - const elements = document.querySelectorAll(selector); +// Load normal forms on dom ready event otherwise use manual trigger from the window object. +if (!disableAutoInit) { + domReady(() => { + const elements = document.querySelectorAll(selector); - if (elements.length) { - initAll(); - } - }); + if (elements.length) { + initAll(); } - - const event = new CustomEvent(FORM_EVENTS.FORMS_JS_LOADED, { - bubbles: true - }); - - window.dispatchEvent(event); - } -}, intervalTime); + }); +} else { + // Load initAll method in window object for manual trigger. + window['esForms'] = { + ...window['esForms'], + initAll: () => { + initAll(); + }, + }; +} diff --git a/src/Blocks/components/form/form-style.scss b/src/Blocks/components/form/form-style.scss index 8d959013..80402402 100644 --- a/src/Blocks/components/form/form-style.scss +++ b/src/Blocks/components/form/form-style.scss @@ -1,5 +1,6 @@ .es-form { $this: &; + --es-form-scoped-spacing: 10px; max-width: 600px; @@ -18,7 +19,7 @@ max-width: var(--field-width, 100%); padding-left: var(--es-form-scoped-spacing); padding-right: var(--es-form-scoped-spacing); - margin: 0 0 20px 0; + margin-bottom: 20px; } } } diff --git a/src/Blocks/components/group/group-admin.scss b/src/Blocks/components/group/group-admin.scss index a2207137..d796d849 100644 --- a/src/Blocks/components/group/group-admin.scss +++ b/src/Blocks/components/group/group-admin.scss @@ -31,8 +31,7 @@ > #{$this}__before-content { margin-bottom: 30px; - grid-column-start: 1; - grid-column-end: 13; + grid-column: 1 / 13; @include media(large up) { grid-column-start: 4; @@ -44,8 +43,7 @@ } > #{$this}__content { - grid-column-start: 1; - grid-column-end: 13; + grid-column: 1 / 13; > * { > #{$this}__content { @@ -78,8 +76,7 @@ #{$this}__label { font-size: 15px; margin-bottom: 20px; - grid-column-start: 1; - grid-column-end: 13; + grid-column: 1 / 13; overflow: hidden; text-overflow: ellipsis; @@ -91,12 +88,10 @@ } #{$this}__content { - grid-column-start: 1; - grid-column-end: 13; + grid-column: 1 / 13; @include media(large up) { - grid-column-start: 4; - grid-column-end: 11; + grid-column: 4 / 11; } display: grid; @@ -140,8 +135,7 @@ grid-template-columns: repeat(12, 1fr); > #{$this}__label { - grid-column-start: 1; - grid-column-end: 13; + grid-column: 1 / 13; margin-bottom: 15px; @include media(desktop up) { @@ -150,12 +144,10 @@ } > #{$this}__content { - grid-column-start: 1; - grid-column-end: 13; + grid-column: 1 / 13; @include media(desktop up) { - grid-column-start: 4; - grid-column-end: 11; + grid-column: 4 / 11; display: grid; column-gap: 20px; grid-template-columns: repeat(2, 1fr); @@ -174,8 +166,7 @@ } :nth-child(1) { - grid-column-start: 2; - grid-column-end: 3; + grid-column-start: 2 / 3; .es-checkbox { @include media(desktop up) { @@ -197,8 +188,7 @@ } :nth-child(2) { - grid-column-start: 1; - grid-column-end: 2; + grid-column: 1 2; grid-row-start: 1; } } @@ -221,8 +211,7 @@ grid-template-columns: repeat(12, 1fr); > #{$this}__label { - grid-column-start: 1; - grid-column-end: 13; + grid-column: 1 / 13; margin-bottom: 20px; @include media(desktop up) { @@ -247,18 +236,15 @@ } > #{$this}__content { - grid-column-start: 1; - grid-column-end: 13; + grid-column: 1 / 13; } > #{$this}__help { - grid-column-start: 1; - grid-column-end: 13; + grid-column: 1 / 13; margin-top: -10px; @include media(desktop up) { - grid-column-start: 4; - grid-column-end: 11; + grid-column: 4 / 11; } } } diff --git a/src/Blocks/components/input/components/input-editor.js b/src/Blocks/components/input/components/input-editor.js index 321d1fec..4637f773 100644 --- a/src/Blocks/components/input/components/input-editor.js +++ b/src/Blocks/components/input/components/input-editor.js @@ -1,4 +1,4 @@ -/* global esFormsBlocksLocalization */ +/* global esFormsLocalization */ import React, { useMemo, useEffect } from 'react'; import classnames from 'classnames'; @@ -49,10 +49,10 @@ export const InputEditor = (attributes) => { let additionalContent = ''; if ( - typeof esFormsBlocksLocalization !== 'undefined' && - (esFormsBlocksLocalization?.inputBlockAdditionalContent) !== '' + typeof esFormsLocalization !== 'undefined' && + (esFormsLocalization?.inputBlockAdditionalContent) !== '' ) { - additionalContent = esFormsBlocksLocalization.inputBlockAdditionalContent; + additionalContent = esFormsLocalization.inputBlockAdditionalContent; } const input = ( diff --git a/src/Blocks/components/input/components/input-options.js b/src/Blocks/components/input/components/input-options.js index e4d88183..4b254156 100644 --- a/src/Blocks/components/input/components/input-options.js +++ b/src/Blocks/components/input/components/input-options.js @@ -1,4 +1,4 @@ -/* global esFormsBlocksLocalization */ +/* global esFormsLocalization */ import React from 'react'; import { isArray } from 'lodash'; @@ -70,8 +70,8 @@ export const InputOptions = (attributes) => { let inputValidationPatternOptions = []; - if (typeof esFormsBlocksLocalization !== 'undefined' && isArray(esFormsBlocksLocalization?.validationPatternsOptions)) { - inputValidationPatternOptions = esFormsBlocksLocalization.validationPatternsOptions; + if (typeof esFormsLocalization !== 'undefined' && isArray(esFormsLocalization?.validationPatternsOptions)) { + inputValidationPatternOptions = esFormsLocalization.validationPatternsOptions; } return ( diff --git a/src/Blocks/components/radio/radio-style.scss b/src/Blocks/components/radio/radio-style.scss index ac351c01..8663c899 100644 --- a/src/Blocks/components/radio/radio-style.scss +++ b/src/Blocks/components/radio/radio-style.scss @@ -1,5 +1,6 @@ .es-radio { $this: &; + --es-radio-scoped-icon-size: 18px; margin-bottom: var(--es-radio-scoped-spacing, 10px); diff --git a/src/Blocks/components/radios/components/radios-editor.js b/src/Blocks/components/radios/components/radios-editor.js index b9bdbd77..344db8df 100644 --- a/src/Blocks/components/radios/components/radios-editor.js +++ b/src/Blocks/components/radios/components/radios-editor.js @@ -1,4 +1,4 @@ -/* global esFormsBlocksLocalization */ +/* global esFormsLocalization */ import React, { useMemo, useEffect } from 'react'; import { @@ -34,10 +34,10 @@ export const RadiosEditor = (attributes) => { let additionalContent = ''; if ( - typeof esFormsBlocksLocalization !== 'undefined' && - (esFormsBlocksLocalization?.radiosBlockAdditionalContent) !== '' + typeof esFormsLocalization !== 'undefined' && + (esFormsLocalization?.radiosBlockAdditionalContent) !== '' ) { - additionalContent = esFormsBlocksLocalization.radiosBlockAdditionalContent; + additionalContent = esFormsLocalization.radiosBlockAdditionalContent; } const radios = ( diff --git a/src/Blocks/components/select/components/select-editor.js b/src/Blocks/components/select/components/select-editor.js index afb2efd7..792b6718 100644 --- a/src/Blocks/components/select/components/select-editor.js +++ b/src/Blocks/components/select/components/select-editor.js @@ -1,4 +1,4 @@ -/* global esFormsBlocksLocalization */ +/* global esFormsLocalization */ import React, { useMemo, useEffect } from 'react'; import classnames from 'classnames'; @@ -43,10 +43,10 @@ export const SelectEditor = (attributes) => { let additionalContent = ''; if ( - typeof esFormsBlocksLocalization !== 'undefined' && - (esFormsBlocksLocalization?.selectBlockAdditionalContent) !== '' + typeof esFormsLocalization !== 'undefined' && + (esFormsLocalization?.selectBlockAdditionalContent) !== '' ) { - additionalContent = esFormsBlocksLocalization.selectBlockAdditionalContent; + additionalContent = esFormsLocalization.selectBlockAdditionalContent; } const select = ( diff --git a/src/Blocks/components/textarea/components/textarea-editor.js b/src/Blocks/components/textarea/components/textarea-editor.js index ac5b41a7..4750b2c6 100644 --- a/src/Blocks/components/textarea/components/textarea-editor.js +++ b/src/Blocks/components/textarea/components/textarea-editor.js @@ -1,4 +1,4 @@ -/* global esFormsBlocksLocalization */ +/* global esFormsLocalization */ import React, { useMemo, useEffect } from 'react'; import classnames from 'classnames'; @@ -43,10 +43,10 @@ export const TextareaEditor = (attributes) => { let additionalContent = ''; if ( - typeof esFormsBlocksLocalization !== 'undefined' && - (esFormsBlocksLocalization?.textareaBlockAdditionalContent) !== '' + typeof esFormsLocalization !== 'undefined' && + (esFormsLocalization?.textareaBlockAdditionalContent) !== '' ) { - additionalContent = esFormsBlocksLocalization.textareaBlockAdditionalContent; + additionalContent = esFormsLocalization.textareaBlockAdditionalContent; } const textarea = ( diff --git a/src/Blocks/components/textarea/components/textarea-options.js b/src/Blocks/components/textarea/components/textarea-options.js index d80a8e30..02daf127 100644 --- a/src/Blocks/components/textarea/components/textarea-options.js +++ b/src/Blocks/components/textarea/components/textarea-options.js @@ -1,4 +1,4 @@ -/* global esFormsBlocksLocalization */ +/* global esFormsLocalization */ import React, { useState } from 'react'; import { __ } from '@wordpress/i18n'; @@ -33,8 +33,8 @@ export const TextareaOptions = (attributes) => { let textareaValidationPatternOptions = []; - if (typeof esFormsBlocksLocalization !== 'undefined' && isArray(esFormsBlocksLocalization?.validationPatternsOptions)) { - textareaValidationPatternOptions = esFormsBlocksLocalization.validationPatternsOptions; + if (typeof esFormsLocalization !== 'undefined' && isArray(esFormsLocalization?.validationPatternsOptions)) { + textareaValidationPatternOptions = esFormsLocalization.validationPatternsOptions; } const [showValidation, setShowValidation] = useState(false); diff --git a/src/Blocks/custom/custom-data/components/custom-data-options.js b/src/Blocks/custom/custom-data/components/custom-data-options.js index 88bccdc0..ab60711c 100644 --- a/src/Blocks/custom/custom-data/components/custom-data-options.js +++ b/src/Blocks/custom/custom-data/components/custom-data-options.js @@ -1,4 +1,4 @@ -/* global esFormsBlocksLocalization */ +/* global esFormsLocalization */ import React from 'react'; import { isArray } from 'lodash'; @@ -24,8 +24,8 @@ export const CustomDataOptions = ({ attributes, setAttributes, clientId }) => { let customDataDataOptions = []; - if (typeof esFormsBlocksLocalization !== 'undefined' && isArray(esFormsBlocksLocalization?.customDataBlockOptions)) { - customDataDataOptions = esFormsBlocksLocalization.customDataBlockOptions; + if (typeof esFormsLocalization !== 'undefined' && isArray(esFormsLocalization?.customDataBlockOptions)) { + customDataDataOptions = esFormsLocalization.customDataBlockOptions; } if (customDataDataOptions?.length < 1) { diff --git a/src/Blocks/custom/form-selector/components/form-selector-editor.js b/src/Blocks/custom/form-selector/components/form-selector-editor.js index 36fcdd42..ccda859e 100644 --- a/src/Blocks/custom/form-selector/components/form-selector-editor.js +++ b/src/Blocks/custom/form-selector/components/form-selector-editor.js @@ -1,4 +1,4 @@ -/* global esFormsBlocksLocalization */ +/* global esFormsLocalization */ import React, { useEffect } from 'react'; import { __, sprintf } from '@wordpress/i18n'; @@ -63,8 +63,8 @@ export const FormSelectorEditor = ({ attributes, clientId }) => { // Additional content filter. let additionalContent = ''; - if (typeof esFormsBlocksLocalization !== 'undefined' && (esFormsBlocksLocalization?.formSelectorBlockAdditionalContent) !== '') { - additionalContent = esFormsBlocksLocalization.formSelectorBlockAdditionalContent; + if (typeof esFormsLocalization !== 'undefined' && (esFormsLocalization?.formSelectorBlockAdditionalContent) !== '') { + additionalContent = esFormsLocalization.formSelectorBlockAdditionalContent; } return ( diff --git a/src/Blocks/custom/form-selector/components/form-selector-options.js b/src/Blocks/custom/form-selector/components/form-selector-options.js index 46fbd618..482e3224 100644 --- a/src/Blocks/custom/form-selector/components/form-selector-options.js +++ b/src/Blocks/custom/form-selector/components/form-selector-options.js @@ -1,4 +1,4 @@ -/* global esFormsBlocksLocalization */ +/* global esFormsLocalization */ import React from 'react'; import { __ } from '@wordpress/i18n'; @@ -12,7 +12,7 @@ export const FormSelectorOptions = () => { } = select(STORE_NAME).getSettings(); const formId = useSelect((select) => select('core/editor').getCurrentPostId()); - const wpAdminUrl = esFormsBlocksLocalization.wpAdminUrl; + const wpAdminUrl = esFormsLocalization.wpAdminUrl; return ( diff --git a/src/Blocks/custom/form/components/form-options.js b/src/Blocks/custom/form/components/form-options.js index 738dead9..290ff3dc 100644 --- a/src/Blocks/custom/form/components/form-options.js +++ b/src/Blocks/custom/form/components/form-options.js @@ -1,4 +1,4 @@ -/* global esFormsBlocksLocalization */ +/* global esFormsLocalization */ import React from 'react'; import { __ } from '@wordpress/i18n'; @@ -13,7 +13,7 @@ export const FormOptions = ({ attributes, setAttributes }) => { } = select(STORE_NAME).getSettings(); const formId = useSelect((select) => select('core/editor').getCurrentPostId()); - const wpAdminUrl = esFormsBlocksLocalization.wpAdminUrl; + const wpAdminUrl = esFormsLocalization.wpAdminUrl; return ( diff --git a/src/Blocks/custom/form/form-hooks.js b/src/Blocks/custom/form/form-hooks.js index 94a3cb1b..f296bda0 100644 --- a/src/Blocks/custom/form/form-hooks.js +++ b/src/Blocks/custom/form/form-hooks.js @@ -1,4 +1,4 @@ -/* global esFormsBlocksLocalization */ +/* global esFormsLocalization */ import { addFilter } from '@wordpress/hooks'; import { select } from '@wordpress/data'; @@ -17,8 +17,8 @@ export const hooks = () => { // All adding additional blocks to the custom form builder. addFilter('blocks.registerBlockType', `${namespace}/${blockName}`, (settings, name) => { - if (name === `${namespace}/${blockName}` && typeof esFormsBlocksLocalization !== 'undefined' && isArray(esFormsBlocksLocalization?.additionalBlocks)) { - esFormsBlocksLocalization.additionalBlocks.forEach((element) => { + if (name === `${namespace}/${blockName}` && typeof esFormsLocalization !== 'undefined' && isArray(esFormsLocalization?.additionalBlocks)) { + esFormsLocalization.additionalBlocks.forEach((element) => { settings.attributes.formAllowedBlocks.default.push(element); }); } diff --git a/src/Blocks/custom/forms/components/forms-options.js b/src/Blocks/custom/forms/components/forms-options.js index e2378aa6..64646a22 100644 --- a/src/Blocks/custom/forms/components/forms-options.js +++ b/src/Blocks/custom/forms/components/forms-options.js @@ -1,4 +1,4 @@ -/* global esFormsBlocksLocalization */ +/* global esFormsLocalization */ import React, { useState } from 'react'; import { isArray } from 'lodash'; @@ -25,7 +25,7 @@ export const FormsOptions = ({ attributes, setAttributes, preview }) => { settingsPageUrl } = select(STORE_NAME).getSettings(); - const wpAdminUrl = esFormsBlocksLocalization.wpAdminUrl; + const wpAdminUrl = esFormsLocalization.wpAdminUrl; const { postType, @@ -51,16 +51,16 @@ export const FormsOptions = ({ attributes, setAttributes, preview }) => { let geolocationApi = ''; // Custom block forms style options. - if (typeof esFormsBlocksLocalization !== 'undefined' && isArray(esFormsBlocksLocalization?.formsBlockStyleOptions)) { - formsStyleOptions = esFormsBlocksLocalization.formsBlockStyleOptions; + if (typeof esFormsLocalization !== 'undefined' && isArray(esFormsLocalization?.formsBlockStyleOptions)) { + formsStyleOptions = esFormsLocalization.formsBlockStyleOptions; } // Is geolocation active. - if (typeof esFormsBlocksLocalization !== 'undefined' && esFormsBlocksLocalization?.useGeolocation) { + if (typeof esFormsLocalization !== 'undefined' && esFormsLocalization?.useGeolocation) { formsUseGeolocation = true; - if (esFormsBlocksLocalization?.geolocationApi) { - geolocationApi = esFormsBlocksLocalization.geolocationApi; + if (esFormsLocalization?.geolocationApi) { + geolocationApi = esFormsLocalization.geolocationApi; } } diff --git a/src/Blocks/custom/goodbits/components/goodbits-options.js b/src/Blocks/custom/goodbits/components/goodbits-options.js index ab01d585..b1e940ae 100644 --- a/src/Blocks/custom/goodbits/components/goodbits-options.js +++ b/src/Blocks/custom/goodbits/components/goodbits-options.js @@ -1,4 +1,4 @@ -/* global esFormsBlocksLocalization */ +/* global esFormsLocalization */ import React from 'react'; import { __ } from '@wordpress/i18n'; @@ -11,7 +11,7 @@ export const GoodbitsOptions = ({ postId }) => { settingsPageUrl, } = select(STORE_NAME).getSettings(); - const wpAdminUrl = esFormsBlocksLocalization.wpAdminUrl; + const wpAdminUrl = esFormsLocalization.wpAdminUrl; return ( diff --git a/src/Blocks/custom/greenhouse/components/greenhouse-options.js b/src/Blocks/custom/greenhouse/components/greenhouse-options.js index f118380d..4f72ebc7 100644 --- a/src/Blocks/custom/greenhouse/components/greenhouse-options.js +++ b/src/Blocks/custom/greenhouse/components/greenhouse-options.js @@ -1,4 +1,4 @@ -/* global esFormsBlocksLocalization */ +/* global esFormsLocalization */ import React from 'react'; import { __ } from '@wordpress/i18n'; @@ -11,7 +11,7 @@ export const GreenhouseOptions = ({ postId }) => { settingsPageUrl, } = select(STORE_NAME).getSettings(); - const wpAdminUrl = esFormsBlocksLocalization.wpAdminUrl; + const wpAdminUrl = esFormsLocalization.wpAdminUrl; return ( diff --git a/src/Blocks/custom/hubspot/components/hubspot-options.js b/src/Blocks/custom/hubspot/components/hubspot-options.js index a7a3ef9c..cae09d2c 100644 --- a/src/Blocks/custom/hubspot/components/hubspot-options.js +++ b/src/Blocks/custom/hubspot/components/hubspot-options.js @@ -1,4 +1,4 @@ -/* global esFormsBlocksLocalization */ +/* global esFormsLocalization */ import React from 'react'; import { __ } from '@wordpress/i18n'; @@ -11,7 +11,7 @@ export const HubspotOptions = ({ postId }) => { settingsPageUrl, } = select(STORE_NAME).getSettings(); - const wpAdminUrl = esFormsBlocksLocalization.wpAdminUrl; + const wpAdminUrl = esFormsLocalization.wpAdminUrl; return ( diff --git a/src/Blocks/custom/mailchimp/components/mailchimp-options.js b/src/Blocks/custom/mailchimp/components/mailchimp-options.js index 5267dfdb..d3b77b68 100644 --- a/src/Blocks/custom/mailchimp/components/mailchimp-options.js +++ b/src/Blocks/custom/mailchimp/components/mailchimp-options.js @@ -1,4 +1,4 @@ -/* global esFormsBlocksLocalization */ +/* global esFormsLocalizations */ import React from 'react'; import { __ } from '@wordpress/i18n'; @@ -11,7 +11,7 @@ export const MailchimpOptions = ({ postId }) => { settingsPageUrl, } = select(STORE_NAME).getSettings(); - const wpAdminUrl = esFormsBlocksLocalization.wpAdminUrl; + const wpAdminUrl = esFormsLocalizations.wpAdminUrl; return ( diff --git a/src/Blocks/custom/mailerlite/components/mailerlite-options.js b/src/Blocks/custom/mailerlite/components/mailerlite-options.js index 841ecc1d..ae0b3f1d 100644 --- a/src/Blocks/custom/mailerlite/components/mailerlite-options.js +++ b/src/Blocks/custom/mailerlite/components/mailerlite-options.js @@ -1,4 +1,4 @@ -/* global esFormsBlocksLocalization */ +/* global esFormsLocalization */ import React from 'react'; import { __ } from '@wordpress/i18n'; @@ -11,7 +11,7 @@ export const MailerliteOptions = ({ postId }) => { settingsPageUrl, } = select(STORE_NAME).getSettings(); - const wpAdminUrl = esFormsBlocksLocalization.wpAdminUrl; + const wpAdminUrl = esFormsLocalization.wpAdminUrl; return ( diff --git a/src/Enqueue/Blocks/EnqueueBlocks.php b/src/Enqueue/Blocks/EnqueueBlocks.php index 0af6f365..4fbc046f 100644 --- a/src/Enqueue/Blocks/EnqueueBlocks.php +++ b/src/Enqueue/Blocks/EnqueueBlocks.php @@ -13,9 +13,12 @@ use EightshiftForms\Config\Config; use EightshiftForms\Geolocation\SettingsGeolocation; use EightshiftForms\Hooks\Filters; +use EightshiftForms\Hooks\Variables; use EightshiftForms\Rest\Routes\GeolocationCountriesRoute; use EightshiftForms\Settings\Settings\SettingsGeneral; use EightshiftForms\Settings\SettingsHelper; +use EightshiftForms\Tracking\TrackingInterface; +use EightshiftForms\Validation\SettingsCaptcha; use EightshiftForms\Validation\ValidatorInterface; use EightshiftFormsVendor\EightshiftLibs\Enqueue\Blocks\AbstractEnqueueBlocks; use EightshiftFormsVendor\EightshiftLibs\Manifest\ManifestInterface; @@ -37,18 +40,28 @@ class EnqueueBlocks extends AbstractEnqueueBlocks */ public $validator; + /** + * Instance variable of tracking data. + * + * @var TrackingInterface + */ + protected TrackingInterface $tracking; + /** * Create a new admin instance. * * @param ManifestInterface $manifest Inject manifest which holds data about assets from manifest.json. * @param ValidatorInterface $validator Inject ValidatorInterface which holds validation methods. + * @param TrackingInterface $tracking Inject tracking which holds data about for storing to localstorage. */ public function __construct( ManifestInterface $manifest, - ValidatorInterface $validator + ValidatorInterface $validator, + TrackingInterface $tracking ) { $this->manifest = $manifest; $this->validator = $validator; + $this->tracking = $tracking; } /** @@ -68,9 +81,6 @@ public function register(): void // Frontend only script. \add_action('wp_enqueue_scripts', [$this, 'enqueueBlockFrontendScript']); - - // Frontend only style. - \add_action('wp_enqueue_scripts', [$this, 'enqueueBlockFrontendStyle'], 50); } /** @@ -150,7 +160,7 @@ protected function getLocalizations(): array { $output = []; - // Only for block editor. + // Admin part. if (\is_admin()) { $additionalBlocksFilterName = Filters::getBlocksFilterName('additionalBlocks'); $formsStyleOptionsFilterName = Filters::getBlockFilterName('forms', 'styleOptions'); @@ -189,10 +199,58 @@ protected function getLocalizations(): array $output['geolocationApi'] = $restApiUrl . GeolocationCountriesRoute::ROUTE_NAME; $output['wpAdminUrl'] = \get_admin_url(); + } else { + // Frontend part. + $restRoutesPath = \rest_url() . Config::getProjectRoutesNamespace() . '/' . Config::getProjectRoutesVersion(); + + $hideGlobalMsgTimeoutFilterName = Filters::getBlockFilterName('form', 'hideGlobalMsgTimeout'); + $redirectionTimeoutFilterName = Filters::getBlockFilterName('form', 'redirectionTimeout'); + $previewRemoveLabelFilterName = Filters::getBlockFilterName('file', 'previewRemoveLabel'); + $hideLoadingStateTimeoutFilterName = Filters::getBlockFilterName('form', 'hideLoadingStateTimeout'); + + $output = [ + 'formSubmitRestApiUrl' => $restRoutesPath . '/form-submit', + 'hideGlobalMessageTimeout' => \apply_filters($hideGlobalMsgTimeoutFilterName, 6000), + 'redirectionTimeout' => \apply_filters($redirectionTimeoutFilterName, 300), + 'hideLoadingStateTimeout' => \apply_filters($hideLoadingStateTimeoutFilterName, 600), + 'fileCustomRemoveLabel' => \apply_filters($previewRemoveLabelFilterName, \esc_html__('Remove', 'eightshift-forms')), + 'formDisableScrollToFieldOnError' => $this->isCheckboxOptionChecked( + SettingsGeneral::SETTINGS_GENERAL_DISABLE_SCROLL_TO_FIELD_ON_ERROR, + SettingsGeneral::SETTINGS_GENERAL_DISABLE_SCROLL_KEY + ), + 'formDisableScrollToGlobalMessageOnSuccess' => $this->isCheckboxOptionChecked( + SettingsGeneral::SETTINGS_GENERAL_DISABLE_SCROLL_TO_GLOBAL_MESSAGE_ON_SUCCESS, + SettingsGeneral::SETTINGS_GENERAL_DISABLE_SCROLL_KEY + ), + 'formDisableAutoInit' => $this->isCheckboxOptionChecked( + SettingsGeneral::SETTINGS_GENERAL_DISABLE_AUTOINIT_ENQUEUE_SCRIPT_KEY, + SettingsGeneral::SETTINGS_GENERAL_DISABLE_DEFAULT_ENQUEUE_KEY + ), + 'formResetOnSuccess' => !Variables::isDevelopMode(), + 'captcha' => '', + 'storageConfig' => '', + ]; + + // Check if Captcha data is set and valid. + $isCaptchaSettingsGlobalValid = \apply_filters(SettingsCaptcha::FILTER_SETTINGS_GLOBAL_IS_VALID_NAME, false); + + if ($isCaptchaSettingsGlobalValid) { + $output['captcha'] = !empty(Variables::getGoogleReCaptchaSiteKey()) ? Variables::getGoogleReCaptchaSiteKey() : $this->getOptionValue(SettingsCaptcha::SETTINGS_CAPTCHA_SITE_KEY); + } + + // Localstorage allowed tags. + $allowedTrackingTags = $this->tracking->getAllowedTags(); + + if ($allowedTrackingTags) { + $output['storageConfig'] = \wp_json_encode([ + 'allowed' => $allowedTrackingTags, + 'expiration' => $this->tracking->getTrackingExpiration(), + ]); + } } return [ - 'esFormsBlocksLocalization' => $output, + 'esFormsLocalization' => $output, ]; } } diff --git a/src/Enqueue/Theme/EnqueueTheme.php b/src/Enqueue/Theme/EnqueueTheme.php index 019e181e..020db91d 100644 --- a/src/Enqueue/Theme/EnqueueTheme.php +++ b/src/Enqueue/Theme/EnqueueTheme.php @@ -13,9 +13,7 @@ use EightshiftForms\Config\Config; use EightshiftForms\Settings\Settings\SettingsGeneral; use EightshiftForms\Settings\SettingsHelper; -use EightshiftForms\Hooks\Filters; use EightshiftForms\Hooks\Variables; -use EightshiftForms\Tracking\TrackingInterface; use EightshiftForms\Validation\SettingsCaptcha; use EightshiftFormsVendor\EightshiftLibs\Manifest\ManifestInterface; use EightshiftFormsVendor\EightshiftLibs\Enqueue\Theme\AbstractEnqueueTheme; @@ -30,23 +28,14 @@ class EnqueueTheme extends AbstractEnqueueTheme */ use SettingsHelper; - /** - * Instance variable of tracking data. - * - * @var TrackingInterface - */ - protected TrackingInterface $tracking; - /** * Create a new admin instance. * * @param ManifestInterface $manifest Inject manifest which holds data about assets from manifest.json. - * @param TrackingInterface $tracking Inject tracking which holds data about for storing to localstorage. */ - public function __construct(ManifestInterface $manifest, TrackingInterface $tracking) + public function __construct(ManifestInterface $manifest) { $this->manifest = $manifest; - $this->tracking = $tracking; } /** @@ -56,8 +45,6 @@ public function __construct(ManifestInterface $manifest, TrackingInterface $trac */ public function register(): void { - \add_action('wp_enqueue_scripts', [$this, 'enqueueStylesLocal'], 10); - \add_action('wp_enqueue_scripts', [$this, 'enqueueScriptsLocal']); \add_action('wp_enqueue_scripts', [$this, 'enqueueScriptsCaptcha']); } @@ -138,63 +125,4 @@ public function getAssetsVersion(): string { return Config::getProjectVersion(); } - - /** - * Get script localizations - * - * @return array - */ - protected function getLocalizations(): array - { - $restRoutesPath = \rest_url() . Config::getProjectRoutesNamespace() . '/' . Config::getProjectRoutesVersion(); - - $hideGlobalMsgTimeoutFilterName = Filters::getBlockFilterName('form', 'hideGlobalMsgTimeout'); - $redirectionTimeoutFilterName = Filters::getBlockFilterName('form', 'redirectionTimeout'); - $previewRemoveLabelFilterName = Filters::getBlockFilterName('file', 'previewRemoveLabel'); - $hideLoadingStateTimeoutFilterName = Filters::getBlockFilterName('form', 'hideLoadingStateTimeout'); - - $output = [ - 'formSubmitRestApiUrl' => $restRoutesPath . '/form-submit', - 'hideGlobalMessageTimeout' => \apply_filters($hideGlobalMsgTimeoutFilterName, 6000), - 'redirectionTimeout' => \apply_filters($redirectionTimeoutFilterName, 300), - 'hideLoadingStateTimeout' => \apply_filters($hideLoadingStateTimeoutFilterName, 600), - 'fileCustomRemoveLabel' => \apply_filters($previewRemoveLabelFilterName, \esc_html__('Remove', 'eightshift-forms')), - 'formDisableScrollToFieldOnError' => $this->isCheckboxOptionChecked( - SettingsGeneral::SETTINGS_GENERAL_DISABLE_SCROLL_TO_FIELD_ON_ERROR, - SettingsGeneral::SETTINGS_GENERAL_DISABLE_SCROLL_KEY - ), - 'formDisableScrollToGlobalMessageOnSuccess' => $this->isCheckboxOptionChecked( - SettingsGeneral::SETTINGS_GENERAL_DISABLE_SCROLL_TO_GLOBAL_MESSAGE_ON_SUCCESS, - SettingsGeneral::SETTINGS_GENERAL_DISABLE_SCROLL_KEY - ), - 'formDisableAutoInit' => $this->isCheckboxOptionChecked( - SettingsGeneral::SETTINGS_GENERAL_DISABLE_AUTOINIT_ENQUEUE_SCRIPT_KEY, - SettingsGeneral::SETTINGS_GENERAL_DISABLE_DEFAULT_ENQUEUE_KEY - ), - 'formResetOnSuccess' => !Variables::isDevelopMode(), - 'captcha' => '', - 'storageConfig' => '', - ]; - - // Check if Captcha data is set and valid. - $isCaptchaSettingsGlobalValid = \apply_filters(SettingsCaptcha::FILTER_SETTINGS_GLOBAL_IS_VALID_NAME, false); - - if ($isCaptchaSettingsGlobalValid) { - $output['captcha'] = !empty(Variables::getGoogleReCaptchaSiteKey()) ? Variables::getGoogleReCaptchaSiteKey() : $this->getOptionValue(SettingsCaptcha::SETTINGS_CAPTCHA_SITE_KEY); - } - - // Localstorage allowed tags. - $allowedTrackingTags = $this->tracking->getAllowedTags(); - - if ($allowedTrackingTags) { - $output['storageConfig'] = \wp_json_encode([ - 'allowed' => $allowedTrackingTags, - 'expiration' => $this->tracking->getTrackingExpiration(), - ]); - } - - return [ - 'esFormsLocalization' => $output, - ]; - } } diff --git a/src/WpCli/eightshift-forms/assets/form.js b/src/WpCli/eightshift-forms/assets/form.js index b6617e3e..e8b97783 100644 --- a/src/WpCli/eightshift-forms/assets/form.js +++ b/src/WpCli/eightshift-forms/assets/form.js @@ -14,5 +14,5 @@ export class Form { }); } - } + }; }