段落ブロックなどに内部リンクURLを貼るなどすると、自動で表示される、WordPressの内部リンクカード。
知らないと何気にリンクURLを貼り付けてびっくりする方もいるでしょう。
ただ、文字がリンクになっているだけのリンクに比べたら、目を引いていいなと感じるものの、デザインがちょっと．．って感じですね（笑）。
ただ、巷にいろいろと掲載されているように、テンプレート自体を変更してカスタマイズしてもいいのですが、結構大掛かりなものになりますし、カスタマイズ初心者にはハードルが高いのではないかと思います。
そこで本ページでは、このリンクカードを、テンプレートを変更することなく、できるだけきれいに表示させるための手法をいくつか紹介します。
本ページ掲載のコードを使用するときは
本ページで掲載しているコードは、以下に了承した上で使用ください
- コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
- コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
- コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
- コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
- 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります（コメント欄等から質問いただいても基本回答は致しません）
- 掲載しているコードの転載を禁じます（SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です）
リンクカードカスタマイズ時の注意点
今回の方法でリンクカードのカスタマイズを行った場合には、確認できる限りでは、以下のような影響があります。承知の上で行ってください。
外部リンクのカードは基本的にカスタマイズができない
本ページの方法では、一部を除き、内部リンクに対するカードにのみスタイルの変更ができます。外部リンクのカードでのデザインが変更できない要因については後述の「外部リンクカードに追加スタイルが適用されないのは？」をご覧ください
外部サイトでのリンクカードはカスタマイズしたものが表示される
前項とは逆で、外部のサイトへ、リンクカードをカスタマイズしたサイトの投稿や固定ページをカード形式で表示させた場合は、リンク元のカードスタイルが適用されます。これについても後述の「外部リンクカードに追加スタイルが適用されないのは？」で触れていますので確認ください。
どういうこと？という方は、このページをご自身の投稿などへ埋め込んでみていただくことで確認できます（現在では、画像背景のカードが表示されます）
エディターのパターン一覧の表示への影響があるかも．．
今回のカスタマイズで特にその部分に影響を与えるスタイルコードはないのですが、WordPress6.2および6.3RC2で確認する限りでは、ブロックパターンの一覧の表示でパターン間に大きな隙間ができてしまうことがあるようです。
これを解消するには、以下のコードをテーマのfunctions.phpへ追加することで一応解消できますが、他に影響があるかも知れません。
/* ブロックパターン一覧の崩れを防ぐ */
function pwcn_block_pattern_list_style_control(){
?>
<style>
.block-editor-block-patterns-list__item {
height: auto;
}
</style>
<?php
}
add_action('admin_head','pwcn_block_pattern_list_style_control');
内部リンクカードのカスタマイズ方法
カードのスタイル（形式）を統一する
WordPressのリンクカードは、埋め込むコンテンツの画像（投稿や固定ページのアイキャッチ画像）のアスペクト比（縦横比）によって、カードのスタイルが自動で切り分けられるようになっています。
具体的には、画像の横／縦の値が1.75以上の場合は大きな画像のカード、未満の場合は小さな画像のカードがパソコン・モバイル共通で出力されるようになっています。
もう少し詳しく説明すると、縦横比が大きい場合は「rectangular」、小さい場合は「square」というクラスが追加され、それに応じて画像の大きさ、レイアウトを変えているのです。
リンクカードのテンプレートは「wp-includes」→「theme-compat」→「embed-content.php」で書かれていますので、興味のある方は見てみてください
これを、画像の状態に関わらず、パソコン表示時は小画像の時のカードに、モバイル表示時には大画像の時のカードに統一するには、以下のコードを有効化しているテーマのfunctions.phpへ追加します。
/*** パソコンでは小さい画像、モバイルでは大きい画像のカードを表示 ***/
if ( !function_exists( 'pwcn_set_embed_thumbnail_image_shape' ) ){
function pwcn_set_embed_thumbnail_image_shape() {
if(!wp_is_mobile()){
return 'square';
}else{
return 'rectangular';
}
}
}
add_filter( 'embed_thumbnail_image_shape', 'pwcn_set_embed_thumbnail_image_shape' );タブレットをパソコンとして認識させたいときは
WordPressの標準では、タブレットはモバイルとして扱われ、大きな画像を持つカードが表示されてしまうので、パソコンと同じにするのであれば、以下の参考ページの措置を行った上で、上記コードの「wp_is_mobile」を「is_mobile」に変更します。
ちなみに、本ページの方法を参考にカスタマイズすると、↑↑のようにカードのデザインを変えることができます
出力する画像のサイズを統一する
WordPressでは、各所に出力される画像類は、画面サイズなどによって常に最適と思われるものを選択してくれていて、何も気にすることなく投稿などが作れて本当にありがたいです。
ただ、今回のリンクカードではそれほど縦横サイズの大きい画像は必要ないので、どのタイプのカードでも「中」サイズの画像が出力されるようにしておけば問題ないと思います。
カード内のアイキャッチ画像を「中」サイズに限定するには、以下のコードをfunctions.phpへ追加します。
/*** カードに使用する画像のサイズを「中」にする ***/
if ( !function_exists( 'pwcn_set_embed_thumbnail_image_size' ) ){
function pwcn_set_embed_thumbnail_image_size() {
return 'medium';
}
}
add_filter( 'embed_thumbnail_image_size', 'pwcn_set_embed_thumbnail_image_size' );カードを親要素の横幅いっぱいに表示する
ここまでで、カードの種類、出力される画像のサイズを指定（限定）することができました。
次に行うのは、カードを親要素の横幅いっぱいに表示するカスタマイズです。
何となくカードの横幅が中途半端だなと感じる人はこれだけを行っても十分見栄えのするリンクカードになると思います。
カードの横幅をいっぱいにするには、以下のコードをfunctions.phpへ追加します。
現在確認したところでは、WordPress6.3とそれ以前とで、割り当て方が若干変わっているようです。以下のコードでは6.3用のものを有効にし、それ以前用のものをコメントアウトしていますので、旧バージョンの場合はコメント化する位置を変えてください
function pwcn_original_embed_style(){
?>
<style text="text/css">
/* WordPress6.2.x以前のコード */
/*
figure.is-type-wp-embed iframe {
width: 100%;
max-width: 100%;
}
*/
/* WordPress6.3以降のコード */
.wp-embedded-content{
width:100%;
}
</style>
<?php
}
add_filter('enqueue_block_editor_assets', 'pwcn_original_embed_style');
add_filter('wp_head', 'pwcn_original_embed_style');同じスタイルコードを出力する関数を、ブロックエディターにスタイルを適用する「enqueue_block_editor_assets」とフロントエンド（閲覧画面）にスタイルを適用する「wp_head」の両方にフックすることで、どちらの画面でも同様に横幅いっぱいに表示されるようになります。
また、後述の「スタイル変更でカードがはみ出てしまうときは？」で触れていますが、カスタマイズを進めるうちに、いつの間にか下の部分が見切れてしまう不具合に備えて、赤字で示すように高さの指定を加えて、以下のようにしておくとよいでしょう。
現在確認したところでは、WordPress6.3とそれ以前とで、割り当て方が若干変わっているようです。以下のコードでは6.3用のものを有効にし、それ以前用のものをコメントアウトしていますので、旧バージョンの場合はコメント化する位置を変えてください
さらにWordPress6.4移行では、デフォルトのスタイルの優先順位が上がったようで、各スタイルコードに「!important」を付加して強制しないといけないケースが増えていますので、適宜優先度の調整を行う必要があります
function pwcn_original_embed_style(){
?>
<style text="text/css">
/* WordPress6.2.x以前のコード */
/*
figure.is-type-wp-embed iframe {
width: 100%;
max-width: 100%;
min-height: 100%;
}
*/
/* WordPress6.3以降のコード */
.wp-embedded-content{
width:100%;
}
</style>
<?php
}
add_filter('enqueue_block_editor_assets', 'pwcn_original_embed_style');
add_filter('wp_head', 'pwcn_original_embed_style');カード内の色や文字を変更する
カードはiframeタグをfigureタグで囲んで表示するようになっており、iframeタグの中は、埋め込み（普通のページが埋め込まれているイメージ）になっているため、通常のスタイルシート（テーマのstyle.cssなど）へスタイルコードを書いても全く反映されません。
そこでWordPressで用意されている「embed_head」というフックを使って、iframeの中にスタイルを追加します。
基本的には以下のコードをfunctions.phpへ追加して、「ここに上書きするスタイルコードを記入」のコメントの下へ必要な記述を追加するとよいでしょう。
/*** embed_head（iframeの中のみ）で適用するスタイル ***/
function pwcn_embed_head_style(){
?>
<style text="text/css">
<!-- ここに上書きするスタイルコードを記入 -->
</style>
<?php
}
add_filter('embed_head', 'pwcn_embed_head_style');以下のスタイルコードが反映されていますので、コピーして必要な部分を書き換えれば、いろいろな部分が変更できます。
以下に具体的なカスタマイズ例をいくつか紹介しておきます。
スタイルコードはWordPress6.2の段階のもので、バージョンによってコードが異なる場合があります
カード全体に関するもの
/* カード全般 */
.wp-embed {
padding: 25px;/* カードの内側の余白 */
font-size: 14px;/* 基本となる文字の大きさ */
font-weight: 400;/* 文字の太さ */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;/* 文字の種類 */
line-height: 1.5;/* 行間 */
color: #8c8f94;/* 文字の色 */
background: #fff;/* カードの背景色 */
border: 1px solid #dcdcde;/* カードの枠線色 */
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);/* カード枠線の影の色 */
/* Clearfix */
overflow: auto;
zoom: 1;
}
/* カード内リンク要素 */
.wp-embed a {
color: #8c8f94;/* リンクの文字色 */
text-decoration: none;/* リンク文字への装飾 */
}
/* ホーバー時のカード内リンク要素 */
.wp-embed a:hover {
text-decoration: underline;/* リンク文字への装飾 */
}例えば、背景色を「黒色」に変更したい場合は以下のコードを「ここに上書きするスタイルコードを記入」のコメントの下へ追加します。
.wp-embed {
background:#000000;
}また、ブロックテーマの場合や、クラシックテーマでtheme.jsonに文字の初期スタイル（グローバルスタイル）が設定されているテーマの場合は、以下のコードで文字種を初期スタイルと共通にするなんてこともできます。
.wp-embed{
font-family: var(--wp--preset--font-family--system-font);
}カードの背景に画像を使いたい場合には、標準でスタイルが設定されていないので、以下のように記述し、「画像のURL」の部分を変更します。
.wp-embed{
background-image: url(画像のURL);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-blend-mode: normal;
}画像に関するもの
.wp-embed-featured-image {
margin-bottom: 20px;
}
.wp-embed-featured-image img {
width: 100%;
height: auto;
border: none;
}
/* 小さい画像を使ったカードの画像 */
.wp-embed-featured-image.square {
float: left;
max-width: 160px;
margin-right: 20px;
}例えばここまでのカスタマイズでパソコンに小さい画像のカードを指定した場合で、画像の大きさを少し大きく変えたいときは、以下のようにすればOKです。
.wp-embed-featured-image.square {
float: left;
max-width: 200px;
margin-right: 20px;
}というように、標準のスタイルコードから必要な部分だけを取り出して加工したものを冒頭のコード内へ挿入すれば、比較的簡単に見た目のカスタマイズが可能です。
以下、WordPress6.2のリンクカードに関するスタイルコードを転記しておきますので、これを利用するか、デベロッパーツールなどでコードを調べてカスタマイズしてみてください。
html, body {
padding: 0;
margin: 0;
}
body {
font-family: sans-serif;
}
/* Text meant only for screen readers */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
/* Dashicons */
.dashicons {
display: inline-block;
width: 20px;
height: 20px;
background-color: transparent;
background-repeat: no-repeat;
background-size: 20px;
background-position: center;
transition: background .1s ease-in;
position: relative;
top: 5px;
}
.dashicons-no {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M15.55%2013.7l-2.19%202.06-3.42-3.65-3.64%203.43-2.06-2.18%203.64-3.43-3.42-3.64%202.18-2.06%203.43%203.64%203.64-3.42%202.05%202.18-3.64%203.43z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
}
.dashicons-admin-comments {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M5%202h9q.82%200%201.41.59T16%204v7q0%20.82-.59%201.41T14%2013h-2l-5%205v-5H5q-.82%200-1.41-.59T3%2011V4q0-.82.59-1.41T5%202z%27%20fill%3D%27%2382878c%27%2F%3E%3C%2Fsvg%3E");
}
.wp-embed-comments a:hover .dashicons-admin-comments {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M5%202h9q.82%200%201.41.59T16%204v7q0%20.82-.59%201.41T14%2013h-2l-5%205v-5H5q-.82%200-1.41-.59T3%2011V4q0-.82.59-1.41T5%202z%27%20fill%3D%27%230073aa%27%2F%3E%3C%2Fsvg%3E");
}
.dashicons-share {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.5%2012q1.24%200%202.12.88T17.5%2015t-.88%202.12-2.12.88-2.12-.88T11.5%2015q0-.34.09-.69l-4.38-2.3Q6.32%2013%205%2013q-1.24%200-2.12-.88T2%2010t.88-2.12T5%207q1.3%200%202.21.99l4.38-2.3q-.09-.35-.09-.69%200-1.24.88-2.12T14.5%202t2.12.88T17.5%205t-.88%202.12T14.5%208q-1.3%200-2.21-.99l-4.38%202.3Q8%209.66%208%2010t-.09.69l4.38%202.3q.89-.99%202.21-.99z%27%20fill%3D%27%2382878c%27%2F%3E%3C%2Fsvg%3E");
display: none;
}
.js .dashicons-share {
display: inline-block;
}
.wp-embed-share-dialog-open:hover .dashicons-share {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.5%2012q1.24%200%202.12.88T17.5%2015t-.88%202.12-2.12.88-2.12-.88T11.5%2015q0-.34.09-.69l-4.38-2.3Q6.32%2013%205%2013q-1.24%200-2.12-.88T2%2010t.88-2.12T5%207q1.3%200%202.21.99l4.38-2.3q-.09-.35-.09-.69%200-1.24.88-2.12T14.5%202t2.12.88T17.5%205t-.88%202.12T14.5%208q-1.3%200-2.21-.99l-4.38%202.3Q8%209.66%208%2010t-.09.69l4.38%202.3q.89-.99%202.21-.99z%27%20fill%3D%27%230073aa%27%2F%3E%3C%2Fsvg%3E");
}
.wp-embed {
padding: 25px;
font-size: 14px;
font-weight: 400;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #8c8f94;
background: #fff;
border: 1px solid #dcdcde;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
/* Clearfix */
overflow: auto;
zoom: 1;
}
.wp-embed a {
color: #8c8f94;
text-decoration: none;
}
.wp-embed a:hover {
text-decoration: underline;
}
.wp-embed-featured-image {
margin-bottom: 20px;
}
.wp-embed-featured-image img {
width: 100%;
height: auto;
border: none;
}
.wp-embed-featured-image.square {
float: left;
max-width: 160px;
margin-right: 20px;
}
.wp-embed p {
margin: 0;
}
p.wp-embed-heading {
margin: 0 0 15px;
font-weight: 600;
font-size: 22px;
line-height: 1.3;
}
.wp-embed-heading a {
color: #2c3338;
}
.wp-embed .wp-embed-more {
color: #c3c4c7;
}
.wp-embed-footer {
display: table;
width: 100%;
margin-top: 30px;
}
.wp-embed-site-icon {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 25px;
width: 25px;
border: 0;
}
.wp-embed-site-title {
font-weight: 600;
line-height: 1.78571428;
}
.wp-embed-site-title a {
position: relative;
display: inline-block;
padding-left: 35px;
}
.wp-embed-site-title,
.wp-embed-meta {
display: table-cell;
}
.wp-embed-meta {
text-align: right;
white-space: nowrap;
vertical-align: middle;
}
.wp-embed-comments,
.wp-embed-share {
display: inline;
}
.wp-embed-meta a:hover {
text-decoration: none;
color: #2271b1;
}
.wp-embed-comments a {
line-height: 1.78571428;
display: inline-block;
}
.wp-embed-comments + .wp-embed-share {
margin-left: 10px;
}
.wp-embed-share-dialog {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #1d2327;
background-color: rgba(0, 0, 0, 0.9);
color: #fff;
opacity: 1;
transition: opacity .25s ease-in-out;
}
.wp-embed-share-dialog.hidden {
opacity: 0;
visibility: hidden;
}
.wp-embed-share-dialog-open,
.wp-embed-share-dialog-close {
margin: -8px 0 0;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
outline: none;
}
.wp-embed-share-dialog-open .dashicons,
.wp-embed-share-dialog-close .dashicons {
padding: 4px;
}
.wp-embed-share-dialog-open .dashicons {
top: 8px;
}
.wp-embed-share-dialog-open:focus .dashicons,
.wp-embed-share-dialog-close:focus .dashicons {
box-shadow: 0 0 0 1px #4f94d4, 0 0 2px 1px rgba(79, 148, 212, 0.8);
border-radius: 100%;
}
.wp-embed-share-dialog-close {
position: absolute;
top: 20px;
right: 20px;
font-size: 22px;
}
.wp-embed-share-dialog-close:hover {
text-decoration: none;
}
.wp-embed-share-dialog-close .dashicons {
height: 24px;
width: 24px;
background-size: 24px;
}
.wp-embed-share-dialog-content {
height: 100%;
transform-style: preserve-3d;
overflow: hidden;
}
.wp-embed-share-dialog-text {
margin-top: 25px;
padding: 20px;
}
.wp-embed-share-tabs {
margin: 0 0 20px;
padding: 0;
list-style: none;
}
.wp-embed-share-tab-button {
display: inline-block;
}
.wp-embed-share-tab-button button {
margin: 0;
padding: 0;
border: none;
background: transparent;
font-size: 16px;
line-height: 1.3;
color: #a7aaad;
cursor: pointer;
transition: color .1s ease-in;
}
.wp-embed-share-tab-button [aria-selected="true"] {
color: #fff;
}
.wp-embed-share-tab-button button:hover {
color: #fff;
}
.wp-embed-share-tab-button + .wp-embed-share-tab-button {
margin: 0 0 0 10px;
padding: 0 0 0 11px;
border-left: 1px solid #a7aaad;
}
.wp-embed-share-tab[aria-hidden="true"] {
display: none;
}
p.wp-embed-share-description {
margin: 0;
font-size: 14px;
line-height: 1;
font-style: italic;
color: #a7aaad;
}
.wp-embed-share-input {
box-sizing: border-box;
width: 100%;
border: none;
height: 28px;
margin: 0 0 10px;
padding: 0 5px;
font-size: 14px;
font-weight: 400;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
line-height: 1.5;
resize: none;
cursor: text;
}
textarea.wp-embed-share-input {
height: 72px;
}
html[dir="rtl"] .wp-embed-featured-image.square {
float: right;
margin-right: 0;
margin-left: 20px;
}
html[dir="rtl"] .wp-embed-site-title a {
padding-left: 0;
padding-right: 35px;
}
html[dir="rtl"] .wp-embed-site-icon {
margin-right: 0;
margin-left: 10px;
left: auto;
right: 0;
}
html[dir="rtl"] .wp-embed-meta {
text-align: left;
}
html[dir="rtl"] .wp-embed-footer {
}
html[dir="rtl"] .wp-embed-share {
margin-left: 0;
margin-right: 10px;
}
html[dir="rtl"] .wp-embed-share-dialog-close {
right: auto;
left: 20px;
}
html[dir="rtl"] .wp-embed-share-tab-button + .wp-embed-share-tab-button {
margin: 0 10px 0 0;
padding: 0 11px 0 0;
border-left: none;
border-right: 1px solid #a7aaad;
}
リンクカードに対する謎や解決方法など
最後に、今回のリンクカードカスタマイズにあたって躓いた点や注意する点、どうにもならないと思われる点などについて、紹介しておきます。
あくまでも私自身が達した結論ですので、ひょっとするとうまく制御する方法があるのかも知れません。
外部リンクカードに追加スタイルが適用されないのは？
カスタマイズして「これでよし！」と思ったのも束の間、外部リンクを埋め込んでカード化すると、追加したスタイルが適用されないことに気づくと思います。
これは、少なくともWordPress6.2時点では、以下のようになっているからです。
- 内部リンクカードは完全なHTMLで構成され、それを埋め込んでいる
- 外部リンクカードは1つのフレーム（画像のようなもの）を埋め込んでいる
すなわち、外部リンクカードはHTMLではないので、スタイルを適用させることができないということです。
逆に、カスタマイズしたカードを表示させているサイトのリンクを他のサイトへ埋め込んだ場合には、カスタマイズしたカードとして表示され、リンク先では原則スタイルの変更ができないということになりますから、注意が必要となるかも知れません。
そうなると、せっかくカードでリンクしてもらっても、リンク先のサイトに影響が出てしまうのは．．と考えてしまいそうですが、個人的には、カードスタイルをサイトの印象に合わせておくことで、いい意味でアピールになるのではないかと思います。
ただし、フレーム内の加工は無理ですが、カスタマイズ例で示したように、その外側のfigureに対してはカスタマイズが効くので、幅を100%にすることはできます。
スタイル変更でカードがはみ出てしまうときは？
iframe(リンクカードの中身)の高さを事前に計算して、figure(外側の囲み)の高さを決定しているようなので、embed_head関数を使って後から追加したCSS分は考慮されず、文字の大きさやマージンなどを変更すると、計算済の高さからあふれた場合には、表示されずに見切れてしまいます。
厳密に言うと、この処理はJSで行われているので、WordPress本体にあるJSを改変するしかないと思われます。
ただ、どうしても何とかしたい．．という場合は以下をstyle.cssへ追加することで解決できると思います。
figure.wp-block-embed iframe {
min-height:100%;
}記述追加後は、画面をリロードすることで反映されます
一応私の開発環境（と言ってもこのサイトですが．．）では、この記述でうまく適用されているようです
エディター側にも反映させる場合は「enqueue_block_editor_assets」フックで挿入する必要があります
どうしても大きくレイアウトを変える必要がある場合を除いては、色程度のカスタマイズにとどめた方がよいと思います。
フッターアイコンの色を変更する方法は？
カードフッターに表示される「コメント」と「シェア」アイコン。単純にDashIconで出力されているかと思いきや、SVGで画像として出力されているようなので、通常のCSSでは色の変更はできませんがコードを解析してみると、変更することは可能なようです。
デベロッパーツールを使って画像のコードを抽出すると、以下が設定されていることが分かります。
/* ホーバー時のコメントアイコン */
.wp-embed-comments a:hover .dashicons-admin-comments {
background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M5%202h9q.82%200%201.41.59T16%204v7q0%20.82-.59%201.41T14%2013h-2l-5%205v-5H5q-.82%200-1.41-.59T3%2011V4q0-.82.59-1.41T5%202z%27%20fill%3D%27%230073aa%27%2F%3E%3C%2Fsvg%3E);
}
/* コメントアイコン */
.dashicons-admin-comments {
background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M5%202h9q.82%200%201.41.59T16%204v7q0%20.82-.59%201.41T14%2013h-2l-5%205v-5H5q-.82%200-1.41-.59T3%2011V4q0-.82.59-1.41T5%202z%27%20fill%3D%27%2382878c%27%2F%3E%3C%2Fsvg%3E);
}
/* ホーバー時のシェアアイコン */
.wp-embed-share-dialog-open:hover .dashicons-share {
background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.5%2012q1.24%200%202.12.88T17.5%2015t-.88%202.12-2.12.88-2.12-.88T11.5%2015q0-.34.09-.69l-4.38-2.3Q6.32%2013%205%2013q-1.24%200-2.12-.88T2%2010t.88-2.12T5%207q1.3%200%202.21.99l4.38-2.3q-.09-.35-.09-.69%200-1.24.88-2.12T14.5%202t2.12.88T17.5%205t-.88%202.12T14.5%208q-1.3%200-2.21-.99l-4.38%202.3Q8%209.66%208%2010t-.09.69l4.38%202.3q.89-.99%202.21-.99z%27%20fill%3D%27%230073aa%27%2F%3E%3C%2Fsvg%3E);
}
/* シェアアイコン */
.dashicons-share {
background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.5%2012q1.24%200%202.12.88T17.5%2015t-.88%202.12-2.12.88-2.12-.88T11.5%2015q0-.34.09-.69l-4.38-2.3Q6.32%2013%205%2013q-1.24%200-2.12-.88T2%2010t.88-2.12T5%207q1.3%200%202.21.99l4.38-2.3q-.09-.35-.09-.69%200-1.24.88-2.12T14.5%202t2.12.88T17.5%205t-.88%202.12T14.5%208q-1.3%200-2.21-.99l-4.38%202.3Q8%209.66%208%2010t-.09.69l4.38%202.3q.89-.99%202.21-.99z%27%20fill%3D%27%2382878c%27%2F%3E%3C%2Fsvg%3E);
/* display: none; */
}すべてエンコード（記号が文字列変換）されているので非常に分かりにくいですが、この中の「%23〇〇〇〇〇〇」というのが色を指定している部分で、先頭の「%23」は「#」がエンコード（無害化）されたものですから、通常のHEX値の6桁分（〇〇〇〇〇〇）を書き換えれば、それぞれの画像に対して色の指定ができます。
なお、この部分はiframe内のスタイルなので「embed_head」関数を使って適用する必要があります。
カード幅を100%にすると、投稿編集画面に起こる不具合
WordPress 6.3への更新後に気づいたのですが、このページの方法でカードの幅を100%にすると、投稿や固定ページ編集画面の以下の部分で、高さがおかしくなる（余分な空白ができる）現象が発生しました。
- パターンの一覧
- 右サイドパネルの「カテゴリー」「タグ」一覧など
特に何も作用するようなことはしていないと思うのですが、カード幅100%の措置を行うと効いてしまうようです。
以下のコードをfunctions.phpへ追加することで回避できますので、同様の不具合がある方は試してみてください。
/* 編集画面の崩れを防ぐ */
if ( !function_exists( 'pwcn_editor_screen_list_style_control' ) ){
function pwcn_editor_screen_list_style_control(){
?>
<style>
.block-editor-block-patterns-list__item {
height: auto;
}
.css-1n451hs{
height:auto!important;
}
</style>
<?php
}
}
add_action('admin_head','pwcn_editor_screen_list_style_control');
