Refactor globals css in site editor now custom css in editor settings

packages/edit-site/src/components/global-styles/use-global-styles-output.js

@@ -26,7 +26,7 @@ import {
 import { PRESET_METADATA, ROOT_BLOCK_SELECTOR, scopeSelector } from './utils';
 import { getTypographyFontSizeValue } from './typography-utils';
 import { GlobalStylesContext } from './context';
-import { useSetting, useStyle } from './hooks';
+import { useSetting } from './hooks';
 
 // List of block support features that can have their related styles
 // generated under their own feature level selector rather than the block's.
@@ -792,6 +792,10 @@ export const toStyles = (
 		}
 	} );
 
+	if ( tree?.styles?.css ) {
+		ruleset = ruleset + tree.styles.css;
+	}
+
 	return ruleset;
 };
 
@@ -885,7 +889,6 @@ export function useGlobalStylesOutput() {
 	let { merged: mergedConfig } = useContext( GlobalStylesContext );
 
 	const [ blockGap ] = useSetting( 'spacing.blockGap' );
-	const [ customCSS ] = useStyle( 'css' );
 	const hasBlockGapSupport = blockGap !== null;
 	const hasFallbackGapSupport = ! hasBlockGapSupport; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback styles support.
 	const disableLayoutStyles = useSelect( ( select ) => {
@@ -920,10 +923,6 @@ export function useGlobalStylesOutput() {
 				css: globalStyles,
 				isGlobalStyles: true,
 			},
-			{
-				css: customCSS ?? '',
-				isGlobalStyles: true,
-			},
 		];
 
 		return [ stylesheets, mergedConfig.settings, filters ];
@@ -932,6 +931,5 @@ export function useGlobalStylesOutput() {
 		hasFallbackGapSupport,
 		mergedConfig,
 		disableLayoutStyles,
-		customCSS,
 	] );
 }