WordPress + React 101

(mit eigenen Anweisungen in Claude generiert)

Wo brauchst du React in WordPress?

Block Editor (Gutenberg): Blocks sind React-Komponenten
Custom Blocks erfordern React + JSX
Interaktive UI-Elemente in Blocks
Block-spezifische Komponenten (Inspector Panel, Toolbar)

Was musst du verstehen & können?

Fundamentals (MUSS-Wissen):

JSX Syntax
React Hooks (useState, useEffect)
Props & State
Komponenten-Struktur

WordPress-spezifisch:

@wordpress/blocks API
@wordpress/element (WordPress‘ React-Wrapper)
Block.json Datei
save() & edit() Funktionen
WordPress Data Stores

Minikurs Module

Modul 1: React Basics (für WordPress-Developer)

1.1 JSX – Das wichtigste zuerst

JSX ist HTML-ähnlicher Code in JavaScript. WordPress nutzt das überall.

JavaScript

// Das ist JSX:
const MeinBlock = () => {
  return <div>Hallo Welt</div>;
};

// Das wird zu JavaScript:
const MeinBlock = () => {
  return createElement('div', null, 'Hallo Welt');
};

Copy

// Das ist JSX:
const MeinBlock = () => {
  return <div>Hallo Welt</div>;
};

// Das wird zu JavaScript:
const MeinBlock = () => {
  return createElement('div', null, 'Hallo Welt');
};

Was du wissen musst:

JSX sieht aus wie HTML, ist aber JavaScript
Wird von einem Compiler (Webpack) in echtes JavaScript übersetzt
WordPress macht das automatisch für dich in Blocks

1.2 Komponenten

Eine Komponente ist eine Funktion, die JSX zurückgibt.

JavaScript

// Einfache Komponente
const Button = () => {
  return <button>Klick mich</button>;
};

// Mit Parametern (Props)
const Button = (props) => {
  return <button>{props.label}</button>;
};

// Moderne Schreibweise (Destructuring)
const Button = ({ label }) => {
  return <button>{label}</button>;
};

Copy

// Einfache Komponente
const Button = () => {
  return <button>Klick mich</button>;
};

// Mit Parametern (Props)
const Button = (props) => {
  return <button>{props.label}</button>;
};

// Moderne Schreibweise (Destructuring)
const Button = ({ label }) => {
  return <button>{label}</button>;
};

Wichtig: Komponenten-Namen mit Großbuchstaben starten!

1.3 Props – Daten weitergeben

Props sind wie Funktionsparameter. Daten fließen von oben nach unten.

JavaScript

// Parent-Komponente
const App = () => {
  return <Button label="Speichern" />;
};

// Child-Komponente erhält Props
const Button = ({ label }) => {
  return <button>{label}</button>;
};

Copy

// Parent-Komponente
const App = () => {
  return <Button label="Speichern" />;
};

// Child-Komponente erhält Props
const Button = ({ label }) => {
  return <button>{label}</button>;
};

1.4 State – Daten die sich ändern

State speichert Daten, die sich ändern können. Nutze useState Hook.

JavaScript

import { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Zähler: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Erhöhen
      </button>
    </div>
  );
};

Copy

import { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Zähler: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Erhöhen
      </button>
    </div>
  );
};

Auseinandernehmen:

useState(0) → State mit Startwert 0
count → aktueller Wert
setCount → Funktion zum Ändern
setCount(count + 1) → neuer Wert

1.5 Events & onClick

Events sind Benutzerinteraktionen (Klicks, Eingaben, etc.).

JavaScript

const Form = () => {
  const handleClick = () => {
    console.log('Button geklickt');
  };
  
  return <button onClick={handleClick}>Klick mich</button>;
};

Copy

const Form = () => {
  const handleClick = () => {
    console.log('Button geklickt');
  };
  
  return <button onClick={handleClick}>Klick mich</button>;
};

Wichtig in WordPress:

onClick (camelCase, nicht onclick)
Mit Funktion: onClick={() => handleClick()}
Oder direkt: onClick={handleClick}

1.6 useEffect – Nebenwirkungen

