Newsletter

Newsletter signup block and gutenberg block with support for multiple newsletter providers

link Extension name

t2/newsletter

link Block names

t2/newsletter-signup

link Block.json attributes

"attributes": {
		"listId": {
			"type": "string"
		},
		"buttonText": {
			"type": "string"
		},
		"successMessage": {
			"type": "string"
		},
		"showPhoneInput": {
			"type": "boolean",
			"default": false
		},
		"showNameInput": {
			"type": "boolean",
			"default": false
		},
		"showConsentInput": {
			"type": "boolean",
			"default": false
		},
		"emailInputLabel": {
			"type": "string",
			"default": "Your email address:"
		},
		"emailInputPlaceholder": {
			"type": "string",
			"default": "Your email address…"
		},
		"phoneInputLabel": {
			"type": "string",
			"default": "Your phone number:"
		},
		"phoneInputPlaceholder": {
			"type": "string",
			"default": "Your phone number…"
		},
		"firstNameInputLabel": {
			"type": "string",
			"default": "Your first name:"
		},
		"firstNameInputPlaceholder": {
			"type": "string",
			"default": "Your first name…"
		},
		"lastNameInputLabel": {
			"type": "string",
			"default": "Your last name:"
		},
		"lastNameInputPlaceholder": {
			"type": "string",
			"default": "Your last name…"
		},
		"consentInputLabel": {
			"type": "string",
			"default": "I accept the use of my personal information"
		}
	},
"supports": {
	"html": false,
	"align": ["wide"]
},

link Notes for use in projects

• The settings are placed under the WP settings page Newsletter and can be found under Settings > Newsletter.

link Example inject props for the block

This example shows how to inject custom settings to the block.
In that case we set required ancestor for the block.

/**
 * WordPress Dependencies
 */
const { addFilter } = wp.hooks;

/**
 * Set parent for core newsletter
 * @param {obj} settings 
 * @param {string} name 
 */
function addAttributes( settings, name ) {

	if ( name !== 't2/newsletter-signup' ) {
		return settings;
	}
	const newAttr = {
		ancestor: [ 'ia/t2-newsletter-wrap' ],
	}

	return { ...settings, ...newAttr };
}

addFilter(
	'blocks.registerBlockType',
	't2/newsletter',
	addAttributes
);

link Additional Settings for Custom Fields

You can add extra custom fields to this block in the editor using the <Slot> component. Here's an example:

import { addFilter } from '@wordpress/hooks';

addFilter(
	'T2.NewsletterSignup.Settings',
	'Theme.NewsletterSignup.Settings',
	() => {
		return ( { attributes, setAttributes } ) => {
			return (
				<>
					<Fill name="T2.NewsletterSignup.Settings">
						...Your custom settings...
					</Fill>
				</>
			);
		};
	}
);

Look for the <ExtraSettings /> component in the blocks' code.