adding fixes for forms loading

infinum · Aug 25, 2022 · de133ef · de133ef
1 parent 76e0f6f
commit de133ef
Show file tree

Hide file tree

Showing 40 changed files with 227 additions and 303 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 = `<span>${msg}</span>`;
-	}
+	};
 }