MENU
WordPressの使い方/カスタマイズ/Tips/コラム的な事を徒然と。
WPtips-WordPressのカスタマイズTips集-
  • プライバシーポリシー
  • About
WPtips-WordPressのカスタマイズTips集-

Gutenbergでブロックをブロックカテゴリーで管理する方法

2018 12/04
カスタマイズ
2018.12.04
Gutenbergでブロックをブロックカテゴリーで管理する方法

Gutenbergでブロックカテゴリーを作成してブロックを管理する方法をまとめています。

現在使用しているテーマの機能をGutenbergに対応させるためにブロックを作成しているのですが、レイアウト要素に臨時で突っ込んでいた結果、使い勝手が悪くなりました。
テーマ専用のブロックをまとめたい場合に有効な方法です。

目次

デフォルトのブロックカテゴリー

Gutenbergではデフォルトのブロックカテゴリーは普段表示されているものは全6種類あります。

一般ブロックの段落ブロックの使用時にブロック欄にインライン要素のブロックが出現するので、全7種類あります。※見た感じ

デフォルトのブロックカテゴリーリスト

  • 最も使われているブロック
  • 一般ブロック
  • インライン要素
  • フォーマット
  • レイアウト要素
  • ウィジェット
  • 埋め込み

ブロックを作っていくと、デフォルトの機能とは別に自分で作ったブロックをまとめたくなりますよね。
あまりブロックカテゴリーに入れすぎると使い勝手が悪くなるので、まとめることが出来るブロックカテゴリーを使用して、ブロックを管理します。

テーマで使用するブロック専用のカテゴリーを作る方法

ブロックカテゴリーを作る方法

ブロックカテゴリーを作成するためのblock_categoriesフィルターが用意されていたので、それを使います。

WordPress.orgのManaging block categoriesにソースが掲載されています。

Gutenbergのブロックをプラグインで作成した場合、プラグイン直下のphpファイルに記載しておけば良いでしょう。

上記で指定したslug部分の‘slug’ => ‘jin-blocks’,と、ブロックを作成した時のカテゴリー指定を連動させる必要があります。

下記一部抜粋しますが、registerBlockTypeでcategory: ‘jin-blocks’,の指定を共通にさせる必要があります。

