Tweet
Tweet

Slide 1

Slide 1 text

ϒϩοΫΤσΟλʔͰม ΘΔɺWordPress Ͱͷ ΢ΣϒαΠτ։ൃ Toro_Unit@SaCSS Special 26 1

Slide 2

Slide 2 text

$ whoami 2

Slide 3

Slide 3 text

Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) • Frontend Developer • WordPress Plugin and Theme Developer Github: @torounit Twitter: @Toro_Unit 3

Slide 4

Slide 4 text

Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) • Frontend Developer • WordPress Plugin and Theme Developer Github: @torounit Twitter: @Toro_Unit 4

Slide 5

Slide 5 text

5

Slide 6

Slide 6 text

Plugins and Themes • Custom Post Type Permalinks • Advanced Posts Blocks • Simple Post Type Permalinks • Powerful Posts Per Page (PPPP) • Vanilla • and more... 6

Slide 7

Slide 7 text

7

Slide 8

Slide 8 text

WordPress Meetup Map • React Ͱग़དྷͯ·͢ɻ • https://github.com/torounit/wp-meetup-map • ϓϧϦΫ͍ͩ͘͞ɻ 8

Slide 9

Slide 9 text

9

Slide 10

Slide 10 text

௕໺ݝদຊࢢ͔Β͖·ͨ͠ • Shinshu WordPress Meetup • ຖճϐβ৯ͬͯ·͢ɻ • ߚ༿͕ݟ͝Ζɻ৽ͦ͹ɻ • ΞϧΫϚ͕ΏΔΩϟϥάϥϯϓϦʹ ͳΓ·ͨ͠ɻ 10

Slide 11

Slide 11 text

ຊηογϣϯʹ͍ͭͯ ࠷ॳ͸ΧελϜϒϩοΫͷ։ൃͷೖ໳ͷ ࿩Λ͢Δͭ΋ΓͰ͕ͨ͠ɺεϥΠυ120 ຕɺ2࣌ؒ10෼+్தٳܜ10෼×2ͷ಺༰ ʹͳͬͯ͠·ͬͨͷͰɺఘΊ·ͨ͠ɻ ίʔυΛॻ͖͍ͨਓ͸ͪ͜ΒͷεϥΠυ Λ͝ࢀর͍ͩ͘͞ɻ Block Editor ΧελϚΠζೖ໳ #WPmeetupOsaka / https:// speakerdeck.com/torounit/get-started- customize-for-block-editor 11

Slide 12

Slide 12 text

Block Editor Handbook • νϡʔτϦΞϧͳͲ΋ͦͦ͋͜͜Δ ͷͰɺͱΓ͋͑ͣಡΉɻࣸܦ͢Δ • ࠔͬͨΒಡΉɻ • ͱΓ͋͑ͣɺຖ೔͔Έ͠ΊͯಡΉɻ 12

Slide 13

Slide 13 text

Gutenberg Ҏ߱ͷςʔϚ࡞੒ʹ޲͚ ͯɺࠓֶͿ΂͖͜ͱ https://speakerdeck.com/waviaei/ gutenberg-yi-jiang-falsetemazuo- cheng-nixiang-kete-jin-xue-bubekikoto ·ͨɺͪ͜ΒͷεϥΠυ΋ซͤͯ͝ཡ͍ ͨͩ͘ͱΑ͍͔ͱࢥ͍·͢ɻ WordCamp Osaka 2019 Ͱͷηογϣ ϯͳͷͰۙʑಈը্͕Γ·͢ʢࠓ೥தʹ ͸ؤுΔʣ 13

Slide 14

Slide 14 text

ӡ༻΋࠷େݶߟྀʂίʔϙϨʔταΠτ ͰϒϩοΫΤσΟλϑϧ׆༻ͷࣄྫ঺հ https://speakerdeck.com/h2ham/ wordcamp-osaka-2019-h2ham-omuo ࣄྫͷ࿩͸ͪ͜ΒΛͲ͏ͧɻ WordCamp Osaka 2019 Ͱͷηογϣ ϯͳͷͰۙʑಈը্͕Γ·͢ʢࠓ೥தʹ ͸ؤுΔʣ 14

Slide 15

Slide 15 text

΄Μ͍ͩ 15

Slide 16

Slide 16 text

ͦ΋ͦ΋ WordPress ʹ͓͚ΔΤσΟλͷ໾ׂͱ͸ 16

