Spec out which blocks need which controls

[jasmussen]

F.ex. Headline won't need bold/italic inline controls, and Image might need some extra alignment controls, such as "full bleed". Let's start spec'ing out the most basic blocks, get those right, then we can add to it.

Text, or Paragraph

Base properties:

• Basic alignments
• Basic formatting
• Inline links

Advanced properties:

• Dropcap
• Alternate style for first line
• Responsive columns?
• Layout columns?
• Footnotes?

Heading

Base properties:

• Headline type/size

Advanced properties:

• Subheading?

Quote

Base properties:

• Basic alignments
• Basic formatting
• Surface cite attribute
• Stylish alignments

Advanced properties:

• Change between multiple quote styles
• Dropcap in quote?
• Caption?

Image

Base properties:

• Basic alignments
• Stylish alignments, like full-bleed, pull to the side, just wider than paragraph
• Surface caption

Advanced properties:

• Alt text, other metadata
• Parallax
• Fixed position/Fixed background
• Crop (maybe converts img to div with background?)
• If GIF, then show play/pause controls?

[jasmussen]

From #core-editor slack by @mcsf:

re https://wordpress.github.io/gutenberg/ and the block controls for each type of block (text, image…), is it desirable to think in terms of reusable traits? i’ll give an example: both ⁠⁠⁠⁠text⁠⁠⁠⁠ and ⁠⁠⁠⁠heading⁠⁠⁠⁠ are ⁠⁠alignable⁠⁠ and thus get the three buttons for left-, right- and center-alignment. but maybe one of those will also have other traits and have a few extra buttons. on the other hand, ⁠⁠⁠⁠image⁠⁠⁠⁠ has different traits altogether and will get other buttons, etc.

Seems prudent to keep this in mind for reusability as we spec out blocks. Particularly important, perhaps, for plugins that add blocks. F.ex. if a plugin adds a "checklist" block, they might apply traits such as compatible-with: list, and alignable-basic: true, things like that. @folletto came up with these ideas, in particular with regards to the switcher.

[folletto]

Traits seem great on theory, but they worry me a bit too much it can add a lot of complexity for both users and plugin makers. Maybe a v2 thing? Maybe I just worry too much about complexity increase?

[jasmussen]

Let's spec out some more blocks. This is very brainstormy and speculative at this point.

Code/Gist

Base properties:

• Basic alignments
• Stylish alignments

Advanced properties:

• Type of code to highlight, if not autodetected?
• Style (color scheme)
• Caption

List, ordered, unordered

Base properties:

• Basic alignments

Gallery

Base properties:

• Basic alignments
• Stylish alignments
• Caption

Advanced properties:

• Type: slideshow, grid, pager
• Autoadvance or not
• Style: circles, masonry, columns

Generic embed

Base properties:

• Basic alignments
• Stylish alignments
• Caption

Advanced properties:

• Change embedcode
• Width/height/responsive
• Change aspect ratio

Map

Base properties:

• Basic alignments
• Stylish alignments
• Google Maps/Open Street Map
• Caption

Advanced properties:

• Same as all embeds

Separator

Base properties:

• Basic alignments

Advanced properties:

• Style of separator, dots, various unicode symbols, thin line, thick line
• Margin, small or big
• It could even work just as a spacer, with no visual indicator, just space

Tweet (and variations)

Base properties:

• Basic alignments
• Stylish alignments
• Caption

Advanced properties:

• Same as all embeds
• Option to disable images/video

Video (YouTube, Vimeo, etc.)

Base properties:

• Basic alignments
• Stylish alignments
• Caption

Advanced properties:

• Same as all embeds
• Option to autoplay?
• Option to mute?
• Use as looping, auto-playing, mute, video background

Audio

Base properties:

• URL
• Basic alignments
• Stylish alignments
• Caption

Advanced properties:

• Player style (toggle controls)
• Autoplay?
• Autoplay when scroll into view?

Contact Form/Survey

Base properties:

• Basic alignments
• Stylish alignments
• Caption

Advanced properties:

• Change style
• Actually configure the fields of the form

Table of Contents

Base properties:

• Basic alignments
• TOC specific alignment (pin to side)

WP Post embed

Base properties:

• Basic alignments
• Stylish alignments
• Caption

Advanced properties:

• Custom excerpt length

Facebook embed

Base properties:

• Basic alignments
• Stylish alignments
• Caption

Advanced properties:

• Toggle images, or pick preview image

Link Block

Basically a "any unidentified URL pasted" block, basically what all messaging platforms do when you paste a link, turn it into stylish link plus preview, using all the metadata Facebook got everyone to put in.

Base properties:

• Basic alignments
• Stylish alignments
• Caption

Advanced properties:

• Toggle images, or pick preview image

Playlist

Base properties:

• Basic alignments
• Stylish alignments
• Caption

Poet Block

Alternate version of "preformatted" without the monospaced font, respects spaces (inserts  ) and linebreaks

• Basic alignments
• Stylish alignments

Custom Field

Base properties:

• Basic alignments
• Stylish alignments
• Caption

Advanced properties:

• 🐰🕳

[anna-harrison]

A few notes and ideas about contextual menu approaches (and data architecture of the actions/options)
An old prototype is referenced in the notes, which shows ideas around link types, transformation of link types, inline dialogs and contextual menus that may spark some ideas

[folletto]

I took the list and turned in a spreadsheet for ease of editing and reviewing. Comments should be open:
https://docs.google.com/spreadsheets/d/1r4Rfj4D9CyFkxQr0JFi3iVKkRte154M8BkDpkMPysp4/

[JohnPixle]

I feel excited that I found this list. I will work on turning it into a design asset guide in sketch for quick design mockups. Fellow designers might find it handy to throw out quick ideas on element positioning or even UI styles.

I would start something similar in any case, but it's great that we can all align with a common reference like this one.