Enable preview images for layout field

Author: SebastianEberlein-JUNO

composer.json

@@ -3,7 +3,7 @@
   "description": "Kirby Visual Block Selector",
   "license": "MIT",
   "type": "kirby-plugin",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "authors": [
     {
       "name": "JUNO",

index.php

@@ -8,13 +8,16 @@
 	throw new Exception('The visual block selector plugin requires Kirby 5');
 }
 
-// Auto-load the custom BlocksField class
+// Auto-load custom field classes
 load([
+	'JunoHamburg\VisualBlockSelector\BlocksFieldPreviewTrait' => __DIR__ . '/src/BlocksFieldPreviewTrait.php',
 	'JunoHamburg\VisualBlockSelector\BlocksField' => __DIR__ . '/src/BlocksField.php',
+	'JunoHamburg\VisualBlockSelector\LayoutField' => __DIR__ . '/src/LayoutField.php',
 ]);
 
 Kirby::plugin('junohamburg/visual-block-selector', [
 	'fields' => [
-		'blocks' => 'JunoHamburg\VisualBlockSelector\BlocksField'
+		'blocks' => 'JunoHamburg\VisualBlockSelector\BlocksField',
+		'layout' => 'JunoHamburg\VisualBlockSelector\LayoutField',
 	],
 ]);

src/BlocksField.php

@@ -2,7 +2,6 @@
 
 namespace JunoHamburg\VisualBlockSelector;
 
-use Kirby\Filesystem\Dir;
 use Kirby\Form\Field\BlocksField as KirbyBlocksField;
 
 /**
@@ -11,45 +10,12 @@
  */
 class BlocksField extends KirbyBlocksField
 {
-	/**
-	 * Collects all block preview images
-	 * in the assets directory
-	 *
-	 * @return array<string, string>
-	 */
-	protected function previewImages(): array
-	{
-		$kirby    = $this->kirby();
-		$previews = [];
-		$dir      = 'block-previews';
-		$path     = $kirby->root('assets') . '/' . $dir;
-		$images   = Dir::files($path);
-
-		$relativePath = str_replace($kirby->root('index') . '/', '', $kirby->root('assets'));
-
-		foreach ($images as $image) {
-			$asset = asset($relativePath . '/' . $dir . '/' . $image);
-			$previews[$asset->name()] = $asset->url();
-		}
+	use BlocksFieldPreviewTrait;
 
-		return $previews;
-	}
-
-	/**
-	 * Adds the preview images to the fieldsets
-	 * if they exist
-	 */
 	public function props(): array
 	{
-		$props          = parent::props();
-		$previewsImages = $this->previewImages();
-
-        return [
-			...$props,
-			'fieldsets' => array_map(fn (array $fieldset) => [
-				...$fieldset,
-				'previewImage' => $previewsImages[$fieldset['type']] ?? null
-			], $props['fieldsets'])
-		];
+		$props = parent::props();
+		$props['fieldsets'] = $this->addPreviewImagesToFieldsets($props['fieldsets']);
+		return $props;
 	}
 }

src/BlocksFieldPreviewTrait.php

@@ -0,0 +1,52 @@
+<?php
+
+namespace JunoHamburg\VisualBlockSelector;
+
+use Kirby\Filesystem\Dir;
+
+/**
+ * Trait that adds preview images to block fieldsets
+ */
+trait BlocksFieldPreviewTrait
+{
+	/**
+	 * Collects all block preview images
+	 * in the assets directory
+	 *
+	 * @return array<string, string>
+	 */
+	protected function previewImages(): array
+	{
+		$kirby    = $this->kirby();
+		$previews = [];
+		$dir      = 'block-previews';
+		$path     = $kirby->root('assets') . '/' . $dir;
+		
+		if (!is_dir($path)) {
+			return [];
+		}
+		
+		$images   = Dir::files($path);
+		$relativePath = str_replace($kirby->root('index') . '/', '', $kirby->root('assets'));
+		
+		foreach ($images as $image) {
+			$asset = asset($relativePath . '/' . $dir . '/' . $image);
+			$previews[$asset->name()] = $asset->url();
+		}
+		
+		return $previews;
+	}
+
+	/**
+	 * Adds the preview images to the fieldsets
+	 */
+	protected function addPreviewImagesToFieldsets(array $fieldsets): array
+	{
+		$previewImages = $this->previewImages();
+		
+		return array_map(fn (array $fieldset) => [
+			...$fieldset,
+			'previewImage' => $previewImages[$fieldset['type']] ?? null
+		], $fieldsets);
+	}
+}

src/LayoutField.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace JunoHamburg\VisualBlockSelector;
+
+use Kirby\Form\Field\LayoutField as KirbyLayoutField;
+
+/**
+ * Custom LayoutField that adds preview images to fieldsets
+ * within layout columns
+ */
+class LayoutField extends KirbyLayoutField
+{
+	use BlocksFieldPreviewTrait;
+
+	public function props(): array
+	{
+		$props = parent::props();
+		$props['fieldsets'] = $this->addPreviewImagesToFieldsets($props['fieldsets']);
+		return $props;
+	}
+}