K3 Page Builder implementation

The CMS Questions
1

I tried to test the K3 Page Builder plugin written by @timoetting in a plainkit installation but probably miss something.

This is what I did:

  • I have downloaded the zipped plugin from Github and copy past all files/folders in /site/plugins/kirby-builder
  • I have copied/pasted the /assets and /snippets folders present in the /sandbox folder of the plugin
  • I have pasted the blueprint example code given by Tim in the documentation, in the default page blueprint.

See the screenshot …

Screenshot%20from%202019-01-18%2014-55-19
Screenshot%20from%202019-01-18%2014-55-193200×1800 503 KB

But I get the message “This page has no blueprint setup yet” in the panel when I create/open a default page.

I’m often bad at following a documentation, sorry Tim :-/
Any idea what I’m missing or do someone has a real example code/implementation to show me?

2

You’re missing a fields: definition under the title if I’m not mistaken.

title: Default Page
fields:
  mybuilder:
    label: Page Builder
    type: builder
3

hey @gillesvauvarin,

the builder plugin works as a custom field. Therefore it has to be place inside the fields section of the blueprint:

title: Default Page
preset: page
fields:
  text:
    label: Text
    type: textarea
    size: large
  mybuilder:
    label: Page Builder
    type: builder
    columns: 1 # Optional. If set to 2 or more, the builder blocks will be places in a grid.
    max: 10 # Optional. Limits the number of builder blocks that can be added.
    fieldsets:
      quote: # This is a field set. It contains a group of kirby fields. The user can select from these sets to build the content.
        label: Quote
        preview: # Optional. If defined, a preview of the block can be rendered by the specified snippet from within the snippets folder
          snippet: blocks/quote
          css: /assets/css/blocks/quote.css
        fields: 
          text:
            label: Quote Text
            type: textarea
          citation:
            label: Citation
            type: text
      bodytext:
        label: Text
        tabs: # Optional. Tabs can be used to group the fields of a field set. In this example, we use one tab to contain the content related fields and one for styling settings. Is makes no difference for the contentn handling in the template if there are tabs or not.
          content:
            label: Content
            icon: edit # Optional. This icon appears next to the tab. The icon name can be chosen from the Kirby's icon set getkirby.com/docs/reference/ui/icon
            fields:
              text:
                label: text
                type: textarea
          style:
            label: Style
            icon: cog
            fields:
              fontfamily:
                label: Font
                type: select
                options:
                  helvetica: Helvetica
                  comicsans: Comic Sans
              fontsize:
                label: Font Size
                type: number
      events:
        label: Events
        preview:
          snippet: blocks/events
          css: /assets/css/blocks/events.css
        fields:
          eventlist: # The Builder Field can even be nested!
            type: builder
            label: Event List
            columns: 2
            fieldsets:
              event:
                label: Event
                fields:
                  title:
                    label: Title
                    type: text
                  text:
                    label: Description
                    type: textarea
                  date:
                    label: Date
                    type: date

Here I also left away the calltoaction part from the ReadMe. This does not yet work with the sandbox content.

I will make this a bit more clear in the ReadMe.

Let me hear if it works :+1:

4

It works much better if the builder is placed in a fields section :wink:

Thank you both very much for your prompt help :slight_smile:

5

@timoetting There is a mistake in the docs too I think…

<?php foreach($page->builder()->toBuilderBlocks() as $block): ?>
  <?php snippet('blocks' . $block->_key_(), array('data' => $block)) ?>
<?php endforeach ?>

Should be…

<?php foreach($page->builder()->toBuilderBlocks() as $block): ?>
  <?php snippet('blocks/' . $block->_key(), array('data' => $block)) ?>
<?php endforeach ?>
1 Like
6

@jimbobrjames You are right. The ReadMe has been updated.

1 Like
7

Hi all,

do you have a working example for this line:

#calltoaction: blocks/calltoaction # the Builder Field blueprint can be rather complex. It is therefore recommended to organize your fieldsets in single files. This example would take the content of the file /site/blueprints/blocks/calltoaction.yml and use it for the fieldset “calltoaction”.

Can’t get it running with an extra yml file.

testtext: blocks/testtext

bp:

testtext:
  name: texttext
  label: texttext2
    fields:
      text:
        label: Quote Text
        type: textarea
      citation:
        label: Citation
        type: text

Cannot read property ‘key’ of undefined

Thx!

8

The block should look like this:

  label: texttext2
    fields:
      text:
        label: Quote Text
        type: textarea
      citation:
        label: Citation
        type: text

(There is no name property and you can’t use the fieldset key).

Looks like you have to then call it in the blueprint like this:

testtext:
  extends: blocks/testtext
9

Hi,

without the name property you have no label for the selection box.
screen

And with “extends”: same result: Cannot read property ‘key’ of undefined