Merge branch 'develop' into feature/LEDE-2617/post-list-block

README.md

@@ -4,7 +4,7 @@ Contributors: alleyinteractive
 
 Tags: alleyinteractive, wp-newsletter-builder
 
-Stable tag: 0.3.27
+Stable tag: 0.3.29
 
 Requires at least: 6.2
 

blocks/button/index.php

@@ -12,7 +12,7 @@
  *
  * @see https://developer.wordpress.org/reference/functions/register_block_type/
  */
-function wp_newsletter_builder_button_block_init() {
+function wp_newsletter_builder_button_block_init(): void {
 	// Register the block by passing the location of block.json.
 	register_block_type(
 		__DIR__

blocks/divider/index.php

@@ -12,7 +12,7 @@
  *
  * @see https://developer.wordpress.org/reference/functions/register_block_type/
  */
-function wp_newsletter_builder_divider_block_init() {
+function wp_newsletter_builder_divider_block_init(): void {
 	// Register the block by passing the location of block.json.
 	register_block_type(
 		__DIR__

blocks/footer/edit.tsx

@@ -120,6 +120,7 @@ export default function Edit() {
             {address
               ? (
                 <div className="wp-block-wp-newsletter-builder-footer__address">
+                  <span>{__('Our mailing address is:', 'wp-newsletter-builder')}</span>
                   {address}
                 </div>
               )

blocks/footer/render.php

@@ -83,6 +83,7 @@
 
 	<?php if ( ! empty( $nb_address ) ) : ?>
 		<div class="wp-block-wp-newsletter-builder-footer__address">
+			<span><?php esc_html_e( 'Our mailing address is:', 'wp-newsletter-builder' ); ?></span>
 			<?php echo esc_html( $nb_address ); ?>
 		</div>
 	<?php endif; ?>

blocks/footer/style.scss

@@ -52,8 +52,8 @@
   }
 
   .youtube-icon {
-    background-color: #FF0000;
-    color: #FF0000;
+    background-color: #F00;
+    color: #F00;
   }
 }
 
@@ -65,6 +65,12 @@
 
 .wp-block-wp-newsletter-builder-footer__address {
   margin-top: 20px;
+
+  span {
+    display: block;
+    font-weight: 700;
+    text-align: center;
+  }
 }
 
 .wp-block-wp-newsletter-builder-footer__links {

blocks/header/index.scss

@@ -7,6 +7,6 @@
  *
  * Replace them with your own styles or remove the file completely.
  */
-
-// .wp-block-wp-newsletter-builder-header {
-// }
+.wp-block-wp-newsletter-builder-header {
+  text-align: center;
+}

blocks/header/style.scss

@@ -12,7 +12,7 @@
  */
 
 .wp-block-wp-newsletter-builder-header {
-  // @TODO: style alt text.
+  text-align: center;
 
   &__placeholder {
     align-items: center;

blocks/heading/index.php

@@ -12,7 +12,7 @@
  *
  * @see https://developer.wordpress.org/reference/functions/register_block_type/
  */
-function wp_newsletter_builder_heading_block_init() {
+function wp_newsletter_builder_heading_block_init(): void {
 	// Register the block by passing the location of block.json.
 	register_block_type(
 		__DIR__

blocks/list/index.php

@@ -12,7 +12,7 @@
  *
  * @see https://developer.wordpress.org/reference/functions/register_block_type/
  */
-function wp_newsletter_builder_list_block_init() {
+function wp_newsletter_builder_list_block_init(): void {
 	// Register the block by passing the location of block.json.
 	register_block_type(
 		__DIR__

blocks/paragraph/index.php

@@ -12,7 +12,7 @@
  *
  * @see https://developer.wordpress.org/reference/functions/register_block_type/
  */
-function wp_newsletter_builder_paragraph_block_init() {
+function wp_newsletter_builder_paragraph_block_init(): void {
 	// Register the block by passing the location of block.json.
 	register_block_type(
 		__DIR__

blocks/post-byline/style.scss

@@ -12,8 +12,7 @@
  */
 
 .post__byline {
-  font-family: var(--template-font-family);
-  font-size: 15px;
-  font-weight: bold;
+  font-size: 16px;
+  margin-bottom: 8px;
   text-align: center;
 }

blocks/post/style.scss

@@ -37,9 +37,8 @@
   }
 
   .post__byline {
-    font-family: var(--template-font-family);
-    font-size: 15px;
-    font-weight: bold;
+    font-size: 16px;
+    margin-bottom: 8px;
     text-align: center;
   }
 

hooks/useNewsletterStats/index.ts

@@ -0,0 +1,47 @@
+import { useCallback, useEffect, useState } from '@wordpress/element';
+import apiFetch from '@wordpress/api-fetch';
+
+interface Stats {
+  Bounced?: number;
+  Clicks?: number;
+  Forwards?: number;
+  Likes?: number;
+  Mentions?: number;
+  Name?: string;
+  Recipients?: number;
+  SpamComplaints?: number;
+  Status?: string;
+  TotalOpened?: number;
+  UniqueOpened?: number;
+  Unsubscribed?: number;
+  WebVersionTextURL?: string;
+  WebVersionURL?: string;
+  WorldviewURL?: string;
+}
+
+function useNewsletterStats(newsletterId: string) {
+  const [stats, setStats] = useState<Stats>({});
+  const [fetching, setFetching] = useState(false);
+
+  const fetchStats = useCallback(async () => {
+    setFetching(true);
+    const res = await apiFetch({
+      path: `/wp-newsletter-builder/v1/status/${newsletterId}`,
+    });
+    setStats(res as Stats);
+    setFetching(false);
+  }, [newsletterId]);
+
+  useEffect(() => {
+    fetchStats();
+  }, [fetchStats]);
+
+  return {
+    validStats: stats.Status && stats.Name,
+    stats,
+    fetching,
+    fetchStats,
+  };
+}
+
+export default useNewsletterStats;

package.json

@@ -123,7 +123,7 @@
     "jest": "^29.7.0",
     "mini-css-extract-plugin": "^2.9.0",
     "ts-jest": "^29.1.4",
-    "typescript": "^5.4.5",
+    "typescript": "^5.5.2",
     "webpack-cli": "^5.1.4"
   }
 }

phpstan.neon

@@ -5,9 +5,6 @@ parameters:
 	# Level 9 is the highest level
 	level: max
 
-	# Disable generics in type hints.
-	checkGenericClassInNonGenericObjectType: false
-
 	paths:
 		- blocks/
 		- entries/

plugin.php

@@ -3,7 +3,7 @@
  * Plugin Name: Newsletter Builder
  * Plugin URI: https://github.com/alleyinteractive/wp-newsletter-builder
  * Description: Interface to manage email newsletters
- * Version: 0.3.27
+ * Version: 0.3.29
  * Author: Alley Interactive
  * Author URI: https://github.com/alleyinteractive/wp-newsletter-builder
  * Requires at least: 6.2

plugins/newsletter-from-post/email-settings.tsx

@@ -1,20 +1,23 @@
 /**
  * EmailSettings component
  */
-
-import { PluginSidebar } from '@wordpress/edit-post';
+import apiFetch from '@wordpress/api-fetch';
+import { createBlock, parse, serialize } from '@wordpress/blocks';
 import { CheckboxControl, PanelBody, TextareaControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
+import { PluginSidebar } from '@wordpress/edit-post';
+import { useCallback, useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 import { MultiSelect } from 'react-multi-select-component';
-import { createBlock, parse, serialize } from '@wordpress/blocks';
+// eslint-disable-next-line camelcase
+import { WP_REST_API_Post } from 'wp-types';
+
 import NewsletterSpinner from '@/components/newsletterSpinner';
-import useNewsletterMeta from '@/hooks/useNewsletterMeta';
 import useEmailLists, { Option } from '@/hooks/useEmailLists';
-import RequiredFields from '@/plugins/newsletter-from-post/components/required-fields';
+import useNewsletterMeta from '@/hooks/useNewsletterMeta';
 
+import RequiredFields from './components/required-fields';
 import EmailTypeSelector from '../../components/emailTypeSelector';
-import SentNewsletter from './components/sent-newsletter';
 
 interface CoreEditor {
   getEditedPostAttribute: (attribute: string) => string;
@@ -29,6 +32,7 @@ interface Window {
 }
 
 function EmailSettings() {
+  const [fetched, setFetched] = useState(false);
   const { meta, setMeta } = useNewsletterMeta();
   const { emailListOptions, selectedEmailList } = useEmailLists();
   const manualSubject = meta.subject !== '';
@@ -68,7 +72,7 @@ function EmailSettings() {
     setMeta({ nb_breaking_list: listIds });
   });
 
-  const contentHandler = (html: string) => {
+  const contentHandler = useCallback((html: string) => {
     const blocks = parse(html);
     const postIndex = blocks.findIndex((block) => block.name === 'wp-newsletter-builder/post');
 
@@ -78,7 +82,7 @@ function EmailSettings() {
     }, blocks[postIndex].innerBlocks);
 
     setMeta({ nb_breaking_content: serialize(blocks) });
-  };
+  }, [postId, setMeta]);
 
   const areRequiredFieldsSet = meta.type === ''
     || meta.template === ''
@@ -87,6 +91,23 @@ function EmailSettings() {
     || (meta.preview === '' && postExcerpt === '')
     || meta.list.length === 0;
 
+  /**
+   * Update the template content when the template is changed.
+   */
+  useEffect(() => {
+    if (!meta.template || fetched) {
+      return;
+    }
+
+    apiFetch({
+      path: `/wp/v2/nb_template/${meta.template}?context=edit`,
+    }).then((response) => {
+      const { content } = response as WP_REST_API_Post; // eslint-disable-line camelcase
+      setFetched(true);
+      contentHandler(content.raw as string);
+    });
+  }, [contentHandler, fetched, meta.template]);
+
   return (
     <PluginSidebar
       icon="email-alt2"
@@ -163,16 +184,6 @@ function EmailSettings() {
           <RequiredFields meta={meta} postTitle={postTitle} postExcerpt={postExcerpt} />
         </div>
       </PanelBody>
-      {meta.sentBreakingPostId ? (
-        <PanelBody
-          initialOpen={false}
-          title={__('Sent Newsletters', 'wp-newsletter-builder')}
-        >
-          {meta.sentBreakingPostId.map((id: number) => (
-            <SentNewsletter postId={id} key={id} />
-          ))}
-        </PanelBody>
-      ) : null}
     </PluginSidebar>
   );
 }