Footnote Block: Styles are applying to elements that happen to have the .fn class.

[shazahm1]

Description

The styles for this block select the .fn class globally. This makes any page content with this class render offscreen due to the text-indent property and replaced with [1]. The is the offending CSS:

.fn {
    counter-increment: footnotes;
    display: inline-block;
    font-size: smaller;
    text-indent: -9999999px;
    vertical-align: super
}

.fn:after {
    content: "[" counter(footnotes) "]";
    float: left;
    text-indent: 0
}

The class name needs to be more specific, or the CSS sector more specific.

Step-by-step reproduction instructions

Add the fn class to any page element.

Screenshots, screen recording, code snippet

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[carolinan]

I was able to reproduce this.

The default comments in classic themes use this class:
https://core.trac.wordpress.org/browser/tags/6.2/src/wp-includes/class-walker-comment.php#L335

[Rayme]

I meet this issue too. I can't find the .fn {xxx} in style.css file. All I can do is to disable the Gutenburg plugin

[huhexian]

My friend met this issue too, then we helped him investigate the cause and found that it was caused by the Gutenberg plugin.