style
content

Exploring blocks

Introduction

Blocks are a foundational concept behind adding form and function to sections of a page. If you followed along with the tutorial, you will know that you can create simple content structures with just text and images. When you want to group pieces of content, add a bit more structure, or add more complex functionality, blocks can help you achieve these goals.

Example blocks ideas

A block can really be anything you choose, but here are a few possible use cases:

  1. Hero
  2. Navigation
  3. Accordion
  4. Carousel
  5. Tab List

How they work

Blocks are built using tables in Google Docs or Microsoft Word. These tables are converted to Markdown and rendered as simple divs when requesting HTML.

To create a block, you only need a table with at least one row & one column:

This will output in HTML as:

https://gist.github.com/auniverseaway/11fd8e0d00038872e77c5f2e4ee9b1f1

In order to give some context to our block, we will add a name to the first row + column:

This will output in HTML as:

https://gist.github.com/auniverseaway/280d80aef8c1a5a2937874933d84f9d5

We now have a CSS class that we can use to either style our block or attach functionality with Javascript. Of course, an empty div with a class is not tremendously useful.

Let’s add a bit of content using additional rows and columns:

Each accordion item will have a header with an image and text sitting below. I could have made this content a little simpler by joining the image and text columns, but I want to highlight a few important areas with how the HTML is rendered from this table. Let’s look at the markup:

https://gist.github.com/auniverseaway/21b2db5b928b6014e9a5a485780038c4

As we saw before, we have a div with a class representing the entire table. There are a few other notable additions:

Once you have created this structure in your document, you will want to decorate and style it.

Decorating blocks

The concept of decorating blocks is to perform several optional tasks:

  1. Add additional classes or IDs to your markup.
  2. Add any semantic elements you may want.
  3. Add any aria or accessibility attributes you need.
  4. Manipulate the DOM in a way to match your desired output.

For our use case, we’ll decorate the block to add a few classes to help with styling and add an event handler for interactivity:
(Copy the following code to blocks/accordion/accordion.js)

https://gist.github.com/auniverseaway/8e9d73d7df4e26abef151a9be390ccb6

Let’s also add some CSS:
(Copy the following code to blocks/accordion/accordion.css)

https://gist.github.com/auniverseaway/a95567f5ff633b7803710d46c002f9ff

The end result should look something a bit like this:

Guatemala Huehuetenango Finca Rosma
A flavor compound of dark sugars, oatmeal-raisin cookies, a faint blackberry accent note and acidic impression.
Ethiopia Dry Process Dari Kidame
Fruits are well-integrated into the coffee's sweetness, and acidity is bright for a dry process. Date sugar, orange marmalade, mango, and aromatic cedar. Intense chocolate and a blueberry hint in this dark roast.
Colombia Buesaco Alianza Granjeros
Raw demurara sugar sweetness, aromatic butterscotch, hints of apple, golden raisin, orange peel, and elegant citrus acidic impression. Full City adds in a ribbon of cacao/chocolate bar, rich bittersweetness. Good for espresso.

Conclusion

And that’s it! You’ve taken a simple table in Docs or Word and made it a much more rich experience for your visitors.