Pass only modified media-placeholder styles

WordPress · Jul 15, 2020 · 7aec919 · 7aec919
1 parent a0cd93b
commit 7aec919
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 81 deletions.
diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js
@@ -20,7 +20,7 @@ import { Icon, plusCircleFilled } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import defaultStyles from './styles.scss';
+import styles from './styles.scss';
 
 // remove duplicates after gallery append
 const dedupMedia = ( media ) =>
@@ -44,11 +44,10 @@ function MediaPlaceholder( props ) {
 		multiple,
 		value = [],
 		children,
-		customStyles,
+		customEmptyStateContainer,
+		customEmptyStateTitle,
 	} = props;
 
-	const styles = customStyles === undefined ? defaultStyles : customStyles;
-
 	// use ref to keep media array current for callbacks during rerenders
 	const mediaRef = useRef( value );
 	mediaRef.current = value;
@@ -95,7 +94,7 @@ function MediaPlaceholder( props ) {
 	}
 
 	const emptyStateTitleStyle = getStylesFromColorScheme(
-		styles.emptyStateTitle,
+		[ styles.emptyStateTitle, props.customEmptyStateTitle ],
 		styles.emptyStateTitleDark
 	);
 	const addMediaButtonStyle = getStylesFromColorScheme(
@@ -138,7 +137,7 @@ function MediaPlaceholder( props ) {
 		styles.appenderDark
 	);
 	const emptyStateContainerStyle = getStylesFromColorScheme(
-		styles.emptyStateContainer,
+		[ styles.emptyStateContainer, props.customEmptyStateContainer ],
 		styles.emptyStateContainerDark
 	);
 

diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js
@@ -47,7 +47,6 @@ import { getProtocol } from '@wordpress/url';
  * Internal dependencies
  */
 import styles from './style.scss';
-import placeholderStyles from './media-placeholder.scss';
 import {
 	attributesFromMedia,
 	COVER_MIN_HEIGHT,
@@ -347,7 +346,12 @@ const Cover = ( {
 		return (
 			<View>
 				<MediaPlaceholder
-					customStyles={ placeholderStyles }
+					customEmptyStateContainer={
+						styles.mediaPlaceholderEmptyStateContainer
+					}
+					customEmptyStateTitle={
+						styles.mediaPlaceholderEmptyStateTitle
+					}
 					icon={ placeholderIcon }
 					labels={ {
 						title: __( 'Cover' ),

diff --git a/packages/block-library/src/cover/media-placeholder.native.scss b/packages/block-library/src/cover/media-placeholder.native.scss
diff --git a/packages/block-library/src/cover/style.native.scss b/packages/block-library/src/cover/style.native.scss
@@ -100,3 +100,12 @@
 	width: 32px;
 	height: 32px;
 }
+
+.mediaPlaceholderEmptyStateContainer {
+	height: 300;
+}
+
+.mediaPlaceholderEmptyStateTitle {
+	margin-top: 4;
+	margin-bottom: 16;
+}