Prevent editor crash when updating styles in Site Desing component (#2631)

* Fix CoBlocks/Go Design Style conflict

* Refactor to remove iframe injection

* Update RC tests to 6.8-RC4

Author: EvanHerman

.github/workflows/test-wp-next.yml

@@ -23,7 +23,7 @@ jobs:
     runs-on: ubuntu-latest
     outputs:
       # Should be current latest WP Next release on `wordpress.org`. eg: `https://wordpress.org/wordpress-6.5-beta2.zip`
-      wp_next: "https://wordpress.org/wordpress-6.5-RC4.zip"
+      wp_next: "https://wordpress.org/wordpress-6.8-RC2.zip"
     steps:
       - run: echo "Setting WP Next Constant"
 
@@ -35,7 +35,7 @@ jobs:
     uses: ./.github/workflows/test-e2e-cypress.yml
     with:
       wpVersion: ${{ needs.set_constant.outputs.wp_next }}
-      installPath: "tests-wordpress-6.5-RC4"
+      installPath: "tests-wordpress-6.8-RC2"
       theme: "https://downloads.wordpress.org/theme/go.zip"
     concurrency:
       group: chrome-wp-next

src/extensions/site-design/color-palette-preview.js

@@ -45,7 +45,10 @@ export function ColorPalettePreviews() {
 		updateColors();
 
 		Object.entries( currentColors ).forEach( ( [ name, color ] ) => {
-			document.getElementsByClassName( siteDesign.editorClass )[ 0 ].style.setProperty( `--go--color--${ name }`, color );
+			const editor = document.getElementsByClassName( siteDesign.editorClass )[ 0 ];
+			if ( editor ) {
+				document.getElementsByClassName( siteDesign.editorClass )[ 0 ].style.setProperty( `--go--color--${ name }`, color );
+			}
 		} );
 	}, [ currentColors ] );
 

src/extensions/site-design/component.js

@@ -63,6 +63,10 @@ export function SiteDesignStyles() {
 
 		const stylesElement = document.getElementById( 'site-design-styles' );
 
+		if ( ! stylesElement ) {
+			return;
+		}
+
 		fontStylesCache = !! fontStylesCache ? fontStylesCache : designResp.fontStyles;
 
 		// Set the style element innerHTML to remove the old design style.

src/extensions/site-design/hooks/useFontSize.js

@@ -16,7 +16,10 @@ function useFontSize() {
 		if ( ! baseFontSize ) {
 			return;
 		}
-		document.getElementsByClassName( siteDesign.editorClass )[ 0 ].style.setProperty( '--go--font-size', `${ baseFontSize }rem` );
+		const editor = document.getElementsByClassName( siteDesign.editorClass )[ 0 ];
+		if ( editor ) {
+			editor.style.setProperty( '--go--font-size', `${ baseFontSize }rem` );
+		}
 	}, [ baseFontSize ] );
 
 	return [ baseFontSize, designFontSize ];

src/extensions/site-design/hooks/useTypeRatio.js

@@ -14,7 +14,10 @@ function useTypeRatio() {
 		if ( ! typeRatio ) {
 			return;
 		}
-		document.getElementsByClassName( siteDesign.editorClass )[ 0 ].style.setProperty( '--go--type-ratio', typeRatio );
+		const editor = document.getElementsByClassName( siteDesign.editorClass )[ 0 ];
+		if ( editor ) {
+			editor.style.setProperty( '--go--type-ratio', typeRatio );
+		}
 	}, [ typeRatio ] );
 
 	return [ typeRatio, designTypeRatio ];