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( - '
    ', + '
    %s
    ', $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; }