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

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

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

E03953e0c18d776fead147601fdc3899?s=128

Toro_Unit (Hiroshi Urabe)

December 14, 2019
Tweet

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