diff --git a/CHANGELOG.md b/CHANGELOG.md
index 19b322d24..6bc263cb0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file.
This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a CHANGELOG](https://keepachangelog.com/).
+## [5.0.8]
+
+### Added
+
+- Additional Tailwind selectors for forms fields.
+- Range field not supports progress CSS variable.
+
## [5.0.7]
### Added
@@ -631,6 +638,7 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a
- Initial production release.
+[5.0.8]: https://github.com/infinum/eightshift-forms/compare/5.0.7...5.0.8
[5.0.7]: https://github.com/infinum/eightshift-forms/compare/5.0.6...5.0.7
[5.0.6]: https://github.com/infinum/eightshift-forms/compare/5.0.5...5.0.6
[5.0.5]: https://github.com/infinum/eightshift-forms/compare/5.0.4...5.0.5
diff --git a/eightshift-forms.php b/eightshift-forms.php
index 4d5c91ee7..36def026b 100644
--- a/eightshift-forms.php
+++ b/eightshift-forms.php
@@ -6,7 +6,7 @@
* Description: Eightshift Forms is a complete form builder plugin that utilizes modern Block editor features with multiple third-party integrations, bringing your project to a new level.
* Author: WordPress team @Infinum
* Author URI: https://eightshift.com/
- * Version: 5.0.7
+ * Version: 5.0.8
* Text Domain: eightshift-forms
*
* @package EightshiftForms
diff --git a/src/Blocks/components/date/date.php b/src/Blocks/components/date/date.php
index 289d607f2..2408d5fcd 100644
--- a/src/Blocks/components/date/date.php
+++ b/src/Blocks/components/date/date.php
@@ -7,6 +7,7 @@
*/
use EightshiftForms\Helpers\FormsHelper;
+use EightshiftForms\Hooks\FiltersOuputMock;
use EightshiftFormsVendor\EightshiftFormsUtils\Helpers\UtilsGeneralHelper;
use EightshiftFormsVendor\EightshiftFormsUtils\Helpers\UtilsHelper;
use EightshiftFormsVendor\EightshiftLibs\Helpers\Helpers;
@@ -40,7 +41,7 @@
$dateFieldLabel = $attributes[Helpers::getAttrKey('dateFieldLabel', $attributes, $manifest)] ?? '';
$dateClass = Helpers::classnames([
- Helpers::selector($componentClass, $componentClass),
+ FiltersOuputMock::getTwSelectors($componentClass, $attributes),
Helpers::selector($additionalClass, $additionalClass),
]);
diff --git a/src/Blocks/components/file/file.php b/src/Blocks/components/file/file.php
index 5c8fe4d7b..811354672 100644
--- a/src/Blocks/components/file/file.php
+++ b/src/Blocks/components/file/file.php
@@ -9,6 +9,7 @@
use EightshiftForms\Helpers\FormsHelper;
use EightshiftForms\Hooks\FiltersOuputMock;
use EightshiftFormsVendor\EightshiftFormsUtils\Helpers\UtilsGeneralHelper;
+use EightshiftFormsVendor\EightshiftFormsUtils\Helpers\UtilsHooksHelper;
use EightshiftFormsVendor\EightshiftLibs\Helpers\Helpers;
$manifest = Helpers::getManifestByDir(__DIR__);
@@ -48,17 +49,21 @@
$infoText = !empty($fileCustomInfoText) ? $fileCustomInfoText : __('Drag and drop files here', 'eighitshift-forms');
$infoButton = !empty($fileCustomInfoButtonText) ? $fileCustomInfoButtonText : __('Add files', 'eighitshift-forms');
-$infoTextContent = '
' . esc_html($infoText) . '
';
-if (!$fileCustomInfoTextUse) {
- $infoTextContent = '';
+$infoTextContent = '';
+if ($fileCustomInfoTextUse) {
+ $infoTextContent .= '' . wp_kses_post($infoText) . '
';
}
-$infoButtonContent = '' . esc_html($infoButton) . '';
+$filter = UtilsHooksHelper::getFilterName(['block', 'file', 'infoAdditionalContent']);
+if (has_filter($filter)) {
+ $infoTextContent .= apply_filters($filter, '', $attributes);
+}
+
+$infoTextContent .= '' . esc_html($infoButton) . '';
$customFile = '
' . $infoTextContent . '
- ' . $infoButtonContent . '
';
diff --git a/src/Blocks/components/form/assets/utils.js b/src/Blocks/components/form/assets/utils.js
index 69c7f01ad..3e199842d 100644
--- a/src/Blocks/components/form/assets/utils.js
+++ b/src/Blocks/components/form/assets/utils.js
@@ -1218,6 +1218,16 @@ export class Utils {
*/
setRangeCurrentValue(formId, name) {
const current = this.state.getStateElementRangeCurrent(name, formId);
+ const input = this.state.getStateElementInput(name, formId);
+
+ // Set range current value as css variable due to inconsistency in browsers.
+ if (input) {
+ const min = input.min || 0;
+ const max = input.max || 100;
+ const parsedProgress = Number(((input.value - min) * 100) / (max - min));
+
+ input.style.setProperty('--es-form-range-progress', `${parsedProgress}%`);
+ }
if (!current) {
return;
diff --git a/src/Blocks/components/input/input.php b/src/Blocks/components/input/input.php
index 26b7c1fc0..19c1d2872 100644
--- a/src/Blocks/components/input/input.php
+++ b/src/Blocks/components/input/input.php
@@ -86,14 +86,14 @@
if ($inputRangeShowMin) {
$cssSelector = Helpers::classnames([
UtilsHelper::getStateSelector('inputRangeMin'),
- Helpers::selector($componentClass, $componentClass, 'range', 'min'),
+ FiltersOuputMock::getTwSelectors("{$componentClass}__range--min", $attributes),
]);
$additionalContent .= wp_kses_post("{$inputRangeShowMinPrefix}{$inputAttrs['min']}{$inputRangeShowMinSuffix}");
}
if ($inputRangeShowCurrent) {
- $cssSelector = Helpers::selector($componentClass, $componentClass, 'range', 'current');
+ $cssSelector = FiltersOuputMock::getTwSelectors("{$componentClass}__range--current", $attributes);
$cssJsSelector = UtilsHelper::getStateSelector('inputRangeCurrent');
$additionalContent .= wp_kses_post("{$inputRangeShowCurrentPrefix}{$inputAttrs['value']}{$inputRangeShowCurrentSuffix}");
@@ -102,7 +102,7 @@
if ($inputRangeShowMax) {
$cssSelector = Helpers::classnames([
UtilsHelper::getStateSelector('inputRangeMax'),
- Helpers::selector($componentClass, $componentClass, 'range', 'max'),
+ FiltersOuputMock::getTwSelectors("{$componentClass}__range--max", $attributes),
]);
$additionalContent .= wp_kses_post("{$inputRangeShowMaxPrefix}{$inputAttrs['max']}{$inputRangeShowMaxSuffix}");
diff --git a/src/Blocks/components/progress-bar/progress-bar.php b/src/Blocks/components/progress-bar/progress-bar.php
index 3bde127d1..2ffb9a5b5 100644
--- a/src/Blocks/components/progress-bar/progress-bar.php
+++ b/src/Blocks/components/progress-bar/progress-bar.php
@@ -6,6 +6,7 @@
* @package EightshiftForms
*/
+use EightshiftForms\Hooks\FiltersOuputMock;
use EightshiftFormsVendor\EightshiftFormsUtils\Helpers\UtilsHelper;
use EightshiftFormsVendor\EightshiftLibs\Helpers\Helpers;
@@ -29,11 +30,11 @@
$progressBarMultiflowUse = Helpers::checkAttr('progressBarMultiflowUse', $attributes, $manifest);
$progressBarClass = Helpers::classnames([
- Helpers::selector($componentClass, $componentClass),
+ FiltersOuputMock::getTwSelectors($componentClass, $attributes),
+ $progressBarMultiflowUse ? FiltersOuputMock::getTwSelectors("{$componentClass}--multiflow", $attributes) : FiltersOuputMock::getTwSelectors("{$componentClass}--multistep", $attributes),
Helpers::selector($progressBarMultiflowUse, $componentClass, '', 'multiflow'),
Helpers::selector(!$progressBarMultiflowUse, UtilsHelper::getStateSelector('stepProgressBar')),
Helpers::selector($progressBarMultiflowUse, UtilsHelper::getStateSelector('stepProgressBarMultiflow')),
- Helpers::selector(!$progressBarMultiflowUse, $componentClass, '', 'multistep'),
Helpers::selector($additionalClass, $additionalClass),
]);
diff --git a/src/Blocks/components/step/step.php b/src/Blocks/components/step/step.php
index 48d434685..d86dc1347 100644
--- a/src/Blocks/components/step/step.php
+++ b/src/Blocks/components/step/step.php
@@ -6,6 +6,7 @@
* @package EightshiftForms
*/
+use EightshiftForms\Hooks\FiltersOuputMock;
use EightshiftFormsVendor\EightshiftFormsUtils\Helpers\UtilsHelper;
use EightshiftFormsVendor\EightshiftFormsUtils\Helpers\UtilsHooksHelper;
use EightshiftFormsVendor\EightshiftLibs\Helpers\Helpers;
@@ -26,7 +27,7 @@
$stepIsActive = Helpers::checkAttr('stepIsActive', $attributes, $manifest);
$stepClass = Helpers::classnames([
- Helpers::selector($componentClass, $componentClass),
+ FiltersOuputMock::getTwSelectors($componentClass, $attributes),
UtilsHelper::getStateSelector('step'),
Helpers::selector($stepIsActive, UtilsHelper::getStateSelector('isActive')),
]);
@@ -62,11 +63,11 @@
?>
- ">
+
">
-
">
-
">
+
">
+
">
[
'additionalContent',
+ 'infoAdditionalContent',
'previewRemoveLabel',
],
'checkboxes' => [