Merge pull request #290 from infinum/feature/forms

Feature/forms

website/docs/basics/blocks-faq.md

@@ -152,7 +152,7 @@ For WordPress versions > 5 and < 5.8 you would need to use the example below.
 
 ### How to allow only one pattern category?
 
-In the blog post about Block Patterns we covered how to [manage pattern categories](/blog/block-patterns/#managing-pattern-categories). That section should give you an idea how to remove core categories and how to register one or more custom pattern categories.
+In the blog post about Block Patterns we covered how to [manage pattern categories](/blog/block-patterns#managing-pattern-categories). That section should give you an idea how to remove core categories and how to register one or more custom pattern categories.
 
 ### Can I have blocks in multiple categories?
 

website/docs/basics/blocks-wrapper.md

@@ -35,15 +35,15 @@ This attribute controls the usage of the wrapper component. It behaves the same
 
 ### wrapperUseShowControl
 
-This attribute controls whether you will see the options for block use in the block editor. It behaves the same way as described in [this chapter](blocks-component-in-block#i-dont-want-my-editor-to-be-able-to-change-components-options-in-my-block).
+This attribute controls whether you will see the options for block use in the block editor. It behaves the same way as described in [this chapter](blocks-component-in-block#i-dont-want-my-editor-to-be-able-to-change-component-options-in-my-block).
 
 ### wrapperUseSimple
 
 We wrapped some options in a specific condition and we call it `wrapperUseSimple`. In general, this attribute is set to `true` when you only want the simplified options on your block. Natively, it is used inside all the inner blocks in the column block because we don't need wrappers inside wrappers inside wrappers (and so on). It's a good rule of thumb to use a simple wrapper in all the inner blocks.
 
 ### wrapperUseSimpleShowControl
 
-This attribute controls whether you are going to see options in the block editor to use the simple option. It behaves the same way as described in [this chapter](blocks-component-in-block#i-dont-want-my-editor-to-be-able-to-change-components-options-in-my-block).
+This attribute controls whether you are going to see options in the block editor to use the simple option. It behaves the same way as described in [this chapter](blocks-component-in-block#i-dont-want-my-editor-to-be-able-to-change-component-options-in-my-block).
 
 ### wrapperDisable
 

website/docs/legacy/v5/basics/blocks-wrapper.md

@@ -20,15 +20,15 @@ This attribute controls the usage of the wrapper component. It behaves the same
 
 ### wrapperUseShowControl
 
-This attribute controls whether you will see the options for block use in the block editor. It behaves the same way as described in [this chapter](blocks-component-in-block#i-dont-want-my-editor-to-be-able-to-change-components-options-in-my-block).
+This attribute controls whether you will see the options for block use in the block editor. It behaves the same way as described in [this chapter](blocks-component-in-block#i-dont-want-my-editor-to-be-able-to-change-component-options-in-my-block).
 
 ### wrapperUseSimple
 
 We wrapped some of the options in a specific condition and we call it `wrapperUseSimple`. In general, this attribute is set to `true` when you only want the simplified options on your block. Natively, it is used inside all of the inner blocks in the column block because we don't need wrappers inside wrappers inside wrappers (and so on). It's a good rule of thumb to use a simple wrapper in all of the inner blocks.
 
 ### wrapperUseSimpleShowControl
 
-This attribute controls whether you are going to see options in the block editor to use the simple option. It behaves the same way as described in [this chapter](blocks-component-in-block#i-dont-want-my-editor-to-be-able-to-change-components-options-in-my-block).
+This attribute controls whether you are going to see options in the block editor to use the simple option. It behaves the same way as described in [this chapter](blocks-component-in-block#i-dont-want-my-editor-to-be-able-to-change-component-options-in-my-block).
 
 ### wrapperDisable
 

website/docs/legacy/v6/basics/blocks-wrapper.md

@@ -35,15 +35,15 @@ This attribute controls the usage of the wrapper component. It behaves the same
 
 ### wrapperUseShowControl
 
-This attribute controls whether you will see the options for block use in the block editor. It behaves the same way as described in [this chapter](blocks-component-in-block#i-dont-want-my-editor-to-be-able-to-change-components-options-in-my-block).
+This attribute controls whether you will see the options for block use in the block editor. It behaves the same way as described in [this chapter](blocks-component-in-block#i-dont-want-my-editor-to-be-able-to-change-component-options-in-my-block).
 
 ### wrapperUseSimple
 
 We wrapped some of the options in a specific condition and we call it `wrapperUseSimple`. In general, this attribute is set to `true` when you only want the simplified options on your block. Natively, it is used inside all of the inner blocks in the column block because we don't need wrappers inside wrappers inside wrappers (and so on). It's a good rule of thumb to use a simple wrapper in all of the inner blocks.
 
 ### wrapperUseSimpleShowControl
 
-This attribute controls whether you are going to see options in the block editor to use the simple option. It behaves the same way as described in [this chapter](blocks-component-in-block#i-dont-want-my-editor-to-be-able-to-change-components-options-in-my-block).
+This attribute controls whether you are going to see options in the block editor to use the simple option. It behaves the same way as described in [this chapter](blocks-component-in-block#i-dont-want-my-editor-to-be-able-to-change-component-options-in-my-block).
 
 ### wrapperDisable
 

website/docs/legacy/v7/basics/blocks-wrapper.md

@@ -35,15 +35,15 @@ This attribute controls the usage of the wrapper component. It behaves the same
 
 ### wrapperUseShowControl
 
-This attribute controls whether you will see the options for block use in the block editor. It behaves the same way as described in [this chapter](blocks-component-in-block#i-dont-want-my-editor-to-be-able-to-change-components-options-in-my-block).
+This attribute controls whether you will see the options for block use in the block editor. It behaves the same way as described in [this chapter](blocks-component-in-block#i-dont-want-my-editor-to-be-able-to-change-component-options-in-my-block).
 
 ### wrapperUseSimple
 
 We wrapped some of the options in a specific condition and we call it `wrapperUseSimple`. In general, this attribute is set to `true` when you only want the simplified options on your block. Natively, it is used inside all of the inner blocks in the column block because we don't need wrappers inside wrappers inside wrappers (and so on). It's a good rule of thumb to use a simple wrapper in all of the inner blocks.
 
 ### wrapperUseSimpleShowControl
 
-This attribute controls whether you are going to see options in the block editor to use the simple option. It behaves the same way as described in [this chapter](blocks-component-in-block#i-dont-want-my-editor-to-be-able-to-change-components-options-in-my-block).
+This attribute controls whether you are going to see options in the block editor to use the simple option. It behaves the same way as described in [this chapter](blocks-component-in-block#i-dont-want-my-editor-to-be-able-to-change-component-options-in-my-block).
 
 ### wrapperDisable
 

website/docs/legacy/v8/basics/blocks-wrapper.md

@@ -35,15 +35,15 @@ This attribute controls the usage of the wrapper component. It behaves the same
 
 ### wrapperUseShowControl
 
-This attribute controls whether you will see the options for block use in the block editor. It behaves the same way as described in [this chapter](blocks-component-in-block#i-dont-want-my-editor-to-be-able-to-change-components-options-in-my-block).
+This attribute controls whether you will see the options for block use in the block editor. It behaves the same way as described in [this chapter](blocks-component-in-block#i-dont-want-my-editor-to-be-able-to-change-component-options-in-my-block).
 
 ### wrapperUseSimple
 
 We wrapped some options in a specific condition and we call it `wrapperUseSimple`. In general, this attribute is set to `true` when you only want the simplified options on your block. Natively, it is used inside all the inner blocks in the column block because we don't need wrappers inside wrappers inside wrappers (and so on). It's a good rule of thumb to use a simple wrapper in all the inner blocks.
 
 ### wrapperUseSimpleShowControl
 
-This attribute controls whether you are going to see options in the block editor to use the simple option. It behaves the same way as described in [this chapter](blocks-component-in-block#i-dont-want-my-editor-to-be-able-to-change-components-options-in-my-block).
+This attribute controls whether you are going to see options in the block editor to use the simple option. It behaves the same way as described in [this chapter](blocks-component-in-block#i-dont-want-my-editor-to-be-able-to-change-component-options-in-my-block).
 
 ### wrapperDisable
 

website/forms/addons/create/intro.md

@@ -0,0 +1,6 @@
+---
+id: intro
+title: Intro
+---
+
+**Coming soon**

website/forms/addons/premium/computed-fields/intro.md

@@ -0,0 +1,6 @@
+---
+id: intro
+title: Intro
+---
+
+**Coming soon**

website/forms/features/entries.md

@@ -0,0 +1,6 @@
+---
+id: entries
+title: Entries
+---
+
+**Coming soon**

website/forms/integrations/pipedrive.md

@@ -3,4 +3,24 @@ id: pipedrive
 title: Pipedrive
 ---
 
-*Coming soon...*
+Pipedrive is a web-based Sales CRM and pipeline management solution that enables businesses to plan their sales activities and monitor deals.
+
+### Website
+
+* [Visit website](https://www.pipedrive.com/)
+
+### API Version
+
+* V1
+
+### API Documentation
+
+* [Documentation](https://developers.pipedrive.com/docs/api/v1)
+
+### Integration type
+
+* Form builder **not** provided by the service.
+* The form is created using our forms fields and connected to Pipedrive fields using form settings.
+
+### Supported fields:
+* All

website/forms/javascript/events/available-events.mdx

@@ -8,6 +8,10 @@ You can listen to these events by using the `on` method on the `Event` facade.
 Every event contains the whole window object inside the details property.
 This way you can be sure that everything is set and ready to be used. Additionally if an event is a part of the `after` event you can use the `additional` property to get the API response details. 
 
+:::note
+List of all events can be found [here](https://github.com/infinum/eightshift-forms/blob/develop/src/Blocks/manifest.json).
+:::
+
 ### esFormsBeforeFormSubmit
 
 Triggered before form is submitted to the API-Rest endpoint.
@@ -119,3 +123,11 @@ Triggered after multi-step/multi-flow form is used and the previous step is load
 :::tip
 This event is set on the form element.
 :::
+
+### esFormsEnrichmentPrefill
+
+Triggered after enrichment data is pre-filled from `localStorage`.
+
+:::tip
+This event is set on the form element.
+:::

website/forms/javascript/events/how-to-use.md

@@ -5,7 +5,7 @@ title: How to use?
 
 ### esFormsAfterCaptchaInit
 
-In this example the event is hooked to the window object and in event details you have:
+In this example the event is hooked to the `window` object and in event details you have:
 * `esForms` - object.
 * `formId` - not available because this is a global event.
 * `additional` - object from the API response.
@@ -35,19 +35,28 @@ window.addEventListener('esFormsAfterCaptchaInit', ({detail}) => {
 
 ### esFormsJsFormLoaded
 
-In this example the event is hooked to the window object and in event details you have:
+In this example the event is hooked to the `form` element and in event details you have:
 * `esForms` - object.
 * `formId` - form Id this event is a part of.
-* `additional` - not available because this is a not API response event.
 
 ```js
-window.addEventListener('esFormsJsFormLoaded', ({detail}) => {
-	const {
-		formId,
-		esForms,
-	} = detail;
+import domReady from '@wordpress/dom-ready';
 
-	// Do some actions with the form.
+domReady(() => {
+	const element = document.querySelector('.js-es-block-form');
+
+	if (!element) {
+		return;
+	}
+
+	element?.addEventListener('esFormsJsFormLoaded', ({detail}) => {
+		const {
+			formId,
+			esForms,
+		} = detail;
+
+		// Do some actions with the form.
+	});
 });
 ```
 
@@ -61,8 +70,13 @@ In this example the event is hooked to the `form` element and in event details y
 ```js
 const { store } = window.esForms.store;
 
-[...document.querySelectorAll(store.getStateSelectorsForm())].forEach((form) => {
+[...document.querySelectorAll(store.getStateSelector('form'))].forEach((form) => {
 	form.addEventListener('esFormsAfterFormSubmitReset', ({detail}) => {
+		const {
+			formId,
+			esForms,
+			additional
+		} = detail;
 		// Do some actions with the form.
 	});
 });

website/forms/javascript/state/how-to-use.md

@@ -16,7 +16,9 @@ window.esForms
 or you can use built-in events which also contain all the state in the time of the event.
 
 :::caution
-It's important to be careful when using a state outside of the `esFormsJsFormLoaded` event, as it may not be ready at the time of use. To ensure that the state is available, calling your JavaScript after the `domReady` event and with the `esFormsJsFormLoaded` event is necessary.
+Take caution when using state data outside of the `esFormsJsFormLoaded` event, as it may not be available at the time of use. To be sure the data is available, run code after the DOM is ready (`DOMContentLoaded` event), together with the `esFormsJsFormLoaded` event.
+
+If your script is loaded before the main form script, you can use PHP hooks to make forms script dependent on you script to ensure that your script is loaded before the main form script and the events will fire.
 :::
 
 ## Example
@@ -27,17 +29,21 @@ In this example we are using the `esFormsJsFormLoaded` event to initialize our f
 import domReady from '@wordpress/dom-ready';
 
 domReady(() => {
-	window.addEventListener('esFormsJsFormLoaded', ({detail}) => {
+	const element = document.querySelector('.js-es-block-form');
+
+	if (!element) {
+		return;
+	}
+
+	element?.addEventListener('esFormsJsFormLoaded', ({detail}) => {
 		const {
 			formId,
 			esForms = {
 				store,
 			},
 		} = detail;
 
-		if (store?.getStateFormElement(formId)) {
-			// Do some actions with the form.
-		}
+		// Do some actions with the form.
 	});
 });
 ```

website/forms/php/filters/admin/settings-data.md

@@ -0,0 +1,32 @@
+---
+id: settings-data
+title: Settings data
+---
+
+This filter allows adding a custom settings page in the WordPress admin area. Useful when creating custom option pages for Forms add-on plugins.
+
+```php
+add_filter('es_forms_admin_settings_data', 'getSettingsConfig');
+
+/**
+ * Settings config data.
+ *
+ * @return array<mixed>
+ */
+public function getSettingsConfig(): array
+{
+	return [
+		self::SETTINGS_TYPE_KEY => [
+			'settings' => 'es_forms_settings_addon_<setting-name>',
+			'settingsGlobal' => 'es_forms_settings_global_<setting-name>',
+			'type' => 'addon',
+			'use' => '<setting-name>-use',
+			'labels' => [
+				'title' => \__('Title', '<text-domain>'),
+				'desc' => \__('Description', '<text-domain>'),
+				'icon' => '<svg-icon>',
+			],
+		],
+	];
+}
+```

website/forms/php/filters/block/checkboxes/additional-content.mdx

@@ -0,0 +1,9 @@
+---
+id: additional-content
+title: Additional content
+---
+
+import { AdditionalContentFilter } from './../../../../../src/docs/filters';
+
+<AdditionalContentFilter filter={'checkboxes'} />
+

website/forms/php/filters/block/country/additional-content.mdx

@@ -0,0 +1,9 @@
+---
+id: additional-content
+title: Additional content
+---
+
+import { AdditionalContentFilter } from './../../../../../src/docs/filters';
+
+<AdditionalContentFilter filter={'country'} />
+

website/forms/php/filters/block/date/additional-content.mdx

@@ -0,0 +1,9 @@
+---
+id: additional-content
+title: Additional content
+---
+
+import { AdditionalContentFilter } from './../../../../../src/docs/filters';
+
+<AdditionalContentFilter filter={'date'} />
+

website/forms/php/filters/block/field/additional-content.mdx

@@ -0,0 +1,9 @@
+---
+id: additional-content
+title: Additional content
+---
+
+import { AdditionalContentFilter } from './../../../../../src/docs/filters';
+
+<AdditionalContentFilter filter={'field'} />
+