From a3629dae306db70abb7ce9182946215066f25615 Mon Sep 17 00:00:00 2001
From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com>
Date: Fri, 5 Jan 2024 15:48:24 +1300
Subject: [PATCH 1/4] Use a table for site metadata
---
.../src/site-meta-list/index.php | 9 +--
.../src/site-meta-list/style.scss | 70 +++++++++----------
2 files changed, 38 insertions(+), 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
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..01aff4a2 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 `td` and `th`.
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;
}
From cb883e1afa4fe8f69eda2ab4133ab75e9b4f738b Mon Sep 17 00:00:00 2001
From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com>
Date: Fri, 5 Jan 2024 16:21:49 +1300
Subject: [PATCH 2/4] Fix border color inheritance in Firefox
---
.../wporg-showcase-2022/src/site-meta-list/style.scss | 9 +++++++--
1 file changed, 7 insertions(+), 2 deletions(-)
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 01aff4a2..a5184139 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,12 +1,17 @@
.wp-block-wporg-site-meta-list {
margin-block-start: 0;
+ table,
+ tbody,
+ tr {
+ // Needed to pass border color down to `td` and `th`.
+ border-color: inherit;
+ }
+
table {
margin: 0;
padding: 0;
width: 100%;
- // Needed to pass border color down to `td` and `th`.
- border-color: inherit;
border-spacing: 0;
}
From 6acab131eea060c5f70eaa542f08c6941e2b096e Mon Sep 17 00:00:00 2001
From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com>
Date: Mon, 8 Jan 2024 13:41:56 +1300
Subject: [PATCH 3/4] Move border to tr
---
.../src/site-meta-list/style.scss | 17 +++++------------
1 file changed, 5 insertions(+), 12 deletions(-)
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 a5184139..5b4a1d69 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
@@ -2,9 +2,8 @@
margin-block-start: 0;
table,
- tbody,
- tr {
- // Needed to pass border color down to `td` and `th`.
+ tbody {
+ // Needed to pass border color down to `tr`.
border-color: inherit;
}
@@ -13,15 +12,13 @@
padding: 0;
width: 100%;
border-spacing: 0;
+ border-collapse: collapse;
}
tr {
&:not(:last-of-type) {
- th,
- td {
- border-bottom: 1px solid;
- border-color: inherit;
- }
+ border-bottom: 1px solid;
+ border-color: inherit;
}
th:not(.screen-reader-text),
@@ -50,10 +47,6 @@
padding-bottom: 0;
}
- &:not(:last-of-type) th {
- border-bottom: none;
- }
-
td {
text-align: start;
padding-top: 0;
From a57d6815a9ad0406400a908f7a1d934daa900f8c Mon Sep 17 00:00:00 2001
From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com>
Date: Mon, 8 Jan 2024 13:44:56 +1300
Subject: [PATCH 4/4] Adjust cell padding to improve ipad landscape layout
---
.../src/site-meta-list/style.scss | 15 +++++++++++++--
.../themes/wporg-showcase-2022/theme.json | 5 -----
2 files changed, 13 insertions(+), 7 deletions(-)
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 5b4a1d69..515a198d 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
@@ -16,6 +16,8 @@
}
tr {
+ vertical-align: baseline;
+
&:not(:last-of-type) {
border-bottom: 1px solid;
border-color: inherit;
@@ -23,16 +25,23 @@
th:not(.screen-reader-text),
td {
- padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
+ padding-top: var(--wp--preset--spacing--10);
+ padding-bottom: var(--wp--preset--spacing--10);
}
- th {
+ th:not(.screen-reader-text) {
font-weight: 400;
text-align: start;
+ min-width: 100px;
+ padding-inline-start: var(--wp--preset--spacing--20);
+ // Keep a letter space between the label and the value.
+ // Required on smaller screens where they're more likely to collide.
+ padding-inline-end: 0.5em;
}
td {
text-align: end;
+ padding-inline-end: var(--wp--preset--spacing--20);
}
@media (max-width: 380px) {
@@ -45,11 +54,13 @@
th:not(.screen-reader-text) {
padding-bottom: 0;
+ padding-inline-end: var(--wp--preset--spacing--20);
}
td {
text-align: start;
padding-top: 0;
+ padding-inline-start: var(--wp--preset--spacing--20);
}
}
}
diff --git a/source/wp-content/themes/wporg-showcase-2022/theme.json b/source/wp-content/themes/wporg-showcase-2022/theme.json
index d99ae9ce..478f8d8d 100644
--- a/source/wp-content/themes/wporg-showcase-2022/theme.json
+++ b/source/wp-content/themes/wporg-showcase-2022/theme.json
@@ -9,11 +9,6 @@
"width": "10px",
"radius": "20px"
}
- },
- "wporg-site-meta-list": {
- "label": {
- "width": "100px"
- }
}
}
},