add and improve divider features

DotCamp · Apr 29, 2024 · b87690b · b87690b
1 parent 673f01c
commit b87690b
Show file tree

Hide file tree

Showing 10 changed files with 52 additions and 25 deletions.
diff --git a/dist/blocks.build.asset.php b/dist/blocks.build.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'moment', 'react', 'react-dom', 'wp-api', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-keycodes', 'wp-notices', 'wp-primitives', 'wp-url'), 'version' => 'ae8e9db9befade7ff5f7');
+<?php return array('dependencies' => array('lodash', 'moment', 'react', 'react-dom', 'wp-api', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-keycodes', 'wp-notices', 'wp-primitives', 'wp-url'), 'version' => '4bce3aed271b06606272');
diff --git a/dist/blocks.build.js b/dist/blocks.build.js
@@ -52896,7 +52896,7 @@ var URLInputBox = function URLInputBox(props) {
     label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_8__.__)("Apply", "ultimate-blocks"),
     type: "submit"
     /*onClick={() =>
-    			}*/
+    		}*/
   }))), /*#__PURE__*/React.createElement(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.CheckboxControl, {
     label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_8__.__)("Open Link in New Tab", "ultimate-blocks"),
     checked: buttons[index].openInNewTab,
@@ -61528,6 +61528,8 @@ function DividerBlock(props) {
     alignment = _props$attributes.alignment,
     orientation = _props$attributes.orientation,
     lineHeight = _props$attributes.lineHeight,
+    dividerWidth = _props$attributes.dividerWidth,
+    isWidthControlChanged = _props$attributes.isWidthControlChanged,
     isSelected = props.isSelected,
     setAttributes = props.setAttributes,
     className = props.className,
@@ -61543,6 +61545,12 @@ function DividerBlock(props) {
         blockID: block.clientId
       });
     }
+    if (!isWidthControlChanged) {
+      setAttributes({
+        dividerWidth: "".concat(width, "%"),
+        isWidthControlChanged: true
+      });
+    }
   }, []);
   (0,react__WEBPACK_IMPORTED_MODULE_2__.useEffect)(function () {
     setAttributes({
@@ -61554,7 +61562,7 @@ function DividerBlock(props) {
   var dividerStyle = orientation === "horizontal" ? {
     marginTop: borderHeight + "px",
     marginBottom: borderHeight + "px",
-    width: width + "%"
+    width: dividerWidth
   } : {
     width: "fit-content",
     height: lineHeight
@@ -61587,19 +61595,16 @@ function DividerBlock(props) {
     resetFallbackValue: 2,
     beforeIcon: "minus",
     allowReset: true
-  }), /*#__PURE__*/React.createElement(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.RangeControl, {
-    label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_4__.__)("Width"),
-    value: width,
+  }), /*#__PURE__*/React.createElement(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.HeightControl, {
+    label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_4__.__)("Width", "ultimate-blocks-pro"),
+    value: dividerWidth,
     onChange: function onChange(value) {
       return setAttributes({
-        width: value
+        dividerWidth: value
       });
     },
-    min: 0,
-    max: 100,
-    resetFallbackValue: 100,
     allowReset: true
-  })), orientation === "vertical" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.HeightControl, {
+  }), /*#__PURE__*/React.createElement("br", null)), orientation === "vertical" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.HeightControl, {
     label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_4__.__)("Line Height"),
     value: lineHeight,
     onChange: function onChange(value) {
@@ -61619,7 +61624,7 @@ function DividerBlock(props) {
     }],
     attributeKey: "orientation",
     label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_4__.__)("Orientation", "ultimate-blocks")
-  }), (width < 100 || orientation === "vertical") && /*#__PURE__*/React.createElement(_components__WEBPACK_IMPORTED_MODULE_9__.CustomToggleGroupControl, {
+  }), orientation === "vertical" && /*#__PURE__*/React.createElement(_components__WEBPACK_IMPORTED_MODULE_9__.CustomToggleGroupControl, {
     isAdaptiveWidth: true,
     options: _common__WEBPACK_IMPORTED_MODULE_11__.AVAILABLE_JUSTIFICATIONS.slice(0, _common__WEBPACK_IMPORTED_MODULE_11__.AVAILABLE_JUSTIFICATIONS.length - 1),
     attributeKey: "alignment",
@@ -133834,7 +133839,7 @@ module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/tru
 /***/ ((module) => {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"ub/divider","title":"Divider","category":"ultimateblocks","description":"Add custom divider between your blocks. Customize the color, size, everything.","keywords":["Divider","Separator","Ultimate Blocks"],"attributes":{"lineHeight":{"type":"string","default":"300px"},"orientation":{"type":"string","default":"horizontal"},"blockID":{"type":"string","default":""},"borderSize":{"type":"number","default":2},"borderStyle":{"type":"string","default":"solid"},"borderColor":{"type":"string","default":"#ccc"},"borderHeight":{"type":"number","default":2},"width":{"type":"number","default":100},"alignment":{"type":"string","default":"center"},"padding":{"type":"object","default":{}},"margin":{"type":"object","default":{}}},"supports":{}}');
+module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"ub/divider","title":"Divider","category":"ultimateblocks","description":"Add custom divider between your blocks. Customize the color, size, everything.","keywords":["Divider","Separator","Ultimate Blocks"],"attributes":{"lineHeight":{"type":"string","default":"300px"},"orientation":{"type":"string","default":"horizontal"},"blockID":{"type":"string","default":""},"borderSize":{"type":"number","default":2},"borderStyle":{"type":"string","default":"solid"},"borderColor":{"type":"string","default":"#ccc"},"borderHeight":{"type":"number","default":2},"width":{"type":"number","default":100},"alignment":{"type":"string","default":"center"},"padding":{"type":"object","default":{}},"margin":{"type":"object","default":{}},"dividerWidth":{"type":"string","default":"100%"},"isWidthControlChanged":{"type":"boolean","default":false}},"supports":{}}');
 
 /***/ }),
 