Slide 17

Slide 17 text

WordPress ͱ͍͏ CMS ͷ HTML؅ཧ • post_content ͷΧϥϜʹ HTML ΛอଘɻͦΕΛग़ྗ͢Δ૷ஔɻ • HTML Λԣஅతʹ؅ཧ͢Δ࢓૊ΈͰ͋Γɺ୯Ұͷϖʔδͦͷ΋ͷΛ؅ ཧ͢Δ࢓૊ΈͰ͸ͳ͍ɻਤॻؗɻ • σʔλΛݩʹ HTML Λੜ੒͢ΔΘ͚Ͱ͸ͳ͍ɻ΄΅׬੒඼ͷ HTML ʹςʔϚͱ͍͏෰Λணͤͯ഑৴͢Δ૷ஔɻ • ͍ͬͯ͏͔࠷ॳ (0.71)͸ɺςʔϚ͢Βແ͔ͬͨɻ • https://github.com/mt8/wbkobe77/blob/master/index.php 17

Slide 18

Slide 18 text

18

Slide 19

Slide 19 text

19

Slide 20

Slide 20 text

20

Slide 21

Slide 21 text

• ͨͱ͑͹ɺconcrete5 ͱ͍͏ CMS ͸ɺϒϩοΫ͝ͱʹσʔλ ϕʔεͷ table ͕ଘࡏ͢ΔΒ͍͠ɻ༷ʑͳ table ͔Βσʔλ ΛҾͬு͖ͬͯͯ̍ͭͷ HTML Λੜ੒͢Δɻ 21

Slide 22

Slide 22 text

• ࡶʹݴ͏ͱɺHTMLͰॻ͔ΕͨจॻୡΛΧςΰϦʔͱ͔೔෇ ͱ͔Λ͚ͭͯ؅ཧग़དྷΔΑ͏ʹ͠Α͏ʂ͕ WordPress ͷίϯ ςϯπ؅ཧɻͭ·Γϒϩάɻ • ͍͍ͤͥ ϔομͱϑολ͘Β͍͸ڞ௨Խͯ͠΍Ζ͏ɻఔ౓ɻ 22

Slide 23

Slide 23 text

ͦΜͳ WordPress ʹ͓͚ΔΤσΟλʔͷ໾ׂͱ͸ 23

Slide 24

Slide 24 text

HTMLΘ͔Βͳ͍ͻͱͰ΋ɺ HTMLΛ࡞ΕΔΑ͏ʹ͢Δʂ 24

Slide 25

Slide 25 text

ͭ·Γ͜Ε 25

Slide 26

Slide 26 text

ੈքҰࡶͳ WordPress ͷಈ࡞ͷղઆ 1. ϒϥ΢βͰಈ͘ϗʔϜϖʔδϏϧμʔతͳԿ͔ͰHTMLΛ࡞ ੒ 2. ͦΕΛɺΤΫηϧͷ͍ͬ͢͝΍ͭʢMySQLʣʹอଘ 3. ΧςΰϦʔ/೔෇ͳͲͰɺநग़ͯ͠දࣔɻ 26

Slide 27

Slide 27 text

͍ͬͯ͏͔΋ͱ΋ͱϒϩάιϑτʂ since 2003.05.27 27

Slide 28

Slide 28 text

ࠓޙͷಈ޲ Full Site Editting ͷ࣮૷ɻ ϖʔδશମɺ΢ΣϒαΠτΛ͢΂ͯ͋ͷΤσΟλʔͰ։ൃͰ͖ ΔΑ͏ʹ͢Δ༧ఆɻ • αΠτλΠτϧ / φϏήʔγϣϯ ͳͲͷϒϩοΫ͸͢Ͱʹ։ ൃ͞Ε͍ͯΔɻ 28

Slide 29

Slide 29 text

ϒϩοΫΤσΟλʔͰมΘΒͳ͍͜ͱ • ΧελϜϑΟʔϧυͷऔΓѻ͍ɻ • ͦ΋ͦ΋ίϯςϯπΛΰϦΰϦೖΕΔശͰ͸ͳ͍ɻॴḨ͓·͚ ʢ౤ߘαϜωΠϧͱ͔͸಺෦తʹΧελϜϑΟʔϧυͰͰ͖ͯΔʣ • ςʔϚΛม͑ͯ΋ɺσϑΥϧτςʔϚʹมߋͯ͠΋ɺݟͨ໨Ҏ֎ʹ͸ Өڹ͠ͳ͍ͷ͕ WordPress ͷςʔϚͷ͋Δ΂͖࢟ɻ • ͦ͏͍͏CMS͕΄͍͠ͳΒɺྫ͑͹ Drupal ͱ͔࢖͑͹͍͍Μ͡Όͳ ͍͔ͳͱࢥ͏ɻ 29

