Bricks

Bricks

Revolutionary new way of creating rich content in Drupal.

Drupal.org GitHub

Currently 8.x-1.6

Bricks — is a new way of building pages on top of Entity Reference, Display Modes, Layout API, tabledrag.js and Flat Tables. Everything is in Drupal core that makes Bricks ultra-lightweight and developer-friendly.

In terms of concept Bricks is a new generation of Paragraphs, an alternative to Panelizer and a good friend to ECK, Inline Entity Form and your favorite WYSIWYG. Shortly, it allows you to nest Entity Reference field items using Drupal drag & drop UI (exactly like for menu or taxonomy items).

Updates

Live demo

  1. Open pre-configured sandbox.
  2. Click Launch sandbox and wait.
  3. Follow the installation (all settings should be pre-filled, don’t change them).
  4. Go to Extend and enable Bootstrap Kit Demo.
  5. Go to Appearance and set Tweme as default theme.
  6. Find an auto-created node and go to Edit mode to check magic out!
  7. Finally go to Content and create your own first Bricky page!
  8. Like it? => Support by ★ starring on Drupal.org, ★ starring on GitHub and/or sharing on Twitter.

Bricks+Paragraphs demo:

  1. Follow the instructions above, but using the different sandbox link.
  2. Then follow the Paragraphs setup instructions.

Installation

Default setup (Bricks/ECK/IEF):

  1. Install Bricks Default (shipped with Bricks) and its dependencies.
  2. Done! Now you can create Bricky pages (content type) using simple pre-configured ECK bricks like Text, Image, Wrapper and special Layout brick (which can render other bricks via Layout API). Use an auto-created node as a live playground.

Theming with Bootstrap 3/4:

  1. Additionally install Bootstrap Kit and its dependencies.
  2. Done! Now you can use Columns, Accordion, Carousel and Tabs components via Layout brick. Install Bootstrap Kit Demo (shipped with Bootstrap Kit) to get a sample node.

Using with Paragraphs:

  1. Additionally install Paragraphs Demo (shipped with Paragraphs) and its dependencies.
  2. Also install Bricks Revisions (shipped with Bricks) to be able to reference revisionable entities like Paragraphs.
  3. Go to Structure > Content types > Paragraphed article > Manage fields.
  4. Delete default Paragraphs field.
  5. Create new Paragraphs field of type Bricks (revisioned):
    • Name: Paragraphs (field_paragraphs)
    • Type of item to reference: Paragraph
    • Allowed number of values: Unlimited
  6. Go to Manage form display and set Bricks tree (Inline entity form) widget for Paragraphs field.
  7. Go to Structure > Paragraphs types and create Layout type.
  8. Done! Now you can create Paragraphed pages (content type) using default Paragraphs as bricks: Text, Images, Image + Text, User and special Layout brick (which can render other bricks via Layout API).

Requirements

All new Bricks for D8 has no requirements and works with ANY entity types!

Submodules

Compatibility

Drupal Bricks Layout API ECK IEF ERR Paragraphs
8.3.3 1.6 ✔ 1.0-alpha3 1.0-beta1 1.3 1.1
8.3.2 1.5 — 1.0-alpha3 1.0-beta1 1.3 1.1
8.2.6 1.2 — 1.0-alpha3 1.0-beta1 — —

Upgrading from 8.x-1.5

  1. Upgrade as usual.
  2. Create Layout bundle manually to be able to use the newest Layout API integration:
    • ECK: Structure > ECK > Bundle list > Add bundle.
    • Paragraphs: Structure > Paragraphs > Add type.
  3. Don’t forget to allow this bundle in your Bricks field settings!

Resources

Events

Showcase

FAQ

What is a difference with Layout Builder?
1. Layout Builder (LB) is designed to control any ENTITY layout (per view mode, or per entity). 2. Bricks is designed to control entity reference FIELD layout (per entity per field). Layout Builder and Bricks follow different goals and have different approaches as a result. They work well together and one could not replace other one. IE: You can create Article ENTITY and create Content FIELD on it. then you can control whole entity layout via LB and Content field layout via Bricks. the whole Content field rendered by Bricks will be available then for LB as a block.
Are brick bundles translatable?
100% translatable (thanks Entity Translation and ECK). Just mark them as translatable at /admin/config/regional/content-language.
Which entity types are supported?
Bricks can hold references to any entities - ECK or Paragraphs, doesn’t matter. And Bricks Bootstrap is just an example of using ECK.
Does bricks support revisions of the parent entity?
Internally Bricks field is a multi-value Entity Reference field => standard revisioning mechanism works. Moreover, Bricks Revisions (core submodule) allows you to revision referenced entities.
Is there a reason why i can not just use bricks form widget for the normal paragraphs field?
Paragraphs couldn’t be nested using drag and drop! Bricks field allows you to do (like on gif).
How to get non-equal column layout, 4-8 in example?
Use universal Wrapper brick with custom CSS classes on it. Bootstrap example: 

Wrapper (.row)
|-- Image (.col-sm-4)
|-- Text (.col-sm-8)

Questions?

Ask us in Drupal Slack

Channel #bricks • Get invite