You are here

class VueBlock in Decoupled Blocks: Vue.js 8

Exposes a Vue component as a block.

Plugin annotation


@Block(
  id = "vue_component",
  admin_label = @Translation("Vue component"),
  deriver = "\Drupal\pdb_vue\Plugin\Derivative\VueBlockDeriver"
)

Hierarchy

Expanded class hierarchy of VueBlock

1 file declares its use of VueBlock
VueBlockTest.php in tests/src/Unit/Plugin/Block/VueBlockTest.php

File

src/Plugin/Block/VueBlock.php, line 20

Namespace

Drupal\pdb_vue\Plugin\Block
View source
class VueBlock extends PdbBlock implements ContainerFactoryPluginInterface {

  /**
   * Stores the configuration factory.
   *
   * @var \Drupal\Core\Config\ConfigFactoryInterface
   */
  protected $configFactory;

  /**
   * Creates a VueBlock instance.
   *
   * @param array $configuration
   *   A configuration array containing information about the plugin instance.
   * @param string $plugin_id
   *   The plugin_id for the plugin instance.
   * @param mixed $plugin_definition
   *   The plugin implementation definition.
   * @param \Drupal\Core\Config\ConfigFactoryInterface $config_factory
   *   The factory for configuration objects.
   */
  public function __construct(array $configuration, $plugin_id, $plugin_definition, ConfigFactoryInterface $config_factory) {
    parent::__construct($configuration, $plugin_id, $plugin_definition);
    $this->configFactory = $config_factory;
  }

  /**
   * {@inheritdoc}
   */
  public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) {
    return new static($configuration, $plugin_id, $plugin_definition, $container
      ->get('config.factory'));
  }

  /**
   * {@inheritdoc}
   */
  public function build() {
    $info = $this
      ->getComponentInfo();
    $machine_name = $info['machine_name'];
    $config = $this->configFactory
      ->get('pdb_vue.settings');
    $template = '';
    $build = parent::build();
    if (isset($config) && $config
      ->get('use_spa') && isset($info['component']) && $info['component']) {

      // Create markup string of component properties.
      $props_string = $this
        ->buildPropertyString();
      $build['#allowed_tags'] = [
        $machine_name,
      ];
      $build['#markup'] = '<' . $machine_name . $props_string . ' instance-id="' . $this->configuration['uuid'] . '"></' . $machine_name . '>';
    }
    else {

      // Use raw HTML if a template is provided.
      if (!empty($info['template'])) {
        $template = file_get_contents($info['path'] . '/' . $info['template']);
      }
      $build['#markup'] = VueMarkup::create('<div class="' . $machine_name . '" id="' . $this->configuration['uuid'] . '">' . $template . '</div>');
    }
    return $build;
  }

  /**
   * {@inheritdoc}
   */
  public function attachSettings(array $component) {
    $attached = [];
    $config = $this->configFactory
      ->get('pdb_vue.settings');
    if (isset($config)) {
      $attached['drupalSettings']['pdbVue']['developmentMode'] = $config
        ->get('development_mode');
      if ($config
        ->get('use_spa')) {
        $attached['drupalSettings']['pdbVue']['spaElement'] = $config
          ->get('spa_element');
      }
    }
    else {
      $attached['drupalSettings']['pdbVue']['developmentMode'] = FALSE;
    }
    return $attached;
  }

  /**
   * {@inheritdoc}
   */
  public function attachLibraries(array $component) {
    $config = $this->configFactory
      ->get('pdb_vue.settings');
    $version = $config
      ->get('version') == 'vue3' ? 'vue3' : 'vue';

    // Get inline assets.
    $libraries = parent::attachLibraries($component);

    // Add existing libraries which have already been registered with Drupal.
    if (isset($component['libraries'])) {

      // Add the main Vue library if there are no inline libraries. Normally an
      // inline library will already have Vue as a dependency.
      if (empty($libraries)) {
        $libraries[] = "pdb_vue/{$version}";
      }

      // Add libraries attached in the block's .info file. An inline script will
      // automatically have these libraries as dependencies.
      // @see pdb_vue_library_info_alter().
      $libraries = array_merge($libraries, $component['libraries']);
    }
    if (isset($config) && $config
      ->get('use_spa') && isset($component['component']) && $component['component']) {
      $libraries[] = "pdb_vue/{$version}.spa-init";
    }
    $library_attachments = [
      'library' => $libraries,
    ];
    return $library_attachments;
  }

  /**
   * Create a string of Vue Component property parameters.
   *
   * @return string
   *   A string of property elements to inject into the DOM directive.
   */
  public function buildPropertyString() {
    $props_string = '';
    if (isset($this->configuration['pdb_configuration'])) {
      $props = $this->configuration['pdb_configuration'];
      foreach ($props as $field => $value) {

        // Determine if the property should use v-bind (:shorthand) due to the
        // value being numeric.
        $bind = '';
        if (is_numeric($value)) {
          $bind = ':';
        }

        // Convert camelCase to kebab-case.
        $field = $this
          ->convertKebabCase($field);

        // Create the string of properties.
        $props_string .= ' ' . $bind . $field . '="' . $value . '"';
      }
    }
    return $props_string;
  }

  /**
   * Convert camelCase to kebab-case.
   *
   * See https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case.
   */
  public function convertKebabCase($value) {
    return ltrim(strtolower(preg_replace('/[A-Z]([A-Z](?![a-z]))*/', '-$0', $value)), '-');
  }

}

