Use a table for site metadata

WordPress · Jan 5, 2024 · d86c8e2 · d86c8e2
1 parent f7bb6aa
commit d86c8e2
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 41 deletions.
diff --git a/source/wp-content/themes/wporg-showcase-2022/src/site-meta-list/index.php b/source/wp-content/themes/wporg-showcase-2022/src/site-meta-list/index.php
@@ -100,9 +100,10 @@ function( $field ) use ( $attributes ) {
 
 		if ( ! empty( $value ) ) {
 			$list_items[] = sprintf(
-				'<li class="is-meta-%1$s">
-					<strong%2$s>%3$s</strong> %4$s
-				</li>',
+				'<tr class="is-meta-%1$s">
+					<th%2$s>%3$s</th>
+					<td>%4$s</td>
+				</tr>',
 				$field['key'],
 				$show_label ? '' : ' class="screen-reader-text"',
 				$field['label'],
@@ -114,7 +115,7 @@ function( $field ) use ( $attributes ) {
 	$class = $show_label ? '' : 'has-hidden-label';
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $class ) );
 	return sprintf(
-		'<div %s><ul>%s</ul></div>',
+		'<div %s><table>%s</table></div>',
 		$wrapper_attributes,
 		join( '', $list_items )
 	);

diff --git a/source/wp-content/themes/wporg-showcase-2022/src/site-meta-list/style.scss b/source/wp-content/themes/wporg-showcase-2022/src/site-meta-list/style.scss
@@ -1,61 +1,57 @@
 .wp-block-wporg-site-meta-list {
 	margin-block-start: 0;
 
-	ul {
+	table {
 		margin: 0;
 		padding: 0;
-		list-style-type: none;
-		// Needed to pass border color down to `li`.
+		width: 100%;
+		// Needed to pass border color down to `tr`.
 		border-color: inherit;
+		border-spacing: 0;
 	}
 
-	li {
-		position: relative;
-		padding-top: var(--wp--preset--spacing--10);
-		padding-right: var(--wp--preset--spacing--20);
-		padding-bottom: var(--wp--preset--spacing--10);
-		padding-left: calc(var(--wp--custom--wporg-site-meta-list--label--width) + var(--wp--preset--spacing--10));
-		text-align: end;
-
+	tr {
 		&:not(:last-of-type) {
-			border-bottom: 1px solid;
-			border-color: inherit;
+			th,
+			td {
+				border-bottom: 1px solid;
+				border-color: inherit;
+			}
+		}
+
+		th:not(.screen-reader-text),
+		td {
+			padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
 		}
 
-		strong {
-			position: absolute;
-			left: var(--wp--preset--spacing--20);
-			top: var(--wp--preset--spacing--10);
-			max-width: calc(var(--wp--custom--wporg-site-meta-list--label--width));
+		th {
 			font-weight: 400;
 			text-align: start;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
 		}
 
-		[dir="rtl"] & {
-			padding-left: var(--wp--preset--spacing--20);
-			padding-right: calc(var(--wp--custom--wporg-site-meta-list--label--width) + var(--wp--preset--spacing--10));
-
-			strong {
-				left: unset;
-				right: var(--wp--preset--spacing--20);
-			}
+		td {
+			text-align: end;
 		}
 
 		@media (max-width: 380px) {
-			text-align: start;
-			padding-left: var(--wp--preset--spacing--20);
+			display: block;
 
-			strong {
-				position: static;
+			th,
+			td {
 				display: block;
-				max-width: unset;
 			}
 
-			[dir="rtl"] & {
-				padding-right: var(--wp--preset--spacing--20);
+			th:not(.screen-reader-text) {
+				padding-bottom: 0;
+			}
+
+			&:not(:last-of-type) th {
+				border-bottom: none;
+			}
+
+			td {
+				text-align: start;
+				padding-top: 0;
 			}
 		}
 	}
@@ -71,7 +67,7 @@
 	}
 
 	&.has-hidden-label {
-		li {
+		td {
 			padding: clamp(10px, calc(1.7vw), 20px) clamp(20px, calc(1.7vw + 10px), 30px);
 			text-align: start;
 		}