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

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