Die Möglichkeit Blöcke als wiederverwendbare Blöcke zu speichern, haben wir hier schon erläutert. Sie eignen sich besonders dafür Textbausteine, die man häufig verwendet, unkompliziert an vielen Stellen einzusetzen. Ihre besondere Eigenschaft ist, dass wenn solch ein Block geändert wird, sich diese Änderung auf alle Vorkommen auswirkt. Dies kann ein Vorteil sein, z. B. wenn man in solch einem Block Autoren-Infos unterbringt und diese sich von Zeit zu Zeit ändern oder ergänzt werden. So sind die Infos immer überall aktuell. Gleichzeitig kann das aber auch ein Nachteil sein bzw. eine Einschränkung. Wiederverwendbare Blöcke können nicht für wechselnde Inhalte genutzt werden.
Für einen Absatz bzw. einen Absatzblock, der optisch hervorgehoben werden soll, dessen Inhalt aber immer abweicht, kann solch ein Wiederverwendbarer Block nicht genutzt werden. Als “Krücke” konnte man solch einen Widerverwendbaren Block nach dem Einfügen wieder in einen Normalen Block umwandeln. Somit hatte man die “Eigenschaften” des Wiederverwendbaren Blocks, konnte aber den Inhalt anpassen. Es gibt aber elegantere Alternativen.
Hier im Blog, verfassen wir manchmal Texte, die einzelne Absätze optisch hervorheben. Intern nennen wir sie Hinweise. Es gibt nun zwei Möglichkeiten, dies umzusetzen.
Dies ist ein Hinweis. Dies ist ein Hinweis. Dies ist ein Hinweis. Dies ist ein Hinweis. Dies ist ein Hinweis. Dies ist ein Hinweis. Dies ist ein Hinweis. Dies ist ein Hinweis. Dies ist ein Hinweis. Dies ist ein Hinweis. Dies ist ein Hinweis. Dies ist ein Hinweis. Dies ist ein Hinweis. Dies ist mein Hinweis. Dies ist ein Hinweis. Dies ist ein Hinweis.
Blöcken eine CSS-Klasse zuweisen
Eine Möglichkeit einzelne Blöcke individuell zu gestalten ist es, ihnen eine CSS-Klasse zuzuweisen und die entsprechende Anweisung dann entweder im Custom CSS oder aber (noch besser) in der CSS-Datei des (Child-)Themes zu notieren.
Im Beispielfall würde man also die Klasse hinweis bei den Blockeigenschaften eintragen und im CSS die folgende Notierung hinterlegen:
.hinweis {
background: rgba(0,153,170,.14);
border-left: 5px solid #09a;
border-radius: 5px;
padding: 1rem 1.25rem;
}Blöcken einen eigenen Stil zuweisen
Es gibt aber auch die Möglichkeit einem bestehenden Block einen zusätzlichen Stil zuzuweisen. Dazu benötigt man eine entsprechende Funktion:
register_block_style(
'core/paragraph',
array(
'name' => 'hinweis',
'label' => __( 'Absatz mit wichtigem Hinweis.', 'textdomain' ),
)
);Im oberen Codebeispiel wird nun lediglich festgelegt welcher Block einen Stil erhalten soll (core/paragraph), wie der Stil heißen soll (hinweis) und wie der Stil beschriftet/beschrieben sein soll (label).
Was hier noch fehlt, sind Angaben darüber wie der Stil sich denn nun auf das Design des Blocks auswirken soll. Zum einen können wir die Funktion so belassen, müssen aber wissen, dass ein Block, der mit diesem Stil versehen wird automatisch die Klasse .is-style-hinweis erhält. Man könnte also, ähnlich wie im Beispiel oben einfach das CSS für die Website ergänzen.
.is-style-hinweis {
background: rgba(0,153,170,.14);
border-left: 5px solid #09a;
border-radius: 5px;
padding: 1rem 1.25rem;
}Da das CSS aber nicht sehr umfangreich ist, gibt es auch die Möglichkeit es direkt in der Funktion zu notieren:
register_block_style(
'core/paragraph',
array(
'name' => 'hinweis',
'label' => __( 'Absatz mit wichtigem Hinweis.', 'textdomain' ),
'inline_style' => '.is-style-hinweis {
background: rgba(0,153,170,.14);
border-left: 5px solid #09a;
border-radius: 5px;
padding: 1rem 1.25rem;
}',
)
);Der Vorteil das CSS schon inline zu notieren ist zudem der, dass es dann auch im Backend angezeigt wird. Möchte man den Code auslagern, muss man ihn für die Anzeige im Backend separat “aufrufen”.
wp_register_style('my-block-styles', get_template_directory_uri() . '/css/my-custom-block-styles.css', false);
Möchte man das CSS aus einer bestimmten Datei laden, kann man dies mit style_handle: angeben. Außerdem ist es möglich den Stil als Standard zu definieren 'is_default' => true.
Zwingend notwendig sind nur die Angabe über den Block, den man mit einem zusätzlichen Stil versehen will, sowie name und label.
Um herauszufinden wie der Block, den man erweitern möchte, sich nennt, muss man im Backend der WP-Installation die Browser Console öffnen und dann wp.blocks.getBlockTypes() aufrufen. Schon erhält man eine Liste aller verfügbaren Blöcke.
Mit der Methode Blöcken einen Stil zuzuweisen, kann man unterschiedliche Inhalte mit einem einheitlichen Aussehen verbinden. Änderungen, die das Design festlegen, können dann zentral über die Funktion (wenn inline-Style) oder die CSS-Datei getätigt werden. Sollte das Design einmal nicht greifen, wird der Standard-Stil des jeweiligen Blocks genutzt.
Image(s) licensed by Ingram Image/adpic.
Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.
