From 031d9f49e45d24283ee5a052102b44b76524ff84 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Thu, 8 Oct 2020 11:00:56 -0700 Subject: [PATCH] Spearhead: Add related posts block styles (#2559) * Add related posts block styles. * Add related posts as a block pattern. * Fix phpcs errors. --- spearhead/assets/sass/_block-extends.scss | 1 + spearhead/assets/sass/_text.scss | 2 +- .../sass/block-extends/_related-posts.scss | 23 +++++++++++ spearhead/functions.php | 34 +++++++++------- spearhead/inc/block-patterns.php | 39 +++++++++++++++++++ spearhead/style-rtl.css | 24 +++++++++++- spearhead/style.css | 24 +++++++++++- spearhead/style.css.map | 5 ++- 8 files changed, 134 insertions(+), 18 deletions(-) create mode 100644 spearhead/assets/sass/block-extends/_related-posts.scss create mode 100644 spearhead/inc/block-patterns.php diff --git a/spearhead/assets/sass/_block-extends.scss b/spearhead/assets/sass/_block-extends.scss index 80faa675e..0fef417e2 100644 --- a/spearhead/assets/sass/_block-extends.scss +++ b/spearhead/assets/sass/_block-extends.scss @@ -1,2 +1,3 @@ // Import the block extends @import "block-extends/latest-posts"; +@import "block-extends/related-posts"; diff --git a/spearhead/assets/sass/_text.scss b/spearhead/assets/sass/_text.scss index 1d2b00147..758c528bf 100644 --- a/spearhead/assets/sass/_text.scss +++ b/spearhead/assets/sass/_text.scss @@ -1,5 +1,5 @@ .has-link-color a, a { - border-bottom: none; + border-bottom: 1px solid transparent; transition: all 0.1s ease; &:hover { diff --git a/spearhead/assets/sass/block-extends/_related-posts.scss b/spearhead/assets/sass/block-extends/_related-posts.scss new file mode 100644 index 000000000..5e9637476 --- /dev/null +++ b/spearhead/assets/sass/block-extends/_related-posts.scss @@ -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; + } +} \ No newline at end of file diff --git a/spearhead/functions.php b/spearhead/functions.php index 5456fd0a7..ec91293be 100644 --- a/spearhead/functions.php +++ b/spearhead/functions.php @@ -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'; diff --git a/spearhead/inc/block-patterns.php b/spearhead/inc/block-patterns.php new file mode 100644 index 000000000..6b10c9017 --- /dev/null +++ b/spearhead/inc/block-patterns.php @@ -0,0 +1,39 @@ + __( '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' => '

Related

', + ) + ); +} diff --git a/spearhead/style-rtl.css b/spearhead/style-rtl.css index 6c9f2db9a..191fdc821 100644 --- a/spearhead/style-rtl.css +++ b/spearhead/style-rtl.css @@ -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; } \ No newline at end of file diff --git a/spearhead/style.css b/spearhead/style.css index 181770b5d..90a74613d 100644 --- a/spearhead/style.css +++ b/spearhead/style.css @@ -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 */ \ No newline at end of file diff --git a/spearhead/style.css.map b/spearhead/style.css.map index cd9e941dc..e7fdfa216 100644 --- a/spearhead/style.css.map +++ b/spearhead/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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" } \ No newline at end of file