Newspack Newsletters let you create email newsletters with the Gutenberg editor, and send them to your Mailchimp, Constant Contact, or Campaign Monitor mail lists, all without leaving your website.

Installing the plugin

Before using Newspack Newsletters, you will need to install and activate the plugin.

If you’re using Newspack, you will need to:

  1. Navigate to Plugins.
  2. Find Newspack Newletters listed in the plugins to install under Newspack.
  1. Select Install, then Activate.

If you are not using Newspack, you will need to download the Newspack Newsletters plugin, upload it to your WordPress site, and then activate it.

Adding API keys

Once the plugin is installed and activated, add the API keys for the chosen ESP (Email Service Providers). Currently, Newspack Newsletters supports Mailchimp, Constant Contact, Campaign Monitor, or a “manual” provider, which allows you to copy the email markup to use with any other provider.

Add your API keys by following these steps:

  1. Navigate to Newsletters > Settings, and select Add New.
  2. Select your Service Provider:
Newspack Newsletters API settings
  1. If you pick Mailchimp, you will be prompted to enter a Mailchimp API key. To get this, you can log into your existing Mailchimp account, or sign up for a new one, and select the Generate Mailchimp API link below the text field. You can learn more about Mailchimp API keys here.
  1. If you pick Constant Contact, you will be prompted to enter a Constant Contact API key and Access token. Follow these instructions for getting the API key and token.
  1. If you choose Campaign Monitor, you’ll be prompted to enter a Campaign Monitor API key and Client ID. Read about how to get your Campaign Monitor API key and Client ID here.

Select Save Settings.

Now you’re ready to create newsletters! If you ever need to access these settings again, you can navigate to Newsletters > Settings to make changes.

Newsletter layouts

Newspack Newsletters comes bundled with four example layouts to use as a starting point for your newsletters. You can use these layouts, create and edit your own, or start with a blank slate!

Using layouts

When creating a new newsletter, you will be prompted to pick from existing layouts, or start with a blank editor:

  1. Navigate to Newsletters > Add New.
  1. Select the layouts’ thumbnails to view a full preview on the right. Each of the layouts includes instructional filler content, and will pull the logo you have set under Customizer > Site Identity for the newsletter header.
  2. Select the layout you would like to start with and select Use Selected Layout to start editing your newsletter.
  3. Alternatively, if you would like to create your own layout, select Start from Scratch to start with a blank editor.

Once you make your selection, you will be brought to the editor view of your newsletter, where you can make changes before sending.

Adding layouts

You can also create custom layouts to use for future newsletters. These can be based on existing layouts, or by starting from scratch:

  1. Just like you’re creating a new newsletter, navigate to Newsletters > Add New.
  2. Pick the layout you would like to start from, either an existing layout, or by selecting Start from Scratch.
  3. Use the editor to make any changes you would like to include in your custom layout.
  4. If you are ready to save, in the top right corner, select the gear icon, and the Newsletter tab:
  1. Scroll down to the Layouts panel, and select Save new layout.
  1. Give your layout a descriptive name in the prompt that follows:
  1. Now the next time you create a new newsletter under Newsletters > Add New, your custom layout will be available in the My layouts tab on the left:

Editing layouts

Once you have added your own custom layouts, you can also edit them by doing the following:

  1. Navigate to Newsletters > Add New.
  2. From the layouts screen, pick the layout that you would like to edit from the My layouts tab, and select Use Selected Layout.
  3. Make any changes you would like to the layout.
  4. In the top-right corner, make sure you have the gear icon and Newsletter tab selected:
  1. Scroll down to the Layout panel, and select Update layout.
  1. Now your changes will be available the next time you select that custom layout. Note: they will overwrite the original layout; if you would like to keep the old layout, select Save new layout instead.

Resetting layouts

After making changes in the editor, you can roll back the editor to your original selected layout by following these steps:

  1. In the top-right corner, make sure you have the gear icon and Newsletter tab selected:
  1. In the Layouts panel on the right, select Reset newsletter layout. Note: all of your changes will be lost.

If you’re using MailChimp, it will automatically include a footer on the sent newsletter, which will include information about you, and links to unsubscribe or forward the email.

This information is required by anti-spam laws, and MailChimp’s own Terms of Use.

You can create your own footer in the Newsletter editor, and as long as you include MailChimp’s required content, it will replace the footer MailChimp adds. Below is an example with all of the required links — the placeholders like *|EMAIL|*, *|ABOUT_LIST|* and *|LIST:ADDRESSLINE|* will be automatically populated by information in your MailChimp account:

This email was sent to <a href="mailto:*|EMAIL|*">*|EMAIL|*</a>.
<a href="http://*|ABOUT_LIST|*">Why did I get this email?</a>
<a href="http://*|UNSUB|*">Unsubscribe from this list</a>
<a href="*|UPDATE_PROFILE|*">Update subscription preferences</a></p>
<p>*|LIST:ADDRESSLINE|*</p>

You can learn more about MailChimp’s email footers here.

Building newsletters

Getting started

To create a new newsletter:

  1. Navigate to Newsletters > Add New.
  2. Pick a layout to start with, or begin fresh by selecting Start From Scratch.

Newsletter options

When editing a newsletter, you will have a few more options that you usually would when editing a page or a post with Gutenberg. These are divided between the Settings menu (accessed by selecting the icon in the top-right corner) and the Styles menu (accessed by selecting the icon in the top right corner).

