Skip to content

Homepage: Add hero section for random featured site #145

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Aug 31, 2023
Merged

Homepage: Add hero section for random featured site #145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
9567075
Homepage: Add hero section for random featured site
ryelle Aug 14, 2023
1798bb1
Remove localhost URL
ryelle Aug 15, 2023
d993fc4
Use correct escaping function
ryelle Aug 15, 2023
babf77a
Use the scaling border size for header screenshots
ryelle Aug 15, 2023
3deed54
Update the spacing in meta boxes
ryelle Aug 15, 2023
e86ec31
Scale up and down the heading dots
ryelle Aug 15, 2023
73b097c
Add post title to available meta, use on hero section
ryelle Aug 18, 2023
afe3a54
Update link style in meta list block
ryelle Aug 30, 2023
c7f6bb5
Use a custom property from theme.json for the border width
ryelle Aug 30, 2023
4a97ef0
Ensure both hero columns are the same width when in single-column view
ryelle Aug 30, 2023
bb43dcd
Update site link color
ryelle Aug 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions source/wp-content/themes/wporg-showcase-2022/images/dots-dark.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
55 changes: 55 additions & 0 deletions source/wp-content/themes/wporg-showcase-2022/patterns/_site-hero.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<?php
/**
* Title: Site Hero (Featured)
* Slug: wporg-showcase-2022/site-hero
* Inserter: no
*
* This renders a random single sticky (hero featured) site.
*/

?>
<!-- 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"} -->
<div class="wp-block-query is-section-site-hero">
<!-- wp:post-template -->
<!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"var:preset|spacing|30","left":"var:preset|spacing|50"}}}} -->
<div class="wp-block-columns">
<!-- wp:column {"width":"24%"} -->
<div class="wp-block-column" style="flex-basis:24%">
<!-- wp:group {"layout":{"type":"default"}} -->
<div class="wp-block-group">
<!-- wp:spacer {"height":"var:preset|spacing|50"} -->
<div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading {"fontSize":"heading-2"} -->
<h1 class="wp-block-heading has-heading-2-font-size"><?php esc_html_e( 'Showcase', 'wporg' ); ?></h1>
<!-- /wp:heading -->

<!-- wp:paragraph {style":{"spacing":{"margin":{"top":"var:preset|spacing|10"}}}} -->
<p style="margin-top:var(--wp--preset--spacing--10)"><?php esc_html_e( 'Star-studded sites built with WordPress', 'wporg' ); ?></p>
<!-- /wp:paragraph -->

<!-- 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"} /-->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"bottom"} -->
<div class="wp-block-column is-vertically-aligned-bottom">
<!-- 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"}} -->
<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">
<span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
<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>
<div class="wp-block-cover__inner-container">
<!-- wp:wporg/site-screenshot {"isLink":true} /-->
</div>
</div>
<!-- /wp:cover -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
<!-- /wp:post-template -->
</div>
<!-- /wp:query -->
8 changes: 3 additions & 5 deletions source/wp-content/themes/wporg-showcase-2022/patterns/front-page.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,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"}} -->
<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)">
<!-- wp:paragraph -->
<p>Slider…</p>
<!-- /wp:paragraph -->
<!-- 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"}} -->
<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)">
<!-- wp:pattern {"slug":"wporg-showcase-2022/site-hero"} /-->
</div>
<!-- /wp:group -->

