vue-wswg-editor 0.0.9 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "vue-wswg-editor",
-   "version": "0.0.9",
+   "version": "0.0.10",
    "type": "module",
    "main": "src/index.ts",
    "module": "src/index.ts",

package/src/components/AddBlockItem/AddBlockItem.vue

@@ -2,7 +2,7 @@
    <div
       :data-block-type="block.type"
       draggable="true"
-      class="cursor-pointer rounded-md border bg-zinc-50 p-3 text-sm text-zinc-900 hover:border-zinc-400 hover:text-zinc-900"
+      class="cursor-pointer rounded-md border border-gray-300 bg-zinc-50 p-2 text-sm text-zinc-900 hover:border-zinc-400 hover:text-zinc-900"
       @dragstart="(event) => handleDragStart(event, block)"
    >
       <!-- thumbnail image -->
@@ -14,15 +14,15 @@
             @error="thumbnailError = true"
          />
       </div>
-      <!-- icon -->
-      <div v-else-if="block.icon" class="mb-2 flex h-28 w-full items-center justify-center rounded-md bg-zinc-200">
-         <span>Icon: {{ block.icon }}</span>
+      <!-- emoji -->
+      <div v-else-if="block.emoji" class="mb-2 flex h-28 w-full items-center justify-center rounded-md bg-zinc-200">
+         <span class="text-2xl">{{ block.emoji }}</span>
       </div>
       <!-- placeholder -->
       <div v-else class="mb-2 flex h-28 w-full items-center justify-center rounded-md bg-zinc-200">
          <CubeTransparentIcon class="size-6 text-zinc-400" />
       </div>
-      <p class="font-bold">{{ block.label }}</p>
+      <p class="text-sm">{{ block.label }}</p>
    </div>
 </template>
 

package/src/components/BlockBrowser/BlockBrowser.vue

@@ -1,7 +1,12 @@
 <template>
    <div class="block-browser">
-      <div class="block-browser-header border-b bg-white px-5 py-3">
-         <input v-model="blockSearch" type="text" placeholder="Search blocks" class="form-control" />
+      <div class="block-browser-header border-b border-gray-300 bg-white px-5 py-3">
+         <input
+            v-model="blockSearch"
+            type="text"
+            placeholder="Search blocks"
+            class="w-full rounded-md border border-gray-300 p-2"
+         />
       </div>
       <div v-if="!blockCount" class="p-5 text-center text-sm text-zinc-500">
          <p>Create your first block to get started.</p>
@@ -15,7 +20,7 @@
          </p>
       </div>
       <div v-else-if="!filteredBlocks.length" class="p-5 text-center text-sm text-zinc-500">No blocks found</div>
-      <div v-else id="available-blocks-list" class="grid grid-cols-1 gap-3 p-5">
+      <div v-else id="available-blocks-list" class="available-blocks-grid">
          <AddBlockItem v-for="block in filteredBlocks" :key="block.type" :block="block" />
       </div>
    </div>
@@ -67,3 +72,28 @@ onMounted(() => {
    initSortable();
 });
 </script>
+
+<style scoped>
+.block-browser {
+   container-type: inline-size;
+}
+
+.available-blocks-grid {
+   display: grid;
+   grid-template-columns: 1fr;
+   gap: 0.75rem;
+   padding: 1.25rem;
+}
+
+@container (min-width: 360px) {
+   .available-blocks-grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+   }
+}
+
+@container (min-width: 560px) {
+   .available-blocks-grid {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+   }
+}
+</style>

package/src/components/BlockEditorFieldNode/BlockEditorFieldNode.vue

@@ -16,7 +16,11 @@
             <span>Clear</span>
          </div>
          <!-- Description -->
-         <div v-if="fieldConfig.description" :title="fieldConfig.description" class="cursor-default">
+         <div
+            v-if="fieldConfig.description && fieldConfig.type !== 'info'"
+            :title="fieldConfig.description"
+            class="cursor-default"
+         >
             <InformationCircleIcon class="size-4 text-zinc-500" />
          </div>
       </div>
