fix: move appending of global settings style to the head

Author: Arukuen

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

@@ -45,16 +45,15 @@ const GlobalSettingsLoader = () => {
 	 */
 	useEffect( () => {
 		const editorBody = editorDom?.closest( 'body' )
-		if ( editorBody ) {
-			// No need to check for firstChild, since there will always be at least one
-			// e.g. the post title wrapper and the actual root container.
-			const firstChild = editorBody.firstChild
-			editorBody.insertBefore( globalTypographyWrapper, firstChild )
-			editorBody.insertBefore( globalColorWrapper, firstChild )
-			editorBody.insertBefore( globalSpacingAndBorderWrapper, firstChild )
-			editorBody.insertBefore( globalButtonsAndIconsWrapper, firstChild )
-			editorBody.insertBefore( globalColorSchemesWrapper, firstChild )
-			editorBody.insertBefore( globalPresetControlsWrapper, firstChild )
+		const editorHead = editorBody?.ownerDocument?.head
+
+		if ( editorHead ) {
+			editorHead.appendChild( globalTypographyWrapper )
+			editorHead.appendChild( globalColorWrapper )
+		    editorHead.appendChild( globalSpacingAndBorderWrapper )
+			editorHead.appendChild( globalButtonsAndIconsWrapper )
+			editorHead.appendChild( globalColorSchemesWrapper )
+			editorHead.appendChild( globalPresetControlsWrapper )
 		}
 	}, [ deviceType, editorDom ] )
 
@@ -78,12 +77,12 @@ globalButtonsAndIconsWrapper?.setAttribute( 'id', 'stk-global-buttons-and-icons-
 globalColorSchemesWrapper?.setAttribute( 'id', 'stk-global-color-schemes-styles' )
 globalPresetControlsWrapper?.setAttribute( 'id', 'stk-global-preset-controls-styles' )
 domReady( () => {
-	document?.body?.appendChild( globalTypographyWrapper )
-	document?.body?.appendChild( globalColorWrapper )
-	document?.body?.appendChild( globalSpacingAndBorderWrapper )
-	document?.body?.appendChild( globalButtonsAndIconsWrapper )
-	document?.body?.appendChild( globalColorSchemesWrapper )
-	document?.body?.appendChild( globalPresetControlsWrapper )
+	document?.head?.appendChild( globalTypographyWrapper )
+	document?.head?.appendChild( globalColorWrapper )
+	document?.head?.appendChild( globalSpacingAndBorderWrapper )
+	document?.head?.appendChild( globalButtonsAndIconsWrapper )
+	document?.head?.appendChild( globalColorSchemesWrapper )
+	document?.head?.appendChild( globalPresetControlsWrapper )
 	createRoot( globalTypographyWrapper ).render( <GlobalTypographyStyles /> )
 	createRoot( globalColorWrapper ).render( <GlobalColorStyles /> )
 	createRoot( globalSpacingAndBorderWrapper ).render( <GlobalSpacingAndBordersStyles /> )

src/plugins/theme-block-size/index.js

@@ -27,8 +27,10 @@ export const ThemeBlockSize = () => {
 
 	useEffect( () => {
 		const editorBody = editorDom?.closest( 'body' )
-		if ( editorBody ) {
-			editorBody.insertBefore( themeBlockSizeWrapper, editorBody.firstChild )
+		const editorHead = editorBody?.ownerDocument?.head
+
+		if ( editorHead ) {
+			editorHead.appendChild( themeBlockSizeWrapper )
 		}
 	}, [ deviceType, editorDom ] )
 
@@ -50,6 +52,6 @@ if ( themeBlockSizeWrapper ) {
 }
 
 domReady( () => {
-	document?.body?.appendChild( themeBlockSizeWrapper )
+	document?.head?.appendChild( themeBlockSizeWrapper )
 	createRoot( themeBlockSizeWrapper ).render( <ThemeBlockSize /> )
 } )