From 8a54a6393365ab5a457827fdb91ef27c84ba00fa Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Tue, 1 Mar 2022 12:26:45 -0500
Subject: [PATCH] Creator: Use Twenty Twenty-One styles in editor (#417)

* Add Twenty Twenty-One styles to the editor to match frontend display

* Add some extra space in the post content
---
 .../pattern-creator/src/components/block-editor/index.js    | 6 ++++++
 .../pattern-creator/src/components/editor/style.scss        | 1 +
 2 files changed, 7 insertions(+)

diff --git a/public_html/wp-content/plugins/pattern-creator/src/components/block-editor/index.js b/public_html/wp-content/plugins/pattern-creator/src/components/block-editor/index.js
index fb654850f..7dafcbf20 100644
--- a/public_html/wp-content/plugins/pattern-creator/src/components/block-editor/index.js
+++ b/public_html/wp-content/plugins/pattern-creator/src/components/block-editor/index.js
@@ -48,6 +48,12 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 	const ref = useMouseMoveTypingReset();
 	const contentRef = useRef();
 	const mergedRefs = useMergeRefs( [ contentRef, useTypingObserver() ] );
+	if ( -1 === settings.__unstableResolvedAssets.styles.indexOf( 'theme-styles' ) ) {
+		settings.__unstableResolvedAssets.styles +=
+			'\n<link rel="stylesheet" id="theme-styles" href="https://wp-themes.com/wp-content/themes/twentytwentyone/style.css" media="all" />';
+		settings.__unstableResolvedAssets.styles +=
+			'\n<style>body.editor-styles-wrapper { background-color: white; }</style>';
+	}
 
 	return (
 		<BlockEditorProvider
diff --git a/public_html/wp-content/plugins/pattern-creator/src/components/editor/style.scss b/public_html/wp-content/plugins/pattern-creator/src/components/editor/style.scss
index b8d66cf3b..cfc95ad5c 100644
--- a/public_html/wp-content/plugins/pattern-creator/src/components/editor/style.scss
+++ b/public_html/wp-content/plugins/pattern-creator/src/components/editor/style.scss
@@ -33,6 +33,7 @@ html {
 		display: block;
 		width: 100%;
 		height: 100%;
+		padding-top: 32px;
 		background-color: $white;
 	}
 }