WordPress 6.7 compatibility

.github/workflows/tests-e2e.yml

@@ -17,14 +17,9 @@ concurrency:
 
 jobs:
   playwright:
-    name: Playwright - ${{ matrix.part }}
+    name: Playwright
     runs-on: ubuntu-latest
     if: ${{ github.repository == 'nk-crew/lazy-blocks' || github.event_name == 'pull_request' }}
-    strategy:
-      fail-fast: false
-      matrix:
-        part: [1, 2, 3, 4]
-        totalParts: [4]
 
     steps:
       - uses: actions/checkout@v4
@@ -45,4 +40,4 @@ jobs:
 
       - name: Run the tests
         run: |
-          xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- npm run test:e2e -- --shard=${{ matrix.part }}/${{ matrix.totalParts }}
+          xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- npm run test:e2e

assets/admin/templates/index.js

@@ -14,7 +14,7 @@ import { useSelect } from '@wordpress/data';
 import { useEntityProp } from '@wordpress/core-data';
 import { PanelRow, SelectControl } from '@wordpress/components';
 import { useDebounce } from '@wordpress/compose';
-import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
+import { PluginDocumentSettingPanel } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -182,6 +182,8 @@ function UpdateEditor() {
 						onChange={(value) => {
 							updateMeta('_lzb_template_post_types', value);
 						}}
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
 					/>
 				</div>
 			</PanelRow>
@@ -194,6 +196,8 @@ function UpdateEditor() {
 						onChange={(value) => {
 							updateMeta('_lzb_template_lock', value);
 						}}
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
 					/>
 				</div>
 			</PanelRow>

assets/admin/tools/index.scss

@@ -19,6 +19,19 @@
 		background-color: #f1f1f1;
 		border: 1px solid #ccd0d4;
 		border-radius: 4px;
+
+		.components-toggle-control__label {
+			padding-top: 3px;
+			margin-left: 0 !important;
+
+			> span {
+				margin-top: -3px;
+			}
+		}
+
+		.components-toggle-control > .components-base-control__field > .components-flex {
+			align-items: start;
+		}
 	}
 
 	.lzb-export-textarea {

assets/admin/tools/tools.js

@@ -112,7 +112,7 @@ export default function Templates() {
 		return (
 			<>
 				<div className="lzb-export-select-items">
-					<BaseControl>
+					<BaseControl __nextHasNoMarginBottom>
 						<ToggleControl
 							label={__('Select all', 'lazy-blocks')}
 							checked={
@@ -140,6 +140,7 @@ export default function Templates() {
 									setDisabledTemplates(newDisabled);
 								}
 							}}
+							__nextHasNoMarginBottom
 						/>
 						{data[type].map((item) => {
 							const isSelected =
@@ -215,6 +216,7 @@ export default function Templates() {
 											setDisabledTemplates(newDisabled);
 										}
 									}}
+									__nextHasNoMarginBottom
 								/>
 							);
 						})}
