Update start blank in template pattern suggestions

WordPress · Apr 28, 2023 · 5be9cd8 · 5be9cd8
1 parent de44e44
commit 5be9cd8
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git a/packages/edit-site/src/components/start-template-options/index.js b/packages/edit-site/src/components/start-template-options/index.js
@@ -7,6 +7,7 @@ import { useState, useEffect, useMemo } from '@wordpress/element';
 import {
 	__experimentalBlockPatternsList as BlockPatternsList,
 	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { useAsyncList } from '@wordpress/compose';
@@ -20,6 +21,9 @@ import { store as editSiteStore } from '../../store';
 import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
+import { unlock } from '../../private-apis';
+
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 function useFallbackTemplateContent( slug, isCustom = false ) {
 	const [ templateContent, setTemplateContent ] = useState( '' );
@@ -55,6 +59,13 @@ function useStartPatterns( fallbackContent ) {
 	return useMemo( () => {
 		// filter patterns that are supposed to be used in the current template being edited.
 		return [
+			{
+				name: 'start-blank',
+				blocks: parse(
+					'<!-- wp:paragraph --><p></p><!-- /wp:paragraph -->'
+				),
+				title: START_BLANK_TITLE,
+			},
 			{
 				name: 'fallback',
 				blocks: parse( fallbackContent ),
@@ -72,13 +83,6 @@ function useStartPatterns( fallbackContent ) {
 				.map( ( pattern ) => {
 					return { ...pattern, blocks: parse( pattern.content ) };
 				} ),
-			{
-				name: 'start-blank',
-				blocks: parse(
-					'<!-- wp:paragraph --><p></p><!-- /wp:paragraph -->'
-				),
-				title: START_BLANK_TITLE,
-			},
 		];
 	}, [ fallbackContent, slug, patterns ] );
 }
@@ -88,11 +92,18 @@ function PatternSelection( { fallbackContent, onChoosePattern, postType } ) {
 	const blockPatterns = useStartPatterns( fallbackContent );
 	const shownBlockPatterns = useAsyncList( blockPatterns );
 
+	const [ textColor = 'black' ] = useGlobalStyle( 'color.text' );
+	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
+	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
 	return (
 		<div
 			className="edit-site-start-template-options__pattern-container"
 			style={ {
 				'--wp-edit-site-start-template-options-start-blank': `"${ START_BLANK_TITLE }"`,
+				'--wp-edit-site-start-template-options-start-blank-text': `${ textColor }`,
+				'--wp-edit-site-start-template-options-start-blank-background': `${
+					gradientValue || backgroundColor
+				}`,
 			} }
 		>
 			<BlockPatternsList

diff --git a/packages/edit-site/src/components/start-template-options/style.scss b/packages/edit-site/src/components/start-template-options/style.scss
@@ -30,11 +30,13 @@
 	}
 
 	// The start blank pattern is the last and we are selecting it.
-	.block-editor-block-patterns-list__list-item:nth-last-child(2) {
+	.block-editor-block-patterns-list__list-item:nth-child(1) {
+		min-height: $grid-unit-50 * 4;
 		.block-editor-block-preview__container {
 			position: absolute;
 			padding: 0;
-			background: #f0f0f0;
+			color: var(--wp-edit-site-start-template-options-start-blank-text);
+			background: var(--wp-edit-site-start-template-options-start-blank-background);
 			min-height: $grid-unit-50 * 4;
 			&::after {
 				width: 100%;