Gutenberg blocks have been a great addition to the WordPress editor, but their slow rollout left a lot of gaps to fill. Enter TBC Blocks– plugin-loaded gutenberg blocks from The Build Collective. These blocks make it easier to build more complex content layouts directly in the WordPress editor.

*note: Much of this project has been made obsolete by updates made to WordPress’ Gutenberg blocks. As these were primarily gap fillers when the system was first released, I’m glad to see the functionality came in further updates.

---

TBC Core

The TBC Blocks plugin suite starts with TBC Core. This initializes the more basic blocks that are utilized by the more complex features.

section

Creates a <section> element that can contain any other blocks. Nested inner-content div allows for extra styling options while adhering to WordPress’ naming conventions.

<section class="tbc-section">
  <div class="tbc-section__inner-content">
    ...
  </div>
</section>

card

Creates an <article> element that can receive any other blocks.

<article class="tbc-card">
  ...
</article>

hero

TBC Hero utilizes a combination of the section and card blocks, while also allowing the insertion of any other gutenberg blocks.

<section class="tbc-hero">
  <article class="tbc-card">
    ...
  </article>
</section>

---

TBC Accordion

TBC Accordion is perfect for FAQ sections. It loads up two Gutenberg blocks: the accordion container and accordion items. In the editor the container can be placed and will only accept accordion items as children. Once on the page, the element is transformed into a standalone React component that expands and collapses on click.

<ul class="tbc-accordion">
  <li class="tbc-accordion__accordion-item">
    <div class="accordion-item__heading">
      ...
    </div>
    <div class="accordion-item__content">
      ...
    </div>
  </li>
  <li class="tbc-accordion__accordion-item">
    <div class="accordion-item__heading">
      ...
    </div>
    <div class="accordion-item__content">
      ...
    </div>
  </li>
</ul

These plugins are part of a series with The Build Collective to identify cumbersome elements of the development process and craft common sense solutions to make our dev lives easier.