Radius

0:00
WordPress unterstützt seit Version 6.9 border Radius in der Design Systematik und wir haben das natürlich im Einsatz in unserem Design System und ich möchte euch kurz zeigen, wo ihr das Ganze anpassen könnt, denn zum aktuellen Zeitpunkt unterstützt wordpress die Anpassung im Code aber noch nicht über den Zeit Editor und ich habe hier eine kleine Beispielseite aufgebaut. Wir haben hier verschiedene Boxen, die alle schon einen vorbereiteten Border radius haben und wenn ich das jetzt ändern möchte.

0:28
Dann muss ich natürlich erstmal wissen, wo kommt die Systematik denn überhaupt her. Die kommt natürlich aus der Theme json, ich schaue mir die mal kurz an, indem ich hier den Theme Datei Editor aufmache, dann in das Parent Theme Wechsel, die Theme json öffne und dann suche ich in der Theme json mal nach Radios so und springe hier an die Stelle ab wo wir den.

0:50
Ja, die verschiedenen Abrundungen konfiguriert haben. Da gibt es eben 2 Pixel, 4 Pixel, 8 Pixel, border Radius. Im Code ist das natürlich immer in REM angegeben und dann habe ich noch den Slug, also die CSS variable, das ist dann einfach radius 1, radius 2 und so weiter dass das leicht angepasst werden kann. Zusätzlich haben wir noch einen unendlichen Radius für zum Beispiel 100%, abgerundete Buttons oder so etwas. An dieser Stelle kommt es zum Einsatz.

1:18
Und hier könnte ich es eben momentan dann auch anpassen. Und wenn ich mir dann den Zeit Editor angucke und hier in die Stile rein gehe, hier gibt es eben keine Möglichkeit diesen Border radius global um zu konfigurieren. So was ich machen kann, ich könnte hingehen und zum Beispiel global alle Boxen anpassen.

1:40
Also wenn ich jetzt eben sage, naja, alle meine Boxen, die standardmäßig einen Borderradius haben, die sollen aber jetzt alle keinen mehr haben, dann würde ich nicht zu jeder Box hingehen im Editor und die Ecken sozusagen händisch überall eckig machen, sondern ich würde mir den Section Style suchen, der für diese Boxen zum Einsatz kommt. Also alle Boxen werden mit dem Section Style für Box zentral gestaltet.

2:06
Und da muss ich dann eben wissen, wo kommt dieser Section Style, also wo ist er denn sozusagen global angelegt. Auch das ist natürlich eine json Datei, ich gehe hier wieder in die Werkzeuge wieder in den Theme Datei Editor und wieder in das Parent Theme, im Child ist es ebenfalls, damit ich es leichter überschreiben kann und hier gibt es eben die Styles und da gibt es zum Beispiel Box 1 und Box 2 oder eben auch andere Section Styles und wenn ich da jetzt mal reingucke einfach Inbox 2, das ist die graue Box und.

2:36
Jeder Box hellgrau, da könnte ich auch die Beschriftung anpassen, dann sehe ich, da ist sozusagen der Border Radius vorkonfiguriert. So und da könnte ich das jetzt auch global anpassen, dieser Section Style, der gilt für Gruppen, der gilt für Colombs und der gilt für eine einzelne Colom. Also hier könnte ich das sozusagen zentral für alle diese Elemente konfigurieren, das ist allerdings momentan eben im Code dann notwendig.

3:03
So, wenn ich das nicht im Code machen möchte, dann habe ich auch die Möglichkeit eben in den Editor reinzugehen und zu sagen, ich gehe in die Stile, ich gehe in die Blöcke. Jetzt muss ich wissen, dass dieser Section Style eben für Gruppen, für Cullen und Cullens zum Einsatz kommt, also suche ich hier nach Gruppe und finde hier die Gruppe und dann sehe ich hier ebenfalls die Stil Varianten, also die Section Styles, dann nehme ich Box hellgrau und.

3:32
Kann die Umkonfigurieren und könnte jetzt hier unten dann den Radius zum Beispiel von 16 auf 0 Umkonfigurieren und das gilt jetzt sozusagen für alle Boxen, die sozusagen auf Gruppen angewendet worden sind, aber eben nicht für Colom und Coloms.

3:50
Da müsste ich das dann ebenfalls noch umsetzen. Also wenn ich wirklich möchte, dass das jetzt überall greift. Die beste Stelle wäre im Code, wenn ich es ohne Code machen möchte, dann müsste ich nacheinander sozusagen die ganzen Stellen auch finden, das wäre also dann eben hier zum Beispiel zusätzlich auch noch die Spalte, da gehe ich dann hin und sage die Spalte, die gibt es ebenfalls mit Box hellgrau und da müsste ich dann ebenfalls den Border Radius noch anpassen, so dass da also nichts durchrutscht, das ist also so ein bisschen lästiger, wenn ich das mit einem no Code Ansatz mache und.