diff --git a/assets/block-extensions/aos-animation/index.js b/assets/block-extensions/aos-animation/index.js
index 129f62b..fd1286a 100644
--- a/assets/block-extensions/aos-animation/index.js
+++ b/assets/block-extensions/aos-animation/index.js
@@ -1,37 +1,65 @@
import { addFilter } from '@wordpress/hooks';
import { createHigherOrderComponent } from '@wordpress/compose';
-import { PanelBody, SelectControl } from '@wordpress/components';
+import { PanelBody, SelectControl, RangeControl, ToggleControl } from '@wordpress/components';
import { InspectorControls } from '@wordpress/block-editor';
-const allowedBlocks = ['core/group', 'core/column', 'core/cover'];
+// Specify allowed blocks to which the attributes should be added
+const allowedBlocks = [
+ 'core/group',
+ 'core/column',
+ 'core/cover',
+ 'core/paragraph',
+ 'core/heading',
+ 'core/buttons',
+ 'core/image',
+ 'core/post-date',
+ 'core/post-excerpt',
+ 'core/post-title',
+ 'core/post-featured-image',
+ 'core/post-content',
+ 'core/post-template'
+];
-// Custom attribute you want to add
+// Custom attributes to add to blocks
const addAttributes = (settings) => {
- if (allowedBlocks.includes(settings.name)) {
+ // Ensure the settings are valid and match allowed blocks
+ if (settings && allowedBlocks.includes(settings.name)) {
settings.attributes = {
...settings.attributes,
animation: {
type: 'string',
default: '',
},
+ aosDuration: {
+ type: 'number',
+ default: 1000,
+ },
+ aosDelay: {
+ type: 'number',
+ default: 0,
+ },
+ aosEasing: {
+ type: 'string',
+ default: 'ease',
+ },
};
}
-
return settings;
};
-// Extend the block edit component to include your custom settings
+// Extend the block edit component to include custom settings
const withInspectorControls = createHigherOrderComponent((BlockEdit) => {
return (props) => {
if (allowedBlocks.includes(props.name)) {
+ const { attributes, setAttributes } = props;
return (
<>
-
+
{
{ label: 'Zoom Out Left', value: 'zoom-out-left' },
{ label: 'Zoom Out Right', value: 'zoom-out-right' }
]}
- onChange={(animation) => props.setAttributes({ animation })}
+ onChange={(animation) => setAttributes({ animation })}
+ />
+ setAttributes({ aosEasing })}
+ />
+ setAttributes({ aosDuration })}
+ min={0}
+ max={5000}
+ />
+ setAttributes({ aosDelay })}
+ min={0}
+ max={5000}
/>
@@ -72,33 +126,33 @@ const withInspectorControls = createHigherOrderComponent((BlockEdit) => {
return ;
};
-}, 'withInspectorControl');
+}, 'withInspectorControls');
-// Add a filter to inject the 'data-aos' attribute during the save process
+// Add custom data attributes to the block's save element only when necessary
const addSaveDataAttribute = (extraProps, blockType, attributes) => {
- if (allowedBlocks.includes(blockType.name) && attributes.animation) {
- extraProps['data-aos'] = attributes.animation;
+ // Check if the block type is allowed and attributes exist
+ if (allowedBlocks.includes(blockType.name) && attributes) {
+ // Add animation attributes only if 'animation' is set (not empty)
+ if (attributes.animation) {
+ extraProps['data-aos'] = attributes.animation;
+
+ // Only add other AOS attributes if 'animation' is not empty
+ if (attributes.aosDuration) {
+ extraProps['data-aos-duration'] = attributes.aosDuration;
+ }
+ if (attributes.aosDelay) {
+ extraProps['data-aos-delay'] = attributes.aosDelay;
+ }
+ if (attributes.aosEasing) {
+ extraProps['data-aos-easing'] = attributes.aosEasing;
+ }
+ }
}
return extraProps;
};
-// Hook into the block register to add your attributes and extend the edit component
-addFilter(
- 'blocks.registerBlockType',
- 'kindling/add-animation-attribute',
- addAttributes
-);
-
-addFilter(
- 'editor.BlockEdit',
- 'kindling/with-inspector-control',
- withInspectorControls
-);
-
-// Hook into the 'getSaveContent.extraProps' filter to add the 'data-aos' attribute to the save output
-addFilter(
- 'blocks.getSaveContent.extraProps',
- 'kindling/add-save-data-attribute',
- addSaveDataAttribute
-);
+// Register filters
+addFilter('blocks.registerBlockType', 'kindling/add-animation-attribute', addAttributes);
+addFilter('editor.BlockEdit', 'kindling/with-inspector-control', withInspectorControls);
+addFilter('blocks.getSaveContent.extraProps', 'kindling/add-save-data-attribute', addSaveDataAttribute);
diff --git a/assets/scripts/front.js b/assets/scripts/front.js
index 03c83d7..8b2808f 100644
--- a/assets/scripts/front.js
+++ b/assets/scripts/front.js
@@ -31,7 +31,6 @@ document.addEventListener('DOMContentLoaded', function () {
// Initialize AOS animation library
AOS.init({
duration: '700',
- // mirror: true,
once: true,
});