Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Edd44584a6d94211d9b7b33b57e4a875?s=47 Toru
April 20, 2019

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

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 の動作

Edd44584a6d94211d9b7b33b57e4a875?s=128

Toru

April 20, 2019
Tweet

Transcript

  1. Toru Miki waviaei WordCamp Haneda 2019 April 20, 2019

  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. 0 30 31 60 61

  11. 69 WordPress 5.2 Beta 3 WordPress 5.0/5.1 64

  12. None
  13. None
  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/

  19. None
  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)

  24. None
  25. None
  26. None
  27. None
  28. None
  29. BlockStyle

  30. None
  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
  35. None
  36. None
  37. None
  38. = BlockType

  39. None
  40. 1 or Gutenberg

  41. 1 UI UX

  42. Block Gallery https://wordpress.org/plugins/block-gallery/

  43. Guidepost https://sortabrilliant.com/guidepost/

  44. None
  45. Atomic Blocks https://atomicblocks.com/

  46. CoBlocks https://coblocks.com/

  47. Snow Monkey Blocks https://ja.wordpress.org/plugins/snow-monkey-blocks/

  48. or Gutenberg / /

  49. Yoast SEO https://ja.wordpress.org/plugins/wordpress-seo/

  50. The Events Calendar https://theeventscalendar.com/tag/going-gutenberg/

  51. Ninja Forms https://wordpress.org/plugins/ninja-forms/

  52. None
  53. PHP

  54. Advanced Custom Fields 5.8 PRO https://www.advancedcustom elds.com/blog/acf-5-8-introducing-acf-blocks-for-gutenberg/

  55. Block Lab https://getblocklab.com/

  56. Gutenberg Custom Fields https://ja.wordpress.org/plugins/gutenberg-custom- elds/

  57. React

  58. None
  59. None
  60. 5.2 1 or Gutenberg

  61. https://pro les.wordpress.org/toru/ https://torumiki.com https://waviaei.com waviaei Toru Miki Thank you!