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

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

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
7. Plugins and Themes • Custom Post Type Permalinks • Advanced Posts Blocks • Simple Post Type Permalinks • Powerful Posts Per Page (PPPP) • Vanilla • and more... 7
9. WordPress Meetup Map • React Ͱग़དྷͯ·͢ɻ • https://github.com/torounit/wp-meetup-map • ϓϧϦΫ͍ͩ͘͞ɻ 9
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
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
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
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
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
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
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