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
340
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
51
WPHSV MeetUp - Migrate to 5.0 and Gutenberg
jacobmc
0
25
WPHSV MeetUp - Gutenberg 101
jacobmc
0
46
Intro to WooCommerce
jacobmc
0
76
Other Decks in Technology
See All in Technology
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
310
How Community Opened Global Doors
hiroramos4
PRO
1
120
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
4
530
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
120
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
PostgreSQL 18 cancel request key長の変更とRailsへの関連
yahonda
0
120
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
820
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
230
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
280
GitHub Copilot の概要
tomokusaba
1
130
生成AIでwebアプリケーションを作ってみた
tajimon
2
150
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
A Tale of Four Properties
chriscoyier
160
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Music & Morning Musume
bryan
46
6.6k
Building Adaptive Systems
keathley
43
2.6k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Designing for Performance
lara
609
69k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Into the Great Unknown - MozCon
thekraken
39
1.9k
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?