●現象

スキン「SILK」適用時、「テーブル」ブロックや「段落」ブロックに配置「全幅（.alignfull）」を設定すると、要素が親要素を突き抜けて画面外にはみ出し、先頭の文字が欠ける現象が発生する。

●ブロック

<!-- wp:cocoon-blocks/blank-box-1 -->
<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box"><!-- wp:table {"hasFixedLayout":false,"align":"wide","borderColor":"vivid-cyan-blue"} -->
<figure class="wp-block-table alignwide"><table class="has-border-color has-vivid-cyan-blue-border-color"><tbody><tr><td>人数</td><td>1名</td><td>2名</td><td>3名</td><td>4名</td><td>5名</td></tr><tr><td>金額/<br>人</td><td>15,000円</td><td>8,000円</td><td>6,000円</td><td>5,000円</td><td>4,000円</td></tr><tr><td>合計</td><td>15,000円</td><td>16,000円</td><td>18,000円</td><td>20,000円</td><td>20,000円</td></tr></tbody></table></figure>
<!-- /wp:table --></div>
<!-- /wp:cocoon-blocks/blank-box-1 -->

<!-- wp:paragraph {"align":"full"} -->
<p class="alignfull">あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
<!-- /wp:paragraph -->

●原因

「SILK」では、全幅表示を実現するために 100vw（ビューポート幅）を基準にした引き算を行っている。
しかし、100vw は「縦スクロールバーの幅」を含んだサイズであるため、スクロールバーが表示されている環境では、その幅の分だけ画面右側にはみ出し、結果として左右のバランスが崩れて文字欠けを引き起こす。

https://github.com/xserver-inc/cocoon/blob/ea5d54c138bd2862f7a12dbfb21c756acbc07313/skins/silk/functions.php#L875-L881

●対策

本現象は仕様に起因するため、該当ブロックに「全幅」を設定しないことで回避可能。
そのため、今回はスキン側の直接的なコード修正は見送り、現状のままとする。

●補足

以下に、marginによる全幅制御とカスタムプロパティを用いたスクロールバー幅の自動相殺を行う案を示す。

@property --scrollbar {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px; 
}

html {
  container-type: inline-size;
}

/* スクロールバーの幅取得 */
body {
  --scrollbar: calc(100vw - 100cqw);
}

.alignfull {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(var(--scrollbar) / 2);
  padding-right: calc(var(--scrollbar) / 2);
}

WordPressのバージョンを7.0にアップするためテストサイトをコピーしバージョンアップしたところ

添付ファイルのように本番では青色で表示されていましたが、白色となりました。

バックアップなどでもエラーが出ているので、他のスキンで同じようなデザイン・機能があるようなものがあればと思っています。

何か情報をお持ちでしたらアドバイスいただけると助かります。

お手数をおかけしますがよろしくお願いします。

----------------------------------------------
サイト名：テストサイト
サイトURL：https://xs660401.xsrv.jp/copy-goshin-skill-test
ホームURL：https://xs660401.xsrv.jp/copy-goshin-skill-test
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
スキン：/wp-content/themes/cocoon-master/skins/skin-colors-blue/style.css
WordPressバージョン：7.0
PHPバージョン：8.3.30
データベース：10.5.29
サイト言語：ja
タイムゾーン：Asia/Tokyo
HTTPS：有効
マルチサイト：無効
WP_DEBUG：無効
DISABLE_WP_CRON：無効
WP_CACHE：無効
DISALLOW_FILE_EDIT：無効
パーマリンク構造：/%postname%/
ホームページ表示：固定ページ
PHPメモリ上限：1G
WPメモリ上限：40M
WP管理画面メモリ上限：1G
PHP最大実行時間：180秒
PHP max_input_vars：1000
アップロード上限：1G
POST上限：1G
PHP拡張：curl:有効, mbstring:有効, gd:有効, imagick:有効, xml:有効, zip:有効, intl:有効, exif:有効
画像エディタ：Imagick
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.9.2.7
カテゴリー数：4
タグ数：6
投稿数：16
固定ページ数：7
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：2632 バイト
functions.phpサイズ：203 バイト
----------------------------------------------
Gutenberg：1
Font Awesome：5
Auto Post Thumbnail：1
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
簡単SSL：0
コードハイライト：0
----------------------------------------------
canonicalタグ：1
カテゴリnoindex：0
タグnoindex：0
----------------------------------------------
サイドバー位置：sidebar_left
サイドバー表示：display_all
メインカラム幅：デフォルト
サイドバー幅：デフォルト
----------------------------------------------
全広告表示：1
AdSense表示方法：
----------------------------------------------
GA4：設定済み
GTM：設定済み
Search Console：設定済み
----------------------------------------------
ブラウザキャッシュ有効化：1
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：1
----------------------------------------------
利用中のプラグイン：
BackWPup 5.6.9
CloudSecure WP Security 1.4.10
----------------------------------------------
停止中のプラグイン：
Contact Form 7 6.1.6
EWWW Image Optimizer 8.7.0
Site Kit by Google 1.179.0
WP Fastest Cache 1.4.9
WP Multibyte Patch 2.9.3
XML Sitemap & Google News 5.7.4
Yoast Duplicate Post 4.6
----------------------------------------------

