我可以使用 Javascript 更新 Wordpress 编辑器中的默认类吗？答案

【问题标题】：Can I use Javascript to update a default class in the Wordpress Editor?我可以使用 Javascript 更新 Wordpress 编辑器中的默认类吗？
【发布时间】：2020-03-23 10:53:41
【问题描述】：

在 WordPress Gutenberg 编辑器中，我尝试以编程方式在图像块上设置默认类，无需用户通过“附加 CSS”字段手动添加即可应用。

我已尝试在图像块上应用默认样式，该样式最初有效 -

wp.blocks.registerBlockStyle( 'core/image', {
  name: 'retailResidential',
  label: 'Retail & Residential',
  isDefault: true
});

但我需要在用户更改自定义下拉列表中的字段后更新此默认类。当此下拉列表更改时，我将取消注册块样式，然后注册新的默认块样式 - 但它对额外创建的图像没有影响（不使用更新的默认样式创建图像，仍然使用旧的）。

wp.blocks.unregisterBlockStyle(
  'core/image',
  [ 'retailResidential', 'weddingsEvents', 'advertisingEditorial']
);

更新默认图片块样式后是否需要刷新编辑器？还是有其他更好的方法来做到这一点？

reference 用于更新块样式

【问题讨论】：

我可以知道您要从编辑器创建哪种样式的图像吗？
图像被创建为图像块，使用 WordPress 5.0+ Gutenberg。它正在添加到页面中。
哦，我知道，但您会看到有默认和圆形遮罩样式，但在您的情况下，您应用的是哪种图像样式？
查看链接 (prnt.sc/q5yrls) 我已将样式应用为图像上的顶部三角形
对，我已经删除了两个默认样式（默认和圆形蒙版），我尝试添加一个自定义样式（'retailResidential'、'weddingsEvents' 或 'advertisingEditorial'），设置为默认（即用户不必点击它，它在创建图像时应用到图像）。

标签： javascript wordpress advanced-custom-fields wordpress-gutenberg

【解决方案1】：

我已经按照您的要求进行了工作，为此我做了以下事情：我正在研究二十二十个主题

1) 在 javascript 文件中 editor-script-block.js

wp.domReady( function() {
  wp.blocks.unregisterBlockStyle( 'core/image', 'circle-mask' );
} );

wp.domReady( function() {
  wp.blocks.unregisterBlockStyle( 'core/image', 'default' );
} );

wp.domReady(function(){
     wp.blocks.registerBlockStyle( 'core/image', {
        name: 'retailResidential',
        label: 'Retail & Residential',

      });

      wp.blocks.registerBlockStyle( 'core/image', {
        name: 'weddingsEvents',
        label: 'Wedding & Events',
      });

      wp.blocks.registerBlockStyle( 'core/image', {
        name: 'advertisingEditorial',
        label: 'Advertising & Editorial'

      });
});

现在我要为图像添加一些样式 css，就像我想在图像上添加顶部三角形到“retailResidential”样式请参见此处的图像（https://prnt.sc/q6esxq），因为我还必须为后端和前端应用 css因为有不同的类应用所以

管理端

<style>
.is-style-retailResidential >div > div.components-resizable-box__container:after {
    content: '';
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid #170606;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translatex(-50%);
}
</style>

前端

<style>
.is-style-retailResidential{
    position: relative;
}
.is-style-retailResidential:after {
    content: '';
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid #170606;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translatex(-50%);
}

</style>

对于设置样式是默认设置，您使用了自定义字段插件，但 wordpress 已经提供选项，请参见此处（https://prnt.sc/q6ew4k）我已将默认样式设置为“零售和住宅”，它可以按照您的需要工作

我还在上传视频，请查看here

如果我有什么误解，请告诉我！

【讨论】：