Add compat styles in proper order

WordPress · Jun 2, 2023 · 5f13723 · 5f13723
1 parent 898f62c
commit 5f13723
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/packages/block-editor/src/components/iframe/use-compatibility-styles.js b/packages/block-editor/src/components/iframe/use-compatibility-styles.js
@@ -70,10 +70,6 @@ export function useCompatibilityStyles() {
 				}
 
 				if ( matchFromRules( cssRules ) ) {
-					// Display warning once we have a way to add style dependencies to the editor.
-					// See: https://github.com/WordPress/gutenberg/pull/37466.
-					accumulator.push( ownerNode.cloneNode( true ) );
-
 					const isInline = ownerNode.tagName === 'STYLE';
 
 					// Add inline styles belonging to the stylesheet.
@@ -83,7 +79,15 @@ export function useCompatibilityStyles() {
 					);
 					const otherElement = document.getElementById( inlineCssId );
 
-					if ( otherElement ) {
+					// If the matched stylesheet is inline, add the main
+					// stylesheet before the inline style element.
+					if ( otherElement && isInline ) {
+						accumulator.push( otherElement.cloneNode( true ) );
+					}
+
+					accumulator.push( ownerNode.cloneNode( true ) );
+
+					if ( otherElement && ! isInline ) {
 						accumulator.push( otherElement.cloneNode( true ) );
 					}
 				}