release(minor): new version

### New Features
- **Enable full HTML5 theme support**: All HTML5 theme support features are now enabled. 
- **Added X (former Twitter) and Apple Music logo for Social Icons**: Updated the social icons list.
- **Added mobile support for the footer in Header Footer Grid builder**: Now users can control and build the layout for the footer when viewed on mobile. 

### Bug Fixes
- **WooCommerce notices styles for v8.5**: Fixed a bug with the notice styles introduced by WooCommerce v8.5
- **Single Post title alignment**: when using full width layout the alignment should work as expected now.
- **Improve SEO site-title tag for homepage**: Improved SEO site-title tag on the homepage.
- **Missing translations for the Customizer.**
- **Sub-menu item long text**: Fixed the sub-menu item when text is too long, now it will wrap as expected.
- **Fix the opening of Search Icon in Mobile Sidebar**
- **Fix position of search input**: on minimal when space is restricted
- **Scrollable mobile header builder droppable zone**: Previously when having too many items it would become hard to manage.

### Improvements
- **Add feature usage observer**
- **Update internal dependencies**
- **Support changes for Custom payment icons**
- **Support changes for the Custom SVG menu icon**
- **Add integration for Formbricks survey** inside the Dashboard.
- **Update Google Fonts**:​ Get the newest Google fonts from the public font library.

Author: preda-bogdan

assets/apps/components/config/custom-plugins.js

@@ -0,0 +1,84 @@
+const path = require('path');
+
+/**
+ * This plugin appends the non-entrypoint JS chunk file names to the asset files generated by the DependencyExtractionWebpackPlugin.
+ *
+ * This mostly used to load translation files for the non-entrypoint JS chunks.
+ */
+class ChunksNameAssetAppendPlugin {
+	apply(compiler) {
+		compiler.hooks.compilation.tap(
+			'EntrypointChunksPlugin',
+			(compilation) => {
+				compilation.hooks.processAssets.tapAsync(
+					{
+						name: 'EntrypointChunksPlugin',
+						stage: compiler.webpack.Compilation
+							.PROCESS_ASSETS_STAGE_ANALYSE,
+					},
+					(assets, callback) => {
+						// Get entrypoint names
+						const entrypoints = Array.from(
+							compilation.entrypoints.keys()
+						);
+
+						// Collecting non-entrypoint JS chunk file names
+						const jsChunkFiles = Object.keys(assets).filter(
+							(file) =>
+								file.endsWith('.js') &&
+								!entrypoints.includes(
+									path.basename(file, '.js')
+								)
+						);
+
+						if (jsChunkFiles.length === 0) {
+							callback();
+							return;
+						}
+
+						// Manually constructing the array string for PHP
+						const jsChunkFilesArrayString =
+							'array(' +
+							jsChunkFiles.map((file) => `'${file}'`).join(', ') +
+							')';
+
+						// Process each asset
+						for (const assetName in assets) {
+							if (assetName.endsWith('.asset.php')) {
+								// Modify asset content
+								const assetContent = assets[assetName].source();
+								const modifiedContent = assetContent.replace(
+									'<?php return array(',
+									`<?php return array('chunks' => ${jsChunkFilesArrayString},`
+								);
+
+								/* eslint-disable no-console */
+								console.log(
+									'\n\x1b[35m%s\x1b[0m \x1b[0m%s\x1b[0m \x1b[36m%s\x1b[0m \x1b[33m%s\x1b[0m\n',
+									'[Neve Webpack Plugin][ChunksNameAssetAppendPlugin]',
+									assetName,
+									'has been changed to include the following file chunks name as array:',
+									jsChunkFilesArrayString
+								);
+
+								// Updating the asset in the compilation
+								compilation.updateAsset(
+									assetName,
+									new compiler.webpack.sources.RawSource(
+										modifiedContent
+									)
+								);
+							}
+						}
+
+						callback();
+					}
+				);
+			}
+		);
+	}
+}
+
+module.exports = {
+	ChunksNameAssetAppendPlugin,
+};

assets/apps/components/config/webpack.config.js

@@ -1,5 +1,6 @@
 const DependencyExtractionWebpackPlugin = require('@wordpress/dependency-extraction-webpack-plugin');
 const config = require('@wordpress/scripts/config/webpack.config');
+const customPlugins = require('./custom-plugins');
 
 const plugins = [
 	...config.plugins.filter(
@@ -19,6 +20,7 @@ const plugins = [
 			}
 		},
 	}),