Slide 30

Slide 30 text

ϒϩοΫΤσΟλʔͰΧελϚΠζͰ͖Δ͜ͱ • Ϣʔβʔ͕؆୯ʹσβΠϯΛ͍͡ΕΔΑ͏ʹ ( registerBlockStyle ) • ΦϦδφϧͳΧελϜϒϩοΫ ( registerBlockType ) • ϒϩοΫҎ֎ͰͷΧελϚΠζ ( registerPlugin ) • طଘͷڍಈͷมߋ ( addFilter, addAction ) 30

Slide 31

Slide 31 text

ϒϩοΫελΠϧ GUI ͰɺϒϩοΫʹΫϥεΛઃఆग़དྷΔɻ͍ͭͰʹϓϨϏϡʔ ΋͍ͭͯ͘Δɻඇৗʹศརɻ ઃఆ͞ΕΔ஋͸ɺis-style-hoge ͷΑ͏ͳܗࣜɻ "ߴ౓ͳઃఆ" ύωϧ಺ͷ "௥ՃCSS Ϋϥε" Λૢ࡞͍ͯ͠Δͩ ͚ɻ Documentation : https://developer.wordpress.org/block- editor/developers/filters/block-filters/#block-style-variations 31

Slide 32

Slide 32 text

࣮૷ํ๏ɻ ΤσΟλʔʹಡ·ͤΔ js ͷઃఆɻwp-blocks Λґଘؔ܎ʹࢦఆ

Slide 33

Slide 33 text

wp.blocks.registerBlockStyle ͰɺελΠϧͷઃఆΛهड़ɻ const { registerBlockStyle } = wp.blocks; registerBlockStyle( 'core/quote', { name: 'hoge', label: '΄͛' } ); 33

Slide 34

Slide 34 text

ελΠϧ͕௥Ճ͞ΕΔɻeditor-style Λ ͪΌΜͱઃఆ͍ͯ͠Ε͹ϓϨϏϡʔʹ΋ ద༻͞ΕΔɻ • Ϙλϯͷؙ֯ελΠϧ • ςʔϒϧͷελΠϧ ͳͲ΋ಉ͡࢓૊Έɻ ԼखʹΧελϜϒϩοΫΛ࡞ΔΑΓɺ͜ ΕΛ֮͑Δํ͕༗༻ੑߴ͍ɻ ϒϩοΫΛࣗ࡞͢Δࡍ΋ɺσβΠϯͷό ϦΤʔγϣϯΛ૿΍͢ͳΒ͜ΕΛ࢖͏ɻ 34

Slide 35

Slide 35 text

ΧελϜϒϩοΫ React ඞਢɻ • ΦϦδφϧͷϒϩοΫΛ௥ՃͰ͖Δɻ • PHP Λซ༻͢Δ͜ͱ΋Մೳɻ( Dynamic Block ) 35

Slide 36

Slide 36 text

import { registerBlockType } from '@wordpress/blocks'; import { InnerBlocks } from '@wordpress/block-editor'; const edit = ( { className } ) => (
); const save = ( { className } ) => (
); 36

Slide 37

Slide 37 text

registerBlockType( 'my-block/section', { title: 'section', description: 'section', icon: 'text-page', category: 'layout', supports: { align: [ 'wide', 'full' ], anchor: true, }, edit, save, } ); 37

Slide 38

Slide 38 text

ϒϩοΫͷ࡞Γํ͸ɺBlock Editor Χε λϚΠζೖ໳ #WPmeetupOsaka ΍ɺ Block Editor Handbook ΛಡΜͰͩ͘͞ ͍ɻ 38

Slide 39

Slide 39 text

Dynamic Block PHP Λ༻͍ͨಈతͳॲཧΛߦ͑ΔϒϩοΫ • WP_Query ͳͲΛѻͬͯ࠷৽ͷ౤ߘΛදࣔ • ϩάΠϯ͍ͯ͠ΔϢʔβʔʹ޲͚ͨίϯςϯπɻ • ϒϩοΫͰͷ A/Bςετ • ظؒݶఆͷίϯςϯπ • etc ... 39

