[Resolved] Inline headline not displaying inline

[Erika]

Hi there,

I added some nice stars to a block and they are set to inline-width. In Backend they display properly, in Frontend under each other. Could you help me to fix this?

Thanks, Erika

[Ying]

Hi Erika,

The GB style isn’t loading on your site.

Can you go to dashboard > GenerateBlocks > settings, and hit the Regenerate CSS button?

If it doesn’t work, can you switch it to Inline CSS?

Also, disabling the cache plugin might be worth a try.
Let me know if this works.

[Erika]

Hi Ying,

I did all 3 steps, no result 🙁
Inline CSS is set as well as in the customizer as in GB settings, Cache plugin deactivated.

If I add icons to the site, they work. See the snowflakes above the block. In this case, the icons are part of the blog post content and are pulled in the query block with the “whole content” block of WP, because GB does not have that option 🙁 I guess that is the reason, but how do I get around this problem?

Another idea was to use GBs dynamic content and give out the excerp with 200 words (basically the whole blog post), however the stars are ignored completely in this case.

Any idea to solve this?

Or any other idea to think differently? I´d like to manually control how many stars a testimonial has without using another plugin and without pulling the testimonials from google. We´d rather add them as blog post and display in a query block.

Thanks, Erika

[Fernando]

Hi Erika,

Let’s check if a database-saving issue occurred. Can you try to recreate the stars from scratch?

Let us know how it goes.

[Erika]

Hi Fernando,

nope. Even Worse :D, not it does not even take the size of icon.

What´s next? Could it be that the WP block deletes all styles and displays only text?

Erika

[David]

Hi there,

i would approach this differently:

1. Add a Custom Field to your Post with a name of stars and give it your star valie.
This way we have the value saved in the Post Meta.

2. Add this PHP Snippet to get the value and create our HTML and CSS for displaying the stars:

add_filter( 'render_block', function( $block_content, $block ) {
    $id = get_the_id();
    $starValue = get_post_meta($id, 'stars', true);

    if ( $starValue 
    && ! empty( $block['attrs']['className'] ) 
    && 'star-rating' ===  $block['attrs']['className']
    ) {
        $percentage = 100 * $starValue / 5;
        $color = '#ff0000';
        $block_content = '<span class="star-bar-' . $id . '">★★★★★</span>
        <style>
        .star-bar-' . $id . ' {
            background: linear-gradient(90deg, '. $color . ' ' . $percentage .'%, rgba(0,0,0,0) '. $percentage.'%);
            color: rgba(0,0,0,.2);
            background-clip: text;
            -webkit-background-clip: text;
            color: rgba(0,0,0,.2);
        }
        </style>';
        }

    return $block_content;
}, 10, 2 );

3. Now in your Query Loop or in your Single ( or where ever you want to display it ) add a GB Headline Block.
3.1 Just add some static text to the block eg. star rating
3.2 In Advanced > Additional CSS Class(es) add: star-rating

The PHP snippet in #2 will replace the headline block with a Star bar.

[Erika]

Hi David,

there´s always trust in you 🙂 Thank you for this solution. It´s beautiful.

Erika

[David]

Glad to be of help 🙂

[Author]

Posts