编辑器挂钩

WordPress公开了几个API，允许您修改编辑器体验。

编辑器设置

修改编辑器的最常见方法之一是通过块编辑器设置全部PHP过滤器，在设置发送到初始化的编辑器之前应用。此过滤器允许插件和主题作者对编辑器的行为进行广泛控制。

这个块编辑器设置全部hook将两个参数传递给回调函数：

• $设置–编辑器的可配置设置数组。
• $上下文–的一个实例WP块编辑器上下文，一个包含当前编辑器信息的对象。

以下示例修改了最大上传文件大小。将其添加到插件或主题函数.php文件进行测试。

add_filter（'block_editor_settings_all'，'example_filter_block_ditor_settings\when_post_provided'，10，2）；函数示例filter_block_editor_settings_when_post_provided（$editor_ssettings，$editor_context）{if（！空（$editor_context->post））{$editor_settings['maxUploadFileSize']=12345；}返回$editor_settings；}

有几十种编辑器设置，太多了，无法在本文中列出，但这里有几个示例，说明您可以使用块编辑器设置全部过滤器。

限制代码编辑器访问

这个代码编辑已启用，默认为真的，控制用户是否可以访问代码编辑器此外到可视化编辑器。在某些情况下，您可能不希望某些用户能够访问此视图。

如果此设置设置为假，用户将无法在可视化编辑器和代码编辑器之间切换。设置菜单中的选项将不可用，用于切换编辑器类型的键盘快捷键将不会启动。下面是一个示例：

add_filter（'block_editor_settings_all'，'example_restrict_code_editor'）；函数example_restrict_code_editor（$settings）{$can_active_plugins=current_user_can（'激活_plugins'）；//为无法激活插件的用户（管理员）禁用代码编辑器。if（！$can_active_plugins）{$settings['codeEditingEnabled']=false；}返回$settings；}

限制可视化编辑器访问

类似于代码编辑已启用设置，rich编辑已启用允许您控制谁可以访问可视化编辑器。如果真的，用户可以使用可视化编辑器编辑内容。

该设置默认为用户频道编辑功能。它检查用户是否可以访问可视化编辑器，以及用户的浏览器是否支持它。

设置默认图像大小

图像设置为大的编辑器中默认的图像大小。您可以使用图像默认大小设置，如果您配置了自己的自定义图像大小，这将特别有用。以下示例将默认图像大小更改为中等的.

add_filter（'block_editor_settings_all'，'example_set_default_image_size'）；函数示例set_default_image_size（$settings）{$settings['imageDefaultSize']='medium'；返回$settings；}

禁用Openverse

这个Openverse公司默认情况下为所有WordPress站点启用集成，并由启用OpenverseMediaCategory设置。要禁用Openverse，请应用以下筛选器：

add_filter（'block_editor_settings_all'，'example_disable_openverse'）；函数示例disable_openverse（$settings）{$settings['enableOpenverseMediaCategory']=false；返回$settings；}

禁用字体库

字体库允许用户在其站点上安装新字体，默认情况下启用，由字体库已启用设置。要禁用字体库，请应用以下筛选器：

add_filter（'block_editor_settings_all'，'example_disable_font_library'）；函数示例disable_font_library（$settings）{$settings['fontLibraryEnabled']=false；返回$settings；}

禁用块检查器选项卡

大多数块显示两个选项卡在检查器中，一个用于设置，另一个用于样式。您可以使用块检查器选项卡设置。

add_filter（'block_editor_settings_all'，'example_disable_inspector_tabs_by_default'）；函数示例disable_inspector_tabs_by_default（$设置）{$settings['blockInspectorTabs']=数组（'default'=>false）；返回$settings；}

您还可以修改哪些块具有检查器选项卡。下面是一个禁用特定块的选项卡的示例。

add_filter（'block_editor_settings_all'，'example_disable_tabs_for_my_custom_block'）；函数示例disable_tabs_for_my_custom_block（$设置）{$current_tab_settings=_wp_array_get（$settings，array（'blockInspectorTabs'），array（））；$settings['blockInspectorTabs']=数组_合并($current_tab_settings，数组（'my-plugin/my-custom-block'=>false）);返回$settings；}

阻止目录

块目录允许用户从WordPress.org直接在编辑器中安装新的块插件插件目录。您可以通过删除将其排队的操作来禁用此功能，该操作是wp队列编辑器块目录资产。为此，请使用删除操作（_A）这样地：

remove_action（'enqueue_block_editor_assets'，'wp_enqueue_editor_block_directory_assets'）；

块图案

远程模式，例如来自WordPress.org的模式图案目录默认情况下，用户可以在编辑器中使用。此功能由控制应加载远程块模式，默认为真的。可以通过将筛选器设置为false来禁用远程模式(__返回失败).

添加过滤器（“should_load_remote_block_patterns”，“__return_false”）；

编辑器功能

以下过滤器可用于扩展编辑器中的功能。

编辑。发布特色图像.imageSize

您可以使用此过滤器修改“发布特色图像”组件中显示的图像大小。默认为'后缩略图'并将故障恢复到满的指定的图像大小在媒体对象中不存在时的图像大小。它是根据管理员发布摘要大小在经典编辑器中筛选。

从“@wordpress/hooks”导入{addFilter}；const withImageSize=函数（大小，媒体ID，postId）{返回“large”；};添加筛选器('编辑器。发布功能Image.imageSize'，“my-plugin/with-image-size”，带ImageSize);

编辑。发布预览.交互标记

您还可以过滤生成预览时显示的间隙消息。下面是一个示例：

从“@wordpress/hooks”导入{addFilter}；const customPreviewMessage=函数（）{return'<b>正在生成帖子预览</b> '；};添加筛选器('编辑器。PostPreview.interstialMarkup'，“my-plugin/custom-preview-message”，自定义预览消息);

媒体交叉原点

此筛选器用于设置或修改交叉原点外来源媒体元素的属性（即。，<音频>,<图像>,<链接>,<脚本>,＜视频＞). 看看这个文章有关交叉原点属性及其值，以及如何将其应用于每个元素。

