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

by Hidetaka Okamoto

Slide 1

Slide 1 text

GutenbergͰมΘΔ ΤσΟλΧελϚΠζ WordCamp Osaka 2018 Ԭຊलߴ

Slide 2

Slide 2 text

ࣗݾ঺հ • Digitalcube Co. Ltd. • WordCamp Kyoto 2017࣮ߦҕ һ௕ • ྲྀ͠ͷJAWS-UGӡӦϝϯόʔ H i d e t a k a O k a m o t o

Slide 3

Slide 3 text

GutenbergίΞίϯτϦϏϡʔλʔʢओʹςετܥʣ

Slide 4

Slide 4 text

ࠓ೔ͷ࿩

Slide 5

Slide 5 text

WordPressͷ౤ߘΤσΟλ

Slide 6

Slide 6 text

Զͨͪͷ஌͍ͬͯΔΤσΟλ

Slide 7

Slide 7 text

͜Ε͔ΒͷਓͨͪʹͱͬͯͷΤσΟλʢ༧ఆʣ

Slide 8

Slide 8 text

Կ͕มΘΔʁ ͜Ε·ͰͷΤσΟλ • PHPͱ͖Ͳ͖JavaScript • ΧελϜϑΟʔϧυΛ࢖ͬͯը໘ΛΧελϚΠζ After Gutenberg • JavaScriptͱ͖Ͳ͖PHP • ReactΛ࢖ͬͯը໘ΛΧελϚΠζ

Slide 9

Slide 9 text

Զͨͪͷ஌͍ͬͯͨΤσΟλ͸ϓϥάΠϯ΁ https://wordpress.org/plugins/classic-editor/

Slide 10

Slide 10 text

େมֵ

Slide 11

Slide 11 text

PHPʢWPؔ਺ʣͰͷΧελϚΠζ͔ΒJSϕʔε΁ ͜Ε·ͰͷΤσΟλ • PHPͱ͖Ͳ͖JavaScript • ΧελϜϑΟʔϧυΛ࢖ͬͯը໘ΛΧελϚΠζ After Gutenberg • JavaScriptͱ͖Ͳ͖PHP • ReactΛ࢖ͬͯը໘ΛΧελϚΠζ

Slide 12

Slide 12 text

GutenbergͰͷΤσΟλΧελϚΠζͷྑ͞ɾͭΒ͞ Gutenbergʹͳͬͯศརʹͳͬͨ͜ͱ • ReactͰΤσΟλΛΧελϚΠζͰ͖Δ͜ͱ Gutenbergʹͳͬͯେมʹͳͬͨ͜ͱ • ReactͰΤσΟλΛΧελϚΠζ͠ͳ͍ͱ͍͚ͳ͍͜ͱ

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Matt͕̏೥લʹग़ͨ॓͠୊@WordCamp US 2015 https://videopress.com/v/cmA03MuQ

Slide 15

Slide 15 text

GutenbergͰͰ͖Δ ͜ΜͳΤσΟλ

Slide 16

Slide 16 text

ྫ̍ɿදܗࣜͰͷ৘ใೖྗϑΥʔϜ https://gist.github.com/hideokamoto/7b9d77353bd324a6b1fead2a2caf9b7a

Slide 17

Slide 17 text

ྫ̍ɿೖྗ͸දܗࣜͰ΋ɺग़ྗ͸ผʹͰ͖Δ https://gist.github.com/hideokamoto/7b9d77353bd324a6b1fead2a2caf9b7a

Slide 18

Slide 18 text

ྫ̎ɿStep by StepͰࣥචࢧԉ https://gist.github.com/hideokamoto/7b9d77353bd324a6b1fead2a2caf9b7a

Slide 19

Slide 19 text

ྫ̎ɿϓϨϏϡʔͷϚʔΫΞοϓ΋ΠϯλϥΫςΟϒʹ https://gist.github.com/hideokamoto/7b9d77353bd324a6b1fead2a2caf9b7a

Slide 20

Slide 20 text

ͦͷ΄͔Ͱ͖Δ͜Μͳ͜ͱʢྫʣ • withAPIData()Λ࢖ͬͯαΠτ಺ͷίϯςϯπΛऔಘ • ΦʔτίϯϓϦʔτͳͲͷೖྗิॿ • σϑΥϧτϒϩοΫΛΧελϜϒϩοΫʹมߋ • ಛఆͷ౤ߘλΠϓͰར༻Ͱ͖ΔϒϩοΫΛ੍ݶ

Slide 21

Slide 21 text

GutenbergͰศརͳ͜ͱɺͭΒ͍͜ͱ ศརͳ͜ͱ • JSϕʔεͳͷͰɺΠϯλϥΫςΟϒͳಈ͖͕͚ͭ΍͍͢ • ඇಉظ௨৴΍ɺೖྗʹԠͨ͡දࣔͷมߋ΋ಘҙ ͭΒ͍͜ͱ • ͜Ε·Ͱͷϊ΢ϋ΢͕͍͍ͩͨ׆͔ͤͳ͍ • ͝Γ͝ΓʹΧελϚΠζࡁΈͩͱϚΠάϨࣄҊʹͳΔ

Slide 22

Slide 22 text

Gutenberg Migration Guide https://github.com/danielbachhuber/gutenberg-migration-guide

Slide 23

Slide 23 text

GutenbergͰ࢖͑Δػೳɾஔ׵͞Εͨػೳ͕ݟΕΔ https://github.com/danielbachhuber/gutenberg-migration-guide

Slide 24

Slide 24 text

Ͳ͏มΘΔ͔ͳͲͷΨΠυ΋͋Δʢਵ࣌௥Ճʣ https://github.com/danielbachhuber/gutenberg-migration-guide/blob/master/action-media- buttons.md

