ブロックエディターを「削る・飾る・加える」

Slide for my presentation at WordCamp Haneda, held at Tokyo, Japan on April 20-21, 2019.
WordCamp Haneda 2019 (2019/04/20-21) 登壇スライド。
https://2019.haneda.wordcamp.org/session/cut-decorate-and-add-block-editors/

----

概要

WordPress 5.0 で新しく実装されたブロックエディター（Gutenberg）にはたくさんのブロックがすでに含まれています。種類も多く、ブログやシンプルなサイトであれば十分すぎるほどですが、全く使わないブロックもあれば、「こんなブロックがあればなぁ」というブロックもあるかもしれません。

デフォルトで含まれているブロックの種類と数は、言わば「ブロックの基本セット」です。自分好みやユーザーの要望、コンテンツのタイプやサイトの目的に合ったブロックのセットにカスタマイズすることは、エディタの使いやすさ向上につながります。

このセッションでは、ブロックの「自分セット」を作るためのカスタマイズ方法などを紹介します。1つの手法を深掘りするのではなく、広く浅くカバーし、現状を把握できるセッションを目指します。

----

スライドの下記ページには動画GIFを使用していますが、こちらでは対応していないので静止画になっています。

[2019-04-30] 動画GIFは全てこちらにアップしました：https://cloudup.com/iOgJ6BiZBXb

p19: CoBlocks に付属している Block Manager
p24: 5.2からコアに実装されたブロックマネージャー
p28: ブロックスタイルとは
p35: 実装したブロックスタイルサンプルの動作
p44: Guidepost プラグイン
p50: ブロック・エディター時の Yoast SEO の動作
p51: ブロック・エディター時の The Events Calendar の動作
p52: ブロック・エディター時の Ninja Forms の動作

Transcript

1. Toru Miki waviaei WordCamp Haneda 2019 April 20, 2019
10. 0 30 31 60 61
11. 69 WordPress 5.2 Beta 3 WordPress 5.0/5.1 64
14. 5.2
15. Disable Gutenberg Blocks Block Manager https://wordpress.org/plugins/disable-gutenberg-blocks/
16. Gutenberg Manager
 https://wordpress.org/plugins/manager-for-gutenberg/
17. 5.2
18. CoBlocks
 https://wordpress.org/plugins/coblocks/
20. 5.2
21. Block Filters - Gutenberg Handbook
 https://wordpress.org/gutenberg/handbook/designers-developers/developers/ lters/block- lters/#hiding-blocks-from-the-inserter function my_plugin_allowed_block_types( $allowed_block_types, $post ) { if ( $post->post_type !== 'post' ) { return $allowed_block_types; } return array( 'core/paragraph' ); } add_filter( 'allowed_block_types', 'my_plugin_allowed_block_types', 10, 2 ); return
22. 5.2
23. WordPress 5.2 Block Manager (WordPress 5.2 beta-3)
29. BlockStyle
31. React
32. ؆୯Ͱ͢ʂ ඞཁͳϑΝΠϧ͸3ͭɻ ※୯ମͷϓϥάΠϯͱͯ͠࡞ͬͨ৔߹
33. <?php /** * Plugin Name: Block Styles Example * Description: 「装う」＝ブロックスタイルを追加、するプラグインの例。 * Author: Toru Miki */ /** * Enqueue JavaScript */ function block_style_example_enqueue_javascript() { wp_enqueue_script( 'block-style-example-script', plugins_url( 'block-style.js', __FILE__ ), array( 'wp-blocks') ); } add_action( 'enqueue_block_editor_assets', 'block_style_example_enqueue_javascript' ); /** * Enqueue Stylesheet */ function block_style_example_enqueue_stylesheet() { wp_enqueue_style( 'block-style-esample-stylesheet', plugins_url( 'block-style.css', __FILE__ ) ); } add_action( 'enqueue_block_assets', 'block_style_example_enqueue_stylesheet' ); block-style-example.php block-style.js block-style.css
34. wp.blocks.registerBlockStyle( 'core/paragraph', { name: 'blue-paragraph', label: 'Blue Paragraph' } ); block-style-example.js .is-style-blue-paragraph { background-color: blue; color: #fff; padding: 0.4em 1em; } block-style-example.css
38. = BlockType
40. 1 or Gutenberg
41. 1 UI UX
42. Block Gallery https://wordpress.org/plugins/block-gallery/
43. Guidepost https://sortabrilliant.com/guidepost/
45. ❓
46. Atomic Blocks https://atomicblocks.com/
47. CoBlocks https://coblocks.com/
48. Snow Monkey Blocks https://ja.wordpress.org/plugins/snow-monkey-blocks/
49. or Gutenberg / /
50. Yoast SEO https://ja.wordpress.org/plugins/wordpress-seo/
51. The Events Calendar https://theeventscalendar.com/tag/going-gutenberg/
52. Ninja Forms https://wordpress.org/plugins/ninja-forms/
54. PHP
55. Advanced Custom Fields 5.8 PRO https://www.advancedcustom elds.com/blog/acf-5-8-introducing-acf-blocks-for-gutenberg/
56. Block Lab https://getblocklab.com/
57. Gutenberg Custom Fields https://ja.wordpress.org/plugins/gutenberg-custom- elds/
58. React
61. 5.2 1 or Gutenberg
62. https://pro les.wordpress.org/toru/ https://torumiki.com https://waviaei.com waviaei Toru Miki Thank you!