Slide 40

Slide 40 text

example: Advanced Posts Blocks https://www.wordpress.org/plugins/ advanced-posts-blocks/ • ΧςΰϦʔ/λά/λΫιϊϛʔͱ౤ߘ λΠϓͰɺߜΓࠐ·Εͨ౤ߘΛදࣔ ͢ΔɻϒϩοΫͳͲΛఏڙɻ • TOPϖʔδͷ৽ண৘ใҰཡͱ͔Ͱ࢖ ͏ɻ 40

Slide 41

Slide 41 text

41

Slide 42

Slide 42 text

• Dynamic Block ͸ྩ࿨ͷγϣʔτίʔυɻͦͷػೳΛఏڙ͠ ͍ͯΔ PHP ͕յΕΔɾফ͑ΔͳͲͰίϯςϯπʹӨڹ͕ग़ Δɻ • Static ͳϒϩοΫͰ࡞੒ͨ͠΋ͷ͸ɺHTMLͱͯ͠ΤσΟλʹ อଘ͞ΕΔͷͰɺͦͷϒϩοΫΛఏڙ͍ͯ͠Δ΋ͷ͕ফ͑ͯ ΋Өڹ͸গͳ͍ɻ • React ͕Μ͹Ζ͏ɻ 42

Slide 43

Slide 43 text

ʮ؅ཧը໘͔Β؆୯ʹϒϩοΫΛ࡞Ε·͢ʂʯͱ͍ͬͨϓϥά Πϯ͕͋Δ͕ɺDynamic Block Λ༻͍࣮ͨ૷ʹͳ͍ͬͯΔ΋ͷ ͕ଟ͍ɻ ͦͷϓϥάΠϯ͕ফ͑Δɾ։ൃऴྃɾPro ൛ʹҎ߱͢ΔͳͲ͕ ͋ͬͨ৔߹Ͳ͏͢ΔʁΑ͘ߟ͑ͯɺݕূ͔ͯ͠Β࢖͏͜ͱɻه ࣄ͕100݅ɺ1000݅ʹͳ͔ͬͯΒߟ͑ͯ΋஗͍ɻ 43

Slide 44

Slide 44 text

ϒϩοΫΤσΟλʔͰม ΘΔ͜ͱ 44

Slide 45

Slide 45 text

Ϣʔβʔͷ࡞੒͢Δ HTML ͷ࣭ 45

Slide 46

Slide 46 text

• ෳࡶͳ HTML Λඞཁͱ͢ΔϨΠΞ΢τɺσβΠϯ΋ϒϩοΫ ΤσΟλʔͰ؆୯ʹೖྗՄೳʹɻ • ԣ෯͕ 100% ʹͳΔը૾ͳͲ΋ϘλϯΛԡ͚ͩ͢Ͱ؆୯ʹɻ • ϨεϙϯγϒͳΧϥϜϨΠΞ΢τͳͲ΋࡞੒Մೳɻ 46

Slide 47

Slide 47 text

։ൃऀʹͱͬͯͷ HTML ͷࣗ༝౓ͷ௿Լ 47

Slide 48

Slide 48 text

• ϒϩοΫΤσΟλʔ͕༻ҙͨ͠HTMLߏ଄ΛΧελϚΠζ͢ Δͷ͸େมɻ • ͔ͳΓෳࡶͳϒϩοΫΛࣗ࡞͢ΔΑ͏ͳ࿩ʹͳΔɻ • class ໊΋ࣗಈͰ෇༩͞ΕΔͨΊɺςʔϚΛ։ൃ͢ΔଆͰͦͷ ໋໊ʹ߹Θͤͨ CSS Λ։ൃ͢Δඞཁ 48

Slide 49

Slide 49 text

49

Slide 50

Slide 50 text

50

Slide 51

Slide 51 text

• ੜͷεύΠεΛ࢖͍͜ͳ͢ͱ͛͢ʔΧϨʔ͕࡞ΕΔ͚Ͳૉਓ ʹ͸Ή͍ͣɻ • ΧϨʔคɺΧϨʔϧ΢Λ࢖͏ͱͱΓ͋͑ͣૉਓͰ΋͍ͩͿ؆ ୯ʹ࡞ΕΔ͚ͲɺࣅͨΑ͏ͳຯʹɻ • ຯʹมԽΛग़ͨ͢Ίʹ͸Ұ޻෉ඞཁɻ ͱΓ͋͑ͣɺΧϨʔ͸୭Ͱ΋࡞ΕΔΑ͏ʹͳͬͨ 51

