Merge pull request #4483 from Automattic/add/skatepark-title-divider

Skatepark: Add title divider

skatepark/assets/theme.css

@@ -233,6 +233,11 @@ p {
 	text-decoration: none;
 }
 
+.wp-block-post-title:not(.has-featured-image .wp-block-post-title) {
+	border-bottom: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--preset--color--primary);
+	padding-bottom: calc( var(--wp--custom--margin--vertical) * 2);
+}
+
 .wp-block-query-pagination .wp-block-query-pagination-numbers .current {
 	text-decoration-thickness: 0.07em;
 	text-underline-offset: 0.46ex;

skatepark/functions.php

@@ -57,3 +57,15 @@ require get_stylesheet_directory() . '/inc/block-patterns.php';
  * Block Styles.
  */
 require get_stylesheet_directory() . '/inc/block-styles.php';
+
+/**
+ * Add class to body if post/page has a featured image.
+ */
+function add_featured_image_class( $classes ) {    
+	global $post;
+	if ( isset ( $post->ID ) && get_the_post_thumbnail( $post->ID ) ) {
+		$classes[] = 'has-featured-image';
+	}
+	return $classes;
+}
+add_filter( 'body_class', 'add_featured_image_class' );

skatepark/sass/blocks/_post-title.scss

@@ -0,0 +1,4 @@
+.wp-block-post-title:not(.has-featured-image .wp-block-post-title) {
+	border-bottom: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--preset--color--primary);
+	padding-bottom: calc( var(--wp--custom--margin--vertical) * 2 );
+}

skatepark/sass/theme.scss

@@ -5,6 +5,7 @@
 @import "blocks/author";
 @import "blocks/buttons";
 @import "blocks/post-comments";
+@import "blocks/post-title";
 @import "blocks/query";
 @import "blocks/search";
 @import "blocks/separator";