Gutenbergで変わる エディタカスタマイズ / wco2018

WordCamp Osaka 2018

Transcript

1. GutenbergͰมΘΔ ΤσΟλΧελϚΠζ WordCamp Osaka 2018 Ԭຊलߴ
2. ࣗݾ঺հ • Digitalcube Co. Ltd. • WordCamp Kyoto 2017࣮ߦҕ һ௕ • ྲྀ͠ͷJAWS-UGӡӦϝϯόʔ H i d e t a k a O k a m o t o
3. GutenbergίΞίϯτϦϏϡʔλʔʢओʹςετܥʣ
4. ࠓ೔ͷ࿩
5. WordPressͷ౤ߘΤσΟλ
6. Զͨͪͷ஌͍ͬͯΔΤσΟλ
7. ͜Ε͔ΒͷਓͨͪʹͱͬͯͷΤσΟλʢ༧ఆʣ
8. Կ͕มΘΔʁ ͜Ε·ͰͷΤσΟλ • PHPͱ͖Ͳ͖JavaScript • ΧελϜϑΟʔϧυΛ࢖ͬͯը໘ΛΧελϚΠζ After Gutenberg • JavaScriptͱ͖Ͳ͖PHP • ReactΛ࢖ͬͯը໘ΛΧελϚΠζ
9. Զͨͪͷ஌͍ͬͯͨΤσΟλ͸ϓϥάΠϯ΁ https://wordpress.org/plugins/classic-editor/
10. େมֵ
11. PHPʢWPؔ਺ʣͰͷΧελϚΠζ͔ΒJSϕʔε΁ ͜Ε·ͰͷΤσΟλ • PHPͱ͖Ͳ͖JavaScript • ΧελϜϑΟʔϧυΛ࢖ͬͯը໘ΛΧελϚΠζ After Gutenberg • JavaScriptͱ͖Ͳ͖PHP • ReactΛ࢖ͬͯը໘ΛΧελϚΠζ
12. GutenbergͰͷΤσΟλΧελϚΠζͷྑ͞ɾͭΒ͞ Gutenbergʹͳͬͯศརʹͳͬͨ͜ͱ • ReactͰΤσΟλΛΧελϚΠζͰ͖Δ͜ͱ Gutenbergʹͳͬͯେมʹͳͬͨ͜ͱ • ReactͰΤσΟλΛΧελϚΠζ͠ͳ͍ͱ͍͚ͳ͍͜ͱ
13. GutenbergͰͷΤσΟλΧελϚΠζͷྑ͞ɾͭΒ͞ Gutenbergʹͳͬͯศརʹͳͬͨ͜ͱ • ReactͰΤσΟλΛΧελϚΠζͰ͖Δ͜ͱ Gutenbergʹͳͬͯେมʹͳͬͨ͜ͱ • ReactͰΤσΟλΛΧελϚΠζ͠ͳ͍ͱ͍͚ͳ͍͜ͱ
14. Matt͕̏೥લʹग़ͨ॓͠୊@WordCamp US 2015 https://videopress.com/v/cmA03MuQ
15. GutenbergͰͰ͖Δ ͜ΜͳΤσΟλ
16. ྫ̍ɿදܗࣜͰͷ৘ใೖྗϑΥʔϜ https://gist.github.com/hideokamoto/7b9d77353bd324a6b1fead2a2caf9b7a
17. ྫ̍ɿೖྗ͸දܗࣜͰ΋ɺग़ྗ͸ผʹͰ͖Δ https://gist.github.com/hideokamoto/7b9d77353bd324a6b1fead2a2caf9b7a
18. ྫ̎ɿStep by StepͰࣥචࢧԉ https://gist.github.com/hideokamoto/7b9d77353bd324a6b1fead2a2caf9b7a
19. ྫ̎ɿϓϨϏϡʔͷϚʔΫΞοϓ΋ΠϯλϥΫςΟϒʹ https://gist.github.com/hideokamoto/7b9d77353bd324a6b1fead2a2caf9b7a
20. ͦͷ΄͔Ͱ͖Δ͜Μͳ͜ͱʢྫʣ • withAPIData()Λ࢖ͬͯαΠτ಺ͷίϯςϯπΛऔಘ • ΦʔτίϯϓϦʔτͳͲͷೖྗิॿ • σϑΥϧτϒϩοΫΛΧελϜϒϩοΫʹมߋ • ಛఆͷ౤ߘλΠϓͰར༻Ͱ͖ΔϒϩοΫΛ੍ݶ
21. GutenbergͰศརͳ͜ͱɺͭΒ͍͜ͱ ศརͳ͜ͱ • JSϕʔεͳͷͰɺΠϯλϥΫςΟϒͳಈ͖͕͚ͭ΍͍͢ • ඇಉظ௨৴΍ɺೖྗʹԠͨ͡දࣔͷมߋ΋ಘҙ ͭΒ͍͜ͱ • ͜Ε·Ͱͷϊ΢ϋ΢͕͍͍ͩͨ׆͔ͤͳ͍ • ͝Γ͝ΓʹΧελϚΠζࡁΈͩͱϚΠάϨࣄҊʹͳΔ
22. Gutenberg Migration Guide https://github.com/danielbachhuber/gutenberg-migration-guide
23. GutenbergͰ࢖͑Δػೳɾஔ׵͞Εͨػೳ͕ݟΕΔ https://github.com/danielbachhuber/gutenberg-migration-guide
24. Ͳ͏มΘΔ͔ͳͲͷΨΠυ΋͋Δʢਵ࣌௥Ճʣ https://github.com/danielbachhuber/gutenberg-migration-guide/blob/master/action-media- buttons.md
25. GutenbergͰ͸͡ΊΔ ΤσΟλΧελϚΠζ
26. ΤσΟλͷΧελϚΠζํ๏ • ϓϥάΠϯɾςʔϚͷػೳͱ࣮ͯ͠૷ • ʮΧελϜϒϩοΫʯͱ͍͏໊લ • PHPͰGutenberg༻ͷJSΛϩʔυ • ݪଇReactͰΤσΟλΛ࣮૷͢Δ • Gutenberg͕༻ҙ͍ͯ͠Δཁૉ͕࢖͑Δ • WP-CLIΛ࢖͏ͷ͕Ұ൪ετϨεͳ͘͸͡ΊΕΔ
27. WP-CLIΛ࢖͏ # 1.5.0Ҏ্͕custom blockରԠ
 $ wp cli version WP-CLI 1.5.1 # ϓϥάΠϯΛ࡞੒ $ wp scaffold plugin YOUR_PLUGIN_NAME --skip-tests —activate # σΟϨΫτϦʹҠಈ $ CD YOUR_PLUGIN_NAME # ΧελϜϒϩοΫΛ௥Ճ $ wp scaffold block BLOCK_NAME —category=formatting --title="hello custom" -- plugin=YOUR_PLUGIN_NAME
