Eine Gutenburg-basierte Newsletter

Ich mag Gutenberg, den neuen WordPress-Editor. Mir sind die Diskussionen über Barrierefreiheit, UX und Bereitschaft nicht entgangen, aber ich weiß, wie schwer es ist, Software zu veröffentlichen, und ich bin froh, dass WordPress es auf den Markt gebracht hat. Jetzt kann es sich zum Besseren entwickeln.

Ich sehe viele Vorteile in blockbasierten Editoren. Einige meiner Lieblingseditoren, die ich täglich benutze, Notion und Dropbox Paper, sind auf ihre Weise blockbasiert und ich finde es effektiv. Im CMS-Kontext umso mehr. Hinzu kommt, dass dies nicht nur aufgemotzte Textblöcke sind, sondern alles Mögliche sein können! Jeder Block ist seine eigene kleine konfigurierbare Welt, die ausgibt, was sie braucht.

Ich benutze Gutenberg auf mehreren Websites, darunter meine persönliche Website und meine ausschweifende E-Mail-Website, wo der Inhalt ziemlich einfach ist. Auf einer über ein Jahrzehnt alten Website wie CSS-Tricks müssen wir jedoch behutsam vorgehen. Einer unserer ersten Schritte war die Umstellung der Erstellung unseres Newsletters auf ein Gutenberg-Setup. Hier erfahren Sie, wie wir das machen.

Gutenberg-Rampe

Gutenberg Ramp ist ein Plugin, das Gutenberg für *einige* Bereiche aktiviert und für andere nicht. In unserem Fall wollte ich Gutenberg nur für Newsletter aktivieren, was ein benutzerdefiniertes Inhaltstyp auf unserer Website ist. Mit dem installierten und aktivierten Plugin kann ich dies jetzt in unserer functions.php tun.

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

Was großartig funktioniert

Wir haben dort bereits über 100 Newsletter, daher hoffte ich, Gutenberg nur *ab einem bestimmten Datum oder einer bestimmten ID* zu aktivieren, aber ich bin noch nicht ganz so weit. Ich habe ein Problem eröffnet.

Was wir vorher gemacht haben: HTML-E-Mail-Kauderwelsch eingefügt

Wir versenden die E-Mail letztendlich über MailChimp. Als wir also anfingen, unseren E-Mail-Newsletter manuell zu erstellen, erstellten wir eine Vorlage in MailChimp und schrieben unsere Inhalte direkt in MailChimp.

Nichts Schreckliches daran, ich bevorzuge es einfach sehr, wenn wir den sauberen, erstellten Inhalt in unserer eigenen Datenbank behalten. Selbst auf die alte Weise haben wir ihn letztendlich in unsere Datenbank bekommen, aber wir haben es auf eine ziemlich schlampige Weise getan. Nach dem Versand der E-Mail nahmen wir die HTML-Ausgabe von MailChimp und kopierten und fügten sie in unseren benutzerdefinierten Inhaltstyp Newsletter ein.

Das ist in gewisser Weise gut: Wir haben den Inhalt! Aber der Inhalt ist so vermurkst, dass wir praktisch nichts damit anfangen können, außer ihn in einem <iframe> anzuzeigen, da der Inhalt zu 100 % in HTML-E-Mail-Kaudiwelsch eingebettet ist.

Jetzt können wir sauber in Gutenberg schreiben

Ich würde argumentieren, dass das Schreiberlebnis hier ähnlich ist (MailChimp ist auch eine Art Block-Editor), aber besser, als es direkt in MailChimp zu tun. Es ist so schnell, Überschriften, Listen, Blockzitate, Trennlinien, Bilder per Drag & Drop zu erstellen... Blöcke, die der Kern unseres Newsletters sind.

Anzeige des Newsletters

Ich mag es, eine permanente URL für jede Ausgabe des Newsletters zu haben. Ich mag es, dass der primäre Zustellmechanismus E-Mail ist, aber letztendlich sind dies geschriebene Worte, die ich gerne Teil der Website sein lassen würde. Das bedeutet, dass Leute, die keine E-Mails mögen, sie trotzdem lesen können. Es gibt SEO-Wert. Ich kann bei Bedarf darauf verlinken. Für eine Website wie unsere, die eine Publikation ist, fühlt es sich einfach richtig an.

Jetzt, da wir direkt auf der Website schreiben, kann ich <?php the_content() ?> in einer WordPress-Schleife wie jeden anderen Beitrag oder jede andere Seite ausgeben und eine saubere Ausgabe erhalten.

Aber... wir haben das Problem "alt" vs. "neu", dass alte Newsletter HTML-Dumps sind und neue Newsletter Gutenberg sind. Glücklicherweise war das kein allzu großes Problem, da ich genau weiß, wann der Wechsel stattgefunden hat, sodass ich sie nach ID unterschiedlich anzeigen kann. In meiner `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 } ?>

Derzeit zeigen wir die Newsletter hauptsächlich in einer kleinen Fake-Telefon-Oberfläche auf der Newsletter-Seite an, und sie funktioniert für beide gut.

Wie werden sie also tatsächlich versendet?

Da wir die Newsletter nicht mehr in MailChimp erstellen, mussten wir einen anderen Weg finden, sie zu versenden? Nein! MailChimp kann einen Newsletter basierend auf einem RSS-Feed versenden.

Und WordPress ist großartig darin, RSS-Feeds für benutzerdefinierte Inhaltstypen bereitzustellen. Sie können tun...

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

Aber... für uns wollte ich sicherstellen, dass keine dieser alten HTML-Dump-E-Mails in diesem RSS-Feed landen, damit der neue MailChimp-RSS-Feed sie niemals sieht und versehentlich versendet. Also habe ich eine spezielle Seiten-Vorlage erstellt, die einen benutzerdefinierten RSS-Feed ausgibt. Ich dachte, das würde uns die ultimative Kontrolle darüber geben, falls wir sie jemals für noch mehr Dinge benötigen.

<?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>

Styling...

Mit einer MailChimp RSS-Kampagne haben Sie wie bei jeder anderen Kampagne immer noch die Kontrolle über die äußere Vorlage.

Aber dann wird der Inhalt aus dem Feed einfach dort eingefügt. Glücklicherweise ruft ihr Vorschau-Tool den Inhalt für Sie ab, sodass Sie tatsächlich sehen können, wie er aussehen wird.

Und dann können Sie diesen durch Einfügen eines <style>-Blocks in den Editor-Bereich selbst gestalten.

Das gibt uns die gesamte Designkontrolle, die wir für die E-Mail benötigen, und sie ist schön unabhängig davon, wie wir sie auf der Website selbst gestalten.