WordPress 块编辑器中的管理员警告

我们上周发送了一封电子邮件，该电子邮件的 HTML 标记中最终包含了一个 <video>。 我们通过 在这里 在 WordPress 块编辑器中创建它来发送时事通讯，该编辑器通过 RSS 到 Mailchimp 获取。 Mailchimp 尽职尽责地将其发送出去，但 HTML 的布局完全乱了。 这导致了一些 迷人 非常公正的电子邮件，例如

实际上可以在 HTML 电子邮件中发送 <video>，但我们的系统没有为此做好准备。 它需要一些巧妙的 CSS（例如，对不支持的用户隐藏它并使用备用方案，检测支持非常棘手等等）和 HTML（例如，确保宽度/高度属性对小屏幕友好）。 我们能做到，但我认为对于我们想做几次来说，这并不值得。

因此，为了防止我们再次这样做，我使用了（敲鼓声）…… CSS。

我有一些 CSS 在 仅当块编辑器加载时加载到管理区域，这在功能插件中。

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

我可以将任何我想放入该 CSS 文件的内容，它将影响块编辑器的样式，但不会影响网站的公共前端。

我还想将此 CSS 的范围仅限于时事通讯页面。 幸运的是，WordPress 在编辑器中也有主体类。 我们有一个时事通讯的自定义帖子类型，它在这里表现为一个类

所以我把这些样式塞进去

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

然后，我有了在问题再次发生之前发出警告的样式