Docs Panel registry

Panel Registry: Resolving Classes in render.php

The PHP helper wptrussresolveclasses( $attributes ) converts registry attribute values to utility CSS class names. Call it at the top of every render.php.

Usage

<?php
defined( 'ABSPATH' ) || exit;

$utility_classes = wptruss_resolve_classes( $attributes );

$block_classes = implode( ' ', array_filter([
    'wpt-my-block',
    ! empty( $attributes['variant'] )
        ? 'wpt-my-block--' . sanitize_html_class( $attributes['variant'] )
        : '',
]));
?>

<<?php echo esc_attr( $attributes['semanticRole'] ?? 'section' ); ?>
    <?php echo get_block_wrapper_attributes([
        'class' => $block_classes . ' ' . $utility_classes
    ]); ?>
>
    ...
</<?php echo esc_attr( $attributes['semanticRole'] ?? 'section' ); ?>>

Class Output Reference

Attribute	Value	CSS class added
`blockPadding`	`xl`	`wpt-padding-xl`
`blockGap`	`md`	`wpt-gap-md`
`spacingBottom`	`2xl`	`wpt-mb-2xl`
`hideOnMobile`	`true`	`wpt-hide-mobile`
`hideOnTablet`	`true`	`wpt-hide-tablet`
`hideOnDesktop`	`true`	`wpt-hide-desktop`
`textAlign`	`center`	`wpt-text-center`
`containerWidth`	`boxed`	`wpt-container-boxed`

These utility classes need corresponding CSS rules. wpTruss provides the spacing utilities in its frontend stylesheet. The wpt-hide-* classes need rules in your block’s style.css if the theme does not already define them:

@media (max-width: 640px)                         { .wpt-hide-mobile  { display: none !important; } }
@media (min-width: 641px) and (max-width: 1024px) { .wpt-hide-tablet  { display: none !important; } }
@media (min-width: 1025px)                        { .wpt-hide-desktop { display: none !important; } }