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

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

WordCamp Osaka 2018

75486cbfd37125f121cf4a6c5614601c?s=128

Hidetaka Okamoto

June 02, 2018
Tweet

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 !