新規投稿時にブロックを初期配置する (読了想定)

WordPressユーザーのためのPHP入門 はじめから、ていねいに。第3版 p229-231 で解説しているように、グーテンベルクではブロックを初期配置することができます。 この機能を使って、いくつかのブロックを初期配置してみます。

ブロックを初期配置

この機能を使うと、投稿の雛形を自動生成できるので、ブログ執筆効率が向上します。読まれやすいテンプレート・商品が売れやすいテンプレートなど、自分の勝ちパターンを登録しておくのがお勧めです。 複数人で運営するときに、フォーマットを統一したりするのにも便利です。

ブロックを初期配置するコード

書籍p229~で解説しているように、ブロックテンプレート機能を使うと、ブロックを初期配置することが可能です。 この機能を使って、

  • 「こんな人におススメ」見出し
  • 「吹き出し」メディアと文章
  • 「アマゾンで購入する」ボタン

を初期配置してみます。

function newpost_template() {
    $post_type_object = get_post_type_object( 'post' );
    $post_type_object->template = [
        [ 'core/heading', [
            'level' => '3',
            'content' => 'こんな人におススメ'
        ]],
        [ 'core/media-text', [
            'mediaType' => 'image',
            'mediaUrl' => 'https://calculator.jp/images/man.png',
            'className' => 'speech-balloon'
        ]],
        [ 'core/button', [
            'text' => 'アマゾンで購入する'
        ]],
    ];
}
add_action( 'init', 'newpost_template' );

設定方法

まず、グーテンベルクのブロック一覧で、初期配置したいブロックのスラッグを確認します。 上の例では、見出しがcore/heading、メディアと文章がcore/media-text、ボタンがcore/button、となっています。

次に、ブロック毎の初期データを設定します。書籍執筆時点ではドキュメントが整備されていないようなので、wp-includes/js/dist/block-library.jsを読む必要があります。 block-libarry.js に、var heading_name = 'core/heading'; という行があります。この近辺のコードを読むと、

var schema = {
  content: {
    type: 'string',
    source: 'html',
    selector: 'h1,h2,h3,h4,h5,h6',
    default: ''
  },
  level: {
    type: 'number',
    default: 2
  },
  align: {
    type: 'string'
  },
  placeholder: {
    type: 'string'
  }
};
var heading_name = 'core/heading';

という記述があります。schemaの中の、content, level, align, placeholderが、ブロックテンプレートで設定可能な初期データです。 上の例では、level(見出しのHタグを指定する)とcontent(見出しのテキスト)を指定しています。

他のブロックを初期配置する場合も、同様にblock-library.jsを読んでいくと、設定可能な初期データが記載されています。

スタイルシート

「メディアと文章」ブロックを、吹き出し表示にするために、スタイルシートを編集します。 この「メディアと文章」ブロックには、初期データで 'className' => 'speech-balloon' と書いておいたので、speech-balloonというcssクラスが付与されます。 このcssクラスにスタイルを追加すると、吹き出しが作成できます。

なお、CSSはCSSで作る!吹き出しデザインのサンプル19選を元にしています。

ブログ表示用 style.cs

ブログで投稿を表示するときに使用するスタイルシートはstyle.cssです。ここに、以下を追記します。

.speech-balloon {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
  grid-template-columns: 50px auto;
}

.speech-balloon .wp-block-media-text__media {
  float: left;
  margin-right: -90px;
  width: 80px;
}

.speech-balloon .wp-block-media-text__media img{
  width: 100%;
  height: auto;
  border: solid 3px #d7ebfe;
  border-radius: 50%;
}

.speech-balloon .wp-block-media-text__content {
  width: 100%;
}

.wp-block-media-text__content p {
  display: inline-block;
  position: relative; 
  margin: 5px 0 0 105px;
  padding: 17px 13px;
  border-radius: 12px;
  background: #d7ebfe;
}

.wp-block-media-text__content p:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #d7ebfe;
}

.wp-block-media-text__content p {
  margin: 0;
  padding: 0;
}

管理画面用 style-editor.css

管理画面(投稿編集画面)でも、見た目を吹き出しにしたい場合は、スタイルシートstyle-editor.cssを編集します。

.speech-balloon {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
  grid-template-columns: 50px auto;
}

.speech-balloon .block-library-media-text__media-container {
  float: left;
  margin-right: -90px;
  width: 80px;
  height: 80px;
}

.speech-balloon img{
  width: 100%;
  height: auto;
  border: solid 3px #d7ebfe;
  border-radius: 50%;
}

.speech-balloon .wp-block-media-text__content {
  width: 100%;
}
 
.speech-balloon .components-autocomplete p:nth-child(2) {
    display:none;
}
.speech-balloon p {
  display: inline-block;
  position: relative; 
  margin: 5px 0 0 55px;
  padding: 17px 13px;
  border-radius: 12px;
  background: #d7ebfe;
}

.speech-balloon p:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  left: -24px;
  height: 20px;
  border: 12px solid transparent;
  border-right: 12px solid #d7ebfe;
}

.speech-balloon p {
  margin: 0;
  padding: 0;
}

標準ブロック+スタイルシートで設定するメリット

上の例では、吹き出し機能を標準ブロック(メディアと文章)+スタイルシートで設定しました。

吹き出し機能を独自ブロックで作成しているテーマ・プラグインもあります。この場合は、上で作った例よりも柔軟に設定できることが多いです。 たとえば「吹き出しの形や背景色をブロックエディタで設定できる」といった感じです。

しかし、独自ブロックで作成しているテーマ・プラグインの場合、別のテーマ・プラグインへ切り替えるときに手間がかかることがあります。 独自ブロックで作成しているテーマ・プラグインを使う場合は、この点も確認しておきましょう。