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 full-size slide

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

    View full-size slide

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

    View full-size slide

  4. Gutenberg Manager

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

    View full-size slide

  5. CoBlocks

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

    View full-size slide

  6. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  9. /**
    * 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 full-size slide

  10. 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 full-size slide

  11. 1
    or Gutenberg

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. CoBlocks
    https://coblocks.com/

    View full-size slide

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

    View full-size slide

  17. or Gutenberg
    /
    /

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. 5.2
    1
    or Gutenberg

    View full-size slide

  25. https://pro les.wordpress.org/toru/
    https://torumiki.com
    https://waviaei.com

    waviaei
    Toru Miki

    Thank you!

    View full-size slide