Skip to content

Instantly share code, notes, and snippets.

@samikeijonen

samikeijonen/fashion.md

Last active November 16, 2017 19:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save samikeijonen/4b010fe79a16e3950aa3f78ecd6266ee to your computer and use it in GitHub Desktop.
Save samikeijonen/4b010fe79a16e3950aa3f78ecd6266ee to your computer and use it in GitHub Desktop.
Download ZIP
Gutenberg block in front-end
Raw
fashion.md

Single post without sidebar on the left or right

Single posts should not have sidebar on the left or right because blocks can go wider than "base" content.

Color scheme

User can select colors for some blocks. For example user can select button background color and text color. Theme should use max. 4-5 colors for everything. Color contrast needs to meet AA level 4.5:1 for all elements.

Wide and full width

In some blocks you can set align to wide and full, not only left, center, and right.

  • Wide: This basically means a little wider than basic paragraph or base content. For example base width can be 700px and wide can be 1000px.
  • Full: Block can be full width. But full width can mean max. 1600px (like in https://evervest.com/) or max. 2000px or something.

Heading

Nothing special here. User can set heading level as usual.

Paragraph

User can apply several settings to paragraph:

  • Drop Cap.
  • User can select background color and text color. This means that paragraph can work as "highlight boxes" or similar.
  • Wide and full width. Not sure is this important for this block.

Image

  • Images with or without caption.
  • Images can be wide or full width.

Gallery

  • Images with or without caption.
  • Images can be wide or full width.
  • Gallery images can be in 1-3 (or perhaps more) columns.
  • We could experiment a little more un-traditional grid for galleries.

Quote

  • Blockquotes can have two different styling.
  • Both have place for citation.
  • Blockquote could even be wide or full width even if there is no setting for it. Meaning that blockquote could have background color (full width) and text/citation width would still be base width.

Pull quote

  • Pull quote with text and caption.
  • Can be wide or full width.

List

  • Nothing special on lists.
  • Or perhaps we could experiment a smaal SVG instead of a bullet.

Cover image

Cover image means that user can select background-image and write text. I think button is also coming inside a Cover image.

  • Hopefully Cover image can also be wide or full width.
  • There is setting for background-color dimness (opacity). We can naturally pick background-color and text color.

Separator

Separator means <hr>. For this we could have nice divider SVG image, 60-100px width in the center.

Button

This means a link that looks like a button, call to action link. Use can select background-color and text color.

Text columns

Columns block that currently support only text inside columns.

  • User can select 2-5 columns.
  • Can be wide or full width.
  • Can have background color defined from a theme (even if user can't pick it).

Latest posts

  • Currently can display post title and date. (Hopefully in future can display feature image, excerpt etc. also).
  • Can be in List or Grid view.
  • Default is list of latests posts. This list could be a little different looking than basic list.
  • Can be wide or full width.
  • In Grid view user can select 2-5 columns.

Gategories block

  • Can be basic <select> or list view.
  • List view should be the looking as latest posts.

Embeds

Some embeds like youtube video can be wide or full width.

Video and audio

Nothing special, they can have caption which should be inline with image caption.

Tables

Tables can also be wide or full width but not important here. Nice looking table is enough.

Pre-formatted and code

Not important here but basic styling naturally.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment