前略、KKさん　わいひらさん

私のテストサイトでも、同様の症状になるようです。

画像ブロックでも配置の選択項目に「幅広」と「全幅」がありますが、私はこの２つの違いを理解していないです・・

該当ＵＲＬ： https://test-test.tank.jp/table-test/

同じソースコードで動作確認するために、上記のエディターのソースコードをテキストファイルに保存して添付ファイルとしてアップしていただいてよろしいでしょうか。

@yhira さん

以下のような記事がありました。

ブロックエディターを幅広・全幅に対応させる方法

https://gutenberg-docs.ham.works/2020/01/28/711/

WordPressテーマをGutenbergの「幅広」と「全幅」に対応させる方法

https://techmemo.biz/wordpress/align-wide-support/

@yhira さん

幅広と全幅のときは、load-styles.phpのCSSが適用されているようです。

わいひら様　リフィトリー様

ご確認いただきありがとうございます。
ソースコードをメモ帳に保存して添付させていただきました。
不足部分がありましたら教えてください。

蛇足
全幅・幅広の違いは、なんでしょうね。
使い分けたことはありませんでした。

気になったのでGoogle先生で検索してみました。
もしかしたら「全幅」はカラム等関係なく全ての要素を突破するイメージなのかもしれません。
でもそうすると私が今まで「全幅」として利用していた「１要素の中での横幅いっぱい」は、実は「幅広」なのかもしれないですね。
※ピンポイントで説明されてるサイトは見つからなかったので、複合的に見て想像しました。
　もしそうなら結果的に自分の想像と今回の結果がマッチしないことになりますが（汗）
　そこは本来の意味に合わせて頂いた方が良いですよね。

わいひら様

大変申し訳ありません、質問文に誤りがありました。

「幅広」配置をすると一番左に寄ってしまいます。

と記載させていただきましたが、本来は「全幅」の誤記でした。
「幅広」にすると一番左には寄りませんが、エディターと公開記事の見た目が異なっているという事象は同じです。

自分がいつも選択していたのは「全幅」の方で、「幅広」は使ったことがありません。
全幅と幅広の調べ物中なんか違和感があったので、もう一度自分の投稿を見直してみて気付きました。

一番間違えてはいけないところを間違えてしまい、大変申し訳ありませんでした。

わいひらさん 　KKさん

あまり詳しくは調べていませんが、「幅広」と「全幅」は、１カラムのテーマだと考えると、需要がある配置切り替えのような気がします。

Twenty Twenty OneのCSSは varで宣言？定義？しているのでちょっと解読しづらいですが、「幅広」は、いわゆる、メインカラム幅に相当し、「全幅」は、画面幅いっぱい、というようになっている気がします。

わいひらさん 　KKさん

Cocoonでサイドバーが表示されている状態だと、「幅広」と「全幅」は同じ表示になるような気がします。（メインカラム以上には広がらないので）

では、サイドバーを表示せず、１カラムにしたときはどうか？と言えば、Cocoonの場合はメインカラムは、１カラムの場合でもカラム幅を設定してあるので、結果的には、カラム幅から、はみ出す仕様にしない限りは、やはり「幅広」も「全幅」も同じ表示になるような気がします。（まだ、よく理解できていない部分もあるので間違っているところもあるかもしれません）

リフィトリー様

とても勉強になります。
ありがとうございます。

KKさん

本件は、実際の表示とエディター画面の表示が一致しないので修正してほしい、ということでしたのに、脱線していてすみません。

リフィトリー様

知見がある方のお話は例え脱線であっても本当に勉強になります。
私では、リフィトリー様と同じことを調べていても、理解に限界があります。
お話を伺えたおかげで以前よりも少し理解が深まりました。
※厳密には脱線ではないような気もします。

ただ、わいひら様の読む量が多くなってしまいますので、このトピックスで「違い」や「利用例」の疑問を広げるのは好ましくないのかもしれませんね。

私も自重します。
ありがとうございます。

ソースコードをメモ帳に保存して添付させていただきました。
不足部分がありましたら教えてください。

わかりづらくて申し訳ないです。
お手数ですがエディターページのソースコードではなく、添付画像部分のエディターのソースコードでお願いいたします。

手持ちの適当な環境を作って試したものでは修正してみました。
------------------------------------------------
https://github.com/yhira/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------

投稿者:: @leafytree

