133 lines
4.8 KiB
JavaScript
133 lines
4.8 KiB
JavaScript
/**
|
|
* Tracking Block for Gutenberg with Popup Editor
|
|
*/
|
|
(function(blocks, element, blockEditor) {
|
|
var el = element.createElement;
|
|
var InnerBlocks = blockEditor.InnerBlocks;
|
|
var useBlockProps = blockEditor.useBlockProps;
|
|
var __ = wp.i18n.__;
|
|
var Button = wp.components.Button;
|
|
var Popover = wp.components.Popover;
|
|
var TextControl = wp.components.TextControl;
|
|
var useState = wp.element.useState;
|
|
|
|
blocks.registerBlockType('simplified-tracking/track-element', {
|
|
title: 'Tracking Wrapper',
|
|
icon: 'chart-bar',
|
|
category: 'design',
|
|
attributes: {
|
|
eventName: {
|
|
type: 'string',
|
|
default: 'tracked_element'
|
|
}
|
|
},
|
|
|
|
edit: function(props) {
|
|
var blockProps = useBlockProps();
|
|
var eventName = props.attributes.eventName;
|
|
var [isPopoverVisible, setPopoverVisible] = useState(false);
|
|
|
|
function onChangeEventName(newEventName) {
|
|
props.setAttributes({ eventName: newEventName });
|
|
}
|
|
|
|
return el(
|
|
'div',
|
|
blockProps,
|
|
el(
|
|
'div',
|
|
{ className: 'tracking-block-wrapper' },
|
|
el(
|
|
'div',
|
|
{ className: 'tracking-block-notice' },
|
|
'Event: ' + eventName,
|
|
el(
|
|
Button,
|
|
{
|
|
isSmall: true,
|
|
onClick: function() {
|
|
setPopoverVisible(!isPopoverVisible);
|
|
},
|
|
style: {
|
|
marginLeft: '8px',
|
|
background: 'white',
|
|
color: '#007cba'
|
|
}
|
|
},
|
|
'Edit'
|
|
),
|
|
isPopoverVisible && el(
|
|
Popover,
|
|
{
|
|
onClose: function() {
|
|
setPopoverVisible(false);
|
|
},
|
|
position: 'bottom',
|
|
focusOnMount: 'firstElement'
|
|
},
|
|
el(
|
|
'div',
|
|
{
|
|
style: {
|
|
padding: '16px',
|
|
width: '300px'
|
|
}
|
|
},
|
|
el(
|
|
'h3',
|
|
{
|
|
style: {
|
|
margin: '0 0 8px 0'
|
|
}
|
|
},
|
|
'Tracking Event Settings'
|
|
),
|
|
el(
|
|
TextControl,
|
|
{
|
|
label: 'Event Name',
|
|
value: eventName,
|
|
onChange: onChangeEventName,
|
|
help: 'Enter the event name to track when this element is clicked'
|
|
}
|
|
),
|
|
el(
|
|
Button,
|
|
{
|
|
isPrimary: true,
|
|
onClick: function() {
|
|
setPopoverVisible(false);
|
|
}
|
|
},
|
|
'Done'
|
|
)
|
|
)
|
|
)
|
|
),
|
|
el(
|
|
'div',
|
|
{ style: { marginTop: '5px' } },
|
|
el(InnerBlocks)
|
|
)
|
|
)
|
|
);
|
|
},
|
|
|
|
save: function(props) {
|
|
var blockProps = useBlockProps.save({
|
|
className: 'tracking-block-wrapper',
|
|
onClick: "tE('" + props.attributes.eventName + "')"
|
|
});
|
|
|
|
return el(
|
|
'div',
|
|
blockProps,
|
|
el(InnerBlocks.Content)
|
|
);
|
|
}
|
|
});
|
|
}(
|
|
window.wp.blocks,
|
|
window.wp.element,
|
|
window.wp.blockEditor
|
|
)); |