WordPress公开了几个API，允许您修改现有块的行为。
WordPress中的块通常使用“block.json”元数据在服务器端和客户端注册。在使用PHP在服务器上和使用JavaScript在客户端注册块设置时，可以使用以下筛选器修改或扩展块设置。要了解更多信息，请参阅区块登记指南。
筛选从块.json使用PHP在服务器上注册块类型时，请使用。它允许在处理元数据之前应用修改。
此筛选器的回调函数接收一个参数：
$元数据(阵列)：元数据加载自块.json用于注册块类型。
以下示例设置api版本所有块的2.
函数示例filter_metadata_registration（$metadata）{$metadata['apiVersion']=2；返回$metadata；};add_filter（'块类型元数据'，'示例过滤器元数据注册'）；
下面是一个更健壮的示例，它禁用了标题块的背景色和渐变支持。这个块类型元数据过滤器非常适合策划编辑体验.
函数示例disable_heading_background_color_and_gradients（$metadata）{//仅将过滤器应用于标题块。if（！isset（$metadata['name']）||'核心/标题'！==$元数据[“名称”]）{返回$metadata；}//检查“supports”键是否存在。if（isset（$metadata[“supports”]）&&isset（$metadata['“supports'][“color”]））{//删除背景色和渐变支持。$metadata['supports']['color']['背景']=false；$metadata['supports']['color']['渐变']=false；}返回$metadata；}add_filter（“块类型元数据”，“示例禁用标题背景颜色和渐变色”）；
过滤根据已处理的块类型元数据确定的设置。它可以使用默认情况下未处理的块元数据应用自定义修改。
此筛选器的回调函数接收两个参数：
$设置(阵列)：用于注册块类型的已确定设置的数组。$元数据(阵列)：从加载的元数据块.json文件。
以下示例增加了api版本对于所有区块1.
函数示例filter_metadata_registration（$settings，$metadata）{$settings['api_version']=$metadata['apiPiVersion']+1；返回$settings；};add_filter（'块类型元数据设置'，'示例过滤器元数据注册'，10，2）；
过滤块的参数数组($个参数)就在块类型在服务器上正式注册之前。
此筛选器的回调函数接收两个参数：
$个参数(阵列)：用于注册块类型的参数数组。$块类型(一串)：包含命名空间的块类型名称。
寄存器块类型参数是可用的最底层的PHP过滤器，它将适用于服务器上注册的每个块。服务器上定义的所有设置都会传播到客户端，优先级高于客户端中设置的优先级。
以下代码将禁用段落、标题、列表和列表项块的颜色控件。
函数示例disable_color_for_specific_blocks（$args，$block_type）{//要修改的块类型列表。$block_types_to_modify=[“核心/段落”，'核心/标题'，'核心/列表'，'核心/列表项'];//检查当前块类型是否在列表中。if（in_array（$block_type，$block-types_to_modify，true））{//禁用颜色控件。$args['supports']['color']=数组(“text”=>假，“background”=>假，“链接”=>false，);}返回$args；}add_filter（'寄存器块类型参数'，'示例禁用颜色或特殊块'，10，2）；
使用JavaScript在客户端注册块时，用于筛选块设置。它接收块设置、已注册块的名称以及null或已弃用的块设置（应用于已注册的弃用）作为参数。此过滤器也适用于每个块的弃用设置。
以下示例确保使用规范生成的类名保存List块(wp-块列表):
函数addListBlockClassName（设置，名称）{if（name！=='core/list'）{返回设置；}返回{…设置，支架：{…设置支持，className:true，},};}wp.hooks.add过滤器('块.registerBlockType'，'我的插件/类名/列表块'，添加列表块类名);
以下PHP过滤器可用于更改前端块的输出。
过滤任何块的前端内容。此过滤器对编辑器中块的行为没有影响。
此过滤器的回调函数接收三个参数：
$块内容(一串)：块内容。$块(阵列)：完整块，包括名称和属性。$实例(WP_块)：块实例。
在以下示例中，类示例类添加到前端的所有段落块中。这里是HTML API用于轻松添加类，而不是依赖正则表达式。
函数示例add_custom_class_to_paragraph_block（$block_content，$block）{//检查该块是否为段落块。if（“核心/段落”===$block['blockName']）{//使用HTML API将自定义类添加到块内容中。$processor=新的WP_HTML_Tag_processor（$block_content）；if（$processor->next_tag（'p'））{$processor->add_class（'example-class'）；}return$processor->get_updated_html（）；}返回$block_content；}add_filter（'渲染块'，'示例_add_custom_class_to_paragraph_block'，10，2）；
过滤定义块的前端内容。这只是一种更简单的形式render_block（渲染块）当您只需要修改特定块类型时。
此过滤器的回调函数接收三个参数：
$块内容(一串)：块内容。$块(阵列)：完整块，包括名称和属性。$实例(WP_块)：块实例。
在以下示例中，类示例类添加到前端的所有段落块中。请注意，与render_block（渲染块）在上面的示例中，您不再需要在修改内容之前检查块类型。再一次HTML API使用而不是正则表达式。
函数示例add_custom_class_to_paragraph_block（$block_content，$block）{//使用HTML API将自定义类添加到块内容中。$processor=新的WP_HTML_Tag_processor（$block_content）；if（$processor->next_tag（'p'））{$processor->add_class（“示例类”）；}return$processor->get_updated_html（）；}add_filter（“render_block_core/paragraph”，“example_add_custom_class_to_paragraph_block”，10，2）；
以下JavaScript过滤器可用于在编辑器中编辑时更改块的行为。
应用于块结果的筛选器节约功能。此过滤器用于替换或扩展元素，例如使用反应克隆元素修改元素的属性、替换其子元素或返回一个全新的元素。
此过滤器的回调函数接收三个参数：
要素(对象)：要修改和返回的元素。块类型(对象)：块类型定义对象。属性(对象)：块的属性。
以下示例将Cover块包装在外部容器中div公司.
函数wrapCoverBlockInContainer（元素、块类型、属性）{//如果元素未定义，则跳过。if（！元素）{回报；}//仅适用于盖块。if（blockType.name！==“核心/覆盖”）{回流元件；}//返回包装在div中的元素。return{element}；}wp.hooks.add过滤器('块.getSaveElement'，“my-plugin/wrap-cover-block-in-container”，包装封隔器);
适用于返回WP元素的所有块的过滤器节约功能。此筛选器用于向节约功能。例如，您可以为此元素添加className、id或任何有效的prop。
此过滤器的回调函数接收三个参数：
道具(对象)：当前节约要修改和返回的元素的属性。块类型(对象)：块类型定义对象。属性(对象)：块的属性。
以下示例在默认情况下为所有块添加红色背景。
函数addBackgroundColorStyle（道具）{返回{…道具，style:{backgroundColor:'red'}，};}wp.hooks.add过滤器(“blocks.getSaveContent.extraProps”，“my-plugin/add-background-color-style”，添加背景颜色样式);
注：A类块验证如果此过滤器在下次编辑文章时修改现有内容，则会发生错误。编辑器验证文章中存储的内容是否与保存（）功能。
要避免此验证错误，请使用render_block（渲染块）服务器端修改现有的帖子内容，而不是此过滤器。请参见render_block文档.
为块生成的HTML类遵循wp-block-{name}命名法。此筛选器允许提供备用类名。
//我们的过滤功能。函数setBlockCustomClassName（className，blockName）{return blockName===“核心/代码”？'my-plugin-code'：className；}//添加过滤器。wp.hooks.add过滤器('块.getBlockDefaultClassName'，“my-plugin/set-block-custom-class-name”，设置块自定义类名);
用于过滤块变换的单个变换结果。由于转换是多对多的，而不是一对一的，所以传递了所有原始块。
在块属性的默认解析之后和验证之前立即调用，以允许插件及时操作属性值以进行验证和/或在编辑器中呈现块的初始值。
用于修改块的编辑组件。它接收原始块块编辑组件并返回一个新包装的组件。
以下示例为所有块添加了一个新的“检查器”面板。
const{createHigherOrderComponent}=wp.compose；const{InspectorControls}=wp.blockEditor；const{PanelBody}=wp.components；const withMyPluginControls=createHigherOrderComponent（（BlockEdit）=>{返回（道具）=>{返回(<><BlockEdit key=“edit”{…props}/><检验员控制><PanelBody>我的自定义控件</InspectorControls></>);};}，'使用我的插件控件'）；wp.hooks.add过滤器('编辑器。块编辑'，'我的插件/带监控'，使用MyPluginControls);
请注意，当此挂钩运行时所有块使用它有可能导致性能退化，特别是在块选择指标方面。
为了缓解这种情况，请考虑是否可以将您执行的任何工作更改为仅在特定条件下运行。
例如，假设您添加的组件只需要在块处于挑选出来的在这种情况下，可以使用块的“选定”状态(道具.is已选择)以限制渲染。
以下示例为所有块添加了一个新的Inspector面板，但仅当选择块时。
const withMyPluginControls=createHigherOrderComponent（（BlockEdit）=>{返回（道具）=>{返回(<><BlockEdit{…props}/>{props.is已选择&&(<检查员控制><PanelBody>我的自定义控件</InspectorControls>) }</>);};}，'使用我的插件控件'）；
用于修改包含块的包装组件编辑组件和所有工具栏。收到原件块列表块组件并返回一个新包装的组件。
以下示例为所有块添加唯一的类名。
const{createHigherOrderComponent}=wp.compose；const withClientIdClassName=创建HigherOrderComponent(（块列表块）=>{返回（道具）=>{返回(<块列表块{…道具}className={“块-”+props.clientId}/>);};},'带ClientIdClassName');wp.hooks.add过滤器('编辑器。块列表块'，“my-plugin/with-client-id-class-name”，带有ClientIdClassName);
可以使用包装器道具返回组件的属性，如下例所示。
const{createHigherOrderComponent}=wp.compose；const withMyWrapperProp=createHigherOrderComponent（（块列表块）=>{返回（道具）=>{const wrapperProps={…道具.wrapperProps，“data-my-property”：“值”，};return<BlockListBlock{…props}wrapperProps={wrapperProps}/>；};}，'使用MyWrapperProp'）；wp.hooks.add过滤器('编辑器。块列表块'，“my-plugin/with-my-wrapper-prop”，使用MyWrapperProp);
用于修改即使在锁定模板中使用也应启用的块列表。应在此处添加任何将数据保存到帖子的块。这方面的一个例子是张贴特色图片块。通常在模板中使用，即使模板被锁定，此块也应允许选择图像。
下面的示例启用虚拟块名称空间/示例.
const addExampleBlockToPostContentBlockTypes=（块类型）=>{return[…blockTypes，'namespace/example']；};wp.hooks.add过滤器('编辑器.postContentBlockTypes'，“my-plugin/post-content-block-types”，将示例块添加到PostContent块类型);
添加块很容易，删除块也很容易。插件或主题作者可以使用JavaScript中的拒绝列表来“注销”块。
将以下代码放入我的plugin.js文件。
//我的plugin.js从“@wordpress/blocks”导入{unregisterBlockType}；从“@wordpress/dom-ready”导入domReady；domReady（函数（）{unregisterBlockType（'core/verse'）；} );
然后，使用以下函数在编辑器中加载此脚本。
<?php（电话）//my-plugin.php（我的插头.php）函数my_plugin_deny_list_blocks（）{wp_排队_脚本(“my-plugin-deny-list-blocks”，插件url（'my-plugin.js'，__FILE__），数组（“wp-blocks”、“wp-dom-ready”、“wp-edit-post”）);}add_action（'enqueue_block_editor_assets'，'my_plugin_deny_list_blocks'）；
注销块时，可以有比赛条件首先运行的代码是：注册块还是注销块。您希望最后运行未注册代码。为此，必须指定将块注册为依赖项的组件，在这种情况下，wp-edit-post文件。此外，使用wp.domReady（）确保加载dom后运行未注册代码。
如果要禁用除允许列表之外的所有块，可以调整上述脚本，如下所示：
//我的plugin.jsvar allowedBlocks=变量allowedBlocks=[“核心/段落”，'核心/图像'，“core/html”，“核心/自由形式”，];wp.blocks.getBlockTypes（）.forEach（函数（blockType））{if（allowedBlocks.indexOf（blockType.name）===-1）{wp.blocks.unregisterBlockType（blockType.name）；}} );
在WordPress 5.8之前，这个钩子被称为允许的块类型，现已弃用。如果你需要支持旧版本的WordPress，你可能需要一种方法来检测应该使用哪个过滤器。你可以检查一下允许的块类型通过查看WP块编辑器上下文类存在，这是在5.8中引入的。
在服务器上，您可以使用允许的块类型全部过滤器。您可以返回true（支持所有块类型）、false（不支持任何块类型）或允许的块类型名称数组。您还可以使用提供的第二个参数$editor_context（编辑_内容）根据块类型的内容筛选块类型。
<?php（电话）//my-plugin.php（我的插头.php）函数示例filter_allowed_block_types_when_post_provided（$allowed_block_types，$editor_context）{if（！空（$editor_context->post））{返回数组（“核心/段落”，“核心/标题”）；}返回$allowed_block_types；}add_filter（“allowed_block_types_all”，“example_filter_allowed_block_types_when_post_provided”，10，2）；
在WordPress 5.8之前，这个钩子被称为块类别，现已弃用。如果你需要支持旧版本的WordPress，你可能需要一种方法来检测应该使用哪个过滤器。你可以检查一下块类别通过查看WP块编辑器上下文类存在，这是在5.8中引入的。
可以使用块类别全部过滤器。您可以通过实现一个返回类别列表的函数，在服务器上执行此操作。它将在块注册期间使用，并在插入器中对块进行分组。您还可以使用提供的第二个参数$editor_context（编辑_内容）根据内容筛选。
//my-plugin.php（我的插头.php）函数示例filter_block_categories_when_post_provided（$block_catagories，$editor_context）{if（！空（$editor_context->post））{阵列推送($块类别，阵列(“slug”=>“自定义类别”，'标题'=>__（'自定义类别'，'自定义插件'），'icon'=>空，));}返回$block_categories；}add_filter（'block_categories_all'，'example_filter_block_catagories_when_post_provided'，10，2）；
还可以通过设置偶像属性。该值可以是WordPress仪表板图标.
您还可以设置SVG格式的自定义图标。要做到这一点，应该在前端渲染和设置图标，这样它就可以使用WordPress SVG，从而实现移动兼容性，并使图标更易于访问。
要为上一示例中显示的类别设置SVG图标，请将以下示例JavaScript代码添加到调用wp.blocks.updateCategory（更新类别）例如：
（函数（）{var el=反应创建元素；var SVG=wp.primitives。SVG；var circle=el（“圆”{cx:10，cy:10，r： 10、，fill:'红色'，stroke:'蓝色'，笔划宽度：'10'，} );var svgIcon=el(SVG、，{宽度：20，高度：20，viewBox:“0 0 20 20”}，圆圈);wp.blocks.updateCategory（'my-category'，{icon:svgIcon}）；} )();