Question

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

我尝试在图像块上应用默认样式，该样式最初可以工作-

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

但是在用户更改自定义下拉列表中的字段后，我需要更新此默认类。更改此下拉菜单后，我将取消注册块样式，然后注册新的默认块样式-但这对其他创建的图像无效（不创建具有更新后的默认样式的图像，仍使用旧版本）。

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

更新默认图像块样式后是否需要刷新编辑器？还是有其他更好的方法？

reference用于更新块样式

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）。我已将默认样式设置为“零售和住宅”，并且可以根据需要进行设置

我仍在上传视频，请检查here

让我知道我是否对任何事情有误解！

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

1 个答案: