Design Editor Overview #66499
Description
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. The aim of this work is to reduce the cognitive overhead that comes with customizing every aspect of the site on a granular level.
- 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
Clarifying "content" vs "template" and how it relates to homepage settings
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.
We should work out a better representation and set up of template and content splits across templates.
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 & Bindings
- Building with Patterns #38529
- Pattern styles #59404
- Patterns: Explore shuffling content blocks #55582
- Tracking issue: Block bindings API #60954