Post Title Styling in Query Block

I created a new wp query block. It is loaded into index.html . Created in mainly to load a single post using a tag featured. Allows me to automatically load in a post based on tag. and avoid the need to update the page all the time. This is the current code used for it:

<?php
/**
 * Title: Single Featured Post
 * Slug: moiraine/post-single-featured
 * Description: Displays a single selected post in a featured format with image and excerpt side by side
 * Categories: moiraine/posts
 * Keywords: post, single, feature
 * Viewport Width: 1280
 * Block Types: core/query
 * Post Types:
 * Inserter: false
 */
?>
<!-- wp:query {"queryId":2,"query":{"perPage":1,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"taxQuery":{"tagIds":[],"post_tag":[6]},"tax":{"post_tag":[{"id":6,"name":"featured"}]}},"align":"wide","className":"featured-post-query"} -->
<div class="wp-block-query alignwide featured-post-query">
    <!-- wp:post-template {"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|large"}},"layout":{"type":"default"}} -->
        <!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|large","bottom":"var:preset|spacing|large"}}},"backgroundColor":"tertiary","layout":{"type":"constrained"}} -->
        <div class="wp-block-group has-tertiary-background-color has-background" style="padding-top:var(--wp--preset--spacing--large);padding-bottom:var(--wp--preset--spacing--large)">
            <!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|large","left":"var:preset|spacing|large"}}}} -->
            <div class="wp-block-columns alignwide">
                <!-- wp:column {"width":"40%"} -->
                <div class="wp-block-column" style="flex-basis:40%">
                    <!-- wp:post-featured-image {"isLink":true,"size":"featured-vertical","style":{"border":{"radius":"5px"}}} /-->
                    <!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|small"}}},"layout":{"type":"constrained"}} -->
                    <div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--small)">
                        <!-- wp:post-title {"isLink":true,"fontSize":"x-large","fontFamily":"bodoni"} /-->
                    </div>
                    <!-- /wp:group -->
                </div>
                <!-- /wp:column -->
                <!-- wp:column {"width":"60%","style":{"spacing":{"blockGap":"var:preset|spacing|small"}}} -->
                <div class="wp-block-column" style="flex-basis:60%">
                    <!-- wp:post-excerpt {"moreText":"read more ..","showMoreOnNewLine":true,"fontSize":"large","fontFamily":"open-sans"} /-->
                </div>
                <!-- /wp:column -->
            </div>
            <!-- /wp:columns -->
        </div>
        <!-- /wp:group -->
    <!-- /wp:post-template -->
</div>
<!-- /wp:query -->

It works fine. I however use the post title <!-- wp:post-title {"isLink":true,"fontSize":"x-large","fontFamily":"bodoni"} /--> and I keep it as default link. Now, I want to remove the text decoration so it it not underlined on hover. It seems however that the link inside the h2 tag gets its styling this way

:root :where(.wp-block-post-title a:where(:not(.wp-element-button)):hover) {
text-decoration: underline;
}

How and I supposed to override that in CSS? It seems there are no block properties to use either. Did try

/* Remove underline from featured post title links */
.featured-post-query .wp-block-post-title a:hover {
    text-decoration: none !important;
}

But that only seems to work in the editor for some reason and not frontend.

• This topic was modified 2 weeks, 1 day ago by Rhand.
• This topic was modified 2 weeks, 1 day ago by Rhand.