Blocks entwickeln

Für die Entwicklung eigener Blocks, sind die Ordner für die dateien der Klassen und Templates nun mit dem "Block Template" gut vorbereitet. Im folgenden Beispiel wird ein Block-Element gebaut, dass Text in mehrere Spalten darstellen kann. Es enthällt optional die Möglichkeit Aussenabstand (margin) für den ganzen Block zu setzen.

Controller / Model

Ordner/Datei: app/src/MyElementColumn.php (ganze Datei)

<?php

namespace SilverStripe\SSBootstrap;
 use DNADesign\Elemental\Models\BaseElement;
 use SilverStripe\Forms\FieldList;
 use SilverStripe\Forms\HTMLEditor\HTMLEditorField;
 use SilverStripe\Forms\HTMLEditor\TinyMCEConfig;
 use SilverStripe\ORM\FieldType\DBField;
 use SilverStripe\Forms\DropdownField;
 use SilverStripe\Forms\TextField;

class MyElementColumn extends BaseElement {

private static $db = [
 'ColumnHTML' => 'HTMLText',
 'Columns' => 'Text',
 'ColumnsMargin' => 'Text'
];

private static $table_name = 'BlockColumn';

private static $icon = 'font-icon-columns';
private static $singular_name = 'Block Spalten';
private static $plural_name = 'Block Spalten';
private static $description = 'Block für Mehrspaltigen Inhalt';

private static $controller_template = 'MyElementColumn';

public function getCMSFields()
 {
 $fields = parent::getCMSFields();
 $columnarray = [
 '' => 'Keine Spalten',
 '1' => 'Text 1 Spalte',
 '2' => 'Text in 2 Spalten',
 '3' => 'Text in 3 Spalten',
 '4' => 'Text in 4 Spalten'
 ];

$fields->addFieldToTab('Root.Main', HTMLEditorField::create('ColumnHTML','Spalten Editor'));
 $fields->addFieldToTab('Root.Main', new DropdownField('Columns', 'Spalten 1, 2, 3 oder 4:', $columnarray));
 $fields->addFieldToTab('Root.Main', TextField::create('ColumnsMargin','Aussenabstand (margin - Bsp: 5px 50% 0px 0px)'));
 return $fields;
 }

public function getType() {
 return 'Spalten Block';
 }
 public function getSummary() {
 return DBField::create_field('HTMLText', $this->ColumnHTML)->Summary(20);
 }
 protected function provideBlockSchema() {
 $blockSchema = parent::provideBlockSchema();
 $blockSchema['content'] = "SpaltenBlock: ".$this->getSummary();
 return $blockSchema;
 }
}

Erläuterung: Die Codeteile einzeln betrachtet (und Kommentiert):

• Namespaces verweisen auf den Templatepfad und laden die benutzten Klassen

  namespace SilverStripe\SSBootstrap; > Templatepfad
   use DNADesign\Elemental\Models\BaseElement; > Basis Block-Element-Klasse
   use SilverStripe\Forms\FieldList; > Listenfeld-Klasse
   use SilverStripe\Forms\HTMLEditor\HTMLEditorField; > Editor
   use SilverStripe\Forms\HTMLEditor\TinyMCEConfig; > Editor Config Optional
   use SilverStripe\ORM\FieldType\DBField; > Datenbankzugriff (Anzeige des Blockinhalts im Adminbereich)
   use SilverStripe\Forms\DropdownField; > DropDown-Klasse
   use SilverStripe\Forms\TextField; > Textfeld