一个实际应用的例子是图像块的变换功能，以允许在<画布>。以下是一个示例：

从“@wordpress/hooks”导入{addFilter}；添加筛选器('media.crossOrigin'，“my-plugin/with-cors-media”，//回调接受第二个“mediaSrc”参数，该参数引用//指向实际外国媒体的url，如果您想决定//基于它的crossOrigin值。（跨原点，mediaSrc）=>{if（mediaSrc.startsWith（'https://example.com' ) ) {return'use-credentials'；}返回交叉原点；});

编辑器REST API预加载路径

你可以使用块编辑器重置路径筛选将用于预加载公共数据以用于块编辑器的REST API路径数组。下面是一个示例：

add_filter（“block_editor_rest_api_preload_paths”，“example_filter_block_eiditor_rest_api _preload_paths_when_post_provided”，10，2）；函数示例filter_block_editor_rest_api_preload_paths_when_post_provided（$preload_paths，$editor_context）{if（！空（$editor_context->post））{array_push（$preload_paths，数组（'/wp/v2/blocks'，'OPTIONS'））；}返回$preload_paths；}

记录错误

UI部分的JavaScript错误不应破坏整个应用程序。为了为用户解决这个问题，React库使用了“错误边界”错误边界是React组件，它捕获子组件树中任何位置的JavaScript错误，并显示后备UI，而不是崩溃的组件树。

这个编辑。错误边界记录错误动作允许您连接到误差边界并允许您访问错误对象。

您可以使用此操作获取边界处理的错误对象。例如，您可能希望将它们发送到外部错误跟踪工具。下面是一个示例：

从“@wordpress/hooks”导入{addAction}；添加操作('编辑器。ErrorBoundary.errorLogged'，“mu-plugin/error-capture-setup”，（错误）=>{//Error是异常的错误对象。//您可以对其进行console.log或将其发送到外部错误跟踪工具。console.log（错误）；});