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
Kansai WordPress Meetup@Kyoto Lightning talk
Search
Yoriyasu Nishimura
January 18, 2020
Technology
0
490
Kansai WordPress Meetup@Kyoto Lightning talk
ブロックエディターに挑戦!
Yoriyasu Nishimura
January 18, 2020
Tweet
Share
More Decks by Yoriyasu Nishimura
See All by Yoriyasu Nishimura
失敗談から 運用しやすいサイトの作り方を 考えてみた
yori3
0
2.5k
Other Decks in Technology
See All in Technology
終了の危機にあった15年続くWebサービスを全力で存続させる - phpcon2024
yositosi
28
25k
組織に自動テストを書く文化を根付かせる戦略(2024冬版) / Building Automated Test Culture 2024 Winter Edition
twada
PRO
26
7.1k
新しいスケーリング則と学習理論
taiji_suzuki
9
3.7k
Amazon Q Developerで.NET Frameworkプロジェクトをモダナイズしてみた
kenichirokimura
1
140
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
1
16k
大規模言語モデルとそのソフトウェア開発に向けた応用 (2024年版)
kazato
2
450
【令和最新版】ロボットシミュレータ Genesis x ROS 2で始める快適AIロボット開発
hakuturu583
2
1.4k
DevFest 2024 Incheon / Songdo - Compose UI 조합 심화
wisemuji
0
250
ヤプリQA課題の見える化
gu3
0
150
C++26 エラー性動作
faithandbrave
2
880
Fearsome File Formats
ange
0
550
ゼロからわかる!!AWSの構成図を書いてみようワークショップ 問題&解答解説 #デッカイギ #羽田デッカイギおつ
_mossann_t
0
440
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
3
340
Speed Design
sergeychernyshev
25
720
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
171
50k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Bash Introduction
62gerente
609
210k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
550
Making Projects Easy
brettharned
116
6k
The Power of CSS Pseudo Elements
geoffreycrofte
74
5.4k
Mobile First: as difficult as doing things right
swwweet
222
9k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
Practical Orchestrator
shlominoach
186
10k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.9k
Transcript
మ͍͏ͪʹଧͯʂʁ ϒϩοΫΤσ Ολʔʹઓʂ 2020年1月18日 西村 依泰
ࣗݾհ •Facebook:yoriyasu.nishimura •Twitter:@yori3_otim2 •GitHub:github.com/yori3 Webデザイナー(自称) マークアップエンジニア(仕事) 西村 依泰(yori3)
ࠓճ͢͜ͱ •WordPressのブロックエディターを使って やったこと •ブロックエディター使ってみた感想
ࠓճ͞ͳ͍͜ͱ •ブロックエディターの使いかた。 •ソースコードの解説
8PSE$BNQ͕ऴΘͬͯ •WordCamp楽しかった。
8PSE$BNQ͕ऴΘͬͯ •WordCamp楽しかった。 •ブロックエディター関連のセッション人気。
8PSE$BNQ͕ऴΘͬͯ •WordCamp楽しかった。 •ブロックエディター関連のセッション人気。 •ブロックエディターあんまり触ってないな。
8PSE$BNQ͕ऴΘͬͯ •WordCamp楽しかった。 •ブロックエディター関連のセッション人気。 •ブロックエディターあんまり触ってないな。 よし、やろう
ͬͨ͜ͱ •自分のサイトをブロックエディター化 •固定ページはhtml直打ち →固定ページもブロックエディターで作る •管理画面そのまま →フロントとエディターのスタイルを合わせる
ελΠϧΛઃఆ •言語ごとのシンタックスハイライトを出したかったの で、ソースコードブロックのスタイルを設定できるよ うにした。 •ソースコードのシンタックスハイライト →prism.jsを使用 •prism.jsのルール(クラス名にlanguage-〇〇を含む) に従ってクラスがつくように、スタイルを作成
ελΠϧΛઃఆ
ελΠϧΛઃఆ •割と簡単に設定できた。 •選択するだけで設定できると楽。
ݻఆϖʔδϒϩοΫΤσ ΟλʔͰ࡞Δ •基本は既存のブロックを使う。 •カスタムブロックもやってみたかったので、調べ ながらdl,dt,ddタグを作る。
ݻఆϖʔδϒϩοΫΤσ ΟλʔͰ࡞Δ •高度な設定でクラス名をつけられるので、割と自 由度は高い。 •カスタムブロックはReact.js使うので、ちょっと 難易度高め。
ϑϩϯτͱΤσΟλʔͷελΠϧΛ߹ΘͤΔ フロント エディター
ϑϩϯτͱΤσΟλʔͷελΠϧΛ߹ΘͤΔ フロント エディター
ϑϩϯτͱΤσΟλʔͷελΠϧΛ߹ΘͤΔ •見た目が揃ってると、編集していてわかりやすい。 •エディターで生成される htmlが複雑なので 合わせるのが結構つらい
None
ͬͯΈͨײ •ブロックエディターでも結構思い通りできる。 (要CSS知識) •よく使うスタイルは、スタイルを選択できるよう にしておいた方が良さそう。 •フロントとエディターの見た目を一緒にするのは 結構大変(やってると便利)