Cover Block in WordPress 6.5

Cover Block in WordPress 6.5 mit Aspect Ratio (Seitenverhältnis)

Eher zufällig habe ich entdeckt, dass beim Cover Block in WordPress 6.5 die neue Eigenschaft Aspect Ratio (Seitenverhältnis) dazugekommen ist. Das ist eine sehr interessante Eigenschaft. Warum das so ist, erläutere ich in diesem Beitrag. Damit starte ich auch eine Beitragsform, die ich als „Short News“ bezeichne: Ein kurzer Beitrag zu einem besonderen Detail.

Diese neue Eigenschaft ist insofern interessant, weil in dem Fall je nach Einstellung nicht mehr der Ausschnitt eines Bildes gezeigt wird, sondern das Seitenverhältnis beim Cover Block erhalten bleibt. Diese Eigenschaft gab es bis dato nur bei dem Bild Block.

Der Cover Block wird wie üblich beim Block Editor direkt im Editor z. B. über /cov eingeben oder durch Auswahl des Blocks bei Klick auf +.

Hier ein kurzes Video dazu:

Cover Block mit der neuen Eigenschaft in WordPress 6.5
Cover Block mit der neuen Eigenschaft Seitenverhältnis (Aspect Ratio) in WordPress 6.5

Wenn man einen Absatz Block mit Text im Cover Block integriert, kann man diesen Absatz Block in einen Gruppen Block einpassen und auf unterschiedliche Art gestalten:

Absatz Block im Gruppen Block integrieren
Absatz Block im Gruppen Block integrieren

Seitenverhältnis beim Cover Block

Wenn man „Original“ (das ist ist die Standardeinstellung) vorgesehen hat, dann bleibt das Seitenverhältnis nicht erhalten:

Das Seitenverhältnis (Aspect Ratio) bleibt bei WordPress 6.5 nicht erhalten, wenn "Original" eingestellt ist.
Das Seitenverhältnis (Aspect Ratio) bleibt bei WordPress 6.5 nicht erhalten, wenn „Original“ eingestellt ist.

Wenn man allerdings z. B. „quadratisch“ einstellt, dann wird das angegebene Verhältnis von Breite zu Höhe beibehalten.

Das Seitenverhältnis (Aspect Ratio) bleibt beim Cover Block in WordPress 6.5 erhalten, wenn z. B.  "quadratisch" eingestellt ist.
Das Seitenverhältnis (Aspect Ratio) bleibt beim Cover Block in WordPress 6.5 erhalten, wenn z. B. „quadratisch“ eingestellt ist.

Wie man den Cover Block in einem Abfrage Loop verwendet, habe ich in dem folgenden (allerdings schon etwas älteren) Beitrag beschrieben.

Cover Block mit Verlinkung

Aufgrund einer Anfrage im deutschsprachigen Support-Forum habe ich für die Verlinkung des Cover Blocks folgende interessante Lösung gefunden und getestet (Quelle: https://github.com/WordPress/gutenberg/issues/12684). Man erstellt z. B. wie gewohnt einen Link z. B. auf ein Leerzeichen in einem Absatz Block. Alternativ kann das natürlich auch ein Text wie z. B. „Ein See“ sein.

Unter dem genannten Link gibt es auch eine CSS-Lösung, die ich aber nicht getestet habe.

add_action( 'init', function(){
    register_block_style( 'core/cover', array(
        'name'         => 'full-link',
        'label'        => 'Link',
        'inline_style' => '.wp-block-cover.is-style-full-link a:after {
            display:block;
            position:absolute;
            left:0;
            top:0;
            width:100%;
            height:100%;
            content:"";
        }'
    ));
});

Diesen Code packt man entweder in die functions.php in dem Child Theme oder erstellt ein Snippet mit dem Plugin Code Snippets.

In dem Fall wird bei dem Cover Block unter Stile rechts ein zusätzlicher Stil „Link“ angezeigt. Den so erstellten Cover Block kann man dann auch noch zusätzlich als Block Pattern speichern, so dass es wenig Aufwand gibt, diesen Block in der Art zu verwenden.

Cover Block mit Stil "Link". Hier ist ein Absatz Block mit einem Leerzeichen verlinkt
Cover Block mit Stil „Link“. Hier ist ein Absatz Block mit einem Leerzeichen verlinkt

Weitere Beiträge zum Thema

Wir freuen uns über eine Kontaktaufnahme

Was hältst du davon?

Wir hoffen, dieser Beitrag hat dir gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.

  • Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörter.
  • Wenn du über unsere neuesten Beiträge informiert werden möchtest, kannst du dich gerne bei unserem Newsletter anmelden.

Beitrags-Kategorien

Allgemein (104) Anleitung (66) Block-Editor (44) CSS (10) Full Site Editing (32) Keine Anzeige (1) Plugins (28) Short News (1) Theme (21) Tipps (68) Veranstaltungen (3) WordPress (111)

Schreibe einen Kommentar