Article layout overhaul

com.woltlab.wcf/templates/articleContentHeaderTitle.tpl

@@ -0,0 +1,72 @@
+<div class="contentHeaderTitle">
+	<h1 class="contentTitle" itemprop="name headline">{$articleContent->title}</h1>
+	<ul class="inlineList contentHeaderMetaData articleMetaData">
+		<li itemprop="author" itemscope itemtype="http://schema.org/Person">
+			{icon name='user'}
+			{if $article->userID}
+				<a href="{$article->getUserProfile()->getLink()}" class="userLink" data-object-id="{$article->userID}" itemprop="url">
+					<span itemprop="name">{unsafe:$article->getUserProfile()->getFormattedUsername()}</span>
+				</a>
+			{else}
+				<span itemprop="name">{$article->username}</span>
+			{/if}
+		</li>
+
+		<li>
+			{icon name='clock'}
+			<a href="{$article->getLink()}">{time time=$article->time}</a>
+			<meta itemprop="datePublished" content="{$article->time|date:'c'}">
+		</li>
+
+		{if $article->hasLabels()}
+			<li>
+				{icon name='tags'}
+				<ul class="labelList">
+					{foreach from=$article->getLabels() item=label}
+						<li>{unsafe:$label->render()}</li>
+					{/foreach}
+				</ul>
+			</li>
+		{/if}
+
+		<li>
+			{icon name='eye'}
+			{lang}wcf.article.articleViews{/lang}
+		</li>
+
+		{if $article->getDiscussionProvider()->getDiscussionCountPhrase()}
+			<li itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
+				{icon name='comments'}
+				{if $article->getDiscussionProvider()->getDiscussionLink()}<a href="{$article->getDiscussionProvider()->getDiscussionLink()}">{else}<span>{/if}
+				{$article->getDiscussionProvider()->getDiscussionCountPhrase()}
+				{if $article->getDiscussionProvider()->getDiscussionLink()}</a>{else}</span>{/if}
+				<meta itemprop="interactionType" content="http://schema.org/CommentAction">
+				<meta itemprop="userInteractionCount" content="{$article->getDiscussionProvider()->getDiscussionCount()}">
+			</li>
+		{/if}
+
+		{hascontent}
+			<li>
+				{icon name='flag'}
+				{content}
+					{if $article->isDeleted}
+						<span class="badge red">{lang}wcf.message.status.deleted{/lang}</span>
+					{/if}
+					{if !$article->isPublished()}
+						<span class="badge green">{lang}wcf.message.status.disabled{/lang}</span>
+					{/if}
+					{event name='contentHeaderMetaDataFlag'}
+				{/content}
+			</li>
+		{/hascontent}
+
+		{event name='contentHeaderMetaData'}
+	</ul>
+
+	<div itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+		<meta itemprop="name" content="{PAGE_TITLE|phrase}">
+		<div itemprop="logo" itemscope itemtype="http://schema.org/ImageObject">
+			<meta itemprop="url" content="{$__wcf->getStyleHandler()->getStyle()->getPageLogo()}">
+		</div>
+	</div>
+</div>

com.woltlab.wcf/templates/boxArticleList.tpl

@@ -39,7 +39,7 @@
 			</li>
 		{/foreach}
 	</ul>
-{elseif $boxPosition == 'footerBoxes'}
+{else}
 	<ul class="articleList">
 		{foreach from=$boxArticleList item=boxArticle}
 			<li>
@@ -69,6 +69,4 @@
 			</li>
 		{/foreach}
 	</ul>
-{else}
-	{include file='articleListItems' objects=$boxArticleList disableAds=true}
-{/if}
+{if}

com.woltlab.wcf/templates/entryAttachments.tpl

