API Documentation

DruxtBlockRegion

blocks

Modules

DruxtBlockRegion

The DruxtBlockRegion component renders visible blocks based on region and theme.

All blocks, including those not visible, are provided as slots for the Druxt Wrapper component.

Typedefs

ComponentOptions : Array.<array>

Provides the available naming options for the Wrapper component.

PropsData : object

Provides propsData for use in the Wrapper component.

ScopedSlots : object

Provides scoped slots for use in the Wrapper component.

DruxtBlockRegion

The DruxtBlockRegion component renders visible blocks based on region and theme.

All blocks, including those not visible, are provided as slots for the Druxt Wrapper component.

Example

<DruxtBlockRegion name="header" theme="umami" />

Example (DruxtBlockRegion Wrapper component boilerplate)

<template>
  <DruxtDebug :json="blocks" />
</template>

<script>
import { DruxtBlocksRegionMixin } from 'druxt-blocks'
export default {
  mixins: [DruxtBlocksRegionMixin]
}

Example (DruxtBlockRegion with template injection)

<DruxtBlock id="umami_branding">
  <template #default="{ block }">
    <!-- Do whatever you want here -->
    <DruxtDebug :json="block" />
  </template>
</DruxtBlock>

.isVisible(block) ⇒ boolean

Checks if a given block shoud be visible.

Uses Request Path visibility details if available with the DruxtRouter.

Kind: instance method of DruxtBlockRegion

ParamTypeDescription
blockobjectThe Block entity object.

.props

Kind: static property of DruxtBlockRegion


.name : string

The Block regions machine name.

Kind: static property of props
Default: "content"
Example

<DruxtBlockRegion name="header" :theme="theme" />

.theme : string

A Drupal theme machine name.

Kind: static property of props
Required:
Example

<DruxtBlockRegion theme="umami" />

.computed

Kind: static property of DruxtBlockRegion


.route : object

The current Route from the DruxtRouter vuex store.

Kind: static property of computed


.druxt

DruxtModule configuration.

Kind: static property of DruxtBlockRegion


.componentOptions(context) ⇒ ComponentOptions

Provides the available component naming options for the DruxtWrapper.

Kind: static method of druxt

ParamTypeDescription
contextobjectThe module component ViewModel.

.fetchConfig()

Fetches all blocks by region and theme.

Kind: static method of druxt


.propsData(context) ⇒ PropsData

Provides propsData for the DruxtWrapper.

Kind: static method of druxt

ParamTypeDescription
contextobjectThe module component ViewModel.

.slots() ⇒ ScopedSlots

Provides the scoped slots object for the Module render function.

A scoped slot is provided for each block in the region, regardless of visibility.

The default slot will render all blocks, filtered by route visibility.

Kind: static method of druxt
Returns: ScopedSlots - The Scoped slots object.
Example (DruxtBlockRegionName.vue)

<template>
  <div v-if="default">
    <slot />
  </div>

  <div v-else>
    <slot name="umami_branding" />
  </div>
</template>

.data()

Kind: static method of DruxtBlockRegion
Properties

NameTypeDescription
blocksArray.<objects>The Block JSON:API resources.

ComponentOptions : Array.<array>

Provides the available naming options for the Wrapper component.

Kind: global typedef
Example

[
  'DruxtBlockRegion[Name][Theme][Langcode]',
  'DruxtBlockRegion[Name][Theme]',
  'DruxtBlockRegion[Name][Langcode]',
  'DruxtBlockRegion[Name]',
  'DruxtBlockRegion[Default][Langcode]',
  'DruxtBlockRegion[Default]',
]

Example (Banner top - Umami)

[
  'DruxtBlockRegionBannerTopUmamiEn',
  'DruxtBlockRegionBannerTopUmami',
  'DruxtBlockRegionBannerTopEn',
  'DruxtBlockRegionBannerTop',
  'DruxtBlockRegionDefaultEn',
  'DruxtBlockRegionDefault',
]

PropsData : object

Provides propsData for use in the Wrapper component.

Kind: global typedef

ParamTypeDescription
blocksArray.<object>The Block JSON:API resources.
namestringThe Block regions machine name.
themestringA Drupal theme machine name.

Example

{
  blocks: [{
    attributes: {},
    id: '59104acd-88e1-43c3-bd5f-35800f206394',
    links: {},
    relationships: {},
    type: 'block--block',
  }],
  name: 'banner_top,
  theme: 'umami',
}

ScopedSlots : object

Provides scoped slots for use in the Wrapper component.

Kind: global typedef

ParamTypeDescription
[drupal_internal__id]functionSlot per block.
defaultfunctionAll blocks, filtered by route visibility.

Example (DruxtBlockRegionName.vue)

<template>
  <div v-if="default">
    <slot />
  </div>

  <div v-else>
    <slot name="umami_branding" />
  </div>
</template>