• Klasse und Extendierung

  class MyElementColumn extends BaseElement { > Die BaseElemnt Klasse erzeugt die Blocks im Backend

• Datenbankfelder

  private static $db = [ > Erzeugt die Tabelle "MyElementColumn"
   'ColumnHTML' => 'HTMLText', > Editor Feld
   'Columns' => 'Text', > Textfeld zum speichern der Dropdownauswahl
   'ColumnsMargin' => 'Text' > Textfeld für Aussenabstand
  ];

• Details zur Klasse

  private static $table_name = 'BlockColumn'; > Name der Tabelle (Silverstripe 5)
  
  private static $icon = 'font-icon-columns'; > Silverstripe Font Icons: https://gbaumeister.github.io/ss4-icons/ 
  private static $singular_name = 'Block Spalten'; > Anzeigename
  private static $plural_name = 'Block Spalten'; > Anzeigename Mehrzahl
  private static $description = 'Block für Mehrspaltigen Inhalt'; > Anzeige Beschreibung
  
  private static $controller_template = 'MyElementColumn'; > Pfadangabe zum Template: MyElementColumn.ss

• CMS Felder im Adminbereich darstellen
  

  public function getCMSFields()
   {
   $fields = parent::getCMSFields(); > Erzeugt die Anzeigefelder im Backend
  
   $columnarray = [ > Array für das Dropdown
   '' => 'Keine Spalten',
   '1' => 'Text 1 Spalte',
   '2' => 'Text in 2 Spalten',
   '3' => 'Text in 3 Spalten',
   '4' => 'Text in 4 Spalten'
   ];
  
   $fields->addFieldToTab('Root.Main', HTMLEditorField::create('ColumnHTML','Spalten Editor')); > Editor
   $fields->addFieldToTab('Root.Main', new DropdownField('Columns', 'Spalten 1, 2, 3 oder 4:', $columnarray)); > Dropdown
   $fields->addFieldToTab('Root.Main', TextField::create('ColumnsMargin','Aussenabstand (margin - Bsp: 5px 50% 0px 0px)')); > Textfeld Margin
   return $fields;
   }

• Typenbezeichnung des Block-Elements

  public function getType() { > Wird in der Auswahl der Block-Elemente angezeigt
   return 'Spalten Block';
  }

• Inhaltsanzeige des Block-Elements

  public function getSummary() { > Holt die ersten 20 Worte aus der Datenbank
   return DBField::create_field('HTMLText', $this->ColumnHTML)->Summary(20);
  }

• Blockschema des Elements

  protected function provideBlockSchema() { > Anzeige des Blocks im Adminbereich
   $blockSchema = parent::provideBlockSchema();
   $blockSchema['content'] = "SpaltenBlock: ".$this->getSummary();
   return $blockSchema;
  }

Silverstripe Icons

Praktisch für die Anzeige im Backend, Silverstripe Font Icons: https://gbaumeister.github.io/ss4-icons/

Das Template für den Block

Ordner/Datei: app/templates/DNADesign/Elemental/Layout/MyElementColumn.ss (ganze Datei)

<div class="container {$URLSegment}" id="elemental">

<h3 class="inlinemargin" <% if $ColumnsMargin %>style="margin: {$ColumnsMargin};"<% end_if %>>$Title</h3>
 <div class="<% if $Columns %>spalten<% end_if %> inlinemargin" 
 <% if $Columns %>style="column-count: {$Columns};hyphens: auto;padding:0;column-rule: 1px solid grey;column-gap: 40px;<% end_if %>
 <% if $ColumnsMargin %>margin: {$ColumnsMargin};<% end_if %>
 ">
 $ColumnHTML
 </div>
 <p>&nbsp;</p>
 
</div>

Erläuterung: Die Codeteile einzeln betrachtet (und Kommentiert):

• Block Identifikation

  <div class="container {$URLSegment}" id="elemental"> > Bootstrap-Container ID und Klasse

• Titel

  <h3 class="inlinemargin" 
  <% if $ColumnsMargin %>style="margin: {$ColumnsMargin};"<% end_if %>
  >$Title</h3> > Titel Klasse und Aussenabstand

• Div-Rahmen für Spalten und Aussenabstand

  <div class="
   <% if $Columns %>spalten<% end_if %> inlinemargin" > Klassenbezeichnungen - spalten und inlinemargin
   <% if $Columns %>style=" > CSS Inline-Stile für Spalten und Trennungen, falls Columns verwendet
     column-count: {$Columns};
     hyphens: auto;
     padding:0;
     column-rule: 1px solid grey;
     column-gap: 40px;<% end_if %>
   <% if $ColumnsMargin %>margin: {$ColumnsMargin};<% end_if %> > Aussenabstand, falls verwendet
   ">

• Editor-Inhalt

  $ColumnHTML > Editorinhalt

• Abstand

   </div>
   <p>&nbsp;</p>
  </div>

CSS für den Block

Für die Desctop-Ansicht wird keine zusätzliches CSS verwendet. Alle Stile kommen aus dem Basis-Template. Für Pad und Smartphone hingegen sollen der Aussenabstand und die Anzahl der Spalten zurückgesetzt werden. (Ich benutze für die Blöcke eine eigene CSS-Datei "ElementalBlock.css" zur Übersicht und zur besseren Kontrolle der Module beim Zügeln und Weiterentwickeln.)

Das erfolgt im CSS der Media-Query:

@media only screen and (max-width : 768px) {
 .inlinemargin {
    margin: 0 !important;
 }
 .spalten {
    column-count: 2!important;
 }
}
@media only screen and (max-width : 480px) {
 .spalten {
   column-count: 1!important;
   padding: 0;
   column-rule: none;
   column-gap: 0px;
 }
}

Unter 768px Bildschirmbreite werden maximal 2 Textspalten gebildet, der Aussenabstand wird auf 0 gesetzt.
Unter 480px Bildschirmbreite werden die Spalten aufgehoben die Abstände zurückgesetzt.