Skip to content

Prototypes: Requirements #190

@mtias

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Type] TaskIssues or PRs that have been broken down into an individual action to take[Type] Technical PrototypeOffers a technical exploration into an idea as an example of what's possible

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions