Fix deprecated

stellarwp · Dec 20, 2024 · ab1cf8a · ab1cf8a
1 parent 17ba375
commit ab1cf8a
Showing 1 changed file with 67 additions and 4 deletions.
diff --git a/src/blocks/accordion/pane/deprecated.js b/src/blocks/accordion/pane/deprecated.js
@@ -26,14 +26,23 @@ import { RichText, InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 export default [
 	{
 		attributes,
+		apiVersion: 3,
+		supports: {
+			inserter: false,
+			reusable: false,
+			html: false,
+			anchor: true,
+			lock: false,
+			kbMetadata: true,
+			kbContentLabel: 'title',
+		},
 		save: ({ attributes }) => {
 			const { id, uniqueID, title, icon, iconSide, hideLabel, titleTag, ariaLabel } = attributes;
 			const HtmlTagOut = !titleTag ? 'div' : titleTag;
 
 			const blockProps = useBlockProps.save({
 				className: `kt-accordion-pane kt-accordion-pane-${id} kt-pane${uniqueID}`,
 			});
-
 			return (
 				<div {...blockProps}>
 					<HtmlTagOut className={'kt-accordion-header-wrap'}>
@@ -70,12 +79,26 @@ export default [
 	},
 	{
 		attributes,
+		apiVersion: 2,
+		supports: {
+			inserter: false,
+			reusable: false,
+			html: false,
+			anchor: true,
+			lock: false,
+			kbMetadata: true,
+			kbContentLabel: 'title',
+		},
 		save: ({ attributes }) => {
 			const { id, uniqueID, title, icon, iconSide, hideLabel, titleTag, ariaLabel } = attributes;
 			const HtmlTagOut = !titleTag ? 'div' : titleTag;
 
+			const blockProps = useBlockProps.save({
+				className: `kt-accordion-pane kt-accordion-pane-${id} kt-pane${uniqueID}`,
+			});
+
 			return (
-				<div className={`kt-accordion-pane kt-accordion-pane-${id} kt-pane${uniqueID}`}>
+				<div {...blockProps}>
 					<HtmlTagOut className={'kt-accordion-header-wrap'}>
 						<button
 							className={`kt-blocks-accordion-header kt-acccordion-button-label-${
@@ -84,6 +107,45 @@ export default [
 							aria-label={ariaLabel ? ariaLabel : undefined}
 						>
 							<span className="kt-blocks-accordion-title-wrap">
+								{icon && 'left' === iconSide && (
+									<IconSpanTag extraClass={`kt-btn-side-${iconSide}`} name={icon} />
+								)}
+								<RichText.Content
+									className={'kt-blocks-accordion-title'}
+									tagName={'span'}
+									value={title}
+								/>
+								{icon && 'right' === iconSide && (
+									<IconSpanTag extraClass={`kt-btn-side-${iconSide}`} name={icon} />
+								)}
+							</span>
+							<span className="kt-blocks-accordion-icon-trigger"></span>
+						</button>
+					</HtmlTagOut>
+					<div className={'kt-accordion-panel'}>
+						<div className={'kt-accordion-panel-inner'}>
+							<InnerBlocks.Content />
+						</div>
+					</div>
+				</div>
+			);
+		},
+	},
+	{
+		attributes,
+		apiVersion: 2,
+		save: ({ attributes }) => {
+			const { id, uniqueID, title, icon, iconSide, hideLabel, titleTag } = attributes;
+			const HtmlTagOut = !titleTag ? 'div' : titleTag;
+			return (
+				<div className={`kt-accordion-pane kt-accordion-pane-${id} kt-pane${uniqueID}`}>
+					<HtmlTagOut className={'kt-accordion-header-wrap'}>
+						<button
+							className={`kt-blocks-accordion-header kt-acccordion-button-label-${
+								hideLabel ? 'hide' : 'show'
+							}`}
+						>
+							<div className="kt-blocks-accordion-title-wrap">
 								{icon && 'left' === iconSide && (
 									<IconRender
 										className={`kt-btn-svg-icon kt-btn-svg-icon-${icon} kt-btn-side-${iconSide}`}
@@ -101,8 +163,8 @@ export default [
 										name={icon}
 									/>
 								)}
-							</span>
-							<span className="kt-blocks-accordion-icon-trigger"></span>
+							</div>
+							<div className="kt-blocks-accordion-icon-trigger"></div>
 						</button>
 					</HtmlTagOut>
 					<div className={'kt-accordion-panel'}>
@@ -116,6 +178,7 @@ export default [
 	},
 	{
 		attributes,
+		apiVersion: 2,
 		save: ({ attributes }) => {
 			const { id, uniqueID, title, icon, iconSide, hideLabel, titleTag } = attributes;
 			const HtmlTagOut = !titleTag ? 'div' : titleTag;