You are here

README.txt in Component blocks 1.x

Same filename and directory in other branches
  1. 1.0.x README.txt
  2. 1.1.x README.txt
INTRODUCTION
------------

This modules extends upon the functionality in the ui_patterns module to provide
layout builder blocks which can be used to link up fields/values from entities
or tokens to layouts defined in an ui_patterns definition.

You can define your template definitions by adding a
`module_name.ui_patterns.yml` file to your custom module or theme and specifying
which fields the template needs. When setting up the block configuration after
placing the block, each of these fields will be available as a form item which
can take a fixed value (or token value) or a field with field formatter for
input.

REQUIREMENTS
------------

 * components
 * layout_builder
 * ui_patterns

INSTALLATION
------------

 * Enable the module
 * You will need to do a cache rebuild after adding/updating layouts

CONFIGURATION
-------------

To start using this, you will need to create a new
`module_name.ui_patterns.yml` file in your custom module or theme to define each of
the templates you wish to make available. For example:

```
image_panel:
  label: Image Panel
  fields:
    title:
      label: Title
    body:
      label: Body
    link:
      label: Link
    media:
      label: Media
  use: "@some_namespace/layout/src/templates/patterns/section-media.twig"
    libraries:
      - some_theme/image-panel
```

Each item defined under the "fields" key will be made available in the block
configuration to setup later, unless you add `ui: false`. Each of the field
keys should match the variables used in your twig template file. The
corresponding twig template file for the above might look something like this:

```
<div class="image-panel">
  <div class="image-panel__img">
    {{ media }}
  </div>

  <div class="image-panel__content">
    <h2>{{ title }}</h2>
    {{ body }}
    {{ link }}
  </div>
</div>
```

The `use` key refers to the path to the twig file. If you have a
component library defined you can just reference the library with
"@[library-name]" as in the example above.

The `libraries` key attaches any required libraries to the block when rendered.
These libraries are defined in your theme theme_name.libraries.yml file.

After adding new definitions you will need to run `drush cr` for them to be
discovered, after that they will be made available as blocks in Layout
Builder.

File

README.txt
View source
  1. INTRODUCTION
  2. ------------
  3. This modules extends upon the functionality in the ui_patterns module to provide
  4. layout builder blocks which can be used to link up fields/values from entities
  5. or tokens to layouts defined in an ui_patterns definition.
  6. You can define your template definitions by adding a
  7. `module_name.ui_patterns.yml` file to your custom module or theme and specifying
  8. which fields the template needs. When setting up the block configuration after
  9. placing the block, each of these fields will be available as a form item which
  10. can take a fixed value (or token value) or a field with field formatter for
  11. input.
  12. REQUIREMENTS
  13. ------------
  14. * components
  15. * layout_builder
  16. * ui_patterns
  17. INSTALLATION
  18. ------------
  19. * Enable the module
  20. * You will need to do a cache rebuild after adding/updating layouts
  21. CONFIGURATION
  22. -------------
  23. To start using this, you will need to create a new
  24. `module_name.ui_patterns.yml` file in your custom module or theme to define each of
  25. the templates you wish to make available. For example:
  26. ```
  27. image_panel:
  28. label: Image Panel
  29. fields:
  30. title:
  31. label: Title
  32. body:
  33. label: Body
  34. link:
  35. label: Link
  36. media:
  37. label: Media
  38. use: "@some_namespace/layout/src/templates/patterns/section-media.twig"
  39. libraries:
  40. - some_theme/image-panel
  41. ```
  42. Each item defined under the "fields" key will be made available in the block
  43. configuration to setup later, unless you add `ui: false`. Each of the field
  44. keys should match the variables used in your twig template file. The
  45. corresponding twig template file for the above might look something like this:
  46. ```
  47. {{ media }}
  • {{ title }}

  • {{ body }}
  • {{ link }}