Skip to content

Commit 364d145

Browse files
ryelleryelle
authored
Homepage: Add hero section for random featured site (#145)
* Homepage: Add hero section for random featured site * Remove localhost URL * Use correct escaping function * Use the scaling border size for header screenshots * Update the spacing in meta boxes * Scale up and down the heading dots * Add post title to available meta, use on hero section * Update link style in meta list block * Use a custom property from theme.json for the border width * Ensure both hero columns are the same width when in single-column view * Update site link color
1 parent 0a4c052 commit 364d145

File tree

9 files changed

+150
-17
lines changed

9 files changed

+150
-17
lines changed

‎source/wp-content/themes/wporg-showcase-2022/images/dots-dark.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎source/wp-content/themes/wporg-showcase-2022/patterns/_site-hero.php‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<?php
2+
/**
3+
* Title: Site Hero (Featured)
4+
* Slug: wporg-showcase-2022/site-hero
5+
* Inserter: no
6+
*
7+
* This renders a random single sticky (hero featured) site.
8+
*/
9+
10+
?>
11+
<!-- wp:query {"queryId":0,"query":{"perPage":"1","pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"rand","author":"","search":"","exclude":[],"sticky":"only","inherit":false},"className":"is-section-site-hero"} -->
12+
<div class="wp-block-query is-section-site-hero">
13+
<!-- wp:post-template -->
14+
<!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"var:preset|spacing|30","left":"var:preset|spacing|50"}}}} -->
15+
<div class="wp-block-columns">
16+
<!-- wp:column {"width":"24%"} -->
17+
<div class="wp-block-column" style="flex-basis:24%">
18+
<!-- wp:group {"layout":{"type":"default"}} -->
19+
<div class="wp-block-group">
20+
<!-- wp:spacer {"height":"var:preset|spacing|50"} -->
21+
<div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
22+
<!-- /wp:spacer -->
23+
24+
<!-- wp:heading {"fontSize":"heading-2"} -->
25+
<h1 class="wp-block-heading has-heading-2-font-size"><?php esc_html_e( 'Showcase', 'wporg' ); ?></h1>
26+
<!-- /wp:heading -->
27+
28+
<!-- wp:paragraph {style":{"spacing":{"margin":{"top":"var:preset|spacing|10"}}}} -->
29+
<p style="margin-top:var(--wp--preset--spacing--10)"><?php esc_html_e( 'Star-studded sites built with WordPress', 'wporg' ); ?></p>
30+
<!-- /wp:paragraph -->
31+
32+
<!-- wp:wporg/site-meta-list {"meta":["post_title","domain","category"],"showLabel":false,"style":{"elements":{"link":{"color":{"text":"var:preset|color|blueberry-2"}}},"border":{"radius":"2px","style":"solid","width":"1px"},"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}},"borderColor":"charcoal-3","textColor":"light-grey-2"} /-->
33+
</div>
34+
<!-- /wp:group -->
35+
</div>
36+
<!-- /wp:column -->
37+
38+
<!-- wp:column {"verticalAlignment":"bottom"} -->
39+
<div class="wp-block-column is-vertically-aligned-bottom">
40+
<!-- wp:cover {"url":"<?php echo esc_url( get_theme_file_uri( 'images/dots-dark.svg' ) ); ?>","isRepeated":true,"dimRatio":0,"focalPoint":{"x":0.5,"y":0},"minHeight":440,"contentPosition":"bottom center","style":{"spacing":{"padding":{"top":"70px","right":"70px","bottom":"0","left":"70px"}}},"layout":{"type":"constrained"}} -->
41+
<div class="wp-block-cover is-repeated has-custom-content-position is-position-bottom-center" style="padding-top:70px;padding-right:70px;padding-bottom:0;padding-left:70px;min-height:440px">
42+
<span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
43+
<div role="img" class="wp-block-cover__image-background is-repeated" style="background-position:50% 0%;background-image:url(<?php echo esc_url( get_theme_file_uri( 'images/dots-dark.svg' ) ); ?>)"></div>
44+
<div class="wp-block-cover__inner-container">
45+
<!-- wp:wporg/site-screenshot {"isLink":true} /-->
46+
</div>
47+
</div>
48+
<!-- /wp:cover -->
49+
</div>
50+
<!-- /wp:column -->
51+
</div>
52+
<!-- /wp:columns -->
53+
<!-- /wp:post-template -->
54+
</div>
55+
<!-- /wp:query -->

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,9 @@
66
*/
77

88
?>
9-
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space"}}},"backgroundColor":"charcoal-2","textColor":"white","className":"has-color","layout":{"type":"default"}} -->
10-
<div class="wp-block-group alignfull has-color has-white-color has-charcoal-2-background-color has-text-color has-background" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--edge-space)">
11-
<!-- wp:paragraph -->
12-
<p>Slider…</p>
13-
<!-- /wp:paragraph -->
9+
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space"}}},"backgroundColor":"charcoal-1","textColor":"white","className":"has-color","layout":{"type":"constrained","wideSize":"1760px"}} -->
10+
<div class="wp-block-group alignfull has-color has-white-color has-charcoal-1-background-color has-text-color has-background" style="padding-right:var(--wp--preset--spacing--edge-space);padding-left:var(--wp--preset--spacing--edge-space)">
11+
<!-- wp:pattern {"slug":"wporg-showcase-2022/site-hero"} /-->
1412
</div>
1513
<!-- /wp:group -->
1614

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

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,11 @@ function render( $attributes, $content, $block ) {
4343
$list_items = array();
4444

4545
$meta_fields = array(
46+
array(
47+
'label' => __( 'Site title', 'wporg' ),
48+
'type' => 'other',
49+
'key' => 'post_title',
50+
),
4651
array(
4752
'label' => __( 'Author', 'wporg' ),
4853
'type' => 'meta',
@@ -127,12 +132,16 @@ function get_value( $type, $key, $post_id ) {
127132
$value = get_the_term_list( $post_id, $key, '', ', ' );
128133
} else if ( 'meta' === $type ) {
129134
$value = get_post_meta( $post_id, $key, true );
130-
} else if ( 'published' === $key ) {
131-
// Publish date is a special case.
132-
$value = get_the_date( 'F Y', $post_id );
133-
} else if ( 'domain' === $key ) {
134-
// Domain is meta, but has special format.
135-
$value = do_shortcode( '<a class="external-link" href="[domain]" target="_blank" rel="noopener noreferrer">[pretty_domain]</a>' );
135+
} else {
136+
// "other" are special cases.
137+
if ( 'published' === $key ) {
138+
$value = get_the_date( 'F Y', $post_id );
139+
} else if ( 'domain' === $key ) {
140+
// Domain uses shortcodes to output pretty format.
141+
$value = do_shortcode( '<a class="external-link" href="[domain]" target="_blank" rel="noopener noreferrer">[pretty_domain]</a>' );
142+
} else if ( 'post_title' === $key ) {
143+
$value = get_the_title( $post_id );
144+
}
136145
}
137146

138147
if ( is_wp_error( $value ) ) {

‎source/wp-content/themes/wporg-showcase-2022/src/site-meta-list/style.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,31 @@
3232
}
3333
}
3434

35+
a {
36+
text-decoration: none;
37+
38+
&:hover,
39+
&:focus {
40+
text-decoration: underline;
41+
text-decoration-thickness: 1px;
42+
}
43+
}
44+
45+
li.is-meta-domain a {
46+
color: var(--wp--preset--color--charcoal-5);
47+
}
48+
3549
&.has-text-color {
3650
li span {
3751
color: inherit;
3852
}
3953
}
4054

4155
&.has-hidden-label {
56+
li {
57+
padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
58+
}
59+
4260
li span {
4361
margin-inline-start: unset;
4462
text-align: left;

‎source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/style.scss‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,43 @@
22
overflow: hidden;
33
border-width: 10px;
44
border-style: solid;
5-
border-color: rgba(30, 30, 30, 0.1) !important;
5+
border-color: var(--wp--custom--wporg-site-screenshot--border--color);
66
border-radius: 20px; // 10px inner radius plus the 10px border size.
77

88
&:where(.is-linked-image):hover,
99
&:where(.is-linked-image):focus-within {
10-
border-color: rgba(30, 30, 30, 0.25) !important;
10+
--wp--custom--wporg-site-screenshot--border--color: rgba(30, 30, 30, 0.25);
1111
}
1212

1313
&:where(.is-linked-image):focus-within {
1414
outline: 1.5px solid var(--wp--custom--link--color--text);
1515
outline-offset: -1.5px;
1616
}
1717

18+
.has-feature-color-background &,
19+
.is-section-site-hero & {
20+
border: none;
21+
border-bottom-right-radius: 0;
22+
border-bottom-left-radius: 0;
23+
box-shadow:
24+
0 0 0
25+
var(--wp--custom--wporg-site-screenshot--border--width)
26+
var(--wp--custom--wporg-site-screenshot--border--color);
27+
}
28+
1829
.has-feature-color-background & {
19-
border-radius: 20px 20px 0 0;
20-
border-bottom-width: 0;
2130
flex: 1;
2231

2332
&:first-child {
2433
flex: 4;
2534
}
2635
}
2736

37+
.is-section-site-hero & {
38+
--wp--custom--wporg-site-screenshot--border--color: var(--wp--preset--color--charcoal-2);
39+
max-width: none;
40+
}
41+
2842
a {
2943
display: block;
3044

@@ -39,3 +53,8 @@
3953
vertical-align: middle;
4054
}
4155
}
56+
57+
// Clip off the bottom box shadow.
58+
.has-feature-color-background {
59+
overflow: hidden;
60+
}

‎source/wp-content/themes/wporg-showcase-2022/src/style/style.scss‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,27 @@ a:where(:not(.wp-element-button)):focus-visible {
1313
border-radius: 2px;
1414
}
1515

16+
/* Site Hero section */
17+
.is-section-site-hero {
18+
.wp-block-cover__image-background {
19+
background-size: clamp(50px, 4vw, 100px);
20+
}
21+
22+
/* Switch down to one column when image gets squished. */
23+
@media (max-width: 1179px) {
24+
.wp-block-columns {
25+
flex-direction: column;
26+
gap: 0;
27+
}
28+
29+
.wp-block-cover {
30+
padding-left: var(--wp--custom--wporg-site-screenshot--border--width) !important;
31+
padding-right: var(--wp--custom--wporg-site-screenshot--border--width) !important;
32+
min-height: 0 !important;
33+
}
34+
}
35+
}
36+
1637
/* Style the site grid. */
1738
.wp-block-query .is-layout-grid {
1839
.wp-block-post-title {

‎source/wp-content/themes/wporg-showcase-2022/templates/single.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
<!-- wp:group {"tagName":"main","style":{"spacing":{"blockGap":"0px","padding":{"bottom":"var:preset|spacing|80"}}},"className":"entry-content","layout":{"type":"constrained"}} -->
44
<main class="wp-block-group entry-content" style="padding-bottom:var(--wp--preset--spacing--80)">
5-
<!-- wp:group {"align":"full","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|50"},"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space"}},"border":{"bottom":{"color":"var:preset|color|light-grey-1","style":"solid","width":"1px"}},"color":{"background":"#f6f6f6"}},"className":"has-feature-color-background","layout":{"type":"constrained","wideSize":"1440px"}} -->
6-
<div class="wp-block-group alignfull has-feature-color-background has-background" style="border-bottom-color:var(--wp--preset--color--light-grey-1);border-bottom-style:solid;border-bottom-width:1px;background-color:#f6f6f6;margin-bottom:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--edge-space);padding-left:var(--wp--preset--spacing--edge-space)">
5+
<!-- wp:group {"align":"full","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|50"},"padding":{"top":"var:preset|spacing|50","right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space"}},"border":{"bottom":{"color":"var:preset|color|light-grey-1","style":"solid","width":"1px"}},"color":{"background":"#f6f6f6"}},"className":"has-feature-color-background","layout":{"type":"constrained","wideSize":"1440px"}} -->
6+
<div class="wp-block-group alignfull has-feature-color-background has-background" style="border-bottom-color:var(--wp--preset--color--light-grey-1);border-bottom-style:solid;border-bottom-width:1px;background-color:#f6f6f6;margin-bottom:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--edge-space);padding-left:var(--wp--preset--spacing--edge-space)">
77
<!-- wp:group {"style":{"spacing":{"blockGap":"80px"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center","verticalAlignment":"bottom"}} -->
88
<div class="wp-block-group">
99
<!-- wp:wporg/site-screenshot /-->

‎source/wp-content/themes/wporg-showcase-2022/theme.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
{
22
"$schema": "https://schemas.wp.org/trunk/theme.json",
33
"version": 2,
4+
"settings": {
5+
"custom": {
6+
"wporg-site-screenshot": {
7+
"border": {
8+
"color": "rgba(30, 30, 30, 0.1)",
9+
"width": "clamp(4px, 2vw, 20px)"
10+
}
11+
}
12+
}
13+
},
414
"styles": {
515
"blocks": {
616
"core/quote": {

0 commit comments

Comments
 (0)