potential fix for icon list validation when there's an embedded link …

src/blocks/listitem/block.json

@@ -51,6 +51,11 @@
 			"selector": ".kt-svg-icon-list-text",
 			"__experimentalRole": "content"
 		},
+		"fullContent": {
+			"type": "string",
+			"source": "raw",
+			"__experimentalRole": "content"
+		},
 		"color": {
 			"type": "string",
 			"default": ""

src/blocks/listitem/deprecated.js

@@ -375,4 +375,280 @@ export default [
 			);
 		},
 	},
+	{
+		attributes: {
+			uniqueID: {
+				type: 'string',
+				default: '',
+			},
+			icon: {
+				type: 'string',
+				default: '',
+			},
+			showIcon: {
+				type: 'boolean',
+				default: true,
+			},
+			link: {
+				type: 'string',
+				default: '',
+				__experimentalRole: 'content',
+			},
+			linkNoFollow: {
+				type: 'boolean',
+				default: false,
+			},
+			linkSponsored: {
+				type: 'boolean',
+				default: false,
+			},
+			target: {
+				type: 'string',
+				default: '_self',
+				__experimentalRole: 'content',
+			},
+			size: {
+				type: 'number',
+				default: '',
+			},
+			width: {
+				type: 'number',
+				default: '',
+			},
+			text: {
+				type: 'string',
+				source: 'html',
+				selector: '.kt-svg-icon-list-text',
+				__experimentalRole: 'content',
+			},
+			color: {
+				type: 'string',
+				default: '',
+			},
+			background: {
+				type: 'string',
+				default: '',
+			},
+			border: {
+				type: 'string',
+				default: '',
+			},
+			borderRadius: {
+				type: 'number',
+				default: '',
+			},
+			padding: {
+				type: 'number',
+				default: '',
+			},
+			borderWidth: {
+				type: 'number',
+				default: '',
+			},
+			style: {
+				type: 'string',
+				default: '',
+			},
+			level: {
+				type: 'number',
+				default: 0,
+			},
+			iconTitle: {
+				type: 'string',
+				default: '',
+			},
+			tooltip: {
+				type: 'string',
+				source: 'html',
+				selector: '.kb-tooltip-hidden-content',
+				__experimentalRole: 'content',
+			},
+			tooltipPlacement: {
+				type: 'string',
+				default: '',
+			},
+			tooltipSelection: {
+				type: 'string',
+				default: 'both',
+			},
+			tooltipDash: {
+				type: 'boolean',
+				default: true,
+			},
+		},
+		save: ({ attributes }) => {
+			const {
+				uniqueID,
+				icon,
+				link,
+				linkSponsored,
+				linkNoFollow,
+				target,
+				width,
+				text,
+				style,
+				level,
+				showIcon,
+				size,
+				iconTitle,
+				tooltip,
+				tooltipSelection,
+				tooltipPlacement,
+				tooltipDash,
+			} = attributes;
+
+			const tooltipID = tooltip && uniqueID ? `kt-svg-tooltip-${uniqueID}` : undefined;
+			const iconOnlyTooltip = 'icon' === tooltipSelection ? true : false;
+			const textOnlyTooltip = 'text' === tooltipSelection ? true : false;
+			const classes = classnames({
+				'kt-svg-icon-list-item-wrap': true,
+				[`kt-svg-icon-list-item-${uniqueID}`]: uniqueID,
+				[`kt-svg-icon-list-style-${style}`]: style,
+				[`kt-svg-icon-list-level-${level}`]: level,
+			});
+
+			const blockProps = useBlockProps.save({
+				className: classes,
+			});
+
+			const iconName = icon ? icon : 'USE_PARENT_DEFAULT_ICON';
+
+			const iconWidth = icon && width ? width : 'USE_PARENT_DEFAULT_WIDTH';
+
+			const iconTitleOutput = iconTitle ? iconTitle : '';
+			const iconHidden = icon && iconTitle ? 'false' : 'true';
+
+			const iconSpan = (
+				<IconSpanTag
+					extraClass={`kt-svg-icon-list-single${iconOnlyTooltip && tooltipID ? ' kb-icon-list-tooltip' : ''}${
+						!tooltipDash && iconOnlyTooltip && tooltipID ? ' kb-list-tooltip-no-border' : ''
+					}`}
+					name={iconName}
+					strokeWidth={iconWidth}
+					title={iconTitleOutput}
+					ariaHidden={iconHidden}
+					tooltipID={iconOnlyTooltip && tooltipID ? tooltipID : undefined}
+					tooltipPlacement={iconOnlyTooltip && tooltipPlacement ? tooltipPlacement : undefined}
+				/>
+			);
+
+			const emptyIcon =
+				size === 0 ? (
+					<></>
+				) : (
+					<div
+						className="kt-svg-icon-list-single"
+						style="display: inline-flex; justify-content: center; align-items: center;"
+					>
+						<svg
+							viewBox="0 0 24 24"
+							height="1em"
+							width="1em"
+							fill="none"
+							stroke="currentColor"
+							xmlns="http://www.w3.org/2000/svg"
+							style="display: inline-block; vertical-align: middle;"
+						></svg>
+					</div>
+				);
+
+			let rel = '';
+			if (target === '_blank') {
+				rel = 'noopener noreferrer';
+			}
+
+			if (linkNoFollow) {
+				if (rel !== '') {
+					rel = rel + ' nofollow';
+				} else {
+					rel = 'nofollow';
+				}
+			}
+
+			if (linkSponsored) {
+				if (rel !== '') {
+					rel = rel + ' sponsored';
+				} else {
+					rel = 'sponsored';
+				}
+			}
+			return (
+				<li {...blockProps}>
+					{link && (
+						<a
+							href={link}
+							className={'kt-svg-icon-link'}
+							target={'_blank' === target ? target : undefined}
+							data-tooltip-id={!iconOnlyTooltip && !textOnlyTooltip && tooltipID ? tooltipID : undefined}
+							data-tooltip-placement={
+								!iconOnlyTooltip && !textOnlyTooltip && tooltipID && tooltipPlacement
+									? tooltipPlacement
+									: undefined
+							}
+							rel={'' !== rel ? rel : undefined}
+						>
+							{showIcon ? iconSpan : emptyIcon}
+							<RichText.Content
+								tagName="span"
+								value={text}
+								className={`kt-svg-icon-list-text${
+									tooltipID && textOnlyTooltip ? ' kb-icon-list-tooltip' : ''
+								}${tooltipID && textOnlyTooltip && !tooltipDash ? ' kb-list-tooltip-no-border' : ''}`}
+								data-tooltip-id={tooltipID && textOnlyTooltip ? tooltipID : undefined}
+								data-tooltip-placement={
+									tooltipID && textOnlyTooltip && tooltipPlacement ? tooltipPlacement : undefined
+								}
+							/>
+						</a>
+					)}
+					{!link && (
+						<>
+							{!iconOnlyTooltip && !textOnlyTooltip && tooltipID && (
+								<span
+									className={`kb-icon-list-tooltip-wrap kb-icon-list-tooltip${
+										!tooltipDash ? ' kb-list-tooltip-no-border' : ''
+									}`}
+									data-tooltip-id={tooltipID}
+									data-tooltip-placement={tooltipPlacement}
+								>
+									{showIcon ? iconSpan : emptyIcon}
+									<RichText.Content tagName="span" value={text} className={'kt-svg-icon-list-text'} />
+								</span>
+							)}
+							{(!tooltipID || iconOnlyTooltip || textOnlyTooltip) && (
+								<>
+									{showIcon ? iconSpan : emptyIcon}
+									<RichText.Content
+										tagName="span"
+										value={text}
+										className={`kt-svg-icon-list-text${
+											tooltipID && textOnlyTooltip ? ' kb-icon-list-tooltip' : ''
+										}${
+											tooltipID && textOnlyTooltip && !tooltipDash
+												? ' kb-list-tooltip-no-border'
+												: ''
+										}`}
+										data-tooltip-id={tooltipID && textOnlyTooltip ? tooltipID : undefined}
+										data-tooltip-placement={
+											tooltipID && textOnlyTooltip && tooltipPlacement
+												? tooltipPlacement
+												: undefined
+										}
+									/>
+								</>
+							)}
+						</>
+					)}
+					{tooltipID && (
+						<span
+							className={'kb-tooltip-hidden-content'}
+							style={{ display: 'none' }}
+							id={tooltipID}
+							dangerouslySetInnerHTML={{ __html: tooltip }} // Because this is saved into the post as html WordPress core will sanitize it if the user does not have the unfiltered_html capability.
+						/>
+					)}
+				</li>
+			);
+		},
+	},
 ];

