Register New Elements

1. 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.

1. Frontend Implementation (TypeScript/React)

   1. Register Element in Frontend

JavaScript

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);
    }
  }
});

ReactJS

JavaScript

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;

ReactJS