useEffect läuft nach dem Rendern. Nutze es für API-Aufrufe, Event-Listener, etc.

JavaScript

import { useState, useEffect } from 'react';

const MyComponent = () => {
  const [data, setData] = useState(null);
  
  // Läuft 1x nach dem ersten Rendern
  useEffect(() => {
    console.log('Komponente geladen');
  }, []);
  
  return <div>{data}</div>;
};

Copy

import { useState, useEffect } from 'react';

const MyComponent = () => {
  const [data, setData] = useState(null);
  
  // Läuft 1x nach dem ersten Rendern
  useEffect(() => {
    console.log('Komponente geladen');
  }, []);
  
  return <div>{data}</div>;
};

Das Array [] ist wichtig:

[] → läuft 1x beim Mount
[value] → läuft wenn value sich ändert
Ohne Array → läuft nach jedem Render (langsam!)

1.7 Conditional Rendering

Elemente anzeigen/verstecken basierend auf Bedingungen.

JavaScript

const Message = ({ isVisible }) => {
  // Variante 1: if-Statement
  if (!isVisible) {
    return null;
  }
  return <p>Ich bin sichtbar</p>;
};

// Variante 2: Ternärer Operator
const Message2 = ({ isVisible }) => {
  return isVisible ? <p>Sichtbar</p> : null;
};

// Variante 3: && Operator
const Message3 = ({ isVisible }) => {
  return isVisible && <p>Sichtbar</p>;
};

Copy

const Message = ({ isVisible }) => {
  // Variante 1: if-Statement
  if (!isVisible) {
    return null;
  }
  return <p>Ich bin sichtbar</p>;
};

// Variante 2: Ternärer Operator
const Message2 = ({ isVisible }) => {
  return isVisible ? <p>Sichtbar</p> : null;
};

// Variante 3: && Operator
const Message3 = ({ isVisible }) => {
  return isVisible && <p>Sichtbar</p>;
};

1.8 Listen rendern

Mit .map() Arrays in JSX rendern.

JavaScript