@@ -75,14 +79,14 @@
          <label
             v-for="option in fieldConfig.options"
             :key="`${fieldName}_${option.value}`"
-            class="flex cursor-pointer items-center gap-2 rounded-md border p-2"
+            class="flex cursor-pointer items-center gap-2 rounded-md border border-gray-300 p-2"
          >
             <input
                :id="`${fieldName}_${option.value}`"
                v-model="checkboxValues"
                :value="option.value"
                type="checkbox"
-               class="form-control"
+               class="form-control appearance-none"
                :disabled="!editable"
             />
             <span class="text-sm">{{ option.label }}</span>
@@ -91,39 +95,37 @@
 
       <!-- Radio -->
       <div v-else-if="fieldConfig.type === 'radio'" class="form-control flex flex-col gap-2">
-         <label
-            v-for="option in fieldConfig.options"
-            :key="`${fieldName}_${option.value}`"
-            class="flex cursor-pointer items-center gap-2 rounded-md border p-2"
-         >
-            <input
-               :id="`${fieldName}_${option.value}`"
-               v-model="fieldValue"
-               :value="option.value"
-               type="radio"
-               class="form-control"
-               :disabled="!editable"
-            />
-            <span class="text-sm">{{ option.label }}</span>
-         </label>
+         <div v-for="option in fieldConfig.options" :key="`${fieldName}_${option.value}`">
+            <label
+               :for="`${fieldName}_${option.value}`"
+               class="has-checked:border-blue-600 has-checked:ring-1 has-checked:ring-blue-600 flex cursor-pointer items-center justify-between gap-4 rounded border border-gray-300 bg-white p-3 text-sm font-medium shadow-sm transition-colors hover:bg-gray-50"
+            >
+               <p class="text-gray-700">{{ option.label }}</p>
+
+               <input
+                  :id="`${fieldName}_${option.value}`"
+                  v-model="fieldValue"
+                  type="radio"
+                  :name="fieldName"
+                  class="sr-only"
+                  :value="option.value"
+                  :checked="fieldValue === option.value"
+               />
+            </label>
+         </div>
       </div>
 
       <!-- Boolean toggle -->
       <template v-else-if="fieldConfig.type === 'boolean'">
          <label
-            tabindex="0"
-            class="group inline-flex h-7 w-14 cursor-pointer items-center gap-2 rounded-full p-1 transition-all duration-200"
-            :class="!!fieldValue ? 'bg-emerald-700 hover:bg-emerald-800' : 'bg-zinc-200 hover:bg-zinc-300'"
+            :for="fieldName"
+            class="has-checked:bg-emerald-700 w-13 relative block h-7 cursor-pointer rounded-full bg-gray-300 transition-colors [-webkit-tap-highlight-color:transparent] hover:bg-gray-400/75"
          >
-            <input
-               :id="fieldName"
-               v-model="fieldValue"
-               tabindex="-1"
-               type="checkbox"
-               class="ml-0 size-5 cursor-pointer rounded-full !border-none !bg-white !outline-none !ring-0 !ring-offset-0 transition-all duration-200 checked:ml-7"
-               :disabled="!editable"
-            />
-            <span class="hidden text-sm">{{ fieldConfig.label }}</span>
+            <input :id="fieldName" v-model="fieldValue" type="checkbox" class="peer sr-only" :disabled="!editable" />
+
+            <span
+               class="absolute inset-y-0 start-0 m-1 size-5 rounded-full bg-white transition-[inset-inline-start] peer-checked:start-6"
+            ></span>
          </label>
       </template>
 
@@ -142,6 +144,14 @@
          <BlockMarginNode v-model="fieldValue" :fieldConfig="fieldConfig" :fieldName="fieldName" :editable="editable" />
       </div>
 
