Register New Elements
Backend Implementation (PHP) To register new emails, developers should use the following code:
/** * Register new Elements. * * @param object $element_service The service responsible for registering elements * @return void */ function register_new_element( $element_service ) { $element_service->register_element( new \YourNewElement() ); } add_action( 'yaymail_register_elements', 'register_new_element' ); // Enqueue WordPress React scripts function enqueue_wp_react_scripts() { wp_enqueue_script( 'wp-react' ); } add_action( 'wp_enqueue_scripts', 'enqueue_wp_react_scripts' );
This code attaches to the
yaymail_register_elements
action hook. It is used to register new email templates by passing the email instance.
Frontend Implementation (TypeScript/React)
Register Element in Frontend
import NewElement from './elements/NewElement';
document.addEventListener('yaymail-loaded', function(event) {
if (window.yaymailData && window.yaymailData.shared && window.yaymailData.shared.stores && window.yaymailData.shared.stores.useAddonStore) {
var storeState = window.yaymailData.shared.stores.useAddonStore.getState();
if (storeState && typeof storeState.registerElement === 'function') {
storeState.registerElement('new_element', NewElement);
}
}
});
function NewElement( props ) {
try {
const { createElement } = wp.react;
const { element } = props;
const data = element.data;
const { ElementWrapper } = window.yaymailData.shared.core_components;
const { useShortcode } = window.yaymailData.shared.hooks;
const { doShortcode } = useShortcode();
const title = doShortcode(data.title || '');
const content = doShortcode(data.content || '');
const titleColor = data.title_color?.default_value || '#000000';
const titleFontSize = data.title_font_size?.default_value || '16px';
const wrapperStyles = {
'background-color': data.background_color ?? 'transparent',
'padding-top': data.padding?.top + 'px' ?? 0,
'padding-right': data.padding?.right + 'px' ?? 0,
'padding-bottom': data.padding?.bottom + 'px' ?? 0,
'padding-left': data.padding?.left + 'px' ?? 0,
'font-family': data.font_family ?? 'initial',
};
return createElement(
ElementWrapper,
{
element,
className: 'new_element-wrapper',
style: wrapperStyles,
},
createElement(
'div',
{ className: 'new_element-container' },
createElement(
'h2',
{
style: {
color: titleColor,
fontSize: titleFontSize,
},
},
title,
),
createElement('div', { className: 'new_element-content' }, content),
),
);
} catch (error) {
return createElement('div', { className: 'error' }, 'Error loading element');
}
}
export default NewElement;
Last updated
Was this helpful?