fix(editor): Safari preview performance, unified block CSS, and editor scale

.stylelintrc.js

@@ -36,6 +36,23 @@ module.exports = {
 		"selector-class-pattern": null,
 		"value-keyword-case": null,
 		"length-zero-no-unit": null,
-		"font-family-no-missing-generic-family-keyword": null
+		"font-family-no-missing-generic-family-keyword": null,
+		"property-no-unknown": [
+			true,
+			{
+				ignoreProperties: [
+					"container-type",
+					"container-name",
+				],
+			},
+		],
+		"scss/at-rule-no-unknown": [
+			true,
+			{
+				ignoreAtRules: [
+					"container",
+				],
+			},
+		],
 	}
 }

src/block-components/columns/style.js

@@ -181,5 +181,5 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 				},
 			} )
 		} )
-	} )
+	}, [ 'columnArrangement' ] )
 }

src/block-components/helpers/backgrounds/edit.js

@@ -15,6 +15,7 @@ import {
 } from '~stackable/components'
 import {
 	useAttributeEditHandlers,
+	useAttributeValue,
 	useDeviceType,
 	useBlockSetAttributesContext,
 	useBlockHoverState,
@@ -46,23 +47,41 @@ export const BackgroundControls = props => {
 	const deviceType = useDeviceType()
 
 	const {
-		getAttribute,
-		getAttributes,
 		updateAttributes,
 		getAttrName,
 	} = useAttributeEditHandlers( props.attrNameTemplate )
 
+	const backgroundMediaUrl = useAttributeValue( 'backgroundMediaUrl', props.attrNameTemplate )
+	const backgroundMediaUrlTablet = useAttributeValue( 'backgroundMediaUrlTablet', props.attrNameTemplate )
+	const backgroundMediaUrlMobile = useAttributeValue( 'backgroundMediaUrlMobile', props.attrNameTemplate )
+	const backgroundMediaExternalUrl = useAttributeValue( 'backgroundMediaExternalUrl', props.attrNameTemplate )
+	const backgroundMediaExternalUrlTablet = useAttributeValue( 'backgroundMediaExternalUrlTablet', props.attrNameTemplate )
+	const backgroundMediaExternalUrlMobile = useAttributeValue( 'backgroundMediaExternalUrlMobile', props.attrNameTemplate )
+	const backgroundColorType = useAttributeValue( 'backgroundColorType', props.attrNameTemplate )
+	const backgroundColor = useAttributeValue( 'backgroundColor', props.attrNameTemplate )
+	const backgroundPosition = useAttributeValue( 'backgroundPosition', props.attrNameTemplate )
+	const backgroundPositionTablet = useAttributeValue( 'BackgroundPositionTablet', props.attrNameTemplate )
+	const backgroundPositionMobile = useAttributeValue( 'BackgroundPositionMobile', props.attrNameTemplate )
+	const backgroundRepeat = useAttributeValue( 'backgroundRepeat', props.attrNameTemplate )
+	const backgroundRepeatTablet = useAttributeValue( 'BackgroundRepeatTablet', props.attrNameTemplate )
+	const backgroundRepeatMobile = useAttributeValue( 'BackgroundRepeatMobile', props.attrNameTemplate )
+	const backgroundSize = useAttributeValue( 'backgroundSize', props.attrNameTemplate )
+	const backgroundSizeTablet = useAttributeValue( 'BackgroundSizeTablet', props.attrNameTemplate )
+	const backgroundSizeMobile = useAttributeValue( 'BackgroundSizeMobile', props.attrNameTemplate )
+	const backgroundSizeForDevice = useAttributeValue( 'backgroundSize', props.attrNameTemplate, deviceType )
+	const backgroundImageBlendMode = useAttributeValue( 'backgroundImageBlendMode', props.attrNameTemplate )
+
 	const setAttributes = useBlockSetAttributesContext()
 	const [ currentHoverState ] = useBlockHoverState()
 
-	const hasBackgroundMedia = getAttribute( 'backgroundMediaUrl' ) ||
-	getAttribute( 'backgroundMediaUrlTablet' ) ||
-	getAttribute( 'backgroundMediaUrlMobile' ) ||
-	getAttribute( 'backgroundMediaExternalUrl' ) ||
-	getAttribute( 'backgroundMediaExternalUrlTablet' ) ||
-	getAttribute( 'backgroundMediaExternalUrlMobile' )
+	const hasBackgroundMedia = backgroundMediaUrl ||
+	backgroundMediaUrlTablet ||
+	backgroundMediaUrlMobile ||
+	backgroundMediaExternalUrl ||
+	backgroundMediaExternalUrlTablet ||
+	backgroundMediaExternalUrlMobile
 	const checkIsBackgroundVideo = () => {
-		return [ getAttribute( 'backgroundMediaUrl' ), getAttribute( 'backgroundMediaUrlTablet' ), getAttribute( 'backgroundMediaUrlMobile' ) ]
+		return [ backgroundMediaUrl, backgroundMediaUrlTablet, backgroundMediaUrlMobile ]
 			.filter( value => value )
 			.filter( urlIsVideo )
 			.length > 0
@@ -93,8 +112,8 @@ export const BackgroundControls = props => {
 
 					setAttributes( attributes )
 				} }
-				hover={ getAttribute( 'backgroundColorType' ) !== 'gradient' ? 'all' : false }
-				isGradient={ getAttribute( 'backgroundColorType' ) === 'gradient' }
+				hover={ backgroundColorType !== 'gradient' ? 'all' : false }
+				isGradient={ backgroundColorType === 'gradient' }
 			/>
 
 			{ props.hasBackgroundImage &&
@@ -167,7 +186,7 @@ export const BackgroundControls = props => {
 					max={ 10 }
 					step={ 1 }
 					allowReset={ true }
-					placeholder={ getAttribute( 'backgroundColor' ) ? '5' : '0' }
+					placeholder={ backgroundColor ? '5' : '0' }
 					helpTooltip={ {
 						video: 'background-tint',
 						description: __( 'Adjusts the intensity of the background media tint', i18n ),
@@ -214,7 +233,7 @@ export const BackgroundControls = props => {
 				/>
 			}
 
-			{ getAttribute( 'backgroundColorType' ) === 'gradient' && props.hasBackgroundGradientBlendMode &&
+			{ backgroundColorType === 'gradient' && props.hasBackgroundGradientBlendMode &&
 				<BlendModeControl
 					label={ __( 'Background Gradient Blend Mode', i18n ) }
 					attribute={ getAttrName( 'backgroundGradientBlendMode' ) }
@@ -249,10 +268,10 @@ export const BackgroundControls = props => {
 						} )
 					} }
 					allowReset={
-						getAttribute( 'backgroundPosition' ) || getAttribute( 'BackgroundPositionTablet' ) || getAttribute( 'BackgroundPositionMobile' ) ||
-						getAttribute( 'backgroundRepeat' ) || getAttribute( 'BackgroundRepeatTablet' ) || getAttribute( 'BackgroundRepeatMobile' ) ||
-						getAttribute( 'backgroundSize' ) || getAttribute( 'BackgroundSizeTablet' ) || getAttribute( 'BackgroundSizeMobile' ) ||
-						getAttribute( 'backgroundImageBlendMode' )
+						backgroundPosition || backgroundPositionTablet || backgroundPositionMobile ||
+						backgroundRepeat || backgroundRepeatTablet || backgroundRepeatMobile ||
+						backgroundSize || backgroundSizeTablet || backgroundSizeMobile ||
+						backgroundImageBlendMode
 					}
 				>
 
@@ -312,7 +331,7 @@ export const BackgroundControls = props => {
 						responsive="all"
 					/>
 
-					{ getAttributes()[ getAttributeName( getAttrName( 'backgroundSize' ), deviceType ) ] === 'custom' &&
+					{ backgroundSizeForDevice === 'custom' &&
 						<AdvancedRangeControl
 							label={ __( 'Custom Size', i18n ) }
 							attribute={ getAttrName( 'backgroundCustomSize' ) }

src/block-components/helpers/borders/edit.js

@@ -12,10 +12,10 @@ import {
 /**
  * WordPress dependencies
  */
-import { Fragment } from '@wordpress/element'
+import { Fragment, useCallback } from '@wordpress/element'
 import { __ } from '@wordpress/i18n'
 import {
-	useAttributeEditHandlers, useBlockLayoutDefaults, useBlockSetAttributesContext, usePresetControls,
+	useAttributeEditHandlers, useAttributeValue, useBlockLayoutDefaults, useBlockSetAttributesContext, usePresetControls,
 } from '~stackable/hooks'
 import { applyFilters } from '@wordpress/hooks'
 
@@ -59,11 +59,24 @@ const BORDER_CONTROLS_WITH_NONE_VALUE = [
 
 export const BorderControls = props => {
 	const {
-		getAttribute,
 		getAttrName,
 		updateAttributes,
 	} = useAttributeEditHandlers( props.attrNameTemplate )
 
+	const borderType = useAttributeValue( 'borderType', props.attrNameTemplate )
+	const borderRadius = useAttributeValue( 'borderRadius', props.attrNameTemplate )
+	const borderRadiusTablet = useAttributeValue( 'borderRadiusTablet', props.attrNameTemplate )
+	const borderRadiusMobile = useAttributeValue( 'borderRadiusMobile', props.attrNameTemplate )
+
+	const getAttribute = useCallback( attrName => {
+		switch ( attrName ) {
+			case 'borderRadius': return borderRadius
+			case 'borderRadiusTablet': return borderRadiusTablet
+			case 'borderRadiusMobile': return borderRadiusMobile
+			default: return undefined
+		}
+	}, [ borderRadius, borderRadiusTablet, borderRadiusMobile ] )
+
 	const setAttributes = useBlockSetAttributesContext()
 	const { blockLayouts, getPlaceholder } = useBlockLayoutDefaults()
 
@@ -105,7 +118,7 @@ export const BorderControls = props => {
 						const borderStyleProperty = `${ props.placeholderTemplate }-border-style`
 
 						// Set borderType to 'solid' if no borderType is selected and no global border settings is set
-						if ( hasValue && ! ( getAttribute( 'borderType' ) ) && ! blockLayouts?.[ borderStyleProperty ] ) {
+						if ( hasValue && ! borderType && ! blockLayouts?.[ borderStyleProperty ] ) {
 							setAttributes( { [ getAttrName( 'borderType' ) ]: 'solid' } )
 						}
 

src/block-components/helpers/link/edit.js

@@ -10,7 +10,7 @@ import {
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n'
-import { useAttributeEditHandlers } from '~stackable/hooks'
+import { useAttributeEditHandlers, useAttributeValue } from '~stackable/hooks'
 
 export const LinkControls = props => {
 	const {
@@ -21,37 +21,40 @@ export const LinkControls = props => {
 		hasAnchorId = false,
 	} = props
 
-	const {
-		getAttribute,
-		updateAttributeHandler,
-	} = useAttributeEditHandlers( props.attrNameTemplate )
+	const { updateAttributeHandler } = useAttributeEditHandlers( props.attrNameTemplate )
 
-	const url = getAttribute( 'url' ) || ''
+	const url = useAttributeValue( 'url', props.attrNameTemplate ) || ''
+	const hasLinkAttr = useAttributeValue( 'hasLink', props.attrNameTemplate )
+	const newTab = useAttributeValue( 'newTab', props.attrNameTemplate )
+	const hasLightboxAttr = useAttributeValue( 'hasLightbox', props.attrNameTemplate )
+	const rel = useAttributeValue( 'rel', props.attrNameTemplate )
+	const title = useAttributeValue( 'title', props.attrNameTemplate )
+	const hasTitleAttr = useAttributeValue( 'hasTitle', props.attrNameTemplate )
 
-	const showGoogleMapHint = getAttribute( 'hasLightbox' ) &&
+	const showGoogleMapHint = hasLightboxAttr &&
 		url.startsWith( 'https://www.google.com/maps/' ) &&
 		! url.startsWith( 'https://www.google.com/maps/embed' )
 
 	return (
 		<>
-			{ ( hasLink || getAttribute( 'hasLink' ) ) && (
+			{ ( hasLink || hasLinkAttr ) && (
 				<LinkControl
 					label={ __( 'Link / URL', i18n ) }
-					value={ getAttribute( 'url' ) }
+					value={ url }
 					onChange={ updateAttributeHandler( 'url' ) }
 				/>
 			) }
 			<AdvancedToggleControl
 				label={ __( 'Open in new tab', i18n ) }
-				checked={ getAttribute( 'newTab' ) }
+				checked={ newTab }
 				onChange={ updateAttributeHandler( 'newTab' ) }
 			/>
 			{ hasLightbox && (
 				<>
 					<AdvancedToggleControl
 						label={ __( 'Open Link in Lightbox', i18n ) }
 						help={ lightboxHelp }
-						checked={ getAttribute( 'hasLightbox' ) }
+						checked={ hasLightboxAttr }
 						onChange={ updateAttributeHandler( 'hasLightbox' ) }
 					/>
 					{ showGoogleMapHint && (
@@ -70,13 +73,13 @@ export const LinkControls = props => {
 			<AdvancedTextControl
 				label={ __( 'Link rel', i18n ) }
 				help={ __( 'Link relationship keywords, e.g. nofollow noreferrer prefetch', i18n ) }
-				value={ getAttribute( 'rel' ) }
+				value={ rel }
 				onChange={ updateAttributeHandler( 'rel' ) }
 			/>
-			{ ( hasTitle || getAttribute( 'hasTitle' ) ) && (
+			{ ( hasTitle || hasTitleAttr ) && (
 				<AdvancedTextControl
 					label={ __( 'Link Title', i18n ) }
-					value={ getAttribute( 'title' ) }
+					value={ title }
 					onChange={ updateAttributeHandler( 'title' ) }
 					isDynamic={ true }
 					isFormatType={ false }

src/block-components/helpers/size/edit.js

@@ -8,7 +8,7 @@ import {
 	FourRangeControl,
 } from '~stackable/components'
 import {
-	useAttributeEditHandlers, useDeviceType, usePresetControls,
+	useAttributeEditHandlers, useAttributeValue, useDeviceType, usePresetControls,
 } from '~stackable/hooks'
 
 /**
@@ -21,10 +21,13 @@ const Layout = props => {
 	const deviceType = useDeviceType()
 
 	const {
-		getAttribute,
 		getAttrName,
 	} = useAttributeEditHandlers( props.attrNameTemplate )
 
+	const width = useAttributeValue( 'width', props.attrNameTemplate )
+	const widthTablet = useAttributeValue( 'widthTablet', props.attrNameTemplate )
+	const widthMobile = useAttributeValue( 'widthMobile', props.attrNameTemplate )
+
 	const {
 		labelHeight = __( 'Min. Height', i18n ),
 		labelContentWidth = __( 'Max. Content Width', i18n ),
@@ -92,9 +95,9 @@ const Layout = props => {
 			/>
 
 			{ (
-				( getAttribute( 'width' ) !== '' && deviceType === 'Desktop' ) ||
-			    ( ( getAttribute( 'width' ) !== '' || getAttribute( 'widthTablet' ) !== '' ) && deviceType === 'Tablet' ) ||
-			    ( ( getAttribute( 'width' ) !== '' || getAttribute( 'widthTablet' ) !== '' || getAttribute( 'widthMobile' ) !== '' ) && deviceType === 'Mobile' )
+				( width !== '' && deviceType === 'Desktop' ) ||
+			    ( ( width !== '' || widthTablet !== '' ) && deviceType === 'Tablet' ) ||
+			    ( ( width !== '' || widthTablet !== '' || widthMobile !== '' ) && deviceType === 'Mobile' )
 			  ) &&
 				<AdvancedToolbarControl
 					label={ labelHorizontalAlign }

src/block-components/icon/index.js

@@ -1,7 +1,11 @@
 /**
  * External dependencies
  */
-import { useAttributeEditHandlers, useBlockAttributesContext } from '~stackable/hooks'
+import {
+	useAttributeEditHandlers,
+	useAttributeValue,
+	useBlockAttributesContext,
+} from '~stackable/hooks'
 import {
 	getAttrNameFunction, __getValue, getShapeSVG, isElementDescendant,
 } from '~stackable/util'
@@ -177,16 +181,20 @@ export const Icon = props => {
 
 	const uniqueId = useBlockAttributesContext( attributes => attributes.uniqueId )
 
-	const {
-		getAttribute,
-		updateAttributeHandler,
-	} = useAttributeEditHandlers( attrNameTemplate )
+	const { updateAttributeHandler } = useAttributeEditHandlers( attrNameTemplate )
 
-	const ShapeComp = useMemo( () => getShapeSVG( getAttribute( 'backgroundShape' ) || 'blob1' ), [ getAttribute( 'backgroundShape' ) ] )
+	const backgroundShape = useAttributeValue( 'backgroundShape', attrNameTemplate )
+	const iconColorType = useAttributeValue( 'iconColorType', attrNameTemplate )
+	const iconAttr = useAttributeValue( 'icon', attrNameTemplate )
+	const icon2 = useAttributeValue( 'icon2', attrNameTemplate )
+	const iconColor1 = useAttributeValue( 'iconColor1', attrNameTemplate )
+	const iconColor2 = useAttributeValue( 'iconColor2', attrNameTemplate )
+	const showBackgroundShape = useAttributeValue( 'showBackgroundShape', attrNameTemplate )
+	const ariaLabel = useAttributeValue( 'ariaLabel', attrNameTemplate )
 
-	const iconColorType = getAttribute( 'iconColorType' )
+	const ShapeComp = useMemo( () => getShapeSVG( backgroundShape || 'blob1' ), [ backgroundShape ] )
 
-	const _icon = value || getAttribute( 'icon' )
+	const _icon = value || iconAttr
 	const currentIconRef = useRef( _icon )
 	const processedIconRef = useRef( null )
 	const lastIconValueRef = useRef( null )
@@ -320,16 +328,16 @@ export const Icon = props => {
 	const linearGradient = hasLinearGradient ? (
 		renderToString( <LinearGradient
 			id={ 'linear-gradient-' + uniqueId }
-			iconColor1={ getAttribute( 'iconColor1' ) }
-			iconColor2={ getAttribute( 'iconColor2' ) }
+			iconColor1={ iconColor1 }
+			iconColor2={ iconColor2 }
 		/> )
 	) : undefined
 
 	const classNames = classnames(
 		[ 'stk--svg-wrapper' ],
 		{
 			'stk--show-cursor': debouncedIsSelected || openEvenIfUnselected,
-			'stk--has-icon2': getAttribute( 'icon2' ),
+			'stk--has-icon2': icon2,
 		}
 	)
 
@@ -351,10 +359,10 @@ export const Icon = props => {
 					className="stk--inner-svg"
 					prependRenderString={ linearGradient }
 					value={ icon }
-					ariaLabel={ getAttribute( 'ariaLabel' ) }
+					ariaLabel={ ariaLabel }
 				/>
 			) }
-			{ getAttribute( 'showBackgroundShape' ) && <ShapeComp className="stk--shape-icon" /> }
+			{ showBackgroundShape && <ShapeComp className="stk--shape-icon" /> }
 			{ isOpen && (
 				<IconSearchPopover
 					__hasPopover={ true }
@@ -372,12 +380,12 @@ export const Icon = props => {
 					defaultValue={ defaultValue }
 				/>
 			) }
-			{ getAttribute( 'icon2' ) && (
+			{ icon2 && (
 				<SvgIcon
 					className="stk--inner-svg stk--icon-2"
 					prependRenderString={ linearGradient }
-					value={ getAttribute( 'icon2' ) }
-					ariaLabel={ getAttribute( 'ariaLabel' ) }
+					value={ icon2 }
+					ariaLabel={ ariaLabel }
 					style={ { display: 'none' } }
 				/>
 			) }