,

[WP Plugin] Block Lab でカスタムブロックをかんたんに追加する

公開日: 2019/07/25

カスタムブロックを簡便にプロジェクトに導入したい。

こちらを読んで知りました。ありがとうございます

公式

Contents

カスタムブロックの設定

管理画面からカスタムブロックを設定します。
手順は端折っています。

対応するディレクトリ、ファイル名でテンプレートを設置します。

blocks/block-download-link.php
<div class="block-download-link">
    <span class="link-title"><?php block_field( 'link-title' ); ?></span>
    <a class="btn btn-black btn-download" href="<?php block_field( 'link-url' ); ?>">Download</a>
</div>

利用方法

投稿画面から設定したカスタムブロックを選択します。

ポインターのフォーカスを外すと、テンプレートが表示されます。

編集画面に CSS Style を適用する

上述の画面キャプチャは CSS Style が適用されています。
それには editor-style.css を用意し、有効化する必要があります。

Gutenberg では少し設定が変わったようです。

Gutenbergで独自のスタイルを適用したい場合は、これまでエディタにスタイル適用させたいときに使用していたadd_editor_style()に加え、下記のようにadd_theme_support( ‘editor-styles’ );を追記することで可能になり、記述された内容はstyle要素としてインラインで挿入されます。

WordPress：Gutenberg用CSSを読み込んだり設定する方法 | NxWorld

functions.php
/**
 * Add editor-style.css
 */
function my_editor_style() {
    add_theme_support( 'editor-styles' );
    add_editor_style( 'css/editor-style.css' );
}
add_action( 'after_setup_theme', 'my_editor_style', 0 );

補遺