release: small fixes

### Bug Fixes
**Header Footer Builder Layout Fix:** We updated the builder to work with the latest version of WordPress 6.4.
**Related posts excerpt:** The excerpt from the related post will now correctly show the proper post excerpt.
**Infinite scroll:** Properly load custom post-type posts on the archive page.
**Infinite scroll post order:** The order is now preserved when loading posts for the infinite scroll.
**Improved Gutenberg support:** More default Guttenberg block settings are now supported.
**Blog list alignment:** The alignment now behaves correctly when the thumbnail is missing.

### Improvements
**Update Google Fonts:** Get the newest Google fonts from the public font library.
**E2E testing:** Improved end-to-end testing.
**SDK update:** The latest SDK is now available.

assets/apps/components/package.json

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

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

@@ -145,6 +145,7 @@ export default function Dropdown(props) {
 						popoverProps ? popoverProps.className : undefined,
 						contentClassName
 					)}
+					inline={true}
 				>
 					{renderContent(args)}
 				</Popover>

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

@@ -33,6 +33,9 @@ const GlobalColorsPicker = ({ onChange, activeColor, isGlobal }) => {
 					/>
 				</>
 			)}
+			popoverProps={{
+				inline: true,
+			}}
 		/>
 	);
 };

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

@@ -88,6 +88,9 @@ const ColorControl = ({
 						? ''
 						: 'neve-color-picker-dropdown'
 				}
+				popoverProps={{
+					inline: true,
+				}}
 				renderToggle={({ isOpen, onToggle }) => {
 					toggle = onToggle;
 					return (

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

@@ -52,6 +52,9 @@ const MultiSelect = ({ choices, onChange, currentValue, label }) => {
 				<Dropdown
 					className="dd-toggle"
 					focusOnMount={false}
+					popoverProps={{
+						inline: true,
+					}}
 					renderToggle={({ isOpen, onToggle }) => (
 						<Button
 							isSmall

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

@@ -177,6 +177,8 @@ const ComponentsPopover: React.FC<Props> = ({
 			position="top center"
 			className="items-popover"
 			onFocusOutside={closePopup}
+			// @ts-ignore
+			inline={true}
 		>
 			<div className="popover-header">
 				<Icon icon={search} />

assets/apps/customizer-controls/src/font-family/FontFamilySelector.js

@@ -197,6 +197,7 @@ const FontFamilySelector = ({
 							setVisible(false);
 							setSearch('');
 						}}
+						inline={true}
 					>
 						{fonts ? getFontList() : __('In Progress', 'neve')}
 					</Popover>

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

@@ -51,6 +51,7 @@ const IconSelector = ({ label, value, onIconChoice, icons }) => {
 					onFocusOutside={() => {
 						setVisible(!visible);
 					}}
+					inline={true}
 				>
 					{
 						<Suspense fallback={<Spinner />}>

assets/apps/dashboard/src/dashboard.js

@@ -6,6 +6,7 @@ import { render } from '@wordpress/element';
 import actions from './store/actions';
 import reducer from './store/reducer';
 import selectors from './store/selectors';
+import './utils/module-observer';
 
 registerStore('neve-dashboard', {
 	reducer,

assets/apps/dashboard/src/utils/module-observer.js

@@ -0,0 +1,72 @@
+import { subscribe, select } from '@wordpress/data';
+
+/**
+ * Append New Sub Menu Page.
+ *
+ * The page will be added after the parent container of the linkSelector.
+ *
+ * @param {string} linkSelector The link selector to determine the position of the added submenu page.
+ * @param {Object} subMenuData The Sub Menu data to be added.
+ * @return {HTMLAnchorElement} Custom Layouts menu page.
+ */
+function appendNewSubMenuPage(linkSelector, subMenuData) {
+	// Create and configure a new anchor element
+	const link = document.createElement('a');
+	link.setAttribute('href', subMenuData?.linkSubMenu);
+	link.textContent = subMenuData?.labelSubMenu;
+
+	const linkToAppendAfter = document.querySelector(linkSelector);
+	if (!linkToAppendAfter) {
+		return;
+	}
+
+	// Append the after the Customizer menu item.
+	const listNode = linkToAppendAfter.parentNode;
+	const container = document.createElement('li');
+	container.appendChild(link);
+	listNode.parentNode.insertBefore(container, listNode.nextSibling);
+
+	return link;
+}
+
+/**
+ * Auto Sub Menu Pages on Admin Dashboard for Pro Modules.
+ */
+function autoHideModuleSubMenuPages() {
+	let clLinkElem = document.querySelector(
+		'.toplevel_page_neve-welcome a[href*="edit.php?post_type=neve_custom_layouts"]'
+	);
+
+	subscribe(() => {
+		/**
+		 * Auto hide Custom Layouts submenu page link based on module status.
+		 */
+		const isModuleEnabled =
+			select('neve-dashboard').getModuleStatus('custom_layouts');
+
+		if (isModuleEnabled && !clLinkElem) {
+			clLinkElem = appendNewSubMenuPage(
+				'.toplevel_page_neve-welcome .wp-submenu a[href*="customize.php"]',
+				window?.neveDash?.moduleObserver?.customLayouts
+			);
+		} else if (!isModuleEnabled && clLinkElem) {
+			clLinkElem.parentNode.remove();
+			clLinkElem = undefined;
+		}
+	});
+}
+
+function run() {
+	// Run only on the Neve Pro tab.
+	if (window.location.hash === '#pro') {
+		autoHideModuleSubMenuPages();
+	}
+}
+
+if (document.readyState !== 'loading') {
+	run();
+} else {
+	document.addEventListener('DOMContentLoaded', function () {
+		run();
+	});
+}

assets/js/src/frontend/blog.js

@@ -4,6 +4,7 @@ import { httpGetAsync, isInView } from '../utils';
 let masonryContainer = null,
 	page = 2;
 const postWrapSelector = '.nv-index-posts .posts-wrapper';
+const triggerSelector = '.infinite-scroll-trigger';
 
 /**
  * Initialize blog JS.
@@ -32,9 +33,10 @@ const masonry = () => {
 	}
 
 	imagesLoaded(masonryContainer, () => {
+		const selector = `article.layout-${blogLayout}`;
 		window.nvMasonry = new Masonry(masonryContainer, {
-			itemSelector: `article.layout-${blogLayout}`,
-			columnWidth: `article.layout-${blogLayout}`,
+			itemSelector: selector,
+			columnWidth: selector,
 			percentPosition: true,
 		});
 	});
@@ -44,15 +46,14 @@ const masonry = () => {
  * Infinite scroll.
  */
 const infiniteScroll = () => {
-	if (NeveProperties.infScroll !== 'enabled') {
+	if (
+		NeveProperties.infScroll !== 'enabled' ||
+		document.querySelector(postWrapSelector) === null
+	) {
 		return;
 	}
 
-	if (document.querySelector(postWrapSelector) === null) {
-		return;
-	}
-
-	isInView(document.querySelector('.infinite-scroll-trigger'), () => {
+	isInView(document.querySelector(triggerSelector), () => {
 		if (parent && parent.wp && parent.wp.customize) {
 			parent.wp.customize.requestChangesetUpdate().then(() => {
 				requestMorePosts();
@@ -64,44 +65,54 @@ const infiniteScroll = () => {
 };
 
 /**
- * Request more posts
+ * Request more posts.
+ *
  */
 const requestMorePosts = () => {
-	const trigger = document.querySelector('.infinite-scroll-trigger');
+	const doc = window.document;
+	const nP = window.NeveProperties;
+
+	const trigger = doc.querySelector(triggerSelector);
 	if (trigger === null) {
 		return;
 	}
-	document.querySelector('.nv-loader').style.display = 'block';
-	if (page > NeveProperties.maxPages) {
+	const loader = doc.querySelector('.nv-loader');
+	loader.style.display = 'block';
+
+	if (page > nP.maxPages) {
 		trigger.parentNode.removeChild(trigger);
-		document.querySelector('.nv-loader').style.display = 'none';
+		loader.style.display = 'none';
 		return;
 	}
-	const blog = document.querySelector(postWrapSelector);
-	const lang = NeveProperties.lang;
-	const baseUrl = NeveProperties.endpoint + page;
+	const blog = doc.querySelector(postWrapSelector);
+	const lang = nP.lang;
+	const baseUrl = nP.endpoint + page;
 	const url = lang ? baseUrl + '/' + lang : baseUrl;
 	const requestUrl = maybeParseUrlForCustomizer(url);
 	page++;
 
+	// Create an empty div that will be replaced with the new posts. Used to keep the order of the posts.
+	const postsPlaceholder = doc.createElement('div');
+	blog.appendChild(postsPlaceholder);
+
 	httpGetAsync(
 		requestUrl,
 		(response) => {
-			blog.innerHTML += JSON.parse(response);
-			if (NeveProperties.masonryStatus !== 'enabled') {
+			postsPlaceholder.outerHTML = JSON.parse(response);
+			if (nP.masonryStatus !== 'enabled') {
 				return false;
 			}
 			window.nvMasonry.reloadItems();
 			window.nvMasonry.layout();
 		},
-		NeveProperties.query
+		nP.query
 	);
 };
 
 /**
  * Parse in the customizer context.
  *
- * @param {string} url
+ * @param {string} url URL to parse.
  * @return {*} Sanitized URL.
  */
 const maybeParseUrlForCustomizer = (url) => {

bin/envs/cli-setup.sh

@@ -22,7 +22,7 @@ init_environment(){
 	wp --allow-root theme install --activate $NEVE_LOCATION
 	wp --allow-root option update fresh_site 0
   echo "Installing Theme API Plugin"
-  wp --allow-root plugin install https://github.com/cristian-ungureanu/wp-thememods-api/archive/refs/heads/main.zip --force --activate
+  wp --allow-root plugin install https://github.com/codeinwp/wp-thememods-api/archive/refs/heads/main.zip --force --activate
 }
 
 

e2e-tests/fixtures/customizer/layout/blog-archive-setting-setup.json

@@ -20,5 +20,13 @@
 		"neve_blog_covers_text_color": "#bada55",
 		"neve_grid_layout": "{\"desktop\":2,\"tablet\":2,\"mobile\":2}",
 		"neve_enable_masonry": true
+	},
+	"archive4": {
+		"neve_blog_archive_layout": "default",
+		"neve_post_excerpt_length": 15,
+		"neve_post_thumbnail_box_shadow": 4,
+		"neve_post_content_ordering": "[\"title-meta\", \"excerpt\"]",
+		"neve_post_meta_ordering": "[\"date\", \"author\", \"category\"]",
+		"neve_pagination_type": "number"
 	}
 }

e2e-tests/playwright.config.ts

@@ -5,7 +5,7 @@ export default defineConfig({
 	forbidOnly: !!process.env.CI,
 	workers: process.env.CI ? 6 : undefined,
 	retries: 0,
-	timeout: parseInt(process.env.TIMEOUT || '', 10) || 100_000, // Defaults to 100 seconds.
+	timeout: parseInt(process.env.TIMEOUT || '', 10) || 150_000, // Defaults to 100 seconds.
 	fullyParallel: true,
 	projects: [
 		// Setup project

e2e-tests/specs/customizer/general/color-control.spec.ts

@@ -11,7 +11,7 @@ test.describe('Color Control', () => {
 	});
 
 	test('Test Color Control - Front End', async ({ page }) => {
-		page.goto('/?test_name=colorControl');
+		await page.goto('/?test_name=colorControl');
 		await expect(
 			page.locator('.hide-on-mobile .header-main-inner')
 		).toHaveCSS('color', 'rgb(253, 143, 106)');

e2e-tests/specs/customizer/general/custom-global-colors.spec.ts

@@ -36,7 +36,7 @@ test.describe('Custom Global Color Control', () => {
 		await page.locator('.block-editor-rich-text__editable').first().click();
 		// use Background color control to open the color picker, available since WP 6.1
 		await page.getByRole('button', { name: 'Background' }).click();
-		await page.getByRole('button', { name: 'Color: Custom 1' }).click();
+		await page.getByRole('option', { name: 'Color: Custom 1' }).click();
 		await page
 			.locator('.block-editor-panel-color-gradient-settings__color-name')
 			.getByText('Text')
@@ -72,6 +72,6 @@ test.describe('Custom Global Color Control', () => {
 		await page.goto('/hello-world/?test_name=custom-global-colors');
 		await expect(
 			await page.locator('.nv-content-wrap p').first()
-		).toHaveClass(/has-custom-1-color/);
+		).toHaveClass(/has-custom-1-background-color/);
 	});
 });

e2e-tests/specs/customizer/layout/blog-archive-settings.spec.ts

@@ -256,3 +256,22 @@ test.describe('Blog/Archive 3 / Covers Layout', () => {
 		}
 	});
 });
+
+test.describe('Blog/Archive 4 / Default Layout', () => {
+	test.beforeAll(async ({ request, baseURL }) => {
+		await setCustomizeSettings('defaultLayout', data.archive4, {
+			request,
+			baseURL,
+		});
+	});
+
+	test('Tests If Post Thumbnail Class Is Removed', async ({ page }) => {
+		await page.goto('/?test_name=defaultLayout');
+
+		await page.waitForSelector('article.post');
+
+		expect(
+			await page.locator('article.post.has-post-thumbnail').count()
+		).toEqual(0);
+	});
+});