Peringatan Admin WordPress di Editor Blok

Kami mengirim email minggu lalu yang akhirnya memiliki <video> di 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. Ini mengarah ke beberapa email menawan yang benar-benar adil seperti ini:

Email ini terlihat seperti sampah di thunderbird, hanya memberi peringatan.

Anda sebenarnya 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). Kami bisa melakukannya, tapi saya tidak berpikir itu layak untuk beberapa kali kami 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:


Posting WordPress Admin Warnings in the Block Editor muncul pertama kali di CSS-Tricks . Anda dapat mendukung Trik-CSS dengan menjadi Pendukung MVP .

July 17, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *