Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor

Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor

Kansai WordPress Meetup Osaka の登壇資料です。
サンプルコード:https://github.com/torounit/my-first-block

E03953e0c18d776fead147601fdc3899?s=128

Toro_Unit (Hiroshi Urabe)

November 16, 2019
Tweet

Transcript

  1. ϒϩοΫΤσΟλʔ ͷΧελϚΠζํ๏Λ Ϛελʔͯ͠ϥΠόϧʹ ࠩΛ͚ͭΑ͏ʂʂʂʂ 1

  2. ϥΠόϧͬͯͳΜ΍ͶΜ 2

  3. Block Editor ΧελϚΠζೖ໳ Toro_Unit @Kansai WP Meetup in Osaka 3

  4. $ whoami 4

  5. Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) • Frontend Developer • WordPress

    Plugin and Theme Developer Github: @torounit Twitter: @Toro_Unit 5
  6. 6

  7. Plugins and Themes • Custom Post Type Permalinks • Advanced

    Posts Blocks • Simple Post Type Permalinks • Powerful Posts Per Page (PPPP) • Vanilla • and more... 7
  8. 8

  9. WordPress Meetup Map • React Ͱग़དྷͯ·͢ɻ • https://github.com/torounit/wp-meetup-map • ϓϧϦΫ͍ͩ͘͞ɻ

    9
  10. 10

  11. ௕໺ݝদຊࢢ͔Β͖·ͨ͠ • Shinshu WordPress Meetup • ຖճϐβ৯ͬͯ·͢ɻ • ߚ༿͕ݟ͝Ζɻ৽ͦ͹ɻ 11

  12. ຊηογϣϯʹ͍ͭͯ ϞμϯJSͷ࿩͕͍Ζ͍Ζग़͖ͯ·͢ɻͦͪΒͷղઆ ͸ಛʹ͠·ͤΜɻ ʢ͍ͯ͏͔ऴΘΒΜʣ ࢀߟʹͳΔࢿྉ • https://speakerdeck.com/likr/re-introduction-to- modern-javascript • https://jsprimer.net/

    • https://developer.mozilla.org 12
  13. αϯϓϧίʔυʹ͍ͭͯ ΊͪΌͪ͘Όίʔυ͕ग़͖ͯ·͢ɻ https://github.com/torounit/my-first-block ʹࠓճͷσϞ͸ެ։͍ͯ͠·͢ɻ tag / branch Ͱɺ͍Ζ͍Ζ෼͚ͯ·͢ɻ 13

  14. ࣭໰ʹ͍ͭͯ • ղΒͳ͍͜ͱ͕͋ͬͨΒͦͷ৔Ͱฉ͍ͯ΋Βͬͯେৎ෉Ͱ͢ɻ • ͨͩ͠ɺ࣌ؒͱମྗͷؔ܎Ͱͦͷ৔Ͱ͓౴͑ग़དྷͳ͍৔߹͕͋Γ· ͢ɻ • 120ϖʔδ͘Β͍͋ΔͷͰɺؾʹͳͬͨ͜ͱͳͲ͸ɺπΠʔτ͢Δ ͳΓ͍͚ͯͨͩ͠Ε͹ɺޙͰ౴͑Δ͔΋͠Ε·ͤΜɻ 14

  15. ϒϩοΫΤσΟλʔΧελϚΠζೖ໳ 15

  16. ͷ·͑ʹ 16

  17. ͦ΋ͦ΋ WordPress ʹ͓͚ΔΤσΟλͷ໾ׂͱ͸ 17

  18. WordPress ͱ͍͏ CMS ͷ HTML؅ཧ • post_content ͷΧϥϜʹ HTML ΛอଘɻͦΕΛग़ྗ͢Δ૷ஔɻ

    • HTML Λԣஅతʹ؅ཧ͢Δ࢓૊ΈͰ͋Γɺ୯Ұͷϖʔδͦͷ΋ͷΛ؅ཧ͢Δ ࢓૊ΈͰ͸ͳ͍ɻਤॻؗɻ • σʔλΛݩʹ HTML Λੜ੒͢ΔΘ͚Ͱ͸ͳ͍ɻ΄΅׬੒඼ͷ HTML ʹςʔ Ϛͱ͍͏෰Λணͤͯ഑৴͢Δ૷ஔɻ • ͍ͬͯ͏͔࠷ॳ (0.71)͸ɺςʔϚ͢Βແ͔ͬͨɻ • https://github.com/mt8/wbkobe77/blob/master/index.php 18
  19. 19

  20. • ͨͱ͑͹ɺconcrete5 ͱ͍͏ CMS ͸ɺϒϩοΫ͝ͱʹσʔλϕʔε ͷ table ͕ଘࡏ͢ΔΒ͍͠ɻ༷ʑͳ table ͔ΒσʔλΛҾͬுͬͯ

    ͖ͯ̍ͭͷ HTML Λੜ੒͢Δɻ 20
  21. • ࡶʹݴ͏ͱɺHTMLͰॻ͔ΕͨจॻୡΛΧςΰϦʔͱ͔೔෇ͱ͔Λ ͚ͭͯ؅ཧग़དྷΔΑ͏ʹ͠Α͏ʂ͕ WordPress ͷίϯςϯπ؅ཧɻ ͭ·Γϒϩάɻ • ͍͍ͤͥ ϔομͱϑολ͘Β͍͸ڞ௨Խͯ͠΍Ζ͏ɻఔ౓ɻ 21

  22. ͦΜͳ WordPress ʹ͓͚ΔΤσΟλʔͷ໾ׂͱ͸ 22

  23. HTMLΘ͔Βͳ͍ͻͱͰ΋ɺ HTMLΛ࡞ΕΔΑ͏ʹ͢Δʂ 23

  24. ʮHTMLΘ͔Βͳ͍ͻͱͰ΋ HTMLΛ࡞ΕΔΑ͏ʹ͢Δʂʯ • HTML Θ͔Βͳ͍ਓ͕৮ͬͯ΋ɺpost_content ʹ HTML ΛอଘͰ͖ ΔΑ͏ʹ͢Δɺͱ͍͏͜ͱɻ •

    DBʹอଘ͢Δ΋ͷ͸ɺ׬੒͞Εͨ HTML 24
  25. ͍ͬͯ͏͔΋ͱ΋ͱϒϩάιϑτʂ since 2003.05.27 25

  26. ϒϩοΫΤσΟλʔͷΧελϚΠζ 26

  27. ςʔϚʹ͍ͭͯ ࠓճ͸࣌ؒͱମྗͷؔ܎ͰऔΓѻΘͳ͍ͷͰɺެࣜυΩϡϝϯτಡΜͰ Լ͍͞ɻ https://developer.wordpress.org/block-editor/developers/themes/ ςʔϚʹهड़͢΂͖ CSSͷ࿩ɺΧϥʔύϨοτɺจࣈαΠζઃఆɺetc.. ౳͕ॻ͍ͯ͋Γ·͢ɻ ςʔϚϢχοτςετͷ࠷৽൛ʢ೔ຊޠ൛͸຋༁தͳͷͰͱΓ͋͑ͣӳ ޠ൛ʣಥͬࠐΜͰݟΔͱͳΜͱͳ͘΍Δ΂͖͜ͱ͸ݟ͑·͢ɻ 27

  28. ͱΓ͋͑ͣɺeditor-styles ͸ඞͣઃఆ͢ΔΑ͏ʹ͠·͠ΐ͏ɻ <?php function my_theme_setup() { add_theme_support('editor-styles'); add_editor_style( 'style-editor.css' );

    } add_action( 'after_setup_theme'); ϨΠΞ΢τ΍σβΠϯͷࣗ༝౓্͕͕ͬͯ΋ɺαΠτͷදࣔͱΤσΟλ ͷݟͨ໨͕Ұக͍ͯ͠ͳ͍ͱ͋Μ·Γҙຯͳ͍ɻ 28
  29. editor-style ΛΘ͟Θ͟࡞ΔͷΊΜͲ͘͞ ͍ͬͯਓ͸ɺ ࢖͍΍͍͢WordPressͷͨΊ ͷCSSͷͭ͘Γ͔ͨ ͬͯ࿩Λɺ2015೥ͷ WordBench Osaka Ͱ΍ͬͯΔͷͰͦΕಡΜ ͰԼ͍͞ɻ

    https://www.slideshare.net/Toro_Unit/ wordpresscss ݹ͍৘ใ΋͋Γ·͕͢ɺ͋Μ·Γߟ͑ํม Θͬͯ·ͤΜɻ๻͸ SMACSS + BEM ͬͯײ ͡Ͱ CSSॻ͍ͯ·͢ɻ 29
  30. ΤσΟλΛΧελϚΠζ͢Δํ๏ @wordpress/blocks registerBlockStyle, registerBlockType @wordpress/plugins registerPlugin @wordpress/hooks addFilter, addAction 30

  31. ΤσΟλΛΧελϚΠζ͢Δํ๏ @wordpress/blocks registerBlockStyle, registerBlockType @wordpress/plugins registerPlugin @wordpress/hooks addFilter, addAction ʹ͍ͭͯ࿩͠·͢ɻ

    31
  32. طଘͷϒϩοΫͷ֦ு • ·ͣ͸ɺ৽͍͠ϒϩοΫΑΓ΋طଘͷϒϩοΫͷ֦ுͰͲ͏ʹ͔Ͱ ͖ͳ͍͔ʁΛߟ͑Δɻ • ͭ·Γ class ଐੑΛ෇༩͠ɺCSS ͰσβΠϯΛΧελϚΠζ͢Δɻ 32

  33. 33

  34. ϒϩοΫελΠϧ GUI ͰɺϒϩοΫʹΫϥεΛઃఆग़དྷΔɻ͍ͭͰʹϓϨϏϡʔ΋͍ͭͯ ͘Δɻඇৗʹศརɻ ઃఆ͞ΕΔ஋͸ɺis-style-hoge ͷΑ͏ͳܗࣜɻ "ߴ౓ͳઃఆ" ύωϧ಺ͷ "௥ՃCSS Ϋϥε"

    Λૢ࡞͍ͯ͠Δ͚ͩɻ Documentation : https://developer.wordpress.org/block-editor/ developers/filters/block-filters/#block-style-variations 34
  35. ࣮૷ํ๏ɻ ΤσΟλʔʹಡ·ͤΔ js ͷઃఆɻwp-blocks Λґଘؔ܎ʹࢦఆ <?php function my_block_editor_assets() { wp_enqueue_script(

    'my-block-editor-style', 'path/to/my-block-editor-style.js', array( 'wp-blocks' ) ); } add_action( 'enqueue_block_editor_assets', 'my_block_editor_assets' ); 35
  36. wp.blocks.registerBlockStyle ͰɺελΠϧͷઃఆΛهड़ɻ const { registerBlockStyle } = wp.blocks; registerBlockStyle( 'core/quote',

    { name: 'hoge', label: '΄͛' } ); 36
  37. ελΠϧ͕௥Ճ͞ΕΔɻeditor-style ΛͪΌ Μͱઃఆ͍ͯ͠Ε͹ϓϨϏϡʔʹ΋ద༻͞Ε Δɻ • Ϙλϯͷؙ֯ελΠϧ • ςʔϒϧͷελΠϧ ͳͲ΋ಉ͡࢓૊Έɻ ԼखʹΧελϜϒϩοΫΛ࡞ΔΑΓɺ͜ΕΛ

    ֮͑Δํ͕༗༻ੑߴ͍ɻ ϒϩοΫΛࣗ࡞͢Δࡍ΋ɺσβΠϯͷόϦ ΤʔγϣϯΛ૿΍͢ͳΒ͜ΕΛ࢖͏ɻ 37
  38. ΧελϜϒϩοΫ։ൃ 38

  39. ֓ཁ • wp_register_script Ͱ js ϑΝΠϧΛಡΈࠐΉɻͦͷ͋ͱ͸ɺJSͰ ʢͱ͍͏ΑΓɺReact ͰʣΰϦΰϦ͢Δɻ • PHPͰͷϨϯμϦϯάΛهड़͢Δ͜ͱͰಈతͳཁૉ

    (γϣʔτίʔ υɺ΢ΟδΣοτͷΑ͏ͳ) Λఏڙग़དྷΔɻ • ex. WP_Query Ͱ౤ߘͷ৘ใΛදࣔɻ • JSʢ React ʣ ͸ඞͣ࢖͏ɺPHP ͸ͨ·ʹ࢖͏ఔ౓ɻ 39
  40. Note: JSX ͱ͔ϞμϯJSͱ͔Ϗϧυͨ͠Γͬͯ೉͍͠ͱ͔Α͘ ฉ͚͘Ͳ • ެࣜͷαϯϓϧʹɺਃ͠༁ఔ౓ʹ ES5 ͷαϯϓϧ͕͋Δ͚Ͳɺ։ൃ ͸ɺϞμϯJSͰߦΘΕ͍ͯΔɻ •

    ೴಺ʹ Babel ੵΜͰͳ͍ਓ͸ɺJSX + ϞμϯJS ॻ͍ͨ΄͏͕͍͍ɻ • ๻͸ੵΜͰͳ͍Ͱ͢ɻ 40
  41. React Ή͔͍ͭ͠ ? • React ΋ษڧ͠Α͏ɻ͋Μͳͷ HTML Έ͍ͨͳ΋ͷͩʢચ೴ • ΧελϜϒϩοΫ։ൃͳΒɺHTML

    ʹໟ͕ੜ͑ͨҐͰ৐Γ੾ΕΔέʔε ΋݁ߏ͋Δɻ • ͪΐͬͱͨ͠ϞϊΛ࡞Δͷ͸͞΄Ͳ೉͘͠ͳ͍ɻߴػೳͳϞϊͭ͘Ζ͏ͱ ͢Δͱ೉͍͠ɻ • ͱ͍͏͔ɺঢ়ଶ؅ཧ / ඇಉظ / ௨৴ / GUIͰΰϦΰϦ΍Δͷ͕ͦ΋ͦ΋೉ ͍͠ɻͦͷ೉͠͞Λղܾ͢ΔϞϊͷ͕̍ͭ React. 41
  42. ΧελϜϒϩοΫ։ൃͳΒׂͱͳΜͱ͔ͳΔɻ • WordPress ͔ΒσʔλΛऔಘ͢ΔύοέʔδͳͲ΋͋ΔͷͰɺͦ͜ ·Ͱ React ྗແͯ͘΋͍͚Δɻ • ΋ͪΖΜ React

    ྗɺJS ྗ͕͋Ε͹໓஡ۤ஡͍Ζ͍Ζग़དྷΔ • ex. ֎෦ͷಠࣗAPIΛ༻͍ͯΰϦΰϦ΍Δͱ͔ɻ 42
  43. αΠτ੍࡞ͷ৔߹ େ఍ɺσβΠϯΛ࣮ݱ͢ΔͨΊͷ div ΛϒϩοΫʹ͍ͨ͠έʔεͱ͔ ͕ଟ͍ͷͰ͸ɻ ͍͍ͩͨ͜Μͳײ͡ͷίʔυɻ 43

  44. import { registerBlockType } from '@wordpress/blocks'; import { InnerBlocks }

    from '@wordpress/block-editor'; const edit = ( { className } ) => ( <section className={ className }> <div className="wp-block-my-block-section__container"> <InnerBlocks /> </div> </section> ); const save = ( { className } ) => ( <section className={ className }> <div className="wp-block-my-block-section__container"> <InnerBlocks.Content /> </div> </section> ); 44
  45. registerBlockType( 'my-block/section', { title: 'section', description: 'section', icon: 'text-page', category:

    'layout', supports: { align: [ 'wide', 'full' ], anchor: true, }, edit, save, } ); 45
  46. ͜Μ͚ͩɻ ͳΜͱ͔ͳΔɻ 46

  47. ΍ͬͯΈΑ͏ɻ ࢀߟࢿྉ΋νϡʔτϦΞϧ΋͋Δɻ • https://developer.wordpress.org/block-editor/tutorials/block- tutorial/writing-your-first-block-type/ • ެࣜͷνϡʔτϦΞϧɻ • https://github.com/WordPress/gutenberg-examples •

    ެࣜͷαϯϓϧɻΑ͘ग़དྷͯΔɻ 47
  48. ϒϩοΫΛͭͬͯ͘ΈΔ 48

  49. ४උɻ ͱΓ͋͑ͣద౰ʹ WordPress ͷϓϥάΠϯΛ࡞੒͠·͢ɻ ϑΝΠϧߏ੒ - my-first-block - package.json -

    my-first-block.php ( js ͷొ࿥ͱ͔ɺWordPressϓϥάΠϯຊମ ) - src/index.js ( ͜͜ʹΰϦΰϦ͢Δɻ) 49
  50. package.json { "name": "my-first-block", "version": "0.0.1", "license": "GPL2.0+", "devDependencies": {

    "@wordpress/scripts": "^5.0.0" }, "scripts": { "start": "wp-scripts start", "build": "wp-scripts build", } } ͜Ε͚ͩͰ OK 50
  51. @wordpress/scripts https://www.npmjs.com/package/@wordpress/scripts • JSͷࣗಈϏϧυͱ͔ɺBabel ͱ͔ɺWebpack ͱ͔ɺESLint ͱ͔ɺ WordPressϓϥάΠϯ։ൃ؀ڥͷߏஙʢཁ docker-compose ʣͱ͔

    ͳΜͰ΋΍ͬͯ͘ΕΔ͍͢͝Ϡπɻ • PostCSS / SCSS ͷϏϧυ͸ࠓͷͱ͜Ζग़དྷͳ͍͚Ͳɺ௥Ճ͞ΕΔ͔ ΋ɻhttps://github.com/WordPress/gutenberg/issues/14801 51
  52. wp-script start or wp-script build Λ͢Δͱ src/index.js ͔Βɺ • build/index.js

    • build/index.asset.php Λు͖ग़͢ɻ 52
  53. • @wordpress/blocks -> wp.blocks ͷΑ͏ʹɺάϩʔόϧม਺Λࢀ র͢ΔΑ͏ʹม׵ͯ͘͠ΕΔɻ import { registerBlockStyle }

    from '@wprdpress/blocks' Λɺ const { registerBlockStyle } = wp.blocks; Έ͍ͨʹͯ͘͠ΕΔɻ • jQuery ౳ͷ WordPress ʹಉࠝ͞Ε͍ͯΔJS΋ಉ༷ɻ • ςʔϚ։ൃͳͲͰ΋ศརʹ࢖͑Δɻ 53
  54. my-first-block.php function my_first_block_register_block() { $asset_file = include( plugin_dir_path( __FILE__ )

    . 'build/index.asset.php'); wp_register_script( 'my-first-block', plugins_url( 'build/index.js', __FILE__ ), $asset_file['dependencies'], $asset_file['version'] ); // block ͷొ࿥ɻ register_block_type( 'my-first-block/hello', array( 'editor_script' => 'my-first-block', ) ); } add_action( 'init', 'my_first_block_register_block' ); 54
  55. build/index.asset.php wp_register_script ͢Δͱ͖ͷɺґଘؔ܎ɺversion ౳ΛɺJS ͔Βࣗಈతʹ൑ผͯ͠࡞੒͞Ε Δɻࠓ·ͰखಈͰ΍ͬͯͨͷ͕ΞϗΈ͍ͨʹࢥ͑Δ͘Β͍ศརɻ <?php return array( 'dependencies'

    => array( 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose','wp-data', 'wp-element', 'wp-i18n', 'wp-polyfill' ), 'version' => '3ba4a1cc34f9a198d6519b52f8622629' ); 55
  56. register_block_type ϒϩοΫͷొ࿥Λߦ͏ɻࣄલʹ JS౳ͷొ࿥͕ඞཁͳͷͰɺwp_register_script Ͱ֤ࣗ΍ͬͯ ͍ͩ͘͞ɻ <?php register_block_type( 'ϒϩοΫϥΠϒϥϦɾϓϥάΠϯ໊/ϒϩοΫ໊', array( 'script'

    => 'ొ࿥ͯ͋͠Δjsͷ໊લɺϑϩϯτ/؅ཧը໘༻', 'style' => 'ొ࿥ͯ͋͠ΔCSSͷ໊લɺϑϩϯτ/؅ཧը໘༻', 'editor_script' => 'ొ࿥ͯ͋͠Δjsͷ໊લɺ؅ཧը໘༻', 'editor_style' => 'ొ࿥ͯ͋͠ΔCSSͷ໊લɺ؅ཧը໘༻', ) ); editor_script ͚ͩ͋Ε͹OK. ϓϥάΠϯଆͰ༻ҙͨ͠CSSͱ͔Λಡ·ͤͨΓ΋Ͱ͖Δɻ 56
  57. note: ଟݴޠԽͱ͔͸ެࣜͷexampleͱ͔ݟͯɻ https://make.wordpress.org/core/2018/11/09/new-javascript-i18n- support-in-wordpress/ 57

  58. ͓·ͨͤ͠·ͨ͠ʂ Α͏΍͘ϒϩοΫ։ൃʂ 58

  59. import { registerBlockType } from '@wordpress/blocks'; // const { registerBlockType

    } = wp.blocks ʹม׵͞ΕΔ registerBlockType( 'my-first-block/hello', { title: 'hello', icon: 'palmtree', // Dashicons. ௚઀ <svg></svg>ͷࢦఆ΋ग़དྷΔ category: 'common', // ΠϯαʔλʔͷͲͷύωϧʹදࣔ͢Δ͔ɻ edit({ className } ) { return ( <div className={ className }>ΤσΟλʔͩΑɻ</div> ); }, save({ className } ) { return ( <div className={ className }>อଘ͞ΕΔσʔλɺ࣮ࡍʹදࣔ͞ΕΔςΩετɻ</div> ); }, } ); 59
  60. 60

  61. ΧελϜϒϩοΫ͕Ͱ͖ͨʂ 61

  62. ·͊ɺ͜Ε͚ͩͩͱͦ͜·Ͱ࢖͍ಓ͸ͳ͍ɻʢ࠶ར༻ϒϩοΫͰ͑͑΍ ΜͬͯͳΔʣ 62

  63. ฤूՄೳྖҬΛͭ͘Δʂ 63

  64. ௕͘ͳΔͷͰɺίʔυΛ෼ׂɻ 64

  65. import { registerBlockType } from '@wordpress/blocks'; import { RichText }

    from '@wordpress/block-editor'; const edit = ( { className, attributes: { text }, setAttributes } ) => { const onChange = ( value ) => { return setAttributes( { text: value } ); }; return ( <div className={ className }> <TextControl value={ text } onChange={ onChange } /> </div> ); }; const save = ( { className, attributes: { text } } ) => { return ( <div className={ className }> <div className="text">{ text }</div> </div> ); }; 65
  66. registerBlockType( 'my-first-block/hello', { title: 'hello', icon: 'palmtree', category: 'common', attributes:

    { text: { type: 'string', default: '', }, }, edit, save, } ); 66
  67. registerBlockType( 'my-first-block/hello', { title: 'hello', icon: 'palmtree', category: 'common', attributes:

    { text: { type: 'string', default: '', }, }, edit, save, } ); 67
  68. import { registerBlockType } from '@wordpress/blocks'; import { TextControl }

    from '@wordpress/components'; const edit = ( { className, attributes: { text }, setAttributes } ) => { const onChange = ( value ) => { return setAttributes( { text: value } ); }; return ( <div className={ className }> <TextControl value={ text } onChange={ onChange } /> </div> ); }; const save = ( { className, attributes: { text } } ) => { return ( <div className={ className }> <div className="text">{ text }</div> </div> ); }; 68
  69. const edit = ( { className, attributes: { text },

    setAttributes } ) => { const onChange = ( value ) => { return setAttributes( { text: value } ); }; return ( <div className={ className }> <TextControl value={ text } onChange={ onChange } /> </div> ); }; 69
  70. <TextControl /> • @wordpress/components ఏڙ͞ΕΔίϯϙʔωϯτɻinput λάΛ ు͖ग़͢ɻϑΥʔϜͷ෦඼ͳͲ͸ɺ΄΅શͯ༻ҙ͞Ε͍ͯΔɻ • ex. <SelectControl

    />, <DateTime /> @wordpress/components ʹ͸ଞʹ΋༷ʑͳίϯϙʔωϯτ͕͋Δɻ Component Reference: https://developer.wordpress.org/block- editor/components/ 70
  71. attributes ϓϩύςΟ registerBlockType( 'my-first-block/hello', { title: 'hello', icon: 'palmtree', category:

    'common', attributes: { text: { type: 'string', default: '', }, }, edit, save, } ); อଘ͢ΔσʔλͷܗࣜΛఆٛɻσʔλܕɺσϑΥϧτ஋ͳͲɻ഑ྻͳͲ΋ࢦఆՄೳɻ 71
  72. attirubutes, setAttirubutes const edit = ( { className, attributes: {

    text }, setAttributes } ) => { const onChange = ( value ) => { return setAttributes( { text: value } ); }; return ( <div className={ className }> <TextControl value={ text } onChange={ onChange } /> </div> ); }; TextControl ͷத਎͕มߋ͞ΕͨΒɺݱࡏͷ attributes Λ࠶ઃఆɻߋ৽͢Δ஋ͷΈ Λهड़ɻ https://developer.wordpress.org/block-editor/developers/block-api/block- attributes/ 72
  73. <div class="wp-block-my-first-block-hello"><div class="text">Hello!!!</div></div> 73

  74. <!-- wp:my-first-block/hello {"text":"Hello!!!"} --> <div class="wp-block-my-first-block-hello"><div class="text">Hello!!!</div></div> <!-- /wp:my-first-block/hello -->

    attirbutes ͸ɺίϝϯτͱͯ͠อଘ͞Ε͍ͯΔɻ( the_cotent Ͱు͖ग़ ͢ࡍʹ͸ɺϑΟϧλʔͰ࡟আ͞ΕΔ) 74
  75. ΋ͬͱ;ͭ͏ͷϒϩοΫͬΆ͍ͨ͘͠ɻ ΤσΟλʹ input ͕͋Δͷ͸ͪΐͬͱɻɻɻ 75

  76. <RichText /> ฤूग़དྷΔςΩετΛఏڙ͢ΔίϯϙʔωϯτɻίΞͷϒϩοΫ΋ςΩετฤू ग़དྷΔ΋ͷ͸͍͍ͩͨ͜ΕͰग़དྷͯΔɻվߦͱ͔΋औΓѻ͑Δɻ • <RichText /> : ΤσΟλը໘༻ɻ •

    <RichText.Content /> : HTMLΛు͖ग़͢༻ɻ <RichText.Content tagName='p' value='Hello' /> <p>hello</p> https://developer.wordpress.org/block-editor/developers/richtext/ 76
  77. import { registerBlockType } from '@wordpress/blocks'; import { RichText }

    from '@wordpress/block-editor'; const edit = ( { className, attributes: { text }, setAttributes } ) => { const onChange = ( value ) => setAttributes( { text: value } ); return ( <div className={ className }> <RichText tagName="div" className="text" value={ text } onChange={ onChange } /> </div> ); }; const save = ( { className, attributes: { text } } ) => { return ( <div className={ className }> <RichText.Content tagName="div" className="text" value={ text } /> </div> ); }; 77
  78. 78

  79. ྑ͍ײ͡ʹͳͬͨ!! 79

  80. Ͱ΋ɻɻɻ <!-- wp:my-first-block/hello {"text":"Hello!!!"} --> <div class="wp-block-my-first-block-hello"><div class="text">Hello!!!</div></div> <!-- /wp:my-first-block/hello

    --> ʮHello!!!ʯॏෳͯ͠Δɻίϝϯτ͔ΒͰ͸ͳ͘ɺHTML͔Β௚઀ɺ஋ ΛऔΓग़ͤͳ͍͔ʁ 80
  81. attributes: { text: { type: 'string', default: '', }, },

    81
  82. attributes: { text: { type: 'string', source: 'html', selector: '.text',

    default: '', }, }, 82
  83. attributes: { text: { type: 'string', source: 'html', selector: '.text',

    default: '', }, }, 83
  84. <!-- wp:my-first-block/hello --> <div class="wp-block-my-first-block-hello"><div class="text">Hello!!!</div></div> <!-- /wp:my-first-block/hello --> {"text":"Hello!!!"}

    Λফͤͨɻ 84
  85. attirbutes ͷ source Λઃఆ͢Δ͜ͱͰɺ͍Ζ͍ΖͳܗͰऔಘग़དྷ Δɻ ஋ʹΑͬͯ͸ɺͦͷଞͷઃఆ͕ඞཁɻ https://developer.wordpress.org/block-editor/developers/block-api/ block-attributes/ type: array

    ʹ͢Δ͜ͱͰɺෳ਺ͷཁૉΛऔಘग़དྷͨΓ͢Δɻ ϦετͳͲͱҰॹʹ࢖͏ͱඒຯ͍͠ɻ 85
  86. source ʹࢦఆͰ͖Δ஋ • html: innerHTML Λऔಘɻෳ਺ߦͰ΋औಘͯ͠഑ྻʹग़དྷͨΓ͢ Δɻ • text: textContent

    Λऔಘ • attribute : ଐੑ஋Λऔಘ • query: ෳ਺ͷଐੑ΍ɺςΩετͳͲΛऔಘͯ͠ΦϒδΣΫτʹɻ 86
  87. υΩϡϝϯςʔγϣϯʹॻ͍ͯແ͍΋ͷ • children : ࢠཁૉɻ • node / tag :

    ࢖͍Ͳ͜Ζ͕ྑ͘ղΒͳ͍ • property: ιʔείʔυʹ͚͋ͬͨͲͳΜ͔ͩղΒͳ͍ɻ 87
  88. Note: ΧελϜϑΟʔϧυͱͷ࿈ܞ΋ग़དྷΔɻ register_post_meta( 'post', 'my_post_sub_title', array( 'show_in_rest' => true, 'single'

    => true, 'type' => 'string', ) ); attributes: { author: { type: 'string', source: 'meta', meta: 'my_post_sub_title' }, }, ΧελϜϑΟʔϧυͷΩʔΛ post_hoge ͱ͔ʹ͢Δͱಈ͔ͳ͍ͷͰ஫ҙɻ 88
  89. ઃఆมߋग़དྷΔUIɻ https://developer.wordpress.org/block-editor/tutorials/block-tutorial/ block-controls-toolbar-and-sidebar/ InspectorControls, BlockControls αΠυόʔͷઃఆ߲໨(ΠϯεϖΫλ)ɺϒϩοΫͷπʔϧόʔʹ߲໨Λ ௥ՃͰ͖Δɻ 89

  90. const edit = ( props ) => { // ஋ͷ४උͱ͔͍Ζ͍Ζ΍Δɻ

    return ( <div> <InspectorControls> <PanelBody> // ઃఆͱ͔ </PanelBody> </InspectorControls> <BlockControls> <Toolbar controls={ controls } /> </BlockControls> <div> //ϒϩοΫຊମ </div> </div> ) }; 90
  91. InnerBlocks ϒϩοΫͷதʹϒϩοΫΛೖΕΒΕΔϠπɻΧϥϜϒϩοΫɺάϧʔϓϒϩοΫɺJetpack ͷίϯλΫτ ϑΥʔϜ౳Ͱ༻͍ΒΕ͍ͯΔɻallowedBlocks Λࢦఆ͢ΔͱɺதʹೖΕΒΕΔϒϩοΫΛ੍ݶͰ͖Δɻ const edit = ( {

    className } ) => ( <div className={ className }> <InnerBlocks allowedBlocks={ [ 'core/code' ] } /> </div> ); const save = ( { className } ) => ( <div className={ className }> <InnerBlocks.Content /> </div> ); 91
  92. Dynamic Blocks https://developer.wordpress.org/block-editor/tutorials/block-tutorial/ creating-dynamic-blocks/ PHP Λ༻͍ͯɺαʔόʔαΠυͰಈతʹɺϨϯμϦϯά͢ΔϒϩοΫɻ 92

  93. example: Advanced Posts Blocks https://www.wordpress.org/plugins/ advanced-posts-blocks/ • ΧςΰϦʔ/λά/λΫιϊϛʔͱ౤ߘλΠ ϓͰɺߜΓࠐ·Εͨ౤ߘΛදࣔ͢Δɻϒ ϩοΫͳͲΛఏڙɻ

    • TOPϖʔδͷ৽ண৘ใҰཡͱ͔Ͱ࢖͏ɻ 93
  94. 94

  95. ࡞Γํ render_callback ͱɺඞཁͰ͋Ε͹ɺattributes Λࢦఆɻ௨ৗͷϒϩοΫͱҧ͍ɺattributes Ͱࢦఆ͠ͳ͍ͱɺclassName ΛҾͬுͬͯདྷΕͳ͍ɻ register_block_type( 'my-first-block/hello', array( 'editor_script'

    => 'my-first-block', 'attributes' => [ 'className' => [ 'type' => 'string', 'default' => '', ], ], 'render_callback' => 'my_first_block_render' ) ); 95
  96. example.1 ୈ2Ҿ਺ʹ͸ɺsave ͞ΕͨHTML͕ͦͷ··౉͞ΕΔͷͰɺ͜ΕΛPHPଆͰɺද੍ࣔ ޚɻ function my_first_block_render( $attributes, $content ) {

    if ( get_current_user_id() ) { return $content; } return sprintf( '<div class="%1$s">login to see this content.</div>', $attributes['className'] ); } 96
  97. JSଆ͸ී௨ʹॻ͘ɻ const edit = ( { className } ) =>

    ( <div className={ className }> <InnerBlocks /> </div> ); const save = ( { className } ) => ( <div className={ className }> <InnerBlocks.Content /> </div> ); 97
  98. <!-- wp:my-first-block/hello --> <div class="wp-block-my-first-block-hello"><!-- wp:paragraph --> <p>ͳ͍͠ΐ͹ͳ͠ɻ</p> <!-- /wp:paragraph

    --></div> <!-- /wp:my-first-block/hello --> 98
  99. ࢖͍Ͳ͜Ζ • ϩάΠϯϢʔβʔʹͷΈݟ͍ͤͨίϯςϯπɻ • ظؒݶఆϞϊɻ • ͜ΕͰA/BςετΛϒϩοΫ୯ҐͰ΍ΔϠπ͕͋Δͱ͔ฉ͍ͨ͜ͱ ͋Δɻ • InnerBlocks

    ͱηοτͰ࢖͏ίτ͕ଟͦ͏ɻ 99
  100. example.2 function my_first_block_render( $attributes, $content ) { if ( get_current_user_id()

    ) { return sprintf( '<div class="%1$s">Hello %2$s !!</div>', $attributes['className'], wp_get_current_user()->display_name ); } } 100
  101. import { registerBlockType } from '@wordpress/blocks'; import { useSelect }

    from '@wordpress/data'; // JS ͰίΞͷσʔλΛҾͬுͬͯ͘Δɻ export const useCurrentUser = () => { return useSelect( ( select ) => { return select( 'core' ).getCurrentUser(); } ); }; const edit = ( { className } ) => { const { name } = useCurrentUser(); return ( <div className={ className }> Hello { name } !! </div> ); }; // શͯ PHP ͰϨϯμϦϯά͢Δ৔߹͸ɺsave ͸ null. const save = () => null; 101
  102. <!-- wp:my-first-block/hello {"className":"wp-block-my-first-block-hello"} /--> ͳײ͡Ͱอଘ͞ΕΔɻsave ͕ null ͳͷͰɺίϝϯτͷΈอଘ͞ΕΔɻ γϣʔτίʔυతɻ 102

  103. Note: ΤσΟλ্Ͱ΋αʔόʔαΠυϨϯμϦϯάग़དྷΔ import { ServerSideRender } from '@wordpress/components'; const edit

    = ( { className } ) => ( <ServerSideRender block="my-first-block/hello" attributes={ { className, } } /> ); 103
  104. ࢖͍Ͳ͜Ζ • ࠷৽ͷ౤ߘҰཡɻ • WP_Query ͱ͔ɻ • ࠓ·Ͱɺγϣʔτίʔυ΍ɺ΢ΟδΣοτͰද͍ࣔͯͨ͠Ϟϊɻ 104

  105. σϝϦοτ • ϓϥάΠϯ͕ແޮͳΔͱ౰વػೳ͠ͳ͍ɻ • ϓϥάΠϯΛແޮʹ͢Δͱɺফ͑Δʂʂʂʂ • ௨ৗͷϒϩοΫ͸HTMLΛ DBʹอଘ͍ͯ͠ΔͷͰɺফ͑ͳ͍ɻ • ؅ཧը໘ͰϒϩοΫ͕؆୯ʹ࡞ΕΔΑʁతͳϓϥάΠϯ͸ɺDynamic

    Block ͳ ࣮૷͕ଟ͍ɻ ϓϥάΠϯΛແޮʹ͢Δɾ࢓༷͕มΘΔͱɺίϯςϯπ͕ফ͑Δ ϦεΫɻ • DB ʹೖ͍ͬͯͳ͍ͷͰɺݕࡧͳͲ΋ޮ͔ͳ͍ɻ 105
  106. ϒϩοΫ։ൃͷֶͼํ 106

  107. ·ͣɺReact ͱ஥ྑ͘ͳΔɻ • ͱΓ͋͑ͣɺcreate-react-app ౳Ͱ؆ ୯ͳΞϓϦΛ࡞ͬͨΓ͢Δͷେࣄɻ • WordPress Meetup Map

    ΋ͦͷҰ؀ɻ • ͍ͭͰʹ Redux ͱ͔΋৮͓ͬͯ͘ͱ͍ ͍ɻʢ಺෦తʹ࢖ΘΕ·ͬͯ͘Δɻʣ 107
  108. Block Editor Handbook • νϡʔτϦΞϧͳͲ΋ͦͦ͋͜͜Δͷ ͰɺͱΓ͋͑ͣಡΉɻ • ࠔͬͨΒಡΉɻ 108

  109. Gutenberg ͷιʔείʔυ ·ͣ͸ɺpackages/block-library/src ͋ ͨΓΛআ͍ͯɺίΞͷϒϩοΫͷιʔεΛಡ Ήɺࣸܦ͢Δ͋ͨΓ͔Βɻ • issue ౳΋ௐ΂Δͱ͍Ζ͍Ζ৘ใग़ͯ͘ Δɻ

    109
  110. ਓͷϓϥάΠϯΛಡΉɻ • LIQUID BLOCKS: https://wordpress.org/plugins/liquid-blocks/ • Snow Monkey Blocks: https://wordpress.org/plugins/snow-monkey-blocks/

    • Slide: https://github.com/WordPress/slides • ࠓ೥ͷ WordCamp US Ͱͷ matt ͰͷηογϣϯͷεϥΠυ͸͜ΕͰ࡞ΒΕ ͍ͯΔɻ* ίΞίϛολʔͰΤσΟλʔνʔϜͷɺElla ͞Μ࡞ɻͺͶ͐ɻ 110
  111. • ࠓճ࿩ͨ͠಺༰͸΄ΜͷҰ෦ɻ ਂ෵͸ਂ͍ɻ • registerPlugin ౳Λ׆༻͢Δ͜ͱͰɺߋʹ෯͕޿͕Δɻ • ͱΓ͋͑ͣɺश͏ΑΓ׳ΕΖײ΋͋ΔͷͰɺखΛಈ͔͢ͷେࣄɻ • ίΞͷ։ൃͷϒϩά΋ಡ΋͏ɻ࢖͍ํͳͲ΋ॻ͍ͯ͋ͬͨΓ͢Δɻ

    • Making WordPress ͷ #core-editor νϟϯωϧͰ࣭໰ͯ͠ΈΑ͏ 111
  112. ϒϩοΫΤσΟλͰมΘ ΔϫʔΫϑϩʔ 112

  113. ϒϩοΫ͝ͱͷ࢓༷Λఆ͕ٛඞཁɻ • ϒϩοΫ͝ͱͷೖྗ߲໨ͷఆٛɻ • ͦΕ͸ɺߋ৽͢ΔϢʔβʔʹͱͬͯ࢖͍΍͍͢ͷ͔ʁ • Ϣʔβʔͷҙਤ͠ͳ͍ಈ࡞Λ͍ͯ͠ͳ͍͔ʁ • ΤσΟλͷࣗ༝౓͕ߴ͘GUIͰΰϦΰϦ࿔ΕΔɻΧελϚΠβʔ౳ ͱ੗Έ෼͚ɻ

    113
  114. ฐࣾͷ৔߹ • ՄೳͳݶΓΧελϚΠβʔ΋࢖ΘͣɺશͯϒϩοΫΤσΟλʔ্Ͱ ׬݁ɻ • σβΠϯ͔ΒϒϩοΫͷ࢓༷Λى͜͢৔߹΋͋Δ͠ɺϫΠϠʔϑ ϨʔϜ͔ΒϒϩοΫͷ࢓༷Λى͜͢৔߹΋͋ΔɻαΠτཁ݅࣍ୈɻ 114

  115. ϒϩοΫ࡞Ε͹͍͍ͬͯ΋Μ͡Όͳ͍ɻ • ΧελϜϒϩοΫ͕େྔʹ͋ͬͯ΋࢖͍͜ͳͤͳ͍ɻແཧɻ • registerBlockStyle Λ্खʹ׆༻͠ɺγϯϓϧ͔ͭɺόϦΤʔ γϣϯΛ࣋ͨͤ΍͍͢ํʹ࢓༷Λ౗͢ɻCSSઃܭྗ͕ཁٻ͞ΕΔɻ • ίΞͷϒϩοΫͷ HTMLߏ଄Ͱ͸ɺෆՄೳͳσβΠϯΛͲ͏͢Δ͔

    ͸͍ͭͰ΋ݕ౼ࣄ߲ɻ 115
  116. σβΠφʔɾσΟϨΫλʔͱ΋ڠྗ͠ͳ͍ͱ͏·͍͔͘ͳ͍Α ࣗ෼Ͱ࡞Εͳͯ͘΋ɺ஌͓ͬͯ͘͜ͱ͸େࣄ 116

  117. ͍͞͝ʹ • ϒϩοΫΤσΟλʔόάͬͯΔ -> ϑΟʔυόοΫ͠·͠ΐ͏ɻhttps://github.com/WordPress/gutenberg/issues • ࢖͍ͮΒ͍ -> ϑΟʔυόοΫ͠·͠ΐ͏ɻhttps://github.com/WordPress/gutenberg/issues •

    ӳޠΘ͔ΒΜ -> Google ຋༁ • ͳΜ͔͜Θ͍ -> SNSͱ͔ͰݴͬͯΔํ͕͜Θ͍ͧ 117
  118. 118

  119. ϒϩοΫΤσΟλʔ͕࢖͍΍͘͢ͳΔͷ͔ɺͦ͏Ͱͳ͍͔͸๻Β࣍ୈɻ • https://github.com/WordPress/gutenberg/issues/18362 ೔ຊޠೖ ྗͰͷม׵࣌ʹΧʔιϧ͕ҙਤ͠ͳ͍৔ॴʹҠಈ͢Δෆ۩߹ɻ 119

  120. Thanks! • @Toro_Unit on Twitter and WordPress.org • @torounit on

    Github and Making WordPress 120