get theme styles

src/plugins/global-settings/typography/get-theme-styles.js

@@ -0,0 +1,22 @@
+export const getThemeStyles = () => {
+	const iframe = document.querySelector( 'iframe[name="editor-canvas"]' )
+	let themeStyles = ''
+
+	if ( iframe ) {
+		const doc = iframe.contentDocument || iframe.contentWindow.document
+
+		// theme styles are stored in <style> tags that are direct children of body
+		let styleList = doc.querySelectorAll( 'body style' )
+
+		// converts node list to array
+		styleList = Array.from( styleList )
+
+		styleList.forEach( style => {
+			// retrieves css rules with .editor-styles-wrapper only
+			if ( ! style.hasAttribute( 'id' ) && style.innerHTML.includes( '.editor-styles-wrapper' ) ) {
+				themeStyles += style.innerHTML
+			}
+		} )
+	}
+	return themeStyles
+}

src/plugins/global-settings/typography/index.js

@@ -3,6 +3,7 @@
  */
 import { GlobalTypographyStyles } from './editor-loader'
 import TypographyPicker from './typography-picker'
+import { getThemeStyles } from './get-theme-styles'
 
 /**
  * External dependencies
@@ -163,6 +164,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
 					default="blocks-stackable-native"
 				/>
 				<ControlSeparator />
+				<style> { getThemeStyles() } </style>
 				{ TYPOGRAPHY_TAGS.map( ( {
 					label, selector, help,
 				}, index ) => {