ContentBlocks ContentBlocks 2.x Developer Client Events Block Events

Client-side events that plugins can listen on a specific ContentBlocks.Block instance. These events don’t typically include the block in the data, as you already have the block to add a listener to it.

  • focus with no data when the block becomes active. Moving focus inside the same block does not fire it again. (triggered by Canvas)
  • drop with no data when a block has been drag and dropped to a new position, after its visual location and internal storage have been updated. A drop inside the same column also fires block:move on that column. A drop into another column fires remove on the old collection and add on the new one. (triggered by Canvas)
  • change with data { inputKey, valueKey, newValue, oldValue, inputStore, store } when an input value changes. This can also fire while the block is rendering, and it can fire very often. (triggered by the block’s store). store is the block store. inputStore is the store for the input that changed. The key that changed is valueKey, so the new value is data.newValue or data.inputStore[data.valueKey]. oldValue may be null. Lock and publishing also fire change, with inputKey: null, valueKey "locked" or "publishing", and no inputStore. Repeater and tabs can fire change with { input } instead, where input is the input instance.
  • instanceid with data { from, to } when the ID for the block changed. This happens when first saving the resource (or other canvas) that the block was added on, and replaces the temporary ID (e.g. new-ext-gen231) with the permanent ID for the block as saved in the database.
  • locked:change with data { block, oldValue, newValue }. Each value is { locked }.
  • publishing:change with data { block, oldValue, newValue }. Each value is { active, activate_on, deactivate_on }. The block collection also receives block:publishing:change with the same data.
  • toolbar with data { items } when the block is focused and the toolbar is rendered. Update (by reference) the provided items array to add, reorder, or remove toolbar items. Each item is an object with keys: key (unique id), icon (font awesome icon name), text (button text to show), title (hover title), handler (callable to handle clicks), renderer (callable that turns the item into a DOM element, useful for advanced toolbar items or if you need finer event control). (triggered by BlockToolbar). The column, layout, and canvas then receive block:toolbar with { block, items }.
  • add with no data when a block is added to a collection (column). This also fires when a block is moved from its original column. (triggered by BlockCollection)
  • beforeRemove with data { preventRemove: false }. (triggered by BlockCollection) The collection checks its own local flag after the event, so changing preventRemove on the data object does not cancel the remove. Moving a block from one column to another also removes and re-adds the block. Reordering inside the same column does not.
  • remove with no data when the block was removed. (triggered by BlockCollection)