WordPress 5.3 新增古腾堡区块样式和示例 API

虎皮椒-个人微信和支付宝支付接口


除了针对古腾堡编辑器的许多改进和功能外,WordPress 5.3还为开发人员提供了新的与区块相关的API。

服务器端块样式变化API


包含了服务器端帮助程序来简化注册和取消注册区块样式。


以前,为了注册区块样式,需要编写一个JavaScript脚本来执行注册并确保脚本已正确排队引入。在WordPress 5.3,你可以在整个过程中使用PHP函数register_block_styleunregister_block_style来操作。

register_block_style


register_block_style 函数将区块的名称作为第一个参数,将描述样式属性的数组作为第二个参数。


样式数组的属性必须包含名称和标签( label ):

  • name:用于计算CSS类的样式的标识符。
  • label:可供人识别的名称。

除了两个必需属性之外,styles 属性数组还应包括 inline_style 或 style_handle 属性:

  • inline_style:包含内联CSS代码,用于注册样式所需的CSS类。
  • style_handle:包含已注册样式的句柄(handle),该样式应在需要区块样式的地方排队引入。

下面的代码示例为名为“ Blue Quote”的引用区块注册了一种样式,并提供了一种内联样式,使“ Blue Quote”样式的引用区块具有蓝色:


register_block_style(
\'core/quote\',
array(
\'name\' => \'blue-quote\',
\'label\' => __( \'Blue Quote\' ),
\'inline_style\' => \'.wp-block-quote.is-style-blue-quote { color: blue; }\',
)
);

或者,如果已经注册了包含样式变化CSS的样式表,则可以仅传递样式表的句柄,以便 register_block_style 函数可以确保其正确引入。


wp_register_style( \'myguten-style\', get_template_directory_uri() . \'/custom-style.css\' );

register_block_style(
\'core/quote\',
array(
\'name\' => \'fancy-quote\',
\'label\' => \'Fancy Quote\',
\'style_handle\' => \'myguten-style\',
)
);

unregister_block_style


unregister_block_style 允许注销先前使用 register_block_style 在服务器上注册的区块样式。


该函数的第一个参数是区块的注册名称,而样式的名称则作为第二个参数。


下面的代码示例从引用区块中注销名为“ fancy-quote”的样式:


unregister_block_style( \'core/quote\', \'fancy-quote\' );
重要提示:函数 unregister_block_style 仅注销使用 register_block_style 在服务器上注册的样式。该函数不会取消注册使用客户端代码注册的样式。

区块示例 API


WordPress 5.3 还新增了在插入库之前预览库中块的功能。这可以帮助用户一目了然地确定要插入的块。


要在自定义块中支持此功能,请确保在块设置中定义example属性。


const blockSettings = {
// ... other settings

example: {
attributes: {
content: __( \'Content of the block\' )
},
innerBlocks: []
}

}

registerBlockType( name, settings );


更多信息请看: https://make.wordpress.org/core/2019/09/24/new-block-apis-in-wordpress-5-3/


拓展阅读:WordPress Gutenberg Block API

测试
喔喔竹 » WordPress 5.3 新增古腾堡区块样式和示例 API

提供最优质的资源集合

立即查看 了解详情
©2019|喔喔竹www.oozhu.com|粤ICP56421396号