Cocoonでサイドバーが表示されている状態だと、「幅広」と「全幅」は同じ表示になるような気がします。（メインカラム以上には広がらないので）

 

では、サイドバーを表示せず、１カラムにしたときはどうか？と言えば、Cocoonの場合はメインカラムは、１カラムの場合でもカラム幅を設定してあるので、結果的には、カラム幅から、はみ出す仕様にしない限りは、やはり「幅広」も「全幅」も同じ表示になるような気がします。（まだ、よく理解できていない部分もあるので間違っているところもあるかもしれません）

書かれている通りで、現在Cocoonはカラム幅が指定してある仕様なのでその認識で合っています。
対応するには「ページタイプ」に「全幅」という機能が必要になるのですが、今のところそこまではやってません。

わいひら様

大変失礼いたしました。
再ＵＰしようとしたところ既にご修正いただいていて恐縮です。

ZIPのまま手動アプデを実施したところ「辿ったリンクは期限が切れています」と制限に引っかかってしまいました。
※さくらサーバーのスタンダードプラン

今回も以下ファイルのみ上書きさせていただきました。
　css/gutenberg-editor.css

エディター画面で全幅の表示が公開記事と同一になったことが確認できました。
お忙しいところありがとうございます。

@yhira さん

私もインストールしてみました。

関連性があるので、このまま続けてしまいます。

画像ブロックのときと同様に「左寄せ」と「右寄せ」の場合は、floatを用いているようなのですが、Twenty Twenty Oneだとtableの場合も左寄せの場合は右側に、右寄せの場合は左側にそれぞれマージンを設定して、回り込んだ文字との距離を保っているようです。

Twenty Twenty Oneの場合は、画面幅が420px以上のときは、（--global--spacing-horizontal）→25px、それ以下のときは2emとしているようです。

tableの上側のマージンについては、ちょっと私にはよくわからないです。

「幅広」と「全幅」につきましては、修正されていると思います。

@yhira さん

あまり詳しく突き詰めても、キリがないところもあるのですが、「表示のセル幅を固定」について、Twenty Twenty Oneでは、表の位置を何も指定しないときでも、エディター画面に反映されるようです。

表の位置を何も指定しない、という使われ方も多いかと思ったので、その場合も反映されるといいかな、と感じました。

わいひら様

一度解決済にさせて頂いたところですが、エディター画面と公開済画面が異なっている表がありました。
リフィトリー様の内容と被っていたら申し訳ありません。

①　デフォルト配置、左寄り配置、右寄り配置
　　これらの配置の表に「セル幅を固定」させても反映しない

＜次へ＞

＜続き＞

②　右寄り配置（セル幅固定なし）を２つ以上並べるとエディター内の表がくっつく（回り込む）

「表のセル幅を固定」という設定の意味が良く分からなくなってきました。
単純に「セル幅を均一に固定させる」という意味に捉えていましたが、「横幅100%にした上でセル幅を均一にする」という意味だったのでしょうか。

そして「右寄り配置」も、エディターと公開画面のどちらが正しいのか……表示を統一していただければと思います。

＜続き＞

必要か分かりませんが、コードエディターのソースも添付させていただきます。

お忙しい中、お手数おかけいたします。
よろしくお願いします。

kkさん

①につきましては、おそらく、私の書き込みと同じ内容かと推測しています。

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

②につきましては、テーマを一旦、Twenty Twenty Oneに変えてみると、WordPress.orgのやろうとしていることが、見えてくるかもしれません。

「左寄せ」「右寄せ」については、「画像」ブロック同様に、PC表示のときに、下にある段落ブロックの文字を画像や、tableの横へ回りこませる意図があるのではないかと推測します。

tableブロックの下に段落ブロックを設置して、適当に長めの文章を入力してみると、Twenty Twenty Oneでは、tableの横に文字が回り込むのではないかと思います。（おそらく左寄せ、右寄せを選択すると、テーブルの幅が狭くなり、横に文字のスペースができるのでは？）

最近のWordPressのデフォルトテーマは、１カラムのデザインになってきているので、PC表示では、画像やテーブルの横に文字を回りこませて、表現の幅を広げているのではないかと推測します。

スマホが普及する以前は、Webサイトといえば、パソコンで閲覧するもの、だったので、このCSSの「float」というプロパティで文字を画像の横に配置することが多かったようです。

それがまた、復活してきた、ということかもしれません。

