Element API Styles

Support
#1

I created a custom element using the Primer and Reference docs. So far the element is available and I can add it to my page. All of the fields show up fine. The only issue I’m having is the styles. I can pass them to my render function and get some things working with inline styles, but I can’t do that for everything as I need to target pseudo elements as well. I tried registering the style callback, but none of the styles show up.

I am registering my element like so:

private function register() {
    cs_register_element( 'cscompanion-eri-file-library', [
        'title' => __( 'ERI File', 'cornerstone-companion' ),
        'values' => [
            'type'                   => cs_value( 'link', 'attr', false ),
            'align_content'          => cs_value( 'left', 'attr', false ),
            'content_margin'         => cs_value( '0rem', 'attr', false ),
            'background_color'       => cs_value( 'transparent', 'attr', false ),
            'background_color_hover' => cs_value( 'transparent', 'attr', false ),
            'text_color'             => cs_value( 'transparent', 'attr', false ),
            'text_color_hover'       => cs_value( 'transparent', 'attr', false ),
        ],
        'builder' => [ $this, 'builder' ],
        'style' => [ $this, 'style' ],
        'render' => [ $this, 'render' ],
    ] );
} // End register()

And my style looks like this:

public function style() { 
    $download_class = $this->download_class;

    ob_start();
    ?>
    .$_el {
        margin: $content_margin;
        text-align: $align_content;
    }

    .$_el .<?php echo esc_attr( $download_class ); ?>.button {
        background-color: $background_color;
        color: $text_color !important;
    }

    .$_el .<?php echo esc_attr( $download_class ); ?>.button:hover {
        background-color: $background_color_hover;
        color: $text_color_hover !important;
    }
    <?php
    return ob_get_clean();
} // End style()

And lastly, my render callback:

public function render( $data ) {
    extract( $data );

    $incl_class = $class ? ' class="' . $class . '"' : '';
    $incl_title = $title ? ' title="' . $title . '"' : '';
    $incl_desc = $desc ? ' desc="' . $desc . '"' : '';
    $incl_formats = $formats ? ' formats="' . $formats . '"' : '';

    // Print
    return '<div id="' . esc_attr( $style_id ) . '"' . $incl_class . '>' .
        do_shortcode( '[' . $this->shortcode . ' id="' . esc_attr( $id ) . '" type="' . esc_attr( $type ) . '"' . $incl_title . $incl_desc . $incl_formats . ']' ) .
    '</div>';
} // End render()

I read in another forum topic that .$_el was being replaced with &, but doing & did not make a difference. I also tried $el and $_el. Nothing is working, and it seems your documentation is outdated. Any suggestions?

Here is my full script if it helps: GitHub Gist.

Thanks in advance.

#2

I think you need to utilize the classes key so your TSS can style the element properly. class is the class name given in the “Customize” tab.

$full_classes = implode(' ', $data['classes']);

Some debugging things that might help you.

// Disable Style Cache
add_filter('cs_disable_style_cache', '__return_true');

// When enabled, will place each generated style in it's own <style> tag. Making it easier to see what you are outputting.
add_filter("cs_debug_css", "__return_true");

If it helps my Cornerstone Code Blocks element goes through this as well. You can also checkout the code for the QR Code element.

Have a great day.

#3

Thanks for the reply. Now we’re getting somewhere. I updated my code to:

public function style() {
    $download_class = $this->download_class;

    ob_start();
    ?>
    & {
        margin: get(content_margin);
        text-align: get(align_content);
    }
    & .<?php echo esc_attr( $download_class ); ?>.button {
        background-color: get(background_color) !important;
        color: get(text_color) !important;
    }

    & .<?php echo esc_attr( $download_class ); ?>.button:hover {
        background-color: get(background_color_hover) !important;
        color: get(text_color_hover) !important;
    }

    <?php
    return ob_get_clean();
} // End style()

public function render( $data ) {
    extract( $data );

    $incl_classes = implode( ' ', $data[ 'classes' ] );
    $incl_class = $class ? ' ' . $class : '';
    $incl_formats = $formats ? ' formats="' . $formats . '"' : '';

    return '<div class="' . $incl_classes . $incl_class . '">' .
        do_shortcode( '[' . $this->shortcode . ' id="' . $id . '" type="' . $type . '"' . $incl_formats . ']' ) .
    '</div>';
} // End render()

The $class property is a control I added to pass a class without using the Customizer tab, so that is why that is still there.

Now the mod class shows up and some of my css is working. My background color is still not working, though, so I’d like to debug the css like you said. I tried adding add_filter("cs_debug_css", "__return_true"); but I’m not finding where the <style> tags are added. I looked in the console to see if I can find it anywhere on both the front-end page and in the previewer. Can you be a little more specific where I should be looking for this?