add allow wrap toggle in button

DotCamp · Dec 4, 2023 · 98db412 · 98db412
1 parent d672dea
commit 98db412
Show file tree

Hide file tree

Showing 11 changed files with 43 additions and 10 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-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-keycodes', 'wp-primitives', 'wp-url'), 'version' => '8e7fbf28e32053092889');
+<?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-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-keycodes', 'wp-primitives', 'wp-url'), 'version' => 'dcf86e8baaa3e257c348');
diff --git a/dist/blocks.build.js b/dist/blocks.build.js
@@ -27514,7 +27514,8 @@ function EditorComponent(props) {
     iconPosition = _props$attributes3.iconPosition,
     addNofollow = _props$attributes3.addNofollow,
     openInNewTab = _props$attributes3.openInNewTab,
-    orientation = _props$attributes3.orientation;
+    orientation = _props$attributes3.orientation,
+    isFlexWrap = _props$attributes3.isFlexWrap;
   var _useSelect = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_9__.useSelect)(function (select) {
       var _ref2 = select("core/block-editor") || select("core/editor"),
         getBlock = _ref2.getBlock,
@@ -27835,8 +27836,9 @@ function EditorComponent(props) {
       }
     }
   }, [isSelected]);
+  var flexWrapClass = isFlexWrap ? " ub-flex-wrap" : "";
   var blockProps = (0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_5__.useBlockProps)({
-    className: "ub-buttons align-button-".concat(align, " orientation-button-").concat(orientation),
+    className: "ub-buttons align-button-".concat(align, " orientation-button-").concat(orientation).concat(flexWrapClass),
     style: (0,_get_styles__WEBPACK_IMPORTED_MODULE_3__.getStyles)(props.attributes)
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null, isSelected && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_5__.BlockControls, {
@@ -27868,7 +27870,15 @@ function EditorComponent(props) {
     options: _common__WEBPACK_IMPORTED_MODULE_2__.AVAILABLE_ORIENTATION,
     attributeKey: "orientation",
     label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_7__.__)("Orientation", "ultimate-blocks")
-  }))), isSelected && buttons.length > 0 && activeButtonIndex > -1 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.PanelBody, {
+  })), /*#__PURE__*/React.createElement(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.ToggleControl, {
+    checked: isFlexWrap,
+    label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_7__.__)("Allow to wrap to multiple lines", "ultimate-blocks"),
+    onChange: function onChange() {
+      return setAttributes({
+        isFlexWrap: !isFlexWrap
+      });
+    }
+  })), isSelected && buttons.length > 0 && activeButtonIndex > -1 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.PanelBody, {
     title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_7__.__)("Size", "ultimate-blocks"),
     initialOpen: true
   }, /*#__PURE__*/React.createElement("div", {
@@ -100276,7 +100286,7 @@ module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json
 /***/ (function(module) {
 
 "use strict";
-module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"ub/button","title":"Button (Improved)","category":"ultimateblocks","description":"Add amazing buttons that convert more. Comes with an option to add multiple buttons.","keywords":["Button","Buttons","Ultimate Blocks"],"attributes":{"blockID":{"type":"string","default":""},"buttonText":{"type":"string","default":"Button Text"},"orientation":{"type":"string","default":"row"},"align":{"type":"string","default":"center"},"url":{"type":"string","default":""},"size":{"type":"string","default":"medium"},"buttonColor":{"type":"string","default":"#313131"},"buttonHoverColor":{"type":"string","default":"#313131"},"buttonTextColor":{"type":"string","default":"#ffffff"},"buttonTextHoverColor":{"type":"string","default":"#ffffff"},"buttonRounded":{"type":"boolean","default":true},"chosenIcon":{"type":"string","default":""},"iconPosition":{"type":"string","default":"left"},"buttonIsTransparent":{"type":"boolean","default":false},"addNofollow":{"type":"boolean","default":false},"openInNewTab":{"type":"boolean","default":true},"buttonWidth":{"type":"string","default":"flex"},"buttons":{"type":"array","default":[]},"padding":{"type":"object","default":{}},"margin":{"type":"object","default":{}}},"supports":{}}');
+module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"ub/button","title":"Button (Improved)","category":"ultimateblocks","description":"Add amazing buttons that convert more. Comes with an option to add multiple buttons.","keywords":["Button","Buttons","Ultimate Blocks"],"attributes":{"blockID":{"type":"string","default":""},"buttonText":{"type":"string","default":"Button Text"},"orientation":{"type":"string","default":"row"},"align":{"type":"string","default":"center"},"url":{"type":"string","default":""},"size":{"type":"string","default":"medium"},"buttonColor":{"type":"string","default":"#313131"},"buttonHoverColor":{"type":"string","default":"#313131"},"buttonTextColor":{"type":"string","default":"#ffffff"},"buttonTextHoverColor":{"type":"string","default":"#ffffff"},"isFlexWrap":{"type":"boolean","default":true},"buttonRounded":{"type":"boolean","default":true},"chosenIcon":{"type":"string","default":""},"iconPosition":{"type":"string","default":"left"},"buttonIsTransparent":{"type":"boolean","default":false},"addNofollow":{"type":"boolean","default":false},"openInNewTab":{"type":"boolean","default":true},"buttonWidth":{"type":"string","default":"flex"},"buttons":{"type":"array","default":[]},"padding":{"type":"object","default":{}},"margin":{"type":"object","default":{}}},"supports":{}}');
 
 /***/ }),
 

