20
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

[WordPress] Gutenberg(ブロックエディタ)にカスタムブロックを追加(Block Lab利用)

Last updated at Posted at 2019-02-13

2022年9月1日 追記
記事中で紹介の Block Lab プラグインが 2022年2月3日に停止 されたので、この記事の内容でカスタムブロックの作成はできません。

やりたいこと

sample.png

(見本はダサいが)カスタムブロックを追加してHTMLを触らずとも画像や複数のDOMが組み合わさったパーツを本文内に入れたい。 簡単に。

※自作テーマなどで自作のカスタムブロックを使いたい人向け。すでに出来上がっているカスタムブロックを追加したい人は別のプラグインを探しましょう。

プラグインを使おう

Block Lab

  • 管理画面からカスタムブロックの設定と内部のフィールドを設定
  • テーマにカスタムブロックのテンプレートを作っておく
  • プラグインがよしなにカスタムブロックの追加をしてくれる

サイト:https://getblocklab.com/
ドキュメント:https://github.com/getblocklab/block-lab/wiki

管理画面からカスタムブロックの設定と内部のフィールドを設定

  • タイトル:カスタムブロックの名前
  • Slug:自動で入る。ユニークな名前にしておく
  • Icon:お好みで
  • Category:ブロックエディタで挿入する時のカテゴリー

スクリーンショット 2019-02-13 16.45.47.png

  • Field Label:カスタムブロック内のフィールドの名前
  • Field Name:自動で入る。カスタムブロックのテンプレートで使うのでユニークな名前にしておく
  • Filed Type:画像、テキスト、テキストエリアなど。詳しくはドキュメントを見よう
  • Filed Location:ブロックエディタ内で編集するか、サイドバーで編集するか

他はお好みで
スクリーンショット 2019-02-13 16.45.54.png

保存すると、テーマ内のどこにどのような名前でカスタムブロックのテンプレートファイルを保存すれば良いか表示されます

テーマにカスタムブロックのテンプレートを作っておく

ルールは使用するテーマフォルダ内に blocks フォルダを作成して、そこにテンプレートファイル(PHP)を保存します。

/my-theme/
 └ /blocks/
       ├ block-{block name}.php // 表示用
       └ preview-{block name}.php // エディタで編集してる時用

中身はこんな感じ

block-author-info.php
<div class="author-info">
<?php
    $image = block_field( 'author-image', false ); // 要素の有無の判定できる
    if ( ! empty( $image ) ) {
        echo '<img src="' . $image . '" alt="' . block_field( 'author-name', false ) . '" />' . "\n";
    }
?>
<h3><?php block_field( 'author-name' ); ?></h3>
<p>
<?php
    $author_information = block_value( 'author-information' );
    echo nl2br($author_information); // textarea は自動で改行されない
?>
</p>
</div>

エディタで編集してる時にCSSも合わせたいときは style-editor.css を作ってよしなにCSS書いてください。

プラグインがよしなにカスタムブロックの追加をしてくれる

ブロック挿入時
スクリーンショット 2019-02-13 16.49.36.png

挿入された後
スクリーンショット 2019-02-13 17.37.01.png

現場からは以上です。

20
24
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?