Add block blog post

diff --git a/docs/_posts/2021-01-23-the-block-probably-bulmas-most-important-feature.md b/docs/_posts/2021-01-23-the-block-probably-bulmas-most-important-feature.md
new file mode 100644 (file)
index 0000000..51bc1c8
--- /dev/null
+++ b/docs/_posts/2021-01-23-the-block-probably-bulmas-most-important-feature.md
@@ -0,0 +1,164 @@
+---
+title: 'The `.block`, probably Bulma’s most important feature'
+layout: post
+introduction: 'Automatic spacing for everything in Bulma'
+color: 'danger'
+name: 'The Bulma block'
+icon: 'cube'
+---
+
+The Bulma `block` is a simple element but with a very powerful feature: it provides `1.5rem` margin at the bottom, if it's not the last child.
+
+It exists as its own `.block` CSS class, but its properties are also used on **many other Bulma components**.
+
+For example, if you were to combine a `notification`, and a `pagination`, they would be **automatically spaced evenly**:
+
+<div class="block is-size-6" style="margin-left: auto; margin-right: auto; max-width: 80%; padding: 1.5rem;">
+  <p class="title">Newsletter</p>
+
+  <div class="notification is-success">
+    451 new subscribers this month.
+  </div>
+
+  <table class="table is-bordered is-striped is-hoverable is-fullwidth">
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Email</th>
+        <th>Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Alex</td>
+        <td>alex.smith@example.com</td>
+        <td><a>Edit</a> · <a>Delete</a></td>
+      </tr>
+      <tr>
+        <td>Sam</td>
+        <td>sam.rogers@example.com</td>
+        <td><a>Edit</a> · <a>Delete</a></td>
+      </tr>
+      <tr>
+        <td>Luke</td>
+        <td>hello.luke@example.com</td>
+        <td><a>Edit</a> · <a>Delete</a></td>
+      </tr>
+      <tr>
+        <td>Eli</td>
+        <td>eli.larry@example.com</td>
+        <td><a>Edit</a> · <a>Delete</a></td>
+      </tr>
+      <tr>
+        <td>Dan</td>
+        <td>dan.danny@example.com</td>
+        <td><a>Edit</a> · <a>Delete</a></td>
+      </tr>
+    </tbody>
+  </table>
+
+  <nav class="pagination" role="navigation" aria-label="pagination">
+    <a class="pagination-previous">Previous</a>
+    <a class="pagination-next">Next page</a>
+    <ul class="pagination-list ml-0 mt-0">
+      <li class="mt-0">
+        <a class="pagination-link" aria-label="Goto page 1">1</a>
+      </li>
+      <li class="mt-0">
+        <span class="pagination-ellipsis">&hellip;</span>
+      </li>
+      <li class="mt-0">
+        <a class="pagination-link" aria-label="Goto page 45">45</a>
+      </li>
+      <li class="mt-0">
+        <a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
+      </li>
+      <li class="mt-0">
+        <a class="pagination-link" aria-label="Goto page 47">47</a>
+      </li>
+      <li class="mt-0">
+        <span class="pagination-ellipsis">&hellip;</span>
+      </li>
+      <li class="mt-0">
+        <a class="pagination-link" aria-label="Goto page 86">86</a>
+      </li>
+    </ul>
+  </nav>
+</div>
+
+For comparison, if there was no spacing, here's what they would look like:
+
+<div class="block is-size-6" style="margin-left: auto; margin-right: auto; max-width: 80%; padding: 1.5rem;">
+  <p class="title mb-0">Newsletter</p>
+
+  <div class="notification is-success mb-0">
+    451 new subscribers this month.
+  </div>
+
+  <table class="table is-bordered is-striped is-hoverable is-fullwidth mb-0">
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Email</th>
+        <th>Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Alex</td>
+        <td>alex.smith@example.com</td>
+        <td><a>Edit</a> · <a>Delete</a></td>
+      </tr>
+      <tr>
+        <td>Sam</td>
+        <td>sam.rogers@example.com</td>
+        <td><a>Edit</a> · <a>Delete</a></td>
+      </tr>
+      <tr>
+        <td>Luke</td>
+        <td>hello.luke@example.com</td>
+        <td><a>Edit</a> · <a>Delete</a></td>
+      </tr>
+      <tr>
+        <td>Eli</td>
+        <td>eli.larry@example.com</td>
+        <td><a>Edit</a> · <a>Delete</a></td>
+      </tr>
+      <tr>
+        <td>Dan</td>
+        <td>dan.danny@example.com</td>
+        <td><a>Edit</a> · <a>Delete</a></td>
+      </tr>
+    </tbody>
+  </table>
+
+  <nav class="pagination mb-0" role="navigation" aria-label="pagination">
+    <a class="pagination-previous">Previous</a>
+    <a class="pagination-next">Next page</a>
+    <ul class="pagination-list ml-0 mt-0">
+      <li class="mt-0">
+        <a class="pagination-link" aria-label="Goto page 1">1</a>
+      </li>
+      <li class="mt-0">
+        <span class="pagination-ellipsis">&hellip;</span>
+      </li>
+      <li class="mt-0">
+        <a class="pagination-link" aria-label="Goto page 45">45</a>
+      </li>
+      <li class="mt-0">
+        <a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
+      </li>
+      <li class="mt-0">
+        <a class="pagination-link" aria-label="Goto page 47">47</a>
+      </li>
+      <li class="mt-0">
+        <span class="pagination-ellipsis">&hellip;</span>
+      </li>
+      <li class="mt-0">
+        <a class="pagination-link" aria-label="Goto page 86">86</a>
+      </li>
+    </ul>
+  </nav>
+</div>
+
+This `block` element has always existed; only recently has there been a <a href="/documentation/elements/block/">dedicated documentation page</a>.