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
Gutenberg 101 - WordCamp Birmingham 2018
Search
Jacob McKinney
August 04, 2018
Technology
0
380
Gutenberg 101 - WordCamp Birmingham 2018
A quick introduction to WordPress' new Gutenberg User Interface.
Jacob McKinney
August 04, 2018
Tweet
Share
More Decks by Jacob McKinney
See All by Jacob McKinney
WPHSV - Site Structure
jacobmc
0
53
WPHSV MeetUp - Migrate to 5.0 and Gutenberg
jacobmc
0
26
WPHSV MeetUp - Gutenberg 101
jacobmc
0
46
Intro to WooCommerce
jacobmc
0
79
Other Decks in Technology
See All in Technology
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
120
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
440
Create Ruby native extension gem with Go
sue445
0
130
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
280
使いやすいプラットフォームの作り方 ー LINEヤフーのKubernetes基盤に学ぶ理論と実践
lycorptech_jp
PRO
1
160
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
230
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
230
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
330
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
470
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
3
200
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.3k
会社紹介資料 / Sansan Company Profile
sansan33
PRO
7
380k
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Cult of Friendly URLs
andyhume
79
6.6k
Designing Experiences People Love
moore
142
24k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
GitHub's CSS Performance
jonrohan
1032
460k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Transcript
Gutenberg 101 Jacob McKinney WordPress Developer @jacobmcdev
Guten Tag, Gutenberg
What we will cover: • The Gutenberg User Interface •
Current Features of Gutenberg (Blocks, etc) • Glimpses of Gutenberg in the Wild • How to Prepare for Gutenberg
The Gutenberg UI
The WordPress we all know and love.
Gutenberg
Gutenberg Blocks and Features
Gutenberg Blocks
Gutenberg Blocks • Classic • Heading • Subheading • Paragraph
• List • Quote • Image • Cover Image • Gallery • Audio • Video • File • Pullquote • Verse • Code • Custom HTML • Preformatted • Table • Button • Columns (beta) • Page Break • More • Separator • Spacer • Widgets (Archives, Categories, Shortcodes, etc) • Embeds
Block Settings
Block Settings in Action
Adding Blocks - Toolbar
Adding Blocks - Inline
Moving Blocks - Arrows
Moving Blocks - Dragging
Document Outline
Accessibility Warnings
Opt-in Features Gotta touch code for these ¯\_(ツ)_/¯ • Default
Block Styles • Wide Alignments • Block Color Palettes • Disable Custom Colors • Block Font Sizes
Gutenberg in the Wild
Atomic Blocks Theme
Atomic Blocks - Gutenberg Blocks Collection • Post Grid •
Container • Testimonial • Inline Notice • Accordion • Share Icons • Call-To-Action • Customizable Button • Spacer & Divider • Author Profile • Drop Cap
Drop It
Preparing for Gutenberg
What should you do? 1. Get excited! 2. Update all
the things! 3. Consider replacing any legacy plugins. 4. Play with Gutenberg! (Check out Frontenberg) 5. Set up a staging site or local development site and test! 6. Download Gutenberg!
• Official Gutenberg Info - https://wordpress.org/gutenberg/ • Frontenberg - https://testgutenberg.com/
• Gutenberg Theme Support Docs - https://wordpress.org/gutenberg/handbook/e xtensibility/theme-support/ • Slides - https://jacobmckinney.com/wcbhm-gutenber g-101/ Resources • Gutenberg Plugin - https://wordpress.org/plugins/gutenberg/ • Atomic Blocks Theme - https://wordpress.org/themes/atomic-blocks/ • Atomic Blocks Plugins - https://wordpress.org/plugins/atomic-blocks/ • Drop It Plugin - https://wordpress.org/plugins/dropit/ • Classic Editor Plugin (Don’t do it!) - https://wordpress.org/plugins/classic-editor/
Questions?