@blokkli/editor 2.0.0-alpha.17 → 2.0.0-alpha.18

package/dist/runtime/components/Edit/Features/Library/ReusableDialog/index.vue

@@ -59,7 +59,7 @@ import { ref, useBlokkli, onMounted } from "#imports";
 import { DialogModal, InfoBox, FormText, FormItem } from "#blokkli/components";
 import { realBackgroundColor } from "#blokkli/helpers";
 defineEmits(["confirm", "cancel"]);
-const { dom, $t } = useBlokkli();
+const { dom, $t, blocks } = useBlokkli();
 const props = defineProps({
   uuid: { type: String, required: true },
   backgroundClass: { type: String, required: false }
@@ -70,14 +70,14 @@ const previewEl = ref(null);
 const backgroundColor = ref("");
 onMounted(() => {
   if (previewEl.value) {
-    const item = dom.findBlock(props.uuid);
+    const item = blocks.getBlock(props.uuid);
     if (!item) {
       return;
     }
-    if (item.editTitle) {
-      label.value = item.editTitle.substring(0, 40);
+    const element = dom.getDragElement(item);
+    if (!element) {
+      return;
     }
-    const element = item.element();
     const markup = dom.getDropElementMarkup(item);
     width.value = element.getBoundingClientRect().width + 40;
     const clone = document.createElement("div");

package/dist/runtime/components/Edit/Features/Library/index.vue

@@ -4,7 +4,7 @@
     id="library_detach"
     :title="$t('libraryDetach', 'Detach from library')"
     icon="detach"
-    :disabled="state.editMode.value !== 'editing'"
+    edit-only
     multiple
     :weight="-70"
     @click="onDetach"
@@ -13,7 +13,8 @@
     v-else-if="!isReusable"
     id="library_make_reusable"
     :title="$t('libraryAdd', 'Add to library...')"
-    :disabled="!canMakeReusable || state.editMode.value !== 'editing'"
+    :disabled="!canMakeReusable"
+    edit-only
     icon="reusable"
     :weight="-70"
     @click="showReusableDialog = true"
@@ -41,8 +42,8 @@
   <Teleport to="body">
     <BlokkliTransition name="slide-up">
       <ReusableDialog
-        v-if="showReusableDialog && selectedItem"
-        :uuid="selectedItem.uuid"
+        v-if="showReusableDialog && selection.item.value"
+        :uuid="selection.item.value.uuid"
         :background-class="definition?.editor?.previewBackgroundClass"
         @confirm="onMakeReusable"
         @cancel="showReusableDialog = false"
@@ -87,12 +88,6 @@ const { adapter } = defineBlokkliFeature({
 });
 const { selection, state, types, $t, eventBus, definitions } = useBlokkli();
 const showReusableDialog = ref(false);
-const selectedItem = computed(() => {
-  if (selection.blocks.value.length !== 1) {
-    return;
-  }
-  return selection.blocks.value[0];
-});
 const onDetach = async () => {
   if (!adapter.detachReusableBlock || !selection.uuids.value.length) {
     return;
@@ -118,28 +113,37 @@ const onAddLibraryItem = async (uuid) => {
   );
   placedAction.value = null;
 };
-const definition = computed(
-  () => selectedItem?.value ? definitions.getBlockDefinition(
-    selectedItem.value.itemBundle,
-    selectedItem.value.hostFieldListType,
-    selectedItem.value.parentBlockBundle
-  ) : null
-);
-const itemBundle = computed(
-  () => selectedItem?.value ? types.getBlockBundleDefinition(selectedItem.value.itemBundle) : null
-);
+const definition = computed(() => {
+  const item = selection.item.value;
+  if (!item) {
+    return null;
+  }
+  return definitions.getBlockDefinition(
+    item.bundle,
+    item.fieldListType,
+    item.parentBlockBundle
+  );
+});
+const itemBundle = computed(() => {
+  const item = selection.item.value;
+  if (!item) {
+    return null;
+  }
+  return types.getBlockBundleDefinition(item.bundle);
+});
 const isReusable = computed(
-  () => selection.blocks.value.length && selection.blocks.value.every((v) => v.itemBundle === BUNDLE_FROM_LIBRARY)
+  () => selection.bundles.value.every((bundle) => bundle === BUNDLE_FROM_LIBRARY)
 );
 async function onMakeReusable(label) {
   showReusableDialog.value = false;
-  if (!selectedItem?.value?.uuid) {
+  const item = selection.item.value;
+  if (!item) {
     return;
   }
   await state.mutateWithLoadingState(
     () => adapter.makeBlockReusable({
       label,
-      uuid: selectedItem.value.uuid
+      uuid: item.uuid
     }),
     $t("libraryError", "Failed to add block to library.")
   );

package/dist/runtime/components/Edit/Features/MediaLibrary/Library/index.vue

@@ -88,7 +88,7 @@ defineProps({
   isSortli: { type: Boolean, required: false },
   modelValue: { type: String, required: false }
 });
-const { adapter, storage, $t } = useBlokkli();
+const { adapter, storage, $t, element } = useBlokkli();
 const selected = ref([]);
 const listEl = ref(null);
 const page = ref(0);
@@ -97,10 +97,13 @@ function getDragItems(activeItem) {
   if (!selected.value.length || !listEl.value) {
     return null;
   }
+  const listElement = listEl.value;
   const activeId = activeItem?.itemType === "media_library" ? activeItem.mediaId : null;
   const items2 = selected.value.map((id) => {
-    const el = listEl.value?.querySelector(
-      `[data-sortli-id="media_library_${id}"]`
+    const el = element.query(
+      listElement,
+      `[data-sortli-id="media_library_${id}"]`,
+      "Find media library drag item."
     );
     if (!(el instanceof HTMLElement)) {
       return null;

package/dist/runtime/components/Edit/Features/MediaLibrary/index.vue

@@ -32,6 +32,7 @@ import { PluginSidebar, PluginDroppableEdit } from "#blokkli/plugins";
 import Library from "./Library/index.vue";
 import defineDropAreas from "#blokkli/helpers/composables/defineDropAreas";
 import { falsy } from "#blokkli/helpers";
+import { itemEntityType } from "#blokkli-build/config";
 defineBlokkliFeature({
   id: "media-library",
   icon: "image",
@@ -39,7 +40,7 @@ defineBlokkliFeature({
   description: "Implements a media library to easily drag and drop media like images or videos.",
   requiredAdapterMethods: ["mediaLibraryGetResults", "mediaLibraryAddBlock"]
 });
-const { $t, dom, adapter, state, runtimeConfig, types } = useBlokkli();
+const { $t, adapter, state, runtimeConfig, types, directive } = useBlokkli();
 const selected = ref("");
 const ERROR_MESSAGE = $t(
   "mediaLibraryReplaceFailed",
@@ -49,11 +50,12 @@ const onDroppableEditSave = async (e) => {
   if (!selected.value) {
     return;
   }
-  if ("itemBundle" in e.host && adapter.mediaLibraryReplaceMedia) {
+  if ("itemType" in e.host && adapter.mediaLibraryReplaceMedia) {
+    const host = e.host;
     await state.mutateWithLoadingState(
       () => adapter.mediaLibraryReplaceMedia({
         host: {
-          uuid: e.host.uuid,
+          uuid: host.block.uuid,
           type: runtimeConfig.itemEntityType,
           fieldName: e.fieldName
         },
@@ -62,11 +64,12 @@ const onDroppableEditSave = async (e) => {
       ERROR_MESSAGE
     );
   } else if ("type" in e.host && adapter.mediaLibraryReplaceEntityMedia) {
-    const type = e.host.type;
+    const host = e.host;
+    const type = host.type;
     await state.mutateWithLoadingState(
       () => adapter.mediaLibraryReplaceEntityMedia({
         host: {
-          uuid: e.host.uuid,
+          uuid: host.uuid,
           type,
           fieldName: e.fieldName
         },
@@ -87,18 +90,18 @@ defineDropAreas((dragItems) => {
   if (item.itemType !== "media_library") {
     return;
   }
-  return dom.getAllDroppableFields().map((field) => {
-    const config = types.getDroppableFieldConfig(field.fieldName, field.host);
+  return directive.getDroppableElements().map((field) => {
+    const config = types.getDroppableFieldConfig(field.fieldName, field);
     if (config.allowedEntityType !== "media") {
       return;
     }
     if (!config.allowedBundles.includes(item.mediaBundle)) {
       return;
     }
-    const isBlock = "itemBundle" in field.host;
+    const isBlock = field.type === itemEntityType;
     const draggableHost = {
-      uuid: field.host.uuid,
-      type: "itemBundle" in field.host ? runtimeConfig.itemEntityType : field.host.type,
+      uuid: field.uuid,
+      type: field.type,
       fieldName: field.fieldName
     };
     const label = $t("mediaLibraryReplaceMedia", "Replace @field").replace(
@@ -107,7 +110,7 @@ defineDropAreas((dragItems) => {
     );
     if (adapter.mediaLibraryReplaceMedia && isBlock) {
       return {
-        id: `replace-media:${field.host.uuid}:${field.fieldName}`,
+        id: `replace-media:${field.uuid}:${field.fieldName}`,
         label,
         element: field.element,
         icon: "swap-horizontal",
@@ -123,7 +126,7 @@ defineDropAreas((dragItems) => {
       };
     } else if (adapter.mediaLibraryReplaceEntityMedia && !isBlock) {
       return {
-        id: `replace-entity-media:${field.host.uuid}:${field.fieldName}`,
+        id: `replace-entity-media:${field.uuid}:${field.fieldName}`,
         label,
         element: field.element,
         icon: "swap-horizontal",

package/dist/runtime/components/Edit/Features/MultiSelect/Overlay/index.vue

@@ -17,7 +17,7 @@ import {
 } from "twgl.js";
 import { RectangleBufferCollector } from "#blokkli/helpers/webgl";
 import useDebugLogger from "#blokkli/helpers/composables/useDebugLogger";
-const { eventBus, dom, theme, animation, ui } = useBlokkli();
+const { eventBus, dom, theme, animation, ui, blocks } = useBlokkli();
 const logger = useDebugLogger();
 const props = defineProps({
   startX: { type: Number, required: true },
@@ -39,7 +39,7 @@ class MultiSelectRectangleBufferCollector extends RectangleBufferCollector {
       if (this.added.has(uuid)) {
         continue;
       }
-      const block = dom.findBlock(uuid);
+      const block = blocks.getBlock(uuid);
       if (!block) {
         continue;
       }

package/dist/runtime/components/Edit/Features/Options/Form/index.vue

@@ -56,6 +56,7 @@ import {
   BK_VISIBLE_LANGUAGES
 } from "#blokkli/helpers/symbols";
 import { BUNDLE_FROM_LIBRARY } from "#blokkli/constants";
+import { itemEntityType } from "#blokkli-build/config";
 if (import.meta.hot) {
   import.meta.hot.accept("#blokkli/runtime-helpers", () => {
   });
@@ -94,11 +95,11 @@ const {
   eventBus,
   state,
   selection,
-  runtimeConfig,
   dom,
   theme,
   context,
-  definitions
+  definitions,
+  blocks
 } = useBlokkli();
 const props = defineProps({
   uuids: { type: [Array, String], required: true },
@@ -136,7 +137,7 @@ function stopChangingOptions() {
   if (Array.isArray(props.uuids)) {
     props.uuids.forEach((uuid) => {
       dom.refreshBlockRect(uuid);
-      const block = dom.findBlock(uuid);
+      const block = blocks.getBlock(uuid);
       if (block) {
         const el = dom.getDragElement(block);
         if (el) {
@@ -248,11 +249,11 @@ const visibleOptions = computed(() => {
   }
   const uuid = props.uuids[0];
   const item = state.getFieldListItem(uuid);
-  const block = selection.blocks.value.find((v) => v.uuid === uuid);
+  const block = selection.items.value.find((v) => v.uuid === uuid);
   if (!item) {
     return [];
   }
-  const parentType = block?.hostType === runtimeConfig.itemEntityType ? block.parentBlockBundle : void 0;
+  const parentType = block?.host.type === itemEntityType ? block.parentBlockBundle : void 0;
   const ctxProps = item?.bundle === BUNDLE_FROM_LIBRARY ? item?.props?.libraryItem?.block?.props : item?.props;
   const visibleKeys = (
     // We have to cast to any here because the types are guaranteed to be correct.
@@ -261,7 +262,7 @@ const visibleOptions = computed(() => {
       parentType,
       props: ctxProps,
       entity: context.value,
-      fieldListType: block?.hostFieldListType || "default"
+      fieldListType: block?.fieldListType ?? "default"
     })
   );
   return availableOptions.value.filter(

package/dist/runtime/components/Edit/Features/Options/index.vue

@@ -24,7 +24,7 @@ defineBlokkliFeature({
 });
 const { selection, state, ui, definitions, context } = useBlokkli();
 const uuids = computed(() => {
-  const uuids2 = selection.blocks.value.map((v) => v.uuid);
+  const uuids2 = selection.items.value.map((v) => v.uuid);
   if (uuids2.length) {
     return uuids2;
   } else if (selection.hasHostSelected.value) {
@@ -47,14 +47,14 @@ const definition = computed(() => {
       context.value.entityBundle
     );
   }
-  const bundles = selection.blocks.value.map((v) => v.reusableBundle || v.itemBundle).filter(onlyUnique);
+  const bundles = selection.items.value.map((v) => v.library?.reusableBundle || v.bundle).filter(onlyUnique);
   if (bundles.length !== 1) {
     return;
   }
   const bundle = bundles[0];
   if (bundle === "blokkli_fragment") {
-    const fragments = selection.blocks.value.filter(
-      (v) => v.itemBundle === "blokkli_fragment"
+    const fragments = selection.items.value.filter(
+      (v) => v.bundle === "blokkli_fragment"
     );
     const fragmentNames = fragments.map((v) => {
       const props = state.getFieldListItem(v.uuid)?.props;
@@ -67,10 +67,10 @@ const definition = computed(() => {
     }
     return definitions.getFragmentDefinition(fragmentNames[0]);
   }
-  return selection.blocks.value.map((block) => {
+  return selection.items.value.map((block) => {
     return definitions.getBlockDefinition(
       bundle,
-      block.hostFieldListType,
+      block.fieldListType,
       block.parentBlockBundle
     );
   }).filter(falsy).at(0);

package/dist/runtime/components/Edit/Features/Publish/Dialog/index.vue

@@ -37,23 +37,24 @@
           </label>
           <div class="bk-publish-schedule-date-wrapper">
             <div v-if="isAlreadyScheduled" class="bk-publish-scheduled-display">
-              {{
-                ui.formatDate(scheduleDate, {
-  weekday: "long",
-  year: "numeric",
-  month: "2-digit",
-  day: "2-digit",
-  hour: "2-digit",
-  minute: "2-digit"
-})
-              }}
+              {{ formatScheduleDate(scheduleDate) }}
             </div>
             <ScheduleDate
               v-else
               v-model="scheduleDate"
               :disabled="isLoading"
               :error="scheduleDateError"
-            />
+            >
+              <div
+                class="bk-schedule-date-info"
+                v-text="
+  $t(
+    'publishScheduledInfo',
+    'You can still make changes until the scheduled publication date.'
+  )
+"
+              />
+            </ScheduleDate>
             <button
               v-if="isAlreadyScheduled"
               type="button"
@@ -90,6 +91,16 @@
         />
       </FormItem>
 
+      <FormItem v-if="publishMode !== 'save' && scheduledBlocks.length">
+        <InfoBox>
+          <p
+            v-for="(text, index) in scheduledBlocks"
+            :key="'infobox' + index"
+            v-html="text"
+          />
+        </InfoBox>
+      </FormItem>
+
       <FormItem v-if="successItems.length && showTable">
         <h2 class="bk-heading-2">
           {{ $t("publishSuccessfullyPublished", "Successfully published") }}
@@ -171,14 +182,29 @@ import {
   onMounted,
   onUnmounted
 } from "#imports";
-import { DialogModal, FormTextarea, FormItem } from "#blokkli/components";
+import {
+  DialogModal,
+  FormTextarea,
+  FormItem,
+  ScheduleDate,
+  InfoBox
+} from "#blokkli/components";
 import { emitMessage } from "#blokkli/helpers/eventBus";
 import Item from "./Item.vue";
 import PublishOption, {} from "./PublishOption.vue";
 import Summary from "./Summary.vue";
-import ScheduleDate from "./ScheduleDate.vue";
 const showTable = false;
 const { adapter, $t, state, context, ui } = useBlokkli();
+const formatScheduleDate = (date) => {
+  return ui.formatDate(date, {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+};
 const isMutating = ref(false);
 const mutationStatusItems = ref({});
 const publishedIds = ref([]);
@@ -205,6 +231,33 @@ const {
 } = await useAsyncData(() => {
   return adapter.getPublishOptions();
 });
+const scheduledBlocks = computed(() => {
+  const referenceTimestamp = publishMode.value === "scheduled" && scheduleDate.value ? new Date(scheduleDate.value).getTime() : currentTimestamp.value;
+  const grouped = state.getAllUuids().reduce((acc, uuid) => {
+    const item = state.getFieldListItem(uuid);
+    if (!item?.editContext?.publishOn) {
+      return acc;
+    }
+    const publishDate = new Date(item.editContext.publishOn).getTime();
+    if (publishDate <= referenceTimestamp) {
+      return acc;
+    }
+    const dateKey = item.editContext.publishOn;
+    acc[dateKey] = (acc[dateKey] || 0) + 1;
+    return acc;
+  }, {});
+  return Object.entries(grouped).map(([date, count]) => {
+    const formattedDate = formatScheduleDate(date);
+    const message = count === 1 ? $t(
+      "publishScheduledBlockSingular",
+      "1 block is scheduled to be published on @date"
+    ) : $t(
+      "publishScheduledBlockPlural",
+      "@count blocks are scheduled to be published on @date"
+    );
+    return message.replace("@count", count.toString()).replace("@date", `<strong>${formattedDate}</strong>`);
+  });
+});
 const canSchedule = computed(() => !!publishOptions.value?.canSchedule);
 const publishOn = computed(
   () => publishOptions.value?.publishOn ?? null
@@ -403,7 +456,7 @@ const resultStateLabel = computed(() => {
     );
   }
   if (publishMode.value === "scheduled" && scheduleDate.value) {
-    const formattedDate = ui.formatDate(scheduleDate.value);
+    const formattedDate = formatScheduleDate(scheduleDate.value);
     if (isCurrentlyPublished.value) {
       return $t(
         "publishResultScheduledChanges",
@@ -500,7 +553,7 @@ async function onSubmit() {
     return;
   }
   if (publishMode.value === "scheduled") {
-    const formattedDate = ui.formatDate(scheduleDate.value);
+    const formattedDate = formatScheduleDate(scheduleDate.value);
     const message = $t(
       "publishScheduleSuccess",
       "Publication scheduled for @date"

package/dist/runtime/components/Edit/Features/Search/Overlay/Results/Page/index.vue

@@ -10,7 +10,7 @@
       @mouseenter="index = i"
     >
       <div class="bk-search-item-icon">
-        <ItemIcon :bundle="item.item.itemBundle" />
+        <ItemIcon :bundle="item.item.bundle" />
       </div>
       <div class="bk-search-item-content">
         <Highlight
@@ -49,7 +49,7 @@ const props = defineProps({
   search: { type: String, required: true },
   tab: { type: String, required: true }
 });
-const { eventBus, state, types, dom } = useBlokkli();
+const { eventBus, state, types, dom, blocks, element } = useBlokkli();
 const buildForKey = ref("");
 const items = ref([]);
 const index = ref(0);
@@ -92,28 +92,28 @@ const scrollItemIntoView = () => {
   }
 };
 const buildSearchText = (el) => {
-  let text = el.textContent || "";
-  el.querySelectorAll("img").forEach((img) => {
-    if (img.alt) {
-      text += " " + img.alt;
-    }
-    if (img.title) {
-      text += " " + img.title;
+  if (!el) {
+    return "";
+  }
+  const altTexts = element.queryAll(el, "img", "buildSearchText", (el2) => {
+    if (el2 instanceof HTMLImageElement) {
+      return [el2.alt, el2.title].filter(Boolean).join("");
     }
-  });
-  return text;
+  }).join(" ");
+  return (el.textContent ?? "") + altTexts;
 };
 const buildIndex = () => {
   if (buildForKey.value === state.refreshKey.value) {
     return;
   }
-  const newItems = dom.getAllBlocks().map((item) => {
-    const title = types.getBlockBundleDefinition(item.itemBundle)?.label || item.itemBundle;
+  const newItems = blocks.getAllBlocks().map((item) => {
+    const title = types.getBlockBundleDefinition(item.bundle)?.label || item.bundle;
+    const element2 = dom.getDragElement(item);
     return {
       item,
-      title: item.editTitle || title,
+      title,
       context: title,
-      text: buildSearchText(item.element())
+      text: buildSearchText(element2)
     };
   }).filter(falsy);
   items.value = newItems;

package/dist/runtime/components/Edit/Features/Search/index.vue

@@ -46,7 +46,7 @@ defineBlokkliFeature({
   label: "Search",
   description: "Provides an overlay with shortcut to search for blocks on the current page or existing content to add as blocks."
 });
-const { $t, selection } = useBlokkli();
+const { $t, selection, ui } = useBlokkli();
 const isRendered = ref(false);
 const isVisible = ref(false);
 const overlay = ref(null);
@@ -60,6 +60,9 @@ function onClick() {
   });
 }
 onBlokkliEvent("keyPressed", (e) => {
+  if (ui.hasDialogOpen.value) {
+    return;
+  }
   if (e.code === "Escape") {
     isVisible.value = false;
   }

package/dist/runtime/components/Edit/Features/Selection/AddButtons/Overlay/index.vue.d.ts

@@ -6,12 +6,12 @@ type __VLS_Props = {
     label: string;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    select: (id: string) => void;
     action: (id: string) => void;
+    select: (id: string) => void;
     close: () => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClose?: (() => any) | undefined;
-    onSelect?: ((id: string) => any) | undefined;
     onAction?: ((id: string) => any) | undefined;
+    onSelect?: ((id: string) => any) | undefined;
+    onClose?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Edit/Features/Selection/AddButtons/Renderer/index.vue

@@ -30,7 +30,19 @@ import {
   determineCanAddChildren
 } from "#blokkli/helpers/dropTargets";
 import { isInternalBundle } from "#blokkli/helpers/bundles";
-const { animation, theme, dom, selection, state, types, ui, $t } = useBlokkli();
+import { itemEntityType } from "#blokkli-build/config";
+const {
+  animation,
+  theme,
+  dom,
+  selection,
+  state,
+  types,
+  ui,
+  $t,
+  blocks,
+  fields
+} = useBlokkli();
 const emptyFieldTooltips = ref([]);
 const currentUuid = ref("");
 const currentBundleLabel = ref("");
@@ -146,9 +158,9 @@ const blockStateCache = /* @__PURE__ */ new Map();
 function getOrientationForUuid(uuid) {
   let cached = orientationCache.get(uuid);
   if (!cached) {
-    const block = dom.findBlock(uuid);
-    if (block) {
-      const field = dom.findField(block.hostUuid, block.hostFieldName);
+    const item = blocks.getBlock(uuid);
+    if (item) {
+      const field = fields.find(item.host.uuid, item.host.fieldName);
       if (field) {
         cached = getChildrenOrientation(field.element);
         orientationCache.set(uuid, cached);
@@ -162,7 +174,7 @@ function getBlockState(uuid) {
   if (!cached) {
     let canShowBeforeAfter = false;
     let singleAllowedBundleLabel = null;
-    const block = dom.findBlock(uuid);
+    const block = blocks.getBlock(uuid);
     if (!block) {
       return {
         canShowBeforeAfter: false,
@@ -173,7 +185,7 @@ function getBlockState(uuid) {
       };
     }
     if (block) {
-      const field = dom.findField(block.hostUuid, block.hostFieldName);
+      const field = fields.find(block.host.uuid, block.host.fieldName);
       if (!field) {
         return {
           canShowBeforeAfter: false,
@@ -208,13 +220,13 @@ function getBlockState(uuid) {
         }
       }
     }
-    const bundleLabel = block ? types.getBlockBundleDefinition(block.itemBundle)?.label || block.itemBundle : "";
+    const bundleLabel = block ? types.getBlockBundleDefinition(block.bundle)?.label || block.bundle : "";
     const emptyFieldKeys = [];
     const emptyFieldTooltips2 = [];
     if (block) {
       const fieldConfigs = types.fieldConfig.forEntityTypeAndBundle(
-        block.entityType,
-        block.itemBundle
+        itemEntityType,
+        block.bundle
       );
       for (const fieldConfig of fieldConfigs) {
         const key = getFieldKey(uuid, fieldConfig.name);
@@ -222,7 +234,7 @@ function getBlockState(uuid) {
         if (count === 0) {
           emptyFieldKeys.push(key);
           const fieldLabel = fieldConfig.label || fieldConfig.name;
-          const fieldElement = dom.findField(uuid, fieldConfig.name);
+          const fieldElement = fields.find(uuid, fieldConfig.name);
           if (fieldElement) {
             const allowedBundles = fieldElement.allowedBundles.filter(
               (bundle) => !isInternalBundle(bundle)
@@ -301,7 +313,18 @@ function getCircleAtPoint(x, y) {
 if (gl && programInfo && bufferInfo) {
   defineRenderer("add-buttons", {
     zIndex: 1e3,
-    enabled: () => selection.uuids.value.length === 1,
+    enabled: () => {
+      if (selection.uuids.value.length !== 1) {
+        return false;
+      }
+      if (ui.openTooltip.value && ui.openTooltip.value !== "add-buttons") {
+        return false;
+      }
+      if (ui.hasTransformOverlayOpen.value) {
+        return false;
+      }
+      return true;
+    },
     cursor: () => hoveredCircle.value >= 0 ? "pointer" : null,
     onClick: ({ mouseArtboard }) => {
       if (selection.uuids.value.length !== 1) {