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
index bed07189..d8682e01 100644
--- 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(
- '
- %3$s %4$s
- ',
+ '
+ %3$s |
+ %4$s |
+
',
$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(
- '',
+ '',
$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
index d5ebcb94..6a76427a 100644
--- 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;
}