Update page template picker after design review (#20883)

* Make title bar smaller * Introduce new usePreferredColorSchemeStyle hook * Add top space to template previews * Adjust height of preview header and refactor a bit * Fix typo in useViewportMatch documentation Co-authored-by: Pinar Olguc <[email protected]>
WordPress · Mar 17, 2020 · c77cef6 · c77cef6
1 parent 390eac2
commit c77cef6
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 10 deletions.
diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js
@@ -131,7 +131,7 @@ export class BlockList extends Component {
 						this.shouldFlatListPreventAutomaticScroll
 					}
 					title={ title }
-					ListHeaderComponent={ ! isReadOnly && header }
+					ListHeaderComponent={ header }
 					ListEmptyComponent={
 						! isReadOnly && this.renderDefaultBlockAppender
 					}

diff --git a/packages/block-editor/src/components/page-template-picker/preview.native.js b/packages/block-editor/src/components/page-template-picker/preview.native.js
@@ -3,7 +3,7 @@
  */
 import { BlockEditorProvider, BlockList } from '@wordpress/block-editor';
 import { ModalHeaderBar } from '@wordpress/components';
-import { usePreferredColorScheme } from '@wordpress/compose';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
@@ -12,6 +12,11 @@ import { __ } from '@wordpress/i18n';
  */
 import { Modal, View, SafeAreaView } from 'react-native';
 
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+
 // We are replicating this here because the one in @wordpress/block-editor always
 // tries to scale the preview and we would need a lot of cross platform code to handle
 // sizes, when we actually want to show the preview at full width.
@@ -27,10 +32,12 @@ const BlockPreview = ( { blocks } ) => {
 		readOnly: true,
 	};
 
+	const header = <View style={ styles.previewHeader } />;
+
 	return (
 		<BlockEditorProvider value={ blocks } settings={ settings }>
 			<View style={ { flex: 1 } }>
-				<BlockList />
+				<BlockList header={ header } />
 			</View>
 		</BlockEditorProvider>
 	);
@@ -39,9 +46,10 @@ BlockPreview.displayName = 'BlockPreview';
 
 const Preview = ( props ) => {
 	const { template, onDismiss, onApply } = props;
-	const preferredColorScheme = usePreferredColorScheme();
-	const containerBackgroundColor =
-		preferredColorScheme === 'dark' ? 'black' : 'white';
+	const previewContainerStyle = usePreferredColorSchemeStyle(
+		styles.previewContainer,
+		styles.previewContainerDark
+	);
 
 	if ( template === undefined ) {
 		return null;
@@ -64,9 +72,7 @@ const Preview = ( props ) => {
 			onRequestClose={ onDismiss }
 			supportedOrientations={ [ 'portrait', 'landscape' ] }
 		>
-			<SafeAreaView
-				style={ { flex: 1, backgroundColor: containerBackgroundColor } }
-			>
+			<SafeAreaView style={ previewContainerStyle }>
 				<ModalHeaderBar
 					leftButton={ leftButton }
 					rightButton={ rightButton }

diff --git a/packages/block-editor/src/components/page-template-picker/styles.native.scss b/packages/block-editor/src/components/page-template-picker/styles.native.scss
@@ -34,3 +34,17 @@
 .buttonTextDark {
 	color: $light-opacity-700;
 }
+
+.previewContainer {
+	flex: 1;
+	background-color: $white;
+}
+
+.previewContainerDark {
+	background-color: $black;
+}
+
+.previewHeader {
+	flex: 0;
+	height: 15px;
+}
diff --git a/packages/components/src/mobile/modal-header-bar/styles.native.scss b/packages/components/src/mobile/modal-header-bar/styles.native.scss
@@ -8,7 +8,7 @@
 }
 
 .subtitleBar {
-	height: 64px;
+	height: 56px;
 }
 
 .leftContainer {

diff --git a/packages/compose/src/hooks/use-preferred-color-scheme-style/index.native.js b/packages/compose/src/hooks/use-preferred-color-scheme-style/index.native.js
@@ -0,0 +1,33 @@
+/**
+ * Internal dependencies
+ */
+import usePreferredColorScheme from '../use-preferred-color-scheme';
+
+/**
+ * Selects which of the passed style objects should be applied depending on the
+ * user's preferred color scheme.
+ *
+ * The "light" color schemed is assumed to be the default, and its styles are
+ * always applied. The "dark" styles will always extend those defined for the
+ * light case.
+ *
+ * @example
+ * const light = { padding: 10, backgroundColor: 'white' };
+ * const dark = { backgroundColor: 'black' };
+ * usePreferredColorSchemeStyle( light, dark);
+ * // On light mode:
+ * // => { padding: 10, backgroundColor: 'white' }
+ * // On dark mode:
+ * // => { padding: 10, backgroundColor: 'black' }
+ * @param {Object} lightStyle
+ * @param {Object} darkStyle
+ * @return {Object} the combined styles depending on the current color scheme
+ */
+const usePreferredColorSchemeStyle = ( lightStyle, darkStyle ) => {
+	const colorScheme = usePreferredColorScheme();
+	const isDarkMode = colorScheme === 'dark';
+
+	return isDarkMode ? { ...lightStyle, ...darkStyle } : lightStyle;
+};
+
+export default usePreferredColorSchemeStyle;
diff --git a/packages/compose/src/index.native.js b/packages/compose/src/index.native.js
@@ -6,4 +6,5 @@ export { default as withPreferredColorScheme } from './higher-order/with-preferr
 
 // Hooks
 export { default as usePreferredColorScheme } from './hooks/use-preferred-color-scheme';
+export { default as usePreferredColorSchemeStyle } from './hooks/use-preferred-color-scheme-style';
 export { default as useResizeObserver } from './hooks/use-resize-observer';