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

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
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. 0 30
    31 60
    61
    

    View Slide

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

    View Slide

12. View Slide

13. View Slide

14. 5.2
    

    View Slide

15. Disable Gutenberg Blocks Block Manager
    https://wordpress.org/plugins/disable-gutenberg-blocks/
    

    View Slide

16. Gutenberg Manager

    https://wordpress.org/plugins/manager-for-gutenberg/
    

    View Slide

17. 5.2
    

    View Slide

18. CoBlocks

    https://wordpress.org/plugins/coblocks/
    

    View Slide

19. View Slide

20. 5.2
    

    View Slide

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
    

    View Slide

22. 5.2
    

    View Slide

23. WordPress 5.2 Block Manager
    (WordPress 5.2 beta-3)
    

    View Slide

24. View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. BlockStyle
    

    View Slide

30. View Slide

31. React
    

    View Slide

32. ؆୯Ͱ͢ʂ
    ඞཁͳϑΝΠϧ͸3ͭɻ
    ※୯ମͷϓϥάΠϯͱͯ͠࡞ͬͨ৔߹
    

    View Slide

33. /**
    * 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
    

    View Slide

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
    

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. =
    BlockType
    

    View Slide

39. View Slide

40. 1
    or Gutenberg
    

    View Slide

41. 1
    UI UX
    

    View Slide

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

    View Slide

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

    View Slide

44. View Slide

45. ❓
    

    View Slide

46. Atomic Blocks
    https://atomicblocks.com/
    

    View Slide

47. CoBlocks
    https://coblocks.com/
    

    View Slide

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

    View Slide

49. or Gutenberg
    /
    /
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

53. View Slide

54. PHP
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

58. React
    

    View Slide

59. View Slide

60. View Slide

61. 5.2
    1
    or Gutenberg
    

    View Slide

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

    View Slide