一个由 Gutenberg 驱动的邮件简报

我喜欢 Gutenberg，这是新的 WordPress 编辑器。 我并非没有注意到围绕可访问性、用户体验和准备情况的所有讨论，但我知道发布软件有多难，我很高兴 WordPress 能够将其发布。 现在它可以变得更好。

我看到了基于块的编辑器有很多好处。 我每天使用的许多我最喜欢的编辑器，Notion 和 Dropbox Paper，都以自己的方式基于块，我发现它很有效。 在 CMS 上下文中，更是如此。 此外，这些不仅仅是增强的文本块，它们可以是任何东西！ 每个块都是它自己可以配置的小世界，输出它需要输出的任何内容。

我在许多网站上使用 Gutenberg，包括 我的个人网站 和 我漫无边际的邮件网站，那里的内容非常基础。 不过，在一个拥有十多年历史的网站（如 CSS-Tricks）上，我们需要循序渐进。 我们的第一步之一是将我们的邮件简报创作迁移到 Gutenberg 设置中。 以下是我们的做法。

Gutenberg 坡道

Gutenberg Ramp 是一款插件，其目的是为某些区域启用 Gutenberg，而其他区域则不启用。 在我们的案例中，我只想为邮件简报启用 Gutenberg，邮件简报是我们网站上的自定义帖子类型。 安装并激活插件后，我可以在我们的 functions.php 中执行此操作

if (function_exists('gutenberg_ramp_load_gutenberg')) {
  gutenberg_ramp_load_gutenberg(['post_types' => [ 'newsletters' ]]);
}

效果很好

我们已经拥有 100 多封邮件简报，因此我希望只在特定日期或 ID 之后启用 Gutenberg，但我还没有完全做到这一点。 我已提交了一个问题。

我们之前在做什么：粘贴 HTML 邮件乱码

我们最终从 MailChimp 发送邮件。 因此，当我们第一次开始手工制作我们的邮件简报时，我们在 MailChimp 中创建了一个模板，并在 MailChimp 中直接进行创作

这没什么不好的，我只是更喜欢将干净的创作内容保存在我们自己的数据库中。 即使是旧的方式，我们最终也确实将其放入了我们的数据库中，但我们以一种相当笨拙的方式进行了操作。 发送邮件后，我们会获取 MailChimp 中的 HTML 输出，并将其复制粘贴到我们的邮件简报自定义帖子类型中。

从某种意义上说，这很好：我们拥有了内容！ 但内容非常混乱，我们基本上永远无法对其进行任何操作，只能在<iframe>中显示它，因为内容完全捆绑在 HTML 邮件乱码中。

现在我们可以在 Gutenberg 中干净地创作

我认为这里的写作体验是类似的（MailChimp 也是一种块编辑器），但比直接在 MailChimp 中进行创作更好。 创建标题、列表、块引用、分隔符、拖放图像……这些是我们邮件简报中常用的块，速度非常快。

显示邮件简报

我喜欢为每一期邮件简报提供永久 URL。 我喜欢邮件是主要的投递方式，但最终这些都是我想要成为网站一部分的文字。 这意味着如果人们不喜欢邮件，他们仍然可以阅读它。 它具有 SEO 价值。 我可以根据需要链接到它们。 对于像我们这样的出版物网站来说，这感觉是正确的。

现在我们直接在网站上进行创作，我可以像任何其他帖子或页面一样，在 WordPress 循环中输出<?php the_content() ?>并获得干净的输出。

但是……我们有“旧”与“新”的问题，即旧的邮件简报是 HTML 转储，新的邮件简报是 Gutenberg。 幸运的是，这不是一个大问题，因为我知道切换发生的确切时间，因此我可以根据 ID 以不同的方式显示它们。 在我的`single-newsletters.php`中

<?php if (get_the_ID() > 283082) { ?>

  <main class="single-newsletter on-light">
    <article class="article-content">
      <h1>CSS-Tricks Newsletter #<?php the_title(); ?></h1>
      <?php the_content() ?>
    </article>
  </main>
  
<?php } else { // Classic Mailchimp HTML dump ?>

  <div class="newsletter-iframe-wrap">
    <iframe class="newsletter-iframe" srcdoc="<?php echo htmlspecialchars(get_the_content()); ?>"></iframe>
  </div>

<?php } ?>

