WordPressブロックのベースラインステータス

このチュートリアルは、ベースラインWebコンポーネントを統合し、Webプラットフォーム機能の可用性を表示するWordPressブロックの作成を示しています。 著者のGeoff Grahamは、プロセスを詳述し、遭遇した重要な手順と課題を強調しています。

コアコンセプトは、WordPressブロックを活用して、WordPressエディター内で再利用可能な

プロジェクトのセットアップ：<baseline-status></baseline-status>

プロジェクトは、初期化のためにパッケージを使用します。 プラグインの登録はで発生し、ブロックタイプを登録します。 このファイルは、必要な場合にのみコンポーネントがロードされるようにするために、必要なJavaScript（

）を条件的にenquedすることも処理します。 重要な関数

は、スクリプトタグを変更して、ESモジュールのインポートを許可します。 @wordpress/create-block baseline-status.phpbaseline-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バックエンドビュー（）は、WordPressエディター内でのデバッグとレンダリングに<baseline-status></baseline-status>関数を使用します。 featureIdファイルは、

。

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

を含むブロックの属性を定義します

edit.jsuseBlockPropsブロック設定：block.jsonfeatureID

ファイルには、

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

、

、およびからから

から

が組み込まれ、エディター内に設定パネルが作成されます。 これにより、ユーザーはを直接指定できます。edit.js InspectorControls PanelBodyTextControlスタイリング：@wordpress/componentsfeatureID

コンポーネントのスタイリングには、シャドウDOMの理解が含まれます。 著者は、CSS変数を使用し、スタイルを適用するために

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

要素を直接選択します。 このアプローチは、Shadow Dom Elementionのスタイリングの課題に対処しています

プラグインの可用性と将来の改善：

プラグインは、WordPressプラグインディレクトリで利用できます。 将来の改善には、ライブアップデート、バリエーション（サイズオプション）、および見出しの可視性のトグルが含まれます。 <baseline-status></baseline-status>この記事では、サードパーティのWebコンポーネントを統合するWordPressブロックを構築するための包括的なガイドを提供し、WordPressブロックの開発とシャドウDOMスタイリングに関する貴重な洞察を提供します。

以上がWordPressブロックのベースラインステータスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。