From 64a9b85f77a7d23c0476204ddc0977608ea3373b Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@git.wordpress.org>
Date: Sat, 11 Nov 2017 20:42:04 +0000
Subject: [PATCH] Theme Editor: Fix styling of child theme notice.

Props westonruter, melchoyce, ndiego.
See #24048.
Fixes #42491 for trunk.


git-svn-id: https://develop.svn.wordpress.org/trunk@42155 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/common.css   | 13 ++++++++++---
 src/wp-admin/theme-editor.php | 26 +++++++++++++-------------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 038c6c8280..203feaa0e4 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -3240,17 +3240,21 @@ img {
 	margin: 4px 0;
 }
 
-#templateside li a,
+#templateside li:not(.howto) a,
 .theme-editor-php .highlight {
 	display: block;
 	padding: 3px 0 3px 12px;
 	text-decoration: none;
 }
 
-#templateside li > a:first-of-type {
+#templateside li:not(.howto) > a:first-of-type {
 	padding-top: 0;
 }
 
+#templateside li.howto {
+	padding: 6px 12px 12px 12px;
+}
+
 .theme-editor-php .highlight {
 	margin: -3px 3px -3px -12px;
 }
@@ -3775,10 +3779,13 @@ img {
 		margin: 0;
 	}
 
-	#templateside li a {
+	#templateside li:not(.howto) a {
 		display: block;
 		padding: 5px;
 	}
+	#templateside li.howto {
+		padding: 12px;
+	}
 
 	#templateside .highlight {
 		padding: 5px;
diff --git a/src/wp-admin/theme-editor.php b/src/wp-admin/theme-editor.php
index e31748d2c5..22c201e01e 100644
--- a/src/wp-admin/theme-editor.php
+++ b/src/wp-admin/theme-editor.php
@@ -229,20 +229,20 @@ if ( $theme->errors() )
 ?>
 <div id="templateside">
 	<h2 id="theme-files-label"><?php _e( 'Theme Files' ); ?></h2>
-	<?php
-	if ( $has_templates || $theme->parent() ) :
-		if ( $theme->parent() ) {
-			/* translators: %s: link to edit parent theme */
-			echo '<p class="howto">' . sprintf( __( 'This child theme inherits templates from a parent theme, %s.' ),
-				sprintf( '<a href="%s">%s</a>',
-					self_admin_url( 'theme-editor.php?theme=' . urlencode( $theme->get_template() ) ),
-					$theme->parent()->display( 'Name' )
-				)
-			) . "</p>\n";
-		}
-	endif;
-	?>
 	<ul role="tree" aria-labelledby="theme-files-label">
+		<?php if ( ( $has_templates || $theme->parent() ) && $theme->parent() ) : ?>
+			<li class="howto">
+				<?php
+				/* translators: %s: link to edit parent theme */
+				echo sprintf( __( 'This child theme inherits templates from a parent theme, %s.' ),
+					sprintf( '<a href="%s">%s</a>',
+						self_admin_url( 'theme-editor.php?theme=' . urlencode( $theme->get_template() ) ),
+						$theme->parent()->display( 'Name' )
+					)
+				);
+				?>
+			</li>
+		<?php endif; ?>
 		<li role="treeitem" tabindex="-1" aria-expanded="true" aria-level="1" aria-posinset="1" aria-setsize="1">
 			<ul role="group">
 				<?php wp_print_theme_file_tree( wp_make_theme_file_tree( $allowed_files ) ); ?>