Fix: multiple block editor JavaScript warnings

src/block-components/linking/index.js

@@ -44,7 +44,7 @@ export const _Linking = () => {
 	return <div
 		className="stk-linking-wrapper"
 	>
-		<Tooltip position="bottom" text={
+		<Tooltip placement="bottom" text={
 			<>
 				{ __( 'When linked, styling this block would also style other linked blocks in adjacent columns.', i18n ) }
 				<br />

src/block/map/location-control.js

@@ -62,6 +62,7 @@ const LocationControl = props => {
 			onChange={ value => {
 				props.onTextChange( value )
 			} }
+			__next40pxDefaultSize
 		/>
 	)
 }

src/components/advanced-autosuggest-control/editor.scss

@@ -1,12 +1,17 @@
 .ugb-advanced-autosuggest-control {
 	margin-bottom: 16px;
+
+	.stk-inspector-control__reset-button {
+		transform: translateY(-3px);
+	}
 }
 .ugb-advanced-autosuggest-control__select {
 	> * {
 		position: relative;
 	}
 	input {
 		width: 100%;
+		height: 40px; // Follow new WP standard.
 	}
 	.react-autosuggest__suggestions-container {
 		position: absolute;

src/components/advanced-focal-point-control/index.js

@@ -42,6 +42,7 @@ const AdvancedFocalPointControl = props => {
 				{ ...propsToPass }
 				value={ value || FOCAL_DEFAULT_VALUE }
 				onChange={ typeof props.onChange === 'undefined' ? onChange : props.onChange }
+				__nextHasNoMarginBottom
 			/>
 			<ResetButton
 				allowReset={ props.allowReset }

src/components/advanced-range-control/editor.scss

@@ -15,6 +15,7 @@
 	flex: 1;
 	display: flex;
 	align-items: center;
+	height: 40px; // Follow new WP standard.
 	.components-range-control {
 		flex: 1;
 		margin: 0 !important;

src/components/advanced-range-control/range-control.js

@@ -163,6 +163,8 @@ const StackableRangeControl = memo( props => {
 				? props.sliderMax
 				: ( props.max === Infinity ? 100 : props.max ) // Dont' allow Infinity on the slider since it will not move.
 			}
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
 		/>
 		{ withInputField && isNumberControlSupported && (
 			<NumberControl
@@ -177,6 +179,8 @@ const StackableRangeControl = memo( props => {
 				value={ value }
 				placeholder={ placeholderValue }
 				type="text"
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
 			/>
 		) }
 		{ _children }

src/components/advanced-select-control/index.js

@@ -35,6 +35,8 @@ const AdvancedSelectControl = memo( props => {
 				role="listbox"
 				value={ typeof props.value === 'undefined' ? value : props.value }
 				onChange={ typeof props.onChange === 'undefined' ? onChange : props.onChange }
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
 			/>
 			<ResetButton
 				allowReset={ props.allowReset }

src/components/advanced-text-control/index.js

@@ -66,6 +66,8 @@ const AdvancedTextControl = memo( props => {
 					value={ internalValue }
 					onChange={ internalOnChange }
 					className={ classnames( propsToPass.className, 'ugb-advanced-text-control' ) }
+					__nextHasNoMarginBottom
+					__next40pxDefaultSize
 				/>
 			</DynamicContentControl>
 			<ResetButton

src/components/advanced-toggle-control/editor.scss

@@ -4,7 +4,7 @@
 
 .stk-toggle-control .components-base-control__field {
 	display: flex;
-	align-items: center;
+	align-items: flex-start;
 	.components-form-toggle {
 		margin-inline-end: 12px;
 	}

src/components/advanced-toggle-control/index.js

@@ -50,7 +50,7 @@ const AdvancedToggleControl = memo( props => {
 			id={ id }
 			help={ helpLabel }
 			className={ className }
-			allowReset={ true }
+			allowReset={ props.allowReset }
 			value={ checked }
 			showReset={ props.defaultValue ? checked !== props.defaultValue : checked }
 			onChange={ onChange }
@@ -72,7 +72,7 @@ const AdvancedToggleControl = memo( props => {
 
 AdvancedToggleControl.defaultProps = {
 	className: '',
-	allowReset: false,
+	allowReset: true,
 	showReset: null,
 	defaultValue: '',
 

src/components/base-control/index.js

@@ -37,6 +37,8 @@ const BaseControl = props => {
 		<_BaseControl
 			help={ props.help }
 			className={ className }
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 		>
 			{ props.hasLabel &&
 				<BaseControlMultiLabel

src/components/base-control2/editor.scss

@@ -18,6 +18,9 @@ $right-space: 28px;
 			margin: 0 !important;
 			font-size: 13px !important;
 		}
+		&:not(:empty) {
+			height: 24px; // Prevent the label from changing sizes if toggle disappears.
+		}
 	}
 	&.stk-control-label--bold {
 		margin-bottom: 16px;
@@ -49,7 +52,7 @@ $right-space: 28px;
 .stk-control__reset-button {
 	position: absolute;
 	right: -28px;
-	top: 4px;
+	top: 7px;
 	margin: 0;
 	width: 24px !important;
 	padding: 0 !important;

src/components/base-control2/index.js

@@ -68,6 +68,7 @@ export const BaseControl = props => {
 		<GutBaseControl
 			help={ props.help }
 			className={ className }
+			__nextHasNoMarginBottom
 		>
 			<VisualGuide { ...props.visualGuide }>
 				<div className={ labelClassName }>

src/components/button-icon-popover-control/index.js

@@ -69,6 +69,7 @@ const ButtonIconPopoverControl = memo( props => {
 					label={ props.label }
 					checked={ props.checked }
 					onChange={ props.onToggle }
+					__nextHasNoMarginBottom
 				/>
 			) }
 			<div className="ugb-button-icon-control__wrapper">

src/components/code-textarea-control/index.js

@@ -18,6 +18,7 @@ const CodeTextareaControl = props => {
 		<BaseControl
 			help={ props.help }
 			className={ classnames( 'stk-code-textarea-control', props.className ) }
+			__nextHasNoMarginBottom
 		>
 			<BaseControlMultiLabel
 				label={ props.label }

src/components/color-palette-control/editor.scss

@@ -37,7 +37,7 @@
 	}
 
 	.stk-control__reset-button {
-		margin-top: 6px;
+		margin-top: 1px;
 	}
 
 	&:has(.components-button[aria-disabled="true"]) {

src/components/color-scheme-preview/index.js

@@ -70,7 +70,7 @@ export const ColorSchemePresetPicker = ( {
 	label, presets, onPresetClick,
 } ) => {
 	return (
-		<BaseControl label={ label } className="stk-preset-color-schemes__control">
+		<BaseControl label={ label } className="stk-preset-color-schemes__control" __nextHasNoMarginBottom>
 			<div className="stk-preset-color-schemes__preset-wrapper">
 				{ presets.map( ( colors, index ) => {
 					return <ColorSchemePreview

src/components/design-separator-control/index.js

@@ -100,6 +100,7 @@ const DesignSeparatorControl = props => {
 			id="ugb-design-separator-control"
 			label={ label }
 			help={ help }
+			__nextHasNoMarginBottom
 		>
 			<DesignControl
 				options={ options }

src/components/dynamic-content-control/editor.scss

@@ -90,3 +90,10 @@
 		}
 	}
 }
+
+// Dynamic content fields in the popover are too close together.
+.stackable-dynamic-content__popover-content {
+	.components-base-control {
+		margin-bottom: 16px;
+	}
+}

src/components/dynamic-content-control/index.js

@@ -566,6 +566,8 @@ const DynamicContentControl = ( {
 					<TextControl
 						value={ otherProps.placeholder }
 						disabled={ true }
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 					/>
 				) }
 				<DynamicContentButton { ...otherProps } />

src/components/four-number-control/index.js

@@ -7,9 +7,7 @@ import Button from '../button'
 /**
  * WordPress dependencies
  */
-import {
-	BaseControl, Dashicon,
-} from '@wordpress/components'
+import { BaseControl, Dashicon } from '@wordpress/components'
 import { __ } from '@wordpress/i18n'
 
 /**
@@ -147,6 +145,7 @@ class FourNumberControl extends Component {
 			<BaseControl
 				help={ this.props.help }
 				className={ classnames( 'ugb-four-number-control', this.props.className ) }
+				__nextHasNoMarginBottom
 			>
 				<BaseControlMultiLabel
 					label={ this.props.label }

src/components/four-range-control/editor.scss

@@ -2,6 +2,7 @@
 	position: relative;
 	display: flex;
 	align-items: center;
+	margin-top: 4px;
 }
 .ugb-four-range-control__icon {
 	height: 20px;

src/components/help-tooltip/index.js

@@ -54,6 +54,7 @@ const HelpTooltip = props => {
 					className="ugb-help-tooltip__checkbox"
 					checked={ ! props.tooltipsEnabled }
 					onChange={ checked => props.onTooltipsEnabledChange( ! checked ) }
+					__nextHasNoMarginBottom
 				/>
 			}
 		</PanelBody>

src/components/icon-search-popover/editor.scss

@@ -59,8 +59,8 @@
 		flex-basis: calc(100% - 50px);
 	}
 	.components-button.ugb-icon-popover__settings-button.ugb-button-component {
-		width: 36px;
-		height: 30px;
+		width: 40px;
+		height: 40px;
 		margin-left: 8px;
 	}
 	.components-range-control__upload,

src/components/icon-search-popover/index.js

@@ -214,6 +214,8 @@ const IconSearchPopover = props => {
 						value={ value }
 						onChange={ setValue }
 						placeholder={ __( 'Type to search icon', i18n ) }
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 					/>
 					{ isPro &&
 						<Button

src/components/image-alt-control/index.js

@@ -31,6 +31,7 @@ const ImageAltControl = props => {
 					{ __( 'Leave empty if the image is purely decorative.', i18n ) }
 				</>
 			}
+			__nextHasNoMarginBottom
 		/>
 	)
 }

src/components/image-control/index.js

@@ -34,7 +34,7 @@ const ImageControl = props => {
 
 	return (
 		<div className="ugb-image-control">
-			<BaseControl help={ props.help }>
+			<BaseControl help={ props.help } __nextHasNoMarginBottom>
 				<BaseControlMultiLabel
 					label={ props.label }
 					screens={ props.screens }

src/components/modal-design-library/modal.js

@@ -168,6 +168,7 @@ export const ModalDesignLibrary = props => {
 									}, 100 )
 									props.onClose()
 								} }
+								__nextHasNoMarginBottom
 							/>
 						) }
 						<Button
@@ -246,10 +247,12 @@ export const ModalDesignLibrary = props => {
 							onChange={ value => {
 								setEnableBackground( value )
 							} }
+							__nextHasNoMarginBottom
 						/>
 						<BaseControl
 							label={ __( 'Background Scheme', i18n ) }
 							className="ugb-modal-design-library__color-scheme-label"
+							__nextHasNoMarginBottom
 						>
 							<Dropdown
 								className="ugb-modal-design-library__color-scheme-dropdown"
@@ -316,6 +319,7 @@ export const ModalDesignLibrary = props => {
 						<BaseControl
 							label={ __( 'Container Scheme', i18n ) }
 							className="ugb-modal-design-library__color-scheme-label"
+							__nextHasNoMarginBottom
 						>
 							<Dropdown
 								popoverProps={ popoverProps }

src/components/resizer-tooltip/index.js

@@ -222,6 +222,7 @@ const ResizerTooltip = props => {
 							<BaseControl
 								help={ props.help }
 								className={ classnames( 'stk-control stk--no-padding', props.className ) }
+								__nextHasNoMarginBottom
 							>
 								<div className="stk-control-label">
 									<div className="components-base-control__label"><h3>{ sprintf( __( '%s Size', i18n ), props.label ) }</h3></div>

src/components/small-number-control/index.js

@@ -9,6 +9,7 @@ const SmallNumberControl = props => {
 			type="number"
 			className="ugb-small-number-control"
 			{ ...props }
+			__next40pxDefaultSize
 		/>
 	)
 }

src/components/sortable-picker/index.js

@@ -67,7 +67,7 @@ const SortablePicker = props => {
 	)
 
 	return (
-		<BaseControl className={ classNames } label={ props.label }>
+		<BaseControl className={ classNames } label={ props.label } __nextHasNoMarginBottom>
 			{ enableAddItem && <Dropdown
 				popoverProps={ addItemPopoverProps }
 				renderToggle={ ( { onToggle, isOpen } ) => (

src/deprecated/v2/higher-order/with-google-font/index.js

@@ -14,7 +14,7 @@ const withGoogleFont = createHigherOrderComponent(
 	WrappedComponent => {
 		const NewComponent = props => {
 			const isEditingTemplate = useSelect( select =>
-				select( 'core/edit-post' )?.isEditingTemplate?.()
+				select( 'core/editor' )?.getCurrentPostType?.() === 'wp_template' || false
 			)
 
 			// Reload the Google Fonts in the editor when switching to and from page template editing.

src/plugins/global-settings/color-schemes/index.js

@@ -10,9 +10,12 @@ import ColorSchemePicker from './color-scheme-picker'
  */
 import { i18n, showProNotice } from 'stackable'
 import {
-	PanelAdvancedSettings, HelpTooltip,
-	AdvancedSelectControl, SectionSettings,
+	AdvancedSelectControl,
+	AdvancedToggleControl,
+	HelpTooltip,
+	PanelAdvancedSettings,
 	ProControlButton,
+	SectionSettings,
 } from '~stackable/components'
 import { useBlockColorSchemes } from '~stackable/hooks'
 
@@ -22,7 +25,6 @@ import { useBlockColorSchemes } from '~stackable/hooks'
 import { addFilter } from '@wordpress/hooks'
 import { Fragment, useState } from '@wordpress/element'
 import { __ } from '@wordpress/i18n'
-import { ToggleControl } from '@wordpress/components'
 import { useSelect, dispatch } from '@wordpress/data'
 import { models } from '@wordpress/api'
 
@@ -145,10 +147,11 @@ addFilter( 'stackable.global-settings.inspector.global-colors.toggle-controls',
 
 	return <>
 		{ output }
-		<ToggleControl
+		<AdvancedToggleControl
 			label={ __( 'Show Global Color Schemes', i18n ) }
 			checked={ ! hideColorSchemeColors }
 			onChange={ value => onChange( ! value ) }
+			allowReset={ false }
 		/>
 
 	</>

src/plugins/global-settings/colors/editor-loader.js

@@ -48,7 +48,7 @@ const renderGlobalStyles = ( newColors, isEditingTemplate, setStyles ) => {
 export const GlobalColorStyles = () => {
 	const { colors, isEditingTemplate } = useSelect( select => ( {
 		colors: select( 'stackable/global-colors' ).getSettings().stackableColors || [],
-		isEditingTemplate: select( 'core/edit-post' )?.isEditingTemplate?.() || false,
+		isEditingTemplate: select( 'core/editor' )?.getCurrentPostType?.() === 'wp_template' || false,
 	} ) )
 	const [ styles, setStyles ] = useState( '' )