From 11e1a295b6f0eeff08588e634f34e406ba9c5f12 Mon Sep 17 00:00:00 2001
From: Joe Dolson <joedolson@git.wordpress.org>
Date: Wed, 17 Nov 2021 17:18:09 +0000
Subject: [PATCH] Toolbar: Prevent adminbar from hiding in-page anchors.

Use scroll-padding-top to offset scroll position on in-page anchors when adminbar is active. Also adjusts existing scroll padding for core themes that implement it.

Props afercia, kingkero, audrasjb, dufresnesteven, thimalw, sabernhardt, costdev.
Fixes #46371.


git-svn-id: https://develop.svn.wordpress.org/trunk@52198 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-content/themes/twentyfourteen/rtl.css  |  4 ---
 .../themes/twentyfourteen/style.css           | 33 +------------------
 .../themes/twentyseventeen/style.css          |  3 ++
 src/wp-content/themes/twentysixteen/style.css |  4 +++
 src/wp-includes/css/admin-bar.css             |  1 +
 5 files changed, 9 insertions(+), 36 deletions(-)

diff --git a/src/wp-content/themes/twentyfourteen/rtl.css b/src/wp-content/themes/twentyfourteen/rtl.css
index 128f64fc3d..aec0583086 100644
--- a/src/wp-content/themes/twentyfourteen/rtl.css
+++ b/src/wp-content/themes/twentyfourteen/rtl.css
@@ -166,10 +166,6 @@ td {
 	padding-left: 7px;
 }
 
-.entry-content p span[id^="more-"] {
-	float: right;
-}
-
 
 /**
  * 6.5 Galleries
diff --git a/src/wp-content/themes/twentyfourteen/style.css b/src/wp-content/themes/twentyfourteen/style.css
index b09102a3e5..2b2ce48de4 100644
--- a/src/wp-content/themes/twentyfourteen/style.css
+++ b/src/wp-content/themes/twentyfourteen/style.css
@@ -95,6 +95,7 @@ html {
 	overflow-y: scroll;
 	-webkit-text-size-adjust: 100%;
 	-ms-text-size-adjust:     100%;
+	scroll-padding-top: calc( var(--wp-admin--admin-bar--height, 0px) + 48px );
 }
 
 body,
@@ -1304,10 +1305,6 @@ a.post-thumbnail:hover {
 	padding: 12px 10px 0;
 }
 
-.site-content .entry-content {
-	padding-top: 22px;
-}
-
 .page .entry-content {
 	padding-top: 0;
 }
@@ -1392,34 +1389,6 @@ a.post-thumbnail:hover {
 	white-space: nowrap;
 }
 
-.entry-content span[id^="more-"] {
-	display: block;
-	padding-top: 52px;
-	margin-top: -76px;
-}
-
-.admin-bar .entry-content span[id^="more-"] {
-	padding-top: 84px;
-	margin-top: -108px;
-}
-
-.entry-content span[id^="more-"] + blockquote,
-.entry-content span[id^="more-"] + div,
-.entry-content span[id^="more-"] + figure,
-.entry-content span[id^="more-"] + hr,
-.entry-content span[id^="more-"] + ol,
-.entry-content span[id^="more-"] + ul,
-.entry-content span[id^="more-"] + p,
-.entry-content span[id^="more-"] + pre {
-	margin-top: 24px;
-}
-
-.entry-content p span[id^="more-"] {
-	width: 1px;
-	height: 24px;
-	float: left;
-}
-
 /* Mediaelements */
 
 .hentry .mejs-container,
diff --git a/src/wp-content/themes/twentyseventeen/style.css b/src/wp-content/themes/twentyseventeen/style.css
index be1c214696..2109e25c27 100644
--- a/src/wp-content/themes/twentyseventeen/style.css
+++ b/src/wp-content/themes/twentyseventeen/style.css
@@ -3382,6 +3382,9 @@ p > object:only-child {
 }
 
 @media screen and (min-width: 48em) {
+	html {
+		scroll-padding-top: calc( var(--wp-admin--admin-bar--height, 0px) + 72px );
+	}
 
 	/* Typography */
 
diff --git a/src/wp-content/themes/twentysixteen/style.css b/src/wp-content/themes/twentysixteen/style.css
index a34e74d6cd..a2c3e17049 100644
--- a/src/wp-content/themes/twentysixteen/style.css
+++ b/src/wp-content/themes/twentysixteen/style.css
@@ -2774,6 +2774,10 @@ p > video {
  */
 
 @media screen and (min-width: 44.375em) {
+	html {
+		scroll-padding-top: calc( var(--wp-admin--admin-bar--height, 0px) + 21px );
+	}
+
 	body:not(.custom-background-image):before,
 	body:not(.custom-background-image):after {
 		background: inherit;
diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css
index 5720af7b41..a7a7ab52d4 100644
--- a/src/wp-includes/css/admin-bar.css
+++ b/src/wp-includes/css/admin-bar.css
@@ -1,5 +1,6 @@
 html {
 	--wp-admin--admin-bar--height: 32px;
+	scroll-padding-top: var(--wp-admin--admin-bar--height);
 }
 
 #wpadminbar * {