Skip to content
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

Add feature banner to Front Page. #37

Merged
merged 12 commits into from
Nov 14, 2022
+82 −11
Merged

Add feature banner to Front Page. #37

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
a6f66a2
First attempt at mast-head.
StevenDufresne Nov 8, 2022
812b25b
Allow for sticky posts.
StevenDufresne Nov 8, 2022
8234792
Add in query control for mast head.
StevenDufresne Nov 8, 2022
eec8fd8
Update the header and control expansion of hero bg.
StevenDufresne Nov 8, 2022
a7e2ca1
Use an svg.
StevenDufresne Nov 9, 2022
2ab6a52
Rebuild using css and svg image.
StevenDufresne Nov 9, 2022
2d2bf4f
Run lint.
StevenDufresne Nov 9, 2022
c45a0d7
Update the copy of doc.
StevenDufresne Nov 9, 2022
6079f7f
Fix rebase conflict.
StevenDufresne Nov 11, 2022
22f0026
Add svg img and functions that allows it.
StevenDufresne Nov 11, 2022
36dd722
Remove the ability to upload svg.
StevenDufresne Nov 13, 2022
08e776a
Use showcase images from cdn.
StevenDufresne Nov 14, 2022
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
36 changes: 36 additions & 0 deletions source/wp-content/themes/wporg-showcase-2022/functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@
add_action( 'wp', __NAMESPACE__ . '\jetpackme_remove_rp', 20 );
add_filter( 'excerpt_length', __NAMESPACE__ . '\modify_excerpt_length', 999 );
add_filter( 'excerpt_more', __NAMESPACE__ . '\modify_excerpt_more' );
add_filter( 'query_loop_block_query_vars', __NAMESPACE__ . '\modify_query_loop_block_query_vars', 10, 2 );
add_filter( 'upload_mimes', __NAMESPACE__ . '\wporg_add_svg_to_upload_mimes' );

/**
* Enqueue scripts and styles.
Expand Down Expand Up @@ -154,3 +156,37 @@ function modify_excerpt_length() {
function modify_excerpt_more() {
return '...';
}

/**
* Modify query vars for mast head query.
*
* See: https://github.com/WordPress/gutenberg/issues/41184
*
* @return string
*/
function modify_query_loop_block_query_vars( $query, $block ) {
if ( isset( $block->context['query']['sticky'] ) && 'only' === $block->context['query']['sticky'] ) {
$sticky = get_option( 'sticky_posts' );
$query['ignore_sticky_posts'] = 1;
$query['post__in'] = $sticky;
}

return $query;
}

/**
* Add SVGs to the list of allowed mime types.
*
* @param array $upload_mimes The existing allowed mime types.
*
* @return array The enhanced allowed mime types.
*/
function wporg_add_svg_to_upload_mimes( $upload_mimes ) {
if ( current_user_can( 'manage_options' ) ) {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dd32 Does this make any sense? To allow SVG uploads but lock it down to admins?

Copy link
Member

@dd32 dd32 Nov 11, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In all honesty, this doesn't belong in the theme, and I'm not sure the context of adding it.

There's also something to say that this should be using unfiltered_upload, but that isn't available to anyone on WordPress.org.

I think I'd rather enable a plugin such as https://wordpress.org/plugins/safe-svg/ (or one of the others) on the site instead if SVG upload is required.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah fair, I'll avoid adding SVG support.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we'll need SVG support eventually, so I've added a low-priority issue over in mu-plugins: WordPress/wporg-mu-plugins#300

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

$file_types = array();
$file_types['svg'] = 'image/svg+xml';
return array_merge( $file_types, $upload_mimes );
}

return $upload_mimes;
}
4 changes: 4 additions & 0 deletions source/wp-content/themes/wporg-showcase-2022/images/showcase.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.
40 changes: 38 additions & 2 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 @@ -7,8 +7,44 @@

?>

