PHPackages                             microman/kirby-section-block - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. microman/kirby-section-block

AbandonedArchivedKirby-plugin[Templating & Views](/categories/templating)

microman/kirby-section-block
============================

Block with a section wrapper and column blocks.

1.0.0-beta(3y ago)119MITJavaScript

Since Mar 5Pushed 3y ago1 watchersCompare

[ Source](https://github.com/youngcut/kirby-section-block)[ Packagist](https://packagist.org/packages/microman/kirby-section-block)[ Fund](https://www.paypal.com/donate/?hosted_button_id=5W5RBKYXBDABN)[ RSS](/packages/microman-kirby-section-block/feed)WikiDiscussions main Synced 2d ago

READMEChangelog (1)Dependencies (1)Versions (2)Used By (0)

Kirby Section Block (Beta)
==========================

[](#kirby-section-block-beta)

Overview
--------

[](#overview)

Section wrapper block that contains column blocks.

Due to the success of [Column Blocks](https://github.com/youngcut/kirby-column-blocks) and [Grid block](https://github.com/youngcut/kirby-grid-block), i've been created an improved version based on your suggestions.

[![Screenshot](./.github/screenshot.png)](./.github/screenshot.png)

Features
--------

[](#features)

⭐️ Easy setup section with custom fields in `blueprints/fields/section.yml`

⭐️ Easy setup columns with custom fields in `blueprints/fields/columns.yml`

⭐️ Define a collection of available columns types: `blueprints/columns/*.yml`.

⭐️ Setup styling per each columns type. Even with placeholders for the fields. -> Get deeper into wysiwyg.

> **This Plugin is currently on beta: Use at your own risk.**
>
> Contributors wanted! Please help me to improve this thing by posting your feedbacks or doing pull requests.
>
> **Bugs**
>
> - Lost focus on input of the content block
>
> **Missing Feature**
>
> - Paste
> - Parsley integration
> - Individual fielsset per column type
> - Change type button on main options bar
> - Compatibility with tabs

Installation
------------

[](#installation)

**Manually**

[Download](https://github.com/youngcut/kirby-section-block) and copy the plugin into your plugin folder: `/site/plugins/`

**With Composer**

`composer require microman/kirby-section-block:^1.0-beta`

How to use
----------

[](#how-to-use)

Just follow the [Kirby Blocks instructions](https://getkirby.com/docs/reference/panel/fields/blocks).

Set up your blueprint:

```
my_block:
    type: blocks
    fieldsets:
        - section
        ... even more if you like
```

Set up your output:

```

```

Example
-------

[](#example)

Let's make an example (like in the screenshot):

### Set up the section block

[](#set-up-the-section-block)

Let's say you want to give your editors the ability to set the maximum width of your section.

`site/blueprints/fields/sections.yml` (Keep in mind: `fields` folder not `blocks`!)

```
fields:
  max_width:
    type: number
    after: px
```

*The section block has not possibilities to define the styling for the backend.*

### Set up the column block

[](#set-up-the-column-block)

Now, we set the background field. We can use the given value, later for our backend styling. And also we set a few fielsets for our content blocks.

`site/blueprints/fields/columns.yml`

```
fields:
  background:
    type: colors
    alpha: true
  content:
    fieldsets:
      - heading
      - text
```

*This setup needs a color field. Check [this](https://getkirby.com/plugins/hananils/colors) out...*

### Set up column types

[](#set-up-column-types)

You're free how much types you want to offer. But set at least one or delete the `blueprints/columns` folder for the 3 defaults. Here we use *full width* for instance and set the styling for the backend. The background value comes from our color field we defined before.

`site/blueprints/columns/xxx.yml`

```
title: Full Width
icon: col_1_1
width: "1/1"
style:
    background: background
    border: 1px solid black
```

Customize the output
--------------------

[](#customize-the-output)

The best way to do this, is to copy `snippets/blocks/section` from the plugin folder to your site folder. You'il easely understanding, whats going on there.

Let me just say something about the `$column->column_width()` method (with *1/2* as example):

- Without any parameter, you'il get the original value like this: 1/2
- Set a number as parameter, the width will be divided by this: `column_width(100)` -> *50* `column_width(12)` -> *6*
- Any other character is a separator: `column_width('_')` -> *1\_2*

Inherit the section block
-------------------------

[](#inherit-the-section-block)

I general you set up like above and you're good to go. But sometimes you need the section block anywhere else with different settings. Let me show you how to do this.

### Customize the section

[](#customize-the-section)

Let say, in one place you need to add a new field for you section. Let's do it:

```
my_custom_block:
  type: blocks
  fieldsets:
    section:
      extends: blocks/section
      fields:
        new_section_field:
          type: text
```

### Customize the column types

[](#customize-the-column-types)

```
my_custom_block:
  type: blocks
  fieldsets:
    section:
      extends: blocks/section
      fields:
          columns:
            options:
              custom_type1:
                title: Half and Red Background
                icon: col_1_2
                width: "1/2"
                style:
                    background: red
              custom_type1:
                title: Half and Blue Background
                icon: col_1_2
                width: "1/2"
                style:
                    background: blue
```

### Customize column block

[](#customize-column-block)

In this example we like to add a new field to the column and overwrite the fieldsets.

```
my_custom_block:
  type: blocks
  fieldsets:
    section:
      extends: blocks/section
      fields:
          columns:
            fieldsets:
              column:
                extends: blocks/column
                fields:
                  new_column_field:
                    type: text
                  content:
                    fieldsets:
                      - video
                      - image
```

Phew! 🥵 A lot of indents. And no, it's no possible to set different column fieldsets for a specific column type. But if you like to implement it, feel free and make a [pull request](https://github.com/youngcut/kirby-section-block/pulls).

**Have fun with it!**

License
-------

[](#license)

MIT

> Show me your appreciation and [buy me a ☕️](https://www.paypal.com/donate/?hosted_button_id=5W5RBKYXBDABN)

###  Health Score

19

—

LowBetter than 9% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity11

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity31

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

1217d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/3966747?v=4)[microman](/maintainers/microman)[@microman](https://github.com/microman)

---

Top Contributors

[![plain-solutions-gmbh](https://avatars.githubusercontent.com/u/4754476?v=4)](https://github.com/plain-solutions-gmbh "plain-solutions-gmbh (13 commits)")

### Embed Badge

![Health badge](/badges/microman-kirby-section-block/health.svg)

```
[![Health](https://phpackages.com/badges/microman-kirby-section-block/health.svg)](https://phpackages.com/packages/microman-kirby-section-block)
```

###  Alternatives

[getkirby/cms

The Kirby core

1.5k584.8k474](/packages/getkirby-cms)[medienbaecker/kirby-modules

Easily add modules to your pages

895.5k1](/packages/medienbaecker-kirby-modules)[fabianmichael/kirby-template-attributes

Better HTML attribute handling for your snippets and templates.

238.4k1](/packages/fabianmichael-kirby-template-attributes)[wearejust/kirby-twig

Twig templating support for Kirby CMS

2135.4k](/packages/wearejust-kirby-twig)[leitsch/kirby-blade

Enable Laravel Blade Template Engine for Kirby 4 and Kirby 5

2110.6k](/packages/leitsch-kirby-blade)[johannschopplich/kirby-content-translator

DeepL & AI-powered content translation for Kirby CMS

2010.8k](/packages/johannschopplich-kirby-content-translator)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)