feat: add Style Book to Neve's Customizer

Author: HardeepAsrani

assets/apps/customizer-controls/src/controls.js

@@ -168,6 +168,59 @@ const initSearchCustomizer = () => {
 	);
 };
 
+const initStyleBookButton = () => {
+	const headerContainer = document.getElementById('customize-header-actions');
+
+	if (!headerContainer) {
+		return;
+	}
+
+	// Initialize the Style Book state if it doesn't exist
+	if (!wp.customize.state.has('neveStyleBookOpen')) {
+		wp.customize.state.create('neveStyleBookOpen', false);
+	}
+
+	// Create the Style Book button
+	const button = document.createElement('button');
+	button.name = 'neve-style-book';
+	button.id = 'neve-style-book';
+	button.className = 'button-secondary button';
+	button.title = __('Style Book', 'neve');
+	button.innerHTML = `
+		<i class="dashicons dashicons-admin-appearance"></i>
+		<span class="screen-reader-text">${__('Style Book', 'neve')}</span>
+	`;
+
+	// Add click handler
+	button.addEventListener('click', (e) => {
+		e.preventDefault();
+
+		// Toggle the state in customizer
+		const currentState = wp.customize.state('neveStyleBookOpen').get();
+		const newState = !currentState;
+		wp.customize.state('neveStyleBookOpen').set(newState);
+
+		// Send message to preview
+		wp.customize.previewer.send('neve-toggle-style-book', newState);
+	});
+
+	// Append to header container
+	headerContainer.appendChild(button);
+
+	// Restore state when preview is ready
+	wp.customize.previewer.bind('ready', () => {
+		const currentState = wp.customize.state('neveStyleBookOpen').get();
+		if (currentState) {
+			wp.customize.previewer.send('neve-restore-style-book-state', true);
+		}
+	});
+
+	// Listen for state changes from preview
+	wp.customize.previewer.bind('neve-style-book-state-changed', (newState) => {
+		wp.customize.state('neveStyleBookOpen').set(newState);
+	});
+};
+
 const initCustomPagesFocus = () => {
 	const { sectionsFocus } = window.NeveReactCustomize;
 	if (sectionsFocus !== undefined) {
@@ -311,6 +364,7 @@ window.wp.customize.bind('ready', () => {
 	initBlogPageFocus();
 	initSearchCustomizer();
 	initLocalGoogleFonts();
+	initStyleBookButton();
 });
 
 window.HFG = {

assets/apps/customizer-controls/src/scss/_general.scss

@@ -157,3 +157,42 @@
 		width: 100%;
 	}
 }
+
+// Style Book button styles
+#customize-header-actions {
+	#neve-style-book {
+		display: block;
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 48px;
+		width: 45px;
+		margin-top: 0 !important;
+		padding: 0;
+		background: #f0f0f1;
+		border: none;
+		border-radius: 0;
+		border-top: 4px solid #f0f0f1;
+		border-right: 1px solid #dcdcde;
+		color: #3c434a;
+		fill: #3c434a;
+		stroke: #3c434a;
+		text-align: center;
+		cursor: pointer;
+		transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out, background 0.15s ease-in-out;
+
+		.dashicons {
+			font-size: 22px;
+			line-height: 1.2;
+			width: 22px;
+			height: 22px;
+		}
+
+		&:hover,
+		&:focus {
+			color: #0073aa;
+			border-top-color: #0073aa;
+			background: #fff;
+		}
+	}
+}