icon option in styled list item 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' => 'de69497495aeeb82c25b');
+<?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' => 'f26bc69e622f96651599');

readme.txt

@@ -155,6 +155,7 @@ That's it. You're done!
 * FIX: Button (Improved) breaks when select empty icon.
 * FIX: Table of content not getting nested toggle content block.
 * NEW: Alignment control for the filter buttons in content filter block.
+* NEW: Icon Option for individual list item in styled list block.
 
 = 3.1.6 =
 

src/blocks/styled-list/components.js

@@ -23,6 +23,7 @@ import {
 	ToolbarGroup,
 } from "@wordpress/components";
 import classnames from "classnames";
+import { IconControl, IconSizePicker } from "$Library/ub-common/Components";
 
 import {
 	dashesToCamelcase,
@@ -752,6 +753,7 @@ export function StyledListItem(props) {
 		}
 	}, []);
 
+	const listRoot = getBlock(listRootClientId);
 	function outdentItem() {
 		//outdents current item by default, but should also allow outdenting other list item blocks
 
@@ -762,8 +764,6 @@ export function StyledListItem(props) {
 			["ub/styled-list", "ub/styled-list-item"].includes(getBlock(b).name),
 		);
 
-		const listRoot = getBlock(listRootClientId);
-
 		if (ancestorItemsAndLists.length > 1) {
 			moveBlocksToPosition(
 				[block.clientId],
@@ -856,9 +856,32 @@ export function StyledListItem(props) {
 			toggleUseFontSize(fontSize > 0);
 		}
 	}, [fontSize]);
-
+	const rootIcon = listRoot?.attributes?.selectedIcon;
 	return (
 		<div {...blockProps}>
+			<InspectorControls>
+				<PanelBody title={__("Icon", "ultimate-blocks")} initialOpen={true}>
+					<IconControl
+						selectedIcon={selectedIcon}
+						label={__("Icon", "ultimate-blocks")}
+						onIconSelect={(newIcon) => {
+							if (newIcon) {
+								setAttributes({ selectedIcon: newIcon });
+							} else {
+								setAttributes({ selectedIcon: "" });
+							}
+						}}
+					/>
+					<RangeControl
+						value={iconSize}
+						onChange={(iconSize) => {
+							setAttributes({ iconSize });
+						}}
+						min={1}
+						max={10}
+					/>
+				</PanelBody>
+			</InspectorControls>
 			<InspectorControls group="styles">
 				<PanelBody
 					title={__("Dimension Settings", "ultimate-blocks")}
@@ -1096,6 +1119,27 @@ export function StyledListItem(props) {
 				allowedBlocks={["ub/styled-list"]}
 				renderAppender={false}
 			/>
+			{rootIcon !== selectedIcon && selectedIcon !== "" && (
+				<style
+					dangerouslySetInnerHTML={{
+						__html: `#ub-styled-list-item-${blockID}::before{
+					top: ${iconSize >= 5 ? 3 : iconSize < 3 ? 2 : 0}px !important;
+					height:${(4 + iconSize) / 10}em !important;
+					width:${(4 + iconSize) / 10}em !important;
+					background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${
+						allIcons[`fa${dashesToCamelcase(selectedIcon)}`].icon[0]
+					} ${
+						allIcons[`fa${dashesToCamelcase(selectedIcon)}`].icon[1]
+					}' color='${
+						iconColor ? `%23${iconColor.slice(1)}` : "inherit"
+					}'><path fill='currentColor' d='${
+						allIcons[`fa${dashesToCamelcase(selectedIcon)}`].icon[4]
+					}'></path></svg>") !important;
+						}
+					`,
+					}}
+				/>
+			)}
 		</div>
 	);
 }

src/common.js

@@ -36,7 +36,7 @@ export const mergeRichTextArray = (input) =>
 export const dashesToCamelcase = (str) =>
 	str
 		.split("-")
-		.map((s) => s[0].toUpperCase() + s.slice(1))
+		.map((s) => s[0]?.toUpperCase() + s?.slice(1))
 		.join("");
 
 export const generateIcon = (selectedIcon, size, unit = "px") => (

src/init.php

@@ -1157,7 +1157,6 @@ function ub_howto_generateStepPicStyle( $stepPic ) {
 										1 ) . '" d="' . $iconData[2] . '"></path></svg>\');' . PHP_EOL .
 											 '}' .
 											 $prefix . ' li{' . PHP_EOL .
-											 'text-indent: -' . ( 0.4 + $attributes['iconSize'] * 0.1 ) . 'em;' . PHP_EOL .
 											 ( $attributes['fontSize'] > 0 ? 'font-size: ' . ( $attributes['fontSize'] ) . 'px;' . PHP_EOL : '' );
 						if ( $attributes['itemSpacing'] > 0 ) {
 							if ( $attributes['list'] !== '' ) {
@@ -1209,6 +1208,22 @@ function ub_howto_generateStepPicStyle( $stepPic ) {
 					}
 
 					break;
+				case 'ub/styled-list-item':
+					$prefix = '#ub-styled-list-item-' . $attributes['blockID'];
+					$iconData = Ultimate_Blocks_IconSet::generate_fontawesome_icon( $attributes['selectedIcon'] );
+					if(!empty($iconData)){
+						$blockStylesheets .= $prefix . '::before{' . PHP_EOL .
+							'top: ' . ( $attributes['iconSize'] >= 5 ? 3 : ( $attributes['iconSize'] < 3 ? 2 : 0 ) ) . 'px !important;
+							height: ' . ( ( 4 + $attributes['iconSize'] ) / 10 ) . 'em !important;
+							width: ' . ( ( 4 + $attributes['iconSize'] ) / 10 ) . 'em !important;
+							background-image:url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ' . $iconData[0] . ' ' . $iconData[1]
+									. '"><path fill="%23' . substr( $attributes['iconColor'],
+									1 ) . '" d="' . $iconData[2] . '"></path></svg>\') !important;' . PHP_EOL .
+									'}';
+					}
+
+					break;
+
 				case 'ub/tabbed-content-block':
 					$prefix           = '#ub-tabbed-content-' . $attributes['blockID'];
 					$styles 		   = ub_get_spacing_styles($attributes);