@@ -0,0 +1,89 @@
+{if $attachmentList && $attachmentList->getGroupedObjects($objectID)|count}
+	{hascontent}
+		<section class="entry__attachments__thumbnails">
+			<h2 class="entry__attachments__title">{lang}wcf.attachment.images{/lang}</h2>
+
+			<ul class="inlineList">
+				{content}
+					{foreach from=$attachmentList->getGroupedObjects($objectID) item=attachment}
+						{if $attachment->showAsImage() && !$attachment->isEmbedded()}
+							<li class="attachmentThumbnail" data-attachment-id="{$attachment->attachmentID}">
+								<a href="{$attachment->getLink()}"{if $attachment->canDownload()} data-fancybox="message-{$attachmentList->getObjectTypeName()}-{$objectID}" data-caption="{$attachment->filename}" aria-title="{lang}wcf.attachment.image.title{/lang}"{/if}>
+									<div class="attachmentThumbnailContainer">
+										<span class="attachmentThumbnailImage">
+											{if $attachment->hasThumbnail()}
+												<img
+													src="{$attachment->getThumbnailLink('thumbnail')}"
+													alt=""
+													{if $attachment->thumbnailWidth >= ATTACHMENT_THUMBNAIL_WIDTH && $attachment->thumbnailHeight >= ATTACHMENT_THUMBNAIL_HEIGHT}
+														class="attachmentThumbnailImageScalable"
+													{/if}
+													width="{$attachment->thumbnailWidth}"
+													height="{$attachment->thumbnailHeight}"
+													loading="lazy"
+												>
+											{else}
+												<img
+													src="{$attachment->getLink()}"
+													alt=""
+													{if $attachment->width >= ATTACHMENT_THUMBNAIL_WIDTH && $attachment->height >= ATTACHMENT_THUMBNAIL_HEIGHT}
+														class="attachmentThumbnailImageScalable"
+													{/if}
+													width="{$attachment->width}"
+													height="{$attachment->height}"
+													loading="lazy"
+												>
+											{/if}
+										</span>
+
+										<span class="attachmentThumbnailData">
+											<span class="attachmentFilename">{$attachment->filename}</span>
+										</span>
+									</div>
+
+									<ul class="attachmentMetaData inlineList">
+										<li>
+											{icon name='file-lines'}
+											{$attachment->filesize|filesize}
+										</li>
+										<li>
+											{icon name='up-right-and-down-left-from-center'}
+											{#$attachment->width} × {#$attachment->height}
+										</li>
+									</ul>
+								</a>
+							</li>
+						{/if}
+					{/foreach}
+				{/content}
+			</ul>
+		</section>
+	{/hascontent}
+
+	{hascontent}
+		<section class="entry__attachments__files">
+			<h2 class="entry__attachments__title">{lang}wcf.attachment.files{/lang}</h2>
+
+			<div class="messageAttachmentList">
+				{content}
+					{foreach from=$attachmentList->getGroupedObjects($objectID) item=attachment}
+						{if $attachment->showAsFile() && !$attachment->isEmbedded()}
+							<a href="{$attachment->getLink()}" class="messageAttachment jsTooltip" title="{lang}wcf.attachment.file.title{/lang}">
+								<span class="messageAttachmentIcon">
+									<span class="messageAttachmentIconDefault">
+										{icon size=32 name=$attachment->getIconName()}
+									</span>
+									<span class="messageAttachmentIconDownload">
+										{icon size=32 name='download'}
+									</span>
+								</span>
+								<span class="messageAttachmentFilename">{$attachment->filename}</span>
+								<span class="messageAttachmentMeta">{lang}wcf.attachment.file.info{/lang}</span>
+							</a>
+						{/if}
+					{/foreach}
+				{/content}
+			</div>
+		</section>
+	{/hascontent}
+{/if}

com.woltlab.wcf/templates/entryTags.tpl

@@ -0,0 +1,14 @@
+{if !$tags|empty}
+	<section class="entry_tags" aria-label="{lang}wcf.tagging.tags{/lang}">
+		<ul class="tagList">
+			{foreach from=$tags item=tag}
+				<li>
+					<a href="{link controller='Tagged' object=$tag}objectType={$objectType}{/link}" class="tag">
+						{icon name='tag'}
+						{$tag->name}
+					</a>
+				</li>
+			{/foreach}
+		</ul>
+	</section>
+{/if}

com.woltlab.wcf/templates/shared_listView.tpl

@@ -1,5 +1,5 @@
 <div class="listView">
-	{if $view->isSortable() || $view->isFilterable()}
+	{if $view->isSortable() || $view->isFilterable() || $view->hasBulkInteractions()}
 		<div class="listView__header">
 			{if $view->isFilterable()}
 				<div class="listView__filters" id="{$view->getID()}_filters">

com.woltlab.wcf/templates/shared_standaloneInteractionButton.tpl

@@ -21,7 +21,8 @@
 			document.getElementById('{unsafe:$containerID|encodeJS}'),
 			'{unsafe:$providerClassName|encodeJS}',
 			'{unsafe:$objectID|encodeJS}',
-			'{unsafe:$redirectUrl|encodeJS}'
+			'{unsafe:$redirectUrl|encodeJS}',
+			'{unsafe:$reloadHeaderEndpoint|encodeJS}'
 		);
 	});
 </script>

