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
WordPress · Mar 1, 2022 · 8a54a63 · 8a54a63
1 parent 5f8a9ee
commit 8a54a63
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
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
@@ -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
@@ -33,6 +33,7 @@ html {
 		display: block;
 		width: 100%;
 		height: 100%;
+		padding-top: 32px;
 		background-color: $white;
 	}
 }