Gutenbergブロックの資産を排除する方法

Gutenbergブロックを開発するとき、アセットをenqueeする正しい方法には次のものが含まれます。1。register_block_typeを使用して、editor_script、editor_style、およびstyleのパスを指定します。 2。functions.phpまたはプラグインでwp_register_scriptとwp_register_styleを介してリソースを登録し、正しい依存関係とバージョンを設定します。 3.適切なモジュール形式を出力するようにビルドツールを構成し、パスが一貫していることを確認します。 4. add_theme_supportまたはenqueue_block_assetsを介してフロントエンドスタイルの読み込みロジックを制御して、スタイルが有効になり、競合を回避します。

Gutenbergブロックを開発する場合、アセット（JavaScriptやCSSファイルなど）が正しくエンキューすることは、ブロックが適切に機能することを保証するための重要なステップです。これは、バックエンドエディターにファイルをロードするだけでなく、フロントエンドのディスプレイと依存関係の管理の問題を検討することでもあります。

1. register_block_typeを使用して、アセットパスを正しく指定します

WordPressは、ブロックタイプを登録するためにregister_block_type関数を提供し、パラメーターを介して対応するJSおよびCSSファイルパスを指定できます。

 Register_block_type（__dir__、array（
    'editor_script' => 'my-block-editor-script'、
    'editor_style' => 'my-block-editor-styles'、
    'style' => 'my-block-frontend-styles'、
））;

• editor_script ：ブロックエディターのスクリプトに使用されます（通常は.jsまたは.jsxファイルをコンパイルします）
• editor_style ：エディターにロードされたスタイルのみが前景に影響しません
• style ：フロントとバックエンドにロードされるスタイル、通常はブロックの基本的な外観に使用されます

functions.phpまたはプラグインにスクリプトとスタイルシートを登録します

これらのリソースを最初にwp_register_scriptおよびwp_register_styleで登録する必要があります。これにより、WordPressがregister_block_typeで言及したハンドルを認識できるようにします。

関数my_block_assets（）{
    wp_register_script（
        「My-Block-Editor-Script」、
        get_template_directory_uri（）。 '/blocks/my-block/build/index.js'、
        array（ 'wp-blocks'、 'wp-element'、 'wp-editor'）、
        filemtime（get_template_directory（）。 '/blocks/my-block/build/index.js'）
    ）;

    wp_register_style（
        「My-Block-Editor-Styles」、
        get_template_directory_uri（）。 '/blocks/my-block/editor.css'、
        配列（）、
        filemtime（get_template_directory（）。 '/blocks/my-block/editor.css'）
    ）;

    wp_register_style（
        「My-Block-Frontend-Styles」、
        get_template_directory_uri（）。 '/blocks/my-block/style.css'、
        配列（）、
        filemtime（get_template_directory（）。 '/blocks/my-block/style.css'）
    ）;
}
add_action（ 'init'、 'my_block_assets'）;

いくつかの重要なポイントに注意してください：

• wp-blocks 、 wp-element 、 wp-editorなど、スクリプト依存関係を完全に記述する必要があります
• filemtime()を使用して、古いバージョンのファイルをキャッシュすることからブラウザを避ける
• テーマディレクトリ構造を使用している場合は、 get_template_directory使用することをお勧めします。プラグインの場合は、 plugins_url()を使用して__FILE__と協力します

3。ツール構成の構築に関する注意事項

Webpack、Vite、またはその他のビルドツールを使用してブロックコードをパッケージ化する場合は、次のポイントに注意する必要があります。

• 出力JSファイルはUMDモジュールであるか、WordPress環境に適した形式で正しくパッケージ化する必要があります。
• ReactやReactdomを個別にパッケージ化しないでください。WordPress（ window.React 、 window.ReactDOMなど）が提供するグローバル変数参照を使用します。
• 出力パスがPHPに登録されているパスと一致していることを確認してください

一般的な慣行：

• 編集者スクリプトを/src/blocks/your-block/index.jsに置きます
• webpackを使用して/build/your-block/index.jsにコンパイルします
• 同時に、依存関係とバージョン番号を自動的に取得するために.asset.phpファイルを生成します（WordPressデフォルトサポート）

4。フロントエンドスタイルを読み込むためのヒント

デフォルトでは、Gutenbergブロックのstyleパラメーターは、スタイルを前景に自動的にロードします。しかし、時々、スタイルが効果的ではないことがわかります。理由は次のとおりです。

• テーマはブロックスタイルのサポートを正しく有効にしません（ add_theme_support( 'wp-block-styles' )と呼ばれるかどうかを確認）
• スタイルは他のテーマスタイルでカバーされています。名前空間クラス名を追加することをお勧めします
• いくつかのブロックは、フロントエンド（いくつかの動的ブロックなど）にレンダリングされません。現時点では、 enqueue_block_assetsフックを使用してオンデマンドで読み込むことを検討できます。

関数my_enqueue_frontend_assets（）{
    if（has_block（ 'my/block-name'））{
        wp_enqueue_style（ 'my-block-frontend-styles'）;
    }
}
add_action（ 'wp_enqueue_scripts'、 'my_enqueue_frontend_assets'）;

この方法はより柔軟ですが、ブロックが実際にページに存在するかどうかを判断する必要もあります。

基本的にそれだけです。 WordPressのブロック登録仕様をフォローし、建設およびパスの問題に注意を払う限り、ブロックに資産を正常にロードできます。

以上がGutenbergブロックの資産を排除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。