@wordpress/block-serialization-default-parser

此库包含WordPress文档的默认块序列化解析器实现。它提供了本机PHP和JavaScript解析器,从@wordpress/block-serialization-specific分析器通常对存储在帖子_内容.

安装

安装模块

npm install@wordpress/block-serialization-default-parser--保存

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

美国石油学会

解析

解析器函数,将输入HTML转换为基于块的结构。

用法

输入岗位:

<!-- wp:columns{“columns”:3}--><div class=“wp-block-columns has-3-columns”><!-- wp:列--><div class=“wp-block-column”><!-- wp:段落--><p>左侧</p><!-- /wp:段落--></div><!-- /wp:列--><!-- wp:列--><div class=“wp-block-column”><!-- wp:段落--><p><strong>中间</strong></p><!-- /wp:段落--></div><!-- /wp:列--><!-- wp:列--><div class=“wp-block-column”><!-- /wp:列--></div><!-- /wp:列-->

正在分析代码:

从“@wordpress/block-serialization-default-parser”导入{parse};解析(post)===[{blockName:'核心/列',属性:{列:3,},内部块:[{blockName:'核心/列',属性:空,内部块:[{blockName:“核心/段落”,属性:空,内部块:[],innerHTML:“左侧”,},],innerHTML:'\n<div class=“wp-block-column”></div>\n',},{blockName:'核心/列',属性:空,内部块:[{blockName:'核心/段落',属性:null,内部块:[],innerHTML:'\n<p><strong>中间</strong></p>\n',},],innerHTML:'\n<div class=“wp-block-column”></div>\n',},{blockName:'核心/列',属性:空,内部块:[],innerHTML:'\n<div class=“wp-block-column”></div>\n',},],内部HTML:'\n<div class=“wp-block-columns has-3-columns”>\n\n\n\n</div>\n',},];

参数

  • 文件 一串:要分析的HTML文档。

退换商品

  • 解析块[]:输入HTML的基于块的表示。

理论

这个与spec-parser有什么不同?

这是一个递归解析器,它对输入文档进行一次线性扫描。它使用蹦床机制来防止堆栈溢出,而不是直接递归。它最大限度地减少了数据复制和通过全局变量通过解析跟踪状态的传递。在每个标记(块注释分隔符)之间,我们可以插入解析器并进行干预;例如,我们可能会对解析文档的时间设置硬限制,或者为文档提供额外的调试诊断。

spec解析器是通过解析表达式语法(PEG)内在地回答了许多我们必须在此解析器中明确回答的问题。此实现的目标是匹配PEG的特性,以便可以直接替换它,并且唯一的更改是更好的运行时性能和内存使用。

它是如何工作的?

每个序列化的Gutenberg文档名义上都是一个HTML文档,除了普通的HTML之外,它还可能包含专门设计的HTML注释——块注释分隔符——用于分离和隔离文档中序列化的块。

此解析器尝试围绕这些分隔符触发的转换(语法的“标记”)创建状态机。每次我们找到一个,我们应该只做其中之一:

  • 输入新块;
  • 走出街区。

这些行动根据上下文具有不同的效果;例如,当我们退出一个块时,我们要么需要将其添加到输出块列表中我们需要将其附加为下一个内部块在块堆栈中它下面的父块上(我们跟踪打开块的位置)。详细信息记录如下。

此解析器中最大的挑战是正确计算构造内部HTML每个嵌套深度级别的每个块的值。我们采取一种简单的方法:

  • 用一个空的开始每个新打开的块内部HTML.
  • 每当我们把第一个街区推到内部块列表中,添加从父块内容开始的位置到该内部块开始的位置的内容。
  • 每当我们把另一块推到内部块列表中,添加从上一个内部块结束的位置到该内部块开始的位置的内容。
  • 当我们结束一个打开的块时,将内容从最后一个内部块的结束处添加到结束块分隔符的开始处。
  • 如果没有内部块,则将开始和结束块注释分隔符之间的整个内容作为内部HTML.

我的意思是,它的表现如何?

此解析器的运行速度比规范中生成的解析器快得多。因为我们比PEG更了解解析,所以我们可以利用几个技巧来提高速度和内存使用率:

  • 我们只有一个或两个不同的标记,这取决于您如何看待它,它们都可以通过正则表达式进行匹配。我们可以允许PCRE RegExp引擎为我们跳过大量文档,以查找那些标记,而不是逐个字符进行解析。
  • 预匹配(_match)需要一个抵消参数,我们可以遍历输入,而无需在每个步骤中传递输入文本的副本。我们可以跟踪字符串中的位置,而只传递一个数字。
  • 不复制所有这些字符串意味着我们也将跳过许多内存分配。

此外,使用RegExp标记化还带来了额外的优势。PEG生成的解析器提供可预测的性能特征,以换取对标记化规则的控制——它不允许我们在规则中定义RegExp模式,以防止例如灾难性的倒退将打破PEG的保证。

然而,由于块注释分隔符的“标记语言”是有规律的可以与RegExp模式进行简单的匹配,我们可以在这里做到这一点,然后发生神奇的事情:我们跳出PHP或JavaScript,进入主机系统上用C或C++编写的高度优化的RegExp引擎。因此,我们留下了虚拟机及其开销。

参与此包

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

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