Wordpress:是否可以在块编辑器样式表中将post-type用作css选择器的一部分?

约翰尼斯

我创建了一个Wordpress主题,现在我正在为块编辑器创建一个编辑器样式表,以更好地反映该主题在编辑器中的外观。为此,我需要在那里解决不同的职位类型。

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

现在,后类型的类在页面的主体标签,也是在编辑模式下,但显然编辑样式表CSS是一种“隔离”的方式的应用-其中含有类组合选择是在body标签在编辑器中将无法使用。

因此,我正在寻找在块编辑器中可用的类似内容,以便可以在仅适用于特定后置类型中某些元素的组合选择器中使用它。

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


顺便说一句,我也尝试使用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...
        }
});

但是,尽管至少触发我放置在其中的警报是合乎逻辑的,但是当我加载帖子的编辑页面时,什么都没有发生,其中包含“ post”值的输入元素清晰可见。(?)


另外:尽我所能找到解决方法,我还尝试了该脚本以查看使用编辑器时是否可以检查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块编辑器网页):完全没有警报!为什么???块编辑器Javascript是否阻止/阻止所有其他Javascript?


PS:我之前在StackExchange WordPress开发中发布了这个问题的第一部分,但没有任何反应,所以我在这里尝试...

约翰尼斯

我自己找到了一个解决方案(但是有@ 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添加#editorDIV中,该DIV是块编辑器的外部容器之一。违背了body班,这个元素的类相关的编辑内容,并可以在编辑器stylsheet组合选择使用。

(注意:最初,我试图将类添加到具有类的包装器DIV中edit-post-visual-editor editor-styles-wrapper,但这是行不通的-根本没有添加post-type类。)

一个示例:编辑器样式表中的以下CSS规则现在将适用于编辑器中的所有段落块,但仅当post-type是页面时:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

CSS选择器(id包含文本的一部分)

竖线可以用作球拍中标识符的一部分吗?

我可以将xargs用作目录路径的一部分吗?

Sequelize中的异步获取器/设置器作为属性的一部分

将用户传递的参数用作服务器端执行的shell命令的一部分是否危险?

在MongoDB中将$ addFields用作更新功能的一部分

CSS选择器仅显示第一部分的内容

是否可以在CSS中突出显示colspan列的一部分?

CSS选择器可以搜索单词的一部分吗?

如何在python中将字符串用作变量的一部分

阻止:: after选择器成为链接的一部分?

Dataweave-使用另一个键作为keyName一部分的选择器

ANTLR Lexer规则似乎仅用作解析器规则的一部分,而不是另一个lexer规则的一部分

QT QSS选择器(按ID的一部分)

在编辑器中仅显示文档的一部分

是否可以在外部加载的样式表中修改CSS规则的选择器?

如何调用作为动作侦听器一部分输入到对话框中的信息?

Hadoop MapReduce:是否可以仅将一部分输入数据用作MR作业的输入?

将Guid视为模拟器选择的一部分

Bash进程替换可以用作参数扩展的一部分吗?

ES6模块加载器是否是标准的一部分?

拦截器和装饰器是否是CDI的一部分?

Vi编辑器:删除行的一部分

如何使用 Visual Studio 编辑器替换和保留字符串的一部分

需要日期选择器的值作为变量的一部分

我可以将物理驱动器合并到一个卷中以用作 RAID 的一部分吗?

如何从之前选择的表的一部分中进行选择

规则选择器的一部分是黄色的

使用 JDBC 连接器在 spark 中读取 MySQL 表的一部分