Issue-13: convert templates/layouts from static files to custom post type

.eslintrc.json

@@ -2,5 +2,20 @@
   "extends": ["@alleyinteractive/eslint-config/typescript-react"],
   "parserOptions": {
     "project": "./tsconfig.eslint.json"
-  }
+  },
+  "settings": {
+    "import/resolver": {
+      "webpack": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  },
+  "overrides": [
+    {
+        "files": ["*.tsx"],
+        "rules": {
+            "no-undef": "off"
+        }
+    }
+  ]
 }

.phpcs.xml

@@ -37,7 +37,7 @@
     <properties>
       <property name="prefixes" type="array">
         <element value="vendor_name" />
-        <element value="create_wordpress_plugin" />
+        <element value="WP_Newsletter_Builder" />
       </property>
     </properties>
   </rule>

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to `Newsletter Builder` will be documented in this file.
 
-## 0.1.0 - 202X-XX-XX
+## 0.2.0 - 2023-11-07
+
+- Move templates from static files to using a custom post type
+
+## 0.1.0 - 2023-10-13
 
 - Initial release

blocks/footer/index.php

@@ -17,6 +17,5 @@ function wp_newsletter_builder_footer_block_init() {
 	register_block_type(
 		__DIR__
 	);
-
 }
 add_action( 'init', 'wp_newsletter_builder_footer_block_init' );

blocks/header/index.php

@@ -17,6 +17,5 @@ function wp_newsletter_builder_header_block_init() {
 	register_block_type(
 		__DIR__
 	);
-
 }
 add_action( 'init', 'wp_newsletter_builder_header_block_init' );

blocks/post/index.php

@@ -17,6 +17,5 @@ function wp_newsletter_builder_post_block_init() {
 	register_block_type(
 		__DIR__
 	);
-
 }
 add_action( 'init', 'wp_newsletter_builder_post_block_init' );

blocks/section/edit.tsx

@@ -6,13 +6,12 @@ import {
 } from '@wordpress/block-editor';
 import { dispatch, select } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
+import { PanelBody, PanelRow } from '@wordpress/components';
+import { useEffect } from '@wordpress/element';
 
 import MultiplePostPicker from '@/components/multiplePostPicker';
 import PostPickerResult from '@/components/postPickerResult';
 import './index.scss';
