如何在内部块模板中定义块样式

时间：2021-09-16 作者：StudioAl

我正在使用以下语法构建Innerblocks块模板（在PHP中）：

$template = [
    [
        \'core/heading\', 
        [
          \'level\' => 1,
          \'content\' => \'Example Heading.\',
          \'align\' => \'center\'
        ],
    ],
  [
        \'core/button\', 
        [
          \'text\' => \'Button 1\',
          \'align\' => \'center\',
          \'style\' => \'outline\', // <-- this doesn\'t work
        ],
    ]
];
它基本上按预期工作，但我无法确定用于定义块样式的语法（或者是否支持）。例如，我希望按钮使用；大纲“；样式而不是其默认值；“填充”；风格我尝试了如上所示的方法，还尝试了以下方法：styles => [\'name\' => \'outline\'] 响应核心/按钮对象的结构，但两者都不起作用。

1 个回复
最合适的回答,由SO网友:Sally CJ 整理而成

我无法确定用于定义块样式的语法（或者是否受支持）。例如，我希望按钮使用；大纲“；样式而不是其默认值；“填充”；风格

是的，它是受支持的，语法也很简单。

摘自block styles documentation:

块样式允许将替代样式应用于现有块。它们通过添加className 到块的包装器。这className 如果选择了块样式，可用于为块提供替代样式。请参见Getting Started with JavaScript tutorial完整示例。

示例：

wp.blocks.registerBlockStyle( \'core/quote\', {
  name: \'fancy-quote\',
  label: \'Fancy Quote\',
} );
上面的示例注册了一个名为fancy-quote 到core/quote 块当用户从样式选择器中选择此块样式时is-style-fancy-quote 类名将添加到块的包装器中。

所以你只需要添加className 具有值is-style-<style name> 到模板属性，如core/button 块和轮廓样式(is-style-outline):

[
    \'core/button\',
    [
        \'text\'      => \'Button 1\',
        \'align\'     => \'center\',
        \'className\' => \'is-style-outline\', // add is-style-<style name> to the class list
    ],
]
尝试（&T）；在WordPress 5.8.1中测试工作-参见style.scss 对于其他核心样式，如is-style-squared. （然而，该链接是针对GitHub repo中的“master”分支的，因此那里的样式可能在当前的WordPress发布中还不可用）

标签： block-editor   小码农  

相关推荐