ts/WoltLabSuite/Core/Bootstrap.ts

@@ -65,7 +65,9 @@ function initA11y() {
   document
     .querySelectorAll("article:not([aria-label]):not([aria-labelledby]):not([role])")
     .forEach((element: HTMLElement) => {
-      element.setAttribute("role", "presentation");
+      if (!element.querySelector("h1, h2, h3")) {
+        element.setAttribute("role", "presentation");
+      }
     });
 }
 

ts/WoltLabSuite/Core/Component/Interaction/StandaloneButton.ts

@@ -7,20 +7,33 @@
  * @since 6.2
  */
 
+import { getObject } from "WoltLabSuite/Core/Api/GetObject";
 import { getContextMenuOptions } from "WoltLabSuite/Core/Api/Interactions/GetContextMenuOptions";
 import UiDropdownSimple from "WoltLabSuite/Core/Ui/Dropdown/Simple";
 
+interface HeaderContent {
+  template: string;
+}
+
 export class StandaloneButton {
   #container: HTMLElement;
   #providerClassName: string;
   #objectId: string | number;
   #redirectUrl: string;
+  #reloadHeaderEndpoint: string;
 
-  constructor(container: HTMLElement, providerClassName: string, objectId: string | number, redirectUrl: string) {
+  constructor(
+    container: HTMLElement,
+    providerClassName: string,
+    objectId: string | number,
+    redirectUrl: string,
+    reloadHeaderEndpoint: string,
+  ) {
     this.#container = container;
     this.#providerClassName = providerClassName;
     this.#objectId = objectId;
     this.#redirectUrl = redirectUrl;
+    this.#reloadHeaderEndpoint = reloadHeaderEndpoint;
 
     this.#initInteractions();
     this.#initEventListeners();
@@ -39,6 +52,24 @@ export class StandaloneButton {
     this.#initInteractions();
   }
 
+  async #refreshHeader(): Promise<void> {
+    if (!this.#reloadHeaderEndpoint) {
+      return;
+    }
+
+    const header = document.querySelector(".contentHeaderTitle");
+    if (!header) {
+      return;
+    }
+
+    const result = await getObject<HeaderContent>(`${window.WSC_RPC_API_URL}${this.#reloadHeaderEndpoint}`);
+    if (!result.ok) {
+      return;
+    }
+
+    header.outerHTML = result.value.template;
+  }
+
   #getDropdownMenu(): HTMLElement | undefined {
     const button = this.#container.querySelector<HTMLButtonElement>(".dropdownToggle");
     if (!button) {
@@ -71,10 +102,12 @@ export class StandaloneButton {
   #initEventListeners(): void {
     this.#container.addEventListener("interaction:invalidate", () => {
       void this.#refreshContextMenu();
+      void this.#refreshHeader();
     });
 
     this.#container.addEventListener("interaction:invalidate-all", () => {
       void this.#refreshContextMenu();
+      void this.#refreshHeader();
     });
 
     this.#container.addEventListener("interaction:remove", () => {

wcfsetup/install/files/lib/bootstrap/com.woltlab.wcf.php

@@ -176,6 +176,7 @@ static function (\wcf\event\endpoint\ControllerCollecting $event) {
             $event->register(new \wcf\system\endpoint\controller\core\articles\RestoreArticle());
             $event->register(new \wcf\system\endpoint\controller\core\articles\PublishArticle());
             $event->register(new \wcf\system\endpoint\controller\core\articles\UnpublishArticle());
+            $event->register(new \wcf\system\endpoint\controller\core\articles\contents\GetArticleContentHeaderTitle());
             $event->register(new \wcf\system\endpoint\controller\core\attachments\DeleteAttachment());
             $event->register(new \wcf\system\endpoint\controller\core\cronjobs\EnableCronjob());
             $event->register(new \wcf\system\endpoint\controller\core\cronjobs\DisableCronjob());