Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

WordCamp Osaka 2018

Hidetaka Okamoto

June 02, 2018
Tweet

More Decks by Hidetaka Okamoto

Other Decks in Technology

Transcript

  1. ࣗݾ঺հ • Digitalcube Co. Ltd. • WordCamp Kyoto 2017࣮ߦҕ һ௕

    • ྲྀ͠ͷJAWS-UGӡӦϝϯόʔ H i d e t a k a O k a m o t o
  2. 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
  3. BLOCKΛϓϥάΠϯ͔ΒಡΈࠐΉ <?php /** * Plugin Name: Guten Blocks * <தུ>

    */ require_once(plugin_dir_path( __FILE__ ) . 'blocks/ BLOCK_NAME.php' );
  4. 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
  5. 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
  6. 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!' ) ); },
  7. ϒϩοΫఆٛʹ࠷௿ݶඞཁͳ΋ͷ const Block = { title: ‘ϒϩοΫ໊’, category: ‘ϒϩοΫΧςΰϦ໊’, edit

    () { return <div>ΤσΟλଆϒϩοΫ</div>; }, save() { return <div>ϑϩϯτଆϒϩοΫ</div>; } }
  8. ଟݴޠରԠ͸PHPͷ࣌ͱಉ͡Α͏ʹͰ͖Δɻ const { __ } = wp.i18n; const Title =

    () => ( <p> { __( ‘຋༁͞ΕΔςΩετ’) } </p> );
  9. ࠷௿ݶ஌͓͖͍ͬͯͨίΞཁૉʢԶௐ΂ʣ • wp.editor.RichText
 - σϑΥϧτͷςΩετϑΥʔϜ • wp.editor.MediaUpload
 - ϝσΟΞΞοϓϩʔμʔ •

    wp.components.Button
 - WPΤσΟλͷϘλϯཁૉ • wp.editor.InspectorControls
 - ӈଆͷΠϯεϖΫλఆٛ • wp.components.PanelBody
 - ΠϯεϖΫλͷbodyͳͲʹ࢖͑Δ൚༻ίϯϙʔωϯτ
  10. ೖྗ஋ͷऔΓѻ͍ɿΤσΟλ / อଘॲཧ edit( { attributes, setAttributes } ) {

    return ( <RichText tagName=‘div’ value={attributes.name} onChange={name => setAttributes({name})} ) }, save( { attributes } ) { return <div>{attributes.name}</div> }
  11. 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' );
  12. 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' );
  13. ΧελϜϑΟʔϧυͱΧελϜϒϩοΫ ΧελϜϒϩοΫ • + μΠφϛοΫͳΤσΟλUI͕࡞ΕΔ • + ೖྗͱग़ྗΛςʔϚʹґଘͤͣʹΧελϚΠζՄೳ • −

    the_contentʹೖΔͨΊɺෳࡶͳݕࡧʹ࢖͍ͮΒ͍ • − JavaScript (React)ྗΛٻΊΒΕΔ ΧελϜϑΟʔϧυ • + ͜Ε·Ͱͷϊ΢ϋ΢͕ͦͷ··࢖͑Δ • + ೖྗ͞ΕͨσʔλΛෳࡶͳݕࡧʹར༻͠΍͍͢ʢ্ΑΓ͸ʣ • − the_contentʹೖΒͳ͍ͨΊɺग़ྗଆͷΧελϚΠζ͕ඞཁ • − wp_postmetaͷσʔλྔ૿ՃʹΑΔύϑΥʔϚϯε௿Լ
  14. ΧελϜϑΟʔϧυͱΧελϜϒϩοΫ ΧελϜϒϩοΫ • + μΠφϛοΫͳΤσΟλUI͕࡞ΕΔ • + ೖྗͱग़ྗΛςʔϚʹґଘͤͣʹΧελϚΠζՄೳ • −

    the_contentʹೖΔͨΊɺෳࡶͳݕࡧʹ࢖͍ͮΒ͍ • − JavaScript (React)ྗΛٻΊΒΕΔ ΧελϜϑΟʔϧυ • + ͜Ε·Ͱͷϊ΢ϋ΢͕ͦͷ··࢖͑Δ • + ೖྗ͞ΕͨσʔλΛෳࡶͳݕࡧʹར༻͠΍͍͢ʢ্ΑΓ͸ʣ • − the_contentʹೖΒͳ͍ͨΊɺग़ྗଆͷΧελϚΠζ͕ඞཁ • − wp_postmetaͷσʔλྔ૿ՃʹΑΔύϑΥʔϚϯε௿Լ
  15. ΧελϜϑΟʔϧυͱΧελϜϒϩοΫ ΧελϜϒϩοΫ • + μΠφϛοΫͳΤσΟλUI͕࡞ΕΔ • + ೖྗͱग़ྗΛςʔϚʹґଘͤͣʹΧελϚΠζՄೳ • −

    the_contentʹೖΔͨΊɺෳࡶͳݕࡧʹ࢖͍ͮΒ͍ • − JavaScript (React)ྗΛٻΊΒΕΔ ΧελϜϑΟʔϧυ • + ͜Ε·Ͱͷϊ΢ϋ΢͕ͦͷ··࢖͑Δ • + ೖྗ͞ΕͨσʔλΛෳࡶͳݕࡧʹར༻͠΍͍͢ʢ্ΑΓ͸ʣ • − the_contentʹೖΒͳ͍ͨΊɺग़ྗଆͷΧελϚΠζ͕ඞཁ • − wp_postmetaͷσʔλྔ૿ՃʹΑΔύϑΥʔϚϯε௿Լ