registerBlockType( 'jin-blocks/chat', {
	title: __( '吹き出し', 'jin-blocks' ),
	description: __( '吹き出しを作ります。', 'jin-blocks' ),
	icon: 'format-aside',
	category: 'jin-blocks',

カテゴリーブロックのアイコン指定する方法

カテゴリーブロックで画像の様にアイコンを表示させたい場合は、 ‘icon’ => ‘wordpress’の部分にDeveloper Resources: Dashiconsに掲載されているアイコンを使用すれば簡単です。

Developer Resources: Dashicons

画像右にある【dashicons-admin-comments】から接頭辞を抜いて【admin-comments】を指定すればOKです。

まとめ

Gutenbergのhandbookもまだまだ情報が足りてない状態で、Gutenbergのソースを見たり、既に公開されているGutenberg関連のプラグインのソースを眺めて試行錯誤しながらブロックを作っています。

jQueryに慣れていた私は初Reactなので、記述方法が???となる場合があるので、そろそろオライリーの本を買って基本を勉強しないと、本体ソースの読解が厳しい状態です。

Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

Stoyan Stefanov
2,750円(02/26 10:22時点)
発売日: 2017/03/11

Amazon楽天ブックス

Amazonの情報を掲載しています
入門 React ―コンポーネントベースのWebフロントエンド開発

入門 React ―コンポーネントベースのWebフロントエンド開発

Frankie Bagnardi, Jonathan Beebe, Richard Feldman, Tom Hallett, Simon HØjberg, Karl Mikkelsen
2,860円(02/26 10:22時点)
発売日: 2015/04/03

Amazon楽天ブックス

Amazonの情報を掲載しています

Gutenbergの関連記事

  • カテゴリーとタグのトップページをGutenbergで作り込む方法
  • GutenbergはClassic Editor(クラッシックエディター)を超えられるのか?
  • Gutenbergでブロックをブロックカテゴリーで管理する方法
  • Gutenbergでreact-fontawesomeを使う方法
  • Gutenberg の次期フェーズについて

今売れているプログラミングの本

  • 1位Python 1年生 体験してわかる...
    【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライト...
  • 2位Python2年生 データ分析のし...
    【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライト...
  • 3位Python2年生 スクレイピング...
    【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライト...
  • 4位スッキリわかるJava入門(実...
    中山清喬 インプレスBKSCPN_【bookーfestivalーthr】 スッキリ ワカル ジャバ ニュウモン ナカヤマ,キヨ...
  • 5位現場で使える!pandasデータ...
    機械学習エンジニア&データサイエンティスト必携! 初学者でもpandasによる前処理手法がわかる 【本書...

今売れているデザイン本

  • 1位1冊ですべて身につくHTML & C...
    Mana SBクリエイティブイッサツデスベテミニツクエイチティーエムエルアンドシーエスエストウェブデザイ...
  • 2位沈黙のWebライティング ーWeb...
    ※本書は固定レイアウト型の電子版です 【SEOのためのライティング教本の決定版! 「成果が上がる」文章...
  • 3位UIデザインの教科書[新版] ...
    【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライト...
  • 4位大人女子デザイン 女性の心を...
    【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライト...
  • 5位Adobe XDではじめるWebデザイ...
    【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライト...
カスタマイズ
Gutenberg
  • WordPressで回遊率を高めるタグ関連記事を出力するカスタマイズ
  • Gutenbergでreact-fontawesomeを使う方法 Gutenbergでreact-fontawesomeを使う方法

この記事を書いた人

奏音桃のアバター 奏音桃

WordPress1X歴のテーマ開発者がWordPressの有料テーマを購入したのがキッカケで、WordPressのカスタマイズTipsを纏めています。

関連記事

  • WordPressで回遊率を高めるタグ関連記事を出力するカスタマイズ
    WordPressで回遊率を高めるタグ関連記事を出力するカスタマイズ
    2018.08.13
  • WordPressのテーマやプラグイン移行時に、メタディスクリプションを一括移行する方法
    WordPressのテーマやプラグイン移行時に、メタディスクリプションを一括移行する方法
    2019.04.26
  • post_thumbnail_htmlフックを使って、画像周りを一括管理する方法
    post_thumbnail_htmlフックを使って、画像周りを一括管理する方法
    2019.04.23
  • dockerでGutenbergのブロック開発の環境を整える
    dockerでGutenbergのブロック開発の環境を整える
    2018.12.08
  • Gutenbergでreact-fontawesomeを使う方法
    Gutenbergでreact-fontawesomeを使う方法
    2018.12.05

コメント

コメントを残す コメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

  1. ホーム
  2. カスタマイズ
  3. Gutenbergでブロックをブロックカテゴリーで管理する方法
人気記事
  • Gutenbergでブロックカテゴリーを作成する方法
    WordPressのテーマやプラグイン移行時に、メタディスクリプションを一括移行する方法
    2019/04/26
    カスタマイズ
  • Gutenbergでブロックカテゴリーを作成する方法
    Gutenbergでreact-fontawesomeを使う方法
    2018/12/05
    カスタマイズ
  • Gutenbergでブロックカテゴリーを作成する方法
    WordPressで回遊率を高めるタグ関連記事を出力するカスタマイズ
    2018/08/13
    カスタマイズ
  • Gutenbergでブロックカテゴリーを作成する方法
    post_thumbnail_htmlフックを使って、画像周りを一括管理する方法
    2019/04/23
    カスタマイズ
  • Gutenbergでブロックカテゴリーを作成する方法
    dockerでGutenbergのブロック開発の環境を整える
    2018/12/08
    カスタマイズ
New Entry
  • WordPressの有料テーマ【JIN】から【SWELL】に移行した理由
    WordPressの有料テーマ【JIN】から【SWELL】に移行した理由
    2020.06.17
    コラム
  • カテゴリーとタグのトップページをGutenbergで作り込む方法
    カテゴリーとタグのトップページをGutenbergで作り込む方法
    2020.06.16
    【SWELLテーマ】カスタマイズ
  • WordPressのテーマやプラグイン移行時に、メタディスクリプションを一括移行する方法
    WordPressのテーマやプラグイン移行時に、メタディスクリプションを一括移行する方法
    2019.04.26
    カスタマイズ
  • WordPressのテーマ【JIN】に画像読み込み遅延echo.jsを導入する
    WordPressのテーマ【JIN】に画像読み込み遅延echo.jsを導入する
    2019.04.24
    【JINテーマ】カスタマイズ
  • post_thumbnail_htmlフックを使って、画像周りを一括管理する方法
    post_thumbnail_htmlフックを使って、画像周りを一括管理する方法
    2019.04.23
    カスタマイズ
Category
  • 【JINテーマ】カスタマイズ(5)
  • 【SWELLテーマ】カスタマイズ(1)
  • カスタマイズ(6)
  • コラム(7)
Page
  • About
  • プライバシーポリシー
Archive

© 2020 WPtips.

目次
閉じる