RNMobile - Cover Block: First iteration

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

@@ -1,4 +1,5 @@
 // Block Creation Components
+export * from './gradients';
 export { default as BlockAlignmentToolbar } from './block-alignment-toolbar';
 export { default as BlockControls } from './block-controls';
 export { default as BlockEdit, useBlockEditContext } from './block-edit';

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

@@ -28,6 +28,7 @@ function MediaPlaceholder( props ) {
 		labels = {},
 		icon,
 		onSelect,
+		onlyMediaLibrary,
 		isAppender,
 		disableMediaButtons,
 		getStylesFromColorScheme,
@@ -115,6 +116,7 @@ function MediaPlaceholder( props ) {
 			<MediaUpload
 				allowedTypes={ allowedTypes }
 				onSelect={ setMedia }
+				onlyMediaLibrary={ onlyMediaLibrary }
 				multiple={ multiple }
 				render={ ( { open, getMediaOptions } ) => {
 					return (

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

@@ -50,6 +50,7 @@ const siteLibrarySource = {
 	label: __( 'WordPress Media Library' ),
 	types: [ MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO ],
 	icon: 'wordpress-alt',
+	mediaLibrary: true,
 };
 
 const internalSources = [ deviceLibrarySource, cameraImageSource, cameraVideoSource, siteLibrarySource ];
@@ -86,7 +87,7 @@ export class MediaUpload extends React.Component {
 	}
 
 	getMediaOptionsItems() {
-		const { allowedTypes = [], multiple = false } = this.props;
+		const { allowedTypes = [], multiple = false, onlyMediaLibrary } = this.props;
 
 		// disable upload sources for now when multiple flag is set
 		// eslint-disable-next-line no-undef
@@ -97,7 +98,7 @@ export class MediaUpload extends React.Component {
 		}
 
 		return this.getAllSources().filter( ( source ) => {
-			return allowedTypes.filter( ( allowedType ) => source.types.includes( allowedType ) ).length > 0;
+			return onlyMediaLibrary ? source.mediaLibrary : allowedTypes.filter( ( allowedType ) => source.types.includes( allowedType ) ).length > 0;
 		} ).map( ( source ) => {
 			return {
 				...source,
@@ -130,6 +131,7 @@ export class MediaUpload extends React.Component {
 		const { allowedTypes = [], onSelect, multiple = false } = this.props;
 		const mediaSource = this.getAllSources().filter( ( source ) => source.value === value ).shift();
 		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.js

@@ -156,7 +156,7 @@ function ResizableCover( {
 	);
 }
 
-function onCoverSelectMedia( setAttributes ) {
+export function onCoverSelectMedia( setAttributes ) {
 	return ( media ) => {
 		if ( ! media || ! media.url ) {
 			setAttributes( { url: undefined, id: undefined } );

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

@@ -0,0 +1,221 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	Icon,
+	ImageWithFocalPoint,
+	PanelBody,
+	RangeControl,
+} from '@wordpress/components';
+import {
+	InnerBlocks,
+	InspectorControls,
+	MEDIA_TYPE_IMAGE,
+	MediaPlaceholder,
+	withColors,
+} from '@wordpress/block-editor';
+import { compose, withPreferredColorScheme } from '@wordpress/compose';
+import { withSelect } from '@wordpress/data';
+import { useState, useEffect } from '@wordpress/element';
+import { cover as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+import { onCoverSelectMedia } from './edit.js';
+import { COVER_MIN_HEIGHT, IMAGE_BACKGROUND_TYPE, VIDEO_BACKGROUND_TYPE } from './shared';
+
+/**
+ * Constants
+ */
+const ALLOWED_MEDIA_TYPES = [ MEDIA_TYPE_IMAGE ];
+const INNER_BLOCKS_TEMPLATE = [
+	[ 'core/paragraph', {
+		align: 'center',
+		fontSize: 'large',
+		placeholder: __( 'Write title…' ),
+	} ],
+];
+const COVER_MAX_HEIGHT = 1000;
+const COVER_DEFAULT_HEIGHT = 300;
+
+const Cover = ( {
+	attributes,
+	isAncestorSelected,
+	isParentSelected,
+	isSelected,
+	onFocus,
+	overlayColor,
+	setAttributes,
+} ) => {
+	const {
+		backgroundType,
+		dimRatio,
+		focalPoint,
+		gradientValue,
+		minHeight,
+		url,
+	} = attributes;
+	const [ containerSize, setContainerSize ] = useState( null );
+	const CONTAINER_HEIGHT = minHeight || COVER_DEFAULT_HEIGHT;
+
+	// Used to set a default color for its InnerBlocks
+	// since there's no system to inherit styles yet
+	// the RichText component will check if there are
+	// parent styles for the current block. If there are,
+	// it will use that color instead.
+	useEffect( () => {
+		setAttributes( { childrenStyles: styles.defaultColor } );
+	}, [ setAttributes ] );
+
+	const onSelectMedia = ( media ) => {
+		const onSelect = onCoverSelectMedia( setAttributes );
+		onSelect( media );
+	};
+
+	const onHeightChange = ( value ) => {
+		if ( minHeight || value !== COVER_DEFAULT_HEIGHT ) {
+			setAttributes( { minHeight: value } );
+		}
+	};
+
+	const onOpactiyChange = ( value ) => {
+		setAttributes( { dimRatio: value } );
+	};
+
+	const onContainerLayout = ( event ) => {
+		const { height, width } = event.nativeEvent.layout;
+		setContainerSize( { width, height } );
+	};
+
+	const getOpacity = () => {
+		// Set opacity to 1 while video support is not available
+		if ( VIDEO_BACKGROUND_TYPE === backgroundType ) {
+			return 1;
+		}
+
+		if ( url ) {
+			return dimRatio !== 0 ? dimRatio / 100 : 0;
+		}
+
+		return url ? 0.5 : 1;
+	};
+
+	const getOverlayStyles = () => {
+		return [
+			styles.overlay,
+			{
+				backgroundColor: overlayColor && overlayColor.color ? overlayColor.color : styles.overlay.color,
+				opacity: getOpacity(),
+			},
+		];
+	};
+
+	const placeholderIcon = <Icon icon={ icon } { ...styles.icon } />;
+
+	const controls = (
+		<InspectorControls>
+			<PanelBody title={ __( 'Dimensions' ) } >
+				<RangeControl
+					label={ __( 'Minimum height in pixels' ) }
+					minimumValue={ COVER_MIN_HEIGHT }
+					maximumValue={ COVER_MAX_HEIGHT }
+					separatorType={ 'none' }
+					value={ CONTAINER_HEIGHT }
+					onChange={ onHeightChange }
+					style={ styles.rangeCellContainer }
+				/>
+			</PanelBody>
+			{ url ?
+				<PanelBody title={ __( 'Overlay' ) } >
+					<RangeControl
+						label={ __( 'Background Opacity' ) }
+						minimumValue={ 0 }
+						maximumValue={ 100 }
+						separatorType={ 'none' }
+						value={ dimRatio }
+						onChange={ onOpactiyChange }
+						style={ styles.rangeCellContainer }
+					/>
+				</PanelBody> : null }
+		</InspectorControls>
+	);
+
+	const hasBackground = !! ( url || overlayColor.color || gradientValue );
+
+	const containerStyles = {
+		...( isParentSelected || isAncestorSelected ? styles.denseMediaPadding : styles.regularMediaPadding ),
+		...( isSelected && styles.innerPadding ),
+	};
+
+	if ( ! hasBackground ) {
+		return <MediaPlaceholder
+			icon={ placeholderIcon }
+			labels={ {
+				title: __( 'Cover' ),
+			} }
+			onSelect={ onSelectMedia }
+			onlyMediaLibrary={ true }
+			allowedTypes={ ALLOWED_MEDIA_TYPES }
+			onFocus={ onFocus }
+		/>;
+	}
+
+	return (
+		<View style={ containerStyles }>
+			{ controls }
+			<View
+				onLayout={ onContainerLayout }
+				style={ [ styles.backgroundContainer ] }>
+				<View style={ [ styles.content, { minHeight: CONTAINER_HEIGHT } ] } >
+					<InnerBlocks
+						template={ INNER_BLOCKS_TEMPLATE }
+					/>
+				</View>
+
+				<View style={ getOverlayStyles() } />
+
+				{ IMAGE_BACKGROUND_TYPE === backgroundType && (
+					<ImageWithFocalPoint
+						containerSize={ containerSize }
+						contentHeight={ containerSize ? containerSize.height : CONTAINER_HEIGHT }
+						focalPoint={ focalPoint }
+						url={ url }
+					/>
+				) }
+			</View>
+		</View>
+	);
+};
+
+export default compose( [
+	withColors( { overlayColor: 'background-color' } ),
+	withSelect( ( select, { clientId } ) => {
+		const {
+			getSelectedBlockClientId,
+			getBlockRootClientId,
+			getBlockParents,
+		} = select( 'core/block-editor' );
+
+		const parents = getBlockParents( clientId, true );
+
+		const selectedBlockClientId = getSelectedBlockClientId();
+		const isParentSelected = selectedBlockClientId && selectedBlockClientId === getBlockRootClientId( clientId );
+		const isAncestorSelected = selectedBlockClientId && parents.includes( selectedBlockClientId );
+
+		return {
+			isSelected: selectedBlockClientId === clientId,
+			isParentSelected,
+			isAncestorSelected,
+		};
+	} ),
+	withPreferredColorScheme,
+] )( Cover );
+

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

@@ -0,0 +1,41 @@
+.icon {
+	fill: $gray-dark;
+	height: 24px;
+	width: 24px;
+}
+
+.innerPadding {
+	padding: $block-selected-to-content;
+}
+
+.regularMediaPadding {
+	padding: $block-edge-to-content;
+}
+
+.denseMediaPadding {
+	padding: $block-media-container-to-content;
+}
+
+.backgroundContainer {
+	overflow: hidden;
+	width: 100%;
+	position: relative;
+}
+
+.content {
+	justify-content: center;
+	width: 100%;
+	z-index: 3;
+}
+
+.overlay {
+	width: 100%;
+	height: 100%;
+	z-index: 2;
+	color: $black;
+	position: absolute;
+}
+
+.defaultColor {
+	color: $white;
+}