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
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.2k
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
130
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.3k
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
460
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
pei0804
1
200
roppongirb_20250911
igaiga
1
250
使いやすいプラットフォームの作り方 ー LINEヤフーのKubernetes基盤に学ぶ理論と実践
lycorptech_jp
PRO
1
160
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
2
270
新規プロダクトでプロトタイプから正式リリースまでNext.jsで開発したリアル
kawanoriku0
1
220
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
22
12k
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
250
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
490
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Designing for Performance
lara
610
69k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Designing for humans not robots
tammielis
253
25k
GraphQLとの向き合い方2022年版
quramy
49
14k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
The Cost Of JavaScript in 2023
addyosmani
53
8.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?