hi,你好!欢迎访问本站!登录
本站由网站地图腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 教程 - cms - 正文 君子好学,自强不息!

【WordPress建站】WordPress 5.3 新增古腾堡区块样式和示例 API

2019-11-13cms搜奇网26°c
A+ A-

文章目录[隐藏]

  • 服务器端块样式变化API
    • register_block_style
    • unregister_block_style
  • 区块示例 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() . 'https://static.ki4.cn/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

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
【WordPress建站】WordPress 5.3 新增古腾堡区块样式和示例 API

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
未定义标签

本文来源:搜奇网

本文地址:https://www.sou7.cn/281514.html

关注我们:微信搜索“搜奇网”添加我为好友

版权声明: 本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。请记住本站网址https://www.sou7.cn/搜奇网。

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>