Heute hatte ich wieder eine mega Aussicht als ich auf die Arbeit gefahren bin. Unberührter Schnee lag um mich herum…
Zum Thema
Bis jetzt habe ich statische Blöcke programmiert. Das eine ist der „Ich bin’s“ Block auf der Startseite und das zweite sind meine letzten Beiträge. Ich werde versuchen die Blöcke so weit wie möglich bearbeitbar zu machen.
Der „Ich bin’s“ Block
Einfach:
Ich werde die Texte, welche im Frontend sichtbar werden bearbeitbar machen.
Schwer:
Ich werde das Hintergrundbild auswählbar machen und im Editor bereits als Hintergrundbild einblenden lassen. Eigentlich sollte das einfach sein, jedoch habe ich das noch nie gemacht. Deswegen als schwierig.
Der „Letzte Beiträge“+ Block
Einfach:
Ich werde eine Art Blocküberschrift hinzufügen, um dem Besucher zu kennzeichnen, was für ein Abschnitt das ist.
Schwer:
Ich werde versuchen eine Möglichkeit zu programmieren, in der Sidebar unterschiedliche Eigenschaften auswählen zu lassen, wie z.B. Kategorie, Post Type, Schlagwörter etc.
Der Prozess
- Mein Content beinhaltet Überschriften und Texte. Noch habe ich keine Lösung gefunden beides in ein Blockelement zu packen, ohne gezwungen zu sein beides anzugeben.
- Lösung: InnerBlocks
- Ich habe zwischen Front und Backend css unterscheiden. Warum auch immer lädt WordPress beides in das Backend rein…
- Ich habe keine Zeit gehabt, mich damit zu befassen.
Ergebnis
Nach einem langen hind-und-her habe ich endlich die Prozedur verstanden und einen bearbeitbaren Block realisiert. Vorerst habe ich den „Ich bin’s“ Block bearbeitbar gemacht. Die Schwierigkeit lag für mich dabei daran, dass ich zum ersten Mal Blöcke bearbeitbar gemacht habe. dazu kommt auch noch, dass ich nicht mit einfachen String Variablen und Input Felder gearbeitet habe, sondern InnerBlocks und MediaUploads nutzen musste.
InnerBlocks
Ein InnerBlock ist eine Funktionalität von Gutenberg Blocks, um die Blöcke ineinander zu verschachteln. Bei mir war der Fall im Header z.B. dass ich dort nicht einfach nur ein Absatz drin hatte, sondern die Struktur H1, H2, Absatz. Wenn du dich mit Gutenberg auseinander gesetzt hast, wirst du schnell verstehen, dass man dabei nicht nur von einem ganz normalen TinyMCE Editor spricht, sondern dass dort 3 unterschiedliche Blöcke benötigt werden. Um das zu realisieren kommen wir nicht an InnerBlocks vorbei. Diese werden erst deklariert:
var InnerBlocks = editor.InnerBlocks;Danach können diese im registerBlockType Bereich eingesetzt werden. In der ES5 Kodierung sieht das ganz einfach wie folgt aus:
el( InnerBlocks )Wenn man am Ende die Blöcke auslesen und Sie speichern möchte, gibt man in die save-Funktion ganz einfach folgendes ein:
el(InnerBlocks.Content)Dadurch werden die Inhalte automatisch zum speichern zurecht gelegt.
MediaUpload
MediaUploads sind im Gegensatz zu InnerBlocks etwas komplizierter. Media Blocks werden erst einmal wie folgt deklariert:
var MediaUpload = editor.MediaUpload;Anschließend sollte in die edit-Funktion eine „onSelectImage“ Funktion angelegt werden. Es steht jedem natürlich frei diese Funktion so zu benennen wie er es möchte. Die Aufgabe dieser Funktion ist lediglich zu bestimmen, was passieren soll, nachdem ein Medium ausgewählt worden ist. Es werde unglaublich viele Variablen zu der Auswahl mitgegeben. Ich kopiere mal den Inhalt meiner Konsole nach einem console.log
acf_errors: false
alt: ""
author: "1"
authorName: "Talha Sariyürek"
caption: ""
compat: {item: "<input type="hidden" name="attachments[729][menu_o…">Regenerate Thumbnails</a></td>↵ </tr>↵</table>", meta: ""}
context: ""
date: Mon Jan 28 2019 09:56:36 GMT+0100 (Mitteleuropäische Normalzeit) {}
dateFormatted: "28. Januar 2019"
description: ""
editLink: "https://talhasariyuerek.com/wp-admin/post.php?post=729&action=edit"
filename: "20190128_091524.jpg"
filesizeHumanReadable: "1 MB"
filesizeInBytes: 1186446
height: 3024
icon: "https://talhasariyuerek.com/wp-includes/images/media/default.png"
id: 729
link: "https://talhasariyuerek.com/tag-12-dynamische-bloecke/20190128_091524/"
menuOrder: 0
meta: false
mime: "image/jpeg"
modified: Mon Jan 28 2019 09:56:36 GMT+0100 (Mitteleuropäische Normalzeit) {}
name: "20190128_091524"
nonces: {update: "b3365aef2c", delete: "ec7ad95805", edit: "e30746a02f"}
orientation: "landscape"
sizes: {thumbnail: {…}, medium: {…}, large: {…}, full: {…}, medium_large: {…}, …}
status: "inherit"
subtype: "jpeg"
title: "20190128_091524"
type: "image"
uploadedTo: 728
uploadedToLink: "https://talhasariyuerek.com/wp-admin/post.php?post=728&action=edit"
uploadedToTitle: "Tag 12 Dynamische Blöcke"
url: "https://talhasariyuerek.com/wp-content/uploads/sites/4/2019/01/20190128_091524.jpg"
width: 4032Mit diesen Variablen kann man dann natürlich frei spielen. ich gebe mal mein MediaUpload ES5 Element kommentiert ein, damit Ihr euch ein Bild davon machen könnt:
el(MediaUpload, {
// Wenn ein Bild ausgewählt worden ist, soll onSelectImage ausgeführt werden
onSelect: onSelectImage,
// Die auswählbaren Medien werden auf Bilder begrenzt
type: 'image',
// Die Ausgangsvariable. Interessant für Input Boxen
value: '',
// render bestimmt die Ausgabe. Was soll angezeigt werden?
render: function render(_ref) {
var open = _ref.open;
// Ich habe ein DIV Element anlegen lassen und das ausgewählte Bild in voller Größe als Hintergrundbild verankert.
return el(
'div',
{
className: 'jumbo_image_text-background',
style : {
backgroundImage : (props.attributes && props.attributes.image)? 'url('+props.attributes.image+')' : '',
},
onClick: open
},
);
}
}),Wie ihr seht ist die Gutenberg Programmierung doch kein Zuckerschlecken. Es erfordert fleiß und Übung. Ich lade jetzt noch eben meine fertigen Projektdateien hoch, damit ihr euer Ergebnis damit vergleichen könnt und leg mich hin. Damit gute Nacht und bis Morgen!
