Working on layout preview

Hello everyone,

I am working on a project where I use the layout field and his blocks (kirby 3.5)
I created my custom blocks, created custom components to have a great preview as it was very well explained here:

Good.

I noticed that the layout field allows you to add settings fields.
That’s good, I need it to add a user-definable background color to each new line in the “grid”.
Once again, thanks the doc:

However, I would now like to manage a live preview of these settings. And there, I looked on the doc and on the forum, but I did not find anything.

Do I need to create my own custom layout field, extended from the original layout?
Isn’t it easier to simply add a method or a template to an existing component?

If anyone has a tip, that would be really cool.
Good day to all.

I’m trying to create my own custom layout field extending the core one.

My index php :

Kirby::plugin('ben-bach/preview-custom-layout', [
  'fields' => [
    'layoutcustom' => [
        'extends' => 'layout'
    ]
  ]
]);

My index.js :

    panel.plugin('ben-bach/preview-custom-layout', {
      fields: {
        layoutcustom: {
          extends: 'k-layout-field'
        }
      }
    });

And i get this error :

Component definition Kirby\Form\Field\LayoutField does not exist in file: /var/www/html/XXX/kirby/src/Toolkit/Component.php line: 230

That’s works with most of the components in

But not with the layout field.

An idea ?
Thanks so much.

Would love to add some customisation to the preview, too. Are you any further on this one?

Sorry for bumping this old topic, but I’ve been searching for a long time so I thought I share my approach. In my case I wanted to reflect the selected background color for each layout in the layout’s toolbar.

panel.plugin('my/plugin', {
  components: {
    'k-layout-field': {
      extends: 'k-layout-field',
      watch: {
        value() {
          // Update the color as soon as the layout settings are changing.
          this.setColor()
        },
      },

      mounted() {
        // Also set the color on start.
        this.setColor()
      },

      methods: {
        setColor() {
          Array.from(this.$el.querySelectorAll('.k-layout')).forEach(
            (layout, index) => {
              // Get the layout settings (attrs) for each layout.
              const layoutAttrs = this.value[index].attrs

              let { color } = layoutAttrs
              // This is only necessary because the color field I'm using might
              // store the color as an array of colors.
              color = Array.isArray(color) ? color[0] : color

              // Set a css variable on the layout so we can style it
              // individually.
              if (color) {
                layout.style.setProperty('--layout-attrs-color', color)
              } else {
                layout.style.removeProperty('--layout-attrs-color')
              }
            }
          )
        },
      },
    },
  },
})

.k-layout-toolbar {
  background-color: var(--layout-attrs-color);
}