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
530
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.6k
Other Decks in Technology
See All in Technology
Turn Your Community into a Fundraising Catalyst for Black Philanthropy Month
auctria
PRO
0
150
本当にわかりやすいAIエージェント入門
segavvy
10
6.1k
なぜAI時代に 「イベント」を中心に考えるのか? / Why focus on "events" in the age of AI?
ytake
2
740
QuickBooks®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
qbsupportinfo
0
120
地図と生成AI
nakasho
0
790
スプリントゴール未達症候群に送る処方箋
kakehashi
PRO
1
260
自分がLinc’wellで提供しているプロダクトを理解するためにやったこと
murabayashi
1
160
東京海上日動におけるセキュアな開発プロセスの取り組み
miyabit
0
170
Shadow DOM & Security - Exploring the boundary between light and shadow
masatokinugawa
0
710
経験がないことを言い訳にしない、 AI時代の他領域への染み出し方
parayama0625
0
220
TypeScript 上達の道
ysknsid25
21
4.5k
株式会社島津製作所_研究開発(集団協業と知的生産)の現場を支える、OSS知識基盤システムの導入
akahane92
1
1.3k
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Making Projects Easy
brettharned
116
6.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
GraphQLとの向き合い方2022年版
quramy
49
14k
KATA
mclloyd
30
14k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Embracing the Ebb and Flow
colly
86
4.8k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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知識) •よく使うスタイルは、スタイルを選択できるよう にしておいた方が良さそう。 •フロントとエディターの見た目を一緒にするのは 結構大変(やってると便利)