WordPress 6.2 引入了WP_HTML_Tag_Processor –一個供塊作者在PHP中調(diào)整塊標(biāo)記中的HTML?標(biāo)簽屬性的工具。它是新 HTML 處理API中的第一個組件。
在 WordPress 中更新 HTML 一直需要使用不舒服的工具。正則表達(dá)式很困難并且容易出現(xiàn)各種錯誤。DOMDocument占用大量資源，無法正確處理現(xiàn)代 HTML，并且在許多托管平臺上不可用。
WP_HTML_Tag_Processor（標(biāo)簽處理器）邁出了彌合這一差距的第一步。
標(biāo)簽處理器可以可靠地更新 HTML 屬性
標(biāo)簽處理器找到特定的標(biāo)簽并可以更改其屬性。下面是在 HTML 塊中的第一個img標(biāo)簽上設(shè)置alt屬性的示例。
$html = '<img src="/husky.jpg">';
$p = new WP_HTML_Tag_Processor( $html );
if ( $p->next_tag() ) {
$p->set_attribute( 'alt', 'Husky in the snow' );
}
echo $p->get_updated_html();
// Output:
// <img alt="Husky in the snow" src="/husky.jpg">該next_tag()方法移動到 HTML 中的下一個可用標(biāo)簽，但也接受標(biāo)簽名稱、CSS類或兩者以查找特定標(biāo)簽。根據(jù) HTML 規(guī)范，標(biāo)簽和屬性名稱的查找不區(qū)分大小寫，但 CSS 類名稱區(qū)分。
if ( $p->next_tag( array( 'tag_name' => 'DIV', 'class_name' => 'block-GROUP' ) ) ) {
$p->remove_class( 'block-group' );
$p->add_class( 'wp-block-group' );
}默認(rèn)情況下操作是安全的：
- 刪除一個屬性而不首先檢查它是否存在，
- 添加一個可能已經(jīng)存在的 CSS 類，
- 設(shè)置一個屬性值而不確保它不會復(fù)制現(xiàn)有的值。
您不再需要擔(dān)心您的代碼會將<textarea>, 和屬性值中的內(nèi)容，甚至是 HTML 注釋中的內(nèi)容誤認(rèn)為是真正的標(biāo)簽。
標(biāo)簽處理器符合 HTML5 規(guī)范，因此您不必這樣做。它會在必要時自動轉(zhuǎn)義和解碼值，并且知道如何處理格式錯誤的標(biāo)簽。
$ugly_html = <<<HTML
<textarea title='<div> elements are semantically void'>
<div><!--<div attr-->="</div>"></div>">
</textarea>
<div></div>
HTML;
$p = new WP_HTML_Tag_Processor( $ugly_html );
if ( $p->next_tag( 'div' ) ) {
$p->add_class( 'bold' );
}
echo $p->get_updated_html();
// Output:
// <textarea title='<div> elements are semantically void'>
// <div><!--<div attr-->="</div>"></div>">
// </textarea>
// <div class="bold"></div>標(biāo)簽處理器的運(yùn)行速度足以在關(guān)鍵的熱代碼路徑中運(yùn)行，并且?guī)缀醪粫a(chǎn)生內(nèi)存開銷。在 WordPress 6.2 中，它取代了依賴正則表達(dá)式和字符串搜索來執(zhí)行類似更新的容易出錯的代碼。
要更高級地使用標(biāo)簽處理器，請閱讀大量的課堂文檔并學(xué)習(xí)如何……
- …設(shè)置書簽以重新訪問已掃描和修改的文檔部分。
- …
</div>除了開始標(biāo)簽之外，還可以訪問結(jié)束標(biāo)簽。 - …通過訪問文檔中的每個標(biāo)簽來運(yùn)行高級和有狀態(tài)的查詢。
進(jìn)一步的考慮
Tag Processor 不做很多事情：它不構(gòu)建 DOM 文檔樹、查找嵌套標(biāo)簽或更新標(biāo)簽的內(nèi)部 HTML 或內(nèi)部文本。繼續(xù)開發(fā)與 HTML 相關(guān)的新 API，未來的 WordPress 版本將建立在這項工作的基礎(chǔ)上，以允許從 PHP 中訪問塊的所有屬性（如果塊提供block.json文件），使用 CSS 選擇器查找標(biāo)簽，并修改HTML具有新標(biāo)簽、刪除標(biāo)簽和更新的內(nèi)部標(biāo)記的結(jié)構(gòu)。
您可以通過Gutenberg?GitHub?Repo上的這個概述問題跟上進(jìn)一步的發(fā)展。
