Der Block-Editor

Diese Seite befindet sich zur Zeit noch in der Erstellung.

Editorial

Der neue Block-Editor (Gutenberg) verändert Ihr Schreiben mit WordPress. Das ist zugegeben etwas gewöhnungsbedürftig. Wenn Sie ihn aber erst mal etwas besser kennen, macht es wirklich Spass damit zu arbeiten.

Die wesentliche Änderung beim Arbeiten mit dem Block-Editor bezieht sich auf die Strukturierung der Seite in Blöcke.

Mir gefällt

xxx

cfgcft

Basics

Arbeiten mit Blöcken

Wenn Sie eine neue Seite/Beitrag erstellt haben, können Sie gleich mit dem Schreiben  los legen. Das Erste, der Titel der Seite ist noch kein Block, das gehört ja noch nicht zum eigentlichen Inhalt der Seite, aber das Zweite ’schreib etwas oder tippe / zur Blockauswahl‘, da kann man gleich mit schreiben beginnen, egal ob es sich dabei um eine Überschrift oder einen Absatz handelt.

Mit jedem ‚Enter‘ auf der Tastatur wird sogleich auch ein neuer Block vom Typ ‚Absatz‘ erstellt.

Wie ändere ich einen Absatz zur Überschrift?

Wenn Sie in einen Block klicken, erscheinen direkt darüber verschiedene Buttons zum Ändern der Einstellungen. Die brauche ich nicht alle zu erklären, man kennt die Symbole. Der Button ganz links definiert den ‚Typ‘ des Blocks. Draufklicken, Überschrift auswählen, fertig ist die Überschrift. Jetzt stehen weitere, dem ‚Typ‘ entsprechende Buttons zur Verfügung, H2-H4, H1-H6 finden Sie in der Seitenleiste rechts. Da sind jeweils alle verfügbaren Einstellungen vorhanden.

Der Button mit den drei Punkten übereinander bietet weitere Optionen an, wie das Duplizieren des Blocks oder der Wechsel zwischen Visueller Ansicht und HTML.

Die Buttons mitten im Textfluss stören mich

Ja, mich auch, weil sie sich über den Inhalt des oberen Blocks legen. Ich empfinde das als unübersichtlich. Die Buttons direkt beim zu bearbeitenden Block sind aus Sicht jedoch schon super praktisch. Aber die Entwickler haben das wohl auch erkannt und bieten eine Alternative an.

Im Bearbeitungsbereich ganz oben, ganz rechts gibt es wieder den Button mit den drei übereinander liegenden Punkten. Da einfach ‚obere Werkzeugleiste‘ auswählen, und die Buttons verschieben sich an den oberen Bearbeitungsbereich. Der Weg mit der Maus ist etwas weiter, dafür stören sie nicht die Sicht auf den zu bearbeitenden Inhalt.

Verschieben von Blöcken

Die Blöcke lassen sich einfach nach oben und unten verschieben. Fährt man mit der Maus über einen Block, erscheinen links die dafür nötigen Pfeile.

Hinzufügen von Blöcken

Um einen neuen Block hinzuzufügen können Sie ganz oben bei den Buttons das Plus-Symbol verwenden. Ist noch ein Block zur Bearbeitung aktiv, wird der neue Block in der Regel nach Diesem eingefügt. Es kann aber auch passieren, dass der Block an erster Stelle eingefügt wird.

Wenn Sie mit der Maus den oberen oder unteren Rand eines Blocks überfahren, erscheint dieses Symbol ebenfalls. Es fügt den neuen Block entsprechend vor oder nach dem bestehenden Block ein.

Beim manuellen Einfügen eines neuen Blocks stehen Ihnen eine Vielzahl an Block-Typen zur Verfügung.

Bearbeiten von Blöcken

Etwas tricky, ein Teil der Einstellungen finden sich in der Seitenleiste, der andere Teil über dem Block.

Was gibt es für Blöcke?

Überschrift

Überschriften in den Auszeichnungen H1 bis H6.

Absatz

Allgemeiner Text, Ausrichtung wählbar, links, mittig, rechts.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Bild

