add anchor option to accordion & toggle blocks (both wrapper and it…

…em blocks)
motopress · Feb 13, 2023 · aaeb87d · aaeb87d
1 parent dc36e13
commit aaeb87d
Show file tree

Hide file tree

Showing 14 changed files with 24 additions and 13 deletions.
diff --git a/src/blocks/accordion/accordion-item/edit.js b/src/blocks/accordion/accordion-item/edit.js
@@ -76,7 +76,7 @@ class AccordionItem extends Component {
 					...this.props,
 				} } key={ 'inspector' }/>
 				<div {...itemClass}>
-					<div className={`wp-block-getwid-accordion__header-wrapper`} key='header'>
+					<div className={`wp-block-getwid-accordion__header-wrapper`} key='header' id={this.props.attributes.anchor}>
 						<Tag className={`wp-block-getwid-accordion__header`}>
 							<a href="#">
 								<div className={`wp-block-getwid-accordion__edit-area`}>

diff --git a/src/blocks/accordion/accordion-item/index.js b/src/blocks/accordion/accordion-item/index.js
@@ -27,6 +27,7 @@ export default registerBlockType(
         category: 'getwid-blocks',
         parent: [ 'getwid/accordion' ],
         supports: {
+            anchor: true,
             multiple: true,
             reusable: false,
             html: false
@@ -50,4 +51,4 @@ export default registerBlockType(
             }} />
         )
     }
-);
+);
diff --git a/src/blocks/accordion/accordion-item/save.js b/src/blocks/accordion/accordion-item/save.js
@@ -18,15 +18,15 @@ class Save extends Component {
 
 	render() {
 		const {className, baseClass} = this.props;
-		const {outerParent, title} = this.props.attributes;
+		const {outerParent, title, anchor} = this.props.attributes;
 
 		const Tag = outerParent ? outerParent.attributes.headerTag : 'span';
 		const iconOpen = outerParent ? outerParent.attributes.iconOpen : 'fas fa-minus';
 		const iconClose = outerParent ? outerParent.attributes.iconClose : 'fas fa-plus';
 
 		return (
 			<Fragment>
-				<div className={`wp-block-getwid-accordion__header-wrapper`}>
+				<div className={`wp-block-getwid-accordion__header-wrapper`} id={anchor}>
 					{title && (
 						<Tag className={`wp-block-getwid-accordion__header`}>
 							<a href="#">
@@ -52,4 +52,4 @@ class Save extends Component {
 	}
 }
 
-export default Save;
+export default Save;
diff --git a/src/blocks/accordion/accordion/edit.js b/src/blocks/accordion/accordion/edit.js
@@ -129,6 +129,7 @@ class Accordion extends Component {
 						},
 						align ? `align${align}` : null
 					)}
+					id={this.props.attributes.anchor}
 					data-active-element={active != undefined ? active : '0'}
 				>
 					<Provider value={this}>

diff --git a/src/blocks/accordion/accordion/index.js b/src/blocks/accordion/accordion/index.js
@@ -37,6 +37,7 @@ export default registerBlockType(
         icon: <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><Path d="M0,0v6h24V0H0z M22,4H2V2h20V4z"/></g><g><Path d="M0,18v6h24v-6H0z M22,22H2v-2h20V22z"/></g><g><Path d="M0,8v8h24V8H0z M22,14H2v-4h20V14z"/></g></SVG>,
         category: 'getwid-blocks',
         supports: {
+			anchor: true,
 			align: [ 'wide', 'full' ],
 			inserter: !Getwid.disabled_blocks.includes(blockName)
 		},

diff --git a/src/blocks/accordion/accordion/save.js b/src/blocks/accordion/accordion/save.js
@@ -27,13 +27,15 @@ class Save extends Component {
 		} = this.props;
 
         const { className } = this.props;
+        const { anchor } = this.props.attributes;
 
         return (
 			<div className={classnames(className, {
 						'has-icon-left': iconPosition === 'left',
 					},
 					align ? `align${align}` : null
 				)}
+				id={anchor}
 				data-active-element={active != undefined ? active : 'none' }
 			>
                 <InnerBlocks.Content/>
@@ -42,4 +44,4 @@ class Save extends Component {
 	}
 }
 
-export default Save;
+export default Save;
diff --git a/src/blocks/toggle/toggle-item/attributes.js b/src/blocks/toggle/toggle-item/attributes.js
@@ -13,4 +13,4 @@ const attributes = {
 	},
 };
 
-export default attributes;
+export default attributes;
diff --git a/src/blocks/toggle/toggle-item/edit.js b/src/blocks/toggle/toggle-item/edit.js
@@ -74,7 +74,7 @@ class ToggleItem extends Component {
 				<Inspector { ...{
 					...this.props,
 				} } key={ 'inspector' }/>
-				<div {...itemClass}>
+				<div {...itemClass} id={this.props.attributes.anchor}>
 					<div className={`wp-block-getwid-toggle__header-wrapper`} key='header'>
 						<Tag className={`wp-block-getwid-toggle__header`}>
 							<a href="#">

diff --git a/src/blocks/toggle/toggle-item/index.js b/src/blocks/toggle/toggle-item/index.js
@@ -27,6 +27,7 @@ export default registerBlockType(
         category: 'getwid-blocks',
         parent: [ 'getwid/toggle' ],
         supports: {
+            anchor: true,
             multiple: true,
             reusable: false,
             html: false
@@ -57,4 +58,4 @@ export default registerBlockType(
             }} />
         )
     }
-);
+);
diff --git a/src/blocks/toggle/toggle-item/save.js b/src/blocks/toggle/toggle-item/save.js
@@ -18,7 +18,7 @@ class Save extends Component {
 
 	render() {
 		const {className, baseClass} = this.props;
-		const {outerParent, title, active} = this.props.attributes;
+		const {outerParent, title, active, anchor} = this.props.attributes;
 
 		const Tag = outerParent ? outerParent.attributes.headerTag : 'span';
 		const iconOpen = outerParent ? outerParent.attributes.iconOpen : 'fas fa-minus';
@@ -30,6 +30,7 @@ class Save extends Component {
 						'is-active': active,
 					},
 				)}
