add square and circle style in icon block

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' => 'c3244c3b3369cc19ae00');
+<?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' => '03eb8cad72bbfb761fe1');

dist/blocks.build.js

@@ -65435,6 +65435,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _edit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./edit */ "./src/blocks/icon/edit.js");
 /* harmony import */ var _save__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./save */ "./src/blocks/icon/save.js");
 /* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./block.json */ "./src/blocks/icon/block.json");
+/* harmony import */ var _blocks_styles__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./blocks-styles */ "./src/blocks/icon/blocks-styles.js");
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -65454,6 +65455,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 
 
 
+
 (0,$Inc_registerPluginBlock__WEBPACK_IMPORTED_MODULE_1__["default"])(_block_json__WEBPACK_IMPORTED_MODULE_5__.name, _objectSpread(_objectSpread({}, _block_json__WEBPACK_IMPORTED_MODULE_5__), {}, {
   icon: _icons_block_icon__WEBPACK_IMPORTED_MODULE_2__.blockIcon,
   attributes: _block_json__WEBPACK_IMPORTED_MODULE_5__.attributes,
@@ -65475,6 +65477,40 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 
 /***/ }),
 
+/***/ "./src/blocks/icon/blocks-styles.js":
+/*!******************************************!*\
+  !*** ./src/blocks/icon/blocks-styles.js ***!
+  \******************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
+/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__);
+
+var styles = [{
+  name: "default",
+  isDefault: true,
+  label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Default", "ultimate-blocks")
+}, {
+  name: "circle-fill",
+  label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Circle Fill", "ultimate-blocks")
+}, {
+  name: "circle-outline",
+  label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Circle Outline", "ultimate-blocks")
+}, {
+  name: "square-fill",
+  label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Square Fill", "ultimate-blocks")
+}, {
+  name: "square-outline",
+  label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Square Outline", "ultimate-blocks")
+}];
+styles.forEach(function (style) {
+  wp.blocks.registerBlockStyle("ub/icon", style);
+});
+
+/***/ }),
+
 /***/ "./src/blocks/icon/components/CustomSvgInserter.js":
 /*!*********************************************************!*\
   !*** ./src/blocks/icon/components/CustomSvgInserter.js ***!
@@ -69860,22 +69896,27 @@ __webpack_require__.r(__webpack_exports__);
  */
 
 function CustomInspectorControls(props) {
+  var _ref, _props$attributes2;
   var setAttributes = props.setAttributes,
     _props$attributes = props.attributes,
     size = _props$attributes.size,
-    iconRotation = _props$attributes.iconRotation;
+    iconRotation = _props$attributes.iconRotation,
+    className = _props$attributes.className;
+  var blockClassName = (_ref = className !== null && className !== void 0 ? className : (_props$attributes2 = props.attributes) === null || _props$attributes2 === void 0 ? void 0 : _props$attributes2.className) !== null && _ref !== void 0 ? _ref : "";
+  var isStyleCircleOutline = blockClassName === null || blockClassName === void 0 ? void 0 : blockClassName.split(" ").includes("is-style-circle-outline");
+  var isStyleSquareOutline = blockClassName === null || blockClassName === void 0 ? void 0 : blockClassName.split(" ").includes("is-style-square-outline");
   var normalStateColors = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_components__WEBPACK_IMPORTED_MODULE_3__.ColorSettings, {
     attrKey: "iconColor",
     label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Icon Color")
-  }), /*#__PURE__*/React.createElement(_components__WEBPACK_IMPORTED_MODULE_3__.ColorSettingsWithGradient, {
+  }), !isStyleCircleOutline && !isStyleSquareOutline && /*#__PURE__*/React.createElement(_components__WEBPACK_IMPORTED_MODULE_3__.ColorSettingsWithGradient, {
     attrBackgroundKey: "iconBackground",
     attrGradientKey: "iconGradientBackground",
     label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Icon Background")
   }));
   var hoverStateColors = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_components__WEBPACK_IMPORTED_MODULE_3__.ColorSettings, {
     attrKey: "iconHoverColor",
     label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Icon Color")
-  }), /*#__PURE__*/React.createElement(_components__WEBPACK_IMPORTED_MODULE_3__.ColorSettingsWithGradient, {
+  }), !isStyleCircleOutline && !isStyleSquareOutline && /*#__PURE__*/React.createElement(_components__WEBPACK_IMPORTED_MODULE_3__.ColorSettingsWithGradient, {
     attrBackgroundKey: "iconHoverBackground",
     attrGradientKey: "iconHoverGradientBackground",
     label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Icon Background")

readme.txt

@@ -153,6 +153,7 @@ That's it. You're done!
 = 3.1.9 =
 
 * FIX: Letter spacing not working in editor advanced heading block.
+* NEW: Square Fill, Square Outline, Circle Fill, Circle Outline styles in the icon block.
 * NEW: Alignment option in table of content block.
 * NEW: Summary title and title font size in review block.
 * NEW: Slider speed to make slider work smoothly in image slider.

src/blocks/icon/block.js

@@ -11,6 +11,7 @@ import { blockIcon } from "./icons/block-icon";
 import Edit from "./edit";
 import Save from "./save";
 import metadata from "./block.json";
+import "./blocks-styles";
 
 registerPluginBlock(metadata.name, {
 	...metadata,

src/blocks/icon/blocks-styles.js

@@ -0,0 +1,29 @@
+import { __ } from "@wordpress/i18n";
+
+const styles = [
+	{
+		name: "default",
+		isDefault: true,
+		label: __("Default", "ultimate-blocks"),
+	},
+	{
+		name: "circle-fill",
+		label: __("Circle Fill", "ultimate-blocks"),
+	},
+	{
+		name: "circle-outline",
+		label: __("Circle Outline", "ultimate-blocks"),
+	},
+	{
+		name: "square-fill",
+		label: __("Square Fill", "ultimate-blocks"),
+	},
+	{
+		name: "square-outline",
+		label: __("Square Outline", "ultimate-blocks"),
+	},
+];
+
+styles.forEach((style) => {
+	wp.blocks.registerBlockStyle("ub/icon", style);
+});

src/blocks/icon/inspector.js

@@ -18,26 +18,37 @@ import {
 function CustomInspectorControls(props) {
 	const {
 		setAttributes,
-		attributes: { size, iconRotation },
+		attributes: { size, iconRotation, className },
 	} = props;
+	const blockClassName = className ?? props.attributes?.className ?? "";
+	const isStyleCircleOutline = blockClassName
+		?.split(" ")
+		.includes("is-style-circle-outline");
+	const isStyleSquareOutline = blockClassName
+		?.split(" ")
+		.includes("is-style-square-outline");
 	const normalStateColors = (
 		<>
 			<ColorSettings attrKey="iconColor" label={__("Icon Color")} />
-			<ColorSettingsWithGradient
-				attrBackgroundKey="iconBackground"
-				attrGradientKey="iconGradientBackground"
-				label={__("Icon Background")}
-			/>
+			{!isStyleCircleOutline && !isStyleSquareOutline && (
+				<ColorSettingsWithGradient
+					attrBackgroundKey="iconBackground"
+					attrGradientKey="iconGradientBackground"
+					label={__("Icon Background")}
+				/>
+			)}
 		</>
 	);
 	const hoverStateColors = (
 		<>
 			<ColorSettings attrKey="iconHoverColor" label={__("Icon Color")} />
-			<ColorSettingsWithGradient
-				attrBackgroundKey="iconHoverBackground"
-				attrGradientKey="iconHoverGradientBackground"
-				label={__("Icon Background")}
-			/>
+			{!isStyleCircleOutline && !isStyleSquareOutline && (
+				<ColorSettingsWithGradient
+					attrBackgroundKey="iconHoverBackground"
+					attrGradientKey="iconHoverGradientBackground"
+					label={__("Icon Background")}
+				/>
+			)}
 		</>
 	);
 	return (