トピックリスト間のハウス広告が中央揃えではない(左揃え)

要約

topic-list-between プレースメントでレンダリングされるハウス広告が、トピックリストの幅全体で中央揃えにならなくなりました。代わりに、左揃えで表示されます(最初のカラムの領域に限定されます)。これは、house-ad コンポーネントをタグなしにしたことによって引き起こされたリグレッションのようで、テーブルのセマンティクスを壊しています。


再現手順

  1. 管理者 → プラグイン → 広告 に移動します。
  2. ハウス広告 を作成します。
  3. プレースメントとして topic-list-between を有効にします。
  4. ホームページ(または標準のテーブルレイアウトを使用している任意のトピックリスト)にアクセスします。
  5. ハウス広告のアライメントを確認します。

期待される動作

ハウス広告は、以前のようにトピックリストの全幅にわたって中央揃えでレンダリングされるべきです。


実際の動作

ハウス広告は左揃えになり、行全体に広がるのではなく、テーブルの左側部分(およそ「トピックタイトル」カラムのスペース)のみを占めています。


技術的分析

これは、house-ad コンポーネントによって生成される無効なテーブルマークアップが原因のようです。

ファイル:
plugins/discourse-adplugin/assets/javascripts/discourse/components/house-ad.gjs

コンポーネントはタグなしです:

@tagName("")
export default class HouseAd extends AdComponent {

しかし、colspan 属性を持つ div をレンダリングします:

<div
  colspan={{this.colspanAttribute}}
  class={{concatClass "house-creative" this.adUnitClass}}
  ...attributes
>

なぜ壊れるのか

  • colspan<td> / <th> でのみ機能し、<div> では機能しません。
  • トピックリストのテーブルでは、これは結果的に <tr> の直下に <div> が配置されることになり、これは無効な HTML であり、ブラウザがそれを誤ってレイアウトする原因となります(通常は最初のカラム領域に折りたたまれます)。
  • colspanAttribute() ロジックは this.tagName === "td"(または同等)をチェックしますが、コンポーネントがタグなしであるため、"td" になることはなく、colspan は実質的に適用されません。

おそらくのリグレッションの発生源

これは、「タグなしコンポーネント」のリンティング強制/リファクタリング(コンポーネントをタグなしに変換した変更)によって導入されたように見えます。これは、特定のコネクタ/プレースメントで実際のテーブルセルとしてレンダリングされる必要があるコンポーネントを意図せず壊しました。


環境

  • Discourse version: latest (tests-passed)
  • Ad plugin: 内蔵 discourse-adplugin
  • テストされたブラウザ: Chrome + Firefox(ブラウザに依存しないように見える)

「いいね!」 1