Slide 52

Slide 52 text

ࠓ·Ͱ࡞͖ͬͯͨ΋ͷ εύΠεʹͩ͜Θͬͨ ΧϨʔ ͜Ε͔Β࡞Δ΂͖΋ͷ εύΠεʹͩ͜Θͬͨ ΧϨʔคɺΧ Ϩʔϧ΢ 52

Slide 53

Slide 53 text

هࣄೖྗը໘ͷ ΧελϚΠζํ๏ / DX 53

Slide 54

Slide 54 text

͍··Ͱ 54

Slide 55

Slide 55 text

PHP ͱ jQuery 55

Slide 56

Slide 56 text

• ϑΥʔϜ΋ PHP Ͱؤுͬͯ։ൃɻSetting API ͬͯ΋͋Δ͚ Ͳ͔ͳΓେมɻ • όϦσʔγϣϯɺϦϑΝϥʔͷ֬ೝͳͲ PHP Ͱͬ͝Γ͝Γʹ ࣮૷ɻ • ͪΐͬͱϦονʹ͢ΔͨΊʹ jQuery 56

Slide 57

Slide 57 text

͜Ε͔Β 57

Slide 58

Slide 58 text

PHP ͱ React 58

Slide 59

Slide 59 text

• REST API ͔Βɺߋ৽Ͱ͖ΔΑ͏ʹɺ2~5ߦఔ౓ͷPHPΛهड़ • React Λ༻͍ͯUIΛ։ൃɻϒϩοΫΤσΟλʔͰ༻ҙ͞Ε͍ͯ ΔίϯϙʔωϯτͰαΫοͱ࣮૷ • ྫ͑͹ɺ ΧϨϯμʔͷUI·Ͱ͍ͭͯ͘Δ • ஋͕มߋ͞ΕͨΒɺJS Ͱ ஋Ληοτ͢Δ͚ͩͰޙ͸উखʹ σʔλͷૹ৴ɻ • React / JavaScript ͕Ͱ͖Ε͹ΉͪΌͪ͘Όָʹͳͬͨͱ΋͍ ͑Δɻ 59

Slide 60

Slide 60 text

๻ͨͪʹٻΊΒΕΔมԽ 60

Slide 61

Slide 61 text

ٻΊΒΕΔεΩϧ͕େ෯ʹมԽ • CSS΁ͷਂ͍ཧղ • WordPress ଆ͕ఏٞͯ͘͠ΔϒϩοΫͷHTMLޙଓɺclass ໊ɻͦΕ ʹ଱͑͏ΔɺCSSྗɻ • React / JavaScript ྗɻ • Gutenberg ͷιʔείʔυΛಡ·ͳ͍ͱΘ͔Βͳ͍͜ͱ΋ଟ͍ɻ • ίϯϙʔωϯτࢦ޲ɺՄมʹڧ͍σβΠϯͱϚʔΫΞοϓ • UI / UX ΁ͷཧղɻ 61

Slide 62

Slide 62 text

ϫʔΫϑϩʔ 62

Slide 63

Slide 63 text

σΟϨΫγϣϯ • ҰͭҰͭͷϒϩοΫΛ͔ͬͪΓ࡞ͬͯͦΕΛࣗ༝ʹ૊Έ߹Θ ͤͯαΠτΛ࡞Δͱ͍͏ํ޲ੑʹ޲͔͍ͬͯ͘ɻ • ϒϩοΫ͝ͱʹ࢓༷Λ໌֬ʹɺৄࡉʹ͠ͳ͍ͱੵΉɻ • ઃఆ߲໨͕ଟ͍ͱ޻਺͕͔͔Δͷʹ୭΋࢖͑ͳ͍΋ͷ͕ੜ· ΕΔɻ 63

Slide 64

Slide 64 text