const ItemList = () => {
  const items = ['Item 1', 'Item 2', 'Item 3'];
  
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

Copy

const ItemList = () => {
  const items = ['Item 1', 'Item 2', 'Item 3'];
  
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

WICHTIG: key ist notwendig! (Nicht index in echten Apps, aber für jetzt OK)

Zusammenfassung Modul 1

Konzept	Was es tut
JSX	HTML in JavaScript
Komponenten	Wiederverwendbare UI-Teile
Props	Daten an Komponenten übergeben
State	Daten die sich ändern
Events	Benutzerinteraktionen
useEffect	Code nach dem Rendern ausführen
Conditional	Dinge anzeigen/verstecken
map()	Listen rendern

Modul 2: Block Editor Grundlagen

2.1 Was ist der Block Editor (Gutenberg)?

Der Block Editor ist WordPress‘ visuelle Editor. Alles besteht aus Blocks.

Blocks sind:

React-Komponenten
Wiederverwendbar
Haben einen Namen, Icon, Kategorie
Speichern Daten in der Datenbank

Beispiele:

Absatz-Block (core/paragraph)
Bild-Block (core/image)
Deine Custom Blocks

2.2 Block-Struktur

Ein Block hat immer diese Teile:

JavaScript

// 1. Importiere WordPress-Funktionen
import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';

// 2. Registriere den Block
registerBlockType('mein-plugin/mein-block', {
  // Metadaten
  title: 'Mein Erster Block',
  icon: 'smiley',
  category: 'common',
  
  // Speichere Attribute (Daten)
  attributes: {
    text: {
      type: 'string',
      default: 'Hallo'
    }
  },
  
  // Edit-View (Backend - was der Admin sieht)
  edit: (props) => {
    return <div>Editing...</div>;
  },
  
  // Save-View (Frontend - was Besucher sehen)
  save: (props) => {
    return <div>Gespeichert</div>;
  }
});

Copy

// 1. Importiere WordPress-Funktionen
import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';

// 2. Registriere den Block
registerBlockType('mein-plugin/mein-block', {
  // Metadaten
  title: 'Mein Erster Block',
  icon: 'smiley',
  category: 'common',
  
  // Speichere Attribute (Daten)
  attributes: {
    text: {
      type: 'string',
      default: 'Hallo'
    }
  },
  
  // Edit-View (Backend - was der Admin sieht)
  edit: (props) => {
    return <div>Editing...</div>;
  },
  
  // Save-View (Frontend - was Besucher sehen)
  save: (props) => {
    return <div>Gespeichert</div>;
  }
});

2.3 Attributes – Die Daten des Blocks

Attributes speichern die Block-Daten persistent.

JavaScript

attributes: {
  // Text-Feld
  title: {
    type: 'string',
    default: 'Titel'
  },
  
  // Zahl
  columns: {
    type: 'number',
    default: 2
  },
  
  // Boolean (true/false)
  isVisible: {
    type: 'boolean',
    default: true
  },
  
  // Array
  items: {
    type: 'array',
    default: []
  },
  
  // Objekt
  settings: {
    type: 'object',
    default: {}
  }
}

Copy

attributes: {
  // Text-Feld
  title: {
    type: 'string',
    default: 'Titel'
  },
  
  // Zahl
  columns: {
    type: 'number',
    default: 2
  },
  
  // Boolean (true/false)
  isVisible: {
    type: 'boolean',
    default: true
  },
  
  // Array
  items: {
    type: 'array',
    default: []
  },
  
  // Objekt
  settings: {
    type: 'object',
    default: {}
  }
}

Wichtig: Nur Daten in attributes bleiben gespeichert! Normale state ist weg nach Reload.

2.4 Edit & Save Funktionen

Edit: Was der Admin im Backend sieht (interaktiv) Save: Was auf der Website gespeichert wird (statisch)

JavaScript

registerBlockType('mein-plugin/example', {
  attributes: {
    text: {
      type: 'string',
      default: 'Test'
    }
  },
  
  // EDIT - interaktiv, mit Buttons, Inputs, etc.
  edit: ({ attributes, setAttributes }) => {
    const { text } = attributes;
    
    return (
      <div>
        <h2>Block Editor</h2>
        <input
          value={text}
          onChange={(e) => setAttributes({ text: e.target.value })}
        />
      </div>
    );
  },
  
  // SAVE - nur HTML/Ausgabe
  save: ({ attributes }) => {
    const { text } = attributes;
    
    return <div className="my-block">{text}</div>;
  }
});

Copy

registerBlockType('mein-plugin/example', {
  attributes: {
    text: {
      type: 'string',
      default: 'Test'
    }
  },
  
  // EDIT - interaktiv, mit Buttons, Inputs, etc.
  edit: ({ attributes, setAttributes }) => {
    const { text } = attributes;
    
    return (
      <div>
        <h2>Block Editor</h2>
        <input
          value={text}
          onChange={(e) => setAttributes({ text: e.target.value })}
        />
      </div>
    );
  },
  
  // SAVE - nur HTML/Ausgabe
  save: ({ attributes }) => {
    const { text } = attributes;
    
    return <div className="my-block">{text}</div>;
  }
});

Regel:

edit() kann State, Hooks, Interaktionen haben
save() muss reines HTML sein (kein JavaScript!)

2.5 Props in Edit & Save

Die Funktionen erhalten ein props Objekt:

JavaScript

edit: (props) => {
  // props.attributes → alle gespeicherten Daten
  // props.setAttributes → Daten ändern
  // props.isSelected → ist Block gerade aktiv?
  // props.clientId → eindeutige ID
  
  const { text } = props.attributes;
  
  return (
    <div>
      {props.isSelected && <p>Block ist aktiv!</p>}
      <p>{text}</p>
    </div>
  );
}

Copy

edit: (props) => {
  // props.attributes → alle gespeicherten Daten
  // props.setAttributes → Daten ändern
  // props.isSelected → ist Block gerade aktiv?
  // props.clientId → eindeutige ID
  
  const { text } = props.attributes;
  
  return (
    <div>
      {props.isSelected && <p>Block ist aktiv!</p>}
      <p>{text}</p>
    </div>
  );
}

2.6 WordPress Komponenten nutzen

WordPress bietet viele vorgefertigte React-Komponenten. Nutze sie!

JavaScript

import { 
  Button,
  TextControl,
  RangeControl,
  SelectControl,
  CheckboxControl
} from '@wordpress/components';

import { 
  RichText,
  MediaUpload
} from '@wordpress/block-editor';

// Beispiel
edit: ({ attributes, setAttributes }) => {
  return (
    <div>
      <TextControl
        label="Titel"
        value={attributes.title}
        onChange={(value) => setAttributes({ title: value })}
      />
      
      <RangeControl
        label="Spalten"
        value={attributes.columns}
        onChange={(value) => setAttributes({ columns: value })}
        min={1}
        max={4}
      />
      
      <Button variant="primary">
        Speichern
      </Button>
    </div>
  );
}

Copy

import { 
  Button,
  TextControl,
  RangeControl,
  SelectControl,
  CheckboxControl
} from '@wordpress/components';

import { 
  RichText,
  MediaUpload
} from '@wordpress/block-editor';

// Beispiel
edit: ({ attributes, setAttributes }) => {
  return (
    <div>
      <TextControl
        label="Titel"
        value={attributes.title}
        onChange={(value) => setAttributes({ title: value })}
      />
      
      <RangeControl
        label="Spalten"
        value={attributes.columns}
        onChange={(value) => setAttributes({ columns: value })}
        min={1}
        max={4}
      />
      
      <Button variant="primary">
        Speichern
      </Button>
    </div>
  );
}

Diese Komponenten:

Sehen aus wie WordPress Standard
Funktionieren mobil
Sind barrierefrei

2.7 RichText – Text mit Formatierung

RichText ist für editierbaren Text mit Fett, Kursiv, etc.

JavaScript

import { RichText } from '@wordpress/block-editor';

edit: ({ attributes, setAttributes }) => {
  return (
    <RichText
      tagName="h2"
      value={attributes.heading}
      onChange={(value) => setAttributes({ heading: value })}
      placeholder="Überschrift eingeben..."
    />
  );
},

save: ({ attributes }) => {
  return <h2>{attributes.heading}</h2>;
}

Copy

import { RichText } from '@wordpress/block-editor';

edit: ({ attributes, setAttributes }) => {
  return (
    <RichText
      tagName="h2"
      value={attributes.heading}
      onChange={(value) => setAttributes({ heading: value })}
      placeholder="Überschrift eingeben..."
    />
  );
},

save: ({ attributes }) => {
  return <h2>{attributes.heading}</h2>;
}

2.8 Inspector Panel (Seitenleiste)

Die Einstellungen in der rechten Seitenleiste.

JavaScript

import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, RangeControl } from '@wordpress/components';

edit: ({ attributes, setAttributes }) => {
  return (
    <>
      {/* Hauptbereich */}
      <div className="my-block">
        <p>{attributes.text}</p>
      </div>
      
      {/* Seitenleiste */}
      <InspectorControls>
        <PanelBody title="Einstellungen">
          <RangeControl
            label="Größe"
            value={attributes.size}
            onChange={(value) => setAttributes({ size: value })}
            min={10}
            max={50}
          />
        </PanelBody>
      </InspectorControls>
    </>
  );
}

Copy

import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, RangeControl } from '@wordpress/components';

edit: ({ attributes, setAttributes }) => {
  return (
    <>
      {/* Hauptbereich */}
      <div className="my-block">
        <p>{attributes.text}</p>
      </div>
      
      {/* Seitenleiste */}
      <InspectorControls>
        <PanelBody title="Einstellungen">
          <RangeControl
            label="Größe"
            value={attributes.size}
            onChange={(value) => setAttributes({ size: value })}
            min={10}
            max={50}
          />
        </PanelBody>
      </InspectorControls>
    </>
  );
}

Zusammenfassung Modul 2

Begriff	Bedeutung
Block	React-Komponente in WordPress
Attributes	Persistente Daten des Blocks
edit()	Interaktive Backend-View
save()	Statische Frontend-Ausgabe
setAttributes()	Daten speichern
RichText	Editierbarer Text
InspectorControls	Seitenleisten-Einstellungen
WordPress Components	Vorgefertigte UI-Elemente