WordPress Admin Warnings in the Block Editor

An email newsletter built inside the WordPress block editor caused a layout disaster when it went out. The underlying HTML contained a <video> tag, and while the RSS-to-Mailchimp pipeline faithfully transmitted the content, the markup broke the email's design completely.

Technically, <video> can work in HTML email, but it requires elaborate CSS and HTML workarounds—hiding the element for unsupported clients, providing fallbacks, and wrestling with responsive width and height attributes. That complexity isn't worth the effort for rare use cases, so a different approach was needed: prevention through CSS.

This email looks like trash in thunderbird, just giving a heads up.

The solution loads CSS in the admin area only when the block editor is active, via a functionality plugin. That stylesheet can alter the editor's appearance without touching the public front end of the site.

wp_register_style(
  'css-tricks-code-block-editor-css',
  plugins_url('location/of/styles.css', dirname( __FILE__ )),
  array('wp-edit-blocks'),
  filemtime( plugin_dir_path(__DIR__) . 'location/of/styles.css')
);

To keep those styles scoped to just the newsletter content, WordPress body classes come into play. The Custom Post Type for newsletters exposes a distinct class in the editor, enabling targeted rules.

With the scoping in place, warnings can be styled directly into the editing experience:

/* Warn about videos in newsletters */
.post-type-newsletters .wp-block-video {
  border: 5px solid red;
}
.post-type-newsletters .wp-block-video::before {
  content: "WARNING: NO VIDEOS IN EMAILS";
  display: block;
  color: red;
}