「Create Guten BlockでGutenbergのカスタムブロック開発環境を構築する」のご紹介| Webデザイン参考記事まとめアプデ

2018年08月24日(金)

Create Guten BlockでGutenbergのカスタムブロック開発環境を構築する

0

0

0

0

Gutenbergブロックの開発環境の構築

GutenbergはReactとというJavaScriptのフレームワークで開発されています。
素のJavaScriptでも開発はできますが、ReactはJSXという独自構文があったり、ES6での開発が一般的になっています。
Create Guten Block を使用するとこの辺りの環境も簡単に構築し、プラグインとしてすぐに使用できるようになります。

Node.jsは入ってなかったらインストールしてください。
Create Guten Block はプラグインとして作成されますので、ターミナルを起動しカレントディレクトリを設置したいWordPressのpluginディレクトリに変更します。
$ cd wp-content/plugins
npxで下記コマンドを実行します。
一番最後のmy-blockはプラグイン名なので任意の名称を付けてください。
$ npx create-guten-block my-block
my-blockディレクトリが生成されるので、カレントにしたらnpm startを実行します。
$ cd my...

Webディベロッパーのk.ishiwataさまのブログ。jQuery系の記事が人気な他、最近はスマホ対応やアプリなども取り上げられています。web0pixelの記事『Create Guten BlockでGutenbergのカスタムブロック開発環境を構築する』についてまとめています。

この記事は特にjavascript・WordPressについて書かれており、 WordPressのカテゴリーに分類されます。気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のweb0pixelで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとweb0pixelの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。