v1.3.4

• fixes potential CSS leaking for dark mode websites
• new editPath prop on <BlokkliProvider>. Allows to link to a different path when starting the editor instead of using the current page
• new shouldRenderItem prop on <BlokkliField>. If this method is provided it will receive a FieldListItem as an argument and it can return a boolean to decide if the block should be rendered at runtime. During editing, the block is always rendered, but if the method returns false the block is rendered muted to indicate that it won't be visible in the published page
• Improved type handling for custom features: Custom blökkli feature components can now use the defineBlokkliFeature composable. To add a custom feature add the path to the component to the featureImports config option

Full Changelog: v1.3.0...v1.3.4

v1.3.0

What's Changed

• feat: improve transforms in #45
• feat: experimental diff view in #46
• Improved settings dialog
• translatable feature labels and descriptions

Fixes

• fix: better error handling when state could not be loaded
• fix: display translations as dropdown based on total langocde length

Full Changelog: v1.2.0...v.1.3.0

v1.2.0

What's Changed

• feat: multi selection in media library by @dulnan in #43

Full Changelog: v1.1.3...v1.2.0

v1.1.0

compare changes

Enhancements

Built-in options: bkHiddenGlobally and bkVisibleLanguages (#37)

These two new built-in global options allow you to hide a block globally or by language. During editing, blocks that would be hidden are displayed translucent. During regular rendering these blocks won't be rendered at all.

Docs

Proxy Mode (#38)

The <BlokkliField> components now has an new prop called proxy-mode. When set, instead of using your rendered block components for drag and drop, blökkli will instead render a proxy list containing a simplified view of the nested structure of the field. All interactions during editing are handled via this proxy list.

This is great for blocks that don't render the full markup required to make drag and drop possible, for example image sliders, carousels or other highly interactive components.

Docs

Improved Drag and Drop (#40)

Previously, under certain conditions, the rendered drop targets that indicate where a block can be placed could overlap with each other, making it hard or even impossible to use. A new algorithm now tries to find a good alternative location for a drop target if it would otherwise overlap an existing one. It should cover most cases, however for the best experience it's still recommended that you explicitly make sure that your <BlokkliField> has a min-height or min-width.

Option to close editor after publish (#36)

A new setting called closeAfterPublish which defaults to true. If enabled, the editor will automatically close if the publish mutation was successful.

The corresponding Drupal GraphQL mutation field now includes a new argument called createNewState. This is set to false when this new setting is enabled. This solves a previous issue where publishing would always create a new empty edit state afterwards.

In addition, the label of the button now changes based on the status of the page. If the page is unpublished the label will use the word save instead, to indicate that the page will not be published by clicking on the button.

Improved options for multi selection (c665390)

When selecting multiple blocks of the same bundle blökkli now displays the value of the options in such a way that it represents the selection. For example, if the card block defines a radios option for color:

• If all selected cards have the same color red, then this color will be selected
• If this is not the case the option will not display any color as selected

Improved artboard scrolling/zooming (#40)

The entire "artboard" feature has been moved to its own library and has been refactored from the ground up. It now supports momentum scrolling and zooming.

New overview overlay (#40)

This displays an abstract view of the page and highlights the visible portion (viewport).

Fallback selection for blocks with height/width of 0 (#39)

Sometimes a block might not render anything, for example if a prop such as an image is missing. In these cases, while there might still be markup in the DOM, its width or height is 0. Previously these blocks were only selectable by either using Tab to focus them or by using the Structure sidebar pane.

With this change it should now be possible to select these blocks, as blökkli internally sets a minimum size for each block, even if the actual DOM element has a size of 0.

Fixes

• Drop target size/style (18881c4)
• Apply correct drop alignment class (6f12ee8)
• Restore artboard styles (5eebaaf)
• Explicitly pass route.path when starting blökkli (6c870e7)
• Ignore droppable/editable fields when rendered inside proxy field (87e99b7)
• Properly check type of argument (f71e469)
• Registering blocks rendered in a proxy field (f74f5a4)
• Remove duplicate classes (b79c2b9)
• Don't catch error when field can't be found (640eb65)
• Unified min size for drop targets (4076000)
• Set correct checkbox false value when updating option (f95ed47)
• Properly check if there was a diff when updating options (95fae34)
• Properly prevent overlapping drop targets (ae4a748)

Chore

• Update module types (2b6c95e)
• Add bkHiddenGlobally to docs (4ee9ba0)

v1.0.4

• Add fieldListType to determineVisibleOptions context (#29)
• Make sure block component updates when fieldListType changes (#30)
• wrong docs/type for fieldListType renderFor option

Full Changelog: v1.0.3...v1.0.4

v1.0.2

What's Changed

Library improvements #28

It is now possible to edit library items (reusable blocks) from within blökkli. Currently this is achieved by rendering a second editor instance in an iframe. For this to work the adapter needs to implement a getLibraryItemEditUrl method, that receives a single argument (containing the UUID of the library item) and should return the URL to the blokkli editor for the given library item.

This new feature has no breaking changes and if the new method is not implemented, the existing behaviour is kept (where reusable blocks are not editable).

Drupal integration

The Drupal adapter already implements this new method. For it to work, update to 1.0.2 of drupal/paragraphs_blokkli (See the Merge Request for the list of changes) and create a page in pages/blokkli/library-item/[uuid].vue that contains something like this:

<template>
  <BlokkliProvider
    v-if="data?.blokkliProps"
    v-bind="data.blokkliProps"
    :entity="data"
    v-slot="{ entity }"
  >
    <div class="container">
      <p>Administrative title</p>
      <h1 v-blokkli-editable:label>
        {{ entity.libraryItemLabel || data.libraryItemLabel }}
      </h1>
    </div>
    <BlokkliField name="paragraphs" :list="data.paragraphs" />
  </BlokkliProvider>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'library',
})

const route = useRoute()

const uuid = computed<string>(() => {
  if (route.params.uuid && typeof route.params.uuid === 'string') {
    return route.params.uuid
  }

  return ''
})

const { data } = await useAsyncGraphqlQuery(
  'paragraphsLibraryItem',
  {
    id: uuid.value,
    uuid: uuid.value,
  },
  {
    transform: function (data) {
      if (data.data.byUuid && 'blokkliProps' in data.data.byUuid) {
        return data.data.byUuid
      } else if (data.data.byId && 'blokkliProps' in data.data.byId) {
        return data.data.byId
      }

      return null
    },
  },
)
</script>

In this example we assume that there is a Nuxt layout called library that does not render any headers, footers or other page elements. That way only the library item is rendered in blökkli.

The matching GraphQL query is:

query paragraphsLibraryItem($uuid: String!, $id: ID!) {
  byUuid: entityByUuid(uuid: $uuid, entityType: PARAGRAPHS_LIBRARY_ITEM) {
    ...paragraphsLibraryItemCanonical
  }
  byId: entityById(id: $id, entityType: PARAGRAPHS_LIBRARY_ITEM) {
    ...paragraphsLibraryItemCanonical
  }
}

fragment paragraphsLibraryItemCanonical on ParagraphsLibraryItem {
  libraryItemLabel: label
  blokkliProps {
    ...blokkliProps
  }
  paragraphs {
    ...paragraphsFieldItem
    props {
      ...paragraph
    }
  }
}

Also, to make the label of the library item editable, add a field with the same name to the pbMutatedEntity fragment:

fragment pbMutatedEntity on Entity {
  # Your existing fragments.
  ...nodePage

  # New field.
  libraryItemLabel: label
}

Note that since blökkli exclusively works using UUIDs, but the canonical path of the paragraphs_library_item in Drupal uses the entity ID, our page component has to support both: The edit URL generated from blökkli contains the UUID and the URL generated in the Drupal backend contains the ID. For this reason we try to load the entity by either ID or UUID. That way users can also click on a library item in the Drupal backend and end up in the frontend.

You might also want to add a middleware to the page to make this page only available for logged in users. Editing however is only possible for users with the appropriate permissions.

No further configuration is needed in Drupal.

Full Changelog: v1.0.1...v1.0.2

v1.0.0

This is the first stable release for the blökkli Nuxt module. All releases from now on will follow semantic versioning. Compatibility between the Nuxt module and the paragraphs_blokkli Drupal module will be guaranteed for the same minor versions.