Settings

Under the Newsletter panel on the right, you will have the following controls:

  • Subject – the email subject line for your newletter. By default, it will be the date you started composing your newletter.
  • To – displays the available mailing lists you have set up in your current service provider account (either the Mailchimp, Constant Contact, or Campaign Monitor account whos API keys were entered during set up).
  • From – the Name and Email the newsletter should appear to be from one a recipient’s inbox.
  • Preview text – the short line of text that will appear in your recipient’s inbox.
  • Disable ads for this newsletter? – if toggled on, will hide any newsletter ads you may have set up. Learn more about newsletter ads below.
  • Make newsletter page public? – if toggled on, will add the newsletter as a published page on your site once you’ve sent it, using a URL format like https://newspack.com/newsletters/[newsletter-slug]. You can change the last part of the URL under the Permalinks panel; otherwise it will be based of of your newsletter’s subject. Public newsletters will also appear in post category and tag archives, if you assign any categories or tags to the newsletter.

Under the Testing panel you will have the following controls:

  • Send a test to – a text field where can enter one or more comma-separated email addresses to send a test email to. You can use this field to make sure your email displays as expected before sending it out to a larger audience.

Under the Layout panel, you will have the following controls:

  • Save new layout – save your current editor changes as a new layout. Learn more.
  • Update layout – only available when you’ve started with one of your custom layouts, allows you to save changes to a layout you’ve already saved. Learn more.

Under the Permalink panel, you will have the option to change the last part of the URL used by your newsletter, should you choose to publish it to your website.

Styles

You can access these panels by selecting the icon in the top-right corner.

Under the Typography panel, you will have the ability to change the Headings and Body fonts in your newsletter to a different web-safe font.

Under the Color panel, you can change the background color of your entire email, either by using a color picker, or manually entering a hexadecimal value.

Under the Custom CSS panel you can access an advanced feature which allows you to enter CSS that will be appended to the MJML newsletter template. This way, you can provide custom styles or overwrite default template styles, if necessary.

  • Any custom CSS you enter here will apply only to emails sent via your selected ESP (Email Service Provider). The editor preview will update to show custom CSS to help with composing the styles, but because of the wide variation between email clients, it’s not guaranteed that your styles will render the same way in the sent email. We recommend sending test emails often if using custom CSS.
  • If you want to apply custom styles to newsletters when viewed as a public post on your site, we recommend using the Customizer to do so. This is because theme styles can differ substantially from MJML styles.

Available blocks

Newspack Newsletters supports several core Gutenberg blocks and their configurations, but there are some limitations to make sure the blocks display as expected in different email clients. The following blocks and block options are available:

  • Paragraph
  • Heading
  • List
  • Quote
  • Image (without the left and right alignment)
  • Buttons
  • Columns (can nest one level of blocks inside)
  • Group (can nest one level of blocks inside)
  • Separator
  • Spacer
  • Social Icons
  • Embed – modified to display email compatible content. The fully-featured embed is preserved to be diplayed on a published newsletter viewed on the web.
  • Share – not a Core block. Inserts a link to the newsletter’s public post (if published as a post) for easy content sharing.
  • And the Post Inserter block – not a Core block, but a email-friendly version of the Homepage Posts block available in Newspack. The Post Inserter block lets you add posts to your emails; once they’re inserted they turn into regular header and paragraph blocks, so you can edit the post titles and excerpts to target them to your newsletter audience.

Email or web blocks

If you are writing a newsletter that is going to be made public on the web, you can change a block visibility to be displayed for the email version or the web version only.

With the “Make newsletter page public?” option toggled on, you’ll be able to edit through the block toolbar or sidebar its “Visibility options”.

If a block is set to be visible only to a specific version of the newsletter, you should see a notice surrounding the block.

Sending newsletters

Once you are finished editing and testing your newsletter make sure you have configured the target audience and the sender information, by selecting the “Update Sender” link:

After everything is set, you can select the Send button in the top right corner to send it to your selected mailing list.

If you have checked Make newsletter page public?, when you select Send your newsletter will also be saved as a public page on your website. It will always be available under Newsletters, too.

Sending newsletters manually

If you selected the “manual” provider, you’ll be prompted to copy your HTML code to paste on your email service provider. Once you’ve successfully sent your newsletter, select “Mark as sent” to keep track of your published newsletters.

Newsletters Manual Send

Newsletter Ads

Newspack Newsletters let you create ads that are automatically injected in your emails.

To add a Newsletter Ad:

  1. Navigate to Newsletters > Ads > Add New.
  2. The Ad title will not be displayed in the newsletter, so it’s good to give your ads descriptive names.
  3. Newsletter Ads use the block-based editor, with the same block restrictions as the newsletters.
  4. Once saved, ads will automatically appear in your newsletters, positioned as set by the Ad’s Approximate position setting in the Ad Settings panel on the right. You can also turn them off on a newsletter-by-newsletter basis, by checking Disable ads for this newsletter?

Letterhead Ads

Ads can also be sourced from Letterhead. To use this integration, ask the Letterhead staff for an API key and save it in Newsletters > Settings. Afterwards, your Letterhead promotions will replace the native Newsletter Ads.

Support Home

Newspack Newsletters

Engagement Table of Contents