+      <!-- Info -->
+      <template v-else-if="fieldConfig.type === 'info'">
+         <div class="font-base mt-1 rounded-md bg-zinc-100 p-2 text-sm text-zinc-600 md:p-3">
+            <InformationCircleIcon class="float-left mr-1 mt-0.5 inline-block size-4" />
+            {{ fieldConfig.description }}
+         </div>
+      </template>
+
       <!-- Default fallback -->
       <template v-else>
          <input v-model="textFieldValue" type="text" class="form-control" :disabled="!editable" />

package/src/components/BlockEditorFields/BlockEditorFields.vue

@@ -1,7 +1,7 @@
 <template>
    <div class="section-editor-fields">
       <!-- Field group tabs-->
-      <div v-if="editorFieldGroups.length" class="field-group-tabs flex gap-2 border-b px-5 pt-3">
+      <div v-if="editorFieldGroups.length" class="field-group-tabs flex gap-2 border-b border-gray-300 px-5 pt-3">
          <button
             v-for="fieldGroupName in editorFieldGroups"
             :key="`fg_${fieldGroupName}`"
@@ -27,7 +27,7 @@
 
       <!-- No fields -->
       <div v-else class="p-5">
-         <div class="rounded-lg bg-zinc-100 px-4 py-3 text-sm font-bold text-zinc-500">
+         <div class="rounded-lg bg-zinc-100 px-4 py-3 text-sm font-medium text-zinc-600">
             <p>
                {{ isLayoutBlock ? "No settings available for this layout." : "No options available for this block." }}
             </p>