目前，我们显示邮件简报的主要方式是在一个小型伪造的手机界面中在邮件简报页面上，它可以很好地处理两者

那么它们是如何实际发送出去的呢？

既然我们不再在 MailChimp 内部创建邮件简报，我们是否需要找到另一种发送它们的方法？ 不需要！ MailChimp 可以根据 RSS Feed 发送邮件简报。

WordPress 非常擅长为自定义帖子类型提供 RSS Feed。 你可以做……

/feed/?post_type=your-custom-post-type

但是……对我来说，我想确保任何旧的 HTML 转储邮件都不会出现在此 RSS Feed 中，这样新的 MailChimp RSS Feed 永远不会看到它们并意外发送它们。 因此，我最终创建了一个输出自定义 RSS Feed 的特殊页面模板。 我认为如果我们将来需要为更多内容使用它，这将使我们能够对其进行最终控制。

<?php
/*
Template Name: RSS Newsletterss
*/

the_post();
$id = get_post_meta($post->ID, 'parent_page_feed_id', true);

$args = array(
  'showposts' => 5,
  'post_type'  => 'newsletters',
  'post_status' => 'publish',
  'date_query' => array(
     array(
      'after'     => 'February 19th, 2019'
    )
  )
);

$posts = query_posts($args);

header('Content-Type: '.feed_content_type('rss-http').'; charset='.get_option('blog_charset'), true);
echo '<?xml version="1.0" encoding="'.get_option('blog_charset').'"?'.'>';
?>

<rss version="2.0"
  xmlns:content="http://purl.org/rss/1.0/modules/content/"
  xmlns:wfw="http://wellformedweb.org/CommentAPI/"
  xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:atom="http://www.w3.org/2005/Atom"
  xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
  xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
  <?php do_action('rss2_ns'); ?>>

<channel>
  <title>CSS-Tricks Newsletters RSS Feed</title>
  <atom:link href="<?php self_link(); ?>" rel="self" type="application/rss+xml" />
  <link><?php bloginfo_rss('url') ?></link>
  <description><?php bloginfo_rss("description") ?></description>
  <lastBuildDate><?php echo mysql2date('D, d M Y H:i:s +0000', get_lastpostmodified('GMT'), false); ?></lastBuildDate>
  <language><?php echo get_option('rss_language'); ?></language>
  <sy:updatePeriod><?php echo apply_filters( 'rss_update_period', 'hourly' ); ?></sy:updatePeriod>
  <sy:updateFrequency><?php echo apply_filters( 'rss_update_frequency', '1' ); ?></sy:updateFrequency>

  <?php do_action('rss2_head'); ?>

  <?php while( have_posts()) : the_post(); ?>

    <item>
      <title><?php the_title_rss(); ?></title>
      <link><?php the_permalink_rss(); ?></link>
      <comments><?php comments_link(); ?></comments>
      <pubDate><?php echo mysql2date('D, d M Y H:i:s +0000', get_post_time('Y-m-d H:i:s', true), false); ?></pubDate>
      <dc:creator><?php the_author(); ?></dc:creator>
  <?php the_category_rss(); ?>
      <guid isPermaLink="false"><?php the_guid(); ?></guid>

      <description><![CDATA[<?php the_excerpt_rss(); ?>]]></description>

      <content:encoded><![CDATA[<?php the_content(); ?>]]></content:encoded>

      <wfw:commentRss><?php echo get_post_comments_feed_link(); ?></wfw:commentRss>
      <slash:comments><?php echo get_comments_number(); ?></slash:comments>

      <?php rss_enclosure(); ?>
      <?php do_action('rss2_item'); ?>

    </item>

  <?php endwhile; ?>

</channel>

</rss>

样式……

使用 MailChimp RSS 活动，您仍然可以像任何其他活动一样控制外部模板

然后，Feed 中的内容就会被直接放入其中。 幸运的是，他们的预览工具确实会为您获取内容，以便您可以实际查看其外观

然后，您可以通过将<style>块注入编辑器区域本身来对其进行样式设置。

这使我们能够完全控制邮件的设计，并且它与我们可能选择如何在网站本身对其进行样式设置的方式很好地独立。