RNMobile - Cover block: move attributesFromMedia to shared file, rena…

…med onlyMediaLibrary to __experimental

packages/block-editor/src/components/media-placeholder/index.native.js

@@ -37,7 +37,7 @@ function MediaPlaceholder( props ) {
 		labels = {},
 		icon,
 		onSelect,
-		onlyMediaLibrary,
+		__experimentalOnlyMediaLibrary,
 		isAppender,
 		disableMediaButtons,
 		getStylesFromColorScheme,
@@ -142,7 +142,9 @@ function MediaPlaceholder( props ) {
 			<MediaUpload
 				allowedTypes={ allowedTypes }
 				onSelect={ setMedia }
-				onlyMediaLibrary={ onlyMediaLibrary }
+				__experimentalOnlyMediaLibrary={
+					__experimentalOnlyMediaLibrary
+				}
 				multiple={ multiple }
 				render={ ( { open, getMediaOptions } ) => {
 					return (

packages/block-editor/src/components/media-upload/index.native.js

@@ -97,7 +97,7 @@ export class MediaUpload extends React.Component {
 		const {
 			allowedTypes = [],
 			multiple = false,
-			onlyMediaLibrary,
+			__experimentalOnlyMediaLibrary,
 		} = this.props;
 
 		// disable upload sources for now when multiple flag is set
@@ -110,7 +110,7 @@ export class MediaUpload extends React.Component {
 
 		return this.getAllSources()
 			.filter( ( source ) => {
-				return onlyMediaLibrary
+				return __experimentalOnlyMediaLibrary
 					? source.mediaLibrary
 					: allowedTypes.filter( ( allowedType ) =>
 							source.types.includes( allowedType )

packages/block-library/src/cover/edit.js

@@ -41,13 +41,13 @@ import { cover as icon } from '@wordpress/icons';
  * Internal dependencies
  */
 import {
+	attributesFromMedia,
 	IMAGE_BACKGROUND_TYPE,
 	VIDEO_BACKGROUND_TYPE,
 	COVER_MIN_HEIGHT,
 	backgroundImageStyles,
 	dimRatioToClass,
 } from './shared';
-import { attributesFromMedia } from './utils';
 
 /**
  * Module Constants

packages/block-library/src/cover/edit.native.js

@@ -29,8 +29,8 @@ import { cover as icon } from '@wordpress/icons';
  * Internal dependencies
  */
 import styles from './style.scss';
-import { attributesFromMedia } from './utils';
 import {
+	attributesFromMedia,
 	COVER_MIN_HEIGHT,
 	IMAGE_BACKGROUND_TYPE,
 	VIDEO_BACKGROUND_TYPE,
@@ -54,6 +54,7 @@ const COVER_DEFAULT_HEIGHT = 300;
 
 const Cover = ( {
 	attributes,
+	getStylesFromColorScheme,
 	isAncestorSelected,
 	isParentSelected,
 	isSelected,
@@ -95,29 +96,31 @@ const Cover = ( {
 		setAttributes( { dimRatio: value } );
 	};
 
-	const getOpacity = () => {
+	const getOverlayStyles = () => {
 		// Set opacity to 1 while video support is not available
-		if ( VIDEO_BACKGROUND_TYPE === backgroundType ) {
-			return 1;
-		}
-
-		return url ? dimRatio / 100 : 1;
-	};
+		const opacity =
+			url && VIDEO_BACKGROUND_TYPE !== backgroundType
+				? dimRatio / 100
+				: 1;
 
-	const getOverlayStyles = () => {
 		return [
 			styles.overlay,
 			{
 				backgroundColor:
 					overlayColor && overlayColor.color
 						? overlayColor.color
 						: styles.overlay.color,
-				opacity: getOpacity(),
+				opacity,
 			},
 		];
 	};
 
-	const placeholderIcon = <Icon icon={ icon } { ...styles.icon } />;
+	const placeholderIconStyle = getStylesFromColorScheme(
+		styles.icon,
+		styles.iconDark
+	);
+
+	const placeholderIcon = <Icon icon={ icon } { ...placeholderIconStyle } />;
 
 	const controls = (
 		<InspectorControls>
@@ -160,12 +163,12 @@ const Cover = ( {
 	if ( ! hasBackground ) {
 		return (
 			<MediaPlaceholder
+				__experimentalOnlyMediaLibrary={ true }
 				icon={ placeholderIcon }
 				labels={ {
 					title: __( 'Cover' ),
 				} }
 				onSelect={ onSelectMedia }
-				onlyMediaLibrary={ true }
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
 				onFocus={ onFocus }
 			/>

packages/block-library/src/cover/shared.js

@@ -10,3 +10,41 @@ export function dimRatioToClass( ratio ) {
 		? null
 		: 'has-background-dim-' + 10 * Math.round( ratio / 10 );
 }
+
+export function attributesFromMedia( setAttributes ) {
+	return ( media ) => {
+		if ( ! media || ! media.url ) {
+			setAttributes( { url: undefined, id: undefined } );
+			return;
+		}
+		let mediaType;
+		// for media selections originated from a file upload.
+		if ( media.media_type ) {
+			if ( media.media_type === IMAGE_BACKGROUND_TYPE ) {
+				mediaType = IMAGE_BACKGROUND_TYPE;
+			} else {
+				// only images and videos are accepted so if the media_type is not an image we can assume it is a video.
+				// Videos contain the media type of 'file' in the object returned from the rest api.
+				mediaType = VIDEO_BACKGROUND_TYPE;
+			}
+		} else {
+			// for media selections originated from existing files in the media library.
+			if (
+				media.type !== IMAGE_BACKGROUND_TYPE &&
+				media.type !== VIDEO_BACKGROUND_TYPE
+			) {
+				return;
+			}
+			mediaType = media.type;
+		}
+
+		setAttributes( {
+			url: media.url,
+			id: media.id,
+			backgroundType: mediaType,
+			...( mediaType === VIDEO_BACKGROUND_TYPE
+				? { focalPoint: undefined, hasParallax: undefined }
+				: {} ),
+		} );
+	};
+}

packages/block-library/src/cover/style.native.scss

@@ -4,6 +4,10 @@
 	width: 24px;
 }
 
+.iconDark {
+	fill: $white;
+}
+
 .innerPadding {
 	padding: $block-selected-to-content;
 }