const {__, setLocaleData} = wp.i18n;
const {
registerBlockType,
} = wp.blocks;
const {
Fragment,
} = wp.element;
const {
BlockControls,
InspectorControls,
RichText,
InnerBlocks,
} = wp.editor;
const {
PanelBody,
Toolbar,
ToggleControl,
RangeControl,
SVG,
Path,
} = wp.components;
registerBlockType('pb/accordion-item', {
title: __('Accordion Item'),
icon: ,
category: 'formatting',
supports: {
anchor: true,
},
attributes: {
title: {
type: 'array',
source: 'children',
selector: '.c-accordion__title',
},
content: {
type: 'array',
source: 'children',
selector: '.c-accordion__content',
},
initiallyOpen: {
type: 'boolean',
default: false
},
clickToClose: {
type: 'boolean',
default: true
},
autoClose: {
type: 'boolean',
default: true
},
titleTag: {
type: 'string',
default: 'h2',
},
scroll: {
type: 'boolean',
default: false
},
scrollOffset: {
type: 'number',
default: 0
},
uuid: {
type: 'number'
}
},
edit: (props) => {
const {
className,
attributes: {
title,
content,
initiallyOpen,
clickToClose,
autoClose,
titleTag,
scroll,
scrollOffset,
uuid,
},
setAttributes,
} = props;
function getIcon(tag) {
var icon;
switch (tag) {
case 'h1':
icon = ;
break;
case 'h2':
icon = ;
break;
case 'h3':
icon = ;
break;
case 'h4':
icon = ;
break;
case 'h5':
icon = ;
break;
case 'h6':
icon = ;
break;
case 'p':
icon = ;
break;
case 'div':
icon = ;
break;
case 'button':
icon = ;
break;
}
return icon;
}
function createTagControl(tag) {
return {
icon: getIcon(tag),
title: tag.toUpperCase(),
isActive: titleTag === tag,
onClick: () => setAttributes({
'titleTag': tag,
}),
};
}
var titleClasses = [
'c-accordion__title',
];
if (titleTag === 'button') {
titleClasses.push('c-accordion__title--button');
}
return (
setAttributes({
initiallyOpen: value
})
}
/>
setAttributes({
clickToClose: value
})
}
/>
setAttributes({
autoClose: value
})
}
/>
setAttributes({
scroll: value
})
}
/>
{
props.setAttributes({
scrollOffset: value ? value : 0,
});
}
}
min={ 0 }
max={ 1000 }
help={ __('A pixel offset for the final scroll position.') }
/>
{
setAttributes({
title: value,
uuid: uuid ? uuid : Math.floor(Math.random() * 100000) + 1,
});
}
}
/>
);
},
save: (props) => {
const {
className,
attributes: {
title,
content,
initiallyOpen,
clickToClose,
autoClose,
titleTag,
scroll,
scrollOffset,
uuid,
},
} = props;
var itemClasses = [
'c-accordion__item',
'js-accordion-item',
'no-js',
];
var titleClasses = [
'c-accordion__title',
'js-accordion-controller',
];
var contentStyles = {};
if (titleTag === 'button') {
titleClasses.push('c-accordion__title--button');
}
if (initiallyOpen) {
itemClasses.push('is-open');
}
else {
contentStyles.display = 'none';
}
return (
);
},
});