+	new customPlugins.ChunksNameAssetAppendPlugin(),
 ];
 
 module.exports = (env) => {

assets/apps/components/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@neve-wp/components",
-    "version": "0.0.51",
+    "version": "0.0.54",
     "description": "Neve React Components",
     "author": "themeisle <[email protected]>",
     "license": "GPL-2.0-or-later",

assets/apps/components/src/Common/DropdownFix.js

@@ -28,7 +28,10 @@ function useObservableState(initialState, onStateChange) {
 }
 
 /**
- * This monitors all events across opened popver components
+ * This monitors all events across opened popover components
+ *
+ * @param {any} ref - The ref of the popover component.
+ * @param {any} callback - The callback function to execute.
  */
 function useOutsideClickHook(ref, callback) {
 	useEffect(() => {

assets/apps/components/src/Common/icons.js

@@ -1,5 +1,49 @@
 const getIcons = (size) => {
 	return {
+		'apple-music': (
+			<svg
+				width={size}
+				height={size}
+				version="1.1"
+				id="Artwork"
+				xmlns="http://www.w3.org/2000/svg"
+				x="0px"
+				y="0px"
+				viewBox="0 0 73 73"
+				style={{ enableBackground: 'new 0 0 73 73' }}
+				xmlSpace="preserve"
+			>
+				<g id="Layer_5"></g>
+				<g>
+					<g>
+						<path
+							className="st0"
+							style={{ fillRule: 'evenodd', clipRule: 'evenodd' }}
+							d="M72,19.94c0-0.72-0.01-1.45-0.03-2.17c-0.04-1.58-0.14-3.17-0.42-4.73c-0.28-1.58-0.75-3.06-1.48-4.5
+						c-0.72-1.41-1.66-2.71-2.78-3.83c-1.12-1.12-2.42-2.06-3.83-2.78c-1.44-0.73-2.91-1.2-4.49-1.48c-1.56-0.28-3.15-0.37-4.73-0.42
+						C53.51,0.02,52.78,0.01,52.06,0c-0.86,0-1.72,0-2.58,0H22.52c-0.86,0-1.72,0-2.58,0c-0.72,0-1.45,0.01-2.17,0.03
+						c-1.58,0.04-3.17,0.14-4.73,0.42C11.46,0.74,9.98,1.2,8.55,1.94C7.13,2.66,5.84,3.6,4.72,4.72S2.65,7.13,1.93,8.55
+						c-0.73,1.44-1.2,2.91-1.48,4.5c-0.28,1.56-0.37,3.15-0.42,4.73C0.02,18.5,0.01,19.22,0,19.94c0,0.86,0,1.72,0,2.58v26.95
+						c0,0.86,0,1.72,0,2.58c0,0.72,0.01,1.45,0.03,2.17c0.04,1.58,0.14,3.17,0.42,4.73c0.28,1.58,0.75,3.06,1.48,4.5
+						c0.72,1.41,1.66,2.71,2.78,3.83s2.42,2.06,3.83,2.78c1.44,0.73,2.91,1.2,4.49,1.48c1.56,0.28,3.15,0.37,4.73,0.42
+						c0.72,0.02,1.45,0.03,2.17,0.03c0.86,0.01,1.72,0,2.58,0h26.95c0.86,0,1.72,0,2.58,0c0.72,0,1.45-0.01,2.17-0.03
+						c1.58-0.04,3.17-0.14,4.73-0.42c1.58-0.28,3.06-0.75,4.49-1.48c1.41-0.72,2.71-1.66,3.83-2.78c1.12-1.12,2.06-2.41,2.78-3.83
+						c0.73-1.44,1.2-2.91,1.48-4.5c0.28-1.56,0.37-3.15,0.42-4.73c0.02-0.72,0.03-1.45,0.03-2.17c0.01-0.86,0-1.72,0-2.58V22.52
+						C72,21.66,72,20.8,72,19.94z M52.71,46.85c0,0.91-0.01,1.74-0.2,2.65c-0.19,0.89-0.53,1.72-1.05,2.47
+						c-0.52,0.75-1.19,1.36-1.97,1.82c-0.79,0.47-1.62,0.73-2.5,0.91c-1.66,0.33-2.79,0.41-3.86,0.2c-1.03-0.21-1.9-0.68-2.6-1.32
+						c-1.03-0.95-1.68-2.23-1.82-3.56c-0.16-1.57,0.36-3.24,1.53-4.48c0.59-0.62,1.34-1.11,2.34-1.5c1.04-0.4,2.19-0.65,3.96-1
+						c0.47-0.09,0.93-0.19,1.4-0.28c0.61-0.12,1.14-0.28,1.56-0.8c0.43-0.52,0.43-1.16,0.43-1.78V24.32c0-1.21-0.54-1.54-1.7-1.32
+						c-0.83,0.16-18.62,3.75-18.62,3.75c-1,0.24-1.36,0.57-1.36,1.82v23.23c0,0.91-0.05,1.74-0.24,2.65c-0.19,0.89-0.53,1.72-1.05,2.47
+						c-0.52,0.75-1.19,1.36-1.97,1.82c-0.79,0.47-1.62,0.74-2.5,0.92c-1.66,0.33-2.79,0.41-3.86,0.2c-1.03-0.21-1.9-0.69-2.6-1.33
+						c-1.03-0.95-1.63-2.23-1.78-3.56c-0.16-1.57,0.31-3.24,1.49-4.48c0.59-0.62,1.34-1.11,2.34-1.5c1.04-0.4,2.19-0.65,3.96-1
+						c0.47-0.09,0.93-0.19,1.4-0.28c0.61-0.12,1.14-0.28,1.56-0.8c0.42-0.52,0.47-1.13,0.47-1.75c0-4.92,0-26.78,0-26.78
+						c0-0.36,0.03-0.6,0.05-0.72c0.09-0.56,0.31-1.05,0.72-1.39c0.34-0.28,0.78-0.48,1.33-0.6l0.01,0L49,11.33
+						c0.19-0.04,1.73-0.31,1.91-0.33c1.16-0.1,1.81,0.66,1.81,1.89L52.71,46.85L52.71,46.85z"
+						/>
+					</g>
+				</g>
+			</svg>
+		),
 		'behance-square': (
 			<svg
 				width={size}
@@ -615,6 +659,20 @@ const getIcons = (size) => {
 				<path d="M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5t-115.5 248.5-184.5 210.5-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5t-114-159.5q33 5 61 5 43 0 85-11-112-23-185.5-111.5t-73.5-205.5v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5t371.5 99.5q-8-38-8-74 0-134 94.5-228.5t228.5-94.5q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z" />
 			</svg>
 		),
+		'twitter-x': (
+			<svg
+				width={size}
+				height={size}
+				viewBox="0 0 1200 1227"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
+					fill="inherit"
+				/>
+			</svg>
+		),
 		'vimeo-square': (
 			<svg
 				width={size}

assets/apps/components/src/Common/svg.js

@@ -608,9 +608,9 @@ const SVG = {
 			viewBox="3 3 18 18"
 		>
 			<path
-				fill-rule="evenodd"
+				fillRule="evenodd"
 				d="M5 11a6 6 0 1 1 12 0a6 6 0 0 1-12 0zm6-8a8 8 0 1 0 4.906 14.32l3.387 3.387a1 1 0 0 0 1.414-1.414l-3.387-3.387A8 8 0 0 0 11 3zm0 12a4 4 0 1 0 0-8a4 4 0 0 0 0 8z"
-				clip-rule="evenodd"
+				clipRule="evenodd"
 			/>
 		</svg>
 	),

assets/apps/customizer-controls/src/@types/utils.d.ts

@@ -104,6 +104,52 @@ type BuilderActions = {
 	updateSidebarItems: () => void;
 };
 
+type TrackingData = {
+	block?: string;
+	env?: string;
+	action?: string;
+	feature?: string;
+	groupID?: string;
+	featureComponent?: string;
+	featureValue?: string | number | Record<string, unknown>;
+	hasOpenAIKey?: boolean;
+	usedTheme?: string;
+};
+
+type EventResponse = {
+	error?: string;
+	success?: boolean;
+	response?: any;
+};
+
+type EventOptions = {
+	directSave?: boolean;
+	consent?: boolean;
+	refreshTimer?: boolean;
+	sendNow?: boolean;
+	ignoreLimit?: boolean;
+};
+
+type EventTrackingAccumulatorWithPlugin = {
+	add: (data: TrackingData, options?: EventOptions) => string;
+	set: (key: string, data: TrackingData, options?: EventOptions) => void;
+	base: EventTrackingAccumulator;
+};
+
+interface EventTrackingAccumulator {
+	subscribe(callback: (response: EventResponse) => void): () => void;
+	hasConsent(): boolean;
+	sendBulkTracking(payload: Array<TrackingData>): Promise<Response>;
+	trkMetadata(data: TrackingData): TrackingData;
+	with(pluginSlug: string): EventTrackingAccumulatorWithPlugin;
+	uploadEvents(): Promise<void>;
+	sendIfLimitReached(): Promise<void> | undefined;
+	start(): void;
+	stop(): void;
+	refreshTimer(): void;
+	clone(): EventTrackingAccumulator;
+}
+
 declare global {
 	interface Window {
 		wp: StringObjectKeys;
@@ -129,6 +175,7 @@ declare global {
 			};
 		};
 		NeveProReactCustomize: undefined | StringObjectKeys;
+		tiTrk?: EventTrackingAccumulator;
 	}
 }
 

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

@@ -51,6 +51,12 @@ const BuilderItem: React.FC<Props> = (props) => {
 				return a.id < b.id ? -1 : 1;
 			})
 		);
+
+		window.tiTrk?.with('neve').set(`${componentId}_removed`, {
+			feature: builder + '_builder',
+			featureComponent: 'component-removed',
+			featureValue: { row, slot, item: componentId },
+		});
 	};
 
 	const iconSize = 18;

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

@@ -36,6 +36,12 @@ const ComponentsPopover: React.FC<Props> = ({
 		nextItems.push({ id: itemId });
 		updateLayout(rowId, slotId, nextItems);
 		setSidebarItems(sidebarItems.filter((i) => i.id !== itemId));
+
+		window.tiTrk?.with('neve').set(`${itemId}_added`, {
+			feature: builder + '_builder',
+			featureComponent: 'component-added',
+			featureValue: { row: rowId, slot: slotId, item: itemId },
+		});
 		closePopup();
 	};
 

assets/apps/customizer-controls/src/builder/scss/_rows.scss

@@ -81,10 +81,25 @@
 }
 
 .row.sidebar .row-inner {
-  width: 200px;
+  width: 210px;
 
   .droppable-wrap {
 	height: 100%;
+
+	max-height: 170px;
+	overflow-x: hidden;
+	overflow-y: auto;
+
+	&::-webkit-scrollbar {
+		width: 10px;
+	}
+	
+	&::-webkit-scrollbar-track {
+		background: #D9D9D9;
+	}
+	&::-webkit-scrollbar-thumb {
+		background: #888;
+	}
   }
 
   .droppable {
@@ -189,6 +204,13 @@
   &:hover, &.has-popover {
 	.open-popover {
 	  opacity: .25;
-	}
+	}	
   }
 }
+
+/**
+ * Fix for the popover not being visible when it is inside a container with overflow.
+ */
+.rows-wrapper .vertical-rows .droppable-wrap.has-popover > .components-popover {
+	position: fixed !important;
+}

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

@@ -3,6 +3,7 @@ import {
 	SelectControl,
 	TextControl,
 	ToggleControl,
+	TextareaControl,
 } from '@wordpress/components';
 import IconSelector from './IconSelector';
 import { getIcons, ColorControl } from '@neve-wp/components';
@@ -74,6 +75,15 @@ const RepeaterItemContent = ({
 						key={key + index}
 					/>
 				);
+			case 'textarea':
+				return (
+					<TextareaControl
+						label={currentField.label}
+						value={value[index][key] || currentField.default}
+						onChange={(newData) => changeContent(key, newData)}
+						key={key + index}
+					/>
+				);
 			case 'icon':
 				return (
 					<IconSelector

assets/apps/dashboard/src/Components/Options/InputForm.js

@@ -42,6 +42,13 @@ const InputForm = ({
 						value={value}
 						onChange={(e) => {
 							setValue(e.target.value);
+							if (slug === 'typekit_id') {
+								window.tiTrk?.with('neve').add({
+									feature: 'typekit-fonts',
+									featureComponent: 'typekit-id',
+									featureValue: 'enabled',
+								});
+							}
 						}}
 					/>
 					<div className="actions">

assets/apps/dashboard/src/Components/Options/MultiSelect.js

@@ -19,6 +19,11 @@ const MultiSelectOption = ({
 				choices={choices}
 				currentValue={getOption(slug) || ['category']}
 				onChange={(value) => {
+					window.tiTrk?.with('neve').set(slug, {
+						feature: 'module-settings',
+						featureComponent: slug,
+						featureValue: value,
+					});
 					changeSetting(slug, value).then((r) => {
 						if (r.success) {
 							changeOption(slug, value);

assets/apps/dashboard/src/Components/Options/Select.js

@@ -18,6 +18,11 @@ const Select = ({
 				label={label}
 				value={getOption(slug) || 'css'}
 				onChange={(value) => {
+					window.tiTrk?.with('neve').set(slug, {
+						feature: 'module-settings',
+						featureComponent: slug,
+						featureValue: value,
+					});
 					changeSetting(slug, value).then((r) => {
 						if (r.success) {
 							changeOption(slug, value);