Maison > interface Web > tutoriel CSS > Avertissements d'administration WordPress dans l'éditeur de blocs

Avertissements d'administration WordPress dans l'éditeur de blocs

Christopher Nolan
Libérer: 2025-03-22 09:13:28
original
828 Les gens l'ont consulté

WordPress Admin Warnings in the Block Editor

We sent out an email the other week that ultimately had a

You actually can send

So instead, to prevent us from doing it again, I used (drumroll)…. CSS.

I have some CSS that gets loaded in the admin area only when the block editor is loaded, which is in a functionality plugin:

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')
);
Copier après la connexion

I can put anything I want in that CSS file and it will effect styles of the block editor but nothing on the public front end of the site.

I also wanted to scope this CSS only to the newsletters page. Fortunately, WordPress has body classes in the editor as well. We have a Custom Post Type for newsletters, and that expresses itself as a class here:

So I chuck these styles in:

/* 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;
}
Copier après la connexion

And boom, I have styles that warn about this problem before it happens again:

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal