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

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

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

Toru

April 20, 2019
Tweet

More Decks by Toru

Other Decks in Technology

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