Skip to content

Commit 3f7e7e0

Browse files
authored
Single Site: Update site meta list (#144)
* Site Meta block: Update list of meta and display to match design * Update look of site meta block
1 parent 7146e7c commit 3f7e7e0

File tree

3 files changed

+89
-117
lines changed

3 files changed

+89
-117
lines changed

source/wp-content/themes/wporg-showcase-2022/patterns/page-single.php

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@
99

1010
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space"}}},"layout":{"type":"constrained"}} -->
1111
<div class="wp-block-group alignfull" style="padding-right:var(--wp--preset--spacing--edge-space);padding-left:var(--wp--preset--spacing--edge-space)">
12-
<!-- wp:columns {"align":"wide"} -->
12+
<!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"left":"var:preset|spacing|80"}}}} -->
1313
<div class="wp-block-columns alignwide">
14-
<!-- wp:column {"width":"66.66%"} -->
15-
<div class="wp-block-column" style="flex-basis:66.66%">
14+
<!-- wp:column {"width":"70%","layout":{"type":"constrained","justifyContent":"left"}} -->
15+
<div class="wp-block-column" style="flex-basis:70%">
1616
<!-- wp:post-title {"level":1,"style":{"spacing":{"margin":{"bottom":"0"}}},"fontSize":"heading-2"} /-->
1717

1818
<!-- wp:paragraph {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|20"},"padding":{"bottom":"var:preset|spacing|10"}}},"className":"external-link"} -->
@@ -23,17 +23,21 @@
2323
</div>
2424
<!-- /wp:column -->
2525

26-
<!-- wp:column {"width":"33.33%"} -->
27-
<div class="wp-block-column" style="flex-basis:33.33%">
28-
<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","right":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"var:preset|spacing|20"}},"border":{"radius":"2px"}},"backgroundColor":"blueberry-4"} -->
29-
<div class="wp-block-group has-blueberry-4-background-color has-background" style="border-radius:2px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)">
30-
<!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"normal","fontFamily":"inter"} -->
31-
<h2 class="has-inter-font-family has-normal-font-size" style="font-style:normal;font-weight:600"><?php esc_attr_e( 'More about this site', 'wporg' ); ?></h2>
26+
<!-- wp:column {"width":"30%"} -->
27+
<div class="wp-block-column" style="flex-basis:30%">
28+
<!-- wp:group {"style":{"border":{"radius":"2px","style":"solid","width":"1px"}},"borderColor":"light-grey-1"} -->
29+
<div class="wp-block-group has-border-color has-light-grey-1-border-color" style="border-style:solid;border-width:1px;border-radius:2px">
30+
<!-- wp:heading {"className":"screen-reader-text"} -->
31+
<h2 class="wp-block-heading screen-reader-text"><?php esc_attr_e( 'More about this site', 'wporg' ); ?></h2>
3232
<!-- /wp:heading -->
3333

3434
<!-- wp:wporg/site-meta-list /-->
3535
</div>
3636
<!-- /wp:group -->
37+
38+
<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}}}} -->
39+
<p style="margin-top:var(--wp--preset--spacing--30)"><a href="<?php echo esc_url( home_url( '/tags/' ) ); ?>"><?php _e( 'View all tags', 'wporg' ); ?></a></p>
40+
<!-- /wp:paragraph -->
3741
</div>
3842
<!-- /wp:column -->
3943
</div>

source/wp-content/themes/wporg-showcase-2022/src/site-meta-list/index.php

Lines changed: 52 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,22 @@
1010

1111
add_action( 'init', __NAMESPACE__ . '\init' );
1212

