ブロックエディタ利用を想定したテーマ制作と今後必要なこと / gifuwpm17

by Koji Kuno

Slide 1

Slide 1 text

ϒϩοΫΤσΟλར༻Λ૝ఆͨ͠ ςʔϚ੍࡞ͱࠓޙඞཁͳ͜ͱ ೥݄೔ʢ౔ʣ ΈΜͳͷ৿͗;ϝσΟΞίεϞε͔Μ͕͑ΔελδΦ 0MFJO%FTJHOٱ໺ߊ࢘

Slide 2

Slide 2 text

ࣗݾ঺հ w ϑϦʔϥϯε8FC੍࡞ऀˏذෞࢢ w 8PSE1SFTT$POUSJCVUPS DPSF NFFUVQ USBOTMBUJPO QMVHJOEFW UIFNFEFW w $PEFS%PKPذෞνϟϯϐΦϯ w άϥϑΟοΫσβΠϯग़਎8FCؔ࿈ձ ࣾۈ຿ྺ͸ͳ͠ w 8FC͸ಠֶ8PSE1SFTTྺ೥Ҏ্ w PMFJOEFTJHODPN!0MFJO@KQ

Slide 3

Slide 3 text

Έͳ͞Μ͸ͲΜͳਓʁʢෳ਺ճ౴Մʣ w ҰൠϢʔβʔʢۚમतडͳ͠ʣ w ఏҊଆʢσΟϨΫλʔӦۀʣ w ੍࡞ଆʢσβΠφʔΤϯδχΞʣ

Slide 4

Slide 4 text

લఏ w 8PSE$BNQ0TBLBͰةػײΛಘ͖ͯͨ w ނʹগʑݴ༿͕ڧ͍෦෼͕͋Γ·͢ w େࣄͳ͜ͱ͸Կճ΋ݴٴ͍ͯ͠·͢ w ֶͼଓ͚·͠ΐ͏ʢࣗռʣ Ϗδωεతͳଆ໘Ͱ8PSE1SFTTͱؔΘ͍ͬͯΔਓʹಛʹ఻͍͑ͨ

Slide 5

Slide 5 text

ͲͪΒ͕৴༻Ͱ͖Δʁ w ͦͷຊΛಡΜͩ͜ͱ͕ͳ͍ॻళళһ͞ Μ w ͦͷຊΛಡΜͩ͜ͱ͕͋Δॻళళһ͞ Μ

Slide 6

Slide 6 text

ࢲͨͪ͸Ͳ͏ͩΖ͏͔ʁ w ஌͍ͬͯΔͭ΋ΓͰࢭ·ͬͯͳ͍͔ w ஌͍ͬͯΔ৘ใ͕ݹ͘ͳ͍ͬͯͳ͍͔ w Α͘෼͔Βͳ͍΋ͷΛקΊ͍ͯͳ͍͔ ͍ͬͯ͏͔࣮ࡍʹ࢖ͬͯΔʁ

Slide 7

Slide 7 text

