Cover: Handling site plan and its errors (#16107)

Co-authored-by: Jeremy Herve <[email protected]>

extensions/editor.js

@@ -6,6 +6,7 @@ import './shared/block-category';
 import './shared/plan-upgrade-notification';
 import './shared/stripe-connection-notification';
 import './shared/external-media';
+import './shared/blocks/cover';
 import analytics from '../_inc/client/lib/analytics';
 
 // @TODO Please make a shared analytics solution and remove this!

extensions/shared/blocks/cover/cover-media-placeholder.js

@@ -0,0 +1,88 @@
+
+/**
+ * WordPress dependencies
+ */
+import { useBlockEditContext } from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import UpgradeNudge from "../../components/upgrade-nudge";
+import { videoFileExtensions } from './utils';
+import { isSimpleSite } from "../../site-type-utils";
+import getJetpackExtensionAvailability from "../../get-jetpack-extension-availability";
+
+/**
+ * Module Constants
+ */
+const ALLOWED_MEDIA_TYPES = [ 'image', 'video' ];
+
+/**
+ * Nudge shows when the user tries to upload a video file.
+ * Unlike the core/video block, handled/extended by the videopress block,
+ * the nudge is not shown permanently.
+ * It's handled by the MediaPlaceholder component
+ * when the user tries to upload a video file.
+ * For this reason, we can't wrap the edit setting
+ * with the wrapPaidBlock() HOC, as the videopress does.
+ *
+ * @param {object}  props - Information about the user.
+ * @param {string}  props.name - Show the Nudge component.
+ * @param {boolean} props.show - Show the Nudge component.
+ * @returns {*} Nudge component or Null.
+ */
+const JetpackCoverUpgradeNudge = ( { name, show } ) =>
+	show
+		? <UpgradeNudge
+			plan="value_bundle"
+			blockName={ name }
+			title={ {
+				knownPlan: __( 'To use a video in this block, upgrade to %(planName)s.', 'jetpack' ),
+				unknownPlan: __( 'To use a video in this block, upgrade to a paid plan.', 'jetpack' ),
+			} }
+			subtitle={ false }
+		/>
+		: null;
+
+export default CoreMediaPlaceholder => props => {
+	const [ error, setError ] = useState( false );
+	const { name } = useBlockEditContext();
+	const { unavailableReason } = getJetpackExtensionAvailability( 'videopress' );
+
+	if (
+		( ! name || name !== 'core/cover' ) || // extend only for cover block
+		! isSimpleSite() || // only for Simple sites
+		! [ 'missing_plan', 'unknown' ].includes( unavailableReason )
+	) {
+		return <CoreMediaPlaceholder { ...props } />;
+	}
+
+	const { onError } = props;
+	return (
+		<div className="jetpack-cover-media-placeholder">
+			<JetpackCoverUpgradeNudge name={ name } show={ !! error } />
+			<CoreMediaPlaceholder
+				{ ...props }
+				multiple={ false }
+				onError = { ( message ) => {
+					// Try to pick up filename from the error message.
+					// We should find a better way to do it. Unstable.
+					const filename = message?.[0]?.props?.children;
+					if ( ! filename ) {
+						return onError( message );
+					}
+
+					const fileExtension = ( filename.split( '.' ) )?.[ 1 ];
+					if ( ! videoFileExtensions.includes( fileExtension ) ) {
+						return onError( message );
+					}
+
+					return setError( message );
+				} }
+				allowedTypes={ ALLOWED_MEDIA_TYPES }
+			/>
+		</div>
+	);
+};

extensions/shared/blocks/cover/editor.scss

@@ -0,0 +1,13 @@
+.jetpack-cover-media-placeholder {
+	width: 100%;
+
+	// tweak Upgrade nudge.
+	.block-editor-warning__contents {
+		flex-wrap: initial;
+
+		.jetpack-block-nudge__text-container,
+		.block-editor-warning__actions {
+			align-self: center;
+		}
+	}
+}

extensions/shared/blocks/cover/index.js

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import coverEditMediaPlaceholder from './cover-media-placeholder';
+import isCurrentUserConnected from "../../is-current-user-connected";
+import './editor.scss';
+
+if ( isCurrentUserConnected() ) {
+	// Take the control of MediaPlaceholder.
+	addFilter(
+		'editor.MediaPlaceholder',
+		'jetpack/cover-edit-media-placeholder',
+		coverEditMediaPlaceholder
+	);
+}

extensions/shared/blocks/cover/utils.js

@@ -0,0 +1,19 @@
+
+export const videoFileExtensions = [
+	'ogv',
+	'mp4',
+	'm4v',
+	'mov',
+	'qt',
+	'wmv',
+	'avi',
+	'mpeg',
+	'mpg',
+	'mpe',
+	'3gp',
+	'3gpp',
+	'3g2',
+	'3gp2',
+	'3gp',
+	'3g2',
+];

extensions/shared/components/block-nudge/index.jsx

@@ -30,7 +30,7 @@ export const BlockNudge = ( { autosaveAndRedirect, buttonLabel, href, icon, subt
 			{ icon }
 			<span className="jetpack-block-nudge__text-container">
 				<span className="jetpack-block-nudge__title">{ title }</span>
-				<span className="jetpack-block-nudge__message">{ subtitle }</span>
+				{ subtitle && <span className="jetpack-block-nudge__message">{ subtitle }</span> }
 			</span>
 		</span>
 	</Warning>

extensions/shared/components/upgrade-nudge/index.jsx

@@ -32,6 +32,31 @@ const getTitle = ( customTitle, planName ) => {
 		: __( 'Upgrade to a paid plan to use this block on your site.', 'jetpack' );
 };
 
+/**
+ * Return the nudge description translated to the user language, or Null.
+ * `subtitle` param accepts three types:
+ * - A string, in which case it will translate and returned.
+ * - False (boolean), in which case it will return false
+ * - Undefined: it will return the default nudge description.
+ *
+ * @param {string|boolean} subtitle - Subtitle to translate, or False.
+ * @returns {string|null} Nudge description, or Null.
+ */
+const getSubtitle = ( subtitle ) => {
+	if ( subtitle === false ) {
+		return null;
+	}
+
+	if ( ! subtitle ) {
+		return __(
+			'You can try it out before upgrading, but only you will see it. It will be hidden from your visitors until you upgrade.',
+			'jetpack'
+		);
+	}
+
+	return subtitle;
+};
+
 export const UpgradeNudge = ( {
 	planName,
 	trackViewEvent,
@@ -61,14 +86,7 @@ export const UpgradeNudge = ( {
 			href={ upgradeUrl }
 			onClick={ trackClickEvent }
 			title={ getTitle( title, planName ) }
-			subtitle={
-				subtitle
-					? subtitle
-					: __(
-							'You can try it out before upgrading, but only you will see it. It will be hidden from your visitors until you upgrade.',
-							'jetpack'
-					  )
-			}
+			subtitle={ getSubtitle( subtitle ) }
 		/>
 	);
 };