From 88cf335f7a22eefff8c874e40d8c4d698f0f4a8b Mon Sep 17 00:00:00 2001
From: mxkae <tapiamkr@gmail.com>
Date: Wed, 4 Oct 2023 15:00:53 +0800
Subject: [PATCH] get theme styles

---
 .../typography/get-theme-styles.js            | 22 +++++++++++++++++++
 .../global-settings/typography/index.js       |  2 ++
 2 files changed, 24 insertions(+)
 create mode 100644 src/plugins/global-settings/typography/get-theme-styles.js

diff --git a/src/plugins/global-settings/typography/get-theme-styles.js b/src/plugins/global-settings/typography/get-theme-styles.js
new file mode 100644
index 000000000..95984ea5c
--- /dev/null
+++ b/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
+}
diff --git a/src/plugins/global-settings/typography/index.js b/src/plugins/global-settings/typography/index.js
index 2410c3091..9fa476e24 100644
--- a/src/plugins/global-settings/typography/index.js
+++ b/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 ) => {