Api Dokumentation

The registerRenderer action in the Viewports DataStore allows developers to register a custom style renderer that is applied to specific block attributes. This action stores the renderer and its metadata in the store so it can later be used for style processing and rendering in the user interface.

Parameter

• prop : String (required)
  The name of the BlockStyle attribute that the renderer should handle.
  It identifies the style property that will be rendered for the block.
• callback : Function (required)
  The attached function generates the corresponding CSS rules for the specified BlockStyle attribute and is called whenever the styles for the block are processed.
• renderer : Number (optional)
  The priority of the renderer. Renderers with a higher priority override those with a lower priority if they are applied to the same style properties. The default value is 10.
• selectors : Object (optional)
  An object that defines CSS selectors to integrate the responsive controls and highlight the panel when needed. These selectors specify:
  • panel : String (optional)
    The CSS selector of the panel that is highlighted when the user searches for the panel.
  • label : String (optional)
    The CSS selector of the panel label where the responsive controls should be integrated.

Anwendungsbeispiel

A simple example demonstrates how to register a renderer for a block’s opacity property:

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 this example, a renderer is registered that generates a CSS rule to control a block’s opacity.
The custom styles are automatically integrated into the Viewports UI, allowing them to be adjusted for different screen sizes.