Newsletter

[SantosGuillamot]

Description

We're going to have a reusable block named "Newsletter" that could be placed anywhere in the web. Right now, it's only used in the footer, so we should add it there.

In order to implement this, we are going to reuse the logic of our current newsletter form. Bear in mind:

• The design is different.
• We are not including the role field.
• We have to add the logic for the afterNewsletter as well.

Logic

• In order to connect the newsletter form with services like Vero, Amplitude or Analytics, we are using Google Tag Manager to manage all of them, so we have to make sure to send the proper information there (this is already done in the repo of the current newsletter).

• There will be four different status of the form:

Normal
The status before the user starts interacting with it.

Active
Once the user clicks on the input field, the border color should change and use state.theme.colors.frontity.

Wrong
When the user try to submit something that is not an email, or they haven't check the Privacy Policy, we should standard error like the current frontity.org. Something like this:

Success
When the email has been submitted correctly, we should change the form for a "Thanks message". Something similar to what next.js is doing.

Before submitting:

After submitting:

Possible solution

• For linking the form with Google Tag Manager, we should reuse the logic of the current newsletter.
• We'll need to process the className newsletter and create a new React component with the content found there. This processor would work different than the other ones, as we don't have to keep the content structure. We could use each different element of it to populate the component.

HTML

Our first idea about the Gutenberg HTML of the newsletter group is the following:

• The inner blocks for grouping editable content:

//Name of the editable content
<h6>Placeholder email</h6>

//HTML of the editable content
<p>Enter your email</p>

We could create a grouping div for them if you feel it would be easier. We are using <h6> to specify in the Gutenberg editor which content are we changing in each paragraph, but it should be deleted in the React component. Apart from that, <h6> isn't used in the rest of the web and this way it's clearer that is just for editable content.

• The whole newsletter Gutenberg HTML would be something like this:

<div class="wp-block-group newsletter">
  <div class="wp-block-group__inner-container">
    <h4>Join the Frontity newsletter</h4>
    <p>Stay up-to-date on new releases and features, tutorials, and community news.</p>
    
    <h6>Placeholder email</h6>
    <p>Enter your email</p>

    <h6>Privacy Policy checkbox</h6>
    <p>I agree to the <a href="https://frontity.org/privacy-policy">Privacy Policy</a></p> 
    
    <h6>Thank you message</h6>
    <p>Thank you! You have been subscribed to the Frontity newsletter. You will receive a welcome email shortly.</p>

  </div>
</div>

As said, we should consider if grouping the editable content would be easier.

Where to check

• We can find, and modify if needed, the Gutenberg content at https://wp.frontity.org/wp-admin/post.php?post=5001&action=edit
• We can find the design of the newsletter at the bottom of each page, above the footer.

[SantosGuillamot]

I'm blocking it until we have the design of the checkbox.

[luisherranz]

Thanks Mario. Could you please specify the Gutenberg inner blocks that will be used for the editable content?

[SantosGuillamot]

Oh yes, I forgot to post that sorry. I've updated the opening post.

[SantosGuillamot]

The designer has updated this, so I'm unblocking the issue.

[luisherranz]

Thanks Mario.

Some feedback about the editable content:

• I don't think placeholders are necessary, they are not going to change.
• I don't think the Privacy Policy is necessary, it is not going to change.
• The title, description and thank-you message are fine, but it's going to be hard to retrieve from the HTML with that layout. It's easier if that information is in the node itself. For example:
  • Using classes:

    <p class="title">Join the Frontity newsletter</p>
    <p class="description">Stay up-to-date on new releases and features, tutorials, and community news.</p>
    <p class="thank-you">Thank you! You have been subscribed to the Frontity newsletter. You will receive a welcome email shortly.</p>

  • Using children order (1st title, 2nd desc, 3rd thank-you):

    <p>Join the Frontity newsletter</p>
    <p>Stay up-to-date on new releases and features, tutorials, and community news.</p>
    <p>Thank you! You have been subscribed to the Frontity newsletter. You will receive a welcome email shortly.</p>

[SantosGuillamot]

Yes, I agree that the placeholders and the Privacy Policy shouldn't change. Regarding the layout, I'd prefer using classes, it looks clearer to me.

[SantosGuillamot]

In order to test if the logic of the old implementation could work, and check the best way to connect Gutenberg and React, I created this draft Pull Request #75 . It works so I guess the migration is possible. I share it in case it's useful as an starting point.