13+
/**
14+
* Registers the block using the metadata loaded from the `block.json` file.
15+
* Behind the scenes, it registers also all assets so they can be enqueued
16+
* through the block editor in the corresponding context.
17+
*
18+
* @see https://developer.wordpress.org/reference/functions/register_block_type/
19+
*/
20+
function init() {
21+
register_block_type(
22+
dirname( dirname( __DIR__ ) ) . '/build/site-meta-list',
23+
array(
24+
'render_callback' => __NAMESPACE__ . '\render',
25+
)
26+
);
27+
}
28+
1329
/**
1430
* Render the block content.
1531
*
@@ -29,114 +45,74 @@ function render( $attributes, $content, $block ) {
2945
$meta_fields = array(
3046
array(
3147
'label' => __( 'Author', 'wporg' ),
48+
'type' => 'meta',
3249
'key' => 'author',
3350
),
3451
array(
3552
'label' => __( 'Country', 'wporg' ),
53+
'type' => 'meta',
3654
'key' => 'country',
3755
),
3856
array(
39-
'label' => __( 'Theme', 'wporg' ),
40-
'key' => 'theme',
57+
'label' => __( 'Category', 'wporg' ),
58+
'type' => 'taxonomy',
59+
'key' => 'category',
60+
),
61+
array(
62+
'label' => __( 'Flavor', 'wporg' ),
63+
'type' => 'taxonomy',
64+
'key' => 'flavor',
4165
),
4266
array(
43-
'label' => __( 'Launched on', 'wporg' ),
44-
'key' => 'date_launched',
67+
'label' => __( 'Published', 'wporg' ),
68+
'type' => 'other',
69+
'key' => 'published',
70+
),
71+
array(
72+
'label' => __( 'Site tags', 'wporg' ),
73+
'type' => 'taxonomy',
74+
'key' => 'post_tag',
4575
),
4676
);
4777

4878
foreach ( $meta_fields as $field ) {
49-
$value = get_custom_field( $field['key'], $block->context['postId'] );
79+
$value = get_value( $field['type'], $field['key'], $block->context['postId'] );
5080

5181
if ( ! empty( $value ) ) {
52-
$list_items[] = '<dt>' . $field['label'] . '</dt><dd>' . esc_html( $value ) . '</dd>';
82+
$list_items[] = '<li><strong>' . $field['label'] . '</strong> <span>' . wp_kses_post( $value ) . '</span></li>';
5383
}
5484
}
5585

56-
$terms = get_associated_terms( $block->context['postId'] );
57-
58-
if ( ! empty( $terms ) ) {
59-
$list_items[] = '<dt>' . __( 'Archived In', 'wporg' ) . "</dt><dd>$terms</dd>";
60-
}
61-
62-
// Separate items into 2 different containers
63-
$half = ceil( count( $list_items ) / 2 );
64-
$left = array_slice( $list_items, 0, $half );
65-
$right = array_slice( $list_items, $half );
66-
6786
$wrapper_attributes = get_block_wrapper_attributes();
6887
return sprintf(
69-
'<div %s><dl><div>%s</div><div>%s</div></dl></div>',
88+
'<div %s><ul>%s</ul></div>',
7089
$wrapper_attributes,
71-
join( '', $left ),
72-
join( '', $right )
90+
join( '', $list_items )
7391
);
7492
}
7593

7694
/**
77-
* Retrieves a custom site field
95+
* Retrieves a value from a given post.
7896
*
79-
* @param string $key Name of meta field.
80-
* @return string
81-
*/
82-
function get_custom_field( $key, $post_id ) {
83-
$values = get_post_custom_values( $key, $post_id );
84-
85-
if ( empty( $values ) ) {
86-
return '';
87-
}
88-
89-
return $values[0];
90-
}
91-
92-
/**
93-
* Get's tags and categories associated with site.
97+
* @param string $type Type of data source, one of meta, taxonomy, other.
98+
* @param string $key Name of meta field or taxonomy.
99+
* @param string $post_id ID of the post to look up.
94100
*
95-
* @param integer $post_id
96101
* @return string
97102
*/
98-
function get_associated_terms( $post_id ) {
99-
$terms = array();
100-
$tags = get_the_terms( $post_id, 'post_tag' );
101-
$categories = get_the_terms( $post_id, 'category' );
102-
103-
if ( $tags ) {
104-
$terms = array_merge( $terms, $tags );
105-
}
106-
107-
if ( $categories ) {
108-
$terms = array_merge( $terms, $categories );
103+
function get_value( $type, $key, $post_id ) {
104+
if ( 'taxonomy' === $type ) {
105+
$value = get_the_term_list( $post_id, $key, '', ', ' );
106+
} else if ( 'meta' === $type ) {
107+
$value = get_post_meta( $post_id, $key, true );
108+
} else if ( 'published' === $key ) {
109+
// Publish date is a special case.
110+
$value = get_the_date( 'F Y', $post_id );
109111
}
110112

111-
if ( empty( $terms ) ) {
113+
if ( is_wp_error( $value ) ) {
112114
return '';
113115
}
114116

115-
$links = array();
116-
117-
foreach ( $terms as $value ) {
118-
$link = get_term_link( $value->term_id, $value->taxonomy );
119-
if ( is_wp_error( $link ) ) {
120-
return $link;
121-
}
122-
$links[] = "<a href='" . esc_url( $link ) . "'>" . $value->name . '</a>';
123-
}
124-
125-
return join( ', ', $links );
126-
}
127-
128-
/**
129-
* Registers the block using the metadata loaded from the `block.json` file.
130-
* Behind the scenes, it registers also all assets so they can be enqueued
131-
* through the block editor in the corresponding context.
132-
*
133-
* @see https://developer.wordpress.org/reference/functions/register_block_type/
134-
*/
135-
function init() {
136-
register_block_type(
137-
dirname( dirname( __DIR__ ) ) . '/build/site-meta-list',
138-
array(
139-
'render_callback' => __NAMESPACE__ . '\render',
140-
)
141-
);
117+
return $value;
142118
}
Lines changed: 24 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,31 @@
1-
.wp-block-wporg-site-meta-list dl {
2-
margin: 0;
3-
}
4-
5-
.wp-block-wporg-site-meta-list dl > div {
6-
display: grid;
7-
grid-template-columns: 1fr 1fr;
8-
}
1+
.wp-block-wporg-site-meta-list {
2+
margin-block-start: 0;
93

10-
.wp-block-wporg-site-meta-list dd {
11-
word-break: break-word;
12-
margin: 0 0 var(--wp--preset--spacing--10);
13-
}
14-
15-
.wp-block-wporg-site-meta-list dl > div:last-child dd:last-child {
16-
margin-bottom: 0;
17-
}
4+
ul {
5+
margin: 0;
6+
padding: 0;
7+
list-style-type: none;
8+
}
189

19-
.wp-block-wporg-site-meta-list dt {
20-
white-space: nowrap;
21-
padding-right: 1rem;
22-
}
10+
li {
11+
display: flex;
12+
gap: var(--wp--preset--spacing--10);
13+
padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
14+
border-bottom: 1px solid var(--wp--preset--color--light-grey-1);
2315

24-
@media (min-width: 390px) {
25-
.wp-block-wporg-site-meta-list dl > div {
26-
grid-template-columns: 0.6fr 1fr;
27-
}
28-
}
16+
&:last-of-type {
17+
border-bottom: none;
18+
}
2919

30-
@media (min-width: 641px) {
31-
.wp-block-wporg-site-meta-list dl {
32-
display: grid;
33-
grid-template-columns: 1fr 1fr;
34-
}
20+
strong {
21+
flex-shrink: 0;
22+
font-weight: 400;
23+
}
3524

36-
.wp-block-wporg-site-meta-list dd:last-child {
37-
margin-bottom: 0;
25+
span {
26+
margin-inline-start: auto;
27+
text-align: right;
28+
color: var(--wp--preset--color--charcoal-3);
29+
}
3830
}
3931
}

0 commit comments

Comments
 (0)