What’s new in Gutenberg 22.1? (18 November, 2025)
🔗 **Source:** [What’s new in Gutenberg 22.1? (18 November, 2025)](https://make.wordpress.org/core/2025/11/20/whats-new-in-gutenberg-22-1-18-november-2025/)
> [!note]+ Document Notes
> tags: [Gutenberg, WordPress, Block Editor]
> author: Make WordPress Core
> source: Make WordPress Core (make.wordpress.org)
> reference: [https://make.wordpress.org/core/2025/11/20/whats-new-in-gutenberg-22-1-18-november-2025/]
> date created: 2025-11-22 00:00
>
> # 🏷️ Title: What’s new in Gutenberg 22.1? (18 November, 2025)
>
<!-- deep-read:sections start -->
## 🧭 Table of Contents
- [📝 Summary](#-summary)
- [📖 Main Content](#-main-content)
- [🗒️ Notes](#️-notes)
- [📚 References](#-references)
- [🗣️ Paraphrase](#️-paraphrase)
- [📰 Newsletter](#-newsletter)
- [✅ Action Items](#-action-items)
- [🧪 Hypotheses](#-hypotheses)
- [📊 Methodology](#-methodology)
- [❓ Questions](#-questions)
- [🔮 Future Research](#-future-research)
- [💡 Implications](#-implications)
- [🧠 Learning Styles Assessment](#-learning-styles-assessment)
- [📊 Accessibility Assessment](#-accessibility-assessment)
- [🌍 DEIB Assessment](#-deib-assessment)
- [✅ Logical Validity](#-logical-validity)
- [🛡️ DARVO Analysis](#-darvo-analysis)
- [🎯 Conclusion](#-conclusion)
### 🔗 References
- Include links cited in or relevant to the article.
## 📝 Summary
- What happened: Gutenberg 22.1 shipped with new blocks/features, UX improvements, performance and accessibility fixes, and tooling updates.
- Why it matters: Expands block capabilities, improves editor reliability and speed, and refines collaboration.
- Key stakeholders: Site builders, theme/plugin authors, contributors, and enterprise WordPress teams.
- Risks and tradeoffs: Experimental routing/boot changes and deprecations may affect custom tooling; color ramp algorithm shifts could impact theme visuals.
- Bottom line: A solid quality-of-life release with a standout Tabs block, HTML block enhancements, and performance gains.
## 📖 Main Content
- Core updates
- New Tabs block, HTML block gains JS/CSS editing, and image prefetch for expanded images per the intro to this release: “New features include the [new core/tabs block for tabbed content](https://read.readwise.io/read/01kaknt9d1qmaf8x71er7kqwvx?endLexposition=00006_00002-004O&startLexposition=00000&emphasizeText=new+core%2Ftabs+block+for+tabbed+content), enabling JavaScript and CSS editing added to the HTML block” and more.
- Editor and block library
- Stretch text/heading variations and fit-text fixes improve responsive typography ([block editor updates](https://read.readwise.io/read/01kaknt9d1qmaf8x71er7kqwvx?endLexposition=0001Q_0000D_00002-0001&startLexposition=0001O&emphasizeText=Stretch+text+and+stretch+heading+variation)).
- Breadcrumbs gains 404/search/paged support; Navigation Link labeling fixes ([breadcrumbs changes](https://read.readwise.io/read/01kaknt9d1qmaf8x71er7kqwvx?endLexposition=0000g_00009_00002-0001&startLexposition=0000e&emphasizeText=Breadcrumbs%3A+Add+404%2C+search+and+paged+support+for+archives)).
- Collaboration
- Notes UX/accessibility refinements, keyboard navigation, and distraction-free safeguards ([notes improvements](https://read.readwise.io/read/01kaknt9d1qmaf8x71er7kqwvx?endLexposition=0001I_0000T_00002-0001&startLexposition=0001G&emphasizeText=Notes%3A+Fix+sidebar+opening+logic)).
- Performance and theming
- Theme color ramp generation optimized and cached; default ramps compiled; logarithmic contrast metric ([performance highlights](https://read.readwise.io/read/01kaknt9d1qmaf8x71er7kqwvx?endLexposition=0002U_0000B_00002-0001&startLexposition=0002S&emphasizeText=Theme%3A+Optimize+color+generating+algorithm)).
- Tooling and tests
- TypeScript upgraded to 5.9 and CSS bundling improvements; stronger E2E coverage for pagination and ESLint rules ([tooling upgrades](https://read.readwise.io/read/01kaknt9d1qmaf8x71er7kqwvx?endLexposition=0003W_0000J_00002-0001&startLexposition=0003U&emphasizeText=Upgrade+TypeScript+to+5.9)).
- Experiments
- New boot/routing infrastructure, lazy-editor package, and template activation moved under experiments ([routing experiments](https://read.readwise.io/read/01kaknt9d1qmaf8x71er7kqwvx?endLexposition=0002o_0000P_00002-0001&startLexposition=0002m&emphasizeText=Routing%3A+Allow+plugins+to+register+custom+site+editor+like+pages)).
### 🗒️ Notes
- Headline features: Tabs block; HTML block supports JS/CSS editing; image prefetch when expanding images ([release intro](https://read.readwise.io/read/01kaknt9d1qmaf8x71er7kqwvx?endLexposition=00006_00002-004O&startLexposition=00000&emphasizeText=enhancing+the+editor+UX%2C+and+performance+improvements)).
- Block library: Breadcrumbs supports 404/search/paged; Accordion CSS defaults; Navigation Link fixes; embeds responsive in flex groups.
- Editor: Stretch text/heading variations; fit-text reliability and performance tweaks.
- Collaboration/Notes: Keyboard navigation, pinned sidebar logic fixes, clearer tooltips, accessibility tree improvements.
- Global Styles: Cap-based visibility; Theme JSON preset handling fixed.
- Performance: Color ramp caching, compile-time ramps, logarithmic contrast; toolbar indicator moved for efficiency.
- DataViews/DataForm: New details layout; picker/table fixes; pagination tests.
- Tooling: TS 5.9; CSS bundling/inline modules; Windows build fixes.
- Experiments: Boot/routing package, routes folder support, lazy-editor infra; template activation experimentalized.
- Contributors: Dozens of maintainers; several first-time PRs recognized.
## 📚 References
- What’s new in Gutenberg 22.1 (Make Core): https://make.wordpress.org/core/2025/11/20/whats-new-in-gutenberg-22-1-18-november-2025/
- Gutenberg GitHub repo: https://github.com/WordPress/gutenberg
## 🗣️ Paraphrase
- Paragraph A: Gutenberg 22.1 enhances block capabilities, editor UX, performance, and collaboration, highlighted by a new Tabs block and HTML block JS/CSS editing.
- Paragraph B: Numerous fixes refine breadcrumbs, navigation, fit-text, DataViews, and Global Styles, while experiments progress routing/boot and lazy-editor infrastructure.
## 📰 Newsletter
Gutenberg 22.1 lands with a shiny Tabs block, smarter HTML block (now with JS/CSS editing), and a speedier, tidier editor. Collaboration Notes get keyboard-savvy, fit-text behaves better, and theme color ramps are faster and more accurate. Devs: TS 5.9 and improved CSS bundling are in. Explore highlights and test the new routing/boot experiments in your staging environments.
## ✅ Action Items
#### DevRel
- Prepare demo showing Tabs block and stretch text variations; publish quickstart snippet.
- Host office hours on HTML block JS/CSS editing and theme ramp changes.
#### OSPO
- Update contribution guidelines for routing/boot experiments; clarify experimental feature flags.
- Refresh license/compliance scans post TypeScript upgrade.
#### Community
- Run “first issue” sessions around DataViews tests; encourage Notes accessibility QA.
- Share starter content pattern updates with theme authors.
#### WordPress
- Core: Triage fit-text regressions and routing experiment feedback.
- Core Performance: Track color ramp gen times; set perf budget for editor load.
- Core AI: N/A for this release; monitor future editor assist features.
- Core Program Team: Coordinate cross-team testing on routing/lazy-editor.
- Mobile: Validate Tabs rendering/parity; log any HTML block edit gaps.
- Playground: Add scenarios for Tabs, stretch text, and Notes UX.
- Community: Promote contributor credits; prep meetup demo kits.
- Training: Update lessons for Tabs and Global Styles permissions.
- Marketing: Publish 22.1 highlights post; social snippets.
- Support: Add KB entries for Tabs and HTML block editing.
- Design: Review stretch text defaults and alignment specificity.
- Documentation: Update Tabs, Breadcrumbs, and fit-text pages.
- Photos/TV/Polyglots/etc.: No-blocking items; monitor translation strings for new features.
- Themes: Validate color ramp outputs; test contrast/logarithm changes.
- Plugins: Test routing/boot impacts; verify Navigation Link labels.
- CLI/Hosting/Tide/Openverse: Standard regression sweeps; no special actions.
#### The WPOCC
- Offer microgrants for accessibility audits on Notes features.
- Fund documentation sprints covering experimental routing.
### FAIR
- Record provenance of experimental flags; document downgrade paths.
- Ship a charter for editor experiments with sunset criteria.
## 🧪 Hypotheses
- Tabs block reduces multi-section page build time by ≥20%.
- Fit-text fixes cut layout shift complaints by ≥30% on first paint.
- Color ramp optimizations reduce theme CSS generation time by ≥25%.
- Notes keyboard support increases comment resolution rate by ≥15%.
- Lazy-editor infrastructure lowers initial editor bundle load by ≥10%.
### 📊 Methodology
- A/B measure editor task completion times (Tabs vs. Accordions workarounds).
- Analyze Core Web Vitals and user-reported CLS pre/post 22.1.
- Benchmark theme build and CSS output times across sample themes.
- Track collaboration metrics: notes created/resolved, time-to-resolution.
- Compare editor bundle sizes and TTI pre/post lazy-editor behind flags.
### ❓ Questions
- Are Tabs accessible by default (roles/ARIA/keyboard order)?
- Will color ramp changes alter existing brand palettes in child themes?
- What’s the migration path if routing experiments stabilize?
### 🔮 Future Research
- Expand DataViews to handle larger datasets with virtualized lists.
- Formalize lazy-editor rollout plan with perf gates.
- Extend collaboration Notes to cross-site workflows.
### 💡 Implications
- Practice: Faster theming and clearer typography controls.
- Policy: Stronger experiment governance to prevent surprise breakage.
- Security: Review JS/CSS editing pathways in HTML block.
- Education: Update training for new block patterns and permissions.
### 🧠 Learning Styles Assessment
- Reading level estimate: Flesch-Kincaid Grade ≈ 10–11.
#### 👀 Visual learners
- Present: Screenshots implied in release posts.
- Improve: Before/after visuals for stretch text and Tabs.
#### 🔊 Aural learners
- Present: None noted.
- Improve: 3-minute audio rundown per release.
#### 🗣️ Verbal learners
- Present: Clear bullet lists and change logs.
- Improve: Glossary for new routing/boot terms.
#### 🧩 Kinesthetic learners
- Present: Try-features-in-editor approach.
- Improve: Step-by-step Labs for Tabs, Notes, fit-text.
#### 🧠 Logical learners
- Present: Structured sections and categories.
- Improve: Decision trees for enabling experiments.
#### 🧑🤝🧑 Social learners
- Present: Community/contributor credits.
- Improve: Guided cohort testing sessions.
#### 🧘♀️ Solitary learners
- Present: Scannable lists.
- Improve: Self-check quizzes on new features.
#### 🌿 Naturalistic learners
- Present: N/A.
- Improve: None applicable.
### 📊 Accessibility Assessment
#### Screen reader semantics
- Present: Accessibility fixes in Notes and DataViews labels.
- Improve: Confirm Tabs ARIA patterns and roles.
#### Keyboard navigation
- Present: Notes keyboard navigation added.
- Improve: Document full keyboard map for Tabs and modals.
#### Contrast and readability
- Present: Contrast math improved via logarithms.
- Improve: Validate theme-specific outcomes.
#### Text resizing and reflow
- Present: Fit-text stability improvements.
- Improve: Test grouped containers and edge sizes.
#### Media and captions
- Present: N/A.
- Improve: Provide captions for any demo media.
#### Forms and interactions
- Present: Notes form fixes and focus handling.
- Improve: Inline validation patterns.
#### Standards reference
- Map gaps to WCAG 2.2 AA: 1.4.x contrast, 2.1.x keyboard, 4.1.x name/role/value.
### 🌍 DEIB Assessment
#### Cultural breadth
- Present: Global contributor base.
- Improve: Multilingual docs for new features.
#### Inclusive language
- Present: Neutral, descriptive.
- Improve: More plain-language callouts for experiments.
#### Neurodiversity support
- Present: Consistent structure.
- Improve: More chunking and icon+text in UIs.
#### Representation
- Present: Many contributors listed.
- Improve: Highlight diverse first-time contributors with profiles.
#### Psychological safety
- Present: Respectful acknowledgments.
- Improve: Clear feedback channels for regressions.
### ✅ Logical Validity
#### Strong reasoning
- Inductive: Lists of changes imply improved UX/perf; backed by specific fixes.
#### Fallacies
- None apparent; claims are change-log style.
#### Tone of voice
- Informative and neutral; credits build community trust.
### 🛡️ DARVO Analysis
- Deny: None.
- Attack: None.
- Reverse victim/offender: None.
- Emotional cues: Neutral, factual release tone.
## 🎯 Conclusion
- Bottom line: Gutenberg 22.1 is a steady, feature-rich refinement—Tabs, HTML block upgrades, and meaningful performance/accessibility wins.
- Next steps: Test in staging, validate themes with new color ramps, trial routing/lazy-editor experiments, and update docs/training.
## 🧱 Refactor Appendix (append after 🎯 Conclusion)
### 📚 Literature Split Pad
- Purpose: Stage Konik CEE units that become per-source Literature notes.
- Split level: **H3**.
- Include verbatim quotes under 25 words and a [view highlight] link.
### [H1] 5–10-word present-tense claim
> [!quote] [{Title or entity}]({ARTICLE_URL}) by [[{Author or [MISSING]}]] via [[{Site or [MISSING]}]]. Published {DATE_OR_[MISSING]}. Accessed .
> “Short quote, verbatim, ≤25 words.”
Two lines: context and use. Cite data if relevant.
[view highlight]({ARTICLE_URL}#H1) #xref #articleseed ID:rw_[MISSING]
### [H2] 5–10-word present-tense claim
> [!quote] [{Title or entity}]({ARTICLE_URL})
> “Short quote, verbatim, ≤25 words.”
Two lines: context and use.
[view highlight]({ARTICLE_URL}#H2) #xref ID:rw_[MISSING]
---
### 🔖 Atomic Split Pad (Zettel Candidates)
- Purpose: Promote reusable claims into Atomic notes.
- Split level: **H4**.
- Each item: one idea, present tense, specific, testable.
#### [Z1] 5–10-word present-tense claim
- Scope/condition in one line.
- Pointer to page/time or dataset.
- Links: [[Parent-Concept]] [[Related-Idea]]
#### [Z2] 5–10-word present-tense claim
- Scope/condition in one line.
- Pointer to page/time or dataset.
- Links: [[Parent-Concept]] [[Related-Idea]]
---
### ✏️ Fleeting Queue (Extract by Selection)
- Purpose: Capture quick actions or sparks for Fleeting notes.
- Extraction: **Select one line** → “Refactor: Extract selection to new note (content only).”
- Keep each line short and self-contained.
- [F1] Short action — context/{ARTICLE_URL} #fleeting #inbox
- [F2] Short action — context/{ARTICLE_URL} #fleeting #inbox
- [F3] Short action — context/{ARTICLE_URL} #fleeting #inbox
---
<!-- deep-read:sections end -->