src/blocks/listitem/edit.js

@@ -17,6 +17,7 @@ import {
 	SelectParentBlock,
 	Tooltip,
 } from '@kadence/components';
+import { applyFilters } from '@wordpress/hooks';
 
 import metadata from './block.json';
 
@@ -83,12 +84,38 @@ function KadenceListItem(props) {
 		tooltip,
 		tooltipPlacement,
 		tooltipDash,
+		fullContent,
 	} = attributes;
+
+	//'rawText' is meant to find the same content that 'text' does. Only via xml parsing instead of html parsing
+	//it can find content in the block that's invalid to an html parser
+	const parser = new DOMParser();
+	const doc = parser.parseFromString(fullContent, 'text/xml');
+	const rawTexts = doc.getElementsByClassName('kt-svg-icon-list-text');
+	const rawText = rawTexts?.[0]?.innerHTML ? rawTexts[0].innerHTML : text;
+
 	const displayIcon = icon ? icon : context['kadence/listIcon'];
 	const displayWidth = width ? width : context['kadence/listIconWidth'];
 	const [activeTab, setActiveTab] = useState('general');
 	const { addUniqueID } = useDispatch('kadenceblocks/data');
 
+	let richTextFormats = applyFilters(
+		'kadence.whitelist_richtext_formats',
+		[
+			'core/bold',
+			'core/italic',
+			'kadence/mark',
+			'kadence/typed',
+			'core/strikethrough',
+			'core/superscript',
+			'core/superscript',
+			'toolset/inline-field',
+		],
+		'kadence/listitem'
+	);
+
+	richTextFormats = link ? richTextFormats : undefined;
+
 	const textRef = useRef(clientId);
 	const { isUniqueID, isUniqueBlock, parentData } = useSelect(
 		(select) => {
@@ -191,8 +218,9 @@ function KadenceListItem(props) {
 				<RichText
 					tagName="div"
 					ref={textRef}
+					allowedFormats={richTextFormats ? richTextFormats : undefined}
 					identifier="text"
-					value={text}
+					value={rawText}
 					onChange={(value) => {
 						setAttributes({ text: value });
 					}}
@@ -218,7 +246,7 @@ function KadenceListItem(props) {
 					className={`kt-svg-icon-list-text${textOnlyTooltip && tooltip ? ' kb-icon-list-tooltip' : ''}${
 						!tooltipDash && textOnlyTooltip && tooltip ? ' kb-list-tooltip-no-border' : ''
 					}`}
-					data-empty={!text}
+					data-empty={!rawText}
 				/>
 			</Tooltip>
 		</>