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:
- Hero
- Navigation
- Accordion
- Carousel
- 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:
- Every row after the first is represented by a div (Line 2).
- Every column is also represented by a div (Line 7).
- If you have multiple columns, but have merged cells, you will get an empty div (Line 4).
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:
- Add additional classes or IDs to your markup.
- Add any semantic elements you may want.
- Add any aria or accessibility attributes you need.
- 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:
![](./media_13e8a4dea06f4903c024e77f43593594b7872135e.jpeg?width=750&format=jpeg&optimize=medium)
![](./media_1ba3ec527ac9da48bf5aa6c3e63642292b1ae0b99.jpeg?width=750&format=jpeg&optimize=medium)
![](./media_118913321ba6d7bd29ccd23948bbd965d858fa030.jpeg?width=750&format=jpeg&optimize=medium)
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.