diff --git a/dist/blocks.build.js.map b/dist/blocks.build.js.map
diff --git a/dist/blocks.style.build.css b/dist/blocks.style.build.css
diff --git a/dist/blocks/button/block.json b/dist/blocks/button/block.json
@@ -51,6 +51,10 @@
       "type": "string",
       "default": "#ffffff"
     },
+    "isFlexWrap": {
+      "type": "boolean",
+      "default": true
+    },
     "buttonRounded": {
       "type": "boolean",
       "default": true

diff --git a/src/blocks/button/block.json b/src/blocks/button/block.json
@@ -51,6 +51,10 @@
                "type": "string",
                "default": "#ffffff"
           },
+          "isFlexWrap": {
+               "type": "boolean",
+               "default": true
+          },
           "buttonRounded": {
                "type": "boolean",
                "default": true

diff --git a/src/blocks/button/block.php b/src/blocks/button/block.php
@@ -66,7 +66,7 @@ class="ub-button-block-main ub-button-' . $size .
     </div></a></div>' : join('', array_map('ub_buttons_parse', $buttons)));
 
     return '<div class="' . (isset($buttons) && count($buttons) > 0 ? 'ub-buttons' : 'ub-button') . (isset($buttons) && count($buttons) > 0 ? ' align-button-' . ($align === '' ? 'center' : $align) : '')
-    . ' orientation-button-' . $orientation . (isset($className) ? ' ' . esc_attr($className) : '') . '" ' .(!isset($blockID) || $blockID === '' ? ' ': ' id="ub-button-' . $blockID . '"') . '>' .$buttonDisplay . '</div>';
+    . ' orientation-button-' . $orientation . ($isFlexWrap ? " ub-flex-wrap" : '') . (isset($className) ? ' ' . esc_attr($className) : '') . '" ' .(!isset($blockID) || $blockID === '' ? ' ': ' id="ub-button-' . $blockID . '"') . '>' .$buttonDisplay . '</div>';
 }
 
 function ub_button_add_frontend_assets() {

diff --git a/src/blocks/button/components.js b/src/blocks/button/components.js
@@ -881,6 +881,7 @@ export function EditorComponent(props) {
 			addNofollow,
 			openInNewTab,
 			orientation,
+			isFlexWrap,
 		},
 	} = props;
 	const { block, getBlock, parentID, getClientIdsWithDescendants, getBlocks } =
@@ -1247,8 +1248,10 @@ export function EditorComponent(props) {
 			}
 		}
 	}, [isSelected]);
+	const flexWrapClass = isFlexWrap ? " ub-flex-wrap" : "";
+
 	const blockProps = useBlockProps({
-		className: `ub-buttons align-button-${align} orientation-button-${orientation}`,
+		className: `ub-buttons align-button-${align} orientation-button-${orientation}${flexWrapClass}`,
 		style: getStyles(props.attributes),
 	});
 
@@ -1291,6 +1294,11 @@ export function EditorComponent(props) {
 									label={__("Orientation", "ultimate-blocks")}
 								/>
 							</div>
+							<ToggleControl
+								checked={isFlexWrap}
+								label={__("Allow to wrap to multiple lines", "ultimate-blocks")}
+								onChange={() => setAttributes({ isFlexWrap: !isFlexWrap })}
+							/>
 						</PanelBody>
 						{isSelected && buttons.length > 0 && activeButtonIndex > -1 && (
 							<>

diff --git a/src/blocks/button/style.css b/src/blocks/button/style.css
diff --git a/src/blocks/button/style.scss b/src/blocks/button/style.scss
@@ -31,6 +31,9 @@
 	cursor: pointer;
 	gap: 20px;
 	transition: background-color 0.5s, color 0.5s, border 0.5s;
+	&.ub-flex-wrap {
+		flex-wrap: wrap;
+	}
 	&.orientation-button-row {
 		flex-direction: row;
 		&.align-button-center {

diff --git a/src/defaults.php b/src/defaults.php
@@ -326,6 +326,10 @@
 				'type'    => 'string',
 				'default' => '#ffffff'
 			),
+			'isFlexWrap'        => array(
+				'type'    => 'boolean',
+				'default' => true
+			),
 			'buttonRounded'        => array(
 				'type'    => 'boolean',
 				'default' => false
Original file line number	Diff line number	Diff line change
		@@ -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-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-keycodes', 'wp-primitives', 'wp-url'), 'version' => '8e7fbf28e32053092889');
		<?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-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-keycodes', 'wp-primitives', 'wp-url'), 'version' => 'dcf86e8baaa3e257c348');