Wordpress：是否可以在块编辑器样式表中使用 post-type 作为 css 选择器的一部分？

Question

我创建了一个 Wordpress 主题，现在我正在为块编辑器制作一个编辑器样式表，以更好地反映编辑器中的主题外观。为此，我需要能够解决其中的不同 post 类型。

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

现在，post-type class 是在页面的正文标签中，也在编辑模式下，但显然是编辑器样式表CSS 以一种 "isolated" 的方式应用 – 包含正文标签中的 classes 的组合选择器在编辑器中不起作用。

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

知道怎么做吗？

顺便说一句，我还尝试使用 Javascript/jQuery:

检查 post 类型

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...
        }
});

但是尽管至少触发我放入其中的警报是合乎逻辑的，但是当我加载 post 的编辑页面时没有任何反应，其中包含其 "post" 值的输入元素显然存在。 (?)

补充：尝试一切我能想到的解决方案，我还尝试了这个脚本，看看我是否可以在使用编辑器时检查正文 classes:

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

编辑器页面上的结果（即显示 WP 块编辑器的网页）：完全没有警报！为什么？？？块编辑器 Javascript block/prevent 所有其他 Javascript?

P.S.: 我之前在 StackExchange WordPress 开发上 post 编辑了这个问题的第一部分，但没有任何反应，所以我在这里尝试...

Answer 1

我自己找到了解决方案（但@JobiWon9178 提供了提示 - 谢谢！！！）。不纯粹CSS，但涉及一些JS/jQuery。这是一个类似于我已经在问题中 post 编辑的脚本，添加了必要的添加以动态添加 classes 到相关的 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 class 添加到 #editor DIV，这是块编辑器的外部容器之一。与 body classes 相反，此元素 的 classes 与编辑器内容相关，可以在组合选择器中使用编辑器样式表。

（注意：最初我尝试将 class 添加到具有 classes edit-post-visual-editor editor-styles-wrapper 的包装器 DIV 中，但这行不通 - post-type class 根本没有被添加。）

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

.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-only 方法。

Answer 2

我完全可以做到这一点 CSS。您确定您的 CSS 已正确添加吗？

add_action('admin_head', 'my_custom_fonts');
function my_custom_fonts() {
      echo '<style>
              .post-type-page .wp-block-paragraph {
                   font-size: 5rem;
               }
      </style>';
 }

如果我进入编辑器，这一段文本只在一个页面下被修改。

这是运行 WP 5.3.2。

add_editor_style 在技术上用于自定义 TinyMCE。

在 WP 5.0 中添加了使用 enqueue_block_editor_assets 来为块添加样式和功能。

https://developer.wordpress.org/reference/hooks/enqueue_block_editor_assets/

编辑： CSS只有版本

function custom_block_editor_styles() {
    wp_enqueue_style( 'legit-editor-styles', get_theme_file_uri( '/css/style-editor.css' ), false, '1.0', 'all' );
}
add_action( 'enqueue_block_editor_assets', 'custom_block_editor_styles' );

Wordpress：是否可以在块编辑器样式表中使用 post-type 作为 css 选择器的一部分？

Wordpress: Is it possible to use post-type as part of a css selector in block editor stylesheet?

javascript

css

wordpress

gutenberg-blocks