@wordpress/块库

WordPress编辑器的块库。

安装

安装模块

npm install@wordpress/block-library--保存

此包假定您的代码将在2015年+环境。如果您使用的环境对此类语言功能和API的支持有限或不支持,您应该包括polyfill发货@wordpress/babel预设在代码中。

美国石油学会

寄存器核心块

用于注册块编辑器提供的核心块的函数。

用法

从“@wordpress/block库”导入{registerCoreBlocks};寄存器核心块();

参数

  • 阻碍 阵列:正在注册的核心块的可选数组。

注册单个块

  1. 当您只关心在导入文件时注册块时:
    导入“@wordpress/block-library/build-module/verse/init”;
  2. 如果要在块自动注册后使用对块的引用:
    从“@wordpress/block-library/build-module/verse/init”导入verseBlock;
  3. 当您需要完全控制块注册的时间时:
    从“@wordpress/block-library/build-module/verse”导入{init};const verseBlock=init();

参与此包

这是古腾堡项目的一部分。该项目组织为单回购。它由多个独立的软件包组成,每个包都有特定的用途。此monorepo中的包发布到净现值并由使用WordPress(文字出版社)以及其他软件项目。

要了解更多关于对这个包或古腾堡整体贡献的信息,请阅读该项目的主要内容投稿人指南.

添加新块

⚠️ 将新块添加到此包要求其他步骤!

  1. 不要忘记在索引.js此包的文件。例如,如果要添加名为核心/闪烁段落,您必须添加以下内容:
    //包/block-library/src/index.js将*作为blinkingParagraph从'导入/闪烁段落';

    然后添加闪烁的段落到中的列表获取所有块()功能。

    如果是实验性的,请将以下属性添加到块.json:

    {“__experimental”:“true”}
  2. 在中注册块gutenberg_register_core_block_types()的功能库/块.php文件。将其添加到块文件夹数组(如果它是静态块或发送至块名称(_N)数组(如果它是动态块.

  3. 添加初始化.js文件到新块的目录:

    /***内部依赖性*/从“./”导入{init};导出默认init();

    当使用选项从@wordpress/块库包裹。

  4. 如果视图.js文件(或前缀为看法,例如。视图示例.js)在块的目录中,此文件将与其他资源一起构建,以便可以从浏览器中加载。您只需要引用视图.min.js(注意不同的文件扩展名)文件块.json文件如下:

    {“viewScript”:“文件:./view.min.js”}

    当前端存在静态块时,此文件将自动加载。对于动态块,需要手动将视图脚本排队渲染器回调块的,例如:

    函数render_block_core_blinking_paragraph($attributes,$content){$should_load_view_script=!空($attributes['isInteractive'])&&!wp_script_is(“wp-block-blinking-paragraph-view”);if($should_load_view_script){wp_enque_script('wp块闪烁段落视图');}return$content;}

PHP函数的命名约定

属性的子目录中声明的所有PHP函数名packages/block-library/src包/目录应以下列前缀之一开头:

  • 块核心<目录名称>
  • render_block_core_<目录名>
  • 寄存器块核心<目录名>

在这种情况下,<目录名>表示相应目录的名称.php文件文件已定位。
目录名将转换为小写,除字母和数字外的任何字符都将替换为下划线。

例子:

对于在包/block-library/src/my-block/index.php文件,正确的前缀应该是:

  • 块_核心_块
  • 渲染块渲染块
  • 寄存器块_核心块

使用插件特定的前缀/后缀

与中不同/lib目录中的PHP代码,通常应避免应用特定于插件的前缀/后缀,例如古腾堡_块PHP文件中的函数和其他代码。

然而,有时块可能需要使用Gutenberg函数,即使存在Core等效项,例如,Gutenbergfunction依赖于仅在插件中可用的代码。

在这种情况下,您可以使用相应的Core水处理_函数,并将其名称添加到Webpack配置文件中带前缀的函数列表.

在构建时,Webpack将搜索水处理_函数,并将其替换为古腾堡_等效物。此过程确保插件调用古腾堡_函数,但块仍将调用Core水处理_当更新被反向移植时,函数。

Webpack假定,撇开前缀不谈,函数的名称是相同的:wp_get_something_useful()将替换为gutenberg_get_something_useful().