# Column Block Plugin

**URL:** <https://forum.getkirby.com/t/column-block-plugin/26828>\
**Category:** Plugins\
**Tags:** v3\
**Created:** [October 25, 2022, 10:15am UTC](https://forum.getkirby.com/t/column-block-plugin/26828 "2022-10-25T10:15:21Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Microman](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/microman/32/15876_2.png) [@Microman](https://forum.getkirby.com/u/Microman)\
**Post date:** [October 25, 2022, 10:15am UTC](https://forum.getkirby.com/t/column-block-plugin/26828/1 "2022-10-25T10:15:21Z")

</div>

Use columns in [block fields](https://getkirby.com/docs/reference/panel/fields/blocks) based on the [layout field](https://getkirby.com/docs/reference/panel/fields/layout)! 🤗

Features:

- Use it as WYSIWYG
- Use paste (cmd+v) to insert any blocks in your column
- Use Drag’n’Drop to move contents from outside or inside a column block
- Customize **fieldsets** or **layouts** inside your blueprint in no time

![screenshot-column-block](https://github.com/youngcut/kirby-column-blocks/blob/main/.github/screenshot-column-block.png?raw=true)

@textnixe: 2 notes for the coreteam:

- To keep it simple, i limited the number of layouts in the layout-field to 1. Unfortunately with an hack cause of [missing the min/max property](https://kirby.nolt.io/180).
- I couldn’t find a way to call methods of the fields in the drawer. I therefore had to copy out the dialog for selecting the layouts, which I think is rather ugly. Is there a solution for this?

---

<div class="post-metadata">

**Author:** ![JonasHolfeld](https://avatars.discourse-cdn.com/v4/letter/j/919ad9/32.png) [@JonasHolfeld](https://forum.getkirby.com/u/JonasHolfeld)\
**Post date:** [January 16, 2023, 9:20am UTC](https://forum.getkirby.com/t/column-block-plugin/26828/2 "2023-01-16T09:20:04Z")

</div>

Great Plugin, thanks a lot!

A link to the Repository might be helpfull to others too 😉

> **[GitHub - youngcut/kirby-column-blocks: Use columns in block fields based on...](https://github.com/youngcut/kirby-column-blocks)**
>
> Use columns in block fields based on the layout field. - GitHub - youngcut/kirby-column-blocks: Use columns in block fields based on the layout field.

---

<div class="post-metadata">

**Author:** ![toddz](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/toddz/32/13824_2.png) [@toddz](https://forum.getkirby.com/u/toddz)\
**Post date:** [February 14, 2023, 12:22pm UTC](https://forum.getkirby.com/t/column-block-plugin/26828/3 "2023-02-14T12:22:09Z")

</div>

Hi @microman – am I correct in understanding that it should be possible to nest this layout-based block _within a layout?_

I’ve gotten halfway there, adding it to the fieldset of a Layout field in my `blueprints/pages/page.yml`. With the code below I can get Layout to list the new block field, open the new block and accept input, and save content to my page.txt, but nothing is rendered on the page.

I don’t know if it’s a matter of my YAML syntax or if there is more that I’m missing. I figured the default output snippet would be accessed from its location in the plugin directory – maybe that only works when this is used as a standalone page block?

(The Github documentation says “Need help? See [this post](https://forum.getkirby.com/t/plug-in-column-block/27056) from the Kirby forum” – but that post is page-not-found.)

```auto
      layout:
        label: Layout
        type: layout
        layouts:
          - "1/1"
          - "1/2, 1/2"
          - "1/3, 2/3"
          - "1/3, 1/3, 1/3"
        fieldsets:
          - heading
          - text
          - list
          - image
          - gallery
          - video
          - code
          - markdown
          nestedblock:
            name: NestyBlock
            icon: bolt
            fields:
              myblock:
                type: blocks
                fieldsets:
                  - heading
                  - text
                  - columns

```

---

<div class="post-metadata">

**Author:** ![Microman](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/microman/32/15876_2.png) [@Microman](https://forum.getkirby.com/u/Microman)\
**Post date:** [February 15, 2023, 11:41am UTC](https://forum.getkirby.com/t/column-block-plugin/26828/4 "2023-02-15T11:41:15Z")

</div>

Hi Toddz.

Here is a detailed explanation for the plugin. Let me know if you found here what you looking for.  
I’il change the link in the readme to this article.

I assume that you are familiar with [templates](https://www.youtube.com/watch?v=bmz6NYUNWPk) and [blocks](https://getkirby.com/docs/reference/panel/fields/blocks).  
Let’s say, you want a default template with a block field called `main`:

`site/blueprint/default.xml`

```auto
main:
  type: blocks

```

Now you have a template with a block field and the editors can add now any available blocks that Kirby provides. If you like, you can to decide, which blocks should be available.  
For example only the text and the column block:

```auto
main:
  type: blocks
  fieldsets:
    - text
    - column

```

With that default settings, you can add now example content:

 ![Bildschirmfoto 2022-11-21 um 10.26.53](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/7/76c8b1f664f9b804769bc5bf4ea49d8d013a3d6f.png)

To output that block field, you just add this line to `site/templates/default.php`:

```auto
<?= $page->main()->toBlocks() ?>

```

By default the example above delivers you following output:

```auto
<section class="grid">

  <div class="column" style="--columns:6">
    <div class="blocks">
      <p>Left column</p>
    </div>
  </div>      

  <div class="column" style="--columns:6">
    <div class="blocks">
      <p>Right column</p>
    </div>
  </div>

</section>

```

The default output is made for the default kirby framework. If you don’t use any styling framework (Like: Bootstrap, UI-Kit, Tailwind…), you need to add some styling:

```auto
.grid {
  --columns: 12;
  display: grid;
  grid-template-columns: 1fr;
}

@media screen and (min-width: 60rem) {
  .grid {
    grid-template-columns: repeat(12, 1fr);
  }
  .grid > .column {
    grid-column: span var(--columns);
  }
}

```

But if you use (for example bootstrap), you need to modify the way kirby outputs the column block:

`site/snippets/blocks/columns.php`

```auto
<?php /** @var \Kirby\Cms\Block $block */ ?>

<?php $layout = $block->layout()->toLayouts()->first() ?>

  <section class="row" id="<?= $layout->id() ?>">

    <?php foreach ($layout->columns() as $column): ?>

      <div class="col-12 col-md-<?= $column->span() ?>">
        <div class="blocks">
          <?= $column->blocks() ?>
        </div>
      </div>
      
    <?php endforeach ?>

  </section>

</div>

```

Here is an example, how you get more options from the column blocks:

`site/blueprint/default.xml`

```auto
fields:
  main:
    type: blocks
    fieldsets:
      - text
      columns:
        extends: blocks/columns
        fields:
          layout:
            layouts:
              - "1/1"
              - "1/2, 1/2"
              - "1/4, 1/4, 1/4, 1/4"
            fieldsets:
              - heading
              - text

```

Hope this helps you. If you have any further questions, let me know.  
If you like the plugin I would be very happy about a small [donation](https://www.paypal.com/donate/?hosted_button_id=ZMV4BV3X7EUT4).

---

<div class="post-metadata">

**Author:** ![Microman](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/microman/32/15876_2.png) [@Microman](https://forum.getkirby.com/u/Microman)\
**Post date:** [February 15, 2023, 1:42pm UTC](https://forum.getkirby.com/t/column-block-plugin/26828/5 "2023-02-15T13:42:04Z")

</div>

Here is a little hint to make it easier to read the content file:

By default, Kirby writes values (json) of blocks unstyled in the content file. (e.g. default.txt):

```auto
Columns: [{"attrs":[],"columns":[{"blocks":[{"content":{"text":"<p>My text on the left<\/p>"},"id":"1f1f2dc2-3d96-45bb-9b2a-0c6f2e2c095b","isHidden":false,"type":"text"}],"id":"7cb65234-fd09-4a57-b702-23ac75f889e3","width":"1\/2"},{"blocks":[{"content":{"text":"<p>My text on the right<\/p>"},"id":"e9f0623a-3ed0-4e43-8f39-385114173b5b","isHidden":false,"type":"text"}],"id":"cf2d6981-e860-432b-9ef6-9c903fcef5e9","width":"1\/2"}],"id":"fdae3d59-a3aa-40b5-8e0d-32f06c844d73"}]

```

By adding the `pretty: true` to the blueprint like this:

```auto
fields:
  main:
    type: blocks
    fieldsets:
      - text
      columns:
        extends: blocks/columns
        fields:
          layout:
            > pretty: true
            layouts:
              - "1/1"
              - "1/2, 1/2"
              - "1/4, 1/4, 1/4, 1/4"

```

_(please remove the \> before the `pretty: true`)_

you getting a nice readable result:

```auto
Columns:

[
    {
        "attrs": [],
        "columns": [
            {
                "blocks": [
                    {
                        "content": {
                            "text": "<p>My text on the left</p>"
                        },
                        "id": "1f1f2dc2-3d96-45bb-9b2a-0c6f2e2c095b",
                        "isHidden": false,
                        "type": "text"
                    }
                ],
                "id": "7cb65234-fd09-4a57-b702-23ac75f889e3",
                "width": "1/2"
            },
            {
                "blocks": [
                    {
                        "content": {
                            "text": "<p>My text on the right</p>"
                        },
                        "id": "e9f0623a-3ed0-4e43-8f39-385114173b5b",
                        "isHidden": false,
                        "type": "text"
                    }
                ],
                "id": "cf2d6981-e860-432b-9ef6-9c903fcef5e9",
                "width": "1/2"
            }
        ],
        "id": "fdae3d59-a3aa-40b5-8e0d-32f06c844d73"
    }
]

```

This works btw. in every block field.