Verwenden von CSS-Variablen zum Erstellen dynamischer Themen in Puck

Puck ist der visuelle Open-Source-Editor für React, der die nächste Generation von Seitenerstellern und No-Code-Produkten ermöglicht. Geben Sie uns einen Stern auf GitHub! ⭐️

---

Bei der Integration von Puck in Ihr Seitenerstellungsprodukt besteht eine häufige Anforderung darin, Ihren Benutzern die zentrale Verwaltung des Themas der Seite zu ermöglichen, ohne Anpassungen an jeder Komponente vornehmen zu müssen.

Zum Beispiel: Benutzer benötigen eine Möglichkeit, Schriftstile global zu verwalten – auch für Komponenten, die der Seite bereits hinzugefügt wurden. So könnte das in Aktion aussehen:

Da Puck nur eine React-Komponente ist, gibt es viele Möglichkeiten, dieses Problem zu lösen (und auch andere, komplexere Zustände zu verwalten). In diesem Artikel werde ich mich auf einen der einfachsten und zugleich leistungsstärksten Ansätze konzentrieren: CSS-Eigenschaften. Lasst uns eintauchen!

Für dieses Tutorial gehe ich davon aus, dass Sie über ein grundlegendes Verständnis von Puck und seiner Funktionalität verfügen. Wenn Sie neu bei Puck sind, machen Sie sich keine Sorgen – Sie können trotzdem gerne mitmachen! Ich empfehle jedoch, den Leitfaden „Erste Schritte“ zu lesen, um sich mit den Grundlagen vertraut zu machen.

Projekt-Setup mit Vite

Ich beginne damit, ein Projekt mit dem Gerüstskript von Vite einzurichten. Sie können diesem Abschnitt gerne folgen oder ihn überspringen, wenn Sie bereits ein Projekt mit Puck haben.

Wenn Sie Next.js oder Remix verwenden, können Sie auch eines der offiziellen Puck-Rezepte zum Einrichten Ihres Projekts verwenden.

Projekt erstellen

Um zu beginnen, öffnen Sie Ihr Terminal und führen Sie die folgenden Befehle aus, um ein neues Vite-Projekt zu erstellen:

npm create vite@latest puck-global-themes -- --template react
cd puck-global-themes
npm install

Puck installieren

Als nächstes installieren Sie das Puck-Paket:

npm i @measured/puck --save

Widersprüchliche Stile löschen

Wenn Sie ein neues Projekt mit Vite starten, werden einige Standardstile mitgeliefert, die mit denen von Puck kollidieren. Um dies zu beheben, löschen Sie src/index.css und src/App.css und entfernen Sie dann ihre Importe aus src/main.jsx und src/App.jsx:

// main.jsx
import "./index.css"; // Remove this line

// App.jsx
import "./App.css"; // Remove this line

Rendern des Puck-Editors

Wenn die grundlegende Projektstruktur fertig ist, gehen Sie zu Ihrer src/App.jsx-Datei und ersetzen Sie deren Inhalt durch den folgenden Code. Dadurch wird Puck mit einer Grundkonfiguration zum Ziehen und Ablegen von Überschriften- und Absatzkomponenten eingerichtet:

Beachten Sie, dass ich der Einfachheit halber in diesem Beispiel das Inline-Styling verwende

// App.jsx
import { Puck } from "@measured/puck";
import "@measured/puck/puck.css";

// The configs for each of your draggable components
// Ideally you would pull each of these to their own files

const headingConfig = {
  defaultProps: {
    title: "Title",
  },
  fields: {
    title: {
      type: "text",
    },
  },
  render: ({ title }) => {
    return (
      <div>
        <h1 id="title">{title}</h1>
      </div>
    );
  },
};

const paragraphConfig = {
  defaultProps: {
    content: "This is a paragraph...",
  },
  fields: {
    content: {
      type: "textarea",
    },
  },
  render: ({ content }) => {
    return (
      <div>
        <p>{content}</p>
      </div>
    );
  },
};

