RNMobile - Cover Block: First iteration (#19722)

* RNMobile - Cover Block - First iteration

* Remove allowed blocks

* Fix content height

* RNMobile - Update Heading and Paragraph blocks to use __experimentalUseColors

* RNMobile - Cover block: import correct icon

* RNMobile - Cover block - Default color text for InnerBlocks

* Mock use select

* RNMobile - Cover block - Use memo from element, don't set min height if the content has higher height

* RNMobile - Cover Block - Prettier and get opacity logic improvement

* Cover block: Move onCoverSelectMedia to a utils file to be shared with mobile and renaming to attributesFromMedia

* RNMobile - Cover block: don't set fontSize by default since it is not supported yet

* RNMobile - ImageWithFocalPoint - Move container logic to component and prettier formatting

* RNMobile - Cover block: move attributesFromMedia to shared file, renamed onlyMediaLibrary to __experimental

* RNMobile - Enable Cover block for testing

* RNMobile - Cover block - Allow changing the image and fix blocks with solid background

* RNMobile - Cover - Fallback for theme colors

* RNMobile - Cover - Fix paddings for cover blocks with and without innerblocks

* RNMobile - Cover - Overlay styles as a const instead of a function

* RNMobile - Cover block - Remove duplicated export

* RNMobile - Paragraph - Test mock import

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

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

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

@@ -51,6 +51,7 @@ const siteLibrarySource = {
 	label: __( 'WordPress Media Library' ),
 	types: [ MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO ],
 	icon: wordpress,
+	mediaLibrary: true,
 };
 
 const internalSources = [
@@ -94,15 +95,18 @@ export class MediaUpload extends React.Component {
 	}
 
 	getMediaOptionsItems() {
-		const { allowedTypes = [] } = this.props;
+		const {
+			allowedTypes = [],
+			__experimentalOnlyMediaLibrary,
+		} = this.props;
 
 		return this.getAllSources()
 			.filter( ( source ) => {
-				return (
-					allowedTypes.filter( ( allowedType ) =>
-						source.types.includes( allowedType )
-					).length > 0
-				);
+				return __experimentalOnlyMediaLibrary
+					? source.mediaLibrary
+					: allowedTypes.filter( ( allowedType ) =>
+							source.types.includes( allowedType )
+					  ).length > 0;
 			} )
 			.map( ( source ) => {
 				return {
@@ -140,6 +144,7 @@ export class MediaUpload extends React.Component {
 		const types = allowedTypes.filter( ( type ) =>
 			mediaSource.types.includes( type )
 		);
+
 		requestMediaPicker( mediaSource.id, types, multiple, ( media ) => {
 			if ( ( multiple && media ) || ( media && media.id ) ) {
 				onSelect( media );

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

@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, Rect, SVG } from '@wordpress/components';
+
+export const EditMediaIcon = (
+	<SVG width={ 20 } height={ 20 } viewBox="0 0 20 20">
+		<Rect x={ 11 } y={ 3 } width={ 7 } height={ 5 } rx={ 1 } />
+		<Rect x={ 2 } y={ 12 } width={ 7 } height={ 5 } rx={ 1 } />
+		<Path d="M13,12h1a3,3,0,0,1-3,3v2a5,5,0,0,0,5-5h1L15,9Z" />
+		<Path d="M4,8H3l2,3L7,8H6A3,3,0,0,1,9,5V3A5,5,0,0,0,4,8Z" />
+	</SVG>
+);

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

@@ -41,6 +41,7 @@ import { cover as icon } from '@wordpress/icons';
  * Internal dependencies
  */
 import {
+	attributesFromMedia,
 	IMAGE_BACKGROUND_TYPE,
 	VIDEO_BACKGROUND_TYPE,
 	COVER_MIN_HEIGHT,
@@ -159,44 +160,6 @@ function ResizableCover( {
 	);
 }
 
-function onCoverSelectMedia( 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 }
-				: {} ),
-		} );
-	};
-}
-
 /**
  * useCoverIsDark is a hook that returns a boolean variable specifying if the cover
  * background is dark or not.
@@ -271,7 +234,7 @@ function CoverEdit( {
 		gradientValue,
 		setGradient,
 	} = __experimentalUseGradient();
-	const onSelectMedia = onCoverSelectMedia( setAttributes );
+	const onSelectMedia = attributesFromMedia( setAttributes );
 
 	const toggleParallax = () => {
 		setAttributes( {