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

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

WordCamp Osaka 2018

75486cbfd37125f121cf4a6c5614601c?s=128

Hidetaka Okamoto

June 02, 2018
Tweet

Transcript

  1. 2.

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

    • ྲྀ͠ͷJAWS-UGӡӦϝϯόʔ H i d e t a k a O k a m o t o
  2. 10.
  3. 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
  4. 28.
  5. 29.

    BLOCKΛϓϥάΠϯ͔ΒಡΈࠐΉ <?php /** * Plugin Name: Guten Blocks * <தུ>

    */ require_once(plugin_dir_path( __FILE__ ) . 'blocks/ BLOCK_NAME.php' );
  6. 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
  7. 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
  8. 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!' ) ); },
  9. 37.

    ϒϩοΫఆٛʹ࠷௿ݶඞཁͳ΋ͷ const Block = { title: ‘ϒϩοΫ໊’, category: ‘ϒϩοΫΧςΰϦ໊’, edit

    () { return <div>ΤσΟλଆϒϩοΫ</div>; }, save() { return <div>ϑϩϯτଆϒϩοΫ</div>; } }
  10. 39.

    ଟݴޠରԠ͸PHPͷ࣌ͱಉ͡Α͏ʹͰ͖Δɻ const { __ } = wp.i18n; const Title =

    () => ( <p> { __( ‘຋༁͞ΕΔςΩετ’) } </p> );
  11. 40.

    ࠷௿ݶ஌͓͖͍ͬͯͨίΞཁૉʢԶௐ΂ʣ • wp.editor.RichText
 - σϑΥϧτͷςΩετϑΥʔϜ • wp.editor.MediaUpload
 - ϝσΟΞΞοϓϩʔμʔ •

    wp.components.Button
 - WPΤσΟλͷϘλϯཁૉ • wp.editor.InspectorControls
 - ӈଆͷΠϯεϖΫλఆٛ • wp.components.PanelBody
 - ΠϯεϖΫλͷbodyͳͲʹ࢖͑Δ൚༻ίϯϙʔωϯτ
  12. 42.

    ೖྗ஋ͷऔΓѻ͍ɿΤσΟλ / อଘॲཧ edit( { attributes, setAttributes } ) {

    return ( <RichText tagName=‘div’ value={attributes.name} onChange={name => setAttributes({name})} ) }, save( { attributes } ) { return <div>{attributes.name}</div> }
  13. 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' );
  14. 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' );
  15. 53.

    ΧελϜϑΟʔϧυͱΧελϜϒϩοΫ ΧελϜϒϩοΫ • + μΠφϛοΫͳΤσΟλUI͕࡞ΕΔ • + ೖྗͱग़ྗΛςʔϚʹґଘͤͣʹΧελϚΠζՄೳ • −

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

    ΧελϜϑΟʔϧυͱΧελϜϒϩοΫ ΧελϜϒϩοΫ • + μΠφϛοΫͳΤσΟλUI͕࡞ΕΔ • + ೖྗͱग़ྗΛςʔϚʹґଘͤͣʹΧελϚΠζՄೳ • −

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

    ΧελϜϑΟʔϧυͱΧελϜϒϩοΫ ΧελϜϒϩοΫ • + μΠφϛοΫͳΤσΟλUI͕࡞ΕΔ • + ೖྗͱग़ྗΛςʔϚʹґଘͤͣʹΧελϚΠζՄೳ • −

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