FIX: style controls in JetStyleManager for the Checkbox & Radio fields

Crocoblock/issues-tracker#9763
Crocoblock · Jul 29, 2024 · 7a96105 · 7a96105
1 parent b7a46d9
commit 7a96105
Show file tree

Hide file tree

Showing 14 changed files with 116 additions and 111 deletions.
diff --git a/modules/onboarding/assets/build/editor.asset.php b/modules/onboarding/assets/build/editor.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-components', 'wp-data', 'wp-dom-ready', 'wp-edit-post', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives'), 'version' => '0c70d1888ce206b4b4e0');
+<?php return array('dependencies' => array('react', 'wp-components', 'wp-data', 'wp-dom-ready', 'wp-edit-post', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives'), 'version' => 'fffa8d4f386c6e0a6899');
diff --git a/modules/onboarding/assets/build/editor.js b/modules/onboarding/assets/build/editor.js
diff --git a/modules/onboarding/assets/src/editor/useFormButton/index.pcss b/modules/onboarding/assets/src/editor/useFormButton/index.pcss
@@ -1,3 +1,6 @@
 div[id="jfb-use-form:sidebar"] {
     display: none;
+}
+button[aria-controls="jfb-use-form:sidebar"] > svg {
+    transform: rotateY(180deg);
 }
diff --git a/modules/option-field/assets/build/editor.asset.php b/modules/option-field/assets/build/editor.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '57a503c89450fa73f9a5');
+<?php return array('dependencies' => array('react', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'efc6345edd4880ae30cf');
diff --git a/modules/option-field/assets/build/editor.css b/modules/option-field/assets/build/editor.css
@@ -0,0 +1,4 @@
+.wp-block-jet-forms-checkbox-field .jet-form-builder__fields-group{display:flex;flex-direction:column;gap:.7em}
+
+.wp-block-jet-forms-radio-field .jet-form-builder__fields-group .components-flex{justify-content:flex-start}
+
diff --git a/modules/option-field/assets/build/editor.js b/modules/option-field/assets/build/editor.js
diff --git a/modules/option-field/assets/src/editor/blocks/checkbox/index.js b/modules/option-field/assets/src/editor/blocks/checkbox/index.js
@@ -1,5 +1,6 @@
 import CheckboxEdit from './edit';
 import metadata from '@shared/blocks/checkbox/block.json';
+import './index.pcss';
 
 const { __ } = wp.i18n;
 

diff --git a/modules/option-field/assets/src/editor/blocks/checkbox/index.pcss b/modules/option-field/assets/src/editor/blocks/checkbox/index.pcss
@@ -0,0 +1,7 @@
+.wp-block-jet-forms-checkbox-field {
+    .jet-form-builder__fields-group {
+        display: flex;
+        flex-direction: column;
+        gap: .7em;
+    }
+}
diff --git a/modules/option-field/assets/src/editor/blocks/radio/edit.js b/modules/option-field/assets/src/editor/blocks/radio/edit.js
@@ -25,15 +25,9 @@ const {
 
 const {
 	      PanelBody,
-	      ToolbarButton,
 	      MenuItem,
       } = wp.components;
 
-const {
-	      SVG,
-	      Path,
-      } = wp.primitives;
-
 const {
 	      useUniqueNameOnDuplicate,
       } = JetFBHooks;

diff --git a/modules/option-field/assets/src/editor/blocks/radio/index.js b/modules/option-field/assets/src/editor/blocks/radio/index.js
@@ -1,5 +1,6 @@
 import RadioEdit from './edit';
 import metadata from '@shared/blocks/radio/block.json';
+import './index.pcss';
 
 const { __ } = wp.i18n;
 

diff --git a/modules/option-field/assets/src/editor/blocks/radio/index.pcss b/modules/option-field/assets/src/editor/blocks/radio/index.pcss
@@ -0,0 +1,5 @@
+.wp-block-jet-forms-radio-field {
+    .jet-form-builder__fields-group .components-flex {
+        justify-content: flex-start;
+    }
+}
diff --git a/modules/option-field/blocks/checkbox/block-type.php b/modules/option-field/blocks/checkbox/block-type.php
@@ -55,105 +55,97 @@ public function jsm_controls() {
 			array(
 				'id'           => 'filters_position',
 				'type'         => 'choose',
-				'label'        => __( 'Filters Position', 'jet-form-builder' ),
+				'label'        => __( 'Options Position', 'jet-form-builder' ),
 				'separator'    => 'after',
 				'options'      => array(
-					'inline-block' => array(
-						'shortcut' => __( 'Line', 'jet-form-builder' ),
-						'icon'     => 'dashicons-ellipsis',
-					),
-					'block'        => array(
+					'column'        => array(
 						'shortcut' => __( 'Column', 'jet-form-builder' ),
 						'icon'     => 'dashicons-menu-alt',
 					),
+					'row' => array(
+						'shortcut' => __( 'Line', 'jet-form-builder' ),
+						'icon'     => 'dashicons-ellipsis',
+					),
 				),
 				'css_selector' => array(
-					'{{WRAPPER}} ' . $this->css_scheme['item'] => 'display: {{VALUE}};',
+					'{{WRAPPER}} ' . $this->css_scheme['wrapper'] => 'flex-direction: {{VALUE}};',
 				),
 				'attributes'   => array(
 					'default' => array(
-						'value' => 'block',
+						'value' => 'column',
 					),
 				),
 			)
 		);
 
+		$alignment_options = array(
+			'flex-start'   => array(
+				'shortcut' => __( 'Start', 'jet-form-builder' ) ,
+				'icon'     => 'dashicons-editor-align' . ( is_rtl() ? 'right' : 'left' ),
+			),
+			'center' => array(
+				'shortcut' => __( 'Center', 'jet-form-builder' ),
+				'icon'     => 'dashicons-editor-aligncenter',
+			),
+			'flex-end'  => array(
+				'shortcut' => __( 'End', 'jet-form-builder' ) ,
+				'icon'     => 'dashicons-editor-align' . ( is_rtl() ? 'left' : 'right' ),
+			),
+		);
+
 		$this->controls_manager->add_control(
 			array(
 				'id'           => 'items_alignment',
 				'type'         => 'choose',
 				'label'        => __( 'Alignment', 'jet-form-builder' ),
 				'separator'    => 'after',
-				'options'      => array(
-					'left'   => array(
-						'shortcut' => __( 'Left', 'jet-form-builder' ),
-						'icon'     => 'dashicons-editor-alignleft',
-					),
-					'center' => array(
-						'shortcut' => __( 'Center', 'jet-form-builder' ),
-						'icon'     => 'dashicons-editor-aligncenter',
-					),
-					'right'  => array(
-						'shortcut' => __( 'Right', 'jet-form-builder' ),
-						'icon'     => 'dashicons-editor-alignright',
-					),
-				),
+				'options'      => $alignment_options,
 				'css_selector' => array(
-					'{{WRAPPER}} ' . $this->css_scheme['wrapper'] => 'text-align: {{VALUE}};',
+					'{{WRAPPER}} ' . $this->css_scheme['wrapper'] => 'align-items: {{VALUE}};',
+				),
+				'condition' => array(
+					'filters_position' => 'column',
 				),
 			)
 		);
 
 		$this->controls_manager->add_control(
 			array(
-				'id'           => 'items_space_between',
-				'type'         => 'range',
-				'label'        => __( 'Space Between', 'jet-form-builder' ),
+				'id'           => 'items_alignment_row',
+				'type'         => 'choose',
+				'label'        => __( 'Alignment', 'jet-form-builder' ),
 				'separator'    => 'after',
-				'units'        => array(
-					array(
-						'value'     => 'px',
-						'intervals' => array(
-							'step' => 1,
-							'min'  => 0,
-							'max'  => 50,
-						),
-					),
-				),
+				'options'      => $alignment_options,
 				'css_selector' => array(
-					'{{WRAPPER}} ' . $this->css_scheme['item'] . ':not(:last-child)'  => 'margin-bottom: calc({{VALUE}}{{UNIT}}/2);',
-					'{{WRAPPER}} ' . $this->css_scheme['item'] . ':not(:first-child)' => 'padding-top: calc({{VALUE}}{{UNIT}}/2);',
+					'{{WRAPPER}} ' . $this->css_scheme['wrapper'] => 'justify-content: {{VALUE}};',
 				),
-				'attributes'   => array(
-					'default' => array(
-						'value' => 10,
-					),
+				'condition' => array(
+					'filters_position' => 'row',
 				),
 			)
 		);
 
 		$this->controls_manager->add_control(
 			array(
-				'id'           => 'horisontal_layout_description',
+				'id'           => 'items_space_between',
 				'type'         => 'range',
-				'label'        => __( 'Horizontal Offset', 'jet-form-builder' ),
-				'help'         => __( 'Horizontal Offset control works only with Line Filters Position', 'jet-form-builder' ),
+				'label'        => __( 'Space Between', 'jet-form-builder' ),
 				'units'        => array(
 					array(
 						'value'     => 'px',
 						'intervals' => array(
 							'step' => 1,
 							'min'  => 0,
-							'max'  => 40,
+							'max'  => 50,
 						),
 					),
 				),
 				'css_selector' => array(
-					'{{WRAPPER}} ' . $this->css_scheme['item'] => 'margin-right: {{VALUE}}{{UNIT}};',
+					'{{WRAPPER}} ' . $this->css_scheme['wrapper']  => 'gap: {{VALUE}}{{UNIT}};',
 				),
 				'attributes'   => array(
 					'default' => array(
-						'value' => 0,
+						'value' => 10,
 					),
 				),
 			)

diff --git a/modules/option-field/blocks/radio/block-type.php b/modules/option-field/blocks/radio/block-type.php
@@ -50,6 +50,10 @@ public function get_css_scheme() {
 	}
 
 	public function jsm_controls() {
+		$wrapper_selector = (
+			'{{WRAPPER}} ' . $this->css_scheme['list-wrapper'] . ', {{WRAPPER}} ' . $this->css_scheme['list-wrapper'] .  ' .components-flex'
+		);
+
 		$this->controls_manager->start_section(
 			'style_controls',
 			array(
@@ -63,110 +67,97 @@ public function jsm_controls() {
 			array(
 				'id'           => 'filters_position',
 				'type'         => 'choose',
-				'label'        => __( 'Filters Position', 'jet-form-builder' ),
+				'label'        => __( 'Options Position', 'jet-form-builder' ),
 				'separator'    => 'after',
 				'options'      => array(
-					'inline-block' => array(
-						'shortcut' => __( 'Line', 'jet-form-builder' ),
-						'icon'     => 'dashicons-ellipsis',
-					),
-					'block'        => array(
+					'column'        => array(
 						'shortcut' => __( 'Column', 'jet-form-builder' ),
 						'icon'     => 'dashicons-menu-alt',
 					),
+					'row' => array(
+						'shortcut' => __( 'Line', 'jet-form-builder' ),
+						'icon'     => 'dashicons-ellipsis',
+					),
 				),
 				'css_selector' => array(
-					'{{WRAPPER}} ' . $this->css_scheme['item']       => 'display: {{VALUE}};',
-					'{{WRAPPER}} ' . $this->css_scheme['front-wrap'] => 'display: {{VALUE}};',
+					$wrapper_selector => 'flex-direction: {{VALUE}};',
 				),
 				'attributes'   => array(
 					'default' => array(
-						'value' => 'block',
+						'value' => 'column',
 					),
 				),
 			)
 		);
 
+		$alignment_options = array(
+			'flex-start'   => array(
+				'shortcut' => __( 'Start', 'jet-form-builder' ) ,
+				'icon'     => 'dashicons-editor-align' . ( is_rtl() ? 'right' : 'left' ),
+			),
+			'center' => array(
+				'shortcut' => __( 'Center', 'jet-form-builder' ),
+				'icon'     => 'dashicons-editor-aligncenter',
+			),
+			'flex-end'  => array(
+				'shortcut' => __( 'End', 'jet-form-builder' ) ,
+				'icon'     => 'dashicons-editor-align' . ( is_rtl() ? 'left' : 'right' ),
+			),
+		);
+
 		$this->controls_manager->add_control(
 			array(
 				'id'           => 'items_alignment',
 				'type'         => 'choose',
 				'label'        => __( 'Alignment', 'jet-form-builder' ),
 				'separator'    => 'after',
-				'options'      => array(
-					'left'   => array(
-						'shortcut' => __( 'Left', 'jet-form-builder' ),
-						'icon'     => 'dashicons-editor-alignleft',
-					),
-					'center' => array(
-						'shortcut' => __( 'Center', 'jet-form-builder' ),
-						'icon'     => 'dashicons-editor-aligncenter',
-					),
-					'right'  => array(
-						'shortcut' => __( 'Right', 'jet-form-builder' ),
-						'icon'     => 'dashicons-editor-alignright',
-					),
-				),
+				'options'      => $alignment_options,
 				'css_selector' => array(
-					'{{WRAPPER}} ' . $this->css_scheme['list-wrapper'] => 'text-align: {{VALUE}};',
+					$wrapper_selector => 'align-items: {{VALUE}};',
+				),
+				'condition' => array(
+					'filters_position' => 'column',
 				),
 			)
 		);
 
 		$this->controls_manager->add_control(
 			array(
-				'id'           => 'items_space_between',
-				'type'         => 'range',
-				'label'        => __( 'Space Between', 'jet-form-builder' ),
+				'id'           => 'items_alignment_row',
+				'type'         => 'choose',
+				'label'        => __( 'Alignment', 'jet-form-builder' ),
 				'separator'    => 'after',
-				'units'        => array(
-					array(
-						'value'     => 'px',
-						'intervals' => array(
-							'step' => 1,
-							'min'  => 0,
-							'max'  => 50,
-						),
-					),
-				),
+				'options'      => $alignment_options,
 				'css_selector' => array(
-					'{{WRAPPER}} ' . $this->css_scheme['item'] . ':not(:last-child)'        => 'margin-bottom: calc({{VALUE}}{{UNIT}}/2);',
-					'{{WRAPPER}} ' . $this->css_scheme['item'] . ':not(:first-child)'       => 'padding-top: calc({{VALUE}}{{UNIT}}/2);',
-					'{{WRAPPER}} ' . $this->css_scheme['front-wrap'] . ':not(:last-child)'  => 'margin-bottom: calc({{VALUE}}{{UNIT}}/2);',
-					'{{WRAPPER}} ' . $this->css_scheme['front-wrap'] . ':not(:first-child)' => 'padding-top: calc({{VALUE}}{{UNIT}}/2);',
+					$wrapper_selector => 'justify-content: {{VALUE}};',
 				),
-				'attributes'   => array(
-					'default' => array(
-						'value' => 10,
-					),
+				'condition' => array(
+					'filters_position' => 'row',
 				),
 			)
 		);
 
 		$this->controls_manager->add_control(
 			array(
-				'id'           => 'horisontal_layout_description',
+				'id'           => 'items_space_between',
 				'type'         => 'range',
-				'label'        => __( 'Horizontal Offset', 'jet-form-builder' ),
-				'help'         => __( 'Horizontal Offset control works only with Line Filters Position', 'jet-form-builder' ),
-				'separator'    => 'none',
+				'label'        => __( 'Space Between', 'jet-form-builder' ),
 				'units'        => array(
 					array(
 						'value'     => 'px',
 						'intervals' => array(
 							'step' => 1,
 							'min'  => 0,
-							'max'  => 40,
+							'max'  => 50,
 						),
 					),
 				),
 				'css_selector' => array(
-					'{{WRAPPER}} ' . $this->css_scheme['item']       => 'margin-right: {{VALUE}}{{UNIT}}',
-					'{{WRAPPER}} ' . $this->css_scheme['front-wrap'] => 'margin-right: {{VALUE}}{{UNIT}}',
+					$wrapper_selector => 'gap: {{VALUE}}{{UNIT}};',
 				),
 				'attributes'   => array(
 					'default' => array(
-						'value' => 0,
+						'value' => 10,
 					),
 				),
 			)

diff --git a/modules/option-field/module.php b/modules/option-field/module.php
@@ -103,6 +103,13 @@ public function enqueue_admin_assets() {
 			true
 		);
 
+		wp_enqueue_style(
+			$this->get_handle(),
+			$this->get_url( 'assets/build/editor.css' ),
+			array(),
+			$script_asset['version']
+		);
+
 		wp_localize_script(
 			$this->get_handle(),
 			'JetFormOptionFieldData',
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<?php return array('dependencies' => array('react', 'wp-components', 'wp-data', 'wp-dom-ready', 'wp-edit-post', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives'), 'version' => '0c70d1888ce206b4b4e0');
		<?php return array('dependencies' => array('react', 'wp-components', 'wp-data', 'wp-dom-ready', 'wp-edit-post', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives'), 'version' => 'fffa8d4f386c6e0a6899');
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,4 @@
		.wp-block-jet-forms-checkbox-field .jet-form-builder__fields-group{display:flex;flex-direction:column;gap:.7em}

		.wp-block-jet-forms-radio-field .jet-form-builder__fields-group .components-flex{justify-content:flex-start}