Spearhead: Add related posts block styles (#2559)

* Add related posts block styles.

* Add related posts as a block pattern.

* Fix phpcs errors.
This commit is contained in:
Jeff Ong 2020-10-08 11:00:56 -07:00 committed by GitHub
parent c39d5ba5cd
commit 031d9f49e4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 134 additions and 18 deletions

View file

@ -1,2 +1,3 @@
// Import the block extends
@import "block-extends/latest-posts";
@import "block-extends/related-posts";

View file

@ -1,5 +1,5 @@
.has-link-color a, a {
border-bottom: none;
border-bottom: 1px solid transparent;
transition: all 0.1s ease;
&:hover {

View file

@ -0,0 +1,23 @@
.wp-block-jetpack-related-posts {
.jp-related-posts-i2__post {
margin: 0 var(--global--spacing-horizontal) 0 0;
}
.jp-related-posts-i2__row {
margin: auto;
}
.jp-related-posts-i2__post-link {
font-weight: 500;
font-size: var(--wp--present--font-size--medium, --global--font-size-md);
line-height: var(--global--line-height-body);
width: fit-content;
}
.jp-related-posts-i2__post-date,
.jp-related-posts-i2__post-context {
font-family: var(--global--font-primary);
font-size: var(--global--font-size-xs);
text-transform: uppercase;
}
}

View file

@ -24,11 +24,13 @@ if ( ! function_exists( 'spearhead_setup' ) ) :
add_theme_support( 'dark-editor-style' );
// Enqueue editor styles.
add_editor_style( array(
spearhead_fonts_url(),
'variables.css',
'style.css',
) );
add_editor_style(
array(
spearhead_fonts_url(),
'variables.css',
'style.css',
)
);
// Add child theme editor font sizes to match Sass-map variables in `_config-child-theme-deep.scss`.
add_theme_support(
@ -93,7 +95,7 @@ if ( ! function_exists( 'spearhead_setup' ) ) :
'color' => '#FFFFFF',
),
)
);
);
}
endif;
add_action( 'after_setup_theme', 'spearhead_setup', 12 );
@ -111,13 +113,13 @@ add_filter( 'seedlet_content_width', 'spearhead_content_width' );
*/
function spearhead_scripts() {
// enqueue Google fonts, if necessary
wp_enqueue_style( 'spearhead-fonts', spearhead_fonts_url(), array(), null );
wp_enqueue_style( 'spearhead-fonts', spearhead_fonts_url(), array(), null );
// Child theme variables
wp_enqueue_style( 'spearhead-variables-style', get_stylesheet_directory_uri() . '/variables.css', array(), wp_get_theme()->get( 'Version' ) );
// enqueue child styles
wp_enqueue_style('spearhead-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ));
wp_enqueue_style( 'spearhead-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// enqueue child RTL styles
wp_style_add_data( 'spearhead-style', 'rtl', 'replace' );
@ -129,7 +131,8 @@ add_action( 'wp_enqueue_scripts', 'spearhead_scripts', 11 );
*/
function spearhead_block_extends() {
// Block Tweaks
wp_enqueue_script( 'spearhead-block-extends',
wp_enqueue_script(
'spearhead-block-extends',
get_stylesheet_directory_uri() . '/assets/js/extend-blocks.js',
array( 'wp-blocks', 'wp-edit-post' ) // wp-edit-post is added to avoid a race condition when trying to unregister a style variation
);
@ -142,17 +145,17 @@ add_action( 'enqueue_block_assets', 'spearhead_block_extends' );
* @return string
*/
function spearhead_fonts_url() : string {
$fonts_url = '';
$fonts_url = '';
$font_families = array();
$font_families[] = 'family=Libre+Franklin:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700';
$font_families[] = 'family=IBM+Plex+Mono:wght@400;700';
$font_families[] = 'display=swap';
// Make a single request for the theme fonts.
$fonts_url = 'https://fonts.googleapis.com/css2?' . implode( '&', $font_families );
// Make a single request for the theme fonts.
$fonts_url = 'https://fonts.googleapis.com/css2?' . implode( '&', $font_families );
return $fonts_url;
return $fonts_url;
}
/**
@ -166,3 +169,8 @@ function seedlet_entry_meta_header() : void {
}
}
// require get_stylesheet_directory() . '/inc/custom-header.php';
/**
* Block Patterns.
*/
require get_stylesheet_directory() . '/inc/block-patterns.php';

View file

@ -0,0 +1,39 @@
<?php
/**
* Spearhead Theme: Block Patterns
*
* @package Spearhead
* @since 1.0.0
*/
/**
* Register Block Pattern Category.
*/
if ( function_exists( 'register_block_pattern_category' ) ) {
unregister_block_pattern_category( 'seedlet' );
register_block_pattern_category(
'spearhead',
array( 'label' => __( 'Spearhead', 'spearhead' ) )
);
}
/**
* Register Block Patterns.
*/
if ( function_exists( 'register_block_pattern' ) ) {
unregister_block_pattern( 'seedlet/group-split-background' );
unregister_block_pattern( 'seedlet/group-image-overlap' );
unregister_block_pattern( 'seedlet/latest-posts-alternating-grid' );
register_block_pattern(
'spearhead/related-posts',
array(
'title' => __( 'Related Posts', 'spearhead' ),
'categories' => array( 'spearhead' ),
'content' => '<!-- wp:separator {"className":"is-style-wide"} --><hr class="wp-block-separator is-style-wide"/><!-- /wp:separator --><!-- wp:paragraph {"fontSize":"medium"} --><p class="has-medium-font-size">Related</p><!-- /wp:paragraph --><!-- wp:jetpack/related-posts /-->',
)
);
}

View file

@ -59,7 +59,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
}
.has-link-color a, a {
border-bottom: none;
border-bottom: 1px solid transparent;
transition: all 0.1s ease;
}
@ -122,4 +122,26 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
.wp-block-latest-posts > li > a:hover {
color: var(--global--color-primary);
}
.wp-block-jetpack-related-posts .jp-related-posts-i2__post {
margin: 0 0 0 var(--global--spacing-horizontal);
}
.wp-block-jetpack-related-posts .jp-related-posts-i2__row {
margin: auto;
}
.wp-block-jetpack-related-posts .jp-related-posts-i2__post-link {
font-weight: 500;
font-size: var(--wp--present--font-size--medium, --global--font-size-md);
line-height: var(--global--line-height-body);
width: fit-content;
}
.wp-block-jetpack-related-posts .jp-related-posts-i2__post-date,
.wp-block-jetpack-related-posts .jp-related-posts-i2__post-context {
font-family: var(--global--font-primary);
font-size: var(--global--font-size-xs);
text-transform: uppercase;
}

View file

@ -59,7 +59,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
}
.has-link-color a, a {
border-bottom: none;
border-bottom: 1px solid transparent;
transition: all 0.1s ease;
}
@ -124,4 +124,26 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
color: var(--global--color-primary);
}
.wp-block-jetpack-related-posts .jp-related-posts-i2__post {
margin: 0 var(--global--spacing-horizontal) 0 0;
}
.wp-block-jetpack-related-posts .jp-related-posts-i2__row {
margin: auto;
}
.wp-block-jetpack-related-posts .jp-related-posts-i2__post-link {
font-weight: 500;
font-size: var(--wp--present--font-size--medium, --global--font-size-md);
line-height: var(--global--line-height-body);
width: fit-content;
}
.wp-block-jetpack-related-posts .jp-related-posts-i2__post-date,
.wp-block-jetpack-related-posts .jp-related-posts-i2__post-context {
font-family: var(--global--font-primary);
font-size: var(--global--font-size-xs);
text-transform: uppercase;
}
/*# sourceMappingURL=style.css.map */

View file

@ -8,8 +8,9 @@
"assets/sass/_text.scss",
"assets/sass/_header.scss",
"assets/sass/_block-extends.scss",
"assets/sass/block-extends/_latest-posts.scss"
"assets/sass/block-extends/_latest-posts.scss",
"assets/sass/block-extends/_related-posts.scss"
],
"names": [],
"mappings": "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"
"mappings": "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"
}