Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get star...
Search
Toro_Unit (Hiroshi Urabe)
November 16, 2019
Technology
12
3.2k
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
Kansai WordPress Meetup Osaka の登壇資料です。
サンプルコード:
https://github.com/torounit/my-first-block
Toro_Unit (Hiroshi Urabe)
November 16, 2019
Tweet
Share
More Decks by Toro_Unit (Hiroshi Urabe)
See All by Toro_Unit (Hiroshi Urabe)
Cloudflare Meetup Nagano Vol.3
torounit
1
64
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.5k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.7k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
10k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
390
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
430
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
560
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
860
本当にだれにでもできる、WordPress をよりよいものにする方法。/ wordcamp tokyo 2019
torounit
2
4.3k
Other Decks in Technology
See All in Technology
OPENLOGI Company Profile
hr01
0
61k
データベースで見る『家族アルバム みてね』の変遷 / The Evolution of Family Album Through the Lens of Databases
kohbis
3
810
大規模プロジェクトにおける 品質管理の要点と実践 / 20250327 Suguru Ishii
shift_evolve
0
290
大規模アジャイル開発のリアル!コミュニケーション×進捗管理×高品質
findy_eventslides
0
600
製造業の会計システムをDDDで開発した話
caddi_eng
3
1k
チームの性質によって変わる ADR との向き合い方と、生成 AI 時代のこれから / How to deal with ADR depends on the characteristics of the team
mh4gf
4
340
Keynote - KCD Brazil - Platform Engineering on K8s (portuguese)
salaboy
0
130
Medmain FACTBOOK
akinaootani
0
120
DevOps文化を育むQA 〜カルチャーバブルを生み出す戦略〜 / 20250317 Atsushi Funahashi
shift_evolve
1
110
モンテカルロ木探索のパフォーマンスを予測する Kaggleコンペ解説 〜生成AIによる未知のゲーム生成〜
rist
4
1.2k
バクラクでのSystem Risk Records導入による変化と改善の取り組み/Changes and Improvement Initiatives Resulting from the Implementation of System Risk Records
taddy_919
0
220
Symfony in 2025: Scaling to 0
fabpot
2
220
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
33
6.5k
Docker and Python
trallard
44
3.3k
KATA
mclloyd
29
14k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Fireside Chat
paigeccino
37
3.3k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
8
700
The Language of Interfaces
destraynor
157
24k
Six Lessons from altMBA
skipperchong
27
3.7k
Embracing the Ebb and Flow
colly
85
4.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Transcript
ϒϩοΫΤσΟλʔ ͷΧελϚΠζํ๏Λ Ϛελʔͯ͠ϥΠόϧʹ ࠩΛ͚ͭΑ͏ʂʂʂʂ 1
ϥΠόϧͬͯͳΜͶΜ 2
Block Editor ΧελϚΠζೖ Toro_Unit @Kansai WP Meetup in Osaka 3
$ whoami 4
Toro_Unit ෦ ߛ (͏Β ͻΖ͠) • Frontend Developer • WordPress
Plugin and Theme Developer Github: @torounit Twitter: @Toro_Unit 5
6
Plugins and Themes • Custom Post Type Permalinks • Advanced
Posts Blocks • Simple Post Type Permalinks • Powerful Posts Per Page (PPPP) • Vanilla • and more... 7
8
WordPress Meetup Map • React Ͱग़དྷͯ·͢ɻ • https://github.com/torounit/wp-meetup-map • ϓϧϦΫ͍ͩ͘͞ɻ
9
10
ݝদຊࢢ͔Β͖·ͨ͠ • Shinshu WordPress Meetup • ຖճϐβ৯ͬͯ·͢ɻ • ߚ༿͕ݟ͝Ζɻ৽ͦɻ 11
ຊηογϣϯʹ͍ͭͯ ϞμϯJSͷ͕͍Ζ͍Ζग़͖ͯ·͢ɻͦͪΒͷղઆ ಛʹ͠·ͤΜɻ ʢ͍ͯ͏͔ऴΘΒΜʣ ࢀߟʹͳΔࢿྉ • https://speakerdeck.com/likr/re-introduction-to- modern-javascript • https://jsprimer.net/
• https://developer.mozilla.org 12
αϯϓϧίʔυʹ͍ͭͯ ΊͪΌͪ͘Όίʔυ͕ग़͖ͯ·͢ɻ https://github.com/torounit/my-first-block ʹࠓճͷσϞެ։͍ͯ͠·͢ɻ tag / branch Ͱɺ͍Ζ͍Ζ͚ͯ·͢ɻ 13
࣭ʹ͍ͭͯ • ղΒͳ͍͜ͱ͕͋ͬͨΒͦͷͰฉ͍ͯΒͬͯେৎͰ͢ɻ • ͨͩ͠ɺ࣌ؒͱମྗͷؔͰͦͷͰ͓͑ग़དྷͳ͍߹͕͋Γ· ͢ɻ • 120ϖʔδ͘Β͍͋ΔͷͰɺؾʹͳͬͨ͜ͱͳͲɺπΠʔτ͢Δ ͳΓ͍͚ͯͨͩ͠ΕɺޙͰ͑Δ͔͠Ε·ͤΜɻ 14
ϒϩοΫΤσΟλʔΧελϚΠζೖ 15
ͷ·͑ʹ 16
ͦͦ WordPress ʹ͓͚ΔΤσΟλͷׂͱ 17
WordPress ͱ͍͏ CMS ͷ HTMLཧ • post_content ͷΧϥϜʹ HTML ΛอଘɻͦΕΛग़ྗ͢Δஔɻ
• HTML Λԣஅతʹཧ͢ΔΈͰ͋Γɺ୯ҰͷϖʔδͦͷͷΛཧ͢Δ ΈͰͳ͍ɻਤॻؗɻ • σʔλΛݩʹ HTML Λੜ͢ΔΘ͚Ͱͳ͍ɻ΄΅ͷ HTML ʹςʔ Ϛͱ͍͏Λணͤͯ৴͢Δஔɻ • ͍ͬͯ͏͔࠷ॳ (0.71)ɺςʔϚ͢Βແ͔ͬͨɻ • https://github.com/mt8/wbkobe77/blob/master/index.php 18
19
• ͨͱ͑ɺconcrete5 ͱ͍͏ CMS ɺϒϩοΫ͝ͱʹσʔλϕʔε ͷ table ͕ଘࡏ͢ΔΒ͍͠ɻ༷ʑͳ table ͔ΒσʔλΛҾͬுͬͯ
͖ͯ̍ͭͷ HTML Λੜ͢Δɻ 20
• ࡶʹݴ͏ͱɺHTMLͰॻ͔ΕͨจॻୡΛΧςΰϦʔͱ͔ͱ͔Λ ͚ͭͯཧग़དྷΔΑ͏ʹ͠Α͏ʂ͕ WordPress ͷίϯςϯπཧɻ ͭ·Γϒϩάɻ • ͍͍ͤͥ ϔομͱϑολ͘Β͍ڞ௨Խͯ͠Ζ͏ɻఔɻ 21
ͦΜͳ WordPress ʹ͓͚ΔΤσΟλʔͷׂͱ 22
HTMLΘ͔Βͳ͍ͻͱͰɺ HTMLΛ࡞ΕΔΑ͏ʹ͢Δʂ 23
ʮHTMLΘ͔Βͳ͍ͻͱͰ HTMLΛ࡞ΕΔΑ͏ʹ͢Δʂʯ • HTML Θ͔Βͳ͍ਓ͕৮ͬͯɺpost_content ʹ HTML ΛอଘͰ͖ ΔΑ͏ʹ͢Δɺͱ͍͏͜ͱɻ •
DBʹอଘ͢Δͷɺ͞Εͨ HTML 24
͍ͬͯ͏͔ͱͱϒϩάιϑτʂ since 2003.05.27 25
ϒϩοΫΤσΟλʔͷΧελϚΠζ 26
ςʔϚʹ͍ͭͯ ࠓճ࣌ؒͱମྗͷؔͰऔΓѻΘͳ͍ͷͰɺެࣜυΩϡϝϯτಡΜͰ Լ͍͞ɻ https://developer.wordpress.org/block-editor/developers/themes/ ςʔϚʹهड़͖͢ CSSͷɺΧϥʔύϨοτɺจࣈαΠζઃఆɺetc.. ͕ॻ͍ͯ͋Γ·͢ɻ ςʔϚϢχοτςετͷ࠷৽൛ʢຊޠ൛༁தͳͷͰͱΓ͋͑ͣӳ ޠ൛ʣಥͬࠐΜͰݟΔͱͳΜͱͳ͘Δ͖͜ͱݟ͑·͢ɻ 27
ͱΓ͋͑ͣɺeditor-styles ඞͣઃఆ͢ΔΑ͏ʹ͠·͠ΐ͏ɻ <?php function my_theme_setup() { add_theme_support('editor-styles'); add_editor_style( 'style-editor.css' );
} add_action( 'after_setup_theme'); ϨΠΞτσβΠϯͷࣗ༝্͕͕ͬͯɺαΠτͷදࣔͱΤσΟλ ͷݟ͕ͨҰக͍ͯ͠ͳ͍ͱ͋Μ·Γҙຯͳ͍ɻ 28
editor-style ΛΘ͟Θ͟࡞ΔͷΊΜͲ͘͞ ͍ͬͯਓɺ ͍͍͢WordPressͷͨΊ ͷCSSͷͭ͘Γ͔ͨ ͬͯΛɺ2015ͷ WordBench Osaka ͰͬͯΔͷͰͦΕಡΜ ͰԼ͍͞ɻ
https://www.slideshare.net/Toro_Unit/ wordpresscss ݹ͍ใ͋Γ·͕͢ɺ͋Μ·Γߟ͑ํม Θͬͯ·ͤΜɻ SMACSS + BEM ͬͯײ ͡Ͱ CSSॻ͍ͯ·͢ɻ 29
ΤσΟλΛΧελϚΠζ͢Δํ๏ @wordpress/blocks registerBlockStyle, registerBlockType @wordpress/plugins registerPlugin @wordpress/hooks addFilter, addAction 30
ΤσΟλΛΧελϚΠζ͢Δํ๏ @wordpress/blocks registerBlockStyle, registerBlockType @wordpress/plugins registerPlugin @wordpress/hooks addFilter, addAction ʹ͍ͭͯ͠·͢ɻ
31
طଘͷϒϩοΫͷ֦ு • ·ͣɺ৽͍͠ϒϩοΫΑΓطଘͷϒϩοΫͷ֦ுͰͲ͏ʹ͔Ͱ ͖ͳ͍͔ʁΛߟ͑Δɻ • ͭ·Γ class ଐੑΛ༩͠ɺCSS ͰσβΠϯΛΧελϚΠζ͢Δɻ 32
33
ϒϩοΫελΠϧ GUI ͰɺϒϩοΫʹΫϥεΛઃఆग़དྷΔɻ͍ͭͰʹϓϨϏϡʔ͍ͭͯ ͘Δɻඇৗʹศརɻ ઃఆ͞ΕΔɺis-style-hoge ͷΑ͏ͳܗࣜɻ "ߴͳઃఆ" ύωϧͷ "ՃCSS Ϋϥε"
Λૢ࡞͍ͯ͠Δ͚ͩɻ Documentation : https://developer.wordpress.org/block-editor/ developers/filters/block-filters/#block-style-variations 34
࣮ํ๏ɻ ΤσΟλʔʹಡ·ͤΔ 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' ); 35
wp.blocks.registerBlockStyle ͰɺελΠϧͷઃఆΛهड़ɻ const { registerBlockStyle } = wp.blocks; registerBlockStyle( 'core/quote',
{ name: 'hoge', label: '΄͛' } ); 36
ελΠϧ͕Ճ͞ΕΔɻeditor-style ΛͪΌ Μͱઃఆ͍ͯ͠ΕϓϨϏϡʔʹద༻͞Ε Δɻ • Ϙλϯͷؙ֯ελΠϧ • ςʔϒϧͷελΠϧ ͳͲಉ͡Έɻ ԼखʹΧελϜϒϩοΫΛ࡞ΔΑΓɺ͜ΕΛ
֮͑Δํ͕༗༻ੑߴ͍ɻ ϒϩοΫΛࣗ࡞͢ΔࡍɺσβΠϯͷόϦ ΤʔγϣϯΛ૿͢ͳΒ͜ΕΛ͏ɻ 37
ΧελϜϒϩοΫ։ൃ 38
֓ཁ • wp_register_script Ͱ js ϑΝΠϧΛಡΈࠐΉɻͦͷ͋ͱɺJSͰ ʢͱ͍͏ΑΓɺReact ͰʣΰϦΰϦ͢Δɻ • PHPͰͷϨϯμϦϯάΛهड़͢Δ͜ͱͰಈతͳཁૉ
(γϣʔτίʔ υɺΟδΣοτͷΑ͏ͳ) Λఏڙग़དྷΔɻ • ex. WP_Query ͰߘͷใΛදࣔɻ • JSʢ React ʣ ඞͣ͏ɺPHP ͨ·ʹ͏ఔɻ 39
Note: JSX ͱ͔ϞμϯJSͱ͔Ϗϧυͨ͠Γ͍ͬͯ͠ͱ͔Α͘ ฉ͚͘Ͳ • ެࣜͷαϯϓϧʹɺਃ͠༁ఔʹ ES5 ͷαϯϓϧ͕͋Δ͚Ͳɺ։ൃ ɺϞμϯJSͰߦΘΕ͍ͯΔɻ •
ʹ Babel ੵΜͰͳ͍ਓɺJSX + ϞμϯJS ॻ͍ͨ΄͏͕͍͍ɻ • ੵΜͰͳ͍Ͱ͢ɻ 40
React Ή͔͍ͭ͠ ? • React ษڧ͠Α͏ɻ͋Μͳͷ HTML Έ͍ͨͳͷͩʢચ • ΧελϜϒϩοΫ։ൃͳΒɺHTML
ʹໟ͕ੜ͑ͨҐͰΓΕΔέʔε ݁ߏ͋Δɻ • ͪΐͬͱͨ͠ϞϊΛ࡞Δͷ͞΄Ͳ͘͠ͳ͍ɻߴػೳͳϞϊͭ͘Ζ͏ͱ ͢Δͱ͍͠ɻ • ͱ͍͏͔ɺঢ়ଶཧ / ඇಉظ / ௨৴ / GUIͰΰϦΰϦΔͷ͕ͦͦ ͍͠ɻͦͷ͠͞Λղܾ͢ΔϞϊͷ͕̍ͭ React. 41
ΧελϜϒϩοΫ։ൃͳΒׂͱͳΜͱ͔ͳΔɻ • WordPress ͔ΒσʔλΛऔಘ͢ΔύοέʔδͳͲ͋ΔͷͰɺͦ͜ ·Ͱ React ྗແ͍͚ͯ͘Δɻ • ͪΖΜ React
ྗɺJS ྗ͕͋Ε໓͍ۤΖ͍Ζग़དྷΔ • ex. ֎෦ͷಠࣗAPIΛ༻͍ͯΰϦΰϦΔͱ͔ɻ 42
αΠτ੍࡞ͷ߹ େɺσβΠϯΛ࣮ݱ͢ΔͨΊͷ div ΛϒϩοΫʹ͍ͨ͠έʔεͱ͔ ͕ଟ͍ͷͰɻ ͍͍ͩͨ͜Μͳײ͡ͷίʔυɻ 43
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> ); 44
registerBlockType( 'my-block/section', { title: 'section', description: 'section', icon: 'text-page', category:
'layout', supports: { align: [ 'wide', 'full' ], anchor: true, }, edit, save, } ); 45
͜Μ͚ͩɻ ͳΜͱ͔ͳΔɻ 46
ͬͯΈΑ͏ɻ ࢀߟࢿྉνϡʔτϦΞϧ͋Δɻ • https://developer.wordpress.org/block-editor/tutorials/block- tutorial/writing-your-first-block-type/ • ެࣜͷνϡʔτϦΞϧɻ • https://github.com/WordPress/gutenberg-examples •
ެࣜͷαϯϓϧɻΑ͘ग़དྷͯΔɻ 47
ϒϩοΫΛͭͬͯ͘ΈΔ 48
४උɻ ͱΓ͋͑ͣదʹ WordPress ͷϓϥάΠϯΛ࡞͠·͢ɻ ϑΝΠϧߏ - my-first-block - package.json -
my-first-block.php ( js ͷొͱ͔ɺWordPressϓϥάΠϯຊମ ) - src/index.js ( ͜͜ʹΰϦΰϦ͢Δɻ) 49
package.json { "name": "my-first-block", "version": "0.0.1", "license": "GPL2.0+", "devDependencies": {
"@wordpress/scripts": "^5.0.0" }, "scripts": { "start": "wp-scripts start", "build": "wp-scripts build", } } ͜Ε͚ͩͰ OK 50
@wordpress/scripts https://www.npmjs.com/package/@wordpress/scripts • JSͷࣗಈϏϧυͱ͔ɺBabel ͱ͔ɺWebpack ͱ͔ɺESLint ͱ͔ɺ WordPressϓϥάΠϯ։ൃڥͷߏஙʢཁ docker-compose ʣͱ͔
ͳΜͰͬͯ͘ΕΔ͍͢͝Ϡπɻ • PostCSS / SCSS ͷϏϧυࠓͷͱ͜Ζग़དྷͳ͍͚ͲɺՃ͞ΕΔ͔ ɻhttps://github.com/WordPress/gutenberg/issues/14801 51
wp-script start or wp-script build Λ͢Δͱ src/index.js ͔Βɺ • build/index.js
• build/index.asset.php Λు͖ग़͢ɻ 52
• @wordpress/blocks -> wp.blocks ͷΑ͏ʹɺάϩʔόϧมΛࢀ র͢ΔΑ͏ʹมͯ͘͠ΕΔɻ import { registerBlockStyle }
from '@wprdpress/blocks' Λɺ const { registerBlockStyle } = wp.blocks; Έ͍ͨʹͯ͘͠ΕΔɻ • jQuery ͷ WordPress ʹಉࠝ͞Ε͍ͯΔJSಉ༷ɻ • ςʔϚ։ൃͳͲͰศརʹ͑Δɻ 53
my-first-block.php function my_first_block_register_block() { $asset_file = include( plugin_dir_path( __FILE__ )
. 'build/index.asset.php'); wp_register_script( 'my-first-block', plugins_url( 'build/index.js', __FILE__ ), $asset_file['dependencies'], $asset_file['version'] ); // block ͷొɻ register_block_type( 'my-first-block/hello', array( 'editor_script' => 'my-first-block', ) ); } add_action( 'init', 'my_first_block_register_block' ); 54
build/index.asset.php wp_register_script ͢Δͱ͖ͷɺґଘؔɺversion ΛɺJS ͔Βࣗಈతʹผͯ͠࡞͞Ε Δɻࠓ·ͰखಈͰͬͯͨͷ͕ΞϗΈ͍ͨʹࢥ͑Δ͘Β͍ศརɻ <?php return array( 'dependencies'
=> array( 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose','wp-data', 'wp-element', 'wp-i18n', 'wp-polyfill' ), 'version' => '3ba4a1cc34f9a198d6519b52f8622629' ); 55
register_block_type ϒϩοΫͷొΛߦ͏ɻࣄલʹ JSͷొ͕ඞཁͳͷͰɺwp_register_script Ͱ֤ࣗͬͯ ͍ͩ͘͞ɻ <?php register_block_type( 'ϒϩοΫϥΠϒϥϦɾϓϥάΠϯ໊/ϒϩοΫ໊', array( 'script'
=> 'ొͯ͋͠Δjsͷ໊લɺϑϩϯτ/ཧը໘༻', 'style' => 'ొͯ͋͠ΔCSSͷ໊લɺϑϩϯτ/ཧը໘༻', 'editor_script' => 'ొͯ͋͠Δjsͷ໊લɺཧը໘༻', 'editor_style' => 'ొͯ͋͠ΔCSSͷ໊લɺཧը໘༻', ) ); editor_script ͚ͩ͋ΕOK. ϓϥάΠϯଆͰ༻ҙͨ͠CSSͱ͔Λಡ·ͤͨΓͰ͖Δɻ 56
note: ଟݴޠԽͱ͔ެࣜͷexampleͱ͔ݟͯɻ https://make.wordpress.org/core/2018/11/09/new-javascript-i18n- support-in-wordpress/ 57
͓·ͨͤ͠·ͨ͠ʂ Α͏͘ϒϩοΫ։ൃʂ 58
import { registerBlockType } from '@wordpress/blocks'; // const { registerBlockType
} = wp.blocks ʹม͞ΕΔ registerBlockType( 'my-first-block/hello', { title: 'hello', icon: 'palmtree', // Dashicons. <svg></svg>ͷࢦఆग़དྷΔ category: 'common', // ΠϯαʔλʔͷͲͷύωϧʹදࣔ͢Δ͔ɻ edit({ className } ) { return ( <div className={ className }>ΤσΟλʔͩΑɻ</div> ); }, save({ className } ) { return ( <div className={ className }>อଘ͞ΕΔσʔλɺ࣮ࡍʹදࣔ͞ΕΔςΩετɻ</div> ); }, } ); 59
60
ΧελϜϒϩοΫ͕Ͱ͖ͨʂ 61
·͊ɺ͜Ε͚ͩͩͱͦ͜·Ͱ͍ಓͳ͍ɻʢ࠶ར༻ϒϩοΫͰ͑͑ ΜͬͯͳΔʣ 62
ฤूՄೳྖҬΛͭ͘Δʂ 63
͘ͳΔͷͰɺίʔυΛׂɻ 64
import { registerBlockType } from '@wordpress/blocks'; import { RichText }
from '@wordpress/block-editor'; const edit = ( { className, attributes: { text }, setAttributes } ) => { const onChange = ( value ) => { return setAttributes( { text: value } ); }; return ( <div className={ className }> <TextControl value={ text } onChange={ onChange } /> </div> ); }; const save = ( { className, attributes: { text } } ) => { return ( <div className={ className }> <div className="text">{ text }</div> </div> ); }; 65
registerBlockType( 'my-first-block/hello', { title: 'hello', icon: 'palmtree', category: 'common', attributes:
{ text: { type: 'string', default: '', }, }, edit, save, } ); 66
registerBlockType( 'my-first-block/hello', { title: 'hello', icon: 'palmtree', category: 'common', attributes:
{ text: { type: 'string', default: '', }, }, edit, save, } ); 67
import { registerBlockType } from '@wordpress/blocks'; import { TextControl }
from '@wordpress/components'; const edit = ( { className, attributes: { text }, setAttributes } ) => { const onChange = ( value ) => { return setAttributes( { text: value } ); }; return ( <div className={ className }> <TextControl value={ text } onChange={ onChange } /> </div> ); }; const save = ( { className, attributes: { text } } ) => { return ( <div className={ className }> <div className="text">{ text }</div> </div> ); }; 68
const edit = ( { className, attributes: { text },
setAttributes } ) => { const onChange = ( value ) => { return setAttributes( { text: value } ); }; return ( <div className={ className }> <TextControl value={ text } onChange={ onChange } /> </div> ); }; 69
<TextControl /> • @wordpress/components ఏڙ͞ΕΔίϯϙʔωϯτɻinput λάΛ ు͖ग़͢ɻϑΥʔϜͷ෦ͳͲɺ΄΅શͯ༻ҙ͞Ε͍ͯΔɻ • ex. <SelectControl
/>, <DateTime /> @wordpress/components ʹଞʹ༷ʑͳίϯϙʔωϯτ͕͋Δɻ Component Reference: https://developer.wordpress.org/block- editor/components/ 70
attributes ϓϩύςΟ registerBlockType( 'my-first-block/hello', { title: 'hello', icon: 'palmtree', category:
'common', attributes: { text: { type: 'string', default: '', }, }, edit, save, } ); อଘ͢ΔσʔλͷܗࣜΛఆٛɻσʔλܕɺσϑΥϧτͳͲɻྻͳͲࢦఆՄೳɻ 71
attirubutes, setAttirubutes const edit = ( { className, attributes: {
text }, setAttributes } ) => { const onChange = ( value ) => { return setAttributes( { text: value } ); }; return ( <div className={ className }> <TextControl value={ text } onChange={ onChange } /> </div> ); }; TextControl ͷத͕มߋ͞ΕͨΒɺݱࡏͷ attributes Λ࠶ઃఆɻߋ৽͢ΔͷΈ Λهड़ɻ https://developer.wordpress.org/block-editor/developers/block-api/block- attributes/ 72
<div class="wp-block-my-first-block-hello"><div class="text">Hello!!!</div></div> 73
<!-- wp:my-first-block/hello {"text":"Hello!!!"} --> <div class="wp-block-my-first-block-hello"><div class="text">Hello!!!</div></div> <!-- /wp:my-first-block/hello -->
attirbutes ɺίϝϯτͱͯ͠อଘ͞Ε͍ͯΔɻ( the_cotent Ͱు͖ग़ ͢ࡍʹɺϑΟϧλʔͰআ͞ΕΔ) 74
ͬͱ;ͭ͏ͷϒϩοΫͬΆ͍ͨ͘͠ɻ ΤσΟλʹ input ͕͋Δͷͪΐͬͱɻɻɻ 75
<RichText /> ฤूग़དྷΔςΩετΛఏڙ͢ΔίϯϙʔωϯτɻίΞͷϒϩοΫςΩετฤू ग़དྷΔͷ͍͍ͩͨ͜ΕͰग़དྷͯΔɻվߦͱ͔औΓѻ͑Δɻ • <RichText /> : ΤσΟλը໘༻ɻ •
<RichText.Content /> : HTMLΛు͖ग़͢༻ɻ <RichText.Content tagName='p' value='Hello' /> <p>hello</p> https://developer.wordpress.org/block-editor/developers/richtext/ 76
import { registerBlockType } from '@wordpress/blocks'; import { RichText }
from '@wordpress/block-editor'; const edit = ( { className, attributes: { text }, setAttributes } ) => { const onChange = ( value ) => setAttributes( { text: value } ); return ( <div className={ className }> <RichText tagName="div" className="text" value={ text } onChange={ onChange } /> </div> ); }; const save = ( { className, attributes: { text } } ) => { return ( <div className={ className }> <RichText.Content tagName="div" className="text" value={ text } /> </div> ); }; 77
78
ྑ͍ײ͡ʹͳͬͨ!! 79
Ͱɻɻɻ <!-- wp:my-first-block/hello {"text":"Hello!!!"} --> <div class="wp-block-my-first-block-hello"><div class="text">Hello!!!</div></div> <!-- /wp:my-first-block/hello
--> ʮHello!!!ʯॏෳͯ͠Δɻίϝϯτ͔ΒͰͳ͘ɺHTML͔Βɺ ΛऔΓग़ͤͳ͍͔ʁ 80
attributes: { text: { type: 'string', default: '', }, },
81
attributes: { text: { type: 'string', source: 'html', selector: '.text',
default: '', }, }, 82
attributes: { text: { type: 'string', source: 'html', selector: '.text',
default: '', }, }, 83
<!-- wp:my-first-block/hello --> <div class="wp-block-my-first-block-hello"><div class="text">Hello!!!</div></div> <!-- /wp:my-first-block/hello --> {"text":"Hello!!!"}
Λফͤͨɻ 84
attirbutes ͷ source Λઃఆ͢Δ͜ͱͰɺ͍Ζ͍ΖͳܗͰऔಘग़དྷ Δɻ ʹΑͬͯɺͦͷଞͷઃఆ͕ඞཁɻ https://developer.wordpress.org/block-editor/developers/block-api/ block-attributes/ type: array
ʹ͢Δ͜ͱͰɺෳͷཁૉΛऔಘग़དྷͨΓ͢Δɻ ϦετͳͲͱҰॹʹ͏ͱඒຯ͍͠ɻ 85
source ʹࢦఆͰ͖Δ • html: innerHTML ΛऔಘɻෳߦͰऔಘͯ͠ྻʹग़དྷͨΓ͢ Δɻ • text: textContent
Λऔಘ • attribute : ଐੑΛऔಘ • query: ෳͷଐੑɺςΩετͳͲΛऔಘͯ͠ΦϒδΣΫτʹɻ 86
υΩϡϝϯςʔγϣϯʹॻ͍ͯແ͍ͷ • children : ࢠཁૉɻ • node / tag :
͍Ͳ͜Ζ͕ྑ͘ղΒͳ͍ • property: ιʔείʔυʹ͚͋ͬͨͲͳΜ͔ͩղΒͳ͍ɻ 87
Note: ΧελϜϑΟʔϧυͱͷ࿈ܞग़དྷΔɻ register_post_meta( 'post', 'my_post_sub_title', array( 'show_in_rest' => true, 'single'
=> true, 'type' => 'string', ) ); attributes: { author: { type: 'string', source: 'meta', meta: 'my_post_sub_title' }, }, ΧελϜϑΟʔϧυͷΩʔΛ post_hoge ͱ͔ʹ͢Δͱಈ͔ͳ͍ͷͰҙɻ 88
ઃఆมߋग़དྷΔUIɻ https://developer.wordpress.org/block-editor/tutorials/block-tutorial/ block-controls-toolbar-and-sidebar/ InspectorControls, BlockControls αΠυόʔͷઃఆ߲(ΠϯεϖΫλ)ɺϒϩοΫͷπʔϧόʔʹ߲Λ ՃͰ͖Δɻ 89
const edit = ( props ) => { // ͷ४උͱ͔͍Ζ͍ΖΔɻ
return ( <div> <InspectorControls> <PanelBody> // ઃఆͱ͔ </PanelBody> </InspectorControls> <BlockControls> <Toolbar controls={ controls } /> </BlockControls> <div> //ϒϩοΫຊମ </div> </div> ) }; 90
InnerBlocks ϒϩοΫͷதʹϒϩοΫΛೖΕΒΕΔϠπɻΧϥϜϒϩοΫɺάϧʔϓϒϩοΫɺJetpack ͷίϯλΫτ ϑΥʔϜͰ༻͍ΒΕ͍ͯΔɻallowedBlocks Λࢦఆ͢ΔͱɺதʹೖΕΒΕΔϒϩοΫΛ੍ݶͰ͖Δɻ const edit = ( {
className } ) => ( <div className={ className }> <InnerBlocks allowedBlocks={ [ 'core/code' ] } /> </div> ); const save = ( { className } ) => ( <div className={ className }> <InnerBlocks.Content /> </div> ); 91
Dynamic Blocks https://developer.wordpress.org/block-editor/tutorials/block-tutorial/ creating-dynamic-blocks/ PHP Λ༻͍ͯɺαʔόʔαΠυͰಈతʹɺϨϯμϦϯά͢ΔϒϩοΫɻ 92
example: Advanced Posts Blocks https://www.wordpress.org/plugins/ advanced-posts-blocks/ • ΧςΰϦʔ/λά/λΫιϊϛʔͱߘλΠ ϓͰɺߜΓࠐ·ΕͨߘΛදࣔ͢Δɻϒ ϩοΫͳͲΛఏڙɻ
• TOPϖʔδͷ৽ணใҰཡͱ͔Ͱ͏ɻ 93
94
࡞Γํ render_callback ͱɺඞཁͰ͋Εɺattributes Λࢦఆɻ௨ৗͷϒϩοΫͱҧ͍ɺattributes Ͱࢦఆ͠ͳ͍ͱɺclassName ΛҾͬுͬͯདྷΕͳ͍ɻ register_block_type( 'my-first-block/hello', array( 'editor_script'
=> 'my-first-block', 'attributes' => [ 'className' => [ 'type' => 'string', 'default' => '', ], ], 'render_callback' => 'my_first_block_render' ) ); 95
example.1 ୈ2Ҿʹɺsave ͞ΕͨHTML͕ͦͷ··͞ΕΔͷͰɺ͜ΕΛPHPଆͰɺද੍ࣔ ޚɻ function my_first_block_render( $attributes, $content ) {
if ( get_current_user_id() ) { return $content; } return sprintf( '<div class="%1$s">login to see this content.</div>', $attributes['className'] ); } 96
JSଆී௨ʹॻ͘ɻ const edit = ( { className } ) =>
( <div className={ className }> <InnerBlocks /> </div> ); const save = ( { className } ) => ( <div className={ className }> <InnerBlocks.Content /> </div> ); 97
<!-- wp:my-first-block/hello --> <div class="wp-block-my-first-block-hello"><!-- wp:paragraph --> <p>ͳ͍͠ΐͳ͠ɻ</p> <!-- /wp:paragraph
--></div> <!-- /wp:my-first-block/hello --> 98
͍Ͳ͜Ζ • ϩάΠϯϢʔβʔʹͷΈݟ͍ͤͨίϯςϯπɻ • ظؒݶఆϞϊɻ • ͜ΕͰA/BςετΛϒϩοΫ୯ҐͰΔϠπ͕͋Δͱ͔ฉ͍ͨ͜ͱ ͋Δɻ • InnerBlocks
ͱηοτͰ͏ίτ͕ଟͦ͏ɻ 99
example.2 function my_first_block_render( $attributes, $content ) { if ( get_current_user_id()
) { return sprintf( '<div class="%1$s">Hello %2$s !!</div>', $attributes['className'], wp_get_current_user()->display_name ); } } 100
import { registerBlockType } from '@wordpress/blocks'; import { useSelect }
from '@wordpress/data'; // JS ͰίΞͷσʔλΛҾͬுͬͯ͘Δɻ export const useCurrentUser = () => { return useSelect( ( select ) => { return select( 'core' ).getCurrentUser(); } ); }; const edit = ( { className } ) => { const { name } = useCurrentUser(); return ( <div className={ className }> Hello { name } !! </div> ); }; // શͯ PHP ͰϨϯμϦϯά͢Δ߹ɺsave null. const save = () => null; 101
<!-- wp:my-first-block/hello {"className":"wp-block-my-first-block-hello"} /--> ͳײ͡Ͱอଘ͞ΕΔɻsave ͕ null ͳͷͰɺίϝϯτͷΈอଘ͞ΕΔɻ γϣʔτίʔυతɻ 102
Note: ΤσΟλ্ͰαʔόʔαΠυϨϯμϦϯάग़དྷΔ import { ServerSideRender } from '@wordpress/components'; const edit
= ( { className } ) => ( <ServerSideRender block="my-first-block/hello" attributes={ { className, } } /> ); 103
͍Ͳ͜Ζ • ࠷৽ͷߘҰཡɻ • WP_Query ͱ͔ɻ • ࠓ·ͰɺγϣʔτίʔυɺΟδΣοτͰද͍ࣔͯͨ͠Ϟϊɻ 104
σϝϦοτ • ϓϥάΠϯ͕ແޮͳΔͱવػೳ͠ͳ͍ɻ • ϓϥάΠϯΛແޮʹ͢Δͱɺফ͑Δʂʂʂʂ • ௨ৗͷϒϩοΫHTMLΛ DBʹอଘ͍ͯ͠ΔͷͰɺফ͑ͳ͍ɻ • ཧը໘ͰϒϩοΫ͕؆୯ʹ࡞ΕΔΑʁతͳϓϥάΠϯɺDynamic
Block ͳ ࣮͕ଟ͍ɻ ϓϥάΠϯΛແޮʹ͢Δɾ༷͕มΘΔͱɺίϯςϯπ͕ফ͑Δ ϦεΫɻ • DB ʹೖ͍ͬͯͳ͍ͷͰɺݕࡧͳͲޮ͔ͳ͍ɻ 105
ϒϩοΫ։ൃͷֶͼํ 106
·ͣɺReact ͱྑ͘ͳΔɻ • ͱΓ͋͑ͣɺcreate-react-app Ͱ؆ ୯ͳΞϓϦΛ࡞ͬͨΓ͢Δͷେࣄɻ • WordPress Meetup Map
ͦͷҰɻ • ͍ͭͰʹ Redux ͱ͔৮͓ͬͯ͘ͱ͍ ͍ɻʢ෦తʹΘΕ·ͬͯ͘Δɻʣ 107
Block Editor Handbook • νϡʔτϦΞϧͳͲͦͦ͋͜͜Δͷ ͰɺͱΓ͋͑ͣಡΉɻ • ࠔͬͨΒಡΉɻ 108
Gutenberg ͷιʔείʔυ ·ͣɺpackages/block-library/src ͋ ͨΓΛআ͍ͯɺίΞͷϒϩοΫͷιʔεΛಡ Ήɺࣸܦ͢Δ͋ͨΓ͔Βɻ • issue ௐΔͱ͍Ζ͍Ζใग़ͯ͘ Δɻ
109
ਓͷϓϥάΠϯΛಡΉɻ • LIQUID BLOCKS: https://wordpress.org/plugins/liquid-blocks/ • Snow Monkey Blocks: https://wordpress.org/plugins/snow-monkey-blocks/
• Slide: https://github.com/WordPress/slides • ࠓͷ WordCamp US Ͱͷ matt ͰͷηογϣϯͷεϥΠυ͜ΕͰ࡞ΒΕ ͍ͯΔɻ* ίΞίϛολʔͰΤσΟλʔνʔϜͷɺElla ͞Μ࡞ɻͺͶ͐ɻ 110
• ࠓճͨ͠༰΄ΜͷҰ෦ɻ ਂਂ͍ɻ • registerPlugin Λ׆༻͢Δ͜ͱͰɺߋʹ෯͕͕Δɻ • ͱΓ͋͑ͣɺश͏ΑΓ׳ΕΖײ͋ΔͷͰɺखΛಈ͔͢ͷେࣄɻ • ίΞͷ։ൃͷϒϩάಡ͏ɻ͍ํͳͲॻ͍ͯ͋ͬͨΓ͢Δɻ
• Making WordPress ͷ #core-editor νϟϯωϧͰ࣭ͯ͠ΈΑ͏ 111
ϒϩοΫΤσΟλͰมΘ ΔϫʔΫϑϩʔ 112
ϒϩοΫ͝ͱͷ༷Λఆ͕ٛඞཁɻ • ϒϩοΫ͝ͱͷೖྗ߲ͷఆٛɻ • ͦΕɺߋ৽͢ΔϢʔβʔʹͱ͍͍ͬͯ͢ͷ͔ʁ • Ϣʔβʔͷҙਤ͠ͳ͍ಈ࡞Λ͍ͯ͠ͳ͍͔ʁ • ΤσΟλͷࣗ༝͕ߴ͘GUIͰΰϦΰϦ࿔ΕΔɻΧελϚΠβʔ ͱΈ͚ɻ
113
ฐࣾͷ߹ • ՄೳͳݶΓΧελϚΠβʔΘͣɺશͯϒϩοΫΤσΟλʔ্Ͱ ݁ɻ • σβΠϯ͔ΒϒϩοΫͷ༷Λى͜͢߹͋Δ͠ɺϫΠϠʔϑ ϨʔϜ͔ΒϒϩοΫͷ༷Λى͜͢߹͋ΔɻαΠτཁ݅࣍ୈɻ 114
ϒϩοΫ࡞Ε͍͍ͬͯΜ͡Όͳ͍ɻ • ΧελϜϒϩοΫ͕େྔʹ͍͋ͬͯ͜ͳͤͳ͍ɻແཧɻ • registerBlockStyle Λ্खʹ׆༻͠ɺγϯϓϧ͔ͭɺόϦΤʔ γϣϯΛ͍࣋ͨͤ͢ํʹ༷Λ͢ɻCSSઃܭྗ͕ཁٻ͞ΕΔɻ • ίΞͷϒϩοΫͷ HTMLߏͰɺෆՄೳͳσβΠϯΛͲ͏͢Δ͔
͍ͭͰݕ౼ࣄ߲ɻ 115
σβΠφʔɾσΟϨΫλʔͱڠྗ͠ͳ͍ͱ͏·͍͔͘ͳ͍Α ࣗͰ࡞Εͳͯ͘ɺ͓ͬͯ͘͜ͱେࣄ 116
͍͞͝ʹ • ϒϩοΫΤσΟλʔόάͬͯΔ -> ϑΟʔυόοΫ͠·͠ΐ͏ɻhttps://github.com/WordPress/gutenberg/issues • ͍ͮΒ͍ -> ϑΟʔυόοΫ͠·͠ΐ͏ɻhttps://github.com/WordPress/gutenberg/issues •
ӳޠΘ͔ΒΜ -> Google ༁ • ͳΜ͔͜Θ͍ -> SNSͱ͔ͰݴͬͯΔํ͕͜Θ͍ͧ 117
118
ϒϩοΫΤσΟλʔ͕͍͘͢ͳΔͷ͔ɺͦ͏Ͱͳ͍͔Β࣍ୈɻ • https://github.com/WordPress/gutenberg/issues/18362 ຊޠೖ ྗͰͷม࣌ʹΧʔιϧ͕ҙਤ͠ͳ͍ॴʹҠಈ͢Δෆ۩߹ɻ 119
Thanks! • @Toro_Unit on Twitter and WordPress.org • @torounit on
Github and Making WordPress 120