Bricks

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

• ^NEW As of 8.x-1.6 Bricks supports Layout API!
• ↳ It’s recommended to migrate from Bricks Bootstrap to Bootstrap Kit (but not required).

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

• Bricks Core gives you a Bricks field/widget/formatter pack allowing you to compose flexible content of bricks (Layouts and Entities) via draggable tree UI.
• Bricks Inline ^8.x-1.1+ allows you to create and edit bricks right in the draggable tree via Inline Entity Form.
• Bricks Revisions ^8.x-1.3+ integrates Bricks with Entity Reference Revisions.

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

• Project pages: uibricks.com • drupal.org/project/bricks.
• Source code: github.com/highweb/drupal-bricks.
• Working group: groups.drupal.org/bricks.
• Team: timezone.io/team/drupal-bricks.
• Video tutorial: vimeo.com/211714437 by Hans Riemenschneider.
• Tutorial: drupal8.support/en/modules/bricks by Dirk Bernaert.

Events

• June 29, 2017: [Talk] Using of Bricks by Gábor Tompa @ Budapest Meetup
• June 25, 2017: [Sprint] Bricks, Paragraphs, Pattern Lab and Fractal @ Design 4 Drupal Boston 2017
• June 23, 2017: [Session] UI Bricks by Anton Staroverov @ Design 4 Drupal Boston 2017
• June 11, 2017: [Code sprint] Bricks Team @ DrupalCamp Kyiv 2017
• June 10, 2017: [Session] Drupal theming & all the things by Vlad Moyseenko @ DrupalCamp Kyiv 2017
• June 10, 2017: [Session] ref. Bricks as an extension to Paragraphs by Vasily Yaremchuk @ DrupalCamp Kyiv 2017
• May 3, 2017: [Talk] UI Building with Bricks by Anton Staroverov @ New York Meetup
• May 2, 2017: [Talk] Site Building with Drupal 8, Bricks, and ECK by Karl Kedrovsky @ Kansas City Meetup
• March 4, 2017: [Session] Entity Reference as a Component-based Site Builder by Anton Staroverov @ DrupalCamp London 2017
• September 29, 2016: [Session] Drupal 8 Hidden Power by Anton Staroverov @ DrupalCon Dublin 2016
• September 23, 2015: [BoF] Content Management Revolution II by Anton Staroverov @ DrupalCon Barcelona 2015
• November 29, 2014: [Session] Revolutionary new way to create pages in Drupal by Anton Staroverov @ DrupalCamp Moscow 2014
• September 24, 2014: [BoF] Content Management Revolution by Anton Staroverov @ DrupalCon Amsterdam 2014

Showcase

• hopehouse.net @ Kansas City

FAQ

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)