Design Editor Overview

[mtias]

The design editor refers to the interface, mechanism, and tools used to design and customize templates, pages, and styles across the whole website.

Simplifying editing modes

These tasks aim at providing an easier and more controlled environment for content edits in the context of the broad design tool.

• Writing and contentOnly modes #60021
• Use the previous "select mode" dark toolbar style for Write mode #66054
• Remove parent selector when Edit mode is active #65577
• Zoom out #50739

Visualize template or pure text view

We should allow easy ways to switch between seeing abstracted view (pure text and title) and template views. Good defaults are paramount here so that writing posts remains focused on the content.

• Preview dropdown: Include "Show template" toggle, and persist on refresh #66429

Styles

Introducing a dedicated section for all things "styles" that is not dependent on loading the template editor. Present the style book as a primary interface for visualizing and editing global styles. Provide a better way to visualize relationships and hierarchy of styles (what comes from the theme, user, global unspecific, global specific, local, etc).

• Dedicated Styles Screen #66376
• Style Book: Iterate on presentation and design #53431
• Styles: show a hierarchy of styles clearly (theme, user, global unspecific, global specific, local, etc) #49278
• Blocks: States #57719

Hooks and extending block themes

• Expose "block hooks" at the section level #65676
• Connecting patterns with specific contexts & transforms #27575

Patterns

• Building with Patterns #38529
• Pattern styles #59404
• Patterns: Explore shuffling content blocks #55582

Navigation & Pages Flows

• Navigation Block: develop a content-only representation #65699
• Assemble new pages with zoom out #63865