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/image/editor.scss

@@ -84,6 +84,17 @@
 	}
 }
 
+// Hide the size tooltip when the image resizer is too narrow.
+.stk-img-resizer {
+	container-type: inline-size;
+}
+
+@container (max-width: 139px) {
+	.stk-resizer-tooltip {
+		display: none !important;
+	}
+}
+
 .stk-img-resizer-tooltip {
 	background: rgba(0, 0, 0, 0.75);
 	border-radius: 2px;
@@ -136,11 +147,6 @@
 	}
 }
 
-// If the image its too small, don't show the tooltip.
-.stk--too-small .stk-img-resizer-tooltip {
-	display: none !important;
-}
-
 .stk-image-size-popup {
 	.components-popover__content {
 		padding: 16px;

src/block-components/image/image.js

@@ -80,7 +80,6 @@ const Image = memo( props => {
 
 	const [ currentHeight, setCurrentHeight ] = useState()
 	const [ currentWidth, setCurrentWidth ] = useState()
-	const [ imageWidthIsTooSmall, setImageWidthIsTooSmall ] = useState( false )
 	const imageRef = useRef()
 	const wrapperRef = useRef()
 
@@ -109,24 +108,8 @@ const Image = memo( props => {
 		'stk--never-resized': ( ! src || hasImageError ) && neverResized,
 		'stk--is-resizing': isResizing,
 		'stk--no-click-to-edit': ! props.enableClickToEdit,
-		// If the image is too small, hide the size tooltip.
-		'stk--too-small': imageWidthIsTooSmall,
 	} )
 
-	// Observe the size of the image, if it's too small, we shouldn't show the
-	// size tooltip.
-	useEffect( () => {
-		if ( imageRef.current ) {
-			const resizeObserver = new ResizeObserver( entries => { // eslint-disable-line compat/compat
-				for ( const entry of entries ) {
-					setImageWidthIsTooSmall( entry.contentRect.width < 140 )
-				}
-			} )
-			resizeObserver.observe( imageRef.current )
-			return () => resizeObserver.disconnect()
-		}
-	}, [ imageRef.current ] )
-
 	const imageClasses = getImageClasses( props )
 
 	return (

src/components/block-css/use-block-style-generator.js

@@ -1,5 +1,8 @@
 import { useQueryLoopInstanceId } from '~stackable/util'
-import { useMemo, useRef } from '@wordpress/element'
+import {
+	useLayoutEffect, useMemo, useRef,
+} from '@wordpress/element'
+import { dispatch, select } from '@wordpress/data'
 import { useRafEffect } from '~stackable/hooks'
 import CssSaveCompiler from './css-save-compiler'
 
@@ -73,5 +76,21 @@ export const useBlockCssGenerator = props => {
 		attributes.generatedCss = saveCss
 	}, [ attributes, version ] )
 
-	return editCss
+	const styleKey = `${ clientId }-${ instanceId }`
+
+	useLayoutEffect( () => {
+		dispatch( 'stackable/editor-block-css' ).setBlockCss( styleKey, editCss || '' )
+		return () => {
+			// Keep CSS in the store across preview remounts. Only remove when the
+			// block was actually deleted from the editor.
+			const block = select( 'core/block-editor' )?.getBlock( clientId )
+			if ( ! block ) {
+				dispatch( 'stackable/editor-block-css' ).removeBlockCss( styleKey )
+			}
+		}
+	}, [ styleKey, editCss, clientId ] )
+
+	// We used to return the CSS here, but for optimization, now
+	// CSS is injected via the unified editor stylesheet plugin.
+	return null
 }

src/higher-order/with-block-wrapper/index.js

@@ -12,7 +12,7 @@
  * Internal dependencies
  */
 import { BlockWrapper } from '~stackable/components'
-import { useBlockHoverState } from '~stackable/hooks'
+import { useBlockHoverState, useDeviceType } from '~stackable/hooks'
 
 /**
  * WordPress dependencies
@@ -75,6 +75,7 @@ let selectedBlock = null
  */
 export const useDevicePreviewOptimization = blockProps => {
 	const { clientId, isSelected } = blockProps
+	const deviceType = useDeviceType()
 	const { rootBlockClientId } = useSelect(
 		select => {
 			const { getBlockRootClientId } = select( 'core/block-editor' )
@@ -107,20 +108,28 @@ export const useDevicePreviewOptimization = blockProps => {
 	// block error when switching from tablet to desktop.  Also, always display
 	// the block if it's nested (not a root block), since if we delay the
 	// display, it will look like the blocks are slowly loading.
-	const displayedByDefault = ! isRootBlock || selectedBlock === clientId || firstLoad
+	// In tablet/mobile iframe preview, skip the mount delay so styles apply immediately.
+	const skipMountDelay = deviceType !== 'Desktop'
+	const displayedByDefault = ! isRootBlock || selectedBlock === clientId || firstLoad || skipMountDelay
 
 	const [ isDisplayed, setIsDisplayed ] = useState( displayedByDefault )
 
-	// If the block isn't displayed, display it after a delay, this trick
-	// apparently makes Desktop -> Tablet/Mobile previews fast.
+	// Delay mounting root blocks on desktop only (original preview-switch optimization).
 	useEffect( () => {
+		if ( skipMountDelay ) {
+			setIsDisplayed( true )
+			return undefined
+		}
+
 		if ( ! isDisplayed ) {
 			const t = setTimeout( () => {
 				setIsDisplayed( true )
 			}, 300 )
 			return () => clearTimeout( t )
 		}
-	}, [ isDisplayed ] )
+
+		return undefined
+	}, [ isDisplayed, skipMountDelay ] )
 
 	return isDisplayed
 }