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中文网其他相关文章！