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. microman/kirby-section-block

AbandonedArchivedKirby-plugin

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

Block with a section wrapper and column blocks.

1.0.0-beta(3y ago)129MITJavaScript

Since Mar 5Pushed 3y ago2 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 1mo 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 10% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity11

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity30

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

1160d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/2ce34d22100c42ac040481da5ed0d1dc1a858e775500bb290bc8ec956c66bab0?d=identicon)[microman](/maintainers/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.5k535.5k350](/packages/getkirby-cms)[distantnative/retour-for-kirby

Manage redirects and track 404s right from the Kirby CMS Panel

14689.4k1](/packages/distantnative-retour-for-kirby)[arnoson/kirby-vite

Vite helper for Kirby CMS

9759.2k3](/packages/arnoson-kirby-vite)[getkirby/staticache

Static site performance on demand

9615.4k](/packages/getkirby-staticache)[fabianmichael/kirby-meta

Your all-in-one powerhouse for any SEO and metadata needs imaginable.

6910.7k1](/packages/fabianmichael-kirby-meta)[thathoff/kirby-oauth

Kirby OAuth 2 Plugin

3823.9k](/packages/thathoff-kirby-oauth)

PHPackages © 2026

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