aos addfilter

gistfile1.txt

import AOS from 'aos';
import 'aos/dist/aos.css';
const { addFilter } = wp.hooks;
const { Fragment } = wp.element;
const {
    registerBlockType,
    InspectorAdvancedControls,
    ToggleControl,
    SelectControl
  } = wp.blocks;
const aosoption = [
    { value: 'fade-zoom-in', label: __( 'fade zoom in' ) },
    { value: 'flip-left', label: __( 'flip left' ) },
    { value: 'fade-up', label: __( 'fade up' ) },
];
class App extends Component {
  constructor(props){
    super(props);
  }
  componentDidMount(){
    AOS.init({
      duration : 2000
    })
  }
   if ( props.isSelected ) {
                function toggleAos() {
          if ( applyAos ) {
            setAttributes( { applyAos: '' } );
          } else {
            setAttributes( { applyAos: 'animation' } );
          }
        }
            return (
                <Fragment>
                    <settings.edit {...props} data-aos={props.attributes.attrName} />
                    <ToggleControl
                        label={ __( 'Add AOS' ) }
                        checked={ !! props.attributes.applyAos }
                        onChange={ toggleAos }
                      />
                    <InspectorAdvancedControls>
                        <SelectControl
                            label={ __( 'Aos ATTRIBUTES' ) }
                            value={ props.attributes.attrName || '' }
                            onChange={ ( newattrNames ) => {
                                props.setAttributes( {
                                    attrName: newattrNames,
                                } );
                            } }
                            options={ aosoption }
                        />
                    </InspectorAdvancedControls>
                </Fragment>
            );
};
// Hook function to add a caption to the core code block
const addAosToCodeBlock = settings => {
  if ((!! props.attributes.applyAos) !== true) {
    return settings;
  }

  const newCodeBlockSettings = {
    ...settings,

    attributes: {
      ...settings.attributes,
      attrName: {
        type: 'string',
        
      },
      applyAos: {
          type: 'string',
          default: '',
        }
    },

    edit: App,

    save(props) {
      return (
        <settings.save {...props} data-aos={props.attributes.attrName} />
      );
    }
  };

  return newCodeBlockSettings;
};


addFilter(
  "blocks.registerBlockType",
  "myplugin/add-code-aos",
  addAosToCodeBlock
);