WordPress塊中的基線狀態

>本教程演示了創建一個集成基線Web組件的WordPress塊，並顯示Web平台功能可用性。 作者傑夫·格雷厄姆（Geoff Graham）詳細介紹了該過程，突出了遇到的關鍵步驟和挑戰。

核心概念利用WordPress塊使可重複使用的Web組件在WordPress編輯器中易於重複。 這避免了直接嵌入HTML組件，提供更好的可重複性和管理。 Hugo和Astro也存在類似的方法。

> <baseline-status></baseline-status>

項目設置：

>該項目使用軟件包進行初始化。 插件註冊發生在

中，該插件註冊塊類型。 該文件還可以條件地處理必要的JavaScript（

），以確保僅在需要時加載組件。 一個關鍵功能，@wordpress/create-block，修改了腳本標籤以允許ES模塊導入。 baseline-status.php baseline-status.min.js csstricks_add_type_attribute前端和後端標記：

>

// ... (baseline-status.php excerpt) ...
function csstricks_enqueue_block_assets() {
  wp_enqueue_script(
    'baseline-status-widget-script',
    'https://cdn.jsdelivr.net/npm/[email protected]/baseline-status.min.js',
    array(),
    '1.0.4',
    true
  );
}
// ...

前端渲染（

）使用組件，動態插入>屬性：

>

render.php後端視圖（<baseline-status></baseline-status>）使用featureId>在WordPress編輯器中調試和渲染的功能。

文件定義了塊的屬性，包括

// ... (render.php excerpt) ...
<baseline-status featureid="<?php echo esc_html( $featureID ); ?>"></baseline-status>

。

edit.js useBlockProps塊設置：block.jsonfeatureID

// ... (block.json excerpt) ...
"attributes": {
  "featureID": {
    "type": "string"
  }
},

文件包含

>，和

從

>中創建編輯器中的設置面板。 這允許用戶直接指定edit.js>InspectorControls> PanelBody TextControl@wordpress/components樣式： featureID

造型該組件涉及了解陰影dom。 作者利用CSS變量和直接選擇

// ... (edit.js excerpt) ...
<textcontrol label="Feature ID" value="{" featureid onchange="{"> setAttributes( { featureID: value } ) }
/></textcontrol>

>元素來應用樣式。 該方法解決了造型陰影元素元素的挑戰。

>插件可用性和未來改進：

> <baseline-status></baseline-status>>該插件可在WordPress插件目錄上使用。 未來的改進包括實時更新，變化（尺寸選項）以及標題可見性的切換。

>本文提供了構建WordPress塊的綜合指南，該指南集成了第三方Web組件，為WordPress Block開發和陰影DOM樣式提供了寶貴的見解。

以上是WordPress塊中的基線狀態的詳細內容。更多資訊請關注PHP中文網其他相關文章！