Expand Down
21 changes: 15 additions & 6 deletions source/wp-content/themes/wporg-showcase-2022/src/site-meta-list/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,11 @@ function render( $attributes, $content, $block ) {
$list_items = array();

$meta_fields = array(
array(
'label' => __( 'Site title', 'wporg' ),
'type' => 'other',
'key' => 'post_title',
),
array(
'label' => __( 'Author', 'wporg' ),
'type' => 'meta',
Expand Down Expand Up @@ -127,12 +132,16 @@ function get_value( $type, $key, $post_id ) {
$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 );
} else if ( 'domain' === $key ) {
// Domain is meta, but has special format.
$value = do_shortcode( '<a class="external-link" href="[domain]" target="_blank" rel="noopener noreferrer">[pretty_domain]</a>' );
} else {
// "other" are special cases.
if ( 'published' === $key ) {
$value = get_the_date( 'F Y', $post_id );
} else if ( 'domain' === $key ) {
// Domain uses shortcodes to output pretty format.
$value = do_shortcode( '<a class="external-link" href="[domain]" target="_blank" rel="noopener noreferrer">[pretty_domain]</a>' );
} else if ( 'post_title' === $key ) {
$value = get_the_title( $post_id );
}
}

if ( is_wp_error( $value ) ) {
Expand Down
18 changes: 18 additions & 0 deletions source/wp-content/themes/wporg-showcase-2022/src/site-meta-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,31 @@
}
}

a {
text-decoration: none;

&:hover,
&:focus {
text-decoration: underline;
text-decoration-thickness: 1px;
}
}

li.is-meta-domain a {
color: var(--wp--preset--color--charcoal-5);
}

&.has-text-color {
li span {
color: inherit;
}
}

&.has-hidden-label {
li {
padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

li span {
margin-inline-start: unset;
text-align: left;
Expand Down
27 changes: 23 additions & 4 deletions source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,43 @@
overflow: hidden;
border-width: 10px;
border-style: solid;
border-color: rgba(30, 30, 30, 0.1) !important;
border-color: var(--wp--custom--wporg-site-screenshot--border--color);
border-radius: 20px; // 10px inner radius plus the 10px border size.

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

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

.has-feature-color-background &,
.is-section-site-hero & {
border: none;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
box-shadow:
0 0 0
var(--wp--custom--wporg-site-screenshot--border--width)
var(--wp--custom--wporg-site-screenshot--border--color);
}

.has-feature-color-background & {
border-radius: 20px 20px 0 0;
border-bottom-width: 0;
flex: 1;

&:first-child {
flex: 4;
}
}

.is-section-site-hero & {
--wp--custom--wporg-site-screenshot--border--color: var(--wp--preset--color--charcoal-2);
max-width: none;
}

a {
display: block;

Expand All @@ -39,3 +53,8 @@
vertical-align: middle;
}
}

// Clip off the bottom box shadow.
.has-feature-color-background {
overflow: hidden;
}
21 changes: 21 additions & 0 deletions source/wp-content/themes/wporg-showcase-2022/src/style/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,27 @@ a:where(:not(.wp-element-button)):focus-visible {
border-radius: 2px;
}

/* Site Hero section */
.is-section-site-hero {
.wp-block-cover__image-background {
background-size: clamp(50px, 4vw, 100px);
}

/* Switch down to one column when image gets squished. */
@media (max-width: 1179px) {
.wp-block-columns {
flex-direction: column;
gap: 0;
}

.wp-block-cover {
padding-left: var(--wp--custom--wporg-site-screenshot--border--width) !important;
padding-right: var(--wp--custom--wporg-site-screenshot--border--width) !important;
min-height: 0 !important;
}
}
}

/* Style the site grid. */
.wp-block-query .is-layout-grid {
.wp-block-post-title {
Expand Down
4 changes: 2 additions & 2 deletions source/wp-content/themes/wporg-showcase-2022/templates/single.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@

<!-- wp:group {"tagName":"main","style":{"spacing":{"blockGap":"0px","padding":{"bottom":"var:preset|spacing|80"}}},"className":"entry-content","layout":{"type":"constrained"}} -->
<main class="wp-block-group entry-content" style="padding-bottom:var(--wp--preset--spacing--80)">
<!-- 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"}} -->
<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)">
<!-- 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"}} -->
<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)">
<!-- wp:group {"style":{"spacing":{"blockGap":"80px"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center","verticalAlignment":"bottom"}} -->
<div class="wp-block-group">
<!-- wp:wporg/site-screenshot /-->
Expand Down
10 changes: 10 additions & 0 deletions source/wp-content/themes/wporg-showcase-2022/theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,16 @@
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"custom": {
"wporg-site-screenshot": {
"border": {
"color": "rgba(30, 30, 30, 0.1)",
"width": "clamp(4px, 2vw, 20px)"
}
}
}
},
"styles": {
"blocks": {
"core/quote": {
Expand Down