#796 Move AMP Customizer into main Customizer

amp.php

@@ -209,18 +209,10 @@ function amp_render_post( $post ) {
 /**
  * Bootstraps the AMP customizer.
  *
- * If the AMP customizer is enabled, initially drop the core widgets and menus panels. If the current
- * preview page isn't flagged as an AMP template, the core panels will be re-added and the AMP panel
- * hidden.
- *
  * @since 0.4
  */
 function _amp_bootstrap_customizer() {
-	// Drop core panels (menus, widgets) from the AMP customizer
-	// `customize_loaded_components` runs super early so we need to call this regardless of whether the AMP customizer is enabled or not
-	add_filter( 'customize_loaded_components', array( 'AMP_Template_Customizer', '_unregister_core_panels' ) );
-
-	add_action( 'after_setup_theme', 'amp_maybe_init_customizer' );
+	add_action( 'after_setup_theme', 'amp_init_customizer' );
 }
 add_action( 'plugins_loaded', '_amp_bootstrap_customizer', 9 ); // Should be hooked before priority 10 on 'plugins_loaded' to properly unhook core panels.
 

assets/css/amp-customizer.css

@@ -0,0 +1,123 @@
+.amp-toggle {
+	position: relative;
+	display: inline-block;
+	width: 30px;
+	height: 15px;
+	top: 15px;
+	left: 130px;
+}
+
+.amp-toggle input,
+.amp-toggle input.disabled {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	opacity: 0;
+	margin: 0;
+	padding: 0;
+	z-index: 1;
+}
+
+.amp-toggle .slider {
+	position: absolute;
+	cursor: pointer;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	border-radius: 34px;
+	background-color: #555D66;
+	-webkit-transition: .3s;
+	transition: .3s;
+	transition-property: background-color, transform, -webkit-transform, -ms-transform, opacity;
+}
+.amp-toggle input:focus,
+.amp-toggle input:active {
+	outline: none;
+}
+.amp-toggle input:hover + .slider,
+.amp-toggle input:focus + .slider,
+.amp-toggle input:active + .slider {
+	box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
+}
+
+.amp-toggle .slider:before {
+	position: absolute;
+	content: "";
+	height: 13px;
+	width: 13px;
+	top: 1px;
+	left: 1px;
+	border-radius: 50%;
+	background-color: transparent;
+	background-image: url( '../images/amp-white-icon.svg' );
+	background-size: 13px 13px;
+	-webkit-transition: .3s;
+	transition: .3s;
+}
+
+.amp-toggle input:checked + .slider {
+	background-color: #0379C4;
+}
+
+.amp-toggle input:checked + .slider:before {
+	-webkit-transform: translateX( 15px );
+	-ms-transform: translateX( 15px );
+	transform: translateX( 15px );
+}
+
+.amp-toggle input.disabled + .slider {
+	opacity: 0.7;
+}
+
+.amp-toggle .tooltip {
+	position: absolute;
+	bottom: 25px;
+	left: -115px;
+	width: 230px;
+	font-size: 13px;
+	text-align: center;
+	color: #FFFFFF;
+	background: #191E23;
+	padding: 15px;
+	z-index: 1;
+	cursor: default;
+	display: none;
+}
+.amp-toggle .tooltip a {
+	color: #00a0d2;
+}
+.amp-toggle .tooltip a:hover,
+.amp-toggle .tooltip a:focus,
+.amp-toggle .tooltip a:active {
+	color: #54cbf1;
+}
+
+.amp-toggle .tooltip:before {
+	position: absolute;
+	bottom: -8px;
+	left: 120px;
+	content: "";
+	border: solid;
+	border-color: #191E23 transparent;
+	border-width: 8px 8px 0 8px;
+}
+
+.js .accordion-section-title:after {
+	z-index: 0;
+}
+
+#customize-footer-actions .collapse-sidebar-label {
+	font-size: 11px;
+	margin-left: -3px;
+}
+
+.devices-wrapper .preview-desktop {
+	border-left: 1px solid #DDDDDD !important;
+}
+
+.wp-full-overlay-footer .devices button:before {
+	vertical-align: initial;
+}