Layout Builder in Drupal 8 and 9 is a game-changer, let's maximize its efficiency with some add-ons modules and learn more about the best practices in using it with atomic design. Watch the session recording on our Youtube channel: https://www.youtube.com/c/drupalcampkyiv

1. Two Sides of the Same Coin: Maximizing UX
With Drupal’s Bootstrap Layout Builder
Speed up the site building With:
Drupal’s Bootstrap Layout Builder

2. Mahmoud Zayed
Software Architect
mahmoudz@imagexmedia.com
Aaron Christian
Software Architect
aaronc@imagexmedia.com
2

3. Mahmoud Zayed
3
Software Architect
Contact:
mahmoudz@imagexmedia.com
https://www.drupal.org/u/mahmoud-zayed
Drupal Slack: @Mahmoud Zayed
Twitter: @mahmoud_e_zayed

4. Case study

5. DrupalCon
Vienna 2017
● Dries has announced some
initiatives that enhances the user
experience for site builders.
● One of these initiatives was the
Layout Builder, which later
become a Drupal core module.
5

6. The Problem
6

7. Atomic Design
7
1. Atoms 2. Molecules 3. Organism 4. Template 5. Page

8. UI kits
8
● Made an extensive UI kit / guide for
the developers
● Listed both foundations and
components
● Started adding more responsive
version for each component

9. Annotations
9
● The designer numbers the components that
annotates the descriptions in the footer of the
page.
● This helps BA and Dev will use this to
understand the initial the feature
requirements.
● It’s good for keeping a discussion around a
component
● Client will use this to understand how the
elements and pages interact.
● We use the same numbers on other pages if we
are using the component

10. Additional Layout
Builder Modules
10

11. Plugins’ designs
11

12. Bootstrap Styles
Bootstrap Layout Builder
Layout Builder Blocks
12

13. Dependency
13
Bootstrap Styles
Bootstrap Layout Builder XYZ
Layout Builder Blocks
Styles’
Plugins
inventory
Creates
Dynamic
Layouts
Utilize Bootstrap
Styles Module in
the section
element render
array
Utilize Bootstrap
Styles Module in
the ????
element render
array
Utilize Bootstrap
Styles Module in
the block element
render array
Why Plugin
design
pattern?

14. Bootstrap Styles
14
https://www.drupal.org/project/bootstrap_styles

15. Plugins Group
● Plugins group is a wrapper of one or
more style plugin.
● It displays in the groups if at least one
of its plugins is enabled.
● It can contain any shared
configurations for its plugins.
15

16. How to
define a
new
group
plugin?
● Create the plugin group:
MODULE_NAME/src/Plugin/BootstrapStyles/StylesGroup/PLUGIN_GROUP_NAME.php
● Define the annotation.
16
@StylesGroup(
id = "background",
title = @Translation("Background"),
weight = 1,
icon = "bootstrap_styles/images/plugins/background-icon.svg"
)
● Add the class & the functions:
class GROUP_PLUGIN_NAME extends StylesGroupPluginBase {
------------ #1 ---------------
// Add elements to the configuration form.
public function buildConfigurationForm(array &$form, FormStateInterface $form_state) {}
// Saves the elements’ values to the form state.
public function submitConfigurationForm(array &$form, FormStateInterface $form_state) {}
------------- #2 ---------------
// Add elements to Layout Builder dialog.
public function buildStyleFormElements(array &$form, FormStateInterface $form_state, $storage) {}
// Save the elements' values in the component settings.
public function submitStyleFormElements(array $group_elements) {}
}

17. Background group example - #1
17
class GROUP_PLUGIN_NAME extends StylesGroupPluginBase {
// Add elements to the configuration form.
public function buildConfigurationForm(array &$form, FormStateInterface $form_state) {}
// Saves the elements’ values to the form state.
public function submitConfigurationForm(array &$form, FormStateInterface $form_state) {}
}

18. Background group example - #2
18
class GROUP_PLUGIN_NAME extends StylesGroupPluginBase {
// Add elements to Layout Builder dialog.
public function buildStyleFormElements(array &$form, FormStateInterface $form_state, $storage) {}
// Save the elements' values in the component settings.
public function submitStyleFormElements(array $group_elements) {}
}
@StylesGroup(
id = "background",
title = @Translation("Background"),
weight = 1,
icon = "bootstrap_styles/images/plugins/background-icon.svg"
)

