diff --git a/.stylelintignore b/.stylelintignore
index cf59a35757b..f9fee8e99b0 100644
--- a/.stylelintignore
+++ b/.stylelintignore
@@ -1,5 +1,4 @@
 /assets/css/*.css
-/assets/css/src/admin-bar.css
 /bin
 /build
 /tests
diff --git a/assets/css/src/admin-bar.css b/assets/css/src/admin-bar.css
deleted file mode 100644
index 383b7e8c207..00000000000
--- a/assets/css/src/admin-bar.css
+++ /dev/null
@@ -1,1181 +0,0 @@
-/*
-This is forked from core's admin-bar.css from WP 5.3-alpha at 160fc055da156248277513dd5256fbcc66faa5a7.
-
-https://github.com/WordPress/wordpress-develop/blob/160fc055da156248277513dd5256fbcc66faa5a7/src/wp-includes/css/admin-bar.css
-
-- References to .hover have been replaced with :focus-within (which is not supported in IE11).
-- Universal selector properties have been removed which interferes with AMP shadow elements.
-*/
-
-#wpadminbar * {
-	height: auto;
-	width: auto;
-	margin: 0;
-	padding: 0;
-	/* Removed because interferes with amp-img>img: position: static; */
-	text-shadow: none;
-	text-transform: none;
-	letter-spacing: normal;
-	font-size: 13px;
-	font-weight: 400;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-	line-height: 2.46153846;
-	border-radius: 0;
-	box-sizing: content-box;
-	transition: none;
-	-webkit-font-smoothing: subpixel-antialiased; /* Prevent Safari from switching to standard antialiasing on hover */
-	-moz-osx-font-smoothing: auto; /* Prevent Firefox from inheriting from themes that use other values */
-}
-
-.rtl #wpadminbar * {
-	font-family: Tahoma, sans-serif;
-}
-
-html:lang(he-il) .rtl #wpadminbar * {
-	font-family: Arial, sans-serif;
-}
-
-#wpadminbar .ab-empty-item {
-	cursor: default;
-}
-
-#wpadminbar .ab-empty-item,
-#wpadminbar a.ab-item,
-#wpadminbar > #wp-toolbar span.ab-label,
-#wpadminbar > #wp-toolbar span.noticon {
-	color: #eee;
-}
-
-#wpadminbar #wp-admin-bar-site-name a.ab-item,
-#wpadminbar #wp-admin-bar-my-sites a.ab-item {
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-#wpadminbar ul li:before,
-#wpadminbar ul li:after {
-	content: normal;
-}
-
-#wpadminbar a,
-#wpadminbar a:hover,
-#wpadminbar a img,
-#wpadminbar a img:hover {
-	border: none;
-	text-decoration: none;
-	background: none;
-}
-
-#wpadminbar a:focus,
-#wpadminbar a:active,
-#wpadminbar input[type="text"],
-#wpadminbar input[type="password"],
-#wpadminbar input[type="number"],
-#wpadminbar input[type="search"],
-#wpadminbar input[type="email"],
-#wpadminbar input[type="url"],
-#wpadminbar select,
-#wpadminbar textarea,
-#wpadminbar div {
-	box-shadow: none;
-}
-
-#wpadminbar a:focus {
-	/* Inherits transparent outline only visible in Windows High Contrast mode */
-	outline-offset: -1px;
-}
-
-#wpadminbar {
-	direction: ltr;
-	color: #ccc;
-	font-size: 13px;
-	font-weight: 400;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-	line-height: 2.46153846;
-	height: 32px;
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	min-width: 600px; /* match the min-width of the body in wp-admin/css/common.css */
-	z-index: 99999;
-	background: #23282d;
-}
-
-#wpadminbar .ab-sub-wrapper,
-#wpadminbar ul,
-#wpadminbar ul li {
-	background: none;
-	clear: none;
-	list-style: none;
-	margin: 0;
-	padding: 0;
-	position: relative;
-	text-indent: 0;
-	z-index: 99999;
-}
-
-#wpadminbar ul#wp-admin-bar-root-default>li {
-	margin-right: 0;
-}
-
-#wpadminbar .quicklinks ul {
-	text-align: left;
-}
-
-#wpadminbar li {
-	float: left;
-}
-
-#wpadminbar .ab-empty-item {
-	outline: none;
-}
-
-#wpadminbar .quicklinks .ab-top-secondary > li {
-	float: right;
-}
-
-#wpadminbar .quicklinks a,
-#wpadminbar .quicklinks .ab-empty-item,
-#wpadminbar .shortlink-input {
-	height: 32px;
-	display: block;
-	padding: 0 10px;
-	margin: 0;
-}
-
-#wpadminbar .quicklinks > ul > li > a {
-	padding: 0 8px 0 7px;
-}
-
-#wpadminbar .menupop .ab-sub-wrapper,
-#wpadminbar .shortlink-input {
-	margin: 0;
-	padding: 0;
-	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
-	background: #32373c;
-	display: none;
-	position: absolute;
-	float: none;
-}
-
-#wpadminbar.ie7 .menupop .ab-sub-wrapper,
-#wpadminbar.ie7 .shortlink-input {
-	top: 32px;
-	left: 0;
-}
-
-#wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper {
-	min-width: 100%;
-}
-
-#wpadminbar .ab-top-secondary .menupop .ab-sub-wrapper {
-	right: 0;
-	left: auto;
-}
-
-#wpadminbar .ab-submenu {
-	padding: 6px 0;
-}
-
-#wpadminbar .selected .shortlink-input {
-	display: block;
-}
-
-#wpadminbar .quicklinks .menupop ul li {
-	float: none;
-}
-
-#wpadminbar .quicklinks .menupop ul li a strong {
-	font-weight: 600;
-}
-
-#wpadminbar .quicklinks .menupop ul li .ab-item,
-#wpadminbar .quicklinks .menupop ul li a strong,
-#wpadminbar .quicklinks .menupop:focus-within ul li .ab-item,
-#wpadminbar.nojs .quicklinks .menupop:hover ul li .ab-item,
-#wpadminbar .shortlink-input {
-	line-height: 2;
-	height: 26px;
-	white-space: nowrap;
-	min-width: 140px;
-}
-
-#wpadminbar .shortlink-input {
-	width: 200px;
-}
-
-#wpadminbar.nojs li:hover > .ab-sub-wrapper,
-#wpadminbar li:focus-within > .ab-sub-wrapper {
-	display: block;
-}
-
-#wpadminbar .menupop li:hover > .ab-sub-wrapper,
-#wpadminbar .menupop li:focus-within > .ab-sub-wrapper {
-	margin-left: 100%;
-	margin-top: -32px;
-}
-
-#wpadminbar .ab-top-secondary .menupop li:hover > .ab-sub-wrapper,
-#wpadminbar .ab-top-secondary .menupop li:focus-within > .ab-sub-wrapper {
-	margin-left: 0;
-	left: inherit;
-	right: 100%;
-}
-
-#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus,
-#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
-#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item,
-#wpadminbar .ab-top-menu > li:focus-within > .ab-item {
-	background: #32373c;
-	color: #00b9eb;
-}
-#wpadminbar .ab-top-menu > li:focus-within > .ab-item {
-	background: #32373c;
-	color: #00b9eb;
-}
-
-#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label,
-#wpadminbar > #wp-toolbar li:focus-within span.ab-label,
-#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label {
-	color: #00b9eb;
-}
-
-#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default .ab-icon,
-#wpadminbar .ab-icon,
-#wpadminbar .ab-item:before,
-.wp-admin-bar-arrow {
-	position: relative;
-	float: left;
-	font: normal 20px/1 dashicons;
-	speak: none;
-	padding: 4px 0;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	background-image: none !important;
-	margin-right: 6px;
-}
-
-#wpadminbar .ab-icon:before,
-#wpadminbar .ab-item:before,
-#wpadminbar #adminbarsearch:before {
-	color: #a0a5aa;
-	color: rgba(240, 245, 250, 0.6);
-}
-
-#wpadminbar .ab-icon:before,
-#wpadminbar .ab-item:before,
-#wpadminbar #adminbarsearch:before {
-	position: relative;
-	transition: all .1s ease-in-out;
-}
-
-#wpadminbar .ab-label {
-	display: inline-block;
-	height: 32px;
-}
-
-#wpadminbar .ab-submenu .ab-item {
-	color: #b4b9be;
-	color: rgba(240, 245, 250, 0.7);
-}
-
-#wpadminbar .quicklinks .menupop ul li a,
-#wpadminbar .quicklinks .menupop ul li a strong,
-#wpadminbar .quicklinks .menupop:focus-within ul li a,
-#wpadminbar.nojs .quicklinks .menupop:hover ul li a {
-	color: #b4b9be;
-	color: rgba(240, 245, 250, 0.7);
-}
-
-#wpadminbar .quicklinks .menupop ul li a:hover,
-#wpadminbar .quicklinks .menupop ul li a:focus,
-#wpadminbar .quicklinks .menupop ul li a:hover strong,
-#wpadminbar .quicklinks .menupop ul li a:focus strong,
-#wpadminbar .quicklinks .ab-sub-wrapper .menupop:focus-within > a,
-#wpadminbar .quicklinks .menupop:focus-within ul li a:hover,
-#wpadminbar .quicklinks .menupop:focus-within ul li a:focus,
-#wpadminbar .quicklinks .menupop:focus-within ul li div[tabindex]:hover,
-#wpadminbar .quicklinks .menupop:focus-within ul li div[tabindex]:focus,
-#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover,
-#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,
-#wpadminbar li:hover .ab-icon:before,
-#wpadminbar li:hover .ab-item:before,
-#wpadminbar li a:focus .ab-icon:before,
-#wpadminbar li .ab-item:focus:before,
-#wpadminbar li .ab-item:focus .ab-icon:before,
-#wpadminbar li:focus-within .ab-icon:before,
-#wpadminbar li:focus-within .ab-item:before,
-#wpadminbar li:hover #adminbarsearch:before,
-#wpadminbar li #adminbarsearch.adminbar-focused:before {
-	color: #00b9eb;
-}
-
-#wpadminbar.mobile .quicklinks .ab-icon:before,
-#wpadminbar.mobile .quicklinks .ab-item:before {
-	color: #b4b9be;
-}
-
-#wpadminbar.mobile .quicklinks :focus-within .ab-icon:before,
-#wpadminbar.mobile .quicklinks :focus-within .ab-item:before {
-	color: #00b9eb;
-}
-
-#wpadminbar .menupop .menupop > .ab-item .wp-admin-bar-arrow:before,
-#wpadminbar .ab-top-secondary .menupop .menupop > .ab-item:before {
-	position: absolute;
-	font: normal 17px/1 dashicons;
-	speak: none;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-}
-
-#wpadminbar .menupop .menupop > .ab-item {
-	display: block;
-	padding-right: 2em;
-}
-
-#wpadminbar .menupop .menupop > .ab-item .wp-admin-bar-arrow:before {
-	top: 1px;
-	right: 10px;
-	padding: 4px 0;
-	content: "\f139";
-	color: inherit;
-}
-
-#wpadminbar .ab-top-secondary .menupop .menupop > .ab-item {
-	padding-left: 2em;
-	padding-right: 1em;
-}
-
-#wpadminbar .ab-top-secondary .menupop .menupop > .ab-item .wp-admin-bar-arrow:before {
-	top: 1px;
-	left: 6px;
-	content: "\f141";
-}
-
-#wpadminbar .quicklinks .menupop ul.ab-sub-secondary {
-	display: block;
-	position: relative;
-	right: auto;
-	margin: 0;
-	box-shadow: none;
-}
-
-#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
-#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
-	background: #464b50;
-}
-
-#wpadminbar .quicklinks .menupop .ab-sub-secondary > li > a:hover,
-#wpadminbar .quicklinks .menupop .ab-sub-secondary > li .ab-item:focus a {
-	color: #00b9eb;
-}
-
-#wpadminbar .quicklinks a span#ab-updates {
-	background: #eee;
-	color: #32373c;
-	display: inline;
-	padding: 2px 5px;
-	font-size: 10px;
-	font-weight: 600;
-	border-radius: 10px;
-}
-
-#wpadminbar .quicklinks a:hover span#ab-updates {
-	background: #fff;
-	color: #000;
-}
-
-#wpadminbar .ab-top-secondary {
-	float: right;
-}
-
-#wpadminbar ul li:last-child,
-#wpadminbar ul li:last-child .ab-item {
-	box-shadow: none;
-}
-
-/**
- * Recovery Mode
- */
-#wpadminbar #wp-admin-bar-recovery-mode {
-	color: #fff;
-	background-color: #ca4a1f;
-}
-
-#wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode:focus-within >.ab-item,
-#wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus,
-#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item,
-#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus {
-	color: #fff;
-	background-color: #c0461e;
-}
-
-/**
- * My Account
- */
-#wp-admin-bar-my-account > ul {
-	min-width: 198px;
-}
-
-#wp-admin-bar-my-account > .ab-item:before {
-	content: "\f110";
-	top: 2px;
-	float: right;
-	margin-left: 6px;
-	margin-right: 0;
-}
-
-#wp-admin-bar-my-account.with-avatar > .ab-item:before {
-	display: none;
-	content: none;
-}
-
-#wp-admin-bar-my-account.with-avatar > ul {
-	min-width: 270px;
-}
-
-#wpadminbar.ie8 #wp-admin-bar-my-account.with-avatar .ab-item {
-	white-space: nowrap;
-}
-
-#wpadminbar #wp-admin-bar-user-actions > li {
-	margin-left: 16px;
-	margin-right: 16px;
-}
-
-#wpadminbar #wp-admin-bar-user-actions.ab-submenu {
-	padding: 6px 0 12px;
-}
-
-#wpadminbar #wp-admin-bar-my-account.with-avatar #wp-admin-bar-user-actions > li {
-	margin-left: 88px;
-}
-
-#wpadminbar #wp-admin-bar-user-info {
-	margin-top: 6px;
-	margin-bottom: 15px;
-	height: auto;
-	background: none;
-}
-
-#wp-admin-bar-user-info .avatar {
-	position: absolute;
-	left: -72px;
-	top: 4px;
-	width: 64px;
-	height: 64px;
-}
-
-#wpadminbar #wp-admin-bar-user-info a {
-	background: none;
-	height: auto;
-}
-
-#wpadminbar #wp-admin-bar-user-info span {
-	background: none;
-	padding: 0;
-	height: 18px;
-}
-
-#wpadminbar #wp-admin-bar-user-info .display-name,
-#wpadminbar #wp-admin-bar-user-info .username {
-	display: block;
-}
-
-#wpadminbar #wp-admin-bar-user-info .username {
-	color: #a0a5aa;
-	font-size: 11px;
-}
-
-#wpadminbar #wp-admin-bar-my-account.with-avatar > .ab-empty-item img,
-#wpadminbar #wp-admin-bar-my-account.with-avatar > a img {
-	width: 16px; /* Was auto. */
-	height: 16px;
-	padding: 0;
-	border: 1px solid #82878c;
-	background: #eee;
-	line-height: 1.84615384;
-	vertical-align: middle;
-	margin: -4px 0 0 6px;
-	float: none;
-	display: inline-block; /* Was inline. */
-}
-
-#wpadminbar.ie8 #wp-admin-bar-my-account.with-avatar > .ab-empty-item img,
-#wpadminbar.ie8 #wp-admin-bar-my-account.with-avatar > a img {
-	width: 16px; /* Was auto. */
-}
-
-/**
- * WP Logo
- */
-#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon {
-	width: 15px;
-	height: 20px;
-	margin-right: 0;
-	padding: 6px 0 5px;
-}
-
-#wpadminbar #wp-admin-bar-wp-logo > .ab-item {
-	padding: 0 7px;
-}
-
-#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
-	content: "\f120";
-	top: 2px;
-}
-
-/*
- * My Sites & Site Title
- */
-#wpadminbar .quicklinks li .blavatar {
-	float: left;
-	font: normal 16px/1 dashicons !important;
-	speak: none;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	color: #eee;
-}
-
-#wpadminbar .quicklinks li a:hover .blavatar,
-#wpadminbar .quicklinks li a:focus .blavatar,
-#wpadminbar .quicklinks .ab-sub-wrapper .menupop:focus-within > a .blavatar {
-	color: #00b9eb;
-}
-
-#wpadminbar .quicklinks li .blavatar:before {
-	content: "\f120";
-	height: 16px;
-	width: 16px;
-	display: inline-block;
-	margin: 6px 8px 0 -2px;
-}
-
-#wpadminbar #wp-admin-bar-appearance {
-	margin-top: -12px;
-}
-
-#wpadminbar #wp-admin-bar-my-sites > .ab-item:before,
-#wpadminbar #wp-admin-bar-site-name > .ab-item:before {
-	content: "\f541";
-	top: 2px;
-}
-
-#wpadminbar #wp-admin-bar-customize > .ab-item:before {
-	content: "\f540";
-	top: 2px;
-}
-
-
-#wpadminbar #wp-admin-bar-edit > .ab-item:before {
-	content: "\f464";
-	top: 2px;
-}
-
-#wpadminbar #wp-admin-bar-site-name > .ab-item:before {
-	content: "\f226";
-}
-
-.wp-admin #wpadminbar #wp-admin-bar-site-name > .ab-item:before {
-	content: "\f102";
-}
-
-
-
-/**
- * Comments
- */
-#wpadminbar #wp-admin-bar-comments .ab-icon {
-	margin-right: 6px;
-}
-
-#wpadminbar #wp-admin-bar-comments .ab-icon:before {
-	content: "\f101";
-	top: 3px;
-}
-
-#wpadminbar #wp-admin-bar-comments .count-0 {
-	opacity: .5;
-}
-
-/**
- * New Content
- */
-#wpadminbar #wp-admin-bar-new-content .ab-icon:before {
-	content: "\f132";
-	top: 4px;
-}
-
-/**
- * Updates
- */
-#wpadminbar #wp-admin-bar-updates .ab-icon:before {
-	content: "\f463";
-	top: 2px;
-}
-
-/**
- * Search
- */
-#wpadminbar.ie8 #wp-admin-bar-search {
-	display: block;
-	min-width: 32px;
-}
-#wpadminbar #wp-admin-bar-search .ab-item {
-	padding: 0;
-	background: transparent;
-}
-
-#wpadminbar #adminbarsearch {
-	position: relative;
-	height: 32px;
-	padding: 0 2px;
-	z-index: 1;
-}
-
-#wpadminbar #adminbarsearch:before {
-	position: absolute;
-	top: 6px;
-	left: 5px;
-	z-index: 20;
-	font: normal 20px/1 dashicons !important;
-	content: "\f179";
-	speak: none;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-}
-
-/* The admin bar search field needs to reset many styles that might be inherited from the active Theme CSS. See ticket #40313. */
-#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input {
-	display: inline-block;
-	float: none;
-	position: relative;
-	z-index: 30;
-	font-size: 13px;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-	line-height: 1.84615384;
-	text-indent: 0;
-	height: 24px;
-	width: 24px;
-	max-width: none;
-	padding: 0 3px 0 24px;
-	margin: 0;
-	color: #ccc;
-	background-color: rgba(255, 255, 255, 0);
-	border: none;
-	outline: none;
-	cursor: pointer;
-	box-shadow: none;
-	box-sizing: border-box;
-	transition-duration: 400ms;
-	transition-property: width, background;
-	transition-timing-function: ease;
-}
-
-#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
-	z-index: 10;
-	color: #000;
-	width: 200px;
-	background-color: rgba(255, 255, 255, 0.9);
-	cursor: text;
-	border: 0;
-}
-
-#wpadminbar.ie7 > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input {
-	margin-top: 3px;
-	width: 120px;
-}
-
-#wpadminbar.ie8 > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input {
-	/* IE8 z-index bug with transparent / empty elements - fill in with an encoded transparent GIF */
-	background: transparent 0 0 repeat scroll url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
-}
-
-/* IE8 doesn't redraw the pseudo elements unless you make a change to the content */
-#wpadminbar.ie8 #adminbarsearch.adminbar-focused:before {
-	content: "\f179 "; /* extra space */
-}
-
-#wpadminbar.ie8 > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
-	background: #fff;
-	z-index: -1;
-}
-
-#wpadminbar #adminbarsearch .adminbar-button {
-	display: none;
-}
-
-/**
- * Customize support classes
- */
-.no-customize-support .hide-if-no-customize,
-.customize-support .hide-if-customize,
-.no-customize-support #wpadminbar .hide-if-no-customize,
-.no-customize-support.wp-core-ui .hide-if-no-customize,
-.no-customize-support .wp-core-ui .hide-if-no-customize,
-.customize-support #wpadminbar .hide-if-customize,
-.customize-support.wp-core-ui .hide-if-customize,
-.customize-support .wp-core-ui .hide-if-customize {
-	display: none;
-}
-
-/* Skip link */
-#wpadminbar .screen-reader-text,
-#wpadminbar .screen-reader-text span {
-	border: 0;
-	clip: rect(1px, 1px, 1px, 1px);
-	-webkit-clip-path: inset(50%);
-	clip-path: inset(50%);
-	height: 1px;
-	margin: -1px;
-	overflow: hidden;
-	padding: 0;
-	position: absolute;
-	width: 1px;
-	word-wrap: normal !important;
-}
-
-#wpadminbar .screen-reader-shortcut {
-	position: absolute;
-	top: -1000em;
-}
-
-#wpadminbar .screen-reader-shortcut:focus {
-	left: 6px;
-	top: 7px;
-	height: auto;
-	width: auto;
-	display: block;
-	font-size: 14px;
-	font-weight: 600;
-	padding: 15px 23px 14px;
-	background: #f1f1f1;
-	color: #0073aa;
-	z-index: 100000;
-	line-height: normal;
-	text-decoration: none;
-	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
-}
-
-/**
- * IE 6-targeted rules
- */
-* html #wpadminbar {
-	overflow: hidden;
-	position: absolute;
-}
-
-* html #wpadminbar .quicklinks ul li a {
-	float: left;
-}
-
-* html #wpadminbar .menupop a span {
-	background-image: none;
-}
-
-/* No @font-face support */
-.no-font-face #wpadminbar ul.ab-top-menu > li > a.ab-item {
-	display: block;
-	width: 45px;
-	text-align: center;
-	overflow: hidden;
-	margin: 0 3px;
-}
-
-.no-font-face #wpadminbar #wp-admin-bar-my-sites > .ab-item,
-.no-font-face #wpadminbar #wp-admin-bar-site-name > .ab-item,
-.no-font-face #wpadminbar #wp-admin-bar-edit > .ab-item {
-	text-indent: 0;
-}
-
-.no-font-face #wpadminbar .ab-icon,
-.no-font-face #wpadminbar .ab-icon:before,
-.no-font-face #wpadminbar a.ab-item:before,
-.no-font-face #wpadminbar #wp-admin-bar-wp-logo > .ab-item {
-	display: none !important;
-}
-
-.no-font-face #wpadminbar ul.ab-top-menu > li > a > span.ab-label {
-	display: inline;
-}
-
-.no-font-face #wpadminbar #wp-admin-bar-menu-toggle span.ab-icon {
-	display: inline !important;
-}
-
-.no-font-face #wpadminbar #wp-admin-bar-menu-toggle span.ab-icon:before {
-	content: "Menu";
-	font: 14px/45px sans-serif !important;
-	display: inline-block !important;
-	color: #fff;
-}
-
-.no-font-face #wpadminbar #wp-admin-bar-site-name a.ab-item {
-	color: #fff;
-}
-/* End no @font-face */
-
-@media screen and (max-width: 782px) {
-	/* Toolbar Touchification*/
-	html #wpadminbar {
-		height: 46px;
-		min-width: 240px; /* match the min-width of the body in wp-admin/css/common.css */
-	}
-
-	#wpadminbar * {
-		font-size: 14px;
-		font-weight: 400;
-		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-		line-height: 2.28571428;
-	}
-
-	#wpadminbar .quicklinks > ul > li > a,
-	#wpadminbar .quicklinks .ab-empty-item {
-		padding: 0;
-		height: 46px;
-		line-height: 3.28571428;
-		width: auto;
-	}
-
-	#wpadminbar .ab-icon {
-		font: 40px/1 dashicons !important;
-		margin: 0;
-		padding: 0;
-		width: 52px;
-		height: 46px;
-		text-align: center;
-	}
-
-	#wpadminbar .ab-icon:before {
-		text-align: center;
-	}
-
-	#wpadminbar .ab-submenu {
-		padding: 0;
-	}
-
-	#wpadminbar #wp-admin-bar-site-name a.ab-item,
-	#wpadminbar #wp-admin-bar-my-sites a.ab-item,
-	#wpadminbar #wp-admin-bar-my-account a.ab-item {
-		text-overflow: clip;
-	}
-
-	#wpadminbar .quicklinks .menupop ul li .ab-item,
-	#wpadminbar .quicklinks .menupop ul li a strong,
-	#wpadminbar .quicklinks .menupop:focus-within ul li .ab-item,
-	#wpadminbar.nojs .quicklinks .menupop:hover ul li .ab-item,
-	#wpadminbar .shortlink-input {
-		line-height: 1.6;
-	}
-
-	#wpadminbar .ab-label {
-		display: none;
-	}
-
-	#wpadminbar .menupop li:hover > .ab-sub-wrapper,
-	#wpadminbar .menupop li:focus-within > .ab-sub-wrapper {
-		margin-top: -46px;
-	}
-
-	#wpadminbar .ab-top-menu .menupop .ab-sub-wrapper .menupop > .ab-item {
-		padding-right: 30px;
-	}
-
-	#wpadminbar .menupop .menupop > .ab-item:before {
-		top: 10px;
-		right: 6px;
-	}
-
-	#wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper .ab-item {
-		font-size: 16px;
-		padding: 8px 16px;
-	}
-
-	#wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper a:empty {
-		display: none;
-	}
-
-	/* WP logo */
-	#wpadminbar #wp-admin-bar-wp-logo > .ab-item {
-		padding: 0;
-	}
-
-	#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon {
-		padding: 0;
-		width: 52px;
-		height: 46px;
-		text-align: center;
-		vertical-align: top;
-	}
-
-	#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
-		font: 28px/1 dashicons !important;
-		top: -3px;
-	}
-
-	#wpadminbar .ab-icon,
-	#wpadminbar .ab-item:before {
-		padding: 0;
-	}
-
-	/* My Sites and "Site Title" menu */
-	#wpadminbar #wp-admin-bar-my-sites > .ab-item,
-	#wpadminbar #wp-admin-bar-site-name > .ab-item,
-	#wpadminbar #wp-admin-bar-customize > .ab-item,
-	#wpadminbar #wp-admin-bar-edit > .ab-item,
-	#wpadminbar #wp-admin-bar-my-account > .ab-item {
-		text-indent: 100%;
-		white-space: nowrap;
-		overflow: hidden;
-		width: 52px;
-		padding: 0;
-		color: #a0a5aa; /* @todo not needed? this text is hidden */
-		position: relative;
-	}
-
-	#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default .ab-icon,
-	#wpadminbar .ab-icon,
-	#wpadminbar .ab-item:before {
-		padding: 0;
-		margin-right: 0;
-	}
-
-	#wpadminbar #wp-admin-bar-edit > .ab-item:before,
-	#wpadminbar #wp-admin-bar-my-sites > .ab-item:before,
-	#wpadminbar #wp-admin-bar-site-name > .ab-item:before,
-	#wpadminbar #wp-admin-bar-customize > .ab-item:before,
-	#wpadminbar #wp-admin-bar-my-account > .ab-item:before {
-		display: block;
-		text-indent: 0;
-		font: normal 32px/1 dashicons;
-		speak: none;
-		top: 7px;
-		width: 52px;
-		text-align: center;
-		-webkit-font-smoothing: antialiased;
-		-moz-osx-font-smoothing: grayscale;
-	}
-
-	#wpadminbar #wp-admin-bar-appearance {
-		margin-top: 0;
-	}
-
-	#wpadminbar .quicklinks li .blavatar:before {
-		display: none;
-	}
-
-	/* Search */
-	#wpadminbar #wp-admin-bar-search {
-		display: none;
-	}
-
-	/* New Content */
-	#wpadminbar #wp-admin-bar-new-content .ab-icon:before {
-		top: 0;
-		line-height: 1.33333333;
-		height: 46px !important;
-		text-align: center;
-		width: 52px;
-		display: block;
-	}
-
-	/* Updates */
-	#wpadminbar #wp-admin-bar-updates {
-		text-align: center;
-	}
-
-	#wpadminbar #wp-admin-bar-updates .ab-icon:before {
-		top: 3px;
-	}
-
-	/* Comments */
-	#wpadminbar #wp-admin-bar-comments .ab-icon {
-		margin: 0;
-	}
-
-	#wpadminbar #wp-admin-bar-comments .ab-icon:before {
-		display: block;
-		font-size: 34px;
-		height: 46px;
-		line-height: 1.38235294;
-		top: 0;
-	}
-
-	/* My Account */
-	#wpadminbar #wp-admin-bar-my-account > a {
-		position: relative;
-		white-space: nowrap;
-		text-indent: 150%; /* More than 100% indention is needed since this element has padding */
-		width: 28px;
-		padding: 0 10px;
-		overflow: hidden; /* Prevent link text from forcing horizontal scrolling on mobile */
-	}
-
-	#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
-		position: absolute;
-		top: 13px;
-		right: 10px;
-		width: 26px;
-		height: 26px;
-	}
-
-	#wpadminbar #wp-admin-bar-user-actions.ab-submenu {
-		padding: 0;
-	}
-
-	#wpadminbar #wp-admin-bar-user-actions.ab-submenu img.avatar {
-		display: none;
-	}
-
-	#wpadminbar #wp-admin-bar-my-account.with-avatar #wp-admin-bar-user-actions > li {
-		margin: 0;
-	}
-
-	#wpadminbar #wp-admin-bar-user-info .display-name {
-		height: auto;
-		font-size: 16px;
-		line-height: 1.5;
-		color: #eee;
-	}
-
-	#wpadminbar #wp-admin-bar-user-info a {
-		padding-top: 4px;
-	}
-
-	#wpadminbar #wp-admin-bar-user-info .username {
-		line-height: 0.8 !important;
-		margin-bottom: -2px;
-	}
-
-	/* Show only default top level items */
-	#wp-toolbar > ul > li {
-		display: none;
-	}
-
-	#wpadminbar li#wp-admin-bar-menu-toggle,
-	#wpadminbar li#wp-admin-bar-wp-logo,
-	#wpadminbar li#wp-admin-bar-my-sites,
-	#wpadminbar li#wp-admin-bar-updates,
-	#wpadminbar li#wp-admin-bar-site-name,
-	#wpadminbar li#wp-admin-bar-customize,
-	#wpadminbar li#wp-admin-bar-new-content,
-	#wpadminbar li#wp-admin-bar-edit,
-	#wpadminbar li#wp-admin-bar-comments,
-	#wpadminbar li#wp-admin-bar-my-account {
-		display: block;
-	}
-
-	/* Allow dropdown list items to appear normally */
-	#wpadminbar li:hover ul li,
-	#wpadminbar li:focus-within ul li,
-	#wpadminbar li:hover ul li:hover ul li {
-		display: list-item;
-	}
-
-	/* Override default min-width so dropdown lists aren't stretched
-		to 100% viewport width at responsive sizes. */
-	#wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper {
-		min-width: -webkit-fit-content;
-		min-width: -moz-fit-content;
-		min-width: fit-content;
-	}
-
-	#wpadminbar ul#wp-admin-bar-root-default > li {
-		margin-right: 0;
-	}
-
-	/* Experimental fix for touch toolbar dropdown positioning */
-	#wpadminbar .ab-top-menu,
-	#wpadminbar .ab-top-secondary,
-	#wpadminbar #wp-admin-bar-wp-logo,
-	#wpadminbar #wp-admin-bar-my-sites,
-	#wpadminbar #wp-admin-bar-site-name,
-	#wpadminbar #wp-admin-bar-updates,
-	#wpadminbar #wp-admin-bar-comments,
-	#wpadminbar #wp-admin-bar-new-content,
-	#wpadminbar #wp-admin-bar-edit,
-	#wpadminbar #wp-admin-bar-my-account {
-		position: static;
-	}
-
-	#wpadminbar #wp-admin-bar-my-account {
-		float: right;
-	}
-
-	.network-admin #wpadminbar ul#wp-admin-bar-top-secondary > li#wp-admin-bar-my-account {
-		margin-right: 0;
-	}
-
-	/* Realign arrows on taller responsive submenus */
-
-	#wpadminbar .ab-top-secondary .menupop .menupop > .ab-item:before {
-		top: 10px;
-		left: 0;
-	}
-}
-
-/* Smartphone */
-@media screen and (max-width: 600px) {
-	/* Removed: #wpadminbar { position: absolute; } */
-
-	#wp-responsive-overlay {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		z-index: 400;
-	}
-
-	#wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper {
-		width: 100%;
-		left: 0;
-	}
-
-	#wpadminbar .menupop .menupop > .ab-item:before {
-		display: none;
-	}
-
-	#wpadminbar #wp-admin-bar-wp-logo.menupop .ab-sub-wrapper {
-		margin-left: 0;
-	}
-
-	#wpadminbar .ab-top-menu > .menupop li > .ab-sub-wrapper {
-		margin: 0;
-		width: 100%;
-		top: auto;
-		left: auto;
-		position: relative;
-	}
-
-	#wpadminbar .ab-top-menu > .menupop li > .ab-sub-wrapper .ab-item {
-		font-size: 16px;
-		padding: 6px 15px 19px 30px;
-	}
-
-	#wpadminbar li:hover ul li ul li {
-		display: list-item;
-	}
-
-	#wpadminbar li#wp-admin-bar-wp-logo,
-	#wpadminbar li#wp-admin-bar-updates {
-		display: none;
-	}
-
-	/* Make submenus full-width at this size */
-
-	#wpadminbar .ab-top-menu > .menupop li > .ab-sub-wrapper {
-		position: static;
-		box-shadow: none;
-	}
-}
-
-/* Very narrow screens */
-@media screen and (max-width: 400px) {
-	#wpadminbar li#wp-admin-bar-comments {
-		display: none;
-	}
-}
diff --git a/includes/amp-helper-functions.php b/includes/amp-helper-functions.php
index d5f53c694f4..a8e0eec54aa 100644
--- a/includes/amp-helper-functions.php
+++ b/includes/amp-helper-functions.php
@@ -815,6 +815,42 @@ function amp_get_content_embed_handlers( $post = null ) {
 	);
 }
 
