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 1 commit
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":"constrained"}} -->
<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_attr_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_attr_e( 'Star-studded sites built with WordPress', 'wporg' ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:wporg/site-meta-list {"meta":["author","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":"http://localhost:8888/wp-content/themes/wporg-showcase-2022/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(http://localhost:8888/wp-content/themes/wporg-showcase-2022/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
8 changes: 8 additions & 0 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 @@ -25,6 +25,14 @@
}
}

.is-section-site-hero & {
max-width: none;
border-width: 20px;
border-bottom-width: 0;
border-radius: 30px 30px 0 0; // 30 = 10px inner radius plus the 20px border size.
border-color: var(--wp--preset--color--charcoal-2) !important;
}

a {
display: block;

Expand Down
16 changes: 16 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,22 @@ a:where(:not(.wp-element-button)):focus-visible {
border-radius: 2px;
}

/* Site Hero section */
.is-section-site-hero {

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

.wp-block-cover {
min-height: 0 !important;
}
}
}

/* Style the site grid. */
.wp-block-query .is-layout-grid {
.wp-block-post-title {
Expand Down