Full Site Editing / Varia, Maywood: Fix incorrect content positioning when the homepage title is hidden (#1406)

On WPCOM, Varia adds an option, which defaults to true, to hide the page title of the homepage.

* Add the `.hide-homepage-title` class to the block editor body as well.

* Enqueue a new stylesheet on the block editor that hides the homepage title and reposition the Post Content block.

* Restore the header's bottom padding on the front end's homepage when the page title is hidden.

maywood/sass/_full-site-editing.scss

@@ -13,6 +13,12 @@
 			}
 		}
 	}
+	&.home.page.hide-homepage-title .site-header.entry-content {
+		padding-bottom: $spacing_vertical;
+		@include media(mobile) {
+			padding-bottom: #{1.5 * $spacing_vertical};
+		}
+	}
 
 	.site-footer {
 		.wp-block-a8c-navigation-menu {

maywood/style-rtl.css

@@ -3393,6 +3393,37 @@ img#wpstats {
 	margin-bottom: 0;
 }
 
+/**
+ * Mailchimp Subscription Form
+ */
+.wp-block-jetpack-mailchimp p {
+	margin-top: 21.312px;
+	margin-bottom: 21.312px;
+}
+
+@media only screen and (min-width: 560px) {
+	.wp-block-jetpack-mailchimp p {
+		margin-top: 32px;
+		margin-bottom: 32px;
+	}
+}
+
+.wp-block-jetpack-mailchimp p:first-child {
+	margin-top: 0;
+}
+
+.wp-block-jetpack-mailchimp p:last-child {
+	margin-bottom: 0;
+}
+
+.wp-block-jetpack-mailchimp input[type=email] {
+	width: 100%;
+}
+
+#wp-block-jetpack-mailchimp_consent-text {
+	font-size: 0.83333rem;
+}
+
 /**
  * Child Theme Extra Styles
  */
@@ -3814,6 +3845,16 @@ p:not(.site-title) a:hover {
 	}
 }
 
+.fse-enabled.hide-homepage-title .site-header.entry-content {
+	padding-bottom: 32px;
+}
+
+@media only screen and (min-width: 560px) {
+	.fse-enabled.hide-homepage-title .site-header.entry-content {
+		padding-bottom: 48px;
+	}
+}
+
 @media only screen and (min-width: 640px) {
 	.fse-enabled .site-footer .wp-block-a8c-navigation-menu {
 		margin-bottom: 21.312px;

maywood/style.css

@@ -3422,6 +3422,37 @@ img#wpstats {
 	margin-bottom: 0;
 }
 
+/**
+ * Mailchimp Subscription Form
+ */
+.wp-block-jetpack-mailchimp p {
+	margin-top: 21.312px;
+	margin-bottom: 21.312px;
+}
+
+@media only screen and (min-width: 560px) {
+	.wp-block-jetpack-mailchimp p {
+		margin-top: 32px;
+		margin-bottom: 32px;
+	}
+}
+
+.wp-block-jetpack-mailchimp p:first-child {
+	margin-top: 0;
+}
+
+.wp-block-jetpack-mailchimp p:last-child {
+	margin-bottom: 0;
+}
+
+.wp-block-jetpack-mailchimp input[type=email] {
+	width: 100%;
+}
+
+#wp-block-jetpack-mailchimp_consent-text {
+	font-size: 0.83333rem;
+}
+
 /**
  * Child Theme Extra Styles
  */
@@ -3843,6 +3874,16 @@ p:not(.site-title) a:hover {
 	}
 }
 
+.fse-enabled.home.page.hide-homepage-title .site-header.entry-content {
+	padding-bottom: 32px;
+}
+
+@media only screen and (min-width: 560px) {
+	.fse-enabled.home.page.hide-homepage-title .site-header.entry-content {
+		padding-bottom: 48px;
+	}
+}
+
 @media only screen and (min-width: 640px) {
 	.fse-enabled .site-footer .wp-block-a8c-navigation-menu {
 		margin-bottom: 21.312px;

varia/inc/style-editor-wpcom.css

@@ -0,0 +1,7 @@
+.hide-homepage-title .editor-styles-wrapper .post-content__block .editor-post-title {
+	display: none;
+}
+
+.hide-homepage-title .editor-styles-wrapper .post-content__block {
+  margin-top: -16px;
+}

varia/inc/wpcom.php

@@ -105,3 +105,31 @@ function varia_wpcom_body_classes( $classes ) {
 	return $classes;
 }
 add_filter( 'body_class', 'varia_wpcom_body_classes' );
+
+/**
+ * Adds custom classes to the admin body classes.
+ *
+ * @param string $classes Classes for the body element.
+ * @return string
+ */
+function varia_wpcom_admin_body_classes( $classes ) {
+	global $post;
+	$is_block_editor_screen = ( function_exists( 'get_current_screen' ) && get_current_screen() && get_current_screen()->is_block_editor() );
+	$hide = get_theme_mod( 'hide_front_page_title', false );
+	$front_page = (int) get_option( 'page_on_front' );
+
+	if ( $is_block_editor_screen && $front_page === $post->ID && true === $hide ) {
+		$classes .= ' hide-homepage-title';
+	}
+
+	return $classes;
+}
+add_filter( 'admin_body_class', 'varia_wpcom_admin_body_classes' );
+
+/**
+ * Enqueue our WP.com styles for the block editor.
+ */
+function varia_wpcom_editor_scripts() {
+	wp_enqueue_style( 'varia-wpcom-editor-style', get_template_directory_uri() . '/inc/style-editor-wpcom.css', array(), '20190906' );
+}
+add_action( 'enqueue_block_editor_assets', 'varia_wpcom_editor_scripts' );