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
53
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.4k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.6k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
9.8k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
380
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
410
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
540
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
850
本当にだれにでもできる、WordPress をよりよいものにする方法。/ wordcamp tokyo 2019
torounit
2
3.8k
Other Decks in Technology
See All in Technology
『AWS Distinguished Engineerに学ぶ リトライの技術』 #ARC403/Marc Brooker on Try again: The tools and techniques behind resilient systems
quiver
0
120
[JAWS-UG栃木]地方だからできたクラウドネイティブ事例大公開! / jawsug_tochigi_tachibana
biatunky
0
210
これからSREになる人と、これからもSREをやっていく人へ
masayoshi
5
3.8k
カスタムインストラクションでGitHub Copilotをカスタマイズ!
07jp27
8
1.7k
バクラクの組織とアーキテクチャ(要約)2025/01版
shkomine
13
3.3k
自動と手動の両輪で開発するデータクレンジング
estie
2
180
依存関係があるコンポーネントは Barrel ファイルでまとめよう
azukiazusa1
2
470
もし今からGraphQLを採用するなら
kazukihayase
10
4.5k
[2025クラウドガバナンスはこう変わる!マルチアカウント運用のre:Invent最新情報と活用例] re:Invent 2024 から見る AWS マルチアカウントガバナンスのこれまでとこれから
0nihajim
0
120
[TechNight #86] Oracle GoldenGate - 23ai 最新情報&プロジェクトからの学び
oracle4engineer
PRO
1
220
生成AIの利活用を加速させるための取り組み「prAIrie-dog」/ Shibuya_AI_1
visional_engineering_and_design
1
120
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
490
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
530
The Cult of Friendly URLs
andyhume
78
6.2k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Optimizing for Happiness
mojombo
376
70k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
128
19k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
Adopting Sorbet at Scale
ufuk
74
9.2k
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