+/**
+ * Determine whether AMP dev mode is enabled.
+ *
+ * When enabled, the <html> element will get the data-ampdevmode attribute and the plugin will add the same attribute
+ * to elements associated with the admin bar and other elements that are provided by the `amp_dev_mode_element_xpaths`
+ * filter.
+ *
+ * @since 1.3
+ *
+ * @return bool Whether AMP dev mode is enabled.
+ */
+function amp_is_dev_mode() {
+
+	/**
+	 * Filters whether AMP mode is enabled.
+	 *
+	 * When enabled, the data-ampdevmode attribute will be added to the document element and it will allow the
+	 * attributes to be added to the admin bar. It will also add the attribute to all elements which match the
+	 * queries for the expressions returned by the 'amp_dev_mode_element_xpaths' filter.
+	 *
+	 * @since 1.3
+	 * @param bool Whether AMP dev mode is enabled.
+	 */
+	return apply_filters(
+		'amp_dev_mode_enabled',
+		(
+			// For the few sites that forcibly show the admin bar even when the user is logged out, only enable dev
+			// mode if the user is actually logged in. This prevents the dev mode from being served to crawlers
+			// when they index the AMP version.
+			( is_admin_bar_showing() && is_user_logged_in() )
+			||
+			is_customize_preview()
+		)
+	);
+}
+
 /**
  * Get content sanitizers.
  *
@@ -898,6 +934,33 @@ function amp_get_content_sanitizers( $post = null ) {
 	 */
 	$sanitizers = apply_filters( 'amp_content_sanitizers', $sanitizers, $post );
 
