Skip to content

Commit 3ea2323

Browse files
alshakeroalshakero
committed
Design fine tuning
More parity with: https://wordpress.github.io/gutenberg/?path=/story/dataviews-dataviews--layout-activity&args=groupBy:!true;groupByLabel:!false
1 parent a79feb4 commit 3ea2323

2 files changed

Lines changed: 56 additions & 34 deletions

File tree

‎src/wp-admin/css/on-this-day.css‎

Lines changed: 27 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -114,9 +114,8 @@
114114
}
115115

116116
.on-this-day-year-header {
117-
margin: 0 0 8px;
118-
padding-left: 42px; /* aligns with the body text column */
119-
font-size: 12px;
117+
margin: 8px 0 8px;
118+
font-size: 15px;
120119
font-weight: 500;
121120
line-height: 1.4;
122121
color: var(--otd-subtle);
@@ -183,6 +182,23 @@
183182
}
184183
}
185184

185+
/* Featured-image variant: the thumbnail fills the circle.
186+
Border is hidden so the image reads as the "chip" itself,
187+
while the 3px white halo still separates it from the
188+
timeline line behind it. */
189+
& .on-this-day-post-icon.has-thumbnail {
190+
overflow: hidden;
191+
border-color: transparent;
192+
background: var(--otd-line); /* shown briefly before the image loads */
193+
194+
& img {
195+
display: block;
196+
width: 100%;
197+
height: 100%;
198+
object-fit: cover;
199+
}
200+
}
201+
186202
&.is-private .on-this-day-post-icon {
187203
color: var(--otd-private);
188204
border-color: #f5c9cc;
@@ -254,21 +270,15 @@
254270
font-weight: 500;
255271
}
256272

273+
/* Actions row sits on its own line below the meta, left-aligned
274+
with the post body column. Uses core `.button` styling so it
275+
picks up the user's admin color scheme automatically. */
257276
.on-this-day-post-actions {
258-
display: inline-flex;
259-
gap: 12px;
260-
margin-left: auto; /* push to the right edge of the meta row */
261-
}
262-
263-
.on-this-day-post-action {
264-
color: var(--otd-accent);
265-
text-decoration: none;
266-
267-
&:hover,
268-
&:focus {
269-
color: var(--otd-accent-dark);
270-
text-decoration: underline;
271-
}
277+
display: flex;
278+
flex-wrap: wrap;
279+
gap: 8px;
280+
margin-top: 8px;
281+
align-items: center;
272282
}
273283

274284
/* -----------------------------------------------------------------------------

‎src/wp-admin/includes/class-wp-on-this-day.php‎

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ class WP_On_This_Day {
4040
* @since 7.1.0
4141
* @var int
4242
*/
43-
const CACHE_VERSION = 2;
43+
const CACHE_VERSION = 5;
4444

4545
/**
4646
* Renders the dashboard widget output.
@@ -222,7 +222,7 @@ protected static function render_posts( $posts ) {
222222
}
223223
?>
224224
<li class="<?php echo esc_attr( $group_classes ); ?>">
225-
<h3 class="on-this-day-year-header">
225+
<p class="on-this-day-year-header">
226226
<span class="on-this-day-year-number"><?php echo esc_html( $year ); ?></span>
227227
<span class="on-this-day-year-ago">
228228
<?php
@@ -233,7 +233,7 @@ protected static function render_posts( $posts ) {
233233
);
234234
?>
235235
</span>
236-
</h3>
236+
</p>
237237
<ul class="on-this-day-post-list">
238238
<?php foreach ( $year_posts as $post ) : ?>
239239
<?php self::render_post( $post ); ?>
@@ -279,11 +279,23 @@ protected static function render_post( $post ) {
279279
?>
280280
<li class="<?php echo esc_attr( $row_classes ); ?>">
281281
<?php if ( $is_private ) : ?>
282-
<span class="on-this-day-post-icon dashicons-before dashicons-lock" aria-hidden="true">
282+
<span class="on-this-day-post-icon dashicons-before dashicons-lock" aria-hidden="true"></span>
283+
<?php elseif ( has_post_thumbnail( $post ) ) : ?>
284+
<span class="on-this-day-post-icon has-thumbnail" aria-hidden="true">
285+
<?php
286+
echo get_the_post_thumbnail(
287+
$post,
288+
array( 56, 56 ),
289+
array(
290+
'alt' => '',
291+
'loading' => 'lazy',
292+
)
293+
);
294+
?>
295+
</span>
283296
<?php else : ?>
284-
<span class="on-this-day-post-icon dashicons-before dashicons-edit" aria-hidden="true">
297+
<span class="on-this-day-post-icon dashicons-before dashicons-edit" aria-hidden="true"></span>
285298
<?php endif; ?>
286-
</span>
287299
<div class="on-this-day-post-body">
288300
<span class="screen-reader-text">
289301
<?php echo $is_private ? esc_html__( 'Private post' ) : esc_html__( 'Published post' ); ?>
@@ -320,18 +332,18 @@ protected static function render_post( $post ) {
320332
<span class="on-this-day-post-sep" aria-hidden="true">&middot;</span>
321333
<span class="on-this-day-post-private"><?php _e( 'Private' ); ?></span>
322334
<?php endif; ?>
323-
324-
<?php if ( $edit_link || ( 'publish' === $status && $view_link ) ) : ?>
325-
<span class="on-this-day-post-actions">
326-
<?php if ( $edit_link ) : ?>
327-
<a class="on-this-day-post-action" href="<?php echo esc_url( $edit_link ); ?>"><?php _e( 'Edit' ); ?></a>
328-
<?php endif; ?>
329-
<?php if ( 'publish' === $status && $view_link ) : ?>
330-
<a class="on-this-day-post-action" href="<?php echo esc_url( $view_link ); ?>" target="_blank" rel="noopener"><?php _e( 'View' ); ?></a>
331-
<?php endif; ?>
332-
</span>
333-
<?php endif; ?>
334335
</div>
336+
337+
<?php if ( $edit_link || ( 'publish' === $status && $view_link ) ) : ?>
338+
<div class="on-this-day-post-actions">
339+
<?php if ( $edit_link ) : ?>
340+
<a class="on-this-day-post-action button button-secondary button-compact" href="<?php echo esc_url( $edit_link ); ?>"><?php _e( 'Edit' ); ?></a>
341+
<?php endif; ?>
342+
<?php if ( 'publish' === $status && $view_link ) : ?>
343+
<a class="on-this-day-post-action button-link is-compact" href="<?php echo esc_url( $view_link ); ?>" target="_blank" rel="noopener"><?php _e( 'View' ); ?></a>
344+
<?php endif; ?>
345+
</div>
346+
<?php endif; ?>
335347
</div>
336348
</li>
337349
<?php

0 commit comments

Comments
 (0)