ただ、Cocoonの場合は、コンテンツは親のコンテナの中にあり、コンテナの幅は、カラム幅として決められているので、「画像ブロック」以上に「テーブルブロック」では、「左寄せ」「右寄せ」を使う機会は少ないような気がします。

そもそも、「左寄せ」「右寄せ」が「float」プロパティを使っていて、投稿画面で下に追加した段落ブロックの文字が回りこむのだということが、周知されにくい、ということもあるのではないかと感じています。

GitHubのファイルを目につく部分は修正してみました。

リフィトリー様

ありがとうございます。
②につきまして、Twenty Twenty Oneで比較してみました。

今まで画像利用した回り込みをさせたことはありますが、テーブルで回り込ませたデザインは考えたことがなかったので、目から鱗でした。

学校の教科書のように、画像＋長い文章だけでなく、表＋長い文章も利用が可能そうですね。
論文系や図鑑系のサイト様に需要がありそうです。

ただ、Twenty Twenty Oneでもエディターと実際の公開済画面が一部異なっていました。
これは大本がそういう仕様だった、ということなんですね。

ユーザーからすると見たまま編集できるのが一番楽なので、ここは今後のWordpressに期待でしょうか。

幅固定については、表を「float解除＋横幅100%にして均一幅に固定する」という解釈ではなく「均一幅に固定する」だけの印象を持ちました。
この辺りも考えながらテーマ作りされてたら頭が爆発しそうですね。

幅固定の定義はわいひら様のお考えに委ねたいと思います。

画像ファイルが大きくて添付できなかったみたいなので、再度添付してみますね。

その間にわいひら様が修正なさっていましたね。
すいません、確認させていただきます。

わいひら様

以下３ファイルを上書きで試してみました。
過不足ないでしょうか。
　css/admin.css
　css/gutenberg-editor.css
　amp.css

①　デフォルト配置、左寄り配置、右寄り配置
　　これらの配置の表に「セル幅を固定」させても反映しない

　　⇒　反映することが確認できました。
　　　　ありがとうございます。

②　右寄り配置（セル幅固定なし）を２つ以上並べるとエディター内の表がくっつく（回り込む）

　　⇒　回り込みするのが正常ということで、確認しました。

②について、改めてご確認いただいてよろしいでしょうか。

「左寄り配置（セル幅固定なし）」を２つ以上並べた場合。
「右寄り配置（セル幅固定なし）」を２つ以上並べた場合。

エディター内では隙間が空いていますが、公開済記事には隙間がありませんでした。
もし私の上書きファイル見落としでしたら恐縮です。
教えていただければと思います。

ご確認よろしくお願いします。

@yhira さん

インストールしてみました。

tableの配置や「表のセル幅を固定」の表示については、とても良いような気がします。

あとはキャプションの位置でしょうか。

実際のサイトの表示では、「中央寄せ」のとき、キャプションがカラムの左によってしまっていてテーブルとズレてしまいます。

あとは、実際のWebサイトの表示では、キャプションは、テーブルの左端に寄るように統一されているようです。

ところが、エディター上では、キャプションは、「位置指定なし」ではテーブルの幅に関係なくカラム幅の中央に、それ以外はテーブルの幅の中央に配置されているようです。

あまり細かいところを突き詰めても、とも思いますが、エディターと実際の表示が異なると、フォーラムにお問い合わせが来そうな気もします。

ｋｋさん

私のテスト環境ですと、右寄せを２つ並べても、実際の表示でマージンがあるみたいです。

KKさん

「LOCAL」を使うと、簡単にテスト環境がパソコンに作れます。

テーマのインストールも自分のパソコンなので、アップロードしなくて済みます。

LOCAL
https://localwp.com/

私もちょっと前に、わいひらさんの記事を読んで、導入しました。

WordPressローカル環境ツール「Local by Flywheel」のインストール方法と使い方

https://nelog.jp/local-by-flywheel-install

ただ、インストールデータの容量は1.5GBもあるので、そこは注意が必要かもしれません。

リフィトリー様

リフィトリー様の実際の表示にはマージン設定がされているんですね。
では、私が手動で上書きした方に問題があった可能性が高いですね。

改めて、ＣＳＳフォルダをまるごとアップロードしてみましたが変わりませんでした……。
　※cocoon-master > css
他にも必要なファイルがあったのかもしれませんね。

う～ん、一度わいひら様のご回答をお待ちしたいと思います。

