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 e4955978..0717296f 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,12 +99,19 @@ 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( - '
  • %3$s %4$s
  • ', + '
  • + %2$s: %3$s + +
  • ', $field['key'], - $show_label ? '' : ' class="screen-reader-text"', $field['label'], - wp_kses_post( $value ) + $value, + $show_label + ? sprintf( '%1$s%2$s', $field['label'], $value ) + : $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 2a405523..8788e4d6 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,8 +10,6 @@ } li { - display: flex; - gap: var(--wp--preset--spacing--10); padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20); border-bottom: 1px solid; border-color: inherit; @@ -20,24 +18,29 @@ border-bottom: none; } - strong { - flex-shrink: 0; - font-weight: 400; - } - - span { - margin-inline-start: auto; - text-align: right; - color: var(--wp--preset--color--charcoal-3); - } + span[aria-hidden="true"] { + display: flex; + gap: var(--wp--preset--spacing--10); - @media (max-width: 380px) { - flex-direction: column; - gap: 0; + strong { + flex-shrink: 0; + font-weight: 400; + } span { - margin-inline-start: unset; - text-align: initial; + margin-inline-start: auto; + text-align: right; + color: var(--wp--preset--color--charcoal-3); + } + + @media (max-width: 380px) { + flex-direction: column; + gap: 0; + + span { + margin-inline-start: unset; + text-align: initial; + } } } } @@ -61,11 +64,6 @@ &.has-hidden-label { li { padding: clamp(10px, calc(1.7vw), 20px) clamp(20px, calc(1.7vw + 10px), 30px); - - span { - margin-inline-start: unset; - text-align: left; - } } } }