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
230
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
39
WPHSV MeetUp - Migrate to 5.0 and Gutenberg
jacobmc
0
13
WPHSV MeetUp - Gutenberg 101
jacobmc
0
41
Intro to WooCommerce
jacobmc
0
47
Other Decks in Technology
See All in Technology
「手動オペレーションに定評がある」と言われた私が心がけていること / phpcon_odawara2024
blue_goheimochi
1
310
ビジネスとエンジニアリングの接合点 そしてコード品質がそこに及ぼす影響 v1.1 / The Intersections of Business and Engineering, and The Impact of Code Quality There (v1.1)
mtx2s
11
2.4k
プロデザ! BY リクルート vol.18_リクルートのリサーチ実践組織「リサーチブーストコミュニティ」
recruitengineers
PRO
2
220
インシデントレスポンスのライフサイクルを廻すポイントってなに / Pinpoints of Incidentresponse Lifecycle for Operation
sakaitakeshi
0
280
2024/4/26 コンピュータ歴史博物館解説告知
toshi_atsumi
0
180
**強い**エンジニアのなり方 - フィードバックサイクルを勝ち取る / grow one day each day
soudai
59
17k
The CloudCompare project by Dr. Daniel Girardeau-Montaut
kentaitakura
0
490
キャラクター制御のためのプロンプト術 for LINE Bot
uezo
0
510
Microsoft Cloudで開発ライフサイクルを保護する
kkamegawa
0
140
Four keys改善の取り組み事例紹介
sansantech
PRO
2
220
オブザーバビリティの Primary Signals
onk
PRO
0
530
スタートアップの技術顧問を3年間続けて発生した事と気付き
biwakonbu
0
150
Featured
See All Featured
Designing Experiences People Love
moore
135
23k
Infographics Made Easy
chrislema
237
18k
Building Effective Engineering Teams - LeadDev
addyosmani
26
1.8k
Designing for Performance
lara
601
67k
How to train your dragon (web standard)
notwaldorf
71
5.1k
Making Projects Easy
brettharned
106
5.5k
What's in a price? How to price your products and services
michaelherold
237
11k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.4k
Unsuck your backbone
ammeep
662
57k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
272
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
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?