Error when attempting to preview builder used in site.yml

[piperhaywood]

Kirby 3.2.3
Builder: 2.0.13

If you set up a builder field within site.yml and then attempt to view a fieldset preview, the panel throws an error message (also in the console) Cannot read property 'replace' of undefined.

The builder I tested is displayed below:

type: builder
label: Homepage
fieldsets:
  homeBlock:
    name: Block
    preview:
      snippet: block
    fields:
      heading:
        type: text
        label: Heading

And the preview snippet is as displayed below:

<section>
  <?= $data->heading() ?>
</section>

When I moved the builder to a different blueprint (home.yml, specifically), everything works as expected.

According to the console, the error appears to be related to this specific line in /kirby-builder/src/components/BuilderBlock.vue:

https://github.com/TimOetting/kirby-builder/blob/master/src/components/BuilderBlock.vue#L194

Perhaps because there is no page ID associated with the site object? I’m not sure!

[luxlogica]

Can confirm it is still happening on clean, plainkit installation of Kirby 3.3 - no other plugins or anything else installed. To test it:

composer create-project getkirby/plainkit ~/builder-test
cd ~/builder-test
composer require timoetting/kirby-builder

Then, replace your site.yml blueprint with the following - it just uses a copy+paste of the example in the docs here:

title: Site
sections:
  pages_area:
    type: pages
    headline: Site Pages
    status: all
    layout: cards
    size: small
  test:
    type: fields
    fields:
      # inside the fields section of your blueprint:
      mybuilder:
        label: Page Builder
        type: builder
        # Optional. If set to 2 or more, the builder blocks will be placed in a grid.
        columns: 1
        # Optional. Limits the number of builder blocks that can be added.
        max: 10
        fieldsets:
          # This is a field set. It contains a group of kirby fields.
          # The user can select from these sets to build the content.
          quote:
            # The name option is used as a label for the buttons to add
            # new fieldsets. It is also used as a label in the header of
            # the fieldset, if the label option is not set explicitly (see next line).
            name: Quote
            # Optional. The label option can be used to override the header text
            # of the fieldset. The 'mustache' syntax can be used to include the
            # value of any field of the fieldset.
            label: Quote by {{citation}}
            # Optional. If defined, a preview of the fieldset can be rendered
            # by the specified snippet from within the snippets folder.
            preview:
              snippet: blocks/quote
              css: /assets/css/blocks/quote.css
            # Optional. If the value "preview" is set, the block will show the preview
            # when the page is loaded in the panel. If the value is a tab name, the
            # respective tab is preselected when the page is loaded. Newly created blocks ignore
            # this value and have the edit mode or the first tab preselected.
            defaultView: preview
            fields:
              text:
                label: Quote Text
                type: textarea
              citation:
                label: Citation
                type: text
          bodytext:
            name: Text
            # 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.
            # It makes no difference for the content handling in the template if there are tabs or not.
            tabs:
              content:
                label: Content
                # 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
                icon: edit
                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:
            name: Events
            preview:
              snippet: blocks/events
              css: /assets/css/blocks/events.css
            fields:
              # The Builder Field can even be nested!
              eventlist:
                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

Last of all, create a 'quote' block, save it, and save the page. Then, click on the preview tab. The field errors out, permanently - ie., there is no way to recover from it, and get the field to display again. The only way to recover seems to be by removing the field from the blueprint.

[benwest]

Fixed in #161

[TimOetting]

Closing this issue because this plugin will no longer be maintained, as its main functionality can be replaced by Kirby's built-in Blocks Field and Layout Field.