࢓ࣄͰ8PSE1SFTTʹܞΘΔͷͰ͋Ε ͹࠷৽৘ใΛ௥͍ͬͯ͘͜ͱ΋࢓ࣄ Ͱ͋Δ ʢ(JGV8PSE1SFTT.FFUVQͰ৘ใަ׵͍͖ͯ͠·͠ΐ͏ʣ

Slide 8

Slide 8 text

ΞδΣϯμ w ϒϩοΫΤσΟλΛ׆༻͢ΔͨΊͷGVODUJPOTQIQ5JQT w ϒϩοΫΤσΟλ׆༻ͷఏҊʹ͍ͭͯ w ࠓޙͷ8PSE1SFTT։ൃͰҙࣝ͢΂͖͜ͱ

Slide 9

Slide 9 text

ϒϩοΫΤσΟλΛ׆༻͢ΔͨΊͷ GVODUJPOTQIQ5JQT

Slide 10

Slide 10 text

0MFJOTUSBQ IUUQT HJUIVCDPN0MFJOKQPMFJOTUSBQ ৗʹΞοϓσʔτ͍ͯ͠·͢

Slide 11

Slide 11 text

ಛ௃ w ࠷௿ݶͷnpm scriptͰศརͳ։ൃ؀ڥ͕ར༻Ͱ͖Δ w 4BTTɺ+BWB4DSJQUɺ*NBHFͷίϯύΠϧ w ඞཁ࠷௿ݶͷςϯϓϨʔτϑΝΠϧΛ༻ҙ w ϞδϡʔϧϑΝΠϧΛฤू͢Δ͜ͱͰฤूը໘༻ελΠϧ΋ࣗಈతʹ࡞੒ ࠓޙɺࣗ෼͕࢖͍΍͍͢Α͏ʹվྑ͍͖ͯ͠·͢

Slide 12

Slide 12 text

/// // Define block colors for in editor. /// @function block-colors() { @return ( white : #ffffff, black : #000000, charcoal : #282c34, regent : #8c97a7, husk : #b9a364, red-stage : #b15330 ); }

Slide 13

Slide 13 text

/// // Return a single block color value by name /// @function block-color( $name ) { @return map-get( block-colors(), $name ); }

Slide 14

Slide 14 text

//// /// Create CSS classes for color palette. /// /// @author Koji Kuno //// @each $color-name, $color-value in block-colors() { .has-#{ $color-name }-color { color : #{ $color-value }; } .has-#{ $color-name }-background-color { background-color: #{ $color-value }; } }

Slide 15

Slide 15 text

.has-white-color { color: #ffffff; } .has-white-background-color { background-color: #ffffff; } .has-black-color { color: #000000; } . . . .

Slide 16

Slide 16 text

ฤूը໘ͷελΠϧొ࿥ ग़དྷΔ͚࣮ͩࡍͷελΠϧͰฤूͰ͖ΔΑ͏ʹ

Slide 17

Slide 17 text

add_action( 'after_setup_theme', function() { add_theme_support( 'editor-styles' ); add_editor_style( 'assets/css/editor-style.min.css' ); }

Slide 18

Slide 18 text

͜ͷΑ͏ͳελΠϧΛࢦఆͯ͠ΈΔ body { background-color: yellow; }

Slide 19

Slide 19 text

ϒϩοΫΤσΟλͷ৔߹ .editor-styles-wrapper { background-color: yellow; } ΫϥγοΫΤσΟλͷ৔߹ body { background-color: yellow; } ΫϥγοΫΤσΟλͷ৔߹ɺ ͷதʹฤूը໘͕ͭ͘ΒΕ͍ͯΔͷͰ

Slide 20

Slide 20 text

޿෯ͷ༗ޮԽ ඞཁ͔Ͳ͏͔͸ཁ֬ೝ

Slide 21

Slide 21 text

.alignfullͱ.alignwideͱ͍͏$44ΫϥεʹରԠ͢Δඞཁ͕͋Δ

Slide 22

Slide 22 text

.alignfull { width:100vw; margin-left: calc( (100vw - $content_width ) * -0.5); ɹmax-width:100vw; } .alignwide { width:calc( $content_width + $added_width ); margin-left: $added_width / 2; max-width:100vw; }

Slide 23

Slide 23 text

ΧϥʔύϨοτ ϒϥϯυΧϥʔΛొ࿥͓ͯ͘͠ͱت͹ΕΔ എܠ৭ͱςΩετΧϥʔʹར༻Ͱ͖Δ

Slide 24

Slide 24 text

add_action( 'after_setup_theme', function() { add_theme_support( 'editor-color-palette', [ [ 'name' => __( 'Gray' ), 'slug' => 'gray', 'color' => '#555555' // use this for inline style. ], [ ... ] ] ); }

Slide 25

Slide 25 text

ςΩετΧϥʔͷ৔߹ .has-text-color .has-{slug}-color ͱ͍͏Ϋϥε͕෇༩͞ΕΔͷͰ .has-gray-color { color: #555555; } ͱϑϩϯτଆʹελΠϧΛ༻ҙ͢ΔʢΤσΟλଆʹ͸ඞཁͳ͠ʣ

Slide 26

Slide 26 text

എܠ৭ͷ৔߹ .has-background .has-{slug}-background-color ͱ͍͏Ϋϥε͕෇༩͞ΕΔͷͰ .has-gray-background-color { background-color: #555555; } ͱϑϩϯτଆʹελΠϧΛ༻ҙ͢ΔʢΤσΟλଆʹ͸ඞཁͳ͠ʣ

Slide 27

Slide 27 text

add_theme_support('editor-color-palette')ࣗମΛهड़͠ͳ͍৔ ߹ɺσϑΥϧτͰҎԼͷΧϥʔύϨοτ͕༻ҙ͞ΕΔ ελΠϧࣗମ͸8PSE1SFTT#MPDL-JCSBSZ͔Βৗ࣌ఏڙ

Slide 28

Slide 28 text

ϑΥϯταΠζηοτ

Slide 29

Slide 29 text

ϑΥϯταΠζΛஈ֊తʢδϟϯϓ཰͝ͱʣ ʹ͋Β͔͡Ίઃఆ͓ͯ͘͜͠ͱͰɺσβΠϯ όϥϯεΛอͭҰ໾Λ୲͑Δ

Slide 30

Slide 30 text

add_action( 'after_setup_theme', function() { add_theme_support( 'editor-font-sizes', [ [ 'name' => __( 'Small' ), 'shortName' => __( 'S' ), 'size' => 12, // use this for inline style. 'slug' => 'small' ], [ ... ] ] ); }

Slide 31

Slide 31 text

.has-{slug}-font-sizeͱ͍͏Ϋϥε͕෇͘ͷͰɺ͜ͷ৔߹ .has-small-font-size { font-size: 12px; } ͱ͍͏۩߹ʹϑϩϯτଆͷελΠϧʹهड़

Slide 32

Slide 32 text

8PSE1SFTT#MPDL-JCSBSZ͔Βࣗಈతʹఏڙ͞ΕΔҎԼͷΑ͏ͳελΠϧ͕͋Δ .has-small-font-size { font-size: 13px } .has-normal-font-size,.has-regular-font-size { font-size: 16px } . . ׆༻͢Δ͜ͱ΋Մೳ ! XQJODMVEFTDTTEJTUCMPDLMJCSBSZTUZMFNJODTTߦลΓΛࢀর

Slide 33

Slide 33 text

ϒϩοΫΤσΟλ׆༻ͷఏҊʹ͍ͭ ͯ

Slide 34

Slide 34 text

ओͳ׆༻ํ๏ͷఏҊϑΣʔζ طଘϒϩοΫʹελΠϧΛ෇༩֦ͯ͠ு ϓνΧελϜϒϩοΫ ˠ্ͰରԠͰ͖ͳ͍͚Ͳෳࡶߏ଄Ͱͳ͍΋ͷ ΨνΧελϜϒϩοΫ ˠಈతʹϨϯμϦϯά͢Δ%ZOBNJD#MPDL

Slide 35

Slide 35 text

ͪͳΈʹ ΧελϜϒϩοΫΛఏڙͯ͘͠ΕΔ ϓϥάΠϯͳͲΛ׆༻͢Δͱ͍͏બ୒ࢶ΋͋Γ·͢ ͨͩ͠ɺґଘ͢Δ͜ͱʹͳΔͷͰ༻๏ʹ͸͝஫ҙΛ

Slide 36

Slide 36 text

8PSE1SFTTΛར༻͢Δར఺ ʮϢʔβʔ͕ฤूͰ͖Δʯ఺

Slide 37

Slide 37 text

ͦͷମݧʢ69ʣΛ؅ཧ͢Δ͜ͱ͸ ఏҊɾ੍࡞ଆͷ੹຿

Slide 38

Slide 38 text

طଘϒϩοΫʹ ελΠϧΛ෇༩͢Δߟ͑ํ

Slide 39

Slide 39 text

ίΞϒϩοΫͷछྨ DPSFQBSBHSBQI DPSFIFBEJOH DPSFJNBHF DPSFRVPUF DPSFHBMMFSZ DPSFMJTU DPSFBVEJP DPSFDPWFS DPSFpMF DPSFWJEFP DPSFDPEF DPSFGSFFGPSN DPSFIUNM DPSFQSFGPSNBUUFE DPSFQVMMRVPUF DPSFUBCMF DPSFWFSTF DPSFCVUUPO DPSFDPMVNOT DPSFNFEJBUFYU DPSFNPSF DPSFOFYUQBHF DPSFTFQBSBUPS DPSFTQBDFS DPSFTIPSUDPEF DPSFBSDIJWFT DPSFDBUFHPSJFT DPSFMBUFTUDPNNFOUT DPSFMBUFTUQPTUT DPSFFNCFE DPSFFNCFEUXJUUFS DPSFFNCFEZPVUVCF DPSFFNCFEGBDFCPPL DPSFFNCFEJOTUBHSBN DPSFFNCFEXPSEQSFTT DPSFFNCFETPVOEDMPVE DPSFFNCFETQPUJGZ DPSFFNCFEqJDLS DPSFFNCFEWJNFP DPSFFNCFEBOJNPUP DPSFFNCFEDMPVEVQ DPSFFNCFEDPMMFHFIVNPS DPSFFNCFEEBJMZNPUJPO DPSFFNCFEGVOOZPSEJF DPSFFNCFEIVMV DPSFFNCFEJNHVS DPSFFNCFEJTTVV DPSFFNCFELJDLTUBSUFS DPSFFNCFENFFUVQDPN DPSFFNCFENJYDMPVE DPSFFNCFEQIPUPCVDLFU DPSFFNCFEQPMMEBEEZ DPSFFNCFESFEEJU DPSFFNCFESFWFSCOBUJPO DPSFFNCFETDSFFODBTU DPSFFNCFETDSJCE DPSFFNCFETMJEFTIBSF DPSFFNCFETNVHNVH DPSFFNCFETQFBLFSEFDL DPSFFNCFEUFE DPSFFNCFEUVNCMS DPSFFNCFEWJEFPQSFTT DPSFFNCFEXPSEQSFTTUW

Slide 40

Slide 40 text

Slide 41

Slide 41 text

͜ΕΒͷίϯϙʔωϯτͰ ϖʔδ͸࡞Εͳ͍ʁ ஈམɾݟग़͠ɾը૾ɾҾ༻ɾΪϟϥϦʔɾϦετɾΧόʔը૾ɾ ϘλϯɾΧϥϜɾը૾ͱจষ

Slide 42

Slide 42 text

طଘϒϩοΫΛ্खʹར༻͢Δ͜ͱ Ͱɺे෼όϦΤʔγϣϯ๛෋ͳϖʔ δΛ࡞Δ͜ͱ͕Ͱ͖Δ͸ͣ

Slide 43

Slide 43 text

͔͠͠ ϒϩοΫͷ׆༻ʹ͸ίϯϙʔωϯτ Λ׆༻ͨ͠σβΠϯࢥߟ͕ඞཁ

Slide 44

Slide 44 text

w اըɾఏҊ ˠ8PSE1SFTTͰԿ͕Ͱ͖Δͷ͔஌Βͳ͍ͱاըΛఏҊͰ͖ͳ͍ w σβΠϯ੍࡞ ˠ8PSE1SFTTͰԿ͕Ͱ͖Δͷ͔஌Βͳ͍ͱίϯϙʔωϯτԽͰ͖ͳ͍ w ߏங ˠϒϩοΫΤσΟςΠϒϧͳ8PSE1SFTT؀ڥߏஙʹؔ͢Δ஌ݟ͕ͳ͍ͱߏஙͰ͖ͳ͍ 8PSE1SFTTΛ஌͍ͬͯͳ͍ͱઃܭͰ͖ͳ͚Ε͹ࢦࣔ΋ग़ͤͳ͍͠ ྑ͠ѱ͠ͷ൑அ΋Ͱ͖ͳ͍͠࡞Εͳ͍

Slide 45

Slide 45 text

-FUTHFUCBDLPOUSBDL &YUFOEJOH%FGBVMU#MPDLT طଘϒϩοΫʹελΠϧΛ෇༩͢Δํ๏

Slide 46

Slide 46 text

ಡ΋͏ #MPDL&EJUPS)BOECPPL

Slide 47

Slide 47 text

0MFJO#MPDLT IUUQT HJUIVCDPN0MFJOKQPMFJOCMPDLT ϒϩοΫΛαϙʔτ͢ΔͨΊͷϓϥάΠϯͱͯ͠࡞͍ͬͯ·͢ ʢৗ࣌Ξοϓσʔτʣ

Slide 48

Slide 48 text

!XPSEQSFTTTDSJQUT ΊͬͪΌָͪΜ !XPSEQSFTTTDSJQUT

Slide 49

Slide 49 text

࡞ΓํͷྲྀΕ ϓϥάΠϯΛ࡞ΔʢςʔϚʹೖΕΔ͔൑அ͠Α͏ʣ ϝΠϯ1)1͔Βenqueue_block_editor_assetsIPPLͰ+4ϑΝΠ ϧΛಡΈࠐΉ +4͔ΒregisterBlockStyleͰొ࿥ $44Λ࡞੒ͯ͠ϝΠϯ1)1͔Βenqueue_block_assetsIPPLͰ $44ϑΝΠϧΛಡΈࠐΉ

Slide 50

Slide 50 text

ϓϥάΠϯͷߏ੒ྫ - index.php /src - index.js - style.scss /build - index.asset.php - index.js - style.css

Slide 51

Slide 51 text

index.php function ob_extending_blocks_enqueue() { wp_enqueue_script( 'ob-extending-blocks-script', plugins_url( 'build/index.js', __FILE__ ), array( 'wp-blocks' ) ); } add_action( 'enqueue_block_editor_assets', 'ob_extending_blocks_enqueue' );

Slide 52

Slide 52 text

src/index.js wp.blocks.registerBlockStyle( 'core/button', { name: 'original-button', label: 'Original Button' } );

Slide 53

Slide 53 text

TSDTUZMFTDTT .is-style-original-button { margin: 30px 0; .wp-block-button__link { background-color: darkblue; } }

Slide 54

Slide 54 text

JOEFYQIQ function ob_extending_blocks_styles() { wp_enqueue_style( 'ob-extending-blocks-style', plugins_url( 'build/style.css', __FILE__ ) ); } add_action( 'enqueue_block_assets', 'ob_extending_blocks_styles' );

Slide 55

Slide 55 text

Slide 56

Slide 56 text

ࠓޙͷ8PSE1SFTT։ൃͰҙࣝ͢΂͖͜ͱ w 1)1όʔδϣϯ w ૯߹తͳεΩϧʢඞཁͱߟ͑ΔͳΒʣ w 8PSE1SFTT3PBE.BQ IUUQTKBXPSEQSFTTPSHBCPVUSPBENBQ

Slide 57

Slide 57 text

1)1όʔδϣϯ όʔδϣϯ ϦϦʔε ΞΫςΟϒ ηΩϡϦςΟ IUUQTXXXQIQOFUTVQQPSUFEWFSTJPOTQIQ

Slide 58

Slide 58 text

εΩϧͷόʔδϣϯΞοϓ΋ ແ໊ؔ਺ɾ഑ྻɾ໊લۭؒɾ$PNQPTFSFUD

Slide 59

Slide 59 text

૯߹తͳεΩϧʢඞཁͱߟ͑ΔͳΒʣ w .PEFSO+BWB4DSJQU w $44ઃܭ w BZʢ8$"(""ʣ΁ͷཧղͱ࣮૷ྗ

Slide 60

Slide 60 text

8PSE1SFTT3PBE.BQ ࠓޙɺ8PSE1SFTT͸ͲͷΑ͏ʹਐԽ͍ͯ͘͠ͷ͔ ྫ w φϏήʔγϣϯϝχϡʔΛϒϩοΫԽ w طଘ΢ΟδΣοτΛશͯϒϩοΫ΁Ҡ২ ͜ͷಓے͔Βඞཁͳٕज़΍৘ใΛબ୒͢Δ

Slide 61

Slide 61 text

ηογϣϯΛ௨ͯ͠஌Βͳ͔ͬͨ͜ͱ͕̍ͭͰ΋͋ͬͨํͳΒ Θ͔Δ͸ͣ 8PSE1SFTTJT/05FBTZ

Slide 62

Slide 62 text

ઃܭ΋੍࡞΋ ೉қ౓্͕ͬͯ·͢ʂ

Slide 63

Slide 63 text

ӡ༻΋ߟ͑ͨ࢓༷ࡦఆ w ͲΜͳೖྗํ๏͕ඞཁ͔ w ඞཁͳίϯϙʔωϯτ͸Կ͔

Slide 64

Slide 64 text

ϒϩοΫΤσΟλʔΛཧղ͢Δ w ͲΜͳϒϩοΫ͕͋Δ͔ w Կ͕Ͱ͖Δͷ͔ʢԿ͕Ͱ͖ͳ͍ͷ͔ʣ w ͲΜͳ)5.-͕ॻ͖ग़͞ΕΔͷ͔ w ίϯϙʔωϯτ΁ͷཧղͱઃܭ

Slide 65

Slide 65 text

ʢվΊͯʣ εΩϧΞοϓ͢ΔͨΊʹ͸

Slide 66

Slide 66 text

ެࣜυΩϡϝϯτͱ ༷ʑͳιʔείʔυΛ ಡΉ 8PSE1SFTT(JUIVC 8PSE1SFTT%FWFMPQFS3FTPVSDFT

Slide 67

Slide 67 text

ͦͯ͠ ஌Γ͚ͨΕ͹࢖͏

Slide 68

Slide 68 text

Ͳ͜ͷ୭͕ॻ͍͔ͨ෼͔Βͳ͍Α͏ ͳϒϩάهࣄ͔Β͸αΫοͱιʔε ίʔυίϐϖͯ͘͠Δਓʹݶͬͯ ެࣜυΩϡϝϯτΛಡ·ͳ͍ਓଟ͢ ͗໰୊ʢࣗռ

Slide 69

Slide 69 text

FYDVTF w ӳޠ͔ͩΒಡΈʹ͍͘ ˠ(PPHMF຋༁ͰͳΜͱ͔ͳΔ ˠ͔ͬͯͲ͔͜ͷ୭͔Θ͔Βͳ͍৴༻Ͱ͖ͳ͍ਓͷ৘ใΛӏವΈʹͪ͠ΌͩΊ FYDVTF w Ҋ݅ਐߦதͰಡΜͰཧղ͍ͯ͠Δ͕࣌ؒऔΕͳ͍ ˠͦΜͳΜ͔ͩΒ͍ͭ·Ͱͨͬͯ΋ͰLT;͊ʀKCDʀTEKD͍ͭ΍Δͷʁ

Slide 70

Slide 70 text

·ͱΊ

Slide 71

Slide 71 text

8PSE1SFTTʹܞΘΔਓؒͱͯ͠ ͋ͳͨ͸ɺͲ͏͍ͨ͠ʁ Ͳ͏ͳΓ͍ͨʁͲ͏͋Γ͍ͨʁ

Slide 72

Slide 72 text

ਖ਼௚ɺద౰ʹ΍ͬͯͯ΋ ʮಈ͚͹ྑ͍ʯϨϕϧͰࡁ·ͤΔͳ ΒͳΜͱ͔ͳΔ

Slide 73

Slide 73 text

Ͱ΋ɺͦΕͬͯ ϓϩͱ͔ͯͬ͜͠ѱ͘Ͷʁ ϓϩʹগͳ͔ΒͣͦΕͰ͓ۚΛ໯͏ਓ

Slide 74

Slide 74 text

Ͱ͖Δ͜ͱΛҰͭͣͭ͜ͳ͍ͯ͘͠ ͔͠ͳ͍

Slide 75

Slide 75 text

ͩΕͰ΋Ͱ͖Δ͜ͱ w 8PSE1SFTTΛʢ৮ΔͰ͸ͳ͘ʣ࢖͏ w ͲΜͳϒϩοΫ͕͋Δͷ͔ɺԿ͕Ͱ͖Δͷ͔Λ஌Δ w ίʔυΛॻ͍ͯΈΔʢ࡞ͬͯΈΔʣ

Slide 76

Slide 76 text

ܹࢗݩ ࡾ໦ప 5PSV.JLJ (VUFOCFSHҎ߱ͷςʔϚ࡞੒ʹ޲͚ͯɺࠓֶͿ ΂͖͜ͱ ௕୩઒޿෢ӡ༻΋࠷େݶߟྀʂίʔϙϨʔταΠτͰϒϩοΫΤ σΟλϑϧ׆༻ͷࣄྫ঺հ #MPDL&EJUPSΧελϚΠζೖ໳81NFFUVQ0TBLB εϥΠυɿӡ༻΋࠷େݶߟྀʂίʔϙϨʔταΠτͰϒϩοΫΤσΟλϑϧ׆༻ͷࣄྫ঺հ εϥΠυɿ(VUFOCFSHҎ߱ͷςʔϚ࡞੒ʹ޲͚ͯɺࠓֶͿ΂͖͜ͱ