feat: add Style Book to Neve's Customizer (#4448)

* feat: add Style Book to Neve's Customizer

* Update aria-label for close button in style book

* chore: use wp_get_theme to get desc

* chore: skip focusing on customizer if clicked inside input fields

* feat: take stylebook controls to specific controls

* Update class verification for form group in tests

* Change locator from page to iframe for form group

* Remove clickable class verification from style book tests

Removed verification for form clickable class in style book tests.

---------

Co-authored-by: Marius Cristea <marius.cristea@vertistudio.com>

Author: HardeepAsrani

assets/apps/components/src/Controls/ColorControl.js

@@ -19,6 +19,7 @@ import classnames from 'classnames';
 const ColorPickerFix = lazy(() => import('../Common/ColorPickerFix'));
 
 const ColorControl = ({
+	slug = null,
 	label,
 	selectedColor,
 	onChange,
@@ -52,7 +53,8 @@ const ColorControl = ({
 	};
 
 	const isGlobal = selectedColor && selectedColor.indexOf('var') > -1;
-	const defaultGradient = 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)';
+	const defaultGradient =
+		'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)';
 
 	const handleClear = () => {
 		onChange(defaultValue || '');
@@ -63,7 +65,10 @@ const ColorControl = ({
 	const wrapClasses = classnames([
 		'neve-control-header',
 		'neve-color-component',
-		{ 'allows-global': !disableGlobal },
+		{
+			'allows-global': !disableGlobal,
+			[`neve-color-slug-${slug}`]: !!slug,
+		},
 	]);
 
 	const [gradient, setGradient] = useState(selectedColor);
@@ -159,7 +164,9 @@ const ColorControl = ({
 									<div
 										className="current-color-gradient"
 										style={{
-											background: selectedColor || defaultGradient,
+											background:
+												selectedColor ||
+												defaultGradient,
 											height: '177px',
 											border: '1px solid #eee',
 											minWidth: '215px',

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) {
@@ -355,6 +408,7 @@ window.wp.customize.bind('ready', () => {
 	initBlogPageFocus();
 	initSearchCustomizer();
 	initLocalGoogleFonts();
+	initStyleBookButton();
 	previewScrollToTopChanges();
 });
 

assets/apps/customizer-controls/src/global-colors/PaletteColors.js

@@ -52,6 +52,7 @@ const PaletteColors = ({ values, defaults, save }) => {
 									<ColorControl
 										disableGlobal
 										key={slug}
+										slug={slug}
 										label={group[slug]}
 										selectedColor={colors[slug]}
 										defaultValue={

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

@@ -160,3 +160,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;
+		}
+	}
+}