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:
parent
c39d5ba5cd
commit
031d9f49e4
8 changed files with 134 additions and 18 deletions
|
@ -1,2 +1,3 @@
|
|||
// Import the block extends
|
||||
@import "block-extends/latest-posts";
|
||||
@import "block-extends/related-posts";
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
.has-link-color a, a {
|
||||
border-bottom: none;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: all 0.1s ease;
|
||||
|
||||
&:hover {
|
||||
|
|
23
spearhead/assets/sass/block-extends/_related-posts.scss
Normal file
23
spearhead/assets/sass/block-extends/_related-posts.scss
Normal 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;
|
||||
}
|
||||
}
|
|
@ -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';
|
||||
|
|
39
spearhead/inc/block-patterns.php
Normal file
39
spearhead/inc/block-patterns.php
Normal 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 /-->',
|
||||
)
|
||||
);
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -123,3 +123,25 @@ 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;
|
||||
}
|
|
@ -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 */
|
|
@ -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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"
|
||||
}
|
Loading…
Reference in a new issue