Fügt ein Bild aus der Mediathek oder einer URL hinzu. Darstellung und Grösse kann eingestellt werden. Das Bild kann mit einer Bildunterschrift versehen werden.

Bild eingefügt aus der Mediathek oder einer URL

Gallerie

Fügt eine Fotogallerie mit Bildern aus der Mediathek hinzu. Dabei kann angegeben werden, ob auf die Bilder verlinkt werden soll. Das Bild wird in Originalgrösse auf schwarzem Hintergrund angezeigt. Ohne speziellen Lightbox-Effekt mit der Möglichkeit zum Blättern wie es Gallery Plugins machen. Sehr einfach gehalten.

Enthält eine Gallerie nur ein einziges Bild, so wird es, ist es gross genug auf der ganzen Seitenbreite dargestellt. Dieser Block eignet sich also nicht dazu um ein kleines Vorschaubild dezent in die Seite zu integrieren und mit einem Klick gross anzuzeigen.

Liste

Listen mit Punkten oder Nummerierung. (offensichtlich funktioniert hier der CSS-Einzug nicht, jedenfalls nicht mit einem einfachen ‚margin-left‘)

Ob das Problem mit dem fehlenden Einzug am CSS des Themes liegt, habe ich noch nicht getestet.

  • Listenpunkt 1
  • Listenpunkt 2
    • Listenpunkt 3
  1. Listenpunkt 1
  2. Listenpunkt 2
    1. Listenpunkt 3

Zitat

Darstellung für das HTML-<blockquote>.

Es gibt nichts Gutes, ausser man tut es.

Weisheit

Pullquote

Im Gegensatz zum Blockquote (Zitat), soll das Pullquote Appetit auf den folgenden Text machen. Im HTML ist das Pullquote in der Darstellung vom Blockquote abhängig, wenn im Theme dazu keine gesonderte Klasse definiert ist.

So toll der neue Block-Editor ist, noch gibt es aber auch ein ‚aber‘.

Lieb gewonnene Funktionalität vom TinyMCE fehlt.

Ist das der Fall, können Sie im Customizer eine eigene Klasse anlegen:

figure blockquote{
  // CSS Anweisungen
}

Damit sollte sich das Bullquote wie hier anders darstellen lassen (keine vertikale Linie links).

Eigenes Block-Design

Sie können auch ein eigenes Design für einen Block festlegen. Den Block gestalten mit Schrift, Hintergrund, Rahmen, Abstände, etc.

Dafür legen Sie im Customizer eine eigene Klasse an und tragen diese beim Block-Typ ‚Absatz‘ unter ‚Erweitert‘ als zusätzliche CSS-Klasse ein.

Eigener Block

Einbetten

Ein Link zu einer Seite der etwas mehr her macht.

Cover

Platziert ein Bild, das mit einem Text versehen werden kann.

Das ist ein Coverbild

Datei

Link zu einer Datei in der Mediathek. Einfach nur ein Link, die Downloads werden nicht gezählt.

Code

Mit diesem Block können Sie Code darstellen. Die Syntax wird jedoch nicht farblich differenziert. Dafür benötigen Sie weiterhin ein spezielles Plugin oder einen Account bei ‚Github‘.

<?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>
   <div id="footer-widget-left">
      <?php dynamic_sidebar( 'sidebar-4' ); ?>
   </div>
<?php endif; ?>

HTML

In diesem Block können HTML Code eingeben, welcher dann auf der Webseite entsprechend dargestellt wird. Wenn Sie ein Codebeispiel für HTML auf der Seite anzeigen wollen, dann verwenden Sie den Block ‚Code‘.

Vorformatiert

Verwendet für den Text eine Schrift mit fester Weite. Eignet sich z.B. dafür, um Text in Spalten zu gliedern, ohne eine Tabelle verwenden zu müssen.

Produkt Händler Gewicht Preis
Yoghurt Migros 180gr -.55
Yoghurt Aldi 180gr -.49
Yoghurt Lidl 180gr -.49

Vers

