In the past years designers in the WordPress community and within Automattic explored different approaches and even built tools to enhance the site building experience.

Thanks to a chat with my fellow designer Joen a few weeks ago, I was finally able to identify two fundamental mental models that drive the design of such tools.

• Block-Top — the block top approach is where the page layout comes first, and things are added as blocks inside the layout. One of such blocks is a text block, and there the content exists. Blocks first, then text.
  Examples: Customizer, site builders in general, Google Sites, Keynote, InDesign, …
• Text-Top — the text top approach is where the page is conceived as a flow of text, and blocks are added inside the same flow of text. The cursor (caret) is the insertion point. Text first, then blocks.
  Examples: WP Editor, Medium, Pages, Word, HTML, …

These mental models turn out to be incredibly useful in clarifying many things:

1. The WordPress Editor is a text-top UI, as such blocks there are better built as in-flow. An excellent example of such blocks are images.
2. WordPress Customizer is a block-top UI, as blocks are placed and text is edited within blocks.
3. Mixing the two is not much advised, as it would mix two very different mental models. Notably many site builders tend to mix things instead, which IMHO it’s why they get so complicated.
4. The two approaches can exist in the same software (Editor, Customizer) but they need to be different views and satisfy very specific user goals (i.e. the editor is very useful for editorial flows).
5. Managing the cursor (position, selection, highlight) in a text-top UI can be challenging when dealing with blocks as they need to be considered seamlessly part of the text flow. As such, they shouldn’t present “blocks” to a user moving around with the keyboard.
6. There’s no clear “winner”, it’s just a choice of which pros and cons are more appealing for the software. See the examples above of commercial products in both fields.

An extra interesting idea raised by Joen: the site builder view (block-top) could create pages and edit content, but then there could be an editor view (text-top) that maps all the text blocks to areas, and creates a rich, powerful experience for more complicated and editorial flows (think businesses, editorial flows, collaborative writing, immersive writing, isolation mode, etc). This is an edge case of course for more complex interactions, but it’s a solid possibility that can be explored.

Thanks to Joen Asmussen, Mel Choyce and Tammie Lister as the instigators of this discussion, and the people that provided a lot of thinking during the past months.