Development

.github/workflows/diff-translations.yml

@@ -5,71 +5,48 @@ on:
   pull_request:
     types: [opened, edited, synchronize, ready_for_review]
     branches:
-      - "development"
-      - "new/**"
+      - development
+      - master
 
 jobs:
   translation:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout Ref Base
+      - name: Checkout Base Branch
         uses: actions/checkout@v4
         with:
-          path: neve-head
+          ref: ${{ github.base_ref }}
+          path: neve-base
       - name: Setup node 16
         uses: actions/setup-node@v4
         with:
           node-version: 16.x
-      - name: FRESH Makepot BASE
+      - name: Build POT for Base Branch
         run: |
-          cd neve-head
+          cd neve-base
           ls languages/
           composer install --no-dev --prefer-dist --no-progress --no-suggest
           yarn install --frozen-lockfile
           yarn run build
           ls languages/
-      - name: Checkout Ref Head
-        uses: actions/checkout@v2
+      - name: Checkout PR Branch (Head)
+        uses: actions/checkout@v4
         with:
-          ref: development
-          path: neve-base
-      - name: FRESH Makepot HEAD
+          path: neve-head
+      - name: Build POT for PR Branch
         run: |
-          cd neve-base
+          cd neve-head
           ls languages/
           composer install --no-dev --prefer-dist --no-progress --no-suggest
           yarn install --frozen-lockfile
           yarn run build
           ls languages/
-      - name: Find Comment
-        uses: peter-evans/find-comment@v1
-        id: find_coomment
-        with:
-          issue-number: ${{ github.event.pull_request.number }}
-          comment-author: "pirate-bot"
-          body-includes: PR has POT difference
-      - name: Install PODiff
-        run: |
-          curl -o podiff.gz ftp://download.gnu.org.ua/pub/releases/podiff/podiff-1.3.tar.gz
-          tar -xf podiff.gz
-          cd podiff-1.3
-          make
-          mkdir -p $GITHUB_WORKSPACE/bin
-          mv ./podiff $GITHUB_WORKSPACE/bin
-          echo "$GITHUB_WORKSPACE/bin" >> $GITHUB_PATH
-          cd ..
-      - name: Run Podiff
-        id: translation_status
-        run: |
-          ${GITHUB_WORKSPACE}/neve-head/bin/pot-diff.sh ./neve-base/languages/neve.pot ./neve-head/languages/neve.pot $PERCENT_TRESHOLD
-      - name: Step require review
-        if: steps.translation_status.outputs.has_pot_diff != 'success'
-        uses: Automattic/action-required-review@v2
+      - name: Compare POT files
+        uses: Codeinwp/action-i18n-string-reviewer@main
         with:
-          requirements: |
-            - name: Everything else
-              paths: unmatched
-              teams:
-                - "admin-neve"
-          status: Has translation changes, a review admin-neve team is required
-          token: ${{ secrets.BOT_TOKEN }}
+          fail-on-changes: 'true'
+          openrouter-key: ${{ secrets.OPEN_ROUTER_API_KEY }}
+          openrouter-model: 'google/gemini-2.5-flash'
+          base-pot-file: 'neve-base/languages/neve.pot'
+          target-pot-file: 'neve-head/languages/neve.pot'
+          github-token: ${{ secrets.BOT_TOKEN }}

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/builder/components/Builder.tsx

@@ -1,4 +1,4 @@
 import React, { useCallback, useMemo } from 'react';
 import { BuilderContentInterface, RowTypes } from '../../@types/utils';
 import Row from './Row';
 import ResponsiveSwitches from './ResponsiveSwitches';
@@ -138,7 +138,7 @@
 								setMobileOverlayDismissed(true);
 							}}
 						>
-							{__('Enable', 'neve-pro-addon')}
+							{__('Enable', 'neve')}
 						</Button>
 					</div>
 				)}

assets/apps/customizer-controls/src/builder/components/ComponentsPopover.tsx

@@ -80,6 +80,16 @@ const ComponentsPopover: React.FC<Props> = ({
 		});
 	};
 
