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, });