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 started customize for block editor
Search
Toro_Unit (Hiroshi Urabe)
November 16, 2019
Technology
12
3k
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)
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.1k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.2k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
9.3k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
330
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
400
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
510
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
820
本当にだれにでもできる、WordPress をよりよいものにする方法。/ wordcamp tokyo 2019
torounit
2
2.5k
プラグインとの付き合い方 #WPmeetupkobe / 2019-08-31 Kansai WordPress Meetup Kobe vol.10
torounit
4
1.4k
Other Decks in Technology
See All in Technology
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
180
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
710
VPoEの視点から見た、ヘンリーがサーバーサイドKotlinを使う理由 / Why Server-side Kotlin 2024
cho0o0
1
420
20240724_cm_odyssey_hibiyatech
hiashisan
0
110
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
サービスの持続的な成長と技術負債について
siva_official
PRO
10
4.4k
スレットハンティングについて知っておきたいこと
hacket
0
130
データベース研修 DB基礎【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
210
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
Featured
See All Featured
Teambox: Starting and Learning
jrom
130
8.6k
BBQ
matthewcrist
82
9k
Building Adaptive Systems
keathley
34
2k
How STYLIGHT went responsive
nonsquared
93
5k
Facilitating Awesome Meetings
lara
46
5.8k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Become a Pro
speakerdeck
PRO
15
4.8k
RailsConf 2023
tenderlove
16
720
What's new in Ruby 2.0
geeforr
338
31k
Gamification - CAS2011
davidbonilla
78
4.9k
Embracing the Ebb and Flow
colly
81
4.3k
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