A Gutenburg-Powered Newsletter

This article details how CSS-Tricks migrated its newsletter creation from MailChimp to Gutenberg, improving content management and workflow. The author highlights the benefits of a block-based editor for newsletter creation, contrasting it with the previous method of pasting HTML directly into a custom post type.

The transition leveraged the "Gutenberg Ramp" plugin, enabling Gutenberg for newsletters (a custom post type) without affecting other site sections. Initially, the author aimed to selectively activate Gutenberg only for newsletters created after a specific date or ID, but this feature remains under development.

The previous workflow involved crafting newsletters in MailChimp, then copying and pasting the generated HTML into the WordPress database. This resulted in unwieldy, difficult-to-manage content, viewable only within an <iframe></iframe>.

Now, authors create newsletters directly within Gutenberg, enjoying the benefits of a block-based interface. This approach streamlines content creation and allows for cleaner, more easily reusable content.

Displaying newsletters on the site utilizes <?php the_content() ?> for Gutenberg-created newsletters and an <iframe></iframe> for older, HTML-based content. A conditional check based on post ID distinguishes between the two content types. The single-newsletters.php file manages this conditional rendering.

Newsletter distribution continues via MailChimp's RSS feed functionality. However, to prevent older, HTML-based newsletters from being included in the feed, a custom page template generates a filtered RSS feed, ensuring only Gutenberg-created newsletters are sent. This custom template excludes newsletters before a specified date.

The custom RSS feed's output is controlled by a custom page template, providing granular control over the feed's content. The code snippet for this template is included.

MailChimp's campaign editor allows for styling the email's outer template, while the content from the RSS feed is seamlessly integrated. The MailChimp preview tool helps visualize the final email appearance. Additional styling can be applied directly within the MailChimp editor.

This migration to Gutenberg offers a more efficient and maintainable system for managing CSS-Tricks' newsletters, enhancing both the authoring experience and the overall site's content management.

The above is the detailed content of A Gutenburg-Powered Newsletter. For more information, please follow other related articles on the PHP Chinese website!