19. Plugins
19

20. How to
define a
new
style
plugin?
● Create an style plugin:
MODULE_NAME/src/Plugin/BootstrapStyles/Style/STYLE_PLUGIN_NAME.php
● Define the annotation.
20
@Style(
id = "background_color",
title = @Translation("Background Color"),
group_id = "background",
weight = 1
)
● Add the class & the functions:
class STYLE_PLUGIN_NAME extends StylePluginBase {
------------ #1 ---------------
// Add elements to the configuration form.
public function buildConfigurationForm(array &$form, FormStateInterface $form_state) {}
// Saves the elements’ values to the form state.
public function submitConfigurationForm(array &$form, FormStateInterface $form_state) {}
------------- #2 ---------------
// Add elements to Layout Builder dialog.
public function buildStyleFormElements(array &$form, FormStateInterface $form_state, $storage) {}
// Save the elements' values in the component settings.
public function submitStyleFormElements(array $group_elements) {}
------------- #3 ---------------
// Convert the storage to classes or attributes and merge them with the element’s render array.
public function build(array $build, array $storage, $theme_wrapper = NULL) {}
}

21. Background Color example - #1
21
class STYLE_PLUGIN_NAME extends StylePluginBase {
// Add elements to the configuration form.
public function buildConfigurationForm(array &$form, FormStateInterface $form_state) {}
// Saves the elements’ values to the form state.
public function submitConfigurationForm(array &$form, FormStateInterface $form_state) {}
}

22. Background color example - #2
22
class STYLE_PLUGIN_NAME extends StylePluginBase {
// Add elements to Layout Builder dialog.
public function buildStyleFormElements(array &$form, FormStateInterface $form_state, $storage) {}
// Save the elements' values in the component settings.
public function submitStyleFormElements(array $group_elements) {}
}

23. Background color example - #3
23
class STYLE_PLUGIN_NAME extends StylePluginBase {
// Convert the storage to classes or attributes and merge them with the element’s render array.
public function build(array $build, array $storage, $theme_wrapper = NULL) {}
}

24. Bootstrap
Layout Builder
24
https://www.drupal.org/project/bootstrap_layout_builder

25. KING
Tab #1 Layout ● Developer can create breakpoints and
responsive layouts.
● Content editor can choose how the
content display on different devices.
25

26. KING
Tab #2 Style
● Let’s use Bootstrap Styles’ plugins in Bootstrap Layout Builder (Layout Builder Section).
26

27. KING
Tab #2 Style
● You have the option to restrict the styles’ plugins.
27

28. KING
Tab #3 Settings
● We call it advanced settings.
● Add additional classes.
● Add attributes to container, row or columns.
28

29. Layout Builder
Blocks
29
https://www.drupal.org/project/layout_builder_blocks

30. KING
Tab #1 Content
● Let’s use Bootstrap Styles’ plugins in
layout builder blocks.
30
Tab #2 Style
● Works with any block type!

31. KING
Tab #2 Style
● You have the option to restrict the styles’ plugins and the enabled block types!
31

32. Section Library
32
Let’s create reusable templates for single or
multiple sections!

33. Roadmap
33
09.05.XX
Current versions
June 2021:
● [Bootstrap Styles] Add & merge more plugins.
● [Bootstrap Styles] Responsive.
● [Bootstrap Layout Builder] Add the ability to style columns.
● [ Layout Builder Blocks] Add the ability to style field groups and
fields in a block.
● [Section Library] Release stable version of Section Library.
December 2021:
● [Bootstrap Styles] Add & merge more plugins.
● [Section Library] Import/Export templates.
● Creates components ( blocks ) that fully
integrated with the modules.
BS 1.0.3
BLB 2.0.1
LLB 1.0.1
SL 1.0.0-beta1
BS 1.1.x
BLB 2.1.x
LLB 1.1.x
SL 1.0.x
BS 1.2.x
BLB 2.2.x
LLB 1.2.x
SL 1.0.x

34. Demo
34