Merge branch 'develop' into feat/getting-started-onboarding

# Conflicts:
#	src/components/modal-design-library/modal.js
#	src/plugins/global-settings/colors/index.js

Author: kaeizen

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/carousel/frontend-carousel.js

@@ -93,11 +93,15 @@ class _StackableCarousel {
 					const clone = original.cloneNode( true )
 					clone.classList.add( `stk-slide-clone-${ slideIndex + 1 }` )
 					clone.style.zIndex = -1
+
+					clone.style.willChange = 'transform'
+					clone.style.transform = 'translateX( 0 )'
 					original.style.willChange = 'transform'
 					original.style.transform = 'TranslateX( 0 )'
 
 					// prevents flickering when changing the value of TranslateX
 					original.style.transition = 'transform 0s'
+					clone.style.transition = 'transform 0s'
 
 					this.clones.push( clone )
 
@@ -117,11 +121,14 @@ class _StackableCarousel {
 					}
 					step++
 				} else if ( step === 2 ) {
-					const numSlides = this.slideEls.length
-					const slideClientRect = this.slideEls[ 0 ].getBoundingClientRect()
-					const slideWidth = slideClientRect.width
+					// Calculate the difference between the first slide and the first clone
+					// This is used to calculate the translateX values for the slides and clones
+					const slideOffsetLeft = this.slideEls[ 0 ].offsetLeft
+					const cloneOffsetLeft = this.clones[ 0 ].offsetLeft
 
-					this.slideTranslateX = `calc((${ slideWidth }px * ${ numSlides }) + (var(--gap) * ${ numSlides }))`
+					const diff = Math.abs( slideOffsetLeft - cloneOffsetLeft )
+					this.slideTranslateX = ( this.isRTL ? -diff : diff ) + 'px'
+					this.cloneTranslateX = ( this.isRTL ? diff : -diff ) + 'px'
 
 					step++
 				} else if ( step === 3 ) {
@@ -297,12 +304,12 @@ class _StackableCarousel {
 		const needToSwap = this.needToSwapCount( slide )
 		let startIndex = 0
 		let endIndex = 0
-		let slideTranslateXValue = 0
+		let useSlideTranslateX = false
 		if ( needToSwap > 0 && this.swappedSlides < needToSwap ) {
 			startIndex = this.swappedSlides
 			endIndex = needToSwap
 
-			slideTranslateXValue = this.slideTranslateX
+			useSlideTranslateX = true
 
 			this.swappedSlides = endIndex
 		} else if ( this.swappedSlides > needToSwap ) {
@@ -317,7 +324,10 @@ class _StackableCarousel {
 		const runSteps = () => {
 			if ( step === 0 ) {
 				this.slideEls.slice( startIndex, endIndex ).forEach( slide => {
-					slide.style.transform = `TranslateX(${ slideTranslateXValue })`
+					slide.style.transform = `translateX(${ useSlideTranslateX ? this.slideTranslateX : 0 })`
+				} )
+				this.clones.slice( startIndex, endIndex ).forEach( clone => {
+					clone.style.transform = `translateX(${ useSlideTranslateX ? this.cloneTranslateX : 0 })`
 				} )
 				step++
 				requestAnimationFrame( runSteps )

src/block/design-library/index.js

@@ -24,6 +24,7 @@ export const settings = {
 	},
 	supports: {
 		stkSaveBlockStyle: false,
+		inserter: false, // Always hide design library from block inserter
 	},
 	example: {
 		attributes: {

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