如何根据后元数值对所有块应用不同的样式?

时间:2020-05-01 作者:Josiah Sprague

我正在寻找一种方法,将post元数据传递给编辑器中的每个块,以便设计内容的样式。我的实际用例很难简单解释,但为了举例说明,假设它能够根据用户设置的post meta值在黑暗或光明模式下显示post。

对我来说,最明显的方法是在<div class="block-editor"> 类似元素<div class="block-editor dark-editor-mode">. 但我看不出有什么明显的方法可以做到这一点。我通过搜索找到的所有内容都是关于修改各个块的,但我想修改编辑器。这个有钩子吗?JS还是PHP?

2 个回复
最合适的回答,由SO网友:Josiah Sprague 整理而成

我可以通过使用admin_body_class 筛选器将类名添加到<body> 元素,并在样式表中为该类编写选择器。

add_filter( \'admin_body_class\', \'add_status_classes\' );
function add_status_classes( $classes ) {
  $post_meta = get_post_meta( get_the_ID() );
  $is_darkmode = $post_meta[\'_is_post_dark_mode\'];
  if ( $is_darkmode ) {
    $classes = $classes . \' dark-editor-mode\';
  }
  return $classes;
}
/* Normal Styles */
p:after {
  content: "Walking on sunshine!";
}
/* Styles when custom post meta option is true */
.dark-editor-mode p {
  content: "It sure is dark in here!";
}

同样,黑暗模式只是一个简单的例子,因为我的实际用例太复杂,无法在这里解释,但概念是相同的。

不幸的是,此解决方案的缺点是,由于类没有绑定到JavaScript存储,因此在用户更改post-meta设置后,必须刷新编辑器。如果有人知道如何将控制父元素类名的数据存储连接到Gutenberg中的编辑器面板,请添加到我的答案中。

SO网友:Tom J Nowell

Your proposed solution is not possible. 没有允许您将CSS类应用于块列表或样式包装div的挂钩或过滤器,也没有插入CSS类的方法。

这似乎是有意为之,也与未来的工作方式相反,或者与块在一般情况下的工作方式相反(如果帖子元出现在可重用的块帖子中,或者是站点页脚中,而不是页面/帖子中,那么这在内部是如何工作的?)。

如果您必须走这条路线,那么下一步就是在github问题中为gutenberg repo打开一个功能请求,或者编写一个pull请求。

您可以很容易地等待编辑器初始化并从数据存储中获取post meta,但无法设置HTML类以在编辑器级别应用样式。

备选方案包括:

使用您自己的自定义块,并使用包含子块的块通过数据存储检查每个块的post meta,然后根据父块的设置设置子块的样式(这也允许完全消除post meta,并提供全站点编辑和可重用块的功能)

  • 使用块样式(可能块样式的批量设置等同于您想要实现的功能?)