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
- Open pre-configured sandbox.
- Click Launch sandbox and wait.
- Follow the installation (all settings should be pre-filled, don’t change them).
- Go to Extend and enable Bootstrap Kit Demo.
- Go to Appearance and set Tweme as default theme.
- Find an auto-created node and go to Edit mode to check magic out!
- Finally go to Content and create your own first Bricky page!
- Like it? => Support by ★ starring on Drupal.org, ★ starring on GitHub and/or sharing on Twitter.
Bricks+Paragraphs demo:
- Follow the instructions above, but using the different sandbox link.
- Then follow the Paragraphs setup instructions.
Installation
Default setup (Bricks/ECK/IEF):
- Install Bricks Default (shipped with Bricks) and its dependencies.
- 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:
- Additionally install Bootstrap Kit and its dependencies.
- 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:
- Additionally install Paragraphs Demo (shipped with Paragraphs) and its dependencies.
- Also install Bricks Revisions (shipped with Bricks) to be able to reference revisionable entities like Paragraphs.
- Go to Structure > Content types > Paragraphed article > Manage fields.
- Delete default Paragraphs field.
- Create new Paragraphs field of type Bricks (revisioned):
- Name: Paragraphs (field_paragraphs)
- Type of item to reference: Paragraph
- Allowed number of values: Unlimited
- Go to Manage form display and set Bricks tree (Inline entity form) widget for Paragraphs field.
- Go to Structure > Paragraphs types and create Layout type.
- 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
- Upgrade as usual.
- 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.
- 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
- Nov 04, 2017: [Session] Design-driven Drupal with Paragraphs, Bricks, and other metaphors by Derek DeRaps @ DrupalCamp Atlanta 2017
- Oct 26, 2017: [Talk] Bricks with Paragraphs and without them by Anton Staroverov @ Zurich Meetup
- Oct 19, 2017: [Talk] Atomic — Drupal distribution baked by Atomic Design by Anton Staroverov @ Basel Meetup
- Oct 14, 2017: [Session] Widget engine vs Paragraphs. Widget Engine with Layouts and Bricks. by Vitalii Zinenko @ MoldCamp 2017
- Oct 07, 2017: [Session] Widgets + Bricks + Layouts - Easy way to edit rich content by Anton Faibyshev @ DrupalCamp Lutsk 2017
- Sep 26, 2017: [Session] How to Content Model in Drupal 8 by Anton Staroverov @ DrupalCon Vienna 2017
- Sep 23, 2017: [Session] Site Building with ECK and Bricks by Karl Kedrovsky @ DrupalCamp St. Louis
- Jun 29, 2017: [Talk] Using of Bricks by Gábor Tompa @ Budapest Meetup
- Jun 25, 2017: [Sprint] Bricks, Paragraphs, Pattern Lab and Fractal @ Design 4 Drupal Boston 2017
- Jun 23, 2017: [Session] UI Bricks by Anton Staroverov @ Design 4 Drupal Boston 2017
- Jun 11, 2017: [Sprint] Bricks Team @ DrupalCamp Kyiv 2017
- Jun 10, 2017: [Session] Drupal theming & all the things by Vlad Moyseenko @ DrupalCamp Kyiv 2017
- Jun 10, 2017: [Session] ref. Bricks as an extension to Paragraphs by Vasily Yaremchuk @ DrupalCamp Kyiv 2017
- May 03, 2017: [Talk] UI Building with Bricks by Anton Staroverov @ New York Meetup
- May 02, 2017: [Talk] Site Building with Drupal 8, Bricks, and ECK by Karl Kedrovsky @ Kansas City Meetup
- Mar 04, 2017: [Session] Entity Reference as a Component-based Site Builder by Anton Staroverov @ DrupalCamp London 2017
- Sep 29, 2016: [Session] Drupal 8 Hidden Power by Anton Staroverov @ DrupalCon Dublin 2016
- Sep 23, 2015: [BoF] Content Management Revolution II by Anton Staroverov @ DrupalCon Barcelona 2015
- Nov 29, 2014: [Session] Revolutionary new way to create pages in Drupal by Anton Staroverov @ DrupalCamp Moscow 2014
- Sep 24, 2014: [BoF] Content Management Revolution by Anton Staroverov @ DrupalCon Amsterdam 2014
Showcase
- connectingbusiness.org by Open Social
- hopehouse.net @ Kansas City
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)