$30 off During Our Annual Pro Sale. View Details »

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

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

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

Toro_Unit (Hiroshi Urabe)

December 14, 2019
Tweet

More Decks by Toro_Unit (Hiroshi Urabe)

Other Decks in Technology

Transcript

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

    View Slide

  2. $ whoami
    2

    View Slide

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

    View Slide

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

    View Slide

  5. 5

    View Slide

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

    View Slide

  7. 7

    View Slide

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

    View Slide

  9. 9

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  15. ΄Μ͍ͩ
    15

    View Slide

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

    View Slide

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

    View Slide

  18. 18

    View Slide

  19. 19

    View Slide

  20. 20

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  25. ͭ·Γ͜Ε
    25

    View Slide

  26. ੈքҰࡶͳ WordPress ͷಈ࡞ͷղઆ
    1. ϒϥ΢βͰಈ͘ϗʔϜϖʔδϏϧμʔతͳԿ͔ͰHTMLΛ࡞

    2. ͦΕΛɺΤΫηϧͷ͍ͬ͢͝΍ͭʢMySQLʣʹอଘ
    3. ΧςΰϦʔ/೔෇ͳͲͰɺநग़ͯ͠දࣔɻ
    26

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  32. ࣮૷ํ๏ɻ
    ΤσΟλʔʹಡ·ͤΔ js ͷઃఆɻwp-blocks Λґଘؔ܎ʹࢦఆ
    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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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





    );
    const save = ( { className } ) => (





    );
    36

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  41. 41

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  49. 49

    View Slide

  50. 50

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  54. ͍··Ͱ
    54

    View Slide

  55. PHP
    ͱ
    jQuery
    55

    View Slide

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

    View Slide

  57. ͜Ε͔Β
    57

    View Slide

  58. PHP
    ͱ
    React
    58

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  62. ϫʔΫϑϩʔ
    62

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  77. 77

    View Slide

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

    View Slide

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

    View Slide