Merge pull request #55 from matchboxdesigngroup/refactor/aos-feature

AOS Enhancement

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 (
         <>
           <BlockEdit {...props} />
           <InspectorControls>
-            <PanelBody title="Animation" initialOpen={true}>
+            <PanelBody title="Animation Settings" initialOpen={true}>
               <SelectControl
                 label="Select Animation"
-                value={props.attributes.animation}
+                value={attributes.animation}
                 options={[
                   { label: 'None', value: '' },
                   { label: 'Fade', value: 'fade' },
@@ -62,7 +90,33 @@ const withInspectorControls = createHigherOrderComponent((BlockEdit) => {
                   { 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 })}
+              />
+              <SelectControl
+                label="Easing"
+                value={attributes.aosEasing}
+                options={[
+                  { label: 'Ease', value: 'ease' },
+                  { label: 'Ease In', value: 'ease-in' },
+                  { label: 'Ease Out', value: 'ease-out' },
+                  { label: 'Ease In Out', value: 'ease-in-out' },
+                  { label: 'Linear', value: 'linear' },
+                ]}
+                onChange={(aosEasing) => setAttributes({ aosEasing })}
+              />
+              <RangeControl
+                label="Duration (ms)"
+                value={attributes.aosDuration}
+                onChange={(aosDuration) => setAttributes({ aosDuration })}
+                min={0}
+                max={5000}
+              />
+              <RangeControl
+                label="Delay (ms)"
+                value={attributes.aosDelay}
+                onChange={(aosDelay) => setAttributes({ aosDelay })}
+                min={0}
+                max={5000}
               />
             </PanelBody>
           </InspectorControls>
@@ -72,33 +126,33 @@ const withInspectorControls = createHigherOrderComponent((BlockEdit) => {
 
     return <BlockEdit {...props} />;
   };
-}, '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);

assets/scripts/front.js

@@ -31,7 +31,6 @@ document.addEventListener('DOMContentLoaded', function () {
   // Initialize AOS animation library
   AOS.init({
     duration: '700',
-    // mirror: true,
     once: true,
   });