Skip to content

Commit

Permalink
Single Site: Update site meta list (#144)
Browse files Browse the repository at this point in the history 
* Site Meta block: Update list of meta and display to match design

* Update look of site meta block
  • Loading branch information
@ryelle
ryelle authored Aug 9, 2023
1 parent 7146e7c commit 3f7e7e0
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 117 deletions.
22 changes: 13 additions & 9 deletions source/wp-content/themes/wporg-showcase-2022/patterns/page-single.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@

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

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

<!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%">
<!-- 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"} -->
<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)">
<!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"normal","fontFamily":"inter"} -->
<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>
<!-- wp:column {"width":"30%"} -->
<div class="wp-block-column" style="flex-basis:30%">
<!-- wp:group {"style":{"border":{"radius":"2px","style":"solid","width":"1px"}},"borderColor":"light-grey-1"} -->
<div class="wp-block-group has-border-color has-light-grey-1-border-color" style="border-style:solid;border-width:1px;border-radius:2px">
<!-- wp:heading {"className":"screen-reader-text"} -->
<h2 class="wp-block-heading screen-reader-text"><?php esc_attr_e( 'More about this site', 'wporg' ); ?></h2>
<!-- /wp:heading -->

<!-- wp:wporg/site-meta-list /-->
</div>
<!-- /wp:group -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}}}} -->
<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>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
</div>
Expand Down
128 changes: 52 additions & 76 deletions source/wp-content/themes/wporg-showcase-2022/src/site-meta-list/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,22 @@

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

/**
* Registers the block using the metadata loaded from the `block.json` file.
* Behind the scenes, it registers also all assets so they can be enqueued
* through the block editor in the corresponding context.
*
* @see https://developer.wordpress.org/reference/functions/register_block_type/
*/
function init() {
register_block_type(
dirname( dirname( __DIR__ ) ) . '/build/site-meta-list',
array(
'render_callback' => __NAMESPACE__ . '\render',
)
);
}

/**
* Render the block content.
*
Expand All @@ -29,114 +45,74 @@ function render( $attributes, $content, $block ) {
$meta_fields = array(
array(
'label' => __( 'Author', 'wporg' ),
'type' => 'meta',
'key' => 'author',
),
array(
'label' => __( 'Country', 'wporg' ),
'type' => 'meta',
'key' => 'country',
),
array(
'label' => __( 'Theme', 'wporg' ),
'key' => 'theme',
'label' => __( 'Category', 'wporg' ),
'type' => 'taxonomy',
'key' => 'category',
),
array(
'label' => __( 'Flavor', 'wporg' ),
'type' => 'taxonomy',
'key' => 'flavor',
),
array(
'label' => __( 'Launched on', 'wporg' ),
'key' => 'date_launched',
'label' => __( 'Published', 'wporg' ),
'type' => 'other',
'key' => 'published',
),
array(
'label' => __( 'Site tags', 'wporg' ),
'type' => 'taxonomy',
'key' => 'post_tag',
),
);

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

if ( ! empty( $value ) ) {
$list_items[] = '<dt>' . $field['label'] . '</dt><dd>' . esc_html( $value ) . '</dd>';
$list_items[] = '<li><strong>' . $field['label'] . '</strong> <span>' . wp_kses_post( $value ) . '</span></li>';
}
}

$terms = get_associated_terms( $block->context['postId'] );

if ( ! empty( $terms ) ) {
$list_items[] = '<dt>' . __( 'Archived In', 'wporg' ) . "</dt><dd>$terms</dd>";
}

// Separate items into 2 different containers
$half = ceil( count( $list_items ) / 2 );
$left = array_slice( $list_items, 0, $half );
$right = array_slice( $list_items, $half );

$wrapper_attributes = get_block_wrapper_attributes();
return sprintf(
'<div %s><dl><div>%s</div><div>%s</div></dl></div>',
'<div %s><ul>%s</ul></div>',
$wrapper_attributes,
join( '', $left ),
join( '', $right )
join( '', $list_items )
);
}

/**
* Retrieves a custom site field
* Retrieves a value from a given post.
*
* @param string $key Name of meta field.
* @return string
*/
function get_custom_field( $key, $post_id ) {
$values = get_post_custom_values( $key, $post_id );

if ( empty( $values ) ) {
return '';
}

return $values[0];
}

/**
* Get's tags and categories associated with site.
* @param string $type Type of data source, one of meta, taxonomy, other.
* @param string $key Name of meta field or taxonomy.
* @param string $post_id ID of the post to look up.
*
* @param integer $post_id
* @return string
*/
function get_associated_terms( $post_id ) {
$terms = array();
$tags = get_the_terms( $post_id, 'post_tag' );
$categories = get_the_terms( $post_id, 'category' );

if ( $tags ) {
$terms = array_merge( $terms, $tags );
}

if ( $categories ) {
$terms = array_merge( $terms, $categories );
function get_value( $type, $key, $post_id ) {
if ( 'taxonomy' === $type ) {
$value = get_the_term_list( $post_id, $key, '', ', ' );
} else if ( 'meta' === $type ) {
$value = get_post_meta( $post_id, $key, true );
} else if ( 'published' === $key ) {
// Publish date is a special case.
$value = get_the_date( 'F Y', $post_id );
}

if ( empty( $terms ) ) {
if ( is_wp_error( $value ) ) {
return '';
}

$links = array();

foreach ( $terms as $value ) {
$link = get_term_link( $value->term_id, $value->taxonomy );
if ( is_wp_error( $link ) ) {
return $link;
}
$links[] = "<a href='" . esc_url( $link ) . "'>" . $value->name . '</a>';
}

return join( ', ', $links );
}

/**
* Registers the block using the metadata loaded from the `block.json` file.
* Behind the scenes, it registers also all assets so they can be enqueued
* through the block editor in the corresponding context.
*
* @see https://developer.wordpress.org/reference/functions/register_block_type/
*/
function init() {
register_block_type(
dirname( dirname( __DIR__ ) ) . '/build/site-meta-list',
array(
'render_callback' => __NAMESPACE__ . '\render',
)
);
return $value;
}
56 changes: 24 additions & 32 deletions source/wp-content/themes/wporg-showcase-2022/src/site-meta-list/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,31 @@
.wp-block-wporg-site-meta-list dl {
margin: 0;
}

.wp-block-wporg-site-meta-list dl > div {
display: grid;
grid-template-columns: 1fr 1fr;
}
.wp-block-wporg-site-meta-list {
margin-block-start: 0;

.wp-block-wporg-site-meta-list dd {
word-break: break-word;
margin: 0 0 var(--wp--preset--spacing--10);
}

.wp-block-wporg-site-meta-list dl > div:last-child dd:last-child {
margin-bottom: 0;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}

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

@media (min-width: 390px) {
.wp-block-wporg-site-meta-list dl > div {
grid-template-columns: 0.6fr 1fr;
}
}
&:last-of-type {
border-bottom: none;
}

@media (min-width: 641px) {
.wp-block-wporg-site-meta-list dl {
display: grid;
grid-template-columns: 1fr 1fr;
}
strong {
flex-shrink: 0;
font-weight: 400;
}

.wp-block-wporg-site-meta-list dd:last-child {
margin-bottom: 0;
span {
margin-inline-start: auto;
text-align: right;
color: var(--wp--preset--color--charcoal-3);
}
}
}

0 comments on commit 3f7e7e0

Please sign in to comment.