σβΠϯ • ࣗ༝౓্͕͕Δ -> ίϯςϯπͷॱংΛϢʔβʔ͕ೖΕସ͑ͨΓͰ͖ ΔɻϚʔδϯͷ੍ޚͲ͏͢Δʁ • ࣗ༝ʹ഑ஔͯ͠΋յΕͳ͍σβΠϯ͕ཁٻ͞ΕΔɻ • ͦΕ͕ΧϥϜϨΠΞ΢τͷதʹೖͬͯ΋յΕͳ͍Α͏ͳɻ • WEBαΠτͱ͍͏ΑΓɺΞϓϦέʔγϣϯͷΑ͏ͳൃ૝͕ཁٻ͞Ε Δɻ • ߋ৽͢ΔϢʔβʔʹ΋༧ଌՄೳͳσβΠϯɻ 64

Slide 65

Slide 65 text

HTML/CSS • XD ΛͱΓ͋͑ͣɺϒϥ΢βͰݟΕΔΑ͏ʹ͢Ε͹͍͍ͱ͍͏ ൃ૝Ͱ͸͍͍ͩͨੵΉɻ • ཁૉͷॱ൪͕มΘΔͳͲ͕ฏؾͰى͜Δ͠ɺ਌ࢠؔ܎ɺܑఋ ؔ܎΋มΘͬͨΓ͢Δɻ • WordPress ͷు͖ग़͢ཁૉʹ CSS Λॻ͘ɻΦϦδφϧͳ HTML / CSS ʹ WordPress Λ߹ΘͤΔͷϚδͰແཧɻ 65

Slide 66

Slide 66 text

JS • React ྗʂ • υΩϡϝϯτʹ༻ҙ͞Ε͍ͯΔίϯϙʔωϯτͷղઆ͕͋Δ ͷͰख़ಡ • ৘ใ΍ϊ΢ϋ΢͕ઈରతʹগͳ͍ͷͰαΫοͱ࣮ݧͰ͖ΔΑ ͏ʹɻ • ͦͷͨΊͷ޻਺ɾεέδϡʔϧ֬อ΋؊ɻ 66

Slide 67

Slide 67 text

શһ͕ϑΟʔυόοΫΛ͠߹ ͏ϫʔΫϑϩʔ͕ඞཁ 67

Slide 68

Slide 68 text

• ૒ํ޲ͳϑΟʔυόοΫ͕େࣄɻͳ͔Α͘͠Α͏ɻ • ׬੒ͤ͞Δલʹ૬ஊɻʮ͜͏͍͏ͷ΍Γ͍ͨΜ͚ͩͲŋŋŋʯ • ׬੒ͨ͠΋ͷΛ౉͞Ε͔ͯΒ૬ஊ͢Δͷ͸ؾ͕ॏ͍͠ɺ͞ ΕΔଆ΋ख໭ΓͰΠϥοͱͯ͠Ζ͘ͳ͜ͱʹͳΒͳ͍Α΄ Μͱɻ • ΤϯδχΞʹ΋ͬͱૣ͘ݴͬͯΑʔͬͯݴ͍͍ͨؾ࣋ͪ͸ Θ͔Δ͚ͲɺΤϯδχΞ΋ޒཬໄதͳͷͰɺૣΊʹ૬ஊ͠ ͯɺ࣮ݧͯ͠΋Β͏ͷ͕٢ɻ 68

Slide 69

Slide 69 text

• ΞδϟΠϧతʹ΍Βͳ͍ͱଟ෼ΈΜͳർฐ͢Δɻ • Կ΋ߟ͑ͣʹ΢ΥʔλʔϑΥʔϧͰਐΊΔͱଟ෼ɺΦϦδφ ϧͷϒϩοΫ͕100ݸ͘Β͍ੜ·ΕͯΤϯυϢʔβʔ΋ർฐ ͢Δ 69

Slide 70

Slide 70 text

ϒϩοΫ͝ͱͷ࢓༷Λఆ͕ٛඞཁɻ • ϒϩοΫ͝ͱͷೖྗ߲໨ͷఆٛɻ • ͦΕ͸ɺߋ৽͢ΔϢʔβʔʹͱͬͯ࢖͍΍͍͢ͷ͔ʁ • Ϣʔβʔͷҙਤ͠ͳ͍ಈ࡞Λ͍ͯ͠ͳ͍͔ʁ • ΤσΟλͷࣗ༝౓͕ߴ͘GUIͰΰϦΰϦ࿔ΕΔɻΧελϚΠ βʔ౳ͱ੗Έ෼͚ɻ 70

Slide 71