@@ -79,13 +79,13 @@ const editorFieldGroups = computed(() => {
 
 watch(editorFieldGroups, () => {
    if (editorFieldGroups.value.length > 0) {
-      activeFieldGroup.value = editorFieldGroups.value[0];
+      activeFieldGroup.value = editorFieldGroups.value[0] || "";
    }
 });
 
 onBeforeMount(() => {
    if (editorFieldGroups.value.length > 0) {
-      activeFieldGroup.value = editorFieldGroups.value[0];
+      activeFieldGroup.value = editorFieldGroups.value[0] || "";
    }
 });
 </script>

package/src/components/BlockMarginFieldNode/BlockMarginNode.vue

@@ -1,7 +1,9 @@
 <template>
    <div class="margin-field flex gap-2" :class="linkedMargin ? '' : 'items-start'">
       <div v-if="linkedMargin" class="field-wrapper relative flex-1" title="Top & Bottom Margin">
-         <span class="pointer-events-none absolute left-0 top-0 inline-flex h-full items-center border-r px-3 text-xs">
+         <span
+            class="pointer-events-none absolute left-0 top-0 inline-flex h-full items-center border-r border-gray-300 px-3 text-xs"
+         >
             <ArrowsUpDownIcon class="size-3" />
          </span>
          <select
@@ -21,7 +23,7 @@
          <div class="flex flex-1 gap-2">
             <div class="field-wrapper relative flex-1" title="Top Margin">
                <span
-                  class="pointer-events-none absolute left-0 top-0 inline-flex h-full items-center justify-center border-r px-3 text-xs"
+                  class="pointer-events-none absolute left-0 top-0 inline-flex h-full items-center justify-center border-r border-gray-300 px-3 text-xs"
                   ><ArrowUpIcon class="size-3"
                /></span>
                <select
@@ -38,7 +40,7 @@
             </div>
             <div class="field-wrapper relative flex-1" title="Bottom Margin">
                <span
-                  class="pointer-events-none absolute left-0 top-0 inline-flex h-full items-center justify-center border-r px-3 text-xs"
+                  class="pointer-events-none absolute left-0 top-0 inline-flex h-full items-center justify-center border-r border-gray-300 px-3 text-xs"
                >
                   <ArrowDownIcon class="size-3" />
                </span>
@@ -59,7 +61,7 @@
       <button
          v-if="editable"
          title="Link Margin (Top & Bottom)"
-         class="inline-flex size-10 shrink-0 items-center justify-center rounded-md border p-2 text-center"
+         class="inline-flex size-10 shrink-0 items-center justify-center rounded-md border border-gray-300 p-2 text-center"
          :class="
             linkedMargin
                ? 'bg-blue-50 border-blue-200 hover:bg-blue-100'

package/src/components/BlockRepeaterFieldNode/BlockRepeaterNode.vue

@@ -18,7 +18,7 @@
          <div
             v-for="(item, index) in fieldValue"
             :key="`${fieldName}-item-${index}`"
-            class="repeater-item overflow-hidden rounded-lg border bg-white hover:border-zinc-300 hover:shadow-sm"
+            class="repeater-item overflow-hidden rounded-lg border border-gray-300 bg-white hover:border-zinc-300 hover:shadow-sm"
             :class="{ 'is-open': openRepeaterItems.includes(item.id) }"
          >
             <div class="repeater-item-header flex items-center gap-2 bg-zinc-50 p-3">
@@ -210,7 +210,9 @@ const canAddItem = computed(() => {
 
    &.is-open {
       .repeater-item-fields {
-         @apply p-3 h-auto border-t;
+         height: auto;
+         padding: 1rem;
+         border-top: 1px solid #e5e7eb;
       }
    }
 }

package/src/components/BrowserNavigation/BrowserNavigation.vue

@@ -1,7 +1,7 @@
 <template>
    <!-- URL bar -->
-   <div class="browser-navigation-bar border-b bg-zinc-600 py-3 !font-sans">
-      <div class="mx-auto flex max-w-5xl items-center justify-between px-5">
+   <div class="browser-navigation-bar">
+      <div class="flex items-center justify-between rounded-t-lg bg-zinc-600 px-5 py-4">
          <div class="flex w-full items-center gap-2 rounded-md bg-zinc-700 px-4 py-1.5 text-sm text-zinc-300">
             <span class="block flex-1 truncate">{{ url }}</span>
 

package/src/components/EmptyState/EmptyState.vue

@@ -23,7 +23,7 @@
       <template v-if="editable">
          <button
             v-if="!showAddBlockMenu"
-            class="mb-9 inline-flex items-center gap-1.5 rounded-md border bg-zinc-50 px-3 py-2 text-sm text-zinc-500 hover:border-zinc-400 hover:text-zinc-900 active:border-blue-600 active:bg-blue-50 active:text-blue-600"
+            class="mb-9 inline-flex items-center gap-1.5 rounded-md border border-gray-300 bg-zinc-50 px-3 py-2 text-sm text-zinc-500 hover:border-zinc-400 hover:text-zinc-900 active:border-blue-600 active:bg-blue-50 active:text-blue-600"
             @click="showAddBlockMenu = true"
          >
             Add a block to get started

package/src/components/PageBlockList/PageBlockList.vue

@@ -4,7 +4,7 @@
          <div
             v-for="block in pageBlocks"
             :key="block.id"
-            :class="{ 'hovered-block': hoveredBlockId === block.id }"
+            :class="{ 'bg-blue-100 text-blue-600': hoveredBlockId === block.id }"
             class="block-item -mx-2.5 flex cursor-pointer items-center gap-1 rounded-md p-2.5 text-sm text-neutral-900"
             @mouseenter="setHoveredBlockId(block.id)"
             @mouseleave="setHoveredBlockId(null)"
@@ -93,11 +93,3 @@ onMounted(() => {
    initSortable();
 });
 </script>
-
-<style scoped lang="scss">
-.block-item {
-   &.hovered-block {
-      @apply bg-blue-100 text-blue-600;
-   }
-}
-</style>

package/src/components/PageBuilderSidebar/PageBuilderSidebar.vue

@@ -1,11 +1,25 @@
 <template>
    <div id="page-builder-sidebar" class="page-builder-sidebar">
+      <!-- Toolbar -->
+      <PageBuilderToolbar
+         v-model:editorViewport="editorViewport"
+         v-model:showPageSettings="showPageSettings"
+         v-model:activeBlock="activeBlock"
+         class="z-12 sticky top-0 bg-white"
+         :hasPageSettings="hasPageSettings"
+      />
       <!-- Page settings -->
-      <PageSettings v-if="showPageSettings" v-model="pageData" :editable="editable" @close="showPageSettings = false" />
+      <PageSettings
+         v-if="showPageSettings"
+         v-model="pageData"
+         :editable="editable"
+         :settingsKey="settingsKey"
+         @close="showPageSettings = false"
+      />
       <!-- Active section-->
       <div v-else-if="activeBlock">
          <!-- back header -->
-         <div class="flex items-start justify-between border-b bg-white p-5">
+         <div class="flex items-start justify-between border-b border-gray-300 bg-white p-5">
             <div>
                <button
                   class="cursor-pointer text-sm text-zinc-500 hover:text-zinc-900 hover:underline"
@@ -18,7 +32,7 @@
             <!-- delete section button -->
             <button
                v-if="activeBlock && editable"
-               class="inline-flex size-7 cursor-pointer items-center justify-center rounded-md border bg-zinc-100 text-zinc-500 hover:border-red-200 hover:bg-red-100 hover:text-red-600"
+               class="inline-flex size-7 cursor-pointer items-center justify-center rounded-md border border-gray-300 bg-zinc-100 text-zinc-500 hover:border-red-200 hover:bg-red-100 hover:text-red-600"
                title="Delete block"
                @click="handleDeleteBlock"
             >
@@ -33,7 +47,7 @@
       </div>
       <!-- Add block menu -->
       <div v-else-if="showAddBlockMenu">
-         <div class="flex items-center justify-between border-b bg-white p-5">
+         <div class="flex items-center justify-between border-b border-gray-300 bg-white p-5">
             <div>
                <button
                   class="cursor-pointer text-sm text-zinc-500 hover:text-zinc-900 hover:underline"
@@ -49,11 +63,11 @@
       </div>
       <!-- No active block -->
       <div v-else>
-         <div class="flex items-center justify-between border-b bg-white p-5">
+         <div class="flex items-center justify-between border-b border-gray-300 bg-white p-5">
             <h4 class="text-lg font-bold">Blocks ({{ pageData?.[blocksKey]?.length }})</h4>
             <button
                v-if="editable"
-               class="inline-flex items-center gap-1.5 rounded-md border bg-zinc-50 px-3 py-2 text-xs text-zinc-500 hover:border-zinc-400 hover:text-zinc-900 active:border-blue-600 active:bg-blue-50 active:text-blue-600"
+               class="inline-flex items-center gap-1.5 rounded-md border border-gray-300 bg-zinc-50 px-3 py-2 text-xs text-zinc-500 hover:border-zinc-400 hover:text-zinc-900 active:border-blue-600 active:bg-blue-50 active:text-blue-600"
                title="Add block"
                @click="handleShowAddBlockMenu"
             >
@@ -84,24 +98,28 @@ import BlockEditorFields from "../BlockEditorFields/BlockEditorFields.vue";
 import PageBlockList from "../PageBlockList/PageBlockList.vue";
 import PageSettings from "../PageSettings/PageSettings.vue";
 import { TrashIcon, PlusIcon } from "@heroicons/vue/24/outline";
+import PageBuilderToolbar from "../PageBuilderToolbar/PageBuilderToolbar.vue";
 // Models
 const pageData = defineModel<any>();
 const activeBlock = defineModel<any>("activeBlock");
 const hoveredBlockId = defineModel<string | null>("hoveredBlockId");
 const showPageSettings = defineModel<boolean>("showPageSettings");
 const showAddBlockMenu = defineModel<boolean>("showAddBlockMenu");
+const editorViewport = defineModel<"desktop" | "mobile">("editorViewport");
 
-// Editable prop
+// Props
 const props = withDefaults(
    defineProps<{
       editable?: boolean;
       blocksKey?: string;
       settingsKey?: string;
+      hasPageSettings?: boolean;
    }>(),
    {
       editable: true,
       blocksKey: "blocks",
       settingsKey: "settings",
+      hasPageSettings: false,
    }
 );
 
@@ -233,9 +251,14 @@ async function handleDeleteBlock() {
 </script>
 
 <style scoped lang="scss">
+$toolbar-height: 0px;
+
 .page-builder-sidebar {
-   height: 100%;
-   overflow-y: auto;
+   min-width: 300px;
    background: #fff;
+
+   // position: sticky;
+   // top: 0;
+   // z-index: 12;
 }
 </style>

package/src/components/PageBuilderToolbar/PageBuilderToolbar.vue

@@ -1,6 +1,6 @@
 <template>
    <!-- Control bar -->
-   <div class="flex divide-x border-b">
+   <div class="flex divide-x divide-gray-300 border-b border-gray-300">
       <slot name="default">
          <!-- no default toolbar content -->
       </slot>
@@ -8,7 +8,7 @@
       <!-- Desktop / Mobile view toggle -->
       <div v-if="hasPageSettings" class="ml-auto inline-flex gap-2 px-5 py-2.5">
          <button
-            class="inline-flex items-center rounded-md border px-3 py-2 text-xs"
+            class="inline-flex items-center rounded-md border border-gray-300 px-3 py-2 text-xs"
             :class="
                showPageSettings
                   ? 'bg-blue-50 text-blue-700 border-blue-800/20'
@@ -25,7 +25,7 @@
       </div>
       <div class="inline-flex gap-2 px-5 py-2.5">
          <button
-            class="inline-flex items-center rounded-md border px-3 py-2 text-xs"
+            class="inline-flex items-center rounded-md border border-gray-300 px-3 py-2 text-xs"
             :class="
                editorViewport === 'mobile'
                   ? 'bg-blue-50 text-blue-700 border-blue-800/20'
@@ -37,7 +37,7 @@
             <DevicePhoneMobileIcon class="size-4" />
          </button>
          <button
-            class="inline-flex items-center rounded-md border px-3 py-2 text-xs"
+            class="inline-flex items-center rounded-md border border-gray-300 px-3 py-2 text-xs"
             :class="
                editorViewport === 'desktop'
                   ? 'bg-blue-50 text-blue-700 border-blue-800/20'

package/src/components/PageRenderer/PageRenderer.vue

@@ -1,5 +1,19 @@
 <template>
-   <div id="page-blocks-wrapper">
+   <component :is="layoutComponent" v-if="withLayout && layoutComponent" v-bind="settings">
+      <template #default>
+         <div id="page-blocks-wrapper">
+            <div
+               v-for="block in blocks"
+               :key="block.id"
+               class="block-wrapper"
+               :class="{ [getMarginClass(block)]: true }"
+            >
+               <component :is="getBlock(block.type)" v-bind="block" :key="`block-${block.id}`" />
+            </div>
+         </div>
+      </template>
+   </component>
+   <div v-else id="page-blocks-wrapper">
       <div v-for="block in blocks" :key="block.id" class="block-wrapper" :class="{ [getMarginClass(block)]: true }">
          <component :is="getBlock(block.type)" v-bind="block" :key="`block-${block.id}`" />
       </div>
@@ -7,14 +21,25 @@
 </template>
 
 <script setup lang="ts">
-import { type Component } from "vue";
+import { type Component, computed, withDefaults } from "vue";
 import { generateNameVariations } from "../../util/helpers";
 import { blockModules } from "./blockModules";
+import { layoutModules } from "./layoutModules";
 import type { Block } from "../../types/Block";
 
-defineProps<{
-   blocks: Block[];
-}>();
+const props = withDefaults(
+   defineProps<{
+      blocks: Block[];
+      layout?: string;
+      settings?: Record<string, any>;
+      withLayout?: boolean;
+   }>(),
+   {
+      layout: "default",
+      settings: () => ({}),
+      withLayout: true,
+   }
+);
 
 function getBlock(blockType: string): Component | undefined {
    // Generate name variations and try to find a match in blockModules keys (file paths)
@@ -39,6 +64,34 @@ function getBlock(blockType: string): Component | undefined {
    return undefined;
 }
 
+function getLayout(layoutName: string): Component | undefined {
+   // Generate name variations and try to find a match in layoutModules keys (file paths)
+   const nameVariations = generateNameVariations(layoutName);
+
+   // Iterate through all layoutModules entries
+   for (const [filePath, module] of Object.entries(layoutModules)) {
+      // Check if any variation matches the file path
+      for (const variation of nameVariations) {
+         // Check if the file path contains the variation followed by .vue
+         // e.g., "default" matches "layout/default.vue" or "layout/default/default.vue"
+         if (filePath.includes(`${variation}.vue`)) {
+            // Extract the default export (the Vue component)
+            const component = (module as any).default;
+            if (component) {
+               return component;
+            }
+         }
+      }
+   }
+
+   return undefined;
+}
+
+// Get the layout component based on the layout prop
+const layoutComponent = computed(() => {
+   return getLayout(props.layout);
+});
+
 // Get the margin class for the block
 // Margin is an object with top and bottom properties
 // margin classses are formatted as `margin-<direction>-<size>`

package/src/components/PageRenderer/layoutModules.ts

@@ -0,0 +1,3 @@
+// import.meta.glob must be at top level - it will be transformed by Vite plugin
+// This file is separate from the Vue component to ensure the transform hook can intercept it
+export const layoutModules = import.meta.glob("@page-builder/layout/**/*.vue", { eager: true });

package/src/components/PageSettings/PageSettings.vue

@@ -1,6 +1,6 @@
 <template>
    <div class="page-settings">
-      <div class="flex items-start justify-between border-b bg-white p-5">
+      <div class="flex items-start justify-between border-b border-gray-300 bg-white p-5">
          <div>
             <button
                class="cursor-pointer text-sm text-zinc-500 hover:text-zinc-900 hover:underline"
@@ -11,7 +11,7 @@
             <h4 class="mt-1 text-lg font-bold">Page settings</h4>
          </div>
       </div>
-      <div class="border-b p-5">
+      <div class="border-b border-gray-300 p-5">
          <!-- Page layout -->
          <div class="editor-field-node">
             <!-- Label -->
@@ -19,7 +19,11 @@
                <label class="mr-auto font-medium first-letter:uppercase">Page layout</label>
             </div>
 
-            <select v-model="pageData.settings.layout" class="form-control" @change="getLayoutSettings">
+            <select
+               v-model="pageData[settingsKey].layout"
+               class="form-control w-full rounded-md border border-gray-300 p-2"
+               @change="getLayoutSettings"
+            >
                <option v-for="layout in availableLayouts" :key="`layout-${layout.__name}`" :value="layout.__name">
                   {{ layout.label }}
                </option>
@@ -29,7 +33,7 @@
       <!-- Page settings -->
       <div class="editor-field-node">
          <BlockEditorFields
-            v-model="pageData.settings"
+            v-model="pageData[settingsKey]"
             :fields="pageSettingsFields"
             :editable="true"
             :isLayoutBlock="true"
@@ -50,21 +54,25 @@ const emit = defineEmits<{
 const pageData = defineModel<any>();
 const pageSettingsFields = ref<any>({});
 
-defineProps<{
-   title?: string;
-}>();
-
+const props = withDefaults(
+   defineProps<{
+      settingsKey?: string;
+   }>(),
+   {
+      settingsKey: "settings",
+   }
+);
 const availableLayouts = computed(() => {
    return getLayouts();
 });
 
 function getLayoutSettings() {
-   if (!pageData.value.settings.layout) return;
-   pageSettingsFields.value = getLayoutFields(pageData.value.settings.layout) || null;
+   if (!pageData.value[props.settingsKey].layout) return;
+   pageSettingsFields.value = getLayoutFields(pageData.value[props.settingsKey].layout) || null;
 }
 
 onBeforeMount(() => {
-   if (!pageData.value.settings) {
+   if (!pageData.value[props.settingsKey]) {
       pageData.value.settings = null;
    }
 });