Peringatan Admin WordPress di Editor Blok

Kami mengirim email minggu lalu yang akhirnya memiliki <video> dalam markup HTML. Kami mengirim buletin dengan membuatnya di sini di editor blok WordPress, yang diambil melalui RSS-to-Mailchimp. Mailchimp dengan patuh mengirimkannya, tetapi HTML sedemikian rupa sehingga benar-benar merusak tata letak. Hal ini menyebabkan beberapa menawan email yang benar-benar adil seperti ini:

Anda benar-benar dapat mengirim <video> dalam email HTML, tetapi sistem kami tidak disiapkan untuk itu. Ini memerlukan beberapa CSS menari mewah (misalnya menyembunyikannya untuk pengguna yang tidak mendukung dengan fallback, dan mendeteksi dukungan sangat rumit, dll.) dan HTML (misalnya memastikan atribut lebar/tinggi ramah layar kecil). Kita bisa melakukannya, tapi saya tidak berpikir itu layak untuk beberapa kali kita ingin melakukannya.

Jadi sebagai gantinya, untuk mencegah kami melakukannya lagi, saya menggunakan (drumroll)…. CSS.

Saya memiliki beberapa CSS yang dimuat di area admin hanya ketika editor blok dimuat, yang ada di plugin fungsionalitas:

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

Saya dapat meletakkan apa pun yang saya inginkan di file CSS itu dan itu akan memengaruhi gaya editor blok tetapi tidak ada apa pun di ujung depan publik situs.

Saya juga ingin memasukkan CSS ini hanya ke halaman buletin. Untungnya, WordPress juga memiliki kelas tubuh di editor. Kami memiliki Jenis Posting Kustom untuk buletin, dan itu mengekspresikan dirinya sebagai kelas di sini:

Jadi saya membuang gaya ini ke dalam:

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

Dan boom, saya memiliki gaya yang memperingatkan tentang masalah ini sebelum terjadi lagi: