あれこれです...

1. Gutenbergあれこれ
kurudrive@Vektor,Inc.
1

2. 石川栄和@kurudrive
株式会社ベクトル
代表/フロントエンドエンジニア
趣味:スケボー/スプラトゥーン/将棋
自己紹介
2

3. 無料WordPressテーマLightning
デモサイト
ビジネスサイト向け汎用WordPressテーマ
WordPress公式ディレクトリ登録済（無料）

3

4. 今日の内容
Gutenbergの最近の動向
テーマ開発（受託含む）者向けTIPS
その他受託案件で役に立つ...
かもしれないポイント
プラグインでブロックを簡単に作る
JavaScript/Reactは勉強すべきか？
4

5. Gutenbergの最近の動向
5

6. Enhancements（機能強化）
グループブロックが使える！
（背景に色も指定できる）
ブロックの上下移動がうにょーんとモーションする
ようになった！
画像のリンク設定や入れ替えがしやすくなった！
6

7. 全てのコンテンツをコピーした時にポップアップが
出るようになった...
パーマリンクのViewPostの表記がかわった...
投稿本文が空の時に全体をコピーが表示されない
ようになった...
7

8. Experiments（実験）
カスタマイズ画面でウィジェットエリアにブロック
が使える！
WidgetブロックにLegacyWidgetが加わった！
https://make.wordpress.org/core/2019/07/10/whats‑
new‑in‑gutenberg‑10‑july/
8

9. テーマ開発（受託含む）者向け
9

10. CSSを用意する
ブロック用のCSSは従来のエディタ用CSSと同じ方法
で登録すればOK
// テーマで編集画面でCSSが効くように指定
add_theme_support( 'editor-styles' );
// 編集画面用のCSSを追加する
// 複数ファイルがある場合は複数行書けばOK
add_editor_style("editor-style.css");
10

11. エディタ画面ではエディタ用CSSは
自動的に変換される
editor‑style.css
h2 { font-size:2.4em }
Gutenbergの編集画面で出力されるCSS
.editor-style-wrapper h2 { font-size: 2.4em; }
.editor‑style‑wrapperが自動的に付与される
11

12. デフォルトのCSSをカットして全部作る場合
以下のコードでGutenberg標準のCSSを出力しなくす
る事ができる
12

13. 幅広対応
functions.phpなど
add_theme_support( 'align-wide' );
CSS
/* 全幅用CSS */
.wp-block-image.alignfull {}
/* 幅広用CSS */
.wp-block-image.alignwide {}
13

14. 14

15. function mytheme_setup_theme_supported_features() {
add_theme_support(
'editor-color-palette', array(
array(
'name' => __( 'strong magenta'
'slug' => 'strong-magenta'
'color' => '#a156b4',
),
array(
'name' => __( 'light grayish m
'slug' => 'light-grayish-magen
'color' => '#d0a5db',
),
)
);
}
add_action( 'after_setup_theme', 'mytheme_setup_theme_supported
15

16. 文字色:has‑[スラッグ名]‑color
背景色:has‑[スラッグ名]‑background‑color
.has-light-grayish-magenta-color {
color:#d0a5db;
}
.has-light-grayish-magenta-background-color {
background-color:#d0a5db;
}
CSSも用意しないといけないのでちょっと面倒...
16

17. デフォルト文字サイズの変更
17

18. add_theme_support( 'editor-font-sizes', array(
array(
'name' => __( 'Small', 'themeLangDomain' ),
'size' => 12,
'slug' => 'small'
),
array(
'name' => __( 'Normal', 'themeLangDomain' ),
'size' => 16,
'slug' => 'normal'
),
array(
'name' => __( 'Large', 'themeLangDomain' ),
'size' => 36,
'slug' => 'large'
),
array(
'name' => __( 'Huge', 'themeLangDomain' ),
'size' => 50,
'slug' => 'huge'
)
) );
18

19. 同じくフォントサイズ用のCSSを用意
.has‑[スラッグ名]‑font‑size
.has-large-font-size {
font-size: 16px;
}
19

20. カスタム文字サイズを使えなくする
小/標準/大/特大以外指定できなくなる
add_theme_support('disable-custom-font-sizes');
20

21. カスタムカラーを使えなくする
add_theme_support( 'disable-custom-colors' );
21

22. ダークモードのサポート
黒基調のウェブサイトなどの編集画面
add_theme_support( 'editor-styles' );
add_theme_support( 'dark-editor-style' );
22

23. 編集画面の表示幅の指定
/* Main column width */
.wp-block {
max-width: 720px;
}
/* Width of "wide" blocks */
.wp-block[data-align="wide"] {
max-width: 1080px;
}
/* Width of "full-wide" blocks */
.wp-block[data-align="full"] {
max-width: none;
}
23

24. まぁハンドブックに書いてありますよ...
https://developer.wordpress.org/block‑
editor/developers/themes/theme‑support/

24

25. その他受託案件で役に立つ...
かもしれないポイント
25

26. 使われたくないブロックを隠す
ブロックマネージャーから編集（WP5.2以降）
26

27. ＿人人人人人人人人人人人人人人＿
＞ 使おうと思えば使えちゃう！ ＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣
27

28. プラグインで特定のブロックを無効に
DisableGutenbergBlocks–BlockManager
https://wordpress.org/plugins/disable‑gutenberg‑
blocks/

28

29. 29

30. まぁでも案件ごとにチマチマ設定するの面倒だから、
一度コード書いて使いまわした方がいいかも...
30

31. コードを書いて制御
https://www.nxworld.net/wordpress/wp‑
gutenberg‑remove‑default‑block.html
add_filter( 'allowed_block_types', 'custom_allowed_block_types'
function custom_allowed_block_types( $allowed_block_types )
$allowed_block_types = array(
'core/paragraph',
'core/heading',
'core/image',
);
return $allowed_block_types;
}

31

32. プラグインでブロックを簡単に作る
32

33. BlockLab
ACFみたいなノリでJavaScriptの知識がなくてもブロ
ックを自作できる。
https://getblocklab.com/
33

34. BlockLabのブロック登録画面例
34

35. BlockLabのブロックの表示側作成例
テンプレートディレクトリ
└ block‑スラッグ名.php
<div class="wp-block-vk-blocks-staff vk_staff vk_staff-layout-d
<div class="vk_staff_text">
<h3 class="vk_staff_text_name" style="color:inherit"
<p class="vk_staff_text_caption" style="color:inherit"
<p class="vk_staff_text_role" style="color:inherit"
<h4 class="vk_staff_text_profileTitle" style="color:inh
<p class="vk_staff_text_profileText" style="color:inher
</div>
<div class="vk_staff_photo vk_staff_photo-border-defaul
<img class="vk_staff_photo_image" src="<?php bl
</div>
</div>


利用するプラグインと心中する覚悟は必要
35

36. JavaScript/Reactは勉強すべきか？
36

37. JavaScriptVSプラグインorPHP
JavaScript
実際の表示画面に近い状態を見ながら入力できる
プラグインorPHP
JavaScriptやReact覚えなくてもなんとかいける...
37

38. 勉強してみて...
時代はJavaScriptのようですし、
WordPressに限らず覚えた方がいい
いろんな情報やサンプルがあるけど、なぞるだけだ
と使えない。
自分で書き換えたり応用して作ってみたりして、書
いたコードを実行・参照できる状態にする
38

39. おまけ
39

40. コードエディタモード
再利用ブロック
複数ブロックの選択
ブロックナビゲーション
その他便利ブロックの紹介
40

41. Thankyou!
41