Slide 71 text

ฐࣾͷ৔߹ • ՄೳͳݶΓΧελϚΠβʔ΋࢖ΘͣɺશͯϒϩοΫΤσΟ λʔ্Ͱ׬݁ɻ • σβΠϯ͔ΒϒϩοΫͷ࢓༷Λى͜͢৔߹΋͋Δ͠ɺϫΠ ϠʔϑϨʔϜ͔ΒϒϩοΫͷ࢓༷Λى͜͢৔߹΋͋ΔɻαΠ τཁ݅࣍ୈɻ 71

Slide 72

Slide 72 text

ϒϩοΫ࡞Ε͹͍͍ͬͯ΋Μ͡Όͳ͍ɻ • ΧελϜϒϩοΫ͕େྔʹ͋ͬͯ΋࢖͍͜ͳͤͳ͍ɻແཧɻ • registerBlockStyle Λ্खʹ׆༻͠ɺγϯϓϧ͔ͭɺόϦ ΤʔγϣϯΛ࣋ͨͤ΍͍͢ํʹ࢓༷Λ౗͢ɻCSSઃܭྗ͕ཁ ٻ͞ΕΔɻ • ίΞͷϒϩοΫͷ HTMLߏ଄Ͱ͸ɺෆՄೳͳσβΠϯΛͲ͏ ͢Δ͔͸͍ͭͰ΋ݕ౼ࣄ߲ɻ 72

Slide 73

Slide 73 text

σβΠφʔɾσΟϨΫλʔͱ΋ڠྗ͠ͳ͍ͱ͏·͍͔͘ͳ͍Α ࣗ෼Ͱ࡞Εͳͯ͘΋ɺ஌͓ͬͯ͘͜ͱ͸େࣄ 73

Slide 74

Slide 74 text

ઃܭΛ͔ͬ͠Γཧղͯ͠ɺ։ൃ͢Δ͜ͱ͕ॏཁɻ • ϓϥάΠϯ࡞ऀతʹ͸ɺσϑΥϧτςʔϚ͘Β͍Ͱ͔͠ νΣοΫ͠ͳ͍͠ɻ • ͱΓ͋͑ͣɺυΩϡϝϯτͷݴ͏ͱ͓ΓʹͪΌΜͱ࡞Δɻσ ϑΥϧτςʔϚͱಉ͡Α͏ͳߏ੒Ͱ࡞ͬͯΈΔɻ • ΤσΟλ͸มΘ͚ͬͨͲɺWordPress ͷຊ࣭͸มΘͬͯͳ͍ 74

Slide 75

Slide 75 text

͍͞͝ʹ • ϒϩοΫΤσΟλʔόάͬͯΔ -> ϑΟʔυόοΫ͠·͠ΐ͏ɻhttps://github.com/WordPress/ gutenberg/issues • ࢖͍ͮΒ͍ -> ϑΟʔυόοΫ͠·͠ΐ͏ɻhttps://github.com/WordPress/ gutenberg/issues • ӳޠΘ͔ΒΜ -> Google ຋༁ • ͳΜ͔͜Θ͍ -> SNSͱ͔ͰݴͬͯΔํ͕͜Θ͍ͧ 75

Slide 76

Slide 76 text

ϑΟʔυόοΫͨ͠΋ͷʢҰ෦ʣ • https://github.com/WordPress/gutenberg/issues/11813 • ʮkaʯ͕ʮ͔ʯͰ͸ͳ͘ɺʮk͋ʯʹͳΔෆ۩߹ɻWP 5.0 ϦϦʔε௚લɻ • https://github.com/WordPress/gutenberg/issues/18362 • ֬ఆ࣌ʹΧʔιϧ͕มͳͱ͜ΖʹඈΜͰ͠·͏ෆ۩߹ɻ͓ ͱͱ͍௚ͬͯͨɻ 76

Slide 77

Slide 77 text

77

Slide 78

Slide 78 text

࢖͍΍͘͢ͳΔͷ͔ͦ͏Ͱͳ͍͔͸ɺ๻Β࣍ୈɻ ͱΓ͋͑ͣ੠Λ্͛Α͏ɻࠔͬͯΔ͜ͱΛ఻͑Α͏ɻ 78

Slide 79

Slide 79 text

Thanks! • @Toro_Unit on Twitter and WordPress.org • @torounit on Github and Making WordPress 79