WooCommerceでカスタムGutenbergブロックを作成する：開発者のための完全ガイド

ワードプレスは最近 ワードプレス/スクリプト npmパッケージは、新しい ワードプレス開発再利用可能なスクリプトのセットが提供されています。この記事では イーエスシックスそしてJSX 歌で応える ワードプレス/スクリプト 請負うカスタム グーテンベルク 塊土に統合します。 WooCommerce 真ん中。

しぞめ前に

開発を始める前に、必要な開発環境を設定する必要があります：

• WordPress開発環境WordPressがインストールされていることを確認してください。
• JavaScriptビルドツール（Node/npm）を使用します。 反応 歌で応える JSXしたがってJavaScriptの設定 ツールを作る
• WooCommerceプラグインWooCommerceプラグインをまだインストールしていない場合は、まずインストールしてください。

ReactでWordPressテーマを構築する方法

5月9日 11:44

08840

ステップ1：プラグインディレクトリの作成と依存関係のインストール

まず最初に wp-content/plugins ディレクトリにプラグインカタログを参照し、必要な ワードプレス/スクリプト パッケージ

具体的な手順は以下の通り：

1. プラグインディレクトリの作成: wp-content/plugins ディレクトリに マイファーストブロック フォルダの
2. 依存関係のインストールアクセス マイファーストブロック ディレクトリで npm 取付 ワードプレス/スクリプト パッケージ

cd wp-content/plugins
mkdir myFirst-block
cd myFirst-block
npm init
npm install --save-dev --save-exact @wordpress/scripts

インストールが完了すると、すべての依存パッケージが ノードモジュール カタログ

ステップ 2: package.json の設定

ある マイファーストブロック ディレクトリで パッケージ.json ファイルに以下のスクリプト設定を追加します：

「スクリプト": {
  "start": "wp-scripts start"、
  "build": "wp-scripts build"
}

• npm run start開発サーバーを起動し、リスニング・モードにしてリアルタイムでコードを更新します。
• npm run buildビルドファイルを梱包し、リリースの準備をします。

ステップ3: Gutenbergブロックを登録するプラグインファイルの作成

カスタムGutenbergブロックを登録し、ロードするプラグインファイルを作成する必要があります。

ある マイファーストブロック ディレクトリに myFirst-block.php ファイルに以下のコードを追加してください：

<?php
/*
プラグイン名：myFirst-block
著者：ウェブクル
*/
関数 myFirst_block() {
    $styleURI = plugin_dir_url( __FILE__ ) . '/src/style.css' ；
    // スタイルのエンキュー
    wp_enqueue_style(
        myFirst-block-style'.
        $styleURI
    );

    // JavaScriptファイル（build/index.js）の登録
    wp_register_script(
        myFirst-block-script'.
        plugins_url( 'build/index.js', __FILE__ )、
        array( 'wp-blocks', 'wp-element', 'wp-editor' )
    );

    // エディタスタイルの登録
    wp_register_style(
        myFirst-block-editor-style'.
        plugins_url( 'src/editor.css', __FILE__ )
    );

    // ブロックの登録
    register_block_type( 'myCustomBlock/myFirst-block', array(
        'editor_script' => 'myFirst-block-script'、
        'editor_style' => 'myFirst-block-editor-style'、
    ) );
}
add_action( 'init', 'myFirst_block' )；

コードは次のようになります：

• カスタムスタイルとJavaScriptファイルを読み込みます。
• 新しいGutenbergブロックに登録しました。

ステップ4：JavaScriptコードを書く 登録ブロック

次に myFirst-block/src/index.js ファイルに、Gutenbergブロックを登録するためのJavaScriptコードを記述します。まず src/index.js ファイルに以下を追加してください：

import { registerBlockType } from '@wordpress/blocks' ；
import { RichText } from '@wordpress/block-editor' ；

// 最初のカスタム・ブロックの登録
registerBlockType( 'myCustomBlock/my-first-block', {.
    タイトル：「初めてのカスタムブロック
    icon: 'smiley'、
    category:「共通」、
    属性: {
        content: {
            type: 'string'、
            source: 'html'、
            セレクタ: 'p'、
        },
    },
    edit: (props) => {.
        const { attributes: { content }, setAttributes } = props.

        const onChangeContent = (newContent) => {.
            setAttributes({ content: newContent })；
        };

        返す(
            
。
                <リッチテキスト 
                    tagName="p" 
                    value={ 内容 }. 
                    onChange={ onChangeContent }. 
                    placeholder="内容を入力してください"
                />
            

        );
    },
    save: (props) => {.
        返す(
            
。
                。
            

        );
    }
});

ステップ 5: スタイルファイルの追加

Gutenbergブロックのスタイルも定義する必要があります。2つのCSSファイルを作成します：src/editor.css をエディターのスタイルに追加します。src/style.css フロントエンドのプレゼンテーションに使用されるスタイル。

1. エディタのスタイル (src/editor.css)::

.my-first-block {
    カラー：ブルー
    background-color: #f0f0f0；
    padding: 20px；
}

2. フロントエンドのスタイル (src/style.css)::

.my-first-block {
    カラー：グリーン
    padding: 20px；
    background-color: #e0e0e0；
}

ステップ 6: ビルドと実行

すべてのファイルが作成されたら、以下のコマンドを使用して開発サーバーを起動します：

npm run start

このコマンドは src/index.js ファイルの変更に合わせて自動的にビルドとアップデートを行います。 build/index.js ファイルを作成します。これでカスタムGutenbergブロックがエディタで使えるようになりました。

ステップ7：さらなる機能拡張（オプション）

さらに複雑なGutenbergブロックを作成することもできます。例えば、ユーザーが画像、キャプション、説明を追加できるカードコンポーネントブロックを作成できます。そのためには useBlockProps 歌で応える インナーブロック カードブロックの中に他のブロックを追加できるAPI。

以下は、単純なカード・コンポーネント・ブロックの例です：

import { registerBlockType } from '@wordpress/blocks' ；
import { MediaUpload, RichText, InnerBlocks, useBlockProps } from '@wordpress/block-editor' ；

registerBlockType( 'myCustomBlock/card-block', {)
    タイトル：「カードコンポーネント
    icon: 'grid-view'、
    カテゴリー: 'widgets'、
    属性: {
        title: { type: 'string' }、
        description: { type: 'string' }、
        imageUrl: { type: 'string' }、
    },
    edit: (props) => {.
        const { attributes, setAttributes } = props；
        const blockProps = useBlockProps()；

        返す(
            
 です。
                <メディアアップロード
                    onSelect={(media) => setAttributes({ imageUrl: media.url })}.
                    render={({ open }) => (
                        画像を選択します。
                    )}
                />
                <リッチテキスト
                    tagName="h3"
                    値={attributes.title}です。
                    onChange={(newTitle) => setAttributes({ title: newTitle })}.
                    placeholder="タイトル"
                />
                <リッチテキスト
                    tagName="p"
                    値={attributes.description}。
                    onChange={(newDescription) => setAttributes({ description: newDescription })}.
                    placeholder="説明"
                />
                <インナーブロック
            

        );
    },
    save: (props) => {.
        const { attributes } = props；
        返す(
            
。
                のようになります。
                となります。
                。
                <インナーブロックの内容
            

        );
    }
});

概要

以上の手順で、シンプルなカスタムGutenbergブロックを作成し、そのブロックに前方部分とエディタスタイルを追加することができます。ブロック内でより多くの要素をサポートしたり、カスタムコントロールを追加するなど、必要に応じてブロックの機能をさらに拡張することができます。