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

Question

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

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

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

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

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

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

更新块样式的参考

Answer 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）我已将默认样式设置为“零售和住宅”，其工作方式如您所愿

我仍在上传视频，请检查这里

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