javascript - Wordpress:是否可以在 block 编辑器样式表中使用 post-type 作为 CSS 选择器的一部分？

Question

我创建了一个 Wordpress 主题，现在我正在为 block 编辑器制作一个编辑器样式表，以更好地反射(reflect)编辑器中主题的外观。为此，我需要能够在那里处理不同的帖子类型。

对于前端，有 body_class()要在模板中使用的函数，它插入 - 其中 - 一个标识帖子类型的类，并且可以在组合选择器中使用以仅在特定的帖子类型中处理某些元素。

现在，post-type 类在页面的 body 标签中，也处于编辑模式，但显然 editor-stylesheet CSS 以一种“孤立”的方式应用 - 组合选择器包含在 body 标签中的类在编辑器中不起作用。

所以我正在寻找可以在 block 编辑器中使用的类似东西，以便我可以在组合选择器中使用它，这些选择器仅适用于特定帖子类型中的某些元素。

任何想法如何做到这一点？

顺便说一句，我还尝试使用 Javascript/jQuery 检查帖子类型:

wp.domReady(function() {
        var postType = jQuery('form.metabox-base-form input#post_type').attr('value');
        if(postType == 'post'){
            alert("It's a post!");//in real life some other action...
        }
});

但是，尽管至少触发我放在那里的警报是合乎逻辑的，但当我加载帖子的编辑页面时，什么都没有发生，其中包含其“帖子”值的输入元素清楚地存在。 (？)

另外:尽我所能找到解决方法，我还尝试了这个脚本，看看我在使用编辑器时是否可以检查 body 类:

jQuery(document).ready(function() {
    if(jQuery('body').hasClass('post-type-page')) {
        alert("It's a page!");
    } else {
        alert("It's not a page");
    }
});

编辑器页面上的结果(即显示 WP block 编辑器的网页):根本没有警报!为什么？？？ block 编辑器 Javascript 是否会阻止/阻止所有其他 Javascript？

P.S.:我之前在 StackExchange WordPress 开发上发布了这个问题的第一部分，但根本没有任何 react ，所以我在这里尝试......

Answer 1

我自己找到了一个解决方案(但有来自@JobiWon9178 的提示 - 谢谢!!!)。不是纯 CSS，而是涉及一些 JS/jQuery。这是一个类似于我已经在问题中发布的脚本，具有必要的附加功能，可以动态地将类添加到相关的 HTML 元素:

$(document).ready(function() {
    if($('body').hasClass('post-type-page')) {
        $('#editor').addClass('post-type-page');
    } else if($('body').hasClass('post-type-post')) {
        $('#editor').addClass('post-type-post');
    }
});

这增加了相关的 post-type-xxxx类到 #editor DIV，它是 block 编辑器的外部容器之一。与 body相反类，该元素的类与编辑器内容相关，可以在编辑器样式表中的组合选择器中使用。

(注意:最初我尝试将该类添加到具有类 edit-post-visual-editor editor-styles-wrapper 的包装器 DIV 中，但这不起作用 - 根本没有添加 post-type 类。)

示例:编辑器样式表中的以下 CSS 规则现在将应用于编辑器中的所有段落 block ，但仅当文章类型为页面时:

.post-type-page .wp-block-paragraph {
   /* (CSS settings here) */
}

@JobiWon9178 在评论中指出的一个重要细节:上面的 jQuery 脚本必须使用 admin_enqueue_scripts 添加。 ，不与前端的脚本一起使用。所以我将该脚本放入一个名为 admin_scripts.js 的文件中。并将其排入 functions.php 中，如下所示:

function my_admin_scripts($hook) {
    if ( 'post.php' != $hook ) {
        return;
    }
    wp_register_script('adminscripts', get_template_directory_uri() . '/js/admin_scripts.js', '', null, true);
    wp_enqueue_script('adminscripts');
}
add_action( 'admin_enqueue_scripts', 'my_admin_scripts' );

这就是我的工作解决方案。如果有人仍然想出一个纯 CSS 解决方案，我会很高兴，但我想现在(即在 Wordpress 5.3 中)没有纯 CSS 的方法。