WordPress区块开发说明 WordPress 5.8 的 API 更新

扩展之前在 WordPress 5.65.7 中实现的块支持,WordPress 5.8 引入了几个新的块标志和新选项来自定义您注册的块。supports

新的支持

color._experimentalDuotone– 为您的区块添加双色调支持是一项新的实验性功能。要进行测试,请将此属性设置为指定要应用双色调的CSS选择器的字符串。例如,在您的块元数据中:

supports: {
    color: {
        _experimentalDuotone: '> .duotone-img'
    }
}

color.link– 添加了对链接颜色的支持,这反映了color.textWP 5.6 中添加的使用和支持。

要在您的块中使用,请在块元数据中添加支持标志:

supports: {
    color: {
        link: true;
    }
}

您可以使用属性定义默认值,theme.json如果存在,它还将使用设置的值。例如:

attributes: {
  style: {
      type: 'object',
      default: {
          color: {
              link: '#FF0000',
          }
      }

稳定支撑API

WordPress 5.7 中的两个实验性功能已在 WordPress 5.8 中稳定下来

  • fontSize 之前 __experimentalFontSize
  • lineHeight 之前 __experimentalLineHeight

有关使用详细信息,请参阅Block Supports API 文档

间距支持已更新和扩展以适用于服务器端块,并添加细粒度支持以单独配置边 ( toprightbottomleft) 的间距。例如:

supports: {
    spacing: {
        margin: true,  // Enable margin UI control.
        padding: true, // Enable padding UI control.
    }
}

以下示例仅配置了top和 的侧面支持bottom

supports: {
    spacing: {
        margin: [ 'top', 'bottom' ], // Enable margin for arbitrary sides.
        padding: true,               // Enable padding for all sides.
    }
}

间距supports可以使用theme.json或它自己的属性来定位特定块。例如,定制topbottom余量为core/separator块:

"styles": {
    "blocks": {
        "core/separator": {
            "spacing": {
                "margin": {
                    "top": "100px",
                    "bottom": "100px"
                }
            }
        }
    }
}

道具@ mkaz和 @ nosolosw 与编译此帮助 开发笔记。

来源:https://make.wordpress.org/core/2021/06/25/block-supports-api-updates-for-wordpress-5-8/

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注