@@ -228,6 +230,8 @@ export default function Templates() {
 								className="lzb-export-code"
 								readOnly
 								value={getPHPStringCode(type)}
+								__next40pxDefaultSize
+								__nextHasNoMarginBottom
 							/>
 						</div>
 						<div className="lzb-export-buttons">

assets/components/block-slug/editor.scss

@@ -13,7 +13,7 @@
 		white-space: nowrap;
 		padding: 6px 8px;
 		padding-right: 10px;
-		height: 32px;
+		height: 40px;
 		border: 1px solid #949494;
 		line-height: normal;
 		color: $gray-800;
@@ -39,7 +39,9 @@
 		flex: 1;
 		margin-bottom: 0 !important;
 
-		input {
+		input.components-text-control__input {
+			padding-left: 5px;
+			padding-right: 5px;
 			margin-left: 0;
 			border-left: none;
 			border-top-left-radius: 0;

assets/components/block-slug/index.js

@@ -17,7 +17,11 @@ import { __ } from '@wordpress/i18n';
 
 export default function BlockSlug(props) {
 	return (
-		<BaseControl id={props.label} label={props.label || ''}>
+		<BaseControl
+			id={props.label}
+			label={props.label || ''}
+			__nextHasNoMarginBottom
+		>
 			<div className="lazyblocks-component-block-slug">
 				<Dropdown
 					className="lazyblocks-component-block-slug-prefix-dropdown"
@@ -61,6 +65,8 @@ export default function BlockSlug(props) {
 						...props,
 						...{ label: '' },
 					}}
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
 				/>
 			</div>
 		</BaseControl>

assets/components/document-tabs/editor.scss

@@ -10,6 +10,7 @@
 		display: flex;
 		margin-bottom: -1px;
 		background-color: #fff;
+		padding: 0;
 		z-index: 2;
 
 		> ul {
@@ -21,6 +22,7 @@
 
 			button {
 				position: relative;
+				padding: 12px 16px;
 				height: 48px;
 				font-weight: 500;
 				outline: none;

assets/components/icon-picker/index.js

@@ -88,6 +88,8 @@ function IconPickerDropdown(props) {
 							onChange={(searchVal) => setSearch(searchVal)}
 							placeholder={__('Type to Search…', 'lazy-blocks')}
 							autoComplete="off"
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
 						/>
 					</Fragment>
 				),
@@ -297,7 +299,12 @@ function IconPickerDropdown(props) {
 	);
 
 	return label ? (
-		<BaseControl id={label} label={label} className={className}>
+		<BaseControl
+			id={label}
+			label={label}
+			className={className}
+			__nextHasNoMarginBottom
+		>
 			{dropdown}
 		</BaseControl>
 	) : (

assets/components/preview-server-callback/index.js

@@ -152,12 +152,13 @@ export default function PreviewServerCallback(props) {
 
 	// When the component unmounts, set isMountedRef to false. This will
 	// let the async fetch callbacks know when to stop.
-	useEffect(
-		() => () => {
+	useEffect(() => {
+		isMountedRef.current = true;
+
+		return () => {
 			isMountedRef.current = false;
-		},
-		[]
-	);
+		};
+	}, []);
 
 	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect(() => {

assets/components/pro-notice/index.js

@@ -22,6 +22,7 @@ export default function ProNotice() {
 				id="lazyblocks-pro-notice"
 				label={__('Lazy Blocks Pro', 'lazy-blocks')}
 				className="lazyblocks-component-pro-notice"
+				__nextHasNoMarginBottom
 			>
 				<div>
 					<a
@@ -34,7 +35,10 @@ export default function ProNotice() {
 					</a>
 					<ul className="ul-square">
 						<li>
-							{__('Custom Slugs and Collections', 'lazy-blocks')}
+							{__(
+								'Custom block collections and slug namespaces',
+								'lazy-blocks'
+							)}
 						</li>
 						<li>
 							{__('Controls Conditional Logic', 'lazy-blocks')}

assets/components/tabs/index.js

@@ -10,7 +10,7 @@ import { BaseControl, TabPanel } from '@wordpress/components';
 
 export default function Tabs({ tabs, children }) {
 	return (
-		<BaseControl>
+		<BaseControl __nextHasNoMarginBottom>
 			<TabPanel tabs={tabs} className="lazyblocks-component-tabs">
 				{children}
 			</TabPanel>

assets/editor-constructor/boxes/code-preview/index.js

@@ -138,6 +138,8 @@ export default function CodePreview(props) {
 		const $frameObserver = iframeObserver.current;
 		const $frame = iframeRef.current;
 
+		isMountedRef.current = true;
+
 		return () => {
 			$frameObserver.disconnect();
 			$frame.removeEventListener('load', setIframeHeight);

assets/editor-constructor/boxes/code/index.js

@@ -101,6 +101,8 @@ export default function CustomCodeSettings(props) {
 				value={data.code_output_method || 'html'}
 				onChange={(value) => updateData({ code_output_method: value })}
 				isAdaptiveWidth
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
 			>
 				<ToggleGroupControlOption
 					value="html"
@@ -128,7 +130,7 @@ export default function CustomCodeSettings(props) {
 		data.code_output_method !== 'template' ? (
 			<>
 				<PanelBody>
-					<BaseControl>
+					<BaseControl __nextHasNoMarginBottom>
 						{tabs.length > 1 ? (
 							<TabPanel
 								className="lazyblocks-control-tabs"
@@ -153,7 +155,7 @@ export default function CustomCodeSettings(props) {
 							}}
 						/>
 					</BaseControl>
-					<BaseControl>
+					<BaseControl __nextHasNoMarginBottom>
 						{!showInfo ? (
 							<Button
 								isLink
@@ -209,7 +211,7 @@ export default function CustomCodeSettings(props) {
 				</PanelBody>
 
 				<PanelBody>
-					<BaseControl>
+					<BaseControl __nextHasNoMarginBottom>
 						<ToggleControl
 							label={__(
 								'Single output code for Frontend and Editor',
@@ -219,6 +221,7 @@ export default function CustomCodeSettings(props) {
 							onChange={(value) =>
 								updateData({ code_single_output: value })
 							}
+							__nextHasNoMarginBottom
 						/>
 					</BaseControl>
 				</PanelBody>
@@ -287,6 +290,7 @@ export default function CustomCodeSettings(props) {
 			<BaseControl
 				id="lazyblocks-settings-output-in-editor"
 				label={__('Code Output in Editor', 'lazy-blocks')}
+				__nextHasNoMarginBottom
 			>
 				<SelectControl
 					id="lazyblocks-settings-output-in-editor"
@@ -318,6 +322,8 @@ export default function CustomCodeSettings(props) {
 					onChange={(value) =>
 						updateData({ code_show_preview: value })
 					}
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
 				/>
 			</BaseControl>
 		</PanelBody>,

assets/editor-constructor/boxes/condition/index.js

@@ -17,31 +17,46 @@ export default function ConditionSettings(props) {
 	const [postTypes, setPostTypes] = useState(false);
 
 	useEffect(() => {
+		let isMounted = true;
+		const controller =
+			typeof AbortController === 'undefined'
+				? undefined
+				: new AbortController();
+
 		apiFetch({
 			path: '/lazy-blocks/v1/get-post-types/?args[show_ui]=1&output=object',
-		}).then((resp) => {
-			if (resp && resp.response) {
-				const result = {};
-				Object.keys(resp.response).forEach((name) => {
-					const post = resp.response[name];
+			signal: controller?.signal,
+		})
+			.then((resp) => {
+				if (isMounted && resp && resp.response) {
+					const result = {};
+					Object.keys(resp.response).forEach((name) => {
+						const post = resp.response[name];
 
-					if (
-						![
-							'lazyblocks',
-							'lazyblocks_templates',
-							'attachment',
-							'wp_block',
-							'wp_navigation',
-							'ghostkit_template',
-						].includes(post.name)
-					) {
-						result[post.name] = post.label;
-					}
-				});
+						if (
+							![
+								'lazyblocks',
+								'lazyblocks_templates',
+								'attachment',
+								'wp_block',
+								'wp_navigation',
+								'ghostkit_template',
+							].includes(post.name)
+						) {
+							result[post.name] = post.label;
+						}
+					});
+
+					setPostTypes(result);
+				}
+			})
+			.catch(() => {});
 
-				setPostTypes(result);
-			}
-		});
+		// Cleanup.
+		return () => {
+			isMounted = false;
+			controller?.abort();
+		};
 	}, []);
 
 	const { condition_post_types: conditionPostTypes } = data;
@@ -50,6 +65,7 @@ export default function ConditionSettings(props) {
 		<BaseControl
 			id="lazyblocks-boxes-condition-posts"
 			label={__('Show in posts', 'lazy-blocks')}
+			__nextHasNoMarginBottom
 		>
 			<Select
 				id="lazyblocks-boxes-condition-posts"