Members

Namesort descending Modifiers Type Description Overrides
BlockPluginInterface::BLOCK_LABEL_VISIBLE constant Indicates the block label (title) should be displayed to end users.
BlockPluginTrait::$transliteration protected property The transliteration service.
BlockPluginTrait::access public function
BlockPluginTrait::baseConfigurationDefaults protected function Returns generic default configuration for block plugins.
BlockPluginTrait::blockAccess protected function Indicates whether the block should be shown. 16
BlockPluginTrait::blockForm public function 16
BlockPluginTrait::blockSubmit public function 13
BlockPluginTrait::blockValidate public function 3
BlockPluginTrait::calculateDependencies public function
BlockPluginTrait::defaultConfiguration public function 19
BlockPluginTrait::getConfiguration public function 1
BlockPluginTrait::getMachineNameSuggestion public function 1
BlockPluginTrait::getPreviewFallbackString public function 3
BlockPluginTrait::label public function
BlockPluginTrait::setConfiguration public function
BlockPluginTrait::setConfigurationValue public function
BlockPluginTrait::setTransliteration public function Sets the transliteration service.
BlockPluginTrait::transliteration protected function Wraps the transliteration service.
BlockPluginTrait::validateConfigurationForm public function Most block plugins should not override this method. To add validation for a specific block type, override BlockBase::blockValidate(). 1
ContextAwarePluginAssignmentTrait::addContextAssignmentElement protected function Builds a form element for assigning a context to a given slot.
ContextAwarePluginAssignmentTrait::contextHandler protected function Wraps the context handler.
ContextAwarePluginBase::$context protected property The data objects representing the context of this plugin.
ContextAwarePluginBase::$contexts Deprecated private property Data objects representing the contexts passed in the plugin configuration.
ContextAwarePluginBase::createContextFromConfiguration protected function Overrides ContextAwarePluginBase::createContextFromConfiguration
ContextAwarePluginBase::getCacheContexts public function The cache contexts associated with this object. Overrides CacheableDependencyInterface::getCacheContexts 9
ContextAwarePluginBase::getCacheMaxAge public function The maximum age for which this object may be cached. Overrides CacheableDependencyInterface::getCacheMaxAge 7
ContextAwarePluginBase::getCacheTags public function The cache tags associated with this object. Overrides CacheableDependencyInterface::getCacheTags 4
ContextAwarePluginBase::getContext public function This code is identical to the Component in order to pick up a different Context class. Overrides ContextAwarePluginBase::getContext
ContextAwarePluginBase::getContextDefinition public function Overrides ContextAwarePluginBase::getContextDefinition
ContextAwarePluginBase::getContextDefinitions public function Overrides ContextAwarePluginBase::getContextDefinitions
ContextAwarePluginBase::getContextMapping public function Gets a mapping of the expected assignment names to their context names. Overrides ContextAwarePluginInterface::getContextMapping
ContextAwarePluginBase::getContexts public function Gets the defined contexts. Overrides ContextAwarePluginInterface::getContexts
ContextAwarePluginBase::getContextValue public function Gets the value for a defined context. Overrides ContextAwarePluginInterface::getContextValue
ContextAwarePluginBase::getContextValues public function Gets the values for all defined contexts. Overrides ContextAwarePluginInterface::getContextValues
ContextAwarePluginBase::setContext public function Set a context on this plugin. Overrides ContextAwarePluginBase::setContext
ContextAwarePluginBase::setContextMapping public function Sets a mapping of the expected assignment names to their context names. Overrides ContextAwarePluginInterface::setContextMapping
ContextAwarePluginBase::setContextValue public function Sets the value for a defined context. Overrides ContextAwarePluginBase::setContextValue
ContextAwarePluginBase::validateContexts public function Validates the set values for the defined contexts. Overrides ContextAwarePluginInterface::validateContexts
ContextAwarePluginBase::__get public function Implements magic __get() method.
DependencySerializationTrait::$_entityStorages protected property An array of entity type IDs keyed by the property name of their storages.
DependencySerializationTrait::$_serviceIds protected property An array of service IDs keyed by property name used for serialization.
DependencySerializationTrait::__sleep public function 1
DependencySerializationTrait::__wakeup public function 2
MessengerTrait::$messenger protected property The messenger. 29
MessengerTrait::messenger public function Gets the messenger. 29
MessengerTrait::setMessenger public function Sets the messenger.
PdbBlock::addEntityJsContext Deprecated protected function Add serialized entity to the JS Contexts.
PdbBlock::attachFramework public function Attaches the framework required by the component. Overrides FrameworkAwareBlockInterface::attachFramework 2
PdbBlock::attachPageHeader public function Attaches anything the component needs in the HTML <head>. Overrides FrameworkAwareBlockInterface::attachPageHeader
PdbBlock::buildComponentSettingsForm protected function Build settings component settings form.
PdbBlock::buildConfigurationForm public function Creates a generic configuration form for all block types. Individual block plugins can add elements to this form by overriding BlockBase::blockForm(). Most block plugins should not override this method unless they need to alter the generic form elements. Overrides BlockPluginTrait::buildConfigurationForm
PdbBlock::createElementsFromConfiguration protected function Create Form API elements from component configuration.
PdbBlock::getComponentInfo public function Returns the component definition.
PdbBlock::getContextEntityValue protected function Get context value for Entity context.
PdbBlock::getContextsValues protected function Get the value of contexts.
PdbBlock::getElementDefaultValue protected function Gets the actual default field value of a given field element defaults.
PdbBlock::getJsContexts protected function Get an array of serialized JS contexts.
PdbBlock::submitConfigurationForm public function Most block plugins should not override this method. To add submission handling for a specific block type, override BlockBase::blockSubmit(). Overrides BlockPluginTrait::submitConfigurationForm
PluginBase::$configuration protected property Configuration information passed into the plugin. 1
PluginBase::$pluginDefinition protected property The plugin implementation definition. 1
PluginBase::$pluginId protected property The plugin_id.
PluginBase::DERIVATIVE_SEPARATOR constant A string which is used to separate base plugin IDs from the derivative ID.
PluginBase::getBaseId public function Gets the base_plugin_id of the plugin instance. Overrides DerivativeInspectionInterface::getBaseId
PluginBase::getDerivativeId public function Gets the derivative_id of the plugin instance. Overrides DerivativeInspectionInterface::getDerivativeId
PluginBase::getPluginDefinition public function Gets the definition of the plugin implementation. Overrides PluginInspectionInterface::getPluginDefinition 3
PluginBase::getPluginId public function Gets the plugin_id of the plugin instance. Overrides PluginInspectionInterface::getPluginId
PluginBase::isConfigurable public function Determines if the plugin is configurable.
PluginWithFormsTrait::getFormClass public function
PluginWithFormsTrait::hasFormClass public function
StringTranslationTrait::$stringTranslation protected property The string translation service. 1
StringTranslationTrait::formatPlural protected function Formats a string containing a count of items.
StringTranslationTrait::getNumberOfPlurals protected function Returns the number of plurals supported by a given language.
StringTranslationTrait::getStringTranslation protected function Gets the string translation service.
StringTranslationTrait::setStringTranslation public function Sets the string translation service to use. 2
StringTranslationTrait::t protected function Translates a string to the current language or to a given language.
TypedDataTrait::$typedDataManager protected property The typed data manager used for creating the data types.
TypedDataTrait::getTypedDataManager public function Gets the typed data manager. 2
TypedDataTrait::setTypedDataManager public function Sets the typed data manager. 2
VueBlock::$configFactory protected property Stores the configuration factory.
VueBlock::attachLibraries public function Attaches any libraries required by the component. Overrides PdbBlock::attachLibraries
VueBlock::attachSettings public function Attaches JavaScript settings required by the component. Overrides PdbBlock::attachSettings
VueBlock::build public function Builds and returns the renderable array for this block plugin. Overrides PdbBlock::build
VueBlock::buildPropertyString public function Create a string of Vue Component property parameters.
VueBlock::convertKebabCase public function Convert camelCase to kebab-case.
VueBlock::create public static function Creates an instance of the plugin. Overrides PdbBlock::create
VueBlock::__construct public function Creates a VueBlock instance. Overrides PdbBlock::__construct