Column Block Plugin

Use columns in block fields based on the layout field! :hugs:

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

@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.
  • 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?
3 Likes

Great Plugin, thanks a lot!

A link to the Repository might be helpfull to others too :wink:

1 Like

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 from the Kirby forum” – but that post is page-not-found.)

      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

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 and blocks.
Let’s say, you want a default template with a block field called main:

site/blueprint/default.xml

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:

main:
  type: blocks
  fieldsets:
    - text
    - column

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

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

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

By default the example above delivers you following output:

<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:

.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

<?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

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.

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):

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:

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:

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.