Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Gutenbergあれこれ
kurudrive@Vektor,Inc.
1
石川栄和@kurudrive
株式会社ベクトル
代表/フロントエンドエンジニア
趣味:スケボー/スプラトゥーン/将棋
自己紹介
2
無料WordPressテーマLightning
デモサイト
ビジネスサイト向け汎用WordPressテーマ
WordPress公式ディレクトリ登録済(無料)

3
今日の内容
Gutenbergの最近の動向
テーマ開発(受託含む)者向けTIPS
その他受託案件で役に立つ...
かもしれないポイント
プラグインでブロックを簡単に作る
JavaScript/Reactは勉強すべきか?
4
Gutenbergの最近の動向
5
Enhancements(機能強化)
グループブロックが使える!
(背景に色も指定できる)
ブロックの上下移動がうにょーんとモーションする
ようになった!
画像のリンク設定や入れ替えがしやすくなった!
6
全てのコンテンツをコピーした時にポップアップが
出るようになった...
パーマリンクのViewPostの表記がかわった...
投稿本文が空の時に全体をコピーが表示されない
ようになった...
7
Experiments(実験)
カスタマイズ画面でウィジェットエリアにブロック
が使える!
WidgetブロックにLegacyWidgetが加わった!
https://make.wordpress.org/core/2019/07/10/wha...
テーマ開発(受託含む)者向け
9
CSSを用意する
ブロック用のCSSは従来のエディタ用CSSと同じ方法
で登録すればOK
// テーマで編集画面でCSSが効くように指定
add_theme_support( 'editor-styles' );
// 編集画面用のCSSを追加...
エディタ画面ではエディタ用CSSは
自動的に変換される
editor‑style.css
h2 { font-size:2.4em }
Gutenbergの編集画面で出力されるCSS
.editor-style-wrapper h2 { fon...
デフォルトのCSSをカットして全部作る場合
以下のコードでGutenberg標準のCSSを出力しなくす
る事ができる
12
幅広対応
functions.phpなど
add_theme_support( 'align-wide' );
CSS
/* 全幅用CSS */
.wp-block-image.alignfull {}
/* 幅広用CSS */
.wp-blo...
14
function mytheme_setup_theme_supported_features() {
add_theme_support(
'editor-color-palette', array(
array(
'name' => __(...
文字色:has‑[スラッグ名]‑color
背景色:has‑[スラッグ名]‑background‑color
.has-light-grayish-magenta-color {
color:#d0a5db;
}
.has-light-gray...
デフォルト文字サイズの変更
17
add_theme_support( 'editor-font-sizes', array(
array(
'name' => __( 'Small', 'themeLangDomain' ),
'size' => 12,
'slug' => ...
同じくフォントサイズ用のCSSを用意
.has‑[スラッグ名]‑font‑size
.has-large-font-size {
font-size: 16px;
}
19
カスタム文字サイズを使えなくする
小/標準/大/特大以外指定できなくなる
add_theme_support('disable-custom-font-sizes');
20
カスタムカラーを使えなくする
add_theme_support( 'disable-custom-colors' );
21
ダークモードのサポート
黒基調のウェブサイトなどの編集画面
add_theme_support( 'editor-styles' );
add_theme_support( 'dark-editor-style' );
22
編集画面の表示幅の指定
/* Main column width */
.wp-block {
max-width: 720px;
}
/* Width of "wide" blocks */
.wp-block[data-align="wid...
まぁハンドブックに書いてありますよ...
https://developer.wordpress.org/block‑
editor/developers/themes/theme‑support/

24
その他受託案件で役に立つ...
かもしれないポイント
25
使われたくないブロックを隠す
ブロックマネージャーから編集(WP5.2以降)
26
_人人人人人人人人人人人人人人_
> 使おうと思えば使えちゃう! <
 ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y ̄
27
プラグインで特定のブロックを無効に
DisableGutenbergBlocks–BlockManager
https://wordpress.org/plugins/disable‑gutenberg‑
blocks/

28
29
まぁでも案件ごとにチマチマ設定するの面倒だから、
一度コード書いて使いまわした方がいいかも...
30
コードを書いて制御
https://www.nxworld.net/wordpress/wp‑
gutenberg‑remove‑default‑block.html
add_filter( 'allowed_block_types', 'cu...
プラグインでブロックを簡単に作る
32
BlockLab
ACFみたいなノリでJavaScriptの知識がなくてもブロ
ックを自作できる。
https://getblocklab.com/
33
BlockLabのブロック登録画面例
34
BlockLabのブロックの表示側作成例
テンプレートディレクトリ
└ block‑スラッグ名.php
<div class="wp-block-vk-blocks-staff vk_staff vk_staff-layout-d
<div c...
JavaScript/Reactは勉強すべきか?
36
JavaScriptVSプラグインorPHP
JavaScript
実際の表示画面に近い状態を見ながら入力できる
プラグインorPHP
JavaScriptやReact覚えなくてもなんとかいける...
37
勉強してみて...
時代はJavaScriptのようですし、
WordPressに限らず覚えた方がいい
いろんな情報やサンプルがあるけど、なぞるだけだ
と使えない。
自分で書き換えたり応用して作ってみたりして、書
いたコードを実行・参照できる状...
おまけ
39
コードエディタモード
再利用ブロック
複数ブロックの選択
ブロックナビゲーション
その他便利ブロックの紹介
40
Thankyou!
41
Upcoming SlideShare
Loading in …5
×

Gutenberg あれこれ in WordPress Meetup in 松本 Vol.14

269 views

Published on

あれこれです...

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Gutenberg あれこれ in WordPress Meetup in 松本 Vol.14

  1. 1. Gutenbergあれこれ kurudrive@Vektor,Inc. 1
  2. 2. 石川栄和@kurudrive 株式会社ベクトル 代表/フロントエンドエンジニア 趣味:スケボー/スプラトゥーン/将棋 自己紹介 2
  3. 3. 無料WordPressテーマLightning デモサイト ビジネスサイト向け汎用WordPressテーマ WordPress公式ディレクトリ登録済(無料)  3
  4. 4. 今日の内容 Gutenbergの最近の動向 テーマ開発(受託含む)者向けTIPS その他受託案件で役に立つ... かもしれないポイント プラグインでブロックを簡単に作る JavaScript/Reactは勉強すべきか? 4
  5. 5. Gutenbergの最近の動向 5
  6. 6. Enhancements(機能強化) グループブロックが使える! (背景に色も指定できる) ブロックの上下移動がうにょーんとモーションする ようになった! 画像のリンク設定や入れ替えがしやすくなった! 6
  7. 7. 全てのコンテンツをコピーした時にポップアップが 出るようになった... パーマリンクのViewPostの表記がかわった... 投稿本文が空の時に全体をコピーが表示されない ようになった... 7
  8. 8. Experiments(実験) カスタマイズ画面でウィジェットエリアにブロック が使える! WidgetブロックにLegacyWidgetが加わった! https://make.wordpress.org/core/2019/07/10/whats‑ new‑in‑gutenberg‑10‑july/ 8
  9. 9. テーマ開発(受託含む)者向け 9
  10. 10. CSSを用意する ブロック用のCSSは従来のエディタ用CSSと同じ方法 で登録すればOK // テーマで編集画面でCSSが効くように指定 add_theme_support( 'editor-styles' ); // 編集画面用のCSSを追加する // 複数ファイルがある場合は複数行書けばOK add_editor_style("editor-style.css"); 10
  11. 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. 12. デフォルトのCSSをカットして全部作る場合 以下のコードでGutenberg標準のCSSを出力しなくす る事ができる 12
  13. 13. 幅広対応 functions.phpなど add_theme_support( 'align-wide' ); CSS /* 全幅用CSS */ .wp-block-image.alignfull {} /* 幅広用CSS */ .wp-block-image.alignwide {} 13
  14. 14. 14
  15. 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. 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. デフォルト文字サイズの変更 17
  18. 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. 19. 同じくフォントサイズ用のCSSを用意 .has‑[スラッグ名]‑font‑size .has-large-font-size { font-size: 16px; } 19
  20. 20. カスタム文字サイズを使えなくする 小/標準/大/特大以外指定できなくなる add_theme_support('disable-custom-font-sizes'); 20
  21. 21. カスタムカラーを使えなくする add_theme_support( 'disable-custom-colors' ); 21
  22. 22. ダークモードのサポート 黒基調のウェブサイトなどの編集画面 add_theme_support( 'editor-styles' ); add_theme_support( 'dark-editor-style' ); 22
  23. 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. 24. まぁハンドブックに書いてありますよ... https://developer.wordpress.org/block‑ editor/developers/themes/theme‑support/  24
  25. 25. その他受託案件で役に立つ... かもしれないポイント 25
  26. 26. 使われたくないブロックを隠す ブロックマネージャーから編集(WP5.2以降) 26
  27. 27. _人人人人人人人人人人人人人人_ > 使おうと思えば使えちゃう! <  ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y ̄ 27
  28. 28. プラグインで特定のブロックを無効に DisableGutenbergBlocks–BlockManager https://wordpress.org/plugins/disable‑gutenberg‑ blocks/  28
  29. 29. 29
  30. 30. まぁでも案件ごとにチマチマ設定するの面倒だから、 一度コード書いて使いまわした方がいいかも... 30
  31. 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. プラグインでブロックを簡単に作る 32
  33. 33. BlockLab ACFみたいなノリでJavaScriptの知識がなくてもブロ ックを自作できる。 https://getblocklab.com/ 33
  34. 34. BlockLabのブロック登録画面例 34
  35. 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. 36. JavaScript/Reactは勉強すべきか? 36
  37. 37. JavaScriptVSプラグインorPHP JavaScript 実際の表示画面に近い状態を見ながら入力できる プラグインorPHP JavaScriptやReact覚えなくてもなんとかいける... 37
  38. 38. 勉強してみて... 時代はJavaScriptのようですし、 WordPressに限らず覚えた方がいい いろんな情報やサンプルがあるけど、なぞるだけだ と使えない。 自分で書き換えたり応用して作ってみたりして、書 いたコードを実行・参照できる状態にする 38
  39. 39. おまけ 39
  40. 40. コードエディタモード 再利用ブロック 複数ブロックの選択 ブロックナビゲーション その他便利ブロックの紹介 40
  41. 41. Thankyou! 41

×