-import { PanelBody, PanelRow } from '@wordpress/components';
-
-import { useEffect } from '@wordpress/element';
 
 interface EditProps {
   clientId: string;

blocks/section/index.php

@@ -17,6 +17,5 @@ function wp_newsletter_builder_section_block_init() {
 	register_block_type(
 		__DIR__
 	);
-
 }
 add_action( 'init', 'wp_newsletter_builder_section_block_init' );

blocks/signup-form-list/index.php

@@ -17,6 +17,5 @@ function wp_newsletter_builder_signup_form_list_block_init() {
 	register_block_type(
 		__DIR__
 	);
-
 }
 add_action( 'init', 'wp_newsletter_builder_signup_form_list_block_init' );

blocks/signup-form/index.php

@@ -17,7 +17,6 @@ function wp_newsletter_builder_signup_form_block_init() {
 	register_block_type(
 		__DIR__
 	);
-
 }
 add_action( 'init', 'wp_newsletter_builder_signup_form_block_init' );
 

blocks/two-up-post/index.php

@@ -17,6 +17,5 @@ function wp_newsletter_builder_two_up_post_block_init() {
 	register_block_type(
 		__DIR__
 	);
-
 }
 add_action( 'init', 'wp_newsletter_builder_two_up_post_block_init' );

components/emailTypeSelector/index.tsx

@@ -2,6 +2,7 @@ import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useEffect, useState } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
+import { WP_REST_API_Post } from 'wp-types'; // eslint-disable-line camelcase
 
 interface AdTag {
   tag_code: string;
@@ -31,23 +32,24 @@ interface EmailTypeSelectorProps {
 interface Window {
   newsletterBuilder: {
     fromNames: Array<string>;
+    templates: {
+      [key: number]: string;
+    };
   };
 }
 
+interface Option {
+  label: string;
+  value: string;
+}
+
 const {
   newsletterBuilder: {
     fromNames = [],
+    templates: templatesMap = {},
   } = {},
 } = (window as any as Window);
 
-const templatesMap = {
-  'single-story.html': __('Single Story', 'wp-newsletter-builder'),
-  'multi-story.html': __('Multi Story', 'wp-newsletter-builder'),
-  'pro-single-story.html': __('Pro Single Story', 'wp-newsletter-builder'),
-  'pro-multi-story.html': __('Pro Multi Story', 'wp-newsletter-builder'),
-  'first-take.html': __('First Take', 'wp-newsletter-builder'),
-};
-
 const fromOptions = fromNames.map((name: string) => (
   { value: name, label: name }
 ));
@@ -81,10 +83,22 @@ function EmailTypeSelector({
     }
   }, [fromNameHandler, fromNameValue]);
 
+  const sortByLabel = (a: Option, b: Option): number => {
+    if (a.label < b.label) {
+      return -1;
+    }
+    if (a.label > b.label) {
+      return 1;
+    }
+    return 0;
+  };
+
   const typesToOptions = (rawTypes: TypeResult) => {
     const output = Object.keys(rawTypes).map((key: string) => (
       { label: rawTypes[key].label, value: key }
     ));
+    output.sort(sortByLabel);
+
     output.unshift({ label: __('Select a type', 'wp-newsletter-builder'), value: '' });
     return output;
   };
@@ -95,8 +109,9 @@ function EmailTypeSelector({
       return [];
     }
     const output = templates.map((value) => (
-      { value, label: templatesMap[value as keyof typeof templatesMap] }
+      { value, label: templatesMap[parseInt(value, 10) as keyof typeof templatesMap] }
     ));
+    output.sort(sortByLabel);
     output.unshift({ label: __('Select a template', 'wp-newsletter-builder'), value: '' });
     return output;
   };
@@ -110,9 +125,12 @@ function EmailTypeSelector({
     const { image, from_name: fromName } = type;
     imageHandler(parseInt(image, 10));
     fromNameHandler(fromName);
-    const response = await fetch(`/wp-content/plugins/wp-newsletter-builder/layouts/${value}`);
-    const html = await response.text();
-    contentHandler(html);
+    apiFetch({
+      path: `/wp/v2/nb_template/${value}?context=edit`,
+    }).then((response) => {
+      const { content } = response as WP_REST_API_Post; // eslint-disable-line camelcase
+      contentHandler(content.raw as string);
+    });
   };
 
   // Set the template to be the first option if there's only one option.

components/multiplePostPicker/post-list.tsx

@@ -3,15 +3,15 @@ import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
 import { __, sprintf } from '@wordpress/i18n';
 import { Button, TextControl, Spinner } from '@wordpress/components';
-import type { WP_REST_API_Search_Results, WP_REST_API_Search_Result } from 'wp-types';
+import type { WP_REST_API_Search_Results, WP_REST_API_Search_Result } from 'wp-types'; // eslint-disable-line camelcase
 
 import './post-list.scss';
 
 interface PostListProps {
   baseUrl: string;
   searchRender: (post: object) => JSX.Element;
-  selected?: WP_REST_API_Search_Result[];
-  setSelected: (post: WP_REST_API_Search_Result) => void;
+  selected?: WP_REST_API_Search_Result[]; // eslint-disable-line camelcase
+  setSelected: (post: WP_REST_API_Search_Result) => void; // eslint-disable-line camelcase
 }
 
 interface Params {
@@ -31,7 +31,7 @@ function PostList({
   setSelected,
 }: PostListProps) {
   const [isUpdating, setIsUpdating] = useState(false);
-  const [listposts, setListposts] = useState<WP_REST_API_Search_Results>([]);
+  const [listposts, setListposts] = useState<WP_REST_API_Search_Results>([]); // eslint-disable-line camelcase, max-len
   const [initialLoad, setInitialLoad] = useState(false);
   const [totalPages, setTotalPages] = useState(0);
   const [pathParams, setPathParams] = useState({
@@ -83,18 +83,18 @@ function PostList({
     ));
     // @ts-ignore
     const result = await response.json();
-    let posts = result as any as WP_REST_API_Search_Results;
+    let posts = result as any as WP_REST_API_Search_Results; // eslint-disable-line camelcase
     if (params.page > 1) {
       posts = [
         ...listposts,
-        ...result as any as WP_REST_API_Search_Results,
+        ...result as any as WP_REST_API_Search_Results, // eslint-disable-line camelcase
       ];
     }
     if (cancelled) {
       return;
     }
     // @ts-ignore
-    setListposts(posts as any as WP_REST_API_Search_Results);
+    setListposts(posts as any as WP_REST_API_Search_Results); // eslint-disable-line camelcase
     setIsUpdating(false);
   }, [listposts, baseUrl]);
 

components/multiplePostPicker/search-modal.tsx

@@ -7,7 +7,7 @@ import {
 
 import { __ } from '@wordpress/i18n';
 
-import type { WP_REST_API_Search_Result } from 'wp-types';
+import type { WP_REST_API_Search_Result } from 'wp-types'; // eslint-disable-line camelcase
 
 import './search-modal.scss';
 import PostList from './post-list';
@@ -26,18 +26,18 @@ function SearchModal({
   onUpdate,
   searchRender,
 }: SearchModalProps) {
-  const [selected, setSelected] = useState<WP_REST_API_Search_Result[]>([]);
+  const [selected, setSelected] = useState<WP_REST_API_Search_Result[]>([]); // eslint-disable-line camelcase, max-len
 
   const doSelect = () => {
     if (!selected) {
       return;
     }
-    const ids = selected.map((item: WP_REST_API_Search_Result) => item.id);
+    const ids = selected.map((item: WP_REST_API_Search_Result) => item.id); // eslint-disable-line camelcase, max-len
     onUpdate(ids as number[]);
     closeModal();
   };
 
-  const addToSelected = (newValue: WP_REST_API_Search_Result) => {
+  const addToSelected = (newValue: WP_REST_API_Search_Result) => { // eslint-disable-line camelcase
     setSelected([...selected, newValue]);
   };
 

components/multiplePostPicker/selected-list.scss

@@ -11,6 +11,7 @@
   margin: 5px 0;
   min-height: 60px;
   user-select: none;
+  width: 100%;
 
   > span {
     cursor: move;

components/multiplePostPicker/selected-list.tsx

@@ -3,14 +3,14 @@ import SortableList, { SortableItem, SortableKnob } from 'react-easy-sort';
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { arrayMoveImmutable } from 'array-move';
-import type { WP_REST_API_Search_Result } from 'wp-types';
+import type { WP_REST_API_Search_Result } from 'wp-types'; // eslint-disable-line camelcase
 
 import './selected-list.scss';
 
 interface SelectedListProps {
   searchRender: (post: object) => JSX.Element;
-  selected?: WP_REST_API_Search_Result[];
-  setSelected: (posts: WP_REST_API_Search_Result[]) => void;
+  selected?: WP_REST_API_Search_Result[]; // eslint-disable-line camelcase
+  setSelected: (posts: WP_REST_API_Search_Result[]) => void; // eslint-disable-line camelcase
 }
 
 /**
@@ -23,13 +23,13 @@ function SelectedList({
   selected,
   setSelected,
 }: SelectedListProps) {
-  const removeFromSelected = (removeValue: WP_REST_API_Search_Result) => {
+  const removeFromSelected = (removeValue: WP_REST_API_Search_Result) => { // eslint-disable-line camelcase, max-len
     setSelected(selected ? selected.filter((item) => item.id !== removeValue.id) : []);
   };
 
   const onSortEnd = (oldIndex: number, newIndex: number) => {
     const newSelected = arrayMoveImmutable(
-      [...selected as WP_REST_API_Search_Result[]],
+      [...selected as WP_REST_API_Search_Result[]], // eslint-disable-line camelcase
       oldIndex,
       newIndex,
     );