Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
aos addfilter
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
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.