+	const getFilteredUpsells = () => {
+		if (!searchQuery) {
+			return upsells;
+		}
+
+		return upsells.filter(({ name }) => {
+			return name.toLowerCase().includes(searchQuery);
+		});
+	};
+
 	const renderItem = (item: ItemInterface, idx: number) => {
 		if (!item.id) {
 			return null;
@@ -113,10 +123,15 @@ const ComponentsPopover: React.FC<Props> = ({
 	const renderItems = () => {
 		const themeItems = getSidebarItems();
 		const boosterItems = getSidebarItems(true);
+		const filteredUpsells = getFilteredUpsells();
 
 		let noComponents = null;
 
-		if (themeItems.length === 0 && boosterItems.length === 0) {
+		if (
+			themeItems.length === 0 &&
+			boosterItems.length === 0 &&
+			filteredUpsells.length === 0
+		) {
 			noComponents = (
 				<div className="no-components">
 					<span>
@@ -156,13 +171,13 @@ const ComponentsPopover: React.FC<Props> = ({
 						)}
 					</>
 				)}
-				{boosterItems.length < 1 && upsells.length > 0 && (
+				{boosterItems.length < 1 && filteredUpsells.length > 0 && (
 					<>
 						<h4>
 							{__('PRO', 'neve')} {__('Components', 'neve')}
 						</h4>
 						<div className="items-popover-list upsell-list">
-							{upsells.map(({ name, icon }, idx) => {
+							{filteredUpsells.map(({ name, icon }, idx) => {
 								return renderUpsell(idx, icon, name);
 							})}
 						</div>

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

@@ -0,0 +1,84 @@
+import { useCallback, useRef, useEffect } from '@wordpress/element';
+
+/**
+ * Custom hook for keyboard-based sorting of list items.
+ *
+ * @param {number} index - Current item index in the list
+ * @param {number} totalItems - Total number of items in the list
+ * @param {Function} onMove - Callback function to move item (receives fromIndex, toIndex)
+ * @param {boolean} isActive - External state for whether keyboard mode is active
+ * @param {Function} setIsActive - Function to set the active state
+ * @return {Object} Hook state and handlers
+ */
+const useKeyboardSorting = (
+	index,
+	totalItems,
+	onMove,
+	isActive,
+	setIsActive
+) => {
+	const handleRef = useRef(null);
+	const previousIndexRef = useRef(index);
+
+	// Handle keyboard events
+	const handleKeyDown = useCallback(
+		(e) => {
+			if (e.key === ' ' || e.key === 'Spacebar') {
+				e.preventDefault();
+				setIsActive(!isActive);
+				return;
+			}
+
+			if (!isActive) {
+				return;
+			}
+
+			if (e.key === 'ArrowUp' && index > 0) {
+				e.preventDefault();
+				const newIndex = index - 1;
+				previousIndexRef.current = index;
+				onMove(index, newIndex);
+			}
+
+			if (e.key === 'ArrowDown' && index < totalItems - 1) {
+				e.preventDefault();
+				const newIndex = index + 1;
+				previousIndexRef.current = index;
+				onMove(index, newIndex);
+			}
+			if (e.key === 'Escape') {
+				e.preventDefault();
+				setIsActive(false);
+			}
+		},
+		[isActive, index, totalItems, onMove, setIsActive]
+	);
+
+	const handleBlur = useCallback(() => {
+		setIsActive(false);
+	}, [setIsActive]);
+
+	useEffect(() => {
+		if (
+			isActive &&
+			handleRef.current &&
+			previousIndexRef.current !== index
+		) {
+			// Small delay to ensure DOM has updated
+			window.requestAnimationFrame(() => {
+				if (handleRef.current) {
+					handleRef.current.focus();
+				}
+			});
+		}
+		previousIndexRef.current = index;
+	}, [index, isActive]);
+
+	return {
+		handleRef,
+		handleKeyDown,
+		handleBlur,
+	};
+};
+
+export default useKeyboardSorting;

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) {
@@ -297,6 +350,50 @@ const checkHasElementorTemplates = () => {
 	}
 };
 
+/**
+ * Find the Scroll to top button within the customizer preview.
+ */
+function findScrollToTopBtn() {
+	const iframeElement = document.querySelector('#customize-preview iframe');
+
+	if (!iframeElement) {
+		return;
+	}
+
+	const scrollToTopBtn =
+		iframeElement.contentWindow.document.querySelector('#scroll-to-top');
+
+	return scrollToTopBtn;
+}
+
+/**
+ * Show the Scroll to Top button as soon as the user enters the section in Customizer.
+ */
+function previewScrollToTopChanges() {
+	wp.customize.section('neve_scroll_to_top', (section) => {
+		section.expanded.bind((isExpanded) => {
+			const scrollToTopBtn = findScrollToTopBtn();
+
+			if (!scrollToTopBtn) {
+				return;
+			}
+
+			// If Scroll to top customizer section is expanded
+			if (isExpanded) {
+				wp.customize.previewer.bind('ready', () => {
+					wp.customize.previewer.send('nv-opened-stt', true);
+				});
+				scrollToTopBtn.style.visibility = 'visible';
+				scrollToTopBtn.style.opacity = '1';
+			} else {
+				// Hide the button when we leave the section
+				scrollToTopBtn.style.visibility = 'hidden';
+				scrollToTopBtn.style.opacity = '0';
+			}
+		});
+	});
+}
+
 window.wp.customize.bind('ready', () => {
 	initStarterContentNotice();
 	initDocSection();
@@ -311,6 +408,8 @@ window.wp.customize.bind('ready', () => {
 	initBlogPageFocus();
 	initSearchCustomizer();
 	initLocalGoogleFonts();
+	initStyleBookButton();
+	previewScrollToTopChanges();
 });
 
 window.HFG = {