// The Puck configuration object
const config = {
  components: {
    Heading: headingConfig,
    Paragraph: paragraphConfig,
  },
  root: {
    render: ({ children }) => {
      return (
        <main>



<p>Finally, run the application in development mode, navigate to http://localhost:5173, and check that everything is working as expected:<br>
</p>

<pre class="brush:php;toolbar:false">npm run dev

Super! Da Sie nun über eine Grundlage verfügen, auf der Sie aufbauen können, fügen wir Themen für Ihre Benutzer hinzu.

Themen hinzufügen

Wie ich bereits erwähnt habe, sind benutzerdefinierte CSS-Eigenschaften eine ausgezeichnete Wahl, um Ihrem Editor interaktive Themen hinzuzufügen. Warum ist das ein toller Ansatz? Weil es leichtgewichtig ist, keine externen Abhängigkeiten erfordert und (größtenteils) nativ vom Browser verwaltet wird.

Aufstellen

Um dynamisches Design mit CSS-Eigenschaften hinzuzufügen, müssen Sie Ihre Designvariablen als Eigenschaften bei einem übergeordneten Element der Komponente definieren, die sie benötigt. Dies kann die Stammkomponente von Puck oder eine andere übergeordnete Komponente in der Hierarchie Ihres Editors sein. Es spielt wirklich keine Rolle, solange Sie sie definieren und sie dann mithilfe der var-CSS-Funktion dort lesen, wo Sie sie benötigen.

In diesem Tutorial konzentriere ich mich auf die Verwendung der Root-Komponente von Puck, damit Benutzer die Schriftgröße und -farbe für Überschriften und Absätze an einer einzigen Stelle auf der obersten Ebene des Editors festlegen können:

Schritt 1: Definieren Sie die Variablen

Beginnen Sie mit der Definition eines Objekts, um alle CSS-Variablennamen zu zentralisieren. Dies verbessert die Konsistenz und erspart Ihnen die Debugging-Probleme, die durch falsch eingegebene Eigenschaftsnamen in CSS verursacht werden.

Profi-Tipp: Wenn Sie TypeScript verwenden, können Sie eine Aufzählung anstelle eines Objekts verwenden, um zusätzliche Typsicherheit zu erreichen

npm create vite@latest puck-global-themes -- --template react
cd puck-global-themes
npm install

Schritt 2: Fügen Sie die Variablen zur übergeordneten Komponente hinzu

Aktualisieren Sie als Nächstes die Stammkonfiguration, um die Requisiten und Felder für die Designvariablen einzuschließen. Dadurch können Benutzer die benutzerdefinierten Eigenschaften direkt in den Stammfeldern des Editors aktualisieren.

Dazu müssen Sie die Felder für die neuen Root-Requisiten und ihre Standardwerte definieren:

npm i @measured/puck --save

Danach lesen Sie in der Renderfunktion des Roots die benutzerdefinierten Eigenschaften aus den Requisiten und übergeben sie als CSS-Variablen an das Root-Element.

// Das Puck-Konfigurationsobjekt
const config = {
  Komponenten: {
    //... vorhandene Komponenten
  },
  Wurzel: {
    //... die Konfiguration der Stammfelder

    render: ({ Children, FontColor, HeadingFontSize, ParagraphFontSize}) => {
      zurückkehren (
        <haupt>



<p>Wenn Sie jetzt zum Editor gehen, sollten Sie die neuen Felder auf der Stammebene für jede der Requisiten sehen. Es gibt noch kein visuelles Feedback, aber wenn Sie sich die Stile im Stammverzeichnis des Editors ansehen, werden Sie sehen, dass die Variablen bei jeder Änderung, die Sie an den Feldern vornehmen, festgelegt werden.</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173634396450671.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Using CSS variables to create dynamic themes in Puck"></p>
<h3>
  
  
  Schritt 3: Zugriff auf gemeinsam genutzte Variablen in untergeordneten Komponenten
</h3>

<p>Zuletzt greifen Sie auf die Designvariablen in den Komponenten zu, die Sie benötigen, indem Sie die var-CSS-Funktion in Ihren Stilen verwenden.</p>

<p>In unserem Beispiel fügen Sie sie in der ÜberschriftConfig und im AbsatzConfig:<br> hinzu
</p>

<pre class="brush:php;toolbar:false">const headingConfig = {
  //... Die Konfiguration der Überschriftenfelder

  render: ({ title }) => {
    zurückkehren (
      <div>
        <h1>



</h1>
<p>Wenn Sie zum Editor zurückkehren, einige Überschriften und Absätze per Drag-and-Drop verschieben und dann die Felder auf der Stammebene ändern, werden Sie feststellen, dass alle Überschriften und Absätze aktualisiert werden, um diese Änderungen widerzuspiegeln:</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173634396650466.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Using CSS variables to create dynamic themes in Puck"></p>

<p>? Und das ist es! Ihre Benutzer können jetzt ein Thema definieren, das nahtlos auf verschiedene Komponenten auf ihren Seiten angewendet wird.</p>

<h3>
  
  
  Vor- und Nachteile der Verwendung von CSS-Eigenschaften
</h3>

<p>✅ Vorteile:</p>

<ul>
<li>Einfache und intuitive Einrichtung</li>
<li>Integrierte Kaskadierungs- und Überschreibungsfunktionen in der Seitenhierarchie ermöglichen eine einfache Verwaltung gemeinsamer Stile und die Möglichkeit, einzelne Komponenten anzupassen</li>
<li>Keine externen Abhängigkeiten und geringer Platzbedarf – benutzerdefinierte CSS-Eigenschaften werden nativ von Browsern unterstützt</li>
<li>Geringerer Standard- und Wartungsaufwand als bei anderen Optionen</li>
</ul>

<p>❌ Nachteile:</p>

<ul>
<li>Nur ​​für einfaches Styling geeignet – kann nicht mit komplexen Daten oder Logik umgehen</li>
<li>Das Debuggen kann schwierig sein, wenn mehrere Ebenen von CSS-Eigenschaftsüberschreibungen verschachtelt werden</li>
</ul>

<h2>
  
  
  Wir gehen weiter
</h2>

<p>Abhängig von Ihrem spezifischen Anwendungsfall gibt es viele Möglichkeiten, das Thema Ihres Editors noch weiter zu verfeinern:</p>
<ul>
<li>
<strong>Vordefinierte Themen verwenden</strong> – In einigen Anwendungen müssen Sie möglicherweise Standard-Themenoptionen bereitstellen – wie „Dunkel“, „Hell“ oder „Minimal“. Hierzu könnten Sie ein Auswahlfeld mit mehreren Themenobjekten verwenden. 
Diese Objekte können alle CSS-Eigenschaften als Einheit gruppieren, sodass Benutzer problemlos zwischen verschiedenen Themen für ihre Seiten wechseln können, ohne einzelne Felder ausfüllen zu müssen.</li>
<li>
<strong>Stilbibliotheken integrieren</strong> – Für größere Redakteure ist es möglicherweise besser, eine Stilbibliothek zu verwenden, um vorgefertigte Stile zu nutzen, Ihre Definitionen zu optimieren und den Boilerplate zu reduzieren. Bibliotheken wie Tailwind oder Emotion können problemlos in Puck integriert werden, was Ihnen Flexibilität und Effizienz bietet und gleichzeitig ein elegantes Erscheinungsbild beibehält. Tatsächlich bietet Puck sogar ein Emotion-Plugin an, das den Integrationsprozess für Sie vereinfacht!</li>
<li>
<strong>Designüberschreibungen auf Komponentenebene hinzufügen</strong> – Manchmal müssen Benutzer möglicherweise einzelne Komponenten auf ihren Seiten anpassen, damit sie sich vom Rest des Designs abheben. Da wir CSS-Eigenschaften verwenden, kann dies leicht erreicht werden, indem die Designvariablen der übergeordneten Ebene auf Komponentenebene überschrieben werden. Sie könnten beispielsweise ein optionales Feld für die Schriftfarbe in Ihrer Überschriftskomponente hinzufügen, das, falls vorhanden, die CSS-Eigenschaft speziell für dieses h1-Element neu definieren würde.</li>
</ul>

<h2>
  
  
  Bleiben Sie in Verbindung und bauen Sie weiter auf?
</h2>

<p>Ich hoffe, dieses Tutorial hat Sie in die Lage versetzt, CSS-Variablen für dynamisches Theming in Puck-basierten Seitenerstellern zu nutzen. Die Open-Source-Entwicklergemeinschaft steht im Mittelpunkt der Entwicklung von Puck und ich kann es kaum erwarten, die innovativen Apps zu sehen, die Sie erstellen!</p>

<p>Wir sind bestrebt, die Fähigkeiten von Puck noch weiter auszubauen, mit einem ständigen Strom neuer Funktionen, einschließlich einer revolutionären Drag-and-Drop-Engine für komplexe Raster und Layouts, die demnächst auf den Markt kommt, und einer Reihe neuer Plugins am Horizont.</p>

<p>Wenn Sie also von Puck inspiriert wurden oder Sie über die neuesten Funktionen auf dem Laufenden bleiben möchten, können Sie wie folgt mitmachen:</p>

<ul>
<li>
<strong>⭐ Markieren Sie uns auf GitHub</strong>, um das Projekt zu unterstützen und andere zu inspirieren, sein Potenzial zu erkunden.</li>
<li>
<strong>? Treten Sie unserer Discord-Community bei</strong>, um Ihre Projekte zu teilen, Fragen zu stellen und zusammenzuarbeiten.</li>
<li>
<strong>? Folgen Sie uns auf X und Bluesky</strong> für die neuesten Updates, Vorschauen und Funktionsankündigungen.</li>
<li>
<strong>? Tauchen Sie tiefer in die offizielle Dokumentation</strong> ein, um fortgeschrittene Techniken und Einblicke zu erhalten, die Ihre No-Code-Workflows auf die nächste Stufe heben können.</li>
</ul>


          </div>