There seems to be a dearth of information on the internet about how to generate an icon_map for newly registered layouts in Layout Builder.

I've gotten as far as finding a patch file from the project that includes a poorly-documented comment that unfortunately doesn't shed much light on this:

 * Builds a render array representation of an SVG based on an icon map.
 * @param string[][] $icon_map
 *   A two-dimensional array representing the visual output of the layout.
 *   For the following shape:
 *   |------------------------------|
 *   |                              |
 *   |             100%             |
 *   |                              |
 *   |-------|--------------|-------|
 *   |       |              |       |
 *   |       |      50%     |  25%  |
 *   |       |              |       |
 *   |  25%  |--------------|-------|
 *   |       |                      |
 *   |       |         75%          |
 *   |       |                      |
 *   |------------------------------|
 *   The corresponding array would be:
 *   - ['top']
 *   - ['first', 'second', 'second', 'third']
 *   - ['first', 'bottom', 'bottom', 'bottom'].


It doesn't say why we'd use keywords like first, third, and bottom — or even what each term actually means to the Layout Builder module. There doesn't seem to be any rhyme or reason as to how this is supposed to work. The documentation is also severely lacking.

What is the underlying logic behind the generation of icon maps, and how does it actually work?

  • 2
    Taking a guess...if you look in layout_builder/layout_builder.layouts.yml it defines a couple of icon maps, and immediately afterwards defines regions, with matching labels. So the keys are possibly region machine names. They may of course be arbitrary, and just used to tie the cells of the layout together when they span multiple rows/columns. Still guessing, I'd say that each inner array is treated as a row of the layout, and each element in those array defines elements of n width, where n is determined by the other items in the array. If that make sense – Clive May 29 '19 at 21:58
  • 1
    I suggest you ask about this on #layouts Drupal slack channel and report back ;) I noticed some changes in the LB version that was included in Drupal core, but the documentation still seems to rely on the previous versions. Older versions used the "3-layer cake" icons you see in screenshots, but if you check the current version the icons/layouts only designate how many columns there are in a row. So each section is meant to support columns-in-one-row layouts, not complex CSS-grid-like layouts. I guess they never did, it's just the interface that changed to be more clear. – prkos May 29 '19 at 23:21
  • 1
    I think @Clive is right. Since the longer array has 4 items, each column gets the 25% of the space. To give the 50% space to second, second must be repeated twice. As for using ['top'] instead of ['top', 'top', 'top', 'top'], I guess that is a special case that is handled by the code. – kiamlaluno May 30 '19 at 7:45
  • 1
    @kiamlaluno It's the other way around - every item is considered 100% width by default, until/unless the rest of the row dictates otherwise – Clive May 30 '19 at 14:52
  • 1
    @Clive In both the cases, the code is able to handle the ['top'] case. – kiamlaluno Jun 2 '19 at 7:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.