const utilityFunction = () => ({
col_class: 'col col-lg-4 col-md-6 col-12 bg-black text-white',
col_style: 'padding:0px;',
col_id: '',
col_inner_class: 'col-inner d-flex align-items-center justify-content-md-center',
col_inner_style: 'padding-top:15px;',
data_aos: 'fade-up',
data_aos_delay: '',
title: '',
title_class: 'bold',
title_style: '',
content: '',
code_block: '',
col_img_class: 'position-relative',
col_img_style: 'border-top:4px solid white;border-right:2px solid white;',
img: '',
img_class: 'w-100',
img_style: 'height:200px;object-fit:cover;margin-bottom:-5px;',
});
Here’s how to use in the how to addFeature or addColumn
const addFeature = () => {
setAttributes( {
features: [
...features,
createNewColumn(),
],
} );
};
Here’s how to use in the mapped buttons:
<Button
style={{
border:'1px solid',
background:'white'
}}
className={`button-hero`}
onClick={() => {
const newFeatures = [...features]; // Create a copy of the features array
const newColumn = createNewColumn();
newFeatures.splice(index, 0, newColumn); // Insert the new column at the current index
setAttributes({ features: newFeatures }); // Update the features attribute with the new array
}}
>
{__('Add Column Above')}
</Button>
Have any questions or comments? Write them below!