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
- class \Drupal\Component\Plugin\PluginBase implements DerivativeInspectionInterface, PluginInspectionInterface
- class \Drupal\Component\Plugin\ContextAwarePluginBase implements ContextAwarePluginInterface
- class \Drupal\Core\Plugin\ContextAwarePluginBase implements CacheableDependencyInterface, ContextAwarePluginInterface uses DependencySerializationTrait, StringTranslationTrait, TypedDataTrait
- class \Drupal\Core\Block\BlockBase implements BlockPluginInterface, PluginWithFormsInterface, PreviewFallbackInterface uses BlockPluginTrait, ContextAwarePluginAssignmentTrait
- class \Drupal\pdb\Plugin\Block\PdbBlock implements ContainerFactoryPluginInterface, FrameworkAwareBlockInterface
- class \Drupal\pdb_vue\Plugin\Block\VueBlock implements ContainerFactoryPluginInterface
- class \Drupal\pdb\Plugin\Block\PdbBlock implements ContainerFactoryPluginInterface, FrameworkAwareBlockInterface
- class \Drupal\Core\Block\BlockBase implements BlockPluginInterface, PluginWithFormsInterface, PreviewFallbackInterface uses BlockPluginTrait, ContextAwarePluginAssignmentTrait
- class \Drupal\Core\Plugin\ContextAwarePluginBase implements CacheableDependencyInterface, ContextAwarePluginInterface uses DependencySerializationTrait, StringTranslationTrait, TypedDataTrait
- class \Drupal\Component\Plugin\ContextAwarePluginBase implements ContextAwarePluginInterface
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\BlockView 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
Name | Modifiers | Type | Description | Overrides |
---|---|---|---|---|
BlockPluginInterface:: |
constant | Indicates the block label (title) should be displayed to end users. | ||
BlockPluginTrait:: |
protected | property | The transliteration service. | |
BlockPluginTrait:: |
public | function | ||
BlockPluginTrait:: |
protected | function | Returns generic default configuration for block plugins. | |
BlockPluginTrait:: |
protected | function | Indicates whether the block should be shown. | 16 |
BlockPluginTrait:: |
public | function | 16 | |
BlockPluginTrait:: |
public | function | 13 | |
BlockPluginTrait:: |
public | function | 3 | |
BlockPluginTrait:: |
public | function | ||
BlockPluginTrait:: |
public | function | 19 | |
BlockPluginTrait:: |
public | function | 1 | |
BlockPluginTrait:: |
public | function | 1 | |
BlockPluginTrait:: |
public | function | 3 | |
BlockPluginTrait:: |
public | function | ||
BlockPluginTrait:: |
public | function | ||
BlockPluginTrait:: |
public | function | ||
BlockPluginTrait:: |
public | function | Sets the transliteration service. | |
BlockPluginTrait:: |
protected | function | Wraps the transliteration service. | |
BlockPluginTrait:: |
public | function | Most block plugins should not override this method. To add validation for a specific block type, override BlockBase::blockValidate(). | 1 |
ContextAwarePluginAssignmentTrait:: |
protected | function | Builds a form element for assigning a context to a given slot. | |
ContextAwarePluginAssignmentTrait:: |
protected | function | Wraps the context handler. | |
ContextAwarePluginBase:: |
protected | property | The data objects representing the context of this plugin. | |
ContextAwarePluginBase:: |
private | property | Data objects representing the contexts passed in the plugin configuration. | |
ContextAwarePluginBase:: |
protected | function |
Overrides ContextAwarePluginBase:: |
|
ContextAwarePluginBase:: |
public | function |
The cache contexts associated with this object. Overrides CacheableDependencyInterface:: |
9 |
ContextAwarePluginBase:: |
public | function |
The maximum age for which this object may be cached. Overrides CacheableDependencyInterface:: |
7 |
ContextAwarePluginBase:: |
public | function |
The cache tags associated with this object. Overrides CacheableDependencyInterface:: |
4 |
ContextAwarePluginBase:: |
public | function |
This code is identical to the Component in order to pick up a different
Context class. Overrides ContextAwarePluginBase:: |
|
ContextAwarePluginBase:: |
public | function |
Overrides ContextAwarePluginBase:: |
|
ContextAwarePluginBase:: |
public | function |
Overrides ContextAwarePluginBase:: |
|
ContextAwarePluginBase:: |
public | function |
Gets a mapping of the expected assignment names to their context names. Overrides ContextAwarePluginInterface:: |
|
ContextAwarePluginBase:: |
public | function |
Gets the defined contexts. Overrides ContextAwarePluginInterface:: |
|
ContextAwarePluginBase:: |
public | function |
Gets the value for a defined context. Overrides ContextAwarePluginInterface:: |
|
ContextAwarePluginBase:: |
public | function |
Gets the values for all defined contexts. Overrides ContextAwarePluginInterface:: |
|
ContextAwarePluginBase:: |
public | function |
Set a context on this plugin. Overrides ContextAwarePluginBase:: |
|
ContextAwarePluginBase:: |
public | function |
Sets a mapping of the expected assignment names to their context names. Overrides ContextAwarePluginInterface:: |
|
ContextAwarePluginBase:: |
public | function |
Sets the value for a defined context. Overrides ContextAwarePluginBase:: |
|
ContextAwarePluginBase:: |
public | function |
Validates the set values for the defined contexts. Overrides ContextAwarePluginInterface:: |
|
ContextAwarePluginBase:: |
public | function | Implements magic __get() method. | |
DependencySerializationTrait:: |
protected | property | An array of entity type IDs keyed by the property name of their storages. | |
DependencySerializationTrait:: |
protected | property | An array of service IDs keyed by property name used for serialization. | |
DependencySerializationTrait:: |
public | function | 1 | |
DependencySerializationTrait:: |
public | function | 2 | |
MessengerTrait:: |
protected | property | The messenger. | 29 |
MessengerTrait:: |
public | function | Gets the messenger. | 29 |
MessengerTrait:: |
public | function | Sets the messenger. | |
PdbBlock:: |
protected | function | Add serialized entity to the JS Contexts. | |
PdbBlock:: |
public | function |
Attaches the framework required by the component. Overrides FrameworkAwareBlockInterface:: |
2 |
PdbBlock:: |
public | function |
Attaches anything the component needs in the HTML <head>. Overrides FrameworkAwareBlockInterface:: |
|
PdbBlock:: |
protected | function | Build settings component settings form. | |
PdbBlock:: |
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:: |
|
PdbBlock:: |
protected | function | Create Form API elements from component configuration. | |
PdbBlock:: |
public | function | Returns the component definition. | |
PdbBlock:: |
protected | function | Get context value for Entity context. | |
PdbBlock:: |
protected | function | Get the value of contexts. | |
PdbBlock:: |
protected | function | Gets the actual default field value of a given field element defaults. | |
PdbBlock:: |
protected | function | Get an array of serialized JS contexts. | |
PdbBlock:: |
public | function |
Most block plugins should not override this method. To add submission
handling for a specific block type, override BlockBase::blockSubmit(). Overrides BlockPluginTrait:: |
|
PluginBase:: |
protected | property | Configuration information passed into the plugin. | 1 |
PluginBase:: |
protected | property | The plugin implementation definition. | 1 |
PluginBase:: |
protected | property | The plugin_id. | |
PluginBase:: |
constant | A string which is used to separate base plugin IDs from the derivative ID. | ||
PluginBase:: |
public | function |
Gets the base_plugin_id of the plugin instance. Overrides DerivativeInspectionInterface:: |
|
PluginBase:: |
public | function |
Gets the derivative_id of the plugin instance. Overrides DerivativeInspectionInterface:: |
|
PluginBase:: |
public | function |
Gets the definition of the plugin implementation. Overrides PluginInspectionInterface:: |
3 |
PluginBase:: |
public | function |
Gets the plugin_id of the plugin instance. Overrides PluginInspectionInterface:: |
|
PluginBase:: |
public | function | Determines if the plugin is configurable. | |
PluginWithFormsTrait:: |
public | function | ||
PluginWithFormsTrait:: |
public | function | ||
StringTranslationTrait:: |
protected | property | The string translation service. | 1 |
StringTranslationTrait:: |
protected | function | Formats a string containing a count of items. | |
StringTranslationTrait:: |
protected | function | Returns the number of plurals supported by a given language. | |
StringTranslationTrait:: |
protected | function | Gets the string translation service. | |
StringTranslationTrait:: |
public | function | Sets the string translation service to use. | 2 |
StringTranslationTrait:: |
protected | function | Translates a string to the current language or to a given language. | |
TypedDataTrait:: |
protected | property | The typed data manager used for creating the data types. | |
TypedDataTrait:: |
public | function | Gets the typed data manager. | 2 |
TypedDataTrait:: |
public | function | Sets the typed data manager. | 2 |
VueBlock:: |
protected | property | Stores the configuration factory. | |
VueBlock:: |
public | function |
Attaches any libraries required by the component. Overrides PdbBlock:: |
|
VueBlock:: |
public | function |
Attaches JavaScript settings required by the component. Overrides PdbBlock:: |
|
VueBlock:: |
public | function |
Builds and returns the renderable array for this block plugin. Overrides PdbBlock:: |
|
VueBlock:: |
public | function | Create a string of Vue Component property parameters. | |
VueBlock:: |
public | function | Convert camelCase to kebab-case. | |
VueBlock:: |
public static | function |
Creates an instance of the plugin. Overrides PdbBlock:: |
|
VueBlock:: |
public | function |
Creates a VueBlock instance. Overrides PdbBlock:: |