Prototypes: Requirements

[mtias]

All technical prototypes need to accomplish the following:

• Use post-content.js data.
• Infer blocks from content structure.
• Should follow design of UI prototype and mockups for blocks.
• Have “selected”, “writing”, and “hover” states.
• • Selected state shows all controls.
• • Writing state fades out UI.
• • Hover state shows block outline and move-arrows.
• Moving a block should select the block.
• Moving a block should scroll the window to focus on the block.
• Implement block type switcher that works for text/heading/quote.
• Implement block level attributes for text, image, and quote.
• Implement insert-block menu toggled by the (+).
• Any new line outside of blocks should show the (+) and if you start writing should default to text block.
• Insert-block menu should allow to insert any of the post-content blocks.
• When a block is at the top or bottom and they cannot be moved further, the corresponding arrow should be grayed out.
• Integrate basic API for defining a block markup and inferring block data from it.

Text

• Should support alignment options at block level.
• Should support TinyMCE formatting.
• Enter creates new text block.

Heading

• Should show band with different headings.

Image

• All alignment needs to work (floated and full-bleed).
• Implement caption and handle markup variations.
• Caption field should appear only when block is selected.

Quote

• Needs to support two styles.
• Should support cite attribute that is edited in place.
• Cite field should appear only when block is selected.
• It should not be possible to mess the cite or quote markup in visual mode.

[anna-harrison]

@mtias should we add "Design" label to this issue? Thx

[jasmussen]

should we add "Design" label to this issue? Thx

Since all the prototypes should look virtually the same, it's probably best to keep the discussion on the visuals on the individual tickets for the design.

[mtias]

Yes, this is a list of requirements for the technical prototypes to have a comparable set of features. If there are things here that we don't yet have in the UI Prototype we should make mockups for them separately.

[ellatrix]

Sounds good, I'll work on this for single.

Enter should do single line break; double enter should create new text block.

Are we settled on this? Has there been any discussion? Could someone describe the behaviour a bit better? Should other blocks still create a new paragraph (e.g. heading)?

[mtias]

Good question. Not settled, but we need to pick one behaviour now to have a comparable experience. I'd be ok with punting this and having a simpler "enter creates new text block". Does that sound more reasonable?

[jasmussen]

Are we settled on this? Has there been any discussion? Could someone describe the behaviour a bit better? Should other blocks still create a new paragraph (e.g. heading)?

Not settled. But we also haven't really tried it yet, given it a fair shake. So feels worth trying. And if it's a bit-flip in TinyMCE, seems worth a shot, with the goal being to make informed decisions.

[jasmussen]

See also #198 for mockups for every base block.

[mtias]

Adding them to the description.

[ellatrix]

Single MCE tracking comment:

• Use post-content.js data.
• Infer blocks from content structure.
• Should follow design of UI prototype and mockups for blocks.
• Have “selected”, “writing”, and “hover” states.
  • Selected state shows all controls.
  • Writing state fades out UI.
  • Hover state shows block outline and move-arrows.
• Moving a block should select the block.
• Moving a block should scroll the window to focus on the block.
• [Similar functionality.] Implement block type switcher that works for text/heading/quote.
• Implement block level attributes for text, image, and quote.
• [Needs search.] Implement insert-block menu toggled by the (+).
• Any new line outside of blocks should show the (+) and if you start writing should default to text block.
• Insert-block menu should allow to insert any of the post-content blocks.
• When a block is at the top or bottom and they cannot be moved further, the corresponding arrow should be grayed out.
• Integrate basic API for defining a block markup and inferring block data from it.

Text

• Should support alignment options at block level.
• Should support TinyMCE formatting.
• Enter should do single line break; double enter should create new text block.

Heading

• Should show band with different headings.

Image

• All alignment needs to work (floated and full-bleed).
• Implement caption and handle markup variations.

Quote

• Needs to support two styles.
• Should support cite attribute that is edited in place.
• It should not be possible to mess the cite or quote markup in visual mode.

[ellatrix]

If anyone likes to work on these, let me know, just so we're not working on the same. Trying to get the inserter in today.

[youknowriad]

Multi-Instance MCE tracking comment:

• Use post-content.js data.
• Infer blocks from content structure.
• Should follow design of UI prototype and mockups for blocks. (Not perfect)
• Have “selected”, “writing”, and “hover” states.
  • Selected state shows all controls.
  • Writing state fades out UI.
  • Hover state shows block outline and move-arrows.
• Moving a block should select the block.
• Moving a block should scroll the window to focus on the block.
• Implement block type switcher that works for text/heading/quote.
• Implement block level attributes for text, image, and quote.
• Implement insert-block menu toggled by the (+).
• Any new line outside of blocks should show the (+) and if you start writing should default to text block.
• Insert-block menu should allow to insert any of the post-content blocks.
• When a block is at the top or bottom and they cannot be moved further, the corresponding arrow should be grayed out.
• Integrate basic API for defining a block markup and inferring block data from it.

Text

• Should support alignment options at block level.
• Should support TinyMCE formatting.
• Enter should do single line break; double enter should create new text block.

Heading

• Should show band with different headings.

Image

• All alignment needs to work (floated and full-bleed).
• Implement caption and handle markup variations.

Quote

• Needs to support two styles.
• Should support cite attribute that is edited in place.
• It should not be possible to mess the cite or quote markup in visual mode.

[aduth]

What of #179 should we integrate into the requirements here? Many of these text interactions will be important to preserve.

cc @azaozz

[intronic]

@iseulde - fyi we are working today on:

• making drag&drop work with hover
• 'Moving a block should select the block.'

[mimo84]

@iseulde: @intronic and I have just opened a new PR #249 which provides

• Hover shows block outlines
• Hovered blocks can be dragged and dropped
• Blocks not currently selected can be dragged and dropped (on hover)

[youknowriad]

I checked all the requirements for the "Multi" prototype. I'm sure I've missed some use-cases or introduced some regressions. Please let me know if you notice something missing.

[jasmussen]

I checked all the requirements for the "Multi" prototype. I'm sure I've missed some use-cases or introduced some regressions. Please let me know if you notice something missing.

Looks amazing. Very very good work 👏👏👏

There are some little things UI wise, but nothing critical for evaluating the prototype at all. I'll see if I can take a stab at them, but as it stands this prototype works excellently, in fact better than I'd expected it to!

[azaozz]

What of #179 should we integrate into the requirements here? Many of these text interactions will be important to preserve.

Ideally, all of them. I realize most of these behaviors are not used commonly. Personally I use only 2-3 on a regular basis. However the so called "power users" will probably use many. Also all of them are important for accessibility, some are critical. They are at approximately the same "level of importance" as using Cmd+C and Cmd+V for copy/paste.

There is a very easy way to test :) Unplug your mouse (literally) and try to create some content in few different editors, including both prototypes and the current editor.

[jasmussen]

Closing this one as it seems no longer relevant.