Der Sinn dieses Blocks erschliesst sich mir nicht so ganz.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Tabelle

Tabellen gehen auch, schlecht zu bearbeiten, kaum Einstellungsmöglichkeiten.

Tabellenkopf 1Tabellenkopf 2Tabellenkopf 3
Zeile 1 Spalte 1
Zeile 2 Spalte 2
Zeile 3 Spalte 1Zeile 3 Spalte 3

Spalten

Text kann in Spalten angelegt werden

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Trennzeichen

Das Trennzeichen resultiert im Wesentlichen aus dem <hr>-Tag. Da kann nach Belieben im CSS formatiert werden.

.wp-block-separator{
   border: 0.5px #bd2a2b solid;
}

Medien und Text

2 Spalten, für Bild und Text.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Button

Der Block ist dazu ausgelegt, einen einzelnen Button darzustellen. Demzufolge werden die Buttons bei der Blockanordnung übereinander dargestellt.

Mit der Bearbeitung des HTML-Codes können in einem Block auch mehrere Buttons nebeneinander angeordnet werden. Dabei ist darauf zu achten, nur die Links innerhalb des umgebenden DIV zu kopieren.

Einbetten von externen Inhalten

Das Einbetten von externen Inhalten geht sehr einfach. Dafür stehen diverse Vorlagen zur Verfügung.

Einbetten von Twitter

Einbetten von Facebook

Einbetten von Youtube

Einbetten von Instagram

Seitenumbruch

Sie können direkt innerhalb einer Seite oder eines Beitrages einen Seitenumbruch einfügen. Bei der Ansicht im Frontend werden zum Blättern die entsprechenden Elemente angezeigt. Sie können also längere Beiträge in mehrere ‚Seiten‘ unterteilen

Manko: Die Seitennavigation ist derzeit nur numerisch möglich. Die Navigation mit individuellem Text wäre wünschenswert.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Durch die weitere Nutzung der Seite stimmen Sie der Verwendung von Cookies und der Datenübermittlung zu Dritten zu. [ Weitere Informationen ]

Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Diese Webseite verwendet weiter 'Akismet' und 'Jetpress' für die Einbindung von Social Media und der Abwehr von Spam. Welche Daten dabei an externe Server übermittelt wird ist durch den Seitenbetreiber nicht zu beeinflussen. Diese Daten sind jedoch für ein vollumfängliches funktionieren der Seite unerlässlich. Sollten Sie damit nicht einverstanden sein, dürfen Sie diese Webseite nicht weiter nutzen. Ausserdem sollten Sie sich darüber Gedanken machen, ob Sie das Internet überhaupt nutzen wollen. Das liest sich für Sie jetzt bestimmt etwas eigenartig, ist aber nun einfach mal so. Ein Datenschutzkonvormes Internet so wie es sich unsere Politiker vorstellen ist zum jetzigen Zeitpunkt nun einfach mal nicht möglich.

Bei den übermittelten Daten handelt es sich nicht um Ihren Namen, jedoch aber um Ihre IP-Adresse. Ändern Sie Diese nicht regelmässig, kann auf Grund dieser Daten ein Surfprofil der entsprechenden Adresse erstellt werden. Auch ist es langfristig dadurch möglich, der IP Ihre eMail-Adresse zuzuordnen und irgendwann auch Ihren Namen zu kennen. Auch ist Ihr Provider verpflichtet darüber Protokoll zu führen und langfristig zu speichern, wann Sie mit welcher IP unterwegs sind.

Der grösste Datensammler ist übrigens Google. Fragen Sie doch da mal nach, welche Daten über Sie gespeichert werden. Gem. der Datenschutzverordnung müssten Sie eigentlich darüber Auskunft erhalten.

Diese Webseite speichert lokal keine IP-Adressen der Besucher und hat auch keine Kenntniss über die wahre Identität seiner Besucher.

Aktivitäten im Adminbereich, dies beginnt bereits, wenn man versucht sich einzuloggen, werden vollumfänglich samt IP-Adresse protokolliert und für 60 Tage gespeichert.

Schließen