This document describes the steps to create a configurable temperature display block module for Drupal 8. It involves: 1. Defining the module and block plugin. 2. Making the block configurable by adding a configuration form to set the city, and saving it in the block settings. 3. Providing a default city configuration that can be installed, and loading it on block build if no city is set. 4. Making the default configuration editable by adding a configuration form page under the admin menu.

1. Drupal 8: Sample ModuleDrupal 8: Sample Module
Introducing Block Plugins & Configuration FormsIntroducing Block Plugins & Configuration Forms
Drupal Meetup StuttgartDrupal Meetup Stuttgart
03/05/2015

2. 1. Tell Drupal about the1. Tell Drupal about the
modulemodule

3. name: Temperature
type: module
description: 'Creates a configurable block showing the local temperature'
package: Meetup
version: '1.0.0'
core: '8.x'
modules/custom/temperature/temperature.info.yml

5. 2. Create a simple block2. Create a simple block
pluginplugin

6. <?php
/**
* @file
* Contains DrupaltemperaturePluginBlockTemperatureBlock.
*/
namespace DrupaltemperaturePluginBlock;
use DrupalCoreBlockBlockBase;
/**
* Provides a 'Temperature' block.
*
* @Block(
* id = "temperature",
* admin_label = @Translation("Local temperature"),
* category = @Translation("Meetup")
* )
*/
class TemperatureBlock extends BlockBase {
public function build() {
return [
'#markup' => 'Seems cold outside!',
];
}
}
modules/custom/temperature/src/Plugin/Block/TemperatureBlock.php

7. use GuzzleHttpClient;
class TemperatureBlock extends BlockBase {
public function build() {
$city = 'Stuttgart, DE'
$client = new Client();
$response = $client->get("http://api.openweathermap.org/data/2.5/weather?q=$city");
if ($response->getStatusCode() == '200') {
$result = json_decode($response->getBody());
$markup = "Current temperature in<br>$city:<br>";
$markup .= round($result->main->temp - 273.15) . '° C';
}
else {
$markup = 'Sorry, something went wrong!';
}
return [
'#markup' => $markup,
];
}
}
Adding the "real" content

9. 3. Make block instances3. Make block instances
configurableconfigurable

10. block.settings.temperature:
type: block_settings
label: 'Temperature block'
mapping:
city:
type: string
label: 'City for temperature display'
modules/custom/temperature/config/schema/temperature.schema.yml

11. use DrupalCoreBlockBlockBase;
use DrupalCoreFormFormStateInterface;
class TemperatureBlock extends BlockBase {
public function build() {
$city = $this->configuration['city'];
...
}
public function buildConfigurationForm(array $form, FormStateInterface $form_state) {
$form['city'] = array(
'#title' => 'Location',
'#type' => 'textfield',
'#default_value' => $this->configuration['city'],
);
return $form;
}
public function submitConfigurationForm(array &$form, FormStateInterface $form_state) {
$this->configuration['city'] = $form_state->getValue('city');
$this->blockSubmit($form, $form_state);
}
}
modules/custom/temperature/src/Plugin/Block/TemperatureBlock.php

13. 4. Provide a default4. Provide a default
configurationconfiguration

14. temperature.settings:
type: mapping
label: 'Temperature settings'
mapping:
city:
type: string
label: 'Default city for temperature display'
block.settings.temperature:
type: block_settings
label: 'Temperature block'
mapping:
city:
type: string
label: 'City for temperature display'
modules/custom/temperature/config/schema/temperature.schema.yml
modules/custom/temperature/config/install/temperature.settings.yml
city: 'Stuttgart,DE'

15. ...
class TemperatureBlock extends BlockBase {
public function defaultConfiguration() {
$config = Drupal::config('temperature.settings')->get();
return $config;
}
public function build() {
...
}
public function buildConfigurationForm(array $form, FormStateInterface $form_state) {
$form['city'] = array(
'#title' => 'Location',
'#type' => 'textfield',
'#default_value' => $this->configuration['city'],
);
return $form;
}
public function submitConfigurationForm(array &$form, FormStateInterface $form_state) {
$this->configuration['city'] = $form_state->getValue('city');
$this->blockSubmit($form, $form_state);
}
}
modules/custom/temperature/src/Plugin/Block/TemperatureBlock.php

17. 5. Make default5. Make default
configuration editableconfiguration editable

18. temperature.settings:
path: '/admin/config/system/temperature'
defaults:
_form: 'DrupaltemperatureFormSettingsForm'
_title: 'Temperature settings'
requirements:
_permission: 'administer site configuration'
modules/custom/temperature/temperature.routing.yml

19. <?php
/**
* @file
* Contains DrupaltemperatureFormSettingsForm
*/
namespace DrupaltemperatureForm;
use DrupalCoreFormConfigFormBase;
use DrupalCoreFormFormStateInterface;
class SettingsForm extends ConfigFormBase {
public function buildForm(array $form, FormStateInterface $form_state) {
$form = parent::buildForm($form, $form_state);
$form['city'] = [
'#title' => 'Default Location',
'#type' => 'textfield',
'#default_value' => $this->config('temperature.settings')->get('city'),
];
return $form;
}
public function submitForm(array &$form, FormStateInterface $form_state) {
$this->config('temperature.settings')
->set('city', $form_state->getValue('city'))
->save();
parent::submitForm($form, $form_state);
}
protected function getEditableConfigNames() {
return ['temperature.settings'];
}
public function getFormId() {
return 'temperature_settings';
}
}
modules/custom/temperature/src/Form/SettingsForm.php

21. Thank You!Thank You!
http://slides.com/drubb
http://slideshare.net/drubb