Der Block-Editor kann hervorragend mit Medien-Blöcken umgehen, externe Quellen leicht einzubetten und daneben erlaubt es den fortgeschrittenen Anwender eigene CSS-Klasse auf Blöcke anzuwenden
gutenberg-fibel.de/bloecke/einbetten/
gutenberg-fibel.de/bloecke/datei/
gutenberg-fibel.de/bloecke/video/
gutenberg-fibel.de/bloecke/audio/
1) Block Audio aus Mediathek einfügen
Info: Es gibt noch Ausrichtungsoptionen und Audio-Eigenschaften, die wir hier nicht weiter vertiefen
2) Block Video
Füge hier unterhalb zwei Video-Blöcke ein
Video a): Beliebig aus der Mediathek
Video b): Nimm diese URL: https://www.youtube.com/watch?v=elx5kCxTqYo
Info: Es gibt noch Ausrichtungsoptionen und Block-Eigenschaften im Video-Block, die wir hier nicht weiter vertiefen. Der YouTube Einbettungsblock hat dagegen keine weiteren Block-Eigenschaften
3) Playlist einfügen (nur Classic, darf übersprungen werden)
Info: DIESE FUNKTION STEHT IN WP5.8 immer NOCH NICHT ALS BLOCK ZUR VERFÜGUNG!
Wer die Playlist im Block Editor testen möchte nimmt den „Classic Block“ (bereits hier unterhalb eingefügt). Um Medien im Classic Editor einzufügen, klicke auf das Symbol „Dateien hinzufügen“ in der Werkzeugleiste.
Das ist ein Text im Classic-Editor Block
Playlist Audio
Datei hinzufügen -> Audio-Wiedergabeliste erstellen -> Alle Audio-Dateien auswählen
Playlist Video
Datei hinzufügen -> Video-Wiedergabeliste erstellen -> Alle Video-Dateien auswählen
4) Block Datei einfügen
Füge den Block „Datei“ in die leere Zeile unterhalb ein.
Mit „Hochladen“ wähle eine beliebiege PDF-Datei aus, wie zB „00_Wichtig CMS Curs Stagos..“
In den Block-Einstellungen unter Text-Link Einstellungen stelle „In einem neuen Tab öffnen“ ein.
Des weiteren deaktiviere die automatische Einbettung/Vorschau des Dokuments. Der Linktext und der Download Text lässt sich übrigens überschreiben.
Neu seit WP 5.8: PDFs werden nun automatisch eingebettet. Diese Vorschau lässt sich auch abstellen
5) Einbettungen
Füge zwei, drei beliebige Verlinkungen zu WordPress-Beiträge oder Inhalte wie z.B. Twitter, Soundcloud, Youtube etc. ein. Es reicht dazu den Link einfach in eine leere Zeile einzufügen und mit Enter zu bestätigen. Alternativ kann man auch den entsprechenden Block vorher auswählen (über Blocksuche, bzw. „+“ oben links in der Editor-Leiste und nach unten scrollen
PS: Facebook geht leider nicht mehr so einfach seit Anfang 2021.
https://www.kickstarter.com/projects/angrycreative/wordpress-the-card-game
https://twitter.com/photomatt/status/1387098632336265216
https://www.perun.net/2021/05/04/gutenberg-10-5-shiny-new-blocks/
Das ist eine Verlinkung auf einen Artikel der mit WordPress geschrieben wurde.
https://soundcloud.com/maniacs-of-noise/jeroen-tel-myth-history-in-the-making-preview
PS: Manchmal wird der Link nicht immer automatisch eingebettet. Suche dann einfach den passenden Block
https://www.kickstarter.com/projects/angrycreative/wordpress-the-card-game
Creative Commons search will be re-launching on WordPress .org, the first step of several cool things we have coming around media https://t.co/ENvPGFA0Ff
— Matt Mullenweg (@photomatt) April 27, 2021
Gutenberg 10.5: shiny new blocks
6) CSS anwenden
Info: Die hier vorgestellten CSS-Klassen finden sich in der Datei 06. Custom CSS – Beispiele für den Kurs im Übungsorder A.
Den Inhalt dieser Datei legen wir in das Custom-CSS
FSE-Theme wie TwentyTwentyTwo:
Wir nutzen dazu das Plugin „Simple Custom CSS, bzw SiteOrigin CSS“. nach Aktivierung finden Sie im Backend unter DESIGN/CUSTOM CSS den CSS Editor wo Sie einfach meinen Text aus der #04 Datei reinkopieren.
Klassisches Themes, wie TwentyTwentyOne:
Backend: Design/Customizer oder Frontend: Customize Button in der Benutzerleiste. Speichern/Veröffentlichen nicht vergessen!
- Ein beliebiges Rezept-Bild einfügen – Große Größe
- Blockeigenschaft -> Erweitert -> Zusätzliche CSS-Klasse: bilderrahmen
- Bild 7-mal duplizieren und unterhalb der Überschriften verschieben
- CSS-Klassen entsprechend untenstehend in den kopierten Bilder anpassen
- Den Effekt sieht man lediglich im Frontend, da das eigene CSS nicht in den Backend-Editor geladen wird
CSS-Klasse: bilderrahmen
CSS-Klasse: bilderrahmen1
CSS-Klasse: bilderrahmen2
CSS-Klasse: bilderrahmen3
CSS-Klasse: schatten
CSS-Klasse: grayscale
CSS-Klasse: sepia
CSS-Klasse: bilderrahmen blur