+				id={anchor}
 			>
 				<div
 					className={`wp-block-getwid-toggle__header-wrapper`}
@@ -62,4 +63,4 @@ class Save extends Component {
 	}
 }
 
-export default Save;
+export default Save;
diff --git a/src/blocks/toggle/toggle/attributes.js b/src/blocks/toggle/toggle/attributes.js
@@ -26,4 +26,4 @@ const attributes = {
 	},
 };
 
-export default attributes;
+export default attributes;
diff --git a/src/blocks/toggle/toggle/edit.js b/src/blocks/toggle/toggle/edit.js
@@ -123,6 +123,7 @@ class Toggle extends Component {
 					className={classnames(className, {
 						'has-icon-left': iconPosition === 'left'
 					})}
+					id={this.props.attributes.anchor}
 				>
 					<Provider value={this}>
 						<InnerBlocks

diff --git a/src/blocks/toggle/toggle/index.js b/src/blocks/toggle/toggle/index.js
@@ -39,6 +39,7 @@ export default registerBlockType(
         icon: <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><Path d="M0,0v6h24V0H0z M22,4H2V2h20V4z"/></g><g><Path d="M0,18v6h24v-6H0z M22,22H2v-2h20V22z"/></g><g><Path d="M0,8v8h24V8H0z M22,14H2v-4h20V14z"/></g></SVG>,
         category: 'getwid-blocks',
         supports: {
+			anchor: true,
 			align: [ 'wide', 'full' ],
 			inserter: !Getwid.disabled_blocks.includes(blockName)
         },

diff --git a/src/blocks/toggle/toggle/save.js b/src/blocks/toggle/toggle/save.js
@@ -25,16 +25,18 @@ class Save extends Component {
 		} = this.props;
 
         const { className } = this.props;
+        const { anchor } = this.props.attributes;
 
         return (
 			<div className={classnames(className, {
 					'has-icon-left': iconPosition === 'left',
 				})}
+				id={anchor}
 			>
                 <InnerBlocks.Content/>
             </div>
         );
 	}
 }
 
-export default Save;
+export default Save;
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,4 +13,4 @@ const attributes = { @@
     	},
     };
-    export default attributes;
+    export default attributes;