WordPress Admin-Warnungen im Block Editor

Wir haben letzte Woche eine E-Mail versendet, die letztendlich ein <video> im HTML-Markup enthielt. Wir versenden den Newsletter, indem wir ihn hier im WordPress Block-Editor erstellen, der über RSS-to-Mailchimp abgerufen wird. Mailchimp hat ihn pflichtbewusst versendet, aber das HTML war so beschaffen, dass es das Layout komplett ruiniert hat. Dies führte zu einigen charmanten absolut fairen E-Mails wie dieser

Man kann tatsächlich <video> in HTML-E-Mails senden, aber unser System ist einfach nicht dafür eingerichtet. Es erfordert einige ausgefallene CSS-Tricks (z. B. Verbergen für nicht unterstützende Benutzer mit einem Fallback und die Erkennung der Unterstützung ist extrem schwierig usw.) und HTML (z. B. Sicherstellen, dass die Breiten-/Höhenattribute bildschirmfreundlich sind). Wir könnten es tun, aber ich glaube nicht, dass es sich für die wenigen Male, in denen wir es tun wollen würden, lohnt.

Stattdessen habe ich, um zu verhindern, dass wir es wieder tun, (Trommelwirbel) ... CSS verwendet.

Ich habe etwas CSS, das nur im Admin-Bereich geladen wird, wenn der Block-Editor geladen ist, was in einem Funktionalitäts-Plugin enthalten ist.

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')
);

Ich kann alles, was ich möchte, in diese CSS-Datei schreiben, und es wird die Stile des Block-Editors beeinflussen, aber nichts auf der öffentlichen Frontend-Seite der Website.

Ich wollte dieses CSS auch nur auf die Newsletter-Seite beschränken. Glücklicherweise hat WordPress auch im Editor Body-Klassen. Wir haben einen Custom Post Type für Newsletter, und dieser drückt sich hier als Klasse aus

Also füge ich diese Stile ein

/* 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;
}

Und zack, ich habe Stile, die vor diesem Problem warnen, bevor es wieder passiert.