ローカル環境って結構簡単に作れてしまうものなんですね。
すごく魅力的なご提案ありがとうございます。
非情に興味がありますが、インストール後の使用容量も考えると、自分のＰＣデータ整理の方が先でした。
壁が高い。

時期を見て利用させていただきます。

今更ですが環境情報も念のため貼らせていただきます。
----------------------------------------------
サイト名：test
サイトURL： https://test-test.tank.jp
ホームURL： https://test-test.tank.jp
コンテンツ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
WordPressバージョン：5.8
PHPバージョン：7.4.21
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36 Edg/92.0.902.67
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：ja,en;q=0.9,en-GB;q=0.8,en-US;q=0.7
----------------------------------------------
テーマ名：Cocoon
バージョン：2.3.5.1
カテゴリ数：1
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：845バイト
functions.phpサイズ：203バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
WEBフォントLazy Load：0
----------------------------------------------
利用中のプラグイン：
----------------------------------------------

ｋｋさん

私のテストサイトの環境は

パソコンは10年も使っている老機です。

以下３ファイルを上書きで試してみました。
過不足ないでしょうか。
　css/admin.css
　css/gutenberg-editor.css
　amp.css

必要な今アップデートはこちらに出てくるCSSファイルです。
https://github.com/yhira/cocoon/commit/361141a06f5e26adfeae6a8a898033653e7813bf
https://github.com/yhira/cocoon/commit/496091efcfb8562c1f6222c0545ffecdf73b1727
https://github.com/yhira/cocoon/commit/114191f034140c11686255c3ef420189d24e5881

もしそれでも不具合が出る場合は、該当部分だけブロックエディターののソースコードをいただいてよろしいでしょうか。

テーブルキャプションの不具合修正版をGitHubにアップしておきました。
もし再度不具合がありましたら、該当部分のソースコードもいただけると幸いです。

わいひら様

こちらの見落としてお手数をおかけして申し訳ありません。
以下ファイルを追加で上書きしてみました。
　scss/basic.scss
　scss/carousel.scss
　scss/gutenberg-editor.scss
　style.css

エディター画面の表の見え方と公開済記事の表の見え方が、同一になっていることが確認できました。
本当にありがとうございます。

キャプションも確認すべく、以下を改めて上書きしました。
　css/admin.css
　css/gutenberg-editor.css
　scss/content.scss
　scss/gutenberg-editor.scss
　amp.css
　style.css

リフィトリー様が仰っていた部分のキャプションについてはエディターと投稿済画面が同一になっていることが確認できました。
　①デフォルト配置の表　エディター画面：左配置　　公開済：左配置
　②中央配置の表　　　　エディター画面：中央配置　公開済：中央配置

この他の部分ですと私には思いつかなかったので、リフィトリー様のご確認を待ちたいと思います。

@yhira さん

インストールしてみました。

完璧に修正されているように思います。

後出しで申し訳ありません。実際のサイトの表示で、キャプションがtableと、くっつきすぎているようなので、上側に少しマージンを設けたらどうかと思いました。（エディター上の表示は、まあ、位置さえ合っていれば問題ないかと）

.wp-block-table figcaption {
    margin-top: .5em;
}

KKさん

このようなトピックは、おそらく、テーマ作者様にとって、とても助かるものだと推測します。

テーマの機能の維持だけでもかなりのメンテナンス作業が要るはずなので、WordPressのアップデートの度に仕様が少しずつ変わるブロックエディターの全ての表示のチェックまでは、なかなか追いつかないのではないかと・・

リフィトリー様

そのように仰っていただけると幸いです。
わいひら様にはいつも便利に使いやすく提供していただいているので、本当にありがたいです。
フォーラムでは他の方の書き込みや誘導先のリンク等で、いつも勉強させていただいております。

わいひら様

今回もまた迅速にご対応いただきましてありがとうございます。
返信が追い付かず日跨ぎになってしまい申し訳ありません。

トピックスを閉じさせていただきます。

今後ともよろしくお願いします。

リフィトリーさん、KKさん、ご確認ありがとうございます！
ブロックエディターが追加されて、とても1人では確認しきれないのでご連絡いただけるとほんとに助かります。

今回もまた迅速にご対応いただきましてありがとうございます。
返信が追い付かず日跨ぎになってしまい申し訳ありません。

こちらこそ、夜の返信なので、何日もかかってしまって申しわけないです。
いろいろご確認いただきありがとうございます！