Api Dokumentation

Die registerRenderer Action im Quantum-Viewports DataStore ermöglicht es Entwicklern, einen benutzerdefinierten Style-Renderer zu registrieren, der auf spezifische Blockattribute angewendet wird. Diese Action speichert den Renderer und seine Metadaten im Store, damit er später für die Style-Verarbeitung und Anzeige in der Benutzeroberfläche verwendet werden kann.

Parameter

• prop : String (erforderlich)
  Dies ist der Name des BlockStyle-Attributs, das der Renderer verarbeiten soll.
  Er identifiziert die Stileigenschaft, die für den Block gerendert wird.
• callback : Function (erforderlich)
  Die hier angehangene Funktion generiert die zugehörigen CSS-Regeln für das angegebene BlockStyle-Attribut und wird aufgerufen, sobald die Styles für den Block verarbeitet werden.
• renderer : Number (optional)
  Die Priorität des Renderers. Renderer mit höherer Priorität überschreiben Renderer mit niedrigerer Priorität, falls sie auf dieselben Style-Eigenschaften angewendet werden. Der Standardwert ist 10.
• selectors : Object (optional)
  Ein Objekt, das CSS-Selektoren definiert, um die Responsive Controls zu integrieren und das Panel bei Bedarf zu highlighten. Diese Selektoren spezifizieren:
  • panel : String (optional)
    Der CSS-Selektor des Panels, welches gehighlighted wird, wenn der Nutzer das Panel sucht
  • label : String (optional)
    Der CSS-Selektor des Panel Labels, in dem die Responsive Controls integriert werden sollen

Anwendungsbeispiel

Ein einfaches Beispiel zeigt die Registrierung eines Renderers für die opacity-Eigenschaft eines Blocks:

const customStyleRenderer = ( styles, { selector } ) => {
    const { value } = styles.opacity || {};

    if ( value === undefined ) {
        return '';
    }

    const compiledStyles = {
        opacity: +( value / 100 ).toFixed( 2 ),
    };

    return `${selector} { ${stylesToCss( compiledStyles )} }`;
};

// Registriere den benutzerdefinierten Renderer
dispatch( 'quantumpress/viewports' ).registerRenderer( 'customOpacity', customStyleRenderer, 20, {
    panel: '.custom-opacity-panel',
    label: '.custom-opacity-panel .components-panel-header',
});

In diesem Beispiel wird ein Renderer registriert, der eine CSS-Regel zur Steuerung der Deckkraft eines Blocks erzeugt.
Die benutzerdefinierten Styles werden dabei automatisch in die Viewports-UI integriert, sodass sie für unterschiedliche Bildschirmgrößen angepasst werden können.