<!-- wp:group {"align":"wide","layout":{"type":"default"}} -->
<div class="wp-block-group alignwide"><!-- wp:columns {"align":"wide"} -->
<!-- wp:query {"queryId":6,"query":{"perPage":"1","pages":"1","offset":"0","postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"only","inherit":false},"align":"full"} -->
<div class="wp-block-query alignfull"><!-- wp:post-template {"align":"full"} -->
<!-- wp:group {"backgroundColor":"charcoal-2","layout":{"type":"default"}} -->
<div class="wp-block-group has-charcoal-2-background-color has-background"><!-- wp:columns {"align":"full","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|40","left":"var:preset|spacing|40"},"padding":{"top":"0"}}}} -->
<div class="wp-block-columns alignfull" style="padding-top:0"><!-- wp:column {"width":"60%","layout":{"type":"default"}} -->
<div class="wp-block-column" style="flex-basis:60%"><!-- wp:heading {"level":1,"className":"screen-reader-text"} -->
<h1 class="screen-reader-text"><?php esc_attr_e( 'Showcase:', 'wporg' ); ?></h1>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"padding":{"right":"var:preset|spacing|30"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-right:var(--wp--preset--spacing--30)"><!-- wp:image {"align":"full","id":7564,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-full"><img src="http://localhost:8888/wp-content/uploads/2022/11/showcase.svg" alt="" class="wp-image-7564"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"var:preset|spacing|40"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide" style="padding-bottom:var(--wp--preset--spacing--40)"><!-- wp:group {"align":"wide","className":"wporg-hero-details","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide wporg-hero-details"><!-- wp:group {"align":"full","layout":{"type":"flex","orientation":"vertical","justifyContent":"right"}} -->
<div class="wp-block-group alignfull"><!-- wp:group {"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"align":"left","style":{"typography":{"lineHeight":"0"}},"textColor":"white","className":"is-style-serif"} -->
<p class="has-text-align-left is-style-serif has-white-color has-text-color" style="line-height:0"><?php esc_attr_e( 'Featuring:', 'wporg' ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:post-title {"textAlign":"left","isLink":true,"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"typography":{"fontStyle":"italic","fontWeight":"400"}},"textColor":"white","fontSize":"extra-large","fontFamily":"eb-garamond"} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:wporg/site-screenshot {"align":"wide"} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- /wp:post-template --></div>
<!-- /wp:query -->

<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|80"}}},"layout":{"type":"default"}} -->
<div div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--80)"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"70%"} -->
<div class="wp-block-column" style="flex-basis:70%"><!-- wp:heading {"fontSize":"huge","fontFamily":"inter"} -->
<h2 class="has-inter-font-family has-huge-font-size"><?php esc_attr_e( 'Featured sites', 'wporg' ); ?></h2>
Expand Down
19 changes: 19 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 @@ -148,3 +148,22 @@ button[type="submit"] {
margin-right: var(--wp--preset--spacing--60) !important;
}
}

.wporg-hero-details {
padding-top: var(--wp--preset--spacing--10);

> * {
text-align: right;
}
}

@media (min-width: 782px) {
.wporg-hero-details {
padding-top: 0;
margin-top: -64px !important;
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a bit sensitive. Can't think of a better way.


> * {
text-align: left;
}
}
}
12 changes: 3 additions & 9 deletions source/wp-content/themes/wporg-showcase-2022/templates/front-page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,7 @@
<!-- wp:template-part {"slug":"header","theme":"wporg-showcase-2022"} /-->
<!-- wp:wporg/global-header {"style":"white-on-black"} /-->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|90","right":"var:preset|spacing|90","bottom":"var:preset|spacing|90","left":"var:preset|spacing|90"}}},"backgroundColor":"pale-pink","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-pale-pink-background-color has-background" style="padding-top:var(--wp--preset--spacing--90);padding-right:var(--wp--preset--spacing--90);padding-bottom:var(--wp--preset--spacing--90);padding-left:var(--wp--preset--spacing--90)"><!-- wp:heading {"textAlign":"center"} -->
<h2 class="has-text-align-center">Masthead</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:group {"tagName":"main","style":{"spacing":{"blockGap":"0px","margin":{"top":"var:preset|spacing|60"}}},"className":"entry-content","layout":{"type":"constrained"}} -->
<main class="wp-block-group entry-content" style="margin-top:var(--wp--preset--spacing--60)">
<!-- wp:group {"tagName":"main","style":{"spacing":{"blockGap":"0px"}},"className":"entry-content","layout":{"type":"constrained"}} -->
<main class="wp-block-group entry-content">
<!-- wp:pattern {"slug":"wporg-showcase-2022/front-page"} /-->
</main>
<!-- /wp:group -->
Expand Down