●現象

→→NAGIのリンクをクリックすると、スキン説明ページとならない。

●原因

Skin URIの記述で、URLの前が全角スペースになっている。

https://github.com/xserver-inc/cocoon/blob/a1daf4704ef5435aa3ff580a130a6253b3a4c147/skins/nagi/style.css#L4

●補足

同梱した2.7.6当初からです。

----------------------------------------------
テーマ名：Cocoon
バージョン：2.9.0.10
カテゴリー数：18
タグ数：123
投稿数：1747
固定ページ数：12
ユーザー数：1
----------------------------------------------

●現象

Cocoon 2.9.0.9以降で以下のjavascript.jsでエラーとなる。

Uncaught TypeError: $ is not a function

• イノセンス
• 凸凹
• Season (Spring)
• Season (Summer)
• Season (Autumn)
• Season (Winter)

●原因

以下でWP同梱のjQeuryに変更した。

WordPress同梱のjQueryライブラリには$シンボルの競合を防ぐため、jQuery.noConflict();が追加されいる。
このため、jQuery(function($) {...});と記述する必要がある。

https://github.com/xserver-inc/cocoon/commit/77ade5c23e05687bc565fa93d264f2fd6ef8fcf2

以下の警告メッセージが表示される。

Notice: 関数 WP_Styles::add が誤って呼び出されました。
ハンドル「block-editor-style」のスタイルは、未登録の依存関係とともにキューへ追加されました: cocoon-gutenberg。
詳しくは WordPress のデバッグをご覧ください。
(このメッセージはバージョン 6.9.1 で追加されました) in /virtual/gas2monkey/public_html/wp-includes/functions.php on line 6131

題記の通り。

●対策

.carousel-entry-card-thumb,
.related-entry-card-thumb,
.widget-entry-card-thumb,
.entry-card-thumb {
margin-top: 0;
}

●現象

→ で「ふわっと追加」を選択し、 をクリックしても、「ふわっと追加」の独自メニューを含む画面に切り替わらない。

スキン「SILK」の以下の対策について。

https://github.com/xserver-inc/cocoon/pull/292

●経緯

Ver 2.8.8.1 以前では、クラシックエディターとGutenbergエディターで、見出しのHTML構造が異なっていた。
Gutenberg エディターでは、ブロックのレンダリング時にH2 見出しへ番号を付与する処理が行われていた。

https://wp-cocoon.com/community/postid/87485/

この仕様により、エディター上の表示とフロントエンドでの表示が一致しない問題があり対策した。

●改善点について

現在（Ver 2.8.8.1 以降）でも、見出しの HTMLは以下のように＜span＞タグで囲まれた構造のままとなっているが、この構造は実際には使用されていない。

<h2 class="wp-block-heading"><span>H2</span></h2>

そのため、以下の処理は現状では不要と考える。

https://github.com/xserver-inc/cocoon/blob/2dea85c7e3be9c45c73cefa9fd9dafd05433dee5/skins/silk/functions.php#L203

https://github.com/xserver-inc/cocoon/blob/2dea85c7e3be9c45c73cefa9fd9dafd05433dee5/skins/silk/functions.php#L1076-L1081

/* 見出しカウント */
.article {
counter-reset: h2;
}

.article h2::before {
content: counter(h2, decimal) ". ";
counter-increment: h2;
}

こちら削除したら見出しの数字が出なくなりました。これは不具合なのかどうなのか良く分かりませんが、原因がわかりましたのでご連絡させていただきます。

個人的には意図しない表記のため、style.cssから当該部分を削除して使用しています。