WordPress 5.8.2 現在、フロントに下記のようなインラインCSSが読み込まれていることに気が付きました。
<style id='wp-block-library-theme-inline-css'>
#start-resizable-editor-section {
display:none
}
.wp-block-audio figcaption {
color: #555;
font-size: 13px;
text-align:center
}
.is-dark-theme .wp-block-audio figcaption {
color:hsla(0, 0%, 100%, .65)
}
.wp-block-code {
font-family: Menlo, Consolas, monaco, monospace;
color: #1e1e1e;
padding: .8em 1em;
border: 1px solid #ddd;
border-radius:4px
}
.wp-block-embed figcaption {
color: #555;
font-size: 13px;
text-align:center
}
.is-dark-theme .wp-block-embed figcaption {
color:hsla(0, 0%, 100%, .65)
}
.blocks-gallery-caption {
color: #555;
font-size: 13px;
text-align:center
}
.is-dark-theme .blocks-gallery-caption {
color:hsla(0, 0%, 100%, .65)
}
.wp-block-image figcaption {
color: #555;
font-size: 13px;
text-align:center
}
.is-dark-theme .wp-block-image figcaption {
color:hsla(0, 0%, 100%, .65)
}
.wp-block-pullquote {
border-top: 4px solid;
border-bottom: 4px solid;
margin-bottom: 1.75em;
color:currentColor
}
.wp-block-pullquote__citation, .wp-block-pullquote cite, .wp-block-pullquote footer {
color: currentColor;
text-transform: uppercase;
font-size: .8125em;
font-style:normal
}
.wp-block-quote {
border-left: .25em solid;
margin: 0 0 1.75em;
padding-left:1em
}
.wp-block-quote cite, .wp-block-quote footer {
color: currentColor;
font-size: .8125em;
position: relative;
font-style:normal
}
.wp-block-quote.has-text-align-right {
border-left: none;
border-right: .25em solid;
padding-left: 0;
padding-right:1em
}
.wp-block-quote.has-text-align-center {
border: none;
padding-left:0
}
.wp-block-quote.is-large, .wp-block-quote.is-style-large {
border:none
}
.wp-block-search .wp-block-search__label {
font-weight:700
}
.wp-block-group.has-background {
padding: 1.25em 2.375em;
margin-top: 0;
margin-bottom:0
}
.wp-block-separator {
border: none;
border-bottom: 2px solid;
margin-left: auto;
margin-right: auto;
opacity:.4
}
.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
width:100px
}
.wp-block-separator.has-background:not(.is-style-dots) {
border-bottom: none;
height:1px
}
.wp-block-separator.has-background:not(.is-style-wide):not(.is-style-dots) {
height:2px
}
.wp-block-table thead {
border-bottom:3px solid
}
.wp-block-table tfoot {
border-top:3px solid
}
.wp-block-table td, .wp-block-table th {
padding: .5em;
border: 1px solid;
word-break:normal
}
.wp-block-table figcaption {
color: #555;
font-size: 13px;
text-align:center
}
.is-dark-theme .wp-block-table figcaption {
color:hsla(0, 0%, 100%, .65)
}
.wp-block-video figcaption {
color: #555;
font-size: 13px;
text-align:center
}
.is-dark-theme .wp-block-video figcaption {
color:hsla(0, 0%, 100%, .65)
}
.wp-block-template-part.has-background {
padding: 1.25em 2.375em;
margin-top: 0;
margin-bottom:0
}
#end-resizable-editor-section {
display: none
}
</style>
調べてみたところ、wp_common_block_scripts_and_styles()
という関数の中に
if ( current_theme_supports( 'wp-block-styles' ) ) {
wp_enqueue_style( 'wp-block-library-theme' );
}
と書いてあり、おそらくこの 'wp-block-library-theme' というキーで読み込まれているスタイルのようだぞ、と。
前後の if 文を見ると、テーマで 'wp-block-styles' をサポートしている場合と読めるので、ブロックスタイルをサポートしていたら、上記のインラインスタイルを読み込むというような仕組みらしい。5.0 から、設置されているようですね。
調べたら、当該のテーマでは、ばっちり、add_theme_support( 'wp-block-styles' ) してました。
とは言え、邪魔なので、フロントからは削除
テーマの functions.php に下記のように書きます。
function ccc_theme_scripts() {
//そのほか
/**
* wp_common_block_scripts_and_styles() 経由で
* ブロックスタイルサポート時に読み込まれているインラインCSSをフロントからは削除
*
* @url https://developer.wordpress.org/reference/functions/wp_common_block_scripts_and_styles/
*/
wp_dequeue_style( 'wp-block-library-theme' );
//そのほか
}
add_action( 'wp_enqueue_scripts', 'ccc_theme_scripts' );
'wp-block-library-theme' というキーで読み込まれているスタイルなので、同じキー名で否定する、、、という感じです、wp_dequeue_style( 'wp-block-library-theme' )
が、その部分です。
テーマでフロントに読み込むスクリプトやスタイルをまとめて読み込んでいる部分に一緒に書いています。たぶん、そうじゃないと動かないはず（試してないですが）。
あくまで、フロントだけ削除してます。管理画面でも読み込まれているんですけど、そっちは、まあ、いいかな、、、と思って、、、。フロントエンドの <head> の中をスッキリさせたい、スタイルの衝突を防ぎたいのが目的です。（仕方ないのかもしれないけど、まじ、インラインCSSはやめてくれ！て思う・・・）
下記の記事を参考にしました。