Slide 25

Slide 25 text

GutenbergͰ͸͡ΊΔ ΤσΟλΧελϚΠζ

Slide 26

Slide 26 text

ΤσΟλͷΧελϚΠζํ๏ • ϓϥάΠϯɾςʔϚͷػೳͱ࣮ͯ͠૷ • ʮΧελϜϒϩοΫʯͱ͍͏໊લ • PHPͰGutenberg༻ͷJSΛϩʔυ • ݪଇReactͰΤσΟλΛ࣮૷͢Δ • Gutenberg͕༻ҙ͍ͯ͠Δཁૉ͕࢖͑Δ • WP-CLIΛ࢖͏ͷ͕Ұ൪ετϨεͳ͘͸͡ΊΕΔ

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

BLOCKΛϓϥάΠϯ͔ΒಡΈࠐΉ */ require_once(plugin_dir_path( __FILE__ ) . 'blocks/ BLOCK_NAME.php' );

Slide 30

Slide 30 text

ϓϥάΠϯ༗ޮԽͰɺ࠷ॳͷΧελϜϒϩοΫ͕ొ࿥͞ΕΔ

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Slide 33

Slide 33 text

JS (React)΍ͬͯΔਓతʹ͸ɺES NextͰ΍Γͨ͘ͳΔ registerBlockType( 'guten-blocks/ﬁrst-block', { title: __( 'Hello custom' ), edit: function( props ) { return el( 'p', { className: props.className }, __( 'Hello from the editor!' ) ); },

Slide 34

Slide 34 text

webpack / babelͳͲͷઃఆ͸ɺgutenberg-examplesΛ https://github.com/WordPress/gutenberg-examples/

Slide 35

Slide 35 text

ΧελϜϒϩοΫ࡞੒࣌ʹ ஌͍ͬͯΔͱศརͳ΋ͷ

Slide 36

Slide 36 text

registerBlockTypeͰొ࿥͢Δ const { registerBlockType } = wp.blocks; registerBlockType( “ωʔϜεϖʔε/ϒϩοΫ໊”, ϒϩοΫఆٛ );

Slide 37

Slide 37 text

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

ΤσΟλଆϒϩοΫ

; }, save() { return

ϑϩϯτଆϒϩοΫ

; } }

Slide 38

Slide 38 text

ΧςΰϦ͸ҎԼ͔ΒબͿ • common • formatting • layout • widgets • embed ɹ-> ϒϩοΫͷදࣔҐஔΛܾΊΔ

Slide 39

Slide 39 text

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

{ __( ‘຋༁͞ΕΔςΩετ’) }

);

Slide 40

Slide 40 text

࠷௿ݶ஌͓͖͍ͬͯͨίΞཁૉʢԶௐ΂ʣ • wp.editor.RichText  - σϑΥϧτͷςΩετϑΥʔϜ • wp.editor.MediaUpload  - ϝσΟΞΞοϓϩʔμʔ • wp.components.Button  - WPΤσΟλͷϘλϯཁૉ • wp.editor.InspectorControls  - ӈଆͷΠϯεϖΫλఆٛ • wp.components.PanelBody  - ΠϯεϖΫλͷbodyͳͲʹ࢖͑Δ൚༻ίϯϙʔωϯτ

Slide 41

Slide 41 text

ೖྗ஋ͷऔΓѻ͍ɿࣄલఆٛ attributes: { name: { type: 'array', source: 'children', }, }, edit() {

Slide 42

Slide 42 text

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

{attributes.name}

}

Slide 43

Slide 43 text

attributesͱ͍͏stateΛߋ৽ attributesͷ஋ΛsaveͰrender

Slide 44

Slide 44 text

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' );

Slide 45

Slide 45 text

ಛఆͷϑΥʔϚοτͰͷΈࣥචՄೳʹͰ͖Δ

Slide 46

Slide 46 text

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' );

Slide 47

Slide 47 text

ͦͷ΄͔ͷ৘ใιʔε

Slide 48

Slide 48 text

Handbook https://wordpress.org/gutenberg/handbook/

Slide 49

Slide 49 text

Handbook - Design Principles https://wordpress.org/gutenberg/handbook/reference/ design-principles/

Slide 50

Slide 50 text

Handbook - Coding Guidelines https://wordpress.org/gutenberg/handbook/reference/ coding-guidelines/

Slide 51

Slide 51 text

ΧελϜϑΟʔϧυ or ΧελϜϒϩοΫ

Slide 52

Slide 52 text

࣌ͱ৔߹ʹΑΔ

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Slide 55

Slide 55 text

Slide 56

Slide 56 text

ʮͲͪΒ͔ʁʯ Ͱ͸ͳ͘ ʮͲͬͪ΋ʯ

Slide 57

Slide 57 text

ΤσΟλͷΧελϚΠζΛͲͬͪͰ΍Δ͔ʁ ΧελϜϒϩοΫ͕ڧ͍৔໘ • ೖྗิॿ΍ΨΠυͳͲɺಈతʹมԽ͍ͤͨ͞৔߹ • ϝλσʔλʹอଘ͢Δ·Ͱ΋ͳ͍৘ใͷ৔߹ • React΍JSΛ࢖͏ํ͕ૣ࣮͘૷Ͱ͖ͦ͏ͳ৔߹ ΧελϜϑΟʔϧυ͕ڧ͍৔໘ • Search EverythingͳͲͰݕࡧ͍ͤͨ͞σʔλͷ৔߹ • WPςʔϚ΍PHP(WPؔ਺)Ͱॲཧ͍ͤͨ͞σʔλͷ৔߹ • Gutenberg΁ҠߦͰ͖ͳ͍αΠτͷ৔߹