28. wp scaffold blockͰੜ੒͞ΕΔϑΝΠϧ new file: blocks/BLOCK_NAME.php new file: blocks/BLOCK_NAME/editor.css new file: blocks/BLOCK_NAME/index.js new file: blocks/BLOCK_NAME/style.css
29. BLOCKΛϓϥάΠϯ͔ΒಡΈࠐΉ <?php /** * Plugin Name: Guten Blocks * <தུ> */ require_once(plugin_dir_path( __FILE__ ) . 'blocks/ BLOCK_NAME.php' );
30. ϓϥάΠϯ༗ޮԽͰɺ࠷ॳͷΧελϜϒϩοΫ͕ొ࿥͞ΕΔ
31. wp scaffold blockͰੜ੒͞ΕΔϑΝΠϧ new file: blocks/BLOCK_NAME.php JS΍CSSͷϩʔυΛઃఆ͢ΔPHP new file: blocks/BLOCK_NAME/editor.css ΤσΟλଆͷCSS new file: blocks/BLOCK_NAME/index.js ϒϩοΫఆٛΛॻ͘ϑΝΠϧ new file: blocks/BLOCK_NAME/style.css ϑϩϯτଆͷCSS
32. wp scaffold blockͰੜ੒͞ΕΔϑΝΠϧ new file: blocks/BLOCK_NAME.php JS΍CSSͷϩʔυΛઃఆ͢ΔPHP new file: blocks/BLOCK_NAME/editor.css ΤσΟλଆͷCSS new file: blocks/BLOCK_NAME/index.js ϒϩοΫఆٛΛॻ͘ϑΝΠϧ new file: blocks/BLOCK_NAME/style.css ϑϩϯτଆͷCSS
33. JS (React)΍ͬͯΔਓతʹ͸ɺES NextͰ΍Γͨ͘ͳΔ registerBlockType( 'guten-blocks/first-block', { title: __( 'Hello custom' ), edit: function( props ) { return el( 'p', { className: props.className }, __( 'Hello from the editor!' ) ); },
34. webpack / babelͳͲͷઃఆ͸ɺgutenberg-examplesΛ https://github.com/WordPress/gutenberg-examples/
35. ΧελϜϒϩοΫ࡞੒࣌ʹ ஌͍ͬͯΔͱศརͳ΋ͷ
36. registerBlockTypeͰొ࿥͢Δ const { registerBlockType } = wp.blocks; registerBlockType( “ωʔϜεϖʔε/ϒϩοΫ໊”, ϒϩοΫఆٛ );
37. ϒϩοΫఆٛʹ࠷௿ݶඞཁͳ΋ͷ const Block = { title: ‘ϒϩοΫ໊’, category: ‘ϒϩοΫΧςΰϦ໊’, edit () { return <div>ΤσΟλଆϒϩοΫ</div>; }, save() { return <div>ϑϩϯτଆϒϩοΫ</div>; } }
38. ΧςΰϦ͸ҎԼ͔ΒબͿ • common • formatting • layout • widgets • embed ɹ-> ϒϩοΫͷදࣔҐஔΛܾΊΔ
39. ଟݴޠରԠ͸PHPͷ࣌ͱಉ͡Α͏ʹͰ͖Δɻ const { __ } = wp.i18n; const Title = () => ( <p> { __( ‘຋༁͞ΕΔςΩετ’) } </p> );
40. ࠷௿ݶ஌͓͖͍ͬͯͨίΞཁૉʢԶௐ΂ʣ • wp.editor.RichText
 - σϑΥϧτͷςΩετϑΥʔϜ • wp.editor.MediaUpload
 - ϝσΟΞΞοϓϩʔμʔ • wp.components.Button
 - WPΤσΟλͷϘλϯཁૉ • wp.editor.InspectorControls
 - ӈଆͷΠϯεϖΫλఆٛ • wp.components.PanelBody
 - ΠϯεϖΫλͷbodyͳͲʹ࢖͑Δ൚༻ίϯϙʔωϯτ
41. ೖྗ஋ͷऔΓѻ͍ɿࣄલఆٛ attributes: { name: { type: 'array', source: 'children', }, }, edit() {
42. ೖྗ஋ͷऔΓѻ͍ɿΤσΟλ / อଘॲཧ edit( { attributes, setAttributes } ) { return ( <RichText tagName=‘div’ value={attributes.name} onChange={name => setAttributes({name})} ) }, save( { attributes } ) { return <div>{attributes.name}</div> }
43. attributesͱ͍͏stateΛߋ৽ attributesͷ஋ΛsaveͰrender
44. template ͰσϑΥϧτදࣔͷϒϩοΫΛมߋͰ͖Δ function myplugin_register_book_post_type() { $args = array( 'public' => true, 'label' => 'Books', 'show_in_rest' => true, 'template' => array( array( 'core/image', array( 'align' => ‘left', ) ), array( 'core/heading', array( 'placeholder' => 'Add Author…', ) ), ), ); register_post_type( 'book', $args ); } add_action( 'init', 'myplugin_register_book_post_type' );
45. ಛఆͷϑΥʔϚοτͰͷΈࣥචՄೳʹͰ͖Δ
46. template_lock = ‘all’ͰϒϩοΫͷ௥Ճ΋NGʹͰ͖Δ function myplugin_register_book_post_type() { $args = array( 'public' => true, 'label' => 'Books', 'show_in_rest' => true, 'template_lock' => 'all', 'template' => array( array( 'core/image', array( 'align' => ‘left', ) ), array( 'core/heading', array( 'placeholder' => 'Add Author…', ) ), ), ); register_post_type( 'book', $args ); } add_action( 'init', 'myplugin_register_book_post_type' );
47. ͦͷ΄͔ͷ৘ใιʔε
48. Handbook https://wordpress.org/gutenberg/handbook/
49. Handbook - Design Principles https://wordpress.org/gutenberg/handbook/reference/ design-principles/
50. Handbook - Coding Guidelines https://wordpress.org/gutenberg/handbook/reference/ coding-guidelines/
51. ΧελϜϑΟʔϧυ or ΧελϜϒϩοΫ
52. ࣌ͱ৔߹ʹΑΔ
53. ΧελϜϑΟʔϧυͱΧελϜϒϩοΫ ΧελϜϒϩοΫ • + μΠφϛοΫͳΤσΟλUI͕࡞ΕΔ • + ೖྗͱग़ྗΛςʔϚʹґଘͤͣʹΧελϚΠζՄೳ • − the_contentʹೖΔͨΊɺෳࡶͳݕࡧʹ࢖͍ͮΒ͍ • − JavaScript (React)ྗΛٻΊΒΕΔ ΧελϜϑΟʔϧυ • + ͜Ε·Ͱͷϊ΢ϋ΢͕ͦͷ··࢖͑Δ • + ೖྗ͞ΕͨσʔλΛෳࡶͳݕࡧʹར༻͠΍͍͢ʢ্ΑΓ͸ʣ • − the_contentʹೖΒͳ͍ͨΊɺग़ྗଆͷΧελϚΠζ͕ඞཁ • − wp_postmetaͷσʔλྔ૿ՃʹΑΔύϑΥʔϚϯε௿Լ
54. ΧελϜϑΟʔϧυͱΧελϜϒϩοΫ ΧελϜϒϩοΫ • + μΠφϛοΫͳΤσΟλUI͕࡞ΕΔ • + ೖྗͱग़ྗΛςʔϚʹґଘͤͣʹΧελϚΠζՄೳ • − the_contentʹೖΔͨΊɺෳࡶͳݕࡧʹ࢖͍ͮΒ͍ • − JavaScript (React)ྗΛٻΊΒΕΔ ΧελϜϑΟʔϧυ • + ͜Ε·Ͱͷϊ΢ϋ΢͕ͦͷ··࢖͑Δ • + ೖྗ͞ΕͨσʔλΛෳࡶͳݕࡧʹར༻͠΍͍͢ʢ্ΑΓ͸ʣ • − the_contentʹೖΒͳ͍ͨΊɺग़ྗଆͷΧελϚΠζ͕ඞཁ • − wp_postmetaͷσʔλྔ૿ՃʹΑΔύϑΥʔϚϯε௿Լ
55. ΧελϜϑΟʔϧυͱΧελϜϒϩοΫ ΧελϜϒϩοΫ • + μΠφϛοΫͳΤσΟλUI͕࡞ΕΔ • + ೖྗͱग़ྗΛςʔϚʹґଘͤͣʹΧελϚΠζՄೳ • − the_contentʹೖΔͨΊɺෳࡶͳݕࡧʹ࢖͍ͮΒ͍ • − JavaScript (React)ྗΛٻΊΒΕΔ ΧελϜϑΟʔϧυ • + ͜Ε·Ͱͷϊ΢ϋ΢͕ͦͷ··࢖͑Δ • + ೖྗ͞ΕͨσʔλΛෳࡶͳݕࡧʹར༻͠΍͍͢ʢ্ΑΓ͸ʣ • − the_contentʹೖΒͳ͍ͨΊɺग़ྗଆͷΧελϚΠζ͕ඞཁ • − wp_postmetaͷσʔλྔ૿ՃʹΑΔύϑΥʔϚϯε௿Լ
56. ʮͲͪΒ͔ʁʯ Ͱ͸ͳ͘ ʮͲͬͪ΋ʯ
57. ΤσΟλͷΧελϚΠζΛͲͬͪͰ΍Δ͔ʁ ΧελϜϒϩοΫ͕ڧ͍৔໘ • ೖྗิॿ΍ΨΠυͳͲɺಈతʹมԽ͍ͤͨ͞৔߹ • ϝλσʔλʹอଘ͢Δ·Ͱ΋ͳ͍৘ใͷ৔߹ • React΍JSΛ࢖͏ํ͕ૣ࣮͘૷Ͱ͖ͦ͏ͳ৔߹ ΧελϜϑΟʔϧυ͕ڧ͍৔໘ • Search EverythingͳͲͰݕࡧ͍ͤͨ͞σʔλͷ৔߹ • WPςʔϚ΍PHP(WPؔ਺)Ͱॲཧ͍ͤͨ͞σʔλͷ৔߹ • Gutenberg΁ҠߦͰ͖ͳ͍αΠτͷ৔߹
58. ΤσΟλͷΧελϚΠζΛͲͬͪͰ΍Δ͔ʁ ΧελϜϒϩοΫ͕ڧ͍৔໘ • ೖྗิॿ΍ΨΠυͳͲɺಈతʹมԽ͍ͤͨ͞৔߹ • ϝλσʔλʹอଘ͢Δ·Ͱ΋ͳ͍৘ใͷ৔߹ • React΍JSΛ࢖͏ํ͕ૣ࣮͘૷Ͱ͖ͦ͏ͳ৔߹ ΧελϜϑΟʔϧυ͕ڧ͍৔໘ • Search EverythingͳͲͰݕࡧ͍ͤͨ͞σʔλͷ৔߹ • WPςʔϚ΍PHP(WPؔ਺)Ͱॲཧ͍ͤͨ͞σʔλͷ৔߹ • Gutenberg΁ҠߦͰ͖ͳ͍αΠτͷ৔߹
59. ΤσΟλͷΧελϚΠζΛͲͬͪͰ΍Δ͔ʁ ΧελϜϒϩοΫ͕ڧ͍৔໘ • ೖྗิॿ΍ΨΠυͳͲɺಈతʹมԽ͍ͤͨ͞৔߹ • ϝλσʔλʹอଘ͢Δ·Ͱ΋ͳ͍৘ใͷ৔߹ • React΍JSΛ࢖͏ํ͕ૣ࣮͘૷Ͱ͖ͦ͏ͳ৔߹ ΧελϜϑΟʔϧυ͕ڧ͍৔໘ • Search EverythingͳͲͰݕࡧ͍ͤͨ͞σʔλͷ৔߹ • WPςʔϚ΍PHP(WPؔ਺)Ͱॲཧ͍ͤͨ͞σʔλͷ৔߹ • Gutenberg΁ҠߦͰ͖ͳ͍αΠτͷ৔߹
60. More publishing !