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 0717296f..0ee7af0f 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 @@ -99,19 +99,14 @@ function( $field ) use ( $attributes ) { $value = get_value( $field['type'], $field['key'], $block->context['postId'] ); if ( ! empty( $value ) ) { - $value = wp_kses_post( $value ); - $list_items[] = sprintf( '
  • - %2$s: %3$s - + %3$s: %4$s
  • ', $field['key'], + $show_label ? '' : ' class="screen-reader-text"', $field['label'], - $value, - $show_label - ? sprintf( '%1$s%2$s', $field['label'], $value ) - : $value, + wp_kses_post( $value ) ); } } 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 8788e4d6..d5ebcb94 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 @@ -10,37 +10,52 @@ } li { - padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20); - border-bottom: 1px solid; - border-color: inherit; + 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; + + &:not(:last-of-type) { + border-bottom: 1px solid; + border-color: inherit; + } - &:last-of-type { - border-bottom: none; + 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)); + font-weight: 400; + text-align: start; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } - span[aria-hidden="true"] { - display: flex; - gap: var(--wp--preset--spacing--10); + [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 { - flex-shrink: 0; - font-weight: 400; + left: unset; + right: var(--wp--preset--spacing--20); } + } - span { - margin-inline-start: auto; - text-align: right; - color: var(--wp--preset--color--charcoal-3); - } + @media (max-width: 380px) { + text-align: start; + padding-left: var(--wp--preset--spacing--20); - @media (max-width: 380px) { - flex-direction: column; - gap: 0; + strong { + position: static; + display: block; + max-width: unset; + } - span { - margin-inline-start: unset; - text-align: initial; - } + [dir="rtl"] & { + padding-right: var(--wp--preset--spacing--20); } } } @@ -55,15 +70,10 @@ } } - &.has-text-color { - li span { - color: inherit; - } - } - &.has-hidden-label { li { padding: clamp(10px, calc(1.7vw), 20px) clamp(20px, calc(1.7vw + 10px), 30px); + text-align: start; } } } diff --git a/source/wp-content/themes/wporg-showcase-2022/theme.json b/source/wp-content/themes/wporg-showcase-2022/theme.json index 478f8d8d..d99ae9ce 100644 --- a/source/wp-content/themes/wporg-showcase-2022/theme.json +++ b/source/wp-content/themes/wporg-showcase-2022/theme.json @@ -9,6 +9,11 @@ "width": "10px", "radius": "20px" } + }, + "wporg-site-meta-list": { + "label": { + "width": "100px" + } } } },