ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26

「SaCSS Special26 : WordPress＆コンテンツ制作特集」の登壇資料です。

Transcript

1. ϒϩοΫΤσΟλʔͰม ΘΔɺWordPress Ͱͷ ΢ΣϒαΠτ։ൃ Toro_Unit@SaCSS Special 26 1
2. $ whoami 2
3. Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) • Frontend Developer • WordPress Plugin and Theme Developer Github: @torounit Twitter: @Toro_Unit 3
4. Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) • Frontend Developer • WordPress Plugin and Theme Developer Github: @torounit Twitter: @Toro_Unit 4
5. 5
6. Plugins and Themes • Custom Post Type Permalinks • Advanced Posts Blocks • Simple Post Type Permalinks • Powerful Posts Per Page (PPPP) • Vanilla • and more... 6
7. 7
8. WordPress Meetup Map • React Ͱग़དྷͯ·͢ɻ • https://github.com/torounit/wp-meetup-map • ϓϧϦΫ͍ͩ͘͞ɻ 8
9. 9
10. ௕໺ݝদຊࢢ͔Β͖·ͨ͠ • Shinshu WordPress Meetup • ຖճϐβ৯ͬͯ·͢ɻ • ߚ༿͕ݟ͝Ζɻ৽ͦ͹ɻ • ΞϧΫϚ͕ΏΔΩϟϥάϥϯϓϦʹ ͳΓ·ͨ͠ɻ 10
11. ຊηογϣϯʹ͍ͭͯ ࠷ॳ͸ΧελϜϒϩοΫͷ։ൃͷೖ໳ͷ ࿩Λ͢Δͭ΋ΓͰ͕ͨ͠ɺεϥΠυ120 ຕɺ2࣌ؒ10෼+్தٳܜ10෼×2ͷ಺༰ ʹͳͬͯ͠·ͬͨͷͰɺఘΊ·ͨ͠ɻ ίʔυΛॻ͖͍ͨਓ͸ͪ͜ΒͷεϥΠυ Λ͝ࢀর͍ͩ͘͞ɻ Block Editor ΧελϚΠζೖ໳ #WPmeetupOsaka / https:// speakerdeck.com/torounit/get-started- customize-for-block-editor 11
12. Block Editor Handbook • νϡʔτϦΞϧͳͲ΋ͦͦ͋͜͜Δ ͷͰɺͱΓ͋͑ͣಡΉɻࣸܦ͢Δ • ࠔͬͨΒಡΉɻ • ͱΓ͋͑ͣɺຖ೔͔Έ͠ΊͯಡΉɻ 12
13. Gutenberg Ҏ߱ͷςʔϚ࡞੒ʹ޲͚ ͯɺࠓֶͿ΂͖͜ͱ https://speakerdeck.com/waviaei/ gutenberg-yi-jiang-falsetemazuo- cheng-nixiang-kete-jin-xue-bubekikoto ·ͨɺͪ͜ΒͷεϥΠυ΋ซͤͯ͝ཡ͍ ͨͩ͘ͱΑ͍͔ͱࢥ͍·͢ɻ WordCamp Osaka 2019 Ͱͷηογϣ ϯͳͷͰۙʑಈը্͕Γ·͢ʢࠓ೥தʹ ͸ؤுΔʣ 13
14. ӡ༻΋࠷େݶߟྀʂίʔϙϨʔταΠτ ͰϒϩοΫΤσΟλϑϧ׆༻ͷࣄྫ঺հ https://speakerdeck.com/h2ham/ wordcamp-osaka-2019-h2ham-omuo ࣄྫͷ࿩͸ͪ͜ΒΛͲ͏ͧɻ WordCamp Osaka 2019 Ͱͷηογϣ ϯͳͷͰۙʑಈը্͕Γ·͢ʢࠓ೥தʹ ͸ؤுΔʣ 14
15. ΄Μ͍ͩ 15
16. ͦ΋ͦ΋ WordPress ʹ͓͚ΔΤσΟλͷ໾ׂͱ͸ 16
17. WordPress ͱ͍͏ CMS ͷ HTML؅ཧ • post_content ͷΧϥϜʹ HTML ΛอଘɻͦΕΛग़ྗ͢Δ૷ஔɻ • HTML Λԣஅతʹ؅ཧ͢Δ࢓૊ΈͰ͋Γɺ୯Ұͷϖʔδͦͷ΋ͷΛ؅ ཧ͢Δ࢓૊ΈͰ͸ͳ͍ɻਤॻؗɻ • σʔλΛݩʹ HTML Λੜ੒͢ΔΘ͚Ͱ͸ͳ͍ɻ΄΅׬੒඼ͷ HTML ʹςʔϚͱ͍͏෰Λணͤͯ഑৴͢Δ૷ஔɻ • ͍ͬͯ͏͔࠷ॳ (0.71)͸ɺςʔϚ͢Βແ͔ͬͨɻ • https://github.com/mt8/wbkobe77/blob/master/index.php 17
18. 18
19. 19
20. 20
21. • ͨͱ͑͹ɺconcrete5 ͱ͍͏ CMS ͸ɺϒϩοΫ͝ͱʹσʔλ ϕʔεͷ table ͕ଘࡏ͢ΔΒ͍͠ɻ༷ʑͳ table ͔Βσʔλ ΛҾͬு͖ͬͯͯ̍ͭͷ HTML Λੜ੒͢Δɻ 21
22. • ࡶʹݴ͏ͱɺHTMLͰॻ͔ΕͨจॻୡΛΧςΰϦʔͱ͔೔෇ ͱ͔Λ͚ͭͯ؅ཧग़དྷΔΑ͏ʹ͠Α͏ʂ͕ WordPress ͷίϯ ςϯπ؅ཧɻͭ·Γϒϩάɻ • ͍͍ͤͥ ϔομͱϑολ͘Β͍͸ڞ௨Խͯ͠΍Ζ͏ɻఔ౓ɻ 22
23. ͦΜͳ WordPress ʹ͓͚ΔΤσΟλʔͷ໾ׂͱ͸ 23
24. HTMLΘ͔Βͳ͍ͻͱͰ΋ɺ HTMLΛ࡞ΕΔΑ͏ʹ͢Δʂ 24
25. ͭ·Γ͜Ε 25
26. ੈքҰࡶͳ WordPress ͷಈ࡞ͷղઆ 1. ϒϥ΢βͰಈ͘ϗʔϜϖʔδϏϧμʔతͳԿ͔ͰHTMLΛ࡞ ੒ 2. ͦΕΛɺΤΫηϧͷ͍ͬ͢͝΍ͭʢMySQLʣʹอଘ 3. ΧςΰϦʔ/೔෇ͳͲͰɺநग़ͯ͠දࣔɻ 26
27. ͍ͬͯ͏͔΋ͱ΋ͱϒϩάιϑτʂ since 2003.05.27 27
28. ࠓޙͷಈ޲ Full Site Editting ͷ࣮૷ɻ ϖʔδશମɺ΢ΣϒαΠτΛ͢΂ͯ͋ͷΤσΟλʔͰ։ൃͰ͖ ΔΑ͏ʹ͢Δ༧ఆɻ • αΠτλΠτϧ / φϏήʔγϣϯ ͳͲͷϒϩοΫ͸͢Ͱʹ։ ൃ͞Ε͍ͯΔɻ 28
29. ϒϩοΫΤσΟλʔͰมΘΒͳ͍͜ͱ • ΧελϜϑΟʔϧυͷऔΓѻ͍ɻ • ͦ΋ͦ΋ίϯςϯπΛΰϦΰϦೖΕΔശͰ͸ͳ͍ɻॴḨ͓·͚ ʢ౤ߘαϜωΠϧͱ͔͸಺෦తʹΧελϜϑΟʔϧυͰͰ͖ͯΔʣ • ςʔϚΛม͑ͯ΋ɺσϑΥϧτςʔϚʹมߋͯ͠΋ɺݟͨ໨Ҏ֎ʹ͸ Өڹ͠ͳ͍ͷ͕ WordPress ͷςʔϚͷ͋Δ΂͖࢟ɻ • ͦ͏͍͏CMS͕΄͍͠ͳΒɺྫ͑͹ Drupal ͱ͔࢖͑͹͍͍Μ͡Όͳ ͍͔ͳͱࢥ͏ɻ 29
30. ϒϩοΫΤσΟλʔͰΧελϚΠζͰ͖Δ͜ͱ • Ϣʔβʔ͕؆୯ʹσβΠϯΛ͍͡ΕΔΑ͏ʹ ( registerBlockStyle ) • ΦϦδφϧͳΧελϜϒϩοΫ ( registerBlockType ) • ϒϩοΫҎ֎ͰͷΧελϚΠζ ( registerPlugin ) • طଘͷڍಈͷมߋ ( addFilter, addAction ) 30
31. ϒϩοΫελΠϧ GUI ͰɺϒϩοΫʹΫϥεΛઃఆग़དྷΔɻ͍ͭͰʹϓϨϏϡʔ ΋͍ͭͯ͘Δɻඇৗʹศརɻ ઃఆ͞ΕΔ஋͸ɺis-style-hoge ͷΑ͏ͳܗࣜɻ "ߴ౓ͳઃఆ" ύωϧ಺ͷ "௥ՃCSS Ϋϥε" Λૢ࡞͍ͯ͠Δͩ ͚ɻ Documentation : https://developer.wordpress.org/block- editor/developers/filters/block-filters/#block-style-variations 31
32. ࣮૷ํ๏ɻ ΤσΟλʔʹಡ·ͤΔ js ͷઃఆɻwp-blocks Λґଘؔ܎ʹࢦఆ <?php function my_block_editor_assets() { wp_enqueue_script( 'my-block-editor-style', 'path/to/my-block-editor-style.js', array( 'wp-blocks' ) ); } add_action( 'enqueue_block_editor_assets', 'my_block_editor_assets' ); 32
33. wp.blocks.registerBlockStyle ͰɺελΠϧͷઃఆΛهड़ɻ const { registerBlockStyle } = wp.blocks; registerBlockStyle( 'core/quote', { name: 'hoge', label: '΄͛' } ); 33
34. ελΠϧ͕௥Ճ͞ΕΔɻeditor-style Λ ͪΌΜͱઃఆ͍ͯ͠Ε͹ϓϨϏϡʔʹ΋ ద༻͞ΕΔɻ • Ϙλϯͷؙ֯ελΠϧ • ςʔϒϧͷελΠϧ ͳͲ΋ಉ͡࢓૊Έɻ ԼखʹΧελϜϒϩοΫΛ࡞ΔΑΓɺ͜ ΕΛ֮͑Δํ͕༗༻ੑߴ͍ɻ ϒϩοΫΛࣗ࡞͢Δࡍ΋ɺσβΠϯͷό ϦΤʔγϣϯΛ૿΍͢ͳΒ͜ΕΛ࢖͏ɻ 34
35. ΧελϜϒϩοΫ React ඞਢɻ • ΦϦδφϧͷϒϩοΫΛ௥ՃͰ͖Δɻ • PHP Λซ༻͢Δ͜ͱ΋Մೳɻ( Dynamic Block ) 35
36. import { registerBlockType } from '@wordpress/blocks'; import { InnerBlocks } from '@wordpress/block-editor'; const edit = ( { className } ) => ( <section className={ className }> <div className="wp-block-my-block-section__container"> <InnerBlocks /> </div> </section> ); const save = ( { className } ) => ( <section className={ className }> <div className="wp-block-my-block-section__container"> <InnerBlocks.Content /> </div> </section> ); 36
37. registerBlockType( 'my-block/section', { title: 'section', description: 'section', icon: 'text-page', category: 'layout', supports: { align: [ 'wide', 'full' ], anchor: true, }, edit, save, } ); 37
38. ϒϩοΫͷ࡞Γํ͸ɺBlock Editor Χε λϚΠζೖ໳ #WPmeetupOsaka ΍ɺ Block Editor Handbook ΛಡΜͰͩ͘͞ ͍ɻ 38
39. Dynamic Block PHP Λ༻͍ͨಈతͳॲཧΛߦ͑ΔϒϩοΫ • WP_Query ͳͲΛѻͬͯ࠷৽ͷ౤ߘΛදࣔ • ϩάΠϯ͍ͯ͠ΔϢʔβʔʹ޲͚ͨίϯςϯπɻ • ϒϩοΫͰͷ A/Bςετ • ظؒݶఆͷίϯςϯπ • etc ... 39
40. example: Advanced Posts Blocks https://www.wordpress.org/plugins/ advanced-posts-blocks/ • ΧςΰϦʔ/λά/λΫιϊϛʔͱ౤ߘ λΠϓͰɺߜΓࠐ·Εͨ౤ߘΛදࣔ ͢ΔɻϒϩοΫͳͲΛఏڙɻ • TOPϖʔδͷ৽ண৘ใҰཡͱ͔Ͱ࢖ ͏ɻ 40
41. 41
42. • Dynamic Block ͸ྩ࿨ͷγϣʔτίʔυɻͦͷػೳΛఏڙ͠ ͍ͯΔ PHP ͕յΕΔɾফ͑ΔͳͲͰίϯςϯπʹӨڹ͕ग़ Δɻ • Static ͳϒϩοΫͰ࡞੒ͨ͠΋ͷ͸ɺHTMLͱͯ͠ΤσΟλʹ อଘ͞ΕΔͷͰɺͦͷϒϩοΫΛఏڙ͍ͯ͠Δ΋ͷ͕ফ͑ͯ ΋Өڹ͸গͳ͍ɻ • React ͕Μ͹Ζ͏ɻ 42
43. ʮ؅ཧը໘͔Β؆୯ʹϒϩοΫΛ࡞Ε·͢ʂʯͱ͍ͬͨϓϥά Πϯ͕͋Δ͕ɺDynamic Block Λ༻͍࣮ͨ૷ʹͳ͍ͬͯΔ΋ͷ ͕ଟ͍ɻ ͦͷϓϥάΠϯ͕ফ͑Δɾ։ൃऴྃɾPro ൛ʹҎ߱͢ΔͳͲ͕ ͋ͬͨ৔߹Ͳ͏͢ΔʁΑ͘ߟ͑ͯɺݕূ͔ͯ͠Β࢖͏͜ͱɻه ࣄ͕100݅ɺ1000݅ʹͳ͔ͬͯΒߟ͑ͯ΋஗͍ɻ 43
44. ϒϩοΫΤσΟλʔͰม ΘΔ͜ͱ 44
45. Ϣʔβʔͷ࡞੒͢Δ HTML ͷ࣭ 45
46. • ෳࡶͳ HTML Λඞཁͱ͢ΔϨΠΞ΢τɺσβΠϯ΋ϒϩοΫ ΤσΟλʔͰ؆୯ʹೖྗՄೳʹɻ • ԣ෯͕ 100% ʹͳΔը૾ͳͲ΋ϘλϯΛԡ͚ͩ͢Ͱ؆୯ʹɻ • ϨεϙϯγϒͳΧϥϜϨΠΞ΢τͳͲ΋࡞੒Մೳɻ 46
47. ։ൃऀʹͱͬͯͷ HTML ͷࣗ༝౓ͷ௿Լ 47
48. • ϒϩοΫΤσΟλʔ͕༻ҙͨ͠HTMLߏ଄ΛΧελϚΠζ͢ Δͷ͸େมɻ • ͔ͳΓෳࡶͳϒϩοΫΛࣗ࡞͢ΔΑ͏ͳ࿩ʹͳΔɻ • class ໊΋ࣗಈͰ෇༩͞ΕΔͨΊɺςʔϚΛ։ൃ͢ΔଆͰͦͷ ໋໊ʹ߹Θͤͨ CSS Λ։ൃ͢Δඞཁ 48
49. 49
50. 50
51. • ੜͷεύΠεΛ࢖͍͜ͳ͢ͱ͛͢ʔΧϨʔ͕࡞ΕΔ͚Ͳૉਓ ʹ͸Ή͍ͣɻ • ΧϨʔคɺΧϨʔϧ΢Λ࢖͏ͱͱΓ͋͑ͣૉਓͰ΋͍ͩͿ؆ ୯ʹ࡞ΕΔ͚ͲɺࣅͨΑ͏ͳຯʹɻ • ຯʹมԽΛग़ͨ͢Ίʹ͸Ұ޻෉ඞཁɻ ͱΓ͋͑ͣɺΧϨʔ͸୭Ͱ΋࡞ΕΔΑ͏ʹͳͬͨ 51
52. ࠓ·Ͱ࡞͖ͬͯͨ΋ͷ εύΠεʹͩ͜Θͬͨ ΧϨʔ ͜Ε͔Β࡞Δ΂͖΋ͷ εύΠεʹͩ͜Θͬͨ ΧϨʔคɺΧ Ϩʔϧ΢ 52
53. هࣄೖྗը໘ͷ ΧελϚΠζํ๏ / DX 53
54. ͍··Ͱ 54
55. PHP ͱ jQuery 55
56. • ϑΥʔϜ΋ PHP Ͱؤுͬͯ։ൃɻSetting API ͬͯ΋͋Δ͚ Ͳ͔ͳΓେมɻ • όϦσʔγϣϯɺϦϑΝϥʔͷ֬ೝͳͲ PHP Ͱͬ͝Γ͝Γʹ ࣮૷ɻ • ͪΐͬͱϦονʹ͢ΔͨΊʹ jQuery 56
57. ͜Ε͔Β 57
58. PHP ͱ React 58
59. • REST API ͔Βɺߋ৽Ͱ͖ΔΑ͏ʹɺ2~5ߦఔ౓ͷPHPΛهड़ • React Λ༻͍ͯUIΛ։ൃɻϒϩοΫΤσΟλʔͰ༻ҙ͞Ε͍ͯ ΔίϯϙʔωϯτͰαΫοͱ࣮૷ • ྫ͑͹ɺ<DateControl /> ΧϨϯμʔͷUI·Ͱ͍ͭͯ͘Δ • ஋͕มߋ͞ΕͨΒɺJS Ͱ ஋Ληοτ͢Δ͚ͩͰޙ͸উखʹ σʔλͷૹ৴ɻ • React / JavaScript ͕Ͱ͖Ε͹ΉͪΌͪ͘Όָʹͳͬͨͱ΋͍ ͑Δɻ 59
60. ๻ͨͪʹٻΊΒΕΔมԽ 60
61. ٻΊΒΕΔεΩϧ͕େ෯ʹมԽ • CSS΁ͷਂ͍ཧղ • WordPress ଆ͕ఏٞͯ͘͠ΔϒϩοΫͷHTMLޙଓɺclass ໊ɻͦΕ ʹ଱͑͏ΔɺCSSྗɻ • React / JavaScript ྗɻ • Gutenberg ͷιʔείʔυΛಡ·ͳ͍ͱΘ͔Βͳ͍͜ͱ΋ଟ͍ɻ • ίϯϙʔωϯτࢦ޲ɺՄมʹڧ͍σβΠϯͱϚʔΫΞοϓ • UI / UX ΁ͷཧղɻ 61
62. ϫʔΫϑϩʔ 62
63. σΟϨΫγϣϯ • ҰͭҰͭͷϒϩοΫΛ͔ͬͪΓ࡞ͬͯͦΕΛࣗ༝ʹ૊Έ߹Θ ͤͯαΠτΛ࡞Δͱ͍͏ํ޲ੑʹ޲͔͍ͬͯ͘ɻ • ϒϩοΫ͝ͱʹ࢓༷Λ໌֬ʹɺৄࡉʹ͠ͳ͍ͱੵΉɻ • ઃఆ߲໨͕ଟ͍ͱ޻਺͕͔͔Δͷʹ୭΋࢖͑ͳ͍΋ͷ͕ੜ· ΕΔɻ 63
64. σβΠϯ • ࣗ༝౓্͕͕Δ -> ίϯςϯπͷॱংΛϢʔβʔ͕ೖΕସ͑ͨΓͰ͖ ΔɻϚʔδϯͷ੍ޚͲ͏͢Δʁ • ࣗ༝ʹ഑ஔͯ͠΋յΕͳ͍σβΠϯ͕ཁٻ͞ΕΔɻ • ͦΕ͕ΧϥϜϨΠΞ΢τͷதʹೖͬͯ΋յΕͳ͍Α͏ͳɻ • WEBαΠτͱ͍͏ΑΓɺΞϓϦέʔγϣϯͷΑ͏ͳൃ૝͕ཁٻ͞Ε Δɻ • ߋ৽͢ΔϢʔβʔʹ΋༧ଌՄೳͳσβΠϯɻ 64
65. HTML/CSS • XD ΛͱΓ͋͑ͣɺϒϥ΢βͰݟΕΔΑ͏ʹ͢Ε͹͍͍ͱ͍͏ ൃ૝Ͱ͸͍͍ͩͨੵΉɻ • ཁૉͷॱ൪͕มΘΔͳͲ͕ฏؾͰى͜Δ͠ɺ਌ࢠؔ܎ɺܑఋ ؔ܎΋มΘͬͨΓ͢Δɻ • WordPress ͷు͖ग़͢ཁૉʹ CSS Λॻ͘ɻΦϦδφϧͳ HTML / CSS ʹ WordPress Λ߹ΘͤΔͷϚδͰແཧɻ 65
66. JS • React ྗʂ • υΩϡϝϯτʹ༻ҙ͞Ε͍ͯΔίϯϙʔωϯτͷղઆ͕͋Δ ͷͰख़ಡ • ৘ใ΍ϊ΢ϋ΢͕ઈରతʹগͳ͍ͷͰαΫοͱ࣮ݧͰ͖ΔΑ ͏ʹɻ • ͦͷͨΊͷ޻਺ɾεέδϡʔϧ֬อ΋؊ɻ 66
67. શһ͕ϑΟʔυόοΫΛ͠߹ ͏ϫʔΫϑϩʔ͕ඞཁ 67
68. • ૒ํ޲ͳϑΟʔυόοΫ͕େࣄɻͳ͔Α͘͠Α͏ɻ • ׬੒ͤ͞Δલʹ૬ஊɻʮ͜͏͍͏ͷ΍Γ͍ͨΜ͚ͩͲŋŋŋʯ • ׬੒ͨ͠΋ͷΛ౉͞Ε͔ͯΒ૬ஊ͢Δͷ͸ؾ͕ॏ͍͠ɺ͞ ΕΔଆ΋ख໭ΓͰΠϥοͱͯ͠Ζ͘ͳ͜ͱʹͳΒͳ͍Α΄ Μͱɻ • ΤϯδχΞʹ΋ͬͱૣ͘ݴͬͯΑʔͬͯݴ͍͍ͨؾ࣋ͪ͸ Θ͔Δ͚ͲɺΤϯδχΞ΋ޒཬໄதͳͷͰɺૣΊʹ૬ஊ͠ ͯɺ࣮ݧͯ͠΋Β͏ͷ͕٢ɻ 68
69. • ΞδϟΠϧతʹ΍Βͳ͍ͱଟ෼ΈΜͳർฐ͢Δɻ • Կ΋ߟ͑ͣʹ΢ΥʔλʔϑΥʔϧͰਐΊΔͱଟ෼ɺΦϦδφ ϧͷϒϩοΫ͕100ݸ͘Β͍ੜ·ΕͯΤϯυϢʔβʔ΋ർฐ ͢Δ 69
70. ϒϩοΫ͝ͱͷ࢓༷Λఆ͕ٛඞཁɻ • ϒϩοΫ͝ͱͷೖྗ߲໨ͷఆٛɻ • ͦΕ͸ɺߋ৽͢ΔϢʔβʔʹͱͬͯ࢖͍΍͍͢ͷ͔ʁ • Ϣʔβʔͷҙਤ͠ͳ͍ಈ࡞Λ͍ͯ͠ͳ͍͔ʁ • ΤσΟλͷࣗ༝౓͕ߴ͘GUIͰΰϦΰϦ࿔ΕΔɻΧελϚΠ βʔ౳ͱ੗Έ෼͚ɻ 70
71. ฐࣾͷ৔߹ • ՄೳͳݶΓΧελϚΠβʔ΋࢖ΘͣɺશͯϒϩοΫΤσΟ λʔ্Ͱ׬݁ɻ • σβΠϯ͔ΒϒϩοΫͷ࢓༷Λى͜͢৔߹΋͋Δ͠ɺϫΠ ϠʔϑϨʔϜ͔ΒϒϩοΫͷ࢓༷Λى͜͢৔߹΋͋ΔɻαΠ τཁ݅࣍ୈɻ 71
72. ϒϩοΫ࡞Ε͹͍͍ͬͯ΋Μ͡Όͳ͍ɻ • ΧελϜϒϩοΫ͕େྔʹ͋ͬͯ΋࢖͍͜ͳͤͳ͍ɻແཧɻ • registerBlockStyle Λ্खʹ׆༻͠ɺγϯϓϧ͔ͭɺόϦ ΤʔγϣϯΛ࣋ͨͤ΍͍͢ํʹ࢓༷Λ౗͢ɻCSSઃܭྗ͕ཁ ٻ͞ΕΔɻ • ίΞͷϒϩοΫͷ HTMLߏ଄Ͱ͸ɺෆՄೳͳσβΠϯΛͲ͏ ͢Δ͔͸͍ͭͰ΋ݕ౼ࣄ߲ɻ 72
73. σβΠφʔɾσΟϨΫλʔͱ΋ڠྗ͠ͳ͍ͱ͏·͍͔͘ͳ͍Α ࣗ෼Ͱ࡞Εͳͯ͘΋ɺ஌͓ͬͯ͘͜ͱ͸େࣄ 73
74. ઃܭΛ͔ͬ͠Γཧղͯ͠ɺ։ൃ͢Δ͜ͱ͕ॏཁɻ • ϓϥάΠϯ࡞ऀతʹ͸ɺσϑΥϧτςʔϚ͘Β͍Ͱ͔͠ νΣοΫ͠ͳ͍͠ɻ • ͱΓ͋͑ͣɺυΩϡϝϯτͷݴ͏ͱ͓ΓʹͪΌΜͱ࡞Δɻσ ϑΥϧτςʔϚͱಉ͡Α͏ͳߏ੒Ͱ࡞ͬͯΈΔɻ • ΤσΟλ͸มΘ͚ͬͨͲɺWordPress ͷຊ࣭͸มΘͬͯͳ͍ 74
75. ͍͞͝ʹ • ϒϩοΫΤσΟλʔόάͬͯΔ -> ϑΟʔυόοΫ͠·͠ΐ͏ɻhttps://github.com/WordPress/ gutenberg/issues • ࢖͍ͮΒ͍ -> ϑΟʔυόοΫ͠·͠ΐ͏ɻhttps://github.com/WordPress/ gutenberg/issues • ӳޠΘ͔ΒΜ -> Google ຋༁ • ͳΜ͔͜Θ͍ -> SNSͱ͔ͰݴͬͯΔํ͕͜Θ͍ͧ 75
76. ϑΟʔυόοΫͨ͠΋ͷʢҰ෦ʣ • https://github.com/WordPress/gutenberg/issues/11813 • ʮkaʯ͕ʮ͔ʯͰ͸ͳ͘ɺʮk͋ʯʹͳΔෆ۩߹ɻWP 5.0 ϦϦʔε௚લɻ • https://github.com/WordPress/gutenberg/issues/18362 • ֬ఆ࣌ʹΧʔιϧ͕มͳͱ͜ΖʹඈΜͰ͠·͏ෆ۩߹ɻ͓ ͱͱ͍௚ͬͯͨɻ 76
77. 77
78. ࢖͍΍͘͢ͳΔͷ͔ͦ͏Ͱͳ͍͔͸ɺ๻Β࣍ୈɻ ͱΓ͋͑ͣ੠Λ্͛Α͏ɻࠔͬͯΔ͜ͱΛ఻͑Α͏ɻ 78
79. Thanks! • @Toro_Unit on Twitter and WordPress.org • @torounit on Github and Making WordPress 79