+	if ( amp_is_dev_mode() ) {
+		/**
+		 * Filters the XPath queries for elements that should be enabled for dev mode.
+		 *
+		 * By supplying XPath queries to this filter, the data-ampdevmode attribute will automatically be added to the
+		 * root HTML element as well as to any elements that match the expressions. The attribute is added to the
+		 * elements prior to running any of the sanitizers.
+		 *
+		 * @since 1.3
+		 * @param string[] XPath element queries. Context is the root element.
+		 */
+		$dev_mode_xpaths = (array) apply_filters( 'amp_dev_mode_element_xpaths', [] );
+		if ( is_admin_bar_showing() ) {
+			$dev_mode_xpaths[] = '//*[ @id = "wpadminbar" ]';
+			$dev_mode_xpaths[] = '//*[ @id = "wpadminbar" ]//*';
+			$dev_mode_xpaths[] = '//style[ @id = "admin-bar-inline-css" ]';
+		}
+		$sanitizers = array_merge(
+			[
+				'AMP_Dev_Mode_Sanitizer' => [
+					'element_xpaths' => $dev_mode_xpaths,
+				],
+			],
+			$sanitizers
+		);
+	}
+
 	// Force style sanitizer and whitelist sanitizer to be at end.
 	foreach ( [ 'AMP_Style_Sanitizer', 'AMP_Tag_And_Attribute_Sanitizer' ] as $class_name ) {
 		if ( isset( $sanitizers[ $class_name ] ) ) {
diff --git a/includes/class-amp-autoloader.php b/includes/class-amp-autoloader.php
index 912d6ee61d2..8dc0fa22c30 100644
--- a/includes/class-amp-autoloader.php
+++ b/includes/class-amp-autoloader.php
@@ -71,6 +71,7 @@ class AMP_Autoloader {
 		'AMP_Base_Sanitizer'                 => 'includes/sanitizers/class-amp-base-sanitizer',
 		'AMP_Blacklist_Sanitizer'            => 'includes/sanitizers/class-amp-blacklist-sanitizer',
 		'AMP_Block_Sanitizer'                => 'includes/sanitizers/class-amp-block-sanitizer',
+		'AMP_Dev_Mode_Sanitizer'             => 'includes/sanitizers/class-amp-dev-mode-sanitizer',
 		'AMP_Gallery_Block_Sanitizer'        => 'includes/sanitizers/class-amp-gallery-block-sanitizer',
 		'AMP_Iframe_Sanitizer'               => 'includes/sanitizers/class-amp-iframe-sanitizer',
 		'AMP_Img_Sanitizer'                  => 'includes/sanitizers/class-amp-img-sanitizer',
diff --git a/includes/class-amp-story-post-type.php b/includes/class-amp-story-post-type.php
index b647370c641..8d2030dcbc6 100644
--- a/includes/class-amp-story-post-type.php
+++ b/includes/class-amp-story-post-type.php
@@ -233,6 +233,17 @@ function() {
 		add_action( 'amp_story_head', 'wp_site_icon', 99 );
 		add_action( 'amp_story_head', 'wp_oembed_add_discovery_links' );
 
+		// Disable admin bar from even trying to be output, since wp_head and wp_footer hooks are not on the template.
+		add_filter(
+			'show_admin_bar',
+			static function( $show ) {
+				if ( is_singular( self::POST_TYPE_SLUG ) ) {
+					$show = false;
+				}
+				return $show;
+			}
+		);
+
 		// Remove unnecessary settings.
 		add_filter( 'block_editor_settings', [ __CLASS__, 'filter_block_editor_settings' ], 10, 2 );
 
diff --git a/includes/class-amp-theme-support.php b/includes/class-amp-theme-support.php
index 799a6ec4354..8a22c420d2c 100644
--- a/includes/class-amp-theme-support.php
+++ b/includes/class-amp-theme-support.php
@@ -1346,27 +1346,10 @@ public static function filter_cancel_comment_reply_link( $formatted_link, $link,
 	 * @since 1.0
 	 */
 	public static function init_admin_bar() {
+		add_filter( 'style_loader_tag', [ __CLASS__, 'filter_admin_bar_style_loader_tag' ], 10, 2 );
+		add_filter( 'script_loader_tag', [ __CLASS__, 'filter_admin_bar_script_loader_tag' ], 10, 2 );
 
-		// Replace admin-bar.css in core with forked version which makes use of :focus-within among other change for AMP-compat.
-		wp_styles()->registered['admin-bar']->src = amp_get_asset_url( 'css/admin-bar.css' );
-		wp_styles()->registered['admin-bar']->ver = AMP__VERSION;
-
-		// Remove any possible '.min' to avoid RTL failing to generate the href for admin-bar-rtl.css, which does not currently have a minified version in the AMP plugin.
-		wp_styles()->registered['admin-bar']->extra['suffix'] = '';
-
-		// Remove script which is almost entirely made obsolete by :focus-inside in the forked admin-bar.css.
-		wp_dequeue_script( 'admin-bar' );
-
-		// Remove customize support script since not valid AMP.
-		add_action(
-			'admin_bar_menu',
-			static function() {
-				remove_action( 'wp_before_admin_bar_render', 'wp_customize_support_script' );
-			},
-			41
-		);
-
-		// Convert admin bar bump callback into an inline style for admin-bar. See \WP_Admin_Bar::initialize().
+		// Inject the data-ampdevmode attribute into the admin bar bump style. See \WP_Admin_Bar::initialize().
 		if ( current_theme_supports( 'admin-bar' ) ) {
 			$admin_bar_args  = get_theme_support( 'admin-bar' );
 			$header_callback = $admin_bar_args[0]['callback'];
@@ -1383,6 +1366,13 @@ static function() {
 		}
 
 		// Emulate customize support script in PHP, to assume Customizer.
+		add_action(
+			'admin_bar_menu',
+			static function() {
+				remove_action( 'wp_before_admin_bar_render', 'wp_customize_support_script' );
+			},
+			41
+		);
 		add_filter(
 			'body_class',
 			static function( $body_classes ) {
@@ -1397,6 +1387,86 @@ static function( $body_classes ) {
 		);
 	}
 
+	/**
+	 * Recursively determine if a given dependency depends on another.
+	 *
+	 * @since 1.3
+	 *
+	 * @param WP_Dependencies $dependencies      Dependencies.
+	 * @param string          $current_handle    Current handle.
+	 * @param string          $dependency_handle Dependency handle.
+	 * @return bool Whether the current handle is a dependency of the dependency handle.
+	 */
+	protected static function has_dependency( WP_Dependencies $dependencies, $current_handle, $dependency_handle ) {
+		if ( $current_handle === $dependency_handle ) {
+			return true;
+		}
+		if ( ! isset( $dependencies->registered[ $current_handle ] ) ) {
+			return false;
+		}
+		foreach ( $dependencies->registered[ $current_handle ]->deps as $handle ) {
+			if ( self::has_dependency( $dependencies, $handle, $dependency_handle ) ) {
+				return true;
+			}
+		}
+		return false;
+	}
+
+	/**
+	 * Add data-ampdevmode attribute to any enqueued style that depends on the admin-bar.
+	 *
+	 * @since 1.3
+	 *
+	 * @param string $tag    The link tag for the enqueued style.
+	 * @param string $handle The style's registered handle.
+	 * @return string Tag.
+	 */
+	public static function filter_admin_bar_style_loader_tag( $tag, $handle ) {
+		if ( 'dashicons' === $handle ) {
+			// Conditionally include Dashicons in dev mode only if was included because it is a dependency of admin-bar.
+			$needs_dev_mode = true;
+			foreach ( wp_styles()->queue as $queued_handle ) {
+				if (
+					// If a theme or plugin directly enqueued dashicons, then it is not added via admin-bar dependency and it is not part of dev mode.
+					'dashicons' === $queued_handle
+					||
+					// If a stylesheet has dashicons as a dependency without also having admin-bar as a dependency, then no dev mode.
+					(
+						self::has_dependency( wp_styles(), $queued_handle, 'dashicons' )
+						&&
+						! self::has_dependency( wp_styles(), $queued_handle, 'admin-bar' )
+					)
+				) {
+					$needs_dev_mode = false;
+					break;
+				}
+			}
+		} else {
+			$needs_dev_mode = self::has_dependency( wp_styles(), $handle, 'admin-bar' );
+		}
+
+		if ( $needs_dev_mode ) {
+			$tag = preg_replace( '/(?<=<link)(?=\s|>)/i', ' ' . AMP_Rule_Spec::DEV_MODE_ATTRIBUTE, $tag );
+		}
+		return $tag;
+	}
+
+	/**
+	 * Add data-ampdevmode attribute to any enqueued script that depends on the admin-bar.
+	 *
+	 * @since 1.3
+	 *
+	 * @param string $tag    The `<script>` tag for the enqueued script.
+	 * @param string $handle The script's registered handle.
+	 * @return string Tag.
+	 */
+	public static function filter_admin_bar_script_loader_tag( $tag, $handle ) {
+		if ( self::has_dependency( wp_scripts(), $handle, 'admin-bar' ) ) {
+			$tag = preg_replace( '/(?<=<script)(?=\s|>)/i', ' ' . AMP_Rule_Spec::DEV_MODE_ATTRIBUTE, $tag );
+		}
+		return $tag;
+	}
+
 	/**
 	 * Ensure the markup exists as required by AMP and elements are in the optimal loading order.
 	 *
@@ -1910,11 +1980,12 @@ public static function prepare_response( $response, $args = [] ) {
 			$enable_response_caching                           = ! $disable_response_caching;
 		}
 
+		// @todo Both allow_dirty_styles and allow_dirty_scripts should eventually use AMP dev mode instead.
 		$args = array_merge(
 			[
 				'content_max_width'    => ! empty( $content_width ) ? $content_width : AMP_Post_Template::CONTENT_MAX_WIDTH, // Back-compat.
 				'use_document_element' => true,
-				'allow_dirty_styles'   => self::is_customize_preview_iframe(), // Dirty styles only needed when editing (e.g. for edit shortcodes).
+				'allow_dirty_styles'   => self::is_customize_preview_iframe(), // Dirty styles only needed when editing (e.g. for edit shortcuts).
 				'allow_dirty_scripts'  => is_customize_preview(), // Scripts are always needed to inject changeset UUID.
 				'user_can_validate'    => AMP_Validation_Manager::has_cap(),
 			],
@@ -2071,8 +2142,9 @@ public static function prepare_response( $response, $args = [] ) {
 			);
 		}
 
-		$dom  = AMP_DOM_Utils::get_dom( $response );
-		$head = $dom->getElementsByTagName( 'head' )->item( 0 );
+		$dom   = AMP_DOM_Utils::get_dom( $response );
+		$xpath = new DOMXPath( $dom );
+		$head  = $dom->getElementsByTagName( 'head' )->item( 0 );
 
 		// Move anything after </html>, such as Query Monitor output added at shutdown, to be moved before </body>.
 		$body = $dom->getElementsByTagName( 'body' )->item( 0 );
@@ -2090,9 +2162,10 @@ public static function prepare_response( $response, $args = [] ) {
 			}
 		}
 
+		AMP_HTTP::send_server_timing( 'amp_dom_parse', -$dom_parse_start, 'AMP DOM Parse' );
+
 		// Make sure scripts from the body get moved to the head.
 		if ( isset( $head ) ) {
-			$xpath = new DOMXPath( $dom );
 			foreach ( $xpath->query( '//body//script[ @custom-element or @custom-template ]' ) as $script ) {
 				$head->appendChild( $script->parentNode->removeChild( $script ) );
 			}
@@ -2103,8 +2176,6 @@ public static function prepare_response( $response, $args = [] ) {
 			$dom->documentElement->setAttribute( 'amp', '' );
 		}
 
-		AMP_HTTP::send_server_timing( 'amp_dom_parse', -$dom_parse_start, 'AMP DOM Parse' );
-
 		$assets = AMP_Content_Sanitizer::sanitize_document( $dom, self::$sanitizer_classes, $args );
 
 		// Determine what the validation errors are.
diff --git a/includes/sanitizers/class-amp-audio-sanitizer.php b/includes/sanitizers/class-amp-audio-sanitizer.php
index 2a369a94159..48d1a9da1c8 100644
--- a/includes/sanitizers/class-amp-audio-sanitizer.php
+++ b/includes/sanitizers/class-amp-audio-sanitizer.php
@@ -60,8 +60,8 @@ public function sanitize() {
 		for ( $i = $num_nodes - 1; $i >= 0; $i-- ) {
 			$node = $nodes->item( $i );
 
-			// Skip element if already inside of an AMP element as a noscript fallback.
-			if ( $this->is_inside_amp_noscript( $node ) ) {
+			// Skip element if already inside of an AMP element as a noscript fallback, or it has a dev mode exemption.
+			if ( $this->is_inside_amp_noscript( $node ) || $this->has_dev_mode_exemption( $node ) ) {
 				continue;
 			}
 
diff --git a/includes/sanitizers/class-amp-base-sanitizer.php b/includes/sanitizers/class-amp-base-sanitizer.php
index 8efcc47e31b..35b9beb189b 100644
--- a/includes/sanitizers/class-amp-base-sanitizer.php
+++ b/includes/sanitizers/class-amp-base-sanitizer.php
@@ -341,13 +341,12 @@ public function maybe_enforce_https_src( $src, $force_https = false ) {
 	/**
 	 * Check whether the document of a given node is in dev mode.
 	 *
-	 * @param DOMNode $node Node to check the document of.
+	 * @since 1.3
+	 *
 	 * @return bool Whether the document is in dev mode.
 	 */
-	protected function is_document_in_dev_mode( DOMNode $node ) {
-		$document = $node instanceof DOMDocument ? $node : $node->ownerDocument;
-
-		return $document->documentElement->hasAttribute(
+	protected function is_document_in_dev_mode() {
+		return $this->dom->documentElement->hasAttribute(
 			AMP_Rule_Spec::DEV_MODE_ATTRIBUTE
 		);
 	}
@@ -355,6 +354,8 @@ protected function is_document_in_dev_mode( DOMNode $node ) {
 	/**
 	 * Check whether a node is exempt from validation during dev mode.
 	 *
+	 * @since 1.3
+	 *
 	 * @param DOMNode $node Node to check.
 	 * @return bool Whether the node should be exempt during dev mode.
 	 */
@@ -373,7 +374,7 @@ protected function has_dev_mode_exemption( DOMNode $node ) {
 	 * @return bool Whether the node should be exempt from validation.
 	 */
 	protected function is_exempt_from_validation( DOMNode $node ) {
-		return $this->is_document_in_dev_mode( $node ) && $this->has_dev_mode_exemption( $node );
+		return $this->is_document_in_dev_mode() && $this->has_dev_mode_exemption( $node );
 	}
 
 	/**
diff --git a/includes/sanitizers/class-amp-dev-mode-sanitizer.php b/includes/sanitizers/class-amp-dev-mode-sanitizer.php
new file mode 100644
index 00000000000..6dae710f724
--- /dev/null
+++ b/includes/sanitizers/class-amp-dev-mode-sanitizer.php
@@ -0,0 +1,45 @@
+<?php
+/**
+ * Class AMP_Dev_Mode_Sanitizer
+ *
+ * Add the data-ampdevmode to the document element and to the elements specified by the supplied args.
+ *
+ * @since 1.3
+ * @package AMP
+ */
+
+/**
+ * Class AMP_Dev_Mode_Sanitizer
+ *
+ * @since 1.3
+ */
+final class AMP_Dev_Mode_Sanitizer extends AMP_Base_Sanitizer {
+
+	/**
+	 * Array of flags used to control sanitization.
+	 *
+	 * @var array {
+	 *      @type string[] $element_xpaths XPath expressions for elements to add the data-ampdevmode attribute to.
+	 * }
+	 */
+	protected $args;
+
+	/**
+	 * Sanitize document for dev mode.
+	 *
+	 * @since 1.3
+	 */
+	public function sanitize() {
+		$this->dom->documentElement->setAttribute( AMP_Rule_Spec::DEV_MODE_ATTRIBUTE, '' );
+
+		$xpath          = new DOMXPath( $this->dom );
+		$element_xpaths = ! empty( $this->args['element_xpaths'] ) ? $this->args['element_xpaths'] : [];
+		foreach ( $element_xpaths as $element_xpath ) {
+			foreach ( $xpath->query( $element_xpath ) as $node ) {
+				if ( $node instanceof DOMElement ) {
+					$node->setAttribute( AMP_Rule_Spec::DEV_MODE_ATTRIBUTE, '' );
+				}
+			}
+		}
+	}
+}
diff --git a/includes/sanitizers/class-amp-form-sanitizer.php b/includes/sanitizers/class-amp-form-sanitizer.php
index 099aa56c5a4..e9957ae1304 100644
--- a/includes/sanitizers/class-amp-form-sanitizer.php
+++ b/includes/sanitizers/class-amp-form-sanitizer.php
@@ -46,7 +46,7 @@ public function sanitize() {
 
 		for ( $i = $num_nodes - 1; $i >= 0; $i-- ) {
 			$node = $nodes->item( $i );
-			if ( ! $node instanceof DOMElement ) {
+			if ( ! $node instanceof DOMElement || $this->has_dev_mode_exemption( $node ) ) {
 				continue;
 			}
 
diff --git a/includes/sanitizers/class-amp-iframe-sanitizer.php b/includes/sanitizers/class-amp-iframe-sanitizer.php
index 7b6c6ada5d6..4345b94c991 100644
--- a/includes/sanitizers/class-amp-iframe-sanitizer.php
+++ b/includes/sanitizers/class-amp-iframe-sanitizer.php
@@ -93,8 +93,8 @@ public function sanitize() {
 			 */
 			$node = $nodes->item( $i );
 
-			// Skip element if already inside of an AMP element as a noscript fallback.
-			if ( $this->is_inside_amp_noscript( $node ) ) {
+			// Skip element if already inside of an AMP element as a noscript fallback, or if it has a dev mode exemption.
+			if ( $this->is_inside_amp_noscript( $node ) || $this->has_dev_mode_exemption( $node ) ) {
 				continue;
 			}
 
diff --git a/includes/sanitizers/class-amp-img-sanitizer.php b/includes/sanitizers/class-amp-img-sanitizer.php
index 988d7f06ab1..284c1db04e7 100644
--- a/includes/sanitizers/class-amp-img-sanitizer.php
+++ b/includes/sanitizers/class-amp-img-sanitizer.php
@@ -97,7 +97,7 @@ public function sanitize() {
 
 		for ( $i = $num_nodes - 1; $i >= 0; $i-- ) {
 			$node = $nodes->item( $i );
-			if ( ! $node instanceof DOMElement ) {
+			if ( ! $node instanceof DOMElement || $this->has_dev_mode_exemption( $node ) ) {
 				continue;
 			}
 
diff --git a/includes/sanitizers/class-amp-script-sanitizer.php b/includes/sanitizers/class-amp-script-sanitizer.php
index 54596652ce4..a737ee38b1a 100644
--- a/includes/sanitizers/class-amp-script-sanitizer.php
+++ b/includes/sanitizers/class-amp-script-sanitizer.php
@@ -35,8 +35,11 @@ public function sanitize() {
 				continue;
 			}
 
-			// Skip noscript elements inside of amp-img or other AMP components for fallbacks. See \AMP_Img_Sanitizer::adjust_and_replace_node().
-			if ( 'amp-' === substr( $noscript->parentNode->nodeName, 0, 4 ) ) {
+			/*
+			 * Skip noscript elements inside of amp-img or other AMP components for fallbacks.
+			 * See \AMP_Img_Sanitizer::adjust_and_replace_node(). Also skip if the element has dev mode.
+			 */
+			if ( 'amp-' === substr( $noscript->parentNode->nodeName, 0, 4 ) || $this->has_dev_mode_exemption( $noscript ) ) {
 				continue;
 			}
 
diff --git a/includes/sanitizers/class-amp-style-sanitizer.php b/includes/sanitizers/class-amp-style-sanitizer.php
index 988c49424c4..95c34237c35 100644
--- a/includes/sanitizers/class-amp-style-sanitizer.php
+++ b/includes/sanitizers/class-amp-style-sanitizer.php
@@ -712,7 +712,7 @@ public function init( $sanitizers ) {
 	public function sanitize() {
 		$elements = [];
 
-		// Do nothing if inline styles are allowed.
+		// Do nothing if inline styles are allowed. Note, a better alternative to this is AMP dev mode.
 		if ( ! empty( $this->args['allow_dirty_styles'] ) ) {
 			return;
 		}
@@ -731,10 +731,15 @@ public function sanitize() {
 		 */
 		$xpath = $this->xpath;
 
+		$dev_mode_predicate = '';
+		if ( $this->is_document_in_dev_mode() ) {
+			$dev_mode_predicate = sprintf( ' and not ( @%s )', AMP_Rule_Spec::DEV_MODE_ATTRIBUTE );
+		}
+
 		$lower_case = 'translate( %s, "ABCDEFGHIJKLMNOPQRSTUVWXYZ", "abcdefghijklmnopqrstuvwxyz" )'; // In XPath 2.0 this is lower-case().
 		$predicates = [
-			sprintf( '( self::style and not( @amp-boilerplate ) and ( not( @type ) or %s = "text/css" ) )', sprintf( $lower_case, '@type' ) ),
-			sprintf( '( self::link and @href and %s = "stylesheet" )', sprintf( $lower_case, '@rel' ) ),
+			sprintf( '( self::style and not( @amp-boilerplate ) and ( not( @type ) or %s = "text/css" ) %s )', sprintf( $lower_case, '@type' ), $dev_mode_predicate ),
+			sprintf( '( self::link and @href and %s = "stylesheet" %s )', sprintf( $lower_case, '@rel' ), $dev_mode_predicate ),
 		];
 
 		foreach ( $xpath->query( '//*[ ' . implode( ' or ', $predicates ) . ' ]' ) as $element ) {
@@ -783,7 +788,7 @@ public function sanitize() {
 		}
 
 		$elements = [];
-		foreach ( $xpath->query( '//*[ @style ]' ) as $element ) {
+		foreach ( $xpath->query( "//*[ @style $dev_mode_predicate ]" ) as $element ) {
 			$elements[] = $element;
 		}
 		foreach ( $elements as $element ) {
@@ -1323,7 +1328,7 @@ private function process_stylesheet( $stylesheet, $options = [] ) {
 			),
 			wp_array_slice_assoc(
 				$this->args,
-				[ 'should_locate_sources', 'parsed_cache_variant' ]
+				[ 'should_locate_sources', 'parsed_cache_variant', 'dynamic_element_selectors' ]
 			),
 			[
 				'language' => get_bloginfo( 'language' ), // Used to tree-shake html[lang] selectors.
@@ -2678,7 +2683,7 @@ private function remove_admin_bar_if_css_excluded() {
 
 		$admin_bar_id = 'wpadminbar';
 		$admin_bar    = $this->dom->getElementById( $admin_bar_id );
-		if ( ! $admin_bar ) {
+		if ( ! $admin_bar || ! $admin_bar->parentNode ) {
 			return;
 		}
 
@@ -3041,44 +3046,6 @@ function( $a, $b ) {
 			}
 		}
 
-		$included_count -= $this->exclude_all_admin_bar_css_if_excessive( $indices_by_stylesheet_element_id );
-
 		return $included_count;
 	}
-
-	/**
-	 * If the admin-bar CSS was excluded, make sure the admin-bar inline CSS is also excluded, and vice-versa.
-	 *
-	 * @param int[] $indices_by_stylesheet_element_id Lookup of stylesheet indices by stylesheet element ID.
-	 * @return int Number of excluded styles.
-	 */
-	private function exclude_all_admin_bar_css_if_excessive( $indices_by_stylesheet_element_id ) {
-		$excluded_count = 0;
-
-		$admin_bar_style_element_ids         = [ 'admin-bar-css', 'admin-bar-inline-css' ];
-		$should_exclude_admin_bar_inline_css = false;
-		foreach ( $admin_bar_style_element_ids as $admin_bar_style_element_id ) {
-			if ( ! isset( $indices_by_stylesheet_element_id[ $admin_bar_style_element_id ] ) ) {
-				continue;
-			}
-			if ( false === $this->pending_stylesheets[ $indices_by_stylesheet_element_id[ $admin_bar_style_element_id ] ]['included'] ) {
-				$should_exclude_admin_bar_inline_css = true;
-				break;
-			}
-		}
-		if ( $should_exclude_admin_bar_inline_css ) {
-			foreach ( $admin_bar_style_element_ids as $admin_bar_style_element_id ) {
-				$needs_exclusion = (
-					isset( $indices_by_stylesheet_element_id[ $admin_bar_style_element_id ] )
-					&&
-					true === $this->pending_stylesheets[ $indices_by_stylesheet_element_id[ $admin_bar_style_element_id ] ]['included']
-				);
-				if ( $needs_exclusion ) {
-					$this->pending_stylesheets[ $indices_by_stylesheet_element_id[ $admin_bar_style_element_id ] ]['included'] = false;
-					$excluded_count++;
-				}
-			}
-		}
-		return $excluded_count;
-	}
 }
diff --git a/includes/sanitizers/class-amp-tag-and-attribute-sanitizer.php b/includes/sanitizers/class-amp-tag-and-attribute-sanitizer.php
index 40d3eada287..460c15f695d 100644
--- a/includes/sanitizers/class-amp-tag-and-attribute-sanitizer.php
+++ b/includes/sanitizers/class-amp-tag-and-attribute-sanitizer.php
@@ -116,6 +116,7 @@ public function __construct( $dom, $args = [] ) {
 
 		parent::__construct( $dom, $args );
 
+		// @todo AMP dev mode should eventually be used instead of allow_dirty_styles.
 		if ( ! empty( $this->args['allow_dirty_styles'] ) ) {
 
 			// Allow style attribute on all elements.
@@ -159,6 +160,7 @@ public function __construct( $dom, $args = [] ) {
 			];
 		}
 
+		// @todo AMP dev mode should eventually be used instead of allow_dirty_scripts.
 		// Allow scripts if requested.
 		if ( ! empty( $this->args['allow_dirty_scripts'] ) ) {
 			$this->args['amp_allowed_tags']['script'][] = [
diff --git a/includes/sanitizers/class-amp-video-sanitizer.php b/includes/sanitizers/class-amp-video-sanitizer.php
index 6e334885596..2719486ee5b 100644
--- a/includes/sanitizers/class-amp-video-sanitizer.php
+++ b/includes/sanitizers/class-amp-video-sanitizer.php
@@ -69,8 +69,8 @@ public function sanitize() {
 			 */
 			$node = $nodes->item( $i );
 
-			// Skip element if already inside of an AMP element as a noscript fallback.
-			if ( $this->is_inside_amp_noscript( $node ) ) {
+			// Skip element if already inside of an AMP element as a noscript fallback, or if the element is in dev mode.
+			if ( $this->is_inside_amp_noscript( $node ) || $this->has_dev_mode_exemption( $node ) ) {
 				continue;
 			}
 
diff --git a/includes/validation/class-amp-validation-manager.php b/includes/validation/class-amp-validation-manager.php
index 844b3c97972..822f6f83867 100644
--- a/includes/validation/class-amp-validation-manager.php
+++ b/includes/validation/class-amp-validation-manager.php
@@ -227,15 +227,6 @@ function( $query_vars ) {
 		}
 
 		if ( self::$should_locate_sources ) {
-			/*
-			 * Always suppress the admin bar from being shown when performing a validation request. This ensures that
-			 * user-initiated validation requests perform the same as validation requests initiated by the WP-CLI
-			 * command `wp amp validate-site`, which does so as an unauthenticated user. Unauthenticated users should
-			 * not be shown the admin bar, and normal site visitors who read AMP content (such as via an AMP Cache) are
-			 * not authenticated, so it doesn't make sense to include the admin bar when doing validation.
-			 */
-			add_filter( 'show_admin_bar', '__return_false', PHP_INT_MAX );
-
 			self::add_validation_error_sourcing();
 		}
 	}
diff --git a/tests/php/test-amp-audio-converter.php b/tests/php/test-amp-audio-converter.php
index eaac86782ce..d3506f3742f 100644
--- a/tests/php/test-amp-audio-converter.php
+++ b/tests/php/test-amp-audio-converter.php
@@ -209,6 +209,14 @@ public function get_data() {
 					'add_noscript_fallback' => true,
 				],
 			],
+
+			'test_with_dev_mode' => [
+				'<audio data-ampdevmode="" src="https://example.com/audio/file.ogg" onclick="foo()" data-foo="bar"></audio>',
+				null, // No change.
+				[
+					'add_dev_mode' => true,
+				],
+			],
 		];
 	}
 
@@ -225,7 +233,11 @@ public function test_converter( $source, $expected = null, $args = [] ) {
 		if ( null === $expected ) {
 			$expected = $source;
 		}
-		$dom       = AMP_DOM_Utils::get_dom_from_content( $source );
+		$dom = AMP_DOM_Utils::get_dom_from_content( $source );
+		if ( ! empty( $args['add_dev_mode'] ) ) {
+			$dom->documentElement->setAttribute( AMP_Rule_Spec::DEV_MODE_ATTRIBUTE, '' );
+		}
+
 		$sanitizer = new AMP_Audio_Sanitizer( $dom, $args );
 		$sanitizer->sanitize();
 
diff --git a/tests/php/test-amp-dev-mode-sanitizer.php b/tests/php/test-amp-dev-mode-sanitizer.php
new file mode 100644
index 00000000000..017128edf38
--- /dev/null
+++ b/tests/php/test-amp-dev-mode-sanitizer.php
@@ -0,0 +1,51 @@
+<?php
+/**
+ * Test AMP_Dev_Mode_Sanitizer.
+ *
+ * @package AMP
+ */
+
+/**
+ * Test AMP_Dev_Mode_Sanitizer.
+ *
+ * @covers AMP_Dev_Mode_Sanitizer
+ */
+class AMP_Dev_Mode_Sanitizer_Test extends WP_UnitTestCase {
+
+	/**
+	 * Test sanitize method.
+	 *
+	 * @covers \AMP_Dev_Mode_Sanitizer::sanitize()
+	 */
+	public function test_sanitize() {
+		$dom = AMP_DOM_Utils::get_dom_from_content(
+			'
+			<p id="no-dev-mode-needed">All good.</p>
+			<button id="greet" onclick="alert(\'Hi!\')">Greet</button>
+			<div id="wpadminbar">
+				<li id="wp-admin-bar-img"><img src="about:blank" alt="Blank!"></li>
+			</div>
+			<style id="admin-bar-inline-css">body { color:red !important; }</style>
+			'
+		);
+
+		$sanitizer = new AMP_Dev_Mode_Sanitizer(
+			$dom,
+			[
+				'element_xpaths' => [
+					'//*[ @id = "greet" ]',
+					'//*[ @id = "wpadminbar" ]',
+					'//*[ @id = "wpadminbar" ]//*',
+					'//style[ @id = "admin-bar-inline-css" ]',
+				],
+			]
+		);
+		$sanitizer->sanitize();
+		$this->assertTrue( $dom->documentElement->hasAttribute( AMP_Rule_Spec::DEV_MODE_ATTRIBUTE ) );
+		$this->assertTrue( $dom->getElementById( 'greet' )->hasAttribute( AMP_Rule_Spec::DEV_MODE_ATTRIBUTE ) );
+		$this->assertTrue( $dom->getElementById( 'wpadminbar' )->hasAttribute( AMP_Rule_Spec::DEV_MODE_ATTRIBUTE ) );
+		$this->assertTrue( $dom->getElementById( 'wp-admin-bar-img' )->hasAttribute( AMP_Rule_Spec::DEV_MODE_ATTRIBUTE ) );
+		$this->assertTrue( $dom->getElementById( 'admin-bar-inline-css' )->hasAttribute( AMP_Rule_Spec::DEV_MODE_ATTRIBUTE ) );
+		$this->assertFalse( $dom->getElementById( 'no-dev-mode-needed' )->hasAttribute( AMP_Rule_Spec::DEV_MODE_ATTRIBUTE ) );
+	}
+}
diff --git a/tests/php/test-amp-form-sanitizer.php b/tests/php/test-amp-form-sanitizer.php
index 9ab1dc36a6e..904ff3b1f97 100644
--- a/tests/php/test-amp-form-sanitizer.php
+++ b/tests/php/test-amp-form-sanitizer.php
@@ -84,6 +84,14 @@ public function get_data() {
 				'<form method="post" action="/login/"></form>',
 				'#' . preg_quote( '<form method="post" action-xhr="//example.org/login/?_wp_amp_action_xhr_converted=1" target="_top">', '#' ) . $form_template_pattern . '</form>#s',
 			],
+
+			'test_with_dev_mode' => [
+				'<form data-ampdevmode="" action="javascript:"></form>',
+				null, // No change.
+				[
+					'add_dev_mode' => true,
+				],
+			],
 		];
 	}
 
@@ -92,9 +100,10 @@ public function get_data() {
 	 *
 	 * @param string      $source   The source HTML.
 	 * @param string|null $expected The expected HTML after conversion. Null means same as $source.
+	 * @param array       $args     Args.
 	 * @dataProvider get_data
 	 */
-	public function test_converter( $source, $expected = null ) {
+	public function test_converter( $source, $expected = null, $args = [] ) {
 		if ( is_null( $expected ) ) {
 			$expected = $source;
 		}
@@ -102,6 +111,9 @@ public function test_converter( $source, $expected = null ) {
 			$expected = '#' . preg_quote( $expected, '#' ) . '#s';
 		}
 		$dom = AMP_DOM_Utils::get_dom_from_content( $source );
+		if ( ! empty( $args['add_dev_mode'] ) ) {
+			$dom->documentElement->setAttribute( AMP_Rule_Spec::DEV_MODE_ATTRIBUTE, '' );
+		}
 
 		$sanitizer = new AMP_Form_Sanitizer( $dom );
 		$sanitizer->sanitize();
diff --git a/tests/php/test-amp-helper-functions.php b/tests/php/test-amp-helper-functions.php
index 89e4e236625..873af10b55e 100644
--- a/tests/php/test-amp-helper-functions.php
+++ b/tests/php/test-amp-helper-functions.php
@@ -22,9 +22,10 @@ class Test_AMP_Helper_Functions extends WP_UnitTestCase {
 	 */
 	public function tearDown() {
 		remove_theme_support( AMP_Theme_Support::SLUG );
-		global $wp_scripts, $pagenow;
-		$wp_scripts = null;
-		$pagenow    = 'index.php'; // Since clean_up_global_scope() doesn't.
+		global $wp_scripts, $pagenow, $show_admin_bar;
+		$wp_scripts     = null;
+		$show_admin_bar = null;
+		$pagenow        = 'index.php'; // Since clean_up_global_scope() doesn't.
 
 		if ( class_exists( 'WP_Block_Type_Registry' ) ) {
 			foreach ( WP_Block_Type_Registry::get_instance()->get_all_registered() as $block ) {
@@ -628,6 +629,33 @@ public function test_amp_get_content_embed_handlers() {
 		$this->assertEquals( $post, $this->last_filter_call['args'][1] );
 	}
 
+	/**
+	 * Test amp_is_dev_mode().
+	 *
+	 * @covers ::amp_is_dev_mode()
+	 */
+	public function test_amp_is_dev_mode() {
+		$this->assertFalse( amp_is_dev_mode() );
+		add_filter( 'amp_dev_mode_enabled', '__return_true' );
+		$this->assertTrue( amp_is_dev_mode() );
+		remove_filter( 'amp_dev_mode_enabled', '__return_true' );
+		$this->assertFalse( amp_is_dev_mode() );
+
+		// Test authenticated user with admin bar showing.
+		add_filter( 'show_admin_bar', '__return_true' );
+		wp_set_current_user( self::factory()->user->create( [ 'role' => 'administrator' ] ) );
+		$this->assertTrue( is_admin_bar_showing() );
+		$this->assertTrue( is_user_logged_in() );
+		$this->assertTrue( amp_is_dev_mode() );
+
+		// Test unauthenticated user with admin bar forced.
+		add_filter( 'show_admin_bar', '__return_true' );
+		wp_set_current_user( 0 );
+		$this->assertFalse( is_user_logged_in() );
+		$this->assertTrue( is_admin_bar_showing() );
+		$this->assertFalse( amp_is_dev_mode() );
+	}
+
 	/**
 	 * Test deprecated $post param for amp_get_content_embed_handlers().
 	 *
@@ -675,10 +703,62 @@ static function( $classes ) {
 				return $classes;
 			}
 		);
-		$orderd_sanitizers = array_keys( amp_get_content_sanitizers() );
-		$this->assertEquals( 'Even_After_Whitelist_Sanitizer', $orderd_sanitizers[ count( $orderd_sanitizers ) - 3 ] );
-		$this->assertEquals( 'AMP_Style_Sanitizer', $orderd_sanitizers[ count( $orderd_sanitizers ) - 2 ] );
-		$this->assertEquals( 'AMP_Tag_And_Attribute_Sanitizer', $orderd_sanitizers[ count( $orderd_sanitizers ) - 1 ] );
+		$ordered_sanitizers = array_keys( amp_get_content_sanitizers() );
+		$this->assertEquals( 'Even_After_Whitelist_Sanitizer', $ordered_sanitizers[ count( $ordered_sanitizers ) - 3 ] );
+		$this->assertEquals( 'AMP_Style_Sanitizer', $ordered_sanitizers[ count( $ordered_sanitizers ) - 2 ] );
+		$this->assertEquals( 'AMP_Tag_And_Attribute_Sanitizer', $ordered_sanitizers[ count( $ordered_sanitizers ) - 1 ] );
+	}
+
+	/**
+	 * Test amp_get_content_sanitizers().
+	 *
+	 * @covers ::amp_get_content_sanitizers()
+	 */
+	public function test_amp_get_content_sanitizers_with_dev_mode() {
+		$element_xpaths = [ '//script[ @id = "hello-world" ]' ];
+		add_filter(
+			'amp_dev_mode_element_xpaths',
+			function ( $xpaths ) use ( $element_xpaths ) {
+				return array_merge( $xpaths, $element_xpaths );
+			}
+		);
+
+		// Check that AMP_Dev_Mode_Sanitizer is not registered if not in dev mode.
+		$sanitizers = amp_get_content_sanitizers();
+		$this->assertFalse( amp_is_dev_mode() );
+		$this->assertArrayNotHasKey( 'AMP_Dev_Mode_Sanitizer', $sanitizers );
+
+		// Check that AMP_Dev_Mode_Sanitizer is registered once in dev mode, but not with admin bar showing yet.
+		add_filter( 'amp_dev_mode_enabled', '__return_true' );
+		$sanitizers = amp_get_content_sanitizers();
+		$this->assertFalse( is_admin_bar_showing() );
+		$this->assertTrue( amp_is_dev_mode() );
+		$this->assertArrayHasKey( 'AMP_Dev_Mode_Sanitizer', $sanitizers );
+		$this->assertEquals( 'AMP_Dev_Mode_Sanitizer', current( array_keys( $sanitizers ) ) );
+		$this->assertEquals(
+			compact( 'element_xpaths' ),
+			$sanitizers['AMP_Dev_Mode_Sanitizer']
+		);
+		remove_filter( 'amp_dev_mode_enabled', '__return_true' );
+
+		// Check that AMP_Dev_Mode_Sanitizer is registered once in dev mode, and now also with admin bar showing.
+		add_filter( 'amp_dev_mode_enabled', '__return_true' );
+		add_filter( 'show_admin_bar', '__return_true' );
+		$sanitizers = amp_get_content_sanitizers();
+		$this->assertTrue( is_admin_bar_showing() );
+		$this->assertTrue( amp_is_dev_mode() );
+		$this->assertArrayHasKey( 'AMP_Dev_Mode_Sanitizer', $sanitizers );
+		$this->assertEqualSets(
+			array_merge(
+				$element_xpaths,
+				[
+					'//*[ @id = "wpadminbar" ]',
+					'//*[ @id = "wpadminbar" ]//*',
+					'//style[ @id = "admin-bar-inline-css" ]',
+				]
+			),
+			$sanitizers['AMP_Dev_Mode_Sanitizer']['element_xpaths']
+		);
 	}
 
 	/**
diff --git a/tests/php/test-amp-iframe-sanitizer.php b/tests/php/test-amp-iframe-sanitizer.php
index 3b9b1b4853a..ace7c91f14f 100644
--- a/tests/php/test-amp-iframe-sanitizer.php
+++ b/tests/php/test-amp-iframe-sanitizer.php
@@ -374,6 +374,14 @@ public function get_data() {
 					'add_placeholder'       => true,
 				],
 			],
+
+			'test_with_dev_mode' => [
+				'<iframe data-ampdevmode="" src="about:blank" onload="alert(\'Hey.\')"></iframe>',
+				null, // No change.
+				[
+					'add_dev_mode' => true,
+				],
+			],
 		];
 	}
 
@@ -390,7 +398,11 @@ public function test_converter( $source, $expected = null, $args = [] ) {
 		if ( ! $expected ) {
 			$expected = $source;
 		}
-		$dom       = AMP_DOM_Utils::get_dom_from_content( $source );
+		$dom = AMP_DOM_Utils::get_dom_from_content( $source );
+		if ( ! empty( $args['add_dev_mode'] ) ) {
+			$dom->documentElement->setAttribute( AMP_Rule_Spec::DEV_MODE_ATTRIBUTE, '' );
+		}
+
 		$sanitizer = new AMP_Iframe_Sanitizer( $dom, $args );
 		$sanitizer->sanitize();
 
diff --git a/tests/php/test-amp-img-sanitizer.php b/tests/php/test-amp-img-sanitizer.php
index ea19cae97a8..73b4fee4b00 100644
--- a/tests/php/test-amp-img-sanitizer.php
+++ b/tests/php/test-amp-img-sanitizer.php
@@ -343,6 +343,14 @@ public function get_data() {
 				'<div data-amp-lightbox="true" class="wp-block-image"><figure class="alignleft is-resized"><img src="https://placehold.it/100x100" width="100" height="100" data-foo="bar" role="button" tabindex="0" /></figure></div>',
 				'<div data-amp-lightbox="true" class="wp-block-image"><figure class="alignleft is-resized"><amp-img src="https://placehold.it/100x100" width="100" height="100" data-foo="bar" role="button" tabindex="0" data-amp-lightbox="" on="tap:amp-image-lightbox" class="amp-wp-enforced-sizes" layout="intrinsic"><noscript><img src="https://placehold.it/100x100" width="100" height="100" role="button" tabindex="0"></noscript></amp-img></figure></div><amp-image-lightbox id="amp-image-lightbox" layout="nodisplay" data-close-button-aria-label="Close"></amp-image-lightbox>',
 			],
+
+			'test_with_dev_mode'                       => [
+				'<img data-ampdevmode src="http://example.com/foo.png">',
+				null, // No change.
+				[
+					'add_dev_mode' => true,
+				],
+			],
 		];
 	}
 
@@ -372,8 +380,10 @@ public function test_converter( $source, $expected = null, $args = [], $expected
 			$args
 		);
 
-		$dom       = AMP_DOM_Utils::get_dom_from_content( $source );
-		$img_count = $dom->getElementsByTagName( 'img' )->length;
+		$dom = AMP_DOM_Utils::get_dom_from_content( $source );
+		if ( ! empty( $args['add_dev_mode'] ) ) {
+			$dom->documentElement->setAttribute( AMP_Rule_Spec::DEV_MODE_ATTRIBUTE, '' );
+		}
 
 		$sanitizer = new AMP_Img_Sanitizer( $dom, $args );
 		$sanitizer->sanitize();
diff --git a/tests/php/test-amp-script-sanitizer.php b/tests/php/test-amp-script-sanitizer.php
index 4ef9def551b..5b1ad397faf 100644
--- a/tests/php/test-amp-script-sanitizer.php
+++ b/tests/php/test-amp-script-sanitizer.php
@@ -35,6 +35,10 @@ public function get_noscript_data() {
 				'<html><head><noscript><span>No script</span></noscript></head><body></body></html>',
 				'<html><head></head><body><!--noscript--><span>No script</span><!--/noscript--></body></html>',
 			],
+			'test_with_dev_mode'  => [
+				'<html data-ampdevmode=""><head></head><body><noscript data-ampdevmode="">hey</noscript></body></html>',
+				null,
+			],
 		];
 	}
 
@@ -47,6 +51,9 @@ public function get_noscript_data() {
 	 * @covers AMP_Script_Sanitizer::sanitize()
 	 */
 	public function test_noscript_promotion( $source, $expected = null ) {
+		if ( null === $expected ) {
+			$expected = $source;
+		}
 		$dom = AMP_DOM_Utils::get_dom( $source );
 		$this->assertSame( 1, $dom->getElementsByTagName( 'noscript' )->length );
 		$sanitizer = new AMP_Script_Sanitizer( $dom );
diff --git a/tests/php/test-amp-style-sanitizer.php b/tests/php/test-amp-style-sanitizer.php
index cc73e6df098..298a436f4a3 100644
--- a/tests/php/test-amp-style-sanitizer.php
+++ b/tests/php/test-amp-style-sanitizer.php
@@ -520,6 +520,11 @@ public function get_link_and_style_test_data() {
 				],
 				[],
 			],
+			'test_with_dev_mode' => [
+				'<html amp data-ampdevmode=""><body data-ampdevmode="" style="background:red !important"><link rel="stylesheet" href="https://example.com/foo.css" data-ampdevmode=""><style data-ampdevmode="">body{color:red !important}</style></body></html>', // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedStylesheet
+				[],
+				[],
+			],
 		];
 	}
 
@@ -589,7 +594,9 @@ static function( $preempt, $request, $url ) {
 			$this->assertContains( $expected_stylesheet, $sanitized_html );
 		}
 
-		$this->assertContains( "\n\n/*# sourceURL=amp-custom.css */", $sanitized_html );
+		if ( $actual_stylesheets ) {
+			$this->assertContains( "\n\n/*# sourceURL=amp-custom.css */", $sanitized_html );
+		}
 	}
 
 	/**
@@ -2277,7 +2284,6 @@ static function() {
 					add_action( 'wp_enqueue_scripts', 'twentyten_scripts_styles' );
 					AMP_Theme_Support::add_hooks();
 					wp_add_inline_style( 'admin-bar', '.admin-bar-inline-style{ color:red }' );
-					wp_set_current_user( self::factory()->user->create( [ 'role' => 'administrator' ] ) );
 
 					add_action(
 						'wp_footer',
@@ -2309,11 +2315,10 @@ function( $original_dom, $original_source, $amphtml_dom, $amphtml_source ) {
 					$this->assertContains( '.is-style-outline .wp-block-button__link', $amphtml_source, 'Expected block-library/style.css' );
 					$this->assertContains( '[class^="wp-block-"]:not(.wp-block-gallery) figcaption', $amphtml_source, 'Expected twentyten/blocks.css' );
 					$this->assertContains( 'amp-img.amp-wp-enforced-sizes', $amphtml_source, 'Expected amp-default.css' );
-					$this->assertNotContains( 'ab-empty-item', $amphtml_source, 'Expected admin-bar.css to not be present.' );
+					$this->assertContains( 'ab-empty-item', $amphtml_source, 'Expected admin-bar.css to still be present.' );
 					$this->assertNotContains( 'earlyprintstyle', $amphtml_source, 'Expected early print style to not be present.' );
-					$this->assertNotContains( 'admin-bar-inline-style', $amphtml_source, 'Expected admin-bar.css inline style to not be present.' );
-					$this->assertNotContains( 'admin-bar', $amphtml_dom->getElementsByTagName( 'body' )->item( 0 )->getAttribute( 'class' ) );
-					$this->assertEmpty( $amphtml_dom->getElementById( 'wpadminbar' ) );
+					$this->assertContains( 'admin-bar', $amphtml_dom->getElementsByTagName( 'body' )->item( 0 )->getAttribute( 'class' ) );
+					$this->assertInstanceOf( 'DOMElement', $amphtml_dom->getElementById( 'wpadminbar' ) );
 				},
 			],
 			// @todo Add other scenarios in the future.
diff --git a/tests/php/test-amp-video-sanitizer.php b/tests/php/test-amp-video-sanitizer.php
index 03a00f7d47e..f2e64b4fe1b 100644
--- a/tests/php/test-amp-video-sanitizer.php
+++ b/tests/php/test-amp-video-sanitizer.php
@@ -182,6 +182,14 @@ public function get_data() {
 				'<div id="player"><noscript><video width="300" height="300" src="https://example.com/video.mp4"></video></noscript></div>',
 				'<div id="player"><!--noscript--><amp-video width="300" height="300" src="https://example.com/video.mp4" layout="responsive"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a><noscript><video width="300" height="300" src="https://example.com/video.mp4"></video></noscript></amp-video><!--/noscript--></div>',
 			],
+
+			'test_with_dev_mode' => [
+				'<video data-ampdevmode="" width="300" height="300" src="https://example.com/video.mp4"></video>',
+				null, // No change.
+				[
+					'add_dev_mode' => true,
+				],
+			],
 		];
 	}
 
@@ -200,6 +208,9 @@ public function test_converter( $source, $expected = null, $args = [] ) {
 		}
 
 		$dom = AMP_DOM_Utils::get_dom_from_content( $source );
+		if ( ! empty( $args['add_dev_mode'] ) ) {
+			$dom->documentElement->setAttribute( AMP_Rule_Spec::DEV_MODE_ATTRIBUTE, '' );
+		}
 
 		$sanitizer = new AMP_Video_Sanitizer( $dom, $args );
 		$sanitizer->sanitize();
diff --git a/tests/php/test-class-amp-theme-support.php b/tests/php/test-class-amp-theme-support.php
index 72eaa076241..d2274bca4c6 100644
--- a/tests/php/test-class-amp-theme-support.php
+++ b/tests/php/test-class-amp-theme-support.php
@@ -46,9 +46,13 @@ public function setUp() {
 	 * @global WP_Scripts $wp_scripts
 	 */
 	public function tearDown() {
-		global $wp_scripts;
-		$wp_scripts = null;
+		global $wp_scripts, $wp_styles, $wp_admin_bar;
+		$wp_scripts   = null;
+		$wp_styles    = null;
+		$wp_admin_bar = null;
+
 		parent::tearDown();
+		unset( $GLOBALS['show_admin_bar'] );
 		AMP_Validation_Manager::reset_validation_results();
 		remove_theme_support( AMP_Theme_Support::SLUG );
 		remove_theme_support( 'custom-header' );
@@ -1152,21 +1156,111 @@ public function test_filter_cancel_comment_reply_link() {
 	 * Test init_admin_bar.
 	 *
 	 * @covers \AMP_Theme_Support::init_admin_bar()
+	 * @covers \AMP_Theme_Support::filter_admin_bar_style_loader_tag()
+	 * @covers \AMP_Theme_Support::filter_admin_bar_script_loader_tag()
 	 */
 	public function test_init_admin_bar() {
-		global $wp_styles, $wp_scripts;
-		$wp_styles  = null;
-		$wp_scripts = null;
-		$this->assertNotEquals( AMP__VERSION, wp_styles()->registered['admin-bar']->ver );
+		require_once ABSPATH . WPINC . '/class-wp-admin-bar.php';
+
+		add_action(
+			'admin_bar_init',
+			function() {
+				wp_enqueue_style( 'example-admin-bar', 'https://example.com/example-admin-bar.css', [ 'admin-bar' ], '0.1' );
+				wp_enqueue_script( 'example-admin-bar', 'https://example.com/example-admin-bar.js', [ 'admin-bar' ], '0.1', false );
+			}
+		);
+
+		$callback = function() {
+			?>
+			<style type="text/css" media="screen">
+				html { margin-top: 64px !important; }
+				@media screen and ( max-width: 782px ) {
+					html { margin-top: 92px !important; }
+				}
+			</style>
+			<?php
+		};
+		add_theme_support( 'admin-bar', compact( 'callback' ) );
+
+		global $wp_admin_bar;
+		$wp_admin_bar = new WP_Admin_Bar();
+		$wp_admin_bar->initialize();
+		$this->assertEquals( 10, has_action( 'wp_head', $callback ) );
 
 		AMP_Theme_Support::init_admin_bar();
-		$this->assertEquals( AMP__VERSION, wp_styles()->registered['admin-bar']->ver );
-		$this->assertFalse( wp_scripts()->query( 'admin-bar', 'enqueued' ) );
+		$this->assertEquals( 10, has_filter( 'style_loader_tag', [ 'AMP_Theme_Support', 'filter_admin_bar_style_loader_tag' ] ) );
+		$this->assertEquals( 10, has_filter( 'script_loader_tag', [ 'AMP_Theme_Support', 'filter_admin_bar_script_loader_tag' ] ) );
+		$this->assertFalse( has_action( 'wp_head', $callback ) );
+		ob_start();
+		wp_print_styles();
+		wp_print_scripts();
+		$output = ob_get_clean();
+		$this->assertContains( '<style id=\'admin-bar-inline-css\' type=\'text/css\'>', $output ); // Note: data-ampdevmode attribute will be added by AMP_Dev_Mode_Sanitizer.
+		$this->assertNotContains( '<link rel=\'stylesheet\' id=\'dashicons-css\'', $output ); // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedStylesheet
+		$this->assertContains( '<link data-ampdevmode rel=\'stylesheet\' id=\'dashicons-css\'', $output ); // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedStylesheet
+		$this->assertContains( '<link data-ampdevmode rel=\'stylesheet\' id=\'admin-bar-css\'', $output ); // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedStylesheet
+		$this->assertContains( '<link data-ampdevmode rel=\'stylesheet\' id=\'example-admin-bar-css\'', $output ); // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedStylesheet
+		$this->assertContains( 'html { margin-top: 64px !important; }', $output );
+		$this->assertRegExp( '/' . implode( '', [ '<script ', 'data-ampdevmode [^>]+admin-bar\.js' ] ) . '/', $output );
+		$this->assertRegExp( '/' . implode( '', [ '<script ', 'data-ampdevmode [^>]+example-admin-bar\.js' ] ) . '/', $output );
+
 		$body_classes = get_body_class();
 		$this->assertContains( 'customize-support', $body_classes );
 		$this->assertNotContains( 'no-customize-support', $body_classes );
 	}
 
+	/**
+	 * Test init_admin_bar to ensure dashicons are not added to dev mode when directly enqueued.
+	 *
+	 * @covers \AMP_Theme_Support::init_admin_bar()
+	 * @covers \AMP_Theme_Support::filter_admin_bar_style_loader_tag()
+	 */
+	public function test_init_admin_bar_for_directly_enqueued_dashicons() {
+		require_once ABSPATH . WPINC . '/class-wp-admin-bar.php';
+
+		global $wp_admin_bar;
+		$wp_admin_bar = new WP_Admin_Bar();
+		$wp_admin_bar->initialize();
+		AMP_Theme_Support::init_admin_bar();
+
+		// Enqueued directly.
+		wp_enqueue_style( 'dashicons' );
+
+		ob_start();
+		wp_print_styles();
+		$output = ob_get_clean();
+
+		$this->assertContains( '<link rel=\'stylesheet\' id=\'dashicons-css\'', $output ); // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedStylesheet
+		$this->assertNotContains( '<link data-ampdevmode rel=\'stylesheet\' id=\'dashicons-css\'', $output ); // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedStylesheet
+		$this->assertContains( '<link data-ampdevmode rel=\'stylesheet\' id=\'admin-bar-css\'', $output ); // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedStylesheet
+	}
+
+	/**
+	 * Test init_admin_bar to ensure dashicons are not added to dev mode when indirectly enqueued.
+	 *
+	 * @covers \AMP_Theme_Support::init_admin_bar()
+	 * @covers \AMP_Theme_Support::filter_admin_bar_style_loader_tag()
+	 */
+	public function test_init_admin_bar_for_indirectly_enqueued_dashicons() {
+		require_once ABSPATH . WPINC . '/class-wp-admin-bar.php';
+
+		global $wp_admin_bar;
+		$wp_admin_bar = new WP_Admin_Bar();
+		$wp_admin_bar->initialize();
+		AMP_Theme_Support::init_admin_bar();
+
+		// Enqueued indirectly.
+		wp_enqueue_style( 'my-font-pack', 'https://example.com/fonts', [ 'dashicons' ], '0.1' );
+
+		ob_start();
+		wp_print_styles();
+		$output = ob_get_clean();
+
+		$this->assertContains( '<link rel=\'stylesheet\' id=\'dashicons-css\'', $output ); // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedStylesheet
+		$this->assertNotContains( '<link data-ampdevmode rel=\'stylesheet\' id=\'dashicons-css\'', $output ); // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedStylesheet
+		$this->assertContains( '<link data-ampdevmode rel=\'stylesheet\' id=\'admin-bar-css\'', $output ); // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedStylesheet
+	}
+
 	/**
 	 * Data provider for test_ensure_required_markup.
 	 *