From 2c1d78dfc2277d9ce6dca91c9e947d6f4800474c Mon Sep 17 00:00:00 2001 From: Steve Struemph Date: Wed, 11 Sep 2024 09:51:43 -0500 Subject: [PATCH 01/10] feat: add editor controls for additional animation settings --- .../block-extensions/aos-animation/index.js | 122 ++++++++++++++---- 1 file changed, 100 insertions(+), 22 deletions(-) diff --git a/assets/block-extensions/aos-animation/index.js b/assets/block-extensions/aos-animation/index.js index 129f62b..19e805e 100644 --- a/assets/block-extensions/aos-animation/index.js +++ b/assets/block-extensions/aos-animation/index.js @@ -1,7 +1,9 @@ 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'; +import { Fragment, useEffect } from '@wordpress/element'; +import { group as groupIcon } from '@wordpress/icons'; const allowedBlocks = ['core/group', 'core/column', 'core/cover']; @@ -14,6 +16,22 @@ const addAttributes = (settings) => { type: 'string', default: '', }, + aosDuration: { + type: 'number', + default: 1000, + }, + aosDelay: { + type: 'number', + default: 0, + }, + aosOnce: { + type: 'boolean', + default: false, + }, + aosEasing: { + type: 'string', + default: 'ease', + }, }; } @@ -24,14 +42,15 @@ const addAttributes = (settings) => { const withInspectorControls = createHigherOrderComponent((BlockEdit) => { return (props) => { if (allowedBlocks.includes(props.name)) { + const { attributes, setAttributes } = props; return ( <> - + { ]} onChange={(animation) => props.setAttributes({ animation })} /> + setAttributes({ aosEasing })} + /> + setAttributes({ aosDuration })} + min={0} + max={5000} + /> + setAttributes({ aosDelay })} + min={0} + max={5000} + /> + setAttributes({ aosOnce })} + /> @@ -75,30 +125,58 @@ const withInspectorControls = createHigherOrderComponent((BlockEdit) => { }, 'withInspectorControl'); // Add a filter to inject the 'data-aos' attribute during the save process +// const withListViewAnimationIndicator = createHigherOrderComponent((BlockListBlock) => { +// return (props) => { +// const { attributes, clientId } = props; +// const { animation } = attributes; + +// useEffect(() => { +// // Find the corresponding List View item using the clientId +// const listViewItem = document.querySelector(`.block-editor-list-view-leaf[data-block="${clientId}"]`); +// console.log(listViewItem); +// if (listViewItem) { + +// // If animation is applied, add a class to the List View item +// if (animation) { +// listViewItem.classList.add('has-animation'); +// } else { +// // Remove the class if no animation is set +// listViewItem.classList.remove('has-animation'); +// } +// } +// }, [clientId, animation]); + +// return ; +// }; +// }, 'withListViewAnimationIndicator'); + +// Add save data attribute const addSaveDataAttribute = (extraProps, blockType, attributes) => { - if (allowedBlocks.includes(blockType.name) && attributes.animation) { - extraProps['data-aos'] = attributes.animation; + if (allowedBlocks.includes(blockType.name)) { + if (attributes.animation) { + extraProps['data-aos'] = attributes.animation; + } + if (attributes.aosDuration) { + extraProps['data-aos-duration'] = attributes.aosDuration; + } + if (attributes.aosDelay) { + extraProps['data-aos-delay'] = attributes.aosDelay; + } + if (attributes.aosOnce) { + extraProps['data-aos-once'] = attributes.aosOnce ? 'true' : 'false'; + } + 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 -); +// Register filters +addFilter('blocks.registerBlockType', 'kindling/add-animation-attribute', addAttributes); +addFilter('editor.BlockEdit', 'kindling/with-inspector-control', withInspectorControls); +// addFilter('editor.BlockListBlock', 'kindling/with-list-view-animation-indicator', withListViewAnimationIndicator); +addFilter('blocks.getSaveContent.extraProps', 'kindling/add-save-data-attribute', addSaveDataAttribute); -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 -); From a0847f164b08ebf51046888aafce9cd4ba181bac Mon Sep 17 00:00:00 2001 From: Steve Struemph Date: Wed, 11 Sep 2024 10:37:32 -0500 Subject: [PATCH 02/10] cleanup(aos): Remove icons import --- assets/block-extensions/aos-animation/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/assets/block-extensions/aos-animation/index.js b/assets/block-extensions/aos-animation/index.js index 19e805e..8090e08 100644 --- a/assets/block-extensions/aos-animation/index.js +++ b/assets/block-extensions/aos-animation/index.js @@ -2,8 +2,6 @@ import { addFilter } from '@wordpress/hooks'; import { createHigherOrderComponent } from '@wordpress/compose'; import { PanelBody, SelectControl, RangeControl, ToggleControl } from '@wordpress/components'; import { InspectorControls } from '@wordpress/block-editor'; -import { Fragment, useEffect } from '@wordpress/element'; -import { group as groupIcon } from '@wordpress/icons'; const allowedBlocks = ['core/group', 'core/column', 'core/cover']; From d88baf2988c4fd8d09b70bec94c4edfb65df95aa Mon Sep 17 00:00:00 2001 From: Steve Struemph Date: Wed, 11 Sep 2024 10:38:34 -0500 Subject: [PATCH 03/10] feat(aos): Expand allowed blocks list --- assets/block-extensions/aos-animation/index.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/assets/block-extensions/aos-animation/index.js b/assets/block-extensions/aos-animation/index.js index 8090e08..7b0ed08 100644 --- a/assets/block-extensions/aos-animation/index.js +++ b/assets/block-extensions/aos-animation/index.js @@ -3,7 +3,22 @@ import { createHigherOrderComponent } from '@wordpress/compose'; 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 const addAttributes = (settings) => { From 2deb995ff40bf91f176e56951da5c5843b595e09 Mon Sep 17 00:00:00 2001 From: Steve Struemph Date: Wed, 11 Sep 2024 10:39:02 -0500 Subject: [PATCH 04/10] feat(aos): Update comments --- assets/block-extensions/aos-animation/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/block-extensions/aos-animation/index.js b/assets/block-extensions/aos-animation/index.js index 7b0ed08..fdfe159 100644 --- a/assets/block-extensions/aos-animation/index.js +++ b/assets/block-extensions/aos-animation/index.js @@ -20,7 +20,7 @@ const allowedBlocks = [ 'core/post-template' ]; -// Custom attribute you want to add +// Custom attributes to add to blocks const addAttributes = (settings) => { if (allowedBlocks.includes(settings.name)) { settings.attributes = { From 7396209122ca64ae7b947f9a6c7d89fa09f868a4 Mon Sep 17 00:00:00 2001 From: Steve Struemph Date: Wed, 11 Sep 2024 10:39:33 -0500 Subject: [PATCH 05/10] faet(aos): Add an additional check for settings --- assets/block-extensions/aos-animation/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/assets/block-extensions/aos-animation/index.js b/assets/block-extensions/aos-animation/index.js index fdfe159..a0a232e 100644 --- a/assets/block-extensions/aos-animation/index.js +++ b/assets/block-extensions/aos-animation/index.js @@ -22,7 +22,8 @@ const allowedBlocks = [ // 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: { From 1cb32a754dfcdccf0eede01c0d5ea1e14d4bcb97 Mon Sep 17 00:00:00 2001 From: Steve Struemph Date: Wed, 11 Sep 2024 10:41:01 -0500 Subject: [PATCH 06/10] feat(aos): Remove unused filter and clean up comments --- assets/block-extensions/aos-animation/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/assets/block-extensions/aos-animation/index.js b/assets/block-extensions/aos-animation/index.js index a0a232e..0d7ed5f 100644 --- a/assets/block-extensions/aos-animation/index.js +++ b/assets/block-extensions/aos-animation/index.js @@ -165,6 +165,7 @@ const withInspectorControls = createHigherOrderComponent((BlockEdit) => { // }, 'withListViewAnimationIndicator'); // Add save data attribute +// Add custom data attributes to the block's save element only when necessary const addSaveDataAttribute = (extraProps, blockType, attributes) => { if (allowedBlocks.includes(blockType.name)) { if (attributes.animation) { @@ -190,7 +191,4 @@ const addSaveDataAttribute = (extraProps, blockType, attributes) => { // Register filters addFilter('blocks.registerBlockType', 'kindling/add-animation-attribute', addAttributes); addFilter('editor.BlockEdit', 'kindling/with-inspector-control', withInspectorControls); -// addFilter('editor.BlockListBlock', 'kindling/with-list-view-animation-indicator', withListViewAnimationIndicator); addFilter('blocks.getSaveContent.extraProps', 'kindling/add-save-data-attribute', addSaveDataAttribute); - - From ecdd73664bc8bd221d1f1b16263c84e1b1e9c3a9 Mon Sep 17 00:00:00 2001 From: Steve Struemph Date: Wed, 11 Sep 2024 10:42:21 -0500 Subject: [PATCH 07/10] feat(aos): Remove unused filter and update comments --- .../block-extensions/aos-animation/index.js | 31 +------------------ 1 file changed, 1 insertion(+), 30 deletions(-) diff --git a/assets/block-extensions/aos-animation/index.js b/assets/block-extensions/aos-animation/index.js index 0d7ed5f..073bddf 100644 --- a/assets/block-extensions/aos-animation/index.js +++ b/assets/block-extensions/aos-animation/index.js @@ -48,11 +48,9 @@ const addAttributes = (settings) => { }, }; } - return settings; }; -// Extend the block edit component to include your custom settings const withInspectorControls = createHigherOrderComponent((BlockEdit) => { return (props) => { if (allowedBlocks.includes(props.name)) { @@ -61,7 +59,7 @@ const withInspectorControls = createHigherOrderComponent((BlockEdit) => { <> - + { }; }, 'withInspectorControl'); -// Add a filter to inject the 'data-aos' attribute during the save process -// const withListViewAnimationIndicator = createHigherOrderComponent((BlockListBlock) => { -// return (props) => { -// const { attributes, clientId } = props; -// const { animation } = attributes; - -// useEffect(() => { -// // Find the corresponding List View item using the clientId -// const listViewItem = document.querySelector(`.block-editor-list-view-leaf[data-block="${clientId}"]`); -// console.log(listViewItem); -// if (listViewItem) { - -// // If animation is applied, add a class to the List View item -// if (animation) { -// listViewItem.classList.add('has-animation'); -// } else { -// // Remove the class if no animation is set -// listViewItem.classList.remove('has-animation'); -// } -// } -// }, [clientId, animation]); - -// return ; -// }; -// }, 'withListViewAnimationIndicator'); - -// Add save data attribute // Add custom data attributes to the block's save element only when necessary const addSaveDataAttribute = (extraProps, blockType, attributes) => { if (allowedBlocks.includes(blockType.name)) { From 44a2f96dc896874b7a145eadf70d77ad42cdf5bb Mon Sep 17 00:00:00 2001 From: Steve Struemph Date: Wed, 11 Sep 2024 10:43:41 -0500 Subject: [PATCH 08/10] feat: Add check for attributes before saving --- .../block-extensions/aos-animation/index.js | 35 +++++++++++-------- 1 file changed, 20 insertions(+), 15 deletions(-) diff --git a/assets/block-extensions/aos-animation/index.js b/assets/block-extensions/aos-animation/index.js index 073bddf..5ee2475 100644 --- a/assets/block-extensions/aos-animation/index.js +++ b/assets/block-extensions/aos-animation/index.js @@ -51,6 +51,7 @@ const addAttributes = (settings) => { return settings; }; +// Extend the block edit component to include custom settings const withInspectorControls = createHigherOrderComponent((BlockEdit) => { return (props) => { if (allowedBlocks.includes(props.name)) { @@ -93,7 +94,7 @@ 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 })} /> { return ; }; -}, 'withInspectorControl'); +}, 'withInspectorControls'); // Add custom data attributes to the block's save element only when necessary const addSaveDataAttribute = (extraProps, blockType, attributes) => { - if (allowedBlocks.includes(blockType.name)) { + // 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; - } - if (attributes.aosDuration) { - extraProps['data-aos-duration'] = attributes.aosDuration; - } - if (attributes.aosDelay) { - extraProps['data-aos-delay'] = attributes.aosDelay; - } - if (attributes.aosOnce) { - extraProps['data-aos-once'] = attributes.aosOnce ? 'true' : 'false'; - } - if (attributes.aosEasing) { - extraProps['data-aos-easing'] = attributes.aosEasing; + + // 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.aosOnce) { + extraProps['data-aos-once'] = attributes.aosOnce ? 'true' : 'false'; + } + if (attributes.aosEasing) { + extraProps['data-aos-easing'] = attributes.aosEasing; + } } } From 009c8b427ac32a1df983ca85a891d59fa148855f Mon Sep 17 00:00:00 2001 From: Steve Struemph Date: Wed, 11 Sep 2024 10:59:03 -0500 Subject: [PATCH 09/10] feat(aos): Remove comment --- assets/scripts/front.js | 1 - 1 file changed, 1 deletion(-) 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, }); From 8c6e96a24bb104e460b1e9b2804c6b3df02a002a Mon Sep 17 00:00:00 2001 From: Steve Struemph Date: Wed, 11 Sep 2024 10:59:41 -0500 Subject: [PATCH 10/10] =?UTF-8?q?feat(aos):=20Remove=20=E2=80=98once?= =?UTF-8?q?=E2=80=99=20option=20since=20we=20want=20the=20default=20to=20b?= =?UTF-8?q?e=20true?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/block-extensions/aos-animation/index.js | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/assets/block-extensions/aos-animation/index.js b/assets/block-extensions/aos-animation/index.js index 5ee2475..fd1286a 100644 --- a/assets/block-extensions/aos-animation/index.js +++ b/assets/block-extensions/aos-animation/index.js @@ -38,10 +38,6 @@ const addAttributes = (settings) => { type: 'number', default: 0, }, - aosOnce: { - type: 'boolean', - default: false, - }, aosEasing: { type: 'string', default: 'ease', @@ -122,11 +118,6 @@ const withInspectorControls = createHigherOrderComponent((BlockEdit) => { min={0} max={5000} /> - setAttributes({ aosOnce })} - /> @@ -152,9 +143,6 @@ const addSaveDataAttribute = (extraProps, blockType, attributes) => { if (attributes.aosDelay) { extraProps['data-aos-delay'] = attributes.aosDelay; } - if (attributes.aosOnce) { - extraProps['data-aos-once'] = attributes.aosOnce ? 'true' : 'false'; - } if (attributes.aosEasing) { extraProps['data-aos-easing'] = attributes.aosEasing; }