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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<?php add_action( 'after_setup_theme', function() { add_theme_support( 'align-wide' ); } ?>
.alignfullͱ.alignwideͱ͍͏$44ΫϥεʹରԠ͢Δඞཁ͕͋Δ

.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; }

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

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

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

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

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

ϑΥϯταΠζηοτ

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

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' ], [ ... ] ] ); }

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

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

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

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

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

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

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

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

ίΞϒϩοΫͷछྨ 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

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

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

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

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

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

ಡ΋͏ #MPDL&EJUPS)BOECPPL

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

!XPSEQSFTTTDSJQUT ΊͬͪΌָͪΜ !XPSEQSFTTTDSJQUT

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

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

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' );

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

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

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' );

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

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

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

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

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

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

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

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

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

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

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

ͦͯ͠ ஌Γ͚ͨΕ͹࢖͏

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

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

·ͱΊ

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

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

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

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

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

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

8PSE1SFTT.FFUVQʹࢀՃͯ͠ɺ ͨ͘͞Μ8PSE1SFTTͱؔΘΖ͏ʂ

͓ΘΓ

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

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

More Decks by Koji Kuno

Other Decks in Programming

Featured

Transcript