diff --git a/dist/blocks.build.js.map b/dist/blocks.build.js.map
diff --git a/dist/blocks/divider/block.json b/dist/blocks/divider/block.json
@@ -54,6 +54,14 @@
     "margin": {
       "type": "object",
       "default": {}
+    },
+    "dividerWidth": {
+      "type": "string",
+      "default": "100%"
+    },
+    "isWidthControlChanged": {
+      "type": "boolean",
+      "default": false
     }
   },
   "supports": {}

diff --git a/dist/priority.build.js.map b/dist/priority.build.js.map
diff --git a/library/freemius/assets/img/ultimate-blocks.png b/library/freemius/assets/img/ultimate-blocks.png
diff --git a/readme.txt b/readme.txt
@@ -155,6 +155,8 @@ That's it. You're done!
 * NEW: Block Spacing in button block.
 * FIX: Slides per view not working properly in the frontend in image slider block.
 * IMPROVE: Add flex wrap on content filter buttons.
+* NEW: Icon spacing in divider block.
+* IMPROVE: Width control in divider block.
 
 = 3.1.7 =
 

diff --git a/src/blocks/divider/block.js b/src/blocks/divider/block.js
@@ -87,6 +87,8 @@ function DividerBlock(props) {
 			alignment,
 			orientation,
 			lineHeight,
+			dividerWidth,
+			isWidthControlChanged,
 		},
 		isSelected,
 		setAttributes,
@@ -102,6 +104,9 @@ function DividerBlock(props) {
 		if (blockID === "") {
 			setAttributes({ blockID: block.clientId });
 		}
+		if (!isWidthControlChanged) {
+			setAttributes({ dividerWidth: `${width}%`, isWidthControlChanged: true });
+		}
 	}, []);
 	useEffect(() => {
 		setAttributes({ blockID: block.clientId });
@@ -113,7 +118,7 @@ function DividerBlock(props) {
 			? {
 					marginTop: borderHeight + "px",
 					marginBottom: borderHeight + "px",
-					width: width + "%",
+					width: dividerWidth,
 				}
 			: {
 					width: "fit-content",
@@ -148,15 +153,13 @@ function DividerBlock(props) {
 										beforeIcon="minus"
 										allowReset
 									/>
-									<RangeControl
-										label={__("Width")}
-										value={width}
-										onChange={(value) => setAttributes({ width: value })}
-										min={0}
-										max={100}
-										resetFallbackValue={100}
+									<HeightControl
+										label={__("Width", "ultimate-blocks-pro")}
+										value={dividerWidth}
+										onChange={(value) => setAttributes({ dividerWidth: value })}
 										allowReset
 									/>
+									<br></br>
 								</>
 							)}
 							{orientation === "vertical" && (
@@ -185,7 +188,7 @@ function DividerBlock(props) {
 								attributeKey="orientation"
 								label={__("Orientation", "ultimate-blocks")}
 							/>
-							{(width < 100 || orientation === "vertical") && (
+							{orientation === "vertical" && (
 								<CustomToggleGroupControl
 									isAdaptiveWidth
 									options={AVAILABLE_JUSTIFICATIONS.slice(

diff --git a/src/blocks/divider/block.json b/src/blocks/divider/block.json
@@ -54,6 +54,14 @@
           "margin": {
                "type": "object",
                "default": {}
+          },
+          "dividerWidth": {
+               "type": "string",
+               "default": "100%"
+          },
+          "isWidthControlChanged": {
+               "type": "boolean",
+               "default": false
           }
      },
      "supports": {}

diff --git a/src/init.php b/src/init.php
@@ -669,10 +669,11 @@ function ub_include_block_attribute_css() {
 					$prefix = '#ub_divider_' . $attributes['blockID'];
 					$styles = ub_get_spacing_styles($attributes);
 					$orientation = isset($attributes['orientation']) ? $attributes['orientation'] : 'horizontal';
+					$divider_width = isset($attributes['isDividerWidthChanged']) && $attributes['isDividerWidthChanged'] && isset($attributes['dividerWidth']) ? $attributes['dividerWidth'] : $attributes['width'];
 					$divider_style = $orientation === 'horizontal' ?
 						 'margin-top: ' . $attributes['borderHeight'] . 'px;' . PHP_EOL .
 						'margin-bottom: ' . $attributes['borderHeight'] . 'px;' . PHP_EOL .
-						'width: ' . $attributes['width'] . '%;' . PHP_EOL :
+						'width: ' . $divider_width . '%;' . PHP_EOL :
 						'width:fit-content; height:'. $attributes['lineHeight'] .';';
 					$blockStylesheets .= $prefix . '{' . PHP_EOL . $styles . PHP_EOL . "}"; 
 					$blockStylesheets .= $prefix . ' .ub_divider{' . PHP_EOL .