WordPress Explorations: Pages & Layers 🔗 **Source:** [WordPress Explorations: Pages & Layers](https://rich.blog/pages-and-layers/) > [!note]+ Document Notes > tags: [WordPress, UX, Editor] > author: Rich Tabor > source: rich.blog > reference: [https://rich.blog/pages-and-layers/] > date created: 2025-11-11 00:00 > > # 🏷️ Title: WordPress Explorations: Pages & Layers > <!-- 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: Proposes a persistent editor sidebar with Pages and Layers to navigate and create pages without leaving the editor. - Why it matters: Reduces mental load and context switching in WordPress editing. - Key stakeholders: Site builders, editors, plugin/theme authors, WordPress core UX. - Risks and tradeoffs: Added UI complexity, potential redundancy with existing List View and Pages table. - Bottom line: A unified, in-flow page management model inside the editor. ## 📖 Main Content - Core arguments: - Users expect the prominent “add” affordance to create pages, but it adds blocks/patterns, not pages. - Navigating between pages currently requires leaving the editor. - A persistent sidebar (“new List View”) with tabs: Pages (search, switch, add) and Layers (structure). - Context/definitions: - Layers ~ document structure (blocks hierarchy). - Pages ~ site-level navigation and creation. - Uncertainties: - How this integrates with existing List View and Site Editor navigation. - Performance on large sites. - Access control and bulk operations overlap. ### 🗒️ Notes - “They want to add a page while editing another and have no idea how to do it.” - “Most will see the big plus button… But… they get blocks, patterns, and media. No pages.” - “You can’t easily move between pages to make changes… The interface doesn’t make this fundamental action particularly obvious.” - “A persistent sidebar… with tabs for Pages and Layers.” - “No diving in-and-out of the editor. Just one experience.” - “I expect this to reduce the mental load… Pages become as available as content itself.” ## 📚 References - WordPress Site Editor overview (https://wordpress.org/documentation/article/site-editor/) - Gutenberg List View (https://developer.wordpress.org/block-editor/reference-guides/components/list-view/) ## 🗣️ Paraphrase - Paragraph A: Users try to add pages from the editor but only find block-level inserts; page navigation requires leaving the editing flow. - Paragraph B: A persistent sidebar with Pages and Layers keeps navigation and creation in-editor, preserving flow and reducing confusion. ## 📰 Newsletter - This week in WordPress UX: Rich Tabor explores a Pages & Layers sidebar to make page creation and switching instant—no more hopping in and out of the editor. If adopted, this could streamline editorial workflows and lower onboarding friction. Explore List View tips and Site Editor docs above, and consider how your themes/plugins might surface page-level actions in-context. ## ✅ Action Items #### DevRel - Ship a demo plugin of “Pages & Layers” for user testing. - Record a 5-min walkthrough; gather feedback via GitHub Discussions. - Add examples to docs on editor-embedded navigation patterns. #### OSPO - Draft UX proposal process and decision log template. - Review licensing and contribution guidelines for prototype assets. #### Community - Run usability testing sessions with new WordPress users. - Create “first-issue” tasks around sidebar IA and search. #### WordPress - Core: Open exploration issue for persistent sidebar tabs. - Design: Map IA for Pages vs Layers; define empty states. - Documentation: Update editor navigation guides with alternatives. - Accessibility: Specify keyboard flows and landmarks for the sidebar. - Performance: Test on 1k+ pages; set interaction budgets. #### The WPOCC - Fund user research sprints and prototype maintenance. - Publish impact report on editor discoverability improvements. ### FAIR - Publish provenance for prototypes; define sunset clause if not merged. ## 🧪 Hypotheses - A persistent Pages tab reduces time-to-switch-page by ≥40%. - New users will correctly create a page from the editor ≥80% of the time. - Editor abandonment due to navigation confusion drops by ≥30%. - Large-site performance remains within 100ms P95 for sidebar interactions. ### 📊 Methodology - A/B test current editor vs. prototype; measure task time and success. - SUS and NASA-TLX surveys post-task. - Telemetry on page-switch and create-page events. - Load tests with 10, 100, 1k, 10k pages. ### ❓ Questions - Where should bulk actions live vs. in-editor actions? - How do roles/capabilities affect Pages tab visibility? - What’s the minimal IA to avoid redundancy with List View? ### 🔮 Future Research - Unifying posts, pages, and templates in the same sidebar. - Offline-first flows and undo/redo across page switches. - Mobile editor ergonomics for Pages & Layers. ### 💡 Implications - Practice: Faster editorial workflows; fewer context switches. - Policy: Clear capability gates for page ops inside editor. - Security: Guardrails for destructive actions in the sidebar. - Funding: Prioritize research on editor discoverability. ### 🧠 Learning Styles Assessment - Reading level: ~10th grade (Flesch-Kincaid ~10–11). #### 👀 Visual learners - Present: Conceptual UI described. - Improve: Mockups of Pages/Layers; flow diagrams. #### 🔊 Aural learners - Improve: Short audio/podcast summary. #### 🗣️ Verbal learners - Present: Clear comparisons and definitions. - Improve: Glossary (Pages vs Layers vs List View). #### 🧩 Kinesthetic learners - Improve: Clickable prototype; step-by-step tasks. #### 🧠 Logical learners - Present: Problem→Solution structure. - Improve: Decision trees for navigation paths. #### 🧑‍🤝‍🧑 Social learners - Present: Invite comments/X discussion. - Improve: Guided group tests, moderated Q&A. #### 🧘‍♀️ Solitary learners - Improve: Self-check checklist for common tasks. #### 🌿 Naturalistic learners - N/A; improve with ecosystem analogies (site as habitat layers). ### 📊 Accessibility Assessment #### Screen reader semantics - Improve: Landmark for sidebar; headings for tabs; aria-controls. #### Keyboard navigation - Present: Intent; Improve: Full tab/arrow model, roving tabindex. #### Contrast and readability - Improve: Ensure ≥4.5:1; focus state visibility. #### Text resizing and reflow - Improve: Test 200% zoom; prefers-reduced-motion. #### Media and captions - Improve: Add captions if demo videos are published. #### Forms and interactions - Improve: Labels, inline validation, 44px targets. #### Standards reference - Map to WCAG 2.2 AA: 1.4.*, 2.1.*, 2.4.*, 4.1.* ### 🌍 DEIB Assessment - Cultural breadth: Improve with multilingual examples. - Inclusive language: Good; reduce jargon with tooltips. - Neurodiversity: Improve chunking, consistent patterns, icon+text. - Representation: Use inclusive imagery in demos. - Psychological safety: Add contribution guidelines and CoC links. ### ✅ Logical Validity #### Strong reasoning - Inductive: Observed user confusion → propose in-flow navigation; plausible, experience-based. #### Fallacies - Potential hasty generalization: small observations → broad solution. Mitigate with user studies. #### Tone of voice - Exploratory, pragmatic, inviting feedback. ### 🛡️ DARVO Analysis - No denial/attack/reversal present; tone is collaborative and non-defensive. ## 🎯 Conclusion - Bottom line: A persistent Pages & Layers sidebar could cut cognitive load and keep users in flow by enabling page creation and navigation inside the editor. - Next steps: Prototype, test with new users and large sites, iterate IA and accessibility, then propose to core. ## 🧱 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] WordPress Explorations: Pages & Layers (https://rich.blog/pages-and-layers/) by [[Rich Tabor]] via [[rich.blog]]. Published 2025-11-10. Accessed 2025-11-11. > “A persistent sidebar… with tabs for Pages and Layers.” Two lines: context and use. Cite data if relevant. [view highlight](https://rich.blog/pages-and-layers/#H1) #xref #articleseed ID:rw_[MISSING] ### [H2] 5–10-word present-tense claim > [!quote] WordPress Explorations: Pages & Layers (https://rich.blog/pages-and-layers/) > “You can’t easily move between pages.” Two lines: context and use. [view highlight](https://rich.blog/pages-and-layers/#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] Persistent page sidebar reduces context switching - Applies to block editor with multi-page sites. - Pointer: Article section “The Exploration”. - Links: [[Editor-IA]] [[Navigation-UX]] #### [Z2] Users misinterpret primary add button - New users in editor environments. - Pointer: Opening observation. - Links: [[Affordances]] [[Onboarding]] --- ### ✏️ Fleeting Queue (Extract by Selection) - [F1] Sketch a prototype IA for Pages/Layers—https://rich.blog/pages-and-layers/ #fleeting #inbox - [F2] Draft test plan for 1k-page performance—https://rich.blog/pages-and-layers/ #fleeting #inbox - [F3] Outline accessibility roles/keys for sidebar—https://rich.blog/pages-and-layers/ #fleeting #inbox --- <!-- deep-read:sections end -->